Mode d'emploi | Adobe Dreamweaver CS5.5 Manuel utilisateur

Ajouter à Mes manuels
726 Des pages
Utilisation de
ADOBE&reg; DREAMWEAVER&reg; CS5 &amp; CS5.5
Mentions l&eacute;gales
Mentions l&eacute;gales
Vous trouverez des informations juridiques &agrave; l'adresse http://help.adobe.com/fr_FR/legalnotices/index.html.
Derni&egrave;re mise &agrave; jour le 4/5/2011
iii
Sommaire
Chapitre 1 : Nouveaut&eacute;s
Nouveaut&eacute;s (CS5.5) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Nouveaut&eacute;s (CS5)
..................................................................................................... 1
Chapitre 2 : Espace de travail
D&eacute;roulement du travail et espace de travail dans Dreamweaver
Utilisation de la fen&ecirc;tre de document
......................................................... 4
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Utilisation de barres d'outils, d'inspecteurs et de menus contextuels
Personnalisation de l'espace de travail de CS5
Raccourcis clavier
Extensions
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Chapitre 3 : Utilisation de sites Dreamweaver
Configuration d'un site Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Gestion des sites Contribute avec Dreamweaver
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Chapitre 4 : Cr&eacute;ation et gestion de fichiers
Cr&eacute;ation et ouverture de documents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Gestion des fichiers et des dossiers
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Acquisition et placement de fichiers depuis ou vers votre serveur
Archivage et extraction de fichiers
Synchronisation de fichiers
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Comparaison de fichiers pour en chercher les diff&eacute;rences
Restauration de fichiers (utilisateurs de Contribute)
Voilage de fichiers et de dossiers dans votre site
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Stockage des informations sur les fichiers dans des Design Notes
Test de votre site
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
Chapitre 5 : Gestion des actifs et des biblioth&egrave;ques
A propos des actifs et des biblioth&egrave;ques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Utilisation des actifs
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
Cr&eacute;ation et gestion d'une liste d'actifs favoris
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
Utilisation des &eacute;l&eacute;ments de biblioth&egrave;que
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
Chapitre 6 : Cr&eacute;ation de pages avec CSS
Description des feuilles de style en cascade
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
Cr&eacute;ation et gestion de CSS
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Mise en forme des pages avec CSS
Utilisation des balises div
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
Chapitre 7 : Mise en forme des pages avec HTML
Utilisation d'assistances visuelles pour la mise en forme
Pr&eacute;sentation de contenu &agrave; l'aide de tableaux
Utilisation de cadres
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Derni&egrave;re mise &agrave; jour le 4/5/2011
iv
UTILISATION DE DREAMWEAVER
Sommaire
Chapitre 8 : Ajout de contenu dans les pages
Utilisation des pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
Ajout et formatage de texte
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
Ajout et modification d'images
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243
Incorporation de vid&eacute;os aux pages Web (HTML5)
Insertion de fichiers SWF
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
Insertion de fichiers FLV
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259
Ajout de widgets Web
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
Ajout de s&eacute;quences audio
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
Ajout d'autres objets multim&eacute;dias
Automatisation des t&acirc;ches
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276
Chapitre 9 : Liens et navigation
A propos des liens et de la navigation
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282
Etablissement de liens
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284
Menus de reroutage
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292
Barres de navigation
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293
Cartes graphiques
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294
R&eacute;solution des probl&egrave;mes li&eacute;s aux liens
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296
Chapitre 10 : Pr&eacute;visualisation des pages
Pr&eacute;visualisation de pages dans Dreamweaver
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299
Pr&eacute;visualisation des pages dans les navigateurs
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302
Pr&eacute;visualisation des pages dans les p&eacute;riph&eacute;riques mobiles
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303
Chapitre 11 : Utilisation de code de page
Informations g&eacute;n&eacute;rales sur le codage dans Dreamweaver
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304
Configuration d'un environnement de codage
D&eacute;finition des pr&eacute;f&eacute;rences de codage
R&eacute;daction et modification de code
R&eacute;duction du code
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334
Optimisation et d&eacute;bogage de code
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336
Modification de code en mode Cr&eacute;ation
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342
Utilisation de contenu d'en-t&ecirc;te pour les pages
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348
Utilisation des inclusions c&ocirc;t&eacute; serveur
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353
Gestion des biblioth&egrave;ques de balises
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355
Importation de balises personnalis&eacute;es dans Dreamweaver
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358
Chapitre 12 : Ajout de comportements JavaScript
Utilisation des comportements JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360
Application de comportements Dreamweaver int&eacute;gr&eacute;s
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363
Chapitre 13 : Utilisation d'autres applications
Int&eacute;gration entre les applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375
Utilisation de Fireworks et Dreamweaver
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 376
Utilisation de Photoshop et Dreamweaver
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382
Utilisation de Flash et Dreamweaver
Utilisation d'Adobe Bridge
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 393
Derni&egrave;re mise &agrave; jour le 4/5/2011
v
UTILISATION DE DREAMWEAVER
Sommaire
Utilisation de Device Central
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395
Utilisation de ConnectNow
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 396
Extension AIR pour Dreamweaver
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397
Chapitre 14 : Cr&eacute;ation et gestion des mod&egrave;les
A propos des mod&egrave;les Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403
Reconnaissance des mod&egrave;les et des documents bas&eacute;s sur un mod&egrave;le
Cr&eacute;ation d'un mod&egrave;le Dreamweaver
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411
Cr&eacute;ation de r&eacute;gions modifiables
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414
Cr&eacute;ation de r&eacute;gions r&eacute;p&eacute;t&eacute;es
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 416
Utilisation des r&eacute;gions facultatives
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 418
D&eacute;finition d'attributs de balise modifiables
Cr&eacute;ation d'un mod&egrave;le imbriqu&eacute;
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 422
Modification, mise &agrave; jour et suppression de mod&egrave;les
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425
Exportation et importation du contenu d'un mod&egrave;le
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 429
Application ou suppression d'un mod&egrave;le depuis un document existant
Modification du contenu d'un document bas&eacute; sur un mod&egrave;le
Syntaxe des mod&egrave;les
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 430
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 432
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 435
D&eacute;finition de pr&eacute;f&eacute;rences de programmation pour les mod&egrave;les
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 436
Chapitre 15 : Cr&eacute;ation de pages Spry visuellement
A propos du cadre applicatif Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 438
Utilisation des widgets Spry (instructions g&eacute;n&eacute;rales)
Utilisation du widget Accord&eacute;on
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 438
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 440
Utilisation du widget Barre de menus
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 443
Utilisation du widget Panneau r&eacute;ductible
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 449
Utilisation du widget Panneau &agrave; onglet
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 451
Utilisation du widget Info-bulle
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 454
Utilisation du widget Validation de groupe de boutons radio
Utilisation du widget Validation de zone de texte
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 456
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 460
Utilisation du widget Zone de texte de validation
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465
Utilisation du widget Validation de la s&eacute;lection
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 468
Utilisation du widget Validation de case &agrave; cocher
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 471
Utilisation du widget Validation de mot de passe
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 474
Utilisation du widget Validation de confirmation
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 478
Affichage de donn&eacute;es &agrave; l'aide de Spry
Ajout d'effets Spry
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 481
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 495
Chapitre 16 : Cr&eacute;ation de contenu pour &eacute;crans et appareils multiples
Cr&eacute;ation de requ&ecirc;tes multim&eacute;dias (CS 5.5) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 500
Modification de l'orientation de la page (CS 5.5)
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 502
Cr&eacute;ation d'applications Web pour appareils mobiles (CS5.5)
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 502
D&eacute;ploiement d'applications Web sous forme d'applications mobiles natives (CS 5.5)
Aper&ccedil;u des pages avec le panneau Aper&ccedil;u sur &eacute;crans multiples
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 505
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 508
Derni&egrave;re mise &agrave; jour le 4/5/2011
vi
UTILISATION DE DREAMWEAVER
Sommaire
Chapitre 17 : Utilisation des services en ligne Adobe
Services en ligne Adobe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 510
BrowserLab
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 510
Business Catalyst InContext Editing
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 510
Chapitre 18 : Affichage de donn&eacute;es XML avec XSLT
A propos de XML et de XSLT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 517
Ex&eacute;cution de transformations XSL sur le serveur
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 524
Ex&eacute;cution de transformations XSL sur le client
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 541
Entit&eacute;s de caract&egrave;re manquant
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 543
Chapitre 19 : Pr&eacute;paration &agrave; la cr&eacute;ation de sites dynamiques
Description des applications Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 545
Configuration de l'ordinateur pour le d&eacute;veloppement d'applications
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 553
Connexions aux bases de donn&eacute;es pour les d&eacute;veloppeurs ColdFusion
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 558
Connexions aux bases de donn&eacute;es pour les d&eacute;veloppeurs ASP
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 560
Connexions aux bases de donn&eacute;es pour les d&eacute;veloppeurs PHP
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 567
R&eacute;solution des probl&egrave;mes de connexion aux bases de donn&eacute;es
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 569
Suppression de scripts de connexion
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 575
Chapitre 20 : Ajout de contenu dynamique aux pages Web
Optimisation de l'espace de travail pour le d&eacute;veloppement visuel
Conception de pages dynamiques
Pr&eacute;sentation des sources de contenu dynamique
Panneaux de contenu dynamique
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 576
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 579
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 581
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 586
D&eacute;finition de sources de contenu dynamique
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 588
Ajout de contenu dynamique dans les pages
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 603
Modification d'un contenu dynamique
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 607
Affichage des enregistrements de base de donn&eacute;es
Affichage des donn&eacute;es dynamiques
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 609
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 618
Ajout de comportements de serveur personnalis&eacute;s
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 619
Chapitre 21 : Cr&eacute;ation visuelle d'applications
Cr&eacute;ation de pages principales et d&eacute;taill&eacute;es . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 632
Cr&eacute;ation de pages de recherche et de r&eacute;sultats
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 639
Cr&eacute;ation d'une page d'insertion d'enregistrement
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 646
Cr&eacute;ation de pages de mise &agrave; jour d'enregistrements
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 650
Cr&eacute;ation de pages de suppression d'enregistrements
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 655
Cr&eacute;ation de pages avec objets de manipulation de donn&eacute;es avanc&eacute;s (ColdFusion, ASP)
Cr&eacute;ation d'une page d'enregistrement
Cr&eacute;ation d'une page d'ouverture de session
Cr&eacute;ation d'une page &agrave; acc&egrave;s restreint
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 671
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 673
S&eacute;curisation d’un dossier dans votre application (ColdFusion)
Utilisation de composants ColdFusion
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 663
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 668
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 676
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 676
Derni&egrave;re mise &agrave; jour le 4/5/2011
vii
UTILISATION DE DREAMWEAVER
Sommaire
Chapitre 22 : Cr&eacute;ation de formulaires
Collecte d'informations aupr&egrave;s des utilisateurs
Cr&eacute;ation de formulaires Web
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 687
Cr&eacute;ation de formulaires ColdFusion
Chapitre 23 : Accessibilit&eacute;
Dreamweaver et l'accessibilit&eacute;
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 684
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 702
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 716
Derni&egrave;re mise &agrave; jour le 4/5/2011
1
Chapitre 1 : Nouveaut&eacute;s
Nouveaut&eacute;s (CS5.5)
Prise en charge de l'affichage sur &eacute;crans multiples Pr&eacute;visualisez vos conceptions dans des r&eacute;solutions d'&eacute;cran
standard, ou utilisez des requ&ecirc;tes multim&eacute;dias pour d&eacute;finir la r&eacute;solution. Lorsque vous testez pour des appareils qui
modifient l'orientation de la page en fonction de la fa&ccedil;on dont l'appareil est tenu, utilisez les options paysage et portrait
au cours de la pr&eacute;visualisation. Pour plus d'informations, voir &laquo; Cr&eacute;ation de contenu pour &eacute;crans et appareils
multiples &raquo; &agrave; la page 500.
Prise en charge des requ&ecirc;tes multim&eacute;dias Permet d'utiliser des requ&ecirc;tes multim&eacute;dias pour personnaliser l'apparence
de votre site pour diff&eacute;rentes r&eacute;solutions d'&eacute;cran. Pour plus d'informations, voir &laquo; Cr&eacute;ation de requ&ecirc;tes multim&eacute;dias
(CS 5.5) &raquo; &agrave; la page 500.
Cr&eacute;ation d'applications Web qui fonctionnent sur des appareils mobiles Permet de concevoir rapidement une
application Web qui fonctionne sur la plupart des appareils mobiles &agrave; l'aide du widget jQuery Mobile. Pour plus
d'informations, reportez-vous &agrave; la section &laquo; Cr&eacute;ation d'applications Web pour appareils mobiles (CS5.5) &raquo; &agrave; la
page 502.
Assemblage de vos applications Web pour appareils Android, iPhone et iPad Permet d'assembler vos applications
Web dans Dreamweaver et de les d&eacute;ployer sur des appareils tournant sous Android™ et iOS. Pour plus d'informations,
consultez la section &laquo; D&eacute;ploiement d'applications Web sous forme d'applications mobiles natives (CS 5.5) &raquo; &agrave; la
page 505.
Prise en charge de HTML5, CSS3 et jQuery Dreamweaver prend en charge les conseils de code pour HTML5, CSS3, et
jQuery.
Les mises en forme de d&eacute;part sont &eacute;galement disponibles pour la cr&eacute;ation de nouvelles pages HTML5. Dreamweaver
prend en charge la fonctionnalit&eacute; HTML5 d'incorporation de vid&eacute;os dans les pages HTML. Pour plus d'informations,
voir &laquo; Incorporation de vid&eacute;os aux pages Web (HTML5) &raquo; &agrave; la page 256.
Le panneau CSS a &eacute;t&eacute; am&eacute;lior&eacute; de fa&ccedil;on &agrave; prendre en charge les propri&eacute;t&eacute;s CSS3 les plus fr&eacute;quemment utilis&eacute;es. Pour
plus d'informations, voir &laquo; Conseils de code &raquo; &agrave; la page 316 et &laquo; Am&eacute;liorations &agrave; la prise en charge de CSS3 dans le
panneau Styles CSS (CS 5.5) &raquo; &agrave; la page 137.
Prise en charge de FTPS Permet de transf&eacute;rer les donn&eacute;es &agrave; l'aide FTPS. FTPS (FTP sur SSL) fournit une prise en
charge du chiffrement et de l'authentification, au contraire de SFTP qui ne en charge que le chiffrement. Pour plus
d'informations, voir &laquo; D&eacute;finition des options pour les connexions FTPS (CS 5.5) &raquo; &agrave; la page 44.
Prise en charge du Validateur W3C Permet de cr&eacute;er des pages HTML et XHTML normalis&eacute;es &agrave; l'aide du validateur
W3C dans Dreamweaver. Pour plus d'informations, voir &laquo; Validation de documents &agrave; l'aide du validateur W3C (CS
5.5) &raquo; &agrave; la page 338.
Nouveaut&eacute;s (CS5)
Adobe BrowserLab
Dreamweaver CS5 s'int&egrave;gre &agrave; Adobe BrowserLab, l'un des nouveaux services en ligne de CS Live, qui propose une
solution pr&eacute;cise et rapide de test de compatibilit&eacute; inter-navigateurs. BrowserLab permet de pr&eacute;visualiser les pages Web
et le contenu local &agrave; l'aide de divers outils d'affichage et de comparaison. Voir &laquo; BrowserLab &raquo; &agrave; la page 510.
Derni&egrave;re mise &agrave; jour le 4/5/2011
2
UTILISATION DE DREAMWEAVER
Nouveaut&eacute;s
Int&eacute;gration de Business Catalyst
Adobe Business Catalyst est une application h&eacute;berg&eacute;e qui remplace les outils de bureau traditionnels par une plateforme centralis&eacute;e pour concepteurs Web. Cette application s'associe &agrave; Dreamweaver pour vous permettre de cr&eacute;er ce
que vous souhaitez, de sites de base reposant sur les donn&eacute;es &agrave; de puissantes boutiques en ligne. Voir
http://www.adobe.com/go/business_catalyst_get_extension_fr.
Am&eacute;liorations apport&eacute;es &agrave; CSS
D&eacute;sactivation/Activation de CSS
La fonction D&eacute;sactiver/Activer CSS permet de d&eacute;sactiver ou de r&eacute;activer directement les propri&eacute;t&eacute;s CSS depuis le
panneau Styles CSS. La d&eacute;sactivation d'une propri&eacute;t&eacute; CSS se borne &agrave; la mettre en commentaire, sans la supprimer. Voir
&laquo; D&eacute;sactivation/Activation du code CSS &raquo; &agrave; la page 153.
Inspection CSS
Le mode Inspection permet d'afficher visuellement les propri&eacute;t&eacute;s du mod&egrave;le de bo&icirc;te en feuilles CSS (dont
l'espacement, la bordure et la marge) en d&eacute;tail, sans devoir lire de code ou employer un utilitaire tiers tel que Firebug.
Voir &laquo; Inspection de CSS en mode En direct &raquo; &agrave; la page 153.
Mises en forme CSS de d&eacute;part
Dreamweaver CS5 comprend des mises en forme CSS de d&eacute;part qui ont &eacute;t&eacute; mises &agrave; jour et simplifi&eacute;es. Les s&eacute;lecteurs
descendants complexes des mises en forme CS4 ont &eacute;t&eacute; supprim&eacute;s et remplac&eacute;s par des classes simplifi&eacute;es, plus
compr&eacute;hensibles. Voir &laquo; Cr&eacute;ation d'une page avec une mise en forme CSS &raquo; &agrave; la page 162.
Fichiers &agrave; association dynamique
La fonctionnalit&eacute; Fichiers &agrave; association dynamique permet de trouver tous les fichiers et scripts externes requis pour
l'assemblage de pages CMS (syst&egrave;me de gestion du contenu) bas&eacute;es sur PHP, ainsi que d'afficher leur nom de fichier
dans la barre d'outils Fichiers associ&eacute;s. Par d&eacute;faut, Dreamweaver prend en charge la recherche de fichiers pour les
cadres CMS Wordpress, Drupal et Joomla! . Voir &laquo; Ouverture de fichiers &agrave; association dynamique &raquo; &agrave; la page 74.
Navigation dans le mode En direct
La navigation dans le mode En direct active les liens dans l'affichage en direct, ce qui permet d'interagir avec les
applications c&ocirc;t&eacute; serveur et les donn&eacute;es dynamiques. Cette fonctionnalit&eacute; permet d'entrer une URL afin d'inspecter les
pages servies &agrave; partir d'un serveur Web en direct, ainsi que de modifier les pages consult&eacute;es si elles existent dans l'un
de vos sites d&eacute;finis localement. Voir &laquo; Pr&eacute;visualisation de pages dans Dreamweaver &raquo; &agrave; la page 299.
Conseils de code pour classes personnalis&eacute;es PHP
Les conseils de code pour classes personnalis&eacute;es PHP affichent la syntaxe appropri&eacute;e pour les fonctions, objets et
constantes PHP, ce qui vous aide &agrave; taper du code plus pr&eacute;cis. Les conseils de code fonctionnent &eacute;galement avec vos
fonctions et classes personnalis&eacute;es, ainsi qu'avec les cadres tiers tels que le cadre Zend.
Derni&egrave;re mise &agrave; jour le 4/5/2011
3
UTILISATION DE DREAMWEAVER
Nouveaut&eacute;s
Simplification de la configuration d'un site
La bo&icirc;te de dialogue D&eacute;finition du site remise &agrave; neuf (et d&eacute;sormais baptis&eacute;e Configuration du site) facilite la
configuration d'un site Dreamweaver local, de fa&ccedil;on &agrave; vous permettre d'entamer imm&eacute;diatement la cr&eacute;ation de pages
Web. La cat&eacute;gorie Serveur distant permet de sp&eacute;cifier, dans la m&ecirc;me vue, les serveurs distants et les serveurs
d'&eacute;valuation. Voir &laquo; Cr&eacute;ation d'un nouveau site &raquo; &agrave; la page 40.
Conseils de code sp&eacute;cifiques au site
La fonctionnalit&eacute; de conseils de code sp&eacute;cifiques au site permet de personnaliser votre environnement de codage
lorsque vous utilisez des biblioth&egrave;ques PHP et des cadres CMS tiers, comme WordPress, Drupal, Joomla! ou d'autres
cadres. Les fichiers de th&egrave;me pour les blogs et les autres fichiers et r&eacute;pertoires PHP personnalis&eacute;s peuvent &ecirc;tre inclus
ou exclus des sources de conseils de code. Voir &laquo; Conseils de code sp&eacute;cifiques au site &raquo; &agrave; la page 319.
Am&eacute;liorations de la prise en charge de Subversion
Dreamweaver CS5 b&eacute;n&eacute;ficie d'une prise en charge accrue de Subversion. Vous pouvez d&eacute;sormais d&eacute;placer, copier et
supprimer des fichiers localement, puis synchroniser les modifications avec votre r&eacute;f&eacute;rentiel SVN distant. La nouvelle
commande R&eacute;tablir permet de corriger rapidement les conflits d'arborescence ou de revenir &agrave; la version pr&eacute;c&eacute;dente
d'un fichier. En outre, une nouvelle extension vous permet de pr&eacute;ciser quelle version de Subversion vous voulez utiliser
pour un projet pr&eacute;cis. Voir &laquo; Utilisation de Subversion (svn) pour acqu&eacute;rir et archiver des fichiers &raquo; &agrave; la page 94.
Fonctionnalit&eacute;s obsol&egrave;tes
Les fonctionnalit&eacute;s suivantes sont devenues obsol&egrave;tes depuis Dreamweaver CS5 :
• Rapport de validation d'accessibilit&eacute;
• Comportements de serveur ASP/JavaScript
• V&eacute;rification du comportement JavaScript du navigateur
• Connexion &agrave; un serveur FTP/RDS sans d&eacute;finir de site
• Contr&ocirc;le du comportement JavaScript de Shockwave ou de SWF
• Cr&eacute;er un album photos pour le Web
• Comportement JavaScript de masquage de menu contextuel
• Gestion des classes CSS disponibles d'InContext Editing
• Ins&eacute;rer FlashPaper
• Insertion/suppression de Mark of the Web
• Int&eacute;gration de Microsoft Visual Sourcesafe
• Barres de navigation
• Comportement JavaScript Lire le son
• Menu Afficher les &eacute;v&eacute;nements (panneau Comportements)
• Comportement JavaScript d'affichage de menu contextuel
• Comportements JavaScript de montage
• Validation des balises
• Affichage de Live Data
Derni&egrave;re mise &agrave; jour le 4/5/2011
4
Chapitre 2 : Espace de travail
D&eacute;roulement du travail et espace de travail dans
Dreamweaver
Pr&eacute;sentation des processus de Dreamweaver
Vous pouvez utiliser plusieurs approches pour cr&eacute;er un site Web. Voici l'une des approches possibles :
Planification et configuration de votre site
D&eacute;terminez l'emplacement o&ugrave; vos fichiers seront enregistr&eacute;s et examinez les besoins du site, les profils de ses
utilisateurs et les objectifs du site. Il convient &eacute;galement d'examiner les conditions techniques requises, notamment
l'acc&egrave;s utilisateur et les restrictions en mati&egrave;re de navigateurs, de plug-ins ou de t&eacute;l&eacute;chargement. Apr&egrave;s avoir organis&eacute;
vos informations et d&eacute;fini une structure, vous pouvez commencer la cr&eacute;ation du site. (Voir &laquo; Utilisation de sites
Dreamweaver &raquo; &agrave; la page 39.)
Organisation et gestion des fichiers de votre site
Dans le panneau Fichiers, vous pouvez facilement ajouter, supprimer et renommer des fichiers et des dossiers afin de
modifier l'organisation en fonction de vos besoins. Dans le panneau Fichiers, vous trouverez de nombreux outils
permettant la gestion de votre site, le transfert de vos fichiers vers et depuis un serveur distant, la configuration d'un
processus d'archivage/extraction pour emp&ecirc;cher l'&eacute;crasement des fichiers et la synchronisation des fichiers sur vos
sites locaux et distants. Utilisez le panneau Actifs pour organiser facilement les actifs sur un site ; vous pouvez ensuite
faire glisser la plupart des actifs directement du panneau vers un document Dreamweaver. Dreamweaver vous permet
&eacute;galement de g&eacute;rer certains aspects de vos sites Adobe&reg; Contribute&reg;. (Voir &laquo; Gestion des fichiers et des dossiers &raquo; &agrave; la
page 77 et &laquo; Gestion des actifs et des biblioth&egrave;ques &raquo; &agrave; la page 116.)
Mise en forme de vos pages Web
S&eacute;lectionnez la technique de mise en forme de votre choix ou combinez les options de mise en forme de Dreamweaver
pour d&eacute;finir la pr&eacute;sentation de votre site. Vous pouvez utiliser des &eacute;l&eacute;ments PA, des styles de positionnement CSS ou
des mises en forme CSS pr&eacute;d&eacute;finies de Dreamweaver pour d&eacute;finir la mise en forme. Les outils de cr&eacute;ation de tableaux
vous permettent de concevoir des pages rapidement en dessinant, puis en r&eacute;organisant la structure des pages. Si vous
souhaitez afficher plusieurs &eacute;l&eacute;ments simultan&eacute;ment dans un navigateur Web, vous pouvez utiliser des cadres pour
mettre en forme vos documents. Finalement, vous pouvez cr&eacute;er de nouvelles pages &agrave; partir d'un mod&egrave;le Dreamweaver,
puis actualiser automatiquement leur mise en forme lorsque le mod&egrave;le change. (Voir &laquo; Cr&eacute;ation de pages avec CSS &raquo;
&agrave; la page 129 et &laquo; Mise en forme des pages avec HTML &raquo; &agrave; la page 180.)
Derni&egrave;re mise &agrave; jour le 4/5/2011
5
UTILISATION DE DREAMWEAVER
Espace de travail
Ajout de contenu dans les pages
Ajoutez des actifs et des &eacute;l&eacute;ments de conception, par exemple du texte, des images, des images avec effet de survol, des
cartes graphiques, des couleurs, des animations, des sons, des liens HTML, des menus de reroutage, etc. Vous pouvez
utiliser les fonctions int&eacute;gr&eacute;es de cr&eacute;ation de page pour les &eacute;l&eacute;ments tels que les titres et les arri&egrave;re-plans, taper
directement dans la page ou importer du contenu d'autres documents. Dreamweaver fournit &eacute;galement des
comportements permettant d'ex&eacute;cuter des t&acirc;ches en r&eacute;ponse &agrave; des &eacute;v&eacute;nements sp&eacute;cifiques, comme par exemple la
validation d'un formulaire lorsque le visiteur clique le sur bouton Envoyer ou l'ouverture d'une deuxi&egrave;me fen&ecirc;tre de
navigateur lorsque le chargement de la page principale est termin&eacute;. Finalement, Dreamweaver comprend des outils
permettant d'optimiser les performances de votre site Web et de tester les pages pour garantir leur compatibilit&eacute; avec
diff&eacute;rents navigateurs Web. (Voir &laquo; Ajout de contenu dans les pages &raquo; &agrave; la page 213).
Cr&eacute;ation de pages par codage manuel
Le codage manuel des pages Web constitue une autre approche de la cr&eacute;ation de pages. Dreamweaver dispose d'outils
d'&eacute;dition visuelle conviviaux ainsi que d'un environnement de codage sophistiqu&eacute;. Vous pouvez utiliser l'une ou l'autre
de ces m&eacute;thodes (ou bien les deux) pour cr&eacute;er et modifier vos pages. (Voir &laquo; Utilisation de code de page &raquo; &agrave; la
page 304.)
Configuration d'une application Web pour un contenu dynamique
De nombreux sites Web contiennent des pages dynamiques qui permettent aux visiteurs d'afficher les informations
stock&eacute;es dans des bases de donn&eacute;es, voire d'ajouter ou de modifier des donn&eacute;es dans certains cas. Pour cr&eacute;er ce type
de pages, vous devez d'abord configurer un serveur Web et un serveur d'application, cr&eacute;er ou modifier un site
Dreamweaver et vous connecter &agrave; une base de donn&eacute;es. (Voir &laquo; Pr&eacute;paration &agrave; la cr&eacute;ation de sites dynamiques &raquo; &agrave; la
page 545.)
Cr&eacute;ation de pages dynamiques
Dans Dreamweaver, vous pouvez d&eacute;finir diverses sources de contenu dynamique, y compris des jeux
d'enregistrements extraits de bases de donn&eacute;es, des param&egrave;tres de formulaire et des composants JavaBeans. Pour
ajouter le contenu dynamique &agrave; une page, il suffit de le faire glisser vers cette derni&egrave;re.
Vous pouvez d&eacute;finir une configuration de page qui affiche un ou plusieurs enregistrements &agrave; la fois (ou plusieurs pages
d'enregistrements), ajoute des liens sp&eacute;ciaux permettant de passer d'une page d'enregistrements &agrave; une autre et cr&eacute;e des
compteurs d'enregistrements pour faciliter la gestion de ces derniers. Vous pouvez encapsuler la logique d'application
ou d'entreprise en faisant appel &agrave; des technologies telles que Adobe &reg; ColdFusion&reg; et les services Web. Si vous avez
besoin de plus de souplesse, vous pouvez cr&eacute;er des comportements de serveur et formulaires interactifs personnalis&eacute;s.
(Voir &laquo; Ajout de contenu dynamique aux pages Web &raquo; &agrave; la page 576.)
Test et publication
Le test de vos pages est un processus continu qui se d&eacute;roule tout au long du cycle de d&eacute;veloppement. A la fin de ce
cycle, vous publiez le site sur un serveur. De nombreux d&eacute;veloppeurs programment &eacute;galement une maintenance
r&eacute;guli&egrave;re pour s'assurer que le site reste &agrave; jour et est op&eacute;rationnel. (Voir &laquo; Acquisition et placement de fichiers depuis
ou vers votre serveur &raquo; &agrave; la page 86.)
Vous trouverez un didacticiel vid&eacute;o sur les possibilit&eacute;s offertes par Dreamweaver &agrave; l'adresse
www.adobe.com/go/lrvid4040_dw_fr.
Vue d'ensemble de la pr&eacute;sentation de l'espace de travail
L'espace de travail de Dreamweaver permet d'afficher des documents et les propri&eacute;t&eacute;s des objets. Il comporte des barres
d'outils donnant acc&egrave;s aux op&eacute;rations les plus courantes, vous permettant ainsi de modifier rapidement vos
documents.
Derni&egrave;re mise &agrave; jour le 4/5/2011
6
UTILISATION DE DREAMWEAVER
Espace de travail
Sous Windows&reg;, Dreamweaver propose une pr&eacute;sentation int&eacute;gr&eacute;e en une seule fen&ecirc;tre. Dans l'espace de travail int&eacute;gr&eacute;,
toutes les fen&ecirc;tres et tous les panneaux sont rassembl&eacute;s dans une grande fen&ecirc;tre d'application.
A. Barre d'application B. Barre d'outils du document C. Fen&ecirc;tre de document D. Commutation d'espace de travail E. Groupes de panneaux
F. CS Live G. S&eacute;lecteur de balises H. Inspecteur Propri&eacute;t&eacute;s I. Panneau Fichiers
Sous Mac OS&reg;, Dreamweaver peut afficher de multiples documents dans une seule fen&ecirc;tre, avec des onglets qui
identifient chacun d'eux. Dreamweaver permet &eacute;galement d'afficher un espace de travail flottant o&ugrave; chaque document
dispose de sa propre fen&ecirc;tre. Les groupes de panneaux sont initialement ancr&eacute;s ensemble, mais vous pouvez les s&eacute;parer
pour les faire appara&icirc;tre dans leur propre fen&ecirc;tre. Lorsque des groupes de panneaux sont ancr&eacute;s et que la fen&ecirc;tre de
document est agrandie, le redimensionnement, l'affichage et le masquage de panneaux entra&icirc;ne le redimensionnement
automatique du document principal, comme c'est le cas dans Windows.
Derni&egrave;re mise &agrave; jour le 4/5/2011
7
UTILISATION DE DREAMWEAVER
Espace de travail
A. Barre d'application B. Barre d'outils du document C. Commutation d'espace de travail D. Fen&ecirc;tre de document E. CS Live F. Groupes de
panneaux G. S&eacute;lecteur de balises H. Inspecteur Propri&eacute;t&eacute;s I. Panneau Fichiers
Vous trouverez un didacticiel sur l'utilisation des diff&eacute;rents espaces de travail de Dreamweaver &agrave; l'adresse
www.adobe.com/go/lrvid4042_fr.
Voir aussi
&laquo; Utilisation de barres d'outils, d'inspecteurs et de menus contextuels &raquo; &agrave; la page 22
&laquo; Personnalisation de l'espace de travail de CS5 &raquo; &agrave; la page 24
&laquo; Affichage de documents &agrave; onglets (Dreamweaver sur Macintosh) &raquo; &agrave; la page 30
Didacticiel consacr&eacute; &agrave; l'espace de travail Dreamweaver
Espace de travail pr&eacute;sentation des &eacute;l&eacute;ments
L'espace de travail contient les &eacute;l&eacute;ments suivants:
Remarque : Dreamweaver propose de nombreux autres inspecteurs, panneaux et fen&ecirc;tres. Pour ouvrir les panneaux,
inspecteurs et fen&ecirc;tres, utilisez le menu Fen&ecirc;tre.
Ecran d'accueil Permet d'ouvrir un document r&eacute;cent ou de cr&eacute;er un nouveau document. Vous pouvez &eacute;galement, &agrave;
partir de l'&eacute;cran d'accueil, survoler Dreamweaver ou acc&eacute;der &agrave; un didacticiel.
Derni&egrave;re mise &agrave; jour le 4/5/2011
8
UTILISATION DE DREAMWEAVER
Espace de travail
Barre d'application Sur toute la largeur de la partie sup&eacute;rieure de la fen&ecirc;tre d'application, cette barre contient une
section de commutation d'espace de travail, des menus (Windows uniquement) et d'autres contr&ocirc;les d'application.
Barre d'outils du document Contient des boutons permettant d'acc&eacute;der aux diff&eacute;rents modes d'affichage de la fen&ecirc;tre
du document (tels que le mode Cr&eacute;ation ou le mode Code), de d&eacute;finir les diff&eacute;rentes options d'affichage et d'effectuer
certaines op&eacute;rations courantes, telles que la pr&eacute;visualisation dans un navigateur.
Barre d'outils standard Non affich&eacute;e dans l'agencement par d&eacute;faut de l'espace de travail. Contient des boutons
correspondant aux op&eacute;rations courantes des menus Fichier et Edition : Nouveau, Ouvrir, Parcourir dans Bridge,
Enregistrer, Enregistrer tout, Imprimer le code, Couper, Copier, Coller, Annuler et R&eacute;p&eacute;ter. Pour afficher la barre
d'outils standard, choisissez Affichage &gt; Barres d'outils &gt; Standard.
La barre d'outils de codage Affich&eacute;e en mode Code uniquement. Regroupe des boutons couvrant la plupart des
op&eacute;rations de codage standard.
La barre d'outils de rendu de style Masqu&eacute;e par d&eacute;faut. Compos&eacute;e de boutons qui vous permettent d'avoir un aper&ccedil;u
de votre cr&eacute;ation dans diff&eacute;rents types de m&eacute;dia si vous utilisez des feuilles de style d&eacute;pendantes du m&eacute;dia. Elle contient
&eacute;galement un bouton qui permet d'activer ou de d&eacute;sactiver les styles CSS (Cascading Style Sheets).
Fen&ecirc;tre de document Affiche le document que vous cr&eacute;ez et modifiez.
L'inspecteur Propri&eacute;t&eacute;s Permet de visualiser et de modifier diverses propri&eacute;t&eacute;s de l'objet ou du texte s&eacute;lectionn&eacute;.
Chaque objet poss&egrave;de des propri&eacute;t&eacute;s diff&eacute;rentes. L'inspecteur Propri&eacute;t&eacute;s n'est pas d&eacute;velopp&eacute; par d&eacute;faut dans la
pr&eacute;sentation de l'espace de travail Codeur.
S&eacute;lecteur de balises Situ&eacute;e dans la barre d'&eacute;tat, dans le bas de la fen&ecirc;tre de document. Affiche la hi&eacute;rarchie des balises
entourant la s&eacute;lection active. Cliquez sur une balise quelconque dans la hi&eacute;rarchie pour la s&eacute;lectionner avec son
contenu.
Panneaux Permet de surveiller et de modifier votre travail. Citons par exemple le panneau Insertion, le panneau Styles
CSS et le panneau Fichiers. Pour d&eacute;velopper un panneau, double-cliquez sur son onglet.
Panneau Insertion Contient des boutons permettant d'ins&eacute;rer divers types d'objets, tels que des images, tableaux et
&eacute;l&eacute;ments multim&eacute;dias dans un document. Chaque objet est une portion de code HTML vous permettant de d&eacute;finir
diff&eacute;rents attributs lors de son insertion. Vous pouvez, par exemple, ins&eacute;rer un tableau en cliquant sur le bouton
Tableau du panneau Insertion. Si vous le pr&eacute;f&eacute;rez, vous pouvez ins&eacute;rer les objets &agrave; partir du menu Insertion.
Le panneau Fichiers Permet de g&eacute;rer vos fichiers et dossiers, qu'ils fassent partie d'un site Dreamweaver ou qu'ils se
trouvent sur un serveur distant. Il permet &eacute;galement d'acc&eacute;der &agrave; tous les fichiers situ&eacute;s sur votre disque local, tout
comme l'Explorateur Windows (Windows) ou le Finder (Macintosh).
Voir aussi
&laquo; Utilisation de la fen&ecirc;tre de document &raquo; &agrave; la page 18
&laquo; Utilisation de barres d'outils, d'inspecteurs et de menus contextuels &raquo; &agrave; la page 22
&laquo; Gestion des fen&ecirc;tres et des panneaux &raquo; &agrave; la page 24
Pr&eacute;sentation de la fen&ecirc;tre de document
La fen&ecirc;tre de document affiche le document actif. Vous pouvez choisir parmi les modes d'affichage suivants :
Mode Cr&eacute;ation Un environnement de cr&eacute;ation pour la mise en forme visuelle des pages, l'&eacute;dition visuelle et le
d&eacute;veloppement rapide d'applications. Dans ce mode, Dreamweaver affiche une repr&eacute;sentation visuelle enti&egrave;rement
modifiable du document, similaire &agrave; la repr&eacute;sentation de la page sur un navigateur.
Derni&egrave;re mise &agrave; jour le 4/5/2011
9
UTILISATION DE DREAMWEAVER
Espace de travail
Mode Code Environnement de codage manuel pour r&eacute;diger et modifier du code HTML, JavaScript et de langage de
serveur, tel que le langage PHP ou CFML (ColdFusion Markup Language), ou tout autre type de code.
Mode Code fractionn&eacute; Version fractionn&eacute;e du mode Code, qui permet de travailler dans diff&eacute;rentes sections du
document en m&ecirc;me temps.
Modes Code et Cr&eacute;ation Permettent d'obtenir l'affichage Code et l'affichage Cr&eacute;ation du document dans une m&ecirc;me
fen&ecirc;tre.
Mode En direct Tout comme le mode Cr&eacute;ation, le mode Affichage en direct fournit une repr&eacute;sentation plus r&eacute;aliste de
l'apparence de votre document dans un navigateur. Il permet &eacute;galement d'interagir avec le document comme vous le
feriez dans un navigateur. Le mode Affichage en direct n'est pas modifiable. Vous pouvez toutefois apporter des
modifications en mode Code et actualiser l'affichage en direct afin de voir l'impact de ces modifications.
Mode Code en direct Uniquement disponible lors de l'affichage d'un document en mode Affichage en direct. Le mode
Code en direct affiche le code qu'un navigateur utilise pour ex&eacute;cuter la page. Il peut changer de mani&egrave;re dynamique
lorsque vous interagissez avec la page en mode Affichage en direct. Le mode Code en direct n'est pas modifiable.
Lorsqu'une fen&ecirc;tre de document est agrandie (mode d'affichage par d&eacute;faut), des onglets s'affichent en haut de la fen&ecirc;tre
de document indiquant les noms de fichier de tous les documents ouverts. Dreamweaver affiche un ast&eacute;risque apr&egrave;s
le nom du fichier si vous avez apport&eacute; des modifications que vous n'avez pas encore enregistr&eacute;es.
Pour passer &agrave; un autre document, cliquez sur son onglet.
Dreamweaver affiche &eacute;galement la barre d'outils Fichiers associ&eacute;s en dessous de l'onglet du document (ou sous la barre
de titre du document si vous avez affich&eacute; les documents dans des fen&ecirc;tres s&eacute;par&eacute;es). Les documents associ&eacute;s sont des
fichiers, par exemple CSS ou JavaScript, qui sont associ&eacute;s au fichier actuel. Pour ouvrir l'un de ces fichiers associ&eacute;s dans
la fen&ecirc;tre de document, cliquez sur son nom dans la barre d'outils Fichiers associ&eacute;s.
Voir aussi
&laquo; Utilisation de la fen&ecirc;tre de document &raquo; &agrave; la page 18
&laquo; A propos de l'affichage en direct &raquo; &agrave; la page 299
&laquo; Ouverture des fichiers associ&eacute;s &raquo; &agrave; la page 72
&laquo; Informations g&eacute;n&eacute;rales sur le codage dans Dreamweaver &raquo; &agrave; la page 304
Pr&eacute;sentation de la barre d'outils de document
La barre d'outils Document contient des boutons qui permettent de basculer rapidement entre diff&eacute;rents mode
d'affichage de votre document. La barre d'outils contient &eacute;galement plusieurs commandes et options courantes
permettant d'afficher le document et de le transf&eacute;rer d'un site local vers un site distant. L'illustration ci-dessous
repr&eacute;sente la barre d'outil Document d&eacute;velopp&eacute;e.
A. Afficher le mode Code B. Afficher les modes Code et Cr&eacute;ation C. Afficher le mode Cr&eacute;ation D. Mode Code en direct E. V&eacute;rification de la
compatibilit&eacute; avec les navigateurs F. Mode En direct G. Mode Inspection CSS H. Aper&ccedil;u/D&eacute;bogage dans le navigateur I. Assistances visuelles
J. Actualiser mode Cr&eacute;ation K. Titre du document L. Gestion des fichiers
Les options suivantes s'affichent dans la barre d'outils de document :
Afficher le mode Code Affiche uniquement le mode Code dans la fen&ecirc;tre de document.
Afficher les modes Code et Cr&eacute;ation Fractionne la fen&ecirc;tre de document afin d'afficher le mode Code et le mode
Cr&eacute;ation. Dans ce cas, l'option Mode Cr&eacute;ation en haut est activ&eacute;e dans le menu Options d'affichage.
Derni&egrave;re mise &agrave; jour le 4/5/2011
10
UTILISATION DE DREAMWEAVER
Espace de travail
Afficher le mode Cr&eacute;ation Affiche uniquement le mode Cr&eacute;ation dans la fen&ecirc;tre de document.
Remarque : Si vous utilisez certaines types de fichiers, tels que XML, JavaScript, CSS ou d'autres types en mode code, les
fichiers ne sont pas visibles en mode Cr&eacute;ation, et les boutons Cr&eacute;ation et Fractionner sont gris&eacute;s.
Mode En direct Affiche une vue du document non modifiable, interactive, bas&eacute;e sur un navigateur.
Mode Code en direct Affiche le code tel qu'il est utilis&eacute; par le navigateur pour ex&eacute;cuter la page.
Titre du document Permet d'attribuer un titre &agrave; votre document et l'afficher dans la barre de titre du navigateur. Si
votre document poss&egrave;de d&eacute;j&agrave; un titre, celui-ci s'affiche dans ce champ.
Gestion des fichiers Affiche le menu Gestion des fichiers.
Aper&ccedil;u/D&eacute;bogage dans le navigateur Permet de pr&eacute;visualiser ou de d&eacute;boguer votre document dans un navigateur.
S&eacute;lectionnez un navigateur dans le menu.
Actualiser mode Cr&eacute;ation Actualise le mode Cr&eacute;ation du document apr&egrave;s avoir apport&eacute; des modifications dans le
mode Code. Les modifications apport&eacute;es dans le mode Code n'apparaissent pas automatiquement dans le mode
Cr&eacute;ation. Vous devez ex&eacute;cuter tout d'abord certaines op&eacute;rations, comme enregistrer le fichier ou utiliser ce bouton.
Remarque : L'actualisation met &eacute;galement &agrave; jour les fonctionnalit&eacute;s de code qui d&eacute;pendent de DOM (Document Object
Model), comme la possibilit&eacute; de s&eacute;lectionner les balises d'ouverture ou de fermeture d'un bloc de code.
Afficher les options Permet de d&eacute;finir les options d'affichage des modes Code et Cr&eacute;ation, notamment le mode devant
s'afficher au-dessus de l'autre. Les options du menu s'appliquent &agrave; l'affichage actuel : Mode Cr&eacute;ation, mode Code ou
les deux.
Assistances visuelles Permet d'utiliser diff&eacute;rents supports visuels en vue de la conception de vos pages.
Valider le marqueur Permet de valider le document actif ou la balise s&eacute;lectionn&eacute;e.
V&eacute;rification de la compatibilit&eacute; avec les navigateurs Permet de v&eacute;rifier si votre code CSS est compatible avec
diff&eacute;rents navigateurs.
Voir aussi
&laquo; Affichage des barres d'outils &raquo; &agrave; la page 22
&laquo; Pr&eacute;visualisation des pages en mode Affichage en direct &raquo; &agrave; la page 299
&laquo; D&eacute;finition des pr&eacute;f&eacute;rences de codage &raquo; &agrave; la page 311
&laquo; Affichage et modification de contenu d'en-t&ecirc;te &raquo; &agrave; la page 348
&laquo; Utilisation d'assistances visuelles pour la mise en forme &raquo; &agrave; la page 180
Pr&eacute;sentation de la barre d'outils standard
La barre d'outils Standard contient des boutons correspondant aux op&eacute;rations courantes des menus Fichier et Edition
: Nouveau, Ouvrir, Parcourir dans Bridge, Enregistrer, Enregistrer tout, Imprimer le code, Couper, Copier, Coller,
Annuler et R&eacute;p&eacute;ter. Utilisez ces boutons comme vous utiliseriez les commandes de menu &eacute;quivalentes.
Voir aussi
&laquo; Affichage des barres d'outils &raquo; &agrave; la page 22
&laquo; Cr&eacute;ation et ouverture de documents &raquo; &agrave; la page 63
Derni&egrave;re mise &agrave; jour le 4/5/2011
11
UTILISATION DE DREAMWEAVER
Espace de travail
Pr&eacute;sentation de la barre d'outils Rendu de style
La barre d'outils de rendu de style (masqu&eacute;e par d&eacute;faut) est compos&eacute;e de boutons qui vous permettent d'avoir un
aper&ccedil;u de votre cr&eacute;ation dans diff&eacute;rents types de m&eacute;dia si vous utilisez des feuilles de style d&eacute;pendantes du m&eacute;dia. Elle
contient &eacute;galement un bouton qui permet d'activer ou de d&eacute;sactiver les styles CSS. Pour afficher la barre d'outils
standard, choisissez Affichage &gt; Barres d'outils &gt; Rendu de style.
Cette barre d'outil n'est fonctionnelle que si vos documents appliquent des feuilles de styles d&eacute;pendantes du m&eacute;dia. Par
exemple, votre feuille de style peut comporter une r&egrave;gle relative au corps du texte pour l'impression et une autre pour
l'affichage sur des t&eacute;l&eacute;phones portables. Pour plus d'informations sur la cr&eacute;ation de feuilles de style d&eacute;pendantes du
m&eacute;dia, consultez le site Web du World Wide Web Consortium &agrave; l'adresse www.w3.org/TR/CSS21/media.html.
Par d&eacute;faut, Dreamweaver affiche votre mise en forme pour le type de m&eacute;dia &eacute;cran (qui indique comment une page
appara&icirc;t sur un &eacute;cran d'ordinateur). Vous pouvez afficher les rendus de type de m&eacute;dia suivants en cliquant sur les
boutons respectifs dans la barre d'outils de rendu de style.
Rendu pour le type de support Ecran Indique comment la page appara&icirc;t sur un &eacute;cran d'ordinateur.
Rendu pour le type de support Impression Indique comment la page appara&icirc;t sur une feuille de papier imprim&eacute;e.
Rendu pour le type de support T&eacute;l&eacute;phone mobile Indique comment la page appara&icirc;t sur un appareil portatif comme
un t&eacute;l&eacute;phone mobile et un BlackBerry.
Rendu pour le type de support Projection Indique comment la page appara&icirc;t sur un projecteur.
Rendu pour le type de support TTY Indique comment la page appara&icirc;t sur un appareil de type t&eacute;l&eacute;type.
Rendu pour le type de support TV Indique comment la page appara&icirc;t sur un t&eacute;l&eacute;viseur.
Intervertir l'affichage des Styles CSS Permet d'activer ou de d&eacute;sactiver les styles CSS. Ce bouton fonctionne
ind&eacute;pendamment des autres boutons de m&eacute;dia.
Feuilles de style &agrave; la cr&eacute;ation Permet de d&eacute;finir une feuille de style &agrave; la cr&eacute;ation.
Pour acc&eacute;der &agrave; un didacticiel relatif &agrave; la cr&eacute;ation de feuilles de style pour l'impression et les appareils portatifs,
consultez le site Web d'Adobe &agrave; l'adresse www.adobe.com/go/vid0156_fr.
Voir aussi
&laquo; Affichage des barres d'outils &raquo; &agrave; la page 22
Pr&eacute;sentation de la barre d'outils Navigation de l'explorateur
La barre d'outils Navigation de l'explorateur devient active dans le mode En direct et vous montre l'adresse de la page
que vous examinez dans la fen&ecirc;tre de document. A partir de Dreamweaver CS5, le mode En direct se comporte comme
un navigateur ordinaire. Ainsi, m&ecirc;me si vous acc&eacute;dez &agrave; un site en dehors de votre site local (par exemple
http://www.adobe.com), Dreamweaver charge la page dans la fen&ecirc;tre de document.
A. Contr&ocirc;les de navigateur B. Zone d'adresse C. Options de l'affichage en direct
Derni&egrave;re mise &agrave; jour le 4/5/2011
12
UTILISATION DE DREAMWEAVER
Espace de travail
Par d&eacute;faut, les liens ne sont pas actifs dans le mode En direct. Si les liens ne sont pas actifs, vous pouvez s&eacute;lectionner le
texte d'un lien dans la fen&ecirc;tre de document, ou cliquer sur celui-ci, sans acc&eacute;der &agrave; une page diff&eacute;rente. Pour tester les
liens en mode En direct, vous pouvez permettre un clic unique ou des clics continus, gr&acirc;ce aux commandes Suivre le
lien et Suivre les liens de mani&egrave;re continue du menu Options d'affichage, &agrave; droite de la zone d'adresse.
Voir aussi
&laquo; Pr&eacute;visualisation de pages dans Dreamweaver &raquo; &agrave; la page 299
Pr&eacute;sentation de la barre d'outils de codage
La barre d'outils de codage est compos&eacute;e de boutons qui vous permettent d'effectuer de nombreuses op&eacute;rations de
codage standard (r&eacute;duction et agrandissement des s&eacute;lections de code, mise en &eacute;vidence de code non valide, application
et suppression de commentaires, mise en retrait de code, insertion de fragments de code r&eacute;cemment utilis&eacute;s, etc.) La
barre d'outils Codage s'affiche &agrave; la verticale sur la gauche de la fen&ecirc;tre de document. Elle n'est visible que lorsque le
mode Code est affich&eacute;.
Vous ne pouvez pas d&eacute;tacher ni d&eacute;placer la barre d'outils Codage, mais vous pouvez la masquer (Affichage &gt; Barres
d'outils &gt; Codage).
Vous pouvez &eacute;galement modifier la barre d'outils de codage pour afficher des boutons suppl&eacute;mentaires (Retour
automatique &agrave; la ligne, Caract&egrave;res cach&eacute;s et Retrait auto) ou pour masquer des boutons que vous ne souhaitez pas
utiliser. N&eacute;anmoins, vous devez pour cela modifier le fichier XML qui g&eacute;n&egrave;re la barre d'outils. Pour plus
d'informations, voir Extension de Dreamweaver.
Voir aussi
&laquo; Affichage des barres d'outils &raquo; &agrave; la page 22
&laquo; Insertion de code avec la barre d'outils de codage &raquo; &agrave; la page 321
Derni&egrave;re mise &agrave; jour le 4/5/2011
13
UTILISATION DE DREAMWEAVER
Espace de travail
Pr&eacute;sentation de la barre d'&eacute;tat
La barre d'&eacute;tat, situ&eacute;e dans le bas de la fen&ecirc;tre de document, fournit des informations suppl&eacute;mentaires sur le document
en cours de cr&eacute;ation.
A. S&eacute;lecteur de balises B. Outil S&eacute;lectionner C. Outil Main D. Outil Zoom E. D&eacute;finir le facteur de zoom F. Menu contextuel Taille de fen&ecirc;tre
G. Taille du document et estimation du temps de t&eacute;l&eacute;chargement H. Indicateur de codage
S&eacute;lecteur de balises Affiche la hi&eacute;rarchie des balises entourant la s&eacute;lection active. Cliquez sur une balise quelconque
dans la hi&eacute;rarchie pour la s&eacute;lectionner avec son contenu. Cliquez sur &lt;body&gt; pour s&eacute;lectionner tout le corps du
document. Pour d&eacute;finir les attributs class ou id d'une balise dans le s&eacute;lecteur de balises, cliquez avec le bouton droit
de la souris (Windows) ou en maintenant la touche Option enfonc&eacute;e (Macintosh) sur la balise et choisissez une classe
ou un ID dans le menu contextuel.
Outil S&eacute;lectionner Active et d&eacute;sactive l'outil Main.
Outil Main Permet de cliquer sur le document et de le glisser jusque dans la fen&ecirc;tre de document.
Outil Zoom et menu D&eacute;finir le facteur de zoom Permettent de d&eacute;finir un taux d'agrandissement pour votre document.
Menu contextuel Taille de fen&ecirc;tre Non disponible en mode Code. Permet de redimensionner la fen&ecirc;tre du document
selon des dimensions pr&eacute;d&eacute;finies ou personnalis&eacute;es. Lorsque vous modifiez la taille d'affichage d'une page en mode
Cr&eacute;ation ou Affichage en direct, seules les dimensions de la vue changent. La taille du document n'est pas modifi&eacute;e.
Outre les formats pr&eacute;d&eacute;termin&eacute;s et personnalis&eacute;s, Dreamweaver r&eacute;pertorie &eacute;galement les tailles sp&eacute;cifi&eacute;es dans une
requ&ecirc;te multim&eacute;dia. Lorsque vous s&eacute;lectionnez une taille correspondant &agrave; une requ&ecirc;te multim&eacute;dia, Dreamweaver
utilise cette requ&ecirc;te multim&eacute;dia pour afficher la page. Vous pouvez &eacute;galement modifier l'orientation de la page pour
pr&eacute;visualiser la page pour les appareils mobiles sur lesquels la disposition change selon la fa&ccedil;on dont l'appareil est tenu.
Taille du document et temps de t&eacute;l&eacute;chargement Fournit une estimation de la taille du document et du temps de
t&eacute;l&eacute;chargement de la page, ainsi que la liste de tous les fichiers d&eacute;pendants, tels que les images et autres fichiers de
donn&eacute;es.
Indicateur de codage Affiche le codage du texte du document actuel.
Voir aussi
&laquo; D&eacute;finition de la taille des fen&ecirc;tres et de la vitesse de connexion &raquo; &agrave; la page 21
&laquo; Zoom avant et arri&egrave;re &raquo; &agrave; la page 224
&laquo; Redimensionnement de la fen&ecirc;tre de document &raquo; &agrave; la page 20
&laquo; D&eacute;finition des pr&eacute;f&eacute;rences de dur&eacute;e et de taille des t&eacute;l&eacute;chargements &raquo; &agrave; la page 226
Derni&egrave;re mise &agrave; jour le 4/5/2011
14
UTILISATION DE DREAMWEAVER
Espace de travail
Pr&eacute;sentation de l'inspecteur Propri&eacute;t&eacute;s
L'inspecteur Propri&eacute;t&eacute;s permet d'examiner et de modifier les propri&eacute;t&eacute;s les plus fr&eacute;quentes de l'&eacute;l&eacute;ment de la page
s&eacute;lectionn&eacute;e, tel que le texte ou un objet ins&eacute;r&eacute;. Le contenu de l'inspecteur Propri&eacute;t&eacute;s varie en fonction de l'&eacute;l&eacute;ment
s&eacute;lectionn&eacute;. Par exemple, si vous s&eacute;lectionnez une image de la page, l'inspecteur Propri&eacute;t&eacute;s se modifie pour montrer
les propri&eacute;t&eacute;s de l'image (telles que le chemin d'acc&egrave;s au fichier, la largeur et la hauteur de l'image, la bordure autour
de l'image, s'il y a lieu, et ainsi de suite).
L'inspecteur Propri&eacute;t&eacute;s se trouve par d&eacute;faut sur le bord inf&eacute;rieur de l'espace de travail. Vous pouvez toutefois le
d&eacute;tacher et en faire un panneau flottant dans l'espace de travail.
Voir aussi
&laquo; Ancrage et annulation d’ancrage de panneaux &raquo; &agrave; la page 25
&laquo; Utilisation de l'inspecteur Propri&eacute;t&eacute;s &raquo; &agrave; la page 23
Pr&eacute;sentation du panneau Insertion
Les boutons qui composent le panneau Insertion permettent de cr&eacute;er et d'ins&eacute;rer des objets, tels que des tableaux, des
images et des liens. Ces boutons sont organis&eacute;s en plusieurs cat&eacute;gories que vous pouvez afficher en alternance en
choisissant la cat&eacute;gorie d&eacute;sir&eacute;e dans le menu Cat&eacute;gorie. D'autres cat&eacute;gories s'affichent lorsque le document s&eacute;lectionn&eacute;
contient du code serveur, tel que des documents ASP ou CFML.
Derni&egrave;re mise &agrave; jour le 4/5/2011
15
UTILISATION DE DREAMWEAVER
Espace de travail
Certaines cat&eacute;gories disposent de boutons ouvrant des menus contextuels. Lorsque vous s&eacute;lectionnez une option dans
l'un d'eux, l'action associ&eacute;e est attribu&eacute;e par d&eacute;faut au bouton. Par exemple, si vous s&eacute;lectionnez le menu contextuel du
bouton Image, puis Espace r&eacute;serv&eacute; pour l'image, la prochaine fois que vous cliquerez sur le bouton Image,
Dreamweaver ins&eacute;rera un espace r&eacute;serv&eacute; pour l'image. Lorsque vous s&eacute;lectionnez une nouvelle option dans l'un de ces
menus, l'action attribu&eacute;e par d&eacute;faut au bouton change.
Le panneau Insertion est organis&eacute; en diff&eacute;rentes cat&eacute;gories, comme suit :
Cat&eacute;gorie Commun Permet de cr&eacute;er et d'ins&eacute;rer les objets les plus couramment utilis&eacute;s, comme les images et les
tableaux.
Cat&eacute;gorie Mise en forme Permet d'ins&eacute;rer des tableaux, des &eacute;l&eacute;ments de tableau, des balises div, des cadres et des
widgets Spry. Vous pouvez choisir deux modes pour les tableaux : Standard (par d&eacute;faut) et D&eacute;velopp&eacute;.
Cat&eacute;gorie Formulaires Contient des boutons permettant de cr&eacute;er des formulaires et d'ins&eacute;rer des &eacute;l&eacute;ments de
formulaire, dont des widgets de validation Spry.
Cat&eacute;gorie Donn&eacute;es Permet d'ins&eacute;rer des &eacute;l&eacute;ments de donn&eacute;es Spry et d'autres &eacute;l&eacute;ments dynamiques, tels que des jeux
d'enregistrements, des r&eacute;gions r&eacute;p&eacute;t&eacute;es et des formulaires d'insertion et de mise &agrave; jour d'enregistrements.
Cat&eacute;gorie Spry Contient des boutons permettant de cr&eacute;er des pages Spry, avec des objets de donn&eacute;es Spry et des
widgets.
La cat&eacute;gorie InContext Editing Contient des boutons destin&eacute;s &agrave; la cr&eacute;ation de pages InContext Editing, dont des
boutons pour les r&eacute;gions modifiables, pour les r&eacute;gions r&eacute;p&eacute;t&eacute;es et pour la gestion des classes CSS.
Cat&eacute;gorie Texte Permet d'ins&eacute;rer diverses balises de formatage de texte et de liste, telles que b, em, p, h1 et ul.
Cat&eacute;gorie Favoris Permet de regrouper et d'organiser, dans un espace commun, les boutons du panneau Insertion que
vous utilisez le plus fr&eacute;quemment.
Cat&eacute;gories de code serveur Disponibles uniquement pour les pages utilisant un langage serveur sp&eacute;cifique, comme
ASP, CFML Basic, CFML Flow, CFML Advanced, et PHP. Ces cat&eacute;gories proposent des objets de type code serveur
que vous pouvez ins&eacute;rer en mode Code.
Contrairement aux autres panneaux de Dreamweaver, vous pouvez retirer le panneau Insertion de son emplacement
d'ancrage par d&eacute;faut et le placer &agrave; l'horizontale, au-dessus de la fen&ecirc;tre de document. Dans ce cas, ce panneau se
transforme en barre d'outils, m&ecirc;me s'il est impossible de la masquer et de l'afficher comme vous le feriez pour les autres
barres d'outils.
Voir aussi
&laquo; Utilisation du panneau Insertion &raquo; &agrave; la page 213
&laquo; Cr&eacute;ation de pages Spry visuellement &raquo; &agrave; la page 438
Derni&egrave;re mise &agrave; jour le 4/5/2011
16
UTILISATION DE DREAMWEAVER
Espace de travail
Pr&eacute;sentation du panneau Fichiers
Vous pouvez utiliser les panneaux Fichiers pour afficher et exploiter les fichiers dans votre site Dreamweaver.
Lorsque vous affichez des sites, des fichiers ou des dossiers dans le panneau Fichiers, vous pouvez modifier la taille de
la zone d'affichage. Vous pouvez &eacute;galement agrandir ou r&eacute;duire le panneau Fichiers. Dans sa forme r&eacute;duite, le panneau
Fichiers affiche le contenu du site local, du site distant, du serveur d'&eacute;valuation ou du r&eacute;f&eacute;rentiel SVN sous la forme
d'une liste de fichiers. Dans sa forme d&eacute;velopp&eacute;e, il affiche d'une part le site local et d'autre part le site distant, le serveur
d'&eacute;valuation ou le r&eacute;f&eacute;rentiel SVN.
Pour les sites Dreamweaver, il est &eacute;galement possible de personnaliser le panneau Fichiers en modifiant la vue (site
local ou distant) qui s'affiche par d&eacute;faut dans le panneau r&eacute;duit.
(CS 5.5) Le panneau Fichiers interagit avec le serveur &agrave; intervalles r&eacute;guliers afin de mettre &agrave; jour son contenu. Un
message d'erreur s'affiche lorsque vous tentez d'effectuer une action dans le panneau Fichiers alors qu'il ex&eacute;cute une
telle mise &agrave; jour automatique. Pour d&eacute;sactiver l'option de mise &agrave; jour automatique, ouvrez le menu Options du
panneau Fichiers et d&eacute;sactivez l'option Mise &agrave; jour automatique du menu Affichage.
Pour mettre &agrave; jour manuellement le contenu du panneau, utilisez le bouton Actualiser dans le panneau. Toutefois,
l'&eacute;tat d'extraction actuel des fichiers n'est mis &agrave; jour que lorsque la mise &agrave; jour automatique est activ&eacute;e.
Voir aussi
&laquo; Utilisation des fichiers depuis le panneau Fichiers &raquo; &agrave; la page 80
Derni&egrave;re mise &agrave; jour le 4/5/2011
17
UTILISATION DE DREAMWEAVER
Espace de travail
Pr&eacute;sentation du panneau Styles CSS
Il vous permet de suivre les r&egrave;gles CSS et les propri&eacute;t&eacute;s qui affectent un &eacute;l&eacute;ment de page s&eacute;lectionn&eacute; (mode Current
(ou S&eacute;lection)), ou les r&egrave;gles et les propri&eacute;t&eacute;s qui affectent l'ensemble d'un document (mode All (ou Tout)). Un bouton
bascule plac&eacute; sur la partie sup&eacute;rieure du panneau Styles CSS vous permet de passer d'un mode &agrave; l'autre. Le panneau
Styles CSS vous permet de modifier les propri&eacute;t&eacute;s CSS dans les deux modes.
Vous pouvez redimensionner n'importe quel volet en faisant glisser les cadres entre les volets.
En mode Current (S&eacute;lection), le panneau Styles CSS pr&eacute;sente trois volets : un volet Summary for Selection
(R&eacute;capitulatif de la s&eacute;lection) qui pr&eacute;sente les propri&eacute;t&eacute;s CSS de la s&eacute;lection en cours dans le document; un volet Rules
(R&egrave;gles) qui pr&eacute;cise l'emplacement des propri&eacute;t&eacute;s s&eacute;lectionn&eacute;es (ou une cascade de r&egrave;gles pour la balise s&eacute;lectionn&eacute;e,
selon votre s&eacute;lection); et un volet Propri&eacute;t&eacute;s qui vous permet de modifier les propri&eacute;t&eacute;s CSS de la r&egrave;gle d&eacute;finissant la
s&eacute;lection.
En mode All (Tout), le panneau Styles CSS pr&eacute;sente deux volets : un volet All Rules (Toutes les r&egrave;gles) (en haut) et un
volet Propri&eacute;t&eacute;s (en bas). Le volet Toutes les r&egrave;gles pr&eacute;sente la liste des r&egrave;gles d&eacute;finies dans le document actif, ainsi que
l'ensemble des r&egrave;gles d&eacute;finies dans les feuilles de styles jointes &agrave; ce document. Le volet Propri&eacute;t&eacute;s permet de modifier
les propri&eacute;t&eacute;s CSS de toute r&egrave;gle s&eacute;lectionn&eacute;e dans le volet Toutes les r&egrave;gles.
Toute modification apport&eacute;e dans le volet Propri&eacute;t&eacute;s s'applique imm&eacute;diatement, ce qui vous permet d'avoir un aper&ccedil;u
direct de votre travail.
Voir aussi
&laquo; Cr&eacute;ation et gestion de CSS &raquo; &agrave; la page 134
Derni&egrave;re mise &agrave; jour le 4/5/2011
18
UTILISATION DE DREAMWEAVER
Espace de travail
Pr&eacute;sentation des guides visuels
Dreamweaver met &agrave; votre disposition plusieurs types de guides visuels pour vous aider &agrave; concevoir vos documents et
&agrave; pr&eacute;voir approximativement l'aspect qu'ils auront dans un navigateur. Vous pouvez effectuer les op&eacute;rations suivantes :
• Adapter instantan&eacute;ment la taille de la fen&ecirc;tre de document &agrave; un format d'affichage donn&eacute;, afin de contr&ocirc;ler la
disposition des &eacute;l&eacute;ments sur la page
• Utiliser un trac&eacute; d'image en arri&egrave;re-plan de la page, de mani&egrave;re &agrave; pouvoir reproduire plus ais&eacute;ment une mise en
forme cr&eacute;&eacute;e dans une application graphique telle que Adobe&reg; Photoshop&reg; ou Adobe&reg; Fireworks&reg;.
• Utiliser des r&egrave;gles et des guides comme rep&egrave;re visuel pour le positionnement et le redimensionnement pr&eacute;cis des
&eacute;l&eacute;ments de page
• Utilisez la grille afin d'effectuer un positionnement et un redimensionnement pr&eacute;cis des &eacute;l&eacute;ments &agrave; positionnement
absolu (PA).
Si la fonction d'alignement automatique est activ&eacute;e, les &eacute;l&eacute;ments PA s'alignent automatiquement sur le croisillon
de grille le plus proche lorsqu'ils sont d&eacute;plac&eacute;s ou redimensionn&eacute;s (d'autres objets, par exemple les images et les
paragraphes, ne sont pas aimant&eacute;s par la grille). L'alignement fonctionne m&ecirc;me si la grille n'est pas visible.
Voir aussi
&laquo; Utilisation d'assistances visuelles pour la mise en forme &raquo; &agrave; la page 180
Utilisateurs de GoLive
Si vous utilisez GoLive jusqu'ici et que vous souhaitez passer &agrave; l'utilisation de Dreamweaver, vous pouvez consultez
une pr&eacute;sentation en ligne de l'espace de travail et du d&eacute;roulement du travail dans Dreamweaver ainsi qu'une discussion
sur les moyens de faire migrer votre site vers Dreamweaver.
Voir aussi
Didacticiel consacr&eacute; &agrave; Dreamweaver pour les utilisateurs de GoLive
Utilisation de la fen&ecirc;tre de document
Basculement d'un mode &agrave; un autre dans la fen&ecirc;tre de document
Vous pouvez afficher un document dans la fen&ecirc;tre de document en mode Code, en mode Code fractionn&eacute;, en mode
Cr&eacute;ation, en modes Code et Cr&eacute;ation (mode fractionn&eacute;) et en mode Affichage en direct. Vous pouvez &eacute;galement
afficher le mode Code fractionn&eacute; ou les modes Code et Cr&eacute;ation en les s&eacute;parant &agrave; l'horizontale ou &agrave; la verticale. Le
mode d'affichage &agrave; l'horizontale est le mode par d&eacute;faut.
Activation du mode Code
❖ Effectuez l'une des op&eacute;rations suivantes :
• Choisissez Affichage &gt; Code.
• Dans la barre d'outils du document, cliquez sur le bouton Afficher le mode Code.
Derni&egrave;re mise &agrave; jour le 4/5/2011
19
UTILISATION DE DREAMWEAVER
Espace de travail
Activation du mode Code fractionn&eacute;
Le mode Code fractionn&eacute; scinde le document en deux parties, ce qui permet de travailler sur deux sections du code en
m&ecirc;me temps.
❖ Choisissez Affichage &gt; Fractionner le code.
Activation du mode Cr&eacute;ation
❖ Effectuez l'une des op&eacute;rations suivantes :
• Choisissez Affichage &gt; Cr&eacute;ation.
• Dans la barre d'outils Document, cliquez sur le bouton Afficher le mode Cr&eacute;ation.
Affichage &agrave; la fois en modes Code et Cr&eacute;ation
❖ Effectuez l'une des op&eacute;rations suivantes :
• Choisissez Affichage &gt; Code et cr&eacute;ation.
• Dans la barre d'outils du document, cliquez sur le bouton Afficher les modes Code et Cr&eacute;ation.
Par d&eacute;faut, le mode Code s'affiche en haut de la fen&ecirc;tre de document et le mode Cr&eacute;ation en bas. Pour afficher le mode
Cr&eacute;ation en haut de la fen&ecirc;tre, choisissez Affichage &gt; Mode Cr&eacute;ation en haut.
Basculement entre les modes Code et Cr&eacute;ation
❖ Appuyez sur Ctrl + guillemet simple d'ouverture (').
Si les deux modes sont affich&eacute;s simultan&eacute;ment dans la fen&ecirc;tre de document, ce raccourci clavier permet d'activer tour
&agrave; tour les deux modes.
Fractionnement vertical des modes
Cette option n'est disponible que pour le mode Code fractionn&eacute; et les modes Code et Cr&eacute;ation (mode fractionn&eacute;). Elle
est d&eacute;sactiv&eacute;e pour le mode Code et le mode Cr&eacute;ation.
1 Veillez &agrave; bien &ecirc;tre en mode Code fractionn&eacute; (Affichage &gt; Code fractionn&eacute;) ou en modes Code et Cr&eacute;ation
(Affichage &gt; Code et Cr&eacute;ation).
2 Choisissez Affichage &gt; Fractionner &agrave; la verticale.
Si vous &ecirc;tes en modes Code et Cr&eacute;ation, vous pouvez afficher le mode Cr&eacute;ation sur la gauche (Affichage &gt; Mode
Cr&eacute;ation &agrave; gauche).
Voir aussi
&laquo; Pr&eacute;sentation de la fen&ecirc;tre de document &raquo; &agrave; la page 8
&laquo; Pr&eacute;visualisation des pages en mode Affichage en direct &raquo; &agrave; la page 299
Affichage en cascade ou en mosa&iuml;que des fen&ecirc;tres de document
Si plusieurs documents sont ouverts &agrave; la fois, vous pouvez les afficher en cascade ou en mosa&iuml;que.
Derni&egrave;re mise &agrave; jour le 4/5/2011
20
UTILISATION DE DREAMWEAVER
Espace de travail
Voir aussi
&laquo; Gestion des fen&ecirc;tres et des panneaux &raquo; &agrave; la page 24
&laquo; Affichage de documents &agrave; onglets (Dreamweaver sur Macintosh) &raquo; &agrave; la page 30
Affichage en cascade des fen&ecirc;tres de document
❖ Choisissez Fen&ecirc;tre &gt; Cascade.
Affichage en mosa&iuml;que des fen&ecirc;tres de document
• (Windows) S&eacute;lectionnez Fen&ecirc;tre &gt; Mosa&iuml;que horizontale ou Fen&ecirc;tre &gt; Mosa&iuml;que verticale.
• (Macintosh) S&eacute;lectionnez Fen&ecirc;tre &gt; Mosa&iuml;que.
Redimensionnement de la fen&ecirc;tre de document
La barre d'&eacute;tat affiche les dimensions de la fen&ecirc;tre de document s&eacute;lectionn&eacute;e (en pixels). Pour qu'une page s'affiche de
fa&ccedil;on optimale &agrave; une taille sp&eacute;cifique, vous pouvez r&eacute;gler la fen&ecirc;tre de document sur l'une des tailles pr&eacute;d&eacute;termin&eacute;es,
modifier ces tailles pr&eacute;d&eacute;termin&eacute;es ou en cr&eacute;er de nouvelles.
Lorsque vous modifiez la taille d'affichage d'une page en mode Cr&eacute;ation ou Affichage en direct, seules les dimensions
de la vue changent. La taille du document n'est pas modifi&eacute;e.
Outre les formats pr&eacute;d&eacute;termin&eacute;s et personnalis&eacute;s, Dreamweaver r&eacute;pertorie &eacute;galement les tailles sp&eacute;cifi&eacute;es dans une
requ&ecirc;te multim&eacute;dia. Lorsque vous s&eacute;lectionnez une taille correspondant &agrave; une requ&ecirc;te multim&eacute;dia, Dreamweaver
utilise cette requ&ecirc;te multim&eacute;dia pour afficher la page. Vous pouvez &eacute;galement modifier l'orientation de la page pour
pr&eacute;visualiser la page pour les appareils mobiles sur lesquels la disposition change selon la fa&ccedil;on dont l'appareil est tenu.
Redimensionnement de la fen&ecirc;tre de document selon une taille pr&eacute;d&eacute;termin&eacute;e
❖ Choisissez l'une des tailles affich&eacute;es dans le menu contextuel Taille de fen&ecirc;tre qui se trouve dans la barre d'&eacute;tat de
la fen&ecirc;tre de document. Dreamweaver CS5.5 et les versions ult&eacute;rieures fournissent une plus vaste liste de choix, y
compris des options pour les principaux p&eacute;riph&eacute;riques mobiles (comme illustr&eacute; ci-dessous).
La taille de la fen&ecirc;tre correspond aux dimensions internes de la fen&ecirc;tre de navigateur, bordures exclues ; la taille du
moniteur ou le p&eacute;riph&eacute;rique mobile est indiqu&eacute; sur la droite.
Pour un redimensionnement moins pr&eacute;cis des fen&ecirc;tres, utilisez les m&eacute;thodes standard de votre syst&egrave;me d'exploitation,
par exemple, en faisant glisser le coin inf&eacute;rieur droit d'une fen&ecirc;tre.
Remarque : (Windows uniquement) Les documents dans la fen&ecirc;tre de document sont agrandis par d&eacute;faut ; il est
impossible de les redimensionner lorsqu'ils sont agrandis. Pour annuler l'affichage du document en mode agrandi, cliquez
sur l'ic&ocirc;ne
dans le coin sup&eacute;rieur droit du document.
Derni&egrave;re mise &agrave; jour le 4/5/2011
21
UTILISATION DE DREAMWEAVER
Espace de travail
Modification des valeurs figurant dans le menu contextuel Taille de fen&ecirc;tre
1 Cliquez sur Modifier les tailles dans le menu contextuel Taille de fen&ecirc;tre.
2 Cliquez sur une valeur de largeur ou de hauteur dans la liste Taille de la fen&ecirc;tre, puis entrez une nouvelle valeur.
Pour que la fen&ecirc;tre de document adopte uniquement une largeur sp&eacute;cifique sans que sa hauteur change, s&eacute;lectionnez
la valeur de hauteur et supprimez-la.
3 Cliquez sur la zone Description pour saisir un texte d&eacute;crivant la taille sp&eacute;cifique.
Ajout d'un nouveau format d'affichage au menu contextuel Taille de fen&ecirc;tre
1 Cliquez sur Modifier les tailles dans le menu contextuel Taille de fen&ecirc;tre.
2 Cliquez dans l'espace vierge qui appara&icirc;t sous la derni&egrave;re valeur de la colonne Largeur.
3 Indiquez les valeurs souhait&eacute;es pour Largeur et Hauteur.
Pour d&eacute;finir soit la largeur, soit la hauteur, laissez l'un des champs vide.
4 Cliquez dans le champ Description pour saisir un texte d&eacute;crivant la taille ajout&eacute;e.
Par exemple, vous pouvez entrer SVGA ou PC standard &agrave; c&ocirc;t&eacute; de l'entr&eacute;e correspondant &agrave; un moniteur d'une
r&eacute;solution de 800 x 600 pixels, et Mac 17 &agrave; c&ocirc;t&eacute; de l'entr&eacute;e correspondant &agrave; un moniteur d'une r&eacute;solution de 832 x 624
pixels. Diverses r&eacute;solutions peuvent &ecirc;tre r&eacute;gl&eacute;es sur la plupart des moniteurs.
D&eacute;finition de la taille des fen&ecirc;tres et de la vitesse de connexion
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh).
2 Choisissez Barre d'&eacute;tat (CS5) ou Tailles des fen&ecirc;tres (CS5.5 et versions ult&eacute;rieures) dans la liste de cat&eacute;gories sur la
gauche.
3 Parmi les options suivantes, d&eacute;finissez celles de votre choix :
Taille de la fen&ecirc;tre Permet de personnaliser les tailles de fen&ecirc;tre qui s'affichent dans le menu contextuel de la barre
d'&eacute;tat.
Vitesse de connexion D&eacute;termine la vitesse de connexion (exprim&eacute;e en kilobits par seconde) utilis&eacute;e pour calculer le
temps de t&eacute;l&eacute;chargement. Le temps de t&eacute;l&eacute;chargement de la page est indiqu&eacute; dans la barre d'&eacute;tat. Celui des images est
affich&eacute; dans l'inspecteur Propri&eacute;t&eacute;s lorsqu'une image est s&eacute;lectionn&eacute;e dans la fen&ecirc;tre de document.
Voir aussi
&laquo; Pr&eacute;sentation de la barre d'&eacute;tat &raquo; &agrave; la page 13
&laquo; Redimensionnement de la fen&ecirc;tre de document &raquo; &agrave; la page 20
Rapports dans Dreamweaver
Dans Dreamweaver, vous pouvez ex&eacute;cuter des rapports afin de rechercher ou de tester des contenus ou encore de
corriger des erreurs. Vous pouvez g&eacute;n&eacute;rer les types de rapports suivants :
Rechercher Permet de rechercher des balises, des attributs ou une portion de texte sp&eacute;cifique dans les balises.
R&eacute;f&eacute;rence Permet de rechercher des informations de r&eacute;f&eacute;rence.
Validation Permet de rechercher les erreurs de code ou de syntaxe.
Navigateurs compatibles Permet de tester le code HTML de vos documents afin de d&eacute;terminer s'il contient des balises
ou des attributs non pris en charge par les navigateurs cibles.
Derni&egrave;re mise &agrave; jour le 4/5/2011
22
UTILISATION DE DREAMWEAVER
Espace de travail
V&eacute;rificateur de lien Permet de rechercher et de corriger les liens bris&eacute;s, externes et orphelins.
Rapports du site Permet d'am&eacute;liorer le d&eacute;roulement du travail et de tester les attributs HTML dans votre site. Les
rapports sur le d&eacute;roulement du travail incluent les fonctions Extrait par, Modifi&eacute;s r&eacute;cemment et Design Notes ; les
rapports HTML incluent les balises de polices imbriqu&eacute;es combinables, l'accessibilit&eacute;, les textes secondaires
manquants, les balises imbriqu&eacute;es redondantes, les balises vides amovibles et les documents sans nom.
Journal FTP Permet d'avoir une vue d'ensemble des transferts de fichiers en FTP.
D&eacute;bogage du serveur Permet de consulter des informations afin de d&eacute;boguer une application Adobe&reg; ColdFusion&reg;.
Voir aussi
&laquo; Recherche de balises, d'attributs ou de cha&icirc;nes de texte dans le code &raquo; &agrave; la page 332
&laquo; Utilisation des documents de r&eacute;f&eacute;rence sur les langages &raquo; &agrave; la page 333
&laquo; Test de votre site &raquo; &agrave; la page 112
&laquo; Validation des documents XML &raquo; &agrave; la page 338
&laquo; V&eacute;rification de la compatibilit&eacute; du navigateur &raquo; &agrave; la page 337
&laquo; Recherche de liens rompus, externes et orphelins &raquo; &agrave; la page 296
&laquo; Placement de fichiers sur un serveur distant &raquo; &agrave; la page 88
&laquo; Acquisition de fichiers depuis un serveur distant &raquo; &agrave; la page 87
&laquo; Utilisation du d&eacute;bogueur ColdFusion (Windows uniquement) &raquo; &agrave; la page 341
Utilisation de barres d'outils, d'inspecteurs et de menus
contextuels
Affichage des barres d'outils
Utilisez les barres d'outils document et standard pour effectuer des op&eacute;rations de modification standard li&eacute;es au
document ; utilisez la barre d'outils codage pour ins&eacute;rer du code rapidement ; et utilisez la barre d'outils rendu de style
pour afficher votre page comme elle appara&icirc;trait dans diff&eacute;rents types de m&eacute;dias. Vous pouvez afficher ou masquer ces
barres selon qu'elles vous sont utiles ou non.
• S&eacute;lectionnez Affichage &gt; Barres d'outils, puis s&eacute;lectionnez la barre d'outils voulue.
• Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contr&ocirc;le enfonc&eacute;e (Macintosh)
sur l'une des barres d'outils et s&eacute;lectionnez la barre d'outils dans le menu contextuel.
Remarque : Pour afficher la barre d'outils de codage dans l'Inspecteur de code (Fen&ecirc;tre &gt; Inspecteur de code), vous devez
la s&eacute;lectionner dans le menu d&eacute;roulant des options d'affichage situ&eacute; en haut de l'inspecteur.
Voir aussi
&laquo; Pr&eacute;sentation de la barre d'outils de document &raquo; &agrave; la page 9
&laquo; Pr&eacute;sentation de la barre d'outils standard &raquo; &agrave; la page 10
&laquo; Pr&eacute;sentation de la barre d'outils de codage &raquo; &agrave; la page 12
&laquo; Pr&eacute;sentation de la barre d'outils Rendu de style &raquo; &agrave; la page 11
Derni&egrave;re mise &agrave; jour le 4/5/2011
23
UTILISATION DE DREAMWEAVER
Espace de travail
Utilisation de l'inspecteur Propri&eacute;t&eacute;s
L'inspecteur Propri&eacute;t&eacute;s permet d'examiner et de modifier les propri&eacute;t&eacute;s les plus fr&eacute;quentes de l'&eacute;l&eacute;ment de la page
s&eacute;lectionn&eacute;e, tel que le texte ou un objet ins&eacute;r&eacute;. Le contenu de l'inspecteur Propri&eacute;t&eacute;s varie en fonction de l'&eacute;l&eacute;ment
s&eacute;lectionn&eacute;.
Pour acc&eacute;der &agrave; l'aide relative &agrave; un inspecteur Propri&eacute;t&eacute;s sp&eacute;cifique, cliquez sur le bouton d'aide dans son coin sup&eacute;rieur
droit, ou choisissez Aide dans son menu Options.
Remarque : L'inspecteur de balises permet d'afficher et de modifier les attributs associ&eacute;s aux propri&eacute;t&eacute;s d'une balise.
Voir aussi
&laquo; Pr&eacute;sentation de l'inspecteur Propri&eacute;t&eacute;s &raquo; &agrave; la page 14
&laquo; D&eacute;finition des propri&eacute;t&eacute;s de texte dans l'inspecteur Propri&eacute;t&eacute;s &raquo; &agrave; la page 236
&laquo; Ancrage et annulation d’ancrage de panneaux &raquo; &agrave; la page 25
&laquo; Modification d'attributs dans l'inspecteur de balises &raquo; &agrave; la page 343
Affichage ou masquage de l'inspecteur Propri&eacute;t&eacute;s
❖ Choisissez Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s.
D&eacute;veloppement ou r&eacute;duction de l'inspecteur Propri&eacute;t&eacute;s
❖ Cliquez sur la fl&egrave;che d'agrandissement dans l'angle inf&eacute;rieur droit de l'inspecteur Propri&eacute;t&eacute;s.
Affichage et modification des propri&eacute;t&eacute;s d'un &eacute;l&eacute;ment de page
1 S&eacute;lectionnez l'&eacute;l&eacute;ment de la page dans la fen&ecirc;tre de document.
Si n&eacute;cessaire, d&eacute;veloppez l'inspecteur Propri&eacute;t&eacute;s afin que toutes les propri&eacute;t&eacute;s de l'&eacute;l&eacute;ment s&eacute;lectionn&eacute; puissent
appara&icirc;tre.
2 Modifiez les propri&eacute;t&eacute;s de votre choix dans l'inspecteur Propri&eacute;t&eacute;s.
Remarque : Pour obtenir des informations sur des propri&eacute;t&eacute;s particuli&egrave;res, s&eacute;lectionnez un &eacute;l&eacute;ment dans la fen&ecirc;tre de
document, puis cliquez sur l'ic&ocirc;ne Aide (?) dans le coin sup&eacute;rieur droit de l'inspecteur Propri&eacute;t&eacute;s.
3 Si les changements ne s'appliquent pas imm&eacute;diatement dans la fen&ecirc;tre de document, appliquez-les d'une des fa&ccedil;ons
suivantes :
• Cliquez hors des champs de texte de modification des propri&eacute;t&eacute;s.
• Appuyez sur la touche Entr&eacute;e (Windows) ou Retour (Macintosh).
• Appuyez sur la touche de tabulation pour passer &agrave; une autre propri&eacute;t&eacute;.
Utilisation des menus contextuels
Les menus contextuels vous permettent d'acc&eacute;der rapidement aux commandes et propri&eacute;t&eacute;s les plus utiles relatives &agrave;
l'objet ou &agrave; la fen&ecirc;tre avec lesquels vous travaillez. Les menus contextuels r&eacute;pertorient uniquement les commandes en
rapport avec la s&eacute;lection en cours.
1 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e (Macintosh) sur
l'objet ou la fen&ecirc;tre qui vous int&eacute;resse.
Derni&egrave;re mise &agrave; jour le 4/5/2011
24
UTILISATION DE DREAMWEAVER
Espace de travail
2 Choisissez une commande dans le menu contextuel.
Personnalisation de l'espace de travail de CS5
Gestion des fen&ecirc;tres et des panneaux
Pour cr&eacute;er un espace de travail personnalis&eacute;, vous d&eacute;placez et manipulez les fen&ecirc;tres de document et les panneaux.
Vous pouvez &eacute;galement enregistrer des espaces de travail, puis passer de l’un &agrave; l’autre. Dans Fireworks, renommer les
espaces de travail personnalis&eacute;s peut provoquer un comportement inattendu.
Remarque : les exemples suivants sont bas&eacute;s sur Photoshop. L’espace de travail est le m&ecirc;me dans tous les produits.
R&eacute;organisation, ancrage ou d&eacute;placement des fen&ecirc;tres de document
Les fen&ecirc;tres de document comportent des onglets lorsque plusieurs fichiers sont ouverts.
• Pour modifier l’ordre des onglets de la fen&ecirc;tre de document, faites glisser un onglet de la fen&ecirc;tre &agrave; l’emplacement
voulu dans le groupe.
• Pour annuler l’ancrage d’une fen&ecirc;tre de document &agrave; un groupe de fen&ecirc;tres, faites glisser l’onglet de cette fen&ecirc;tre
hors du groupe.
Derni&egrave;re mise &agrave; jour le 4/5/2011
25
UTILISATION DE DREAMWEAVER
Espace de travail
Remarque : dans Photoshop, vous pouvez &eacute;galement s&eacute;lectionner Fen&ecirc;tre &gt; R&eacute;organiser &gt; Afficher dans une fen&ecirc;tre
flottante pour afficher une seule fen&ecirc;tre flottante de document ou Fen&ecirc;tre &gt; R&eacute;organiser &gt; Tout afficher dans des
fen&ecirc;tres flottantes pour afficher simultan&eacute;ment toutes les fen&ecirc;tres flottantes de document. Pour plus d’informations,
voir la note technique kb405298.
Remarque : Dreamweaver ne prend pas en charge l’ancrage des fen&ecirc;tres de document ni son annulation. Utilisez le
bouton R&eacute;duire de la fen&ecirc;tre de document pour cr&eacute;er des fen&ecirc;tres flottantes (sous Windows), ou Fen&ecirc;tre &gt; Mosa&iuml;que
verticale pour cr&eacute;er des fen&ecirc;tres de document c&ocirc;te &agrave; c&ocirc;te. Pour plus d’informations sur cette rubrique, recherchez
&laquo; Mosa&iuml;que verticale &raquo; dans l’aide de Dreamweaver. Le flux de travaux diff&egrave;re l&eacute;g&egrave;rement pour les utilisateurs
Macintosh.
• Pour ancrer une fen&ecirc;tre de document &agrave; un groupe de fen&ecirc;tres de document distinct, faites glisser cette fen&ecirc;tre dans
le groupe.
• Pour cr&eacute;er des groupes de documents empil&eacute;s ou juxtapos&eacute;s, faites glisser la fen&ecirc;tre vers l’une des zones de largage
situ&eacute;es en haut, en bas ou sur les c&ocirc;t&eacute;s d’une autre fen&ecirc;tre. Vous pouvez &eacute;galement s&eacute;lectionner une disposition
pour le groupe en utilisant le bouton Disposition de la barre d’application.
Remarque : certains produits ne prennent pas en charge cette fonctionnalit&eacute;. Cependant, votre produit peut pr&eacute;senter
des commandes Cascade et Mosa&iuml;que (ou Juxtaposer), sous le menu Fen&ecirc;tre, pour vous permettre d’organiser vos
documents.
• Dans un groupe &agrave; onglets, pour passer &agrave; un autre document lors du glissement d’une s&eacute;lection, faites glisser cette
s&eacute;lection sur l’onglet du document souhait&eacute; pendant un moment.
Remarque : certains produits ne prennent pas en charge cette fonctionnalit&eacute;.
Ancrage et annulation d’ancrage de panneaux
Un dock est un ensemble de panneaux ou de groupes de panneaux affich&eacute;s ensemble, g&eacute;n&eacute;ralement en position
verticale. Pour ancrer et annuler l’ancrage des panneaux, ins&eacute;rez-les dans le dock et d&eacute;placez-les hors du dock.
• Pour ancrer un panneau, cliquez sur l’onglet correspondant et faites-le glisser dans le dock, au-dessus, sous ou entre
d’autres panneaux.
• Pour ancrer un groupe de panneaux, cliquez sur sa barre de titre (barre vide de couleur unie situ&eacute;e au-dessus des
onglets) et faites-le glisser dans le dock.
• Pour supprimer un panneau ou un groupe de panneaux, faites-le glisser en dehors du dock en cliquant sur l’onglet
ou la barre de titre. Vous pouvez faire glisser l’&eacute;l&eacute;ment vers un autre dock ou le rendre flottant.
D&eacute;placement du panneau Navigation vers un nouveau dock ; cette op&eacute;ration est indiqu&eacute;e par une surbrillance verticale bleue.
Derni&egrave;re mise &agrave; jour le 4/5/2011
26
UTILISATION DE DREAMWEAVER
Espace de travail
Panneau Navigation dans son propre dock
Vous pouvez faire en sorte que les panneaux n’occupent pas la totalit&eacute; de l’espace disponible dans un dock. Faites
glisser le bord inf&eacute;rieur du dock vers le haut de sorte qu’il ne co&iuml;ncide plus avec le bord de l’espace de travail.
D&eacute;placement de panneaux
Lorsque vous d&eacute;placez des panneaux, des zones de largage en surbrillance bleue apparaissent : il s’agit des zones dans
lesquelles vous pouvez d&eacute;placer le panneau. Vous pouvez, par exemple, d&eacute;placer un panneau vers le haut ou vers le bas
en le faisant glisser sur la fine zone de largage bleue situ&eacute;e au-dessus ou sous un autre panneau. Si vous faites glisser le
panneau vers un emplacement autre qu’une zone de largage, ce dernier flotte dans l’espace de travail.
Remarque : la position de la souris active la zone de largage (au lieu de la position du panneau). Si la zone de largage ne
s'affiche pas, faites glisser la souris &agrave; l'emplacement o&ugrave; devrait se situer la zone de largage.
• Pour d&eacute;placer un panneau, faites-le glisser en cliquant sur son onglet.
• Pour d&eacute;placer un groupe de panneaux, faites glisser la barre de titre.
A
B
C
La fine zone de largage bleue indique que le panneau Couleur va &ecirc;tre ancr&eacute; seul au-dessus du groupe de panneaux Calques.
A. Barre de titre B. Onglet C. Zone de largage
Pour emp&ecirc;cher l’ancrage d’un panneau, appuyez sur la touche Ctrl (Windows) ou Commande (Mac OS) lors de son
d&eacute;placement. Pour annuler l’op&eacute;ration, appuyez sur la touche Echap lors du d&eacute;placement du panneau.
Ajout et suppression de panneaux
Lorsque vous supprimez tous les panneaux d’un dock, ce dernier dispara&icirc;t. Vous pouvez cr&eacute;er un dock en d&eacute;pla&ccedil;ant
les panneaux vers le bord droit de l’espace de travail jusqu’&agrave; ce qu’une zone de largage soit visible.
• Pour supprimer un panneau, cliquez sur son onglet avec le bouton droit de la souris (Windows) ou en appuyant
sur la touche Contr&ocirc;le (Mac), puis s&eacute;lectionnez l’option Fermer ; vous pouvez &eacute;galement le d&eacute;s&eacute;lectionner dans le
menu Fen&ecirc;tre.
• Pour ajouter un panneau, s&eacute;lectionnez-le dans le menu Fen&ecirc;tre et ancrez-le &agrave; l’emplacement de votre choix.
Derni&egrave;re mise &agrave; jour le 4/5/2011
27
UTILISATION DE DREAMWEAVER
Espace de travail
Manipulation de groupes de panneaux
• Pour d&eacute;placer un panneau dans un groupe, faites glisser son onglet vers la zone de largage en surbrillance situ&eacute;e
dans le groupe.
Ajout d’un panneau &agrave; un groupe
• Pour r&eacute;organiser les panneaux d’un groupe, faites glisser l’onglet du panneau de votre choix vers son nouvel
emplacement.
• Pour rendre un panneau flottant, faites-le glisser en dehors du groupe au moyen de son onglet.
• Pour d&eacute;placer un groupe, faites glisser la barre de titre (zone situ&eacute;e au-dessus des onglets).
Empilage de panneaux flottants
Lorsque vous faites sortir un panneau de son dock et que vous le placez en dehors de toute zone de largage, ce panneau
flotte dans l’espace de travail. Un panneau flottant peut &ecirc;tre plac&eacute; &agrave; n’importe quel endroit dans l’espace de travail.
Vous pouvez empiler des panneaux ou groupes de panneaux flottants de sorte qu’ils se comportent comme une seule
entit&eacute; lorsque vous faites glisser la barre de titre sup&eacute;rieure.
Panneaux empil&eacute;s flottants
• Pour empiler des panneaux flottants, cliquez sur un onglet pour faire glisser le panneau correspondant vers la zone
de largage situ&eacute;e au bas d’un autre panneau.
• Pour modifier l’ordre d’empilage, cliquez sur un onglet afin de faire glisser le panneau correspondant vers le haut
ou vers le bas.
Remarque : prenez soin de &laquo; d&eacute;poser &raquo; l’onglet sur l’&eacute;troite zone de largage situ&eacute;e entre les panneaux, plut&ocirc;t que sur
la large zone de largage situ&eacute;e dans une barre de titre.
• Pour rendre un panneau ou groupe de panneaux de la pile flottant, d&eacute;placez-le hors de la pile au moyen de son
onglet ou de sa barre de titre.
Redimensionnement des panneaux
• Pour r&eacute;duire ou agrandir un panneau, un groupe de panneaux ou une pile de panneaux, cliquez deux fois sur un
onglet. Vous pouvez &eacute;galement double-cliquer sur la zone d’onglets (l’espace vide situ&eacute; &agrave; c&ocirc;t&eacute; des onglets).
• Pour redimensionner un panneau, faites glisser l’un de ses c&ocirc;t&eacute;s. Cette m&eacute;thode de redimensionnement ne
fonctionne pas toujours, notamment avec le panneau Couleur de Photoshop.
R&eacute;duction et d&eacute;veloppement des ic&ocirc;nes de panneaux
Vous pouvez r&eacute;duire des panneaux &agrave; la taille d’ic&ocirc;nes afin de limiter l’encombrement de l’espace de travail. Dans
certains cas, les panneaux sont r&eacute;duits de la sorte dans l’espace de travail par d&eacute;faut.
Derni&egrave;re mise &agrave; jour le 4/5/2011
28
UTILISATION DE DREAMWEAVER
Espace de travail
Panneaux r&eacute;duits &agrave; la taille d’ic&ocirc;nes
Panneaux agrandis
• Pour r&eacute;duire ou d&eacute;velopper toutes les ic&ocirc;nes de panneau d’une colonne, cliquez sur la double fl&egrave;che situ&eacute;e dans la
partie sup&eacute;rieure du dock.
• Pour d&eacute;velopper une seule ic&ocirc;ne de panneau, cliquez sur cette derni&egrave;re.
• Pour redimensionner les ic&ocirc;nes de panneau afin de voir les ic&ocirc;nes uniquement (et non les libell&eacute;s), r&eacute;glez la largeur
du dock jusqu’&agrave; ce que le texte ne soit plus visible. Pour afficher &agrave; nouveau le texte, augmentez la largeur du dock.
• Pour r&eacute;duire &agrave; la taille d’une ic&ocirc;ne un panneau qui a &eacute;t&eacute; d&eacute;velopp&eacute;, cliquez sur son onglet, sur son ic&ocirc;ne ou sur la
double fl&egrave;che affich&eacute;e dans sa barre de titre.
Dans certaines applications, si vous s&eacute;lectionnez l’option R&eacute;duction automatique des panneaux d’ic&ocirc;nes dans les
pr&eacute;f&eacute;rences d’interface ou les options d’interface utilisateur, une ic&ocirc;ne de panneau d&eacute;velopp&eacute;e est r&eacute;duite
automatiquement lorsque vous cliquez en dehors de cette derni&egrave;re.
• Pour ajouter un panneau flottant ou un groupe de panneaux &agrave; un dock d’ic&ocirc;nes, faites-le glisser au moyen de son
onglet ou de sa barre de titre (les panneaux sont r&eacute;duits automatiquement &agrave; la taille d’ic&ocirc;nes lorsque vous les ajoutez
&agrave; un dock d’ic&ocirc;nes).
• Pour d&eacute;placer une ic&ocirc;ne de panneau (ou un groupe d’ic&ocirc;nes de panneau), faites-la glisser. Vous pouvez d&eacute;placer
des ic&ocirc;nes de panneau vers le haut et vers le bas dans le dock, dans d’autres docks (elles apparaissent dans le style
du panneau de ce dock) ou en dehors du dock (elles apparaissent sous la forme d'ic&ocirc;nes flottantes).
Enregistrement et basculement d’un espace de travail &agrave; l’autre
En enregistrant la taille et la position actuelles des panneaux comme espace de travail nomm&eacute;, vous gardez la
possibilit&eacute; de restaurer cet espace par la suite, et ce, m&ecirc;me si vous avez d&eacute;plac&eacute; ou ferm&eacute; un panneau. Les noms des
espaces de travail enregistr&eacute;s sont visibles dans le s&eacute;lecteur d’espace de travail de la barre d’application.
Derni&egrave;re mise &agrave; jour le 4/5/2011
29
UTILISATION DE DREAMWEAVER
Espace de travail
Enregistrement d’un espace de travail personnalis&eacute;
1 Lorsque l’espace de travail se trouve dans la configuration que vous souhaitez enregistrer, utilisez l’une des
m&eacute;thodes suivantes :
• (Illustrator) Choisissez la commande Fen&ecirc;tre &gt; Espace de travail &gt; Enregistrer l’espace de travail.
• (Photoshop, Illustrator, InCopy) Choisissez la commande Fen&ecirc;tre &gt; Espace de travail &gt; Nouvel espace de
travail.
• (Dreamweaver) Choisissez la commande Fen&ecirc;tre &gt; Pr&eacute;sentation de l’espace de travail &gt; Nouvel espace de
travail.
• (Flash) Choisissez la commande Nouvel espace de travail dans le s&eacute;lecteur d’espace de travail de la barre
d’application.
• (Fireworks) Choisissez la commande Enregistrer la pr&eacute;sentation active dans le s&eacute;lecteur d’espace de travail de la
barre d’application.
2 Attribuez un nom &agrave; l’espace de travail.
3 (Photoshop, InDesign) S&eacute;lectionnez ensuite une ou plusieurs options dans la section Capture :
Position des panneaux Enregistre la position actuelle des panneaux (InDesign uniquement).
Raccourcis clavier Enregistre l’ensemble de raccourcis clavier actuel (Photoshop seulement).
Menus ou Personnalisation des menus Enregistre l’ensemble de menus actuels.
Affichage de l’espace de travail ou basculement d’un espace de travail &agrave; l’autre
❖ S&eacute;lectionnez un espace de travail dans le s&eacute;lecteur d’espace de travail de la barre d’application.
Dans Photoshop, vous pouvez attribuer un raccourci clavier &agrave; chacun des espaces de travail pour pouvoir passer de
l’un &agrave; l’autre plus rapidement.
Suppression d’un espace de travail personnalis&eacute;
• Choisissez l’option G&eacute;rer les espaces de travail dans le s&eacute;lecteur d’espace de travail de la barre d’application,
s&eacute;lectionnez l’espace de travail, puis cliquez sur la commande Supprimer. (Cette option n’est pas disponible dans
Fireworks.)
• (Photoshop, InDesign, InCopy) S&eacute;lectionnez la commande Supprimer l’espace de travail dans le s&eacute;lecteur d’espace
de travail.
• (Illustrator) Choisissez la commande Fen&ecirc;tre &gt; Espace de travail &gt; G&eacute;rer les espaces de travail, s&eacute;lectionnez l’espace
de travail, puis cliquez sur l’ic&ocirc;ne Supprimer.
• (Photoshop, InDesign) Choisissez la commande Fen&ecirc;tre &gt; Espace de travail &gt; Supprimer l’espace de travail,
s&eacute;lectionnez l’espace de travail, puis cliquez sur le bouton Supprimer.
Restauration de l’espace de travail par d&eacute;faut
1 S&eacute;lectionnez l’espace de travail de base ou par d&eacute;faut &agrave; l’aide du s&eacute;lecteur situ&eacute; dans la barre d’application. Pour
Fireworks, consultez l’article http://www.adobe.com/devnet/fireworks/articles/workspace_manager_panel.html.
Remarque : dans Dreamweaver, Designer correspond &agrave; l’espace de travail par d&eacute;faut.
2 Pour Fireworks (Windows), supprimez les dossiers suivants :
Windows Vista \\utilisateur\&lt;nom utilisateur&gt;\AppData\Roaming\Adobe\Fireworks CS4\
Windows XP \\Documents and Settings\&lt;nom utilisateur&gt;\Application Data\Adobe\Fireworks CS4
Derni&egrave;re mise &agrave; jour le 4/5/2011
30
UTILISATION DE DREAMWEAVER
Espace de travail
3 (PhotoShop, InDesign, InCopy) Choisissez la commande Fen&ecirc;tre &gt; Espace de travail &gt; R&eacute;initialiser [Nom de
l’espace de travail].
(Photoshop) Restauration d'une disposition d’espace de travail enregistr&eacute;e
Dans Photoshop, les espaces de travail s’affichent automatiquement en fonction de leur derni&egrave;re disposition, mais
vous pouvez restaurer la disposition d’origine des panneaux.
• Pour restaurer un espace de travail individuel, s&eacute;lectionnez Fen&ecirc;tre &gt; Espace de travail &gt; R&eacute;initialiser Nom de
l’espace de travail.
• Pour restaurer tous les espaces de travail install&eacute;s avec Photoshop, cliquez sur Restaurer les espaces de travail par
d&eacute;faut dans les pr&eacute;f&eacute;rences d’interface.
Pour r&eacute;organiser l'ordre des espaces de travail de la barre d’application, faites-les glisser.
Affichage de documents &agrave; onglets (Dreamweaver sur Macintosh)
Vous pouvez afficher plusieurs documents dans une seule fen&ecirc;tre de document avec des onglets qui identifient chacun
des documents. Vous pouvez aussi les afficher sous la forme d'une partie de l'espace de travail flottant dans laquelle
chaque document s'affiche dans sa propre fen&ecirc;tre.
Ouverture d'un document &agrave; onglets dans une fen&ecirc;tre s&eacute;par&eacute;e
❖ Cliquez en maintenant la touche Ctrl enfonc&eacute;e sur l'onglet, puis s&eacute;lectionnez D&eacute;placer dans une nouvelle fen&ecirc;tre
dans le menu contextuel.
Rassemblement de documents s&eacute;par&eacute;s dans des fen&ecirc;tres &agrave; onglets
❖ Choisissez Fen&ecirc;tre &gt; Combiner en onglets.
Modification du param&egrave;tre de document &agrave; onglets par d&eacute;faut
1 S&eacute;lectionnez Dreamweaver &gt; Pr&eacute;f&eacute;rences, puis la cat&eacute;gorie G&eacute;n&eacute;ral.
2 S&eacute;lectionnez ou d&eacute;s&eacute;lectionnez Ouvrir les documents dans des onglets et cliquez sur OK.
Dreamweaver ne modifie pas l'affichage des documents ouverts lorsque vous modifiez les pr&eacute;f&eacute;rences. En revanche,
une fois que vous avez s&eacute;lectionn&eacute; une nouvelle pr&eacute;f&eacute;rence, les documents ouverts s'affichent en fonction de cette
derni&egrave;re.
Activation des ic&ocirc;nes en couleur
Par d&eacute;faut, Dreamweaver en version CS4 et ult&eacute;rieures emploie des ic&ocirc;nes en noir et blanc qui se transforment en
ic&ocirc;nes en couleur lorsque vous laissez le pointeur de la souris au-dessus d'elles. Vous pouvez activer les ic&ocirc;nes en
couleur de mani&egrave;re permanente, m&ecirc;me quand le pointeur de la souris ne se trouve pas au-dessus d'elles.
❖ Effectuez l'une des op&eacute;rations suivantes :
• Choisissez Affichage &gt; Ic&ocirc;nes en couleur.
• Basculez vers l'espace de travail Classique ou Codeur.
Pour d&eacute;sactiver l'affichage des ic&ocirc;nes en couleur, d&eacute;sactivez l'option Ic&ocirc;nes en couleur du menu Affichage, ou passez
&agrave; un espace de travail diff&eacute;rent.
Derni&egrave;re mise &agrave; jour le 4/5/2011
31
UTILISATION DE DREAMWEAVER
Espace de travail
Voir aussi
&laquo; Affichage de l’espace de travail ou basculement d’un espace de travail &agrave; l’autre &raquo; &agrave; la page 29
Masquage et affichage de l'&eacute;cran d'accueil de Dreamweaver
L'&eacute;cran d'accueil s'affiche lorsque vous d&eacute;marrez Dreamweaver ou lorsqu'aucun document n'est ouvert. Vous pouvez
masquer l'&eacute;cran d'accueil puis l'afficher de nouveau ult&eacute;rieurement selon vos besoins. Lorsque l'&eacute;cran d'accueil est
masqu&eacute; et qu'aucun document n'est ouvert, la fen&ecirc;tre de document est vide.
Masquage de l'&eacute;cran d'accueil
❖ S&eacute;lectionnez l'option Ne plus afficher dans l'&eacute;cran d'accueil.
Affichage de l'&eacute;cran d'accueil
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh).
2 Dans la cat&eacute;gorie G&eacute;n&eacute;ral, activez l'option Afficher l'&eacute;cran d'accueil.
A propos de la personnalisation de Dreamweaver dans les syst&egrave;mes
multiutilisateurs
Dreamweaver peut &ecirc;tre personnalis&eacute; selon les besoins, m&ecirc;me dans les syst&egrave;mes multiutilisateurs tels que Windows XP
ou Mac OS X.
Dreamweaver emp&ecirc;che que la configuration personnalis&eacute;e d'un utilisateur n'affecte celle d'un autre. Pour ce faire, la
premi&egrave;re fois que vous ex&eacute;cutez Dreamweaver sur l'un des syst&egrave;mes multiutilisateurs reconnus, l'application cr&eacute;e des
copies de divers fichiers de configuration. Ces fichiers sont enregistr&eacute;s dans un dossier vous appartenant.
Par exemple, sous Windows XP, ils se trouvent dans C:\Documents and Settings\nom d'utilisateur\Application
Data\Adobe\Dreamweaver\fr_FR\Configuration, un dossier qui est cach&eacute; par d&eacute;faut. Pour afficher les fichiers et
dossiers cach&eacute;s, choisissez Outils &gt; Options des dossiers dans l'Explorateurs Windows, cliquez sur l'onglet Affichage,
puis activez l'option Afficher les fichiers et dossiers cach&eacute;s.
Sous Windows Vista, ils se trouvent dans C:\Utilisateurs\nom d'utilisateur\AppData\Roaming\Adobe\Dreamweaver
\fr_FR\Configuration, qui est cach&eacute; par d&eacute;faut. Pour afficher les fichiers et dossiers cach&eacute;s, choisissez Outils &gt; Options
des dossiers dans l'Explorateurs Windows, cliquez sur l'onglet Affichage, puis activez l'option Afficher les fichiers et
dossiers cach&eacute;s.
Sous Mac OS X, ils sont situ&eacute;s dans votre dossier personnel, dans
Utilisateurs/nom_utilisateur/Biblioth&egrave;que/Application Support/Adobe/Dreamweaver /Configuration.
Si vous r&eacute;installez ou mettez Dreamweaver &agrave; jour, Dreamweaver cr&eacute;e automatiquement des copies de sauvegarde des
fichiers de configuration existants. Ainsi, si vous avez personnalis&eacute; manuellement ces fichiers, vos modifications
restent disponibles.
D&eacute;finition des pr&eacute;f&eacute;rences g&eacute;n&eacute;rales de Dreamweaver
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh).
2 Parmi les options suivantes, d&eacute;finissez celles de votre choix :
Ouvrir les documents dans des onglets Permet d'ouvrir tous les documents dans une seule fen&ecirc;tre contenant des
onglets que vous utilisez pour passer d'un document &agrave; l'autre (Macintosh uniquement).
Derni&egrave;re mise &agrave; jour le 4/5/2011
32
UTILISATION DE DREAMWEAVER
Espace de travail
Afficher l’&eacute;cran d’accueil Affiche l'&eacute;cran d'accueil de Dreamweaver lorsque vous d&eacute;marrez Dreamweaver ou qu'aucun
document n'est ouvert.
Rouvrir les documents au d&eacute;marrage Ouvre tous les documents qui &eacute;taient ouverts lorsque vous avez ferm&eacute;
Dreamweaver. Si cette option n'est pas s&eacute;lectionn&eacute;e, Dreamweaver affiche l'&eacute;cran d'accueil ou un &eacute;cran vide au
d&eacute;marrage (selon les param&egrave;tres d&eacute;finis pour Afficher l'&eacute;cran d'accueil).
Avertir &agrave; l'ouverture de fichiers en lecture seule Vous informe lorsque le fichier que vous ouvrez est en lecture seule
(verrouill&eacute;). Vous pouvez d&eacute;verrouiller/extraire le fichier, l'afficher en lecture seule ou annuler l'action.
Activer les fichiers associ&eacute;s Permet de savoir quels fichiers sont associ&eacute;s au document actuel (par exemple des fichiers
CSS ou JavaScript). Dreamweaver affiche un bouton pour chaque fichier associ&eacute; en haut du document. Si vous cliquez
sur l'un de ces boutons, le fichier correspondant est ouvert.
D&eacute;couvrir les fichiers &agrave; association dynamique Permet d'indiquer si les fichiers &agrave; association dynamique doivent
appara&icirc;tre automatiquement dans la barre d'outils Fichiers associ&eacute;s, ou uniquement apr&egrave;s une interaction manuelle.
Vous pouvez &eacute;galement d&eacute;sactiver la recherche de fichiers &agrave; association dynamique.
Mettre &agrave; jour les liens lors de la suppression de fichiers D&eacute;termine ce qui se passe lorsque vous d&eacute;placez, renommez
ou supprimez un document dans un site. Vous pouvez d&eacute;finir cette pr&eacute;f&eacute;rence de trois fa&ccedil;ons diff&eacute;rentes: les liens sont
toujours automatiquement mis &agrave; jour, les liens ne sont jamais mis &agrave; jour ou un message vous demande s'il convient
d'ex&eacute;cuter une mise &agrave; jour (Voir &laquo; Mise &agrave; jour automatique des liens &raquo; &agrave; la page 290.)
Afficher la bo&icirc;te de dialogue lors de l'insertion d'un objet D&eacute;termine si Dreamweaver vous invite &agrave; entrer des
informations suppl&eacute;mentaires lorsque vous ins&eacute;rez des images, des tableaux, des animations Shockwave et certains
autres objets &agrave; l'aide du panneau Insertion ou du menu Insertion. Si cette option est d&eacute;sactiv&eacute;e, aucune bo&icirc;te de
dialogue ne s'affiche ; dans ce cas, pr&eacute;cisez le fichier source pour les images, le nombre de lignes dans un tableau, etc.
dans l'inspecteur Propri&eacute;t&eacute;s. Lorsque vous ins&eacute;rez des images avec effet de survol ou du code HTML Fireworks, une
bo&icirc;te de dialogue s'affiche toujours, quel que soit le r&eacute;glage de cette option. (Pour remplacer temporairement ce
param&egrave;tre, appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant avec la souris lorsque
vous cr&eacute;ez et ins&eacute;rez des objets.)
Activer l'entr&eacute;e en ligne &agrave; deux octets Permet d'entrer un texte &agrave; deux octets directement dans la fen&ecirc;tre de document,
si vous utilisez un environnement de d&eacute;veloppement ou un kit linguistique facilitant la saisie de texte &agrave; deux octets (les
caract&egrave;res japonais, par exemple). Si cette option est d&eacute;s&eacute;lectionn&eacute;e, une fen&ecirc;tre de saisie de texte s'affiche, dans
laquelle vous entrez et convertissez le texte &agrave; deux octets ; le texte appara&icirc;t dans la fen&ecirc;tre de document apr&egrave;s avoir &eacute;t&eacute;
accept&eacute;.
Passer en paragraphe normal apr&egrave;s le titre Indique qu'en appuyant sur la touche Entr&eacute;e (Windows) ou Retour
(Macintosh) &agrave; la fin d'un paragraphe de titre en mode d'affichage Cr&eacute;ation, vous cr&eacute;ez un nouveau paragraphe indiqu&eacute;
par une balise p. (Un paragraphe de titre est indiqu&eacute; par une balise de titre, telle que h1 ou h2.) Lorsque cette option
est d&eacute;sactiv&eacute;e, en appuyant sur la touche Entr&eacute;e ou Retour &agrave; la fin d'un paragraphe de titre, vous cr&eacute;ez un nouveau
paragraphe indiqu&eacute; par la m&ecirc;me balise de titre (ce qui vous permet de saisir plusieurs titres &agrave; la suite les uns des autres,
puis d'ajouter les d&eacute;tails ult&eacute;rieurement).
Autoriser plusieurs espaces cons&eacute;cutifs Indique qu'en entrant deux espaces ou plus en mode d'affichage Cr&eacute;ation,
vous cr&eacute;ez des espaces ins&eacute;cables qui s'affichent sous forme de plusieurs espaces dans un navigateur. (Par exemple,
vous pouvez taper deux espaces entre les phrases, tout comme vous le faites sur une machine &agrave; &eacute;crire.) Cette option est
con&ccedil;ue principalement pour les personnes qui utilisent les traitements de texte. Lorsque cette option est d&eacute;sactiv&eacute;e, les
espaces multiples sont trait&eacute;s comme des espaces simples (car les navigateurs traitent les espaces multiples comme des
espaces simples).
Utiliser &lt;strong&gt; et &lt;em&gt; au lieu de &lt;b&gt; et &lt;i&gt; D&eacute;termine que Dreamweaver applique la balise strong lorsque vous
effectuez une action qui appliquerait normalement la balise b, et la balise em lorsque vous effectuez une action qui
appliquerait normalement la balise i. Ces actions incluent notamment le fait de cliquer sur les boutons Gras ou Italique
Derni&egrave;re mise &agrave; jour le 4/5/2011
33
UTILISATION DE DREAMWEAVER
Espace de travail
de l'inspecteur Propri&eacute;t&eacute;s de texte en mode HTML et de choisir Format &gt; Style &gt; Gras ou Format &gt; Style &gt; Italique.
Pour utiliser les balises b et i dans vos documents, d&eacute;s&eacute;lectionnez cette option.
Remarque : Le World Wide Web Consortium recommande d'&eacute;viter les balises b et i ; les balises strong et em fournissent
des informations plus s&eacute;mantiques que les balises b et i.
Avertir lors du placement de r&eacute;gions modifiables dans des balises &lt;p&gt; ou &lt;h1&gt; - &lt;h6&gt; Indique si un message
d'avertissement s'affiche lorsque vous enregistrez un mod&egrave;le Dreamweaver pr&eacute;sentant une r&eacute;gion modifiable dans une
balise de paragraphe ou d'en-t&ecirc;te. Le message vous informe que les utilisateurs ne pourront pas cr&eacute;er de paragraphes
suppl&eacute;mentaires dans la r&eacute;gion. Cette option est activ&eacute;e par d&eacute;faut.
Centrer Sp&eacute;cifie si vous voulez centrer des &eacute;l&eacute;ments &agrave; l'aide de divalign=&quot;center&quot; ou de la balise center lorsque
vous cliquez sur le bouton Centrer de l'inspecteur Propri&eacute;t&eacute;s.
Remarque : L'utilisation de ces deux m&eacute;thodes de centrage n'est plus recommand&eacute;e depuis les sp&eacute;cifications de
HTML 4.01. Il est conseill&eacute; d'utiliser les feuilles de style CSS. Ces m&eacute;thodes sont encore techniquement applicables &agrave; la
sp&eacute;cification XHTML 1.0 transitionnel, mais ne sont plus reconnues dans les sp&eacute;cifications XHTML 1.0 Strict.
Nombre maximum d'&eacute;tapes d'historique D&eacute;termine le nombre maximal d'&eacute;tapes que le panneau Historique conserve
et affiche. (la valeur par d&eacute;faut doit &ecirc;tre suffisante pour la plupart des utilisateurs). Si le nombre d'&eacute;tapes d&eacute;passe la
valeur indiqu&eacute;e, les &eacute;tapes les plus anciennes sont supprim&eacute;es.
Pour plus d'informations, voir &laquo; Automatisation des t&acirc;ches &raquo; &agrave; la page 276.
Dictionnaire orthographique Affiche la liste des dictionnaires disponibles. Si un dictionnaire contient plusieurs
dialectes ou conventions orthographiques (par exemple, l'anglais britannique et l'anglais am&eacute;ricain), les dits dialectes
sont r&eacute;pertori&eacute;s individuellement dans le menu contextuel Dictionnaire.
Voir aussi
&laquo; Vue d'ensemble de la pr&eacute;sentation de l'espace de travail &raquo; &agrave; la page 5
&laquo; Mise &agrave; jour automatique des liens &raquo; &agrave; la page 290
D&eacute;finition des pr&eacute;f&eacute;rences de police pour les documents dans Dreamweaver
Le codage d'un document d&eacute;termine la fa&ccedil;on dont le document s'affiche dans un navigateur. Les pr&eacute;f&eacute;rences de polices
de Dreamweaver vous permettent d'utiliser un texte affich&eacute; dans la police et la taille de votre choix. Toutefois, les
polices s&eacute;lectionn&eacute;es dans la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences des polices n'influent que sur la fa&ccedil;on dont les documents
s'affichent dans Dreamweaver. Elles n'ont aucun impact sur la fa&ccedil;on dont ils s'affichent dans le navigateur d'un visiteur.
Pour modifier la fa&ccedil;on dont les polices s'affichent dans un navigateur, vous devez modifier le texte &agrave; l'aide de
l'inspecteur Propri&eacute;t&eacute;s ou en appliquant une r&egrave;gle CSS.
Pour plus d'informations sur la d&eacute;finition d'un codage par d&eacute;faut pour les nouveaux documents, consultez la section
&laquo; Cr&eacute;ation et ouverture de documents &raquo; &agrave; la page 63.
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh).
2 S&eacute;lectionnez la cat&eacute;gorie Polices dans la liste de gauche.
3 S&eacute;lectionnez le type de codage d&eacute;sir&eacute; (par exemple, Occidental ou Japonais) dans la liste Param&egrave;tres de la police.
Remarque : Pour afficher un document en langue asiatique, il est indispensable que votre syst&egrave;me d'exploitation prenne
en charge les polices &agrave; deux octets.
4 S&eacute;lectionnez une police et un format &agrave; utiliser pour chaque cat&eacute;gorie du codage s&eacute;lectionn&eacute;.
Derni&egrave;re mise &agrave; jour le 4/5/2011
34
UTILISATION DE DREAMWEAVER
Espace de travail
Remarque : Pour qu'une police apparaisse dans les menus contextuels correspondants, il est indispensable de l'installer
sur votre ordinateur. Par exemple, si vous souhaitez visualiser un texte r&eacute;dig&eacute; en japonais, il vous faut installer un jeu de
caract&egrave;res japonais au pr&eacute;alable.
Proportionnelle La police proportionnelle est utilis&eacute;e par Dreamweaver pour afficher du texte normal (par exemple,
un texte contenu dans des paragraphes, des en-t&ecirc;tes et des tableaux). La valeur par d&eacute;faut varie en fonction des polices
install&eacute;es sur votre syst&egrave;me. Pour la plupart des syst&egrave;mes fran&ccedil;ais, la police proportionnelle par d&eacute;faut est Times New
Roman 12 pt (moyen) sous Windows et Times 12 pt sous Mac OS.
Fixe La police fixe est utilis&eacute;e par Dreamweaver pour afficher du texte dans les balises pre, code et tt. La valeur par
d&eacute;faut varie en fonction des polices install&eacute;es sur votre syst&egrave;me. Pour la plupart des syst&egrave;mes fran&ccedil;ais, la police fixe par
d&eacute;faut est Courier New 10 pt (petit) sous Windows et Monaco 12 pt sous Mac OS.
Mode Code Police utilis&eacute;e dans tout le texte qui appara&icirc;t dans le mode d'affichage Code et dans l'inspecteur de code.
La valeur par d&eacute;faut varie en fonction des polices install&eacute;es sur votre syst&egrave;me.
Voir aussi
&laquo; Description de l'encodage de document &raquo; &agrave; la page 220
Personnalisation des couleurs de surbrillance de Dreamweaver
Les pr&eacute;f&eacute;rences de surbrillance servent &agrave; personnaliser les couleurs utilis&eacute;es dans Dreamweaver pour identifier les
zones d'un mod&egrave;le, les &eacute;l&eacute;ments d'une biblioth&egrave;que, les balises tierces, les &eacute;l&eacute;ments de mise en forme et le code.
Voir aussi
&laquo; Utilisation du s&eacute;lecteur de couleur &raquo; &agrave; la page 224
&laquo; Modification de la couleur de surbrillance des balises div &raquo; &agrave; la page 166
Modification de la couleur de surbrillance
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences, puis la cat&eacute;gorie Surbrillance.
2 Cliquez sur le s&eacute;lecteur de couleur situ&eacute;e pr&egrave;s de l'objet dont vous souhaitez modifier la couleur de surbrillance, puis
utilisez la palette de couleur pour s&eacute;lectionner une nouvelle couleur. Vous pouvez &eacute;galement saisir une valeur
hexad&eacute;cimale.
Activation ou d&eacute;sactivation de la surbrillance d'un objet
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences, puis la cat&eacute;gorie Surbrillance.
2 Cochez ou d&eacute;cochez l'option Afficher situ&eacute;e pr&egrave;s de l'objet dont vous souhaitez activer ou d&eacute;sactiver la couleur de
surbrillance.
Restauration des pr&eacute;f&eacute;rences par d&eacute;faut
Pour conna&icirc;tre les proc&eacute;dures de r&eacute;tablissement des pr&eacute;f&eacute;rences par d&eacute;faut de Dreamweaver, consultez la Tech Note
83912.
Derni&egrave;re mise &agrave; jour le 4/5/2011
35
UTILISATION DE DREAMWEAVER
Espace de travail
Raccourcis clavier
Cr&eacute;ation d'un feuille de r&eacute;f&eacute;rence pour le jeu de raccourcis en cours
Une feuille de r&eacute;f&eacute;rence est un enregistrement du jeu de raccourcis en cours. Les informations sont stock&eacute;es sous forme
d'un tableau HTML. Vous pouvez afficher la feuille de r&eacute;f&eacute;rence dans un navigateur Web ou l'imprimer.
1 S&eacute;lectionnez Edition &gt; Raccourcis clavier (Windows) ou Dreamweaver &gt; Raccourcis clavier (Macintosh).
2 Cliquez sur le bouton Exporter le jeu au format HTML ; il s'agit du troisi&egrave;me bouton du jeu de quatre boutons situ&eacute;
en haut de la bo&icirc;te de dialogue.
3 Dans la bo&icirc;te de dialogue d'enregistrement, entrez le nom de la feuille de r&eacute;f&eacute;rence et s&eacute;lectionnez l'emplacement
appropri&eacute; pour enregistrer le fichier.
Personnalisation des raccourcis clavier
Utilisez l'&eacute;diteur de raccourcis clavier pour cr&eacute;er vos propres touches de raccourci, y compris pour les fragments de
code. Vous pouvez &eacute;galement supprimer des raccourcis clavier, les modifier, et s&eacute;lectionner un jeu pr&eacute;d&eacute;fini de
raccourcis dans l'&eacute;diteur de raccourcis clavier.
Voir aussi
&laquo; Manipulation de fragments de code &raquo; &agrave; la page 330
Cr&eacute;ation d'un raccourci clavier
Cr&eacute;ez vos propres touches de raccourci, modifiez des raccourcis existants ou s&eacute;lectionnez un jeu de raccourcis
pr&eacute;d&eacute;fini.
1 S&eacute;lectionnez Edition &gt; Raccourcis clavier (Windows) ou Dreamweaver &gt; Raccourcis clavier (Macintosh).
2 Parmi les options suivantes, d&eacute;finissez celles de votre choix et cliquez sur OK :
Jeu en cours Vous permet de choisir un jeu de raccourcis pr&eacute;d&eacute;finis livr&eacute;s avec Dreamweaver, ou tout autre jeu
personnalis&eacute; que vous avez vous-m&ecirc;me d&eacute;fini. Les jeux pr&eacute;d&eacute;finis sont r&eacute;pertori&eacute;s en haut du menu. Par exemple, si
vous connaissez les raccourcis de HomeSite ou BBEdit, vous pouvez les utiliser en choisissant le jeu pr&eacute;d&eacute;fini
correspondant.
Commandes Vous permet de s&eacute;lectionner une cat&eacute;gorie de commandes &agrave; modifier. Par exemple, vous pouvez
modifier des commandes de menu, telles que Ouvrir ou des commandes de modification du code, telles que Equilibrer
les accolades.
Pour ajouter ou modifier un raccourci clavier pour un fragment de code, s&eacute;lectionnez Fragment de code dans le menu
contextuel Commandes.
La liste des commandes affiche les commandes de la cat&eacute;gorie que vous avez choisie dans le menu contextuel
Commandes, ainsi que les raccourcis clavier attribu&eacute;s. Les cat&eacute;gories de commandes Menu s'affichent sous une forme
arborescente, suivant la structure des menus. Les autres cat&eacute;gories r&eacute;pertorient les commandes par leur nom (par
exemple, Quitter l'application).
Raccourcis affiche la liste des raccourcis clavier assign&eacute;s &agrave; la commande s&eacute;lectionn&eacute;e.
Ajouter l'&eacute;l&eacute;ment (+) ajoute un nouveau raccourci pour la commande en cours. Cliquez sur ce bouton pour ajouter
une nouvelle ligne vierge aux Raccourcis. Entrez une nouvelle combinaison de touches et cliquez sur Remplacer pour
ajouter un nouveau raccourci clavier pour cette commande. Vous pouvez attribuer deux raccourcis clavier diff&eacute;rents
pour chaque commande. S'il en existe d&eacute;j&agrave; deux, le bouton Ajouter l'&eacute;l&eacute;ment (+) n'a aucun effet.
Derni&egrave;re mise &agrave; jour le 4/5/2011
36
UTILISATION DE DREAMWEAVER
Espace de travail
Supprimer l'&eacute;l&eacute;ment (-) supprime le raccourci s&eacute;lectionn&eacute; de la liste.
Appuyer sur la touche affiche la combinaison de touches que vous saisissez lorsque vous ajoutez ou modifiez un
raccourci.
Remplacer Ajoute la combinaison de touches indiqu&eacute;e dans la zone Appuyer sur la touche &agrave; la liste des raccourcis ou
applique le nouveau raccourci clavier &agrave; la combinaison de touches sp&eacute;cifi&eacute;es.
Dupliquer le jeu duplique le jeu courant. Attribuez un nom au nouveau jeu ; le nom par d&eacute;faut est le nom du jeu en
cours dot&eacute; du suffixe copie.
Renommer le jeu renomme le jeu actuel.
Exporter comme fichier HTML enregistre le jeu actuel dans un format de table HTML en vue d'un affichage et d'une
impression simples. Vous pouvez ouvrir le fichier HTML dans votre navigateur et imprimer les raccourcis comme
r&eacute;f&eacute;rence rapide.
Supprimer le jeu supprime un jeu. Les jeux actifs ne peuvent pas &ecirc;tre supprim&eacute;s.
Suppression d'un raccourci d'une commande
1 S&eacute;lectionnez Edition &gt; Raccourcis clavier (Windows) ou Dreamweaver &gt; Raccourcis clavier (Macintosh).
2 Dans le menu contextuel Commandes, s&eacute;lectionnez une cat&eacute;gorie.
3 S&eacute;lectionnez une commande dans la liste, puis s&eacute;lectionnez un raccourci.
4 Cliquez sur le bouton Supprimer un &eacute;l&eacute;ment (-).
Ajout d'un raccourci clavier &agrave; une commande
1 S&eacute;lectionnez Edition &gt; Raccourcis clavier (Windows) ou Dreamweaver &gt; Raccourcis clavier (Macintosh).
2 Dans le menu contextuel Commandes, s&eacute;lectionnez une cat&eacute;gorie.
3 S&eacute;lectionnez une commande dans la liste.
Pour ajouter ou modifier un raccourci clavier pour un fragment de code, s&eacute;lectionnez Fragment de code dans le menu
contextuel Commandes.
Les raccourcis attribu&eacute;s &agrave; la commande apparaissent dans la zone Raccourcis.
4 Proc&eacute;dez de l'une des mani&egrave;res suivantes pour ajouter un raccourci :
• Si moins de deux raccourcis sont d&eacute;j&agrave; attribu&eacute;s &agrave; la commande, cliquez sur le bouton Ajouter l'&eacute;l&eacute;ment (+). Une
nouvelle ligne vide appara&icirc;t dans la zone Raccourcis et le point d'insertion s'affiche dans la zone Appuyer sur la
touche.
• Si deux raccourcis sont d&eacute;j&agrave; attribu&eacute;s &agrave; la commande, s&eacute;lectionnez-en un (il sera remplac&eacute; par le nouveau
raccourci). Cliquez ensuite dans la zone Appuyer sur la touche.
5 Appuyez sur une combinaison de touches. Celle-ci appara&icirc;t dans la zone Appuyer sur la touche.
Remarque : Si la combinaison de touches est incorrecte (par exemple, elle est d&eacute;j&agrave; attribu&eacute;e &agrave; une autre commande), un
message s'affiche sous la zone Raccourcis et vous en avertit. Vous ne pourrez peut-&ecirc;tre pas ajouter, ni modifier le
raccourci.
6 Cliquez sur Remplacer. La nouvelle combinaison de touches est attribu&eacute;e &agrave; la commande.
Derni&egrave;re mise &agrave; jour le 4/5/2011
37
UTILISATION DE DREAMWEAVER
Espace de travail
Modification d'un raccourci existant
1 S&eacute;lectionnez Edition &gt; Raccourcis clavier (Windows) ou Dreamweaver &gt; Raccourcis clavier (Macintosh).
2 Dans le menu contextuel Commandes, s&eacute;lectionnez une cat&eacute;gorie.
3 S&eacute;lectionnez une commande dans la liste, puis s&eacute;lectionnez un raccourci &agrave; modifier.
4 Cliquez dans la zone Appuyer sur la touche, et entrez une nouvelle combinaison de touches.
5 Cliquez sur le bouton Remplacer pour modifier le raccourci.
Remarque : Si la combinaison de touches est incorrecte (par exemple, elle est d&eacute;j&agrave; attribu&eacute;e &agrave; une autre commande), un
message s'affiche sous la zone Raccourcis et vous en avertit. Vous ne pourrez peut-&ecirc;tre pas ajouter, ni modifier le
raccourci.
A propos des raccourcis clavier et des claviers non-U.S.
Les raccourcis clavier Dreamweaver par d&eacute;faut fonctionnent principalement sur les claviers U.S. standardis&eacute;s. Les
claviers d'autres pays (y compris ceux qui sont produits au Royaume-Uni) peuvent ne pas pr&eacute;senter la fonctionnalit&eacute;
n&eacute;cessaire &agrave; l'utilisation de ces raccourcis. Si votre clavier ne prend pas en charge certains raccourcis Dreamweaver,
Dreamweaver d&eacute;sactive leur fonctionnalit&eacute;.
Pour personnaliser des raccourcis clavier fonctionnant avec des claviers non-U.S., voir la section &laquo; Modification des
mappages des raccourcis clavier &raquo; du manuel Extension de Dreamweaver.
Extensions
Ajout et gestion d'extensions dans Dreamweaver
Les extensions sont de nouvelles fonctions, faciles &agrave; int&eacute;grer dans Dreamweaver. Vous pouvez utiliser plusieurs types
d'extensions ; il existe, par exemple, des extensions qui permettent de reformater des tableaux, d'&eacute;crire des
compl&eacute;ments de scripts cot&eacute; serveurs ou clients.
Remarque : Pour installer des extensions accessibles &agrave; tous les utilisateurs dans un syst&egrave;me d'exploitation
multiutilisateur, vous devez disposer des droits Administrateur (Windows) ou root (Mac OS X).
Pour rechercher les extensions les plus r&eacute;centes pour Dreamweaver, consultez le site Web d'Adobe Exchange, &agrave;
l'adresse suivante : www.adobe.com/go/dreamweaver_exchange_fr/. Sur ce site, vous pouvez vous connecter et
t&eacute;l&eacute;charger des extensions (un grand nombre d'entre elles sont gratuites), participer &agrave; des forums de discussion,
visualiser les rapports et analyses d'utilisateurs, ainsi qu'installer et exploiter Extension Manager. Vous devez installer
Extension Manager avant de pouvoir t&eacute;l&eacute;charger des extensions.
Le logiciel Extension Manager est une application ind&eacute;pendante permettant d'installer et de g&eacute;rer les extensions dans
les applications Adobe. Vous pouvez lancer Extension Manager &agrave; partir de Dreamweaver en choisissant Commandes
&gt; G&eacute;rer les extensions.
1 Sur le site Web Adobe Exchange, cliquez sur le lien de t&eacute;l&eacute;chargement de l'extension qui vous int&eacute;resse.
Votre navigateur vous permet peut-&ecirc;tre d'ouvrir et d'installer l'extension directement depuis le site ou de l'enregistrer
sur votre disque.
• Si vous l'ouvrez directement, Extension Manager traite automatiquement l'installation.
Derni&egrave;re mise &agrave; jour le 4/5/2011
38
UTILISATION DE DREAMWEAVER
Espace de travail
• Si vous l'enregistrez sur votre disque, placez le fichier du logiciel d'extension (.mxp ou .mxi) dans le dossier des
extensions t&eacute;l&eacute;charg&eacute;es de l'application Dreamweaver sur votre ordinateur.
2 Double-cliquez sur le fichier du logiciel d'extension ou ouvrez Extension Manager et choisissez Fichier &gt;
Installer l'extension. (Certaines extensions ne sont accessibles qu'une fois que vous avez red&eacute;marr&eacute; l'application.
Remarque : Utilisez Extension Manager pour supprimer des extensions ou pour consulter des informations sur
l'extension.
Voir aussi
&laquo; A propos de la personnalisation de Dreamweaver dans les syst&egrave;mes multiutilisateurs &raquo; &agrave; la page 31
Derni&egrave;re mise &agrave; jour le 4/5/2011
39
Chapitre 3 : Utilisation de sites
Dreamweaver
Un site Adobe&reg; Dreamweaver&reg; CS5 est un ensemble de tous les fichiers et de tous les actifs de votre site Web. Vous
pouvez cr&eacute;er des pages Web sur votre ordinateur, les transf&eacute;rer sur un serveur Web et g&eacute;rer le site en transf&eacute;rant des
fichiers mis &agrave; jour chaque fois que vous les sauvegardez. Vous pouvez &eacute;galement modifier et g&eacute;rer des sites Web qui
ont &eacute;t&eacute; cr&eacute;&eacute;s sans Dreamweaver.
Configuration d'un site Dreamweaver
A propos des sites Dreamweaver
Dans Dreamweaver, le terme &laquo; site &raquo; se rapporte &agrave; un lieu de stockage local ou distant dans lequel sont conserv&eacute;s tous
les documents appartenant &agrave; un site Web. Un site Dreamweaver permet d'organiser et de g&eacute;rer tous vos documents
Web, de transf&eacute;rer vos fichiers de site &agrave; un serveur Web, de suivre et de g&eacute;rer les liens, ainsi que de g&eacute;rer et de partager
les fichiers. D&eacute;finissez un site pour tirer le meilleur parti des fonctions offertes par Dreamweaver.
Remarque : Pour d&eacute;finir un site Dreamweaver, vous devez simplement configurer un dossier local. Pour transf&eacute;rer des
fichiers vers un serveur Web ou pour d&eacute;velopper des applications Web, vous devez &eacute;galement ajouter des informations
concernant un site distant et un serveur d'&eacute;valuation.
Un site Dreamweaver se compose de trois parties, ou dossiers, selon votre environnement de travail et le type de site
Web que vous d&eacute;veloppez :
Dossier racine local Stocke les fichiers en cours de d&eacute;veloppement. Dans Dreamweaver, ce dossier est appel&eacute; votre
&laquo; site local &raquo;. Ce dossier se trouve g&eacute;n&eacute;ralement sur votre ordinateur local, mais il peut &eacute;galement se trouver sur un
serveur de r&eacute;seau.
Dossier distant Stocke les fichiers que vous r&eacute;servez aux &eacute;valuations, &agrave; la production, &agrave; la collaboration, etc. Dans
Dreamweaver, ce dossier est appel&eacute; votre &laquo; site distant &raquo; dans le panneau Fichiers. En r&egrave;gle g&eacute;n&eacute;rale, votre dossier
distant se trouve sur l'ordinateur &agrave; partir duquel vous ex&eacute;cutez votre serveur Web. Le dossier distant contient les
fichiers auxquels les utilisateurs acc&egrave;dent via Internet.
Ces deux dossiers (local et distant) vous permettent de transf&eacute;rer des fichiers entre votre disque dur local et un serveur
Web, ce qui facilite la gestion des fichiers sur vos sites Dreamweaver. Vous travaillez sur les fichiers dans le dossier
local, puis vous les publiez dans le dossier distant lorsque vous voulez les rendre accessibles &agrave; d'autres utilisateurs.
Dossier du serveur d'&eacute;valuation Dossier dans lequel Dreamweaver traite les pages dynamiques.
Vous trouverez un didacticiel sur la d&eacute;finition d'un site Dreamweaver &agrave; l'adresse
www.adobe.com/go/learn_dw_comm08_fr.
Derni&egrave;re mise &agrave; jour le 4/5/2011
40
UTILISATION DE DREAMWEAVER
Utilisation de sites Dreamweaver
Description de la structure du dossier local et du dossier distant
Si vous voulez utiliser Dreamweaver pour vous connecter &agrave; un dossier distant, vous devez d&eacute;finir ce dossier distant
dans la cat&eacute;gorie Infos distantes de la bo&icirc;te de dialogue D&eacute;finition du site. Le dossier distant (&eacute;galement baptis&eacute;
&laquo; r&eacute;pertoire h&ocirc;te &raquo;) doit correspondre au dossier racine local de votre site Dreamweaver. Le dossier racine local est le
dossier sup&eacute;rieur de votre site Dreamweaver. Les dossiers distants, tout comme les dossiers locaux, peuvent poss&eacute;der
n'importe quel titre. Toutefois, les fournisseurs d'acc&egrave;s &agrave; Internet nomment g&eacute;n&eacute;ralement les dossiers distants de
niveau sup&eacute;rieur de leurs diff&eacute;rents comptes d'utilisateur public_html, pub_html, etc. Si vous &ecirc;tes responsable de votre
serveur distant et si vous pouvez nommer le dossier distant &agrave; votre guise, il est conseill&eacute; de donner le m&ecirc;me nom au
dossier racine local et au dossier distant.
L'exemple ci-dessous repr&eacute;sente un exemple de dossier racine local &agrave; gauche et un exemple de dossier distant &agrave; droite.
Le dossier racine local sur l'ordinateur local correspond directement au dossier distant du serveur Web, et non &agrave; l'un
des sous-dossier du dossier distant ou &agrave; des dossiers situ&eacute;s au-dessus du dossier distant dans la structure des
r&eacute;pertoires.
R&eacute;pertoire de connexion
Non
(Ne doit pas &ecirc;tre un dossier
distant dans ce cas)
Dossier local
Oui
public_html
(Doit &ecirc;tre un
dossier distant)
(dossier racine)
Actifs
Actifs
Non
(Ne doit pas &ecirc;tre
un dossier distant)
HTML
HTML
Remarque : L'exemple ci-dessus repr&eacute;sente un dossier racine local sur l'ordinateur local, et un dossier distant de niveau
sup&eacute;rieur sur le serveur Web distant. Toutefois, si vous g&eacute;rez plusieurs sites Dreamweaver sur l'ordinateur local, vous
aurez besoin d'un nombre identique de dossiers distants sur le serveur distant. Dans un tel cas, l'exemple ci-dessus n'est
pas d'application. Vous devez au contraire cr&eacute;er diff&eacute;rents dossiers distants dans le dossier public_html, puis les faire
correspondre &agrave; leurs dossiers racine locaux respectifs sur l'ordinateur local.
Lorsque vous &eacute;tablissez une premi&egrave;re connexion distante, le dossier distant du serveur Web est g&eacute;n&eacute;ralement vide.
Ensuite, lorsque vous utilisez Dreamweaver pour charger tous les fichiers de votre dossier racine local, le dossier
distant se remplit de tous vos fichiers Web. La structure des r&eacute;pertoires du dossier distant doit toujours &ecirc;tre identique
&agrave; celle du dossier racine local. En d'autres termes, il doit toujours exister une correspondance pr&eacute;cise entre les fichiers
et les dossiers de votre dossier racine locale et ceux de votre dossier distant. Si la structure du dossier distant ne
correspond pas &agrave; celle du dossier racine local, Dreamweaver transf&egrave;re les fichiers au mauvais endroit et ils risquent de
ne pas &ecirc;tre visibles pour les visiteurs du site. En outre, les chemins d'acc&egrave;s des images et les liens peuvent &ecirc;tre ais&eacute;ment
endommag&eacute;s si les structures des dossiers et des fichiers ne sont pas synchronis&eacute;es.
Le dossier distant doit d&eacute;j&agrave; exister pour que Dreamweaver puisse s'y connecter. Si aucun r&eacute;pertoire racine n'existe ne
fait office de dossier distant sur le serveur Web, cr&eacute;ez-en un ou demandez &agrave; l'administrateur du serveur de se charger
de cette op&eacute;ration.
Cr&eacute;ation d'un nouveau site
Un site Dreamweaver vous permet d'organiser tous les documents associ&eacute;s &agrave; un site Web. La bo&icirc;te de dialogue
Configuration du site vous permet de d&eacute;finir les param&egrave;tres de votre site Dreamweaver.
Pour ouvrir la bo&icirc;te de dialogue Configuration du site, choisissez Site &gt; Nouveau site.
Derni&egrave;re mise &agrave; jour le 4/5/2011
41
UTILISATION DE DREAMWEAVER
Utilisation de sites Dreamweaver
Vous trouverez un didacticiel vid&eacute;o sur la configuration d'un nouveau site Dreamweaver &agrave; l'adresse
www.adobe.com/go/learn_dw_comm08_fr.
D&eacute;finition de l'emplacement du site local
La cat&eacute;gorie Site de la bo&icirc;te de dialogue Configuration du site est la seule que vous devez compl&eacute;ter pour pouvoir
commencer &agrave; travailler sur votre site Dreamweaver. Cette cat&eacute;gorie permet de pr&eacute;ciser le dossier local o&ugrave; vous allez
stocker tous les fichiers de votre site. Le dossier local peut se trouver sur un ordinateur local ou sur un serveur r&eacute;seau.
Lorsque vous &ecirc;tes pr&ecirc;t, vous pouvez compl&eacute;ter les autres cat&eacute;gories de la bo&icirc;te de dialogue Configuration du site, dont
la cat&eacute;gorie Serveurs, o&ugrave; vous pouvez indiquer un dossier distant sur votre serveur distant.
Remarque : Vous n'avez pas besoin de d&eacute;finir un dossier distant si votre dossier racine local se trouve sur le syst&egrave;me
ex&eacute;cutant votre serveur Web. Ce sc&eacute;nario suppose que le serveur Web s'ex&eacute;cute sur votre ordinateur local.
Nom du site Le nom qui s'affiche dans le panneau Fichiers et dans la bo&icirc;te de dialogue G&eacute;rer les sites ; il ne s'affiche
pas dans le navigateur.
Dossier local du site Le nom du dossier sur votre disque local o&ugrave; vous stockez les fichiers, les mod&egrave;les et les &eacute;l&eacute;ments
de biblioth&egrave;que de votre site. Cr&eacute;ez un dossier sur votre disque dur ou cliquez sur l'ic&ocirc;ne de dossier pour rechercher
un dossier. Lorsque Dreamweaver r&eacute;sout des liens relatifs &agrave; la racine du site, il le fait par rapport &agrave; ce dossier.
D&eacute;finition des serveurs
La cat&eacute;gorie Serveurs permet d'indiquer des serveurs distants et d'&eacute;valuation.
Le serveur distant est l'endroit o&ugrave; vous sp&eacute;cifiez le dossier distant qui contiendra les fichiers &agrave; des fins de production,
de collaboration, de d&eacute;ploiement ou divers autres sc&eacute;narios. En r&egrave;gle g&eacute;n&eacute;rale, votre dossier distant se trouve sur
l'ordinateur &agrave; partir duquel vous ex&eacute;cutez votre serveur Web.
Dans le panneau Fichiers de Dreamweaver, le dossier distant repr&eacute;sente votre site distant. Lorsque vous configurez un
dossier distant, vous devez s&eacute;lectionner une m&eacute;thode de connexion qui permettra &agrave; Dreamweaver de transf&eacute;rer des
fichiers &agrave; votre serveur Web et de t&eacute;l&eacute;charger des fichiers depuis ce serveur.
Remarque : Dreamweaver prend en charge les connexions aux serveurs compatibles IPv6. Les types de connexion pris en
charge sont notamment FTP, SFTP, WebDav et RDS. Pour plus d'informations, voir www.ipv6.org/
D&eacute;finition d'options pour les connexions de type local ou r&eacute;seau
Utilisez cette option pour vous connecter &agrave; un dossier r&eacute;seau, si vous stockez des fichiers ou ex&eacute;cutez votre serveur
d'&eacute;valuation sur votre ordinateur local.
1 Choisissez Site &gt; G&eacute;rer les sites.
2 Cliquez sur Nouveau pour configurer un nouveau site, ou s&eacute;lectionnez un site Dreamweaver existant et cliquez sur
Modifier.
3 Dans la bo&icirc;te de dialogue Configuration du site, s&eacute;lectionnez la cat&eacute;gorie Serveurs et effectuez l'une des actions
suivantes :
• Cliquez sur le bouton Ajouter nouveau serveur pour ajouter un nouveau serveur.
• S&eacute;lectionnez un serveur existant puis cliquez sur le bouton Modifier serveur existant.
4 Dans la zone Nom du serveur, entrez le nom du nouveau serveur. Vous pouvez entrer le nom de votre choix.
5 S&eacute;lectionnez Local/R&eacute;seau dans la liste d&eacute;roulante Se connecter au moyen de.
6 Cliquez sur l'ic&ocirc;ne de dossier &agrave; droite de la zone de texte Dossier du serveur pour rechercher puis s&eacute;lectionner le
dossier dans lequel vous stockez les fichiers de votre site.
Derni&egrave;re mise &agrave; jour le 4/5/2011
42
UTILISATION DE DREAMWEAVER
Utilisation de sites Dreamweaver
7 Dans la zone URL Web, entrez l'URL de votre site Web (par exemple http://www.monsite.com). Dreamweaver
utilise l'URL Web pour cr&eacute;er des liens relatifs &agrave; la racine du site et pour v&eacute;rifier les liens lorsque vous employez la
fonction de v&eacute;rification des liens.
Pour une explication plus d&eacute;taill&eacute;e de cette option, voir &laquo; Cat&eacute;gorie Param&egrave;tres avanc&eacute;s &raquo; &agrave; la page 48.
8 Cliquez sur Enregistrer pour fermer l'&eacute;cran Base. Ensuite, dans la cat&eacute;gorie Serveurs, indiquez si le serveur que vous
venez d'ajouter ou de modifier est un serveur distant, un serveur d'&eacute;valuation ou les deux.
D&eacute;finition des options pour les connexions FTP
Utilisez ce param&egrave;tre si vous vous connectez &agrave; votre serveur Web par FTP.
1 Choisissez Site &gt; G&eacute;rer les sites.
2 Cliquez sur Nouveau pour configurer un nouveau site, ou s&eacute;lectionnez un site Dreamweaver existant et cliquez sur
Modifier.
3 Dans la bo&icirc;te de dialogue Configuration du site, s&eacute;lectionnez la cat&eacute;gorie Serveurs et effectuez l'une des actions
suivantes :
• Cliquez sur le bouton Ajouter nouveau serveur pour ajouter un nouveau serveur.
• S&eacute;lectionnez un serveur existant puis cliquez sur le bouton Modifier serveur existant.
Les illustrations suivantes montrent l'&eacute;cran Base de la cat&eacute;gorie Serveur, avec les zones de texte d&eacute;j&agrave; remplies.
Ecran Base de la cat&eacute;gorie Serveur, bo&icirc;te de dialogue Configuration du site.
4 Dans la zone Nom du serveur, entrez le nom du nouveau serveur. Vous pouvez entrer le nom de votre choix.
5 S&eacute;lectionnez FTP dans la liste d&eacute;roulante Se connecter au moyen de.
6 Dans la zone Adresse FTP, entrez l'adresse du serveur FTP sur lequel vous chargez les fichiers pour votre site Web.
Votre adresse FTP est le nom Internet complet d'un syst&egrave;me informatique, par exemple, ftp.mindspring.com. Entrez
l'adresse compl&egrave;te sans ajouter de texte. Evitez en particulier d'ajouter un nom de protocole devant l'adresse.
Si vous ne connaissez pas votre adresse FTP, contactez votre h&eacute;bergeur de site Web.
Remarque : Le port 21 est le port par d&eacute;faut pour la r&eacute;ception de connexions FTP. Vous pouvez modifier le num&eacute;ro de
port par d&eacute;faut en modifiant le contenu de la zone de texte &agrave; droite. Ce faisant, lorsque vous enregistrez vos param&egrave;tres,
un signe deux points et le nouveau num&eacute;ro de port seront ajout&eacute;s &agrave; votre adresse FTP (par exemple
ftp.mindspring.com:29).
Derni&egrave;re mise &agrave; jour le 4/5/2011
43
UTILISATION DE DREAMWEAVER
Utilisation de sites Dreamweaver
7 Dans les zones Nom d'utilisateur et Mot de passe, entrez le nom d'utilisateur et le mot de passe utilis&eacute;s pour la
connexion au serveur FTP.
8 Cliquez sur Tester pour tester votre adresse FTP, votre nom d'utilisateur et votre mot de passe.
Remarque : Vous devez obtenir les informations relatives &agrave; l'adresse FTP, au nom d'utilisateur et au mot de passe aupr&egrave;s
de l'administrateur syst&egrave;me de la soci&eacute;t&eacute; qui h&eacute;berge votre site. Personne d'autre n'a acc&egrave;s &agrave; ces informations. Entrez les
informations de la fa&ccedil;on pr&eacute;cise dont votre administrateur syst&egrave;me vous les a communiqu&eacute;es.
9 Par d&eacute;faut, Dreamweaver enregistre votre mot de passe. D&eacute;s&eacute;lectionnez l'option Enregistrer si vous pr&eacute;f&eacute;rez que
Dreamweaver vous demande le mot de passe &agrave; chaque connexion au serveur distant.
10 Dans la zone R&eacute;pertoire racine, entrez le nom du r&eacute;pertoire (dossier) h&ocirc;te du serveur distant o&ugrave; sont stock&eacute;s les
documents visibles pour le public.
Si vous n'&ecirc;tes pas s&ucirc;r du r&eacute;pertoire racine &agrave; saisir, contactez l'administrateur du serveur ou laissez la zone de texte vide.
Sur certains serveurs, votre r&eacute;pertoire racine est celui dans lequel la connexion FTP est &eacute;tablie. Pour en &ecirc;tre s&ucirc;r,
&eacute;tablissez une connexion avec le serveur. Si vous voyez appara&icirc;tre dans le volet Affichage distant de votre panneau
Fichiers un dossier nomm&eacute; public_html, www ou ayant votre nom d'utilisateur, il s'agit probablement du nom &agrave;
indiquer dans la zone R&eacute;pertoire racine.
11 Dans la zone URL Web, entrez l'URL de votre site Web (par exemple http://www.monsite.com). Dreamweaver
utilise l'URL Web pour cr&eacute;er des liens relatifs &agrave; la racine du site et pour v&eacute;rifier les liens lorsque vous employez la
fonction de v&eacute;rification des liens.
Pour une explication plus d&eacute;taill&eacute;e de cette option, voir &laquo; Cat&eacute;gorie Param&egrave;tres avanc&eacute;s &raquo; &agrave; la page 48.
12 D&eacute;veloppez la section Options suppl&eacute;mentaires si vous devez encore d&eacute;finir des options suppl&eacute;mentaires.
13 S&eacute;lectionnez l'option Utiliser FTP passif si la configuration de votre pare-feu n&eacute;cessite l'utilisation d'un FTP passif.
Cette fonction permet &agrave; votre logiciel local de configurer la connexion FTP &agrave; la place du serveur distant. Si vous n'&ecirc;tes
pas s&ucirc;r d'utiliser le mode FTP passif, consultez votre administrateur syst&egrave;me ou faites des essais en activant puis en
d&eacute;sactivant l'option Utiliser FTP passif.
Pour plus d'informations, consultez la TechNote 15220 sur le site Web d'Adobe &agrave; l'adresse
www.adobe.com/go/tn_15220_fr.
14 Choisissez Utiliser le mode de transfert IPv6 si vous employez un serveur FTP compatible IPv6.
Parall&egrave;lement au d&eacute;ploiement de la version 6 d'Internet Protocol (IPv6), les commandes EPRT et EPSV ont remplac&eacute;
respectivement les commandes FTP PORT et PASV. Par cons&eacute;quent, si vous tentez de vous connecter &agrave; un serveur
FTP compatible IPv6, vous devez utiliser les commandes passif &eacute;tendu (EPSV) et actif &eacute;tendu (EPRT) pour votre
connexion de donn&eacute;es.
Pour plus d'informations, voir www.ipv6.org/.
15 Choisissez Utiliser un proxy si vous voulez sp&eacute;cifier un h&ocirc;te ou un port proxy.
Pour plus d'informations, cliquez sur le lien afin d'acc&eacute;der &agrave; la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences, puis cliquez-y sur le
bouton Aide de la cat&eacute;gorie Site.
16 Cliquez sur Enregistrer pour fermer l'&eacute;cran Base. Ensuite, dans la cat&eacute;gorie Serveurs, indiquez si le serveur que vous
venez d'ajouter ou de modifier est un serveur distant, un serveur d'&eacute;valuation ou les deux.
Pour plus d'informations sur le d&eacute;pannage des probl&egrave;mes de connectivit&eacute; FTP, consultez la TechNote kb405912 sur le
site Web d'Adobe, &agrave; l'adresse www.adobe.com/go/kb405912_fr.
Derni&egrave;re mise &agrave; jour le 4/5/2011
44
UTILISATION DE DREAMWEAVER
Utilisation de sites Dreamweaver
D&eacute;finition des options pour les connexions FTPS (CS 5.5)
FTPS (FTP sur SSL) fournit une prise en charge du chiffrement et de l'authentification, au contraire de SFTP qui prend
uniquement en charge le chiffrement.
Lorsque vous utilisez FTPS pour le transfert de donn&eacute;es, vous pouvez choisir de chiffrer vos informations
d'identification, ainsi que les donn&eacute;es transmises au serveur. En outre, vous pouvez choisir d'authentifier les
informations d'identification du serveur et les connexions. Les informations d'identification d'un serveur sont valid&eacute;es
par rapport &agrave; l'ensemble actuel des certificats de serveur d'autorit&eacute; de certification approuv&eacute;s dans la base de donn&eacute;es
Dreamweaver. Les autorit&eacute;s de certification (CA), qui comprennent des soci&eacute;t&eacute;s comme VeriSign, Thawte, etc.
&eacute;mettent des certificats de serveur sign&eacute;s num&eacute;riquement.
Remarque : Cette proc&eacute;dure d&eacute;crit les options sp&eacute;cifiques &agrave; FTPS. Pour plus d'informations sur les options FTP r&eacute;guli&egrave;res,
consultez la section pr&eacute;c&eacute;dente.
1 Choisissez Site &gt; G&eacute;rer les sites.
2 Cliquez sur Nouveau pour configurer un nouveau site, ou s&eacute;lectionnez un site Dreamweaver existant et cliquez sur
Modifier.
3 Dans la bo&icirc;te de dialogue Configuration du site, s&eacute;lectionnez la cat&eacute;gorie Serveurs et effectuez l'une des actions
suivantes :
• Cliquez sur le bouton &laquo; + &raquo; (Ajouter nouveau serveur) pour ajouter un nouveau serveur.
• S&eacute;lectionnez un serveur existant, puis cliquez sur le bouton Modifier serveur existant.
4 Dans la zone Nom du serveur, entrez le nom du nouveau serveur.
5 Dans la zone Se connecter &agrave; l'aide, s&eacute;lectionnez l'une des options suivantes en fonction de vos besoins.
FTP sur SSL/TLS (chiffrement implicite) Le serveur met fin &agrave; la connexion si la requ&ecirc;te de s&eacute;curit&eacute; n'est pas re&ccedil;ue.
FTP sur SSL/TLS (chiffrement explicite) Si le client ne demande pas de s&eacute;curit&eacute;, le serveur peut choisir de proc&eacute;der
&agrave; une transaction non s&eacute;curis&eacute;e ou de refuser/limiter la connexion.
6 Dans la zone Authentification, choisissez l'une des options suivantes :
Aucun Les informations d'identification du serveur, sign&eacute;es ou auto-sign&eacute;es, s'affichent. Si vous acceptez les
informations d'identification du serveur, le certificat est ajout&eacute; &agrave; un magasin de certificats, trustedSites.db, dans
Dreamweaver. La prochaine fois que vous vous connecterez &agrave; ce serveur, Dreamweaver se connectera directement
au serveur.
Remarque : Si les informations d'identification d'un certificat auto-sign&eacute; ont &eacute;t&eacute; modifi&eacute;es sur le serveur, vous &ecirc;tes
invit&eacute; &agrave; accepter les nouvelles informations d'identification.
Approuv&eacute; Le certificat pr&eacute;sent&eacute; est valid&eacute; avec l'ensemble actuel des certificats de serveur d'autorit&eacute; de certification
approuv&eacute;s dans la base de donn&eacute;es Dreamweaver. La liste de serveurs approuv&eacute;s est stock&eacute;e dans le fichier
cacerts.pem.
Remarque : Un message d'erreur s'affiche si vous s&eacute;lectionnez Serveur approuv&eacute; et que vous vous connectez &agrave; un
serveur avec un certificat auto-sign&eacute;.
7 D&eacute;veloppez la section Options suppl&eacute;mentaires pour d&eacute;finir d'autres options.
Chiffrer uniquement le canal de commande S&eacute;lectionnez cette option si vous souhaitez ne chiffrer que les
commandes qui sont transmises. Utilisez cette option lorsque les donn&eacute;es transmises sont d&eacute;j&agrave; chiffr&eacute;es ou ne
contiennent pas d'informations confidentielles.
Chiffrer uniquement le nom d'utilisateur et le mot de passe S&eacute;lectionnez cette option si vous souhaitez chiffrer
votre nom d'utilisateur et votre mot de passe.
Derni&egrave;re mise &agrave; jour le 4/5/2011
45
UTILISATION DE DREAMWEAVER
Utilisation de sites Dreamweaver
8 Cliquez sur Enregistrer pour fermer l'&eacute;cran Base. Ensuite, dans la cat&eacute;gorie Serveurs, indiquez si le serveur que vous
avez ajout&eacute; ou modifi&eacute; est un serveur distant, un serveur d'&eacute;valuation ou les deux.
Pour plus d'informations sur le d&eacute;pannage des probl&egrave;mes de connectivit&eacute; FTP, consultez la TechNote kb405912 sur le
site Web d'Adobe, &agrave; l'adresse www.adobe.com/go/kb405912_fr.
D&eacute;finition des options pour les connexions SFTP
Utilisez l'option Secure FTP (SFTP) si la configuration de votre pare-feu exige l'emploi d'une connexion FTP s&eacute;curis&eacute;e.
SFTP utilise un syst&egrave;me de cryptage et de cl&eacute;s publiques pour s&eacute;curiser la connexion &agrave; votre serveur d'&eacute;valuation.
Remarque : Pour que vous puissiez s&eacute;lectionner cette option, votre serveur doit ex&eacute;cuter un service SFTP. Si vous ignorez
si votre serveur ex&eacute;cute SFTP, consultez votre administrateur syst&egrave;me.
1 Choisissez Site &gt; G&eacute;rer les sites.
2 Cliquez sur Nouveau pour configurer un nouveau site, ou s&eacute;lectionnez un site Dreamweaver existant et cliquez sur
Modifier.
3 Dans la bo&icirc;te de dialogue Configuration du site, s&eacute;lectionnez la cat&eacute;gorie Serveurs et effectuez l'une des actions
suivantes :
• Cliquez sur le bouton Ajouter nouveau serveur pour ajouter un nouveau serveur.
• S&eacute;lectionnez un serveur existant puis cliquez sur le bouton Modifier serveur existant.
4 Dans la zone Nom du serveur, entrez le nom du nouveau serveur. Vous pouvez entrer le nom de votre choix.
5 S&eacute;lectionnez SFTP dans la liste d&eacute;roulante Se connecter au moyen de.
Les autres options sont identiques &agrave; celles des connexions FTP. Reportez-vous &agrave; la section ci-dessus pour plus
d'informations.
Remarque : Le port 22 est le port par d&eacute;faut pour la r&eacute;ception de connexions SFTP.
D&eacute;finition des options pour les connexions WebDAV
Utilisez ce param&egrave;tre si vous vous connectez &agrave; votre serveur &agrave; l'aide du protocole WebDAV (Web-based Distributed
Authoring and Versioning).
Cette m&eacute;thode de connexion suppose que vous disposez d'un serveur prenant en charge ce protocole, par exemple
Microsoft Internet Information Server (IIS) 5.0 ou une installation du serveur Web Apache configur&eacute;e de fa&ccedil;on
ad&eacute;quate.
Remarque : Si vous s&eacute;lectionnez WebDAV comme m&eacute;thode de connexion et que vous utilisez Dreamweaver dans un
environnement multi-utilisateurs, vous devez &eacute;galement veiller &agrave; ce que tous vos utilisateurs s&eacute;lectionnent WebDAV
comme m&eacute;thode de connexion. Si certains utilisateurs s&eacute;lectionnent WebDAV, alors que d'autres s&eacute;lectionnent d'autres
m&eacute;thodes de connexion (par exemple, FTP), la fonction archivage/extraction de Dreamweaver fonctionnera de fa&ccedil;on
impr&eacute;visible, car WebDAV utilise son propre syst&egrave;me de verrouillage.
1 Choisissez Site &gt; G&eacute;rer les sites.
2 Cliquez sur Nouveau pour configurer un nouveau site, ou s&eacute;lectionnez un site Dreamweaver existant et cliquez sur
Modifier.
3 Dans la bo&icirc;te de dialogue Configuration du site, s&eacute;lectionnez la cat&eacute;gorie Serveurs et effectuez l'une des actions
suivantes :
• Cliquez sur le bouton Ajouter nouveau serveur pour ajouter un nouveau serveur.
• S&eacute;lectionnez un serveur existant puis cliquez sur le bouton Modifier serveur existant.
4 Dans la zone Nom du serveur, entrez le nom du nouveau serveur. Vous pouvez entrer le nom de votre choix.
Derni&egrave;re mise &agrave; jour le 4/5/2011
46
UTILISATION DE DREAMWEAVER
Utilisation de sites Dreamweaver
5 S&eacute;lectionnez WebDAV dans la liste d&eacute;roulante Se connecter au moyen de.
6 Dans la zone URL, indiquez l'URL compl&egrave;te vers le r&eacute;pertoire du serveur WebDAV auquel vous voulez vous
connecter.
Cette URL inclut le protocole, le port et le r&eacute;pertoire (s'il ne s'agit pas du r&eacute;pertoire racine). Par exemple,
http://webdav.mondomaine.net/monsite.
7 Entrez votre nom d'utilisateur et votre mot de passe.
Ces informations sont relatives &agrave; l'identification du serveur et ne sont pas associ&eacute;es &agrave; Dreamweaver. Si vous ne
connaissez pas votre nom d'utilisateur et votre mot de passe, consultez votre administrateur syst&egrave;me ou Web.
8 Cliquez sur Tester pour tester vos param&egrave;tres de connexion.
9 Activez l'option Enregistrer si vous voulez que Dreamweaver m&eacute;morise votre mot de passe &agrave; chaque nouvelle
session.
10 Dans la zone URL Web, entrez l'URL de votre site Web (par exemple http://www.monsite.com). Dreamweaver
utilise l'URL Web pour cr&eacute;er des liens relatifs &agrave; la racine du site et pour v&eacute;rifier les liens lorsque vous employez la
fonction de v&eacute;rification des liens.
Pour une explication plus d&eacute;taill&eacute;e de cette option, voir &laquo; Cat&eacute;gorie Param&egrave;tres avanc&eacute;s &raquo; &agrave; la page 48.
11 Cliquez sur Enregistrer pour fermer l'&eacute;cran Base. Ensuite, dans la cat&eacute;gorie Serveurs, indiquez si le serveur que vous
venez d'ajouter ou de modifier est un serveur distant, un serveur d'&eacute;valuation ou les deux.
D&eacute;finition des options pour les connexions RDS
Utilisez ce param&egrave;tre si vous vous connectez &agrave; votre serveur Web &agrave; l'aide de RDS (Remote Development Services).
Cette m&eacute;thode de connexion suppose que votre serveur distant se trouve sur un ordinateur ex&eacute;cutant Adobe&reg;
ColdFusion&reg;
1 Choisissez Site &gt; G&eacute;rer les sites.
2 Cliquez sur Nouveau pour configurer un nouveau site, ou s&eacute;lectionnez un site Dreamweaver existant et cliquez sur
Modifier.
3 Dans la bo&icirc;te de dialogue Configuration du site, s&eacute;lectionnez la cat&eacute;gorie Serveurs et effectuez l'une des actions
suivantes :
• Cliquez sur le bouton Ajouter nouveau serveur pour ajouter un nouveau serveur.
• S&eacute;lectionnez un serveur existant puis cliquez sur le bouton Modifier serveur existant.
4 Dans la zone Nom du serveur, entrez le nom du nouveau serveur. Vous pouvez entrer le nom de votre choix.
5 S&eacute;lectionnez RDS dans la liste d&eacute;roulante Se connecter au moyen de.
6 Cliquez sur le bouton Param&egrave;tres et entrez les informations suivantes dans la bo&icirc;te de dialogue Configurer le
serveur RDS :
• Entrez le nom de l'ordinateur h&ocirc;te sur lequel votre serveur Web est install&eacute;.
Il s'agit probablement d'une adresse IP ou d'une URL. En cas de doute, demandez &agrave; votre administrateur.
• Entrez le num&eacute;ro du port auquel vous vous connectez.
• D&eacute;finissez votre dossier racine distant comme r&eacute;pertoire h&ocirc;te.
Par exemple, c:\inetpub\wwwroot\myHostDir\.
• Entrez votre nom d'utilisateur et votre mot de passe RDS.
Derni&egrave;re mise &agrave; jour le 4/5/2011
47
UTILISATION DE DREAMWEAVER
Utilisation de sites Dreamweaver
Remarque : Ces options seront peut-&ecirc;tre invisibles si vous avez configur&eacute; votre nom d'utilisateur et votre mot de passe
dans les param&egrave;tres de s&eacute;curit&eacute; de ColdFusion Administrator.
• S&eacute;lectionnez l'option Enregistrer si vous voulez que Dreamweaver m&eacute;morise vos param&egrave;tres.
7 Cliquez sur OK pour fermer la bo&icirc;te de dialogue Configurer le serveur RDS.
8 Dans la zone URL Web, entrez l'URL de votre site Web (par exemple http://www.monsite.com). Dreamweaver
utilise l'URL Web pour cr&eacute;er des liens relatifs &agrave; la racine du site et pour v&eacute;rifier les liens lorsque vous employez la
fonction de v&eacute;rification des liens.
Pour une explication plus d&eacute;taill&eacute;e de cette option, voir &laquo; Cat&eacute;gorie Param&egrave;tres avanc&eacute;s &raquo; &agrave; la page 48.
9 Cliquez sur Enregistrer pour fermer l'&eacute;cran Base. Ensuite, dans la cat&eacute;gorie Serveurs, indiquez si le serveur que vous
venez d'ajouter ou de modifier est un serveur distant, un serveur d'&eacute;valuation ou les deux.
D&eacute;finition des options pour les connexions Microsoft Visual SourceSafe
La prise en charge de Microsoft Visual SourceSafe a &eacute;t&eacute; abandonn&eacute;e &agrave; partir de Dreamweaver CS5.
D&eacute;finition des options avanc&eacute;es
1 Choisissez Site &gt; G&eacute;rer les sites.
2 Cliquez sur Nouveau pour configurer un nouveau site, ou s&eacute;lectionnez un site Dreamweaver existant et cliquez sur
Modifier.
3 Dans la bo&icirc;te de dialogue Configuration du site, s&eacute;lectionnez la cat&eacute;gorie Serveurs et effectuez l'une des actions
suivantes :
• Cliquez sur le bouton Ajouter nouveau serveur pour ajouter un nouveau serveur.
• S&eacute;lectionnez un serveur existant puis cliquez sur le bouton Modifier serveur existant.
4 D&eacute;finissez les options de base requises, puis cliquez sur le bouton Avanc&eacute;.
5 S&eacute;lectionnez l'option Conserver les informations de synchronisation si vous souhaitez que vos fichiers locaux et
distants soient synchronis&eacute;s automatiquement. (Cette option est s&eacute;lectionn&eacute;e par d&eacute;faut.)
6 S&eacute;lectionnez l'option T&eacute;l&eacute;charger autom. les fichiers vers le serveur lors de l'enregistrement si vous voulez que
Dreamweaver charge votre fichier sur votre site distant lorsque vous l'enregistrez.
7 S&eacute;lectionnez l'option Activer l'extraction de fichier si vous voulez activer le syst&egrave;me d'archivage et d'extraction.
8 Si vous employez un serveur d'&eacute;valuation, s&eacute;lectionnez un mod&egrave;le de serveur dans le menu Mod&egrave;le de serveur .
Pour plus d'informations, consultez la section &laquo; Configuration d'un serveur d'&eacute;valuation &raquo; &agrave; la page 50.
R&eacute;solution des probl&egrave;mes de configuration du dossier distant
La liste suivante contient des informations sur les probl&egrave;mes courants que vous pouvez rencontrer lors de la
configuration d'un dossier distant et sur la fa&ccedil;on de les r&eacute;soudre.
Vous trouverez, sur le site Web d'Adobe, une TechNote d&eacute;taill&eacute;e qui fournit des informations sp&eacute;cifiques au
d&eacute;pannage FTP. Cette TechNote se trouve &agrave; l'adresse www.adobe.com/go/kb405912_fr.
• La mise en oeuvre FTP de Dreamweaver peut ne pas fonctionner correctement avec certains serveurs proxy, parefeu multiniveaux et autres formes d'acc&egrave;s indirect &agrave; un serveur. Si vous avez des probl&egrave;mes d'acc&egrave;s FTP, demandez
l'aide de votre administrateur syst&egrave;me.
Derni&egrave;re mise &agrave; jour le 4/5/2011
48
UTILISATION DE DREAMWEAVER
Utilisation de sites Dreamweaver
• Pour la mise en oeuvre FTP de Dreamweaver, il est indispensable de se connecter au dossier racine du syst&egrave;me
distant. Veillez &agrave; d&eacute;signer le dossier racine du syst&egrave;me distant en tant que r&eacute;pertoire h&ocirc;te. Si vous avez sp&eacute;cifi&eacute; le
r&eacute;pertoire h&ocirc;te avec une seule barre oblique (/), vous aurez peut-&ecirc;tre besoin de sp&eacute;cifier un chemin relatif entre le
r&eacute;pertoire auquel vous vous connectez et le dossier racine distant. Si, par exemple, le dossier racine distant est un
r&eacute;pertoire de niveau sup&eacute;rieur, vous pouvez avoir besoin de sp&eacute;cifier ../../ pour le r&eacute;pertoire h&ocirc;te.
• Utilisez des traits de soulignement &agrave; la place des espaces, et &eacute;vitez, dans la mesure du possible, d'utiliser des
caract&egrave;res sp&eacute;ciaux pour les noms de fichiers et de dossiers. La pr&eacute;sence de symboles deux points, de barres
obliques, de points et d'apostrophes dans les noms de fichiers ou de dossiers peut parfois causer des probl&egrave;mes.
• En cas de probl&egrave;me avec un nom de fichier long, raccourcissez ce nom. Sous Mac OS, les noms de fichiers ne
peuvent pas compter plus de 31 caract&egrave;res.
• Notez que certains serveurs utilisent ce qui est appel&eacute;, suivant le syst&egrave;me d'exploitation, des liens symboliques
(Unix), des raccourcis (Windows) ou des alias (Macintosh), pour connecter un dossier situ&eacute; en un point du disque
du serveur &agrave; un autre dossier situ&eacute; ailleurs. Ces alias n'ont g&eacute;n&eacute;ralement pas d'effet n&eacute;gatif sur votre capacit&eacute; &agrave; vous
connecter au dossier ou r&eacute;pertoire appropri&eacute;, mais si vous ne pouvez vous connecter qu'&agrave; une partie du serveur, il
s'agit peut-&ecirc;tre d'un probl&egrave;me d'alias.
• Si vous d&eacute;couvrez un message d'erreur du type &laquo; impossible de placer le fichier &raquo;, votre dossier distant peut &ecirc;tre
satur&eacute;. Pour plus d'informations, consultez le journal FTP.
Remarque : En g&eacute;n&eacute;ral, si vous avez un probl&egrave;me durant un transfert via FTP, examinez le journal FTP en choisissant
Fen&ecirc;tre &gt; R&eacute;sultats (Windows) ou Site &gt; Journal FTP (Macintosh), puis en cliquant sur l'onglet Journal FTP.
Cat&eacute;gorie Contr&ocirc;le de version
Vous pouvez extraire et archiver des fichiers &agrave; l'aide de Subversion. Pour plus d'informations, voir &laquo; Utilisation de
Subversion (svn) pour acqu&eacute;rir et archiver des fichiers &raquo; &agrave; la page 94.
Cat&eacute;gorie Param&egrave;tres avanc&eacute;s
Infos locales
Dossier des images par d&eacute;faut Le dossier dans lequel vous voulez stocker les images de votre site. Tapez le chemin
d'acc&egrave;s au dossier, ou cliquez sur l'ic&ocirc;ne du dossier pour trouver le dossier et le s&eacute;lectionner. Dreamweaver utilise le
chemin d'acc&egrave;s au dossier lorsque vous ajoutez des images aux documents.
Liens relatifs &agrave; D&eacute;termine le type de liens que Dreamweaver cr&eacute;e lorsque vous cr&eacute;ez des liens vers d'autres actifs ou
pages dans votre site. Dreamweaver peut cr&eacute;er deux types de liens : des liens relatifs au document et des liens relatifs &agrave;
la racine du site. Pour plus d'informations sur les diff&eacute;rences entre ces types de liens, voir &laquo; Chemins absolus, relatifs
au documents et relatifs &agrave; la racine du site &raquo; &agrave; la page 282.
Par d&eacute;faut, Dreamweaver cr&eacute;e des liens relatifs au document. Si vous modifiez le param&egrave;tre par d&eacute;faut et activez
l'option Racine du site, veillez &agrave; entrer l'URL Web correcte pour le site dans la zone URL Web (voir ci-dessous). La
modification de ce param&egrave;tre ne convertit pas le chemin des liens existants ; il s'applique uniquement aux nouveaux
liens que vous cr&eacute;ez visuellement &agrave; l'aide de Dreamweaver.
Remarque : Le contenu li&eacute; &agrave; un chemin relatif &agrave; la racine du site n'appara&icirc;t pas lorsque vous lancez l'aper&ccedil;u de
documents dans un navigateur local, sauf si vous sp&eacute;cifiez un serveur de test ou activez l'option Aper&ccedil;u &agrave; l'aide d'un
fichier temporaire dans Edition &gt; Pr&eacute;f&eacute;rences &gt; Aper&ccedil;u dans le navigateur. En effet, &agrave; la diff&eacute;rence des serveurs, les
navigateurs ne reconnaissent pas les racines de sites.
URL Web L'URL de votre site Web. Dreamweaver utilise l'URL Web pour cr&eacute;er des liens relatifs &agrave; la racine du site et
pour v&eacute;rifier les liens lorsque vous employez la fonction de v&eacute;rification des liens.
Derni&egrave;re mise &agrave; jour le 4/5/2011
49
UTILISATION DE DREAMWEAVER
Utilisation de sites Dreamweaver
Les liens relatifs &agrave; la racine du site sont utiles si vous n'&ecirc;tes pas s&ucirc;r de l'emplacement final, dans la structure des
r&eacute;pertoires, de la page sur laquelle vous travaillez, ou si vous pensez qu'il pourrait vous arriver de d&eacute;placer ou de
r&eacute;organiser ult&eacute;rieurement des fichiers contenant des liens. Les liens relatifs &agrave; la racine du site sont des liens dont les
chemins d'acc&egrave;s &agrave; d'autres actifs du site sont relatifs &agrave; la racine du site, et non au document. Ainsi, si vous d&eacute;placez le
document par la suite, le chemin d'acc&egrave;s &agrave; ces actifs reste correct.
Supposons que vous ayez indiqu&eacute; http://www.mysite.com/mycoolsite (r&eacute;pertoire racine du site du serveur distant)
comme URL Web, et que vous ayez &eacute;galement plac&eacute; un dossier images dans le r&eacute;pertoire mycoolsite sur le serveur
distant (http://www.mysite.com/mycoolsite/images). Supposons en outre que votre fichier index.html se trouve dans
le r&eacute;pertoire mycoolsite.
Lorsque vous cr&eacute;ez un lien relatif &agrave; la racine du site &agrave; partir du fichier index.html vers une image situ&eacute;e dans le
r&eacute;pertoire images, le lien se pr&eacute;sente comme suit :
&lt;img src=&quot;/mycoolsite/images/image1.jpg&quot; /&gt;
Ce lien est diff&eacute;rent d'un lien relatif au document, qui serait simplement :
&lt;img src=&quot;images/image1.jpg&quot; /&gt;
L'ajout de /mycoolsite/ &agrave; la source des images lie l'image par rapport &agrave; la racine du site, et non au document. En
supposant que l'image reste dans le r&eacute;pertoire image, le chemin d'acc&egrave;s &agrave; l'image (/mycoolsite/images/image1.jpg) sera
toujours correct, m&ecirc;me si vous d&eacute;placez le fichier index.html dans un autre r&eacute;pertoire.
Pour plus d'informations, voir &laquo; Chemins absolus, relatifs au documents et relatifs &agrave; la racine du site &raquo; &agrave; la page 282.
En ce qui concerne la v&eacute;rification des liens, l'URL Web est n&eacute;cessaire pour d&eacute;terminer si un lien est interne ou externe
au site. Par exemple, si votre URL Web est http://www.mysite.com/mycoolsite et si le v&eacute;rificateur de liens trouve une
URL http://www.yoursite.com sur votre page, il d&eacute;termine que ce dernier lien est externe et le signale comme tel. De
m&ecirc;me, le v&eacute;rificateur de liens utilise l'URL Web pour d&eacute;terminer si des liens sont internes au site, puis v&eacute;rifie si ces
liens internes ne sont pas coup&eacute;s.
V&eacute;rification des liens sensible &agrave; la casse Permet de v&eacute;rifier que la casse des liens correspond &agrave; celle des noms de
fichiers lorsque Dreamweaver v&eacute;rifie les liens. Cette option s'adresse plus particuli&egrave;rement aux syst&egrave;mes UNIX o&ugrave; les
noms de fichiers tiennent compte des majuscules et des minuscules.
Activer le cache Indique s'il faut cr&eacute;er un cache local pour am&eacute;liorer la vitesse des t&acirc;ches de gestion des liens et du site.
Si vous n'activez pas cette option, Dreamweaver vous demandera si vous souhaitez cr&eacute;er de nouveau un cache avant
de cr&eacute;er le site. Il est pr&eacute;f&eacute;rable d'activer cette option, car le panneau Actifs (du groupe Fichiers) est uniquement
op&eacute;rationnel si un cache est cr&eacute;&eacute;.
Voilage et autres cat&eacute;gories
Pour plus d'informations sur les cat&eacute;gories Voilage, Design Notes, Colonnes mode Fichier, Mod&egrave;les ou Spry, cliquez
sur le bouton Aide de la bo&icirc;te de dialogue.
Connexion ou d&eacute;connexion d'un dossier distant via un acc&egrave;s FTP
❖ Dans le panneau Fichiers :
• Pour vous connecter, cliquez sur l'option Connecter &agrave; un h&ocirc;te distant dans la barre d'outils.
• Pour vous d&eacute;connecter, cliquez sur D&eacute;connecter dans la barre d'outils.
Connexion ou d&eacute;connexion d'un dossier distant via un acc&egrave;s r&eacute;seau
❖ Vous n'avez pas besoin de vous connecter au dossier distant ; vous &ecirc;tes connect&eacute; en permanence. Cliquez sur le
bouton Actualiser pour afficher vos fichiers distants.
Derni&egrave;re mise &agrave; jour le 4/5/2011
50
UTILISATION DE DREAMWEAVER
Utilisation de sites Dreamweaver
Configuration d'un serveur d'&eacute;valuation
Si vous envisagez le d&eacute;veloppement de pages dynamiques, Dreamweaver doit pouvoir recourir aux services d'un
serveur d'&eacute;valuation pour g&eacute;n&eacute;rer et afficher du contenu dynamique pendant que vous proc&eacute;dez &agrave; la cr&eacute;ation du site.
Ce serveur d'&eacute;valuation peut se trouver sur votre ordinateur local, un serveur de d&eacute;veloppement, un serveur
interm&eacute;diaire ou un serveur de production.
Pour un aper&ccedil;u d&eacute;taill&eacute; des objectifs d'un serveur d'&eacute;valuation, consultez l'article de David Powers sur le P&ocirc;le de
d&eacute;veloppement Dreamweaver : Setting up a local testing server in Dreamweaver CS.
Voir aussi
&laquo; Choix d'un serveur d'application &raquo; &agrave; la page 555
&laquo; Pr&eacute;paration &agrave; la cr&eacute;ation de sites dynamiques &raquo; &agrave; la page 545
Configuration d'un serveur d'&eacute;valuation
1 Choisissez Site &gt; G&eacute;rer les sites.
2 Cliquez sur Nouveau pour configurer un nouveau site, ou s&eacute;lectionnez un site Dreamweaver existant et cliquez sur
Modifier.
3 Dans la bo&icirc;te de dialogue Configuration du site, s&eacute;lectionnez la cat&eacute;gorie Serveurs et effectuez l'une des actions
suivantes :
• Cliquez sur le bouton Ajouter nouveau serveur pour ajouter un nouveau serveur.
• S&eacute;lectionnez un serveur existant puis cliquez sur le bouton Modifier serveur existant.
4 D&eacute;finissez les options de base requises, puis cliquez sur le bouton Avanc&eacute;.
Remarque : Vous devez entrer une URL Web dans l'&eacute;cran Base lorsque vous sp&eacute;cifiez un serveur d'&eacute;valuation. Pour
plus d'informations, consultez la section suivante.
5 Sous Serveur d'&eacute;valuation, s&eacute;lectionnez le mod&egrave;le de serveur que vous voulez utiliser pour votre application Web.
Remarque : Depuis la version CS5, Dreamweaver n'installe plus de comportements de serveur ASP.NET, ASP
JavaScript ou JSP. Toutefois, si vous travaillez sur des pages ASP.NET, ASP JavaScript ou JSP, Dreamweaver
continuera &agrave; prendre en charge le mode En direct, la coloration de code et les conseils de code pour ces pages. Pour que
ces fonctionnalit&eacute;s soient op&eacute;rationnelles, il n'est pas n&eacute;cessaire de s&eacute;lectionner ASP.NET, ASP JavaScript ou JSP dans
la bo&icirc;te de dialogue D&eacute;finition du site.
6 Cliquez sur Enregistrer pour fermer l'&eacute;cran Avanc&eacute;. Ensuite, dans la cat&eacute;gorie Serveurs, sp&eacute;cifiez le serveur que
vous venez d'ajouter ou de modifier comme serveur d'&eacute;valuation.
A propos de l'URL Web pour le serveur d'&eacute;valuation
Vous devez sp&eacute;cifier une URL Web afin que Dreamweaver puisse faire appel aux services d'un serveur d'&eacute;valuation
pour afficher les donn&eacute;es et se connecter aux bases de donn&eacute;es pendant que vous proc&eacute;dez &agrave; la cr&eacute;ation du site,
Dreamweaver utilise la connexion au moment de la conception afin de vous transmettre des informations utiles sur la
base de donn&eacute;es, telles que le nom des tableaux qu'elle contient et le nom des colonnes de ces tableaux.
L'URL Web d'un serveur d'&eacute;valuation est constitu&eacute;e du nom de domaine et du nom d'un sous-r&eacute;pertoire ou d'un
r&eacute;pertoire virtuel du r&eacute;pertoire de base de votre site Web.
Derni&egrave;re mise &agrave; jour le 4/5/2011
51
UTILISATION DE DREAMWEAVER
Utilisation de sites Dreamweaver
Remarque : Bien que cette terminologie, utilis&eacute;e dans Microsoft IIS, puisse diff&eacute;rer d'un serveur &agrave; l'autre, les m&ecirc;mes
concepts s'appliquent &agrave; la plupart des serveurs Web.
Le r&eacute;pertoire de base Dossier qui, sur le serveur, est mapp&eacute; sur le nom de domaine de votre site. Supposons que le
dossier que vous souhaitez utiliser pour traiter des pages dynamiques est c:\sites\company\, et que ce dossier est votre
r&eacute;pertoire de base (c'est-&agrave;-dire que ce dossier est mapp&eacute; sur le nom de domaine de votre site, par exemple
www.mystartup.com). Dans ce cas, le pr&eacute;fixe d'URL est http://www.mystartup.com/.
Si le dossier que vous souhaitez utiliser pour le traitement des pages dynamiques est un sous-dossier du r&eacute;pertoire de
base, ajoutez ce sous-dossier &agrave; l'URL. Supposons que votre r&eacute;pertoire de base est c:\sites\company\, que le nom de
domaine de votre site est www.mystartup.com et que le dossier &agrave; utiliser pour traiter les pages dynamiques est
c:\sites\company\inventory. Entrez l'URL Web suivante :
http://www.mystartup.com/inventory/
Si le dossier &agrave; utiliser pour traiter les pages dynamiques n'est pas votre r&eacute;pertoire de base ni l'un de ses sous-r&eacute;pertoires,
vous devez cr&eacute;er un r&eacute;pertoire virtuel.
Un r&eacute;pertoire virtuel Dossier qui ne se trouve pas physiquement dans le r&eacute;pertoire de base du serveur, m&ecirc;me s'il
appara&icirc;t dans l'URL. Pour cr&eacute;er un r&eacute;pertoire virtuel, sp&eacute;cifiez un alias repr&eacute;sentant le chemin du dossier dans l'URL.
Supposons que votre r&eacute;pertoire de base soit c:\sites\company et votre dossier de traitement d:\apps\inventory, et que
vous ayez d&eacute;fini pour ce dossier l'alias warehouse. Entrez l'URL Web suivante :
http://www.mystartup.com/warehouse/
Localhost Terme qui peut &ecirc;tre utilis&eacute; pour d&eacute;signer le r&eacute;pertoire de base dans vos URL lorsque le client (g&eacute;n&eacute;ralement
un navigateur, mais dans ce cas Dreamweaver) r&eacute;side sur le m&ecirc;me syst&egrave;me que votre serveur Web. Supposons que
Dreamweaver r&eacute;side sur le m&ecirc;me syst&egrave;me Windows que le serveur Web, que votre r&eacute;pertoire de base soit
c:\sites\company et que vous ayez d&eacute;fini un r&eacute;pertoire virtuel nomm&eacute; warehouse d&eacute;signant le dossier charg&eacute; du
traitement des pages dynamiques. Les URL Web suivantes doivent &ecirc;tre entr&eacute;es pour les serveurs Web s&eacute;lectionn&eacute;s :
Serveur Web
URL Web
ColdFusion MX 7
http://localhost:8500/warehouse/
IIS
http://localhost/warehouse/
Apache (Windows)
http://localhost:80/warehouse/
Jakarta Tomcat (Windows)
http://localhost:8080/warehouse/
Remarque : Par d&eacute;faut, le serveur Web ColdFusion MX 7 s'ex&eacute;cute sur le port 8500, le serveur Web Apache sur le port 80
et le serveur Web Jakarta Tomcat sur le port 8080.
Le r&eacute;pertoire de base des utilisateurs ex&eacute;cutant le serveur Web Apache sur Macintosh est le suivant :
Users/MonNomd'Utilisateur/Sites (MonNomd'Utilisateur correspond &agrave; votre nom d'utilisateur Macintosh).
L'installation de Mac OS 10.1 ou version sup&eacute;rieure entra&icirc;ne la d&eacute;finition automatique d'un alias intitul&eacute;
~MonNomd'Utilisateur. D&egrave;s lors, votre URL Web utilis&eacute;e par d&eacute;faut dans Dreamweaver se pr&eacute;sente de la mani&egrave;re
suivante :
http://localhost/~MonNomd'Utilisateur/
Si le dossier que vous souhaitez utiliser pour le traitement des pages dynamiques correspond &agrave;
Users:MonNomd'Utilisateur:Sites:inventory, l'URL Web est la suivante :
http://localhost/~MonNomd'Utilisateur/inventory/
Derni&egrave;re mise &agrave; jour le 4/5/2011
52
UTILISATION DE DREAMWEAVER
Utilisation de sites Dreamweaver
Gestion et modification de sites
La bo&icirc;te de dialogue G&eacute;rer les sites a pour fonction de vous permettre de cr&eacute;er un nouveau site, de modifier, de
dupliquer, de supprimer un site, d'importer ou d'exporter les param&egrave;tres d'un site.
1 S&eacute;lectionnez Site &gt; G&eacute;rer les sites et s&eacute;lectionnez un site dans la liste de gauche.
2 Cliquez sur le bouton correspondant &agrave; l'op&eacute;ration qui vous convient, puis cliquez sur Termin&eacute;.
Nouveau Pour cr&eacute;er un nouveau site.
Modifier Pour modifier un site existant.
Dupliquer Pour cr&eacute;er une copie du site s&eacute;lectionn&eacute;. Cette copie s'affiche dans la liste des sites.
Supprimer Pour supprimer le site s&eacute;lectionn&eacute; ; cette op&eacute;ration est irr&eacute;versible.
Exporter Pour exporter les param&egrave;tres d'un site sous forme de fichier XML (*.ste).
Importer Pour s&eacute;lectionner un fichier de param&egrave;tres d'un site (*.ste) &agrave; importer.
Voir aussi
&laquo; Importation et exportation des param&egrave;tres d'un site &raquo; &agrave; la page 53
Modification d'un site Web distant existant dans Dreamweaver
Vous pouvez utiliser Dreamweaver pour copier un site distant existant (ou une partie d'un site distant) sur votre disque
dur local, et le modifier localement, m&ecirc;me si vous n'avez pas utilis&eacute; Dreamweaver pour cr&eacute;er le site original.
1 Cr&eacute;ez un dossier local contenant le site existant, puis d&eacute;finissez-le en tant que dossier local du site.
Remarque : Vous devez copier localement la structure compl&egrave;te de la branche concern&eacute;e du site distant existant.
2 Configurez un dossier distant en utilisant les informations d'acc&egrave;s &agrave; distance de votre site existant. Vous devez vous
connecter au site existant pour t&eacute;l&eacute;charger les fichiers sur votre ordinateur avant de pouvoir les modifier.
Veillez &agrave; choisir le dossier racine correct pour le site distant.
3 Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers), cliquez sur le bouton Connecter &agrave; un h&ocirc;te distant (pour un acc&egrave;s
FTP) ou sur Actualiser (pour un acc&egrave;s r&eacute;seau) dans la barre d'outils pour afficher le site distant.
4 Modifiez le site :
• Si vous souhaitez travailler sur l'ensemble du site, s&eacute;lectionnez, dans le panneau Fichiers, le dossier racine du site
distant, puis cliquez sur Acqu&eacute;rir le(s) fichier(s) dans la barre d'outils pour t&eacute;l&eacute;charger l'ensemble du site sur votre
disque local.
• Si vous d&eacute;sirez travailler sur un seul des fichiers ou dossiers du site, s&eacute;lectionnez ce fichier ou dossier dans le volet
Affichage distant du panneau Fichiers et cliquez sur Acqu&eacute;rir le(s) fichier(s) dans la barre d'outils pour t&eacute;l&eacute;charger
ce fichier sur votre disque dur local.
Dreamweaver duplique automatiquement toute la partie de la structure du site distant n&eacute;cessaire pour replacer le
fichier t&eacute;l&eacute;charg&eacute; au niveau ad&eacute;quat dans la hi&eacute;rarchie du site. Si vous ne modifiez qu'une partie d'un site, il est en
g&eacute;n&eacute;ral conseill&eacute; de charger &eacute;galement les fichiers d&eacute;pendants, tels que les fichiers d'image.
Suppression d'un site Dreamweaver de votre liste de sites
La suppression d'un Dreamweaver et de toutes ses informations de configuration de votre liste de site n'entra&icirc;ne pas
la suppression des fichiers du site de votre ordinateur.
1 Choisissez Site &gt; G&eacute;rer les sites.
Derni&egrave;re mise &agrave; jour le 4/5/2011
53
UTILISATION DE DREAMWEAVER
Utilisation de sites Dreamweaver
2 S&eacute;lectionnez le nom du site.
3 Cliquez sur Supprimer, puis sur Oui pour supprimer le site de la liste ou sur Non pour conserver le site, puis cliquez
sur Termin&eacute;.
Importation et exportation des param&egrave;tres d'un site
Vous pouvez exporter les param&egrave;tres de votre site en tant que fichier XML que vous pourrez importer dans
Dreamweaver ult&eacute;rieurement. Cela vous permet de d&eacute;placer des sites entre plusieurs ordinateurs et versions de produit
ainsi que de partager les param&egrave;tres avec d'autres utilisateurs.
Exportez les param&egrave;tres de votre site r&eacute;guli&egrave;rement de fa&ccedil;on &agrave; disposer d'une copie de sauvegarde au cas o&ugrave; un
incident surviendrait sur ce site.
Exportation de vos sites
1 S&eacute;lectionnez Site &gt; G&eacute;rer les sites.
2 S&eacute;lectionnez un ou plusieurs sites dont vous souhaitez exporter les param&egrave;tres, puis cliquez sur Exporter :
• Pour s&eacute;lectionner plusieurs sites, appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en
cliquant avec la souris sur chaque site.
• Pour s&eacute;lectionner une s&eacute;rie de sites, cliquez en maintenant la touche Maj enfonc&eacute;e sur le premier et le dernier site
de la s&eacute;rie.
3 Si vous voulez sauvegarder les param&egrave;tres de votre site, choisissez la premi&egrave;re option de la bo&icirc;te de dialogue
Exportation du site, puis cliquez sur OK. Dreamweaver enregistre les informations de connexion au serveur distant
(nom d'utilisateur et mot de passe, par exemple), ainsi que les informations de chemin local.
4 Si vous voulez partager vos param&egrave;tres avec d'autres utilisateurs, choisissez la seconde option de la bo&icirc;te de dialogue
Exportation du site, puis cliquez sur OK. (Dreamweaver n'enregistre pas les informations qui ne sont pas valables
pour d'autres utilisateurs (vos informations de connexion au serveur distant et de chemins locaux, par exemple).
5 Pour chaque site dont les param&egrave;tres doivent &ecirc;tre export&eacute;s, recherchez un emplacement o&ugrave; vous souhaitez
enregistrer le site et cliquez sur Enregistrer. (Dreamweaver enregistre les param&egrave;tres de chaque site en tant que
fichier XML avec une extension de fichier .ste.)
6 Cliquez sur Termin&eacute;.
Remarque : Enregistrez le fichier *.ste dans le dossier racine de votre site ou sur votre bureau pour faciliter sa recherche.
Si vous ne vous souvenez pas de l'endroit o&ugrave; il se trouve, effectuez sur votre ordinateur une recherche portant sur les
fichiers dot&eacute;s de l'extension *.ste.
Importation de sites
1 S&eacute;lectionnez Site &gt; G&eacute;rer les sites.
2 Cliquez sur Importer.
3 Recherchez et s&eacute;lectionnez un ou plusieurs sites (d&eacute;finis dans des fichiers ayant une extension .ste) dont vous
souhaitez importer les param&egrave;tres.
Pour s&eacute;lectionner plusieurs sites, appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant
avec la souris sur chaque fichier .ste. Pour s&eacute;lectionner une s&eacute;rie de sites, cliquez en maintenant la touche Maj enfonc&eacute;e
sur le premier et le dernier fichier de la s&eacute;rie.
4 Cliquez sur Ouvrir, puis sur Termin&eacute;.
Une fois que Dreamweaver a import&eacute; les sites, leurs noms apparaissent dans la bo&icirc;te de dialogue G&eacute;rer les sites.
Derni&egrave;re mise &agrave; jour le 4/5/2011
54
UTILISATION DE DREAMWEAVER
Utilisation de sites Dreamweaver
D&eacute;finition des pr&eacute;f&eacute;rences de site pour le transfert de fichiers
S&eacute;lectionnez vos pr&eacute;f&eacute;rences pour le contr&ocirc;le des fonctions de transfert de fichiers dans le panneau Fichiers.
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh).
2 Dans la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences, s&eacute;lectionnez la cat&eacute;gorie Site dans la liste de gauche.
3 D&eacute;finissez les options, puis cliquez sur OK.
Toujours afficher Indique le site (local ou distant) qui doit toujours &ecirc;tre affich&eacute; ainsi que le volet (gauche ou droit) du
panneau Fichiers dans lequel doivent &ecirc;tre pr&eacute;sent&eacute;s les fichiers locaux et distants.
Par d&eacute;faut, le site local appara&icirc;t toujours dans le volet droit. Le volet qui n'a pas &eacute;t&eacute; choisi (celui de gauche par d&eacute;faut)
sera le volet interchangeable : il pourra alors afficher les fichiers de l'autre site (le site distant par d&eacute;faut).
Fichiers d&eacute;pendants Affiche une invite proposant de transf&eacute;rer les fichiers d&eacute;pendants (images, feuilles de style
externes et autres fichiers r&eacute;f&eacute;renc&eacute;s par les fichiers HTML) qui doivent &ecirc;tre charg&eacute;s par le navigateur en m&ecirc;me temps
que le fichier HTML. Par d&eacute;faut, les options Invite lors de Acqu&eacute;rir/Extraire et Invite lors de Placer/Archiver sont
toutes deux activ&eacute;es.
D'une mani&egrave;re g&eacute;n&eacute;rale, il est conseill&eacute; de t&eacute;l&eacute;charger les fichiers d&eacute;pendants lorsque le fichier extrait est un nouveau
fichier, mais c'est inutile si les versions les plus r&eacute;centes des fichiers d&eacute;pendants sont d&eacute;j&agrave; pr&eacute;sentes sur le disque local.
Cela s'applique &eacute;galement lors du transfert et de l'archivage de fichiers : il n'est pas n&eacute;cessaire si des copies mises &agrave; jour
sont d&eacute;j&agrave; pr&eacute;sentes dans la destination.
Si vous d&eacute;sactivez ces options, vos fichiers d&eacute;pendants ne sont pas transf&eacute;r&eacute;s. Ainsi, pour forcer l'affichage la bo&icirc;te de
dialogue Fichiers d&eacute;pendants m&ecirc;me lorsque ces options sont d&eacute;s&eacute;lectionn&eacute;es, maintenez la touche Alt (Windows) ou
Option (Macintosh) enfonc&eacute;e tout en choisissant Acqu&eacute;rir, Placer, Archiver ou Extraire.
Connexion FTP D&eacute;termine si la connexion avec le site distant doit &ecirc;tre interrompue apr&egrave;s le d&eacute;lai d'inactivit&eacute; sp&eacute;cifi&eacute;.
D&eacute;lai FTP Indique le temps, exprim&eacute; en secondes, pendant lequel Dreamweaver tente d'&eacute;tablir une connexion avec le
serveur distant.
S'il n'y a toujours pas de r&eacute;ponse &agrave; l'issue du d&eacute;lai indiqu&eacute;, Dreamweaver affiche une bo&icirc;te de dialogue pour vous en
avertir.
Options de transfert FTP D&eacute;termine si Dreamweaver s&eacute;lectionne l'option par d&eacute;faut apr&egrave;s un nombre de secondes
sp&eacute;cifi&eacute;, lorsqu'une bo&icirc;te de dialogue appara&icirc;t lors du transfert d'un fichier et que l'utilisateur ne fournit aucune
r&eacute;ponse.
H&ocirc;te proxy Sp&eacute;cifie l'adresse du serveur proxy par lequel vous vous connectez aux serveurs externes si vous vous
trouvez derri&egrave;re un pare-feu.
Dans le cas contraire, laissez ce champ vierge. Si vous vous trouvez derri&egrave;re un pare-feu, activez l'option Utiliser un
proxy de la bo&icirc;te de dialogue D&eacute;finition du site (Serveurs &gt; Modifier un serveur existant (ic&ocirc;ne repr&eacute;sentant un
crayon) &gt; Autres options).
Port du proxy Sp&eacute;cifie le port de votre proxy ou de votre pare-feu par lequel vous passez pour vous connecter au
serveur distant. Si vous vous connectez par l'interm&eacute;diaire d'un port autre que 21 (port par d&eacute;faut pour FTP), tapez
son num&eacute;ro ici.
Options de placement : Enregistrer les fichiers avant de les placer Indique que les fichiers non enregistr&eacute;s sont
automatiquement enregistr&eacute;s avant d'&ecirc;tre plac&eacute;s sur le site distant.
Options de d&eacute;placement : Demander avant de d&eacute;placer les fichiers sur le serveur Vous alerte lorsque vous tentez de
d&eacute;placer des fichiers sur le site distant.
Derni&egrave;re mise &agrave; jour le 4/5/2011
55
UTILISATION DE DREAMWEAVER
Utilisation de sites Dreamweaver
G&eacute;rer les sites Ouvre la bo&icirc;te de dialogue G&eacute;rer les sites, dans laquelle vous pouvez cr&eacute;er un site ou modifier un site
existant.
Vous pouvez d&eacute;finir si les types de fichiers transf&eacute;r&eacute;s doivent l'&ecirc;tre au format ASCII (texte) ou binaire, et ce en
personnalisant le fichier FTPExtensionMap.txt situ&eacute; dans le dossier Dreamweaver/Configuration (sur Macintosh, il
s'agit du fichier FTPExtensionMapMac.txt). Pour plus d'informations, voir Extension de Dreamweaver.
Gestion des sites Contribute avec Dreamweaver
Gestion de sites Contribute
Adobe&reg; Contribute&reg; CS4 regroupe les fonctions d'un navigateur Web et d'un &eacute;diteur de pages Web. Il permet &agrave; vos
coll&egrave;gues ou clients de naviguer jusqu'&agrave; une page d'un site que vous avez cr&eacute;&eacute; et de modifier ou de mettre &agrave; jour cette
page s'ils poss&egrave;dent les droits d'acc&egrave;s ad&eacute;quats. Les utilisateurs de Contribute peuvent ajouter et mettre &agrave; jour du
contenu Web de base, y compris du texte mis en forme, des images, des tableaux et des liens. Les administrateurs de
sites Contribute peuvent limiter les actions que les utilisateurs ordinaires (non administrateurs) peuvent effectuer dans
un site.
Remarque : Cette section s'adresse aux administrateurs de Contribute.
En tant qu'administrateur du site, vous donnez la possibilit&eacute; aux personnes qui ne sont pas administrateurs de modifier
des pages en cr&eacute;ant et en leur envoyant une cl&eacute; de connexion (pour plus d'informations sur la fa&ccedil;on de proc&eacute;der,
consultez l'aide de Contribute). Vous pouvez &eacute;galement configurer une connexion &agrave; un site Contribute &agrave; l'aide de
Dreamweaver qui vous permet, &agrave; vous ou &agrave; votre concepteur de site, de vous connecter au site Contribute et d'utiliser
toutes les fonctions de modification disponibles dans Dreamweaver.
Contribute ajoute des fonctionnalit&eacute;s &agrave; votre site Web avec Contribute Publishing Server (CPS), une suite
d'applications de publication et d'outils de gestion utilisateur qui vous permet d'int&eacute;grer Contribute au service
d'annuaire utilisateur de votre organisation (Lightweight Directory Access Protocol (LDAP) ou Active Directory, par
exemple). Lorsque vous activez votre site Dreamweaver en tant que site Contribute, Dreamweaver lit les param&egrave;tres
d'administration de Contribute chaque fois que vous vous connectez au site distant. Si Dreamweaver d&eacute;tecte que CPS
est actif, il h&eacute;rite de certaines fonctionnalit&eacute;s des services CPS (restauration des fichiers et consignation des
&eacute;v&eacute;nements, par exemple).
Vous pouvez utiliser Dreamweaver pour vous connecter &agrave; un site Contribute et modifier un fichier de ce site. La
plupart des options Dreamweaver fonctionnent avec un site Contribute de la m&ecirc;me fa&ccedil;on qu'avec tout autre site.
Toutefois, lorsque vous utilisez Dreamweaver avec un site Contribute, Dreamweaver effectue automatiquement
certaines op&eacute;rations de gestion de fichiers, telles que l'enregistrement de diff&eacute;rentes versions d'un document et la
consignation de certains &eacute;v&eacute;nements dans la console CPS.
Pour plus d'informations, consultez l'aide de Contribute.
Structure du site et conception de pages pour un site Contribute
Pour permettre aux utilisateurs de Contribute de modifier votre site Web, tenez compte des consid&eacute;rations suivantes
lors de sa structuration :
• Utilisez une structure de site simple. Evitez de cr&eacute;er de nombreux niveaux de dossiers. Regroupez les &eacute;l&eacute;ments
associ&eacute;s dans un m&ecirc;me dossier.
• D&eacute;finissez des droits en lecture et en &eacute;criture appropri&eacute;s pour les dossiers sur le serveur.
Derni&egrave;re mise &agrave; jour le 4/5/2011
56
UTILISATION DE DREAMWEAVER
Utilisation de sites Dreamweaver
• Ajoutez des pages d'index aux dossiers &agrave; mesure que vous les cr&eacute;ez pour inciter les utilisateurs de Contribute &agrave;
placer les nouvelles pages dans les dossiers appropri&eacute;s. Par exemple, si les utilisateurs de Contribute fournissent des
pages contenant des comptes rendus de r&eacute;unions, vous pouvez cr&eacute;er un dossier dans le dossier racine du site appel&eacute;
comptes_rendus et y ins&eacute;rer une page d'index. Vous devez ensuite cr&eacute;er un lien qui renvoie &agrave; la page d'index des
comptes rendus sur la page principale du site. Un utilisateur de Contribute peut alors atteindre la page d'index et
cr&eacute;er une page de proc&egrave;s-verbal pour une r&eacute;union donn&eacute;e, d&eacute;sign&eacute;e par un lien depuis cette page.
• Dans chaque page d'index du dossier, fournissez une liste de liens vers chaque page et document contenus dans ce
dossier.
• Utilisez des conceptions de pages simples en &eacute;vitant des mises en forme fantaisistes.
• Utilisez CSS plut&ocirc;t que des balises HTML et attribuez un nom descriptif &agrave; vos styles CSS. Si les utilisateurs de
Contribute utilisent un jeu de styles standard dans Microsoft Word, attribuez &agrave; vos styles CSS les m&ecirc;mes noms que
ceux des styles Word correspondants, afin que Contribute puisse faire correspondre les styles lorsqu'un utilisateur
copie des donn&eacute;es d'un document Word et les colle dans une page Contribute.
• Pour emp&ecirc;cher les utilisateurs de Contribute d'utiliser un style CSS, modifiez le nom du style de sorte qu'il
commence par mmhide_. Par exemple, si vous utilisez un style nomm&eacute; Justification_droite dans une page mais que
vous ne souhaitez pas que les utilisateurs de Contribute puissent utiliser ce style, renommez-le de la fa&ccedil;on suivante :
mmhide_Justification_droite.
Remarque : Vous devez ajouter mmhide_ au nom du style en mode Code et non dans le panneau CSS.
• Dans un souci de simplicit&eacute;, utilisez aussi peu de styles CSS que possible.
• Si vous utilisez des inclusions c&ocirc;t&eacute; serveur pour des &eacute;l&eacute;ments de pages HTML, par exemple des en-t&ecirc;te ou des pieds
de page, cr&eacute;ez une page HTML non li&eacute;e contenant les liens vers les fichiers d'inclusion. Les utilisateurs de
Contribute peuvent ensuite marquer cette page et l'utiliser pour rechercher les fichiers d'inclusion et les modifier.
Voir aussi
&laquo; Cr&eacute;ation d'un mod&egrave;le Dreamweaver &raquo; &agrave; la page 411
&laquo; Cr&eacute;ation et gestion de CSS &raquo; &agrave; la page 134
&laquo; Utilisation des inclusions c&ocirc;t&eacute; serveur &raquo; &agrave; la page 353
Transfert de fichiers depuis et vers un site Contribute
Contribute utilise un syst&egrave;me similaire au syst&egrave;me d'archivage et d'extraction de Dreamweaver afin qu'un seul
utilisateur &agrave; la fois puisse modifier une page Web donn&eacute;e. Lorsque vous activez la compatibilit&eacute; avec Contribute dans
Dreamweaver, le syst&egrave;me d'archivage et d'extraction de Dreamweaver est automatiquement activ&eacute;.
Pour transf&eacute;rer des fichiers depuis et vers un site Contribute &agrave; l'aide de Dreamweaver, utilisez toujours les commandes
Archiver et Extraire. Si vous utilisez les commandes Placer et Acqu&eacute;rir pour transf&eacute;rer les fichiers, vous risquez
d'&eacute;craser les derni&egrave;res modifications apport&eacute;es &agrave; un fichier par un utilisateur de Contribute.
Lorsque vous archivez un fichier dans un site Contribute, Dreamweaver effectue automatiquement une copie de
sauvegarde de la version pr&eacute;c&eacute;demment archiv&eacute;e du fichier dans le dossier _baks et ajoute votre nom d'utilisateur et la
date &agrave; un fichier Design Notes.
Voir aussi
&laquo; Archivage et extraction de fichiers &raquo; &agrave; la page 91
Derni&egrave;re mise &agrave; jour le 4/5/2011
57
UTILISATION DE DREAMWEAVER
Utilisation de sites Dreamweaver
Autorisations des fichiers et des dossiers Contribute sur le serveur
Contribute offre un moyen de g&eacute;rer les autorisations de fichiers et de dossiers pour chaque r&ocirc;le d'utilisateur que vous
aurez d&eacute;fini ; toutefois, Contribute ne permet pas de g&eacute;rer les autorisations de lecture et d'&eacute;criture de base affect&eacute;es aux
fichiers et aux dossiers par le serveur. Dans Dreamweaver, vous pouvez g&eacute;rer ces autorisations directement sur
le serveur.
Si un utilisateur de Contribute ne dispose pas de droit d'acc&egrave;s en lecture sur le serveur pour un fichier d&eacute;pendant, tel
qu'une image affich&eacute;e dans une page, le contenu de ce fichier ne s'affiche pas dans la fen&ecirc;tre Contribute. Par exemple,
si un utilisateur ne dispose pas de droit d'acc&egrave;s en lecture &agrave; un dossier d'images, les images contenues dans ce dossier
s'affichent sous la forme d'ic&ocirc;nes d'image d&eacute;chir&eacute;e dans Contribute. De m&ecirc;me, les mod&egrave;les Dreamweaver sont stock&eacute;s
dans un sous-dossier du dossier racine du site. Ainsi, si un utilisateur de Contribute ne dispose pas d'acc&egrave;s en lecture
au dossier racine, il ne peut pas utiliser les mod&egrave;les de ce site, sauf si vous copiez les mod&egrave;les dans un dossier accessible.
Lorsque vous d&eacute;finissez un site Dreamweaver, vous devez accorder aux utilisateurs des droits d'acc&egrave;s en lecture au
dossier /_mm sur le serveur (sous-dossier _mm du dossier racine), ainsi qu'au dossier /Templates et &agrave; tous les dossiers
contenant des ressources dont ils auront besoin.
Si pour une raison quelconque, vous ne pouvez pas accorder de droits d'acc&egrave;s en lecture au dossier /Templates, vous
pouvez tout de m&ecirc;me rendre les mod&egrave;les accessibles aux utilisateurs de Contribute. Consultez la rubrique &laquo; Activation
de l'acc&egrave;s aux mod&egrave;les sans l'acc&egrave;s au dossier racine pour les utilisateurs de Contribute &raquo; &agrave; la page 61.
Pour plus d'informations sur les autorisations Contribute, voir Administration de Contribute dans l'aide de Contribute.
Fichiers sp&eacute;ciaux Contribute
Contribute utilise divers fichiers sp&eacute;ciaux qui ne sont pas destin&eacute;s &agrave; &ecirc;tre consult&eacute;s par les visiteurs du site :
• le fichier de param&egrave;tres partag&eacute;s, avec une extension CSI, qui s'affiche dans un dossier nomm&eacute; _mm dans le dossier
racine du site et contient des informations utilis&eacute;es par Contribute pour la gestion du site ;
• des versions pr&eacute;c&eacute;dentes de fichiers, dans des dossiers nomm&eacute;s _baks ;
• des versions temporaires de pages, afin que les utilisateurs puissent afficher un aper&ccedil;u des modifications ;
• des fichiers de verrouillage temporaires, indiquant qu'une page sp&eacute;cifique est en cours de modification ou affich&eacute;e
en aper&ccedil;u ;
• des fichiers Design Notes contenant des m&eacute;tadonn&eacute;es relatives aux pages du site.
En g&eacute;n&eacute;ral, vous ne devez pas modifier ces fichiers sp&eacute;ciaux dans Dreamweaver ; Dreamweaver les g&egrave;re
automatiquement.
Si vous ne souhaitez pas que ces fichiers sp&eacute;ciaux Contribute apparaissent sur votre serveur publiquement
accessible, vous pouvez d&eacute;finir un serveur interm&eacute;diaire sur lequel les utilisateurs de Contribute pourront travailler
sur les pages. Vous pouvez ensuite r&eacute;guli&egrave;rement copier ces pages Web du serveur interm&eacute;diaire au serveur de
production qui se trouve sur le Web. Si vous utilisez un serveur interm&eacute;diaire, copiez uniquement les pages Web
sur le serveur de production. Ne copiez aucun des fichiers sp&eacute;ciaux Contribute mentionn&eacute;s ci-dessus. En
particulier, ne copiez pas les dossiers _mm et _baks sur le serveur de production.
Remarque : Pour plus d'informations sur la configuration d'un serveur afin d'&eacute;viter que les visiteurs ne voient les
fichiers des dossiers commen&ccedil;ant par un soulign&eacute;, consultez le chapitre traitant de la s&eacute;curit&eacute; des sites Web dans l'aide
de Contribute.
Parfois, vous devrez supprimer manuellement d'autres fichiers sp&eacute;ciaux Contribute. Par exemple, si Contribute
n'arrive pas &agrave; supprimer des pages temporaires d'aper&ccedil;u, une fois l'aper&ccedil;u ferm&eacute; par l'utilisateur, vous devez supprimer
ces pages temporaires manuellement. Le nom de fichier des pages temporaires d'aper&ccedil;u commence par TMP.
Derni&egrave;re mise &agrave; jour le 4/5/2011
58
UTILISATION DE DREAMWEAVER
Utilisation de sites Dreamweaver
De m&ecirc;me, un fichier de verrouillage obsol&egrave;te peut accidentellement rester sur le serveur. Dans ce cas, vous devez le
supprimer manuellement pour que les autres utilisateurs puissent modifier la page.
Pr&eacute;paration d'un site &agrave; utiliser avec Contribute
Si vous pr&eacute;parez un site Dreamweaver existant pour les utilisateurs de Contribute, vous devez activer la compatibilit&eacute;
avec Contribute de fa&ccedil;on explicite afin d'utiliser les fonctions relatives &agrave; Contribute ; Dreamweaver n'affiche pas de
message vous invitant &agrave; le faire ; toutefois, lorsque vous vous connectez &agrave; un site qui a &eacute;t&eacute; configur&eacute; en tant que site
Contribute (avec un administrateur), Dreamweaver vous invite &agrave; activer la compatibilit&eacute; avec Contribute.
Tous les types de connexion ne prennent pas en charge la compatibilit&eacute; avec Contribute. Les restrictions suivantes
s'appliquent aux types de connexion :
• Si vous vous connectez &agrave; votre site distant &agrave; l'aide de WebDAV, vous ne pouvez pas activer la compatibilit&eacute; avec
Contribute, car ces syst&egrave;mes de commande source ne sont pas compatibles avec les syst&egrave;mes Design Notes et les
syst&egrave;mes d'archivage et d'extraction que Dreamweaver utilise pour les sites Contribute.
• Si vous utilisez RDS pour vous connecter &agrave; votre site distant, vous pouvez activer la compatibilit&eacute; avec Contribute,
mais vous devez ensuite personnaliser votre connexion avant de pouvoir la partager avec des utilisateurs de
Contribute.
• Si vous utilisez votre ordinateur local comme serveur Web, vous devez d&eacute;finir le site &agrave; l'aide d'une connexion FTP
ou r&eacute;seau (au lieu d'un simple chemin de dossier local) pour pouvoir partager votre connexion avec des utilisateurs
de Contribute.
Lorsque vous activez la compatibilit&eacute; avec Contribute, Dreamweaver active automatiquement Design Notes (y
compris l'option T&eacute;l&eacute;charger les Design Notes pour les partager), ainsi que le syst&egrave;me d'archivage et d'extraction de
fichiers.
Si Contribute Publishing Server (CPS) est actif sur le site distant auquel vous vous connectez, Dreamweaver notifie
CPS d&egrave;s que vous ex&eacute;cutez une op&eacute;ration r&eacute;seau, telle que l'archivage, la restauration ou la publication d'un fichier. Le
CPS conserve une trace de ces &eacute;v&eacute;nements, que vous pouvez afficher dans la console d'administration CPS. (Si vous
d&eacute;sactivez CPS, ces &eacute;v&eacute;nements ne sont pas consign&eacute;s.) L'activation de CPS s'effectue via Contribute. Pour plus
d'informations, consultez l'aide d'Adobe Contribute.
Remarque : Vous pouvez rendre un site compatible avec Contribute sans que Contribute soit install&eacute; sur votre
ordinateur. Toutefois, si vous souhaitez d&eacute;marrer Contribute Administrator &agrave; partir de Dreamweaver, Contribute doit
&ecirc;tre install&eacute; sur le m&ecirc;me ordinateur que Dreamweaver et vous devez &ecirc;tre connect&eacute; au site distant avant d'activer la
compatibilit&eacute; avec Contribute. Dans le cas contraire, Dreamweaver ne peut pas lire les param&egrave;tres d'administration de
Contribute pour d&eacute;terminer si les services CPS et l'option de restauration sont activ&eacute;s.
Important : Vous devez vous assurer que le fichier de param&egrave;tres partag&eacute;s (fichier CSI) que Contribute emploie pour
administrer le site se trouve bien sur le serveur distant et n'est pas endommag&eacute;. Contribute cr&eacute;e automatiquement ce
fichier (et &eacute;crase ses anciennes versions) d&egrave;s que vous effectuez des t&acirc;ches d'administration dans Contribute
Administrator. Si le fichier de param&egrave;tres partag&eacute;s ne se trouve pas sur le serveur, ou s'il est endommag&eacute;, Dreamweaver
vous informe que le fichier requis pour la compatibilit&eacute; avec Contribute n'existe pas sur le serveur d&egrave;s que vous tentez une
op&eacute;ration r&eacute;seau (comme un placement). Pour vous assurer que le fichier correct se trouve bien sur le serveur, d&eacute;sactivez
la connexion au serveur dans Dreamweaver, d&eacute;marrez Contribute Administrator, apportez une modification
administrative, puis reconnectez-vous au serveur dans Dreamweaver. Pour plus d'informations, consultez l'aide d'Adobe
Contribute.
1 Choisissez Site &gt; G&eacute;rer les sites.
2 S&eacute;lectionnez un site, puis cliquez sur Modifier.
Derni&egrave;re mise &agrave; jour le 4/5/2011
59
UTILISATION DE DREAMWEAVER
Utilisation de sites Dreamweaver
3 Dans la bo&icirc;te de dialogue Configuration du site, d&eacute;veloppez Param&egrave;tres avanc&eacute;s, s&eacute;lectionnez la cat&eacute;gorie
Contribute, puis activez l'option Activer la compatibilit&eacute; avec Contribute.
4 Si une bo&icirc;te de dialogue s'affiche indiquant que vous devez activer Design Notes et la fonction Archiver/Extraire,
cliquez sur OK.
5 Si vous n'avez pas d&eacute;j&agrave; fourni les informations de contact pour la fonction Archiver/Extraire, entrez votre nom et
votre adresse &eacute;lectronique dans la bo&icirc;te de dialogue, puis cliquez sur OK. L'&eacute;tat de la restauration, l'&eacute;tat des services
CPS, la zone de texte URL de la racine du site et le bouton Administrer le site dans Contribute apparaissent dans la
bo&icirc;te de dialogue D&eacute;finition du site.
Si la restauration est activ&eacute;e dans Contribute, vous pouvez restaurer les versions pr&eacute;c&eacute;dentes des fichiers que vous
avez modifi&eacute;s dans Dreamweaver.
6 V&eacute;rifiez l'URL qui s'affiche dans la zone de texte URL de la racine du site et modifiez-la le cas &eacute;ch&eacute;ant. Dreamweaver
construit une URL de la racine du site en fonction des informations de d&eacute;finition de site que vous avez fournies,
mais il se peut que l'URL construite ne soit pas tout &agrave; fait correcte.
7 Cliquez sur le bouton Tester pour v&eacute;rifier si l'URL que vous avez saisie est correcte.
Remarque : Si vous &ecirc;tes pr&ecirc;t &agrave; envoyer une cl&eacute; de connexion ou &agrave; effectuer les t&acirc;ches d'administration du site
Contribute, ignorez les &eacute;tapes restantes.
8 Cliquez sur Administrer le site dans Contribute si vous voulez apporter des modifications administratives.
N'oubliez pas que Contribute doit &ecirc;tre install&eacute; sur le m&ecirc;me ordinateur si vous voulez ouvrir Contribute
Administrator &agrave; partir de Dreamweaver.
9 Cliquez sur Enregistrer puis sur Termin&eacute;.
Voir aussi
&laquo; Restauration de fichiers (utilisateurs de Contribute) &raquo; &agrave; la page 105
Administration d'un site Contribute avec Dreamweaver
Apr&egrave;s avoir activ&eacute; la compatibilit&eacute; avec Contribute, vous pouvez utiliser Dreamweaver pour lancer Contribute afin
d'effectuer les t&acirc;ches d'administration du site.
Remarque : Contribute doit &ecirc;tre install&eacute; sur le m&ecirc;me ordinateur que Dreamweaver.
En tant qu'administrateur d'un site Contribute, vous pouvez :
• modifier les param&egrave;tres administratifs au niveau du site ;
Les param&egrave;tres administratifs de Contribute rassemblent les param&egrave;tres qui s'appliquent &agrave; l'ensemble des
utilisateurs de votre site Web. Ces param&egrave;tres permettent de configurer Contribute avec pr&eacute;cision pour b&eacute;n&eacute;ficier
d'une meilleure exp&eacute;rience utilisateur.
• modifier les autorisations accord&eacute;es aux r&ocirc;les utilisateur de Contribute ;
• d&eacute;finir les utilisateurs de Contribute.
Les utilisateurs de Contribute n&eacute;cessitent certaines informations sur le site pour pouvoir s'y connecter. Vous
pouvez regrouper toutes ces informations dans un fichier, appel&eacute; cl&eacute; de connexion, que vous envoyez aux
utilisateurs de Contribute.
Remarque : Une cl&eacute; de connexion ne correspond pas &agrave; un fichier de site export&eacute; de Dreamweaver
Derni&egrave;re mise &agrave; jour le 4/5/2011
60
UTILISATION DE DREAMWEAVER
Utilisation de sites Dreamweaver
Avant de donner aux utilisateurs de Contribute les informations de connexion dont ils ont besoin pour modifier
les pages, utilisez Dreamweaver pour cr&eacute;er la hi&eacute;rarchie de dossiers de base de votre site, ainsi que les mod&egrave;les et
les feuilles de style CSS n&eacute;cessaires au site.
1 Choisissez Site &gt; G&eacute;rer les sites.
2 S&eacute;lectionnez un site, puis cliquez sur Modifier.
3 Dans la bo&icirc;te de dialogue Configuration du site, d&eacute;veloppez Param&egrave;tres avanc&eacute;s, puis s&eacute;lectionnez la cat&eacute;gorie
Contribute.
4 Cliquez sur le bouton Administrer le site dans Contribute.
Remarque : Ce bouton s'affiche uniquement si vous avez activ&eacute; la compatibilit&eacute; avec Contribute.
5 Si n&eacute;cessaire, tapez le mot de passe administrateur, puis cliquez sur OK.
La bo&icirc;te de dialogue Administration du site Web s'affiche.
• Pour modifier les param&egrave;tres administratifs, s&eacute;lectionnez une cat&eacute;gorie dans la liste de gauche, puis modifiez les
param&egrave;tres en fonction des besoins.
• Pour modifier les param&egrave;tres de r&ocirc;le, dans la cat&eacute;gorie Utilisateurs et r&ocirc;les, cliquez sur Modifier les param&egrave;tres de
r&ocirc;le, puis apportez les modifications n&eacute;cessaires.
• Pour envoyer une cl&eacute; de connexion afin de d&eacute;finir les utilisateurs, dans la cat&eacute;gorie Utilisateurs et r&ocirc;les, cliquez sur
Envoyer la cl&eacute; de connexion, puis renseignez l'Assistant de connexion.
6 Cliquez sur Fermer, cliquez sur OK, puis sur Termin&eacute;.
Pour plus d'informations sur les param&egrave;tres administratifs, la gestion des r&ocirc;les utilisateur ou la cr&eacute;ation d'une cl&eacute; de
connexion, voir l'aide de Contribute.
Voir aussi
&laquo; Importation et exportation des param&egrave;tres d'un site &raquo; &agrave; la page 53
Suppression, d&eacute;placement ou modification du nom d'un fichier distant sur un
site Contribute
Pour supprimer un fichier d'un serveur distant qui h&eacute;berge un site Contribute, proc&eacute;dez de la m&ecirc;me fa&ccedil;on que pour
supprimer un fichier sur le serveur de tout site Dreamweaver. Toutefois, lorsque vous supprimez un fichier d'un site
Contribute, Dreamweaver vous demande si vous souhaitez supprimer toutes les anciennes versions du fichier. Si vous
d&eacute;cidez de les conserver, Dreamweaver enregistre une copie de la version actuelle dans le dossier _baks afin que vous
puissiez la restaurer ult&eacute;rieurement.
Pour modifier le nom d'un fichier distant ou d&eacute;placer le fichier d'un dossier &agrave; un autre dans un site Contribute,
proc&eacute;dez de la m&ecirc;me fa&ccedil;on que sur tout site Dreamweaver. Dans un site Contribute, Dreamweaver renomme ou
d&eacute;place &eacute;galement les anciennes versions du fichier associ&eacute;es qui sont enregistr&eacute;es dans le dossier _baks.
1 S&eacute;lectionnez le fichier dans le volet distant du panneau Fichiers (Fen&ecirc;tre &gt; Fichiers) et appuyez sur Retour arri&egrave;re
(Windows) ou Arri&egrave;re (Macintosh).
Une bo&icirc;te de dialogue s'affiche vous demandant de confirmer la suppression du fichier.
2 Dans la bo&icirc;te de dialogue de confirmation :
• Pour supprimer toutes les versions pr&eacute;c&eacute;dentes du fichier ainsi que la version actuelle, s&eacute;lectionnez l'option
Supprimer les versions de restauration.
• Pour conserver les anciennes versions sur le serveur, d&eacute;s&eacute;lectionnez l'option Supprimer les versions de restauration.
Derni&egrave;re mise &agrave; jour le 4/5/2011
61
UTILISATION DE DREAMWEAVER
Utilisation de sites Dreamweaver
3 Cliquez sur Oui pour supprimer le fichier.
Activation de l'acc&egrave;s aux mod&egrave;les sans l'acc&egrave;s au dossier racine pour les
utilisateurs de Contribute
Dans un site Contribute, les autorisations de fichiers et de dossiers de base sont g&eacute;r&eacute;es directement sur le serveur. Si
pour des raisons de s&eacute;curit&eacute;, vous ne pouvez pas accorder de droits d'acc&egrave;s en lecture au dossier /Templates, vous
pouvez tout de m&ecirc;me rendre les mod&egrave;les accessibles aux utilisateurs.
1 D&eacute;finissez le site Contribute afin que le dossier racine soit le dossier qui s'affiche en tant que racine pour les
utilisateurs.
2 Copiez manuellement le dossier de mod&egrave;les du dossier racine du site principal dans le dossier racine du site
Contribute, &agrave; l'aide du panneau Fichiers.
3 Apr&egrave;s avoir modifi&eacute; le site principal, recopiez les mod&egrave;les modifi&eacute;s dans les sous-dossiers appropri&eacute;s.
Si vous faites appel &agrave; cette m&eacute;thode, n'utilisez pas de liens relatifs &agrave; la racine du site dans les sous-dossiers. Les liens
relatifs &agrave; la racine du site sont associ&eacute;s au dossier racine principal du serveur, et non au dossier racine d&eacute;fini dans
Dreamweaver. Les utilisateurs de Contribute ne peuvent pas cr&eacute;er de liens relatifs &agrave; la racine du site.
Si les liens d'une page Contribute apparaissent rompus, il peut s'agir d'un probl&egrave;me d'autorisations pour le dossier, en
particulier si les liens renvoient &agrave; des pages qui ne se trouvent pas dans le dossier racine de l'utilisateur de Contribute.
V&eacute;rifiez les autorisations de lecture et d'&eacute;criture pour les dossiers sur le serveur.
Voir aussi
&laquo; Chemins absolus, relatifs au documents et relatifs &agrave; la racine du site &raquo; &agrave; la page 282
D&eacute;pannage d'un site Contribute
Si un fichier distant d'un site Contribute semble avoir &eacute;t&eacute; extrait, mais qu'il n'est pas r&eacute;ellement verrouill&eacute; sur
l'ordinateur de l'utilisateur, vous pouvez d&eacute;verrouiller le fichier afin de permettre aux utilisateurs de le modifier.
Lorsque vous cliquez sur un bouton li&eacute; &agrave; l'administration d'un site Contribute, Dreamweaver v&eacute;rifie qu'il peut se
connecter au site distant et que l'URL de la racine du site indiqu&eacute;e pour le site est valide. Si Dreamweaver ne peut pas
se connecter ou si l'URL n’est pas valide, un message d'erreur s'affiche.
Si les outils d'administration ne fonctionnent pas correctement, cela peut &ecirc;tre d&ucirc; au dossier _mm .
D&eacute;verrouillage d'un fichier dans un site Contribute
Remarque : Avant de suivre cette proc&eacute;dure, assurez-vous que le fichier n'est pas extrait. Si vous d&eacute;verrouillez un fichier
pendant qu'un utilisateur de Contribute le modifie, plusieurs utilisateurs risquent de modifier ce fichier en m&ecirc;me temps.
1 Effectuez l'une des op&eacute;rations suivantes :
• Ouvrez le fichier dans la fen&ecirc;tre Document, puis choisissez Site &gt; Annuler extraction.
• Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers), cliquez avec le bouton droit (Windows) ou en maintenant la touche
Ctrl enfonc&eacute;e (Macintosh), puis s&eacute;lectionnez Annuler extraction.
Une bo&icirc;te de dialogue peut s'afficher, qui indique l'utilisateur ayant extrait le fichier et demande de confirmer le
d&eacute;verrouillage du fichier.
2 Si cette bo&icirc;te de dialogue s'affiche, cliquez sur Oui pour confirmer.
Le fichier est d&eacute;verrouill&eacute; sur le serveur.
Derni&egrave;re mise &agrave; jour le 4/5/2011
62
UTILISATION DE DREAMWEAVER
Utilisation de sites Dreamweaver
D&eacute;pannage des probl&egrave;mes de connexion pour un site Contribute
1 V&eacute;rifiez l'URL de la racine du site dans la cat&eacute;gorie Contribute de la bo&icirc;te de dialogue D&eacute;finition de site en ouvrant
cette URL dans un navigateur, pour vous assurer qu'elle ouvre la bonne page.
2 Cliquez sur le bouton Tester dans la cat&eacute;gorie Infos distantes de la bo&icirc;te de dialogue D&eacute;finition du site pour vous
assurer que vous pouvez vous connecter au site.
3 Si l'URL est correcte mais qu'un message d'erreur s'affiche lorsque vous effectuez un test, contactez votre
administrateur syst&egrave;me pour obtenir de l'aide.
D&eacute;pannage des outils administratifs de Contribute
1 Sur le serveur, assurez-vous que vous disposez des autorisations de lecture et d'&eacute;criture, voire d'ex&eacute;cution, pour le
dossier _mm.
2 V&eacute;rifiez que le dossier _mm contient un fichier de param&egrave;tres partag&eacute;s portant l'extension CSI.
3 Si ce n'est pas le cas, utilisez l'Assistant de connexion pour cr&eacute;er une connexion au site et devenir administrateur
du site. Le fichier de param&egrave;tres partag&eacute;s est cr&eacute;&eacute; automatiquement lorsque vous devenez administrateur. Pour plus
d'informations sur la fa&ccedil;on de devenir administrateur d'un site Web Contribute existant, consultez la section
Administration de Contribute dans l'aide de Contribute.
Derni&egrave;re mise &agrave; jour le 4/5/2011
63
Chapitre 4 : Cr&eacute;ation et gestion de fichiers
Cr&eacute;ation et ouverture de documents
A propos de la cr&eacute;ation de documents Dreamweaver
Dreamweaver fournit un environnement souple pour l'utilisation de divers documents Web. Outre les documents
HTML, vous pouvez cr&eacute;er et ouvrir divers documents en mode texte, de type CFML (ColdFusion Markup Language),
ASP, JavaScript et CSS (Cascading Style Sheets). Les fichiers de code source, tels que Visual Basic, .NET, C# et Java,
sont &eacute;galement pris en charge.
Dreamweaver propose diverses options pour la cr&eacute;ation d'un nouveau document. Vous pouvez cr&eacute;er les types de
document suivants :
• un nouveau document ou un mod&egrave;le vierge ;
• un document bas&eacute; sur l'une des mises en pages pr&eacute;d&eacute;finies fournies avec Dreamweaver, dont plus de 30 mises en
page bas&eacute;es sur CSS ;
• un document bas&eacute; sur un de vos mod&egrave;les existants.
Vous pouvez &eacute;galement d&eacute;finir les pr&eacute;f&eacute;rences des documents. Par exemple, si vous avez l'habitude de travailler
avec un type particulier de document, vous pouvez le d&eacute;finir comme type par d&eacute;faut pour les nouvelles pages.
Vous pouvez ais&eacute;ment d&eacute;finir des propri&eacute;t&eacute;s de document, telles que les balises meta, le titre du document et la
couleur de l'arri&egrave;re-plan, ainsi que d'autres propri&eacute;t&eacute;s de page, en mode Cr&eacute;ation ou en mode Code.
Types de fichier Dreamweaver
Vous pouvez travailler avec un grand choix de types de fichiers dans Dreamweaver. Le fichier HTML est celui avec
lequel vous travaillerez le plus souvent. Les fichiers HTML (pour fichiers de type Hypertext Markup Language)
contiennent le langage &agrave; base de balises qui se charge d'afficher une page Web dans un navigateur. Vous pouvez
enregistrer les fichiers HTML avec l'extension .html ou .htm. Dreamweaver enregistre par d&eacute;faut les fichiers avec
l'extension .html.
Dreamweaver permet de cr&eacute;er et de modifier des pages Web HTML5. Les mises en forme de d&eacute;part sont &eacute;galement
disponibles pour la cr&eacute;ation de nouvelles pages HTML5.
Voici quelques autres types de fichiers courants que vous pourriez utiliser quand vous travaillez avec Dreamweaver :
CSS Les fichiers CSS (Cascading Style Sheet, feuille de style en cascade) poss&egrave;dent l'extension .css. Ils sont utilis&eacute;s pour
formater le contenu HTML et fixer le positionnement de divers &eacute;l&eacute;ments de page.
GIF Les fichiers GIF (Graphics Interchange Format) poss&egrave;dent l'extension .gif. Ce format graphique est tr&egrave;s utilis&eacute;
dans les dessins humoristiques, les logos, les graphismes pourvus de zones transparentes et les animations. Les GIF
sont constitu&eacute;s d'un maximum de 256 couleurs.
JPEG Les fichiers JPEG (Joint Photographic Experts Group, du nom de l'organisation qui a cr&eacute;&eacute; le format) poss&egrave;dent
l'extension .jpg et correspondent g&eacute;n&eacute;ralement &agrave; des photographies ou &agrave; des images tr&egrave;s color&eacute;es. Ce format est le plus
appropri&eacute; pour les photographies num&eacute;riques ou scann&eacute;es, les images utilisant des textures, les images pourvues de
transitions &agrave; gradient de couleurs ainsi que toutes les images exigeant plus de 256 couleurs.
XML Les fichiers XML (Extensible Markup Language) poss&egrave;dent l'extension .xml. Ils contiennent des donn&eacute;es brutes
qui peuvent &ecirc;tre format&eacute;es en utilisant XSL (Extensible Stylesheet Language).
Derni&egrave;re mise &agrave; jour le 4/5/2011
64
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
XSL Les fichiers XSL (Extensible Stylesheet Language) poss&egrave;dent l'extension .xsl ou .xslt. Ils sont utilis&eacute;s pour cr&eacute;er des
donn&eacute;es XML que vous voulez afficher sur une page Web.
CFML Les fichiers CFML (ColdFusion Markup Language ) poss&egrave;dent l'extension .cfm. Ils sont utilis&eacute;s pour traiter des
pages dynamiques.
PHP Les fichiers Hypertext Preprocessor poss&egrave;dent l'extension .php et sont utilis&eacute;s pour traiter des pages dynamiques.
Voir aussi
&laquo; Affichage de donn&eacute;es XML avec XSLT &raquo; &agrave; la page 517
&laquo; Cr&eacute;ation visuelle d'applications &raquo; &agrave; la page 632
&laquo; Description des feuilles de style en cascade &raquo; &agrave; la page 129
Cr&eacute;ation d'une page vierge
Vous pouvez cr&eacute;er une page contenant une mise en forme CSS pr&eacute;d&eacute;finie, ou cr&eacute;er une page totalement vierge puis
cr&eacute;er la mise en forme de votre choix.
1 Choisissez Fichier &gt; Nouveau.
2 Dans la cat&eacute;gorie Page vierge de la bo&icirc;te de dialogue Nouveau document, s&eacute;lectionnez le type de page &agrave; cr&eacute;er dans
la colonne Type de page. Par exemple, choisissez HTML pour cr&eacute;er une page HTML ordinaire, ColdFusion pour
cr&eacute;er une page ColdFusion, et ainsi de suite.
3 Si vous voulez que la nouvelle page contienne une mise en forme CSS, s&eacute;lectionnez une mise en forme CSS
pr&eacute;d&eacute;finie dans la colonne Mise en forme. Dans le cas contraire, cliquez sur Aucune. En fonction de votre s&eacute;lection,
un aper&ccedil;u et la description de la mise en forme s&eacute;lectionn&eacute;e s'affichent sur la droite de la bo&icirc;te de dialogue.
Les mises en forme CSS pr&eacute;d&eacute;finies fournissent les types de colonnes suivants :
Fixe La largeur de colonne est d&eacute;finie en pixels. La colonne n'est pas redimensionn&eacute;e selon la taille du navigateur ou
des param&egrave;tres de texte du visiteur du site.
Liquide La largeur de colonne est d&eacute;finie en tant que pourcentage de la largeur du navigateur du visiteur du site. La
mise en page s'adapte si le visiteur du site augmente ou diminue la largeur de son navigateur, mais pas en fonction des
param&egrave;tres de texte d&eacute;finis par le visiteur.
Dreamweaver propose &eacute;galement deux mises en forme CSS HTML5 : deux et trois colonnes fixes.
4 S&eacute;lectionnez un type de document dans le menu DocType. Dans la plupart des cas, vous pouvez conserver l'option
par d&eacute;faut, XHTML 1.0 transitionnel.
S&eacute;lectionnez l'une des d&eacute;finitions de type de document (DTD) XHTML pour rendre la page compatible XHTML. Par
exemple, vous pouvez rendre un document HTML compatible XHTML en s&eacute;lectionnant XHTML 1.0 transitionnel ou
XHTML 1.0 Strict dans le menu d&eacute;roulant. Le langage XHTML (Extensible Hypertext Markup Language) n'est autre
qu'une nouvelle mouture de HTML sous la forme d'une application XML. En r&egrave;gle g&eacute;n&eacute;rale, l'utilisation de XHTML
vous permet d'exploiter les avantages de XML tout en garantissant la compatibilit&eacute; descendante et ascendante de vos
documents Web.
Remarque : Pour plus d'informations sur XHTML, consultez le site Web du World Wide Web Consortium (W3C), qui
contient la sp&eacute;cification pour XHTML 1.1 - Module-Based XHTML (www.w3.org/TR/xhtml11/) et XHTML 1.0
(www.w3c.org/TR/xhtml1/), ainsi que les sites de validateur XHTML o&ugrave; vous trouverez des fichiers Web
(http://validator.w3.org/) et des fichiers locaux (http://validator.w3.org/file-upload.html).
Dreamweaver propose &eacute;galement HTML5 comme option doctype.
Derni&egrave;re mise &agrave; jour le 4/5/2011
65
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
5 Si vous avez choisi une mise en forme CSS dans la colonne Mise en forme, choisissez l'emplacement du code CSS
de mise en forme dans la liste d&eacute;roulante CSS de mise en forme.
Ajouter &agrave; l'en-t&ecirc;te Ajoute le code CSS de mise en forme &agrave; l'en-t&ecirc;te de la page que vous cr&eacute;ez.
Cr&eacute;er un nouveau fichier Ajoute le code CSS de mise en forme &agrave; un nouveau fichier CSS externe et associe la nouvelle
feuille de style &agrave; la page que vous cr&eacute;ez.
Lier au fichier existant Permet d'indiquer un fichier CSS existant qui contient d&eacute;j&agrave; les r&egrave;gles CSS requises pour la mise
en forme. Pour ce faire, cliquez sur l'ic&ocirc;ne Ajouter une feuille de style au-dessus du volet Lier le fichier CSS, puis
s&eacute;lectionnez une feuille de style CSS existante. Cette option est particuli&egrave;rement utile si vous voulez utiliser la m&ecirc;me
mise en forme CSS (les r&egrave;gles CSS figurant dans un fichier) dans plusieurs documents.
6 (Facultatif) Vous pouvez &eacute;galement lier des feuilles de style CSS &agrave; la nouvelle page (sans rapport avec la mise en
forme CSS) lors de la cr&eacute;ation de cette page. Pour ce faire, cliquez sur l'ic&ocirc;ne Ajouter une feuille de style
dessus du volet Lier le fichier CSS, puis s&eacute;lectionnez une feuille de style CSS.
au-
Vous trouverez une description d&eacute;taill&eacute;e de ce processus dans l'article de David Powers &laquo; Automatically attaching a
style sheet to new documents &raquo; (en anglais).
7 Choisissez Activer InContext Editing si vous voulez cr&eacute;er une page qui deviendra compatible avec InContext
Editing d&egrave;s que vous l'enregistrerez.
Une page compatible InContext Editing doit comporter au moins une balise div pouvant &ecirc;tre sp&eacute;cifi&eacute;e en tant que
r&eacute;gion modifiable. Par exemple, si vous avez s&eacute;lectionn&eacute; le type de page HTML, vous devez choisir l'une des mises en
forme CSS pour votre nouvelle page. Ces mises en forme contiennent en effet des balises div pr&eacute;d&eacute;finies. La r&eacute;gion
modifiable InContext Editing est automatiquement plac&eacute;e dans la balise div avec l'ID content. Si vous le souhaitez,
vous pourrez ajouter par la suite d'autres r&eacute;gions modifiables &agrave; la page.
8 Cliquez sur le bouton Pr&eacute;f&eacute;rences pour d&eacute;finir les pr&eacute;f&eacute;rences par d&eacute;faut du document (par exemple, le type de
document, l'encodage et une extension de ficher).
9 Cliquez sur le lien Obtenir plus de contenu pour lancer Dreamweaver Exchange et t&eacute;l&eacute;charger d'autres contenus de
conception de pages.
10 Cliquez sur le bouton Cr&eacute;er.
11 Enregistrez la page (Fichier &gt; Enregistrer).
12 Dans la bo&icirc;te de dialogue qui s'affiche, recherchez le dossier o&ugrave; vous voulez enregistrer le fichier.
Il est conseill&eacute; d'enregistrer votre fichier dans un site Dreamweaver.
13 Dans la zone de texte Nom de fichier, entrez le nom du fichier.
Evitez les espaces et les caract&egrave;res sp&eacute;ciaux pour les noms de fichiers et de dossiers ; les noms de fichiers ne doivent pas
commencer par un chiffre. En particulier, n'utilisez pas de caract&egrave;res sp&eacute;ciaux (par exemple &eacute;, &ccedil; ou &yen;) ou de signes de
ponctuation (deux points, barres obliques ou points) dans le nom des fichiers que vous avez l'intention de placer sur
un serveur distant. En effet, la plupart des serveurs transforment ces caract&egrave;res lors du transfert, rendant ainsi
inop&eacute;rants les liens vers ces fichiers.
Voir aussi
&laquo; Code XHTML &raquo; &agrave; la page 305
&laquo; Mise en forme des pages avec CSS &raquo; &agrave; la page 158
&laquo; D&eacute;finition du type et du codage par d&eacute;faut d'un document &raquo; &agrave; la page 70
&laquo; Business Catalyst InContext Editing &raquo; &agrave; la page 510
Derni&egrave;re mise &agrave; jour le 4/5/2011
66
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
Cr&eacute;ation d'un mod&egrave;le vierge
La bo&icirc;te de dialogue Nouveau document permet de cr&eacute;er des mod&egrave;les Dreamweaver. Par d&eacute;faut, les mod&egrave;les sont
enregistr&eacute;s dans le dossier Templates de votre site.
1 Choisissez Fichier &gt; Nouveau.
2 Dans la bo&icirc;te de dialogue Nouveau document, s&eacute;lectionnez la cat&eacute;gorie Mod&egrave;le vierge.
3 S&eacute;lectionnez le type de mod&egrave;le &agrave; cr&eacute;er dans la colonne Type de mod&egrave;le. Par exemple, choisissez Mod&egrave;le HTML pour
cr&eacute;er un mod&egrave;le HTML ordinaire, Mod&egrave;le ColdFusion pour cr&eacute;er un mod&egrave;le ColdFusion, et ainsi de suite.
4 Si vous voulez que la nouvelle page contienne une mise en forme CSS, s&eacute;lectionnez une mise en forme CSS
pr&eacute;d&eacute;finie dans la colonne Mise en forme. Dans le cas contraire, cliquez sur Aucune. En fonction de votre s&eacute;lection,
un aper&ccedil;u et la description de la mise en forme s&eacute;lectionn&eacute;e s'affichent sur la droite de la bo&icirc;te de dialogue.
Les mises en forme CSS pr&eacute;d&eacute;finies fournissent les types de colonnes suivants :
Fixe La largeur de colonne est d&eacute;finie en pixels. La colonne n'est pas redimensionn&eacute;e selon la taille du navigateur ou
des param&egrave;tres de texte du visiteur du site.
Liquide La largeur de colonne est d&eacute;finie en tant que pourcentage de la largeur du navigateur du visiteur du site. La
mise en page s'adapte si le visiteur du site augmente ou diminue la largeur de son navigateur, mais pas en fonction des
param&egrave;tres de texte d&eacute;finis par le visiteur.
5 S&eacute;lectionnez un type de document dans le menu DocType. Dans la plupart des cas, vous pouvez conserver l'option
par d&eacute;faut, XHTML 1.0 transitionnel.
S&eacute;lectionnez l'une des d&eacute;finitions de type de document (DTD) XHTML pour rendre la page compatible XHTML. Par
exemple, vous pouvez rendre un document HTML compatible XHTML en s&eacute;lectionnant XHTML 1.0 transitionnel ou
XHTML 1.0 Strict dans le menu d&eacute;roulant. Le langage XHTML (Extensible Hypertext Markup Language) n'est autre
qu'une nouvelle mouture de HTML sous la forme d'une application XML. En r&egrave;gle g&eacute;n&eacute;rale, l'utilisation de XHTML
vous permet d'exploiter les avantages de XML tout en garantissant la compatibilit&eacute; descendante et ascendante de vos
documents Web.
Remarque : Pour plus d'informations sur XHTML, consultez le site Web du World Wide Web Consortium (W3C), qui
contient la sp&eacute;cification pour XHTML 1.1 - Module-Based XHTML (www.w3.org/TR/xhtml11/) et XHTML 1.0
(www.w3c.org/TR/xhtml1/), ainsi que les sites de validateur XHTML o&ugrave; vous trouverez des fichiers Web
(http://validator.w3.org/) et des fichiers locaux (http://validator.w3.org/file-upload.html).
6 Si vous avez choisi une mise en forme CSS dans la colonne Mise en forme, choisissez l'emplacement du code CSS
de mise en forme dans la liste d&eacute;roulante CSS de mise en forme.
Ajouter &agrave; l'en-t&ecirc;te Ajoute le code CSS de mise en forme &agrave; l'en-t&ecirc;te de la page que vous cr&eacute;ez.
Cr&eacute;er un nouveau fichier Ajoute le code CSS de mise en forme &agrave; une nouvelle feuille de style CSS externe et associe la
nouvelle feuille de style &agrave; la page que vous cr&eacute;ez.
Lier au fichier existant Permet d'indiquer un fichier CSS existant qui contient d&eacute;j&agrave; les r&egrave;gles CSS requises pour la mise
en forme. Pour ce faire, cliquez sur l'ic&ocirc;ne Ajouter une feuille de style
au-dessus du volet Lier le fichier CSS, puis
s&eacute;lectionnez une feuille de style CSS existante. Cette option est particuli&egrave;rement utile si vous voulez utiliser la m&ecirc;me
mise en forme CSS (les r&egrave;gles CSS figurant dans un fichier) dans plusieurs documents.
7 (Facultatif) Vous pouvez &eacute;galement lier des feuilles de style CSS &agrave; la nouvelle page (sans rapport avec la mise en
forme CSS) lors de la cr&eacute;ation de cette page. Pour ce faire, cliquez sur l'ic&ocirc;ne Ajouter une feuille de style
dessus du volet Lier le fichier CSS, puis s&eacute;lectionnez une feuille de style CSS.
8 Choisissez Activer InContext Editing si vous voulez cr&eacute;er une page qui deviendra compatible avec InContext
Editing d&egrave;s que vous l'enregistrerez.
Derni&egrave;re mise &agrave; jour le 4/5/2011
au-
67
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
Une page compatible InContext Editing doit comporter au moins une balise div pouvant &ecirc;tre sp&eacute;cifi&eacute;e en tant que
r&eacute;gion modifiable. Par exemple, si vous avez s&eacute;lectionn&eacute; le type de page HTML, vous devez choisir l'une des mises en
forme CSS pour votre nouvelle page. Ces mises en forme contiennent en effet des balises div pr&eacute;d&eacute;finies. La r&eacute;gion
modifiable InContext Editing est automatiquement plac&eacute;e dans la balise div avec l'ID content. Si vous le souhaitez,
vous pourrez ajouter par la suite d'autres r&eacute;gions modifiables &agrave; la page.
9 Cliquez sur le bouton Pr&eacute;f&eacute;rences pour d&eacute;finir les pr&eacute;f&eacute;rences par d&eacute;faut du document (par exemple, le type de
document, l'encodage et une extension de ficher).
10 Cliquez sur le lien Obtenir plus de contenu pour lancer Dreamweaver Exchange et t&eacute;l&eacute;charger d'autres contenus de
conception de pages.
11 Cliquez sur le bouton Cr&eacute;er.
12 Enregistrez la page (Fichier &gt; Enregistrer). Si vous n'avez pas encore ajout&eacute; de r&eacute;gions modifiables au mod&egrave;le, une
bo&icirc;te de dialogue vous en avertit. Cliquez sur OK pour fermer la bo&icirc;te de dialogue.
13 Dans la bo&icirc;te de dialogue Enregistrer sous, s&eacute;lectionnez le site dans lequel le mod&egrave;le doit &ecirc;tre enregistr&eacute;.
14 Dans la zone de texte Nom de fichier, entrez le nom du nouveau mod&egrave;le. Il n'est pas n&eacute;cessaire d'ajouter l'extension
de fichier au nom du mod&egrave;le. Lorsque vous cliquez sur Enregistrer, l'extension .dwt est ajout&eacute;e au nouveau mod&egrave;le,
qui est enregistr&eacute; dans le dossier Templates de votre site.
Evitez les espaces et les caract&egrave;res sp&eacute;ciaux pour les noms de fichiers et de dossiers ; les noms de fichiers ne doivent pas
commencer par un chiffre. En particulier, n'utilisez pas de caract&egrave;res sp&eacute;ciaux (par exemple &eacute;, &ccedil; ou &yen;) ou de signes de
ponctuation (deux points, barres obliques ou points) dans le nom des fichiers que vous avez l'intention de placer sur
un serveur distant. En effet, la plupart des serveurs transforment ces caract&egrave;res lors du transfert, rendant ainsi
inop&eacute;rants les liens vers ces fichiers.
Voir aussi
&laquo; Code XHTML &raquo; &agrave; la page 305
&laquo; Mise en forme des pages avec CSS &raquo; &agrave; la page 158
&laquo; Cr&eacute;ation et gestion des mod&egrave;les &raquo; &agrave; la page 403
&laquo; Configuration d'un site Dreamweaver &raquo; &agrave; la page 39
&laquo; D&eacute;finition du type et du codage par d&eacute;faut d'un document &raquo; &agrave; la page 70
&laquo; Business Catalyst InContext Editing &raquo; &agrave; la page 510
Cr&eacute;ation d'une page bas&eacute;e sur un mod&egrave;le existant
Vous pouvez s&eacute;lectionner, pr&eacute;visualiser et cr&eacute;er un nouveau document &agrave; partir d'un mod&egrave;le existant. La bo&icirc;te de
dialogue Nouveau document vous permet de s&eacute;lectionner un mod&egrave;le parmi les sites d&eacute;finis dans Dreamweaver ou
d'utiliser le panneau Actifs pour cr&eacute;er un nouveau document sur la base d'un mod&egrave;le existant.
Voir aussi
&laquo; Cr&eacute;ation et gestion des mod&egrave;les &raquo; &agrave; la page 403
&laquo; Configuration d'un site Dreamweaver &raquo; &agrave; la page 39
&laquo; D&eacute;finition du type et du codage par d&eacute;faut d'un document &raquo; &agrave; la page 70
Cr&eacute;ation d'un document bas&eacute; sur un mod&egrave;le
1 Choisissez Fichier &gt; Nouveau.
Derni&egrave;re mise &agrave; jour le 4/5/2011
68
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
2 Dans la bo&icirc;te de dialogue Nouveau document, s&eacute;lectionnez la cat&eacute;gorie Page du mod&egrave;le.
3 Dans la colonne Site, s&eacute;lectionnez le site Dreamweaver contenant le mod&egrave;le &agrave; utiliser, puis s&eacute;lectionnez un mod&egrave;le
dans la liste de droite.
4 D&eacute;sactivez l'option Mettre la page &agrave; jour quand le mod&egrave;le est modifi&eacute; si vous ne souhaitez pas que la page soit mise
&agrave; jour lors de chaque modification apport&eacute;e au mod&egrave;le sur lequel elle est bas&eacute;e.
5 Cliquez sur le bouton Pr&eacute;f&eacute;rences pour d&eacute;finir les pr&eacute;f&eacute;rences par d&eacute;faut du document (par exemple, le type de
document, l'encodage et une extension de ficher).
6 Cliquez sur le lien Obtenir plus de contenu pour lancer Dreamweaver Exchange et t&eacute;l&eacute;charger d'autres contenus de
conception de pages.
7 Cliquez sur Cr&eacute;er puis enregistrez le document (Fichier &gt; Enregistrer).
Cr&eacute;ation d'un document &agrave; partir d'un mod&egrave;le &agrave; l'aide du panneau Actifs
1 Ouvrez le panneau Actifs (Fen&ecirc;tre &gt; Actifs) s'il n'est pas d&eacute;j&agrave; ouvert.
2 Dans le panneau Actifs, cliquez sur l'ic&ocirc;ne Mod&egrave;les
situ&eacute;e &agrave; gauche pour afficher la liste des mod&egrave;les utilis&eacute;s
dans votre site actuel.
Si le mod&egrave;le que vous souhaitez utiliser vient d'&ecirc;tre cr&eacute;&eacute;, il peut &ecirc;tre n&eacute;cessaire de cliquer sur le bouton Actualiser pour
l'afficher.
3 Cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e (Macintosh) sur le mod&egrave;le &agrave;
appliquer, puis s&eacute;lectionnez Nouveau &agrave; partir d'un mod&egrave;le.
Le document s'ouvre dans la fen&ecirc;tre de document.
4 Enregistrez le document.
Cr&eacute;ation d'un document bas&eacute; sur un fichier d'exemple Dreamweaver
Dreamweaver inclut plusieurs mises en formes de pages de cadres professionnelles, ainsi que des fichiers de conception
CSS. Vous pouvez utiliser ces fichiers d'exemple comme point de d&eacute;part pour la cr&eacute;ation de pages sur vos sites Web.
Lorsque vous cr&eacute;ez un document bas&eacute; sur un fichier d'exemple, Dreamweaver cr&eacute;e une copie du fichier.
La bo&icirc;te de dialogue Nouveau document permet de pr&eacute;visualiser un fichier d'exemple et de consulter une br&egrave;ve
description des &eacute;l&eacute;ments de conception d'un document. Dans le cas de feuilles de style en cascade (CSS), vous pouvez
copier une feuille pr&eacute;d&eacute;finie pour l'appliquer &agrave; vos documents.
Remarque : Si vous cr&eacute;ez un document bas&eacute; sur un jeu de cadres pr&eacute;d&eacute;fini, seule la structure du jeu de cadres est copi&eacute;e,
sans le contenu des cadres. En outre, vous devez enregistrer s&eacute;par&eacute;ment chacun des fichiers composant le cadre.
1 Choisissez Fichier &gt; Nouveau.
2 Dans la bo&icirc;te de dialogue Nouveau document, s&eacute;lectionnez la cat&eacute;gorie Page de l'exemple.
3 Dans la colonne Dossier exemple, choisissez Feuille de style en cascade ou Jeu de cadres, puis s&eacute;lectionnez un fichier
d'exemple dans la liste de droite.
4 Cliquez sur le bouton Cr&eacute;er.
Le nouveau document s'ouvre dans la fen&ecirc;tre de document (modes Code et Cr&eacute;ation). Si vous avez s&eacute;lectionn&eacute; Feuille
de style de cascade (CSS), la feuille de style CSS s'affiche en mode code.
5 Enregistrez le document (Fichier &gt; Enregistrer).
6 Si la bo&icirc;te de dialogue Copier les fichiers d&eacute;pendants appara&icirc;t, d&eacute;finissez les options, puis cliquez sur Copier pour
copier les actifs dans le dossier s&eacute;lectionn&eacute;.
Derni&egrave;re mise &agrave; jour le 4/5/2011
69
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
Vous pouvez choisir l'emplacement des fichiers d&eacute;pendants ou enregistrer les fichiers dans le dossier par d&eacute;faut cr&eacute;&eacute;
par Dreamweaver (ce dossier est cr&eacute;&eacute; en fonction du nom source du fichier d'exemple).
Voir aussi
&laquo; Description des feuilles de style en cascade &raquo; &agrave; la page 129
&laquo; Enregistrement des fichiers du cadre et du jeu de cadres &raquo; &agrave; la page 207
Cr&eacute;ation d'autres types de pages
La cat&eacute;gorie Autre de la bo&icirc;te de dialogue Nouveau document permet de cr&eacute;er divers types de page qui peuvent &ecirc;tre
utiles dans Dreamweaver, comme des pages C#, VBScript et en texte seul.
1 Choisissez Fichier &gt; Nouveau.
2 Dans la bo&icirc;te de dialogue Nouveau document, s&eacute;lectionnez la cat&eacute;gorie Autre.
3 S&eacute;lectionnez le type de document &agrave; cr&eacute;er dans la colonne Type de page, puis cliquez sur le bouton Cr&eacute;er.
4 Enregistrez le document (Fichier &gt; Enregistrer).
Enregistrement et r&eacute;tablissement de documents
Vous pouvez enregistrer un document en utilisant son nom et son emplacement actuels ou enregistrer une copie du
document sous un nouveau nom, dans un autre emplacement.
Evitez tout espace ou caract&egrave;re sp&eacute;cial dans les noms de fichier ou de dossier. En particulier, n'utilisez pas de caract&egrave;res
sp&eacute;ciaux (par exemple &eacute;, &ccedil; ou &yen;) ou de signes de ponctuation (deux points, barres obliques ou points) dans le nom des
fichiers que vous avez l'intention de placer sur un serveur distant. En effet, la plupart des serveurs transforment ces
caract&egrave;res lors du transfert, rendant ainsi inop&eacute;rants les liens vers ces fichiers. En outre, ne commencez pas le nom de
fichier par un num&eacute;ro.
Voir aussi
&laquo; Cr&eacute;ation d'une page vierge &raquo; &agrave; la page 64
Enregistrement d'un document
1 Effectuez l'une des op&eacute;rations suivantes :
• Pour &eacute;craser la version pr&eacute;sente sur le disque et enregistrer toute modification effectu&eacute;e, s&eacute;lectionnez Fichier &gt;
Enregistrer.
• Pour enregistrer le fichier dans un dossier diff&eacute;rent ou sous un autre nom, s&eacute;lectionnez Fichier &gt; Enregistrer sous.
2 Dans la bo&icirc;te de dialogue Enregistrer sous qui s'affiche, recherchez le dossier dans lequel vous voulez enregistrer le
fichier.
3 Dans la zone de texte Nom de fichier, entrez le nom du fichier.
4 Cliquez sur Enregistrer pour enregistrer le fichier.
Enregistrement de tous les documents ouverts
1 Choisissez Fichier &gt; Enregistrer tout.
2 Si des documents non enregistr&eacute;s sont ouverts, la bo&icirc;te de dialogue Enregistrer sous s'affiche pour chacun d'entre eux.
Dans la bo&icirc;te de dialogue qui s'affiche, recherchez le dossier o&ugrave; vous voulez enregistrer le fichier.
Derni&egrave;re mise &agrave; jour le 4/5/2011
70
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
3 Dans la zone de texte Nom de fichier, entrez le nom du fichier puis cliquez sur Enregistrer.
R&eacute;tablissement de la derni&egrave;re version enregistr&eacute;e d'un document
1 S&eacute;lectionnez Fichier &gt; R&eacute;tablir.
Une bo&icirc;te de dialogue vous invite &agrave; confirmer l'annulation de vos modifications et le retour &agrave; la version pr&eacute;c&eacute;demment
enregistr&eacute;e.
2 Cliquez sur Oui pour revenir &agrave; la version pr&eacute;c&eacute;dente ou sur Non pour appliquer les modifications.
Remarque : Si vous enregistrez un document, puis que vous quittez Dreamweaver, il ne sera pas possible de revenir &agrave; la
version pr&eacute;c&eacute;dente lors de la prochaine utilisation de Dreamweaver.
D&eacute;finition du type et du codage par d&eacute;faut d'un document
Vous pouvez d&eacute;finir le type de document par d&eacute;faut utilis&eacute; pour un site.
Par exemple, si la plupart des pages de votre site sont de type sp&eacute;cifique (tel que les documents ColdFusion, HTML ou
ASP), vous pouvez d&eacute;finir des pr&eacute;f&eacute;rences de document pour cr&eacute;er automatiquement les nouveaux documents de ce type.
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh).
Vous pouvez &eacute;galement cliquer sur le bouton Pr&eacute;f&eacute;rences dans la bo&icirc;te de dialogue Nouveau document pour d&eacute;finir
les nouvelles pr&eacute;f&eacute;rences li&eacute;es au document en cours de cr&eacute;ation.
2 Cliquez sur la cat&eacute;gorie Nouveau document dans la liste de gauche.
3 D&eacute;finissez ou modifiez les pr&eacute;f&eacute;rences selon vos besoins, puis cliquez sur OK pour les enregistrer.
Document par d&eacute;faut S&eacute;lectionnez le type de document qui sera employ&eacute; pour les pages que vous cr&eacute;ez.
Extension par d&eacute;faut Indiquez l'extension de fichier que vous pr&eacute;f&eacute;rez (.htm ou .html) pour les nouvelles pages
HTML que vous cr&eacute;erez.
Remarque : Cette option est d&eacute;sactiv&eacute;e pour d'autres types de fichier.
Type de document par d&eacute;faut (DDT) S&eacute;lectionnez l'une des d&eacute;finitions de type de document (DTD) XHTML qui
permettent de rendre les pages compatibles XHTML. Par exemple, vous pouvez rendre un document HTML
compatible XHTML en s&eacute;lectionnant XHTML 1.0 transitionnel ou XHTML 1.0 Strict dans le menu d&eacute;roulant.
Codage par d&eacute;faut Sp&eacute;cifie le codage &agrave; utiliser lorsque vous cr&eacute;ez une page ou que vous ouvrez un document ne
sp&eacute;cifiant aucun codage.
Si vous s&eacute;lectionnez Unicode (UTF 8) en tant que codage de document, le codage d'entit&eacute; est superflu dans la mesure
o&ugrave; UTF 8 permet de repr&eacute;senter de fa&ccedil;on fiable tous les caract&egrave;res. Si vous s&eacute;lectionnez un autre codage de document,
le codage d'entit&eacute; peut &ecirc;tre n&eacute;cessaire pour repr&eacute;senter certains caract&egrave;res. Pour plus d'informations sur les entit&eacute;s de
caract&egrave;res, voir www.w3.org/TR/REC-html40/sgml/entities.html.
Si vous s&eacute;lectionnez Unicode (UTF8) en tant que code par d&eacute;faut, vous pouvez inclure une marque BOM (Byte Order
Mark) dans le document en s&eacute;lectionnant l'option Inclure une signature Unicode (BOM).
Il s'agit d'une marque constitu&eacute;e de 2 &agrave; 4 octets plac&eacute;s au d&eacute;but d'un fichier texte identifiant un fichier comme &eacute;tant au
format Unicode et, dans ce cas, l'ordre des octets suivants. Le code UTF 8 ne pr&eacute;sentant pas d'ordre octet, l'ajout d'une
marque BOM UTF 8 est facultatif. Dans le cas de UTF 16 et UTF 32, cette marque est obligatoire.
Formulaire de normalisation Unicode Activez l'une de ces options si vous s&eacute;lectionnez Unicode (UTF 8) en tant que
code par d&eacute;faut.
Derni&egrave;re mise &agrave; jour le 4/5/2011
71
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
Il existe quatre Formulaires de normalisation Unicode. Le plus important est le Formulaire de normalisation Unicode
C, car il est le plus utilis&eacute; dans le Mod&egrave;le de caract&egrave;res li&eacute; au World Wide Web, mais Adobe fournit &eacute;galement les trois
autres Formulaires de normalisation Unicode.
Afficher la bo&icirc;te de dialogue Nouveau document si Ctrl+N D&eacute;sactivez cette option (baptis&eacute;e &laquo; Commande+N &raquo; sur
Macintosh) pour appliquer automatiquement le type par d&eacute;faut au nouveau document cr&eacute;&eacute; lorsque vous utilisez la
touche de commande.
Certains caract&egrave;res Unicode semblent visuellement similaires mais peuvent &ecirc;tre stock&eacute;s de diff&eacute;rentes mani&egrave;res dans
le document. Par exemple, &euml; (e tr&eacute;ma) peut &ecirc;tre repr&eacute;sent&eacute; sous la forme d'un seul caract&egrave;re, &laquo; e tr&eacute;ma &raquo; ou de deux
caract&egrave;res, &laquo; e Latin ordinaire &raquo; + &laquo; tr&eacute;ma &raquo;. Un caract&egrave;re Unicode de combinaison est un caract&egrave;re associ&eacute; au caract&egrave;re
pr&eacute;c&eacute;dent, ce qui fait appara&icirc;tre le tr&eacute;ma au-dessus du &laquo; e &raquo; Latin. Les deux formes donnent la m&ecirc;me typographie
visuelle, alors que chacune est enregistr&eacute;e diff&eacute;remment dans le fichier.
La normalisation est le processus consistant &agrave; s'assurer que tous les caract&egrave;res pouvant &ecirc;tre enregistr&eacute;s sous diff&eacute;rentes
formes le sont tous sous la m&ecirc;me forme. C'est-&agrave;-dire que tous les caract&egrave;res &laquo; &euml; &raquo; d'un document sont enregistr&eacute;s sous
forme de &laquo; e tr&eacute;ma &raquo; unique ou de &laquo; e + tr&eacute;ma de combinaison &raquo;, mais pas sous les deux formes dans un m&ecirc;me
document.
Pour plus d'informations sur la Normalisation Unicode et les formulaires sp&eacute;cifiques pouvant &ecirc;tre utilis&eacute;s, consultez
le site Web Unicode www.unicode.org/reports/tr15.
Voir aussi
&laquo; Code XHTML &raquo; &agrave; la page 305
&laquo; Description de l'encodage de document &raquo; &agrave; la page 220
Conversion de HTML5 vers un ancien doctype
L'emploi de Fichier &gt; Convertir pour passer de HTML5 vers un ancien DOCTYPE ne supprime pas les &eacute;l&eacute;ments et
attributs HTML5. Seul le DOCTYPE change et des barres obliques (pour XHTML) sont ins&eacute;r&eacute;es &agrave; la fin.
Les balises s&eacute;mantiques telles que &lt;header&gt; et &lt;article&gt;, ainsi que les attributs tels que required, placeholder et
type=&quot;number&quot;, ne sont pas affect&eacute;s.
D&eacute;finition de l'extension de fichier par d&eacute;faut de nouveaux documents HTML
Vous pouvez d&eacute;finir l'extension de fichier par d&eacute;faut de documents HTML cr&eacute;&eacute;s dans Dreamweaver. Par exemple,
vous pouvez utiliser une extension .htm ou .html pour tous les nouveaux documents HTML.
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh).
Vous pouvez &eacute;galement cliquer sur le bouton Pr&eacute;f&eacute;rences dans la bo&icirc;te de dialogue Nouveau document pour d&eacute;finir
les nouvelles pr&eacute;f&eacute;rences li&eacute;es au document en cours de cr&eacute;ation.
2 Cliquez sur la cat&eacute;gorie Nouveau document dans la liste de gauche.
3 Assurez-vous que HTML est bien s&eacute;lectionn&eacute; dans le menu Document par d&eacute;faut.
4 Dans la zone de texte Extension par d&eacute;faut, sp&eacute;cifiez l'extension de fichier que vous souhaitez utiliser pour les
nouveaux documents HTML cr&eacute;&eacute;s dans Dreamweaver.
Sous Windows, vous pouvez sp&eacute;cifier les extensions suivantes : .html, .htm, .shtml, .shtm, .stm, .tpl, .lasso, .xhtml.
Sous Macintosh, vous pouvez sp&eacute;cifier les extensions suivantes : .html, .htm, .shtml, .shtm, .tpl, .lasso, .xhtml, .ssi.
Derni&egrave;re mise &agrave; jour le 4/5/2011
72
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
Ouverture et modification de documents existants
Vous pouvez ouvrir une page Web existante ou un document texte, m&ecirc;me si celui-ci n'a pas &eacute;t&eacute; cr&eacute;&eacute; avec
Dreamweaver, et le modifier en mode Code ou en mode Cr&eacute;ation.
Si le document que vous ouvrez est un fichier Microsoft Word enregistr&eacute; au format HTML, il est conseill&eacute; d'utiliser la
commande Nettoyage du HTML Word pour supprimer les balises superflues ajout&eacute;es par Word au fichier HTML.
Pour nettoyer un fichier HTML ou XHTML non g&eacute;n&eacute;r&eacute; par Microsoft Word, utilisez la commande Nettoyage du HTML.
Vous pouvez &eacute;galement ouvrir des fichiers texte non HTML, comme des fichiers JavaScript, XML, feuilles de style en
cascade (CSS) ou des fichiers texte enregistr&eacute;s dans des traitements de texte ou des &eacute;diteurs de texte.
1 Choisissez Fichier &gt; Ouvrir.
Vous pouvez &eacute;galement utiliser le panneau Fichiers pour ouvrir les fichiers.
2 Recherchez et s&eacute;lectionnez le fichier &agrave; ouvrir.
Remarque : Si cette op&eacute;ration n'a pas encore &eacute;t&eacute; effectu&eacute;e, il est conseill&eacute; d'organiser les fichiers que vous comptez ouvrir
et modifier au sein d'un site Dreamweaver, au lieu de les ouvrir depuis un autre emplacement.
3 Cliquez sur Ouvrir.
Le document s'ouvre dans la fen&ecirc;tre de document. Par d&eacute;faut, JavaScript, le texte et les feuilles de style en cascade (CSS)
s'ouvrent en mode Code. Vous pouvez mettre &agrave; jour le document pendant que vous travaillez dans Dreamweaver, puis
enregistrer les modifications dans le fichier.
Voir aussi
&laquo; Nettoyage du code &raquo; &agrave; la page 336
&laquo; Lancement d'un &eacute;diteur externe pour des fichiers multim&eacute;dias &raquo; &agrave; la page 268
&laquo; Utilisation des fichiers depuis le panneau Fichiers &raquo; &agrave; la page 80
Ouverture des fichiers associ&eacute;s
Dreamweaver permet de visualiser les fichiers associ&eacute;s &agrave; votre document principal, tout en restant focalis&eacute; sur ce
dernier. Par exemple, si des fichiers CSS et JavaScript sont joints &agrave; un document principal, Dreamweaver permet
d'afficher et de modifier ces fichiers associ&eacute;s dans la fen&ecirc;tre de document tout en laissant le document principal visible.
Remarque : Les fichiers &agrave; association dynamique (comme les fichiers PHP de syst&egrave;mes de gestion du contenu) sont
abord&eacute;s dans la prochaine section d'aide.
Par d&eacute;faut, Dreamweaver affiche le nom de tous les fichiers associ&eacute;s au document principal dans une barre d'outils
Fichiers associ&eacute;s, sous le titre du document principal. L'ordre des boutons de cette barre d'outils suit l'ordre des liens
vers les fichiers associ&eacute;s dans le document principal.
Remarque : Si un fichier associ&eacute; est manquant, Dreamweaver affiche quand m&ecirc;me le bouton correspondant dans la barre
d'outils Fichiers associ&eacute;s. Toutefois, si vous cliquez sur ce bouton, Dreamweaver n'affiche rien.
Dreamweaver prend en charge les types de fichiers associ&eacute;s suivants:
• Fichiers de script c&ocirc;t&eacute; client
• Inclusions c&ocirc;t&eacute; serveur
• Sources d'ensembles de donn&eacute;es Spry (XML et HTML)
• Feuilles de style CSS externes (dont les feuilles de style imbriqu&eacute;es)
Derni&egrave;re mise &agrave; jour le 4/5/2011
73
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
Vous trouverez un didacticiel vid&eacute;o sur l'utilisation des fichiers associ&eacute;s, r&eacute;alis&eacute; par l'&eacute;quipe de Dreamweaver, &agrave;
l'adresse www.adobe.com/go/dw10relatedfiles_fr.
Vous trouverez un didacticiel vid&eacute;o relatif &agrave; l'utilisation du mode Affichage en direct, aux fichiers associ&eacute;s et &agrave; la
fen&ecirc;tre Navigation dans le code &agrave; l'adresse www.adobe.com/go/lrvid4044_dw_fr.
Ouverture d'un fichier associ&eacute; &agrave; partir de la barre d'outils Fichiers associ&eacute;s
Proc&eacute;dez comme suit, au choix :
• Dans la barre d'outils Fichiers associ&eacute;s en haut du document, cliquez sur le nom du fichier associ&eacute; &agrave; ouvrir.
• Dans la barre d'outils Fichiers associ&eacute;s en haut du document, cliquez &agrave; l'aide du bouton droit de la souris sur le nom
du fichier associ&eacute; &agrave; ouvrir, puis choisissez Ouvrir en tant que fichier s&eacute;par&eacute; dans le menu. Lorsque vous utilisez cette
m&eacute;thode pour ouvrir un fichier associ&eacute;, le document principal ne reste pas visible simultan&eacute;ment.
Ouverture d'un fichier associ&eacute; &agrave; partir de la fen&ecirc;tre Navigation dans le code
1 Placez le point d'insertion sur une ligne ou dans une zone dont vous savez qu'elle est influenc&eacute;e par un fichier
associ&eacute;.
2 Attendez que l'indicateur Navigation dans le code s'affiche, puis cliquez dessus pour ouvrir la fen&ecirc;tre Navigation
dans le code.
3 Vous pouvez survoler les &eacute;l&eacute;ments de la fen&ecirc;tre Navigation dans le code afin d'afficher davantage d'informations &agrave;
leur sujet. Par exemple, si vous voulez modifier une propri&eacute;t&eacute; de couleur CSS pr&eacute;cise mais que vous ignorez dans
quelle r&egrave;gle elle se trouve, vous pouvez trouver cette r&egrave;gle en survolant les r&egrave;gles disponible dans la fen&ecirc;tre
Navigation dans le code.
4 Cliquez sur l'&eacute;l&eacute;ment qui vous int&eacute;resse afin d'ouvrir le fichier associ&eacute; correspondant.
Retour au code source du document principal
❖ Cliquez sur le bouton Code source de la barre d'outils Fichiers apparent&eacute;s.
Modification de l'affichage de fichiers associ&eacute;s
Vous pouvez afficher les fichiers associ&eacute;s de diverses mani&egrave;res :
• Lorsque vous ouvrez un fichier associ&eacute; depuis le mode Cr&eacute;ation ou le mode Code et Cr&eacute;ation (mode Fractionn&eacute;),
ce fichier s'affiche dans une fen&ecirc;tre fractionn&eacute;e au-dessus du mode Cr&eacute;ation du document principal.
Vous pouvez choisir Affichage &gt; Mode Cr&eacute;ation en haut pour que le fichier associ&eacute; s'affiche plut&ocirc;t dans le bas de
la fen&ecirc;tre de document.
• Lorsque vous ouvrez un fichier associ&eacute; depuis le mode Code et Cr&eacute;ation fractionn&eacute; verticalement (Affichage &gt;
Fractionner verticalement), ce fichier s'affiche dans une fen&ecirc;tre fractionn&eacute;e &agrave; c&ocirc;t&eacute; du mode Cr&eacute;ation du document
principal.
Selon l'endroit o&ugrave; vous voulez placer le mode Cr&eacute;ation, vous pouvez activer ou d&eacute;sactiver l'option Affichage &gt; Mode
Cr&eacute;ation &agrave; gauche.
• Lorsque vous ouvrez un fichier associ&eacute; depuis le mode Code et Cr&eacute;ation fractionn&eacute; ou fractionn&eacute; verticalement
(Affichage &gt; Mode Fractionn&eacute; ou Affichage &gt; Fractionner verticalement), le fichier associ&eacute; s'affiche dans une
fen&ecirc;tre fractionn&eacute;e en dessous, au-dessus ou &agrave; c&ocirc;t&eacute; du code source du document principal, en fonction des options
que vous avez s&eacute;lectionn&eacute;es.
Derni&egrave;re mise &agrave; jour le 4/5/2011
74
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
Le &laquo; mode Code &raquo; dans l'option d'affichage fait r&eacute;f&eacute;rence au code source du document principal. Par exemple, si
vous choisissez Affichage &gt; Mode Code en haut, Dreamweaver affiche le code source du document principal dans
la moiti&eacute; sup&eacute;rieure de la fen&ecirc;tre de document. Par exemple, si vous choisissez Affichage &gt; Mode Code &agrave; gauche,
Dreamweaver affiche le code source du document principal sur le c&ocirc;t&eacute; gauche de la fen&ecirc;tre de document.
• Le mode Code standard ne permet pas d'afficher les documents apparent&eacute;s en m&ecirc;me temps que le code source du
document principal.
D&eacute;sactivation des fichiers associ&eacute;s
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh).
2 Dans la cat&eacute;gorie G&eacute;n&eacute;ral, d&eacute;sactivez Activer les fichiers associ&eacute;s.
Voir aussi
&laquo; Basculement d'un mode &agrave; un autre dans la fen&ecirc;tre de document &raquo; &agrave; la page 18
&laquo; Navigation vers le code apparent&eacute; &raquo; &agrave; la page 327
&laquo; Pr&eacute;visualisation de pages dans Dreamweaver &raquo; &agrave; la page 299
Didacticiel relatif aux fichiers associ&eacute;s
Ouverture de fichiers &agrave; association dynamique
La fonction Fichiers &agrave; association dynamique accro&icirc;t les possibilit&eacute;s de la fonction Fichiers associ&eacute;s, en vous
permettant de voir les fichiers associ&eacute;s aux pages dynamiques dans la barre d'outils Fichiers associ&eacute;s. Plus pr&eacute;cis&eacute;ment,
la fonction Fichiers &agrave; association dynamique permet de voir les nombreuses inclusions dynamiques requises pour
g&eacute;n&eacute;rer le code d'ex&eacute;cution des cadres CMS (syst&egrave;me de gestion du contenu) PHP ouverts les plus populaires, tels que
WordPress, Drupal et Joomla!
Pour pouvoir utiliser la fonction Fichiers &agrave; association dynamique, vous devez avoir acc&egrave;s &agrave; un serveur d'applications
PHP local ou distant qui ex&eacute;cute WordPress, Drupal ou Joomla! Une approche courante du test de pages consiste &agrave;
configurer un serveur d'applications PHP sur localhost puis &agrave; tester les pages localement.
Avant de tester les pages, vous devez effectuer les op&eacute;rations suivantes :
• Cr&eacute;ez un site Dreamweaver et assurez-vous que vous avez bien compl&eacute;t&eacute; la zone de texte URL Web de la bo&icirc;te de
dialogue Configuration du site.
• Configurez un serveur d'applications PHP.
Important : Le serveur doit &ecirc;tre en cours d'ex&eacute;cution avant que vous ne tentiez d'utiliser des fichiers &agrave; association
dynamique dans Dreamweaver.
• Installez WordPress, Drupal ou Joomla! sur le serveur d'applications. Pour plus de d&eacute;tails, voir:
• Installation de WordPress
• Installation de Drupal
• Installation de Joomla
• Dans Dreamweaver, d&eacute;finissez un fichier local o&ugrave; vous allez t&eacute;l&eacute;charger et modifier vos fichiers de CMS.
• D&eacute;finissez l'emplacement des fichiers de WordPress, Drupal ou Joomla! install&eacute;s comme dossier distant et de test.
• T&eacute;l&eacute;chargez (obtenez) vos fichiers de CMS depuis le dossier distant.
Derni&egrave;re mise &agrave; jour le 4/5/2011
75
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
Voir aussi
www.adobe.com/go/dwcs5drf_en
D&eacute;finition des pr&eacute;f&eacute;rences relatives aux fichiers &agrave; association dynamique
Lorsque vous ouvrez une page li&eacute;e &agrave; des fichiers &agrave; association dynamique, Dreamweaver peut rechercher les fichiers
automatiquement ou vous permettre de les rechercher manuellement (en cliquant sur un lien dans la barre
Informations, dans le haut de la page). Par d&eacute;faut, la recherche se fait manuellement.
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Mac OS).
2 Dans la cat&eacute;gorie G&eacute;n&eacute;ral, assurez-vous que l'option Activer les fichiers associ&eacute;s est bien activ&eacute;e.
3 S&eacute;lectionnez Manuellement ou Automatiquement dans le menu Fichiers &agrave; association dynamique. Vous pouvez
&eacute;galement d&eacute;sactiver compl&egrave;tement la recherche en choisissant l'option D&eacute;sactiv&eacute;.
D&eacute;couverte de fichiers &agrave; association dynamique
1 Ouvrez ne page &agrave; laquelle des fichiers &agrave; association dynamique sont li&eacute;s, par exemple la page index.php &agrave; la racine
d'un site WordPress, Drupal ou Joomla!
2 Si la recherche de fichiers &agrave; association dynamique se fait manuellement (option par d&eacute;faut), cliquez sur le lien
D&eacute;couvrir dans la barre Informations, dans le haut de la fen&ecirc;tre Document.
Si la recherche de fichiers &agrave; association dynamique se fait automatiquement, la liste des fichiers &agrave; association
dynamique s'affiche dans la barre d'outils Fichiers associ&eacute;s.
L'ordre des fichiers associ&eacute;s et &agrave; association dynamiques dans la barre d'outils Fichiers associ&eacute;s est le suivant :
• Fichiers associ&eacute;s statiques (c.-&agrave;-d. fichiers n'exigeant aucun traitement dynamique)
• Fichiers associ&eacute;s externes (c.-&agrave;-d. fichiers .css et .js) qui sont li&eacute;s &agrave; des fichiers d'inclusion de serveur &agrave; chemin
dynamique
• Fichiers d'inclusion de serveur &agrave; chemin dynamique (c.-&agrave;-d. fichiers .php, .inc et .module)
Filtrage des fichiers associ&eacute;s
Comme les fichiers associ&eacute;s et les fichiers &agrave; association dynamique peuvent &ecirc;tre nombreux, Dreamweaver permet de
filtrer les fichiers associ&eacute;s, de fa&ccedil;on &agrave; trouver pr&eacute;cis&eacute;ment les fichiers avec lesquels vous voulez travailler.
1 Ouvrez une page &agrave; laquelle des fichiers associ&eacute;s sont li&eacute;s.
2 Si n&eacute;cessaire, recherchez les fichiers &agrave; association dynamique.
3 Cliquez sur l'ic&ocirc;ne Filtrer les fichiers associ&eacute;s sur la droite de la barre d'outils Fichiers associ&eacute;s.
4 S&eacute;lectionnez les types de fichiers &agrave; afficher dans la barre d'outils Fichiers associ&eacute;s. Par d&eacute;faut, Dreamweaver
s&eacute;lectionne tous les fichiers associ&eacute;s.
5 Pour cr&eacute;er un filtre personnalis&eacute;, cliquez sur l'ic&ocirc;ne Filtrer les fichiers associ&eacute;s, puis choisissez Filtre personnalis&eacute;.
La bo&icirc;te de dialogue Filtre personnalis&eacute; ne permet de filtrer que les noms de fichiers pr&eacute;cis (style.css), les extensions
de fichiers (.php) et les expressions &agrave; caract&egrave;re g&eacute;n&eacute;rique utilisant des ast&eacute;risques (*menu*). Vous pouvez filtrer
selon des expressions &agrave; caract&egrave;res g&eacute;n&eacute;riques multiples en s&eacute;parant les diff&eacute;rentes expressions &agrave; l'aide de pointsvirgules (par exemple style.css;*.js;*tpl.php).
Remarque : Les param&egrave;tres de filtre ne sont pas conserv&eacute;s lorsque vous fermez le fichier.
Derni&egrave;re mise &agrave; jour le 4/5/2011
76
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
Nettoyage de fichiers HTML cr&eacute;&eacute;s avec Microsoft Word
Vous pouvez ouvrir des documents enregistr&eacute;s par Microsoft Word en tant que fichiers HTML, puis utiliser la
commande Nettoyer HTML Word pour supprimer le code HTML superflu g&eacute;n&eacute;r&eacute; par Word. La commande Nettoyer
HTML Word est utilisable pour les documents enregistr&eacute;s sous forme de fichiers HTML par Word 97 ou une version
ult&eacute;rieure.
Le code que Dreamweaver supprime est principalement utilis&eacute; par Word pour mettre en forme et afficher les
documents dans Word m&ecirc;me, et n'est pas n&eacute;cessaire dans un v&eacute;ritable fichier HTML. Conservez une copie de votre
fichier Word original (.doc) comme s&eacute;curit&eacute;, car il se peut que vous ne puissiez plus ouvrir ce document HTML dans
Word apr&egrave;s avoir appliqu&eacute; la fonction Nettoyer HTML Word.
Pour nettoyer un fichier HTML ou XHTML non g&eacute;n&eacute;r&eacute; par Microsoft Word, utilisez la commande Nettoyage du HTML.
1 Enregistrez votre document Microsoft Word au format HTML.
Remarque : Sous Windows, fermez le fichier dans Word pour &eacute;viter une violation de partage.
2 Ouvrez le fichier HTML dans Dreamweaver.
Pour afficher le code HTML g&eacute;n&eacute;r&eacute; par Word, activez le mode Code (Affichage &gt; Code).
3 S&eacute;lectionnez Commandes &gt; Nettoyer HTML Word.
Remarque : Si Dreamweaver ne parvient pas &agrave; d&eacute;terminer la version de Word qui a &eacute;t&eacute; utilis&eacute;e pour enregistrer ce fichier,
choisissez la version correcte dans le menu d&eacute;roulant.
4 Activez (ou d&eacute;sactivez) les options de nettoyage. Les pr&eacute;f&eacute;rences que vous entrez sont sauvegard&eacute;es comme
param&egrave;tres de nettoyage par d&eacute;faut.
Dreamweaver applique les param&egrave;tres de nettoyage au document HTML et un journal contenant une liste des
modifications apport&eacute;es s'affiche (sauf si cette option a &eacute;t&eacute; d&eacute;s&eacute;lectionn&eacute;e dans la bo&icirc;te de dialogue).
Supprimer les marqueurs sp&eacute;cifiques &agrave; Word Supprime tout le code HTML sp&eacute;cifique &agrave; Word, y compris le code XML
des balisesHTML, les m&eacute;tadonn&eacute;es personnalis&eacute;es Word et les balises de liens figurant dans l'en-t&ecirc;te du document, les
balises XML Word, les balises conditionnelles et leur contenu, ainsi que les paragraphes vides et les marges des styles.
Vous pouvez s&eacute;lectionner chacune de ces options individuellement &agrave; partir de l'onglet D&eacute;taill&eacute;.
Nettoyer CSS Supprime de l'en-t&ecirc;te toutes les feuilles de style sp&eacute;cifiques &agrave; Word, y compris les styles CSS incorpor&eacute;s
si possible (lorsque le style parent poss&egrave;de les m&ecirc;mes propri&eacute;t&eacute;s), les attributs de style commen&ccedil;ant par &laquo; mso &raquo;, les
d&eacute;clarations de styles non CSS, les attributs de style CSS des tableaux et toutes les d&eacute;finitions de style non utilis&eacute;es.
Vous pouvez personnaliser cette option encore davantage &agrave; partir de l'onglet D&eacute;taill&eacute;.
Nettoyer les balises &lt;font&gt; Supprime les balises HTML, en convertissant le corps du texte par d&eacute;faut en HTML de
taille 2.
Corriger les imbrications de balises non valides Supprime les balises de d&eacute;finition des polices de caract&egrave;res ins&eacute;r&eacute;es
par Word en dehors des balises de paragraphe et d'en-t&ecirc;te (au niveau du bloc).
Appliquer le format source Permet d'appliquer au document les options de formatage que vous avez indiqu&eacute;es dans
les pr&eacute;f&eacute;rences de format HTML et dans le fichier SourceFormat.txt.
Afficher le journal &agrave; la fin Affiche un message d'avertissement d&eacute;taillant les modifications apport&eacute;es au document d&egrave;s
que le nettoyage est termin&eacute;.
5 Cliquez sur OK ou sur l'onglet D&eacute;taill&eacute; pour personnaliser davantage les options Supprimer les marqueurs
sp&eacute;cifiques &agrave; Word et Nettoyer CSS, puis cliquez sur OK.
Derni&egrave;re mise &agrave; jour le 4/5/2011
77
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
Voir aussi
&laquo; Nettoyage du code &raquo; &agrave; la page 336
&laquo; Importation de documents Microsoft Office (Windows uniquement) &raquo; &agrave; la page 235
Gestion des fichiers et des dossiers
A propos de la gestion des fichiers et des dossiers
Dreamweaver poss&egrave;de un panneau Fichiers qui permet de g&eacute;rer et de transf&eacute;rer des fichiers vers un serveur distant et
&agrave; partir de celui-ci. Lorsque vous transf&eacute;rez des fichiers entre le site local et le site distant, les structures de fichiers et
de dossiers parall&egrave;les sur les deux sites sont pr&eacute;serv&eacute;es. Lors du transfert de fichiers entre les sites, Dreamweaver cr&eacute;e
les dossiers n&eacute;cessaires s'ils n'existent pas encore sur l'un des sites. Vous pouvez &eacute;galement synchroniser les fichiers
entre le site local et le site distant. Dans ce cas, Dreamweaver copie les fichiers requis dans les deux sens et supprime,
le cas &eacute;ch&eacute;ant, les fichiers inutiles.
Utilisation du panneau Fichiers
Le panneau Fichiers vous permet d'afficher des fichiers et des dossiers (qu'ils soient ou non associ&eacute;s &agrave; un site
Dreamweaver) et d'effectuer des op&eacute;rations courantes de maintenance, comme l'ouverture et le d&eacute;placement de
fichiers.
Remarque : Dans les versions pr&eacute;c&eacute;dentes de Dreamweaver, le panneau Fichiers s'appelait le panneau Site.
Vous pouvez d&eacute;placer le panneau Fichiers selon vos besoins et d&eacute;finir ses pr&eacute;f&eacute;rences.
Utilisez ce panneau pour effectuer les t&acirc;ches suivantes :
• Acc&egrave;s aux sites, &agrave; un serveur et aux disques locaux
• Affichage de fichiers et de dossiers
• Gestion de fichiers et de dossiers dans le panneau Fichiers
Pour les sites Dreamweaver, utilisez les options suivantes pour afficher ou transf&eacute;rer des fichiers :
Options du panneau Fichiers en mode d&eacute;velopp&eacute;.
A. Menu du site B. Connecter ou D&eacute;connecter C. Actualiser D. Afficher le journal FTP du site E. Vue Fichiers du site F. Serveur d'&eacute;valuation
G. Mode R&eacute;f&eacute;rentiel H. Acqu&eacute;rir le(s) fichier(s) I. Placer le(s) fichier(s) J. Extraire le(s) fichier(s) K. Archiver L. Synchroniser
M. D&eacute;velopper/R&eacute;duire
Remarque : Les boutons Fichiers du site, Serveur d'&eacute;valuation et Synchroniser ne sont visibles que dans le panneau
Fichiers en mode d&eacute;velopp&eacute;.
Menu contextuel Site Permet de s&eacute;lectionner un site Dreamweaver et d'afficher ses fichiers. Il permet &eacute;galement
d'acc&eacute;der &agrave; tous les fichiers situ&eacute;s sur votre disque local, tout comme l'Explorateur Windows (Windows) ou le
S&eacute;lecteur (Macintosh).
Connecter ou D&eacute;connecter (Protocoles FTP, RDS et WebDAV) Se connecte au site distant ou s'en d&eacute;connecte. Par
d&eacute;faut, Dreamweaver se d&eacute;connecte du site distant apr&egrave;s 30 minutes d'inactivit&eacute; (FTP uniquement). Pour modifier
cette dur&eacute;e, choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh), puis
s&eacute;lectionnez la cat&eacute;gorie Site dans la liste de gauche.
Derni&egrave;re mise &agrave; jour le 4/5/2011
78
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
Actualiser Met &agrave; jour les r&eacute;pertoires du site local et du site distant. Utilisez ce bouton pour d&eacute;clencher manuellement
une mise &agrave; jour des r&eacute;pertoires si vous avez d&eacute;sactiv&eacute; les options Actualiser automatiquement la liste des fichiers locaux
ou Actualiser automatiquement la liste des fichiers distants dans la bo&icirc;te de dialogue D&eacute;finition du site.
Vue Fichiers du site Affiche la structure des fichiers pr&eacute;sents sur le site local et le site distant dans les volets du panneau
Fichiers. Le site apparaissant dans le volet gauche et droit d&eacute;pend d'un param&egrave;tre de pr&eacute;f&eacute;rence. La vue Fichiers du site
correspond au mode d'affichage par d&eacute;faut du panneau Fichiers.
Vue Serveur d'&eacute;valuation Affiche la structure des r&eacute;pertoires du serveur d'&eacute;valuation et du site local.
Mode R&eacute;f&eacute;rentiel Affiche le r&eacute;f&eacute;rentiel Subversion (SVN).
Acqu&eacute;rir le(s) fichier(s) Copie les fichiers s&eacute;lectionn&eacute;s depuis le site distant vers le site local (en &eacute;crasant, le cas &eacute;ch&eacute;ant,
les copies locales existantes des fichiers). Si l'option Activer l'archivage et l'extraction de fichier est activ&eacute;e, les copies
locales sont en lecture seule ; ces fichiers restent accessibles, sur le site distant, &agrave; d'autres membres de l'&eacute;quipe qui
peuvent les extraire. Si l'option Activer l'archivage et l'extraction de fichier est d&eacute;sactiv&eacute;e, les copies du fichier seront
accessibles en lecture et &eacute;criture.
Remarque : Les fichiers que Dreamweaver copie sur le site distant ou le serveur d'&eacute;valuation sont ceux s&eacute;lectionn&eacute;s dans
le volet actif du panneau Fichiers. Si le volet actif est Site distant, ce sont les fichiers s&eacute;lectionn&eacute;s sur le serveur distant ou
le serveur d'&eacute;valuation qui sont copi&eacute;s ; si le volet actif est Fichiers locaux, Dreamweaver copie la version pr&eacute;sente sur le
serveur distant ou le serveur d'&eacute;valuation des fichiers s&eacute;lectionn&eacute;s sur le site local.
Placer le(s) fichier(s) Copie les fichiers s&eacute;lectionn&eacute;s depuis le site local vers le site distant.
Remarque : Les fichiers que Dreamweaver copie sur le site distant ou le serveur d'&eacute;valuation sont ceux s&eacute;lectionn&eacute;s dans
le volet actif du panneau Fichiers. Si le volet actif est Fichiers locaux, ce sont les fichiers s&eacute;lectionn&eacute;s sur le site local qui
sont copi&eacute;s vers le site distant ou le serveur d'&eacute;valuation ; si le volet actif est Site distant, Dreamweaver copie la version
pr&eacute;sente sur le site local des fichiers s&eacute;lectionn&eacute;s sur le site distant.
Si vous placez un fichier qui n'existe pas encore sur le site distant et que l'option Activer l'archivage et l'extraction de
fichier est activ&eacute;e, le fichier est ajout&eacute; au site distant et re&ccedil;oit l'&eacute;tat &laquo; extrait &raquo;. Si vous ne voulez pas que le fichier ajout&eacute;
soit dot&eacute; de cet &eacute;tat, cliquez sur le bouton Archiver.
Extraire le(s) fichier(s) Transf&egrave;re une copie du fichier du serveur distant vers le site local (en &eacute;crasant la copie locale de
ce fichier, le cas &eacute;ch&eacute;ant) et donne au fichier l'&eacute;tat extrait sur le serveur. Ce bouton n'est pas disponible si l'option Activer
l'archivage et l'extraction de fichier est d&eacute;sactiv&eacute;e pour le site en cours dans la bo&icirc;te de dialogue D&eacute;finition du site.
Archiver Transf&egrave;re une copie du fichier local vers le serveur distant, de mani&egrave;re &agrave; ce qu'il puisse &ecirc;tre modifi&eacute; par
d'autres membres de l'&eacute;quipe. Le fichier local passe alors en lecture seule. Cette option n'est pas disponible si l'option
Activer l'archivage et l'extraction de fichier est d&eacute;sactiv&eacute;e pour le site s&eacute;lectionn&eacute; dans la bo&icirc;te de dialogue D&eacute;finition
du site.
Synchroniser Synchronise les fichiers entre les dossiers locaux et distants.
Le bouton D&eacute;velopper/R&eacute;duire d&eacute;veloppe ou r&eacute;duit le panneau Fichiers afin d'afficher un ou deux volets.
Voir aussi
&laquo; Pr&eacute;sentation du panneau Fichiers &raquo; &agrave; la page 16
&laquo; Cr&eacute;ation d'un nouveau site &raquo; &agrave; la page 40
&laquo; Archivage et extraction de fichiers dans un dossier distant &raquo; &agrave; la page 92
&laquo; Placement de fichiers sur un serveur distant &raquo; &agrave; la page 88
&laquo; Acquisition de fichiers depuis un serveur distant &raquo; &agrave; la page 87
&laquo; Synchronisation de fichiers &raquo; &agrave; la page 100
Derni&egrave;re mise &agrave; jour le 4/5/2011
79
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
Affichage de fichiers et de dossiers
Le panneau Fichiers vous permet d'ouvrir des fichiers et des dossiers, qu'ils soient ou non associ&eacute;s &agrave; un site
Dreamweaver. Lorsque vous affichez des sites, des fichiers ou des dossiers dans le panneau Fichiers, vous pouvez
modifier la taille de la zone d'affichage, et, pour les sites Dreamweaver, vous pouvez d&eacute;velopper ou r&eacute;duire le panneau
Fichiers.
Pour les sites Dreamweaver, il est &eacute;galement possible de personnaliser le panneau Fichiers en modifiant la vue (site
local ou distant) qui s'affiche par d&eacute;faut dans le panneau r&eacute;duit. Vous pouvez &eacute;galement basculer l'affichage du contenu
dans le panneau Fichiers d&eacute;velopp&eacute;, en utilisant l'option Toujours afficher.
Ouverture ou fermeture du panneau Fichiers
❖ Choisissez Fen&ecirc;tre &gt; Fichiers.
D&eacute;veloppement ou r&eacute;duction du panneau Fichiers (sites Dreamweaver uniquement)
❖ Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers), cliquez sur le bouton D&eacute;velopper/R&eacute;duire
de la barre d'outils.
Remarque : Si vous cliquez sur le bouton D&eacute;velopper/R&eacute;duire pour d&eacute;velopper le panneau alors qu'il est ancr&eacute;, celui-ci
s'agrandit et vous emp&ecirc;che de travailler dans la fen&ecirc;tre de document. Pour revenir &agrave; la fen&ecirc;tre de document, cliquez de
nouveau sur le bouton D&eacute;velopper/R&eacute;duire afin de r&eacute;duire le panneau. Si vous cliquez sur le bouton D&eacute;velopper/R&eacute;duire
pour d&eacute;velopper le panneau alors qu'il n'est pas ancr&eacute;, vous pouvez poursuivre votre travail dans la fen&ecirc;tre de document.
Avant de pouvoir ancrer de nouveau le panneau, vous devez le r&eacute;duire.
Dans sa forme r&eacute;duite, le panneau Fichiers affiche le contenu du site local, du site distant ou du serveur d'&eacute;valuation
sous la forme d'une liste de fichiers. Sous sa forme d&eacute;velopp&eacute;e, le panneau affiche le site local et soit le site distant, soit
le serveur d'&eacute;valuation.
Modification de la taille de la zone d'affichage dans le panneau Fichiers d&eacute;velopp&eacute;
❖ Effectuez l'une des op&eacute;rations suivantes lorsque le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers) est d&eacute;velopp&eacute; :
• Faites glisser la barre s&eacute;parant les volets gauche et droit pour modifier la taille de la zone d'affichage du volet
souhait&eacute;.
• Utilisez les barres de d&eacute;filement situ&eacute;es dans la partie inf&eacute;rieure du panneau Fichiers pour faire d&eacute;filer le contenu
des volets.
Modification de l'affichage du site dans le panneau Fichiers (sites Dreamweaver
uniquement)
❖ Proc&eacute;dez comme suit, au choix :
• Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers) affich&eacute; sous sa forme r&eacute;duite, s&eacute;lectionnez Affichage local, Affichage
distant, Serveur d'&eacute;valuation ou Affichage de la carte dans le menu (o&ugrave; la vue actuelle s'affiche).
Remarque : L'option Affichage local appara&icirc;t par d&eacute;faut dans le menu Vue du site.
• Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers) affich&eacute; sous sa forme d&eacute;velopp&eacute;e, cliquez sur le bouton Fichiers du
site (pour le site distant), le bouton Serveur d'&eacute;valuation ou le bouton Fichiers du r&eacute;f&eacute;rentiel.
Derni&egrave;re mise &agrave; jour le 4/5/2011
80
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
A
B
C
A. Fichiers du site B. Serveur d'&eacute;valuation C. Fichiers du r&eacute;f&eacute;rentiel
Remarque : Pour pouvoir afficher un site distant un serveur d'&eacute;valuation ou un r&eacute;f&eacute;rentiel, vous devez configurer un site
distant, un serveur d'&eacute;valuation ou un r&eacute;f&eacute;rentiel SVN.
Affichage de fichiers en dehors d'un site Dreamweaver
❖ Le menu Site permet de naviguer sur votre ordinateur comme vous le feriez &agrave; l'aide de l'Explorateur (Windows) ou
du S&eacute;lecteur (Macintosh).
Utilisation des fichiers depuis le panneau Fichiers
Vous pouvez ouvrir ou renommer les fichiers ; ajouter, d&eacute;placer ou supprimer des fichiers ; ou encore actualiser le
panneau Fichiers apr&egrave;s avoir modifi&eacute; les fichiers.
Pour les sites Dreamweaver, vous pouvez &eacute;galement identifier les fichiers (sur le site local ou distant) mis &agrave; jour depuis
leur dernier transfert.
Voir aussi
&laquo; Synchronisation de fichiers &raquo; &agrave; la page 100
&laquo; Acc&egrave;s aux sites, &agrave; un serveur et aux disques locaux &raquo; &agrave; la page 83
Ouverture d'un fichier
1 Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers), s&eacute;lectionnez un site, un serveur ou un lecteur dans le menu
contextuel (dans lequel le site, le serveur ou le lecteur s'affiche).
2 Recherchez et s&eacute;lectionnez le fichier &agrave; ouvrir.
3 Proc&eacute;dez comme suit, au choix :
• Double-cliquez sur l'ic&ocirc;ne du fichier.
• Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e (Macintosh) sur
l'ic&ocirc;ne du fichier, puis choisissez Ouvrir.
Le fichier s'ouvre dans la fen&ecirc;tre de document de Dreamweaver.
Cr&eacute;ation d’un fichier ou d’un dossier
1 S&eacute;lectionnez un fichier ou un dossier dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers).
Dreamweaver cr&eacute;e le fichier ou le dossier dans le dossier s&eacute;lectionn&eacute; actuellement ou dans le m&ecirc;me dossier que celui
dans lequel le fichier s&eacute;lectionn&eacute; se trouve.
2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e (Macintosh), puis
s&eacute;lectionnez Nouveau fichier ou Nouveau dossier.
3 Saisissez le nom du nouveau fichier ou dossier.
4 Appuyez sur la touche Entr&eacute;e (Windows) ou Retour (Macintosh).
Suppression d'un fichier ou d'un dossier
1 S&eacute;lectionnez le fichier &agrave; supprimer dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers).
Derni&egrave;re mise &agrave; jour le 4/5/2011
81
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e (Macintosh), puis
choisissez Edition &gt; Supprimer.
Modification du nom d’un fichier ou d’un dossier
1 S&eacute;lectionnez le fichier &agrave; renommer dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers).
2 Proc&eacute;dez de l'une des mani&egrave;res suivantes pour activer le nom du fichier ou du dossier :
• Cliquez sur le nom du fichier, attendez, puis cliquez de nouveau.
• Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e (Macintosh) sur
l'ic&ocirc;ne du fichier, puis choisissez Edition &gt; Renommer.
3 Saisissez le nouveau nom &agrave; la place du nom existant.
4 Appuyez sur la touche Entr&eacute;e (Windows) ou Retour (Macintosh).
D&eacute;placement d’un fichier ou d’un dossier
1 S&eacute;lectionnez le fichier &agrave; d&eacute;placer dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers).
2 Proc&eacute;dez comme suit, au choix :
• Copiez le fichier ou le dossier, puis collez-le &agrave; son nouvel emplacement.
• Faites glisser le fichier ou le dossier vers son nouvel emplacement.
3 Actualisez le panneau Fichiers pour afficher le fichier ou le dossier &agrave; son nouvel emplacement.
Actualisation du panneau Actifs
❖ Proc&eacute;dez comme suit, au choix :
• Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e (Macintosh) sur un
fichier ou sur un dossier, puis choisissez Actualiser.
• (Sites Dreamweaver uniquement) Cliquez sur le bouton Actualiser dans la barre d'outils du panneau Fichiers (cette
option actualise les deux panneaux).
Remarque : Dreamweaver actualise le panneau Fichiers lorsque vous apportez des modifications dans une autre
application, puis revenez &agrave; Dreamweaver.
Recherche de fichiers dans votre site Dreamweaver
La fonction de recherche de Dreamweaver permet de trouver facilement les fichiers s&eacute;lectionn&eacute;s, ouverts, extraits ou
modifi&eacute;s r&eacute;cemment dans votre site. Vous pouvez &eacute;galement rechercher les fichiers les plus r&eacute;cents dans votre site local
ou distant.
Voir aussi
&laquo; Utilisation des rapports pour tester votre site &raquo; &agrave; la page 113
Recherche d'un fichier ouvert dans votre site
1 Ouvrez le fichier dans la fen&ecirc;tre de document.
2 S&eacute;lectionnez Site &gt; Rep&eacute;rer dans le site.
Dreamweaver s&eacute;lectionne les fichiers dans le panneau Fichiers.
Derni&egrave;re mise &agrave; jour le 4/5/2011
82
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
Remarque : Si le fichier ouvert dans la fen&ecirc;tre de document n'est pas associ&eacute; au site actuel affich&eacute; dans le panneau
Fichiers, Dreamweaver tente de d&eacute;terminer &agrave; quel site Dreamweaver le fichier appartient. S'il ne correspond qu'&agrave; un seul
site local, Dreamweaver ouvre ce site dans le panneau Fichiers, puis met le fichier en surbrillance.
Recherche et s&eacute;lection des fichiers extraits dans un site Dreamweaver
❖ Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers) affich&eacute; sous sa forme r&eacute;duite, cliquez sur le menu Options dans le
coin sup&eacute;rieur droit du panneau Fichiers, puis s&eacute;lectionnez Modifier &gt; S&eacute;lectionner les fichiers extraits.
Dreamweaver s&eacute;lectionne les fichiers dans le panneau Fichiers.
Recherche d'un fichier s&eacute;lectionn&eacute; dans votre site local ou distant
1 S&eacute;lectionnez le fichier depuis l'affichage local ou distant du panneau Fichiers (Fen&ecirc;tre &gt; Fichiers).
2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e (Macintosh), puis
s&eacute;lectionnez Retrouver sur le site local ou Retrouver sur le site distant (selon l'emplacement o&ugrave; le fichier a &eacute;t&eacute;
s&eacute;lectionn&eacute;).
Dreamweaver s&eacute;lectionne les fichiers dans le panneau Fichiers.
Recherche et s&eacute;lection des fichiers qui sont plus r&eacute;cents sur le site local que sur le site distant
❖ Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers) affich&eacute; sous sa forme r&eacute;duite, cliquez sur le menu Options dans le
coin sup&eacute;rieur droit du panneau Fichiers, puis s&eacute;lectionnez Modifier &gt; S&eacute;lectionner Local plus r&eacute;cent.
Dreamweaver s&eacute;lectionne les fichiers dans le panneau Fichiers.
Recherche et s&eacute;lection des fichiers qui sont plus r&eacute;cents sur le site distant que sur le site local
❖ Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers) affich&eacute; sous sa forme r&eacute;duite, cliquez sur le menu Options dans le
coin sup&eacute;rieur droit du panneau Fichiers, puis s&eacute;lectionnez Edition &gt; S&eacute;lectionner distants plus r&eacute;cents.
Dreamweaver s&eacute;lectionne les fichiers dans le panneau Fichiers.
Recherche des fichiers r&eacute;cemment modifi&eacute;s sur votre site
1 Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers) affich&eacute; sous sa forme r&eacute;duite, cliquez sur le menu Options dans le
coin sup&eacute;rieur droit du panneau Fichiers, puis s&eacute;lectionnez Modifier &gt; S&eacute;lectionner Modifi&eacute;s r&eacute;cemment.
2 Proc&eacute;dez de l'une des mani&egrave;res suivantes pour indiquer les dates &agrave; prendre en compte dans le rapport :
• Pour que le rapport prenne en compte l'ensemble des fichiers modifi&eacute;s ces derniers jours, activez l'option Fichiers
cr&eacute;&eacute;s ou modifi&eacute;s dans le dernier, puis entrez une valeur dans la zone de texte.
• Pour que le rapport prenne en compte l'ensemble des fichiers modifi&eacute;s durant une p&eacute;riode donn&eacute;e, cliquez sur le
bouton radio Fichiers cr&eacute;&eacute;s ou modifi&eacute;s entre, puis sp&eacute;cifiez une dur&eacute;e.
3 (Facultatif) Entrer un nom d'utilisateur dans la zone Modifi&eacute; par pour limiter votre recherche aux fichiers modifi&eacute;s
par un utilisateur donn&eacute; au cours de la p&eacute;riode indiqu&eacute;e.
Remarque : Cette option est uniquement disponible pour les sites Contribute.
4 Indiquez l'emplacement o&ugrave; vous souhaitez afficher les fichiers compris dans le rapport &agrave; l'aide des boutons radio,
si n&eacute;cessaire :
Machine locale si le site ne comporte que des pages statiques.
Serveur d'&eacute;valuation si le site comporte des pages dynamiques.
Derni&egrave;re mise &agrave; jour le 4/5/2011
83
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
Remarque : Vous devez avoir d&eacute;fini un serveur d'&eacute;valuation dans la bo&icirc;te de dialogue D&eacute;finition du site (XREF) pour
utiliser cette option. Si cette op&eacute;ration n'a pas &eacute;t&eacute; effectu&eacute;e et qu'aucun pr&eacute;fixe URL n'a &eacute;t&eacute; entr&eacute; pour ce serveur ou si
vous ex&eacute;cutez le rapport pour plus d'un site, cette option n'est pas disponible.
Autre emplacement si vous souhaitez entrer un chemin dans la zone de texte.
5 Cliquez sur OK pour enregistrer vos param&egrave;tres.
Dreamweaver s&eacute;lectionne les fichiers modifi&eacute;s durant la p&eacute;riode s&eacute;lectionn&eacute;e dans le panneau Fichiers.
Identification et suppression des fichiers non utilis&eacute;s
Vous pouvez identifier et supprimer les fichiers qui ne sont plus utilis&eacute;s par les autres fichiers de votre site.
1 Choisissez Site &gt; V&eacute;rifier tous les liens du site.
Dreamweaver v&eacute;rifie tous les liens de votre site et affiche les liens rompus dans le panneau R&eacute;sultats.
2 S&eacute;lectionnez Fichiers orphelins dans le menu du panneau V&eacute;rificateur de lien.
Dreamweaver affiche l'ensemble des fichiers sans liens entrants. Ceci signifie qu'aucun des fichiers de votre site n'est
li&eacute; &agrave; ces fichiers.
3 S&eacute;lectionnez les fichiers que vous voulez supprimer et appuyez sur la touche Suppr.
Important : Bien qu'aucun autre fichier du site ne soit li&eacute; &agrave; ces fichiers, une partie des fichiers de la liste peuvent &ecirc;tre li&eacute;s
&agrave; d'autres fichiers. Proc&eacute;dez avec prudence lors de la suppression de fichiers.
Voir aussi
&laquo; Activation et d&eacute;sactivation du voilage d'un site &raquo; &agrave; la page 106
Acc&egrave;s aux sites, &agrave; un serveur et aux disques locaux
Vous pouvez ouvrir, modifier et enregistrer les fichiers et dossiers de vos sites Dreamweaver, comme les fichiers ou
dossiers qui ne font pas partie d'un site Dreamweaver. Outre les sites Dreamweaver, vous pouvez acc&eacute;der &agrave; un serveur,
&agrave; un disque local ou &agrave; votre bureau.
Avant de pouvoir acc&eacute;der &agrave; un serveur distant, vous devez configurer Dreamweaver de fa&ccedil;on &agrave; ce qu'il puisse
fonctionner avec ce serveur.
Remarque : La meilleure fa&ccedil;on de g&eacute;rer des fichiers est de cr&eacute;er un site Dreamweaver.
Ouverture d'un site Dreamweaver existant
❖ Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers), s&eacute;lectionnez un site dans le menu (dans lequel le site, le serveur ou
le disque dur en cours d'utilisation s'affiche).
Derni&egrave;re mise &agrave; jour le 4/5/2011
84
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
Ouverture d'un dossier sur un serveur FTP ou RDS distant
1 Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers), s&eacute;lectionnez un nom de serveur dans le menu (dans lequel le site, le
serveur ou le disque dur en cours d'utilisation s'affiche).
Remarque : Les noms des serveurs que vous avez configur&eacute;s pour fonctionner avec Dreamweaver apparaissent.
2 Naviguez vers ces fichiers et modifiez-les comme vous le faites habituellement.
Acc&egrave;s &agrave; un disque local ou &agrave; votre bureau
1 Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers), s&eacute;lectionnez Bureau, disque local ou disque compact dans le menu
(dans lequel le site, le serveur ou le disque dur s'affiche).
2 Recherchez le fichier de votre choix, puis effectuez l'une des op&eacute;rations suivantes :
• Ouverture de fichiers dans Dreamweaver ou dans une autre application
• Renommer des fichiers
• Copier des fichiers
• Supprimer des fichiers
• Faire glisser des fichiers
Lorsque vous faites glisser un fichier d'un site Dreamweaver &agrave; un autre site ou &agrave; un dossier non li&eacute; &agrave; un site
Dreamweaver, Dreamweavercopie le fichier, puis l'ajoute &agrave; l'emplacement o&ugrave; vous le d&eacute;posez. Si vous faites glisser un
fichier et le d&eacute;posez au sein du m&ecirc;me site Dreamweaver, Dreamweaverd&eacute;place le fichier &agrave; l'emplacement o&ugrave; vous le
d&eacute;posez. Lorsque vous faites glisser un fichier qui n'est associ&eacute; &agrave; aucun site Dreamweaver vers un dossier qui n'est pas
non plus associ&eacute; &agrave; un site Dreamweaver, Dreamweaver d&eacute;place le fichier &agrave; l'emplacement o&ugrave; vous le d&eacute;posez.
Remarque : Pour que Dreamweaver d&eacute;place un fichier au lieu de le copier, maintenez la touche Maj (Windows) ou
Commande (Macintosh) enfonc&eacute;e pendant que vous faites glisser et d&eacute;posez le fichier. Pour copier un fichier que
Dreamweaver d&eacute;placerait par d&eacute;faut, maintenez la touche Ctrl (Windows) ou Option (Macintosh) enfonc&eacute;e pendant que
vous faites glisser et d&eacute;posez le fichier.
Personnalisation des d&eacute;tails de fichiers et de dossiers affich&eacute;s dans la forme
d&eacute;velopp&eacute;e du panneau Fichiers
Lorsqu'un site Dreamweaver est affich&eacute; dans le panneau Fichiers (en mode d&eacute;velopp&eacute;), les informations li&eacute;es aux
fichiers et dossiers sont affich&eacute;es dans des colonnes. Vous pouvez, par exemple, consulter le type du fichier ou la date
de sa derni&egrave;re modification.
Vous pouvez personnaliser les colonnes en proc&eacute;dant de l'une des fa&ccedil;ons suivantes (certaines op&eacute;rations sont
disponibles uniquement pour les colonnes que vous ajoutez, et non pas pour les colonnes par d&eacute;faut) :
• Retrier ou r&eacute;aligner les colonnes
Derni&egrave;re mise &agrave; jour le 4/5/2011
85
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
• Ajouter des colonnes (jusqu'&agrave; 10 colonnes maximum)
• Masquer les colonnes (sauf la colonne des noms de fichiers)
• D&eacute;finir les colonnes devant &ecirc;tre partag&eacute;es entre tous les utilisateurs connect&eacute;s &agrave; un site
• Supprimer les colonnes (colonnes personnalis&eacute;es uniquement)
• Renommer les colonnes (colonnes personnalis&eacute;es uniquement)
• Associer des colonnes &agrave; une Design Note (colonnes personnalis&eacute;es uniquement)
Modification de l'ordre des colonnes
❖ S&eacute;lectionnez le nom d'une colonne, puis cliquez sur le bouton fl&egrave;che vers le haut ou vers le bas afin de changer la
position de la colonne s&eacute;lectionn&eacute;e.
Remarque : Vous pouvez changer l'ordre de toutes les colonnes, sauf la colonne Nom, qui reste toujours en premi&egrave;re
position.
Ajout, suppression ou modification de colonnes
1 Choisissez Site &gt; G&eacute;rer les sites.
2 S&eacute;lectionnez un site, puis cliquez sur Modifier.
3 D&eacute;veloppez les param&egrave;tres avanc&eacute;s et choisissez la cat&eacute;gorie Colonnes mode Fichier.
4 S&eacute;lectionnez une colonne, puis cliquez sur le bouton Plus (+) pour l'ajouter ou sur le bouton Moins (–) pour la
supprimer.
Remarque : Comme la colonne est imm&eacute;diatement supprim&eacute;e sans qu'il vous soit demand&eacute; de confirmation, soyez
certain de r&eacute;ellement vouloir effectuer cette op&eacute;ration avant de cliquer sur le bouton Moins (–).
5 Dans la zone Nom de colonne, indiquez le nom de votre colonne.
6 Choisissez une valeur dans le menu Associer &agrave; Design Notes ou indiquez-en une.
Remarque : Vous devez associer la nouvelle colonne &agrave; une Design Note afin que des donn&eacute;es s'affichent dans le panneau
Fichiers.
7 Choisissez une option d'alignement pour d&eacute;terminer la fa&ccedil;on dont le texte doit &ecirc;tre align&eacute; dans la colonne.
8 Activez ou d&eacute;sactivez l'option Afficher afin d'afficher et de masquer respectivement la colonne.
9 Activez ou d&eacute;sactivez l'option Partager avec tous les utilisateurs de ce site afin que la colonne soit accessible ou non
&agrave; tous les utilisateurs connect&eacute;s au site distant.
Tri en fonction d'une colonne dans le panneau Fichiers
❖ Pour trier les listes, cliquez sur l'en-t&ecirc;te de la colonne en fonction de laquelle vous souhaitez effectuer le tri.
Si vous cliquez plusieurs fois sur un m&ecirc;me en-t&ecirc;te de colonne, l'ordre dans lequel Dreamweaver trie la colonne est
invers&eacute; (ordre croissant ou d&eacute;croissant).
Derni&egrave;re mise &agrave; jour le 4/5/2011
86
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
Acquisition et placement de fichiers depuis ou vers
votre serveur
Transfert de fichiers et fichiers d&eacute;pendants
Si vous travaillez au sein d'un groupe, vous pouvez utiliser le syst&egrave;me d'extraction et d'archivage pour transf&eacute;rer des
fichiers entre le serveur distant et l'ordinateur local. Si vous &ecirc;tes la seule personne &agrave; travailler sur le site distant, vous
pouvez utiliser les commandes Acqu&eacute;rir et Placer pour transf&eacute;rer des fichiers sans avoir &agrave; les archiver ou &agrave; les extraire.
Lorsque vous transf&eacute;rez un document entre un dossier local et distant &agrave; l'aide du panneau Fichiers, vous pouvez
transf&eacute;rer les fichiers d&eacute;pendants de ce document. Les fichiers d&eacute;pendants sont des images, des feuilles de style
externes et d'autres fichiers r&eacute;f&eacute;renc&eacute;s dans votre document qu'un navigateur charge avec le document.
Remarque : D'une mani&egrave;re g&eacute;n&eacute;rale, il est conseill&eacute; de t&eacute;l&eacute;charger les fichiers d&eacute;pendants lorsque le fichier extrait est un
nouveau fichier, mais c'est inutile si les versions les plus r&eacute;centes des fichiers d&eacute;pendants sont d&eacute;j&agrave; pr&eacute;sentes sur le disque
local. Cela s'applique &eacute;galement lors du transfert et de l'archivage de fichiers : il n'est pas n&eacute;cessaire si des copies mises &agrave;
jour sont d&eacute;j&agrave; pr&eacute;sentes sur le site distant.
Les &eacute;l&eacute;ments de biblioth&egrave;que sont trait&eacute;s comme des fichiers d&eacute;pendants.
Certains serveurs g&eacute;n&egrave;rent des erreurs lors du placement d'&eacute;l&eacute;ments de biblioth&egrave;que. N&eacute;anmoins, vous pouvez voiler
ces fichiers pour qu'ils ne soient pas transf&eacute;r&eacute;s.
Voir aussi
&laquo; Archivage et extraction de fichiers &raquo; &agrave; la page 91
&laquo; Activation et d&eacute;sactivation du voilage d'un site &raquo; &agrave; la page 106
A propos des transferts de fichiers en arri&egrave;re-plan
Vous pouvez effectuer d'autres activit&eacute;s non li&eacute;es au serveur lors de l'acquisition ou du placement de fichiers. Le
transfert de fichiers d'arri&egrave;re-plan fonctionne pour tous les protocoles de transfert pris en charge par Dreamweaver :
FTP, SFTP, LAN, WebDAV, Subversion et RDS.
Les activit&eacute;s non li&eacute;es au serveur comprennent, entre autres, les op&eacute;rations suivantes: taper, modifier des feuilles de
style externes, g&eacute;n&eacute;rer des rapports &agrave; l'&eacute;chelle du site et cr&eacute;er de nouveaux sites.
Les activit&eacute;s c&ocirc;t&eacute; serveur que Dreamweaver ne peut pas effectuer pendant les transferts de fichiers incluent les t&acirc;ches
suivantes :
• placer/acqu&eacute;rir/archiver/extraire des fichiers ;
• annuler l'extraction ;
• cr&eacute;er une connexion &agrave; une base de donn&eacute;es ;
• lier les donn&eacute;es dynamiques ;
• Pr&eacute;visualisation des donn&eacute;es en mode Affichage en direct
• ins&eacute;rer un service Web ;
• supprimer des fichiers ou des dossiers distants ;
• pr&eacute;visualiser dans le navigateur sur un serveur d'&eacute;valuation ;
• enregistrer un fichier sur un serveur distant ;
Derni&egrave;re mise &agrave; jour le 4/5/2011
87
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
• ins&eacute;rer une image d'un serveur distant ;
• ouvrir un fichier d'un serveur distant ;
• placer automatiquement des fichiers lors de l'enregistrement ;
• faire glisser des fichiers vers le site distant ;
• couper, copier ou coller des fichiers sur le site distant ;
• actualiser l'affichage distant.
Par d&eacute;faut, la bo&icirc;te de dialogue Activit&eacute; fichiers en arri&egrave;re-plan est ouverte pendant les transferts de fichiers. Vous
pouvez r&eacute;duire cette bo&icirc;te de dialogue en cliquant sur le bouton R&eacute;duire, dans son coin sup&eacute;rieur droit. La fermeture
de la bo&icirc;te de dialogue pendant un transfert de fichier entra&icirc;ne l'annulation de cette op&eacute;ration.
Acquisition de fichiers depuis un serveur distant
La commande Acqu&eacute;rir permet de copier les fichiers du site distant sur le site local. Vous pouvez utiliser le panneau
Fichiers ou la fen&ecirc;tre du document pour acqu&eacute;rir des fichiers.
Dreamweaver cr&eacute;e un journal de suivi des activit&eacute;s de fichiers au cours du transfert ; vous pouvez le consulter et
l'enregistrer.
Remarque : Vous ne pouvez pas d&eacute;sactiver le transfert de fichiers en arri&egrave;re-plan. Si le journal des d&eacute;tails est ouvert dans
la bo&icirc;te de dialogue Activit&eacute; fichiers en arri&egrave;re-plan, vous pouvez le fermer pour am&eacute;liorer les performances.
Dreamweaver enregistre &eacute;galement l'activit&eacute; de tous les transferts de fichiers en FTP. Si une erreur se produit lors du
transfert d'un fichier en FTP, le journal du site FTP peut vous aider &agrave; d&eacute;terminer le probl&egrave;me.
Voir aussi
&laquo; Archivage et extraction de fichiers &raquo; &agrave; la page 91
&laquo; Synchronisation de fichiers &raquo; &agrave; la page 100
Acquisition des fichiers depuis un serveur distant via le panneau Fichiers
1 Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers), s&eacute;lectionnez les fichiers que vous voulez t&eacute;l&eacute;charger.
Les fichiers sont g&eacute;n&eacute;ralement s&eacute;lectionn&eacute;s dans l'affichage distant, mais il est &eacute;galement possible de les s&eacute;lectionner
dans l'affichage local. Si l'affichage distant est actif, Dreamweaver copie les fichiers s&eacute;lectionn&eacute;s sur le site local ; si
l'affichage local est actif, Dreamweaver copie la version distante des fichiers locaux s&eacute;lectionn&eacute;s sur le site local.
Remarque : Pour n'acqu&eacute;rir que les fichiers dont la version distante est plus r&eacute;cente que la version locale, utilisez la
commande Synchroniser.
2 Proc&eacute;dez de l'une des mani&egrave;res suivantes pour acqu&eacute;rir un fichier :
• Cliquez sur le bouton Acqu&eacute;rir dans la barre d'outils du panneau Fichiers.
• Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e (Macintosh) sur le
fichier dans le panneau Fichiers, puis s&eacute;lectionnez Acqu&eacute;rir dans le menu contextuel.
3 Cliquez sur Oui dans la bo&icirc;te de dialogue Fichiers d&eacute;pendants si vous souhaitez t&eacute;l&eacute;charger les fichiers d&eacute;pendants.
Si vous disposez d&eacute;j&agrave; de copies locales des fichiers d&eacute;pendants, cliquez sur Non. L'option par d&eacute;faut est de ne pas
t&eacute;l&eacute;charger les fichiers ind&eacute;pendants. Vous pouvez d&eacute;finir cette option en s&eacute;lectionnant Edition &gt; Pr&eacute;f&eacute;rences &gt;
Site.
Derni&egrave;re mise &agrave; jour le 4/5/2011
88
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
Dreamweaver t&eacute;l&eacute;charge les fichiers s&eacute;lectionn&eacute;s comme suit :
• Si vous utilisez le syst&egrave;me d'archivage et d'extraction, l'obtention d'un fichier consistera &agrave; transf&eacute;rer une copie locale
accessible en lecture seule. Le fichier reste disponible sur le site distant ou sur le serveur d'&eacute;valuation et peut &ecirc;tre
extrait par d'autres membres de l'&eacute;quipe.
• Si vous n'utilisez pas le syst&egrave;me d'archivage et d'extraction, l'obtention d'un fichier produit une copie accessible en
lecture et &eacute;criture.
Remarque : Si vous travaillez en &eacute;quipe et que d'autres personnes sont susceptibles de travailler sur les m&ecirc;mes fichiers,
ne d&eacute;sactivez pas l'option Activer l'archivage et l'extraction de fichier. De plus, si d'autres personnes utilisent le syst&egrave;me
d'extraction et d'archivage sur le site, vous devez l'utiliser &eacute;galement.
Pour arr&ecirc;ter le transfert de fichier &agrave; n'importe quel moment, cliquez sur le bouton Annuler de la bo&icirc;te de dialogue
Activit&eacute; fichiers en arri&egrave;re-plan.
Acquisition des fichiers depuis un serveur distant &agrave; l'aide de la fen&ecirc;tre du document
1 Assurez-vous que le document est actif dans la fen&ecirc;tre du document.
2 Proc&eacute;dez de l'une des mani&egrave;res suivantes pour acqu&eacute;rir un fichier :
• Choisissez Site &gt; Acqu&eacute;rir.
• Cliquez sur l'ic&ocirc;ne Gestion des fichiers dans la barre d'outils de la fen&ecirc;tre du document, puis s&eacute;lectionnez Acqu&eacute;rir
dans le menu.
Remarque : Si le fichier actuel n'est pas associ&eacute; au site s&eacute;lectionn&eacute; dans le panneau Fichiers, Dreamweaver tente de
d&eacute;terminer &agrave; quel site d&eacute;fini localement le fichier actuel appartient. Si ce fichier courant n'appartient qu'&agrave; un seul site
local, Dreamweaver ouvre ce site, puis effectue l'op&eacute;ration d'acquisition.
Affichage du journal FTP
1 Cliquez sur le menu Options dans le coin sup&eacute;rieur droit du panneau Fichiers.
2 Choisissez Affichage &gt; Journal FTP du site.
Remarque : Dans le panneau Fichiers en mode d&eacute;velopp&eacute;, vous pouvez cliquer sur le bouton Journal FTP.
Placement de fichiers sur un serveur distant
Vous pouvez placer des fichiers du site local vers le site distant, dans la plupart des cas sans changer l'&eacute;tat d'extraction
du fichier.
Il existe deux types de circonstances dans lesquels il est pr&eacute;f&eacute;rable d'utiliser la commande Placer plut&ocirc;t que la
commande Archiver :
• Lorsque vous ne travaillez pas en &eacute;quipe et que vous n'utilisez pas le syst&egrave;me d'archivage et d'extraction.
• Lorsque vous souhaitez placer la version actuelle du fichier sur le serveur, mais que vous allez continuer &agrave; y apporter
des modifications.
Remarque : Si vous placez un fichier qui n'existait pas encore sur le site distant et que vous utilisez le syst&egrave;me
d'extraction et d'archivage, le fichier est copi&eacute; sur le site distant, puis extrait pour vous permettre de continuer &agrave; le
modifier.
Vous pouvez utiliser le panneau Fichiers ou la fen&ecirc;tre du document pour acqu&eacute;rir des fichiers. Dreamweaver cr&eacute;e
un journal de suivi des activit&eacute;s de fichiers au cours du transfert ; vous pouvez le consulter et l'enregistrer.
Remarque : Vous ne pouvez pas d&eacute;sactiver le transfert de fichiers en arri&egrave;re-plan. Si le journal des d&eacute;tails est ouvert
dans la bo&icirc;te de dialogue Activit&eacute; fichiers en arri&egrave;re-plan, vous pouvez le fermer pour am&eacute;liorer les performances.
Derni&egrave;re mise &agrave; jour le 4/5/2011
89
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
Dreamweaver enregistre &eacute;galement l'activit&eacute; de tous les transferts de fichiers en FTP. Si une erreur se produit lors
du transfert d'un fichier en FTP, le journal du site FTP peut vous aider &agrave; d&eacute;terminer le probl&egrave;me.
Vous trouverez un didacticiel consacr&eacute; au placement de fichiers sur un serveur distant &agrave; l'adresse
www.adobe.com/go/vid0163_fr.
Vous trouverez un didacticiel consacr&eacute; au d&eacute;pannage des probl&egrave;mes de publication &agrave; l'adresse
www.adobe.com/go/vid0164_fr.
Voir aussi
&laquo; Synchronisation de fichiers &raquo; &agrave; la page 100
&laquo; A propos du syst&egrave;me d'archivage et d'extraction de fichiers &raquo; &agrave; la page 91
Didacticiel consacr&eacute; au placement de fichiers
Didacticiel consacr&eacute; au d&eacute;pannage des probl&egrave;mes de publication
Placement de fichiers sur un serveur distant ou un serveur d'&eacute;valuation &agrave; l'aide du panneau
Fichiers
1 Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers), s&eacute;lectionnez les fichiers &agrave; t&eacute;l&eacute;charger.
Les fichiers sont g&eacute;n&eacute;ralement s&eacute;lectionn&eacute;s dans l'affichage Site local, mais il est &eacute;galement possible de les s&eacute;lectionner
dans l'affichage Site distant.
Remarque : Vous pouvez d&eacute;cider de ne placer que les fichiers dont la version locale est plus r&eacute;cente que la version distante.
2 Proc&eacute;dez de l'une des mani&egrave;res suivantes pour placer un fichier sur le serveur distant :
• Cliquez sur le bouton Placer dans la barre d'outils du panneau Fichiers.
• Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e (Macintosh) sur le
fichier dans le panneau Fichiers, puis s&eacute;lectionnez Placer dans le menu contextuel.
3 Si le fichier n'a pas encore &eacute;t&eacute; enregistr&eacute;, une bo&icirc;te de dialogue s'affiche (si vous l'avez indiqu&eacute; parmi les pr&eacute;f&eacute;rences
de la cat&eacute;gorie Site de la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences) pour vous permettre de l'enregistrer avant de le placer sur
le serveur distant. Cliquez sur Oui pour enregistrer le fichier ou sur Non pour placer la version pr&eacute;c&eacute;demment
enregistr&eacute;e sur le serveur distant.
Remarque : Si vous n'enregistrez pas le fichier, aucune des modifications effectu&eacute;es depuis le dernier enregistrement ne
sera plac&eacute;e sur le serveur distant. Toutefois, le fichier reste ouvert, ce qui vous permet encore d'enregistrer les changements
apr&egrave;s avoir plac&eacute; le fichier sur le serveur.
4 Cliquez sur Oui si vous souhaitez envoyer les fichiers d&eacute;pendants associ&eacute;s aux fichiers s&eacute;lectionn&eacute;s ou sur Non si
vous ne voulez pas les envoyer. L'option par d&eacute;faut est de ne pas transf&eacute;rer les fichiers ind&eacute;pendants. Vous pouvez
d&eacute;finir cette option en s&eacute;lectionnant Edition &gt; Pr&eacute;f&eacute;rences &gt; Site.
Remarque : Il est en g&eacute;n&eacute;ral conseill&eacute; de transf&eacute;rer les fichiers d&eacute;pendants lorsque vous archivez un nouveau fichier, mais
si les versions les plus r&eacute;centes des fichiers d&eacute;pendants figurent d&eacute;j&agrave; sur le serveur distant, il n'est pas utile de les transf&eacute;rer
&agrave; nouveau.
Pour arr&ecirc;ter le transfert de fichier &agrave; n'importe quel moment, cliquez sur le bouton Annuler de la bo&icirc;te de dialogue
Activit&eacute; fichiers en arri&egrave;re-plan.
Placement de fichiers sur un serveur distant &agrave; l'aide de la fen&ecirc;tre du document
1 Assurez-vous que le document est actif dans la fen&ecirc;tre du document.
Derni&egrave;re mise &agrave; jour le 4/5/2011
90
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
2 Proc&eacute;dez de l'une des mani&egrave;res suivantes pour placer un fichier :
• Choisissez Site &gt; Placer.
• Cliquez sur l'ic&ocirc;ne Gestion des fichiers dans la barre d'outils de la fen&ecirc;tre du document, puis s&eacute;lectionnez Placer
dans le menu.
Remarque : Si le fichier actuel n'est pas associ&eacute; au site s&eacute;lectionn&eacute; dans le panneau Fichiers, Dreamweaver tente de
d&eacute;terminer &agrave; quel site d&eacute;fini localement le fichier actuel appartient. Si ce fichier courant n'appartient qu'&agrave; un seul site
local, Dreamweaver ouvre ce site, puis effectue l'op&eacute;ration de placement.
Affichage du journal FTP
1 Cliquez sur le menu Options dans le coin sup&eacute;rieur droit du panneau Fichiers.
2 Choisissez Affichage &gt; Journal FTP du site.
Remarque : Dans le panneau Fichiers en mode d&eacute;velopp&eacute;, vous pouvez cliquer sur le bouton Journal FTP.
Gestion des transferts de fichiers
Vous pouvez afficher l'&eacute;tat des op&eacute;rations de transfert de fichiers, ainsi que la liste des fichiers transf&eacute;r&eacute;s et de leurs
r&eacute;sultats (transfert r&eacute;ussi, ignor&eacute; ou rat&eacute;). Vous pouvez &eacute;galement cr&eacute;er un journal des activit&eacute;s relatives aux fichiers.
Remarque : Dreamweaver vous permet d'effectuer d'autres activit&eacute;s non li&eacute;es au serveur lors du transfert de fichiers vers
le serveur ou &agrave; partir de ce dernier.
Annulation d'un transfert de fichier
❖ Cliquez sur le bouton Annuler de la bo&icirc;te de dialogue Transfert de fichiers en arri&egrave;re-plan. Si la bo&icirc;te de dialogue
n'est pas affich&eacute;e, cliquez sur le bouton Activit&eacute; fichiers dans le bas du panneau Fichiers.
Affichage de la bo&icirc;te de dialogue Activit&eacute; fichiers en arri&egrave;re-plan pendant les transferts
❖ Cliquez sur le bouton Activit&eacute; fichiers ou Journal dans le bas du panneau Fichiers.
Remarque : Vous ne pouvez pas masquer ni supprimer le bouton Journal. Il s'agit d'une partie permanente du panneau.
Affichage des d&eacute;tails du dernier transfert de fichiers
1 Cliquez sur le bouton Journal en bas du panneau Fichiers pour ouvrir la bo&icirc;te de dialogue Activit&eacute; fichiers en
arri&egrave;re-plan.
2 Cliquez sur la fl&egrave;che D&eacute;tails.
Enregistrement d'un journal du dernier transfert de fichier
1 Cliquez sur le bouton Journal en bas du panneau Fichiers pour ouvrir la bo&icirc;te de dialogue Activit&eacute; fichiers en
arri&egrave;re-plan.
2 Cliquez sur le bouton Enregistrer journal et enregistrez les informations sous forme de fichier texte.
Vous pouvez alors analyser les mouvements de fichiers en ouvrant le fichier journal dans Dreamweaver ou dans un
&eacute;diteur de texte.
Derni&egrave;re mise &agrave; jour le 4/5/2011
91
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
Archivage et extraction de fichiers
A propos du syst&egrave;me d'archivage et d'extraction de fichiers
Si vous travaillez en &eacute;quipe, vous avez la possibilit&eacute; d'archiver et d'extraire des fichiers sur les serveurs local et distant.
Si vous &ecirc;tes la seule personne &agrave; travailler sur le serveur distant, vous pouvez utiliser les commandes Acqu&eacute;rir et Placer
pour transf&eacute;rer des fichiers sans avoir &agrave; les archiver ou &agrave; les extraire.
Remarque : Vous pouvez utiliser la fonctionnalit&eacute; d'acquisition et de placement de fichiers sur un serveur d'&eacute;valuation,
mais le syst&egrave;me d'archivage et d'extraction n'est pas disponible sur ce type de serveur.
L'extraction d'un fichier &eacute;quivaut &agrave; signaler aux autres utilisateurs que vous travaillez sur ce fichier et qu'ils ne doivent
pas le modifier. Lors de l'extraction d'un fichier, le nom de la personne ayant effectu&eacute; l'op&eacute;ration est affich&eacute; dans le
panneau Fichiers, avec une coche de couleur rouge (si le fichier a &eacute;t&eacute; extrait par un autre membre de l'&eacute;quipe) ou verte
(si vous &ecirc;tes la personne &agrave; avoir extrait le fichier) en regard de son ic&ocirc;ne.
L'archivage d'un fichier &eacute;quivaut &agrave; le mettre &agrave; la disposition des autres membres de l'&eacute;quipe, qui peuvent l'extraire et
le modifier. Lorsque vous archivez un fichier apr&egrave;s l'avoir modifi&eacute;, la version locale de ce fichier devient accessible en
lecture seule et un cadenas appara&icirc;t en regard du fichier dans le panneau Fichiers pour vous emp&ecirc;cher de le modifier.
Dreamweaver ne rend pas les fichiers extraits accessibles en lecture seule sur le serveur distant. Si vous transf&eacute;rez des
fichiers &agrave; l'aide d'une application autre que Dreamweaver, vous risquez d'&eacute;craser les fichiers extraits. Toutefois, dans
les applications autres que Dreamweaver, le fichier LCK est visible pr&egrave;s du fichier extrait dans la hi&eacute;rarchie de fichiers
afin d'&eacute;viter ce type d'incident.
Voir aussi
&laquo; Acquisition et placement de fichiers depuis ou vers votre serveur &raquo; &agrave; la page 86
Configuration du syst&egrave;me d'archivage et d'extraction de fichiers
Pour utiliser le syst&egrave;me d'archivage et d'extraction, vous devez associer votre site local &agrave; un serveur distant.
1 Choisissez Site &gt; G&eacute;rer les sites.
2 S&eacute;lectionnez un site et cliquez sur Modifier.
3 Dans la bo&icirc;te de dialogue Configuration du site, s&eacute;lectionnez la cat&eacute;gorie Serveurs et effectuez l'une des actions
suivantes :
• Cliquez sur le bouton Ajouter nouveau serveur pour ajouter un nouveau serveur.
• S&eacute;lectionnez un serveur existant puis cliquez sur le bouton Modifier serveur existant.
4 D&eacute;finissez les options de base requises, puis cliquez sur le bouton Avanc&eacute;.
5 Activez l'option Activer l'extraction de fichier si vous travaillez au sein d'une &eacute;quipe (ou si vous travaillez seul, mais
depuis plusieurs machines). D&eacute;s&eacute;lectionnez cette option si vous souhaitez d&eacute;sactiver l'archivage et l'extraction de
fichiers dans votre site Web.
Cette option est utile pour informer les autres utilisateurs que vous avez extrait un fichier en vue de le modifier ou pour
vous rappeler qu'une version plus r&eacute;cente d'un fichier est peut-&ecirc;tre ouverte sur une autre machine.
Si vous ne voyez pas les options Archiver/Extraire, cela signifie que vous n'avez pas configur&eacute; le serveur distant.
6 Activez l'option Extraire les fichiers &agrave; l'ouverture si vous voulez que les fichiers soient automatiquement extraits
lorsque vous double-cliquez dessus pour les ouvrir dans le panneau Fichiers.
Si vous choisissez Fichier &gt; Ouvrir pour ouvrir un fichier, cela n'extrait pas le fichier, m&ecirc;me si cette option est activ&eacute;e.
Derni&egrave;re mise &agrave; jour le 4/5/2011
92
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
7 D&eacute;finissez les options restantes :
Nom d'extraction Ce nom appara&icirc;t dans le panneau Fichiers &agrave; c&ocirc;t&eacute; des fichiers extraits afin que les membres d'une
&eacute;quipe puissent s'adresser &agrave; la personne appropri&eacute;e s'ils ont besoin d'un fichier extrait.
Remarque : Si vous travaillez seul sur plusieurs machines, utilisez un nom d'extraction diff&eacute;rent pour chaque machine
(par exemple, PierreR-MacDomicile et PierreR-PCBureau) de mani&egrave;re &agrave; savoir o&ugrave; se trouve la version la plus r&eacute;cente du
fichier si vous oubliez de l'archiver.
Adresse &eacute;lectronique Si vous saisissez une adresse &eacute;lectronique, lors de l'extraction d'un fichier, votre nom appara&icirc;t
dans le panneau Fichiers en regard du fichier, sous la forme d'un lien (bleu soulign&eacute;). Si un membre de l'&eacute;quipe clique
sur le lien, son programme de messagerie &eacute;lectronique par d&eacute;faut ouvre un nouveau courriel &agrave; destination de votre
adresse &eacute;lectronique et comportant un objet qui correspond aux noms du site et du fichier.
Archivage et extraction de fichiers dans un dossier distant
Une fois le syst&egrave;me d'archivage et d'extraction d&eacute;fini, vous pouvez archiver et extraire des fichiers sur un serveur
distant via le panneau Fichiers ou la fen&ecirc;tre de document.
Extraction des fichiers &agrave; l'aide du panneau Fichiers
1 Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers), s&eacute;lectionnez les fichiers &agrave; extraire du serveur distant.
Remarque : Vous pouvez s&eacute;lectionner des fichiers dans l'affichage du site local ou distant mais pas dans l'affichage
Serveur d'&eacute;valuation.
Une coche de couleur rouge indique qu'un autre membre de l'&eacute;quipe dispose du fichier extrait. Un symbole
repr&eacute;sentant un cadenas indique que le fichier est en lecture seule (Windows) ou verrouill&eacute; (Macintosh).
2 Proc&eacute;dez de l'une des mani&egrave;res suivantes pour extraire les fichiers :
• Cliquez sur le bouton Extraire dans la barre d'outils du panneau Fichiers.
• Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e (Macintosh), puis
choisissez Extraire dans le menu contextuel.
3 Dans la bo&icirc;te de dialogue Fichiers d&eacute;pendants, cliquez sur Oui si vous souhaitez t&eacute;l&eacute;charger les fichiers d&eacute;pendants
associ&eacute;s aux fichiers s&eacute;lectionn&eacute;s ou sur Non si vous ne voulez pas les t&eacute;l&eacute;charger. L'option par d&eacute;faut est de ne pas
t&eacute;l&eacute;charger les fichiers ind&eacute;pendants. Vous pouvez d&eacute;finir cette option en s&eacute;lectionnant Edition &gt; Pr&eacute;f&eacute;rences &gt;
Site.
Remarque : D'une mani&egrave;re g&eacute;n&eacute;rale, il est conseill&eacute; de t&eacute;l&eacute;charger les fichiers d&eacute;pendants lorsque le fichier extrait est un
nouveau fichier, mais c'est inutile si les versions les plus r&eacute;centes des fichiers d&eacute;pendants sont d&eacute;j&agrave; pr&eacute;sentes sur le disque
local.
Une coche de couleur verte appara&icirc;t en regard de l'ic&ocirc;ne du fichier local pour signaler que vous l'avez extrait.
Important : Si vous extrayez le fichier actif, la version ouverte du fichier est &eacute;cras&eacute;e par la nouvelle version extraite.
Archivage des fichiers &agrave; l'aide du panneau Fichiers
1 Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers), s&eacute;lectionnez les fichiers extraits ou s&eacute;lectionnez de nouveaux
fichiers.
Remarque : Vous pouvez s&eacute;lectionner des fichiers dans l'affichage du site local ou distant mais pas dans l'affichage
Serveur d'&eacute;valuation.
2 Proc&eacute;dez de l'une des mani&egrave;res suivantes pour archiver les fichiers :
• Cliquez sur le bouton Archiver dans la barre d'outils du panneau Fichiers.
Derni&egrave;re mise &agrave; jour le 4/5/2011
93
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
• Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e (Macintosh), puis
choisissez Archiver dans le menu contextuel.
3 Cliquez sur Oui si vous souhaitez envoyer les fichiers d&eacute;pendants associ&eacute;s aux fichiers s&eacute;lectionn&eacute;s ou sur Non si
vous ne voulez pas les envoyer. L'option par d&eacute;faut est de ne pas transf&eacute;rer les fichiers ind&eacute;pendants. Vous pouvez
d&eacute;finir cette option en s&eacute;lectionnant Edition &gt; Pr&eacute;f&eacute;rences &gt; Site.
Remarque : Il est en g&eacute;n&eacute;ral conseill&eacute; de transf&eacute;rer les fichiers d&eacute;pendants lorsque vous archivez un nouveau fichier, mais
si les versions les plus r&eacute;centes des fichiers d&eacute;pendants figurent d&eacute;j&agrave; sur le serveur distant, il n'est pas utile de les transf&eacute;rer
&agrave; nouveau.
Un cadenas appara&icirc;t en regard de l'ic&ocirc;ne du fichier local pour indiquer que ce dernier n'est d&eacute;sormais accessible qu'en
lecture seule.
Important : Si vous archivez le fichier actif, il se peut que ce fichier soit automatiquement enregistr&eacute; avant d'&ecirc;tre archiv&eacute;,
selon les options d&eacute;finies dans les pr&eacute;f&eacute;rences.
Archivage d'un fichier ouvert &agrave; partir de la fen&ecirc;tre de document
1 Assurez-vous que le fichier &agrave; archiver ou &agrave; extraire est ouvert dans la fen&ecirc;tre de document.
Remarque : Vous ne pouvez archiver qu'un seul fichier ouvert &agrave; la fois.
2 Effectuez l'une des op&eacute;rations suivantes :
• Choisissez Site &gt; Archiver.
• Cliquez sur l'ic&ocirc;ne Gestion des fichiers dans la barre d'outils de la fen&ecirc;tre du document, puis s&eacute;lectionnez Archiver
dans le menu.
Si le fichier actuel n'est pas associ&eacute; au site actif dans le panneau Fichiers, Dreamweaver tente de d&eacute;terminer &agrave; quel site
d&eacute;fini localement le fichier actuel appartient. Si le fichier actuel appartient &agrave; un autre site que celui qui est actif dans le
panneau Fichiers, Dreamweaver ouvre ce site, puis effectue l'op&eacute;ration d'archivage.
Important : Si vous archivez le fichier actif, il se peut que ce fichier soit automatiquement enregistr&eacute; avant d'&ecirc;tre archiv&eacute;,
selon les options d&eacute;finies dans les pr&eacute;f&eacute;rences.
Annulation de l'extraction d'un fichier
Si vous extrayez un fichier, puis que vous d&eacute;cidez de ne pas le modifier (ou si vous d&eacute;cidez d'&eacute;liminer les modifications
que vous avez apport&eacute;es), vous pouvez annuler l'op&eacute;ration d'extraction. Le fichier reprend alors son &eacute;tat d'origine.
Pour annuler l'extraction d'un fichier, proc&eacute;dez de l'une des fa&ccedil;ons suivantes :
• Ouvrez le fichier dans la fen&ecirc;tre Document, puis choisissez Site &gt; Annuler extraction.
• Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers), cliquez avec le bouton droit (Windows) ou en maintenant la touche
Ctrl enfonc&eacute;e (Macintosh), puis s&eacute;lectionnez Annuler extraction.
La copie locale du fichier passe alors en lecture seule, et toutes les modifications que vous y avez apport&eacute;es sont
perdues.
Utilisation de WebDAV pour archiver et extraire des fichiers
Dreamweaver peut se connecter &agrave; un serveur utilisant WebDAV (Web-based Distributed Authoring and Versioning),
un ensemble d'extensions du protocole HTTP permettant aux utilisateurs au sein d'un groupe de modifier et de g&eacute;rer
des fichiers sur des serveurs Web distants. Pour plus d'informations, voir www.webdav.org.
1 Si vous ne l'avez pas encore fait, d&eacute;finissez un site Dreamweaver indiquant le dossier local que vous utilisez pour
enregistrer vos fichiers de projet.
Derni&egrave;re mise &agrave; jour le 4/5/2011
94
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
2 S&eacute;lectionnez Site &gt; G&eacute;rer les sites puis double-cliquez sur votre site dans la liste.
3 Dans la bo&icirc;te de dialogue Configuration du site, s&eacute;lectionnez la cat&eacute;gorie Serveurs et effectuez l'une des actions
suivantes :
• Cliquez sur le bouton Ajouter nouveau serveur pour ajouter un nouveau serveur.
• S&eacute;lectionnez un serveur existant puis cliquez sur le bouton Modifier serveur existant.
4 Dans l'&eacute;cran Base, s&eacute;lectionnez WebDAV dans le menu Se connecter au moyen de, puis compl&eacute;tez si n&eacute;cessaire les
autres options de l'&eacute;cran Base.
5 Cliquez sur le bouton Avanc&eacute;.
6 S&eacute;lectionnez l'option Activer l'extraction de fichier et entrez les informations suivantes :
• Dans la zone de texte Nom d'extraction, entrez un nom vous identifiant par rapport aux autres membres de
l'&eacute;quipe.
• Indiquez votre adresse &eacute;lectronique dans la zone appropri&eacute;e.
Le nom et l'adresse &eacute;lectronique sont utilis&eacute;s pour l'identification sur le serveur WebDAV et s'affiche dans le panneau
Fichiers pour les contacts.
7 Cliquez sur Enregistrer.
Dreamweaver configure le site pour l'acc&egrave;s WebDAV. Lorsque vous utilisez la commande d'archivage ou d'extraction
sur un fichier du site, le fichier est transf&eacute;r&eacute; au moyen de WebDAV.
Remarque : Il se peut que WebDAV ne parvienne pas &agrave; extraire correctement des fichiers incluant un contenu
dynamique, parce que la m&eacute;thode HTTP GET les rend au moment de leur extraction.
Utilisation de Subversion (svn) pour acqu&eacute;rir et archiver des fichiers
Dreamweaver peut se connecter &agrave; un serveur utilisant Subversion (SVN), un syst&egrave;me de contr&ocirc;le de version qui permet
aux utilisateurs de collaborer &agrave; la modification et la gestion de fichiers sur des serveurs Web distants. Dreamweaver
n'est pas un client SVN int&eacute;gral, mais il permet aux utilisateurs d'obtenir les versions les plus r&eacute;centes de fichiers,
d'apporter des modifications et d'envoyer les fichiers.
Important : Dreamweaver CS5 utilise la biblioth&egrave;que cliente Subversion 1.6.6. Les versions plus r&eacute;centes de la
biblioth&egrave;que cliente Subversion ne sont pas r&eacute;trocompatibles. Notez que si vous mettez &agrave; jour une application cliente
tierce (par exemple TortoiseSVN) en vue d'une utilisation avec une version ult&eacute;rieure de Subversion, l'application
Subversion mise &agrave; jour mettra &agrave; jour les m&eacute;tadonn&eacute;es Subversion locales, et Dreamweaver ne pourra plus communiquer
avec Subversion. Ce probl&egrave;me n'est pas influenc&eacute; par les mises &agrave; jour du serveur Subversion, car celles-ci sont
r&eacute;trocompatibles. Si vous proc&eacute;dez &agrave; une mise &agrave; jour vers une application cliente tierce qui fonctionne avec Subversion en
version 1.7 ou ult&eacute;rieure, vous devrez rechercher des mises &agrave; jour aupr&egrave;s d'Adobe avant de pouvoir r&eacute;utiliser Subversion
avec Dreamweaver. Pour plus d'informations sur ce probl&egrave;me, consultez le site www.adobe.com/go/dw_svn_fr.
Adobe recommande d'utiliser un outil de comparaison de fichiers, d&eacute;velopp&eacute; par une tierce partie, lorsque vous
utilisez des fichiers &agrave; contr&ocirc;le de version SVN. Lorsque vous comparez des fichiers afin de d&eacute;tecter leurs diff&eacute;rences,
vous pouvez voir pr&eacute;cis&eacute;ment quels types de modifications d'autres utilisateurs ont apport&eacute;es. Pour plus
d'informations sur les outils de comparaison de fichiers, utilisez un moteur de recherche Web tel que Google pour
trouver des outils de &laquo; comparaison de fichiers &raquo; ou &laquo; diff &raquo;. Dreamweaver fonctionne avec la plupart des outils tiers.
Vous trouverez un didacticiel vid&eacute;o sur l'utilisation de SVN et Dreamweaver &agrave; l'adresse
www.adobe.com/go/lrvid4049_dw_fr.
Derni&egrave;re mise &agrave; jour le 4/5/2011
95
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
Etablissement d'une connexion SVN
Avant d'utiliser Subversion (SVN) comme syst&egrave;me de contr&ocirc;le des versions avec Dreamweaver, vous devez &eacute;tablir une
connexion &agrave; un serveur SVN. Pour d&eacute;finir une connexion &agrave; un serveur SVN, utilisez la cat&eacute;gorie Contr&ocirc;le de version
de la bo&icirc;te de dialogue D&eacute;finition du site.
Le serveur SVN est un r&eacute;f&eacute;rentiel de fichiers depuis lequel vous (et d'autres utilisateurs) pouvez obtenir et valider des
fichiers. Il est diff&eacute;rent du serveur distant qu'on utilise g&eacute;n&eacute;ralement dans Dreamweaver. En cas d'utilisation de SVN,
le serveur distant reste le serveur &laquo; en direct &raquo; pour vos pages Web. Le serveur SVN sert pour sa part au stockage du
r&eacute;f&eacute;rentiel des fichiers au sujet desquels vous voulez conserver un contr&ocirc;le de version. Le processus habituel consiste
&agrave; obtenir des fichiers depuis le serveur SVN et &agrave; les y valider, puis &agrave; les publier sur votre serveur distant &agrave; partir de
Dreamweaver. La configuration du serveur distant est tout &agrave; fait distincte de celle de SVN.
Avant de pouvoir entamer cette configuration, vous devez disposer d'un acc&egrave;s &agrave; un serveur SVN et &agrave; un r&eacute;f&eacute;rentiel
SVN. Pour plus d'informations sur SVN, consultez le site Web de Subversion &agrave; l'adresse suivante :
http://subversion.apache.org/.
Pour configurer la connexion SVN, proc&eacute;dez comme suit :
1 Choisissez Site &gt; G&eacute;rer les sites, s&eacute;lectionnez le site pour lequel vous voulez configurer le contr&ocirc;le des versions, puis
cliquez sur le bouton Modifier.
Remarque : Si vous n'avez pas encore d&eacute;fini de dossiers locaux et distants pour un site Dreamweaver, vous devrez au
moins configurer un site local avant de pouvoir continuer. Le site distant n'est pas n&eacute;cessaire pour l'instant, mais vous
devrez en d&eacute;finir un pour pouvoir publier vos fichiers sur le Web. Pour plus d'informations, voir &laquo; Configuration d'un
site Dreamweaver &raquo; &agrave; la page 39.
2 Dans la bo&icirc;te de dialogue Configuration du site, s&eacute;lectionnez la cat&eacute;gorie Contr&ocirc;le de version.
3 S&eacute;lectionnez Subversion dans la liste d&eacute;roulante Acc&egrave;s.
4 D&eacute;finissez les options d'acc&egrave;s comme suit :
• S&eacute;lectionnez un protocole dans la liste d&eacute;roulante Protocole. Les protocoles disponibles sont HTTP, HTTPS,
SVN et SVN+SSH.
Remarque : L'emploi du protocole SVN+SSH exige une configuration sp&eacute;ciale. Pour plus d'informations, voir
www.adobe.com/go/learn_dw_svn_ssh_fr.
• Entrez l'adresse du serveur SVN dans la zone de texte Adresse du serveur (g&eacute;n&eacute;ralement sous la forme
nomserveur.domaine.com).
• Entrez le chemin d'acc&egrave;s &agrave; votre r&eacute;f&eacute;rentiel sur le serveur SVN dans la zone R&eacute;f&eacute;rentiel (g&eacute;n&eacute;ralement sous la
forme /svn/votre_r&eacute;pertoire_racine. C'est &agrave; l'administrateur du serveur de nommer le dossier racine pour le
r&eacute;f&eacute;rentiel SVN).
• (Facultatif) Si vous voulez utiliser un port de serveur diff&eacute;rent du port par d&eacute;faut, activez l'option Instance
sp&eacute;cifique puis entrez un num&eacute;ro de port dans la zone de texte.
• Entrez votre nom d'utilisateur et votre mot de passe sur SVN.
5 Cliquez sur Tester pour tester votre connexion, ou sur OK pour fermer la bo&icirc;te de dialogue. Cliquez ensuite sur
Termin&eacute; pour fermer la bo&icirc;te de dialogue G&eacute;rer les sites.
Lorsque la connexion au serveur est &eacute;tablie, votre r&eacute;f&eacute;rentiel SVN peut &ecirc;tre visualis&eacute; dans le panneau Fichiers. Pour le
visualiser, vous pouvez choisir le mode Affichage du r&eacute;f&eacute;rentiel dans la liste d&eacute;roulante Affichage, ou cliquez sur le
bouton Fichiers du r&eacute;f&eacute;rentiel
dans le panneau Fichiers d&eacute;velopp&eacute;.
Derni&egrave;re mise &agrave; jour le 4/5/2011
96
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
Voir aussi
&laquo; Cr&eacute;ation d'un nouveau site &raquo; &agrave; la page 40
&laquo; Utilisation du panneau Fichiers &raquo; &agrave; la page 77
Obtention des versions les plus r&eacute;centes des fichiers
Lorsque vous obtenez la version la plus r&eacute;cente d'un fichier depuis le r&eacute;f&eacute;rentiel SVN, Dreamweaver fusionne le
contenu de ce fichier &agrave; celui de la copie locale correspondante. En d'autres termes, si un autre utilisateur a mis &agrave; jour
le fichier depuis la derni&egrave;re fois o&ugrave; vous l'avez valid&eacute;, ses mises &agrave; jour sont fusionn&eacute;es avec la version locale du fichier
sur votre ordinateur. Si le fichier n'existe pas sur le disque dur local, Dreamweaver se contente de l'obtenir.
Remarque : Lorsque vous obtenez pour la premi&egrave;re fois des fichiers depuis le r&eacute;f&eacute;rentiel, travaillez avec un r&eacute;pertoire local
vide ou un r&eacute;pertoire local qui ne contient pas de fichiers portant les m&ecirc;mes noms que dans le r&eacute;f&eacute;rentiel. Dreamweaver
ne monte pas les fichiers du r&eacute;f&eacute;rentiel sur le lecteur local &agrave; la premi&egrave;re tentative si le lecteur local contient des fichiers
dont le nom est identique &agrave; celui de fichiers dans le r&eacute;f&eacute;rentiel distant.
1 Assurez-vous d'avoir bien d&eacute;fini une connexion SVN.
2 Effectuez l'une des op&eacute;rations suivantes :
• Affichez la version locale de vos fichiers SVN dans le panneau Fichiers en choisissant Affichage local dans la liste
d&eacute;roulante Affichage. Si vous travaillez dans le panneau Fichiers d&eacute;velopp&eacute;, l'affichage local est
automatiquement disponible. Cliquez ensuite avec le bouton droit de la souris (Windows) ou en maintenant la
touche Contr&ocirc;le enfonc&eacute;e (Macintosh) sur le fichier ou le dossier qui vous int&eacute;resse, puis cliquez sur Contr&ocirc;le
de version &gt; Obtenir les versions les plus r&eacute;centes.
• Affichez les fichiers du r&eacute;f&eacute;rentiel SVN en choisissant Affichage du r&eacute;f&eacute;rentiel dans la liste d&eacute;roulante Affichage
du panneau Fichiers ou en cliquant sur le bouton Fichiers du r&eacute;f&eacute;rentiel dans le panneau Fichiers d&eacute;velopp&eacute;.
Cliquez ensuite avec le bouton droit de la souris (Windows) ou en maintenant la touche Contr&ocirc;le enfonc&eacute;e
(Macintosh) sur le fichier ou le dossier qui vous int&eacute;resse, puis cliquez sur Obtenir les versions les plus r&eacute;centes.
Remarque : Vous pouvez &eacute;galement cliquer sur un fichier &agrave; l'aide du bouton droit de la souris puis choisir Extraire dans
le menu contextuel, ou s&eacute;lectionner ce fichier et cliquer sur le bouton Extraire afin d'obtenir sa version la plus r&eacute;cente.
Toutefois, comme SVN ne prend pas en charge les processus d'extraction, cette m&eacute;thode ne permet pas d'extraire le fichier
de la fa&ccedil;on habituelle.
Validation de fichiers
1 Assurez-vous d'avoir bien d&eacute;fini une connexion SVN.
2 Effectuez l'une des op&eacute;rations suivantes :
• Affichez la version locale de vos fichiers SVN dans le panneau Fichiers en choisissant Affichage local dans la liste
d&eacute;roulante Affichage. Si vous travaillez dans le panneau Fichiers d&eacute;velopp&eacute;, l'affichage local est
automatiquement disponible. S&eacute;lectionnez ensuite le fichier &agrave; valider puis cliquez sur Archiver.
• Affichez les fichiers du r&eacute;f&eacute;rentiel SVN en choisissant Affichage du r&eacute;f&eacute;rentiel dans la liste d&eacute;roulante Affichage
du panneau Fichiers ou en cliquant sur le bouton Fichiers du r&eacute;f&eacute;rentiel dans le panneau Fichiers d&eacute;velopp&eacute;.
Cliquez ensuite avec le bouton droit de la souris (Windows) ou en maintenant la touche Contr&ocirc;le enfonc&eacute;e
(Macintosh) sur le fichier que vous voulez valider, puis cliquez sur Valider.
3 Prenez connaissance des actions dans la bo&icirc;te de dialogue Archivage, apportez les &eacute;ventuelles modifications
requises, puis cliquez sur OK.
Vous pouvez modifier des actions en les s&eacute;lectionnant puis en cliquant sur le bouton dans le bas de la bo&icirc;te de
dialogue Archivage. Deux options sont disponibles : Valider et Ignorer.
Derni&egrave;re mise &agrave; jour le 4/5/2011
97
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
Remarque : La pr&eacute;sence d'une coche de couleur verte sur un fichier dans le panneau Fichiers indique qu'il a &eacute;t&eacute; modifi&eacute;
et pas encore valid&eacute; dans le r&eacute;f&eacute;rentiel.
Mise &agrave; jour de l'&eacute;tat de fichiers ou de dossiers dans le r&eacute;f&eacute;rentiel
Vous pouvez mettre &agrave; jour l'&eacute;tat SVN d'un fichier ou d'un dossier. La mise &agrave; jour n'actualise pas l'affichage tout entier.
1 Assurez-vous d'avoir bien d&eacute;fini une connexion SVN.
2 Affichez les fichiers du r&eacute;f&eacute;rentiel SVN en choisissant Affichage du r&eacute;f&eacute;rentiel dans la liste d&eacute;roulante Affichage du
panneau Fichiers ou en cliquant sur le bouton Fichiers du r&eacute;f&eacute;rentiel dans le panneau Fichiers d&eacute;velopp&eacute;.
3 Cliquez ensuite avec le bouton droit de la souris (Windows) ou en maintenant la touche Contr&ocirc;le enfonc&eacute;e
(Macintosh) sur n'importe quel fichier ou dossier du r&eacute;f&eacute;rentiel, puis cliquez sur Mettre &agrave; jour l'&eacute;tat.
Mise &agrave; jour de l'&eacute;tat de fichiers ou de dossiers locaux
Vous pouvez mettre &agrave; jour l'&eacute;tat SVN d'un fichier ou d'un dossier. La mise &agrave; jour n'actualise pas l'affichage tout entier.
1 Assurez-vous d'avoir bien d&eacute;fini une connexion SVN.
2 Affichez la version locale de vos fichiers SVN dans le panneau Fichiers en choisissant Affichage local dans la liste
d&eacute;roulante Affichage. Si vous travaillez dans le panneau Fichiers d&eacute;velopp&eacute;, l'affichage local est automatiquement
disponible.
3 Cliquez ensuite avec le bouton droit de la souris (Windows) ou en maintenant la touche Contr&ocirc;le enfonc&eacute;e
(Macintosh) sur n'importe quel fichier ou dossier du panneau Fichiers, puis cliquez sur Mettre &agrave; jour l'&eacute;tat.
Affichage des versions d'un fichier
1 Assurez-vous d'avoir bien d&eacute;fini une connexion SVN.
2 Effectuez l'une des op&eacute;rations suivantes :
• Affichez la version locale de vos fichiers SVN dans le panneau Fichiers en choisissant Affichage local dans la liste
d&eacute;roulante Affichage. Si vous travaillez dans le panneau Fichiers d&eacute;velopp&eacute;, l'affichage local est
automatiquement disponible. Cliquez ensuite avec le bouton droit de la souris (Windows) ou en maintenant la
touche Contr&ocirc;le enfonc&eacute;e (Macintosh) sur le fichier dont vous voulez afficher les versions, puis choisissez
Contr&ocirc;le de version &gt; Afficher les versions.
• Affichez les fichiers du r&eacute;f&eacute;rentiel SVN en choisissant Affichage du r&eacute;f&eacute;rentiel dans la liste d&eacute;roulante Affichage
du panneau Fichiers ou en cliquant sur le bouton Fichiers du r&eacute;f&eacute;rentiel dans le panneau Fichiers d&eacute;velopp&eacute;.
Cliquez ensuite avec le bouton droit de la souris (Windows) ou en maintenant la touche Contr&ocirc;le enfonc&eacute;e
(Macintosh) sur le fichier dont vous voulez afficher les versions, puis choisissez Afficher les versions.
3 Dans la bo&icirc;te de dialogue Historique des versions, choisissez la ou les versions qui vous int&eacute;ressent, puis effectuez
l'une des actions suivantes :
• Cliquez sur Comparer au site local pour comparer la version s&eacute;lectionn&eacute;e &agrave; la version locale du fichier.
Remarque : Vous devez installer un outil de comparaison de fichiers, provenant d'un &eacute;diteur tiers, avant de
pouvoir comparer les fichiers. Pour plus d'informations sur les outils de comparaison de fichiers, utilisez un moteur
de recherche Web tel que Google pour trouver des outils de &laquo; comparaison de fichiers &raquo; ou &laquo; diff &raquo;. Dreamweaver
fonctionne avec la plupart des outils tiers.
• Cliquez sur Comparer pour comparer deux versions s&eacute;lectionn&eacute;es. Cliquez tout en maintenant la touche CTRL
enfonc&eacute;e pour s&eacute;lectionner deux versions simultan&eacute;ment.
Derni&egrave;re mise &agrave; jour le 4/5/2011
98
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
• Cliquez sur Afficher pour afficher la version s&eacute;lectionn&eacute;e. Cette action n'entra&icirc;ne pas le remplacement de la
copie locale actuelle du fichier concern&eacute;. Vous pouvez enregistrer la version s&eacute;lectionn&eacute;e sur votre disque dur
comme vous le feriez avec n'importe quel autre fichier.
• Cliquez sur Marquer comme actuel pour faire de la version s&eacute;lectionn&eacute;e la version la plus r&eacute;cente du r&eacute;f&eacute;rentiel.
Verrouillage et d&eacute;verrouillage de fichiers
Le verrouillage d'un fichier dans le r&eacute;f&eacute;rentiel SVN permet d'indiquer aux autres utilisateurs que vous &ecirc;tes en train de
travailler dessus. Les autres utilisateurs peuvent toujours modifier le fichier localement, mais ils ne pourront valider le
fichier que quand vous l'aurez d&eacute;verrouill&eacute;. Lorsque vous verrouillez un fichier dans le r&eacute;f&eacute;rentiel, vous verrez que ce
fichier s'accompagne d'une ic&ocirc;ne repr&eacute;sentant un cadenas ouvert. Pour les autres utilisateurs, l'ic&ocirc;ne repr&eacute;sente un
cadenas ferm&eacute;.
1 Assurez-vous d'avoir bien d&eacute;fini une connexion SVN.
2 Effectuez l'une des op&eacute;rations suivantes :
• Affichez les fichiers du r&eacute;f&eacute;rentiel SVN en choisissant Affichage du r&eacute;f&eacute;rentiel dans la liste d&eacute;roulante Affichage
du panneau Fichiers ou en cliquant sur le bouton Fichiers du r&eacute;f&eacute;rentiel dans le panneau Fichiers d&eacute;velopp&eacute;.
Cliquez ensuite avec le bouton droit de la souris (Windows) ou en maintenant la touche Contr&ocirc;le enfonc&eacute;e
(Macintosh) sur le fichier qui vous int&eacute;resse, puis choisissez Verrouiller ou D&eacute;verrouiller.
• Affichez la version locale de vos fichiers SVN dans le panneau Fichiers en choisissant Affichage local dans la liste
d&eacute;roulante Affichage. Si vous travaillez dans le panneau Fichiers d&eacute;velopp&eacute;, l'affichage local est
automatiquement disponible. Cliquez ensuite avec le bouton droit de la souris (Windows) ou en maintenant la
touche Contr&ocirc;le enfonc&eacute;e (Macintosh) sur le fichier qui vous int&eacute;resse, puis choisissez Verrouiller ou
D&eacute;verrouiller.
Ajout d'un nouveau fichier au r&eacute;f&eacute;rentiel
La pr&eacute;sence d'un symbole &laquo; plus &raquo; bleu sur un fichier dans le panneau Fichiers indique que ce fichier n'existe pas encore
dans le r&eacute;f&eacute;rentiel SVN.
1 Assurez-vous d'avoir bien d&eacute;fini une connexion SVN.
2 Dans le panneau Fichiers, s&eacute;lectionnez le fichier &agrave; ajouter au r&eacute;f&eacute;rentiel, puis cliquez sur le bouton Archiver.
3 Assurez-vous que le fichier est s&eacute;lectionn&eacute; pour une validation dans la bo&icirc;te de dialogue Validation, puis cliquez
sur OK.
D&eacute;placement, copie, suppression ou r&eacute;tablissement de fichiers
• Pour d&eacute;placer un fichier, faites-le glisser vers le dossier de destination de votre site local.
Lorsque vous d&eacute;placez un fichier, Dreamweaver le marque, &agrave; son nouvel emplacement, au moyen d'un signe
Ajouter avec historique, et le marque &agrave; l'aide d'un signe Supprimer &agrave; son ancien emplacement. Lorsque vous
envoyez ces fichiers, celui qui se trouve &agrave; l'ancien emplacement dispara&icirc;t.
• Pour copier un fichier, s&eacute;lectionnez-le, copiez-le (Edition &gt; Copier) puis collez-le (Edition &gt; Coller) &agrave; son nouvel
emplacement.
Lorsque vous copiez et collez un fichier, Dreamweaver le marque, &agrave; son nouvel emplacement, au moyen d'un signe
Ajouter avec historique.
• Pour supprimer un fichier, s&eacute;lectionner-le puis appuyez sur supprimer.
Derni&egrave;re mise &agrave; jour le 4/5/2011
99
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
Dreamweaver vous permet de supprimer uniquement la version locale du fichier, ou &agrave; la fois la version locale et
celle sur le serveur SVN. Si vous d&eacute;cidez de ne supprimer que la version locale, le fichier sur le serveur SVN n'est
pas touch&eacute;. Si vous d&eacute;cidez de supprimer &eacute;galement la version sur le serveur SVN, la version locale est marqu&eacute;e &agrave;
l'aide d'un signe Supprimer, et vous devez envoyer le fichier pour que la suppression soit effectu&eacute;e.
• Pour r&eacute;tablir un fichier copi&eacute; ou d&eacute;plac&eacute; &agrave; son emplacement d'origine, cliquez sur le fichier &agrave; l'aide du bouton droit
puis choisissez Contr&ocirc;le de version &gt; R&eacute;tablir.
R&eacute;solution des conflits entre fichiers
Si votre fichier est en conflit avec un autre fichier sur le serveur, vous pouvez le modifier puis le marquer comme &eacute;tant
r&eacute;solu. Par exemple, si vous tentez d'archiver un fichier qui est en conflit avec les modifications apport&eacute;es par un autre
utilisateur, SVN ne vous permettra pas de valider ce fichier. Vous pouvez obtenir la version la plus r&eacute;cente du fichier
depuis le r&eacute;f&eacute;rentiel, apporter manuellement des modifications &agrave; votre copie de travail, puis marquer votre fichier
comme &eacute;tant r&eacute;solu de fa&ccedil;on &agrave; pouvoir le valider.
1 Assurez-vous d'avoir bien d&eacute;fini une connexion SVN.
2 Affichez la version locale de vos fichiers SVN dans le panneau Fichiers en choisissant Affichage local dans la liste
d&eacute;roulante Affichage. Si vous travaillez dans le panneau Fichiers d&eacute;velopp&eacute;, l'affichage local est automatiquement
disponible.
3 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contr&ocirc;le enfonc&eacute;e (Macintosh)
sur le fichier dont vous voulez r&eacute;soudre le conflit, puis choisissez Contr&ocirc;le de version &gt; Marquer comme r&eacute;solu.
Travail hors ligne
Il peut s'av&eacute;rer utile de travailler hors ligne, de mani&egrave;re &agrave; &eacute;viter tout acc&egrave;s au r&eacute;f&eacute;rentiel pendant d'autres activit&eacute;s de
transfert de fichiers. Dreamweaver se connecte au r&eacute;f&eacute;rentiel SVN d&egrave;s que vous lancez une activit&eacute; qui exige une
connexion (Obtenir les versions les plus r&eacute;centes, Valider, etc.).
1 Assurez-vous d'avoir bien d&eacute;fini une connexion SVN.
2 Affichez la version locale de vos fichiers SVN dans le panneau Fichiers en choisissant Affichage local dans la liste
d&eacute;roulante Affichage. Si vous travaillez dans le panneau Fichiers d&eacute;velopp&eacute;, l'affichage local est automatiquement
disponible.
3 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contr&ocirc;le enfonc&eacute;e (Macintosh)
sur n'importe quel fichier ou dossier du panneau Fichiers, puis choisissez Contr&ocirc;le de version &gt; Travailler hors
ligne.
Nettoyage d'un site SVN local
Cette commande permet de supprimer les verrous des fichiers, de mani&egrave;re &agrave; reprendre des activit&eacute;s non termin&eacute;es.
Utilisez cette commande pour supprimer d'anciens verrous si vous recevez des messages d'erreur vous informant que
la copie de travail est verrouill&eacute;e.
1 Assurez-vous d'avoir bien d&eacute;fini une connexion SVN.
2 Affichez la version locale de vos fichiers SVN dans le panneau Fichiers en choisissant Affichage local dans la liste
d&eacute;roulante Affichage. Si vous travaillez dans le panneau Fichiers d&eacute;velopp&eacute;, l'affichage local est automatiquement
disponible.
3 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contr&ocirc;le enfonc&eacute;e (Macintosh)
sur le fichier &agrave; nettoyer, puis choisissez Contr&ocirc;le de version &gt; Nettoyer.
Derni&egrave;re mise &agrave; jour le 4/5/2011
100
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
A propos du d&eacute;placement de fichiers et de dossiers dans des sites contr&ocirc;l&eacute;s par Subversion
Lorsque vous d&eacute;placez les versions locales de fichiers ou de dossiers dans un site contr&ocirc;l&eacute; par Subversion, vous risquez
de cr&eacute;er des probl&egrave;mes &agrave; d'autres utilisateurs qui pourraient se synchroniser avec le r&eacute;f&eacute;rentiel SVN. Par exemple, si
vous d&eacute;placez un fichier localement et ne le validez pas dans le r&eacute;f&eacute;rentiel pendant quelques heures, il se peut qu'un
autre utilisateur tente d'en obtenir la version la plus r&eacute;cente depuis son ancien emplacement. Veillez donc &agrave; toujours
valider les fichiers sur le serveur SVN juste apr&egrave;s les avoir d&eacute;plac&eacute;s localement.
Les fichiers et les dossiers demeurent sur le serveur jusqu'&agrave; ce que vous les supprimiez manuellement. Ainsi, m&ecirc;me si
vous d&eacute;placez un fichier dans un dossier local diff&eacute;rent et que vous le validez, son ancienne version reste &agrave;
l'emplacement pr&eacute;c&eacute;dent sur le serveur. Pour &eacute;viter toute confusion, supprimez les anciennes copies des fichiers et
dossiers que vous avez d&eacute;plac&eacute;s.
Lorsque vous d&eacute;placez un fichier localement et que vous le validez de nouveau sur le serveur SVN, l'historique des
versions du fichier est perdu.
Synchronisation de fichiers
Synchronisation des fichiers entre le site local et le site distant
Apr&egrave;s avoir cr&eacute;&eacute; des fichiers sur votre site local et votre site distant, il vous est possible de synchroniser les fichiers entre
les deux sites.
Remarque : Si votre site distant est un serveur FTP (et non un serveur en r&eacute;seau), la synchronisation de vos fichiers
s'effectuera en FTP.
Avant de synchroniser vos sites, vous pouvez v&eacute;rifier les fichiers &agrave; placer, &agrave; acqu&eacute;rir, &agrave; supprimer ou &agrave; ignorer. Par
ailleurs, une fois la synchronisation effectu&eacute;e, Dreamweaver vous indique les fichiers qui ont &eacute;t&eacute; mis &agrave; jour.
Voir aussi
&laquo; Gestion des transferts de fichiers &raquo; &agrave; la page 90
&laquo; Archivage et extraction de fichiers dans un dossier distant &raquo; &agrave; la page 92
&laquo; Acquisition de fichiers depuis un serveur distant &raquo; &agrave; la page 87
&laquo; Placement de fichiers sur un serveur distant &raquo; &agrave; la page 88
&laquo; Comparaison de fichiers pour en chercher les diff&eacute;rences &raquo; &agrave; la page 102
Identification des fichiers qui sont plus r&eacute;cents sur le site local ou le site distant, sans
effectuer de synchronisation
❖ Proc&eacute;dez de l’une des fa&ccedil;ons suivantes dans le panneau Fichiers :
• Cliquez sur le menu Options dans le coin sup&eacute;rieur droit puis s&eacute;lectionnez Edition &gt; S&eacute;lectionner locaux plus
r&eacute;cents ou Edition &gt; S&eacute;lectionner distants plus r&eacute;cents.
• Dans le panneau Fichiers, cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e
(Macintosh), puis choisissez S&eacute;lectionner &gt; S&eacute;lectionner locaux plus r&eacute;cents ou S&eacute;lectionner &gt; S&eacute;lectionner distants
plus r&eacute;cents.
Derni&egrave;re mise &agrave; jour le 4/5/2011
101
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
Affichage d'informations de synchronisation d&eacute;taill&eacute;es pour un fichier pr&eacute;cis
❖ Dans le panneau Fichiers, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfonc&eacute;e (Macintosh) sur le fichier au sujet duquel vous voulez obtenir des informations, puis s&eacute;lectionnez Afficher
les informations de synchronisation.
Remarque : Pour que cette fonctionnalit&eacute; soit disponible, l'option Conserver les informations de synchronisation doit &ecirc;tre
activ&eacute;e dans la cat&eacute;gorie Distant de la bo&icirc;te de dialogue D&eacute;finition du site.
Synchronisation de vos fichiers
1 Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers), s&eacute;lectionnez un site dans le menu (dans lequel le site, le serveur ou
le disque dur en cours d'utilisation s'affiche).
2 (Facultatif) S&eacute;lectionnez des fichiers ou des dossiers pr&eacute;cis, ou passez &agrave; l'&eacute;tape suivante pour synchroniser le site
entier.
3 Cliquez sur le menu Options dans le coin sup&eacute;rieur droit du panneau Fichiers, puis choisissez Site &gt; Synchroniser.
Vous pouvez &eacute;galement cliquer sur le bouton Synchroniser dans le haut du panneau Fichiers pour synchroniser les
fichiers.
4 Dans le menu Synchroniser, r&eacute;alisez une des op&eacute;rations suivantes :
• Pour proc&eacute;der &agrave; la synchronisation du site entier, s&eacute;lectionnez Tout le site nom du site.
• Pour ne synchroniser que les fichiers s&eacute;lectionn&eacute;s, s&eacute;lectionnez Fichiers locaux s&eacute;lectionn&eacute;s seulement (ou Fichiers
distants s&eacute;lectionn&eacute;s seulement si vous avez effectu&eacute; votre s&eacute;lection depuis l'affichage Site distant du panneau
Fichiers).
5 Cliquez sur la direction d&eacute;sir&eacute;e pour le transfert :
Placer les fichiers plus r&eacute;cents sur h&ocirc;te distant T&eacute;l&eacute;charge tous les fichiers locaux qui n'existent pas sur le serveur
distant ou qui ont &eacute;t&eacute; modifi&eacute;s depuis le dernier t&eacute;l&eacute;chargement.
Obtenir les fichiers plus r&eacute;cents depuis l'h&ocirc;te distant T&eacute;l&eacute;charge tous les fichiers distants qui n'existent pas localement
ou qui ont &eacute;t&eacute; modifi&eacute;s depuis le dernier t&eacute;l&eacute;chargement.
Placer et obtenir les fichiers plus r&eacute;cents Transf&egrave;re, selon le cas, les versions les plus r&eacute;centes de tous les fichiers sur le
site local ou sur le site distant.
6 Indiquez si les fichiers qui sont pr&eacute;sents sur le site de destination mais n'ont pas d'&eacute;quivalent sur le site d'origine
doivent &ecirc;tre supprim&eacute;s. Cette option n'est pas disponible si vous s&eacute;lectionnez les options d'acquisition et de
placement dans le menu de direction.
Si vous avez s&eacute;lectionn&eacute; Placer les fichiers plus r&eacute;cents sur h&ocirc;te distant et que vous activez l'option d'effacement, tous
les fichiers du site distant qui n'ont pas d'&eacute;quivalent sur le site local sont supprim&eacute;s. Si vous avez s&eacute;lectionn&eacute; Obtenir
les fichiers plus r&eacute;cents depuis l'h&ocirc;te distant et que vous activez l'option d'effacement, tous les fichiers du site local qui
n'ont pas d'&eacute;quivalent sur le site distant sont supprim&eacute;s.
7 Cliquez sur Aper&ccedil;u.
Remarque : Avant de synchroniser les fichiers, vous devez proc&eacute;der &agrave; un aper&ccedil;u des actions que Dreamweaver va devoir
ex&eacute;cuter pour cette t&acirc;che.
Si la version la plus r&eacute;cente de chacun des fichiers s&eacute;lectionn&eacute;s figure d&eacute;j&agrave; aux deux endroits et que rien n'a besoin
d'&ecirc;tre supprim&eacute;, un message d'avertissement vous signale qu'aucune synchronisation n'est n&eacute;cessaire. Dans le cas
contraire, la bo&icirc;te de dialogue Synchroniser s'affiche et vous permet de modifier les actions (placer, acqu&eacute;rir,
supprimer et ignorer) pour ces fichiers avant d'ex&eacute;cuter la synchronisation.
8 V&eacute;rifiez les diff&eacute;rentes actions &agrave; effectuer.
Derni&egrave;re mise &agrave; jour le 4/5/2011
102
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
9 Pour modifier l'action pour un fichier particulier, s&eacute;lectionnez-le puis cliquez sur l'une des ic&ocirc;nes d'action situ&eacute;es
en bas de la fen&ecirc;tre d'aper&ccedil;u.
Comparer L'action Comparer ne fonctionne que si vous avez install&eacute; et sp&eacute;cifi&eacute; un outil de comparaison de fichiers
dans Dreamweaver. Si l'ic&ocirc;ne Action est en gris&eacute;, l'action correspondante n'est pas disponible.
Marquer les fichiers comme synchronis&eacute;s Cette option vous permet d'indiquer que le ou les fichiers s&eacute;lectionn&eacute;s sont
d&eacute;j&agrave; synchronis&eacute;s.
10 Cliquez sur OK pour synchroniser les fichiers. Vous pouvez afficher ou enregistrer les d&eacute;tails de la synchronisation
dans un fichier local.
Comparaison de fichiers pour en chercher les
diff&eacute;rences
Comparaison des fichiers locaux et distants
Dreamweaver peut utiliser des outils de comparaison de fichiers (&eacute;galement appel&eacute;s &laquo; outils diff &raquo;) afin de comparer
le code des versions locale et distante du m&ecirc;me fichier, deux fichiers distants diff&eacute;rents ou deux fichiers locaux
diff&eacute;rents. La comparaison des versions locale et distante est utile si vous travaillez localement sur un fichier et que
vous suspectez que sa copie sur le serveur a &eacute;t&eacute; modifi&eacute;e. Sans quitter Dreamweaver, vous pouvez afficher et fusionner
les modifications distantes dans votre version locale avant de placer le fichier sur le serveur.
La comparaison de deux fichiers locaux ou de deux fichiers distants est &eacute;galement utile si vous conservez des versions
pr&eacute;c&eacute;dentes, renomm&eacute;es de vos fichiers. En cas d'oubli des modifications apport&eacute;es &agrave; un fichier d'une version
pr&eacute;c&eacute;dente, effectuez une comparaison rapide.
Avant de commencer, vous devez installer un outil de comparaison de fichiers tiers sur votre syst&egrave;me. Pour plus
d'informations sur les outils de comparaison de fichiers, utilisez un moteur de recherche Web tel que Google pour
trouver des outils de &laquo; comparaison de fichiers &raquo; ou &laquo; diff &raquo;. Dreamweaver fonctionne avec la plupart des outils tiers.
D&eacute;finition d'un outil de comparaison dans Dreamweaver
1 Installez l'outil de comparaison de fichiers sur le m&ecirc;me syst&egrave;me que Dreamweaver.
2 Dans Dreamweaver, ouvrez la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences en s&eacute;lectionnant Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou
Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh), puis s&eacute;lectionnez la cat&eacute;gorie Comparaison de fichiers.
3 Effectuez l'une des op&eacute;rations suivantes :
• Sous Windows, cliquez sur le bouton Parcourir et s&eacute;lectionnez une application qui compare les fichiers.
• Sur Macintosh, cliquez sur le bouton Parcourir et s&eacute;lectionnez l'outil ou le script qui lance l'outil de comparaison
de fichiers dans la ligne de commande (pas l'outil de comparaison de fichiers).
Les outils ou les scripts de lancement se trouvent g&eacute;n&eacute;ralement dans le dossier /usr/bin de votre Macintosh. Par
exemple, si vous souhaitez utiliser FileMerge, recherchez le dossier /usr/bin et s&eacute;lectionnez opendiff, l'outil qui lance
FileMerge.
Le tableau suivant r&eacute;pertorie les outils de comparaison de fichiers courants pour le Macintosh ainsi que l'emplacement
de leurs outils ou de leurs scripts de lancement sur votre disque dur :
Derni&egrave;re mise &agrave; jour le 4/5/2011
103
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
Si vous utilisez
S&eacute;lectionnez le fichier suivant
FileMerge
/usr/bin/opendiff (ou /Developer/usr/bin/opendiff)
BBEdit
/usr/bin/bbdiff
TextWrangler
/usr/bin/twdiff
Remarque : Le dossier usr est g&eacute;n&eacute;ralement masqu&eacute; dans le Finder. Cependant, vous pouvez y acc&eacute;der en utilisant le
bouton Parcourir dans Dreamweaver.
Remarque : Les r&eacute;sultats effectivement affich&eacute;s d&eacute;pendent de l'outil diff utilis&eacute;. Consultez le guide d'utilisation de votre
outil pour comprendre comment interpr&eacute;ter ces r&eacute;sultats.
Comparaison de deux fichiers locaux
Vous pouvez comparer deux fichiers situ&eacute;s &agrave; n'importe quel endroit sur votre ordinateur.
1 Dans le panneau Fichiers, appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant avec
la souris sur les deux fichiers pour les s&eacute;lectionner.
Pour choisir des fichiers se trouvant &agrave; l'ext&eacute;rieur de votre site d&eacute;fini, acc&eacute;dez &agrave; votre disque local dans le menu gauche
contextuel du panneau Fichiers puis s&eacute;lectionnez-les.
2 Cliquez avec le bouton droit de la souris sur l'un des fichiers s&eacute;lectionn&eacute;s puis choisissez Compare Local Files
(Comparer les fichiers locaux) dans le menu contextuel.
Remarque : Si votre souris n'est dot&eacute;e que d'un seul bouton, appuyez sur la touche Ctrl tout en cliquant avec la souris sur
l'un des fichiers s&eacute;lectionn&eacute;s.
L'outil de comparaison de fichiers d&eacute;marre et compare les deux fichiers.
Comparaison de deux fichiers distants
Vous pouvez comparer deux fichiers situ&eacute;s sur votre serveur distant. Vous devez d&eacute;finir un site Dreamweaver avec des
param&egrave;tres distants avant de pouvoir effectuer cette t&acirc;che.
1 Dans le panneau Fichiers, affichez les fichiers sur le serveur distant en choisissant Affichage distant dans le menu
d&eacute;roulant situ&eacute; &agrave; droite.
2 Appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant avec la souris sur les deux
fichiers pour les s&eacute;lectionner
3 Cliquez avec le bouton droit de la souris sur l'un des fichiers s&eacute;lectionn&eacute;s puis choisissez Comparer les fichiers
distants dans le menu contextuel.
Remarque : Si votre souris n'est dot&eacute;e que d'un seul bouton, appuyez sur la touche Ctrl tout en cliquant avec la souris sur
l'un des fichiers s&eacute;lectionn&eacute;s.
L'outil de comparaison de fichiers d&eacute;marre et compare les deux fichiers.
Comparaison entre un fichier local et un fichier distant
Vous pouvez effectuer une comparaison entre un fichier local et un fichier se trouvant sur votre serveur distant. Pour
cela, vous devez d'abord d&eacute;finir un site Dreamweaver avec des param&egrave;tres distants.
❖ Dans le panneau Fichiers, cliquez avec le bouton droit de la souris sur un fichier local et choisissez Comparer avec
distants dans le menu contextuel.
Remarque : Si votre souris n'est dot&eacute;e que d'un seul bouton, appuyez sur la touche Ctrl tout en cliquant avec la souris sur
le fichier local.
Derni&egrave;re mise &agrave; jour le 4/5/2011
104
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
L'outil de comparaison de fichiers d&eacute;marre et compare les deux fichiers.
Comparaison entre un fichier distant et un fichier local
Vous pouvez effectuer une comparaison entre un fichier distant et un fichier local. Vous devez d&eacute;finir un site
Dreamweaver avec des param&egrave;tres distants avant d'effectuer cette t&acirc;che.
1 Dans le panneau Fichiers, affichez les fichiers sur le serveur distant en choisissant Affichage distant dans le menu
d&eacute;roulant situ&eacute; &agrave; droite.
2 Cliquez avec le bouton droit de la souris sur un fichier dans le panneau et choisissez Comparer avec fichier local
dans le menu contextuel.
Remarque : Si votre souris n'est dot&eacute;e que d'un seul bouton, appuyez sur la touche Ctrl tout en cliquant avec la souris sur
le fichier.
Comparaison entre un fichier ouvert et un fichier distant
Vous pouvez effectuer une comparaison entre un fichier ouvert dans Dreamweaver et son homologue sur le serveur
distant.
❖ Dans la fen&ecirc;tre de document, choisissez Fichier &gt; Comparer avec distants.
L'outil de comparaison de fichiers d&eacute;marre et compare les deux fichiers.
Vous pouvez &eacute;galement cliquer avec le bouton droit de la souris sur l'onglet de document situ&eacute; en haut de la fen&ecirc;tre
de document et choisir Comparer avec distants dans le menu contextuel.
Comparaison avant le placement de fichiers
Si vous modifiez un fichier localement et essayez ensuite de le t&eacute;l&eacute;charger vers votre serveur distant, Dreamweaver
vous avertit si la version distante du fichier a &eacute;t&eacute; chang&eacute;e. Vous avez la possibilit&eacute; de comparer les deux fichiers avant
de t&eacute;l&eacute;charger le fichier et d'&eacute;craser la version distante.
Avant de commencer, vous devez installer un outil de comparaison de fichiers sur votre syst&egrave;me et le d&eacute;finir dans
Dreamweaver.
1 Une fois que vous avez modifi&eacute; un fichier dans un site Dreamweaver, placez le fichier (Site &gt; Placer) sur votre site
distant.
Si la version distante du fichier a &eacute;t&eacute; modifi&eacute;e, vous recevrez une notification avec la possibilit&eacute; de visualiser les
diff&eacute;rences.
2 Pour visualiser les diff&eacute;rences, cliquez sur le bouton Comparer.
L'outil de comparaison de fichiers d&eacute;marre et compare les deux fichiers.
Si vous n'avez pas sp&eacute;cifi&eacute; d'outil de comparaison de fichiers, un message vous invite &agrave; le faire.
3 Une fois que vous avez revu ou fusionn&eacute; les changements dans l'outil, vous pouvez passer &agrave; l'op&eacute;ration de placement
ou l'annuler.
Comparaison de fichiers lors de la synchronisation
Vous pouvez comparer les versions locales de vos fichiers avec les versions distantes lorsque vous synchronisez les
fichiers de votre site avec Dreamweaver.
Derni&egrave;re mise &agrave; jour le 4/5/2011
105
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
Avant de commencer, vous devez installer un outil de comparaison de fichiers sur votre syst&egrave;me et le d&eacute;finir dans
Dreamweaver.
1 Cliquez avec le bouton droit de la souris &agrave; n'importe quel endroit du panneau Fichiers et s&eacute;lectionnez Synchroniser
dans le menu contextuel.
2 Compl&eacute;tez les options de la bo&icirc;te de dialogue Synchroniser les fichier, puis cliquez sur Aper&ccedil;u.
Une fois que vous avez cliqu&eacute; sur Aper&ccedil;u, vous obtenez une liste des fichiers s&eacute;lectionn&eacute;s et des actions qui seront
effectu&eacute;es pendant la synchronisation.
3 Dans la liste, s&eacute;lectionnez les fichiers que vous souhaitez comparer et cliquez sur le bouton Comparer (l'ic&ocirc;ne avec
les deux petites pages).
Remarque : Le fichier doit &ecirc;tre bas&eacute; sur du texte (fichier HTML ou ColdFusion).
Dreamweaver lance l'outil de comparaison qui compare les versions locale et distante de chaque fichier s&eacute;lectionn&eacute;.
Voir aussi
&laquo; Synchronisation de fichiers &raquo; &agrave; la page 100
Restauration de fichiers (utilisateurs de Contribute)
Restauration de fichiers (utilisateurs de Contribute)
Dreamweaver enregistre automatiquement plusieurs versions d'un document lorsque la compatibilit&eacute; Adobe
Contribute est activ&eacute;e.
Remarque : Contribute doit &ecirc;tre install&eacute; sur le m&ecirc;me ordinateur que Dreamweaver.
La restauration des fichiers doit &ecirc;tre activ&eacute;e au niveau des param&egrave;tres administratifs de Contribute. Pour plus
d'informations, voir Administration de Contribute.
1 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e (Macintosh) sur un
fichier dans le panneau Fichiers.
2 S&eacute;lectionnez Restaurer la page.
S'il existe une version pr&eacute;c&eacute;dente de la page &agrave; restaurer, la bo&icirc;te de dialogue Restauration s'affiche.
3 S&eacute;lectionnez la version de la page &agrave; restaurer et cliquez sur Restaurer.
Voir aussi
&laquo; Pr&eacute;paration d'un site &agrave; utiliser avec Contribute &raquo; &agrave; la page 58
&laquo; Suppression, d&eacute;placement ou modification du nom d'un fichier distant sur un site Contribute &raquo; &agrave; la page 60
Derni&egrave;re mise &agrave; jour le 4/5/2011
106
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
Voilage de fichiers et de dossiers dans votre site
A propos du voilage de site
Le voilage vous permet d'exclure des fichiers et dossiers du site de certaines op&eacute;rations (acquisition et placement, par
exemple). Vous pouvez &eacute;galement voiler tous les fichiers d'un type pr&eacute;cis (JPEG, FLV, XML, etc.) pour les op&eacute;rations
du site. Comme Dreamweaver conserve en m&eacute;moire tous les param&egrave;tres d&eacute;finis pour chaque site, vous n'avez pas &agrave;
s&eacute;lectionner le type de fichier voulu chaque fois que vous travaillez sur un site.
Par exemple, si vous travaillez sur un site de grande taille et que vous ne voulez pas envoyer vos fichiers multim&eacute;dias
tous les jours, vous pouvez utiliser la fonction de voilage pour voiler votre dossier multim&eacute;dia. Dreamweaver exclura
les fichiers de ce dossier de toutes les op&eacute;rations que vous effectuez sur le site.
Vous pouvez voiler des fichiers et des dossiers sur le site distant ou local. Le voilage exclut les fichiers et dossiers voil&eacute;s
des op&eacute;rations suivantes :
• R&eacute;alisation d'op&eacute;rations de placement, d'acquisition, d'archivage et d'extraction
• G&eacute;n&eacute;ration de rapports
• Recherche des fichiers locaux et distants les plus r&eacute;cents
• R&eacute;alisation d'op&eacute;rations portant sur le site entier, telles que la v&eacute;rification et la modification des liens
• Synchronisation
• Utilisation du contenu du panneau Actifs
• Mise &agrave; jour des mod&egrave;les et des biblioth&egrave;ques
Remarque : Vous pouvez toujours effectuer une op&eacute;ration sur un dossier ou un fichier voil&eacute; pr&eacute;cis en le s&eacute;lectionnant
dans le panneau Fichiers, puis en effectuant l'op&eacute;ration voulue. Toute op&eacute;ration effectu&eacute;e directement sur un fichier
ou un dossier annule le voilage.
Remarque : Dreamweaver exclut les mod&egrave;les et les &eacute;l&eacute;ments de biblioth&egrave;que voil&eacute;s lors des op&eacute;rations d'acquisition et
de placement de fichiers seulement. Dreamweaver n'exclut aucun de ces &eacute;l&eacute;ments lors des op&eacute;rations par lots, car cela
pourrait les d&eacute;synchroniser par rapport &agrave; leurs instances.
Activation et d&eacute;sactivation du voilage d'un site
Le voilage vous permet de d&eacute;finir les dossiers, les fichiers et les types de fichiers du site que vous souhaitez exclure de
certaines op&eacute;rations (acquisition et placement, par exemple). Cette option est activ&eacute;e par d&eacute;faut. Vous pouvez le
d&eacute;sactiver d&eacute;finitivement ou provisoirement afin d'effectuer une op&eacute;ration sur tous les fichiers, y compris les fichiers
voil&eacute;s. Lorsque vous d&eacute;sactivez le voilage sur un site, cela supprime tous les voiles des fichiers voil&eacute;s. Lorsque vous le
r&eacute;activez, tous les fichiers qui &eacute;taient pr&eacute;c&eacute;demment voil&eacute;s retrouvent cet &eacute;tat.
Remarque : Vous pouvez &eacute;galement utiliser l'option Supprimer tous les voiles pour supprimer le voilage de tous les
fichiers, mais cela ne d&eacute;sactive pas le voilage. De plus, cette option ne vous permet pas de r&eacute;tablir automatiquement le
voilage de tous les dossiers et fichiers qui &eacute;taient auparavant voil&eacute;s ; il vous faut ensuite red&eacute;finir manuellement le voilage
de chaque dossier, fichier et type de fichier concern&eacute;.
1 S&eacute;lectionnez un fichier ou un dossier dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers).
2 Cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e (Macintosh), puis proc&eacute;dez de
l'une des fa&ccedil;ons suivantes :
• S&eacute;lectionnez Voilage &gt; (d&eacute;s&eacute;lectionnez l'option pour la d&eacute;sactiver).
Derni&egrave;re mise &agrave; jour le 4/5/2011
107
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
• S&eacute;lectionnez Voilage &gt; Param&egrave;tres pour ouvrir la cat&eacute;gorie Voilage de la bo&icirc;te de dialogue Configuration du site.
S&eacute;lectionnez ou d&eacute;s&eacute;lectionnez, puis activez ou d&eacute;sactivez l'option Voiler les fichiers se terminant avec, selon que
vous souhaitez ou non activer le voilage de certains types de fichier. Saisissez ou supprimez les suffixes de fichier
dans la zone de texte afin d'indiquer le type de fichier pour lequel activer ou d&eacute;sactiver le voilage.
Voilage et suppression du voilage pour les fichiers et dossiers d'un site
Il est possible de voiler des fichiers et des dossiers sp&eacute;cifiques, mais pas tous les fichiers et dossiers existants ni un site
entier. Il est toutefois possible de voiler plusieurs fichiers et dossiers simultan&eacute;ment.
1 Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers), s&eacute;lectionnez un site pour lequel la fonction de voilage est activ&eacute;e.
2 S&eacute;lectionnez les dossiers ou fichiers auxquels appliquer un voile ou le supprimer.
3 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e (Macintosh), puis
choisissez Voilage &gt; Voiler ou Voilage &gt; Supprimer le voile dans le menu contextuel.
Une ligne rouge est pr&eacute;sente ou non sur l'ic&ocirc;ne du fichier ou du dossier, pour indiquer qu'il est voil&eacute; ou d&eacute;voil&eacute;.
Remarque : Vous pouvez toujours effectuer une op&eacute;ration sur un fichier ou un dossier voil&eacute; pr&eacute;cis en le s&eacute;lectionnant dans
le panneau Fichiers, puis en effectuant l'op&eacute;ration voulue. Toute op&eacute;ration effectu&eacute;e directement sur un fichier ou un
dossier annule le voilage.
Voilage et suppression du voilage de certains types de fichier
Vous pouvez indiquer des types de fichier &agrave; voiler afin que Dreamweaver voile tous les fichiers se terminant d'une
certaine mani&egrave;re. Ainsi pouvez-vous, par exemple, voiler tous les fichiers se terminant par l'extension .txt. Les types de
fichier indiqu&eacute;s ne doivent pas n&eacute;cessairement correspondre &agrave; des extensions de fichier ; il peut s'agir de n'importe
quel &eacute;l&eacute;ment apparaissant &agrave; la fin d'un nom de fichier.
Voilage de certains types de fichier au sein d'un site
1 Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers), s&eacute;lectionnez un site pour lequel la fonction de voilage est activ&eacute;e.
2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e (Macintosh), puis
s&eacute;lectionnez Voilage &gt; Param&egrave;tres.
3 Activez l'option Voiler les fichiers se terminant avec, entrez les types de fichier &agrave; voiler dans la zone de saisie, puis
cliquez sur OK.
Vous pouvez saisir, par exemple, .jpg afin de voiler tous les fichiers dont le nom se termine par .jpg dans le site.
Pour saisir plusieurs types de fichier, s&eacute;parez chaque type par un espace ; n'utilisez ni virgule ni point-virgule.
Dans le panneau Fichiers, une ligne rouge appara&icirc;t sur les fichiers concern&eacute;s pour indiquer qu'ils sont voil&eacute;s.
Certains logiciels cr&eacute;ent des fichiers de sauvegarde se terminant par un suffixe donn&eacute;, tel que .bak. Vous pouvez voiler
ces fichiers.
Remarque : Vous pouvez toujours effectuer une op&eacute;ration sur un fichier ou un dossier voil&eacute; pr&eacute;cis en le s&eacute;lectionnant dans
le panneau Fichiers, puis en effectuant l'op&eacute;ration voulue. Toute op&eacute;ration effectu&eacute;e directement sur un fichier ou un
dossier annule le voilage.
D&eacute;sactivation du voilage de certains types de fichier au sein d'un site
1 Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers), s&eacute;lectionnez un site pour lequel la fonction de voilage est activ&eacute;e.
2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e (Macintosh), puis
s&eacute;lectionnez Voilage &gt; Param&egrave;tres.
Derni&egrave;re mise &agrave; jour le 4/5/2011
108
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
3 Dans la bo&icirc;te de dialogue D&eacute;finition du site, onglet Avanc&eacute;, utilisez l’une des m&eacute;thodes suivantes :
• D&eacute;sactivez l'option Voiler les fichiers se terminant avec pour supprimer le voile de tous les types de fichier
r&eacute;pertori&eacute;s dans la zone de texte.
• Dans la zone de texte, supprimez certains types de fichier pour ne supprimer le voile que sur ces types de fichier.
4 Cliquez sur OK.
Les lignes rouges disparaissent des fichiers concern&eacute;s pour indiquer qu'ils ne sont plus voil&eacute;s.
Suppression du voilage de tous les fichiers et dossiers
Vous pouvez supprimer le voile de tous les fichiers et dossiers d'un site, et ce en une seule op&eacute;ration. Comme il est
impossible d'annuler ce type d'op&eacute;ration, vous ne pourrez pas r&eacute;tablir le voile de tous les &eacute;l&eacute;ments qui &eacute;taient
auparavant voil&eacute;s. Vous devrez revoiler les &eacute;l&eacute;ments un par un.
Si vous souhaitez supprimer provisoirement le voile de tous les dossiers et fichiers et les revoiler par la suite, d&eacute;sactivez
le voilage sur le site.
1 Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers), s&eacute;lectionnez un site pour lequel la fonction de voilage est activ&eacute;e.
2 S&eacute;lectionnez un fichier ou un dossier quelconque du site.
3 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e (Macintosh), puis
s&eacute;lectionnez Voilage&gt; Supprimer tous les voiles.
Remarque : Cette op&eacute;ration d&eacute;sactive &eacute;galement l'option Voiler les fichiers se terminant avec de la cat&eacute;gorie Voilage de
la bo&icirc;te de dialogue D&eacute;finition du site.
Les lignes rouges sur les ic&ocirc;nes des dossiers et des fichiers disparaissent pour indiquer que tous les fichiers et dossiers
du site ne sont plus voil&eacute;s.
Stockage des informations sur les fichiers dans des
Design Notes
A propos des Design Notes
Les Design Notes sont des notes cr&eacute;&eacute;es pour un fichier donn&eacute;. Les Design Notes sont associ&eacute;es au fichier qu'elles
d&eacute;crivent, mais stock&eacute;es dans un autre fichier. Le panneau Fichiers vous permet de voir les fichiers auxquels sont
jointes des Design Notes, car une ic&ocirc;ne sp&eacute;cifique s'affiche dans la colonne Notes.
Les Design Notes vous permettent de conserver des informations suppl&eacute;mentaires sur les documents, telles que des
commentaires sur l'&eacute;tat des fichiers ou le nom des fichiers source des images. Par exemple, si vous copiez un document
d'un site dans un autre, vous pouvez ajouter &agrave; ce dernier des Design Notes contenant un commentaire expliquant que
le document original se trouve dans le dossier de l'autre site.
Les Design Notes permettent &eacute;galement de conserver des informations confidentielles, qu'il est impossible de laisser
dans un document pour des raisons de s&eacute;curit&eacute;, par exemple des notes sur la fa&ccedil;on dont un devis a &eacute;t&eacute; calcul&eacute;, dont
une configuration a &eacute;t&eacute; &eacute;labor&eacute;e ou encore sur les facteurs de marketing qui ont influenc&eacute; une d&eacute;cision de production.
Derni&egrave;re mise &agrave; jour le 4/5/2011
109
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
Si vous ouvrez un fichier dans Adobe&reg; Fireworks&reg; ou Flash, puis l'exportez dans un autre format, Fireworks ou Flash
enregistre automatiquement le nom du fichier source d'origine dans un fichier de Design Notes. Ainsi, si vous ouvrez
le fichier maMaison.png dans Fireworks, puis l'exportez au format GIF en lui attribuant le nom maMaison.gif,
Fireworks cr&eacute;e un fichier Design Notes du nom de maMaison.gif.mno. Ce fichier Design Notes contient le nom du
fichier d'origine, sous la forme d'une URL file: absolue. De ce fait, les Design Notes du fichier maMaison.gif
pourraient contenir la ligne suivante :
fw_source=&quot;file:///Mydisk/sites/assets/orig/myhouse.png&quot;
Au m&ecirc;me titre, les Design Notes d'un fichier Flash pourraient contenir la ligne suivante :
fl_source=&quot;file:///Mydisk/sites/assets/orig/myhouse.fla&quot;
Remarque : Pour pouvoir partager des Design Notes, les utilisateurs doivent d&eacute;finir le m&ecirc;me chemin d'acc&egrave;s pour la
racine du site (par exemple, sites/assets/orig).
Lorsque vous importez l'image dans Dreamweaver, le fichier de Design Notes est automatiquement copi&eacute; sur le site,
en m&ecirc;me temps que l'image. Si vous s&eacute;lectionnez cette image dans Dreamweaver et d&eacute;cidez de la modifier &agrave; l'aide de
Fireworks, ce dernier ouvre directement le fichier d'origine pour vous permettre de le modifier.
Voir aussi
&laquo; Lancement d'un &eacute;diteur externe pour des fichiers multim&eacute;dias &raquo; &agrave; la page 268
Activation et d&eacute;sactivation des Design Notes pour un site
Les Design Notes sont associ&eacute;es &agrave; un fichier mais sont conserv&eacute;es dans un fichier s&eacute;par&eacute;. Les Design Notes vous
permettent de conserver des informations suppl&eacute;mentaires sur les documents, telles que des commentaires sur l'&eacute;tat
des fichiers ou le nom des fichiers source des images.
L'activation et la d&eacute;sactivation des Design Notes pour un site donn&eacute; s'effectuent depuis la cat&eacute;gorie Design Notes de la
bo&icirc;te de dialogue D&eacute;finition du site. Lorsque vous activez les Design Notes, vous pouvez &eacute;galement d&eacute;cider de les
partager avec d'autres utilisateurs.
1 Choisissez Site &gt; G&eacute;rer les sites.
2 Dans la bo&icirc;te de dialogue G&eacute;rer les sites, s&eacute;lectionnez un site puis cliquez sur Modifier.
3 Dans la bo&icirc;te de dialogue Configuration du site, d&eacute;veloppez Param&egrave;tres avanc&eacute;s, puis s&eacute;lectionnez la cat&eacute;gorie
Design Notes.
4 S&eacute;lectionnez G&eacute;rer Design Notes pour activer les Design Notes (d&eacute;s&eacute;lectionnez cette option pour les d&eacute;sactiver).
5 Si vous souhaitez supprimer tous les fichiers de Design Notes locaux associ&eacute;s au site, cliquez sur Nettoyer puis sur
Oui. Si vous voulez supprimer des fichiers Design Notes distants, vous devez le faire manuellement.
Remarque : La commande Nettoyer Design Notes ne supprime que les fichiers MNO (Design Notes). Elle ne supprime
pas le dossier _notes ni le fichier dwsync.xml qui s'y trouve. Dreamweaver emploie le fichier dwsync.xml pour g&eacute;rer les
informations relatives &agrave; la synchronisation du site.
6 Activez l'option Activer la fonction T&eacute;l&eacute;charger les Design Notes pour les partager afin de t&eacute;l&eacute;charger les Design
Notes associ&eacute;es au site en m&ecirc;me temps que les autres documents, puis cliquez sur OK.
• Si vous activez cette option, vous pouvez partager les Design Notes avec les autres membres de votre &eacute;quipe.
Lorsque vous placez ou acqu&eacute;rez un fichier, Dreamweaver place ou acquiert automatiquement le fichier de Design
Notes associ&eacute;.
Derni&egrave;re mise &agrave; jour le 4/5/2011
110
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
• Si vous n'activez pas cette option, Dreamweaver conserve les Design Notes localement, mais ne les t&eacute;l&eacute;charge pas
avec les fichiers. Si vous travaillez seul sur le site, vous pouvez d&eacute;sactiver cette option afin d'am&eacute;liorer les
performances. Les Design Notes ne seront pas transf&eacute;r&eacute;es sur le site distant lorsque vous archiverez ou placerez vos
fichiers. En outre, il vous sera toujours possible d'ajouter et de modifier les Design Notes pour votre site local.
Association de Design Notes &agrave; un fichier
Vous pouvez cr&eacute;er un fichier de Design Notes pour chaque document ou mod&egrave;le de votre site. Vous pouvez &eacute;galement
cr&eacute;er des Design Notes pour des applets, des contr&ocirc;les ActiveX, des images, du contenu Flash, des objets Shockwave
ainsi que des champs d'image figurant dans vos documents.
Remarque : Si vous ajoutez des Design Notes &agrave; un fichier mod&egrave;le, les documents que vous cr&eacute;ez &agrave; partir du mod&egrave;le
n'h&eacute;ritent pas des Design Notes.
1 Effectuez l'une des op&eacute;rations suivantes :
• Ouvrez le fichier dans la fen&ecirc;tre du document, puis s&eacute;lectionnez Fichier &gt; Design Notes.
• Dans le panneau Fichiers, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfonc&eacute;e (Macintosh) sur le fichier, puis s&eacute;lectionnez Design Notes.
Remarque : Si le fichier se trouve sur un site distant, vous devez d'abord l'extraire ou l'acqu&eacute;rir, puis le s&eacute;lectionner dans
le dossier local.
2 Dans le menu Etat de l'onglet Informations &eacute;l&eacute;mentaires, s&eacute;lectionnez un &eacute;tat pour le document.
3 Cliquez sur l'ic&ocirc;ne de date (au-dessus de la zone de texte Notes) pour ins&eacute;rer la date du jour dans les notes.
4 Entrez des commentaires dans la zone Notes.
5 Activez l'option Afficher &agrave; l'ouverture du fichier afin que le fichier de Design Notes apparaisse &agrave; chaque ouverture
du fichier.
6 Dans l'onglet Toutes les infos, cliquez sur le bouton Plus (+) afin d'ajouter une paire cl&eacute;/valeur ; s&eacute;lectionnez une
paire, puis cliquez sur le bouton Moins (–) pour la supprimer.
Par exemple, vous pouvez cr&eacute;er une cl&eacute; Auteur (dans la zone Nom), puis lui attribuer la valeur Heidi (dans la zone
Valeur).
7 Cliquez sur OK pour enregistrer les notes.
Dreamweaver enregistre les notes au m&ecirc;me endroit que le fichier en cours, dans un dossier portant le nom _notes. Le
fichier porte le nom complet du document de base, suivi de l'extension .mno. Par exemple, si le nom de fichier du
document est index.html, le fichier de Design Notes associ&eacute; s'appellera index.html.mno.
Voir aussi
&laquo; Acquisition et placement de fichiers depuis ou vers votre serveur &raquo; &agrave; la page 86
&laquo; Archivage et extraction de fichiers dans un dossier distant &raquo; &agrave; la page 92
Utilisation des Design Notes
Apr&egrave;s avoir associ&eacute; des Design Notes &agrave; un fichier, vous pouvez ouvrir le fichier Design Notes, modifier son &eacute;tat ou le
supprimer.
Derni&egrave;re mise &agrave; jour le 4/5/2011
111
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
Ouverture des Design Notes associ&eacute;es &agrave; un fichier
❖ Utilisez l’une des m&eacute;thodes suivantes pour ouvrir les Design Notes :
• Ouvrez le fichier dans la fen&ecirc;tre du document, puis s&eacute;lectionnez Fichier &gt; Design Notes.
• Dans le panneau Fichiers, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfonc&eacute;e (Macintosh) sur le fichier, puis s&eacute;lectionnez Design Notes.
• Dans la colonne Notes du panneau Fichiers, double-cliquez sur l'ic&ocirc;ne jaune Design Notes.
Remarque : Pour afficher les ic&ocirc;nes jaunes des Design Notes, choisissez Site &gt; G&eacute;rer les sites &gt; [nom de votre site] &gt;
Modifier &gt; Param&egrave;tres avanc&eacute;s &gt; Colonnes mode Fichier. S&eacute;lectionnez Notes dans la liste du panneau et choisissez
l'option Afficher. Lorsque vous cliquez sur le bouton D&eacute;velopper de la barre d'outils Fichiers pour afficher &agrave; la fois le site
local et le site distant, votre site local contient une colonne Notes qui affiche une ic&ocirc;ne de note jaune pour tout fichier
contenant une Design Note.
Attribution d'un &eacute;tat de Design Notes personnalis&eacute;
1 Ouvrez les Design Notes du fichier ou de l'objet concern&eacute; (voir la proc&eacute;dure ci-dessus).
2 Cliquez sur l'onglet Toutes les infos.
3 Cliquez sur le bouton Plus (+).
4 Dans le champ Nom, tapez &eacute;tat.
5 Dans le champ Valeur, tapez le nom du nouvel &eacute;tat.
S'il existe d&eacute;j&agrave; une valeur d'&eacute;tat, elle est remplac&eacute;e par la nouvelle.
6 Cliquez sur l'onglet Infos de base et remarquez que la nouvelle valeur de l'&eacute;tat appara&icirc;t dans le menu contextuel Etat.
Remarque : Vous ne pouvez avoir qu'une valeur personnalis&eacute;e &agrave; la fois dans le menu d'&eacute;tat. Si vous suivez cette proc&eacute;dure
une nouvelle fois, Dreamweaver remplace la valeur de l'&eacute;tat saisie la premi&egrave;re fois par la nouvelle valeur.
Suppression de votre site des Design Notes non associ&eacute;es
1 Choisissez Site &gt; G&eacute;rer les sites.
2 S&eacute;lectionnez le site et cliquez sur Modifier.
3 Dans la bo&icirc;te de dialogue D&eacute;finition du site, s&eacute;lectionnez la cat&eacute;gorie Design Notes dans la liste de gauche.
4 Cliquez sur le bouton Nettoyer.
Dreamweaver vous invite alors &agrave; v&eacute;rifier que tous les fichiers de Design Notes qui ne sont plus associ&eacute;s &agrave; un fichier
dans le site doivent bien &ecirc;tre supprim&eacute;s.
Si vous utilisez Dreamweaver pour supprimer un fichier auquel est associ&eacute; un fichier de Design Notes, Dreamweaver
supprime &eacute;galement le fichier de Design Notes. En g&eacute;n&eacute;ral, il ne peut donc exister de fichiers de Design Notes
orphelins que si vous supprimez ou renommez un fichier &agrave; l'ext&eacute;rieur de Dreamweaver.
Remarque : Si vous d&eacute;sactivez l'option G&eacute;rer Design Notes avant de cliquer sur Nettoyer, Dreamweaver supprime tous
les fichiers de Design Notes du site.
Derni&egrave;re mise &agrave; jour le 4/5/2011
112
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
Test de votre site
Instructions pour tester les sites
Avant de t&eacute;l&eacute;charger le site sur un serveur, et de le d&eacute;clarer pr&ecirc;t &agrave; &ecirc;tre diffus&eacute;, il convient de le tester localement (en
fait, il est judicieux de tester et de r&eacute;soudre les probl&egrave;mes de votre site fr&eacute;quemment au cours de son &eacute;laboration, afin
de traiter les probl&egrave;mes avant qu'ils ne s'aggravent et de les emp&ecirc;cher de se r&eacute;p&eacute;ter).
Vous devez vous assurer que vos pages ont l'apparence et le fonctionnement attendus dans les navigateurs cibl&eacute;s, qu'il
n'y a pas de liens rompus et que les pages ne sont pas trop longues &agrave; t&eacute;l&eacute;charger. Vous pouvez &eacute;galement tester
l'ensemble de votre site et y r&eacute;gler les probl&egrave;mes &eacute;ventuels en effectuant un rapport de site.
Les conseils suivants vous aideront &agrave; garantir aux visiteurs de votre site une exp&eacute;rience positive :
1. Assurez-vous que les pages fonctionnent dans les navigateurs vis&eacute;s.
Vos pages doivent &ecirc;tre lisibles et fonctionnelles dans les navigateurs qui ne prennent pas en charge les styles, les calques,
les plug-ins ou les &eacute;l&eacute;ments JavaScript. Pour les pages qui ne s'affichent pas dans des navigateurs anciens, songez &agrave;
utiliser le comportement V&eacute;rifier le navigateur pour rediriger automatiquement les visiteurs vers une autre page.
2. Affichez vos pages dans diff&eacute;rents navigateurs et sur diff&eacute;rentes plates-formes.
Cela vous donnera la possibilit&eacute; de constater les diff&eacute;rences de pr&eacute;sentation, de couleur, de taille de police et de format
de fen&ecirc;tre par d&eacute;faut, autant d'&eacute;l&eacute;ments qu'il est impossible de pr&eacute;voir lors de la v&eacute;rification dans le navigateur cible.
3. V&eacute;rifiez que le site ne contient pas de liens bris&eacute;s (r&eacute;parez-les s'il en contient).
Les autres sites &eacute;tant parfois modifi&eacute;s et r&eacute;organis&eacute;s, il peut arriver que certaines pages vers lesquelles vos liens pointent
soient d&eacute;plac&eacute;es ou supprim&eacute;es. Vous pouvez ex&eacute;cuter un rapport de v&eacute;rification des liens pour les tester.
4. Contr&ocirc;lez la taille de vos pages et leur dur&eacute;e de t&eacute;l&eacute;chargement.
Pour les pages constitu&eacute;es d'un grand tableau, n'oubliez pas que, sous certains navigateurs, les visiteurs ne voient rien
tant que le tableau n'est pas enti&egrave;rement charg&eacute;. Envisagez de fragmenter les grands tableaux ; si c'est impossible,
envisagez de placer du contenu, par exemple un message de bienvenue ou une banni&egrave;re publicitaire, en dehors du
tableau, en haut de la page, de mani&egrave;re &agrave; ce que les utilisateurs puissent au moins voir ce contenu pendant le
chargement du tableau
5. Effectuez quelques rapports sur le site pour tester et d&eacute;panner le site entier.
Vous pouvez rechercher sur le site entier d'&eacute;ventuels probl&egrave;mes, tels que des documents sans nom, des balises vides ou
des balises imbriqu&eacute;es redondantes.
6. Validez votre code pour d&eacute;tecter toute erreur de balise ou de syntaxe.
7. Continuez &agrave; mettre le site &agrave; jour et &agrave; en assurer la maintenance apr&egrave;s sa publication.
La publication d'un site peut &ecirc;tre accomplie de diff&eacute;rentes mani&egrave;res et constitue un processus continu. La d&eacute;finition et
l'impl&eacute;mentation d'un syst&egrave;me de contr&ocirc;le de version constituent une partie importante du processus, que ce soit avec
les outils int&eacute;gr&eacute;s &agrave; Dreamweaver ou par le biais d'une application de contr&ocirc;le de version externe.
8. Consultez les forums de discussion.
Utilisez les forums de discussion Dreamweaver du site Web Adobe, &agrave; l'adresse
www.adobe.com/go/dreamweaver_newsgroup_fr.
Derni&egrave;re mise &agrave; jour le 4/5/2011
113
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
Vous y trouverez de nombreuses et pr&eacute;cieuses informations sur les diff&eacute;rents navigateurs, plates-formes, etc. Vous
pouvez &eacute;galement discuter de questions techniques et &eacute;changer des informations utiles avec d'autres utilisateurs de
Dreamweaver.
Vous trouverez un didacticiel consacr&eacute; au d&eacute;pannage des probl&egrave;mes de publication &agrave; l'adresse
www.adobe.com/go/vid0164_fr.
Voir aussi
&laquo; Correction de liens rompus &raquo; &agrave; la page 297
&laquo; Test de liens dans Dreamweaver &raquo; &agrave; la page 291
&laquo; Application du comportement V&eacute;rifier le navigateur &raquo; &agrave; la page 364
&laquo; Validation des documents XML &raquo; &agrave; la page 338
&laquo; V&eacute;rification de la compatibilit&eacute; du navigateur &raquo; &agrave; la page 337
Didacticiel consacr&eacute; au d&eacute;pannage des probl&egrave;mes de publication
Utilisation des rapports pour tester votre site
Vous pouvez ex&eacute;cuter des rapports du site sur les attributs de flux de travaux ou HTML. Vous pouvez &eacute;galement
utiliser la commande Rapports pour v&eacute;rifier les liens de votre site.
Les rapports sur le d&eacute;roulement du travail peuvent am&eacute;liorer la collaboration entre les membres d'une &eacute;quipe Web.
Ces rapports permettent de savoir qui a extrait un fichier, quels fichiers sont associ&eacute;s &agrave; des Design Notes et quels
fichiers ont &eacute;t&eacute; modifi&eacute;s r&eacute;cemment. Vous pouvez d&eacute;finir davantage les rapports des Design Notes en sp&eacute;cifiant des
param&egrave;tres nom/valeur.
Remarque : Vous devez avoir d&eacute;fini une connexion &agrave; un site distant pour ex&eacute;cuter des rapports sur le d&eacute;roulement du
travail.
Les rapports HTML vous permettent de compiler et de g&eacute;n&eacute;rer des rapports pour plusieurs attributs HTML. Vous
pouvez contr&ocirc;ler les balises de polices imbriqu&eacute;es combinables, les textes secondaires manquants, les balises
imbriqu&eacute;es redondantes, les balises vides amovibles et les documents sans nom.
Apr&egrave;s avoir ex&eacute;cut&eacute; un rapport, vous pouvez l'enregistrer au format XML, puis l'importer dans un mod&egrave;le, une base
de donn&eacute;es ou une feuille de calcul et l'imprimer, ou encore l'afficher sur un site Web.
Remarque : Vous pouvez &eacute;galement ajouter diff&eacute;rents types de rapport &agrave; Dreamweaver via le site Web d'Adobe
Dreamweaver Exchange.
Voir aussi
&laquo; Rapports dans Dreamweaver &raquo; &agrave; la page 21
&laquo; Test de liens dans Dreamweaver &raquo; &agrave; la page 291
&laquo; Ajout et gestion d'extensions dans Dreamweaver &raquo; &agrave; la page 37
Ex&eacute;cution de rapports afin de tester un site
1 Choisissez Site &gt; Rapports.
2 S&eacute;lectionnez l'objet du rapport dans le menu Rapport sur, puis d&eacute;finissez l'un des types de rapport &agrave; ex&eacute;cuter
(d&eacute;roulement du travail ou HTML).
Derni&egrave;re mise &agrave; jour le 4/5/2011
114
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
Vous ne pouvez pas ex&eacute;cuter un rapport sur Fichiers s&eacute;lectionn&eacute;s dans le site si vous n'avez pas auparavant s&eacute;lectionn&eacute;
des fichiers dans le panneau Fichiers.
3 Si vous avez s&eacute;lectionn&eacute; un rapport de d&eacute;roulement de travail, cliquez sur Param&egrave;tres de rapport. Dans le cas
contraire, ignorez cette &eacute;tape.
Remarque : Si vous avez s&eacute;lectionn&eacute; plusieurs rapports de d&eacute;roulement de travail, vous devez cliquer sur le bouton
Param&egrave;tres de rapport pour chaque rapport. S&eacute;lectionnez un rapport, cliquez sur Param&egrave;tres de rapport et entrez les
param&egrave;tres ; puis recommencez pour les autres rapports de d&eacute;roulement de travail.
Extrait par Cr&eacute;e un rapport qui dresse la liste de tous les documents extraits par un membre sp&eacute;cifique de l'&eacute;quipe.
Entrez le nom d'un membre de l'&eacute;quipe et cliquez sur OK pour revenir &agrave; la bo&icirc;te de dialogue Rapports.
Design Notes Cr&eacute;e un rapport qui dresse la liste de l'ensemble des Design Notes pour les documents s&eacute;lectionn&eacute;s ou
le site. Entrez une ou plusieurs paires nom/valeur, puis s&eacute;lectionnez des valeurs de comparaison dans les menus
contextuels correspondants. Cliquez sur OK pour revenir &agrave; la bo&icirc;te de dialogue Rapports.
Modifi&eacute;s r&eacute;cemment Cr&eacute;e un rapport qui dresse la liste des fichiers qui ont &eacute;t&eacute; modifi&eacute;s durant une p&eacute;riode donn&eacute;e.
Entrez les plages de dates et l'emplacement des fichiers &agrave; afficher.
4 Si vous avez s&eacute;lectionn&eacute; un rapport HTML, choisissez l'un des rapports suivants :
Balises de polices imbriqu&eacute;es combinables Cr&eacute;e un rapport qui dresse la liste de toutes les balises de polices
imbriqu&eacute;es pouvant &ecirc;tre combin&eacute;es pour nettoyer le code.
Par exemple, &lt;font color=&quot;#FF0000&quot;&gt;&lt;font size=&quot;4&quot;&gt;STOP!&lt;/font&gt;&lt;/font&gt; est inclus dans le rapport.
Texte secondaire manquant Cr&eacute;e un rapport qui dresse la liste de toutes les balises img qui ne poss&egrave;dent pas de texte
secondaire (sec/alt).
Le texte secondaire appara&icirc;t &agrave; la place des images dans les navigateurs qui affichent seulement du texte ou configur&eacute;s
pour t&eacute;l&eacute;charger les images manuellement. Les lecteurs d'&eacute;cran lisent le texte secondaire et certains navigateurs
affichent du texte secondaire lorsque l'utilisateur passe la souris sur l'image.
Balises redondantes imbriqu&eacute;es Cr&eacute;e un rapport r&eacute;pertoriant les balises &agrave; nettoyer.
Par exemple, &lt;i&gt; En Espagne, &lt;i&gt; il pleut&lt;/i&gt; principalement dans les plaines&lt;/i&gt; est inclus dans le
rapport.
Balises vides amovibles Cr&eacute;e un rapport qui dresse la liste de toutes les balises vides pouvant &ecirc;tre supprim&eacute;es afin de
nettoyer le code HTML.
Par exemple, vous pouvez avoir supprim&eacute; un &eacute;l&eacute;ment ou une image en Affichage de code, mais laiss&eacute; les balises
s'appliquant &agrave; cet &eacute;l&eacute;ment.
Documents sans nom Cr&eacute;e un rapport qui dresse la liste de tous les documents sans titre trouv&eacute;s conform&eacute;ment aux
param&egrave;tres s&eacute;lectionn&eacute;s. Dreamweaver &eacute;tablit un rapport sur tous les documents qui contiennent des titres par d&eacute;faut,
des balises de titre multiples ou des balises de titre manquantes.
5 Cliquez sur Ex&eacute;cuter pour cr&eacute;er le rapport.
Selon le type de rapport &agrave; ex&eacute;cuter, vous pouvez &ecirc;tre invit&eacute; &agrave; enregistrer votre fichier, &agrave; d&eacute;finir votre site ou &agrave;
s&eacute;lectionner un dossier (si vous ne l'avez pas d&eacute;j&agrave; fait).
Une liste de r&eacute;sultats appara&icirc;t dans le panneau Rapports du site (dans le groupe de panneaux R&eacute;sultats).
Utilisation et enregistrement d'un rapport
1 Ex&eacute;cuter un rapport (voir la proc&eacute;dure pr&eacute;c&eacute;dente).
Derni&egrave;re mise &agrave; jour le 4/5/2011
115
UTILISATION DE DREAMWEAVER
Cr&eacute;ation et gestion de fichiers
2 Dans le panneau Rapports du site, effectuez l'une des op&eacute;rations suivantes pour consulter le rapport :
• Cliquez sur l'en-t&ecirc;te de la colonne en fonction de laquelle vous souhaitez effectuer le tri des r&eacute;sultats.
Vous pouvez trier les r&eacute;sultats par nom de fichier, num&eacute;ro de ligne ou description. Vous pouvez &eacute;galement ex&eacute;cuter
plusieurs rapports et garder les diff&eacute;rents rapports ouverts.
• S&eacute;lectionnez une ligne quelconque du rapport, puis cliquez sur le bouton Plus d'infos situ&eacute; &agrave; gauche du panneau
Rapports du site pour obtenir la description du probl&egrave;me.
• Double-cliquez sur une ligne quelconque du rapport pour afficher le code correspondant dans la fen&ecirc;tre de
document.
Remarque : Si vous vous trouvez en mode Cr&eacute;ation, Dreamweaver passe &agrave; un affichage &agrave; deux volets et indique le
probl&egrave;me identifi&eacute; directement dans le code.
3 Cliquez sur Enregistrer le rapport.
Lorsque vous enregistrez un rapport, vous pouvez l'importer dans un fichier mod&egrave;le existant. Vous pouvez alors soit
importer le fichier dans une base de donn&eacute;es ou un tableur puis l'imprimer, soit l'afficher sur un site Web.
Apr&egrave;s avoir ex&eacute;cut&eacute; les rapports HTML, utilisez la commande Nettoyer HTML pour corriger les erreurs HTML
signal&eacute;es.
Derni&egrave;re mise &agrave; jour le 4/5/2011
116
Chapitre 5 : Gestion des actifs et des
biblioth&egrave;ques
A propos des actifs et des biblioth&egrave;ques
A propos des actifs
Vous pouvez utiliser Adobe&reg; Dreamweaver&reg; CS5 pour assurer le suivi des actifs inclus dans un site, notamment les
images, les animations, les couleurs, les scripts et les liens, et pour en afficher un aper&ccedil;u. Vous pouvez &eacute;galement faire
glisser un actif directement pour l'ins&eacute;rer dans une page de votre document actuel.
Vous pouvez obtenir des actifs &agrave; partir de diff&eacute;rentes sources. Par exemple, vous pouvez cr&eacute;er des actifs dans une
application, telle que Adobe&reg; Fireworks&reg; ou Adobe&reg; Flash&reg;, les recevoir d'un coll&egrave;gue, les copier &agrave; partir d'un CD-ROM
de graphiques ou encore les copier &agrave; partir d'un site Web d'images.
Dreamweaver permet &eacute;galement d'acc&eacute;der &agrave; deux types d'actifs sp&eacute;ciaux : les biblioth&egrave;ques et les mod&egrave;les. Tous deux
sont des actifs li&eacute;s : lorsque vous modifiez un &eacute;l&eacute;ment de biblioth&egrave;que ou un mod&egrave;le, Dreamweaver met &agrave; jour tous les
documents qui utilisent ces &eacute;l&eacute;ments. Les &eacute;l&eacute;ments de biblioth&egrave;que repr&eacute;sentent g&eacute;n&eacute;ralement de petits actifs de
conception, tels que le logo ou les informations de copyright d'un site. Pour d&eacute;finir la conception de zones plus larges,
utilisez plut&ocirc;t un mod&egrave;le.
Voir aussi
&laquo; A propos des mod&egrave;les Dreamweaver &raquo; &agrave; la page 403
A propos des &eacute;l&eacute;ments de biblioth&egrave;que
Une biblioth&egrave;que est un fichier Dreamweaver sp&eacute;cial regroupant un ensemble d'actifs individuels ou de copies d'actifs
que vous pouvez placer dans vos pages Web. Les actifs pr&eacute;sents dans une biblioth&egrave;que portent le nom d'&eacute;l&eacute;ments de
biblioth&egrave;que. Les &eacute;l&eacute;ments pouvant &ecirc;tre stock&eacute;s dans une biblioth&egrave;que sont notamment les images, les tableaux, les
sons et les fichiers cr&eacute;&eacute;s &agrave; l'aide d'Adobe Flash. Vous pouvez mettre &agrave; jour automatiquement toutes les pages qui
utilisent un &eacute;l&eacute;ment de biblioth&egrave;que chaque fois que vous modifiez cet &eacute;l&eacute;ment.
Par exemple, supposons que vous construisiez un site de grande taille pour une soci&eacute;t&eacute; qui souhaite qu'un slogan figure
sur chaque page. Vous pouvez cr&eacute;er un &eacute;l&eacute;ment de biblioth&egrave;que qui contient le slogan et utiliser cet &eacute;l&eacute;ment dans
chaque page. Si le slogan est modifi&eacute;, vous pouvez modifier l'&eacute;l&eacute;ment de biblioth&egrave;que et mettre &agrave; jour
automatiquement chaque page qui l'utilise.
Dreamweaver stocke les &eacute;l&eacute;ments de biblioth&egrave;que dans un dossier nomm&eacute; Library, au sein du dossier racine local de
chaque site. Chaque site poss&egrave;de sa propre biblioth&egrave;que.
Vous pouvez cr&eacute;er un &eacute;l&eacute;ment de biblioth&egrave;que &agrave; partir de n'importe quel &eacute;l&eacute;ment dans la section body d'un document,
notamment du texte, des tableaux, des formulaires, des applets Java, des plug-ins, des &eacute;l&eacute;ments ActiveX, des barres de
navigation et des images.
Pour les &eacute;l&eacute;ments li&eacute;s tels que les images, la biblioth&egrave;que enregistre uniquement une r&eacute;f&eacute;rence &agrave; l'&eacute;l&eacute;ment. Le fichier
d'origine doit rester &agrave; l'emplacement sp&eacute;cifi&eacute; pour que l'&eacute;l&eacute;ment de la biblioth&egrave;que fonctionne correctement.
Derni&egrave;re mise &agrave; jour le 4/5/2011
117
UTILISATION DE DREAMWEAVER
Gestion des actifs et des biblioth&egrave;ques
Il peut toutefois &ecirc;tre utile de stocker une image dans un &eacute;l&eacute;ment de biblioth&egrave;que. Par exemple, vous pouvez stocker
une balise img compl&egrave;te dans un &eacute;l&eacute;ment de biblioth&egrave;que, afin de pouvoir modifier facilement le texte alt d'une
image, ou m&ecirc;me son attribut src, dans l'ensemble du site. N'utilisez pas cette technique pour modifier les attributs de
largeur et de hauteur (width et height) d'une image, sauf si vous utilisez &eacute;galement un &eacute;diteur d'image pour changer
la taille r&eacute;elle de l'image.
Remarque : Si l'&eacute;l&eacute;ment de biblioth&egrave;que contient des liens, ils ne fonctionneront pas n&eacute;cessairement sur le nouveau site.
En outre, les images d'un &eacute;l&eacute;ment de biblioth&egrave;que ne sont pas copi&eacute;es vers le nouveau site.
Lorsque vous utilisez un &eacute;l&eacute;ment de biblioth&egrave;que, Dreamweaver ins&egrave;re un lien vers cet &eacute;l&eacute;ment dans la page Web au
lieu d'ins&eacute;rer l'&eacute;l&eacute;ment lui-m&ecirc;me. Cela signifie que Dreamweaver ins&egrave;re une copie du code source HTML pour cet
&eacute;l&eacute;ment dans le document et ajoute un commentaire HTML contenant une r&eacute;f&eacute;rence &agrave; l'&eacute;l&eacute;ment externe d'origine. Il
s'agit d'une r&eacute;f&eacute;rence externe qui rend la mise &agrave; jour automatique possible.
Lorsque vous cr&eacute;ez un &eacute;l&eacute;ment de biblioth&egrave;que qui comporte un &eacute;l&eacute;ment auquel est attach&eacute; un comportement
Dreamweaver, Dreamweaver copie l'&eacute;l&eacute;ment et son gestionnaire d'&eacute;v&eacute;nements (l'attribut qui sp&eacute;cifie l'&eacute;v&eacute;nement
d&eacute;clenchant l'action, tel que onClick, onLoad ou onMouseOver, et l'action &agrave; appeler lorsque l'&eacute;v&eacute;nement se produit)
dans le fichier de l'&eacute;l&eacute;ment de biblioth&egrave;que. Dreamweaver ne copie pas les fonctions JavaScript associ&eacute;es dans l'&eacute;l&eacute;ment
de la biblioth&egrave;que. Au lieu de cela, lorsque vous ins&eacute;rez l'&eacute;l&eacute;ment de biblioth&egrave;que dans un document, Dreamweaver
ins&egrave;re automatiquement les fonctions JavaScript appropri&eacute;es dans la section head de ce document (si elles ne s'y
trouvent pas d&eacute;j&agrave;).
Remarque : Si vous r&eacute;digez manuellement le code JavaScript (c'est-&agrave;-dire si vous le cr&eacute;ez sans utiliser de comportements
Dreamweaver), vous pouvez l'int&eacute;grer &agrave; votre &eacute;l&eacute;ment de biblioth&egrave;que &agrave; l'aide du comportement Appel JavaScript pour
ex&eacute;cuter le code. Si vous n'utilisez pas de comportement Dreamweaver pour ex&eacute;cuter le code, le code n'est pas conserv&eacute;
dans l'&eacute;l&eacute;ment de biblioth&egrave;que.
La modification des comportements dans les &eacute;l&eacute;ments de biblioth&egrave;que doit respecter certaines conditions. Les
&eacute;l&eacute;ments de biblioth&egrave;que ne peuvent pas contenir de feuilles de style, car le code associ&eacute; &agrave; ces &eacute;l&eacute;ments figure dans la
section HEAD.
Voir aussi
&laquo; Modification d'un comportement dans un &eacute;l&eacute;ment de biblioth&egrave;que &raquo; &agrave; la page 128
Utilisation des actifs
Pr&eacute;sentation du panneau Actifs
Utilisez le panneau Actifs (Fen&ecirc;tre &gt; Actifs) pour g&eacute;rer les actifs du site en cours. Le panneau Actifs affiche les actifs
du site associ&eacute;s au document actif dans la fen&ecirc;tre du document.
Remarque : Vous devez d&eacute;finir un site local avant de pouvoir afficher des actifs dans le panneau Actifs.
Derni&egrave;re mise &agrave; jour le 4/5/2011
118
UTILISATION DE DREAMWEAVER
Gestion des actifs et des biblioth&egrave;ques
Panneau Actifs avec la liste Site affich&eacute;e. Les ic&ocirc;nes de cat&eacute;gorie se trouvent &agrave; gauche et la zone d'aper&ccedil;u se trouve au-dessus de la liste.
Le panneau Actifs vous propose deux vues diff&eacute;rentes des actifs :
Liste Site Elle pr&eacute;sente tous les actifs de votre site, y compris les couleurs et les adresses URL utilis&eacute;es dans les
documents de votre site.
Liste Favoris Pr&eacute;sente uniquement les actifs que vous avez s&eacute;lectionn&eacute;s de fa&ccedil;on explicite.
Pour basculer entre ces deux modes, s&eacute;lectionnez le bouton radio Site ou Favoris situ&eacute; en haut de la zone d'aper&ccedil;u. (Ces
deux modes d'affichage ne sont pas disponibles pour les cat&eacute;gories Mod&egrave;les et Biblioth&egrave;que.)
Remarque : La plupart des op&eacute;rations du panneau Actifs fonctionnent de la m&ecirc;me fa&ccedil;on dans les deux listes. Toutefois,
il existe quelques t&acirc;ches qui ne peuvent &ecirc;tre r&eacute;alis&eacute;es que dans la liste Favoris.
Dans les deux listes, les actifs appartiennent &agrave; l'une des cat&eacute;gories suivantes :
Images
Fichiers d'image en formats GIF, JPEG ou PNG.
Couleurs
Les couleurs utilis&eacute;es dans les documents et les feuilles de style, y compris les couleurs du texte, des
arri&egrave;re-plans et des liens.
Les liens externes se trouvant dans les documents du site en cours, y compris FTP, gopher, HTTP, HTTPS,
JavaScript, courriel (mailto), et fichiers locaux (file://).
URL
Fichiers dans n'importe quelle version d'Adobe Flash. Seuls les fichiers SWF (fichiers compress&eacute;s cr&eacute;&eacute;s avec
Flash) s'affichent dans le panneau Actifs. Les fichiers FLA (source Flash) ne s'affichent pas.
Flash
Shockwave
Films
Fichiers dans n'importe quelle version d'Adobe Shockwave.
Fichiers QuickTime ou MPEG.
Fichiers JavaScript ou VBScript. Les scripts dans les fichiers HTML (plut&ocirc;t que dans des fichiers
JavaScript ou VBScript ind&eacute;pendants) n'apparaissent pas dans le panneau Actifs.
Scripts
Mod&egrave;les
Les mises en forme de pages principales utilis&eacute;es sur plusieurs pages. La modification d'un mod&egrave;le
entra&icirc;ne automatiquement la modification de toutes les pages qui y sont associ&eacute;es.
Des &eacute;l&eacute;ments que vous utilisez dans plusieurs pages. Lorsque vous modifiez un &eacute;l&eacute;ment
de biblioth&egrave;que, toutes les pages qui le contiennent sont mises &agrave; jour.
El&eacute;ments de biblioth&egrave;que
Remarque : Pour figurer dans le panneau Actifs, un fichier doit appartenir &agrave; l'une de ces cat&eacute;gories. Il existe d'autres types
de fichiers parfois appel&eacute;s actifs, mais qui ne sont pas affich&eacute;s dans le panneau.
Derni&egrave;re mise &agrave; jour le 4/5/2011
119
UTILISATION DE DREAMWEAVER
Gestion des actifs et des biblioth&egrave;ques
Par d&eacute;faut, les actifs d'une cat&eacute;gorie donn&eacute;e sont r&eacute;pertori&eacute;s en fonction de leur nom par ordre alphab&eacute;tique, mais vous
pouvez les trier par type et en fonction de plusieurs autres crit&egrave;res. Vous pouvez &eacute;galement afficher un aper&ccedil;u des actifs
et redimensionner les colonnes ainsi que la zone d'aper&ccedil;u.
Voir aussi
&laquo; Cr&eacute;ation et gestion d'une liste d'actifs favoris &raquo; &agrave; la page 122
&laquo; Utilisation des &eacute;l&eacute;ments de biblioth&egrave;que &raquo; &agrave; la page 124
Affichage d'un actif dans la zone d'aper&ccedil;u
❖ S&eacute;lectionnez l'actif dans le panneau Actifs.
Par exemple, lorsque vous s&eacute;lectionnez un actif de type animation, une ic&ocirc;ne s'affiche dans la zone d'aper&ccedil;u. Pour
visualiser l'animation, cliquez sur le bouton Lecture (le triangle vert) dans l'angle sup&eacute;rieur droit de la zone d'aper&ccedil;u.
Affichage des actifs d'une cat&eacute;gorie donn&eacute;e
❖ Cliquez sur une ic&ocirc;ne de cat&eacute;gorie dans le c&ocirc;t&eacute; gauche du panneau Actifs.
Tri des actifs
❖ Cliquez sur une en-t&ecirc;te de colonne.
Par exemple, pour trier la liste des images par type (afin de regrouper toutes les images GIF, puis toutes les images
JPEG, etc.), cliquez sur l'en-t&ecirc;te de la colonne Type.
Redimensionnement d'une colonne
❖ Faites glisser la ligne qui s&eacute;pare deux en-t&ecirc;tes de colonne.
Redimensionnement de la zone d'aper&ccedil;u
❖ Faites glisser la barre de s&eacute;paration (entre la zone d'aper&ccedil;u et la liste des actifs) vers le haut ou vers le bas.
Actualisation du panneau Actifs
La cr&eacute;ation de la liste Site peut prendre quelques secondes du fait que Dreamweaver doit d'abord lire le cache du site.
Certaines modifications n'apparaissent pas imm&eacute;diatement dans le panneau Actifs. Par exemple, lorsque vous ajoutez
ou supprimez un actif du site, les modifications ne sont pas r&eacute;percut&eacute;es dans le panneau Actifs tant que vous
n'actualisez pas la liste Site en cliquant sur le bouton Actualiser la liste du site. Si vous ajoutez ou supprimez un actif
en dehors de Dreamweaver (via l'Explorateur Windows ou le Finder, par exemple), vous devez recr&eacute;er le cache du site
pour actualiser le panneau Actifs.
Lorsque vous supprimez l'unique instance d'une URL ou d'une couleur donn&eacute;e du site, ou lorsque vous enregistrez un
nouveau fichier contenant une couleur ou une URL n'ayant pas encore &eacute;t&eacute; utilis&eacute;e dans le site, les modifications ne
sont r&eacute;percut&eacute;es dans le panneau Actifs qu'une fois la liste Site actualis&eacute;e.
• Pour actualiser la liste Site manuellement, cliquez sur le bouton Actualiser la liste du site
. Dreamweaver cr&eacute;e le
cache du site ou le met &agrave; jour si n&eacute;cessaire.
• Pour actualiser la liste Site et recr&eacute;er le cache du site manuellement, cliquez avec le bouton droit de la souris
(Windows) ou en maintenant la touche Ctrl enfonc&eacute;e (Macintosh) dans la liste Actifs, puis cliquez sur Actualiser
la liste du site.
Derni&egrave;re mise &agrave; jour le 4/5/2011
120
UTILISATION DE DREAMWEAVER
Gestion des actifs et des biblioth&egrave;ques
Ajout d'un actif &agrave; un document
Vous pouvez ins&eacute;rer la plupart des actifs dans un document en les faisant glisser dans la fen&ecirc;tre de document en mode
Code ou en mode Cr&eacute;ation, ou bien en utilisant le bouton Ins&eacute;rer du panneau. Vous pouvez ins&eacute;rer des couleurs et des
URL ou les appliquer au texte s&eacute;lectionn&eacute; en mode Cr&eacute;ation Les URL peuvent &eacute;galement &ecirc;tre appliqu&eacute;es aux autres
&eacute;l&eacute;ments, tels que des images, en mode Cr&eacute;ation.
1 En mode Cr&eacute;ation, placez le point d'insertion &agrave; l'endroit o&ugrave; l'actif doit appara&icirc;tre.
2 Dans le panneau Actifs, s&eacute;lectionnez l'un des boutons de cat&eacute;gorie d'actif situ&eacute;s &agrave; gauche.
Remarque : S&eacute;lectionnez toute cat&eacute;gorie autre que Mod&egrave;les. Un mod&egrave;le est appliqu&eacute; &agrave; un document entier. Il ne peut pas
&ecirc;tre ins&eacute;r&eacute; dans un document.
3 S&eacute;lectionnez Site ou Favoris en haut du panneau, puis s&eacute;lectionnez l'actif.
Il n'existe pas de liste Site ou Favoris pour les &eacute;l&eacute;ments de biblioth&egrave;que. Omettez cette &eacute;tape si vous ins&eacute;rez un tel
&eacute;l&eacute;ment.
4 Effectuez l'une des op&eacute;rations suivantes :
• Faites glisser l'actif depuis le panneau vers le document.
Vous pouvez faire glisser des scripts dans la zone du contenu de l'en-t&ecirc;te de la fen&ecirc;tre de document. Si cette zone n'est
pas visible, choisissez Affichage &gt; Contenu de l'en-t&ecirc;te.
• S&eacute;lectionnez l'actif dans le panneau et cliquez sur Ins&eacute;rer.
Si l'actif ins&eacute;r&eacute; est une couleur, elle s'applique au texte qui figure apr&egrave;s le point d'insertion.
Application d'une couleur &agrave; un texte &agrave; l'aide du panneau Actifs
Le panneau Actifs indique les couleurs que vous avez d&eacute;j&agrave; appliqu&eacute;es aux diff&eacute;rents &eacute;l&eacute;ments du site, tels que du texte,
des bordures de tableau, des arri&egrave;re-plans, etc.
1 S&eacute;lectionnez du texte dans le document.
2 Dans le panneau Actifs, s&eacute;lectionnez la cat&eacute;gorie Couleurs
.
3 S&eacute;lectionnez la couleur souhait&eacute;e puis cliquez sur Appliquer.
Voir aussi
&laquo; Ajout ou suppression d'actifs favoris &raquo; &agrave; la page 122
Application d'une URL &agrave; une image ou du texte &agrave; l'aide du panneau Actifs
1 S&eacute;lectionnez le texte ou l'image.
2 Dans le panneau Actifs, s&eacute;lectionnez la cat&eacute;gorie URL
dans la vue Sites ou Favoris, selon l'endroit o&ugrave; l'URL est
stock&eacute;e.
Remarque : Les URL des fichiers de votre site sont stock&eacute;s, par d&eacute;faut, dans le mode Sites. La vue Favoris contient les URL
que vous avez ajout&eacute;s manuellement.
3 S&eacute;lectionnez l'URL.
4 Effectuez l'une des op&eacute;rations suivantes :
• Faites glisser l'URL depuis le panneau vers la s&eacute;lection dans la fen&ecirc;tre de document en mode Cr&eacute;ation.
• S&eacute;lectionnez l'URL et cliquez sur Ins&eacute;rer.
Derni&egrave;re mise &agrave; jour le 4/5/2011
121
UTILISATION DE DREAMWEAVER
Gestion des actifs et des biblioth&egrave;ques
S&eacute;lection et modification d'actifs
Le panneau Actifs permet de s&eacute;lectionner simultan&eacute;ment plusieurs actifs ; il offre &eacute;galement un moyen rapide de
commencer l'&eacute;dition d'actifs.
Voir aussi
&laquo; Lancement d'un &eacute;diteur externe pour des fichiers multim&eacute;dias &raquo; &agrave; la page 268
S&eacute;lection de plusieurs actifs.
1 Dans le panneau Actifs, s&eacute;lectionnez un actif.
2 S&eacute;lectionnez les autres actifs &agrave; l'aide de l'une des m&eacute;thodes suivantes :
• Cliquez en maintenant la touche Maj enfonc&eacute;e pour s&eacute;lectionner une s&eacute;rie cons&eacute;cutive d'actifs.
• Cliquez en maintenant la touche Ctrl (Windows) ou la touche Commande (Macintosh) enfonc&eacute;e pour ajouter un
actif individuel &agrave; la s&eacute;lection (qu'il soit adjacent ou non &agrave; la s&eacute;lection existante). Cliquez en maintenant la touche
Ctrl (Windows) ou la touche Commande (Macintosh) enfonc&eacute;e sur un actif s&eacute;lectionn&eacute; pour le d&eacute;s&eacute;lectionner.
Modification d'un actif
Lorsque vous modifiez un actif dans le panneau Actifs, le comportement varie en fonction du type d'actif. Pour certains
actifs, tels que les images, vous utilisez un &eacute;diteur externe qui s'ouvre automatiquement si vous avez d&eacute;fini un &eacute;diteur
pour ce type d'actif. Vous ne pouvez modifier les couleurs et les URL que dans la liste Favoris. Lorsque vous modifiez
des mod&egrave;les et des &eacute;l&eacute;ments de biblioth&egrave;que, vous effectuez les modifications dans Dreamweaver.
1 Dans le panneau Actifs, proc&eacute;dez de l'une des mani&egrave;res suivantes :
• Double-cliquez sur l'actif.
• S&eacute;lectionnez l'actif, puis cliquez sur le bouton Modifier
.
Remarque : Si l'actif doit &ecirc;tre modifi&eacute; dans un &eacute;diteur externe et qu'aucun &eacute;diteur ne s'ouvre automatiquement,
s&eacute;lectionnez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh), s&eacute;lectionnez la cat&eacute;gorie
Types de fichiers/Editeurs, et assurez-vous qu'un &eacute;diteur externe est d&eacute;fini pour ce type d'actif.
2 Apportez les modifications voulues.
3 Lorsque vous avez termin&eacute;, proc&eacute;dez de l’une des fa&ccedil;ons suivantes :
• Si l'actif est bas&eacute; sur un fichier (tout objet autre qu'une couleur ou une URL), enregistrez-le (via l'&eacute;diteur que vous
utilisez), puis fermez-le.
• Si l'actif est une URL, cliquez sur OK dans la bo&icirc;te de dialogue Modifier l'URL.
Remarque : Si l'actif est une couleur, le s&eacute;lecteur de couleur se ferme automatiquement lorsque vous s&eacute;lectionnez une
couleur. Pour fermer le s&eacute;lecteur de couleur sans s&eacute;lectionner de couleur, appuyez sur la touche Echap.
R&eacute;utilisation d'actifs dans un autre site
Le panneau Actifs affiche tous les actifs (de types reconnus) dans le site actuel. Pour utiliser un actif du site actuel dans
un autre site, il est n&eacute;cessaire de le copier. Vous pouvez copier un actif individuel, un ensemble d'actifs individuels ou
un dossier Favoris entier en une seule op&eacute;ration.
Vous devrez peut-&ecirc;tre localiser le fichier dans le panneau Fichiers correspondant &agrave; un actif dans le panneau Actifs
avant de transf&eacute;rer l'actif depuis ou vers votre site distant.
Remarque : Le panneau Fichiers peut afficher un site diff&eacute;rent de celui pr&eacute;sent&eacute; par le panneau Actifs, car le panneau
Actifs est associ&eacute; au document actif.
Derni&egrave;re mise &agrave; jour le 4/5/2011
122
UTILISATION DE DREAMWEAVER
Gestion des actifs et des biblioth&egrave;ques
Localisation d'un fichier d'actif dans le panneau Fichiers
1 Dans le panneau Actifs, s&eacute;lectionnez la cat&eacute;gorie de l'actif que vous recherchez.
2 Cliquez avec le bouton droit (Windows) ou en maintenant la touche Contr&ocirc;le enfonc&eacute;e (Macintosh) sur l'ic&ocirc;ne ou
le nom de l'actif dans le panneau Actifs, puis choisissez l'option Rep&eacute;rer dans le site dans le menu contextuel.
Remarque : L'option Rep&eacute;rer dans le site n'est pas disponible pour les couleurs et les URL, qui ne correspondent pas &agrave; des
fichiers dans le site.
Le panneau Fichiers s'ouvre, avec le fichier d'actif s&eacute;lectionn&eacute;. La commande Rep&eacute;rer dans le site rep&egrave;re le fichier
correspondant &agrave; l'actif lui-m&ecirc;me, et non les fichiers qui utilisent cet actif.
Copie d'actifs depuis le panneau Actifs vers un autre site
1 Dans le panneau Actifs, s&eacute;lectionnez la cat&eacute;gorie de l'actif que vous souhaitez copier.
2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contr&ocirc;le enfonc&eacute;e (Macintosh)
sur un ou plusieurs actifs dans la liste Site ou Favoris, s&eacute;lectionnez Copier dans le site, puis s&eacute;lectionnez le nom du
site cible dans le sous-menu qui r&eacute;pertorie les sites que vous avez d&eacute;finis.
Remarque : Dans la liste Favoris, vous pouvez copier un dossier Favoris ainsi que des actifs individuels.
Les actifs sont copi&eacute;s dans leurs emplacements correspondants dans le site cible. Dreamweaver cr&eacute;e de nouveaux
dossiers dans la hi&eacute;rarchie du site cible en fonction des besoins. Les actifs sont &eacute;galement ajout&eacute;s &agrave; la liste Favoris du
site cible.
Remarque : Si l'actif que vous avez copi&eacute; est une couleur ou une URL, il s'affiche uniquement dans la liste Favoris du site
cible. Du fait que les couleurs et les URL ne correspondent pas &agrave; des fichiers, il n'existe aucun fichier &agrave; copier dans l'autre site.
Cr&eacute;ation et gestion d'une liste d'actifs favoris
Gestion des actifs favoris
La liste compl&egrave;te de tous les actifs reconnus peut devenir encombr&eacute;e pour certains sites volumineux. Vous pouvez
ajouter des actifs fr&eacute;quemment utilis&eacute;s &agrave; une liste Favoris, grouper des actifs connexes, leur attribuer des surnoms pour
m&eacute;moriser leur objet et les retrouver ais&eacute;ment dans le panneau Actifs.
Remarque : Les actifs favoris ne sont pas stock&eacute;s en tant que fichiers distincts sur le disque. Ils font r&eacute;f&eacute;rence aux actifs de
la liste Site. Dreamweaver conserve la trace des actifs de la liste Site &agrave; afficher dans la liste Favoris.
La plupart des op&eacute;rations du panneau Actifs sont identiques dans les listes Favoris et Site. Toutefois, il existe plusieurs
t&acirc;ches que vous pouvez r&eacute;aliser uniquement dans la liste Favoris.
Ajout ou suppression d'actifs favoris
Il existe plusieurs m&eacute;thodes pour ajouter des actifs &agrave; la liste Favoris du site dans le panneau Actifs.
L'ajout d'une couleur ou d'une URL &agrave; la liste Favoris n&eacute;cessite une &eacute;tape suppl&eacute;mentaire. Vous ne pouvez pas ajouter
de nouvelles couleurs ou URL &agrave; la liste Site. Cette derni&egrave;re contient uniquement les actifs d&eacute;j&agrave; utilis&eacute;s dans le site.
Remarque : Il n'existe pas de liste Favoris pour les mod&egrave;les et les &eacute;l&eacute;ments de biblioth&egrave;que.
Derni&egrave;re mise &agrave; jour le 4/5/2011
123
UTILISATION DE DREAMWEAVER
Gestion des actifs et des biblioth&egrave;ques
Voir aussi
&laquo; Pr&eacute;sentation du panneau Actifs &raquo; &agrave; la page 117
&laquo; Utilisation du s&eacute;lecteur de couleur &raquo; &agrave; la page 224
Ajout d'actifs &agrave; la liste Favoris
Effectuez l'une des op&eacute;rations suivantes :
• S&eacute;lectionnez un ou plusieurs actifs dans la liste Site du panneau Actifs, puis cliquez sur le bouton Ajouter aux
favoris
.
• S&eacute;lectionnez un ou plusieurs actifs dans la liste Site du panneau Actifs, cliquez avec le bouton droit (Windows) ou
en maintenant la touche Ctrl enfonc&eacute;e (Macintosh), puis s&eacute;lectionnez Ajouter aux favoris.
• S&eacute;lectionnez un ou plusieurs fichiers dans le panneau Fichiers, cliquez avec le bouton droit (Windows) ou en
maintenant la touche Ctrl enfonc&eacute;e (Macintosh), puis s&eacute;lectionnez Ajouter aux favoris. Dreamweaver ignore les
fichiers n'appartenant pas &agrave; une cat&eacute;gorie du panneau Actifs.
• Cliquez avec le bouton droit (Windows) ou en maintenant la touche Contr&ocirc;le enfonc&eacute;e (Macintosh) sur un &eacute;l&eacute;ment
dans la fen&ecirc;tre de document en mode Cr&eacute;ation, puis choisissez l'option du menu contextuel pour ajouter l'&eacute;l&eacute;ment
&agrave; une cat&eacute;gorie Favoris.
Le menu contextuel pour le texte contient soit l'option Ajouter aux favoris Couleur, soit l'option Ajouter aux favoris
URL, selon qu'un lien est attach&eacute; au texte. Vous pouvez ajouter uniquement les &eacute;l&eacute;ments qui correspondent aux
cat&eacute;gories du panneau Actifs.
Ajout d'une nouvelle couleur ou une nouvelle URL &agrave; la liste Favoris
1 Dans le panneau Actifs, s&eacute;lectionnez la cat&eacute;gorie Couleurs ou URL.
2 S&eacute;lectionnez l'option Favoris en haut du panneau.
3 Cliquez sur le bouton Nouvelle couleur ou Nouvelle URL
.
4 Effectuez l'une des op&eacute;rations suivantes :
• S&eacute;lectionnez une couleur dans le s&eacute;lecteur de couleur et donnez-lui un surnom si vous le souhaitez.
Pour fermer le s&eacute;lecteur de couleur sans s&eacute;lectionner de couleur, appuyez sur la touche Echap ou cliquez sur la barre
de couleur grise en haut du s&eacute;lecteur de couleur.
• Entrez une URL et un surnom dans la bo&icirc;te de dialogue Ajouter URL, puis cliquez sur OK.
Suppression d'actifs de la liste Favoris
1 Dans le panneau Actifs, s&eacute;lectionnez l'option Favoris en haut du panneau.
2 S&eacute;lectionnez un ou plusieurs actifs (ou un dossier) dans la liste Favoris.
3 Cliquez sur le bouton Supprimer des favoris
.
Les actifs sont supprim&eacute;s de la liste Favoris, mais pas de la liste Site. Si vous supprimez un dossier Favoris, ce dernier
est supprim&eacute;, ainsi que tout son contenu.
Cr&eacute;ation d'un surnom pour un actif favori
Vous pouvez attribuer des surnoms (par exemple, CouleurArri&egrave;rePlanPage au lieu de #999900) uniquement aux actifs
de la liste Favoris. La liste Site retient leur nom de fichier r&eacute;el (ou leur valeur, dans le cas de couleurs et d'URL).
1 Dans le panneau Actifs, (Fen&ecirc;tre &gt; Actifs), s&eacute;lectionnez la cat&eacute;gorie qui contient votre actif.
Derni&egrave;re mise &agrave; jour le 4/5/2011
124
UTILISATION DE DREAMWEAVER
Gestion des actifs et des biblioth&egrave;ques
2 S&eacute;lectionnez l'option Favoris en haut du panneau.
3 Effectuez l'une des op&eacute;rations suivantes :
• Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e (Macintosh) sur le
nom ou l'ic&ocirc;ne de l'actif dans le panneau Actifs, puis s&eacute;lectionnez Modifier le surnom.
• Cliquez une fois sur le nom de l'actif, effectuez une pause, puis cliquez &agrave; nouveau. (Ne double-cliquez pas, car cela
ouvrirait l'&eacute;l&eacute;ment pour modification.)
4 Tapez un surnom pour l'actif, puis appuyez sur la touche Entr&eacute;e (Windows) ou Retour (Macintosh).
Voir aussi
&laquo; Pr&eacute;sentation du panneau Actifs &raquo; &agrave; la page 117
Regroupement d'actifs dans un dossier Favoris
Le fait de placer un actif dans un dossier Favoris ne modifie pas l'emplacement du fichier d'actif sur le disque.
1 Dans le panneau Actifs, s&eacute;lectionnez l'option Favoris en haut du panneau.
2 Cliquez sur le bouton Nouveau dossier Favoris
.
3 Tapez un nom pour le dossier, puis appuyez sur la touche Entr&eacute;e (Windows) ou Retour (Macintosh).
4 Faites glisser les actifs vers le dossier.
Utilisation des &eacute;l&eacute;ments de biblioth&egrave;que
Cr&eacute;ation d'un &eacute;l&eacute;ment de biblioth&egrave;que
Les &eacute;l&eacute;ments de biblioth&egrave;que sont des &eacute;l&eacute;ments que vous souhaitez r&eacute;utiliser ou mettre &agrave; jour fr&eacute;quemment dans
l'ensemble de votre site Web.
Voir aussi
&laquo; A propos des &eacute;l&eacute;ments de biblioth&egrave;que &raquo; &agrave; la page 116
Cr&eacute;er un &eacute;l&eacute;ment de biblioth&egrave;que bas&eacute; sur une s&eacute;lection
1 Dans la fen&ecirc;tre de document, s&eacute;lectionnez une partie d'un document que vous souhaitez enregistrer comme
&eacute;l&eacute;ment de la biblioth&egrave;que.
2 Effectuez l'une des op&eacute;rations suivantes :
• Faites glisser la s&eacute;lection sur la cat&eacute;gorie Biblioth&egrave;que
• Cliquez sur le bouton Nouvel &eacute;l&eacute;ment de biblioth&egrave;que
.
en bas de la cat&eacute;gorie Biblioth&egrave;que.
• S&eacute;lectionnez Modifier &gt; Biblioth&egrave;que &gt; Ajouter un objet dans la biblioth&egrave;que.
3 Tapez un nom pour le nouvel &eacute;l&eacute;ment de la biblioth&egrave;que, puis appuyez sur la touche Entr&eacute;e (Windows) ou Retour
(Macintosh).
Dreamweaver enregistre chaque &eacute;l&eacute;ment de biblioth&egrave;que dans un fichier s&eacute;par&eacute; (avec l'extension de fichier .lbi), dans
le dossier Library du dossier racine local du site.
Derni&egrave;re mise &agrave; jour le 4/5/2011
125
UTILISATION DE DREAMWEAVER
Gestion des actifs et des biblioth&egrave;ques
Cr&eacute;ation d'un &eacute;l&eacute;ment de biblioth&egrave;que vide
1 V&eacute;rifiez que rien n'est s&eacute;lectionn&eacute; dans la fen&ecirc;tre de document.
Si un &eacute;l&eacute;ment est s&eacute;lectionn&eacute;, il est plac&eacute; dans le nouvel &eacute;l&eacute;ment de biblioth&egrave;que.
2 Dans le panneau Actifs, s&eacute;lectionnez la cat&eacute;gorie Biblioth&egrave;que
3 Cliquez sur le bouton Nouvel &eacute;l&eacute;ment de biblioth&egrave;que
.
en bas du panneau.
4 S&eacute;lectionnez l'&eacute;l&eacute;ment et entrez son nom, puis appuyez sur Entr&eacute;e (Windows) ou sur Retour (Macintosh).
Insertion d'un &eacute;l&eacute;ment de biblioth&egrave;que dans un document
Lorsque vous ajoutez un &eacute;l&eacute;ment de biblioth&egrave;que &agrave; une page, le contenu r&eacute;el est ins&eacute;r&eacute; dans le document avec une
r&eacute;f&eacute;rence &agrave; l'&eacute;l&eacute;ment de biblioth&egrave;que.
1 Placez le point d'insertion dans la fen&ecirc;tre de document.
2 Dans le panneau Actifs, s&eacute;lectionnez la cat&eacute;gorie Biblioth&egrave;que
.
3 Effectuez l'une des op&eacute;rations suivantes :
• Faites glisser un &eacute;l&eacute;ment de biblioth&egrave;que du panneau Actifs vers la fen&ecirc;tre de document.
Pour ins&eacute;rer le contenu d'un &eacute;l&eacute;ment de biblioth&egrave;que sans inclure de r&eacute;f&eacute;rence &agrave; l'&eacute;l&eacute;ment dans le document, appuyez
sur la touche Ctrl (Windows) ou Option (Macintosh) tout en faisant glisser l'&eacute;l&eacute;ment hors du panneau Actifs. Lorsque
vous ins&eacute;rez un &eacute;l&eacute;ment de cette fa&ccedil;on, vous pouvez le modifier dans le document, mais le document ne sera pas mis &agrave;
jour lorsque vous mettrez &agrave; jour les pages qui utilisent cet &eacute;l&eacute;ment.
• S&eacute;lectionnez un &eacute;l&eacute;ment de biblioth&egrave;que et cliquez sur Ins&eacute;rer.
Modification des &eacute;l&eacute;ments de biblioth&egrave;que et mise &agrave; jour des documents
Lorsque vous modifiez un &eacute;l&eacute;ment de biblioth&egrave;que, vous pouvez choisir de mettre &agrave; jour tous les documents qui
utilisent cet &eacute;l&eacute;ment. Si vous choisissez de ne pas les mettre &agrave; jour, les documents restent associ&eacute;s &agrave; l'&eacute;l&eacute;ment de
biblioth&egrave;que. Il est toujours possible de les mettre &agrave; jour ult&eacute;rieurement.
Vous pouvez renommer des &eacute;l&eacute;ments pour rompre leur lien avec des documents ou des mod&egrave;les, supprimer des
&eacute;l&eacute;ments de la biblioth&egrave;que du site et recr&eacute;er un &eacute;l&eacute;ment de biblioth&egrave;que manquant.
Remarque : Le panneau Styles CSS n'est pas disponible lorsque vous &eacute;ditez un &eacute;l&eacute;ment de biblioth&egrave;que &eacute;tant donn&eacute; que
ces derniers peuvent uniquement contenir des &eacute;l&eacute;ments body et que le code CSS (feuille de style en cascade) est ins&eacute;r&eacute; dans
la section head d'un document. La bo&icirc;te de dialogue Propri&eacute;t&eacute;s de la page est &eacute;galement indisponible : en effet, un &eacute;l&eacute;ment
de biblioth&egrave;que ne peut pas comporter de balise body ni d'attributs de cette balise.
Modification d'un &eacute;l&eacute;ment de biblioth&egrave;que
1 Dans le panneau Actifs, s&eacute;lectionnez la cat&eacute;gorie Biblioth&egrave;que
.
2 S&eacute;lectionnez un &eacute;l&eacute;ment de biblioth&egrave;que.
3 Vous pouvez soit cliquer sur le bouton Modifier
, soit double-cliquer sur l'&eacute;l&eacute;ment de biblioth&egrave;que.
Dreamweaver ouvre une nouvelle fen&ecirc;tre, similaire &agrave; la fen&ecirc;tre de document, permettant de modifier l'&eacute;l&eacute;ment de
biblioth&egrave;que. L'arri&egrave;re-plan gris indique que vous &ecirc;tres en train de modifier un &eacute;l&eacute;ment de biblioth&egrave;que et non un
document.
4 Apportez les modifications et enregistrez-les.
Derni&egrave;re mise &agrave; jour le 4/5/2011
126
UTILISATION DE DREAMWEAVER
Gestion des actifs et des biblioth&egrave;ques
5 Indiquez si vous souhaitez mettre &agrave; jour les documents du site local qui utilisent l'&eacute;l&eacute;ment de biblioth&egrave;que modifi&eacute;.
S&eacute;lectionnez Mettre &agrave; jour pour effectuer une mise &agrave; jour imm&eacute;diate. Si vous s&eacute;lectionnez Ne pas mettre &agrave; jour, les
documents ne seront pas mis &agrave; jour &agrave; moins que vous ne s&eacute;lectionniez Modifier &gt; Biblioth&egrave;que &gt; Mettre &agrave; jour la
page en cours ou Mettre &agrave; jour les pages.
Mise &agrave; jour du document actif afin d'utiliser la version actuelle de tous les &eacute;l&eacute;ments de
biblioth&egrave;que
❖ Choisissez Modifier &gt; Mod&egrave;les &gt; Mettre &agrave; jour la page en cours.
Mise &agrave; jour du site entier ou de tous les documents utilisant un &eacute;l&eacute;ment de biblioth&egrave;que
particulier
1 Choisissez Modifier &gt; Biblioth&egrave;que &gt; Mettre &agrave; jour les pages.
2 Dans le menu d&eacute;roulant Regarder dans, indiquez ce qui doit &ecirc;tre mis &agrave; jour :
• Pour mettre &agrave; jour toutes les pages du site s&eacute;lectionn&eacute; afin d'utiliser la version actuelle de tous les &eacute;l&eacute;ments de
biblioth&egrave;que, s&eacute;lectionnez Site entier, puis s&eacute;lectionnez le nom du site dans le menu d&eacute;roulant adjacent.
• Pour mettre &agrave; jour toutes les pages du site en cours qui utilisent l'&eacute;l&eacute;ment de biblioth&egrave;que, s&eacute;lectionnez Fichiers
utilisant, puis s&eacute;lectionnez un nom d'&eacute;l&eacute;ment de biblioth&egrave;que dans le menu d&eacute;roulant adjacent.
3 Sous Mettre &agrave; jour, assurez-vous que l'option El&eacute;ments de biblioth&egrave;que est activ&eacute;e.
Pour mettre les mod&egrave;les &agrave; jour en m&ecirc;me temps, s&eacute;lectionnez Mod&egrave;les &eacute;galement.
4 Cliquez sur D&eacute;marrer.
Dreamweaver met &agrave; jour les fichiers comme indiqu&eacute;. Si vous avez s&eacute;lectionn&eacute; l'option Afficher le journal,
Dreamweaver g&eacute;n&egrave;re un rapport qui indique si les fichiers ont &eacute;t&eacute; mis &agrave; jour correctement et qui contient &eacute;galement
d'autres informations.
Modification du nom d'un &eacute;l&eacute;ment de biblioth&egrave;que
1 Dans le panneau Actifs, s&eacute;lectionnez la cat&eacute;gorie Biblioth&egrave;que
.
2 Cliquez sur l'&eacute;l&eacute;ment de biblioth&egrave;que, attendez, puis cliquez de nouveau. (Ne double-cliquez pas, car cela ouvrirait
l'&eacute;l&eacute;ment pour modification.)
3 Entrez un nouveau nom.
4 Cliquez ailleurs ou appuyez sur Entr&eacute;e (Windows) ou sur Retour (Macintosh).
5 indiquez si vous souhaitez mettre &agrave; jour les documents qui utilisent l'&eacute;l&eacute;ment en choisissant soit Mettre &agrave; jour, soit
Ne pas mettre &agrave; jour.
Suppression d'un &eacute;l&eacute;ment d'une biblioth&egrave;que
Lorsque vous supprimez un &eacute;l&eacute;ment de biblioth&egrave;que, Dreamweaver supprime l'&eacute;l&eacute;ment de la biblioth&egrave;que mais ne
modifie pas le contenu des documents qui l'utilisent.
1 Dans le panneau Actifs, s&eacute;lectionnez la cat&eacute;gorie Biblioth&egrave;que
.
2 S&eacute;lectionnez l’&eacute;l&eacute;ment de biblioth&egrave;que.
3 Cliquez sur le bouton Supprimer ou appuyez sur la touche Suppr, puis confirmez l'op&eacute;ration.
Important : Si vous supprimez un &eacute;l&eacute;ment de biblioth&egrave;que, vous ne pourrez pas utiliser Annuler pour le r&eacute;cup&eacute;rer. Vous
pouvez toutefois le recr&eacute;er.
Derni&egrave;re mise &agrave; jour le 4/5/2011
127
UTILISATION DE DREAMWEAVER
Gestion des actifs et des biblioth&egrave;ques
R&eacute;cr&eacute;ation d'un &eacute;l&eacute;ment de biblioth&egrave;que manquant ou supprim&eacute;
1 S&eacute;lectionnez une instance de l'&eacute;l&eacute;ment dans un de vos documents.
2 Cliquez sur le bouton Cr&eacute;er &agrave; nouveau de l'inspecteur Propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s).
Personnalisation de la mise en surbrillance des &eacute;l&eacute;ments de biblioth&egrave;que
Vous pouvez personnaliser la couleur de surbrillance des &eacute;l&eacute;ments de biblioth&egrave;que et afficher ou masquer la
surbrillance en d&eacute;finissant des pr&eacute;f&eacute;rences de surbrillance.
Voir aussi
&laquo; Utilisation du s&eacute;lecteur de couleur &raquo; &agrave; la page 224
Modification de la couleur de surbrillance des &eacute;l&eacute;ments de biblioth&egrave;que
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh).
2 S&eacute;lectionnez la cat&eacute;gorie Surbrillance dans la liste situ&eacute;e &agrave; gauche dans la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences.
3 Cliquez dans la case de couleur El&eacute;ments de la biblioth&egrave;que et s&eacute;lectionnez une couleur de surbrillance &agrave; l'aide du
s&eacute;lecteur de couleurs (ou entrez la valeur hexad&eacute;cimale correspondant &agrave; la couleur de surbrillance dans la zone de
texte).
4 Activez l'option Afficher pour afficher la couleur de surbrillance dans la fen&ecirc;tre de document.
5 Cliquez sur OK.
Affichage ou masquage de la mise en surbrillance dans la fen&ecirc;tre de document
❖ Pour afficher la mise en surbrillance, s&eacute;lectionnez Affichage &gt; Assistances visuelles &gt; El&eacute;ments invisibles. Pour
masquer la mise en surbrillance, d&eacute;s&eacute;lectionnez l'option El&eacute;ments invisibles.
Modification des propri&eacute;t&eacute;s d'un &eacute;l&eacute;ment de biblioth&egrave;que
L'inspecteur Propri&eacute;t&eacute;s vous permet d'ouvrir un &eacute;l&eacute;ment de biblioth&egrave;que pour le modifier, d&eacute;tacher un &eacute;l&eacute;ment
s&eacute;lectionn&eacute; de son fichier source ou remplacer un &eacute;l&eacute;ment par celui s&eacute;lectionn&eacute; actuellement.
1 S&eacute;lectionnez un &eacute;l&eacute;ment de biblioth&egrave;que dans un document.
2 S&eacute;lectionnez l'une des options suivantes dans l'inspecteur Propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s) :
Src Indique le nom de fichier et l'emplacement du fichier source de l'&eacute;l&eacute;ment de la biblioth&egrave;que. Vous ne pouvez pas
modifier ces informations.
Ouvrir Ouvre le fichier source de l'&eacute;l&eacute;ment de biblioth&egrave;que pour modification. Cela revient &agrave; s&eacute;lectionner l'&eacute;l&eacute;ment
dans le panneau Actifs et &agrave; cliquer sur le bouton Modifier.
D&eacute;tacher de l'original Brise le lien entre l'&eacute;l&eacute;ment de biblioth&egrave;que s&eacute;lectionn&eacute; et son fichier source. Vous pouvez
modifier l'&eacute;l&eacute;ment d&eacute;tach&eacute; dans le document, mais il ne s'agit plus d'un &eacute;l&eacute;ment de biblioth&egrave;que et il n'est plus modifi&eacute;
lorsque vous modifiez l'&eacute;l&eacute;ment d'origine.
Cr&eacute;er &agrave; nouveau Remplace l'&eacute;l&eacute;ment d'origine par la s&eacute;lection en cours. Utilisez cette option pour recr&eacute;er les &eacute;l&eacute;ments
de biblioth&egrave;que si l'&eacute;l&eacute;ment de biblioth&egrave;que d'origine manque ou a &eacute;t&eacute; accidentellement supprim&eacute;.
Derni&egrave;re mise &agrave; jour le 4/5/2011
128
UTILISATION DE DREAMWEAVER
Gestion des actifs et des biblioth&egrave;ques
Autorisation de la modification d'&eacute;l&eacute;ments de biblioth&egrave;que dans un
document
Si vous avez ins&eacute;r&eacute; un &eacute;l&eacute;ment de biblioth&egrave;que dans un document et que vous d&eacute;sirez modifier celui-ci uniquement
sur cette page, vous devez briser le lien qui existe entre cet &eacute;l&eacute;ment et la biblioth&egrave;que. Lorsqu'une instance d'&eacute;l&eacute;ment
de biblioth&egrave;que a &eacute;t&eacute; rendue modifiable, elle n'est plus mise &agrave; jour quand l'&eacute;l&eacute;ment de biblioth&egrave;que est modifi&eacute;.
1 S&eacute;lectionnez un &eacute;l&eacute;ment de la biblioth&egrave;que dans le document actif.
2 Dans l'inspecteur Propri&eacute;t&eacute;s, cliquez sur D&eacute;tacher de l'original (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s).
Modification d'un comportement dans un &eacute;l&eacute;ment de biblioth&egrave;que
Pour modifier un comportement dans un &eacute;l&eacute;ment de biblioth&egrave;que, vous devez tout d'abord ins&eacute;rer l'&eacute;l&eacute;ment dans un
document, puis le rendre modifiable dans ce document. Une fois les changements apport&eacute;s, vous pouvez recr&eacute;er
l'&eacute;l&eacute;ment de biblioth&egrave;que en rempla&ccedil;ant l'&eacute;l&eacute;ment de la biblioth&egrave;que par l'&eacute;l&eacute;ment modifi&eacute; de votre document.
1 Ouvrez un document contenant l'&eacute;l&eacute;ment de la biblioth&egrave;que.
Notez le nom de l'&eacute;l&eacute;ment de la biblioth&egrave;que, ainsi que les balises exactes qu'il contient. Vous aurez besoin de cette
information plus tard.
2 S&eacute;lectionnez l'&eacute;l&eacute;ment de biblioth&egrave;que et cliquez sur D&eacute;tacher de l'original dans l'inspecteur Propri&eacute;t&eacute;s
(Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s).
3 S&eacute;lectionnez l'&eacute;l&eacute;ment auquel est attach&eacute; le comportement.
4 Dans le volet Comportements (Fen&ecirc;tre &gt; Comportements), double-cliquez sur l'action que vous voulez modifier.
5 Dans la bo&icirc;te de dialogue qui s'affiche, effectuez vos modifications et cliquez sur OK.
6 Dans le panneau Actifs, s&eacute;lectionnez la cat&eacute;gorie Biblioth&egrave;que
.
7 Notez pr&eacute;cis&eacute;ment le nom et la casse de l'&eacute;l&eacute;ment de biblioth&egrave;que d'origine ; s&eacute;lectionnez-le, puis cliquez sur le
bouton Supprimer.
8 Dans la fen&ecirc;tre de document, s&eacute;lectionnez tous les &eacute;l&eacute;ments qui constituent l'&eacute;l&eacute;ment de biblioth&egrave;que.
Veillez &agrave; s&eacute;lectionner exactement les m&ecirc;mes &eacute;l&eacute;ments que ceux qui se trouvaient dans l'&eacute;l&eacute;ment de biblioth&egrave;que
original.
9 Dans le panneau Actifs, cliquez sur le bouton Nouvel &eacute;l&eacute;ment de biblioth&egrave;que
et donnez au nouvel &eacute;l&eacute;ment le
nom de l'&eacute;l&eacute;ment que vous avez supprim&eacute; en respectant l'orthographe et la casse.
10 Pour mettre &agrave; jour l'&eacute;l&eacute;ment de biblioth&egrave;que dans les autres documents de votre site, choisissez Modifier &gt;
Biblioth&egrave;que &gt; Mettre &agrave; jour les pages.
11 Dans le menu d&eacute;roulant Regarder dans, s&eacute;lectionnez Fichiers utilisant.
12 Dans le menu d&eacute;roulant adjacent, s&eacute;lectionnez le nom de l'&eacute;l&eacute;ment de biblioth&egrave;que que vous venez de cr&eacute;er.
13 Sous Mettre &agrave; jour, v&eacute;rifiez que l'option El&eacute;ments de biblioth&egrave;que est s&eacute;lectionn&eacute;e, puis cliquez sur D&eacute;marrer.
14 Une fois les mises &agrave; jour termin&eacute;es, cliquez sur Fermer.
Voir aussi
&laquo; Utilisation des comportements JavaScript &raquo; &agrave; la page 348
Derni&egrave;re mise &agrave; jour le 4/5/2011
129
Chapitre 6 : Cr&eacute;ation de pages avec CSS
Description des feuilles de style en cascade
A propos des feuilles de style en cascade
Les feuilles de style en cascade (CSS) regroupent des r&egrave;gles de formatage qui d&eacute;terminent l'aspect du contenu d'une page
Web. Quand vous utilisez des styles CSS pour mettre une page en forme, vous s&eacute;parez le contenu de la pr&eacute;sentation.
Le contenu de votre page (le code HTML) r&eacute;side dans le fichier HTML, tandis que les r&egrave;gles CSS qui d&eacute;finissent la
pr&eacute;sentation du code r&eacute;sident dans un autre fichier (une feuille de style externe) ou dans une autre partie du document
HTML (g&eacute;n&eacute;ralement dans la section head). La s&eacute;paration du contenu et de la pr&eacute;sentation facilite consid&eacute;rablement
la gestion de l'aspect de votre site &agrave; partir d'un point central car vous n'avez pas besoin de mettre &agrave; jour les propri&eacute;t&eacute;s
de toutes les pages chaque fois que vous souhaitez apporter une modification. La s&eacute;paration du contenu et de la
pr&eacute;sentation se traduit &eacute;galement par un code HTML simplifi&eacute; et mieux structur&eacute; qui permet de raccourcir les temps
de chargement pour les navigateurs, et elle simplifie la navigation pour les personnes ayant des probl&egrave;mes
d'accessibilit&eacute; (par exemple, qui utilisent des lecteurs d'&eacute;cran).
CSS vous offre une plus grande souplesse et une plus grande ma&icirc;trise de l'aspect de votre page. Les feuilles de style CSS
vous permettent de contr&ocirc;ler de nombreuses propri&eacute;t&eacute;s de texte, notamment les polices de caract&egrave;res et les tailles de
police, les styles gras, italique, soulignement et les ombres du texte, la couleur du texte et la couleur d'arri&egrave;re-plan, la
couleur des liens et le soulignement des liens, etc. En utilisant CSS pour contr&ocirc;ler vos polices de caract&egrave;res, vous vous
assurez d'un traitement plus coh&eacute;rent de la mise en page et de l'aspect de votre page dans diff&eacute;rents navigateurs.
Outre le formatage du texte, CSS permet de g&eacute;rer le format et le positionnement des blocs d'&eacute;l&eacute;ments d'une page Web.
Un &eacute;l&eacute;ment de niveau bloc est un contenu autonome, g&eacute;n&eacute;ralement s&eacute;par&eacute; par une nouvelle ligne dans le code HTML,
et format&eacute; visuellement comme un bloc. Par exemple, les balises h1, les balises p et les balises div produisent toutes
des &eacute;l&eacute;ments de niveau bloc sur une page Web. Vous pouvez d&eacute;finir des marges et des bordures pour les &eacute;l&eacute;ments de
niveau bloc, les placer dans un emplacement sp&eacute;cifique, leur ajouter une couleur d'arri&egrave;re-plan, faire flotter du texte
autour d'eux, etc. C'est essentiellement en manipulant des &eacute;l&eacute;ments de niveau bloc que vous r&eacute;alisez des mises en page
avec CSS.
Pour acc&eacute;der &agrave; un didacticiel relatif aux feuilles de style en cascade, consultez le site Web d'Adobe &agrave; l'adresse
www.adobe.com/go/vid0152_fr.
Voir aussi
&laquo; Utilisation des balises div &raquo; &agrave; la page 164
&laquo; Mise en forme des pages avec CSS &raquo; &agrave; la page 158
Didacticiel de description des feuilles CSS
A propos des r&egrave;gles CSS
Une r&egrave;gle de formatage CSS se compose de deux entit&eacute;s : le s&eacute;lecteur et la d&eacute;claration (ou dans la plupart des cas, un
bloc de d&eacute;clarations). Le s&eacute;lecteur est un terme (tel que p, h1,un nom de classe ou un identifiant) qui identifie l'&eacute;l&eacute;ment
mis en forme tandis que le bloc de d&eacute;claration d&eacute;finit quels sont les propri&eacute;t&eacute;s de style. Dans l'exemple suivant, h1
correspond au s&eacute;lecteur tandis que tout ce qui est plac&eacute; entre les crochets ({}) correspond &agrave; la d&eacute;claration :
Derni&egrave;re mise &agrave; jour le 4/5/2011
130
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
h1 {
font-size: 16 pixels;
font-family: Helvetica;
font-weight:bold;
}
La d&eacute;claration est compos&eacute;e de deux entit&eacute;s : la propri&eacute;t&eacute; (par exemple, font-family) et la valeur (par exemple,
Helvetica). Dans la r&egrave;gle CSS pr&eacute;c&eacute;dente, un style particulier a &eacute;t&eacute; cr&eacute;&eacute; pour les balises h1 : le texte de toutes les balises
H1 li&eacute;es &agrave; ce style sera associ&eacute; &agrave; une police Helvetica, d'une taille de 16 pixels et en gras.
Le style (qui est d&eacute;fini par une r&egrave;gle ou par un groupe de r&egrave;gles) se trouve dans un emplacement distinct de celui du
formatage du texte r&eacute;el, g&eacute;n&eacute;ralement dans une feuille de style externe ou dans la section head du document HTML.
Ainsi, une r&egrave;gle concernant les balises h1 peut s'appliquer &agrave; de nombreuses balises &agrave; la fois (et dans le cas de feuilles de
style externes, la r&egrave;gle peut s'appliquer &agrave; de nombreuses balises &agrave; la fois dans un grand nombre de pages diff&eacute;rentes).
De cette fa&ccedil;on, CSS offre une capacit&eacute; de mise &agrave; jour extr&ecirc;mement ais&eacute;e Lorsque vous mettez &agrave; jour une r&egrave;gle CSS dans
un emplacement, le formatage de tous les &eacute;l&eacute;ments qui utilisent le style d&eacute;fini est automatiquement mise &agrave; jour en
fonction du nouveau style.
Where to stay
H1 {
font-family: Ariel;
font-size: 16px;
font-weight: bold;
}
What to do
main.html
Spring Festival
Feuille de style externe
events.html
Vous pouvez d&eacute;finir les types de styles suivants dans Dreamweaver :
• Les styles de classe vous permettent d'appliquer des propri&eacute;t&eacute;s de style &agrave; tout &eacute;l&eacute;ment de la page.
• Les styles appliqu&eacute;s aux balises HTML red&eacute;finissent le formatage d'une balise sp&eacute;cifique, telle que h1. Lorsque vous
cr&eacute;ez ou modifiez un style CSS pour la balise h1, tout le texte format&eacute; &agrave; l'aide de cette balise h1 est imm&eacute;diatement
modifi&eacute; en cons&eacute;quence.
• Les styles avanc&eacute;s red&eacute;finissent le formatage pour une combinaison particuli&egrave;re d'&eacute;l&eacute;ments ou pour d'autres formes
du s&eacute;lecteur admises par CSS (par exemple, le s&eacute;lecteur td h2 s'applique chaque fois qu'un en-t&ecirc;te h2 appara&icirc;t dans
une cellule de tableau). Les styles avanc&eacute;s peuvent &eacute;galement red&eacute;finir le formatage pour des balises qui contiennent
un attribut id (identifiant) (par exemple, les styles d&eacute;finis par #myStyle s'appliquent &agrave; toutes les balises qui
contiennent la paire valeur-attribut id=&quot;myStyle&quot;).
Les r&egrave;gles CSS peuvent se trouver aux emplacements suivants :
Feuilles de style CSS externes Ensembles de r&egrave;gles CSS enregistr&eacute;es dans un fichier .css externe distinct (pas dans un
fichier HTML). Ce fichier est li&eacute; &agrave; une ou plusieurs pages d'un site Web &agrave; l'aide d'un lien ou d'une r&egrave;gle @import situ&eacute;
dans la section head d'un document.
Feuilles de style CSS internes (ou imbriqu&eacute;es) Ensembles de r&egrave;gles CSS incluses dans une balise style de la section
head d'un document HTML.
Derni&egrave;re mise &agrave; jour le 4/5/2011
131
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
Styles en ligne D&eacute;finis dans des instances sp&eacute;cifiques de balises dans un document HTML. L'utilisation de styles en
ligne n'est pas recommand&eacute;e.
Dreamweaver reconna&icirc;t les styles d&eacute;finis dans des documents existants, pour peu qu'ils soient conformes aux
recommandations des feuilles de style CSS. Dreamweaver restitue &eacute;galement la plupart des styles appliqu&eacute;s
directement en mode Conception. Toutefois, la pr&eacute;visualisation d'un document dans une fen&ecirc;tre de navigateur vous
permet d'obtenir le rendu direct le plus pr&eacute;cis de la page. Certains styles CSS s'affichent diff&eacute;remment dans Microsoft
Internet Explorer, Netscape Navigator, Opera, Apple Safari ou d'autres navigateurs, et certains ne sont pas encore pris
en charge par aucun navigateur.
Pour afficher le guide de r&eacute;f&eacute;rence CSS d'O'Reilly inclus dans Dreamweaver, choisissez Aide &gt; R&eacute;f&eacute;rence et
s&eacute;lectionnez O'Reilly - R&eacute;f&eacute;rence CSS dans le menu d&eacute;roulant du panneau R&eacute;f&eacute;rence.
Voir aussi
&laquo; Application, suppression ou changement du nom de styles de classe &raquo; &agrave; la page 147
A propos des styles en cascade
Le terme en cascade fait r&eacute;f&eacute;rence &agrave; la fa&ccedil;on dont un navigateur affiche finalement les styles pour des &eacute;l&eacute;ments
sp&eacute;cifiques d'une page Web. Trois sources sont responsables des styles visibles sur une page Web : la feuille de style
cr&eacute;&eacute;e par l'auteur de la page, les &eacute;ventuelles s&eacute;lections de style personnalis&eacute;es de l'utilisateur, et les styles par d&eacute;faut du
navigateur. Les sections pr&eacute;c&eacute;dentes expliquent la cr&eacute;ation de styles pour une page Web par l'auteur de la page Web et
de la feuille de style qui y est associ&eacute;e. Toutefois, les navigateurs poss&egrave;dent eux aussi des feuilles de style par d&eacute;faut, qui
d&eacute;terminent la restitution des pages Web. En outre, les utilisateurs peuvent personnaliser leurs navigateurs en
effectuant des s&eacute;lections qui d&eacute;terminent l'affichage des pages Web. L'apparence finale d'une page Web est le r&eacute;sultat
de la combinaison (cascadre) des r&egrave;gles de ces trois sources, qui permet de restituer la page Web de mani&egrave;re optimale.
Ce concept va &ecirc;tre illustr&eacute; par une balise courante, la balise de paragraphe (&lt;p&gt;). Par d&eacute;faut, les navigateurs
comportent des feuilles de style qui d&eacute;finissent la police et la taille de police du texte des paragraphes, c'est-&agrave;-dire le
texte plac&eacute; entre balises &lt;p&gt; dans le code HTML. Ainsi, dans Internet Explorer, tout le texte du corps, y compris celui
des paragraphes, s'affiche par d&eacute;faut dans la police Times New Roman de taille moyenne.
Toutefois, si vous &ecirc;tes l'auteur d'une page Web, vous pouvez cr&eacute;er une feuille de style qui remplace le style par d&eacute;faut
du navigateur pour ce qui est de la police et de la taille de police. Par exemple, vous pouvez cr&eacute;er la r&egrave;gle suivante dans
votre feuille de style :
p {
font-family: Arial;
font-size: small;
}
Lorsqu'un utilisateur charge la page, les param&egrave;tres de police du paragraphe et de taille de police que vous, auteur, avez
d&eacute;finis, remplacent les param&egrave;tres par d&eacute;faut du navigateur en la mati&egrave;re.
Les utilisateurs peuvent effectuer des s&eacute;lections pour personnaliser l'affichage du navigateur selon leurs attentes. Par
exemple, dans Internet Explorer, l'utilisateur peut choisir Affichage &gt; Taille du texte &gt; La plus grande, de mani&egrave;re &agrave;
agrandir la police et la rendre plus lisible. En fin de compte (du moins, dans ce cas), la s&eacute;lection de l'utilisateur remplace
&agrave; la fois les styles par d&eacute;faut du navigateur pour la taille de police par d&eacute;faut dans les paragraphes, et les styles de
pargraphe cr&eacute;&eacute;s par l'auteur de la page Web.
L'h&eacute;ritage est un autre &eacute;l&eacute;ment important de la cascade. Les propri&eacute;t&eacute;s de la plupart des &eacute;l&eacute;ments d'une page Web sont
h&eacute;rit&eacute;es. Par exemple, les balises de paragraphe h&eacute;ritent de certaines propri&eacute;t&eacute;s des balises body, les balises span de
certaines propri&eacute;t&eacute;s des balises de paragraphe, et ainsi de suite. Ainsi, vous pouvez cr&eacute;er la r&egrave;gle suivante dans votre
feuille de style :
Derni&egrave;re mise &agrave; jour le 4/5/2011
132
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
body {
font-family: Arial;
font-style: italic;
}
Tout le texte des paragraphes de votre page Web (ainsi que le texte qui h&eacute;rite des propri&eacute;t&eacute;s de la balise de paragraphe)
sera en Arial italique, car la balise de paragraphe h&eacute;rite de ces propri&eacute;t&eacute;s &agrave; partir de la balise body. Vous pouvez
toutefois vous montrer plus sp&eacute;cifique avec vos r&egrave;gles et cr&eacute;er des styles qui supplantent la formule d'h&eacute;ritage standard.
Par exemple, vous pouvez cr&eacute;er les r&egrave;gles suivantes dans votre feuille de style :
body {
font-family: Arial;
font-style: italic;
}
p {
font-family: Courier;
font-style: normal;
}
Tout le texte du corps est en Arial italique, sauf le texte des paragraphes (et celui des balises h&eacute;riti&egrave;res), qui s'affiche en
Courier normal (non italique). D'un point de vue technique, la balise de paragraphe h&eacute;rite tout d'abord des proiri&eacute;t&eacute;s
d&eacute;finies pour la balise body, puis elle ignore celles-ci, car des propri&eacute;t&eacute;s ont &eacute;t&eacute; d&eacute;finies sp&eacute;cifiquement pour elle. En
d'autres termes, bien que les &eacute;l&eacute;ments de page h&eacute;ritent g&eacute;n&eacute;ralement des propri&eacute;t&eacute;s sup&eacute;rieures, l'application directe
d'une propri&eacute;t&eacute; &agrave; une balise entra&icirc;ne toujours l'&eacute;crasement de la formule d'h&eacute;ritage standard.
La combinaison de tous les facteurs expos&eacute;s ci-dessus et d'autres facteurs, tels que la sp&eacute;cificit&eacute; CSS (un syst&egrave;me qui
attribue un poids diff&eacute;rent &agrave; des types pr&eacute;cis de r&egrave;gles CSS) et l'ordre des r&egrave;gles CSS, finit par cr&eacute;er une cascade
complexe, o&ugrave; les &eacute;l&eacute;ments aux priorit&eacute;s les plus &eacute;lev&eacute;es &eacute;crasent les &eacute;l&eacute;ments aux propri&eacute;t&eacute;s les plus basses. Pour plus
d'informations sur les r&egrave;gles en mati&egrave;re de cascade, d'h&eacute;ritage et de sp&eacute;cificit&eacute;, visitez le site
www.w3.org/TR/CSS2/cascade.html.
A propos du formatage de texte et de CSS
Par d&eacute;faut, Dreamweaver utilise des feuilles de style en cascade (CSS) pour mettre le texte en forme. Les styles
appliqu&eacute;s au texte &agrave; l'aide de l'inspecteur Propri&eacute;t&eacute;s ou des commandes de menu g&eacute;n&egrave;rent des r&egrave;gles CSS int&eacute;gr&eacute;es &agrave;
la section head du document.
Vous pouvez &eacute;galement utiliser le panneau Styles CSS pour cr&eacute;er et modifier des propri&eacute;t&eacute;s et des r&egrave;gles CSS. Ce
panneau est un &eacute;diteur bien plus fiable que l'inspecteur Propri&eacute;t&eacute;s et pr&eacute;sente toutes les r&egrave;gles CSS d&eacute;finies dans le
document actif, qu'elles soient int&eacute;gr&eacute;es &agrave; la section head du document ou dans une feuille de style externe. Adobe
recommande l'utilisation du panneau Styles CSS (plut&ocirc;t que l'inspecteur Propri&eacute;t&eacute;s) comme outil principal de cr&eacute;ation
et modification de vos styles CSS. Ainsi, votre code sera plus clair et sa maintenance en sera simplifi&eacute;e.
Outre les styles et feuilles de style de votre composition, libre &agrave; vous d'utiliser les feuilles de style livr&eacute;es avec
Dreamweaver pour styliser vos documents
Pour acc&eacute;der &agrave; un didacticiel relatif au formatage de texte &agrave; l'aide de feuilles de style en cascade, consultez le site Web
d'Adobe &agrave; l'adresse www.adobe.com/go/vid0153_fr.
Voir aussi
&laquo; Ajout et formatage de texte &raquo; &agrave; la page 226
&laquo; Panneau Styles CSS &raquo; &agrave; la page 134
Derni&egrave;re mise &agrave; jour le 4/5/2011
133
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
&laquo; Cr&eacute;ation d'une nouvelle r&egrave;gle CSS &raquo; &agrave; la page 139
Didacticiel de formatage de texte avec CSS
A propos des propri&eacute;t&eacute;s de la forme courte des styles CSS
La sp&eacute;cification CSS permet la cr&eacute;ation de styles &agrave; l'aide d'une syntaxe abr&eacute;g&eacute;e appel&eacute;e forme courte des styles CSS. Elle
permet de sp&eacute;cifier la valeur de plusieurs propri&eacute;t&eacute;s &agrave; l'aide d'une seule d&eacute;claration. Par exemple, la propri&eacute;t&eacute; font
vous permet de d&eacute;finir les propri&eacute;t&eacute;s font-style, font-variant, font-weight, font-size, line-height et fontfamily sur une seule ligne.
Il est important de savoir que sous forme courte, les propri&eacute;t&eacute;s dont la valeur est omise re&ccedil;oivent leur valeur par d&eacute;faut.
Certaines pages risquent donc de s'afficher incorrectement lorsque plusieurs r&egrave;gles CSS sont attribu&eacute;es &agrave; la m&ecirc;me
balise.
Par exemple, la r&egrave;gle h1 ci-dessous utilise la syntaxe longue. Remarquez que les propri&eacute;t&eacute;s font-variant, fontstretch, font-size-adjust et font-style ont re&ccedil;u leur valeur par d&eacute;faut.
h1 {
font-weight: bold;
font-size: 16pt;
line-height: 18pt;
font-family: Arial;
font-variant: normal;
font-style: normal;
font-stretch: normal;
font-size-adjust: none
}
Ins&eacute;r&eacute;e en tant que propri&eacute;t&eacute; unique sous forme courte, la m&ecirc;me r&egrave;gle pourrait se pr&eacute;senter ainsi :
h1 { font: bold 16pt/18pt Arial }
Sous forme courte, les propri&eacute;t&eacute;s dont la valeur est omise re&ccedil;oivent automatiquement leur valeur par d&eacute;faut. Ainsi,
l'exemple de forme abr&eacute;g&eacute;e ci-dessus omet les balises font-variant, font-style, font-stretch et font-sizeadjust.
Si des styles sont d&eacute;finis en plusieurs emplacements (par exemple, incorpor&eacute;s dans une page HTML et import&eacute;s d'une
feuille de style externe) sous deux formes, longue et courte, n'oubliez pas que les propri&eacute;t&eacute;s omises dans une r&egrave;gle de
notation abr&eacute;g&eacute;e risquent d'&eacute;craser les propri&eacute;t&eacute;s explicitement d&eacute;finies dans une autre r&egrave;gle. (On parle de styles en
cascade.)
Dreamweaver utilise donc la forme longue par d&eacute;faut, Ceci permet d'&eacute;viter qu'une r&egrave;gle de notation abr&eacute;g&eacute;e ne
remplace une r&egrave;gle de notation longue. Si vous ouvrez une page Web cod&eacute;e en forme courte dans Dreamweaver,
n'oubliez pas que Dreamweaver cr&eacute;e toutes les nouvelles r&egrave;gles CSS sous forme longue. Pour sp&eacute;cifier la fa&ccedil;on dont
Dreamweaver cr&eacute;e et modifie les r&egrave;gles CSS, vous pouvez modifier les pr&eacute;f&eacute;rences de modification CSS dans la
cat&eacute;gorie Styles CSS de la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences (Edition &gt; Pr&eacute;f&eacute;rences dans Windows ; Dreamweaver &gt;
Pr&eacute;f&eacute;rences sur le Macintosh).
Remarque : Le panneau Styles CSS cr&eacute;e uniquement des r&egrave;gles sous forme longue. Lorsque vous cr&eacute;ez une page ou une
feuille de style CSS &agrave; l'aide du panneau Style CSS, n'oubliez pas que le codage manuel de r&egrave;gles CSS sous forme courte
risque de provoquer l'&eacute;crasement des propri&eacute;t&eacute;s cr&eacute;&eacute;es sous forme longue par celles cr&eacute;&eacute;es sous forme courte. Il est donc
pr&eacute;f&eacute;rable de cr&eacute;er vos styles CSS sous forme longue.
Derni&egrave;re mise &agrave; jour le 4/5/2011
134
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
Cr&eacute;ation et gestion de CSS
Panneau Styles CSS
Le panneau Styles CSS vous permet de suivre les r&egrave;gles CSS et les propri&eacute;t&eacute;s qui affectent un &eacute;l&eacute;ment de page
s&eacute;lectionn&eacute; (mode Actuel), ou l'ensemble des r&egrave;gles et des propri&eacute;t&eacute;s qui sont disponibles pour le document (mode
Tous). Un bouton bascule plac&eacute; sur la partie sup&eacute;rieure du panneau vous permet de passer d'un mode &agrave; l'autre. Le
panneau Styles CSS vous permet de modifier les propri&eacute;t&eacute;s CSS dans les deux modes.
Panneau Styles CSS en mode Actuel
En mode Actuel, le panneau Styles CSS pr&eacute;sente trois volets : un volet R&eacute;sum&eacute; de la s&eacute;lection qui pr&eacute;sente les propri&eacute;t&eacute;s
CSS de la s&eacute;lection en cours dans le document, un volet R&egrave;gles qui pr&eacute;cise l'emplacement des propri&eacute;t&eacute;s s&eacute;lectionn&eacute;es
(ou une cascade de r&egrave;gles pour la balise s&eacute;lectionn&eacute;e, selon votre s&eacute;lection), et un volet Propri&eacute;t&eacute;s qui vous permet de
modifier les propri&eacute;t&eacute;s CSS de la r&egrave;gle appliqu&eacute;es &agrave; la s&eacute;lection.
Vous pouvez redimensionner l'un quelconque des volets en faisant glisser les cadres entre les volets et redimensionner
les colonnes en faisant glisser les s&eacute;parateurs.
Le volet R&eacute;sum&eacute; de la s&eacute;lection r&eacute;capitule les propri&eacute;t&eacute;s CSS de l'&eacute;l&eacute;ment s&eacute;lectionn&eacute; dans le document actif et leurs
valeurs. Ce r&eacute;sum&eacute; d&eacute;crit les propri&eacute;t&eacute;s de toutes les r&egrave;gles s'appliquant directement &agrave; la s&eacute;lection. Seules les propri&eacute;t&eacute;s
d&eacute;finies apparaissent.
Par exemple, les r&egrave;gles suivantes cr&eacute;ent un style de classe et un style de balise (dans ce cas un paragraphe) :
Derni&egrave;re mise &agrave; jour le 4/5/2011
135
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
.foo{
color: green;
font-family: 'Arial';
}
p{
font-family: 'serif';
font-size: 12px;
}
Si vous s&eacute;lectionnez le texte d'un paragraphe de style de classe .foo dans la fen&ecirc;tre du document, le volet R&eacute;sum&eacute; de
la s&eacute;lection affiche les propri&eacute;t&eacute;s concern&eacute;es par les deux r&egrave;gles, puisque ces deux r&egrave;gles s'appliquent &agrave; la s&eacute;lection.
Dans ce cas, le volet R&eacute;sum&eacute; de la s&eacute;lection affiche la liste des propri&eacute;t&eacute;s suivantes :
font-size: 12px
font-family: 'Arial'
color: green
Le volet R&eacute;sum&eacute; de la s&eacute;lection classe les propri&eacute;t&eacute;s par ordre croissant de sp&eacute;cificit&eacute;. Dans l'exemple pr&eacute;c&eacute;dent, le style
de balise d&eacute;finit la taille de la police et le style de classe, la famille et la couleur de la police. (La famille de police d&eacute;finie
par la classe est prioritaire sur celle d&eacute;finie par le style de balise car la sp&eacute;cificit&eacute; des s&eacute;lecteurs de classe est sup&eacute;rieure
&agrave; celle des s&eacute;lecteurs de balise. Pour plus d'informations sur les sp&eacute;cificit&eacute;s CSS, voir
www.w3.org/TR/CSS2/cascade.html.)
Le volet R&egrave;gles dispose de deux vues (A propos ou R&egrave;gles) selon votre s&eacute;lection. Dans la vue A propos (par d&eacute;faut), le
volet pr&eacute;sente le nom de la r&egrave;gle d&eacute;finissant la propri&eacute;t&eacute; CSS s&eacute;lectionn&eacute;e, ainsi que le nom du fichier contenant cette
r&egrave;gle. Dans la vue R&egrave;gles, le volet affiche la cascade, ou hi&eacute;rarchie, des r&egrave;gles s'appliquant directement ou indirectement
&agrave; la s&eacute;lection en cours. (L'onglet auquel la r&egrave;gle s'applique directement s'affiche dans la colonne de droite.) Pour passer
d'une vue &agrave; l'autre, cliquez sur les boutons Afficher les informations et Afficher cascade situ&eacute;s dans le coin sup&eacute;rieur
droit du volet R&egrave;gles.
Lorsque vous s&eacute;lectionnez une propri&eacute;t&eacute; dans le volet R&eacute;sum&eacute; de la s&eacute;lection, toutes les propri&eacute;t&eacute;s de la r&egrave;gle appliqu&eacute;e
s'affichent au-dessous dans le volet Propri&eacute;t&eacute;s. (La r&egrave;gle qui s'applique est &eacute;galement s&eacute;lectionn&eacute;e dans le panneau
R&egrave;gles lorsque la vue R&egrave;gles est s&eacute;lectionn&eacute;e.) Par exemple, dans le cas d'une r&egrave;gle appel&eacute;e .texteprincipal qui
d&eacute;finit une famille, une taille et une couleur de police, la s&eacute;lection de l'une de ces propri&eacute;t&eacute;s dans le volet R&eacute;sum&eacute; de la
s&eacute;lection entra&icirc;ne l'affichage de toutes les propri&eacute;t&eacute;s d&eacute;finies par la r&egrave;gle .texteprincipal dans le volet Propri&eacute;t&eacute;s et
de la r&egrave;gle .texteprincipal s&eacute;lectionn&eacute;e dans le volet R&egrave;gles. (En outre, la s&eacute;lection d'une r&egrave;gle dans le volet R&egrave;gles
affiche les propri&eacute;t&eacute;s de celle-ci dans le volet Propri&eacute;t&eacute;s.) Vous pouvez alors utiliser le volet Propri&eacute;t&eacute;s pour modifier
rapidement votre style CSS, qu'il soit int&eacute;gr&eacute; dans le document en cours ou reli&eacute; via par une feuille de style. Par d&eacute;faut,
le volet Propri&eacute;t&eacute;s ne pr&eacute;sente que les propri&eacute;t&eacute;s ayant d&eacute;j&agrave; &eacute;t&eacute; d&eacute;finies et les classe par ordre alphab&eacute;tique.
Vous pouvez choisir d'afficher les propri&eacute;t&eacute;s dans deux autres vues. La vue Cat&eacute;gorie regroupe les propri&eacute;t&eacute;s en
cat&eacute;gories, telles que Police, Arri&egrave;re-plan, Bloc, Bordure, etc., les propri&eacute;t&eacute;s d&eacute;finies sont plac&eacute;es en haut de chaque
cat&eacute;gorie, en texte bleu. La vue Liste pr&eacute;sente la liste alphab&eacute;tique de toutes les propri&eacute;t&eacute;s disponibles, les propri&eacute;t&eacute;s
d&eacute;finies &eacute;galement plac&eacute;es en haut de chaque cat&eacute;gorie, en texte bleu. Pour passer d'une vue &agrave; l'autre, cliquez sur les
boutons Afficher la vue par cat&eacute;gorie, Afficher la vue sous forme de liste ou Afficher uniquement les propri&eacute;t&eacute;s
d&eacute;finies, situ&eacute;s dans le coin inf&eacute;rieur droit du volet Propri&eacute;t&eacute;s.
Dans toutes les vues, les propri&eacute;t&eacute;s utilis&eacute;es dans la s&eacute;lection s'affichent en bleu, les autres s'affichent en rouge et sont
barr&eacute;es. Si vous placez le curseur de la souris sur une r&egrave;gle &eacute;trang&egrave;re &agrave; la s&eacute;lection, un message d'explication s'affiche.
Dans la plupart des cas, il s'agit de propri&eacute;t&eacute;s &eacute;cras&eacute;es par d'autres ou de propri&eacute;t&eacute;s qui ne sont pas h&eacute;rit&eacute;es.
Toute modification apport&eacute;e dans le volet Propri&eacute;t&eacute;s s'applique imm&eacute;diatement, ce qui vous permet d'avoir un aper&ccedil;u
direct de votre travail.
Derni&egrave;re mise &agrave; jour le 4/5/2011
136
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
Voir aussi
&laquo; Ouverture du panneau Styles CSS &raquo; &agrave; la page 137
Panneau Styles CSS en mode Tous
En mode Tous, le panneau Styles CSS pr&eacute;sente deux volets : un volet Toutes les r&egrave;gles (en haut) et un volet Propri&eacute;t&eacute;s
(en bas). Le volet Toutes les r&egrave;gles pr&eacute;sente la liste des r&egrave;gles d&eacute;finies dans le document actif, ainsi que l'ensemble des
r&egrave;gles d&eacute;finies dans les feuilles de styles jointes &agrave; ce document. Le volet Propri&eacute;t&eacute;s permet de modifier les propri&eacute;t&eacute;s
CSS de toute r&egrave;gle s&eacute;lectionn&eacute;e dans le volet Toutes les r&egrave;gles.
Vous pouvez redimensionner l'un quelconque des volets en faisant glisser les cadres entre les volets et redimensionner
les colonnes Propri&eacute;t&eacute;s en faisant glisser les s&eacute;parateurs.
Lorsque vous s&eacute;lectionnez une r&egrave;gle dans le volet Toutes les r&egrave;gles, toutes les propri&eacute;t&eacute;s s'appliquant &agrave; cette r&egrave;gle
s'affiche au-dessous dans le volet Propri&eacute;t&eacute;s. Vous pouvez alors utiliser le volet Propri&eacute;t&eacute;s pour modifier rapidement
votre style CSS, qu'il soit int&eacute;gr&eacute; dans le document en cours ou reli&eacute; via par une feuille de style. Par d&eacute;faut, le volet
Propri&eacute;t&eacute;s ne pr&eacute;sente que les propri&eacute;t&eacute;s pr&eacute;c&eacute;demment d&eacute;finies et les classe par ordre alphab&eacute;tique.
Vous pouvez choisir d'afficher les propri&eacute;t&eacute;s dans deux autres vues. La vue Cat&eacute;gorie regroupe les propri&eacute;t&eacute;s en
cat&eacute;gories, telles que Police, Arri&egrave;re-plan, Bloc, Bordure, etc., les propri&eacute;t&eacute;s d&eacute;finies plac&eacute;es en haut de chaque
cat&eacute;gorie. La vue Liste pr&eacute;sente la liste alphab&eacute;tique de toutes les propri&eacute;t&eacute;s disponibles, les propri&eacute;t&eacute;s d&eacute;finies
&eacute;galement plac&eacute;es en haut de chaque cat&eacute;gorie. Pour passer d'une vue &agrave; l'autre, cliquez sur les boutons Afficher la vue
par cat&eacute;gorie, Afficher la vue sous forme de liste ou Afficher uniquement les propri&eacute;t&eacute;s d&eacute;finies, situ&eacute;s dans le coin
inf&eacute;rieur droit du volet Propri&eacute;t&eacute;s. Dans toutes les vues, les propri&eacute;t&eacute;s utilis&eacute;es dans la s&eacute;lection s'affichent en bleu.
Toute modification apport&eacute;e dans le volet Propri&eacute;t&eacute;s s'applique imm&eacute;diatement, ce qui vous permet d'avoir un aper&ccedil;u
direct de votre travail.
Voir aussi
&laquo; Ouverture du panneau Styles CSS &raquo; &agrave; la page 137
Boutons et vues du panneau Styles CSS
Dans les modes Tous et Actuel, le panneau Styles CSS pr&eacute;sente trois boutons qui vous permettent de modifier
l'affichage du volet Propri&eacute;t&eacute;s (volet inf&eacute;rieur) :
Derni&egrave;re mise &agrave; jour le 4/5/2011
137
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
A
B
C
A. Vue Cat&eacute;gorie B. Vue Liste C. Vue D&eacute;finition des propri&eacute;t&eacute;s
Vue Cat&eacute;gorie R&eacute;partit les propri&eacute;t&eacute;s CSS prises en charge par Dreamweaver en huit cat&eacute;gories distinctes : police,
arri&egrave;re-plan, bloc, bordure, bo&icirc;te, liste, positionnement et extensions. Les propri&eacute;t&eacute;s de chaque cat&eacute;gorie sont
conserv&eacute;es dans une liste que vous pouvez d&eacute;velopper ou r&eacute;duire en cliquant sur le bouton plus (+) en regard de la
cat&eacute;gorie de votre choix. Les propri&eacute;t&eacute;s d&eacute;finies s'affichent en bleu en haut de la liste.
Vue Liste Affiche l'ensemble des propri&eacute;t&eacute;s CSS prises en charge par Dreamweaver par ordre alphab&eacute;tique. Les
propri&eacute;t&eacute;s d&eacute;finies s'affichent en bleu en haut de la liste.
Vue D&eacute;finition des propri&eacute;t&eacute;s N'affiche que les propri&eacute;t&eacute;s d&eacute;j&agrave; d&eacute;finies et constitue la vue par d&eacute;faut.
Dans les modes Tous et Actuel, le panneau Styles CSS contient &eacute;galement les boutons suivants :
A
B
C
D
E
A. Attacher une feuille de style B. Nouvelle r&egrave;gle de CSS C. Modifier le style D. D&eacute;sactiver/Activer la propri&eacute;t&eacute; CSS E. Supprimer r&egrave;gle de CSS
Attacher une feuille de style Ouvre la bo&icirc;te de dialogue Ajouter une feuille de style externe. S&eacute;lectionnez une feuille de
style externe pour cr&eacute;er un lien vers le document actif ou l'importer dans celui-ci.
Nouvelle r&egrave;gle de CSS Ouvre une bo&icirc;te de dialogue qui permet de s&eacute;lectionner le type du style que vous cr&eacute;ez, par
exemple, pour cr&eacute;er un style de classe, red&eacute;finir une balise HTML ou pour d&eacute;finir un s&eacute;lecteur CSS.
Modifier le style Ouvre une bo&icirc;te de dialogue qui permet de modifier les styles dans le document actuel ou dans une
feuille de style externe.
Supprimer r&egrave;gle de CSS Supprime la r&egrave;gle ou la propri&eacute;t&eacute; s&eacute;lectionn&eacute;e du panneau Styles CSS et le formatage de tous
les &eacute;l&eacute;ments auxquels elle est appliqu&eacute;e. (Les r&eacute;f&eacute;rences &agrave; ce style ne sont cependant pas supprim&eacute;es.) Le bouton
Supprimer r&egrave;gle de CSS peut &eacute;galement d&eacute;tacher (ou rompre le lien de) une feuille de style CSS associ&eacute;e.
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contr&ocirc;le enfonc&eacute;e (Macintosh) sur
le panneau Styles CSS pour ouvrir un menu contextuel d'options disponibles pour l'ex&eacute;cution des commandes de
feuilles de style CSS.
Ouverture du panneau Styles CSS
Le panneau Styles CSS vous permet d'afficher, de cr&eacute;er, de modifier et de supprimer des styles CSS, mais &eacute;galement de
joindre des feuilles de style externes aux documents.
❖ Effectuez l’une des t&acirc;ches suivantes :
• Choisissez Fen&ecirc;tre &gt; Styles CSS.
• Appuyez sur les touches Maj+F11.
• Cliquez sur le bouton CSS de l'inspecteur Propri&eacute;t&eacute;s.
Am&eacute;liorations &agrave; la prise en charge de CSS3 dans le panneau Styles CSS (CS 5.5)
Un panneau contextuel a &eacute;t&eacute; ajout&eacute; au panneau CSS pour les propri&eacute;t&eacute;s suivantes :
• text-shadow
Derni&egrave;re mise &agrave; jour le 4/5/2011
138
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
• box-shadow
• border-radius
• border-image
Les options disponibles dans le panneau contextuel vous garantissent d'appliquer la propri&eacute;t&eacute; correctement, m&ecirc;me si
vous ne ma&icirc;trisez pas leur syntaxe W3C.
Le panneau contextuel affichant les options de la propri&eacute;t&eacute; CSS3 border-image
Pour obtenir des informations d&eacute;taill&eacute;es sur les am&eacute;liorations CSS3 dans CS 5.5, consultez le blog de Preran, &agrave; l'adresse
www.adobe.com/go/learn_dw_css3enhancements_fr.
Application de propri&eacute;t&eacute;s CSS3 &agrave; l'aide du panneau contextuel
❖ Cliquez sur l'ic&ocirc;ne &laquo; + &raquo;' correspondant &agrave; ces propri&eacute;t&eacute;s. Utilisez les options du panneau contextuel pour appliquer
la propri&eacute;t&eacute;.
Sp&eacute;cification de plusieurs ensembles de valeurs
Les propri&eacute;t&eacute;s CSS3 telles que text-shadow prennent en charge plusieurs ensembles de valeurs. Par exemple : textshadow: 3px 3px #000, -3px -3px #0f0;
Lorsque vous sp&eacute;cifiez plusieurs ensembles de valeurs en mode Code et que vous ouvrez le panneau contextuel &agrave; des
fins d'&eacute;dition, seul le premier ensemble de valeurs s'affiche. Si vous modifiez cet ensemble de valeurs dans le panneau
contextuel, seul le premier ensemble de valeurs dans le code est affect&eacute;. Les autres ensembles de valeurs ne sont pas
affect&eacute;s et sont appliqu&eacute;s comme indiqu&eacute; dans le code.
Recherche de propri&eacute;t&eacute;s dans le mode Cat&eacute;gories
En mode Cat&eacute;gories, text-shadow se trouve dans la cat&eacute;gorie Police. box-shadow, border-radius et borderimage sont r&eacute;pertori&eacute;s dans la cat&eacute;gorie Bordure.
Garantie de la conformit&eacute; avec les navigateurs
Dreamweaver CS 5.5 prend &eacute;galement en charge un d&eacute;ploiement sp&eacute;cifique aux navigateurs (webkit, Mozilla) des
propri&eacute;t&eacute;s box-shadow, border-radius et border-image.
Derni&egrave;re mise &agrave; jour le 4/5/2011
139
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
En mode Cat&eacute;gories, utilisez les options de la cat&eacute;gorie de navigateur appropri&eacute;e afin de garantir la conformit&eacute; de ces
propri&eacute;t&eacute;s dans le navigateur en question. Par exemple, pour assurer la compatibilit&eacute; avec la mise en œuvre Mozilla de
la propri&eacute;t&eacute; border-image, modifiez -moz-border-image dans la cat&eacute;gorie Mozilla.
Pr&eacute;visualisation des modifications en mode Affichage en direct
Les modifications apport&eacute;es aux propri&eacute;t&eacute;s CSS ne sont pas affich&eacute;es en mode Cr&eacute;ation. Passez au mode Affichage en
direct pour pr&eacute;visualiser les modifications. Vous pouvez &eacute;galement apporter des modifications rapides aux propri&eacute;t&eacute;s
CSS3 dans le mode Affichage en direct. Ces modifications sont imm&eacute;diatement refl&eacute;t&eacute;es dans ce mode.
Les propri&eacute;t&eacute;s CSS3 suivantes sont prises en charge en mode Affichage en direct :
• text-shadow
• border-radius
• -webkit-box-shadow
• -webkit-border-image
Voir aussi
www.adobe.com/go/learn_dw_css3enhancements_fr
D&eacute;finition de pr&eacute;f&eacute;rences de styles CSS
Les pr&eacute;f&eacute;rences de styles CSS contr&ocirc;lent la fa&ccedil;on dont Dreamweaver r&eacute;dige le code qui d&eacute;finit les styles CSS. Les styles
CSS peuvent &ecirc;tre r&eacute;dig&eacute;s sous une forme abr&eacute;g&eacute;e, que certains d&eacute;veloppeurs estiment plus facile &agrave; utiliser. Toutefois,
certaines versions anciennes des navigateurs n'interpr&egrave;tent pas correctement la forme abr&eacute;g&eacute;e des attributs de styles.
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh), puis s&eacute;lectionnez Styles
CSS dans la liste Cat&eacute;gorie.
2 D&eacute;finissez les options de style CSS que vous voulez appliquer :
A la cr&eacute;ation de r&egrave;gles de CSS - Utilisez Forme courte pour : Vous permet de s&eacute;lectionner les propri&eacute;t&eacute;s de style CSS
que Dreamweaver r&eacute;dige en abr&eacute;g&eacute;.
A la modification de r&egrave;gles de CSS - Utilisez Forme courte pour : D&eacute;termine si Dreamweaver r&eacute;&eacute;crit les styles existants
en abr&eacute;g&eacute;.
Choisissez l'option Si l'original utilise Forme courte pour que les styles ne soient pas modifi&eacute;s.
Choisissez En fonction des param&egrave;tres ci-dessus pour r&eacute;&eacute;crire en forme abr&eacute;g&eacute;e les styles des propri&eacute;t&eacute;s s&eacute;lectionn&eacute;es
dans la zone Utiliser Forme courte pour.
Sur double-clic dans le panneau CSS : Vous permet de s&eacute;lectionner un outil pour modifier les r&egrave;gles CSS.
3 Cliquez sur OK.
Cr&eacute;ation d'une nouvelle r&egrave;gle CSS
Vous pouvez cr&eacute;er une r&egrave;gle CSS pour automatiser le formatage de balises HTML ou d'une plage de texte identifi&eacute;e
par un attribut class ou ID.
1 Placez le point d'insertion dans le document, puis proc&eacute;dez de l'une des mani&egrave;res suivantes pour ouvrir la bo&icirc;te de
dialogue Nouvelle r&egrave;gle CSS :
• Choisissez Format &gt; Styles CSS &gt; Nouveau.
Derni&egrave;re mise &agrave; jour le 4/5/2011
140
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
• Dans le panneau Styles CSS (Fen&ecirc;tre &gt; Styles CSS), cliquez sur le bouton Nouvelle r&egrave;gle CSS (+), situ&eacute; dans la partie
inf&eacute;rieure droite du panneau.
• S&eacute;lectionnez le texte dans la fen&ecirc;tre de document, choisissez Nouvelle r&egrave;gle CSS dans le menu R&egrave;gle cible de
l'inspecteur Propri&eacute;t&eacute;s CSS (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), puis cliquez sur le bouton Modifier la r&egrave;gle ou choisissez une
option dans l'inspecteur Propri&eacute;t&eacute;s CSS (par exemple, cliquez sur le bouton Gras) afin d'entamer la cr&eacute;ation d'une
nouvelle r&egrave;gle.
2 Dans la bo&icirc;te de dialogue Nouvelle r&egrave;gle CSS, sp&eacute;cifiez le type de s&eacute;lecteur pour la r&egrave;gle CSS &agrave; cr&eacute;er :
• Pour cr&eacute;er un style personnalis&eacute; pouvant &ecirc;tre appliqu&eacute; comme un attribut class &agrave; n'importe quel &eacute;l&eacute;ment HTML,
choisissez Classe dans le menu S&eacute;lecteur de types. Entrez ensuite le nom du style dans la zone de texte Nom du
s&eacute;lecteur.
Remarque : Les noms de classe doivent commencer par un point et peuvent contenir n'importe quelle combinaison de
lettres et de chiffres (par exemple, .monentete1). Si vous omettez le point, Dreamweaver l'ins&egrave;re &agrave; votre place.
• Pour d&eacute;finir le formatage d'une balise contenant un attribut id sp&eacute;cifique, choisissez ID dans le menu Type de
s&eacute;lecteur, puis entrez l'ID unique (par exemple containerDIV) dans la zone de texte Nom du s&eacute;lecteur.
Remarque : Les ID doivent commencer par un signe di&egrave;se (#) et peuvent contenir n'importe quelle combinaison de lettres
et de chiffres (par exemple, #monID1). Si vous omettez le signe di&egrave;se initial, Dreamweaver l'ins&egrave;re &agrave; votre place.
• Pour red&eacute;finir le formatage par d&eacute;faut d'une balise HTML sp&eacute;cifique, choisissez Balise dans le menu Type de
s&eacute;lecteur, puis entrez une balise HTML dans la zone de texte Nom du s&eacute;lecteur ou choisissez-en une dans le menu.
• Pour d&eacute;finir une r&egrave;gle compos&eacute;e influant simultan&eacute;ment sur plusieurs balises ou ID, choisissez l'option Compos&eacute;
puis entrez les s&eacute;lecteurs pour votre r&egrave;gle compos&eacute;e. Par exemple, si vous entrez div p, tous les &eacute;l&eacute;ments p contenus
dans des balises div seront influenc&eacute;s par la r&egrave;gle. Au fur et &agrave; mesure que vous ajoutez ou supprimez des s&eacute;lecteurs,
une zone de description explique quels &eacute;l&eacute;ments seront influenc&eacute;s par la r&egrave;gle.
3 Choisissez l'endroit o&ugrave; vous voulez d&eacute;finir la r&egrave;gle, puis cliquez sur OK :
• Pour placer la r&egrave;gle dans une feuille de style qui est d&eacute;j&agrave; associ&eacute;e au document, s&eacute;lectionnez la feuille de style.
• Pour cr&eacute;er une feuille de style externe, choisissez Nouveau fichier feuille de style.
• Pour incorporer le style dans le document actif, choisissez Seulement ce document.
4 Dans la bo&icirc;te de dialogue D&eacute;finition des r&egrave;gles de CSS, choisissez les options &agrave; d&eacute;finir pour la nouvelle r&egrave;gle CSS.
Pour plus d'informations, consultez la section suivante.
5 Lorsque vous avez d&eacute;fini les propri&eacute;t&eacute;s de style, cliquez sur OK.
Remarque : Le fait de cliquer sur OK sans d&eacute;finir d'options de style entra&icirc;ne la cr&eacute;ation d'une nouvelle r&egrave;gle vide.
D&eacute;finition des propri&eacute;t&eacute;s CSS
Vous pouvez d&eacute;finir des propri&eacute;t&eacute;s pour les r&egrave;gles CSS, telles que les propri&eacute;t&eacute;s de police de caract&egrave;res, d'image et de
couleur d'arri&egrave;re-plan, d'espacement et de mise en page ainsi que l'aspect des &eacute;l&eacute;ments de la liste. Cr&eacute;ez d'abord une
nouvelle r&egrave;gle, puis d&eacute;finissez les propri&eacute;t&eacute;s suivantes.
D&eacute;finition des propri&eacute;t&eacute;s de type CSS
La cat&eacute;gorie Type de la bo&icirc;te de dialogue D&eacute;finition des r&egrave;gles de CSS vous permet de d&eacute;finir les param&egrave;tres
&eacute;l&eacute;mentaires de police et de type pour un style CSS.
1 Ouvrez le panneau Styles CSS (Maj+F11), si n&eacute;cessaire.
2 Double-cliquez sur une r&egrave;gle ou une propri&eacute;t&eacute; existante dans le volet sup&eacute;rieur du panneau Styles CSS.
3 Dans la bo&icirc;te de dialogue D&eacute;finition des r&egrave;gles de CSS, choisissez Type, puis d&eacute;finissez les propri&eacute;t&eacute;s de style.
Derni&egrave;re mise &agrave; jour le 4/5/2011
141
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
Laissez les propri&eacute;t&eacute;s suivantes vides si elles ne sont pas importantes pour ce style :
Font-family Permet de d&eacute;finir la famille de polices (ou la s&eacute;rie de familles) de ce style. Les navigateurs affichent le texte
en utilisant la premi&egrave;re police install&eacute;e sur l'ordinateur de l'utilisateur au sein de la combinaison de polices choisie.
Pour assurer la compatibilit&eacute; avec Internet Explorer 3.0, utilisez une police Windows en premier. Cet attribut est pris
en charge par les deux navigateurs.
Font-size D&eacute;finit la taille du texte. Vous pouvez choisir une taille sp&eacute;cifique en cliquant sur une valeur et une unit&eacute; de
mesure, ou une taille relative. Les pixels fonctionnent correctement pour emp&ecirc;cher la d&eacute;formation du texte par les
navigateurs. Cet attribut est pris en charge par les deux navigateurs.
Font-style permet de sp&eacute;cifier la variation Normal, Italique ou Oblique comme style de la police. La valeur par d&eacute;faut
est Normal. Cet attribut est pris en charge par les deux navigateurs.
Line-height D&eacute;finit la hauteur de la ligne sur laquelle le texte est plac&eacute;. Ce param&egrave;tre fait g&eacute;n&eacute;ralement r&eacute;f&eacute;rence &agrave; la
notion d'interligne. Choisissez Normal pour que la hauteur de ligne soit calcul&eacute;e automatiquement en fonction de la
taille de la police ou entrez une valeur fixe et s&eacute;lectionnez une unit&eacute; de mesure. Cet attribut est pris en charge par les
deux navigateurs.
Text-decoration Ajoute un effet de soulignement, de barre sup&eacute;rieure, de texte barr&eacute; ou de clignotement du texte. La
valeur par d&eacute;faut pour le texte normal est Aucune. La valeur par d&eacute;faut pour le texte des liens est Soulign&eacute;. Si vous
d&eacute;finissez le param&egrave;tre de lien sur aucun, vous pouvez supprimer le soulignement des liens en d&eacute;finissant une classe
sp&eacute;ciale. Cet attribut est pris en charge par les deux navigateurs.
Font-weight Applique aux caract&egrave;res un niveau d'&eacute;paisseur sp&eacute;cifi&eacute; en valeur relative ou absolue. Normal &eacute;quivaut &agrave;
une valeur de 400 ; Gras &eacute;quivaut &agrave; une valeur de 700. Cet attribut est pris en charge par les deux navigateurs.
Font-variant D&eacute;finit la variante en petites capitales du texte. Dreamweaver n'affiche pas cet attribut dans la fen&ecirc;tre de
document. Cet attribut est pris en charge par Internet Explorer, mais non par Netscape Navigator.
Text-transform Permet de mettre en capitale la premi&egrave;re lettre de chaque mot de la s&eacute;lection ou de passer l'ensemble
du texte en majuscules ou minuscules. Cet attribut est pris en charge par les deux navigateurs.
Couleur D&eacute;finit la couleur du texte. Cet attribut est pris en charge par les deux navigateurs.
4 Une fois les options d&eacute;finies, s&eacute;lectionnez une autre cat&eacute;gorie CSS dans la partie gauche du panneau pour d&eacute;finir
des propri&eacute;t&eacute;s de style suppl&eacute;mentaires, puis cliquez sur OK.
D&eacute;finition des propri&eacute;t&eacute;s d'arri&egrave;re-plan de style CSS
Utilisez la cat&eacute;gorie Arri&egrave;re-plan de la bo&icirc;te de dialogue D&eacute;finition des r&egrave;gles CSS pour d&eacute;finir les param&egrave;tres d'arri&egrave;replan d'un style CSS. Les propri&eacute;t&eacute;s d'arri&egrave;re-plan s'appliquent &agrave; tout &eacute;l&eacute;ment d'une page Web. Rien ne vous emp&ecirc;che
d'assortir un &eacute;l&eacute;ment de page d'une couleur ou d'une image d'arri&egrave;re-plan (derri&egrave;re le texte, la page, un tableau, etc.).
Il vous est &eacute;galement possible de d&eacute;finir la position d'une image d'arri&egrave;re-plan.
1 Ouvrez le panneau Styles CSS (Maj+F11), si n&eacute;cessaire.
2 Double-cliquez sur une r&egrave;gle ou une propri&eacute;t&eacute; existante dans le volet sup&eacute;rieur du panneau Styles CSS.
3 Dans la bo&icirc;te de dialogue D&eacute;finition des r&egrave;gles de CSS, choisissez Arri&egrave;re-plan, puis d&eacute;finissez les propri&eacute;t&eacute;s de
style.
Laissez les propri&eacute;t&eacute;s suivantes vides si elles ne sont pas importantes pour ce style :
Couleur d'arri&egrave;re-plan D&eacute;finit la couleur d'arri&egrave;re-plan de l'&eacute;l&eacute;ment. Cet attribut est pris en charge par les deux
navigateurs.
Image d’arri&egrave;re-plan D&eacute;finit l'image d'arri&egrave;re-plan pour l'&eacute;l&eacute;ment. Cet attribut est pris en charge par les deux
navigateurs.
Derni&egrave;re mise &agrave; jour le 4/5/2011
142
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
R&eacute;p&eacute;tition de l'arri&egrave;re-plan D&eacute;termine comment l'image d'arri&egrave;re-plan doit &ecirc;tre r&eacute;p&eacute;t&eacute;e, le cas &eacute;ch&eacute;ant. Cet attribut
est pris en charge par les deux navigateurs.
• Pas de r&eacute;p&eacute;tition affiche l'image une seule fois, dans le coin sup&eacute;rieur gauche de l'&eacute;l&eacute;ment.
• R&eacute;p&eacute;ter cr&eacute;e une mosa&iuml;que horizontale et verticale de l'image derri&egrave;re l'&eacute;l&eacute;ment.
• R&eacute;p&eacute;ter-x et R&eacute;p&eacute;ter-y affichent respectivement un bandeau horizontal ou vertical. Les derni&egrave;res images sont
coup&eacute;es pour s'adapter aux dimensions exactes de l'&eacute;l&eacute;ment.
Remarque : La propri&eacute;t&eacute; R&eacute;p&eacute;tition vous permet de red&eacute;finir la balise body et de d&eacute;finir une image d'arri&egrave;re-plan sans
mosa&iuml;que ni r&eacute;p&eacute;tition.
Pi&egrave;ce jointe de l'arri&egrave;re-plan D&eacute;termine si l'image d'arri&egrave;re-plan reste fixe par rapport &agrave; sa position d'origine ou d&eacute;file
avec le contenu. Notez que certains navigateurs font toujours d&eacute;filer l'image avec son contenu. Cet attribut est pris en
charge par Internet Explorer, mais non par Netscape Navigator.
Position de l'arri&egrave;re-plan (X) et Position de l'arri&egrave;re-plan (Y) Sp&eacute;cifient la position initiale de l'image d'arri&egrave;re-plan par
rapport &agrave; l'&eacute;l&eacute;ment. Cette propri&eacute;t&eacute; peut &ecirc;tre utilis&eacute;e pour aligner une image d'arri&egrave;re-plan sur le centre de la page,
verticalement (X) et horizontalement (Y). Si la propri&eacute;t&eacute; Fixation est r&eacute;gl&eacute;e sur Fixe, cette position est relative &agrave; la
fen&ecirc;tre de document, pas &agrave; l'&eacute;l&eacute;ment.
4 Une fois les options d&eacute;finies, s&eacute;lectionnez une autre cat&eacute;gorie CSS dans la partie gauche du panneau pour d&eacute;finir
des propri&eacute;t&eacute;s de style suppl&eacute;mentaires, puis cliquez sur OK.
D&eacute;finition des propri&eacute;t&eacute;s de bloc de style CSS
La cat&eacute;gorie Bloc de la bo&icirc;te de dialogue D&eacute;finition des r&egrave;gles CSS vous permet de d&eacute;finir les param&egrave;tres d'espacement
et d'alignement des balises et des propri&eacute;t&eacute;s.
1 Ouvrez le panneau Styles CSS (Maj+F11), si n&eacute;cessaire.
2 Double-cliquez sur une r&egrave;gle ou une propri&eacute;t&eacute; existante dans le volet sup&eacute;rieur du panneau Styles CSS.
3 Dans la bo&icirc;te de dialogue D&eacute;finition des r&egrave;gles de CSS, choisissez Bloc, puis d&eacute;finissez les propri&eacute;t&eacute;s de style
suivantes. (Ne d&eacute;finissez pas la propri&eacute;t&eacute; si elle n'est pas importante pour le style.)
Espacement des mots D&eacute;finit l'espace devant s&eacute;parer les mots. Pour d&eacute;finir une valeur sp&eacute;cifique, choisissez Valeur
dans le menu d&eacute;roulant, puis entrez une valeur num&eacute;rique. Dans le deuxi&egrave;me menu contextuel, choisissez une unit&eacute;
de mesure (par exemple, pixels, points, etc.).
Remarque : Vous pouvez indiquer des valeurs n&eacute;gatives, mais le r&eacute;sultat final variera selon le navigateur. Dreamweaver
n'affiche pas cet attribut dans la fen&ecirc;tre de document.
Espacement des lettres Augmente ou r&eacute;duit l'interlettrage. Une valeur n&eacute;gative (par exemple, -4) r&eacute;duit l'espacement
entre les caract&egrave;res. Les param&egrave;tres d'interlettrage ont priorit&eacute; sur les param&egrave;tres de justification du texte. Cet attribut
est pris en charge par Internet Explorer 4, mais non par Netscape Navigator 6.
Alignement vertical D&eacute;termine l'alignement vertical de l'&eacute;l&eacute;ment auquel il s'applique. Dreamweaver n'affiche cet
attribut dans la fen&ecirc;tre de document que lorsqu'il est appliqu&eacute; &agrave; la balise &lt;img&gt;.
Alignement du texte D&eacute;termine l'alignement du texte au sein de l'&eacute;l&eacute;ment. Cet attribut est pris en charge par les deux
navigateurs.
Retrait du texte D&eacute;termine le retrait de texte sur la premi&egrave;re ligne. Vous pouvez utiliser une valeur n&eacute;gative pour cr&eacute;er
un retrait n&eacute;gatif, mais le r&eacute;sultat final variera selon le navigateur. Dreamweaver n'affiche cet attribut dans la fen&ecirc;tre
de document que lorsqu'il est appliqu&eacute; aux &eacute;l&eacute;ments de niveau bloc. Cet attribut est pris en charge par les deux
navigateurs.
Derni&egrave;re mise &agrave; jour le 4/5/2011
143
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
Espace blanc D&eacute;termine la gestion des espaces au sein de l'&eacute;l&eacute;ment. Choisissez parmi les trois options suivantes :
Normal r&eacute;duit &agrave; un seul espace une suite &eacute;ventuelle de plusieurs caract&egrave;res d'espacement ; Pre g&egrave;re les espaces comme
si le texte &eacute;tait ins&eacute;r&eacute; &agrave; l'int&eacute;rieur d'une balise pre (tous les caract&egrave;res d'espacement, notamment les espaces,
tabulations et retours chariot, sont respect&eacute;s) ; Pas de retour sp&eacute;cifie que le texte peut uniquement &ecirc;tre renvoy&eacute; &agrave; la
ligne &agrave; l'apparition d'une balise br. Dreamweaver n'affiche pas cet attribut dans la fen&ecirc;tre de document. Cet attribut
est pris en charge par Netscape Navigator et par Internet Explorer 5.5.
Afficher D&eacute;termine le mode d'affichage d'un &eacute;l&eacute;ment, le cas &eacute;ch&eacute;ant. Aucune d&eacute;sactive l'affichage d'un &eacute;l&eacute;ment.
4 Une fois les options d&eacute;finies, s&eacute;lectionnez une autre cat&eacute;gorie CSS dans la partie gauche du panneau pour d&eacute;finir
des propri&eacute;t&eacute;s de style suppl&eacute;mentaires, puis cliquez sur OK.
D&eacute;finition des propri&eacute;t&eacute;s de bo&icirc;te de style CSS
La cat&eacute;gorie Bo&icirc;te de la bo&icirc;te de dialogue D&eacute;finition des r&egrave;gles CSS vous permet de d&eacute;finir les param&egrave;tres des balises
et des propri&eacute;t&eacute;s pour le positionnement des &eacute;l&eacute;ments sur la page.
Vous pouvez appliquer des param&egrave;tres individuels aux c&ocirc;t&eacute;s d'un &eacute;l&eacute;ment lors de la d&eacute;finition du remplissage et des
marges ou utiliser l'option Idem pour tous pour appliquer le m&ecirc;me param&egrave;tre &agrave; tous les c&ocirc;t&eacute;s d'un &eacute;l&eacute;ment.
1 Ouvrez le panneau Styles CSS (Maj+F11), si n&eacute;cessaire.
2 Double-cliquez sur une r&egrave;gle ou une propri&eacute;t&eacute; existante dans le volet sup&eacute;rieur du panneau Styles CSS.
3 Dans la bo&icirc;te de dialogue D&eacute;finition des r&egrave;gles de CSS, choisissez Bo&icirc;te, puis d&eacute;finissez les propri&eacute;t&eacute;s de style
suivantes. Ne d&eacute;finissez pas la propri&eacute;t&eacute; si elle n'est pas importante pour le style.
Largeur et Hauteur D&eacute;finissent la largeur et la hauteur de l'&eacute;l&eacute;ment.
Flottante D&eacute;termine de quel c&ocirc;t&eacute; les autres &eacute;l&eacute;ments, tels que le texte, les divs PA, les tableaux, etc., flottent autour
d'un &eacute;l&eacute;ment. Les autres &eacute;l&eacute;ments sont affich&eacute;s autour de l'&eacute;l&eacute;ment flottant, suivant la m&eacute;thode habituelle. Cet attribut
est pris en charge par les deux navigateurs.
Effacer D&eacute;finit les c&ocirc;t&eacute;s sur lesquels les &eacute;l&eacute;ments PA ne sont pas autoris&eacute;s. Si un &eacute;l&eacute;ment PA appara&icirc;t du c&ocirc;t&eacute; marqu&eacute;
dans Effacer, l'&eacute;l&eacute;ment poss&eacute;dant cet attribut passera sous le cadre. Cet attribut est pris en charge par les deux
navigateurs.
Remplissage D&eacute;finit la marge int&eacute;rieure, c'est-&agrave;-dire l'espace qui s&eacute;pare le contenu de l'&eacute;l&eacute;ment de sa bordure (ou sa
marge s'il ne comporte pas de bordure). D&eacute;sactivez l'option Idem pour tous si vous voulez d&eacute;finir un remplissage
diff&eacute;rent pour chaque c&ocirc;t&eacute; de l'&eacute;l&eacute;ment.
Idem pour tous Applique le m&ecirc;me remplissage aux bords sup&eacute;rieur, droit, inf&eacute;rieur et gauche de l'&eacute;l&eacute;ment.
Marge D&eacute;finit l'espace qui s&eacute;pare la bordure d'un &eacute;l&eacute;ment (ou son remplissage s'il ne comporte pas de bordure) d'un
autre &eacute;l&eacute;ment. Dreamweaver n'affiche cet attribut dans la fen&ecirc;tre de document que lorsqu'il est appliqu&eacute; aux &eacute;l&eacute;ments
de niveau bloc (paragraphes, en-t&ecirc;tes, listes, etc.). D&eacute;sactivez l'option Idem pour tous si vous voulez d&eacute;finir une marge
diff&eacute;rente pour chaque c&ocirc;t&eacute; de l'&eacute;l&eacute;ment.
Idem pour tous Applique la m&ecirc;me marge aux bords sup&eacute;rieur, droit, inf&eacute;rieur et gauche de l'&eacute;l&eacute;ment.
4 Une fois les options d&eacute;finies, s&eacute;lectionnez une autre cat&eacute;gorie CSS dans la partie gauche du panneau pour d&eacute;finir
des propri&eacute;t&eacute;s de style suppl&eacute;mentaires, puis cliquez sur OK.
D&eacute;finition des propri&eacute;t&eacute;s de bordure de style CSS
Le panneau Bordure de la bo&icirc;te de dialogue D&eacute;finition des r&egrave;gles CSS vous permet de d&eacute;finir les param&egrave;tres des
bordures des &eacute;l&eacute;ments, par exemple leur &eacute;paisseur, leur couleur et leur style.
1 Ouvrez le panneau Styles CSS (Maj+F11), si n&eacute;cessaire.
Derni&egrave;re mise &agrave; jour le 4/5/2011
144
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
2 Double-cliquez sur une r&egrave;gle ou une propri&eacute;t&eacute; existante dans le volet sup&eacute;rieur du panneau Styles CSS.
3 Dans la bo&icirc;te de dialogue D&eacute;finition des r&egrave;gles de CSS, choisissez Bordure, puis d&eacute;finissez les propri&eacute;t&eacute;s de style
suivantes. Ne d&eacute;finissez pas la propri&eacute;t&eacute; si elle n'est pas importante pour le style.
Type D&eacute;finit l'aspect de la bordure. L'affichage du style d&eacute;pend du navigateur. D&eacute;sactivez l'option Idem pour tous si
vous voulez d&eacute;finir un style de bordure diff&eacute;rent pour chaque c&ocirc;t&eacute; de l'&eacute;l&eacute;ment.
Idem pour tous Applique le m&ecirc;me style de bordure aux bords sup&eacute;rieur, droit, inf&eacute;rieur et gauche de l'&eacute;l&eacute;ment.
Largeur D&eacute;termine l'&eacute;paisseur de la bordure de l'&eacute;l&eacute;ment. Cet attribut est pris en charge par les deux navigateurs.
D&eacute;sactivez l'option Idem pour tous si vous voulez d&eacute;finir une &eacute;paisseur diff&eacute;rente pour chaque c&ocirc;t&eacute; de l'&eacute;l&eacute;ment.
Idem pour tous Applique la m&ecirc;me largeur de bordure aux bords sup&eacute;rieur, droit, inf&eacute;rieur et gauche de l'&eacute;l&eacute;ment.
Couleur D&eacute;finit la couleur de la bordure. Vous pouvez indiquer une couleur diff&eacute;rente pour chaque c&ocirc;t&eacute;, mais le
r&eacute;sultat final variera selon le navigateur. D&eacute;sactivez l'option Idem pour tous si vous voulez d&eacute;finir une couleur
diff&eacute;rente pour chaque c&ocirc;t&eacute; de l'&eacute;l&eacute;ment.
Idem pour tous Applique la m&ecirc;me couleur de bordure aux bords sup&eacute;rieur, droit, inf&eacute;rieur et gauche de l'&eacute;l&eacute;ment.
4 Une fois les options d&eacute;finies, s&eacute;lectionnez une autre cat&eacute;gorie CSS dans la partie gauche du panneau pour d&eacute;finir
des propri&eacute;t&eacute;s de style suppl&eacute;mentaires, puis cliquez sur OK.
D&eacute;finition des propri&eacute;t&eacute;s de liste de style CSS
La cat&eacute;gorie Liste de la bo&icirc;te de dialogue D&eacute;finition des r&egrave;gles CSS vous permet de d&eacute;finir les param&egrave;tres des balises de
liste, tels que la taille et le type des puces.
1 Ouvrez le panneau Styles CSS (Maj+F11), si n&eacute;cessaire.
2 Double-cliquez sur une r&egrave;gle ou une propri&eacute;t&eacute; existante dans le volet sup&eacute;rieur du panneau Styles CSS.
3 Dans la bo&icirc;te de dialogue D&eacute;finition des r&egrave;gles de CSS, choisissez Liste, puis d&eacute;finissez les propri&eacute;t&eacute;s de style
suivantes. Ne d&eacute;finissez pas la propri&eacute;t&eacute; si elle n'est pas importante pour le style.
Type de style de liste D&eacute;termine l'aspect des puces ou des num&eacute;ros. Cet attribut est pris en charge par les deux
navigateurs.
Image de style de liste Permet de choisir une image personnalis&eacute;e pour les puces. Cliquez sur Parcourir (Windows)
ou Choisir (Macintosh) pour s&eacute;lectionner une image ou tapez le chemin d'acc&egrave;s &agrave; celle-ci.
Position de style de liste D&eacute;termine si le texte de l'&eacute;l&eacute;ment de la liste est habill&eacute; et mis en retrait (ext&eacute;rieure) ou si le
texte habille la marge de gauche (int&eacute;rieure).
4 Une fois les options d&eacute;finies, s&eacute;lectionnez une autre cat&eacute;gorie CSS dans la partie gauche du panneau pour d&eacute;finir
des propri&eacute;t&eacute;s de style suppl&eacute;mentaires, puis cliquez sur OK.
D&eacute;finition des propri&eacute;t&eacute;s de positionnement de style CSS
Les propri&eacute;t&eacute;s de style Positionnement d&eacute;terminent la fa&ccedil;on dont le contenu associ&eacute; au style CSS s&eacute;lectionn&eacute; est
positionn&eacute; dans la page.
1 Ouvrez le panneau Styles CSS (Maj+F11), si n&eacute;cessaire.
2 Double-cliquez sur une r&egrave;gle ou une propri&eacute;t&eacute; existante dans le volet sup&eacute;rieur du panneau Styles CSS.
3 Dans la bo&icirc;te de dialogue D&eacute;finition des r&egrave;gles de CSS, choisissez Positionnement, puis d&eacute;finissez les propri&eacute;t&eacute;s de
style qui vous conviennent.
Derni&egrave;re mise &agrave; jour le 4/5/2011
145
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
Laissez les propri&eacute;t&eacute;s suivantes vides si elles ne sont pas importantes pour ce style :
Position D&eacute;termine la fa&ccedil;on dont le navigateur doit positionner l'&eacute;l&eacute;ment s&eacute;lectionn&eacute;, avec les options suivantes :
• Absolu place le contenu en fonction des coordonn&eacute;es indiqu&eacute;es dans les zones Emplacement par rapport &agrave; l'anc&ecirc;tre
PA ou relatif le plus proche, et &agrave; d&eacute;faut, par rapport au coin sup&eacute;rieur gauche de la page.
• Relatif place le bloc de contenu en fonction des coordonn&eacute;es indiqu&eacute;es dans les zones Emplacement, par rapport &agrave;
la position du bloc dans le flux de texte du document. Par exemple, si vous d&eacute;finissez pour un &eacute;l&eacute;ment une position
relative et des coordonn&eacute;es d'origine (en haut &agrave; gauche) de 20 px chacune, l'&eacute;l&eacute;ment sera d&eacute;plac&eacute; de 20 px vers la
droite et de 20 px vers le bas par rapport &agrave; sa position normale dans le flux. Les &eacute;l&eacute;ments peuvent aussi &ecirc;tre
positionn&eacute;s de mani&egrave;re relative, avec ou sans coordonn&eacute;es haut, gauche, droite ou bas, afin d'&eacute;tablir un contexte
pour les enfants PA.
• Fixe place le contenu en fonction des coordonn&eacute;es indiqu&eacute;es dans les zones Emplacement, par rapport au coin
sup&eacute;rieur gauche du navigateur. Le contenu restera fix&eacute; dans cette position tandis que l'utilisateur fera d&eacute;filer la page.
• Statique place le contenu &agrave; son emplacement dans le flux de texte. Il s'agit de la position par d&eacute;faut de tous les
&eacute;l&eacute;ments HTML positionnables.
Visibilit&eacute; D&eacute;termine la condition de l'affichage initial du contenu. Si vous ne sp&eacute;cifiez pas de propri&eacute;t&eacute; de visibilit&eacute;, le
contenu h&eacute;rite par d&eacute;faut de la valeur de cette propri&eacute;t&eacute; pour l'objet parent. La visibilit&eacute; par d&eacute;faut de la balise body est
visible. S&eacute;lectionnez l'une des options de visibilit&eacute; suivantes :
• Inherit h&eacute;rite de la propri&eacute;t&eacute; de visibilit&eacute; du parent du contenu.
• Visible affiche le contenu, quelle que soit la valeur du parent.
• Masqu&eacute; masque le contenu, quelle que soit la valeur du parent.
Index Z D&eacute;termine l'ordre de superposition du contenu. Les &eacute;l&eacute;ments ayant une valeur d'index Z sup&eacute;rieure s'affichent
par dessus les &eacute;l&eacute;ments ayant une valeur d'index Z inf&eacute;rieure (ou aucune valeur d'index Z). Les valeurs peuvent &ecirc;tre
positives ou n&eacute;gatives. (Si votre contenu est &agrave; position absolue, il est plus facile de modifier l'ordre de superposition &agrave;
l'aide du panneau El&eacute;ments PA).
D&eacute;bordement D&eacute;termine ce qui se passe si le contenu d'un conteneur (par exemple, une balise DIV ou P) d&eacute;passe la
taille de ce dernier. Ces propri&eacute;t&eacute;s contr&ocirc;lent l'extension de la mani&egrave;re suivante :
• Visible augmente la taille du conteneur pour que tout son contenu soit visible. Le conteneur s'agrandit vers le bas
et vers la droite.
• Masqu&eacute; conserve la taille du contenu et coupe tout contenu d&eacute;passant la taille. Aucune barre de d&eacute;filement n'est
affich&eacute;e.
• D&eacute;filement ajoute des barres de d&eacute;filement au conteneur, que le contenu d&eacute;passe ou non la taille du conteneur. Le
fait d'int&eacute;grer des barres de d&eacute;filement &eacute;vite la confusion caus&eacute;e par l'apparition et la disparition de barres de
d&eacute;filement dans un environnement dynamique. Dreamweaver n'affiche pas cette option dans la fen&ecirc;tre de
document.
• Auto ne fait appara&icirc;tre les barres de d&eacute;filement que lorsque le contenu du conteneur d&eacute;passe les limites de ce
dernier. Dreamweaver n'affiche pas cette option dans la fen&ecirc;tre de document.
Emplacement D&eacute;finit l'emplacement et la taille du bloc de contenu. La fa&ccedil;on dont le navigateur interpr&egrave;te
l'emplacement d&eacute;pend de l'option choisie pour l'attribut Type. Les valeurs relatives &agrave; la taille ne sont pas prises en
compte si le contenu du bloc de contenu exc&egrave;de la taille sp&eacute;cifi&eacute;e.
Les unit&eacute;s par d&eacute;faut pour l'emplacement et la taille sont les pixels. Vous pouvez &eacute;galement choisir les unit&eacute;s suivantes :
pc (picas), pt (points), in (pouces), mm (millim&egrave;tres), cm (centim&egrave;tres) ou % (pourcentage de la valeur &eacute;quivalente de
l'objet parent). Les abr&eacute;viations doivent suivre la valeur sans espace : par exemple, 3mm.
Derni&egrave;re mise &agrave; jour le 4/5/2011
146
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
D&eacute;tourage D&eacute;finit la partie du contenu qui est visible. Si vous indiquez une zone de d&eacute;tourage, vous pouvez la g&eacute;rer &agrave;
l'aide d'un langage de script tel que Java Script et modifier ces propri&eacute;t&eacute;s pour cr&eacute;er des effets sp&eacute;ciaux, par exemple
un effet de volet &agrave; l'ouverture. Ces effets de volet peuvent &ecirc;tre configur&eacute;s via le comportement Changer la propri&eacute;t&eacute;.
4 Une fois les options d&eacute;finies, s&eacute;lectionnez une autre cat&eacute;gorie CSS dans la partie gauche du panneau pour d&eacute;finir
des propri&eacute;t&eacute;s de style suppl&eacute;mentaires, puis cliquez sur OK.
D&eacute;finition des propri&eacute;t&eacute;s d'extension de style CSS
Les propri&eacute;t&eacute;s de style d'extensions comprennent les filtres, les sauts de page et les options de pointeur.
Remarque : Un certain nombre d'autres propri&eacute;t&eacute;s d'extension sont disponibles dans Dreamweaver, mais vous devez
passer par le panneau Styles CSS pour y acc&eacute;der. Vous pouvez afficher facilement une liste des propri&eacute;t&eacute;s d'extension
disponibles en ouvrant le panneau Styles CSS (Fen&ecirc;tre &gt; Styles CSS), puis cliquant sur le bouton Afficher la vue par
cat&eacute;gorie en bas du panneau et en d&eacute;veloppant la cat&eacute;gorie Extensions.
1 Ouvrez le panneau Styles CSS (Maj+F11), si n&eacute;cessaire.
2 Double-cliquez sur une r&egrave;gle ou une propri&eacute;t&eacute; existante dans le volet sup&eacute;rieur du panneau Styles CSS.
3 Dans la bo&icirc;te de dialogue D&eacute;finition des r&egrave;gles de CSS, choisissez Extensions, puis d&eacute;finissez les propri&eacute;t&eacute;s de style
suivantes. Ne d&eacute;finissez pas la propri&eacute;t&eacute; si elle n'est pas importante pour le style.
Saut de page avant Force un saut de page en cas d'impression de la page, avant ou apr&egrave;s l'objet contr&ocirc;l&eacute; par ce style.
Choisissez l'option que vous voulez d&eacute;finir dans le menu d&eacute;roulant. Cet attribut n'est pas pris en charge par la version
4.0 des navigateurs, mais peut l'&ecirc;tre dans les versions ult&eacute;rieures.
Curseur Modifie l'aspect du pointeur lorsque celui-ci passe au-dessus de l'objet contr&ocirc;l&eacute; par ce style. Choisissez
l'option que vous voulez d&eacute;finir dans le menu d&eacute;roulant. Cet attribut est pris en charge par Internet Explorer 4.0 et
versions ult&eacute;rieures et par Netscape Navigator 6.
Filtre Applique des effets sp&eacute;ciaux, dont des effets de flou et de n&eacute;gatif, &agrave; l'objet contr&ocirc;l&eacute; par ce style. S&eacute;lectionnez un
effet dans le menu contextuel.
4 Une fois les options d&eacute;finies, s&eacute;lectionnez une autre cat&eacute;gorie CSS dans la partie gauche du panneau pour d&eacute;finir
des propri&eacute;t&eacute;s de style suppl&eacute;mentaires, puis cliquez sur OK.
Modification d'une r&egrave;gle CSS
Vous pouvez facilement modifier les r&egrave;gles internes et externes appliqu&eacute;es &agrave; un document.
Lorsque vous modifiez une feuille de style CSS qui contr&ocirc;le du texte dans votre document, vous reformatez
instantan&eacute;ment tout ce texte. Les modifications apport&eacute;es &agrave; une feuille de style externe se r&eacute;percutent sur tous les
documents auxquels elle est li&eacute;e.
Libre &agrave; vous de d&eacute;finir un &eacute;diteur externe &agrave; utiliser pour la modification des feuilles de style.
Modification d'une r&egrave;gle dans le panneau Styles CSS (mode Actuel)
1 Ouvrez le panneau Styles CSS en s&eacute;lectionnant Fen&ecirc;tre &gt; Styles CSS.
2 Cliquez sur le bouton Actuel, situ&eacute; en haut du panneau Styles CSS.
3 S&eacute;lectionnez un &eacute;l&eacute;ment de texte dans la page pour afficher ses propri&eacute;t&eacute;s.
4 Effectuez l’une des t&acirc;ches suivantes :
• Pour afficher la bo&icirc;te de dialogue D&eacute;finition des r&egrave;gles de CSS et effectuer vos modifications, double-cliquez sur
une propri&eacute;t&eacute; du volet R&eacute;sum&eacute; de la s&eacute;lection.
• S&eacute;lectionnez une propri&eacute;t&eacute; dans le volet R&eacute;sum&eacute; de la s&eacute;lection et modifiez-la dans le volet Propri&eacute;t&eacute;s inf&eacute;rieur.
Derni&egrave;re mise &agrave; jour le 4/5/2011
147
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
• S&eacute;lectionnez une r&egrave;gle dans le volet Toutes les r&egrave;gles, puis modifiez ses propri&eacute;t&eacute;s dans le volet Propri&eacute;t&eacute;s inf&eacute;rieur.
Remarque : Vous pouvez changer le comportement du double-clic lors de la modification CSS, ainsi que les autres
comportements, en changeant les pr&eacute;f&eacute;rences de Dreamweaver.
Modification d'une r&egrave;gle dans le panneau Styles CSS (mode Tous)
1 Ouvrez le panneau Styles CSS en s&eacute;lectionnant Fen&ecirc;tre &gt; Styles CSS.
2 Cliquez sur le bouton Tous, situ&eacute; en haut du panneau Styles CSS.
3 Effectuez l’une des t&acirc;ches suivantes :
• Pour afficher la bo&icirc;te de dialogue D&eacute;finition des r&egrave;gles de CSS et effectuer vos modifications, double-cliquez sur
une r&egrave;gle du volet Toutes les r&egrave;gles.
• S&eacute;lectionnez une r&egrave;gle dans le volet Toutes les r&egrave;gles, puis modifiez ses propri&eacute;t&eacute;s dans le volet Propri&eacute;t&eacute;s inf&eacute;rieur.
• S&eacute;lectionnez une r&egrave;gle dans le volet Toutes les r&egrave;gles, puis cliquez sur le bouton Modifier le style situ&eacute; dans le coin
inf&eacute;rieur droit du panneau Styles CSS.
Remarque : Vous pouvez changer le comportement du double-clic lors de la modification CSS, ainsi que les autres
comportements, en changeant les pr&eacute;f&eacute;rences de Dreamweaver.
Modification du nom d'un s&eacute;lecteur CSS
1 Dans le panneau Styles CSS (mode Tous), s&eacute;lectionnez le s&eacute;lecteur &agrave; modifier.
2 Cliquez &agrave; nouveau sur le s&eacute;lecteur afin de pouvoir en modifier le nom.
3 Apportez vos modifications, puis appuyez sur Entr&eacute;e (Windows) ou sur Retour (Macintosh).
Voir aussi
&laquo; D&eacute;finition des propri&eacute;t&eacute;s de texte dans l'inspecteur Propri&eacute;t&eacute;s &raquo; &agrave; la page 236
Ajout d'une propri&eacute;t&eacute; &agrave; une r&egrave;gle
Vous pouvez utiliser le panneau de styles CSS pour ajouter des propri&eacute;t&eacute;s aux r&egrave;gles.
1 Dans le panneau Styles CSS (Fen&ecirc;tre &gt; CSS), s&eacute;lectionnez une r&egrave;gle dans le volet Toutes les r&egrave;gles (mode Tous) ou
une propri&eacute;t&eacute; dans le volet R&eacute;sum&eacute; de la s&eacute;lection (mode Actuel).
2 Effectuez l’une des t&acirc;ches suivantes :
• Si la vue Afficher uniquement les propri&eacute;t&eacute;s d&eacute;finies est activ&eacute;e dans le volet Propri&eacute;t&eacute;s, cliquez sur le lien Ajouter
des propri&eacute;t&eacute;s et ajoutez une propri&eacute;t&eacute;.
• Si la vue Cat&eacute;gorie ou Liste est s&eacute;lectionn&eacute;e dans le volet Propri&eacute;t&eacute;s, donnez une valeur &agrave; la propri&eacute;t&eacute; s&eacute;lectionn&eacute;e.
Application, suppression ou changement du nom de styles de classe
Les styles de classe sont le seul type de style CSS qui peut &ecirc;tre appliqu&eacute; &agrave; n'importe quel texte dans un document, quelles
que soient les balises qui contr&ocirc;lent ce texte. Tous les styles de classe associ&eacute;s au document actif sont affich&eacute;s dans le
panneau Styles CSS (leur nom est pr&eacute;c&eacute;d&eacute; d'un point [.]) ainsi que dans le menu d&eacute;roulant Style dans l'inspecteur
Propri&eacute;t&eacute;s de texte.
M&ecirc;me si la plupart des styles sont actualis&eacute;s imm&eacute;diatement, il est conseill&eacute; d'afficher votre page dans un navigateur
et de v&eacute;rifier que le style a &eacute;t&eacute; appliqu&eacute; comme pr&eacute;vu. Lorsque vous appliquez plusieurs styles au m&ecirc;me texte, ils
risquent d'&ecirc;tre contradictoires et de produire des r&eacute;sultats inattendus.
Derni&egrave;re mise &agrave; jour le 4/5/2011
148
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
Lorsque vous affichez un aper&ccedil;u des styles d&eacute;finis dans une feuille de style CSS externe, n'oubliez pas d'enregistrer la
feuille de style afin que vos modifications soient appliqu&eacute;es lorsque vous afficherez la page dans un navigateur.
Voir aussi
&laquo; A propos des feuilles de style en cascade &raquo; &agrave; la page 129
&laquo; A propos des styles en cascade &raquo; &agrave; la page 131
&laquo; Panneau Styles CSS &raquo; &agrave; la page 134
Application d'un style de classe CSS
1 S&eacute;lectionnez le texte du document auquel vous voulez appliquer un style CSS.
Placez le curseur dans un paragraphe pour appliquer le style au paragraphe entier.
Si vous s&eacute;lectionnez une plage de texte au sein d'un m&ecirc;me paragraphe, le style CSS n'affectera que cette s&eacute;lection.
Pour indiquer la balise pr&eacute;cise &agrave; laquelle le style CSS doit &ecirc;tre appliqu&eacute;, s&eacute;lectionnez cette balise dans le s&eacute;lecteur situ&eacute;
dans la partie inf&eacute;rieure gauche de la fen&ecirc;tre de document.
2 Pour appliquer un style de classe, proc&eacute;dez de l'une des mani&egrave;res suivantes :
• Dans le panneau Styles CSS (Fen&ecirc;tre &gt; Styles CSS), s&eacute;lectionnez le mode Tous, cliquez avec le bouton droit de la
souris sur le nom du style &agrave; appliquer et choisissez Appliquer dans le menu contextuel.
• Dans l'inspecteur Propri&eacute;t&eacute;s HTML, choisissez le style de classe &agrave; appliquer dans le menu d&eacute;roulant Classe.
• Dans la fen&ecirc;tre de document, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfonc&eacute;e (Macintosh) sur le texte s&eacute;lectionn&eacute;, choisissez Styles CSS dans le menu contextuel, puis choisissez le style
&agrave; appliquer.
• Choisissez Format &gt; Styles CSS, puis s&eacute;lectionnez le style &agrave; appliquer dans le sous-menu.
Suppression d'un style de classe d'une s&eacute;lection
1 S&eacute;lectionnez l'objet ou le texte auquel le style ne doit plus &ecirc;tre appliqu&eacute;.
2 Dans l'inspecteur Propri&eacute;t&eacute;s HTML (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), choisissez Aucun dans le menu d&eacute;roulant Classe.
Changement de nom d'un style de classe
1 Dans le panneau Styles CSS, cliquez avec le bouton droit de la souris sur le style de classe CSS que vous souhaitez
renommer et s&eacute;lectionnez Renommer la classe.
Vous pouvez &eacute;galement renommer une classe en s&eacute;lectionnant Renommer la classe dans le menu d'options du
panneau Styles CSS.
2 Dans la bo&icirc;te de dialogue Renommer la classe, assurez-vous que la classe que vous souhaitez renommer est
s&eacute;lectionn&eacute;e dans le menu d&eacute;roulant Renommer la classe.
3 Dans la zone de texte Nouveau nom, saisissez le nouveau nom de la nouvelle classe et cliquez sur OK.
Si la classe que vous renommez se trouve dans la section head du document actif, Dreamweaver modifie le nom de la
classe ainsi que toutes les instances du nom de la classe se trouvant dans le document actif. Si la classe que vous
renommez est un fichier CSS externe, Dreamweaver s'ouvre et modifie le nom de la classe dans le fichier. Dreamweaver
lance &eacute;galement une bo&icirc;te de dialogue Rechercher et remplacer &agrave; l'&eacute;chelle du site pour vous permettre de rechercher
toutes les instances de l'ancien nom de la classe pouvant exister dans votre site.
Derni&egrave;re mise &agrave; jour le 4/5/2011
149
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
D&eacute;placement/exportation de r&egrave;gles CSS
Les fonctions de gestion des feuilles de styles CSS de Dreamweaver permettent de d&eacute;placer ou d'exporter ais&eacute;ment des
r&egrave;gles CSS vers des emplacements diff&eacute;rents. Vous pouvez d&eacute;placer des r&egrave;gles d'un document vers un autre, de la
section head d'un document vers une feuille de style externe, entre des fichiers CSS externes, etc.
Remarque : Si la r&egrave;gle que vous essayez de d&eacute;placer est en conflit avec une r&egrave;gle de la feuille de style de destination,
Dreamweaver affiche la bo&icirc;te de dialogue Il existe d&eacute;j&agrave; une r&egrave;gle de ce nom. Si vous d&eacute;cidez de d&eacute;placer la r&egrave;gle en conflit,
Dreamweaver place la r&egrave;gle d&eacute;plac&eacute;e &agrave; proximit&eacute; imm&eacute;diate de la r&egrave;gle avec laquelle elle est en conflit dans la feuille de
style de destination.
Voir aussi
&laquo; Insertion de code avec la barre d'outils de codage &raquo; &agrave; la page 321
D&eacute;placement/exportation de r&egrave;gles CSS vers une nouvelle feuille de style
1 Effectuez l’une des t&acirc;ches suivantes :
• Dans le panneau Styles CSS, s&eacute;lectionnez la ou les r&egrave;gles que vous souhaitez d&eacute;placer. Cliquez ensuite sur la
s&eacute;lection avec le bouton droit de la souris et choisissez D&eacute;placer les r&egrave;gles CSS dans le menu contextuel. Pour
s&eacute;lectionner plusieurs r&egrave;gles, appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant
avec la souris sur les r&egrave;gles &agrave; s&eacute;lectionner
• En mode Code, s&eacute;lectionnez la ou les r&egrave;gles &agrave; d&eacute;placer. Cliquez ensuite sur la s&eacute;lection avec le bouton droit de la
souris et s&eacute;lectionnez Styles CSS &gt; D&eacute;placer les r&egrave;gles CSS dans le menu contextuel.
Remarque : La s&eacute;lection partielle d'une r&egrave;gle se traduit par le d&eacute;placement de l'ensemble de la r&egrave;gle.
2 Dans la bo&icirc;te de dialogue D&eacute;placer dans une feuille de style externe, s&eacute;lectionnez l'option de nouvelle feuille de style
et cliquez sur OK.
3 Dans la bo&icirc;te de dialogue Enregistrer la feuille de style sous, entrez un nom pour la nouvelle feuille de style et cliquez
sur Enregistrer.
Lorsque vous cliquez sur Enregistrer, Dreamweaver enregistre une nouvelle feuille de style contenant les r&egrave;gles que
vous avez s&eacute;lectionn&eacute;es et l'associe au document actif.
Vous pouvez &eacute;galement d&eacute;placer des r&egrave;gles &agrave; l'aide de la barre d'outils de codage. La barre d'outil de codage est
disponible uniquement en mode Code.
D&eacute;placement/exportation de r&egrave;gles CSS vers une feuille de style existante
1 Effectuez l’une des t&acirc;ches suivantes :
• Dans le panneau Styles CSS, s&eacute;lectionnez la ou les r&egrave;gles que vous souhaitez d&eacute;placer. Cliquez ensuite sur la
s&eacute;lection avec le bouton droit de la souris et choisissez D&eacute;placer les r&egrave;gles CSS dans le menu contextuel. Pour
s&eacute;lectionner plusieurs r&egrave;gles, appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant
avec la souris sur les r&egrave;gles &agrave; s&eacute;lectionner
• En mode Code, s&eacute;lectionnez la ou les r&egrave;gles &agrave; d&eacute;placer. Cliquez ensuite sur la s&eacute;lection avec le bouton droit de la
souris et s&eacute;lectionnez Styles CSS &gt; D&eacute;placer les r&egrave;gles CSS dans le menu contextuel.
Remarque : La s&eacute;lection partielle d'une r&egrave;gle se traduit par le d&eacute;placement de l'ensemble de la r&egrave;gle.
2 Dans la bo&icirc;te de dialogue D&eacute;placer dans une feuille de style externe, s&eacute;lectionnez une feuille de style existante dans
le menu d&eacute;roulant ou naviguez jusqu'&agrave; une feuille de style existante et cliquez sur OK.
Remarque : Le menu d&eacute;roulant affiche toutes les feuilles de style qui sont li&eacute;es au document actif.
Derni&egrave;re mise &agrave; jour le 4/5/2011
150
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
Vous pouvez &eacute;galement d&eacute;placer des r&egrave;gles &agrave; l'aide de la barre d'outils de codage. La barre d'outil de codage est
disponible uniquement en mode Code.
R&eacute;organisation ou d&eacute;placement des r&egrave;gles CSS en les faisant glisser
❖ Dans le panneau Styles CSS (mode Tous), s&eacute;lectionnez une r&egrave;gle et faites-la glisser jusqu'&agrave; l'emplacement d&eacute;sir&eacute;.
Vous pouvez s&eacute;lectionner des r&egrave;gles et les faire glisser pour les r&eacute;organiser &agrave; l'int&eacute;rieur d'une feuille de style, ou
d&eacute;placer une r&egrave;gle vers une autre feuille de style ou dans la section head du document.
Vous pouvez d&eacute;placer plusieurs r&egrave;gles &agrave; la fois en appuyant sur la touche Ctrl (Windows) ou Commande (Macintosh)
tout en cliquant avec la souris sur plusieurs r&egrave;gles pour les s&eacute;lectionner.
S&eacute;lection de plusieurs r&egrave;gles avant de les d&eacute;placer
❖ Dans le panneau Styles CSS, appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant
avec la souris sur les r&egrave;gles que vous souhaitez s&eacute;lectionner.
Conversion d'un style CSS int&eacute;gr&eacute; en une r&egrave;gle CSS
L'utilisation de styles int&eacute;gr&eacute;s ne constitue pas une meilleure pratique recommand&eacute;e. Pour que vos styles CSS soient
plus clairs et mieux organis&eacute;s, vous pouvez convertir des styles int&eacute;gr&eacute;s en r&egrave;gles CSS r&eacute;sidant dans la section head du
document ou dans une feuille de style externe.
1 En mode Code (Affichage &gt; Code), s&eacute;lectionnez la totalit&eacute; de l'attribut de style qui contient le style CSS int&eacute;gr&eacute; &agrave;
convertir.
2 Cliquez dessus avec le bouton droit de la souris et s&eacute;lectionnez Styles CSS &gt; Convertir en r&egrave;gle les styles CSS
int&eacute;gr&eacute;s.
3 Dans la bo&icirc;te de dialogue Convertir style CSS, saisissez un nom de classe pour la nouvelle r&egrave;gle, puis proc&eacute;dez de
l'une des fa&ccedil;ons suivantes :
• Sp&eacute;cifiez une feuille de style dans laquelle vous souhaitez que la nouvelle r&egrave;gle CSS apparaisse et cliquez sur OK.
• S&eacute;lectionnez la section head du document en tant qu'emplacement dans lequel vous souhaitez que la nouvelle r&egrave;gle
CSS apparaisse et cliquez sur OK.
Vous pouvez &eacute;galement convertir des r&egrave;gles &agrave; l'aide de la barre d'outils de codage. La barre d'outil de codage est
disponible uniquement en mode Code.
Voir aussi
&laquo; Insertion de code avec la barre d'outils de codage &raquo; &agrave; la page 321
Etablissement d'un lien vers une feuille de style CSS externe
Si vous modifiez une feuille de style CSS externe, les changements sont refl&eacute;t&eacute;s dans tous les documents li&eacute;s &agrave; cette
feuille de style. Vous pouvez exporter les styles CSS trouv&eacute;s dans un document afin de cr&eacute;er une nouvelle feuille de
style CSS, et attacher ou cr&eacute;er un lien vers une feuille de style externe pour appliquer les styles trouv&eacute;s &agrave; cet endroit.
Vous pouvez attacher toute feuille de style de votre cr&eacute;ation &agrave; vos pages ou copier ces feuilles dans votre site. De plus,
Dreamweaver est fourni avec des feuilles de style pr&eacute;d&eacute;finies qui peuvent &ecirc;tre automatiquement plac&eacute;es dans votre site
et attach&eacute;es &agrave; vos pages.
1 Ouvrez le panneau Styles CSS en proc&eacute;dant de l'une des mani&egrave;res suivantes :
• Choisissez Fen&ecirc;tre &gt; Styles CSS.
• Appuyez sur les touches Maj + F11.
Derni&egrave;re mise &agrave; jour le 4/5/2011
151
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
2 Dans le panneau Styles CSS, cliquez sur le bouton Attacher une feuille de style. Il se trouve dans le coin inf&eacute;rieur
droit du panneau.
3 Effectuez l’une des t&acirc;ches suivantes :
• Cliquez sur le bouton Parcourir pour rechercher une feuille de style CSS externe.
• Entrez le chemin de la feuille de style dans le champ Fichier/URL.
4 Dans la zone Ajouter sous, s&eacute;lectionnez une des options suivantes :
• Pour cr&eacute;er un lien entre le document actif et une feuille de style externe, choisissez Lien. Cette s&eacute;lection a pour effet
de cr&eacute;er une balise de lien href dans le code HTML et de r&eacute;f&eacute;rencer l'URL de l'emplacement de la feuille de style
publi&eacute;e. Microsoft Internet Explorer et Netscape Navigator prennent tous deux en charge cette m&eacute;thode.
• Vous ne pouvez pas utiliser une balise de lien pour ajouter une r&eacute;f&eacute;rence d'une feuille de style externe &agrave; une autre.
Pour imbriquer des feuilles de style, vous devez utiliser une directive d'importation. La plupart des navigateurs
reconnaissent &eacute;galement la directive d'importation dans une page (plut&ocirc;t que simplement dans des feuilles de
style). Il existe quelques diff&eacute;rences dans la m&eacute;thode de r&eacute;solution des conflits entre propri&eacute;t&eacute;s lorsque des r&egrave;gles
se chevauchent dans des feuilles de style externes li&eacute;es et des feuilles import&eacute;es dans une page. Pour importer une
feuille de style externe, plut&ocirc;t que d'y cr&eacute;er un lien, choisissez Importer.
5 Dans le menu contextuel M&eacute;dias, sp&eacute;cifiez le m&eacute;dia cible de la feuille de style.
Pour plus d'informations sur les feuilles de style d&eacute;pendantes du m&eacute;dia, consultez le site Web du World Wide Web
Consortium &agrave; l'adresse www.w3.org/TR/CSS21/media.html.
6 Cliquez sur le bouton d'aper&ccedil;u pour v&eacute;rifier que la feuille de style applique effectivement les styles de votre choix &agrave;
la page active.
Si les styles appliqu&eacute;s ne sont pas ceux attendus, cliquez sur Annuler pour supprimer la feuille de style. La page retrouve
son aspect pr&eacute;c&eacute;dent.
7 Cliquez sur OK.
Voir aussi
&laquo; Cr&eacute;ation d'un document bas&eacute; sur un fichier d'exemple Dreamweaver &raquo; &agrave; la page 68
Modification d'une feuille de style CSS
En r&egrave;gle g&eacute;n&eacute;rale, une feuille de style CSS comprend une ou plusieurs r&egrave;gles. Vous pouvez modifier les diff&eacute;rentes
r&egrave;gles d'une feuille de style CSS &agrave; l'aide du panneau Styles CSS, ou bien vous pouvez travailler directement dans la
feuille de style CSS.
1 Dans le panneau Styles CSS (Fen&ecirc;tre &gt; Styles CSS), s&eacute;lectionnez le mode Tous.
2 Dans le volet Toutes les r&egrave;gles, double-cliquez sur le nom du style &agrave; modifier.
3 Dans la fen&ecirc;tre Document, modifiez la feuille de style en fonction des besoins, puis enregistrez-la.
Mise en forme du code CSS
Vous pouvez d&eacute;finir des pr&eacute;f&eacute;rences qui contr&ocirc;lent le formatage de votre code CSS chaque fois que vous cr&eacute;ez ou
modifiez une r&egrave;gle CSS &agrave; l'aide de l'interface Dreamweaver. Par exemple, vous pouvez d&eacute;finir des pr&eacute;f&eacute;rences qui
placeront toutes les propri&eacute;t&eacute;s CSS sur des lignes s&eacute;par&eacute;es, ins&eacute;rer une ligne vierge entre les r&egrave;gles CSS, etc.
Derni&egrave;re mise &agrave; jour le 4/5/2011
152
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
Lorsque vous d&eacute;finissez des pr&eacute;f&eacute;rences de formatage de code CSS, les pr&eacute;f&eacute;rences que vous s&eacute;lectionnez sont
automatiquement appliqu&eacute;es &agrave; toutes les nouvelles r&egrave;gles CSS que vous cr&eacute;ez. Toutefois, vous pouvez &eacute;galement
appliquer ces pr&eacute;f&eacute;rences manuellement &agrave; des documents individuels. Cela peut &ecirc;tre utile si vous poss&eacute;dez un
document HTML ou CSS plus ancien ayant besoin d'un formatage.
Remarque : Les pr&eacute;f&eacute;rences de formatage de code CSS s'appliquent uniquement aux r&egrave;gles CSS de feuilles de style externes
ou int&eacute;gr&eacute;es (mais pas aux styles int&eacute;gr&eacute;s).
Voir aussi
&laquo; Modification du format du code &raquo; &agrave; la page 312
D&eacute;finition des pr&eacute;f&eacute;rences de formatage du code CSS
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences.
2 Dans la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences, s&eacute;lectionnez la cat&eacute;gorie Format du code.
3 En regard de l'option Formatage avanc&eacute;, cliquez sur le bouton CSS.
4 Dans la bo&icirc;te de dialogue Options de mise en forme de la source CSS, s&eacute;lectionnez les options que vous souhaitez
appliquer &agrave; votre code source CSS. Un aper&ccedil;u de la feuille de style CSS telle qu'elle est modifi&eacute;e par les options
s&eacute;lectionn&eacute;es s'affiche dans la fen&ecirc;tre Aper&ccedil;u plus bas.
Mettre les propri&eacute;t&eacute;s en retrait avec D&eacute;finit la valeur de mise en retrait des propri&eacute;t&eacute;s au sein d'une r&egrave;gle. Vous pouvez
sp&eacute;cifier des tabulations ou des espaces.
Chaque propri&eacute;t&eacute; sur une ligne s&eacute;par&eacute;e Place chaque propri&eacute;t&eacute; au sein d'une r&egrave;gle sur une ligne s&eacute;par&eacute;e.
Accolade d’ouverture sur une ligne s&eacute;par&eacute;e Place l'accolade d'ouverture pour une r&egrave;gle sur une ligne s&eacute;par&eacute;e de celle
du s&eacute;lecteur.
Seulement si plusieurs propri&eacute;t&eacute;s Place les r&egrave;gles &agrave; une seule propri&eacute;t&eacute; sur la m&ecirc;me ligne que le s&eacute;lecteur.
Tous les s&eacute;lecteurs d’une r&egrave;gle sur la m&ecirc;me ligne Place tous les s&eacute;lecteurs d’une r&egrave;gle sur la m&ecirc;me ligne.
Ligne vierge pour s&eacute;parer les r&egrave;gles Ins&egrave;re une ligne vierge entre chaque r&egrave;gle.
5 Cliquez sur OK.
Remarque : Le formatage de code CSS h&eacute;rite &eacute;galement de la pr&eacute;f&eacute;rence Type de saut de ligne que vous avez d&eacute;finie dans
la cat&eacute;gorie Format de code de la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences.
Formatage manuel du code CSS dans une feuille de style CSS
1 Ouvrez une feuille de style CSS
2 Choisissez Commandes &gt; Appliquer le format source.
Les options de formatage que vous d&eacute;finissez dans les pr&eacute;f&eacute;rences de formatage de code CSS s'appliquent &agrave; l'ensemble
du document. Vous ne pouvez pas formater de s&eacute;lections individuelles.
Formatage manuel du code CSS int&eacute;gr&eacute;
1 Ouvrez une page HTML contenant du code CSS int&eacute;gr&eacute; dans la section head du document.
2 S&eacute;lectionnez une partie quelconque du code CSS.
3 Choisissez Commandes &gt; Appliquer le format source &agrave; la s&eacute;lection.
Les options de formatage que vous d&eacute;finissez dans les pr&eacute;f&eacute;rences de formatage de code CSS s'appliquent uniquement
&agrave; l'ensemble des r&egrave;gles CSS de la section Head du document.
Derni&egrave;re mise &agrave; jour le 4/5/2011
153
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
Remarque : Vous pouvez choisir Commandes &gt; Appliquer le format source pour mettre l'ensemble du document en
forme en fonction des pr&eacute;f&eacute;rences de mise en forme de code que vous avez sp&eacute;cifi&eacute;es.
D&eacute;sactivation/Activation du code CSS
La fonctionnalit&eacute; D&eacute;sactiver/Activer la propri&eacute;t&eacute; CSS permet de mettre en commentaire des parties de code CSS
depuis le panneau Styles CSS, sans devoir apporter directement des modifications dans le code. Lorsque vous mettez
en commentaire certaines parties du code CSS, vous pouvez voir quel effet des propri&eacute;t&eacute;s et des valeurs sp&eacute;cifiques ont
sur votre page.
Lorsque vous d&eacute;sactivez une propri&eacute;t&eacute; CSS, Dreamweaver ajoute des balises de commentaire CSS et un libell&eacute;
[d&eacute;sactiv&eacute;] &agrave; la propri&eacute;t&eacute; CSS que vous avez d&eacute;sactiv&eacute;e. Par la suite, vous pouvez ais&eacute;ment r&eacute;activer ou supprimer la
propri&eacute;t&eacute; CSS d&eacute;sactiv&eacute;e, selon vos pr&eacute;f&eacute;rences.
Vous trouverez, &agrave; l'adresse ci-apr&egrave;s, une vid&eacute;o de l'&eacute;quipe de conception de Dreamweaver qui pr&eacute;sente l'utilisation de
la fonction de d&eacute;sactivation/activation du code CSS : www.adobe.com/go/dwcs5css_fr.
1 Dans le volet Propri&eacute;t&eacute;s du panneau Styles CSS (Fen&ecirc;tre &gt; Styles CSS), s&eacute;lectionnez la Propri&eacute;t&eacute; que vous voulez
d&eacute;sactiver.
2 Cliquez sur l'ic&ocirc;ne D&eacute;sactiver/Activer la propri&eacute;t&eacute; CSS dans le coin inf&eacute;rieur droit du volet propri&eacute;t&eacute;s. Cette ic&ocirc;ne
s'affiche &eacute;galement si vous laissez le pointeur de la souris sur la gauche de la propri&eacute;t&eacute; proprement dite.
Lorsque vous cliquez sur l'ic&ocirc;ne D&eacute;sactiver/Activer la propri&eacute;t&eacute; CSS, une ic&ocirc;ne indiquant la d&eacute;sactivation s'affiche
&agrave; gauche de la propri&eacute;t&eacute;. Pour r&eacute;activer la propri&eacute;t&eacute;, cliquez sur l'ic&ocirc;ne D&eacute;sactiv&eacute; ou cliquez &agrave; l'aide du bouton droit
de la souris (Windows) ou en maintenant la touche Commande enfonc&eacute;e (Macintosh) sur la propri&eacute;t&eacute;, puis
choisissez Activer.
3 (Facultatif) Pour activer ou supprimer toutes les propri&eacute;t&eacute;s d&eacute;sactiv&eacute;es d'une r&egrave;gle s&eacute;lectionn&eacute;e, cliquez &agrave; l'aide du
bouton droit de la souris (Windows) ou en maintenant la touche Commande enfonc&eacute;e (Macintosh) sur n'importe
quelle r&egrave;gle ou propri&eacute;t&eacute; dans laquelle des propri&eacute;t&eacute;s sont d&eacute;sactiv&eacute;es, puis choisissez Activer tous les &eacute;l&eacute;ments
d&eacute;sactiv&eacute;s de la r&egrave;gle s&eacute;lectionn&eacute;e ou Supprimer tous les &eacute;l&eacute;ments d&eacute;sactiv&eacute;s de la r&egrave;gle s&eacute;lectionn&eacute;e.
Inspection de CSS en mode En direct
Le mode Inspection s'associe au mode En direct afin de vous aider &agrave; identifier rapidement les &eacute;l&eacute;ments HTML et les
styles CSS qui y sont associ&eacute;s. Lorsque le mode Inspection est activ&eacute;, vous pouvez survoler des &eacute;l&eacute;ments de votre page
afin d'afficher les attributs de mod&egrave;le de bo&icirc;te CSS de n'importe quel &eacute;l&eacute;ment de niveau bloc.
Remarque : Pour plus d'informations sur le mod&egrave;le de bo&icirc;te CSS, consultez la sp&eacute;cification CSS 2.1 (en anglais).
Le mode Inspection permet d'obtenir une repr&eacute;sentation visuelle du mod&egrave;le de bo&icirc;te. Vous pouvez en outre utiliser le
panneau Styles CSS pendant le survol d'&eacute;l&eacute;ments dans la fen&ecirc;tre Document. Lorsque le panneau Styles CSS est ouvert
en mode Actuel et que vous survolez un &eacute;l&eacute;ment de la page, les r&egrave;gles et propri&eacute;t&eacute;s du panneau Styles CSS sont
automatiquement mises &agrave; jour, de fa&ccedil;on &agrave; montrer les r&egrave;gles et propri&eacute;t&eacute;s de cet &eacute;l&eacute;ment. En outre, les modes et
panneaux associ&eacute;s &agrave; l'&eacute;l&eacute;ment que vous survolez sont &eacute;galement mis &agrave; jour (par exemple le mode Code, le s&eacute;lecteur de
balises, l'inspecteur Propri&eacute;t&eacute;s, etc.).
Vous trouverez, &agrave; l'adresse ci-apr&egrave;s, une vid&eacute;o de l'&eacute;quipe de conception de Dreamweaver qui pr&eacute;sente l'utilisation du
mode Inspection : http://www.adobe.com/go/dwcs5inspect_fr.
1 Lorsque le document est ouvert dans la fen&ecirc;tre Document, cliquez sur le bouton Inspecter (&agrave; c&ocirc;t&eacute; du bouton Mode
en direct dans la barre d'outils Document).
Remarque : Si vous n'&ecirc;tes pas d&eacute;j&agrave; en mode En direct, le mode Inspection l'active automatiquement.
Derni&egrave;re mise &agrave; jour le 4/5/2011
154
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
2 Survolez des &eacute;l&eacute;ments de la page afin d'afficher le mod&egrave;le de bo&icirc;te CSS. Le mode Inspection utilise des couleurs de
surbrillance diff&eacute;rentes pour la bordure, la marge, la marge int&eacute;rieure et le contenu.
3 (Facultatif) Appuyez sur la fl&egrave;che vers la gauche, sur votre clavier, afin de mettre en surbrillance le parent de
l'&eacute;l&eacute;ment actuellement en surbrillance. Appuyez sur la fl&egrave;che vers la droite pour r&eacute;tablir la mise en surbrillance de
l'&eacute;l&eacute;ment enfant.
4 (Facultatif) Cliquez sur un &eacute;l&eacute;ment pour verrouiller la s&eacute;lection en surbrillance.
Remarque : Si vous cliquez sur un &eacute;l&eacute;ment afin de verrouiller la s&eacute;lection en surbrillance, le mode Inspection est
d&eacute;sactiv&eacute;.
Voir aussi
&laquo; Pr&eacute;visualisation de pages dans Dreamweaver &raquo; &agrave; la page 299
&laquo; Panneau Styles CSS &raquo; &agrave; la page 134
V&eacute;rification de probl&egrave;mes de restitution CSS entre les navigateurs
Les fonctions de v&eacute;rification de la compatibilit&eacute; avec les navigateurs vous permettent de rechercher les combinaisons
de HTML et de feuilles de style CSS pouvant pr&eacute;senter des probl&egrave;mes dans certains navigateurs. Lorsque vous ex&eacute;cutez
une v&eacute;rification de compatibilit&eacute; avec les navigateurs sur un fichier ouvert, Dreamweaver analyse le fichier et signale
tous les probl&egrave;mes de rendu CSS potentiels dans le panneau R&eacute;sultats. Une estimation de confiance, illustr&eacute;e par un
quart de cercle, un demi cercle, trois-quarts de cercle ou un cercle plein, indique la probabilit&eacute; d'occurrence d'un bogue
(un quart de cercle plein indique une occurrence possible et un cercle complet plein indique une occurrence tr&egrave;s
probable). Pour chaque bogue potentiel d&eacute;tect&eacute;, Dreamweaver fournit &eacute;galement un lien direct &agrave; la documentation
relative au bogue sur Adobe CSS Advisor, un site Web qui d&eacute;taille les bogues de rendu de navigateur connus et propose
des solutions pour les corriger.
Par d&eacute;faut, la fonction de v&eacute;rification de la compatibilit&eacute; avec les navigateurs effectue une v&eacute;rification par rapport aux
navigateurs suivants : Firefox 1.5 ; Internet Explorer (Windows) 6.0 et 7.0 ; Internet Explorer (Macintosh) 5.2 ;
Netscape Navigator 8.0 ; Opera 8.0 et 9.0 ; Safari 2.0.
Cette fonction remplace l'ancienne fonction de v&eacute;rification du navigateur cible, mais conserve la fonctionnalit&eacute; CSS
de cette fonction. Cela signifie que la nouvelle fonction de v&eacute;rification de compatibilit&eacute; avec les navigateurs teste le
code de vos documents et d&eacute;termine s'il contient des propri&eacute;t&eacute;s ou des valeurs CSS non prises en charge par les
navigateurs cibles.
Trois niveaux de probl&egrave;mes potentiels de prise en charge de navigateur peuvent se pr&eacute;senter :
• Une erreur signale du code CSS pouvant causer un probl&egrave;me grave et visible au niveau du fonctionnement de
certains navigateurs, par exemple, en faisant dispara&icirc;tre une partie d'une page (une erreur d&eacute;signe par d&eacute;faut les
probl&egrave;mes de prise en charge de navigateur, de sorte que dans certains cas, du code ayant un effet inconnu peut &ecirc;tre
signal&eacute; comme une erreur).
• Un avertissement indique une portion de code CSS qui n'est pas prise en charge dans certains navigateurs, mais
sans pour autant causer de s&eacute;rieux probl&egrave;me d'affichage.
• Un message d'information indique du code qui n'est pas pris en charge dans certains navigateurs, mais n'a pas
d'effet visible.
Les v&eacute;rifications de compatibilit&eacute; avec les navigateurs n'alt&egrave;rent en rien le document.
Derni&egrave;re mise &agrave; jour le 4/5/2011
155
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
Voir aussi
&laquo; Validation des documents XML &raquo; &agrave; la page 338
CSS Advisor
Ex&eacute;cution d'une v&eacute;rification de compatibilit&eacute; avec les navigateurs
❖ S&eacute;lectionnez Fichier &gt; V&eacute;rifier la page &gt; Compatibilit&eacute; avec les navigateurs.
S&eacute;lection de l'&eacute;l&eacute;ment affect&eacute; par un probl&egrave;me d&eacute;tect&eacute;
❖ Double-cliquez sur le probl&egrave;me dans le panneau R&eacute;sultats.
Acc&egrave;s au probl&egrave;me suivant/pr&eacute;c&eacute;dent d&eacute;tect&eacute; dans le code
❖ Dans le menu V&eacute;rification de la compatibilit&eacute; avec les navigateurs de la barre d'outils du document, s&eacute;lectionnez
Probl&egrave;me suivant ou Probl&egrave;me pr&eacute;c&eacute;dent.
S&eacute;lection des navigateurs &agrave; faire v&eacute;rifier par Dreamweaver
1 Dans le panneau R&eacute;sultats (Fen&ecirc;tre &gt; R&eacute;sultats), s&eacute;lectionnez l'onglet V&eacute;rification de la compatibilit&eacute; avec les
navigateurs.
2 Cliquez sur la fl&egrave;che verte dans le coin sup&eacute;rieur gauche du panneau R&eacute;sultats, puis choisissez Param&egrave;tres.
3 S&eacute;lectionnez la case &agrave; cocher situ&eacute;e en regard des navigateurs &agrave; v&eacute;rifier.
4 Dans le menu d&eacute;roulant correspondant aux navigateurs s&eacute;lectionn&eacute;s, vous devez indiquer la version minimale
devant &ecirc;tre v&eacute;rifi&eacute;e.
Par exemple, pour v&eacute;rifier si la restitution CSS peut s'afficher dans Internet Explorer 5.0 et versions ult&eacute;rieures et dans
Netscape Navigator 7.0 et versions ult&eacute;rieures, cochez les cases correspondant aux noms de ces navigateurs, puis
s&eacute;lectionnez 5.0 dans le menu d&eacute;roulant Internet Explorer et 7.0 dans le menu d&eacute;roulant Netscape.
Exclusion d'un probl&egrave;me de la v&eacute;rification de compatibilit&eacute; avec les navigateurs
1 Ex&eacute;cutez une v&eacute;rification de compatibilit&eacute; avec les navigateurs.
2 Dans le panneau R&eacute;sultats, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfonc&eacute;e (Macintosh) sur le probl&egrave;me que vous souhaitez exclure des v&eacute;rifications futures.
3 Cliquez sur Ignorer le probl&egrave;me dans le menu contextuel.
Modification de la liste des probl&egrave;mes ignor&eacute;s
1 Dans le panneau R&eacute;sultats (Fen&ecirc;tre &gt; R&eacute;sultats), s&eacute;lectionnez l'onglet V&eacute;rification de la compatibilit&eacute; avec les
navigateurs.
2 Cliquez sur la fl&egrave;che verte dans le coin sup&eacute;rieur gauche du panneau R&eacute;sultats, puis choisissez Modifier la liste des
probl&egrave;mes ignor&eacute;s.
3 Dans le fichier Exceptions.xml, recherchez le probl&egrave;me que vous souhaitez supprimer de la liste des probl&egrave;mes
ignor&eacute;s et supprimez-le.
4 Enregistrez et fermez le fichier Exceptions.xml.
Sauvegarde d'un rapport de v&eacute;rification de compatibilit&eacute; avec les navigateurs
1 Ex&eacute;cutez une v&eacute;rification de compatibilit&eacute; avec les navigateurs.
2 Cliquez sur le bouton Enregistrer le rapport dans le c&ocirc;t&eacute; gauche du panneau R&eacute;sultats.
Derni&egrave;re mise &agrave; jour le 4/5/2011
156
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
Amenez le pointeur de la souris sur les boutons du panneau R&eacute;sultats pour afficher les info-bulles relatives &agrave; chaque
bouton.
Remarque : Les rapports ne sont pas enregistr&eacute;s automatiquement ; si vous souhaitez conserver une copie d'un rapport,
vous devez suivre la proc&eacute;dure ci-dessus pour l'enregistrer.
Affichage d'un rapport de v&eacute;rification de compatibilit&eacute; avec les navigateurs dans un
navigateur
1 Ex&eacute;cutez une v&eacute;rification de compatibilit&eacute; avec les navigateurs.
2 Cliquez sur le bouton Parcourir le rapport dans le c&ocirc;t&eacute; gauche du panneau R&eacute;sultats.
Amenez le pointeur de la souris sur les boutons du panneau R&eacute;sultats pour afficher les info-bulles relatives &agrave; chaque
bouton.
Ouverture du site Web Adobe CSS Advisor
1 Dans le panneau R&eacute;sultats (Fen&ecirc;tre &gt; R&eacute;sultats), s&eacute;lectionnez l'onglet V&eacute;rification de la compatibilit&eacute; avec les
navigateurs.
2 Cliquez sur le texte du lien situ&eacute; dans l'angle inf&eacute;rieur droit du panneau.
Utilisation des feuilles de style &agrave; la conception
Les feuilles de style &agrave; la conception permettent d'afficher ou de masquer la conception appliqu&eacute;e par une feuille de style
CSS lorsque vous travaillez dans un document Dreamweaver. Vous pouvez par exemple utiliser cette fonction pour
inclure ou exclure l'effet d'une feuille de style Macintosh ou Windows pendant la cr&eacute;ation d'une page.
Les feuilles de style &agrave; la conception s'appliquent uniquement lorsque vous travaillez dans un document ; lorsque la page
est affich&eacute;e dans une fen&ecirc;tre de navigateur, seuls les styles r&eacute;ellement attach&eacute;s au document ou qui y sont incorpor&eacute;s
apparaissent.
Remarque : Vous pouvez &eacute;galement activer ou d&eacute;sactiver des styles pour l'ensemble d'une page &agrave; l'aide de la barre d'outils
Rendu du style. Pour afficher la barre d'outils standard, choisissez Affichage &gt; Barres d'outils &gt; Rendu de style. Le bouton
Intervertir l'affichage des Styles CSS (le plus &agrave; droite) fonctionne ind&eacute;pendamment des autres boutons de support de la
barre d'outils.
Pour utiliser une feuille de style &agrave; la conception, proc&eacute;dez comme suit.
1 Ouvrez la bo&icirc;te de dialogue Feuilles de style &agrave; la conception en proc&eacute;dant de l'une des mani&egrave;res suivantes :
• Cliquez avec le bouton droit de la souris dans le panneau Styles CSS et choisissez Conception dans le menu
contextuel.
• Choisissez Format &gt; Styles CSS &gt; Conception.
2 Dans la bo&icirc;te de dialogue, d&eacute;finissez les options d'affichage ou de masquage de la feuille de style s&eacute;lectionn&eacute;e :
• Pour afficher une feuille de style CSS &agrave; la conception, cliquez sur le bouton plus (+) situ&eacute; au-dessus d'Afficher &agrave; la
conception uniquement, puis recherchez la feuille de style CSS &agrave; afficher dans la bo&icirc;te de dialogue S&eacute;lectionner une
feuille de style.
• Pour masquer une feuille de style CSS, cliquez sur le bouton plus (+) situ&eacute; au-dessus de Masquer &agrave; la conception,
puis recherchez la feuille de style CSS &agrave; masquer dans la bo&icirc;te de dialogue S&eacute;lectionner une feuille de style.
• Pour supprimer une feuille de style de l'une ou l'autre des listes, cliquez sur la feuille de style que vous voulez
supprimer, puis cliquez sur le bouton moins (–) appropri&eacute;.
3 Cliquez sur OK pour fermer la bo&icirc;te de dialogue.
Derni&egrave;re mise &agrave; jour le 4/5/2011
157
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
Le panneau Styles CSS est actualis&eacute; avec le nom de la feuille de style s&eacute;lectionn&eacute;e ainsi qu'un indicateur, &laquo; masqu&eacute; &raquo; ou
&laquo; concevoir &raquo;, selon l'&eacute;tat de la feuille de style.
Voir aussi
&laquo; Pr&eacute;sentation de la barre d'outils Rendu de style &raquo; &agrave; la page 11
Utilisation des exemples de feuilles de style de Dreamweaver
Dreamweaver est fourni avec des exemples de feuilles de style que vous pouvez appliquer &agrave; vos pages ou que vous
pouvez utiliser comme points de d&eacute;part pour cr&eacute;er vos propres styles.
1 Ouvrez le panneau Styles CSS en proc&eacute;dant de l'une des mani&egrave;res suivantes :
• Choisissez Fen&ecirc;tre &gt; Styles CSS.
• Appuyez sur les touches Maj+F11.
2 Dans le panneau Styles CSS, cliquez sur le bouton Attacher une feuille de style. (Dans le coin inf&eacute;rieur droit du
panneau.)
3 Dans la bo&icirc;te de dialogue Ajouter une feuille de style externe, cliquez sur Exemples de feuilles de style.
4 Dans la bo&icirc;te de dialogue Exemples de feuilles de style, s&eacute;lectionnez une feuille de style dans la liste d&eacute;roulante.
Lorsque vous s&eacute;lectionnez des feuilles de style dans la zone de liste, le formatage du texte et des couleurs s'affiche dans
le panneau d'aper&ccedil;u.
5 Cliquez sur le bouton Aper&ccedil;u pour appliquer la feuille de style et v&eacute;rifier que le style de votre choix est bien appliqu&eacute;
&agrave; la page active.
Si les styles appliqu&eacute;s ne sont pas ceux que vous escomptiez, s&eacute;lectionnez une autre feuille de style dans la liste et
cliquez sur le bouton Aper&ccedil;u pour visualiser les styles correspondants.
6 Par d&eacute;faut, Dreamweaver enregistre la feuille de style dans un dossier nomm&eacute; CSS au niveau juste en dessous de la
racine du site d&eacute;fini pour votre page. Si ce dossier n'existe pas, Dreamweaver le cr&eacute;e. Vous pouvez enregistrer le
fichier dans un autre emplacement en cliquant sur le bouton Parcourir pour rechercher un autre dossier.
7 Lorsque vous trouvez une feuille de style dont les r&egrave;gles correspondent &agrave; vos crit&egrave;res, cliquez sur OK.
Mise &agrave; jour des feuilles de style CSS dans un site Contribute
Les utilisateurs d'Adobe Contribute ne peuvent pas apporter de modifications &agrave; une feuille de style CSS. Pour modifier
une feuille de style pour un site Contribute, utilisez Dreamweaver.
1 Utilisez les outils de modification de feuille de style pr&eacute;sents dans Dreamweaver pour modifier les feuilles de style.
2 Avertissez les utilisateurs de Contribute qui travaillent &agrave; la publication des pages que vous utilisez une feuille de
style d&eacute;finie. Modifiez ensuite &agrave; nouveau ces pages pour voir la nouvelle feuille de style.
Les facteurs suivants doivent &ecirc;tre pris en compte lors de la mise &agrave; jour de feuilles de style pour un site Contribute :
• Si vous apportez des modifications &agrave; une feuille de style alors qu'un utilisateur de Contribute modifie une page qui
utilise cette feuille de style, l'utilisateur ne pourra pas observer les changements apport&eacute;s &agrave; la feuille de style tant que
la page ne sera pas publi&eacute;e.
• Si vous supprimez un style d'une feuille de style, le nom du style en question n'est pas supprim&eacute; des pages qui
utilisent cette feuille, mais, puisque le style n'existe plus, il n'est pas appliqu&eacute; &agrave; la page comme l'utilisateur de
Contribute pourrait s'y attendre. Ainsi, si un utilisateur vous d&eacute;clare que rien ne se passe lorsque celui-ci applique
un style donn&eacute;, il est possible que le style ait &eacute;t&eacute; supprim&eacute; de la feuille de style.
Derni&egrave;re mise &agrave; jour le 4/5/2011
158
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
Mise en forme des pages avec CSS
A propos de la mise en page CSS
Une mise en page CSS utilise le format de feuilles de style CSS, au lieu de tables ou de cadres HTML traditionnels, pour
organiser le contenu d'une page Web. Les &eacute;l&eacute;ments de base de la mise en forme CSS est la balise div : il s'agit d'une
balise HTML qui, la plupart du temps, sert de conteneur pour du texte, des images et d'autres &eacute;l&eacute;ments de page.
Lorsque vous cr&eacute;ez une mise en forme CSS, vous placez des balises div dans la page, leur ajoutez du contenu et les
positionnez en diff&eacute;rents endroits. A la diff&eacute;rence des cellules de tableau, qui ne peuvent exister qu'&agrave; l'int&eacute;rieur de
lignes et de colonnes d'un tableau, les balises div peut figurer n'importe o&ugrave; sur une page Web. Vous pouvez positionner
des balises div de fa&ccedil;on absolue (en indiquant des coordonn&eacute;es x et y) ou de fa&ccedil;on relative (en sp&eacute;cifiant leur distance
par rapport &agrave; d'autres &eacute;l&eacute;ments de page). Vous pouvez &eacute;galement placer des balises div afin de d&eacute;finir des &eacute;l&eacute;ments
flottants, des marges int&eacute;rieurs et des marges. Cette m&eacute;thode est privil&eacute;gi&eacute;e dans les normes Web modernes.
La cr&eacute;ation de mises en forme CSS enti&egrave;rement nouvelles peut s'av&eacute;rer difficile car il existe de tr&egrave;s nombreux moyens
de proc&eacute;der. Vous pouvez cr&eacute;er une mise en forme CSS simple &agrave; deux colonnes en d&eacute;finissant des &eacute;l&eacute;ments flottants,
des marges, des remplissages et d'autres propri&eacute;t&eacute;s CSS dans un nombre de combinaisons quasi illimit&eacute;. En outre, le
probl&egrave;me de restitution sur diff&eacute;rents types de navigateurs entra&icirc;ne un affichage al&eacute;atoire de certaines mises en forme
CSS qui sont correctement ou incorrectement restitu&eacute;es en fonction du navigateur utilis&eacute;. Dreamweaver vous permet
de cr&eacute;er facilement des pages &agrave; l'aide de mises en forme CSS en fournissant 16 mises en forme pr&eacute;d&eacute;finies qui
fonctionnent sur diff&eacute;rents types de navigateurs.
L'utilisation de mises en forme CSS pr&eacute;d&eacute;finies fournies avec Dreamweaver constitue la fa&ccedil;on la plus simple de cr&eacute;er
une page avec une mise en forme, mais vous pouvez &eacute;galement cr&eacute;er des mises en forme CSS &agrave; l'aide d'&eacute;l&eacute;ments &agrave;
positionnement absolu (&eacute;l&eacute;ments PA) de Dreamweaver. Dans Dreamweaver, un &eacute;l&eacute;ment PA est un &eacute;l&eacute;ment de page
HTML (plus pr&eacute;cis&eacute;ment, une balise div ou toute autre balise) auquel une position absolue est attribu&eacute;e. Toutefois,
du fait de leur positionnement absolu, les &eacute;l&eacute;ments PA de Dreamweaver pr&eacute;sentent l'inconv&eacute;nient de ne jamais adapter
leur position &agrave; la page en fonction de la taille de la fen&ecirc;tre du navigateur.
Si vous &ecirc;tes un utilisateur chevronn&eacute;, vous pouvez &eacute;galement ins&eacute;rer des balises div manuellement et leur appliquer
des styles de positionnement CSS pour cr&eacute;er des mises en page.
Pour plus d'informations sur les diff&eacute;rents types de mises en forme CSS, consultez l'article suivant de Gary White :
Layout 101 (en anglais).
Vous trouverez un didacticiel sur la cr&eacute;ation de mises en page CSS et l'utilisation d'autres am&eacute;liorations de CSS &agrave;
l'adresse www.adobe.com/go/learn_dw_comm05_fr.
A propos de la structure de mise en page CSS
Avant de lire cette section, vous devez vous &ecirc;tre familiaris&eacute; avec les concepts CSS de base.
Les &eacute;l&eacute;ments de base de la mise en forme CSS est la balise div : il s'agit d'une balise HTML qui, la plupart du temps, sert
de conteneur pour du texte, des images et d'autres &eacute;l&eacute;ments de page. L'exemple ci-dessous montre une page HTML qui
contient trois balises div distinctes : une balise container de grande taille, et deux autres balises (une balise sidebar et
une balise main content) situ&eacute;es &agrave; l'int&eacute;rieur de la balise container.
Derni&egrave;re mise &agrave; jour le 4/5/2011
159
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
B
A
C
A. Div Container B. Div sidebar C. Div Main Content
Voici le code correspondant &agrave; ces trois balises div dans le code HTML :
&lt;!--container div tag--&gt;
&lt;div id=&quot;container&quot;&gt;
&lt;!--sidebar div tag--&gt;
&lt;div id=&quot;sidebar&quot;&gt;
&lt;h3&gt;Sidebar Content&lt;/h3&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/p&gt;
&lt;p&gt;Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.&lt;/p&gt;
&lt;/div&gt;
&lt;!--mainContent div tag--&gt;
&lt;div id=&quot;mainContent&quot;&gt;
&lt;h1&gt; Main Content &lt;/h1&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo
convallis luctus rutrum.&lt;/p&gt;
&lt;p&gt;Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo
pede, rhoncus venenatis, tristique in, vulputate at, odio.&lt;/p&gt;
&lt;h2&gt;H2 level heading &lt;/h2&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo
convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
Dans l'exemple ci-dessus, aucun style n'est associ&eacute; aux balises div. Si aucune r&egrave;gle CSS n'est d&eacute;finie, chaque balise div
et son contenu prend un emplacement par d&eacute;faut sur la page. Toutefois, si chaque balise div poss&egrave;de un ID unique
(comme dans l'exemple ci-dessus), vous pouvez utiliser ces identificateurs pour cr&eacute;er des r&egrave;gles CSS qui, une fois
appliqu&eacute;es, modifient le style et le positionnement des balises div.
La r&egrave;gle CSS suivante, qui peut r&eacute;sider dans la section head du document ou dans un fichier CSS externe, cr&eacute;e des r&egrave;gles
de style pour la premi&egrave;re balise div (container) de la page :
#container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
La r&egrave;gle #container applique un style &agrave; la balise div container qui lui donne une largeur de 780 pixels, un arri&egrave;re-plan
blanc, aucune marge (depuis la gauche de la page), une bordure noire continue de 1 pixel et un texte align&eacute; &agrave; gauche.
Les r&eacute;sultats de l'application de la r&egrave;gle &agrave; la balise div container sont les suivants :
Derni&egrave;re mise &agrave; jour le 4/5/2011
160
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
A
B
C
Balise div Container, 780 pixels, pas de marge
A. Texte align&eacute; &agrave; gauche B. Arri&egrave;re-plan blanc C. Bordure noire pleine d'un pixel
La r&egrave;gle CSS suivante cr&eacute;e des r&egrave;gles de style pour la balise div sidebar :
#sidebar {
float: left;
width: 200px;
background: #EBEBEB;
padding: 15px 10px 15px 20px;
}
La r&egrave;gle #sidebar applique un style &agrave; la balise div sidebar qui lui donne une largeur de 200 pixels, un arri&egrave;re-plan gris,
un remplissage haut et bas de 15 pixels, un remplissage droite de 10 pixels et un remplissage gauche de 20 pixels.
L'ordre de remplissage par d&eacute;faut est le suivant : haut, droite, bas, gauche. En outre, la r&egrave;gle positionne la balise div
sidebar avec float: left, propri&eacute;t&eacute; qui pousse la balise div sidebar vers le c&ocirc;t&eacute; gauche de la balise div container. Les
r&eacute;sultats de l'application de la r&egrave;gle &agrave; la balise div sidebar sont les suivants :
A
B
B
Div sidebar, flottante &agrave; gache
A. Largeur de 200 pixels B. Remplissage haut et bas de 15 pixels
Enfin, la r&egrave;gle CSS pour la balise div container principale termine la mise en forme :
#mainContent {
margin: 0 0 0 250px;
padding: 0 20px 20px 20px;
}
Derni&egrave;re mise &agrave; jour le 4/5/2011
161
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
La r&egrave;gle #mainContent applique un style &agrave; la balise div main qui lui donne une marge gauche de 250 pixels, ce qui
correspond &agrave; un espace de 250 pixels entre le c&ocirc;t&eacute; gauche de la balise div container et le c&ocirc;t&eacute; gauche de la balise div
main content. En outre, la r&egrave;gle pr&eacute;voit 20 pixels d'espacement sur les c&ocirc;t&eacute;s droit, bas et gauche de la balise div main
content. Les r&eacute;sultats de l'application de la r&egrave;gle &agrave; la balise div mainContent sont les suivants :
A
B
C
Div main content, marge gauche de 250 pixels
A. remplissage gauche de 20 pixels B. remplissage droit de 20 pixels C. remplissage bas de 20 pixels
Le code complet ressemble &agrave; ce qui suit :
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot; /&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;style type=&quot;text/css&quot;&gt;
#container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
#sidebar {
float: left;
width: 200px;
background: #EBEBEB;
padding: 15px 10px 15px 20px;
}
#mainContent {
margin: 0 0 0 250px;
padding: 0 20px 20px 20px;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;!--container div tag--&gt;
Derni&egrave;re mise &agrave; jour le 4/5/2011
162
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
&lt;div id=&quot;container&quot;&gt;
&lt;!--sidebar div tag--&gt;
&lt;div id=&quot;sidebar&quot;&gt;
&lt;h3&gt;Sidebar Content&lt;/h3&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/p&gt;
&lt;p&gt;Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.&lt;/p&gt;
&lt;/div&gt;
&lt;!--mainContent div tag--&gt;
&lt;div id=&quot;mainContent&quot;&gt;
&lt;h1&gt; Main Content &lt;/h1&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo
convallis luctus rutrum.&lt;/p&gt;
&lt;p&gt;Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo
pede, rhoncus venenatis, tristique in, vulputate at, odio.&lt;/p&gt;
&lt;h2&gt;H2 level heading &lt;/h2&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo
convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
Remarque : L'exemple code ci-dessus est une version simplifi&eacute;e du code qui cr&eacute;e la mise en forme &agrave; deux colonnes avec
encadr&eacute; &agrave; gauche fixe lorsque vous cr&eacute;ez un nouveau document &agrave; l'aide des mises en formes pr&eacute;d&eacute;finies fournies avec
Dreamweaver.
Voir aussi
&laquo; Description des feuilles de style en cascade &raquo; &agrave; la page 129
Cr&eacute;ation d'une page avec une mise en forme CSS
Lors de la cr&eacute;ation d'une nouvelle page dans Dreamweaver, vous pouvez en cr&eacute;er une qui contient d&eacute;j&agrave; une mise en
forme CSS. Dreamweaver vous permet de choisir parmi 16 mises en forme CSS. En outre, vous pouvez cr&eacute;er vos
propres mises en forme CSS et les ajouter au dossier de configuration pour qu'elles figurent parmi les choix de mise en
forme dans la bo&icirc;te de dialogue Nouveau Document.
Dreamweaver Les mises en page CSS sont restitu&eacute;es correctement dans les navigateurs suivants : Firefox (Windows et
Macintosh) 1.0, 1.5, 2.0 et, and 3.6, Internet Explorer (Windows) 5.5, 6.0, 7.0 et 8.0, Opera (Windows et Macintosh)
8.0, 9.0 et 10.0, Safari 2.0, 3.0 et 4.0 et Chrome 3.0.
Vous trouverez un article expliquant comment utiliser les mises en forme CSS fournies avec Dreamweaver dans le P&ocirc;le
de d&eacute;veloppement Dreamweaver.
D'autres mises en forme CSS sont disponibles sur le site Adobe Dreamweaver Exchange.
Voir aussi
&laquo; Cr&eacute;ation d'une page vierge &raquo; &agrave; la page 64
&laquo; D&eacute;finition du type et du codage par d&eacute;faut d'un document &raquo; &agrave; la page 70
&laquo; Etablissement d'un lien vers une feuille de style CSS externe &raquo; &agrave; la page 150
Cr&eacute;ation d'une page avec une mise en forme CSS
1 Choisissez Fichier &gt; Nouveau.
Derni&egrave;re mise &agrave; jour le 4/5/2011
163
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
2 Dans la bo&icirc;te de dialogue Nouveau document, s&eacute;lectionnez la cat&eacute;gorie Mod&egrave;le vierge. Il s'agit de la s&eacute;lection par
d&eacute;faut.
3 Pour Type de page, s&eacute;lectionnez le type de page &agrave; cr&eacute;er.
Remarque : Vous devez s&eacute;lectionner un type de page HTML pour la mise en forme. Par exemple, vous pouvez s&eacute;lectionner
HTML, ColdFusion&reg;, PHP, etc. Vous ne pouvez pas cr&eacute;er de page ActionScript™, CSS, Library Item, JavaScript, XML,
XSLT ou ColdFusion Component avec une mise en forme CSS. Les types de page de la cat&eacute;gorie Autre dans la bo&icirc;te de
dialogue Nouveau document ne peuvent pas non plus inclure de mises en page CSS.
4 Pour Mise en forme, s&eacute;lectionnez la mise en forme CSS &agrave; utiliser. Vous pouvez choisir parmi 16 mises en forme
diff&eacute;rentes. La fen&ecirc;tre Aper&ccedil;u montre la mise en forme s&eacute;lectionn&eacute;e et en donne une br&egrave;ve description.
Les mises en forme CSS pr&eacute;d&eacute;finies fournissent les types de colonnes suivants :
Fixe La largeur de colonne est d&eacute;finie en pixels. La colonne n'est pas redimensionn&eacute;e selon la taille du navigateur ou
des param&egrave;tres de texte du visiteur du site.
Liquide La largeur de colonne est d&eacute;finie en tant que pourcentage de la largeur du navigateur du visiteur du site. La
mise en page s'adapte si le visiteur du site augmente ou diminue la largeur de son navigateur, mais pas en fonction des
param&egrave;tres de texte d&eacute;finis par le visiteur.
5 S&eacute;lectionnez un type de document dans le menu DocType.
6 S&eacute;lectionnez un emplacement pour le fichier CSS de la mise en forme dans le menu d&eacute;roulant CSS de mise en forme dans.
Ajouter &agrave; l'en-t&ecirc;te Ajoute le code CSS de mise en forme &agrave; l'en-t&ecirc;te de la page que vous cr&eacute;ez.
Cr&eacute;er un nouveau fichier Ajoute le code CSS de mise en forme &agrave; une nouvelle feuille de style CSS externe et associe la
nouvelle feuille de style &agrave; la page que vous cr&eacute;ez.
Lier au fichier existant Permet d'indiquer un fichier CSS existant qui contient d&eacute;j&agrave; les r&egrave;gles CSS requises pour la mise
en forme. Cette option est particuli&egrave;rement utile si vous voulez utiliser la m&ecirc;me mise en forme CSS (les r&egrave;gles CSS
figurant dans un fichier) dans plusieurs documents.
7 Proc&eacute;dez comme suit, au choix :
• Si vous avez s&eacute;lectionn&eacute; Ajouter &agrave; l'en-t&ecirc;te dans le menu d&eacute;roulant CSS de mise en forme dans (l'option par d&eacute;faut),
cliquez sur Cr&eacute;er.
• Si vous avez s&eacute;lectionn&eacute; Cr&eacute;er un nouveau fichier dans le menu d&eacute;roulant CSS de mise en forme, cliquez sur Cr&eacute;er,
puis sp&eacute;cifiez un nouveau nom pour le nouveau fichier externe dans la bo&icirc;te de dialogue Enregistrer la feuille de
style sous.
• Si vous avez s&eacute;lectionn&eacute; Lier au fichier existant dans le menu d&eacute;roulant CSS de mise en forme dans, ajoutez le fichier
externe dans la zone de texte Lier le fichier CSS en cliquant sur l'ic&ocirc;ne d'ajout de feuille de style, en renseignant la
bo&icirc;te de dialogue Associer feuille de style externe et en cliquant sur OK. Une fois que vous avez termin&eacute;, cliquez sur
Cr&eacute;er dans la bo&icirc;te de dialogue Nouveau document.
Remarque : Lorsque vous s&eacute;lectionnez l'option Lier au fichier existant, le fichier que vous sp&eacute;cifiez doit d&eacute;j&agrave; contenir les
r&egrave;gles correspondant au fichier CSS.
Lorsque vous placez le CSS de mise en forme dans un nouveau fichier ou lorsque vous le liez &agrave; un fichier existant,
Dreamweaver lie imm&eacute;diatement le fichier &agrave; la page HTML que vous cr&eacute;ez.
Remarque : Les Commentaires conditionnels pour Internet Explorer, qui permettent de contourner les probl&egrave;mes de
rendu dans IE, restent incorpor&eacute;s dans la section head du nouveau document de mise en forme CSS, m&ecirc;me si vous
s&eacute;lectionnez Nouveau fichier externe ou Fichier externe existant en tant qu'emplacement pour votre fichier CSS de mise
en forme;
Derni&egrave;re mise &agrave; jour le 4/5/2011
164
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
8 (Facultatif) Vous pouvez &eacute;galement lier des feuilles de style CSS &agrave; la nouvelle page (sans rapport avec la mise en
forme CSS) lors de la cr&eacute;ation de cette page. Pour ce faire, cliquez sur l'ic&ocirc;ne Ajouter une feuille de style au-dessus
du volet Lier le fichier CSS, puis s&eacute;lectionnez une feuille de style CSS.
Vous trouverez une description d&eacute;taill&eacute;e de ce processus dans l'article de David Powers &laquo; Automatically attaching a
style sheet to new documents &raquo; (en anglais).
Ajout de mises en forme CSS personnalis&eacute;es &agrave; la liste de choix
1 Cr&eacute;ez une page HTML contenant la mise en forme CSS que vous souhaitez ajouter &agrave; la liste de choix de la bo&icirc;te de
dialogue Nouveau document Le fichier CSS correspondant &agrave; la mise en forme doit r&eacute;sider dans la section head de
la page HTML.
Pour uniformiser votre mise en forme CSS personnalis&eacute;e avec les autres mises en formes fournies avec Dreamweaver,
vous devez enregistrer votre fichier HTML avec une extension .htm.
2 Ajoutez la page HTML au dossier Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts.
3 (Facultatif) Ajoutez une image d'aper&ccedil;u de votre mise en forme (par exemple, un fichier .gif ou .png) au dossier
Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts. Les images par d&eacute;faut fournies avec Dreamweaver sont
des fichiers PNG de 227 pixels de large x 193 pixels de haut.
Donnez &agrave; votre image d'aper&ccedil;u le m&ecirc;me nom de fichier que votre fichier de fa&ccedil;on &agrave; pouvoir l'identifier facilement. Par
exemple, si votre fichier HTML est nomm&eacute; myCustomLayout.htm, appelez votre image d'aper&ccedil;u
myCustomLayout.png.
4 (Facultatif) Cr&eacute;ez un fichier de notes pour votre mise en forme personnalis&eacute;e en ouvrant le dossier Adobe
Dreamweaver CS5\Configuration\BuiltIn\Layouts\_notes, en copiant et en collant les fichiers de notes existants
dans le m&ecirc;me dossier, et en renommant la copie en fonction de votre mise en forme personnalis&eacute;e. Par exemple,
vous pouvez copier le fichier oneColElsCtr.htm.mno et le renommer myCustomLayout.htm.mno.
5 (Facultatif) Apr&egrave;s avoir cr&eacute;&eacute; un fichier de notes pour votre mise en forme personnalis&eacute;e, vous pouvez ouvrir le
fichier et sp&eacute;cifier le nom de la mise en forme, sa description et une image d'aper&ccedil;u.
Utilisation des balises div
Insertion et modification de balises div
Vous pouvez cr&eacute;er des mises en page en ins&eacute;rant manuellement des balises div et en leur appliquant des styles de
positionnement CSS. Une balise div est une balise qui d&eacute;finit les divisions logiques dans le contenu d'une page Web.
Vous pouvez utiliser des balises div pour centrer des blocs de contenu, cr&eacute;er des effets de colonne, cr&eacute;er diff&eacute;rentes
zones de couleur, etc.
Si vous ne connaissez pas bien l'utilisation des balises div et des feuilles de style CSS pour cr&eacute;er des pages Web, vous
pouvez cr&eacute;er une mise en forme CSS &agrave; partir de l'une des mises en forme pr&eacute;d&eacute;finies fournies avec Dreamweaver. Si
vous n'&ecirc;tes pas &agrave; l'aise dans l'utilisation des feuilles de style CSS, mais que vous connaissez bien l'utilisation des
tableaux, vous pouvez &eacute;galement essayer d'utiliser des tableaux.
Remarque : Dreamweaver consid&egrave;re comme des &eacute;l&eacute;ments &agrave; positionnement absolu (&eacute;l&eacute;ments PA) toutes les balises div,
m&ecirc;me si vous n'avez pas cr&eacute;&eacute; ces balises div &agrave; l'aide de l'outil de dessin Div PA.
Derni&egrave;re mise &agrave; jour le 4/5/2011
165
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
Voir aussi
&laquo; A propos des &eacute;l&eacute;ments PA dans Dreamweaver &raquo; &agrave; la page 168
&laquo; Cr&eacute;ation d'une page avec une mise en forme CSS &raquo; &agrave; la page 162
&laquo; Pr&eacute;sentation de contenu &agrave; l'aide de tableaux &raquo; &agrave; la page 183
Insertion de balises div
Vous pouvez utiliser des balises div pour cr&eacute;er des blocs de mise en forme CSS et les placer dans votre document. Cette
m&eacute;thode est utile si une feuille de style CSS existante contenant des styles de positionnement est associ&eacute;e &agrave; votre
document. Dreamweaver vous permet d'ins&eacute;rer rapidement une balise div et de lui appliquer des styles existants.
1 Dans la fen&ecirc;tre de document, placez le point d'insertion &agrave; l'endroit o&ugrave; vous voulez ins&eacute;rer la balise div.
2 Effectuez l’une des t&acirc;ches suivantes :
• Choisissez Insertion &gt; Objets mise en forme &gt; Balise Div.
• Dans la cat&eacute;gorie Mise en forme du panneau Insertion, cliquez sur le bouton Ins&eacute;rer la balise Div
.
3 Parmi les options suivantes, d&eacute;finissez celles de votre choix :
Ins&eacute;rer Permet de choisir l'emplacement de la balise div et le nom de la balise s'il ne s'agit pas d'une nouvelle.
Classe Affiche le style de classe actuellement appliqu&eacute; &agrave; la balise. Si vous avez associ&eacute; une feuille de style, les classes qui
y sont d&eacute;finies s'affichent dans la liste. Ce menu permet de s&eacute;lectionner le style &agrave; appliquer &agrave; la balise.
ID Vous permet de modifier le nom utilis&eacute; pour identifier la balise div. Si vous avez associ&eacute; une feuille de style, les ID
qui y sont d&eacute;finis s'affichent dans la liste. Les ID des blocs d&eacute;j&agrave; pr&eacute;sents dans votre document ne sont pas r&eacute;pertori&eacute;s.
Remarque : Dreamweaver vous avertit si vous tapez un ID d&eacute;j&agrave; affect&eacute; &agrave; une autre balise dans votre document.
Nouvelle r&egrave;gle de CSS Ouvre la bo&icirc;te de dialogue Nouvelle r&egrave;gle CSS.
4 Cliquez sur OK.
La balise div s'affiche dans votre document sous la forme d'une zone contenant du texte d'espace r&eacute;serv&eacute;. Lorsque vous
d&eacute;placez le pointeur sur le bord de cette zone, Dreamweaver la met en surbrillance.
Si la balise div est plac&eacute;e de mani&egrave;re absolue, elle devient un &eacute;l&eacute;ment PA. Vous pouvez modifier les balises div qui ne
sont pas &agrave; positionnement absolu.
Voir aussi
&laquo; A propos des &eacute;l&eacute;ments PA dans Dreamweaver &raquo; &agrave; la page 168
&laquo; Cr&eacute;ation d'une page avec une mise en forme CSS &raquo; &agrave; la page 162
Modification des balises div
Apr&egrave;s avoir ins&eacute;r&eacute; une balise div, vous pouvez la manipuler ou lui ajouter du contenu.
Remarque : Les balises div qui sont positionn&eacute;es de mani&egrave;re absolue deviennent des &eacute;l&eacute;ments PA.
Les balises div ont des bordures visibles lorsque vous leur attribuez des bordures ou lorsque vous avez s&eacute;lectionn&eacute;
Contours en feuille CSS. (L'option Contours en feuille CSS est s&eacute;lectionn&eacute;e par d&eacute;faut dans le menu Affichage &gt;
Assistances visuelles.) Lorsque vous faites passer le pointeur sur une balise div, Dreamweaver la met en surbrillance.
Vous pouvez modifier la couleur de la mise en surbrillance ou d&eacute;sactiver la mise en surbrillance.
Derni&egrave;re mise &agrave; jour le 4/5/2011
166
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
Lorsque vous s&eacute;lectionnez une balise div, vous pouvez afficher et modifier les r&egrave;gles correspondantes dans le panneau
Styles CSS. Vous pouvez aussi ajouter du contenu &agrave; la balise div : placez simplement le point d'insertion &agrave; l'int&eacute;rieur
de la balise div, puis proc&eacute;dez &agrave; l'ajout du contenu comme vous le feriez pour celui d'une page.
Voir aussi
&laquo; A propos des &eacute;l&eacute;ments PA dans Dreamweaver &raquo; &agrave; la page 168
&laquo; Ouverture du panneau Styles CSS &raquo; &agrave; la page 137
Affichage et modification des r&egrave;gles appliqu&eacute;es &agrave; une balise div
1 Proc&eacute;dez de l'une des mani&egrave;res suivantes pour s&eacute;lectionner la balise div :
• Cliquez sur la bordure de la balise div.
Recherchez la surbrillance afin de voir les bordures.
• Cliquez &agrave; l'int&eacute;rieur de la balise div et appuyez sur les touches Ctrl+A (Windows) ou Commande+A (Macintosh)
&agrave; deux reprises.
• Cliquez &agrave; l'int&eacute;rieur de la balise div, puis s&eacute;lectionnez-la&agrave; partir du s&eacute;lecteur de balises figurant au bas de la fen&ecirc;tre
du document.
2 Choisissez Fen&ecirc;tre &gt; Styles CSS pour afficher le panneau Styles CSS, si besoin est.
Les r&egrave;gles appliqu&eacute;es &agrave; la balise div s'affichent dans le panneau.
3 Effectuez les modifications n&eacute;cessaires.
Placement du point d'insertion dans une balise div afin d'y ajouter du contenu
❖ Cliquez n'importe o&ugrave; &agrave; l'int&eacute;rieur des bordures de la balise.
Modification du texte de l'espace r&eacute;serv&eacute; dans une balise div
❖ S&eacute;lectionnez le texte, puis tapez un nouveau texte par-dessus ou appuyez sur la touche Suppr.
Remarque : Vous pouvez ajouter du contenu &agrave; la balise div exactement comme vous le feriez dans une page.
Modification de la couleur de surbrillance des balises div
Lorsque vous faites passer le pointeur sur le pourtour d'une balise div en mode Cr&eacute;ation, Dreamweaver met ses
bordures en surbrillance. Vous pouvez activer ou d&eacute;sactiver la surbrillance &agrave; votre convenance ou en modifier la
couleur de surbrillance dans la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences.
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh).
2 S&eacute;lectionnez la cat&eacute;gorie Surbrillance dans la liste de gauche.
3 Effectuez l'une des modifications suivantes, puis cliquez sur OK :
• Pour modifier la couleur de surbrillance des balises div, cliquez dans la case de couleur Survol et s&eacute;lectionnez une
couleur de surbrillance &agrave; l'aide du s&eacute;lecteur de couleur (ou tapez la valeur hexad&eacute;cimale correspondant &agrave; la couleur
de surbrillance dans la zone de texte).
• Pour activer ou d&eacute;sactiver la surbrillance des balises div, activez ou d&eacute;sactivez la case &agrave; cocher Afficher de l'option
Survol.
Remarque : Ces options ont un impact sur tous les objets (tableaux, par exemple) que Dreamweaver met en surbrillance
lorsque vous y d&eacute;placez le pointeur.
Derni&egrave;re mise &agrave; jour le 4/5/2011
167
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
Blocs de mise en forme CSS
Visualisation des blocs de mise en forme CSS
Vous pouvez visualiser les blocs de mise en forme CSS pendant que vous travaillez en mode Cr&eacute;ation. Un bloc de mise
en forme CSS est un &eacute;l&eacute;ment de page HTML que vous pouvez positionner n'importe o&ugrave; sur votre page. Un bloc de
mise en forme CSS est plus pr&eacute;cis&eacute;ment soit une balise div sans display:inline, soit un autre &eacute;l&eacute;ment de page qui
inclut les d&eacute;clarations CSS display:block, position:absolute ou position:relative. Les &eacute;l&eacute;ments suivants, par
exemple, sont consid&eacute;r&eacute;s comme des blocs de mise en forme CSS dans Dreamweaver:
• Une balise div
• Une image &agrave; laquelle est affect&eacute;e une position relative ou absolue
• Une balise a &agrave; laquelle le style display:block est affect&eacute;.
• Un paragraphe auquel une position relative ou absolue est affect&eacute;e
Remarque : Pour des raisons de rendu visuel, les blocs de mise en forme CSS n'incluent pas d'&eacute;l&eacute;ments en ligne (c'est-&agrave;dire d'&eacute;l&eacute;ments dont le code est d&eacute;fini dans une ligne de texte) ni d'&eacute;l&eacute;ments de blocs simples tels que des paragraphes.
Dreamweaver fournit de nombreuses assistances visuelles pour afficher les blocs de mise en forme CSS. Vous pouvez
par exemple activer des contours, des arri&egrave;re-plans et le mod&egrave;le de bo&icirc;te pour les blocs de mise en forme CSS en mode
Cr&eacute;ation. Vous pouvez aussi afficher des info-bulles qui indiquent les propri&eacute;t&eacute;s du bloc de mise en forme CSS
s&eacute;lectionn&eacute; lorsque vous placez le pointeur dessus.
La liste suivante d'assistances visuelles de bloc de mise en forme CSS d&eacute;crit ce que Dreamweaver rend visible pour
chacune d'elles :
Contours en feuille CSS Affiche les contours de tous les blocs de mise en forme CSS sur la page.
Arri&egrave;re-plans de mise en forme CSS Affiche les couleurs d'arri&egrave;re-plan affect&eacute;es temporairement de chaque bloc de mise
en forme CSS et masque toutes les autres couleurs d'arri&egrave;re-plan ou images qui apparaissent normalement sur la page.
Lorsque vous activez les assistances visuelles pour afficher les arri&egrave;re-plans de blocs de mise en forme CSS,
Dreamweaver affecte automatiquement une couleur d'arri&egrave;re-plan distincte &agrave; chaque bloc de mise en forme CSS.
((Dreamweaver s&eacute;lectionne les couleurs &agrave; l'aide d'un processus algorithmique. Vous n'avez aucun moyen d'attribuer
vous-m&ecirc;me les couleurs.) Les couleurs attribu&eacute;es sont visuellement diff&eacute;rentes et sont con&ccedil;ues pour vous aider &agrave;
distinguer les blocs de mise en forme CSS les uns des autres.
Mod&egrave;le de bo&icirc;te de mise en forme CSS Affiche le mod&egrave;le de bo&icirc;te (remplissages et marges) du bloc de mise en forme
CSS s&eacute;lectionn&eacute;.
Affichage des blocs de mise en forme CSS
Vous pouvez activer ou d&eacute;sactiver les assistances visuelles des blocs de calques CSS en fonction des besoins.
Affichage des contours des blocs de mise en forme CSS
❖ Choisissez Affichage &gt; Assistances visuelles &gt; Contours en feuille CSS.
Affichage des arri&egrave;re-plans de blocs de mise en forme CSS
❖ Choisissez Affichage &gt; Assistances visuelles &gt; Arri&egrave;re-plans de mise en forme CSS.
Affichage des mod&egrave;les de bo&icirc;te de blocs de mise en forme CSS
❖ Choisissez Affichage &gt; Assistances visuelles &gt; Mod&egrave;le de bo&icirc;te de mise en forme CSS.
Derni&egrave;re mise &agrave; jour le 4/5/2011
168
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
Pour acc&eacute;der aux options d'assistances visuelles des blocs de mise en forme CSS, vous pouvez aussi cliquer sur le
bouton Assistances visuelles de la barre d'outils du document.
Utilisation des assistances visuelles avec des &eacute;l&eacute;ments de blocs de mise en forme non-CSS
Vous pouvez utiliser une feuille de style &agrave; la conception pour afficher les arri&egrave;re-plans, les bordures ou le mod&egrave;le de
bo&icirc;te d'&eacute;l&eacute;ments qui ne sont pas normalement consid&eacute;r&eacute;s comme des blocs de mise en forme CSS. Pour ce faire, vous
devez d'abord cr&eacute;er une feuille de style &agrave; la conception qui affecte l'attribut display:block &agrave; l'&eacute;l&eacute;ment de page
appropri&eacute;.
1 Cr&eacute;ez une feuille de style en cascade (CSS) externe. Pour ce faire, choisissez Fichier &gt; Nouveau, puis s&eacute;lectionnez
Page de base dans la colonne Cat&eacute;gorie et CSS dans la colonne Page de base. Cliquez ensuite sur Cr&eacute;er.
2 Dans la nouvelle feuille de style, cr&eacute;ez des r&egrave;gles qui affectent l'attribut display:block aux &eacute;l&eacute;ments de page &agrave;
afficher en tant que blocs de mise en forme CSS.
Si, par exemple, vous souhaitez appliquer une couleur d'arri&egrave;re-plan aux paragraphes ou aux &eacute;l&eacute;ments de liste, vous
pouvez cr&eacute;er une feuille de style comprenant les r&egrave;gles suivantes :
p{
display:block;
}
li{
display:block;
}
3 Enregistrez le fichier.
4 En mode Cr&eacute;ation, ouvrez la page &agrave; laquelle vous souhaitez associer les nouveaux styles.
5 Choisissez Format &gt; Styles CSS &gt; Conception.
6 Dans la bo&icirc;te de dialogue Feuilles de style &agrave; la conception, cliquez sur le bouton plus (+) situ&eacute; au-dessus de la zone de
texte Afficher &agrave; la conception uniquement, s&eacute;lectionnez la feuille de style que vous venez de cr&eacute;er et cliquez sur OK.
7 Cliquez sur OK pour fermer la bo&icirc;te de dialogue Feuilles de style &agrave; la conception.
La feuille de style est associ&eacute;e &agrave; votre document. Si vous avez cr&eacute;&eacute; une feuille de style en suivant l'exemple pr&eacute;c&eacute;dent,
tous les paragraphes et &eacute;l&eacute;ments de liste seront format&eacute;s au moyen de l'attribut display:block. Vous pouvez ainsi
activer ou d&eacute;sactiver les assistances visuelles de bloc de mise en forme CSS pour les paragraphes et les &eacute;l&eacute;ments de liste.
Voir aussi
&laquo; Utilisation des feuilles de style &agrave; la conception &raquo; &agrave; la page 156
Utilisation d'&eacute;l&eacute;ments PA
A propos des &eacute;l&eacute;ments PA dans Dreamweaver
Un &eacute;l&eacute;ment PA (&eacute;l&eacute;ment &agrave; positionnement absolu) est un &eacute;l&eacute;ment de page HTML (plus pr&eacute;cis&eacute;ment, une balise div
ou toute autre balise) auquel une position absolue est attribu&eacute;e. Les &eacute;l&eacute;ments PA peuvent comporter du texte, des
images ou tout autre contenu &agrave; placer au sein d'un document HTML.
Dreamweaver vous permet d'effectuer la mise en forme d'une page &agrave; l'aide d'&eacute;l&eacute;ments PA. Vous pouvez placer les
&eacute;l&eacute;ments PA devant ou derri&egrave;re d'autres &eacute;l&eacute;ments PA, masquer certains d'entre eux et en montrer d'autres ou encore
d&eacute;placer les &eacute;l&eacute;ments PA &agrave; travers l'&eacute;cran. Vous pouvez placer une image d'arri&egrave;re-plan dans un &eacute;l&eacute;ment PA, puis
placer un deuxi&egrave;me &eacute;l&eacute;ment PA contenant du texte avec un arri&egrave;re-plan transparent devant ce dernier.
Derni&egrave;re mise &agrave; jour le 4/5/2011
169
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
Les &eacute;l&eacute;ments PA sont g&eacute;n&eacute;ralement des balises div PA. (Ce sont les types d'&eacute;l&eacute;ments PA que Dreamweaver ins&egrave;re par
d&eacute;faut.) Mais n'oubliez pas que vous pouvez classifier tout &eacute;l&eacute;ment HTML (par exemple, une image) en tant
qu'&eacute;l&eacute;ment PA en lui affectant une position absolue. Tous les &eacute;l&eacute;ments PA (et pas uniquement les balises div PA)
s'affichent dans le panneau El&eacute;ments PA.
Code HTML pour &eacute;l&eacute;ments div PA
Dreamweaver cr&eacute;e des &eacute;l&eacute;ments PA en utilisant la balise div. Lorsque vous cr&eacute;ez un &eacute;l&eacute;ment PA &agrave; l'aide de l'outil
Tracer un div pour un &eacute;l&eacute;ment PA, Dreamweaver ins&egrave;re une balise div dans le document et attribue &agrave; la balise div une
valeur ID (DivAP1 par d&eacute;faut au premier div que vous tracez, DivAP2, au deuxi&egrave;me div que vous tracez, etc.). Vous
pouvez renommer la div PA &agrave; votre guise par la suite au moyen du panneau El&eacute;ments PA ou de l'inspecteur Propri&eacute;t&eacute;s.
Dreamweaver utilise &eacute;galement des styles CSS int&eacute;gr&eacute;s dans la section head du document pour positionner la balise
div PA et pour lui affecter ses dimensions exactes.
Ce qui suit est un &eacute;chantillon de code HTML pour une div PA :
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot; /&gt;
&lt;title&gt;Sample AP Div Page&lt;/title&gt;
&lt;style type=&quot;text/css&quot;&gt;
&lt;!-#apDiv1 {
position:absolute;
left:62px;
top:67px;
width:421px;
height:188px;
z-index:1;
}
--&gt;
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id=&quot;apDiv1&quot;&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
Vous pouvez d&eacute;finir les propri&eacute;t&eacute;s des balises div PA (ou tout &eacute;l&eacute;ment PA) de votre page, y compris les coordonn&eacute;es
x et y, l'index z (&eacute;galement appel&eacute; ordre de superposition) et la visibilit&eacute;.
Insertion d'une balise div PA
Dreamweaver vous permet de cr&eacute;er facilement des balises div PA sur votre page et de les positionner. Vous pouvez
&eacute;galement cr&eacute;er des balises div PA imbriqu&eacute;es.
Lorsque vous ins&eacute;rez une div PA, Dreamweaver affiche par d&eacute;faut sa bordure en mode Cr&eacute;ation et met le bloc en
surbrillance lorsque vous passez le pointeur dessus. Vous pouvez d&eacute;sactiver l'assistance visuelle qui affiche les contours
des divs PA (ou de tout &eacute;l&eacute;ment PA) en d&eacute;sactivant Contours des &eacute;l&eacute;ments PA et Contours en feuille CSS dans le menu
Affichage &gt; Assistances visuelles. Vous pouvez &eacute;galement activer les arri&egrave;re-plans et le mod&egrave;le de bo&icirc;te pour les
&eacute;l&eacute;ments PA en guise d'aide visuelle lors de la conception.
Une fois une balise div PA cr&eacute;&eacute;e, vous pouvez y ajouter du contenu en pla&ccedil;ant simplement votre point d'insertion
dessus, puis en ajoutant le contenu comme vous le feriez pour celui d'une page.
Derni&egrave;re mise &agrave; jour le 4/5/2011
170
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
Voir aussi
&laquo; S&eacute;lection d'&eacute;l&eacute;ments PA &raquo; &agrave; la page 175
&laquo; Modification de la couleur de surbrillance des balises div &raquo; &agrave; la page 166
&laquo; Visualisation des blocs de mise en forme CSS &raquo; &agrave; la page 167
Tra&ccedil;age d'une seule balise div PA ou de plusieurs balises div PA &agrave; la suite
1 Dans la cat&eacute;gorie Mise en forme du panneau Insertion, cliquez sur le bouton Tracer un div pour un &eacute;l&eacute;ment PA
.
2 Dans la fen&ecirc;tre de cr&eacute;ation du document, proc&eacute;dez de l'une des mani&egrave;res suivantes :
• Faites glisser le pointeur pour dessiner une seule div PA.
• Maintenez la touche Ctrl (Windows) ou Commande (Macintosh) enfonc&eacute;e pour dessiner plusieurs divs PA &agrave; la
suite.
Vous pouvez continuer &agrave; tracer des divs PA tant que vous n'avez pas rel&acirc;ch&eacute; les touches Ctrl ou Commande.
Insertion d'une div PA &agrave; un endroit pr&eacute;cis du document
❖ Placez le point d'insertion dans la fen&ecirc;tre de document, puis choisissez Insertion &gt; Objets mise en forme &gt; Div PA.
Remarque : La balise associ&eacute;e &agrave; la div PA est plac&eacute;e &agrave; l'emplacement sur lequel vous avez cliqu&eacute; dans la fen&ecirc;tre de
document. Le rendu visuel de la balise div PA est donc susceptible d'affecter les autres &eacute;l&eacute;ments de page (le texte par
exemple) qui l'entourent.
Placement du point d'insertion dans une div PA
❖ Cliquez n'importe o&ugrave; &agrave; l'int&eacute;rieur des bordures de la balise div PA.
Le contour de la div PA est en surbrillance et la poign&eacute;e de s&eacute;lection appara&icirc;t, mais la balise elle-m&ecirc;me n'est pas
s&eacute;lectionn&eacute;e.
Affichage des bordures d'une div PA
❖ Choisissez Affichage &gt; Assistances visuelles, puis s&eacute;lectionnez Contours des divs PA ou Contours en feuille CSS.
Remarque : La s&eacute;lection simultan&eacute;e des deux options a le m&ecirc;me effet.
Masquage des bordures d'une div PA
❖ Choisissez Affichage &gt; Assistances visuelles, puis d&eacute;s&eacute;lectionnez Contours des divs PA et Contours en feuille CSS.
Utilisation de divs PA imbriqu&eacute;es
Une div PA imbriqu&eacute;e est une balise div PA dont le code est contenu &agrave; l'int&eacute;rieur des balises d'une autre div PA. Par
exemple, le code suivant montre deux div PA qui ne sont pas imbriqu&eacute;es, et deux divs PA qui le sont :
&lt;div id=&quot;apDiv1&quot;&gt;&lt;/div&gt;
&lt;div id=&quot;apDiv2&quot;&gt;&lt;/div&gt;
&lt;div id=&quot;apDiv3&quot;&gt;
&lt;div id=&quot;apDiv4&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
Derni&egrave;re mise &agrave; jour le 4/5/2011
171
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
La repr&eacute;sentation graphique de ces deux groupes de balises div PA pourrait ressembler &agrave; ce qui suit :
Dans le premier groupe de balises div, une div se trouve au dessus de l'autre dans la page. Dans le deuxi&egrave;me groupe, la
balise div apDiv4 se trouve effectivement &agrave; l'int&eacute;rieur de la balise div apDiv3. (Vous pouvez modifier l'ordre de
superposition des divs PA dans le panneau El&eacute;ments PA.)
L'imbrication est souvent utilis&eacute;e pour regrouper des balises div PA. Une balise div PA imbriqu&eacute;e se d&eacute;place avec sa
div PA parent et peut &ecirc;tre configur&eacute;e pour h&eacute;riter de la visibilit&eacute; de son parent.
Vous pouvez activer l'option Imbrication si vous voulez que les divs PA que vous dessinez &agrave; l'int&eacute;rieur d'autres div PA
soient automatiquement imbriqu&eacute;es. Pour cr&eacute;er une div PA &agrave; l'int&eacute;rieur ou par dessus une autre div PA, vous devez
aussi d&eacute;s&eacute;lectionner l'option Emp&ecirc;cher les chevauchements.
Dessin d'une div PA imbriqu&eacute;e
1 Assurez-vous que l'option Emp&ecirc;cher les chevauchements est d&eacute;s&eacute;lectionn&eacute;e dans le panneau El&eacute;ments PA (Fen&ecirc;tre
&gt; El&eacute;ments PA).
2 Dans la cat&eacute;gorie Mise en forme du panneau Insertion, cliquez sur le bouton Tracer un div pour un &eacute;l&eacute;ment PA
.
3 Dans la fen&ecirc;tre de cr&eacute;ation du document, dessinez une balise div PA &agrave; l'int&eacute;rieur d'une div PA existante en faisant
glisser la souris.
Si l'option Imbrication est d&eacute;sactiv&eacute;e dans les pr&eacute;f&eacute;rences des &eacute;l&eacute;ments PA, maintenez la touche Alt (Windows) ou
Option (Macintosh) enfonc&eacute;e et faites glisser une div PA pour l'imbriquer dans une div PA existante.
Les divs PA imbriqu&eacute;es peuvent s'afficher diff&eacute;remment suivant les navigateurs. Lorsque vous cr&eacute;ez des divs PA
imbriqu&eacute;es, contr&ocirc;lez r&eacute;guli&egrave;rement leur affichage dans diff&eacute;rents navigateurs au cours du processus de cr&eacute;ation.
Insertion d'une div PA imbriqu&eacute;e
1 Assurez-vous que l'option Emp&ecirc;cher les chevauchements est d&eacute;s&eacute;lectionn&eacute;e.
2 Placez le point d'insertion &agrave; l'int&eacute;rieur d'une div PA existante dans la fen&ecirc;tre de cr&eacute;ation du document, puis
choisissez Insertion &gt; Objets mise en forme &gt; Div PA.
Imbrication des balises div PA automatiquement lorsque vous dessinez une div PA &agrave; l'int&eacute;rieur d'une autre
div PA
❖ S&eacute;lectionnez l'option Imbrication dans les pr&eacute;f&eacute;rences des &eacute;l&eacute;ments PA.
Affichage ou d&eacute;finition des pr&eacute;f&eacute;rences des &eacute;l&eacute;ments PA
Utilisez la cat&eacute;gorie El&eacute;ments PA dans la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences pour indiquer les param&egrave;tres par d&eacute;faut des
nouveaux &eacute;l&eacute;ments PA cr&eacute;&eacute;s.
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh).
Derni&egrave;re mise &agrave; jour le 4/5/2011
172
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
2 S&eacute;lectionnez la cat&eacute;gorie El&eacute;ments PA dans la liste &agrave; gauche, s&eacute;lectionnez des &eacute;l&eacute;ments PA et d&eacute;finissez les
pr&eacute;f&eacute;rences suivantes, puis cliquez sur OK.
Visibilit&eacute; D&eacute;termine si les &eacute;l&eacute;ments PA sont visibles par d&eacute;faut. Les options sont par d&eacute;faut, h&eacute;riter, visible et masqu&eacute;.
Largeur et Hauteur Indiquez une largeur et une hauteur par d&eacute;faut (en pixels) pour les &eacute;l&eacute;ments PA que vous cr&eacute;ez &agrave;
l'aide du menu Insertion &gt; Objets mise en forme &gt; Div PA.
Couleur d'arri&egrave;re-plan Sp&eacute;cifie une couleur d’arri&egrave;re-plan par d&eacute;faut. S&eacute;lectionnez une couleur &agrave; l'aide du s&eacute;lecteur de
couleur.
Image d’arri&egrave;re-plan Sp&eacute;cifie une image d’arri&egrave;re-plan par d&eacute;faut. Cliquez sur Parcourir pour trouver le fichier de
l'image sur votre ordinateur.
Imbrication: Imbriquer en cas de cr&eacute;ation dans une div PA Indique si une div PA que vous dessinez &agrave; partir d'un point
situ&eacute; dans les limites d'une div PA existante doit &ecirc;tre une div PA imbriqu&eacute;e. Maintenez la touche Alt (Windows) ou
Option (Macintosh) enfonc&eacute;e pour modifier temporairement ce param&egrave;tre lorsque vous dessinez une div PA.
Affichage ou d&eacute;finition des propri&eacute;t&eacute;s pour un seul &eacute;l&eacute;ment PA
Lorsque vous s&eacute;lectionnez un &eacute;l&eacute;ment PA, l'inspecteur Propri&eacute;t&eacute;s affiche les propri&eacute;t&eacute;s de cet &eacute;l&eacute;ment.
1 S&eacute;lectionnez un &eacute;l&eacute;ment PA.
2 Dans l'inspecteur Propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), cliquez sur la fl&egrave;che d'agrandissement situ&eacute;e dans le coin
inf&eacute;rieur droit (si l'inspecteur est affich&eacute; en mode r&eacute;duit) pour visualiser l'ensemble des propri&eacute;t&eacute;s.
3 Parmi les options suivantes, d&eacute;finissez celles de votre choix :
El&eacute;ment CSS-P Sp&eacute;cifie un identificateur pour l'&eacute;l&eacute;ment PA s&eacute;lectionn&eacute;. Cet ID identifie l'&eacute;l&eacute;ment PA dans le panneau
El&eacute;ments PA et dans le code JavaScript.
Seuls les caract&egrave;res alphanum&eacute;riques sont accept&eacute;s ; n'utilisez aucun caract&egrave;re sp&eacute;cial comme les espaces, les traits
d'union, les barres obliques ou les points. Chaque &eacute;l&eacute;ment PA doit avoir un ID unique.
Remarque : L'inspecteur Propri&eacute;t&eacute;s CSS-P pr&eacute;sente les m&ecirc;mes options pour les &eacute;l&eacute;ments &agrave; positionnement relatif.
G et S (gauche et haut) Indiquez la position du coin sup&eacute;rieur gauche de l'&eacute;l&eacute;ment PA par rapport au coin sup&eacute;rieur
gauche de la page, ou de l'&eacute;l&eacute;ment PA parent s'il est imbriqu&eacute;.
L et H Indiquez la largeur et la hauteur de l'&eacute;l&eacute;ment PA.
Remarque : Si le contenu d'un &eacute;l&eacute;ment PA d&eacute;passe la taille indiqu&eacute;e, le bord inf&eacute;rieur de cet &eacute;l&eacute;ment PA (tel qu'il appara&icirc;t
en mode Cr&eacute;ation dans Dreamweaver) s'&eacute;tire proportionnellement. (Le bord inf&eacute;rieur ne s'&eacute;tend pas lorsque l'&eacute;l&eacute;ment PA
appara&icirc;t dans un navigateur, sauf si la propri&eacute;t&eacute; D&eacute;bordement est d&eacute;finie sur Visible).
L'unit&eacute; par d&eacute;faut de la position et de la taille est le pixel (px). Vous pouvez &eacute;galement choisir les unit&eacute;s suivantes : pc
(picas), pt (points), in (pouces), mm (millim&egrave;tres), cm (centim&egrave;tres) ou% (pourcentage de la valeur &eacute;quivalente de
l'&eacute;l&eacute;ment PA parent). Les abr&eacute;viations doivent suivre la valeur sans espace : par exemple, 3mm.
Index Z D&eacute;termine l'index z ou ordre de superposition, de l'&eacute;l&eacute;ment PA.
Derni&egrave;re mise &agrave; jour le 4/5/2011
173
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
Dans un navigateur, les &eacute;l&eacute;ments PA portant les valeurs les plus &eacute;lev&eacute;es se superposent aux &eacute;l&eacute;ments PA portant les
valeurs moins &eacute;lev&eacute;es. Les valeurs peuvent &ecirc;tre positives ou n&eacute;gatives. Il est plus facile de modifier l'ordre de
superposition des &eacute;l&eacute;ments PA &agrave; l'aide du panneau El&eacute;ments PA qu'en saisissant des valeurs d'index z sp&eacute;cifiques.
Vis Indique si l'&eacute;l&eacute;ment PA est initialement visible ou non. Faites votre choix parmi les options suivantes :
• Aucune propri&eacute;t&eacute; de visibilit&eacute; n'est d&eacute;finie par d&eacute;faut. Lorsque aucune visibilit&eacute; n'est pr&eacute;cis&eacute;e, la plupart des
navigateurs choisissent H&eacute;riter.
• L'option H&eacute;riter utilise la propri&eacute;t&eacute; de visibilit&eacute; de l'objet parent de l'&eacute;l&eacute;ment PA.
• Visible affiche le contenu de l'&eacute;l&eacute;ment PA, quelle que soit la valeur du parent.
• Masqu&eacute; dissimule le contenu de l'&eacute;l&eacute;ment PA, quelle que soit la valeur du parent.
Utilisez un langage de script, par exemple JavaScript, pour contr&ocirc;ler la propri&eacute;t&eacute; de visibilit&eacute; et afficher le contenu
des &eacute;l&eacute;ments PA de fa&ccedil;on dynamique.
Image ar-pl Sp&eacute;cifie une image d'arri&egrave;re-plan pour l'&eacute;l&eacute;ment PA.
Cliquez sur l'ic&ocirc;ne du dossier &agrave; parcourir et s&eacute;lectionnez un fichier d'image.
Couleur d'ar-pl. Sp&eacute;cifie une couleur d'arri&egrave;re-plan pour l'&eacute;l&eacute;ment PA.
Laissez cette option vide pour sp&eacute;cifier un arri&egrave;re-plan transparent.
Classe Indique la classe CSS utilis&eacute;e pour cr&eacute;er l'&eacute;l&eacute;ment PA.
D&eacute;bordement Contr&ocirc;le la mani&egrave;re dont les &eacute;l&eacute;ments PA apparaissent dans un navigateur lorsque le contenu d&eacute;passe
la taille sp&eacute;cifi&eacute;e de l'&eacute;l&eacute;ment PA.
Visible indique que le contenu suppl&eacute;mentaire appara&icirc;tra dans l'&eacute;l&eacute;ment PA ; en fait, l'&eacute;l&eacute;ment PA s'agrandit
proportionnellement. Masqu&eacute; signifie que le contenu suppl&eacute;mentaire ne sera pas affich&eacute; dans le navigateur.
D&eacute;filement indique que le navigateur devra ajouter des barres de d&eacute;filement dans l'&eacute;l&eacute;ment PA, qu'elles soient
n&eacute;cessaires ou non. Auto entra&icirc;ne l'affichage des barres de d&eacute;filement de l'&eacute;l&eacute;ment PA dans le navigateur uniquement
lorsque cela est n&eacute;cessaire (c'est-&agrave;-dire lorsque le contenu de l'&eacute;l&eacute;ment PA d&eacute;passe ses limites).
Remarque : La prise en charge de l'option D&eacute;bordement est in&eacute;gale suivant les navigateurs.
D&eacute;tourage D&eacute;finit la zone visible de l'&eacute;l&eacute;ment PA.
Indiquez les coordonn&eacute;es gauche, haut, droite et bas pour d&eacute;finir un rectangle dans le champ des coordonn&eacute;es de
l'&eacute;l&eacute;ment PA (en partant du coin sup&eacute;rieur gauche de l'&eacute;l&eacute;ment PA). L'&eacute;l&eacute;ment PA est &laquo; d&eacute;tour&eacute; &raquo; afin que seul le
rectangle sp&eacute;cifi&eacute; soit visible. Par exemple, pour rendre le contenu d'un &eacute;l&eacute;ment PA invisible &agrave; l'exception d'un
rectangle visible d'une largeur de 50 pixels et d'une hauteur de 75 pixels dans le coin sup&eacute;rieur gauche de l'&eacute;l&eacute;ment PA,
d&eacute;finissez G sur 0, S sur 0, D sur 50 et B sur 75.
Remarque : Bien que les feuilles de style en cascade utilisent des termes diff&eacute;rents pour le d&eacute;tourage, Dreamweaver
interpr&egrave;te le d&eacute;tourage de la m&ecirc;me mani&egrave;re que la plupart des navigateurs.
4 Si vous avez tap&eacute; une valeur dans une zone de texte, appuyez sur Tab ou Entr&eacute;e (Windows) ou Retour (Macintosh)
pour l'appliquer.
Affichage ou d&eacute;finition des propri&eacute;t&eacute;s pour plusieurs &eacute;l&eacute;ments PA
Lorsque vous s&eacute;lectionnez plusieurs &eacute;l&eacute;ments PA, l'inspecteur Propri&eacute;t&eacute;s affiche les propri&eacute;t&eacute;s du texte et un sousensemble de propri&eacute;t&eacute;s d'&eacute;l&eacute;ment PA standard, ce qui vous permet de modifier plusieurs &eacute;l&eacute;ments PA simultan&eacute;ment.
S&eacute;lection de plusieurs &eacute;l&eacute;ments PA
❖ S&eacute;lectionnez les &eacute;l&eacute;ments PA tout en maintenant la touche Maj enfonc&eacute;e.
Derni&egrave;re mise &agrave; jour le 4/5/2011
174
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
Affichage et d&eacute;finition des propri&eacute;t&eacute;s pour plusieurs &eacute;l&eacute;ments PA
1 S&eacute;lectionnez plusieurs &eacute;l&eacute;ments PA.
2 Dans l'inspecteur Propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), cliquez sur la fl&egrave;che d'agrandissement situ&eacute;e dans le coin
inf&eacute;rieur droit (si l'inspecteur est affich&eacute; en mode r&eacute;duit) pour visualiser l'ensemble des propri&eacute;t&eacute;s.
3 D&eacute;finissez les propri&eacute;t&eacute;s suivantes pour plusieurs &eacute;l&eacute;ments PA :
G et S (gauche et haut) Indiquez la position du coin sup&eacute;rieur gauche des &eacute;l&eacute;ments PA par rapport au coin sup&eacute;rieur
gauche de la page, ou de l'&eacute;l&eacute;ment PA parent s'ils sont imbriqu&eacute;s.
L et H Indiquez la largeur et la hauteur des &eacute;l&eacute;ments PA.
Remarque : Si le contenu de l'un des &eacute;l&eacute;ments PA d&eacute;passe la taille indiqu&eacute;e, le bord inf&eacute;rieur de cet &eacute;l&eacute;ment PA (tel qu'il
appara&icirc;t en mode Cr&eacute;ation dans Dreamweaver) s'&eacute;tire proportionnellement. (Le bord inf&eacute;rieur ne s'&eacute;tend pas lorsque
l'&eacute;l&eacute;ment PA appara&icirc;t dans un navigateur, sauf si la propri&eacute;t&eacute; D&eacute;bordement est d&eacute;finie sur Visible).
L'unit&eacute; par d&eacute;faut de la position et de la taille est le pixel (px). Vous pouvez &eacute;galement choisir les unit&eacute;s suivantes : pc
(picas), pt (points), in (pouces), mm (millim&egrave;tres), cm (centim&egrave;tres) ou% (pourcentage de la valeur &eacute;quivalente de
l'&eacute;l&eacute;ment PA parent). Les abr&eacute;viations doivent suivre la valeur sans espace : par exemple, 3mm.
Vis Indique si les &eacute;l&eacute;ments PA sont initialement visibles ou non. Faites votre choix parmi les options suivantes :
• Aucune propri&eacute;t&eacute; de visibilit&eacute; n'est d&eacute;finie par d&eacute;faut. Lorsque aucune visibilit&eacute; n'est pr&eacute;cis&eacute;e, la plupart des
navigateurs choisissent H&eacute;riter.
• L'option H&eacute;riter utilise la propri&eacute;t&eacute; de visibilit&eacute; de l'objet parent des &eacute;l&eacute;ments PA.
• Visible affiche le contenu des &eacute;l&eacute;ments PA, quelle que soit la valeur du parent.
• Masqu&eacute; dissimule le contenu de l'&eacute;l&eacute;ment PA, quelle que soit la valeur du parent.
Utilisez un langage de script, par exemple JavaScript, pour contr&ocirc;ler la propri&eacute;t&eacute; de visibilit&eacute; et afficher le contenu
des &eacute;l&eacute;ments PA de fa&ccedil;on dynamique.
Balise Indique la balise HTML utilis&eacute;e pour d&eacute;finir les &eacute;l&eacute;ments PA.
Image ar-pl Sp&eacute;cifie une image d'arri&egrave;re-plan pour les &eacute;l&eacute;ments PA.
Cliquez sur l'ic&ocirc;ne du dossier &agrave; parcourir et s&eacute;lectionnez un fichier d'image.
Couleur d'ar-pl. Sp&eacute;cifie une couleur d'arri&egrave;re-plan pour les &eacute;l&eacute;ments PA. Laissez cette option vide pour sp&eacute;cifier un
arri&egrave;re-plan transparent.
4 Si vous avez tap&eacute; une valeur dans une zone de texte, appuyez sur Tab ou Entr&eacute;e (Windows) ou Retour (Macintosh)
pour l'appliquer.
Pr&eacute;sentation du panneau El&eacute;ments PA
Le panneau El&eacute;ments PA (Fen&ecirc;tre &gt; El&eacute;ments PA) vous permet de g&eacute;rer les &eacute;l&eacute;ments PA de votre document. Utilisez
le panneau El&eacute;ments PA pour emp&ecirc;cher les &eacute;l&eacute;ments PA de se chevaucher, pour en modifier la visibilit&eacute;, pour les
imbriquer ou les superposer et pour en s&eacute;lectionner un ou plusieurs.
Derni&egrave;re mise &agrave; jour le 4/5/2011
175
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
Remarque : Dans Dreamweaver, un &eacute;l&eacute;ment PA est un &eacute;l&eacute;ment de page HTML (plus pr&eacute;cis&eacute;ment, une balise div ou toute
autre balise) auquel une position absolue est attribu&eacute;e. Le panneau El&eacute;ments PA n'affiche pas les &eacute;l&eacute;ments &agrave;
positionnement relatif.
Les &eacute;l&eacute;ments PA sont affich&eacute;s sous la forme d'une liste de noms, dans l'ordre de l'index z ; le premier &eacute;l&eacute;ment PA cr&eacute;&eacute;
(dot&eacute; d'un index z de 1) appara&icirc;t par d&eacute;faut en bas de la liste et le dernier &eacute;l&eacute;ment PA cr&eacute;&eacute; appara&icirc;t en haut de la liste.
Vous pouvez toutefois modifier l'index z d'un &eacute;l&eacute;ment PA en changeant sa place dans l'ordre de superposition. Par
exemple, si vous cr&eacute;ez huit &eacute;l&eacute;ments PA et souhaitez d&eacute;placer le quatri&egrave;me &eacute;l&eacute;ment PA en haut de la liste, vous pouvez
lui affecter un index z sup&eacute;rieur &agrave; celui des autres &eacute;l&eacute;ments PA.
S&eacute;lection d'&eacute;l&eacute;ments PA
Vous pouvez s&eacute;lectionner un ou plusieurs &eacute;l&eacute;ments PA pour les manipuler ou en modifier les propri&eacute;t&eacute;s.
S&eacute;lection d'un &eacute;l&eacute;ment PA dans le panneau El&eacute;ments PA
❖ Dans le panneau El&eacute;ments PA (Fen&ecirc;tre &gt; El&eacute;ments PA), cliquez sur le nom de l'&eacute;l&eacute;ment PA.
S&eacute;lection d'un &eacute;l&eacute;ment PA dans la fen&ecirc;tre de document
❖ Effectuez l’une des t&acirc;ches suivantes :
• Cliquez sur la poign&eacute;e de s&eacute;lection d'un &eacute;l&eacute;ment PA.
Si la poign&eacute;e n'est pas visible, cliquez n'importe o&ugrave; dans l'&eacute;l&eacute;ment PA pour la faire appara&icirc;tre.
• Cliquez sur une bordure d'un &eacute;l&eacute;ment PA.
• Cliquez &agrave; l'int&eacute;rieur d'un &eacute;l&eacute;ment PA en appuyant sur les touches Ctrl et Maj (Windows) ou Commande et Maj
(Macintosh).
• Pour s&eacute;lectionner le contenu d'un &eacute;l&eacute;ment PA, cliquez &agrave; l'int&eacute;rieur de celui-ci et appuyez sur les touches Ctrl+A
(Windows) ou Commande+A (Macintosh). Appuyez &agrave; nouveau sur Ctrl+A ou Commande+A pour s&eacute;lectionner
l'&eacute;l&eacute;ment PA.
• Cliquez &agrave; l'int&eacute;rieur d'un &eacute;l&eacute;ment PA et s&eacute;lectionnez sa balise dans le s&eacute;lecteur de balises.
S&eacute;lection de plusieurs &eacute;l&eacute;ments PA
❖ Effectuez l’une des t&acirc;ches suivantes :
• Dans le panneau El&eacute;ments PA (Fen&ecirc;tre &gt; El&eacute;ments PA), appuyez sur la touche Maj tout en cliquant sur le nom de
deux &eacute;l&eacute;ments PA ou plus.
• Dans la fen&ecirc;tre de document, appuyez sur la touche Maj tout en cliquant &agrave; l'int&eacute;rieur d'un ou de plusieurs &eacute;l&eacute;ments
PA ou sur leur bordure.
Modification de l'ordre de superposition des &eacute;l&eacute;ments PA
Utilisez l'inspecteur Propri&eacute;t&eacute;s ou le panneau El&eacute;ments PA pour modifier l'ordre de superposition des &eacute;l&eacute;ments PA.
L'&eacute;l&eacute;ment PA situ&eacute; en haut de la liste du panneau Calques El&eacute;ments PA se trouve au premier rang de l'ordre de
superposition et appara&icirc;t avant les autres &eacute;l&eacute;ments PA.
En code HTML, l'ordre de superposition, ou index z, des &eacute;l&eacute;ments PA d&eacute;termine l'ordre dans lequel ils sont dessin&eacute;s
dans un navigateur. Plus l'index z d'un &eacute;l&eacute;ment PA est &eacute;lev&eacute;, et plus sa position dans l'ordre de superposition est &eacute;lev&eacute;e.
(Par exemple, un &eacute;l&eacute;ment avec un index z de 4 appara&icirc;tra au-dessus d'un &eacute;l&eacute;ment avec un index z de 3. 1 est toujours
le num&eacute;ro le plus bas dans l'ordre d'empilement.) Vous pouvez modifier l'index z de chaque &eacute;l&eacute;ment PA &agrave; l'aide du
panneau El&eacute;ments PA ou de l'inspecteur Propri&eacute;t&eacute;s.
Derni&egrave;re mise &agrave; jour le 4/5/2011
176
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
Modification de l'ordre de superposition des &eacute;l&eacute;ments PA &agrave; l'aide du panneau El&eacute;ments PA
1 S&eacute;lectionnez Fen&ecirc;tre &gt; El&eacute;ments PA pour ouvrir le panneau El&eacute;ments PA.
2 Double-cliquez sur le num&eacute;ro d'index z en regard de l'&eacute;l&eacute;ment PA dont vous souhaitez modifier l'index z.
3 Modifiez le num&eacute;ro puis appuyez sur la touche Retour/Entr&eacute;e.
• Tapez une valeur sup&eacute;rieure afin de d&eacute;placer l'&eacute;l&eacute;ment PA vers le haut dans l'ordre de superposition.
• Tapez une valeur inf&eacute;rieure afin de d&eacute;placer l'&eacute;l&eacute;ment PA vers le bas dans l'ordre de superposition.
Modification de l'ordre de superposition des &eacute;l&eacute;ments PA &agrave; l'aide de l'inspecteur Propri&eacute;t&eacute;s
1 Choisissez Fen&ecirc;tre &gt; El&eacute;ments PA pour ouvrir le panneau El&eacute;ments PA et visualiser l'ordre de superposition en
cours.
2 Dans le panneau El&eacute;ments PA ou dans la fen&ecirc;tre de document, s&eacute;lectionnez l'&eacute;l&eacute;ment PA dont vous souhaitez
modifier l'index z.
3 Dans l'inspecteur Propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), tapez un nombre dans la zone de texte Index Z.
• Tapez une valeur sup&eacute;rieure afin de d&eacute;placer l'&eacute;l&eacute;ment PA vers le haut dans l'ordre de superposition.
• Tapez une valeur inf&eacute;rieure afin de d&eacute;placer l'&eacute;l&eacute;ment PA vers le bas dans l'ordre de superposition.
Affichage et masquage des &eacute;l&eacute;ments PA
Lorsque vous travaillez sur votre document, vous pouvez afficher ou masquer les &eacute;l&eacute;ments PA manuellement, &agrave; l'aide
du panneau El&eacute;ments PA, pour voir comment la page appara&icirc;tra dans diff&eacute;rentes situations.
Remarque : L'&eacute;l&eacute;ment PA actuellement s&eacute;lectionn&eacute; devient toujours visible et appara&icirc;t devant les autres &eacute;l&eacute;ments PA.
Modification de la visibilit&eacute; d'un &eacute;l&eacute;ment PA
1 S&eacute;lectionnez Fen&ecirc;tre &gt; El&eacute;ments PA pour ouvrir le panneau El&eacute;ments PA.
2 Cliquez dans la colonne de l'ic&ocirc;ne en forme d'oeil pour changer la visibilit&eacute; d'un &eacute;l&eacute;ment PA.
• Un oeil ouvert signifie que l'&eacute;l&eacute;ment PA est visible.
• Un oeil ferm&eacute; signifie que l'&eacute;l&eacute;ment PA est invisible.
• Si l'ic&ocirc;ne de l'oeil n'appara&icirc;t pas, l'&eacute;l&eacute;ment PA h&eacute;rite de la visibilit&eacute; de son parent (lorsque les &eacute;l&eacute;ments PA ne sont
pas imbriqu&eacute;s, le parent correspond au corps du document, qui est toujours visible).
Aucune ic&ocirc;ne en forme d'oeil ne s'affiche lorsque la visibilit&eacute; n'est pas indiqu&eacute;e (appara&icirc;t dans l'inspecteur Propri&eacute;t&eacute;s
comme Visibilit&eacute; par d&eacute;faut).
Modification de la visibilit&eacute; de tous les &eacute;l&eacute;ments PA &agrave; la fois
❖ Dans le panneau El&eacute;ments PA (Fen&ecirc;tre &gt; Calques), cliquez sur l'ic&ocirc;ne en forme d'œil en haut de la colonne.
Remarque : Cette proc&eacute;dure permet de d&eacute;finir la visibilit&eacute; ou la non-visibilit&eacute; de tous les &eacute;l&eacute;ments PA, mais elle ne leur
permet pas d'h&eacute;riter.
Redimensionnement des &eacute;l&eacute;ments PA
Vous pouvez redimensionner un seul ou plusieurs &eacute;l&eacute;ments PA &agrave; la fois pour qu'ils aient tous la m&ecirc;me largeur et la
m&ecirc;me hauteur.
Si l'option Emp&ecirc;cher le chevauchement est activ&eacute;e, vous ne pourrez pas redimensionner un &eacute;l&eacute;ment PA s'il doit pour
cela en chevaucher un autre.
Derni&egrave;re mise &agrave; jour le 4/5/2011
177
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
Voir aussi
&laquo; Utilisation de la grille de mise en forme &raquo; &agrave; la page 182
Redimensionnement d'un &eacute;l&eacute;ment PA
1 En mode Cr&eacute;ation, s&eacute;lectionnez un &eacute;l&eacute;ment PA.
2 Pour redimensionner l'&eacute;l&eacute;ment PA, proc&eacute;dez de l'une des mani&egrave;res suivantes :
• Pour redimensionner l'&eacute;l&eacute;ment PA en le faisant glisser, faites glisser l'une de ses poign&eacute;es.
• Pour redimensionner l'&eacute;l&eacute;ment PA par incr&eacute;ments d'un pixel, maintenez la touche Ctrl (Windows) ou Option
(Macintosh) enfonc&eacute;e tout en utilisant les touches fl&eacute;ch&eacute;es.
Les fl&egrave;ches d&eacute;placent les bords droit et inf&eacute;rieur de l'&eacute;l&eacute;ment PA ; cette technique ne permet pas de redimensionner
l'&eacute;l&eacute;ment PA en utilisant les bords sup&eacute;rieur et gauche.
• Pour redimensionner en alignant sur la grille, appuyez sur Maj-Ctrl-fl&egrave;che (Windows) ou Maj-Option-fl&egrave;che
(Macintosh).
• Dans l'inspecteur Propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), tapez les valeurs de largeur (L) et de hauteur (H).
Le redimensionnement d'un &eacute;l&eacute;ment PA en modifie la largeur et la hauteur. Cette action ne d&eacute;finit pas la partie visible
du contenu de l'&eacute;l&eacute;ment PA. Vous pouvez d&eacute;finir la zone visible d'un &eacute;l&eacute;ment PA dans les pr&eacute;f&eacute;rences.
Redimensionnement de plusieurs &eacute;l&eacute;ments PA &agrave; la fois
1 En mode Cr&eacute;ation, s&eacute;lectionnez au moins deux &eacute;l&eacute;ments PA.
2 Effectuez l’une des t&acirc;ches suivantes :
• Choisissez Modifier &gt; R&eacute;organiser &gt; M&ecirc;me largeur ou Modifier &gt; R&eacute;organiser &gt; M&ecirc;me hauteur.
Les premiers &eacute;l&eacute;ments PA s&eacute;lectionn&eacute;s prendront la largeur ou la hauteur du dernier s&eacute;lectionn&eacute;.
• Dans l'inspecteur Propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), sous Plusieurs &eacute;l&eacute;ments CSS-P, tapez les valeurs de largeur et
de hauteur.
Ces valeurs sont appliqu&eacute;es &agrave; tous les &eacute;l&eacute;ments PA s&eacute;lectionn&eacute;s.
D&eacute;placement des &eacute;l&eacute;ments PA
Vous pouvez d&eacute;placer les &eacute;l&eacute;ments PA en mode Cr&eacute;ation de la m&ecirc;me mani&egrave;re que les objets dans la plupart des
applications graphiques de base.
Si l'option Emp&ecirc;cher le chevauchement est activ&eacute;e, vous ne pourrez pas d&eacute;placer un &eacute;l&eacute;ment PA s'il doit pour cela en
chevaucher un autre.
1 En mode Cr&eacute;ation, s&eacute;lectionnez un ou plusieurs &eacute;l&eacute;ments PA.
2 Effectuez l’une des t&acirc;ches suivantes :
• Pour d&eacute;placer des &eacute;l&eacute;ments PA en les faisant glisser, s&eacute;lectionnez-les et faites glisser la poign&eacute;e de s&eacute;lection du
dernier &eacute;l&eacute;ment PA s&eacute;lectionn&eacute; (en surbrillance noire).
• Pour d&eacute;placer l'image par incr&eacute;ments d'un pixel, utilisez les touches fl&eacute;ch&eacute;es.
Maintenez la touche Maj enfonc&eacute;e tout en appuyant sur les touches fl&eacute;ch&eacute;es pour d&eacute;placer l'&eacute;l&eacute;ment PA par incr&eacute;ments
de la grille.
Voir aussi
&laquo; Utilisation de la grille de mise en forme &raquo; &agrave; la page 182
Derni&egrave;re mise &agrave; jour le 4/5/2011
178
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
Alignement des &eacute;l&eacute;ments PA
Utilisez les commandes d'alignement pour aligner un ou plusieurs &eacute;l&eacute;ments PA sur l'un des bords du dernier &eacute;l&eacute;ment
PA s&eacute;lectionn&eacute;.
Lors de l'alignement, les &eacute;l&eacute;ments PA enfants qui ne sont pas s&eacute;lectionn&eacute;s seront d&eacute;plac&eacute;s en m&ecirc;me temps que leur
parent, si celui-ci est s&eacute;lectionn&eacute; et d&eacute;plac&eacute;. Pour &eacute;viter ce d&eacute;placement, n'utilisez pas d'&eacute;l&eacute;ments PA imbriqu&eacute;s.
1 En mode Cr&eacute;ation, s&eacute;lectionnez un &eacute;l&eacute;ment PA.
2 Choisissez Modifier &gt; R&eacute;organiser, puis s&eacute;lectionnez une option d'alignement.
Par exemple, si vous s&eacute;lectionnez Haut, tous les &eacute;l&eacute;ments PA se d&eacute;placent de fa&ccedil;on telle que leurs bordures sup&eacute;rieures
sont au m&ecirc;me niveau que celle du dernier &eacute;l&eacute;ment PA s&eacute;lectionn&eacute; (en surbrillance noire).
Conversion des &eacute;l&eacute;ments PA en tableau
Au lieu d'utiliser des tableaux pour cr&eacute;er une mise en forme, certains concepteurs de sites Web pr&eacute;f&egrave;rent utiliser des
&eacute;l&eacute;ments PA. Dreamweaver vous permet de cr&eacute;er votre mise en forme &agrave; l'aide d'&eacute;l&eacute;ments PA, puis, si vous le souhaitez,
de les convertir en tableaux. Par exemple, il peut &ecirc;tre n&eacute;cessaire de convertir les &eacute;l&eacute;ments PA en tableaux pour pouvoir
prendre en charge les navigateurs ant&eacute;rieurs &agrave; la version 4.0. La conversion des &eacute;l&eacute;ments PA en tableaux est toutefois
d&eacute;conseill&eacute;e parce qu'elle peut g&eacute;n&eacute;rer des tableaux contenant un grand nombre de cellules vides, sans parler les
probl&egrave;mes de code pl&eacute;thorique. Si vous avez besoin d'une mise en page utilisant des tableaux, il est pr&eacute;f&eacute;rable de la
cr&eacute;er &agrave; l'aide des outils standard de mise en forme des tableaux disponibles dans Dreamweaver.
Vous pouvez aussi passer des &eacute;l&eacute;ments PA aux tableaux, et vice-versa, pour peaufiner la mise en forme et optimiser la
pr&eacute;sentation de la page. (Toutefois, lorsque vous reconvertissez un tableau en &eacute;l&eacute;ments PA, Dreamweaver convertit le
tableau en balises div PA, quel que soit le type de l'&eacute;l&eacute;ment PA qui se trouvait dans la page avant d'&ecirc;tre converti en
tableau.) Vous ne pouvez pas convertir un tableau ou un &eacute;l&eacute;ments PA sp&eacute;cifique figurant sur une page. Il n'est possible
de convertir des &eacute;l&eacute;ments PA en tableaux, et des tableaux en divs PA que pour la totalit&eacute; d'une page.
Remarque : Il est impossible de convertir des &eacute;l&eacute;ments PA en tableaux, ou des tableaux en divs PA, dans un mod&egrave;le de
document ou dans un document auquel un mod&egrave;le a &eacute;t&eacute; appliqu&eacute;. Dans ce cas, vous devez cr&eacute;er votre mise en forme dans
un document sans mod&egrave;le et le convertir avant de l'enregistrer comme mod&egrave;le.
Conversion des &eacute;l&eacute;ments PA en tableaux
Cr&eacute;ez votre mise en forme &agrave; l'aide d'&eacute;l&eacute;ments PA, puis convertissez les &eacute;l&eacute;ments PA en tableaux afin que votre mise en
forme puisse s'afficher dans les navigateurs les moins r&eacute;cents.
Avant de convertir vos &eacute;l&eacute;ments PA en tableaux, assurez-vous qu'ils ne se chevauchent pas. Veillez en outre &agrave; bien &ecirc;tre
en mode Standard (Affichage &gt; Mode Tableau &gt; Mode Standard).
Conversion des &eacute;l&eacute;ments PA en tableau
1 S&eacute;lectionnez Modifier &gt; Convertir &gt; Divs PA en tableau.
2 Parmi les options suivantes, d&eacute;finissez celles de votre choix et cliquez sur OK :
La plus pr&eacute;cise Cr&eacute;e une cellule de tableau pour chaque &eacute;l&eacute;ment PA et ajoute les cellules n&eacute;cessaires pour pr&eacute;server
l'espace entre les &eacute;l&eacute;ments PA.
La plus petite : R&eacute;duit les cellules vides. Indique que les bords des &eacute;l&eacute;ments PA doivent &ecirc;tre align&eacute;s s'ils sont
positionn&eacute;s dans la limite du nombre de pixels d&eacute;fini.
Si vous choisissez cette option, le tableau que vous obtiendrez aura moins de lignes et de colonnes vides, mais ne
correspondra pas n&eacute;cessairement exactement &agrave; votre mise en forme.
Utiliser les GIF transparents Remplit la derni&egrave;re ligne du tableau d'images GIF transparentes. S&eacute;lectionner cette option
permet d'&ecirc;tre s&ucirc;r que le tableau s'affichera avec les m&ecirc;mes largeurs de colonne dans tous les navigateurs.
Derni&egrave;re mise &agrave; jour le 4/5/2011
179
UTILISATION DE DREAMWEAVER
Cr&eacute;ation de pages avec CSS
Lorsque cette option est activ&eacute;e, vous ne pouvez pas modifier le tableau obtenu en faisant glisser ses colonnes. Lorsque
cette option est d&eacute;sactiv&eacute;e, le tableau obtenu ne contient pas les GIF transparents, mais les largeurs des colonnes
peuvent varier suivant le navigateur.
Centrer dans la page Centre le tableau obtenu dans la page. Si cette option est d&eacute;sactiv&eacute;e, le tableau commence sur le
bord gauche de la page.
Conversion des tableaux en divs PA
1 S&eacute;lectionnez Modifier &gt; Convertir &gt; Tableaux en divs PA.
2 Parmi les options suivantes, d&eacute;finissez celles de votre choix et cliquez sur OK :
Emp&ecirc;cher le chevauchement des &eacute;l&eacute;ments PA Limite la position des &eacute;l&eacute;ments PA lorsqu'ils sont cr&eacute;&eacute;s, d&eacute;plac&eacute;s et
redimensionn&eacute;s, afin d'&eacute;viter tout chevauchement.
Afficher le panneau El&eacute;ments PA Affiche le panneau El&eacute;ments PA.
Afficher la grille et Aligner sur la grille Vous permettent d'utiliser une grille pour faciliter le positionnement des
&eacute;l&eacute;ments PA.
Les tableaux sont convertis en divs PA. Les cellules vides ne sont pas converties en &eacute;l&eacute;ments PA, sauf si elles poss&egrave;dent
une couleur d'arri&egrave;re-plan.
Remarque : Les &eacute;l&eacute;ments de la page qui se trouvaient en dehors des tableaux sont &eacute;galement plac&eacute;s dans les balises div PA.
Emp&ecirc;chement du chevauchement des &eacute;l&eacute;ments PA
Les cellules d'un tableau ne peuvent pas se chevaucher. Dreamweaver ne peut donc pas cr&eacute;er de tableau &agrave; partir
d'&eacute;l&eacute;ments PA qui se chevauchent. Si vous envisagez de convertir les &eacute;l&eacute;ments PA d'un document en tableaux, activez
l'option Emp&ecirc;cher le chevauchement pour restreindre le d&eacute;placement et le positionnement des &eacute;l&eacute;ments PA et en
&eacute;viter le chevauchement.
Si cette option est activ&eacute;e, aucun &eacute;l&eacute;ment PA ne peut &ecirc;tre cr&eacute;&eacute;, d&eacute;plac&eacute; ou redimensionn&eacute; au-dessus d'un &eacute;l&eacute;ment PA
existant, ni &ecirc;tre imbriqu&eacute; dans ce dernier. Si vous activez cette option apr&egrave;s avoir cr&eacute;&eacute; des &eacute;l&eacute;ments PA se chevauchant,
faites glisser chaque &eacute;l&eacute;ment PA concern&eacute; de fa&ccedil;on &agrave; l'&eacute;loigner des autres &eacute;l&eacute;ments PA. Dreamweaver ne corrige pas
automatiquement les &eacute;l&eacute;ments PA existants se chevauchant dans la page lorsque vous activez l'option Emp&ecirc;cher le
chevauchement des &eacute;l&eacute;ments PA.
Si cette option et l'option d'alignement sont activ&eacute;es, aucun &eacute;l&eacute;ment PA ne sera align&eacute; sur la grille si cela doit causer
un chevauchement de deux &eacute;l&eacute;ments PA. Dans ce cas, l'&eacute;l&eacute;ment PA sera align&eacute; sur le bord de l'&eacute;l&eacute;ment PA le plus
proche.
Remarque : Certaines op&eacute;rations autorisent le chevauchement des &eacute;l&eacute;ments PA, m&ecirc;me lorsque l'option Emp&ecirc;cher le
chevauchement est activ&eacute;e. Si vous ins&eacute;rez un &eacute;l&eacute;ment PA en utilisant le menu Insertion, si vous entrez des valeurs dans
l'inspecteur Propri&eacute;t&eacute;s ou si vous repositionnez des &eacute;l&eacute;ments PA en modifiant le code source HTML, les &eacute;l&eacute;ments PA
risquent de se chevaucher ou de s'imbriquer lorsque cette option est activ&eacute;e. En cas de chevauchement, faites glisser les
&eacute;l&eacute;ments PA qui se chevauchent en mode Cr&eacute;ation pour les s&eacute;parer.
• Dans le panneau El&eacute;ments PA (Fen&ecirc;tre &gt; El&eacute;ments PA), activez l'option Emp&ecirc;cher le chevauchement.
• Dans la fen&ecirc;tre de document, choisissez Modifier &gt; R&eacute;organiser &gt; Emp&ecirc;cher le chevauchement des &eacute;l&eacute;ments PA.
Derni&egrave;re mise &agrave; jour le 4/5/2011
180
Chapitre 7 : Mise en forme des pages avec
HTML
Utilisation d'assistances visuelles pour la mise en forme
D&eacute;finition de r&egrave;gles
Les r&egrave;gles vous aident &agrave; mesurer, organiser et planifier votre mise en forme. Vous pouvez afficher les r&egrave;gles gradu&eacute;es
en pixels, pouces ou centim&egrave;tres sur les bords gauche et sup&eacute;rieur de la page.
• Pour activer et d&eacute;sactiver les r&egrave;gles, choisissez Affichage &gt; R&egrave;gles &gt; Afficher.
• Pour changer l'origine, faites glisser l'ic&ocirc;ne de l'origine de la r&egrave;gle
, situ&eacute;e dans le coin sup&eacute;rieur gauche de la
fen&ecirc;tre de document en mode Cr&eacute;ation, sur un point de la page.
• Pour r&eacute;tablir la position par d&eacute;faut de l'origine, choisissez Affichage &gt; R&egrave;gles &gt; R&eacute;tablir origine.
• Pour changer d'unit&eacute; de mesure, choisissez Affichage &gt; R&egrave;gles, puis s&eacute;lectionnez Pixels, Pouces ou Centim&egrave;tres.
D&eacute;finition de rep&egrave;res de mise en forme
Les rep&egrave;res sont les lignes que vous faites glisser sur le document &agrave; partir des r&egrave;gles. Ils vous aident &agrave; placer et &agrave; aligner
des objets de fa&ccedil;on plus pr&eacute;cise Vous pouvez &eacute;galement utiliser les rep&egrave;res pour mesurer la taille des &eacute;l&eacute;ments d'une
page ou simuler les plis (zones visibles) des navigateurs Web.
Pour faciliter l'alignement des &eacute;l&eacute;ments, vous avez la possibilit&eacute; de les aligner sur les rep&egrave;res et d'aligner des rep&egrave;res sur
des &eacute;l&eacute;ments. (les &eacute;l&eacute;ments doivent &ecirc;tre &agrave; positionnement absolu pour que l'alignement puisse fonctionner). Vous
pouvez &eacute;galement verrouiller les rep&egrave;res pour qu'ils ne soient pas d&eacute;plac&eacute;s de fa&ccedil;on accidentelle par un autre
utilisateur.
Cr&eacute;ation d'un rep&egrave;re horizontal ou vertical
1 Faites glisser le rep&egrave;re &agrave; partir de la r&egrave;gle correspondante.
2 Positionnez le rep&egrave;re dans la fen&ecirc;tre de document et rel&acirc;chez le bouton de la souris (repositionnez le rep&egrave;re en le
faisant glisser de nouveau).
Remarque : Par d&eacute;faut, les rep&egrave;res sont enregistr&eacute;s en tant que mesures en pixels absolues depuis le c&ocirc;t&eacute; sup&eacute;rieur ou
gauche du document et sont affich&eacute;s par rapport &agrave; l'origine de la r&egrave;gle. Pour enregistrer le rep&egrave;re sous la forme d'un
pourcentage, appuyez sur la touche Maj lorsque vous cr&eacute;ez ou d&eacute;placez le rep&egrave;re.
Affichage ou masquage d'un rep&egrave;re
❖ Choisissez Affichage &gt; Rep&egrave;res &gt; Afficher les rep&egrave;res.
Alignement d'&eacute;l&eacute;ments sur les rep&egrave;res
• Pour aligner des &eacute;l&eacute;ments sur les rep&egrave;res, s&eacute;lectionnez Affichage &gt; Rep&egrave;res &gt; Magn&eacute;tiser les rep&egrave;res.
• Pour aligner les rep&egrave;res sur des &eacute;l&eacute;ments, s&eacute;lectionnez Affichage &gt; Rep&egrave;res &gt; Accrocher les rep&egrave;res aux &eacute;l&eacute;ments.
Remarque : Lorsque vous redimensionnez des &eacute;l&eacute;ments, tels que des &eacute;l&eacute;ments &agrave; positionnement absolu, des tableaux et
des images, ils sont align&eacute;s sur les rep&egrave;res.
Derni&egrave;re mise &agrave; jour le 4/5/2011
181
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
Verrouillage ou d&eacute;verrouillage de tous les rep&egrave;res
❖ Choisissez Affichage &gt; Rep&egrave;res &gt; Verrouiller les rep&egrave;res.
Affichage et d&eacute;placement d'un rep&egrave;re vers une position sp&eacute;cifique
1 Maintenez le pointeur de la souris sur le rep&egrave;re afin d'afficher sa position.
2 Double-cliquez sur le rep&egrave;re.
3 Entrez la nouvelle position dans la bo&icirc;te de dialogue D&eacute;placer le rep&egrave;re et cliquez sur OK.
Affichage de la distance entre les rep&egrave;res
❖ Appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) et d&eacute;placez le pointeur de la souris n'importe
o&ugrave; entre les deux rep&egrave;res.
Remarque : L'unit&eacute; de mesure est la m&ecirc;me que celle utilis&eacute;e pour les r&egrave;gles.
Simulation du pli (zone visible) d'un navigateur Web
❖ Choisissez Affichage &gt; Rep&egrave;res puis s&eacute;lectionnez une taille de navigateur pr&eacute;d&eacute;fini dans le menu.
Suppression d'un rep&egrave;re
❖ Faites glisser le rep&egrave;re hors du document.
Modification des param&egrave;tres des rep&egrave;res
❖ S&eacute;lectionnez Affichage &gt; Rep&egrave;res &gt; Modifier les rep&egrave;res, d&eacute;finissez les options suivantes et cliquez sur OK.
Couleur des rep&egrave;res Indique la couleur des lignes du rep&egrave;re. Cliquez sur la palette de couleurs et choisissez une
couleur dans le S&eacute;lecteur de couleur ou tapez un nombre hexad&eacute;cimal dans la zone de texte.
Couleur distance Indique la couleur des lignes qui apparaissent comme des indicateurs de distance lorsque vous
d&eacute;placez le pointeur de la souris entre les rep&egrave;res. Cliquez sur la palette de couleurs et choisissez une couleur dans le
S&eacute;lecteur de couleur ou tapez un nombre hexad&eacute;cimal dans la zone de texte.
Afficher les rep&egrave;res Affiche les rep&egrave;res en mode Cr&eacute;ation.
Magn&eacute;tiser les rep&egrave;res Aligne les &eacute;l&eacute;ments d'une page sur les rep&egrave;res &agrave; mesure que vous d&eacute;placez ces &eacute;l&eacute;ments dans la page.
Verrouiller les rep&egrave;res Verrouille les rep&egrave;res en place.
Accrocher les rep&egrave;res aux &eacute;l&eacute;ments Aligne les rep&egrave;res sur les &eacute;l&eacute;ments sur la page &agrave; mesure que vous faites glisser les
rep&egrave;res.
Effacer tout Efface tous les rep&egrave;res de la page.
Utilisation des rep&egrave;res avec des mod&egrave;les
Lorsque des rep&egrave;res sont ajout&eacute;s &agrave; un mod&egrave;le Dreamweaver, toutes les instances du mod&egrave;le h&eacute;ritent de ces rep&egrave;res. Les
rep&egrave;res des instances de mod&egrave;le sont toutefois trait&eacute;s comme des r&eacute;gions modifiables par les utilisateurs. Les rep&egrave;res
modifi&eacute;s dans les instances de mod&egrave;le sont restaur&eacute;s &agrave; leur emplacement d'origine chaque fois que l'instance est mise
&agrave; jour avec le mod&egrave;le principal.
Vous pouvez aussi ajouter vos propres rep&egrave;res aux instances d'un mod&egrave;le. Les guides ajout&eacute;s de cette mani&egrave;re ne sont
pas &eacute;cras&eacute;s lorsque l'instance du mod&egrave;le est mise &agrave; jour avec le mod&egrave;le principal.
Derni&egrave;re mise &agrave; jour le 4/5/2011
182
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
Voir aussi
&laquo; Alignement des &eacute;l&eacute;ments PA &raquo; &agrave; la page 178
&laquo; D&eacute;placement des &eacute;l&eacute;ments PA &raquo; &agrave; la page 177
Utilisation de la grille de mise en forme
La grille affiche un syst&egrave;me de lignes horizontales et verticales dans la fen&ecirc;tre de document. Cette fonction est utile
pour placer des objets de fa&ccedil;on pr&eacute;cise. Vous pouvez aligner automatiquement des &eacute;l&eacute;ments de page &agrave; positionnement
absolu sur la grille en les d&eacute;pla&ccedil;ant, et changer la grille ou d&eacute;finir le comportement d'alignement en indiquant des
param&egrave;tres sp&eacute;cifiques pour la grille. L'alignement fonctionne, que la grille soit visible ou non.
Voir aussi
&laquo; Alignement des &eacute;l&eacute;ments PA &raquo; &agrave; la page 178
&laquo; D&eacute;placement des &eacute;l&eacute;ments PA &raquo; &agrave; la page 177
Affichage ou masquage de la grille
❖ Choisissez Affichage &gt; Grille &gt; Afficher la grille.
Activation ou d&eacute;sactivation de l'alignement
❖ Choisissez Affichage &gt; Grille &gt; Aligner sur la grille.
Modification des param&egrave;tres de la grille
1 Choisissez Affichage &gt; Grille &gt; Param&egrave;tres de la grille.
2 D&eacute;finissez les options et cliquez sur OK pour appliquer les modifications.
Couleur Sp&eacute;cifie la couleur des lignes de la grille. Cliquez sur la palette de couleurs et choisissez une couleur dans le
S&eacute;lecteur de couleur ou tapez un nombre hexad&eacute;cimal dans la zone de texte.
Afficher la grille Affiche la grille en mode Cr&eacute;ation.
Aligner sur la grille Permet d'aligner les &eacute;l&eacute;ments de la page sur les lignes de la grille.
Espacement D&eacute;termine l'espacement entre les lignes de la grille. Tapez une valeur et s&eacute;lectionnez Pixels, Pouces ou
Centim&egrave;tres dans le menu.
Afficher D&eacute;termine si les lignes de la grille apparaissent sous forme de lignes ou de pointill&eacute;s.
Remarque : Si l'option Afficher la grille n'est pas s&eacute;lectionn&eacute;e, la grille n'appara&icirc;t pas et aucune modification n'est visible.
Utilisation d'un trac&eacute; d'image
Vous pouvez utiliser un trac&eacute; de l'image comme guide pour reproduire une mise en page ayant &eacute;t&eacute; cr&eacute;&eacute;e dans une
application graphique telle qu'Adobe Freehand ou Fireworks.
Un trac&eacute; d'image est une image JPG, GIF ou PNG qui appara&icirc;t &agrave; l'arri&egrave;re-plan de la fen&ecirc;tre de document. Vous pouvez
masquer cette image, d&eacute;finir son opacit&eacute; et la d&eacute;placer.
Le trac&eacute; de l'image est uniquement visible dans Dreamweaver ; il n'est pas visible lorsque vous affichez la page dans un
navigateur. Lorsque le trac&eacute; de l'image est visible, les v&eacute;ritables image et couleur d'arri&egrave;re-plan de la page ne sont pas
visibles dans la fen&ecirc;tre de document, mais le sont lorsque la page est affich&eacute;e dans un navigateur.
Derni&egrave;re mise &agrave; jour le 4/5/2011
183
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
Placement d'un trac&eacute; de l'image dans la fen&ecirc;tre de document
1 Effectuez l'une des op&eacute;rations suivantes :
• Choisissez Affichage &gt; Trac&eacute; de l'image &gt; Charger.
• Choisissez Modifier &gt; Propri&eacute;t&eacute;s de la page, puis cliquez sur le bouton Parcourir situ&eacute; &agrave; c&ocirc;t&eacute; de la zone de texte
Trac&eacute; de l'image.
2 Dans la bo&icirc;te de dialogue S&eacute;lectionnez la source de l'image, choisissez un fichier d'image puis cliquez sur OK.
3 Dans la bo&icirc;te de dialogue Propri&eacute;t&eacute;s de la page, d&eacute;finissez la transparence de l'image en tirant la glissi&egrave;re
Transparence de l'image, puis cliquez sur OK.
Pour passer &agrave; un autre trac&eacute; ou modifier &agrave; tout moment la transparence du trac&eacute; en cours, choisissez Modifier &gt;
Propri&eacute;t&eacute;s de la page.
Affichage ou masquage du trac&eacute; de l'image
❖ Choisissez Affichage &gt; Trac&eacute; de l'image &gt; Afficher.
D&eacute;placement d'un trac&eacute; d'image
❖ S&eacute;lectionnez Affichage &gt; Trac&eacute; de l'image &gt; Ajuster la position.
• Pour d&eacute;finir avec pr&eacute;cision la position du trac&eacute; de l'image, indiquez les valeurs des coordonn&eacute;es dans les zones de
texte X et Y.
• Pour d&eacute;placer l'image par incr&eacute;ments de 1 pixel, utilisez les touches fl&eacute;ch&eacute;es.
• Pour d&eacute;placer l'image par incr&eacute;ment de 5 pixels, appuyez simultan&eacute;ment sur la touche Maj et sur l'une des touches
fl&eacute;ch&eacute;es.
R&eacute;tablissement de la position du trac&eacute; de l'image
❖ Choisissez Affichage &gt; Trac&eacute; de l'image &gt; R&eacute;tablir la position.
Le trac&eacute; de l'image se replace dans le coin sup&eacute;rieur gauche de la fen&ecirc;tre de document (0,0).
Alignement du trac&eacute; de l'image sur un &eacute;l&eacute;ment s&eacute;lectionn&eacute;
1 S&eacute;lectionnez un &eacute;l&eacute;ment dans la fen&ecirc;tre de document.
2 Choisissez Affichage &gt; Trac&eacute; de l'image &gt; Aligner l'image avec la s&eacute;lection.
Le coin sup&eacute;rieur gauche du trac&eacute; de l'image est align&eacute; avec le coin sup&eacute;rieur gauche de l'&eacute;l&eacute;ment s&eacute;lectionn&eacute;.
Pr&eacute;sentation de contenu &agrave; l'aide de tableaux
A propos des tableaux
Les tableaux sont tr&egrave;s utiles pour pr&eacute;senter des donn&eacute;es tabulaires et mettre en forme du texte et des images dans une
page HTML. Un tableau comprend au moins une ligne ; chaque ligne comporte au moins une cellule. Bien que les
colonnes ne soient g&eacute;n&eacute;ralement pas sp&eacute;cifi&eacute;es explicitement en code HTML, Dreamweaver vous permet de
manipuler les colonnes, les lignes et les cellules.
Derni&egrave;re mise &agrave; jour le 4/5/2011
184
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
Dreamweaver affiche la largeur du tableau et de chaque colonne du tableau lorsque le tableau est s&eacute;lectionn&eacute; ou que le
point d'insertion se trouve dedans. En regard des largeurs se trouvent les fl&egrave;ches du menu des en-t&ecirc;tes de tableau et des
menus des en-t&ecirc;tes de colonne. Utilisez les menus pour acc&eacute;der rapidement &agrave; des commandes standard relatives aux
tableaux. Vous pouvez activer et d&eacute;sactiver les largeurs et les menus.
Si vous ne voyez pas la largeur d'un tableau ou d'une colonne, cela signifie qu'elle n'est pas sp&eacute;cifi&eacute;e dans le code HTML.
Si deux nombres s'affichent, cela signifie que la largeur visuelle qui appara&icirc;t en mode Cr&eacute;ation est diff&eacute;rente de la
largeur sp&eacute;cifi&eacute;e dans le code HTML. Cela peut se produire lorsque vous redimensionnez un tableau en faisant glisser
son coin inf&eacute;rieur droit ou lorsque vous ajoutez du contenu &agrave; une cellule plus grande que sa valeur d&eacute;finie.
Par exemple, si vous d&eacute;finissez une largeur de colonne de 200 pixels, puis que vous ajoutez du contenu qui &eacute;tend la
largeur &agrave; 250 pixels, deux nombres s'affichent pour cette colonne : 200 (la largeur sp&eacute;cifi&eacute;e dans le code) et (250) entre
parenth&egrave;ses (la largeur visuelle de la colonne telle qu'elle appara&icirc;t &agrave; l'&eacute;cran).
Remarque : Vous avez aussi la possibilit&eacute; de mettre vos pages en forme &agrave; l'aide du positionnement par feuilles de style en
cascade CSS.
Voir aussi
&laquo; Mise en forme des pages avec CSS &raquo; &agrave; la page 158
Priorit&eacute; de formatage des tableaux dans le code HTML
Lorsque vous formatez des tableaux en mode Cr&eacute;ation, vous pouvez d&eacute;finir des propri&eacute;t&eacute;s s'appliquant au tableau tout
entier ou &agrave; une s&eacute;rie de lignes, de colonnes ou de cellules s&eacute;lectionn&eacute;es dans le tableau. Lorsqu'une propri&eacute;t&eacute; (une
couleur d'arri&egrave;re-plan ou un alignement, par exemple) est d&eacute;finie par une valeur pour tout le tableau et par une autre
valeur pour chaque cellule, les propri&eacute;t&eacute;s de formatage des cellules pr&eacute;valent sur les propri&eacute;t&eacute;s de formatage de lignes,
qui &agrave; leur tour pr&eacute;valent sur celles du tableau.
L'ordre de priorit&eacute; pour le formatage de tableau est le suivant :
1 Cellules
2 Lignes
3 Tableau
Par exemple, si vous d&eacute;finissez une couleur bleue pour l'arri&egrave;re-plan d'une cellule, puis la couleur jaune pour celui du
tableau, la couleur de la cellule bleue ne changera pas, puisque la propri&eacute;t&eacute; de formatage de cellule a la priorit&eacute; sur la
propri&eacute;t&eacute; de formatage du tableau.
Remarque : Lorsque vous d&eacute;finissez les propri&eacute;t&eacute;s d'une colonne, Dreamweaver modifie les attributs de la balise td
correspondant &agrave; chaque cellule de la colonne.
A propos du fractionnement et de la fusion de cellules de tableau
Vous pouvez fusionner n'importe quel nombre de cellules adjacentes (tant que la s&eacute;lection correspond &agrave; une ligne ou
&agrave; un rectangle de cellules) pour produire une cellule unique s'&eacute;tendant sur plusieurs colonnes ou lignes. Vous pouvez
fractionner une cellule en un nombre quelconque de lignes et de colonnes, qu'elle ait &eacute;t&eacute; pr&eacute;c&eacute;demment fusionn&eacute;e ou
non. Dreamweaver restructure automatiquement le tableau (en ajoutant les attributs colspan ou rowspan
n&eacute;cessaires) pour obtenir l'agencement sp&eacute;cifi&eacute;.
Derni&egrave;re mise &agrave; jour le 4/5/2011
185
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
Dans l'exemple ci-dessous, les cellules au milieu des deux premi&egrave;res lignes ont &eacute;t&eacute; fusionn&eacute;es en une seule cellule qui
s'&eacute;tend sur deux lignes.
Insertion d'un tableau et ajout de contenu
Utilisez le panneau ou le menu Insertion pour cr&eacute;er un nouveau tableau. Ajoutez ensuite du texte et des images aux
cellules du tableau de la m&ecirc;me fa&ccedil;on que vous le faites en dehors d'un tableau.
Remarque : La fonction Mode Mise en forme est obsol&egrave;te depuis la version Dreamweaver CS4. Le mode Mise en forme
cr&eacute;ait des mises en forme de page &agrave; l'aide de tableaux de mise en forme, ce qui n'est plus conseill&eacute; par Adobe. Pour plus
d'informations sur le mode Mise en forme et la raison pour laquelle il a &eacute;t&eacute; rendu obsol&egrave;te, consultez le Blog de l'&eacute;quipe
Dreamweaver.
1 Dans la fen&ecirc;tre de document en mode Cr&eacute;ation, placez le point d'insertion &agrave; l'endroit o&ugrave; vous voulez que le tableau
apparaisse.
Remarque : Si votre document est vide, le point d'insertion peut uniquement &ecirc;tre plac&eacute; au d&eacute;but du document.
• Choisissez Insertion &gt; Tableau.
• Dans la cat&eacute;gorie Commun du panneau Insertion, cliquez sur le bouton Tableau.
2 D&eacute;finissez les attributs dans la bo&icirc;te de dialogue Tableau et cliquez sur OK pour cr&eacute;er le tableau.
Lignes D&eacute;termine le nombre de lignes du tableau.
Colonnes D&eacute;termine le nombre de colonnes du tableau.
Largeur du tableau Indique la largeur du tableau en pixels ou en pourcentage de la largeur de fen&ecirc;tre du navigateur.
Largeur de la bordure Indique la largeur, en pixels, des bordures du tableau.
Espacement des cellules D&eacute;termine le nombre de pixels s&eacute;parant les cellules contigu&euml;s d'un tableau.
Lorsque vous n'affectez pas explicitement de valeur pour la largeur de la bordure, l'espacement entre les cellules et la
marge int&eacute;rieure des cellules, la plupart des navigateurs affichent une largeur de bordure et une marge int&eacute;rieure des
cellules d&eacute;finies sur 1, ainsi qu'un espacement entre les cellules d&eacute;fini sur 2. Pour &ecirc;tre s&ucirc;r que les navigateurs afficheront
le tableau sans bordure, marge int&eacute;rieure ni espacement, d&eacute;finissez Marge int&eacute;rieure des cellules et Espacement entre les
cellules sur 0.
Marge int&eacute;rieure des cellules Indique le nombre de pixels qui s&eacute;pare la bordure d'une cellule et son contenu.
Aucun N'autorise pas les en-t&ecirc;tes de colonne ou de ligne pour le tableau.
Gauche Transforme la premi&egrave;re colonne du tableau en colonne d'en-t&ecirc;tes pour vous permettre d'entrer un en-t&ecirc;te
pour ligne du tableau.
Haut Transforme la premi&egrave;re ligne du tableau en ligne d'en-t&ecirc;tes pour vous permettre d'entrer un en-t&ecirc;te pour chaque
colonne du tableau.
Les deux Vous permet d'entrer des en-t&ecirc;tes de colonne et de ligne dans le tableau.
Il est judicieux d'employer des en-t&ecirc;tes au cas o&ugrave; l'un des visiteurs de votre site Web utiliserait un lecteur d'&eacute;cran. Les
lecteurs d'&eacute;cran lisent les en-t&ecirc;tes de tableau et aident les utilisateurs &agrave; garder une trace des informations de tableau.
L&eacute;gende Fournit un titre de tableau qui s'affiche en dehors du tableau.
Derni&egrave;re mise &agrave; jour le 4/5/2011
186
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
Aligner la l&eacute;gende Indique o&ugrave; la l&eacute;gende du tableau appara&icirc;t par rapport au tableau.
R&eacute;sum&eacute; Fournit une description du tableau. Les lecteurs d'&eacute;cran lisent le texte de r&eacute;sum&eacute; mais le texte n'appara&icirc;t pas
dans le navigateur de l'utilisateur.
Voir aussi
&laquo; Ajout et formatage de texte &raquo; &agrave; la page 226
&laquo; Ajout et modification d'images &raquo; &agrave; la page 243
Importation et exportation de donn&eacute;es tabulaires
Vous pouvez importer des donn&eacute;es tabulaires cr&eacute;&eacute;es dans une autre application (par exemple, Microsoft Excel) et
enregistr&eacute;es dans un format texte d&eacute;limit&eacute; (&eacute;l&eacute;ments s&eacute;par&eacute;s par des tabulations, virgules, deux-points, points-virgules
ou autres d&eacute;limiteurs) dans Dreamweaver et les mettre en forme dans un tableau.
Vous pouvez &eacute;galement exporter les donn&eacute;es d'un tableau depuis Dreamweaver vers un fichier texte, avec le contenu
de cellules contigu&euml;s s&eacute;par&eacute; par un d&eacute;limiteur. Les caract&egrave;res que vous pouvez utiliser comme d&eacute;limiteurs sont la
virgule, les deux-points, le point-virgule ou l'espace. Lorsque vous exportez un tableau, tout le tableau est export&eacute; ; vous
ne pouvez pas exporter certaines parties du tableau seulement.
Si vous souhaitez ne r&eacute;cup&eacute;rer qu'une partie des donn&eacute;es d'un tableau, par exemple les six premi&egrave;res lignes ou les six
premi&egrave;res colonnes, copiez les cellules contenant ces donn&eacute;es et collez-les hors du tableau (pour cr&eacute;er un nouveau
tableau) avant d'exporter le nouveau tableau.
Importation de donn&eacute;es tabulaires
1 Effectuez l'une des op&eacute;rations suivantes :
• Choisissez Fichier &gt; Importer &gt; Donn&eacute;es tabulaires.
• Dans la cat&eacute;gorie Donn&eacute;es du panneau Insertion, cliquez sur l'ic&ocirc;ne Importer les donn&eacute;es tabulaires
.
• Choisissez Insertion &gt; Objets du tableau &gt; Importer les donn&eacute;es tabulaires.
2 D&eacute;finissez les options relatives aux donn&eacute;es tabulaires, puis cliquez sur OK.
Fichier de donn&eacute;es Correspond au nom du fichier &agrave; importer. Cliquez sur le bouton Parcourir pour choisir le fichier.
D&eacute;limiteur Correspond au d&eacute;limiteur utilis&eacute; dans le fichier que vous importez.
Si vous choisissez Autre, une zone de texte appara&icirc;t &agrave; droite du menu contextuel. Entrez le d&eacute;limiteur utilis&eacute; dans votre
fichier.
Remarque : Sp&eacute;cifiez le d&eacute;limiteur utilis&eacute; lors de l'enregistrement du fichier de donn&eacute;es. Dans le cas contraire, le fichier
ne pourra pas &ecirc;tre import&eacute; correctement et vos donn&eacute;es ne seront pas format&eacute;es convenablement dans un tableau.
Largeur du tableau Correspond &agrave; la largeur du tableau.
• S&eacute;lectionnez Adapter au contenu pour adapter la largeur de chaque colonne &agrave; la plus longue cha&icirc;ne de texte qu'elle
contient.
• S&eacute;lectionnez Fixe pour sp&eacute;cifier une largeur de tableau fixe, en pixels ou en pourcentage de la largeur de fen&ecirc;tre du
navigateur.
Bordure Indique la largeur, en pixels, des bordures du tableau.
Marge int&eacute;rieure des cellules D&eacute;termine l'espace (en pixels) entre le contenu d'une cellule et son contour.
Espacement des cellules D&eacute;termine le nombre de pixels s&eacute;parant les cellules contigu&euml;s d'un tableau.
Derni&egrave;re mise &agrave; jour le 4/5/2011
187
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
Lorsque vous n'affectez pas explicitement de valeur pour les bordures, l'espacement entre les cellules et la marge
int&eacute;rieure des cellules, la plupart des navigateurs affichent des bordures et une marge int&eacute;rieure des cellules d&eacute;finies
sur 1, ainsi qu'un espacement entre les cellules d&eacute;fini sur 2. Pour &ecirc;tre s&ucirc;r que les navigateurs afficheront le tableau sans
marge int&eacute;rieure ni espacement, d&eacute;finissez Marge int&eacute;rieure des cellules et Espacement entre les cellules sur 0. Pour
visualiser les contours des cellules et du tableau lorsque la bordure est d&eacute;finie sur 0, s&eacute;lectionnez Affichage &gt; Assistances
visuelles &gt; Bordures de tableau.
Formatage ligne sup&eacute;rieure D&eacute;termine le formatage appliqu&eacute;, le cas &eacute;ch&eacute;ant, &agrave; la ligne sup&eacute;rieure du tableau.
Choisissez parmi quatre options de formatage : pas de formatage, gras, italique ou gras italique.
Exportation d'un tableau
1 Placez le point d'insertion dans l'une des cellules du tableau.
2 Choisissez Fichier &gt; Exporter &gt; Tableau.
3 D&eacute;finissez les options suivantes :
D&eacute;limiteur Indique quel caract&egrave;re d&eacute;limiteur doit &ecirc;tre utilis&eacute; pour s&eacute;parer des &eacute;l&eacute;ments dans le fichier export&eacute;.
Sauts de ligne Indique sous quel syst&egrave;me d'exploitation vous allez ouvrir le fichier export&eacute; : Windows, Macintosh ou
UNIX. Les diff&eacute;rents syst&egrave;mes d'exploitation utilisent des m&eacute;thodes diff&eacute;rentes pour indiquer la fin d'une ligne de
texte.
4 Cliquez sur Exporter.
5 Saisissez un nom pour le fichier et cliquez sur Enregistrer.
S&eacute;lection d'&eacute;l&eacute;ments de tableau
Vous pouvez s&eacute;lectionner un tableau entier ou encore l'ensemble d'une ligne ou d'une colonne. Vous pouvez
&eacute;galement s&eacute;lectionner une ou plusieurs cellules individuelles.
Lorsque vous d&eacute;placez le pointeur sur un tableau, une ligne, une colonne ou une cellule, Dreamweaver met toutes les
cellules de cette s&eacute;lection en surbrillance afin que vous sachiez quelles cellules seront s&eacute;lectionn&eacute;es. Ceci est utile pour
les tableaux sans bordures, les cellules comprenant plusieurs colonnes ou lignes ou dans le cas de tableaux imbriqu&eacute;s.
Vous pouvez modifier la couleur de la mise en surbrillance dans les pr&eacute;f&eacute;rences.
Si vous placez le pointeur sur une bordure du tableau, puis que vous maintenez la touche Ctrl (Windows) ou
Commande (Macintosh) enfonc&eacute;e, la totalit&eacute; de la structure du tableau (c'est-&agrave;-dire toutes les cellules) est mise en
surbrillance. Ceci peut &ecirc;tre utile lorsque vous disposez de tableaux imbriqu&eacute;s et que vous souhaitez afficher la structure
de l'un d'eux.
S&eacute;lection d'un tableau entier
❖ Effectuez l'une des op&eacute;rations suivantes :
• Cliquez dans le coin sup&eacute;rieur gauche du tableau, sur le bord sup&eacute;rieur ou inf&eacute;rieur du tableau ou sur une ligne ou
une bordure de colonne.
Remarque : Le pointeur prend la forme de l'ic&ocirc;ne de grille du tableau pour vous indiquer que vous pouvez s&eacute;lectionner
le tableau (sauf si vous cliquez sur la bordure d'une ligne ou d'une colonne).
• Cliquez dans une cellule du tableau, puis s&eacute;lectionnez la balise &lt;table&gt; dans le s&eacute;lecteur de balises dans le coin
inf&eacute;rieur gauche de la fen&ecirc;tre de document.
• Cliquez dans une cellule du tableau, puis choisissez Modifier &gt; Tableau &gt; S&eacute;lectionner le tableau.
• Cliquez dans une cellule du tableau, puis sur le menu d'en-t&ecirc;te du tableau et choisissez S&eacute;lectionner le tableau. Des
poign&eacute;es de s&eacute;lection apparaissent sur les bords inf&eacute;rieurs et droits du tableau s&eacute;lectionn&eacute;.
Derni&egrave;re mise &agrave; jour le 4/5/2011
188
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
S&eacute;lection d'une ou plusieurs lignes ou colonnes
1 Positionnez le pointeur sur le bord gauche d'une ligne ou le bord sup&eacute;rieur d'une colonne.
2 Lorsque le pointeur se transforme en fl&egrave;che de s&eacute;lection, cliquez pour s&eacute;lectionner une ligne ou une colonne ou
faites-le glisser pour s&eacute;lectionner plusieurs lignes ou colonnes.
S&eacute;lection d'une seule colonne
1 Cliquez dans la colonne.
2 Cliquez sur le menu des en-t&ecirc;tes de colonne, puis choisissez S&eacute;lectionner la colonne.
S&eacute;lection d'une seule cellule
❖ Effectuez l'une des op&eacute;rations suivantes :
• Cliquez dans la cellule, puis s&eacute;lectionnez la balise &lt;td&gt; dans le s&eacute;lecteur de balises dans le coin inf&eacute;rieur gauche de
la fen&ecirc;tre de document.
• Cliquez dans la cellule en maintenant la touche Ctrl (Windows) ou Commande (Macintosh) enfonc&eacute;e.
• Cliquez dans la cellule, puis choisissez Edition &gt; S&eacute;lectionner tout.
Lorsqu'une cellule est d&eacute;j&agrave; s&eacute;lectionn&eacute;e, choisissez Edition &gt; S&eacute;lectionner tout &agrave; nouveau pour s&eacute;lectionner tout le
tableau.
S&eacute;lection d'une ligne ou d'un bloc rectangulaire de cellules
❖ Effectuez l'une des op&eacute;rations suivantes :
• Faites glisser la souris d'une cellule vers une autre.
• Cliquez sur une cellule. Tout en appuyant sur la touche Ctrl (Windows) ou Commande (Macintosh), cliquez sur la
m&ecirc;me cellule, puis cliquez dans une autre cellule en maintenant la touche Maj enfonc&eacute;e.
Toutes les cellules se trouvant &agrave; l'int&eacute;rieur de la zone rectangulaire ou lin&eacute;aire ainsi d&eacute;limit&eacute;e par les deux cellules sont
s&eacute;lectionn&eacute;es.
Derni&egrave;re mise &agrave; jour le 4/5/2011
189
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
S&eacute;lection de cellules non adjacentes
❖ Appuyez sur Ctrl (Windows) ou Commande (Macintosh), puis cliquez sur les cellules, les lignes ou les colonnes
que vous voulez s&eacute;lectionner.
Si chaque cellule, ligne ou colonne sur laquelle vous cliquez apr&egrave;s avoir appuy&eacute; sur Ctrl ou sur Commande n'est pas
d&eacute;j&agrave; s&eacute;lectionn&eacute;e, elle est ajout&eacute;e &agrave; la s&eacute;lection. Si elle est d&eacute;j&agrave; s&eacute;lectionn&eacute;e, elle est retir&eacute;e de la s&eacute;lection.
Modification de la couleur de surbrillance pour les &eacute;l&eacute;ments d'un tableau
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh).
2 S&eacute;lectionnez la cat&eacute;gorie Surbrillance dans la liste &agrave; gauche, effectuez l'une des modifications suivantes, puis cliquez
sur OK.
• Pour modifier la couleur de surbrillance des &eacute;l&eacute;ments du tableau, cliquez dans la case de couleur Survol et
s&eacute;lectionnez une couleur de surbrillance &agrave; l'aide du s&eacute;lecteur de couleur (ou tapez la valeur hexad&eacute;cimale
correspondant &agrave; la couleur de surbrillance dans la zone de texte).
• Pour activer ou d&eacute;sactiver la s&eacute;lection d'&eacute;l&eacute;ments du tableau, activez ou d&eacute;sactivez l'option Afficher de l'option
Survol.
Remarque : Ces options s'appliquent &agrave; tous les objets, tels que les &eacute;l&eacute;ments &agrave; positionnement absolu (PA), que
Dreamweaver met en surbrillance lorsque vous faites passer le pointeur dessus.
D&eacute;finition des propri&eacute;t&eacute;s des tableaux
Vous pouvez utiliser l'inspecteur Propri&eacute;t&eacute;s pour modifier les tableaux.
1 S&eacute;lectionnez un tableau.
2 Dans l'inspecteur Propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), apportez les modifications requises aux propri&eacute;t&eacute;s.
ID de tableau Un identificateur du tableau.
Lignes et colonnes Le nombre de lignes et de colonnes dans le tableau.
L La largeur du tableau, en pixels ou en pourcentage de la largeur de fen&ecirc;tre du navigateur.
Remarque : Il est rarement utile de d&eacute;finir la hauteur d'un tableau.
Remplissage D&eacute;termine l'espace (en pixels) entre le contenu d'une cellule et son contour.
Espac. de cellule D&eacute;termine le nombre de pixels s&eacute;parant les cellules contigu&euml;s d'un tableau.
Alignement D&eacute;termine la position du tableau par rapport aux autres &eacute;l&eacute;ments du m&ecirc;me paragraphe (texte ou images).
Gauche aligne le tableau sur la gauche des autres &eacute;l&eacute;ments (pour que le texte situ&eacute; dans le m&ecirc;me paragraphe apparaisse
&agrave; droite du tableau) ; Droite aligne le tableau sur la droite des autres &eacute;l&eacute;ments (le texte apparaissant &agrave; gauche du
tableau) ; et Centrer centre le tableau (le texte apparaissant au-dessus et/ou en dessous du tableau). Par d&eacute;faut indique
que le navigateur doit utiliser son alignement par d&eacute;faut.
Lorsque l'alignement est d&eacute;fini sur Par d&eacute;faut, le reste du contenu n'est pas affich&eacute; &agrave; c&ocirc;t&eacute; du tableau. Pour afficher un
tableau &agrave; c&ocirc;t&eacute; du contenu, utilisez l'alignement &agrave; droite ou &agrave; gauche.
Bordure Indique la largeur, en pixels, des bordures du tableau.
Derni&egrave;re mise &agrave; jour le 4/5/2011
190
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
Lorsque vous n'affectez pas explicitement de valeur pour la bordure, l'espacement entre les cellules et la marge
int&eacute;rieure des cellules, la plupart des navigateurs affichent la bordure et une marge int&eacute;rieure des cellules d&eacute;finies
sur 1, ainsi qu'un espacement entre les cellules d&eacute;fini sur 2. Pour &ecirc;tre s&ucirc;r que les navigateurs afficheront le tableau sans
marge int&eacute;rieure ni espacement, d&eacute;finissez Bordure sur 0, Marge int&eacute;rieure des cellules et Espacement entre les cellules
sur 0. Pour visualiser les contours des cellules et du tableau lorsque la bordure est d&eacute;finie sur 0, s&eacute;lectionnez Affichage &gt;
Assistances visuelles &gt; Bordures de tableau.
Classe Applique une classe CSS au tableau.
Remarque : Il peut &ecirc;tre n&eacute;cessaire de d&eacute;velopper l'inspecteur Propri&eacute;t&eacute;s du tableau pour afficher les options suivantes.
Pour d&eacute;velopper l'inspecteur Propri&eacute;t&eacute;s du tableau, cliquez sur la fl&egrave;che de d&eacute;veloppement dans son coin inf&eacute;rieur droit.
Effacer largeurs de colonne et Effacer hauteurs de ligne suppriment toutes les valeurs de hauteur de ligne ou de largeur
de colonne du tableau explicitement sp&eacute;cifi&eacute;es.
Convertir largeurs de tableau en pixels et Convertir les hauteurs de tableau en pixels d&eacute;finissent la largeur ou la
hauteur de chaque colonne du tableau sur sa largeur en pixels (d&eacute;finit &eacute;galement la largeur du tableau sur sa largeur
en pixels).
Convertir largeurs de tableau en pourcentage et Convertir les hauteurs de tableau en pourcentages d&eacute;finissent la
largeur ou la hauteur de chaque colonne du tableau sur sa largeur exprim&eacute;e en pourcentage de la largeur de la fen&ecirc;tre
de document (d&eacute;finit &eacute;galement la largeur du tableau sur sa largeur en pourcentage de la largeur de la fen&ecirc;tre de
document).
Si vous avez tap&eacute; une valeur dans une zone de texte, appuyez sur Tab ou Entr&eacute;e (Windows) ou Retour (Macintosh)
pour l'appliquer.
D&eacute;finition des propri&eacute;t&eacute;s de cellule, de ligne ou de colonne
Vous pouvez utiliser l'inspecteur Propri&eacute;t&eacute;s pour modifier des cellules et des lignes dans un tableau.
1 S&eacute;lectionnez une ligne ou une colonne.
2 Dans l'inspecteur Propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), d&eacute;finissez les options suivantes :
Horiz Indique l'alignement horizontal du contenu d'une cellule, d'une ligne ou d'une colonne. Vous pouvez aligner le
contenu de la cellule sur la gauche, la droite ou le centre des cellules ou vous pouvez indiquer au navigateur d'utiliser
l'alignement par d&eacute;faut (en g&eacute;n&eacute;ral &agrave; gauche pour les cellules normales et au centre pour les cellules d'en-t&ecirc;te).
Vert. Indique l'alignement vertical du contenu d'une cellule, d'une ligne ou d'une colonne. Vous pouvez aligner le
contenu de la cellule sur le haut, le centre ou le bas des cellules, sur la ligne de base ou encore indiquer au navigateur
d'utiliser l'alignement par d&eacute;faut (en g&eacute;n&eacute;ral le centre).
L et H La largeur et la hauteur des cellules s&eacute;lectionn&eacute;es en pixels ou en pourcentage de la largeur ou de la hauteur de
tout le tableau. Pour sp&eacute;cifier un pourcentage, faites suivre la valeur du signe de pourcentage (%). Pour laisser au
navigateur le soin de d&eacute;terminer la largeur et la hauteur appropri&eacute;es, en fonction du contenu de la cellule et des
largeurs et hauteurs des autres colonnes et lignes, laissez le champ vide (param&eacute;trage par d&eacute;faut).
Par d&eacute;faut, un navigateur choisit une hauteur de ligne et une largeur de colonne correspondant &agrave; l'image la plus large
ou &agrave; la ligne la plus longue dans une colonne. C'est pourquoi il arrive qu'une colonne de tableau devienne beaucoup
plus large que les autres lorsque vous y ajoutez du contenu.
Remarque : Vous pouvez sp&eacute;cifier une hauteur en pourcentage de la hauteur totale du tableau, mais il se peut que la ligne
ne s'affiche pas au pourcentage de hauteur sp&eacute;cifi&eacute; dans les navigateurs.
Ar-pl La couleur d'arri&egrave;re-plan d'une cellule, d'une colonne ou d'une ligne, choisie &agrave; l'aide du s&eacute;lecteur de couleurs.
Derni&egrave;re mise &agrave; jour le 4/5/2011
191
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
Fusionner les cellules Combine les cellules, lignes ou colonnes s&eacute;lectionn&eacute;es en une seule cellule. Vous pouvez
fusionner des cellules uniquement si elles forment un bloc rectangulaire ou lin&eacute;aire.
Fractionner la cellule Divise une cellule en deux ou plusieurs cellules. Vous ne pouvez fractionner qu'une cellule &agrave; la
fois : ce bouton est d&eacute;sactiv&eacute; si plusieurs cellules sont s&eacute;lectionn&eacute;es.
Pas de retour &agrave; la ligne auto Evite tout renvoi automatique &agrave; la ligne, en conservant tout le texte d'une cellule donn&eacute;e
sur une seule ligne. Si Pas de retour &agrave; la ligne auto est activ&eacute;, les cellules s'&eacute;largissent en fonction de la taille des donn&eacute;es
que vous tapez ou collez. (Normalement, les cellules s'&eacute;largissent horizontalement pour accueillir le mot le plus long
ou l'image la plus large, puis s'&eacute;tirent verticalement autant que n&eacute;cessaire pour int&eacute;grer tout autre contenu).
En-t&ecirc;te Met en forme les cellules s&eacute;lectionn&eacute;es comme des cellules d'en-t&ecirc;te de tableau. Par d&eacute;faut, le contenu des
cellules de titre de tableau est en caract&egrave;res gras et centr&eacute;.
Vous pouvez sp&eacute;cifier la largeur ou la hauteur par des pixels ou des pourcentages. Vous pouvez convertir les pixels en
pourcentages et inversement.
Remarque : Lorsque vous d&eacute;finissez les propri&eacute;t&eacute;s d'une colonne, Dreamweaver modifie les attributs de la balise td
correspondant &agrave; chaque cellule de la colonne. Lorsque vous d&eacute;finissez certaines propri&eacute;t&eacute;s d'une ligne, Dreamweaver
modifie les attributs de la balise tr plut&ocirc;t que de modifier les attributs de chaque balise td dans la ligne. Lorsque vous
appliquez le m&ecirc;me format &agrave; toutes les cellules d'une ligne, en appliquant le format &agrave; la balise tr, vous obtenez un code
HTML plus net et plus concis.
3 Appuyez sur Tab ou Entr&eacute;e (Windows) ou Retour (Macintosh) pour appliquer la valeur.
Utilisation du mode Tableaux d&eacute;velopp&eacute;s pour une modification de tableau
plus simple
Le mode Tableaux d&eacute;velopp&eacute;s ajoute provisoirement de la marge &agrave; l'int&eacute;rieur des cellules et de l'espacement &agrave; tous les
tableaux d'un document, et augmente les bordures des tableaux afin de rendre les modifications plus faciles. Ce mode
vous permet de choisir des &eacute;l&eacute;ments dans les tableaux ou de placer le point d'insertion de mani&egrave;re pr&eacute;cise.
Par exemple, vous pouvez d&eacute;velopper un tableau pour placer le point d'insertion &agrave; gauche ou &agrave; droite d'une image, sans
s&eacute;lectionner l'image ou la cellule du tableau par inadvertance.
B
A
A. Tableau en mode Standard B. Tableau en mode Tableaux d&eacute;velopp&eacute;s
Remarque : Apr&egrave;s avoir choisi ou plac&eacute; le point d'insertion, vous devez revenir au mode Standard du mode Cr&eacute;ation pour
effectuer vos modifications. En mode Tableaux d&eacute;velopp&eacute;s, certaines op&eacute;rations, telles que le redimensionnement, ne
produisent pas les r&eacute;sultats attendus.
Basculement en mode Tableaux d&eacute;velopp&eacute;s
1 Si vous travaillez en mode Code, s&eacute;lectionnez Affichage &gt; Cr&eacute;ation ou Affichage &gt; Code et cr&eacute;ation (vous ne
pouvez pas passer en mode Tableaux d&eacute;velopp&eacute;s lorsque vous &ecirc;tes en mode Code).
2 Effectuez l'une des op&eacute;rations suivantes :
• Choisissez Affichage &gt; Mode Tableau &gt; Mode Tableaux d&eacute;velopp&eacute;s.
Derni&egrave;re mise &agrave; jour le 4/5/2011
192
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
• Dans la cat&eacute;gorie Mise en forme du panneau Insertion, cliquez sur D&eacute;velopp&eacute;.
Une barre &eacute;tiquet&eacute;e Mode Tableaux d&eacute;velopp&eacute;s s'affiche en haut de la fen&ecirc;tre de document. Dreamweaver ajoute une
marge int&eacute;rieure des cellules et de l'espacement entre les cellules &agrave; tous les tableaux de la page et augmente l'&eacute;paisseur
des bordures des tableaux.
Sortie du mode Tableaux d&eacute;velopp&eacute;s
❖ Effectuez l'une des op&eacute;rations suivantes :
• Cliquez sur [quitter] dans la barre intitul&eacute;e Mode Tableaux d&eacute;velopp&eacute;s en haut de la fen&ecirc;tre de document.
• Choisissez Affichage &gt; Mode Tableau &gt; Mode Standard.
• Dans la cat&eacute;gorie Mise en forme du panneau Insertion, cliquez sur Standard.
Mise en forme des tableaux et des cellules
Vous pouvez modifier l'aspect des tableaux en d&eacute;finissant des propri&eacute;t&eacute;s pour l'ensemble ou une partie de leurs
cellules, ou en leur appliquant une mise en forme pr&eacute;d&eacute;finie. Avant de d&eacute;finir les propri&eacute;t&eacute;s d'un tableau ou de cellules,
vous devez savoir que l'ordre de priorit&eacute; pour le formatage est le suivant : cellules, lignes et tableaux.
Pour formater le texte dans une cellule de tableau, suivez la m&ecirc;me proc&eacute;dure que pour formater du texte en dehors
d'un tableau.
Voir aussi
&laquo; Ajout et formatage de texte &raquo; &agrave; la page 226
Modification du format d'un tableau, d'une cellule, d'une ligne ou d'une colonne.
1 S&eacute;lectionnez un tableau, une cellule, une ligne ou une colonne.
2 Dans l'inspecteur Propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), cliquez sur la fl&egrave;che d'agrandissement situ&eacute;e dans le coin
inf&eacute;rieur droit et modifiez les propri&eacute;t&eacute;s en fonction de vos besoins.
3 Modifiez les propri&eacute;t&eacute;s de votre choix.
Pour plus d'informations sur les options, cliquez sur l'ic&ocirc;ne Aide de l'inspecteur Propri&eacute;t&eacute;s.
Remarque : Lorsque vous d&eacute;finissez les propri&eacute;t&eacute;s d'une colonne, Dreamweaver modifie les attributs de la balise td
correspondant &agrave; chaque cellule de la colonne. Lorsque vous d&eacute;finissez certaines propri&eacute;t&eacute;s d'une ligne, Dreamweaver
modifie les attributs de la balise tr plut&ocirc;t que de modifier les attributs de chaque balise td dans la ligne. Lorsque vous
appliquez le m&ecirc;me format &agrave; toutes les cellules d'une ligne, en appliquant le format &agrave; la balise tr, vous obtenez un code
HTML plus net et plus concis.
Ajout ou modification des valeurs d'accessibilit&eacute; d'un tableau en mode Code
❖ Modifiez les attributs dans le code.
Pour rep&eacute;rer rapidement les balises dans le code, cliquez dans le tableau, puis s&eacute;lectionnez la balise &lt;table&gt; dans le
s&eacute;lecteur de balises situ&eacute; au bas de la fen&ecirc;tre de document.
Ajout ou modification des valeurs d'accessibilit&eacute; d'un tableau en mode Cr&eacute;ation
• Pour modifier la l&eacute;gende du tableau, mettez-la en surbrillance, puis tapez une nouvelle l&eacute;gende.
• Pour modifier l'alignement de la l&eacute;gende du tableau, placez le point d'insertion dans la l&eacute;gende, cliquez du bouton
droit de la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e (Macintosh), puis choisissez Modifier le
code de la balise.
Derni&egrave;re mise &agrave; jour le 4/5/2011
193
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
• Pour modifier le r&eacute;sum&eacute; du tableau, s&eacute;lectionnez le tableau, cliquez du bouton droit de la souris (Windows) ou en
maintenant la touche Ctrl enfonc&eacute;e (Macintosh), puis choisissez Modifier le code de la balise.
Redimensionnement des tableaux, des colonnes et des lignes
Redimensionnement des tableaux
Vous pouvez redimensionner tout un tableau ou seulement certaines cellules ou certaines colonnes individuelles.
Lorsque vous redimensionnez tout un tableau, toutes ses cellules changent de taille en proportion. Si les cellules d'un
tableau ont une largeur ou une hauteur sp&eacute;cifi&eacute;es explicitement, le redimensionnement du tableau modifie la taille
visuelle des cellules dans la fen&ecirc;tre de document mais ne modifie pas la largeur et la hauteur sp&eacute;cifi&eacute;es des cellules.
Vous pouvez redimensionner un tableau en faisant glisser l'une de ses poign&eacute;es de s&eacute;lection. Dreamweaver affiche la
largeur du tableau, ainsi qu'un menu des en-t&ecirc;tes de tableau, en haut ou en bas du tableau lorsque le tableau est
s&eacute;lectionn&eacute; ou que le point d'insertion se trouve dedans.
Les largeurs de colonne d&eacute;finies dans le code HTML ne correspondent pas n&eacute;cessairement aux largeurs apparentes &agrave;
l'&eacute;cran. Dans ce cas, vous pouvez uniformiser les largeurs. Dreamweaver affiche les largeurs de colonne et de tableau
ainsi que les menus d'en-t&ecirc;tes pour vous aider &agrave; mettre les tableaux en forme. Vous pouvez activer ou d&eacute;sactiver ces
informations &agrave; votre convenance.
Redimensionnement des colonnes et des lignes
Vous pouvez modifier la largeur d'une colonne ou la hauteur d'une ligne dans l'inspecteur Propri&eacute;t&eacute;s ou en faisant
glisser les bordures de la colonne ou de la ligne. Si vous avez des probl&egrave;mes pour le redimensionnement, vous pouvez
effacer la largeur des colonnes ou la hauteur des lignes et recommencer.
Remarque : Vous pouvez aussi modifier la largeur et la hauteur des cellules directement dans le code HTML &agrave; l'aide du
mode Code.
Dreamweaver affiche la largeur des colonnes, ainsi que les menus des en-t&ecirc;tes de colonne, en haut ou en bas des
colonnes lorsque le tableau est s&eacute;lectionn&eacute; ou que le point d'insertion se trouve dedans. Vous pouvez activer ou
d&eacute;sactiver les menus d'en-t&ecirc;tes de colonne &agrave; votre convenance.
Voir aussi
&laquo; Utilisation de code de page &raquo; &agrave; la page 304
Redimensionnement de tableaux, de colonnes et de lignes
Redimensionnement d'un tableau
❖ S&eacute;lectionnez le tableau.
• Pour redimensionner le tableau horizontalement, faites glisser la poign&eacute;e de s&eacute;lection vers la droite.
• Pour redimensionner le tableau verticalement, faites glisser la poign&eacute;e de s&eacute;lection vers le bas.
• Pour redimensionner le tableau verticalement et horizontalement, faites glisser la poign&eacute;e de s&eacute;lection vers le coin
inf&eacute;rieur droit.
Modification de la largeur d'une colonne tout en conservant la m&ecirc;me largeur de tableau
❖ Faites glisser la bordure droite de la colonne &agrave; modifier.
Derni&egrave;re mise &agrave; jour le 4/5/2011
194
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
La largeur de la colonne contigu&euml; est &eacute;galement modifi&eacute;e, si bien que vous redimensionnez deux colonnes. L'affichage
visuel vous montre la mani&egrave;re dont les colonnes seront ajust&eacute;es, la largeur totale du tableau ne variant pas.
Remarque : Dans les tableaux avec des largeurs en pourcentage (et non en pixels), si vous faites glisser la bordure droite
de l'extr&ecirc;me droite du tableau, la largeur globale du tableau est modifi&eacute;e et toutes les colonnes s'adaptent
proportionnellement.
Modification de la largeur d'une colonne en conservant les dimensions des autres colonnes
❖ Maintenez la touche Maj enfonc&eacute;e, puis faites glisser la bordure de la colonne.
Seule la largeur de cette colonne change. L'affichage visuel vous montre la mani&egrave;re dont les colonnes seront ajust&eacute;es,
la largeur totale du tableau variant en fonction de la colonne redimensionn&eacute;e.
Modification de la hauteur d'une ligne visuellement
❖ Faites glisser la bordure inf&eacute;rieure de la ligne.
Uniformisation des largeurs de colonne en mode Code avec les largeurs visuelles
1 Cliquez dans une cellule.
2 Cliquez sur le menu des en-t&ecirc;tes de tableau, puis choisissez Uniformiser toutes les largeurs.
Dreamweaver red&eacute;finit la largeur sp&eacute;cifi&eacute;e dans le code sur la largeur visuelle.
Effacement de toutes les largeurs et hauteurs d&eacute;finies dans un tableau
1 S&eacute;lectionnez le tableau.
2 Effectuez l'une des op&eacute;rations suivantes :
• Choisissez Modifier &gt; Tableau &gt; Effacer les largeurs de colonnes ou Modifier &gt; Tableau &gt; Effacer les hauteurs de
cellules.
Derni&egrave;re mise &agrave; jour le 4/5/2011
195
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
• Dans l'inspecteur Propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), cliquez sur le bouton Effacer les hauteurs de ligne
bouton Effacer les largeurs de colonne
ou sur le
.
• Cliquez sur le menu des en-t&ecirc;tes de colonne, puis choisissez Effacer toutes les hauteurs ou Effacer toutes les
largeurs.
Effacement d'une largeur de colonne d&eacute;finie
❖ Cliquez sur le menu des en-t&ecirc;tes de colonne, puis choisissez Effacer les largeurs de colonne.
Activation ou d&eacute;sactivation des menus et de la largeur d'un tableau et des colonnes
1 Choisissez Affichage &gt; Assistances visuelles &gt; Largeurs de tableau.
2 Cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e (Macintosh) dans le
tableau, puis choisissez Tableau &gt; Largeurs de tableau.
Ajout et suppression de lignes et de colonnes
Pour ajouter et supprimer des lignes et des colonnes &agrave; l'aide des commandes Modifier &gt; Tableau ou du menu des ent&ecirc;tes de colonne.
Le fait d'appuyer sur la touche de tabulation lorsque le curseur se trouve dans la derni&egrave;re cellule d'un tableau ajoute
automatiquement une ligne.
Ajout d'une ligne ou d'une colonne individuelle
❖ Cliquez dans une cellule, puis proc&eacute;dez de l'une des mani&egrave;res suivantes :
• Choisissez Modifier &gt; Tableau &gt; Ins&eacute;rer une ligne ou Modifier &gt; Tableau &gt; Ins&eacute;rer une colonne.
Une ligne appara&icirc;t au-dessus du point d'insertion ou une colonne appara&icirc;t &agrave; gauche du point d'insertion.
• Cliquez sur le menu des en-t&ecirc;tes de colonne, puis choisissez Ins&eacute;rer une colonne &agrave; gauche ou Ins&eacute;rer une colonne
&agrave; droite.
Derni&egrave;re mise &agrave; jour le 4/5/2011
196
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
Ajout de plusieurs lignes ou colonnes
1 Cliquez dans une cellule.
2 Choisissez Modifier &gt; Tableau &gt; Ins&eacute;rer des lignes ou des colonnes et cliquez sur OK.
Ins&eacute;rer Indique les lignes ou les colonnes &agrave; ins&eacute;rer.
Nombre de lignes ou Nombre de colonnes Le nombre de lignes ou de colonnes &agrave; ins&eacute;rer.
O&ugrave; Indique si les nouvelles lignes ou colonnes doivent appara&icirc;tre avant ou apr&egrave;s la ligne ou la colonne de la cellule
s&eacute;lectionn&eacute;e.
Suppression d'une ligne ou d'une colonne
❖ Effectuez l'une des op&eacute;rations suivantes :
• Cliquez sur une cellule de la ligne ou de la colonne que vous voulez supprimer, puis choisissez Modifier &gt; Tableau &gt;
Supprimer la ligne ou Modifier &gt; Tableau &gt; Supprimer la colonne.
• S&eacute;lectionnez une ligne ou une colonne enti&egrave;re, puis choisissez Edition &gt; Effacer ou appuyez sur Suppr.
Ajout ou suppression de lignes ou de colonnes &agrave; l'aide de l'inspecteur Propri&eacute;t&eacute;s
1 S&eacute;lectionnez le tableau.
2 Dans l'inspecteur Propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), proc&eacute;dez de l'une des mani&egrave;res suivantes :
• Pour ajouter ou supprimer des lignes, augmentez ou r&eacute;duisez la valeur indiquant le nombre de lignes.
• Pour ajouter ou supprimer des colonnes, augmentez ou r&eacute;duisez la valeur indiquant le nombre de colonnes.
Remarque : Dreamweaver ne vous avertit pas si vous supprimez des lignes et des colonnes contenant des donn&eacute;es.
Fractionnement et fusion de cellules
Utilisez l'inspecteur Propri&eacute;t&eacute;s ou les commandes du sous-menu Modifier &gt; Tableau pour fractionner ou fusionner
des cellules.
Fusion de plusieurs cellules d'un tableau
1 S&eacute;lectionnez les cellules dans une ligne contigu&euml; et sous forme rectangulaire.
Dans l'illustration ci-dessous, la s&eacute;lection est un rectangle de cellules ; les cellules peuvent donc &ecirc;tre fusionn&eacute;es.
Derni&egrave;re mise &agrave; jour le 4/5/2011
197
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
Dans l'illustration ci-dessous, la s&eacute;lection n'est pas un rectangle ; les cellules ne peuvent donc pas &ecirc;tre fusionn&eacute;es.
2 Effectuez l'une des op&eacute;rations suivantes :
• Choisissez Modifier &gt; Tableau &gt; Fusionner les cellules.
• Dans l'inspecteur Propri&eacute;t&eacute;s HTML (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s) en mode d&eacute;velopp&eacute;, cliquez sur le bouton Fusionner les
cellules
.
Remarque : Si le bouton n'est pas visible, cliquez sur la fl&egrave;che de d&eacute;veloppement, dans le coin inf&eacute;rieur droit de
l'inspecteur Propri&eacute;t&eacute;s, pour afficher toutes les options.
Le contenu des cellules individuelles est plac&eacute; dans la cellule produite par la fusion. Les propri&eacute;t&eacute;s de la premi&egrave;re cellule
s&eacute;lectionn&eacute;e sont appliqu&eacute;es &agrave; la cellule fusionn&eacute;e.
Fractionnement d'une cellule
1 Cliquez dans une cellule, puis proc&eacute;dez de l'une des mani&egrave;res suivantes :
• Choisissez Modifier &gt; Tableau &gt; Fractionner la cellule.
• Dans l'inspecteur Propri&eacute;t&eacute;s HTML (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s) en mode agrandi, cliquez sur le bouton Fractionner les
cellules
.
Remarque : Si le bouton n'est pas visible, cliquez sur la fl&egrave;che de d&eacute;veloppement, dans le coin inf&eacute;rieur droit de
l'inspecteur Propri&eacute;t&eacute;s, pour afficher toutes les options.
2 Dans la bo&icirc;te de dialogue Fractionner la cellule, sp&eacute;cifiez comment vous voulez fractionner la cellule :
Fractionner la cellule Indique comment la cellule doit &ecirc;tre fractionn&eacute;e, en lignes ou en colonnes.
Nombre de lignes/Nombre de colonnes Indique en combien de colonnes ou de lignes la cellule doit &ecirc;tre fractionn&eacute;e.
Augmentation ou r&eacute;duction du nombre de lignes ou de colonnes occup&eacute;es par une cellule
❖ Effectuez l'une des op&eacute;rations suivantes :
• Choisissez Modifier &gt; Tableau &gt; Augmenter l'&eacute;tendue de ligne ou Modifier &gt; Tableau &gt; Augmenter l'&eacute;tendue de
colonne.
• Choisissez Modifier &gt; Tableau &gt; R&eacute;duire l'&eacute;tendue de ligne ou Modifier &gt; Tableau &gt; R&eacute;duire l'&eacute;tendue de colonne.
Copie, collage et suppression de cellules
Vous pouvez copier, coller ou supprimer une ou plusieurs cellules tout en pr&eacute;servant leur formatage.
Vous pouvez coller les cellules au niveau d'un point d'insertion ou &agrave; la place d'une s&eacute;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&eacute;lection du tableau dans laquelle les cellules seront coll&eacute;es.
Coupure ou copie des cellules d'un tableau
1 S&eacute;lectionnez une ou plusieurs cellules dans une ligne contigu&euml; et sous forme rectangulaire.
Derni&egrave;re mise &agrave; jour le 4/5/2011
198
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
Dans l'illustration ci-dessous, la s&eacute;lection est un rectangle de cellules ; les cellules peuvent donc &ecirc;tre coup&eacute;es ou copi&eacute;es.
Dans l'illustration ci-dessous, la s&eacute;lection n'est pas un rectangle ; les cellules ne peuvent donc pas &ecirc;tre coup&eacute;es ou
copi&eacute;es.
2 Choisissez Edition &gt; Couper ou Edition &gt; Copier.
Remarque : Si vous avez s&eacute;lectionn&eacute; une ligne ou une colonne enti&egrave;re et que vous choisissez Edition &gt; Couper, la ligne ou
la colonne enti&egrave;re est supprim&eacute;e du tableau (et non pas seulement le contenu des cellules).
Collage de cellules d'un tableau
1 Choisissez l'emplacement o&ugrave; coller les cellules :
• Pour remplacer des cellules existantes par les cellules que vous collez, s&eacute;lectionnez une s&eacute;rie de cellules existantes
dont la mise en forme est la m&ecirc;me que celle des cellules du Presse-papiers. (Par exemple, si vous avez copi&eacute; ou coup&eacute;
un bloc de 3 x 2 cellules, vous pouvez s&eacute;lectionner un autre bloc de 3 x 2 cellules pour le remplacer par les cellules
coll&eacute;es.)
• Pour coller une ligne enti&egrave;re de cellules au-dessus d'une cellule sp&eacute;cifique, cliquez dans celle-ci.
• Pour coller une colonne enti&egrave;re de cellules &agrave; gauche d'une cellule sp&eacute;cifique, cliquez dans celle-ci.
Remarque : Si vous avez plac&eacute; moins d'une ligne ou d'une colonne enti&egrave;re dans le Presse-papiers et que vous cliquez dans
une cellule puis collez les cellules figurant dans le Presse-papiers, alors il se peut que la cellule dans laquelle vous avez
cliqu&eacute; et les cellules voisines (selon leur emplacement dans le tableau) soient remplac&eacute;es par les cellules que vous avez
coll&eacute;es.
• Pour cr&eacute;er un nouveau tableau avec les cellules coll&eacute;es, placez le point d'insertion hors du tableau.
2 Choisissez Edition &gt; Coller.
Si vous collez des lignes ou des colonnes enti&egrave;res dans un tableau existant, celles-ci s'ajoutent au tableau. Si vous ne
collez qu'une seule cellule, le contenu de la cellule s&eacute;lectionn&eacute;e est remplac&eacute;. Si vous collez le contenu du Presse-papiers
en dehors d'un tableau, les lignes, colonnes ou cellules que vous collez sont utilis&eacute;es pour d&eacute;finir un nouveau tableau.
Suppression du contenu d'une cellule en conservant les cellules intactes
1 S&eacute;lectionnez une ou plusieurs cellules.
Remarque : Veillez &agrave; ce que la s&eacute;lection ne comprenne pas de lignes ou de colonnes enti&egrave;res.
2 Choisissez Edition &gt; Effacer ou appuyez sur la touche Suppr.
Derni&egrave;re mise &agrave; jour le 4/5/2011
199
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
Remarque : Si seules des lignes ou des colonnes enti&egrave;res sont s&eacute;lectionn&eacute;es lorsque vous choisissez Edition &gt; Effacer ou
que vous appuyez sur Suppr, les lignes ou les colonnes enti&egrave;res (pas seulement leurs contenus) sont supprim&eacute;es du tableau.
Suppression de lignes ou de colonnes contenant des cellules fusionn&eacute;es
1 S&eacute;lectionnez une ligne ou une colonne.
2 Choisissez Modifier &gt; Tableau &gt; Supprimer la ligne ou Modifier &gt; Tableau &gt; Supprimer la colonne.
Imbrication de tableaux
Un tableau imbriqu&eacute; est un tableau &agrave; l'int&eacute;rieur d'une cellule d'un autre tableau. Vous pouvez le mettre en forme
comme n'importe quel tableau, mais sa largeur est limit&eacute;e par la largeur de la cellule dans laquelle il se trouve.
1 Cliquez dans une cellule du tableau.
2 S&eacute;lectionnez Ins&eacute;rer &gt; Tableau, d&eacute;finissez les options Tableau et cliquez sur OK.
Tri de tableaux
Vous pouvez trier les lignes d'un tableau selon le contenu d'une seule colonne. Vous pouvez &eacute;galement effectuer un tri
plus complexe, selon le contenu de deux colonnes.
Vous ne pouvez pas trier les tableaux contenant colspan ou rowspan, c'est-&agrave;-dire les tableaux qui contiennent des
cellules fusionn&eacute;es.
1 S&eacute;lectionnez le tableau ou cliquez dans une cellule.
2 S&eacute;lectionnez Commandes &gt; Trier le tableau, d&eacute;finissez les options de la bo&icirc;te de dialogue et cliquez sur OK.
Trier par D&eacute;termine quelles valeurs de colonne utiliser pour trier les lignes du tableau.
Ordre D&eacute;termine comment la colonne doit &ecirc;tre tri&eacute;e (dans l'ordre alphab&eacute;tique ou num&eacute;rique) et si elle doit &ecirc;tre tri&eacute;e
par ordre croissant (de A &agrave; Z, du chiffre le plus bas au plus &eacute;lev&eacute;) ou par ordre d&eacute;croissant.
Lorsque le contenu d'une colonne est constitu&eacute; de chiffres, choisissez Num&eacute;rique. Un tri par ordre alphab&eacute;tique
appliqu&eacute; &agrave; une liste de nombres &agrave; un ou deux chiffres a pour effet de trier les nombres comme s'il s'agissait de mots
(ayant pour r&eacute;sultat un ordre du type 1, 10, 2, 20, 3, 30) plut&ocirc;t que comme des nombres (ayant pour r&eacute;sultat un ordre
du type 1, 2, 3, 10, 20, 30).
Puis/Ordre D&eacute;termine l'ordre de tri du tri secondaire sur une colonne diff&eacute;rente. Indiquez la colonne de tri secondaire
dans le menu contextuel Puis et l'ordre de tri secondaire dans les menus contextuels Ordre.
Le tri inclut la premi&egrave;re ligne Indique que la premi&egrave;re ligne du tableau doit &ecirc;tre incluse dans le tri. Si la premi&egrave;re ligne
correspond &agrave; un titre &agrave; ne pas d&eacute;placer, n'activez pas cette option.
Trier les lignes d'en-t&ecirc;te Indique que toutes les lignes de la section thead du tableau (si elle existe) doivent &ecirc;tre tri&eacute;es
en utilisant les m&ecirc;mes crit&egrave;res que pour les lignes de la section body. (Les lignes thead restent dans la section thead
et apparaissent encore en haut du tableau, m&ecirc;me apr&egrave;s le tri). Pour plus d'informations sur la balise thead, consultez
le panneau R&eacute;f&eacute;rence (choisissez Aide &gt; R&eacute;f&eacute;rence).
Trier les lignes de pied de page Indique que toutes les lignes de la section thead du tableau (si elle existe) doivent &ecirc;tre
tri&eacute;es en utilisant les m&ecirc;mes crit&egrave;res que pour les lignes de la section body. (Les lignes tfoot restent dans la section
tfoot et apparaissent encore en bas du tableau, m&ecirc;me apr&egrave;s le tri). Pour plus d'informations sur la balise tfoot,
consultez le panneau R&eacute;f&eacute;rence (choisissez Aide &gt; R&eacute;f&eacute;rence).
Conserver les couleurs des lignes apr&egrave;s le tri Sp&eacute;cifie que les attributs des lignes du tableau (tels que la couleur)
doivent rester associ&eacute;s au m&ecirc;me contenu apr&egrave;s le tri. Si les lignes de votre tableau sont mises en forme avec deux
couleurs altern&eacute;es, n'activez pas cette option pour vous assurer que les lignes du tableau tri&eacute; s'affichent toujours avec
Derni&egrave;re mise &agrave; jour le 4/5/2011
200
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
des couleurs altern&eacute;es. Si les attributs de ligne sont sp&eacute;cifiques au contenu de chaque ligne, s&eacute;lectionnez cette option
pour vous assurer que ces attributs restent associ&eacute;s aux lignes appropri&eacute;es dans le tableau tri&eacute;.
Utilisation de cadres
Fonctionnement des cadres et des jeux de cadres
La partie d'une fen&ecirc;tre du navigateur pouvant afficher un document HTML ind&eacute;pendamment de ce qui appara&icirc;t dans
le reste de la fen&ecirc;tre constitue un cadre. Les cadres permettent de diviser une fen&ecirc;tre du navigateur en plusieurs zones,
chacune d'entre elles pouvant afficher un document HTML distinct. En r&egrave;gle g&eacute;n&eacute;rale, un premier cadre affiche un
document avec des commandes de navigation tandis qu'un autre cadre affiche un document avec le contenu principal.
Un jeu de cadres est un fichier HTML qui d&eacute;finit la mise en forme et les propri&eacute;t&eacute;s de plusieurs cadres, dont le nombre,
la taille et l'emplacement des cadres, ainsi que l'URL de la page qui s'affiche initialement dans chaque cadre. Le fichier
du jeu de cadres ne contient pas de contenu HTML qui s'affiche dans un navigateur, &agrave; l'exception de la section
noframes ; il fournit simplement au navigateur des informations sur la mise en forme d'un jeu de cadres et les
documents qu'il doit afficher.
Pour afficher un jeu de cadres dans un navigateur, tapez l'URL du fichier correspondant. Le navigateur ouvre ensuite
les documents qui devront &ecirc;tre affich&eacute;s dans les cadres. Le fichier du jeu de cadres relatif &agrave; un site s'appelle
g&eacute;n&eacute;ralement index.html et s'affiche par d&eacute;faut si le visiteur ne sp&eacute;cifie pas de nom de fichier.
L'exemple suivant pr&eacute;sente une mise en forme de cadre contenant trois cadres : un cadre &eacute;troit qui contient la barre de
navigation dans la partie lat&eacute;rale, un cadre en haut du document contenant le logo et le titre d'un site Web et un grand
cadre avec le contenu principal qui occupe le reste de la page. Chacun de ces cadres affiche un document HTML
distinct.
Derni&egrave;re mise &agrave; jour le 4/5/2011
201
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
Dans cet exemple, le document affich&eacute; dans le cadre sup&eacute;rieur ne change jamais lorsque les visiteurs consultent le site.
La barre de navigation du cadre lat&eacute;ral contient des liens qui, lorsqu'ils sont activ&eacute;s, modifient le contenu du cadre
principal, mais pas le contenu du cadre lat&eacute;ral. Le cadre de contenu principal &agrave; droite affiche le document
correspondant &agrave; tous les liens activ&eacute;s par le visiteur dans la partie gauche.
Un cadre n'est pas un fichier ; on pourrait croire que le document affich&eacute; dans un cadre fait partie int&eacute;grante de ce
dernier, mais ce n'est pas le cas. Le cadre contient le document.
Remarque : Une &laquo; page &raquo; peut d&eacute;signer un seul document HTML ou l'ensemble du contenu d'une fen&ecirc;tre du navigateur
&agrave; un moment donn&eacute;, m&ecirc;me si plusieurs documents HTML sont affich&eacute;s simultan&eacute;ment. Par exemple, l'expression &laquo; une
page qui utilise des cadres &raquo; s'applique g&eacute;n&eacute;ralement &agrave; un jeu de cadres et aux documents qui y figurent.
Tout site affich&eacute; dans un navigateur sous forme d'une page unique constitu&eacute;e de trois cadres contient en fait au moins
quatre documents HTML, &agrave; savoir, le fichier du jeu de cadres et les trois documents incluant le contenu qui s'affiche
initialement dans les cadres. Lorsque vous concevez une page &agrave; l'aide de jeux de cadres dans Dreamweaver, vous devez
enregistrer chacun de ces quatre fichiers pour que la page s'affiche correctement dans le navigateur.
Pour obtenir des informations plus d&eacute;taill&eacute;es sur les cadres, consultez le site Web de Thierry Koblentz &agrave; l'adresse
www.tjkdesign.com/articles/frames/.
Choix de l'utilisation des cadres
Adobe d&eacute;conseille l'emploi de cadres pour la mise en page d'une page Web. Parmi les inconv&eacute;nients de l'emploi de
cadres, citons :
• L'alignement graphique des &eacute;l&eacute;ments de diff&eacute;rents cadres n'est pas toujours pr&eacute;cis.
• Le test de la navigation peut &ecirc;tre long.
• Comme l'URL de chacune des pages contenues dans les cadres n'est pas affich&eacute;e dans le navigateur, les visiteurs
risquent de ne pas pouvoir ajouter de signet &agrave; une page donn&eacute;e (&agrave; moins que vous ne fournissiez le code du serveur
permettant de charger la version avec cadres d'une page).
Pour obtenir une justification d&eacute;taill&eacute;e de la raison pour laquelle il ne faut pas utiliser des cadres, consultez le site de
Gary White &agrave; l'adresse http://apptools.com/rants/framesevil.php.
Si vous d&eacute;cidez des les utiliser, les cadres servent g&eacute;n&eacute;ralement &agrave; la navigation. Un jeu de cadres inclut g&eacute;n&eacute;ralement
un cadre contenant une barre de navigation et un cadre destin&eacute; &agrave; afficher le contenu principal. L'emploi de cadres de
cette fa&ccedil;on offre quelques avantages.
• Le navigateur d'un visiteur n'a pas besoin de recharger les graphiques li&eacute;s &agrave; la navigation &agrave; chaque page.
• Chaque cadre poss&egrave;de sa propre barre de d&eacute;filement (si le contenu ne tient pas enti&egrave;rement dans une fen&ecirc;tre) pour
que le visiteur puisse faire d&eacute;filer les cadres ind&eacute;pendamment les uns des autres. Par exemple, un visiteur ayant fait
d&eacute;filer une longue page de contenu jusqu'en bas n'est pas oblig&eacute; de la faire d&eacute;filer &agrave; nouveau vers le haut pour
afficher la barre de navigation si celle-ci figure dans un autre cadre.
Derni&egrave;re mise &agrave; jour le 4/5/2011
202
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
Dans la plupart des cas, vous pouvez cr&eacute;er une page Web sans cadre qui permet d'obtenir les m&ecirc;mes r&eacute;sultats qu'avec
un jeu de cadres. Par exemple, si vous voulez afficher une barre de navigation &agrave; gauche de la page, vous pouvez
remplacer la page par un jeu de cadres ou simplement inclure la barre de navigation sur chacune des pages du site
(Dreamweaver vous permet de cr&eacute;er plusieurs pages dont la mise en forme est identique.) Dans l'exemple suivant, la
mise en forme de la page ressemble &agrave; une mise en forme avec cadres, mais elle n'en contient pas.
Les sites Web mal con&ccedil;us utilisent des cadres de fa&ccedil;on inutile, avec, par exemple, un jeu de cadres qui recharge le
contenu des cadres de navigation chaque fois que le visiteur clique sur un bouton de navigation. S'ils sont correctement
utilis&eacute;s (par exemple, pour immobiliser les commandes de navigation dans un cadre tout en permettant de modifier le
contenu d'un autre cadre), les cadres peuvent &ecirc;tre tr&egrave;s utiles dans un site.
La prise en charge des cadres varie en fonction du navigateur utilis&eacute;. En outre, la navigation des cadres peut s'av&eacute;rer
difficile pour les visiteurs souffrant de handicaps. Par cons&eacute;quent, si vous utilisez des cadres, incorporez
syst&eacute;matiquement une section noframes dans votre jeu de cadres pour les visiteurs qui ne peuvent pas les visualiser.
Vous pouvez &eacute;galement fournir un lien explicite vers une version sans cadre du site.
Pour obtenir des informations plus d&eacute;taill&eacute;es sur les cadres, consultez le site Web de Thierry Koblentz &agrave; l'adresse
www.tjkdesign.com/articles/frames/.
Jeux de cadres imbriqu&eacute;s
Un jeu de cadres imbriqu&eacute; est un jeu de cadres situ&eacute; &agrave; l'int&eacute;rieur d'un autre jeu de cadres. Un fichier de jeu de cadres
peut contenir plusieurs jeux de cadres imbriqu&eacute;s. La plupart des pages Web avec des cadres utilisent en fait des cadres
imbriqu&eacute;s, de m&ecirc;me que la plupart des jeux de cadres pr&eacute;d&eacute;finis dans Dreamweaver. Tout jeu de cadres comportant
un nombre diff&eacute;rent de cadres dans diff&eacute;rentes lignes ou colonnes doit &ecirc;tre imbriqu&eacute;.
Par exemple, la mise en forme de cadre la plus courante affiche un cadre sur la ligne sup&eacute;rieure (o&ugrave; figure le logo de
l'entreprise) et deux cadres sur la ligne inf&eacute;rieure (cadre de navigation et cadre de contenu). Dans ce cas, un jeu de
cadres doit &ecirc;tre imbriqu&eacute; : vous obtenez alors un jeu de cadres de deux lignes et un jeu de cadres de deux colonnes
imbriqu&eacute; dans la deuxi&egrave;me ligne.
Derni&egrave;re mise &agrave; jour le 4/5/2011
203
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
A
B
A. Jeu de cadres principal B. Le cadre de menus et le cadre de contenu sont imbriqu&eacute;s dans le jeu de cadres principal.
Dreamweaver g&egrave;re automatiquement l'imbrication des jeux de cadres. Si vous faites appel aux outils de fractionnement
de cadre dans Dreamweaver, le programme se charge de d&eacute;finir les cadres qui doivent &ecirc;tre imbriqu&eacute;s et ceux qui
doivent rester tels quels.
Vous pouvez imbriquer les jeux de cadres de deux fa&ccedil;ons dans HTML : le jeu de cadres interne peut &ecirc;tre d&eacute;fini dans le
m&ecirc;me fichier que le jeu de cadres externe, ou dans un fichier distinct. Chaque jeu de cadres pr&eacute;d&eacute;fini dans
Dreamweaver d&eacute;finit tous ses jeux de cadres dans le m&ecirc;me fichier.
Les deux types d'imbrication produisent des r&eacute;sultats visuels identiques. A moins d'examiner le code, il n'est pas facile
de savoir quel type d'imbrication est utilis&eacute;. En r&egrave;gle g&eacute;n&eacute;rale, Dreamweaver utilise un fichier de jeu de cadres externe
lorsque vous ex&eacute;cutez la commande Ouvrir dans un cadre pour ouvrir un fichier de jeu de cadres &agrave; l'int&eacute;rieur d'un
cadre. Dans ce cas, vous risquez de ne pas pouvoir d&eacute;finir correctement les cibles des liens. Il est souvent plus simple
de garder tous les jeux de cadres d&eacute;finis dans un seul fichier.
Utilisation de jeux de cadres dans la fen&ecirc;tre de document
Dreamweaver permet d'afficher et de modifier tous les documents associ&eacute;s &agrave; un jeu de cadres dans une seule fen&ecirc;tre
de document. Vous pouvez ainsi afficher un aper&ccedil;u approximatif des pages ins&eacute;r&eacute;es dans des cadres et les modifier &agrave;
votre convenance dans le navigateur. Toutefois, certains aspects de cette approche peuvent &ecirc;tre d&eacute;routants si vous ne
les ma&icirc;trisez pas parfaitement. En particulier, chaque cadre affiche un document HTML distinct. M&ecirc;me si les
documents sont vides, vous devez les enregistrer avant de les pr&eacute;visualiser. En effet, vous ne pouvez afficher un aper&ccedil;u
pr&eacute;cis du jeu de cadres que s'il contient l'URL d'un document &agrave; afficher dans chaque cadre.
Pour vous assurer que le jeu de cadres s'affiche correctement dans les navigateurs, ex&eacute;cutez la proc&eacute;dure suivante :
1 Cr&eacute;ez un jeu de cadres et sp&eacute;cifiez le document qui devra appara&icirc;tre dans chaque cadre.
2 Enregistrez chaque fichier qui appara&icirc;tra dans un cadre. N'oubliez pas que chaque cadre affiche un document
HTML diff&eacute;rent et que vous devez enregistrer chaque document avec le fichier de jeu de cadres.
3 D&eacute;finissez les propri&eacute;t&eacute;s de chaque cadre et du jeu de cadres (notamment, nommez chaque cadre, d&eacute;finissez les
options de d&eacute;filement et d'absence de d&eacute;filement).
4 Dans l'inspecteur Propri&eacute;t&eacute;s, d&eacute;finissez la propri&eacute;t&eacute; Cible pour tous les liens afin que le contenu li&eacute; apparaisse dans
la zone appropri&eacute;e.
Derni&egrave;re mise &agrave; jour le 4/5/2011
204
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
Cr&eacute;ation de cadres et de jeux de cadres
Il y a deux fa&ccedil;ons de cr&eacute;er un jeu de cadres dans Dreamweaver : vous pouvez s&eacute;lectionner un jeu de cadres pr&eacute;d&eacute;fini
ou le concevoir vous-m&ecirc;me.
Si vous choisissez un jeu de cadres pr&eacute;d&eacute;fini, tous les jeux de cadres et cadres n&eacute;cessaires &agrave; la cr&eacute;ation de la mise en
forme sont configur&eacute;s, ce qui repr&eacute;sente le moyen le plus simple d'ins&eacute;rer rapidement une mise en forme avec des
cadres dans la page. Vous pouvez uniquement ins&eacute;rer un jeu de cadres pr&eacute;d&eacute;fini dans la fen&ecirc;tre de document en mode
Cr&eacute;ation.
Vous pouvez concevoir votre propre jeu de cadres dans Dreamweaver en ajoutant des &laquo; s&eacute;parateurs &raquo; &agrave; la fen&ecirc;tre.
Avant de cr&eacute;er un jeu de cadres ou d'utiliser des cadres, affichez les bordures de cadres en mode Cr&eacute;ation dans la
fen&ecirc;tre de document en choisissant Affichage &gt; Assistances visuelles &gt; Bordures de cadre.
Voir aussi
&laquo; Dreamweaver et l'accessibilit&eacute; &raquo; &agrave; la page 716
Cr&eacute;ation d'un jeu de cadres pr&eacute;d&eacute;fini et affichage d'un document existant dans un cadre
1 Placez le point d’insertion dans un document et proc&eacute;dez de l’une des mani&egrave;res suivantes :
•
Choisissez Insertion &gt; HTML &gt; Cadres et s&eacute;lectionnez un jeu de cadres pr&eacute;d&eacute;fini.
• Dans la cat&eacute;gorie Mise en forme du panneau Insertion, cliquez sur la fl&egrave;che du bouton Cadres et choisissez un jeu
de cadres pr&eacute;d&eacute;fini.
Les ic&ocirc;nes de jeu de cadres fournissent une repr&eacute;sentation visuelle de chaque jeu de cadres appliqu&eacute; au document en
cours. La zone bleue de l'ic&ocirc;ne du jeu de cadres repr&eacute;sente le document courant et la zone blanche les cadres qui
afficheront d'autres documents.
2 Si vous avez configur&eacute; Dreamweaver pour qu'il vous invite &agrave; d&eacute;finir des attributs d'accessibilit&eacute; des cadres,
s&eacute;lectionnez un cadre dans le menu d&eacute;roulant, entrez un nom pour la cadre et cliquez sur OK. (Pour les visiteurs
qui en utilisent un, le lecteur d'&eacute;cran lit ce nom lorsqu'il rencontre le cadre sur une page.)
Remarque : Si vous cliquez sur OK sans entrer de nouveau nom, Dreamweaver donne au cadre un nom qui correspond
&agrave; sa position (cadre de gauche, cadre de droite, etc.) dans le jeu de cadres.
Remarque : Si vous cliquez sur Annuler, le jeu de cadres s'affiche dans le document, mais Dreamweaver ne lui associe ni
les balises ni les attributs d'accessibilit&eacute;.
Choisissez Fen&ecirc;tre &gt; Cadres pour afficher un diagramme des cadres que vous nommez.
Cr&eacute;ation d'un jeu de cadres pr&eacute;d&eacute;fini vide
1 Choisissez Fichier &gt; Nouveau.
2 Dans la bo&icirc;te de dialogue Nouveau document, s&eacute;lectionnez la cat&eacute;gorie Exemple de page.
3 S&eacute;lectionnez le dossier Jeu de cadres dans la colonne Dossier exemple.
4 S&eacute;lectionnez un jeu de cadres dans la colonne Exemple de page, puis cliquez sur Cr&eacute;er.
5 Si vous avez activ&eacute; les attributs d'accessibilit&eacute; aux cadres dans Pr&eacute;f&eacute;rences, la bo&icirc;te de dialogue Attributs
d'accessibilit&eacute; aux balises de cadre s'affiche ; renseignez la bo&icirc;te de dialogue pour chaque cadre et cliquez sur OK.
Remarque : Si vous cliquez sur Annuler, le jeu de cadres s'affiche dans le document, mais Dreamweaver ne lui associe ni
les balises ni les attributs d'accessibilit&eacute;.
Derni&egrave;re mise &agrave; jour le 4/5/2011
205
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
Cr&eacute;ation d'un jeu de cadres
❖ Dans le sous-menu Modifier &gt; Jeu de cadres, choisissez une option de fractionnement (par exemple, Fractionner
le cadre &agrave; gauche ou Fractionner le cadre &agrave; droite).
Dreamweaver fractionne la fen&ecirc;tre en cadres. Si vous aviez un document existant ouvert, il appara&icirc;t dans l'un des
cadres.
Fractionnement d'un cadre en cadres plus petits
• Pour fractionner le cadre au niveau du point d'insertion, choisissez une option de fractionnement dans le sousmenu Modifier &gt; Jeu de cadres.
• Pour fractionner un cadre ou un jeu de cadres verticalement ou horizontalement, faites glisser une bordure de cadre
du bord vers le centre de la fen&ecirc;tre en mode Cr&eacute;ation.
• Pour fractionner un cadre &agrave; l'aide d'une bordure de cadre qui ne se trouve pas sur le bord de la fen&ecirc;tre en mode
Cr&eacute;ation, faites glisser une bordure de cadre tout en maintenant la touche Alt (Windows) ou Option (Macintosh)
enfonc&eacute;e.
• Pour diviser un cadre en quatre, faites glisser une bordure de cadre de l'un des coins de la fen&ecirc;tre en mode Cr&eacute;ation
vers le centre d'un cadre.
Pour cr&eacute;er trois cadres, cr&eacute;ez-en d'abord deux, puis fractionnez l'un d'eux. L'op&eacute;ration de fusion de deux cadres
adjacents sans modifier le code du jeu de cadres &eacute;tant relativement ardue, il est plus difficile de convertir quatre cadres
en trois cadres que deux cadres en trois cadres.
Suppression d'un cadre
❖ Faites glisser une bordure de cadre en dehors de la page ou vers une bordure du cadre parent.
Si vous supprimez un cadre dans lequel se trouve un document qui n'a pas &eacute;t&eacute; enregistr&eacute;, Dreamweaver vous invite &agrave;
enregistrer ce dernier.
Remarque : Vous ne pouvez pas enti&egrave;rement supprimer un jeu de cadres en faisant glisser ses bordures. Pour le supprimer
compl&egrave;tement, fermez la fen&ecirc;tre de document qui l'affiche. Si le fichier du jeu de cadres a &eacute;t&eacute; enregistr&eacute;, supprimez le
fichier.
Redimensionnement d'un cadre
• Pour d&eacute;finir la taille approximative des cadres, faites glisser une bordure de cadre dans la fen&ecirc;tre de document en
mode Cr&eacute;ation.
• Pour d&eacute;finir des tailles exactes et sp&eacute;cifier l'espace allou&eacute; par le navigateur &agrave; une ligne ou une colonne de cadres
lorsque la taille de la fen&ecirc;tre du navigateur ne permet pas d'afficher les cadres dans leur totalit&eacute;, utilisez l'inspecteur
Propri&eacute;t&eacute;s.
S&eacute;lection de cadres et de jeux de cadres
Pour modifier les propri&eacute;t&eacute;s d'un cadre ou d'un jeu de cadres, vous devez au pr&eacute;alable le s&eacute;lectionner dans la fen&ecirc;tre
de document ou en utilisant le panneau Cadres.
Derni&egrave;re mise &agrave; jour le 4/5/2011
206
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
Le panneau Cadres donne une repr&eacute;sentation visuelle des cadres dans un jeu de cadres. Il affiche la hi&eacute;rarchie de la
structure du jeu de cadres qui n'appara&icirc;t pas forc&eacute;ment dans la fen&ecirc;tre de document. Dans le panneau Cadres, une &eacute;paisse
bordure entoure le jeu de cadres, une fine ligne grise entoure chaque cadre et chaque cadre est identifi&eacute; par un nom.
Lorsqu'un cadre est s&eacute;lectionn&eacute; dans la fen&ecirc;tre de document, en mode Cr&eacute;ation, sa bordure s'affiche avec une ligne en
pointill&eacute; ; lorsqu'un jeu de cadres est s&eacute;lectionn&eacute;, toutes les bordures des cadres &agrave; l'int&eacute;rieur de ce jeu s'affichent avec
une ligne en pointill&eacute; plus fine.
Remarque : La s&eacute;lection d'un cadre et le placement d'un point d'insertion dans un document affich&eacute; dans un cadre sont
deux op&eacute;rations diff&eacute;rentes. Vous serez amen&eacute; &agrave; s&eacute;lectionner un cadre dans de nombreux cas (par exemple, lorsque vous
d&eacute;finissez les propri&eacute;t&eacute;s d'un cadre).
S&eacute;lection d'un cadre ou d'un jeu de cadres dans le panneau Cadres
1 Choisissez Fen&ecirc;tre &gt; Cadres.
2 Dans le panneau Cadres :
• Pour s&eacute;lectionner un cadre, cliquez sur le cadre. Des lignes de s&eacute;lection apparaissent autour du cadre dans le
panneau Cadres et dans la fen&ecirc;tre de document, en mode Cr&eacute;ation.
• Pour s&eacute;lectionner un jeu de cadres, cliquez sur la bordure qui l'entoure.
S&eacute;lection d'un cadre ou d'un jeu de cadres dans la fen&ecirc;tre de document
• En mode Cr&eacute;ation, pour s&eacute;lectionner un cadre, cliquez dans celui-ci tout en maintenant les touches Maj+Alt
(Windows) ou Maj+Option (Macintosh) enfonc&eacute;es.
• En mode Cr&eacute;ation, pour s&eacute;lectionner un jeu de cadres, cliquez sur l'une des bordures du cadre interne du jeu de
cadres. Vous devez d'abord vous assurer que les bordures sont visibles ; pour cela, choisissez Affichage &gt;
Assistances visuelles &gt; Bordures de cadre.
Remarque : Il est souvent plus simple de s&eacute;lectionner les jeux de cadres dans le panneau Cadres que dans la fen&ecirc;tre de
document. Pour plus d'informations, consultez les rubriques ci-dessus.
Derni&egrave;re mise &agrave; jour le 4/5/2011
207
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
S&eacute;lection d'un cadre ou d'un jeu de cadre diff&eacute;rent
• Pour s&eacute;lectionner le cadre ou le jeu de cadres suivant ou pr&eacute;c&eacute;dent au m&ecirc;me niveau hi&eacute;rarchique que la s&eacute;lection
en cours, appuyez sur la fl&egrave;che gauche ou droite tout en maintenant la touche Alt (Windows) ou Commande
(Macintosh) enfonc&eacute;e. Ces touches vous permettent de parcourir les cadres et jeux de cadres dans l'ordre dans
lequel ils sont d&eacute;finis dans le fichier du jeu de cadres.
• Pour s&eacute;lectionner le jeu de cadres parent (celui qui contient la s&eacute;lection en cours), appuyez sur la fl&egrave;che haut tout
en maintenant la touche Alt (Windows) ou Commande (Macintosh) enfonc&eacute;e.
• Pour s&eacute;lectionner le premier cadre ou jeu de cadres enfant de la s&eacute;lection courante (en respectant l'ordre dans lequel
ils sont d&eacute;finis dans le fichier du jeu de cadres), appuyez sur la fl&egrave;che bas tout en maintenant la touche Alt
(Windows) ou Commande (Macintosh) enfonc&eacute;e.
Ouverture d'un document dans un cadre
Vous pouvez sp&eacute;cifier le contenu initial d'un cadre en ins&eacute;rant un nouveau contenu dans un document vide ou en
ouvrant un document dans un cadre.
1 Placez le point d'insertion dans un cadre.
2 Choisissez Fichier &gt; Ouvrir dans un cadre.
3 S&eacute;lectionnez un document &agrave; ouvrir dans le cadre et cliquez sur OK (Windows) ou Choisir (Macintosh).
4 (Facultatif) Si vous voulez afficher ce document par d&eacute;faut dans le cadre lorsque le jeu de cadres est ouvert dans un
navigateur, enregistrez le jeu de cadres.
Enregistrement des fichiers du cadre et du jeu de cadres
Avant d'afficher l'aper&ccedil;u d'un jeu de cadres dans un navigateur, vous devez enregistrer le fichier correspondant et tous
les documents qui seront affich&eacute;s dans les cadres. Vous pouvez enregistrer le fichier du jeu de cadres et chacun des
documents contenus dans les cadres individuellement ou enregistrer le fichier du jeu de cadres et tous les fichiers
contenus dans les cadres simultan&eacute;ment.
Remarque : Si vous faites appel aux outils visuels de Dreamweaver pour cr&eacute;er un jeu de cadres, un nom de fichier par
d&eacute;faut est attribu&eacute; &agrave; chaque nouveau document apparaissant dans un cadre. Par exemple, le premier fichier du jeu de
cadres s'appelle Jeu de cadres sans nom-1, tandis que le premier document d'un cadre s'intitule Cadre sans nom-1.
Enregistrement d'un fichier de jeu de cadres
❖ S&eacute;lectionnez le jeu de cadres dans le panneau Cadres ou dans la fen&ecirc;tre de document.
• Pour enregistrer le fichier de jeu de cadres, choisissez Fichier &gt; Enregistrer le jeu de cadres.
• Pour enregistrer le fichier de jeu de cadres en tant que nouveau fichier, choisissez Fichier &gt; Enregistrer le jeu de
cadres sous.
Remarque : Si le fichier du jeu de cadres n'a pas &eacute;t&eacute; enregistr&eacute;, ces deux commandes sont &eacute;quivalentes.
Enregistrement d'un document qui appara&icirc;t &agrave; l'int&eacute;rieur d'un cadre
❖ Cliquez dans le cadre, puis choisissez Fichier &gt; Enregistrer le cadre ou Fichier &gt; Enregistrer le cadre sous.
Enregistrement de tous les fichiers associ&eacute;s &agrave; un jeu de cadres
❖ Choisissez Fichier &gt; Enregistrer tous les cadres.
Derni&egrave;re mise &agrave; jour le 4/5/2011
208
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
Cette commande enregistre tous les documents ouverts dans le jeu de cadres, y compris le fichier du jeu de cadres et
tous les documents encadr&eacute;s. Si le fichier du jeu de cadres n'a pas &eacute;t&eacute; enregistr&eacute;, une &eacute;paisse bordure entoure le jeu de
cadres (ou le cadre non enregistr&eacute;) en mode Cr&eacute;ation et vous pouvez s&eacute;lectionner un nom de fichier.
Remarque : Si vous avez utilis&eacute; la commande Fichier &gt; Ouvrir dans un cadre pour ouvrir un document dans un cadre,
lorsque vous enregistrez le jeu de cadres, le document ouvert devient le document par d&eacute;faut qui sera affich&eacute; dans ce cadre.
N'enregistrez pas le fichier du jeu de cadres si vous ne voulez pas que ce document soit utilis&eacute; par d&eacute;faut.
Affichage et d&eacute;finition des des propri&eacute;t&eacute;s et des attributs de cadre
Utilisez l'inspecteur Propri&eacute;t&eacute;s pour afficher et d&eacute;finir la plupart des propri&eacute;t&eacute;s de cadre, notamment les bordures, les
marges et l'affichage ou non de barres de d&eacute;filement dans les cadres. La d&eacute;finition d'une propri&eacute;t&eacute; de cadre est
pr&eacute;pond&eacute;rante sur la d&eacute;finition de cette propri&eacute;t&eacute; pour le jeu de cadres.
Si vous le souhaitez, d&eacute;finissez des attributs de cadre, comme l'attribut title (qui est diff&eacute;rent de l'attribut name), pour
am&eacute;liorer l'accessibilit&eacute;. Vous pouvez activer l'option de programmation de l'accessibilit&eacute; pour les cadres afin de
d&eacute;finir des attributs lorsque vous cr&eacute;ez des cadres ou bien d&eacute;finir des attributs apr&egrave;s avoir ins&eacute;r&eacute; un cadre. Pour
modifier les attributs d'accessibilit&eacute; d'un cadre, utilisez l'inspecteur de balises afin de modifier directement le code
HTML.
Voir aussi
&laquo; Dreamweaver et l'accessibilit&eacute; &raquo; &agrave; la page 716
Affichage ou d&eacute;finition des propri&eacute;t&eacute;s des cadres
1 S&eacute;lectionnez un cadre en utilisant l'une des m&eacute;thodes suivantes :
• Dans la fen&ecirc;tre de document (mode Cr&eacute;ation), cliquez dans le cadre tout en maintenant les touches Alt (Windows)
ou Maj+Option (Macintosh) enfonc&eacute;es.
• Cliquez sur le cadre dans le panneau Cadres (Fen&ecirc;tre &gt; Cadres).
2 Dans l'inspecteur Propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), cliquez sur la fl&egrave;che d'agrandissement situ&eacute;e dans le coin
inf&eacute;rieur droit pour visualiser toutes les propri&eacute;t&eacute;s des cadres.
3 D&eacute;finition des options de l'inspecteur Propri&eacute;t&eacute;s des cadres
Nom du cadre Nom du cadre est le nom utilis&eacute; par l'attribut target d'un lien ou par un script pour r&eacute;f&eacute;rencer le cadre.
Un nom de cadre ne doit contenir qu'un seul mot. Les traits de soulignement (_) sont autoris&eacute;s, mais pas les tirets ( –
), points (.) et espaces. Les noms de cadres doivent commencer par une lettre (et non un chiffre). Ils tiennent compte
des majuscules et des minuscules. N'utilisez pas de termes r&eacute;serv&eacute;s dans JavaScript (tels que les mots top ou navigator)
comme noms de cadre.
Pour qu'un lien modifie le contenu d'un autre cadre, vous devez attribuer un nom au cadre cible. Pour faciliter la
cr&eacute;ation de liens entre plusieurs cadres, donnez un nom &agrave; chaque cadre que vous cr&eacute;ez.
Src Sp&eacute;cifie le document source &agrave; afficher dans le cadre. Cliquez sur l'ic&ocirc;ne de dossier pour rechercher et s&eacute;lectionner
un fichier.
D&eacute;filer D&eacute;termine si des barres de d&eacute;filement apparaissent dans le cadre. La d&eacute;finition de cette option sur Par d&eacute;faut
n'affecte aucune valeur &agrave; l'attribut correspondant, si bien que chaque navigateur peut utiliser sa valeur par d&eacute;faut. Dans
la plupart des navigateurs, la valeur par d&eacute;faut est Auto. Par cons&eacute;quent, les barres de d&eacute;filement n'apparaissent que si
la fen&ecirc;tre du navigateur ne peut pas afficher la totalit&eacute; du contenu du cadre courant.
Ne pas redimens. Emp&ecirc;che les visiteurs de d&eacute;placer les bordures du cadre pour redimensionner ce dernier dans un
navigateur.
Derni&egrave;re mise &agrave; jour le 4/5/2011
209
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
Remarque : Vous pouvez toujours redimensionner les cadres dans Dreamweaver ; cette option ne s'applique qu'aux
visiteurs qui souhaitent afficher les cadres dans un navigateur.
Bordures Affiche ou masque les bordures du cadre courant lorsqu'il est affich&eacute; dans un navigateur. L'option Bordures
remplace les param&egrave;tres de bordure du jeu de cadres.
Les options de bordure sont Oui (afficher les bordures), Non (masquer les bordures) et Par d&eacute;faut. Dans la plupart des
navigateurs, la valeur propos&eacute;e est Oui, &agrave; moins que l'option Bordures du jeu de cadres parent ne soit d&eacute;finie sur Non.
Si plusieurs cadres partagent une m&ecirc;me bordure, celle-ci n'est masqu&eacute;e que lorsque l'option Bordures est d&eacute;finie sur
Non pour tous les cadres ou lorsque la propri&eacute;t&eacute; Bordures du jeu de cadres parent est d&eacute;finie sur Non et l'option
Bordures sur Par d&eacute;faut.
Couleur de la bordure D&eacute;finit la couleur de toutes les bordures du cadre. Cette couleur s'applique &agrave; toutes les bordures
adjacentes au cadre et remplace celle du jeu de cadres.
Largeur de marge D&eacute;finit la largeur en pixels des marges gauche et droite (c'est-&agrave;-dire l'espace s&eacute;parant la bordure du
cadre de son contenu).
Hauteur de marge D&eacute;finit la hauteur en pixels des marges sup&eacute;rieure et inf&eacute;rieure (c'est-&agrave;-dire l'espace s&eacute;parant la
bordure du cadre de son contenu).
Remarque : La d&eacute;finition de la largeur et de la hauteur d'un cadre et la d&eacute;finition des marges dans la bo&icirc;te de dialogue
Modifier &gt; Propri&eacute;t&eacute;s de la page sont deux op&eacute;rations diff&eacute;rentes.
Pour modifier la couleur d'arri&egrave;re-plan d'un cadre, vous devez d&eacute;finir la couleur d'arri&egrave;re-plan du document dans le
cadre dans les propri&eacute;t&eacute;s de la page.
D&eacute;finition des valeurs d'accessibilit&eacute; d'un cadre
1 Dans le panneau Cadres (Fen&ecirc;tre &gt; Cadres), s&eacute;lectionnez un cadre en pla&ccedil;ant le point d'insertion dans l'un des
cadres.
2 Choisissez Modifier &gt; Modifier la balise &lt;jeu de cadres&gt;.
3 S&eacute;lectionnez Feuille de style/Accessibilit&eacute; dans la liste de cat&eacute;gories situ&eacute;e &agrave; gauche, entrez des valeurs et cliquez sur OK.
D&eacute;finition des valeurs d'accessibilit&eacute; d'un cadre
1 Affichez votre document en mode Code ou Code et cr&eacute;ation si vous &ecirc;tes en mode Cr&eacute;ation.
2 Dans le panneau Cadres (Fen&ecirc;tre &gt; Cadres), s&eacute;lectionnez un cadre en pla&ccedil;ant le point d'insertion dans l'un des
cadres. Dreamweaver met en surbrillance la balise du cadre dans le code.
3 Cliquez dans le code du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e
(Macintosh), et choisissez Modifier la balise.
4 Dans l'&eacute;diteur de balises, effectuez les modifications n&eacute;cessaires et cliquez sur OK.
Modification de la couleur d'arri&egrave;re-plan d'un document dans un cadre
1 Placez le point d'insertion dans le cadre.
2 Choisissez Modifier &gt; Propri&eacute;t&eacute;s de la page.
3 Dans la bo&icirc;te de dialogue Propri&eacute;t&eacute;s de la page, cliquez sur le menu d&eacute;roulant Couleur d'arri&egrave;re-plan, puis
s&eacute;lectionnez une couleur.
Derni&egrave;re mise &agrave; jour le 4/5/2011
210
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
Affichage et d&eacute;finition des propri&eacute;t&eacute;s de jeux de cadres
Utilisez l'inspecteur Propri&eacute;t&eacute;s pour afficher et d&eacute;finir la plupart des propri&eacute;t&eacute;s de jeu de cadres, notamment le titre du
jeu de cadre, les bordures et les tailles des cadres.
D&eacute;finition du titre du document d'un jeu de cadres
1 S&eacute;lectionnez un jeu de cadres en utilisant l'une des m&eacute;thodes suivantes :
• Cliquez sur une bordure entre deux cadres du jeu de cadres dans la fen&ecirc;tre de document en mode Cr&eacute;ation.
• Cliquez sur la bordure d'un jeu de cadres dans le panneau Cadres (Fen&ecirc;tre &gt; Cadres).
2 Dans la zone Titre de la barre d'outils du document, tapez le nom du document de jeu de cadres.
Lorsqu'un visiteur affiche le jeu de cadres dans un navigateur, le titre appara&icirc;t dans la barre de titre.
Affichage ou d&eacute;finition des propri&eacute;t&eacute;s de jeux de cadres
1 S&eacute;lectionnez un jeu de cadres en utilisant l'une des m&eacute;thodes suivantes :
• Cliquez sur une bordure entre deux cadres du jeu de cadres dans la fen&ecirc;tre de document en mode Cr&eacute;ation.
• Cliquez sur la bordure d'un jeu de cadres dans le panneau Cadres (Fen&ecirc;tre &gt; Cadres).
2 Dans l'inspecteur Propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), cliquez sur la fl&egrave;che d'agrandissement situ&eacute;e dans le coin
inf&eacute;rieur droit et d&eacute;finissez les options de jeu de cadres.
Bordures D&eacute;termine si des bordures apparaissent ou non autour des cadres lorsque le document est affich&eacute; dans un
navigateur. Pour afficher les bordures, s&eacute;lectionnez Oui ; sinon, s&eacute;lectionnez Non. Pour que le navigateur d&eacute;termine
l'affichage des bordures, s&eacute;lectionnez Par d&eacute;faut.
Largeur de bord Sp&eacute;cifie la largeur de toutes les bordures du jeu de cadres.
Couleur de la bordure D&eacute;finit la couleur des bordures. S&eacute;lectionnez une couleur avec le s&eacute;lecteur de couleur ou entrez
la valeur hexad&eacute;cimale de la couleur.
S&eacute;lection lig./col. D&eacute;finit la taille des cadres des lignes et colonnes du jeu de cadres s&eacute;lectionn&eacute; ; cliquez sur un onglet
du c&ocirc;t&eacute; gauche ou en haut de la zone S&eacute;lection lig./col., puis tapez une hauteur ou une largeur dans la zone de texte
Valeur.
3 Pour d&eacute;finir l'espace allou&eacute; par le navigateur &agrave; chaque cadre, choisissez l'une des options suivantes dans le menu
Unit&eacute;s :
Pixels D&eacute;finit la taille de la colonne ou de la ligne s&eacute;lectionn&eacute;e en lui attribuant une valeur absolue. Choisissez cette
option pour les cadres dont la taille ne change pas, comme la barre de navigation. Un espace est allou&eacute; aux cadres dont
la taille est sp&eacute;cifi&eacute;e en pixels, puis aux cadres dont la taille est relative ou sp&eacute;cifi&eacute;e en pourcentage. En r&egrave;gle g&eacute;n&eacute;rale,
il est recommand&eacute; de d&eacute;finir une largeur fixe en pixels pour le cadre de gauche et une largeur relative pour le cadre de
droite afin que ce dernier puisse occuper l'espace restant une fois la largeur en pixels allou&eacute;e.
Remarque : Si toutes les largeurs sont en pixels et qu'un visiteur affiche le jeu de cadres dans un navigateur dont la largeur
est inf&eacute;rieure ou sup&eacute;rieure &agrave; celle que vous avez sp&eacute;cifi&eacute;e, les cadres sont automatiquement redimensionn&eacute;s en fonction
de l'espace disponible. Ceci s'applique &eacute;galement aux hauteurs sp&eacute;cifi&eacute;es en pixels. Par cons&eacute;quent, il est recommand&eacute; de
sp&eacute;cifier au moins une largeur et une hauteur relatives.
Derni&egrave;re mise &agrave; jour le 4/5/2011
211
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
Pourcent D&eacute;finit la colonne ou la ligne s&eacute;lectionn&eacute;e comme pourcentage de la largeur ou de la hauteur totale de son
jeu de cadres. L'espace des cadres d&eacute;finis avec cette option est allou&eacute; apr&egrave;s celui des cadres d&eacute;finis en pixels, mais avant
celui des cadres d&eacute;finis avec l'option Relatif.
Relatif Indique qu'une fois l'espace des cadres d&eacute;finis en Pixel et en Pour-cent attribu&eacute;, l'espace restant doit &ecirc;tre allou&eacute;
&agrave; la colonne ou &agrave; la ligne s&eacute;lectionn&eacute;e. Cet espace est r&eacute;parti proportionnellement entre les cadres de taille relative.
Remarque : Lorsque vous choisissez l'option Relatif dans le menu Unit&eacute;s, tout nombre figurant dans le champ Valeur
dispara&icirc;t. Pour le sp&eacute;cifier, vous devez le taper de nouveau. En revanche, si une seule ligne ou colonne est d&eacute;finie sur
Relatif, vous n'avez pas besoin de retaper un nombre, car tout l'espace restant lui est allou&eacute;, une fois celui des autres lignes
et colonnes a &eacute;t&eacute; attribu&eacute;. Pour garantir la compatibilit&eacute; inter-navigateurs, vous pouvez taper 1 dans le champ Valeur.
Cela revient &agrave; ne pas sp&eacute;cifier de valeur du tout.
Contr&ocirc;le des contenus de cadre avec des liens
Pour utiliser un lien dans un cadre en vue d'ouvrir un document dans un autre cadre, vous devez d&eacute;finir la cible du
lien. L'attribut target d'un lien sp&eacute;cifie le cadre ou la fen&ecirc;tre dans lequel ou laquelle le contenu associ&eacute; au lien s'ouvre.
Par exemple, si la barre de navigation se trouve dans le cadre gauche et que vous voulez afficher le document li&eacute; dans
le cadre de contenu principal &agrave; droite, vous devez d&eacute;finir le nom de ce dernier comme la cible de chacun des liens de
la barre de navigation. Lorsqu'un visiteur clique sur un lien de navigation, le contenu sp&eacute;cifi&eacute; s'ouvre dans le cadre
principal.
1 En mode Cr&eacute;ation, choisissez un texte ou un objet.
2 Dans la zone Lien de l'inspecteur Propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), proc&eacute;dez de l'une des mani&egrave;res suivantes :
• Cliquez sur l'ic&ocirc;ne de dossier et s&eacute;lectionnez le fichier avec lequel &eacute;tablir le lien.
• Faites glisser l'ic&ocirc;ne Pointer vers un fichier dans le panneau Fichiers et s&eacute;lectionnez le fichier avec lequel &eacute;tablir le
lien.
3 Dans le menu d&eacute;roulant Cible de l'inspecteur Propri&eacute;t&eacute;s, s&eacute;lectionnez la fen&ecirc;tre ou le cadre dans lequel doit
s'afficher le document li&eacute; :
•
_blank ouvre le document li&eacute; dans une nouvelle fen&ecirc;tre du navigateur sans toucher &agrave; la fen&ecirc;tre courante.
•
_parent ouvre le document li&eacute; dans le jeu de cadres parent du cadre dans lequel figure le lien, en rempla&ccedil;ant tout
le jeu de cadres.
•
_self ouvre le lien dans le cadre en cours, en rempla&ccedil;ant le contenu de ce cadre.
•
_top ouvre le document li&eacute; dans la fen&ecirc;tre du navigateur courant, en rempla&ccedil;ant tous les cadres.
Les noms des cadres apparaissent &eacute;galement dans ce menu. S&eacute;lectionnez un cadre nomm&eacute; dans lequel s'ouvrira le
document li&eacute;.
Remarque : Les noms des cadres s'affichent uniquement lorsque vous modifiez un document dans un jeu de cadres. Si
vous modifiez un document dans sa propre fen&ecirc;tre, les noms des cadres n'apparaissent pas dans le menu d&eacute;roulant Cible.
Si vous modifiez un document en dehors du jeu de cadres, vous pouvez taper le nom du cadre cible dans la zone de texte
Cible.
Si vous &eacute;tablissez un lien vers une page situ&eacute;e en dehors de votre site, utilisez toujours target=&quot;_top&quot; ou
target=&quot;_blank&quot; pour vous assurer que la page ne soit pas consid&eacute;r&eacute;e comme faisant partie de votre site.
Derni&egrave;re mise &agrave; jour le 4/5/2011
212
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
Fourniture de contenu pour les navigateurs ne prenant pas les cadres en
charge
Dreamweaver vous permet de d&eacute;finir le contenu &agrave; afficher dans les navigateurs graphiques plus anciens et bas&eacute;s sur le
texte qui ne prennent pas en charge les cadres. Ce contenu, encadr&eacute; de balises noframes, est stock&eacute; dans le fichier du
jeu de cadres. Lorsqu'un navigateur qui ne g&egrave;re pas les cadres charge un fichier de jeu de cadres, il affiche uniquement
le contenu des balises noframes.
Remarque : La zone noframes doit contenir un texte plus d&eacute;taill&eacute; que &laquo; Vous devez mettre votre navigateur &agrave; jour pour
pouvoir utiliser des cadres &raquo;. Certains visiteurs de sites utilisent des syst&egrave;mes qui ne leur permettent pas d'afficher les
cadres.
1 Choisissez Modifier &gt; Jeu de cadres &gt; Modifier le contenu sans cadres.
Dreamweaver efface ce qui se trouve dans la fen&ecirc;tre en mode Cr&eacute;ation et les mots &laquo; Contenu sans cadres &raquo; apparaissent
dans la zone sup&eacute;rieure.
2 Effectuez l'une des op&eacute;rations suivantes :
• Dans la fen&ecirc;tre de document, tapez ou ins&eacute;rez le contenu, comme vous le feriez pour un document ordinaire.
• S&eacute;lectionnez Fen&ecirc;tre &gt; Inspecteur de code, placez le point d'insertion entre les balises body qui se trouvent &agrave;
l'int&eacute;rieur des balises noframes, puis tapez le code HTML pour le contenu
3 Choisissez de nouveau Modifier &gt; Jeu de cadres &gt; Modifier le contenu sans cadres pour revenir au mode normal
du document jeu de cadres.
Utilisation des comportements JavaScript avec les cadres
Plusieurs comportements JavaScript et commandes de navigation sont particuli&egrave;rement bien adapt&eacute;s &agrave; l'utilisation de
cadres :
Texte du cadre Remplace le contenu et le formatage d'un cadre par le contenu que vous sp&eacute;cifiez. Ce contenu peut &ecirc;tre
n'importe quel texte valide en HTML Cette action permet d'afficher les informations dans un cadre de fa&ccedil;on
dynamique
Atteindre l'URL Ouvre une nouvelle page dans la fen&ecirc;tre en cours ou dans le cadre indiqu&eacute;. Cette action est
particuli&egrave;rement utile pour modifier d'un seul clic le contenu de deux cadres ou plus
Ins&eacute;rer menu de reroutage Permet de configurer une liste de liens, dans un menu, qui ouvrent des fichiers dans une
fen&ecirc;tre du navigateur lorsque l'on clique dessus. Vous pouvez &eacute;galement cibler une fen&ecirc;tre ou un cadre particuliers
dans lesquels le document s'ouvrira.
Pour plus d'informations, consultez la section &laquo; Ajout de comportements JavaScript &raquo; &agrave; la page 360.
Voir aussi
&laquo; Application du comportement Texte d'un cadre &raquo; &agrave; la page 370
&laquo; Application du comportement Atteindre l'URL &raquo; &agrave; la page 367
&laquo; Application du comportement D&eacute;finir image barre de navigation &raquo; &agrave; la page 370
&laquo; Application du comportement Menu de reroutage &raquo; &agrave; la page 368
Derni&egrave;re mise &agrave; jour le 4/5/2011
213
Chapitre 8 : Ajout de contenu dans les
pages
Utilisation des pages
Utilisation du panneau Insertion
Les boutons qui composent le panneau Insertion permettent de cr&eacute;er et d'ins&eacute;rer des objets, tels que des tableaux et
des images. Ces boutons sont organis&eacute;s en plusieurs cat&eacute;gories.
Voir aussi
&laquo; Pr&eacute;sentation du panneau Insertion &raquo; &agrave; la page 14
&laquo; Modification de balises avec des &eacute;diteurs de balises &raquo; &agrave; la page 325
&laquo; S&eacute;lection et affichage d'&eacute;l&eacute;ments dans la fen&ecirc;tre de document &raquo; &agrave; la page 220
Masquage ou affichage du panneau Insertion
❖ Choisissez Fen&ecirc;tre &gt; Ins&eacute;rer.
Remarque : Si vous utilisez certaines types de fichiers, tels que XML, JavaScript, Java et CSS, le panneau Insertion et
l'option de mode Cr&eacute;ation sont gris&eacute;s, car vous ne pouvez pas ins&eacute;rer d'&eacute;l&eacute;ments dans ces fichiers de code.
Affichage des boutons d'une cat&eacute;gorie
❖ S&eacute;lectionnez le nom de la cat&eacute;gorie dans le menu Cat&eacute;gorie. Par exemple, pour afficher les boutons de la cat&eacute;gorie
Mise en forme, s&eacute;lectionnez Mise en forme.
Derni&egrave;re mise &agrave; jour le 4/5/2011
214
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Affichage du menu d'un bouton
❖ Cliquez sur le bouton fl&eacute;ch&eacute; pointant vers le bas situ&eacute; pr&egrave;s de l'ic&ocirc;ne du bouton.
Insertion d'un objet
1 Choisissez la cat&eacute;gorie appropri&eacute;e dans le menu Cat&eacute;gorie du panneau Insertion.
2 Effectuez l'une des op&eacute;rations suivantes :
• Cliquez sur un bouton d'objet ou faites glisser l'ic&ocirc;ne du bouton dans la fen&ecirc;tre de document.
• Cliquez sur la fl&egrave;che d'un bouton, puis s&eacute;lectionnez une option dans le menu.
Selon le type d'objet que vous s&eacute;lectionnez, une bo&icirc;te de dialogue d'insertion d'objet s'affiche, le cas &eacute;ch&eacute;ant, et vous
invite &agrave; rechercher un fichier ou &agrave; sp&eacute;cifier les param&egrave;tres d'un objet sp&eacute;cifique. En outre, Dreamweaver vous permet
d'ins&eacute;rer du code dans le document ou d'ouvrir un &eacute;diteur de balises ou un panneau vous permettant de sp&eacute;cifier les
informations avant l'insertion du code.
Dans le cas de certains objets, aucune bo&icirc;te de dialogue ne s'affiche si vous ins&eacute;rez les objets en mode Cr&eacute;ation, mais
un &eacute;diteur de balises s'affiche si vous ins&eacute;rez les objets en mode Code. Pour d'autres objets, lorsque vous essayez
d'ins&eacute;rer des objets en mode Cr&eacute;ation, Dreamweaver passe en mode Code avant de r&eacute;aliser l'insertion.
Remarque : Certains objets, tels que les ancres nomm&eacute;es, ne sont pas visibles lorsque vous visualisez la page dans la
fen&ecirc;tre d'un navigateur. Vous pouvez afficher des ic&ocirc;nes en mode Cr&eacute;ation indiquant l'emplacement de ces objets
invisibles.
Contournement de la bo&icirc;te de dialogue d'insertion d'objets et insertion d'un espace r&eacute;serv&eacute;
vide
❖ Appuyez sur la touche Ctrl (Windows) ou Option (Macintosh) tout en cliquant avec la souris sur le bouton
correspondant &agrave; l'objet.
Par exemple, pour ins&eacute;rer un espace r&eacute;serv&eacute; d'image sans sp&eacute;cifier de fichier d'image, appuyez sur la touche Ctrl ou
Option tout en cliquant avec la souris sur le bouton Image.
Remarque : Cette proc&eacute;dure ne contourne pas toutes les bo&icirc;tes de dialogue d'insertion d'objet. De nombreux objets, y
compris les &eacute;l&eacute;ments PA et les jeux de cadres, n'ins&egrave;rent pas d'espaces r&eacute;serv&eacute;s ni d'objets avec des valeurs par d&eacute;faut.
Derni&egrave;re mise &agrave; jour le 4/5/2011
215
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Modification des pr&eacute;f&eacute;rences du panneau Insertion
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh).
2 Dans la cat&eacute;gorie G&eacute;n&eacute;ral de la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences, d&eacute;sactivez l'option Afficher la bo&icirc;te de dialogue lors
de l'insertion d'objets pour supprimer les bo&icirc;tes de dialogue lors de l'insertion d'objets, tels que des images, des
tableaux, des scripts ou des &eacute;l&eacute;ments d'en-t&ecirc;te. Vous pouvez &eacute;galement maintenir la touche Ctrl (Windows) ou
Option (Macintosh) enfonc&eacute;e tandis que vous cr&eacute;ez l'objet.
Si cette option est d&eacute;sactiv&eacute;e lorsque vous ins&eacute;rez un objet, celui-ci aura des valeurs par d&eacute;faut. Utilisez l'inspecteur
Propri&eacute;t&eacute;s pour modifier les propri&eacute;t&eacute;s de l'objet apr&egrave;s l'avoir ins&eacute;r&eacute;.
Ajout, suppression ou gestion des boutons de la cat&eacute;gorie Favoris du panneau Insertion
1 S&eacute;lectionnez l'une des cat&eacute;gories du panneau Insertion.
2 Cliquez &agrave; l'aide du bouton droit de la souris (Windows) ou tout en maintenant la touche Contr&ocirc;le enfonc&eacute;e
(Macintosh) &agrave; l'endroit o&ugrave; les boutons s'affichent, puis choisissez Personnaliser les favoris.
3 Dans la bo&icirc;te de dialogue Personnaliser les objets favoris, apportez les modifications d&eacute;sir&eacute;es, puis cliquez sur OK.
• Pour ajouter un objet, s&eacute;lectionnez-le dans le volet Objets disponibles situ&eacute; &agrave; gauche, puis cliquez sur la fl&egrave;che situ&eacute;e
entre les deux volets ou cliquez deux fois sur l'objet dans le volet Objets disponibles.
Remarque : Les objets doivent &ecirc;tre ajout&eacute;s un par un. Il est impossible de s&eacute;lectionner un nom de cat&eacute;gorie tel que
Commun afin d'ajouter une cat&eacute;gorie enti&egrave;re &agrave; votre liste de favoris.
• Pour supprimer un objet ou un s&eacute;parateur, s&eacute;lectionnez l'objet dans le volet Objets favoris situ&eacute; &agrave; droite, puis
cliquez sur le bouton Supprimer l'objet s&eacute;lectionn&eacute; dans la liste Objets favoris, au-dessus du volet.
• Pour d&eacute;placer un objet, s&eacute;lectionnez-le dans le volet Objets favoris situ&eacute; &agrave; droite, puis cliquez sur le bouton fl&eacute;ch&eacute;
pointant vers le haut ou vers le bas situ&eacute; au-dessus du volet.
• Pour ajouter un s&eacute;parateur sous un objet, s&eacute;lectionnez un objet dans le volet Objets favoris situ&eacute; &agrave; droite, puis
cliquez sur le bouton Ajouter un s&eacute;parateur situ&eacute; en dessous du volet.
4 Si la cat&eacute;gorie Favoris n'est pas la cat&eacute;gorie active, s&eacute;lectionnez-la afin de voir les modifications apport&eacute;es.
Insertion d'objets &agrave; l'aide des boutons de la cat&eacute;gorie Favoris
❖ S&eacute;lectionnez la cat&eacute;gorie Favoris dans la partie gauche du panneau Insertion, puis cliquez sur le bouton
correspondant &agrave; un objet Favori que vous avez ajout&eacute;.
Derni&egrave;re mise &agrave; jour le 4/5/2011
216
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Affichage du panneau Insertion sous la forme d'une barre Insertion horizontale
Contrairement aux autres panneaux de Dreamweaver, vous pouvez retirer le panneau Insertion de son emplacement
d'ancrage par d&eacute;faut et le placer &agrave; l'horizontale, au-dessus de la fen&ecirc;tre de document. Dans ce cas, ce panneau se
transforme en barre d'outils, m&ecirc;me s'il est impossible de la masquer et de l'afficher comme vous le feriez pour les autres
barres d'outils.
1 Cliquez sur l'onglet du panneau Insertion et tirez-le en haut de la fen&ecirc;tre de document.
2 Lorsqu'une ligne bleue horizontale s'affiche sur la largeur de la fen&ecirc;tre du document, rel&acirc;che le panneau Insertion.
Remarque : La barre Insertion horizontale est &eacute;galement un &eacute;l&eacute;ment par d&eacute;faut de l'espace de travail Classique. Pour
activer l'espace de travail Classique, choisissez Classique dans la section Commutation d'espace de travail de la barre
Application.
R&eacute;tablissement du panneau Insertion
1 Cliquez sur la poign&eacute;e de la barre Insertion horizontale (sur sa gauche) et tirez la barre &agrave; l'endroit o&ugrave; vos panneaux
sont ancr&eacute;s.
2 Placez le panneau Insertion &agrave; l'endroit d&eacute;sir&eacute; puis d&eacute;posez-le. Une ligne bleue indique o&ugrave; vous pouvez d&eacute;poser le
panneau.
Affichage des cat&eacute;gories de la barre Insertion horizontale sous forme d'onglets
❖ Cliquez sur la fl&egrave;che du menu situ&eacute;e pr&egrave;s du nom de la cat&eacute;gorie, &agrave; l'extr&eacute;mit&eacute; gauche de la barre Insertion
horizontale, puis choisissez Afficher en tant qu'onglets.
Affichage des cat&eacute;gories de la barre Insertion horizontale sous forme de menus
❖ Cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e (Macintosh) sur un onglet de
cat&eacute;gorie de la barre Insertion horizontale, puis choisissez Afficher en tant que menu.
Derni&egrave;re mise &agrave; jour le 4/5/2011
217
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
D&eacute;finition des propri&eacute;t&eacute;s de page
Pour chaque page que vous cr&eacute;ez dans Dreamweaver, vous pouvez sp&eacute;cifier les propri&eacute;t&eacute;s de formatage dans la bo&icirc;te
de dialogue Propri&eacute;t&eacute;s de la page (Modifier &gt; Propri&eacute;t&eacute;s de la page). Cette bo&icirc;te de dialogue permet de sp&eacute;cifier la
famille et la taille par d&eacute;faut de la police, la couleur d'arri&egrave;re-plan, les marges, le style des liens ainsi que d'autres aspects
de la conception de page. Vous pouvez attribuer de nouvelles propri&eacute;t&eacute;s &agrave; chaque nouvelle page que vous cr&eacute;ez et
modifier celles des pages existantes. Les modifications que vous apportez dans la bo&icirc;te de dialogue Propri&eacute;t&eacute;s de la page
s'appliquent &agrave; la page enti&egrave;re.
Dreamweaver d&eacute;finit des r&egrave;gles CSS pour toutes les propri&eacute;t&eacute;s sp&eacute;cifi&eacute;es dans les cat&eacute;gories Apparence (CSS), Liens
(CSS) et En-t&ecirc;tes (CSS) de la bo&icirc;te de dialogue Propri&eacute;t&eacute;s de la page. Les r&egrave;gles sont int&eacute;gr&eacute;es dans la section head de
la page. Vous pouvez toujours d&eacute;finir les propri&eacute;t&eacute;s de la page &agrave; l'aide de code HTML mais, pour ce faire, vous devez
s&eacute;lectionner la cat&eacute;gorie Apparence (HTML) de la bo&icirc;te de dialogue Propri&eacute;t&eacute;s de la page. Les bo&icirc;tes de dialogue
Titre/codage et Trac&eacute; de l'image d&eacute;finissent elles aussi des propri&eacute;t&eacute;s de page &agrave; l'aide de HTML.
Remarque : Les propri&eacute;t&eacute;s de page que vous choisissez ne s'appliquent qu'au document actif. Si une page utilise une feuille
de style CSS externe, Dreamweaver n'&eacute;crase pas les balises d&eacute;finies dans la feuille de style, car ceci affecterait les autres
pages qui utilisent cette feuille.
1 Choisissez Modifier &gt; Propri&eacute;t&eacute;s de la page ou cliquez sur le bouton Propri&eacute;t&eacute;s de la page de l'inspecteur Propri&eacute;t&eacute;s.
2 Modifiez les propri&eacute;t&eacute;s de la page puis cliquez sur OK.
Voir aussi
&laquo; D&eacute;finition des propri&eacute;t&eacute;s CSS &raquo; &agrave; la page 140
&laquo; Utilisation de formatage HTML &raquo; &agrave; la page 239
&laquo; Code XHTML &raquo; &agrave; la page 305
D&eacute;finition des propri&eacute;t&eacute;s CSS de police, de couleur de fond et d'image de fond d'une page
La bo&icirc;te de dialogue Propri&eacute;t&eacute;s de la page permet de sp&eacute;cifier diverses options de base de mise en forme des pages Web,
comme la police, la couleur de fond et l'image de fond.
1 Choisissez Modifier &gt; Propri&eacute;t&eacute;s de la page ou cliquez sur le bouton Propri&eacute;t&eacute;s de la page de l'inspecteur Propri&eacute;t&eacute;s.
2 S&eacute;lectionnez la cat&eacute;gorie Apparence (CSS) et d&eacute;finissez les options.
Police Sp&eacute;cifie la famille de polices par d&eacute;faut &agrave; utiliser dans vos pages Web. Dreamweaver utilise la famille de polices
sp&eacute;cifi&eacute;e sauf si une autre police est d&eacute;sign&eacute;e pour un &eacute;l&eacute;ment de texte donn&eacute;.
Taille Sp&eacute;cifie la taille de police par d&eacute;faut &agrave; utiliser dans vos pages Web. Dreamweaver utilise la taille de police
sp&eacute;cifi&eacute;e sauf si une autre taille est d&eacute;sign&eacute;e pour un &eacute;l&eacute;ment de texte donn&eacute;.
Couleur du texte Sp&eacute;cifie la couleur d'affichage des polices par d&eacute;faut.
Couleur d'arri&egrave;re-plan D&eacute;finit la couleur d'arri&egrave;re-plan de la page. Activez l'option Couleur d'arri&egrave;re-plan puis
choisissez une couleur dans le s&eacute;lecteur.
Image d’arri&egrave;re-plan D&eacute;finit une image d'arri&egrave;re-plan Cliquez sur le bouton Parcourir puis acc&eacute;dez &agrave; l'image et
s&eacute;lectionnez-la. Vous pouvez &eacute;galement indiquer le chemin de l'image d'arri&egrave;re-plan dans le champ Image d'arri&egrave;re-plan.
Dreamweaver g&eacute;n&egrave;re une mosa&iuml;que (multiplication) de l'image d'arri&egrave;re-plan si elle ne remplit pas enti&egrave;rement sa
fen&ecirc;tre, comme le font les navigateurs. Pour &eacute;viter la cr&eacute;ation de cette mosa&iuml;que, d&eacute;sactivez cette fonction &agrave; l'aide des
feuilles de style en cascade.
Derni&egrave;re mise &agrave; jour le 4/5/2011
218
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
R&eacute;p&eacute;tition Indique comment l'image d'arri&egrave;re-plan sera affich&eacute;e sur la page :
• S&eacute;lectionnez l'option Pas de r&eacute;p&eacute;tition pour n'afficher l'image d'arri&egrave;re-plan qu'une seule fois.
• S&eacute;lectionnez l'option R&eacute;p&eacute;tition pour r&eacute;p&eacute;ter, ou mettre en mosa&iuml;que, l'image &agrave; l'horizontale et la verticale.
• S&eacute;lectionnez l'option R&eacute;p&eacute;ter-x pour former une mosa&iuml;que horizontale.
• S&eacute;lectionnez l'option R&eacute;p&eacute;ter-y pour former une mosa&iuml;que verticale.
Marge gauche et Marge droite Sp&eacute;cifie la taille des marges &agrave; gauche et &agrave; droite de la page.
Marge haut et Marge bas Sp&eacute;cifie la taille des marges en haut et en bas de la page.
D&eacute;finition des propri&eacute;t&eacute;s HTML d'une page
La d&eacute;finition de propri&eacute;t&eacute;s dans cette cat&eacute;gorie de la bo&icirc;te de dialogue Propri&eacute;t&eacute;s de la page entra&icirc;ne un formatage de
la page &agrave; l'aide de code HTML au lieu de code CSS.
1 Choisissez Modifier &gt; Propri&eacute;t&eacute;s de la page ou cliquez sur le bouton Propri&eacute;t&eacute;s de la page de l'inspecteur Propri&eacute;t&eacute;s.
2 S&eacute;lectionnez la cat&eacute;gorie Apparence (HTML) et d&eacute;finissez les options.
Image d’arri&egrave;re-plan D&eacute;finit une image d'arri&egrave;re-plan Cliquez sur le bouton Parcourir puis acc&eacute;dez &agrave; l'image et
s&eacute;lectionnez-la. Vous pouvez &eacute;galement indiquer le chemin de l'image d'arri&egrave;re-plan dans le champ Image d'arri&egrave;re-plan.
Dreamweaver g&eacute;n&egrave;re une mosa&iuml;que (multiplication) de l'image d'arri&egrave;re-plan si elle ne remplit pas enti&egrave;rement sa
fen&ecirc;tre, comme le font les navigateurs. Pour &eacute;viter la cr&eacute;ation de cette mosa&iuml;que, d&eacute;sactivez cette fonction &agrave; l'aide des
feuilles de style en cascade.
Arri&egrave;re-plan D&eacute;finit la couleur d'arri&egrave;re-plan de la page. Activez l'option Couleur d'arri&egrave;re-plan puis choisissez une
couleur dans le s&eacute;lecteur.
Texte Sp&eacute;cifie la couleur d'affichage des polices par d&eacute;faut.
Lien Sp&eacute;cifie la couleur &agrave; appliquer au texte qui constitue le lien.
Liens visit&eacute;s Sp&eacute;cifie la couleur &agrave; appliquer aux liens visit&eacute;s.
Liens actifs Sp&eacute;cifie la couleur &agrave; appliquer lorsque la souris ou le curseur clique sur un lien.
Marge gauche et Marge droite Sp&eacute;cifie la taille des marges &agrave; gauche et &agrave; droite de la page.
Marge haut et Marge bas Sp&eacute;cifie la taille des marges en haut et en bas de la page.
D&eacute;finition des propri&eacute;t&eacute;s de liens CSS
Vous pouvez d&eacute;finir le type et la taille de la police par d&eacute;faut, ainsi que les couleurs utilis&eacute;es pour les liens, les liens
visit&eacute;s et les liens actifs
1 Choisissez Modifier &gt; Propri&eacute;t&eacute;s de la page ou cliquez sur le bouton Propri&eacute;t&eacute;s de la page de l'inspecteur Propri&eacute;t&eacute;s.
2 S&eacute;lectionnez la cat&eacute;gorie Liens (CSS) et d&eacute;finissez les options.
Police du lien D&eacute;finit la famille de polices par d&eacute;faut &agrave; utiliser pour les liens. Par d&eacute;faut, Dreamweaver utilise la police
d&eacute;finie pour la page enti&egrave;re, sauf si une autre police est sp&eacute;cifi&eacute;e.
Taille D&eacute;finit la taille de police par d&eacute;faut &agrave; utiliser pour les liens.
Couleur des liens Sp&eacute;cifie la couleur &agrave; appliquer au texte qui constitue le lien.
Liens visit&eacute;s Sp&eacute;cifie la couleur &agrave; appliquer aux liens visit&eacute;s.
Liens de survol Sp&eacute;cifie la couleur &agrave; appliquer lorsque la souris ou le curseur est plac&eacute; sur un lien.
Liens actifs Sp&eacute;cifie la couleur &agrave; appliquer lorsque la souris ou le curseur clique sur un lien.
Derni&egrave;re mise &agrave; jour le 4/5/2011
219
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Style soulign&eacute; Sp&eacute;cifie le style de soulignement &agrave; appliquer aux liens. Si un style de soulignement est d&eacute;j&agrave; d&eacute;fini pour
votre page (par exemple, par le biais d'une feuille de style CSS), le menu par d&eacute;faut est remplac&eacute; par la mention &laquo; ne
pas modifier &raquo;. Cette mention vous informe d'un style de lien qui a &eacute;t&eacute; d&eacute;fini. Si vous modifiez le style de soulignement
&agrave; l'aide de la bo&icirc;te de dialogue Propri&eacute;t&eacute;s de la page, Dreamweaver modifiera la d&eacute;finition de lien pr&eacute;c&eacute;dente.
D&eacute;finition des propri&eacute;t&eacute;s d'en-t&ecirc;te de page (CSS)
Vous pouvez d&eacute;finir le type et la taille de la police par d&eacute;faut, ainsi que les couleurs utilis&eacute;es pour les liens, les liens
visit&eacute;s et les liens actifs
1 Choisissez Modifier &gt; Propri&eacute;t&eacute;s de la page ou cliquez sur le bouton Propri&eacute;t&eacute;s de la page de l'inspecteur Propri&eacute;t&eacute;s.
2 S&eacute;lectionnez la cat&eacute;gorie En-t&ecirc;tes (CSS) et d&eacute;finissez les options.
Police des en-t&ecirc;tes D&eacute;finit la famille de polices par d&eacute;faut &agrave; utiliser pour les en-t&ecirc;tes. Dreamweaver utilise la famille
de polices sp&eacute;cifi&eacute;e sauf si une autre police est d&eacute;sign&eacute;e pour un &eacute;l&eacute;ment de texte donn&eacute;.
En-t&ecirc;te 1 &agrave; En-t&ecirc;te 6 Sp&eacute;cifie les tailles et couleurs &agrave; utiliser pour chaque niveau de balises d'en-t&ecirc;te.
D&eacute;finition des propri&eacute;t&eacute;s du titre et de codage de la page
Vous pouvez d&eacute;finir le type et la taille de la police par d&eacute;faut, ainsi que les couleurs utilis&eacute;es pour les liens, les liens
visit&eacute;s et les liens actifs La cat&eacute;gorie Titre/codage de la bo&icirc;te de dialogue Propri&eacute;t&eacute;s de la page permet de d&eacute;finir le type
de codage de document sp&eacute;cifique au langage utilis&eacute; pour cr&eacute;er vos pages Web, ainsi que le Formulaire de
normalisation Unicode &agrave; utiliser avec ce type de codage.
1 Choisissez Modifier &gt; Propri&eacute;t&eacute;s de la page ou cliquez sur le bouton Propri&eacute;t&eacute;s de la page de l'inspecteur Propri&eacute;t&eacute;s.
2 S&eacute;lectionnez la cat&eacute;gorie Titre/codage et d&eacute;finissez les options.
Titre Sp&eacute;cifie le titre de la page, qui s'affiche dans la barre de titre de la fen&ecirc;tre de document et dans la plupart des
fen&ecirc;tres du navigateur.
Type de document (DTD) Sp&eacute;cifie une d&eacute;finition de type de document. Par exemple, vous pouvez rendre un document
HTML compatible XHTML en s&eacute;lectionnant XHTML 1.0 transitionnel ou XHTML 1.0 Strict dans le menu d&eacute;roulant.
Codage Pr&eacute;cise le codage utilis&eacute; pour les caract&egrave;res du document.
Si vous s&eacute;lectionnez Unicode (UTF 8) en tant que codage de document, le codage d'entit&eacute; est superflu dans la mesure
o&ugrave; UTF 8 permet de repr&eacute;senter de fa&ccedil;on fiable tous les caract&egrave;res. Si vous s&eacute;lectionnez un autre codage de document,
le codage d'entit&eacute; peut &ecirc;tre n&eacute;cessaire pour repr&eacute;senter certains caract&egrave;res. Pour plus d'informations sur les entit&eacute;s de
caract&egrave;res, voir www.w3.org/TR/REC-html40/sgml/entities.html.
Recharger Convertit le document existant ou de l'ouvrir de nouveau avec le nouveau codage.
Formulaire de normalisation Unicode N'est activ&eacute;e que si vous s&eacute;lectionnez UTF 8 en tant que code par d&eacute;faut. Il
existe quatre Formulaires de normalisation Unicode. Le plus important est le Formulaire de normalisation Unicode C
car il est le plus utilis&eacute; dans le Mod&egrave;le de caract&egrave;res li&eacute; au World Wide Web, mais Adobe fournit &eacute;galement les trois
autres Formulaires de normalisation Unicode.
Certains caract&egrave;res Unicode semblent visuellement similaires mais peuvent &ecirc;tre stock&eacute;s de diff&eacute;rentes mani&egrave;res dans
le document. Par exemple, &euml; (e tr&eacute;ma) peut &ecirc;tre repr&eacute;sent&eacute; sous la forme d'un seul caract&egrave;re, &laquo; e tr&eacute;ma &raquo; ou de deux
caract&egrave;res, &laquo; e Latin ordinaire &raquo; + &laquo; tr&eacute;ma &raquo;. Un caract&egrave;re Unicode de combinaison est un caract&egrave;re associ&eacute; au caract&egrave;re
pr&eacute;c&eacute;dent, ce qui fait appara&icirc;tre le tr&eacute;ma au-dessus du &laquo; e &raquo; Latin. Les deux formes donnent la m&ecirc;me typographie
visuelle, alors que chacune est enregistr&eacute;e diff&eacute;remment dans le fichier.
La normalisation est le processus consistant &agrave; s'assurer que tous les caract&egrave;res pouvant &ecirc;tre enregistr&eacute;s sous diff&eacute;rentes
formes le sont tous sous la m&ecirc;me forme. C'est-&agrave;-dire que tous les caract&egrave;res &laquo; &euml; &raquo; d'un document sont enregistr&eacute;s sous
Derni&egrave;re mise &agrave; jour le 4/5/2011
220
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
forme de &laquo; e tr&eacute;ma &raquo; unique ou de &laquo; e + tr&eacute;ma de combinaison &raquo;, mais pas sous les deux formes dans un m&ecirc;me
document.
Pour plus d'informations sur la Normalisation Unicode et les formulaires sp&eacute;cifiques pouvant &ecirc;tre utilis&eacute;s, consultez
le site Web Unicode www.unicode.org/reports/tr15.
Inclure une signature Unicode (BOM) Inclut une marque d'ordre d'octet (BOM, byte order mark) dans le document. Il
s'agit d'une marque constitu&eacute;e de 2 &agrave; 4 octets plac&eacute;s au d&eacute;but d'un fichier texte identifiant un fichier comme &eacute;tant au
format Unicode et, dans ce cas, l'ordre des octets suivants. Le code UTF 8 ne pr&eacute;sentant pas d'ordre octet, l'ajout d'une
marque BOM UTF 8 est facultatif. Dans le cas de UTF 16 et UTF 32, cette marque est obligatoire.
Utilisation d'un trac&eacute; d'image pour cr&eacute;er la page
Vous pouvez ins&eacute;rer un fichier image &agrave; utiliser comme guide dans la cr&eacute;ation de votre page :
1 Choisissez Modifier &gt; Propri&eacute;t&eacute;s de la page ou cliquez sur le bouton Propri&eacute;t&eacute;s de la page de l'inspecteur Propri&eacute;t&eacute;s.
2 S&eacute;lectionnez la cat&eacute;gorie Trac&eacute; de l’image et d&eacute;finissez les options.
Trac&eacute; de l'image Permet de sp&eacute;cifier l'image &agrave; utiliser comme guide pour reproduire une mise en page. Cette image
sert uniquement de r&eacute;f&eacute;rence et n'appara&icirc;t pas lorsque le document s'affiche dans un navigateur.
Transparence D&eacute;termine l'opacit&eacute; du trac&eacute; de l'image, de compl&egrave;tement transparent &agrave; compl&egrave;tement opaque.
Description de l'encodage de document
L'encodage de document pr&eacute;cise le codage utilis&eacute; pour les caract&egrave;res dans le document. L'encodage du document est
sp&eacute;cifi&eacute; dans une balise meta, ins&eacute;r&eacute;e dans l'en-t&ecirc;te du document ; il indique au navigateur et &agrave; Dreamweaver le mode
de d&eacute;codage du document et les polices &agrave; utiliser pour afficher le texte d&eacute;cod&eacute;.
Par exemple, si vous sp&eacute;cifiez Occidental (Latin1), la balise meta suivante est ins&eacute;r&eacute;e :
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;&gt;.
Le document affich&eacute; dans Dreamweaver contient les polices que vous sp&eacute;cifiez dans Pr&eacute;f&eacute;rences de polices pour
l'encodage Occidental (Latin1) ; ce m&ecirc;me document affich&eacute; dans un navigateur contient les polices que l'utilisateur du
navigateur pr&eacute;cise pour l'encodage Occidental (Latin1).
Si vous sp&eacute;cifiez Japonais (Shift JIS), la balise meta suivante est ins&eacute;r&eacute;e :
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=Shift_JIS&quot;&gt;.
Le document affich&eacute; dans Dreamweaver contient les polices que vous sp&eacute;cifiez pour les encodages du japonais ; ce
m&ecirc;me document affich&eacute; dans un navigateur contient les polices que l'utilisateur du navigateur pr&eacute;cise pour les
encodages du japonais.
Vous modifier l'encodage du document dans une page et modifier l'encodage utilis&eacute; par d&eacute;faut par Dreamweaver pour
cr&eacute;er de nouveaux documents, y compris les polices utilis&eacute;es pour afficher chaque encodage.
Voir aussi
&laquo; D&eacute;finition du type et du codage par d&eacute;faut d'un document &raquo; &agrave; la page 70
S&eacute;lection et affichage d'&eacute;l&eacute;ments dans la fen&ecirc;tre de document
Pour s&eacute;lectionner un &eacute;l&eacute;ment dans le mode Cr&eacute;ation de la fen&ecirc;tre de document, cliquez dessus. Si un &eacute;l&eacute;ment est
invisible, vous devez le rendre visible pour le s&eacute;lectionner.
Derni&egrave;re mise &agrave; jour le 4/5/2011
221
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Certains codes HTML ne sont pas visibles dans un navigateur, comme, par exemple, les balises comment. Il est
cependant utile de pouvoir s&eacute;lectionner, modifier, d&eacute;placer et supprimer ces &eacute;l&eacute;ments invisibles lorsque vous cr&eacute;ez une
page.
Dreamweaver permet d'afficher des ic&ocirc;nes &agrave; l'emplacement de ces &eacute;l&eacute;ments invisibles dans la fen&ecirc;tre de document en
mode Cr&eacute;ation. Pour indiquer les marqueurs d'&eacute;l&eacute;ment qui doivent s'afficher, d&eacute;finissez les pr&eacute;f&eacute;rences li&eacute;es aux
&eacute;l&eacute;ments invisibles. Par exemple, vous pouvez sp&eacute;cifier que les ancres nomm&eacute;es soient visibles, mais pas les sauts de
ligne.
Vous pouvez cr&eacute;er certains &eacute;l&eacute;ments invisibles (tels que les commentaires et les ancres nomm&eacute;es) &agrave; l'aide des boutons
dans la cat&eacute;gorie Commun du panneau Insertion. Vous pouvez ensuite modifier ces &eacute;l&eacute;ments &agrave; l'aide de l'inspecteur
Propri&eacute;t&eacute;s.
Voir aussi
&laquo; Affichage du code &raquo; &agrave; la page 310
&laquo; Utilisation du panneau Insertion &raquo; &agrave; la page 213
S&eacute;lection d'&eacute;l&eacute;ments
• Pour s&eacute;lectionner un &eacute;l&eacute;ment visible dans la fen&ecirc;tre de document, cliquez dessus ou entourez-le du rectangle de
s&eacute;lection.
• Pour s&eacute;lectionner un &eacute;l&eacute;ment invisible, choisissez Affichage &gt; Assistances visuelles &gt; El&eacute;ments invisibles (si ce n'est
pas d&eacute;j&agrave; fait), puis cliquez sur le marqueur de l'&eacute;l&eacute;ment dans la fen&ecirc;tre de document.
Certains objets apparaissent sur la page &agrave; un endroit diff&eacute;rent de celui dans lequel leur code est ins&eacute;r&eacute;. Par exemple,
en mode conception, un &eacute;l&eacute;ment PA peut se trouver n'importe o&ugrave; dans la page, mais en mode Code, le code
d&eacute;finissant l'&eacute;l&eacute;ment PA se trouve dans un emplacement fixe. Lorsque les &eacute;l&eacute;ments invisibles sont affich&eacute;s,
Dreamweaver affiche des marqueurs dans la fen&ecirc;tre de document pour indiquer l'emplacement du code de ces
&eacute;l&eacute;ments. En s&eacute;lectionnant le marqueur, vous s&eacute;lectionnez tout l'&eacute;l&eacute;ment : si, par exemple, vous s&eacute;lectionnez le
marqueur d'un &eacute;l&eacute;ment PA, tout l'&eacute;l&eacute;ment PA est s&eacute;lectionn&eacute;
• Pour s&eacute;lectionner une balise compl&egrave;te (avec son contenu, le cas &eacute;ch&eacute;ant), cliquez sur son symbole dans le s&eacute;lecteur
de balise, dans la partie inf&eacute;rieure gauche de la fen&ecirc;tre de document. Le s&eacute;lecteur de balises appara&icirc;t en mode
Cr&eacute;ation et en mode Code. Le s&eacute;lecteur de balises affiche toujours les balises qui contiennent la s&eacute;lection ou le point
d'insertion en cours. La balise &agrave; l'extr&ecirc;me gauche est la balise ultrap&eacute;riph&eacute;rique contenant la s&eacute;lection ou le point
d'insertion en cours. La balise suivante est contenue dans cette balise ultrap&eacute;riph&eacute;rique, et ainsi de suite. La balise
&agrave; l'extr&ecirc;me droite est la balise la plus &agrave; l'int&eacute;rieur contenant la s&eacute;lection ou le point d'insertion en cours.
Dans l'exemple suivant, le point d'insertion est situ&eacute; dans une balise de paragraphe,&lt;p&gt;. Pour s&eacute;lectionner le tableau
contenant le paragraphe que vous souhaitez s&eacute;lectionner, s&eacute;lectionnez la balise &lt;table&gt; &agrave; gauche de la balise &lt;p&gt;.
Affichage du code HTML associ&eacute; au texte ou &agrave; l'objet s&eacute;lectionn&eacute;
❖ Effectuez l'une des op&eacute;rations suivantes :
• Dans la barre d'outils du document, cliquez sur le bouton Afficher le mode Code.
• Choisissez Affichage &gt; Code.
• Dans la barre d'outils du document, cliquez sur le bouton Afficher les modes Code et Cr&eacute;ation.
• Choisissez Affichage &gt; Code et cr&eacute;ation.
• Choisissez Fen&ecirc;tre &gt; Inspecteur de code.
Derni&egrave;re mise &agrave; jour le 4/5/2011
222
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Lorsque vous s&eacute;lectionnez un &eacute;l&eacute;ment dans l'un des deux &eacute;diteurs de code (mode Code ou inspecteur de code), il est
&eacute;galement s&eacute;lectionn&eacute; dans la fen&ecirc;tre de document. Il est parfois n&eacute;cessaire de synchroniser les deux affichages pour
que la s&eacute;lection apparaisse.
Affichage ou masquage des ic&ocirc;nes des &eacute;l&eacute;ments invisibles
❖ Choisissez Affichage &gt; Assistances visuelles &gt; El&eacute;ments invisibles.
Remarque : L'affichage des &eacute;l&eacute;ments invisibles risque de modifier l&eacute;g&egrave;rement la mise en page, en d&eacute;pla&ccedil;ant d'autres
&eacute;l&eacute;ments de quelques pixels. Pour conserver une mise en page pr&eacute;cise, vous devez donc masquer ces &eacute;l&eacute;ments invisibles.
D&eacute;finition des pr&eacute;f&eacute;rences des &eacute;l&eacute;ments invisibles
Utilisez les pr&eacute;f&eacute;rences des &eacute;l&eacute;ments invisibles pour d&eacute;terminer les types d'&eacute;l&eacute;ments devant &ecirc;tre affich&eacute;s lorsque
l'option Affichage &gt; Assistances visuelles &gt; El&eacute;ments invisibles est activ&eacute;e.
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh), puis cliquez sur
El&eacute;ments invisibles.
2 S&eacute;lectionnez les &eacute;l&eacute;ments &agrave; rendre visibles, puis cliquez sur OK.
Remarque : Une coche &agrave; c&ocirc;t&eacute; du nom de l'&eacute;l&eacute;ment dans la bo&icirc;te de dialogue signifie que l'&eacute;l&eacute;ment est visible lorsque
l'option Affichage &gt; Assistances visuelles &gt; El&eacute;ments invisibles est activ&eacute;e.
Ancres nomm&eacute;es Affiche une ic&ocirc;ne marquant l'emplacement de chaque ancre nomm&eacute;e (a name =&quot;&quot;) dans le
document.
Scripts Affiche une ic&ocirc;ne marquant l'emplacement de code Java Script ou VBScript dans le corps du document.
S&eacute;lectionnez cette ic&ocirc;ne pour modifier le script dans l'inspecteur Propri&eacute;t&eacute;s, ou pour cr&eacute;er un lien vers un fichier script
externe.
Commentaires Affiche une ic&ocirc;ne marquant l'emplacement d’un commentaire HTML. S&eacute;lectionnez cette ic&ocirc;ne pour
consultez le commentaire dans l'inspecteur Propri&eacute;t&eacute;s.
Sauts de ligne Affiche une ic&ocirc;ne marquant l'emplacement de chaque saut de ligne (BR). Cette option est
d&eacute;s&eacute;lectionn&eacute;e par d&eacute;faut.
Cartes graphiques c&ocirc;t&eacute; client Affiche une ic&ocirc;ne marquant l'emplacement de chaque carte graphique du document.
Styles incorpor&eacute;s Affiche une ic&ocirc;ne marquant l'emplacement de styles CSS incorpor&eacute;s dans le corps du document. Les
styles CSS plac&eacute;s dans l'en-t&ecirc;te du document n'apparaissent pas dans la fen&ecirc;tre de document.
Champs de formulaire masqu&eacute;s Affiche une ic&ocirc;ne marquant l'emplacement de champs de formulaire dont l'attribut
type est fix&eacute; &agrave; &quot;hidden&quot;.
S&eacute;parateur de formulaire Affiche une bordure d&eacute;limitant le formulaire pour vous aider &agrave; y ins&eacute;rer des &eacute;l&eacute;ments. La
bordure indique l'&eacute;tendue de la balise form ; ainsi, tous les &eacute;l&eacute;ments de formulaire &agrave; l'int&eacute;rieur de cette bordure sont
correctement inclus dans les balises form.
Points d'ancrage des &eacute;l&eacute;ments PA Affiche une ic&ocirc;ne marquant l'emplacement du code d&eacute;finissant un &eacute;l&eacute;ment PA.
L'&eacute;l&eacute;ment PA lui-m&ecirc;me peut &ecirc;tre positionn&eacute; n'importe o&ugrave; dans la page. Les &eacute;l&eacute;ments PA ne constituent pas des
&eacute;l&eacute;ments invisibles ; seul le code qui les d&eacute;finit est invisible. S&eacute;lectionnez l'ic&ocirc;ne afin de s&eacute;lectionner l'&eacute;l&eacute;ment PA. Vous
pouvez ainsi afficher le contenu de l'&eacute;l&eacute;ment PA, m&ecirc;me s'il est marqu&eacute; comme masqu&eacute;.
Points d'ancrage des &eacute;l&eacute;ments align&eacute;s Affiche une ic&ocirc;ne marquant l'emplacement du code HTML des &eacute;l&eacute;ments qui
acceptent l'attribut align. Ces &eacute;l&eacute;ments sont les suivants : images, tableaux, objets ActiveX, plug-ins et applets. Dans
certains cas, le code de l'&eacute;l&eacute;ment peut &ecirc;tre s&eacute;par&eacute; de l'objet visible.
Balises de marquage de serveur visuel Affiche l'emplacement des balises de marquage de serveur (telles que les balises
ASP (Active Server Pages) et ColdFusion) dont le contenu ne peut pas &ecirc;tre affich&eacute; dans la fen&ecirc;tre de document. En
Derni&egrave;re mise &agrave; jour le 4/5/2011
223
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
r&egrave;gle g&eacute;n&eacute;rale, lorsqu'elles sont trait&eacute;es par un serveur, ces balises g&eacute;n&egrave;rent des balises HTML. Par exemple, une balise
&lt;CFGRAPH&gt; g&eacute;n&egrave;re un tableau HTML lorsqu'elle est trait&eacute;e par un serveur ColdFusion. Dreamweaver repr&eacute;sente la
balise &agrave; l'aide d'un &eacute;l&eacute;ment ColdFusion invisible, car il lui est impossible de d&eacute;terminer la sortie dynamique finale de
la page.
Balises de marquage de serveur non visuel Affiche l'emplacement des balises de marquage de serveur (telles que les
balises ASP (Active Server Pages) et ColdFusion) dont le contenu ne peut pas &ecirc;tre affich&eacute; dans la fen&ecirc;tre de document.
Il s'agit g&eacute;n&eacute;ralement de balises de configuration, de traitement ou de logique (par exemple &lt;CFSET&gt;, &lt;CFWDDX&gt;
et &lt;CFXML&gt;) qui ne g&eacute;n&egrave;rent pas de balises HTML.
Affichage CSS: Aucun Affiche une ic&ocirc;ne qui montre l'emplacement du contenu masqu&eacute; par la propri&eacute;t&eacute; display:none
de la feuille de style li&eacute;e ou incorpor&eacute;e.
Afficher le texte dynamique sous Affiche le texte dynamique de la page dans le format {Recordset:Field} par d&eacute;faut.
Si la longueur de ces valeurs perturbe le formatage de la page, vous pouvez choisir le type d'affichage {}.
Inclusions c&ocirc;t&eacute; serveur Affiche le contenu r&eacute;el de chaque fichier d'inclusion c&ocirc;t&eacute; serveur.
Couleurs Web s&eacute;curis&eacute;es
En HTML, les couleurs sont exprim&eacute;es par leur valeur hexad&eacute;cimale (par exemple, #FF0000) ou, pour les principales, par
leur nom en anglais (red). Une couleur s&eacute;curis&eacute;e pour le Web est une couleur qui, en mode 256 couleurs, reste toujours
la m&ecirc;me dans Netscape Navigator et Microsoft Internet Explorer, sous Windows comme sous Macintosh. Par convention,
il y a 216 couleurs communes, et toute valeur hexad&eacute;cimale combinant les paires 00, 33, 66, 99, CC ou FF (correspondant
respectivement aux niveaux RVB 0, 51, 102, 153, 204 et 255) repr&eacute;sente une couleur s&eacute;curis&eacute;e pour le Web.
Des tests approfondis ont cependant r&eacute;v&eacute;l&eacute; qu'en r&eacute;alit&eacute; seules 212 couleurs sont s&eacute;curis&eacute;es pour le Web. Sous
Windows, Internet Explorer ne restitue pas correctement les couleurs #0033FF (0,51,255), #3300FF (51,0,255),
#00FF33 (0,255,51) et #33FF00 (51,255,0).
Lorsque les navigateurs Web ont fait leur apparition, la plupart des ordinateurs n'affichaient que 265 couleurs (8 bits
par canal, bpc). Aujourd'hui, la plupart des ordinateurs affichent des milliers ou des millions de couleurs (16 et 32 bpc).
L'utilit&eacute; de la palette adapt&eacute;e &agrave; tous les navigateurs est donc bien moindre si vous d&eacute;veloppez votre site pour les
utilisateurs de syst&egrave;mes informatiques modernes.
La palette de couleurs s&eacute;curis&eacute;e pour le Web peut s'av&eacute;rer utile si vous cr&eacute;ez des sites pour des appareils diff&eacute;rents,
comme les organisateurs personnels et les t&eacute;l&eacute;phones mobiles. Un grand nombre de ces appareils sont &eacute;quip&eacute;s d'un
&eacute;cran noir et blanc (1 bpc) ou 256 couleurs (8 bpc).
Les palettes Cubes de couleur (valeur par d&eacute;faut) et Ton continu de Dreamweaver utilisent la palette s&eacute;curis&eacute;e pour le
Web de 216 couleurs ; lorsque vous s&eacute;lectionnez une couleur dans ces palettes, c'est la valeur hexad&eacute;cimale
correspondante qui s'affiche.
Pour choisir une couleur en dehors de la gamme s&eacute;curis&eacute;e pour le Web, ouvrez le nuancier du syst&egrave;me en cliquant sur
le bouton Roue chromatique en haut &agrave; droite du s&eacute;lecteur de couleurs de Dreamweaver. Celle-ci n'est pas limit&eacute;e aux
couleurs s&eacute;curis&eacute;es pour le Web.
Les versions UNIX de Netscape Navigator utilisent une palette de couleurs diff&eacute;rente de celle des versions Windows
et Macintosh. Si vous d&eacute;veloppez exclusivement pour des plates-formes UNIX (ou si le public vis&eacute; est compos&eacute;
d'utilisateurs de Windows ou de Macintosh &eacute;quip&eacute;s de moniteurs 24 bpc et d'utilisateurs d'UNIX &eacute;quip&eacute;s de
moniteurs 8 bpc), vous pouvez utiliser des valeurs hexad&eacute;cimales combinant les paires 00, 40, 80, BF ou FF, qui
produisent des couleurs s&eacute;curis&eacute;es pour le Web sur les ordinateurs ex&eacute;cutant SunOS.
Derni&egrave;re mise &agrave; jour le 4/5/2011
224
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Utilisation du s&eacute;lecteur de couleur
Dans Dreamweaver, les inspecteurs de propri&eacute;t&eacute;s de la plupart des &eacute;l&eacute;ments de page, ainsi que de nombreuses bo&icirc;tes
de dialogue, comportent une ic&ocirc;ne permettant d'ouvrir un s&eacute;lecteur de couleur. Choisissez la couleur d'un &eacute;l&eacute;ment de
page dans le s&eacute;lecteur. Vous pouvez &eacute;galement d&eacute;finir la couleur par d&eacute;faut du texte des &eacute;l&eacute;ments de votre page.
1 Cliquez sur l'ic&ocirc;ne des couleurs dans n'importe quelle bo&icirc;te de dialogue ou dans l'inspecteur Propri&eacute;t&eacute;s.
Le s&eacute;lecteur de couleur s'affiche &agrave; l'&eacute;cran.
2 Effectuez l'une des op&eacute;rations suivantes :
• Utilisez la pipette pour s&eacute;lectionner une nuance de couleur dans la palette. Toutes les couleurs des palettes Cubes
de couleur (valeur par d&eacute;faut) et Ton continu sont s&eacute;curis&eacute;es pour le Web ; les autres palettes ne le sont pas.
• Utilisez la pipette pour s&eacute;lectionner une couleur &agrave; partir d'un point visible &agrave; l'&eacute;cran, m&ecirc;me &agrave; l'ext&eacute;rieur de la fen&ecirc;tre
de Dreamweaver. Pour s&eacute;lectionner une couleur sur le bureau ou dans une autre application, appuyez sur le bouton
de la souris et maintenez-le enfonc&eacute;. La pipette peut ainsi rester active et s&eacute;lectionner une couleur en dehors de
Dreamweaver. Si vous cliquez sur le bureau ou sur une autre application, Dreamweaver s&eacute;lectionne la couleur de
l'emplacement o&ugrave; vous avez cliqu&eacute;. Cependant, si vous passez &agrave; une autre application, il peut s'av&eacute;rer n&eacute;cessaire de
cliquer sur une fen&ecirc;tre de Dreamweaver pour continuer &agrave; travailler dans Dreamweaver.
• Pour &eacute;largir plus amplement la s&eacute;lection, utilisez le menu d&eacute;roulant en haut &agrave; droite du nuancier. Vous pouvez
s&eacute;lectionner Cubes de couleur, Ton continu, Syst&egrave;me d'exploitation Windows, Mac OS et Niveaux de gris.
Remarque : Les palettes Cubes de couleur et Ton continu sont s&eacute;curis&eacute;es pour le Web, contrairement aux palettes Syst&egrave;me
d'exploitation Windows, Mac OS et Niveaux de gris.
• Pour effacer la couleur en cours sans devoir en choisir une autre, cliquez sur le bouton Couleur par d&eacute;faut
• Pour ouvrir le nuancier du syst&egrave;me, cliquez sur le bouton Roue chromatique
.
.
Zoom avant et arri&egrave;re
Dreamweaver permet d'agrandir (zoom avant) l'affichage de la fen&ecirc;tre de document de mani&egrave;re &agrave; pouvoir v&eacute;rifier la
pr&eacute;cision des graphiques, s&eacute;lectionner plus ais&eacute;ment de petits &eacute;l&eacute;ments, concevoir des pages avec un texte en petite
taille, concevoir de tr&egrave;s grande pages, etc.
Remarque : Les outils de zoom ne sont disponibles qu'en mode Cr&eacute;ation.
Voir aussi
&laquo; Pr&eacute;sentation de la barre d'&eacute;tat &raquo; &agrave; la page 13
Zoom avant ou arri&egrave;re sur une page
1 Cliquez sur l'outil Zoom (la loupe) dans le coin inf&eacute;rieur droit de la fen&ecirc;tre du document.
2 Effectuez l'une des op&eacute;rations suivantes :
• Cliquez sur la zone de la page que vous souhaitez agrandir jusqu'&agrave; obtenir l'affichage d&eacute;sir&eacute;.
• Tracez un cadre autour de la zone de la page que vous souhaitez agrandir, puis rel&acirc;chez le bouton de la souris.
• S&eacute;lectionnez une &eacute;chelle d'agrandissement pr&eacute;d&eacute;fini dans le menu d&eacute;roulant Zoom.
• Saisissez une &eacute;chelle d'agrandissement dans le champ Zoom.
Vous pouvez &eacute;galement effectuer un grossissement avec l'outil Zoom en appuyant sur Ctrl+= (Windows) ou
Commande+= (Macintosh).
Derni&egrave;re mise &agrave; jour le 4/5/2011
225
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
3 Pour effectuer un zoom arri&egrave;re (r&eacute;duire le taux d'agrandissement), appuyez sur la touche Alt (Windows) ou Option
(Macintosh), puis cliquez sur la page.
Vous pouvez &eacute;galement effectuer une r&eacute;duction avec l'outil Zoom en appuyant sur Ctrl+- (Windows) ou
Commande+- (Macintosh).
Modification d'une page apr&egrave;s un zoom
❖ Cliquez sur l'outil S&eacute;lection (ic&ocirc;ne en forme de pointeur) dans le coin inf&eacute;rieur droit de la fen&ecirc;tre du document,
puis cliquez dans la page.
D&eacute;filement d'une page apr&egrave;s un zoom
1 Cliquez sur l'outil Main (ic&ocirc;ne en forme de main) dans le coin inf&eacute;rieur droit de la fen&ecirc;tre du document.
2 Faites glisser la page.
Adaptation de la fen&ecirc;tre du document &agrave; la s&eacute;lection
1 S&eacute;lectionnez un &eacute;l&eacute;ment de la page.
2 S&eacute;lectionnez Affichage &gt; Ajuster &agrave; la s&eacute;lection.
Adaptation de la fen&ecirc;tre du document &agrave; une page enti&egrave;re
❖ S&eacute;lectionnez Affichage &gt; Ajuster &agrave; la page.
Adaptation de la fen&ecirc;tre du document &agrave; la largeur d'une page
❖ S&eacute;lectionnez Affichage &gt; Ajuster &agrave; la largeur.
Utilisation de comportements Java Script pour d&eacute;tecter le type et la version
des navigateurs et des plug-ins
Vous pouvez utiliser des comportements pour d&eacute;terminer le type de navigateur utilis&eacute; par vos visiteurs, et savoir s'ils
disposent d'un plug-in particulier.
V&eacute;rifier le navigateur Permet d'envoyer les visiteurs sur des pages diff&eacute;rentes selon le type et la version de leur
navigateur. Par exemple, vous pouvez envoyer les utilisateurs de Netscape Navigator 4.0 ou version ult&eacute;rieure sur une
page, les utilisateurs de Microsoft Internet Explorer 4.0 ou version ult&eacute;rieure sur une autre, et les utilisateurs d'un autre
type de navigateur sur la page en cours.
V&eacute;rifier le Plug-in Permet d'envoyer les visiteurs sur des pages diff&eacute;rentes selon qu'ils disposent ou non du plug-in
indiqu&eacute;. Par exemple, vous pouvez envoyer les utilisateurs disposant de Shockwave™ sur une page et les autres sur une
page diff&eacute;rente.
Voir aussi
&laquo; Utilisation des comportements JavaScript &raquo; &agrave; la page 360
&laquo; Application du comportement V&eacute;rifier le navigateur &raquo; &agrave; la page 364
&laquo; Application du comportement V&eacute;rifier le plug-in &raquo; &agrave; la page 364
Derni&egrave;re mise &agrave; jour le 4/5/2011
226
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
D&eacute;finition des pr&eacute;f&eacute;rences de dur&eacute;e et de taille des t&eacute;l&eacute;chargements
Dreamweaver calcule la taille sur la base du contenu de toute la page, y compris tous les objets li&eacute;s, tels que les images
et les plug-ins. Dreamweaver estime la dur&eacute;e de t&eacute;l&eacute;chargement en fonction de la vitesse de connexion entr&eacute;e dans les
pr&eacute;f&eacute;rences de la Barre d'&eacute;tat. Le temps de t&eacute;l&eacute;chargement r&eacute;el d&eacute;pend de l'&eacute;tat du trafic sur Internet,
Pour v&eacute;rifier les dur&eacute;es de t&eacute;l&eacute;chargement pour une page Web particuli&egrave;re, il est int&eacute;ressant d'utiliser la &laquo; r&egrave;gle des 8
secondes &raquo; ; c'est-&agrave;-dire que la plupart des utilisateurs n'attendront pas plus de huit secondes pour le t&eacute;l&eacute;chargement
d'une page.
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh).
2 S&eacute;lectionnez la cat&eacute;gorie Barre d'&eacute;tat dans la liste de gauche.
3 Choisissez la vitesse de connexion &agrave; partir de laquelle le temps de t&eacute;l&eacute;chargement sera calcul&eacute;, puis cliquez sur OK.
Voir aussi
&laquo; D&eacute;finition de la taille des fen&ecirc;tres et de la vitesse de connexion &raquo; &agrave; la page 21
Ajout et formatage de texte
Ajout de texte dans un document
Pour ajouter du texte dans un document Dreamweaver, vous pouvez le saisir directement dans la fen&ecirc;tre du document
ou effectuer un copier/coller. Vous pouvez &eacute;galement importer du texte &agrave; partir d’autres documents.
Pour coller du texte dans un document Dreamweaver, vous pouvez utiliser la commande Coller ou Collage sp&eacute;cial. La
commande Collage sp&eacute;cial permet de pr&eacute;ciser le format du texte coll&eacute; de diff&eacute;rentes fa&ccedil;ons. Par exemple, lorsque vous
souhaitez coller le texte d'un document Microsoft Word d&eacute;j&agrave; format&eacute; dans votre document Dreamweaver en ignorant
son formatage initial afin d'appliquer votre propre feuille de style CSS, s&eacute;lectionnez le texte dans Word, copiez-le dans
le presse-papiers, puis utilisez la commande Collage sp&eacute;cial pour s&eacute;lectionner l'option qui permet de ne coller que le
texte.
Lorsque vous utilisez la commande Coller pour coller un texte issu d'une autre application, vous pouvez d&eacute;finir des
pr&eacute;f&eacute;rences de collage comme options par d&eacute;faut.
Remarque : En mode Code, Ctrl-V (Windows) et Commande-V (Macintosh) collent toujours le texte seulement (sans
formatage).
❖ Pour ajouter du texte dans un document, proc&eacute;dez de l'une des mani&egrave;res suivantes :
• Tapez le texte directement dans la fen&ecirc;tre de document.
• Copiez du texte &agrave; partir d'une autre application, passez dans Dreamweaver, placez le point d'insertion dans la
fen&ecirc;tre du document en mode Cr&eacute;ation, puis choisissez Edition &gt; Coller ou Edition &gt; Collage sp&eacute;cial.
Lorsque vous choisissez Edition &gt; Collage sp&eacute;cial, vous pouvez choisir plusieurs options de formatage du texte coll&eacute;.
Vous pouvez &eacute;galement coller du texte &agrave; l'aide des raccourcis clavier suivants :
Derni&egrave;re mise &agrave; jour le 4/5/2011
227
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Option de collage
Raccourci clavier
Coller
Ctrl+V (Windows)
Commande+V (Macintosh)
Collage sp&eacute;cial
Ctrl+Maj+V (Windows)
Commande+Maj+V (Macintosh)
Insertion de caract&egrave;res sp&eacute;ciaux
Certains caract&egrave;res sp&eacute;ciaux sont repr&eacute;sent&eacute;s en HTML par un nom ou par un num&eacute;ro, qui est alors appel&eacute; entit&eacute;.
Le langage HTML pr&eacute;voit des noms d'entit&eacute;s pour de nombreux caract&egrave;res sp&eacute;ciaux, par exemple le symbole de
copyright (&amp;copy;), l'esperluette (&amp;) et le symbole Marque d&eacute;pos&eacute;e (&amp;reg;). Chaque entit&eacute; est repr&eacute;sent&eacute;e &agrave; la fois par
un nom HTML (par exemple &amp;mdash; pour le tiret cadratin) et son &eacute;quivalent num&eacute;rique (dans ce cas, ).
Le langage HTML utilise des crochets &lt;&gt; dans son code, mais vous devez exprimer les caract&egrave;res sp&eacute;ciaux sup&eacute;rieur
&agrave; et inf&eacute;rieur &agrave; sans que Dreamweaver les interpr&egrave;te comme du code. Dans ce cas, utilisez &amp;gt; pour le signe sup&eacute;rieur
&agrave; (&gt;) et &amp;lt; pour le signe inf&eacute;rieur &agrave; (&lt;).
Malheureusement, certains navigateurs (certaines versions anciennes, ainsi que les navigateurs autres que Netscape
Navigator et Internet Explorer) n'affichent pas correctement la plupart de ces entit&eacute;s.
1 Dans la fen&ecirc;tre de document, placez le curseur l&agrave; o&ugrave; vous voulez ins&eacute;rer un caract&egrave;re sp&eacute;cial.
2 Effectuez l'une des op&eacute;rations suivantes :
• Choisissez le nom du caract&egrave;re dans le sous-menu Insertion &gt; HTML &gt; Caract&egrave;res sp&eacute;ciaux.
• Dans la cat&eacute;gorie Texte du panneau Insertion, cliquez sur le bouton Caract&egrave;res et choisissez le caract&egrave;re d&eacute;sir&eacute; dans
le sous-menu.
Un grand nombre d'autres caract&egrave;res sp&eacute;ciaux sont disponibles. Pour en s&eacute;lectionner un, choisissez Insertion &gt; HTML
&gt; Caract&egrave;res sp&eacute;ciaux &gt; Autre ou cliquez sur le bouton Caract&egrave;res de la cat&eacute;gorie Texte du panneau Insertion, puis
choisissez Autres caract&egrave;res. Choisissez un caract&egrave;re dans la bo&icirc;te de dialogue Ins&eacute;rer autre caract&egrave;re et cliquez sur OK.
Ajout d'espacements entre les caract&egrave;res
Le langage HTML n'autorisant qu'un seul espace entre les caract&egrave;res, il convient d'ins&eacute;rer un espace ins&eacute;cable afin
d'ajouter un espace suppl&eacute;mentaire dans un document. Vous pouvez d&eacute;finir une pr&eacute;f&eacute;rence pour l'insertion
automatique d'un espace ins&eacute;cable dans un document.
Insertion d'un espace ins&eacute;cable
❖ Effectuez l'une des op&eacute;rations suivantes :
• Choisissez Insertion &gt; HTML &gt; Caract&egrave;res sp&eacute;ciaux &gt; Espace ins&eacute;cable.
• Appuyez sur les touches Ctrl+Maj+Espace (Windows) ou Option+Espace (Macintosh).
• Dans la cat&eacute;gorie Texte du panneau Insertion, cliquez sur le bouton Caract&egrave;res et cliquez sur l'ic&ocirc;ne Espace
ins&eacute;cable.
D&eacute;finition d'une pr&eacute;f&eacute;rence pour l'ajout d'espaces ins&eacute;cables
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh).
2 Dans la cat&eacute;gorie G&eacute;n&eacute;ral, assurez-vous que l'option Autoriser plusieurs espaces cons&eacute;cutifs soit activ&eacute;e.
Derni&egrave;re mise &agrave; jour le 4/5/2011
228
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Cr&eacute;ation de listes &agrave; puces ou num&eacute;rot&eacute;es
Vous pouvez cr&eacute;er des listes num&eacute;rot&eacute;es (tri&eacute;es), des listes &agrave; puces (non tri&eacute;es) et des listes de d&eacute;finitions &agrave; partir d'un
texte existant ou d'un nouveau texte que vous tapez dans la fen&ecirc;tre de document.
Les listes de d&eacute;finitions n'utilisent pas de caract&egrave;res d'en-t&ecirc;te tels que des puces ou des nombres et sont souvent utilis&eacute;es
dans les glossaires ou les descriptions. Les listes peuvent &eacute;galement &ecirc;tre imbriqu&eacute;es, c'est-&agrave;-dire qu'elles contiennent
d'autres listes. Par exemple, vous pouvez imbriquer une liste num&eacute;rot&eacute;e ou &agrave; puces au sein d'une autre liste de m&ecirc;me type.
La bo&icirc;te de dialogue Propri&eacute;t&eacute;s de liste vous permet de d&eacute;finir l'aspect d'une liste compl&egrave;te ou d'un &eacute;l&eacute;ment de liste.
Vous pouvez d&eacute;finir le style de num&eacute;rotation, remettre &agrave; z&eacute;ro la num&eacute;rotation ou d&eacute;finir les options du style de puce
d'&eacute;l&eacute;ments individuels de la liste ou de la liste compl&egrave;te.
Voir aussi
&laquo; D&eacute;finition des propri&eacute;t&eacute;s CSS &raquo; &agrave; la page 140
Cr&eacute;ation d'une nouvelle liste
1 Dans le document Dreamweaver, placez le point d'insertion &agrave; l'emplacement o&ugrave; ins&eacute;rer la liste, puis proc&eacute;dez de
l'une des mani&egrave;res suivantes :
• Dans l'inspecteur Propri&eacute;t&eacute;s HTML, cliquez sur le bouton correspondant &agrave; une liste &agrave; puces ou une liste num&eacute;rot&eacute;e.
• Choisissez Format &gt; Liste, puis s&eacute;lectionnez le type de liste qui vous convient : Liste simple (&agrave; puces), Liste
num&eacute;rot&eacute;e ou Liste de d&eacute;finitions.
Le caract&egrave;re de t&ecirc;te de l'&eacute;l&eacute;ment de liste sp&eacute;cifi&eacute; appara&icirc;t dans la fen&ecirc;tre de document.
2 Tapez le texte de l'&eacute;l&eacute;ment de la liste, puis appuyez sur la touche Entr&eacute;e (Windows) ou Retour (Macintosh) pour
cr&eacute;er un autre &eacute;l&eacute;ment de liste.
3 Pour marquer la fin de la liste, appuyez &agrave; deux reprises sur la touche Entr&eacute;e (Windows) ou Retour (Macintosh).
Cr&eacute;ation d'une liste &agrave; partir d'un texte existant
1 S&eacute;lectionnez une suite de paragraphes pour les transformer en liste.
2 Dans l'inspecteur Propri&eacute;t&eacute;s HTML, cliquez sur le bouton correspondant &agrave; une liste &agrave; puces ou une liste num&eacute;rot&eacute;e,
ou choisissez Format &gt; Liste, puis s&eacute;lectionnez le type de liste qui vous convient : Liste simple (&agrave; puces), Liste
num&eacute;rot&eacute;e ou Liste de d&eacute;finitions.
Cr&eacute;ation d'une liste imbriqu&eacute;e
1 S&eacute;lectionnez les &eacute;l&eacute;ments de liste &agrave; imbriquer.
2 Dans l'inspecteur Propri&eacute;t&eacute;s HTML, cliquez sur le bouton Blockquote, ou choisissez Format &gt; Retrait.
Dreamweaver met le texte en retrait et cr&eacute;e une liste individuelle avec les attributs HTML de la liste d'origine.
3 Appliquez un nouveau style ou type de liste au texte en retrait en suivant la m&ecirc;me proc&eacute;dure que celle utilis&eacute;e ci-
dessus.
D&eacute;finition des propri&eacute;t&eacute;s d'une liste compl&egrave;te
1 Dans la fen&ecirc;tre de document, cr&eacute;ez au moins un &eacute;l&eacute;ment de liste. Le nouveau style s'applique automatiquement aux
nouveaux &eacute;l&eacute;ments ajout&eacute;s &agrave; la liste.
2 Placez le point d'insertion dans le texte de l'&eacute;l&eacute;ment de la liste, puis choisissez Format &gt; Liste &gt; Propri&eacute;t&eacute;s de la liste
pour ouvrir la bo&icirc;te de dialogue Propri&eacute;t&eacute;s de liste.
Derni&egrave;re mise &agrave; jour le 4/5/2011
229
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
3 S&eacute;lectionnez les options que vous voulez appliquer &agrave; la liste :
Type de liste Sp&eacute;cifie les propri&eacute;t&eacute;s de la liste, tandis que El&eacute;ment de liste caract&eacute;rise un &eacute;l&eacute;ment individuel d'une liste.
Dans le menu d&eacute;roulant, s&eacute;lectionnez une liste simple, une liste num&eacute;rot&eacute;e, une liste des r&eacute;pertoires ou une liste des
menus. Les options disponibles dans la bo&icirc;te de dialogue varient selon le type de liste choisi.
Style D&eacute;finit le style des num&eacute;ros ou des puces utilis&eacute;s avec une liste num&eacute;rot&eacute;e ou &agrave; puces. Tous les &eacute;l&eacute;ments de la
liste prendront ce style, sauf si vous attribuez un nouveau style &agrave; certains &eacute;l&eacute;ments.
D&eacute;marrer le comptage D&eacute;finit la valeur &agrave; attribuer au premier &eacute;l&eacute;ment d'une liste num&eacute;rot&eacute;e.
4 Cliquez sur OK pour d&eacute;finir les options.
D&eacute;finition des propri&eacute;t&eacute;s d'un &eacute;l&eacute;ment de liste
1 Dans la fen&ecirc;tre de document, placez le point d'insertion dans le texte d'un &eacute;l&eacute;ment de la liste.
2 Choisissez Format &gt; Liste &gt; Propri&eacute;t&eacute;s de la liste.
3 Dans El&eacute;ment de liste, s&eacute;lectionnez les options que vous voulez d&eacute;finir :
Nouveau style Caract&eacute;rise le style de l'&eacute;l&eacute;ment de liste s&eacute;lectionn&eacute;. Les styles du menu Nouveau style sont apparent&eacute;s
au type de liste affich&eacute; dans le menu Type de liste. Si, par exemple, vous avez choisi l'option Liste simple dans le menu
Type de liste, seules les options de puce sont disponibles dans le menu Nouveau style.
R&eacute;initialiser le compte &agrave; D&eacute;finit un num&eacute;ro sp&eacute;cifique &agrave; partir duquel num&eacute;roter les &eacute;l&eacute;ments de liste.
4 Cliquez sur OK pour d&eacute;finir les options.
Recherche et remplacement de texte
Vous pouvez utiliser la commande Rechercher et remplacer pour rechercher du texte ainsi que des attributs et des
balises HTML dans un ou plusieurs documents. Le panneau Recherche, situ&eacute; dans le groupe de panneaux R&eacute;sultats,
indique les r&eacute;sultats des recherches pour lesquelles l'option Rechercher tout est s&eacute;lectionn&eacute;e.
Remarque : Pour rechercher des fichiers dans un site, utilisez les commandes suivantes : Retrouver sur le site local et
Retrouver sur le site distant.
Voir aussi
&laquo; Affichage du code &raquo; &agrave; la page 310
&laquo; Expressions r&eacute;guli&egrave;res &raquo; &agrave; la page 307
Recherche et remplacement de texte
1 Ouvrez le document dans lequel la recherche doit &ecirc;tre effectu&eacute;e ou s&eacute;lectionnez des documents ou un dossier dans
le panneau Fichiers.
2 S&eacute;lectionnez la commande Edition &gt; Rechercher et remplacer.
3 L'option Rechercher dans vous permet de d&eacute;finir les fichiers dans lesquels effectuer la recherche :
Texte s&eacute;lectionn&eacute; Permet de limiter la recherche au texte alors s&eacute;lectionn&eacute; dans le document actif.
Document actif Permet de limiter la recherche au document actif.
Ouvrir les documents Permet d'effectuer la recherche dans tous les documents alors ouverts.
Dossier Permet de limiter la recherche &agrave; un dossier sp&eacute;cifique. Apr&egrave;s avoir choisi Dossier, cliquez sur l'ic&ocirc;ne
repr&eacute;sentant un dossier pour s&eacute;lectionner le dossier dans lequel effectuer votre recherche.
Derni&egrave;re mise &agrave; jour le 4/5/2011
230
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Fichiers s&eacute;lectionn&eacute;s dans le site Permet de limiter la recherche aux fichiers et dossiers actuellement s&eacute;lectionn&eacute;s dans
le panneau Fichiers.
Site local en cours entier Permet d'&eacute;tendre la recherche &agrave; l'ensemble des documents HTML, des fichiers de
biblioth&egrave;que et des documents texte du site courant.
4 Le menu d&eacute;roulant Rechercher permet de sp&eacute;cifier le type de recherche &agrave; effectuer :
Code source Permet de rechercher des cha&icirc;nes de texte sp&eacute;cifiques dans le code source HTML. Vous pouvez
rechercher des balises sp&eacute;cifiques &agrave; l'aide de cette option, mais la recherche Balise sp&eacute;cifique offre une approche plus
flexible pour ce type d'op&eacute;ration.
Texte Permet de rechercher des cha&icirc;nes sp&eacute;cifiques de texte au sein du document. Une recherche sur du texte ignore
tout code HTML qui interromprait la cha&icirc;ne indiqu&eacute;e. Par exemple, si vous recherchez le chien noir, vous
trouverez aussi bien le chien noir que le chien &lt;i&gt;noir&lt;/i&gt;.
Texte (avanc&eacute;) Permet de rechercher des cha&icirc;nes de texte sp&eacute;cifiques se trouvant &agrave; l'int&eacute;rieur ou &agrave; l'ext&eacute;rieur d'une ou
plusieurs balises. Par exemple, dans un document qui contient le code HTML suivant, la recherche de essaie en
pr&eacute;cisant Pas de balise interne et la balise i renvoie uniquement la seconde occurrence du mot essaie : Jean
&lt;i&gt;essaie&lt;/i&gt; de terminer son travail &agrave; temps, mais n'y arrive pas toujours. Il essaie cependant
farouchement.
Balise sp&eacute;cifique Permet de rechercher des balises, attributs et valeurs d'attribut sp&eacute;cifiques, telles que toutes les
balises td o&ugrave; valign est d&eacute;fini sur top.
Remarque : Appuyez sur Ctrl+Entr&eacute;e ou Maj+Entr&eacute;e (Windows) ou sur Contr&ocirc;le+Retour, Maj+Retour ou
Commande+Retour (Macintosh) pour ins&eacute;rer des sauts de ligne au sein des champs de recherche, ce qui permet de
rechercher un caract&egrave;re de retour chariot. Lorsque vous effectuez une telle recherche, d&eacute;sactivez l'option Ignorer les
diff&eacute;rences entre les espaces blancs si vous n'utilisez pas d'expressions r&eacute;guli&egrave;res. Cette recherche porte sur un caract&egrave;re de
retour chariot en particulier, et non sur l'occurrence d'un saut de ligne ; par exemple, elle ne trouvera pas de balise &lt;br&gt;
ou &lt;p&gt;. Les caract&egrave;res de retour chariot apparaissent en tant qu'espaces en mode Cr&eacute;ation, et non en tant que sauts de
ligne.
5 Utilisez les options suivantes pour &eacute;largir ou limiter la recherche :
Respecter la casse Limite la recherche au texte dont la casse correspond &agrave; celle du texte recherch&eacute;. Par exemple, si vous
recherchez le fran&ccedil;ais, vous ne trouverez pas le Fran&ccedil;ais.
Ignorer les diff&eacute;rences entre les espaces blancs Traite tout espace blanc comme s'il s'agissait d'un simple espace pour
les besoins de la recherche. Par exemple, si cette option est activ&eacute;e, ce texte correspond &agrave; ce texte et
texte, mais pas &agrave; cetexte. Cette option n'est pas disponible lorsque l'option Utiliser les expressions
&agrave;ce
r&eacute;guli&egrave;res est s&eacute;lectionn&eacute;e ; vous devez &eacute;crire explicitement l'expression r&eacute;guli&egrave;re pour ignorer les espaces blancs.
Notez que les balises &lt;p&gt; et &lt;br&gt; ne sont pas compt&eacute;es comme des espaces blancs.
Mot entier Limite la recherche aux occurrences contenant un ou plusieurs mots entiers.
Remarque : L'utilisation de cette option &eacute;quivaut &agrave; effectuer une recherche classique d'une cha&icirc;ne commen&ccedil;ant et
terminant par \b, l'expression r&eacute;guli&egrave;re de limite entre les mots.
Utiliser les expressions r&eacute;guli&egrave;res Fait en sorte que certains caract&egrave;res et cha&icirc;nes courtes (tels que ?, *, \w et \b) de la
cha&icirc;ne recherch&eacute;e soient interpr&eacute;t&eacute;s comme des op&eacute;rateurs d'expression r&eacute;guli&egrave;res. Par exemple, une recherche sur le
c\w*\b noir trouvera aussi bien le chien noir que le chapeau noir
Remarque : Si vous travaillez dans l'Affichage de code et modifiez le document, puis essayez de rechercher et de remplacer
tout &eacute;l&eacute;ment autre que du code source, une bo&icirc;te de dialogue s'affiche et vous informe que Dreamweaver synchronise les
deux fen&ecirc;tres avant d'effectuer la recherche.
Derni&egrave;re mise &agrave; jour le 4/5/2011
231
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
6 Pour rechercher des cha&icirc;nes sans les remplacer, cliquez sur Rechercher suivant ou sur Rechercher tout :
Suivant Permet de passer &agrave; l'occurrence suivante dans le document actif et de la s&eacute;lectionner. S'il s'agit de la derni&egrave;re
occurrence de la cha&icirc;ne recherch&eacute;e, Dreamweaver passe au document suivant si la recherche porte sur plusieurs
documents.
Rechercher tout Ouvre le panneau Recherche du groupe de panneaux R&eacute;sultats. Si la recherche ne porte que sur un
document, toutes les occurrences de la cha&icirc;ne recherch&eacute;e s'affichent avec leur contexte. Si la recherche porte sur un
dossier ou un site, Rechercher tout affiche la liste des documents contenant la cha&icirc;ne recherch&eacute;e.
7 Pour remplacer les cha&icirc;nes trouv&eacute;es, cliquez sur Remplacer ou sur Remplacer tout.
8 Cliquez sur Fermer lorsque vous avez termin&eacute;.
Nouvelle recherche sans afficher la bo&icirc;te de dialogue Rechercher et remplacer
❖ Appuyez sur F3 (Windows) ou Commande+G (Macintosh).
Affichage du contexte d'un r&eacute;sultat donn&eacute;
1 Choisissez Fen&ecirc;tre &gt; R&eacute;sultats pour afficher le panneau Rechercher.
2 Double-cliquez sur une ligne du panneau Rechercher.
Si vous effectuez une recherche dans le document actif, la fen&ecirc;tre du document affiche la ligne contenant le r&eacute;sultat de
la recherche.
Si la recherche porte sur plusieurs fichiers, le fichier contenant ce r&eacute;sultat s'ouvre.
Nouvelle ex&eacute;cution d'une m&ecirc;me recherche
❖ Cliquez sur le bouton Rechercher et remplacer.
Arr&ecirc;t d'une recherche en cours
❖ Cliquez sur le bouton Arr&ecirc;ter.
Recherche d'une balise sp&eacute;cifique
La bo&icirc;te de dialogue Rechercher et remplacer vous permet de rechercher du texte et des balises dans un document et
de remplacer les occurrences trouv&eacute;es par un autre texte ou d'autres balises.
1 S&eacute;lectionnez la commande Edition &gt; Rechercher et remplacer.
2 Dans le menu d&eacute;roulant Rechercher, s&eacute;lectionnez Balise sp&eacute;cifique.
3 S&eacute;lectionnez une balise sp&eacute;cifique ou [toute balise] dans le menu d&eacute;roulant situ&eacute; pr&egrave;s du menu d&eacute;roulant
Rechercher ou tapez un nom de balise dans la zone de texte.
4 (Facultatif) Limitez la recherche &agrave; l'aide de l'un des modificateurs de balise suivants :
Avec attribut Permet de s&eacute;lectionner un attribut qui ne doit pas figurer dans la balise pour que la correspondance soit
trouv&eacute;e. Vous pouvez sp&eacute;cifier une valeur particuli&egrave;re pour cet attribut ou choisir [toute valeur].
Sans attribut Permet de s&eacute;lectionner un attribut qui ne doit pas figurer dans la balise pour que la correspondance soit
trouv&eacute;e. Par exemple, vous pouvez rechercher toutes les balises img n'ayant pas l'attribut alt.
Contenant Indique un texte ou une balise qui doit figurer dans la balise d'origine pour que la correspondance soit
trouv&eacute;e. Par exemple, dans le code &lt;b&gt;&lt;font size=&quot;4&quot;&gt;heading 1&lt;/font&gt;&lt;/b&gt;, labalise font est plac&eacute;e &agrave;
l'int&eacute;rieur de la balise b.
Derni&egrave;re mise &agrave; jour le 4/5/2011
232
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Ne contenant pas Indique un texte ou une balise qui ne doit pas figurer dans la balise d'origine pour que la
correspondance soit trouv&eacute;e.
Balise interne Sp&eacute;cifie une balise &agrave; l'int&eacute;rieur de laquelle la balise cible doit &ecirc;tre incluse pour que la correspondance
soit trouv&eacute;e.
Pas de balise interne Sp&eacute;cifie une balise &agrave; l'int&eacute;rieur de laquelle la balise cible ne doit pas se trouver pour que la
correspondance soit trouv&eacute;e.
5 (Facultatif) Pour cibler encore la recherche, cliquez sur le bouton plus (+) et r&eacute;p&eacute;tez l'&eacute;tape 3.
6 Si aucun modificateur de balise n'a &eacute;t&eacute; appliqu&eacute; aux &eacute;tapes 3 et 4, cliquez sur le bouton moins (-) pour r&eacute;duire le
menu de modificateur de balise.
7 Si vous devez ex&eacute;cuter une action lorsque la balise est trouv&eacute;e (telle que le retrait ou le remplacement de cette
balise), s&eacute;lectionnez cette action dans le menu contextuel Action, puis, si n&eacute;cessaire, sp&eacute;cifiez l'action &agrave; effectuer.
Recherche de texte sp&eacute;cifique (avanc&eacute;e)
La bo&icirc;te de dialogue Rechercher et remplacer vous permet de rechercher du texte et des balises dans un document et
de remplacer les occurrences trouv&eacute;es par un autre texte ou d'autres balises.
1 S&eacute;lectionnez la commande Edition &gt; Rechercher et remplacer.
2 Dans le menu d&eacute;roulant Rechercher, choisissez Texte (avanc&eacute;).
3 Tapez le texte dans la zone de texte situ&eacute; pr&egrave;s du menu d&eacute;roulant Rechercher.
Par exemple, tapez le mot Ind&eacute;fini.
4 S&eacute;lectionnez l'option balise interne ou pas de balise interne, puis choisissez une balise dans le menu d&eacute;roulant
adjacent.
Par exemple, cliquez sur Dans la balise, puis s&eacute;lectionnez title.
5 (Facultatif) Cliquez sur le bouton plus (+) pour limiter la recherche &agrave; l'aide d'un des modificateurs de balise suivants :
Avec attribut Permet de s&eacute;lectionner un attribut qui ne doit pas figurer dans la balise pour que la correspondance soit
trouv&eacute;e. Vous pouvez sp&eacute;cifier une valeur particuli&egrave;re pour cet attribut ou choisir [toute valeur].
Sans attribut Permet de s&eacute;lectionner un attribut qui ne doit pas figurer dans la balise pour que la correspondance soit
trouv&eacute;e. Par exemple, vous pouvez rechercher toutes les balises img n'ayant pas l'attribut alt.
Contenant Indique un texte ou une balise qui doit figurer dans la balise d'origine pour que la correspondance soit
trouv&eacute;e. Par exemple, dans le code &lt;b&gt;&lt;font size=&quot;4&quot;&gt;heading 1&lt;/font&gt;&lt;/b&gt;, labalise font est plac&eacute;e &agrave;
l'int&eacute;rieur de la balise b.
Ne contenant pas Indique un texte ou une balise qui ne doit pas figurer dans la balise d'origine pour que la
correspondance soit trouv&eacute;e.
Balise interne Sp&eacute;cifie une balise &agrave; l'int&eacute;rieur de laquelle la balise cible doit &ecirc;tre incluse pour que la correspondance
soit trouv&eacute;e.
Pas de balise interne Sp&eacute;cifie une balise &agrave; l'int&eacute;rieur de laquelle la balise cible ne doit pas se trouver pour que la
correspondance soit trouv&eacute;e.
6 (Facultatif) Pour cibler encore plus la recherche, r&eacute;p&eacute;tez l'&eacute;tape 4.
Derni&egrave;re mise &agrave; jour le 4/5/2011
233
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
D&eacute;finition d'abr&eacute;viations et d'acronymes
Le langage HTML fournit des balises qui permettent de d&eacute;finir les abr&eacute;viations et les acronymes que vous employez
sur votre page pour les moteurs de recherche, les correcteurs orthographiques, les programmes de traduction
automatique ou les synth&eacute;tiseurs vocaux. Par exemple, vous pouvez indiquer que l'abr&eacute;viation IM, sur votre page,
signifie &laquo; ing&eacute;nierie m&eacute;canique &raquo;, ou que l'acronyme OMS signifie &laquo; Organisation mondiale de la Sant&eacute; &raquo;.
1 S&eacute;lectionnez l'abr&eacute;viation ou l'acronyme dans le text de la page.
2 Choisissez Insertion &gt; HTML &gt; Objets texte &gt; Abr&eacute;viation ou Insertion &gt; HTML &gt; Objets texte &gt; Acronyme.
3 Saisissez la forme d&eacute;velopp&eacute;e de l'acronyme ou de l'abr&eacute;viation.
4 Entrez la langue, comme en pour l'anglais, de pour l'allemand ou it pour l'italien.
D&eacute;finition des pr&eacute;f&eacute;rences de copie/collage
Vous pouvez configurer des pr&eacute;f&eacute;rences de collage sp&eacute;cial &agrave; utiliser par d&eacute;faut avec la commande Edition &gt; Coller
lorsque vous collez du texte provenant d'autres applications. Par exemple, si vous souhaitez coller syst&eacute;matiquement
le texte uniquement, ou le texte avec un formatage de base, d&eacute;finissez l'option par d&eacute;faut dans la bo&icirc;te de dialogue
Pr&eacute;f&eacute;rences de copie/collage.
Remarque : Pour coller du texte dans un document Dreamweaver, vous pouvez utiliser la commande Coller ou Collage
sp&eacute;cial. La commande Collage sp&eacute;cial permet de pr&eacute;ciser le format du texte coll&eacute; de diff&eacute;rentes fa&ccedil;ons. Par exemple,
lorsque vous souhaitez coller le texte d'un document Microsoft Word d&eacute;j&agrave; format&eacute; dans votre document Dreamweaver
en ignorant son formatage initial afin d'appliquer votre propre feuille de style CSS, s&eacute;lectionnez le texte dans Word,
copiez-le dans le presse-papiers, puis utilisez la commande Collage sp&eacute;cial pour s&eacute;lectionner l'option qui permet de ne
coller que le texte.
Remarque : Les pr&eacute;f&eacute;rences d&eacute;finies dans la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences de copie/collage ne s'appliquent qu'aux
&eacute;l&eacute;ments coll&eacute;s dans la vue Cr&eacute;ation.
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh).
2 Cliquez sur la cat&eacute;gorie Copier/Coller.
3 D&eacute;finissez les options suivantes, puis cliquez sur OK.
Texte seul Permet de coller du texte non format&eacute;. Si le texte d'origine est format&eacute;, ce formatage, y compris les sauts de
ligne et de paragraphes, est supprim&eacute;.
Texte structur&eacute; Permet de coller du texte en conservant sa structure, mais sans le formatage de base. Par exemple, vous
pouvez coller un texte et conserver la structure des paragraphes, des listes et des tableaux, mais pas les mises en gras,
italiques et autres formatages.
Texte structur&eacute; avec formatage de base Permet de coller du texte structur&eacute; et du texte HTML avec une mise en forme
simple (tel que des paragraphes et des tableaux, ainsi que du texte mis en forme avec les balises b, i, u, strong, em, hr,
abbr ou acronym).
Texte structur&eacute; avec formatage complet Permet de coller du texte en conservant toute sa structure, son formatage
HTML et ses styles CSS.
Remarque : L'option Mise en forme compl&egrave;te ne permet pas de conserver les styles CSS provenant d'une feuille de style
externe, ni les styles provenant d'applications qui ne les conservent pas lors d'une copie dans le presse-papiers.
Conserver les sauts de ligne Permet de conserver les sauts de ligne dans le texte coll&eacute;. Cette option est d&eacute;sactiv&eacute;e si
vous avez s&eacute;lectionn&eacute; Texte seul.
Derni&egrave;re mise &agrave; jour le 4/5/2011
234
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Nettoyage des espaces inter-paragraphes de Word S&eacute;lectionnez cette option lorsque vous avez s&eacute;lectionn&eacute; Texte
structur&eacute; ou Mise en forme de base et souhaitez &eacute;liminer l'espace suppl&eacute;mentaire qui s&eacute;pare les paragraphes lorsque
vous collez votre texte.
V&eacute;rification de l'orthographe d'une page Web.
La commande Orthographe permet de v&eacute;rifier l'orthographe du document actif. Le document doit &ecirc;tre une page Web
(par exemple une page HTML, ColdFusion ou PHP). La commande Orthographe ne fonctionne pas dans les fichiers
texte ou XML.
En outre, elle ignore les balises HTML et les valeurs d'attributs.
Remarque : Dreamweaver peut uniquement v&eacute;rifier l'orthographe du fichier actuellement ouvert dans la fen&ecirc;tre de
document. Il ne peut pas v&eacute;rifier l'orthographe de tous les fichiers d'un site en m&ecirc;me temps.
Par d&eacute;faut, le correcteur orthographique utilise le dictionnaire Anglais US. Pour changer de dictionnaire, choisissez
Edition &gt; Pr&eacute;f&eacute;rences &gt; G&eacute;n&eacute;ral (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences &gt; G&eacute;n&eacute;ral (Macintosh), puis choisissez le
dictionnaire que vous souhaitez utiliser dans le menu d&eacute;roulant Dictionnaire du correcteur d'orthographe.
1 Choisissez Commandes &gt; Orthographe ou appuyez sur les touches Maj+F7.
Lorsque Dreamweaver ne reconna&icirc;t pas un mot, la bo&icirc;te de dialogue V&eacute;rifier l'orthographe s'affiche.
2 S&eacute;lectionnez l'option correspondant au traitement que vous souhaitez appliquer &agrave; l'occurrence.
Ajouter Ajoute le mot non reconnu &agrave; votre dictionnaire personnel.
Ignorer Ignore cette occurrence du mot non reconnu.
Remplacer Remplace cette occurrence du mot non reconnu par le texte que vous tapez dans la zone de texte
Remplacer par, ou par le mot s&eacute;lectionn&eacute; dans la liste Suggestions.
Tout ignorer Ignore toutes les occurrences du mot non reconnu.
Tout remplacer Remplace toutes les occurrences du mot non reconnu.
Remarque : Dreamweaver ne permet pas de supprimer les entr&eacute;es qui ont &eacute;t&eacute; ajout&eacute;es aux dictionnaires personnels.
Importation de donn&eacute;es tabulaires
Vous pouvez importer des donn&eacute;es tabulaires dans un document en enregistrant d'abord ces fichiers (tels que des
fichiers Microsoft Excel ou d'une base de donn&eacute;es) sous forme de fichiers texte d&eacute;limit&eacute;s.
Vous pouvez importer et mettre en forme des donn&eacute;es tabulaires, ainsi qu'importer du text &agrave; partir de documents
HTML Microsoft Word.
Vous pouvez &eacute;galement ajouter du texte provenant d'un document Microsoft Excel dans un document Dreamweaver
en important le contenu du fichier Excel dans une page Web.
1 Choisissez Fichier &gt; Importer &gt; Importer les donn&eacute;es tabulaires ou Insertion &gt; Objets du tableau &gt; Importer les
donn&eacute;es tabulaires.
2 Recherchez le fichier souhait&eacute; ou entrez son nom dans la zone de texte.
3 S&eacute;lectionnez le d&eacute;limiteur utilis&eacute; lors de l'enregistrement du fichier en tant que texte d&eacute;limit&eacute;. Les options sont Tab,
Virgule, Point-virgule, Deux points et Autre.
Si vous s&eacute;lectionnez Autre, un champ vierge s'affiche &agrave; c&ocirc;t&eacute; de l'option. Entrez le caract&egrave;re utilis&eacute; comme d&eacute;limiteur.
4 Utilisez les options restantes pour formater ou d&eacute;finir le tableau dans lequel importer les donn&eacute;es, puis cliquez sur OK.
Derni&egrave;re mise &agrave; jour le 4/5/2011
235
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Voir aussi
&laquo; Ouverture et modification de documents existants &raquo; &agrave; la page 72
&laquo; Importation et exportation de donn&eacute;es tabulaires &raquo; &agrave; la page 186
Importation de documents Microsoft Office (Windows uniquement)
Vous pouvez ins&eacute;rer le contenu d'un document Microsoft Word ou Excel dans une page Web nouvelle ou existante.
Lorsque vous importez un document Word ou Excel, Dreamweaver re&ccedil;oit le code HTML converti et l'ins&egrave;re dans votre
page Web. La taille du fichier, apr&egrave;s r&eacute;ception du code HTML converti par Dreamweaver, doit &ecirc;tre inf&eacute;rieure &agrave; 300 Ko.
Au lieu d'importer tout le contenu d'un fichier, vous pouvez &eacute;galement coller une partie du document Word et
prot&eacute;ger son formatage.
Remarque : Si vous utilisez Microsoft Office 97, il n'est pas possible d'importer le contenu d'un document Word ou Excel.
Vous devez ins&eacute;rer un lien vers le document.
1 Ouvrez la page Web dans laquelle vous souhaitez copier le document Word ou Excel.
2 En mode Cr&eacute;ation, proc&eacute;dez de l'une des mani&egrave;res suivantes pour s&eacute;lectionner le fichier :
• D&eacute;placez le fichier de son emplacement actuel vers la page o&ugrave; le contenu doit s'afficher.
• Choisissez Fichier &gt; Importer &gt; Document Word ou Fichier &gt; Importer &gt; Document Excel.
3 Dans la bo&icirc;te de dialogue Ins&eacute;rer un document, recherchez le fichier &agrave; ajouter, s&eacute;lectionnez une option de
formatage dans le menu Mise en forme situ&eacute; dans le bas de la bo&icirc;te de dialogue, puis cliquez sur Ouvrir.
Texte seul Permet d'ins&eacute;rer du texte non format&eacute;. Si le texte d'origine est mis en forme, tout le formatage est supprim&eacute;.
Texte structur&eacute; Permet d'ins&eacute;rer du texte en conservant sa structure, mais sans le formatage de base. Par exemple, vous
pouvez coller un texte et conserver la structure des paragraphes, des listes et des tableaux, mais pas les mises en gras,
italiques et autres formatages.
Texte structur&eacute; avec formatage de base Permet d'ins&eacute;rer du texte structur&eacute; et du texte HTML avec une mise en forme
simple (tel que des paragraphes et des tableaux, ainsi que du texte mis en forme avec les balisesb, i, u, strong, em, hr,
abbr ou acronym tag).
Texte structur&eacute; avec formatage complet Permet d'ins&eacute;rer du texte en conservant toute sa structure, son formatage
HTML et ses styles CSS.
Nettoyage des espaces inter-paragraphes de Word Permet d'&eacute;liminer les espaces superflus entre les paragraphes
lorsque vous collez le texte alors que l'option Texte structur&eacute; ou Mise en forme de base est s&eacute;lectionn&eacute;e.
Le contenu du document Word ou Excel s'affiche dans votre page.
Cr&eacute;ation d'un lien vers un document Word ou Excel
Vous pouvez ins&eacute;rer un lien vers un document Microsoft Word ou Excel dans une page existante.
1 Ouvrez la page o&ugrave; le lien doit &ecirc;tre affich&eacute;.
2 Faites glisser le fichier de son emplacement actuel vers la page Dreamweaver, en pla&ccedil;ant le lien &agrave; l'emplacement
voulu.
3 S&eacute;lectionnez Cr&eacute;er un lien, puis cliquez sur OK.
4 Si le document vers lequel vous cr&eacute;ez un lien r&eacute;side hors du dossier racine de votre site, Dreamweaver vous invite
&agrave; le copier dans ce dossier.
Derni&egrave;re mise &agrave; jour le 4/5/2011
236
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
En copiant le document dans le dossier racine du site, vous &ecirc;tes assur&eacute; que le document sera disponible lors de la
publication du site Web.
5 Lorsque vous chargez votre page sur le serveur Web, vous devez &eacute;galement charger le fichier Word ou Excel.
Votre page contient d&eacute;sormais un lien vers le document Word ou Excel. Le texte du lien est le nom du fichier li&eacute;. Si
vous le souhaitez, vous pouvez modifier ce texte dans la fen&ecirc;tre du document.
A propos du formatage de texte (CSS et HTML)
Les m&eacute;thodes de formatage du texte dans Dreamweaver s'apparentent &agrave; celles d'un logiciel de traitement de texte
standard. Vous pouvez d&eacute;finir le style de formatage par d&eacute;faut (Paragraphe, En-t&ecirc;te 1, En-t&ecirc;te 2, etc.) pour un bloc de
texte, modifier la police, la taille la couleur et l'alignement du texte s&eacute;lectionn&eacute; ou appliquer des styles de texte tels que
gras, italique, code (texte &agrave; chasse fixe) et soulign&eacute;.
Dreamweaver comprend deux inspecteurs Propri&eacute;t&eacute;s, int&eacute;gr&eacute;s pour n'en faire qu'un : l'inspecteur Propri&eacute;t&eacute;s CSS et
l'inspecteur Propri&eacute;t&eacute;s HTML. Lorsque vous utilisez l'inspecteur Propri&eacute;t&eacute;s CSS, Dreamweaver met en forme le texte
&agrave; l'aide de feuilles de style en cascade. Les styles CSS offrent aux concepteurs et d&eacute;veloppeurs Web un meilleur contr&ocirc;le
de l'aspect de la page Web tout en proposant des fonctions qui permettent d'am&eacute;liorer l'accessibilit&eacute; et de r&eacute;duire la
taille des fichiers. L'inspecteur Propri&eacute;t&eacute;s CSS permet d'acc&eacute;der &agrave; des styles existants et d'en cr&eacute;er de nouveaux.
CSS permet de modifier le style d'une page Web sans compromettre sa structure. En s&eacute;parant les &eacute;l&eacute;ments de
conception visuelle (polices, couleurs, marges, etc.) des &eacute;l&eacute;ments logiques internes &agrave; la structure d'une page Web, CSS
offre aux concepteurs un contr&ocirc;le &agrave; la fois visuel et typographique sans nuire &agrave; l'int&eacute;grit&eacute; du contenu. De plus, d&eacute;finir
une conception typographique et une mise en page depuis un bloc unique de code (sans avoir recours aux cartes
graphiques, aux balises font, aux tableaux et aux GIF d'espacement) permet un chargement plus rapide, simplifie la
maintenance du site et fournit un point central &agrave; partir duquel il est possible de contr&ocirc;ler les attributs de conception
sur plusieurs pages Web.
Vous pouvez stocker les styles cr&eacute;&eacute;s &agrave; l'aide de CSS directement dans le document ou, pour disposer de davantage de
puissance et de flexibilit&eacute;, vous pouvez les stocker dans une feuille de style externe. Si vous associez une feuille de style
externe &agrave; plusieurs pages Web, toutes les pages s'adapteront automatiquement si vous effectuez une modification dans
cette feuille de style. Pour acc&eacute;der &agrave; toutes les r&egrave;gles CSS d'une page, utilisez le panneau Styles CSS (Fen&ecirc;tre &gt; Styles
CSS). Pour acc&eacute;der aux r&egrave;gles qui s'appliquent &agrave; la s&eacute;lection actuelle, utilisez le panneau Styles CSS (mode Actuel) ou
le menu R&egrave;gle cible de l'inspecteur Propri&eacute;t&eacute;s CSS.
Si vous le pr&eacute;f&eacute;rez, vous pouvez mettre en forme le texte de vos pages Web &agrave; l'aide de balises de marquage HTML. Pour
employer des balises HTML au lieu de CSS, mettez le texte en forme &agrave; l'aide de l'inspecteur Propri&eacute;t&eacute;s HTML.
Remarque : Vous pouvez combiner des formatages CSS et HTML 3.2 dans une m&ecirc;me page. Le formatage est appliqu&eacute; de
fa&ccedil;on hi&eacute;rarchique : le formatage HTML 3.2 supplante celui appliqu&eacute; par des feuilles de style CSS externes et le formatage
CSS int&eacute;gr&eacute; dans un document supplante les styles CSS externes.
Voir aussi
&laquo; Ouverture du panneau Styles CSS &raquo; &agrave; la page 137
&laquo; Description des feuilles de style en cascade &raquo; &agrave; la page 129
D&eacute;finition des propri&eacute;t&eacute;s de texte dans l'inspecteur Propri&eacute;t&eacute;s
Vous pouvez utiliser l'inspecteur Propri&eacute;t&eacute;s de texte pour appliquer un formatage HTML ou CSS. Lorsque vous
appliquez un formatage HTML, Dreamweaver ajoute des propri&eacute;t&eacute;s au code HTML du corps de la page. Lorsque vous
appliquez un formatage CSS, Dreamweaver &eacute;crit les propri&eacute;t&eacute;s dans l'en-t&ecirc;te du document ou dans une feuille de style
s&eacute;par&eacute;e.
Derni&egrave;re mise &agrave; jour le 4/5/2011
237
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Remarque : Lorsque vous cr&eacute;ez des styles CSS int&eacute;gr&eacute;s, Dreamweaver ajoute directement le code d'attribut du style au
corps de la page.
Voir aussi
&laquo; Cr&eacute;ation d'une nouvelle r&egrave;gle CSS &raquo; &agrave; la page 139
&laquo; D&eacute;finition des propri&eacute;t&eacute;s CSS &raquo; &agrave; la page 140
&laquo; D&eacute;finition des propri&eacute;t&eacute;s de cellule, de ligne ou de colonne &raquo; &agrave; la page 190
&laquo; D&eacute;finition des pr&eacute;f&eacute;rences g&eacute;n&eacute;rales de Dreamweaver &raquo; &agrave; la page 31
Didacticiel relatif &agrave; l'inspecteur Propri&eacute;t&eacute;s CSS
Modification de r&egrave;gles CSS dans l'inspecteur Propri&eacute;t&eacute;s
1 Si ce n'est pas d&eacute;j&agrave; fait, ouvrez l'inspecteur Propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s) puis cliquez sur le bouton CSS.
2 Effectuez l'une des op&eacute;rations suivantes :
• Placez le point d'insertion dans un bloc de texte qui a &eacute;t&eacute; mis en forme &agrave; l'aide d'une r&egrave;gle que vous voulez modifier.
La r&egrave;gle s'affiche dans le menu R&egrave;gle cible.
• Choisissez une r&egrave;gle dans le menu R&egrave;gle cible.
3 Apportez les modifications d&eacute;sir&eacute;es &agrave; la r&egrave;gle &agrave; l'aide des diff&eacute;rentes options de l'inspecteur Propri&eacute;t&eacute;s CSS.
R&egrave;gle cible La r&egrave;gle que vous modifiez dans l'inspecteur Propri&eacute;t&eacute;s CSS. Lorsqu'un style existant est appliqu&eacute; au texte,
la r&egrave;gle qui influe sur le format du texte s'affiche lorsque vous cliquez dans le texte sur la page. Vous pouvez &eacute;galement
utiliser le menu R&egrave;gle cible pour cr&eacute;er de nouvelles r&egrave;gles CSS et de nouveaux styles int&eacute;gr&eacute;s, ou pour appliquer des
classes existantes au texte s&eacute;lectionn&eacute;. Si vous cr&eacute;ez une nouvelle r&egrave;gle, vous devez remplir la bo&icirc;te de dialogue
Nouvelle r&egrave;gle CSS. Pour plus d'informations, consultez les liens dans le bas de cette rubrique.
Modifier la r&egrave;gle Ouvre la bo&icirc;te de dialogue D&eacute;finition des r&egrave;gles CSS pour la r&egrave;gle cible. Par contre, si vous choisissez
Nouvelle r&egrave;gle CSS dans le menu R&egrave;gle cible puis que vous cliquez sur le bouton Modifier la r&egrave;gle, Dreamweaver ouvre
la bo&icirc;te de dialogue D&eacute;finition de nouvelle r&egrave;gle CSS.
Panneau CSS Ouvre le panneau Styles CSS et affiche les propri&eacute;t&eacute;s de la r&egrave;gle cible en mode Actuel.
Police Modifie la police de la r&egrave;gle cible.
Taille D&eacute;finit la taille de police de la r&egrave;gle cible.
Couleur du texte D&eacute;finit la couleur s&eacute;lectionn&eacute; comme couleur de police dans la r&egrave;gle cible. S&eacute;lectionnez une couleur
s&eacute;curis&eacute;e pour le Web en cliquant sur le s&eacute;lecteur de couleur ou tapez directement une valeur hexad&eacute;cimale (par
exemple, #FF0000) dans le champ de texte adjacent.
Gras Ajoute la propri&eacute;t&eacute; gras &agrave; la r&egrave;gle cible.
Italique Ajoute la propri&eacute;t&eacute; italique &agrave; la r&egrave;gle cible.
Aligner &agrave; gauche, Centrer et Aligner &agrave; droite Ajoute les propri&eacute;t&eacute;s d'alignement respectives &agrave; la r&egrave;gle cible.
Remarque : Les propri&eacute;t&eacute;s Police, Taille, Couleur du texte, Gras, Italique et Alignement affichent toujours les propri&eacute;t&eacute;s
de la r&egrave;gle qui s'applique &agrave; la s&eacute;lection actuelle dans la fen&ecirc;tre de document. Lorsque vous modifiez l'une de ces propri&eacute;t&eacute;s,
vous influez sur la r&egrave;gle cible.
Vous trouverez un didacticiel vid&eacute;o sur l'utilisation de l'inspecteur Propri&eacute;t&eacute;s CSS &agrave; l'adresse
www.adobe.com/go/lrvid4041_dw_fr.
Derni&egrave;re mise &agrave; jour le 4/5/2011
238
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
D&eacute;finition de formatage HTML dans l'inspecteur Propri&eacute;t&eacute;s
1 Si ce n'est pas d&eacute;j&agrave; fait, ouvrez l'inspecteur Propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s) puis cliquez sur le bouton HTML.
2 S&eacute;lectionnez le texte que vous souhaitez mettre en forme.
3 D&eacute;finissez les options que vous voulez appliquer au texte s&eacute;lectionn&eacute; :
Format D&eacute;finit le style de paragraphe du texte s&eacute;lectionn&eacute;. Paragraphe applique un format par d&eacute;faut pour une balise
&lt;p&gt;, En-t&ecirc;te 1 ajoute une balise H1, et ainsi de suite.
ID Attribue un ID &agrave; votre s&eacute;lection. Le menu ID pr&eacute;sente (le cas &eacute;ch&eacute;ant) tous les ID non utilis&eacute;s et d&eacute;clar&eacute;s dans le
document.
Classe Affiche le style de classe appliqu&eacute; au texte s&eacute;lectionn&eacute;. Si aucun style n'est appliqu&eacute; &agrave; la s&eacute;lection, la mention
Aucun styleCSS appara&icirc;t dans le menu d&eacute;roulant. Si plusieurs styles sont appliqu&eacute;s &agrave; la s&eacute;lection, le menu est vide.
Le menu Style permet d'effectuer les op&eacute;rations suivantes :
• S&eacute;lectionnez le style &agrave; appliquer &agrave; la s&eacute;lection.
• Choisissez Aucun pour ne plus appliquer le style s&eacute;lectionn&eacute;.
• Pour renommer le style, choisissez Renommer.
• S&eacute;lectionnez Attacher une feuille de style pour ouvrir une bo&icirc;te de dialogue qui vous permet d'attacher une feuille
de style externe &agrave; la page.
Gras Applique soit &lt;b&gt; soit &lt;strong&gt; au texte s&eacute;lectionn&eacute; en fonction de la pr&eacute;f&eacute;rence de style d&eacute;finie dans la
cat&eacute;gorie G&eacute;n&eacute;ral de la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences.
Italique Applique soit &lt;i&gt; soit &lt;em&gt; au texte s&eacute;lectionn&eacute; en fonction de la pr&eacute;f&eacute;rence de style d&eacute;finie dans la cat&eacute;gorie
G&eacute;n&eacute;ral de la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences.
Liste non ordonn&eacute;e Cr&eacute;e une liste &agrave; puces &agrave; partir du texte s&eacute;lectionn&eacute;. Si aucun texte n'est s&eacute;lectionn&eacute;, une nouvelle
liste &agrave; puces est ouverte.
Liste num&eacute;rot&eacute;e Cr&eacute;e une liste num&eacute;rot&eacute;e &agrave; partir du texte s&eacute;lectionn&eacute;. Si aucun texte n'est s&eacute;lectionn&eacute;, une nouvelle
liste num&eacute;rot&eacute;e est ouverte.
Blockquote et Supprimer Blockquote Augmente ou supprime la mise en retrait du texte s&eacute;lectionn&eacute;, en ins&eacute;rant ou
supprimant la balise blockquote. Au sein d'une liste, l'ajout d'un retrait cr&eacute;e une liste imbriqu&eacute;e et sa suppression
ram&egrave;ne les &eacute;l&eacute;ments de la liste au niveau parent.
Lien Cr&eacute;e une liste &agrave; puces &agrave; partir du texte s&eacute;lectionn&eacute;. Cliquez sur l'ic&ocirc;ne de dossier pour rechercher un fichier de
votre site, faites glisser l'ic&ocirc;ne Pointer vers un fichier sur un fichier du panneau Fichiers ou faites glisser un fichier du
panneau Fichiers sur la zone.
Titre D&eacute;finit l'infobulle textuelle d'un lien hypertexte.
Cible Sp&eacute;cifie la fen&ecirc;tre ou le cadre dans lequel sera charg&eacute; le document li&eacute; :
•
_blank charge le document li&eacute; dans une nouvelle fen&ecirc;tre, sans nom, du navigateur.
•
_parent charge le document li&eacute; dans le jeu de cadres parent (ou dans la fen&ecirc;tre parente) du cadre contenant le lien.
Si le cadre contenant le lien n'est pas imbriqu&eacute;, le document li&eacute; sera charg&eacute; dans la fen&ecirc;tre de base du navigateur.
•
_self charge le document li&eacute; dans le m&ecirc;me cadre (ou la m&ecirc;me fen&ecirc;tre) que le lien. Il s'agit de la cible par d&eacute;faut,
de sorte qu'il est le plus souvent inutile de la sp&eacute;cifier.
•
_top charge le document li&eacute; dans la fen&ecirc;tre de base du navigateur, en supprimant tous les cadres.
Derni&egrave;re mise &agrave; jour le 4/5/2011
239
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Utilisation de formatage HTML
M&ecirc;me si CSS est la m&eacute;thode de formatage de texte privil&eacute;gi&eacute;e, Dreamweaver permet d'employer du code HTML &agrave; cette fin.
Mise en forme des paragraphes
Utilisez le menu Format de l'inspecteur Propri&eacute;t&eacute;s HTML ou le sous-menu Format &gt; Format de paragraphe pour
appliquer des balises standard de paragraphe et d'en-t&ecirc;te.
1 Placez le point d'insertion dans le paragraphe, ou s&eacute;lectionnez une partie du texte du paragraphe.
2 Choisissez Texte &gt; Format de paragraphe ou le menu Format de l'inspecteur Propri&eacute;t&eacute;s, puis s&eacute;lectionnez une
option :
• Choisissez un format de paragraphe (par exemple, En-t&ecirc;te 1, En-t&ecirc;te 2, Texte pr&eacute;-format&eacute;, etc.). La balise HTML
associ&eacute;e au style choisi (par exemple, h1 pour En-t&ecirc;te 1, h2 pour En-t&ecirc;te 2, pre pour Texte pr&eacute;-format&eacute;, etc.) est
appliqu&eacute;e &agrave; tout le paragraphe.
• Choisissez Aucun pour supprimer un format de paragraphe.
Lorsque vous appliquez une balise d'en-t&ecirc;te &agrave; un paragraphe, Dreamweaver ins&egrave;re automatiquement la ligne de texte
suivante comme un paragraphe. Pour modifier ce param&egrave;tre, choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou
Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh), puis assurez-vous que l'option Passer en paragraphe normal apr&egrave;s le titre est
d&eacute;sactiv&eacute;e dans les Options d'&eacute;dition de la cat&eacute;gorie G&eacute;n&eacute;ral.
Voir aussi
&laquo; D&eacute;finition des propri&eacute;t&eacute;s de texte dans l'inspecteur Propri&eacute;t&eacute;s &raquo; &agrave; la page 236
&laquo; D&eacute;finition des propri&eacute;t&eacute;s CSS &raquo; &agrave; la page 140
Modification de la couleur du texte
Vous pouvez modifier la couleur par d&eacute;faut de tout le texte d'une page, ou la couleur du texte s&eacute;lectionn&eacute; sur la page.
Voir aussi
&laquo; Utilisation du s&eacute;lecteur de couleur &raquo; &agrave; la page 224
D&eacute;finition des couleurs par d&eacute;faut du texte sur une page
❖ Choisissez Modifier &gt; Propri&eacute;t&eacute;s de la page &gt; Apparence (HTML) ou Liens (HTML), puis choisissez la couleur
pour les options Couleur du texte, Couleur du lien, Liens visit&eacute;s et Liens actifs.
Remarque : La couleur du lien actif est la couleur que prend un lien lorsque l'utilisateur clique dessus. Il est possible que
certains navigateurs Web n'utilisent pas la couleur que vous avez sp&eacute;cifi&eacute;e.
Modification de la couleur du texte s&eacute;lectionn&eacute;
❖ Choisissez Format &gt; Couleur, s&eacute;lectionnez une couleur dans le s&eacute;lecteur syst&egrave;me, puis cliquez sur OK.
Alignement du texte
Vous pouvez aligner du texte &agrave; l'aide de code HTML en utilisant le menu Format &gt; Aligner. Vous pouvez centrer un
&eacute;l&eacute;ment sur la page &agrave; l'aide de la commande Format &gt; Aligner &gt; Centre.
Alignement de text sur une page
1 S&eacute;lectionnez le texte &agrave; aligner ou ins&eacute;rez le pointeur au d&eacute;but du texte.
2 Choisissez Format &gt; Aligner, puis s&eacute;lectionnez une commande d'alignement.
Derni&egrave;re mise &agrave; jour le 4/5/2011
240
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Centrage des &eacute;l&eacute;ments de page
1 S&eacute;lectionnez l'&eacute;l&eacute;ment (image, plug-in, tableau ou tout autre &eacute;l&eacute;ment de la page) que vous d&eacute;sirez aligner au centre.
2 Choisissez Format &gt; Aligner &gt; Centre.
Remarque : Vous pouvez aligner et centrer des blocs de texte complets ; par contre, vous ne pouvez pas aligner ou centrer
une partie d'un en-t&ecirc;te ou d'un paragraphe.
Mise en retrait du texte
La commande Retrait applique la balise HTML blockquote &agrave; un paragraphe de texte, ce qui a pour effet de mettre en
retrait le texte de chaque c&ocirc;t&eacute; de la page.
1 Placez le point d'insertion &agrave; l'emplacement o&ugrave; ins&eacute;rer le retrait.
2 Choisissez Format &gt; Retrait ou Retrait n&eacute;gatif, ou choisissez Liste &gt; Retrait ou Retrait n&eacute;gatif dans le menu.
Remarque : Un paragraphe accepte plusieurs indentations. Chaque application de cette commande produit un retrait
suppl&eacute;mentaire du texte de chaque c&ocirc;t&eacute; du document.
Application de styles de police
Vous pouvez utiliser HTML pour appliquer un formatage de texte &agrave; une seule lettre, &agrave; des paragraphes entiers du site
ou encore &agrave; des blocs de texte. Le menu Format permet de d&eacute;finir ou de modifier les caract&eacute;ristiques de police du texte
s&eacute;lectionn&eacute;. Vous pouvez d&eacute;finir le type, le style (par exemple, gras ou italique) et la taille d'une police de caract&egrave;res.
1 S&eacute;lectionnez le texte. Si aucun texte n'est s&eacute;lectionn&eacute;, l'option s'appliquera au texte que vous taperez ensuite.
2 Faites votre choix parmi les options suivantes :
• Pour modifier la police, choisissez la combinaison d&eacute;sir&eacute;e dans le menu Format &gt; Police. Choisissez Par d&eacute;faut pour
supprimer les polices pr&eacute;alablement appliqu&eacute;es. Cette option applique la police par d&eacute;faut au texte s&eacute;lectionn&eacute; (en
l'occurrence, la police par d&eacute;faut du navigateur ou la police affect&eacute;e &agrave; cette balise dans une feuille de style CSS).
• Pour modifier le style de police, s&eacute;lectionnez le style d&eacute;sir&eacute; (gras, italique, soulign&eacute;, etc.) dans le menu Format &gt;
Style.
Voir aussi
&laquo; Cr&eacute;ation de pages avec CSS &raquo; &agrave; la page 129
&laquo; Cr&eacute;ation d'une nouvelle r&egrave;gle CSS &raquo; &agrave; la page 139
Modification du nom d'une classe &agrave; partir de l'inspecteur Propri&eacute;t&eacute;s HTML
Dreamweaver affiche toutes les classes disponibles pour votre page dans le menu Classe de l'inspecteur Propri&eacute;t&eacute;s
HTML. Vous pouvez renommer des styles dans cette liste en choisissant l'option Renommer, &agrave; la fin de la liste des
styles de classes.
1 Choisissez Renommer dans le menu d&eacute;roulant Style de l'inspecteur Propri&eacute;t&eacute;s du texte.
2 S&eacute;lectionnez le style &agrave; renommer dans le menu contextuel Renommer un style.
3 Entrez un nouveau nom dans la zone Nouveau nom, puis cliquez sur OK.
Derni&egrave;re mise &agrave; jour le 4/5/2011
241
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Ajout d'espacements de paragraphe
Dreamweaver fonctionne comme une application classique de traitement de texte : Appuyez sur la touche Entr&eacute;e
(Windows) ou Retour (Macintosh) pour commencer un nouveau paragraphe. Les navigateurs Web ins&egrave;rent
automatiquement une ligne vierge entre les paragraphes. Vous pouvez vous-m&ecirc;me espacer les paragraphes d'une ligne
vierge en ins&eacute;rant un saut de ligne.
Ajout d'un saut de paragraphe
❖ Appuyez sur la touche Entr&eacute;e (Windows) ou Retour (Macintosh).
Ajout d'un saut de ligne
❖ Effectuez l'une des op&eacute;rations suivantes :
• Appuyez sur les touches Maj+Entr&eacute;e (Windows) ou Maj+Retour (Macintosh).
• Choisissez Insertion &gt; HTML &gt; Caract&egrave;res sp&eacute;ciaux &gt; Saut de ligne.
• Dans la cat&eacute;gorie Texte du panneau Insertion, cliquez sur le bouton Caract&egrave;res et cliquez sur l'ic&ocirc;ne Saut de ligne.
Utilisation de barres horizontales
Les barres (lignes) horizontales sont utiles pour organiser les informations. Sur une page, le texte et les objets peuvent
&ecirc;tre visuellement s&eacute;par&eacute;s par une ou plusieurs barres.
Cr&eacute;ation d'une barre horizontale
1 Dans la fen&ecirc;tre de document, placez le curseur l&agrave; o&ugrave; vous voulez ins&eacute;rer une barre horizontale.
2 Choisissez Insertion &gt; HTML &gt; Barre horizontale.
Modification d'une barre horizontale
1 Dans la fen&ecirc;tre de document, s&eacute;lectionnez la barre horizontale.
2 Choisissez Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s pour ouvrir l'inspecteur Propri&eacute;t&eacute;s et modifier les propri&eacute;t&eacute;s selon vos besoins :
La zone de texte ID Permet de d&eacute;finir un ID pour la r&egrave;gle horizontale.
L et H Sp&eacute;cifient la largeur et la hauteur de la barre, en pixels ou en pourcentage de la taille de la page.
Alignement Sp&eacute;cifie l'alignement de la barre (Par d&eacute;faut, Gauche, Centre ou Droite). Ce param&eacute;trage ne s'applique
que si la largeur de la barre est inf&eacute;rieure &agrave; celle de la fen&ecirc;tre du navigateur.
Ombrage Sp&eacute;cifie si la barre est accompagn&eacute;e d'un effet d'ombre port&eacute;e. D&eacute;sactivez cette option pour dessiner la barre
en couleur pleine.
Classe Permet de joindre une feuille de style ou d'appliquer une classe &agrave; partir d'une feuille de style d&eacute;j&agrave; jointe.
Modification des combinaisons de polices
Pour d&eacute;finir la combinaison de polices qui appara&icirc;t dans l'inspecteur Propri&eacute;t&eacute;s et dans Format &gt; Police, utilisez la
commande Modifier la liste des polices.
Les combinaisons de polices de caract&egrave;res d&eacute;terminent la fa&ccedil;on dont le texte des pages Web est affich&eacute; par les
navigateurs. Ces derniers utilisent, au sein de la combinaison de polices choisie, la premi&egrave;re police install&eacute;e sur
l'ordinateur de l'utilisateur. Si aucune des polices de cette combinaison n'est install&eacute;e, le navigateur affiche le texte avec
la police par d&eacute;faut indiqu&eacute;e dans ses pr&eacute;f&eacute;rences.
Derni&egrave;re mise &agrave; jour le 4/5/2011
242
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Modification des combinaisons de polices
1 Choisissez Format &gt; Police &gt; Modifier la liste des polices.
2 Choisissez la combinaison de polices dans la liste qui appara&icirc;t en haut de la bo&icirc;te de dialogue.
Les polices de la combinaison s&eacute;lectionn&eacute;e apparaissent dans la liste Polices choisies, dans le coin inf&eacute;rieur gauche de
la bo&icirc;te de dialogue. Une liste de toutes les polices disponibles install&eacute;es sur votre syst&egrave;me se trouve &agrave; sa droite.
3 Effectuez l'une des op&eacute;rations suivantes :
• Pour ajouter ou retirer des polices d'une combinaison, cliquez selon le cas sur l'un des boutons &lt;&lt; ou &gt;&gt; qui se
trouvent entre les listes Polices choisies et Polices disponibles.
• Pour ajouter ou supprimer une combinaison de polices, cliquez selon le cas sur l'un des boutons plus (+) ou moins
(-) qui se trouvent dans la partie sup&eacute;rieure de la bo&icirc;te de dialogue.
• Pour ajouter une police qui n'est pas install&eacute;e sur votre ordinateur, tapez son nom dans le champ de texte en dessous
de la liste Polices disponibles, et cliquez sur le bouton&lt;&lt; pour ajouter cette police &agrave; la combinaison courante. Il peut
&ecirc;tre utile d'ajouter une police qui n'est pas install&eacute;e sur votre syst&egrave;me, par exemple pour indiquer une police
sp&eacute;cifique &agrave; Windows lorsque vous travaillez sur un Macintosh.
• Pour d&eacute;placer la combinaison de polices au sein de la liste, cliquez sur les boutons fl&eacute;ch&eacute;s en haut de la bo&icirc;te de
dialogue.
Ajout d'une nouvelle combinaison &agrave; la liste des polices
1 Choisissez Format &gt; Police &gt; Modifier la liste des polices.
2 S&eacute;lectionnez une police dans la liste Polices disponibles, et cliquez sur le bouton &lt;&lt; pour l'ins&eacute;rer dans la liste
Polices choisies.
3 R&eacute;p&eacute;tez l'&eacute;tape 2 pour chaque police n&eacute;cessaire dans la combinaison.
Pour ajouter une police qui n'est pas install&eacute;e sur votre ordinateur, tapez son nom dans le champ de texte en dessous
de la liste Polices disponibles, et cliquez sur le bouton&lt;&lt; pour ajouter cette police &agrave; la combinaison courante. Il peut
&ecirc;tre utile d'ajouter une police qui n'est pas install&eacute;e sur votre syst&egrave;me, par exemple pour indiquer une police sp&eacute;cifique
&agrave; Windows lorsque vous travaillez sur un Macintosh.
4 Lorsque vous avez fini de choisir des polices, s&eacute;lectionnez une famille de polices g&eacute;n&eacute;rique dans la liste Polices
disponibles et cliquez sur le bouton &lt;&lt; pour l'ins&eacute;rer dans la liste Polices choisies.
Les familles g&eacute;n&eacute;riques de polices sont les suivantes : cursive, fantaisie, monospace (espacement non proportionnel),
sans-serif (espacement proportionnel sans empattement) et serif (espacement proportionnel avec empattement). Si
aucune des polices de la liste Polices disponibles n'est disponible sur l'ordinateur de l'utilisateur, le texte appara&icirc;t dans
la police par d&eacute;faut associ&eacute;e &agrave; la famille de polices g&eacute;n&eacute;rique. Par exemple, avec la plupart des syst&egrave;mes d'exploitation,
la police non proportionnelle (monospace) par d&eacute;faut est Courier.
Insertion de dates
Dreamweaver comporte un objet Date pratique qui ins&egrave;re la date actuelle dans le format de votre choix (avec ou sans
heure), ainsi qu'une option pour mettre &agrave; jour cette date lorsque vous enregistrez le fichier.
Remarque : Les dates et heures affich&eacute;es dans la bo&icirc;te de dialogue Ins&eacute;rer date ne repr&eacute;sentent pas la date actuelle ni ne
refl&egrave;tent les dates/heures visualis&eacute;es par un visiteur lorsqu'il affiche votre site. Elles ne sont qu'un exemple de la mani&egrave;re
dont vous souhaitez afficher ces informations.
1 Dans la fen&ecirc;tre de document, placez le curseur l&agrave; o&ugrave; vous d&eacute;sirez ins&eacute;rer la date.
Derni&egrave;re mise &agrave; jour le 4/5/2011
243
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
2 Effectuez l'une des op&eacute;rations suivantes :
• Choisissez Insertion &gt; Date.
• Dans la cat&eacute;gorie Commun du panneau Insertion, cliquez sur le bouton Date.
3 Dans la bo&icirc;te de dialogue qui appara&icirc;t alors, s&eacute;lectionnez un format d'affichage pour le jour de la semaine, pour la
date et pour l'heure.
4 Si vous d&eacute;sirez que cette date soit actualis&eacute;e &agrave; chaque nouvel enregistrement du document, activez l'option Mettre
&agrave; jour automatiquement lors de l'enregistrement. Si vous pr&eacute;f&eacute;rez que la date soit ins&eacute;r&eacute;e comme du texte normal
et ne soit jamais actualis&eacute;e, d&eacute;sactivez cette option.
5 Cliquez sur OK pour ins&eacute;rer la date.
Si vous avez s&eacute;lectionn&eacute; Mettre &agrave; jour automatiquement lors de l'enregistrement, vous pouvez modifier le format de
la date apr&egrave;s l'avoir ins&eacute;r&eacute;e dans le document, en cliquant sur le texte mis en forme et en s&eacute;lectionnant Modifier le
format de date dans l'inspecteur Propri&eacute;t&eacute;s.
Ajout et modification d'images
A propos des images
Diff&eacute;rents types de formats de fichiers graphiques existent, mais trois formats de fichiers graphiques sont
g&eacute;n&eacute;ralement utilis&eacute;s dans les pages Web : GIF, JPEG et PNG. Les formats de fichier GIF et JPEG sont les plus
r&eacute;pandus ; ils peuvent &ecirc;tre affich&eacute;s dans la plupart des navigateurs.
Les fichiers PNG sont les plus adapt&eacute;s pour la plupart des types de graphiques Web en raison de leur souplesse et de
leur taille r&eacute;duite ; toutefois, l'affichage d'images PNG n'est que partiellement pris en charge dans Microsoft Internet
Explorer (4.0 et versions ult&eacute;rieures) et dans Netscape Navigator (4.04 et versions ult&eacute;rieures). A moins que votre site
ne soit sp&eacute;cifiquement destin&eacute; &agrave; des navigateurs prenant en charge le format PNG, utilisez des fichiers GIF ou JPEG
afin de cibler un plus large public.
GIF (Graphic Interchange Format) Les fichiers GIF utilisent un maximum de 256 couleurs et sont destin&eacute;s &agrave; l'affichage
d'images &agrave; tons non continus ou d'images comportant de larges zones de couleurs unies, telles que les barres de
navigation, les boutons, les ic&ocirc;nes, les logos ou d'autres images contenant des tons et des couleurs uniformes.
JPEG (Joint Photographic Experts Group) Le format de fichier JPEG est le format sup&eacute;rieur destin&eacute; aux photographies
ou aux images &agrave; tons continus, car de tels fichiers peuvent contenir des millions de couleurs. Lorsque la qualit&eacute; d'un
fichier JPEG augmente, sa taille et son temps de t&eacute;l&eacute;chargement augmentent &eacute;galement. Il est souvent possible
d'obtenir un bon compromis entre la qualit&eacute; de l'image et sa taille de fichier en compressant un fichier JPEG.
Le format de fichier PNG (Portable Network Group) Le format de fichier PNG est un format de remplacement non
brevet&eacute; pour les fichiers GIF, qui inclut la prise en charge des images &agrave; couleurs index&eacute;es, en niveaux de gris et en
couleurs vraies ainsi que la prise en charge du canal alpha pour la transparence. PNG est le format de fichier natif
d'Adobe&reg; Fireworks&reg;. Les fichiers PNG conservent toutes les informations d'origine sur les calques, les vecteurs, les
couleurs et les effets (comme par exemple des ombres port&eacute;es) et tous ces &eacute;l&eacute;ments peuvent &ecirc;tre modifi&eacute;s &agrave; tout
moment. Les fichiers doivent avoir l'extension .png pour &ecirc;tre reconnus comme fichiers PNG par Dreamweaver.
Insertion d'une image
Lorsque vous ins&eacute;rez une image dans un document Dreamweaver, le programme cr&eacute;e une r&eacute;f&eacute;rence &agrave; ce fichier
d'image dans le code source HTML. Pour que cette r&eacute;f&eacute;rence soit correcte, le fichier d'image doit r&eacute;sider sur le site.
Dans le cas contraire, Dreamweaver vous invite &agrave; copier le fichier sur le site.
Derni&egrave;re mise &agrave; jour le 4/5/2011
244
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Vous pouvez &eacute;galement ins&eacute;rer des images de fa&ccedil;on dynamique. Les images dynamiques sont des images qui changent
souvent ; par exemple, les syst&egrave;mes de rotation de banni&egrave;res publicitaires qui s&eacute;lectionnent les banni&egrave;res de mani&egrave;re
al&eacute;atoire, puis affichent l'image de la banni&egrave;re s&eacute;lectionn&eacute;e lors de l'affichage d'une page.
Apr&egrave;s avoir ins&eacute;r&eacute; une image, vous pouvez d&eacute;finir les options d'accessibilit&eacute; aux balises d'image qui pourront &ecirc;tre lues
par les lecteurs d'&eacute;cran destin&eacute;s aux utilisateurs malvoyants. Ces attributs peuvent &ecirc;tre modifi&eacute;s dans le code HTML.
Vous trouverez un didacticiel consacr&eacute; &agrave; l'insertion d'images &agrave; l'adresse www.adobe.com/go/vid0148_fr.
1 Placez le point d'insertion &agrave; l'endroit o&ugrave; doit appara&icirc;tre l'image dans la fen&ecirc;tre de document, puis proc&eacute;dez de l'une
des mani&egrave;res suivantes :
• Dans la cat&eacute;gorie Commun du panneau Insertion, cliquez sur l'ic&ocirc;ne Images
.
• Dans la cat&eacute;gorie Commun du panneau Insertion, cliquez sur le bouton Images et s&eacute;lectionnez l'ic&ocirc;ne Image.
Lorsque l'ic&ocirc;ne Image est affich&eacute;e dans le panneau Insertion, vous pouvez la faire glisser vers la fen&ecirc;tre du
document (ou la fen&ecirc;tre du mode Code si vous travaillez sur le code).
• Choisissez Insertion &gt; Image.
• Faites glisser une image &agrave; partir du panneau Actifs (Fen&ecirc;tre &gt; Actifs) vers l'emplacement souhait&eacute; dans la fen&ecirc;tre
de document, puis passez &agrave; l'&eacute;tape 3.
• Faites glisser une image &agrave; partir du panneau Fichiers vers l'emplacement souhait&eacute; dans la fen&ecirc;tre de document, puis
passez &agrave; l'&eacute;tape 3.
• Faites glisser une image &agrave; partir du bureau vers l'emplacement d&eacute;sir&eacute; sur la page, puis passez &agrave; l'&eacute;tape 3.
2 Dans la bo&icirc;te de dialogue qui s'affiche, proc&eacute;dez de l'une des mani&egrave;res suivantes :
• S&eacute;lectionnez Syst&egrave;me de fichiers pour choisir un fichier d'image.
• S&eacute;lectionnez Source de donn&eacute;es pour choisir une source d'images dynamiques.
• Cliquez sur le bouton Sites et serveurs pour choisir un fichier d'image dans un dossier distant de l'un de vos sites
Dreamweaver.
3 Parcourez l'arborescence pour s&eacute;lectionner l'image ou la source de contenu &agrave; ins&eacute;rer.
Tant que le document sur lequel vous travaillez n'a pas encore &eacute;t&eacute; enregistr&eacute;, Dreamweaver cr&eacute;e automatiquement une
r&eacute;f&eacute;rence d'emplacement de fichier de type file://. Lorsque vous enregistrez le document sur le site, Dreamweaver
convertit cette r&eacute;f&eacute;rence en indiquant un chemin relatif au document.
Remarque : Lors de l'insertion d'images, vous pouvez &eacute;galement utiliser un chemin absolu vers une image qui r&eacute;side sur
un serveur distant (c'est-&agrave;-dire une image qui n'est pas disponible sur le disque dur local). Toutefois, si vous constatez des
probl&egrave;mes de performances lorsque vous travaillez, vous pouvez d&eacute;cider de d&eacute;sactiver l'affichage de l'image en mode
Cr&eacute;ation en d&eacute;s&eacute;lectionnant l'option Commandes &gt; Afficher les fichiers externes.
4 Cliquez sur OK. La bo&icirc;te de dialogue Attributs d'accessibilit&eacute; aux balises d'image s'affiche si elle a &eacute;t&eacute; activ&eacute;e dans
les pr&eacute;f&eacute;rences (Edition &gt; Pr&eacute;f&eacute;rences).
5 Tapez des valeurs dans les zones Texte secondaire et Description longue, puis cliquez sur OK.
• Dans la zone Texte secondaire, entrez un nom ou une br&egrave;ve description de l'image. Le lecteur d'&eacute;cran lit les
informations que vous entrez ici. N'entrez pas plus de 50 caract&egrave;res. Pour de plus longues descriptions, entrez
plut&ocirc;t, dans la zone de texte Description longue, un lien vers un fichier donnant davantage d'informations &agrave; propos
de l'image.
• Dans la zone de texte Description longue, saisissez l'emplacement du fichier &agrave; afficher lorsque l'utilisateur clique
sur l'image ou cliquez sur l'ic&ocirc;ne du dossier pour naviguer jusqu'&agrave; un fichier. Cette zone de texte fournit un lien vers
un fichier qui concerne ou donne davantage d'informations sur l'image.
Derni&egrave;re mise &agrave; jour le 4/5/2011
245
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Remarque : Vous pouvez entrer les informations dans une seule zone de texte ou les deux, selon vos besoins. Le lecteur
d'&eacute;cran lit l'attribut Alt de l'image.
Remarque : Si vous cliquez sur Annuler, l'image s'affiche dans le document, mais Dreamweaver ne lui associe ni balises
ni attributs d'accessibilit&eacute;.
6 Dans l'inspecteur Propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), d&eacute;finissez les propri&eacute;t&eacute;s de l'image.
Voir aussi
&laquo; Cr&eacute;ation d'images dynamiques &raquo; &agrave; la page 604
&laquo; Cartes graphiques &raquo; &agrave; la page 294
&laquo; Optimisation de l'espace de travail pour la conception de pages accessibles &raquo; &agrave; la page 717
&laquo; D&eacute;finition des propri&eacute;t&eacute;s de page &raquo; &agrave; la page 217
Didacticiel sur l'insertion d'images
D&eacute;finition des propri&eacute;t&eacute;s de l'image
L'inspecteur Propri&eacute;t&eacute;s Images vous permet de d&eacute;finir les propri&eacute;t&eacute;s d'une image. Pour voir toutes les propri&eacute;t&eacute;s
illustr&eacute;es, cliquez sur la fl&egrave;che d'agrandissement, dans le coin inf&eacute;rieur droit de l'inspecteur Propri&eacute;t&eacute;s.
1 Choisissez la commande Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s pour afficher l'inspecteur Propri&eacute;t&eacute;s pour une image s&eacute;lectionn&eacute;e.
2 Dans la zone de texte situ&eacute;e au-dessous de l'image miniature, d&eacute;finissez un nom d'image auquel vous pouvez faire
r&eacute;f&eacute;rence lors de l'utilisation d'un comportement Dreamweaver (tel que Permuter une image) ou lors de l'utilisation
d'un langage de script tel que JavaScript ou VBScript.
3 D&eacute;finissez les options de l'image.
L et H La largeur et la hauteur de l'image, en pixels. Dreamweaver met automatiquement &agrave; jour ces zones de texte avec
les dimensions d'origine de l'image lorsque vous ins&eacute;rez une image dans une page.
Si vous d&eacute;finissez pour L (largeur) et H (hauteur) des valeurs qui ne correspondent pas aux dimensions r&eacute;elles de
l'image, celle-ci risque de ne pas s'afficher correctement dans un navigateur (Pour revenir aux valeurs d'origine, cliquez
sur les &eacute;tiquettes de zone de texte L et H ou sur le bouton R&eacute;tablir la taille originale de l'image qui appara&icirc;t &agrave; droite des
zones de texte L et H une fois que vous avez tap&eacute; de nouvelles valeurs.
Remarque : Vous pouvez modifier ces valeurs pour modifier l'&eacute;chelle d'affichage de cette instance de l'image, mais cette
technique ne diminuera pas le temps de chargement, puisque le navigateur chargera la totalit&eacute; de l'image &agrave; son &eacute;chelle
normale avant de la r&eacute;duire. Pour r&eacute;duire le temps de t&eacute;l&eacute;chargement et &ecirc;tre s&ucirc;r que toutes les instances de l'image sont
affich&eacute;es aux m&ecirc;mes dimensions, utilisez une application de retouche d'image pour adapter les proportions de l'image.
Src Sp&eacute;cifie le fichier source de l'image. Tapez le chemin d'acc&egrave;s ou cliquez sur l'ic&ocirc;ne du dossier pour trouver le fichier
source et le s&eacute;lectionner.
Lien Sp&eacute;cifie un lien hypertexte pour l'image. Faites glisser l'ic&ocirc;ne Pointer vers un fichier dans le panneau Fichiers,
cliquez sur l'ic&ocirc;ne de dossier pour rechercher et s&eacute;lectionner un document de votre site ou tapez directement l'URL.
Derni&egrave;re mise &agrave; jour le 4/5/2011
246
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Alignement Aligne l'image et le texte sur la m&ecirc;me ligne.
Sec Sp&eacute;cifie le texte secondaire qui appara&icirc;tra &agrave; la place de l'image dans les navigateurs de type texte seulement, ou
dans les navigateurs dont l'utilisateur a d&eacute;sactiv&eacute; le t&eacute;l&eacute;chargement automatique des images. Pour les utilisateurs
malvoyants qui utilisent un synth&eacute;tiseur vocal avec un navigateur en mode texte, le texte est lu. Dans certains
navigateurs, ce texte appara&icirc;t &eacute;galement lorsque le pointeur se trouve sur l'image.
Nom de la carte et outils Zone r&eacute;active Permettent de nommer et de cr&eacute;er une carte graphique c&ocirc;t&eacute; client
Espace V. et Espace H. Ajoutent un espace, en pixels, le long des c&ocirc;t&eacute;s de l'image. Espace V ajoute un espace le long des
bords sup&eacute;rieur et inf&eacute;rieur d'une image. Espace H ajoute un espace le long des bords gauche et droit d'une image.
Cible Sp&eacute;cifie la fen&ecirc;tre ou le cadre dans lequel la page li&eacute;e devrait &ecirc;tre charg&eacute;e. Cette option n'est pas disponible
lorsque l'image n'est pas li&eacute;e &agrave; un autre fichier. Les noms de tous les cadres dans le jeu de cadres actuel s'affichent dans
la liste Cible. Vous pouvez &eacute;galement choisir parmi les noms de cible r&eacute;serv&eacute;s suivants :
•
_blank charge le fichier li&eacute; dans une nouvelle fen&ecirc;tre, sans nom, du navigateur.
•
_parent charge le fichier li&eacute; dans le jeu de cadres parent, ou dans la fen&ecirc;tre parente du cadre contenant le lien. Si
le cadre contenant le lien n'est pas imbriqu&eacute;, le document li&eacute; sera charg&eacute; dans la fen&ecirc;tre de base du navigateur.
•
_self charge le fichier li&eacute; dans le m&ecirc;me cadre, ou dans la m&ecirc;me fen&ecirc;tre, que le lien. Cette cible &eacute;tant celle par
d&eacute;faut, vous n'avez g&eacute;n&eacute;ralement pas &agrave; la sp&eacute;cifier.
•
_top charge le fichier li&eacute; dans la fen&ecirc;tre de base du navigateur, supprimant ainsi tous les cadres.
Bordure Correspond &agrave; la largeur, en pixels, de la bordure de l'image. La valeur par d&eacute;faut est Pas de bordure.
Modifier Lance l'&eacute;diteur d'image que vous avez indiqu&eacute; dans les pr&eacute;f&eacute;rences d'&eacute;diteurs externes et ouvre l'image
s&eacute;lectionn&eacute;e.
Modification des param&egrave;tres d'une image
affiche la bo&icirc;te de dialogue Aper&ccedil;u d'image, o&ugrave; vous pouvez optimiser
l'image.
Recadrer
Permet de rogner une image en supprimant les zones ind&eacute;sirables de l'image s&eacute;lectionn&eacute;e.
Permet de r&eacute;&eacute;chantillonner une image redimensionn&eacute;e et d'en am&eacute;liorer la qualit&eacute; dans ses
nouvelles taille et forme.
R&eacute;&eacute;chantillonner
Luminosit&eacute; et contraste
Accentuer
Ajuste la luminosit&eacute; et le contraste d'une image
Permet d'ajuster la nettet&eacute; d'une image.
Ram&egrave;ne les valeurs L et H &agrave; la taille originale de l'image. Ce bouton appara&icirc;t &agrave; droite des zones de
texte L et H lorsque vous ajustez les valeurs de l'image s&eacute;lectionn&eacute;e.
R&eacute;tablir la taille
Modification des attributs d'accessibilit&eacute; d'une image dans le code
Si vous avez ins&eacute;r&eacute; des attributs d'accessibilit&eacute; pour une image, vous pouvez modifier ces valeurs dans le code HTML.
1 S&eacute;lectionnez l'image dans la fen&ecirc;tre de document.
2 Effectuez l'une des op&eacute;rations suivantes :
• Modifiez les attributs de l'image en mode Code.
• Cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e (Macintosh), puis
choisissez Modifier la balise.
• Modifiez la valeur Alt dans l'inspecteur Propri&eacute;t&eacute;s.
Derni&egrave;re mise &agrave; jour le 4/5/2011
247
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Alignement d'une image
Vous pouvez aligner une image sur du texte, sur une autre image, sur un plug-in ou sur d'autres &eacute;l&eacute;ments de la ligne.
Vous pouvez &eacute;galement d&eacute;finir l'alignement horizontal d'une image.
1 S&eacute;lectionnez l'image dans le mode Cr&eacute;ation.
2 D&eacute;finissez les attributs d'alignement de l'image dans l'inspecteur Propri&eacute;t&eacute;s, &agrave; l'aide du menu Alignement.
Vous pouvez d&eacute;finir l'alignement selon d'autres &eacute;l&eacute;ments situ&eacute;s dans le m&ecirc;me paragraphe ou la m&ecirc;me ligne.
Remarque : Le langage HTML ne permet pas de placer un texte autour des contours d'une image, contrairement &agrave;
certaines applications de traitement de texte.
Les options d'alignement sont les suivantes :
Par d&eacute;faut Provoque un alignement sur la ligne de base. La valeur par d&eacute;faut varie selon le navigateur du visiteur du
site.
Ligne de base et Bas Alignent la ligne de base du texte (ou de tout autre &eacute;l&eacute;ment du m&ecirc;me paragraphe) sur le bas de
l'objet s&eacute;lectionn&eacute;.
Haut Aligne le haut d'une image sur le haut de l'&eacute;l&eacute;ment le plus &eacute;lev&eacute; (image ou texte) dans la ligne.
Milieu Aligne le milieu de l'image avec la ligne de base de la ligne.
Haut du texte Aligne le haut de l'image avec le haut du plus grand caract&egrave;re de la ligne de texte.
Milieu absolu Aligne le milieu de l'image avec le milieu du texte dans la ligne actuelle.
Bas absolu Aligne le bas de l'image avec le bas de la ligne de texte (y compris les jambages inf&eacute;rieurs comme dans la
lettre g).
Gauche Aligne l'image s&eacute;lectionn&eacute;e sur la marge de gauche et place le texte qui l'entoure &agrave; sa droite. Si le texte align&eacute;
&agrave; gauche pr&eacute;c&egrave;de l'objet sur la ligne, les objets align&eacute;s &agrave; gauche sont g&eacute;n&eacute;ralement plac&eacute;s automatiquement sur une
nouvelle ligne.
Droite Aligne l'image sur la marge de droite et place le texte qui l'entoure &agrave; sa gauche. Si le texte align&eacute; &agrave; droite pr&eacute;c&egrave;de
l'objet sur la ligne, les objets align&eacute;s &agrave; droite sont g&eacute;n&eacute;ralement plac&eacute;s automatiquement sur une nouvelle ligne.
Redimensionnement visuel d'une image
Dans Dreamweaver, vous pouvez redimensionner visuellement certains &eacute;l&eacute;ments comme des images, des plug-ins, des
fichiers Shockwave ou SWF, des applets et des contr&ocirc;les ActiveX.
Le redimensionnement visuel d'une image permet de mieux voir comment l'image affecte la mise en forme en
diff&eacute;rentes dimensions. Il n'adapte pas les dimensions de l'image aux proportions que vous avez sp&eacute;cifi&eacute;es. Si vous
redimensionnez visuellement une image dans Dreamweaver, mais que vous n'utilisez pas d'application de retouche
d'image (comme Adobe Fireworks) pour en adapter les proportions aux dimensions d&eacute;sir&eacute;es, le navigateur de
l'utilisateur devra le faire lorsque la page sera charg&eacute;e. Cela risque d'entra&icirc;ner l'allongement du temps de
t&eacute;l&eacute;chargement de la page et l'affichage incorrect de l'image dans le navigateur. Pour r&eacute;duire le temps de
t&eacute;l&eacute;chargement et &ecirc;tre s&ucirc;r que toutes les instances de l'image sont affich&eacute;es aux m&ecirc;mes dimensions, utilisez une
application de retouche d'image pour adapter les proportions de l'image.
Lorsque vous redimensionnez une image dans Dreamweaver, vous pouvez la r&eacute;&eacute;chantillonner afin de l'adapter &agrave; ses
nouvelles dimensions. Le r&eacute;&eacute;chantillonnage ajoute ou enl&egrave;ve des pixels d'images JPEG ou GIF redimensionn&eacute;es afin
qu'elles correspondent le mieux possible &agrave; l'aspect des images originales. Le r&eacute;&eacute;chantillonnage d'une image r&eacute;duit la
taille de son fichier, ce qui permet d'en acc&eacute;l&eacute;rer le t&eacute;l&eacute;chargement.
Derni&egrave;re mise &agrave; jour le 4/5/2011
248
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Voir aussi
&laquo; Modification d'images dans Dreamweaver &raquo; &agrave; la page 250
Redimensionnement visuel d'un &eacute;l&eacute;ment
1 S&eacute;lectionnez l'&eacute;l&eacute;ment (par exemple, une image ou un fichier SWF) dans la fen&ecirc;tre de document.
Des poign&eacute;es de redimensionnement apparaissent &agrave; droite et en bas de l'&eacute;l&eacute;ment, et dans le coin inf&eacute;rieur droit. Si ces
poign&eacute;es n'apparaissent pas, cliquez &agrave; l'ext&eacute;rieur de l'&eacute;l&eacute;ment &agrave; redimensionner, puis s&eacute;lectionnez-le &agrave; nouveau ou
cliquez sur la balise correspondante dans le s&eacute;lecteur de balises.
2 Pour redimensionner l'&eacute;l&eacute;ment, utilisez l'une des m&eacute;thodes suivantes :
• Pour ajuster la largeur de l'&eacute;l&eacute;ment, d&eacute;placez la poign&eacute;e &agrave; droite de la s&eacute;lection.
• Pour ajuster la hauteur de l'&eacute;l&eacute;ment, d&eacute;placez la poign&eacute;e au bas de la s&eacute;lection.
• Pour ajuster simultan&eacute;ment la largeur et la hauteur de l'&eacute;l&eacute;ment, faites glisser la poign&eacute;e de l'angle de la s&eacute;lection.
• Pour conserver les proportions de l'&eacute;l&eacute;ment (rapport largeur/hauteur) lorsque vous modifiez ses dimensions, faites
glisser la poign&eacute;e de l'angle de la s&eacute;lection tout en appuyant sur la touche Maj.
•
Pour ajuster la largeur et la hauteur d'un &eacute;l&eacute;ment &agrave; une taille pr&eacute;cise, (par exemple, 1x1 pixel), utilisez l'inspecteur
Propri&eacute;t&eacute;s pour entrer une valeur num&eacute;rique. Les &eacute;l&eacute;ments peuvent &ecirc;tre redimensionn&eacute;s visuellement &agrave; une taille
minimale de 8 x 8 pixels.
3 Pour r&eacute;tablir la taille originale d'un &eacute;l&eacute;ment redimensionn&eacute;, supprimez les valeurs des zones de texte L et H ou
cliquez sur le bouton R&eacute;tablir la taille dans l'inspecteur Propri&eacute;t&eacute;s.
R&eacute;tablissement de la taille originale d'une image
❖ Cliquez sur le bouton R&eacute;tablir la taille
dans l'inspecteur Propri&eacute;t&eacute;s des images.
R&eacute;&eacute;chantillonnage d'une image redimensionn&eacute;e
1 Redimensionnez l'image de la mani&egrave;re d&eacute;crite ci-dessus.
2 Cliquez sur le bouton R&eacute;&eacute;chantillonner
dans l'inspecteur Propri&eacute;t&eacute;s des images.
Remarque : Vous ne pouvez pas r&eacute;&eacute;chantillonner les espaces r&eacute;serv&eacute;s pour une image ou les &eacute;l&eacute;ments autres que les
images bitmap.
Insertion d'un espace r&eacute;serv&eacute; pour l'image
Un espace r&eacute;serv&eacute; pour une image est un graphique que vous utilisez jusqu'&agrave; ce que le dessin final soit pr&ecirc;t pour &ecirc;tre
ajout&eacute; &agrave; une page Web. Vous pouvez d&eacute;finir la taille et la couleur de l'espace r&eacute;serv&eacute; et lui donner une &eacute;tiquette de texte.
1 Dans la fen&ecirc;tre de document, placez le point d'insertion &agrave; l'endroit o&ugrave; vous voulez ins&eacute;rer un espace r&eacute;serv&eacute; pour
un graphique.
2 Cliquez sur Insertion &gt; Objets image &gt; Espace r&eacute;serv&eacute; pour l’image.
3 Dans la zone de texte Nom (facultatif), tapez le texte que vous souhaitez voir appara&icirc;tre comme &eacute;tiquette de l'espace
r&eacute;serv&eacute; pour l'image. Laissez la zone de texte vide si vous ne voulez pas faire appara&icirc;tre d'&eacute;tiquette. Le nom doit
commencer par une lettre et ne peut contenir que des lettres ou des chiffres : les espaces et les caract&egrave;res ASCII
&eacute;tendu ne sont pas autoris&eacute;s.
4 (Obligatoire) Dans les zones de texte Largeur et Hauteur, saisissez un nombre pour d&eacute;finir la taille de l'image en
pixels.
Derni&egrave;re mise &agrave; jour le 4/5/2011
249
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
5 (Facultatif) Pour Couleur, proc&eacute;dez de l'une des mani&egrave;res suivantes pour appliquer une couleur :
• Utilisez le s&eacute;lecteur de couleur pour s&eacute;lectionner une couleur.
• Entrez la valeur hexad&eacute;cimale de la couleur (par exemple #FF0000).
• Entrez le nom d'une couleur s&eacute;curis&eacute;e pour le Web (par exemple rouge).
6 (Facultatif) Dans Texte secondaire, entrez une description de l'image pour les personnes utilisant un navigateur en
mode texte.
Remarque : Une balise image est ins&eacute;r&eacute;e automatiquement dans le code HTML, avec un attribut src vide.
7 Cliquez sur OK.
Les attributs de couleur et de taille ainsi que l'&eacute;tiquette de l'espace r&eacute;serv&eacute; s'affichent comme suit :
Lorsqu'ils sont visualis&eacute;s dans un navigateur, le texte de l'&eacute;tiquette et celui de la taille ne s'affichent pas.
Voir aussi
&laquo; Redimensionnement visuel d'une image &raquo; &agrave; la page 247
&laquo; Utilisation de Fireworks pour modifier les espaces r&eacute;serv&eacute;s pour les images Dreamweaver &raquo; &agrave; la page 377
Remplacement d'un espace r&eacute;serv&eacute; pour une image
Un espace r&eacute;serv&eacute; pour l'image n'affiche pas d'image dans un navigateur. Avant de publier votre site, il convient de
remplacer tous les espaces r&eacute;serv&eacute;s pour une image que vous avez ajout&eacute;s par des fichiers d'image adapt&eacute;s au Web, tels
que des images GIF ou JPEG.
Si vous poss&eacute;dez Fireworks, vous pouvez cr&eacute;er un nouveau graphique &agrave; partir d'un espace r&eacute;serv&eacute; pour image dans
Dreamweaver. La nouvelle image reprend la m&ecirc;me taille que celle de l'espace r&eacute;serv&eacute; pour l'image. Vous pouvez
modifier l'image, puis la remplacer dans Dreamweaver.
1 Dans la fen&ecirc;tre Document, proc&eacute;dez de l'une des mani&egrave;res suivantes :
• Double-cliquez sur l'espace r&eacute;serv&eacute; pour l'image.
• Cliquez sur l'espace r&eacute;serv&eacute; pour l'image pour le s&eacute;lectionner, puis dans l'inspecteur Propri&eacute;t&eacute;s (Fen&ecirc;tre &gt;
Propri&eacute;t&eacute;s), cliquez sur l'ic&ocirc;ne du dossier &agrave; c&ocirc;t&eacute; de la zone de texte Src.
2 Dans la bo&icirc;te de dialogue Source de l'image, localisez l'image que vous voulez utiliser pour remplacer l'espace
r&eacute;serv&eacute;, puis cliquez sur OK.
Voir aussi
&laquo; Utilisation de Fireworks pour modifier les espaces r&eacute;serv&eacute;s pour les images Dreamweaver &raquo; &agrave; la page 377
D&eacute;finition des propri&eacute;t&eacute;s de l'espace r&eacute;serv&eacute; pour l'image
Pour d&eacute;finir les propri&eacute;t&eacute;s d'un espace r&eacute;serv&eacute; pour l'image, s&eacute;lectionnez l'espace r&eacute;serv&eacute; dans la fen&ecirc;tre de document,
puis choisissez la commande Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s pour afficher l'inspecteur Propri&eacute;t&eacute;s. Cliquez sur la fl&egrave;che
d'agrandissement dans l'angle inf&eacute;rieur droit pour afficher toutes les propri&eacute;t&eacute;s.
Derni&egrave;re mise &agrave; jour le 4/5/2011
250
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Utilisez l'inspecteur Propri&eacute;t&eacute;s pour d&eacute;finir un nom, une largeur, une hauteur, une source d'image, une autre
description de texte, un alignement ou une couleur pour l'espace r&eacute;serv&eacute; pour l'image.
Dans l'inspecteur Propri&eacute;t&eacute;s de l'espace r&eacute;serv&eacute;, la zone de texte grise et la zone de texte Aligner sont d&eacute;sactiv&eacute;es. Vous
pouvez d&eacute;finir ces propri&eacute;t&eacute;s dans l'inspecteur Propri&eacute;t&eacute;s de l'image lorsque vous remplacez l'espace r&eacute;serv&eacute; par une
image.
❖ Parmi les options suivantes, d&eacute;finissez celles de votre choix :
L et H D&eacute;finissent la largeur et la hauteur de l'espace r&eacute;serv&eacute; pour l'image, en pixels.
Src Sp&eacute;cifie le fichier source de l'image. Pour un espace r&eacute;serv&eacute; pour une image, cette zone de texte est vide. Cliquez
sur le bouton Parcourir pour s&eacute;lectionner une image &agrave; utiliser en remplacement du graphique de l'espace r&eacute;serv&eacute;.
Lien Sp&eacute;cifie un lien hypertexte pour l'espace r&eacute;serv&eacute; de l'image. Faites glisser l'ic&ocirc;ne Pointer vers un fichier dans le
panneau Fichiers, cliquez sur l'ic&ocirc;ne de dossier pour rechercher et s&eacute;lectionner un document de votre site ou tapez
directement l'URL.
Sec Sp&eacute;cifie le texte secondaire qui appara&icirc;tra &agrave; la place de l'image dans les navigateurs de type texte seulement, ou
dans les navigateurs dont l'utilisateur a d&eacute;sactiv&eacute; le t&eacute;l&eacute;chargement automatique des images. Pour les utilisateurs
malvoyants qui utilisent un synth&eacute;tiseur vocal avec un navigateur en mode texte, le texte est lu. Dans certains
navigateurs, ce texte appara&icirc;t &eacute;galement lorsque le pointeur se trouve sur l'image.
Cr&eacute;er Permet de lancer Fireworks pour cr&eacute;er une image de remplacement. Le bouton Cr&eacute;er est d&eacute;sactiv&eacute; sauf si
Fireworks est &eacute;galement install&eacute; sur votre ordinateur.
R&eacute;tablir la taille Ram&egrave;ne les valeurs L et H &agrave; la taille originale de l'image.
Couleur Sp&eacute;cifie une couleur pour l'espace r&eacute;serv&eacute; de l'image.
Voir aussi
&laquo; Utilisation de Fireworks pour modifier les espaces r&eacute;serv&eacute;s pour les images Dreamweaver &raquo; &agrave; la page 377
Modification d'images dans Dreamweaver
Vous pouvez r&eacute;&eacute;chantillonner, recadrer, optimiser et accentuer les images dans Dreamweaver. Vous pouvez
&eacute;galement r&eacute;gler leur luminosit&eacute; et leur contraste.
Fonctions de retouche d'image
Dreamweaver comprend des fonctions basiques de retouche d'image, ce qui vous &eacute;vite de devoir lancer une application
externe pour effectuer cette t&acirc;che (par exemple, Fireworks ou Photoshop). Les outils de retouche d'image de
Dreamweaver sont con&ccedil;us pour un travail simplifi&eacute; avec les concepteurs de contenu responsables de la cr&eacute;ation des
fichiers d'image utilis&eacute;s sur votre site Web.
Derni&egrave;re mise &agrave; jour le 4/5/2011
251
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Remarque : Il n'est pas n&eacute;cessaire d'installer Fireworks ou d'autres applications de retouche d'image sur votre ordinateur
pour utiliser les fonctions de retouche d'image de Dreamweaver.
❖ Choisissez Modifier &gt; Image. D&eacute;finissez l'une des fonctions de retouche d'image Dreamweaver suivantes :
R&eacute;&eacute;chantillonner Ajoute ou enl&egrave;ve des pixels d'images JPEG ou GIF redimensionn&eacute;es afin qu'elles correspondent le
mieux possible &agrave; l'aspect des images originales. Le r&eacute;&eacute;chantillonnage d'une image r&eacute;duit la taille de son fichier, ce qui
permet d'en acc&eacute;l&eacute;rer le t&eacute;l&eacute;chargement.
Lorsque vous redimensionnez une image dans Dreamweaver, vous pouvez la r&eacute;&eacute;chantillonner afin de l'adapter &agrave; ses
nouvelles dimensions. Lorsqu'un objet bitmap est r&eacute;&eacute;chantillonn&eacute;, des pixels sont ajout&eacute;s &agrave; l'image ou en sont enlev&eacute;s
afin de l'agrandir ou de la r&eacute;duire. En g&eacute;n&eacute;ral, le r&eacute;&eacute;chantillonnage d'une image &agrave; une r&eacute;solution sup&eacute;rieure provoque
une faible perte de qualit&eacute;. Le r&eacute;&eacute;chantillonnage &agrave; une r&eacute;solution inf&eacute;rieure, en revanche, provoque toujours une perte
de donn&eacute;es et donne une moins bonne qualit&eacute;.
Recadrer Permet de r&eacute;duire la surface des images. En g&eacute;n&eacute;ral, il est utile pour mettre en &eacute;vidence le sujet de l'image et
supprimer les aspects ind&eacute;sirables qui entourent le centre d'int&eacute;r&ecirc;t de l'image.
Luminosit&eacute; et contraste Modifie la luminosit&eacute; et le contraste des pixels qui composent l'image. Ceci affecte les
surbrillances, les ombres et les demi-tons d'une image. Cette fonction est utilis&eacute;e pour corriger les images trop sombres
ou trop claires.
Accentuer Ajuste la mise au point d'une image en augmentant le contraste des bords sur l'image. Lorsque vous scannez
une image ou que vous prenez une photo num&eacute;rique, la plupart des logiciels de capture d'images estompent par d&eacute;faut
les bords des objets photographi&eacute;s. Cela emp&ecirc;che les d&eacute;tails extr&ecirc;mement pr&eacute;cis de se perdre dans les pixels dont sont
constitu&eacute;es les images num&eacute;riques. Cependant, il est souvent n&eacute;cessaire d'accentuer l'image pour faire ressortir les
d&eacute;tails dans les fichiers d'image num&eacute;rique, ce qui augmente le contraste des bords et rend l'image encore plus nette.
Remarque : Les fonctions de retouche d'image de Dreamweaver s'appliquent uniquement aux formats de fichiers d'image
JPEG et GIF. Les autres formats de fichiers d'image bitmap ne peuvent pas &ecirc;tre modifi&eacute;s &agrave; l'aide de ces fonctions.
Recadrage d'une image
Dreamweaver permet de recadrer (ou rogner) les images bitmap.
Remarque : Lorsque vous recadrez une image, le fichier d'image source est modifi&eacute; sur le disque. Il peut donc s'av&eacute;rer utile
de conserver une copie de sauvegarde du fichier d'image au cas o&ugrave; vous auriez besoin de revenir &agrave; l'image d'origine.
1 Ouvrez la page qui contient l'image &agrave; recadrer, s&eacute;lectionnez l'image et proc&eacute;dez de l'une des mani&egrave;res suivantes :
• Cliquez sur l'ic&ocirc;ne Recadrer
dans l'inspecteur Propri&eacute;t&eacute;s des images.
• Choisissez Modifier &gt; Image &gt; Recadrer.
Des poign&eacute;es de recadrage apparaissent autour de l'image s&eacute;lectionn&eacute;e.
2 Ajustez-les jusqu'&agrave; ce que la surface de l'image &agrave; conserver soit entour&eacute;e d'une zone limite.
3 Double-cliquez dans cette zone ou appuyez sur Entr&eacute;e pour recadrer la s&eacute;lection.
4 Une bo&icirc;te de dialogue vous informe que le fichier image que vous recadrez sera modifi&eacute; sur le disque. Cliquez sur
OK. Chaque pixel de l'image bitmap situ&eacute; hors de la zone limite est supprim&eacute; mais les autres objets de l'image ne
sont pas affect&eacute;s.
5 V&eacute;rifiez &agrave; l'aide de l'aper&ccedil;u que l'image correspond &agrave; vos attentes. Si ce n'est pas le cas, choisissez Edition &gt; Annuler
Recadrer pour revenir &agrave; l'image d'origine.
Remarque : Vous pouvez annuler l'effet de la commande Recadrer (et revenir au fichier d'image d'origine) jusqu'au
moment o&ugrave; vous quittez Dreamweaver ou alors modifiez le fichier dans une application de retouche d'image.
Derni&egrave;re mise &agrave; jour le 4/5/2011
252
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Optimisation d'une image
Vous pouvez optimiser des images sur vos pages Web dans Dreamweaver.
1 Ouvrez la page qui contient l'image &agrave; optimiser, s&eacute;lectionnez l'image et proc&eacute;dez de l'une des mani&egrave;res suivantes :
• Cliquez sur le bouton de modification des param&egrave;tres de l'image
dans l'inspecteur Propri&eacute;t&eacute;s de l'image.
• Choisissez Modifier &gt; Image &gt; Optimiser.
2 Apportez les modifications dans la bo&icirc;te de dialogue Aper&ccedil;u d'image, puis cliquez sur OK.
Accentuation d'une image
L'accentuation augmente le contraste des pixels autour des objets pour augmenter la d&eacute;finition de l'image et obtenir
une meilleure nettet&eacute;.
1 Ouvrez la page qui contient l'image &agrave; accentuer, s&eacute;lectionnez l'image et proc&eacute;dez de l'une des mani&egrave;res suivantes :
• Cliquez sur le bouton Accentuer
dans l'inspecteur Propri&eacute;t&eacute;s des images.
• Choisissez Modifier &gt; Image &gt; Accentuer.
2 Pour sp&eacute;cifier le degr&eacute; d'accentuation appliqu&eacute; par Dreamweaver &agrave; l'image, d&eacute;placez le curseur ou tapez une valeur
comprise entre 0 et 10 dans la zone de texte. Lorsque vous ajustez la nettet&eacute; de l'image &agrave; l'aide de la bo&icirc;te de dialogue
Accentuer, vous pouvez afficher un aper&ccedil;u de l'image modifi&eacute;e.
3 Lorsque vous &ecirc;tes satisfait de l'image, cliquez sur OK.
4 Enregistrez vos modifications en choisissant Fichier &gt; Enregistrer ou revenez &agrave; l'image d'origine en choisissant
Edition &gt; Annuler Accentuer.
Remarque : Vous pouvez annuler l'effet de la commande Accentuer (et revenir au fichier d'image d'origine) uniquement
avant d'enregistrer la page qui contient l'image. Une fois que vous avez enregistr&eacute; la page, les modifications apport&eacute;es &agrave;
l'image sont d&eacute;finitivement enregistr&eacute;es.
Ajustement de la luminosit&eacute; et du contraste d'une image
La fonction Luminosit&eacute;/Contraste modifie la luminosit&eacute; ou le contraste des pixels qui composent l'image. Ceci affecte
les surbrillances, les ombres et les demi-tons d'une image. Cette fonction est utilis&eacute;e pour corriger les images trop
sombres ou trop claires.
1 Ouvrez la page qui contient l'image &agrave; ajuster, s&eacute;lectionnez l'image et proc&eacute;dez de l'une des mani&egrave;res suivantes :
• Cliquez sur le bouton Luminosit&eacute;/Contraste
dans l'inspecteur Propri&eacute;t&eacute;s des images.
• Choisissez Modifier &gt; Image &gt; Luminosit&eacute;/Contraste.
2 D&eacute;placez les curseurs de luminosit&eacute; et de contraste pour modifier les valeurs &agrave; votre convenance. Les valeurs sont
comprises entre -100 et 100.
3 Cliquez sur OK.
Cr&eacute;ation d'une image survol&eacute;e
Vous pouvez ins&eacute;rer des images survol&eacute;es dans votre page. Une image survol&eacute;e est une image qui, lorsqu'elle est
visualis&eacute;e dans un navigateur, change lorsque le pointeur vient se placer au-dessus d’elle.
Vous devez disposer de deux images pour cr&eacute;er l'image survol&eacute;e : l'image principale (affich&eacute;e au chargement de la
page) et l'image secondaire (qui appara&icirc;t lorsque le pointeur est plac&eacute; au-dessus de l'image principale). Les deux images
utilis&eacute;es doivent avoir les m&ecirc;mes dimensions ; si ce n'est pas le cas, Dreamweaver redimensionne la seconde image en
fonction de la taille de la premi&egrave;re.
Derni&egrave;re mise &agrave; jour le 4/5/2011
253
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Les images survol&eacute;es sont automatiquement d&eacute;finies pour r&eacute;pondre &agrave; l'&eacute;v&eacute;nement onMouseOver. Vous pouvez
configurer une image pour qu'elle r&eacute;ponde &agrave; un &eacute;v&eacute;nement diff&eacute;rent (par exemple, un clic de souris) ou modifier une
image survol&eacute;e.
Vous trouverez un didacticiel consacr&eacute; &agrave; la cr&eacute;ation d'images survol&eacute;es &agrave; l'adresse www.adobe.com/go/vid0159_fr.
1 Dans la fen&ecirc;tre de document, placez le point d'insertion &agrave; l'endroit o&ugrave; vous voulez ins&eacute;rer l'image survol&eacute;e.
2 Ins&eacute;rez l'image survol&eacute;e &agrave; l'aide de l'une des m&eacute;thodes suivantes :
• Dans la cat&eacute;gorie Commun du panneau Insertion, cliquez sur le bouton Images puis s&eacute;lectionnez l'ic&ocirc;ne Image
survol&eacute;e. Lorsque l'ic&ocirc;ne Image survol&eacute;e s'affiche dans le panneau Insertion, vous pouvez la faire glisser jusqu'&agrave; la
fen&ecirc;tre de document.
• S&eacute;lectionnez Insertion &gt; Objets image &gt; Image survol&eacute;e.
3 D&eacute;finissez les options, puis cliquez sur OK.
Nom de l'image Nom de l'image survol&eacute;e.
Image d’origine L'image qui doit s'afficher au chargement de la page. Entrez le chemin d'acc&egrave;s dans la zone de texte
ou cliquez sur Parcourir et s&eacute;lectionnez l'image.
Image survol&eacute;e L'image &agrave; afficher lorsque le pointeur est plac&eacute; au-dessus de l'image originale. Entrez le chemin d'acc&egrave;s
de l'image ou cliquez sur Parcourir pour la s&eacute;lectionner.
Pr&eacute;charger l'image survol&eacute;e Pr&eacute;charge les images dans la m&eacute;moire cache du navigateur afin d'&eacute;viter tout d&eacute;lai lorsque
vous faites passer le pointeur de la souris par-dessus l'image.
Texte secondaire (Facultatif) Texte qui d&eacute;crit l'image &agrave; l'intention des personnes utilisant un navigateur en mode
texte.
Si cliqu&eacute;, aller &agrave; l'URL Le fichier &agrave; ouvrir lorsqu'un utilisateur clique sur l'image survol&eacute;e. Entrez le chemin d'acc&egrave;s du
fichier ou cliquez sur Parcourir pour le s&eacute;lectionner.
Remarque : Si vous ne d&eacute;finissez pas un lien pour l'image, Dreamweaver ins&egrave;re un lien nul (#) dans le code source HTML
auquel le comportement de survol est attach&eacute;. Si vous supprimez le lien nul, l'image survol&eacute;e ne fonctionne plus.
4 Choisissez Fichier &gt; Aper&ccedil;u dans le navigateur ou appuyez sur la touche F12.
5 Dans le navigateur, placez le pointeur au-dessus de l'image d'origine pour voir l'image survol&eacute;e.
Remarque : Il est impossible de voir l'effet d'une image survol&eacute;e dans le mode Cr&eacute;ation.
Voir aussi
&laquo; Application du comportement Permuter une image &raquo; &agrave; la page 373
Didacticiel sur les images survol&eacute;es
Utilisation d'un &eacute;diteur d'image externe
Dans Dreamweaver, vous pouvez ouvrir une image s&eacute;lectionn&eacute;e dans un &eacute;diteur d'image externe. Lorsque vous
revenez dans Dreamweaver apr&egrave;s avoir enregistr&eacute; le fichier d'image modifi&eacute;, toutes les modifications apport&eacute;es &agrave;
l'image sont visibles dans la fen&ecirc;tre de document.
Vous pouvez d&eacute;finir Fireworks comme principal &eacute;diteur d'image. Vous pouvez &eacute;galement d&eacute;finir quels types de fichier
un &eacute;diteur peut ouvrir et vous pouvez s&eacute;lectionner plusieurs &eacute;diteurs d'image. Par exemple, vous pouvez d&eacute;finir des
pr&eacute;f&eacute;rences afin de d&eacute;marrer Fireworks pour modifier les fichiers GIF et de lancer un &eacute;diteur d'image diff&eacute;rent pour
modifier les fichiers JPG ou JPEG.
Derni&egrave;re mise &agrave; jour le 4/5/2011
254
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Voir aussi
&laquo; Utilisation de Photoshop et Dreamweaver &raquo; &agrave; la page 382
&laquo; Utilisation de Fireworks et Dreamweaver &raquo; &agrave; la page 376
&laquo; Lancement d'un &eacute;diteur externe pour des fichiers multim&eacute;dias &raquo; &agrave; la page 268
D&eacute;marrage de l'&eacute;diteur d'image externe
❖ Effectuez l'une des op&eacute;rations suivantes :
• Double-cliquez sur l'image &agrave; modifier.
• Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contr&ocirc;le enfonc&eacute;e (Macintosh)
sur l'image &agrave; modifier, choisissez l'option Modifier avec &gt; Parcourir et s&eacute;lectionnez un &eacute;diteur.
• S&eacute;lectionnez l'image &agrave; modifier, puis cliquez sur Modifier dans l'inspecteur Propri&eacute;t&eacute;s.
• Double-cliquez sur le fichier d'image dans le panneau Fichiers pour lancer l'&eacute;diteur d'image principal. Si vous n'avez
pas indiqu&eacute; d'&eacute;diteur d'image, Dreamweaver ex&eacute;cute l'&eacute;diteur par d&eacute;faut de ce type de fichier.
Remarque : Lorsque vous ouvrez directement une image &agrave; partir du panneau Fichiers, les fonctionnalit&eacute;s d'int&eacute;gration
de Fireworks sont inop&eacute;rantes ; Fireworks n'ouvre pas le fichier original PNG. Pour utiliser ces fonctionnalit&eacute;s
d'int&eacute;gration de Fireworks, ouvrez les images &agrave; partir de la fen&ecirc;tre de document.
Si l'image mise &agrave; jour n'appara&icirc;t pas une fois de retour dans la fen&ecirc;tre Dreamweaver, s&eacute;lectionnez l'image et cliquez sur
le bouton Actualiser dans l'inspecteur Propri&eacute;t&eacute;s.
D&eacute;finition d'un &eacute;diteur d'image externe pour un type de fichier existant
Vous pouvez s&eacute;lectionner l'&eacute;diteur d'image &agrave; utiliser pour ouvrir et modifier les fichiers graphiques.
1 Ouvrez la bo&icirc;te de dialogue Types de fichiers/Editeurs en effectuant l'une des op&eacute;rations suivantes :
• Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh) et s&eacute;lectionnez la
cat&eacute;gorie Types de fichiers/Editeurs dans la liste de gauche.
• Choisissez la commande Edition &gt; Modifier avec &eacute;diteur externe, puis s&eacute;lectionnez Types de fichiers/Editeurs.
2 Dans la liste Extensions, s&eacute;lectionnez l'extension de fichier pour laquelle d&eacute;finir un &eacute;diteur externe.
3 Cliquez sur le bouton Ajouter (+) au-dessus de la liste Editeurs.
4 Dans la bo&icirc;te de dialogue S&eacute;lectionner un &eacute;diteur externe, recherchez l'application &agrave; d&eacute;marrer en tant qu'&eacute;diteur
pour ce type de fichier.
5 Dans la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences, cliquez sur Principal si vous souhaitez que cet &eacute;diteur soit l'&eacute;diteur principal
pour ce type de fichier.
6 Si vous souhaitez configurer un &eacute;diteur suppl&eacute;mentaire pour ce type de fichier, r&eacute;p&eacute;tez les &eacute;tapes 3 et 4.
Dreamweaver utilise automatiquement l'&eacute;diteur principal lorsque vous modifiez ce type d'image. Vous pouvez choisir
l'un des autres &eacute;diteurs figurant dans la liste, &agrave; partir du menu d&eacute;roulant de l'image, dans la fen&ecirc;tre de document.
Ajout d'un nouveau type de fichier &agrave; la liste Extensions
1 Ouvrez la bo&icirc;te de dialogue Types de fichiers/Editeurs en effectuant l'une des op&eacute;rations suivantes :
• Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh) et s&eacute;lectionnez la
cat&eacute;gorie Types de fichiers/Editeurs dans la liste de gauche.
• Choisissez la commande Edition &gt; Modifier avec &eacute;diteur externe, puis s&eacute;lectionnez Types de fichiers/Editeurs.
Derni&egrave;re mise &agrave; jour le 4/5/2011
255
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
2 Dans la bo&icirc;te de dialogue Types de fichiers/Editeurs, cliquez sur le bouton Ajouter (+) au-dessus de la liste
Extensions.
Une zone de texte s'affiche dans la liste Extensions.
3 Tapez l'extension de fichier pour le type de fichier que vous voulez ouvrir avec l'&eacute;diteur.
4 Pour s&eacute;lectionner un &eacute;diteur externe pour le type de fichier, cliquez sur le bouton Ajouter (+) au-dessus de la liste
Editeurs.
5 Dans la bo&icirc;te de dialogue qui appara&icirc;t alors, s&eacute;lectionnez l'application &agrave; utiliser pour modifier ce type d'image.
6 Cliquez sur Principal si vous d&eacute;sirez que ce programme soit l'&eacute;diteur principal pour ce type d'image.
Modification d'une pr&eacute;f&eacute;rence d'&eacute;diteur existante
1 Ouvrez la bo&icirc;te de dialogue Types de fichiers/Editeurs en effectuant l'une des op&eacute;rations suivantes :
• Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh) et s&eacute;lectionnez la
cat&eacute;gorie Types de fichiers/Editeurs dans la liste de gauche.
• Choisissez la commande Edition &gt; Modifier avec &eacute;diteur externe, puis s&eacute;lectionnez Types de fichiers/Editeurs.
2 Dans la bo&icirc;te de dialogue Types de fichiers/Editeurs, s&eacute;lectionnez dans la liste Extensions le type de fichier que vous
souhaitez modifier pour visualiser les &eacute;diteurs actuellement d&eacute;finis.
3 Dans la liste Editeurs, s&eacute;lectionnez l'&eacute;diteur que vous d&eacute;sirez affecter &agrave; ce type de fichier, puis proc&eacute;dez de l'une des
mani&egrave;res suivantes :
• Cliquez sur le bouton Ajouter (+) ou Supprimer (-), au-dessus de la liste Editeurs, pour ajouter ou supprimer un
&eacute;diteur.
• Cliquez sur le bouton Rendre principal pour d&eacute;finir l'&eacute;diteur &agrave; lancer par d&eacute;faut pour la retouche.
Application de comportements aux images
Vous pouvez appliquer l'un des comportements disponibles &agrave; une image ou &agrave; la zone r&eacute;active d'une image. Lorsque
vous appliquez un comportement &agrave; une zone r&eacute;active, Dreamweaver ins&egrave;re le code source HTML n&eacute;cessaire dans la
balise area. Il existe trois comportements qui s'appliquent sp&eacute;cifiquement aux images : Pr&eacute;charger les images,
Permuter une image et Restaurer l'interversion d'images.
Pr&eacute;charger les images Place dans la m&eacute;moire cache du navigateur les images qui ne sont pas imm&eacute;diatement affich&eacute;es
lors du chargement de la page (par exemple, les images de substitution appel&eacute;es par un comportement, un &eacute;l&eacute;ment PA
ou une fonction en JavaScript). Cela &eacute;vite &agrave; l'utilisateur d'attendre que ces images soient charg&eacute;es, lorsqu'un &eacute;v&eacute;nement
d&eacute;clenche leur apparition.
Permuter une image Remplace une image par une autre, en modifiant l'attribut SRC de la balise img. Utilisez cette
action pour cr&eacute;er des substitutions de boutons et autres effets sur des images (y compris la substitution de plusieurs
images &agrave; la fois).
Restaurer l'image intervertie R&eacute;tablit la derni&egrave;re interversion d'images &agrave; son &eacute;tat d'origine. Cette action est
automatiquement ajout&eacute;e par d&eacute;faut lorsque vous associez l'action Permuter une image &agrave; un objet ; en principe, vous
n'avez pas besoin d'y faire appel manuellement.
Vous pouvez &eacute;galement utiliser des comportements pour cr&eacute;er des syst&egrave;mes de navigation plus sophistiqu&eacute;s, comme
les menus de reroutage.
Derni&egrave;re mise &agrave; jour le 4/5/2011
256
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Voir aussi
&laquo; Insertion d'un menu de reroutage &raquo; &agrave; la page 292
&laquo; Application du comportement Permuter une image &raquo; &agrave; la page 373
&laquo; Application du comportement Pr&eacute;charger les images &raquo; &agrave; la page 369
Incorporation de vid&eacute;os aux pages Web (HTML5)
HTML5 prend en charge les balises audio et vid&eacute;o, permettant aux utilisateurs de lire des fichier audio et vid&eacute;o dans
un navigateur sans compl&eacute;ment ni lecteur externe. Dreamweaver prend en charge les conseils de code permettant
l'ajout de balises vid&eacute;o et audio.
Le mode En direct affiche la vid&eacute;o, de fa&ccedil;on &agrave; pr&eacute;visualiser la vid&eacute;o que vous incorporez &agrave; la page Web.
Remarque : Bien que vous puissiez incorporer toute vid&eacute;o &agrave; votre page Web, le mode En direct ne les affiche pas toujours
toutes. Les balises audio et vid&eacute;o sont prises en charge par Dreamweaver au moyen du module QuickTime d'Apple. Sous
Windows, si le module QuickTime d'Apple n'est pas install&eacute;, la page Web n'affichera pas le contenu multim&eacute;dia.
Insertion de fichiers SWF
A propos des types de fichiers FLA, SWF et FLV
Avant d'utiliser Dreamweaver pour ins&eacute;rer du contenu cr&eacute;&eacute; &agrave; l'aide d'Adobe Flash, familiarisez-vous aux types de
fichiers suivants :
Fichier FLA (.fla) Fichier source pour tout projet, cr&eacute;&eacute; dans l'outil de cr&eacute;ation Flash. Ce type de fichier peut uniquement
&ecirc;tre ouvert dans comportement Flash (il ne peut pas l'&ecirc;tre dans Dreamweaver ni dans des navigateurs). Vous pouvez
ouvrir le fichier FLA dans Flash, puis le publier sous la forme d'un fichier SWF ou SWT pour l'utiliser dans des
navigateurs.
Fichier SWF (.swf) Version compil&eacute;e du fichier FLA (.fla), optimis&eacute;e pour l'affichage sur le Web. Ce fichier peut &ecirc;tre lu
dans les navigateurs et pr&eacute;visualis&eacute; dans Dreamweaver, mais il ne peut pas &ecirc;tre modifi&eacute; dans Flash.
Fichier FLV (.flv) Est un fichier vid&eacute;o qui contient des donn&eacute;es audio et vid&eacute;o cod&eacute;es, lisibles par Flash&reg; Player. Par
exemple, si vous utilisez un fichier vid&eacute;o QuickTime ou Windows Media, vous devez utiliser un encodeur (tel que
Flash&reg; Video Encoder ou Sorensen Squeeze) pour convertir le fichier vid&eacute;o en fichier FLV. Pour plus d'informations,
consultez le Centre de technologie vid&eacute;o &agrave; l'adresse www.adobe.com/go/flv_devcenter_fr.
Voir aussi
&laquo; Utilisation de Flash et Dreamweaver &raquo; &agrave; la page 392
&laquo; Insertion de fichiers FLV &raquo; &agrave; la page 259
Insertion et pr&eacute;visualisation de fichiers SWF
Dreamweaver permet d'ajouter des fichiers SWF &agrave; vos pages et d'en consulter un aper&ccedil;u dans un document ou un
navigateur. Vous pouvez &eacute;galement d&eacute;finir les propri&eacute;t&eacute;s des fichiers SWF dans l'inspecteur Propri&eacute;t&eacute;s.
Vous trouverez un didacticiel consacr&eacute; &agrave; l'ajout de fichiers SWF &agrave; des pages Web &agrave; l'adresse
www.adobe.com/go/vid0150_fr.
Derni&egrave;re mise &agrave; jour le 4/5/2011
257
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Voir aussi
&laquo; Utilisation de Flash et Dreamweaver &raquo; &agrave; la page 392
&laquo; Modification d’un fichier SWF depuis Dreamweaver dans Flash &raquo; &agrave; la page 392
Fichiers SWF et calques DHTML
&laquo; Insertion d'animations Shockwave &raquo; &agrave; la page 270
&laquo; Insertion de fichiers FLV &raquo; &agrave; la page 259
Didacticiel consacr&eacute; &agrave; l'utilisation de Flash
Insertion d'un fichier SWF
1 Dans la fen&ecirc;tre de document (mode Cr&eacute;ation), placez le point d'insertion &agrave; l'endroit o&ugrave; vous souhaitez ins&eacute;rer le
contenu, puis proc&eacute;dez de l'une des mani&egrave;res suivantes :
• Dans la cat&eacute;gorie Commun du panneau Insertion, choisissez M&eacute;dias puis cliquez sur l'ic&ocirc;ne SWF
.
• Choisissez Insertion &gt; M&eacute;dias &gt; SWF.
2 Dans la bo&icirc;te de dialogue qui s'affiche, s&eacute;lectionnez un fichier SWF (.swf).
Un espace r&eacute;serv&eacute; pour le fichier SWF s'affiche dans la fen&ecirc;tre de document.
Cet espace r&eacute;serv&eacute; est entour&eacute; d'un contour bleu &agrave; onglet. L'onglet indique le type d'actif (fichier SWF) et l'ID du fichier
SWF. Cet onglet comporte &eacute;galement une ic&ocirc;ne qui repr&eacute;sente un œil. Il fait office de bascule entre le fichier SWF et
les informations de t&eacute;l&eacute;chargement que les utilisateurs voient s'ils ne poss&egrave;dent pas la version correcte de Flash Player.
3 Enregistrez le fichier.
Dreamweaver vous informe que deux fichiers d&eacute;pendants, expressInstall.swf et swfobject_modified.js, vont &ecirc;tre
enregistr&eacute;s dans un dossier Scripts de votre site. N'oubliez pas de charger ces fichiers lorsque vous placez le fichier SWF
sur votre serveur Web. Les navigateurs ne peuvent afficher correctement le fichier SWF que si vous avez &eacute;galement
charg&eacute; ces fichiers d&eacute;pendants.
Remarque : Microsoft Internet Information Server (IIS) ne traite pas les balises object imbriqu&eacute;es. Pour les pages ASP,
Dreamweaver utilise du code object/embed imbriqu&eacute; au lieu du code object imbriqu&eacute; lors de l'insertion de fichiers SWF
ou FLV.
Modification des informations de t&eacute;l&eacute;chargement de Flash Player
Lorsque vous ins&eacute;rez un fichier SWF sur une page, Dreamweaver ins&egrave;re du code qui d&eacute;tecte si l'utilisateur dispose de
la version appropri&eacute;e de Flash Player. Si ce n'est pas le cas, la page affiche du contenu alternatif afin d'inviter l'utilisateur
&agrave; t&eacute;l&eacute;charger la version la plus r&eacute;cente. Vous pouvez &agrave; tout moment modifier ce contenu alternatif.
Cette proc&eacute;dure s'applique &eacute;galement aux fichiers FLV.
Derni&egrave;re mise &agrave; jour le 4/5/2011
258
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Remarque : Si l'utilisateur ne dispose pas de la version requise mais bien de Flash Player en version 6.0 r65 ou une version
ult&eacute;rieure, le navigateur affiche un programme d'installation express de Flash Player. Si l'utilisateur refuse l'installation
express, la page affiche le contenu alternatif.
1 Dans la fen&ecirc;tre de document, en mode Cr&eacute;ation, s&eacute;lectionnez le fichier SWF ou FLV.
2 Cliquez sur l'ic&ocirc;ne repr&eacute;sentant un œil dans l'onglet du fichier SWF ou FLV.
Vous pouvez &eacute;galement utiliser le raccourci CTRL + ] pour activer l'affichage du contenu alternatif. Pour r&eacute;tablir
l'affichage du fichier SWF/FLV, appuyez sur CTRL + [ jusqu'&agrave; ce que l'int&eacute;gralit&eacute; du contenu alternatif soit
s&eacute;lectionn&eacute;e. Ensuite, appuyez &agrave; nouveau sur CTRL + [.
3 Modifiez le contenu comme vous le feriez pour tout autre contenu dans Dreamweaver.
Remarque : Il est impossible d'ajouter des fichiers SWF ou FLV en tant que contenu alternatif.
4 Cliquez &agrave; nouveau sur l'ic&ocirc;ne repr&eacute;sentant un œil pour revenir &agrave; l'affichage du fichier SWF (ou FLV).
Pr&eacute;visualisation de fichiers SWF dans la fen&ecirc;tre de document
1 Dans la fen&ecirc;tre de document, cliquez sur l'espace r&eacute;serv&eacute; du fichier SWF afin de s&eacute;lectionner son contenu.
2 Dans l'inspecteur Propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), cliquez sur le bouton Lire. Cliquez sur le bouton Arr&ecirc;t pour
arr&ecirc;ter la pr&eacute;visualisation. Vous pouvez &eacute;galement pr&eacute;visualiser le fichier SWF dans un navigateur en appuyant sur
la touche F12.
Pour pr&eacute;visualiser tous le fichiers SWF dans une page, appuyez sur les touches Ctrl+Alt+Maj+P (Windows) ou
Maj+Option+Commande+P (Macintosh). Tous les fichiers SWF sont plac&eacute;s en mode Lecture.
D&eacute;finition des propri&eacute;t&eacute;s d'un fichier SWF
Vous pouvez d&eacute;finir les propri&eacute;t&eacute;s des fichiers SWF dans l'inspecteur Propri&eacute;t&eacute;s. Les propri&eacute;t&eacute;s s'appliquent &eacute;galement
aux animations Shockwave.
❖ S&eacute;lectionnez un fichier SWF ou une animation Shockwave, puis d&eacute;finissez ses options dans l'inspecteur Propri&eacute;t&eacute;s
(Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s). Pour afficher toutes les propri&eacute;t&eacute;s, cliquez sur la fl&egrave;che de d&eacute;veloppement dans le coin
inf&eacute;rieur droit de l'inspecteur Propri&eacute;t&eacute;s.
ID D&eacute;finit un ID unique pour le fichier SWF. Entrez un ID dans la zone de texte sans titre, &agrave; l'extr&ecirc;me gauche de
l'inspecteur Propri&eacute;t&eacute;s. Depuis Dreamweaver CS4, un ID unique est requis.
L et H Sp&eacute;cifient la largeur et la hauteur de l'animation, en pixels.
Fichier Sp&eacute;cifie le chemin d'acc&egrave;s au fichier SWF ou Shockwave. Cliquez sur l'ic&ocirc;ne de dossier pour rechercher un
fichier ou entrez le chemin d'acc&egrave;s.
Src D&eacute;finit le chemin d'acc&egrave;s au document source (le fichier FLA), lorsque Dreamweaver et Flash sont tous deux
install&eacute;s sur votre ordinateur. Pour modifier un fichier SWF, mettez &agrave; jour le document source de l'animation.
Ar-pl Sp&eacute;cifie une couleur d'arri&egrave;re-plan pour la zone d'animation. Cette couleur appara&icirc;t &eacute;galement lorsque
l'animation n'est pas en lecture (au cours du chargement et &agrave; la fin de la lecture).
Modifier D&eacute;marre Flash pour mettre &agrave; jour un fichier FLA (fichier cr&eacute;&eacute; dans le programme de cr&eacute;ation Flash). Cette
option est d&eacute;sactiv&eacute;e si Flash n'est pas install&eacute; sur votre ordinateur.
Classe Permet d'appliquer une classe CSS &agrave; l'animation.
Boucle Active la lecture en boucle de l'animation. Si l'option Boucle n'est pas activ&eacute;e, l'animation est lue une fois puis
s'arr&ecirc;te.
Lecture automatique Lit automatiquement l'animation lors du chargement de la page.
Derni&egrave;re mise &agrave; jour le 4/5/2011
259
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Espace V. et Espace H. D&eacute;finit le nombre de pixels d'espace blanc au-dessus, au-dessous et de chaque c&ocirc;t&eacute; de
l'animation.
Qualit&eacute; Contr&ocirc;le l'anticr&eacute;nelage pendant la lecture de l'animation. Des valeurs &eacute;lev&eacute;es am&eacute;liorent l'apparence des
animations. Toutefois, avec des valeurs &eacute;lev&eacute;es, le rendu correct des animations &agrave; l'&eacute;cran exige un processeur plus
rapide. Un param&egrave;tre faible am&eacute;liore la vitesse au d&eacute;triment de l'apparence, alors qu'un param&egrave;tre &eacute;lev&eacute; favorise
l'aspect par rapport &agrave; la vitesse. L'option Basse automatiquement am&eacute;liore la vitesse au d&eacute;part, mais &eacute;galement
l'apparence lorsque cela est possible. L'option Elev&eacute;e automatiquement am&eacute;liore de fa&ccedil;on identique les deux qualit&eacute;s
au d&eacute;part, mais sacrifie ensuite l'apparence pour la vitesse si n&eacute;cessaire.
Echelle D&eacute;termine comment l'animation s'adapte aux dimensions d&eacute;finies dans les zones de largeur et de hauteur. Le
param&egrave;tre par d&eacute;faut affiche l'animation enti&egrave;re.
Alignement D&eacute;termine l'alignement de l'animation sur la page.
Wmode D&eacute;finit le param&egrave;tre Wmode pour le fichier SWF de mani&egrave;re &agrave; &eacute;viter tout conflit avec des &eacute;l&eacute;ments DHTML,
comme des widgets Spry. La valeur par d&eacute;faut est Opaque, qui permet aux &eacute;l&eacute;ments DHTML de s'affiche au-dessus des
fichiers SWF dans un navigateur. Si le fichier SWF comprend des sections transparentes et si vous voulez que les
&eacute;l&eacute;ments DHTML apparaissent derri&egrave;re celles-ci, activez l'option Transparent. Activez l'option Fen&ecirc;tre pour
supprimer le param&egrave;tre Wmode du code et permettre au fichier SWF de s'afficher au-dessus d'autres &eacute;l&eacute;ments
DHTML.
Lire Lit l'animation dans la fen&ecirc;tre de document.
Param&egrave;tres Ouvre une bo&icirc;te de dialogue dans laquelle vous pouvez indiquer des param&egrave;tres suppl&eacute;mentaires &agrave;
transmettre &agrave; l'animation. L'animation doit avoir &eacute;t&eacute; con&ccedil;ue pour recevoir ces param&egrave;tres suppl&eacute;mentaires.
Insertion de documents FlashPaper
La fonctionnalit&eacute; Ins&eacute;rer FlashPaper a &eacute;t&eacute; abandonn&eacute;e depuis Dreamweaver CS5.
Insertion de fichiers FLV
Insertion de fichiers FLV
Vous pouvez ins&eacute;rer facilement des vid&eacute;os FLV dans vos pages Web sans avoir recours &agrave; l'outil de cr&eacute;ation Flash. Vous
devez disposer d'un fichier FLV cod&eacute; avant de commencer.
Derni&egrave;re mise &agrave; jour le 4/5/2011
260
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Dreamweaver ins&egrave;re un composant SWF qui affiche le fichier FLV. Dans un navigateur, ce composant affiche le fichier
FLV s&eacute;lectionn&eacute;, ainsi qu'un jeu de contr&ocirc;les de lecture.
Dreamweaver dispose des options suivantes pour proposer de la vid&eacute;o FLV aux visiteurs de votre site :
Vid&eacute;o en t&eacute;l&eacute;chargement progressif T&eacute;l&eacute;charge le fichier FLV sur le disque dur du visiteur, puis lance sa lecture.
Contrairement aux m&eacute;thodes traditionnelles de fourniture de vid&eacute;o par &laquo; t&eacute;l&eacute;chargement et lecture &raquo;, le
t&eacute;l&eacute;chargement progressif permet de lancer la lecture du fichier vid&eacute;o avant la fin de son t&eacute;l&eacute;chargement.
Vid&eacute;o en flux continu Diffuse en continu le contenu vid&eacute;o et le lit sur une page Web apr&egrave;s une courte p&eacute;riode de mise
en m&eacute;moire tampon, ce qui assure une lecture homog&egrave;ne. Pour activer la diffusion vid&eacute;o en continu sur vos pages
Web, vous devez avoir acc&egrave;s &agrave; Adobe&reg; Flash&reg; Media Server.
Vous devez disposer d'un fichier FLV cod&eacute; avant d'utiliser ce dernier dans Dreamweaver. Vous pouvez ins&eacute;rer les fichiers
vid&eacute;o cr&eacute;&eacute;s avec deux types de codecs (technologies de compression/d&eacute;compression) : Sorenson Squeeze et On2.
Lorsque vous ins&eacute;rez un fichier FLV, tout comme dans le cas d'un fichier SDF ordinaire, Dreamweaver ins&egrave;re du code
qui d&eacute;tecte si l'utilisateur dispose d'une version appropri&eacute;e de Flash Player pour voir la vid&eacute;o. Si ce n'est pas le cas, la
page affiche un contenu alternatif qui invite l'utilisateur &agrave; t&eacute;l&eacute;charger la version la plus r&eacute;cente de Flash Player.
Remarque : Pour pouvoir visualiser un fichier FLV, Flash Player en version 8 ou ult&eacute;rieure doit &ecirc;tre install&eacute; sur
l'ordinateur de l'utilisateur. Si l'utilisateur ne dispose pas de la version requise de Flash Player, mais bien de Flash Player
en version 6.0 r65 ou une version ult&eacute;rieure, le navigateur affiche un programme d'installation express de Flash Player
au lieu du contenu alternatif. Si l'utilisateur refuse l'installation express, la page affiche le contenu alternatif.
Pour plus d'informations sur l'utilisation de vid&eacute;o, consultez le Centre de technologie vid&eacute;o &agrave; l'adresse
www.adobe.com/go/flv_devcenter_fr.
Insertion d'un fichier FLV
1 Choisissez Insertion &gt; M&eacute;dias &gt; FLV.
2 Dans la bo&icirc;te de dialogue Ins&eacute;rer un fichier FLV, choisissez Vid&eacute;o en t&eacute;l&eacute;chargement progressif dans le menu Type
de vid&eacute;o.
3 Renseignez les autres sections de la bo&icirc;te de dialogue selon les besoins puis cliquez sur OK.
Remarque : Microsoft Internet Information Server (IIS) ne traite pas les balises object imbriqu&eacute;es. Pour les pages ASP,
Dreamweaver utilise du code object/embed imbriqu&eacute; au lieu du code object imbriqu&eacute; lors de l'insertion de fichiers SWF
ou FLV.
Derni&egrave;re mise &agrave; jour le 4/5/2011
261
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
D&eacute;finition des options pour la vid&eacute;o en t&eacute;l&eacute;chargement progressif
La bo&icirc;te de dialogue Ins&eacute;rer FLV permet de d&eacute;finir des options pour la remise par t&eacute;l&eacute;chargement progressif d'un
fichier FLV ins&eacute;r&eacute; dans une page Web.
1 Choisissez Insertion &gt; M&eacute;dias &gt; FLV (ou cliquez sur l'ic&ocirc;ne FLV de la cat&eacute;gorie M&eacute;dias de la barre d'insertion
Commun).
2 Dans la bo&icirc;te de dialogue Ins&eacute;rer FLV, choisissez Vid&eacute;o &agrave; t&eacute;l&eacute;chargement progressif dans le menu Type de vid&eacute;o.
3 D&eacute;finissez les options suivantes :
URL Sp&eacute;cifie le chemin absolu ou relatif du fichier FLV. Pour sp&eacute;cifier un chemin relatif (par exemple,
monchemin/mavideo.flv), cliquez sur le bouton Parcourir, acc&eacute;dez au fichier FLV et s&eacute;lectionnez-le. Pour sp&eacute;cifier un
chemin absolu, tapez l'URL (par exemple, http://www.exemple.com/mavideo.flv) du fichier FLV.
Enveloppe D&eacute;finit l'aspect du composant vid&eacute;o. Un aper&ccedil;u de l’enveloppe s&eacute;lectionn&eacute;e appara&icirc;t sous le menu
contextuel Enveloppe.
Largeur Indique la largeur (en pixels) du fichier FLV. Cliquez sur le bouton D&eacute;tecter la taille pour conna&icirc;tre la largeur
exacte du fichier FLV. Si Dreamweaver ne peut pas d&eacute;terminer la largeur, tapez une valeur.
Hauteur Indique la hauteur (en pixels) du fichier FLV. Cliquez sur le bouton D&eacute;tecter la taille pour conna&icirc;tre la
hauteur exacte du fichier FLV. Si Dreamweaver ne peut pas d&eacute;terminer la hauteur, tapez une valeur.
Remarque : Total avec enveloppe indique la largeur et la hauteur du fichier FLV plus la largeur et la hauteur de
l'enveloppe s&eacute;lectionn&eacute;e.
Respecter les proportions Pr&eacute;serve le rapport hauteur/largeur du composant vid&eacute;o. Cette option est s&eacute;lectionn&eacute;e par
d&eacute;faut.
Lecture automatique Indique si la lecture de la vid&eacute;o doit d&eacute;marrer ou non d&egrave;s l’ouverture de la page Web.
Rembobinage automatique D&eacute;termine si le contr&ocirc;le de lecture doit revenir en position de d&eacute;part au terme de la
lecture de la vid&eacute;o.
4 Cliquez sur OK pour fermer la bo&icirc;te de dialogue et ajouter le contenu FLV &agrave; votre page Web.
La commande Ins&eacute;rer FLV g&eacute;n&egrave;re un fichier SWF de lecteur vid&eacute;o et un fichier SWF d'habillage qui serviront &agrave; afficher
votre contenu vid&eacute;o sur une page Web. (Il est parfois n&eacute;cessaire de cliquer sur le bouton Actualiser pour afficher les
nouveaux fichiers dans le panneau Fichiers). Ces fichiers sont stock&eacute;s dans le m&ecirc;me r&eacute;pertoire que le fichier HTML
auquel vous ajoutez du contenu vid&eacute;o. Lorsque vous chargez la page HTML incluant le fichier FLV, Dreamweaver ces
fichiers en tant que fichiers d&eacute;pendants (&agrave; condition de cliquer sur Oui dans la bo&icirc;te de dialogue Placer les fichiers
d&eacute;pendants).
D&eacute;finition des options pour la vid&eacute;o en flux continu
La bo&icirc;te de dialogue Ins&eacute;rer FLV permet de d&eacute;finir des options pour le t&eacute;l&eacute;chargement de vid&eacute;o en flux contenu d'un
fichier FLV ins&eacute;r&eacute; dans une page Web.
1 Choisissez Insertion &gt; M&eacute;dias &gt; FLV (ou cliquez sur l'ic&ocirc;ne FLV de la cat&eacute;gorie M&eacute;dias de la barre d'insertion
Commun).
2 Activez l’option Vid&eacute;o en flux continu dans le menu contextuel Type de vid&eacute;o.
URI du serveur Indique le nom du serveur FCS, le nom de l’application et le nom de l’instance dans le formulaire
rtmp://www.example.com/app_name/instance_name.
Nom du flux Sp&eacute;cifie le nom du fichier FLV &agrave; lire (par exemple, mavideo.flv). L'extension .flv est facultative.
Enveloppe D&eacute;finit l'aspect du composant vid&eacute;o. Un aper&ccedil;u de l’enveloppe s&eacute;lectionn&eacute;e appara&icirc;t sous le menu
contextuel Enveloppe.
Derni&egrave;re mise &agrave; jour le 4/5/2011
262
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Largeur Indique la largeur (en pixels) du fichier FLV. Cliquez sur le bouton D&eacute;tecter la taille pour conna&icirc;tre la largeur
exacte du fichier FLV. Si Dreamweaver ne peut pas d&eacute;terminer la largeur, tapez une valeur.
Hauteur Indique la hauteur (en pixels) du fichier FLV. Cliquez sur le bouton D&eacute;tecter la taille pour conna&icirc;tre la
hauteur exacte du fichier FLV. Si Dreamweaver ne peut pas d&eacute;terminer la hauteur, tapez une valeur.
Remarque : Total avec enveloppe indique la largeur et la hauteur du fichier FLV plus la largeur et la hauteur de
l'enveloppe s&eacute;lectionn&eacute;e.
Respecter les proportions Pr&eacute;serve le rapport hauteur/largeur du composant vid&eacute;o. Cette option est s&eacute;lectionn&eacute;e par
d&eacute;faut.
Vid&eacute;o en temps r&eacute;el Indique si le contenu vid&eacute;o est en temps r&eacute;el ou non. Si vous s&eacute;lectionnez Vid&eacute;o en temps r&eacute;el,
Flash Player diffuse en continu un flux vid&eacute;o provenant de Flash&reg; Media Server. Le nom de la vid&eacute;o en temps r&eacute;el est
le nom indiqu&eacute; dans la zone Nom du flux.
Remarque : Si vous activez l’option Vid&eacute;o en temps r&eacute;el, seul le contr&ocirc;le de volume appara&icirc;t sur l’enveloppe du
composant, car il est impossible d’intervenir sur de la vid&eacute;o en temps r&eacute;el. De plus, les options Lecture automatique et
Rembobinage automatique sont sans effet.
Lecture automatique Indique si la lecture de la vid&eacute;o doit d&eacute;marrer ou non d&egrave;s l’ouverture de la page Web.
Rembobinage automatique D&eacute;termine si le contr&ocirc;le de lecture doit revenir en position de d&eacute;part au terme de la
lecture de la vid&eacute;o.
D&eacute;lai mise en tampon Indique le d&eacute;lai (en secondes) de mise en tampon avant le d&eacute;but de la lecture de la vid&eacute;o. Par
d&eacute;faut, la mise en tampon est param&eacute;tr&eacute;e sur 0, si bien que la lecture de la vid&eacute;o d&eacute;bute instantan&eacute;ment apr&egrave;s un clic
sur le bouton de lecture. (Si l'option Lecture automatique est activ&eacute;e, la lecture de la vid&eacute;o d&eacute;bute d&egrave;s que la connexion
avec le serveur est &eacute;tablie.) Il peut &eacute;galement &ecirc;tre n&eacute;cessaire de d&eacute;finir un d&eacute;lai de mise en m&eacute;moire tampon si vous
fournissez une vid&eacute;o dont le d&eacute;bit en bits est sup&eacute;rieur &agrave; celui de la connexion du visiteur du site ou lorsque le volume
de trafic Internet risque d'engendrer des probl&egrave;mes de bande passante ou de connectivit&eacute;. Par exemple, si vous
souhaitez envoyer 15 secondes de vid&eacute;o &agrave; la page Web avant que cette derni&egrave;re ne lise la vid&eacute;o, d&eacute;finissez le d&eacute;lai de
mise en m&eacute;moire tampon sur 15.
3 Cliquez sur OK pour fermer la bo&icirc;te de dialogue et ajouter le contenu FLV &agrave; votre page Web.
La commande Ins&eacute;rer FLV g&eacute;n&egrave;re un fichier SWF de lecteur vid&eacute;o et un fichier SWF d'habillage qui serviront &agrave; afficher
votre vid&eacute;o sur une page Web. La commande g&eacute;n&egrave;re &eacute;galement un fichier main.asc que vous devez transf&eacute;rer sur votre
serveur Flash Media Server. (Il est parfois n&eacute;cessaire de cliquer sur le bouton Actualiser pour afficher les nouveaux
fichiers dans le panneau Fichiers). Ces fichiers sont stock&eacute;s dans le m&ecirc;me r&eacute;pertoire que le fichier HTML auquel vous
ajoutez du contenu vid&eacute;o. Lorsque vous transf&eacute;rez sur votre serveur la page HTML contenant le fichier FLV, n’oubliez
pas de transf&eacute;rer &eacute;galement ces fichiers SWF, et de transf&eacute;rer le fichier main.asc sur votre serveur Flash Media Server.
Remarque : Si un fichier main.asc se trouve d&eacute;j&agrave; sur votre serveur, consultez l’administrateur de ce serveur avant de
transf&eacute;rer le fichier main.asc g&eacute;n&eacute;r&eacute; par la commande Ins&eacute;rer FLV.
Vous pouvez charger facilement tous les fichiers m&eacute;dias requis en s&eacute;lectionnant l'espace r&eacute;serv&eacute; pour le composant
vid&eacute;o dans la fen&ecirc;tre Document de Dreamweaver puis en cliquant sur le bouton Transf&eacute;rer multim&eacute;dia dans
l'inspecteur Propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s). Pour voir la liste des fichiers n&eacute;cessaires, cliquez sur le bouton Afficher
les fichiers n&eacute;cessaires.
Remarque : Le bouton Transf&eacute;rer multim&eacute;dia ne transf&egrave;re pas le fichier HTML qui contient le composant vid&eacute;o.
Modification des informations de t&eacute;l&eacute;chargement de Flash Player
Lorsque vous ins&eacute;rez un fichier FLV sur une page, Dreamweaver ins&egrave;re du code qui d&eacute;tecte si l'utilisateur dispose de
la version appropri&eacute;e de Flash Player. Si ce n'est pas le cas, la page affiche du contenu alternatif afin d'inviter l'utilisateur
&agrave; t&eacute;l&eacute;charger la version la plus r&eacute;cente. Vous pouvez &agrave; tout moment modifier ce contenu alternatif.
Derni&egrave;re mise &agrave; jour le 4/5/2011
263
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Cette proc&eacute;dure s'applique &eacute;galement aux fichiers SWF.
Remarque : Si l'utilisateur ne dispose pas de la version requise mais bien de Flash Player en version 6.0 r65 ou une version
ult&eacute;rieure, le navigateur affiche un programme d'installation express de Flash Player. Si l'utilisateur refuse l'installation
express, la page affiche le contenu alternatif.
1 Dans la fen&ecirc;tre de document, en mode Cr&eacute;ation, s&eacute;lectionnez le fichier SWF ou FLV.
2 Cliquez sur l'ic&ocirc;ne repr&eacute;sentant un œil dans l'onglet du fichier SWF ou FLV.
Vous pouvez &eacute;galement utiliser le raccourci CTRL + ] pour activer l'affichage du contenu alternatif. Pour r&eacute;tablir
l'affichage du fichier SWF/FLV, appuyez sur CTRL + [ jusqu'&agrave; ce que l'int&eacute;gralit&eacute; du contenu alternatif soit
s&eacute;lectionn&eacute;e. Ensuite, appuyez &agrave; nouveau sur CTRL + [.
3 Modifiez le contenu comme vous le feriez pour tout autre contenu dans Dreamweaver.
Remarque : Il est impossible d'ajouter des fichiers SWF ou FLV en tant que contenu alternatif.
4 Cliquez &agrave; nouveau sur l'ic&ocirc;ne repr&eacute;sentant un œil pour revenir &agrave; l'affichage du fichier SWF ou FLV.
D&eacute;pannage des fichiers FLV
Cette section d&eacute;crit quelques-unes des causes les plus courantes de probl&egrave;mes avec les fichiers FLV.
Affichage des probl&egrave;mes dus &agrave; l'absence de fichiers associ&eacute;s
Le code g&eacute;n&eacute;r&eacute; par Dreamweaver CS4 et versions ult&eacute;rieures repose sur quatre fichiers d&eacute;pendants, diff&eacute;rents du
fichier FLV proprement dit :
• swfobject_modified.js
• expressInstall.swf
• FLVPlayer_Progressive.swf
• Le fichier d'enveloppe (par exemple Clear_Skin_1.swf)
Notez qu'il existe deux fichiers d&eacute;pendants suppl&eacute;mentaires pour Dreamweaver CS4 et versions ult&eacute;rieures par
rapport &agrave; Dreamweaver CS3.
Les deux premiers fichiers (swfobject_modified.js et expressInstall.swf) sont install&eacute;s dans un dossier baptis&eacute; Scripts,
que Dreamweaver cr&eacute;e &agrave; la racine de votre site s'il n'existe pas.
Les deux autres fichiers (FLVPlayer_Progressive.swf et le fichier d'enveloppe) sont install&eacute;s dans le m&ecirc;me dossier que
la page &agrave; laquelle le fichier FLV est incorpor&eacute;. Le fichier d'enveloppe contient les contr&ocirc;les du fichier FLV. Son nom
d&eacute;pend de l'enveloppe choisie dans les options d&eacute;crites dans l'aide de Dreamweaver. Par exemple, si vous choisissez
Clear Skin, le fichier se nomme Clear_Skin_1.swf.
Les quatre fichiers d&eacute;pendants DOIVENT &ecirc;tre t&eacute;l&eacute;charg&eacute;s sur votre serveur distant pour que le fichier FLV s'affiche
correctement.
L'oubli du t&eacute;l&eacute;chargement de ces fichiers est la cause la plus courante des erreurs d'ex&eacute;cution de fichiers FLV sur une
page Web. Si l'un des fichiers manque, un &laquo; carr&eacute; blanc &raquo; risque de s'afficher sur la page.
Pour garantir que vous avez bien t&eacute;l&eacute;charg&eacute; tous les fichiers d&eacute;pendants, utilisez le panneau Fichiers de Dreamweaver
pour t&eacute;l&eacute;charger la page o&ugrave; figure le fichier FLV. Lorsque vous t&eacute;l&eacute;chargez la page, Dreamweaver vous demande si vous
voulez t&eacute;l&eacute;charger les fichiers d&eacute;pendants (sauf si vous avez d&eacute;sactiv&eacute; cette option). Cliquez sur Oui pour t&eacute;l&eacute;charger
les fichiers d&eacute;pendants.
Probl&egrave;mes d'affichage lors d'un aper&ccedil;u local des pages
Derni&egrave;re mise &agrave; jour le 4/5/2011
264
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Les mises &agrave; jour de la s&eacute;curit&eacute; de Dreamweaver CS4 vous emp&ecirc;chent d'utiliser la commande Aper&ccedil;u dans le navigateur
pour tester une page comportant un fichier FLV incorpor&eacute;, sauf si vous d&eacute;finissez un serveur d'&eacute;valuation local dans
votre d&eacute;finition de site Dreamweaver et employez ce serveur d'&eacute;valuation pour pr&eacute;visualiser la page.
Normalement, vous n'avez besoin d'un serveur d'&eacute;valuation que si vous d&eacute;veloppez des pages avec ASP, ColdFusion
ou PHP (voir &laquo; Configuration de l'ordinateur pour le d&eacute;veloppement d'applications &raquo; &agrave; la page 553). Si vous cr&eacute;ez des
sites Web qui n'emploient que HTML et que vous n'avez pas d&eacute;fini de serveur d'&eacute;valuation, une pression sur F12
(Windows) ou Option+F12 (Macintosh) entra&icirc;ne l'affichage de contr&ocirc;les d'enveloppe incoh&eacute;rents. Pour r&eacute;soudre le
probl&egrave;me, d&eacute;finissez le serveur d'&eacute;valuation et utilisez-le pour pr&eacute;visualiser votre page, ou chargez vos fichiers sur un
serveur distant et visualisez-les sur celui-ci.
Remarque : Il se peut que les param&egrave;tres de s&eacute;curit&eacute; soient &eacute;galement responsables de l'impossibilit&eacute; de pr&eacute;visualiser du
contenu FLV local, mais Adobe n'a pas &eacute;t&eacute; en mesure de le confirmer. Vous pouvez tenter de modifier vos param&egrave;tres de
s&eacute;curit&eacute; afin de voir si le probl&egrave;me est r&eacute;solu. Pour plus d'informations sur la modification de vos param&egrave;tres de s&eacute;curit&eacute;,
consultez la Tech Note 117502.
Autres causes potentielles de probl&egrave;mes avec les fichiers FLV
• Si vous &eacute;prouvez des difficult&eacute;s &agrave; pr&eacute;visualiser localement, assurez-vous que l'option Aper&ccedil;u avec fichier
temporaire est bien d&eacute;sactiv&eacute;e dans la section Edition &gt; Pr&eacute;f&eacute;rences &gt; Aper&ccedil;u dans le navigateur.
• Assurez-vous de bien disposer de la version la plus r&eacute;cente du compl&eacute;ment Flash Player.
• Faites preuve de prudence lorsque vous d&eacute;placez des fichiers et des dossiers &agrave; l’ext&eacute;rieur de Dreamweaver. Lorsque
vous d&eacute;placez des fichiers et dossiers &agrave; l’ext&eacute;rieur de Dreamweaver, Dreamweaver ne peut pas garantir l'exactitude
des chemins d'acc&egrave;s aux fichiers associ&eacute;s &agrave; un fichier FLV.
• Vous pouvez remplacer provisoirement le fichier FLV qui pose probl&egrave;me par un fichier FLV dont vous &ecirc;tes s&ucirc;r qu'il
fonctionne. Si le fichier FLV de remplacement fonctionne, c'est que le probl&egrave;me r&eacute;side dans le fichier FLV d'origine
et n'est pas d&ucirc; &agrave; votre navigateur ni &agrave; l'ordinateur.
Modification ou suppression d'un composant FLV
Vous pouvez modifier les param&egrave;tres de la vid&eacute;o sur votre page Web en s&eacute;lectionnant l'espace r&eacute;serv&eacute; pour composant
vid&eacute;o dans la fen&ecirc;tre de document de Dreamweaver et en utilisant l'inspecteur Propri&eacute;t&eacute;s. Vous pouvez &eacute;galement
supprimer le composant vid&eacute;o puis le r&eacute;ins&eacute;rer &agrave; l'aide de la commande Insertion &gt; M&eacute;dias &gt; FLV.
Modification du composant FLV
1 Dans la fen&ecirc;tre du document Dreamweaver, s&eacute;lectionnez l'espace r&eacute;serv&eacute; pour le composant vid&eacute;o en cliquant sur
l’ic&ocirc;ne FLV au centre de l’espace r&eacute;serv&eacute;.
2 Ouvrez l'inspecteur Propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s) et apportez les modifications d&eacute;sir&eacute;es.
Remarque : Il est impossible de modifier le type de vid&eacute;o (de t&eacute;l&eacute;chargement progressif &agrave; diffusion en continu, par
exemple) dans l'inspecteur Propri&eacute;t&eacute;s. Pour modifier le type de vid&eacute;o, supprimez le composant FLV puis r&eacute;ins&eacute;rez-le en
choisissant Insertion &gt; M&eacute;dias &gt; FLV.
Suppression du composant FLV
❖ Dans la fen&ecirc;tre du document Dreamweaver, s&eacute;lectionnez l’espace r&eacute;serv&eacute; pour le composant FLV et appuyez sur la
touche Suppr.
Derni&egrave;re mise &agrave; jour le 4/5/2011
265
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Suppression du code de d&eacute;tection FLV
A partir de la version CS4 de Dreamweaver, Dreamweaver ins&egrave;re directement un code de d&eacute;tection de Flash Player
dans la balise object qui contient le fichier FLV. Par contre, jusqu'&agrave; la version CS3 de Dreamweaver, le code de
d&eacute;tection se trouve en dehors de la balise object du fichier FLV. D&egrave;s lors, si vous voulez supprimer des fichiers FLV de
pages cr&eacute;&eacute;es &agrave; l'aide de Dreamweaver CS3 ou une version plus ancienne, vous devez supprimer les fichiers FLV puis
utiliser la commande Supprimer la d&eacute;tection FLV afin de supprimer &eacute;galement le code de d&eacute;tection.
❖ S&eacute;lectionnez Commandes &gt; Supprimer la d&eacute;tection Flash Video.
Ajout de widgets Web
Un widget Web est un composant de page Web consistant en code HTML, CSS et JavaScript. Un widget Web peut
par exemple &ecirc;tre un accord&eacute;on, un panneau &agrave; onglet ou un calendrier.
Vous pouvez rendre votre s&eacute;lection personnelle de widgets Web disponible dans Dreamweaver &agrave; l'aide du navigateur
de widgets Adobe, une application AIR qui permet de naviguer dans les widgets, de les configurer et de les pr&eacute;visualiser
au moyen d'une interface visuelle.
1 Choisissez Ins&eacute;rer &gt; Widget.
2 Dans la bo&icirc;te de dialogue Widget , s&eacute;lectionnez un widget et un param&egrave;tre pr&eacute;d&eacute;fini (le cas &eacute;ch&eacute;ant), puis cliquez
sur OK.
Vous pouvez &eacute;galement ajouter un widget Web &agrave; une page Dreamweaver (CS5.5 et versions ult&eacute;rieures) en proc&eacute;dant
comme suit :
1 Dans le Widget Browser, acc&eacute;dez &agrave; Mes widgets.
2 S&eacute;lectionnez le widget que vous voulez ajouter.
3 Cliquez sur l'ic&ocirc;ne Glisser-d&eacute;poser dans Dreamweaver, dans le coin sup&eacute;rieur gauche de l'onglet Mode En direct,
et maintenez le bouton de la souris enfonc&eacute;. Faites glisser le widget vers Dreamweaver, dans le mode Cr&eacute;ation
(Windows) ou le mode Cr&eacute;ation ou Code (Macintosh OS).
Vous ne pouvez pas faire glisser le widget dans le mode Affichage en direct, mais vous pouvez utiliser ce mode pour
tester le widget apr&egrave;s l'avoir d&eacute;pos&eacute; sur la page.
Voir aussi
Aide d'Adobe Widget Browser
&laquo; Utilisation des widgets Spry (instructions g&eacute;n&eacute;rales) &raquo; &agrave; la page 438
Ajout de s&eacute;quences audio
Formats de fichiers audio
Il est possible d'ajouter du son &agrave; une page Web. Il existe de nombreux types de fichiers et de formats audio, par
exemple, les fichiers .wav, .midi et .mp3. Certains facteurs sont &agrave; consid&eacute;rer avant de d&eacute;cider d'un format et d'une
m&eacute;thode d'ajout de son : son objectif, son public, la taille du fichier, la qualit&eacute; du son et les diff&eacute;rences entre les
navigateurs.
Derni&egrave;re mise &agrave; jour le 4/5/2011
266
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Remarque : Le traitement des fichiers son est tr&egrave;s diff&eacute;rent et incoh&eacute;rent suivant les navigateurs. Vous pouvez ajouter un
fichier audio &agrave; un fichier SWF, puis incorporer le fichier SWF pour assurer une meilleure coh&eacute;rence.
La liste ci-dessous d&eacute;crit les formats de fichiers audio les plus courants et pr&eacute;sente certains avantages et inconv&eacute;nients
de chaque conception Web.
Le format .midi ou .mid (Musical Instrument Digital Interface) est destin&eacute; &agrave; la musique instrumentale. Les fichiers
MIDI sont reconnus par plusieurs navigateurs et ne requi&egrave;rent pas de plug-in. Bien que leur qualit&eacute; sonore soit tr&egrave;s
bonne, elle peut varier en fonction de la carte son du visiteur. Un petit fichier MIDI peut offrir un clip audio de longue
dur&eacute;e. Les fichiers MIDI ne peuvent pas &ecirc;tre enregistr&eacute;s et doivent &ecirc;tre synth&eacute;tis&eacute;s sur un ordinateur &eacute;quip&eacute; d'un
mat&eacute;riel et d'un logiciel sp&eacute;ciaux.
Le format .wav (Waveform Extension), qui offre une bonne qualit&eacute; sonore, est pris en charge par plusieurs navigateurs
et ne requiert pas de plug-in. Vous pouvez enregistrer vos propres fichiers WAV &agrave; partir d'un CD, d'une cassette, d'un
microphone, etc. Toutefois, la taille importante des fichiers limite s&eacute;rieusement la longueur des clips audio que vous
pouvez utiliser dans vos pages Web.
Le format .aif (Audio Interchange File Format ou AIFF), tout comme le format WAV, offre une bonne qualit&eacute; sonore,
est pris en charge par plusieurs navigateurs et ne requiert pas de plug-in. Vous pouvez &eacute;galement enregistrer des
fichiers AIFF &agrave; partir d'un CD, d'une cassette, d'un microphone, etc. Toutefois, la taille importante des fichiers limite
s&eacute;rieusement la longueur des clips audio que vous pouvez utiliser dans vos pages Web.
Le format .mp3 (Motion Picture Experts Group Audio, ou MPEG-Audio Layer-3) est un format compress&eacute; qui diminue
de mani&egrave;re significative la taille des fichiers audio. La qualit&eacute; sonore est excellente : si un fichier MP3 est correctement
enregistr&eacute; et compress&eacute;, sa qualit&eacute; peut &ecirc;tre &eacute;quivalente &agrave; celle d'un CD. La technologie MP3 permet de lire le fichier
&laquo; en transit &raquo; afin que les visiteurs n'aient pas &agrave; attendre le t&eacute;l&eacute;chargement du fichier entier avant de pouvoir l'&eacute;couter.
Mais le fichier est plus gros qu'un fichier Real Audio, ce qui signifie que le t&eacute;l&eacute;chargement d'une chanson enti&egrave;re peut
s'av&eacute;rer assez long si l'on utilise une connexion &agrave; Internet par modem. Pour lire des fichiers MP3, les visiteurs doivent
t&eacute;l&eacute;charger et installer une application d'aide ou un plug-in tel que QuickTime, Windows Media Player ou RealPlayer.
Le format .ra, .ram, .rpm ou Real Audio offre un degr&eacute; tr&egrave;s &eacute;lev&eacute; de compression avec une taille de fichier inf&eacute;rieure &agrave;
celle du format MP3. Le t&eacute;l&eacute;chargement de fichiers de chanson peut &ecirc;tre effectu&eacute; dans un laps de temps raisonnable.
Les fichiers pouvant &ecirc;tre &laquo; diffus&eacute;s &raquo; &agrave; partir d'un serveur Web normal, les visiteurs peuvent commencer &agrave; &eacute;couter le
son avant la fin du t&eacute;l&eacute;chargement. Les visiteurs doivent t&eacute;l&eacute;charger et installer l'application d'aide ou le plug-in
RealPlayer afin de lire ces fichiers.
.qt, .qtm, .mov ou QuickTime est un format &agrave; la fois audio et vid&eacute;o mis au point par Apple Computer. QuickTime est
inclus dans le syst&egrave;me d'exploitation des ordinateurs Apple Macintosh. Il est utilis&eacute; par la plupart des applications
Macintosh utilisant l'audio, la vid&eacute;o ou des animations. Les PC aussi peuvent lancer les fichiers au format QuickTime,
mais cela n&eacute;cessite le pilote appropri&eacute;. QuickTime prend en charge la plupart des formats de codage, notamment
Cinepak, JPEG et MPEG.
Remarque : En plus des formats les plus courants, mentionn&eacute;s ci-dessus, il existe de nombreux formats audio et vid&eacute;o
utilisables sur le Web. Si vous rencontrez un fichier audio ou vid&eacute;o dont le format vous est inconnu, retrouvez son cr&eacute;ateur
afin d'apprendre comment l'utiliser au mieux.
Voir aussi
&laquo; Insertion et modification d'objets multim&eacute;dias &raquo; &agrave; la page 267
Derni&egrave;re mise &agrave; jour le 4/5/2011
267
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Lien vers un fichier audio
Un lien vers un fichier audio est une m&eacute;thode simple et efficace pour ajouter du son &agrave; une page Web. Cette m&eacute;thode
d'incorporation de fichiers audio permet aux visiteurs de choisir s'ils veulent &eacute;couter le fichier et rend le fichier
disponible pour un plus vaste public.
1 S&eacute;lectionnez le texte ou l'image &agrave; utiliser comme lien vers le fichier audio.
2 Dans l'inspecteur Propri&eacute;t&eacute;s, cliquez sur l'ic&ocirc;ne de dossier, &agrave; c&ocirc;t&eacute; de la zone Lien, pour rechercher le fichier audio,
ou tapez le nom et le chemin d'acc&egrave;s au fichier dans la zone Lien.
Incorporation d'un fichier audio
L'op&eacute;ration consistant &agrave; incorporer un son int&egrave;gre le fichier audio directement dans la page, mais le son est
uniquement lu si les visiteurs du site disposent du plug-in appropri&eacute; pour le fichier audio choisi. Incorporez des
fichiers si vous souhaitez utiliser le son en tant que musique de fond ou pour contr&ocirc;ler le volume, l'apparence du
lecteur sur votre page ou encore les points de d&eacute;marrage et d'arr&ecirc;t du fichier audio.
Lorsque vous incorporez des fichiers son &agrave; vos pages Web, r&eacute;fl&eacute;chissez bien &agrave; l'usage qu'il est possible d'en faire et de
quelle fa&ccedil;on les visiteurs pourraient s'en servir. Proposez toujours une commande permettant d'activer ou de couper
le son, au cas o&ugrave; certains visiteurs ne souhaiteraient pas entendre le contenu audio.
1 En mode Cr&eacute;ation, placez le point d'insertion &agrave; l'endroit o&ugrave; vous souhaitez incorporer le fichier et proc&eacute;dez de l'une
des mani&egrave;res suivantes :
• Dans la cat&eacute;gorie Commun du panneau Insertion, cliquez sur le bouton M&eacute;dias et s&eacute;lectionnez l'ic&ocirc;ne Plug-in
dans le menu.
• S&eacute;lectionnez Insertion &gt; M&eacute;dias &gt; Plug-in.
2 Recherchez le fichier audio puis cliquez sur OK.
3 Entrez la largeur et la hauteur en saisissant les valeurs dans les zones de texte appropri&eacute;es de l'inspecteur Propri&eacute;t&eacute;s
ou en redimensionnant l'espace r&eacute;serv&eacute; au plug-in dans la fen&ecirc;tre de document.
Ces valeurs d&eacute;terminent la taille &agrave; laquelle les contr&ocirc;les audio sont affich&eacute;s dans le navigateur.
Voir aussi
&laquo; Insertion du contenu d'un plug-in Netscape Navigator &raquo; &agrave; la page 271
Ajout d'autres objets multim&eacute;dias
Insertion et modification d'objets multim&eacute;dias
Outre les fichiers SWF et FLV, vous pouvez ins&eacute;rer des vid&eacute;os QuickTime ou Shockwave, des applets Java, des
contr&ocirc;les ActiveX ou d'autres objets audio ou vid&eacute;o dans un document Dreamweaver. Si vous ins&eacute;rez des attributs
d'accessibilit&eacute; avec un objet multim&eacute;dia, vous pouvez d&eacute;finir les attributs d'accessibilit&eacute; et modifier ces valeurs dans le
code HTML.
1 Placez le point d'insertion dans la fen&ecirc;tre de document &agrave; l'endroit o&ugrave; vous souhaitez ins&eacute;rer l'objet.
2 Pour ins&eacute;rer l'objet souhait&eacute;, proc&eacute;dez de l'une des mani&egrave;res suivantes :
• Dans la cat&eacute;gorie Commun du panneau Insertion, cliquez sur le bouton M&eacute;dias et s&eacute;lectionnez l'ic&ocirc;ne
correspondant au type d'objet que vous souhaitez ins&eacute;rer.
Derni&egrave;re mise &agrave; jour le 4/5/2011
268
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
• Choisissez l'objet appropri&eacute; dans le sous-menu Insertion &gt; M&eacute;dias.
• Si l'objet &agrave; ins&eacute;rer n'est pas un objet Shockwave, Applet ou ActiveX, choisissez Plug-in dans le sous-menu
Insertion &gt; M&eacute;dias.
Une bo&icirc;te de dialogue permet alors de choisir un fichier source et de sp&eacute;cifier certains param&egrave;tres de l'objet
multim&eacute;dia.
Pour &eacute;viter que ces bo&icirc;tes de dialogue ne s'affichent, choisissez Edition &gt; Pr&eacute;f&eacute;rences &gt; G&eacute;n&eacute;ral (Windows) ou
Dreamweaver &gt; Pr&eacute;f&eacute;rences &gt; G&eacute;n&eacute;ral (Macintosh) et d&eacute;sactivez l'option Afficher la bo&icirc;te de dialogue lors de
l'insertion d'objets. Pour remplacer la pr&eacute;f&eacute;rence d'affichage des bo&icirc;tes de dialogue, maintenez enfonc&eacute;e la touche Ctrl
(Windows) ou Option (Macintosh) tout en ins&eacute;rant l'objet. Par exemple, pour ins&eacute;rer un espace r&eacute;serv&eacute; pour une
animation Shockwave sans sp&eacute;cifier le fichier correspondant, maintenez la touche Ctrl ou Option enfonc&eacute;e et cliquez sur
le bouton Shockwave &agrave; partir du menu Support de la cat&eacute;gorie Commun du panneau Insertion ou choisissez Insertion &gt;
M&eacute;dias &gt; Shockwave.
3 Compl&eacute;tez les options de la bo&icirc;te de dialogue S&eacute;lectionner un fichier, puis cliquez sur OK.
Remarque : La bo&icirc;te de dialogue Attributs d'accessibilit&eacute; s'affiche si vous avez d&eacute;cid&eacute; d'afficher les attributs lors de
l'insertion de m&eacute;dias dans la bo&icirc;te de dialogue Edition &gt; Pr&eacute;f&eacute;rences.
4 D&eacute;finissez les attributs d'accessibilit&eacute;.
Remarque : Vous pouvez &eacute;galement modifier les attributs d'un objet multim&eacute;dia. Pour ce faire, s&eacute;lectionnez l'objet et
modifiez le code HTML en mode Code, ou cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche
Contr&ocirc;le enfonc&eacute;e (Macintosh), puis s&eacute;lectionnez Modifier le code de la balise.
Titre Entrez un titre pour l'objet multim&eacute;dia.
Cl&eacute; d'acc&egrave;s Entrez un &eacute;quivalent clavier (une lettre) dans la zone de texte pour s&eacute;lectionner l'objet de formulaire dans
le navigateur. Cela permet aux visiteurs du site d'utiliser la touche Ctrl (Windows) conjointement &agrave; la cl&eacute; d'acc&egrave;s pour
acc&eacute;der &agrave; l'objet. Par exemple, si vous entrez B comme Cl&eacute; d'acc&egrave;s, utilisez Ctrl+B pour s&eacute;lectionner l'objet dans le
navigateur.
Ordre des tabulations Entrez un nombre pour d&eacute;finir l'ordre de tabulation de l'objet. La d&eacute;finition d'un ordre
d'apparition peut se r&eacute;v&eacute;ler utile lorsque la page contient d'autres liens et d'autres objets de formulaire et que vous
voulez que l'utilisateur passe de l'un &agrave; l'autre dans un ordre particulier. Si vous d&eacute;finissez un ordre d'apparition pour
un objet, assurez-vous de le faire &eacute;galement pour tous les autres objets.
5 Cliquez sur OK pour ins&eacute;rer l'objet multim&eacute;dia.
Remarque : Si vous cliquez sur Annuler, un espace r&eacute;serv&eacute; pour l'objet multim&eacute;dia s'affiche dans le document, mais
Dreamweaver ne lui associe ni balises ni attributs d'accessibilit&eacute;.
Pour sp&eacute;cifier un fichier source, d&eacute;finir les dimensions et d'autres param&egrave;tres et attributs, utilisez l'inspecteur
Propri&eacute;t&eacute;s pour chaque objet. Vous pouvez modifier les attributs d'accessibilit&eacute; d'un objet.
Voir aussi
&laquo; Optimisation de l'espace de travail pour la conception de pages accessibles &raquo; &agrave; la page 717
&laquo; Insertion du contenu d'un plug-in Netscape Navigator &raquo; &agrave; la page 271
Lancement d'un &eacute;diteur externe pour des fichiers multim&eacute;dias
Vous pouvez lancer un &eacute;diteur externe depuis Dreamweaver pour modifier la plupart des fichiers multim&eacute;dias. Vous
pouvez &eacute;galement d&eacute;cider de l'&eacute;diteur que doit lancer Dreamweaver pour modifier le fichier.
1 Assurez-vous que le type du fichier multim&eacute;dia est associ&eacute; &agrave; un &eacute;diteur sur votre syst&egrave;me.
Derni&egrave;re mise &agrave; jour le 4/5/2011
269
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Pour savoir quel &eacute;diteur est associ&eacute; au type de fichier, s&eacute;lectionnez Edition &gt; Pr&eacute;f&eacute;rences dans Dreamweaver, puis
Types de fichiers/Editeurs dans la liste Cat&eacute;gorie. Cliquez sur l'extension de fichier dans la colonne Extensions pour
consulter le ou les &eacute;diteurs associ&eacute;s dans la colonne Editeurs. Vous pouvez modifier l'&eacute;diteur associ&eacute; &agrave; un type de
fichier.
2 Double-cliquez sur le fichier multim&eacute;dia dans le panneau Fichiers pour lancer l'&eacute;diteur externe et ouvrir le fichier.
L'&eacute;diteur qui est ex&eacute;cut&eacute; lorsque vous double-cliquez sur le fichier du panneau Fichiers est appel&eacute; &laquo; &eacute;diteur principal &raquo;.
Si vous double-cliquez sur un fichier image, par exemple, Dreamweaver ouvre le fichier dans l'application principale
de retouche d'image d&eacute;finie, par exemple Adobe Fireworks.
3 Si vous ne souhaitez pas utiliser l'&eacute;diteur externe principal pour modifier le fichier, vous pouvez effectuer l'une des
op&eacute;rations suivantes pour utiliser un autre &eacute;diteur :
• Dans le panneau Fichiers, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfonc&eacute;e (Macintosh) sur le nom du fichier concern&eacute; et s&eacute;lectionnez Ouvrir avec dans le menu qui s'affiche.
• En mode Cr&eacute;ation, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e
(Macintosh) sur l'&eacute;l&eacute;ment multim&eacute;dia de la page affich&eacute;e, puis s&eacute;lectionnez Modifier avec dans le menu contextuel.
Sp&eacute;cification de l'&eacute;diteur &agrave; lancer depuis Dreamweaver
Vous pouvez d&eacute;finir l'&eacute;diteur &agrave; lancer par Dreamweaver pour modifier un type de fichier et pour ajouter ou supprimer
des types de fichiers reconnus par Dreamweaver.
Indication explicite des &eacute;diteurs externes &agrave; lancer pour un type de fichier donn&eacute;
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences, puis s&eacute;lectionnez Types de fichiers/Editeurs dans la liste Cat&eacute;gorie.
Les extensions de fichiers, par exemple .gif, .wav et .mpg, apparaissent dans la liste de gauche, sous le titre Extensions.
Les &eacute;diteurs associ&eacute;s &agrave; une extension apparaissent dans la liste de droite, sous le titre Editeurs.
2 S&eacute;lectionnez l'extension de type de fichier dans la liste Extensions, puis effectuez l'une des op&eacute;rations suivantes :
• Pour associer un nouvel &eacute;diteur au type de fichier, cliquez sur le bouton plus (+), au-dessus de la liste Editeurs et
renseignez la bo&icirc;te de dialogue qui s'affiche.
Par exemple, s&eacute;lectionnez l'ic&ocirc;ne de l'application Acrobat pour l'associer au type de fichier.
• Pour faire d'un &eacute;diteur l'&eacute;diteur principal pour un type de fichier donn&eacute; (c'est-&agrave;-dire celui qui s'ouvre
automatiquement lorsque vous double-cliquez sur un fichier de ce type dans le panneau Fichiers), s&eacute;lectionnez cet
&eacute;diteur dans la liste Editeurs, puis cliquez sur Rendre principal.
• Pour qu'un &eacute;diteur ne soit plus li&eacute; &agrave; un type de fichier donn&eacute;, s&eacute;lectionnez cet &eacute;diteur dans la liste Editeurs et cliquez
sur le bouton moins (-) au-dessus de la liste.
Ajout d'un nouveau type de fichier et un &eacute;diteur associ&eacute;
1 Cliquez sur le bouton plus (+), au-dessus de la liste Extensions et entrez une extension de type de fichier (saisissez
le point pr&eacute;c&eacute;dent l'extension) ou plusieurs extensions li&eacute;es et s&eacute;par&eacute;es par des espaces.
Vous pouvez, par exemple, entrer .xml .xsl si vous souhaitez associer ces fichiers avec un &eacute;diteur XML install&eacute; sur
votre syst&egrave;me.
2 Pour s&eacute;lectionner un &eacute;diteur pour le type de fichier, cliquez sur le bouton plus (+), au-dessus de la liste Editeurs et
renseignez la bo&icirc;te de dialogue qui s'affiche.
Derni&egrave;re mise &agrave; jour le 4/5/2011
270
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Suppression d'un type de fichier
❖ S&eacute;lectionnez le type de fichier dans la liste Extensions et cliquez sur le bouton moins (-) au-dessus de la liste
Extensions
Remarque : L'annulation de la suppression d'un type de fichier &eacute;tant impossible, soyez prudent lors d'une telle op&eacute;ration.
Utilisation des Design Notes avec les objets multim&eacute;dias
Comme pour la plupart des objets dans Dreamweaver, vous pouvez ajouter des Design Notes &agrave; un objet multim&eacute;dia.
Les Design Notes sont des notes associ&eacute;es &agrave; un fichier particulier et stock&eacute;es dans un fichier s&eacute;par&eacute;. Les Design Notes
vous permettent de conserver des informations suppl&eacute;mentaires sur les documents, par exemple, des commentaires
sur l'&eacute;tat des fichiers ou le nom des fichiers source des images.
1 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contr&ocirc;le enfonc&eacute;e (Macintosh)
sur l'objet dans la fen&ecirc;tre de document.
Remarque : Vous devez d&eacute;finir votre site avant d'ajouter des Design Notes &agrave; un objet.
2 Cliquez sur Design Notes de la page dans le menu contextuel.
3 Entrez les informations souhait&eacute;es dans la Design Note.
Vous pouvez &eacute;galement ajouter une Design Note &agrave; un objet multim&eacute;dia &agrave; partir du panneau Fichiers en s&eacute;lectionnant
le fichier, en affichant le menu contextuel, puis en choisissant l'option Design Notes dans ce dernier.
Voir aussi
&laquo; Activation et d&eacute;sactivation des Design Notes pour un site &raquo; &agrave; la page 109
&laquo; Stockage des informations sur les fichiers dans des Design Notes &raquo; &agrave; la page 108
Insertion d'animations Shockwave
Vous pouvez utiliser Dreamweaver pour ins&eacute;rer des animations Shockwave dans vos documents. Adobe&reg; Shockwave&reg;,
une norme pour les &eacute;l&eacute;ments multim&eacute;dia interactifs sur le Web, est un format compress&eacute; qui autorise le
t&eacute;l&eacute;chargement rapide des fichiers multim&eacute;dia cr&eacute;&eacute;s dans Adobe&reg; Director&reg;, ainsi que leur lecture dans la plupart des
navigateurs.
1 Dans la fen&ecirc;tre de document, placez le point d'insertion &agrave; l'endroit o&ugrave; vous souhaitez ins&eacute;rer une animation
Shockwave et proc&eacute;dez de l'une des mani&egrave;res suivantes :
• Dans la cat&eacute;gorie Commun du panneau Insertion, cliquez sur le bouton M&eacute;dias puis s&eacute;lectionnez l'ic&ocirc;ne
Shockwave
dans le menu.
• Choisissez Insertion &gt; M&eacute;dias &gt; Shockwave.
2 Dans la bo&icirc;te de dialogue qui s'affiche, s&eacute;lectionnez un fichier d'animation.
3 Dans l'inspecteur Propri&eacute;t&eacute;s, tapez la largeur et la hauteur de l'animation dans les zones L et H.
Voir aussi
&laquo; D&eacute;finition des propri&eacute;t&eacute;s d'un fichier SWF &raquo; &agrave; la page 258
Derni&egrave;re mise &agrave; jour le 4/5/2011
271
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Ajout de vid&eacute;o (non FLV)
Plusieurs m&eacute;thodes vous permettent d'ajouter une vid&eacute;o &agrave; votre page Web et vous pouvez faire appel &agrave; divers formats.
L'utilisateur peut t&eacute;l&eacute;charger les vid&eacute;os ou elles peuvent &ecirc;tre diffus&eacute;es et lues pendant leur t&eacute;l&eacute;chargement.
1 Placez le fichier vid&eacute;o dans le dossier de votre site.
Ces clips se pr&eacute;sentent souvent au format AVI ou MPEG.
2 Ins&eacute;rez un lien vers la s&eacute;quence ou incorporez-la dans votre page.
Pour &eacute;tablir un lien vers la s&eacute;quence, entrez un texte pour le lien (par exemple, &laquo; T&eacute;l&eacute;chargez la vid&eacute;o &raquo;), s&eacute;lectionnez
le texte et cliquez sur l'ic&ocirc;ne de dossier dans l'inspecteur de s&eacute;lections. Recherchez le fichier vid&eacute;o et s&eacute;lectionnez-le.
Remarque : L'utilisateur doit t&eacute;l&eacute;charger une application d'aide (un plug-in) pour visualiser les formats lus en transit,
comme Real Media, QuickTime et Windows Media.
Insertion du contenu d'un plug-in Netscape Navigator
Vous pouvez cr&eacute;er du contenu, par exemple une s&eacute;quence vid&eacute;o QuickTime pour un plug-in Netscape Navigator, puis
utiliser Dreamweaver pour ins&eacute;rer ce contenu dans un document HTML. Par exemple, RealPlayer et QuickTime sont
des plug-ins par d&eacute;faut, alors que les fichiers MP3 et les animations QuickTime sont des fichiers de contenu.
Vous pouvez afficher un aper&ccedil;u des animations qui font directement appel aux plug-ins Netscape Navigator dans le
mode Cr&eacute;ation dans la fen&ecirc;tre de document. Vous pouvez lire simultan&eacute;ment tous les &eacute;l&eacute;ments des plug-ins pour
savoir comment la page s'affichera sur le poste de l'utilisateur ou lire chaque &eacute;l&eacute;ment individuellement pour vous
assurer que vous avez incorpor&eacute; le bon &eacute;l&eacute;ment multim&eacute;dia.
Remarque : Il n'est pas possible d'afficher un aper&ccedil;u des films ou animations bas&eacute;es sur des contr&ocirc;les ActiveX.
Apr&egrave;s avoir ins&eacute;r&eacute; le contenu d'un plug-in Netscape Navigator, utilisez l'inspecteur Propri&eacute;t&eacute;s pour en d&eacute;finir les
param&egrave;tres. Pour afficher les propri&eacute;t&eacute;s suivantes dans l'inspecteur Propri&eacute;t&eacute;s, s&eacute;lectionnez un objet plug-in Netscape
Navigator.
Lors de son ouverture, l'inspecteur Propri&eacute;t&eacute;s affiche les propri&eacute;t&eacute;s les plus couramment utilis&eacute;es. Cliquez sur la fl&egrave;che
d'agrandissement, dans le coin inf&eacute;rieur droit, pour afficher toutes les propri&eacute;t&eacute;s.
Insertion du contenu d'un plug-in Netscape Navigator et d&eacute;finition de ses propri&eacute;t&eacute;s
1 Dans la fen&ecirc;tre de document (mode Cr&eacute;ation), placez le point d'insertion &agrave; l'endroit o&ugrave; vous souhaitez ins&eacute;rer le
contenu, puis proc&eacute;dez de l'une des mani&egrave;res suivantes :
• Dans la cat&eacute;gorie Commun du panneau Insertion, cliquez sur le bouton M&eacute;dias puis s&eacute;lectionnez l'ic&ocirc;ne Plug-in
dans le menu.
• S&eacute;lectionnez Insertion &gt; M&eacute;dias &gt; Plug-in.
2 Dans la bo&icirc;te de dialogue qui s'affiche, s&eacute;lectionnez un fichier de contenu pour un plug-in Netscape Navigator, puis
cliquez sur OK.
3 D&eacute;finissez les options du plug-in dans l'inspecteur Propri&eacute;t&eacute;s.
Nom Sp&eacute;cifie un nom permettant d'identifier le plug-in dans un script. Tapez un nom dans la zone de texte sans titre,
&agrave; l'extr&ecirc;me gauche de l'inspecteur Propri&eacute;t&eacute;s.
L et H Sp&eacute;cifient, en pixels, la largeur et la hauteur allou&eacute;es &agrave; l'objet sur la page.
Src Sp&eacute;cifie le fichier des donn&eacute;es source. Cliquez sur l'ic&ocirc;ne de dossier pour rechercher un fichier ou entrez un nom
de fichier.
Derni&egrave;re mise &agrave; jour le 4/5/2011
272
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
URL du plug-in Sp&eacute;cifie l'URL pour l'attribut pluginspace. Indiquez l'URL compl&egrave;te du site &agrave; partir duquel les
utilisateurs peuvent t&eacute;l&eacute;charger le plug-in. Si l'utilisateur qui consulte votre page ne poss&egrave;de pas le plug-in n&eacute;cessaire,
le navigateur essaie de le t&eacute;l&eacute;charger &agrave; partir de cette URL.
Alignement D&eacute;termine l'alignement de l'objet sur la page.
Espace V. et Espace H. Sp&eacute;cifient la quantit&eacute; d'espace blanc, en pixels, au-dessus, au-dessous et de chaque c&ocirc;t&eacute; du plug-in.
Bordure Sp&eacute;cifie la largeur de la bordure autour du plug-in.
Param&egrave;tres Ouvre une bo&icirc;te de dialogue permettant d'indiquer des param&egrave;tres suppl&eacute;mentaires &agrave; transmettre au
plug-in Netscape Navigator. Nombreux sont les plug-ins qui r&eacute;pondent &agrave; des param&egrave;tres particuliers.
Vous pouvez &eacute;galement afficher les attributs affect&eacute;s au plug-in s&eacute;lectionn&eacute; en cliquant sur le bouton Attribut. Vous
pouvez modifier, ajouter ou supprimer des attributs tels que la hauteur et la largeur dans cette bo&icirc;te de dialogue.
Lecture de contenu d'un plug-in dans la fen&ecirc;tre de document
1 Ins&eacute;rez un ou plusieurs &eacute;l&eacute;ments multim&eacute;dias &agrave; l'aide d'une des m&eacute;thodes d&eacute;crites dans la section pr&eacute;c&eacute;dente.
2 Effectuez l'une des op&eacute;rations suivantes :
• S&eacute;lectionnez un des &eacute;l&eacute;ments multim&eacute;dia que vous avez ins&eacute;r&eacute;s, puis choisissez la commande Affichage &gt; Plug-ins
&gt; Lire ou cliquez sur le bouton de lecture de l'inspecteur Propri&eacute;t&eacute;s.
• Choisissez la commande Affichage &gt; Plug-ins &gt; Lire tout pour lire tous les &eacute;l&eacute;ments multim&eacute;dia de la page
s&eacute;lectionn&eacute;e qui font appel &agrave; des plug-ins.
Remarque : L'option Lire tout s'applique uniquement au document actif. Elle ne s'applique pas aux autres documents
dans un ensemble de cadres par exemple.
Arr&ecirc;t de la lecture du contenu d'un plug-in
❖ S&eacute;lectionnez un &eacute;l&eacute;ment multim&eacute;dia, puis choisissez la commande Affichage &gt; Plug-ins &gt; Arr&ecirc;ter ou cliquez sur le
bouton d'arr&ecirc;t dans l'inspecteur Propri&eacute;t&eacute;s.
Vous pouvez &eacute;galement s&eacute;lectionner Affichage &gt; Plug-ins &gt; Arr&ecirc;ter tout pour interrompre la lecture de tous les
contenus des plug-ins.
D&eacute;pannage des plug-ins de Netscape Navigator
Vous avez suivi les &eacute;tapes permettant de lire le contenu d'un plug-in dans la fen&ecirc;tre de document, mais constatez
qu'une partie ne fonctionne pas. Essayez l'op&eacute;ration suivante :
• V&eacute;rifiez que le plug-in associ&eacute; est bien install&eacute; sur votre ordinateur et que sa version est compatible avec le contenu
charg&eacute;.
• Ouvrez le fichier Configuration/Plugins/UnsupportedPlugins.txt dans un &eacute;diteur de texte et v&eacute;rifiez si le plug-in
posant probl&egrave;me est r&eacute;pertori&eacute;. Ce fichier conserve la trace des plug-ins &eacute;tant la source de probl&egrave;mes dans
Dreamweaver et qui ne sont donc pas pris en charge. Si vous constatez des probl&egrave;mes avec un plug-in particulier,
il est souhaitable de l'ajouter &agrave; ce fichier.
• V&eacute;rifiez que vous avez suffisamment de m&eacute;moire. Certains plug-ins n&eacute;cessitent de 2 &agrave; 5 Mo de m&eacute;moire
suppl&eacute;mentaire pour fonctionner.
Derni&egrave;re mise &agrave; jour le 4/5/2011
273
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Insertion d'un contr&ocirc;le ActiveX
Vous pouvez ajouter un contr&ocirc;le ActiveX &agrave; votre page. Les contr&ocirc;les ActiveX (autrefois appel&eacute;s commandes OLE) sont
des composants r&eacute;utilisables, un peu comme des applications miniatures, qui peuvent fonctionner comme des plugins de navigateurs. Ils fonctionnent dans Internet Explorer sous Windows, mais pas sur Macintosh ni dans Netscape
Navigator. L'objet ActiveX de Dreamweaver vous permet de fournir les attributs et param&egrave;tres d'un contr&ocirc;le ActiveX
charg&eacute; par le navigateur du visiteur.
Une fois un objet ActiveX ins&eacute;r&eacute;, utilisez l'inspecteur Propri&eacute;t&eacute;s pour d&eacute;finir les attributs de la balise object et les
param&egrave;tres du contr&ocirc;le ActiveX. Cliquez sur Param&egrave;tres dans l'inspecteur Propri&eacute;t&eacute;s pour indiquer des noms et des
valeurs de propri&eacute;t&eacute;s qui n'apparaissent pas dans l'inspecteur Propri&eacute;t&eacute;s. Il n'existe pas de format standard
unanimement accept&eacute; pour les param&egrave;tres des contr&ocirc;les ActiveX. Consultez la documentation sur le contr&ocirc;le ActiveX
que vous utilisez pour savoir quels param&egrave;tres choisir.
❖ Dans la fen&ecirc;tre de document, positionnez le curseur &agrave; l'emplacement o&ugrave; ins&eacute;rer le contenu et proc&eacute;dez de l'une des
mani&egrave;res suivantes :
• Dans la cat&eacute;gorie Commun du panneau Insertion, cliquez sur le bouton M&eacute;dias puis s&eacute;lectionnez l'ic&ocirc;ne ActiveX
.
• Dans la cat&eacute;gorie Commun du panneau Insertion, cliquez sur le bouton M&eacute;dias puis s&eacute;lectionnez l'ic&ocirc;ne ActiveX.
Lorsque l'ic&ocirc;ne ActiveX s'affiche dans le panneau Insertion, vous pouvez la faire glisser jusqu'&agrave; la fen&ecirc;tre du
document.
• Choisissez Insertion &gt; M&eacute;dias &gt; ActiveX. Une ic&ocirc;ne indique l'emplacement de la page o&ugrave; appara&icirc;tra le contr&ocirc;le
ActiveX dans Internet Explorer.
Propri&eacute;t&eacute;s d'ActiveX
Lors de son ouverture, l'inspecteur Propri&eacute;t&eacute;s affiche les propri&eacute;t&eacute;s les plus couramment utilis&eacute;es. Cliquez sur la fl&egrave;che
d'agrandissement, dans le coin inf&eacute;rieur droit, pour afficher toutes les propri&eacute;t&eacute;s.
Nom Sp&eacute;cifie un nom qui permet d'identifier l'objet ActiveX pour les scripts. Tapez un nom dans la zone de texte sans
titre, &agrave; l'extr&ecirc;me gauche de l'inspecteur Propri&eacute;t&eacute;s.
L et H Sp&eacute;cifient la largeur et la hauteur de l'objet, en pixels.
ID de classe Identifie le contr&ocirc;le ActiveX pour le navigateur. Tapez la valeur ou choisissez-en une dans le menu
contextuel. Lorsque la page est charg&eacute;e, le navigateur utilise l'ID de classe pour localiser le contr&ocirc;le ActiveX requis par
l'objet ActiveX associ&eacute; &agrave; la page. Si le navigateur ne peut pas localiser le contr&ocirc;le ActiveX sp&eacute;cifi&eacute;, il essaie de le
t&eacute;l&eacute;charger &agrave; partir de l'emplacement sp&eacute;cifi&eacute; dans le champ Base.
Incorporer Ajoute une balise embed dans la balise object pour le contr&ocirc;le ActiveX. S'il existe un plug-in Netscape
Navigator &eacute;quivalent au contr&ocirc;le ActiveX, la balise embed active ce plug-in. Dreamweaver affecte les valeurs que vous
avez saisies comme propri&eacute;t&eacute;s d'objets ActiveX aux plug-ins &eacute;quivalents de Netscape Navigator.
Alignement D&eacute;termine l'alignement de l'objet sur la page.
Param&egrave;tres Ouvre une bo&icirc;te de dialogue dans laquelle vous pouvez indiquer des param&egrave;tres suppl&eacute;mentaires &agrave;
transmettre &agrave; l'objet ActiveX. Nombreux sont les contr&ocirc;les ActiveX qui poss&egrave;dent des param&egrave;tres particuliers.
Src D&eacute;finit le fichier de donn&eacute;es &agrave; utiliser pour un plug-in Netscape Navigator, si l'option Incorporer est activ&eacute;e. Si
vous n'entrez pas de valeur, Dreamweaver essaie d'en d&eacute;terminer une &agrave; partir des propri&eacute;t&eacute;s d'ActiveX entr&eacute;es
pr&eacute;c&eacute;demment.
Espace V. et Espace H. Sp&eacute;cifient la quantit&eacute; d'espace blanc, en pixels, au-dessus, au-dessous et de chaque c&ocirc;t&eacute; de
l'objet.
Base Sp&eacute;cifie l'URL qui contient le contr&ocirc;le ActiveX. Internet Explorer t&eacute;l&eacute;charge le contr&ocirc;le ActiveX &agrave; partir de cet
emplacement s'il n'a pas &eacute;t&eacute; install&eacute; sur le syst&egrave;me du visiteur. Si vous ne pr&eacute;cisez pas le param&egrave;tre Base et que le
Derni&egrave;re mise &agrave; jour le 4/5/2011
274
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
contr&ocirc;le ActiveX n&eacute;cessaire n'est pas d&eacute;j&agrave; install&eacute; sur l'ordinateur du visiteur, son navigateur ne pourra pas afficher
l'objet ActiveX.
Img sec. Sp&eacute;cifie une image &agrave; afficher si le navigateur ne prend pas en charge la balise object. Cette option n'est
disponible que si l'option Incorporer est d&eacute;s&eacute;lectionn&eacute;e.
Donn&eacute;es Sp&eacute;cifie un fichier de donn&eacute;es que le contr&ocirc;le ActiveX doit charger. De nombreux contr&ocirc;les ActiveX, tels que
Shockwave et RealPlayer, n'utilisent pas ce param&egrave;tre.
Insertion d'une applet Java
Vous pouvez ins&eacute;rer une applet Java dans un document HTML &agrave; l'aide de Dreamweaver. Java est un langage de
programmation qui permet de d&eacute;velopper des applications l&eacute;g&egrave;res (applets) pouvant &ecirc;tre incorpor&eacute;es dans des pages Web.
Une fois une applet Java ins&eacute;r&eacute;e, utilisez l'inspecteur Propri&eacute;t&eacute;s pour d&eacute;finir les param&egrave;tres. S&eacute;lectionnez une applet
Java pour afficher ses propri&eacute;t&eacute;s dans l'inspecteur Propri&eacute;t&eacute;s.
1 Dans la fen&ecirc;tre de document, placez le point d'insertion &agrave; l'endroit o&ugrave; vous souhaitez ins&eacute;rer l'applet, puis proc&eacute;dez
de l'une des mani&egrave;res suivantes :
• Dans la cat&eacute;gorie Commun du panneau Insertion, cliquez sur le bouton M&eacute;dias puis s&eacute;lectionnez l'ic&ocirc;ne Applet
.
• Choisissez Insertion &gt; M&eacute;dias &gt; Applet.
2 S&eacute;lectionnez un fichier contenant une applet Java.
Propri&eacute;t&eacute;s des applets Java
Lors de son ouverture, l'inspecteur Propri&eacute;t&eacute;s affiche les propri&eacute;t&eacute;s les plus couramment utilis&eacute;es. Cliquez sur la fl&egrave;che
d'agrandissement, dans le coin inf&eacute;rieur droit, pour afficher toutes les propri&eacute;t&eacute;s.
Nom Sp&eacute;cifie un nom permettant d'identifier l'applet dans un script. Tapez un nom dans la zone de texte sans titre, &agrave;
l'extr&ecirc;me gauche de l'inspecteur Propri&eacute;t&eacute;s.
L et H Sp&eacute;cifient la largeur et la hauteur de l'applet, en pixels.
Code Sp&eacute;cifie le fichier contenant le code Java de l'applet. Cliquez sur l'ic&ocirc;ne de dossier pour rechercher un fichier ou
entrez un nom de fichier.
Base Identifie le dossier contenant l'applet s&eacute;lectionn&eacute;e. Lorsque vous choisissez une applet, cette zone de texte est
renseign&eacute;e automatiquement.
Alignement D&eacute;termine l'alignement de l'objet sur la page.
Sec Sp&eacute;cifie un contenu de remplacement (g&eacute;n&eacute;ralement une image) &agrave; afficher si le navigateur de l'utilisateur ne prend
pas en charge les applets Java ou si Java y est d&eacute;sactiv&eacute;. Si vous tapez du texte, Dreamweaver ins&egrave;re le texte comme &eacute;tant
la valeur de l'attribut alt de l'applet. Si vous s&eacute;lectionnez une image, Dreamweaver ins&egrave;re une balise img entre les
balises applet d'ouverture et de fermeture.
Remarque : Pour sp&eacute;cifier un contenu de remplacement visible dans Netscape Navigator (avec JavaScript d&eacute;sactiv&eacute;)
comme dans Lynx (navigateur bas&eacute; sur le texte), s&eacute;lectionnez une image, puis ajoutez manuellement un attribut alt &agrave;
la balise img dans l'inspecteur de code.
Espace V. et Espace H. Sp&eacute;cifient la quantit&eacute; d'espace blanc, en pixels, au-dessus, au-dessous et de chaque c&ocirc;t&eacute; de
l'applet.
Param&egrave;tres Ouvre une bo&icirc;te de dialogue dans laquelle vous pouvez indiquer des param&egrave;tres suppl&eacute;mentaires &agrave;
transmettre &agrave; l'applet. Nombreuses sont les applets qui r&eacute;pondent &agrave; des param&egrave;tres particuliers.
Derni&egrave;re mise &agrave; jour le 4/5/2011
275
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Utilisation de comportements pour contr&ocirc;ler les objets multim&eacute;dias
Vous pouvez ajouter des comportements &agrave; votre page pour commencer ou arr&ecirc;ter la lecture de divers objets
multim&eacute;dia.
Contr&ocirc;ler Shockwave ou Flash Permet de lire, d'arr&ecirc;ter, de rembobiner ou d'atteindre un cadre dans une animation
Shockwave ou un fichier SWF
Lire le son Permet de jouer un son. Vous pouvez ainsi jouer un effet sonore d&egrave;s que l'utilisateur survole un lien &agrave; l'aide
de la souris.
V&eacute;rifier le Plug-in Permet de v&eacute;rifier si les visiteurs de votre site disposent du plug-in requis, puis de les diriger vers
diff&eacute;rentes URL, en fonction du r&eacute;sultat. Cela s'applique uniquement aux plug-ins de Netscape Navigator, car ce
comportement ne v&eacute;rifie pas les contr&ocirc;les ActiveX.
Voir aussi
&laquo; Application du comportement Contr&ocirc;ler Shockwave ou SWF &raquo; &agrave; la page 365
&laquo; Application du comportement Lire le son &raquo; &agrave; la page 369
&laquo; Application du comportement V&eacute;rifier le plug-in &raquo; &agrave; la page 364
Utilisation de param&egrave;tres pour contr&ocirc;ler des objets multim&eacute;dia
D&eacute;finissez les param&egrave;tres sp&eacute;ciaux pour contr&ocirc;ler les fichiers Shockwave et SWF, les contr&ocirc;les ActiveX, les plug-ins
Netscape Navigator et les applets Java. Les param&egrave;tres sont utilis&eacute;s avec les balises object, embed et applet. Les
param&egrave;tres d&eacute;finissent des attributs sp&eacute;cifiques aux diff&eacute;rents types d'objets. Par exemple, un fichier SWF peut
disposer du param&egrave;tre qualit&eacute; &lt;paramname=&quot;quality&quot;value=&quot;best&quot;&gt; pour la balise object. La bo&icirc;te de dialogue
Param&egrave;tre est disponible &agrave; partir de l'inspecteur Propri&eacute;t&eacute;s. Consultez la documentation sur l'objet que vous utilisez
pour conna&icirc;tre les param&egrave;tres requis.
Remarque : Il n'existe pas de standard unanimement accept&eacute; pour l'identification des fichiers de donn&eacute;es des contr&ocirc;les
ActiveX. Consultez la documentation sur le contr&ocirc;le ActiveX que vous utilisez pour savoir quels param&egrave;tres choisir.
Saisie du nom et de la valeur d'un param&egrave;tre
1 S&eacute;lectionnez un objet pouvant &ecirc;tre associ&eacute; &agrave; des param&egrave;tres (par exemple, une animation Shockwave, un contr&ocirc;le
ActiveX, un plug-in Netscape Navigator ou une applet Java) dans la fen&ecirc;tre de document.
2 Ouvrez la bo&icirc;te de dialogue en proc&eacute;dant de l'une des mani&egrave;res suivantes :
• Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contr&ocirc;le enfonc&eacute;e (Macintosh)
sur l'objet et cliquez sur Param&egrave;tres dans le menu contextuel.
• Ouvrez l'inspecteur Propri&eacute;t&eacute;s s'il n'est pas d&eacute;j&agrave; ouvert, puis cliquez sur le bouton Param&egrave;tres situ&eacute; dans la section
inf&eacute;rieure de l'inspecteur Propri&eacute;t&eacute;s. Assurez-vous que l'inspecteur Propri&eacute;t&eacute;s est d&eacute;velopp&eacute;.
3 Cliquez sur le bouton Plug (+) et entrez le nom et la valeur du param&egrave;tre dans les colonnes appropri&eacute;es.
Suppression d'un param&egrave;tre
❖ S&eacute;lectionnez un param&egrave;tre et cliquez sur le bouton Moins (-).
R&eacute;organisation de param&egrave;tres
❖ S&eacute;lectionnez un param&egrave;tre et utilisez les boutons fl&eacute;ch&eacute;s vers le haut ou vers le bas.
Derni&egrave;re mise &agrave; jour le 4/5/2011
276
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Automatisation des t&acirc;ches
Automatisation des t&acirc;ches
Le panneau Historique m&eacute;morise les &eacute;tapes que vous effectuez lors de l'ex&eacute;cution d'une t&acirc;che. Vous pouvez
automatiser une t&acirc;che effectu&eacute;e fr&eacute;quemment en reproduisant les &eacute;tapes correspondantes &agrave; partir du panneau
Historique ou en cr&eacute;ant une nouvelle commande qui effectue les &eacute;tapes automatiquement.
Certains mouvements de la souris, tels qu'une s&eacute;lection via un clic dans la fen&ecirc;tre de document, ne peuvent pas &ecirc;tre
reproduits ou sauvegard&eacute;s. Lorsque vous effectuez ce type de mouvements, un trait noir s'affiche dans le panneau
Historique (la pr&eacute;sence de cette ligne ne devient &eacute;vidente que lorsque vous effectuez une autre action). Pour &eacute;viter cela,
d&eacute;placez le point d'insertion &agrave; l'aide des touches fl&eacute;ch&eacute;es, et non de la souris, dans la fen&ecirc;tre de document.
Il existe quelques autres actions qui ne peuvent pas &ecirc;tre reproduites, par exemple le glisser-d&eacute;placer d'un &eacute;l&eacute;ment de
la page. Lorsque vous effectuez ce type d'action, une ic&ocirc;ne contenant un petit X rouge s'affiche dans le panneau
Historique.
Les commandes sauvegard&eacute;es sont conserv&eacute;es en permanence (&agrave; moins que vous ne les supprimiez), tandis que les
commandes enregistr&eacute;es sont supprim&eacute;es lorsque vous quittez Adobe&reg; Dreamweaver&reg; CS5 et les s&eacute;quences d'&eacute;tapes
copi&eacute;es sont supprim&eacute;es lorsque vous copiez un autre &eacute;l&eacute;ment
Utilisation du panneau Historique
Le panneau Historique (Fen&ecirc;tre &gt; Historique) affiche une liste des &eacute;tapes que vous avez effectu&eacute;es dans le document
actif depuis que vous l'avez cr&eacute;&eacute; ou ouvert (mais pas les &eacute;tapes effectu&eacute;es dans d'autres cadres, d'autres fen&ecirc;tres de
document ou dans le panneau Site). Utilisez le panneau Historique pour annuler plusieurs &eacute;tapes en m&ecirc;me temps et
pour automatiser des t&acirc;ches.
A. Curseur (index) B. Etapes C. Bouton Reproduire D. Bouton Copier les &eacute;tapes E. Bouton Enregistrer comme commande
Lors de l'ouverture du panneau Historique, le curseur, ou index, pointe sur la derni&egrave;re action que vous avez accomplie.
Remarque : Il est impossible de modifier l'ordre dans lequel les &eacute;tapes sont affich&eacute;es dans le panneau Historique. Il ne
faut pas voir dans le panneau Historique une collection arbitraire de commandes ; il vous permet de voir, dans l'ordre
chronologique, la liste des actions d&eacute;j&agrave; effectu&eacute;es.
Annulation de la derni&egrave;re &eacute;tape
❖ Effectuez l'une des op&eacute;rations suivantes :
• Choisissez Edition &gt; Annuler.
• D&eacute;placez le curseur du panneau Historique d'une &eacute;tape vers le haut dans la liste.
Remarque : Pour provoquer un d&eacute;placement automatique vers une &eacute;tape sp&eacute;cifique, cliquez &agrave; gauche de cette &eacute;tape ; si
vous cliquez sur l'&eacute;tape elle-m&ecirc;me, elle sera s&eacute;lectionn&eacute;e. La s&eacute;lection d'une &eacute;tape est une op&eacute;ration diff&eacute;rente du retour &agrave;
cette &eacute;tape dans l'historique des actions.
Derni&egrave;re mise &agrave; jour le 4/5/2011
277
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Annulation de plusieurs &eacute;tapes &agrave; la fois
❖ Faites glisser le curseur de fa&ccedil;on &agrave; pointer sur une &eacute;tape de la liste, ou cliquez &agrave; gauche d'une &eacute;tape le long de la
trajectoire du curseur.
Le curseur se dirige automatiquement vers cette &eacute;tape en annulant toutes les &eacute;tapes se trouvant sur son passage.
Remarque : Tout comme pour l'annulation d'une seule action, si vous annulez une s&eacute;rie d'&eacute;tapes, puis effectuez une autre
op&eacute;ration dans le document, il ne vous sera plus possible de r&eacute;tablir les actions annul&eacute;es : elles disparaissent du panneau
Historique.
D&eacute;finition du nombre maximal d'&eacute;tapes que le panneau Historique conserve et affiche
Le nombre d'&eacute;tapes par d&eacute;faut est suffisant pour la plupart des utilisateurs. Plus ce nombre est &eacute;lev&eacute;, plus le panneau
Historique n&eacute;cessite de la m&eacute;moire, ce qui peut affecter les performances et ralentir consid&eacute;rablement votre
ordinateur.
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh).
2 S&eacute;lectionnez la cat&eacute;gorie G&eacute;n&eacute;ral dans la liste de gauche.
3 Tapez un chiffre dans la zone Nombre maximal d'&eacute;tapes de l'historique.
Lorsque le panneau Historique atteint le nombre maximal d'&eacute;tapes, les premi&egrave;res &eacute;tapes sont supprim&eacute;es.
Effacement de la liste des actions du panneau Historique pour le document actif
❖ Dans le menu contextuel du panneau Historique, s&eacute;lectionnez Effacer l'historique.
Cette commande efface &eacute;galement toutes les informations permettant d'annuler les actions effectu&eacute;es dans le
document actif : apr&egrave;s avoir cliqu&eacute; sur Effacer l'historique, il vous est impossible d'annuler les actions dont la trace a
&eacute;t&eacute; effac&eacute;e. La fonction Effacer l'historique n'annule aucune action pass&eacute;e, mais se limite &agrave; supprimer la trace de ces
&eacute;tapes de la m&eacute;moire.
R&eacute;p&eacute;tition d'&eacute;tapes
Vous pouvez r&eacute;p&eacute;ter la derni&egrave;re &eacute;tape effectu&eacute;e ou bien une s&eacute;rie d'&eacute;tapes contigu&euml;s ou non &agrave; l'aide du panneau
Historique. Reproduisez les &eacute;tapes directement depuis le panneau Historique.
R&eacute;p&eacute;tition d'une &eacute;tape
❖ Effectuez l'une des op&eacute;rations suivantes :
• Choisissez Edition &gt; R&eacute;p&eacute;ter.
• Dans le panneau Historique, s&eacute;lectionnez une &eacute;tape et cliquez sur le bouton Reproduire. L'&eacute;tape est reproduite et
une nouvelle instance de cette action appara&icirc;t dans le panneau Historique.
R&eacute;p&eacute;tition d'une s&eacute;rie d'&eacute;tapes
1 S&eacute;lectionnez les &eacute;tapes d&eacute;sir&eacute;es dans le panneau Historique :
• Pour s&eacute;lectionner des &eacute;tapes adjacentes, faites glisser la souris d'une &eacute;tape &agrave; une autre (ne faites pas glisser le
curseur ; faites simplement glisser la souris de l'&eacute;tiquette de texte d'une &eacute;tape vers l'&eacute;tiquette de texte d'une autre),
ou s&eacute;lectionnez la premi&egrave;re &eacute;tape et, tout en maintenant la touche Maj enfonc&eacute;e, cliquez sur la derni&egrave;re &eacute;tape.
• Pour s&eacute;lectionner des &eacute;tapes non adjacentes, s&eacute;lectionnez une &eacute;tape, puis tout en maintenant appuy&eacute;e la touche Ctrl
(Windows) ou Commande (Macintosh), cliquez sur d'autres &eacute;tapes de fa&ccedil;on &agrave; les s&eacute;lectionner (ou &agrave; les
d&eacute;s&eacute;lectionner le cas &eacute;ch&eacute;ant).
Derni&egrave;re mise &agrave; jour le 4/5/2011
278
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Seules les actions s&eacute;lectionn&eacute;es (en surbrillance), et pas n&eacute;cessairement celle sur laquelle se trouve le curseur, sont
r&eacute;p&eacute;t&eacute;es.
Remarque : Bien que vous puissiez s&eacute;lectionner une s&eacute;rie d'&eacute;tapes contenant un trait noir signalant une action impossible
&agrave; enregistrer, cette &eacute;tape est ignor&eacute;e lorsque vous reproduisez les &eacute;tapes.
2 Cliquez sur Reproduire.
Les &eacute;tapes sont reproduites dans l'ordre chronologique et une nouvelle &eacute;tape, Reproduire les &eacute;tapes, appara&icirc;t dans le
panneau Historique.
R&eacute;alisation ou extension d'une s&eacute;lection
❖ Maintenez la touche Maj enfonc&eacute;e tout en appuyant sur une touche fl&eacute;ch&eacute;e.
Si un trait noir indiquant un mouvement de la souris appara&icirc;t pendant que vous effectuez une t&acirc;che que vous voulez
r&eacute;it&eacute;rer ult&eacute;rieurement, vous pouvez annuler cette derni&egrave;re action et tenter une autre approche (utilisez les touches
fl&eacute;ch&eacute;es, par exemple).
Application d'&eacute;tapes du panneau Historique &agrave; des objets
Vous pouvez appliquer un ensemble d'&eacute;tapes affich&eacute;es dans le panneau Historique &agrave; n'importe quel objet figurant dans
la fen&ecirc;tre de document.
Si vous s&eacute;lectionnez plusieurs objets, puis leur appliquez des &eacute;tapes &agrave; partir du panneau Historique, ces objets sont
trait&eacute;s comme une s&eacute;lection unique et Dreamweaver tente d'appliquer les &eacute;tapes &agrave; cette s&eacute;lection combin&eacute;e ; toutefois,
vous ne pouvez appliquer un ensemble d'&eacute;tapes qu'&agrave; un seul objet &agrave; la fois.
Pour appliquer les &eacute;tapes &agrave; chaque objet d'un ensemble d'objets, vous devez faire en sorte que la derni&egrave;re &eacute;tape de la
s&eacute;rie s&eacute;lectionne l'objet suivant de l'ensemble. La deuxi&egrave;me proc&eacute;dure illustre ce principe dans un sc&eacute;nario particulier :
d&eacute;finition de l'espacement vertical et horizontal d'une s&eacute;rie d'images.
Application d'&eacute;tapes &agrave; un autre objet
1 S&eacute;lectionnez l'objet.
2 S&eacute;lectionnez l'&eacute;tape &agrave; appliquer dans le panneau Historique, puis cliquez sur Reproduire.
Application d'&eacute;tapes &agrave; plusieurs objets
1 Ouvrez un document dans lequel chaque ligne est compos&eacute;e d'une petite image (par exemple une puce graphique
ou une ic&ocirc;ne) suivie de texte.
L'objectif est d'espacer davantage ces images &agrave; la fois du texte et des autres images situ&eacute;es au-dessus et en dessous.
2 Ouvrez l'inspecteur Propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), si n&eacute;cessaire.
3 S&eacute;lectionnez la premi&egrave;re image.
4 Dans l'inspecteur Propri&eacute;t&eacute;s, indiquez des valeurs dans les zones Espace V. et Espace H. pour d&eacute;finir l'espacement
de l'image.
5 Cliquez sur l'image de nouveau pour activer la fen&ecirc;tre de document sans d&eacute;placer le point d'insertion.
Derni&egrave;re mise &agrave; jour le 4/5/2011
279
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
6 Appuyez sur la touche fl&eacute;ch&eacute;e gauche pour amener le point d'insertion &agrave; gauche de l'image.
7 Appuyez sur la touche fl&eacute;ch&eacute;e bas pour faire descendre le point d'insertion d'une ligne, tout en le laissant juste &agrave;
gauche de la seconde image de la s&eacute;rie.
8 Appuyez sur la touche fl&eacute;ch&eacute;e droite tout en maintenant la touche Maj. enfonc&eacute;e, pour s&eacute;lectionner la seconde
image.
Remarque : Ne s&eacute;lectionnez surtout pas l'image en cliquant dessus, car vous ne pourriez plus reproduire toutes les &eacute;tapes.
9 Dans le panneau Historique, s&eacute;lectionnez les &eacute;tapes correspondant &agrave; la modification de l'espacement de l'image et
&agrave; la s&eacute;lection de l'image suivante. Cliquez sur le bouton Reproduire pour reproduire ces actions.
L'espacement de l'image courante est modifi&eacute;, et l'image suivante est s&eacute;lectionn&eacute;e.
10 Continuez &agrave; cliquer sur le bouton Reproduire jusqu'&agrave; ce que toutes les images soient correctement espac&eacute;es.
Copie et collage d'&eacute;tapes entre les documents
Chaque document ouvert poss&egrave;de son propre historique. Vous pouvez copier des &eacute;tapes d'un document et les coller
dans un autre document.
La fermeture d'un document supprime son historique. Si vous savez que vous voudrez utiliser des &eacute;tapes d'un
document ult&eacute;rieurement, copiez ou sauvegardez ces &eacute;tapes avant de fermer ce document.
1 S&eacute;lectionnez les &eacute;tapes d&eacute;sir&eacute;es dans le panneau Historique du document qui contient les &eacute;tapes &agrave; r&eacute;utiliser.
2 Cliquez sur Copier les &eacute;tapes dans le panneau Historique
.
Remarque : Le bouton Copier les &eacute;tapes (dans le panneau Historique) est diff&eacute;rent de la commande Copier (dans le menu
Edition). Vous ne pouvez pas utiliser la commande Edition &gt; Copier pour copier des &eacute;tapes, mais vous pouvez utiliser la
commande Edition &gt; Coller pour les coller.
Soyez prudent lorsque vous copiez des &eacute;tapes qui comportent une commande Copier ou Coller:
• N'utilisez pas Copier les &eacute;tapes si l'une des &eacute;tapes contient une commande Copier, car le collage de ces &eacute;tapes risque
de ne pas s'effectuer comme souhait&eacute;.
• Si vos &eacute;tapes contiennent une commande Coller, vous ne pouvez pas les coller, &agrave; moins qu'elles ne comprennent
&eacute;galement une commande Copier avant la commande Coller.
3 Ouvrez l'autre document.
4 Placez le point d'insertion sur l'emplacement d&eacute;sir&eacute;, ou s&eacute;lectionnez l'objet auquel vous voulez appliquer les &eacute;tapes.
5 Choisissez Edition &gt; Coller.
Derni&egrave;re mise &agrave; jour le 4/5/2011
280
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Les &eacute;tapes sont reproduites d&egrave;s qu'elles sont coll&eacute;es dans le panneau Historique du document. Le panneau Historique
les affiche comme une seule &eacute;tape, appel&eacute;e Coller les &eacute;tapes.
Si vous collez des &eacute;tapes dans un &eacute;diteur de texte, en mode Code ou dans l'inspecteur de code, elles s'affichent sous
forme de code Java Script. Ce point peut vous &ecirc;tre tr&egrave;s utile pour apprendre &agrave; &eacute;crire vos propres scripts.
Voir aussi
&laquo; R&eacute;daction et modification de code &raquo; &agrave; la page 316
Cr&eacute;ation et utilisation de commandes &agrave; partir d'&eacute;tapes de l'historique
Sauvegardez un ensemble d'&eacute;tapes de l'historique sous la forme d'une commande &agrave; laquelle vous donnerez un nom et
qui deviendra alors disponible dans le menu Commandes. Cr&eacute;ez et enregistrez une nouvelle commande si vous pensez
devoir utiliser de nouveau un ensemble d'&eacute;tapes, surtout apr&egrave;s le prochain d&eacute;marrage de Dreamweaver.
Cr&eacute;ation d'une commande
1 S&eacute;lectionnez la ou les &eacute;tapes d&eacute;sir&eacute;es dans le panneau Historique.
2 Cliquez sur le bouton Enregistrer comme commande ou choisissez l'option Enregistrer comme commande dans le
menu contextuel du panneau Historique.
3 Indiquez le nom de la commande et cliquez sur OK.
La commande appara&icirc;t dans le menu Commandes.
Remarque : La commande est sauvegard&eacute;e sous la forme d'un fichier Java Script (ou parfois HTML) dans votre dossier
Dreamweaver/Configuration/Commandes. Si vous utilisez Dreamweaver sur un syst&egrave;me d'exploitation &agrave; plusieurs
utilisateurs, le fichier est enregistr&eacute; dans le dossier Commandes de l'utilisateur sp&eacute;cifique.
Utilisation d'une commande sauvegard&eacute;e
1 S&eacute;lectionnez l'objet auquel vous d&eacute;sirez appliquer la commande ou placez le point d'insertion &agrave; l'emplacement
d&eacute;sir&eacute;.
2 S&eacute;lectionnez la commande de votre choix dans le menu Commandes.
Modification du nom d'une commande
1 Choisissez Commandes &gt; Modifier la liste des commandes.
2 S&eacute;lectionnez la commande &agrave; renommer, indiquez son nouveau nom, puis cliquez sur Fermer.
Suppression d'un nom du menu Commandes
1 Choisissez Commandes &gt; Modifier la liste des commandes.
2 S&eacute;lectionnez une commande.
3 Cliquez sur Supprimer, puis sur Fermer.
Enregistrement et sauvegarde de commandes
Enregistrez une commande temporaire pour une utilisation &agrave; court terme, ou enregistrez et sauvegardez une
commande pour l'utiliser ult&eacute;rieurement. Dreamweaver conserve uniquement une commande enregistr&eacute;e &agrave; la fois ;
d&egrave;s que vous commencez &agrave; enregistrer une nouvelle commande, l'ancienne est perdue, &agrave; moins que vous ne la
sauvegardiez avant de m&eacute;moriser la nouvelle commande.
Derni&egrave;re mise &agrave; jour le 4/5/2011
281
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Enregistrement provisoire une s&eacute;rie d'&eacute;tapes
1 Choisissez Commandes &gt; D&eacute;marrer l'enregistrement ou appuyez sur la combinaison de touches Ctrl+Maj+X
(Windows) ou Commande+Maj+X (Macintosh).
Le pointeur change d'aspect pour indiquer que vous m&eacute;morisez une commande.
2 Lorsque l'op&eacute;ration est termin&eacute;e, choisissez Commandes &gt; Arr&ecirc;ter l'enregistrement ou appuyez &agrave; nouveau sur la
combinaison de touches Ctrl+Maj+X (Windows) ou Commande+Maj+X (Macintosh).
Reproduction d'une commande enregistr&eacute;e
❖ Choisissez Commandes &gt; Reproduire la commande enregistr&eacute;e ou appuyez sur la combinaison de touches
Ctrl+Maj+R (Windows) ou Commande+Maj+R (Macintosh).
Sauvegarde d'une commande enregistr&eacute;e
1 S&eacute;lectionnez Commandes &gt; Reproduire la commande enregistr&eacute;e.
2 Dans la liste d'&eacute;tapes du panneau Historique, s&eacute;lectionnez l'&eacute;tape Ex&eacute;cuter commande et cliquez sur le bouton
Enregistrer comme commande.
3 Indiquez le nom de la commande et cliquez sur OK.
La commande appara&icirc;t dans le menu Commandes.
Derni&egrave;re mise &agrave; jour le 4/5/2011
282
Chapitre 9 : Liens et navigation
A propos des liens et de la navigation
A propos des liens
Une fois que vous avez d&eacute;fini un site Dreamweaver dans lequel stocker les documents de votre site Web et que vous
avez cr&eacute;&eacute; des pages HTML, il vous reste &agrave; &eacute;tablir des connexions entre vos documents et d'autres types de documents.
Dreamweaver propose plusieurs m&eacute;thodes pour cr&eacute;er des liens vers des documents, des images, des fichiers
multim&eacute;dias ou des logiciels pouvant &ecirc;tre t&eacute;l&eacute;charg&eacute;s. Vous pouvez &eacute;tablir des liens vers n'importe quel texte ou
n'importe quelle image d'un document, m&ecirc;me s'ils se trouvent dans un en-t&ecirc;te, une liste, un tableau, un &eacute;l&eacute;ment &agrave;
positionnement absolu (&eacute;l&eacute;ment PA) ou un cadre.
Il existe diff&eacute;rentes m&eacute;thodes de cr&eacute;ation et de gestion de liens. Certains concepteurs de pages Web pr&eacute;f&egrave;rent cr&eacute;er des
liens vers des pages ou des fichiers qui n'existent pas encore, alors que d'autres pr&eacute;f&egrave;rent cr&eacute;er d'abord tous les fichiers
et pages, puis ajouter les liens. Une autre m&eacute;thode de gestion des liens consiste &agrave; cr&eacute;er des pages de type &laquo; espace
r&eacute;serv&eacute; &raquo; qui vous permettent d'ajouter des liens rapidement et de les v&eacute;rifier avant de terminer toutes les pages de
votre site.
Voir aussi
&laquo; Test de liens dans Dreamweaver &raquo; &agrave; la page 291
Chemins absolus, relatifs au documents et relatifs &agrave; la racine du site
Pour cr&eacute;er des liens, il est indispensable de comprendre le chemin d'acc&egrave;s qui s'&eacute;tablit entre le document ou l'actif &agrave;
partir duquel vous &eacute;tablissez un lien et le document point&eacute; par ce lien.
Chaque page Web poss&egrave;de une adresse unique, appel&eacute;e URL (Uniform Resource Locator) Cependant, lorsque vous
cr&eacute;ez un lien local (entre deux documents du m&ecirc;me site), vous n'avez en g&eacute;n&eacute;ral pas besoin de sp&eacute;cifier l'URL compl&egrave;te
du document vers lequel vous cr&eacute;ez le lien ; il est pr&eacute;f&eacute;rable d'indiquer un chemin relatif, &agrave; partir du document actif
ou de la racine du site.
Il existe trois types de chemins d'acc&egrave;s de liaison :
• Chemins absolus (par exemple, http://www.adobe.com/support/dreamweaver/contents.html).
• Chemins relatifs au document (par exemple dreamweaver/contents.html).
• Chemins relatifs &agrave; la racine du site (par exemple /support/dreamweaver/contents.html).
Dreamweaver vous permet de choisir ais&eacute;ment le type de chemin &agrave; cr&eacute;er pour vos liens.
Remarque : Il est pr&eacute;f&eacute;rable d'utiliser le type de lien qui vous convient le mieux, qu'il soit relatif &agrave; la racine du site ou
au document. L'exploration des liens, contrairement &agrave; la saisie des chemins, garantit que vous entrez toujours le
chemin correct.
Voir aussi
&laquo; D&eacute;finition du chemin relatif des nouveaux liens &raquo; &agrave; la page 287
&laquo; Cr&eacute;ation d'un nouveau site &raquo; &agrave; la page 40
Derni&egrave;re mise &agrave; jour le 4/5/2011
283
UTILISATION DE DREAMWEAVER
Liens et navigation
Chemins absolus
Les chemins absolus indiquent l'URL compl&egrave;te du document li&eacute;, y compris le protocole &agrave; utiliser (en g&eacute;n&eacute;ral http://
pour les pages Web), par exemple, http://www.adobe.com/support/dreamweaver/contents.html. Pour un actif de type
image, l'URL enti&egrave;re peut ressembler &agrave; http://www.adobe.com/support/dreamweaver/images/image1.jpg.
Vous devez utiliser un chemin absolu lorsque vous cr&eacute;ez un lien vers un document ou un actif situ&eacute; en dehors du site
courant. Vous pouvez &eacute;galement utiliser des liens de chemins absolus pour les liens locaux (vers des documents sur le
m&ecirc;me site), mais cette approche est d&eacute;conseill&eacute;e. Si vous d&eacute;placez le site vers un autre domaine, tous les liens de
chemins absolus locaux seront rompus. De plus, l'utilisation de chemins relatifs pour les liens locaux offre une plus
grande souplesse si vous devez d&eacute;placer des fichiers au sein de votre site.
Remarque : Lors de l'insertion d'images (et non de liens), vous pouvez utiliser un chemin absolu vers une image qui r&eacute;side
sur un serveur distant (c'est-&agrave;-dire, une image qui n'est pas disponible sur le disque dur local).
Chemins relatifs au document
Les chemins relatifs au document sont g&eacute;n&eacute;ralement pr&eacute;f&eacute;rables pour les liens locaux dans la plupart des sites Web. Ils
sont particuli&egrave;rement utiles lorsque le document actif et le document ou l'actif cible du lien se trouvent dans le m&ecirc;me
dossier et le resteront vraisemblablement. Vous pouvez &eacute;galement utiliser un chemin relatif au document ou &agrave; l'actif
pour pointer sur un document situ&eacute; dans un autre dossier, en indiquant le chemin entre le document actif et le
document li&eacute;, au sein de la hi&eacute;rarchie de dossiers.
Indiquer un chemin relatif au document consiste tout simplement &agrave; laisser de c&ocirc;t&eacute; la partie du chemin absolu qui est
identique pour le document actuel et le document ou l'actif li&eacute;, en n'indiquant que la partie du chemin qui diff&egrave;re.
Par exemple, supposons que la structure de votre site soit la suivante :
my_site (dossier racine)
Support technique
contents.html
hours.html
Ressources
tips.html
Produits
catalog.html
index.html (page d'accueil)
• Pour &eacute;tablir un lien depuis contents.html vers hours.html (ces deux fichiers sont dans le m&ecirc;me dossier), utilisez le
chemin relatif hours.html :
• Pour &eacute;tablir un lien de contents.html vers tips.html (qui se trouve dans le sous-dossier &laquo; resources &raquo;), utilisez le
chemin relatif resources/tips.html. A chaque barre oblique (/), vous descendez d'un niveau dans la hi&eacute;rarchie des
dossiers.
• Pour &eacute;tablir un lien de contents.html vers index.html (qui se trouve dans le dossier parent, un niveau au-dessus de
contents.html), utilisez le chemin relatif ../index.html. Deux points et une barre oblique (../) permettent de
remonter d'un niveau dans la hi&eacute;rarchie des dossiers.
• Pour &eacute;tablir un lien de contents.html vers catalog.html (qui se trouve dans un autre sous-dossier du dossier parent),
utilisez le chemin relatif ../products/catalog.html. Ici, la s&eacute;quence ../ fait remonter au dossier parent, et products/
fait redescendre dans le sous-dossier &laquo; products &raquo;.
Derni&egrave;re mise &agrave; jour le 4/5/2011
284
UTILISATION DE DREAMWEAVER
Liens et navigation
Lorsque vous d&eacute;placez des fichiers sous la forme d'un groupe (par exemple, lorsque vous d&eacute;placez un dossier entier,
afin que tous les fichiers au sein de ce dossier conservent les m&ecirc;mes chemins relatifs entre eux), il n'est pas
n&eacute;cessaire de mettre &agrave; jour les liens relatifs au document entre ces fichiers. Toutefois, si vous d&eacute;placez
individuellement un fichier qui contient des liens relatifs au document, ou un fichier sur lequel pointe un lien relatif
&agrave; partir d'un autre document, il est n&eacute;cessaire de mettre ces liens &agrave; jour (si vous d&eacute;placez ou renommez des fichiers
dans le panneau Fichiers, Dreamweaver met automatiquement &agrave; jour tous les liens concern&eacute;s).
Chemins relatifs &agrave; la racine du site
Les chemins relatifs &agrave; la racine du site repr&eacute;sentent le chemin d'acc&egrave;s &agrave; un document &agrave; partir du dossier racine du site.
Ces chemins peuvent &ecirc;tre utiles si vous travaillez sur un grand site Web qui utilise plusieurs serveurs ou un seul serveur
qui est l'h&ocirc;te de plusieurs sites. Toutefois, si vous n'&ecirc;tes pas familier avec ce type de chemin, adoptez plut&ocirc;t les chemins
relatifs au document.
Un chemin relatif &agrave; la racine commence par une barre oblique, qui repr&eacute;sente le dossier racine du site. Par exemple,
/support/tips.html est le chemin relatif &agrave; la racine d'un fichier (tips.html) situ&eacute; dans le sous-dossier &laquo; support &raquo; de la
racine du site.
Un chemin relatif &agrave; la racine repr&eacute;sente souvent le meilleur moyen d'indiquer les liens si vous d&eacute;placez fr&eacute;quemment
des fichiers HTML d'un dossier &agrave; un autre dans votre site Web. Lorsque vous d&eacute;placez un document qui contient des
liens relatifs &agrave; la racine du site, il n'est pas n&eacute;cessaire de modifier les liens, car les liens sont relatifs &agrave; la racine du site,
et non au document lui-m&ecirc;me. Par exemple, si vos fichiers HTML utilisent des liens relatifs &agrave; la racine du site pour les
fichiers d&eacute;pendants (les images en particulier), les liens des fichiers d&eacute;pendants restent valides si vous d&eacute;placez les
fichiers HTML.
Toutefois, si vous d&eacute;placez ou renommez les documents sur lesquels pointent des liens relatifs &agrave; la racine du site, vous
devrez mettre ces liens &agrave; jour, m&ecirc;me si les chemins relatifs de ces documents entre eux n'ont pas chang&eacute;. Par exemple,
si vous d&eacute;placez un dossier, vous devez mettre &agrave; jour tous les liens relatifs &agrave; la racine du site vers les fichiers que ce
dossier contient (si vous d&eacute;placez ou renommez des fichiers dans le panneau Fichiers, Dreamweaver met
automatiquement &agrave; jour tous les liens concern&eacute;s).
Etablissement de liens
Liens entre fichiers et documents
Avant de cr&eacute;er des liens, assurez-vous de bien comprendre le fonctionnement des chemins relatifs au document, des
chemins relatifs &agrave; la racine du site et des chemins absolus. Vous pouvez cr&eacute;er plusieurs types de liens dans un
document :
• Un lien vers un autre document ou fichier, tel que le fichier d'une image, d'une animation ou d'un son
• Un lien vers une ancre nomm&eacute;e, qui permet de sauter &agrave; un emplacement sp&eacute;cifique au sein d'un document
• Un lien de courriel, qui cr&eacute;e un courriel vierge avec l'adresse du destinataire d&eacute;j&agrave; indiqu&eacute;e.
• Des liens nuls et de script, qui permettent d'affecter des comportements &agrave; un objet ou de cr&eacute;er un lien qui ex&eacute;cute
un code JavaScript
Utilisez l'inspecteur Propri&eacute;t&eacute;s et l'ic&ocirc;ne Pointer vers un fichier pour cr&eacute;er des liens &agrave; partir d'une image, d'un objet ou
de texte vers un autre document ou fichier.
Dreamweaver cr&eacute;e les liens vers d'autres pages de votre site &agrave; l'aide de chemins relatifs au document. Vous pouvez
toutefois demander &agrave; Dreamweaver de cr&eacute;er les nouveaux liens &agrave; l'aide de chemins relatifs &agrave; la racine du site.
Derni&egrave;re mise &agrave; jour le 4/5/2011
285
UTILISATION DE DREAMWEAVER
Liens et navigation
Important : Il est conseill&eacute; de toujours enregistrer un nouveau fichier avant de cr&eacute;er un chemin relatif au document, car
ce dernier n'est pas valide sans point de d&eacute;part bien d&eacute;fini. Si vous cr&eacute;ez un chemin relatif au document avant
d'enregistrer le fichier, Dreamweaver utilise provisoirement un chemin absolu commen&ccedil;ant par file:// jusqu'&agrave; ce que le
fichier soit enregistr&eacute;. Dreamweaver convertit alors le chemin file:// en chemin relatif.
Vous trouverez un didacticiel consacr&eacute; &agrave; la cr&eacute;ation de liens &agrave; l'adresse www.adobe.com/go/vid0149_fr.
Voir aussi
&laquo; Chemins absolus, relatifs au documents et relatifs &agrave; la racine du site &raquo; &agrave; la page 282
Didacticiel de cr&eacute;ation de liens
Association de comportements JavaScript &agrave; des liens
Vous pouvez associer un comportement &agrave; n'importe quel lien d'un document. Les comportements d&eacute;crits ci-dessous
peuvent &ecirc;tre tr&egrave;s int&eacute;ressants lorsque vous ins&eacute;rez des &eacute;l&eacute;ments li&eacute;s dans vos documents.
Texte de la barre d'&eacute;tat Permet de sp&eacute;cifier le texte d'un message et de l'afficher dans la barre d'&eacute;tat dans la partie
inf&eacute;rieure gauche de la fen&ecirc;tre du navigateur. Par exemple, vous pouvez utiliser ce comportement pour d&eacute;crire la
destination d'un lien dans la barre d'&eacute;tat, au lieu d'afficher l'URL associ&eacute;e
Ouvrir la fen&ecirc;tre Navigateur Ouvre une URL dans une nouvelle fen&ecirc;tre. Vous pouvez sp&eacute;cifier les propri&eacute;t&eacute;s de la
nouvelle fen&ecirc;tre, notamment son nom, sa taille et ses attributs (redimensionnable ou non, dispose d'une barre de menu
ou non, etc.).
Menu de reroutage modifie un menu de reroutage. Vous pouvez modifier la liste du menu, sp&eacute;cifier un fichier li&eacute;
diff&eacute;rent ou changer l'emplacement du navigateur dans lequel ouvrir le document li&eacute;.
Voir aussi
&laquo; Application de comportements Dreamweaver int&eacute;gr&eacute;s &raquo; &agrave; la page 363
Cr&eacute;ation d'un lien vers des documents &agrave; l'aide de l'inspecteur Propri&eacute;t&eacute;s
Vous pouvez utiliser l'ic&ocirc;ne de dossier de l'inspecteur Propri&eacute;t&eacute;s ou la zone Lien pour cr&eacute;er des liens &agrave; partir d'une
image, un objet, du texte ou tout autre document ou fichier.
1 S&eacute;lectionnez le texte ou une image dans la fen&ecirc;tre de document en mode Cr&eacute;ation.
2 Ouvrez l'inspecteur Propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s) et proc&eacute;dez de l'une des mani&egrave;res suivantes :
• Cliquez sur l'ic&ocirc;ne repr&eacute;sentant un dossier
situ&eacute;e &agrave; droite de la zone Lien pour rechercher et s&eacute;lectionner un
fichier.
Le chemin d'acc&egrave;s du document point&eacute; par le lien s'affiche dans la zone URL. Utilisez le menu d&eacute;roulant Relatif &agrave; dans
la bo&icirc;te de dialogue S&eacute;lectionner fichier HTML pour sp&eacute;cifier si le chemin est relatif &agrave; la racine ou au document, puis
cliquez sur S&eacute;lectionner. Le type de chemin s&eacute;lectionn&eacute; ne s'applique qu'au lien actif. Vous pouvez modifier le
param&egrave;tre par d&eacute;faut de la zone Relatif &agrave; pour le site.
• Tapez le chemin et le nom de fichier du document dans la zone Lien.
Pour cr&eacute;er un lien vers un document de votre site, indiquez un chemin relatif au document ou &agrave; la racine du site. Pour
cr&eacute;er un lien vers un document situ&eacute; en dehors du site, indiquez un chemin absolu, avec le type de protocole (par
exemple, http://). Vous pouvez utiliser cette approche pour entrer un lien vers un fichier n'ayant pas encore &eacute;t&eacute; cr&eacute;&eacute;.
3 Dans le menu d&eacute;roulant Cible, s&eacute;lectionnez un emplacement dans lequel ouvrir le document :
•
_blank charge le document li&eacute; dans une nouvelle fen&ecirc;tre, sans nom, du navigateur.
Derni&egrave;re mise &agrave; jour le 4/5/2011
286
UTILISATION DE DREAMWEAVER
Liens et navigation
•
_parent charge le document li&eacute; dans le cadre parent ou dans la fen&ecirc;tre parente du cadre contenant le lien. Si le
cadre contenant le lien n'est pas imbriqu&eacute;, le document li&eacute; est charg&eacute; dans la fen&ecirc;tre de base du navigateur.
•
_self charge le document li&eacute; dans le m&ecirc;me cadre (ou la m&ecirc;me fen&ecirc;tre) que le lien. Il s'agit de la cible par d&eacute;faut, il
est donc en g&eacute;n&eacute;ral inutile de la sp&eacute;cifier.
•
_top charge le document li&eacute; dans la fen&ecirc;tre de base du navigateur, en supprimant tous les cadres.
Si tous les liens de la page doivent &ecirc;tre d&eacute;finis sur la m&ecirc;me cible, vous pouvez sp&eacute;cifier celle-ci une fois pour toutes en
choisissant la commande Insertion &gt; HTML &gt; Balises d'en-t&ecirc;te &gt; Base et en s&eacute;lectionnant les informations cible. Pour
plus d'informations sur le ciblage des cadres, voir la section &laquo; Contr&ocirc;le des contenus de cadre avec des liens &raquo; &agrave; la page 211.
Voir aussi
&laquo; Chemins absolus, relatifs au documents et relatifs &agrave; la racine du site &raquo; &agrave; la page 282
Cr&eacute;ation d'un lien vers des documents en utilisant l'ic&ocirc;ne Pointer vers un
fichier
1 S&eacute;lectionnez le texte ou une image dans la fen&ecirc;tre de document en mode Cr&eacute;ation.
2 Cr&eacute;ez un lien de l'une des deux fa&ccedil;ons suivantes :
• Faites glisser l'ic&ocirc;ne &laquo; Pointer vers un fichier &raquo;
(ic&ocirc;ne cible), sur la droite de la zone Lien de l'inspecteur
Propri&eacute;t&eacute;s, et pointez sur une ancre visible dans le document actuel, une ancre visible dans un autre document
ouvert, un &eacute;l&eacute;ment poss&eacute;dant un ID unique ou un document dans le panneau Fichiers.
• Tout en maintenant la touche Maj enfonc&eacute;e, faites glisser le pointeur de la souris depuis la s&eacute;lection et pointez sur
une ancre visible dans le document actuel, une ancre visible dans un autre document ouvert, un &eacute;l&eacute;ment poss&eacute;dant
un ID unique ou un document dans le panneau Fichiers.
Remarque : Vous pouvez cr&eacute;er un lien vers un autre document ouvert &agrave; condition que vos documents ne soient pas
agrandis dans la fen&ecirc;tre de document. Pour afficher les documents en mosa&iuml;que, s&eacute;lectionnez Fen&ecirc;tre &gt; Cascade ou
Fen&ecirc;tre &gt; Mosa&iuml;que. Lorsque vous pointez vers un document ouvert, celui-ci passe au premier plan de votre &eacute;cran
pendant que vous effectuez votre s&eacute;lection.
Voir aussi
&laquo; Cr&eacute;ation d'un lien vers un emplacement sp&eacute;cifique au sein d'un document &raquo; &agrave; la page 288
Ajout d'un lien en utilisant la commande Hyperlien
La commande Hyperlien vous permet de cr&eacute;er un lien vers une image, un objet ou vers un autre document ou fichier.
1 Placez le curseur &agrave; l'endroit du document o&ugrave; vous souhaitez que le lien apparaisse.
2 Proc&eacute;dez de l'une des mani&egrave;res suivantes pour afficher la bo&icirc;te de dialogue Hyperlien :
• Choisissez Insertion &gt; Hyperlien.
• Dans la cat&eacute;gorie Commun du panneau Insertion, cliquez sur le bouton Hyperlien.
3 Tapez le texte du lien et, apr&egrave;s la zone Lien, tapez le nom du fichier vers lequel un lien va &ecirc;tre &eacute;tabli (ou cliquez sur
l'ic&ocirc;ne du dossier
pour rechercher le fichier).
4 Dans le menu d&eacute;roulant Cible, choisissez la fen&ecirc;tre dans laquelle le fichier devra s'ouvrir ou tapez son nom
Derni&egrave;re mise &agrave; jour le 4/5/2011
287
UTILISATION DE DREAMWEAVER
Liens et navigation
Les noms de tous les cadres du document actif apparaissent dans la liste d&eacute;roulante. Si vous sp&eacute;cifiez un cadre
inexistant, la page li&eacute;e s'ouvre dans une nouvelle fen&ecirc;tre portant le nom que vous avez sp&eacute;cifi&eacute;. Vous pouvez &eacute;galement
choisir parmi les noms de cible r&eacute;serv&eacute;s suivants :
•
_blank charge le fichier li&eacute; dans une nouvelle fen&ecirc;tre, sans nom, du navigateur.
•
_parent charge le fichier li&eacute; dans le jeu de cadres parent, ou dans la fen&ecirc;tre parente du cadre contenant le lien. Si
le cadre contenant le lien n'est pas imbriqu&eacute;, le document li&eacute; sera charg&eacute; dans la fen&ecirc;tre de base du navigateur.
•
_self charge le fichier li&eacute; dans le m&ecirc;me cadre, ou dans la m&ecirc;me fen&ecirc;tre, que le lien. Cette cible &eacute;tant celle par
d&eacute;faut, vous n'avez g&eacute;n&eacute;ralement pas &agrave; la sp&eacute;cifier.
•
_top charge le fichier li&eacute; dans la fen&ecirc;tre de base du navigateur, supprimant ainsi tous les cadres.
5 Dans la zone Ordre des tabulations, tapez une valeur correspondant &agrave; l'ordre de l'onglet.
6 Dans la zone Titre, tapez un titre pour le lien.
7 Dans la zone Cl&eacute; d'acc&egrave;s, tapez une &eacute;quivalence de clavier (une lettre) pour s&eacute;lectionner le lien dans le navigateur.
8 Cliquez sur OK.
D&eacute;finition du chemin relatif des nouveaux liens
Par d&eacute;faut, Dreamweaver cr&eacute;e les liens vers d'autres pages de votre site &agrave; l'aide de chemins relatifs au document. Pour
utiliser des chemins relatifs &agrave; la racine, vous devez d'abord d&eacute;finir un dossier local dans Dreamweaver en choisissant
un dossier racine local qui servira d'&eacute;quivalent &agrave; la racine des documents sur le serveur. Dreamweaver utilise ce dossier
pour d&eacute;terminer les chemins relatifs &agrave; la racine pointant vers des fichiers.
1 Choisissez Site &gt; G&eacute;rer les sites.
2 Dans la bo&icirc;te de dialogue G&eacute;rer les sites, double-cliquez sur votre site dans la liste.
3 Dans la bo&icirc;te de dialogue Configuration du site, d&eacute;veloppez Param&egrave;tres avanc&eacute;s, puis s&eacute;lectionnez la cat&eacute;gorie Infos
locales.
4 D&eacute;finissez le chemin relatif des nouveaux liens en s&eacute;lectionnant l'option Document ou Racine du site.
Lorsque vous cliquez sur OK, la modification de ce param&egrave;tre ne convertit pas le chemin des liens existants. Le
param&egrave;tre ne s'applique qu'aux nouveaux liens cr&eacute;&eacute;s avec Dreamweaver.
Remarque : Le contenu li&eacute; &agrave; un chemin relatif &agrave; la racine n'appara&icirc;t pas lorsque vous lancez l'aper&ccedil;u de documents dans
un navigateur local, sauf si vous sp&eacute;cifiez un serveur de test ou activez l'option Aper&ccedil;u &agrave; l'aide d'un fichier temporaire
dans Edition &gt; Pr&eacute;f&eacute;rences &gt; Aper&ccedil;u dans le navigateur. En effet, &agrave; la diff&eacute;rence des serveurs, les navigateurs ne
reconnaissent pas les racines de sites. Un moyen rapide de lancer l'aper&ccedil;u d'un contenu li&eacute; &agrave; des chemins relatifs &agrave; la
racine consiste &agrave; placer le fichier sur un serveur distant, puis &agrave; s&eacute;lectionner Fichier &gt; Aper&ccedil;u dans le navigateur.
5 Cliquez sur Enregistrer.
Le param&egrave;tre du nouveau chemin ne s'applique qu'au site actif.
Voir aussi
&laquo; Chemins absolus, relatifs au documents et relatifs &agrave; la racine du site &raquo; &agrave; la page 282
&laquo; Cr&eacute;ation d'un nouveau site &raquo; &agrave; la page 40
Derni&egrave;re mise &agrave; jour le 4/5/2011
288
UTILISATION DE DREAMWEAVER
Liens et navigation
Cr&eacute;ation d'un lien vers un emplacement sp&eacute;cifique au sein d'un document
Vous pouvez utiliser l'inspecteur Propri&eacute;t&eacute;s pour &eacute;tablir un lien vers une section donn&eacute;e d'un document en cr&eacute;ant au
pr&eacute;alable des ancres nomm&eacute;es. Les ancres nomm&eacute;es permettent de d&eacute;finir des marqueurs dans un document et sont
souvent plac&eacute;es au niveau d'une rubrique sp&eacute;cifique ou en haut d'un document. Vous pouvez ensuite cr&eacute;er des liens
vers ces ancres nomm&eacute;es, qui am&egrave;nent rapidement le visiteur &agrave; la position sp&eacute;cifi&eacute;e.
La cr&eacute;ation d'un lien vers une ancre nomm&eacute;e s'effectue en deux &eacute;tapes : il faut d'abord cr&eacute;er l'ancre nomm&eacute;e, puis cr&eacute;er
un lien pointant sur elle.
Remarque : Vous ne pouvez pas placer d'ancre nomm&eacute;e dans un &eacute;l&eacute;ment PA (&agrave; positionnement absolu).
Cr&eacute;ation d'une ancre nomm&eacute;e
1 Dans la fen&ecirc;tre de document, en mode Cr&eacute;ation, placez le curseur &agrave; l'endroit o&ugrave; ins&eacute;rer l'ancre nomm&eacute;e.
2 Effectuez l'une des op&eacute;rations suivantes :
• Choisissez Insertion &gt; Ancre nomm&eacute;e.
• Appuyez sur Ctrl+A (Windows) ou Commande+Option+A (Macintosh).
• Dans la cat&eacute;gorie Commun du panneau Insertion, cliquez sur le bouton Ancre nomm&eacute;e.
3 Dans la zone Ancre nomm&eacute;e, entrez le nom de l'ancre puis cliquez sur OK (le nom de l'ancre ne peut pas contenir
d'espaces).
Le marqueur de l'ancre appara&icirc;t au niveau du point d'insertion.
Remarque : Si vous ne voyez pas le marqueur de l'ancre, choisissez Affichage &gt; Assistances visuelles &gt; El&eacute;ments invisibles.
Cr&eacute;ation d'un lien vers une ancre nomm&eacute;e
1 Dans la fen&ecirc;tre de document en mode Cr&eacute;ation, s&eacute;lectionnez le texte ou l'image &agrave; partir desquels cr&eacute;er le lien.
2 Dans la zone Lien de l'inspecteur Propri&eacute;t&eacute;s, tapez le signe di&egrave;se (#) et le nom de l'ancre. Par exemple, pour cr&eacute;er
un lien vers une ancre nomm&eacute;e &laquo; d&eacute;but &raquo; dans le document actif, tapez #top. Pour cr&eacute;er un lien vers une ancre
nomm&eacute;e &laquo;d&eacute;but&raquo; dans un autre document figurant dans le m&ecirc;me dossier, tapez filename.html#top.
Remarque : La casse (majuscules/minuscules) est importante dans les noms d'ancre.
Cr&eacute;ation d'un lien vers une ancre nomm&eacute;e &agrave; l'aide de la m&eacute;thode Pointer vers un fichier
1 Ouvrez le document contenant l'ancre nomm&eacute;e.
Remarque : Choisissez Affichage &gt; Assistances visuelles &gt; El&eacute;ments invisibles pour faire appara&icirc;tre l'ancre, le cas
&eacute;ch&eacute;ant.
2 Dans la fen&ecirc;tre de cr&eacute;ation du document, s&eacute;lectionnez le texte ou l'image &agrave; partir desquels cr&eacute;er le lien (s'il s'agit
d'un autre document ouvert, vous devez basculer sur celui-ci).
3 Effectuez l'une des op&eacute;rations suivantes :
• Cliquez sur l'ic&ocirc;ne du pointeur
(ic&ocirc;ne cible) &agrave; droite de la zone Lien de l'inspecteur Propri&eacute;t&eacute;s et faites-la glisser
sur l'ancre vers laquelle vous souhaitez cr&eacute;er un lien, dans le m&ecirc;me document ou dans tout autre document ouvert.
• En maintenant la touche Maj enfonc&eacute;e, dans la fen&ecirc;tre de document, faites glisser l'image ou le texte s&eacute;lectionn&eacute; :
sur l'ancre vers laquelle vous souhaitez cr&eacute;er un lien, dans le m&ecirc;me document ou dans tout autre document ouvert.
Derni&egrave;re mise &agrave; jour le 4/5/2011
289
UTILISATION DE DREAMWEAVER
Liens et navigation
Cr&eacute;ation d'un lien de courriel
Un lien de courriel ouvre une nouvelle fen&ecirc;tre de message (dans le programme de messagerie associ&eacute; au navigateur de
l'utilisateur) lorsque l'utilisateur clique dessus. La zone A : de la fen&ecirc;tre du courriel est automatiquement compl&eacute;t&eacute;e
par l'adresse indiqu&eacute;e dans le lien.
Cr&eacute;ation d'un lien de courriel &agrave; l'aide de la commande Insertion - Lien de messagerie
1 Dans la fen&ecirc;tre de document, placez le curseur &agrave; l'endroit o&ugrave; afficher le lien de courriel ou s&eacute;lectionnez le texte ou
l'image qui doit repr&eacute;senter ce lien.
2 Proc&eacute;dez de l'une des mani&egrave;res suivantes pour ins&eacute;rer le lien :
• Choisissez Insertion &gt; Lien de messagerie.
• Dans la cat&eacute;gorie Commun du panneau Insertion, cliquez sur le bouton Lien de messagerie.
3 Dans la zone Texte, saisissez ou modifiez le corps du courriel.
4 Dans la zone Adresse &eacute;lectronique, tapez l'adresse &eacute;lectronique, puis cliquez sur OK.
Cr&eacute;ation d'un lien de courriel &agrave; l'aide de l'inspecteur Propri&eacute;t&eacute;s
1 S&eacute;lectionnez le texte ou une image dans la fen&ecirc;tre de document en mode Cr&eacute;ation.
2 Dans la zone Lien de l'inspecteur Propri&eacute;t&eacute;s, tapez mailto: suivi d'une adresse &eacute;lectronique.
N'ins&eacute;rez pas d'espaces entre le signe deux points et l'adresse &eacute;lectronique.
Remplissage automatique de la ligne d'objet d'un courriel
1 Cr&eacute;ez un lien de courriel &agrave; l'aide de l'inspecteur Propri&eacute;t&eacute;s, comme expliqu&eacute; ci-dessus.
2 Dans la zone Lien de l'inspecteur Propri&eacute;t&eacute;s, ajoutez ?subject= apr&egrave;s l'adresse de courriel, puis entrez un objet
apr&egrave;s le signe &laquo; &eacute;gal &agrave; &raquo;. N'ajoutez pas d'espaces entre le point d'interrogation et la fin de l'adresse de courriel.
L'entr&eacute;e enti&egrave;re doit se pr&eacute;senter comme suit :
mailto:[email protected]?subject=Message de notre site
Cr&eacute;ation de liens nuls et de liens de script
Un lien nul est un lien non d&eacute;sign&eacute;. Utilisez des liens nuls pour attacher des comportements &agrave; des objets ou du texte
sur une page. Par exemple, vous pouvez attacher un comportement &agrave; un lien nul pour intervertir une image ou afficher
un &eacute;l&eacute;ment PA lorsque le pointeur passe au-dessus du lien.
Les liens de script ex&eacute;cutent un code JavaScript ou appellent une fonction JavaScript et permettent de fournir aux
utilisateurs des informations suppl&eacute;mentaires sur un &eacute;l&eacute;ment sans quitter la page en cours. Les liens de scripts
permettent &eacute;galement d'ex&eacute;cuter des calculs, de valider des formulaires et d'effectuer d'autres t&acirc;ches de traitement
lorsqu'un visiteur clique sur un &eacute;l&eacute;ment sp&eacute;cifique.
Voir aussi
&laquo; Application d'un comportement &raquo; &agrave; la page 362
Cr&eacute;ation d'un lien nul
1 S&eacute;lectionnez du texte, un objet ou une image dans la fen&ecirc;tre de document en mode Cr&eacute;ation.
2 Dans l'inspecteur Propri&eacute;t&eacute;s, tapez javascript:; (le mot javascript suivi par deux points puis par un point-
virgule) dans la zone Lien.
Derni&egrave;re mise &agrave; jour le 4/5/2011
290
UTILISATION DE DREAMWEAVER
Liens et navigation
Cr&eacute;ation d'un lien de script
1 S&eacute;lectionnez du texte, un objet ou une image dans la fen&ecirc;tre de document en mode Cr&eacute;ation.
2 Dans la zone Lien de l'inspecteur Propri&eacute;t&eacute;s, tapez javascript: suivi du code JavaScript ou d'un appel de fonction
JavaScript. (N'ins&eacute;rez pas d'espace entre le signe deux points et le code ou l'appel.)
Mise &agrave; jour automatique des liens
Dreamweaver peut mettre &agrave; jour les liens vers un document et &agrave; partir de ce dernier lorsque vous le d&eacute;placez ou
renommez au sein d'un site local. Cette fonction fonctionne de fa&ccedil;on optimale lorsqu'un site tout entier (ou une section
enti&egrave;re de celui-ci) est stock&eacute; sur votre disque dur local. Dreamweaver ne modifie pas les fichiers du dossier distant
avant que vous y placiez les fichiers locaux ou que vous les archiviez dans le serveur distant.
Pour acc&eacute;l&eacute;rer le processus de mise &agrave; jour, Dreamweaver peut cr&eacute;er un fichier cache dans lequel il conservera la liste
de tous les liens du site local. Le fichier cache est mis &agrave; jour chaque fois que vous ajoutez, modifiez ou supprimez des
liens sur votre site local.
Activation de la mise &agrave; jour automatique des liens
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh).
2 Dans la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences, s&eacute;lectionnez la cat&eacute;gorie G&eacute;n&eacute;ral dans la liste de gauche.
3 Dans la section Options de document des pr&eacute;f&eacute;rences G&eacute;n&eacute;ral, s&eacute;lectionnez une option dans le menu d&eacute;roulant
Mettre &agrave; jour les liens lors du d&eacute;placement de fichiers.
Toujours Met automatiquement &agrave; jour tous les liens vers un document s&eacute;lectionn&eacute; et &agrave; partir de ce dernier lorsque
vous le d&eacute;placez ou le renommez
Jamais Ne met pas automatiquement &agrave; jour tous les liens vers un document s&eacute;lectionn&eacute; et &agrave; partir de ce dernier
lorsque vous le d&eacute;placez ou le renommez.
Invite Affiche d'abord une bo&icirc;te de dialogue qui r&eacute;pertorie tous les fichiers affect&eacute;s par le changement. Cliquez sur
Mettre &agrave; jour pour mettre &agrave; jour les liens de ces fichiers, ou sur Ne pas mettre &agrave; jour pour laisser les fichiers intacts.
4 Cliquez sur OK.
Cr&eacute;ation d'un fichier cache pour votre site
1 Choisissez Site &gt; G&eacute;rer les sites.
2 S&eacute;lectionnez un site, puis cliquez sur Modifier.
3 Dans la bo&icirc;te de dialogue Configuration du site, d&eacute;veloppez Param&egrave;tres avanc&eacute;s, puis s&eacute;lectionnez la cat&eacute;gorie Infos
locales.
4 Dans la cat&eacute;gorie Infos locales, s&eacute;lectionnez l'option Activer le cache.
Apr&egrave;s avoir lanc&eacute; Dreamweaver, la premi&egrave;re fois que vous modifiez ou supprimez des liens vers des fichiers de votre
dossier local, Dreamweaver vous invite &agrave; charger le cache. Si vous cliquez sur Oui, Dreamweaver charge le cache et met
&agrave; jour tous les liens vers le fichier que vous venez de modifier. Si vous cliquez sur le bouton Non, la modification est
consign&eacute;e dans le cache, mais Dreamweaver ne charge pas le cache et ne met pas les liens &agrave; jour.
Sur les sites de grande taille, le chargement du cache peut prendre quelques minutes du fait que Dreamweaver doit
d&eacute;terminer si le cache est p&eacute;rim&eacute; en comparant l'heure et la date des fichiers qui se trouvent sur le site local &agrave; celles
enregistr&eacute;es dans le cache. Si vous n'avez pas modifi&eacute; de fichiers hors de Dreamweaver, vous pouvez cliquer sur le
bouton d'arr&ecirc;t en toute s&eacute;curit&eacute; lorsque le bouton appara&icirc;t.
Derni&egrave;re mise &agrave; jour le 4/5/2011
291
UTILISATION DE DREAMWEAVER
Liens et navigation
R&eacute;cr&eacute;ation du cache
❖ Dans le panneau Fichiers, s&eacute;lectionnez Site &gt; Avanc&eacute; &gt; Recr&eacute;er le cache du site.
Modification d'un lien au niveau du site
Outre la mise &agrave; jour automatique des liens que Dreamweaver effectue chaque fois que vous d&eacute;placez ou renommez un
fichier, vous pouvez modifier manuellement tous les liens (y compris les liens de messagerie &eacute;lectronique, ftp, nuls et
de scripts) pour qu'ils pointent sur un autre chemin.
Cette option est surtout utile lorsque vous souhaitez supprimer un fichier auquel d'autres fichiers sont li&eacute;s, mais
pouvez l'utiliser &agrave; d'autres fins. Par exemple, supposons que vous ayez &eacute;tabli un lien entre les mots &laquo; films du mois &raquo; et
/films/juillet.html dans l'ensemble de votre site. Le 1er ao&ucirc;t, vous voudrez modifier ces liens pour qu'ils pointent vers
/films/aout.html.
1 S&eacute;lectionnez un fichier dans l'affichage local du panneau Fichiers.
Remarque : Si vous changez un lien de messagerie &eacute;lectronique, ftp, nul ou de script, vous n'avez pas besoin de
s&eacute;lectionner de fichier.
2 Choisissez Site &gt; Modifier le lien au niveau du site.
3 Compl&eacute;tez les options suivantes dans la bo&icirc;te de dialogue Modifier le lien au niveau du site :
Modifier tous les liens &agrave; Cliquez sur l'ic&ocirc;ne du dossier
&agrave; parcourir et s&eacute;lectionnez le fichier cible vers lequel les
liens doivent &ecirc;tre rompus. Si vous changez un lien de messagerie &eacute;lectronique, ftp, nul ou de script, tapez le texte
complet du lien &agrave; changer.
En liens &agrave; to Cliquez sur l'ic&ocirc;ne de dossier
&agrave; parcourir et s&eacute;lectionnez le nouveau fichier vers lequel &eacute;tablir un lien.
Si vous changez un lien de messagerie &eacute;lectronique, ftp, nul ou de script, tapez le texte complet du lien de
remplacement.
4 Cliquez sur OK.
Dreamweaver met &agrave; jour tous les documents qui pointent vers le fichier s&eacute;lectionn&eacute;, en les faisant pointer vers le
nouveau fichier suivant le format de chemin d'acc&egrave;s existant (par exemple, si l'ancien chemin &eacute;tait relatif au document,
le nouveau l'est &eacute;galement).
Lorsqu'un lien a &eacute;t&eacute; chang&eacute; au niveau de tout le site, le fichier s&eacute;lectionn&eacute; devient orphelin (plus aucun fichier du
disque local ne pointe vers lui). Vous pouvez le supprimer en toute s&eacute;curit&eacute; sans risque d'alt&eacute;rer des liens sur le site
local Dreamweaver.
Important : Ces modifications se produisant localement, vous devez supprimer manuellement le fichier orphelin
correspondant dans le dossier distant et placer ou archiver tous les fichiers dans lesquels les liens ont &eacute;t&eacute; modifi&eacute;s, sinon
les visiteurs ne pourront pas visualiser les modifications.
Test de liens dans Dreamweaver
Les liens ne sont pas actifs dans Dreamweaver ; c'est-&agrave;-dire que vous ne pouvez pas ouvrir les documents li&eacute;s en
cliquant sur le lien dans la fen&ecirc;tre de document.
❖ Effectuez l'une des op&eacute;rations suivantes :
• S&eacute;lectionnez le lien et choisissez Modifier &gt; Ouvrir la page li&eacute;e.
• Appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh), puis double-cliquez sur le lien.
Remarque : Le document li&eacute; doit r&eacute;sider sur le disque local.
Derni&egrave;re mise &agrave; jour le 4/5/2011
292
UTILISATION DE DREAMWEAVER
Liens et navigation
Voir aussi
&laquo; Recherche de liens rompus, externes et orphelins &raquo; &agrave; la page 296
&laquo; Correction de liens rompus &raquo; &agrave; la page 297
Menus de reroutage
Insertion de menus de reroutage
Un menu de reroutage est un menu d&eacute;roulant dans un document, visible pour tous les visiteurs du site et r&eacute;pertoriant
les liens vers des documents ou des fichiers. Vous pouvez cr&eacute;er des liens vers des documents de votre site Web ou d'un
autre site, des liens de messagerie &eacute;lectronique, des liens vers des images ou vers tout type de fichier pouvant &ecirc;tre ouvert
dans un navigateur.
Chaque option d'un menu de reroutage est associ&eacute;e &agrave; une URL. Lorsque les utilisateurs choisissent une option, ils sont
redirig&eacute;s (&laquo; rerout&eacute;s &raquo;) vers l'URL associ&eacute;e. Ces menus sont ins&eacute;r&eacute;s &agrave; l'aide de l'objet de formulaire Menu de reroutage.
Un menu de reroutage peut comporter trois composants :
• (Facultatif) Une invite de s&eacute;lection au sein du menu, par exemple une description de cat&eacute;gorie pour les &eacute;l&eacute;ments
du menu ou des instructions, du type &laquo; Faites votre choix &raquo;.
• (Obligatoire) Une liste d'&eacute;l&eacute;ments de menu de reroutage : l'utilisateur choisit une option et le document ou le fichier
li&eacute; s'affiche.
• (Facultatif) Un bouton Aller.
Voir aussi
&laquo; Application du comportement Menu de reroutage &raquo; &agrave; la page 368
&laquo; Application du comportement Menu de reroutage Aller &raquo; &agrave; la page 368
Insertion d'un menu de reroutage
1 Ouvrez un document, puis placez le curseur dans la fen&ecirc;tre de document.
2 Effectuez l'une des op&eacute;rations suivantes :
• Choisissez Insertion &gt; Formulaire &gt; Menu de reroutage.
• Cliquez sur le bouton Menu de reroutage de la cat&eacute;gorie Formulaires du panneau Insertion.
3 Compl&eacute;tez les options de la bo&icirc;te de dialogue Ins&eacute;rer menu de reroutage, puis cliquez sur OK. Voici une liste
partielle des options :
Boutons Plus (+) et Moins (-) Cliquez sur Plus pour ins&eacute;rer un &eacute;l&eacute;ment ; cliquez &agrave; nouveau sur Plus pour en ajouter un
autre. Pour supprimer un &eacute;l&eacute;ment, s&eacute;lectionnez-le et cliquez sur Moins.
Boutons fl&eacute;ch&eacute;s S&eacute;lectionnez un &eacute;l&eacute;ment et cliquez sur les boutons fl&eacute;ch&eacute;s pour le d&eacute;placer vers le haut ou le bas de la
liste.
Texte Tapez le nom d'un &eacute;l&eacute;ment sans nom. Si votre menu contient une invite de s&eacute;lection (telle que &laquo; Faites votre
choix &raquo;), tapez-la ici en tant que premier &eacute;l&eacute;ment de menu (dans ce cas, vous devez aussi s&eacute;lectionner l'option
S&eacute;lectionner le premier &eacute;l&eacute;ment apr&egrave;s le changement d'URL situ&eacute;e en bas).
Si s&eacute;lectionn&eacute;, aller &agrave; l'URL Naviguez jusqu'au fichier cible ou tapez son chemin.
Derni&egrave;re mise &agrave; jour le 4/5/2011
293
UTILISATION DE DREAMWEAVER
Liens et navigation
Ouvrir les URL dans Sp&eacute;cifiez si le fichier doit &ecirc;tre ouvert dans la m&ecirc;me fen&ecirc;tre ou dans un cadre. Si le cadre &agrave; d&eacute;signer
comme cible n'appara&icirc;t pas dans le menu d&eacute;roulant, fermez la bo&icirc;te de dialogue Ins&eacute;rer menu de reroutage, puis
donnez un nom au cadre.
Menu Ins&eacute;rer bouton Aller apr&egrave;s Choisissez d'ins&eacute;rer un bouton Aller au lieu d'une invite de s&eacute;lection de menu.
S&eacute;lectionner le premier &eacute;l&eacute;ment apr&egrave;s le changement d'URL S&eacute;lectionnez cette option si vous avez ins&eacute;r&eacute; une invite de
s&eacute;lection de menu (&laquo; Faites votre choix &raquo;) en tant que premier &eacute;l&eacute;ment du menu.
Voir aussi
&laquo; Affichage et d&eacute;finition des des propri&eacute;t&eacute;s et des attributs de cadre &raquo; &agrave; la page 208
Modification des &eacute;l&eacute;ments d'un menu de reroutage
Vous pouvez modifier l'ordre des &eacute;l&eacute;ments dans le menu ou le fichier auquel un &eacute;l&eacute;ment est li&eacute;, et vous pouvez ajouter,
supprimer ou renommer un &eacute;l&eacute;ment.
Pour modifier l'emplacement d'ouverture d'un fichier li&eacute; ou pour ajouter ou modifier une invite de s&eacute;lection de menu,
vous devez appliquer le comportement Menu de reroutage du panneau Comportements.
1 Ouvrez l'inspecteur Propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), s'il n'est pas d&eacute;j&agrave; ouvert.
2 Dans la fen&ecirc;tre de cr&eacute;ation du document, cliquez sur l'objet Menu de reroutage pour le s&eacute;lectionner.
3 Dans l'inspecteur Propri&eacute;t&eacute;s, cliquez sur le bouton Valeurs de la liste.
4 Utilisez la bo&icirc;te de dialogue Valeurs de la liste pour apporter vos modifications aux &eacute;l&eacute;ments de menu et cliquer sur OK.
Voir aussi
&laquo; Application du comportement Menu de reroutage &raquo; &agrave; la page 368
D&eacute;pannage des menus de reroutage
Lorsqu'un &eacute;l&eacute;ment de menu a &eacute;t&eacute; s&eacute;lectionn&eacute;, il n'est plus possible de le s&eacute;lectionner &agrave; nouveau si le visiteur revient &agrave;
cette page ou si la zone Ouvrir les URL dans pointe sur un cadre. Il existe deux m&eacute;thodes pour contourner ce
probl&egrave;me :
• Utiliser une invite de s&eacute;lection au sein du menu, par exemple une cat&eacute;gorie ou une instruction, du type &laquo; Faites
votre choix &raquo;. Une invite de s&eacute;lection au sein du menu est res&eacute;lectionn&eacute;e apr&egrave;s chaque s&eacute;lection.
• Utiliser un bouton Aller, qui permet &agrave; l'utilisateur de visiter &agrave; nouveau le lien d&eacute;j&agrave; s&eacute;lectionn&eacute;. Lorsque vous utilisez
un bouton Aller associ&eacute; &agrave; un menu de reroutage, le bouton Aller devient le seul m&eacute;canisme permettant &agrave; l'utilisateur
d'acc&eacute;der &agrave; l'URL associ&eacute;e &agrave; la s&eacute;lection dans le menu. La s&eacute;lection d'un &eacute;l&eacute;ment de menu dans le menu de reroutage
n'a plus pour effet de rediriger l'utilisateur automatiquement vers une autre page ou un autre cadre.
Remarque : Dans la bo&icirc;te de dialogue Ins&eacute;rer menu de reroutage, vous ne devez s&eacute;lectionner qu'une option pour
chaque menu de reroutage, car elles s'appliquent &agrave; la totalit&eacute; du menu de reroutage.
Barres de navigation
A propos des barres de navigation
La fonctionnalit&eacute; de barre de navigation a &eacute;t&eacute; abandonn&eacute;e depuis Dreamweaver CS5.
Derni&egrave;re mise &agrave; jour le 4/5/2011
294
UTILISATION DE DREAMWEAVER
Liens et navigation
Adobe recommande d'employer le widget Spry Barre de menus pour cr&eacute;er une barre de navigation.
Voir aussi
&laquo; Utilisation du widget Barre de menus &raquo; &agrave; la page 443
Cartes graphiques
A propos des cartes graphiques
Une carte graphique est une image ayant &eacute;t&eacute; divis&eacute;e en r&eacute;gions appel&eacute;es zones r&eacute;actives. Lorsque vous cliquez sur une
zone r&eacute;active, une action est ex&eacute;cut&eacute;e, par exemple, l'ouverture d'un nouveau fichier.
Les cartes graphiques c&ocirc;t&eacute; client stockent les informations relatives aux liens hypertextes dans le document HTML,
alors que les cartes graphiques c&ocirc;t&eacute; serveur conservent ces informations dans un fichier de carte s&eacute;par&eacute;. Lorsqu'un
visiteur de site clique sur une zone r&eacute;active dans l'image, l'URL associ&eacute;e est envoy&eacute;e directement au serveur. Ceci rend
les cartes graphiques c&ocirc;t&eacute; client plus rapides que leurs &eacute;quivalents sur le serveur, car celui-ci n'a pas &agrave; interpr&eacute;ter les
coordonn&eacute;es du point sur lequel l'utilisateur a cliqu&eacute;. Les cartes graphiques c&ocirc;t&eacute; client sont prises en charge par
Netscape Navigator &agrave; partir de sa version 2.0, par NCSA Mosaic 2.1 et 3.0, et par toutes les versions de Microsoft
Internet Explorer.
Dreamweaver ne modifie pas les r&eacute;f&eacute;rences aux cartes graphiques sur le serveur, dans les documents existants. Vous
pouvez utiliser les cartes graphiques c&ocirc;t&eacute; client et c&ocirc;t&eacute; serveur dans le m&ecirc;me document. Les navigateurs qui prennent
en charge les deux types de cartes donnent la priorit&eacute; aux cartes graphiques c&ocirc;t&eacute; client. Pour inclure une carte
graphique sur le serveur dans un document, vous devez &eacute;crire le code HTML appropri&eacute;.
Insertion de cartes graphiques c&ocirc;t&eacute; client
Pour ins&eacute;rer une carte graphique c&ocirc;t&eacute; client, cr&eacute;ez une zone r&eacute;active, puis d&eacute;finissez un lien qui s'ouvre lorsqu'un
utilisateur clique sur la zone r&eacute;active.
Remarque : Vous pouvez cr&eacute;er plusieurs zones r&eacute;actives, mais elles font toutes partie de la m&ecirc;me carte graphique.
1 S&eacute;lectionnez l'image dans la fen&ecirc;tre de document.
2 Dans l'inspecteur Propri&eacute;t&eacute;s, cliquez sur la fl&egrave;che d'agrandissement situ&eacute;e dans le coin inf&eacute;rieur droit pour
visualiser toutes les propri&eacute;t&eacute;s.
3 Dans la zone Nom de la carte, entrez un nom unique pour la carte graphique. Si vous utilisez plusieurs cartes
graphiques dans le m&ecirc;me document, veillez &agrave; donner &agrave; chaque carte un nom unique.
4 Pour d&eacute;finir les zones de la carte graphique, proc&eacute;dez de l'une des mani&egrave;res suivantes :
• S&eacute;lectionnez l'outil Cercle
• S&eacute;lectionnez l'outil Rectangle
et faites glisser le pointeur sur l'image pour cr&eacute;er une zone r&eacute;active circulaire.
et faites glisser le pointeur sur l'image pour cr&eacute;er une zone r&eacute;active rectangulaire.
• S&eacute;lectionnez l'outil Polygone
pour d&eacute;finir une zone r&eacute;active de forme irr&eacute;guli&egrave;re en cliquant pour chaque point
de segment de droite. Cliquez sur l'outil Fl&egrave;che pour fermer la forme.
Apr&egrave;s avoir cr&eacute;&eacute; la zone r&eacute;active, l'inspecteur Propri&eacute;t&eacute;s de cette zone appara&icirc;t.
5 Dans la zone Lien de l'inspecteur Propri&eacute;t&eacute;s de la zone r&eacute;active, cliquez sur l'ic&ocirc;ne du dossier
pour rechercher
le fichier &agrave; ouvrir lorsque l'utilisateur clique sur la zone r&eacute;active, ou tapez le chemin.
6 Dans le menu d&eacute;roulant Cible, choisissez la fen&ecirc;tre dans laquelle le fichier devra s'ouvrir ou tapez son nom
Derni&egrave;re mise &agrave; jour le 4/5/2011
295
UTILISATION DE DREAMWEAVER
Liens et navigation
Les noms de tous les cadres du document actif apparaissent dans la liste d&eacute;roulante. Si vous sp&eacute;cifiez un cadre
inexistant, la page li&eacute;e est charg&eacute;e dans une nouvelle fen&ecirc;tre portant le nom que vous avez sp&eacute;cifi&eacute;. Vous pouvez
&eacute;galement choisir parmi les noms de cible r&eacute;serv&eacute;s suivants :
•
_blank charge le fichier li&eacute; dans une nouvelle fen&ecirc;tre, sans nom, du navigateur.
•
_parent charge le fichier li&eacute; dans le jeu de cadres parent, ou dans la fen&ecirc;tre parente du cadre contenant le lien. Si
le cadre contenant le lien n'est pas imbriqu&eacute;, le document li&eacute; sera charg&eacute; dans la fen&ecirc;tre de base du navigateur.
•
_self charge le fichier li&eacute; dans le m&ecirc;me cadre, ou dans la m&ecirc;me fen&ecirc;tre, que le lien. Cette cible &eacute;tant celle par
d&eacute;faut, vous n'avez g&eacute;n&eacute;ralement pas &agrave; la sp&eacute;cifier.
•
_top charge le fichier li&eacute; dans la fen&ecirc;tre de base du navigateur, supprimant ainsi tous les cadres.
Remarque : L'option Cible n'est disponible que lorsque la zone r&eacute;active s&eacute;lectionn&eacute;e contient un lien.
7 Dans la zone Alt, tapez un texte secondaire &agrave; afficher dans les navigateurs qui affichent seulement du texte ou qui
t&eacute;l&eacute;chargent les images manuellement. Certains navigateurs affichent ce texte sous forme d'une info-bulle lorsque
l'utilisateur fait passer le pointeur de la souris au-dessus de la zone r&eacute;active.
8 R&eacute;p&eacute;tez les &eacute;tapes 4 &agrave; 7 pour d&eacute;finir d'autres zones r&eacute;actives dans la carte graphique.
9 Une fois la d&eacute;finition de la carte de l'image termin&eacute;e, cliquez sur une zone vierge du document pour modifier
l'inspecteur Propri&eacute;t&eacute;s.
Modification des zones r&eacute;actives d'une carte graphique
Vous pouvez facilement modifier les zones r&eacute;actives que vous cr&eacute;ez dans une carte graphique. Vous pouvez d&eacute;placer
un groupe de zones r&eacute;actives, redimensionner des zones r&eacute;actives ou d&eacute;placer une zone r&eacute;active vers l'avant ou l'arri&egrave;re
dans un &eacute;l&eacute;ment &agrave; positionnement absolu.
Vous pouvez &eacute;galement copier une image contenant des zones r&eacute;actives d'un document vers un autre ou copier une
ou plusieurs zones r&eacute;actives d'une image et les coller vers une autre image. Les zones r&eacute;actives associ&eacute;es &agrave; l'image sont
&eacute;galement copi&eacute;es vers le nouveau document.
S&eacute;lection de plusieurs zones r&eacute;actives dans une carte graphique
1 Utilisez le pointeur de zone r&eacute;active pour s&eacute;lectionner une zone r&eacute;active.
2 Effectuez l'une des op&eacute;rations suivantes :
• En maintenant la touche Maj enfonc&eacute;e, cliquez tour &agrave; tour sur les autres zones r&eacute;actives &agrave; s&eacute;lectionner.
• Appuyez sur les touches Ctrl+A (Windows) ou Commande+A (Macintosh) pour s&eacute;lectionner toutes les zones
r&eacute;actives.
D&eacute;placement d'une zone r&eacute;active
1 Utilisez le pointeur de zone r&eacute;active pour s&eacute;lectionner la zone r&eacute;active.
2 Effectuez l'une des op&eacute;rations suivantes :
• Faites glisser la zone r&eacute;active vers une nouvelle zone.
• Utilisez la touche Ctrl et une touche fl&eacute;ch&eacute;e pour d&eacute;placer une zone r&eacute;active de 10 pixels dans le sens s&eacute;lectionn&eacute;.
• Utilisez les touches fl&eacute;ch&eacute;es pour d&eacute;placer une zone r&eacute;active de 1 pixel dans le sens s&eacute;lectionn&eacute;.
Redimensionnement d'une zone r&eacute;active
1 Utilisez le pointeur de zone r&eacute;active
pour s&eacute;lectionner la zone r&eacute;active.
Derni&egrave;re mise &agrave; jour le 4/5/2011
296
UTILISATION DE DREAMWEAVER
Liens et navigation
2 Faites glisser une poign&eacute;e de s&eacute;lection de la zone r&eacute;active pour modifier la taille ou la forme de celle-ci.
R&eacute;solution des probl&egrave;mes li&eacute;s aux liens
Recherche de liens rompus, externes et orphelins
Utilisez la fonction V&eacute;rifier les liens pour rechercher les liens rompus et les fichiers orphelins (les fichiers qui existent
toujours dans le site mais vers lesquels aucun lien ne pointe dans le site). Vous pouvez faire porter la recherche sur un
fichier ouvert, sur une partie ou sur l'ensemble d'un site local.
Dreamweaver v&eacute;rifie uniquement les liens qui pointent vers des documents au sein du m&ecirc;me site. Dreamweaver dresse
une liste des liens externes qui apparaissent dans le ou les documents s&eacute;lectionn&eacute;s, mais ne les v&eacute;rifie pas.
Vous pouvez identifier et supprimer les fichiers qui ne sont plus utilis&eacute;s par les autres fichiers de votre site.
Voir aussi
&laquo; Identification et suppression des fichiers non utilis&eacute;s &raquo; &agrave; la page 83
V&eacute;rification des liens au sein du document actif
1 Enregistrez le fichier dans un emplacement de votre site Dreamweaver local.
2 Choisissez Fichier &gt; V&eacute;rifier la page &gt; Liens.
Le rapport Liens bris&eacute;s appara&icirc;t dans le panneau V&eacute;rificateur de lien (dans le groupe de panneaux R&eacute;sultats).
3 Dans le panneau V&eacute;rificateur de lien, s&eacute;lectionnez Liens externes dans le menu d&eacute;roulant Afficher pour afficher un
autre rapport.
Le rapport appara&icirc;t dans le panneau V&eacute;rificateur de lien (dans le groupe de panneaux R&eacute;sultats).
Vous pouvez v&eacute;rifier les fichiers orphelins lorsque vous v&eacute;rifiez les liens dans un site entier.
4 Pour enregistrer le rapport, cliquez sur le bouton Enregistrer le rapport dans le panneau V&eacute;rificateur de lien. Le
rapport est un fichier temporaire ; il sera perdu si vous ne l'enregistrez pas.
V&eacute;rification des liens dans une partie d'un site local
1 Dans le panneau Fichiers, choisissez un site dans le menu d&eacute;roulant Sites en cours.
2 Dans Affichage local, s&eacute;lectionnez les fichiers ou les dossiers &agrave; v&eacute;rifier.
3 Suivez l'une des proc&eacute;dures suivantes pour acc&eacute;der aux options :
• Cliquez avec le bouton droit de la souris (Windows) ou en appuyant sur la touche Contr&ocirc;le (Macintosh) sur l'un
des fichiers s&eacute;lectionn&eacute;s et cliquez sur V&eacute;rifier les liens &gt; Fichiers/Dossiers s&eacute;lectionn&eacute;s dans le menu contextuel.
• Choisissez Fichier &gt; V&eacute;rifier la page &gt; Liens.
Le rapport Liens bris&eacute;s appara&icirc;t dans le panneau V&eacute;rificateur de lien (dans le groupe de panneaux R&eacute;sultats).
4 Dans le panneau V&eacute;rificateur de lien, s&eacute;lectionnez Liens externes dans le menu d&eacute;roulant Afficher pour afficher un
autre rapport.
Le rapport appara&icirc;t dans le panneau V&eacute;rificateur de lien (dans le groupe de panneaux R&eacute;sultats).
Derni&egrave;re mise &agrave; jour le 4/5/2011
297
UTILISATION DE DREAMWEAVER
Liens et navigation
Vous pouvez v&eacute;rifier les fichiers orphelins lorsque vous v&eacute;rifiez les liens dans un site entier.
5 Pour enregistrer un rapport, cliquez sur le bouton Enregistrer rapport dans le panneau V&eacute;rificateur de lien.
V&eacute;rification des liens dans tout le site
1 Dans le panneau Fichiers, choisissez un site dans le menu d&eacute;roulant Sites en cours.
2 Choisissez Site &gt; V&eacute;rifier tous les liens du site.
Le rapport Liens bris&eacute;s appara&icirc;t dans le panneau V&eacute;rificateur de lien (dans le groupe de panneaux R&eacute;sultats).
3 Dans le panneau V&eacute;rificateur de lien, s&eacute;lectionnez Liens externes ou Fichiers orphelins dans le menu d&eacute;roulant
Afficher pour afficher un autre rapport.
Une liste des fichiers correspondant au type du rapport s&eacute;lectionn&eacute; s'affiche dans la bo&icirc;te de dialogue V&eacute;rificateur de lien.
Remarque : Si vous avez s&eacute;lectionn&eacute; Fichiers orphelins comme type de rapport, vous pouvez directement supprimer des
fichiers orphelins du panneau V&eacute;rificateur de lien en s&eacute;lectionnant un fichier dans la liste et en appuyant sur la touche
Supprimer.
4 Pour enregistrer un rapport, cliquez sur le bouton Enregistrer rapport dans le panneau V&eacute;rificateur de lien.
Correction de liens rompus
Une fois le rapport de liens ex&eacute;cut&eacute;, vous pouvez corriger les liens rompus et les r&eacute;f&eacute;rences d'images directement dans
la bo&icirc;te de dialogue V&eacute;rificateur de lien, ou ouvrir les fichiers de la liste et r&eacute;parer les liens dans l'inspecteur Propri&eacute;t&eacute;s.
Correction de liens dans le panneau V&eacute;rificateur de lien
1 Ex&eacute;cutez un rapport de v&eacute;rification des liens.
2 S&eacute;lectionnez le lien rompu dans la colonne Liens bris&eacute;s (pas dans la colonne Fichiers) du panneau V&eacute;rificateur de
lien (dans le groupe de panneaux R&eacute;sultats).
Une ic&ocirc;ne de dossier s'affiche &agrave; c&ocirc;t&eacute; du lien rompu.
3 Cliquez sur l'ic&ocirc;ne de dossier
situ&eacute;e en face du lien rompu et naviguez jusqu'au fichier appropri&eacute; pour le
s&eacute;lectionner, ou entrez le chemin d'acc&egrave;s et le nom de fichier corrects.
4 Appuyez sur Tab ou Entr&eacute;e (Windows) ou Retour (Macintosh).
S'il y a d'autres liens rompus vers le m&ecirc;me fichier, le syst&egrave;me vous invite &agrave; r&eacute;parer &eacute;galement les r&eacute;f&eacute;rences dans les
autres fichiers. Cliquez sur Oui pour que Dreamweaver mette &agrave; jour tous les documents de la liste faisant r&eacute;f&eacute;rence &agrave;
ce fichier. Cliquez sur Non pour que Dreamweaver mette uniquement &agrave; jour la r&eacute;f&eacute;rence actuelle.
Remarque : Si l'option Activer l'archivage et l'extraction de fichier est activ&eacute;e pour ce site, Dreamweaver essaie d'extraire
les fichiers qui n&eacute;cessitent des modifications. S'il ne peut pas extraire un fichier, Dreamweaver affiche un avertissement
et laisse les r&eacute;f&eacute;rences rompues inchang&eacute;es.
Correction de liens dans l'inspecteur Propri&eacute;t&eacute;s
1 Ex&eacute;cutez un rapport de v&eacute;rification des liens.
2 Double-cliquez sur une entr&eacute;e de la colonne Fichier dans le panneau V&eacute;rificateur de lien (dans le groupe de
panneaux R&eacute;sultats).
Dreamweaver ouvre le document, s&eacute;lectionne l'image ou le lien rompu, et met en surbrillance le chemin d'acc&egrave;s et le
nom de fichier dans l'inspecteur Propri&eacute;t&eacute;s (si l'inspecteur Propri&eacute;t&eacute;s n'est pas ouvert, choisissez Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s
pour l'ouvrir).
Derni&egrave;re mise &agrave; jour le 4/5/2011
298
UTILISATION DE DREAMWEAVER
Liens et navigation
3 Pour d&eacute;finir un nouveau chemin d'acc&egrave;s et un nouveau nom de fichier, tapez directement sur le texte en
surbrillance ou cliquez sur l'ic&ocirc;ne du dossier
pour naviguer vers le fichier.
Si vous mettez &agrave; jour une r&eacute;f&eacute;rence d'image, et si la nouvelle image s'affiche avec une taille incorrecte, cliquez sur L et
H (ou sur le bouton Actualiser) dans l'inspecteur Propri&eacute;t&eacute;s pour r&eacute;initialiser les valeurs de hauteur et de largeur.
4 Enregistrez le fichier.
D&egrave;s que les liens sont r&eacute;par&eacute;s, leur entr&eacute;e dispara&icirc;t de la liste des liens rompus. Si une entr&eacute;e figure toujours dans la
liste apr&egrave;s que vous avez indiqu&eacute; un nouveau chemin d'acc&egrave;s ou nom de fichier dans le v&eacute;rificateur de lien (ou apr&egrave;s
avoir enregistr&eacute; des changements apport&eacute;s &agrave; l'inspecteur Propri&eacute;t&eacute;s), Dreamweaver ne peut pas trouver le nouveau
fichier et consid&egrave;re toujours que le lien est rompu.
Derni&egrave;re mise &agrave; jour le 4/5/2011
299
Chapitre 10 : Pr&eacute;visualisation des pages
Le mode Cr&eacute;ation vous donne une id&eacute;e de l'aspect qu'aura votre page sur le Web, mais il ne restitue pas les pages de la
m&ecirc;me fa&ccedil;on que les navigateurs. La fonctionnalit&eacute; Affichage en direct fournit une repr&eacute;sentation plus pr&eacute;cise et
permet de travailler en mode Code, de fa&ccedil;on &agrave; visualiser les modifications apport&eacute;es au concept. La fonction Aper&ccedil;u
dans le navigateur vous permet de voir la fa&ccedil;on dont vos pages vont s'afficher dans des navigateurs sp&eacute;cifiques.
Pr&eacute;visualisation de pages dans Dreamweaver
A propos de l'affichage en direct
L'affichage en direct diff&egrave;re du mode Cr&eacute;ation traditionnel de Dreamweaver en ce sens qu'il offre un rendu non
modifiable et plus r&eacute;aliste de l'apparence de votre page dans un navigateur. L'affichage en direct ne remplace par la
commande Aper&ccedil;u dans le navigateur, mais fournit plut&ocirc;t une fa&ccedil;on diff&eacute;rente de voir &agrave; quoi ressemble votre page &laquo;
en direct &raquo; sans devoir quitter l'espace de travail de Dreamweaver.
Vous pouvez passer &agrave; l'affichage en direct &agrave; tout moment lorsque vous vous trouvez en mode Cr&eacute;ation. Toutefois, le
passage &agrave; l'affichage en direct n'a aucun point commun avec le basculement entre les autres modes d'affichage
traditionnels de Dreamweaver (Code/Fractionn&eacute;/Cr&eacute;ation). Lorsque vous passez du mode Cr&eacute;ation au mode
Affichage en direct, vous vous contentez de faire basculer le mode Cr&eacute;ation d'un &eacute;tat modifiable &agrave; un &eacute;tat &laquo; en direct &raquo;.
Bien que le mode Cr&eacute;ation soit fig&eacute; lorsque vous acc&eacute;dez au mode Affichage en direct, le mode Code reste modifiable,
ce qui vous permet de modifier le code puis d'actualiser l'affichage en direct pour voir l'effet de vos modifications.
Lorsque vous vous trouvez en mode Affichage en direct, vous pouvez &eacute;galement d&eacute;cider d'afficher le code en direct. Le
mode Code en direct est similaire au mode Affichage en direct, en ce sens qu'il affiche une version du code que le
navigateur ex&eacute;cute pour rendre la page. Tout comme le mode Affichage en direct, le mode Code en direct est un
affichage non modifiable.
Un autre avantage du mode Affichage en direct est sa capacit&eacute; &agrave; figer le code JavaScript. Par exemple, vous pouvez
passer en mode Affichage en direct et survoler les lignes d'un tableau bas&eacute; sur Spry qui changent de couleur de par
l'interaction avec l'utilisateur. Lorsque vous figez le code JavaScript, le mode Affichage en direct fige la page dans son
&eacute;tat actuel. Vous pouvez ensuite modifier votre code CSS ou JavaScript puis actualiser la page pour voir l'effet des
modifications. Il peut &ecirc;tre utile de figer le code JavaScript dans l'affichage en direct pour voir et modifier les propri&eacute;t&eacute;s
des diff&eacute;rents &eacute;tats d'un menu ou d'autres &eacute;l&eacute;ments interactifs qu'il est impossible de voir dans le mode Cr&eacute;ation
traditionnel.
Vous trouverez un didacticiel vid&eacute;o sur l'utilisation du mode En direct, r&eacute;alis&eacute; par l'&eacute;quipe de Dreamweaver, &agrave; l'adresse
www.adobe.com/go/dw10liveview_fr.
Vous trouverez, &agrave; l'adresse ci-apr&egrave;s, une vid&eacute;o de l'&eacute;quipe de conception de Dreamweaver qui pr&eacute;sente l'utilisation de
la navigation dans le mode En direct : http://www.adobe.com/go/dwcs5livenav_fr.
Vous trouverez un didacticiel vid&eacute;o relatif &agrave; l'utilisation du mode Affichage en direct, aux fichiers associ&eacute;s et &agrave; la
fen&ecirc;tre Navigation dans le code &agrave; l'adresse www.adobe.com/go/lrvid4044_dw_fr.
Pr&eacute;visualisation des pages en mode Affichage en direct
1 Veillez &agrave; bien &ecirc;tre en mode Cr&eacute;ation (Affichage &gt; Cr&eacute;ation) ou en modes Code et Cr&eacute;ation (Affichage &gt; Code et
Cr&eacute;ation).
Derni&egrave;re mise &agrave; jour le 4/5/2011
300
UTILISATION DE DREAMWEAVER
Pr&eacute;visualisation des pages
2 Cliquez sur le bouton Affichage en direct.
3 (Facultatif) Apportez les modifications dans le mode Code, dans le panneau Styles CSS, dans une feuille de style
CSS externe ou dans tout autre fichier associ&eacute;.
M&ecirc;me s'il est impossible d'apporter des modifications dans le mode Affichage en direct, les options de modification
&agrave; d'autres endroits (par exemple dans le panneau Styles CSS ou dans le mode Code) changement au fur et &agrave; mesure
que vous cliquez dans l'affichage en direct.
Vous pouvez travailler dans des fichiers associ&eacute;s (par exemple des feuilles de style CSS) tout en maintenant le focus
sur l'affichage en direct. Pour ce faire, ouvrez le fichier associ&eacute; &agrave; partir de la barre d'outils Fichiers apparent&eacute;s, dans
le haut du document.
4 Si vous avez apport&eacute; des modifications en mode Code ou dans un fichier associ&eacute;, actualisez l'affichage en direct en
cliquant sur le bouton Actualiser de la barre d'outils Document ou en appuyant sur F5.
5 Pour revenir au mode Cr&eacute;ation modifiable, cliquez &agrave; nouveau sur le bouton Affichage en direct.
Pr&eacute;visualisation du code en direct
Le code affich&eacute; en mode Code en direct est similaire &agrave; ce que vous verriez si vous consultiez la source de la page &agrave; partir
d'un navigateur. Alors que de telles sources de pages sont statiques et ne fournissent que la source de la page &agrave; partir
du navigateur, le mode Code en direct est dynamique et est mis &agrave; jour &agrave; mesure que vous interagissez avec la page en
mode Affichage en direct.
1 Veillez &agrave; vous trouver en mode Affichage en direct.
2 Cliquez sur le bouton Code en direct.
Dreamweaver affiche le code en direct que le navigateur utiliserait pour ex&eacute;cuter la page. Le code est surlign&eacute; en
jaune et ne peut pas &ecirc;tre modifi&eacute;.
Lorsque vous interagissez avec des &eacute;l&eacute;ments interactifs, le mode Code en direct met en surbrillance les
modifications dynamiques apport&eacute;es au code.
3 Pour d&eacute;sactiver la mise en surbrillance des modifications dans le mode Code en direct, choisissez Affichage &gt;
Options d'affichage en direct &gt; Surligner les modifications dans le code en direct.
4 Pour revenir au mode Code modifiable, cliquez &agrave; nouveau sur le bouton Code en direct.
Pour modifier les pr&eacute;f&eacute;rences du mode Code en direct, choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver
&gt; Pr&eacute;f&eacute;rences (MacOS), puis choisissez la cat&eacute;gorie Coloration du code.
Gel du code JavaScript
Effectuez l'une des op&eacute;rations suivantes :
• Appuyez sur la touche F6
• Choisissez Figer JavaScript dans le menu du bouton Affichage en direct.
Une barre d'information, en haut du document, vous informe que le code JavaScript est fig&eacute;. Pour fermer la barre
d'information, cliquez sur son lien Fermer.
Derni&egrave;re mise &agrave; jour le 4/5/2011
301
UTILISATION DE DREAMWEAVER
Pr&eacute;visualisation des pages
Options de l'affichage en direct
Outre l'option Figer JavaScript, le menu du bouton Affichage en direct comporte d'autres options, qui sont &eacute;galement
accessibles via le menu Affichage &gt; Options d'affichage en direct.
Figer JavaScript Fige les &eacute;l&eacute;ments affect&eacute;s par JavaScript dans leur &eacute;tat actuel.
D&eacute;sactiver JavaScript D&eacute;sactive JavaScript et rend &agrave; nouveau la page de la mani&egrave;re dont elle se pr&eacute;senterait dans un
navigateur o&ugrave; JavaScript serait d&eacute;sactiv&eacute;.
D&eacute;sactiver les plug-ins D&eacute;sactive les plug-ins et rend &agrave; nouveau la page de la mani&egrave;re dont elle se pr&eacute;senterait dans un
navigateur o&ugrave; les plug-ins seraient d&eacute;sactiv&eacute;s.
Surligner les modifications dans le code en direct Active ou d&eacute;sactive la mise en surbrillance des modifications dans le
mode Code en direct.
Modification de la page d'affichage en direct dans un nouvel onglet Permet d'ouvrir de nouveaux onglets pour les
documents du site vers lesquels vous naviguez &agrave; l'aide de la barre d'outils Navigation de l'explorateur ou de la
fonctionnalit&eacute; Suivre le lien. Vous devez tout d'abord acc&eacute;der au document, puis choisir Modifier la page d'affichage
en direct dans un nouvel onglet afin de cr&eacute;er un nouvel onglet pour celui-ci.
Suivre le lien Rend actif le lien suivant sur lequel vous cliquez en mode En direct. Alternativement, vous pouvez rendre
un lien actif en cliquant dessus, dans le mode En direct, tout en maintenant la touche CTRL enfonc&eacute;e.
Suivre les liens de mani&egrave;re continue Rend les liens du mode En direct actifs en permanence jusqu'&agrave; ce que vous les
d&eacute;sactiviez ou que vous fermiez la page.
Synchroniser automatiquement les fichiers distants Synchronise automatiquement le fichier local et le fichier distant
lorsque vous cliquez sur l'ic&ocirc;ne Actualiser de la barre d'outils Navigation de l'explorateur. Dreamweaver place votre
fichier sur le serveur avant l'actualisation, ce qui garantit que les deux fichiers soient synchronis&eacute;s.
Utiliser le serveur d'&eacute;valuation pour la source de document Option employ&eacute;e principalement par les pages
dynamiques (comme les pages ColdFusion), activ&eacute;e par d&eacute;faut pour de telles pages. Lorsque cette option est activ&eacute;e,
Dreamweaver emploie la version du fichier qui se trouve sur le serveur d'&eacute;valuation du site comme source d'affichage
en direct.
Utiliser des fichiers locaux pour les liens de documents R&eacute;glage par d&eacute;faut pour les sites non dynamiques. Lorsque
cette option est activ&eacute;e pour des sites dynamiques qui utilisent un serveur d'&eacute;valuation, Dreamweaver emploie les
versions locales des fichiers li&eacute;s au document (par exemple les fichiers CSS et JavaScript) au lieu des fichiers stock&eacute;s
sur le serveur d'&eacute;valuation. Vous pouvez ensuite apporter des modifications aux fichiers associ&eacute;s, de mani&egrave;re &agrave; voir
leur apparence avant de les placer sur le serveur d'&eacute;valuation. Si cette option est d&eacute;sactiv&eacute;e, Dreamweaver emploie les
versions des fichiers associ&eacute;s qui se trouvent sur le serveur d'&eacute;valuation.
Param&egrave;tres de demande HTTP Affiche une bo&icirc;te de dialogue de r&eacute;glages avanc&eacute;s o&ugrave; vous pouvez entrer des valeurs
relatives &agrave; l'affiche de donn&eacute;es en direct. Pour plus d'informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
Voir aussi
&laquo; Pr&eacute;sentation de la barre d'outils Navigation de l'explorateur &raquo; &agrave; la page 11
&laquo; Basculement d'un mode &agrave; un autre dans la fen&ecirc;tre de document &raquo; &agrave; la page 18
&laquo; Ouverture des fichiers associ&eacute;s &raquo; &agrave; la page 72
&laquo; Affichage des donn&eacute;es dynamiques &raquo; &agrave; la page 618
Didacticiel sur l'utilisation du mode Affichage en direct
Derni&egrave;re mise &agrave; jour le 4/5/2011
302
UTILISATION DE DREAMWEAVER
Pr&eacute;visualisation des pages
Pr&eacute;visualisation des pages dans les navigateurs
Affichage d'un aper&ccedil;u dans un navigateur
Vous pouvez obtenir un aper&ccedil;u d'une page dans un navigateur &agrave; la demande. Il n'est pas n&eacute;cessaire de la transf&eacute;rer au
pr&eacute;alable sur un serveur Web. Lorsque vous affichez un aper&ccedil;u d'une page, toutes les fonctions li&eacute;es au navigateur
doivent &ecirc;tre op&eacute;rationnelles, y compris les comportements JavaScript, les liens absolus et relatifs au document, les
contr&ocirc;les ActiveX&reg; et les plug-ins Netscape Navigator, &agrave; condition que vous ayez install&eacute; les plug-ins ou les contr&ocirc;les
ActiveX requis dans vos navigateurs.
Avant d'afficher un aper&ccedil;u d'un document, enregistrez-le, sinon le navigateur n'affiche pas vos modifications les plus
r&eacute;centes.
1 Proc&eacute;dez de l'une des mani&egrave;res suivantes pour afficher un aper&ccedil;u de la page :
• Choisissez Fichier &gt; Aper&ccedil;u dans le navigateur, puis s&eacute;lectionnez un navigateur dans la liste.
Remarque : Si aucun navigateur ne figure dans la liste, choisissez Edition &gt; Pr&eacute;f&eacute;rences ou Dreamweaver &gt; Pr&eacute;f&eacute;rences
(Macintosh), puis s&eacute;lectionnez la cat&eacute;gorie Aper&ccedil;u situ&eacute;e dans la partie gauche du navigateur pour s&eacute;lectionner un
navigateur
• Appuyez sur la touche F12 (Windows) ou Option+F12 (Macintosh) pour afficher la page en cours dans votre
navigateur par d&eacute;faut.
• Appuyez sur la combinaison de touches Ctrl+F12 (Windows) ou Commande+F12 (Macintosh) pour afficher la
page en cours dans votre navigateur secondaire.
2 Cliquez sur les liens et testez le contenu de votre page.
Remarque : Le contenu li&eacute; &agrave; un chemin relatif &agrave; la racine n'appara&icirc;t pas lorsque vous lancez l'aper&ccedil;u de documents dans
un navigateur local, sauf si vous sp&eacute;cifiez un serveur de test ou activez l'option Aper&ccedil;u &agrave; l'aide d'un fichier temporaire
dans Edition &gt; Pr&eacute;f&eacute;rences &gt; Aper&ccedil;u dans le navigateur. En effet, &agrave; la diff&eacute;rence des serveurs, les navigateurs ne
reconnaissent pas les racines de sites.
Pour lancer l'aper&ccedil;u d'un contenu li&eacute; &agrave; des chemins relatifs &agrave; la racine, placez le fichier sur un serveur distant, puis
choisissez Fichier &gt; Aper&ccedil;u dans le navigateur pour l'afficher.
3 Fermez la page dans le navigateur apr&egrave;s avoir effectu&eacute; le test.
Voir aussi
&laquo; Chemins relatifs &agrave; la racine du site &raquo; &agrave; la page 284
D&eacute;finition des pr&eacute;f&eacute;rences d'aper&ccedil;u dans un navigateur
Vous pouvez d&eacute;finir les pr&eacute;f&eacute;rences que les navigateurs emploieront lors de l'affichage de l'aper&ccedil;u d'un site, ainsi que
d&eacute;finir les navigateurs principaux et secondaires.
1 Choisissez Fichier &gt; Aper&ccedil;u dans le navigateur &gt; Modifier la liste des navigateurs.
2 Pour ajouter un navigateur dans la liste, cliquez sur le bouton plus (+), compl&eacute;tez la bo&icirc;te de dialogue Navigateurs,
puis cliquez sur OK.
3 Pour supprimer un navigateur de la liste, s&eacute;lectionnez-le, puis cliquez sur le bouton moins (-).
4 Pour modifier les param&egrave;tres d'un navigateur s&eacute;lectionn&eacute;, cliquez sur le bouton Modifier, effectuez les
modifications dans la bo&icirc;te de dialogue Modifier le navigateur, puis cliquez sur OK.
Derni&egrave;re mise &agrave; jour le 4/5/2011
303
UTILISATION DE DREAMWEAVER
Pr&eacute;visualisation des pages
5 S&eacute;lectionnez l'option Navigateur principal ou Navigateur secondaire pour indiquer si le navigateur s&eacute;lectionn&eacute; est
le navigateur primaire ou secondaire.
Appuyez sur F12 (Windows) ou Option+F12 (Macintosh) pour ouvrir le navigateur principal et sur Ctrl+F12
(Windows) ou Commande+F12 (Macintosh) pour ouvrir le navigateur secondaire.
6 S&eacute;lectionnez Aper&ccedil;u &agrave; l'aide d'un fichier temporaire pour cr&eacute;er une copie temporaire qui sera utilis&eacute;e pour l'aper&ccedil;u
et le d&eacute;boguage. D&eacute;s&eacute;lectionnez cette option si vous souhaitez mettre le document directement &agrave; jour.
Pr&eacute;visualisation des pages dans les p&eacute;riph&eacute;riques
mobiles
Pour pr&eacute;visualiser des pages cr&eacute;&eacute;es dans Dreamweaver sur diff&eacute;rents p&eacute;riph&eacute;riques mobiles, utilisez Device Central
avec sa fonction int&eacute;gr&eacute;e Small-Screen Rendering d'Opera. Des navigateurs diff&eacute;rents sont install&eacute;s sur les diff&eacute;rents
p&eacute;riph&eacute;riques, mais la pr&eacute;visualisation peut vous donner un bon aper&ccedil;u du contenu et de son comportement sur un
p&eacute;riph&eacute;rique donn&eacute;.
1 Lancez Dreamweaver.
2 Ouverture d'un fichier.
3 Effectuez l'une des op&eacute;rations suivantes :
• S&eacute;lectionnez Fichier &gt; Aper&ccedil;u dans le navigateur &gt; Device Central.
• Dans la barre d'outils de la fen&ecirc;tre du document, cliquez et maintenez enfonc&eacute; le bouton du navigateur
Aper&ccedil;u/d&eacute;bogage dans le navigateur
et s&eacute;lectionnez Aper&ccedil;u dans Device Central.
Le fichier est affich&eacute; dans l'onglet Emulateur de Device Central. Pour poursuivre le test, cliquez deux fois sur le nom
d'un autre p&eacute;riph&eacute;rique dans les listes Ensembles de p&eacute;riph&eacute;riques ou P&eacute;riph&eacute;riques disponibles.
Voir aussi
&laquo; Utilisation de Device Central &raquo; &agrave; la page 395
Derni&egrave;re mise &agrave; jour le 4/5/2011
304
Chapitre 11 : Utilisation de code de page
Informations g&eacute;n&eacute;rales sur le codage dans
Dreamweaver
Voir aussi
&laquo; Conseils de code &raquo; &agrave; la page 316
&laquo; D&eacute;finition des pr&eacute;f&eacute;rences de codage &raquo; &agrave; la page 311
&laquo; Personnalisation des raccourcis clavier &raquo; &agrave; la page 311
&laquo; Conformit&eacute; des pages avec le langage XHTML &raquo; &agrave; la page 340
&laquo; Recherche de balises, d'attributs ou de cha&icirc;nes de texte dans le code &raquo; &agrave; la page 332
&laquo; Enregistrement et chargement de mod&egrave;les de recherche &raquo; &agrave; la page 332
&laquo; Optimisation de l'espace de travail pour le d&eacute;veloppement visuel &raquo; &agrave; la page 576
&laquo; Affichage des enregistrements de base de donn&eacute;es &raquo; &agrave; la page 609
Langages pris en charge
Adobe&reg; Dreamweaver&reg; CS5 contient &agrave; la fois des options permettant de lancer des &eacute;diteurs de texte et des options
con&ccedil;ues pour vous assister dans la r&eacute;daction du code, par exemple les conseils de code, et ce dans les langages suivants :
• HTML
• XHTML
• CSS
• JavaScript
• CFML (ColdFusion Markup Language)
• VBScript (pour ASP)
• C# et Visual Basic (pour ASP.NET)
• JSP
• PHP
D'autres langages, par exemple le langage Perl, ne sont pas pris en charge par les fonctions de codage sp&eacute;cifiques au
langage de Dreamweaver ; vous pouvez par exemple cr&eacute;er et modifier des fichiers Perl, mais vous ne pourrez pas
acc&eacute;der aux conseils de code.
Marquage non valide
Si votre document contient du code non valide, Dreamweaver l'affiche en mode Cr&eacute;ation et, si les options ad&eacute;quates
sont activ&eacute;es, le met en surbrillance en mode Code. Si vous s&eacute;lectionnez ces &eacute;l&eacute;ments dans l'un des deux modes,
l'inspecteur Propri&eacute;t&eacute;s affiche des informations sur les causes de leur non-validit&eacute; et sur la mani&egrave;re de corriger les
erreurs.
Derni&egrave;re mise &agrave; jour le 4/5/2011
305
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Remarque : L'option de mise en surbrillance du code non valide en mode Code est d&eacute;sactiv&eacute;e par d&eacute;faut. Pour l'activer,
passez en mode Code (Affichage &gt; Code) puis cliquez sur Affichage &gt; Options d'affichage de code &gt; Surligner le code non
valide).
Vous pouvez &eacute;galement indiquer vos pr&eacute;f&eacute;rences concernant la correction automatique de certains types d'&eacute;l&eacute;ments
de code erron&eacute;s lorsque vous ouvrez un document.
Modification automatique du code
Certaines options de Dreamweaver permettent de nettoyer automatiquement votre code selon vos propres crit&egrave;res.
Toutefois, le code n'est corrige que si vous activez les options correspondantes ou si l'une de vos op&eacute;rations entra&icirc;ne
une modification du code. Par exemple, Dreamweaver modifie vos espaces blancs et la casse des attributs uniquement
si vous s&eacute;lectionnez la commande Appliquer le format source.
Quelques-unes des options de r&eacute;&eacute;criture du code sont activ&eacute;es par d&eacute;faut.
Les fonctions Roundtrip HTML de Dreamweaver permettent d'&eacute;changer des documents entre un &eacute;diteur HTML en
mode texte et Dreamweaver, moyennant un impact nul ou infime sur le contenu et la structure du code source HTML
original du document. Parmi ces fonctionnalit&eacute;s, on compte les suivantes :
• Vous pouvez lancer un &eacute;diteur de texte tiers pour modifier le document actif.
• Par d&eacute;faut, Dreamweaver ne modifie pas le code cr&eacute;&eacute; ou modifi&eacute; par un autre &eacute;diteur HTML, m&ecirc;me s'il est
incorrect, &agrave; moins que vous n'ayez activ&eacute; les options de r&eacute;&eacute;criture.
• En l'absence de crit&egrave;res de r&eacute;f&eacute;rence, Dreamweaver conserve telles quelles les balises qu'il ne reconna&icirc;t pas,
notamment les balises XML. Si une balise non reconnue encadre une autre balise (par exemple,
&lt;MyNewTag&gt;&lt;em&gt;text&lt;/MyNewTag&gt;&lt;/em&gt;), Dreamweaver la marque comme erron&eacute;e, mais ne modifie pas le code.
• Vous pouvez activer certaines options de Dreamweaver pour mettre les &eacute;l&eacute;ments de code HTML incorrects en
surlign&eacute; (jaune) dans le mode Code. Si vous s&eacute;lectionnez une section en surbrillance, l'inspecteur Propri&eacute;t&eacute;s affiche
des informations sur l'erreur et la mani&egrave;re de la corriger.
Code XHTML
Dreamweaver g&eacute;n&egrave;re du nouveau code XHTML et nettoie le code XHTML existant, conform&eacute;ment &agrave; la plupart des
sp&eacute;cifications XHTML. Vous disposez &eacute;galement des outils permettant de se conformer aux rares sp&eacute;cifications
XHTML ignor&eacute;es lors de ce type d'op&eacute;ration.
Remarque : Certaines de ces sp&eacute;cifications sont &eacute;galement exig&eacute;es dans diverses versions du langage HTML.
Le tableau ci-dessous r&eacute;pertorie les sp&eacute;cifications XHTML automatiquement observ&eacute;es par Dreamweaver :
Derni&egrave;re mise &agrave; jour le 4/5/2011
306
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Sp&eacute;cification XHTML
Actions effectu&eacute;es par Dreamweaver
Une d&eacute;claration DOCTYPE doit pr&eacute;c&eacute;der l'&eacute;l&eacute;ment racine dans le
document, laquelle doit faire r&eacute;f&eacute;rence &agrave; l'un des trois fichiers DTD
(Document Type Definition) pour XHTML (strict, transitionnel ou jeu
de cadres).
Ajoute une d&eacute;claration XHTML DOCTYPE &agrave; un document XHTML :
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0
Transitional//EN&quot;
&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd&quot;&gt;
Ou, si le document XHTML comporte un jeu de cadres :
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0
Frameset//EN&quot;
&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1frameset.dtd&quot;&gt;
L'&eacute;l&eacute;ment racine du document doit &ecirc;tre html, et l'&eacute;l&eacute;menthtml doit Ajoute l'attribut namespace &agrave; l'&eacute;l&eacute;ment html comme suit :
d&eacute;signer l'espace de noms XHTML.
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
Un document standard doit comporter les &eacute;l&eacute;ments structurels head, Dans un document standard, inclut les &eacute;l&eacute;ments structurels head,
title et body. Un document de jeu de cadres doit comporter les
title et body. Dans un document de jeu de cadres, inclut les
&eacute;l&eacute;ments structurels head, title et frameset.
&eacute;l&eacute;ments head, title et frameset.
L'imbrication de tous les &eacute;l&eacute;ments du document doit &ecirc;tre correcte :
&lt;p&gt;Voici un &lt;i&gt;exemple incorrect.&lt;/p&gt;&lt;/i&gt; &lt;p&gt;Voici
un &lt;i&gt;exemple incorrect.&lt;/i&gt;&lt;/p&gt;
G&eacute;n&egrave;re correctement le code imbriqu&eacute; et, pendant le nettoyage du
code XHTML, corrige l'imbrication du code non g&eacute;n&eacute;r&eacute; par
Dreamweaver.
Tous les noms d'&eacute;l&eacute;ments et d'attributs doivent &ecirc;tre r&eacute;dig&eacute;s en
minuscules.
Impose l'usage des minuscules dans les noms d'&eacute;l&eacute;ments et
d'attributs HTML du code XHTML g&eacute;n&eacute;r&eacute; par ses soins et pendant le
nettoyage du code XHTML, ind&eacute;pendamment des pr&eacute;f&eacute;rences de
casse d&eacute;finies pour la balise et l'attribut.
Tous les &eacute;l&eacute;ments doivent se terminer par une balise de fin, &agrave; moins
qu'ils ne soient d&eacute;clar&eacute;s dans le fichier DTD comme EMPTY.
Ins&egrave;re des balises de fin dans le code g&eacute;n&eacute;r&eacute; par ses soins, ainsi que
pendant le nettoyage du code XHTML.
Ins&egrave;re les &eacute;l&eacute;ments vides avec un espace avant la barre oblique de
Les &eacute;l&eacute;ments vides doivent se terminer par une balise de fin ou la
balise de d&eacute;but doit &ecirc;tre ferm&eacute;e avec le code /&gt;. Par exemple, &lt;br&gt; fermeture des balises vides dans le code g&eacute;n&eacute;r&eacute; par ses soins ainsi
est incorrect ; la forme correcte de la balise est soit &lt;br&gt;&lt;/br&gt;,
que pendant le nettoyage du code XHTML.
soit &lt;br/&gt;. Les &eacute;l&eacute;ments vides sont les suivants : area, base,
basefont, br, col, frame, hr, img, input, isindex, link, meta et
param.
Pour garantir la r&eacute;trocompatibilit&eacute; avec les navigateurs non XML, un
espace doit pr&eacute;c&eacute;der le code /&gt; (par exemple, &lt;br /&gt; et non&lt;br/&gt;).
Il est impossible d'abr&eacute;ger les attributs ; ainsi, &lt;td nowrap&gt; est
incorrect ; la forme correcte est &lt;td nowrap=&quot;nowrap&quot;&gt;.
Ins&egrave;re des paires attribut/valeur compl&egrave;tes dans le code g&eacute;n&eacute;r&eacute; par
ses soins, ainsi que pendant le nettoyage du code XHTML.
Cette r&egrave;gle s'applique aux attributs suivants : checked, compact,
declare, defer, disabled, ismap, multiple, noresize,
noshade, nowrap, readonly et selected.
Remarque : Un navigateur HTML ne prenant pas en charge HTML 4
risque de ne pas pouvoir interpr&eacute;ter ces attributs bool&eacute;ens sous leur
forme compl&egrave;te.
Tous les attributs doivent &ecirc;tre plac&eacute;s entre guillemets.
Met les valeurs d'attribut entre guillemets dans le code g&eacute;n&eacute;r&eacute; par ses
soins, ainsi que pendant le nettoyage du code XHTML.
Les &eacute;l&eacute;ments suivants doivent comporter un attribut id et un attribut
name : a, applet, form, frame, iframe, img et map. Par exemple, &lt;a
name=&quot;intro&quot;&gt;Introduction&lt;/a&gt; est incorrect ; la forme
correcte est
Affecte la m&ecirc;me valeur aux attributs name et id, toutes les fois o&ugrave;
l'attribut name est d&eacute;fini par un inspecteur Propri&eacute;t&eacute;s, dans le code
g&eacute;n&eacute;r&eacute; par Dreamweaver, ainsi que pendant le nettoyage du
code XHTML.
&lt;a id=&quot;intro&quot;&gt;Introduction&lt;/a&gt; ou &lt;a id=&quot;section1&quot;
name=&quot;intro&quot;&gt; Introduction&lt;/a&gt;.
Derni&egrave;re mise &agrave; jour le 4/5/2011
307
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Sp&eacute;cification XHTML
Actions effectu&eacute;es par Dreamweaver
Dans le cas d'attributs dont les valeurs sont de type Enum&eacute;r&eacute;, cellesci doivent figurer en minuscules.
Impose l'utilisation des minuscules pour les valeurs de type Enum&eacute;r&eacute;
dans le code g&eacute;n&eacute;r&eacute; par ses soins, ainsi que pendant le nettoyage du
code XHTML.
Une valeur de type Enum&eacute;r&eacute; est une valeur appartenant &agrave; une liste
donn&eacute;e de valeurs autoris&eacute;es ; par exemple, l'attribut align
comprend les valeurs autoris&eacute;es suivantes : center, justify, left
et right.
Tous les &eacute;l&eacute;ments de script et de style doivent comporter un attribut
type.
(La n&eacute;cessit&eacute; de l'attribut de type d'un &eacute;l&eacute;ment de script a &eacute;t&eacute;
introduite avec HTML 4, lors de la d&eacute;pr&eacute;ciation de l'attribut de
language.)
D&eacute;finit les attributs de typeet de langage dans les &eacute;l&eacute;ments de
script ainsi que l'attribut de type dans les &eacute;l&eacute;ments de style, mais
aussi dans le code g&eacute;n&eacute;r&eacute; par ses soins et pendant le nettoyage du
code XHTML.
Tous les &eacute;l&eacute;ments img et area doivent comprendre un attribut alt. D&eacute;finit ces attributs dans le code g&eacute;n&eacute;r&eacute; par ses soins et, pendant le
nettoyage du code XHTML, signale les attributs alt manquants.
Expressions r&eacute;guli&egrave;res
Les expressions r&eacute;guli&egrave;res sont des mod&egrave;les d&eacute;crivant des combinaisons de caract&egrave;res dans un texte. Utilisez-les dans
vos recherches pour d&eacute;crire des concepts tels que &laquo; lignes commen&ccedil;ant par ‘var’ &raquo; ou &laquo; valeurs d'attribut contenant un
nombre &raquo;.
Le tableau ci-dessous pr&eacute;sente les caract&egrave;res sp&eacute;ciaux des expressions r&eacute;guli&egrave;res, leur signification et des exemples
d'utilisation. Pour rechercher du texte contenant un des caract&egrave;res sp&eacute;ciaux pr&eacute;sent&eacute;s dans le tableau, indiquez qu'il
s'agit d'un caract&egrave;re sp&eacute;cial &agrave; l'aide d'une barre oblique invers&eacute;e. Par exemple, pour rechercher l'ast&eacute;risque dans la
phrase conditions sp&eacute;ciales*, vous pouvez utiliser un mod&egrave;le de recherche tel que celui-ci : sp&eacute;ciales\*. Si vous
n'indiquez pas l'ast&eacute;risque comme caract&egrave;re sp&eacute;cial, vous trouverez toutes les occurrences de &laquo; sp&eacute;ciales &raquo; (de m&ecirc;me
que &laquo; sp&eacute;ciale &raquo;, &laquo; sp&eacute;cialess &raquo; et &laquo; sp&eacute;cialesss &raquo;), et pas seulement celles qui sont suivies d'un ast&eacute;risque.
Caract&egrave;re
trouve
Exemple
^
D&eacute;but de saisie ou de ligne.
^T trouve &laquo; T &raquo; dans &laquo; Tonnerre de Brest &raquo;, mais pas dans &laquo; La
case de l'oncle Tom &raquo;
$
Fin de saisie ou de ligne.
n$ trouve &laquo; n &raquo; dans &laquo; malin &raquo; mais pas dans &laquo; noir &raquo;
*
Le caract&egrave;re pr&eacute;c&eacute;dent, 0 ou plusieurs fois.
um* trouve &laquo; um &raquo; dans &laquo; rhum &raquo;, &laquo; umm &raquo; dans &laquo; yummy &raquo; et
&laquo; u &raquo; dans &laquo; bouge &raquo;
+
Le caract&egrave;re pr&eacute;c&eacute;dent, 1 ou plusieurs fois.
um+ trouve &laquo; um &raquo; dans &laquo; rhum &raquo;, &laquo; umm &raquo; dans &laquo; yummy &raquo;
mais rien dans &laquo; bouge &raquo;
?
Le caract&egrave;re pr&eacute;c&eacute;dent, une fois au maximum
(en d'autres termes, le caract&egrave;re pr&eacute;c&eacute;dent est
facultatif).
st?on trouve &laquo; son &raquo; dans &laquo; Johnson &raquo; et &laquo; ston &raquo; dans
&laquo; Johnston &raquo;, mais rien dans &laquo; Appleton &raquo; ou &laquo; tension &raquo;
.
Tout caract&egrave;re, sauf une nouvelle ligne (retour &agrave; .an trouve &laquo; ran &raquo;, &laquo; tan &raquo; et &laquo; lan &raquo; dans le mot &laquo; rantanplan &raquo;
la ligne).
x|y
Soit x, soit y.
FF0000|0000FF trouve &laquo; FF0000 &raquo; dans
bgcolor=&quot;#FF0000&quot; et &laquo; 0000FF &raquo; dans font
color=&quot;#0000FF&quot;
{n}
Exactement n occurrences du caract&egrave;re
pr&eacute;c&eacute;dent.
l{2} trouve &laquo; ll &raquo; dans &laquo; elle &raquo; et les deux premiers l de
Au moins n et au plus m occurrences du
caract&egrave;re pr&eacute;c&eacute;dent.
F{2,4} trouve &laquo; FF &raquo; dans &laquo; #FF0000 &raquo; et les quatre premiers
{n,m}
&laquo; ellllle &raquo;, mais ne trouve rien dans &laquo; l&eacute;ger &raquo;
F dans #FFFFFF
Derni&egrave;re mise &agrave; jour le 4/5/2011
308
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Caract&egrave;re
trouve
Exemple
[abc]
L'un des caract&egrave;res entour&eacute;s de crochets.
Sp&eacute;cifiez une plage de caract&egrave;res &agrave; l'aide d'un
trait d'union (par exemple, [a-f] &eacute;quivaut &agrave;
[abcdef]).
[e-g] trouve &laquo; e &raquo; dans &laquo; œil &raquo;, &laquo; f &raquo; dans &laquo; fil &raquo; et &laquo; g &raquo; dans
Tout caract&egrave;re non inclus entre les crochets.
Sp&eacute;cifiez une plage de caract&egrave;res &agrave; l'aide d'un
trait d'union (par exemple, [^a-f] &eacute;quivaut &agrave;
[^abcdef]).
[^aeiou] trouve initialement &laquo; r &raquo; dans &laquo; orange &raquo;, &laquo; b &raquo; dans
Limite de mot (par exemple un espace ou un
retour chariot).
\bb trouve &laquo; b &raquo; dans &laquo; balle &raquo; mais pas dans &laquo; gober &raquo; ou
\B
Tous les &eacute;l&eacute;ments sauf les limites de mot
\Bb trouve &laquo; b &raquo; dans &laquo; gober &raquo; mais pas dans &laquo; balle &raquo;
\d
Tout chiffre. C'est l'&eacute;quivalent de [0-9].
\d trouve &laquo; 3 &raquo; dans &laquo; C3PO &raquo; et &laquo; 2 &raquo; dans &laquo; appartement
[^abc]
\b
&laquo; garde &raquo;
&laquo; balle &raquo; et &laquo; k &raquo; dans &laquo; eek! &raquo;
&laquo; snob &raquo;
2G &raquo;.
\D
Tout caract&egrave;re alphab&eacute;tique et non num&eacute;rique. \D trouve &laquo; S &raquo; dans &laquo; 900S &raquo; et &laquo; Q &raquo; dans &laquo; Q45 &raquo;.
C'est l'&eacute;quivalent de [^0-9].
\f
Saut de page.
\n
Saut de ligne.
\r
Retour chariot.
\s
Tout &laquo; espace blanc &raquo;, ou caract&egrave;re
\sval trouve &laquo; val &raquo; dans &laquo; le val Andr&eacute; &raquo; mais pas dans
d'espacement : espace, tabulation, saut de page &laquo; aval &raquo;
ou saut de ligne.
\S
Tout caract&egrave;re autre qu'un espace blanc.
\Sval trouve &laquo; val &raquo; dans &laquo; aval &raquo;, mais pas dans &laquo; le val
Andr&eacute; &raquo;
\t
Tabulation.
\w
Tout caract&egrave;re alphanum&eacute;rique, y compris le
c\w* trouve &laquo; chien &raquo; dans &laquo; le chien noir &raquo;, ainsi que &laquo; cou &raquo; et
caract&egrave;re de soulignement. C'est l'&eacute;quivalent de &laquo; chien &raquo; dans &laquo; le cou du chien noir &raquo;.
[A-Za-z0-9_].
\W
Tout caract&egrave;re non alphanum&eacute;rique. C'est
l'&eacute;quivalent de [^A-Za-z0-9_].
Ctrl+Entr&eacute;e ou Maj+Entr&eacute;e
(Windows), ou Contr&ocirc;le+
Retour ou Maj+Retour ou
Commande+Retour
(Macintosh)
Retour chariot. Veillez &agrave; d&eacute;sactiver l'option
Ignorer les diff&eacute;rences entre les espaces blancs
lorsque vous effectuez ce type de recherche si
vous n'utilisez pas des expressions r&eacute;guli&egrave;res.
Notez que cette recherche porte sur un
caract&egrave;re particulier et non sur la notion de
retour &agrave; la ligne ; par exemple, elle ne trouvera
pas une balise &lt;br&gt; ou &lt;p&gt;. Les caract&egrave;res de
retour chariot apparaissent en tant qu'espaces
en mode Cr&eacute;ation, et non en tant que sauts de
ligne.
\W trouve &laquo; &amp; &raquo; dans &laquo; Tintin&amp;Milou &raquo; et &laquo; % &raquo; dans &laquo; 100% &raquo;.
Utilisez des parenth&egrave;ses pour d&eacute;finir au sein de l'expression r&eacute;guli&egrave;re des groupes auxquels il sera fait r&eacute;f&eacute;rence plus
tard ; utilisez $1, $2, $3, etc. dans le champ Remplacer pour faire r&eacute;f&eacute;rence au premier, deuxi&egrave;me, troisi&egrave;me, etc.,
groupe entre parenth&egrave;ses.
Remarque : Dans la zone de texte Rechercher, faites r&eacute;f&eacute;rence au groupe entre parenth&egrave;ses mentionn&eacute; plus t&ocirc;t dans
l'expression r&eacute;guli&egrave;re en indiquant \1, \2, \3 etc. au lieu de $1, $2, $3.
Derni&egrave;re mise &agrave; jour le 4/5/2011
309
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Par exemple, la recherche de (\d+)\/(\d+)\/(\d+) et le remplacement par $2/$1/$3 &eacute;changent le jour et le mois dans
une date s&eacute;par&eacute;e par des barres obliques permettant ainsi la conversion entre les dates de style am&eacute;ricain et les dates
de style europ&eacute;en.
Code de comportement de serveur
Lorsque vous s&eacute;lectionnez un comportement de serveur dans le panneau Comportements de serveur pendant le
d&eacute;veloppement d'une page dynamique, Dreamweaver ins&egrave;re un ou plusieurs blocs de code dans la page pour faire
fonctionner le comportement de serveur.
Si vous modifiez manuellement le code contenu dans un bloc de code, les panneaux, par exemple le panneau Liaisons
et le panneau Comportements de serveur, ne sont plus accessibles pour la modification du comportement du serveur.
Dreamweaver d&eacute;tecte les comportements de serveur en se rep&eacute;rant &agrave; des mod&egrave;les de code sp&eacute;cifiques dans la page, puis
les affiche dans le panneau correspondant. Toute modification du code d'un bloc de code emp&ecirc;che d&egrave;s lors
Dreamweaver de d&eacute;tecter le comportement de serveur et de l'afficher dans le panneau Comportements de serveur. Le
comportement de serveur subsiste toutefois dans la page : vous pouvez donc le corriger dans l'environnement de
codage de Dreamweaver.
Configuration d'un environnement de codage
Utilisation d'espaces de travail orient&eacute;s codeur
Vous pouvez modifier l'environnement de codage de Dreamweaver pour l'adapter &agrave; la fa&ccedil;on dont vous travaillez. Vous
pouvez par exemple changer le mode d'affichage du code, d&eacute;finir diff&eacute;rents raccourcis clavier ou importer et utiliser
votre biblioth&egrave;que de balises de pr&eacute;dilection.
Dreamweaver est fourni avec plusieurs dispositions d'espace de travail con&ccedil;ues pour offrir une exp&eacute;rience de codage
optimale. La fonction Commutation d'espace de travail de la barre Application vous permet de s&eacute;lectionner l'un des
espaces de travail suivants : D&eacute;veloppeur d'applications, D&eacute;veloppeur d'applications Plus, Codeur et Codeur Plus.
Tous ces espaces de travail s'affichent par d&eacute;faut en mode Code (dans la fen&ecirc;tre de document tout enti&egrave;re ou en modes
Code et Cr&eacute;ation) et comportent des panneaux ancr&eacute;s du c&ocirc;t&eacute; gauche de l'&eacute;cran. &Agrave; l'exception de D&eacute;veloppeur
d'applications Plus, ils &eacute;liminent tous l'inspecteur Propri&eacute;t&eacute;s de l'affichage par d&eacute;faut.
Si aucun des espaces de travail pr&eacute;d&eacute;finis ne r&eacute;pond pr&eacute;cis&eacute;ment &agrave; vos attentes, vous pouvez personnaliser la
disposition en ouvrant et en encrant des panneaux comme bon vous semble, puis en enregistrant l'espace de travail en
tant qu'espace de travail personnalis&eacute;.
Voir aussi
&laquo; Gestion des fen&ecirc;tres et des panneaux &raquo; &agrave; la page 24
&laquo; Enregistrement et basculement d’un espace de travail &agrave; l’autre &raquo; &agrave; la page 28
&laquo; Personnalisation des raccourcis clavier &raquo; &agrave; la page 35
&laquo; Gestion des biblioth&egrave;ques de balises &raquo; &agrave; la page 355
Derni&egrave;re mise &agrave; jour le 4/5/2011
310
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Affichage du code
Vous pouvez visualiser le code source du document actif de plusieurs fa&ccedil;ons : en l'affichant dans la fen&ecirc;tre de
document apr&egrave;s avoir activ&eacute; le mode Code, en fractionnant la fen&ecirc;tre de document pour afficher &agrave; la fois la page et son
code, ou encore en travaillant dans l'Inspecteur de code, qui forme une fen&ecirc;tre de code distincte. L'inspecteur de code
fonctionne comme le mode Code; il peut &ecirc;tre consid&eacute;r&eacute; comme un mode Code d&eacute;tachable pour le document actif.
Voir aussi
&laquo; Modification du format du code &raquo; &agrave; la page 312
&laquo; D&eacute;finition des pr&eacute;f&eacute;rences de conseils de code &raquo; &agrave; la page 319
&laquo; D&eacute;finition des couleurs du code &raquo; &agrave; la page 315
Affichage du code dans la fen&ecirc;tre de document
❖ Choisissez Affichage &gt; Code.
Codage et modification simultan&eacute;e d'une page dans la fen&ecirc;tre de document
1 Choisissez Affichage &gt; Code et cr&eacute;ation.
Le code appara&icirc;t dans le volet sup&eacute;rieur, et la page dans le volet inf&eacute;rieur.
2 Pour afficher la page au premier plan, choisissez Mode Cr&eacute;ation au premier plan dans le menu Affichage de la barre
d'outils du document.
3 Pour redimensionner les volets dans la fen&ecirc;tre de document, faites glisser la barre de division &agrave; l'endroit appropri&eacute;.
La barre de division est intercal&eacute;e entre les deux volets.
Toutes les modifications apport&eacute;es dans le mode Cr&eacute;ation se r&eacute;percutent automatiquement dans le mode Code.
Toutefois, apr&egrave;s avoir effectu&eacute; des modifications en mode Code, vous devez mettre &agrave; jour manuellement le document
dans le mode Cr&eacute;ation ; il vous suffit pour cela de cliquer dans ce mode ou d'appuyer sur la touche F5.
Affichage du code dans une fen&ecirc;tre distincte dans l'inspecteur de code
L'inspecteur de code permet de travailler dans une fen&ecirc;tre de code distincte, comme vous le faites en mode Code.
❖ Choisissez Fen&ecirc;tre &gt; Inspecteur de code. La barre d'outils contient les options suivantes :
Gestion des fichiers Permet de placer ou d'acqu&eacute;rir le fichier.
Aper&ccedil;u/D&eacute;bogage dans le navigateur Permet de pr&eacute;visualiser ou de d&eacute;boguer votre document dans un navigateur.
Actualiser mode Cr&eacute;ation Met &agrave; jour le document en mode Cr&eacute;ation, de fa&ccedil;on &agrave; ce qu'il applique les modifications
apport&eacute;es dans le code. Les modifications apport&eacute;es dans le code n'apparaissent pas automatiquement dans le mode
Cr&eacute;ation : vous devez ex&eacute;cuter tout d'abord certaines op&eacute;rations, comme enregistrer le fichier ou utiliser ce bouton.
R&eacute;f&eacute;rence Ouvre le panneau R&eacute;f&eacute;rence. Consultez la section &laquo; Utilisation des documents de r&eacute;f&eacute;rence sur les
langages &raquo; &agrave; la page 333.
Navigation par code Permet de se d&eacute;placer rapidement dans le code. Consultez la section &laquo; Acc&egrave;s &agrave; une fonction
JavaScript ou VBScript &raquo; &agrave; la page 328.
Afficher les options Permet de d&eacute;terminer la fa&ccedil;on dont le code est affich&eacute;. Consultez la section &laquo; D&eacute;finition de
l'apparence du code &raquo; &agrave; la page 311.
Pour utiliser la barre de codage situ&eacute;e dans la partie gauche de la fen&ecirc;tre, consultez la section &laquo; Insertion de code avec
la barre d'outils de codage &raquo; &agrave; la page 321.
Derni&egrave;re mise &agrave; jour le 4/5/2011
311
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Personnalisation des raccourcis clavier
Rien ne vous emp&ecirc;che d'utiliser vos raccourcis clavier pr&eacute;f&eacute;r&eacute;s dans Dreamweaver. Si vous &ecirc;tes habitu&eacute; &agrave; utiliser des
raccourcis clavier sp&eacute;cifiques (par exemple, Maj+Entr&eacute;e pour ins&eacute;rer un saut de ligne, Ctrl+G pour atteindre un code
pr&eacute;cis), vous pouvez les int&eacute;grer dans Dreamweaver au moyen de l'&eacute;diteur de raccourcis clavier.
Pour plus d'informations, reportez-vous &agrave; la section &laquo; Personnalisation des raccourcis clavier &raquo; &agrave; la page 35.
Voir aussi
&laquo; Manipulation de fragments de code &raquo; &agrave; la page 330
Ouverture de fichiers en mode Code par d&eacute;faut
Lorsque vous ouvrez un fichier qui ne contient normalement aucun code HTML (par exemple, un fichier JavaScript),
il s'ouvre en mode Code (ou dans l'Inspecteur de code), et non pas en mode Cr&eacute;ation. Vous pouvez d&eacute;finir les types de
fichiers &agrave; ouvrir en mode Code.
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh).
2 S&eacute;lectionnez la cat&eacute;gorie Types de fichiers/Editeurs dans la liste de gauche.
3 Dans la zone de texte Ouvrir en mode Code, entrez les extensions des types de fichier que vous voulez ouvrir
automatiquement en mode Code.
Ins&eacute;rez un espace entre les extensions. Vous pouvez en ajouter autant que vous le souhaitez.
Voir aussi
&laquo; Utilisation d'un &eacute;diteur externe &raquo; &agrave; la page 316
&laquo; D&eacute;finition des pr&eacute;f&eacute;rences du programme de validation &raquo; &agrave; la page 339
D&eacute;finition des pr&eacute;f&eacute;rences de codage
A propos des pr&eacute;f&eacute;rences de codage
Vous pouvez d&eacute;finir des pr&eacute;f&eacute;rences de codage, par exemple le formatage du code ou la mise en couleurs, en fonction
de vos besoins.
Remarque : Pour d&eacute;finir les pr&eacute;f&eacute;rences avanc&eacute;es, utilisez l'&eacute;diteur de la biblioth&egrave;que de balises (consultez la section
&laquo; Gestion des biblioth&egrave;ques de balises &raquo; &agrave; la page 355).
D&eacute;finition de l'apparence du code
Le menu Affichage &gt; Options d'affichage de code permet de configurer le renvoi &agrave; la ligne des mots, l'affichage du
num&eacute;ro des lignes de code, la mise en surbrillance du code HTML incorrect, la coloration de la syntaxe des &eacute;l&eacute;ments
de code, la mise en retrait du code, ainsi que l’affichage des caract&egrave;res masqu&eacute;s.
1 Affichez le document dans le mode Code ou l'Inspecteur de code.
2 Effectuez l'une des op&eacute;rations suivantes :
• Choisissez Affichage &gt; Code et cr&eacute;ation
Derni&egrave;re mise &agrave; jour le 4/5/2011
312
UTILISATION DE DREAMWEAVER
Utilisation de code de page
• Cliquez sur le bouton Options d'affichage
dans la barre d'outils situ&eacute;e en haut du mode Code ou de l'Inspecteur
de code.
3 Activez ou d&eacute;sactivez l’une des options suivantes :
Renvoi &agrave; la ligne Renvoie le code &agrave; la ligne pour le rendre visible sans qu'il soit n&eacute;cessaire de le faire d&eacute;filer
horizontalement. Cette option n'ins&egrave;re aucun saut de ligne ; elle a pour seule fonction de simplifier la consultation du code.
Num&eacute;ros de lignes Affiche le num&eacute;ro des lignes de code sur le c&ocirc;t&eacute;.
Caract&egrave;res masqu&eacute;s Permet d’afficher les caract&egrave;res sp&eacute;ciaux au lieu d’un simple espace blanc. Par exemple, un point
appara&icirc;t pour masquer chaque espace, un double chevron remplace chaque tabulation, et une marque de paragraphe
remplace chaque saut de ligne.
Remarque : Les retours &agrave; la ligne contextuels que Dreamweaver utilise pour le renvoi du texte &agrave; la ligne ne sont pas
symbolis&eacute;s par une marque de paragraphe.
Surligner le code non valide Active, dans Dreamweaver, le surlignage en jaune du code HTML non valide. D&egrave;s la
s&eacute;lection d'une balise incorrecte, l'inspecteur Propri&eacute;t&eacute;s affiche des instructions pour corriger l'erreur.
Coloration de la syntaxe Active ou d&eacute;sactive la mise en couleurs du code. Pour plus d'informations sur la modification
des couleurs &agrave; appliquer, consultez la section &laquo; D&eacute;finition des couleurs du code &raquo; &agrave; la page 315.
Retrait auto Automatise la mise en retrait du code lorsque vous appuyez sur la touche Entr&eacute;e pendant la r&eacute;daction du
code. La nouvelle ligne de code s'aligne au m&ecirc;me niveau que la ligne qui la pr&eacute;c&egrave;de. Pour plus d'informations sur la
modification de l'espacement du retrait, consultez l'option Taille de tabulation dans &laquo; Modification du format du
code &raquo; &agrave; la page 312.
Voir aussi
&laquo; Affichage du code &raquo; &agrave; la page 310
&laquo; Pr&eacute;sentation de la barre d'outils de codage &raquo; &agrave; la page 12
&laquo; D&eacute;finition des pr&eacute;f&eacute;rences de conseils de code &raquo; &agrave; la page 319
Modification du format du code
Vous pouvez modifier l'aspect de votre code en d&eacute;finissant des pr&eacute;f&eacute;rences de formatage telles que la mise en retrait,
la longueur de ligne et la casse des noms de balises et d'attributs.
Toutes les options de formatage de code, &agrave; l'exception de l'option Remplacer la casse de, ne s'appliquent
automatiquement qu'aux nouveaux documents et aux additions &agrave; des documents que vous cr&eacute;ez par la suite.
Pour modifier le formatage d'un document HTML existant, ouvrez ce document puis cliquez sur Commandes &gt;
Appliquer le format source.
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences.
2 S&eacute;lectionnez la cat&eacute;gorie Format du code dans la liste de gauche.
3 Parmi les options suivantes, d&eacute;finissez celles de votre choix :
Retrait Indique si le code g&eacute;n&eacute;r&eacute; par Dreamweaver doit &ecirc;tre mis en retrait (en conformit&eacute; avec les r&egrave;gles de retrait
d&eacute;finies dans ces pr&eacute;f&eacute;rences) ou non.
Remarque : La majorit&eacute; des options de retrait de cette bo&icirc;te de dialogue ne s'appliquent qu'au code g&eacute;n&eacute;r&eacute; par
Dreamweaver et non au code entr&eacute; par vos soins. Pour que chaque nouvelle ligne entr&eacute;e s'aligne au m&ecirc;me niveau que la
pr&eacute;c&eacute;dente, utilisez l'option Retrait auto dans les options d'affichage du mode Code. Pour plus d'informations, consultez
la section &laquo; D&eacute;finition de l'apparence du code &raquo; &agrave; la page 311.
Derni&egrave;re mise &agrave; jour le 4/5/2011
313
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Avec (Zone de texte ou menu contextuel) Sp&eacute;cifie le nombre d'espaces ou de tabulations que Dreamweaver doit
utiliser afin de mettre en retrait le code g&eacute;n&eacute;r&eacute;. Par exemple, si vous tapez 3 dans la zone de texte et si vous s&eacute;lectionnez
Tabulations dans le menu contextuel, le code g&eacute;n&eacute;r&eacute; par Dreamweaver sera mis en retrait de trois tabulations &agrave; chaque
niveau de mise en retrait.
Taille de la tabulation D&eacute;termine la taille, en caract&egrave;res, de chaque tabulation dans le mode Code. Par exemple, si cette
taille est d&eacute;finie sur 4, chaque tabulation s'affiche dans le mode Code sous la forme d'un espace long de 4 caract&egrave;res.
De plus, si la taille du retrait est d&eacute;finie sur 3 et que les caract&egrave;res utilis&eacute;s sont des tabulations, le code g&eacute;n&eacute;r&eacute; par
Dreamweaver est mis en retrait de trois tabulations par niveau de mise en retrait, ce qui correspond &agrave; un espace de 12
caract&egrave;res en mode Code.
Remarque : Dreamweaver effectue les mises en retrait &agrave; l'aide de tabulations ou d'espaces mais ne convertit pas une s&eacute;rie
d'espaces en tabulation lors de l'insertion de code.
Type de saut de ligne Permet d'indiquer le type de serveur distant (Windows, Macintosh ou UNIX) qui h&eacute;bergera
votre site. Le choix du type de caract&egrave;res de saut de ligne appropri&eacute; (CR, CR/LF, LF) garantit que votre code source
HTML s'affiche correctement lorsqu'il est affich&eacute; &agrave; partir du serveur distant. Ce param&egrave;tre est &eacute;galement utile lorsque
vous travaillez avec un &eacute;diteur de texte externe qui ne reconna&icirc;t que certains types de retours de chariot. Par exemple,
utilisez CR/LF (Windows), si votre &eacute;diteur de texte est le Bloc-notes de Windows, et CR (Macintosh) s'il s'agit de
SimpleText.
Remarque : Pour les serveurs auxquels vous vous connectez via FTP, cette option ne s'applique qu'en mode de transfert
binaire ; le mode de transfert ASCII de Dreamweaver ignore cette option. Si vous t&eacute;l&eacute;chargez (en r&eacute;ception) des fichiers
en mode ASCII, Dreamweaver d&eacute;finit les sauts de ligne en fonction du syst&egrave;me d'exploitation de votre ordinateur ; si vous
transf&eacute;rez des fichiers en mode ASCII, les sauts de ligne sont toujours d&eacute;finis comme CR/LF.
Casse de balise par d&eacute;faut et casse d'attribut par d&eacute;faut Contr&ocirc;lez la capitalisation des noms de balises et d'attributs.
Ces options s'appliquent aux balises et aux attributs que vous ins&eacute;rez ou que vous modifiez dans le mode Cr&eacute;ation,
mais pas aux balises ou attributs que vous entrez directement dans le mode Code (ou l'Inspecteur de code), ni aux
balises ou attributs d&eacute;j&agrave; contenus dans un document que vous ouvrez (sauf, dans ce dernier cas, si vous avez &eacute;galement
activ&eacute; l'une des options Remplacer la casse de).
Remarque : Cette pr&eacute;f&eacute;rence s'applique uniquement aux pages HTML. Dreamweaver l'ignore pour les pages XHTML
&eacute;tant donn&eacute; que les balises et les attributs en majuscules sont incorrects dans XHTML.
Remplacer la casse de : Balises et Attributs Sp&eacute;cifie s'il faut toujours convertir les noms de balises et d'attributs dans la
casse sp&eacute;cifi&eacute;e, m&ecirc;me lors de l'ouverture d'un document HTML existant. Lorsque vous activez l'une de ces options et
que vous cliquez sur OK pour fermer la bo&icirc;te de dialogue, les balises et les attributs du document actif sont
imm&eacute;diatement convertis dans la casse indiqu&eacute;e et il en sera de m&ecirc;me dans tous les documents que vous ouvrirez par
la suite (du moins tant que vous n'aurez pas d&eacute;sactiv&eacute; cette option). Les balises et les attributs que vous tapez en mode
Code ou dans Quick Tag Editor ou bien que vous ins&eacute;rez &agrave; partir du panneau Insertion, sont &eacute;galement convertis dans
la casse sp&eacute;cifi&eacute;e. Par exemple, si vous voulez que les noms des balises soient toujours convertis en minuscules,
sp&eacute;cifiez minuscules dans l'option Casse de balise par d&eacute;faut et activez l'option Remplacer la casse de : Balises. Lorsque
vous ouvrez ensuite un document contenant des noms de balises en majuscules, Dreamweaver les convertit en
minuscules.
Remarque : D'anciennes versions du code HTML permettaient d'&eacute;crire les noms d'attributs et les balises en majuscules
ou en minuscules, mais le XHTML requiert des minuscules. L'usage du XHTML &eacute;tant de plus en plus r&eacute;pandu, il est
conseill&eacute; d'utiliser des minuscules pour ces &eacute;l&eacute;ments.
Balise TD : Ne pas inclure de saut de ligne dans la balise TD R&eacute;sout un probl&egrave;me de rendu qui se rencontre dans
certains anciens navigateurs, si un espace blanc ou des sauts de ligne sont plac&eacute;s imm&eacute;diatement apr&egrave;s une balise &lt;td&gt;
ou juste avant une balise &lt;/td&gt;. Si vous activez cette option, Dreamweaver ne place pas de saut de ligne apr&egrave;s une balise
&lt;td&gt; ou avant une balise &lt;/td&gt;, m&ecirc;me si le formatage de la biblioth&egrave;que de balises indique qu'un saut de ligne devrait
&ecirc;tre ins&eacute;r&eacute;.
Derni&egrave;re mise &agrave; jour le 4/5/2011
314
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Formatage avanc&eacute; Permet de d&eacute;finir des options de formatage pour le code CSS (Cascading Style Sheets, feuilles de
style en cascade) et pour les diff&eacute;rents attributs et balises dans l'&eacute;diteur de la biblioth&egrave;que de balises.
Espace blanc (version japonaise uniquement) Permet de s&eacute;lectionner une espace ins&eacute;cable (&amp;nbsp;) ou une espace
Zenkaku pour votre code HTML. L'espace blanc s&eacute;lectionn&eacute; avec cette option est utilis&eacute; pour les balises vides lors de
la cr&eacute;ation d'un tableau et lorsque l'option &laquo; Autoriser plusieurs espaces cons&eacute;cutives &raquo; est activ&eacute;e dans les pages de
codage japonaises.
Voir aussi
&laquo; Mise en forme du code CSS &raquo; &agrave; la page 151
&laquo; D&eacute;finition des pr&eacute;f&eacute;rences de conseils de code &raquo; &agrave; la page 319
D&eacute;finition des pr&eacute;f&eacute;rences de correction de code
Les pr&eacute;f&eacute;rences de correction de code permettent de sp&eacute;cifier les pr&eacute;f&eacute;rences de modification de code par
Dreamweaver lors de l'ouverture de documents, lorsque vous copiez et collez des &eacute;l&eacute;ments de formulaires ou que vous
entrez des valeurs et adresses URL &agrave; l'aide des outils (par exemple, l'inspecteur Propri&eacute;t&eacute;s). Ces pr&eacute;f&eacute;rences sont sans
effet lorsque vous modifiez du code HTML ou des scripts dans le mode Code.
Si vous d&eacute;sactivez ces options de correction, les &eacute;l&eacute;ments de marquage non valides sont affich&eacute;s dans la fen&ecirc;tre de
document pour le code HTML qu'il aurait corrig&eacute;.
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh).
2 S&eacute;lectionnez la cat&eacute;gorie Correction du code dans la liste de gauche.
3 Parmi les options suivantes, d&eacute;finissez celles de votre choix :
Corriger les balises incorrectement imbriqu&eacute;es et non ferm&eacute;es Corrige les balises qui se chevauchent. Par exemple,
&lt;b&gt;&lt;i&gt;texte&lt;/b&gt;&lt;/i&gt; est r&eacute;&eacute;crit comme &lt;b&gt;&lt;i&gt;texte&lt;/i&gt;&lt;/b&gt;. Cette option ins&egrave;re &eacute;galement des guillemets et
des crochets de fermeture s'ils sont absents.
Renommer les &eacute;l&eacute;ments de formulaire lors du collage Garantit l'absence de noms d'objets de formulaire en double.
Cette option est activ&eacute;e par d&eacute;faut.
Remarque : Contrairement &agrave; d'autres options de cette bo&icirc;te de dialogue de pr&eacute;f&eacute;rences, cette option ne s'applique pas &agrave;
l'ouverture d'un document, mais uniquement lorsque vous copiez et collez un &eacute;l&eacute;ment de formulaire.
Supprimer les balises de fermeture superflues Supprime les balises de fermeture auxquelles aucune balise d'ouverture
ne correspond.
M'avertir lors de la correction ou de la suppression de balises Affiche un r&eacute;capitulatif des codes HTML
techniquement non valides que Dreamweaver a tent&eacute; de corriger. Ce r&eacute;capitulatif indique l'emplacement du probl&egrave;me
(&agrave; l'aide des num&eacute;ros de ligne et de colonne), pour vous permettre de v&eacute;rifier la correction et veiller &agrave; ce qu'elle
produise l'effet voulu.
Ne jamais corriger le code : Dans les fichiers avec extensions. Permet d'emp&ecirc;cher Dreamweaver de corriger le code
dans les fichiers portant les extensions indiqu&eacute;es. Cette option est particuli&egrave;rement utile pour les fichiers contenant
des balises propri&eacute;taires.
Coder &lt;, &gt;, &amp; et &quot; dans les valeurs d'attributs &agrave; l'aide de &amp; Garantit que les valeurs d'attribut entr&eacute;es ou modifi&eacute;es &agrave;
l'aide des outils Dreamweaver (par exemple, l'inspecteur Propri&eacute;t&eacute;s) ne contiennent que des caract&egrave;res autoris&eacute;s. Cette
option est activ&eacute;e par d&eacute;faut.
Remarque : Cette option et les options suivantes ne s'appliquent pas aux adresses URL entr&eacute;es dans le mode Code. De
plus, ces options n'entra&icirc;nent pas de modification dans le code d&eacute;j&agrave; pr&eacute;sent dans un fichier.
Derni&egrave;re mise &agrave; jour le 4/5/2011
315
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Ne pas coder les caract&egrave;res sp&eacute;ciaux Emp&ecirc;che toute modification des adresses URL par Dreamweaver en vue de
n'utiliser que des caract&egrave;res autoris&eacute;s. Cette option est activ&eacute;e par d&eacute;faut.
Coder caract&egrave;res sp&eacute;ciaux dans les URL &agrave; l'aide de &amp;# Garantit que, lorsque vous entrez ou modifiez des adresses URL
&agrave; l'aide des outils Dreamweaver (par exemple, l'inspecteur Propri&eacute;t&eacute;s), ces URL ne contiennent que des caract&egrave;res
autoris&eacute;s.
Coder caract&egrave;res sp&eacute;ciaux dans les URL &agrave; l'aide de % Fonctionne de fa&ccedil;on identique &agrave; l'option ci-dessus, mais utilise
une autre m&eacute;thode pour coder les caract&egrave;res sp&eacute;ciaux. Cette m&eacute;thode d'encodage (&agrave; l'aide du signe %) offre une
meilleure compatibilit&eacute; avec les navigateurs plus anciens, mais ne se montre pas aussi efficace avec les caract&egrave;res
utilis&eacute;s dans certaines langues.
Voir aussi
&laquo; Nettoyage de fichiers HTML cr&eacute;&eacute;s avec Microsoft Word &raquo; &agrave; la page 76
&laquo; D&eacute;finition des pr&eacute;f&eacute;rences de conseils de code &raquo; &agrave; la page 319
D&eacute;finition des couleurs du code
Utilisez les pr&eacute;f&eacute;rences de coloration du code pour sp&eacute;cifier les couleurs des principales cat&eacute;gories de balises et
d'&eacute;l&eacute;ments de code, par exemple les balises li&eacute;es &agrave; la mise en forme ou les identificateurs JavaScript. Pour d&eacute;finir les
pr&eacute;f&eacute;rences de coloration d'une balise sp&eacute;cifique, modifiez sa d&eacute;finition dans l'&eacute;diteur de la biblioth&egrave;que de balises.
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh).
2 S&eacute;lectionnez la cat&eacute;gorie Coloration du code dans la liste de gauche.
3 S&eacute;lectionnez un type de document dans la liste Type de document. Les modifications que vous apportez aux
pr&eacute;f&eacute;rences de coloration du code influeront sur tous les documents de ce type.
4 Cliquez sur le bouton Modifier le mod&egrave;le de coloration.
5 Dans la bo&icirc;te de dialogue Modifier le mod&egrave;le de coloration, choisissez un &eacute;l&eacute;ment de code dans la liste Styles, puis
d&eacute;finissez la couleur du texte, la couleur d'arri&egrave;re-plan et &eacute;ventuellement le style (gras, italique ou soulign&eacute;).
L'&eacute;chantillon de code affich&eacute; dans le volet d'aper&ccedil;u est modifi&eacute; pour correspondre aux nouveaux styles et couleurs.
Cliquez sur OK pour enregistrer les modifications et fermer la bo&icirc;te de dialogue Modifier le mod&egrave;le de coloration.
6 Apportez les autres modifications requises aux pr&eacute;f&eacute;rences de coloration du code, puis cliquez sur OK.
Arri&egrave;re-plan par d&eacute;faut permet de d&eacute;finir la couleur d'arri&egrave;re-plan par d&eacute;faut pour le mode Code et pour l'inspecteur
de code.
Caract&egrave;res masqu&eacute;s d&eacute;finit la couleur des caract&egrave;res masqu&eacute;s.
Arri&egrave;re-plan du code en direct d&eacute;finit la couleur d'arri&egrave;re-plan du mode Code en direct. La couleur par d&eacute;faut est le
jaune.
Modifications du code en direct d&eacute;finit la couleur de surbrillance du code qui est modifi&eacute; dans le mode Code en direct.
La couleur par d&eacute;faut est le rose.
Arri&egrave;re-plan en lecture seule d&eacute;finit la couleur d'arri&egrave;re-plan du texte en lecture seule.
Voir aussi
&laquo; Personnalisation des pr&eacute;f&eacute;rences de coloration de code d'un mod&egrave;le &raquo; &agrave; la page 436
&laquo; Modification de biblioth&egrave;ques, de balises et d'attributs &raquo; &agrave; la page 356
Derni&egrave;re mise &agrave; jour le 4/5/2011
316
UTILISATION DE DREAMWEAVER
Utilisation de code de page
&laquo; Pr&eacute;visualisation du code en direct &raquo; &agrave; la page 300
&laquo; D&eacute;finition des pr&eacute;f&eacute;rences de conseils de code &raquo; &agrave; la page 319
Utilisation d'un &eacute;diteur externe
Vous pouvez sp&eacute;cifier un &eacute;diteur externe &agrave; utiliser pour l'&eacute;dition de fichiers poss&eacute;dant des extensions pr&eacute;cises. Par
exemple, vous pouvez lancer un &eacute;diteur de texte comme BBEdit, le Bloc-Notes ou TextEdit &agrave; partir de Dreamweaver
pour modifier les fichiers JavaScript (JS).
Vous pouvez attribuer diff&eacute;rents &eacute;diteurs externes pour diff&eacute;rentes extensions de nom de fichier.
Voir aussi
&laquo; Ouverture de fichiers en mode Code par d&eacute;faut &raquo; &agrave; la page 311
D&eacute;finition d'un &eacute;diteur externe pour un type de fichier
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences.
2 S&eacute;lectionnez la cat&eacute;gorie Types de fichiers/Editeurs dans la liste de gauche, puis cliquez sur OK.
Ouvrir en mode Code Pr&eacute;cise les extensions de noms de fichiers &agrave; ouvrir automatiquement en mode Code dans
Dreamweaver.
Editeur de code externe Sp&eacute;cifie l'&eacute;diteur de texte &agrave; utiliser.
Recharger les fichiers modifi&eacute;s Indiquez ce que Dreamweaver doit faire lorsqu'il d&eacute;tecte que des changements ont &eacute;t&eacute;
apport&eacute;s de l'ext&eacute;rieur &agrave; un document d&eacute;j&agrave; ouvert dans Dreamweaver.
Enregistrer au d&eacute;marrage Permet d'indiquer si Dreamweaver doit syst&eacute;matiquement enregistrer le document actif
avant d'ex&eacute;cuter l'&eacute;diteur, ne jamais enregistrer le document ou vous demander s'il doit l'enregistrer ou non &agrave; chaque
lancement de l'&eacute;diteur externe.
Fireworks Sp&eacute;cifiez les &eacute;diteurs pour divers types de fichiers multim&eacute;dia.
D&eacute;marrage d'un &eacute;diteur de code externe
❖ Choisissez Edition &gt; Modifier avec &eacute;diteur externe.
R&eacute;daction et modification de code
Conseils de code
Les conseils de code vous permettent d'ins&eacute;rer et de modifier le code rapidement et sans erreur de saisie. A mesure que
vous tapez des caract&egrave;res en mode Code, une liste de suggestions s'affiche et vous aide &agrave; compl&eacute;ter votre saisie. Par
exemple, lorsque vous tapez les premiers caract&egrave;res du nom d'une balise, d'un attribut ou d'une propri&eacute;t&eacute; CSS, une liste
d'options dont le nom commence par ces caract&egrave;res s'affiche. Cette fonctionnalit&eacute; facilite l'insertion et la modification
de code. Vous pouvez &eacute;galement l'utiliser pour consulter les attributs disponibles pour une balise, les param&egrave;tres d'une
fonction ou les m&eacute;thodes d'un objet.
Les conseils de code sont disponibles pour diff&eacute;rents types de code. Lorsque vous tapez le premier caract&egrave;re d'un type
de code pr&eacute;cis, une liste de suggestions s'affiche. Par exemple, pour afficher la liste des conseils de code pour les noms
de balises HTML, tapez un crochet ouvrant (&lt;). De m&ecirc;me, pour afficher des conseils de code pour JavaScript, tapez un
point apr&egrave;s un objet.
Derni&egrave;re mise &agrave; jour le 4/5/2011
317
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Pour exploiter pleinement cette fonctionnalit&eacute;, en particulier lorsque vous l'utilisez pour des fonctions et des objets,
d&eacute;finissez l'option D&eacute;lai de la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences de conseils de code sur 0 seconde.
La fonctionnalit&eacute; de conseils de code reconna&icirc;t &eacute;galement les classes JavaScript personnalis&eacute;es qui ne sont pas int&eacute;gr&eacute;es
&agrave; ce langage. Vous pouvez r&eacute;diger ces classes personnalis&eacute;es ou les ajouter par l'interm&eacute;diaire de biblioth&egrave;ques de
fournisseurs tiers, comme Prototype.
Pour faire dispara&icirc;tre la liste des conseils de code, appuyez sur la touche Retour arri&egrave;re (Windows) ou Arri&egrave;re
(Macintosh).
Vous trouverez un didacticiel vid&eacute;o sur les conseils de code &agrave; l'adresse www.adobe.com/go/lrvid4048_dw_fr.
Vous trouverez un didacticiel vid&eacute;o sur la prise en charge de JavaScript dans Dreamweaver, r&eacute;alis&eacute; par l'&eacute;quipe de
Dreamweaver, &agrave; l'adresse www.adobe.com/go/dw10javascript_fr.
Langages et technologies pris en charge
Dreamweaver prend en charge les conseils de code pour les langages et les technologies suivants :
• Adobe ColdFusion
• Ajax
• ASP JavaScript
• ASP.NET C#
• ASP.NET VB
• ASP VBScript
• CSS2 et CSS3
• DOM (Document Object Model)
• HTML4 et HTML5
• jQuery (CS5.5 et versions ult&eacute;rieures)
• JavaScript (avec conseils de code pour les classes personnalis&eacute;es)
• JSP
• PHP MySQL
• Spry
Affichage d'un menu de conseils de code
Le menu de conseils de code s'affiche automatiquement lorsque vous tapez en mode Code. Vous pouvez &eacute;galement
l'afficher manuellement, sans taper.
1 En mode Code (Fen&ecirc;tre &gt; Code), placez le point d'insertion &agrave; l'int&eacute;rieur d'une balise.
2 Appuyez sur Ctrl + Barre d'espace.
Insertion de code &agrave; l'aide des conseils en mode Code
1 Saisissez le premier caract&egrave;re du segment de code. Par exemple, pour ins&eacute;rer une balise, tapez un crochet ouvrant
(&lt;). Pour ins&eacute;rer un attribut, placez le point d'insertion juste apr&egrave;s le nom de la balise, puis appuyez sur la barre
d'espace.
Une liste d'&eacute;l&eacute;ments (par exemple les noms des diff&eacute;rentes balises ou des diff&eacute;rents attributs) s'affiche.
Derni&egrave;re mise &agrave; jour le 4/5/2011
318
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Vous pouvez fermer cette liste &agrave; tout moment en appuyant sur la touche Echap.
2 Faites d&eacute;filer les &eacute;l&eacute;ments de la liste &agrave; l'aide de la barre de d&eacute;filement ou des touches fl&eacute;ch&eacute;es vers le haut et vers le bas.
3 Double-cliquez sur l'un des &eacute;l&eacute;ments de cette liste pour l'ins&eacute;rer ; vous pouvez &eacute;galement le s&eacute;lectionner, puis
appuyer sur la touche Entr&eacute;e (Windows) ou Retour (Macintosh).
Si vous avez cr&eacute;&eacute; un style CSS et que celui-ci ne figure pas dans la liste des conseils de code correspondant aux
styles CSS, cliquez sur Actualiser la liste des styles. Si le mode Cr&eacute;ation est visible, il peut arriver que du code non
valide s'y affiche provisoirement lorsque vous cliquez sur Actualiser la liste des styles. Pour faire dispara&icirc;tre ce code non
valide du mode Cr&eacute;ation, appuyez sur F5 afin d'actualiser l'affichage apr&egrave;s l'insertion du style.
4 Pour ins&eacute;rer une balise de fin, tapez &lt;/ (barre oblique).
Remarque : Par d&eacute;faut, Dreamweaver d&eacute;termine le moment o&ugrave; une balise de fermeture est requise et l'ins&egrave;re
automatiquement. Vous pouvez modifier ce comportement par d&eacute;faut, de fa&ccedil;on &agrave; ce que Dreamweaver ins&egrave;re une balise
de fermeture lorsque vous avez tap&eacute; le crochet fermant (&gt;) final de la balise d'ouverture. Alternativement, le
comportement par d&eacute;faut peut consister &agrave; ne pas ins&eacute;rer la moindre balise de fermeture. S&eacute;lectionnez Edition &gt;
Pr&eacute;f&eacute;rences &gt; Conseils de code, puis s&eacute;lectionnez l'une des options de Balises de fermeture.
Modification d'une balise &agrave; l'aide des conseils de code
• Pour remplacer un attribut par un autre, supprimez l'attribut concern&eacute; et sa valeur, puis ajoutez le nouvel attribut
et la valeur associ&eacute;e en suivant la proc&eacute;dure ci-avant.
• Pour modifier une valeur, supprimez la valeur concern&eacute;e, puis ajoutez une nouvelle valeur en suivant la proc&eacute;dure
ci-avant.
Actualisation des conseils de code JavaScript
Dreamweaver actualise automatiquement la liste des conseils de code disponibles lorsque vous travaillez dans un
fichier JavaScript. Par exemple, supposons que vous travailliez dans un fichier HTML principal et que vous passiez &agrave;
un fichier JavaScript afin d'y apporter une modification. Cette modification se r&eacute;percute dans la liste des conseils de
code lorsque vous revenez au fichier HTML principal. Toutefois, la mise &agrave; jour automatique ne fonctionne que si vous
modifiez vos fichiers JavaScript dans Dreamweaver.
Si vous les modifiez en dehors de Dreamweaver, appuyez sur CTRL+point pour actualiser les conseils de code
JavaScript.
Conseils de code et erreurs de syntaxe
Il peut arriver que les conseils de code ne fonctionnent pas correctement si Dreamweaver d&eacute;tecte des erreurs de
syntaxe dans votre code. Dreamweaver signale les erreurs de syntaxe en affichant des informations &agrave; leur sujet dans
une barre en haut de la page. La barre d'informations sur les erreurs de syntaxe affiche la premi&egrave;re ligne du code o&ugrave;
Dreamweaver a rencontr&eacute; l'erreur. Lorsque vous avez corrig&eacute; les erreurs, Dreamweaver continue &agrave; afficher celles qui
surviennent par la suite.
Dreamweaver fournit une assistance suppl&eacute;mentaire en mettant en rouge les num&eacute;ros des lignes o&ugrave; des erreurs de
syntaxe se sont produites. Cette mise en &eacute;vidence est visible dans le mode Code du fichier contenant l'erreur.
Dreamweaver affiche non seulement les erreurs de syntaxe pour la page actuelle, mais aussi pour les pages associ&eacute;es.
Supposons par exemple que vous travailliez sur une page HTML utilisant un fichier JavaScript inclus. Si le fichier
inclus contient une erreur, Dreamweaver affiche &eacute;galement une alerte pour celui-ci. Vous pouvez ais&eacute;ment ouvrir le
fichier associ&eacute; contenant l'erreur en cliquant sur son nom dans le haut du document.
Derni&egrave;re mise &agrave; jour le 4/5/2011
319
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Vous pouvez d&eacute;sactiver la barre d'informations sur les erreurs de syntaxe. Pour ce faire, cliquez sur le bouton Alertes
d'erreurs de syntaxe dans la barre d'outils de codage.
D&eacute;finition des pr&eacute;f&eacute;rences de conseils de code
Vous pouvez modifier les param&egrave;tres par d&eacute;faut des conseils de code. Par exemple, si vous ne voulez pas afficher les
noms des propri&eacute;t&eacute;s CSS ou les conseils de code Spry, vous pouvez les d&eacute;sactiver parmi les pr&eacute;f&eacute;rences des conseils de
code. Vous pouvez &eacute;galement d&eacute;finir des pr&eacute;f&eacute;rences relatives au d&eacute;lai d'affichage des conseils de code et aux balises
de fermeture.
M&ecirc;me si l'affichage des conseils de code est d&eacute;sactiv&eacute;, vous pouvez afficher un conseil en mode Code en appuyant sur
les touches Ctrl+Barre d'espace.
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences.
2 S&eacute;lectionnez la cat&eacute;gorie Conseils de code dans la liste de gauche.
3 Parmi les options suivantes, d&eacute;finissez celles de votre choix :
Balises de fermeture Permet de sp&eacute;cifier le mode d'insertion des balises de fermeture par Dreamweaver. Par d&eacute;faut,
Dreamweaver ins&egrave;re la balise de fermeture automatiquement lorsque vous tapez les caract&egrave;res &lt;/. Vous pouvez
modifier ce comportement par d&eacute;faut, de fa&ccedil;on &agrave; ce que Dreamweaver ins&egrave;re une balise de fermeture suite au crochet
fermant (&gt;) de la balise d'ouverture, ou de fa&ccedil;on &agrave; omettre les balises de fin.
Activer les conseils de code Entra&icirc;ne l'affichage des conseils de code lorsque vous entrez du code en mode Code.
R&eacute;glez le curseur D&eacute;lai pour d&eacute;finir le d&eacute;lai (en secondes) qui s'&eacute;coule avant l'apparition des conseils appropri&eacute;s.
Activer les infobulles descriptives Affiche une description d&eacute;taill&eacute;e (s'il en existe une) du conseil de code s&eacute;lectionn&eacute;.
Menus D&eacute;finit pr&eacute;cis&eacute;ment le type de conseils de code &agrave; afficher pendant la saisie. Libre &agrave; vous d'utiliser tous les menus
ou une partie seulement.
Voir aussi
&laquo; Utilisation des menus d'indication dans Quick Tag Editor &raquo; &agrave; la page 345
DOM (Document Object Model) W3C
Didacticiel sur les conseils de code
Conseils de code sp&eacute;cifiques au site
Dreamweaver CS5 permet aux d&eacute;veloppeurs qui emploient Joomla, Drupal, Wordpress ou d'autres cadres de visualiser
les conseils de code PHP lorsqu'ils &eacute;crivent en mode Code. Pour afficher ces conseils de code, vous devez tout d'abord
cr&eacute;er un fichier de configuration &agrave; l'aide de la bo&icirc;te de dialogue Conseils de code sp&eacute;cifiques au site. La configuration
indique o&ugrave; Dreamweaver doit rechercher les conseils de code sp&eacute;cifiques &agrave; votre site.
Vous trouverez un didacticiel vid&eacute;o sur l'utilisation des conseils de code sp&eacute;cifiques au site &agrave; l'adresse
www.adobe.com/go/learn_dw_comm13_fr.
Cr&eacute;ation du fichier de configuration
La bo&icirc;te de dialogue Conseils de code sp&eacute;cifiques au site permet de cr&eacute;er le fichier de configuration requis pour afficher
les conseils de code dans Dreamweaver.
Par d&eacute;faut, Dreamweaver place le fichier de configuration dans le r&eacute;pertoire Adobe Dreamweaver
CS5\configuration\Shared\Dinamico\Presets.
Derni&egrave;re mise &agrave; jour le 4/5/2011
320
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Remarque : Les conseils de code que vous cr&eacute;ez sont sp&eacute;cifiques au site s&eacute;lectionn&eacute; dans le panneau Fichiers de
Dreamweaver. Pour que les conseils de code puissent &ecirc;tre affich&eacute;s, la page sur laquelle vous travaillez doit se trouve dans
le site actuellement s&eacute;lectionn&eacute;.
1 Choisissez Site &gt; Conseils de code.
Par d&eacute;faut, la fonctionnalit&eacute; Conseils de code sp&eacute;cifiques au site analyse votre site afin de d&eacute;terminer quel cadre
CMS (syst&egrave;me de gestion du contenu) vous employez. Par d&eacute;faut, Dreamweaver prend en charge trois cadres :
Drupal, Joomla et Wordpress.
Les quatre boutons &agrave; droite du menu Structure permettent d'importer, enregistrer, renommer ou supprimer des
structures de cadre.
Remarque : Il est impossible de supprimer ou de renommer les structures de cadre par d&eacute;faut existantes.
2 Dans la zone Sous-racine, d&eacute;finissez le dossier de sous-racine o&ugrave; vous stockez les fichiers de votre cadre. Vous
pouvez cliquer sur l'ic&ocirc;ne de dossier en regard de la zone de texte pour rechercher l'emplacement des fichiers de
cadre.
Dreamweaver affiche l'arborescence des dossiers contenant les fichiers de votre cadre. Si les dossiers et/ou fichiers
&agrave; analyser sont tous affich&eacute;s, cliquez sur OK pour ex&eacute;cuter l'analyse. Si vous voulez personnaliser l'analyse, passez
aux &eacute;tapes suivantes.
3 Cliquez sur le bouton Plus (+) dans le haut de la fen&ecirc;tre Fichiers afin de s&eacute;lectionner un fichier ou un dossier &agrave;
ajouter &agrave; l'analyse. Dans la bo&icirc;te de dialogue Ajouter fichier/dossier, vous pouvez sp&eacute;cifier les extensions de fichiers
sp&eacute;cifiques que vous voulez inclure.
Remarque : La d&eacute;finition d'extensions de fichier sp&eacute;cifiques acc&eacute;l&egrave;re le processus d'analyse.
4 Pour retirer des fichiers de l'analyse, s&eacute;lectionnez-les puis cliquez sur le bouton Moins (-) dans le haut de la fen&ecirc;tre
Fichiers.
Remarque : Si vous avez s&eacute;lectionn&eacute; le cadre Drupal ou Joomla, la bo&icirc;te de dialogue Conseils de code sp&eacute;cifiques au
site affiche un chemin d'acc&egrave;s suppl&eacute;mentaire vers n fichier dans votre dossier de configuration de Dreamweaver. Ne
le supprimez pas, car il est n&eacute;cessaire en cas d'emploi de ces cadres.
5 Pour personnaliser la fa&ccedil;on dont la fonctionnalit&eacute; Conseils de code sp&eacute;cifiques au site traite un fichier ou un dossier
pr&eacute;cis, s&eacute;lectionnez-le dans la liste et effectuez l'une des actions suivantes :
• Choisissez Analyser ce dossier pour inclure le dossier s&eacute;lectionn&eacute; dans l'analyse.
• S&eacute;lectionnez R&eacute;cursif pour inclure tous les fichiers et dossiers du r&eacute;pertoire s&eacute;lectionn&eacute;.
• Cliquez sur le bouton Extensions pour ouvrir la bo&icirc;te de dialogue Rechercher des extensions, o&ugrave; vous pouvez
pr&eacute;ciser les extensions de fichiers &agrave; inclure dans l'analyse pour un fichier ou un dossier d&eacute;termin&eacute;.
Enregistrement de la structure du site
Vous pouvez enregistrer la structure de site personnalis&eacute;e que vous avez cr&eacute;&eacute;e dans la bo&icirc;te de dialogue Conseils de
code sp&eacute;cifiques au site.
1 Cr&eacute;ez la structure des fichiers et des dossiers d&eacute;sir&eacute;e, en ajoutant et supprimant les fichiers et dossiers selon vos
besoins.
2 Cliquez sur le bouton Enregistrer la structure dans le coin sup&eacute;rieur droit de la bo&icirc;te de dialogue.
3 Donnez un nom &agrave; la structure du site, puis cliquez sur Enregistrer.
Remarque : Si le nom que vous indiquez est d&eacute;j&agrave; utilis&eacute;, Dreamweaver vous invite &agrave; entrer un nom diff&eacute;rent ou &agrave;
confirmer que vous voulez &eacute;craser la structure portant ce m&ecirc;me nom. Il est impossible d'&eacute;craser les structures de cadre par
d&eacute;faut.
Derni&egrave;re mise &agrave; jour le 4/5/2011
321
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Modification du nom d'une structure de site
Lorsque vous renommez la structure de votre site, n'oubliez pas que vous ne pouvez pas utiliser les noms d'une des
trois structures de cadre de site par d&eacute;faut, ni le mot &laquo; custom &raquo; (personnalis&eacute;).
1 Affichez la structure &agrave; renommer.
2 Cliquez sur l'ic&ocirc;ne Renommer la structure dans le coin sup&eacute;rieur droit de la bo&icirc;te de dialogue.
3 Entrez le nouveau nom de la structure, puis cliquez sur Renommer.
Remarque : Si le nom que vous indiquez est d&eacute;j&agrave; utilis&eacute;, Dreamweaver vous invite &agrave; entrer un nom diff&eacute;rent ou &agrave;
confirmer que vous voulez &eacute;craser la structure portant ce m&ecirc;me nom. Il est impossible d'&eacute;craser les structures de cadre par
d&eacute;faut.
Ajout de fichiers ou de dossiers &agrave; la structure d'un site
Vous pouvez ajouter n'importe quel fichier ou dossier associ&eacute; &agrave; votre cadre. Vous pouvez ensuite pr&eacute;ciser les
extensions des fichiers &agrave; analyser. (Voir la section suivante.)
1 Cliquez sur le bouton Plus (+) dans le haut de la fen&ecirc;tre Fichiers pour ouvrir la bo&icirc;te de dialogue Ajouter
fichier/dossier.
2 Dans la zone Ajouter fichier/dossier, entrez le chemin d'acc&egrave;s au fichier ou au dossier &agrave; ajouter. Vous pouvez
&eacute;galement cliquer sur l'ic&ocirc;ne de dossier &agrave; c&ocirc;t&eacute; de la zone de texte pour rechercher un fichier ou un dossier.
3 Cliquez sur le bouton Plus (+) dans le haut de la fen&ecirc;tre Extensions pour pr&eacute;ciser les extensions des fichiers &agrave;
analyser.
Remarque : La d&eacute;finition d'extensions de fichier sp&eacute;cifiques acc&eacute;l&egrave;re le processus d'analyse.
4 Cliquez sur Ajouter.
Recherche d'extensions de fichiers dans un site
Utilisez la bo&icirc;te de dialogue Rechercher des extensions pour afficher et trouver les extensions des fichiers inclus dans
la structure du site.
1 Dans la bo&icirc;te de dialogue Conseils de code sp&eacute;cifiques au site, cliquez sur le bouton Extensions.
La bo&icirc;te de dialogue Rechercher des extensions affiche les extensions pouvant &ecirc;tre analys&eacute;es pour l'instant.
2 Pour ajouter une autre extension &agrave; la liste, cliquez sur le bouton Plus (+) dans le haut de la fen&ecirc;tre Extensions.
3 Pour supprimer une extension de la liste, cliquez sur le bouton Moins (-).
Insertion de code avec la barre d'outils de codage
1 Assurez-vous que vous &ecirc;tes en mode Code (Affichage &gt; Code).
2 Placez le curseur dans le code, ou s&eacute;lectionnez un bloc de code.
3 Cliquez sur un bouton de la barre d'outils de codage, ou s&eacute;lectionnez un &eacute;l&eacute;ment de l'un des menus contextuels de
la barre d'outils.
Pour conna&icirc;tre la fonction de chaque bouton, positionnez le pointeur sur ce bouton jusqu'&agrave; ce qu'une info-bulle
apparaisse. La barre d'outils de codage contient par d&eacute;faut les boutons suivants :
Ouvrir les documents Affiche la liste des documents ouverts. Lorsque cette option est s&eacute;lectionn&eacute;e, elle s'affiche dans
la fen&ecirc;tre Document.
Afficher la fen&ecirc;tre Navigation dans le code Affiche la fen&ecirc;tre Navigation dans le code. Pour plus d'informations,
consultez la rubrique &laquo; Navigation vers le code apparent&eacute; &raquo; &agrave; la page 327.
Derni&egrave;re mise &agrave; jour le 4/5/2011
322
UTILISATION DE DREAMWEAVER
Utilisation de code de page
R&eacute;duire balises enti&egrave;res R&eacute;duit tout le contenu compris entre une balise d’ouverture et sa balise de fermeture (par
exemple, tout le code compris entre &lt;table&gt; et &lt;/table&gt;). Pour r&eacute;duire tout le contenu d'une balise compl&egrave;te, placez
le point d'insertion sur la balise d'ouverture ou de fermeture, puis cliquez sur le bouton R&eacute;duire balise enti&egrave;re.
Il est &eacute;galement possible de r&eacute;duire le code situ&eacute; &agrave; l'ext&eacute;rieur d'une balise compl&egrave;te, en pla&ccedil;ant le point d'insertion dans
une balise d'ouverture ou de fermeture avant de cliquer sur le bouton R&eacute;duire balise enti&egrave;re tout en maintenant la
touche Alt enfonc&eacute;e (Windows) ou la touche Option (Macintosh). Par ailleurs, vous pouvez maintenir la touche Ctrl
enfonc&eacute;e tout en cliquant sur ce bouton pour d&eacute;sactiver la r&eacute;duction intelligente. Dans ce cas, Dreamweaver n’ajuste pas
le contenu r&eacute;duit &agrave; l’ext&eacute;rieur de la paire de balises. Pour plus d'informations sur le mode Code, consultez la section &laquo; A
propos de la r&eacute;duction du code &raquo; &agrave; la page 334.
R&eacute;duire la s&eacute;lection R&eacute;duit le code s&eacute;lectionn&eacute;.
Vous pouvez &eacute;galement r&eacute;duire le code en dehors d'une s&eacute;lection en cliquant tout en maintenant enfonc&eacute;e la touche
Alt (Windows) ou Option (Macintosh) sur le bouton R&eacute;duire s&eacute;lection. Par ailleurs, vous pouvez maintenir la touche
Ctrl enfonc&eacute;e tout en cliquant sur ce bouton pour d&eacute;sactiver la r&eacute;duction intelligente. Dans ce cas, Dreamweaver n’ajuste
pas le contenu et r&eacute;duit exactement le code s&eacute;lectionn&eacute;. Pour plus d'informations sur le mode Code, consultez la section
&laquo; A propos de la r&eacute;duction du code &raquo; &agrave; la page 334.
D&eacute;velopper tout R&eacute;tablit tout le code r&eacute;duit.
S&eacute;lectionner une balise parent S&eacute;lectionne le contenu et les balises d’ouverture et de fermeture qui encadrent la ligne
dans laquelle est plac&eacute; le point d’insertion. Si vous cliquez plusieurs fois sur ce bouton et que toutes vos balises sont
&eacute;quilibr&eacute;es, Dreamweaver s&eacute;lectionne finalement les balises html et /html situ&eacute;es aux extr&eacute;mit&eacute;s.
Equilibrer les accolades S&eacute;lectionne tout le code se trouvant &agrave; l'int&eacute;rieur des parenth&egrave;ses, des accolades ou des crochets
qui encadrent la ligne dans laquelle est plac&eacute; le point d’insertion. Si vous cliquez plusieurs fois sur ce bouton et que
toutes vos balises sont &eacute;quilibr&eacute;es, Dreamweaver s&eacute;lectionne finalement les parenth&egrave;ses, accolades ou crochets les plus
ext&eacute;rieur(e)s du document.
Num&eacute;ros de lignes Permet d'afficher ou masquer les num&eacute;ros de lignes au d&eacute;but de chaque ligne de code.
Surligner le code non valide Surligne le code non valide en jaune.
Alertes d'erreurs de syntaxe dans la barre d'information Active ou d&eacute;sactive une barre d'information, dans le haut de
la page, qui vous avertit des erreurs de syntaxe. Lorsque Dreamweaver d&eacute;tecte une erreur de syntaxe, la barre
d'information sur les erreurs de syntaxe sp&eacute;cifie la ligne de code o&ugrave; cette erreur est survenue. En outre, Dreamweaver
met en surbrillance le num&eacute;ro de la ligne de l'erreur, sur la gauche du document, en mode Code. La barre d'information
est activ&eacute;e par d&eacute;faut, mais elle ne s'affiche que lorsque Dreamweaver d&eacute;tecte des erreurs de syntaxe sur la page.
Appliquer commentaire Permet d'encadrer le code s&eacute;lectionn&eacute; avec des balises de commentaires, ou d'ouvrir de
nouvelles balises de commentaires.
• Appliquer Commentaire HTML encadre le code s&eacute;lectionn&eacute; de balises &lt;!-- et --&gt;, ou ouvre une nouvelle balise si
aucun code n'est s&eacute;lectionn&eacute;.
• Appliquer Commentaire // ins&egrave;re une double barre oblique (//) au d&eacute;but de chaque ligne du code CSS ou
JavaScript s&eacute;lectionn&eacute;, ou ins&egrave;re une unique balise // si aucun code n'est s&eacute;lectionn&eacute;.
• Appliquer Commentaire /* */ encadre le code CSS ou JavaScript s&eacute;lectionn&eacute; avec les codes de commentaires /* et /*.
• La marque de commentaire ' a &eacute;t&eacute; con&ccedil;ue pour le code Visual Basic. Elle ins&egrave;re un guillemet droit simple au d&eacute;but
de chaque ligne s&eacute;lectionn&eacute;e d'un script Visual Basic, ou ins&egrave;re un guillemet droit simple au point d'insertion si
aucun code n'est s&eacute;lectionn&eacute;.
• Lorsque vous travaillez sur un fichier ASP, ASP.NET, JSP, PHP ou ColdFusion, si vous appliquez l’option
Appliquer Commentaire sur serveur, Dreamweaver d&eacute;tecte automatiquement la balise de commentaire correcte et
l’applique &agrave; la s&eacute;lection.
Derni&egrave;re mise &agrave; jour le 4/5/2011
323
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Supprimer commentaire Supprime les balises de commentaires du code s&eacute;lectionn&eacute;. Si une s&eacute;lection comporte des
commentaires incorpor&eacute;s, seules les balises de commentaire externe sont supprim&eacute;es.
Envelopper avec balise Permet d'encadrer le code s&eacute;lectionn&eacute; avec la balise indiqu&eacute;e dans Quick Tag Editor.
Fragment de code r&eacute;cents Permet de choisir dans le panneau Fragments de code un fragment de code r&eacute;cemment
utilis&eacute; et de l'ins&eacute;rer. Pour plus d'informations, consultez la section &laquo; Manipulation de fragments de code &raquo; &agrave; la
page 330.
D&eacute;placer ou convertir une feuille CSS Permet de d&eacute;placer du code CSS ou de convertir du code CSS int&eacute;gr&eacute; en r&egrave;gles
CSS. Pour plus d'informations, consultez les sections &laquo; D&eacute;placement/exportation de r&egrave;gles CSS &raquo; &agrave; la page 149 et
&laquo; Conversion d'un style CSS int&eacute;gr&eacute; en une r&egrave;gle CSS &raquo; &agrave; la page 150.
Indentation du code Ram&egrave;ne la s&eacute;lection vers la droite.
Indentation n&eacute;gative du code Ram&egrave;ne la s&eacute;lection vers la gauche.
Mise en forme du code source Applique les formats de code pr&eacute;c&eacute;demment d&eacute;finis au code s&eacute;lectionn&eacute; (ou &agrave; la page
enti&egrave;re si aucun code n'est s&eacute;lectionn&eacute;). Vous pouvez &eacute;galement d&eacute;finir les pr&eacute;f&eacute;rences de formatage du code en
s&eacute;lectionnant Formatage du code source avec le bouton du m&ecirc;me nom, ou en modifiant les biblioth&egrave;ques de balises en
s&eacute;lectionnant Edition, Biblioth&egrave;ques de balises.
Le nombre de boutons disponibles dans la barre d'outils de codage varie selon la taille d'affichage en mode Code dans
la fen&ecirc;tre du document. Pour voir tous les boutons disponibles, vous pouvez redimensionner la fen&ecirc;tre d'affichage du
mode Code ou cliquer sur le bouton d'expansion, &agrave; la base de la barre d'outils de codage.
Vous pouvez &eacute;galement modifier la barre d'outils de codage pour afficher des boutons suppl&eacute;mentaires (Retour
automatique &agrave; la ligne, Caract&egrave;res masqu&eacute;s et Retrait auto) ou pour masquer des boutons que vous ne souhaitez pas
utiliser. N&eacute;anmoins, vous devez pour cela modifier le fichier XML qui g&eacute;n&egrave;re la barre d'outils. Pour plus
d'informations, voir Extension de Dreamweaver.
Remarque : L'option d'affichage des caract&egrave;res masqu&eacute;s, qui ne fait pas partie des boutons par d&eacute;faut de la barre d'outils
de codage, est disponible &agrave; partir du menu Affichage (Affichage &gt; Options d'affichage de code &gt; Caract&egrave;res masqu&eacute;s).
Voir aussi
&laquo; V&eacute;rification de l'&eacute;quilibre des balises et des accolades &raquo; &agrave; la page 337
&laquo; Pr&eacute;sentation de la barre d'outils de codage &raquo; &agrave; la page 12
&laquo; Affichage des barres d'outils &raquo; &agrave; la page 22
Insertion de code &agrave; l'aide du panneau Insertion
1 Positionnez le point d'insertion dans le code.
2 S&eacute;lectionnez la cat&eacute;gorie appropri&eacute;e du panneau Insertion.
3 Cliquez sur un bouton du panneau Insertion ou s&eacute;lectionnez un &eacute;l&eacute;ment de l'un des menus de ce panneau.
D&egrave;s que vous cliquez sur une ic&ocirc;ne, le code peut appara&icirc;tre imm&eacute;diatement dans la page ou une bo&icirc;te de dialogue peut
vous demander de sp&eacute;cifier des informations suppl&eacute;mentaires pour terminer le code.
Pour conna&icirc;tre la fonction de chaque bouton, positionnez le pointeur sur ce bouton jusqu'&agrave; ce qu'une info-bulle
apparaisse. Le nombre et le type des boutons du panneau Insertion varient selon la nature du document affich&eacute;. et
selon que le mode Code ou Cr&eacute;ation est actif.
Bien que le panneau Insertion regroupe les balises fr&eacute;quemment utilis&eacute;es, son contenu n'est pas exhaustif. Vous
trouverez un choix plus vari&eacute; de balises dans le s&eacute;lecteur de balises.
Derni&egrave;re mise &agrave; jour le 4/5/2011
324
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Voir aussi
&laquo; Utilisation du panneau Insertion &raquo; &agrave; la page 213
Insertion de balises avec le S&eacute;lecteur de balises
Vous pouvez utiliser le s&eacute;lecteur de balises pour ins&eacute;rer dans une page n'importe quelle balise figurant dans les
biblioth&egrave;ques de balises de Dreamweaver (notamment les biblioth&egrave;ques de balises de ColdFusion et ASP.NET).
1 Placez le point d'insertion dans le code, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la
touche Contr&ocirc;le enfonc&eacute;e (Macintosh), puis s&eacute;lectionnez Ins&eacute;rer la balise.
Le S&eacute;lecteur de balises s'affiche. Le panneau de gauche r&eacute;pertorie les biblioth&egrave;ques de balises prises en charge, tandis
que le panneau de droite affiche les balises individuelles du dossier de biblioth&egrave;ques de balises s&eacute;lectionn&eacute;.
2 Dans la biblioth&egrave;que de balises, s&eacute;lectionnez une cat&eacute;gorie de balises ou d&eacute;veloppez cette cat&eacute;gorie pour
s&eacute;lectionner une sous-cat&eacute;gorie.
3 S&eacute;lectionnez la balise souhait&eacute;e dans le volet de droite.
4 Pour afficher les informations concernant la syntaxe et l'emploi de la balise dans le s&eacute;lecteur de balises, cliquez sur
le bouton Infos sur les balises. Ces informations, si elles existent, s'affichent.
5 Pour afficher ces informations dans le panneau R&eacute;f&eacute;rence, cliquez sur l'ic&ocirc;ne &lt;?&gt;. Ces informations, si elles existent,
s'affichent.
6 Cliquez sur le bouton Ins&eacute;rer pour ins&eacute;rer la balise s&eacute;lectionn&eacute;e dans le code.
Si la balise affich&eacute;e dans le volet de droite appara&icirc;t entre crochets, par exemple &lt;title&gt;&lt;/title&gt;), elle ne n&eacute;cessite
aucune information compl&eacute;mentaire et s'ins&egrave;re directement dans le document au niveau du point d'insertion.
Si la balise ne n&eacute;cessite aucune information compl&eacute;mentaire, un &eacute;diteur de balises s'affiche.
7 Le cas &eacute;ch&eacute;ant, entrez les informations suppl&eacute;mentaires dans l'&eacute;diteur de balises, puis cliquez sur OK.
8 Cliquez sur le bouton Fermer.
Voir aussi
&laquo; A propos des biblioth&egrave;ques de balises de Dreamweaver &raquo; &agrave; la page 355
Insertion de commentaires HTML
Un commentaire est un texte descriptif ins&eacute;r&eacute; dans le code HTML pour expliciter le code ou fournir
d'autres informations. Le commentaire appara&icirc;t uniquement en mode Code ; il ne s'affiche pas dans un navigateur.
Insertion d'un commentaire au niveau du point d'insertion
❖ Choisissez Insertion &gt; Commentaire.
En mode Code, une balise de commentaire est ins&eacute;r&eacute;e et le point d'insertion est plac&eacute; au milieu de celle-ci. Saisissez
votre commentaire.
En mode Cr&eacute;ation, la bo&icirc;te de dialogue Commentaire s'affiche. Entrez le commentaire, puis cliquez sur OK.
Affichage des marqueurs de commentaires en mode Cr&eacute;ation
❖ Choisissez Affichage &gt; Assistances visuelles &gt; El&eacute;ments invisibles.
V&eacute;rifiez que l'option Commentaires est s&eacute;lectionn&eacute;e dans les pr&eacute;f&eacute;rences des &eacute;l&eacute;ments invisibles. Dans le cas contraire,
le marqueur de commentaire ne s'affiche pas.
Derni&egrave;re mise &agrave; jour le 4/5/2011
325
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Modification d'un commentaire existant
• En mode Code, recherchez le commentaire pour en modifier le texte.
• En mode Cr&eacute;ation, s&eacute;lectionnez le marqueur Commentaire, modifiez le texte de votre commentaire dans
l'inspecteur Propri&eacute;t&eacute;s, puis cliquez dans la fen&ecirc;tre de document.
Copie et collage de code
1 Copiez le code &agrave; partir du mode Code ou d'une autre application.
2 Placez le point d'insertion en mode Code, puis choisissez Edition &gt; Coller.
Voir aussi
&laquo; Collage et d&eacute;placement de fragments de code r&eacute;duits &raquo; &agrave; la page 335
Modification de balises avec des &eacute;diteurs de balises
Les &eacute;diteurs de balises permettent d'afficher, de sp&eacute;cifier et de modifier les attributs d'une balise.
1 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contr&ocirc;le enfonc&eacute;e (Macintosh)
sur une balise (en mode Code) ou sur un objet (en mode Cr&eacute;ation), puis s&eacute;lectionnez la commande Modifier la
balise du menu contextuel. Le contenu de cette bo&icirc;te de dialogue varie selon la balise s&eacute;lectionn&eacute;e.
2 Indiquez ou modifiez les attributs de la balise, puis cliquez sur OK.
Pour obtenir davantage d'informations sur la balise &agrave; partir de l'&eacute;diteur de balises, cliquez sur l'option Infos sur les
balises.
Modification de code &agrave; l'aide du menu Codage
1 En mode Code, s&eacute;lectionnez du code, puis cliquez avec le bouton droit de la souris (Windows) ou en maintenant
la touche Contr&ocirc;le enfonc&eacute;e (Macintosh).
2 Cliquez sur le sous-menu S&eacute;lection puis choisissez l'une des options suivantes :
R&eacute;duire la s&eacute;lection R&eacute;duit le code s&eacute;lectionn&eacute;.
R&eacute;duire &agrave; l'ext&eacute;rieur de la s&eacute;lection R&eacute;duit tout le code &agrave; l'ext&eacute;rieur du code s&eacute;lectionn&eacute;.
D&eacute;velopper la s&eacute;lection D&eacute;veloppe le fragment de code s&eacute;lectionn&eacute;.
R&eacute;duire balises enti&egrave;res R&eacute;duit tout le contenu compris entre une balise d’ouverture et sa balise de fermeture (par
exemple, tout le code compris entre &lt;table&gt; et &lt;/table&gt;).
R&eacute;duire ext&eacute;rieur balises enti&egrave;res R&eacute;duit le contenu &agrave; l'ext&eacute;rieur d'un jeu de balises d'ouverture et de fermeture (par
exemple, le contenu &agrave; l'ext&eacute;rieur de &lt;table&gt; et &lt;/table&gt;).
D&eacute;velopper tout R&eacute;tablit tout le code r&eacute;duit.
Appliquer Commentaire HTML Encadre le code s&eacute;lectionn&eacute; de balises &lt;!-- et --&gt;, ou ouvre une nouvelle balise si
aucun code n'est s&eacute;lectionn&eacute;.
Appliquer Commentaire /* */ Encadre le code CSS ou JavaScript s&eacute;lectionn&eacute; avec les codes de commentaires /* et */.
Appliquer Commentaire // Ins&egrave;re une double barre oblique (//) au d&eacute;but de chaque ligne du code CSS ou JavaScript
s&eacute;lectionn&eacute;, ou ins&egrave;re une unique balise // si aucun code n’est s&eacute;lectionn&eacute;.
Appliquer Commentaire ' Ins&egrave;re un guillemet droit simple au d&eacute;but de chaque ligne s&eacute;lectionn&eacute;e d'un script Visual
Basic, ou ins&egrave;re un guillemet droit simple au point d'insertion si aucun code n'est s&eacute;lectionn&eacute;.
Derni&egrave;re mise &agrave; jour le 4/5/2011
326
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Appliquer Commentaire sur serveur Entoure le code s&eacute;lectionn&eacute;. Lorsque vous travaillez sur un fichier ASP,
ASP.NET, JSP, PHP ou ColdFusion, si vous appliquez l’option Appliquer Commentaire sur serveur, Dreamweaver
d&eacute;tecte automatiquement la balise de commentaire correcte et l’applique &agrave; la s&eacute;lection.
Appliquer correction barre oblique invers&eacute;e-commentaire Entoure le code CSS s&eacute;lectionn&eacute; de balises de commentaire
qui forcent Internet Explorer 5 pour Macintosh &agrave; ignorer le code.
Appliquer correction Ciao Entoure le code CSS s&eacute;lectionn&eacute; de balises de commentaire qui forcent Internet Netscape
Navigator 4 &agrave; ignorer le code.
Supprimer commentaire Supprime les balises de commentaires du code s&eacute;lectionn&eacute;. Si une s&eacute;lection comporte des
commentaires incorpor&eacute;s, seules les balises de commentaire externe sont supprim&eacute;es.
Supprimer correction barre oblique invers&eacute;e-commentaire Supprime les balises de commentaires du code CSS
s&eacute;lectionn&eacute;. Si une s&eacute;lection comporte des commentaires incorpor&eacute;s, seules les balises de commentaire externe sont
supprim&eacute;es.
Supprimer correction Ciao Supprime les balises de commentaires du code CSS s&eacute;lectionn&eacute;. Si une s&eacute;lection comporte
des commentaires incorpor&eacute;s, seules les balises de commentaire externe sont supprim&eacute;es.
Convertir les tabulations en espaces Convertit toutes les tabulations de la s&eacute;lection en espaces ; le nombre d'espaces
correspond &agrave; la valeur de taille de tabulation d&eacute;finie dans les pr&eacute;f&eacute;rences Format. Pour plus d'informations, consultez
la section &laquo; Modification du format du code &raquo; &agrave; la page 312.
Convertir les espaces en tabulations Convertit les groupes d'espaces de la s&eacute;lection en tabulations. Les groupes dont le
nombre d'espaces correspond &agrave; la valeur de taille de tabulation d&eacute;finie sont convertis en tabulation.
Retrait Met la s&eacute;lection en retrait, en la repoussant vers la droite. Pour plus d'informations, consultez la section &laquo; Mise
en retrait des blocs de code &raquo; &agrave; la page 327.
Retrait n&eacute;gatif Ram&egrave;ne la s&eacute;lection vers la gauche.
Supprimer toutes les balises Supprime toutes les balises de la s&eacute;lection.
Convertir les lignes en tableaux Ins&egrave;re une balise table sans attribut de part et d'autre de la s&eacute;lection.
Ajouter des sauts de ligne Ajoute une balise br &agrave; la fin de chaque ligne de la s&eacute;lection.
Convertir en majuscules Convertit toutes les lettres de la s&eacute;lection (y compris les noms et les valeurs des balises et des
attributs) en majuscules.
Convertir en minuscules Convertit toutes les lettres de la s&eacute;lection (y compris les noms et les valeurs des balises et des
attributs) en minuscules.
Convertir les balises en majuscules Convertit tous les noms de balise et d'attribut et toutes les valeurs d'attribut de la
s&eacute;lection en majuscules.
Convertir les balises en minuscules Convertit tous les noms de balise et d'attribut et toutes les valeurs d'attribut de la
s&eacute;lection en minuscules.
Voir aussi
&laquo; R&eacute;duction et d&eacute;veloppement de fragments de code &raquo; &agrave; la page 334
Derni&egrave;re mise &agrave; jour le 4/5/2011
327
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Modification d'une balise de langage de serveur &agrave; l'aide de l'inspecteur
Propri&eacute;t&eacute;s
Vous pouvez modifier le code dans une balise de langage de serveur (comme une balise ASP) sans acc&eacute;der au mode
Code, gr&acirc;ce &agrave; l'inspecteur Propri&eacute;t&eacute;s du code.
1 En mode Cr&eacute;ation, s&eacute;lectionnez l'ic&ocirc;ne visuelle de balise de langage de serveur.
2 Dans l'inspecteur Propri&eacute;t&eacute;s, cliquez sur le bouton Edition.
3 Apportez les modifications requises au code de la balise puis cliquez sur OK.
Voir aussi
&laquo; Configuration de l'ordinateur pour le d&eacute;veloppement d'applications &raquo; &agrave; la page 553
Mise en retrait des blocs de code
Lorsque vous r&eacute;digez et modifiez votre code en mode Code ou dans l'inspecteur de code, vous pouvez corriger le
niveau de mise en retrait de la ligne ou du bloc de code s&eacute;lectionn&eacute;s, en les d&eacute;pla&ccedil;ant d'une tabulation vers la gauche
ou vers la droite.
Mise en retrait du bloc de code s&eacute;lectionn&eacute;
• Appuyez sur la touche de tabulation.
• S&eacute;lectionnez Edition &gt; Indentation du code.
Annulation de la mise en retrait du bloc de code s&eacute;lectionn&eacute;
• Appuyez sur Maj+Tab.
• S&eacute;lectionnez Edition &gt; Indentation n&eacute;gative du code.
Navigation vers le code apparent&eacute;
La fen&ecirc;tre Navigation dans le code affiche une liste de codes source apparent&eacute;s &agrave; une s&eacute;lection sp&eacute;cifique sur votre
page. Vous pouvez l'utiliser pour naviguer vers les codes source apparent&eacute;s, comme des r&egrave;gles CSS internes et externes,
des inclusions c&ocirc;t&eacute; serveur, des fichiers JavaScript externes, des fichiers de mod&egrave;les parents, des fichiers de
biblioth&egrave;que et des fichiers source iframe. Lorsque vous cliquez sur un lien dans la fen&ecirc;tre Navigation dans le code,
Dreamweaver ouvre le fichier contenant le code concern&eacute;. Ce fichier s'affiche dans la section des fichiers associ&eacute;s, pour
autant que cette fonctionnalit&eacute; soit activ&eacute;e. Si elle n'est pas activ&eacute;e, Dreamweaver ouvre le fichier s&eacute;lectionn&eacute; dans un
document s&eacute;par&eacute;, dans la fen&ecirc;tre de document.
Si vous cliquez sur une r&egrave;gle CSS dans la fen&ecirc;tre Navigation dans le code, Dreamweaver acc&egrave;de directement &agrave; cette
r&egrave;gle. S'il s'agit d'une r&egrave;gle interne du fichier, Dreamweaver l'affiche en mode fractionn&eacute;. Si la r&egrave;gle est un fichier CSS
externe, Dreamweaver ouvre ce dernier et affiche la r&egrave;gle dans la section des fichiers associ&eacute;s, au-dessus du document
principal.
Vous pouvez acc&eacute;der &agrave; la fen&ecirc;tre Navigation dans le code depuis les modes Cr&eacute;ation, Code et fractionn&eacute;, ainsi qu'&agrave;
partir de l'inspecteur de code.
Vous trouverez un didacticiel vid&eacute;o sur l'utilisation du navigateur de code, r&eacute;alis&eacute; par l'&eacute;quipe de Dreamweaver, &agrave;
l'adresse http://www.adobe.com/go/dw10codenav_fr.
Vous trouverez un didacticiel vid&eacute;o relatif &agrave; l'utilisation du mode Affichage en direct, aux fichiers associ&eacute;s et &agrave; la
fen&ecirc;tre Navigation dans le code &agrave; l'adresse www.adobe.com/go/lrvid4044_dw_fr.
Derni&egrave;re mise &agrave; jour le 4/5/2011
328
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Ouverture de la fen&ecirc;tre Navigation dans le code
❖ Tout en maintenant la touche ALT (Windows) ou les touches Commande+Option (Macintosh) enfonc&eacute;es, cliquez
n'importe o&ugrave; sur la page. La fen&ecirc;tre Navigation dans le code affiche des liens vers le code qui s'applique &agrave; la zone
sur laquelle vous venez de cliquer.
Cliquez en dehors de la fen&ecirc;tre Navigation dans le code pour la fermer.
Remarque : Vous pouvez &eacute;galement ouvrir la fen&ecirc;tre Navigation dans le code en cliquant sur l'ic&ocirc;ne
s'affiche &agrave; proximit&eacute; du point d'insertion sur la page si la souris reste inactive pendant 2 secondes.
. Cette ic&ocirc;ne
Navigation vers le code &agrave; l'aide de la fen&ecirc;tre Navigation dans le code
1 Ouvrez la fen&ecirc;tre Navigation dans le code &agrave; partir de la zone qui vous int&eacute;resse.
2 Clique sur l'&eacute;l&eacute;ment de code auquel vous voulez acc&eacute;der.
La fen&ecirc;tre Navigation dans le code regroupe les sources de code apparent&eacute;es par fichier et &eacute;num&egrave;re les fichiers dans
l'ordre alphab&eacute;tique. Par exemple, supposons que des r&egrave;gles CSS de trois fichiers externes influent sur la s&eacute;lection dans
votre document. Dans ce cas, la fen&ecirc;tre Navigation dans le code pr&eacute;sente la liste de ces trois fichiers, ainsi que des r&egrave;gles
CSS relatives &agrave; la s&eacute;lection. Pour le code CSS relatif &agrave; une s&eacute;lection pr&eacute;cise, la fen&ecirc;tre Navigation dans le code
fonctionne de fa&ccedil;on similaire au panneau Styles CSS du mode Actuel.
Lorsque vous maintenez le pointeur de la souris au-dessus d'une r&egrave;gle CSS, la fen&ecirc;tre Navigation dans le code affiche,
dans une infobulle, les propri&eacute;t&eacute;s de cette r&egrave;gle. Ces infobulles peuvent vous aider &agrave; distinguer des r&egrave;gles qui partagent
un m&ecirc;me nom.
D&eacute;sactivation de l'ic&ocirc;ne Navigation dans le code
1 Ouvrez la fen&ecirc;tre Navigation dans le code.
2 Cliquez sur D&eacute;sactiver l'indicateur dans le coin inf&eacute;rieur droit de la fen&ecirc;tre.
3 Cliquez en dehors de la fen&ecirc;tre Navigation dans le code pour la fermer.
Pour activer de nouveau l'ic&ocirc;ne Navigation dans le code, cliquez tout en maintenant la touche ALT (Windows) ou les
touches Commande+Option (Macintosh) enfonc&eacute;es, afin d'ouvrir la fen&ecirc;tre Navigation dans le code, puis d&eacute;sactivez
l'option D&eacute;sactiver l'indicateur.
Voir aussi
&laquo; Ouverture des fichiers associ&eacute;s &raquo; &agrave; la page 72
Didacticiel sur la navigation dans le code
Acc&egrave;s &agrave; une fonction JavaScript ou VBScript
En mode Code et dans l'inspecteur de code, vous pouvez afficher la liste des fonctions JavaScript ou VBScript de votre
code et passer ainsi directement &agrave; l'une de ces derni&egrave;res.
1 Affichez le document en mode Code (Affichage &gt; Code) ou l'inspecteur de code (Fen&ecirc;tre &gt; Inspecteur de code).
2 Effectuez l'une des op&eacute;rations suivantes :
• En mode Code, cliquez du bouton droit (Windows) ou tout en appuyant sur Contr&ocirc;le (Macintosh) dans la fen&ecirc;tre
Code, puis s&eacute;lectionnez le sous-menu Fonctions dans le menu contextuel.
Le sous-menu Fonctions ne s'affiche pas en mode Cr&eacute;ation.
Si votre code contient des fonctions JavaScript ou VBScript, elles apparaissent dans le sous-menu.
Derni&egrave;re mise &agrave; jour le 4/5/2011
329
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Pour afficher ces fonctions dans l'ordre alphab&eacute;tique, cliquez avec le bouton droit de la souris tout en appuyant sur la
touche Ctrl (Windows) ou en maintenant les touches Ctrl et Option enfonc&eacute;es (Macintosh) en mode Code, puis
s&eacute;lectionnez le sous-menu Fonctions.
• Dans l'Inspecteur de code, cliquez sur le bouton de navigation dans le code ({ }) de la barre d'outils.
3 S&eacute;lectionnez un nom de fonction pour atteindre cette derni&egrave;re.
Extraction de JavaScript
JavaScript Extractor (JSE) supprime tout le code JavaScript (ou la plupart de celui-ci) de votre document
Dreamweaver, l'exporte dans un fichier externe et lie ce fichier &agrave; votre document. JSE peut &eacute;galement supprimer des
gestionnaires d'&eacute;v&eacute;nements tels que onclick et onmouseover de votre code puis joindre &agrave; votre document, de mani&egrave;re
transparente, le code JavaScript associ&eacute; &agrave; ces gestionnaires.
Avant d'employer JavaScript Extractor, nous attirons votre attention sur les limitations suivantes :
• JSE n'extrait pas les balises de script du corps du document (sauf dans le cas de widgets Spry). Il se pourrait que
l'externalisation de ces scripts donne des r&eacute;sultats inattendus. Par d&eacute;faut, Dreamweaver affiche la liste de ces scripts
dans la bo&icirc;te de dialogue Externaliser le code JavaScript, mais ne les s&eacute;lectionne pas pour extraction. Si vous le
souhaitez, vous pouvez les s&eacute;lectionner manuellement.
• JSE n'extrait pas le code JavaScript des r&eacute;gions modifiables de fichiers .dwt (mod&egrave;le Dreamweaver), de r&eacute;gions non
modifiables d'instances de mod&egrave;les ou d'&eacute;l&eacute;ments de biblioth&egrave;que Dreamweaver.
• Lorsque vous avez extrait le code JavaScript &agrave; l'aide de l'option Externaliser le code JavaScript et associer de mani&egrave;re
transparente, vous ne pouvez plus modifier les comportements Dreamweaver dans le panneau Comportements.
Dreamweaver ne peut pas inspecter et compl&eacute;ter le panneau Comportements &agrave; l'aide de comportements qu'il a
associ&eacute;s de mani&egrave;re transparente.
• Il est impossible d'annuler vos modifications apr&egrave;s avoir ferm&eacute; la page. Vous pouvez par contre annuler les
modifications tant que vous restez dans la m&ecirc;me session d'&eacute;dition. Pour annuler, choisissez Edition &gt; Annuler
Externaliser le code JavaScript.
• Il se peut que certaines pages tr&egrave;s complexes ne fonctionnent pas comme pr&eacute;vu. Faites preuve de prudence lors de
l'extraction de code JavaScript de pages dont le corps et les variables globales contiennent document.write().
Vous trouverez un didacticiel vid&eacute;o sur la prise en charge de JavaScript dans Dreamweaver, r&eacute;alis&eacute; par l'&eacute;quipe de
Dreamweaver, &agrave; l'adresse www.adobe.com/go/dw10javascript_fr.
Pour utiliser JavaScript Extractor :
1 Ouvrez une page qui contient du code JavaScript (par exemple une page Spry).
2 Choisissez Commandes &gt; Externaliser le code JavaScript.
3 Dans la bo&icirc;te de dialogue Externaliser le code JavaScript, modifiez &eacute;ventuellement les options par d&eacute;faut.
• Choisissez Externaliser le code JavaScript uniquement si vous voulez que Dreamweaver d&eacute;place le code
JavaScript dans un fichier externe et qu'il y fasse r&eacute;f&eacute;rence dans le document actuel. Cette option laisse les
gestionnaires d'&eacute;v&eacute;nements tels que onclick et onload dans le document et conserve les comportements
visibles dans le panneau Comportements.
• Choisissez Externaliser le code JavaScript et associer de mani&egrave;re transparente si vous voulez que Dreamweaver
1) d&eacute;place le code JavaScript vers un fichier externe et y fasse r&eacute;f&eacute;rence dans le document actuel, et 2) supprime
les gestionnaires d'&eacute;v&eacute;nements du code HTML et les ins&egrave;re en cours d'ex&eacute;cution &agrave; l'aide de JavaScript. Lorsque
vous s&eacute;lectionnez cette option, vous ne pouvez plus modifier les comportements dans le panneau
Comportements.
Derni&egrave;re mise &agrave; jour le 4/5/2011
330
UTILISATION DE DREAMWEAVER
Utilisation de code de page
• Dans la colonne Modifier, d&eacute;sactivez les modifications que vous ne voulez pas apporter, ou activez celles que
Dreamweaver n'a pas s&eacute;lectionn&eacute;es par d&eacute;faut.
Par d&eacute;faut, Dreamweaver pr&eacute;sente mais ne s&eacute;lectionne pas les modifications suivantes :
• Les blocs de script dans l'en-t&ecirc;te du document qui contiennent des appels document.write() ou
document.writeln().
• Les blocs de script dans l'en-t&ecirc;te du document qui contiennent des signatures de fonction associ&eacute;es au code
de gestion EOLAS, qui utilise document.write().
• Les blocs de script dans le corps du document, sauf s'ils contiennent uniquement un widget Spry ou des
constructeurs d'ensembles de donn&eacute;es Spry.
• Dreamweaver attribue automatiquement des ID aux &eacute;l&eacute;ments qui n'en poss&egrave;dent pas encore. Si ces ID ne vous
conviennent pas, vous pouvez les modifier dans les zones de texte ID.
4 Cliquez sur OK.
La bo&icirc;te de dialogue de synth&egrave;se r&eacute;capitule les extractions. Passez ces extractions en revue puis cliquez sur OK.
5 Enregistrez la page.
Dreamweaver cr&eacute;e un fichier SpryDOMUtils.js, ainsi qu'un autre fichier contenant le code JavaScript extrait.
Dreamweaver enregistre le fichier SpryDOMUtils.js dans un dossier SpryAssets de votre site. L'autre fichier est
enregistr&eacute; au m&ecirc;me niveau que la page &agrave; partir de laquelle vous avez extrait le code JavaScript. N'oubliez pas de charger
ces deux fichiers d&eacute;pendants sur votre serveur Web lorsque vous enverrez la page d'origine.
Voir aussi
&laquo; Cr&eacute;ation de pages Spry visuellement &raquo; &agrave; la page 438
Manipulation de fragments de code
Les fragments de code permettent de stocker des contenus en vue de pouvoir les r&eacute;utiliser rapidement. Vous pouvez
cr&eacute;er, ins&eacute;rer, modifier ou supprimer des fragments de code HTML, JavaScript, CFML, ASP, PHP, etc. Vous pouvez
&eacute;galement g&eacute;rer et partager vos fragments de code avec les autres membres de l'&eacute;quipe. Vous disposez de quelques
fragments pr&eacute;d&eacute;finis que vous pouvez employer comme point de d&eacute;part.
Les fragments de code contenant des balises &lt;font&gt; et d'autres &eacute;l&eacute;ments et attributs d&eacute;conseill&eacute;s ont &eacute;t&eacute; d&eacute;plac&eacute;s dans
le dossier Anciennes versions du panneau Fragments de code.
Insertion d'un fragment de code
1 Placez le point d'insertion &agrave; l'endroit o&ugrave; vous souhaitez ins&eacute;rer le fragment de code ou s&eacute;lectionnez le code &agrave;
combiner avec le fragment choisi.
2 Dans le panneau Fragments de code (Fen&ecirc;tre &gt; Fragments de code), double-cliquez sur le fragment de code.
Vous pouvez &eacute;galement cliquer avec le bouton droit de la souris (Windows) ou en maintenant la touche Contr&ocirc;le
enfonc&eacute;e (Macintosh) sur le fragment de code, puis s&eacute;lectionner Ins&eacute;rer dans le menu contextuel.
Cr&eacute;ation d'un fragment de code
1 Cliquez sur l'ic&ocirc;ne Nouveau fragment de code situ&eacute; au bas du panneau Fragments de code
2 Donnez un nom au fragment de code.
Remarque : Les noms de fragments de code ne peuvent pas comporter les caract&egrave;res qui sont interdits dans les noms de
fichiers (barres obliques (/ ou \), caract&egrave;res sp&eacute;ciaux ou guillemets doubles (“)).
Derni&egrave;re mise &agrave; jour le 4/5/2011
331
UTILISATION DE DREAMWEAVER
Utilisation de code de page
3 (Facultatif) Entrez la description du fragment de code sous forme de texte. qui permettra aux autres membres de
l'&eacute;quipe de l'utiliser plus facilement.
4 Pour l'option Type de fragment de code, s&eacute;lectionnez Envelopper la s&eacute;lection ou Ins&eacute;rer le bloc.
a Si vous avez opt&eacute; pour l'enveloppement de la s&eacute;lection, ajoutez du code aux options suivantes :
Ins&eacute;rer avant Tapez ou collez le code &agrave; ins&eacute;rer avant la s&eacute;lection en cours.
Ins&eacute;rer apr&egrave;s Tapez ou collez le code &agrave; ins&eacute;rer apr&egrave;s la s&eacute;lection en cours.
Pour d&eacute;finir un espacement par d&eacute;faut entre les blocs, utilisez des sauts de ligne ; appuyez sur Entr&eacute;e (Windows) ou
Retour (Macintosh) &agrave; l'int&eacute;rieur des zones de texte.
Remarque : Dans la mesure o&ugrave; les fragments de code peuvent &ecirc;tre cr&eacute;&eacute;s en d&eacute;but ou en fin de bloc, vous pouvez les utiliser
pour encadrer d'autres balises et contenus. Ce proc&eacute;d&eacute; est pratique pour ins&eacute;rer un formatage, des liens, des &eacute;l&eacute;ments de
navigation et des blocs de script sp&eacute;ciaux. Il vous suffit de mettre en surbrillance l'&eacute;l&eacute;ment &agrave; entourer puis d'ins&eacute;rer le
fragment de code.
b Si vous avez opt&eacute; pour l'insertion du bloc, tapez ou collez le code &agrave; ins&eacute;rer.
5 (Facultatif) S&eacute;lectionnez le type d'aper&ccedil;u : Code ou Cr&eacute;ation.
Cr&eacute;ation Restitue le code et l'affiche dans le volet d'aper&ccedil;u du panneau Fragment de code.
Code Affiche le code dans le volet d'aper&ccedil;u.
6 Cliquez sur OK.
Modification ou suppression d'un fragment de code
❖ Dans le panneau Fragments de code, s&eacute;lectionnez un fragment de code, puis cliquez sur le bouton Modifier le
fragment de code ou sur le bouton Supprimer, dans le bas du panneau.
Cr&eacute;ation de dossiers de fragments de code et gestion de fragments
1 Cliquez sur le bouton Nouveau dossier de fragments de code situ&eacute; au bas du panneau Fragments de code.
2 Faites glisser des fragments de code vers le nouveau dossier ou d'autres dossiers, &agrave; votre convenance.
Ajout ou modification d'un raccourci clavier pour un fragment de code
1 Dans le panneau Fragments de code, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la
touche Ctrl enfonc&eacute;e (Macintosh) et s&eacute;lectionnez Modifier les raccourcis clavier.
L'&eacute;diteur de raccourcis clavier s'ouvre.
2 Dans le menu contextuel Commandes, choisissez Fragments de code.
Une liste de fragments de code s'affiche.
3 S&eacute;lectionnez celui qui vous int&eacute;resse et affectez-lui le raccourci clavier de votre choix.
Pour plus d'informations, consultez la section &laquo; Personnalisation des raccourcis clavier &raquo; &agrave; la page 35.
Partage d'un fragment de code avec d'autres membres de l'&eacute;quipe
1 Recherchez le fichier correspondant au fragment de code &agrave; partager dans le sous-dossier Configuration/Snippets
du dossier de l'application Dreamweaver.
2 Copiez le fichier du fragment de code dans un dossier partag&eacute; sur votre ordinateur ou sur un ordinateur en r&eacute;seau.
3 Veillez &agrave; ce que les autres membres de l'&eacute;quipe copient le fichier du fragment de code dans leurs dossiers
Configuration/Snippets respectifs.
Derni&egrave;re mise &agrave; jour le 4/5/2011
332
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Recherche de balises, d'attributs ou de cha&icirc;nes de texte dans le code
Vous pouvez rechercher certains types de balises, des attributs et des valeurs d'attribut. Par exemple, vous pouvez
rechercher toutes les balises img n'ayant pas l'attribut alt.
Vous pouvez &eacute;galement rechercher des cha&icirc;nes de texte sp&eacute;cifiques se trouvant &agrave; l'int&eacute;rieur ou &agrave; l'ext&eacute;rieur d'un jeu de
balises. Par exemple, vous pouvez rechercher le mot Untitled document entre les balises title pour trouver toutes
les pages sans nom du site.
1 Ouvrez le document dans lequel la recherche doit &ecirc;tre effectu&eacute;e ou s&eacute;lectionnez des documents ou un dossier dans
le panneau Fichiers.
2 S&eacute;lectionnez la commande Edition &gt; Rechercher et remplacer.
3 Indiquez les fichiers sur lesquels doit porter la recherche, puis indiquez le type de recherche &agrave; effectuer et enfin le
texte ou les balises &agrave; rechercher. Le cas &eacute;ch&eacute;ant, sp&eacute;cifiez &eacute;galement le texte de remplacement. Cliquez ensuite sur
un des boutons Rechercher ou Remplacer.
4 Cliquez sur le bouton Fermer.
5 Pour effectuer une nouvelle recherche sans afficher la bo&icirc;te de dialogue Rechercher et remplacer, appuyez sur F3
(Windows) ou Commande+G (Macintosh).
Voir aussi
&laquo; Expressions r&eacute;guli&egrave;res &raquo; &agrave; la page 307
&laquo; Recherche et remplacement de texte &raquo; &agrave; la page 229
Enregistrement et chargement de mod&egrave;les de recherche
Vous pouvez sauvegarder vos mod&egrave;les de recherche pour les r&eacute;utiliser ult&eacute;rieurement.
Voir aussi
&laquo; Expressions r&eacute;guli&egrave;res &raquo; &agrave; la page 307
&laquo; Recherche et remplacement de texte &raquo; &agrave; la page 229
Enregistrement d'un mod&egrave;le de recherche
1 Dans la bo&icirc;te de dialogue Rechercher et remplacer (Edition &gt; Rechercher et remplacer), d&eacute;finissez les param&egrave;tres
de la recherche.
2 Cliquez sur le bouton Enregistrer la requ&ecirc;te (repr&eacute;sentant une disquette).
3 Dans la bo&icirc;te de dialogue qui s'affiche, recherchez le dossier o&ugrave; vous voulez enregistrer les requ&ecirc;tes. Saisissez un
nom pour identifier le fichier correspondant &agrave; la requ&ecirc;te, puis cliquez sur Enregistrer.
Par exemple, si le mod&egrave;le de recherche inclut la recherche de balises img sans l'attribut alt, vous pouvez nommer la
requ&ecirc;te img_sans_alt.dwr.
Remarque : L'extension des fichiers correspondant aux requ&ecirc;tes enregistr&eacute;es est .dwr. Certains fichiers de requ&ecirc;te
enregistr&eacute;s &agrave; partir de versions ant&eacute;rieures de Dreamweaver peuvent &eacute;galement avoir l'extension .dwq.
Chargement d'un mod&egrave;le de recherche
1 S&eacute;lectionnez la commande Edition &gt; Rechercher et remplacer.
2 Cliquez sur l'ic&ocirc;ne Charger la requ&ecirc;te (repr&eacute;sentant un dossier).
Derni&egrave;re mise &agrave; jour le 4/5/2011
333
UTILISATION DE DREAMWEAVER
Utilisation de code de page
3 Recherchez le dossier contenant les requ&ecirc;tes enregistr&eacute;es. S&eacute;lectionnez ensuite un fichier de requ&ecirc;te, puis cliquez
sur Ouvrir.
4 Cliquez sur Rechercher le suivant, Rechercher tout, Remplacer ou Remplacer tout pour lancer la recherche.
Utilisation des documents de r&eacute;f&eacute;rence sur les langages
Le panneau R&eacute;f&eacute;rence est un outil de r&eacute;f&eacute;rence rapide pour les langages de balisage, les langages de programmation et
les styles CSS. Il comporte des informations sur les diff&eacute;rentes balises, les objets et les styles que vous manipulez en
mode Code (ou Inspecteur de code). Il comporte &eacute;galement des exemples de code que vous pouvez coller dans vos
documents.
Ouverture du panneau R&eacute;f&eacute;rence
1 Ex&eacute;cutez l'une des actions suivantes en mode Code :
• Cliquez sur une balise, un attribut ou un mot-cl&eacute; avec le bouton droit de la souris (Windows) ou en maintenant la
touche Ctrl enfonc&eacute;e (Macintosh), puis s&eacute;lectionnez R&eacute;f&eacute;rence dans le menu contextuel.
• Placez le point d'insertion dans une balise, un attribut ou un mot-cl&eacute;, puis appuyez sur Maj+F1.
Le panneau R&eacute;f&eacute;rence appara&icirc;t et affiche des informations sur la balise, l'attribut ou le mot-cl&eacute; sur lequel vous avez
cliqu&eacute;.
2 Pour ajuster la taille du texte dans le panneau R&eacute;f&eacute;rence, s&eacute;lectionnez Grande police, Police moyenne ou Petite
police dans le menu Options (la petite fl&egrave;che en haut &agrave; droite du panneau).
Collage d'un exemple de code dans votre document
1 Cliquez n'importe o&ugrave; sur l'exemple de code de contenu de r&eacute;f&eacute;rence.
L'exemple de code entier est mis en surbrillance.
2 S&eacute;lectionnez Edition &gt; Copier, puis collez l'exemple de code dans votre document en mode Code.
Consultation du contenu de r&eacute;f&eacute;rence dans le panneau R&eacute;f&eacute;rence
1 Pour afficher les balises, les objets ou les styles d'un autre ouvrage, choisissez-en un autre dans le menu
d&eacute;roulant Livre.
2 Pour afficher des informations sur un &eacute;l&eacute;ment sp&eacute;cifique, s&eacute;lectionnez-le dans le menu d&eacute;roulant Balise, Objet,
Style ou CFML (selon le manuel s&eacute;lectionn&eacute;).
3 Pour consulter les informations se rapportant &agrave; un attribut de l'&eacute;l&eacute;ment s&eacute;lectionn&eacute;, s&eacute;lectionnez cet attribut dans
le menu d&eacute;roulant affich&eacute; pr&egrave;s du menu Balise, Objet, Style ou CFML.
Ce menu contient la liste des attributs associ&eacute;s &agrave; l'&eacute;l&eacute;ment s&eacute;lectionn&eacute;. L'&eacute;l&eacute;ment Description est s&eacute;lectionn&eacute; par
d&eacute;faut. Il contient une description de l'&eacute;l&eacute;ment choisi.
Derni&egrave;re mise &agrave; jour le 4/5/2011
334
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Impression de code
Vous pouvez imprimer le code que vous avez r&eacute;dig&eacute; pour le consulter, l'archiver ou le distribuer.
1 Ouvrez une page en mode Code.
2 S&eacute;lectionnez Fichier &gt; Imprimer le code.
3 Sp&eacute;cifiez les options d'impression, puis cliquez sur OK (Windows) ou sur Imprimer (Macintosh).
R&eacute;duction du code
A propos de la r&eacute;duction du code
Vous pouvez r&eacute;duire ou d&eacute;velopper des fragments de code, ce qui permet de voir diff&eacute;rentes sections du document
sans qu’il soit n&eacute;cessaire d’utiliser la barre de d&eacute;filement. Par exemple, pour afficher toutes les r&egrave;gles CSS dans la balise
head qui s'appliquent &agrave; une balise div plus loin sur la page, vous pouvez r&eacute;duire tout ce qui se trouve entre les
baliseshead et div, de mani&egrave;re &agrave; voir les deux sections de code en m&ecirc;me temps. Bien que vous puissiez s&eacute;lectionner
des fragments de code en mode Cr&eacute;ation ou Code, vous ne pouvez r&eacute;duire le code qu'en mode Code.
Remarque : Le code des fichiers cr&eacute;&eacute;s &agrave; partir de mod&egrave;les Dreamweaver est toujours affich&eacute; en mode d&eacute;velopp&eacute;, m&ecirc;me si
le mod&egrave;le (*.dwt) contient des fragments de code r&eacute;duits.
Voir aussi
&laquo; Collage et d&eacute;placement de fragments de code r&eacute;duits &raquo; &agrave; la page 335
&laquo; Insertion de code avec la barre d'outils de codage &raquo; &agrave; la page 321
&laquo; Nettoyage du code &raquo; &agrave; la page 336
R&eacute;duction et d&eacute;veloppement de fragments de code
Lorsque vous s&eacute;lectionnez du code, un ensemble de boutons de r&eacute;duction est affich&eacute; pr&egrave;s de la s&eacute;lection (symboles
Moins sous Windows ; triangles verticaux sur le Macintosh). Cliquez sur ces boutons pour d&eacute;velopper et r&eacute;duire la
s&eacute;lection. Lorsque le code est r&eacute;duit, les boutons de r&eacute;duction se transforment en boutons de d&eacute;veloppement (un
bouton Plus sous Windows ; triangle horizontal sur le Macintosh).
Il peut arriver que le fragment de code s&eacute;lectionn&eacute; ne soit pas pr&eacute;cis&eacute;ment r&eacute;duit. En effet, Dreamweaver utilise une
technique de &laquo; r&eacute;duction intelligente &raquo; pour r&eacute;duire les types de s&eacute;lection les plus courants de la fa&ccedil;on la plus agr&eacute;able
visuellement. Par exemple, si vous avez s&eacute;lectionn&eacute; une balise en retrait, puis les espaces d’indentation situ&eacute;s avant
cette balise, Dreamweaver ne r&eacute;duira pas ces espaces d’indentation, car la plupart des utilisateurs s’attendent &agrave; ce que
l’indentation du code soit pr&eacute;serv&eacute;e. Pour d&eacute;sactiver la r&eacute;duction intelligente du code et forcer Dreamweaver &agrave; r&eacute;duire
exactement ce que vous avez s&eacute;lectionn&eacute;, maintenez la touche Control enfonc&eacute;e avant de r&eacute;duire le code.
Par ailleurs, une ic&ocirc;ne d’avertissement est affich&eacute;e &agrave; c&ocirc;t&eacute; des fragments de code r&eacute;duits contenant des erreurs ou du
code qui n’est pas g&eacute;r&eacute; par certains navigateurs.
Vous pouvez &eacute;galement r&eacute;duire le code en cliquant tout en maintenant enfonc&eacute;e la touche Alt (Windows) ou Option
(Macintosh) sur l'un des boutons de r&eacute;duction ou le bouton R&eacute;duire s&eacute;lection de la barre d'outils de codage.
1 S&eacute;lectionnez du code.
2 S&eacute;lectionnez Edition &gt; Fractionnement de code, puis s&eacute;lectionnez l'une des options.
Derni&egrave;re mise &agrave; jour le 4/5/2011
335
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Voir aussi
&laquo; Modification de code &agrave; l'aide du menu Codage &raquo; &agrave; la page 325
&laquo; Insertion de code avec la barre d'outils de codage &raquo; &agrave; la page 321
S&eacute;lection d'un fragment de code r&eacute;duit
❖ En mode d'affichage Code, cliquez sur le fragment de code r&eacute;duit.
Remarque : En mode Cr&eacute;ation, lorsque vous effectuez une s&eacute;lection qui fait partie d’un fragment de code r&eacute;duit, cette
portion de code est automatiquement d&eacute;velopp&eacute;e dans le mode Code. Toujours en mode Cr&eacute;ation, lorsque vous
s&eacute;lectionnez un fragment de code complet, cette portion de code reste r&eacute;duite dans le mode d'affichage Code.
Affichage du code d’un fragment de code r&eacute;duit sans le d&eacute;velopper
❖ Amenez le pointeur de la souris au-dessus du fragment de code r&eacute;duit.
Utilisation de raccourcis clavier pour r&eacute;duire et d&eacute;velopper le code
❖ Vous pouvez &eacute;galement utiliser les raccourcis clavier suivants :
Commande
Windows
Macintosh
R&eacute;duire la s&eacute;lection
Ctrl+Maj+C
Commande+Maj+C
R&eacute;duire &agrave; l'ext&eacute;rieur de la s&eacute;lection
Ctrl+Alt+C
Commande+Alt+C
D&eacute;velopper la s&eacute;lection
Ctrl+Maj+E
Commande+Maj+E
R&eacute;duire balises enti&egrave;res
Ctrl+Maj+J
Commande+Maj+J
R&eacute;duire ext&eacute;rieur balises enti&egrave;res
Ctrl+Alt+J
Commande+Alt+J
D&eacute;velopper tout
Ctrl+Alt+E
Commande+Alt+E
Collage et d&eacute;placement de fragments de code r&eacute;duits
Vous pouvez copier et coller des fragments de code r&eacute;duits, ou faire glisser des fragments de code r&eacute;duits afin de les
d&eacute;placer.
Voir aussi
&laquo; Insertion de code avec la barre d'outils de codage &raquo; &agrave; la page 321
&laquo; Nettoyage du code &raquo; &agrave; la page 336
Copie et collage un fragment de code r&eacute;duit
1 S&eacute;lectionnez le fragment de code r&eacute;duit.
2 Choisissez Edition &gt; Copier.
3 Placez le curseur au point o&ugrave; vous voulez coller le code.
4 Choisissez Edition &gt; Coller.
Remarque : Vous pouvez coller du code dans d'autres applications, il est automatiquement d&eacute;velopp&eacute;.
D&eacute;placement d'un fragment de code r&eacute;duit par glisser-d&eacute;placer
1 S&eacute;lectionnez le fragment de code r&eacute;duit.
Derni&egrave;re mise &agrave; jour le 4/5/2011
336
UTILISATION DE DREAMWEAVER
Utilisation de code de page
2 Faites glisser la s&eacute;lection vers le nouvel emplacement.
Pour faire glisser une copie de la s&eacute;lection, appuyez sur Ctrl (Windows) ou Alt (Macintosh) et faites glisser la s&eacute;lection.
Remarque : Il est impossible d'effectuer un glisser-d&eacute;poser vers d'autres documents.
Optimisation et d&eacute;bogage de code
Nettoyage du code
Vous pouvez supprimer automatiquement les balises vides, de combiner les balises font imbriqu&eacute;es et de nettoyer le
code HTML ou XHTML d&eacute;sordonn&eacute; ou illisible.
Pour plus d'informations sur le nettoyage du code HTML g&eacute;n&eacute;r&eacute; par Microsoft Word, consultez la section &laquo; Ouverture
et modification de documents existants &raquo; &agrave; la page 72.
1 Ouvrez un document :
• S'il s'agit d'un document HTML, s&eacute;lectionnez Commandes &gt; Nettoyer le code HTML.
• S'il s'agit d'un document XHTML, s&eacute;lectionnez Commandes &gt; Nettoyer le code XHTML.
La commande Nettoyer le code XHTML permet de nettoyer le code HTML, de corriger les erreurs de syntaxe XHTML,
de d&eacute;finir les attributs de balise en minuscules et d'ajouter ou de signaler les attributs manquants d'une balise dans un
document XHTML.
2 Dans la bo&icirc;te de dialogue qui s'affiche, d&eacute;finissez les options de votre choix, puis cliquez sur OK.
Remarque : Selon la taille du document et le nombre d'options s&eacute;lectionn&eacute;es, le nettoyage peut prendre plusieurs
secondes.
Supprimer Balises de conteneur vides Supprime toute paire de balises sans contenu. Par exemple, &lt;b&gt;&lt;/b&gt; et &lt;font
color=&quot;#FF0000&quot;&gt;&lt;/font&gt; sont des balises vides, mais la balise &lt;b&gt; dans &lt;b&gt;texte&lt;/b&gt; ne l'est pas.
Supprimer Balises redondantes imbriqu&eacute;es Supprime toutes les occurrences redondantes d'une balise. Par
exemple, dans le code &lt;b&gt;C'est ce que je voulais &lt;b&gt;vraiment&lt;/b&gt; dire&lt;/b&gt;, les balises b qui encadrent le
mot vraiment sont redondantes et seront supprim&eacute;es.
Supprimer Commentaires HTML ne faisant pas partie de Dreamweaver Supprime tous les commentaires qui n'ont pas
&eacute;t&eacute; ins&eacute;r&eacute;s par Dreamweaver. Par exemple, &lt;!--begin body text--&gt; sera supprim&eacute;, mais
&lt;!--TemplateBeginEditable name=&quot;doctitle&quot; --&gt; ne le sera pas, car il s'agit d'un commentaire Dreamweaver
qui marque le d&eacute;but d'une zone modifiable dans un mod&egrave;le.
Supprimer Marqueur sp&eacute;cial Dreamweaver Supprime les commentaires ajout&eacute;s par Dreamweaver. De cette mani&egrave;re,
les documents sont automatiquement mis &agrave; jour en m&ecirc;me temps que les mod&egrave;les et les &eacute;l&eacute;ments de la biblioth&egrave;que. Si
vous activez cette option lors du nettoyage du code d'un document cr&eacute;&eacute; &agrave; partir d'un mod&egrave;le, le document et son
mod&egrave;le sont dissoci&eacute;s. Pour plus d'informations, consultez la section &laquo; D&eacute;tachement d'un document d'un mod&egrave;le &raquo; &agrave;
la page 432.
Supprimer Balise(s) Supprime les balises sp&eacute;cifi&eacute;es dans la zone de texte adjacente. Utilisez cette option pour
supprimer des balises personnalis&eacute;es ins&eacute;r&eacute;es par d'autres &eacute;diteurs visuels, ainsi que les autres balises que vous ne
voulez pas voir appara&icirc;tre sur votre site (par exemple, blink). S&eacute;parez les diff&eacute;rentes balises par des virgules (par
exemple, font, blink).
Derni&egrave;re mise &agrave; jour le 4/5/2011
337
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Combiner les balises &lt;font&gt; imbriqu&eacute;es lorsque possible Combine deux ou plusieurs balises font se rapportant &agrave; la
m&ecirc;me section de texte. Par exemple, &lt;font size=&quot;7&quot;&gt;&lt;font color=&quot;#FF0000&quot;&gt;rouge&lt;/font&gt;&lt;/font&gt; sera
remplac&eacute; par &lt;font size=&quot;7&quot; color=&quot;#FF0000&quot;&gt;rouge&lt;/font&gt;.
Afficher le journal &agrave; la fin Affiche un message d'avertissement d&eacute;taillant les modifications apport&eacute;es au document d&egrave;s
que le nettoyage est termin&eacute;.
Voir aussi
&laquo; Modification du format du code &raquo; &agrave; la page 312
&laquo; D&eacute;finition des couleurs du code &raquo; &agrave; la page 315
V&eacute;rification de l'&eacute;quilibre des balises et des accolades
Vous pouvez v&eacute;rifier que les paires de balises, de parenth&egrave;ses (( )), d'accolades ({ }) et de crochets ([ ]) sont &eacute;quilibr&eacute;es
dans la page, autrement dit qu'&agrave; chaque balise, parenth&egrave;se, accolade ou crochet d'ouverture correspond une balise, une
parenth&egrave;se, une accolade ou un crochet de fermeture, et inversement.
V&eacute;rification de l’&eacute;quilibrage des accolades
1 Ouvrez le document en mode Code.
2 Placez le point d'insertion dans le code imbriqu&eacute; &agrave; v&eacute;rifier.
3 Choisissez Edition &gt; S&eacute;lectionner balise parente.
Les balises correspondantes de d&eacute;limitation (ainsi que leur contenu) sont s&eacute;lectionn&eacute;es dans le code. Si vous choisissez
plusieurs fois Edition &gt; S&eacute;lectionner balise parente et que toutes vos balises sont &eacute;quilibr&eacute;es, Dreamweaver s&eacute;lectionne
finalement les balises html et /html qui ouvrent et ferment le document.
V&eacute;rification de l'&eacute;quilibre de paires de parenth&egrave;ses, d'accolades ou de crochets
1 Ouvrez le document en mode Code.
2 Placez le point d'insertion dans le code &agrave; v&eacute;rifier.
3 Choisissez Edition &gt; Equilibrer les accolades.
Le code se trouvant entre parenth&egrave;ses, entre accolades ou entre crochets est s&eacute;lectionn&eacute;. Choisissez de nouveau Edition
&gt; Equilibrer les accolades pour s&eacute;lectionner le code qui se trouve &agrave; l'int&eacute;rieur des parenth&egrave;ses, des accolades ou des
crochets d&eacute;limitant la nouvelle s&eacute;lection.
V&eacute;rification de la compatibilit&eacute; du navigateur
Les fonctions de v&eacute;rification de la compatibilit&eacute; avec les navigateurs vous permettent de rechercher les combinaisons
de HTML et de feuilles de style CSS pouvant d&eacute;clencher des probl&egrave;mes de restitution dans des navigateurs. Cette
fonctionnalit&eacute; teste &eacute;galement le code de vos documents et d&eacute;termine s'il contient des propri&eacute;t&eacute;s ou des valeurs CSS
non prises en charge par les navigateurs cibles.
Remarque : Cette fonction remplace l'ancienne fonction de v&eacute;rification du navigateur cible, mais conserve la
fonctionnalit&eacute; CSS de cette fonction.
Voir aussi
&laquo; V&eacute;rification de probl&egrave;mes de restitution CSS entre les navigateurs &raquo; &agrave; la page 154
Derni&egrave;re mise &agrave; jour le 4/5/2011
338
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Validation des documents XML
Vous pouvez d&eacute;finir les pr&eacute;f&eacute;rences du programme de validation, les probl&egrave;mes sp&eacute;cifiques que celui-ci doit
rechercher et les types d'erreurs qu'il doit signaler.
1 Effectuez l'une des op&eacute;rations suivantes :
• Dans le cas d'un fichier XML ou XHTML, s&eacute;lectionnez Fichier &gt; Valider &gt; En XML.
• L'onglet Validation du panneau R&eacute;sultats affiche le message &laquo; Pas d'erreur ou d'avertissement &raquo; ou &eacute;num&egrave;re les
erreurs de syntaxe relev&eacute;es.
2 Double-cliquez sur le message d'erreur pour mettre l'erreur en surbrillance dans le document.
3 Pour enregistrer un rapport au format XML, cliquez sur le bouton Enregistrer le rapport.
4 Pour afficher le rapport dans votre navigateur principal (et pouvoir l'imprimer), cliquez sur le bouton Parcourir le
rapport.
Validation de documents &agrave; l'aide du validateur W3C (CS 5.5)
Dreamweaver permet de cr&eacute;er des pages Web normalis&eacute;es gr&acirc;ce &agrave; sa prise en charge int&eacute;gr&eacute;e du validateur W3C. Le
validateur W3C valide la conformit&eacute; de vos documents HTML aux normes HTML ou XHTML. Vous pouvez valider
des documents ouverts et des fichiers publi&eacute;s sur un serveur.
Utilisez le rapport g&eacute;n&eacute;r&eacute; apr&egrave;s la validation afin de corriger les erreurs dans votre fichier.
Validation d'un document ouvert
1 Choisissez Fen&ecirc;tre &gt; R&eacute;sultats &gt; Validation W3C.
2 Choisissez Fichier &gt; Valider &gt; Valider document actuel (W3C).
Validation d'un document en direct
Pour les documents en direct, Dreamweaver valide le code re&ccedil;u par le navigateur. Ce code s'affiche lorsque vous
effectuez un clic droit dans votre navigateur, puis que vous choisissez l'option d'affichage du code source. La validation
de documents en direct est particuli&egrave;rement utile lors de la validation de pages dynamiques &agrave; l'aide de PHP, JSP, etc.
L'option Validation du document en direct n'est activ&eacute;e que si l'URL de la page &agrave; valider commence par http.
1 Choisissez Fen&ecirc;tre &gt; R&eacute;sultats &gt; Validation W3C..
2 Cliquez sur Affichage en direct.
3 Choisissez Fichier &gt; Valider &gt; Valider document en direct (W3C).
Pour les documents en direct, lorsque vous double-cliquez sur une erreur dans le panneau Validation W3C, une
nouvelle fen&ecirc;tre s'affiche. Cette fen&ecirc;tre affiche le code g&eacute;n&eacute;r&eacute; par le navigateur, o&ugrave; la ligne contenant l'erreur est mise
en surbrillance.
Personnalisation des param&egrave;tres de validation
1 Choisissez Fen&ecirc;tre &gt; R&eacute;sultats &gt; Validation W3C..
2 Dans le panneau Validation W3C, cliquez sur l'ic&ocirc;ne Validation W3C (lecture). Choisissez Param&egrave;tres.
3 S&eacute;lectionnez un DOCTYPE pour la validation si aucun DOCTYPE n'a &eacute;t&eacute; sp&eacute;cifi&eacute; explicitement dans le document.
4 Si vous ne voulez pas que les erreurs et les avertissements soient affich&eacute;s, d&eacute;sactivez les options correspondantes.
Derni&egrave;re mise &agrave; jour le 4/5/2011
339
UTILISATION DE DREAMWEAVER
Utilisation de code de page
5 Cliquez sur G&eacute;rer si vous voulez supprimer les avertissements ou les erreurs que vous avez masqu&eacute;s &agrave; l'aide du
panneau Validation W3C. Lorsque vous supprimez les avertissements et les erreurs, ils ne s'affichent pas lorsque
vous choisissez Tout afficher dans le panneau Validation W3C.
6 S&eacute;lectionnez Ne pas afficher la bo&icirc;te de dialogue Notification du validateur W3C si vous ne voulez pas que cette
bo&icirc;te de dialogue s'affiche au d&eacute;but de la validation.
Utilisation des rapports de validation
Lorsque la validation est termin&eacute;e, les rapports de validation s'affichent dans le panneau Validation W3C.
• Pour plus d'informations sur une erreur ou un avertissement, s&eacute;lectionnez l'erreur/l'avertissement dans le panneau
Validation W3C. Cliquez sur Plus d'infos.
• Pour enregistrer le rapport au format XML, cliquez sur le bouton Enregistrer le rapport.
• Pour afficher le rapport complet au format HTML, cliquez sur Parcourir le rapport. Le rapport HTML fournit la
liste compl&egrave;te des erreurs et avertissements, accompagn&eacute;e d'un r&eacute;sum&eacute;.
• Pour passer &agrave; l'emplacement de l'erreur dans le code, s&eacute;lectionnez l'erreur dans le panneau Validation W3C.
Cliquez sur le bouton Options, puis choisissez Aller &agrave; la ligne.
• Pour masquer les erreurs/avertissements, s&eacute;lectionnez l'erreur/avertissement. Cliquez sur le bouton Options, puis
choisissez Masquer l'erreur.
• Pour afficher toutes les erreurs et les avertissements, y compris les erreurs masqu&eacute;es, cliquez sur le bouton Options.
Choisissez Tout afficher. Les erreurs et avertissements masqu&eacute;s que vous avez supprim&eacute;s dans la bo&icirc;te de dialogue
Pr&eacute;f&eacute;rences ne sont pas r&eacute;pertori&eacute;s.
• Pour effacer tous les r&eacute;sultats du panneau Validation W3C, cliquez sur le bouton Options. Choisissez Effacer les
r&eacute;sultats.
D&eacute;finition des pr&eacute;f&eacute;rences du programme de validation
La fonctionnalit&eacute; de validation des balises a &eacute;t&eacute; abandonn&eacute;e depuis Dreamweaver CS5. Toutefois, Dreamweaver prend
toujours en charge les validateurs de code externes que vous installez sous forme d'extensions. Lorsque vous installez
une extension de validation externe, Dreamweaver pr&eacute;sente ses pr&eacute;f&eacute;rences dans la cat&eacute;gorie Validateur de la bo&icirc;te de
dialogue Pr&eacute;f&eacute;rences.
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh).
2 S&eacute;lectionnez la cat&eacute;gorie Programme de validation dans la liste de gauche.
3 S&eacute;lectionnez les biblioth&egrave;ques de balises &agrave; utiliser pour la validation.
Vous ne pouvez pas s&eacute;lectionner plusieurs versions d'un m&ecirc;me langage ou d'une m&ecirc;me biblioth&egrave;que de balises. Par
exemple, vous ne pouvez pas s&eacute;lectionner &agrave; la fois HTML 4.0 et HTML 3.2 ou HTML 2.0. S&eacute;lectionnez la version la
plus ancienne &agrave; prendre en compte. En effet, si le document contient du code valide pour HTML 2.0, ce code sera
&eacute;galement valide pour HTML 4.0.
4 Cliquez sur Options et d&eacute;finissez les options pour ces biblioth&egrave;ques.
5 S&eacute;lectionnez les options d'affichage correspondant aux types d'erreurs et d'avertissements &agrave; inclure dans le rapport
du programme de validation.
6 S&eacute;lectionnez les &eacute;l&eacute;ments &agrave; faire v&eacute;rifier par le validateur.
Guillemets dans le texte Indique que Dreamweaver doit vous avertir lors de chaque utilisation de guillemets dans le
texte du document. Il est recommand&eacute; d'utiliser l'entit&eacute; &quot; &agrave; la place de guillemets dans le texte de documents HTML.
Derni&egrave;re mise &agrave; jour le 4/5/2011
340
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Entit&eacute;s dans le texte Indique que Dreamweaver doit conseiller le remplacement de certains caract&egrave;res (comme
l'esperluette (&amp;), inf&eacute;rieur &agrave; (&lt;) et sup&eacute;rieur &agrave; (&gt;)) par leurs &eacute;quivalents en entit&eacute; HTML.
7 Cliquez sur OK pour fermer la bo&icirc;te de dialogue Options du programme de validation, puis &agrave; nouveau sur OK pour
d&eacute;finir les pr&eacute;f&eacute;rences.
Conformit&eacute; des pages avec le langage XHTML
Lorsque vous cr&eacute;ez une page, vous pouvez faire en sorte qu'elle soit compatible avec le langage XHTML. Cette
op&eacute;ration est &eacute;galement possible avec les documents HTML existants.
Voir aussi
&laquo; Code XHTML &raquo; &agrave; la page 305
Cr&eacute;ation de documents conformes au code XHTML
1 Choisissez Fichier &gt; Nouveau.
2 S&eacute;lectionnez une cat&eacute;gorie et un type de page &agrave; cr&eacute;er.
3 S&eacute;lectionnez l'une des d&eacute;finitions de type de document (DTD) XHTML dans le menu d&eacute;roulant Type de document
(DTD) &agrave; l'extr&ecirc;me droite de la bo&icirc;te de dialogue, puis cliquez sur Cr&eacute;er.
Par exemple, vous pouvez rendre un document HTML compatible XHTML en s&eacute;lectionnant XHTML 1.0
transitionnel ou XHTML 1.0 Strict dans le menu d&eacute;roulant.
Remarque : Cette op&eacute;ration est impossible pour certains types de documents.
Cr&eacute;ation de documents conformes au code XHTML par d&eacute;faut
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Mac OS X), puis s&eacute;lectionnez la cat&eacute;gorie
Nouveau document.
2 S&eacute;lectionnez un document par d&eacute;faut et l'une des d&eacute;finitions de type de document XHTML dans le menu d&eacute;roulant
Type de document (DTD), puis cliquez sur OK.
Par exemple, vous pouvez rendre un document HTML compatible XHTML en s&eacute;lectionnant XHTML 1.0
transitionnel ou XHTML 1.0 Strict dans le menu d&eacute;roulant.
Conformit&eacute; d'un document HTML avec le langage XHTML
1 Ouvrez un document, puis effectuez l'une des op&eacute;rations suivantes :
• Pour un document sans cadres, s&eacute;lectionnez Fichier &gt; Convertir, puis s&eacute;lectionnez l'une des d&eacute;finitions de type
de document XHTML.
Par exemple, vous pouvez rendre un document HTML compatible XHTML en s&eacute;lectionnant XHTML 1.0
transitionnel ou XHTML 1.0 Strict dans le menu d&eacute;roulant.
• Pour un document avec cadres, s&eacute;lectionnez un cadre, puis Fichier &gt; Convertir, puis s&eacute;lectionnez l'une des
d&eacute;finitions de type de document XHTML.
2 Pour convertir le document entier, r&eacute;p&eacute;tez cette &eacute;tape pour chacun des cadres et pour le document de jeu de cadres.
Remarque : Il est impossible de convertir une instance d'un mod&egrave;le, puisqu'elle doit reprendre le m&ecirc;me langage que le
mod&egrave;le d'apr&egrave;s lequel elle a &eacute;t&eacute; cr&eacute;&eacute;e. Par exemple, un document con&ccedil;u d'apr&egrave;s un mod&egrave;le XHTML restera toujours en
XHTML ; de m&ecirc;me, un document con&ccedil;u d'apr&egrave;s un mod&egrave;le HTML non conforme au langage XHTML restera toujours
en HTML et ne pourra pas &ecirc;tre converti en XHTML ni dans aucun autre langage.
Derni&egrave;re mise &agrave; jour le 4/5/2011
341
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Utilisation du d&eacute;bogueur ColdFusion (Windows uniquement)
Si vous utilisez ColdFusion pour tester Dreamweaver, vous pouvez afficher les informations de d&eacute;bogage ColdFusion
sans quitter Dreamweaver.
Remarque : Cette fonction n'est pas prise en charge sur Macintosh. Les d&eacute;veloppeurs Macintosh peuvent ouvrir une page
ColdFusion dans un autre navigateur au moyen de la commande Aper&ccedil;u dans le navigateur (F12). Si la page contient
des erreurs, les informations relatives aux causes possibles s'affichent au bas de la page.
Si vous utilisez ColdFusion MX 6.1 ou une version ant&eacute;rieure, commencez par v&eacute;rifier que le d&eacute;bogage est activ&eacute; dans
ColdFusion Administrator. Si vous utilisez ColdFusion MX 7 ou une version ult&eacute;rieure, Dreamweaver active
automatiquement ce param&eacute;trage.
V&eacute;rifiez &eacute;galement que ColdFusion est en cours d’ex&eacute;cution sur le serveur d’&eacute;valuation de Dreamweaver. Pour plus
d'informations, consultez la section &laquo; Configuration d'un serveur d'&eacute;valuation &raquo; &agrave; la page 50.
Pour garantir l'actualisation des informations de d&eacute;bogage &agrave; chaque fois qu'une page est affich&eacute;e dans le navigateur
interne, veillez &agrave; ce que Internet Explorer recherche les versions plus r&eacute;centes du fichier &agrave; chaque fois que celui-ci est
demand&eacute;. Dans Internet Explorer, s&eacute;lectionnez Outils &gt; Options Internet, s&eacute;lectionnez l'onglet G&eacute;n&eacute;ral, puis cliquez sur
le bouton Pa
Mode d'emploi | Adobe Dreamweaver CS5.5 Manuel utilisateur

Manuels associés

Adobe

DREAMWEAVER CS5

MACROMEDIA

DREAMWEAVER 8-UTILISATION DE DREAMWEAVER

Adobe

Dreamweaver CS4

Adobe

DREAMWEAVER CS5

Adobe

DREAMWEAVER CS3

MACROMEDIA

DREAMWEAVER MX 2004-UTILISATION DE DREAMWEAVER

MACROMEDIA

DREAMWEAVER MX 6

Adobe

Dreamweaver CS4

MACROMEDIA

DREAMWEAVER MX 2004-BIEN DMARRER AVEC DREAMWEAVER

Adobe

Dreamweaver CS4

Adobe

DREAMWEAVER CS3

Adobe

Contribute 6.5
