Dreamweaver CC

Aide dAdobe DreamweaverCC
Certains liens peuvent mener vers des pages disponibles uniquement en anglais.
Juin 2015
Table des matires

Nouveauts
Rsum des nouvelles fonctionnalits
Creative Cloud
1
2
17
Utilisation de lapplication de bureau Creative Cloud pour grer vos applications

et services
18
Exploration, synchronisation et gestion dactifs
30
Ajout de polices depuis Typekit
36
Creative Cloud Market
42
Creative Cloud Extract
46
Bibliothques Creative Cloud
49
Workflow et espace de travail
55
Flux de travaux et espace de travail dans Dreamweaver
56
Personnalisation de lespace de travail de Dreamweaver
69
Utilisation de la fentre de document
79
Utilisation de barres d'outils, d'inspecteurs et de menus contextuels
83
Utilisation du panneau Insertion
85
Panneau CSS Designer
89
Panneau DOM
99
Recherche de fichiers sur la base de leur nom ou de leur contenu | Mac OS

103
Zoom avant et zoom arrire
104
Raccourcis clavier
106
Optimisation de l'espace de travail pour le dveloppement visuel
108
Intgration de CEF
111
Gestion de site
115
A propos des sites Dreamweaver
116
A propos des sites dynamiques
118
Cration dune version locale de votre site
119
Connexion un serveur distant
120
Options de la bote de dialogue Grer les sites
132
Configuration dun serveur de test
134
Contrle de version et paramtres avancs
138
Importation et exportation des paramtres de site de Dreamweaver
140
Modification d'un site Web distant existant
142
Dfinition des prfrences de site pour le transfert de fichiers
143
Dfinition des paramtres du serveur proxy
144
Gestion des fichiers
146
Cration et ouverture de documents
147
Gestion des fichiers et des dossiers
160
Acquisition et placement de fichiers depuis ou vers votre serveur
167
Archivage et extraction de fichiers
171
Synchronisation de fichiers
178
Comparaison de fichiers pour en chercher les diffrences
180
Voilage de fichiers et de dossiers dans votre site Dreamweaver
183
Stockage des informations sur les fichiers dans des Design Notes
186
Test de votre site Dreamweaver
189
Mise en forme et design
193
Utilisation d'assistances visuelles pour la mise en forme
194
Utilisation de cadres
197
Mise en forme de pages avec CSS
207
Utilisation de fichiers Bootstrap
213
Requtes multimdias visuelles
221
Design ractif laide de mises en forme grille fluide
225
Prsentation de contenu dans des tableaux
229
Utilisation de widgets dinterface utilisateur jQuery dans Dreamweaver
248
Utilisation deffets jQuery dans Dreamweaver
249
Couleurs
251
CSS
253
Description des feuilles de style en cascade
254
258
Dfinition de prfrences de styles CSS
268
Cration d'une rgle CSS
269
Dfinition des proprits CSS
271
Modification d'une rgle CSS
278
Ajout d'une proprit une rgle CSS
279
Application, suppression ou modification du nom de styles de classe CSS

280
Dplacement/exportation de rgles CSS
282
Conversion de code CSS intgr en rgle CSS
284
Etablissement d'un lien vers une feuille de style CSS externe
285
Modification d'une feuille de style CSS
286
Mise en forme du code CSS
287
Dsactivation/Activation de code CSS
289
Inspection de code CSS en mode En direct
290
Vrification de problmes de restitution CSS entre les navigateurs
291
Utilisation des feuilles de style la conception
293
Utilisation des balises div
294
Application de dgrads larrire-plan
311
Effets de transition CSS3
314
Utilisation d'exemples de feuilles de style Dreamweaver
316
Panneau Styles CSS
317
Contenu de page et actifs
320
Dfinition des proprits de page
321
Dfinition des proprits de lien CSS pour une page entire
323
Dfinition des proprits den-tte CSS pour une page entire
324
Dfinition des proprits de titre et de codage d'une page
325
Utilisation d'un trac d'image pour crer une page
326
Prsentation du codage de document
327
Slection et affichage d'lments dans la fentre de document
328
Couleurs
330
332
Dfinition des prfrences de dure et de taille des tlchargements
334
Utilisation du texte
335
Texte en arabe et en hbreu
345
Modification en mode En direct
347
Panneau DOM
358
Dfinition des proprits de texte dans linspecteur Proprits
362
Vrification de l'orthographe d'une page Web
365
Importation de donnes tabulaires
366
Importation de documents Microsoft Office (Windows uniquement)
367
Cration d'un lien vers un document Word ou Excel
368
Utilisation de mise en forme HTML
369
Utilisation de barres horizontales
371
Modification des combinaisons de polices
372
Ajout de polices Edge Web Fonts la liste des polices
373
Insertion de dates
375
Utilisation des actifs
376
Cration et gestion d'une liste d'actifs favoris
382
Insertion et modification dimages
384
Ajout d'objets multimdias
395
Ajout de vido
401
Insertion de vido HTML5
406
Insertion de fichiers SWF
408
Ajout de widgets Web
411
Ajout de son
412
Insertion daudio HTML5
414
Automatisation des tches
416
A propos des actifs et des bibliothques
421
Utilisation des lments de bibliothque
423
Liens et navigation
427
A propos des liens et de la navigation
428
Etablissement de liens
430
Menus de reroutage
439
Barres de navigation
441
Cartes graphiques
442
Rsolution des problmes lis aux liens
444
jQuery
446
447
448
Prvisualisation
450
Aperu et inspection de pages web sur plusieurs priphriques
451
Prvisualisation des pages
455
Codage
459
Informations gnrales sur le codage dans Dreamweaver
460
Configuration de votre environnement de codage
465
Dfinition des prfrences de codage
467
Rdaction et modification de code
476
Rduction du code
499
Analyse du code (Linting)
501
Optimisation du code
504
Modification de code en mode Cration
510
Utilisation de contenu d'en-tte pour les pages
516
Utilisation des inclusions ct serveur
520
Gestion des bibliothques de balises
522
Importation de balises personnalises dans Dreamweaver
525
JavaScript
527
Utilisation de comportements JavaScript (instructions gnrales)
528
Application de comportements JavaScript intgrs
531
Procdures inter-produits
Modules complmentaires
540
541
Intgration entre les applications
545
Utilisation de Fireworks et Dreamweaver
546
Utilisation de Flash et Dreamweaver
551
Utilisation d'Adobe Bridge et Dreamweaver
552
Utilisation de Device Central et Dreamweaver
554
Utilisation de ConnectNow et Dreamweaver
555
Extension AIR pour Dreamweaver
556
Utilisation de Dreamweaver avec les services en ligne Adobe
561
Extract dans Dreamweaver CC
566
Intgration entre Dreamweaver et Business Catalyst
578
581
Utilisation de Photoshop et de Dreamweaver
582
Modles
588
A propos des modles Dreamweaver
589
Reconnaissance des modles et des documents bass sur un modle
593
Cration d'un modle Dreamweaver
596
Cration de rgions modifiables dans des modles
599
Cration de rgions rptes dans des modles
601
Utilisation de rgions facultatives dans des modles
603
Dfinition d'attributs de balises modifiables dans des modles
605
Cration d'un modle imbriqu
607
Modification, mise jour et suppression de modles
610
Exportation et importation du contenu d'un modle
613
Application ou suppression d'un modle depuis un document existant
615
Modification du contenu d'un document bas sur un modle
617
Syntaxe des modles
619
Dfinition de prfrences de programmation pour les modles
621
Mobiles et crans multiples
623
Cration de requtes multimdias
624
Modification de lorientation de la page pour les appareils mobiles
627
Cration d'applications Web pour appareils mobiles (CS5.5)
628
XML
629
A propos de XML et de XSLT
630
Excution de transformations XSL sur le serveur
636
Excution de transformations XSL sur le client
650
Entits de caractre manquant pour XSLT
652
Sites, pages et formulaires web dynamiques

Prsentation des applications Web
654
655
Configuration de l'ordinateur pour le dveloppement d'applications
661
Connexions aux bases de donnes pour les dveloppeurs ColdFusion
666
Connexions aux bases de donnes pour les dveloppeurs ASP
668
Connexions aux bases de donnes pour les dveloppeurs PHP
677
Rsolution des problmes de connexion aux bases de donnes
679
Suppression de scripts de connexion
684
685
Conception de pages dynamiques
688
Prsentation des sources de contenu dynamique
690
Dfinition de sources de contenu dynamique
695
Ajout de contenu dynamique dans les pages
707
Modification de contenu dynamique
710
Affichage denregistrements dune base de donnes
712
Affichage des donnes dynamiques
721
Ajout de comportements de serveur personnaliss
722
A propos de la cration de formulaires
731
Utilisation de formulaires pour recueillir des informations des utilisateurs
732
Cration de formulaires ColdFusion
735
Cration de formulaires Web
749
Prise en charge amliore de HTML5 pour les lments de formulaire
760
Cration visuelle dapplications
763
Cration de pages principales et dtailles
764
Cration de pages de recherche et de rsultats
771
Cration dune page dinsertion denregistrements
776
Cration dune page de mise jour denregistrement
780
Cration d'une page de suppression d'enregistrement
785
Cration de pages avec objets de manipulation de donnes avancs

(ColdFusion, ASP)
792
Cration d'une page d'enregistrement
797
Cration d'une page d'ouverture de session
799
Cration d'une page accs restreint
801
Scurisation dun dossier dans votre application (ColdFusion)
804
Utilisation de composants ColdFusion
805
Accessibilit
Dreamweaver et l'accessibilit
Dreamweaver et Creative Cloud
Synchronisation des paramtres de Dreamweaver avec Creative Cloud
811
812
815
816
Nouveauts
Rsum des nouvelles fonctionnalits

Adobe Dreamweaver CC (version 2015)
La version 2015 de Dreamweaver CC intgre de nouvelles fonctionnalits destines aux conceptions

ractives, des fonctions amliores ddition de code, la possibilit de prvisualiser des pages Web sur des
priphriques, ainsi que des options permettant de procder lextraction groupe dimages optimises pour
le Web dans diverses rsolutions partir de compositions Photoshop. Lintgration du framework Bootstrap
vous permet de crer des sites Web ractifs conus avant tout pour les appareils mobiles. Les requtes
multimdias visuelles viennent galement enrichir lexprience de conception Web ractive, en vous
permettant de visualiser et de modifier votre conception diffrents points darrt.
Cette version inclut galement plusieurs amliorations relatives aux fonctionnalits ddition disponibles en
mode En direct et dans le panneau CSS Designer. Larticle suivant vous prsente ces nouvelles
fonctionnalits et amliorations, et comporte des liens vers des ressources de support et de formation.
Le correctif correspondant ldition 2015 de Dreamweaver CC, publi en juillet, permet

Dreamweaver dutiliser les paramtres de serveur proxy dfinis dans lapplication de bureau Adobe
Creative Cloud. Pour plus dinformations, reportez-vous la page Dfinition des paramtres du
serveur proxy.
Nouveauts
Modifications
Aperu sur le priphrique
Pliage de code
Amliorations apportes la fonctionnalit

Extract
Prise en charge de lanalyse Linting

Prise en charge dEmmet
Aperu en mode Code
Amliorations apportes aux fonctions ddition

du mode En direct
Nouveaux fragments de code
Modifications apportes la barre doutils de

codage
Intgration de Bootstrap
Optimisation de CSS Designer
Nouveaux menus en mode En direct
Serveur de test Amliorations du flux de travail

2
Prise en charge des tableaux en mode En direct
Modification du flux de travail Business Catalyst
Prise en charge des lments dinterface

utilisateur jQuery en mode En direct
Autres modifications
Panneau DOM
Conseils de code SVG dans les documents
HTML
Aperus technologiques
Aperu personnalis en mode Code avec lAPI
ShowPreview
Haut de la page
Aperu sur le priphrique

Dreamweaver permet dsormais de tester des pages Web sur
plusieurs appareils simultanment. Vous pouvez ainsi observer la
mise en forme de chaque page Web en fonction des diffrents
formats, mais aussi tester les fonctionnalits interactives prsentes
sur vos pages. Et tout a, sans avoir installer une application mobile
spcifique ni tablir une connexion physique entre les priphriques
et votre ordinateur ! Il vous suffit de scanner le code QR gnr
automatiquement avec chaque appareil sur lequel vous souhaitez
afficher vos pages Web.
Tutoriel vido : Prvisualisation et

contrle sur terminaux mobiles
( vous de jouer, 3 min)
Apprenez prvisualiser et contrler
vos projets Web via le navigateur de
vos quipements mobiles.
Une fois active sur lordinateur, linspection en direct est lance sur tous les priphriques connects, ce qui
vous permet de vrifier les diffrents lments et dajuster votre conception en consquence.
Pour plus dinformations, voir Aperu et inspection de pages Web sur plusieurs priphriques.
Haut de la page

Les barres de requtes multimdias visuelles constituent une reprsentation visuelle des requtes
multimdias prsentes sur une page. Ces barres vous permettent de visualiser votre page Web diffrents
points darrt et de voir comment chaque composant de la page est repositionn dans les diffrentes fentres
daffichage. Lorsque vous affichez votre page dans diffrentes fentres, vous pouvez apporter des
modifications spcifiques lune de ces fentres daffichage sans que cela ne change laspect de la page
dans les autres fentres.
Loutil Requtes multimdias virtuelles se compose de trois barres horizontales, reprsentant chacune une
catgorie de requtes multimdias :
Vert : requtes multimdias associes des conditions max-width
Bleu : requtes multimdias associes des conditions min-width et max-width
Violet : requtes multimdias associes des conditions min-width

3
Pour plus dinformations, voir Requtes multimdias visuelles.
Haut de la page
Prise en charge du code danalyse Linting

Avec cette nouvelle version de Dreamweaver, vous pouvez dsormais corriger les erreurs courantes dans
votre code laide de lanalyse Linting. La fonctionnalit Linting consiste analyser le code pour signaler
toute erreur potentielle ou utilisation suspecte du code. Dreamweaver peut analyser des fichiers HTML, CSS
et JavaScript lors de leur chargement, de leur enregistrement ou de leur modification. Les erreurs et
avertissements sont ensuite rpertoris dans le nouveau panneau Sortie.
Pour plus dinformations, voir Analyse du code (Linting).
Panneau Sortie comprenant les rsultats de lanalyse Linting
Haut de la page
Prise en charge dEmmet

Vous tes un dveloppeur acharn qui saisit plusieurs lignes de code
dans Dreamweaver ? Gagnez du temps en utilisant des abrviations
Emmet. Ces abrviations, faciles mmoriser et taper, se
transforment en vritable code en mode Code ds que vous appuyez
sur la touche de tabulation.
Pour plus dinformations, voir Insertion de code laide dEmmet.
Tutoriel vido : Fonctions

avances de remplissage et de
validation du code
Apprenez utiliser la saisie semiautomatique pour convertir des
abrviations simples en fragments
de code CSS et HTML complexes
grce la prise en charge
dEmmet. De plus, grce la
compatibilit avec Lint, les
fonctions de validation avances
surlignent les erreurs en temps
rel.
Haut de la page
Aperu en mode Code
Si vous travaillez en mode fractionn, vous pouvez visualiser instantanment les modifications apportes aux
images et aux couleurs via les modes En direct ou Cration. En revanche, si vous travaillez uniquement en
mode Code, les images sont simplement signales par un nom de fichier, ce qui nest gnralement pas trs
intuitif. De mme pour les couleurs ( lexception des couleurs prdfinies) : elles ne sont dsignes que par
une suite de chiffres peu intelligible. Dans cette version de Dreamweaver, vous pouvez rapidement
prvisualiser les images et couleurs, directement en mode Code. Cette fonctionnalit vous aide tablir un
lien visuel entre les noms de fichiers et codes de couleurs, et les images et couleurs relles auxquelles ils
renvoient. Vous pouvez ainsi prendre des dcisions plus rapides en matire de conception et rduire
considrablement le temps de dveloppement.
Pour plus dinformations, voir Aperu des images et des couleurs en mode Code.
Aperu dimage en mode Code
Aperu de couleur en mode Code
Le mode Code intgre galement un aperu des erreurs. Le numro de la ligne o se trouve le code erron
est surlign en rouge. Lorsque vous passez la souris sur ce numro, une brve description de lerreur
saffiche.
Remarque : seule la premire erreur de la ligne est visible. Si la ligne contient uniquement un avertissement,
la description de ce dernier saffiche. Si la ligne contient un avertissement et une erreur, seule la description
de lerreur saffiche.
Haut de la page
Nouveaux fragments de code

Les fragments de code sont des parties de code que vous pouvez rutiliser plusieurs fois dans vos projets.
Cette version de Dreamweaver fournit des fragments de code nouveaux et mis jour :
Boostrap_Snippets
CSS_Animation_And_Transitions
CSS_Effects
CSS_Snippets
HTML_Snippets
Fragments de code JavaScript (mis jour)
5
PHP_Snippets
Preprocessor_Snippets
Responsive_Design_Snippets
Pour plus dinformations sur lutilisation des fragments de code, voir Manipulation de fragments de code.
En outre, vous pouvez dsormais faire en sorte que les fragments de code restent jour sur toutes vos
installations Dreamweaver, laide de la fonctionnalit de synchronisation dans le cloud. Pour plus
dinformations sur la synchronisation de fragments de code avec Creative Cloud et vos autres installations
Dreamweaver, reportez-vous la page Synchronisation des paramtres de Dreamweaver avec Creative
Cloud.
Haut de la page
Intgration de Bootstrap
Bootstrap est le framework HTML, CSS et JavaScript gratuit le plus
connu, qui permet de dvelopper des sites Web ractifs et Mobile
First. Ce framework comprend des modles CSS et HTML ractifs
pour les boutons, les tableaux, la navigation, les carrousels dimage et
dautres lments que vous pouvez utiliser sur votre page Web.
Quelques modules externes JavaScript facultatifs sont galement
disponibles, qui permettent mme des dveloppeurs disposant de
connaissances de codage basiques de dvelopper des sites Web
ractifs attrayants.
Tutoriel vido : Cration de sites Web

ractifs dans Dreamweaver CC
Apprenez tirer parti du design Web
ractif pour crer des sites Web de A
Z ou partir de modles de
dmarrage Bootstrap qui sadaptent
diffrents formats dcran, pour un
rendu impeccable de votre contenu.
Dreamweaver vous permet de crer des documents Bootstrap, mais

aussi de modifier des pages Web existantes cres avec Bootstrap.
Pour commencer crer votre site Web Bootstrap, vous pouvez
utiliser lun des modles de dpart Bootstrap qui vous sont proposs
dans la bote de dialogue Nouveau document (Modles de
dmarrage > Modles Bootstrap).
Bootstrap-Agence
Bootstrap-E-commerce
Bootstrap-Portfolio
Bootstrap-Produit
Bootstrap-Immobilier
Bootstrap-CV
Vous pouvez galement crer un document Bootstrap personnalis partir de la bote de dialogue Nouveau
document (Nouveau document > Bootstrap). Dveloppez ensuite votre site Web pas pas, en y intgrant des
composants Bootstrap tels que des menus accordon et des carrousels, laide du panneau Insertion de
Dreamweaver. Si vous disposez de compositions Photoshop, vous pouvez aussi utiliser Extract pour importer
des images, polices, styles, textes et autres lments dans votre document Bootstrap.
Cration de documents Bootstrap
Que votre fichier Bootstrap soit dj finalis ou encore en cours de conception, vous pouvez le modifier dans
Dreamweaver. Il vous est ainsi possible de modifier le code directement, mais aussi de le peaufiner laide
de fonctionnalits ddition visuelles telles que le mode En direct, le panneau CSS Designer visuel, les
requtes multimdias visuelles et la fonction Extract.
Remarque : pour les sites Web crs laide de versions du framework Bootstrap antrieures la
version 3, les outils ddition visuelle qui permettent de masquer et dafficher les lments, ainsi que les
fonctions de modification des lignes et des colonnes (ajout, redimensionnement, dcalage), ne sont pas
disponibles dans Dreamweaver.
Pour plus dinformations, voir Utilisation de fichiers Bootstrap.
Haut de la page
Possibilit de modifier des tableaux en mode En direct

Il est dsormais trs simple et trs rapide de modifier des tableaux en mode En direct, grce aux options
suivantes :
Options de mise en forme dans la vue Affichage dlment

Menu Modifier > Tableau
Remarque : le menu Modifier est maintenant activ en mode En
direct.
Pour plus dinformations, voir Redimensionnement de tableaux et Mise en forme de tableaux et de cellules.
Haut de la page
Nouveaux menus en mode En direct

Les options ddition du mode En direct ont t tendues grce la mise disposition des menus suivants
dans ce mode :
Modifier
Format
Commandes
Site
Option Collage spcial sous Edition et dans le menu contextuel
Haut de la page
Prise en charge des lments dinterface utilisateur jQuery en

mode En direct
Le panneau Insertion permet dsormais dinsrer directement des widgets jQuery en mode En direct. Faites
glisser llment souhait depuis le panneau Insertion vers la vue En direct, et maintenez le bouton de la
souris enfonc afin dutiliser lune des options dinsertion suivantes :
Guides en direct : ces repres apparaissent lorsque vous passez la souris sur un
lment en mode En direct, aprs avoir fait glisser llment souhait depuis le panneau
Insertion. Les Guides en direct permettent dinsrer des lments en haut, en bas,
gauche ou droite de llment actif.
Icne DOM : licne DOM apparat si vous marquez une courte pause lorsque les Guides
en direct saffichent. Cliquez sur licne pour afficher la structure DOM dans une fentre
contextuelle et, ainsi, placer llment un endroit prcis de la structure du document.
Assistant de position : lassistant de position permet de positionner llment avant ou

aprs llment actif, voire de limbriquer dans cet lment (en mode En direct).
Remarque : les fonctionnalits prsentes ci-dessus saffichent en fonction de llment insrer.
Pour plus dinformations, voir Insertion dlments directement en mode En direct.
Haut de la page
Panneau DOM
LAffichage rapide des lments est dsormais remplac par le
panneau DOM (Fentres > DOM). Le panneau DOM reprend toutes
les fonctionnalits qui taient prsentes dans lAffichage rapide des
lments, et en ajoute de nouvelles. Ce panneau, disponible dans
tous les espaces de travail, est persistant, ce qui signifie que vous
pouvez ouvrir deux documents et accder leurs panneaux DOM
simultanment.
Grce au panneau DOM, vous pouvez :

Faire glisser des lments depuis le panneau Insertion afin de les
insrer de manire prcise dans la structure du document.
8
Vido : Naviguer dans votre code HTML
(Visionnage, 6 min)
Affichez et modifiez une structure
HTML.
Copier, coller, dupliquer, dplacer ou supprimer des lments

structurels du document.
Voir nimporte quel lment de la page en contexte au sein de la
structure du document : llment actif est mis en surbrillance
dans le panneau DOM.
Pour plus dinformations sur lutilisation du panneau DOM et la manire dont il permet de modifier la structure
HTML, reportez-vous la section Panneau DOM.
Panneau DOM
Haut de la page
Conseils de code SVG dans les documents HTML

Les conseils de code sont dsormais pris en charge pour tous les lments et attributs SVG dans les
documents HTML. Ces conseils de code vous permettent dajouter des lments SVG des documents
HTML en mode Code, tout comme vous le feriez dans des documents SVG.
Haut de la page
Aperus technologiques
compter de cette version, lquipe Dreamweaver propose des versions prliminaires de certaines
fonctionnalits afin de recueillir lavis des clients. Les commentaires obtenus permettent damliorer ces
fonctionnalits avant de les inclure dans Dreamweaver en tant quoptions part entire. Ces fonctionnalits
sont accessibles partir de la bote de dialogue Prfrences, sous Aperus technologiques.
Dans cette version, la fonctionnalit que vous pouvez tester est la mise en surbrillance du code. Cette
fonction a pour but de mettre en surbrillance toutes les occurrences du texte slectionn en mode Code.
Pour lutiliser, procdez comme suit :

1. Cliquez sur Prfrences > Aperus technologiques.
2. Activez la mise en surbrillance du code. Cliquez ensuite sur Appliquer, puis fermez la
bote de dialogue Prfrences.
3. Ouvrez le document dans lequel vous souhaitez utiliser la mise en surbrillance du code.
Cette option est disponible dans tous les types de documents, notamment HTML, JS,
CSS et LESS.
4. En mode Code, double-cliquez sur le texte (balise, mot ou expression) que vous
souhaitez mettre en surbrillance.
Toutes les occurrences du texte slectionn sont alors mises en surbrillance en mode
Code.
Vous pouvez alors parcourir le texte mis en surbrillance laide des raccourcis clavier suivants :
Slectionner loccurrence suivante : F3 (Win) ; CMD + G (Mac)
Slectionner loccurrence prcdente : MAJ + F3 (Win) ; CMD + MAJ + G (Mac)
Haut de la page
Aperu personnalis en mode Code avec lAPI ShowPreview

Avec cette version de Dreamweaver, vous pouvez gnrer un aperu personnalis qui apparat lorsque vous
passez la souris sur le code en mode Code. Pour implmenter ces aperus personnaliss, vous pouvez
utiliser la nouvelle API, showPreview, en plus de lAPI existante, mm:browsercontrol. Par exemple, faites
appel ces API pour afficher un aperu de tous les paramtres dune fonction JavaScript lorsque vous
passez la souris sur le nom de cette fonction.
Pour plus dinformations, voir Rfrence des API de Dreamweaver : Fonctions relatives au mode Code.
Haut de la page
Pliage de code
Dans les prcdentes versions de Dreamweaver, vous deviez slectionner les blocs de code en mode Code,
puis les rduire. Dans cette version et les suivantes, vous pouvez rduire les blocs de code en passant
simplement la souris sur les numros de ligne correspondants, puis en cliquant sur le triangle qui apparat.
Le pliage de code (rduction) est dsormais disponible dans les fichiers HTML, CSS, LESS, Sass, SCSS, JS,
PHP, XML et SVG et sappuie sur les blocs de balises.
Les oprations Copier, Couper, Coller et Glisser-dposer conservent ltat de pliage du code. Par exemple,
lorsque vous copiez un bloc de code qui est rduit, lopration Coller insre le texte copi sous forme de bloc
rduit.
Dans les fichiers HTML, le contenu rduit intgre dsormais la balise de fermeture et est restitu
diffremment. Par ailleurs, le nombre de caractres affichs dans un bloc de code rduit est dsormais
suprieur. Cela vous permet de prvisualiser les attributs initiaux, le cas chant.
Pour plus dinformations, voir Pliage du code.
Haut de la page
Amliorations apportes la fonctionnalit Extract

10
Extract pour les priphriques

Prise en charge des units en pourcentages

Les priphriques peuvent prsenter des tailles, mais aussi des
rsolutions diffrentes. Lorsque vous prparez votre conception Web
ractive, vous devez tenir compte des diffrentes rsolutions dimage
afin dobtenir un rendu optimal sur chaque appareil. Toutefois, il peut
tre dcourageant de crer autant de versions aux rsolutions
diffrentes pour chaque image de votre projet.
Tutoriel vido : Extraction de ressources
Loption Extract de Dreamweaver simplifie grandement cette tche.

Dans la version 2015 de Dreamweaver, lorsque vous extrayez une
image partir dune composition Photoshop, vous avez la possibilit
den extraire plusieurs versions, correspondant diffrentes
rsolutions. Limage provenant de Photoshop est automatiquement
mise lchelle au cours de lextraction, selon les rsolutions
prdfinies.
pour le Web, notamment des images

pour les crans HiDPI.
par lots

Apprenez extraire dun document
Photoshop des lots dimages de
rsolutions diffrentes et optimises
Vous pouvez ensuite crer des appels renvoyant vers ces images en JavaScript ou dans des requtes
multimdias, afin quelles saffichent diffremment selon le priphrique utilis. Par exemple, pour un cran
Retina haute densit, vous pouvez utiliser la version 2X de limage.
Pour plus dinformations, voir Extraction dimages depuis des fichiers PSD.
Extraction de plusieurs versions dune image selon diffrentes rsolutions
Prise en charge des units en pourcentages
11
Dans le panneau Extract, vous pouvez dsormais afficher des valeurs en pourcentages pour la largeur et la
hauteur des images, en plus des valeurs en pixels. Il est galement possible de consulter les mesures en
pourcentages.
Lorsque vous cliquez sur un actif dans le panneau Extract, le menu contextuel qui saffiche comporte une
option permettant de basculer entre les pixels et les pourcentages. Lunit slectionne dans ce menu est
conserve lorsque vous consultez les mesures dautres actifs.
Option de pourcentage
Mesures en pourcentages
Haut de la page
Amliorations apportes aux fonctions ddition du mode En direct
Insertion imbrique en mode En direct

Dsormais, vous pouvez insrer des lments au sein dautres lments en mode En direct. Lorsque vous
faites glisser des lments partir du panneau Insertion ou Actifs, ou au sein de la vue En direct, et passez
la souris sur diffrents lments de la page, des indications visuelles vous permettent dimbriquer les
lments. Vous disposez galement de repres pour placer llment avant ou aprs un autre lment du
document.
Repres avant/aprs : saffichent lorsque vous passez la souris sur les 30 % infrieurs
ou suprieurs de llment.
Indications visuelles dimbrication : saffichent lorsque vous passez la souris sur le
milieu de llment (40 % de sa surface).
Indications visuelles (surbrillance en bleu avec ombrage) permettant une insertion imbrique
Modification de slecteurs directement dans la vue Affichage dlment

Dsormais, il est possible de cliquer simplement sur le nom dun slecteur dans la vue Affichage dlment
12
pour le modifier. Ensuite, pour valider les modifications, cliquez nimporte o sur la page.
Haut de la page
Modifications apportes la barre doutils de codage

Les options suivantes, lies la rduction de code, ont t supprimes de la barre doutils de codage :
Rduire balises entires
Rduire la slection
Remarque : ces options ont galement t supprimes du menu contextuel accessible par clic droit et du
menu Edition.
Vous pouvez dsormais rduire le code en passant la souris sur le numro de ligne correspondant, puis en
cliquant sur le triangle qui apparat.
En outre, les options suivantes sont dsormais indisponibles pour les fichiers HTML, CSS et JS :
Surligner le code non valide
Alertes derreurs de syntaxe dans la barre dinformation
Vous pouvez dsormais utiliser la fonctionnalit Linting pour dtecter des erreurs dans le code ; les rsultats
de lanalyse sont affichs dans le panneau Sortie.
Haut de la page
Optimisation de CSS Designer

Modes Tout et Actuel
Conseils relatifs aux valeurs des proprits
Codes de couleur pour les requtes multimdias
Modes Tout et Actuel

CSS Designer propose dsormais deux modes diffrents pour laffichage et ldition des proprits CSS :
Tout : dans ce mode, lensemble des styles CSS, requtes multimdias et slecteurs du
document actif sont visibles. Ce mode ne prend pas en compte les lments slectionns
dans la vue En direct ou Cration.
Il est particulirement adapt la cration de styles CSS, de requtes multimdias et de slecteurs.
Actuel : ce mode affiche les styles calculs pour chaque lment slectionn dans la vue
En direct ou Cration. Dans un fichier CSS, si vous avez slectionn un slecteur, ce
mode affiche les proprits de ce slecteur.
Ce mode est particulirement adapt si vous souhaitez modifier les proprits des slecteurs associs
llment slectionn dans le document.
Modes Tout et Actuel dans CSS Designer
13
Conseils relatifs aux valeurs des proprits

Dreamweaver affiche dsormais des conseils de code dans CSS Designer, similaires ceux qui apparaissent
en mode Code, afin de vous aider dfinir de nouvelles proprits.
Conseils de code dans CSS Designer
Codes de couleur pour les requtes multimdias

Dans le panneau CSS Designer, les requtes multimdias disposent maintenant de codes de couleur
harmoniss sur ceux des requtes multimdias visuelles.

Codes de couleur pour les requtes multimdias dans CSS Designer
14
Option Afficher dfinies : la case cocher Afficher dfinies de la section Proprits
est maintenant active par dfaut lors du premier lancement de Dreamweaver. Toutes les
modifications apportes cette option (activation/dsactivation) sont conserves pour
lensemble des sessions suivantes de Dreamweaver.
Dfilement du panneau pour afficher loption Ajouter une proprit au centre :

lorsque vous cliquez sur + dans la section Proprits, celle-ci dfile afin que la ligne
Ajouter une proprit soit affiche au centre du panneau. Si la section Proprits est
trop petite, la ligne Ajouter une proprit est affiche au bas du panneau.
Mise en surbrillance de larrire-plan pendant lajout dune proprit : lorsque la

zone de texte Ajouter une nouvelle proprit est active, la ligne est surligne avec un
arrire-plan gris.
Changement de position des boutons + et - : les boutons + et - qui

apparaissent dans chaque volet du panneau CSS Designer ont t dplacs de la droite
vers la gauche afin de les rendre plus visibles.
Catgorie Personnalis renomme : la catgorie Personnalis sintitule

dsormais Plus .
Haut de la page
Modifications du flux de travail du serveur de test

Les amliorations apportes dans cette version au flux de travail du serveur de test visent faciliter et
fluidifier la modification des documents comprenant du code ct serveur en mode En direct.
Modifications relatives la configuration du serveur

la diffrence des versions prcdentes de Dreamweaver, cette nouvelle version permet de dsigner un
serveur spcifique en tant que serveur de test ou serveur distant (et non les deux). Les cases cocher
figurant dans linterface de configuration du serveur ont t remplaces par des boutons radio afin de mettre
en application cette rgle de spcification des serveurs.
Si vous ouvrez un site ou importez les paramtres dun site cr avec une version antrieure de
Dreamweaver, et quun serveur unique est dfini la fois comme serveur de test et serveur distant, ce
serveur fait lobjet de deux entres. Lune de ces entres est dsigne comme serveur distant (avec le suffixe
_remote) et lautre, comme serveur de test (avec le suffixe _testing).
Envoi automatique des fichiers dynamiques

Dreamweaver synchronise dsormais automatiquement les documents dynamiques vers votre serveur de test
ds leur ouverture, leur cration ou leur enregistrement. Dreamweaver naffiche plus les botes de dialogue
Mettre jour le serveur de test et Envoyer les fichiers dpendants dans le cadre des flux de travaux
du serveur de test.
Pour plus dinformations, voir Envoi automatique des fichiers dynamiques.
15
Haut de la page
Modification du flux de travail Business Catalyst

Lextension Business Catalyst a t retire du march et ne pourra plus tre utilise avec
Dreamweaver CC 2015 et versions ultrieures. Dreamweaver CC 2014.1.1 est la dernire dition compatible
avec lextension Business Catalyst.
Si vous souhaitez faire appel Business Catalyst avec Dreamweaver CC 2015 et versions ultrieures,
utilisez loption de connexion SFTP dans Dreamweaver. Pour plus dinformations, voir la documentation de
Business Catalyst.
Lannonce officielle de ce changement est consultable sur le site Web de Business Catalyst.
Haut de la page
Le panneau Insertion a t rorganis de manire regrouper toutes les options des
catgories Commun, Mise en forme et Mdias sous une seule et mme catgorie plus
logique : HTML.
Les mini-vidos de prsentation ont t supprimes, de mme que le lien qui permettait
de les lancer partir du menu Aide. Par ailleurs, cette option nest pas disponible pour
les langues autres que langlais.
La liste droulante disponible dans la barre de document, au bas de la page, a t

pure : dsormais, seules les options Orientation, Taille relle et Modifier les tailles y
figurent.
Les publications Twitter et Facebook ne sont pas couvertes par les dispositions Creative Commons.
Mentions lgales | Politique de confidentialit en ligne
16
Creative Cloud
17
OBTENIR DE LAIDE > ASSISTANCE CREATIVE CLOUD
Utilisation de lapplication de bureau Creative Cloud pour grer

vos applications et services
Sapplique Creative Cloud
Sommaire
Tlchargez des applications, partagez des fichiers, recherchez des polices et des images stockes, et bien plus encore depuis lapplication de
bureau Creative Cloud.
Sur cette page
Tlchargement et installation dapplications

Lapplication de bureau Adobe Creative Cloud est un emplacement central qui vous permet de grer les dizaines dapplications et de services inclus
dans votre abonnement Creative Cloud. Vous pouvez galement synchroniser et partager des fichiers, grer des milliers de polices de caractres,
accder des bibliothques dimages et de photos ou encore prsenter et dcouvrir des projets cratifs au sein de la communaut. Lapplication
de bureau Creative Cloud est votre fentre sur tout cela.
Voici comment procder pour tlcharger, installer et mettre jour vos applications laide de lapplication de bureau Creative Cloud. Pour
dcouvrir des nouveauts, vous pouvez galement parcourir les applications par popularit, catgorie ou version.
Lapplication de bureau Creative Cloud est automatiquement installe lorsque vous tlchargez votre premier produit Creative Cloud. Si vous avez
dj install Adobe Application Manager, il se met automatiquement jour vers lapplication de bureau Creative Cloud.
Dans le cas contraire, vous pouvez tlcharger manuellement lapplication depuis la page Application de bureau Creative Cloud.
Conseil :
pour tlcharger des applications sur votre appareil mobile, consultez le Catalogue des applications mobiles.
1. Pour accder lapplication de bureau Creative Cloud, cliquez sur licne Creative Cloud, situe dans la barre des tches (Windows) ou
dans la barre de menus (Mac OS).
Conseil :
par dfaut, lapplication de bureau Adobe Creative Cloud se lance lorsque vous vous connectez votre ordinateur. Si licne Creative Cloud
nest pas affiche, vous devrez srement quitter puis relancer lapplication. Voici comment procder :
18
Windows : cliquez sur Dmarrer > Programmes > Adobe Creative Cloud.
Mac OS : cliquez sur Aller > Applications > Adobe Creative Cloud > Adobe Creative Cloud.
2. Sil nest pas dj slectionn, cliquez sur longlet Apps. Les applications rcemment installes sur votre ordinateur saffichent dans la partie
suprieure du panneau. La liste peut inclure des versions prcdemment installes.
3. Faites dfiler la liste vers le bas pour dcouvrir dautres applications. Vous pouvez galement filtrer la liste par catgorie ou par version de
logiciel.
19
4. Cliquez sur Installer ou Mettre jour.
5. Pour tlcharger et installer une version antrieure dune application, slectionnez Version prcdente, puis choisissez une version dans le
menu Installer.
Conseil :
le tlchargement de lapplication peut prendre un certain temps, en fonction de votre connexion Internet et de lordinateur utilis.
Pour obtenir des informations dtailles, par exemple pour savoir comment lancer une application, reportez-vous la page Tlchargement et
installation dapplications Creative Cloud.
Synchronisation et partage de fichiers

Synchronisez les fichiers stocks sur votre ordinateur vers Creative Cloud, afin quils soient accessibles o que vous soyez. Ainsi, les fichiers
deviennent instantanment disponibles sur lensemble de vos appareils et ordinateurs connects, ainsi que sur votre page Creative Cloud
Files. Pour synchroniser des fichiers, tlchargez et installez lapplication de bureau Creative Cloud sur tous vos ordinateurs.
20
Pour synchroniser des fichiers, utilisez lune des mthodes suivantes :

Copiez, collez ou dplacez vos fichiers vers le dossier ou rpertoire Creative Cloud Files de lordinateur.
Vous pouvez ouvrir ce dossier ou rpertoire Creative Cloud Files depuis lapplication de bureau Creative Cloud, en cliquant sur longlet Actifs
puis sur le panneau Fichiers et enfin sur Ouvrir le dossier.
Au sein dune application, slectionnez Fichier > Enregistrer ou Fichier > Enregistrer sous, puis accdez au dossier ou rpertoire
Creative Cloud Files de lordinateur.
Les fichiers originaux sont toujours sur votre ordinateur ou priphrique. Les fichiers sont synchroniss via Creative Cloud vers tous les
priphriques connects.
Vous pouvez consulter vos fichiers en ligne sur la page Actifs Creative Cloud. Une fois les fichiers synchroniss, vous navez pas besoin dtre en
ligne et vous pouvez les consulter partir du dossier ou rpertoire Creative Cloud Files sur votre ordinateur.
Pour savoir comment utiliser les fichiers chargs sur Creative Cloud, reportez-vous la page Gestion des actifs et des fichiers.

Vous pouvez utiliser les polices Typekit dans toutes vos applications Creative Cloud ainsi que dans dautres programmes logiciels.
Choisissez une police de caractres cre par lun des nombreux partenaires Typekit, puis synchronisez-la sur votre ordinateur via Creative Cloud.
Les polices synchronises peuvent tre utilises dans toutes les applications Creative Cloud ainsi que dans dautres logiciels de bureautique.
21
Vous devez disposer dun abonnement payant Creative Cloud ou dun compte Typekit admissible pour synchroniser des polices sur votre
ordinateur de bureau.
Le panneau Polices prsente les polices synchronises sur votre ordinateur. Pour synchroniser des polices, effectuez les oprations suivantes :
1. Dans lapplication de bureau Creative Cloud, cliquez sur longlet Actifs puis sur le panneau Polices.
2. Cliquez sur Ajouter des polices depuis Typekit. Une fentre Typekit souvre dans le navigateur.
Si vous utilisez Typekit pour la premire fois, cliquez sur Je dbute sur Typekit et suivez les invites qui saffichent pour configurer votre
compte.
3. Dans la fentre Typekit, placez la souris sur la fiche dune police et cliquez sur + Utiliser les polices.
4. Slectionnez les polices de la famille choisie et cliquez sur Synchroniser les polices slectionnes.
Des questions sur la synchronisation des polices ? Retrouvez la procdure dtaille ici.
Recherche dlments sur Adobe Stock

Vous pouvez rechercher des images sur Adobe Stock directement depuis lapplication de bureau Creative Cloud.
Adobe Stock est un service qui propose aux designers et aux entreprises prs de 40 millions de photos, illustrations et images vectorielles
certifies de grande qualit et libres de droits, pour tous leurs projets cratifs. Vous pouvez acheter des images lunit, quand le besoin se
prsente, ou opter pour un abonnement incluant un certain nombre dimages.
22
1. Dans longlet Stock, entrez les mots-cls souhaits et cliquez sur OK.
2. Si le site vous y invite, indiquez votre date de naissance et cliquez sur Mettre jour.
Vous accdez alors une page du site web Adobe Stock sur laquelle figurent toutes les images correspondant votre recherche.
Adobe Stock et Bibliothques Creative Cloud
23
Vous pouvez slectionner une image sur le site web Adobe Stock et ajouter son aperu avec tatouage numrique toutes vos bibliothques. Dans
les applications Creative Cloud prenant en charge les bibliothques (Photoshop, Illustrator, InDesign, Premiere Pro et After Effects), il vous suffit
ensuite de faire glisser cette image marque depuis le panneau Bibliothques vers votre projet. Quand vous le souhaitez, vous pouvez galement
acheter les droits de limage directement depuis le panneau Bibliothques de lapplication de bureau Creative Cloud.
Lorsque vous achetez les droits dune image, les applications Creative Cloud compatibles avec les actifs lis aux bibliothques (Photoshop,
Illustrator et InDesign) mettent automatiquement jour toutes les instances lies de cette image pour les remplacer par la version haute
rsolution, sans le tatouage numrique.
Pour plus dinformations, reportez-vous la page Utilisation dAdobe Stock .
Recherche de ressources de cration avec Market

Creative Cloud Market est un ensemble de ressources certifies de haute qualit, mises au point par des cratifs, pour des cratifs. Les abonns
Creative Cloud peuvent accder gratuitement aux actifs depuis le portail Market, aussi bien depuis un ordinateur de bureau quun appareil mobile
(via les applications connectes Creative Cloud), et faire leur choix parmi une slection exceptionnelle dillustrations vectorielles, dicnes, de
motifs, de kits dinterface utilisateur, et bien plus encore. Chaque mois, un abonn Creative Cloud peut tlcharger jusqu 500 actifs exclusifs et
libres de droits. Ce nouveau service performant permet aux cratifs de trouver trs facilement les ressources quil leur faut, puis de les amliorer,
les manipuler et les modifier afin de lancer leur processus de cration.
24
Pour plus dinformations, reportez-vous la page Actifs Creative Cloud Market.
Partage et dcouverte de projets avec Behance

Prsentez et dcouvrez des projets cratifs sur Behance. En tant que membre, vous pouvez crer un portfolio regroupant vos travaux et le diffuser
grande chelle de manire efficace. Vous pouvez galement dcouvrir les derniers travaux de designers du monde entier en parcourant les
uvres mises en avant ou les plus populaires dans tous les domaines de cration.
Connectez-vous ou crez-vous un compte pour accder votre fil dactualit ainsi qu votre portfolio Behance et partager ou dcouvrir de
nouveaux travaux. Si vous possdez dj un compte, vous serez invit vous connecter. Si vous ne possdez pas encore de compte, vous
pouvez en crer un de manire simple et rapide.
Mme si vous ne possdez pas de compte Behance, vous pouvez parcourir les projets et les travaux en cours depuis lapplication de bureau
Creative Cloud, partir du panneau Communaut.
25
Pour plus dinformations, reportez-vous la page Partage sur Behance ou rendez-vous sur le forum de la communaut Adobe Behance.
Accueil et fil dactualit

Le fil dactualit figurant sur le panneau Accueil de lapplication de bureau Creative Cloud prsente vos interactions avec Creative Cloud. Il vous
informe sur les diffrents vnements et activits, tels que la sortie de nouvelles applications, les mises jour ou encore le statut des installations.
26
Connexion pour activer Creative Cloud
Activation et dsactivation de Creative Cloud
Pour activer Creative Cloud, connectez-vous simplement lapplication avec votre Adobe ID. Quand vous vous identifiez, vous activez la licence
Creative Cloud ainsi que lensemble des applications et services associs votre Adobe ID. Vous pouvez ensuite utiliser vos applications et services
normalement.
Pour vous connecter, cliquez sur licne Creative Cloud, situe dans la barre des tches (Windows) ou dans la barre de menus (Mac OS),
afin douvrir lapplication de bureau Adobe Creative Cloud.
Entrez votre Adobe ID (gnralement votre adresse e-mail) et votre mot de passe, puis cliquez sur Se connecter. (Si lapplication de
bureau Creative Cloud souvre, cela signifie que vous tes dj connect.)
Vous pouvez maintenant faire appel aux services Creative Cloud, installer des applications Creative Cloud et lancer des applications Creative
Cloud prcdemment installes.
Pour dsactiver Creative Cloud, vous devez vous dconnecter. Quand vous vous dconnectez, lensemble des applications installes et services
Creative Cloud associs votre Adobe ID sur cet ordinateur sont dsactivs. Les applications restent installes mais ne sont plus connectes une
licence valide. Reconnectez-vous pour ractiver la licence et utiliser nouveau les applications et services.
Pour vous dconnecter, ouvrez lapplication de bureau Creative Cloud, cliquez sur la roue dente et slectionnez Prfrences. Cliquez sur
Gnral puis sur Se dconnecter.
Lensemble des applications et services Creative Cloud associs votre Adobe ID sont alors dsactivs sur cet ordinateur.
Pour obtenir des instructions dtailles, reportez-vous la page Connexion et dconnexion pour activer des applications Creative Cloud.
Prfrences
Pour ouvrir la bote de dialogue Prfrences de lapplication de bureau Creative Cloud, cliquez sur la roue dente et slectionnez Prfrences.
27
La bote de dialogue Prfrences propose diffrentes options permettant de personnaliser et dadapter Creative Cloud, notamment pour changer la
langue dinstallation des logiciels, rgler les paramtres des services Creative Cloud ou encore vous dconnecter, si vous avez besoin de dsactiver
temporairement votre compte.
Pour dsactiver lensemble des applications et services Creative Cloud associs votre Adobe ID, cliquez sur Gnral puis sur
Se dconnecter. Quand vous vous dconnectez, lensemble des applications installes et services Creative Cloud associs votre Adobe ID
sont dsactivs.
Pour activer les mises jour automatiques, slectionnez Toujours appliquer les mises jour de Creative Cloud pour bureau.
Pour changer la langue dinstallation des logiciels ou leur emplacement dinstallation, cliquez sur Prfrences > Creative Cloud > Apps.
Pour obtenir des instructions dtailles, reportez-vous la page Modification du paramtre de langue de vos applications Creative Cloud.
Pour connecter vos travaux avec le rfrentiels Adobe Experience Manager (AEM) Assets, slectionnez Se connecter AEM Assets. Pour
plus dinformations, reportez-vous la page AEM Assets.
Utilisez les onglets Fichiers, Polices et Behance pour modifier les diffrents paramtres.
Pour afficher les notifications envoyes par Adobe, activez loption Afficher les notifications OS dans chaque onglet.
Was this helpful?
Yes
No
By clicking Submit, you accept the Adobe Terms of Use.
^ Haut de la page
Articles connexes
Tlchargement et installation dapplications Creative Cloud
Mise jour dapplications Creative Cloud
Dsinstallation ou suppression dapplications Creative Cloud
Connexion et dconnexion pour activer des applications Creative Cloud
Assistance Creative Cloud

Consultez le manuel en ligne, regardez des tutoriels ou demandez de laide. En savoir plus.
Encore besoin daide ?
Interroger la communaut
Posez vos questions et obtenez des rponses des experts.
Solliciter la communaut
28
Nous contacter
Notre quipe de support se tient votre disposition pour vous aider.
Obtenir de laide
Choisir une autre rgionFrance (Modifier)
Choisissez votre rgion
La langue et/ou le contenu du site Adobe.com varient en fonction de la rgion slectionne.
Americas Brasil Canada - English Canada - Franais Latinoamrica Mxico United States Europe, Middle East and Africa Africa English Belgi Belgique Belgium - English esk republika Cyprus - English Danmark Deutschland Eastern Europe English Eesti Espaa France Greece - English Hrvatska Ireland Israel - English Italia Latvija Lietuva Luxembourg - Deutsch Luxembourg English Luxembourg - Franais Magyarorszg Malta - English Middle East and North Africa - English Moyen-Orient et Afrique du Nord Franais Nederland Norge sterreich Polska Portugal Romnia Schweiz Slovenija Slovensko Srbija Suisse Suomi Sverige Svizzera Trkiye
United Kingdom -
Asia - Pacific Australia Hong Kong S.A.R. of China India - English New
Zealand Southeast Asia (Includes Indonesia, Malaysia, Philippines, Singapore, Thailand, and Vietnam) - English
Commonwealth of Independent States Includes Armenia, Azerbaijan, Belarus, Georgia, Kazakhstan, Kyrgyzstan,
Moldova, Tajikistan, Turkmenistan, Ukraine, Uzbekistan
Produits Tlchargements Support et formation Socit
Copyright 2015 Adobe Systems Software Ireland Ltd. All rights reserved.
Politique de confidentialit Conditions d'utilisation Cookies ChoixdePub
29
Exploration, synchronisation et gestion dactifs

Exploration dactifs
Synchronisation ou chargement de fichiers
Suppression de fichiers
Formules et quota de stockage
Rsolution des problmes
Votre compte Adobe Creative Cloud est fourni avec un espace de stockage en ligne pour que vous puissiez
accder vos fichiers partout et partir de nimporte quel priphrique ou ordinateur. Vous pouvez
prvisualiser de nombreux types de fichiers de cration directement dans un navigateur web, sur votre
ordinateur, votre tablette ou votre smartphone. Il sagit notamment des types de fichiers suivants : PSD, AI,
INDD, JPG, PDF, GIF, PNG, Photoshop Touch et Ideas.
Avec lapplication de bureau Adobe Creative Cloud, tous les fichiers restent synchroniss : chaque ajout,
modification ou suppression est rpercut sur tous les ordinateurs et priphriques connects. Par exemple,
si vous chargez un fichier .ai via la page Actifs Creative Cloud, celui-ci est automatiquement tlcharg sur
tous les ordinateurs connects.
Haut de la page
Exploration dactifs
Vos actifs Creative Cloud comprennent les fichiers synchroniss avec votre poste de travail, les actifs crs
avec les applications mobiles connectes Creative Cloud et les actifs du service Bibliothques Creative
Cloud. Vous pouvez parcourir tous ces lments via la page Actifs Creative Cloud, dans laquelle ils sont
classs de la faon suivante :
Fichiers : prsente les actifs synchroniss avec le rpertoire Creative Cloud Files sur votre bureau.
Crations mobiles : prsente les actifs crs partir des applications mobiles connectes Creative Cloud.
Bibliothques : prsente les bibliothques de conception que vous avez vous-mme cres.
Remarque : les actifs de bureau (sous Fichiers) permettent diverses oprations : renommer, partager,
tlcharger, remplacer ou encore archiver. En revanche, sur la page Actifs Creative Cloud, vous ne pouvez
que consulter les actifs qui se trouvent sous Crations mobiles et Bibliothques.
30
Quand vous cliquez sur une catgorie dactifs, celle-ci se dveloppe pour prsenter ses sous-catgories (le
cas chant). Par exemple, les actifs situs sous Fichiers sont classs selon les sous-catgories Tout,
Partags et Archivs.
Tout : prsente tous les fichiers synchroniss avec le rpertoire Creative Cloud
Files.
Partags : prsente les fichiers partags entre vous et dautres utilisateurs de
Creative Cloud.
Archivs : prsente les fichiers supprims.
De mme, vous pouvez parcourir les actifs crs laide des applications
mobiles Creative Cloud dans la section Crations mobiles, o ils sont rpartis
selon lapplication utilise.
Pour plus dinformations sur les bibliothques, reportez-vous la section
Bibliothques Creative Cloud.
Haut de la page
Synchronisation ou chargement de fichiers

Pour synchroniser des fichiers depuis votre ordinateur, effectuez lune des oprations suivantes :
Copiez, collez ou dplacez vos fichiers vers le rpertoire Creative Cloud Files sur votre
poste de travail.
Au sein dune application, slectionnez Fichier > Enregistrer ou Fichier >
Enregistrer sous, puis accdez au rpertoire Creative Cloud Files.
Pour ouvrir le rpertoire Creative Cloud Files depuis lapplication de bureau Creative Cloud, slectionnez
Actifs > Fichiers et cliquez sur Ouvrir le dossier.
31
Remarque : les fichiers dont le nom contient des caractres spciaux tels que | " ? < > / * ou : ne sont pas
synchroniss, de mme que les fichiers portant un nom rserv comme AUX ou Com1. En cas derreur,
renommez le fichier avant de le synchroniser vers Creative Cloud. Pour plus dinformations, reportez-vous
la page Erreur : Impossible de synchroniser les fichiers.
Vous pouvez galement charger des fichiers directement sur la page Actifs Creative Cloud en appliquant
lune des mthodes suivantes.
Chargez et grez vos fichiers sur Creative Cloud en

utilisant le menu Actions de la page Actifs Creative
Cloud.
Faites glisser des actifs depuis le bureau vers la
page Actifs Creative Cloud.
Remplacement dun fichier

Lorsque vous chargez nouveau un fichier, une nouvelle version est cre et remplace la prcdente.
32
Creative Cloud conserve galement une copie de chacune des modifications apportes aux fichiers et
synchronises via Photoshop Touch, Adobe Ideas ou lapplication de bureau Creative Cloud.
Pour remplacer un fichier via la page Actifs Creative Cloud, procdez comme suit :
Remarque : le type de fichier doit tre identique celui du fichier remplacer. Ainsi, vous ne pouvez pas
remplacer un fichier .PSD par un fichier .AI.
Pour plus dinformations sur le contrle des versions, reportez-vous la page FAQ sur le contrle des
versions.
1. Recherchez le fichier concern et ouvrez-le.
2. Slectionnez Actions > Remplacer ou faites glisser le fichier depuis le dossier vers la
fentre du navigateur.
Haut de la page
Suppression de fichiers
Vous pouvez supprimer des fichiers du site web de Creative Cloud ou des Adobe Touch Apps. Vous avez
galement la possibilit dutiliser les commandes du systme dexploitation pour supprimer des fichiers du
rpertoire Creative Cloud Files sur votre bureau. Toutes les suppressions de fichiers sont synchronises avec
votre compte, et les fichiers sont archivs dans Creative Cloud. Les fichiers dorigine sont toujours prsents
sur votre ordinateur, tandis quune copie reste disponible dans Creative Cloud pour que vous puissiez y
accder o que vous soyez.
Les fichiers archivs continuent occuper lespace de stockage en ligne. Vous pouvez supprimer
dfinitivement ou restaurer les fichiers du dossier Archive. Toute suppression dfinitive permet de librer de
la capacit de stockage.
Suppression dfinitive ou restauration de fichiers

La suppression dfinitive dactifs seffectue en deux tapes :
Vous pouvez galement restaurer un fichier archiv :
1. Archivez un fichier de votre rpertoire Fichiers Creative Cloud sur votre poste de travail,
dans les applications tactiles compatibles avec Creative Cloud ou sur la page Actifs
Creative Cloud. Les fichiers archivs sont envoys dans la catgorie Archivs de la
section Mes actifs > Fichiers.
2. Sur la page Archivs, slectionnez les fichiers liminer et cliquez sur Supprimer
dfinitivement.
3. Dans la bote de dialogue de confirmation, cliquez sur Supprimer dfinitivement.
1. Sur la page Archivs, slectionnez les fichiers rcuprer et cliquez sur Restaurer.
2. Dans la bote de dialogue de confirmation, cliquez sur Restaurer.
33
Haut de la page
Formules et quota de stockage

Votre quota de stockage dpend de votre abonnement Creative Cloud.
Formule dabonnement
Quota de stockage
disponible
Gratuite
2 Go
Creative Cloud (Photographie)
2 Go
Creative Cloud (Formule mono-applicative ou Pack

complet)
20 Go
Creative Cloud abonnement quipe
100 Go
Pour connatre lespace de stockage dont vous disposez, ouvrez longlet Fichiers dans le panneau Actifs de
lapplication de bureau Creative Cloud ou consultez la section Paramtres de la page Activit Creative Cloud.
Capacit de stockage dans lapplication de bureau

Creative Cloud
Capacit de stockage sur la page Paramtres
Creative Cloud peut synchroniser jusqu 1 Go dexcdent depuis nimporte quel priphrique. Pass ce
seuil, lapplication de bureau arrte de synchroniser les nouveaux fichiers et affiche une notification indiquant
que le quota est dpass. Un point dexclamation rouge signale tous les fichiers qui nont pas pu tre
chargs. Vous pouvez toujours dplacer, renommer ou supprimer des fichiers. Pour que la synchronisation
puisse reprendre, supprimez quelques fichiers de manire dfinitive afin de librer de lespace.
Remarque : une petite partie de lespace total est utilise des fins administratives, par consquent
lespace de stockage rellement disponible sera lgrement rduit. Cela varie de 100 500 Ko en fonction
du nombre de fichiers utilisateur.
Haut de la page
Rsolution des problmes

Solliciter la communaut
Contact
Voir aussi
Publiez des messages,

discutez avec les autres
utilisateurs et faites
partie de notre
Accdez cette page

pour entrer en relation
avec nos experts.
34
Prise en main du service

Actifs Creative Cloud
Partage de fichiers et dossiers
Collaboration par partage de

dossiers
exceptionnelle
communaut.
Synchronisation et partage de
fichiers avec des
collaborateurs (vido, 10 min)
Etat dAdobe Creative Cloud
Erreur : Impossible de
synchroniser les fichiers
FAQ sur le contrle des
versions
35

Typekit est un service avec abonnement qui permet daccder
une immense bibliothque de polices utilisables dans des
applications de bureau et sur des sites web.
Une formule Typekit Portfolio est incluse dans votre abonnement
Creative Cloud. Quant aux titulaires dun abonnement gratuit
Creative Cloud, ils ont accs une slection de polices Typekit
utilisables sur le web et sur leur poste de travail.
Abonnez-vous Creative Cloud

(formule complte, monoapplicative ou gratuite) ou une
formule Typekit autonome pour
synchroniser des polices avec
votre ordinateur de bureau. Pour
plus dinformations, reportez-vous
la page de prsentation de
Typekit et prenez connaissance
des formules Typekit.
Prise en main
Recherche et ajout de polices depuis Typekit
Utilisation de polices synchronises
Gestion des polices synchronises
Haut de la page
Prise en main
Vous pouvez choisir une police de caractres cre par lun des nombreux partenaires Typekit, puis la
synchroniser avec votre ordinateur via Creative Cloud (ou lutiliser sur le web). Les polices synchronises
peuvent tre utilises au sein de toutes les applications Creative Cloud, parmi lesquelles Photoshop et
InDesign, ainsi que dans dautres applications de bureau telles que MS Word.
Lapplication de bureau Creative Cloud doit tre installe sur votre ordinateur pour que vous puissiez
synchroniser les polices. Si tel nest pas le cas, vous devez la tlcharger et linstaller. Pour plus
dinformations, reportez-vous la page Creative Cloud sur votre bureau.
Par dfaut, Typekit est activ, afin de pouvoir synchroniser les polices et les rendre disponibles dans vos
applications de bureau.
ce stade, si vous avez dj slectionn des polices synchroniser dans votre navigateur web, elles
commencent automatiquement se synchroniser avec votre ordinateur.
Haut de la page
Recherche et ajout de polices depuis Typekit
Vous pouvez accder la bibliothque Typekit depuis plusieurs endroits. Utilisez une ou plusieurs des
mthodes suivantes pour intgrer au mieux la slection de nouvelles polices dans votre workflow
existant.
Depuis lapplication de bureau

Creative Cloud :
Depuis une application avec

fonctionnalit Typekit intgre :
36
Directement sur le site web

Typekit.com :
Dans longlet Polices, cliquez sur

Ajouter des polices depuis
Typekit. Une fentre de
navigateur souvre et vous tes
connect Typekit.com.
Dans le menu de polices de

lapplication, cliquez sur Ajouter
des polices depuis Typekit. Une
fentre de navigation souvre
directement dans lapplication.
laide de votre Adobe ID et de

votre mot de passe, connectezvous Typekit.com.
Vous pouvez rechercher les polices souhaites ou y accder en utilisant des filtres. La disponibilit dune
police donne est indique sur sa fiche.
Disponibilit indique sur la fiche de chaque police

A. Web et poste de travail B. Web
Cliquez sur une fiche de police individuelle pour en savoir plus sur la police en question et voir des
exemples de caractres dans tous les styles et toutes les paisseurs disponibles.
37
Cliquez sur Utiliser les polices. Dans la fentre Utiliser cette famille, indiquez lemplacement sur le
bureau o vous souhaitez synchroniser la police ou ajoutez-la dans un kit en vue de lutiliser sur le web.
Slectionnez les styles dont vous avez besoin dans la famille de polices, puis cliquez sur Synchroniser
les polices slectionnes.
Les polices sont synchronises vers tous les ordinateurs sur lesquels vous avez install lapplication Creative
Cloud. Pour voir ces polices, ouvrez lapplication Creative Cloud, puis cliquez sur le panneau Polices.
38
Haut de la page
Utilisation de polices synchronises

Pour utiliser les polices que vous avez synchronises, ouvrez simplement lapplication de bureau de votre
choix et accdez au menu de polices. Les polices synchronises apparaissent dans la liste des options.
Certaines applications de bureau telles que Microsoft Office peuvent ncessiter un redmarrage aprs la
synchronisation dune nouvelle police.
Affichage des polices synchronises depuis Typekit dans le menu de polices dInDesign
Pour plus dinformations sur lutilisation de polices Typekit dans une application Creative Cloud, reportezvous aux pages suivantes :
Utilisation de polices
Typekit dans
InDesign CC
Typekit dans
Illustrator CC
Typekit dans Premiere
Typekit dans After
Typekit dans
Photoshop CC
39
Pro CC
Effects CC
Haut de la page
Gestion des polices synchronises

Vous pouvez afficher les polices synchronises sur votre ordinateur laide du panneau Polices de
lapplication Adobe Creative Cloud ou partir de votre compte Typekit.com.
Suppression de polices synchronises
Pour supprimer des polices synchronises de votre ordinateur :

1. Dans le panneau Polices dAdobe Creative Cloud, cliquez sur Grer les polices. La page
Polices synchronises souvre dans une fentre de navigateur. Vous pouvez aussi vous
connecter Typekit.com et accder directement la page Polices synchronises.
2. Sur la droite de toutes les polices que vous ne souhaitez plus utiliser, cliquez sur
Supprimer.
Dsactivation de Typekit
Vous pouvez choisir dactiver ou de dsactiver la synchronisation des polices. Si vous choisissez de la
dsactiver, les polices ne sont plus synchronises, et toutes les polices synchronises prcdemment sont
supprimes de votre ordinateur.
1. Dans lapplication de bureau Creative Cloud, cliquez sur
Cloud.
> Prfrences > Creative
2. Cliquez sur Polices.

3. Pour activer ou dsactiver la synchronisation des polices, slectionnez On ou Off dans
les paramtres Typekit.
Utilisation de Typekit hors ligne
Si vous passez hors ligne pendant que lapplication Creative Cloud est en cours dexcution et que vous tes
40
connect, les polices synchronises pourront toujours tre utilises. Toute modification apporte la
slection de synchronisation de polices sur Typekit.com ne seffectuera quune fois la connexion rtablie.
Si vous lancez lapplication Creative Cloud alors que vous tes hors ligne, les polices ne seront pas
disponibles et ne seront pas affiches dans les menus de polices standard.
Articles connexes
Synchronisation de polices sur le bureau | Typekit.com
Ajout de polices dans les applications de bureau via Creative Cloud
41

Creative Cloud Market est un ensemble de ressources certifies de haute qualit, mises au point par des
cratifs, pour des cratifs. Le service est accessible pour tous les titulaires dun abonnement Creative Cloud
payant, lexception des clients ayant opt pour une formule spciale photo. Les membres Creative Cloud
peuvent accder gratuitement aux actifs depuis le portail Market, aussi bien depuis un ordinateur de bureau
quun appareil mobile (via les applications connectes Creative Cloud), et faire leur choix parmi une slection
exceptionnelle dillustrations vectorielles, dicnes, de motifs, de kits dinterface utilisateur, et bien plus encore.
Chaque mois, un abonn Creative Cloud peut tlcharger jusqu 500 actifs exclusifs et libres de droits. Ce
nouveau service performant vous permet de trouver trs facilement les ressources quil vous faut, puis de les
amliorer, les manipuler et les modifier afin de lancer votre processus de cration.
Pour accder Market, vous devez dabord installer lapplication de bureau Creative Cloud ou une
application mobile prise en charge telle que Adobe Photoshop Sketch. Pour savoir comment la tlcharger,
reportez-vous la page Application de bureau Creative Cloud. Regardez ce bref tutoriel vido pour en savoir
plus : Accs aux ressources de conception Creative Cloud Market.
Haut de la page
Recherche et tlchargement de ressources de cration

Depuis lapplication de bureau Creative Cloud, vous pouvez accder des milliers dactifs de haute qualit.
Cliquez sur Actifs > Market. Vous pouvez galement dvelopper la liste droulante pour effectuer une
recherche par catgorie, ou bien lancer une recherche par mots-cls pour trouver les actifs les mieux
adapts votre projet.
1. Dans lapplication de bureau Creative Cloud, cliquez sur Actifs > Market.
2. Creative Cloud Market comprend une slection de ressources certifies de haute qualit,
couvrant les catgories suivantes :
Pour positionnement : modles photo et numriques avec calques organiss et
masquage professionnel (fichiers PSD)
Interfaces utilisateur : fichiers PSD avec calques, comprenant des kits complets,
des formulaires, des graphiques, des lments de navigation et des widgets pour le
web et les appareils mobiles (fichiers PSD)
Formes vectorielles : formes et objets volutifs qui sintgrent Photoshop,
InDesign et Illustrator (fichiers SVG)
Icnes : srie de symboles plats, en 3D, de glyphes et de contours destins
limpression, au web et la signalisation (fichiers PNG/SVG)
Motifs : motifs et arrire-plans gomtriques, illustrs et texturs qui se rptent
linfini (fichiers PNG/SVG)
Formes : supports naturels de haute qualit et formes Photoshop abstraites
(fichiers ABR/TPL)
Pour filtrer les actifs, slectionnez une catgorie dans le menu contextuel Market.
42
3. Pour rechercher des actifs en particulier, cliquez sur
et entrez un terme de recherche.
Vous pouvez filtrer et trier les rsultats de la recherche.

4. Cliquez sur la vignette dun actif pour obtenir des informations complmentaires et des
dtails son sujet.
5. Cliquez sur Tlcharger et choisissez une bibliothque dans laquelle tlcharger lactif.
Vous pouvez galement crer une nouvelle bibliothque. Pour plus dinformations,
reportez-vous la section Bibliothques Creative Cloud.
En plus de la bibliothque, les actifs sont galement tlchargs automatiquement dans
43
le sous-dossier Tlchargements Market de votre dossier principal Creative Cloud Files.
Haut de la page
FAQ
Comment bnficier de Creative Cloud Market ?
Creative Cloud Market est accessible pour tous les titulaires dun abonnement Creative Cloud payant,
lexception des clients ayant opt pour une formule spciale photo (Photographie Photoshop ou
Photographie Creative Cloud). Pendant une priode limite, Adobe Creative Cloud Market est accessible
pour tous les membres de Creative Cloud par le biais de lapplication Adobe Sketch pour iPad. Les
titulaires dun abonnement Creative Cloud gratuit ou dune formule spciale photo peuvent parcourir
Market via lapplication de bureau Creative Cloud mais ne peuvent pas tlcharger son contenu. Pour
tlcharger et utiliser le contenu de Creative Cloud Market, passez une formule suprieure avec un
abonnement mono-applicatif ou complet Creative Cloud.
Pourquoi les clients ayant souscrit un abonnement spcial photo nont-ils pas accs Creative
Cloud Market ?
Creative Cloud Market est un nouvel avantage disponible dans le cadre de certains abonnements
Creative Cloud payants ; il nest pas accessible aux clients ayant opt pour une formule spciale photo.
Certains services Creative Cloud, tels que Creative Cloud Market, TypeKit et ProSite, sont uniquement
disponibles dans le cadre des abonnements mono-applicatifs ou complets Creative Cloud. Pour
tlcharger et utiliser le contenu de Creative Cloud Market, passez une formule suprieure avec un
abonnement mono-applicatif ou complet Creative Cloud.
Dois-je imprativement disposer dun abonnement Creative Cloud ?
Creative Cloud Market est accessible pour tous les titulaires dun abonnement Creative Cloud payant.
Cela concerne aussi bien les titulaires dun abonnement mono-applicatif que complet (quelle que soit la
formule : utilisateur individuel, quipe, ducation ou Entreprise). Pour accder Creative Cloud Market,
les utilisateurs doivent passer par lapplication de bureau Creative Cloud.
Les titulaires dune formule Creative Cloud spciale photo ne peuvent pas du tout accder Market via
lapplication de bureau Creative Cloud. Les titulaires dun abonnement gratuit peuvent parcourir les actifs
Market via lapplication de bureau Creative Cloud mais ne peuvent pas les tlcharger.
Les actifs tlchargs sont-ils comptabiliss dans mon quota de stockage ?

Oui. Les actifs tlchargs sont stocks dans votre dossier Creative Cloud Files et sont comptabiliss
dans votre capacit de stockage. Si vous dpassez le quota fix, vous ne pourrez plus tlcharger aucun
actif tant que vous naurez pas supprim danciens fichiers pour librer un peu despace. Reportez-vous
44
la page Gestion et synchronisation des fichiers.

Puis-je utiliser ces actifs dans mes projets ?
Oui. Ces actifs exclusifs et libres de droits sont utilisables au sein de vos projets.
Puis-je copier ou sauvegarder ces actifs afin de les rutiliser ultrieurement ?
Oui, vous pouvez effectuer une sauvegarde des actifs tlchargs depuis Creative Cloud Market en vue
dune utilisation ultrieure.
Aprs avoir tlcharg des actifs, puis-je les partager ?
Non. Mme si les actifs sont libres de droits pour tous les abonns Creative Cloud ligibles qui peuvent
les utiliser dans leurs publications, productions et projets, il nest pas possible de les partager ni de les
redistribuer.
Comment Adobe obtient-elle le contenu propos sur Creative Cloud Market ?
Adobe se procure ce contenu auprs des meilleurs cratifs du secteur directement sur Behance, premire
plate-forme en ligne gratuite pour la prsentation et la dcouverte de projets cratifs.
Comment faire pour que mes travaux soient proposs dans Creative Cloud Market ?
Pour attirer lattention sur leur travail, Adobe recommande tous les artistes potentiels de publier leurs
crations sur Behance. Adobe recherche constamment de nouvelles uvres sur Behance avant de les
certifier.
45
Creative Cloud Extract

Utilisez le module Extraction Creative Cloud pour transformer encore plus facilement
vos conceptions Photoshop en code. Avec Extraction, les designers et dveloppeurs
Web peuvent convertir des conceptions Web en code exploitable et ce, de manire
bien plus simple et plus efficace.
Les compositions Photoshop sont couramment utilises pour partager des spcifications de projet avec des
dveloppeurs Web ; ceux-ci doivent alors convertir la conception originale en code HTML et CSS. Un projet
se droule gnralement de la manire suivante : les designers crent des compositions Photoshop pour des
pages Web ou mobiles. Les concepteurs prparent ensuite le fichier PSD destin aux dveloppeurs, en
crant des actifs et des spcifications dtailles. Les dveloppeurs Web doivent alors transformer ces actifs
et lments de conception en code.
Le module Extraction permet de repenser totalement ce processus : les designers Web peuvent exporter des
actifs optimiss en un temps record dans Photoshop CC, mais aussi partager leurs fichiers PSD via le
service Actifs Creative Cloud pour que les dveloppeurs soient en mesure dobtenir des informations de
conception cls et de tlcharger des actifs depuis le navigateur. Les dveloppeurs peuvent ensuite accder
ces informations dans Dreamweaver CC et les appliquer au fur et mesure quils rdigent leur code.
Le module Extraction est une fonctionnalit Creative Cloud qui peut tre utilise diffrents stades du
processus de transformation des compositions PSD en code. Avec Extraction, vous tes libre dutiliser les
outils et les technologies que vous matrisez le mieux pour transformer de simples ides en rsultats
concrets.
Les designers peuvent ainsi utiliser lenvironnement familier de Photoshop CC pour dfinir
et extraire des actifs dimages partir de calques ou de groupes de calques.
Les dveloppeurs Web peuvent accder aux fichiers PSD via le service Actifs Creative
Cloud et utiliser le module Extraction pour exporter des actifs dimages, des mesures et
des styles CSS. Ces actifs et styles CSS peuvent ensuite tre utiliss pour transformer
46
des compositions en code.

Designers comme dveloppeurs peuvent utiliser le module Extraction partir de
Dreamweaver, afin de bnficier dune solution autonome complte incluant des
indications de code contextuelles, la possibilit dextraire des actifs et bien dautres
fonctionnalits, et ce, directement dans lenvironnement de codage.
Extraction dactifs dans

Photoshop
Extraction dans le service Actifs

Creative Cloud
Les designers qui crent des

compositions Photoshop peuvent
rapidement dfinir et regrouper des
actifs dimages partir de calques ou
de groupes de calques grce une
interface visuelle simple, dveloppe
sur la base dAdobe Generator. Les
dlais de production sont ainsi
largement rduits, ce qui laisse plus
de temps pour la conception en ellemme.
Les designers Web peuvent partager

des fichiers PSD directement via le
service Actifs Creative Cloud,
accessible dans le navigateur. Ainsi,
les dveloppeurs peuvent rapidement
extraire des informations de
conception (couleurs, dgrads,
polices, texte, code CSS...) qui
faciliteront le passage de la
composition au code. En outre, il est
possible dexporter des images PNG,
SVG et JPG optimises pour le Web.
Extraction dans Dreamweaver

Extract for Brackets (Preview)
Les designers et dveloppeurs Web

peuvent dsormais consulter des
fichiers PSD dans Dreamweaver et
avoir recours des indications de
code contextuelles pour dfinir
facilement les polices, couleurs et
dgrads dans le code CSS. Ils
peuvent galement faire glisser des
images optimises dans la zone
daperu en direct, copier du texte, et
plus encore.
Lintgration de la fonction
dextraction dans Brackets permet de
bnficier de toute la puissance du
module dans un diteur de code
simple et moderne. Extract for
Brackets (Preview) permet dextraire
les informations de conception dun
PSD en tant que CSS minimum et
propre via des conseils de code
contextuels. Vous pouvez galement
extraire des calques en tant
quimages, utiliser les informations du
PSD pour dfinir des variables de
prprocesseur et calculer trs
facilement des dimensions ou la
distance entre deux objets.
Vous pouvez rendre vos processus de cration encore plus simples en utilisant dautres services Creative
Cloud pour synchroniser vos fichiers, polices et couleurs. Vous avez ainsi la certitude que chaque utilisateur a
accs aux dernires versions existantes.
Partage de dossiers
Synchronisation de polices
Synchronisez et stockez des

fichiers PSD et des images
extraites dans le service Actifs
Creative Cloud pour y avoir accs
sur tous vos priphriques.
Utilisez le service Actifs Creative

Cloud pour partager des dossiers
et permettre toute lquipe de
travailler sur les mmes fichiers.
Vous pouvez galement rviser
des fichiers et y ajouter des
commentaires. Le service Actifs
Creative Cloud inclut par ailleurs
des fonctions de base de contrle
des versions.
Les titulaires dun abonnement

Creative Cloud peuvent accder
aux polices Typekit et tlcharger
celles qui conviennent le mieux
leurs conceptions.
47
Plus dinformations
Solliciter la
communaut
Nous contacter
Didacticiel Extraction
Creative Cloud
Publiez des messages,

discutez avec les autres
utilisateurs et faites partie
de notre exceptionnelle
communaut.
Accdez cette page pour

entrer en relation
avec nos experts.
Regarder maintenant >
Poser vos questions

maintenant >
Commencer maintenant >
48

Mis jour dans la version 2015 dAdobe Creative Cloud
Tout ce que vous pouvez faire avec les bibliothques

Prise en charge du service Bibliothques dans les applications Creative Cloud
Prsentation : Utilisation du service Bibliothques Creative Cloud
Ajouter un lment une bibliothque
Rutiliser et crer
Partager et collaborer
FAQ
Avec le service Bibliothques Creative Cloud, dot de la technologie Adobe

CreativeSync, toutes vos ressources prfres sont toujours porte de main, o que
vous soyez. Crez des images, des couleurs, des styles de texte et de nombreux
autres lments dans diverses applications mobiles et de bureau Creative Cloud, puis
retrouvez-les facilement dans dautres applications mobiles et de bureau, pour un flux
de cration tout en fluidit.
Pour dcouvrir la fonctionnalit, regardez le tutoriel Prise en main du service
Haut de la page
Tout ce que vous pouvez faire avec les bibliothques
Capturer
Grer
Rutiliser et crer
49
Le service Bibliothques Creative

Cloud permet de capturer des
actifs de conception dans un large
ventail dapplications (et pas
seulement des applications de
bureau). Ainsi, ds quune source
dinspiration attire votre attention,
vous pouvez la capturer en
utilisant la gamme dapplications
mobiles Creative Cloud, et mme
tlcharger des actifs depuis
Adobe Stock ou Creative Cloud
Market.
Vous pouvez classer les actifs de

conception dans plusieurs
bibliothques Creative Cloud.
Celles-ci peuvent tre organises
par projet, type dactifs ou encore
selon vos propres lments
prfrs, qui constituent la base
de votre style, votre signature .
Rutilisez et crez des dessins et

des illustrations partir dobjets
contenus dans le service
Haut de la page
Prise en charge du service Bibliothques dans les applications

Creative Cloud
Applications mobiles
Application
Prise en charge
de
lenregistrement
des actifs dans
les
bibliothques
Prise en
charge de
lutilisation des
actifs contenus
dans les
bibliothques
Ressource offrant plus

dinformations
Shape CC
Formes
vectorielles
N/A
FAQ Adobe Shape CC
Color CC
Thmes de
couleurs
N/A
FAQ Adobe Color CC
Brush CC
Formes
N/A
FAQ Adobe Brush CC
Illustrator
Draw
N/A
Images et
formes
FAQ Adobe Illustrator Draw
Photoshop
Sketch
N/A
Formes
FAQ Adobe Photoshop Sketch
Illustrator
Line
N/A
Couleur et
graphiques
FAQ Adobe Illustrator Line CC
N/A
FAQ Adobe Hue CC
Hue CC
Comp CC
N/A
FAQ Adobe Comp CC
Premiere Clip
N/A
FAQ Adobe Premiere Clip
Photoshop
Mix
N/A
FAQ sur Adobe Photoshop

Mix
Application
de bureau
Creative
Cloud
N/A
Creative Cloud | Questions

frquentes
Applications de bureau et de navigateur
50
Application ou
service
Prise en charge
de
lenregistrement
des actifs dans
les
bibliothques
Prise en
charge de
lutilisation
des actifs
contenus
dans les
bibliothques
Ressource offrant plus

dinformations
Applications de bureau
Photoshop

dans Photoshop
Illustrator

dans Illustrator
InDesign

dans InDesign
Premiere Pro

dans Premiere Pro
After Effects

dans After Effects
Creative Cloud
Market (via
lapplication de
bureau
Creative Cloud)
N/A
Navigateur
Actifs Creative
Cloud
Uniquement pour consulter et grer

(renommer, supprimer)
Actifs Creative Cloud | Stocker

et partager du contenu
Haut de la page
Prsentation : Utilisation du service Bibliothques Creative Cloud
Ajouter un lment une bibliothque

Le service Bibliothques Creative Cloud permet de capturer des actifs de conception dans un large ventail
dapplications (et pas seulement des applications de bureau). Ainsi, ds quune source dinspiration attire
votre attention, vous pouvez la capturer en utilisant la gamme dapplications mobiles Creative Cloud, et
mme tlcharger des actifs depuis Adobe Stock ou Creative Cloud Market.
Bureau
Vous pouvez ajouter des actifs

votre bibliothque via un nombre
croissant dapplications mobiles
Adobe. Consultez les supports de
formation pour votre application
mobile pour en savoir plus.
Ajoutez des actifs au service

Bibliothques Creative Cloud sur
votre ordinateur laide dune
application de bureau Creative
Cloud. Faites glisser ces actifs
vers le panneau Bibliothques
dans lapplication de bureau. Vous
pouvez galement consulter et
parcourir les bibliothques sur la
page Actifs Creative Cloud.
Dcouvrez de nouveaux actifs et

ajoutez-les vos bibliothques
depuis Creative Cloud Market.
Utilisez lapplication de bureau
Creative Cloud pour parcourir les
actifs disponibles et en ajouter
depuis Creative Cloud Market.
Vous pouvez galement ajouter
des actifs une bibliothque
laide des applications mobiles de
51
Consultez les supports de

formation pour votre application
de bureau Creative Cloud pour
obtenir plus dinformations sur
lutilisation avec les bibliothques.
cration.
Rutiliser et crer
Bureau
Navigateur
Dans une application de bureau

prenant en charge les
bibliothques, ouvrez le panneau
Bibliothques (Fentres >
Bibliothques), puis faites glisser
des objets vers la zone de dessin.
Slectionnez un objet dans la

bibliothque pour linsrer dans
votre projet laide dapplications
mobiles.
Parcourez et consultez les

bibliothques disponibles sur la
page Actifs Creative Cloud. Vous
pouvez galement supprimer une
bibliothque.
Partager et collaborer
Bureau
Navigateur
Ouvrez le panneau Bibliothques (Fentres >

Bibliothques) dans une application de bureau
prenant en charge le service Bibliothques Creative
Cloud. Ensuite, dans le menu droulant du panneau,
choisissez Partager le lien ou Collaborer.
Dans le volet de gauche Actifs Creative Cloud,

cliquez sur Bibliothques. Ensuite, dans le menu de
la bibliothque, slectionnez Partager le lien
ou Collaborer.
Adobe Stock sintgre parfaitement au service Bibliothques Creative Cloud. Vous pouvez slectionner une
image en stock et ajouter son aperu avec tatouage numrique toutes vos bibliothques, directement
depuis le site web dAdobe Stock. Ensuite, dans les applications Creative Cloud prenant en charge les
bibliothques (Photoshop, lllustrator, InDesign, Premiere Pro et After Effects), vous pouvez faire glisser cette
image marque depuis le panneau Bibliothques vers votre projet de cration. Si le rsultat vous convient,
vous pouvez acheter la licence de limage directement depuis le panneau Bibliothques.
Les applications Creative Cloud qui utilisent des lments en liaison avec les bibliothques (Photoshop,
Illustrator et InDesign) vont encore plus loin dans ce processus dintgration. Lorsque vous achetez une
licence pour limage en stock, toutes les instances lies de cette image dans vos documents ouverts sont
automatiquement remplaces par limage haute rsolution, sans le tatouage numrique.
52
Pour plus dinformations, consultez la page Utilisation dAdobe Stock.
Haut de la page
FAQ
Combien dlments puis-je ajouter dans une bibliothque ?
Chaque bibliothque peut contenir jusqu 1 000 actifs.
Le nombre de bibliothques que je peux crer est-il limit ?
Non, vous pouvez crer autant de bibliothques que vous le souhaitez.
Tous les actifs stocks dans des bibliothques peuvent-ils tre utiliss dans lensemble des
applications prises en charge ?
Pendant que vous travaillez dans une application, vous pouvez consulter et slectionner le contenu des
bibliothques pertinent pour cette application. Par exemple, bien quil soit possible dajouter des styles de
calque une bibliothque, ces styles sont uniquement utilisables dans Photoshop.
Quels types dinformations relatives aux couleurs sont pris en charge ?
Les bibliothques acceptent les donnes correspondant une nuance unique ou des thmes de
couleurs. Les bibliothques ne prennent en charge que les couleurs quadrichromiques. Les tons directs
ne sont pas pris en charge et sont ajouts en tant que couleurs quadrichromiques aux bibliothques.
Puis-je rutiliser les actifs stocks dans les bibliothques dans diffrentes applications de bureau
Creative Cloud ?
La plupart des actifs peuvent tre rutiliss dans les diffrentes applications de bureau. Les styles de
calque de Photoshop sont une exception notable. Ils ne sont actuellement rutilisables que dans
Photoshop.
Si vous utilisez un style de texte InDesign dans Illustrator ou Photoshop, ces applications vont tenter de
mapper les proprits de lactif avec les proprits pour les styles de texte disponibles dans lapplication
hte. Toutes les proprits non trouves dans lapplication hte sont ignores.
O les actifs sont-ils stocks ?
Vos actifs sont stocks en local sur votre appareil et synchroniss avec Creative Cloud.
Puis-je partager une bibliothque avec dautres utilisateurs ?
Oui. Reportez-vous la section Collaboration sur des bibliothques.
Certaines applications mobiles intgres au service Bibliothques Creative Cloud (Brush, Color et Shape,
etc.) ne prennent pas en charge la collaboration sur des bibliothques. En outre, toutes les bibliothques
partages avec vous ne sont pas disponibles lorsque vous travaillez dans ces applications mobiles.
Toutefois, si vous avez partag une bibliothque avec dautres utilisateurs, cette bibliothque est
disponible pour vous dans les applications de bureau Creative Cloud ainsi que dans les applications
mobiles.
Dois-je imprativement disposer dun abonnement Creative Cloud ?
Pour pouvoir utiliser le service Bibliothques Creative Cloud, vous aurez besoin dun abonnement payant
ou gratuit Creative Cloud.
O trouver des informations sur le service Bibliothques Creative Cloud ?
Pour en savoir plus sur les bibliothques, consultez les ressources suivantes :
Tutoriels vido
Prise en main du service Bibliothques Creative Cloud (prsentation)
Bibliothques Creative Cloud dans Illustrator et les applications mobiles
Bibliothques Creative Cloud dans Photoshop et les applications mobiles
Tutoriels vido qui expliquent comment utiliser le service Bibliothques Creative Cloud dans les
applications mobiles :
Shape CC
Brush CC
Color CC
Illustrator Draw
53
Photoshop Sketch
54
Workflow et espace de travail
55
Flux de travaux et espace de travail dans Dreamweaver

Prsentation des flux de travaux de Dreamweaver
Prsentation de lagencement de lespace de travail
Prsentation des lments de lespace de travail
Prsentation de la fentre de document
Prsentation de la barre doutils de document
Prsentation de la barre doutils standard
Prsentation de la barre doutils Navigation de lexplorateur
Prsentation de la barre doutils de codage
Prsentation de la barre dtat
Prsentation de linspecteur Proprits
Prsentation du panneau Insertion
Prsentation du panneau Fichiers
CSS Designer
Prsentation des guides visuels
Haut de la page
Prsentation des flux de travaux de Dreamweaver

Vous pouvez utiliser plusieurs approches pour crer un site Web. Voici lune des approches possibles :
Planification et configuration de votre site
Dterminez lemplacement o vos fichiers seront enregistrs et examinez les besoins du site, les profils de
ses utilisateurs et les objectifs du site. Il convient galement dexaminer les conditions techniques requises,
notamment laccs utilisateur et les restrictions en matire de navigateurs, de plug-ins ou de tlchargement.
Aprs avoir organis vos informations et dfini une structure, vous pouvez commencer la cration du site.
(Voir propos des sites Dreamweaver.)
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 lorganisation 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 dun processus darchivage/extraction pour empcher lcrasement 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 galement de grer certains aspects
de vos sites Adobe Contribute . (Voir Gestion des fichiers et des dossiers et Gestion des actifs et des
bibliothques.)
Mise en forme de vos pages Web
Slectionnez la technique de mise en forme de votre choix ou combinez les options de mise en forme de
Dreamweaver pour dfinir la prsentation de votre site. Vous pouvez utiliser les mises en forme grille fluide
56
ou des modles par dfaut de Dreamweaver pour commencer. Vous pouvez crer de nouvelles pages
partir dun modle Dreamweaver, puis actualiser automatiquement leur mise en forme lorsque le modle
change. Si vous souhaitez afficher plusieurs lments simultanment dans un navigateur Web, vous pouvez
utiliser des cadres pour mettre en forme vos documents. (Voir Cration de pages avec CSS et Mise en forme
de pages avec HTML.)
Ajout de contenu dans les pages
Ajoutez des actifs et des lments 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 intgres de cration de page pour les lments tels que les
titres et les arrire-plans, taper directement dans la page ou importer du contenu dautres documents.
Dreamweaver comprend galement des outils permettant doptimiser les performances de votre site Web et
de tester les pages pour garantir leur compatibilit avec diffrents navigateurs Web. (Voir Ajout de contenu
dynamique dans les pages.)
Cration de pages par codage manuel
Le codage manuel des pages Web constitue une autre approche de la cration de pages. Dreamweaver
dispose doutils ddition visuelle conviviaux ainsi que dun environnement de codage sophistiqu. Vous
pouvez utiliser lune ou lautre de ces mthodes (ou bien les deux) pour crer et modifier vos pages. (Voir
Utilisation de code de page.)
Configuration dune application Web pour un contenu dynamique
De nombreux sites Web contiennent des pages dynamiques qui permettent aux visiteurs dafficher les
informations stockes dans des bases de donnes, voire dajouter ou de modifier des donnes dans certains
cas. Pour crer ce type de pages, vous devez dabord configurer un serveur Web et un serveur dapplication,
crer ou modifier un site Dreamweaver et vous connecter une base de donnes. (Voir Prparation de la
cration de sites dynamiques.)
Cration de pages dynamiques
Dans Dreamweaver, vous pouvez dfinir diverses sources de contenu dynamique, y compris des jeux
denregistrements extraits de bases de donnes, des paramtres de formulaire et des composants
JavaBeans. Pour ajouter le contenu dynamique une page, il suffit de le faire glisser vers cette dernire.
Vous pouvez dfinir une configuration de page qui affiche un ou plusieurs enregistrements la fois (ou
plusieurs pages denregistrements), ajoute des liens spciaux permettant de passer dune page
denregistrements une autre et cre des compteurs denregistrements pour faciliter la gestion de ces
derniers. (Voir Cration de pages dynamiques.)
Test et publication
Le test de vos pages est un processus continu qui se droule tout au long du cycle de dveloppement. la
fin de ce cycle, vous publiez le site sur un serveur. De nombreux dveloppeurs programment galement une
maintenance rgulire pour sassurer que le site reste jour et est oprationnel. (voir Acquisition et
placement de fichiers depuis ou vers votre serveur.)
Haut de la page

Lespace de travail de Dreamweaver permet dafficher des documents et les proprits des objets. Il
comporte des barres doutils donnant accs aux oprations les plus courantes, vous permettant ainsi de
57
modifier rapidement vos documents.
Espace de travail de Dreamweaver

A. Barre dapplication B. Panneau Extract C. Barre doutils du document D. Fentre de document E.
Commutation despace de travail F. Groupes de panneaux G. Affichage en direct H. Mode Code I. Slecteur
de balises
Haut de la page
Prsentation des lments de lespace de travail

Lespace de travail contient les lments suivants :
Remarque : Dreamweaver propose de nombreux autres inspecteurs, panneaux et fentres. Pour ouvrir les
panneaux, inspecteurs et fentres, utilisez le menu Fentre.
Ecran daccueil Permet douvrir un document rcent ou de crer un nouveau document. Depuis lcran
daccueil, vous pouvez galement visionner une prsentation pour mieux connatre Dreamweaver, accder
des contenus daide et de formation destins aux utilisateurs et classs par niveau de comptence, mais
aussi dcouvrir les fonctionnalits introduites chaque nouvelle version. Lcran daccueil vous permet
galement de crer un nouveau modle de dmarrage.
Barre dapplication Situe sur toute la largeur de la partie suprieure de la fentre dapplication, cette barre
contient un slecteur despace de travail, des menus (Windows uniquement) et dautres commandes
applicatives.
Barre doutils du document Contient des boutons permettant daccder aux diffrents modes daffichage
de la fentre du document (tels que les modes Cration, Affichage en direct et Code), de dfinir les
diffrentes options daffichage et deffectuer certaines oprations courantes, telles que la prvisualisation
dans un navigateur.
Barre doutils standard Pour afficher la barre doutils standard, choisissez Affichage > Barres doutils >
Standard. La barre doutils contient des boutons correspondant aux oprations courantes des menus Fichier
et Edition : Nouveau, Ouvrir, Parcourir dans Bridge, Enregistrer, Enregistrer tout, Imprimer le code, Couper,
Copier, Coller, Annuler et Rpter.
Barre doutils de codage (Affiche en mode Code uniquement.) Contient des boutons couvrant la plupart
des oprations de codage standard.
58
Fentre de document Affiche le document que vous crez et modifiez.
Inspecteur Proprits Permet de visualiser et de modifier diverses proprits de lobjet ou du texte

slectionn. Chaque objet possde des proprits diffrentes.
Slecteur de balises Situ dans la barre dtat, dans le bas de la fentre de document. Affiche la hirarchie
des balises entourant la slection active. Cliquez sur une balise quelconque dans la hirarchie pour la
slectionner avec son contenu.
Panneaux Permettent de surveiller et de modifier votre travail. Citons par exemple le panneau Insertion, le
panneau CSS Designer et le panneau Fichiers. Pour dvelopper un panneau, double-cliquez sur son onglet.
Panneau Extract Permet de tlcharger et afficher les fichiers PSD sur Creative Cloud. Avec ce panneau,
vous pouvez extraire le CSS, le texte, les images, les polices, les couleurs, les dgrads et les mesures
depuis vos compositions PSD dans votre document.
Panneau Insertion Contient des boutons permettant dinsrer divers types dobjets, tels que des images,
tableaux et lments multimdias dans un document. Chaque objet est une portion de code HTML vous
permettant de dfinir diffrents attributs lors de son insertion. Vous pouvez, par exemple, insrer un tableau
en cliquant sur le bouton Tableau du panneau Insertion. Si vous le prfrez, vous pouvez insrer les objets
partir du menu Insertion au lieu dutiliser le panneau Insertion.
Panneau Fichiers Permet de grer vos fichiers et dossiers, quils fassent partie dun site Dreamweaver ou
quils se trouvent sur un serveur distant. Le panneau Fichiers permet galement daccder tous les fichiers
sur votre disque dur local.
Haut de la page

La fentre de document affiche le document actif. Pour passer un autre document, cliquez sur son onglet.
Vous pouvez choisir parmi les modes daffichage suivants :
Affichage en direct (Affichage > Affichage en direct) Le mode Affichage en direct fournit une reprsentation
plus raliste de lapparence de votre document dans un navigateur. Il permet galement dinteragir avec le
document comme vous le feriez dans un navigateur. Vous pouvez modifier des lments HTML directement
en mode Affichage en direct et afficher instantanment dans la mme vue un aperu de vos modifications.
Pour plus dinformations sur la modification en mode Affichage en direct, voir Modification des
lments HTML en mode Affichage en direct.
Mode Cration (Affichage > Cration) Environnement de cration pour la mise en forme visuelle des pages,
ldition visuelle et le dveloppement rapide dapplications. Dans ce mode, Dreamweaver affiche une
reprsentation visuelle entirement modifiable du document, similaire la reprsentation de la page sur un
navigateur.
Mode Code (Affichage > Code) Environnement de codage manuel pour lcriture et la modification du
code HTML, JavaScript ou tout autre type de code.
Mode Code fractionn (Affichage > Code fractionn) Version fractionne du mode Code, qui permet de
travailler dans diffrentes sections du document en mme temps.
Mode Code et Cration (Affichage > Code et cration) Permet dafficher les vues Code et Cration du
document dans une mme fentre.
59
Mode Code en direct (Affichage > Code en direct) Uniquement disponible lors de laffichage dun document
en mode Affichage en direct. Le mode Code en direct affiche le code quun navigateur utilise pour excuter
la page. Il peut changer de manire dynamique lorsque vous interagissez avec la page en mode Affichage en
direct. Le mode Code en direct nest pas modifiable.
Lorsquune fentre de document est agrandie (mode daffichage par dfaut), des onglets saffichent en haut
de la fentre de document indiquant les noms de fichier de tous les documents ouverts. Dreamweaver affiche
un astrisque aprs le nom du fichier si vous avez apport des modifications que vous navez pas encore
enregistres.
Dreamweaver affiche galement la barre doutils Fichiers associs en dessous de longlet du document (ou
sous la barre de titre du document si vous avez affich les documents dans des fentres spares). Les
documents associs sont des fichiers, par exemple CSS ou JavaScript, qui sont associs au fichier actuel.
Pour ouvrir lun de ces fichiers associs dans la fentre de document, cliquez sur son nom dans la barre
doutils Fichiers associs.
Haut de la page
Prsentation de la barre doutils de document

La barre doutils Document contient des boutons qui permettent de basculer rapidement entre diffrents mode
daffichage de votre document. La barre doutils contient galement plusieurs commandes et options
courantes permettant dafficher le document et de le transfrer dun site local vers un site distant.
Barre doutils du document

A. Mode Code B. Afficher les modes Affichage en direct et Code C. Affichage en direct D. Accder au mode
Inspection E. Afficher la source du mode Affichage en direct en mode Code F. Actualiser G. Chemin daccs
et nom H. Aperu/Dbogage dans le navigateur I. Options du mode Affichage en direct J. Gestion des
fichiers
Les options suivantes saffichent dans la barre doutils de document :
Mode Code Affiche uniquement le mode Code dans la fentre du document.
Modes Affichage en direct et Code Fractionne la fentre du document afin dafficher le mode Code et les
modes Affichage en direct/Cration. Le mode Cration nest pas disponible pour les documents grille fluide.
Affichage en direct Affiche une vue du document interactive, base sur un navigateur. Vous pouvez
galement modifier les lments HTML en mode Affichage en direct. La liste droulante situe en regard des
options du mode Affichage en direct vous permet de basculer entre les modes Affichage en direct et
Cration. Cette liste droulante nest pas disponible dans les documents grille fluide.
Aperu/Dbogage dans le navigateur Permet de prvisualiser ou de dboguer votre document dans un

navigateur. Slectionnez un navigateur dans le menu.
Gestion des fichiers Affiche le menu contextuel Gestion des fichiers.

Haut de la page
Prsentation de la barre doutils standard

60
La barre doutils Standard contient des boutons correspondant aux oprations courantes des menus Fichier
et Edition : Nouveau, Ouvrir, Parcourir dans Bridge, Enregistrer, Enregistrer tout, Imprimer le code, Couper,
Copier, Coller, Annuler et Rpter. Utilisez ces boutons comme vous utiliseriez les commandes de menu
quivalentes.
Haut de la page

La barre doutils Navigation de lexplorateur devient active dans le mode Affichage en direct et vous montre
ladresse de la page que vous examinez dans la fentre Document. Le mode Affichage en direct se comporte
comme un navigateur ordinaire. Ainsi, mme si vous accdez un site en dehors de votre site local (par
exemple http://www.adobe.com/fr), Dreamweaver charge la page dans la fentre Document.
Barre doutils de navigation de lexplorateur

A. Contrles de navigateur B. Zone dadresse C. Options du mode Affichage en direct
Par dfaut, les liens ne sont pas actifs en mode Affichage en direct. Si les liens ne sont pas actifs, vous
pouvez slectionner le texte dun lien dans la fentre de document, ou cliquer sur celui-ci, sans accder
une page diffrente. Pour tester les liens en mode Affichage en direct, vous pouvez permettre un clic unique
ou des clics continus, grce aux commandes Suivre le lien et Suivre les liens de manire continue du menu
Options daffichage, droite de la zone dadresse.
Haut de la page

La barre doutils de codage est compose de boutons qui vous permettent deffectuer de nombreuses
oprations de codage standard (rduction et agrandissement des slections de code, mise en vidence de
code non valide, application et suppression de commentaires, mise en retrait de code, insertion de fragments
de code rcemment utiliss, etc.). La barre doutils Codage saffiche la verticale sur la gauche de la fentre
de document. Elle nest visible que lorsque le mode Code est affich.
61
Barre doutils de codage (CC)
Vous ne pouvez pas dtacher ni dplacer la barre doutils de codage, mais vous pouvez la masquer
(Affichage > Barres doutils > Codage).
Vous pouvez galement modifier la barre doutils de codage pour afficher des boutons supplmentaires
(Retour automatique la ligne, Caractres cachs et Retrait auto) ou pour masquer des boutons que vous
ne souhaitez pas utiliser. Nanmoins, vous devez pour cela modifier le fichier XML qui gnre la barre
doutils. Pour plus dinformations, voir Extension de Dreamweaver.
Haut de la page

La barre dtat, situe dans le bas de la fentre de document, fournit des informations supplmentaires sur le
document en cours de cration.
Barre dtat
A. Slecteur de balises B. Taille mobile C. Taille tablette D. Taille bureau E. Taille de la fentre
Slecteur de balises
Affiche la hirarchie des balises entourant la slection active. Cliquez sur une balise quelconque dans la
hirarchie pour la slectionner avec son contenu. Cliquez sur <body> pour slectionner tout le corps du
document. Pour dfinir les attributs class ou id dune balise dans le slecteur de balises, cliquez sur la
balise avec le bouton droit de la souris (Windows) ou maintenez la touche Option enfonce et cliquez sur la
balise (Macintosh) et choisissez une classe ou un ID dans le menu contextuel.
Taille mobile
Affiche un aperu du document au format tablette - 480 x 800 par dfaut. Pour modifier la taille par dfaut,
cliquez sur le menu contextuel Taille de fentre > Modifier les tailles.
Taille tablette
Affiche un aperu du document au format de mobile - 768 x 1024 par dfaut. Pour modifier la taille par
dfaut, cliquez sur le menu contextuel Taille de fentre > Modifier les tailles.
Taille bureau
Affiche un aperu du document au format de bureau - largeur de 1000 pixels par dfaut. Pour modifier la taille
par dfaut, cliquez sur le menu contextuel Taille de fentre > Modifier les tailles.
Menu contextuel Taille de fentre
(Non disponible en mode Code.) Permet de redimensionner la fentre du document selon des dimensions
prdfinies ou personnalises. Lorsque vous modifiez la taille daffichage dune page en mode Cration ou
Affichage en direct, seules les dimensions de la vue changent. La taille du document nest pas modifie.
Outre les formats prdtermins et personnaliss, Dreamweaver rpertorie galement les tailles spcifies
dans une requte multimdia. Lorsque vous slectionnez une taille correspondant une requte multimdia,
Dreamweaver utilise cette requte multimdia pour afficher la page. Vous pouvez galement modifier
lorientation de la page pour prvisualiser la page pour les appareils mobiles sur lesquels la disposition
change selon la faon dont lappareil est tenu.
62
Haut de la page
Prsentation de linspecteur Proprits

Linspecteur Proprits permet dexaminer et de modifier les proprits les plus frquentes de llment de la
page slectionne, tel que le texte ou un objet insr. Le contenu de linspecteur Proprits varie en fonction
de llment slectionn. Par exemple, si vous slectionnez une image de la page, linspecteur Proprits se
modifie pour montrer les proprits de limage (telles que le chemin daccs au fichier, la largeur et la hauteur
de limage, la bordure autour de limage, sil y a lieu, et ainsi de suite).
Inspecteur Proprits
Linspecteur Proprits se trouve par dfaut sur le bord infrieur de lespace de travail. Vous pouvez toutefois
le dtacher et en faire un panneau flottant dans lespace de travail.
Haut de la page

Les boutons qui composent le panneau Insertion permettent de crer et dinsrer des objets, tels que des
tableaux, des images et des liens. Ces boutons sont organiss en plusieurs catgories que vous pouvez
afficher en alternance en choisissant la catgorie dsire dans la liste droulante en haut.
Panneau Insertion
Certaines catgories disposent de boutons ouvrant des menus contextuels. Lorsque vous slectionnez une
option dans lun deux, laction associe est attribue par dfaut au bouton. Par exemple, si vous slectionnez
Espace rserv pour limage dans le menu contextuel du bouton Image, la prochaine fois que vous cliquerez
sur le bouton Image, un espace rserv sera insr pour limage. Lorsque vous slectionnez une nouvelle
option dans lun de ces menus, laction attribue par dfaut au bouton change.
63
Le panneau Insertion est organis en diffrentes catgories, comme suit :
Commun Permet de crer et dinsrer les lments les plus couramment utiliss tels que les balises div,
des objets tels que des images, ainsi que des tableaux.
Structure Permet dinsrer des lments structurels tels que des balises div, des titres, des listes, des
paragraphes, des en-ttes ou des pieds de page.
Requtes multimdias Permet dinsrer des lments multimdias tels quune composition Edge Animate,
des lments audio et vido HTML5 et des lments audio et vido Flash.
Formulaire Contient des boutons permettant de crer des formulaires et dinsrer des lments de
formulaire, comme la recherche, le mois ou encore le mot de passe.
jQuery Mobile Contient des boutons destins la cration de sites qui utilisent jQuery Mobile.
Interface utilisateur jQuery Permet dinsrer des lments dinterface utilisateur jQuery (par exemple
menus en accordon, curseurs et boutons).
Modles Permet denregistrer le document en tant que modle et de marquer des rgions donnes comme
tant modifiables, facultatives ou rptes.
Favoris Permet de regrouper et dorganiser, dans un espace commun, les boutons du panneau Insertion
que vous utilisez le plus frquemment.
Haut de la page
Prsentation du panneau Fichiers

Vous pouvez utiliser le panneau 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 daffichage. Vous pouvez galement agrandir ou rduire le panneau Fichiers. Dans sa
64
forme rduite, le panneau Fichiers affiche le contenu du site local, du site distant, du serveur dvaluation ou
du rfrentiel SVN sous la forme dune liste de fichiers. Dans sa forme dveloppe, il affiche dune part le site
local et dautre part le site distant, le serveur dvaluation ou le rfrentiel SVN.
Pour les sites, il est galement possible de personnaliser le panneau Fichiers en modifiant la vue (site local
ou distant) qui saffiche par dfaut dans le panneau rduit.
Dans le panneau Fichiers, les dossiers saffichent dans des couleurs diffrentes suivant laffichage - local,
distant ou test.
Mode local
Mac
Windows
Mode serveur distant
Windows
Mac
Mode serveur dvaluation
Windows
Mac
Mode rfrentiel
Windows
Mac
65
Le panneau Fichiers interagit avec le serveur intervalles rguliers afin de mettre jour son contenu. Un
message derreur saffiche lorsque vous tentez deffectuer une action dans le panneau Fichiers alors quil
excute une telle mise jour automatique. Pour dsactiver loption de mise jour automatique, ouvrez le
menu Options du panneau Fichiers et dsactivez loption Mise jour automatique du menu Affichage.
Pour mettre jour manuellement le contenu du panneau, utilisez le bouton Actualiser dans le panneau.
Toutefois, ltat dextraction actuel des fichiers nest mis jour que lorsque la mise jour automatique est
active.
Haut de la page
CSS Designer
Le panneau CSS Designer (Windows > CSS Designer) est un inspecteur Proprits CSS qui vous permet de
crer visuellement des styles et des fichiers CSS, mais aussi de dfinir des proprits et des requtes
multimdias.
Le panneau CSS Designer se compose des volets suivants :

66
Sources Rpertorie toutes les feuilles de style CSS associes au document. Ce volet permet de crer et
joindre un style CSS au document, ou dfinir des styles dans le document.
@Requtes multimdias Rpertorie toutes les requtes multimdias dans la source slectionne dans le
volet Sources. Si vous ne slectionnez pas un style CSS spcifique, ce volet affiche toutes les requtes
multimdias associes au document.
Slecteurs Rpertorie tous les slecteurs dans la source slectionne dans le volet Sources. Si vous
slectionnez galement une requte multimdia, ce volet affine la liste des slecteurs pour cette requte
multimdia. Si vous navez slectionn aucun style CSS ou requte multimdia, ce volet affiche tous les
slecteurs dans le document.
Lorsque vous slectionnez Global dans le volet @Requtes multimdias, tous les slecteurs qui ne sont pas
inclus dans une requte multimdia de la source slectionne sont affichs.
Proprits Affiche les proprits que vous pouvez dfinir pour le slecteur spcifi. Pour plus
dinformations, voir Dfinition des proprits.
CSS Designer fonctionne de faon contextuelle. Autrement dit, pour un contexte prcis ou selon llment de
page slectionn, vous pouvez afficher les slecteurs et proprits associs. En outre, lorsque vous
slectionnez un slecteur dans Designer CSS, la source et les requtes multimdias associes sont mises en
surbrillance dans leurs volets respectifs.
Pour plus dinformations, voir Panneau CSS Designer.
Haut de la page
Prsentation des guides visuels

Dreamweaver met votre disposition plusieurs types de guides visuels pour vous aider concevoir vos
documents et prvoir approximativement laspect quils auront dans un navigateur. Vous pouvez effectuer
les oprations suivantes :
Adapter instantanment la taille de la fentre Document au format daffichage souhait,

afin de contrler la disposition des lments sur la page.
Utiliser un trac dimage en arrire-plan de la page, de manire pouvoir reproduire plus
aisment une mise en forme cre dans une application graphique telle que Adobe
Photoshop ou Adobe Fireworks.
Utiliser des rgles et des guides comme repre visuel pour le positionnement et le
redimensionnement prcis des lments de la page.
Utiliser la grille afin deffectuer un positionnement et un redimensionnement prcis des
lments positionnement absolu (PA).
Si la fonction dalignement automatique est active, les lments PA salignent
automatiquement sur le croisillon de grille le plus proche lorsquils sont dplacs ou
redimensionns (dautres objets, par exemple les images et les paragraphes, ne sont pas
aimants par la grille). Lalignement fonctionne mme si la grille nest pas visible.
propos du mode Affichage en direct
Ouverture des fichiers associs
Prvisualisation des pages en mode Affichage en direct
Affichage et modification de contenu den-tte
Utilisation dassistances visuelles pour la mise en forme
67
Prvisualisation de pages dans Dreamweaver

Insertion de code avec la barre doutils de codage
Dfinition de la taille des fentres et de la vitesse de connexion
Redimensionnement de la fentre de document
Gestion des fentres et des panneaux
Utilisation de linspecteur Proprits
Utilisation de fichiers depuis le panneau Fichiers
Utilisation dassistances visuelles pour la mise en forme
68
Personnalisation de lespace de travail de Dreamweaver

Enregistrement et changement despace de travail
Affichage de documents onglets (Dreamweaver sur Macintosh)
Activation des icnes en couleur
Masquage et affichage de lcran daccueil de Dreamweaver
A propos de la personnalisation de Dreamweaver dans les systmes multiutilisateurs
Dfinition des prfrences gnrales de Dreamweaver
Dfinition des prfrences de police pour les documents dans Dreamweaver
Personnalisation des couleurs de surbrillance de Dreamweaver
Restauration des prfrences par dfaut
Remarque : linterface utilisateur a t simplifie dans Dreamweaver CC et les versions ultrieures. Par consquent, il se peut que vous ne
trouviez pas certaines options dcrites dans cet article dans Dreamweaver CC et les versions ultrieures. Pour plus dinformations, voir cet article.
Haut de la page

Pour crer un espace de travail personnalis, vous dplacez et manipulez les fentres de document et les panneaux. Vous pouvez galement
enregistrer des espaces de travail, puis passer de lun lautre. Dans Fireworks, renommer les espaces de travail personnaliss peut provoquer
un comportement inattendu.
Remarque : les exemples suivants sont bass sur Photoshop. Lespace de travail est le mme dans tous les produits.
Rorganisation, ancrage ou dplacement des fentres de document

Les fentres de document comportent des onglets lorsque plusieurs fichiers sont ouverts.
Pour modifier lordre des onglets de la fentre de document, faites glisser un onglet de la fentre lemplacement voulu dans
le groupe.
Pour annuler lancrage dune fentre de document un groupe de fentres, faites glisser longlet de cette fentre hors du
groupe.
Remarque : dans Photoshop, vous pouvez galement slectionner Fentre > Rorganiser > Afficher dans une fentre flottante pour afficher une
seule fentre flottante de document ou Fentre > Rorganiser > Tout afficher dans des fentres flottantes pour afficher simultanment toutes les
fentres flottantes de document. Pour plus dinformations, voir la note technique kb405298.
Remarque : Dreamweaver ne permet pas dancrer des fentres de document ni dannuler lancrage de ces fentres. Utilisez le bouton Rduire de
la fentre de document pour crer des fentres flottantes (sous Windows), ou Fentre > Mosaque verticale pour crer des fentres de document
cte cte. Pour plus dinformations sur cette rubrique, recherchez Mosaque verticale dans laide de Dreamweaver. Le flux de travaux diffre
lgrement pour les utilisateurs Macintosh.
Pour ancrer une fentre de document un groupe de fentres de document distinct, faites glisser cette fentre dans le groupe.
Pour crer des groupes de documents empils ou juxtaposs, faites glisser la fentre vers lune des zones de largage situes
en haut, en bas ou sur les cts dune autre fentre. Vous pouvez galement slectionner une disposition pour le groupe en
utilisant le bouton Disposition de la barre dapplication.
Remarque : certains produits ne prennent pas en charge cette fonctionnalit. Cependant, votre produit peut prsenter des commandes Cascade
et Mosaque (ou Juxtaposer), sous le menu Fentre, pour vous permettre dorganiser vos documents.
69
Dans un groupe onglets, pour passer un autre document lors du glissement dune slection, faites glisser cette slection
sur longlet du document souhait pendant un moment.
Remarque : certains produits ne prennent pas en charge cette fonctionnalit.
Ancrage et annulation dancrage de panneaux

Un dock est un ensemble de panneaux ou de groupes de panneaux affichs ensemble, gnralement en position verticale. Pour ancrer et annuler
lancrage des panneaux, insrez-les dans le dock et dplacez-les hors du dock.
Pour ancrer un panneau, cliquez sur longlet correspondant et faites-le glisser dans le dock, au-dessus, sous ou entre dautres
panneaux.
Pour ancrer un groupe de panneaux, cliquez sur sa barre de titre (barre vide de couleur unie situe 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 longlet ou la barre
de titre. Vous pouvez faire glisser llment vers un autre dock ou le rendre flottant.
Dplacement du panneau Navigation vers un nouveau dock ; cette opration est indique par une surbrillance verticale bleue.
Panneau Navigation dans son propre dock
Vous pouvez faire en sorte que les panneaux noccupent pas la totalit de lespace disponible dans un dock. Faites glisser le bord infrieur du
dock vers le haut de sorte quil ne concide plus avec le bord de lespace de travail.
Dplacement de panneaux
Lorsque vous dplacez des panneaux, des zones de largage en surbrillance bleue apparaissent : il sagit des zones dans lesquelles vous pouvez
dplacer le panneau. Vous pouvez, par exemple, dplacer un panneau vers le haut ou vers le bas en le faisant glisser sur la fine zone de largage
bleue situe au-dessus ou sous un autre panneau. Si vous faites glisser le panneau vers un emplacement autre quune zone de largage, ce
dernier flotte dans lespace 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 saffiche pas, faites
glisser la souris lemplacement o devrait se situer la zone de largage.
Pour dplacer un panneau, faites-le glisser en cliquant sur son onglet.

Pour dplacer un groupe de panneaux, faites glisser la barre de titre.
70
La fine zone de largage bleue indique que le panneau Couleur va tre ancr seul au-dessus du groupe de panneaux Calques.
A. Barre de titre B. Onglet C. Zone de largage
Pour empcher lancrage dun panneau, appuyez sur la touche Ctrl (Windows) ou Commande (Mac OS) lors de son dplacement. Pour annuler
lopration, appuyez sur la touche Echap lors du dplacement du panneau.
Ajout et suppression de panneaux

Lorsque vous supprimez tous les panneaux dun dock, ce dernier disparat. Vous pouvez crer un dock en dplaant les panneaux vers le bord
droit de lespace de travail jusqu ce quune 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
Contrle (Mac), puis slectionnez loption Fermer ; vous pouvez galement le dslectionner dans le menu Fentre.
Pour ajouter un panneau, slectionnez-le dans le menu Fentre et ancrez-le lemplacement de votre choix.
Manipulation de groupes de panneaux
Pour dplacer un panneau dans un groupe, faites glisser son onglet vers la zone de largage en surbrillance situe dans le
groupe.
Ajout dun panneau un groupe
Pour rorganiser les panneaux dun groupe, faites glisser longlet 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 dplacer un groupe, faites glisser la barre de titre (zone situe 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 lespace de
travail. Un panneau flottant peut tre plac nimporte quel endroit dans lespace de travail. Vous pouvez empiler des panneaux ou groupes de
panneaux flottants de sorte quils se comportent comme une seule entit lorsque vous faites glisser la barre de titre suprieure.
71
Panneaux empils flottants
Pour empiler des panneaux flottants, cliquez sur un onglet pour faire glisser le panneau correspondant vers la zone de largage
situe au bas dun autre panneau.
Pour modifier lordre dempilage, cliquez sur un onglet afin de faire glisser le panneau correspondant vers le haut ou vers le
bas.
Remarque : prenez soin de dposer longlet sur ltroite zone de largage situe entre les panneaux, plutt que sur la large zone de largage
situe dans une barre de titre.
Pour rendre un panneau ou groupe de panneaux de la pile flottant, dplacez-le hors de la pile au moyen de son onglet ou de
sa barre de titre.
Redimensionnement des panneaux
Pour rduire ou agrandir un panneau, un groupe de panneaux ou une pile de panneaux, cliquez deux fois sur un onglet. Vous
pouvez galement double-cliquer sur la zone donglets (lespace vide situ ct des onglets).
Pour redimensionner un panneau, faites glisser lun de ses cts. Cette mthode de redimensionnement ne fonctionne pas
toujours, notamment avec le panneau Couleur de Photoshop.
Rduction et dveloppement des icnes de panneaux

Vous pouvez rduire des panneaux la taille dicnes afin de limiter lencombrement de lespace de travail. Dans certains cas, les panneaux sont
rduits de la sorte dans lespace de travail par dfaut.
Panneaux rduits la taille dicnes
Panneaux agrandis
Pour rduire ou dvelopper toutes les icnes de panneau dune colonne, cliquez sur la double flche situe dans la partie
suprieure du dock.
Pour dvelopper une seule icne de panneau, cliquez sur cette dernire.
Pour redimensionner les icnes de panneau afin de voir les icnes uniquement (et non les libells), rglez la largeur du dock
jusqu ce que le texte ne soit plus visible. Pour afficher nouveau le texte, augmentez la largeur du dock.
Pour rduire la taille dune icne un panneau qui a t dvelopp, cliquez sur son onglet, sur son icne ou sur la double
flche affiche dans sa barre de titre.
72
Dans certaines applications, si vous slectionnez loption Rduction automatique des panneaux en icne dans les prfrences dinterface ou
les options dinterface utilisateur, une icne de panneau dveloppe est rduite automatiquement lorsque vous cliquez en dehors de cette
dernire.
Pour ajouter un panneau flottant ou un groupe de panneaux un dock dicnes, faites-le glisser au moyen de son onglet ou
de sa barre de titre (les panneaux sont rduits automatiquement la taille dicnes lorsque vous les ajoutez un dock
dicnes).
Pour dplacer une icne de panneau (ou un groupe dicnes de panneau), faites-la glisser. Vous pouvez dplacer des icnes
de panneau vers le haut et vers le bas dans le dock, dans dautres docks (elles apparaissent dans le style du panneau de ce
dock) ou en dehors du dock (elles apparaissent sous la forme dicnes flottantes).
Haut de la page
Enregistrement et changement despace de travail

En enregistrant la taille et la position actuelles des panneaux comme espace de travail nomm, vous gardez la possibilit de restaurer cet espace
par la suite, et ce, mme si vous avez dplac ou ferm un panneau. Les noms des espaces de travail enregistrs sont visibles dans le slecteur
despace de travail de la barre dapplication.
Enregistrement dun espace de travail personnalis

1. Lorsque lespace de travail se trouve dans la configuration que vous souhaitez enregistrer, utilisez lune des mthodes
suivantes :
(Illustrator) Choisissez la commande Fentre > Espace de travail > Enregistrer lespace de travail.
(Photoshop, InDesign, InCopy) Choisissez la commande Fentre > Espace de travail > Nouvel espace de travail.
(Dreamweaver) Choisissez la commande Fentre > Prsentation de lespace de travail > Nouvel espace de travail.
(Flash) Choisissez la commande Nouvel espace de travail dans le slecteur despace de travail de la barre dapplication.
(Fireworks) Choisissez la commande Enregistrer la prsentation active dans le slecteur despace de travail de la barre
dapplication.
2. Attribuez un nom lespace de travail.
3. (Photoshop, InDesign) Slectionnez ensuite une ou plusieurs options dans la section Capture :
Position des panneaux Enregistre la position actuelle des panneaux (InDesign uniquement).
Raccourcis clavier Enregistre lensemble de raccourcis clavier actuel (Photoshop uniquement).
Menus ou Personnalisation des menus Enregistre lensemble de menus actuels.
Affichage de lespace de travail ou basculement dun espace de travail lautre

Slectionnez un espace de travail dans le slecteur despace de travail de la barre dapplication.
Dans Photoshop, vous pouvez attribuer un raccourci clavier chacun des espaces de travail pour pouvoir passer de lun lautre plus
rapidement.
Suppression dun espace de travail personnalis
Choisissez loption Grer les espaces de travail dans le slecteur despace de travail de la barre dapplication, slectionnez
lespace de travail, puis cliquez sur la commande Supprimer (cette option nest pas disponible dans Fireworks).
(Photoshop, InDesign, InCopy) Slectionnez la commande Supprimer lespace de travail dans le slecteur despace de travail.
73
(Illustrator) Choisissez la commande Fentre > Espace de travail > Grer les espaces de travail, slectionnez lespace de
travail, puis cliquez sur licne Supprimer.
(Photoshop, InDesign) Choisissez la commande Fentre > Espace de travail > Supprimer lespace de travail, slectionnez
lespace de travail, puis cliquez sur le bouton Supprimer.
Restauration de lespace de travail par dfaut

1. Slectionnez lespace de travail de base ou par dfaut laide du slecteur situ dans la barre dapplication. Pour Fireworks,
voir larticle http://www.adobe.com/devnet/fireworks/articles/workspace_manager_panel.html.
Remarque : dans Dreamweaver, Designer correspond lespace de travail par dfaut.
2. Pour Fireworks (Windows), supprimez les dossiers suivants :
Windows Vista
\\utilisateur\<nom utilisateur>\AppData\Roaming\Adobe\Fireworks CS4\
Windows XP
\\Documents and Settings\<nom utilisateur>\Application Data\Adobe\Fireworks CS4
3. (PhotoShop, InDesign, InCopy) Choisissez la commande Fentre > Espace de travail > Rinitialiser [Nom de lespace de
travail].
(Photoshop) Restauration dune disposition despace de travail enregistre

Dans Photoshop, les espaces de travail saffichent automatiquement en fonction de leur dernire disposition, mais vous pouvez restaurer la
disposition dorigine des panneaux.
Pour restaurer un espace de travail individuel, slectionnez Fentre > Espace de travail > Rinitialiser Nom de lespace de
travail.
Pour restaurer tous les espaces de travail installs avec Photoshop, cliquez sur Restaurer les espaces de travail par dfaut
dans les prfrences dinterface.
Pour rorganiser lordre des espaces de travail de la barre dapplication, faites-les glisser.
Haut de la page
Affichage de documents onglets (Dreamweaver sur Macintosh)

Vous pouvez afficher plusieurs documents dans une seule fentre de document avec des onglets qui identifient chacun des documents. Vous
pouvez aussi les afficher sous la forme dune partie de lespace de travail flottant dans laquelle chaque document saffiche dans sa propre fentre.
Ouverture dun document onglets dans une fentre spare

Cliquez en maintenant la touche Ctrl enfonce sur longlet, puis slectionnez Dplacer dans une nouvelle fentre dans le
menu contextuel.
Rassemblement de documents spars dans des fentres onglets

Choisissez Fentre > Combiner en onglets.
Modification du paramtre de document onglets par dfaut

1. Slectionnez Dreamweaver > Prfrences, puis la catgorie Gnral.
2. Slectionnez ou dslectionnez Ouvrir les documents dans des onglets et cliquez sur OK.
74
Dreamweaver ne modifie pas laffichage des documents ouverts lorsque vous modifiez les prfrences. En revanche, une fois
que vous avez slectionn une nouvelle prfrence, les documents ouverts saffichent en fonction de cette dernire.
Haut de la page
Activation des icnes en couleur

Par dfaut, Dreamweaver en version CS4 et ultrieures emploie des icnes en noir et blanc qui se transforment en icnes en couleur lorsque vous
laissez le pointeur de la souris au-dessus delles. Vous pouvez activer les icnes en couleur de manire permanente, mme quand le pointeur de
la souris ne se trouve pas au-dessus delles.
Effectuez lune des oprations suivantes :
Choisissez Affichage > Icnes en couleur.
Basculez vers lespace de travail Classique ou Codeur.
Pour dsactiver laffichage des icnes en couleur, dsactivez loption Icnes en couleur du menu Affichage, ou passez un espace de travail
diffrent.
Haut de la page
Masquage et affichage de lcran daccueil de Dreamweaver

Lcran daccueil saffiche lorsque vous dmarrez Dreamweaver ou lorsquaucun document nest ouvert. Vous pouvez masquer lcran daccueil
puis lafficher de nouveau ultrieurement selon vos besoins. Lorsque lcran daccueil est masqu et quaucun document nest ouvert, la fentre de
document est vide.
Masquage de lcran daccueil

Slectionnez loption Ne plus afficher dans lcran daccueil.
Affichage de lcran daccueil

1. Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh).
2. Dans la catgorie Gnral, activez loption Afficher lcran daccueil.
Haut de la page
A propos de la personnalisation de Dreamweaver dans les systmes multiutilisateurs

Dreamweaver peut tre personnalis selon les besoins, mme dans les systmes multiutilisateurs tels que Windows XP ou Mac OS X.
Dreamweaver empche que la configuration personnalise dun utilisateur naffecte celle dun autre. Pour ce faire, la premire fois que vous
excutez Dreamweaver sur lun des systmes multiutilisateurs reconnus, lapplication cre des copies de diffrents fichiers de configuration. Ces
fichiers sont enregistrs dans un dossier vous appartenant.
Par exemple, sous Windows XP, ils se trouvent dans C:\Documents and Settings\nom dutilisateur\Application
Data\Adobe\Dreamweaver\en_US\Configuration, qui est cach par dfaut. Pour afficher les fichiers et dossiers cachs, choisissez Outils > Options
des dossiers dans lExplorateur Windows, cliquez sur longlet Affichage, puis activez loption Afficher les fichiers et dossiers cachs.
Sous Windows Vista, ils se trouvent dans C:\Utilisateurs\nom dutilisateur\AppData\Roaming\Adobe\Dreamweaver \en_US\Configuration, qui est
cach par dfaut. Pour afficher les fichiers et dossiers cachs, choisissez Outils > Options des dossiers dans lExplorateur Windows, cliquez sur
longlet Affichage, puis activez loption Afficher les fichiers et dossiers cachs.
Sous Mac OS X, ils sont situs dans votre dossier personnel, dans Utilisateurs/nom_utilisateur/Bibliothque//Application
Support/Adobe/Dreamweaver/Configuration.
Si vous rinstallez ou mettez Dreamweaver jour, Dreamweaver cre automatiquement des copies de sauvegarde des fichiers de configuration
existants. Ainsi, si vous avez personnalis manuellement ces fichiers, vos modifications restent disponibles.
75
Haut de la page
Dfinition des prfrences gnrales de Dreamweaver

2. Parmi les options suivantes, dfinissez celles de votre choix :
Ouvrir les documents dans des onglets Permet douvrir tous les documents dans une seule fentre contenant des onglets
que vous utilisez pour passer dun document lautre (Macintosh uniquement).
Afficher lcran daccueil Affiche lcran daccueil de Dreamweaver lorsque vous dmarrez Dreamweaver ou quaucun
document nest ouvert.
Rouvrir les documents au dmarrage Ouvre tous les documents qui taient ouverts lorsque vous avez ferm
Dreamweaver. Si cette option nest pas slectionne, Dreamweaver affiche lcran daccueil ou un cran vide au dmarrage
(selon les paramtres dfinis pour loption Afficher lcran daccueil).
Avertir louverture de fichiers en lecture seule Vous informe lorsque le fichier que vous ouvrez est en lecture seule
(verrouill). Vous pouvez dverrouiller/extraire le fichier, lafficher en lecture seule ou annuler laction.
Activer les fichiers associs Permet de savoir quels fichiers sont associs au document actuel (par exemple des fichiers
CSS ou JavaScript). Dreamweaver affiche un bouton pour chaque fichier associ en haut du document. Si vous cliquez sur
lun de ces boutons, le fichier correspondant est ouvert.
Dcouvrir les fichiers association dynamique Permet dindiquer si les fichiers association dynamique doivent
apparatre automatiquement dans la barre doutils Fichiers associs, ou uniquement aprs une interaction manuelle. Vous
pouvez galement dsactiver la recherche de fichiers association dynamique.
Mettre jour les liens lors de la suppression de fichiers Dtermine ce qui se passe lorsque vous dplacez, renommez ou
supprimez un document dans un site. Vous pouvez dfinir cette prfrence de trois faons diffrentes : les liens sont toujours
automatiquement mis jour, les liens ne sont jamais mis jour ou un message vous demande sil convient dexcuter une
mise jour (voir Mise jour automatique des liens).
Afficher la bote de dialogue lors de linsertion dun objet Dtermine si Dreamweaver vous invite entrer des
informations supplmentaires lorsque vous insrez des images, des tableaux, des animations Shockwave et certains autres
objets laide du panneau Insertion ou du menu Insertion. Si cette option est dsactive, aucune bote de dialogue ne
saffiche ; dans ce cas, prcisez le fichier source pour les images, le nombre de lignes dans un tableau, etc. dans linspecteur
Proprits. Lorsque vous insrez des images avec effet de survol ou du code HTML Fireworks, une bote de dialogue
saffiche toujours, quel que soit le rglage de cette option. (Pour remplacer temporairement ce paramtre, appuyez sur la
touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant avec la souris lorsque vous crez et insrez des objets.)
Activer lentre en ligne deux octets Permet dentrer un texte deux octets directement dans la fentre de document, si
vous utilisez un environnement de dveloppement ou un kit linguistique facilitant la saisie de texte deux octets (les
caractres japonais, par exemple). Si cette option est dslectionne, une fentre de saisie de texte saffiche, dans laquelle
vous entrez et convertissez le texte deux octets ; le texte apparat dans la fentre de document aprs avoir t accept.
Passer en paragraphe normal aprs le titre Indique quen appuyant sur la touche Entre (Windows) ou Retour (Macintosh)
la fin dun paragraphe de titre en mode Cration ou Affichage en direct, vous crez un nouveau paragraphe indiqu par une
balise p (un paragraphe de titre est indiqu par une balise de titre, telle que h1 ou h2). Lorsque cette option est dsactive,
en appuyant sur la touche Entre ou Retour la fin dun paragraphe de titre, vous crez un nouveau paragraphe indiqu par
la mme balise de titre (ce qui vous permet de saisir plusieurs titres la suite les uns des autres, puis dajouter les dtails
ultrieurement).
Autoriser plusieurs espaces conscutifs Indique quen entrant deux espaces ou plus en mode Cration ou Affichage en
76
direct, vous crez des espaces inscables qui saffichent 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 crire). Cette option est
conue principalement pour les personnes qui utilisent les traitements de texte. Lorsque cette option est dsactive, les
espaces multiples sont traits comme des espaces simples (car les navigateurs traitent les espaces multiples comme des
espaces simples).
Utiliser <strong> et <em> au lieu de <b> et <i> Dtermine 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 de linspecteur
Proprits de texte en mode HTML et de choisir Format > Style > Gras ou Format > Style > Italique. Pour utiliser les balises
b et i dans vos documents, dslectionnez cette option.
Remarque : le World Wide Web Consortium recommande dviter les balises b et i ; les balises strong et em fournissent des
informations plus smantiques que les balises b et i.
Avertir lors du placement de rgions modifiables dans des balises <p> ou <h1> - <h6> Indique si un message
davertissement saffiche lorsque vous enregistrez un modle Dreamweaver prsentant une rgion modifiable dans une balise
de paragraphe ou den-tte. Le message vous informe que les utilisateurs ne pourront pas crer de paragraphes
supplmentaires dans la rgion. Cette option est active par dfaut.
Centrer Spcifie si vous voulez centrer des lments laide de la balise div align="center" ou de la balise center
lorsque vous cliquez sur le bouton Centrer de linspecteur Proprits.
Remarque : lutilisation de ces deux mthodes de centrage nest plus recommande depuis les spcifications de HTML 4.01.
Il est conseill dutiliser les feuilles de style CSS. Ces mthodes sont encore techniquement applicables la spcification
XHTML 1.0 transitionnel, mais ne sont plus reconnues dans les spcifications XHTML 1.0 Strict.
Nombre maximum dtapes dhistorique Dtermine le nombre maximal dtapes que le panneau Historique conserve et
affiche. (la valeur par dfaut doit tre suffisante pour la plupart des utilisateurs). Si le nombre dtapes dpasse la valeur
indique, les tapes les plus anciennes sont supprimes.
Pour plus dinformations, voir Automatisation des tches.
Dictionnaire orthographique Affiche la liste des dictionnaires disponibles. Si un dictionnaire contient plusieurs dialectes ou
conventions orthographiques (par exemple, langlais britannique et langlais amricain), les dits dialectes sont rpertoris
individuellement dans le menu contextuel Dictionnaire.
Haut de la page
Dfinition des prfrences de police pour les documents dans Dreamweaver

Le codage dun document dtermine la faon dont le document saffiche dans un navigateur. Les prfrences de polices de Dreamweaver vous
permettent dutiliser un texte affich dans la police et la taille de votre choix. Toutefois, les polices slectionnes dans la bote de dialogue
Prfrences des polices ninfluent que sur la faon dont les documents saffichent dans Dreamweaver. Elles nont aucun impact sur la faon dont
ils saffichent dans le navigateur dun visiteur. Pour modifier la faon dont les polices saffichent dans un navigateur, vous devez modifier le texte
laide de linspecteur Proprits ou en appliquant une rgle CSS.
Pour plus dinformations sur la dfinition du codage par dfaut pour les nouveaux documents, voir Cration et ouverture de documents.
2. Slectionnez la catgorie Polices dans la liste de gauche.
3. Slectionnez le type de codage dsir (par exemple, Occidental ou Japonais) dans la liste Paramtres de la police.
Remarque : pour afficher un document en langue asiatique, il est indispensable que votre systme dexploitation prenne en
charge les polices deux octets.
4. Slectionnez une police et un format utiliser pour chaque catgorie du codage slectionn.
Remarque : pour quune police apparaisse dans les menus contextuels correspondants, il est indispensable de linstaller sur
votre ordinateur. Par exemple, si vous souhaitez visualiser un texte rdig en japonais, il vous faut installer un jeu de
caractres japonais au pralable.
77
Proportionnelle La police proportionnelle est utilise par Dreamweaver pour afficher du texte normal (par exemple, un texte
contenu dans des paragraphes, des en-ttes et des tableaux). La valeur par dfaut varie en fonction des polices installes sur
votre systme. Pour la plupart des systmes franais, la police proportionnelle par dfaut est Times New Roman 12 pt
(moyen) sous Windows et Times 12 pt sous Mac OS.
Police fixe La police fixe est utilise par Dreamweaver pour afficher du texte dans les balises pre, code et tt. La valeur par
dfaut varie en fonction des polices installes sur votre systme. Pour la plupart des systmes franais, la police fixe par
dfaut est Courier New 10 pt (petit) sous Windows et Monaco 12 pt sous Mac OS.
Affichage du code Police utilise dans tout le texte qui apparat dans le mode daffichage Code et dans linspecteur de
code. La valeur par dfaut varie en fonction des polices installes sur votre systme.
Haut de la page
Personnalisation des couleurs de surbrillance de Dreamweaver

Les prfrences de surbrillance servent personnaliser les couleurs utilises dans Dreamweaver pour identifier les zones dun modle, les
lments dune bibliothque, les balises tierces, les lments de mise en forme et le code.
Modification de la couleur de surbrillance

1. Choisissez Edition > Prfrences, puis la catgorie Surbrillance.
2. Cliquez sur le slecteur de couleur situe prs de lobjet dont vous souhaitez modifier la couleur de surbrillance, puis utilisez la
palette de couleur pour slectionner une nouvelle couleur. Vous pouvez galement saisir une valeur hexadcimale.
Activation ou dsactivation de la surbrillance dun objet

1. Choisissez Edition > Prfrences, puis la catgorie Surbrillance.
2. Cochez ou dcochez loption Afficher situe prs de lobjet dont vous souhaitez activer ou dsactiver la couleur de
surbrillance.
Haut de la page
Restauration des prfrences par dfaut

Pour connatre les procdures de rtablissement des prfrences par dfaut de Dreamweaver, voir la Tech Note 83912.
Adobe recommande galement

78

Basculement dun mode un autre dans la fentre de document
Affichage en cascade ou en mosaque des fentres de document
Rapports dans Dreamweaver
Haut de la page

Vous pouvez afficher un document dans la fentre de document en mode Code, en mode Code fractionn, en mode Cration, en modes Code et
Cration (mode fractionn) et en mode Affichage en direct. Vous pouvez galement afficher le mode Code fractionn ou les modes Code et
Cration en les sparant lhorizontale ou la verticale. Le mode daffichage lhorizontale est le mode par dfaut.
Remarque : le mode Cration nest pas disponible pour les documents grille fluide.
Activation du mode Code

Choisissez Affichage > Code.
Dans la barre doutils du document, cliquez sur le bouton Code.
Activation du mode Code fractionn

Le mode Code fractionn scinde le document en deux parties, ce qui permet de travailler sur deux sections du code en mme temps.
Choisissez Affichage > Fractionner le code.
Activation du mode Cration
Dans la barre doutils du document, cliquez sur la liste droulante en regard de loption Affichage en direct, puis cliquez sur Cration. Pour passer
en mode Cration complet, cliquez sur le bouton Cration.
Affichage la fois en modes Affichage du code et Cration
Dans la barre doutils du document, cliquez sur le bouton Fractionner. Cliquez ensuite sur la liste droulante en regard de loption Affichage en
direct, puis cliquez sur Cration.
79
Fractionnement de vues horizontalement ou verticalement

1. Assurez-vous dtre en mode fractionn (mode Code fractionn ou fractionnement de la vue Cration/Affichage en direct).
2. Pour fractionner la vue verticalement, slectionnez Affichage > Fractionner la verticale. Pour fractionner la vue
horizontalement, dslectionnez la slection Affichage > Fractionner la verticale.
Haut de la page
Affichage en cascade ou en mosaque des fentres de document

Si plusieurs documents sont ouverts la fois, vous pouvez les afficher en cascade ou en mosaque.
Affichage en cascade des fentres de document

Choisissez Fentre > Cascade.
Affichage en mosaque des fentres de document

(Windows) Slectionnez Fentre > Mosaque horizontale ou Fentre > Mosaque verticale.
(Macintosh) Slectionnez Fentre > Mosaque.
Haut de la page

La barre dtat affiche les dimensions de la fentre de document slectionne (en pixels). Pour quune page saffiche de faon optimale une
taille spcifique, vous pouvez rgler la fentre de document sur lune des tailles prdtermines, modifier ces tailles prdtermines ou en crer de
nouvelles.
Lorsque vous modifiez la taille daffichage dune page en mode Cration ou Affichage en direct, seules les dimensions de la vue changent. La
taille du document nest pas modifie.
Outre les formats prdtermins et personnaliss, Dreamweaver rpertorie galement les tailles spcifies dans une requte multimdia. Lorsque
vous slectionnez une taille correspondant une requte multimdia, Dreamweaver utilise cette requte multimdia pour afficher la page. Vous
pouvez galement modifier lorientation de la page pour prvisualiser la page pour les appareils mobiles sur lesquels la disposition change selon la
faon dont lappareil est tenu.
Redimensionnement de la fentre de document selon une taille prdtermine

Choisissez lune des tailles affiches dans le menu contextuel Taille de fentre qui se trouve dans la barre dtat de la fentre
de document. Dreamweaver CS5.5 et les versions ultrieures fournissent une plus vaste liste de choix, y compris des options
pour les principaux priphriques mobiles (comme illustr ci-dessous).
80
La taille de la fentre correspond aux dimensions internes de la fentre de navigateur, bordures exclues ; la taille du moniteur
ou le priphrique mobile est indiqu sur la droite.
Pour un redimensionnement moins prcis des fentres, utilisez les mthodes standard de votre systme dexploitation, par
exemple, en faisant glisser le coin infrieur droit dune fentre.
Remarque : (Windows uniquement) les documents dans la fentre de document sont agrandis par dfaut ; il est impossible
de les redimensionner lorsquils sont agrandis. Pour annuler laffichage du document en mode agrandi, cliquez sur licne
dans le coin suprieur droit du document.
Modification des valeurs figurant dans le menu contextuel Taille de fentre

1. Cliquez sur Modifier les tailles dans le menu contextuel Taille de fentre.
2. Cliquez sur une valeur de largeur ou de hauteur dans la liste Taille de la fentre, puis entrez une nouvelle valeur.
Pour que la fentre de document adopte uniquement une largeur spcifique sans que sa hauteur change, slectionnez la
valeur de hauteur et supprimez-la.
3. Cliquez sur la zone Description pour saisir un texte dcrivant la taille spcifique.
Ajout dun nouveau format daffichage au menu contextuel Taille de fentre

1. Cliquez sur Modifier les tailles dans le menu contextuel Taille de fentre.
2. Cliquez dans lespace vierge qui apparat sous la dernire valeur de la colonne Largeur.
3. Indiquez les valeurs souhaites pour Largeur et Hauteur.
Pour dfinir soit la largeur, soit la hauteur, laissez lun des champs vide.
4. Cliquez dans le champ Description pour saisir un texte dcrivant la taille ajoute.
Par exemple, vous pouvez entrer SVGA ou PC standard ct de lentre correspondant un moniteur dune rsolution de
800 x 600 pixels, et Mac 17 ct de lentre correspondant un moniteur dune rsolution de 832 x 624 pixels. Diverses
rsolutions peuvent tre rgles sur la plupart des moniteurs.
Haut de la page

2. Slectionnez la catgorie Tailles des fentres dans la liste de gauche.
3. Personnalisez les tailles des fentres comme requis.
Haut de la page
Rapports dans Dreamweaver

Dans Dreamweaver, vous pouvez excuter des rapports afin de rechercher ou de tester des contenus ou encore de corriger des erreurs. Vous
pouvez gnrer les types de rapports suivants :
Rechercher Permet de rechercher des balises, des attributs ou une portion de texte spcifique dans les balises.
Rfrence Permet de rechercher des informations de rfrence.
Validation Permet de rechercher les erreurs de code ou de syntaxe.
Navigateurs compatibles Permet de tester le code HTML de vos documents afin de dterminer sil contient des balises ou des attributs non pris
81
en charge par les navigateurs cibles.
Vrificateur de lien Permet de rechercher et de corriger les liens briss, externes et orphelins.
Rapports du site Permet damliorer le droulement du travail et de tester les attributs HTML dans votre site. Les rapports sur le droulement du
travail incluent les fonctions Extrait par, Modifis rcemment et Design Notes ; les rapports HTML incluent les balises de polices imbriques
combinables, laccessibilit, les textes secondaires manquants, les balises imbriques redondantes, les balises vides amovibles et les documents
sans nom.
Journal FTP Permet davoir une vue densemble des transferts de fichiers en FTP.
Dbogage du serveur Permet de consulter des informations afin de dboguer une application Adobe ColdFusion.
Remarque : la prise en charge de ColdFusion a t supprime de Dreamweaver CC et des versions ultrieures.

82
Utilisation de barres d'outils, d'inspecteurs et de menus contextuels

Affichage des barres d'outils
Utilisation de l'inspecteur Proprits
Utilisation des menus contextuels
Haut de la page
Utilisez les barres d'outils document et standard pour effectuer des oprations de modification standard lies au document ; utilisez la barre d'outils
codage pour insrer du code rapidement ; et utilisez la barre d'outils rendu de style pour afficher votre page comme elle apparatrait dans
diffrents types de mdias. Vous pouvez afficher ou masquer ces barres selon qu'elles vous sont utiles ou non.
Slectionnez Affichage > Barres d'outils, puis slectionnez la barre d'outils voulue.
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) sur l'une des
barres d'outils et slectionnez la barre d'outils dans le menu contextuel.
Remarque : Pour afficher la barre d'outils de codage dans l'Inspecteur de code (Fentre > Inspecteur de code), vous devez la
slectionner dans le menu droulant des options d'affichage situ en haut de l'inspecteur.
Haut de la page
Utilisation de l'inspecteur Proprits
L'inspecteur Proprits permet d'examiner et de modifier les proprits les plus frquentes de l'lment de la page slectionne, tel que le texte ou
un objet insr. Le contenu de l'inspecteur Proprits varie en fonction de l'lment slectionn.
Pour accder l'aide relative un inspecteur Proprits spcifique, cliquez sur le bouton d'aide dans son coin suprieur droit, ou choisissez Aide
dans son menu Options.
Remarque : L'inspecteur de balises permet d'afficher et de modifier les attributs associs aux proprits d'une balise.
Affichage ou masquage de l'inspecteur Proprits

Choisissez Fentre > Proprits.
Dveloppement ou rduction de l'inspecteur Proprits

Cliquez sur la flche d'agrandissement dans l'angle infrieur droit de l'inspecteur Proprits.
Affichage et modification des proprits d'un lment de page

1. Slectionnez l'lment de la page dans la fentre de document.
Si ncessaire, dveloppez l'inspecteur Proprits afin que toutes les proprits de l'lment slectionn puissent apparatre.
2. Modifiez les proprits de votre choix dans l'inspecteur Proprits.
Remarque : Pour obtenir des informations sur des proprits particulires, slectionnez un lment dans la fentre de
document, puis cliquez sur l'icne Aide (?) dans le coin suprieur droit de l'inspecteur Proprits.
3. Si les changements ne s'appliquent pas immdiatement dans la fentre de document, appliquez-les d'une des faons
suivantes :
Cliquez hors des champs de texte de modification des proprits.
Appuyez sur la touche Entre (Windows) ou Retour (Macintosh).
Appuyez sur la touche de tabulation pour passer une autre proprit.
Haut de la page
Utilisation des menus contextuels
Les menus contextuels vous permettent d'accder rapidement aux commandes et proprits les plus utiles relatives l'objet ou la fentre avec
lesquels vous travaillez. Les menus contextuels rpertorient uniquement les commandes en rapport avec la slection en cours.
1. Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) sur l'objet ou la
fentre qui vous intresse.
2. Choisissez une commande dans le menu contextuel.
83
Voir aussi
Prsentation de la barre d'outils de document
Dfinition des proprits de texte dans l'inspecteur Proprits
Informations juridiques | Politique de confidentialit en ligne
84

Les boutons qui composent le panneau Insertion permettent de crer et dinsrer des objets, tels que des tableaux et des images. Ces boutons
sont organiss en plusieurs catgories.
Masquage ou affichage du panneau Insertion

Affichage des boutons dune catgorie
Affichage du menu dun bouton
Insertion dun objet
Contournement de la bote de dialogue dinsertion dobjets et insertion dun espace rserv vide
Modification des prfrences du panneau Insertion
Ajout, suppression ou gestion des boutons de la catgorie Favoris du panneau Insertion
Insertion dobjets laide des boutons de la catgorie Favoris
Affichage du panneau Insertion sous la forme dune barre Insertion horizontale
Rtablissement du panneau Insertion
Affichage des catgories de la barre Insertion horizontale sous forme donglets
Affichage des catgories de la barre Insertion horizontale sous forme de menus
Haut de la page
Masquage ou affichage du panneau Insertion

Choisissez Fentre > Insrer.
Remarque : si vous utilisez certaines types de fichiers, tels que XML, JavaScript, Java et CSS, le panneau Insertion et
loption de mode Cration sont griss, car vous ne pouvez pas insrer dlments dans ces fichiers de code.
Haut de la page
Affichage des boutons dune catgorie

Slectionnez le nom de la catgorie dans le menu Catgorie. Par exemple, pour afficher les boutons de la catgorie Mise en
forme, slectionnez Mise en forme.
Haut de la page
Affichage du menu dun bouton

Cliquez sur le bouton flch pointant vers le bas situ prs de licne du bouton.
85
Panneau Insertion dans Dreamweaver CC
Haut de la page
Insertion dun objet

1. Choisissez la catgorie approprie dans le menu Catgorie du panneau Insertion.
2. Effectuez lune des oprations suivantes :
Cliquez sur un bouton dobjet ou faites glisser licne du bouton dans la fentre de document (en mode Cration,
Affichage en direct ou Affichage du code).
Cliquez sur la flche dun bouton, puis slectionnez une option dans le menu.
Selon le type dobjet que vous slectionnez, une bote de dialogue dinsertion dobjet saffiche, le cas chant, et vous
invite rechercher un fichier ou spcifier les paramtres dun objet spcifique. En outre, Dreamweaver peut insrer du
code dans le document ou ouvrir un diteur de balises ou un panneau vous permettant de spcifier des informations avant
linsertion du code.
Dans le cas de certains objets, aucune bote de dialogue ne saffiche si vous insrez les objets en mode Cration, mais
un diteur de balises saffiche si vous insrez les objets en mode Affichage du code. Pour certains objets, linsertion de
lobjet en mode Cration peut entraner le basculement de Dreamweaver en mode Affichage du code avant linsertion.
Remarque : certains objets, tels que les ancres nommes, ne sont pas visibles lorsque vous visualisez la page dans la
fentre dun navigateur. Vous pouvez afficher des icnes en mode Cration indiquant lemplacement de ces objets invisibles.
Article connexe :
Insertion dlments directement en mode Affichage en direct
Haut de la page
Contournement de la bote de dialogue dinsertion dobjets et insertion dun espace rserv

86
vide
Appuyez sur la touche Ctrl (Windows) ou Option (Macintosh) tout en cliquant avec la souris sur le bouton correspondant
lobjet.
Par exemple, pour insrer un espace rserv dimage sans spcifier de fichier dimage, appuyez sur la touche Ctrl ou Option
tout en cliquant avec la souris sur le bouton Image.
Remarque : cette procdure ne contourne pas toutes les botes de dialogue dinsertion dobjet. De nombreux objets, y
compris les lments PA et les jeux de cadres, ninsrent pas despaces rservs ni dobjets avec des valeurs par dfaut.
Haut de la page
Modification des prfrences du panneau Insertion

2. Dans la catgorie Gnral de la bote de dialogue Prfrences, dsactivez loption Afficher la bote de dialogue lors de
linsertion dobjets pour supprimer les botes de dialogue lors de linsertion dobjets, tels que des images, des tableaux, des
scripts ou des lments den-tte. Vous pouvez galement maintenir la touche Ctrl (Windows) ou Option (Macintosh)
enfonce tandis que vous crez lobjet.
Si cette option est dsactive lorsque vous insrez un objet, celui-ci aura des valeurs par dfaut. Utilisez linspecteur
Proprits pour modifier les proprits de lobjet aprs lavoir insr.
Haut de la page
Ajout, suppression ou gestion des boutons de la catgorie Favoris du panneau Insertion

1. Slectionnez lune des catgories du panneau Insertion.
2. Cliquez laide du bouton droit de la souris (Windows) ou tout en maintenant la touche Contrle enfonce (Macintosh)
lendroit o les boutons saffichent, puis choisissez Personnaliser les favoris.
3. Dans la bote de dialogue Personnaliser les objets favoris, apportez les modifications dsires, puis cliquez sur OK.
Pour ajouter un objet, slectionnez-le dans le volet Objets disponibles situ gauche, puis cliquez sur la flche situe
entre les deux volets ou cliquez deux fois sur lobjet dans le volet Objets disponibles.
Remarque : les objets doivent tre ajouts un par un. Il est impossible de slectionner un nom de catgorie tel que Commun
afin dajouter une catgorie entire votre liste de favoris.
Pour supprimer un objet ou un sparateur, slectionnez-le dans le volet Objets favoris situ droite, puis cliquez sur le
bouton Supprimer lobjet slectionn dans la liste Objets favoris, au-dessus du volet.
Pour dplacer un objet, slectionnez-le dans le volet Objets favoris situ droite, puis cliquez sur le bouton flch pointant
vers le haut ou vers le bas situ au-dessus du volet.
Pour ajouter un sparateur sous un objet, slectionnez un objet dans le volet Objets favoris situ droite, puis cliquez sur
le bouton Ajouter un sparateur situ en dessous du volet.
4. Si la catgorie Favoris nest pas la catgorie active, slectionnez-la afin de voir les modifications apportes.
Haut de la page
Insertion dobjets laide des boutons de la catgorie Favoris

Slectionnez la catgorie Favoris dans la partie gauche du panneau Insertion, puis cliquez sur le bouton correspondant un
objet Favori que vous avez ajout.
Haut de la page
Affichage du panneau Insertion sous la forme dune barre Insertion horizontale

Contrairement aux autres panneaux de Dreamweaver, vous pouvez retirer le panneau Insertion de son emplacement dancrage par dfaut et le
placer lhorizontale, au-dessus de la fentre de document. Dans ce cas, ce panneau se transforme en barre doutils, mme sil est impossible de
la masquer et de lafficher comme vous le feriez pour les autres barres doutils.
87
1. Cliquez sur longlet du panneau Insertion et tirez-le en haut de la fentre de document.
2. Lorsquune ligne bleue horizontale saffiche sur la largeur de la fentre du document, relchez le panneau Insertion.
Remarque : la barre Insertion horizontale est galement un lment par dfaut de lespace de travail Classique. Pour activer lespace de travail
Classique, choisissez Classique dans la section Commutation despace de travail de la barre Application.
Haut de la page
Rtablissement du panneau Insertion

1. Cliquez sur la poigne de la barre Insertion horizontale (sur sa gauche) et tirez la barre lendroit o vos panneaux sont
ancrs.
2. Placez le panneau Insertion lendroit dsir puis dposez-le. Une ligne bleue indique o vous pouvez dposer le panneau.
Haut de la page
Affichage des catgories de la barre Insertion horizontale sous forme donglets

Cliquez sur la flche du menu situe prs du nom de la catgorie, lextrmit gauche de la barre Insertion horizontale, puis
choisissez Afficher en tant quonglets.
Haut de la page
Affichage des catgories de la barre Insertion horizontale sous forme de menus

Cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) sur un onglet de catgorie de la
barre Insertion horizontale, puis choisissez Afficher en tant que menu.

88

Le panneau CSS Designer (Windows > CSS Designer) est un
inspecteur de proprits CSS qui vous permet de crer
visuellement des styles et des fichiers CSS, mais aussi de dfinir
des proprits et des requtes multimdias.
Visionner la vido
Utilisation de lditeur CSS dans
Dreamweaver (8 min)
Remarque : vous pouvez utiliser Ctrl/Cmd + Z pour annuler ou Ctrl/Cmd + Y pour rtablir toutes les
oprations que vous ralisez dans CSS Designer. Les modifications sont automatiquement appliques dans
la vue En direct et le fichier CSS appropri est galement actualis. Pour que vous sachiez que le fichier
associ a t modifi, longlet du fichier concern est mis en surbrillance pendant un moment (environ
8 secondes).
Cration et ajout de feuilles de style

Dfinition de requtes multimdias
Dfinition de slecteurs CSS
Copier-coller des styles
Dfinition des marges extrieures et intrieures et de la position
Dfinition des proprits de bordure
Dsactivation ou suppression de proprits
89
Raccourcis clavier
Identification des lments de page associs un slecteur CSS (13.1).
Dsactivation de la mise en surbrillance en direct
Voir aussi
Le panneau CSS Designer se compose des options et volets suivants :
Tout Affiche lensemble des styles CSS, requtes multimdias et slecteurs prsents dans le document actif.
Ce mode ne prend pas en compte les lments slectionns. Autrement dit, lorsque vous slectionnez un
lment sur la page, le slecteur, la requte multimdia et le style CSS associs ne sont pas sont mis en
surbrillance dans CSS Designer.
Utilisez cette option pour commencer crer vos slecteurs ou requtes multimdias.
Actuel Affiche tous les styles calculs pour chaque lment du document actif slectionn en mode En
direct ou Cration. Lorsque vous utilisez ce mode pour un fichier CSS en mode Code, toutes les proprits
du slecteur choisi sont affiches.
Utilisez cette option pour modifier les proprits des slecteurs associs aux lments slectionns dans le
document.
Tutoriel vido
Ajout de styles aux pages web avec le panneau CSS Designer
Remarque : lorsque vous slectionnez un lment de page, la valeur Calcul est slectionne dans le volet
Slecteurs. Cliquez sur un slecteur afin dafficher la source, la requte multimdia ou les proprits
associes.
Pour afficher tous les slecteurs, vous pouvez choisir Toutes les sources dans le volet Sources. Pour afficher
les slecteurs qui nappartiennent pas une requte multimdia dans la source slectionne, cliquez sur
Global dans le volet @Requtes multimdias.
90
Tutoriel vido
Utilisation du panneau CSS Designer
Haut de la page

1. Dans le volet Sources du panneau CSS Designer, cliquez sur
options suivantes :
, puis sur lune des
Crer un nouveau fichier CSS : Pour crer un nouveau fichier CSS et le joindre au
document
Joindre un fichier CSS existant : Pour joindre un fichier CSS existant au document
Dfinir dans la page : Pour dfinir un style CSS dans le document
Selon loption que vous slectionnez, la bote de dialogue Crer un nouveau fichier CSS
ou Joindre un fichier CSS existant saffiche.
2. Cliquez sur Parcourir pour spcifier le nom du fichier CSS et, si vous tes en train de
crer un style CSS, pour indiquer lemplacement auquel enregistrer le nouveau fichier.
Cliquez sur Lier pour lier le document Dreamweaver au fichier CSS
Cliquez sur Importer pour importer le fichier CSS dans le document.
4. (Facultatif) Cliquez sur Utilisation conditionnelle et spcifiez la requte multimdia que
vous souhaitez associer au fichier CSS.
Haut de la page

1. Dans le panneau CSS Designer, cliquez sur une source CSS dans le volet Sources.
2. Cliquez sur
multimdia.
dans le volet @Requtes multimdias pour ajouter une nouvelle requte
La bote de dialogue Dfinir une requte multimdia saffiche et rpertorie toutes les
conditions de requte multimdia prises en charge par Dreamweaver.
3. Slectionnez les conditions appropries. Pour plus dinformations sur les requtes
multimdias, voir cet article.
Veillez bien spcifier des valeurs valides pour toutes les conditions que vous
slectionnez, faute de quoi les requtes multimdias correspondantes ne pourront pas
tre cres.
Remarque : seule lopration Et est actuellement prise en charge en cas de
conditions multiples.
Si vous ajoutez des conditions de requte multimdia laide de code, seules les conditions prises en charge
sont renseignes dans la bote de dialogue Dfinition dune requte multimdia. Toutefois, la zone de texte
Code dans la bote de dialogue affiche entirement le code (y compris les conditions non prises en charge).
Si vous cliquez sur une requte multimdia dans le mode Cration/En direct, la fentre daffichage change en
fonction de la requte multimdia slectionne. Pour afficher la fentre daffichage en taille normale, cliquez
sur Global dans le volet @Requtes multimdias.
Haut de la page
91
1. Dans le panneau CSS Designer, slectionnez une source CSS dans le volet Sources ou
une requte multimdia dans le volet @Requtes multimdias.
2. Dans le volet Slecteurs, cliquez sur . En fonction de llment slectionn dans le
document, CSS Designer identifie de faon intelligente le slecteur pertinent et le
suggre (jusqu trois rgles).
Vous pouvez effectuer une ou plusieurs des oprations suivantes :
Vous pouvez utiliser la flche Haut ou Bas pour que le slecteur suggr soit plus ou
moins prcis.
Vous pouvez supprimer la rgle suggre et saisir le slecteur requis. Assurez-vous
de saisir le nom du slecteur, ainsi que la dsignation du type de slecteur. Par
exemple, si vous indiquez un ID, placez un # devant le nom du slecteur.
Pour rechercher un slecteur prcis, utilisez la zone de recherche situe dans la
partie suprieure du volet.
Pour renommer un slecteur, cliquez sur celui-ci, puis tapez le nom dsir.
Pour rorganiser les slecteurs, faites-les glisser lemplacement souhait.
Pour dplacer un slecteur dune source vers une autre, faites-le glisser vers la
source souhaite dans le volet Source.
Pour dupliquer un slecteur dans la source slectionne, faites un clic droit sur le
slecteur, puis cliquez sur Dupliquer.
Pour dupliquer un slecteur et lajouter dans une requte multimdia, faites un clic
droit sur le slecteur, placez le pointeur de la souris au-dessus de Dupliquer en
requte multimdia, puis choisissez la requte multimdia.
Remarque : loption Dupliquer en requte multimdia nest disponible que lorsque
la source du slecteur slectionn contient des requtes multimdias. Vous ne
pouvez pas dupliquer un slecteur provenant dune source dans une requte
multimdia dune autre source.

Vous pouvez dsormais copier des styles dun slecteur et les coller dans un autre. Vous pouvez copier tous
les styles ou copier uniquement une catgorie spcifique de styles, comme la catgorie Mise en forme, Texte
ou Bordure.
Cliquez avec le bouton droit de la souris sur un slecteur et choisissez parmi les options disponibles :
Copie de styles laide de CSS Designer
Si un slecteur na aucun style, les options Copier et Copier tous les styles sont
dsactives.
92
Loption Coller les styles est dsactive pour les sites distants qui ne peuvent pas tre
modifis. En revanche, les options Copier et Copier tous les styles sont disponibles.
Loption Coller les styles, qui existe dj partiellement sur un slecteur (chevauchement),
fonctionne. Lunion de tous les slecteurs est colle.
Loption Copier-coller les styles fonctionne pour les diffrents liens des fichiers CSS :
Importer, lier et intgrer des styles.
Haut de la page

Les proprits sont regroupes dans les catgories suivantes et sont reprsentes par diffrentes icnes en
haut du volet Proprits :
Mise en forme
Texte
Bordure
Arrire-plan
Autres (liste des proprits texte seul et non des proprits permettant des contrles
visuels)
Remarque : avant de modifier les proprits dun slecteur CSS, identifiez les lments associs au
slecteur CSS laide de linspection inverse. Ce faisant, vous pouvez dterminer si tous les lments mis en
surbrillance lors de linspection inverse ncessitent vraiment les modifications. Consultez le lien pour obtenir
plus dinformations sur linspection inverse.
Activez la case cocher Afficher dfinies pour afficher uniquement les proprits dfinies. Pour afficher
toutes les proprits que vous pouvez spcifier pour un slecteur, dsactivez la case cocher Afficher
dfinies.
Pour dfinir une proprit, comme width ou border-collapse, cliquez sur les options requises ct de
la proprit dans le volet Proprits. Pour plus dinformations sur la dfinition dun dgrad pour larrire-plan
ou de contrles de case comme les marges extrieures et intrieures et la position, consultez les liens cidessous :
Utilisation de mises en forme botes flexibles (flexbox)
Les proprits remplaces sont barres.

Les contrles de case du volet Proprits de CSS Designer vous permettent de dfinir rapidement les
proprits de marge, de remplissage et de position. Si vous prfrez crire le code, vous pouvez spcifier un
code court pour la marge et le remplissage dans les zones de modification rapide.
93
Proprit margin
Proprit padding
Proprit position
Cliquez sur les valeurs et tapez la valeur dsire. Si vous souhaitez que les quatre valeurs soient identiques
et quelles changent simultanment, cliquez sur licne de liaison ( ) au centre.
A tout moment, vous pouvez dsactiver ( ) ou supprimer ( ) des valeurs spcifiques, par exemple la valeur
de la marge gauche, tout en conservant les valeurs des marges droite, suprieure et infrieure.
Icnes de dsactivation, de suppression et de liaison pour les marges

Les proprits de contrle des bordures sont organises en onglets logiques, pour vous permettre de
visualiser ou de modifier rapidement ces proprits.
Si vous prfrez crire le code, vous pouvez spcifier un code court pour les bordures et les rayons de
bordure dans les zones de modification rapide de texte.
Pour dfinir des proprits de contrle des bordures, dfinissez dabord les proprits dans longlet Tous
les cts . Les autres onglets sont alors activs et les proprits dfinies dans longlet Tous les cts
sont rpercutes pour chaque bordure.
Lorsque vous modifiez une proprit dans les diffrents onglets de bordure, la valeur de la proprit
correspondante dans longlet Tous les cts prend la valeur par dfaut Non dfini .
94
Dans lexemple ci-dessous, la couleur de la bordure a t dfinie sur noir, puis remplace par rouge pour la
bordure suprieure.
Couleur de bordure dfinie sur noir pour tous les cts
Le code qui est insr varie selon que le paramtre de prfrence est dfini sur une forme courte ou une
forme longue.
Les commandes de suppression et de dsactivation sont disponibles pour les diffrentes proprits comme
dans les versions antrieures Dreamweaver CC 2014. Vous pouvez dsormais utiliser les commandes de
suppression et de dsactivation au niveau du groupe de contrle des bordures afin dappliquer ces actions
toutes les proprits.
95
Au cours de linspection, les onglets sont mis en avant en fonction de la priorit des onglets dfinis . La
priorit la plus haute est attribue longlet Tous les cts suivi de Haut , Droite , Bas et
Gauche . Ainsi, si seule la valeur Haut est dfinie pour une bordure, le mode de calcul met en avant
longlet Haut et ignore longlet Tous les cts car celui-ci nest pas dfini.

Le panneau CSS Designer vous permet de dsactiver ou supprimer chaque proprit. La capture dcran
suivante prsente les icnes de dsactivation ( ) et de suppression ( ) pour la proprit width (largeur).
Ces icnes sont visibles lorsque vous laissez le pointeur de la souris au-dessus dune proprit.
Dsactiver/supprimer la proprit
Raccourcis clavier
Vous pouvez ajouter ou supprimer des slecteurs CSS et des proprits laide de raccourcis clavier. Vous
pouvez galement naviguer entre les groupes de proprits dans le volet Proprits.
Raccourci
Workflow
Ctrl + Alt + [Maj =]
Ajoute un slecteur (si le contrle est dans la section de

slecteur)
Ctrl + Alt + S
Ajoute un slecteur (si le contrle est nimporte o dans

lapplication)
Ajoute une proprit (si le contrle est dans la section de

proprit)
Ctrl + Alt + P
Ajoute une proprit (si le contrle est nimporte o dans

lapplication)
Slectionner + Suppr
Supprime un slecteur, si un slecteur est slectionn
Ctrl + Alt + (Page

prc/Page suiv)
Bascule entre les sections dans le panneau secondaire

des proprits
Haut de la page
Identification des lments de page associs un slecteur CSS

96
(13.1).
En rgle gnrale, un slecteur CSS unique est associ plusieurs lments de page. Par exemple, le texte
dans le contenu principal dune page, le texte den-tte et le texte de pied de page peuvent tous tre
associs au mme slecteur CSS. Lorsque vous modifiez les proprits du slecteur CSS, tous les lments
associs au slecteur sont concerns, y compris ceux que vous navez pas lintention de changer.
La mise en surbrillance en direct vous permet didentifier tous les lments associs un slecteur CSS.
Pour ne modifier quun lment ou certains lments, vous pouvez crer un nouveau slecteur CSS pour ces
lments, puis modifier ses proprits.
Pour identifier les lments de page associs un slecteur CSS, passez la souris sur le slecteur dans la
section En direct (avec le mode Code en direct dsactiv). Dreamweaver met en surbrillance les lments
associs au moyen de lignes pointilles.
Pour verrouiller la mise en surbrillance des lments, cliquez sur le slecteur. Les lments sont alors mis en
surbrillance par un contour bleu.
Pour supprimer la surbrillance bleue autour des lments, cliquez nouveau sur le slecteur.
Remarque : le tableau suivant rcapitule les cas dans lesquels loption Mise en surbrillance en direct nest
pas disponible.
Mode
Code en direct
Mise en surbrillance en direct affiche ?
Code
S/O
S/O
Cration
S/O
S/O
En direct
ACTIF
Non
97
(bouton enfonc)
INACTIF
Oui

La mise en surbrillance en direct est active par dfaut. Pour dsactiver la mise en surbrillance en direct,
cliquez sur les options En direct dans la barre doutils Document puis cliquez sur Dsactiver la mise en
surbrillance en direct.
98
Panneau DOM
Le panneau DOM prsente une arborescence HTML interactive des
contenus statiques et dynamiques. Cette vue permet de mettre
visuellement en correspondance les lments en mode En direct avec
leurs balises HTML et les slecteurs appliqus dans CSS Designer.
Via le panneau DOM, vous pouvez galement apporter des
modifications la structure HTML, dont leffet est immdiatement
visible en mode En direct.
Tutoriel dtaill
Comment visualiser et modifier
visuellement la structure HTML
dans Dreamweaver (30 min)
Pour ouvrir le panneau DOM, slectionnez Fentre > DOM. Vous pouvez galement utiliser les raccourcis
clavier Ctrl + / (Windows) ou Cmd + / (Mac) pour ouvrir le panneau DOM.
Lorsque vous faites glisser des lments pour les insrer directement en mode En direct, licne </> apparat
avant que vous ne dposiez llment. Vous pouvez cliquer sur cette icne pour ouvrir le panneau DOM et
insrer llment lendroit appropri dans la structure du document. Pour plus dinformations, voir Insertion
dlments directement en mode En direct.
En mode Code ou Cration, le panneau DOM affiche uniquement les lments statiques ; en mode En direct,
il affiche aussi bien les lments statiques que dynamiques.
Dans les documents grille fluide, le panneau DOM vous permet de visualiser la structure du DOM HTML,
mais pas de modifier la structure HTML.
Remarque : dans le panneau DOM, vous pouvez modifier uniquement le contenu statique. Les lments
dynamiques ou en lecture seule sont signals en gris fonc.
Panneau DOM
99
Vous pouvez dplacer le panneau DOM pour le positionner o vous le souhaitez dans linterface utilisateur.
Vous pouvez galement lancrer le long dautres panneaux.
Haut de la page
Utilisation du panneau DOM

1. Ouvrez le document de votre choix, puis slectionnez Fentre > DOM pour afficher le
panneau DOM.
2. Passez en mode En direct et cliquez sur llment que vous souhaitez inspecter ou
modifier.
Le balisage HTML de llment slectionn apparat en surbrillance dans le panneau
DOM.
Le slecteur appliqu apparat en surbrillance dans CSS Designer.
Le code correspondant apparat en surbrillance en mode Code.
La balise correspondante apparat en surbrillance (en bleu) dans le slecteur de
balises.
Vous avez galement la possibilit de slectionner un lment HTML dans le panneau
DOM. Lorsque vous cliquez sur un lment dans le panneau DOM :
Le mode En direct dfile jusqu llment correspondant.
Si le mode Code est ouvert, celui-ci dfile jusquau code correspondant llment.
CSS Designer (volet Slecteurs) dfile jusquau slecteur correspondant le plus
proche (comme si vous cliquiez sur llment en mode En direct).
La balise apparat en surbrillance dans le slecteur de balises.
Cette synchronisation entre les diffrentes vues et CSS Designer permet de visualiser les
principales caractristiques de la balise HTML et du style associs llment
slectionn.
3. Poursuivez la modification de llment comme vous le souhaitez (modifications HTML

ou CSS). Pour plus dinformations sur lutilisation du panneau DOM et la manire dont il
permet de modifier les balises HTML, voir Modification de la structure HTML laide du
panneau DOM. Pour plus dinformations sur CSS Designer, voir Panneau CSS Designer.
Haut de la page
Modification de la structure HTML laide du panneau DOM

Llment actuellement slectionn sur la page est mis en surbrillance dans le panneau DOM. Vous pouvez
accder tout nud ou lment avec les touches flches.
Pour slectionner un lment ou un nud, cliquez dessus. Pour

dvelopper ou rduire un lment ou un nud, cliquez sur la
balise HTML ou double-cliquez sur le slecteur droite de la
balise.
Pour dupliquer un lment ou un nud, cliquez dessus avec le
bouton droit de la souris, puis cliquez sur Dupliquer. Lorsque vous
dupliquez un lment associ un ID, cet ID est incrment pour
le nouvel lment (dupliqu).
Raccourcis clavier :
Dupliquer - Ctrl + D
(Windows) / Cmd + D (Mac)
Supprimer - Suppr ou Retour
arrire
Copier - Ctrl + C (Windows) /
Cmd + C (Mac)
Coller - Ctrl + V (Windows) /
Cmd + V (Mac)
Pour copier un lment ou un nud, cliquez dessus avec le

bouton droit de la souris, puis cliquez sur Copier. Si vous avez
copi un lment avec enfants, les lments enfant sont
galement copis.
Annuler - Ctrl + Z (Windows) /

Cmd + Z (Mac)
100
Pour coller un lment ou un nud, cliquez sur llment ou le

nud en-dessous duquel vous voulez imbriquer les lments
copis. Cliquez ensuite avec le bouton droit de la souris sur
llment ou le nud et cliquez sur Coller.
Rtablir - Ctrl + Y (Windows) /

Cmd + Y (Mac)
Pour coller un lment copi en tant quenfant dun lment ou

nud spcifique, cliquez avec le bouton droit de la souris sur cet
lment ou nud (parent), puis cliquez sur Coller en tant
quenfant.
Pour dplacer ou rorganiser des lments, faites-les glisser vers
lemplacement souhait dans le panneau DOM.
Une ligne verte indique o llment dplac sera positionn. Si
vous dplacez llment au-dessus de llment mis en
surbrillance en gris (lment de rfrence), llment dplac est
dfini en tant que premier enfant de llment de rfrence.
Pour supprimer un lment ou un nud, cliquez dessus avec le
bouton droit de la souris, puis cliquez sur Supprimer.
Vous pouvez annuler (Ctrl/Cmd + Z) ou rtablir (Ctrl/Cmd + Y) les
oprations effectues dans le panneau DOM.
Remarque : en rgle gnrale, lorsquune page est modifie, le bouton Actualiser dans la barre doutils du
document se transforme en bouton Arrter indiquant que la page se recharge. Lorsque la page est recharge,
le bouton Actualiser saffiche nouveau pour indiquer que la page est compltement charge.
Lorsque vous apportez des modifications dans le panneau DOM, le chargement de la page peut prendre un
certain temps, mme une fois que le bouton Actualiser est nouveau affich aprs stre transform en
bouton Arrter.
Dplacement dlments HTML laide du mode

Affichage rapide des lments
Options ddition dans le panneau DOM
A. Emplacement o est positionn llment

dplac B. Elment de rfrence C. Elment
dplac
Important : si votre page contient du code JavaScript, le menu contextuel du panneau DOM saffiche
pendant quelques instants, puis devient indisponible. Pour utiliser le menu contextuel, masquez la vue En
direct (Options de laffichage en direct > Masquer laffichage en direct), puis dsactivez JavaScript (Options
101
de laffichage en direct > Dsactiver JavaScript).
102
Recherche de fichiers sur la base de leur nom ou de leur contenu |

Mac OS
Cette fonctionnalit est uniquement disponible sous Mac OS.
La fonction de recherche en direct permet de localiser des fichiers en fonction de leur nom ou de texte quils contiennent. Le site slectionn dans
le panneau Fichiers est utilis pour la recherche. Si aucun site nest slectionn dans le panneau, loption de recherche ne saffiche pas.
La recherche en direct utilise lAPI Spotlight dans Mac OS. Toute personnalisation que vous appliquez aux prfrences de Spotlight est galement
utilise pour la recherche en direct. Spotlight affiche tous les fichiers de votre ordinateur qui correspondent votre requte de recherche. La
fonction de recherche en direct cherche les fichiers dans le dossier racine local du site slectionn dans le panneau Fichiers.
1. Slectionnez Modifier > Recherche en direct. Vous pouvez galement utiliser le raccourci CMD+MAJ+F. Le focus est fix la
zone de texte Recherche en direct du panneau Fichiers.
2. Saisissez le mot ou lexpression dans la zone de texte. Les rsultats saffichent au fur et mesure que vous entrez du texte
dans la zone de texte.
Fichiers correspondants Affiche au maximum 10 noms qui correspondent vos critres de recherche. Le message Plus de
10 rsultats trouvs saffiche sil y a plus de 10 fichiers correspondants. Prcisez vos critres de recherche si vous ne trouvez
pas le fichier dsir laide des options affiches.
Correspondance de texte dans Affiche au maximum 10 fichiers qui contiennent du texte correspondant au mot ou la
phrase que vous avez saisi. Pour plus doptions, cliquez sur Tout rechercher. Les rsultats saffichent dans le panneau
Recherche.
3. Lorsque vous dplacez le pointeur de la souris au-dessus un rsultat de recherche, une infobulle prsente le chemin relatif
la racine du fichier. Appuyez sur Entre ou cliquez sur llment pour ouvrir le fichier.
Pour les fichiers o le texte a t trouv, la premire occurrence du texte est mise en surbrillance. Utilisez Cmd+G pour
accder aux autres instances.
Remarque : pour fermer le panneau de rsultats de la recherche en direct, cliquez lextrieur du panneau ou appuyez sur
la touche Echap/Esc.
103

Zoom avant ou arrire sur une page
Modification d'une page aprs un zoom
Dfilement d'une page aprs un zoom
Adaptation de la fentre du document la slection
Adaptation de la fentre du document une page entire
Adaptation de la fentre du document la largeur d'une page
Dreamweaver permet d'agrandir (zoom avant) l'affichage de la fentre de document de manire pouvoir vrifier la prcision des graphiques,
slectionner plus aisment de petits lments, concevoir des pages avec un texte en petite taille, concevoir de trs grande pages, etc.
Remarque : Les outils de zoom ne sont disponibles qu'en mode Cration.
Haut de la page

1. Cliquez sur l'outil Zoom (la loupe) dans le coin infrieur droit de la fentre du document.
2. Effectuez l'une des oprations suivantes :
Cliquez sur la zone de la page que vous souhaitez agrandir jusqu' obtenir l'affichage dsir.
Tracez un cadre autour de la zone de la page que vous souhaitez agrandir, puis relchez le bouton de la souris.
Slectionnez une chelle d'agrandissement prdfini dans le menu droulant Zoom.
Saisissez une chelle d'agrandissement dans le champ Zoom.
Vous pouvez galement effectuer un grossissement avec l'outil Zoom en appuyant sur Ctrl+= (Windows) ou
Commande+= (Macintosh).
3. Pour effectuer un zoom arrire (rduire le taux d'agrandissement), appuyez sur la touche Alt (Windows) ou Option
(Macintosh), puis cliquez sur la page.
Vous pouvez galement effectuer une rduction avec l'outil Zoom en appuyant sur Ctrl+- (Windows) ou Commande+(Macintosh).
Haut de la page
Cliquez sur l'outil Slection (icne en forme de pointeur) dans le coin infrieur droit de la fentre du document, puis cliquez dans la page.
Haut de la page

1. Cliquez sur l'outil Main (icne en forme de main) dans le coin infrieur droit de la fentre du document.
2. Faites glisser la page.
Haut de la page
1. Slectionnez un lment de la page.

2. Slectionnez Affichage > Ajuster la slection.
Haut de la page
Slectionnez Affichage > Ajuster la page.

Slectionnez Affichage > Ajuster la largeur.
Voir aussi
Prsentation de la barre d'tat
104
Haut de la page
105
Raccourcis clavier
Cration d'un feuille de rfrence pour le jeu de raccourcis en cours
Personnalisation des raccourcis clavier
A propos des raccourcis clavier et des claviers non-U.S.
Cration d'un feuille de rfrence pour le jeu de raccourcis en cours
Haut de la page
Une feuille de rfrence est un enregistrement du jeu de raccourcis en cours. Les informations sont stockes sous forme d'un tableau HTML. Vous
pouvez afficher la feuille de rfrence dans un navigateur Web ou l'imprimer.
1. Slectionnez Edition > Raccourcis clavier (Windows) ou Dreamweaver > Raccourcis clavier (Macintosh).
2. Cliquez sur le bouton Exporter le jeu au format HTML ; il s'agit du troisime bouton du jeu de quatre boutons situ en haut de
la bote de dialogue.
3. Dans la bote de dialogue d'enregistrement, entrez le nom de la feuille de rfrence et slectionnez l'emplacement appropri
pour enregistrer le fichier.
Haut de la page
Utilisez l'diteur de raccourcis clavier pour crer vos propres touches de raccourci, y compris pour les fragments de code. Vous pouvez galement
supprimer des raccourcis clavier, les modifier, et slectionner un jeu prdfini de raccourcis dans l'diteur de raccourcis clavier.
Cration d'un raccourci clavier

Crez vos propres touches de raccourci, modifiez des raccourcis existants ou slectionnez un jeu de raccourcis prdfini.
2. Parmi les options suivantes, dfinissez celles de votre choix et cliquez sur OK :
Jeu en cours Vous permet de choisir un jeu de raccourcis prdfinis livrs avec Dreamweaver, ou tout autre jeu personnalis
que vous avez vous-mme dfini. Les jeux prdfinis sont rpertoris en haut du menu. Par exemple, si vous connaissez les
raccourcis de HomeSite ou BBEdit, vous pouvez les utiliser en choisissant le jeu prdfini correspondant.
Commandes Vous permet de slectionner une catgorie de commandes 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, slectionnez Fragment de code dans le menu
contextuel Commandes.
La liste des commandes affiche les commandes de la catgorie que vous avez choisie dans le menu contextuel
Commandes, ainsi que les raccourcis clavier attribus. Les catgories de commandes Menu s'affichent sous une forme
arborescente, suivant la structure des menus. Les autres catgories rpertorient les commandes par leur nom (par exemple,
Quitter l'application).
Raccourcis affiche la liste des raccourcis clavier assigns la commande slectionne.
Ajouter l'lment (+) 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 diffrents pour chaque
commande. S'il en existe dj deux, le bouton Ajouter l'lment (+) n'a aucun effet.
Supprimer l'lment (-) supprime le raccourci slectionn 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 indique dans la zone Appuyer sur la touche la liste des raccourcis ou
applique le nouveau raccourci clavier la combinaison de touches spcifies.
Dupliquer le jeu duplique le jeu courant. Attribuez un nom au nouveau jeu ; le nom par dfaut est le nom du jeu en cours
dot 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
106
impression simples. Vous pouvez ouvrir le fichier HTML dans votre navigateur et imprimer les raccourcis comme rfrence
rapide.
Supprimer le jeu supprime un jeu. Les jeux actifs ne peuvent pas tre supprims.
Suppression d'un raccourci d'une commande

2. Dans le menu contextuel Commandes, slectionnez une catgorie.
3. Slectionnez une commande dans la liste, puis slectionnez un raccourci.
4. Cliquez sur le bouton Supprimer un lment (-).
Ajout d'un raccourci clavier une commande

3. Slectionnez une commande dans la liste.
Pour ajouter ou modifier un raccourci clavier pour un fragment de code, slectionnez Fragment de code dans le menu
contextuel Commandes.
Les raccourcis attribus la commande apparaissent dans la zone Raccourcis.
4. Procdez de l'une des manires suivantes pour ajouter un raccourci :
Si moins de deux raccourcis sont dj attribus la commande, cliquez sur le bouton Ajouter l'lment (+). Une nouvelle
ligne vide apparat dans la zone Raccourcis et le point d'insertion s'affiche dans la zone Appuyer sur la touche.
Si deux raccourcis sont dj attribus la commande, slectionnez-en un (il sera remplac par le nouveau raccourci).
Cliquez ensuite dans la zone Appuyer sur la touche.
5. Appuyez sur une combinaison de touches. Celle-ci apparat dans la zone Appuyer sur la touche.
Remarque : Si la combinaison de touches est incorrecte (par exemple, elle est dj attribue une autre commande), un
message s'affiche sous la zone Raccourcis et vous en avertit. Vous ne pourrez peut-tre pas ajouter, ni modifier le raccourci.
6. Cliquez sur Remplacer. La nouvelle combinaison de touches est attribue la commande.
Modification d'un raccourci existant

3. Slectionnez une commande dans la liste, puis slectionnez un raccourci 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 dj attribue une autre commande), un
message s'affiche sous la zone Raccourcis et vous en avertit. Vous ne pourrez peut-tre pas ajouter, ni modifier le raccourci.
A propos des raccourcis clavier et des claviers non-U.S.
Haut de la page
Les raccourcis clavier Dreamweaver par dfaut fonctionnent principalement sur les claviers U.S. standardiss. Les claviers d'autres pays (y
compris ceux qui sont produits au Royaume-Uni) peuvent ne pas prsenter la fonctionnalit ncessaire l'utilisation de ces raccourcis. Si votre
clavier ne prend pas en charge certains raccourcis Dreamweaver, Dreamweaver dsactive leur fonctionnalit.
Pour personnaliser des raccourcis clavier fonctionnant avec des claviers non-U.S., voir la section Modification des mappages des raccourcis
clavier du manuel Extension de Dreamweaver.
Voir aussi
107

Affichage de panneaux de dveloppement d'applications Web
Affichage de votre base de donnes dans Dreamweaver
Aperu des pages dynamiques dans un navigateur
Limitation des informations de base de donnes affiches dans Dreamweaver
Configuration de l'inspecteur Proprits pour les procdures stockes ColdFusion et les commandes ASP
Options de nom du champ
Haut de la page
Slectionnez la catgorie Donnes du menu Catgorie du panneau Insertion afin d'afficher un groupe de boutons permettant d'ajouter du contenu
dynamique et des comportements de serveur votre page.
Le nombre et le type de boutons apparaissant varient en fonction du type de document ouvert dans la fentre de document. Amenez la souris audessus d'une icne afin d'afficher une infobulle dcrivant la fonction de ce bouton.
Le panneau Insertion comprend des boutons qui permettent d'ajouter les lments suivants sur la page :
Jeu d'enregistrements
Texte ou tableaux dynamiques
Barres de navigation d'un enregistrement
Si vous passez en mode Code (Affichage > Code), il est possible que des panneaux supplmentaires apparaissent dans la
catgorie correspondante du panneau Insertion, ce qui vous permet d'insrer du code dans la page. Par exemple, si vous
visionnez une page ColdFusion en mode Code, un panneau CFML devient disponible dans la catgorie CFML du panneau
Insertion.
Plusieurs panneaux vous permettent de crer des pages dynamiques :
Slectionnez le panneau Liaisons (Fentre > Liaisons) pour dfinir des sources de contenu dynamique pour votre page et
ajouter le contenu dans la page.
Slectionnez Comportements du serveur (Fentre > Comportements du serveur) pour ajouter une logique ct serveur
dans vos pages dynamiques.
Slectionnez le panneau Bases de donnes (Fentre > Bases de donnes) pour explorer les bases de donnes ou crer
des connexions aux bases de donnes.
Slectionnez le panneau Composants (Fentre > Composants) afin d'inspecter, d'ajouter ou de modifier du code pour des
composants ColdFusion.
Remarque : Le panneau Composants n'est activ que si vous ouvrez une page ColdFusion.
Un comportement de serveur est l'ensemble des instructions insres dans une page dynamique au moment de la cration et
excutes sur le serveur lors de l'excution.
Vous trouverez un didacticiel consacr la configuration de l'espace de travail de dveloppement l'adresse
www.adobe.com/go/vid0144_fr.

Une fois la connexion la base de donnes ralise, vous pouvez afficher sa structure et ses donnes dans Dreamweaver.
1. Ouvrez le panneau Base de donnes (Fentre > Bases de donnes).
Le panneau Base de donnes affiche toutes les bases de donnes pour lesquelles vous avez cr des connexions. Si vous
dveloppez un site ColdFusion, le panneau affiche toutes les bases de donnes pour lesquelles des sources de donnes ont
t dfinies dans ColdFusion Administrator.
Remarque : Dreamweaver recherche le site en cours sur le serveur ColdFusion dfini.
Si aucune base de donnes n'apparat dans le panneau, vous devez crer une connexion de base de donnes.
2. Pour afficher les tables, les procdures stockes et les modes dans la base de donnes, cliquez sur le signe plus (+) situe
108
Haut de la page
en regard de la connexion dans la liste.

3. Pour afficher les colonnes de la table, cliquez sur un nom de table.
Les icnes des colonnes refltent le type de donnes et indiquent la cl primaire de la table.
4. Pour afficher les donnes dans une table, cliquez sur le nom de la table dans la liste avec le bouton droit de la souris
(Windows) ou en appuyant sur Contrle (Macintosh) et choisissez Afficher les donnes dans le menu droulant.
Haut de la page
Les dveloppeurs d'applications Web dboguent souvent leurs pages en les vrifiant rgulirement dans un navigateur Web. Vous pouvez afficher
rapidement vos pages dynamiques dans un navigateur sans avoir les tlcharger manuellement sur un serveur au pralable.
Pour lancer un aperu des pages dynamiques, vous devez complter la catgorie Serveur d'valuation de la bote de dialogue Dfinition du site.
Vous pouvez configurer Dreamweaver pour utiliser des fichiers temporaires la place des fichiers d'origine. Avec cette option, Dreamweaver
excute une copie de la page sur un serveur Web avant de l'afficher dans votre navigateur (Dreamweaver efface ensuite le fichier temporaire du
serveur.) Pour dfinir cette option, slectionnez Edition > Prfrences > Aperu dans le navigateur.
L'option Aperu dans le navigateur ne tlcharge pas les pages associes (pages de rsultats ou d'informations dtailles), les fichiers
dpendants (tels que fichiers d'image) ou les inclusions ct serveur. Pour tlcharger un fichier manquant, choisissez Fentre > Site pour ouvrir
le panneau Site, slectionnez le fichier dans Dossier local et cliquez sur la flche haut bleue de la barre d'outils pour copier le fichier dans le
dossier du serveur Web.
Haut de la page
Les utilisateurs chevronns travaillant avec des systmes de base de donnes de grande envergure tels qu'Oracle devront limiter le nombre
d'lments de base de donnes rcuprs par Dreamweaver au moment de la conception. Une base de donnes Oracle peut contenir des
lments que Dreamweaver ne peut pas traiter au moment de la conception. Vous pouvez crer un schma dans Oracle, puis l'utiliser dans
Dreamweaver pour filtrer les lments indsirables au moment de la conception.
Remarque : Vous ne pouvez pas crer de schma ou de catalogue dans Microsoft Access.
D'autres utilisateurs peuvent avoir intrt limiter la quantit d'informations rcupres par Dreamweaver au moment de la conception. Certaines
bases de donnes contiennent des douzaines, voire des centaines de tableaux, et vous pouvez prfrer ne pas tous les rpertorier tous pendant
que vous travaillez. Un schma ou catalogue peut limiter le nombre d'lments de base de donnes rcuprs au moment de la conception.
Pour commencer, crez un schma ou un catalogue dans votre application de base de donnes pour pouvoir ensuite l'appliquer dans
Dreamweaver. Consultez la documentation de votre systme de base de donnes ou consultez votre administrateur systme.
Remarque : Vous ne pouvez pas appliquer un schma ou un catalogue dans Dreamweaver si vous dveloppez une application ColdFusion,
1. Ouvrez une page dynamique dans Dreamweaver, puis la fentre Bases de donnes (Fentre > Bases de donnes).
Si la connexion de base de donnes existe, cliquez sur cette connexion dans la liste avec le bouton droit de la souris
(Windows) ou en appuyant sur le bouton Contrle (Macintosh) et choisissez Modifier la connexion dans le menu droulant.
Si la connexion n'existe pas, cliquez sur le bouton Plus (+) en haut du panneau afin de la crer.
2. Cliquez sur Avanc dans la bote de dialogue de la connexion.
3. Indiquez votre schma ou catalogue et cliquez sur OK.
Configuration de l'inspecteur Proprits pour les procdures stockes ColdFusion et les

commandes ASP
Haut de la page
Modifiez la procdure stocke slectionne. Les options disponibles dpendent de la technologie de serveur utilise.
Modifiez les options votre convenance. Lorsque vous slectionnez une nouvelle option dans l'inspecteur, Dreamweaver met la page jour.
Haut de la page
Cet inspecteur Proprits s'affiche lorsque Dreamweaver rencontre un type d'entre inconnu. En gnral, cela est d une erreur de frappe ou
autre problme li la saisie de donnes.
Si vous modifiez le type de champ dans l'inspecteur Proprits et placez une valeur reconnue par Dreamweaver (par exemple, si vous corrigez la
faute d'orthographe) l'inspecteur Proprits se met jour pour afficher les proprits du type reconnu. Dfinissez les options suivantes dans
l'inspecteur Proprits :
Nom du champ Attribue un nom au champ. Cette zone est obligatoire et le nom doit tre unique.
Type Dfinit le type d'entre du champ. Le contenu de cette zone reflte la valeur du type d'entre apparaissant actuellement dans votre code
source HTML.
Valeur Dfinit la valeur du champ.
109
Paramtres Ouvre la bote de dialogue Paramtres pour que vous puissiez visualiser les attributs actuels du champ et ajouter ou supprimer des
attributs.
Voir aussi
Didacticiel consacr l'espace de travail de dveloppement
Configuration d'un serveur d'valuation
110
Intgration de CEF
Dreamweaver est dsormais intgr Chromium Embedded Framework (CEF), un cadre open source reposant sur le projet Google Chromium.
Cette intgration permet Dreamweaver de contrler le chargement des ressources, la navigation, les menus contextuels, limpression et bien plus
encore, tout bnficiant des performances et des technologies HTML5 disponibles dans le navigateur Web Google Chrome.
Dreamweaver est intgr la version CEF3, qui est une implmentation multiprocessus qui emploie la messagerie asynchrone pour communiquer
entre Dreamweaver et un ou plusieurs processus de rendu (Webkit + moteur V8). CEF3 utilise lAPI de contenu Chromium officielle de Chromium
et fournit ainsi les performances similaires Google Chrome.
Pour plus dinformations sur CEF, consultez cet article.
Voici les fonctions de Dreamweaver qui sont concernes par lintgration de CEF :
Exprience utilisateur amliore

Amliorations de rendu
Inspection
Codec
Menus contextuels
Messages derreur
Zoom/dfilement
Pages grille fluide
Modifications darchitecture
Code Navigator
Navigation
Certificat SSL
Mode Code en direct/Code
CSS externe
Fichiers association dynamique
Options de laffichage en direct
Aire daffichage
Haut de la page
Exprience utilisateur amliore
Amliorations de rendu
Avec lintgration de CEF, de nombreuses amliorations ont t apportes la manire dont Dreamweaver gnre le rendu des objets et dautres
lments de linterface utilisateur.
Les illustrations suivantes montrent le rendu dune div avec rayon de bordure et rptition de dgrad dans lancien Webkit Apollo et aprs
lintgration de CEF.
Rendu dune div avec rayon de bordure avec lancien Webkit Apollo. Le Rendu dune div avec rayon de bordure dans laffichage en direct
rayon de bordure nest pas appliqu car il ntait pas pris en charge.
aprs intgration de CEF. Le rayon de bordure est appliqu.
111
Inspection
Le nouveau mode inspection est identique linspection de Google Chrome. La marge est marque en jaune et la marge intrieure en
mauve.
Un ensemble de rgles horizontales et verticales saffichent lorsque vous laissez le pointeur de la souris au-dessus des lments. Les rgles
saffichent en haut/bas et gauche/droite, en fonction de la position de llment. Les rgles affichent la valeur de la marge, de la marge
intrieure, de la largeur, ainsi que les proprits de bordure appliques llment.
Par ailleurs, une infobulle contenant les informations suivantes saffiche galement :
Nom de llment (par exemple, div)
Classe CSS ou ID, si cette donne a t dfinie.
Les dimensions de llment. Le nombre affich est la somme de la largeur, de la marge intrieure et de la bordure appliques
cet lment.
Codec
Vido
Audio
Theora
mp3
h264
wav
ogg
Vorbis
ogv
pcm-u8
mp4
pcm_s16le
mov
pcm_s24le
Prise en charge des fentres contextuelles

Avec lintgration de CEF, Dreamweaver peut dsormais rendre des lments de formulaire HTML5 tels que le mois, la date et lheure. Lorsque
vous cliquez sur ces contrles, Dreamweaver affiche dsormais des menus contextuels qui permettent de slectionner le paramtre dsir.
Liste Slectionner llment de formulaire
Fentre contextuelle de calendrier
Pages grille fluide

Lorsque les repres de mise en page de GF sont dsactivs, laffichage en direct utilise le Webkit CEF pour le rendu. Lorsque les repres de mise
en page de GF sont activs, les pages grille fluide dans laffichage en direct utilisent toujours lancien Webkit Apollo pour le rendu. Les fonctions
du mode Affichage en direct, comme la navigation (barre dadresse), le mode inspection et le code en direct ne sont disponibles quen mode CEF.
112
Barre doutils de document pour une page grille fluide o les grilles fluides sont actives (affichage en direct Apollo)
Barre doutils de document pour une page grille fluide o les grilles fluides sont dsactives (affichage en direct CEF)
Chanes derreur
Laspect des chanes derreur dans Dreamweaver est dsormais identique celui utilis dans Google Chrome.
Messages derreur
Zoom/dfilement
Les interfaces utilisateur associes aux barres de dfilement sont diffrentes dans laffichage en direct et dans le mode Cration.
Le comportement Zoom dans Dreamweaver a t modifi en raison de lintgration de CEF. Auparavant, le zoom tait dfini par onglet.
Dsormais, dans laffichage en direct CEF, le zoom est dfini par page.
Scnario 1 : Supposons que vous effectuiez un zoom sur une page 300% dans laffichage en direct. Vous ouvrez ensuite la mme page partir
dun onglet diffrent (suivez les liens pour parvenir cette page). Ensuite :
Dans CEF, la page conserve le zoom de 300%
Dans Apollo (ancienne version), le rendu de la page correspond au zoom par dfaut (100 %).
Scnario 2 : Supposons que vous effectuiez un zoom sur une page 50% dans un onglet (affichage en direct). Vous accdez ensuite une
autre page dans le mme onglet. Ensuite :
Dans CEF, les autres pages sont ouvertes selon le zoom par dfaut (100 %).
Dans Apollo, toutes les pages auxquelles vous accdez depuis cet onglet conservent le zoom de 50 %.
Haut de la page
Modifications darchitecture
Navigation dans le code
113
La navigation dans le code analyse le document et rpertorie tous les styles pouvant tre appliqus llment appel. Elle utilise le contrle de
navigateur pour rendre le contenu. Lorsque vous laissez le pointeur de la souris au-dessus dun des slecteurs, toutes les proprits CSS
associes sont affiches dans des infobulles. Lorsque vous cliquez sur un slecteur, le point dinsertion est amen sur le code correspondant.
Certificat SSL
Lorsque vous tentez daccder un site scuris (https) dont le certificat nest pas reconnu, la bote de dialogue de confirmation du certificat SSL
saffiche.
Connexion scurise bote de dialogue de confirmation
Autres
Les fonctionnalits suivantes sont affectes par lintgration de CEF :
Fichiers association dynamique
CSS externe
Affichage en direct et synchronisation du code en direct
Navigation
Options de laffichage en direct ( Suivre les liens , Suivre les liens de manire continue , Utiliser le serveur dvaluation
pour la source du document , Dsactiver Javascript , Figer Javascript )
Aire daffichage
Attribut de cible pour les liens
Menu contextuel (les options Suivre le lien et Dsactiver les plug-ins sont supprimes du menu contextuel dun lien)
Remarque : en raison de lintgration de CEF, la faon dont vous utilisez <mm:browsercontrol> lors du dveloppement dextensions doit tre
modifie. Vous trouverez des informations dtailles dans cet article.
114
Gestion de site
115

Qu'est-ce qu'un site Dreamweaver ?
Description de la structure du dossier local et du dossier distant
Un site Adobe Dreamweaver est un ensemble de tous les fichiers et actifs de votre site Web. Vous pouvez crer des pages Web sur votre
ordinateur, les transfrer sur un serveur Web et grer le site en transfrant des fichiers mis jour chaque fois que vous les sauvegardez. Vous
pouvez galement modifier et grer des sites Web qui ont t crs sans Dreamweaver.
Haut de la page
Qu'est-ce qu'un site Dreamweaver ?
Dans Dreamweaver, le terme site se rapporte un lieu de stockage local ou distant dans lequel sont conservs tous les documents
appartenant un site Web. Un site Dreamweaver permet d'organiser et de grer tous vos documents Web, de transfrer vos fichiers de site un
serveur Web, de suivre et de grer les liens, ainsi que de grer et de partager les fichiers. Dfinissez un site pour tirer le meilleur parti des
fonctions offertes par Dreamweaver.
Remarque : Pour dfinir un site Dreamweaver, vous devez simplement configurer un dossier local. Pour transfrer des fichiers vers un serveur
Web ou pour dvelopper des applications Web, vous devez galement ajouter des informations concernant un site distant et un serveur
d'valuation.
Un site Dreamweaver se compose de trois parties, ou dossiers, selon votre environnement de travail et le type de site Web que vous dveloppez :
Dossier racine local Stocke les fichiers en cours de dveloppement. Dans Dreamweaver, ce dossier est appel votre site local . Ce dossier se
trouve gnralement sur votre ordinateur local, mais il peut galement se trouver sur un serveur de rseau.
Dossier distant Stocke les fichiers que vous rservez aux valuations, la production, la collaboration, etc. Dans Dreamweaver, ce dossier est
appel votre site distant dans le panneau Fichiers. En rgle gnrale, votre dossier distant se trouve sur l'ordinateur partir duquel vous
excutez votre serveur Web. Le dossier distant contient les fichiers auxquels les utilisateurs accdent via Internet.
Ces deux dossiers (local et distant) vous permettent de transfrer 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 d'autres utilisateurs.
Dossier du serveur d'valuation Dossier dans lequel Dreamweaver traite les pages dynamiques.
Vous trouverez un didacticiel sur la dfinition d'un site Dreamweaver l'adresse www.adobe.com/go/learn_dw_comm08_fr.
Description de la structure du dossier local et du dossier distant
Haut de la page
Si vous voulez utiliser Dreamweaver pour vous connecter un dossier distant, vous devez dfinir ce dossier distant dans la catgorie Serveurs de
la bote de dialogue Configuration du site. Le dossier distant (galement baptis rpertoire hte ) doit correspondre au dossier racine local de
votre site Dreamweaver. Le dossier racine local est le dossier suprieur de votre site Dreamweaver. Les dossiers distants, tout comme les
dossiers locaux, peuvent possder n'importe quel titre. Toutefois, les fournisseurs d'accs Internet (FAI) nomment gnralement les dossiers
distants de niveau suprieur de leurs diffrents comptes d'utilisateur public_html, pub_html, etc. Si vous tes responsable de votre serveur distant
et si vous pouvez nommer le dossier distant votre guise, il est conseill de donner le mme nom au dossier racine local et au dossier distant.
L'exemple ci-dessous reprsente un exemple de dossier racine local gauche et un exemple de dossier distant droite. Le dossier racine local
sur l'ordinateur local correspond directement au dossier distant du serveur Web, et non l'un des sous-dossier du dossier distant ou des
dossiers situs au-dessus du dossier distant dans la structure des rpertoires.
116
Remarque : L'exemple ci-dessus reprsente un dossier racine local sur l'ordinateur local, et un dossier distant de niveau suprieur sur le serveur
Web distant. Toutefois, si vous grez 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 crer diffrents dossiers
distants dans le dossier public_html, puis les faire correspondre leurs dossiers racine locaux respectifs sur l'ordinateur local.
Lorsque vous tablissez une premire connexion distante, le dossier distant du serveur Web est gnralement 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
rpertoires du dossier distant doit toujours tre identique celle du dossier racine local. En d'autres termes, il doit toujours exister une
correspondance prcise 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 celle du dossier racine local, Dreamweaver transfre les fichiers au mauvais endroit et ils risquent de ne pas tre
visibles pour les visiteurs du site. En outre, les chemins d'accs des images et les liens peuvent tre aisment endommags si les structures des
dossiers et des fichiers ne sont pas synchronises.
Le dossier distant doit dj exister pour que Dreamweaver puisse s'y connecter. Si aucun rpertoire racine n'existe ne fait office de dossier distant
sur le serveur Web, crez-en un ou demandez l'administrateur du serveur de votre FAI de se charger de cette opration.
117
A propos des sites dynamiques

Avant dentreprendre la cration de pages Web dynamiques, vous devez effectuer un certain nombre de tches de prparation, notamment la
configuration dun serveur dapplication Web et la connexion une base de donnes pour les applications Coldfusion, ASP et PHP.
Adobe Dreamweaver gre les connexions aux bases de donnes diffremment suivant la technologie de serveur que vous utilisez.
118
Cration dune version locale de votre site

Pour configurer une version locale de votre site, il vous suffit de prciser le dossier local o vous allez stocker tous les fichiers du site. Le dossier
local peut se trouver sur votre ordinateur local ou sur un serveur rseau. Vous pouvez utiliser la bote de dialogue Grer les sites dans
Dreamweaver pour configurer et grer plusieurs sites.
1. Identifiez ou crez le dossier sur lordinateur o vous souhaitez stocker la version locale des fichiers de votre site. (Ce dossier
peut se trouver nimporte o sur votre ordinateur.) Vous spcifierez ce dossier comme site local dans Dreamweaver.
2. Dans Dreamweaver, choisissez Site > Nouveau site.
3. Dans la bote de dialogue Configuration du site, assurez-vous que la catgorie Site est slectionne. (Elle est normalement
slectionne par dfaut.)
4. Dans la zone Nom du site, indiquez le nom de votre site. Ce nom saffiche dans le panneau Fichiers et dans la bote de
dialogue Grer les sites ; il ne saffiche pas dans le navigateur.
5. Dans la zone de texte Dossier du site local, indiquez le nom du dossier que vous avez identifi ltape 1 (le dossier sur
votre ordinateur dans lequel vous voulez stocker la version locale des fichiers de votre site). Vous pouvez cliquer sur licne
de dossier droite de la zone de texte pour rechercher le dossier.
6. Cliquez sur Enregistrer pour fermer la bote de dialogue Configuration du site. Vous pouvez prsent commencer travailler
sur les fichiers locaux de votre site dans Dreamweaver.
Lorsque vous tes prt, vous pouvez complter les autres catgories de la bote de dialogue Configuration du site, dont la catgorie Serveurs, o
vous pouvez indiquer un dossier distant sur votre serveur distant.
Pour regarder un didacticiel vido sur la configuration dun nouveau site Dreamweaver, cliquez ici.
119
Connexion un serveur distant

Le serveur distant (souvent appel serveur Web ) est lendroit o vous publiez vos fichiers de site afin
quils puissent tre consults en ligne. Le serveur distant est simplement un autre ordinateur, similaire votre
ordinateur local, qui contient un ensemble de fichiers et de dossiers. Par exemple, un serveur FTP ou un
serveur WebDAV.
Vous spcifiez un dossier pour votre site sur le serveur distant, en procdant comme vous avez fait pour le
dossier de votre site local sur lordinateur local. Dreamweaver appelle site distant le dossier distant que vous
aurez spcifi.
Lorsque vous configurez un dossier distant, vous devez slectionner une mthode de connexion qui
permettra Dreamweaver de transfrer des fichiers vers votre serveur Web et de tlcharger des fichiers
depuis ce serveur. La mthode de connexion la plus typique est FTP, mais Dreamweaver prend galement
en charge les mthodes de connexion local/rseau, FTPS, SFTP, WebDav et RDS. Si vous ne connaissez
pas la mthode de connexion utiliser, consultez votre FAI ou ladministrateur du serveur.
Spcification dune mthode de connexion

Dfinition des options de serveur avances
Connexion ou dconnexion dun dossier distant via un accs rseau
Connexion ou dconnexion dun dossier distant via un accs FTP
Rsolution des problmes de configuration du dossier distant
Remarque : Dreamweaver prend galement en charge les connexions aux serveurs compatibles IPv6. Les
types de connexion pris en charge sont notamment FTP, SFTP, WebDav et RDS. Pour plus dinformations,
voir www.ipv6.org/
Voir aussi
Didacticiel vido : Configuration dinformations de connexion au serveur
Rcupration et placement de fichiers depuis ou vers votre serveur
Haut de la page
Spcification dune mthode de connexion
Connexions FTP
Utilisez ce paramtre si vous vous connectez votre serveur Web par FTP.
Remarque : Business Catalyst prend uniquement en charge les serveurs SFTP. Si vous utilisez
Business Catalyst, voir la section consacre aux connexions SFTP sur cette page.
1. Choisissez Site > Grer les sites.
2. Cliquez sur Nouveau pour crer un nouveau site, ou choisissez un site Dreamweaver
existant puis cliquez sur licne de modification.
3. Dans la bote de dialogue Configuration du site, slectionnez la catgorie Serveurs et
effectuez lune des actions suivantes :
Cliquez sur le bouton Ajouter nouveau serveur pour ajouter un nouveau serveur.
120
Slectionnez un serveur existant, puis cliquez sur le bouton Modifier serveur existant.
Les illustrations suivantes montrent lcran Base de la catgorie Serveur, avec les zones
de texte dj remplies.
Ecran Base de la catgorie Serveur, bote de dialogue Configuration du site.
4. Dans la zone Nom du serveur, entrez le nom du nouveau serveur. Vous pouvez choisir
nimporte quel nom.
5. Dans la liste droulante Se connecter au moyen de, slectionnez FTP.
6. Dans la zone Adresse FTP, entrez ladresse du serveur FTP sur lequel vous chargez les
fichiers pour votre site Web.
Votre adresse FTP est le nom Internet complet dun systme informatique, par exemple,
ftp.mindspring.com. Entrez ladresse complte sans ajouter de texte. Evitez en particulier
dajouter un nom de protocole devant ladresse.
Si vous ne connaissez pas votre adresse FTP, contactez votre hbergeur de site Web.
Remarque : le port 21 est le port par dfaut pour la rception de connexions FTP. Vous
pouvez modifier le numro de port par dfaut en modifiant le contenu de la zone de texte
droite. Ce faisant, lorsque vous enregistrez vos paramtres, un signe deux points et le
nouveau numro de port seront ajouts votre adresse FTP (par exemple
ftp.mindspring.com:29).
7. Dans les zones Nom dutilisateur et Mot de passe, entrez le nom dutilisateur et le mot de
passe utiliss pour la connexion au serveur FTP.
8. Cliquez sur Tester pour tester votre adresse FTP, votre nom dutilisateur et votre mot de
passe.
Remarque : vous devez obtenir les informations relatives ladresse FTP, au nom
dutilisateur et au mot de passe auprs de ladministrateur systme de la socit qui
hberge votre site. Personne dautre na accs ces informations. Entrez les
informations de la faon prcise dont votre administrateur systme vous les a
communiques.
9. Par dfaut, Dreamweaver enregistre votre mot de passe. Dslectionnez loption
Enregistrer si vous prfrez que Dreamweaver vous demande le mot de passe chaque
connexion au serveur distant.
10. Dans la zone Rpertoire racine, entrez le nom du rpertoire (dossier) hte du serveur
121
distant o sont stocks les documents visibles pour le public.

Si vous ntes pas sr du rpertoire racine saisir, contactez ladministrateur du serveur
ou laissez la zone de texte vide. Sur certains serveurs, votre rpertoire racine est celui
dans lequel la connexion FTP est tablie. Pour en tre sr, tablissez une connexion
avec le serveur. Si vous voyez apparatre dans le volet Affichage distant de votre
panneau Fichiers un dossier nomm public_html, www ou ayant votre nom dutilisateur, il
sagit probablement du nom indiquer dans la zone Rpertoire racine.
11. Dans la zone URL Web, entrez lURL de votre site Web (par exemple
http://www.monsite.com). Dreamweaver utilise lURL Web pour crer des liens relatifs
la racine du site et pour vrifier les liens lorsque vous utilisez la fonction de vrification
des liens.
Pour obtenir une explication de cette option, voir Catgorie Paramtres avancs.
12. Dveloppez la section Options supplmentaires si vous devez encore dfinir des options
supplmentaires.
13. Slectionnez loption Utiliser FTP passif si la configuration de votre pare-feu ncessite
lutilisation dun FTP passif.
Cette fonction permet votre logiciel local de configurer la connexion FTP la place du
serveur distant. Si vous ntes pas sr dutiliser le mode FTP passif, consultez votre
administrateur systme ou faites des essais en activant puis en dsactivant loption
Utiliser FTP passif.
Pour plus dinformations, voir la TechNote 15220 sur le site Web dAdobe ladresse
www.adobe.com/go/tn_15220_fr.
14. Choisissez Utiliser le mode de transfert IPv6 si vous utilisez un serveur FTP compatible
IPv6.
Paralllement au dploiement de la version 6 dInternet Protocol (IPv6), les commandes
EPRT et EPSV ont remplac respectivement les commandes FTP PORT et APSV. Par
consquent, si vous tentez de vous connecter un serveur FTP compatible IPv6, vous
devez utiliser les commandes passif tendu (EPSV) et actif tendu (EPRT) pour votre
connexion de donnes.
Pour plus dinformations, voir www.ipv6.org/.
15. Choisissez Utiliser un proxy si vous voulez spcifier un hte ou un port proxy.
Pour plus dinformations, cliquez sur le lien afin daccder la bote de dialogue
Prfrences, puis cliquez-y sur le bouton Aide de la catgorie Site.
16. Cliquez sur Enregistrer pour fermer lcran Base. Ensuite, dans la catgorie Serveurs,
indiquez si le serveur que vous venez dajouter ou de modifier est un serveur distant, un
serveur de test ou les deux.
Pour plus dinformations sur le dpannage des problmes de connectivit FTP, voir la TechNote kb405912
sur le site Web dAdobe, ladresse www.adobe.com/go/kb405912.
Connexions SFTP
Utilisez loption Secure FTP (SFTP) si la configuration de votre serveur/pare-feu exige lemploi dune
connexion FTP scurise. SFTP utilise un systme de cryptage et de cls didentit pour scuriser la
connexion votre serveur distant/de test.
Remarque : pour que vous puissiez slectionner cette option, votre serveur doit excuter un service SFTP.
Si vous ignorez si votre serveur excute SFTP, consultez votre administrateur systme.
Vous pouvez dsormais authentifier les connexions un serveur SFTP suivant une cl didentit (avec ou
sans phrase secrte).
122
Dreamweaver prend en charge uniquement les fichiers de cls OpenSSH.

existant puis cliquez sur Modifier.
4. Dans la zone Nom du serveur, entrez le nom du nouveau serveur. Vous pouvez entrer le
nom de votre choix.
5. Dans la liste droulante Se connecter au moyen de, slectionnez SFTP.
6. Dfinissez les autres options dans la bote de dialogue suivant lun des scnarios
applicables ci-dessous :
Scnario 1 : Aucune cl, mais un nom dutilisateur et un mot de passe
Scnario 2 : Cl ne requrant pas de phrase de scurit
Scnario 3 : Cl requrant une phrase de scurit
Scnario 1
Vous navez pas de cl et souhaitez tablir une connexion SFTP uniquement laide des informations
didentification - la combinaison du nom dutilisateur et du mot de passe. Dans ce cas, utilisez la mthode
dauthentification Nom dutilisateur et mot de passe .
Configuration du site avec une connexion SFTP - Nom dutilisateur et mot de passe
1. Entrez un nom convivial pour le serveur.

2. Dans la liste Se connecter au moyen de, cliquez sur SFTP et entrez une adresse et un
port SFTP valides.
123
3. Pour la mthode dauthentification, cliquez sur Nom dutilisateur et mot de passe et

saisissez le nom dutilisateur et le mot de passe.
Pour vrifier la connexion, cliquez sur Tester.
4. Entrez un rpertoire racine valide.
5. Entrez une URL Web valide.
6. Cliquez sur Enregistrer.
Scnario 2
Vous avez une cl qui ne ncessite pas de phrase de scurit. Et vous souhaitez tablir une connexion SFTP
en utilisant la combinaison du nom dutilisateur et du fichier didentit. Dans ce cas, utilisez la mthode
dauthentification Fichier de cl prive .
Configuration du site avec une connexion SFTP - Fichier didentit

port SFTP valides.
3. Pour la mthode dauthentification, cliquez sur Fichier de cl prive et indiquez les
informations suivantes :
Un nom dutilisateur
Un fichier didentit valide
Laissez la zone Phrase de scurit vide et choisissez Enregistrer la phrase de
scurit
Remarque : Dreamweaver prend en charge uniquement les fichiers de cls OpenSSH.
124

Scnario 3
Vous avez une cl qui exige une phrase de scurit. Et vous souhaitez tablir une connexion SFTP en
utilisant la combinaison du nom dutilisateur, du fichier didentit et de la phrase de scurit pour la cl. Dans
ce cas, utilisez la mthode dauthentification Fichier de cl prive .
Configuration du site avec une connexion SFTP - Fichier didentit et phrase de scurit

port SFTP valides.
3. Pour la mthode dauthentification, cliquez sur Fichier de cl prive et indiquez les
informations suivantes :
Un nom dutilisateur
Un fichier didentit valide
La phrase de scurit pour le fichier didentit
Remarque : Dreamweaver prend en charge uniquement les fichiers de cls OpenSSH.
Remarque : le port 22 est le port par dfaut pour la rception de connexions SFTP.
Les autres options sont identiques celles des connexions FTP. Reportez-vous la section ci-dessus pour
125
plus dinformations.
Connexions FTPS
FTPS (FTP sur SSL) fournit une prise en charge du chiffrement et de lauthentification, au contraire de SFTP
qui prend uniquement en charge le chiffrement.
Lorsque vous utilisez FTPS pour le transfert de donnes, vous pouvez choisir de chiffrer vos informations
didentification, ainsi que les donnes transmises au serveur. En outre, vous pouvez choisir dauthentifier les
informations didentification du serveur et les connexions. Les informations didentification dun serveur sont
valides par rapport lensemble actuel des certificats de serveur dautorit de certification approuvs dans
la base de donnes Dreamweaver. Les autorits de certification (CA), qui comprennent des socits comme
VeriSign, Thawte, etc. mettent des certificats de serveur signs numriquement.
Remarque : cette procdure dcrit les options spcifiques FTPS. Pour plus dinformations sur les options
FTP standard, voir la section prcdente.
3. Dans la bote de dialogue Configuration du site, slectionnez la catgorie Serveurs, puis
effectuez lune des oprations suivantes :
Cliquez sur le bouton + (Ajouter nouveau serveur) pour ajouter un nouveau
serveur.
4. Dans la zone Nom du serveur, entrez le nom du nouveau serveur.
5. Dans la zone Se connecter laide, slectionnez lune des options suivantes en fonction
de vos besoins.
FTP sur SSL/TLS (chiffrement implicite) Le serveur met fin la connexion si la

requte de scurit nest pas reue.
FTP sur SSL/TLS (chiffrement explicite) Si le client ne demande pas de scurit, le

serveur peut choisir de procder une transaction non scurise ou de refuser/limiter la
connexion.
6. Dans la zone Authentification, choisissez lune des options suivantes :
Aucun Les informations didentification du serveur, signes ou auto-signes, saffichent.

Si vous acceptez les informations didentification du serveur, le certificat est ajout un
magasin de certificats, trustedSites.db, dans Dreamweaver. La prochaine fois que
vous vous connecterez ce serveur, Dreamweaver se connectera directement au
serveur.
Remarque : si les informations didentification dun certificat auto-sign ont t modifies
sur le serveur, vous tes invit accepter les nouvelles informations didentification.
Approuv Le certificat prsent est valid avec lensemble actuel des certificats de
serveur dautorit de certification approuvs dans la base de donnes Dreamweaver. La
liste de serveurs approuvs est stocke dans le fichier cacerts.pem.
Remarque : un message derreur saffiche si vous slectionnez Serveur approuv et que
vous vous connectez un serveur avec un certificat auto-sign.
7. Dveloppez la section Options supplmentaires pour dfinir dautres options.
126
Chiffrer uniquement le canal de commande Slectionnez cette option si vous

souhaitez ne chiffrer que les commandes qui sont transmises. Utilisez cette option
lorsque les donnes transmises sont dj chiffres ou ne contiennent pas dinformations
confidentielles.
Chiffrer uniquement le nom dutilisateur et le mot de passe Slectionnez cette

option si vous souhaitez chiffrer votre nom dutilisateur et votre mot de passe.
indiquez si le serveur que vous avez ajout ou modifi est un serveur distant, un serveur
de test ou les deux.
Pour plus dinformations sur le dpannage des problmes de connectivit FTP, voir la TechNote kb405912
sur le site Web dAdobe, ladresse www.adobe.com/go/kb405912.
Connexions de type local ou rseau

Utilisez cette option pour vous connecter un dossier rseau, si vous stockez des fichiers ou excutez votre
serveur de test sur votre ordinateur local.
nom de votre choix.
5. Dans la liste droulante Se connecter au moyen de, slectionnez Local/Rseau.
6. Cliquez sur licne de dossier droite de la zone de texte Dossier du serveur pour
rechercher puis slectionner le dossier dans lequel vous stockez les fichiers de votre
site.
des liens.
Connexions WebDAV
Utilisez ce paramtre si vous vous connectez votre serveur laide du protocole WebDAV (Web-based
Distributed Authoring and Versioning).
Cette mthode de connexion suppose que vous disposez dun serveur prenant en charge ce protocole, par
exemple Microsoft Internet Information Server (IIS) 5.0 ou une installation du serveur Web Apache configure
de faon adquate.
Remarque : si vous slectionnez WebDAV comme mthode de connexion et que vous utilisez Dreamweaver
127
dans un environnement multi-utilisateurs, vous devez galement veiller ce que tous vos utilisateurs
slectionnent WebDAV comme mthode de connexion. Si certains utilisateurs slectionnent WebDAV, alors
que dautres slectionnent dautres mthodes de connexion (par exemple, FTP), la fonction
archivage/extraction de Dreamweaver fonctionnera de faon imprvisible, car WebDAV utilise son propre
systme de verrouillage.
nom de votre choix.
5. Dans la liste droulante Se connecter au moyen de, slectionnez WebDAV.
6. Dans la zone URL, indiquez lURL complte vers le rpertoire du serveur WebDAV
auquel vous voulez vous connecter.
Cette URL inclut le protocole, le port et le rpertoire (sil ne sagit pas du rpertoire
racine). Par exemple, http://webdav.mondomaine.net/monsite.
7. Entrez votre nom dutilisateur et votre mot de passe.
Ces informations sont relatives lidentification du serveur et ne sont pas associes
Dreamweaver. Si vous ne connaissez pas votre nom dutilisateur et votre mot de passe,
consultez votre administrateur systme ou Web.
8. Cliquez sur Tester pour tester vos paramtres de connexion.
9. Activez loption Enregistrer si vous voulez que Dreamweaver mmorise votre mot de
passe chaque nouvelle session.
des liens.
Connexions RDS
Utilisez ce paramtre si vous vous connectez votre serveur Web laide de RDS (Remote Development
Services). Cette mthode de connexion suppose que votre serveur distant se trouve sur un ordinateur
excutant Adobe ColdFusion
128
nom de votre choix.
5. Dans la liste droulante Se connecter au moyen de, slectionnez RDS.
6. Cliquez sur le bouton Paramtres et entrez les informations suivantes dans la bote de
dialogue Configurer le serveur RDS :
Entrez le nom de lordinateur hte sur lequel votre serveur Web est install.
Il sagit probablement dune adresse IP ou dune URL. En cas de doute, demandez
votre administrateur.
Entrez le numro du port auquel vous vous connectez.
Dfinissez votre dossier racine distant comme rpertoire hte.
Par exemple, c:\inetpub\wwwroot\myHostDir\.
Entrez votre nom dutilisateur et votre mot de passe RDS.
Remarque : ces options seront peut-tre invisibles si vous avez configur votre nom
dutilisateur et votre mot de passe dans les paramtres de scurit de ColdFusion
Administrator.
Slectionnez loption Enregistrer si vous voulez que Dreamweaver mmorise vos
paramtres.
7. Cliquez sur OK pour fermer la bote de dialogue Configurer le serveur RDS.
des liens.
Connexions Microsoft Visual SourceSafe

La prise en charge de Microsoft Visual SourceSafe a t abandonne partir de Dreamweaver CS5.
Haut de la page
Dfinition des options de serveur avances

4. Dfinissez les options de base requises, puis cliquez sur le bouton Avanc.
5. Slectionnez loption Conserver les informations de synchronisation si vous souhaitez
que vos fichiers locaux et distants soient synchroniss automatiquement (cette option est
129
slectionne par dfaut).

6. Slectionnez loption Tlcharger autom. les fichiers vers le serveur lors de
lenregistrement si vous voulez que Dreamweaver charge votre fichier sur votre site
distant lorsque vous lenregistrez.
7. Slectionnez loption Activer lextraction de fichier si vous voulez activer le systme
darchivage et dextraction.
8. Si vous utilisez un serveur de test, slectionnez un modle dans le menu Modle de
serveur. Pour plus dinformations, voir Configuration dun serveur de test.
Haut de la page
Connexion ou dconnexion dun dossier distant via un accs

rseau
Vous navez pas besoin de vous connecter au dossier distant ; vous tes connect en
permanence. Cliquez sur le bouton Actualiser pour afficher vos fichiers distants.
Haut de la page
Connexion ou dconnexion dun dossier distant via un accs FTP

Dans le panneau Fichiers :
Pour vous connecter, cliquez sur loption Connecter un hte distant dans la barre
doutils.
Pour vous dconnecter, cliquez sur Dconnecter dans la barre doutils.
Haut de la page
Rsolution des problmes de configuration du dossier distant

La liste suivante contient des informations sur les problmes courants que vous pouvez rencontrer lors de la
configuration dun dossier distant et sur la faon de les rsoudre.
Vous trouverez, sur le site Web dAdobe, une TechNote dtaille qui fournit des informations spcifiques au
dpannage FTP. Cette TechNote se trouve ladresse www.adobe.com/go/kb405912.
Il se peut que la mise en uvre FTP de Dreamweaver ne fonctionne pas correctement

avec certains serveurs proxy, pare-feu multiniveaux et autres formes daccs indirect un
serveur. Si vous avez des problmes daccs FTP, demandez laide de votre
administrateur systme.
Pour la mise en uvre FTP de Dreamweaver, il est indispensable de se connecter au
dossier racine du systme distant. Veillez dsigner le dossier racine du systme distant
en tant que rpertoire hte. Si vous avez spcifi le rpertoire hte avec une seule barre
oblique (/), vous aurez peut-tre besoin de spcifier un chemin relatif entre le rpertoire
auquel vous vous connectez et le dossier racine distant. Si, par exemple, le dossier
racine distant est un rpertoire de niveau suprieur, vous pouvez avoir besoin de
spcifier ../../ pour le rpertoire hte.
Utilisez des traits de soulignement la place des espaces, et vitez, dans la mesure du
possible, dutiliser des caractres spciaux pour les noms de fichiers et de dossiers. La
prsence de symboles deux points, de barres obliques, de points et dapostrophes dans
les noms de fichiers ou de dossiers peut parfois causer des problmes.
En cas de problme avec un nom de fichier long, raccourcissez ce nom. Sous Mac OS,
les noms de fichiers ne peuvent pas comporter plus de 31 caractres.
Notez que certains serveurs utilisent ce qui est appel, suivant le systme dexploitation,
des liens symboliques (Unix), des raccourcis (Windows) ou des alias (Macintosh), pour
connecter un dossier situ en un point du disque du serveur un autre dossier situ
130
ailleurs. Ces alias nont gnralement pas deffet ngatif sur votre capacit vous
connecter au dossier ou rpertoire appropri, mais si vous ne pouvez vous connecter
qu une partie du serveur, il sagit peut-tre dun problme dalias.
Si vous dcouvrez un message derreur du type impossible de placer le fichier , votre
dossier distant peut tre satur. Pour plus dinformations, consultez le journal FTP.
Remarque : en gnral, si vous avez un problme durant un transfert via FTP, examinez
le journal FTP en choisissant Fentre > Rsultats (Windows) ou Site > Journal FTP
(Macintosh), puis en cliquant sur longlet Journal FTP.
131
Options de la bote de dialogue Grer les sites

Options de la bote de dialogue Grer les sites (CS6 et versions ultrieures)
Options de la bote de dialogue Grer les sites (CS5 et CS5.5)
La bote de dialogue Grer les sites vous donne accs diverses fonctions de gestion de site dans Dreamweaver. A partir de cette bote de
dialogue, vous pouvez lancer le processus de cration d'un nouveau site, modifier un site existant, copier un site, supprimer un site ou importer et
exporter les paramtres d'un site.
Remarque : La bote de dialogue Grer les sites ne vous permet pas de vous connecter un serveur distant ou d'y publier des fichiers. Pour plus
d'informations sur la connexion un serveur distant, consultez la section Connexion un serveur distant. Si vous voulez vous connecter un site
Web existant, consultez la section Modification d'un site Web distant existant.
En haut
Options de la bote de dialogue Grer les sites (CS6 et versions ultrieures)

Une liste de sites s'affiche. Si vous n'avez pas encore cr de sites, la liste de sites est vide.
Crer un nouveau site Cliquez sur le bouton Nouveau site pour crer un nouveau site Dreamweaver. Ensuite, spcifiez le
nom et l'emplacement de votre nouveau site dans la bote de dialogue Configuration du site. Pour plus d'informations,
consultez la section Cration d'une version locale de votre site.
Importation d'un site Cliquez sur le bouton Importer le site pour importer un site. Pour plus d'informations, consultez la
section Importation et exportation des paramtres d'un site.
Remarque : La fonction d'importation se limite importer les paramtres de site qui ont t exports prcdemment depuis
Dreamweaver. Elle n'importe pas des fichiers de site afin de crer un nouveau site Dreamweaver. Pour plus d'informations sur
la cration d'un nouveau site dans Dreamweaver, voir Cration d'une version locale de votre site.
Crer un nouveau site Business Catalyst Cliquez sur le bouton Nouveau site Business Catalyst pour crer un nouveau site
Business Catalyst. Pour plus d'informations, consultez la section Cration d'un site Business Catalyst temporaire.
Importation d'un site Business Catalyst Cliquez sur le bouton Importer un site Business Catalyst pour importer un site
Business Catalyst. Pour plus d'informations, consultez la section Importation d'un site Business Catalyst temporaire.
3. Pour les sites existants, les options suivantes sont galement disponibles :
Supprimer
Supprime le site slectionn et toutes ses informations de configuration de la liste de sites Dreamweaver ; les
fichiers du site proprement dits ne sont pas supprims. Si vous souhaitez supprimer les fichiers du site de votre ordinateur,
vous devez le faire manuellement. Pour supprimer un site de Dreamweaver, slectionnez-le dans la liste des sites, puis
cliquez sur le bouton Supprimer. Cette opration est irrversible.
Modifier
Permet de modifier des informations comme le nom d'utilisateur, le mot de passe et les informations sur le
serveur d'un site Dreamweaver existant. Slectionnez le site existant dans la liste des sites, puis cliquez sur le bouton Modifier
132
pour modifier le site existant. La bote de dialogue Configuration du site s'ouvre lorsque vous cliquez sur le bouton Modifier
pour un site slectionn. Pour plus d'informations sur la modification d'options d'un site existante, cliquez sur le bouton Aide
dans les diffrents crans de la bote de dialogue Configuration du site.
Dupliquer
Cre une copie d'un site existant. Pour dupliquer un site, slectionnez-le dans la liste des sites, puis cliquez sur
le bouton Dupliquer. Le site dupliqu s'affiche dans la liste des site, le mot copie tant ajout au nom du site. Pour modifier
le nom du site dupliqu, slectionnez-le puis cliquez sur le bouton Modifier.
Exporter
Permet d'exporter les paramtres du site slectionn sous forme de fichier XML (*.ste). Pour plus d'informations,
consultez la section Importation et exportation des paramtres d'un site.
En haut
Options de la bote de dialogue Grer les sites (CS5 et CS5.5)
1. Slectionnez Site > Grer les sites puis slectionnez un site dans la liste de gauche.
2. Cliquez sur un bouton pour slectionner l'une des options, apportez les modifications dsires, puis cliquez sur Termin.
Nouveau Permet de crer un nouveau site. Lorsque vous cliquez sur le bouton Nouveau, la bote de dialogue Configuration
du site s'affiche et vous invite entrer le nom et dfinir l'emplacement de votre nouveau site. Pour plus d'informations,
consultez la section Cration d'une version locale de votre site.
Modifier Permet de modifier des informations comme le nom d'utilisateur, le mot de passe et les informations sur le serveur
d'un site Dreamweaver existant. Slectionnez le site existant dans la liste des sites sur la gauche, puis cliquez sur le bouton
Modifier pour modifier le site existant. Pour plus d'informations sur la modification d'options d'un site existant, consultez la
section Connexion un serveur distant.
Dupliquer Cre une copie d'un site existant. Pour dupliquer un site, slectionnez-le dans la liste de gauche, puis cliquez sur
le bouton Dupliquer. Le site dupliqu s'affiche dans la liste des site, le mot copie tant ajout au nom du site. Pour modifier
le nom du site dupliqu, slectionnez-le puis cliquez sur le bouton Modifier.
Supprimer Supprime le site slectionn et toutes ses informations de configuration de la liste de sites Dreamweaver ; les
fichiers du site proprement dits ne sont pas supprims. Si vous souhaitez supprimer les fichiers du site de votre ordinateur,
vous devez le faire manuellement. Pour supprimer un site de Dreamweaver, slectionnez-le dans la liste des sites, puis
cliquez sur le bouton Supprimer. Cette opration est irrversible.
Exporter/Importer Permet d'exporter les paramtres du site slectionn sous la forme d'un fichier XML (*.ste), ou d'importer
les paramtres d'un site. Pour plus d'informations, consultez la section Importation et exportation des paramtres d'un site.
Remarque : La fonction d'importation se limite importer les paramtres de site qui ont t exports prcdemment. Elle
n'importe pas des fichiers de site afin de crer un nouveau site Dreamweaver. Pour plus d'informations sur la cration d'un
nouveau site dans Dreamweaver, voir Cration d'une version locale de votre site.
Les publications Twitter et Facebook ne sont pas couvertes par les dispositions de Creative Commons.
133

A propos de lURL web pour le serveur de test
Si vous envisagez de crer des pages dynamiques, Dreamweaver doit disposer dun serveur de test, de
faon pouvoir gnrer et afficher du contenu dynamique pendant votre travail. Ce serveur de test peut se
trouver sur votre ordinateur local, un serveur de dveloppement, un serveur intermdiaire ou un serveur de
production.
Dreamweaver synchronise automatiquement les documents dynamiques vers votre serveur de test ds leur
ouverture, leur cration ou leur enregistrement. Pour plus dinformations, voir Envoi automatique des fichiers
dynamiques.
Haut de la page

existant puis cliquez sur licne de modification.
Remarque : vous devez entrer une URL web dans lcran Base lorsque vous spcifiez
un serveur de test. Pour plus dinformations, voir la section suivante.
5. Sous Serveur de test, slectionnez le modle de serveur utiliser pour votre application
web.
Remarque : depuis la version CS5, Dreamweaver ninstalle plus de comportements de
serveur ASP.NET, ASP JavaScript ou JSP. (Vous pouvez ractiver les comportements
de serveur dconseills manuellement si vous le souhaitez, mais noubliez pas que
Dreamweaver ne les prend officiellement plus en charge.) Toutefois, si vous travaillez sur
des pages ASP.NET, ASP JavaScript ou JSP, Dreamweaver continuera prendre en
charge le mode En direct, la coloration de code et les conseils de code pour ces pages.
Pour que ces fonctionnalits soient oprationnelles, il nest pas ncessaire de
slectionner ASP.NET, ASP JavaScript ou JSP dans la bote de dialogue Dfinition du
site.
6. Cliquez sur Enregistrer pour fermer lcran Avanc. Ensuite, dans la catgorie Serveurs,
spcifiez le serveur que vous venez dajouter ou de modifier comme serveur de test.
Haut de la page
A propos de lURL web pour le serveur de test

134
Vous devez dfinir une URL web pour que Dreamweaver puisse employer un serveur de test pour afficher
des donnes et se connecter aux bases de donnes pendant votre travail. Dreamweaver utilise la connexion
en cours de cration pour vous fournir des informations utiles au sujet de la base de donnes, comme le nom
des tables de la base de donnes et le nom des colonnes de ces tables.
LURL web dun serveur de test est constitue du nom de domaine et du nom dun sous-rpertoire ou dun
rpertoire virtuel du rpertoire de base de votre site web.
Remarque : bien que cette terminologie, utilise dans Microsoft IIS, puisse diffrer dun serveur lautre, les
mmes concepts sappliquent la plupart des serveurs web.
Rpertoire de base Dossier qui, sur le serveur, est mapp 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 rpertoire de base (cest--dire que ce dossier est mapp sur le nom de domaine de votre
site, par exemple www.mystartup.com). Dans ce cas, le prfixe dURL est http://www.mystartup.com/.
Si le dossier que vous souhaitez utiliser pour le traitement des pages dynamiques est un sous-dossier du
rpertoire de base, ajoutez ce sous-dossier lURL. Supposons que votre rpertoire de base est
c:\sites\company\, que le nom de domaine de votre site est www.mystartup.com et que le dossier utiliser
pour traiter les pages dynamiques est c:\sites\company\inventory. Entrez lURL web suivante :
http://www.mystartup.com/inventory/
Si le dossier utiliser pour traiter les pages dynamiques nest pas votre rpertoire de base ni lun de ses
sous-rpertoires, vous devez crer un rpertoire virtuel.
Rpertoire virtuel Dossier qui ne se trouve pas physiquement dans le rpertoire de base du serveur, mme
sil apparat dans lURL. Pour crer un rpertoire virtuel, spcifiez un alias reprsentant le chemin du dossier
dans lURL. Supposons que votre rpertoire de base soit c:\sites\company et votre dossier de traitement
d:\apps\inventory, et que vous ayez dfini pour ce dossier lalias warehouse. Entrez lURL web suivante :
http://www.mystartup.com/warehouse/
Localhost Dsigne le rpertoire de base dans vos URL o le client (gnralement un navigateur, mais
Dreamweaver dans le cas prsent) tourne sur le mme systme que votre serveur web. Supposons que
Dreamweaver tourne sur le mme systme Windows que le serveur web. Votre rpertoire de base est
c:\sites\company et vous avez dfini un rpertoire virtuel nomm warehouse pour dsigner le dossier
utiliser pour traiter les pages dynamiques. Les URL web suivantes doivent tre entres pour les serveurs
web slectionns :
Serveur web
URL web
ColdFusion MX 7
http://localhost:8500/warehouse/
IIS
http://localhost/warehouse/
Apache (Windows)
Jakarta Tomcat (Windows)
Remarque : par dfaut, le serveur web ColdFusion MX 7 sexcute sur le port 8500, le serveur web Apache
sur le port 80 et le serveur web Jakarta Tomcat sur le port 8080.
Le rpertoire de base des utilisateurs excutant le serveur web Apache sur Macintosh est le suivant :
Users/MonNomdUtilisateur/Sites (MonNomdUtilisateur correspond votre nom dutilisateur Macintosh).
Linstallation de Mac OS 10.1 ou version suprieure entrane la dfinition automatique dun alias intitul
~MonNomdUtilisateur. Par consquent, votre URL web par dfaut dans Dreamweaver est le suivant :
http://localhost/~MonNomdUtilisateur/
Si le dossier que vous souhaitez utiliser pour le traitement des pages dynamiques correspond
Users:MonNomdUtilisateur:Sites:inventory, lURL web est la suivante :
http://localhost/~MonNomdUtilisateur/inventory/
135
Choix dun serveur dapplication
Haut de la page

Lorsque vous apportez des modifications au code source, que ce soit en mode Code ou En direct, puis
enregistrez un document dynamique, Dreamweaver envoie automatiquement le fichier au serveur de test. Si
les fichiers dpendants du document ne sont pas prsents sur le serveur de test, Dreamweaver les envoie
eux aussi automatiquement. Si les fichiers dpendants du document se trouvent dj sur le serveur, ils ne
sont pas renvoys : seul le document ct serveur est transfr vers le serveur de test.
Veillez prendre en compte les scnarios ci-dessous.
Scnario 1 : vous apportez des modifications au code source et aux fichiers dpendants. Le code source
est slectionn lorsque vous cliquez sur Enregistrer.
Dans ce cas, la bote de dialogue suivante, qui signale tous les fichiers dpendants affects, apparat :
Invitation enregistrer les fichiers dpendants
Vous pouvez alors slectionner les fichiers envoyer sur le serveur de test.
Remarque : pour viter que cette invite ne saffiche nouveau, vous pouvez slectionner loption Toujours
enregistrer automatiquement les fichiers dpendants. Il est possible de revenir sur ce choix tout moment :
pour ce faire, accdez aux paramtres du serveur de test (Configuration du site) et, sous longlet Avanc,
dsactivez loption Toujours enregistrer automatiquement les fichiers dpendants.
136
Option de configuration du serveur Enregistrer automatiquement les fichiers dpendants
Scnario 2 : vous apportez des modifications au code source et aux fichiers dpendants. Lun des fichiers
dpendants est slectionn lorsque vous cliquez sur Enregistrer.
Dans ce cas, seul le fichier dpendant est enregistr et envoy vers le serveur de test.
137
Contrle de version et paramtres avancs

Catgorie Contrle de version
Catgorie Paramtres avancs
Pour accder aux catgories Contrle de version et Paramtres avancs de la bote de dialogue Configuration du site, choisissez Site > Grer les
sites, slectionnez le site modifier, puis cliquez sur Modifier.
En haut
Catgorie Contrle de version

Vous pouvez extraire et archiver des fichiers l'aide de Subversion. Pour plus d'informations, voir Utilisation de Subversion (svn) pour acqurir et
archiver des fichiers.
En haut
Catgorie Paramtres avancs
Infos locales
Dossier des images par dfaut Le dossier dans lequel vous voulez stocker les images de votre site. Tapez le chemin d'accs au dossier, ou
cliquez sur l'icne du dossier pour trouver le dossier et le slectionner. Dreamweaver utilise le chemin d'accs au dossier lorsque vous ajoutez
des images aux documents.
Liens relatifs Dtermine le type de liens que Dreamweaver cre lorsque vous crez des liens vers d'autres actifs ou pages dans votre site.
Dreamweaver peut crer deux types de liens : des liens relatifs au document et des liens relatifs la racine du site. Pour plus d'informations sur
les diffrences entre les deux, voir Chemins absolus, relatifs au document et relatifs la racine du site.
Par dfaut, Dreamweaver cre des liens relatifs au document. Si vous modifiez le paramtre par dfaut et activez l'option Racine du site, veillez
entrer l'URL Web correcte pour le site dans la zone URL Web (voir ci-dessous). La modification de ce paramtre ne convertit pas le chemin des
liens existants ; il s'applique uniquement aux nouveaux liens que vous crez visuellement l'aide de Dreamweaver.
Remarque : Le contenu li par des liens relatifs la racine du site ne s'affiche pas lorsque vous prvisualisez des documents dans un navigateur
local, sauf si vous dfinissez un serveur d'valuation ou que vous activez l'option Prvisualiser l'aide d'un fichier temporaire dans Edition >
Prfrences > Aperu dans navigateur. En effet, la diffrence 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 crer des liens relatifs la racine du site et pour vrifier les liens
lorsque vous employez la fonction de vrification des liens.
Les liens relatifs la racine du site sont utiles si vous n'tes pas sr de l'emplacement final, dans la structure des rpertoires, de la page sur
laquelle vous travaillez, ou si vous pensez qu'il pourrait vous arriver de dplacer ou de rorganiser ultrieurement des fichiers contenant des liens.
Les liens relatifs la racine du site sont des liens dont les chemins d'accs d'autres actifs du site sont relatifs la racine du site, et non au
document. Ainsi, si vous dplacez le document par la suite, le chemin d'accs ces actifs reste correct.
Supposons que vous ayez indiqu http://www.mysite.com/mycoolsite (rpertoire racine du site du serveur distant) comme URL Web, et que vous
ayez galement plac un dossier images dans le rpertoire mycoolsite sur le serveur distant (http://www.mysite.com/mycoolsite/images).
Supposons en outre que votre fichier index.html se trouve dans le rpertoire mycoolsite.
Lorsque vous crez un lien relatif la racine du site partir du fichier index.html vers une image situe dans le rpertoire images, le lien se
prsente comme suit :
<img src="/mycoolsite/images/image1.jpg" />
Ce lien est diffrent d'un lien relatif au document, qui serait simplement :
<img src="images/image1.jpg" />
138
L'ajout de /mycoolsite/ la source des images lie l'image par rapport la racine du site, et non au document. En supposant que l'image reste
dans le rpertoire image, le chemin d'accs l'image (/mycoolsite/images/image1.jpg) sera toujours correct, mme si vous dplacez le fichier
index.html dans un autre rpertoire.
Pour plus d'informations, voir Chemins absolus, relatifs au document et relatifs la racine du site.
En ce qui concerne la vrification des liens, l'URL Web est ncessaire pour dterminer si un lien est interne ou externe au site. Par exemple, si
votre URL Web est http://www.mysite.com/mycoolsite et si le vrificateur de liens trouve une URL http://www.yoursite.com sur votre page, il
dtermine que ce dernier lien est externe et le signale comme tel. De mme, le vrificateur de liens utilise l'URL Web pour dterminer si des liens
sont internes au site, puis vrifie si ces liens internes ne sont pas coups.
Vrification des liens sensible la casse Vrifie que la casse des liens correspond celle des noms de fichiers lorsque Dreamweaver vrifie
les liens. Cette option s'adresse plus particulirement aux systmes UNIX, o les noms de fichiers tiennent compte des majuscules et des
minuscules.
Activer le cache Indique s'il faut crer un cache local pour amliorer la vitesse des tches de gestion des liens et du site. Si vous n'activez pas
cette option, Dreamweaver vous demande si vous voulez nouveau crer un cache avant de crer le site. Il est prfrable d'activer cette option,
car le panneau Actifs (du groupe Fichiers) est uniquement oprationnel si un cache est cr.
Voilage et autres catgories

Pour plus d'informations sur les catgories Voilage, Design Notes, Colonnes mode Fichier, Modles ou Spry, cliquez sur le bouton Aide de la bote
de dialogue.
139
Importation et exportation des paramtres d'un site Dreamweaver

Exportation des paramtres de votre site
Importation des paramtres d'un site
Vous pouvez exporter les paramtres de votre site sous la forme d'un fichier XML qui pourra par la suite tre import dans Dreamweaver.
L'exportation/importation de sites vous permet de transfrer les paramtres d'un site vers d'autres ordinateurs et d'autres versions du produit, de
partager les paramtres d'un site avec d'autres utilisateurs et de sauvegarder les paramtres d'un site.
La fonction d'exportation/importation ne permet pas d'importer ou d'exporter les fichiers du site. Elle se limite importer/exporter les paramtres du
site, afin de vous faire gagner du temps lorsque vous recrez des sites dans Dreamweaver. Pour plus d'informations sur la cration d'un nouveau
site dans Dreamweaver, voir Cration d'une version locale de votre site.
Exportez les paramtres de votre site rgulirement, de faon disposer d'une copie de sauvegarde au cas o un incident surviendrait sur ce
site.
En haut
Exportation des paramtres de votre site
2. Slectionnez un ou plusieurs sites dont vous voulez exporter les paramtres, puis cliquez sur Exporter (CS5/CS5.5) ou sur le
(CS6 et versions ultrieures) :
bouton Exporter
Pour slectionner plusieurs sites, appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant avec
la souris sur chaque site.
Pour slectionner une srie de sites, cliquez en maintenant la touche Maj enfonce sur le premier et le dernier site de la
srie.
3. Si vous voulez sauvegarder les paramtres de votre site pour vous, choisissez la premire option de la bote de dialogue
Exportation du site, puis cliquez sur OK. Dreamweaver enregistre les informations de connexion au serveur distant, comme le
nom d'utilisateur et le mot de passe, ainsi que les informations sur le chemin d'accs local.
4. Si vous voulez partager vos paramtres avec d'autres utilisateurs, choisissez la seconde option de la bote de dialogue
Exportation du site, puis cliquez sur OK. Dreamweaver n'enregistre aucune information qui ne fonctionnerait pas pour d'autres
utilisateurs, comme les informations de connexion votre serveur distant et les chemins d'accs locaux.
5. Pour chaque site dont les paramtres doivent tre exports, recherchez un emplacement o vous souhaitez enregistrer le
fichier du site, puis cliquez sur Enregistrer. Dreamweaver enregistre les paramtres de chaque site sous la forme d'un fichier
XML possdant l'extension .ste.
6. Cliquez sur Termin.

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 il se trouve, effectuez sur votre ordinateur une recherche portant sur les fichiers
dots de l'extension *.ste.
En haut
140
Importation des paramtres d'un site
2. Cliquez sur Importer (CS5/CS5.5) ou sur le bouton Importer le site (CS6 et versions ultrieures).
3. Recherchez et slectionnez un ou plusieurs sites (dfinis dans des fichiers ayant une extension .ste) dont vous souhaitez
importer les paramtres.
Pour slectionner plusieurs sites, appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant avec la
souris sur chaque fichier .ste. Pour slectionner une srie de sites, cliquez en maintenant la touche Maj enfonce sur le
premier et le dernier fichier de la srie.
4. Cliquez sur Ouvrir puis sur Termin.
Lorsque Dreamweaver a termin d'importer les paramtres du site, les noms du site s'affichent dans la bote de dialogue
Grer les sites.
Sauvegarde et restauration de dfinitions de site
141
Modification d'un site Web distant existant

Vous pouvez utiliser Dreamweaver pour copier un site distant existant (ou une section de celui-ci) sur votre disque local afin de l'y modifier, mme
si vous n'avez pas cr le site initial dans Dreamweaver. Avant de pouvoir modifier ce site, vous devez disposer des informations de connexion
correctes et vous connecter au serveur distant du site.
1. Crez un dossier local contenant le site existant, puis dfinissez-le en tant que dossier local du site. (Voir Cration d'une
version locale de votre site.)
Remarque : Vous devez copier localement la structure complte de la branche concerne du site distant existant.
2. Configurez un dossier distant en utilisant les informations d'accs distance de votre site existant. Vous devez vous
connecter au site existant pour tlcharger les fichiers sur votre ordinateur avant de pouvoir les modifier. (Voir Connexion un
serveur distant.)
Veillez choisir le dossier racine correct pour le site distant.
3. Dans le panneau Fichiers (Fentre > Fichiers), cliquez sur le bouton Connexion un hte distant (pour un accs FTP) ou sur
le bouton Actualiser (pour un accs rseau) de la barre d'outils afin d'afficher le site distant.
4. Modifiez le site :
Si vous voulez travailler sur le site entier, slectionnez le dossier racine du site distant dans le panneau Fichiers, puis
cliquez sur Obtenir les fichiers dans la barre d'outils afin de tlcharger le site entier sur votre disque local.
Si vous ne voulez travailler que sur l'un des fichiers ou dossiers du site, accdez ce fichier ou dossier dans l'affichage
distant du panneau Fichiers, puis cliquez sur Obtenir les fichiers dans la barre d'outils afin de tlcharger ce fichier sur
votre disque local.
Dreamweaver copie automatiquement la structure du site distant, dans la mesure o elle est ncessaire pour placer le fichier tlcharg dans la
partie correcte de la hirarchie du site. Si vous ne modifiez qu'une partie d'un site, il est en gnral conseill de charger galement les fichiers
dpendants, tels que les fichiers d'image.

Modification d'un site Web existant (blog Dreamweaver)
142
Dfinition des prfrences de site pour le transfert de fichiers

Slectionnez vos prfrences pour le contrle des fonctions de transfert de fichiers dans le panneau Fichiers.
2. Dans la bote de dialogue Prfrences, slectionnez la catgorie Site dans la liste de gauche.
3. Dfinissez les options, puis cliquez sur OK.
Toujours afficher Indique le site (local ou distant) qui doit toujours tre affich ainsi que le volet (gauche ou droit) du panneau
Fichiers dans lequel doivent tre prsents les fichiers locaux et distants.
Par dfaut, le site local apparat toujours dans le volet droit. Le volet qui n'a pas t choisi (celui de gauche par dfaut) sera le
volet interchangeable : il pourra alors afficher les fichiers de l'autre site (le site distant par dfaut).
Fichiers dpendants Affiche une invite proposant de transfrer les fichiers dpendants (images, feuilles de style externes et
autres fichiers rfrencs par les fichiers HTML) qui doivent tre chargs par le navigateur en mme temps que le fichier
HTML. Par dfaut, les options Invite lors de Acqurir/Extraire et Invite lors de Placer/Archiver sont toutes deux actives.
D'une manire gnrale, il est conseill de tlcharger les fichiers dpendants lorsque le fichier extrait est un nouveau fichier,
mais c'est inutile si les versions les plus rcentes des fichiers dpendants sont dj prsentes sur le disque local. Cela
s'applique galement lors du transfert et de l'archivage de fichiers : il n'est pas ncessaire si des copies mises jour sont dj
prsentes dans la destination.
Si vous dsactivez ces options, vos fichiers dpendants ne sont pas transfrs. Ainsi, pour forcer l'affichage la bote de
dialogue Fichiers dpendants mme lorsque ces options sont dslectionnes, maintenez la touche Alt (Windows) ou
Option (Macintosh) enfonce tout en choisissant Acqurir, Placer, Archiver ou Extraire.
Connexion FTP Dtermine si la connexion avec le site distant doit tre interrompue aprs le dlai d'inactivit spcifi.
Dlai FTP Indique le temps, exprim en secondes, pendant lequel Dreamweaver tente d'tablir une connexion avec le serveur
distant.
S'il n'y a toujours pas de rponse l'issue du dlai indiqu, Dreamweaver affiche une bote de dialogue pour vous en avertir.
Options de transfert FTP Dtermine si Dreamweaver slectionne l'option par dfaut aprs un nombre de secondes spcifi,
lorsqu'une bote de dialogue apparat lors du transfert d'un fichier et que l'utilisateur ne fournit aucune rponse.
Hte proxy Spcifie l'adresse du serveur proxy par lequel vous vous connectez aux serveurs externes si vous vous trouvez
derrire un pare-feu.
Dans le cas contraire, laissez ce champ vierge. Si vous vous trouvez derrire un pare-feu, activez l'option Utiliser un proxy de
la bote de dialogue Dfinition du site (Serveurs > Modifier un serveur existant (icne reprsentant un crayon) > Autres
options).
Port du proxy Spcifie 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'intermdiaire d'un port autre que 21 (port par dfaut pour FTP), tapez son numro ici.
Options de placement : Enregistrer les fichiers avant de les placer Indique que les fichiers non enregistrs sont
automatiquement enregistrs avant d'tre placs sur le site distant.
Options de dplacement : Demander avant de dplacer les fichiers sur le serveur Vous alerte lorsque vous tentez de
dplacer des fichiers sur le site distant.
Grer les sites Ouvre la bote de dialogue Grer les sites, dans laquelle vous pouvez crer un site ou modifier un site
existant.
Vous pouvez dfinir si les types de fichiers transfrs doivent l'tre au format ASCII (texte) ou binaire, et ce en
personnalisant le fichier FTPExtensionMap.txt situ dans le dossier Dreamweaver/Configuration (sur Macintosh, il s'agit du
fichier FTPExtensionMapMac.txt). Pour plus d'informations, voir Extension de Dreamweaver.
143
Dfinition des paramtres du serveur proxy

Plusieurs fonctionnalits de Dreamweaver ncessitent une connexion Internet. Si les connexions Internet de
votre entreprise transitent par un serveur proxy, vous devez indiquer les informations didentification de ce
dernier pour que Dreamweaver puisse se connecter Internet.
Pour cela, vous pouvez utiliser lapplication de bureau Adobe Creative Cloud. Au premier lancement, celle-ci
dtermine si les connexions Internet passent par un serveur proxy. Si un serveur proxy est dj configur,
vous tes invit fournir ses informations didentification. Si lapplication de bureau Creative Cloud est dj
installe et que le serveur proxy est configur dans un second temps, l encore lapplication dtecte le proxy
et demande les informations didentification requises :
Paramtres du serveur proxy dans lapplication de bureau Adobe Creative Cloud
Quand Dreamweaver cherche tablir une connexion Internet, il voit que les informations didentification ont
dj t entres et sauvegardes dans lapplication de bureau Creative Cloud et il les reprend
automatiquement.
Si vous tes un client dentreprise et que linstallation existante ninclut pas lapplication de bureau Creative
144
Cloud, Dreamweaver vous demande de fournir les informations didentification du serveur proxy :
Paramtres du serveur proxy demands par Dreamweaver
Remarque : contactez votre administrateur systme pour toute question relative aux informations
didentification du serveur proxy.
145
146
Cration et ouverture de documents

Linterface utilisateur de Dreamweaver CC et versions ultrieures a t simplifie. Par consquent, il se peut que vous ne trouviez pas certaines
options dcrites dans cet article dans Dreamweaver CC et les versions ultrieures. Pour plus dinformations, voir cet article.
A propos de la cration de documents Dreamweaver

Types de fichier Dreamweaver
Cration dune mise en page laide une page vierge
Cration dun modle vierge
Cration dune page base sur un modle existant
Cration dun document bas sur un fichier dexemple Dreamweaver
Cration dautres types de pages
Enregistrement et rtablissement de documents
Dfinition du type et du codage par dfaut dun document
Conversion de HTML5 vers un ancien doctype
Dfinition de lextension de fichier par dfaut de nouveaux documents HTML
Ouverture et modification de documents existants
Ouverture de fichiers association dynamique
Nettoyage de fichiers HTML crs avec Microsoft Word
Haut de la page
A propos de la cration de documents Dreamweaver

Dreamweaver fournit un environnement souple pour lutilisation de divers documents Web. Outre les documents HTML, vous pouvez crer et
ouvrir divers documents en mode texte, de type CFML (ColdFusion Markup Language), ASP, JavaScript et CSS (Cascading Style Sheets, feuilles
de style en cascade). Les fichiers de code source, tels que Visual Basic, .NET, C# et Java, sont galement pris en charge.
Dreamweaver propose diverses options pour la cration dun nouveau document. Vous pouvez crer les types de document suivants :
un nouveau document ou un modle vierge ;

un document bas sur lune des mises en pages prdfinies fournies avec Dreamweaver, dont plus de 30 mises en page
bases sur CSS ;
un document bas sur un de vos modles existants.
Vous pouvez galement dfinir les prfrences des documents. Par exemple, si vous avez lhabitude de travailler avec un type
particulier de document, vous pouvez le dfinir comme type par dfaut pour les nouvelles pages.
Vous pouvez aisment dfinir des proprits de document, telles que les balises meta, le titre du document et la couleur de
larrire-plan, ainsi que dautres proprits de page, en mode Cration ou en mode Code.
Haut de la page
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 base de balises qui se charge dafficher
une page Web dans un navigateur. Vous pouvez enregistrer les fichiers HTML avec lextension .html ou .htm. Dreamweaver enregistre par dfaut
les fichiers avec lextension .html.
Dreamweaver permet de crer et de modifier des pages Web HTML5. Les mises en forme de dpart sont galement disponibles pour la cration
de nouvelles pages HTML5.
147
Voici quelques autres types de fichiers courants que vous pourriez utiliser quand vous travaillez avec Dreamweaver :
CSS Les fichiers CSS (Cascading Style Sheets, feuilles de style en cascade) possdent lextension .css. Ils sont utiliss pour formater le contenu
HTML et fixer le positionnement de divers lments de page.
GIF Les fichiers GIF (Graphics Interchange Format) possdent lextension .gif. Ce format graphique est trs utilis dans les dessins
humoristiques, les logos, les graphismes pourvus de zones transparentes et les animations. Les GIF sont constitus dun maximum de 256
couleurs.
JPEG Les fichiers JPEG (Joint Photographic Experts Group, du nom de lorganisation qui a cr le format) possdent lextension .jpg et
correspondent gnralement des photographies ou des images trs colores. Ce format est le plus appropri pour les photographies
numriques ou scannes, les images utilisant des textures, les images pourvues de transitions gradient de couleurs ainsi que toutes les images
exigeant plus de 256 couleurs.
XML Les fichiers XML (Extensible Markup Language) possdent lextension .xml. Ils contiennent des donnes brutes qui peuvent tre formates
en utilisant XSL (Extensible Stylesheet Language).
XSL Les fichiers XSL (Extensible Stylesheet Language) possdent lextension .xsl ou .xslt. Ils sont utiliss pour crer des donnes XML que vous
voulez afficher sur une page Web.
Haut de la page
Cration dune mise en page laide une page vierge

Vous pouvez crer une page contenant une mise en forme CSS prdfinie, ou crer une page totalement vierge puis crer la mise en forme de
votre choix.
1. Slectionnez Fichier > Nouveau.
2. Dans la catgorie Page vierge de la bote de dialogue Nouveau document, slectionnez le type de page crer dans la
colonne Type de page. Par exemple, slectionnez HTML pour crer une page HTML ordinaire.
3. Si vous voulez que la nouvelle page contienne une mise en forme CSS, slectionnez une mise en forme CSS prdfinie dans
la colonne Mise en forme. Dans le cas contraire, cliquez sur Aucune. En fonction de votre slection, un aperu et la
description de la mise en forme slectionne saffichent sur la droite de la bote de dialogue.
Les mises en forme CSS prdfinies fournissent les types de colonnes suivants :
Fixe La largeur de colonne est dfinie en pixels. La colonne nest pas redimensionne selon la taille du navigateur ou des
paramtres de texte du visiteur du site.
Liquide La largeur de colonne est dfinie en tant que pourcentage de la largeur du navigateur du visiteur du site. La mise en
page sadapte si le visiteur du site augmente ou diminue la largeur de son navigateur, mais pas en fonction des paramtres
de texte dfinis par le visiteur.
Dreamweaver propose galement deux mises en forme CSS HTML5 : deux et trois colonnes fixes.
Remarque : dans Dreamweaver CC et les versions ultrieures, seules les mises en forme CSS HTML5 sont disponibles.
4. Slectionnez un type de document dans le menu DocType. Dans la plupart des cas, vous pouvez utiliser la slection par
dfaut, XHTML 1.0 Transitional ou HTML5 (Dreamweaver CC).
Slectionnez lune des dfinitions de type de document (DTD) XHTML pour rendre la page compatible XHTML. Par exemple,
vous pouvez rendre un document HTML compatible XHTML en slectionnant XHTML 1.0 transitionnel ou XHTML 1.0 Strict
dans le menu droulant. Le langage XHTML (Extensible Hypertext Markup Language) nest autre quune nouvelle mouture de
HTML sous la forme dune application XML. En rgle gnrale, lutilisation de XHTML vous permet dexploiter les avantages
de XML tout en garantissant la compatibilit descendante et ascendante de vos documents Web.
Remarque : pour plus dinformations sur XHTML, consultez le site Web du World Wide Web Consortium (W3C), qui contient
la spcification 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 vous trouverez des fichiers Web (http://validator.w3.org/) et des fichiers locaux
(http://validator.w3.org/file-upload.html).
148
5. Si vous avez choisi une mise en forme CSS dans la colonne Mise en forme, choisissez lemplacement du code CSS de mise
en forme dans la liste droulante CSS de mise en forme.
Ajouter len-tte Ajoute le code CSS de mise en forme len-tte de la page que vous crez.
Crer un nouveau fichier Ajoute le code CSS de mise en forme un nouveau fichier CSS externe et associe la nouvelle
feuille de style la page que vous crez.
Lier au fichier existant Permet dindiquer un fichier CSS existant qui contient dj les rgles CSS requises pour la mise en
forme. Pour ce faire, cliquez sur licne Ajouter une feuille de style au-dessus du volet Lier le fichier CSS, puis slectionnez
une feuille de style CSS existante. Cette option est particulirement utile si vous voulez utiliser la mme mise en forme CSS
(les rgles CSS figurant dans un fichier) dans plusieurs documents.
6. (Facultatif) Vous pouvez galement lier des feuilles de style CSS la nouvelle page (sans rapport avec la mise en forme
CSS) lors de la cration de cette page. Pour ce faire, cliquez sur licne Ajouter une feuille de style
au-dessus du volet Lier
le fichier CSS, puis slectionnez une feuille de style CSS.
Vous trouverez une description dtaille de ce processus dans larticle de David Powers Automatically attaching a style
sheet to new documents (en anglais).
7. Choisissez Activer InContext Editing si vous voulez crer une page qui deviendra compatible avec InContext Editing ds que
vous lenregistrerez.
Une page compatible InContext Editing doit comporter au moins une balise div pouvant tre spcifie en tant que rgion
modifiable. Par exemple, si vous avez slectionn le type de page HTML, vous devez choisir lune des mises en forme CSS
pour votre nouvelle page. Ces mises en forme contiennent en effet des balises div prdfinies. La rgion modifiable
InContext Editing est automatiquement place dans la balise div avec lID content. Si vous le souhaitez, vous pourrez ajouter
par la suite dautres rgions modifiables la page.
Remarque : InContext Editing a t supprim de Dreamweaver CC et des versions ultrieures.
8. Cliquez sur le bouton Prfrences pour dfinir les prfrences par dfaut du document (par exemple, le type de document, le
codage et une extension de fichier).
9. Cliquez sur le lien Obtenir plus de contenu pour lancer Dreamweaver Exchange et tlcharger dautres contenus de
conception de pages.
10. Cliquez sur le bouton Crer.
11. Enregistrez la page (Fichier > Enregistrer).
12. Dans la bote de dialogue qui saffiche, recherchez le dossier o vous voulez enregistrer le fichier.
Il est conseill denregistrer 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 caractres spciaux pour les noms de fichiers et de dossiers ; les noms de fichiers ne doivent pas
commencer par un chiffre. En particulier, nutilisez pas de caractres spciaux (par exemple , ou ) ou de signes de
ponctuation (deux points, barres obliques ou points) dans le nom des fichiers que vous avez lintention de placer sur un
serveur distant. En effet, la plupart des serveurs transforment ces caractres lors du transfert, rendant ainsi inoprants les
liens vers ces fichiers.
Haut de la page
Cration dun modle vierge

La bote de dialogue Nouveau document permet de crer des modles Dreamweaver. Par dfaut, les modles sont enregistrs dans le dossier
Templates de votre site.
2. Dans la bote de dialogue Nouveau document, slectionnez la catgorie Modle vierge.
3. Slectionnez le type de modle crer dans la colonne Type de modle. Par exemple, choisissez Modle HTML pour crer
un modle HTML ordinaire, Modle ColdFusion pour crer un modle ColdFusion, et ainsi de suite.
149
4. Si vous voulez que la nouvelle page contienne une mise en forme CSS, slectionnez une mise en forme CSS prdfinie dans
la colonne Mise en forme. Dans le cas contraire, cliquez sur Aucune. En fonction de votre slection, un aperu et la
description de la mise en forme slectionne saffichent sur la droite de la bote de dialogue.
5. Slectionnez un type de document dans le menu DocType. Dans la plupart des cas, vous pouvez conserver loption par
dfaut, XHTML 1.0 transitionnel.
Slectionnez lune des dfinitions de type de document (DTD) XHTML pour rendre la page compatible XHTML. Par exemple,
vous pouvez rendre un document HTML compatible XHTML en slectionnant XHTML 1.0 transitionnel ou XHTML 1.0 Strict
dans le menu droulant. Le langage XHTML (Extensible Hypertext Markup Language) nest autre quune nouvelle mouture de
HTML sous la forme dune application XML. En rgle gnrale, lutilisation de XHTML vous permet dexploiter les avantages
de XML tout en garantissant la compatibilit descendante et ascendante de vos documents Web.
Remarque : pour plus dinformations sur XHTML, consultez le site Web du World Wide Web Consortium (W3C), qui contient
la spcification 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 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 lemplacement du code CSS de mise
en forme dans la liste droulante CSS de mise en forme.
Crer un nouveau fichier Ajoute le code CSS de mise en forme une nouvelle feuille de style CSS externe et associe la
nouvelle feuille de style la page que vous crez.
forme. Pour ce faire, cliquez sur licne Ajouter une feuille de style
au-dessus du volet Lier le fichier CSS, puis slectionnez
une feuille de style CSS existante. Cette option est particulirement utile si vous voulez utiliser la mme mise en forme CSS
(les rgles CSS figurant dans un fichier) dans plusieurs documents.
CSS) lors de la cration de cette page. Pour ce faire, cliquez sur licne Ajouter une feuille de style
au-dessus du volet Lier
le fichier CSS, puis slectionnez une feuille de style CSS.
8. Choisissez Activer InContext Editing si vous voulez crer une page qui deviendra compatible avec InContext Editing ds que
vous lenregistrerez.
Une page compatible InContext Editing doit comporter au moins une balise div pouvant tre spcifie en tant que rgion
modifiable. Par exemple, si vous avez slectionn le type de page HTML, vous devez choisir lune des mises en forme CSS
pour votre nouvelle page. Ces mises en forme contiennent en effet des balises div prdfinies. La rgion modifiable
InContext Editing est automatiquement place dans la balise div avec lID content. Si vous le souhaitez, vous pourrez ajouter
par la suite dautres rgions modifiables la page.
12. Enregistrez la page (Fichier > Enregistrer). Si vous navez pas encore ajout de rgions modifiables au modle, une bote de
dialogue vous en avertit. Cliquez sur OK pour refermer la bote de dialogue.
150
13. Dans la bote de dialogue Enregistrer sous, slectionnez le site dans lequel le modle doit tre enregistr.
14. Dans la zone de texte Nom de fichier, entrez le nom du nouveau modle. Il nest pas ncessaire dajouter lextension de
fichier au nom du modle. Lorsque vous cliquez sur Enregistrer, lextension .dwt est ajoute au nouveau modle, qui est
enregistr dans le dossier Templates de votre site.
Evitez les espaces et les caractres spciaux pour les noms de fichiers et de dossiers ; les noms de fichiers ne doivent pas
commencer par un chiffre. En particulier, nutilisez pas de caractres spciaux (par exemple , ou ) ou de signes de
ponctuation (deux points, barres obliques ou points) dans le nom des fichiers que vous avez lintention de placer sur un
serveur distant. En effet, la plupart des serveurs transforment ces caractres lors du transfert, rendant ainsi inoprants les
liens vers ces fichiers.
Haut de la page
Cration dune page base sur un modle existant

Vous pouvez slectionner, prvisualiser et crer un nouveau document partir dun modle existant. La bote de dialogue Nouveau document
vous permet de slectionner un modle parmi les sites dfinis dans Dreamweaver ou dutiliser le panneau Actifs pour crer un nouveau document
sur la base dun modle existant.
Cration dun document bas sur un modle

2. Dans la bote de dialogue Nouveau document, slectionnez la catgorie Page du modle.
3. Dans la colonne Site, slectionnez le site Dreamweaver contenant le modle utiliser, puis slectionnez un modle dans la
liste de droite.
4. Dsactivez loption Mettre la page jour quand le modle est modifi si vous ne souhaitez pas que la page soit mise jour
lors de chaque modification apporte au modle sur lequel elle est base.
7. Cliquez sur Crer puis enregistrez le document (Fichier > Enregistrer).
Cration dun document partir dun modle laide du panneau Actifs

1. Ouvrez le panneau Actifs (Fentre > Actifs) sil nest pas dj ouvert.
2. Dans le panneau Actifs, cliquez sur licne Modles
site actuel.
situe gauche pour afficher la liste des modles utiliss dans votre
Si le modle que vous souhaitez utiliser vient dtre cr, il peut tre ncessaire de cliquer sur le bouton Actualiser pour
lafficher.
3. Cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) sur le modle appliquer, puis
slectionnez Nouveau partir dun modle.
Le document souvre dans la fentre de document.
4. Enregistrez le document.
Haut de la page
Cration dun document bas sur un fichier dexemple Dreamweaver

Dreamweaver est fourni avec plusieurs fichiers de conception CSS raliss par des professionnels, ainsi que des pages de dmarrage pour
applications mobiles. Vous pouvez utiliser ces fichiers dexemple comme point de dpart pour la cration de pages sur vos sites Web. Lorsque
vous crez un document bas sur un fichier dexemple, Dreamweaver cre une copie du fichier.
151
La bote de dialogue Nouveau document permet de prvisualiser un fichier dexemple et de consulter une brve description des lments de
conception dun document. Dans le cas de feuilles de style en cascade (CSS), vous pouvez copier une feuille prdfinie pour lappliquer vos
documents.
2. Dans la bote de dialogue Nouveau document, slectionnez la catgorie Page de lexemple.
Dans Dreamweaver CC, slectionnez la catgorie Modles de dpart.
3. Dans la colonne Dossier exemple, choisissez Feuille de style en cascade ou Pages de dmarrage mobiles, puis slectionnez
un fichier dexemple dans la liste de droite.
Remarque : loption Feuille de style CSS a t supprime de Dreamweaver CC et des versions ultrieures
Le nouveau document souvre dans la fentre de document (modes Code et Cration). Si vous avez slectionn Feuille de
style de cascade (CSS), la feuille de style CSS saffiche en mode Code.
5. Enregistrez le document (Fichier > Enregistrer).
6. Si la bote de dialogue Copier les fichiers dpendants saffiche, dfinissez les options, puis cliquez sur Copier pour copier les
actifs dans le dossier slectionn.
Vous pouvez choisir lemplacement des fichiers dpendants ou enregistrer les fichiers dans le dossier par dfaut cr par
Dreamweaver (ce dossier est cr en fonction du nom source du fichier dexemple).
Voir aussi
Haut de la page
Cration dautres types de pages

La catgorie Autre de la bote de dialogue Nouveau document permet de crer divers types de page qui peuvent tre utiles dans Dreamweaver,
comme des pages C#, VBScript et en texte seul.
2. Dans la bote de dialogue Nouveau document, slectionnez la catgorie Autre.
Remarque : la catgorie Autre a t supprime de Dreamweaver CC et des versions ultrieures.
3. Slectionnez le type de document crer dans la colonne Type de page, puis cliquez sur le bouton Crer.
4. Enregistrez le document (Fichier > Enregistrer).
Haut de la page
Enregistrement et rtablissement 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 caractre spcial dans les noms de fichier ou de dossier. En particulier, nutilisez pas de caractres spciaux (par exemple
, ou ) ou de signes de ponctuation (deux points, barres obliques ou points) dans le nom des fichiers que vous avez lintention de placer sur un
serveur distant. En effet, la plupart des serveurs transforment ces caractres lors du transfert, rendant ainsi inoprants les liens vers ces fichiers.
En outre, ne commencez pas le nom de fichier par un chiffre.
Enregistrement dun document

Pour craser la version prsente sur le disque et enregistrer toute modification effectue, slectionnez Fichier >
Enregistrer.
Pour enregistrer le fichier dans un dossier diffrent ou sous un autre nom, slectionnez Fichier > Enregistrer sous.
152
2. Dans la bote de dialogue Enregistrer sous qui saffiche, 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 > Enregistrer tout.
2. Si des documents non enregistrs sont ouverts, la bote de dialogue Enregistrer sous saffiche pour chacun dentre eux.
Dans la bote de dialogue qui saffiche, recherchez le dossier o vous voulez enregistrer le fichier.
3. Dans la zone de texte Nom de fichier, entrez le nom du fichier puis cliquez sur Enregistrer.
Rtablissement de la dernire version enregistre dun document

1. Slectionnez Fichier > Rtablir.
Une bote de dialogue vous invite confirmer lannulation de vos modifications et le retour la version prcdemment
enregistre.
2. Cliquez sur Oui pour revenir la version prcdente ou sur Non pour appliquer les modifications.
Remarque : si vous enregistrez un document puis quittez Dreamweaver, il ne sera pas possible de revenir la version
prcdente du document lors de la prochaine utilisation de Dreamweaver.
Haut de la page
Dfinition du type et du codage par dfaut dun document

Vous pouvez dfinir le type de document par dfaut utilis pour un site.
Par exemple, si la plupart des pages de votre site sont de type spcifique (tel que les documents ColdFusion, HTML ou ASP), vous pouvez dfinir
des prfrences de document pour crer automatiquement les nouveaux documents de ce type.
Vous pouvez galement cliquer sur le bouton Prfrences dans la bote de dialogue Nouveau document pour dfinir les
nouvelles prfrences lies au document en cours de cration.
2. Cliquez sur la catgorie Nouveau document dans la liste de gauche.
3. Dfinissez ou modifiez les prfrences selon vos besoins, puis cliquez sur OK pour les enregistrer.
Document par dfaut Slectionnez le type de document qui sera employ pour les pages que vous crez.
Extension par dfaut Indiquez lextension de fichier que vous prfrez (.htm ou .html) pour les nouvelles pages HTML que
vous crerez.
Remarque : cette option est dsactive pour les autres types de fichiers.
Type de document par dfaut (DDT) Slectionnez lune des dfinitions 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
slectionnant XHTML 1.0 transitionnel ou XHTML 1.0 strict dans le menu droulant.
Codage par dfaut Spcifie le codage utiliser lorsque vous crez une page ou que vous ouvrez un document ne spcifiant
aucun codage.
Si vous slectionnez Unicode (UTF 8) en tant que codage de document, le codage dentit est superflu dans la mesure o
UTF 8 permet de reprsenter de faon fiable tous les caractres. Si vous slectionnez un autre codage de document, le
codage dentit peut tre ncessaire pour reprsenter certains caractres. Pour plus dinformations sur les entits de
153
caractres, voir www.w3.org/TR/REC-html40/sgml/entities.html.

Si vous slectionnez Unicode (UTF 8) en tant que code par dfaut, vous pouvez inclure une marque BOM (Byte Order Mark)
dans le document en slectionnant loption Inclure une signature Unicode (BOM).
Il sagit dune marque constitue de 2 4 octets placs au dbut dun fichier texte identifiant un fichier comme tant au format
Unicode et, dans ce cas, lordre des octets suivants. Le code UTF 8 ne prsentant pas dordre octet, lajout dune marque
BOM UTF 8 est facultatif. Dans le cas dUTF 16 et UTF 32, cette marque est obligatoire.
Formulaire de normalisation Unicode Activez lune de ces options si vous slectionnez Unicode (UTF 8) en tant que code
par dfaut.
Il existe quatre Formulaires de normalisation Unicode. Le plus important est le Formulaire de normalisation Unicode C, car il
est le plus utilis dans le Modle de caractres li au World Wide Web, mais Adobe fournit galement les trois autres
Formulaires de normalisation Unicode.
Afficher la bote de dialogue Nouveau document si Ctrl+N Dsactivez cette option (baptise Commande+N sur
Macintosh) pour appliquer automatiquement le type par dfaut au nouveau document cr lorsque vous utilisez la touche de
commande.
Certains caractres Unicode semblent visuellement similaires mais peuvent tre stocks de diffrentes manires dans le
document. Par exemple, (e trma) peut tre reprsent sous la forme dun seul caractre, e trma ou de deux
caractres, e Latin ordinaire + trma . Un caractre Unicode de combinaison est un caractre associ au caractre
prcdent, ce qui fait apparatre le trma au-dessus du e Latin. Les deux formes donnent la mme typographie visuelle,
alors que chacune est enregistre diffremment dans le fichier.
La normalisation est le processus consistant sassurer que tous les caractres pouvant tre enregistrs sous diffrentes
formes le sont tous sous la mme forme. Cest--dire que tous les caractres dun document sont enregistrs sous
forme de e trma unique ou de e + trma de combinaison , mais pas sous les deux formes dans un mme document.
Pour plus dinformations sur la Normalisation Unicode et les formulaires spcifiques pouvant tre utiliss, consultez le site
Web Unicode www.unicode.org/reports/tr15.
Haut de la page
Conversion de HTML5 vers un ancien doctype

Lemploi de Fichier > Convertir pour passer de HTML5 vers un ancien DOCTYPE ne supprime pas les lments et attributs HTML5. Seul le
DOCTYPE change et des barres obliques (pour XHTML) sont insres la fin.
Les balises smantiques telles que <header> et <article>, ainsi que les attributs tels que required, placeholder et type="number", ne
sont pas affects.
Remarque : loption Convertir a t supprime de Dreamweaver CC et des versions ultrieures.
Haut de la page
Dfinition de lextension de fichier par dfaut de nouveaux documents HTML

Vous pouvez dfinir lextension de fichier par dfaut de documents HTML crs dans Dreamweaver. Par exemple, vous pouvez utiliser une
extension .htm ou .html pour tous les nouveaux documents HTML.
Vous pouvez galement cliquer sur le bouton Prfrences dans la bote de dialogue Nouveau document pour dfinir les
nouvelles prfrences lies au document en cours de cration.
2. Cliquez sur la catgorie Nouveau document dans la liste de gauche.
3. Assurez-vous que HTML est bien slectionn dans le menu Document par dfaut.
4. Dans la zone de texte Extension par dfaut, spcifiez lextension de fichier que vous souhaitez utiliser pour les nouveaux
documents HTML crs dans Dreamweaver.
Sous Windows, vous pouvez spcifier les extensions suivantes : .html, .htm, .shtml, .shtm, .stm, .tpl, .lasso, .xhtml.
Sous Macintosh, vous pouvez spcifier les extensions suivantes : .html, .htm, .shtml, .shtm, .tpl, .lasso, .xhtml, .ssi.
154
Haut de la page

Vous pouvez ouvrir une page Web existante ou un document texte, mme si celui-ci na pas t cr avec Dreamweaver, et le modifier en mode
Code ou en mode Cration.
Si le document que vous ouvrez est un fichier Microsoft Word enregistr au format HTML, il est conseill dutiliser la commande Nettoyage du
HTML Word pour supprimer les balises superflues ajoutes par Word au fichier HTML.
Pour nettoyer un fichier HTML ou XHTML non gnr par Microsoft Word, utilisez la commande Nettoyage du HTML.
Vous pouvez galement ouvrir des fichiers texte non HTML, comme des fichiers JavaScript, XML, feuilles de style en cascade (CSS) ou des
fichiers texte enregistrs dans des traitements de texte ou des diteurs de texte.
1. Choisissez Fichier > Ouvrir.
Vous pouvez galement utiliser le panneau Fichiers pour ouvrir les fichiers.
2. Recherchez et slectionnez le fichier ouvrir.
Remarque : si cette opration na pas encore t effectue, il est conseill dorganiser les fichiers que vous comptez ouvrir
et modifier au sein dun site Dreamweaver, au lieu de les ouvrir depuis un autre emplacement.
3. Cliquez sur le bouton Ouvrir.
Le document souvre dans la fentre de document. Par dfaut, JavaScript, le texte et les feuilles de style en cascade (CSS)
souvrent en mode Code. Vous pouvez mettre jour le document pendant que vous travaillez dans Dreamweaver, puis
enregistrer les modifications dans le fichier.
Haut de la page

Dreamweaver permet de visualiser les fichiers associs votre document principal, tout en restant focalis sur ce dernier. Par exemple, si des
fichiers CSS et JavaScript sont joints un document principal, Dreamweaver permet dafficher et de modifier ces fichiers associs dans la fentre
de document tout en laissant le document principal visible.
Remarque : les fichiers association dynamique (comme les fichiers PHP de systmes de gestion du contenu) sont abords dans la prochaine
section daide.
Par dfaut, Dreamweaver affiche le nom de tous les fichiers apparents au document principal dans une barre doutils Fichiers apparents, sous
le titre du document principal. Lordre des boutons de cette barre doutils suit lordre des liens vers les fichiers associs dans le document principal.
Remarque : si un fichier associ est manquant, Dreamweaver affiche quand mme le bouton correspondant dans la barre doutils Fichiers
associs. Toutefois, si vous cliquez sur ce bouton, Dreamweaver naffiche rien.
Dreamweaver prend en charge les types de fichiers associs suivants :
Fichiers de script ct client

Inclusions ct serveur
Sources densembles de donnes Spry (XML et HTML)
Feuilles de style CSS externes (dont les feuilles de style imbriques)
Ouverture dun fichier associ partir de la barre doutils Fichiers associs

155
Dans la barre doutils Fichiers associs en haut du document, cliquez sur le nom du fichier associ ouvrir.
Dans la barre doutils Fichiers associs en haut du document, cliquez laide du bouton droit de la souris sur le nom du fichier
associ ouvrir, puis choisissez Ouvrir en tant que fichier spar dans le menu. Lorsque vous utilisez cette mthode pour
ouvrir un fichier associ, le document principal ne reste pas visible simultanment.
Ouverture dun fichier associ partir de la fentre Navigation dans le code

1. Placez le point dinsertion sur une ligne ou dans une zone dont vous savez quelle est influence par un fichier associ.
2. Attendez que lindicateur Navigation dans le code saffiche, puis cliquez dessus pour ouvrir la fentre Navigation dans le code.
3. Vous pouvez survoler les lments de la fentre Navigation dans le code afin dafficher davantage dinformations leur sujet.
Par exemple, si vous voulez modifier une proprit de couleur CSS prcise mais que vous ignorez dans quelle rgle elle se
trouve, vous pouvez trouver cette rgle en survolant les rgles disponible dans la fentre Navigation dans le code.
4. Cliquez sur llment qui vous intresse afin douvrir le fichier associ correspondant.
Retour au code source du document principal

Cliquez sur le bouton Code source de la barre doutils Fichiers apparents.
Modification de laffichage de fichiers associs

Vous pouvez afficher les fichiers associs de diverses manires :
Lorsque vous ouvrez un fichier apparent depuis le mode Cration ou le mode Code et Cration (mode Fractionn), ce fichier
saffiche dans une fentre fractionne au-dessus du mode Cration du document principal.
Vous pouvez choisir Affichage > Mode Cration en haut pour que le fichier associ saffiche plutt dans le bas de la fentre de
document.
Lorsque vous ouvrez un fichier associ depuis le mode Code et Cration fractionn verticalement (Affichage > Fractionner
verticalement), ce fichier saffiche dans une fentre fractionne ct du mode Cration du document principal.
Selon lendroit o vous voulez placer le mode Cration, vous pouvez activer ou dsactiver loption Affichage > Mode Cration
gauche.
Lorsque vous ouvrez un fichier associ depuis le mode Code et Cration fractionn ou fractionn verticalement (Affichage >
Mode Fractionn ou Affichage > Fractionner verticalement), le fichier associ saffiche dans une fentre fractionne en
dessous, au-dessus ou ct du code source du document principal, en fonction des options que vous avez slectionnes.
Le mode Code dans loption daffichage fait rfrence au code source du document principal. Par exemple, si vous
choisissez Affichage > Mode Code en haut, Dreamweaver affiche le code source du document principal dans la moiti
suprieure de la fentre de document. Si vous choisissez Affichage > Mode Code gauche, Dreamweaver affiche le code
source du document principal sur le ct gauche de la fentre de document.
Le mode Code standard ne permet pas dafficher les documents apparents en mme temps que le code source du document
principal.
Dsactivation des fichiers associs

2. Dans la catgorie Gnral, dsactivez Activer les fichiers apparents.
Haut de la page
Ouverture de fichiers association dynamique

La fonction Fichiers association dynamique accrot les possibilits de la fonction Fichiers associs, en vous permettant de voir les fichiers
156
associs aux pages dynamiques dans la barre doutils Fichiers associs. Plus prcisment, la fonction Fichiers association dynamique permet
de voir les nombreuses inclusions dynamiques requises pour gnrer le code dexcution des cadres CMS (systme de gestion du contenu) PHP
ouverts les plus populaires, tels que WordPress, Drupal et Joomla!.
Pour pouvoir utiliser la fonction Fichiers association dynamique, vous devez avoir accs un serveur dapplications PHP local ou distant qui
excute WordPress, Drupal ou Joomla!. Une approche courante du test de pages consiste configurer un serveur dapplications PHP sur
localhost puis tester les pages localement.
Avant de tester les pages, vous devez effectuer les oprations suivantes :
Crez un site Dreamweaver et assurez-vous que vous avez bien complt la zone de texte URL Web de la bote de dialogue
Configuration du site.
Configurez un serveur dapplications PHP.
Remarque : le serveur doit tre en cours dexcution avant que vous ne tentiez dutiliser des fichiers association dynamique
dans Dreamweaver.
Installez WordPress, Drupal ou Joomla! sur le serveur dapplications. Pour plus de dtails, voir :
Installation de WordPress
Installation de Drupal
Installation de Joomla
Dans Dreamweaver, dfinissez un fichier local o vous allez tlcharger et modifier vos fichiers de CMS.
Dfinissez lemplacement des fichiers de WordPress, Drupal ou Joomla! installs comme dossier distant et de test.
Tlchargez (obtenez) vos fichiers de CMS depuis le dossier distant.
Dfinition des prfrences relatives aux fichiers association dynamique

Lorsque vous ouvrez une page lie des fichiers 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 dfaut, la recherche se
fait manuellement.
1. Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Mac OS).
2. Dans la catgorie Gnral, assurez-vous que loption Activer les fichiers associs est bien active.
3. Slectionnez Manuellement ou Automatiquement dans le menu Fichiers association dynamique. Vous pouvez galement
dsactiver compltement la recherche en choisissant loption Dsactiv.
Dcouvrir les fichiers association dynamique

1. Ouvrez une page laquelle des fichiers association dynamique sont lis, par exemple la page index.php la racine dun
site WordPress, Drupal ou Joomla! .
2. Si la recherche de fichiers association dynamique se fait manuellement (option par dfaut), cliquez sur le lien Dcouvrir dans
la barre Informations, dans le haut de la fentre Document.
Si la recherche de fichiers association dynamique se fait automatiquement, la liste des fichiers association dynamique
saffiche dans la barre doutils Fichiers associs.
Lordre des fichiers associs et association dynamiques dans la barre doutils Fichiers associs est le suivant :
Fichiers associs statiques (c.--d. fichiers nexigeant aucun traitement dynamique)

Fichiers associs externes (c.--d. fichiers .css et .js) qui sont lis des fichiers dinclusion de serveur chemin dynamique
Fichiers dinclusion de serveur chemin dynamique (c.--d. fichiers .php, .inc et .module)
Filtrage des fichiers associs
157
Comme les fichiers associs et les fichiers association dynamique peuvent tre nombreux, Dreamweaver permet de filtrer les fichiers associs,
de faon trouver prcisment les fichiers avec lesquels vous voulez travailler.
1. Ouvrez une page laquelle des fichiers associs sont lis.
2. Si ncessaire, recherchez les fichiers association dynamique.
3. Cliquez sur licne Filtrer les fichiers associs sur la droite de la barre doutils Fichiers associs.
4. Slectionnez les types de fichiers afficher dans la barre doutils Fichiers associs. Par dfaut, Dreamweaver slectionne
tous les fichiers associs.
5. Pour crer un filtre personnalis, cliquez sur licne Filtrer les fichiers associs, puis choisissez Filtre personnalis.
La bote de dialogue Filtre personnalis ne permet de filtrer que les noms de fichiers prcis (style.css), les extensions de
fichiers (.php) et les expressions caractre gnrique utilisant des astrisques (*menu*). Vous pouvez filtrer selon des
expressions caractres gnriques multiples en sparant les diffrentes expressions laide de points-virgules (par exemple
style.css;*.js;*tpl.php).
Remarque : les paramtres de filtre ne sont pas conservs lorsque vous fermez le fichier.
Haut de la page

Vous pouvez ouvrir des documents enregistrs par Microsoft Word en tant que fichiers HTML, puis utiliser la commande Nettoyer HTML Word
pour supprimer le code HTML superflu gnr par Word. La commande Nettoyer HTML Word est utilisable pour les documents enregistrs sous
forme de fichiers HTML par Word 97 ou une version ultrieure.
Le code que Dreamweaver supprime est principalement utilis par Word pour mettre en forme et afficher les documents dans Word mme, et
nest pas ncessaire dans un vritable fichier HTML. Conservez une copie de votre fichier Word original (.doc) par scurit, car il se peut que vous
ne puissiez plus ouvrir ce document HTML dans Word aprs avoir appliqu la fonction Nettoyer HTML Word.
Pour nettoyer un fichier HTML ou XHTML non gnr 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 viter une violation de partage.
2. Ouvrez le fichier HTML dans Dreamweaver.
Pour afficher le code HTML gnr par Word, activez le mode Code (Affichage > Code).
3. Slectionnez Commandes > Nettoyer HTML Word.
Remarque : si Dreamweaver ne parvient pas dterminer la version de Word qui a t utilise pour enregistrer ce fichier,
choisissez la version correcte dans le menu droulant.
4. Activez (ou dsactivez) les options de nettoyage. Les prfrences que vous entrez sont sauvegardes comme paramtres de
nettoyage par dfaut.
Dreamweaver applique les paramtres de nettoyage au document HTML et un journal contenant une liste des modifications
apportes saffiche (sauf si cette option a t dslectionne dans la bote de dialogue).
Supprimer les marqueurs spcifiques Word Supprime tout le code HTML spcifique Word, y compris le code XML des
balises HTML, les mtadonnes personnalises Word et les balises de liens figurant dans len-tte du document, les balises
XML Word, les balises conditionnelles et leur contenu, ainsi que les paragraphes vides et les marges des styles. Vous pouvez
slectionner chacune de ces options individuellement partir de longlet Dtaill.
Nettoyer CSS Supprime de len-tte toutes les feuilles de style spcifiques Word, y compris les styles CSS incorpors si
possible (lorsque le style parent possde les mmes proprits), les attributs de style commenant par mso , les
dclarations de styles non CSS, les attributs de style CSS des tableaux et toutes les dfinitions de style non utilises. Vous
pouvez personnaliser cette option encore davantage partir de longlet Dtaill.
Nettoyer les balises <font> Supprime les balises HTML, en convertissant le corps du texte par dfaut en HTML de taille 2.
158
Corriger les imbrications de balises non valides Supprime les balises de dfinition des polices de caractres insres par
Word en dehors des balises de paragraphe et den-tte (au niveau du bloc).
Appliquer le format source Permet dappliquer au document les options de formatage que vous avez indiques dans les
prfrences de format HTML et dans le fichier SourceFormat.txt.
Afficher le journal la fin Affiche un message davertissement dtaillant les modifications apportes au document ds que
le nettoyage est termin.
5. Cliquez sur OK ou sur longlet Dtaill pour personnaliser davantage les options Supprimer les marqueurs spcifiques Word
et Nettoyer CSS, puis cliquez sur OK.
Code XHTML
Business Catalyst InContext Editing
Enregistrement des fichiers du cadre et du jeu de cadres
Nettoyage du code
Lancement dun diteur externe pour des fichiers multimdias
Utilisation de fichiers depuis le panneau Fichiers
Navigation vers le code associ
159

A propos de la gestion des fichiers et des dossiers
Utilisation du panneau Fichiers
Affichage de fichiers et de dossiers
Utilisation des fichiers depuis le panneau Fichiers
Recherche de fichiers dans votre site Dreamweaver
Identification et suppression des fichiers non utiliss
Accs aux sites, un serveur et aux disques locaux
Personnalisation des dtails de fichiers et de dossiers affichs dans la forme dveloppe du panneau Fichiers
A propos de la gestion des fichiers et des dossiers
Haut de la page
Dreamweaver possde un panneau Fichiers qui permet de grer et de transfrer des fichiers vers un serveur distant et partir de celui-ci. Lorsque
vous transfrez des fichiers entre le site local et le site distant, les structures de fichiers et de dossiers parallles sur les deux sites sont
prserves. Lors du transfert de fichiers entre les sites, Dreamweaver cre les dossiers ncessaires s'ils n'existent pas encore sur l'un des sites.
Vous pouvez 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 chant, les fichiers inutiles.
Haut de la page
Utilisation du panneau Fichiers
Le panneau Fichiers vous permet d'afficher des fichiers et des dossiers (qu'ils soient ou non associs un site Dreamweaver) et d'effectuer des
oprations courantes de maintenance, comme l'ouverture et le dplacement de fichiers.
Remarque : Dans les versions prcdentes de Dreamweaver, le panneau Fichiers s'appelait le panneau Site.
Vous pouvez dplacer le panneau Fichiers selon vos besoins et dfinir ses prfrences.
Utilisez ce panneau pour effectuer les tches suivantes :
Gestion de fichiers et de dossiers dans le panneau Fichiers
Pour les sites Dreamweaver, utilisez les options suivantes pour afficher ou transfrer des fichiers :
Options du panneau Fichiers en mode dvelopp.

A. Menu du site B. Connecter ou Dconnecter C. Actualiser D. Afficher le journal FTP du site E. Vue Fichiers du site F. Serveur
d'valuation G. Mode Rfrentiel H. Acqurir le(s) fichier(s) I. Placer le(s) fichier(s) J. Extraire le(s) fichier(s) K. Archiver L.
Synchroniser M. Dvelopper/Rduire
Remarque : Les boutons Fichiers du site, Serveur d'valuation et Synchroniser ne sont visibles que dans le panneau Fichiers en mode dvelopp.
Menu contextuel Site Permet de slectionner un site Dreamweaver et d'afficher ses fichiers. Vous pouvez galement utiliser le menu Site pour
accder tous les fichiers situs sur votre disque local, tout comme l'Explorateur Windows (Windows) ou le Finder (Macintosh).
Connecter ou Dconnecter (Protocoles FTP, RDS et WebDAV) Se connecte au site distant ou s'en dconnecte. Par dfaut, Dreamweaver se
dconnecte du site distant aprs 30 minutes d'inactivit (FTP uniquement). Pour modifier cette dure, choisissez Edition > Prfrences (Windows)
ou Dreamweaver > Prfrences (Macintosh), puis slectionnez la catgorie Site dans la liste de gauche.
Actualiser Met jour les rpertoires du site local et du site distant. Utilisez ce bouton pour dclencher manuellement une mise jour des
rpertoires si vous avez dsactiv les options Actualiser automatiquement la liste des fichiers locaux ou Actualiser automatiquement la liste des
fichiers distants dans la bote de dialogue Dfinition du site.
Vue Fichiers du site Affiche la structure des fichiers prsents sur le site local et le site distant dans les volets du panneau Fichiers. Le site
apparaissant dans le volet gauche et droit dpend d'un paramtre de prfrence. La vue Fichiers du site correspond au mode d'affichage par
dfaut du panneau Fichiers.
Vue Serveur d'valuation Affiche la structure des rpertoires du serveur d'valuation et du site local.
Mode Rfrentiel Affiche le rfrentiel Subversion (SVN).
160
Acqurir le(s) fichier(s) Copie les fichiers slectionns depuis le site distant vers le site local (en crasant, le cas chant, les copies locales
existantes des fichiers). Si l'option Activer l'archivage et l'extraction de fichier est active, les copies locales sont en lecture seule ; ces fichiers
restent accessibles, sur le site distant, d'autres membres de l'quipe qui peuvent les extraire. Si l'option Activer l'archivage et l'extraction de
fichier est dsactive, les copies du fichier seront accessibles en lecture et criture.
Remarque : Les fichiers que Dreamweaver copie sur le site distant ou le serveur d'valuation sont ceux slectionns dans le volet actif du
panneau Fichiers. Si le volet actif est Site distant, ce sont les fichiers slectionns sur le serveur distant ou le serveur d'valuation qui sont copis ;
si le volet actif est Fichiers locaux, Dreamweaver copie la version prsente sur le serveur distant ou le serveur d'valuation des fichiers
slectionns sur le site local.
Placer le(s) fichier(s) Copie les fichiers slectionns depuis le site local vers le site distant.
Remarque : Les fichiers que Dreamweaver copie sur le site distant ou le serveur d'valuation sont ceux slectionns dans le volet actif du
panneau Fichiers. Si le volet actif est Fichiers locaux, ce sont les fichiers slectionns sur le site local qui sont copis vers le site distant ou le
serveur d'valuation ; si le volet actif est Site distant, Dreamweaver copie la version prsente sur le site local des fichiers slectionns 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 active, le fichier
est ajout au site distant et reoit l'tat extrait . Si vous ne voulez pas que le fichier ajout soit dot de cet tat, cliquez sur le bouton Archiver.
Extraire le(s) fichier(s) Transfre une copie du fichier du serveur distant vers le site local (en crasant la copie locale de ce fichier, le cas
chant) et donne au fichier l'tat extrait sur le serveur. Ce bouton n'est pas disponible si l'option Activer l'archivage et l'extraction de fichier est
dsactive pour le site en cours dans la bote de dialogue Dfinition du site.
Archiver Transfre une copie du fichier local vers le serveur distant, de manire ce qu'il puisse tre modifi par d'autres membres de l'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 dsactive
pour le site slectionn dans la bote de dialogue Dfinition du site.
Synchroniser Synchronise les fichiers entre les dossiers locaux et distants.
Le bouton Dvelopper/Rduire dveloppe ou rduit le panneau Fichiers afin d'afficher un ou deux volets.
Haut de la page
Le panneau Fichiers vous permet d'ouvrir des fichiers et des dossiers, qu'ils soient ou non associs 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 dvelopper ou rduire le panneau Fichiers.
Pour les sites Dreamweaver, il est galement possible de personnaliser le panneau Fichiers en modifiant la vue (site local ou distant) qui s'affiche
par dfaut dans le panneau rduit. Vous pouvez galement basculer l'affichage du contenu dans le panneau Fichiers dvelopp, en utilisant
l'option Toujours afficher.
Ouverture ou fermeture du panneau Fichiers

Choisissez Fentre > Fichiers.
Recherche de fichiers dans le panneau Fichiers (Mac OS, utilisateurs de Creative Cloud uniquement)
La fonction de recherche en direct permet de localiser des fichiers en fonction de leur nom ou de texte qu'ils contiennent. Le site slectionn dans
le panneau Fichiers est utilis pour la recherche. Si aucun site n'est slectionn dans le panneau, l'option de recherche ne s'affiche pas. Pour plus
d'informations, voir Recherche de fichiers en fonction de leur nom ou de leur contenu.
Dveloppement ou rduction du panneau Fichiers (sites Dreamweaver uniquement)

Dans le panneau Fichiers (Fentre > Fichiers), cliquez sur le bouton Dvelopper/Rduire
de la barre d'outils.
Remarque : Si vous cliquez sur le bouton Dvelopper/Rduire pour dvelopper le panneau alors qu'il est ancr, celui-ci s'agrandit et vous
empche de travailler dans la fentre de document. Pour revenir la fentre de document, cliquez de nouveau sur le bouton Dvelopper/Rduire
afin de rduire le panneau. Si vous cliquez sur le bouton Dvelopper/Rduire pour dvelopper le panneau alors qu'il n'est pas ancr, vous pouvez
poursuivre votre travail dans la fentre de document. Avant de pouvoir ancrer de nouveau le panneau, vous devez le rduire.
Dans sa forme rduite, le panneau Fichiers affiche le contenu du site local, du site distant ou du serveur d'valuation sous la forme d'une liste de
fichiers. Sous sa forme dveloppe, le panneau affiche le site local et soit le site distant, soit le serveur d'valuation.
Modification de la taille de la zone d'affichage dans le panneau Fichiers dvelopp

Effectuez l'une des oprations suivantes lorsque le panneau Fichiers (Fentre > Fichiers) est dvelopp :
Faites glisser la barre sparant les volets gauche et droit pour modifier la taille de la zone d'affichage du volet souhait.
Utilisez les barres de dfilement situes dans la partie infrieure du panneau Fichiers pour faire dfiler le contenu des volets.
Modification de l'affichage du site dans le panneau Fichiers (sites Dreamweaver uniquement)

Effectuez l'une des oprations suivantes :
Dans le panneau Fichiers (Fentre > Fichiers) affich sous sa forme rduite, slectionnez Affichage local, Affichage distant,
Serveur d'valuation ou Affichage de la carte dans le menu (o la vue actuelle s'affiche).
Remarque : L'option Affichage local apparat par dfaut dans le menu Vue du site.
161
Dans le panneau Fichiers (Fentre > Fichiers) affich sous sa forme dveloppe, cliquez sur le bouton Fichiers du site (pour le
site distant), le bouton Serveur d'valuation ou le bouton Fichiers du rfrentiel.
A. Fichiers du site B. Serveur d'valuation C. Fichiers du rfrentiel

Remarque : Pour pouvoir afficher un site distant un serveur d'valuation ou un rfrentiel, vous devez configurer un site
distant, un serveur d'valuation ou un rfrentiel SVN.
Affichage de fichiers en dehors d'un site Dreamweaver

Le menu Site permet de naviguer sur votre ordinateur comme vous le feriez l'aide de l'Explorateur Windows ou du Finder (Macintosh).
Haut de la page
Utilisation des fichiers depuis le panneau Fichiers
Vous pouvez ouvrir ou renommer les fichiers ; ajouter, dplacer ou supprimer des fichiers ; ou encore actualiser le panneau Fichiers aprs avoir
modifi les fichiers.
Pour les sites Dreamweaver, vous pouvez galement identifier les fichiers (sur le site local ou distant) mis jour depuis leur dernier transfert.
Ouverture d'un fichier

1. Dans le panneau Fichiers (Fentre > Fichiers), slectionnez 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 slectionnez le fichier ouvrir.
Double-cliquez sur l'icne du fichier.
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) sur l'icne du
fichier, puis choisissez Ouvrir.
Le fichier s'ouvre dans la fentre de document de Dreamweaver.
Cration d'un fichier ou d'un dossier

1. Slectionnez un fichier ou un dossier dans le panneau Fichiers (Fentre > Fichiers).
Dreamweaver cre le fichier ou le dossier dans le dossier slectionn actuellement ou dans le mme dossier que celui dans
lequel le fichier slectionn se trouve.
2. Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), puis slectionnez
Nouveau fichier ou Nouveau dossier.
3. Saisissez le nom du nouveau fichier ou dossier.
4. Appuyez sur la touche Entre (Windows) ou Retour (Macintosh).
Suppression d'un fichier ou d'un dossier

1. Slectionnez le fichier supprimer dans le panneau Fichiers (Fentre > Fichiers).
2. Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), puis choisissez
Edition > Supprimer.
Modification du nom d'un fichier ou d'un dossier

1. Slectionnez le fichier renommer dans le panneau Fichiers (Fentre > Fichiers).
2. Procdez de l'une des manires 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 enfonce (Macintosh) sur l'icne du
fichier, puis choisissez Edition > Renommer.
3. Saisissez le nouveau nom la place du nom existant.
162
Dplacement d'un fichier ou d'un dossier

1. Slectionnez le fichier dplacer dans le panneau Fichiers (Fentre > Fichiers).
Copiez le fichier ou le dossier, puis collez-le 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 son nouvel emplacement.
Actualisation du panneau Actifs

Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (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 Dreamweaver.
Recherche de fichiers dans votre site Dreamweaver
Haut de la page
La fonction de recherche de Dreamweaver permet de trouver facilement les fichiers slectionns, ouverts, extraits ou modifis rcemment dans
votre site. Vous pouvez galement rechercher les fichiers les plus rcents dans votre site local ou distant.
Recherche d'un fichier ouvert dans votre site

1. Ouvrez le fichier dans la fentre de document.
2. Slectionnez Site > Reprer dans le site.
Dreamweaver slectionne les fichiers dans le panneau Fichiers.
Remarque : Si le fichier ouvert dans la fentre de document n'est pas associ au site actuel affich dans le panneau Fichiers,
Dreamweaver tente de dterminer quel site Dreamweaver le fichier appartient. S'il ne correspond qu' un seul site local,
Dreamweaver ouvre ce site dans le panneau Fichiers, puis met le fichier en surbrillance.
Recherche et slection des fichiers extraits dans un site Dreamweaver

Dans le panneau Fichiers (Fentre > Fichiers) affich sous sa forme rduite, cliquez sur le menu Options dans le coin suprieur droit du
panneau Fichiers, puis slectionnez Modifier > Slectionner les fichiers extraits.
Recherche d'un fichier slectionn dans votre site local ou distant

1. Slectionnez le fichier depuis l'affichage local ou distant du panneau Fichiers (Fentre > Fichiers).
Retrouver sur le site local ou Retrouver sur le site distant (selon l'emplacement o le fichier a t slectionn).
Recherche et slection des fichiers qui sont plus rcents sur le site local que sur le site distant
panneau Fichiers, puis slectionnez Modifier > Slectionner Local plus rcent.
Recherche et slection des fichiers qui sont plus rcents sur le site distant que sur le site local
panneau Fichiers, puis slectionnez Edition > Slectionner distants plus rcents.
Recherche des fichiers rcemment modifis sur votre site

1. Dans le panneau Fichiers (Fentre > Fichiers) affich sous sa forme rduite, cliquez sur le menu Options dans le coin
163
suprieur droit du panneau Fichiers, puis slectionnez Modifier > Slectionner Modifis rcemment.
2. Procdez de l'une des manires suivantes pour indiquer les dates prendre en compte dans le rapport :
Pour que le rapport prenne en compte l'ensemble des fichiers modifis ces derniers jours, activez l'option Fichiers crs
ou modifis dans le dernier, puis entrez une valeur dans la zone de texte.
Pour que le rapport prenne en compte l'ensemble des fichiers modifis durant une priode donne, cliquez sur le bouton
radio Fichiers crs ou modifis entre, puis spcifiez une dure.
3. (Facultatif) Entrer un nom d'utilisateur dans la zone Modifi par pour limiter votre recherche aux fichiers modifis par un
utilisateur donn au cours de la priode indique.
Remarque : Cette option est uniquement disponible pour les sites Contribute.
4. Indiquez l'emplacement o vous souhaitez afficher les fichiers compris dans le rapport l'aide des boutons radio, si
ncessaire :
Machine locale si le site ne comporte que des pages statiques.
Serveur d'valuation si le site comporte des pages dynamiques.
Remarque : Vous devez avoir dfini un serveur d'valuation dans la bote de dialogue Dfinition du site (XREF) pour utiliser
cette option. Si cette opration n'a pas t effectue et qu'aucun prfixe URL n'a t entr pour ce serveur ou si vous
excutez 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 paramtres.
Dreamweaver slectionne les fichiers modifis durant la priode slectionne dans le panneau Fichiers.
Identification et suppression des fichiers non utiliss
Haut de la page
Vous pouvez identifier et supprimer les fichiers qui ne sont plus utiliss par les autres fichiers de votre site.
1. Choisissez Site > Vrifier tous les liens du site.
Dreamweaver vrifie tous les liens de votre site et affiche les liens rompus dans le panneau Rsultats.
2. Slectionnez Fichiers orphelins dans le menu du panneau Vrificateur de lien.
Dreamweaver affiche l'ensemble des fichiers sans liens entrants. Ceci signifie qu'aucun des fichiers de votre site n'est li
ces fichiers.
3. Slectionnez les fichiers que vous voulez supprimer et appuyez sur la touche Suppr.
Important : Bien qu'aucun autre fichier du site ne soit li ces fichiers, une partie des fichiers de la liste peuvent tre lis
d'autres fichiers. Procdez avec prudence lors de la suppression de fichiers.
Haut de la page
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 accder un serveur, un disque local ou votre bureau.
Avant de pouvoir accder un serveur distant, vous devez configurer Dreamweaver de faon ce qu'il puisse fonctionner avec ce serveur.
Remarque : La meilleure faon de grer des fichiers est de crer un site Dreamweaver.
Ouverture d'un site Dreamweaver existant

Dans le panneau Fichiers (Fentre > Fichiers), slectionnez un site dans le menu (dans lequel le site, le serveur ou le disque dur en cours
d'utilisation s'affiche).
Ouverture d'un dossier sur un serveur FTP ou RDS distant

1. Dans le panneau Fichiers (Fentre > Fichiers), slectionnez un nom de serveur dans le menu (dans lequel le site, le serveur
164
ou le disque dur en cours d'utilisation s'affiche).
Remarque : Les noms des serveurs que vous avez configurs pour fonctionner avec Dreamweaver apparaissent.
2. Naviguez vers ces fichiers et modifiez-les comme vous le faites habituellement.
Accs un disque local ou votre bureau

1. Dans le panneau Fichiers (Fentre > Fichiers), slectionnez 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 oprations 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 un autre site ou un dossier non li un site
Dreamweaver, Dreamweavercopie le fichier, puis l'ajoute l'emplacement o vous le dposez. Si vous faites glisser un
fichier et le dposez au sein du mme site Dreamweaver, Dreamweaverdplace le fichier l'emplacement o vous le
dposez. Lorsque vous faites glisser un fichier qui n'est associ aucun site Dreamweaver vers un dossier qui n'est pas
non plus associ un site Dreamweaver, Dreamweaver dplace le fichier l'emplacement o vous le dposez.
Remarque : Pour que Dreamweaver dplace un fichier au lieu de le copier, maintenez la touche Maj (Windows) ou
Commande (Macintosh) enfonce pendant que vous faites glisser et dposez le fichier. Pour copier un fichier que
Dreamweaver dplacerait par dfaut, maintenez la touche Ctrl (Windows) ou Option (Macintosh) enfonce pendant que
vous faites glisser et dposez le fichier.
Personnalisation des dtails de fichiers et de dossiers affichs dans la forme dveloppe du

panneau Fichiers
Haut de la page
Lorsqu'un site Dreamweaver est affich dans le panneau Fichiers (en mode dvelopp), les informations lies aux fichiers et dossiers sont
affiches dans des colonnes. Vous pouvez, par exemple, consulter le type du fichier ou la date de sa dernire modification.
Vous pouvez personnaliser les colonnes en procdant de l'une des faons suivantes (certaines oprations sont disponibles uniquement pour les
colonnes que vous ajoutez, et non pas pour les colonnes par dfaut) :
Retrier ou raligner les colonnes
Ajouter des colonnes (jusqu' 10 colonnes maximum)
Masquer les colonnes (sauf la colonne des noms de fichiers)
Dfinir les colonnes devant tre partages entre tous les utilisateurs connects un site
Supprimer les colonnes (colonnes personnalises uniquement)
Renommer les colonnes (colonnes personnalises uniquement)
Associer des colonnes une Design Note (colonnes personnalises uniquement)
Modification de l'ordre des colonnes

Slectionnez le nom d'une colonne, puis cliquez sur le bouton flche vers le haut ou vers le bas afin de changer la position de la colonne
slectionne.
Remarque : Vous pouvez changer l'ordre de toutes les colonnes, sauf la colonne Nom, qui reste toujours en premire position.
Ajout, suppression ou modification de colonnes

165

2. Slectionnez un site, puis cliquez sur Modifier.
3. Dveloppez les paramtres avancs et choisissez la catgorie Colonnes mode Fichier.
4. Slectionnez une colonne, puis cliquez sur le bouton Plus (+) pour l'ajouter ou sur le bouton Moins () pour la supprimer.
Remarque : Comme la colonne est immdiatement supprime sans qu'il vous soit demand de confirmation, soyez certain de
rellement vouloir effectuer cette opration 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 Design Notes ou indiquez-en une.
Remarque : Vous devez associer la nouvelle colonne une Design Note afin que des donnes s'affichent dans le panneau
Fichiers.
7. Choisissez une option d'alignement pour dterminer la faon dont le texte doit tre align dans la colonne.
8. Activez ou dsactivez l'option Afficher afin d'afficher et de masquer respectivement la colonne.
9. Activez ou dsactivez l'option Partager avec tous les utilisateurs de ce site afin que la colonne soit accessible ou non tous
les utilisateurs connects au site distant.
Tri en fonction d'une colonne dans le panneau Fichiers

Pour trier les listes, cliquez sur l'en-tte de la colonne en fonction de laquelle vous souhaitez effectuer le tri.
Si vous cliquez plusieurs fois sur un mme en-tte de colonne, l'ordre dans lequel Dreamweaver trie la colonne est invers (ordre croissant ou
dcroissant).
Voir aussi
[print]Prsentation du panneau Fichiers
166

Transfert de fichiers et fichiers dpendants
A propos des transferts de fichiers en arrire-plan
Acquisition de fichiers depuis un serveur distant
Placement de fichiers sur un serveur distant
Gestion des transferts de fichiers
Haut de la page
Transfert de fichiers et fichiers dpendants
Si vous travaillez au sein d'un groupe, vous pouvez utiliser le systme d'extraction et d'archivage pour transfrer des fichiers entre le serveur
distant et l'ordinateur local. Si vous tes la seule personne travailler sur le site distant, vous pouvez utiliser les commandes Acqurir et Placer
pour transfrer des fichiers sans avoir les archiver ou les extraire.
Lorsque vous transfrez un document entre un dossier local et distant l'aide du panneau Fichiers, vous pouvez transfrer les fichiers dpendants
de ce document. Les fichiers dpendants sont des images, des feuilles de style externes et d'autres fichiers rfrencs dans votre document qu'un
navigateur charge avec le document.
Remarque : D'une manire gnrale, il est conseill de tlcharger les fichiers dpendants lorsque le fichier extrait est un nouveau fichier, mais
c'est inutile si les versions les plus rcentes des fichiers dpendants sont dj prsentes sur le disque local. Cela s'applique galement lors du
transfert et de l'archivage de fichiers : il n'est pas ncessaire si des copies mises jour sont dj prsentes sur le site distant.
Les lments de bibliothque sont traits comme des fichiers dpendants.
Certains serveurs gnrent des erreurs lors du placement d'lments de bibliothque. Nanmoins, vous pouvez voiler ces fichiers pour qu'ils ne
soient pas transfrs.
Haut de la page
A propos des transferts de fichiers en arrire-plan
Vous pouvez effectuer d'autres activits non lies au serveur lors de l'acquisition ou du placement de fichiers. Le transfert de fichiers d'arrire-plan
fonctionne pour tous les protocoles de transfert pris en charge par Dreamweaver : FTP, SFTP, LAN, WebDAV, Subversion et RDS.
Les activits non lies au serveur comprennent, entre autres, les oprations suivantes: taper, modifier des feuilles de style externes, gnrer des
rapports l'chelle du site et crer de nouveaux sites.
Les activits ct serveur que Dreamweaver ne peut pas effectuer pendant les transferts de fichiers incluent les tches suivantes :
placer/acqurir/archiver/extraire des fichiers ;
annuler l'extraction ;
crer une connexion une base de donnes ;
lier les donnes dynamiques ;
Prvisualisation des donnes en mode Affichage en direct
insrer un service Web ;
supprimer des fichiers ou des dossiers distants ;
prvisualiser dans le navigateur sur un serveur d'valuation ;
enregistrer un fichier sur un serveur distant ;
insrer 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 dfaut, la bote de dialogue Activit fichiers en arrire-plan est ouverte pendant les transferts de fichiers. Vous pouvez rduire cette bote de
dialogue en cliquant sur le bouton Rduire, dans son coin suprieur droit. La fermeture de la bote de dialogue pendant un transfert de fichier
167
entrane l'annulation de cette opration.
Haut de la page
Acquisition de fichiers depuis un serveur distant
La commande Acqurir permet de copier les fichiers du site distant sur le site local. Vous pouvez utiliser le panneau Fichiers ou la fentre du
document pour acqurir des fichiers.
Dreamweaver cre un journal de suivi des activits de fichiers au cours du transfert ; vous pouvez le consulter et l'enregistrer.
Remarque : Vous ne pouvez pas dsactiver le transfert de fichiers en arrire-plan. Si le journal des dtails est ouvert dans la bote de dialogue
Activit fichiers en arrire-plan, vous pouvez le fermer pour amliorer les performances.
Dreamweaver enregistre galement l'activit 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 dterminer le problme.
Acquisition des fichiers depuis un serveur distant via le panneau Fichiers

1. Dans le panneau Fichiers (Fentre > Fichiers), slectionnez les fichiers que vous voulez tlcharger.
Les fichiers sont gnralement slectionns dans l'affichage distant, mais il est galement possible de les slectionner dans
l'affichage local. Si l'affichage distant est actif, Dreamweaver copie les fichiers slectionns sur le site local ; si l'affichage local
est actif, Dreamweaver copie la version distante des fichiers locaux slectionns sur le site local.
Remarque : Pour n'acqurir que les fichiers dont la version distante est plus rcente que la version locale, utilisez la
commande Synchroniser.
2. Procdez de l'une des manires suivantes pour acqurir un fichier :
Cliquez sur le bouton Acqurir dans la barre d'outils du panneau Fichiers.
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) sur le fichier
dans le panneau Fichiers, puis slectionnez Acqurir dans le menu contextuel.
3. Cliquez sur Oui dans la bote de dialogue Fichiers dpendants si vous souhaitez tlcharger les fichiers dpendants. Si vous
disposez dj de copies locales des fichiers dpendants, cliquez sur Non. L'option par dfaut est de ne pas tlcharger les
fichiers indpendants. Vous pouvez dfinir cette option en slectionnant Edition > Prfrences > Site.
Dreamweaver tlcharge les fichiers slectionns comme suit :
Si vous utilisez le systme d'archivage et d'extraction, l'obtention d'un fichier consistera transfrer une copie locale
accessible en lecture seule. Le fichier reste disponible sur le site distant ou sur le serveur d'valuation et peut tre extrait
par d'autres membres de l'quipe.
Si vous n'utilisez pas le systme d'archivage et d'extraction, l'obtention d'un fichier produit une copie accessible en lecture
et criture.
Remarque : Si vous travaillez en quipe et que d'autres personnes sont susceptibles de travailler sur les mmes fichiers,
ne dsactivez pas l'option Activer l'archivage et l'extraction de fichier. De plus, si d'autres personnes utilisent le systme
d'extraction et d'archivage sur le site, vous devez l'utiliser galement.
Pour arrter le transfert de fichier n'importe quel moment, cliquez sur le bouton Annuler de la bote de dialogue Activit
fichiers en arrire-plan.
Acquisition des fichiers depuis un serveur distant l'aide de la fentre du document

1. Assurez-vous que le document est actif dans la fentre du document.
2. Procdez de l'une des manires suivantes pour acqurir un fichier :
Choisissez Site > Acqurir.
Cliquez sur l'icne Gestion des fichiers dans la barre d'outils de la fentre du document, puis slectionnez Acqurir dans
le menu.
Remarque : Si le fichier actuel n'est pas associ au site slectionn dans le panneau Fichiers, Dreamweaver tente de
dterminer quel site dfini localement le fichier actuel appartient. Si ce fichier courant n'appartient qu' un seul site local,
Dreamweaver ouvre ce site, puis effectue l'opration d'acquisition.
Affichage du journal FTP

1. Cliquez sur le menu Options dans le coin suprieur droit du panneau Fichiers.
2. Choisissez Affichage > Journal FTP du site.
Remarque : Dans le panneau Fichiers en mode dvelopp, vous pouvez cliquer sur le bouton Journal FTP.
Haut de la page
Placement de fichiers sur un serveur distant

168
Vous pouvez placer des fichiers du site local vers le site distant, dans la plupart des cas sans changer l'tat d'extraction du fichier.
Il existe deux types de circonstances dans lesquels il est prfrable d'utiliser la commande Placer plutt que la commande Archiver :
Lorsque vous ne travaillez pas en quipe et que vous n'utilisez pas le systme d'archivage et d'extraction.
Lorsque vous souhaitez placer la version actuelle du fichier sur le serveur, mais que vous allez continuer y apporter des
modifications.
Remarque : Si vous placez un fichier qui n'existait pas encore sur le site distant et que vous utilisez le systme d'extraction et
d'archivage, le fichier est copi sur le site distant, puis extrait pour vous permettre de continuer le modifier.
Vous pouvez utiliser le panneau Fichiers ou la fentre du document pour acqurir des fichiers. Dreamweaver cre un journal
de suivi des activits de fichiers au cours du transfert ; vous pouvez le consulter et l'enregistrer.
Remarque : Vous ne pouvez pas dsactiver le transfert de fichiers en arrire-plan. Si le journal des dtails est ouvert dans la
bote de dialogue Activit fichiers en arrire-plan, vous pouvez le fermer pour amliorer les performances.
Dreamweaver enregistre galement l'activit 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 dterminer le problme.
Vous trouverez un didacticiel consacr au placement de fichiers sur un serveur distant l'adresse
Vous trouverez un didacticiel consacr au dpannage des problmes de publication l'adresse www.adobe.com/go/vid0164_fr.
Placement de fichiers sur un serveur distant ou un serveur d'valuation l'aide du panneau Fichiers
1. Dans le panneau Fichiers (Fentre > Fichiers), slectionnez les fichiers tlcharger.
Les fichiers sont gnralement slectionns dans l'affichage Site local, mais il est galement possible de les slectionner dans
l'affichage Site distant.
Remarque : Vous pouvez dcider de ne placer que les fichiers dont la version locale est plus rcente que la version distante.
2. Procdez de l'une des manires 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 enfonce (Macintosh) sur le fichier
dans le panneau Fichiers, puis slectionnez Placer dans le menu contextuel.
3. Si le fichier n'a pas encore t enregistr, une bote de dialogue s'affiche (si vous l'avez indiqu parmi les prfrences de la
catgorie Site de la bote de dialogue Prfrences) 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 prcdemment enregistre sur le serveur
distant.
Remarque : Si vous n'enregistrez pas le fichier, aucune des modifications effectues depuis le dernier enregistrement ne sera
place sur le serveur distant. Toutefois, le fichier reste ouvert, ce qui vous permet encore d'enregistrer les changements aprs
avoir plac le fichier sur le serveur.
4. Cliquez sur Oui si vous souhaitez envoyer les fichiers dpendants associs aux fichiers slectionns ou sur Non si vous ne
voulez pas les envoyer. L'option par dfaut est de ne pas transfrer les fichiers indpendants. Vous pouvez dfinir cette option
en slectionnant Edition > Prfrences > Site.
Remarque : Il est en gnral conseill de transfrer les fichiers dpendants lorsque vous archivez un nouveau fichier, mais si
les versions les plus rcentes des fichiers dpendants figurent dj sur le serveur distant, il n'est pas utile de les transfrer
nouveau.
Pour arrter le transfert de fichier n'importe quel moment, cliquez sur le bouton Annuler de la bote de dialogue Activit
fichiers en arrire-plan.
Placement de fichiers sur un serveur distant l'aide de la fentre du document

1. Assurez-vous que le document est actif dans la fentre du document.
2. Procdez de l'une des manires suivantes pour placer un fichier :
Choisissez Site > Placer.
Cliquez sur l'icne Gestion des fichiers dans la barre d'outils de la fentre du document, puis slectionnez Placer dans le
menu.
Remarque : Si le fichier actuel n'est pas associ au site slectionn dans le panneau Fichiers, Dreamweaver tente de
dterminer quel site dfini localement le fichier actuel appartient. Si ce fichier courant n'appartient qu' un seul site local,
Dreamweaver ouvre ce site, puis effectue l'opration de placement.
Affichage du journal FTP

1. Cliquez sur le menu Options dans le coin suprieur droit du panneau Fichiers.
2. Choisissez Affichage > Journal FTP du site.
169
Remarque : Dans le panneau Fichiers en mode dvelopp, vous pouvez cliquer sur le bouton Journal FTP.
Haut de la page
Gestion des transferts de fichiers
Vous pouvez afficher l'tat des oprations de transfert de fichiers, ainsi que la liste des fichiers transfrs et de leurs rsultats (transfert russi,
ignor ou rat). Vous pouvez galement crer un journal des activits relatives aux fichiers.
Remarque : Dreamweaver vous permet d'effectuer d'autres activits non lies au serveur lors du transfert de fichiers vers le serveur ou partir de
ce dernier.
Annulation d'un transfert de fichier

Cliquez sur le bouton Annuler de la bote de dialogue Transfert de fichiers en arrire-plan. Si la bote de dialogue n'est pas affiche, cliquez sur
le bouton Activit fichiers dans le bas du panneau Fichiers.
Affichage de la bote de dialogue Activit fichiers en arrire-plan pendant les transferts

Cliquez sur le bouton Activit 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 dtails du dernier transfert de fichiers

1. Cliquez sur le bouton Journal en bas du panneau Fichiers pour ouvrir la bote de dialogue Activit fichiers en arrire-plan.
2. Cliquez sur la flche Dtails.
Enregistrement d'un journal du dernier transfert de fichier

1. Cliquez sur le bouton Journal en bas du panneau Fichiers pour ouvrir la bote de dialogue Activit fichiers en arrire-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 diteur de
texte.
Voir aussi
Didacticiel consacr au placement de fichiers
Didacticiel consacr au dpannage des problmes de publication
170

A propos du systme d'archivage et d'extraction de fichiers
Configuration du systme d'archivage et d'extraction de fichiers
Archiver et extraire des fichiers dans un dossier distant
Utilisation de WebDAV pour archiver et extraire des fichiers
Utilisation de Subversion (svn) pour acqurir et archiver des fichiers
A propos du systme d'archivage et d'extraction de fichiers
Haut de la page
Si vous travaillez en quipe, vous avez la possibilit d'archiver et d'extraire des fichiers sur les serveurs local et distant. Si vous tes la seule
personne travailler sur le serveur distant, vous pouvez utiliser les commandes Acqurir et Placer pour transfrer des fichiers sans avoir les
archiver ou les extraire.
Remarque : Vous pouvez utiliser la fonctionnalit d'acquisition et de placement de fichiers sur un serveur d'valuation, mais le systme d'archivage
et d'extraction n'est pas disponible sur ce type de serveur.
L'extraction d'un fichier quivaut 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 l'opration est affich dans le panneau Fichiers, avec une coche de couleur rouge (si
le fichier a t extrait par un autre membre de l'quipe) ou verte (si vous tes la personne avoir extrait le fichier) en regard de son icne.
L'archivage d'un fichier quivaut le mettre la disposition des autres membres de l'quipe, qui peuvent l'extraire et le modifier. Lorsque vous
archivez un fichier aprs l'avoir modifi, la version locale de ce fichier devient accessible en lecture seule et un cadenas apparat en regard du
fichier dans le panneau Fichiers pour vous empcher de le modifier.
Dreamweaver ne rend pas les fichiers extraits accessibles en lecture seule sur le serveur distant. Si vous transfrez des fichiers l'aide d'une
application autre que Dreamweaver, vous risquez d'craser les fichiers extraits. Toutefois, dans les applications autres que Dreamweaver, le
fichier LCK est visible prs du fichier extrait dans la hirarchie de fichiers afin d'viter ce type d'incident.
Configuration du systme d'archivage et d'extraction de fichiers
Haut de la page
Pour utiliser le systme d'archivage et d'extraction, vous devez associer votre site local un serveur distant.
2. Slectionnez un site et cliquez sur Modifier.
3. Dans la bote de dialogue Configuration du site, slectionnez la catgorie Serveurs et effectuez l'une des actions suivantes :
Slectionnez un serveur existant puis cliquez sur le bouton Modifier serveur existant.
5. Activez l'option Activer l'extraction de fichier si vous travaillez au sein d'une quipe (ou si vous travaillez seul, mais depuis
plusieurs machines). Dslectionnez cette option si vous souhaitez dsactiver 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 rcente d'un fichier est peut-tre ouverte sur une autre machine.
Si vous ne voyez pas les options Archiver/Extraire, cela signifie que vous n'avez pas configur le serveur distant.
6. Activez l'option Extraire les fichiers 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 > Ouvrir pour ouvrir un fichier, cela n'extrait pas le fichier, mme si cette option est active.
7. Dfinissez les options restantes :
Nom d'extraction Ce nom apparat dans le panneau Fichiers ct des fichiers extraits afin que les membres d'une quipe
puissent s'adresser la personne approprie s'ils ont besoin d'un fichier extrait.
Remarque : Si vous travaillez seul sur plusieurs machines, utilisez un nom d'extraction diffrent pour chaque machine (par
exemple, PierreR-MacDomicile et PierreR-PCBureau) de manire savoir o se trouve la version la plus rcente du fichier si
vous oubliez de l'archiver.
Adresse lectronique Si vous saisissez une adresse lectronique, lors de l'extraction d'un fichier, votre nom apparat dans le
171
panneau Fichiers en regard du fichier, sous la forme d'un lien (bleu soulign). Si un membre de l'quipe clique sur le lien, son
programme de messagerie lectronique par dfaut ouvre un nouveau courriel destination de votre adresse lectronique et
comportant un objet qui correspond aux noms du site et du fichier.
Archiver et extraire des fichiers dans un dossier distant
Haut de la page
Une fois le systme d'archivage et d'extraction dfini, vous pouvez archiver et extraire des fichiers sur un serveur distant via le panneau Fichiers
ou la fentre de document.
Extraction des fichiers l'aide du panneau Fichiers

1. Dans le panneau Fichiers (Fentre > Fichiers), slectionnez les fichiers extraire du serveur distant.
Remarque : Vous pouvez slectionner des fichiers dans l'affichage du site local ou distant mais pas dans l'affichage Serveur
d'valuation.
Une coche de couleur rouge indique qu'un autre membre de l'quipe dispose du fichier extrait. Un symbole reprsentant un
cadenas indique que le fichier est en lecture seule (Windows) ou verrouill (Macintosh).
2. Procdez de l'une des manires 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 enfonce (Macintosh), puis choisissez
Extraire dans le menu contextuel.
3. Dans la bote de dialogue Fichiers dpendants, cliquez sur Oui si vous souhaitez tlcharger les fichiers dpendants associs
aux fichiers slectionns ou sur Non si vous ne voulez pas les tlcharger. L'option par dfaut est de ne pas tlcharger les
fichiers indpendants. Vous pouvez dfinir cette option en slectionnant Edition > Prfrences > Site.
Remarque : D'une manire gnrale, il est conseill de tlcharger les fichiers dpendants lorsque le fichier extrait est un
nouveau fichier, mais c'est inutile si les versions les plus rcentes des fichiers dpendants sont dj prsentes sur le disque
local.
Une coche de couleur verte apparat en regard de l'icne du fichier local pour signaler que vous l'avez extrait.
Important : Si vous extrayez le fichier actif, la version ouverte du fichier est crase par la nouvelle version extraite.
Archivage des fichiers l'aide du panneau Fichiers

1. Dans le panneau Fichiers (Fentre > Fichiers), slectionnez les fichiers extraits ou slectionnez de nouveaux fichiers.
Remarque : Vous pouvez slectionner des fichiers dans l'affichage du site local ou distant mais pas dans l'affichage Serveur
d'valuation.
2. Procdez de l'une des manires suivantes pour archiver les fichiers :
Cliquez sur le bouton Archiver dans la barre d'outils du panneau Fichiers.
Archiver dans le menu contextuel.
3. Cliquez sur Oui si vous souhaitez envoyer les fichiers dpendants associs aux fichiers slectionns ou sur Non si vous ne
voulez pas les envoyer. L'option par dfaut est de ne pas transfrer les fichiers indpendants. Vous pouvez dfinir cette option
en slectionnant Edition > Prfrences > Site.
Remarque : Il est en gnral conseill de transfrer les fichiers dpendants lorsque vous archivez un nouveau fichier, mais si
les versions les plus rcentes des fichiers dpendants figurent dj sur le serveur distant, il n'est pas utile de les transfrer
nouveau.
Un cadenas apparat en regard de l'icne du fichier local pour indiquer que ce dernier n'est dsormais accessible qu'en
lecture seule.
Important : Si vous archivez le fichier actif, il se peut que ce fichier soit automatiquement enregistr avant d'tre archiv, selon
les options dfinies dans les prfrences.
Archivage d'un fichier ouvert partir de la fentre de document

1. Assurez-vous que le fichier archiver ou extraire est ouvert dans la fentre de document.
Remarque : Vous ne pouvez archiver qu'un seul fichier ouvert la fois.
Choisissez Site > Archiver.
Cliquez sur l'icne Gestion des fichiers dans la barre d'outils de la fentre du document, puis slectionnez Archiver dans le
menu.
Si le fichier actuel n'est pas associ au site actif dans le panneau Fichiers, Dreamweaver tente de dterminer quel site
dfini localement le fichier actuel appartient. Si le fichier actuel appartient un autre site que celui qui est actif dans le
172
panneau Fichiers, Dreamweaver ouvre ce site, puis effectue l'opration d'archivage.

Important : Si vous archivez le fichier actif, il se peut que ce fichier soit automatiquement enregistr avant d'tre archiv,
selon les options dfinies dans les prfrences.
Annulation de l'extraction d'un fichier

Si vous extrayez un fichier, puis que vous dcidez de ne pas le modifier (ou si vous dcidez d'liminer les modifications que vous avez apportes),
vous pouvez annuler l'opration d'extraction. Le fichier reprend alors son tat d'origine.
Pour annuler l'extraction d'un fichier, procdez de l'une des faons suivantes :
Ouvrez le fichier dans la fentre Document, puis choisissez Site > Annuler extraction.
Dans le panneau Fichiers (Fentre > Fichiers), cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl
enfonce (Macintosh), puis slectionnez Annuler extraction.
La copie locale du fichier passe alors en lecture seule, et toutes les modifications que vous y avez apportes sont perdues.
Utilisation de WebDAV pour archiver et extraire des fichiers
Haut de la page
Dreamweaver peut se connecter 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 grer des fichiers sur des serveurs Web distants. Pour plus
d'informations, voir www.webdav.org.
1. Si vous ne l'avez pas encore fait, dfinissez un site Dreamweaver indiquant le dossier local que vous utilisez pour enregistrer
vos fichiers de projet.
2. Slectionnez Site > Grer les sites puis double-cliquez sur votre site dans la liste.
3. Dans la bote de dialogue Configuration du site, slectionnez la catgorie Serveurs et effectuez l'une des actions suivantes :
Slectionnez un serveur existant puis cliquez sur le bouton Modifier serveur existant.
4. Dans l'cran Base, slectionnez WebDAV dans le menu Se connecter au moyen de, puis compltez si ncessaire les autres
options de l'cran Base.
5. Cliquez sur le bouton Avanc.
6. Slectionnez 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'quipe.
Indiquez votre adresse lectronique dans la zone approprie.
Le nom et l'adresse lectronique sont utiliss pour l'identification sur le serveur WebDAV et s'affiche dans le panneau
Fichiers pour les contacts.
Dreamweaver configure le site pour l'accs WebDAV. Lorsque vous utilisez la commande d'archivage ou d'extraction sur un
fichier du site, le fichier est transfr au moyen de WebDAV.
Remarque : Il se peut que WebDAV ne parvienne pas extraire correctement des fichiers incluant un contenu dynamique,
parce que la mthode HTTP GET les rend au moment de leur extraction.
Utilisation de Subversion (svn) pour acqurir et archiver des fichiers
Haut de la page
Dreamweaver peut se connecter un serveur utilisant Subversion (SVN), un systme de contrle de version qui permet aux utilisateurs de
collaborer la modification et la gestion de fichiers sur des serveurs Web distants. Dreamweaver n'est pas un client SVN intgral, mais il permet
aux utilisateurs d'obtenir les versions les plus rcentes de fichiers, d'apporter des modifications et d'envoyer les fichiers.
Important : Dreamweaver CS5 utilise la bibliothque du client Subversion 1.6.6 et Dreamweaver CS5.5 utilise la bibliothque du client 1.6.9. Les
versions plus rcentes de la bibliothque cliente Subversion ne sont pas rtrocompatibles. Notez que si vous mettez jour une application cliente
tierce (par exemple TortoiseSVN) en vue d'une utilisation avec une version ultrieure de Subversion, l'application Subversion mise jour mettra
jour les mtadonnes Subversion locales, et Dreamweaver ne pourra plus communiquer avec Subversion. Ce problme n'est pas influenc par les
mises jour du serveur Subversion, car celles-ci sont rtrocompatibles. Si vous procdez une mise jour vers une application cliente tierce qui
fonctionne avec Subversion en version 1.7 ou ultrieure, vous devrez rechercher des mises jour auprs d'Adobe avant de pouvoir rutiliser
Subversion avec Dreamweaver. Pour plus d'informations sur ce problme, consultez le site www.adobe.com/go/dw_svn_fr.
Adobe recommande d'utiliser un outil de comparaison de fichiers, dvelopp par une tierce partie, lorsque vous utilisez des fichiers contrle de
version SVN. Lorsque vous comparez des fichiers afin de dtecter leurs diffrences, vous pouvez voir prcisment quels types de modifications
d'autres utilisateurs ont apportes. 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 comparaison de fichiers ou diff . Dreamweaver fonctionne avec la plupart des outils tiers.
Vous trouverez un didacticiel vido sur l'utilisation de SVN et Dreamweaver l'adresse www.adobe.com/go/lrvid4049_dw_fr.
173
Etablissement d'une connexion SVN

Avant d'utiliser Subversion (SVN) comme systme de contrle des versions avec Dreamweaver, vous devez tablir une connexion un serveur
SVN. Pour dfinir une connexion un serveur SVN, utilisez la catgorie Contrle de version de la bote de dialogue Dfinition du site.
Le serveur SVN est un rfrentiel de fichiers depuis lequel vous (et d'autres utilisateurs) pouvez obtenir et valider des fichiers. Il est diffrent du
serveur distant qu'on utilise gnralement dans Dreamweaver. En cas d'utilisation de SVN, le serveur distant reste le serveur en direct pour
vos pages Web. Le serveur SVN sert pour sa part au stockage du rfrentiel des fichiers au sujet desquels vous voulez conserver un contrle de
version. Le processus habituel consiste obtenir des fichiers depuis le serveur SVN et les y valider, puis les publier sur votre serveur distant
partir de Dreamweaver. La configuration du serveur distant est tout fait distincte de celle de SVN.
Avant de pouvoir entamer cette configuration, vous devez disposer d'un accs un serveur SVN et un rfrentiel SVN. Pour plus d'informations
sur SVN, consultez le site Web de Subversion l'adresse suivante : http://subversion.apache.org/.
Pour configurer la connexion SVN, procdez comme suit :
1. Choisissez Site > Grer les sites, slectionnez le site pour lequel vous voulez configurer le contrle des versions, puis cliquez
sur le bouton Modifier.
Remarque : Si vous n'avez pas encore dfini 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 ncessaire pour l'instant, mais vous devrez en
dfinir un pour pouvoir publier vos fichiers sur le Web. Pour plus d'informations, reportez-vous la section Utilisation de sites
Dreamweaver.
2. Dans la bote de dialogue Configuration du site, slectionnez la catgorie Contrle de version.
3. Slectionnez Subversion dans la liste droulante Accs.
4. Dfinissez les options d'accs comme suit :
Slectionnez un protocole dans la liste droulante Protocole. Les protocoles disponibles sont HTTP, HTTPS, SVN et
SVN+SSH.
Remarque : L'emploi du protocole SVN+SSH exige une configuration spciale. 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 (gnralement sous la forme
nomserveur.domaine.com).
Entrez le chemin d'accs votre rfrentiel sur le serveur SVN dans la zone Rfrentiel (gnralement sous la forme
/svn/votre_rpertoire_racine. C'est l'administrateur du serveur de nommer le dossier racine pour le rfrentiel SVN).
(Facultatif) Si vous voulez utiliser un port de serveur diffrent du port par dfaut, activez l'option Instance spcifique puis
entrez un numro 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 bote de dialogue. Cliquez ensuite sur Termin pour
fermer la bote de dialogue Grer les sites.
Lorsque la connexion au serveur est tablie, votre rfrentiel SVN peut tre visualis dans le panneau Fichiers. Pour le visualiser, vous pouvez
choisir le mode Affichage du rfrentiel dans la liste droulante Affichage, ou cliquez sur le bouton Fichiers du rfrentiel
Fichiers dvelopp.
dans le panneau
Obtention des versions les plus rcentes des fichiers

Lorsque vous obtenez la version la plus rcente d'un fichier depuis le rfrentiel SVN, Dreamweaver fusionne le contenu de ce fichier celui de la
copie locale correspondante. En d'autres termes, si un autre utilisateur a mis jour le fichier depuis la dernire fois o vous l'avez valid, ses
mises jour sont fusionnes 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 premire fois des fichiers depuis le rfrentiel, travaillez avec un rpertoire local vide ou un rpertoire
local qui ne contient pas de fichiers portant les mmes noms que dans le rfrentiel. Dreamweaver ne monte pas les fichiers du rfrentiel sur le
lecteur local la premire tentative si le lecteur local contient des fichiers dont le nom est identique celui de fichiers dans le rfrentiel distant.
1. Assurez-vous d'avoir bien dfini une connexion SVN.
Affichez la version locale de vos fichiers SVN dans le panneau Fichiers en choisissant Affichage local dans la liste
droulante Affichage. Si vous travaillez dans le panneau Fichiers dvelopp, l'affichage local est automatiquement
disponible. Cliquez ensuite avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle enfonce
(Macintosh) sur le fichier ou le dossier qui vous intresse, puis cliquez sur Contrle de version > Obtenir les versions les
plus rcentes.
Affichez les fichiers du rfrentiel SVN en choisissant Affichage du rfrentiel dans la liste droulante Affichage du
panneau Fichiers ou en cliquant sur le bouton Fichiers du rfrentiel dans le panneau Fichiers dvelopp. Cliquez ensuite
174
avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) sur le fichier ou le
dossier qui vous intresse, puis cliquez sur Obtenir les versions les plus rcentes.
Remarque : Vous pouvez galement cliquer sur un fichier l'aide du bouton droit de la souris puis choisir Extraire dans le menu contextuel, ou
slectionner ce fichier et cliquer sur le bouton Extraire afin d'obtenir sa version la plus rcente. Toutefois, comme SVN ne prend pas en charge les
processus d'extraction, cette mthode ne permet pas d'extraire le fichier de la faon habituelle.
Validation de fichiers
disponible. Slectionnez ensuite le fichier valider puis cliquez sur Archiver.
avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) sur le fichier que
vous voulez valider, puis cliquez sur Valider.
3. Prenez connaissance des actions dans la bote de dialogue Archivage, apportez les ventuelles modifications requises, puis
cliquez sur OK.
Vous pouvez modifier des actions en les slectionnant puis en cliquant sur le bouton dans le bas de la bote de dialogue
Archivage. Deux options sont disponibles : Valider et Ignorer.
Remarque : La prsence d'une coche de couleur verte sur un fichier dans le panneau Fichiers indique qu'il a t modifi et pas encore valid dans
le rfrentiel.
Mise jour de l'tat de fichiers ou de dossiers dans le rfrentiel

Vous pouvez mettre jour l'tat SVN d'un fichier ou d'un dossier. La mise jour n'actualise pas l'affichage tout entier.
2. Affichez les fichiers du rfrentiel SVN en choisissant Affichage du rfrentiel dans la liste droulante Affichage du panneau
Fichiers ou en cliquant sur le bouton Fichiers du rfrentiel dans le panneau Fichiers dvelopp.
3. Cliquez ensuite avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) sur
n'importe quel fichier ou dossier du rfrentiel, puis cliquez sur Mettre jour l'tat.
Mise jour de l'tat de fichiers ou de dossiers locaux

Vous pouvez mettre jour l'tat SVN d'un fichier ou d'un dossier. La mise jour n'actualise pas l'affichage tout entier.
2. Affichez la version locale de vos fichiers SVN dans le panneau Fichiers en choisissant Affichage local dans la liste droulante
Affichage. Si vous travaillez dans le panneau Fichiers dvelopp, l'affichage local est automatiquement disponible.
3. Cliquez ensuite avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) sur
n'importe quel fichier ou dossier du panneau Fichiers, puis cliquez sur Mettre jour l'tat.
Affichage des versions d'un fichier

(Macintosh) sur le fichier dont vous voulez afficher les versions, puis choisissez Contrle de version > Afficher les
versions.
avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) sur le fichier dont
vous voulez afficher les versions, puis choisissez Afficher les versions.
3. Dans la bote de dialogue Historique des versions, choisissez la ou les versions qui vous intressent, puis effectuez l'une des
actions suivantes :
Cliquez sur Comparer au site local pour comparer la version slectionne la version locale du fichier.
175
Remarque : Vous devez installer un outil de comparaison de fichiers, provenant d'un 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 comparaison de fichiers ou diff . Dreamweaver fonctionne avec la
plupart des outils tiers.
Cliquez sur Comparer pour comparer deux versions slectionnes. Cliquez tout en maintenant la touche CTRL enfonce
pour slectionner deux versions simultanment.
Cliquez sur Afficher pour afficher la version slectionne. Cette action n'entrane pas le remplacement de la copie locale
actuelle du fichier concern. Vous pouvez enregistrer la version slectionne sur votre disque dur comme vous le feriez
avec n'importe quel autre fichier.
Cliquez sur Marquer comme actuel pour faire de la version slectionne la version la plus rcente du rfrentiel.
Verrouillage et dverrouillage de fichiers

Le verrouillage d'un fichier dans le rfrentiel SVN permet d'indiquer aux autres utilisateurs que vous 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 dverrouill. Lorsque vous
verrouillez un fichier dans le rfrentiel, vous verrez que ce fichier s'accompagne d'une icne reprsentant un cadenas ouvert. Pour les autres
utilisateurs, l'icne reprsente un cadenas ferm.
avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) sur le fichier qui
vous intresse, puis choisissez Verrouiller ou Dverrouiller.
(Macintosh) sur le fichier qui vous intresse, puis choisissez Verrouiller ou Dverrouiller.
Ajout d'un nouveau fichier au rfrentiel

La prsence d'un symbole plus bleu sur un fichier dans le panneau Fichiers indique que ce fichier n'existe pas encore dans le rfrentiel SVN.
2. Dans le panneau Fichiers, slectionnez le fichier ajouter au rfrentiel, puis cliquez sur le bouton Archiver.
3. Assurez-vous que le fichier est slectionn pour une validation dans la bote de dialogue Validation, puis cliquez sur OK.
Dplacement, copie, suppression ou rtablissement de fichiers

Pour dplacer un fichier, faites-le glisser vers le dossier de destination de votre site local.
Lorsque vous dplacez un fichier, Dreamweaver le marque, son nouvel emplacement, au moyen d'un signe Ajouter avec
historique, et le marque l'aide d'un signe Supprimer son ancien emplacement. Lorsque vous envoyez ces fichiers, celui qui
se trouve l'ancien emplacement disparat.
Pour copier un fichier, slectionnez-le, copiez-le (Edition > Copier) puis collez-le (Edition > Coller) son nouvel emplacement.
Lorsque vous copiez et collez un fichier, Dreamweaver le marque, son nouvel emplacement, au moyen d'un signe Ajouter
avec historique.
Pour supprimer un fichier, slectionner-le puis appuyez sur supprimer.
Dreamweaver vous permet de supprimer uniquement la version locale du fichier, ou la fois la version locale et celle sur le
serveur SVN. Si vous dcidez de ne supprimer que la version locale, le fichier sur le serveur SVN n'est pas touch. Si vous
dcidez de supprimer galement la version sur le serveur SVN, la version locale est marque l'aide d'un signe Supprimer, et
vous devez envoyer le fichier pour que la suppression soit effectue.
Pour rtablir un fichier copi ou dplac son emplacement d'origine, cliquez sur le fichier l'aide du bouton droit puis
choisissez Contrle de version > Rtablir.
Rsolution 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 tant rsolu. Par exemple, si
vous tentez d'archiver un fichier qui est en conflit avec les modifications apportes par un autre utilisateur, SVN ne vous permettra pas de valider
ce fichier. Vous pouvez obtenir la version la plus rcente du fichier depuis le rfrentiel, apporter manuellement des modifications votre copie de
travail, puis marquer votre fichier comme tant rsolu de faon pouvoir le valider.
176
3. Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) sur le fichier
dont vous voulez rsoudre le conflit, puis choisissez Contrle de version > Marquer comme rsolu.
Travail hors ligne

Il peut s'avrer utile de travailler hors ligne, de manire viter tout accs au rfrentiel pendant d'autres activits de transfert de fichiers.
Dreamweaver se connecte au rfrentiel SVN ds que vous lancez une activit qui exige une connexion (Obtenir les versions les plus rcentes,
Valider, etc.).
3. Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) sur n'importe
quel fichier ou dossier du panneau Fichiers, puis choisissez Contrle de version > Travailler hors ligne.
Nettoyage d'un site SVN local

Cette commande permet de supprimer les verrous des fichiers, de manire reprendre des activits non termines. Utilisez cette commande pour
supprimer d'anciens verrous si vous recevez des messages d'erreur vous informant que la copie de travail est verrouille.
3. Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) sur le fichier
nettoyer, puis choisissez Contrle de version > Nettoyer.
A propos du dplacement de fichiers et de dossiers dans des sites contrls par Subversion
Lorsque vous dplacez les versions locales de fichiers ou de dossiers dans un site contrl par Subversion, vous risquez de crer des problmes
d'autres utilisateurs qui pourraient se synchroniser avec le rfrentiel SVN. Par exemple, si vous dplacez un fichier localement et ne le validez
pas dans le rfrentiel pendant quelques heures, il se peut qu'un autre utilisateur tente d'en obtenir la version la plus rcente depuis son ancien
emplacement. Veillez donc toujours valider les fichiers sur le serveur SVN juste aprs les avoir dplacs localement.
Les fichiers et les dossiers demeurent sur le serveur jusqu' ce que vous les supprimiez manuellement. Ainsi, mme si vous dplacez un fichier
dans un dossier local diffrent et que vous le validez, son ancienne version reste l'emplacement prcdent sur le serveur. Pour viter toute
confusion, supprimez les anciennes copies des fichiers et dossiers que vous avez dplacs.
Lorsque vous dplacez un fichier localement et que vous le validez de nouveau sur le serveur SVN, l'historique des versions du fichier est perdu.
Voir aussi
177
Synchronisation des fichiers entre le site local et le site distant
Synchronisation des fichiers entre le site local et le site distant
Haut de la page
Aprs avoir cr 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 rseau), la synchronisation de vos fichiers s'effectuera en FTP.
Avant de synchroniser vos sites, vous pouvez vrifier les fichiers placer, acqurir, supprimer ou ignorer. Par ailleurs, une fois la
synchronisation effectue, Dreamweaver vous indique les fichiers qui ont t mis jour.
Identification des fichiers qui sont plus rcents sur le site local ou le site distant, sans effectuer de
synchronisation
Procdez de l'une des faons suivantes dans le panneau Fichiers :
Cliquez sur le menu Options dans le coin suprieur droit puis slectionnez Edition > Slectionner locaux plus rcents ou
Edition > Slectionner distants plus rcents.
Dans le panneau Fichiers, cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), puis
choisissez Slectionner > Slectionner locaux plus rcents ou Slectionner > Slectionner distants plus rcents.
Affichage d'informations de synchronisation dtailles pour un fichier prcis

Dans le panneau Fichiers, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) sur le
fichier au sujet duquel vous voulez obtenir des informations, puis slectionnez Afficher les informations de synchronisation.
Remarque : Pour que cette fonctionnalit soit disponible, l'option Conserver les informations de synchronisation doit tre active dans la catgorie
Distant de la bote de dialogue Dfinition du site.
Synchronisation de vos fichiers

1. Dans le panneau Fichiers (Fentre > Fichiers), slectionnez un site dans le menu (dans lequel le site, le serveur ou le disque
dur en cours d'utilisation s'affiche).
2. (Facultatif) Slectionnez des fichiers ou des dossiers prcis, ou passez l'tape suivante pour synchroniser le site entier.
3. Cliquez sur le menu Options dans le coin suprieur droit du panneau Fichiers, puis choisissez Site > Synchroniser.
Vous pouvez galement cliquer sur le bouton Synchroniser dans le haut du panneau Fichiers pour synchroniser les fichiers.
4. Dans le menu Synchroniser, ralisez une des oprations suivantes :
Pour procder la synchronisation du site entier, slectionnez Tout le site nom du site.
Pour ne synchroniser que les fichiers slectionns, slectionnez Fichiers locaux slectionns seulement (ou Fichiers
distants slectionns seulement si vous avez effectu votre slection depuis l'affichage Site distant du panneau Fichiers).
5. Cliquez sur la direction dsire pour le transfert :
Placer les fichiers plus rcents sur hte distant Tlcharge tous les fichiers locaux qui n'existent pas sur le serveur distant
ou qui ont t modifis depuis le dernier tlchargement.
Obtenir les fichiers plus rcents depuis l'hte distant Tlcharge tous les fichiers distants qui n'existent pas localement ou
qui ont t modifis depuis le dernier tlchargement.
Placer et obtenir les fichiers plus rcents Transfre, selon le cas, les versions les plus rcentes de tous les fichiers sur le
site local ou sur le site distant.
6. Indiquez si les fichiers qui sont prsents sur le site de destination mais n'ont pas d'quivalent sur le site d'origine doivent tre
supprims. Cette option n'est pas disponible si vous slectionnez les options d'acquisition et de placement dans le menu de
direction.
Si vous avez slectionn Placer les fichiers plus rcents sur hte distant et que vous activez l'option d'effacement, tous les
fichiers du site distant qui n'ont pas d'quivalent sur le site local sont supprims. Si vous avez slectionn Obtenir les fichiers
plus rcents depuis l'hte distant et que vous activez l'option d'effacement, tous les fichiers du site local qui n'ont pas
d'quivalent sur le site distant sont supprims.
178
7. Cliquez sur Aperu.

Remarque : Avant de synchroniser les fichiers, vous devez procder un aperu des actions que Dreamweaver va devoir
excuter pour cette tche.
Si la version la plus rcente de chacun des fichiers slectionns figure dj aux deux endroits et que rien n'a besoin d'tre
supprim, un message d'avertissement vous signale qu'aucune synchronisation n'est ncessaire. Dans le cas contraire, la
bote de dialogue Synchroniser s'affiche et vous permet de modifier les actions (placer, acqurir, supprimer et ignorer) pour
ces fichiers avant d'excuter la synchronisation.
8. Vrifiez les diffrentes actions effectuer.
9. Pour modifier l'action pour un fichier particulier, slectionnez-le puis cliquez sur l'une des icnes d'action situes en bas de la
fentre d'aperu.
Comparer L'action Comparer ne fonctionne que si vous avez install et spcifi un outil de comparaison de fichiers dans
Dreamweaver. Si l'icne Action est en gris, l'action correspondante n'est pas disponible.
Marquer les fichiers comme synchroniss Cette option vous permet d'indiquer que le ou les fichiers slectionns sont dj
synchroniss.
10. Cliquez sur OK pour synchroniser les fichiers. Vous pouvez afficher ou enregistrer les dtails de la synchronisation dans un
fichier local.
Voir aussi
179
Comparaison de fichiers pour en chercher les diffrences

Comparaison des fichiers locaux et distants
Comparaison avant le placement de fichiers
Comparaison de fichiers lors de la synchronisation
Haut de la page
Comparaison des fichiers locaux et distants
Dreamweaver peut utiliser des outils de comparaison de fichiers (galement appels outils diff ) afin de comparer le code des versions locale
et distante du mme fichier, deux fichiers distants diffrents ou deux fichiers locaux diffrents. 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 t modifie. 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 galement utile si vous conservez des versions prcdentes, renommes
de vos fichiers. En cas d'oubli des modifications apportes un fichier d'une version prcdente, effectuez une comparaison rapide.
Avant de commencer, vous devez installer un outil de comparaison de fichiers tiers sur votre systme. 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 comparaison de fichiers ou diff .
Dreamweaver fonctionne avec la plupart des outils tiers.
Dfinition d'un outil de comparaison dans Dreamweaver

1. Installez l'outil de comparaison de fichiers sur le mme systme que Dreamweaver.
2. Dans Dreamweaver, ouvrez la bote de dialogue Prfrences en slectionnant Edition > Prfrences (Windows) ou
Dreamweaver > Prfrences (Macintosh), puis slectionnez la catgorie Comparaison de fichiers.
Sous Windows, cliquez sur le bouton Parcourir et slectionnez une application qui compare les fichiers.
Sur Macintosh, cliquez sur le bouton Parcourir et slectionnez 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 gnralement dans le dossier /usr/bin de votre Macintosh. Par exemple, si
vous souhaitez utiliser FileMerge, recherchez le dossier /usr/bin et slectionnez opendiff, l'outil qui lance FileMerge.
Le tableau suivant rpertorie 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 :
Si vous utilisez
Slectionnez 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 gnralement masqu dans le Finder. Cependant, vous pouvez y accder en utilisant le bouton Parcourir dans
Dreamweaver.
Remarque : Les rsultats effectivement affichs dpendent de l'outil diff utilis. Consultez le guide d'utilisation de votre outil pour comprendre
comment interprter ces rsultats.
Comparaison de deux fichiers locaux

Vous pouvez comparer deux fichiers situs 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 slectionner.
Pour choisir des fichiers se trouvant l'extrieur de votre site dfini, accdez votre disque local dans le menu gauche
contextuel du panneau Fichiers puis slectionnez-les.
2. Cliquez avec le bouton droit de la souris sur l'un des fichiers slectionns puis choisissez Compare Local Files (Comparer les
fichiers locaux) dans le menu contextuel.
Remarque : Si votre souris n'est dote que d'un seul bouton, appuyez sur la touche Ctrl tout en cliquant avec la souris sur l'un
180
des fichiers slectionns.

L'outil de comparaison de fichiers dmarre et compare les deux fichiers.
Comparaison de deux fichiers distants

Vous pouvez comparer deux fichiers situs sur votre serveur distant. Vous devez dfinir un site Dreamweaver avec des paramtres distants avant
de pouvoir effectuer cette tche.
1. Dans le panneau Fichiers, affichez les fichiers sur le serveur distant en choisissant Affichage distant dans le menu droulant
situ droite.
2. Appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant avec la souris sur les deux fichiers pour les
slectionner
3. Cliquez avec le bouton droit de la souris sur l'un des fichiers slectionns puis choisissez Comparer les fichiers distants dans
le menu contextuel.
Remarque : Si votre souris n'est dote que d'un seul bouton, appuyez sur la touche Ctrl tout en cliquant avec la souris sur l'un
des fichiers slectionns.
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
dfinir un site Dreamweaver avec des paramtres 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 dote que d'un seul bouton, appuyez sur la touche Ctrl tout en cliquant avec la souris sur le fichier local.
Comparaison entre un fichier distant et un fichier local

Vous pouvez effectuer une comparaison entre un fichier distant et un fichier local. Vous devez dfinir un site Dreamweaver avec des paramtres
distants avant d'effectuer cette tche.
1. Dans le panneau Fichiers, affichez les fichiers sur le serveur distant en choisissant Affichage distant dans le menu droulant
situ 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 dote 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 fentre de document, choisissez Fichier > Comparer avec distants.
Vous pouvez galement cliquer avec le bouton droit de la souris sur l'onglet de document situ en haut de la fentre de document et choisir
Comparer avec distants dans le menu contextuel.
Haut de la page
Comparaison avant le placement de fichiers
Si vous modifiez un fichier localement et essayez ensuite de le tlcharger vers votre serveur distant, Dreamweaver vous avertit si la version
distante du fichier a t change. Vous avez la possibilit de comparer les deux fichiers avant de tlcharger le fichier et d'craser la version
distante.
Avant de commencer, vous devez installer un outil de comparaison de fichiers sur votre systme et le dfinir dans Dreamweaver.
1. Une fois que vous avez modifi un fichier dans un site Dreamweaver, placez le fichier (Site > Placer) sur votre site distant.
Si la version distante du fichier a t modifie, vous recevrez une notification avec la possibilit de visualiser les diffrences.
2. Pour visualiser les diffrences, cliquez sur le bouton Comparer.
Si vous n'avez pas spcifi d'outil de comparaison de fichiers, un message vous invite le faire.
3. Une fois que vous avez revu ou fusionn les changements dans l'outil, vous pouvez passer l'opration de placement ou
l'annuler.
181
Comparaison de fichiers lors de la synchronisation
Haut de la page
Vous pouvez comparer les versions locales de vos fichiers avec les versions distantes lorsque vous synchronisez les fichiers de votre site avec
Dreamweaver.
Avant de commencer, vous devez installer un outil de comparaison de fichiers sur votre systme et le dfinir dans Dreamweaver.
1. Cliquez avec le bouton droit de la souris n'importe quel endroit du panneau Fichiers et slectionnez Synchroniser dans le
menu contextuel.
2. Compltez les options de la bote de dialogue Synchroniser les fichier, puis cliquez sur Aperu.
Une fois que vous avez cliqu sur Aperu, vous obtenez une liste des fichiers slectionns et des actions qui seront
effectues pendant la synchronisation.
3. Dans la liste, slectionnez les fichiers que vous souhaitez comparer et cliquez sur le bouton Comparer (l'icne avec les deux
petites pages).
Remarque : Le fichier doit tre bas sur du texte (fichier HTML ou ColdFusion).
Dreamweaver lance l'outil de comparaison qui compare les versions locale et distante de chaque fichier slectionn.
Voir aussi
182
Voilage de fichiers et de dossiers dans votre site Dreamweaver

A propos du voilage de site
Activation et dsactivation du voilage d'un site
Voilage et suppression du voilage pour les fichiers et dossiers d'un site
Voilage et suppression du voilage de certains types de fichier
Suppression du voilage de tous les fichiers et dossiers
Haut de la page
A propos du voilage de site
Le voilage vous permet d'exclure des fichiers et dossiers du site de certaines oprations (acquisition et placement, par exemple). Vous pouvez
galement voiler tous les fichiers d'un type prcis (JPEG, FLV, XML, etc.) pour les oprations du site. Comme Dreamweaver conserve en
mmoire tous les paramtres dfinis pour chaque site, vous n'avez pas slectionner 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 multimdias tous les jours, vous pouvez
utiliser la fonction de voilage pour voiler votre dossier multimdia. Dreamweaver exclura les fichiers de ce dossier de toutes les oprations 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 voils des oprations
suivantes :
Ralisation d'oprations de placement, d'acquisition, d'archivage et d'extraction
Gnration de rapports
Recherche des fichiers locaux et distants les plus rcents
Ralisation d'oprations portant sur le site entier, telles que la vrification et la modification des liens
Synchronisation
Utilisation du contenu du panneau Actifs
Mise jour des modles et des bibliothques
Remarque : Vous pouvez toujours effectuer une opration sur un dossier ou un fichier voil prcis en le slectionnant dans le
panneau Fichiers, puis en effectuant l'opration voulue. Toute opration effectue directement sur un fichier ou un dossier
annule le voilage.
Remarque : Dreamweaver exclut les modles et les lments de bibliothque voils lors des oprations d'acquisition et de
placement de fichiers seulement. Dreamweaver n'exclut aucun de ces lments lors des oprations par lots, car cela pourrait
les dsynchroniser par rapport leurs instances.
Haut de la page
Activation et dsactivation du voilage d'un site
Le voilage vous permet de dfinir les dossiers, les fichiers et les types de fichiers du site que vous souhaitez exclure de certaines oprations
(acquisition et placement, par exemple). Cette option est active par dfaut. Vous pouvez le dsactiver dfinitivement ou provisoirement afin
d'effectuer une opration sur tous les fichiers, y compris les fichiers voils. Lorsque vous dsactivez le voilage sur un site, cela supprime tous les
voiles des fichiers voils. Lorsque vous le ractivez, tous les fichiers qui taient prcdemment voils retrouvent cet tat.
Remarque : Vous pouvez galement utiliser l'option Supprimer tous les voiles pour supprimer le voilage de tous les fichiers, mais cela ne
dsactive pas le voilage. De plus, cette option ne vous permet pas de rtablir automatiquement le voilage de tous les dossiers et fichiers qui
taient auparavant voils ; il vous faut ensuite redfinir manuellement le voilage de chaque dossier, fichier et type de fichier concern.
1. Slectionnez un fichier ou un dossier dans le panneau Fichiers (Fentre > Fichiers).
2. Cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), puis procdez de l'une des
faons suivantes :
Slectionnez Voilage > (dslectionnez l'option pour la dsactiver).
Slectionnez Voilage > Paramtres pour ouvrir la catgorie Voilage de la bote de dialogue Configuration du site.
Slectionnez ou dslectionnez, puis activez ou dsactivez 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 dsactiver le voilage.
183
Voilage et suppression du voilage pour les fichiers et dossiers d'un site
Haut de la page
Il est possible de voiler des fichiers et des dossiers spcifiques, mais pas tous les fichiers et dossiers existants ni un site entier. Il est toutefois
possible de voiler plusieurs fichiers et dossiers simultanment.
1. Dans le panneau Fichiers (Fentre > Fichiers), slectionnez un site pour lequel la fonction de voilage est active.
2. Slectionnez 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 enfonce (Macintosh), puis choisissez
Voilage > Voiler ou Voilage > Supprimer le voile dans le menu contextuel.
Une ligne rouge est prsente ou non sur l'icne du fichier ou du dossier, pour indiquer qu'il est voil ou dvoil.
Remarque : Vous pouvez toujours effectuer une opration sur un fichier ou un dossier voil prcis en le slectionnant dans le
annule le voilage.
Voilage et suppression du voilage de certains types de fichier
Haut de la page
Vous pouvez indiquer des types de fichier voiler afin que Dreamweaver voile tous les fichiers se terminant d'une certaine manire. Ainsi pouvezvous, par exemple, voiler tous les fichiers se terminant par l'extension .txt. Les types de fichier indiqus ne doivent pas ncessairement
correspondre des extensions de fichier ; il peut s'agir de n'importe quel lment apparaissant la fin d'un nom de fichier.
Voilage de certains types de fichier au sein d'un site

Voilage > Paramtres.
3. Activez l'option Voiler les fichiers se terminant avec, entrez les types de fichier 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, sparez chaque type par un espace ; n'utilisez ni virgule ni point-virgule.
Dans le panneau Fichiers, une ligne rouge apparat sur les fichiers concerns pour indiquer qu'ils sont voils.
Certains logiciels crent des fichiers de sauvegarde se terminant par un suffixe donn, tel que .bak. Vous pouvez voiler
ces fichiers.
Remarque : Vous pouvez toujours effectuer une opration sur un fichier ou un dossier voil prcis en le slectionnant dans le
annule le voilage.
Dsactivation du voilage de certains types de fichier au sein d'un site

Voilage > Paramtres.
3. Dans la bote de dialogue Dfinition du site, onglet Avanc, utilisez l'une des mthodes suivantes :
Dsactivez l'option Voiler les fichiers se terminant avec pour supprimer le voile de tous les types de fichier rpertoris
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 concerns pour indiquer qu'ils ne sont plus voils.
Suppression du voilage de tous les fichiers et dossiers
Haut de la page
Vous pouvez supprimer le voile de tous les fichiers et dossiers d'un site, et ce en une seule opration. Comme il est impossible d'annuler ce type
d'opration, vous ne pourrez pas rtablir le voile de tous les lments qui taient auparavant voils. Vous devrez revoiler les lments un par un.
Si vous souhaitez supprimer provisoirement le voile de tous les dossiers et fichiers et les revoiler par la suite, dsactivez le voilage sur le site.
2. Slectionnez un fichier ou un dossier quelconque du site.
Voilage> Supprimer tous les voiles.
184
Remarque : Cette opration dsactive galement l'option Voiler les fichiers se terminant avec de la catgorie Voilage de la
bote de dialogue Dfinition du site.
Les lignes rouges sur les icnes des dossiers et des fichiers disparaissent pour indiquer que tous les fichiers et dossiers du
site ne sont plus voils.
185
Stockage des informations sur les fichiers dans des Design Notes
A propos des Design Notes
Activation et dsactivation des Design Notes pour un site
Association de Design Notes un fichier
Utilisation des Design Notes
Haut de la page
A propos des Design Notes
Les Design Notes sont des notes cres pour un fichier donn. Les Design Notes sont associes au fichier qu'elles dcrivent, mais stockes dans
un autre fichier. Le panneau Fichiers vous permet de voir les fichiers auxquels sont jointes des Design Notes, car une icne spcifique s'affiche
dans la colonne Notes.
Les Design Notes vous permettent de conserver des informations supplmentaires sur les documents, telles que des commentaires sur l'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 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 galement de conserver des informations confidentielles, qu'il est impossible de laisser dans un document pour des
raisons de scurit, par exemple des notes sur la faon dont un devis a t calcul, dont une configuration a t labore ou encore sur les
facteurs de marketing qui ont influenc une dcision de production.
Si vous ouvrez un fichier dans Adobe Fireworks 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 cre 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 :
1
fw_source="file:///Mydisk/sites/assets/orig/myhouse.png"
Au mme titre, les Design Notes d'un fichier Flash pourraient contenir la ligne suivante :
1
fl_source="file:///Mydisk/sites/assets/orig/myhouse.fla"
Remarque : Pour pouvoir partager des Design Notes, les utilisateurs doivent dfinir le mme chemin d'accs 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 sur le site, en mme temps que l'image.
Si vous slectionnez cette image dans Dreamweaver et dcidez de la modifier l'aide de Fireworks, ce dernier ouvre directement le fichier
d'origine pour vous permettre de le modifier.
Activation et dsactivation des Design Notes pour un site
Haut de la page
Les Design Notes sont associes un fichier mais sont conserves dans un fichier spar. Les Design Notes vous permettent de conserver des
informations supplmentaires sur les documents, telles que des commentaires sur l'tat des fichiers ou le nom des fichiers source des images.
L'activation et la dsactivation des Design Notes pour un site donn s'effectuent depuis la catgorie Design Notes de la bote de dialogue
Dfinition du site. Lorsque vous activez les Design Notes, vous pouvez galement dcider de les partager avec d'autres utilisateurs.
2. Dans la bote de dialogue Grer les sites, slectionnez un site puis cliquez sur Modifier.
3. Dans la bote de dialogue Configuration du site, dveloppez Paramtres avancs, puis slectionnez la catgorie Design
Notes.
4. Slectionnez Grer Design Notes pour activer les Design Notes (dslectionnez cette option pour les dsactiver).
5. Si vous souhaitez supprimer tous les fichiers de Design Notes locaux associs 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
186
dossier _notes ni le fichier dwsync.xml qui s'y trouve. Dreamweaver emploie le fichier dwsync.xml pour grer les informations
relatives la synchronisation du site.
6. Activez l'option Activer la fonction Tlcharger les Design Notes pour les partager afin de tlcharger les Design Notes
associes au site en mme 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 quipe. Lorsque
vous placez ou acqurez un fichier, Dreamweaver place ou acquiert automatiquement le fichier de Design Notes associ.
Si vous n'activez pas cette option, Dreamweaver conserve les Design Notes localement, mais ne les tlcharge pas avec
les fichiers. Si vous travaillez seul sur le site, vous pouvez dsactiver cette option afin d'amliorer les performances. Les
Design Notes ne seront pas transfres 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.
Haut de la page
Association de Design Notes un fichier
Vous pouvez crer un fichier de Design Notes pour chaque document ou modle de votre site. Vous pouvez galement crer des Design Notes
pour des applets, des contrles 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 un fichier modle, les documents que vous crez partir du modle n'hritent pas des
Design Notes.
Ouvrez le fichier dans la fentre du document, puis slectionnez Fichier > Design Notes.
Dans le panneau Fichiers, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce
(Macintosh) sur le fichier, puis slectionnez Design Notes.
Remarque : Si le fichier se trouve sur un site distant, vous devez d'abord l'extraire ou l'acqurir, puis le slectionner dans
le dossier local.
2. Dans le menu Etat de l'onglet Informations lmentaires, slectionnez un tat pour le document.
3. Cliquez sur l'icne de date (au-dessus de la zone de texte Notes) pour insrer la date du jour dans les notes.
4. Entrez des commentaires dans la zone Notes.
5. Activez l'option Afficher l'ouverture du fichier afin que le fichier de Design Notes apparaisse chaque ouverture du fichier.
6. Dans l'onglet Toutes les infos, cliquez sur le bouton Plus (+) afin d'ajouter une paire cl/valeur ; slectionnez une paire, puis
cliquez sur le bouton Moins () pour la supprimer.
Par exemple, vous pouvez crer une cl 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 mme 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 s'appellera index.html.mno.
Haut de la page
Utilisation des Design Notes

Aprs avoir associ des Design Notes un fichier, vous pouvez ouvrir le fichier Design Notes, modifier son tat ou le supprimer.
Ouverture des Design Notes associes un fichier

Utilisez l'une des mthodes suivantes pour ouvrir les Design Notes :
Ouvrez le fichier dans la fentre du document, puis slectionnez Fichier > Design Notes.
(Macintosh) sur le fichier, puis slectionnez Design Notes.
Dans la colonne Notes du panneau Fichiers, double-cliquez sur l'icne jaune Design Notes.
Remarque : Pour afficher les icnes jaunes des Design Notes, choisissez Site > Grer les sites > [nom de votre site] >
Modifier > Paramtres avancs > Colonnes mode Fichier. Slectionnez Notes dans la liste du panneau et choisissez l'option
Afficher. Lorsque vous cliquez sur le bouton Dvelopper de la barre d'outils Fichiers pour afficher la fois le site local et le site
distant, votre site local contient une colonne Notes qui affiche une icne de note jaune pour tout fichier contenant une Design
Note.
Attribution d'un tat de Design Notes personnalis

1. Ouvrez les Design Notes du fichier ou de l'objet concern (voir la procdure ci-dessus).
2. Cliquez sur l'onglet Toutes les infos.
187
3. Cliquez sur le bouton Plus (+).

4. Dans le champ Nom, tapez tat.
5. Dans le champ Valeur, tapez le nom du nouvel tat.
S'il existe dj une valeur d'tat, elle est remplace par la nouvelle.
6. Cliquez sur l'onglet Infos de base et remarquez que la nouvelle valeur de l'tat apparat dans le menu contextuel Etat.
Remarque : Vous ne pouvez avoir qu'une valeur personnalise la fois dans le menu d'tat. Si vous suivez cette procdure
une nouvelle fois, Dreamweaver remplace la valeur de l'tat saisie la premire fois par la nouvelle valeur.
Suppression de votre site des Design Notes non associes

2. Slectionnez le site et cliquez sur Modifier.
3. Dans la bote de dialogue Dfinition du site, slectionnez la catgorie Design Notes dans la liste de gauche.
4. Cliquez sur le bouton Nettoyer.
Dreamweaver vous invite alors vrifier que tous les fichiers de Design Notes qui ne sont plus associs un fichier dans le
site doivent bien tre supprims.
Si vous utilisez Dreamweaver pour supprimer un fichier auquel est associ un fichier de Design Notes, Dreamweaver
supprime galement le fichier de Design Notes. En gnral, il ne peut donc exister de fichiers de Design Notes orphelins que
si vous supprimez ou renommez un fichier l'extrieur de Dreamweaver.
Remarque : Si vous dsactivez l'option Grer Design Notes avant de cliquer sur Nettoyer, Dreamweaver supprime tous les
fichiers de Design Notes du site.
Voir aussi
188
Test de votre site Dreamweaver

Instructions pour tester les sites
Utilisation des rapports pour tester votre site
Haut de la page
Instructions pour tester les sites

Avant de tlcharger le site sur un serveur, et de le dclarer prt tre diffus, il convient de le tester localement (en fait, il est judicieux de tester
et de rsoudre les problmes de votre site frquemment au cours de son laboration, afin de traiter les problmes avant quils ne saggravent et
de les empcher de se rpter).
Vous devez vous assurer que vos pages ont lapparence et le fonctionnement attendus dans les navigateurs cibls, quil ny a pas de liens rompus
et que les pages ne sont pas trop longues tlcharger. Vous pouvez galement tester lensemble de votre site et y rgler les problmes
ventuels en effectuant un rapport de site.
Les conseils suivants vous aideront garantir aux visiteurs de votre site une exprience positive :
Assurez-vous que les pages fonctionnent dans les navigateurs viss.
Vos pages doivent tre lisibles et fonctionnelles dans les navigateurs qui ne prennent pas en charge les styles, les calques, les plug-ins ou les
lments JavaScript. Pour les pages qui ne saffichent pas dans des navigateurs anciens, songez utiliser le comportement Vrifier le navigateur
pour rediriger automatiquement les visiteurs vers une autre page.
Affichez vos pages dans diffrents navigateurs et sur diffrentes plates-formes.
Cela vous donnera la possibilit de constater les diffrences de prsentation, de couleur, de taille de police et de format de fentre par dfaut,
autant dlments quil est impossible de prvoir lors de la vrification dans le navigateur cible.
Vrifiez que le site ne contient pas de liens briss (rparez-les sil en contient).
Les autres sites tant parfois modifis et rorganiss, il peut arriver que certaines pages vers lesquelles vos liens pointent soient dplaces ou
supprimes. Vous pouvez excuter un rapport de vrification des liens pour les tester.
Contrlez la taille de vos pages et leur dure de tlchargement.
Pour les pages constitues dun grand tableau, noubliez pas que, sous certains navigateurs, les visiteurs ne voient rien tant que le tableau nest
pas entirement charg. Envisagez de fragmenter les grands tableaux ; si cest impossible, envisagez de placer du contenu, par exemple un
message de bienvenue ou une bannire publicitaire, en dehors du tableau, en haut de la page, de manire ce que les utilisateurs puissent au
moins voir ce contenu pendant le chargement du tableau
Effectuez quelques rapports sur le site pour tester et dpanner le site entier.
Vous pouvez rechercher sur le site entier dventuels problmes, tels que des documents sans nom, des balises vides ou des balises imbriques
redondantes.
Validez votre code pour dtecter toute erreur de balise ou de syntaxe.
189
Continuez mettre le site jour et en assurer la maintenance aprs sa publication.
La publication dun site peut tre accomplie de diffrentes manires et constitue un processus continu. La dfinition et limplmentation dun
systme de contrle de version constituent une partie importante du processus, que ce soit avec les outils intgrs Dreamweaver ou par le biais
dune application de contrle de version externe.
Consultez les forums de discussion.
Utilisez les forums de discussion Dreamweaver du site Web Adobe, ladresse www.adobe.com/go/dreamweaver_newsgroup.
Vous y trouverez de nombreuses et prcieuses informations sur les diffrents navigateurs, plates-formes, etc. Vous pouvez galement discuter de
questions techniques et changer des informations utiles avec dautres utilisateurs de Dreamweaver.
Vous trouverez un didacticiel consacr au dpannage des problmes de publication ladresse www.adobe.com/go/vid0164.
Haut de la page
Utilisation des rapports pour tester votre site

Vous pouvez excuter des rapports du site sur les attributs de flux de travaux ou HTML. Vous pouvez galement utiliser la commande Rapports
pour vrifier les liens de votre site.
Les rapports sur le droulement du travail peuvent amliorer la collaboration entre les membres dune quipe Web. Ces rapports permettent de
savoir qui a extrait un fichier, quels fichiers sont associs des Design Notes et quels fichiers ont t modifis rcemment. Vous pouvez dfinir
davantage les rapports des Design Notes en spcifiant des paramtres nom/valeur.
Remarque : vous devez avoir dfini une connexion un site distant pour excuter des rapports sur le droulement du travail.
Les rapports HTML vous permettent de compiler et de gnrer des rapports pour plusieurs attributs HTML. Vous pouvez contrler les balises de
polices imbriques combinables, les textes secondaires manquants, les balises imbriques redondantes, les balises vides amovibles et les
documents sans nom.
Aprs avoir excut un rapport, vous pouvez lenregistrer au format XML, puis limporter dans un modle, une base de donnes ou une feuille de
calcul et limprimer, ou encore lafficher sur un site Web.
Remarque : vous pouvez galement ajouter diffrents types de rapport Dreamweaver via le site Web dAdobe Dreamweaver Exchange.
Excution de rapports afin de tester un site

1. Choisissez Site > Rapports.
2. Slectionnez lobjet du rapport dans le menu Rapport sur, puis dfinissez lun des types de rapports excuter (droulement
du travail ou HTML).
Vous ne pouvez pas excuter un rapport sur Fichiers slectionns dans le site si vous navez pas auparavant slectionn des
fichiers dans le panneau Fichiers.
3. Si vous avez slectionn un rapport de droulement de travail, cliquez sur Paramtres de rapport. Dans le cas contraire,
ignorez cette tape.
Remarque : Si vous avez slectionn plusieurs rapports de droulement de travail, vous devez cliquer sur le bouton
Paramtres de rapport pour chaque rapport. Slectionnez un rapport, cliquez sur Paramtres de rapport et entrez les
paramtres ; puis recommencez pour les autres rapports de droulement de travail.
Extrait par Cre un rapport qui dresse la liste de tous les documents extraits par un membre spcifique de lquipe. Entrez le
nom dun membre de lquipe et cliquez sur OK pour revenir la bote de dialogue Rapports.
Design Notes Cre un rapport qui dresse la liste de lensemble des Design Notes pour les documents slectionns ou le site.
Entrez une ou plusieurs paires nom/valeur, puis slectionnez des valeurs de comparaison dans les menus contextuels
correspondants. Cliquez sur OK pour revenir la bote de dialogue Rapports.
190
Modifis rcemment Cre un rapport qui dresse la liste des fichiers qui ont t modifis durant une priode donne. Entrez
les plages de dates et lemplacement des fichiers afficher.
4. Si vous avez slectionn un rapport HTML, choisissez lun des rapports suivants :
Balises de polices imbriques combinables Cre un rapport qui dresse la liste de toutes les balises de polices imbriques
pouvant tre combines pour nettoyer le code.
Par exemple, <font color="#FF0000"><font size="4">STOP!</font></font> est inclus dans le rapport.
Texte secondaire manquant Cre un rapport qui dresse la liste de toutes les balises img qui ne possdent pas de texte
secondaire (sec/alt).
Le texte secondaire apparat la place des images dans les navigateurs qui affichent seulement du texte ou configurs pour
tlcharger les images manuellement. Les lecteurs dcran lisent le texte secondaire et certains navigateurs affichent du texte
secondaire lorsque lutilisateur passe la souris sur limage.
Balises redondantes imbriques Cre un rapport rpertoriant les balises nettoyer.

Par exemple, <i> En Espagne,<i> il pleut</i> principalement dans les plaines</i> est inclus dans le
rapport.
Balises vides amovibles Cre un rapport qui dresse la liste de toutes les balises vides pouvant tre supprimes afin de
nettoyer le code HTML.
Par exemple, vous pouvez avoir supprim un lment ou une image en Affichage de code, mais laiss les balises sappliquant
cet lment.
Documents sans nom Cre un rapport qui dresse la liste de tous les documents sans titre trouvs conformment aux
paramtres slectionns. Dreamweaver tablit un rapport sur tous les documents qui contiennent des titres par dfaut, des
balises de titre multiples ou des balises de titre manquantes.
5. Cliquez sur Excuter pour crer le rapport.
Selon le type de rapport excuter, vous pouvez tre invit enregistrer votre fichier, dfinir votre site ou slectionner un
dossier (si vous ne lavez pas dj fait).
Une liste de rsultats apparat dans le panneau Rapports du site (dans le groupe de panneaux Rsultats).
Utilisation et enregistrement dun rapport

1. Excuter un rapport (voir la procdure prcdente).
2. Dans le panneau Rapports du site, effectuez lune des oprations suivantes pour consulter le rapport :
Cliquez sur len-tte de la colonne en fonction de laquelle vous souhaitez effectuer le tri des rsultats.
Vous pouvez trier les rsultats par nom de fichier, numro de ligne ou description. Vous pouvez galement excuter
plusieurs rapports et garder les diffrents rapports ouverts.
Slectionnez une ligne quelconque du rapport, puis cliquez sur le bouton Plus dinfos situ gauche du panneau Rapports
du site pour obtenir la description du problme.
Double-cliquez sur une ligne quelconque du rapport pour afficher le code correspondant dans la fentre de document.
Remarque : si vous vous trouvez en mode Cration, Dreamweaver passe un affichage deux volets et indique le
problme identifi directement dans le code.
3. Cliquez sur Enregistrer le rapport.
Lorsque vous enregistrez un rapport, vous pouvez limporter dans un fichier modle existant. Vous pouvez alors soit importer
le fichier dans une base de donnes ou un tableur puis limprimer, soit lafficher sur un site Web.
Aprs avoir excut les rapports HTML, utilisez la commande Nettoyer HTML pour corriger les erreurs HTML signales.

191
Didacticiel consacr au dpannage des problmes de publication
192
Mise en forme et design
193
Utilisation d'assistances visuelles pour la mise en forme

Dfinition de rgles
Dfinition de repres de mise en forme
Utilisation des repres avec des modles
Utilisation de la grille de mise en forme
Utilisation d'un trac d'image
Haut de la page
Dfinition de rgles
Les rgles vous aident mesurer, organiser et planifier votre mise en forme. Vous pouvez afficher les rgles gradues en pixels, pouces ou
centimtres sur les bords gauche et suprieur de la page.
Pour activer et dsactiver les rgles, choisissez Affichage > Rgles > Afficher.
Pour changer l'origine, faites glisser l'icne de l'origine de la rgle
document en mode Cration, sur un point de la page.
, situe dans le coin suprieur gauche de la fentre de
Pour rtablir la position par dfaut de l'origine, choisissez Affichage > Rgles > Rtablir origine.
Pour changer d'unit de mesure, choisissez Affichage > Rgles, puis slectionnez Pixels, Pouces ou Centimtres.
Haut de la page
Dfinition de repres de mise en forme
Les repres sont les lignes que vous faites glisser sur le document partir des rgles. Ils vous aident placer et aligner des objets de faon
plus prcise Vous pouvez galement utiliser les repres pour mesurer la taille des lments d'une page ou simuler les plis (zones visibles) des
navigateurs Web.
Pour faciliter l'alignement des lments, vous avez la possibilit de les aligner sur les repres et d'aligner des repres sur des lments. (les
lments doivent tre positionnement absolu pour que l'alignement puisse fonctionner). Vous pouvez galement verrouiller les repres pour
qu'ils ne soient pas dplacs de faon accidentelle par un autre utilisateur.
Cration d'un repre horizontal ou vertical

1. Faites glisser le repre partir de la rgle correspondante.
2. Positionnez le repre dans la fentre de document et relchez le bouton de la souris (repositionnez le repre en le faisant
glisser de nouveau).
Remarque : Par dfaut, les repres sont enregistrs en tant que mesures en pixels absolues depuis le ct suprieur ou
gauche du document et sont affichs par rapport l'origine de la rgle. Pour enregistrer le repre sous la forme d'un
pourcentage, appuyez sur la touche Maj lorsque vous crez ou dplacez le repre.
Affichage ou masquage d'un repre

Choisissez Affichage > Repres > Afficher les repres.
Alignement d'lments sur les repres

Pour aligner des lments sur les repres, slectionnez Affichage > Repres > Magntiser les repres.
Pour aligner les repres sur des lments, slectionnez Affichage > Repres > Accrocher les repres aux lments.
Remarque : Lorsque vous redimensionnez des lments, tels que des lments positionnement absolu, des tableaux et des
images, ils sont aligns sur les repres.
Verrouillage ou dverrouillage de tous les repres

Choisissez Affichage > Repres > Verrouiller les repres.
Affichage et dplacement d'un repre vers une position spcifique

1. Maintenez le pointeur de la souris sur le repre afin d'afficher sa position.
2. Double-cliquez sur le repre.
3. Entrez la nouvelle position dans la bote de dialogue Dplacer le repre et cliquez sur OK.
194
Affichage de la distance entre les repres

Appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) et dplacez le pointeur de la souris n'importe o entre les deux repres.
Remarque : L'unit de mesure est la mme que celle utilise pour les rgles.
Simulation du pli (zone visible) d'un navigateur Web

Choisissez Affichage > Repres puis slectionnez une taille de navigateur prdfini dans le menu.
Suppression d'un repre

Faites glisser le repre hors du document.
Modification des paramtres des repres

Slectionnez Affichage > Repres > Modifier les repres, dfinissez les options suivantes et cliquez sur OK.
Couleur des repres Indique la couleur des lignes du repre. Cliquez sur la palette de couleurs et choisissez une couleur dans le Slecteur de
couleur ou tapez un nombre hexadcimal dans la zone de texte.
Couleur distance Indique la couleur des lignes qui apparaissent comme des indicateurs de distance lorsque vous dplacez le pointeur de la
souris entre les repres. Cliquez sur la palette de couleurs et choisissez une couleur dans le Slecteur de couleur ou tapez un nombre
hexadcimal dans la zone de texte.
Afficher les repres Affiche les repres en mode Cration.
Magntiser les repres Aligne les lments d'une page sur les repres mesure que vous dplacez ces lments dans la page.
Verrouiller les repres Verrouille les repres en place.
Accrocher les repres aux lments Aligne les repres sur les lments sur la page mesure que vous faites glisser les repres.
Effacer tout Efface tous les repres de la page.
Haut de la page
Utilisation des repres avec des modles
Lorsque des repres sont ajouts un modle Dreamweaver, toutes les instances du modle hritent de ces repres. Les repres des instances
de modle sont toutefois traits comme des rgions modifiables par les utilisateurs. Les repres modifis dans les instances de modle sont
restaurs leur emplacement d'origine chaque fois que l'instance est mise jour avec le modle principal.
Vous pouvez aussi ajouter vos propres repres aux instances d'un modle. Les guides ajouts de cette manire ne sont pas crass lorsque
l'instance du modle est mise jour avec le modle principal.
Haut de la page
Utilisation de la grille de mise en forme
La grille affiche un systme de lignes horizontales et verticales dans la fentre de document. Cette fonction est utile pour placer des objets de
faon prcise. Vous pouvez aligner automatiquement des lments de page positionnement absolu sur la grille en les dplaant, et changer la
grille ou dfinir le comportement d'alignement en indiquant des paramtres spcifiques pour la grille. L'alignement fonctionne, que la grille soit
visible ou non.
Affichage ou masquage de la grille

Choisissez Affichage > Grille > Afficher la grille.
Activation ou dsactivation de l'alignement

Choisissez Affichage > Grille > Aligner sur la grille.
Modification des paramtres de la grille

1. Choisissez Affichage > Grille > Paramtres de la grille.
2. Dfinissez les options et cliquez sur OK pour appliquer les modifications.
Couleur Spcifie la couleur des lignes de la grille. Cliquez sur la palette de couleurs et choisissez une couleur dans le
Slecteur de couleur ou tapez un nombre hexadcimal dans la zone de texte.
Afficher la grille Affiche la grille en mode Cration.
Aligner sur la grille Permet d'aligner les lments de la page sur les lignes de la grille.
Espacement Dtermine l'espacement entre les lignes de la grille. Tapez une valeur et slectionnez Pixels, Pouces ou
Centimtres dans le menu.
Afficher Dtermine si les lignes de la grille apparaissent sous forme de lignes ou de pointills.
Remarque : Si l'option Afficher la grille n'est pas slectionne, la grille n'apparat pas et aucune modification n'est visible.
Haut de la page
Utilisation d'un trac d'image
Vous pouvez utiliser un trac de l'image comme guide pour reproduire une mise en page ayant t cre dans une application graphique telle
195
qu'Adobe Freehand ou Fireworks.

Un trac d'image est une image JPG, GIF ou PNG qui apparat l'arrire-plan de la fentre de document. Vous pouvez masquer cette image,
dfinir son opacit et la dplacer.
Le trac de l'image est uniquement visible dans Dreamweaver ; il n'est pas visible lorsque vous affichez la page dans un navigateur. Lorsque le
trac de l'image est visible, les vritables image et couleur d'arrire-plan de la page ne sont pas visibles dans la fentre de document, mais le sont
lorsque la page est affiche dans un navigateur.
Placement d'un trac de l'image dans la fentre de document

Choisissez Affichage > Trac de l'image > Charger.
Choisissez Modifier > Proprits de la page, puis cliquez sur le bouton Parcourir situ ct de la zone de texte Trac de
l'image.
2. Dans la bote de dialogue Slectionnez la source de l'image, choisissez un fichier d'image puis cliquez sur OK.
3. Dans la bote de dialogue Proprits de la page, dfinissez la transparence de l'image en tirant la glissire Transparence de
l'image, puis cliquez sur OK.
Pour passer un autre trac ou modifier tout moment la transparence du trac en cours, choisissez Modifier > Proprits de
la page.
Affichage ou masquage du trac de l'image

Choisissez Affichage > Trac de l'image > Afficher.
Dplacement d'un trac d'image

Slectionnez Affichage > Trac de l'image > Ajuster la position.
Pour dfinir avec prcision la position du trac de l'image, indiquez les valeurs des coordonnes dans les zones de texte X
et Y.
Pour dplacer l'image par incrments de 1 pixel, utilisez les touches flches.
Pour dplacer l'image par incrment de 5 pixels, appuyez simultanment sur la touche Maj et sur l'une des touches flches.
Rtablissement de la position du trac de l'image

Choisissez Affichage > Trac de l'image > Rtablir la position.
Le trac de l'image se replace dans le coin suprieur gauche de la fentre de document (0,0).
Alignement du trac de l'image sur un lment slectionn

1. Slectionnez un lment dans la fentre de document.
2. Choisissez Affichage > Trac de l'image > Aligner l'image avec la slection.
Le coin suprieur gauche du trac de l'image est align avec le coin suprieur gauche de l'lment slectionn.
Voir aussi
196
Utilisation de cadres
Fonctionnement des cadres et des jeux de cadres
Choix de l'utilisation des cadres
Jeux de cadres imbriqus
Utilisation de jeux de cadres dans la fentre de document
Cration de cadres et de jeux de cadres
Slection de cadres et de jeux de cadres
Ouverture d'un document dans un cadre
Affichage et dfinition des des proprits et des attributs de cadre
Affichage et dfinition des proprits de jeux de cadres
Contrle des contenus de cadre avec des liens
Fourniture de contenu pour les navigateurs ne prenant pas les cadres en charge
Utilisation des comportements JavaScript avec les cadres
Haut de la page
Fonctionnement des cadres et des jeux de cadres
La partie d'une fentre du navigateur pouvant afficher un document HTML indpendamment de ce qui apparat dans le reste de la fentre
constitue un cadre. Les cadres permettent de diviser une fentre du navigateur en plusieurs zones, chacune d'entre elles pouvant afficher un
document HTML distinct. En rgle gnrale, 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 dfinit la mise en forme et les proprits 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, 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
tre affichs dans les cadres. Le fichier du jeu de cadres relatif un site s'appelle gnralement index.html et s'affiche par dfaut si le visiteur ne
spcifie pas de nom de fichier.
L'exemple suivant prsente une mise en forme de cadre contenant trois cadres : un cadre troit qui contient la barre de navigation dans la partie
latrale, 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.
197
Dans cet exemple, le document affich dans le cadre suprieur ne change jamais lorsque les visiteurs consultent le site. La barre de navigation du
cadre latral contient des liens qui, lorsqu'ils sont activs, modifient le contenu du cadre principal, mais pas le contenu du cadre latral. Le cadre
de contenu principal droite affiche le document correspondant tous les liens activs par le visiteur dans la partie gauche.
Un cadre n'est pas un fichier ; on pourrait croire que le document affich dans un cadre fait partie intgrante de ce dernier, mais ce n'est pas le
cas. Le cadre contient le document.
Remarque : Une page peut dsigner un seul document HTML ou l'ensemble du contenu d'une fentre du navigateur un moment donn,
mme si plusieurs documents HTML sont affichs simultanment. Par exemple, l'expression une page qui utilise des cadres s'applique
gnralement un jeu de cadres et aux documents qui y figurent.
Tout site affich dans un navigateur sous forme d'une page unique constitue de trois cadres contient en fait au moins quatre documents HTML,
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 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 dtailles sur les cadres, consultez le site Web de Thierry Koblentz l'adresse
www.tjkdesign.com/articles/frames/.
Haut de la page
Choix de l'utilisation des cadres
Adobe dconseille l'emploi de cadres pour la mise en page d'une page Web. Parmi les inconvnients de l'emploi de cadres, citons :
L'alignement graphique des lments de diffrents cadres n'est pas toujours prcis.
Le test de la navigation peut tre long.
Comme l'URL de chacune des pages contenues dans les cadres n'est pas affiche dans le navigateur, les visiteurs risquent
de ne pas pouvoir ajouter de signet une page donne ( moins que vous ne fournissiez le code du serveur permettant de
charger la version avec cadres d'une page).
Pour obtenir une justification dtaille de la raison pour laquelle il ne faut pas utiliser des cadres, consultez le site de Gary White l'adresse
http://apptools.com/rants/framesevil.php.
Si vous dcidez des les utiliser, les cadres servent gnralement la navigation. Un jeu de cadres inclut gnralement un cadre contenant une
barre de navigation et un cadre destin afficher le contenu principal. L'emploi de cadres de cette faon offre quelques avantages.
Le navigateur d'un visiteur n'a pas besoin de recharger les graphiques lis la navigation chaque page.
Chaque cadre possde sa propre barre de dfilement (si le contenu ne tient pas entirement dans une fentre) pour que le
visiteur puisse faire dfiler les cadres indpendamment les uns des autres. Par exemple, un visiteur ayant fait dfiler une
longue page de contenu jusqu'en bas n'est pas oblig de la faire dfiler nouveau vers le haut pour afficher la barre de
navigation si celle-ci figure dans un autre cadre.
Dans la plupart des cas, vous pouvez crer une page Web sans cadre qui permet d'obtenir les mmes rsultats qu'avec un jeu de cadres. Par
exemple, si vous voulez afficher une barre de navigation 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 crer plusieurs pages dont la mise en
forme est identique.) Dans l'exemple suivant, la mise en forme de la page ressemble une mise en forme avec cadres, mais elle n'en contient
pas.
198
Les sites Web mal conus utilisent des cadres de faon 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 utiliss (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 tre trs utiles dans un
site.
La prise en charge des cadres varie en fonction du navigateur utilis. En outre, la navigation des cadres peut s'avrer difficile pour les visiteurs
souffrant de handicaps. Par consquent, si vous utilisez des cadres, incorporez systmatiquement une section noframes dans votre jeu de cadres
pour les visiteurs qui ne peuvent pas les visualiser. Vous pouvez galement fournir un lien explicite vers une version sans cadre du site.
Pour obtenir des informations plus dtailles sur les cadres, consultez le site Web de Thierry Koblentz l'adresse
www.tjkdesign.com/articles/frames/.
Haut de la page
Jeux de cadres imbriqus
Un jeu de cadres imbriqu est un jeu de cadres situ l'intrieur d'un autre jeu de cadres. Un fichier de jeu de cadres peut contenir plusieurs jeux
de cadres imbriqus. La plupart des pages Web avec des cadres utilisent en fait des cadres imbriqus, de mme que la plupart des jeux de
cadres prdfinis dans Dreamweaver. Tout jeu de cadres comportant un nombre diffrent de cadres dans diffrentes lignes ou colonnes doit tre
imbriqu.
Par exemple, la mise en forme de cadre la plus courante affiche un cadre sur la ligne suprieure (o figure le logo de l'entreprise) et deux cadres
sur la ligne infrieure (cadre de navigation et cadre de contenu). Dans ce cas, un jeu de cadres doit tre imbriqu : vous obtenez alors un jeu de
cadres de deux lignes et un jeu de cadres de deux colonnes imbriqu dans la deuxime ligne.
A. Jeu de cadres principal B. Le cadre de menus

et le cadre de contenu sont imbriqus dans le jeu de cadres principal.
Dreamweaver gre automatiquement l'imbrication des jeux de cadres. Si vous faites appel aux outils de fractionnement de cadre dans
Dreamweaver, le programme se charge de dfinir les cadres qui doivent tre imbriqus et ceux qui doivent rester tels quels.
Vous pouvez imbriquer les jeux de cadres de deux faons dans HTML : le jeu de cadres interne peut tre dfini dans le mme fichier que le jeu
de cadres externe, ou dans un fichier distinct. Chaque jeu de cadres prdfini dans Dreamweaver dfinit tous ses jeux de cadres dans le mme
fichier.
Les deux types d'imbrication produisent des rsultats visuels identiques. A moins d'examiner le code, il n'est pas facile de savoir quel type
d'imbrication est utilis. En rgle gnrale, Dreamweaver utilise un fichier de jeu de cadres externe lorsque vous excutez la commande Ouvrir
dans un cadre pour ouvrir un fichier de jeu de cadres l'intrieur d'un cadre. Dans ce cas, vous risquez de ne pas pouvoir dfinir correctement les
cibles des liens. Il est souvent plus simple de garder tous les jeux de cadres dfinis dans un seul fichier.
Utilisation de jeux de cadres dans la fentre de document
Haut de la page
Dreamweaver permet d'afficher et de modifier tous les documents associs un jeu de cadres dans une seule fentre de document. Vous pouvez
ainsi afficher un aperu approximatif des pages insres dans des cadres et les modifier votre convenance dans le navigateur. Toutefois,
certains aspects de cette approche peuvent tre droutants si vous ne les matrisez pas parfaitement. En particulier, chaque cadre affiche un
document HTML distinct. Mme si les documents sont vides, vous devez les enregistrer avant de les prvisualiser. En effet, vous ne pouvez
afficher un aperu prcis du jeu de cadres que s'il contient l'URL d'un document afficher dans chaque cadre.
Pour vous assurer que le jeu de cadres s'affiche correctement dans les navigateurs, excutez la procdure suivante :
1. Crez un jeu de cadres et spcifiez le document qui devra apparatre dans chaque cadre.
2. Enregistrez chaque fichier qui apparatra dans un cadre. N'oubliez pas que chaque cadre affiche un document HTML diffrent
et que vous devez enregistrer chaque document avec le fichier de jeu de cadres.
3. Dfinissez les proprits de chaque cadre et du jeu de cadres (notamment, nommez chaque cadre, dfinissez les options de
dfilement et d'absence de dfilement).
199
4. Dans l'inspecteur Proprits, dfinissez la proprit Cible pour tous les liens afin que le contenu li apparaisse dans la zone
approprie.
Haut de la page
Cration de cadres et de jeux de cadres
Il y a deux faons de crer un jeu de cadres dans Dreamweaver : vous pouvez slectionner un jeu de cadres prdfini ou le concevoir vousmme.
Si vous choisissez un jeu de cadres prdfini, tous les jeux de cadres et cadres ncessaires la cration de la mise en forme sont configurs, ce
qui reprsente le moyen le plus simple d'insrer rapidement une mise en forme avec des cadres dans la page. Vous pouvez uniquement insrer
un jeu de cadres prdfini dans la fentre de document en mode Cration.
Vous pouvez concevoir votre propre jeu de cadres dans Dreamweaver en ajoutant des sparateurs la fentre.
Avant de crer un jeu de cadres ou d'utiliser des cadres, affichez les bordures de cadres en mode Cration dans la fentre de document en
choisissant Affichage > Assistances visuelles > Bordures de cadre.
Cration d'un jeu de cadres prdfini et affichage d'un document existant dans un cadre
1. Placez le point d'insertion dans un document et procdez de l'une des manires suivantes :
Choisissez Insertion > HTML > Cadres et slectionnez un jeu de cadres prdfini.
Dans la catgorie Mise en forme du panneau Insertion, cliquez sur la flche du bouton Cadres et choisissez un jeu de
cadres prdfini.
Les icnes de jeu de cadres fournissent une reprsentation visuelle de chaque jeu de cadres appliqu au document en
cours. La zone bleue de l'icne du jeu de cadres reprsente le document courant et la zone blanche les cadres qui
afficheront d'autres documents.
2. Si vous avez configur Dreamweaver pour qu'il vous invite dfinir des attributs d'accessibilit des cadres, slectionnez un
cadre dans le menu droulant, entrez un nom pour la cadre et cliquez sur OK. (Pour les visiteurs qui en utilisent un, le lecteur
d'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 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.
Choisissez Fentre > Cadres pour afficher un diagramme des cadres que vous nommez.
Cration d'un jeu de cadres prdfini vide

1. Choisissez Fichier > Nouveau.
2. Dans la bote de dialogue Nouveau document, slectionnez la catgorie Exemple de page.
3. Slectionnez le dossier Jeu de cadres dans la colonne Dossier exemple.
4. Slectionnez un jeu de cadres dans la colonne Exemple de page, puis cliquez sur Crer.
5. Si vous avez activ les attributs d'accessibilit aux cadres dans Prfrences, la bote de dialogue Attributs d'accessibilit aux
balises de cadre s'affiche ; renseignez la bote 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.
Cration d'un jeu de cadres

Dans le sous-menu Modifier > Jeu de cadres, choisissez une option de fractionnement (par exemple, Fractionner le cadre gauche ou
Fractionner le cadre droite).
Dreamweaver fractionne la fentre en cadres. Si vous aviez un document existant ouvert, il apparat 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 sous-menu Modifier > 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 fentre en mode Cration.
Pour fractionner un cadre l'aide d'une bordure de cadre qui ne se trouve pas sur le bord de la fentre en mode Cration,
faites glisser une bordure de cadre tout en maintenant la touche Alt (Windows) ou Option (Macintosh) enfonce.
Pour diviser un cadre en quatre, faites glisser une bordure de cadre de l'un des coins de la fentre en mode Cration vers le
centre d'un cadre.
Pour crer trois cadres, crez-en d'abord deux, puis fractionnez l'un d'eux. L'opration de fusion de deux cadres adjacents
sans modifier le code du jeu de cadres tant relativement ardue, il est plus difficile de convertir quatre cadres en trois
cadres que deux cadres en trois cadres.
200
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 t enregistr, Dreamweaver vous invite enregistrer ce dernier.
Remarque : Vous ne pouvez pas entirement supprimer un jeu de cadres en faisant glisser ses bordures. Pour le supprimer compltement, fermez
la fentre de document qui l'affiche. Si le fichier du jeu de cadres a t enregistr, supprimez le fichier.
Redimensionnement d'un cadre

Pour dfinir la taille approximative des cadres, faites glisser une bordure de cadre dans la fentre de document en mode
Cration.
Pour dfinir des tailles exactes et spcifier l'espace allou par le navigateur une ligne ou une colonne de cadres lorsque la
taille de la fentre du navigateur ne permet pas d'afficher les cadres dans leur totalit, utilisez l'inspecteur Proprits.
Haut de la page
Slection de cadres et de jeux de cadres
Pour modifier les proprits d'un cadre ou d'un jeu de cadres, vous devez au pralable le slectionner dans la fentre de document ou en utilisant
le panneau Cadres.
Le panneau Cadres donne une reprsentation visuelle des cadres dans un jeu de cadres. Il affiche la hirarchie de la structure du jeu de cadres
qui n'apparat pas forcment dans la fentre de document. Dans le panneau Cadres, une paisse bordure entoure le jeu de cadres, une fine ligne
grise entoure chaque cadre et chaque cadre est identifi par un nom.
Lorsqu'un cadre est slectionn dans la fentre de document, en mode Cration, sa bordure s'affiche avec une ligne en pointill ; lorsqu'un jeu de
cadres est slectionn, toutes les bordures des cadres l'intrieur de ce jeu s'affichent avec une ligne en pointill plus fine.
Remarque : La slection d'un cadre et le placement d'un point d'insertion dans un document affich dans un cadre sont deux oprations
diffrentes. Vous serez amen slectionner un cadre dans de nombreux cas (par exemple, lorsque vous dfinissez les proprits d'un cadre).
Slection d'un cadre ou d'un jeu de cadres dans le panneau Cadres

1. Choisissez Fentre > Cadres.
2. Dans le panneau Cadres :
Pour slectionner un cadre, cliquez sur le cadre. Des lignes de slection apparaissent autour du cadre dans le panneau
Cadres et dans la fentre de document, en mode Cration.
Pour slectionner un jeu de cadres, cliquez sur la bordure qui l'entoure.
Slection d'un cadre ou d'un jeu de cadres dans la fentre de document

En mode Cration, pour slectionner un cadre, cliquez dans celui-ci tout en maintenant les touches Maj+Alt (Windows) ou
Maj+Option (Macintosh) enfonces.
201
En mode Cration, pour slectionner 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 > Assistances visuelles > Bordures
de cadre.
Remarque : Il est souvent plus simple de slectionner les jeux de cadres dans le panneau Cadres que dans la fentre de
document. Pour plus d'informations, consultez les rubriques ci-dessus.
Slection d'un cadre ou d'un jeu de cadre diffrent

Pour slectionner le cadre ou le jeu de cadres suivant ou prcdent au mme niveau hirarchique que la slection en cours,
appuyez sur la flche gauche ou droite tout en maintenant la touche Alt (Windows) ou Commande (Macintosh) enfonce. Ces
touches vous permettent de parcourir les cadres et jeux de cadres dans l'ordre dans lequel ils sont dfinis dans le fichier du
jeu de cadres.
Pour slectionner le jeu de cadres parent (celui qui contient la slection en cours), appuyez sur la flche haut tout en
maintenant la touche Alt (Windows) ou Commande (Macintosh) enfonce.
Pour slectionner le premier cadre ou jeu de cadres enfant de la slection courante (en respectant l'ordre dans lequel ils sont
dfinis dans le fichier du jeu de cadres), appuyez sur la flche bas tout en maintenant la touche Alt (Windows) ou Commande
(Macintosh) enfonce.
Haut de la page
Ouverture d'un document dans un cadre
Vous pouvez spcifier le contenu initial d'un cadre en insrant 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 > Ouvrir dans un cadre.
3. Slectionnez un document ouvrir dans le cadre et cliquez sur OK (Windows) ou Choisir (Macintosh).
4. (Facultatif) Si vous voulez afficher ce document par dfaut dans le cadre lorsque le jeu de cadres est ouvert dans un
navigateur, enregistrez le jeu de cadres.
Haut de la page
Avant d'afficher l'aperu d'un jeu de cadres dans un navigateur, vous devez enregistrer le fichier correspondant et tous les documents qui seront
affichs 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 simultanment.
Remarque : Si vous faites appel aux outils visuels de Dreamweaver pour crer un jeu de cadres, un nom de fichier par dfaut est attribu
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

Slectionnez le jeu de cadres dans le panneau Cadres ou dans la fentre de document.
Pour enregistrer le fichier de jeu de cadres, choisissez Fichier > Enregistrer le jeu de cadres.
Pour enregistrer le fichier de jeu de cadres en tant que nouveau fichier, choisissez Fichier > Enregistrer le jeu de cadres sous.
Remarque : Si le fichier du jeu de cadres n'a pas t enregistr, ces deux commandes sont quivalentes.
Enregistrement d'un document qui apparat l'intrieur d'un cadre

Cliquez dans le cadre, puis choisissez Fichier > Enregistrer le cadre ou Fichier > Enregistrer le cadre sous.
Enregistrement de tous les fichiers associs un jeu de cadres

Choisissez Fichier > Enregistrer tous les cadres.
Cette commande enregistre tous les documents ouverts dans le jeu de cadres, y compris le fichier du jeu de cadres et tous les documents
encadrs. Si le fichier du jeu de cadres n'a pas t enregistr, une paisse bordure entoure le jeu de cadres (ou le cadre non enregistr) en mode
Cration et vous pouvez slectionner un nom de fichier.
Remarque : Si vous avez utilis la commande Fichier > 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 dfaut qui sera affich dans ce cadre. N'enregistrez pas le fichier du jeu de cadres si
vous ne voulez pas que ce document soit utilis par dfaut.
Affichage et dfinition des des proprits et des attributs de cadre
Haut de la page
Utilisez l'inspecteur Proprits pour afficher et dfinir la plupart des proprits de cadre, notamment les bordures, les marges et l'affichage ou non
de barres de dfilement dans les cadres. La dfinition d'une proprit de cadre est prpondrante sur la dfinition de cette proprit pour le jeu de
cadres.
202
Si vous le souhaitez, dfinissez des attributs de cadre, comme l'attribut title (qui est diffrent de l'attribut name), pour amliorer l'accessibilit. Vous
pouvez activer l'option de programmation de l'accessibilit pour les cadres afin de dfinir des attributs lorsque vous crez des cadres ou bien
dfinir des attributs aprs avoir insr un cadre. Pour modifier les attributs d'accessibilit d'un cadre, utilisez l'inspecteur de balises afin de modifier
directement le code HTML.
Affichage ou dfinition des proprits des cadres

1. Slectionnez un cadre en utilisant l'une des mthodes suivantes :
Dans la fentre de document (mode Cration), cliquez dans le cadre tout en maintenant les touches Alt (Windows) ou
Maj+Option (Macintosh) enfonces.
Cliquez sur le cadre dans le panneau Cadres (Fentre > Cadres).
2. Dans l'inspecteur Proprits (Fentre > Proprits), cliquez sur la flche d'agrandissement situe dans le coin infrieur droit
pour visualiser toutes les proprits des cadres.
3. Dfinition des options de l'inspecteur Proprits des cadres
Nom du cadre Nom du cadre est le nom utilis par l'attribut target d'un lien ou par un script pour rfrencer le cadre. Un nom
de cadre ne doit contenir qu'un seul mot. Les traits de soulignement (_) sont autoriss, 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 rservs 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 cration
de liens entre plusieurs cadres, donnez un nom chaque cadre que vous crez.
Src Spcifie le document source afficher dans le cadre. Cliquez sur l'icne de dossier pour rechercher et slectionner un
fichier.
Dfiler Dtermine si des barres de dfilement apparaissent dans le cadre. La dfinition de cette option sur Par dfaut
n'affecte aucune valeur l'attribut correspondant, si bien que chaque navigateur peut utiliser sa valeur par dfaut. Dans la
plupart des navigateurs, la valeur par dfaut est Auto. Par consquent, les barres de dfilement n'apparaissent que si la
fentre du navigateur ne peut pas afficher la totalit du contenu du cadre courant.
Ne pas redimens. Empche les visiteurs de dplacer les bordures du cadre pour redimensionner ce dernier dans un
navigateur.
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 dans un navigateur. L'option Bordures
remplace les paramtres de bordure du jeu de cadres.
Les options de bordure sont Oui (afficher les bordures), Non (masquer les bordures) et Par dfaut. Dans la plupart des
navigateurs, la valeur propose est Oui, moins que l'option Bordures du jeu de cadres parent ne soit dfinie sur Non. Si
plusieurs cadres partagent une mme bordure, celle-ci n'est masque que lorsque l'option Bordures est dfinie sur Non pour
tous les cadres ou lorsque la proprit Bordures du jeu de cadres parent est dfinie sur Non et l'option Bordures sur Par
dfaut.
Couleur de la bordure Dfinit la couleur de toutes les bordures du cadre. Cette couleur s'applique toutes les bordures
adjacentes au cadre et remplace celle du jeu de cadres.
Largeur de marge Dfinit la largeur en pixels des marges gauche et droite (c'est--dire l'espace sparant la bordure du
cadre de son contenu).
Hauteur de marge Dfinit la hauteur en pixels des marges suprieure et infrieure (c'est--dire l'espace sparant la bordure
du cadre de son contenu).
Remarque : La dfinition de la largeur et de la hauteur d'un cadre et la dfinition des marges dans la bote de dialogue
Modifier > Proprits de la page sont deux oprations diffrentes.
Pour modifier la couleur d'arrire-plan d'un cadre, vous devez dfinir la couleur d'arrire-plan du document dans le cadre
dans les proprits de la page.
Dfinition des valeurs d'accessibilit d'un cadre

1. Dans le panneau Cadres (Fentre > Cadres), slectionnez un cadre en plaant le point d'insertion dans l'un des cadres.
2. Choisissez Modifier > Modifier la balise <jeu de cadres>.
3. Slectionnez Feuille de style/Accessibilit dans la liste de catgories situe gauche, entrez des valeurs et cliquez sur OK.
Dfinition des valeurs d'accessibilit d'un cadre

1. Affichez votre document en mode Code ou Code et cration si vous tes en mode Cration.
2. Dans le panneau Cadres (Fentre > Cadres), slectionnez un cadre en plaant 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 enfonce (Macintosh), et
203
choisissez Modifier la balise.

4. Dans l'diteur de balises, effectuez les modifications ncessaires et cliquez sur OK.
Modification de la couleur d'arrire-plan d'un document dans un cadre

1. Placez le point d'insertion dans le cadre.
2. Choisissez Modifier > Proprits de la page.
3. Dans la bote de dialogue Proprits de la page, cliquez sur le menu droulant Couleur d'arrire-plan, puis slectionnez une
couleur.
Affichage et dfinition des proprits de jeux de cadres
Haut de la page
Utilisez l'inspecteur Proprits pour afficher et dfinir la plupart des proprits de jeu de cadres, notamment le titre du jeu de cadre, les bordures et
les tailles des cadres.
Dfinition du titre du document d'un jeu de cadres

1. Slectionnez un jeu de cadres en utilisant l'une des mthodes suivantes :
Cliquez sur une bordure entre deux cadres du jeu de cadres dans la fentre de document en mode Cration.
Cliquez sur la bordure d'un jeu de cadres dans le panneau Cadres (Fentre > 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 apparat dans la barre de titre.
Affichage ou dfinition des proprits de jeux de cadres

1. Slectionnez un jeu de cadres en utilisant l'une des mthodes suivantes :
Cliquez sur une bordure entre deux cadres du jeu de cadres dans la fentre de document en mode Cration.
Cliquez sur la bordure d'un jeu de cadres dans le panneau Cadres (Fentre > Cadres).
2. Dans l'inspecteur Proprits (Fentre > Proprits), cliquez sur la flche d'agrandissement situe dans le coin infrieur droit et
dfinissez les options de jeu de cadres.
Bordures Dtermine si des bordures apparaissent ou non autour des cadres lorsque le document est affich dans un
navigateur. Pour afficher les bordures, slectionnez Oui ; sinon, slectionnez Non. Pour que le navigateur dtermine
l'affichage des bordures, slectionnez Par dfaut.
Largeur de bord Spcifie la largeur de toutes les bordures du jeu de cadres.
Couleur de la bordure Dfinit la couleur des bordures. Slectionnez une couleur avec le slecteur de couleur ou entrez la
valeur hexadcimale de la couleur.
Slection lig./col. Dfinit la taille des cadres des lignes et colonnes du jeu de cadres slectionn ; cliquez sur un onglet du
ct gauche ou en haut de la zone Slection lig./col., puis tapez une hauteur ou une largeur dans la zone de texte Valeur.
3. Pour dfinir l'espace allou par le navigateur chaque cadre, choisissez l'une des options suivantes dans le menu Units :
Pixels Dfinit la taille de la colonne ou de la ligne slectionne 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 aux cadres dont la taille est
spcifie en pixels, puis aux cadres dont la taille est relative ou spcifie en pourcentage. En rgle gnrale, il est
recommand de dfinir 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 alloue.
Remarque : Si toutes les largeurs sont en pixels et qu'un visiteur affiche le jeu de cadres dans un navigateur dont la largeur
est infrieure ou suprieure celle que vous avez spcifie, les cadres sont automatiquement redimensionns en fonction de
l'espace disponible. Ceci s'applique galement aux hauteurs spcifies en pixels. Par consquent, il est recommand de
spcifier au moins une largeur et une hauteur relatives.
Pourcent Dfinit la colonne ou la ligne slectionne comme pourcentage de la largeur ou de la hauteur totale de son jeu de
cadres. L'espace des cadres dfinis avec cette option est allou aprs celui des cadres dfinis en pixels, mais avant celui des
cadres dfinis avec l'option Relatif.
Relatif Indique qu'une fois l'espace des cadres dfinis en Pixel et en Pour-cent attribu, l'espace restant doit tre allou la
colonne ou la ligne slectionne. Cet espace est rparti proportionnellement entre les cadres de taille relative.
204
Remarque : Lorsque vous choisissez l'option Relatif dans le menu Units, tout nombre figurant dans le champ Valeur
disparat. Pour le spcifier, vous devez le taper de nouveau. En revanche, si une seule ligne ou colonne est dfinie sur
Relatif, vous n'avez pas besoin de retaper un nombre, car tout l'espace restant lui est allou, une fois celui des autres lignes
et colonnes a t attribu. Pour garantir la compatibilit inter-navigateurs, vous pouvez taper 1 dans le champ Valeur. Cela
revient ne pas spcifier de valeur du tout.
Haut de la page
Contrle 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 dfinir la cible du lien. L'attribut target d'un lien
spcifie le cadre ou la fentre dans lequel ou laquelle le contenu associ 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 dans le cadre de contenu
principal droite, vous devez dfinir 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 spcifi s'ouvre dans le cadre principal.
1. En mode Cration, choisissez un texte ou un objet.
2. Dans la zone Lien de l'inspecteur Proprits (Fentre > Proprits), procdez de l'une des manires suivantes :
Cliquez sur l'icne de dossier et slectionnez le fichier avec lequel tablir le lien.
Faites glisser l'icne Pointer vers un fichier dans le panneau Fichiers et slectionnez le fichier avec lequel tablir le lien.
3. Dans le menu droulant Cible de l'inspecteur Proprits, slectionnez la fentre ou le cadre dans lequel doit s'afficher le
document li :
_blank ouvre le document li dans une nouvelle fentre du navigateur sans toucher la fentre courante.
_parent ouvre le document li dans le jeu de cadres parent du cadre dans lequel figure le lien, en remplaant tout le jeu
de cadres.
_self ouvre le lien dans le cadre en cours, en remplaant le contenu de ce cadre.
_top ouvre le document li dans la fentre du navigateur courant, en remplaant tous les cadres.
Les noms des cadres apparaissent galement dans ce menu. Slectionnez un cadre nomm dans lequel s'ouvrira le
document li.
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 fentre, les noms des cadres n'apparaissent pas dans le menu droulant
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 tablissez un lien vers une page situe en dehors de votre site, utilisez toujours target="_top" ou
target="_blank" pour vous assurer que la page ne soit pas considre comme faisant partie de votre site.
Fourniture de contenu pour les navigateurs ne prenant pas les cadres en charge
Haut de la page
Dreamweaver vous permet de dfinir le contenu afficher dans les navigateurs graphiques plus anciens et bass sur le texte qui ne prennent pas
en charge les cadres. Ce contenu, encadr de balises noframes, est stock dans le fichier du jeu de cadres. Lorsqu'un navigateur qui ne gre 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 dtaill que Vous devez mettre votre navigateur jour pour pouvoir utiliser des
cadres . Certains visiteurs de sites utilisent des systmes qui ne leur permettent pas d'afficher les cadres.
1. Choisissez Modifier > Jeu de cadres > Modifier le contenu sans cadres.
Dreamweaver efface ce qui se trouve dans la fentre en mode Cration et les mots Contenu sans cadres apparaissent
dans la zone suprieure.
Dans la fentre de document, tapez ou insrez le contenu, comme vous le feriez pour un document ordinaire.
Slectionnez Fentre > Inspecteur de code, placez le point d'insertion entre les balises body qui se trouvent l'intrieur
des balises noframes, puis tapez le code HTML pour le contenu
3. Choisissez de nouveau Modifier > Jeu de cadres > Modifier le contenu sans cadres pour revenir au mode normal du
document jeu de cadres.
Utilisation des comportements JavaScript avec les cadres
Haut de la page
Plusieurs comportements JavaScript et commandes de navigation sont particulirement bien adapts l'utilisation de cadres :
Texte du cadre Remplace le contenu et le formatage d'un cadre par le contenu que vous spcifiez. Ce contenu peut tre n'importe quel texte
valide en HTML Cette action permet d'afficher les informations dans un cadre de faon dynamique
205
Atteindre l'URL Ouvre une nouvelle page dans la fentre en cours ou dans le cadre indiqu. Cette action est particulirement utile pour modifier
d'un seul clic le contenu de deux cadres ou plus
Insrer menu de reroutage Permet de configurer une liste de liens, dans un menu, qui ouvrent des fichiers dans une fentre du navigateur
lorsque l'on clique dessus. Vous pouvez galement cibler une fentre ou un cadre particuliers dans lesquels le document s'ouvrira.
Pour plus d'informations, consultez la section Ajout de comportements JavaScript.
Voir aussi
206

A propos de la mise en page CSS
A propos de la structure de mise en page CSS
Cration dune page avec une mise en forme CSS
Haut de la page
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
dune page Web. Llment de base de la mise en forme CSS est la balise div : il sagit dune balise HTML qui, la plupart du temps, sert de
conteneur pour du texte, des images et dautres lments de page. Lorsque vous crez une mise en forme CSS, vous placez des balises div dans
la page, leur ajoutez du contenu et les positionnez en diffrents endroits. A la diffrence des cellules de tableau, qui ne peuvent exister qu
lintrieur de lignes et de colonnes dun tableau, les balises div peut figurer nimporte o sur une page Web. Vous pouvez positionner des balises
div de faon absolue (en indiquant des coordonnes x et y) ou de faon relative (en spcifiant leur emplacement par rapport leur position
actuelle). Vous pouvez galement placer des balises div afin de dfinir des lments flottants, des marges intrieures et des marges. Cette
mthode est privilgie dans les normes Web modernes.
La cration de mises en forme CSS entirement nouvelles peut savrer difficile, car il existe de trs nombreux moyens de procder. Vous pouvez
crer une mise en forme CSS simple deux colonnes en dfinissant des lments flottants, des marges, des remplissages et dautres proprits
CSS dans un nombre de combinaisons quasi illimit. En outre, le problme de restitution sur diffrents types de navigateurs entrane un affichage
alatoire de certaines mises en forme CSS qui sont correctement ou incorrectement restitues en fonction du navigateur utilis. Dreamweaver
vous permet de crer facilement des pages laide de mises en forme CSS en fournissant 16 mises en forme prdfinies qui fonctionnent sur
diffrents types de navigateurs.
Lutilisation de mises en forme CSS prdfinies fournies avec Dreamweaver constitue la faon la plus simple de crer une page avec une mise en
forme, mais vous pouvez galement crer des mises en forme CSS laide dlments positionnement absolu (lments PA). Dans
Dreamweaver, un lment PA est un lment de page HTML (plus prcisment, une balise div ou toute autre balise) auquel une position
absolue est attribue. Toutefois, du fait de leur positionnement absolu, les lments PA de Dreamweaver prsentent linconvnient de ne jamais
adapter leur position la page en fonction de la taille de la fentre du navigateur.
Si vous tes un utilisateur chevronn, vous pouvez galement insrer des balises div manuellement et leur appliquer des styles de
positionnement CSS pour crer des mises en page.
Haut de la page
A propos de la structure de mise en page CSS

Avant de lire cette section, vous devez vous tre familiaris avec les concepts CSS de base.
Llment de base de la mise en forme CSS est la balise div : il sagit dune balise HTML qui, la plupart du temps, sert de conteneur pour du texte,
des images et dautres lments de page. Lexemple 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) situes lintrieur de la balise container.
A. Div Container B. Div sidebar C. Div Main Content
207
Voici le code correspondant ces trois balises div dans le code HTML :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18


<div id="container">

<div id="sidebar">
<h3>Sidebar Content</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>
</div>

<div id="mainContent">
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet,
rutrum.</p>
<p>Phasellus tristique purus a
venenatis, tristique in, vulputate
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet,
rutrum, erat nulla fermentum diam,
</div>
</div>
consectetuer adipiscing elit. Praesent aliquam,

augue condimentum adipiscing. Aenean
at, odio.</p>
justo convallis luctus
sagittis. Etiam leo pede, rhoncus
consectetuer adipiscing elit. Praesent aliquam,

at nonummy quam ante ac quam.</p>
justo convallis luctus
Dans lexemple ci-dessus, aucun style nest associ aux balises div. Si aucune rgle CSS nest dfinie, chaque balise div et son contenu prend un
emplacement par dfaut sur la page. Toutefois, si chaque balise div possde un ID unique (comme dans lexemple ci-dessus), vous pouvez
utiliser ces identificateurs pour crer des rgles CSS qui, une fois appliques, modifient le style et le positionnement des balises div.
La rgle CSS suivante, qui peut rsider dans la section head du document ou dans un fichier CSS externe, cre des rgles de style pour la
premire balise div (container) de la page :
1
2
3
4
5
6
7
#container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
La rgle #container applique un style la balise div container qui lui donne une largeur de 780 pixels, un arrire-plan blanc, aucune marge (depuis
la gauche de la page), une bordure noire continue de 1 pixel et un texte align gauche. Les rsultats de lapplication de la rgle la balise div
container sont les suivants :
Balise div Container, 780 pixels, pas de marge

A. Texte align gauche B. Arrire-plan blanc C. Bordure noire pleine dun pixel
La rgle CSS suivante cre des rgles de style pour la balise div sidebar :
1
2
3
4
5
6
#sidebar {
float: left;
width: 200px;
background: #EBEBEB;
padding: 15px 10px 15px 20px;
}
208
La rgle #sidebar applique un style la balise div sidebar qui lui donne une largeur de 200 pixels, un arrire-plan gris, un remplissage haut et bas
de 15 pixels, un remplissage droite de 10 pixels et un remplissage gauche de 20 pixels. Lordre de remplissage par dfaut est le suivant : haut,
droite, bas, gauche. En outre, la rgle positionne la balise div sidebar avec float: left, proprit qui pousse la balise div sidebar vers le ct gauche
de la balise div container. Les rsultats de lapplication de la rgle la balise div sidebar sont les suivants :
Div sidebar, flottante gauche

A. Largeur de 200 pixels B. Remplissage haut et bas de 15 pixels
Enfin, la rgle CSS pour la balise div container principale termine la mise en forme :
1
2
3
4
#mainContent {
margin: 0 0 0 250px;
padding: 0 20px 20px 20px;
}
La rgle #mainContent applique un style la balise div main qui lui donne une marge gauche de 250 pixels, ce qui correspond un espace
de 250 pixels entre le ct gauche de la balise div container et le ct gauche de la balise div main content. En outre, la rgle prvoit 20 pixels
despacement sur les cts droit, bas et gauche de la balise div main content. Les rsultats de lapplication de la rgle la balise div mainContent
sont les suivants :
Le code complet ressemble ce qui suit :
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#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;
}
</style>
209
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
</head>
<body>

<div id="container">

<div id="sidebar">
<h3>Sidebar Content</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>
</div>

<div id="mainContent">
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus
rutrum.</p>
<p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus
venenatis, tristique in, vulputate at, odio.</p>
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus
rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p>
</div>
</div>
</body>
Remarque : lexemple de code ci-dessus est une version simplifie du code qui cre la mise en forme deux colonnes avec encadr gauche
fixe lorsque vous crez un nouveau document laide des mises en forme prdfinies fournies avec Dreamweaver.
Haut de la page

Lors de la cration dune nouvelle page dans Dreamweaver, vous pouvez en crer une qui contient dj une mise en forme CSS. Dreamweaver
vous permet de choisir parmi 16 mises en forme CSS. En outre, vous pouvez crer vos propres mises en forme CSS et les ajouter au dossier de
configuration pour quelles figurent parmi les choix de mise en forme dans la bote de dialogue Nouveau Document.
Les mises en page CSS de Dreamweaver sont restitues correctement dans les navigateurs suivants : Firefox (Windows et Macintosh) 1.0, 1.5,
2.0 et 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.

2. Dans la bote de dialogue Nouveau document, slectionnez la catgorie Modle vierge. Il sagit de la slection par dfaut.
3. Pour Type de page, slectionnez le type de page crer.
Remarque : vous devez slectionner un type de page HTML pour la mise en forme. Par exemple, vous pouvez slectionner
HTML, ColdFusion, PHP, etc. Vous ne pouvez pas crer de page ActionScript, CSS, Library Item, JavaScript, XML, XSLT
ou ColdFusion Component avec une mise en forme CSS. Les types de page de la catgorie Autre dans la bote de dialogue
Nouveau document ne peuvent pas non plus inclure de mises en page CSS.
4. Pour Mise en forme, slectionnez la mise en forme CSS utiliser. Vous pouvez choisir parmi 16 mises en forme diffrentes.
La fentre Aperu montre la mise en forme slectionne et en donne une brve description.
5. Slectionnez un type de document dans le menu DocType.
6. Slectionnez un emplacement pour le fichier CSS de la mise en forme dans le menu droulant CSS de mise en forme dans.
210
Crer un nouveau fichier Ajoute le code CSS de mise en forme une nouvelle feuille de style CSS externe et associe la
nouvelle feuille de style la page que vous crez.
forme. Cette option est particulirement utile si vous voulez utiliser la mme mise en forme CSS (les rgles CSS figurant dans
un fichier) dans plusieurs documents.
Si vous avez slectionn Ajouter len-tte dans le menu droulant CSS de mise en forme dans (loption par dfaut),
cliquez sur Crer.
Si vous avez slectionn Crer un nouveau fichier dans le menu droulant CSS de mise en forme, cliquez sur Crer, puis
spcifiez un nouveau nom pour le nouveau fichier externe dans la bote de dialogue Enregistrer la feuille de style sous.
Si vous avez slectionn Lier au fichier existant dans le menu droulant CSS de mise en forme dans, ajoutez le fichier
externe dans la zone de texte Lier le fichier CSS en cliquant sur licne dajout de feuille de style, en renseignant la bote
de dialogue Associer feuille de style externe et en cliquant sur OK. Une fois que vous avez termin, cliquez sur Crer
dans la bote de dialogue Nouveau document.
Remarque : lorsque vous slectionnez loption Lier au fichier existant, le fichier que vous spcifiez doit dj contenir les
rgles correspondant au fichier CSS.
Lorsque vous placez le CSS de mise en forme dans un nouveau fichier ou lorsque vous le liez un fichier existant,
Dreamweaver lie immdiatement le fichier la page HTML que vous crez.
Remarque : les commentaires conditionnels (CC) pour Internet Explorer, qui permettent de contourner les problmes de
rendu dans IE, restent incorpors dans len-tte du nouveau document de mise en forme CSS, mme si vous slectionnez
Nouveau fichier externe ou Fichier externe existant en tant quemplacement pour votre fichier CSS de mise en forme.
CSS) lors de la cration de cette page. Pour ce faire, cliquez sur licne Ajouter une feuille de style au-dessus du volet Lier le
fichier CSS, puis slectionnez une feuille de style CSS.
Vous trouverez une description dtaille de ce processus dans larticle de David Powers Automatically attaching a style
sheet to new documents (en anglais).
Ajout de mises en forme CSS personnalises la liste de choix

1. Crez une page HTML contenant la mise en forme CSS que vous souhaitez ajouter la liste de choix de la bote de dialogue
Nouveau document. Le fichier CSS correspondant la mise en forme doit rsider dans la section head de la page HTML.
Pour uniformiser votre mise en forme CSS personnalise avec les autres mises en forme 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 daperu de votre mise en forme (par exemple, un fichier .gif ou .png) au dossier Adobe
Dreamweaver CS5\Configuration\BuiltIn\Layouts. Les images par dfaut fournies avec Dreamweaver sont des fichiers PNG de
227 pixels de large x 193 pixels de haut.
Donnez votre image daperu le mme nom de fichier que votre fichier de faon pouvoir lidentifier facilement. Par
exemple, si votre fichier HTML est nomm myCustomLayout.htm, appelez votre image daperu myCustomLayout.png.
4. (Facultatif) Crez un fichier de notes pour votre mise en forme personnalise en ouvrant le dossier Adobe Dreamweaver
CS5\Configuration\BuiltIn\Layouts\_notes, en copiant et en collant les fichiers de notes existants dans le mme dossier, et en
renommant la copie en fonction de votre mise en forme personnalise. Par exemple, vous pouvez copier le fichier
oneColElsCtr.htm.mno et le renommer myCustomLayout.htm.mno.
5. (Facultatif) Aprs avoir cr un fichier de notes pour votre mise en forme personnalise, vous pouvez ouvrir le fichier et
spcifier le nom de la mise en forme, sa description et une image daperu.
211
212
Utilisation de fichiers Bootstrap

Bootstrap est le framework HTML, CSS et JavaScript gratuit le plus
connu, qui permet de dvelopper des sites web ractifs et
essentiellement destins aux mobiles. Ce framework comprend des
modles CSS et HTML ractifs pour les boutons, les tableaux, la
navigation, les carrousels d'image et d'autres lments que vous
pouvez utiliser sur votre page web. Quelques modules externes
JavaScript facultatifs sont galement disponibles, qui permettent
mme des dveloppeurs disposant de connaissances de codage
basiques de dvelopper des sites web ractifs attrayants.
Tutoriel vido : Cration de sites web

ractifs dans Dreamweaver CC
Apprenez tirer parti du design web
ractif pour crer des sites web de A
Z ou partir de modles de
dmarrage Bootstrap qui sadaptent
diffrents formats dcran, pour un
rendu impeccable de votre contenu.
Dreamweaver vous permet de crer des documents Bootstrap, mais

aussi de modifier des pages web existantes cres avec Bootstrap.
Que votre fichier Bootstrap soit dj finalis ou encore en cours de
conception, vous pouvez le modifier dans Dreamweaver. Il vous est
ainsi possible de modifier le code directement, mais aussi de le
peaufiner laide de fonctionnalits ddition visuelles telles que le
mode En direct, le panneau CSS Designer visuel, les requtes
multimdias visuelles et la fonction Extract.
Questions courantes
Crer des documents Bootstrap
Ouvrir des fichiers Bootstrap
Masquer, afficher et grer des lments Bootstrap masqus
Ajouter des composants Bootstrap
Ajouter des lignes
Ajouter des colonnes
Redimensionner et dcaler des colonnes
Remarque : pour les sites web crs laide de versions du framework Bootstrap antrieures la version 3,
les outils ddition visuelle qui permettent de masquer et dafficher les lments, ainsi que les fonctions de
modification de lignes et de colonnes (ajout, redimensionnement, dcalage), ne sont pas disponibles dans
Dreamweaver.
Haut de la page
Questions courantes
Depuis toujours, jutilise des grilles fluides dans Dreamweaver. Comment

minitier Bootstrap ?
Lorsque vous crez des documents grille fluide, Dreamweaver rend vos pages ractives en y appliquant
automatiquement les classes appropries. Vous navez qu vous occuper du contenu et dcider de son
repositionnement en fonction des diffrents formats utiliss.
De la mme manire, dans les documents Bootstrap, vous ne vous occupez que du contenu, tandis que
Dreamweaver se charge de la ractivit de votre page web, grce une troite intgration du framework
Bootstrap.
213
Bootstrap intgre un systme ractif de grilles fluides, principalement conu pour les appareils mobiles,
capable de redimensionner efficacement jusqu 12 colonnes mesure que la taille de lappareil ou de la
fentre daffichage augmente. Il comprend des classes prdfinies pour faciliter la mise en page, ainsi que
des options performantes pour la gnration de mises en page plus axes sur la smantique.
Documentation de Bootstrap.
Pour commencer utiliser Bootstrap dans Dreamweaver, vous pouvez vous aider des modles de
dmarrage Bootstrap. Dreamweaver comprend un lot de modles destins diffrents types de sites web,
par exemple pour crer une page de-commerce ou un portfolio.
Si vous souhaitez crer un document Bootstrap partir de zro, cest possible en suivant la procdure dcrite
ici.
Est-il possible de migrer des documents grille fluide existants vers des
documents Bootstrap dans Dreamweaver ?
Non, il nexiste pas de mthode directe permettant de convertir vos documents grille fluide existants en
documents Bootstrap. Nanmoins, le mode dutilisation de Dreamweaver pour crer et concevoir des
documents Bootstrap est semblable celui relatif aux documents grille fluide. Par exemple, vous pouvez
commencer par crer un document Bootstrap directement depuis la bote de dialogue Nouveau document.
Lorsque vous crez des documents grille fluide pour les trois principaux formats (mobile, tablette et
ordinateur), pour Bootstrap, vous devez commencer par crer un document adapt aux dimensions dcran
de base : petit, moyen ou grand. Les options de mise en page affiches lorsque vous cliquez sur des
lments dans un document Bootstrap sont galement similaires celles des documents grille fluide.
Haut de la page
Crer des documents Bootstrap

Pour commencer crer votre site web Bootstrap, vous pouvez slectionner lune des options suivantes de
la bote de dialogue Nouveau document :
Modles de dmarrage Bootstrap (Modles de dmarrage > Modles Bootstrap) :
utilisez cette option pour obtenir rapidement un rsultat fonctionnel, sans avoir partir de
zro pour la mise en page. Il vous suffit de modifier le texte et, si ncessaire, de
remplacer les lments prdfinis, pour disposer dun site web ractif en quelques clics.
Pour plus dinformations, voir Utilisation des modles de dmarrage Bootstrap.
Crer un document HTML partir du framework Bootstrap (Nouveau document >
HTML > Bootstrap) : utilisez cette option pour construire votre site pas pas, partir de
composants Bootstrap et CSS intgrs Dreamweaver. Pour plus dinformations, voir
Cration de documents HTML partir du framework Bootstrap.
Utilisation des modles de dmarrage Bootstrap

Les modles de dmarrage Bootstrap permettent de crer, en un clin dil, des pages web correspondant
des thmes populaires. Tous les fichiers dpendants prsents dans le framework peuvent tre copis
instantanment.
1. Cliquez sur Fichier > Nouveau.
2. Dans la bote de dialogue Nouveau document qui saffiche, cliquez sur Modles de
dmarrage, puis slectionnez llment souhait dans la liste des modles Bootstrap.
214
3. Cliquez sur Crer.

4. Indiquez lemplacement dans lequel vous souhaitez enregistrer le nouveau document et
cliquez sur Enregistrer.
5. Lorsquun message vous invite copier les fichiers dpendants, cliquez sur Copier.
Une page HTML base sur le modle choisi est alors cre. Vous pouvez ensuite
adapter cette page votre guise en ajoutant ou en supprimant des composants, en
modifiant le texte ou en changeant les lments inclus.
Cration de documents HTML partir du framework Bootstrap

Pour mettre au point votre site web ractif, vous pouvez commencer par crer un document HTML bas sur
le framework Bootstrap. Vous avez le choix entre crer un ensemble de fichiers de framework Bootstrap et
rutiliser les fichiers existants. Une fois le document cr, vous pouvez y ajouter des composants Bootstrap,
tels que des accordons et des carrousels, partir du panneau Insertion de Dreamweaver. Si vous disposez
de compositions Photoshop, vous pouvez aussi utiliser Extract pour importer des images, polices, styles,
textes et autres lments dans votre document Bootstrap.
1. Cliquez sur Fichier > Nouveau.
2. Dans la bote de dialogue Nouveau document qui saffiche, cliquez sur Nouveau
document > HTML, puis cliquez sur longlet Bootstrap.
3. Pour crer un fichier bootstrap.css (ainsi que les autres fichiers Bootstrap), procdez
comme suit :
Indiquez si vous souhaitez crer un nouveau fichier CSS Bootstrap ou reprendre un CSS
existant.
Si vous optez pour la premire solution, un dossier css est cr la racine du site et
le fichier bootstrap.css y est copi. Si vous choisissez dutiliser un CSS existant, indiquez
son chemin daccs ou naviguez jusqu son emplacement.
215
Cration de documents Bootstrap avec de nouveaux fichiers de framework
2. (Facultatif) Si vous souhaitez associer un autre CSS votre document, cliquez sur
dans la section Joindre un CSS. La bote de dialogue Ajouter une feuille de style
externe saffiche. Dfinissez les paramtres et cliquez sur OK.
3. Loption Intgrer une mise en page prdfinie permet dobtenir une structure de
document Bootstrap de base, comme illustr ci-dessous :
Document Bootstrap avec mise en page prdfinie
Si cette structure de base ne vous satisfait pas et que vous prfrez partir dun
document vierge, dslectionnez loption Intgrer une mise en page prdfinie.
4. (Facultatif) La mise en page par dfaut contient 12 colonnes, avec une gouttire de
30 px. Les tailles dcran par dfaut sont 768 px, 992 px et 1 200 px.
Si vous souhaitez modifier ces paramtres, cliquez sur Personnaliser. Le fichier
bootstrap.css est modifi en consquence.
5. Si vous le souhaitez, vous pouvez ouvrir le panneau Extract pour commencer
directement extraire les actifs de compositions Photoshop.
Une fois le document cr, vous trouverez trois sous-dossiers (css, js et fonts) dans le
dossier racine du site. Si aucun site nest dfini, vous devrez choisir un dossier dans
lequel ces sous-dossiers seront crs.
4. Pour utiliser des fichiers de framework Bootstrap existants, procdez comme suit :
1. Cliquez sur Utiliser existant et indiquez le chemin daccs du fichier
bootstrap.css. Vous pouvez galement naviguer jusqu lemplacement o est
enregistr le fichier CSS.
216
Cration de documents Bootstrap partir de fichiers de framework existants
2. (Facultatif) Si vous souhaitez associer un autre CSS votre document, cliquez sur
dans la section Joindre un CSS. La bote de dialogue Ajouter une feuille de style
externe saffiche. Dfinissez les paramtres et cliquez sur OK.
3. Loption Intgrer une mise en page prdfinie permet dobtenir une structure de
document Bootstrap de base. Si cette structure de base ne vous satisfait pas et que
vous prfrez partir dun document vierge, dslectionnez loption Intgrer une mise
en page prdfinie.
Remarque : le fichier bootstrap.css ainsi cr est en lecture seule. Comme vous pourrez le constater, les
options permettant dajouter, de modifier ou de supprimer des slecteurs, ou encore de changer les
proprits de ces derniers, sont dsactives dans CSS Designer.
Si vous souhaitez personnaliser votre document Bootstrap, crez un autre fichier CSS dans lequel vous
pourrez remplacer les styles existants, puis associez-le au document.
Haut de la page
Ouvrir des fichiers Bootstrap

Remarque : il est recommand douvrir et de modifier les documents crs dans Bootstrap version 3 et
ultrieures dans Dreamweaver.
Vous pouvez ouvrir les fichiers Bootstrap en procdant de lune des manires suivantes :
Slectionnez Fichier > Ouvrir, puis naviguez jusquau fichier HTML Bootstrap.
(Recommand) Crez un site Dreamweaver et faites pointer le dossier de ce site vers le
dossier qui contient tous vos fichiers Bootstrap.
217
Quand vous ouvrez un fichier HTML Bootstrap dans Dreamweaver :

Les lignes sont signales par des traits gris en pointills, avec des angles arrondis
Les colonnes sont signales par des traits bleus en pointills
Lignes et colonnes mises en vidence dans un document HTML Bootstrap

A. Ligne B. Colonne
Dreamweaver reconnat les fichiers CSS associs un fichier HTML Bootstrap si le nom du fichier CSS
contient bootstrap . La rfrence au fichier CSS peut tre tout ou partie des lments suivants :
Chemin d'accs local :
Le fichier CSS, compress ou non, est prsent localement. Par exemple :
<link href="css/bootstrap.css" rel="stylesheet"> ou
<link href="css/bootstrap.min.css" rel="stylesheet">
Chemin daccs distant :
Un fichier CSS distant, compress ou non. Par exemple :
<link href="http://somewebsite.com/css/bootstrap.css" rel="stylesheet">
<link href="http://somewebsite.com/css/bootstrap.min.css" rel="stylesheet">
CDN
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"
rel="stylesheet">
Remarque : les feuilles de style Bootstrap dans les balises de liaison et dimportation sont prises en charge
dans Dreamweaver. Toutefois, l'importation imbrique (lien vers une feuille de style qui importe son tour
une autre feuille de style) n'est pas prise en charge.
Haut de la page
Masquer, afficher et grer des lments Bootstrap masqus

Parfois, vous pouvez avoir besoin dafficher un lment dans une fentre alors que vous vous trouvez dans
une autre fentre, ou de masquer cet lment pour des questions de design.
Pour masquer un lment Bootstrap, cliquez avec le bouton droit de la souris et

slectionnez Masquer l'lment. L'lment est masqu temporairement dans la vue.
Pour afficher des lments masqus, cliquez avec le bouton droit de la souris et
slectionnez Grer les lments masqus. Les lments masqus apparaissent sur un
arrire-plan gris hachur. Cliquez sur lil pour afficher llment.
218
Grer les lments Bootstrap masqus
Haut de la page
Ajouter des composants Bootstrap

L'option Composants Bootstrap dans le panneau Insertion rpertorie tous les composants Bootstrap que vous
pouvez ajouter votre page web dans Dreamweaver.
Composants Bootstrap dans le panneau Insertion
Pour ajouter un composant, faites-le glisser du panneau vers la page web. Avant de dposer le composant,
notez les assistances visuelles, telles que les Guides en direct, l'insertion prcise ( l'aide de DOM) et
l'assistant de position. Utilisez ces assistances pour placer les composants rapidement et avec prcision sur
votre page. Pour plus d'informations sur l'insertion d'lments dans votre page web, consultez l'article sur le
panneau Insertion.
Haut de la page
Ajouter des lignes

Cliquez sur la ligne aprs laquelle vous souhaitez ajouter la nouvelle ligne. Cliquez ensuite sur
Bootstrap avec deux lments de colonne enfant de six colonnes chacun est ajoute.
Le code pour la ligne ajoute se prsente comme suit :
219
. Une ligne
<div class="row">
<div class="col-*-6"></div>
<div class="col-*-6"></div>
</div>
o * reprsente la taille de l'cran actuel dans Dreamweaver.
Haut de la page
Ajouter des colonnes

Slectionnez la colonne requise, puis cliquez sur
. La colonne slectionne est duplique sans ses enfants.
Toutes les colonnes vides ont une hauteur minimale de 20 pixels. Toutefois, cette hauteur n'est pas
rellement ajoute la page ; elle s'affiche uniquement en mode En direct afin de faciliter l'insertion
d'lments dans les colonnes.
Haut de la page
Redimensionner et dcaler des colonnes

Le redimensionnement et le dcalage de colonnes deviennent impratifs en particulier lorsque vous crez des
designs ractifs pour diffrentes fentres.
Redimensionner des colonnes

Cliquez sur la colonne requise et faites glisser la poigne de droite pour la redimensionner. Lorsque vous
redimensionnez une colonne, la classe col-*-n est ajoute, o * reprsente la requte multimdia actuelle
(xs, sm, md ou lg) et n le nombre de colonnes qu'elle occupe.
Dreamweaver dtecte la taille d'cran actuelle et ajoute la classe approprie. Pour redimensionner des
colonnes afin qu'elles s'adaptent des fentres spcifiques, modifiez la taille de la fentre l'aide des
options situes dans le coin infrieur droit ou du scrubber. Redimensionnez ensuite les colonnes comme
vous le souhaitez.
Dcaler des colonnes

Cliquez sur la colonne requise et faites glisser la poigne de gauche pour dcaler la colonne. Le dcalage est
affich sous la forme d'une zone hachure. Lorsque vous dcalez la colonne, la classe col-*-offset-n est
ajoute, o * reprsente la requte multimdia actuelle (xs, sm, md ou lg) et n le nombre de colonnes dont
elle est dcale.
Dreamweaver dtecte la taille d'cran actuelle et ajoute la classe approprie. Pour dcaler des colonnes afin
qu'elles s'adaptent des fentres spcifiques, modifiez la taille de la fentre l'aide des options situes dans
le coin infrieur droit ou du scrubber. Dcalez ensuite les colonnes comme vous le souhaitez.
220

Le module CSS3 Requtes multimdias vous permet de crer des sites web ractifs en dfinissant diffrentes
rgles de style en fonction des appareils ou des types de supports utiliss. Grce ces rgles, le rendu du
contenu sadapte la situation, notamment la taille de lcran, la taille de la fentre du navigateur, le format et
lorientation de lappareil, ou encore sa rsolution.
Pour ajouter des requtes multimdias votre code CSS, vous pouvez utiliser la rgle @media. Vous pouvez
galement crer des feuilles de style distinctes pour chaque type de support, puis les invoquer laide de la
syntaxe ci-aprs :
1
2
3
<link rel='stylesheet' media='all' href='normal.css' />

<link rel='stylesheet' media='print' href='print.css' />
<link rel='stylesheet' media='screen and (min-width: 701px)' href='medium.css'
/>
Le navigateur dun appareil vrifie la requte multimdia, puis utilise le fichier CSS correspondant pour
afficher la page web.
Pour plus dinformations, voir cet article.
Vous pouvez crer des requtes multimdias en ajoutant le code correspondant dans vos fichiers HTML ou
CSS. En outre, Dreamweaver permet de crer et de grer facilement des requtes multimdias via deux
outils :
Barre de requtes multimdias visuelles
CSS Designer
Ces deux mthodes diffrent principalement par leur aspect visuel. Si vous prfrez modifier le code, puis
prvisualiser les modifications dans la vue En direct, utilisez CSS Designer. Si vous prfrez visualiser votre
page diffrents points darrt pendant que vous apportez les modifications souhaites, la barre de requtes
multimdias visuelles devrait mieux vous convenir.
Barres de requtes multimdias visuelles

Affichage/Masquage des requtes multimdias visuelles
Passage dun point darrt un autre
Modification visuelle des requtes multimdias
Ajout de nouvelles requtes multimdias
Suppression de requtes multimdias
Affichage du code des requtes multimdias
Haut de la page
Barres de requtes multimdias visuelles

Les barres de requtes multimdias visuelles constituent une reprsentation visuelle des requtes
multimdias prsentes sur une page. Ces barres vous permettent de visualiser votre page web diffrents
points darrt et de voir comment chaque composant de la page est repositionn dans les diffrentes fentres
daffichage. Lorsque vous affichez votre page dans diffrentes fentres, vous pouvez apporter des
modifications spcifiques lune de ces fentres daffichage sans que cela ne change laspect de la page
dans les autres fentres.
221
Loutil Requtes multimdias virtuelles se compose de trois barres horizontales, reprsentant chacune une
catgorie de requtes multimdias :
Remarque : les requtes multimdias rpertories dans le panneau CSS Designer disposent galement dun
prfixe correspondant ces couleurs.
Chaque catgorie peut comporter une ou plusieurs requtes multimdias. Si une condition de requte
multimdia nest pas dfinie dans le document, la barre de requtes multimdias visuelles correspondante ne
sera pas affiche. Par exemple, si le document ne contient pas de condition min-width, la barre violette ne
saffiche pas.
Les valeurs des points darrt sont indiques sur les barres, gauche pour les conditions min-width et
droite pour les conditions max-width.
A. Points darrt B. Barres de requtes multimdias visuelles C. Icne Ajouter une requte multimdia D.
Scrubber
Haut de la page
Affichage/Masquage des requtes multimdias visuelles

Par dfaut, la barre de requtes multimdias visuelles est visible dans la vue En direct. Pour la masquer,
vous pouvez utiliser le bouton Masquer/Afficher dans la barre doutils Document.
Affichage/Masquage de la barre de requtes multimdias visuelles
222
Haut de la page
Passage dun point darrt un autre

Pour afficher votre page dans un format spcifique (point darrt), cliquez sur la barre de requtes
multimdias correspondante. Le document saffiche conformment ce point darrt.
Vous pouvez galement faire glisser le scrubber jusquau point darrt souhait.
Slection dun point darrt via un clic sur la barre correspondante ou un dplacement du scrubber
Pour redimensionner laffichage afin de ladapter aux dimensions de la fentre de document Dreamweaver,
Double-cliquez nimporte o dans la zone grise droite du document, qui contient la
mention Double-cliquez pour ajuster la largeur . Si vous ne voyez pas cette zone
grise, faites glisser le scrubber vers la gauche.
Ouvrez la liste droulante situe au bas de la fentre de document, puis slectionnez
loption Toute la largeur.
Si cette option napparat pas, faites glisser le scrubber afin de rduire la taille de la page web.
Pour annuler cette action, appuyez sur Ctrl+Z (Win) ou Cmd+Z (Mac).
Haut de la page
Modification visuelle des requtes multimdias

1. Cliquez sur la barre de requtes multimdias visuelles correspondant la requte
multimdia que vous souhaitez modifier.
Des poignes de redimensionnement apparaissent. Si une requte multimdia dispose
la fois de valeurs min-width et max-width, des poignes de redimensionnement
apparaissent des deux cts de la barre.
2. Faites glisser les poignes jusqu atteindre la taille souhaite.

Les requtes multimdias sont automatiquement mises jour selon les nouvelles valeurs
min-width et/ou max-width. Une notification saffiche pour confirmer que la requte
multimdia a t modifie. Si la barre de requtes multimdias visuelles comporte
plusieurs requtes multimdias, celles-ci sont toutes mises jour. Le message de
confirmation prcise alors le nombre de requtes multimdias mises jour.
223
Haut de la page
Ajout de nouvelles requtes multimdias

1. Faites glisser le scrubber le long de la rgle jusqu atteindre la taille souhaite.
2. Cliquez sur . Le programme vous invite cliquer sur des zones spcifiques de la rgle
afin de crer la requte multimdia.
3. Cliquez sur la zone spcifie de la rgle en fonction de la condition souhaite (min ou

max) pour la requte.
Pour annuler lopration, faites glisser le scrubber vers une autre position.
4. Dans la fentre contextuelle qui saffiche, lune des conditions de requte multimdia
(celle que vous avez choisie) est prremplie en fonction de la position actuelle du
scrubber. Si vous souhaitez dfinir les deux types de condition (min et max), indiquez les
valeurs correspondantes. Slectionnez ensuite une source CSS laquelle ajouter la
requte multimdia.
Si vous choisissez de crer un nouveau fichier CSS, une autre fentre contextuelle
saffiche. Prcisez le nom et lemplacement du nouveau fichier CSS, puis cliquez sur OK.
Haut de la page
Suppression de requtes multimdias

1. Cliquez avec le bouton droit de la souris sur la barre de requtes multimdias visuelles
concerne.
2. Cliquez sur Supprimer, puis sur la requte multimdia que vous souhaitez supprimer.
3. Cliquez sur OK pour confirmer que vous souhaitez supprimer toutes les requtes
multimdias et les slecteurs associs.
Haut de la page
Affichage du code des requtes multimdias

1. Cliquez avec le bouton droit de la souris sur la barre de requtes multimdias visuelles
concerne, puis passez la souris sur loption Passer en mode Code.
La liste qui apparat dtaille toutes les requtes multimdias de la plage de points darrt
slectionne, ainsi que les fichiers dans lesquels ces requtes sont dclares.
2. Cliquez sur une requte multimdia pour accder au code correspondant en mode Code.
Si le mode Code nest pas visible, le document passe en mode fractionn afin dafficher
le code.
224
Design ractif laide de mises en forme grille fluide

La mise en page dun site web doit rpondre et sadapter aux dimensions du priphrique sur lequel le site
web apparat (design ractif). Une mise en forme grille fluide est un moyen visuel de crer diffrentes mises
en page en fonction du priphrique sur lequel le site web saffiche.
Par exemple, votre site web sera consult sur des priphriques de bureau, des tablettes et des tlphones
portables. Vous pouvez utiliser les mises en forme grille fluide pour spcifier la mise en page sur chacun de
ces priphriques. Selon que le site web est destin tre consult sur un ordinateur de bureau, une tablette
ou un tlphone portable, la mise en forme correspondante est utilise pour laffichage.
Pour plus dinformations : Mise en forme adaptative ou mise en forme ractive ?
Remarque : le mode Inspection nest pas disponible pour les documents de mise en forme de grille fluide.
Utilisation de mises en forme grille fluide

Cration dune mise en forme grille fluide
Modification de documents grille fluide
Insertion dlments de grille fluide
Imbrication dlments
Voir aussi :
Haut de la page
Utilisation de mises en forme grille fluide

Pour dcouvrir comment utiliser les mises en forme grille fluide, regardez le tutoriel vido suivant :
Dcouverte des mises en forme grille fluide.
Haut de la page
Cration dune mise en forme grille fluide

1. Slectionnez Fichier > Grille fluide (hrite).
2. La valeur par dfaut pour le nombre de colonnes dans la grille saffiche au centre du
type de support. Pour personnaliser le nombre de colonnes pour un priphrique,
dfinissez la valeur de votre choix.
3. Pour dfinir la largeur dune page par rapport la taille de lcran, indiquez la valeur en
pourcentage.
4. Vous pouvez galement modifier la largeur de la gouttire. La gouttire correspond
lespace entre deux colonnes.
5. Spcifiez les options CSS de la page.
Lorsque vous cliquez sur Crer, vous tes invit prciser un fichier CSS. Vous pouvez
effectuer lune des oprations suivantes :
Crer un nouveau fichier CSS.
Ouvrir un fichier CSS existant.
Prciser que le fichier CSS en cours douverture est un fichier CSS grille fluide.
225
La grille fluide pour tlphones portables est affiche par dfaut. Le panneau Insertion
correspondant la grille fluide est par ailleurs affich. Utilisez les options du panneau
Insertion pour crer votre mise en forme.
Pour crer une mise en forme pour dautres appareils, cliquez sur licne correspondante
dans les options situes sous le mode Cration.
6. Enregistrez le fichier. Lorsque vous enregistrez le fichier, vous tes invit enregistrer
les fichiers dpendants, tels que boilerplate.css et respond.min.js, dans un emplacement
sur votre ordinateur. Spcifiez un emplacement, puis cliquez sur Copier.
Le fichier boilerplate.css est bas sur le contenu passe-partout HTML5. Il sagit dun jeu
de styles CSS qui assure la cohrence du rendu de votre page web sur plusieurs
priphriques. respond.min.js est une bibliothque JavaScript qui contribue la prise en
charge des requtes multimdias dans les anciens navigateurs.
Haut de la page
Modification de documents grille fluide

Vous pouvez modifier les documents grille fluide directement en mode En direct afin de :
Associer des classes et des identifiants HTML aux lments. Pour plus dinformations,
voir Affichage dlment.
Modifier les attributs et le texte de limage. Pour plus dinformations, voir Inspecteur
Proprits rapide et Modification de texte en mode En direct.
Insrer de nouveaux lments. Pour plus dinformations, voir Insertion dlments grille
fluide.
Vous pouvez galement visualiser la structure du DOM HTML dun document grille fluide laide de
lAffichage rapide des lments.
Haut de la page
Insertion dlments de grille fluide

Le panneau Insertion (Fentre > Insertion) rpertorie les lments que vous pouvez utiliser dans une mise en
page grille fluide. Lors de linsertion dlments, vous pouvez choisir de les insrer sous forme dlments
fluides.
1. Dans le panneau Insertion, cliquez sur llment insrer.
2. Dans la bote de dialogue qui saffiche, cliquez sur Avant, Aprs ou Imbriquer afin de
positionner llment en fonction de llment de rfrence en surbrillance dans le
document.
Insertion dlments dans une mise en forme grille fluide
226
3. Slectionnez une classe ou entrez une valeur pour lID. Les classes du fichier CSS que
vous avez spcifi lors de la cration de la page saffichent dans le menu Classe.
4. Activez la case cocher Insrer en tant qulment fluide.
5. Lorsque vous slectionnez un lment insr, les options permettant de masquer,
dupliquer ou supprimer la balise div saffichent. Pour les balises div places les unes audessus des autres, loption de permutation des balises div saffiche.
Option
Description
Permuter
llment
div
Permute llment actuellement slectionn avec

llment au-dessus ou en dessous.
Masque llment.
Pour afficher un lment, effectuez lune des oprations
suivantes :
Masquer
Pour afficher les slecteurs de type ID, modifiez la

proprit daffichage dans le fichier CSS et remplacez-la
par bloc. (display:block)
Pour afficher les slecteurs de classe, supprimez la
classe applique (hide_<MediaType>) dans le code
source.
Remonter
dune
ligne
Dplace llment dune range vers le haut.
Dupliquer
Duplique llment actuellement slectionn. Le

code CSS li llment est galement dupliqu.
Supprimer
Pour les slecteurs dID, supprime la fois le code HTML

et le code CSS. Pour supprimer uniquement le
code HTML, appuyez sur la touche Suppr.
Pour les slecteurs de classe, seul le code HTML est
supprim.
Aligner
Pour les slecteurs de classe, loption Alignement agit

comme un bouton de marge zro.
Pour les slecteurs dID, le bouton Alignement aligne
llment sur la grille.
Il est possible de parcourir les lments dune page de manire cyclique en utilisant
les touches flches vers le haut et le bas. Slectionnez la limite de llment, puis
appuyez sur la touche flche.
Haut de la page
Imbrication dlments
Pour imbriquer des lments fluides dans dautres lments fluides, assurez-vous que le focus se trouve
lintrieur de llment parent. Insrez ensuite llment enfant requis.
La duplication imbrique est galement prise en charge. La duplication imbrique permet de dupliquer le
code HTML (de llment slectionn) et de gnrer le code CSS de grille fluide. Les lments absolus
contenus dans llment slectionn sont positionns en consquence. Il est par ailleurs possible de
dupliquer les lments imbriqus laide du bouton Dupliquer.
Lorsque vous supprimez un lment parent, le code CSS correspondant llment, ses enfants et le
code HTML associ sont galement supprims. Il est possible de supprimer simultanment tous les lments
227
imbriqus laide du bouton Supprimer (raccourci clavier : Ctrl+Suppr).
228
Prsentation de contenu dans des tableaux

A propos des tableaux
Priorit de formatage des tableaux dans le code HTML
Fractionnement et fusion des cellules dun tableau
Insertion dun tableau et ajout de contenu
Importation et exportation de donnes tabulaires
Slection d'lments de tableau
Dfinition des proprits dun tableau
Dfinition des proprits de cellule, de ligne ou de colonne
Utilisation du mode Tableaux dvelopps pour une modification de tableau plus simple
Mise en forme de tableaux et de cellules
Redimensionnement de tableaux, de colonnes et de lignes
Ajout et suppression de lignes et de colonnes
Fractionnement et fusion de cellules
Copie, collage et suppression de cellules
Imbrication de tableaux
Tri de tableaux
Remarque : linterface utilisateur a t simplifie dans Dreamweaver CC et les versions ultrieures. Par
consquent, il se peut que vous ne trouviez pas certaines options dcrites dans cet article dans
Dreamweaver CC et les versions ultrieures. Pour plus dinformations, voir cet article.
Haut de la page
A propos des tableaux

Les tableaux sont trs utiles pour prsenter des donnes 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 gnralement pas spcifies explicitement en code HTML,
Dreamweaver vous permet de manipuler les colonnes, les lignes et les cellules.
Dreamweaver affiche la largeur du tableau et de chacune de ses colonnes lorsque le tableau est slectionn
ou que le point dinsertion se trouve dans celui-ci. En regard des largeurs se trouvent les flches du menu
des en-ttes de tableau et des menus des en-ttes de colonne. Utilisez les menus pour accder rapidement
des commandes standard relatives aux tableaux. Vous pouvez activer et dsactiver 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 spcifie dans le
code HTML. Si deux nombres s'affichent, cela signifie que la largeur visuelle qui apparat en mode Cration
est diffrente de la largeur spcifie dans le code HTML. Cela peut se produire lorsque vous redimensionnez
un tableau en faisant glisser son coin infrieur droit ou lorsque vous ajoutez du contenu une cellule plus
grande que sa valeur dfinie.
Par exemple, si vous dfinissez une largeur de colonne de 200 pixels, puis que vous ajoutez du contenu qui
tend la largeur 250 pixels, deux nombres saffichent pour cette colonne : 200 (la largeur spcifie dans le
code) et (250) entre parenthses (la largeur visuelle de la colonne telle quelle apparat lcran).
Remarque : vous avez aussi la possibilit de mettre en forme vos pages en dfinissant le positionnement
dans le code CSS.
Haut de la page
229
Priorit de formatage des tableaux dans le code HTML

Lorsque vous formatez des tableaux en mode Cration, vous pouvez dfinir des proprits s'appliquant au
tableau tout entier ou une srie de lignes, de colonnes ou de cellules slectionnes dans le tableau.
Lorsqu'une proprit (une couleur d'arrire-plan ou un alignement, par exemple) est dfinie par une valeur
pour tout le tableau et par une autre valeur pour chaque cellule, les proprits de formatage des cellules
prvalent sur les proprits de formatage de lignes, qui leur tour prvalent sur celles du tableau.
Lordre de priorit pour la mise en forme des tableaux est le suivant :
1. Cellules
2. Lignes
3. Tableau
Par exemple, si vous dfinissez un arrire-plan de couleur bleue pour une cellule et un arrire-plan jaune
pour lensemble du tableau, la cellule restera bleue, puisque les proprits de mise en forme des cellules
sont prioritaires sur celles du tableau.
Remarque : lorsque vous dfinissez les proprits dune colonne, Dreamweaver modifie les attributs de la
balise td correspondant chaque cellule de la colonne.
Haut de la page
Fractionnement et fusion des cellules dun tableau

Vous pouvez fusionner n'importe quel nombre de cellules adjacentes (tant que la slection correspond une
ligne ou un rectangle de cellules) pour produire une cellule unique s'tendant sur plusieurs colonnes ou
lignes. Vous pouvez fractionner une cellule en un nombre quelconque de lignes et de colonnes, qu'elle ait t
prcdemment fusionne ou non. Dreamweaver modifie automatiquement la structure du tableau (en ajoutant
les ventuels attributs colspan ou rowspan requis) afin de parvenir la disposition spcifie.
Dans lexemple ci-dessous, les cellules se trouvant au milieu des deux premires lignes ont t fusionnes
en une seule cellule qui stend sur deux lignes.
Haut de la page
Insertion dun tableau et ajout de contenu

Utilisez le panneau ou le menu Insertion pour crer un nouveau tableau. Ajoutez ensuite du texte et des
images aux cellules du tableau de la mme faon que vous le faites en dehors d'un tableau.
Remarque : le mode Mise en forme est obsolte depuis la version Dreamweaver CS4. Le mode Mise en
forme crait des mises en forme de page l'aide de tableaux de mise en forme, ce qui n'est plus conseill
par Adobe. Pour plus dinformations sur le mode Mise en forme et la raison pour laquelle il a t rendu
obsolte, consultez le blog de lquipe Dreamweaver.
1. Dans la fentre de document en mode Cration, placez le point d'insertion l'endroit o
vous voulez que le tableau apparaisse.
Remarque : si votre document est vide, le point d'insertion peut uniquement tre plac
au dbut du document.
Cliquez sur Insertion > Tableau.
Dans la catgorie Commun du panneau Insertion, cliquez sur Tableau.
230
2. Dfinissez les attributs dans la bote de dialogue Tableau, puis cliquez sur OK pour crer
le tableau.
Lignes Dtermine le nombre de lignes du tableau.
Colonnes Dtermine le nombre de colonnes du tableau.
Largeur du tableau Indique la largeur du tableau en pixels ou en pourcentage de la

largeur de la fentre du navigateur.
Largeur de la bordure Indique la largeur, en pixels, des bordures du tableau.
Espacement des cellules Dtermine le nombre de pixels sparant les cellules

contigus du tableau.
Lorsque vous n'affectez pas explicitement de valeur pour la largeur de la bordure,
l'espacement entre les cellules et la marge intrieure des cellules, la plupart des
navigateurs affichent une largeur de bordure et une marge intrieure des cellules
dfinies sur 1, ainsi qu'un espacement entre les cellules dfini sur 2. Pour tre sr
que les navigateurs afficheront le tableau sans bordure, marge intrieure ni
espacement, dfinissez Marge intrieure des cellules et Espacement entre les cellules
sur 0.
Marge intrieure des cellules Indique le nombre de pixels sparant la bordure dune
cellule de son contenu.
Aucun Empche la cration den-ttes de colonne et de ligne dans le tableau.
Gauche Transforme la premire colonne du tableau en colonne den-ttes, pour vous

permettre dentrer un en-tte pour chaque ligne du tableau.
Haut Transforme la premire ligne du tableau en ligne den-ttes, pour vous permettre
dentrer un en-tte pour chaque colonne du tableau.
Les deux Permet dentrer des en-ttes de colonne et de ligne dans le tableau.
Il est judicieux d'employer des en-ttes au cas o l'un des visiteurs de votre site web
utiliserait un lecteur d'cran. Les lecteurs d'cran lisent les en-ttes de tableau et
aident les utilisateurs garder une trace des informations de tableau.
Lgende Cre un titre de tableau qui saffiche en dehors du tableau.
Aligner la lgende Indique quel endroit la lgende du tableau doit apparatre par
rapport au tableau.
Rsum Fournit une description du tableau. Les lecteurs d'cran lisent le texte de
rsum mais le texte n'apparat pas dans le navigateur de l'utilisateur.
Haut de la page
Importation et exportation de donnes tabulaires

Vous pouvez importer des donnes tabulaires cres dans une autre application (par exemple, Microsoft
Excel) et enregistres au format texte dlimit (lments spars par des tabulations, virgules, deux-points,
231
points-virgules ou autres dlimiteurs) dans Dreamweaver, afin de les mettre en forme dans un tableau.
Vous pouvez galement exporter les donnes dun tableau depuis Dreamweaver vers un fichier texte, dans
lequel le contenu des cellules contigus est spar par un dlimiteur. Les caractres que vous pouvez utiliser
comme dlimiteurs sont la virgule, les deux-points, le point-virgule ou l'espace. Lorsque vous exportez un
tableau, tout le tableau est export ; vous ne pouvez pas exporter certaines parties du tableau seulement.
Si vous souhaitez ne rcuprer quune partie des donnes dun tableau, par exemple les six premires
lignes ou les six premires colonnes, copiez les cellules contenant ces donnes et collez-les hors du
tableau (pour crer un nouveau tableau), puis exportez ce nouveau tableau.

Cliquez sur Fichier > Importer > Donnes tabulaires.
Dans la catgorie Donnes du panneau Insertion, cliquez sur licne Importer les
donnes tabulaires
Cliquez sur Insertion > Objets de tableau > Importer les donnes tabulaires.
2. Dfinissez les options relatives aux donnes tabulaires, puis cliquez sur OK.
Fichier de donnes Correspond au nom du fichier importer. Cliquez sur le bouton

Parcourir pour choisir le fichier.
Dlimiteur Correspond au dlimiteur utilis dans le fichier que vous importez.

Si vous choisissez Autre, une zone de texte apparat droite du menu contextuel. Entrez
le dlimiteur utilis dans votre fichier.
Remarque : spcifiez le dlimiteur utilis lors de l'enregistrement du fichier de donnes.
Dans le cas contraire, le fichier ne pourra pas tre import correctement et vos donnes
ne seront pas formates convenablement dans un tableau.
Largeur du tableau Correspond la largeur du tableau.

Slectionnez Adapter au contenu pour adapter la largeur de chaque colonne la
plus longue chane de texte quelle contient.
Slectionnez Fixe pour spcifier une largeur de tableau fixe, en pixels ou en
pourcentage de la largeur de la fentre du navigateur.
Bordure Indique la largeur, en pixels, des bordures du tableau.
Marge intrieure des cellules Dtermine lespace (en pixels) entre le contenu dune
cellule et son contour.
Espacement des cellules Dtermine le nombre de pixels sparant les cellules

contigus dun tableau.
Lorsque vous n'affectez pas explicitement de valeur pour les bordures, l'espacement
entre les cellules et la marge intrieure des cellules, la plupart des navigateurs
affichent des bordures et une marge intrieure des cellules dfinies sur 1, ainsi qu'un
espacement entre les cellules dfini sur 2. Pour tre sr que les navigateurs
afficheront le tableau sans marge intrieure ni espacement, dfinissez Marge
intrieure des cellules et Espacement entre les cellules sur 0. Pour visualiser les
limites des cellules et du tableau lorsque la bordure est dfinie sur 0, cliquez sur
Affichage > Assistances visuelles > Bordures du tableau.
Formatage ligne suprieure Dtermine le formatage appliqu, le cas chant, la

ligne suprieure du tableau. Choisissez parmi quatre options de formatage : pas de
232
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 > Exporter > Tableau.
3. Dfinissez les options suivantes :
Dlimiteur Indique le caractre utiliser pour sparer les lments dans le fichier
export.
Sauts de ligne Indique sous quel systme d'exploitation vous allez ouvrir le fichier
export : Windows, Macintosh ou UNIX. Les diffrents systmes d'exploitation utilisent
des mthodes diffrentes pour indiquer la fin d'une ligne de texte.
4. Cliquez sur Exporter.
5. Saisissez un nom pour le fichier et cliquez sur Enregistrer.
Haut de la page
Slection d'lments de tableau

Vous pouvez slectionner un tableau entier ou encore l'ensemble d'une ligne ou d'une colonne. Vous pouvez
galement slectionner une ou plusieurs cellules individuelles.
Lorsque vous placez le pointeur sur un tableau, une ligne, une colonne ou une cellule, Dreamweaver met
toutes les cellules concernes en surbrillance afin que vous sachiez quelles cellules seront slectionnes.
Ceci est utile pour les tableaux sans bordures, les cellules comprenant plusieurs colonnes ou lignes ou dans
le cas de tableaux imbriqus. Vous pouvez modifier la couleur de la mise en surbrillance dans les
prfrences.
Si vous placez le pointeur sur une bordure du tableau, puis que vous maintenez la touche Ctrl (Windows)
ou Commande (Macintosh) enfonce, la totalit de la structure du tableau (c'est--dire toutes les cellules)
est mise en surbrillance. Ceci peut tre utile lorsque vous disposez de tableaux imbriqus et que vous
souhaitez afficher la structure de l'un d'eux.
Slection d'un tableau entier

Cliquez dans le coin suprieur gauche du tableau, sur le bord suprieur ou infrieur
du tableau ou sur une ligne ou une bordure de colonne.
Remarque : le pointeur prend la forme de licne de grille du tableau pour vous
indiquer que vous pouvez slectionner le tableau (sauf si vous cliquez sur la bordure
dune ligne ou dune colonne).
Cliquez dans une cellule du tableau, puis slectionnez la balise <table> dans le
slecteur situ dans le coin infrieur gauche de la fentre de document.
Cliquez dans une cellule du tableau, puis choisissez Modifier > Tableau >
Slectionner le tableau.
Cliquez dans une cellule du tableau, puis sur le menu d'en-tte du tableau et
choisissez Slectionner le tableau. Des poignes de slection apparaissent sur les
bords infrieurs et droits du tableau slectionn.
233
Slection d'une ou plusieurs lignes ou colonnes

1. Positionnez le pointeur sur le bord gauche d'une ligne ou le bord suprieur d'une
colonne.
2. Lorsque le pointeur se transforme en flche de slection, cliquez pour slectionner une
ligne ou une colonne ou faites-le glisser pour slectionner plusieurs lignes ou colonnes.
Slection d'une seule colonne

1. Cliquez dans la colonne.
2. Cliquez sur le menu des en-ttes de colonne, puis choisissez Slectionner la colonne.
Slection d'une seule cellule

Cliquez dans la cellule, puis slectionnez la balise <td> dans le slecteur de balises
dans le coin infrieur gauche de la fentre de document.
Cliquez dans la cellule en maintenant la touche Ctrl (Windows) ou Commande (Mac)
enfonce.
Cliquez dans la cellule, puis choisissez Edition > Slectionner tout.
Lorsquune cellule est dj slectionne, cliquez nouveau sur Edition > Slectionner
tout pour slectionner tout le tableau.
Slection d'une ligne ou d'un bloc rectangulaire de cellules

Faites glisser la souris d'une cellule vers une autre.
Cliquez sur une cellule. Maintenez la touche Ctrl (Windows) ou Commande (Mac)
enfonce et cliquez sur cette mme cellule pour la slectionner, puis cliquez sur une
autre en maintenant la touche Maj enfonce.
Toutes les cellules se trouvant lintrieur de la zone rectangulaire ou linaire ainsi
dlimite par les deux cellules sont slectionnes.
234
Slection de cellules non adjacentes

Appuyez sur Ctrl (Windows) ou Commande (Macintosh), puis cliquez sur les cellules, les
lignes ou les colonnes que vous voulez slectionner.
Si chaque cellule, ligne ou colonne sur laquelle vous cliquez aprs avoir appuy sur Ctrl
ou sur Commande n'est pas dj slectionne, elle est ajoute la slection. Si elle est
dj slectionne, elle est retire de la slection.
Modification de la couleur de surbrillance pour les lments dun tableau

1. Cliquez sur Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Mac).
2. Slectionnez la catgorie Surbrillance dans la liste gauche, effectuez l'une des
modifications suivantes, puis cliquez sur OK.
Pour modifier la couleur de surbrillance des lments du tableau, cliquez dans la
case de couleur Survol et slectionnez une couleur de surbrillance l'aide du
slecteur de couleur (ou tapez la valeur hexadcimale correspondant la couleur de
surbrillance dans la zone de texte).
Pour activer ou dsactiver la mise en surbrillance des lments du tableau, activez
ou dsactivez la case Afficher pour loption Survol.
Remarque : ces options sappliquent tous les objets, y compris les lments
positionnement absolu (AP), que Dreamweaver met en surbrillance lorsque vous passez
le pointeur dessus.
Haut de la page
Dfinition des proprits dun tableau

Vous pouvez utiliser linspecteur Proprits pour modifier les tableaux.
1. Slectionnez un tableau.
2. Dans l'inspecteur Proprits (Fentre > Proprits), apportez les modifications requises
aux proprits.
ID de tableau Identificateur du tableau.
Lignes et colonnes Nombre de lignes et de colonnes du tableau.
L Largeur du tableau, en pixels ou en pourcentage de la largeur de la fentre du

navigateur.
Remarque : il est rarement utile de dfinir la hauteur dun tableau.
Remplissage Espace (en pixels) entre le contenu dune cellule et son contour.
Espacement cellules Dtermine le nombre de pixels sparant les cellules contigus

dun tableau.
Alignement Dtermine la position du tableau par rapport aux autres lments du mme
paragraphe (texte ou images).
Gauche aligne le tableau sur la gauche des autres lments (pour que le texte situ dans
le mme paragraphe apparaisse droite du tableau) ; Droite aligne le tableau sur la
droite des autres lments (le texte apparaissant gauche du tableau) ; et Centrer
centre le tableau (le texte apparaissant au-dessus et/ou en dessous du tableau). Par
235
dfaut indique que le navigateur doit utiliser son alignement par dfaut.
Lorsque l'alignement est dfini sur Par dfaut, le reste du contenu n'est pas affich
ct du tableau. Pour afficher un tableau ct du contenu, utilisez l'alignement
droite ou gauche.

Lorsque vous n'affectez pas explicitement de valeur pour la bordure, l'espacement
entre les cellules et la marge intrieure des cellules, la plupart des navigateurs
affichent la bordure et une marge intrieure des cellules dfinies sur 1, ainsi qu'un
espacement entre les cellules dfini sur 2. Pour tre sr que les navigateurs
afficheront le tableau sans marge intrieure ni espacement, dfinissez Bordure sur 0,
Marge intrieure des cellules et Espacement entre les cellules sur 0. Pour visualiser
les limites des cellules et du tableau lorsque la bordure est dfinie sur 0, cliquez sur
Affichage > Assistances visuelles > Bordures du tableau.
Classe Applique une classe CSS au tableau.

Remarque : il peut tre ncessaire de dvelopper linspecteur Proprits du tableau
pour afficher les options suivantes. Pour cela, cliquez sur la flche de dveloppement
dans le coin infrieur droit de linspecteur.
Effacer largeurs de colonne/Effacer hauteurs de ligne Suppriment toutes les valeurs

explicitement spcifies de hauteur de ligne ou de largeur de colonne du tableau.
Convertir les largeurs de tableau en pixels/Convertir les hauteurs de tableau en

pixels
Dfinissent la largeur ou la hauteur de chaque colonne du tableau en pixels, en fonction
de la largeur actuelle (permettent galement de dfinir la largeur du tableau complet en
pixels, en fonction de la largeur actuelle).
Convertir les largeurs de tableau en pourcentage/Convertir les hauteurs de

tableau en pourcentages
Dfinissent la largeur ou la hauteur de chaque colonne du tableau en pourcentage de la
largeur de la fentre de document, en fonction de la largeur actuelle (permettent
galement de dfinir la largeur du tableau complet en pourcentage de la largeur de la
fentre de document, en fonction de la largeur actuelle).
Si vous avez saisi une valeur dans une zone de texte, appuyez sur Tabulation ou Entre
(Windows), ou sur Retour (Mac), pour lappliquer.
Haut de la page
Dfinition des proprits de cellule, de ligne ou de colonne

Vous pouvez utiliser l'inspecteur Proprits pour modifier des cellules et des lignes dans un tableau.
1. Slectionnez une ligne ou une colonne.
2. Dans l'inspecteur Proprits (Fentre > Proprits), dfinissez 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 dfaut (en
gnral gauche pour les cellules normales et au centre pour les cellules d'en-tte).
Vertic 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
236
dfaut (en gnral le centre).
L et H La largeur et la hauteur des cellules slectionnes en pixels ou en pourcentage

de la largeur ou de la hauteur de tout le tableau. Pour spcifier un pourcentage, faites
suivre la valeur du signe de pourcentage (%). Pour laisser au navigateur le soin de
dterminer la largeur et la hauteur appropries, en fonction du contenu de la cellule et
des largeurs et hauteurs des autres colonnes et lignes, laissez le champ vide
(paramtrage par dfaut).
Par dfaut, un navigateur choisit une hauteur de ligne et une largeur de colonne
correspondant l'image la plus large ou 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 spcifier une hauteur en pourcentage de la hauteur totale du
tableau, mais il se peut que la ligne ne saffiche pas au pourcentage de hauteur spcifi
dans les navigateurs.
Ar-pl Couleur darrire-plan dune cellule, dune colonne ou dune ligne, choisie laide
du slecteur de couleurs.
Fusionner les cellules Combine les cellules, lignes ou colonnes slectionnes en une
seule cellule. Vous pouvez fusionner des cellules uniquement si elles forment un bloc
rectangulaire ou linaire.
Fractionner la cellule Divise une cellule en deux ou plusieurs cellules. Vous ne pouvez
fractionner qu'une cellule la fois : ce bouton est dsactiv si plusieurs cellules sont
slectionnes.
Pas de retour la ligne auto Evite tout renvoi automatique la ligne, en conservant
tout le texte d'une cellule donne sur une seule ligne. Si Pas de retour la ligne auto est
activ, les cellules s'largissent en fonction de la taille des donnes que vous tapez ou
collez. (Normalement, les cellules s'largissent horizontalement pour accueillir le mot le
plus long ou l'image la plus large, puis s'tirent verticalement autant que ncessaire pour
intgrer tout autre contenu).
En-tte Met en forme les cellules slectionnes comme des cellules d'en-tte de
tableau. Par dfaut, le contenu des cellules de titre de tableau est en caractres gras et
centr.
Vous pouvez spcifier la largeur et la hauteur en pixels ou en pourcentage. Il est
ensuite possible de convertir les pixels en pourcentages, et inversement.
Remarque : lorsque vous dfinissez les proprits dune colonne, Dreamweaver modifie
les attributs de la balise td correspondant chaque cellule de la colonne. En revanche,
lorsque vous dfinissez certaines proprits dune ligne, Dreamweaver modifie les
attributs de la balise tr, et non les attributs de chaque balise td de la ligne. Lorsque
vous appliquez la mme mise en forme toutes les cellules dune ligne, il est prfrable
dappliquer cette mise en forme la balise tr afin de conserver un code HTML net et
concis.
3. Appuyez sur Tab ou Entre (Windows) ou Retour (Macintosh) pour appliquer la valeur.
Haut de la page
Utilisation du mode Tableaux dvelopps pour une modification de

tableau plus simple
Le mode Tableaux dvelopps ajoute provisoirement de la marge l'intrieur des cellules et de l'espacement
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 lments dans les tableaux ou de placer le point d'insertion
237
de manire prcise.
Par exemple, vous pouvez dvelopper un tableau pour placer le point dinsertion gauche ou droite dune
image, sans slectionner limage ou la cellule du tableau par inadvertance.
A. Tableau en mode Standard B. Tableau en mode Tableaux dvelopps
Remarque : aprs avoir choisi ou plac le point d'insertion, vous devez revenir au mode Standard du mode
Cration pour effectuer vos modifications. En mode Tableaux dvelopps, certaines oprations, telles que le
redimensionnement, ne produisent pas les rsultats attendus.
Basculement en mode Tableaux dvelopps

1. Si vous travaillez en mode Code, slectionnez Affichage > Cration ou Affichage > Code
et cration (vous ne pouvez pas passer en mode Tableaux dvelopps lorsque vous
tes en mode Code).
Choisissez Affichage > Mode Tableau > Mode Tableaux dvelopps.
Dans la catgorie Mise en forme du panneau Insertion, cliquez sur Mode Tableaux
dvelopps.
Une barre intitule Mode Tableaux dvelopps saffiche en haut de la fentre de
document. Dreamweaver augmente la marge intrieure des cellules et lespacement
entre les cellules, ainsi que lpaisseur des bordures, pour tous les tableaux de la
page.
Sortie du mode Tableaux dvelopps

Cliquez sur [quitter] dans la barre intitule Mode Tableaux dvelopps en haut de la
fentre de document.
Cliquez sur Affichage > Mode Tableau > Mode Standard.
Dans la catgorie Mise en forme du panneau Insertion, cliquez sur Mode Standard.
Haut de la page
Mise en forme de tableaux et de cellules

Vous pouvez modifier l'aspect des tableaux en dfinissant des proprits pour l'ensemble ou une partie de
leurs cellules, ou en leur appliquant une mise en forme prdfinie. Avant de dfinir les proprits d'un tableau
ou de cellules, vous devez savoir que l'ordre de priorit pour le formatage est le suivant : cellules, lignes et
tableaux.
Pour mettre en forme le texte dune cellule de tableau, suivez la mme procdure que pour tout texte se
trouvant en dehors dun tableau.
Modification du format d'un tableau, d'une cellule, d'une ligne ou d'une

colonne.
1. Slectionnez un tableau, une cellule, une ligne ou une colonne.
238
2. Dans l'inspecteur Proprits (Fentre > Proprits), cliquez sur la flche

d'agrandissement situe dans le coin infrieur droit et modifiez les proprits en fonction
de vos besoins.
3. Modifiez les proprits de votre choix.
Pour plus d'informations sur les options, cliquez sur l'icne Aide de l'inspecteur
Proprits.
Remarque : lorsque vous dfinissez les proprits dune colonne, Dreamweaver modifie
les attributs de la balise td correspondant chaque cellule de la colonne. En revanche,
lorsque vous dfinissez certaines proprits dune ligne, Dreamweaver modifie les
attributs de la balise tr, et non les attributs de chaque balise td de la ligne. Lorsque
vous appliquez la mme mise en forme toutes les cellules dune ligne, il est prfrable
dappliquer cette mise en forme la balise tr afin de conserver un code HTML net et
concis.
Ajout ou modification des valeurs d'accessibilit d'un tableau en mode Code

Modifiez les attributs dans le code.
Pour reprer rapidement les balises dans le code, cliquez dans le tableau, puis
slectionnez la balise <table> dans le slecteur de balises situ au bas de la fentre
de document.
Ajout ou modification des valeurs d'accessibilit d'un tableau en mode

Cration
Pour modifier la lgende du tableau, mettez-la en surbrillance, puis tapez une nouvelle
lgende.
Pour modifier l'alignement de la lgende du tableau, placez le point d'insertion dans la
lgende, cliquez du bouton droit de la souris (Windows) ou en maintenant la touche
Ctrl enfonce (Macintosh), puis choisissez Modifier le code de la balise.
Pour modifier le rsum du tableau, slectionnez ce dernier, cliquez dessus avec le
bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce
(Macintosh), puis choisissez Modifier le code de la balise.
Haut de la page
Redimensionnement de tableaux, de colonnes et de lignes

Redimensionnement de 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 spcifies explicitement, le
redimensionnement du tableau modifie la taille visuelle des cellules dans la fentre de document mais ne
modifie pas la largeur et la hauteur spcifies des cellules.
Vous pouvez redimensionner un tableau en faisant glisser lune de ses poignes de slection. Lorsquun
tableau est slectionn (ou lorsque le point dinsertion se trouve dans celui-ci), Dreamweaver affiche la
largeur du tableau, ainsi que le menu des en-ttes, en haut ou en bas de celui-ci.
Les largeurs de colonne dfinies dans le code HTML ne correspondent pas ncessairement aux largeurs
apparentes l'cran. Dans ce cas, vous pouvez uniformiser les largeurs. Afin de faciliter la mise en forme
des tableaux, Dreamweaver affiche leur largeur et celles de leurs colonnes, ainsi que les menus den-ttes.
Vous pouvez activer ou dsactiver laffichage de ces informations votre convenance.
239
Redimensionnement de colonnes et de lignes
Vous pouvez modifier la largeur d'une colonne ou la hauteur d'une ligne dans l'inspecteur Proprits ou en
faisant glisser les bordures de la colonne ou de la ligne. Si vous avez des problmes 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, en mode Code.
Lorsquun tableau est slectionn (ou lorsque le point dinsertion se trouve dans celui-ci), Dreamweaver
affiche les largeurs des colonnes, ainsi que le menu de leurs en-ttes, en haut ou en bas de ces colonnes.
Vous pouvez activer ou dsactiver les menus den-ttes de colonne votre convenance.
Redimensionnement dun tableau

Slectionnez le tableau. Si vous tes en mode En direct, la vue Affichage dlment
apparat ds que vous slectionnez le tableau. Cliquez sur licne en forme de sandwich
pour accder au mode de mise en forme du tableau.
Pour redimensionner le tableau horizontalement, faites glisser la poigne de slection
se trouvant droite.
Pour redimensionner le tableau verticalement, faites glisser la poigne de slection se
trouvant en bas.
Pour redimensionner le tableau verticalement et horizontalement, faites glisser la
poigne de slection se trouvant dans le coin infrieur droit.
Pour quitter le mode de mise en forme du tableau en mode En direct, appuyez sur la
touche Echap ou cliquez en dehors du tableau. Vous pouvez utiliser les options du menu
Modifier > Tableau pour apporter dautres modifications au tableau.
Remarque : les options figurant sous le menu Modifier > Tableau sont diffrentes selon
que vous avez slectionn tout le tableau ou une seule cellule. En mode En direct, la vue
Affichage dlment indique table lorsque tout le tableau est slectionn et td
lorsquune seule cellule est slectionne. Pour passer du mode de mise en forme des
cellules au mode de mise en forme du tableau, cliquez sur la bordure du tableau.
Modification de la largeur dune colonne tout en conservant la mme largeur

de tableau
En mode Cration, faites glisser la bordure droite de la colonne modifier.
La largeur de la colonne contigu est galement modifie, si bien que vous
redimensionnez deux colonnes. L'affichage visuel vous montre la manire dont les
colonnes seront ajustes, la largeur totale du tableau ne variant pas.
Remarque : dans les tableaux comportant des largeurs en pourcentage (et non en
pixels), si vous faites glisser la bordure extrieure se trouvant droite du tableau, la
largeur globale du tableau est modifie, et toutes les colonnes sadaptent
proportionnellement.
Modification de la largeur dune colonne en conservant les dimensions des

autres colonnes
240
En mode Cration, maintenez la touche Maj enfonce, puis faites glisser la bordure de la
colonne.
Seule la largeur de cette colonne change. L'affichage visuel vous montre la manire dont
les colonnes seront ajustes, la largeur totale du tableau variant en fonction de la colonne
redimensionne.
Modification de la hauteur d'une ligne visuellement

Faites glisser la bordure infrieure 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-ttes du tableau, puis choisissez Uniformiser toutes les
largeurs.
Dreamweaver redfinit la largeur spcifie dans le code afin de ladapter la largeur

visible.
Effacement de toutes les largeurs et hauteurs dfinies dans un tableau

1. Slectionnez le tableau.
Choisissez Modifier > Tableau > Effacer les largeurs de colonnes ou Modifier >
Tableau > Effacer les hauteurs de cellules.
Dans linspecteur Proprits (Fentre > Proprits), cliquez sur le bouton Effacer les
ou Effacer les largeurs de colonne .
hauteurs de ligne
Cliquez sur le menu des en-ttes de colonne, puis slectionnez Effacer toutes les
hauteurs ou Effacer toutes les largeurs.
Effacement dune largeur de colonne dfinie

241
Cliquez sur le menu des en-ttes de colonne, puis choisissez Effacer les largeurs de
colonne.
Activation ou dsactivation des menus et de la largeur d'un tableau et des

colonnes
1. Choisissez Affichage > Assistances visuelles > Largeurs de tableau.
2. Cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce
(Macintosh) dans le tableau, puis choisissez Tableau > Largeurs de tableau.
Haut de la page
Ajout et suppression de lignes et de colonnes

Pour ajouter ou supprimer des lignes et des colonnes, utilisez le menu Modifier > Tableau ou le menu des
en-ttes de colonne.
Le fait dappuyer sur la touche de tabulation lorsque le curseur se trouve dans la dernire cellule dun
tableau ajoute automatiquement une ligne.
Ajout d'une ligne ou d'une colonne individuelle

Cliquez dans une cellule, puis procdez de l'une des manires suivantes :
Choisissez Modifier > Tableau > Insrer une ligne ou Modifier > Tableau > Insrer
une colonne.
Une ligne apparat au-dessus du point dinsertion, ou une colonne apparat gauche
du point dinsertion.
Cliquez sur le menu des en-ttes de colonne, puis choisissez Insrer une colonne
gauche ou Insrer une colonne droite.
Ajout de plusieurs lignes ou colonnes

1. Cliquez dans une cellule.
2. Choisissez Modifier > Tableau > Insrer des lignes ou des colonnes et cliquez sur OK.
Insrer Permet dindiquer si des lignes ou des colonnes doivent tre insres.
Nombre de lignes ou Nombre de colonnes Nombre de lignes ou de colonnes

insrer.
O Indique si les nouvelles lignes ou colonnes doivent apparatre avant ou aprs la

ligne ou la colonne de la cellule slectionne.
242
Suppression d'une ligne ou d'une colonne

Cliquez sur une cellule de la ligne ou de la colonne que vous voulez supprimer, puis
choisissez Modifier > Tableau > Supprimer la ligne ou Modifier > Tableau >
Supprimer la colonne.
Slectionnez une ligne ou une colonne entire, puis cliquez sur Edition > Effacer ou
appuyez sur Suppr.
Ajout ou suppression de lignes ou de colonnes l'aide de l'inspecteur

Proprits
1. Slectionnez le tableau.
2. Dans l'inspecteur Proprits (Fentre > Proprits), procdez de l'une des manires
suivantes :
Pour ajouter ou supprimer des lignes, augmentez ou rduisez la valeur indiquant le
nombre de lignes.
Pour ajouter ou supprimer des colonnes, augmentez ou rduisez la valeur
correspondant au nombre de colonnes.
Remarque : Dreamweaver naffiche pas davertissement si vous vous apprtez
supprimer des lignes et des colonnes contenant des donnes.
Haut de la page
Fractionnement et fusion de cellules

Utilisez linspecteur Proprits ou les commandes du sous-menu Modifier > Tableau pour fractionner ou
fusionner des cellules.
Fusion de plusieurs cellules dun tableau

1. Slectionnez les cellules dans une ligne contigu et sous forme rectangulaire.
Dans l'illustration ci-dessous, la slection est un rectangle de cellules ; les cellules
peuvent donc tre fusionnes.
Dans lillustration ci-dessous, la slection nest pas un rectangle ; les cellules ne peuvent
donc pas tre fusionnes.
243

Choisissez Modifier > Tableau > Fusionner les cellules.
Dans linspecteur Proprits HTML (Fentre > Proprits) en mode dvelopp,
cliquez sur le bouton Fusionner les cellules .
Remarque : si ce bouton nest pas visible, cliquez sur la flche de dveloppement dans
le coin infrieur droit de linspecteur Proprits pour afficher toutes les options.
Le contenu des cellules individuelles est plac dans la cellule produite par la fusion. Les
proprits de la premire cellule slectionne sont appliques la cellule fusionne.
Fractionnement d'une cellule

1. Cliquez dans une cellule, puis procdez de l'une des manires suivantes :
Choisissez Modifier > Tableau > Fractionner la cellule.
Dans linspecteur Proprits HTML (Fentre > Proprits) en mode dvelopp,
cliquez sur le bouton Fractionner la cellule .
Remarque : si ce bouton nest pas visible, cliquez sur la flche de dveloppement dans
le coin infrieur droit de linspecteur Proprits pour afficher toutes les options.
2. Dans la bote de dialogue Fractionner la cellule, indiquez de quelle manire vous
souhaiter scinder la cellule :
Fractionner la cellule Indique si la cellule doit tre fractionne en plusieurs lignes ou

en plusieurs colonnes.
Nombre de lignes/Nombre de colonnes Indique en combien de colonnes ou de lignes

la cellule doit tre fractionne.
Augmentation ou rduction du nombre de lignes ou de colonnes occupes

par une cellule
Slectionnez Modifier > Tableau > Augmenter ltendue de ligne ou Modifier >
Tableau > Augmenter ltendue de colonne.
Slectionnez Modifier > Tableau > Rduire ltendue de ligne ou Modifier > Tableau >
Rduire ltendue de colonne.
Haut de la page
Copie, collage et suppression de cellules

Vous pouvez copier, coller ou supprimer une ou plusieurs cellules tout en prservant leur mise en forme.
Vous pouvez coller les cellules au niveau d'un point d'insertion ou la place d'une slection 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 slection du tableau dans laquelle les cellules seront colles.
Dcoupage ou copie des cellules dun tableau

1. Slectionnez une ou plusieurs cellules dans une ligne contigu et sous forme
rectangulaire.
Dans l'illustration ci-dessous, la slection est un rectangle de cellules ; les cellules
244
peuvent donc tre coupes ou copies.
Dans lillustration ci-dessous, la slection nest pas un rectangle ; les cellules ne peuvent
donc pas tre coupes ou copies.
2. Choisissez Edition > Couper ou Edition > Copier.

Remarque : si vous avez slectionn une ligne ou une colonne entire et que vous
choisissez Edition > Couper, la ligne ou la colonne entire est supprime du tableau (et
pas seulement le contenu des cellules).
Collage de cellules d'un tableau

1. Choisissez l'emplacement o coller les cellules :
Pour remplacer des cellules existantes par les cellules que vous collez, slectionnez
une srie de cellules existantes dont la mise en forme est la mme que celle des
cellules du Presse-papiers. (Par exemple, si vous avez copi ou coup un bloc de
3 x 2 cellules, vous pouvez slectionner un autre bloc de 3 x 2 cellules pour le
remplacer par les cellules colles.)
Pour coller une ligne entire de cellules au-dessus dune cellule spcifique, cliquez
lintrieur de cette dernire.
Pour coller une colonne entire de cellules gauche dune cellule spcifique, cliquez
lintrieur de cette dernire.
Remarque : si vous avez plac moins dune ligne ou dune colonne entire dans le
Presse-papiers, que vous cliquez dans une cellule puis collez les cellules figurant dans le
Presse-papiers, il se peut que la cellule dans laquelle vous avez cliqu et les cellules
voisines (selon leur emplacement dans le tableau) soient remplaces par les cellules
colles.
Pour crer un nouveau tableau partir des cellules colles, placez le point dinsertion
en dehors du tableau.
2. Choisissez Edition > Coller.
Si vous collez des lignes ou des colonnes entires dans un tableau existant, celles-ci
s'ajoutent au tableau. Si vous ne collez qu'une seule cellule, le contenu de la cellule
slectionne est remplac. Si vous collez le contenu du Presse-papiers en dehors d'un
tableau, les lignes, colonnes ou cellules que vous collez sont utilises pour dfinir un
nouveau tableau.
Suppression du contenu d'une cellule en conservant les cellules intactes

1. Slectionnez une ou plusieurs cellules.
Remarque : veillez ce que la slection ne comprenne pas de lignes ou de colonnes
245
entires.
2. Choisissez Edition > Effacer ou appuyez sur la touche Suppr.
Remarque : si seules des lignes ou des colonnes entires sont slectionnes lorsque
vous choisissez Edition > Effacer ou que vous appuyez sur Suppr, les lignes ou les
colonnes entires (pas seulement leurs contenus) sont supprimes du tableau.
Suppression de lignes ou de colonnes contenant des cellules fusionnes

1. Slectionnez une ligne ou une colonne.
2. Choisissez Modifier > Tableau > Supprimer la ligne ou Modifier > Tableau > Supprimer la
colonne.
Haut de la page
Imbrication de tableaux
Un tableau imbriqu est un tableau l'intrieur d'une cellule d'un autre tableau. Vous pouvez le mettre en
forme comme n'importe quel tableau, mais sa largeur est limite par la largeur de la cellule dans laquelle il se
trouve.
1. Cliquez dans une cellule du tableau.
2. Slectionnez Insrer > Tableau, dfinissez les options Tableau et cliquez sur OK.
Haut de la page
Tri de tableaux
Vous pouvez trier les lignes d'un tableau selon le contenu d'une seule colonne. Vous pouvez galement
effectuer un tri plus complexe, selon le contenu de deux colonnes.
Vous ne pouvez pas appliquer de tri aux tableaux contenant des attributs colspan ou rowspan, cest--dire
les tableaux qui contiennent des cellules fusionnes.
1. Slectionnez le tableau ou cliquez dans une cellule.
2. Slectionnez Commandes > Trier le tableau, dfinissez les options souhaites dans la
bote de dialogue, puis cliquez sur OK.
Trier par Dtermine la colonne dont les valeurs seront utilises pour trier les lignes du
tableau.
Ordre Dtermine comment la colonne doit tre trie (ordre alphabtique ou numrique)
et si elle doit tre trie par ordre croissant (de A Z, du chiffre le plus bas au plus lev)
ou par ordre dcroissant.
Lorsque le contenu d'une colonne est constitu de chiffres, choisissez Numrique. Un tri
par ordre alphabtique appliqu une liste de nombres un ou deux chiffres a pour
effet de trier les nombres comme s'il s'agissait de mots (ayant pour rsultat un ordre du
type 1, 10, 2, 20, 3, 30) plutt que comme des nombres (ayant pour rsultat un ordre du
type 1, 2, 3, 10, 20, 30).
Puis par/Ordre Dtermine l'ordre de tri du tri secondaire sur une colonne diffrente.
Indiquez la colonne de tri secondaire dans le menu contextuel Puis et l'ordre de tri
secondaire dans les menus contextuels Ordre.
Inclure la premire ligne dans le tri Indique que la premire ligne du tableau doit tre
246
incluse dans le tri. Si la premire ligne correspond un titre ne pas dplacer, n'activez
pas cette option.
Trier les lignes den-tte Indique que toutes les lignes de la section thead du tableau
(si elle existe) doivent tre tries en utilisant les mmes critres que pour les lignes de la
section body. (Les lignes thead restent dans la section thead et apparaissent encore
en haut du tableau, mme aprs le tri). Pour plus d'informations sur la balise thead,
consultez le panneau Rfrence (choisissez Aide > Rfrence).
Trier les lignes de pied de page Indique que toutes les lignes de la section thead du
tableau (si elle existe) doivent tre tries en utilisant les mmes critres que pour les
lignes de la section body. (Les lignes tfoot restent dans la section tfoot et
apparaissent encore en bas du tableau, mme aprs le tri). Pour plus d'informations sur
la balise tfoot, consultez le panneau Rfrence (choisissez Aide > Rfrence).
Conserver les couleurs des lignes aprs le tri Spcifie que les attributs des lignes du
tableau (tels que la couleur) doivent rester associs au mme contenu aprs le tri. Si les
lignes de votre tableau sont mises en forme avec deux couleurs alternes, n'activez pas
cette option pour vous assurer que les lignes du tableau tri s'affichent toujours avec des
couleurs alternes. Si les attributs de ligne sont spcifiques au contenu de chaque ligne,
slectionnez cette option pour vous assurer que ces attributs restent associs aux lignes
appropries dans le tableau tri.
247

Les widgets Spry ont t remplacs par des widgets jQuery dans Dreamweaver CC et les versions ultrieures. Bien quil soit toujours possible de
modifier des widgets Spry sur votre page, vous ne pouvez pas ajouter de nouveaux widgets Spry.
Les widgets sont petites applications Web crites dans des langages comme DHTML et
JavaScript et qui peuvent tre insrs et excuts dans une page Web. Les widgets Web
fournissent notamment un moyen dimiter une exprience dordinateur de bureau sur une
page Web.
Les widgets dinterface utilisateur jQuery (par exemple accordon, onglets, slecteur de date,
glissire et saisie automatique) offrent une exprience dordinateur de bureau sur le Web.
Par exemple, le widget onglets peut tre utilis pour rpliquer la fonctionnalit donglet des
botes de dialogue dapplications de bureau.
Didacticiel
Cration de contenus HTML, CSS, jQuery
et PHP 5.4 (15 min)
Dcouvrez comment la dernire prise en
charge de HTML5, CSS3, jQuery et PHP5.4
dans Dreamweaver peut vous aider crer
des projets statiques, dynamiques, mobiles ou
ractifs.
Haut de la page
Insertion dun widget jQuery

Lorsque vous insrez un widget jQuery, les lments suivants sont automatiquement ajouts au code :
Rfrences tous les fichiers dpendants.
Balise de script contenant lAPI jQuery pour le widget. Les widgets supplmentaires sont ajouts la mme balise de script.
Pour plus dinformations sur les widgets jQuery, voir http://jqueryui.com/demos/
Remarque : pour les effets jQuery, aucune rfrence externe jquery-1.8.24.min.js nest ajoute, car ce fichier est automatiquement inclus
lorsque vous ajoutez un effet.
1. Assurez-vous que le curseur se trouve lendroit sur la page o vous voulez insrer le widget.
2. Choisissez Insrer > Interface utilisateur jQuery, puis choisissez le widget que vous souhaitez insrer.
Si vous utilisez le panneau Insertion, les widgets sont prsents dans la section Interface utilisateur jQuery du panneau
Insertion.
Lorsque vous slectionnez un widget jQuery, ses proprits saffichent dans le panneau Proprits.
Vous pouvez prvisualiser les widgets jQuery dans le mode Affichage en direct ou dans un navigateur qui prend en charge les widgets jQuery.
Haut de la page
Modification de widgets jQuery

1. Slectionnez le widget modifier.
2. Dans le panneau Proprits, modifiez les proprits.
Par exemple, pour ajouter un onglet supplmentaire au widget Onglets, slectionnez le widget et cliquez sur + dans le
panneau Proprits.
Didacticiel vido
Utilisation des widgets jQuery dans des pages Web avec Dreamweaver
248

Les effets Spry ont t remplacs par des effets jQuery dans Dreamweaver CC. Bien quil soit toujours possible de modifier des effets Spry sur
votre page, vous ne pouvez pas ajouter de nouveaux effets Spry.
Ajout deffets jQuery

Effets jQuery bass sur un vnement
Suppression deffets jQuery
Haut de la page

1. Dans le mode Cration ou Code de votre document Dreamweaver, slectionnez llment auquel vous souhaitez appliquer un
effet jQuery.
2. Choisissez Fentre > Comportements afin douvrir le panneau Comportements.
3. Cliquez sur
, cliquez sur Effets, puis cliquez sur leffet dsir.
Le panneau de personnalisation saffiche et prsente les paramtres de leffet slectionn.

4. Spcifiez les paramtres, tels que llment cible auquel leffet doit sappliquer, ainsi que la dure de leffet.
Llment cible peut tre le mme que llment slectionn initialement ou un autre lment de la page. Par exemple, si vous
souhaitez que les utilisateurs puissent cliquer sur un lment A pour afficher ou masquer un lment B, llment cible est B.
5. Pour ajouter plusieurs effets jQuery, rptez les tapes ci-dessus.
Lorsque vous slectionnez plusieurs effets, Dreamweaver les applique dans lordre o ils sont affichs dans le panneau
Comportements. Pour modifier lordre des effets, utilisez les touches flches dans la partie suprieure du panneau.
Dreamweaver insre automatiquement le code appropri dans votre document. Par exemple, si vous avez slectionn leffet Fondu, le code
suivant est insr :
Rfrences de fichiers externes pour les fichiers dpendants ncessaires au bon fonctionnement des effets jQuery :
<script src="jQueryAssets/jquery-1.7.2.min.js" type="text/javascript"></script><script src="jQueryAssets/jquery-uieffects.custom.min.js" type="text/javascript"></script>
Le code suivant sapplique llment dans la balise body :

<li id="earthFrm" onclick="MM_DW_effectAppearFade($('#earthForms'),'show','fade',1000)"> Earth Forms</li>
Une tiquette de script avec le code suivant est ajoute :

<script type="text/javascript"> function MM_DW_effectAppearFade(obj,method,effect,speed) { obj[method](effect, {},
speed); }</script>
Haut de la page

Lorsque vous appliquez un effet jQuery, il est attribu par dfaut lvnement onClick. Vous pouvez modifier lvnement dclencheur de leffet
laide du panneau Comportements.
249
1. Slectionnez llment de page requis.

2. Dans le panneau Fentre > Comportements, cliquez sur licne Afficher les vnements dfinis.
3. Cliquez sur la ligne correspondant leffet qui est actuellement appliqu. Notez que la premire colonne devient une liste
droulante qui contient la liste des vnements que vous pouvez choisir.
4. Cliquez sur lvnement dsir.
Haut de la page

Le panneau Comportements rpertorie tous les effets qui sont actuellement appliqus llment de page slectionn.
2. Slectionnez leffet de travail supprimer puis cliquez sur
250
Couleurs
Couleurs Web scurises
Utilisation du slecteur de couleur
Haut de la page
En HTML, les couleurs sont exprimes par leur valeur hexadcimale (par exemple, #FF0000) ou, pour les principales, par leur nom en anglais
(red). Une couleur scurise pour le Web est une couleur qui, en mode 256 couleurs, reste toujours la mme dans Safari et Microsoft Internet
Explorer, sous Windows comme sous Macintosh. Par convention, il y a 216 couleurs communes, et toute valeur hexadcimale combinant les
paires 00, 33, 66, 99, CC ou FF (correspondant respectivement aux niveaux RVB 0, 51, 102, 153, 204 et 255) reprsente une couleur scurise
pour le Web.
Des tests approfondis ont cependant rvl qu'en ralit seules 212 couleurs sont scurises 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 de la palette adapte tous les navigateurs est
donc bien moindre si vous dveloppez votre site pour les utilisateurs de systmes informatiques modernes.
La palette de couleurs scurise pour le Web peut s'avrer utile si vous crez des sites pour des appareils diffrents, comme les organisateurs
personnels et les tlphones mobiles. Un grand nombre de ces appareils sont quips d'un cran noir et blanc (1 bpc) ou 256 couleurs (8 bpc).
Les palettes Cubes de couleur (valeur par dfaut) et Ton continu de Dreamweaver utilisent la palette scurise pour le Web de 216 couleurs ;
lorsque vous slectionnez une couleur dans ces palettes, c'est la valeur hexadcimale correspondante qui s'affiche.
Pour choisir une couleur en dehors de la gamme scurise pour le Web, ouvrez le nuancier du systme en cliquant sur le bouton Roue
chromatique en haut droite du slecteur de couleurs de Dreamweaver. Celle-ci n'est pas limite aux couleurs scurises pour le Web.
Les versions UNIX des navigateurs utilisent une palette de couleurs diffrente de celle des versions Windows et Macintosh. Si vous dveloppez
exclusivement pour des plates-formes UNIX (ou si le public vis est compos d'utilisateurs de Windows ou de Macintosh quips de moniteurs
24 bpc et d'utilisateurs d'UNIX quips de moniteurs 8 bpc), vous pouvez utiliser des valeurs hexadcimales combinant les paires 00, 40, 80, BF
ou FF, qui produisent des couleurs scurises pour le Web sur les ordinateurs excutant SunOS.
Haut de la page
Dans Dreamweaver, les inspecteurs de proprits de la plupart des lments de page, ainsi que de nombreuses botes de dialogue, comportent
une icne permettant d'ouvrir un slecteur de couleur. Choisissez la couleur d'un lment de page dans le slecteur. Vous pouvez galement
dfinir la couleur par dfaut du texte des lments de votre page.
1. Cliquez sur l'icne des couleurs dans n'importe quelle bote de dialogue ou dans l'inspecteur Proprits.
Le slecteur de couleur s'affiche l'cran.
Utilisez la pipette pour slectionner une nuance de couleur dans la palette. Toutes les couleurs des palettes Cubes de
couleur (valeur par dfaut) et Ton continu sont scurises pour le Web ; les autres palettes ne le sont pas.
Utilisez la pipette pour slectionner une couleur partir d'un point visible l'cran, mme l'extrieur de la fentre de
Dreamweaver. Pour slectionner une couleur sur le bureau ou dans une autre application, appuyez sur le bouton de la
souris et maintenez-le enfonc. La pipette peut ainsi rester active et slectionner une couleur en dehors de Dreamweaver.
Si vous cliquez sur le bureau ou sur une autre application, Dreamweaver slectionne la couleur de l'emplacement o vous
avez cliqu. Cependant, si vous passez une autre application, il peut s'avrer ncessaire de cliquer sur une fentre de
Dreamweaver pour continuer travailler dans Dreamweaver.
Pour largir plus amplement la slection, utilisez le menu droulant en haut droite du nuancier. Vous pouvez
slectionner Cubes de couleur, Ton continu, Systme d'exploitation Windows, Mac OS et Niveaux de gris.
Remarque : Les palettes Cubes de couleur et Ton continu sont scurises pour le Web, contrairement aux palettes
Systme 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 dfaut
Pour ouvrir le nuancier du systme, cliquez sur le bouton Roue chromatique
251
252
CSS
253
Description des feuilles de style en cascade

A propos des feuilles de style en cascade
A propos des rgles CSS
A propos des styles en cascade
A propos du formatage de texte et de CSS
A propos des proprits de la forme courte des styles CSS
Haut de la page
A propos des feuilles de style en cascade

Les feuilles de style en cascade (CSS) regroupent des rgles de formatage qui dterminent laspect du contenu dune page Web. Quand vous
utilisez des styles CSS pour mettre une page en forme, vous sparez le contenu de la prsentation. Le contenu de votre page (le code HTML)
rside dans le fichier HTML, tandis que les rgles CSS qui dfinissent la prsentation du code rsident dans un autre fichier (une feuille de style
externe) ou dans une autre partie du document HTML (gnralement dans la section head). La sparation du contenu et de la prsentation facilite
considrablement la gestion de laspect de votre site partir dun point central car vous navez pas besoin de mettre jour les proprits de
toutes les pages chaque fois que vous souhaitez apporter une modification. La sparation du contenu et de la prsentation se traduit galement
par un code HTML simplifi et mieux structur qui permet de raccourcir les temps de chargement pour les navigateurs, et elle simplifie la
navigation pour les personnes ayant des problmes daccessibilit (par exemple, qui utilisent des lecteurs dcran).
CSS vous offre une plus grande souplesse et une plus grande matrise de laspect de votre page. Les feuilles de style CSS vous permettent de
contrler de nombreuses proprits de texte, notamment les polices de caractres et les tailles de police, les styles gras, italique, soulignement et
les ombres du texte, la couleur du texte et la couleur darrire-plan, la couleur des liens et le soulignement des liens, etc. En utilisant CSS pour
contrler vos polices de caractres, vous vous assurez dun traitement plus cohrent de la mise en page et de laspect de votre page dans
diffrents navigateurs.
Outre le formatage du texte, CSS permet de grer le format et le positionnement des blocs dlments dune page Web. Un lment de niveau
bloc est un contenu autonome, gnralement spar par une nouvelle ligne dans le code HTML, et format visuellement comme un bloc. Par
exemple, les balises h1, les balises p et les balises div produisent toutes des lments de niveau bloc sur une page Web. Vous pouvez dfinir
des marges et des bordures pour les lments de niveau bloc, les placer dans un emplacement spcifique, leur ajouter une couleur darrire-plan,
faire flotter du texte autour deux, etc. Cest essentiellement en manipulant des lments de niveau bloc que vous ralisez des mises en page
avec CSS.
Haut de la page
A propos des rgles CSS

Une rgle de formatage CSS se compose de deux entits : le slecteur et la dclaration (ou dans la plupart des cas, un bloc de dclarations). Le
slecteur est un terme (tel que p, h1, un nom de classe ou un identifiant) qui identifie llment mis en forme tandis que le bloc de dclaration
dfinit quels sont les proprits de style. Dans lexemple suivant, h1 correspond au slecteur tandis que tout ce qui est plac entre les crochets
({}) correspond la dclaration :
1
2
3
4
5
h1 {
font-size: 16 pixels;
font-family: Helvetica;
font-weight:bold;
}
La dclaration est compose de deux entits : la proprit (par exemple, font-family) et la valeur (par exemple, Helvetica). Dans la rgle
CSS prcdente, un style particulier a t cr pour les balises h1 : le texte de toutes les balises H1 lies ce style sera associ une police
Helvetica, dune taille de 16 pixels et en gras.
Le style (qui est dfini par une rgle ou par un groupe de rgles) se trouve dans un emplacement distinct de celui du formatage du texte rel,
gnralement dans une feuille de style externe ou dans la section head du document HTML. Ainsi, une rgle concernant les balises h1 peut
sappliquer de nombreuses balises la fois (et dans le cas de feuilles de style externes, la rgle peut sappliquer de nombreuses balises la
fois dans un grand nombre de pages diffrentes). De cette faon, CSS offre une capacit de mise jour extrmement aise Lorsque vous mettez
254
jour une rgle CSS dans un emplacement, le formatage de tous les lments qui utilisent le style dfini est automatiquement mise jour en
fonction du nouveau style.
Vous pouvez dfinir les types de styles suivants dans Dreamweaver :
Les styles de classe vous permettent dappliquer des proprits de style tout lment de la page.
Les styles appliqus aux balises HTML redfinissent le formatage dune balise spcifique, telle que h1. Lorsque vous crez ou
modifiez un style CSS pour la balise h1, tout le texte format laide de cette balise h1 est immdiatement modifi en
consquence.
Les styles avancs redfinissent le formatage pour une combinaison particulire dlments ou pour dautres formes du
slecteur admises par CSS (par exemple, le slecteur td h2 sapplique chaque fois quun en-tte h2 apparat dans une
cellule de tableau). Les styles avancs peuvent galement redfinir le formatage pour des balises qui contiennent un attribut
id (identifiant) (par exemple, les styles dfinis par #myStyle sappliquent toutes les balises qui contiennent la paire
valeur-attribut id="myStyle").
Les rgles CSS peuvent se trouver aux emplacements suivants :
Feuilles de style CSS externes Ensembles de rgles CSS enregistres dans un fichier .css externe distinct (pas dans un fichier HTML). Ce
fichier est li une ou plusieurs pages dun site Web laide dun lien ou dune rgle @import qui se trouve dans la section head dun document.
Feuilles de style CSS internes (ou imbriques) Ensembles de rgles CSS incluses dans une balise style de la section head dun document
HTML.
Styles en ligne Dfinis dans des instances spcifiques de balises dans un document HTML. Lutilisation de styles en ligne nest pas
recommande.
Dreamweaver reconnat les styles dfinis dans des documents existants, pour peu quils soient conformes aux recommandations des feuilles de
style CSS. Dreamweaver restitue galement la plupart des styles appliqus directement en mode Cration. Toutefois, la prvisualisation dun
document dans une fentre de navigateur vous permet dobtenir le rendu direct le plus prcis de la page. Certains styles CSS saffichent
diffremment dans Microsoft Internet Explorer, Netscape Navigator, Opera, Apple Safari ou dautres navigateurs, et certains ne sont pas encore
pris en charge par aucun navigateur.
Pour afficher le guide de rfrence CSS dOReilly inclus dans Dreamweaver, choisissez Aide > Rfrence et slectionnez OReilly - Rfrence
CSS dans le menu droulant du panneau Rfrence.
Haut de la page
A propos des styles en cascade

Le terme en cascade fait rfrence la faon dont un navigateur affiche finalement les styles pour des lments spcifiques dune page Web.
Trois sources sont responsables des styles visibles sur une page Web : la feuille de style cre par lauteur de la page, les ventuelles slections
de style personnalises de lutilisateur, et les styles par dfaut du navigateur. Les sections prcdentes expliquent la cration de styles pour une
page Web par lauteur de la page Web et de la feuille de style qui y est associe. Toutefois, les navigateurs possdent eux aussi des feuilles de
style par dfaut, qui dterminent la restitution des pages Web. En outre, les utilisateurs peuvent personnaliser leurs navigateurs en effectuant des
slections qui dterminent laffichage des pages Web. Lapparence finale dune page Web est le rsultat de la combinaison (cascadre) des rgles
255
de ces trois sources, qui permet de restituer la page Web de manire optimale.
Ce concept va tre illustr par une balise courante, la balise de paragraphe (<p>). Par dfaut, les navigateurs comportent des feuilles de style qui
dfinissent la police et la taille de police du texte des paragraphes, cest--dire le texte plac entre balises <p> dans le code HTML. Ainsi, dans
Internet Explorer, tout le texte du corps, y compris celui des paragraphes, saffiche par dfaut dans la police Times New Roman de taille moyenne.
Toutefois, si vous tes lauteur dune page Web, vous pouvez crer une feuille de style qui remplace le style par dfaut du navigateur pour ce qui
est de la police et de la taille de police. Par exemple, vous pouvez crer la rgle suivante dans votre feuille de style :
1
2
3
4
p {
font-family: Arial;
font-size: small;
}
Lorsquun utilisateur charge la page, les paramtres de police du paragraphe et de taille de police que vous, auteur, avez dfinis, remplacent les
paramtres par dfaut du navigateur en la matire.
Les utilisateurs peuvent effectuer des slections pour personnaliser laffichage du navigateur selon leurs attentes. Par exemple, dans Internet
Explorer, lutilisateur peut choisir Affichage > Taille du texte > La plus grande, de manire agrandir la police et la rendre plus lisible. En fin de
compte (du moins, dans ce cas), la slection de lutilisateur remplace la fois les styles par dfaut du navigateur pour la taille de police par dfaut
dans les paragraphes, et les styles de pargraphe crs par lauteur de la page Web.
Lhritage est un autre lment important de la cascade. Les proprits de la plupart des lments dune page Web sont hrites. Par exemple,
les balises de paragraphe hritent de certaines proprits des balises body, les balises span de certaines proprits des balises de paragraphe, et
ainsi de suite. Ainsi, vous pouvez crer la rgle suivante dans votre feuille de style :
1
2
3
4
body {
font-family: Arial;
font-style: italic;
}
Tout le texte des paragraphes de votre page Web (ainsi que le texte qui hrite des proprits de la balise de paragraphe) sera en Arial italique,
car la balise de paragraphe hrite de ces proprits partir de la balise body. Vous pouvez toutefois vous montrer plus spcifique avec vos rgles
et crer des styles qui supplantent la formule dhritage standard. Par exemple, vous pouvez crer les rgles suivantes dans votre feuille de style :
1
2
3
4
5
6
7
8
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 hritires), qui saffiche en Courier normal (non
italique). Dun point de vue technique, la balise de paragraphe hrite tout dabord des proirits dfinies pour la balise body, puis elle ignore cellesci, car des proprits ont t dfinies spcifiquement pour elle. En dautres termes, bien que les lments de page hritent gnralement des
proprits suprieures, lapplication directe dune proprit une balise entrane toujours lcrasement de la formule dhritage standard.
La combinaison de tous les facteurs exposs ci-dessus et dautres facteurs, tels que la spcificit CSS (un systme qui attribue un poids diffrent
des types prcis de rgles CSS) et lordre des rgles CSS, finit par crer une cascade complexe, o les lments aux priorits les plus leves
crasent les lments aux proprits les plus basses. Pour plus dinformations sur les rgles en matire de cascade, dhritage et de spcificit,
visitez le site www.w3.org/TR/CSS2/cascade.html.
Haut de la page
A propos du formatage de texte et de CSS

Par dfaut, Dreamweaver utilise des feuilles de style en cascade (CSS) pour mettre le texte en forme. Les styles appliqus au texte laide de
linspecteur Proprits ou des commandes de menu gnrent des rgles CSS intgres la section head du document.
Vous pouvez galement utiliser le panneau Styles CSS pour crer et modifier des proprits et des rgles CSS. Ce panneau est un diteur bien
plus fiable que linspecteur Proprits et prsente toutes les rgles CSS dfinies dans le document actif, quelles soient intgres la section head
du document ou dans une feuille de style externe. Adobe recommande lutilisation du panneau Styles CSS (plutt que linspecteur Proprits)
comme outil principal de cration et modification de vos styles CSS. Ainsi, votre code sera plus clair et sa maintenance en sera simplifie.
Outre les styles et feuilles de style de votre composition, libre vous dutiliser les feuilles de style livres avec Dreamweaver pour appliquer des
256
styles vos documents

Pour accder un didacticiel relatif au formatage de texte laide de feuilles de style en cascade, voir le site Web dAdobe ladresse
Haut de la page
A propos des proprits de la forme courte des styles CSS

La spcification CSS permet la cration de styles laide dune syntaxe abrge appele forme courte des styles CSS. Elle permet de spcifier la
valeur de plusieurs proprits laide dune seule dclaration. Par exemple, la proprit font vous permet de dfinir les proprits font-style,
font-variant, font-weight, font-size, line-height et font-family sur une seule ligne.
Il est important de savoir que sous forme courte, les proprits dont la valeur est omise reoivent leur valeur par dfaut. Certaines pages risquent
donc de safficher incorrectement lorsque plusieurs rgles CSS sont attribues la mme balise.
Par exemple, la rgle h1 ci-dessous utilise la syntaxe longue. Remarquez que les proprits font-variant, font-stretch, font-sizeadjust et font-style ont reu leur valeur par dfaut.
1
2
3
4
5
6
7
8
9
10
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
}
Insre en tant que proprit unique sous forme courte, la mme rgle pourrait se prsenter ainsi :
1
h1 { font: bold 16pt/18pt Arial }
Sous forme courte, les proprits dont la valeur est omise reoivent automatiquement leur valeur par dfaut. Ainsi, lexemple de forme abrge cidessus omet les balises font-variant, font-style, font-stretch et font-size-adjust.
Si des styles sont dfinis en plusieurs emplacements (par exemple, incorpors dans une page HTML et imports dune feuille de style externe)
sous deux formes, longue et courte, noubliez pas que les proprits omises dans une rgle de notation abrge risquent dcraser les proprits
explicitement dfinies dans une autre rgle (on parle de styles en cascade).
Dreamweaver utilise donc la forme longue par dfaut, Ceci permet dviter quune rgle de notation abrge ne remplace une rgle de notation
longue. Si vous ouvrez une page Web code en forme courte dans Dreamweaver, noubliez pas que Dreamweaver cre toutes les nouvelles
rgles CSS sous forme longue. Pour spcifier la faon dont Dreamweaver cre et modifie les rgles CSS, vous pouvez modifier les prfrences
de modification CSS dans la catgorie Styles CSS de la bote de dialogue Prfrences (Edition > Prfrences dans Windows ; Dreamweaver >
Prfrences sur le Macintosh).
Remarque : le panneau Styles CSS cre uniquement des rgles sous forme longue. Lorsque vous crez une page ou une feuille de style CSS
laide du panneau Style CSS, noubliez pas que le codage manuel de rgles CSS sous forme courte risque de provoquer lcrasement des
proprits cres sous forme longue par celles cres sous forme courte. Il est donc prfrable de crer vos styles CSS sous forme longue.
Didacticiel de description des feuilles CSS
Didacticiel de formatage de texte avec CSS
257

Le panneau CSS Designer (Windows > CSS Designer) est un
inspecteur de proprits CSS qui vous permet de crer
visuellement des styles et des fichiers CSS, mais aussi de dfinir
des proprits et des requtes multimdias.
Visionner la vido
Utilisation de lditeur CSS dans
Dreamweaver (8 min)
Remarque : vous pouvez utiliser Ctrl/Cmd + Z pour annuler ou Ctrl/Cmd + Y pour rtablir toutes les
oprations que vous ralisez dans CSS Designer. Les modifications sont automatiquement appliques dans
la vue En direct et le fichier CSS appropri est galement actualis. Pour que vous sachiez que le fichier
associ a t modifi, longlet du fichier concern est mis en surbrillance pendant un moment (environ
8 secondes).

258
Raccourcis clavier
Identification des lments de page associs un slecteur CSS (13.1).
Voir aussi
Le panneau CSS Designer se compose des options et volets suivants :
Tout Affiche lensemble des styles CSS, requtes multimdias et slecteurs prsents dans le document actif.
Ce mode ne prend pas en compte les lments slectionns. Autrement dit, lorsque vous slectionnez un
lment sur la page, le slecteur, la requte multimdia et le style CSS associs ne sont pas sont mis en
surbrillance dans CSS Designer.
Utilisez cette option pour commencer crer vos slecteurs ou requtes multimdias.
Actuel Affiche tous les styles calculs pour chaque lment du document actif slectionn en mode En
direct ou Cration. Lorsque vous utilisez ce mode pour un fichier CSS en mode Code, toutes les proprits
du slecteur choisi sont affiches.
Utilisez cette option pour modifier les proprits des slecteurs associs aux lments slectionns dans le
document.
Tutoriel vido
Ajout de styles aux pages web avec le panneau CSS Designer
Remarque : lorsque vous slectionnez un lment de page, la valeur Calcul est slectionne dans le volet
Slecteurs. Cliquez sur un slecteur afin dafficher la source, la requte multimdia ou les proprits
associes.
Pour afficher tous les slecteurs, vous pouvez choisir Toutes les sources dans le volet Sources. Pour afficher
les slecteurs qui nappartiennent pas une requte multimdia dans la source slectionne, cliquez sur
Global dans le volet @Requtes multimdias.
259
Tutoriel vido
Utilisation du panneau CSS Designer
Haut de la page

1. Dans le volet Sources du panneau CSS Designer, cliquez sur
options suivantes :
, puis sur lune des
Crer un nouveau fichier CSS : Pour crer un nouveau fichier CSS et le joindre au
document
Joindre un fichier CSS existant : Pour joindre un fichier CSS existant au document
Dfinir dans la page : Pour dfinir un style CSS dans le document
Selon loption que vous slectionnez, la bote de dialogue Crer un nouveau fichier CSS
ou Joindre un fichier CSS existant saffiche.
2. Cliquez sur Parcourir pour spcifier le nom du fichier CSS et, si vous tes en train de
crer un style CSS, pour indiquer lemplacement auquel enregistrer le nouveau fichier.
Cliquez sur Lier pour lier le document Dreamweaver au fichier CSS
Cliquez sur Importer pour importer le fichier CSS dans le document.
4. (Facultatif) Cliquez sur Utilisation conditionnelle et spcifiez la requte multimdia que
vous souhaitez associer au fichier CSS.
Haut de la page

1. Dans le panneau CSS Designer, cliquez sur une source CSS dans le volet Sources.
2. Cliquez sur
multimdia.
dans le volet @Requtes multimdias pour ajouter une nouvelle requte
La bote de dialogue Dfinir une requte multimdia saffiche et rpertorie toutes les
conditions de requte multimdia prises en charge par Dreamweaver.
3. Slectionnez les conditions appropries. Pour plus dinformations sur les requtes
multimdias, voir cet article.
Veillez bien spcifier des valeurs valides pour toutes les conditions que vous
slectionnez, faute de quoi les requtes multimdias correspondantes ne pourront pas
tre cres.
Remarque : seule lopration Et est actuellement prise en charge en cas de
conditions multiples.
Si vous ajoutez des conditions de requte multimdia laide de code, seules les conditions prises en charge
sont renseignes dans la bote de dialogue Dfinition dune requte multimdia. Toutefois, la zone de texte
Code dans la bote de dialogue affiche entirement le code (y compris les conditions non prises en charge).
Si vous cliquez sur une requte multimdia dans le mode Cration/En direct, la fentre daffichage change en
fonction de la requte multimdia slectionne. Pour afficher la fentre daffichage en taille normale, cliquez
sur Global dans le volet @Requtes multimdias.
Haut de la page
260
1. Dans le panneau CSS Designer, slectionnez une source CSS dans le volet Sources ou
une requte multimdia dans le volet @Requtes multimdias.
2. Dans le volet Slecteurs, cliquez sur . En fonction de llment slectionn dans le
document, CSS Designer identifie de faon intelligente le slecteur pertinent et le
suggre (jusqu trois rgles).
Vous pouvez effectuer une ou plusieurs des oprations suivantes :
Vous pouvez utiliser la flche Haut ou Bas pour que le slecteur suggr soit plus ou
moins prcis.
Vous pouvez supprimer la rgle suggre et saisir le slecteur requis. Assurez-vous
de saisir le nom du slecteur, ainsi que la dsignation du type de slecteur. Par
exemple, si vous indiquez un ID, placez un # devant le nom du slecteur.
Pour rechercher un slecteur prcis, utilisez la zone de recherche situe dans la
partie suprieure du volet.
Pour renommer un slecteur, cliquez sur celui-ci, puis tapez le nom dsir.
Pour rorganiser les slecteurs, faites-les glisser lemplacement souhait.
Pour dplacer un slecteur dune source vers une autre, faites-le glisser vers la
source souhaite dans le volet Source.
Pour dupliquer un slecteur dans la source slectionne, faites un clic droit sur le
slecteur, puis cliquez sur Dupliquer.
Pour dupliquer un slecteur et lajouter dans une requte multimdia, faites un clic
droit sur le slecteur, placez le pointeur de la souris au-dessus de Dupliquer en
requte multimdia, puis choisissez la requte multimdia.
Remarque : loption Dupliquer en requte multimdia nest disponible que lorsque
la source du slecteur slectionn contient des requtes multimdias. Vous ne
pouvez pas dupliquer un slecteur provenant dune source dans une requte
multimdia dune autre source.

Vous pouvez dsormais copier des styles dun slecteur et les coller dans un autre. Vous pouvez copier tous
les styles ou copier uniquement une catgorie spcifique de styles, comme la catgorie Mise en forme, Texte
ou Bordure.
Cliquez avec le bouton droit de la souris sur un slecteur et choisissez parmi les options disponibles :
Copie de styles laide de CSS Designer
Si un slecteur na aucun style, les options Copier et Copier tous les styles sont
dsactives.
261
Loption Coller les styles est dsactive pour les sites distants qui ne peuvent pas tre
modifis. En revanche, les options Copier et Copier tous les styles sont disponibles.
Loption Coller les styles, qui existe dj partiellement sur un slecteur (chevauchement),
fonctionne. Lunion de tous les slecteurs est colle.
Loption Copier-coller les styles fonctionne pour les diffrents liens des fichiers CSS :
Importer, lier et intgrer des styles.
Haut de la page

Les proprits sont regroupes dans les catgories suivantes et sont reprsentes par diffrentes icnes en
haut du volet Proprits :
Mise en forme
Texte
Bordure
Arrire-plan
Autres (liste des proprits texte seul et non des proprits permettant des contrles
visuels)
Remarque : avant de modifier les proprits dun slecteur CSS, identifiez les lments associs au
slecteur CSS laide de linspection inverse. Ce faisant, vous pouvez dterminer si tous les lments mis en
surbrillance lors de linspection inverse ncessitent vraiment les modifications. Consultez le lien pour obtenir
plus dinformations sur linspection inverse.
Activez la case cocher Afficher dfinies pour afficher uniquement les proprits dfinies. Pour afficher
toutes les proprits que vous pouvez spcifier pour un slecteur, dsactivez la case cocher Afficher
dfinies.
Pour dfinir une proprit, comme width ou border-collapse, cliquez sur les options requises ct de
la proprit dans le volet Proprits. Pour plus dinformations sur la dfinition dun dgrad pour larrire-plan
ou de contrles de case comme les marges extrieures et intrieures et la position, consultez les liens cidessous :
Utilisation de mises en forme botes flexibles (flexbox)
Les proprits remplaces sont barres.

Les contrles de case du volet Proprits de CSS Designer vous permettent de dfinir rapidement les
proprits de marge, de remplissage et de position. Si vous prfrez crire le code, vous pouvez spcifier un
code court pour la marge et le remplissage dans les zones de modification rapide.
262
Proprit margin
Proprit padding
Proprit position
Cliquez sur les valeurs et tapez la valeur dsire. Si vous souhaitez que les quatre valeurs soient identiques
et quelles changent simultanment, cliquez sur licne de liaison ( ) au centre.
A tout moment, vous pouvez dsactiver ( ) ou supprimer ( ) des valeurs spcifiques, par exemple la valeur
de la marge gauche, tout en conservant les valeurs des marges droite, suprieure et infrieure.
Icnes de dsactivation, de suppression et de liaison pour les marges

Les proprits de contrle des bordures sont organises en onglets logiques, pour vous permettre de
visualiser ou de modifier rapidement ces proprits.
Si vous prfrez crire le code, vous pouvez spcifier un code court pour les bordures et les rayons de
bordure dans les zones de modification rapide de texte.
Pour dfinir des proprits de contrle des bordures, dfinissez dabord les proprits dans longlet Tous
les cts . Les autres onglets sont alors activs et les proprits dfinies dans longlet Tous les cts
sont rpercutes pour chaque bordure.
Lorsque vous modifiez une proprit dans les diffrents onglets de bordure, la valeur de la proprit
correspondante dans longlet Tous les cts prend la valeur par dfaut Non dfini .
263
Dans lexemple ci-dessous, la couleur de la bordure a t dfinie sur noir, puis remplace par rouge pour la
bordure suprieure.
Couleur de bordure dfinie sur noir pour tous les cts
Le code qui est insr varie selon que le paramtre de prfrence est dfini sur une forme courte ou une
forme longue.
Les commandes de suppression et de dsactivation sont disponibles pour les diffrentes proprits comme
dans les versions antrieures Dreamweaver CC 2014. Vous pouvez dsormais utiliser les commandes de
suppression et de dsactivation au niveau du groupe de contrle des bordures afin dappliquer ces actions
toutes les proprits.
264
Au cours de linspection, les onglets sont mis en avant en fonction de la priorit des onglets dfinis . La
priorit la plus haute est attribue longlet Tous les cts suivi de Haut , Droite , Bas et
Gauche . Ainsi, si seule la valeur Haut est dfinie pour une bordure, le mode de calcul met en avant
longlet Haut et ignore longlet Tous les cts car celui-ci nest pas dfini.

Le panneau CSS Designer vous permet de dsactiver ou supprimer chaque proprit. La capture dcran
suivante prsente les icnes de dsactivation ( ) et de suppression ( ) pour la proprit width (largeur).
Ces icnes sont visibles lorsque vous laissez le pointeur de la souris au-dessus dune proprit.
Dsactiver/supprimer la proprit
Raccourcis clavier
Vous pouvez ajouter ou supprimer des slecteurs CSS et des proprits laide de raccourcis clavier. Vous
pouvez galement naviguer entre les groupes de proprits dans le volet Proprits.
Raccourci
Workflow
Ajoute un slecteur (si le contrle est dans la section de

slecteur)
Ctrl + Alt + S
Ajoute un slecteur (si le contrle est nimporte o dans

lapplication)
Ajoute une proprit (si le contrle est dans la section de

proprit)
Ctrl + Alt + P
Ajoute une proprit (si le contrle est nimporte o dans

lapplication)
Slectionner + Suppr
Supprime un slecteur, si un slecteur est slectionn
Ctrl + Alt + (Page

prc/Page suiv)
Bascule entre les sections dans le panneau secondaire

des proprits
Haut de la page
Identification des lments de page associs un slecteur CSS

265
(13.1).
En rgle gnrale, un slecteur CSS unique est associ plusieurs lments de page. Par exemple, le texte
dans le contenu principal dune page, le texte den-tte et le texte de pied de page peuvent tous tre
associs au mme slecteur CSS. Lorsque vous modifiez les proprits du slecteur CSS, tous les lments
associs au slecteur sont concerns, y compris ceux que vous navez pas lintention de changer.
La mise en surbrillance en direct vous permet didentifier tous les lments associs un slecteur CSS.
Pour ne modifier quun lment ou certains lments, vous pouvez crer un nouveau slecteur CSS pour ces
lments, puis modifier ses proprits.
Pour identifier les lments de page associs un slecteur CSS, passez la souris sur le slecteur dans la
section En direct (avec le mode Code en direct dsactiv). Dreamweaver met en surbrillance les lments
associs au moyen de lignes pointilles.
Pour verrouiller la mise en surbrillance des lments, cliquez sur le slecteur. Les lments sont alors mis en
surbrillance par un contour bleu.
Pour supprimer la surbrillance bleue autour des lments, cliquez nouveau sur le slecteur.
Remarque : le tableau suivant rcapitule les cas dans lesquels loption Mise en surbrillance en direct nest
pas disponible.
Mode
Code en direct
Mise en surbrillance en direct affiche ?
Code
S/O
S/O
Cration
S/O
S/O
En direct
ACTIF
Non
266
(bouton enfonc)
INACTIF
Oui

La mise en surbrillance en direct est active par dfaut. Pour dsactiver la mise en surbrillance en direct,
cliquez sur les options En direct dans la barre doutils Document puis cliquez sur Dsactiver la mise en
surbrillance en direct.
267
Dfinition de prfrences de styles CSS

Les prfrences de styles CSS contrlent la faon dont Dreamweaver rdige le code qui dfinit les styles CSS. Les styles CSS peuvent tre
rdigs sous une forme abrge, que certains dveloppeurs estiment plus facile utiliser. Toutefois, certaines versions anciennes des navigateurs
n'interprtent pas correctement la forme abrge des attributs de styles.
1. Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh), puis slectionnez Styles CSS dans
la liste Catgorie.
2. Dfinissez les options de style CSS que vous voulez appliquer :
A la cration de rgles de CSS - Utilisez Forme courte pour : Vous permet de slectionner les proprits de style CSS
que Dreamweaver rdige en abrg.
A la modification de rgles de CSS - Utilisez Forme courte pour : Dtermine si Dreamweaver rcrit les styles existants
en abrg.
Choisissez l'option Si l'original utilise Forme courte pour que les styles ne soient pas modifis.
Choisissez En fonction des paramtres ci-dessus pour rcrire en forme abrge les styles des proprits slectionnes dans
la zone Utiliser Forme courte pour.
Sur double-clic dans le panneau CSS : Vous permet de slectionner un outil pour modifier les rgles CSS.
3. Cliquez sur OK.
268
Cration d'une rgle CSS

Dans Dreamweaver CC et les versions ultrieures, le panneau Styles CSS a t remplac par CSS Designer. Pour plus d'informations, voir CSS
Designer.
Vous pouvez crer une rgle CSS pour automatiser le formatage de balises HTML ou d'une plage de texte identifie par un attribut class ou ID.
1. Placez le point d'insertion dans le document, puis procdez de l'une des manires suivantes pour ouvrir la bote de dialogue
Nouvelle rgle CSS :
Choisissez Format > Styles CSS > Nouveau.
Dans le panneau Styles CSS (Fentre > Styles CSS), cliquez sur le bouton Nouvelle rgle CSS (+), situ dans la partie
infrieure droite du panneau.
Slectionnez le texte dans la fentre de document, choisissez Nouvelle rgle CSS dans le menu Rgle cible de
l'inspecteur Proprits CSS (Fentre > Proprits), puis cliquez sur le bouton Modifier la rgle ou choisissez une option
dans l'inspecteur Proprits CSS (par exemple, cliquez sur le bouton Gras) afin d'entamer la cration d'une nouvelle rgle.
2. Dans la bote de dialogue Nouvelle rgle CSS, spcifiez le type de slecteur pour la rgle CSS crer :
Pour crer un style personnalis pouvant tre appliqu comme un attribut class n'importe quel lment HTML,
choisissez Classe dans le menu Slecteur de types. Entrez ensuite le nom du style dans la zone de texte Nom du
slecteur.
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'insre votre place.
Pour dfinir le formatage d'une balise contenant un attribut id spcifique, choisissez ID dans le menu Type de slecteur,
puis entrez l'ID unique (par exemple containerDIV) dans la zone de texte Nom du slecteur.
Remarque : Les ID doivent commencer par un signe dise (#) et peuvent contenir n'importe quelle combinaison de lettres et
de chiffres (par exemple, #monID1). Si vous omettez le signe dise initial, Dreamweaver l'insre votre place.
Pour redfinir le formatage par dfaut d'une balise HTML spcifique, choisissez Balise dans le menu Type de slecteur,
puis entrez une balise HTML dans la zone de texte Nom du slecteur ou choisissez-en une dans le menu.
Pour dfinir une rgle compose influant simultanment sur plusieurs balises ou ID, choisissez l'option Compos puis
entrez les slecteurs pour votre rgle compose. Par exemple, si vous entrez div p, tous les lments p contenus dans
des balises div seront influencs par la rgle. Au fur et mesure que vous ajoutez ou supprimez des slecteurs, une zone
de description explique quels lments seront influencs par la rgle.
3. Choisissez l'endroit o vous voulez dfinir la rgle, puis cliquez sur OK :
Pour placer la rgle dans une feuille de style qui est dj associe au document, slectionnez la feuille de style.
Pour crer une feuille de style externe, choisissez Nouveau fichier feuille de style.
Pour incorporer le style dans le document actif, choisissez Seulement ce document.

269
4. Dans la bote de dialogue Dfinition des rgles de CSS, choisissez les options dfinir pour la nouvelle rgle CSS. Pour plus
d'informations, consultez la section suivante.
5. Lorsque vous avez dfini les proprits de style, cliquez sur OK.
Remarque : Le fait de cliquer sur OK sans dfinir d'options de style entrane la cration d'une nouvelle rgle vide.
270

Dans Dreamweaver CC et les versions ultrieures, le panneau Styles CSS a t remplac par CSS Designer. Pour plus dinformations, voir
CSS Designer.
Vous pouvez dfinir des proprits pour les rgles CSS, telles que les proprits de police de caractres, d'image et de couleur d'arrire-plan,
d'espacement et de mise en page ainsi que l'aspect des lments de la liste. Crez d'abord une nouvelle rgle, puis dfinissez les proprits
suivantes.
Dfinition des proprits de type CSS

Dfinition des proprits d'arrire-plan de style CSS
Dfinition des proprits de bloc de style CSS
Dfinition des proprits de bote de style CSS
Dfinition des proprits de bordure de style CSS
Dfinition des proprits de liste de style CSS
Dfinition des proprits de positionnement de style CSS
Dfinition des proprits d'extension de style CSS
Haut de la page
Dfinition des proprits de type CSS

La catgorie Type de la bote de dialogue Dfinition des rgles de CSS vous permet de dfinir les paramtres lmentaires de police et de type
pour un style CSS.
1. Ouvrez le panneau Styles CSS (Maj+F11), si ncessaire.
2. Double-cliquez sur une rgle ou une proprit existante dans le volet suprieur du panneau Styles CSS.
3. Dans la bote de dialogue Dfinition des rgles de CSS, choisissez Type, puis dfinissez les proprits de style.
Laissez les proprits suivantes vides si elles ne sont pas importantes pour ce style :
Font-family Permet de dfinir la famille de polices (ou la srie de familles) de ce style. Les navigateurs affichent le texte en
utilisant la premire police installe sur l'ordinateur de l'utilisateur au sein de la combinaison de polices choisie. Pour assurer
la compatibilit avec Internet Explorer, utilisez en premier une police Windows. Cet attribut est pris en charge par les deux
navigateurs.
Font-size Dfinit la taille du texte. Vous pouvez choisir une taille spcifique en cliquant sur une valeur et une unit de
mesure, ou une taille relative. Les pixels fonctionnent correctement pour empcher la dformation du texte par les
navigateurs. Cet attribut est pris en charge par les deux navigateurs.
Font-style permet de spcifier la variation Normal, Italique ou Oblique comme style de la police. La valeur par dfaut est
Normal. Cet attribut est pris en charge par les deux navigateurs.
Line-height Dfinit la hauteur de la ligne sur laquelle le texte est plac. Ce paramtre fait gnralement rfrence la notion
d'interligne. Choisissez Normal pour que la hauteur de ligne soit calcule automatiquement en fonction de la taille de la police
ou entrez une valeur fixe et slectionnez une unit de mesure. Cet attribut est pris en charge par les deux navigateurs.
Text-decoration Ajoute un effet de soulignement, de barre suprieure, de texte barr ou de clignotement du texte. La valeur
par dfaut pour le texte normal est Aucune. La valeur par dfaut pour le texte des liens est Soulign. Si vous dfinissez le
271
paramtre de lien sur aucun, vous pouvez supprimer le soulignement des liens en dfinissant une classe spciale. Cet attribut
est pris en charge par les deux navigateurs.
Font-weight Applique aux caractres un niveau d'paisseur spcifi en valeur relative ou absolue. Normal quivaut une
valeur de 400 ; Gras quivaut une valeur de 700. Cet attribut est pris en charge par les deux navigateurs.
Font-variant Dfinit la variante en petites capitales du texte. Dreamweaver n'affiche pas cet attribut dans la fentre de
document. Cet attribut est pris en charge par Internet Explorer, mais non par Netscape Navigator.
Text-transform Permet de mettre en capitale la premire lettre de chaque mot de la slection ou de passer l'ensemble du
texte en majuscules ou minuscules. Cet attribut est pris en charge par les deux navigateurs.
Couleur Dfinit la couleur du texte. Cet attribut est pris en charge par les deux navigateurs.
4. Une fois les options dfinies, slectionnez une autre catgorie CSS dans la partie gauche du panneau pour dfinir des
proprits de style supplmentaires, puis cliquez sur OK.
Haut de la page
Dfinition des proprits d'arrire-plan de style CSS

Utilisez la catgorie Arrire-plan de la bote de dialogue Dfinition des rgles CSS pour dfinir les paramtres d'arrire-plan d'un style CSS. Les
proprits d'arrire-plan s'appliquent tout lment d'une page Web. Rien ne vous empche d'assortir un lment de page d'une couleur ou d'une
image d'arrire-plan (derrire le texte, la page, un tableau, etc.). Il vous est galement possible de dfinir la position d'une image d'arrire-plan.
3. Dans la bote de dialogue Dfinition des rgles de CSS, choisissez Arrire-plan, puis dfinissez les proprits de style.
Couleur darrire-plan Dfinit la couleur d'arrire-plan de l'lment. Cet attribut est pris en charge par les deux navigateurs.
Image d'arrire-plan Dfinit l'image d'arrire-plan pour l'lment. Cet attribut est pris en charge par les deux navigateurs.
Rptition de l'arrire-plan Dtermine comment l'image d'arrire-plan doit tre rpte, le cas chant. Cet attribut est pris
en charge par les deux navigateurs.
Pas de rptition affiche limage une seule fois, dans le coin suprieur gauche de llment.
Rpter cre une mosaque horizontale et verticale de limage derrire llment.
Rpter-x et Rpter-y affichent respectivement un bandeau horizontal ou vertical. Les dernires images sont coupes
pour s'adapter aux dimensions exactes de l'lment.
Remarque : La proprit Rptition permet de redfinir la balise body et de dfinir une image darrire-plan sans mosaque
ni rptition.
Pice jointe de larrire-plan Dtermine si l'image d'arrire-plan reste fixe par rapport sa position d'origine ou dfile avec
le contenu. Notez que certains navigateurs font toujours dfiler l'image avec son contenu. Cet attribut est pris en charge par
Internet Explorer, mais non par Netscape Navigator.
Position de l'arrire-plan (X) et Position de l'arrire-plan (Y) Spcifient la position initiale de l'image d'arrire-plan par
rapport l'lment. Cette proprit peut tre utilise pour aligner une image d'arrire-plan sur le centre de la page,
verticalement (X) et horizontalement (Y). Si la proprit Fixation est rgle sur Fixe, cette position est relative la fentre de
document, pas l'lment.
272
Haut de la page
Dfinition des proprits de bloc de style CSS

La catgorie Bloc de la bote de dialogue Dfinition des rgles CSS vous permet de dfinir les paramtres d'espacement et d'alignement des
balises et des proprits.
3. Dans la bote de dialogue Dfinition des rgles de CSS, choisissez Bloc, puis dfinissez les proprits de style suivantes. Ne
dfinissez pas la proprit si elle n'est pas importante pour le style.
Espacement des mots Dfinit l'espace devant sparer les mots. Pour dfinir une valeur spcifique, choisissez Valeur dans
le menu droulant, puis entrez une valeur numrique. Dans le deuxime menu contextuel, choisissez une unit de mesure
(par exemple, pixels, points, etc.).
Remarque : Vous pouvez indiquer des valeurs ngatives, mais le rsultat final variera selon le navigateur. Dreamweaver
n'affiche pas cet attribut dans la fentre de document.
Espacement des lettres Augmente ou rduit l'interlettrage. Une valeur ngative (par exemple, -4) rduit l'espacement entre
les caractres. Les paramtres d'interlettrage ont priorit sur les paramtres de justification du texte. Cet attribut est pris en
charge par Internet Explorer 4, mais non par Netscape Navigator 6.
Alignement vertical Dtermine l'alignement vertical de l'lment auquel il s'applique. Dreamweaver n'affiche cet attribut dans
la fentre de document que lorsqu'il est appliqu la balise <img>.
Alignement du texte Dtermine l'alignement du texte au sein de l'lment. Cet attribut est pris en charge par les deux
navigateurs.
Retrait du texte Dtermine le retrait de texte sur la premire ligne. Vous pouvez utiliser une valeur ngative pour crer un
retrait ngatif, mais le rsultat final variera selon le navigateur. Dreamweaver n'affiche cet attribut dans la fentre de document
que lorsqu'il est appliqu aux lments de niveau bloc. Cet attribut est pris en charge par les deux navigateurs.
Espace blanc Dtermine la gestion des espaces au sein de l'lment. Choisissez parmi les trois options suivantes : Normal
rduit un seul espace une suite ventuelle de plusieurs caractres d'espacement ; Pre gre les espaces comme si le texte
tait insr l'intrieur d'une balise pre (tous les caractres d'espacement, notamment les espaces, tabulations et retours
chariot, sont respects) ; Pas de retour spcifie que le texte peut uniquement tre renvoy la ligne l'apparition d'une balise
br. Dreamweaver n'affiche pas cet attribut dans la fentre de document. Cet attribut est pris en charge par
Netscape Navigator et par Internet Explorer 5.5.
Afficher Dtermine le mode d'affichage d'un lment, le cas chant. Aucune dsactive l'affichage d'un lment.
Haut de la page
Dfinition des proprits de bote de style CSS

La catgorie Bote de la bote de dialogue Dfinition des rgles CSS vous permet de dfinir les paramtres des balises et des proprits pour le
positionnement des lments sur la page.
Vous pouvez appliquer des paramtres aux diffrents cts dun lment lors de la dfinition du remplissage et des marges ou utiliser loption
273
Idem pour tous pour appliquer le mme paramtre tous les cts dun lment.
3. Dans la bote de dialogue Dfinition des rgles de CSS, choisissez Bote, puis dfinissez les proprits de style suivantes. Ne
Largeur et Hauteur Dfinissent la largeur et la hauteur de l'lment.
Flottant Spcifie le ct autour duquel autres lments entourent l'lment flottant. L'lment flottant est fix du ct de
flottement et le reste du contenu l'entoure du ct oppos.
Par exemple, une image qui flotte sur la droite est fixe du ct droit et le contenu que vous ajoutez par la suite entoure le ct
gauche de limage.
Pour plus dinformations, voir http://css-tricks.com/all-about-floats/
Effacer Spcifie les cts dun lment qui nautorisent pas dautres lments flottants.
Remplissage Dfinit la marge intrieure, c'est--dire l'espace qui spare le contenu de l'lment de sa bordure (ou sa marge
s'il ne comporte pas de bordure). Dsactivez l'option Idem pour tous si vous voulez dfinir un remplissage diffrent pour
chaque ct de l'lment.
Idem pour tous Applique le mme remplissage aux bords suprieur, droit, infrieur et gauche de l'lment.
Marge Dfinit l'espace qui spare la bordure d'un lment (ou son remplissage s'il ne comporte pas de bordure) d'un autre
lment. Dreamweaver n'affiche cet attribut dans la fentre de document que lorsqu'il est appliqu aux lments de niveau
bloc (paragraphes, en-ttes, listes, etc.). Dsactivez l'option Idem pour tous si vous voulez dfinir une marge diffrente pour
chaque ct de l'lment.
Idem pour tous Applique la mme marge aux bords suprieur, droit, infrieur et gauche de l'lment.
Haut de la page
Dfinition des proprits de bordure de style CSS

Le panneau Bordure de la bote de dialogue Dfinition des rgles CSS vous permet de dfinir les paramtres des bordures des lments, par
exemple leur paisseur, leur couleur et leur style.
3. Dans la bote de dialogue Dfinition des rgles de CSS, choisissez Bordure, puis dfinissez les proprits de style suivantes.
Ne dfinissez pas la proprit si elle n'est pas importante pour le style.
Type Dfinit l'aspect de la bordure. L'affichage du style dpend du navigateur. Dsactivez l'option Idem pour tous si vous
voulez dfinir un style de bordure diffrent pour chaque ct de l'lment.
Idem pour tous Applique le mme style de bordure aux bords suprieur, droit, infrieur et gauche de l'lment.
Largeur Dtermine l'paisseur de la bordure de l'lment. Cet attribut est pris en charge par les deux navigateurs.
Dsactivez l'option Idem pour tous si vous voulez dfinir une paisseur diffrente pour chaque ct de l'lment.
274
Idem pour tous Applique la mme largeur de bordure aux bords suprieur, droit, infrieur et gauche de l'lment.
Couleur Dfinit la couleur de la bordure. Vous pouvez indiquer une couleur diffrente pour chaque ct, mais le rsultat final
variera selon le navigateur. Dsactivez l'option Idem pour tous si vous voulez dfinir une couleur diffrente pour chaque ct
de l'lment.
Idem pour tous Applique la mme couleur de bordure aux bords suprieur, droit, infrieur et gauche de l'lment.
Haut de la page
Dfinition des proprits de liste de style CSS

La catgorie Liste de la bote de dialogue Dfinition des rgles CSS vous permet de dfinir les paramtres des balises de liste, tels que la taille et
le type des puces.
3. Dans la bote de dialogue Dfinition des rgles de CSS, choisissez Liste, puis dfinissez les proprits de style suivantes. Ne
Type de style de liste Dtermine l'aspect des puces ou des numros. Cet attribut est pris en charge par les deux
navigateurs.
Image de style de liste Permet de choisir une image personnalise pour les puces. Cliquez sur Parcourir (Windows) ou
Choisir (Macintosh) pour slectionner une image ou tapez le chemin d'accs celle-ci.
Position de style de liste Dtermine si le texte de l'lment de la liste est habill et mis en retrait (extrieure) ou si le texte
habille la marge de gauche (intrieure).
Haut de la page
Dfinition des proprits de positionnement de style CSS

Les proprits de style Positionnement dterminent la faon dont le contenu associ au style CSS slectionn est positionn dans la page.
3. Dans la bote de dialogue Dfinition des rgles de CSS, choisissez Positionnement, puis dfinissez les proprits de style qui
vous conviennent.
Position Dtermine la faon dont le navigateur doit positionner l'lment slectionn, avec les options suivantes :
La proprit Absolu place le contenu en fonction des coordonnes indiques dans les zones Emplacement par rapport
lanctre PA ou relatif le plus proche, et dfaut, par rapport au coin suprieur gauche de la page.
Relatif place le bloc de contenu en fonction des coordonnes indiques dans les zones Emplacement, par rapport la
position du bloc dans le flux de texte du document. Par exemple, si vous dfinissez pour un lment une position relative
275
et des coordonnes d'origine (en haut gauche) de 20 px chacune, l'lment sera dplac de 20 px vers la droite et de
20 px vers le bas par rapport sa position normale dans le flux. Les lments peuvent aussi tre positionns de manire
relative, avec ou sans coordonnes haut, gauche, droite ou bas, afin d'tablir un contexte pour les enfants PA.
Fixe place le contenu en fonction des coordonnes indiques dans les zones Emplacement, par rapport au coin suprieur
gauche du navigateur. Le contenu restera fix dans cette position tandis que l'utilisateur fera dfiler la page.
Statique place le contenu son emplacement dans le flux de texte. Il s'agit de la position par dfaut de tous les lments
HTML positionnables.
Visibilit Dtermine la condition de l'affichage initial du contenu. Si vous ne spcifiez pas de proprit de visibilit, le contenu
hrite par dfaut de la valeur de cette proprit pour l'objet parent. La visibilit par dfaut de la balise body est visible.
Slectionnez l'une des options de visibilit suivantes :
Loption Hriter hrite de la proprit de visibilit du parent du contenu.
Loption Visible affiche le contenu, quelle que soit la valeur du parent.
Loption Masqu masque le contenu, quelle que soit la valeur du parent.
Index Z Dtermine l'ordre de superposition du contenu. Les lments ayant une valeur d'index Z suprieure s'affichent par
dessus les lments ayant une valeur d'index Z infrieure (ou aucune valeur d'index Z). Les valeurs peuvent tre positives ou
ngatives. (Si votre contenu est position absolue, il est plus facile de modifier l'ordre de superposition l'aide du panneau
Elments PA).
Dbordement Dtermine ce qui se passe si le contenu d'un conteneur (par exemple, une balise DIV ou P) dpasse la taille
de ce dernier. Ces proprits contrlent l'extension de la manire 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 conserve la taille du contenu et coupe tout contenu dpassant la taille. Aucune barre de dfilement n'est affiche.
Dfilement ajoute des barres de dfilement au conteneur, que le contenu dpasse ou non la taille du conteneur. Le fait
d'intgrer des barres de dfilement vite la confusion cause par l'apparition et la disparition de barres de dfilement dans
un environnement dynamique. Dreamweaver n'affiche pas cette option dans la fentre de document.
Auto ne fait apparatre les barres de dfilement que lorsque le contenu du conteneur dpasse les limites de ce dernier.
Dreamweaver n'affiche pas cette option dans la fentre de document.
Emplacement Dfinit l'emplacement et la taille du bloc de contenu. La faon dont le navigateur interprte l'emplacement
dpend de l'option choisie pour l'attribut Type. Les valeurs relatives la taille ne sont pas prises en compte si le contenu du
bloc de contenu excde la taille spcifie.
Les units par dfaut pour l'emplacement et la taille sont les pixels. Vous pouvez galement choisir les units suivantes : pc
(picas), pt (points), in (pouces), mm (millimtres), cm (centimtres) ou % (pourcentage de la valeur quivalente de l'objet
parent). Les abrviations doivent suivre la valeur sans espace : par exemple, 3mm.
Dtourage Dfinit la partie du contenu qui est visible. Si vous indiquez une zone de dtourage, vous pouvez la grer l'aide
d'un langage de script tel que Java Script et modifier ces proprits pour crer des effets spciaux, par exemple un effet de
volet l'ouverture. Ces effets de volet peuvent tre configurs via le comportement Changer la proprit.
Haut de la page
Dfinition des proprits d'extension de style CSS

Les proprits de style d'extensions comprennent les filtres, les sauts de page et les options de pointeur.
Remarque : Un certain nombre d'autres proprits d'extension sont disponibles dans Dreamweaver, mais vous devez passer par le panneau
Styles CSS pour y accder. Vous pouvez afficher facilement une liste des proprits d'extension disponibles en ouvrant le panneau Styles CSS
(Fentre > Styles CSS), puis cliquant sur le bouton Afficher la vue par catgorie en bas du panneau et en dveloppant la catgorie Extensions.
276
3. Dans la bote de dialogue Dfinition des rgles de CSS, choisissez Extensions, puis dfinissez les proprits de style
suivantes. Ne dfinissez pas la proprit 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 aprs l'objet contrl par ce style.
Choisissez l'option que vous voulez dfinir dans le menu droulant. Cet attribut n'est pas pris en charge par la version 4.0 des
navigateurs, mais peut l'tre dans les versions ultrieures.
Curseur Modifie l'aspect du pointeur lorsque celui-ci passe au-dessus de l'objet contrl par ce style. Choisissez l'option que
vous voulez dfinir dans le menu droulant. Cet attribut est pris en charge par Internet Explorer 4.0 et versions ultrieures et
par Netscape Navigator 6.
Filtre Applique des effets spciaux, dont des effets de flou et de ngatif, l'objet contrl par ce style. Slectionnez un effet
dans le menu contextuel.
277
Modification d'une rgle CSS

Modification d'une rgle dans le panneau Styles CSS (mode Actuel)
Modification d'une rgle dans le panneau Styles CSS (mode Tous)
Modification du nom d'un slecteur CSS
Vous pouvez facilement modifier les rgles internes et externes appliques un document.
Lorsque vous modifiez une feuille de style CSS qui contrle du texte dans votre document, vous reformatez instantanment tout ce texte. Les
modifications apportes une feuille de style externe se rpercutent sur tous les documents auxquels elle est lie.
Libre vous de dfinir un diteur externe utiliser pour la modification des feuilles de style.
Modification d'une rgle dans le panneau Styles CSS (mode Actuel)
Haut de la page
1. Ouvrez le panneau Styles CSS en slectionnant Fentre > Styles CSS.

2. Cliquez sur le bouton Actuel, situ en haut du panneau Styles CSS.
3. Slectionnez un lment de texte dans la page pour afficher ses proprits.
Pour afficher la bote de dialogue Dfinition des rgles de CSS et effectuer vos modifications, double-cliquez sur une
proprit du volet Rsum de la slection.
Slectionnez une proprit dans le volet Rsum de la slection et modifiez-la dans le volet Proprits infrieur.
Slectionnez une rgle dans le volet Toutes les rgles, puis modifiez ses proprits dans le volet Proprits infrieur.
Remarque : Vous pouvez changer le comportement du double-clic lors de la modification CSS, ainsi que les autres
comportements, en changeant les prfrences de Dreamweaver.
Modification d'une rgle dans le panneau Styles CSS (mode Tous)
Haut de la page
1. Ouvrez le panneau Styles CSS en slectionnant Fentre > Styles CSS.

2. Cliquez sur le bouton Tous, situ en haut du panneau Styles CSS.
Pour afficher la bote de dialogue Dfinition des rgles de CSS et effectuer vos modifications, double-cliquez sur une rgle
du volet Toutes les rgles.
Slectionnez une rgle dans le volet Toutes les rgles, puis modifiez ses proprits dans le volet Proprits infrieur.
Slectionnez une rgle dans le volet Toutes les rgles, puis cliquez sur le bouton Modifier le style situ dans le coin
infrieur 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 prfrences de Dreamweaver.
Haut de la page
Modification du nom d'un slecteur CSS

1. Dans le panneau Styles CSS (mode Tous), slectionnez le slecteur modifier.
2. Cliquez nouveau sur le slecteur afin de pouvoir en modifier le nom.
3. Apportez vos modifications, puis appuyez sur Entre (Windows) ou sur Retour (Macintosh).
Voir aussi
278
Ajout d'une proprit une rgle CSS

Vous pouvez utiliser le panneau de styles CSS pour ajouter des proprits aux rgles.
1. Dans le panneau Styles CSS (Fentre > CSS), slectionnez une rgle dans le volet Toutes les rgles (mode Tous) ou une
proprit dans le volet Rsum de la slection (mode Actuel).
Si la vue Afficher uniquement les proprits dfinies est active dans le volet Proprits, cliquez sur le lien Ajouter des
proprits et ajoutez une proprit.
Si la vue Catgorie ou Liste est slectionne dans le volet Proprits, donnez une valeur la proprit slectionne.
279
Application, suppression ou modification du nom de styles de classe

CSS
Application d'un style de classe CSS
Suppression d'un style de classe d'une slection
Changement de nom d'un style de classe
Les styles de classe sont le seul type de style CSS qui peut tre appliqu n'importe quel texte dans un document, quelles que soient les balises
qui contrlent ce texte. Tous les styles de classe associs au document actif sont affichs dans le panneau Styles CSS (leur nom est prcd
d'un point [.]) ainsi que dans le menu droulant Style dans l'inspecteur Proprits de texte.
Mme si la plupart des styles sont actualiss immdiatement, il est conseill d'afficher votre page dans un navigateur et de vrifier que le style a
t appliqu comme prvu. Lorsque vous appliquez plusieurs styles au mme texte, ils risquent d'tre contradictoires et de produire des rsultats
inattendus.
Lorsque vous affichez un aperu des styles dfinis dans une feuille de style CSS externe, n'oubliez pas d'enregistrer la feuille de style afin que
vos modifications soient appliques lorsque vous afficherez la page dans un navigateur.
Haut de la page
Application d'un style de classe CSS

1. Slectionnez 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 slectionnez une plage de texte au sein d'un mme paragraphe, le style CSS n'affectera que cette slection.
Pour indiquer la balise prcise laquelle le style CSS doit tre appliqu, slectionnez cette balise dans le slecteur situ dans
la partie infrieure gauche de la fentre de document.
2. Pour appliquer un style de classe, procdez de l'une des manires suivantes :
Dans le panneau Styles CSS (Fentre > Styles CSS), slectionnez le mode Tous, cliquez avec le bouton droit de la souris
sur le nom du style appliquer et choisissez Appliquer dans le menu contextuel.
Dans l'inspecteur Proprits HTML, choisissez le style de classe appliquer dans le menu droulant Classe.
Dans la fentre de document, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfonce (Macintosh) sur le texte slectionn, choisissez Styles CSS dans le menu contextuel, puis choisissez le style
appliquer.
Choisissez Format > Styles CSS, puis slectionnez le style appliquer dans le sous-menu.
Haut de la page
Suppression d'un style de classe d'une slection

1. Slectionnez l'objet ou le texte auquel le style ne doit plus tre appliqu.
2. Dans l'inspecteur Proprits HTML (Fentre > Proprits), choisissez Aucun dans le menu droulant Classe.
Haut de la page
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 slectionnez Renommer la classe.
Vous pouvez galement renommer une classe en slectionnant Renommer la classe dans le menu d'options du panneau
Styles CSS.
2. Dans la bote de dialogue Renommer la classe, assurez-vous que la classe que vous souhaitez renommer est slectionne
dans le menu droulant 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 galement une
bote de dialogue Rechercher et remplacer l'chelle du site pour vous permettre de rechercher toutes les instances de
280
l'ancien nom de la classe pouvant exister dans votre site.

Voir aussi
[print]A propos des feuilles de style en cascade
281
Dplacement/exportation de rgles CSS

Dplacement/exportation de rgles CSS vers une nouvelle feuille de style
Dplacement/exportation de rgles CSS vers une feuille de style existante
Rorganisation ou dplacement des rgles CSS en les faisant glisser
Slection de plusieurs rgles avant de les dplacer
Les fonctions de gestion des feuilles de styles CSS de Dreamweaver permettent de dplacer ou d'exporter aisment des rgles CSS vers des
emplacements diffrents. Vous pouvez dplacer des rgles 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 rgle que vous essayez de dplacer est en conflit avec une rgle de la feuille de style de destination, Dreamweaver affiche la
bote de dialogue Il existe dj une rgle de ce nom. Si vous dcidez de dplacer la rgle en conflit, Dreamweaver place la rgle dplace
proximit immdiate de la rgle avec laquelle elle est en conflit dans la feuille de style de destination.
Dplacement/exportation de rgles CSS vers une nouvelle feuille de style
Haut de la page

Dans le panneau Styles CSS, slectionnez la ou les rgles que vous souhaitez dplacer. Cliquez ensuite sur la slection
avec le bouton droit de la souris et choisissez Dplacer les rgles CSS dans le menu contextuel. Pour slectionner
plusieurs rgles, appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant avec la souris sur les
rgles slectionner
En mode Code, slectionnez la ou les rgles dplacer. Cliquez ensuite sur la slection avec le bouton droit de la souris
et slectionnez Styles CSS > Dplacer les rgles CSS dans le menu contextuel.
Remarque : La slection partielle d'une rgle se traduit par le dplacement de l'ensemble de la rgle.
2. Dans la bote de dialogue Dplacer dans une feuille de style externe, slectionnez l'option de nouvelle feuille de style et
cliquez sur OK.
3. Dans la bote 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 rgles que vous
avez slectionnes et l'associe au document actif.
Vous pouvez galement dplacer des rgles l'aide de la barre d'outils de codage. La barre d'outil de codage est
disponible uniquement en mode Code.
Dplacement/exportation de rgles CSS vers une feuille de style existante
Haut de la page

Dans le panneau Styles CSS, slectionnez la ou les rgles que vous souhaitez dplacer. Cliquez ensuite sur la slection
avec le bouton droit de la souris et choisissez Dplacer les rgles CSS dans le menu contextuel. Pour slectionner
plusieurs rgles, appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant avec la souris sur les
rgles slectionner
En mode Code, slectionnez la ou les rgles dplacer. Cliquez ensuite sur la slection avec le bouton droit de la souris
et slectionnez Styles CSS > Dplacer les rgles CSS dans le menu contextuel.
Remarque : La slection partielle d'une rgle se traduit par le dplacement de l'ensemble de la rgle.
2. Dans la bote de dialogue Dplacer dans une feuille de style externe, slectionnez une feuille de style existante dans le menu
droulant ou naviguez jusqu' une feuille de style existante et cliquez sur OK.
Remarque : Le menu droulant affiche toutes les feuilles de style qui sont lies au document actif.
Vous pouvez galement dplacer des rgles l'aide de la barre d'outils de codage. La barre d'outil de codage est
Rorganisation ou dplacement des rgles CSS en les faisant glisser
Haut de la page
Dans le panneau Styles CSS (mode Tous), slectionnez une rgle et faites-la glisser jusqu' l'emplacement dsir. Vous pouvez slectionner
282
des rgles et les faire glisser pour les rorganiser l'intrieur d'une feuille de style, ou dplacer une rgle vers une autre feuille de style ou dans la
section head du document.
Vous pouvez dplacer plusieurs rgles la fois en appuyant sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant avec la
souris sur plusieurs rgles pour les slectionner.
Slection de plusieurs rgles avant de les dplacer
Haut de la page
Dans le panneau Styles CSS, appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant avec la souris sur les rgles
que vous souhaitez slectionner.
Voir aussi
283
Conversion de code CSS intgr en rgle CSS

L'utilisation de styles intgrs ne constitue pas une meilleure pratique recommande. Pour que vos styles CSS soient plus clairs et mieux
organiss, vous pouvez convertir des styles intgrs en rgles CSS rsidant dans la section head du document ou dans une feuille de style
externe.
1. En mode Code (Affichage > Code), slectionnez la totalit de l'attribut de style qui contient le style CSS intgr convertir.
2. Cliquez dessus avec le bouton droit de la souris et slectionnez Styles CSS > Convertir en rgle les styles CSS intgrs.
3. Dans la bote de dialogue Convertir style CSS, saisissez un nom de classe pour la nouvelle rgle, puis procdez de l'une des
faons suivantes :
Spcifiez une feuille de style dans laquelle vous souhaitez que la nouvelle rgle CSS apparaisse et cliquez sur OK.
Slectionnez la section head du document en tant qu'emplacement dans lequel vous souhaitez que la nouvelle rgle CSS
apparaisse et cliquez sur OK.
Vous pouvez galement convertir des rgles l'aide de la barre d'outils de codage. La barre d'outil de codage est
Voir aussi
284
Etablissement d'un lien vers une feuille de style CSS externe

Si vous modifiez une feuille de style CSS externe, les changements sont reflts dans tous les documents lis cette feuille de style. Vous
pouvez exporter les styles CSS trouvs dans un document afin de crer une nouvelle feuille de style CSS, et attacher ou crer un lien vers une
feuille de style externe pour appliquer les styles trouvs cet endroit.
Vous pouvez attacher toute feuille de style de votre cration vos pages ou copier ces feuilles dans votre site. De plus, Dreamweaver est fourni
avec des feuilles de style prdfinies qui peuvent tre automatiquement places dans votre site et attaches vos pages.
1. Ouvrez le panneau Styles CSS en procdant de l'une des manires suivantes :
Choisissez Fentre > 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 infrieur droit du panneau.)
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, slectionnez une des options suivantes :
Pour crer un lien entre le document actif et une feuille de style externe, choisissez Lien. Cette slection a pour effet de
crer une balise de lien href dans le code HTML et de rfrencer l'URL de l'emplacement de la feuille de style publie.
Microsoft Internet Explorer et Netscape Navigator prennent tous deux en charge cette mthode.
Vous ne pouvez pas utiliser une balise de lien pour ajouter une rfrence d'une feuille de style externe une autre. Pour
imbriquer des feuilles de style, vous devez utiliser une directive d'importation. La plupart des navigateurs reconnaissent
galement la directive d'importation dans une page (plutt que simplement dans des feuilles de style). Il existe quelques
diffrences dans la mthode de rsolution des conflits entre proprits lorsque des rgles se chevauchent dans des
feuilles de style externes lies et des feuilles importes dans une page. Pour importer une feuille de style externe, plutt
que d'y crer un lien, choisissez Importer.
5. Dans le menu contextuel Mdias, spcifiez le mdia cible de la feuille de style.
Pour plus d'informations sur les feuilles de style dpendantes du mdia, consultez le site Web du World Wide Web Consortium
l'adresse www.w3.org/TR/CSS21/media.html.
6. Cliquez sur le bouton d'aperu pour vrifier que la feuille de style applique effectivement les styles de votre choix la page
active.
Si les styles appliqus ne sont pas ceux attendus, cliquez sur Annuler pour supprimer la feuille de style. La page retrouve son
aspect prcdent.
7. Cliquez sur OK.
Voir aussi
Cration d'un document bas sur un fichier d'exemple Dreamweaver
285
Modification d'une feuille de style CSS

En rgle gnrale, une feuille de style CSS comprend une ou plusieurs rgles. Vous pouvez modifier les diffrentes rgles d'une feuille de style
CSS l'aide du panneau Styles CSS, ou bien vous pouvez travailler directement dans la feuille de style CSS.
1. Dans le panneau Styles CSS (Fentre > Styles CSS), slectionnez le mode Tous.
2. Dans le volet Toutes les rgles, double-cliquez sur le nom du style modifier.
3. Dans la fentre Document, modifiez la feuille de style en fonction des besoins, puis enregistrez-la.
286

Dfinition des prfrences de formatage du code CSS
Formatage manuel du code CSS dans une feuille de style CSS
Formatage manuel du code CSS intgr
Vous pouvez dfinir des prfrences qui contrlent le formatage de votre code CSS chaque fois que vous crez ou modifiez une rgle CSS
l'aide de l'interface Dreamweaver. Par exemple, vous pouvez dfinir des prfrences qui placeront toutes les proprits CSS sur des lignes
spares, insrer une ligne vierge entre les rgles CSS, etc.
Lorsque vous dfinissez des prfrences de formatage de code CSS, les prfrences que vous slectionnez sont automatiquement appliques
toutes les nouvelles rgles CSS que vous crez. Toutefois, vous pouvez galement appliquer ces prfrences manuellement des documents
individuels. Cela peut tre utile si vous possdez un document HTML ou CSS plus ancien ayant besoin d'un formatage.
Remarque : Les prfrences de formatage de code CSS s'appliquent uniquement aux rgles CSS de feuilles de style externes ou intgres (mais
pas aux styles intgrs).
Dfinition des prfrences de formatage du code CSS
Haut de la page
1. Choisissez Edition > Prfrences.

2. Dans la bote de dialogue Prfrences, slectionnez la catgorie Format du code.
3. En regard de l'option Formatage avanc, cliquez sur le bouton CSS.
4. Dans la bote de dialogue Options de mise en forme de la source CSS, slectionnez les options que vous souhaitez appliquer
votre code source CSS. Un aperu de la feuille de style CSS telle qu'elle est modifie par les options slectionnes s'affiche
dans la fentre Aperu plus bas.
Mettre les proprits en retrait avec Dfinit la valeur de mise en retrait des proprits au sein d'une rgle. Vous pouvez
spcifier des tabulations ou des espaces.
Chaque proprit sur une ligne spare Place chaque proprit au sein d'une rgle sur une ligne spare.
Accolade d'ouverture sur une ligne spare Place l'accolade d'ouverture pour une rgle sur une ligne spare de celle du
slecteur.
Seulement si plusieurs proprits Place les rgles une seule proprit sur la mme ligne que le slecteur.
Tous les slecteurs d'une rgle sur la mme ligne Place tous les slecteurs d'une rgle sur la mme ligne.
Ligne vierge pour sparer les rgles Insre une ligne vierge entre chaque rgle.
5. Cliquez sur OK.
Remarque : Le formatage de code CSS hrite galement de la prfrence Type de saut de ligne que vous avez dfinie dans la catgorie Format
de code de la bote de dialogue Prfrences.
Formatage manuel du code CSS dans une feuille de style CSS
Haut de la page
1. Ouvrez une feuille de style CSS

2. Choisissez Commandes > Appliquer le format source.
Les options de formatage que vous dfinissez dans les prfrences de formatage de code CSS s'appliquent l'ensemble du
document. Vous ne pouvez pas formater de slections individuelles.
Haut de la page
Formatage manuel du code CSS intgr

1. Ouvrez une page HTML contenant du code CSS intgr dans la section head du document.
2. Slectionnez une partie quelconque du code CSS.
3. Choisissez Commandes > Appliquer le format source la slection.
Les options de formatage que vous dfinissez dans les prfrences de formatage de code CSS s'appliquent uniquement
l'ensemble des rgles CSS de la section Head du document.
Remarque : Vous pouvez choisir Commandes > Appliquer le format source pour mettre l'ensemble du document en forme en
fonction des prfrences de mise en forme de code que vous avez spcifies.
287
Voir aussi
288
Dsactivation/Activation de code CSS

La fonctionnalit Dsactiver/Activer la proprit 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 proprits et des valeurs spcifiques ont sur votre page.
Lorsque vous dsactivez une proprit CSS, Dreamweaver ajoute des balises de commentaire CSS et un libell [dsactiv] la proprit CSS
que vous avez dsactive. Par la suite, vous pouvez aisment ractiver ou supprimer la proprit CSS dsactive, selon vos prfrences.
Vous trouverez, l'adresse ci-aprs, une vido de l'quipe de conception de Dreamweaver qui prsente l'utilisation de la fonction de
dsactivation/activation du code CSS : www.adobe.com/go/dwcs5css_fr.
1. Dans le volet Proprits du panneau Styles CSS (Fentre > Styles CSS), slectionnez la Proprit que vous voulez
dsactiver.
2. Cliquez sur l'icne Dsactiver/Activer la proprit CSS dans le coin infrieur droit du volet proprits. Cette icne s'affiche
galement si vous laissez le pointeur de la souris sur la gauche de la proprit proprement dite.
Lorsque vous cliquez sur l'icne Dsactiver/Activer la proprit CSS, une icne indiquant la dsactivation s'affiche gauche
de la proprit. Pour ractiver la proprit, cliquez sur l'icne Dsactiv ou cliquez l'aide du bouton droit de la souris
(Windows) ou en maintenant la touche Commande enfonce (Macintosh) sur la proprit, puis choisissez Activer.
3. (Facultatif) Pour activer ou supprimer toutes les proprits dsactives d'une rgle slectionne, faites un clic droit de la
souris (Windows) ou un clic tout en maintenant la touche CTRL enfonce (Macintosh) sur une rgle ou proprit dans
laquelle des proprits sont dsactives, puis choisissez Activer tous les lments dsactivs de la rgle slectionne ou
Supprimer tous les lments dsactivs de la rgle slectionne.
289
Inspection de code CSS en mode En direct

Le mode Inspection s'associe au mode En direct afin de vous aider identifier rapidement les lments HTML et les styles CSS qui y sont
associs. Lorsque le mode Inspection est activ, vous pouvez survoler des lments de votre page afin d'afficher les attributs de modle de bote
CSS de n'importe quel lment de niveau bloc.
Remarque : Pour plus d'informations sur le modle de bote CSS, consultez la spcification CSS 2.1 (en anglais).
Le mode Inspection permet d'obtenir une reprsentation visuelle du modle de bote. Vous pouvez en outre utiliser le panneau Styles CSS
pendant le survol d'lments dans la fentre Document. Lorsque le panneau Styles CSS est ouvert en mode Actuel et que vous survolez un
lment de la page, les rgles et proprits du panneau Styles CSS sont automatiquement mises jour, de faon montrer les rgles et
proprits de cet lment. En outre, les modes et panneaux associs l'lment que vous survolez sont galement mis jour (par exemple le
mode Code, le slecteur de balises, l'inspecteur Proprits, etc.).
1. Lorsque le document est ouvert dans la fentre Document, cliquez sur le bouton Inspecter ( ct du bouton Mode en direct
dans la barre d'outils Document).
Remarque : Si vous n'tes pas dj en mode En direct, le mode Inspection l'active automatiquement.
2. Survolez des lments de la page afin d'afficher le modle de bote CSS. Le mode Inspection utilise des couleurs de
surbrillance diffrentes pour la bordure, la marge, la marge intrieure et le contenu.
3. (Facultatif) Appuyez sur la flche vers la gauche, sur votre clavier, afin de mettre en surbrillance le parent de l'lment
actuellement en surbrillance. Appuyez sur la flche vers la droite pour rtablir la mise en surbrillance de l'lment enfant.
4. (Facultatif) Cliquez sur un lment pour verrouiller la slection en surbrillance.
Remarque : Si vous cliquez sur un lment afin de verrouiller la slection en surbrillance, le mode Inspection est dsactiv.
Adobe recommande
Vous souhaitez partager un didacticiel ?
Dreamweaver CS5 - Inspection CSS

Scott Fegette, gestionnaire produit Dreamweaver
Didacticiel vido prsentant Inspection CSS
Voir aussi
290
Vrification de problmes de restitution CSS entre les navigateurs

Excution d'une vrification de compatibilit avec les navigateurs
Slection de l'lment affect par un problme dtect
Accs au problme suivant/prcdent dtect dans le code
Slection des navigateurs faire vrifier par Dreamweaver
Exclusion d'un problme de la vrification de compatibilit avec les navigateurs
Modification de la liste des problmes ignors
Sauvegarde d'un rapport de vrification de compatibilit avec les navigateurs
Affichage d'un rapport de vrification de compatibilit avec les navigateurs dans un navigateur
Ouverture du site Web Adobe CSS Advisor
Les fonctions de vrification de la compatibilit avec les navigateurs vous permettent de rechercher les combinaisons de HTML et de feuilles de
style CSS pouvant prsenter des problmes dans certains navigateurs. Lorsque vous excutez une vrification de compatibilit avec les
navigateurs sur un fichier ouvert, Dreamweaver analyse le fichier et signale tous les problmes de rendu CSS potentiels dans le panneau
Rsultats. Une estimation de confiance, illustre par un quart de cercle, un demi cercle, trois-quarts de cercle ou un cercle plein, indique la
probabilit d'occurrence d'un bogue (un quart de cercle plein indique une occurrence possible et un cercle complet plein indique une occurrence
trs probable). Pour chaque bogue potentiel dtect, Dreamweaver fournit galement un lien direct la documentation relative au bogue sur
Adobe CSS Advisor, un site Web qui dtaille les bogues de rendu de navigateur connus et propose des solutions pour les corriger.
Par dfaut, la fonction de vrification de la compatibilit avec les navigateurs effectue une vrification 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 vrification du navigateur cible, mais conserve la fonctionnalit CSS de cette fonction. Cela signifie
que la nouvelle fonction de vrification de compatibilit avec les navigateurs teste le code de vos documents et dtermine s'il contient des
proprits ou des valeurs CSS non prises en charge par les navigateurs cibles.
Trois niveaux de problmes potentiels de prise en charge de navigateur peuvent se prsenter :
Une erreur signale du code CSS pouvant causer un problme grave et visible au niveau du fonctionnement de certains
navigateurs, par exemple, en faisant disparatre une partie d'une page (une erreur dsigne par dfaut les problmes de prise
en charge de navigateur, de sorte que dans certains cas, du code ayant un effet inconnu peut tre signal 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 srieux problme 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 vrifications de compatibilit avec les navigateurs n'altrent en rien le document.
Excution d'une vrification de compatibilit avec les navigateurs
Haut de la page
Slectionnez Fichier > Vrifier la page > Compatibilit avec les navigateurs.
Slection de l'lment affect par un problme dtect
Haut de la page
Double-cliquez sur le problme dans le panneau Rsultats.
Accs au problme suivant/prcdent dtect dans le code
Haut de la page
Dans le menu Vrification de la compatibilit avec les navigateurs de la barre d'outils du document, slectionnez Problme suivant ou
Problme prcdent.
Slection des navigateurs faire vrifier par Dreamweaver

1. Dans le panneau Rsultats (Fentre > Rsultats), slectionnez l'onglet Vrification de la compatibilit avec les navigateurs.
2. Cliquez sur la flche verte dans le coin suprieur gauche du panneau Rsultats, puis choisissez Paramtres.
3. Slectionnez la case cocher situe en regard des navigateurs vrifier.
4. Dans le menu droulant correspondant aux navigateurs slectionns, vous devez indiquer la version minimale devant tre
vrifie.
291
Haut de la page
Par exemple, pour vrifier si la restitution CSS peut s'afficher dans Internet Explorer 5.0 et versions ultrieures et dans
Netscape Navigator 7.0 et versions ultrieures, cochez les cases correspondant aux noms de ces navigateurs, puis
slectionnez 5.0 dans le menu droulant Internet Explorer et 7.0 dans le menu droulant Netscape.
Exclusion d'un problme de la vrification de compatibilit avec les navigateurs
Haut de la page
1. Excutez une vrification de compatibilit avec les navigateurs.

2. Dans le panneau Rsultats, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce
(Macintosh) sur le problme que vous souhaitez exclure des vrifications futures.
3. Cliquez sur Ignorer le problme dans le menu contextuel.
Haut de la page
Modification de la liste des problmes ignors

2. Cliquez sur la flche verte dans le coin suprieur gauche du panneau Rsultats, puis choisissez Modifier la liste des
problmes ignors.
3. Dans le fichier Exceptions.xml, recherchez le problme que vous souhaitez supprimer de la liste des problmes ignors et
supprimez-le.
4. Enregistrez et fermez le fichier Exceptions.xml.
Sauvegarde d'un rapport de vrification de compatibilit avec les navigateurs
Haut de la page

2. Cliquez sur le bouton Enregistrer le rapport dans le ct gauche du panneau Rsultats.
Amenez le pointeur de la souris sur les boutons du panneau Rsultats pour afficher les info-bulles relatives chaque
bouton.
Remarque : Les rapports ne sont pas enregistrs automatiquement ; si vous souhaitez conserver une copie d'un rapport, vous
devez suivre la procdure ci-dessus pour l'enregistrer.
Affichage d'un rapport de vrification de compatibilit avec les navigateurs dans un

navigateur
Haut de la page

2. Cliquez sur le bouton Parcourir le rapport dans le ct gauche du panneau Rsultats.
Amenez le pointeur de la souris sur les boutons du panneau Rsultats pour afficher les info-bulles relatives chaque
bouton.
Haut de la page
Ouverture du site Web Adobe CSS Advisor

2. Cliquez sur le texte du lien situ dans l'angle infrieur droit du panneau.
Voir aussi
CSS Advisor
292
Utilisation des feuilles de style la conception

Les feuilles de style la conception permettent d'afficher ou de masquer la conception applique 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 cration d'une page.
Les feuilles de style la conception s'appliquent uniquement lorsque vous travaillez dans un document ; lorsque la page est affiche dans une
fentre de navigateur, seuls les styles rellement attachs au document ou qui y sont incorpors apparaissent.
Remarque : Vous pouvez galement activer ou dsactiver des styles pour l'ensemble d'une page l'aide de la barre d'outils Rendu du style. Pour
afficher la barre d'outils standard, choisissez Affichage > Barres d'outils > Rendu de style. Le bouton Intervertir l'affichage des Styles CSS (le plus
droite) fonctionne indpendamment des autres boutons de support de la barre d'outils.
Pour utiliser une feuille de style la conception, procdez comme suit.
1. Ouvrez la bote de dialogue Feuilles de style la conception en procdant de l'une des manires suivantes :
Cliquez avec le bouton droit de la souris dans le panneau Styles CSS et choisissez Conception dans le menu contextuel.
Choisissez Format > Styles CSS > Conception.
2. Dans la bote de dialogue, dfinissez les options d'affichage ou de masquage de la feuille de style slectionne :
Pour afficher une feuille de style CSS la conception, cliquez sur le bouton plus (+) situ au-dessus d'Afficher la
conception uniquement, puis recherchez la feuille de style CSS afficher dans la bote de dialogue Slectionner une
feuille de style.
Pour masquer une feuille de style CSS, cliquez sur le bouton plus (+) situ au-dessus de Masquer la conception, puis
recherchez la feuille de style CSS masquer dans la bote de dialogue Slectionner 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.
3. Cliquez sur OK pour fermer la bote de dialogue.
Le panneau Styles CSS est actualis avec le nom de la feuille de style slectionne ainsi qu'un indicateur, masqu ou
concevoir , selon l'tat de la feuille de style.
Voir aussi
Prsentation de la barre d'outils Rendu de style
293
Utilisation des balises div

Insertion et modification de balises div
Blocs de mise en forme CSS
Utilisation d'lments AP
Remarque : dans Dreamweaver CC et les versions ultrieures, le panneau Styles CSS a t remplac par
CSS Designer. Pour plus dinformations, voir CSS Designer.
(Utilisateurs de Creative Cloud uniquement) : Sept nouvelles balises smantiques sont disponibles lorsque
vous choisissez Insertion > Mise en page. Ces nouvelles balises sont : Article, Aside, HGroup, Navigation,
Section, Header et Footer. Pour plus dinformations, voir Insertion dlments smantiques HTML5 depuis le
panneau Insertion.
Voir aussi
Didacticiel vido : Utilisation dlments div
Didacticiel : Utilisation de code CSS pour mettre en forme des balises div et dautres lments de mise
en forme
Didacticiel : Mise en forme de len-tte et du menu de navigation
Haut de la page
Insertion et modification de balises div

Vous pouvez crer des mises en page en insrant manuellement des balises div et en leur appliquant des
styles de positionnement CSS. Une balise div est une balise qui dfinit les divisions logiques dans le
contenu d'une page Web. Vous pouvez utiliser des balises div pour centrer des blocs de contenu, crer des
effets de colonne, crer diffrentes zones de couleur, etc.
Si vous ne matrisez pas bien lutilisation des balises div et des feuilles de style CSS pour la conception de
pages Web, vous pouvez crer une mise en forme CSS partir de lune des mises en forme prdfinies
fournies avec Dreamweaver. Si vous ntes pas laise avec lutilisation des feuilles de style CSS mais que
vous connaissez bien celle des tableaux, vous pouvez galement essayer dutiliser des tableaux.
Remarque : Dreamweaver traite toutes les balises div comme des lments positionnement absolu
(lments AP), mme si vous navez pas cr ces balises laide de loutil de trac AP Div.
Insertion de balises div

Vous pouvez utiliser des balises div pour crer des blocs de mise en forme CSS et les placer dans votre
document. Cette mthode est utile si une feuille de style CSS existante contenant des styles de
positionnement est associe votre document. Dreamweaver vous permet dinsrer rapidement une balise
div et de lui appliquer des styles existants.
1. Dans la fentre de document, placez le point d'insertion l'endroit o vous voulez insrer
la balise div.
Cliquez sur Insertion > Objets de mise en forme > Balise Div.
294
Dans la catgorie Mise en forme du panneau Insertion, cliquez sur le bouton Insrer
une balise Div .
Insrer Permet de choisir lemplacement de la balise div et son nom, sil ne sagit pas
dune nouvelle balise.
Classe Affiche le style de classe actuellement appliqu la balise. Si vous avez associ
une feuille de style, les classes qui y sont dfinies s'affichent dans la liste. Ce menu
permet de slectionner le style appliquer la balise.
ID Vous permet de modifier le nom utilis pour identifier la balise div. Si vous avez
associ une feuille de style, les ID qui y sont dfinis s'affichent dans la liste. Les ID des
blocs dj prsents dans votre document ne sont pas rpertoris.
Remarque : Dreamweaver met un avertissement si vous tapez un ID dj affect
une autre balise dans votre document.
Nouvelle rgle CSS Ouvre la bote de dialogue Nouvelle rgle CSS.

4. Cliquez sur OK.
La balise div s'affiche dans votre document sous la forme d'une zone contenant du
texte d'espace rserv. Lorsque vous placez le pointeur sur le bord de cette zone,
Dreamweaver la met en surbrillance.
Si la balise div est place de manire absolue, elle devient un lment AP. Vous
pouvez modifier les balises div qui ne sont pas positionnement absolu.
Modification de balises div

Aprs avoir insr une balise div, vous pouvez la manipuler ou lui ajouter du contenu.
Remarque : les balises div qui sont positionnes de manire absolue deviennent des lments AP.
Les balises div ont des bordures visibles lorsque vous leur attribuez des bordures ou lorsque vous avez
slectionn Contours en feuille CSS. (L'option Contours en feuille CSS est slectionne par dfaut dans le
menu Affichage > Assistances visuelles.) Lorsque vous placez le pointeur sur une balise div, Dreamweaver
la met en surbrillance. Vous pouvez modifier la couleur de la mise en surbrillance ou dsactiver la mise en
surbrillance.
Lorsque vous slectionnez une balise div, vous pouvez afficher et modifier les rgles correspondantes dans
le panneau Styles CSS. Vous pouvez aussi ajouter du contenu la balise div : placez simplement le point
d'insertion l'intrieur de la balise div, puis procdez l'ajout du contenu comme vous le feriez pour celui
d'une page.
Affichage et modification des rgles appliques une balise div

1. Procdez de l'une des manires suivantes pour slectionner la balise div :
Cliquez sur la bordure de la balise div.
Recherchez la surbrillance afin de voir les bordures.
Cliquez lintrieur de la balise div et appuyez sur les touches Ctrl+A (Windows) ou
Commande+A (Macintosh) deux reprises.
Cliquez lintrieur de la balise div, puis slectionnez-la balise div partir du
slecteur de balises figurant au bas de la fentre du document.
295
2. Choisissez Fentre > Styles CSS pour afficher le panneau Styles CSS, si besoin est.
Les rgles appliques la balise div s'affichent dans le panneau.
3. Effectuez les modifications ncessaires.
Placement du point d'insertion dans une balise div afin d'y ajouter du contenu
Cliquez n'importe o l'intrieur des bordures de la balise.
Modification du texte de l'espace rserv dans une balise div

Slectionnez le texte, puis tapez un nouveau texte par-dessus ou appuyez sur la touche
Suppr.
Remarque : vous pouvez ajouter du contenu 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 dune balise div en mode Cration, Dreamweaver met
ses bordures en surbrillance. Vous pouvez activer ou dsactiver la mise en surbrillance votre convenance
ou en modifier la couleur dans la bote de dialogue Prfrences.
1. Cliquez sur Edition > Prfrences (Windows) ou Dreamweaver > Prfrences
(Macintosh).
2. Slectionnez la catgorie 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 slectionnez une couleur de surbrillance l'aide du slecteur de
couleur (ou tapez la valeur hexadcimale correspondant la couleur de surbrillance
dans la zone de texte).
Pour activer ou dsactiver la mise en surbrillance des balises div, activez ou
dsactivez la case cocher Afficher de loption Survol.
Remarque : ces options ont un impact sur tous les objets (tableaux, par exemple) que
Dreamweaver met en surbrillance lorsque vous passez le pointeur dessus.
Haut de la page
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 Cration. Un
bloc de mise en forme CSS est un lment de page HTML que vous pouvez positionner n'importe o sur
votre page. Un bloc de mise en forme CSS est plus prcisment soit une balise div sans
display:inline, soit un autre lment de page qui inclut les dclarations CSS display:block,
position:absolute ou position:relative. Les lments suivants, par exemple, sont considrs
comme des blocs de mise en forme CSS dans Dreamweaver :
Une balise div

Une image laquelle est affecte une position relative ou absolue
296
Une balise a laquelle est affect le style display:block

Un paragraphe auquel est affecte une position relative ou absolue
Remarque : pour des raisons de rendu visuel, les blocs de mise en forme CSS nincluent pas dlments en
ligne (cest--dire dlments dont le code est dfini dans une ligne de texte), ni dlments 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 arrire-plans et le modle dencadr pour les blocs de
mise en forme CSS en mode Cration. Vous pouvez aussi afficher des info-bulles qui indiquent les proprits
du bloc de mise en forme CSS slectionn lorsque vous placez le pointeur dessus.
La liste suivante dassistances visuelles concernant les blocs de mise en forme CSS dcrit ce que
Dreamweaver rend visible pour chacune delles :
Contours en feuille CSS Affiche les contours de tous les blocs de mise en forme CSS sur la page.
Arrire-plans des blocs de mise en forme CSS Affiche les couleurs darrire-plan temporairement
attribues chaque bloc de mise en forme CSS et masque toutes les autres couleurs darrire-plan ou
images qui apparaissent normalement sur la page.
Lorsque vous activez les assistances visuelles pour voir les arrire-plans des blocs de mise en forme CSS,
Dreamweaver attribue automatiquement une couleur darrire-plan distincte chaque bloc. (Dreamweaver
slectionne les couleurs laide dun processus algorithmique. Vous navez aucun moyen dattribuer vousmme les couleurs.) Les couleurs attribues sont clairement diffrentes, le rle est de vous aider distinguer
facilement les diffrents blocs de mise en forme CSS.
Modle dencadr de mise en forme CSS Affiche le modle dencadr (remplissages et marges) du bloc
de mise en forme CSS slectionn.
Affichage des blocs de mise en forme CSS

Vous pouvez activer ou dsactiver les assistances visuelles des blocs de calques CSS en fonction des
besoins.
Affichage des contours des blocs de mise en forme CSS

Choisissez Affichage > Assistances visuelles > Contours en feuille CSS.
Affichage des arrire-plans de blocs de mise en forme CSS

Choisissez Affichage > Assistances visuelles > Arrire-plans de mise en forme CSS.
Affichage des modles dencadr de blocs de mise en forme CSS

Choisissez Affichage > Assistances visuelles > Modle dencadr de mise en forme CSS.
Pour accder 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 lments de blocs de mise en

forme non-CSS
297
Vous pouvez utiliser une feuille de style la conception pour afficher les arrire-plans, les bordures ou le
modle dencadr d'lments qui ne sont pas normalement considrs comme des blocs de mise en forme
CSS. Pour ce faire, vous devez d'abord crer une feuille de style la conception qui affecte l'attribut
display:block l'lment de page appropri.
1. Crez une feuille de style en cascade (CSS) externe. Pour ce faire, choisissez Fichier >
Nouveau, puis slectionnez Page de base dans la colonne Catgorie et CSS dans la
colonne Page de base. Cliquez ensuite sur Crer.
2. Dans la nouvelle feuille de style, crez des rgles qui affectent l'attribut display:block
aux lments de page afficher en tant que blocs de mise en forme CSS.
Si, par exemple, vous souhaitez appliquer une couleur d'arrire-plan aux paragraphes ou
aux lments de liste, vous pouvez crer une feuille de style comprenant les rgles
suivantes :
1
2
3
4
5
6
p{
display:block;
}
li{
display:block;
}
3. Enregistrez le fichier.
4. En mode Cration, ouvrez la page laquelle vous souhaitez associer les nouveaux
styles.
5. Choisissez Format > Styles CSS > Conception.
6. Dans la bote de dialogue Feuilles de style la conception, cliquez sur le bouton plus (+)
situ au-dessus de la zone de texte Afficher la conception uniquement, slectionnez la
feuille de style que vous venez de crer et cliquez sur OK.
7. Cliquez sur OK pour fermer la bote de dialogue Feuilles de style la conception.
La feuille de style est associe votre document. Si vous avez cr une feuille de style
en suivant l'exemple prcdent, tous les paragraphes et lments de liste seront
formats au moyen de l'attribut display:block. Vous pouvez ainsi activer ou
dsactiver les assistances visuelles de bloc de mise en forme CSS pour les paragraphes
et les lments de liste.
Haut de la page
Utilisation d'lments AP
A propos des lments AP dans Dreamweaver

Un lment AP (lment positionnement absolu) est un lment de page HTML (plus prcisment, une
balise div ou toute autre balise) auquel une position absolue est attribue. Les lments AP peuvent
comporter du texte, des images ou tout autre contenu placer au sein d'un document HTML.
Dreamweaver vous permet deffectuer la mise en forme dune page laide dlments AP. Vous pouvez
placer les lments AP devant ou derrire d'autres lments AP, masquer certains d'entre eux et en montrer
d'autres ou encore dplacer les lments AP travers l'cran. Vous pouvez placer une image d'arrire-plan
dans un lment AP, puis placer un deuxime lment AP contenant du texte avec un arrire-plan
transparent devant ce dernier.
Les lments AP sont gnralement des balises div positionnement absolu. (Ce sont les types dlments
AP que Dreamweaver insre par dfaut.) Mais n'oubliez pas que vous pouvez classifier tout lment HTML
(par exemple, une image) en tant qu'lment AP en lui affectant une position absolue. Tous les lments AP
(et pas uniquement les balises AP Div) s'affichent dans le panneau Elments AP.
298
Code HTML pour lments AP Div

Dreamweaver cre des lments AP en utilisant la balise div. Lorsque vous crez un lment AP laide de
loutil de trac AP Div, Dreamweaver insre une balise div dans le document et lui attribue une valeur
didentification (DivAP1 par dfaut pour le premier div que vous tracez, DivAP2 pour le deuxime, etc.). Par la
suite, vous pouvez renommer la balise AP Div votre guise au moyen du panneau Elments AP ou de
linspecteur Proprits. Dreamweaver utilise galement des styles CSS intgrs dans la section head du
document pour positionner la balise AP Div et pour lui affecter ses dimensions exactes.
Ce qui suit est un chantillon de code HTML pour une balise AP Div :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sample AP Div Page</title>
<style type="text/css">
<!-#apDiv1 {
position:absolute;
left:62px;
top:67px;
width:421px;
height:188px;
z-index:1;
}
-->
</style>
</head>
<body>
<div id="apDiv1">
</div>
</body>
</html>
Vous pouvez modifier les proprits des balises AP Div (ou de tout lment AP) de votre page, y compris les
coordonnes x et y, lindex z (galement appel ordre de superposition) et la visibilit.
Insertion dune balise AP Div

Dreamweaver vous permet de crer et de positionner facilement des balises AP Div sur votre page. Vous
pouvez galement crer des balises AP Div imbriques.
Lorsque vous insrez une balise AP Div, Dreamweaver affiche par dfaut sa bordure en mode Cration et
met le bloc en surbrillance lorsque vous passez le pointeur dessus. Vous pouvez dsactiver l'assistance
visuelle qui affiche les contours des balises AP Div (ou de tout lment AP) en dsactivant Contours des
lments AP et Contours en feuille CSS dans le menu Affichage > Assistances visuelles. Vous pouvez
galement activer les arrire-plans et le modle dencadr pour les lments AP en guise d'aide visuelle lors
de la conception.
Une fois une balise AP Div cre, vous pouvez y ajouter du contenu en plaant simplement votre point
dinsertion dessus, puis en ajoutant le contenu comme vous le feriez avec une page.
Traage dune seule balise AP Div ou de plusieurs balises AP Div la suite

1. Dans la catgorie Mise en forme du panneau Insertion, cliquez sur le bouton Tracer AP
Div.
2. Dans la fentre de cration du document, procdez de l'une des manires suivantes :
Faites glisser le pointeur pour dessiner une seule balise AP Div.
Maintenez la touche Ctrl (Windows) ou Commande (Macintosh) enfonce pour
dessiner plusieurs balises AP Div la suite.
Vous pouvez continuer tracer des balises AP Div tant que vous navez pas relch
les touches Ctrl ou Commande.
299
Insertion dune balise AP Div un endroit prcis du document

Placez le point d'insertion dans la fentre de document, puis choisissez Insertion > Objets
de mise en forme > AP Div.
Remarque : la balise associe llment AP Div est place lendroit o vous avez
cliqu dans la fentre de document. Le rendu visuel de la balise AP Div est donc
susceptible d'affecter les autres lments de page (le texte par exemple) qui l'entourent.
Placement du point d'insertion dans une balise AP Div

Cliquez n'importe o l'intrieur des bordures de la balise AP Div.
Le contour de la balise AP Div est mis en surbrillance et la poigne de slection apparat,
mais la balise elle-mme n'est pas slectionne.
Affichage des bordures dune balise AP Div

Choisissez Affichage > Assistances visuelles, puis slectionnez Contours des AP Div ou
Contours en feuille CSS.
Remarque : la slection simultane des deux options a le mme effet.
Masquage des bordures dune balise AP Div

Choisissez Affichage > Assistances visuelles, puis dslectionnez Contours des AP Div et
Contours en feuille CSS.
Utilisation de balises AP Div imbriques

Quand une balise AP Div est imbrique, cela signifie que son code est contenu l'intrieur des balises d'un
autre lment AP Div. Par exemple, le code suivant montre deux balises AP Div qui ne sont pas imbriques,
et deux AP Div qui le sont :
1
2
3
4
5
<div id="apDiv1"></div>
<div id="apDiv3">
</div>
La reprsentation graphique de ces deux groupes de balises AP Div peut se prsenter comme ceci :
Dans le premier groupe de balises div, une div se trouve au dessus de l'autre dans la page. Dans le
deuxime groupe, la balise div apDiv4 se trouve effectivement l'intrieur de la balise div apDiv3. (Vous
300
pouvez modifier l'ordre de superposition des AP Div dans le panneau Elments AP.)
L'imbrication est souvent utilise pour regrouper des balises AP Div. Une balise AP Div imbrique se dplace
avec sa balise AP Div parent et peut tre configure pour hriter de sa visibilit.
Vous pouvez activer l'option Imbrication si vous voulez que les AP Div que vous dessinez l'intrieur
d'autres AP Div soient automatiquement imbriques. Pour crer une AP Div l'intrieur ou par dessus une
autre AP Div, vous devez aussi dslectionner l'option Empcher les chevauchements.
Trac d'une AP Div imbrique

1. Assurez-vous que l'option Empcher les chevauchements est dslectionne dans le
panneau Elments AP (Fentre > Elments AP).
2. Dans la catgorie Mise en forme du panneau Insertion, cliquez sur le bouton Tracer AP
Div.
3. Dans la fentre de cration du document, tracez une balise AP Div l'intrieur d'une AP
Div existante en faisant glisser la souris.
Si l'option Imbrication est dsactive dans les prfrences des lments AP, maintenez
la touche Alt (Windows) ou Option (Macintosh) enfonce et faites glisser une AP Div
pour l'imbriquer dans une AP Div existante.
Les AP Div imbriques peuvent s'afficher diffremment suivant les navigateurs.
Lorsque vous crez des AP Div imbriques, contrlez rgulirement leur affichage
dans diffrents navigateurs au cours du processus de cration.
Insertion d'une AP Div imbrique

1. Assurez-vous que l'option Empcher les chevauchements est dslectionne.
2. Placez le point d'insertion l'intrieur d'une AP Div existante dans la fentre de cration
du document, puis choisissez Insertion > Objets de mise en forme > AP Div.
Imbrication des balises AP Div automatiquement lorsque vous tracez une AP Div
l'intrieur d'une autre AP Div
Slectionnez l'option Imbrication dans les prfrences des lments AP.
Affichage ou dfinition des prfrences des lments AP

Utilisez la catgorie Elments AP de la bote de dialogue Prfrences pour dfinir les paramtres par dfaut
des nouveaux lments AP crs.
(Macintosh).
2. Slectionnez des lments AP dans la liste Catgorie situe sur la gauche, dfinissez les
prfrences suivantes, puis cliquez sur OK.
Visibilit Dtermine si les lments AP sont visibles par dfaut. Les options sont par
dfaut, hriter, visible et masqu.
Largeur et hauteur Indiquez une largeur et une hauteur par dfaut (en pixels) pour les
lments AP que vous crez laide du menu Insertion > Objets de mise en forme > AP
Div.
301
Couleur darrire-plan Spcifie une couleur d'arrire-plan par dfaut. Slectionnez une
couleur l'aide du slecteur de couleur.
Image d'arrire-plan Spcifie une image d'arrire-plan par dfaut. Cliquez sur Parcourir
pour trouver le fichier de l'image sur votre ordinateur.
Imbrication : Imbriquer en cas de cration dans une AP Div Indique si une AP Div
que vous dessinez partir d'un point situ dans les limites d'une AP Div existante doit
tre une AP Div imbrique. Maintenez la touche Alt (Windows) ou Option (Macintosh)
enfonce pour modifier temporairement ce paramtre lorsque vous tracez une AP Div.
Affichage ou dfinition des proprits pour un seul lment AP

Lorsque vous slectionnez un lment AP, linspecteur Proprits affiche les proprits de cet lment.
1. Slectionnez un lment AP.
d'agrandissement situe dans le coin infrieur droit (si l'inspecteur est affich en mode
rduit) pour visualiser l'ensemble des proprits.
Elment CSS-P Spcifie un identificateur pour l'lment AP slectionn. Cet ID identifie

l'lment AP dans le panneau Elments AP et dans le code JavaScript.
Seuls les caractres alphanumriques sont accepts ; n'utilisez aucun caractre spcial
comme les espaces, les traits d'union, les barres obliques ou les points. Chaque lment
AP doit avoir un ID unique.
Remarque : linspecteur Proprits CSS-P prsente les mmes options pour les
lments positionnement relatif.
G et H (gauche et haut) Indiquez la position du coin suprieur gauche de llment AP

par rapport au coin suprieur gauche de la page, ou de llment AP parent sil est
imbriqu.
L et H Indiquez la largeur et la hauteur de llment AP.
Remarque : si le contenu dun lment AP dpasse la taille indique, le bord infrieur
de cet lment (tel quil apparat en mode Cration dans Dreamweaver) stire en
consquence. (Le bord infrieur ne stire pas lorsque llment AP apparat dans un
navigateur, sauf si la proprit Dbordement est dfinie sur Visible).
L et H L'unit par dfaut de la position et de la taille est le pixel (px). Vous pouvez
galement choisir les units suivantes : pc (picas), pt (points), in (pouces), mm
(millimtres), cm (centimtres) ou% (pourcentage de la valeur quivalente de l'lment
AP parent). Les abrviations doivent suivre la valeur sans espace : par exemple, 3mm.
Index Z Dtermine lindex z (ou ordre de superposition) de llment AP.

Dans un navigateur, les lments AP portant les valeurs les plus leves se superposent
aux lments AP portant les valeurs moins leves. Les valeurs peuvent tre positives
ou ngatives. Il est plus facile de modifier l'ordre de superposition des lments AP
302
l'aide du panneau Elments AP qu'en saisissant des valeurs d'index z spcifiques.
Vis Indique si l'lment AP est initialement visible ou non. Faites votre choix parmi les
options suivantes :
Aucune proprit de visibilit n'est dfinie par dfaut. Lorsque aucune visibilit n'est
prcise, la plupart des navigateurs choisissent Hriter.
Loption Hriter utilise la proprit de visibilit de lobjet parent de llment AP.
Loption Visible affiche le contenu de llment AP, quelle que soit la valeur du
parent.
Loption Masqu dissimule le contenu de llment AP, quelle que soit la valeur du
parent.
Utilisez un langage de script, tel que JavaScript, pour contrler la proprit de
visibilit et afficher le contenu des lments AP de faon dynamique.
Image ar-pl Spcifie une image darrire-plan pour llment AP.

Cliquez sur licne de dossier pour parcourir larborescence et slectionner un fichier
dimage.
Couleur ar-pl Spcifie une couleur darrire-plan pour llment AP.

Laissez cette option vide pour spcifier un arrire-plan transparent.
Classe Indique la classe CSS utilise pour crer llment AP.
Dbordement Contrle la manire dont les lments AP apparaissent dans un

navigateur lorsque le contenu dpasse la taille spcifie de llment AP.
Visible indique que le contenu supplmentaire apparatra dans l'lment AP ; en fait,
l'lment AP s'agrandit proportionnellement. Masqu signifie que le contenu
supplmentaire ne sera pas affich dans le navigateur. Dfilement indique que le
navigateur devra ajouter des barres de dfilement dans l'lment AP, qu'elles soient
ncessaires ou non. Auto entrane l'affichage des barres de dfilement de l'lment AP
dans le navigateur uniquement lorsque cela est ncessaire (c'est--dire lorsque le
contenu de l'lment AP dpasse ses limites).
Remarque : loption Dbordement nest pas prise en charge de la mme manire sur
tous les navigateurs.
Dtourage Dfinit la zone visible de llment AP.

Indiquez les coordonnes gauche, haut, droite et bas pour dfinir un rectangle dans le
champ des coordonnes de l'lment AP (en partant du coin suprieur gauche de
l'lment AP). L'lment AP est dtour afin que seul le rectangle spcifi soit
visible. Par exemple, pour rendre le contenu d'un lment AP invisible l'exception d'un
rectangle visible d'une largeur de 50 pixels et d'une hauteur de 75 pixels dans le coin
suprieur gauche de l'lment AP, dfinissez G sur 0, S sur 0, D sur 50 et B sur 75.
Remarque : bien que le mode CSS utilise des termes diffrents pour le dtourage,
Dreamweaver interprte le dtourage de la mme manire que la plupart des
navigateurs.
4. Si vous avez tap une valeur dans une zone de texte, appuyez sur Tab ou Entre
(Windows) ou Retour (Macintosh) pour l'appliquer.
Affichage ou dfinition des proprits pour plusieurs lments AP

Lorsque vous slectionnez plusieurs lments AP, linspecteur Proprits affiche les proprits du texte et un
sous-ensemble de proprits dlment AP standard, ce qui vous permet de modifier plusieurs lments AP
simultanment.
303
Slection de plusieurs lments AP

Slectionnez les lments AP tout en maintenant la touche Maj enfonce.
Affichage et dfinition des proprits pour plusieurs lments AP

1. Slectionnez plusieurs lments AP.
d'agrandissement situe dans le coin infrieur droit (si l'inspecteur est affich en mode
rduit) pour visualiser l'ensemble des proprits.
3. Dfinissez les proprits suivantes pour plusieurs lments AP :
G et H (gauche et haut) Indiquez la position du coin suprieur gauche des lments AP

par rapport au coin suprieur gauche de la page, ou de llment AP parent sils sont
imbriqus.
L et H Indiquez la largeur et la hauteur des lments AP.
Remarque : si le contenu dun lment AP dpasse la taille indique, le bord infrieur
de cet lment (tel quil apparat en mode Cration dans Dreamweaver) stire en
consquence. (Le bord infrieur ne stire pas lorsque llment AP apparat dans un
navigateur, sauf si la proprit Dbordement est dfinie sur Visible).
L'unit par dfaut de la position et de la taille est le pixel (px). Vous pouvez galement
choisir les units suivantes : pc (picas), pt (points), in (pouces), mm (millimtres), cm
(centimtres) ou% (pourcentage de la valeur quivalente de l'lment AP parent). Les
abrviations doivent suivre la valeur sans espace : par exemple, 3mm.
Vis Indique si les lments AP sont initialement visibles ou non. Faites votre choix parmi
les options suivantes :
Aucune proprit de visibilit n'est dfinie par dfaut. Lorsque aucune visibilit n'est
prcise, la plupart des navigateurs choisissent Hriter.
Loption Hriter utilise la proprit de visibilit de lobjet parent des lments AP.
Loption Visible affiche le contenu des lments AP, quelle que soit la valeur du
parent.
Loption Masqu dissimule le contenu de llment AP, quelle que soit la valeur du
parent.
Utilisez un langage de script, tel que JavaScript, pour contrler la proprit de
visibilit et afficher le contenu des lments AP de faon dynamique.
Balise Indique la balise HTML utilise pour dfinir les lments AP.
Image ar-pl Spcifie une image darrire-plan pour les lments AP.
Cliquez sur licne de dossier pour parcourir larborescence et slectionner un fichier
dimage.
Couleur ar-pl Spcifie une couleur d'arrire-plan pour les lments AP. Laissez cette
option vide pour spcifier un arrire-plan transparent.
4. Si vous avez tap une valeur dans une zone de texte, appuyez sur Tab ou Entre
304
(Windows) ou Retour (Macintosh) pour l'appliquer.
Prsentation du panneau Elments AP

Le panneau Elments AP (Fentre > Elments AP) vous permet de grer les lments AP de votre
document. Utilisez le panneau Elments AP pour empcher les lments AP de se chevaucher, pour en
modifier la visibilit, pour les imbriquer ou les superposer et pour en slectionner un ou plusieurs.
Remarque : dans Dreamweaver, un lment AP est un lment de page HTML (plus prcisment, une
balise div ou toute autre balise) auquel une position absolue est attribue. Le panneau Elments AP
naffiche pas les lments positionnement relatif.
Les lments AP sont affichs sous la forme d'une liste de noms, dans l'ordre de l'index z ; le premier
lment AP cr (dot d'un index z de 1) apparat par dfaut en bas de la liste et le dernier lment AP cr
apparat en haut de la liste. Vous pouvez toutefois modifier l'index z d'un lment AP en changeant sa place
dans l'ordre de superposition. Par exemple, si vous crez huit lments AP et souhaitez dplacer le
quatrime lment AP en haut de la liste, vous pouvez lui affecter un index z suprieur celui des autres
lments AP.
Slection dlments AP
Vous pouvez slectionner un ou plusieurs lments AP pour les manipuler ou en modifier les proprits.
Slection d'un lment AP dans le panneau Elments AP

Dans le panneau Elments AP (Fentre > Elments AP), cliquez sur le nom de l'lment
AP.
Slection d'un lment AP dans la fentre de document

Cliquez sur la poigne de slection d'un lment AP.
Si la poigne nest pas visible, cliquez nimporte o dans llment AP pour la faire
apparatre.
Cliquez sur la bordure dun lment AP.
Cliquez lintrieur dun lment AP en appuyant sur les touches Ctrl+Maj (Windows)
ou Commande+Maj (Macintosh).
Pour slectionner le contenu d'un lment AP, cliquez l'intrieur de celui-ci et
appuyez sur les touches Ctrl+A (Windows) ou Commande+A (Macintosh). Appuyez
nouveau sur Ctrl+A ou Commande+A pour slectionner l'lment AP.
Cliquez lintrieur dun lment AP et slectionnez sa balise dans le slecteur de
balises.
Slection de plusieurs lments AP

Dans le panneau Elments AP (Fentre > Elments AP), appuyez sur la touche Maj
tout en cliquant sur le nom de deux lments AP ou plus.
Dans la fentre de document, appuyez sur la touche Maj tout en cliquant lintrieur
dun ou de plusieurs lments AP ou sur leur bordure.
305
Modification de lordre de superposition des lments AP

Utilisez l'inspecteur Proprits ou le panneau Elments AP pour modifier l'ordre de superposition des
lments AP. L'lment AP situ en haut de la liste du panneau Calques Elments AP se trouve au premier
rang de l'ordre de superposition et apparat avant les autres lments AP.
En code HTML, l'ordre de superposition, ou index z, des lments AP dtermine l'ordre dans lequel ils sont
dessins dans un navigateur. Plus l'index z d'un lment AP est lev, et plus sa position dans l'ordre de
superposition est leve. (Par exemple, un lment avec un index z de 4 apparatra au-dessus d'un lment
avec un index z de 3. 1 est toujours le numro le plus bas dans l'ordre d'empilement.) Vous pouvez modifier
l'index z de chaque lment AP l'aide du panneau Elments AP ou de l'inspecteur Proprits.
Modification de l'ordre de superposition des lments AP l'aide du panneau

Elments AP
1. Slectionnez Fentre > Elments AP pour ouvrir le panneau Elments AP.
2. Double-cliquez sur le numro d'index z en regard de l'lment AP dont vous souhaitez
modifier l'index z.
3. Modifiez le numro puis appuyez sur la touche Retour/Entre.
Tapez une valeur suprieure afin de dplacer l'lment AP vers le haut dans l'ordre
de superposition.
Tapez une valeur infrieure afin de dplacer llment AP vers le bas dans lordre de
superposition.
Modification de l'ordre de superposition des lments AP l'aide de l'inspecteur

Proprits
1. Choisissez Fentre > Elments AP pour ouvrir le panneau Elments AP et visualiser
l'ordre de superposition en cours.
2. Dans le panneau Elments AP ou dans la fentre de document, slectionnez l'lment
AP dont vous souhaitez modifier l'index z.
3. Dans l'inspecteur Proprits (Fentre > Proprits), tapez un nombre dans la zone de
texte Index Z.
Tapez une valeur suprieure afin de dplacer l'lment AP vers le haut dans l'ordre
de superposition.
Tapez une valeur infrieure afin de dplacer llment AP vers le bas dans lordre de
superposition.
Affichage et masquage dlments AP

Lorsque vous travaillez sur votre document, vous pouvez afficher ou masquer les lments AP
manuellement, laide du panneau Elments AP, pour voir comment se prsentera la page dans diffrentes
situations.
Remarque : llment AP slectionn devient toujours visible et apparat devant les autres lments AP.
Modification de la visibilit d'un lment AP

1. Slectionnez Fentre > Elments AP pour ouvrir le panneau Elments AP.
306
2. Cliquez dans la colonne de licne en forme dil pour changer la visibilit dun lment
AP.
Un il ouvert signifie que llment AP est visible.
Un il ferm signifie que llment AP est invisible.
Si l'icne de l'il n'apparat pas, l'lment AP hrite de la visibilit de son parent
(lorsque les lments AP ne sont pas imbriqus, le parent correspond au corps du
document, qui est toujours visible).
Quand la visibilit nest pas dfinie, aucune icne en forme dil nest affiche (ce
qui se traduit dans linspecteur Proprits par loption Visibilit par dfaut).
Modification de la visibilit de tous les lments AP la fois

Dans le panneau Elments AP (Fentre > Calques), cliquez sur l'icne en forme d'il en
haut de la colonne.
Remarque : cette procdure permet de dfinir la visibilit ou la non-visibilit de tous les
lments AP, mais elle ne leur permet pas d'hriter d'attributs
Redimensionnement dlments AP
Vous pouvez redimensionner un seul ou plusieurs lments AP la fois pour quils aient tous la mme
largeur et la mme hauteur.
Si loption Empcher le chevauchement est active, vous ne pourrez pas redimensionner un lment AP sil
doit pour cela en chevaucher un autre.
Redimensionnement d'un lment AP

1. En mode Cration, slectionnez un lment AP.
2. Pour redimensionner l'lment AP, procdez de l'une des manires suivantes :
Pour redimensionner l'lment AP en le faisant glisser, faites glisser l'une de ses
poignes.
Pour redimensionner llment AP par incrments dun pixel, maintenez la touche
Ctrl (Windows) ou Option (Macintosh) enfonce tout en utilisant les touches flches.
Les flches dplacent les bords droit et infrieur de llment AP ; cette technique ne
permet pas de redimensionner llment AP partir des bords suprieur et gauche.
Pour redimensionner llment en alignant sur la grille, appuyez sur Maj+Ctrl+flche
(Windows) ou Maj+Option+flche (Macintosh).
Dans linspecteur Proprits (Fentre > Proprits), tapez les valeurs de largeur (L)
et de hauteur (H).
Le redimensionnement d'un lment AP en modifie la largeur et la hauteur. Cette
action ne dfinit pas la partie visible du contenu de l'lment AP. Vous pouvez dfinir
la zone visible d'un lment AP dans les prfrences.
Redimensionnement de plusieurs lments AP la fois

1. En mode Cration, slectionnez au moins deux lments AP.
Choisissez Modifier > Rorganiser > Mme largeur ou Modifier > Rorganiser >
Mme hauteur.
Les premiers lments AP slectionns prendront la largeur ou la hauteur du dernier
307
slectionn.
Dans linspecteur Proprits (Fentre > Proprits), sous Plusieurs lments CSS-P,
tapez les valeurs de largeur et de hauteur.
Ces valeurs sont appliques tous les lments AP slectionns.
Dplacement dlments AP
Vous pouvez dplacer des lments AP en mode Cration de la mme manire que des objets dans la
plupart des applications graphiques de base.
Si loption Empcher le chevauchement est active, vous ne pourrez pas dplacer un lment AP sil doit
pour cela en chevaucher un autre.
1. En mode Cration, slectionnez un ou plusieurs lments AP.
Pour dplacer des lments AP en les faisant glisser, slectionnez-les et faites
glisser la poigne de slection du dernier lment AP slectionn (en surbrillance
noire).
Pour dplacer llment par incrments dun pixel, utilisez les flches du clavier.
Maintenez la touche Maj enfonce tout en appuyant sur les flches pour dplacer
llment AP par incrments dalignement sur la grille.
Alignement dlments AP
Utilisez les commandes dalignement pour aligner un ou plusieurs lments AP sur lun des bords du dernier
lment AP slectionn.
Lors de l'alignement, les lments AP enfants qui ne sont pas slectionns seront dplacs en mme temps
que leur parent, si celui-ci est slectionn et dplac. Pour viter ce dplacement, n'utilisez pas d'lments
AP imbriqus.
1. En mode Cration, slectionnez un lment AP.
2. Choisissez Modifier > Rorganiser, puis slectionnez une option d'alignement.
Par exemple, si vous slectionnez Haut, tous les lments AP se dplacent de faon
telle que leurs bordures suprieures sont au mme niveau que celle du dernier lment
AP slectionn (en surbrillance noire).
Conversion des lments AP en tableau

Au lieu d'utiliser des tableaux pour crer une mise en forme, certains concepteurs de sites Web prfrent
utiliser des lments AP. Dreamweaver vous permet de crer votre mise en forme laide dlments AP
puis, si vous le souhaitez, de les convertir en tableaux. Par exemple, il peut tre ncessaire de convertir les
lments AP en tableaux pour pouvoir prendre en charge les navigateurs antrieurs la version 4.0. La
conversion des lments AP en tableaux est toutefois dconseille parce quelle peut gnrer des tableaux
contenant un grand nombre de cellules vides, sans parler les problmes de code plthorique. Si vous avez
besoin dune mise en page utilisant des tableaux, il est prfrable de la crer laide des outils standard de
mise en forme de tableaux disponibles dans Dreamweaver.
Vous pouvez aussi passer des lments AP aux tableaux, et vice versa, pour peaufiner la mise en forme et
optimiser la prsentation de la page. Toutefois, lorsque vous reconvertissez un tableau en lments AP,
Dreamweaver convertit le tableau en balises AP Div, quel que soit le type de llment AP qui se trouvait
dans la page avant dtre converti en tableau. Vous ne pouvez pas convertir seulement un tableau ou un
lment AP figurant sur une page : il nest possible de convertir des lments AP en tableaux et des tableaux
en balises AP Div que pour lintgralit dune page.
308
Remarque : il est impossible de convertir des lments AP en tableaux, ou des tableaux en AP Div, dans un
modle de document ou dans un document auquel un modle a t appliqu. Dans ce cas, vous devez crer
votre mise en forme dans un document sans modle et le convertir avant de l'enregistrer comme modle.
Conversion dlments AP en tableaux

Crez votre mise en forme laide dlments AP, puis convertissez ceux-ci en tableaux afin que votre mise
en forme puisse safficher dans les navigateurs les moins rcents.
Avant de convertir vos lments AP en tableaux, assurez-vous qu'ils ne se chevauchent pas. Veillez en outre
bien tre en mode Standard (Affichage > Mode Tableau > Mode Standard).
Conversion dlments AP en tableau

1. Slectionnez Modifier > Convertir > AP Div en tableau.
La plus prcise Cre une cellule de tableau pour chaque lment AP et ajoute les
cellules ncessaires pour prserver lespace entre les lments AP.
La plus petite : Rduire les cellules vides Indique que les bords des lments AP
doivent tre aligns sils sont positionns dans la limite du nombre de pixels dfini.
Si vous choisissez cette option, le tableau que vous obtiendrez aura moins de lignes et
de colonnes vides, mais ne correspondra pas forcment prcisment votre mise en
forme.
Utiliser les GIF transparents Remplit la dernire ligne du tableau d'images GIF
transparentes. Slectionner cette option permet d'tre sr que le tableau s'affichera avec
les mmes largeurs de colonne dans tous les navigateurs.
Lorsque cette option est active, vous ne pouvez pas modifier le tableau obtenu en
faisant glisser ses colonnes. Lorsque cette option est dsactive, le tableau obtenu ne
contient pas les GIF transparents, mais les largeurs des colonnes peuvent varier suivant
le navigateur.
Centrer sur la page Centre le tableau obtenu dans la page. Si cette option est
dsactive, le tableau commence sur le bord gauche de la page.
Conversion de tableaux en AP Div

1. Slectionnez Modifier > Convertir > Tableaux en AP Div.
Empcher le chevauchement des lments AP Limite la position des lments AP

lorsquils sont crs, dplacs et redimensionns, afin dviter tout chevauchement.
Afficher le panneau Elments AP Affiche le panneau Elments AP.
Afficher la grille et Aligner sur la grille Permettent dutiliser une grille pour faciliter le
positionnement des lments AP.
Les tableaux sont convertis en AP Div. Les cellules vides ne sont pas converties en
lments AP, sauf si elles possdent une couleur d'arrire-plan.
309
Remarque : les lments de la page qui se trouvaient en dehors des tableaux sont
galement placs dans les balises AP Div.
Empcher le chevauchement des lments AP

Les cellules dun tableau ne peuvent pas se chevaucher. Dreamweaver ne peut donc pas crer de tableau
partir dlments AP qui se chevauchent. Si vous envisagez de convertir les lments AP dun document en
tableaux, activez loption Empcher le chevauchement pour restreindre le dplacement et le positionnement
des lments AP et, ainsi, viter leur chevauchement.
Si cette option est active, aucun lment AP ne peut tre cr, dplac ou redimensionn au-dessus d'un
lment AP existant, ni tre imbriqu dans ce dernier. Si vous activez cette option aprs avoir cr des
lments AP se chevauchant, faites glisser chaque lment AP concern de faon l'loigner des autres
lments AP. Si des lments AP se chevauchent sur la page, Dreamweaver ne les corrige pas
automatiquement sous prtexte que vous activez loption Empcher le chevauchement des lments AP.
Si cette option et l'option d'alignement sont actives, aucun lment AP ne sera align sur la grille si cela doit
causer un chevauchement de deux lments AP. Dans ce cas, l'lment AP sera align sur le bord de
l'lment AP le plus proche.
Remarque : certaines oprations autorisent le chevauchement des lments AP, mme lorsque l'option
Empcher le chevauchement est active. Si vous insrez un lment AP en utilisant le menu Insertion, si
vous entrez des valeurs dans l'inspecteur Proprits ou si vous repositionnez des lments AP en modifiant
le code source HTML, les lments AP risquent de se chevaucher ou de s'imbriquer lorsque cette option est
active. En cas de chevauchement, faites glisser les lments AP qui se chevauchent en mode Cration pour
les sparer.
Dans le panneau Elments AP (Fentre > Elments AP), activez loption Empcher le
chevauchement.
Dans la fentre de document, cliquez sur Modifier > Rorganiser > Empcher le
chevauchement des lments AP.
310

Rendu de dgrads dans les navigateurs Web
Permutation dimages et de dgrads darrire-plan
Le panneau CSS Designer vous permet dappliquer des dgrads larrire-plan de vos sites Web. La proprit de dgrad est disponible dans la
catgorie darrire-plan.
Proprit dgrad
Cliquez sur
ct de la proprit de dgrad afin douvrir le panneau dgrads. Ce panneau vous permet :
De choisir les couleurs dans diffrents modles colorimtriques (RVBa, hexadcimale ou HSLA). Ensuite, denregistrer
diffrentes combinaisons de couleurs sous la forme de nuances de couleur.
Pour rtablir la couleur dorigine dune nouvelle couleur, cliquez sur la couleur dorigine (K).
Pour modifier lordre des nuances, faites glisser chaque nuance vers la position souhaite.
Pour supprimer une nuance de couleur, faites glisser la nuance hors du panneau.
Dutiliser des taquets de couleurs pour crer des dgrads complexes. Cliquez nimporte o entre les taquets de couleur par
dfaut pour crer un taquet de couleur. Pour supprimer un taquet de couleur, faites-le glisser hors du panneau.
De spcifier langle dun dgrad linaire.
Pour rpter le motif, slectionnez Rpt.
Denregistrer des dgrads personnaliss sous forme de nuances.
311
Bote de dialogue Dgrad

A. Taquet de couleur B. Nuance de dgrad C. Ajouter une nuance de dgrad D. Rptition linaire E. Modles colorimtriques F. Pipette G.
Curseur de couleur H. Curseur de luminosit I. Curseur dopacit J. Ajouter une nuance de couleur K. Nuance de couleur L. Couleur dorigine M.
Couleur slectionne N. Angle du dgrad linaire
Remarque : loutil Pipette est uniquement disponible dans Dreamweaver 13.1 et les versions ultrieures.
Examinons le code suivant :

background-image: linear-gradient(57deg,rgba(255,255,255,1.00) 0%,rgba(21,8,8,1.00) 46.63%,rgba(255,0,0,1.00) 100%)
57deg : indique langle du dgrad linaire

rgba(255, 255, 255, 1.00) : couleur du premier taquet de couleur
0% : indique le taquet de couleur
Remarque : Dreamweaver ne prend en charge que les valeurs % pour les taquets de couleur. Si vous utilisez dautres valeurs, comme px ou
em, Dreamweaver les lit comme zro . En outre, Dreamweaver ne prend pas en charge les couleurs CSS. Si vous spcifiez ces couleurs dans
le code, elles sont lues comme zro .
Haut de la page
Rendu de dgrads dans les navigateurs Web

Si vous utilisez les dgrads comme arrire-plan, vous pouvez configurer Dreamweaver de faon rendre correctement les dgrads dans
diffrents navigateurs Web. Dreamweaver ajoute les prfixes fournisseur appropris au code, de faon permettre aux navigateurs Web dafficher
les dgrads de faon adquate.
Dreamweaver peut crire les prfixes fournisseur suivants avec le format w3c :
Webkit
Mozilla
Opera
Affichage en direct Dreamweaver (ancien format de Webkit)
Par dfaut, Dreamweaver crit les prfixes fournisseur pour Webkit et laffichage en direct Dreamweaver. Vous pouvez choisir les autres
fournisseurs dsirs dans la bote de dialogue Prfrences (Prfrences > Styles CSS).
Remarque : pour les ombres de zone, les prfixes Webkit et w3c sont toujours gnrs, que vous les ayez ou non slectionns dans la section
Prfrences.
312
Les modifications apportes aux dgrads sont galement rpercutes dans les syntaxes spcifiques aux fournisseurs. Si vous ouvrez un fichier
existant qui contient des syntaxes spcifiques un fournisseur dans Dreamweaver CC, veillez choisir le prfixe fournisseur requis dans les
Prfrences. En effet, par dfaut, Dreamweaver ne met jour le code li Webkit et laffichage en direct Dreamweaver que lorsque vous
utilisez ou modifiez des dgrads. Par consquent, les autres syntaxes spcifiques un fournisseur dans votre code ne sont pas mises jour.
Haut de la page
Permutation dimages et de dgrads darrire-plan

Vous pouvez modifier en un seul clic lordre (dapparition dans le code) des images et des dgrads darrire-plan.
Cliquez sur
en regard de la proprit URL ou Dgrad dans CSS Designer.
Permuter larrire-plan
Remarque : Dreamweaver CC contient une mise en uvre de base de la fonction de permutation darrire-plan. Lorsque vous utilisez plusieurs
valeurs ou images, il se peut que la permutation ne fonctionne pas comme prvu. En outre, supposons que vous ayez appliqu une image, une
deuxime image, puis un dgrad larrire-plan. La permutation du dgrad produit lordre suivant : dgrad, deuxime image, premire image.
313

Vous pouvez crer, modifier et supprimer des transitions CSS3 l'aide du panneau Transitions CSS.
Pour crer une transition CSS3, crez une classe de transition en donnant des valeurs aux proprits de transition de l'lment. Si vous
slectionnez un lment avant de crer une classe de transition, la classe de transition est automatiquement applique l'lment slectionn.
Vous pouvez ajouter le code CSS gnr au document actuel ou spcifier un fichier CSS externe.
En haut
Crez et appliquez un effet de transition CSS3
1. (Facultatif) Slectionnez un lment (paragraphe, en-tte, et ainsi de suite) laquelle vous souhaitez appliquer la transition.
Vous pouvez galement crer une transition et l'appliquer ultrieurement un lment.
2. Choisissez Fentre > Transitions CSS.
3. Cliquez sur .
4. Crez une classe de transition l'aide des options de la bote de dialogue Nouvelle transition.
Rgle cible Donnez un nom au slecteur. Il peut s'agir d'un slecteur CSS comme une balise, une rgle, un ID ou un
slecteur composite. Par exemple, si vous souhaitez ajouter des effets de transition toutes les balises <hr>, entrez hr.
Transition sur Slectionnez l'tat auquel vous voulez appliquer la transition. Par exemple, si vous voulez appliquer la
transition lorsque le pointeur de la souris est plac au-dessus de l'lment, utilisez l'option survol.
Utiliser la mme transition pour toutes les proprits Activez cette option si vous voulez spcifier une dure, un dlai et
un minutage identiques pour toutes les proprits CSS auxquelles vous voulez faire subir la transition.
Utiliser une transition diffrente pour chaque proprit Activez cette option si vous voulez spcifier une dure, un dlai et
un minutage diffrents pour chaque proprit CSS laquelle vous voulez faire subir la transition.
Proprit Cliquez sur
pour ajouter une proprit CSS laquelle faire subir une transition.
Dure Entrez une dure en secondes (s) ou en millisecondes (ms) pour l'effet de transition.
Dlai Le temps, en secondes ou les millisecondes, qui doit s'couer avant le dbut de l'effet de transition.
Minutage Slectionnez un style de transition parmi les options disponibles.

314
Valeur de fin Valeur de fin de l'effet de transition. Par exemple, si vous souhaitez que la taille de police augmente de 40 px
la fin de l'effet de transition, spcifiez 40 px pour la proprit taille de police.
Choisissez o crer la transition Pour incorporer le style dans le document actif, choisissez Seulement ce document.
Si vous souhaitez crer une feuille de style externe pour le code CSS3, slectionnez Nouveau fichier de feuille de
style. Lorsque vous cliquez sur Crer la transition, vous tes invit indiquer l'emplacement d'enregistrement du nouveau
fichier CSS. Lorsque la feuille de style a t cre, elle est ajoute au menu Choisissez o crer la transition.
En haut
Modification des effets de transition CSS3
1. Dans le panneau Transitions CSS, slectionnez l'effet de transition que vous voulez modifier.
2. Cliquez sur
3. Utilisez la bote de dialogue Modifier la transition pour modifier les valeurs prcdemment entres pour la transition.
En haut
Dsactivation de la forme courte CSS pour les transitions
2. Slectionnez Styles CSS.
3. Dans Utiliser Forme courte pour, dslectionnez Transition.
Mots-cls : nouveauts, dreamweaver, HTML5, CSS, transitions, application web, package web, effets, CSS3, mise en forme de grille fluide,
Phonegap, nouvelles fonctionnalits, jquery, business catalyst, polices web, amliorations ftp, optimisation PSD, dreamweaver cs6
315
Utilisation d'exemples de feuilles de style Dreamweaver

Dreamweaver est fourni avec des exemples de feuilles de style que vous pouvez appliquer vos pages ou que vous pouvez utiliser comme points
de dpart pour crer vos propres styles.
1. Ouvrez le panneau Styles CSS en procdant de l'une des manires suivantes :
Appuyez sur les touches Maj+F11.
2. Dans le panneau Styles CSS, cliquez sur le bouton Attacher une feuille de style. (Dans le coin infrieur droit du panneau.)
3. Dans la bote de dialogue Ajouter une feuille de style externe, cliquez sur Exemples de feuilles de style.
4. Dans la bote de dialogue Exemples de feuilles de style, slectionnez une feuille de style dans la liste droulante.
Lorsque vous slectionnez des feuilles de style dans la zone de liste, le formatage du texte et des couleurs s'affiche dans le
panneau d'aperu.
5. Cliquez sur le bouton Aperu pour appliquer la feuille de style et vrifier que le style de votre choix est bien appliqu la page
active.
Si les styles appliqus ne sont pas ceux que vous escomptiez, slectionnez une autre feuille de style dans la liste et cliquez
sur le bouton Aperu pour visualiser les styles correspondants.
6. Par dfaut, Dreamweaver enregistre la feuille de style dans un dossier nomm CSS au niveau juste en dessous de la racine
du site dfini pour votre page. Si ce dossier n'existe pas, Dreamweaver le cre. 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 rgles correspondent vos critres, cliquez sur OK.
316
Panneau Styles CSS

Panneau Styles CSS en mode Actuel
Panneau Styles CSS en mode Tous
Boutons et vues du panneau Styles CSS
Ouverture du panneau Styles CSS
Le panneau Styles CSS vous permet de suivre les rgles CSS et les proprits qui affectent un lment de page slectionn (mode Actuel), ou
l'ensemble des rgles et des proprits qui sont disponibles pour le document (mode Tous). Un bouton bascule plac sur la partie suprieure du
panneau vous permet de passer d'un mode l'autre. Le panneau Styles CSS vous permet de modifier les proprits CSS dans les deux modes.
Haut de la page
Panneau Styles CSS en mode Actuel
En mode Actuel, le panneau Styles CSS prsente trois volets : un volet Rsum de la slection qui prsente les proprits CSS de la slection en
cours dans le document, un volet Rgles qui prcise l'emplacement des proprits slectionnes (ou une cascade de rgles pour la balise
slectionne, selon votre slection), et un volet Proprits qui vous permet de modifier les proprits CSS de la rgle appliques la slection.
Vous pouvez redimensionner l'un quelconque des volets en faisant glisser les cadres entre les volets et redimensionner les colonnes en faisant
glisser les sparateurs.
Le volet Rsum de la slection rcapitule les proprits CSS de l'lment slectionn dans le document actif et leurs valeurs. Ce rsum dcrit
les proprits de toutes les rgles s'appliquant directement la slection. Seules les proprits dfinies apparaissent.
Par exemple, les rgles suivantes crent un style de classe et un style de balise (dans ce cas un paragraphe) :
1
2
3
4
5
6
7
8
.foo{
color: green;
font-family: 'Arial';
}
p{
font-family: 'serif';
font-size: 12px;
}
317
Si vous slectionnez le texte d'un paragraphe de style de classe .foo dans la fentre du document, le volet Rsum de la slection affiche les
proprits concernes par les deux rgles, puisque ces deux rgles s'appliquent la slection. Dans ce cas, le volet Rsum de la slection
affiche la liste des proprits suivantes :
1
2
3
font-size: 12px
font-family: 'Arial'
color: green
Le volet Rsum de la slection classe les proprits par ordre croissant de spcificit. Dans l'exemple prcdent, le style de balise dfinit la taille
de la police et le style de classe, la famille et la couleur de la police. (La famille de police dfinie par la classe est prioritaire sur celle dfinie par le
style de balise car la spcificit des slecteurs de classe est suprieure celle des slecteurs de balise. Pour plus d'informations sur les
spcificits CSS, voir www.w3.org/TR/CSS2/cascade.html.)
Le volet Rgles dispose de deux vues (A propos ou Rgles) selon votre slection. Dans la vue A propos (par dfaut), le volet prsente le nom de
la rgle dfinissant la proprit CSS slectionne, ainsi que le nom du fichier contenant cette rgle. Dans la vue Rgles, le volet affiche la
cascade, ou hirarchie, des rgles s'appliquant directement ou indirectement la slection en cours. (L'onglet auquel la rgle s'applique
directement s'affiche dans la colonne de droite.) Pour passer d'une vue l'autre, cliquez sur les boutons Afficher les informations et Afficher
cascade situs dans le coin suprieur droit du volet Rgles.
Lorsque vous slectionnez une proprit dans le volet Rsum de la slection, toutes les proprits de la rgle applique s'affichent au-dessous
dans le volet Proprits. (La rgle qui s'applique est galement slectionne dans le panneau Rgles lorsque la vue Rgles est slectionne.) Par
exemple, dans le cas d'une rgle appele .texteprincipal qui dfinit une famille, une taille et une couleur de police, la slection de l'une de ces
proprits dans le volet Rsum de la slection entrane l'affichage de toutes les proprits dfinies par la rgle .texteprincipal dans le volet
Proprits et de la rgle .texteprincipal slectionne dans le volet Rgles. (En outre, la slection d'une rgle dans le volet Rgles affiche les
proprits de celle-ci dans le volet Proprits.) Vous pouvez alors utiliser le volet Proprits pour modifier rapidement votre style CSS, qu'il soit
intgr dans le document en cours ou reli via par une feuille de style. Par dfaut, le volet Proprits ne prsente que les proprits ayant dj t
dfinies et les classe par ordre alphabtique.
Vous pouvez choisir d'afficher les proprits dans deux autres vues. La vue Catgorie regroupe les proprits en catgories, telles que Police,
Arrire-plan, Bloc, Bordure, etc., les proprits dfinies sont places en haut de chaque catgorie, en texte bleu. La vue Liste prsente la liste
alphabtique de toutes les proprits disponibles, les proprits dfinies galement places en haut de chaque catgorie, en texte bleu. Pour
passer d'une vue l'autre, cliquez sur les boutons Afficher la vue par catgorie, Afficher la vue sous forme de liste ou Afficher uniquement les
proprits dfinies, situs dans le coin infrieur droit du volet Proprits.
Dans toutes les vues, les proprits utilises dans la slection s'affichent en bleu, les autres s'affichent en rouge et sont barres. Si vous placez le
curseur de la souris sur une rgle trangre la slection, un message d'explication s'affiche. Dans la plupart des cas, il s'agit de proprits
crases par d'autres ou de proprits qui ne sont pas hrites.
Toute modification apporte dans le volet Proprits s'applique immdiatement, ce qui vous permet d'avoir un aperu direct de votre travail.
Haut de la page
Panneau Styles CSS en mode Tous
En mode All (Tout), le panneau Styles CSS prsente deux volets : un volet All Rules (Toutes les rgles) (en haut) et un volet Proprits (en bas).
Le volet Toutes les rgles prsente la liste des rgles dfinies dans le document actif, ainsi que l'ensemble des rgles dfinies dans les feuilles de
styles jointes ce document. Le volet Proprits permet de modifier les proprits CSS de toute rgle slectionne dans le volet Toutes les
rgles.
318
Vous pouvez redimensionner l'un quelconque des volets en faisant glisser les cadres entre les volets et redimensionner les colonnes Proprits en
faisant glisser les sparateurs.
Lorsque vous slectionnez une rgle dans le volet Toutes les rgles, toutes les proprits s'appliquant cette rgle s'affiche au-dessous dans le
volet Proprits. Vous pouvez alors utiliser le volet Proprits pour modifier rapidement votre style CSS, qu'il soit intgr dans le document en
cours ou reli via par une feuille de style. Par dfaut, le volet Proprits ne prsente que les proprits prcdemment dfinies et les classe par
ordre alphabtique.
Vous pouvez choisir d'afficher les proprits dans deux autres vues. La vue Catgorie regroupe les proprits en catgories, telles que Police,
Arrire-plan, Bloc, Bordure, etc., les proprits dfinies places en haut de chaque catgorie. La vue Liste prsente la liste alphabtique de toutes
les proprits disponibles, les proprits dfinies galement places en haut de chaque catgorie. Pour passer d'une vue l'autre, cliquez sur les
boutons Afficher la vue par catgorie, Afficher la vue sous forme de liste ou Afficher uniquement les proprits dfinies, situs dans le coin
infrieur droit du volet Proprits. Dans toutes les vues, les proprits utilises dans la slection s'affichent en bleu.
Toute modification apporte dans le volet Proprits s'applique immdiatement, ce qui vous permet d'avoir un aperu direct de votre travail.
Haut de la page
Boutons et vues du panneau Styles CSS
Dans les modes Tous et Actuel, le panneau Styles CSS prsente trois boutons qui vous permettent de modifier l'affichage du volet Proprits
(volet infrieur) :
A. Vue Catgorie B. Vue Liste C. Vue Dfinition des proprits

Vue Catgorie Rpartit les proprits CSS prises en charge par Dreamweaver en huit catgories distinctes : police, arrire-plan, bloc, bordure,
bote, liste, positionnement et extensions. Les proprits de chaque catgorie sont conserves dans une liste que vous pouvez dvelopper ou
rduire en cliquant sur le bouton plus (+) en regard de la catgorie de votre choix. Les proprits dfinies s'affichent en bleu en haut de la liste.
Vue Liste Affiche l'ensemble des proprits CSS prises en charge par Dreamweaver par ordre alphabtique. Les proprits dfinies s'affichent en
bleu en haut de la liste.
Vue Dfinition des proprits N'affiche que les proprits dj dfinies et constitue la vue par dfaut.
Dans les modes Tous et Actuel, le panneau Styles CSS contient galement les boutons suivants :
A. Attacher une feuille de style B. Nouvelle rgle de CSS C. Modifier le style D. Dsactiver/Activer la proprit
CSS E. Supprimer rgle de CSS
Attacher une feuille de style Ouvre la bote de dialogue Ajouter une feuille de style externe. Slectionnez une feuille de style externe pour crer
un lien vers le document actif ou l'importer dans celui-ci.
Nouvelle rgle de CSS Ouvre une bote de dialogue qui permet de slectionner le type du style que vous crez, par exemple, pour crer un style
de classe, redfinir une balise HTML ou pour dfinir un slecteur CSS.
Modifier le style Ouvre une bote de dialogue qui permet de modifier les styles dans le document actuel ou dans une feuille de style externe.
Supprimer rgle de CSS Supprime la rgle ou la proprit slectionne du panneau Styles CSS et le formatage de tous les lments auxquels
elle est applique. (Les rfrences ce style ne sont cependant pas supprimes.) Le bouton Supprimer rgle de CSS peut galement dtacher
(ou rompre le lien de) une feuille de style CSS associe.
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) sur le panneau Styles CSS
pour ouvrir un menu contextuel d'options disponibles pour l'excution des commandes de feuilles de style CSS.
Haut de la page
Le panneau Styles CSS vous permet d'afficher, de crer, de modifier et de supprimer des styles CSS, mais galement de joindre des feuilles de
style externes aux documents.
Appuyez sur les touches Maj+F11.
Cliquez sur le bouton CSS de l'inspecteur Proprits.
319
Contenu de page et actifs
320
Dfinition des proprits de page

Dfinition des proprits CSS de police, de couleur d'arrire-plan et d'image d'arrire-plan d'une page
Dfinition des proprits HTML d'une page
Pour chaque page que vous crez dans Dreamweaver, vous pouvez spcifier les proprits de formatage dans la bote de dialogue Proprits de
la page (Modifier > Proprits de la page). Cette bote de dialogue permet de spcifier la famille et la taille par dfaut de la police, la couleur
d'arrire-plan, les marges, le style des liens ainsi que d'autres aspects de la conception de page. Vous pouvez attribuer de nouvelles proprits
chaque nouvelle page que vous crez et modifier celles des pages existantes. Les modifications que vous apportez dans la bote de dialogue
Proprits de la page s'appliquent la page entire.
Dreamweaver propose deux mthodes de modification des proprits de page : CSS ou HTML. Adobe recommande d'utiliser CSS pour dfinir des
arrire-plans et modifier les proprits des pages.
Remarque : Les proprits de page que vous choisissez ne s'appliquent qu'au document actif. Si une page utilise une feuille de style CSS
externe, Dreamweaver n'crase pas les balises dfinies dans la feuille de style, car ceci affecterait les autres pages qui utilisent cette feuille.
En haut
Dfinition des proprits CSS de police, de couleur d'arrire-plan et d'image d'arrire-plan

d'une page
La bote de dialogue Proprits de la page permet de spcifier diverses options de base de mise en forme des pages Web, comme la police, la
couleur d'arrire-plan et l'image d'arrire-plan.
1. Choisissez Modifier > Proprits de la page ou cliquez sur le bouton Proprits de la page de l'inspecteur Proprits.
2. Slectionnez la catgorie Apparence (CSS) et dfinissez les options.
Police Spcifie la famille de polices par dfaut utiliser dans vos pages Web. Dreamweaver utilise la famille de polices
spcifie sauf si une autre police est dsigne pour un lment de texte donn.
Taille Spcifie la taille de police par dfaut utiliser dans vos pages Web. Dreamweaver utilise la taille de police spcifie
sauf si une autre taille est dsigne pour un lment de texte donn.
Couleur du texte Spcifie la couleur d'affichage des polices par dfaut.
Couleur d'arrire-plan Dfinit la couleur d'arrire-plan de la page. Activez l'option Couleur d'arrire-plan puis choisissez une
couleur dans le slecteur.
Image d'arrire-plan Dfinit une image d'arrire-plan Cliquez sur le bouton Parcourir puis accdez l'image et slectionnezla. Vous pouvez galement indiquer le chemin de l'image d'arrire-plan dans le champ Image d'arrire-plan.
Dreamweaver gnre une mosaque (multiplication) de l'image d'arrire-plan si elle ne remplit pas entirement sa fentre,
comme le font les navigateurs. Pour viter la cration de cette mosaque, dsactivez cette fonction l'aide des feuilles de
style en cascade.
Rptition Indique comment l'image d'arrire-plan sera affiche sur la page :

Slectionnez l'option Pas de rptition pour n'afficher l'image d'arrire-plan qu'une seule fois.
Slectionnez l'option Rptition pour rpter, ou mettre en mosaque, l'image l'horizontale et la verticale.
321
Slectionnez l'option Rpter-x pour former une mosaque horizontale.

Slectionnez l'option Rpter-y pour former une mosaque verticale.
Marge gauche et Marge droite Spcifie la taille des marges gauche et droite de la page.
Marge haut et Marge bas Spcifie la taille des marges en haut et en bas de la page.
En haut
Dfinition des proprits HTML d'une page

La dfinition de proprits dans cette catgorie de la bote de dialogue Proprits de la page entrane un formatage de la page l'aide de code
HTML au lieu de code CSS.
2. Slectionnez la catgorie Apparence (HTML) et dfinissez les options.
Image d'arrire-plan Dfinit une image d'arrire-plan Cliquez sur le bouton Parcourir puis accdez l'image et slectionnezla. Vous pouvez galement indiquer le chemin de l'image d'arrire-plan dans le champ Image d'arrire-plan.
Dreamweaver gnre une mosaque (multiplication) de l'image d'arrire-plan si elle ne remplit pas entirement sa fentre,
comme le font les navigateurs. Pour viter la cration de cette mosaque, dsactivez cette fonction l'aide des feuilles de
style en cascade.
Arrire-plan Dfinit la couleur d'arrire-plan de la page. Activez l'option Couleur d'arrire-plan puis choisissez une couleur
dans le slecteur.
Text Spcifie la couleur d'affichage des polices par dfaut.
Lien Spcifie la couleur appliquer au texte qui constitue le lien.
Liens visits Spcifie la couleur appliquer aux liens visits.
Liens actifs Spcifie la couleur appliquer lorsque la souris ou le curseur clique sur un lien.
Marge gauche et Marge droite Spcifie la taille des marges gauche et droite de la page.
Marge haut et Marge bas Spcifie la taille des marges en haut et en bas de la page.
322
Dfinition des proprits de lien CSS pour une page entire

Vous pouvez spcifier les polices, les tailles de police, les couleurs et dautres lments pour vos liens. Par dfaut, Dreamweaver cre des rgles
CSS pour vos liens et les applique tous les liens que vous utilisez sur la page. Les rgles sont incorpores dans la section head de la page.
Remarque : Si vous souhaitez personnaliser des liens spcifiques sur une page, vous devez crer des rgles CSS individuelles, puis les
appliquer sparment ces liens.
1. Choisissez Modifier > Proprits de la page ou cliquez sur le bouton Proprits de la page de linspecteur Proprits.
2. Slectionnez la catgorie Liens (CSS) et dfinissez les options.
Police du lien Dfinit la famille de polices par dfaut utiliser pour les liens. Par dfaut, Dreamweaver utilise la police dfinie
pour la page entire, sauf si une autre police est spcifie.
Taille Dfinit la taille de police par dfaut utiliser pour les liens.
Couleur des liens Spcifie la couleur appliquer au texte qui constitue le lien.
Liens visits Spcifie la couleur appliquer aux liens visits.
Liens de survol Spcifie la couleur appliquer lorsque la souris ou le curseur est plac sur un lien.
Liens actifs Spcifie la couleur appliquer lorsque la souris ou le curseur clique sur un lien.
Style soulign Spcifie le style de soulignement appliquer aux liens. Si un style de soulignement est dj dfini pour votre
page (par exemple, par le biais dune feuille de style CSS), le menu par dfaut est remplac par la mention ne pas
modifier . Cette mention vous informe dun style de lien qui a t dfini. Si vous modifiez le style de soulignement laide de
la bote de dialogue Proprits de la page, Dreamweaver modifiera la dfinition de lien prcdente.
323
Dfinition des proprits den-tte CSS pour une page entire

Vous pouvez spcifier les polices, les tailles de police et les couleurs pour vos titres de page. Par dfaut, Dreamweaver cre des rgles CSS pour
vos titres et les applique tous les titres que vous utilisez sur la page. Les rgles sont incorpores dans la section head de la page.
Les titres peuvent tre slectionns dans linspecteur Proprits HTML.
1. Choisissez Modifier > Proprits de la page ou cliquez sur le bouton Proprits de la page de linspecteur Proprits.
2. Slectionnez la catgorie En-ttes (CSS) et dfinissez les options.
Police des en-ttes Dfinit la famille de polices par dfaut utiliser pour les en-ttes. Dreamweaver utilise la famille de
polices spcifie sauf si une autre police est dsigne pour un lment de texte donn.
En-tte 1 En-tte 6 Spcifie les tailles et couleurs utiliser pour chaque niveau de balises den-tte.
324
Dfinition des proprits de titre et de codage d'une page

Les options Titre/codage de la bote de dialogue Proprits de la page permettent de dfinir le type de codage de document spcifique au langage
utilis pour crer vos pages Web, ainsi que le formulaire de normalisation Unicode utiliser avec ce type de codage.
2. Slectionnez la catgorie Titre/codage et dfinissez les options.
Titre Spcifie le titre de la page, qui s'affiche dans la barre de titre de la fentre de document et dans la plupart des fentres
du navigateur.
Type de document (DTD) Spcifie une dfinition de type de document. Par exemple, vous pouvez rendre un document
HTML compatible XHTML en slectionnant XHTML 1.0 transitionnel ou XHTML 1.0 Strict dans le menu droulant.
Codage Prcise le codage utilis pour les caractres du document.
Si vous slectionnez Unicode (UTF 8) en tant que codage de document, le codage d'entit est superflu dans la mesure o
UTF 8 permet de reprsenter de faon fiable tous les caractres. Si vous slectionnez un autre codage de document, le
codage d'entit peut tre ncessaire pour reprsenter certains caractres. Pour plus d'informations sur les entits de
caractres, 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 active que si vous slectionnez UTF 8 en tant que code par dfaut. Il existe
quatre Formulaires de normalisation Unicode. Le plus important est le Formulaire de normalisation Unicode C car il est le plus
utilis dans le Modle de caractres li au World Wide Web, mais Adobe fournit galement les trois autres Formulaires de
normalisation Unicode.
Certains caractres Unicode semblent visuellement similaires mais peuvent tre stocks de diffrentes manires dans le
document. Par exemple, (e trma) peut tre reprsent sous la forme d'un seul caractre, e trma ou de deux
caractres, e Latin ordinaire + trma . Un caractre Unicode de combinaison est un caractre associ au caractre
prcdent, ce qui fait apparatre le trma au-dessus du e Latin. Les deux formes donnent la mme typographie visuelle,
alors que chacune est enregistre diffremment dans le fichier.
La normalisation est le processus consistant s'assurer que tous les caractres pouvant tre enregistrs sous diffrentes
formes le sont tous sous la mme forme. C'est--dire que tous les caractres d'un document sont enregistrs sous
forme de e trma unique ou de e + trma de combinaison , mais pas sous les deux formes dans un mme document.
Pour plus d'informations sur la Normalisation Unicode et les formulaires spcifiques pouvant tre utiliss, 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 constitue de 2 4 octets placs au dbut d'un fichier texte identifiant un fichier comme tant au format
Unicode et, dans ce cas, l'ordre des octets suivants. Le code UTF 8 ne prsentant 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.
325
Utilisation d'un trac d'image pour crer une page

Vous pouvez insrer un fichier image utiliser comme guide dans la cration de votre page. L'image s'affiche sous la forme d'une image d'arrireplan, que vous pouvez utiliser comme guide pour la mise en forme de votre page.
2. Slectionnez la catgorie Trac de l'image et dfinissez les options.
Trac de l'image Permet de spcifier l'image utiliser comme guide pour reproduire une mise en page. Cette image sert
uniquement de rfrence et n'apparat pas lorsque le document s'affiche dans un navigateur.
Transparence Dtermine l'opacit du trac de l'image, de compltement transparent compltement opaque.
326

Le codage de document prcise le codage utilis pour les caractres dans le document. Le codage du document est spcifi dans une balise
meta, insre dans l'en-tte du document ; il indique au navigateur et Dreamweaver le mode de dcodage du document et les polices utiliser
pour afficher le texte dcod.
Par exemple, si vous spcifiez Occidental (Latin1), la balise meta suivante est insre :
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">.
Le document affich dans Dreamweaver contient les polices que vous spcifiez dans Prfrences de polices pour le codage Occidental (Latin1) ;
ce mme document affich dans un navigateur contient les polices que l'utilisateur du navigateur prcise pour le codage Occidental (Latin1).
Si vous spcifiez Japonais (Shift JIS), la balise meta suivante est insre :
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">.
Le document affich dans Dreamweaver contient les polices que vous spcifiez pour les codages du japonais ; ce mme document affich dans
un navigateur contient les polices que l'utilisateur du navigateur prcise pour les codages du japonais.
Vous modifier le codage du document dans une page et modifier le codage utilis par dfaut par Dreamweaver pour crer de nouveaux
documents, y compris les polices utilises pour afficher chaque codage.
Voir aussi
[print]Dfinition du type et du codage par dfaut d'un document
327
Slection et affichage d'lments dans la fentre de document

Slection d'lments
Affichage du code HTML associ au texte ou l'objet slectionn
Affichage ou masquage des icnes des lments invisibles
Dfinition des prfrences des lments invisibles
Pour slectionner un lment dans le mode Cration de la fentre de document, cliquez dessus. Si un lment est invisible, vous devez le rendre
visible pour le slectionner.
Certains codes HTML ne sont pas visibles dans un navigateur, comme, par exemple, les balises comment. Il est cependant utile de pouvoir
slectionner, modifier, dplacer et supprimer ces lments invisibles lorsque vous crez une page.
Dreamweaver permet d'afficher des icnes l'emplacement de ces lments invisibles dans la fentre de document en mode Cration. Pour
indiquer les marqueurs d'lment qui doivent s'afficher, dfinissez les prfrences lies aux lments invisibles. Par exemple, vous pouvez
spcifier que les ancres nommes soient visibles, mais pas les sauts de ligne.
Vous pouvez crer certains lments invisibles (tels que les commentaires et les ancres nommes) l'aide des boutons dans la catgorie
Commun du panneau Insertion. Vous pouvez ensuite modifier ces lments l'aide de l'inspecteur Proprits.
Haut de la page
Slection d'lments
Pour slectionner un lment visible dans la fentre de document, cliquez dessus ou entourez-le du rectangle de slection.
Pour slectionner un lment invisible, choisissez Affichage > Assistances visuelles > Elments invisibles (si ce n'est pas dj
fait), puis cliquez sur le marqueur de l'lment dans la fentre de document.
Certains objets apparaissent sur la page un endroit diffrent de celui dans lequel leur code est insr. Par exemple, en
mode conception, un lment PA peut se trouver n'importe o dans la page, mais en mode Code, le code dfinissant l'lment
PA se trouve dans un emplacement fixe. Lorsque les lments invisibles sont affichs, Dreamweaver affiche des marqueurs
dans la fentre de document pour indiquer l'emplacement du code de ces lments. En slectionnant le marqueur, vous
slectionnez tout l'lment : si, par exemple, vous slectionnez le marqueur d'un lment PA, tout l'lment PA est slectionn
Pour slectionner une balise complte (avec son contenu, le cas chant), cliquez sur son symbole dans le slecteur de
balise, dans la partie infrieure gauche de la fentre de document. Le slecteur de balises apparat en mode Cration et en
mode Code. Le slecteur de balises affiche toujours les balises qui contiennent la slection ou le point d'insertion en cours. La
balise l'extrme gauche est la balise ultrapriphrique contenant la slection ou le point d'insertion en cours. La balise
suivante est contenue dans cette balise ultrapriphrique, et ainsi de suite. La balise l'extrme droite est la balise la plus
l'intrieur contenant la slection ou le point d'insertion en cours.
Dans l'exemple suivant, le point d'insertion est situ dans une balise de paragraphe,<p>. Pour slectionner le tableau
contenant le paragraphe que vous souhaitez slectionner, slectionnez la balise <table> gauche de la balise <p>.
Affichage du code HTML associ au texte ou l'objet slectionn
Haut de la page

Dans la barre d'outils du document, cliquez sur le bouton Afficher le mode Code.
Dans la barre d'outils du document, cliquez sur le bouton Afficher les modes Code et Cration.
Choisissez Affichage > Code et cration.
Choisissez Fentre > Inspecteur de code.
Lorsque vous slectionnez un lment dans l'un des deux diteurs de code (mode Code ou inspecteur de code), il est
galement slectionn dans la fentre de document. Il est parfois ncessaire de synchroniser les deux affichages pour que la
slection apparaisse.
Haut de la page
328
Affichage ou masquage des icnes des lments invisibles

Choisissez Affichage > Assistances visuelles > Elments invisibles.
Remarque : L'affichage des lments invisibles risque de modifier lgrement la mise en page, en dplaant d'autres lments de quelques pixels.
Pour conserver une mise en page prcise, vous devez donc masquer ces lments invisibles.
Dfinition des prfrences des lments invisibles
Haut de la page
Utilisez les prfrences des lments invisibles pour dterminer les types d'lments devant tre affichs lorsque l'option Affichage > Assistances
visuelles > Elments invisibles est active.
1. Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh), puis cliquez sur Elments
invisibles.
2. Slectionnez les lments rendre visibles, puis cliquez sur OK.
Remarque : Une coche ct du nom de l'lment dans la bote de dialogue signifie que l'lment est visible lorsque l'option
Affichage > Assistances visuelles > Elments invisibles est active.
Ancres nommes Affiche une icne marquant l'emplacement de chaque ancre nomme (a name ="") dans le document.
Scripts Affiche une icne marquant l'emplacement de code Java Script ou VBScript dans le corps du document. Slectionnez
cette icne pour modifier le script dans l'inspecteur Proprits, ou pour crer un lien vers un fichier script externe.
Comments Affiche une icne marquant l'emplacement d'un commentaire HTML. Slectionnez cette icne pour consultez le
commentaire dans l'inspecteur Proprits.
Sauts de ligne Affiche une icne marquant l'emplacement de chaque saut de ligne (BR). Cette option est dslectionne par
dfaut.
Cartes graphiques ct client Affiche une icne marquant l'emplacement de chaque carte graphique du document.
Styles incorpors Affiche une icne marquant l'emplacement de styles CSS incorpors dans le corps du document. Les
styles CSS placs dans l'en-tte du document n'apparaissent pas dans la fentre de document.
Champs de formulaire masqus Affiche une icne marquant l'emplacement de champs de formulaire dont l'attribut type est
fix "hidden".
Sparateur de formulaire Affiche une bordure dlimitant le formulaire pour vous aider y insrer des lments. La bordure
indique l'tendue de la balise form ; ainsi, tous les lments de formulaire l'intrieur de cette bordure sont correctement
inclus dans les balises form.
Points d'ancrage des lments PA Affiche une icne marquant l'emplacement du code dfinissant un lment PA.
L'lment PA lui-mme peut tre positionn n'importe o dans la page. Les lments PA ne constituent pas des lments
invisibles ; seul le code qui les dfinit est invisible. Slectionnez l'icne afin de slectionner l'lment PA. Vous pouvez ainsi
afficher le contenu de l'lment PA, mme s'il est marqu comme masqu.
Points d'ancrage des lments aligns Affiche une icne marquant l'emplacement du code HTML des lments qui
acceptent l'attribut align. Ces lments sont les suivants : images, tableaux, objets ActiveX, plug-ins et applets. Dans certains
cas, le code de l'lment peut tre spar 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 tre affich dans la fentre de document. En rgle
gnrale, lorsqu'elles sont traites par un serveur, ces balises gnrent des balises HTML. Par exemple, une balise
<CFGRAPH> gnre un tableau HTML lorsqu'elle est traite par un serveur ColdFusion. Dreamweaver reprsente la balise
l'aide d'un lment ColdFusion invisible, car il lui est impossible de dterminer 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 tre affich dans la fentre de document. Il
s'agit gnralement de balises de configuration, de traitement ou de logique (par exemple <CFSET>, <CFWDDX> et
<CFXML>) qui ne gnrent pas de balises HTML.
Affichage CSS: Aucun Affiche une icne qui montre l'emplacement du contenu masqu par la proprit display:none de la
feuille de style lie ou incorpore.
Afficher le texte dynamique sous Affiche le texte dynamique de la page dans le format {Recordset:Field} par dfaut. Si la
longueur de ces valeurs perturbe le formatage de la page, vous pouvez choisir le type d'affichage {}.
Inclusions ct serveur Affiche le contenu rel de chaque fichier d'inclusion ct serveur.
Voir aussi
329
Couleurs
Haut de la page
En HTML, les couleurs sont exprimes par leur valeur hexadcimale (par exemple, #FF0000) ou, pour les principales, par leur nom en anglais
(red). Une couleur scurise pour le Web est une couleur qui, en mode 256 couleurs, reste toujours la mme dans Safari et Microsoft Internet
Explorer, sous Windows comme sous Macintosh. Par convention, il y a 216 couleurs communes, et toute valeur hexadcimale combinant les
paires 00, 33, 66, 99, CC ou FF (correspondant respectivement aux niveaux RVB 0, 51, 102, 153, 204 et 255) reprsente une couleur scurise
pour le Web.
Des tests approfondis ont cependant rvl qu'en ralit seules 212 couleurs sont scurises 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 de la palette adapte tous les navigateurs est
donc bien moindre si vous dveloppez votre site pour les utilisateurs de systmes informatiques modernes.
La palette de couleurs scurise pour le Web peut s'avrer utile si vous crez des sites pour des appareils diffrents, comme les organisateurs
personnels et les tlphones mobiles. Un grand nombre de ces appareils sont quips d'un cran noir et blanc (1 bpc) ou 256 couleurs (8 bpc).
Les palettes Cubes de couleur (valeur par dfaut) et Ton continu de Dreamweaver utilisent la palette scurise pour le Web de 216 couleurs ;
lorsque vous slectionnez une couleur dans ces palettes, c'est la valeur hexadcimale correspondante qui s'affiche.
Pour choisir une couleur en dehors de la gamme scurise pour le Web, ouvrez le nuancier du systme en cliquant sur le bouton Roue
chromatique en haut droite du slecteur de couleurs de Dreamweaver. Celle-ci n'est pas limite aux couleurs scurises pour le Web.
Les versions UNIX des navigateurs utilisent une palette de couleurs diffrente de celle des versions Windows et Macintosh. Si vous dveloppez
exclusivement pour des plates-formes UNIX (ou si le public vis est compos d'utilisateurs de Windows ou de Macintosh quips de moniteurs
24 bpc et d'utilisateurs d'UNIX quips de moniteurs 8 bpc), vous pouvez utiliser des valeurs hexadcimales combinant les paires 00, 40, 80, BF
ou FF, qui produisent des couleurs scurises pour le Web sur les ordinateurs excutant SunOS.
Haut de la page
Dans Dreamweaver, les inspecteurs de proprits de la plupart des lments de page, ainsi que de nombreuses botes de dialogue, comportent
une icne permettant d'ouvrir un slecteur de couleur. Choisissez la couleur d'un lment de page dans le slecteur. Vous pouvez galement
dfinir la couleur par dfaut du texte des lments de votre page.
1. Cliquez sur l'icne des couleurs dans n'importe quelle bote de dialogue ou dans l'inspecteur Proprits.
Le slecteur de couleur s'affiche l'cran.
Utilisez la pipette pour slectionner une nuance de couleur dans la palette. Toutes les couleurs des palettes Cubes de
couleur (valeur par dfaut) et Ton continu sont scurises pour le Web ; les autres palettes ne le sont pas.
Utilisez la pipette pour slectionner une couleur partir d'un point visible l'cran, mme l'extrieur de la fentre de
Dreamweaver. Pour slectionner une couleur sur le bureau ou dans une autre application, appuyez sur le bouton de la
souris et maintenez-le enfonc. La pipette peut ainsi rester active et slectionner une couleur en dehors de Dreamweaver.
Si vous cliquez sur le bureau ou sur une autre application, Dreamweaver slectionne la couleur de l'emplacement o vous
avez cliqu. Cependant, si vous passez une autre application, il peut s'avrer ncessaire de cliquer sur une fentre de
Dreamweaver pour continuer travailler dans Dreamweaver.
Pour largir plus amplement la slection, utilisez le menu droulant en haut droite du nuancier. Vous pouvez
slectionner Cubes de couleur, Ton continu, Systme d'exploitation Windows, Mac OS et Niveaux de gris.
Remarque : Les palettes Cubes de couleur et Ton continu sont scurises pour le Web, contrairement aux palettes
Systme 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 dfaut
Pour ouvrir le nuancier du systme, cliquez sur le bouton Roue chromatique
330
331

Dreamweaver permet d'agrandir (zoom avant) l'affichage de la fentre de document de manire pouvoir vrifier la prcision des graphiques,
slectionner plus aisment de petits lments, concevoir des pages avec un texte en petite taille, concevoir de trs grande pages, etc.
Remarque : Les outils de zoom ne sont disponibles qu'en mode Cration.
Haut de la page

1. Cliquez sur l'outil Zoom (la loupe) dans le coin infrieur droit de la fentre du document.
Cliquez sur la zone de la page que vous souhaitez agrandir jusqu' obtenir l'affichage dsir.
Tracez un cadre autour de la zone de la page que vous souhaitez agrandir, puis relchez le bouton de la souris.
Slectionnez une chelle d'agrandissement prdfini dans le menu droulant Zoom.
Saisissez une chelle d'agrandissement dans le champ Zoom.
Vous pouvez galement effectuer un grossissement avec l'outil Zoom en appuyant sur Ctrl+= (Windows) ou
Commande+= (Macintosh).
3. Pour effectuer un zoom arrire (rduire le taux d'agrandissement), appuyez sur la touche Alt (Windows) ou Option
(Macintosh), puis cliquez sur la page.
Vous pouvez galement effectuer une rduction avec l'outil Zoom en appuyant sur Ctrl+- (Windows) ou Commande+(Macintosh).
Haut de la page
Cliquez sur l'outil Slection (icne en forme de pointeur) dans le coin infrieur droit de la fentre du document, puis cliquez dans la page.
Haut de la page

1. Cliquez sur l'outil Main (icne en forme de main) dans le coin infrieur droit de la fentre du document.
2. Faites glisser la page.
Haut de la page
1. Slectionnez un lment de la page.

2. Slectionnez Affichage > Ajuster la slection.
Haut de la page
Slectionnez Affichage > Ajuster la page.

Slectionnez Affichage > Ajuster la largeur.
Voir aussi
Prsentation de la barre d'tat
332
Haut de la page
333

Dreamweaver calcule la taille sur la base du contenu de toute la page, y compris tous les objets lis, tels que les images et les plug-ins.
Dreamweaver estime la dure de tlchargement en fonction de la vitesse de connexion entre dans les prfrences de la Barre d'tat. Le temps
de tlchargement rel dpend de l'tat du trafic sur Internet,
Pour vrifier les dures de tlchargement pour une page Web particulire, il est intressant d'utiliser la rgle des 8 secondes ; c'est--dire
que la plupart des utilisateurs n'attendront pas plus de huit secondes pour le tlchargement d'une page.
2. Slectionnez la catgorie Barre d'tat dans la liste de gauche.
3. Choisissez la vitesse de connexion partir de laquelle le temps de tlchargement sera calcul, puis cliquez sur OK.
Voir aussi
334
Utilisation du texte
Ajout de texte dans un document
Insertion de caractres spciaux
Ajout despacements entre les caractres
Ajout despacements de paragraphe
Cration de listes puces ou numrotes
Recherche et remplacement de texte
Dfinition dabrviations et dacronymes
Dfinition des prfrences de copie/collage
Haut de la page
Ajout de texte dans un document

Pour ajouter du texte dans un document Dreamweaver, vous pouvez le saisir directement dans la fentre du
document ou effectuer un copier/coller. Vous pouvez galement importer du texte partir dautres
documents.
Pour coller du texte dans un document Dreamweaver, vous pouvez utiliser la commande Coller ou Collage
spcial. La commande Collage spcial permet de prciser le format du texte coll de diffrentes faons. Par
exemple, lorsque vous souhaitez coller le texte dun document Microsoft Word dj format dans votre
document Dreamweaver en ignorant son formatage initial afin dappliquer votre propre feuille de style CSS,
slectionnez le texte dans Word, copiez-le dans le presse-papiers, puis utilisez la commande Collage spcial
pour slectionner loption qui permet de ne coller que le texte.
Lorsque vous utilisez la commande Coller pour coller un texte issu dune autre application, vous pouvez
dfinir des prfrences de collage comme options par dfaut.
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, procdez de lune des manires suivantes :
Extrayez le texte de votre composition PSD laide du panneau Extract. Pour plus
dinformations, voir Copie de texte depuis des fichiers PSD.
Tapez le texte directement dans la fentre de document.
Copiez du texte partir dune autre application, passez dans Dreamweaver, placez le
point dinsertion dans la fentre du document en mode Cration, puis choisissez
Edition > Coller ou Edition > Collage spcial.
Lorsque vous choisissez Edition > Collage spcial, vous pouvez choisir plusieurs
options de formatage du texte coll.
Vous pouvez galement coller du texte laide des raccourcis clavier suivants :
Option de collage
Raccourci clavier
Coller
Ctrl+V (Windows)
Commande+V (Macintosh)
335
Collage spcial
Ctrl+Maj+V (Windows)
Commande+Maj+V (Macintosh)
Haut de la page
Insertion de caractres spciaux

Certains caractres spciaux sont reprsents en HTML par un nom ou par un numro, qui est alors appel
entit. Le langage HTML prvoit des noms dentits pour de nombreux caractres spciaux, par exemple
le symbole de copyright (©), lesperluette (&) et le symbole Marque dpose (®). Chaque
entit est reprsente la fois par un nom HTML (par exemple — pour le tiret cadratin) et son
quivalent numrique (dans ce cas, ).
Le langage HTML utilise des crochets <> dans son code, mais vous devez exprimer les caractres
spciaux suprieur et infrieur sans que Dreamweaver les interprte comme du code. Dans ce cas,
utilisez > pour le signe suprieur (>) et < pour le signe infrieur (<).
Malheureusement, de nombreux navigateurs anciens naffichent pas correctement la plupart de ces entits.
1. Dans la fentre de document, placez le curseur l o vous voulez insrer un caractre
spcial.
Choisissez le nom du caractre dans le sous-menu Insertion > HTML > Caractres
spciaux.
Dans la catgorie Texte du panneau Insertion, cliquez sur le bouton Caractres et
choisissez le caractre dsir dans le sous-menu.
Un grand nombre dautres caractres spciaux sont disponibles. Pour en slectionner
un, choisissez Insertion > HTML > Caractres spciaux > Autre ou cliquez sur le
bouton Caractres de la catgorie Texte du panneau Insertion, puis choisissez Autres
caractres. Choisissez un caractre dans la bote de dialogue Insrer autre caractre
et cliquez sur OK.
Haut de la page
Ajout despacements entre les caractres

Le langage HTML nautorisant quun seul espace entre les caractres, il convient dinsrer un espace
inscable afin dajouter un espace supplmentaire dans un document. Vous pouvez dfinir une prfrence
pour linsertion automatique dun espace inscable dans un document.
Insertion dun espace inscable

Choisissez Insertion > HTML > Caractres spciaux > Espace inscable.
Appuyez sur les touches Ctrl+Maj+Espace (Windows) ou Option+Espace (Macintosh).
cliquez sur licne Espace inscable.
Dfinition dune prfrence pour lajout despaces inscables

336

(Macintosh).
2. Dans la catgorie Gnral, assurez-vous que loption Autoriser plusieurs espaces
conscutifs soit active.
Haut de la page
Ajout despacements de paragraphe

Dreamweaver fonctionne comme une application classique de traitement de texte : appuyez sur la touche
Entre (Windows) ou Retour (Macintosh) pour commencer un nouveau paragraphe. Les navigateurs web
insrent automatiquement une ligne vierge entre les paragraphes. Vous pouvez vous-mme espacer les
paragraphes dune ligne vierge en insrant un saut de ligne.
Ajout dun saut de paragraphe

Appuyez sur la touche Entre (Windows) ou Retour (Macintosh).
Ajout dun saut de ligne

Appuyez sur les touches Maj+Entre (Windows) ou Maj+Retour (Macintosh).
Choisissez Insertion > HTML > Caractres spciaux > Saut de ligne.
cliquez sur licne Saut de ligne.
Haut de la page
Cration de listes puces ou numrotes

Vous pouvez crer des listes numrotes (tries), des listes puces (non tries) et des listes de dfinitions
partir dun texte existant ou dun nouveau texte que vous tapez dans la fentre de document.
Les listes de dfinitions nutilisent pas de caractres den-tte tels que des puces ou des nombres et sont
souvent utilises dans les glossaires ou les descriptions. Les listes peuvent galement tre imbriques, cest-dire quelles contiennent dautres listes. Par exemple, vous pouvez imbriquer une liste numrote ou
puces au sein dune autre liste de mme type.
La bote de dialogue Proprits de liste vous permet de dfinir laspect dune liste complte ou dun lment
de liste. Vous pouvez dfinir le style de numrotation, remettre zro la numrotation ou dfinir les options
du style de puce dlments individuels de la liste ou de la liste complte.
Cration dune nouvelle liste

1. Dans le document Dreamweaver, placez le point dinsertion lemplacement o insrer
la liste, puis procdez de lune des manires suivantes :
Dans linspecteur Proprits HTML, cliquez sur le bouton correspondant une liste
puces ou une liste numrote.
Choisissez Format > Liste, puis slectionnez le type de liste qui vous convient : Liste
simple ( puces), Liste numrote ou Liste de dfinitions.
Le caractre de tte de llment de liste spcifi apparat dans la fentre de
document.
2. Tapez le texte de llment de la liste, puis appuyez sur la touche Entre (Windows) ou
337
Retour (Macintosh) pour crer un autre lment de liste.

3. Pour marquer la fin de la liste, appuyez deux reprises sur la touche Entre (Windows)
ou Retour (Macintosh).
Cration dune liste partir dun texte existant

1. Slectionnez une suite de paragraphes pour les transformer en liste.
2. Dans linspecteur Proprits HTML, cliquez sur le bouton correspondant une liste
puces ou une liste numrote, ou choisissez Format > Liste, puis slectionnez le type de
liste qui vous convient : Liste simple ( puces), Liste numrote ou Liste de dfinitions.
Cration dune liste imbrique

1. Slectionnez les lments de liste imbriquer.
2. Dans linspecteur Proprits HTML, cliquez sur le bouton Blockquote, ou choisissez
Format > Retrait.
Dreamweaver met le texte en retrait et cre une liste individuelle avec les attributs HTML
de la liste dorigine.
3. Appliquez un nouveau style ou type de liste au texte en retrait en suivant la mme
procdure que celle utilise ci-dessus.
Dfinition des proprits dune liste complte

1. Dans la fentre de document, crez au moins un lment de liste. Le nouveau style
sapplique automatiquement aux nouveaux lments ajouts la liste.
2. Placez le point dinsertion dans le texte de llment de la liste, puis choisissez Format >
Liste > Proprits de la liste pour ouvrir la bote de dialogue Proprits de liste.
3. Slectionnez les options que vous voulez appliquer la liste :
Type de liste Spcifie les proprits de la liste, tandis que loption Elment de liste
caractrise un lment individuel dune liste. Dans le menu droulant, slectionnez une
liste simple, une liste numrote, une liste des rpertoires ou une liste des menus. Les
options disponibles dans la bote de dialogue varient selon le type de liste choisi.
Style Dfinit le style des numros ou des puces utiliss avec une liste numrote ou
puces. Tous les lments de la liste prendront ce style, sauf si vous attribuez un nouveau
style certains lments.
Dmarrer le comptage Dfinit la valeur attribuer au premier lment dune liste

numrote.
4. Cliquez sur OK pour dfinir les options.
Dfinition des proprits dun lment de liste

1. Dans la fentre de document, placez le point dinsertion dans le texte dun lment de la
liste.
2. Choisissez Format > Liste > Proprits de la liste.
3. Dans Elment de liste, slectionnez les options que vous voulez dfinir :
338
Nouveau style Caractrise le style de llment de liste slectionn. Les styles du menu
Nouveau style sont apparents au type de liste affich dans le menu Type de liste. Si,
par exemple, vous avez choisi loption Liste simple dans le menu Type de liste, seules
les options de puce sont disponibles dans le menu Nouveau style.
Rinitialiser le compte Dfinit un numro spcifique partir duquel numroter les

lments de liste.
4. Cliquez sur OK pour dfinir les options.
Haut de la page

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 dans le groupe de
panneaux Rsultats, indique les rsultats des recherches pour lesquelles loption Rechercher tout est
slectionne.
Remarque : pour rechercher des fichiers dans un site, utilisez les commandes suivantes : Retrouver sur le
site local et Retrouver sur le site distant.

1. Ouvrez le document dans lequel la recherche doit tre effectue ou slectionnez des
documents ou un dossier dans le panneau Fichiers.
2. Slectionnez la commande Edition > Rechercher et remplacer.
3. Loption Rechercher dans vous permet de dfinir les fichiers dans lesquels effectuer la
recherche :
Texte slectionn Permet de limiter la recherche au texte alors slectionn dans le

document actif.
Document actif Permet de limiter la recherche au document actif.
Ouvrir les documents Permet deffectuer la recherche dans tous les documents alors
ouverts.
Dossier Permet de limiter la recherche un dossier spcifique. Aprs avoir choisi

Dossier, cliquez sur licne reprsentant un dossier pour slectionner le dossier dans
lequel effectuer votre recherche.
Fichiers slectionns dans le site Permet de limiter la recherche aux fichiers et

dossiers actuellement slectionns dans le panneau Fichiers.
Site local en cours entier Permet dtendre la recherche lensemble des documents
HTML, des fichiers de bibliothque et des documents texte du site courant.
4. Le menu contextuel Rechercher permet de spcifier le type de recherche effectuer :
Code source Permet de rechercher des chanes de texte spcifiques dans le code
source HTML. Vous pouvez rechercher des balises spcifiques laide de cette option,
mais la recherche Balise spcifique offre une approche plus flexible pour ce type
339
dopration.
Texte Permet de rechercher des chanes spcifiques de texte au sein du document.

Une recherche sur du texte ignore tout code HTML qui interromprait la chane indique.
Par exemple, si vous recherchez le chien noir, vous trouverez aussi bien le chien
noir que le chien <i>noir</i>.
Texte (avanc) Permet de rechercher des chanes de texte spcifiques se trouvant

lintrieur ou lextrieur dune ou de plusieurs balises. Par exemple, dans un document
qui contient le code HTML suivant, la recherche du terme essaie en prcisant Pas
de balise interne et la balise i renvoient uniquement la seconde occurrence du mot
essaie : Jean <i>essaie</i> de terminer son travail temps, mais
ny arrive pas toujours. Il essaie cependant farouchement. .
Balise spcifique Permet de rechercher des balises, attributs et valeurs dattribut

spcifiques, telles que toutes les balises td o valign est dfini sur top.
Remarque : appuyez sur Ctrl+Entre ou Maj+Entre (Windows) ou sur
Contrle+Retour, Maj+Retour ou Commande+Retour (Macintosh) pour insrer des sauts
de ligne au sein des champs de recherche, ce qui permet de rechercher un caractre de
retour chariot. Lorsque vous effectuez une telle recherche, dsactivez loption Ignorer les
diffrences entre les espaces blancs si vous nutilisez pas dexpressions rgulires. Cette
recherche porte sur un caractre de retour chariot en particulier, et non sur loccurrence
dun saut de ligne ; par exemple, elle ne trouvera pas de balise. Les caractres de retour
chariot apparaissent en tant quespaces en mode Cration, et non en tant que sauts de
ligne.
5. Utilisez les options suivantes pour largir ou limiter la recherche :
Respecter la casse Limite la recherche au texte dont la casse correspond celle du

texte recherch. Par exemple, si vous recherchez le franais, vous ne trouverez pas
le Franais.
Ignorer les espaces blancs Traite tout espace blanc comme sil sagissait dun simple
espace pour les besoins de la recherche. Par exemple, si cette option est active, ce
texte correspond ce texte et ce
texte, mais pas cetexte. Cette
option nest pas disponible lorsque loption Utiliser les expressions rgulires est
slectionne ; vous devez crire explicitement lexpression rgulire pour ignorer les
espaces blancs. Notez que les balises <p> et <br> ne sont pas comptes comme des
espaces blancs.
Mot entier Limite la recherche aux occurrences contenant un ou plusieurs mots entiers.
Remarque : cette option quivaut effectuer une recherche classique dune chane
commenant et se terminant par \b, lexpression rgulire de limite entre les mots.
Utiliser les expressions rgulires Fait en sorte que certains caractres et chanes
courtes (tels que ?, *, \w et \b) de la chane recherche soient interprts comme des
oprateurs dexpression rgulires. Par exemple, une recherche sur le c\w*\b noir
trouvera aussi bien le chien noir que le chapeau noir
Remarque : si vous travaillez en mode Affichage de code et modifiez le document, puis
essayez de rechercher et de remplacer tout lment autre que du code source, une bote
de dialogue saffiche et vous informe que Dreamweaver synchronise les deux fentres
avant deffectuer la recherche.
6. Pour rechercher des chanes sans les remplacer, cliquez sur Rechercher suivant ou sur
Rechercher tout :
Suivant Permet de passer loccurrence suivante dans le document actif et de la

340
slectionner. Sil sagit de la dernire occurrence de la chane recherche, Dreamweaver

passe au document suivant si la recherche porte sur plusieurs documents.
Rechercher tout Ouvre le panneau Recherche du groupe de panneaux Rsultats. Si la

recherche ne porte que sur un document, toutes les occurrences de la chane
recherche saffichent avec leur contexte. Si la recherche porte sur un dossier ou un site,
Rechercher tout affiche la liste des documents contenant la chane recherche.
7. Pour remplacer les chanes trouves, cliquez sur Remplacer ou sur Remplacer tout.
8. Cliquez sur Fermer lorsque vous avez termin.
Nouvelle recherche sans afficher la bote de dialogue Rechercher et

remplacer
Appuyez sur F3 (Windows) ou Commande+G (Macintosh).
Affichage du contexte dun rsultat donn

1. Choisissez Fentre > Rsultats pour afficher le panneau Rechercher.
2. Double-cliquez sur une ligne du panneau Rechercher.
Si vous effectuez une recherche dans le document actif, la fentre du document affiche
la ligne contenant le rsultat de la recherche.
Si la recherche porte sur plusieurs fichiers, le fichier contenant ce rsultat souvre.
Nouvelle excution dune mme recherche

Cliquez sur le bouton Rechercher et remplacer.
Arrt dune recherche en cours

Cliquez sur le bouton Arrter.
Recherche dune balise spcifique

La bote de dialogue Rechercher et remplacer vous permet de rechercher du texte et des balises dans un
document et de remplacer les occurrences trouves par un autre texte ou dautres balises.
2. Dans le menu droulant Rechercher, slectionnez Balise spcifique.
3. Slectionnez une balise spcifique ou [toute balise] dans le menu droulant situ
prs du menu droulant Rechercher ou tapez un nom de balise dans la zone de texte.
4. (Facultatif) Limitez la recherche laide de lun des modificateurs de balise suivants :
Avec attribut Permet de slectionner un attribut qui ne doit pas figurer dans la balise
pour que la correspondance soit trouve. Vous pouvez spcifier une valeur particulire
pour cet attribut ou choisir [toute valeur].
Sans attribut Permet de slectionner un attribut qui ne doit pas figurer dans la balise
pour que la correspondance soit trouve. Par exemple, vous pouvez rechercher toutes
341
les balises img nayant pas lattribut alt.
Contenant Indique un texte ou une balise qui doit figurer dans la balise dorigine pour
que la correspondance soit trouve. Par exemple, dans le code <b><font
size="4">heading 1</font></b>, la balise font est place lintrieur de la balise
b.
Ne contenant pas Indique un texte ou une balise qui ne doit pas figurer dans la balise
dorigine pour que la correspondance soit trouve.
Balise interne Spcifie une balise lintrieur de laquelle la balise cible doit tre incluse
pour que la correspondance soit trouve.
Pas de balise interne Spcifie une balise lintrieur de laquelle la balise cible ne doit
pas se trouver pour que la correspondance soit trouve.
5. (Facultatif) Pour cibler encore la recherche, cliquez sur le bouton plus (+) et rptez
ltape 3.
6. Si aucun modificateur de balise na t appliqu aux tapes 3 et 4, cliquez sur le bouton
moins (-) pour rduire le menu de modificateur de balise.
7. Si vous devez excuter une action lorsque la balise est trouve (telle que le retrait ou le
remplacement de cette balise), slectionnez cette action dans le menu contextuel Action,
puis, si ncessaire, spcifiez laction effectuer.
Recherche de texte spcifique (avance)

La bote de dialogue Rechercher et remplacer vous permet de rechercher du texte et des balises dans un
document et de remplacer les occurrences trouves par un autre texte ou dautres balises.
2. Dans le menu droulant Rechercher, choisissez Texte (avanc).
3. Tapez le texte dans la zone de texte situ prs du menu droulant Rechercher.
Par exemple, tapez le mot Indfini.
4. Slectionnez loption balise interne ou pas de balise interne, puis choisissez une balise
dans le menu droulant adjacent.
Par exemple, cliquez sur Dans la balise, puis slectionnez title.
5. (Facultatif) Cliquez sur le bouton plus (+) pour limiter la recherche laide dun des
modificateurs de balise suivants :
Avec attribut Permet de slectionner un attribut qui ne doit pas figurer dans la balise
pour que la correspondance soit trouve. Vous pouvez spcifier une valeur particulire
pour cet attribut ou choisir [toute valeur].
Sans attribut Permet de slectionner un attribut qui ne doit pas figurer dans la balise
pour que la correspondance soit trouve. Par exemple, vous pouvez rechercher toutes
les balises img nayant pas lattribut alt.
Contenant Indique un texte ou une balise qui doit figurer dans la balise dorigine pour
que la correspondance soit trouve. Par exemple, dans le code <b><font
size="4">heading 1</font></b>, la balise font est place lintrieur de la balise
b.
342
Ne contenant pas Indique un texte ou une balise qui ne doit pas figurer dans la balise
dorigine pour que la correspondance soit trouve.
Balise interne Spcifie une balise lintrieur de laquelle la balise cible doit tre incluse
pour que la correspondance soit trouve.
Pas de balise interne Spcifie une balise lintrieur de laquelle la balise cible ne doit
pas se trouver pour que la correspondance soit trouve.
6. (Facultatif) Pour cibler encore plus la recherche, rptez ltape 4.
Haut de la page
Dfinition dabrviations et dacronymes

Le langage HTML fournit des balises qui permettent de dfinir les abrviations et les acronymes que vous
employez sur votre page pour les moteurs de recherche, les correcteurs orthographiques, les programmes de
traduction automatique ou les synthtiseurs vocaux. Par exemple, vous pouvez indiquer que labrviation IM,
sur votre page, signifie ingnierie mcanique , ou que lacronyme OMS signifie Organisation mondiale
de la Sant .
1. Slectionnez labrviation ou lacronyme dans le texte de la page.
2. Choisissez Insertion > HTML > Objets texte > Abrviation ou Insertion > HTML >
Objets texte > Acronyme.
3. Saisissez la forme dveloppe de lacronyme ou de labrviation.
4. Entrez la langue, comme en pour langlais, de pour lallemand ou it pour litalien.
Haut de la page
Dfinition des prfrences de copie/collage

Vous pouvez configurer des prfrences de collage spcial utiliser par dfaut avec la commande Edition >
Coller lorsque vous collez du texte provenant dautres applications. Par exemple, si vous souhaitez coller
systmatiquement le texte uniquement, ou le texte avec un formatage de base, dfinissez loption par dfaut
dans la bote de dialogue Prfrences de copie/collage.
Remarque : pour coller du texte dans un document Dreamweaver, vous pouvez utiliser la commande Coller
ou Collage spcial. La commande Collage spcial permet de prciser le format du texte coll de diffrentes
faons. Par exemple, lorsque vous souhaitez coller le texte dun document Microsoft Word dj format dans
votre document Dreamweaver en ignorant son formatage initial afin dappliquer votre propre feuille de style
CSS, slectionnez le texte dans Word, copiez-le dans le presse-papiers, puis utilisez la commande Collage
spcial pour slectionner loption qui permet de ne coller que le texte.
Remarque : les prfrences dfinies dans la bote de dialogue Prfrences de copie/collage ne sappliquent
quaux lments colls dans la vue Cration.
1. Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences
(Macintosh).
2. Cliquez sur la catgorie Copier/Coller.
3. Dfinissez les options suivantes, puis cliquez sur OK.
Texte seul Permet de coller du texte non format. Si le texte dorigine est mis en forme,
ce formatage, y compris les sauts de ligne et de paragraphes, est supprim.
Texte structur Permet de coller du texte en conservant sa structure, mais sans le

343
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 avec formatage de base Permet de coller du texte structur 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 avec formatage complet Permet de coller du texte en conservant

toute sa structure, son formatage HTML et ses styles CSS.
Remarque : loption de formatage complet ne permet pas de conserver les styles CSS
provenant dune feuille de style externe, ni les styles provenant dapplications qui ne les
conservent pas lors dune copie dans le Presse-papiers.
Conserver les sauts de ligne Permet de conserver les sauts de ligne dans le texte
coll. Cette option est dsactive si vous avez slectionn Texte seul.
Nettoyage des espaces inter-paragraphes de Word Slectionnez cette option lorsque

vous avez slectionn Texte structur ou Formatage de base et souhaitez liminer
lespace supplmentaire qui spare les paragraphes lorsque vous collez votre texte.
Voir aussi
Tutoriel vido : Manipulation de texte en HTML
Extraction de texte de fichiers PSD
Affichage du code
Expressions rgulires
344
Texte en arabe et en hbreu

Flux de texte bidirectionnel
Editeur de balises
Sens du texte et unicode-bidi dans les rgles CSS
Proprits des tableaux
Proprits des balises Div
De nouvelles fonctions amliores pour travailler en arabe et en hbreu sont disponibles dans ldition Moyen-Orient et Afrique du Nord de ce
logiciel.
En haut
Flux de texte bidirectionnel
Dans les langues du Proche-Orient, le texte s'crit principalement de droite gauche (RTL). Toutefois, en rgle gnrale, le sens de texte le plus
frquemment utilis est bidirectionnel, un mlange de texte de gauche droite et de droite gauche. Un exemple de texte bidi est un paragraphe
qui comporterait du texte en arabe et du texte en anglais. Dans CS6, vous pouvez utiliser Dreamweaver pour taper du texte en arabe, hbreu ou
bidi dans le mode Cration et le mode Code.
Dans la version proche-orientale de Dreamweaver, l'attribut de sens Droite gauche peut tre appliqu deux objets notionnels : les paragraphes
et les caractres. L'attribut direction peut tre appliqu aux balises prises en charge par la spcification HTML. L'attribut direction peut avoir les
valeurs suivantes : ltr (par dfaut), rtl ou inherit.
Attribut direction dans le code CSS

Lorsque vous saisissez du texte en arabe ou en hbreu, ou du texte mixte, Dreamweaver reconnat les caractres comme tant afficher de
droite gauche (LTR) et les prsente de la faon approprie.
En haut
Editeur de balises
Vous pouvez appliquer les paramtres de sens et de langue l'aide de l'diteur de balises.
Editeur de balises
En haut
Sens du texte et unicode-bidi dans les rgles CSS
Vous pouvez spcifier le sens du texte sous la forme d'une rgle CSS. Dans la bote de dialogue Dfinition d'une rgle CSS, spcifiez les options
Sens Direction et bidi Unicode-options.
Options de langue dans les rgles CSS
En haut
Proprits des tableaux
Les tableaux de droite gauche sont aligns droite et les colonnes sont tries de droite gauche. Les poignes de redimensionnement se
trouvent sur le ct gauche. Lors de l'emploi de la touche TAB, le curseur se dplace de la droite vers la gauche.
Indiquez le sens du tableau l'aide du panneau Proprits.
345
Tableau de droite gauche
En haut
Proprits des balises Div

L'attribut Direction permet d'indiquer le sens de la balise Div dans les proprits.
Sens d'une balise Div
346
Modification en mode En direct

Le mode En direct utilise un moteur de rendu bas sur Chromium, de
sorte que votre contenu saffiche exactement de la mme manire
dans Dreamweaver et dans vos navigateurs prfrs. Pendant le
dveloppement, vous pouvez passer en mode En direct pour
prvisualiser rapidement la page. En outre, pour ne pas avoir
basculer entre les diffrente vues (modes Code et Cration), vous
pouvez modifier les lments HTML directement en mode En direct.
Tutoriel pratique
Cration, modification et
prvisualisation de pages web
grce aux nouvelles fonctions du
mode En direct
Le mode En direct actualise immdiatement afin dafficher les

modifications sur la page.
Pour modifier la page en mode En direct, vous pouvez utiliser les composants suivants :
Panneau DOM : (Windows > DOM) affiche la structure HTML du document et permet de
copier-coller, dupliquer, supprimer et rorganiser les lments dans la vue. Pour plus
dinformations, voir Panneau DOM.
Affichage dlment : saffiche au dessus de llment HTML slectionn en mode En
direct. La vue Affichage dlment permet dassocier des lments HTML des classes
et des ID. Pour plus dinformations, voir Association dlments HTML des classes et
des ID.
Inspecteur Proprits rapide : saffiche lorsque vous cliquez sur licne de sandwich
dans la vue Affichage dlment ou lorsque vous slectionnez du texte. Linspecteur
Proprits rapide permet de modifier les attributs dimage et la mise en forme du texte en
mode En direct. Pour plus dinformations, voir Inspecteur Proprits rapide.
Inspecteur Proprits du mode En direct : saffiche sous la fentre Document et vous
permet de modifier diffrentes proprits HTML et CSS en mode En direct. Pour plus
dinformations, voir Inspecteur Proprits du mode En direct.
Panneau Insertion : (Fentre > Insrer) permet de faire glisser les lments du panneau
directement en mode En direct. Pour plus dinformations, voir Insertion dlments
directement en mode En direct.
Attention : si votre page change de manire dynamique (en raison des scripts) ou si la fonctionnalit
Metarefresh est active, les modifications apportes en mode En direct peuvent tre perdues.
Conseils :
Si le mode En direct devient blanc lorsque vous modifiez la page, dsactivez le mode En
direct et ractivez-le.
Si les modifications ne sont pas refltes sur la page, cliquez sur le bouton Actualiser en
mode En direct.
Le contenu rendu dynamiquement par les bases de donnes ou JavaScript et les rgions non modifiables
dans les modles ne peuvent pas tre modifis en mode En direct. Lorsque vous cliquez sur ces lments
en mode En direct, une bordure grise saffiche autour afin dindiquer que les lments ne peuvent pas tre
modifis.
347
Remarque : en mode En direct, seules les options applicables pour llment slectionn sont accessibles
dans le menu principal. Les options qui ne sappliquent pas sont grises lorsque llment est slectionn.
Voir aussi :
Affichage dlment
Association dlments HTML des classes et des ID
Inspecteur Proprits rapide
Inspecteur Proprits du mode En direct
Modification des attributs HTML
Modification du texte directement en mode En direct
Mise en forme du texte
Insertion dlments directement en mode En direct
Outil Cadre de slection
Slection et glisser-dposer dlments
Navigation au clavier en mode En direct
Parcourir des lments de page
Parcourir des slecteurs
Dsactivation de la modification en mode En direct
Scnarios non pris en charge
Haut de la page
Affichage dlment
Avec la vue Affichage dlment, vous pouvez associer des lments HTML des classes et des ID
directement en mode En direct. La vue Affichage dlment donne des conseils pour ce qui concerne les
classes et les ID disponibles afin de vous aider afficher et choisir rapidement loption requise.
Elle vous permet galement de mettre en forme des tableaux. Pour plus dinformations, consultez ce lien.
Association dlments HTML des classes et des ID

Cliquez sur llment requis en mode En direct. La vue Affichage dlment apparat et affiche la classe et
lID actuellement associs.
Lorsque vous tes en mode En direct, vous pouvez galement cliquer sur llment HTML dans le panneau
DOM pour faire apparatre la vue Affichage dlment associe llment concern.
Pour dissocier llment HTML dune classe ou dun ID, cliquez sur x en regard de la
classe ou de lID.
348
Pour modifier la classe ou lID associ llment HTML, cliquez dans la case. Une liste
des classes et des ID disponibles saffiche. Cliquez sur loption requise.
Pour ajouter une classe ou un ID et lappliquer llment, cliquez sur + et entrez le
nom. Pour enregistrer les modifications, cliquez sur + ou appuyez sur Entre.
Vous pouvez ensuite utiliser CSS Designer pour dfinir un slecteur contenant cette classe ou cet ID.
Remarque : la vue Affichage dlment des lments transitoires ne se dplace pas avec les lments
lorsque la transition est dclenche. Toutefois, les modifications apportes avec la vue Affichage dlment
prennent effet mme si ce nest pas dans le mme emplacement que llment provisoire.
Haut de la page
Inspecteur Proprits rapide

Linspecteur Proprits rapide saffiche juste au dessus des lments slectionns en mode En direct. A
laide de cet Inspecteur Proprits, vous pouvez modifier des attributs ou formater du texte en mode En
direct.
Inspecteur Proprits rapide apparaissant juste au dessus des lments de page en mode En direct
Pour afficher ou masquer linspecteur Proprits rapide, appuyez sur Ctrl+Alt+H (Win)/CMD+Ctrl+H (Mac).
Remarque : licne de navigation dans le code nest pas affiche en mode En direct lorsque vous utilisez
linspecteur Proprits rapide.
Voir aussi :
Haut de la page
Inspecteur Proprits du mode En direct

Linspecteur Proprits du mode En direct est lInspecteur Proprits traditionnel disponible sous la fentre
Document.
Linspecteur Proprits en mode En direct permet dexaminer et de modifier les proprits les plus frquentes
de llment de la page slectionne, tel que le texte ou un objet insr. Le contenu de linspecteur
Proprits du mode En direct varie en fonction de llment slectionn.
Remarque : linspecteur Proprits du mode En direct nest pas disponible dans les pages grille fluide.
349
Pour accder laide pour un inspecteur Proprits donn, cliquez sur le bouton Aide dans le coin suprieur
droit de linspecteur Proprits. Vous pouvez galement slectionner Aide dans le menu Options dun
inspecteur Proprits.
Les lments suivants peuvent tre modifis laide de linspecteur Proprits du mode En direct :
HTML
FormImage
CSS
FormFile
Image
FormCheckBox
Table
FormColor
Media Uniquement audio

HTML5 et vido HTML5
FormDate
Anchor
Form
FormButton
FormTextArea
FormSubmitButton
FormRange
FormRadioButton
FormList
FormDateTime
FormDateTimeLocal
FormMonth
FormTime
FormWeek
FormNumber
FormLabel
FormHidden
FormGeneric
Remarque : linterface utilisateur jQuery et les proprits associes au modle ne sont pas modifiables dans
linspecteur Proprits du mode En direct.
Haut de la page

En mode En direct, vous pouvez rapidement ajouter, modifier ou supprimer les attributs HTML des images
laide de linspecteur Proprits rapide.
Linspecteur Proprits rapide pour les images apparat lorsque vous cliquez sur licne en forme de
sandwich . En fonction de lespace disponible, linspecteur Proprits saffiche sur la droite, sur la gauche,
en haut, en bas ou au-dessus de limage. Vous pouvez dplacer linspecteur Proprits et le positionner o
vous le souhaitez.
Inspecteur Proprits rapide pour la modification dattributs
350
Pour modifier les attributs, cliquez sur licne en forme de sandwich dans linspecteur Proprits rapide. Vous
pouvez modifier la source de limage tout comme dautres attributs, tels que les attributs titre et
alt ; les modifications sont instantanment rpercutes. De mme, vous pouvez ajuster la largeur et la
hauteur de limage en mode En direct.
Les modifications apportes sont enregistres lorsque vous :
Cliquez nimporte o en dehors de linspecteur Proprits
Appuyez sur Entre
Appuyez sur la touche de tabulation pour modifier un autre attribut dans linspecteur
Proprits
Enregistrez le fichier
Lorsque les images sont charges dynamiquement, vous pouvez utiliser linspecteur Proprits rapide de
limage pour contrler rapidement les attributs dfinis pour celle-ci.
Inspecteur Proprits rapide pour les images dynamiques
Haut de la page

Vous pouvez dsormais modifier des lments de texte directement en mode En direct. Vous pouvez
simplement double-cliquer sur llment de texte pour le modifier. Ou vous pouvez cliquer sur llment de
texte pour faire apparatre la vue Affichage dlment, puis appuyer sur Entre.
Remarque : lorsque vous appuyez sur Entre aprs tre pass en mode modification, les rsultats varient
en fonction de lemplacement du point dinsertion avant que vous nutilisiez la touche Entre. Les
modifications sont semblables ce qui se produit lorsque vous appuyez sur la touche Entre lorsque vous
modifiez du texte en mode Cration.
La bordure orange autour de llment de texte indique que le mode est dfini sur modification.
351
Le point dinsertion est plac lemplacement du double-clic. Pour slectionner tout le texte de llment,
cliquez trois fois sur llment de texte.
Remarque : si vous supprimez tout le texte et le saisissez nouveau, les balises strong et em sont
rordonnes et rorganises.
Les fonctions Couper, Copier-Coller et Annuler-Rtablir sont prises en charge lorsque vous modifiez du texte
en mode En direct. Lorsque vous collez du texte, celui-ci est copi en texte brut.
Le tableau ci-aprs rpertorie les scnarios pris et non pris en charge lors de la modification de texte en
mode En direct :
Pris en charge
Non pris en charge

Modification des balises endommages ou non valides. Si le
code HTML contient des balises endommages ou non valides,
la modification de ces balises se fait suivant la manire dont les
navigateurs les peroivent :
Tous les lments

HTML pouvant
contenir du texte
Si les navigateurs corrigent le code HTML, par exemple, sils

ferment la balise endommage, vous pouvez tre autoris
modifier les balises en mode En direct.
Si les navigateurs ajoutent une nouvelle balise lors du rendu,
vous ne pouvez pas modifier les balises endommages ou
non valides.
Fichiers HTML
drivs de modles
en mode En direct
Modification des pages jQuery
Balises
structurelles
contenant des
lments intgrs ;
ces donnes sont
prsentes dans
une mme zone
pour modification
Modification de balises ayant des contenus statiques et

dynamiques. Bien que vous puissiez modifier les slecteurs de
ces balises, vous ne pouvez plus modifier le texte directement en
mode En direct. Si vous double-cliquez sur de ces lments en
mode En direct, une bordure grise les entourant apparat,
indiquant que la modification de texte nest pas prise en charge.
Texte statique dans

des pages
dynamiques
Pages grille fluide
en mode En direct
sans grille
Texte contenant
des entits
352

Vous pouvez dsormais modifier le formatage du texte et du texte dhyperlien en mode En direct. Pour
afficher les options de formatage du texte, choisissez un mot ou une phrase. Linspecteur Proprits rapide
avec les options de mise en forme saffiche juste au dessus du texte slectionn.
Inspecteur Proprits rapide pour la mise en forme du texte
Haut de la page
Insertion dlments directement en mode En direct

Dans le panneau Insertion, vous pouvez directement faire glisser les lments lemplacement souhait
dans le document en mode En direct. Les aides visuelles du mode En direct, telles que les Guides en direct
et les icnes DOM, vous aident positionner les lments dplacs par rapport un lment survol.
Les guides en direct (en vert) saffichent lorsque vous passez le curseur sur les diffrents lments de la
page avant de faire glisser llment. Ces guides indiquent les positions o llment peut tre insr. Ils
peuvent apparatre en haut, en bas, gauche, droite de llment survol.
Au-dessus et en dessous - Saffiche lorsque vous survolez tous les types

dlments/balises, lexception des balises incorpores. Lorsque la souris survole les
premiers 50 % (partie suprieure) de llment, les guides saffichent au-dessus de
llment survol. Lorsque la souris survole les derniers 50 % (partie infrieure) de
llment, les guides saffichent en dessous de llment survol.
Guides en direct en haut et en bas des lments survols
353
Gauche et droite - Saffiche lorsque vous survolez des balises incorpores, par exemple
les balises <a>, <span> ou les balises pour lesquelles la proprit Flottante est
dfinie.
Guides en direct sur la droite et la gauche des lments survols
Quand vous marquez une pause de quelques instants avant de dposer un lment, licne DOM (</>)
apparat. Lorsque vous passez la souris sur cette icne, le panneau DOM souvre et vous pouvez dposer
llment dans la structure DOM du document.
Icne DOM permettant une insertion prcise
Pour insrer des lments directement en mode En direct, procdez comme suit :
1. Passez en mode En direct.
2. Dans le panneau Insertion, cliquez sur llment requis et faites-le glisser dans le
document. Vous pouvez galement simplement cliquer sur llment requis dans le
panneau Insertion.
Conseil : si vous ne pouvez pas faire glisser un lment du panneau Insertion sur la
page, redmarrez votre ordinateur et ressayez.
3. Dposez llment en haut, en bas, droite ou gauche dun lment en fonction des
Guides en direct. Vous pouvez aussi dposer llment un emplacement prcis dans la
354
structure du document en cliquant sur </> et en utilisant le panneau DOM.

Llment est insr dans la page et mis en surbrillance.
Remarque : le panneau Insertion nest pas disponible en mode En direct pour les pages grille fluide.
Haut de la page
Outil Cadre de slection

Loutil Cadre de slection vous permet de slectionner facilement un bloc de texte en cliquant et en faisant
glisser le curseur lintrieur de la balise en mode En direct. Lorsque vous cliquez et faites glisser un bloc de
texte dans une version de Dreamweaver antrieure la 2014.1, llment se dplace dun seul bloc.
Remarque : lutilisation de loutil Cadre de slection en mode En direct est limite aux oprations prises en
charge par les navigateurs.
Haut de la page
Slection et glisser-dposer dlments

En mode En direct, vous pouvez dplacer un lment en cliquant sur le nom de la balise et en le faisant
glisser jusqu lendroit souhait. Quand vous cliquez sur le nom dune balise, un curseur en forme de main
apparat, pour vous indiquer que vous pouvez faire glisser la balise depuis ce point. Ds que vous
commencez faire glisser la balise, des guides vous aident la placer prcisment au bon endroit.
En cliquant sur le nom de la balise dans la vue En direct, vous pouvez slectionner lensemble de son
contenu dans le mode Code.
Haut de la page
Navigation au clavier en mode En direct

Vous pouvez parcourir des lments de page ou des slecteurs en mode Affichage dlment laide du
clavier afin dacclrer le processus de modification.
Parcourir des lments de page

Les touches flches Haut et Bas permettent de parcourir des lments de page en mode En direct. Le
balayage repose sur la structure du DOM du document.
La navigation au clavier en mode En direct facilite laccs aux lments imbriqus et entours.
Lorsque vous accdez un lment laide des touches flches Haut ou Bas, la vue Affichage dlment
pour cet lment apparat. Vous pouvez ensuite accder aux slecteurs en mode Affichage dlment ou
appuyer sur Entre pour modifier le texte directement en mode En direct.
355
Dans cet exemple, limage est tout

dabord active. Lorsque vous
appuyez sur la touche flche Bas,
le paragraphe en dessous de
limage est slectionn, comme
illustr dans limage suivante.
Dans cet exemple, le paragraphe

est slectionn. Lorsque vous
appuyez nouveau sur la touche
flche Bas, llment suivant de
la structure DOM, le texte en gras,
est slectionn, comme illustr
dans limage suivante.
Le texte en gras est slectionn.
Parcourir des slecteurs

Appuyez sur la touche de tabulation pour parcourir les slecteurs en mode Affichage dlment. Le slecteur
actif saffiche avec une bordure ambre comme illustr ci-dessous :
Le slecteur actif est en surbrillance avec une bordure ambre.
Si vous appuyez sur la touche de tabulation aprs le dernier slecteur appliqu, la zone de texte dajout de
slecteur apparat.
Vous pouvez utiliser Ctrl+[ ou Cmd+[ pour slectionner llment parent et Ctrl+] ou Cmd+] pour
slectionner llment enfant.
Haut de la page
Dsactivation de la modification en mode En direct

Si vous ne souhaitez pas utiliser la vue Affichage dlment et
linspecteur Proprits rapide en mode En direct, vous pouvez
dsactiver ces fonctions ddition.
(Win) Ctrl+Alt+H
(Mac) Cmd+Ctrl+H
1. Passez en mode En direct et cliquez sur les options daffichage en direct ( ).
356
2. Slectionnez Masquer laffichage en direct.
Dsactivation de linspecteur Proprits rapide et de la vue Affichage dlment
Haut de la page
Scnarios non pris en charge

Les fichiers de modle de Dreamweaver ne peuvent pas tre modifis en mode En
direct.
Les balises ayant des contenus statiques et dynamiques. Bien que vous puissiez modifier
les slecteurs de ces balises, vous ne pouvez pas modifier le texte en mode En direct. Si
vous double-cliquez sur ces lments en mode En direct, une bordure grise les entourant
apparat, indiquant que la modification de texte nest pas prise en charge.
Les balises auxquelles des slecteurs de pseudo sont appliqus. Lorsque vous tentez de
modifier de tels lments en mode En direct, vous pouvez avoir des rsultats inattendus.
357
Panneau DOM
Le panneau DOM prsente une arborescence HTML interactive des
contenus statiques et dynamiques. Cette vue permet de mettre
visuellement en correspondance les lments en mode En direct avec
leurs balises HTML et les slecteurs appliqus dans CSS Designer.
Via le panneau DOM, vous pouvez galement apporter des
modifications la structure HTML, dont leffet est immdiatement
visible en mode En direct.
Tutoriel dtaill
Comment visualiser et modifier
visuellement la structure HTML
dans Dreamweaver (30 min)
Pour ouvrir le panneau DOM, slectionnez Fentre > DOM. Vous pouvez galement utiliser les raccourcis
clavier Ctrl + / (Windows) ou Cmd + / (Mac) pour ouvrir le panneau DOM.
Lorsque vous faites glisser des lments pour les insrer directement en mode En direct, licne </> apparat
avant que vous ne dposiez llment. Vous pouvez cliquer sur cette icne pour ouvrir le panneau DOM et
insrer llment lendroit appropri dans la structure du document. Pour plus dinformations, voir Insertion
dlments directement en mode En direct.
En mode Code ou Cration, le panneau DOM affiche uniquement les lments statiques ; en mode En direct,
il affiche aussi bien les lments statiques que dynamiques.
Dans les documents grille fluide, le panneau DOM vous permet de visualiser la structure du DOM HTML,
mais pas de modifier la structure HTML.
Remarque : dans le panneau DOM, vous pouvez modifier uniquement le contenu statique. Les lments
dynamiques ou en lecture seule sont signals en gris fonc.
Panneau DOM
358
Vous pouvez dplacer le panneau DOM pour le positionner o vous le souhaitez dans linterface utilisateur.
Vous pouvez galement lancrer le long dautres panneaux.
Haut de la page
Utilisation du panneau DOM

1. Ouvrez le document de votre choix, puis slectionnez Fentre > DOM pour afficher le
panneau DOM.
2. Passez en mode En direct et cliquez sur llment que vous souhaitez inspecter ou
modifier.
Le balisage HTML de llment slectionn apparat en surbrillance dans le panneau
DOM.
Le slecteur appliqu apparat en surbrillance dans CSS Designer.
Le code correspondant apparat en surbrillance en mode Code.
La balise correspondante apparat en surbrillance (en bleu) dans le slecteur de
balises.
Vous avez galement la possibilit de slectionner un lment HTML dans le panneau
DOM. Lorsque vous cliquez sur un lment dans le panneau DOM :
Le mode En direct dfile jusqu llment correspondant.
Si le mode Code est ouvert, celui-ci dfile jusquau code correspondant llment.
CSS Designer (volet Slecteurs) dfile jusquau slecteur correspondant le plus
proche (comme si vous cliquiez sur llment en mode En direct).
La balise apparat en surbrillance dans le slecteur de balises.
Cette synchronisation entre les diffrentes vues et CSS Designer permet de visualiser les
principales caractristiques de la balise HTML et du style associs llment
slectionn.
3. Poursuivez la modification de llment comme vous le souhaitez (modifications HTML

ou CSS). Pour plus dinformations sur lutilisation du panneau DOM et la manire dont il
permet de modifier les balises HTML, voir Modification de la structure HTML laide du
panneau DOM. Pour plus dinformations sur CSS Designer, voir Panneau CSS Designer.
Haut de la page
Modification de la structure HTML laide du panneau DOM

Llment actuellement slectionn sur la page est mis en surbrillance dans le panneau DOM. Vous pouvez
accder tout nud ou lment avec les touches flches.
Pour slectionner un lment ou un nud, cliquez dessus. Pour

dvelopper ou rduire un lment ou un nud, cliquez sur la
balise HTML ou double-cliquez sur le slecteur droite de la
balise.
Pour dupliquer un lment ou un nud, cliquez dessus avec le
bouton droit de la souris, puis cliquez sur Dupliquer. Lorsque vous
dupliquez un lment associ un ID, cet ID est incrment pour
le nouvel lment (dupliqu).
Dupliquer - Ctrl + D
(Windows) / Cmd + D (Mac)
Supprimer - Suppr ou Retour
arrire
Copier - Ctrl + C (Windows) /
Cmd + C (Mac)
Coller - Ctrl + V (Windows) /
Cmd + V (Mac)
Pour copier un lment ou un nud, cliquez dessus avec le

bouton droit de la souris, puis cliquez sur Copier. Si vous avez
copi un lment avec enfants, les lments enfant sont
galement copis.
Annuler - Ctrl + Z (Windows) /

Cmd + Z (Mac)
359
Pour coller un lment ou un nud, cliquez sur llment ou le

nud en-dessous duquel vous voulez imbriquer les lments
copis. Cliquez ensuite avec le bouton droit de la souris sur
llment ou le nud et cliquez sur Coller.
Rtablir - Ctrl + Y (Windows) /

Cmd + Y (Mac)
Pour coller un lment copi en tant quenfant dun lment ou

nud spcifique, cliquez avec le bouton droit de la souris sur cet
lment ou nud (parent), puis cliquez sur Coller en tant
quenfant.
Pour dplacer ou rorganiser des lments, faites-les glisser vers
lemplacement souhait dans le panneau DOM.
Une ligne verte indique o llment dplac sera positionn. Si
vous dplacez llment au-dessus de llment mis en
surbrillance en gris (lment de rfrence), llment dplac est
dfini en tant que premier enfant de llment de rfrence.
Pour supprimer un lment ou un nud, cliquez dessus avec le
bouton droit de la souris, puis cliquez sur Supprimer.
Vous pouvez annuler (Ctrl/Cmd + Z) ou rtablir (Ctrl/Cmd + Y) les
oprations effectues dans le panneau DOM.
Remarque : en rgle gnrale, lorsquune page est modifie, le bouton Actualiser dans la barre doutils du
document se transforme en bouton Arrter indiquant que la page se recharge. Lorsque la page est recharge,
le bouton Actualiser saffiche nouveau pour indiquer que la page est compltement charge.
Lorsque vous apportez des modifications dans le panneau DOM, le chargement de la page peut prendre un
certain temps, mme une fois que le bouton Actualiser est nouveau affich aprs stre transform en
bouton Arrter.
Dplacement dlments HTML laide du mode

Affichage rapide des lments
Options ddition dans le panneau DOM
A. Emplacement o est positionn llment

dplac B. Elment de rfrence C. Elment
dplac
Important : si votre page contient du code JavaScript, le menu contextuel du panneau DOM saffiche
pendant quelques instants, puis devient indisponible. Pour utiliser le menu contextuel, masquez la vue En
direct (Options de laffichage en direct > Masquer laffichage en direct), puis dsactivez JavaScript (Options
360
de laffichage en direct > Dsactiver JavaScript).
361
Dfinition des proprits de texte dans linspecteur Proprits

A propos du formatage de texte (CSS et HTML)
Modification de rgles CSS dans linspecteur Proprits
Dfinition de formatage HTML dans linspecteur Proprits
Modification du nom dune classe partir de linspecteur Proprits HTML
Vous pouvez utiliser linspecteur Proprits de texte pour appliquer un formatage HTML ou CSS. Lorsque vous appliquez un formatage HTML,
Dreamweaver ajoute des proprits au code HTML du corps de la page. Lorsque vous appliquez un formatage CSS, Dreamweaver crit les
proprits dans len-tte du document ou dans une feuille de style spare.
Remarque : Lorsque vous crez des styles CSS intgrs, Dreamweaver ajoute directement le code dattribut du style au corps de la page.
Haut de la page
A propos du formatage de texte (CSS et HTML)

Les mthodes de formatage du texte dans Dreamweaver sapparentent celles dun logiciel de traitement de texte standard. Vous pouvez dfinir
le style de formatage par dfaut (Paragraphe, En-tte 1, En-tte 2, etc.) pour un bloc de texte, modifier la police, la taille la couleur et lalignement
du texte slectionn ou appliquer des styles de texte tels que gras, italique, code (texte chasse fixe) et soulign.
Dreamweaver comprend deux inspecteurs Proprits, intgrs pour nen faire quun : linspecteur Proprits CSS et linspecteur Proprits HTML.
Lorsque vous utilisez linspecteur Proprits CSS, Dreamweaver met en forme le texte laide de feuilles de style en cascade (CSS). Les styles
CSS offrent aux concepteurs et dveloppeurs Web un meilleur contrle de laspect de la page Web tout en proposant des fonctions qui permettent
damliorer laccessibilit et de rduire la taille des fichiers. Linspecteur Proprits CSS permet daccder des styles existants et den crer de
nouveaux.
CSS permet de modifier le style dune page Web sans compromettre sa structure. En sparant les lments de conception visuelle (polices,
couleurs, marges, etc.) des lments logiques internes la structure dune page Web, CSS offre aux concepteurs un contrle la fois visuel et
typographique sans nuire lintgrit du contenu. De plus, dfinir 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 despacement) permet un chargement plus rapide,
simplifie la maintenance du site et fournit un point central partir duquel il est possible de contrler les attributs de conception sur plusieurs pages
Web.
Vous pouvez stocker les styles crs laide de CSS directement dans le document ou, pour disposer de davantage de puissance et de flexibilit,
vous pouvez les stocker dans une feuille de style externe. Si vous associez une feuille de style externe plusieurs pages Web, toutes les pages
sadapteront automatiquement si vous effectuez une modification dans cette feuille de style. Pour accder toutes les rgles CSS dune page,
utilisez le panneau Styles CSS (Fentre > Styles CSS). Pour accder aux rgles qui sappliquent la slection actuelle, utilisez le panneau Styles
CSS (mode Actuel) ou le menu Rgle cible de linspecteur Proprits CSS.
Si vous le prfrez, vous pouvez mettre en forme le texte de vos pages Web laide de balises de marquage HTML. Pour employer des balises
HTML au lieu de CSS, mettez le texte en forme laide de linspecteur Proprits HTML.
Remarque : Vous pouvez combiner des formatages CSS et HTML 3.2 dans une mme page. Le formatage est appliqu de faon hirarchique :
le formatage HTML 3.2 supplante celui appliqu par des feuilles de style CSS externes et le formatage CSS intgr dans un document supplante
les styles CSS externes.
Haut de la page
Modification de rgles CSS dans linspecteur Proprits

1. Si ce nest pas dj fait, ouvrez linspecteur Proprits (Fentre > Proprits) puis cliquez sur le bouton CSS.
Placez le point dinsertion dans un bloc de texte qui a t mis en forme laide dune rgle que vous voulez modifier. La
rgle saffiche dans le menu Rgle cible.
Choisissez une rgle dans le menu Rgle cible.
362
3. Apportez les modifications dsires la rgle laide des diffrentes options de linspecteur Proprits CSS.
Rgle cible La rgle que vous modifiez dans linspecteur Proprits CSS. Lorsquun style existant est appliqu au texte, la
rgle qui influe sur le format du texte saffiche lorsque vous cliquez dans le texte sur la page. Vous pouvez galement utiliser
le menu Rgle cible pour crer de nouvelles rgles CSS et de nouveaux styles intgrs, ou pour appliquer des classes
existantes au texte slectionn. Si vous crez une nouvelle rgle, vous devez remplir la bote de dialogue Nouvelle rgle
CSS. Pour plus dinformations, consultez les liens dans le bas de cette rubrique.
Modifier la rgle Ouvre la bote de dialogue Dfinition des rgles CSS pour la rgle cible. Par contre, si vous choisissez
Nouvelle rgle CSS dans le menu Rgle cible puis que vous cliquez sur le bouton Modifier la rgle, Dreamweaver ouvre la
bote de dialogue Dfinition de nouvelle rgle CSS.
Panneau CSS Ouvre le panneau Styles CSS et affiche les proprits de la rgle cible en mode Actuel.
Police Modifie la police de la rgle cible.
Taille Dfinit la taille de police de la rgle cible.
Couleur du texte Dfinit la couleur slectionn comme couleur de police dans la rgle cible. Slectionnez une couleur
scurise pour le Web en cliquant sur le slecteur de couleur ou tapez directement une valeur hexadcimale (par exemple,
#FF0000) dans le champ de texte adjacent.
Gras Ajoute la proprit gras la rgle cible.
Italique Ajoute la proprit italique la rgle cible.
Aligner gauche, Centrer et Aligner droite Ajoute les proprits dalignement respectives la rgle cible.
Remarque : Les proprits Police, Taille, Couleur du texte, Gras, Italique et Alignement affichent toujours les proprits de la
rgle qui sapplique la slection actuelle dans la fentre de document. Lorsque vous modifiez lune de ces proprits, vous
influez sur la rgle cible.
Haut de la page
Dfinition de formatage HTML dans linspecteur Proprits

1. Si ce nest pas dj fait, ouvrez linspecteur Proprits (Fentre > Proprits) puis cliquez sur le bouton HTML.
2. Slectionnez le texte que vous souhaitez mettre en forme.
3. Dfinissez les options que vous voulez appliquer au texte slectionn :
Format Dfinit le style de paragraphe du texte slectionn. Paragraphe applique un format par dfaut pour une balise <p>,
En-tte 1 ajoute une balise H1, et ainsi de suite.
ID Attribue un ID votre slection. Le menu ID prsente (le cas chant) tous les ID non utiliss et dclars dans le
document.
Classe Affiche le style de classe appliqu au texte slectionn. Si aucun style nest appliqu la slection, la mention
Aucun style CSS apparat dans le menu droulant. Si plusieurs styles sont appliqus la slection, le menu est vide.
Le menu Style permet deffectuer les oprations suivantes :
Slectionnez le style appliquer la slection.
363
Choisissez Aucun pour ne plus appliquer le style slectionn.

Pour renommer le style, choisissez Renommer.
Slectionnez Attacher une feuille de style pour ouvrir une bote de dialogue qui vous permet dattacher une feuille de style
externe la page.
Gras Applique soit <b> soit <strong> au texte slectionn en fonction de la prfrence de style dfinie dans la catgorie
Gnral de la bote de dialogue Prfrences.
Italique Applique soit <i> soit <em> au texte slectionn en fonction de la prfrence de style dfinie dans la catgorie
Gnral de la bote de dialogue Prfrences.
Liste non ordonne Cre une liste puces partir du texte slectionn. Si aucun texte nest slectionn, une nouvelle liste
puces est ouverte.
Liste numrote Cre une liste numrote partir du texte slectionn. Si aucun texte nest slectionn, une nouvelle liste
numrote est ouverte.
Blockquote et Supprimer Blockquote Augmente ou supprime la mise en retrait du texte slectionn, en insrant ou
supprimant la balise blockquote. Au sein dune liste, lajout dun retrait cre une liste imbrique et sa suppression ramne
les lments de la liste au niveau parent.
Lien Cre une liste puces partir du texte slectionn. Cliquez sur licne de dossier pour rechercher un fichier de votre
site, faites glisser licne Pointer vers un fichier sur un fichier du panneau Fichiers ou faites glisser un fichier du
panneau Fichiers sur la zone.
Titre Dfinit linfobulle textuelle dun lien hypertexte.
Cible Spcifie la fentre ou le cadre dans lequel sera charg le document li :

_blank charge le document li dans une nouvelle fentre, sans nom, du navigateur.
_parent charge le document li dans le jeu de cadres parent (ou dans la fentre parente) du cadre contenant le lien. Si
le cadre contenant le lien nest pas imbriqu, le document li sera charg dans la fentre de base du navigateur.
_self charge le document li dans le mme cadre (ou la mme fentre) que le lien. Il sagit de la cible par dfaut, de
sorte quil est le plus souvent inutile de la spcifier.
_top charge le document li dans la fentre de base du navigateur, en supprimant tous les cadres.
Haut de la page
Modification du nom dune classe partir de linspecteur Proprits HTML

Dreamweaver affiche toutes les classes disponibles pour votre page dans le menu Classe de linspecteur Proprits HTML. Vous pouvez
renommer des styles dans cette liste en choisissant loption Renommer, la fin de la liste des styles de classes.
1. Choisissez Renommer dans le menu droulant Style de linspecteur Proprits du texte.
2. Slectionnez le style renommer dans le menu contextuel Renommer un style.
3. Entrez un nouveau nom dans la zone Nouveau nom, puis cliquez sur OK.
364
Vrification de l'orthographe d'une page Web

La commande Orthographe permet de vrifier l'orthographe du document actif. Le document doit 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 vrifier l'orthographe du fichier actuellement ouvert dans la fentre de document. Il ne peut pas
vrifier l'orthographe de tous les fichiers d'un site en mme temps.
Par dfaut, le correcteur orthographique utilise le dictionnaire Anglais US. Pour changer de dictionnaire, choisissez Edition > Prfrences >
Gnral (Windows) ou Dreamweaver > Prfrences > Gnral (Macintosh), puis choisissez le dictionnaire que vous souhaitez utiliser dans le
menu droulant Dictionnaire du correcteur d'orthographe.
1. Choisissez Commandes > Orthographe ou appuyez sur les touches Maj+F7.
Lorsque Dreamweaver ne reconnat pas un mot, la bote de dialogue Vrifier l'orthographe s'affiche.
2. Slectionnez l'option correspondant au traitement que vous souhaitez appliquer l'occurrence.
Ajouter Ajoute le mot non reconnu 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 slectionn 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 entres qui ont t ajoutes aux dictionnaires personnels.
365

Vous pouvez importer des donnes tabulaires dans un document en enregistrant d'abord ces fichiers (tels que des fichiers Microsoft Excel ou
d'une base de donnes) sous forme de fichiers texte dlimits.
Vous pouvez importer et mettre en forme des donnes tabulaires, ainsi qu'importer du text partir de documents HTML Microsoft Word.
Vous pouvez 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 > Importer > Importer les donnes tabulaires ou Insertion > Objets du tableau > Importer les donnes
tabulaires.
2. Recherchez le fichier souhait ou entrez son nom dans la zone de texte.
3. Slectionnez le dlimiteur utilis lors de l'enregistrement du fichier en tant que texte dlimit. Les options sont Tab, Virgule,
Point-virgule, Deux points et Autre.
Si vous slectionnez Autre, un champ vierge s'affiche ct de l'option. Entrez le caractre utilis comme dlimiteur.
4. Utilisez les options restantes pour formater ou dfinir le tableau dans lequel importer les donnes, puis cliquez sur OK.
Voir aussi
366

Vous pouvez insrer 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 reoit le code HTML converti et l'insre dans votre page Web. La taille du fichier, aprs rception du
code HTML converti par Dreamweaver, doit tre infrieure 300 Ko.
Au lieu d'importer tout le contenu d'un fichier, vous pouvez galement coller une partie du document Word et protger 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 insrer un
lien vers le document.
1. Ouvrez la page Web dans laquelle vous souhaitez copier le document Word ou Excel.
2. En mode Cration, procdez de l'une des manires suivantes pour slectionner le fichier :
Dplacez le fichier de son emplacement actuel vers la page o le contenu doit s'afficher.
Choisissez Fichier > Importer > Document Word ou Fichier > Importer > Document Excel.
3. Dans la bote de dialogue Insrer un document, recherchez le fichier ajouter, slectionnez une option de formatage dans le
menu Mise en forme situ dans le bas de la bote de dialogue, puis cliquez sur Ouvrir.
Texte seul Permet d'insrer du texte non format. Si le texte d'origine est mis en forme, tout le formatage est supprim.
Texte structur Permet d'insrer 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 avec formatage de base Permet d'insrer du texte structur 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 avec formatage complet Permet d'insrer du texte en conservant toute sa structure, son formatage HTML
et ses styles CSS.
Nettoyage des espaces inter-paragraphes de Word Permet d'liminer les espaces superflus entre les paragraphes lorsque
vous collez le texte alors que l'option Texte structur ou Mise en forme de base est slectionne.
Le contenu du document Word ou Excel s'affiche dans votre page.
367
Cration d'un lien vers un document Word ou Excel

Vous pouvez insrer un lien vers un document Microsoft Word ou Excel dans une page existante.
1. Ouvrez la page o le lien doit tre affich.
2. Faites glisser le fichier de son emplacement actuel vers la page Dreamweaver, en plaant le lien l'emplacement voulu.
3. Slectionnez Crer un lien, puis cliquez sur OK.
4. Si le document vers lequel vous crez un lien rside hors du dossier racine de votre site, Dreamweaver vous invite le copier
dans ce dossier.
En copiant le document dans le dossier racine du site, vous tes assur que le document sera disponible lors de la
publication du site Web.
5. Lorsque vous chargez votre page sur le serveur Web, vous devez galement charger le fichier Word ou Excel.
Votre page contient dsormais un lien vers le document Word ou Excel. Le texte du lien est le nom du fichier li. Si vous le
souhaitez, vous pouvez modifier ce texte dans la fentre du document.
368
Utilisation de mise en forme HTML

Mise en forme des paragraphes
Modification de la couleur du texte
Alignement du texte
Mise en retrait du texte
Application de styles de police
Mme si CSS est la mthode de mise en forme de texte privilgie, Dreamweaver permet d'employer du code HTML cette fin.
Haut de la page
Mise en forme des paragraphes
Utilisez le menu Format de l'inspecteur Proprits HTML ou le sous-menu Format > Format de paragraphe pour appliquer des balises standard de
paragraphe et d'en-tte.
1. Placez le point d'insertion dans le paragraphe, ou slectionnez une partie du texte du paragraphe.
2. Choisissez Texte > Format de paragraphe ou le menu Format de l'inspecteur Proprits, puis slectionnez une option :
Choisissez un format de paragraphe (par exemple, En-tte 1, En-tte 2, Texte pr-format, etc.). La balise HTML
associe au style choisi (par exemple, h1 pour En-tte 1, h2 pour En-tte 2, pre pour Texte pr-format, etc.) est
applique tout le paragraphe.
Choisissez Aucun pour supprimer un format de paragraphe.
Lorsque vous appliquez une balise d'en-tte un paragraphe, Dreamweaver insre automatiquement la ligne de texte
suivante comme un paragraphe. Pour modifier ce paramtre, choisissez Edition > Prfrences (Windows) ou
Dreamweaver > Prfrences (Macintosh), puis assurez-vous que l'option Passer en paragraphe normal aprs le titre est
dsactive dans les Options d'dition de la catgorie Gnral.
Haut de la page
Modification de la couleur du texte

Vous pouvez modifier la couleur par dfaut de tout le texte d'une page, ou la couleur du texte slectionn sur la page.
Dfinition des couleurs par dfaut du texte sur une page

Choisissez Modifier > Proprits de la page > Apparence (HTML) ou Liens (HTML), puis choisissez la couleur pour les options Couleur du
texte, Couleur du lien, Liens visits 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 spcifie.
Modification de la couleur du texte slectionn

Choisissez Format > Couleur, slectionnez une couleur dans le slecteur systme, puis cliquez sur OK.
Haut de la page
Alignement du texte
Vous pouvez aligner du texte l'aide de code HTML en utilisant le menu Format > Aligner. Vous pouvez centrer un lment sur la page l'aide
de la commande Format > Aligner > Centre.
Alignement de text sur une page

1. Slectionnez le texte aligner ou insrez le pointeur au dbut du texte.
2. Choisissez Format > Aligner, puis slectionnez une commande d'alignement.
Centrage des lments de page

1. Slectionnez l'lment (image, plug-in, tableau ou tout autre lment de la page) que vous dsirez aligner au centre.
2. Choisissez Format > Aligner > 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-tte ou d'un paragraphe.
369
Haut de la page
Mise en retrait du texte
La commande Retrait applique la balise HTML blockquote un paragraphe de texte, ce qui a pour effet de mettre en retrait le texte de chaque
ct de la page.
1. Placez le point d'insertion l'emplacement o insrer le retrait.
2. Choisissez Format > Retrait ou Retrait ngatif, ou choisissez Liste > Retrait ou Retrait ngatif dans le menu.
Remarque : Un paragraphe accepte plusieurs indentations. Chaque application de cette commande produit un retrait
supplmentaire du texte de chaque ct du document.
Haut de la page
Application de styles de police
Vous pouvez utiliser HTML pour appliquer un formatage de texte une seule lettre, des paragraphes entiers du site ou encore des blocs de
texte. Le menu Format permet de dfinir ou de modifier les caractristiques de police du texte slectionn. Vous pouvez dfinir le type, le style
(par exemple, gras ou italique) et la taille d'une police de caractres.
1. Slectionnez le texte. Si aucun texte n'est slectionn, 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 dsire dans le menu Format > Police. Choisissez Par dfaut pour
supprimer les polices pralablement appliques. Cette option applique la police par dfaut au texte slectionn (en
l'occurrence, la police par dfaut du navigateur ou la police affecte cette balise dans une feuille de style CSS).
Pour modifier le style de police, slectionnez le style dsir (gras, italique, soulign, etc.) dans le menu Format > Style.
Voir aussi
Cration d'une nouvelle rgle CSS
370
Utilisation de barres horizontales

Cration d'une barre horizontale
Modification d'une barre horizontale
Les barres (lignes) horizontales sont utiles pour organiser les informations. Sur une page, le texte et les objets peuvent tre visuellement spars
par une ou plusieurs barres.
Haut de la page
Cration d'une barre horizontale

1. Dans la fentre de document, placez le curseur l o vous voulez insrer une barre horizontale.
2. Choisissez Insertion > HTML > Barre horizontale.
Haut de la page
Modification d'une barre horizontale

1. Dans la fentre de document, slectionnez la barre horizontale.
2. Choisissez Fentre > Proprits pour ouvrir l'inspecteur Proprits et modifier les proprits selon vos besoins :
La zone de texte ID Permet de dfinir un ID pour la rgle horizontale.
L et H Spcifient la largeur et la hauteur de la barre, en pixels ou en pourcentage de la taille de la page.
Alignement Spcifie l'alignement de la barre (Par dfaut, Gauche, Centre ou Droite). Ce paramtrage ne s'applique que si la
largeur de la barre est infrieure celle de la fentre du navigateur.
Ombrage Spcifie si la barre est accompagne d'un effet d'ombre porte. Dsactivez cette option pour dessiner la barre en
couleur pleine.
Classe Permet de joindre une feuille de style ou d'appliquer une classe partir d'une feuille de style dj jointe.
371

Ajout d'une nouvelle combinaison la liste des polices
Pour dfinir la combinaison de polices qui apparat dans l'inspecteur Proprits et dans Format > Police, utilisez la commande Modifier la liste des
polices.
Les combinaisons de polices de caractres dterminent la faon dont le texte des pages Web est affich par les navigateurs. Ces derniers
utilisent, au sein de la combinaison de polices choisie, la premire police installe sur l'ordinateur de l'utilisateur. Si aucune des polices de cette
combinaison n'est installe, le navigateur affiche le texte avec la police par dfaut indique dans ses prfrences.
Haut de la page

1. Choisissez Format > Police > Modifier la liste des polices.
2. Choisissez la combinaison de polices dans la liste qui apparat en haut de la bote de dialogue.
Les polices de la combinaison slectionne apparaissent dans la liste Polices choisies, dans le coin infrieur gauche de la
bote de dialogue. Une liste de toutes les polices disponibles installes sur votre systme se trouve sa droite.
Pour ajouter ou retirer des polices d'une combinaison, cliquez selon le cas sur l'un des boutons << ou >> 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 suprieure de la bote de dialogue.
Pour ajouter une police qui n'est pas installe sur votre ordinateur, tapez son nom dans le champ de texte en dessous de
la liste Polices disponibles, et cliquez sur le bouton<< pour ajouter cette police la combinaison courante. Il peut tre utile
d'ajouter une police qui n'est pas installe sur votre systme, par exemple pour indiquer une police spcifique Windows
lorsque vous travaillez sur un Macintosh.
Pour dplacer la combinaison de polices au sein de la liste, cliquez sur les boutons flchs en haut de la bote de
dialogue.
Ajout d'une nouvelle combinaison la liste des polices
Haut de la page
1. Choisissez Format > Police > Modifier la liste des polices.

2. Slectionnez une police dans la liste Polices disponibles, et cliquez sur le bouton << pour l'insrer dans la liste Polices
choisies.
3. Rptez l'tape 2 pour chaque police ncessaire dans la combinaison.
Pour ajouter une police qui n'est pas installe sur votre ordinateur, tapez son nom dans le champ de texte en dessous de la
liste Polices disponibles, et cliquez sur le bouton<< pour ajouter cette police la combinaison courante. Il peut tre utile
d'ajouter une police qui n'est pas installe sur votre systme, par exemple pour indiquer une police spcifique Windows
lorsque vous travaillez sur un Macintosh.
4. Lorsque vous avez fini de choisir des polices, slectionnez une famille de polices gnrique dans la liste Polices disponibles
et cliquez sur le bouton << pour l'insrer dans la liste Polices choisies.
Les familles gnriques de polices sont les suivantes : cursive, fantaisie, monospace (espacement non proportionnel), sansserif (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 apparat dans la police par dfaut
associe la famille de polices gnrique. Par exemple, avec la plupart des systmes d'exploitation, la police non
proportionnelle (monospace) par dfaut est Courier.
372
Ajout de polices Edge Web Fonts la liste des polices

Vous pouvez ajouter des polices Adobe Edge et des polices Web la liste des polices dans Dreamweaver. Dans la liste des polices, les piles de
polices prises en charge par Dreamweaver sont rpertories en premier, suivies des polices Web et des polices Edge Web Fonts.
Ajout de polices Adobe Edge Web Fonts la liste des polices

Ajout de polices Web locales la liste des polices
Cration de piles de polices personnalisables
Aperu des polices insres
Mise jour de la balise de script de polices Web dans tous les fichiers
Mise jour de la balise de script de polices Web dans une page
Haut de la page
Ajout de polices Adobe Edge Web Fonts la liste des polices

Vous pouvez dsormais utiliser les polices Adobe Edge Web Fonts dans vos pages Web. Lors de lutilisation dune police Edge dans une page,
une balise de script supplmentaire est ajoute pour faire rfrence un fichier JavaScript. Ce fichier tlcharge la police du serveur Creative
Cloud directement dans la mmoire cache du navigateur.
Lors de laffichage de la page, les polices sont tlcharges du serveur Creative Cloud, mme si la police est disponible sur lordinateur de
lutilisateur.
Par exemple, une balise Script qui utilise uniquement la police Abel a le format suivant :
<script>var adobewebfontsappname ="dreamweaver"</script>
<script src="http://use.edgefonts.net/abel:n4:default.js" type="text/javascript"></script>
1. Slectionnez Modifier > Grer les polices.
2. Toutes les polices Adobe Edge Web Fonts que vous pouvez ajouter la liste des polices saffichent dans longlet Polices
Adobe Edge.
3. Pour rechercher des polices dans cette liste et les ajouter la liste des polices, effectuez les oprations suivantes :
Cliquez sur la police que vous souhaitez ajouter la liste des polices.
Pour dslectionner une police, cliquez nouveau sur la police.
Utilisez des filtres pour afficher uniquement les polices de votre choix. Par exemple, pour afficher les polices de type Serif,
cliquez sur .
Vous pouvez utiliser plusieurs filtres. Par exemple, pour afficher tous les filtres de type Serif pouvant tre utiliss pour les
et .
paragraphes, cliquez sur
Pour rechercher une police par son nom, saisissez son nom dans la zone de recherche.
4. Cliquez sur
pour filtrer les polices que vous avez slectionnes.
5. Cliquez sur Termin.

6. Ouvrez la liste des polices partir de nimporte quel emplacement. Par exemple, vous pouvez utiliser la liste Police de la
section CSS du panneau Proprits.
Dans la liste Police, les piles de polices de Dreamweaver sont rpertories avant les polices Web. Faites dfiler la liste vers le
bas pour localiser les polices slectionnes.
Haut de la page
Ajout de polices Web locales la liste des polices

Vous pouvez ajouter des polices Web de votre ordinateur la liste Police de Dreamweaver. Les polices ajoutes apparaissent dans tous les
373
menus Police de Dreamweaver. Les polices de type EOT, WOFF, TTF et SVG sont prises en charge.
1. Slectionnez Modifier > Grer les polices.
2. Dans la bote de dialogue qui saffiche, cliquez sur longlet Polices Web locales.
3. Cliquez sur le bouton Parcourir correspondant au type de police que vous souhaitez ajouter. Par exemple, si votre police est
au format EOT, cliquez sur le bouton Parcourir correspondant Police EOT.
4. Sur votre ordinateur, recherchez lemplacement contenant la police. Slectionnez le fichiez et ouvrez-le. Si la police est
disponible dans dautres formats cet emplacement, tous les formats sont automatiquement ajouts la bote de dialogue.
Par ailleurs, le nom de la police est automatiquement rcupr.
5. Slectionnez loption vous invitant confirmer que vous disposez dune licence pour utiliser la police sur un site Web.
6. Cliquez sur Termin. La liste des polices saffiche dans la zone Liste actuelle des polices Web locales.
Pour supprimer une police Web de la liste des polices, slectionnez-la dans la zone Liste actuelle des polices Web locales,
puis cliquez sur Supprimer.
Haut de la page
Cration de piles de polices personnalisables

Une pile de polices est une liste de polices dans une dclaration de famille de polices CSS. Longlet Piles de polices personnalisables de la bote
de dialogue Grer les polices permet deffectuer les oprations suivantes :
Ajouter de nouvelles piles de polices laide du bouton + .
Slectionner la pile de polices dans la liste des polices pour modifier les piles de polices existantes. Utiliser les boutons >>
et << pour mettre jour la liste Polices choisies.
Utiliser le bouton - pour supprimer les piles de polices existantes.
Rorganiser les piles laide des boutons flchs.
Haut de la page
Aperu des polices insres

Vous ne pouvez pas afficher un aperu des polices Edge et des polices Web en mode Cration. Passez en mode Affichage en direct ou affichez
un aperu de la page dans un navigateur.
Haut de la page
Mise jour de la balise de script de polices Web dans tous les fichiers
Lorsque vous mettez jour la police dans un fichier CSS li plusieurs fichiers HTML, vous tes invit mettre jour la balise de script dans les
fichiers HTML associs. Lorsque vous cliquez sur Mettre jour, les balises de script de tous les fichiers concerns HTML sont mises jour.
Haut de la page
Mise jour de la balise de script de polices Web dans une page

Choisissez Commandes > Nettoyer la balise de script des polices Web (page actuelle) pour mettre jour toutes les polices Web sur la page Web
qui ne sont pas refltes dans la balise de script.
374
Insertion de dates
Dreamweaver comporte un objet Date pratique qui insre la date actuelle dans le format de votre choix (avec ou sans heure), ainsi qu'une option
pour mettre jour cette date lorsque vous enregistrez le fichier.
Remarque : Les dates et heures affiches dans la bote de dialogue Insrer date ne reprsentent pas la date actuelle ni ne refltent les
dates/heures visualises par un visiteur lorsqu'il affiche votre site. Elles ne sont qu'un exemple de la manire dont vous souhaitez afficher ces
informations.
1. Dans la fentre de document, placez le curseur l o vous dsirez insrer la date.
Choisissez Insertion > Date.
Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Date.
3. Dans la bote de dialogue qui apparat alors, slectionnez un format d'affichage pour le jour de la semaine, pour la date et
pour l'heure.
4. Si vous dsirez que cette date soit actualise chaque nouvel enregistrement du document, activez l'option Mettre jour
automatiquement lors de l'enregistrement. Si vous prfrez que la date soit insre comme du texte normal et ne soit jamais
actualise, dsactivez cette option.
5. Cliquez sur OK pour insrer la date.
Si vous avez slectionn Mettre jour automatiquement lors de l'enregistrement, vous pouvez modifier le format de la date
aprs l'avoir insre dans le document, en cliquant sur le texte mis en forme et en slectionnant Modifier le format de date
dans l'inspecteur Proprits.
375
Utilisation des actifs

Prsentation du panneau Actifs
Ajout dun actif un document
Application dune couleur un texte laide du panneau Actifs
Affectation dURL des images ou du texte
Slection et modification dactifs
Rutilisation dactifs dans un autre site
Haut de la page
Prsentation du panneau Actifs

Utilisez le panneau Actifs (Fentre > Actifs) pour grer les actifs du site en cours. Le panneau Actifs affiche les actifs du site associs au
document actif dans la fentre du document.
Remarque : Vous devez dfinir un site local avant de pouvoir afficher des actifs dans le panneau Actifs.
Panneau Actifs en mode Affichage en direct
Panneau Actifs en modes Cration et Affichage du code
Le panneau Actifs propose diffrentes vues des actifs :
Liste Site Prsente tous les actifs de votre site, y compris les couleurs et les adresses URL utilises dans les documents de votre site.
Liste Favoris Prsente uniquement les actifs que vous avez slectionns de faon explicite.
Pour basculer entre ces deux modes, slectionnez le bouton radio Site ou Favoris situ en haut de la zone daperu. (Ces deux modes daffichage
ne sont pas disponibles pour les catgories Modles et Bibliothque.)
Remarque : La plupart des oprations du panneau Actifs fonctionnent de la mme faon dans les deux listes. Toutefois, il existe quelques tches
qui ne peuvent tre ralises que dans la liste Favoris.
376
Dans les deux listes, les actifs appartiennent lune des catgories suivantes :
Images
Couleurs
Fichiers dimage en formats GIF, JPEG ou PNG.
Les couleurs utilises dans les documents et les feuilles de style, y compris les couleurs du texte, des arrire-plans et des liens.
URL
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://).
Requtes multimdias
ou des fichiers MPEG.
Fichiers multimdias, tels que des fichiers Adobe Flash (SWF seulement), des fichiers Adobe Shockwave, QuickTime
Scripts
Fichiers JavaScript ou VBScript. Les scripts dans les fichiers HTML (plutt que dans des fichiers JavaScript ou VBScript
indpendants) napparaissent pas dans le panneau Actifs. Cette catgorie est disponible uniquement en modes Code et Cration.
Les mises en forme de pages principales utilises sur plusieurs pages. La modification dun modle entrane automatiquement la
Modles
modification de toutes les pages qui y sont associes. Cette catgorie est disponible uniquement en modes Code et Cration.
Des lments que vous utilisez dans plusieurs pages. Lorsque vous modifiez un lment de bibliothque, toutes
Elments de bibliothque
les pages qui le contiennent sont mises jour. Cette catgorie est disponible uniquement en modes Code et Cration.
Remarque : Pour figurer dans le panneau Actifs, un fichier doit appartenir lune de ces catgories. Il existe dautres types de fichiers parfois
appels actifs, mais qui ne sont pas affichs dans le panneau.
Par dfaut, les actifs dune catgorie donne sont rpertoris en fonction de leur nom par ordre alphabtique, mais vous pouvez les trier par type
et en fonction de plusieurs autres critres. Vous pouvez galement afficher un aperu des actifs et redimensionner les colonnes ainsi que la zone
daperu.
Affichage dun actif dans la zone daperu

Slectionnez lactif dans le panneau Actifs.
Affichage des actifs dune catgorie donne

Cliquez sur une icne de catgorie dans le ct gauche du panneau Actifs.
Tri des actifs

Cliquez sur un en-tte 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 len-tte de la colonne Type.
Redimensionnement dune colonne

Faites glisser la ligne qui spare deux en-ttes de colonne.
Redimensionnement de la zone daperu

Faites glisser la barre de sparation (entre la zone daperu et la liste des actifs) vers le haut ou vers le bas.
Actualisation du panneau Actifs

377
La cration de la liste Site peut prendre quelques secondes du fait que Dreamweaver doit dabord lire la mmoire cache du site.
Certaines modifications napparaissent pas immdiatement dans le panneau Actifs. Par exemple, lorsque vous ajoutez ou supprimez un actif du
site, les modifications ne sont pas rpercutes dans le panneau Actifs tant que vous nactualisez 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 lExplorateur Windows ou le Finder, par exemple),
vous devez recrer la mmoire cache du site pour actualiser le panneau Actifs.
Lorsque vous supprimez lunique instance dune URL ou dune couleur donne du site, ou lorsque vous enregistrez un nouveau fichier contenant
une couleur ou une URL nayant pas encore t utilise dans le site, les modifications ne sont rpercutes dans le panneau Actifs quune fois la
liste Site actualise.
Pour actualiser la liste Site manuellement, cliquez sur le bouton Actualiser la liste du site
cache du site ou la met jour si ncessaire.
. Dreamweaver cre la mmoire
Pour actualiser la liste Site et recrer la mmoire cache du site manuellement, cliquez avec le bouton droit de la souris
(Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) dans la liste Actifs, puis cliquez sur Actualiser la liste du site.
Haut de la page
Ajout dun actif un document

Vous pouvez insrer la plupart des actifs dans un document en les faisant glisser dans la fentre de document en mode Affichage en direct,
Affichage du code ou Cration, ou en utilisant le bouton Insrer du panneau. Vous pouvez faire glisser les actifs de la vue de la liste ou du
panneau daperu rapide du panneau Actifs.
Remarque : vous pouvez faire glisser depuis le panneau daperu rapide uniquement sur Mac.
En mode Cration ou Affichage en direct, vous pouvez insrer des couleurs et des URL. En mode Cration, vous pouvez appliquer des couleurs
et des URL aux lments slectionns.
1. Dans le document, placez le point dinsertion lendroit o lactif doit apparatre.

2. Dans le panneau Actifs, slectionnez lun des boutons de catgorie dactif situs gauche.
Remarque : slectionnez toute catgorie autre que Modles. Un modle est appliqu un document entier. Il ne peut pas
tre insr dans un document.
3. Slectionnez Site ou Favoris en haut du panneau, puis slectionnez lactif.
Il nexiste pas de liste Site ou Favoris pour les lments de bibliothque. Omettez cette tape si vous insrez un tel lment.
Faites glisser lactif depuis le panneau vers le document. Vous pouvez faire glisser depuis la vue de la liste ainsi que
depuis le panneau daperu rapide.
Remarque : sur Windows, vous ne pouvez pas faire glisser des actifs depuis le panneau daperu rapide.
Vous pouvez faire glisser des scripts dans la zone du contenu de len-tte de la fentre de document. Si cette zone nest
pas visible, choisissez Affichage > Contenu de len-tte.
Slectionnez lactif dans le panneau et cliquez sur Insrer.
Si lactif insr est une couleur, elle sapplique au texte qui figure aprs le point dinsertion.
Haut de la page
Application dune couleur un texte laide du panneau Actifs

Le panneau Actifs indique les couleurs que vous avez dj appliques aux diffrents lments du site, tels que du texte, des bordures de tableau,
des arrire-plans, etc.
1. En mode Cration, effectuez les oprations suivantes :
a. Slectionnez du texte dans le document.
b. Dans le panneau Actifs, slectionnez la catgorie Couleurs.
378
c. Slectionnez la couleur souhaite et cliquez sur Appliquer.

2. En mode Affichage en direct, effectuez les oprations suivantes :
a. Dans le panneau Actifs, slectionnez la catgorie Couleurs.
b. Effectuez lune des oprations suivantes :
Cliquez avec le bouton droit de la souris sur la couleur dans le panneau Actifs, puis cliquez sur Copier la valeur
chromatique. La valeur chromatique est copie dans le presse-papiers. Vous pouvez prsent coller la valeur
chromatique (Ctrl+v, Cmd+v) dans CSS Designer.
Faites glisser la couleur de laperu rapide et passez la souris sur les lments en mode Affichage en direct. Lorsque
vous dposez la couleur, la bote de dialogue Nouvelle rgle CSS saffiche et, lorsque vous cliquez sur OK, la couleur
est applique llment slectionn.
Cliquez sur Appliquer dans le panneau Actifs. La bote de dialogue Nouvelle rgle CSS saffiche et, lorsque vous
cliquez sur OK, la couleur est applique llment slectionn.
Haut de la page
Affectation dURL des images ou du texte

1. En mode Cration, effectuez les oprations suivantes :
a. Slectionnez le texte ou limage.
b. Dans le panneau Actifs, slectionnez la catgorie URL dans la vue Sites ou Favoris, selon lendroit o lURL est stocke.
Remarque : les URL des fichiers de votre site sont stockes, par dfaut, dans la vue Sites. La vue Favoris contient les
URL que vous avez ajoutes manuellement.
c. Slectionnez lURL.
d. Effectuez lune des oprations suivantes :
Faites glisser lURL depuis le panneau vers la slection en mode Cration.
Slectionnez lURL et cliquez sur Insrer.
2. En mode Affichage en direct, effectuez les oprations suivantes :
a. Dans le panneau Actifs, slectionnez la catgorie URL dans la vue Sites ou Favoris, selon lendroit o lURL est stocke.
b. Effectuez lune des oprations suivantes :
Faites glisser lURL de laperu rapide ou la vue de la liste. Passez la souris sur les lments en mode Affichage en
direct. Lorsque vous dposez lURL, <a> entoure llment en surbrillance en mode Affichage en direct.
Cliquez sur llment requis en mode Affichage en direct. Choisissez lURL dans le panneau actifs, puis cliquez sur
appliquer. Llment slectionn est entour par la balise <a>.
Haut de la page
Slection et modification dactifs

Le panneau Actifs permet de slectionner simultanment plusieurs actifs ; il offre galement un moyen rapide de commencer ldition dactifs.
Slection de plusieurs actifs.

1. Dans le panneau Actifs, slectionnez un actif.
2. Slectionnez les autres actifs laide de lune des mthodes suivantes :
Cliquez en maintenant la touche Maj enfonce pour slectionner une srie conscutive dactifs.
Cliquez en maintenant la touche Ctrl (Windows) ou la touche Commande (Macintosh) enfonce pour ajouter un actif
individuel la slection (quil soit adjacent ou non la slection existante). Cliquez en maintenant la touche Ctrl
(Windows) ou la touche Commande (Macintosh) enfonce sur un actif slectionn pour le dslectionner.
379
Modification dun actif

Lorsque vous modifiez un actif dans le panneau Actifs, le comportement varie en fonction du type dactif. Pour certains actifs, tels que les images,
vous utilisez un diteur externe qui souvre automatiquement si vous avez dfini un diteur pour ce type dactif. Vous ne pouvez modifier les
couleurs et les URL que dans la liste Favoris. Lorsque vous modifiez des modles et des lments de bibliothque, vous effectuez les
modifications dans Dreamweaver.
1. Dans le panneau Actifs, procdez de lune des manires suivantes :
Double-cliquez sur lactif.
Slectionnez lactif, puis cliquez sur le bouton Modifier
Remarque : si lactif doit tre modifi dans un diteur externe et quaucun diteur ne souvre automatiquement, slectionnez
Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh), slectionnez la catgorie Types de
fichiers/Editeurs, et assurez-vous quun diteur externe est dfini pour ce type dactif.
2. Apportez les modifications voulues.
3. Lorsque vous avez termin, procdez de lune des faons suivantes :
Si lactif est bas sur un fichier (tout objet autre quune couleur ou une URL), enregistrez-le (via lditeur que vous
utilisez), puis fermez-le.
Si lactif est une URL, cliquez sur OK dans la bote de dialogue Modifier lURL.
Remarque : si lactif est une couleur, le slecteur de couleur se ferme automatiquement lorsque vous slectionnez une
couleur. Pour fermer le slecteur de couleur sans slectionner de couleur, appuyez sur la touche Echap.
Haut de la page
Rutilisation dactifs 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
ncessaire de le copier. Vous pouvez copier un actif individuel, un ensemble dactifs individuels ou un dossier Favoris entier en une seule
opration.
Vous devrez peut-tre localiser le fichier dans le panneau Fichiers correspondant un actif dans le panneau Actifs avant de transfrer lactif
depuis ou vers votre site distant.
Remarque : le panneau Fichiers peut afficher un site diffrent de celui prsent par le panneau Actifs, car le panneau Actifs est associ au
document actif.
Localisation dun fichier dactif dans le panneau Fichiers

1. Dans le panneau Actifs, slectionnez la catgorie de lactif que vous recherchez.
2. Cliquez avec le bouton droit (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) sur licne ou le nom de
lactif dans le panneau Actifs, puis choisissez loption Reprer dans le site dans le menu contextuel.
Remarque : loption Reprer dans le site nest pas disponible pour les couleurs et les URL, qui ne correspondent pas des
fichiers dans le site.
Le panneau Fichiers souvre, avec le fichier dactif slectionn. La commande Reprer dans le site repre le fichier
correspondant lactif lui-mme, et non les fichiers qui utilisent cet actif.
Copie dactifs depuis le panneau Actifs vers un autre site

1. Dans le panneau Actifs, slectionnez la catgorie de lactif que vous souhaitez copier.
2. Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) sur un ou
plusieurs actifs dans la liste Site ou Favoris, slectionnez Copier dans le site, puis slectionnez le nom du site cible dans le
sous-menu qui rpertorie les sites que vous avez dfinis.
Remarque : dans la liste Favoris, vous pouvez copier un dossier Favoris ainsi que des actifs individuels.
Les actifs sont copis dans leurs emplacements correspondants dans le site cible. Dreamweaver cre de nouveaux dossiers
380
dans la hirarchie du site cible en fonction des besoins. Les actifs sont galement ajouts la liste Favoris du site cible.
Remarque : si lactif que vous avez copi est une couleur ou une URL, il saffiche uniquement dans la liste Favoris du site
cible. Du fait que les couleurs et les URL ne correspondent pas des fichiers, il nexiste aucun fichier copier dans lautre
site.
381
Cration et gestion d'une liste d'actifs favoris

Gestion des actifs favoris
Ajout ou suppression d'actifs favoris
Cration d'un surnom pour un actif favori
Regroupement d'actifs dans un dossier Favoris
Haut de la page
Gestion des actifs favoris
La liste complte de tous les actifs reconnus peut devenir encombre pour certains sites volumineux. Vous pouvez ajouter des actifs frquemment
utiliss une liste Favoris, grouper des actifs connexes, leur attribuer des surnoms pour mmoriser leur objet et les retrouver aisment dans le
panneau Actifs.
Remarque : Les actifs favoris ne sont pas stocks en tant que fichiers distincts sur le disque. Ils font rfrence aux actifs de la liste Site.
Dreamweaver conserve la trace des actifs de la liste Site afficher dans la liste Favoris.
La plupart des oprations du panneau Actifs sont identiques dans les listes Favoris et Site. Toutefois, il existe plusieurs tches que vous pouvez
raliser uniquement dans la liste Favoris.
Haut de la page
Ajout ou suppression d'actifs favoris

Il existe plusieurs mthodes pour ajouter des actifs la liste Favoris du site dans le panneau Actifs.
L'ajout d'une couleur ou d'une URL la liste Favoris ncessite une tape supplmentaire. Vous ne pouvez pas ajouter de nouvelles couleurs ou
URL la liste Site. Cette dernire contient uniquement les actifs dj utiliss dans le site.
Remarque : Il n'existe pas de liste Favoris pour les modles et les lments de bibliothque.
Ajout d'actifs la liste Favoris

Slectionnez un ou plusieurs actifs dans la liste Site du panneau Actifs, puis cliquez sur le bouton Ajouter aux favoris
Slectionnez un ou plusieurs actifs dans la liste Site du panneau Actifs, cliquez avec le bouton droit (Windows) ou en
maintenant la touche Ctrl enfonce (Macintosh), puis slectionnez Ajouter aux favoris.
Slectionnez un ou plusieurs fichiers dans le panneau Fichiers, cliquez avec le bouton droit (Windows) ou en maintenant la
touche Ctrl enfonce (Macintosh), puis slectionnez Ajouter aux favoris. Dreamweaver ignore les fichiers n'appartenant pas
une catgorie du panneau Actifs.
Cliquez avec le bouton droit (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) sur un lment dans la
fentre de document en mode Cration, puis choisissez l'option du menu contextuel pour ajouter l'lment une catgorie
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 au texte. Vous pouvez ajouter uniquement les lments qui correspondent aux catgories du panneau
Actifs.
Ajout d'une nouvelle couleur ou une nouvelle URL la liste Favoris

1. Dans le panneau Actifs, slectionnez la catgorie Couleurs ou URL.
2. Slectionnez l'option Favoris en haut du panneau.
3. Cliquez sur le bouton Nouvelle couleur ou
Nouvelle URL .

Slectionnez une couleur dans le slecteur de couleur et donnez-lui un surnom si vous le souhaitez.
Pour fermer le slecteur de couleur sans slectionner de couleur, appuyez sur la touche Echap ou cliquez sur la barre de
couleur grise en haut du slecteur de couleur.
Entrez une URL et un surnom dans la bote de dialogue Ajouter URL, puis cliquez sur OK.
Suppression d'actifs de la liste Favoris

382
1. Dans le panneau Actifs, slectionnez l'option Favoris en haut du panneau.

2. Slectionnez un ou plusieurs actifs (ou un dossier) dans la liste Favoris.
3. Cliquez sur le bouton Supprimer des favoris
Les actifs sont supprims de la liste Favoris, mais pas de la liste Site. Si vous supprimez un dossier Favoris, ce dernier est
supprim, ainsi que tout son contenu.
Haut de la page
Cration d'un surnom pour un actif favori
Vous pouvez attribuer des surnoms (par exemple, CouleurArrirePlanPage au lieu de #999900) uniquement aux actifs de la liste Favoris. La liste
Site retient leur nom de fichier rel (ou leur valeur, dans le cas de couleurs et d'URL).
1. Dans le panneau Actifs, (Fentre > Actifs), slectionnez la catgorie qui contient votre actif.
2. Slectionnez l'option Favoris en haut du panneau.
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) sur le nom ou
l'icne de l'actif dans le panneau Actifs, puis slectionnez Modifier le surnom.
Cliquez une fois sur le nom de l'actif, effectuez une pause, puis cliquez nouveau. (Ne double-cliquez pas, car cela
ouvrirait l'lment pour modification.)
4. Tapez un surnom pour l'actif, puis appuyez sur la touche Entre (Windows) ou Retour (Macintosh).
Haut de la page
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, slectionnez 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 Entre (Windows) ou Retour (Macintosh).
4. Faites glisser les actifs vers le dossier.
Voir aussi
383
Insertion et modification dimages

Il existe de nombreux formats de fichiers graphiques, mais les pages Web en utilisent gnralement trois : GIF, JPEG et PNG. Les formats GIF et JPEG sont les plus
rpandus ; ils peuvent tre affichs dans la plupart des navigateurs. Vous pouvez insrer des images et les retoucher dans linterface utilisateur de Dreamweaver.
GIF (Graphic Interchange Format) Les fichiers GIF utilisent un maximum de 256 couleurs et sont destins laffichage dimages tons non
continus ou dimages comportant de larges zones de couleurs unies, telles que les barres de navigation, les boutons, les icnes, les logos ou
dautres images contenant des tons et des couleurs uniformes.
JPEG (Joint Photographic Experts Group) Le format de fichier JPEG est le format suprieur destin aux photographies ou aux images tons
continus, car de tels fichiers peuvent contenir des millions de couleurs. Lorsque la qualit dun fichier JPEG augmente, sa taille et son temps de
tlchargement augmentent galement. Il est souvent possible dobtenir un bon compromis entre la qualit de limage 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 pour les
fichiers GIF, qui inclut la prise en charge des images couleurs indexes, 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 dAdobe Fireworks. Les fichiers PNG conservent toutes les informations
dorigine sur les calques, les vecteurs, les couleurs et les effets (comme par exemple des ombres portes) et tous ces lments peuvent tre
modifis tout moment. Les fichiers doivent avoir lextension .png pour tre reconnus comme fichiers PNG par Dreamweaver.
Insertion dune image
Redimensionnement visuel dune image
Insertion dun espace rserv pour limage
Remplacement dun espace rserv pour une image
Dfinition des proprits de lespace rserv pour limage
Modification dimages dans Dreamweaver
Cration dune image survole
Utilisation dun diteur dimage externe
Application de comportements aux images
Haut de la page
Insertion dune image

Lorsque vous insrez une image dans un document Dreamweaver, le programme cre une rfrence ce fichier dimage dans le code source
HTML. Pour que cette rfrence soit correcte, le fichier dimage doit rsider sur le site. Dans le cas contraire, Dreamweaver vous invite copier le
fichier sur le site.
Vous pouvez galement insrer des images de faon dynamique. Les images dynamiques sont des images qui changent souvent ; par exemple,
les systmes de rotation de bannires publicitaires qui slectionnent les bannires de manire alatoire, puis affichent limage de la bannire
slectionne lors de laffichage dune page.
Aprs avoir insr une image, vous pouvez dfinir les options daccessibilit aux balises dimage qui pourront tre lues par les lecteurs dcran
destins aux utilisateurs malvoyants. Ces attributs peuvent tre modifis dans le code HTML.
Pour suivre un didacticiel sur linsertion dimages, voir Ajout dimages.
1. Placez le point dinsertion lendroit o doit apparatre limage dans la fentre de document, puis procdez de lune des
manires suivantes :
Dans la catgorie Commun du panneau Insertion, cliquez sur licne Images
Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Images et slectionnez licne Image. Lorsque
licne Image est affiche dans le panneau Insertion, vous pouvez la faire glisser vers la fentre du document (ou la
fentre du mode Code si vous travaillez sur le code).
384
Choisissez Insertion > Image.

Faites glisser une image partir du panneau Actifs (Fentre > Actifs) vers lemplacement souhait dans la fentre de
document, puis passez ltape 3.
Faites glisser une image partir du panneau Fichiers vers lemplacement souhait dans la fentre de document, puis
passez ltape 3.
Faites glisser une image partir du bureau vers lemplacement dsir sur la page, puis passez ltape 3.
2. Dans la bote de dialogue qui saffiche, procdez de lune des manires suivantes :
Slectionnez Systme de fichiers pour choisir un fichier dimage.
Slectionnez Source de donnes pour choisir une source dimages dynamiques.
Cliquez sur le bouton Sites et serveurs pour choisir un fichier dimage dans un dossier distant de lun de vos sites
Dreamweaver.
3. Parcourez larborescence pour slectionner limage ou la source de contenu insrer.
Tant que le document sur lequel vous travaillez na pas encore t enregistr, Dreamweaver cre automatiquement une
rfrence demplacement de fichier de type file://. Lorsque vous enregistrez le document sur le site, Dreamweaver convertit
cette rfrence en indiquant un chemin relatif au document.
Remarque : lors de linsertion dimages, vous pouvez galement utiliser un chemin absolu vers une image qui rside sur un
serveur distant (cest--dire une image qui nest pas disponible sur le disque dur local). Toutefois, si vous constatez des
problmes de performances lorsque vous travaillez, vous pouvez dcider de dsactiver laffichage de limage en mode
Cration en dslectionnant loption Commandes > Afficher les fichiers externes.
4. Cliquez sur OK. La bote de dialogue Attributs daccessibilit aux balises dimage saffiche si elle a t active dans les
prfrences (Edition > Prfrences).
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 brve description de limage. Le lecteur dcran lit les informations
que vous entrez ici. Nentrez pas plus de 50 caractres. Pour de plus longues descriptions, entrez plutt, dans la zone de
texte Description longue, un lien vers un fichier donnant davantage dinformations propos de limage.
Dans la zone de texte Description longue, saisissez lemplacement du fichier afficher lorsque lutilisateur clique sur
limage ou cliquez sur licne du dossier pour naviguer jusqu un fichier. Cette zone de texte fournit un lien vers un fichier
qui concerne ou donne davantage dinformations sur limage.
Remarque : vous pouvez entrer les informations dans une seule zone de texte ou les deux, selon vos besoins. Le lecteur
dcran lit lattribut Alt de limage.
Remarque : si vous cliquez sur Annuler, limage saffiche dans le document, mais Dreamweaver ne lui associe ni balises ni
attributs daccessibilit.
6. Dans linspecteur Proprits (Fentre > Proprits), dfinissez les proprits de limage.
Dfinition des proprits de limage

Linspecteur Proprits Images vous permet de dfinir les proprits dune image. Pour voir toutes les proprits illustres, cliquez sur la flche
dagrandissement, dans le coin infrieur droit de linspecteur Proprits.
1. Choisissez la commande Fentre > Proprits pour afficher linspecteur Proprits pour une image slectionne.
2. Dans la zone de texte situe au-dessous de limage miniature, dfinissez un nom dimage auquel vous pouvez faire rfrence
lors de lutilisation dun comportement Dreamweaver (tel que Permuter une image) ou lors de lutilisation dun langage de
script tel que JavaScript ou VBScript.
3. Dfinissez les options de limage.
385
L et H Largeur et hauteur de limage, en pixels. Dreamweaver met automatiquement jour ces zones de texte avec les
dimensions dorigine de limage lorsque vous insrez une image dans une page.
Si vous dfinissez pour L (largeur) et H (hauteur) des valeurs qui ne correspondent pas aux dimensions relles de limage,
celle-ci risque de ne pas safficher correctement dans un navigateur (pour revenir aux valeurs dorigine, cliquez sur les
tiquettes de zone de texte L et H ou sur le bouton Rtablir la taille originale de limage qui apparat droite des zones de
texte L et H une fois que vous avez tap de nouvelles valeurs).
Remarque : vous pouvez modifier ces valeurs pour modifier lchelle daffichage de cette instance de limage, mais cette
technique ne diminuera pas le temps de chargement, puisque le navigateur chargera la totalit de limage son chelle
normale avant de la rduire. Pour rduire le temps de tlchargement et tre sr que toutes les instances de limage sont
affiches aux mmes dimensions, utilisez une application de retouche dimage pour adapter les proportions de limage.
Src Spcifie le fichier source de limage. Tapez le chemin daccs ou cliquez sur licne du dossier pour trouver le fichier
source et le slectionner.
Lien Spcifie un lien hypertexte pour limage. Faites glisser licne Pointer vers un fichier dans le panneau Fichiers, cliquez
sur licne de dossier pour rechercher et slectionner un document de votre site ou tapez directement lURL.
Sec Spcifie le texte secondaire qui apparatra la place de limage dans les navigateurs de type texte seulement, ou dans
les navigateurs dont lutilisateur a dsactiv le tlchargement automatique des images. Pour les utilisateurs malvoyants qui
utilisent un synthtiseur vocal avec un navigateur en mode texte, le texte est lu. Dans certains navigateurs, ce texte apparat
galement lorsque le pointeur se trouve sur limage.
Outils Nom de la carte et Zone ractive Permettent de nommer et de crer une carte graphique ct client
Cible Spcifie la fentre ou le cadre dans lequel la page lie devrait tre charge. Cette option nest pas disponible lorsque
limage nest pas lie un autre fichier. Les noms de tous les cadres dans le jeu de cadres actuel saffichent dans la liste
Cible. Vous pouvez galement choisir parmi les noms de cible rservs suivants :
_blank charge le fichier li dans une nouvelle fentre, sans nom, du navigateur.
_parent charge le fichier li dans le jeu de cadres parent, ou dans la fentre parente du cadre contenant le lien. Si le
cadre contenant le lien nest pas imbriqu, le document li sera charg dans la fentre de base du navigateur.
_self charge le fichier li dans le mme cadre, ou dans la mme fentre, que le lien. Cette cible tant celle par dfaut,
vous navez gnralement pas la spcifier.
_top charge le fichier li dans la fentre de base du navigateur, supprimant ainsi tous les cadres.
Modifier Lance lditeur dimage que vous avez indiqu dans les prfrences dditeurs externes et ouvre limage
slectionne.
Mettre jour depuis loriginal

Lorsque limage Web (cest--dire limage de la page Dreamweaver) nest pas
synchronise avec le fichier Photoshop dorigine, Dreamweaver dtecte que le fichier dorigine a t mis jour et affiche lune
des flches de licne dobjet dynamique en rouge. Lorsque vous slectionnez limage Web en mode Cration et que vous
cliquez sur le bouton Mettre jour depuis loriginal dans linspecteur Proprits, limage se met jour automatiquement avec
tous les changements effectus dans le fichier Photoshop dorigine.
Modification des paramtres dune image
Affiche la bote de dialogue Optimisation dimage, o vous pouvez optimiser
limage.
Recadrer
Permet de rogner une image en supprimant les zones indsirables de limage slectionne.
Rchantillonner
Permet de rchantillonner une image redimensionne et den amliorer la qualit dans ses nouvelles
taille et forme.
386
Luminosit et contraste
Accentuer
Ajuste la luminosit et le contraste dune image
Permet dajuster la nettet dune image.
Modification des attributs daccessibilit dune image dans le code

Si vous avez insr des attributs daccessibilit pour une image, vous pouvez modifier ces valeurs dans le code HTML.
1. Slectionnez limage dans la fentre de document.
Modifiez les attributs de limage en mode Code.
Cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), puis choisissez
Modifier la balise.
Modifiez la valeur Alt dans linspecteur Proprits.
Haut de la page
Redimensionnement visuel dune image

Dans Dreamweaver, vous pouvez redimensionner visuellement certains lments comme des images, des plug-ins, des fichiers Shockwave ou
SWF, des applets et des contrles ActiveX.
Le redimensionnement visuel dune image permet de mieux voir comment limage affecte la mise en forme en diffrentes dimensions. Il nadapte
pas les dimensions de limage aux proportions que vous avez spcifies. Si vous redimensionnez visuellement une image dans Dreamweaver,
mais que vous nutilisez pas dapplication de retouche dimage (comme Adobe Fireworks) pour en adapter les proportions aux dimensions
dsires, le navigateur de lutilisateur devra le faire lorsque la page sera charge. Cela risque dentraner lallongement du temps de
tlchargement de la page et laffichage incorrect de limage dans le navigateur. Pour rduire le temps de tlchargement et tre sr que toutes
les instances de limage sont affiches aux mmes dimensions, utilisez une application de retouche dimage pour adapter les proportions de
limage.
Lorsque vous redimensionnez une image dans Dreamweaver, vous pouvez la rchantillonner afin de ladapter ses nouvelles dimensions. Le
rchantillonnage ajoute ou enlve des pixels dimages JPEG ou GIF redimensionnes afin quelles correspondent le mieux possible laspect
des images originales. Le rchantillonnage dune image rduit la taille de son fichier, ce qui permet den acclrer le tlchargement.
Redimensionnement visuel dun lment

1. Slectionnez llment (par exemple, une image ou un fichier SWF) dans la fentre de document.
Des poignes de redimensionnement apparaissent droite et en bas de llment, et dans le coin infrieur droit. Si ces
poignes napparaissent pas, cliquez lextrieur de llment redimensionner, puis slectionnez-le nouveau ou cliquez
sur la balise correspondante dans le slecteur de balises.
2. Pour redimensionner llment, utilisez lune des mthodes suivantes :
Pour ajuster la largeur de llment, dplacez la poigne droite de la slection.
Pour ajuster la hauteur de llment, dplacez la poigne au bas de la slection.
Pour ajuster simultanment la largeur et la hauteur de llment, faites glisser la poigne de langle de la slection.
Pour conserver les proportions de llment (rapport largeur/hauteur) lorsque vous modifiez ses dimensions, faites glisser
la poigne de langle de la slection tout en appuyant sur la touche Maj.
Pour ajuster la largeur et la hauteur dun lment une taille prcise, (par exemple, 1x1 pixel), utilisez linspecteur
Proprits pour entrer une valeur numrique. Les lments peuvent tre redimensionns visuellement une taille
minimale de 8 x 8 pixels.
3. Pour rtablir la taille originale dun lment redimensionn, supprimez les valeurs des zones de texte L et H ou cliquez sur le
bouton Rtablir la taille dans linspecteur Proprits.
387
Rtablissement de la taille originale dune image

Cliquez sur le bouton Rtablir la taille dans linspecteur Proprits des images.
Rchantillonnage dune image redimensionne

1. Redimensionnez limage de la manire dcrite ci-dessus.
2. Cliquez sur le bouton Rchantillonner dans linspecteur Proprits des images.
Remarque : vous ne pouvez pas rchantillonner les espaces rservs pour une image ou les lments autres que les
images bitmap.
Haut de la page
Insertion dun espace rserv pour limage

Un espace rserv pour une image est un graphique que vous utilisez jusqu ce que le dessin final soit prt pour tre ajout une page Web.
Vous pouvez dfinir la taille et la couleur de lespace rserv et lui donner une tiquette de texte.
1. Dans la fentre de document, placez le point dinsertion lendroit o vous voulez insrer un espace rserv pour un
graphique.
2. Choisissez Insertion > Objets image > Espace rserv pour limage.
3. Dans la zone de texte Nom (facultatif), tapez le texte que vous souhaitez voir apparatre comme tiquette de lespace rserv
pour limage. Laissez la zone de texte vide si vous ne voulez pas faire apparatre dtiquette. Le nom doit commencer par une
lettre et ne peut contenir que des lettres ou des chiffres : les espaces et les caractres ASCII tendus ne sont pas autoriss.
4. (Obligatoire) Dans les zones de texte Largeur et Hauteur, saisissez un nombre pour dfinir la taille de limage en pixels.
5. (Facultatif) Pour la zone Couleur, procdez de lune des manires suivantes pour appliquer une couleur :
Utilisez le slecteur de couleur pour slectionner une couleur.
Entrez la valeur hexadcimale de la couleur (par exemple #FF0000).
Entrez le nom dune couleur scurise pour le Web (par exemple rouge).
6. (Facultatif) Dans la zone Texte secondaire, entrez une description de limage pour les personnes utilisant un navigateur en
mode texte.
Remarque : une balise image est insre automatiquement dans le code HTML, avec un attribut src vide.
7. Cliquez sur OK.
Les attributs de couleur et de taille ainsi que ltiquette de lespace rserv saffichent comme suit :
Lorsquils sont visualiss dans un navigateur, le texte de ltiquette et celui de la taille ne saffichent pas.
Haut de la page
Remplacement dun espace rserv pour une image

Un espace rserv pour image naffiche pas dimage dans un navigateur. Avant de publier votre site, il convient de remplacer tous les espaces
rservs pour une image que vous avez ajouts par des fichiers dimage adapts au Web, tels que des images GIF ou JPEG.
Si vous possdez Fireworks, vous pouvez crer un nouveau graphique partir dun espace rserv pour image dans Dreamweaver. La nouvelle
image reprend la mme taille que celle de lespace rserv pour limage. Vous pouvez modifier limage, puis la remplacer dans Dreamweaver.
388
1. Dans la fentre Document, procdez de lune des manires suivantes :

Double-cliquez sur lespace rserv pour limage.
Cliquez sur lespace rserv pour limage pour le slectionner puis, dans linspecteur Proprits (Fentre > Proprits),
cliquez sur licne du dossier ct de la zone de texte Src.
2. Dans la bote de dialogue Source de limage, localisez limage que vous voulez utiliser pour remplacer lespace rserv, puis
cliquez sur OK.
Haut de la page
Dfinition des proprits de lespace rserv pour limage

Pour dfinir les proprits dun espace rserv pour limage, slectionnez lespace rserv dans la fentre de document, puis choisissez la
commande Fentre > Proprits pour afficher linspecteur Proprits. Cliquez sur la flche dagrandissement dans langle infrieur droit pour
afficher toutes les proprits.
Utilisez linspecteur Proprits pour dfinir un nom, une largeur, une hauteur, une source dimage, une autre description de texte, un alignement
ou une couleur pour lespace rserv pour limage.
Dans linspecteur Proprits de lespace rserv, la zone de texte grise et la zone de texte Aligner sont dsactives. Vous pouvez dfinir ces
proprits dans linspecteur Proprits de limage lorsque vous remplacez lespace rserv par une image.
Parmi les options suivantes, dfinissez celles de votre choix :
L et H Dfinissent la largeur et la hauteur de lespace rserv pour limage, en pixels.
Src Spcifie le fichier source de limage. Pour un espace rserv pour une image, cette zone de texte est vide. Cliquez sur le
bouton Parcourir pour slectionner une image utiliser en remplacement du graphique de lespace rserv.
Lien Spcifie un lien hypertexte pour lespace rserv de limage. Faites glisser licne Pointer vers un fichier dans le
panneau Fichiers, cliquez sur licne de dossier pour rechercher et slectionner un document de votre site ou tapez
directement lURL.
Sec Spcifie le texte secondaire qui apparatra la place de limage dans les navigateurs de type texte seulement, ou dans
les navigateurs dont lutilisateur a dsactiv le tlchargement automatique des images. Pour les utilisateurs malvoyants qui
utilisent un synthtiseur vocal avec un navigateur en mode texte, le texte est lu. Dans certains navigateurs, ce texte apparat
galement lorsque le pointeur se trouve sur limage.
Crer Permet de lancer Fireworks pour crer une image de remplacement. Le bouton Crer est dsactiv, sauf si Fireworks
est galement install sur votre ordinateur.
Mettre jour depuis loriginal

Lorsque limage Web (cest--dire limage de la page Dreamweaver) nest pas
synchronise avec le fichier Photoshop dorigine, Dreamweaver dtecte que le fichier dorigine a t mis jour et affiche lune
des flches de licne dobjet dynamique en rouge. Lorsque vous slectionnez limage Web en mode Cration et que vous
cliquez sur le bouton Mettre jour depuis loriginal dans linspecteur Proprits, limage se met jour automatiquement avec
tous les changements effectus dans le fichier Photoshop dorigine.
Couleur Spcifie une couleur pour lespace rserv de limage.
389
Haut de la page
Modification dimages dans Dreamweaver

Vous pouvez rchantillonner, recadrer, optimiser et accentuer les images dans Dreamweaver. Vous pouvez galement rgler leur luminosit et
leur contraste.
Fonctions de retouche dimage

Dreamweaver comprend des fonctions basiques de retouche dimage, ce qui vous vite de devoir lancer une application externe pour effectuer
cette tche (par exemple, Fireworks ou Photoshop). Les outils de retouche dimage de Dreamweaver sont conus pour un travail simplifi avec les
concepteurs de contenu responsables de la cration des fichiers dimage utiliss sur votre site Web.
Remarque : il nest pas ncessaire dinstaller Fireworks ou dautres applications de retouche dimage sur votre ordinateur pour utiliser les
fonctions de retouche dimage de Dreamweaver.
Choisissez Modifier > Image. Dfinissez lune des fonctions de retouche dimage Dreamweaver suivantes :
Rchantillonner Ajoute ou enlve des pixels dimages JPEG ou GIF redimensionnes afin quelles correspondent le mieux
possible laspect des images originales. Le rchantillonnage dune image rduit la taille de son fichier, ce qui permet den
acclrer le tlchargement.
Lorsque vous redimensionnez une image dans Dreamweaver, vous pouvez la rchantillonner afin de ladapter ses
nouvelles dimensions. Lorsquun objet bitmap est rchantillonn, des pixels sont ajouts limage ou en sont enlevs afin de
lagrandir ou de la rduire. En gnral, le rchantillonnage dune image une rsolution suprieure provoque une faible perte
de qualit. Le rchantillonnage une rsolution infrieure, en revanche, provoque toujours une perte de donnes et donne
une moins bonne qualit.
Recadrer Permet de rduire la surface des images. En gnral, il est utile pour mettre en vidence le sujet de limage et
supprimer les aspects indsirables qui entourent le centre dintrt de limage.
Luminosit et contraste Modifie la luminosit et le contraste des pixels qui composent limage. Ceci affecte les surbrillances,
les ombres et les demi-tons dune image. Cette fonction est utilise pour corriger les images trop sombres ou trop claires.
Accentuer Ajuste la mise au point dune image en augmentant le contraste des bords sur limage. Lorsque vous scannez une
image ou que vous prenez une photo numrique, la plupart des logiciels de capture dimages estompent par dfaut les bords
des objets photographis. Cela empche les dtails extrmement prcis de se perdre dans les pixels dont sont constitues les
images numriques. Cependant, il est souvent ncessaire daccentuer limage pour faire ressortir les dtails dans les fichiers
dimage numrique, ce qui augmente le contraste des bords et rend limage encore plus nette.
Remarque : les fonctions de modification dimages de Dreamweaver sappliquent uniquement aux formats de fichier JPEG
et GIF. Les autres formats de fichiers dimage bitmap ne peuvent pas tre modifis laide de ces fonctions.
Recadrage dune image

Dreamweaver permet de recadrer (ou rogner) les images bitmap.
Remarque : lorsque vous recadrez une image, le fichier dimage source est modifi sur le disque. Il peut donc savrer utile de conserver une
copie de sauvegarde du fichier dimage au cas o vous auriez besoin de revenir limage dorigine.
1. Ouvrez la page qui contient limage recadrer, slectionnez limage et procdez de lune des manires suivantes :
Cliquez sur licne Recadrer
dans linspecteur Proprits des images.
Choisissez Modifier > Image > Recadrer.

Des poignes de recadrage apparaissent autour de limage slectionne.
2. Ajustez-les jusqu ce que la surface de limage conserver soit entoure dune zone limite.
390
3. Double-cliquez dans cette zone ou appuyez sur Entre pour recadrer la slection.
4. Une bote de dialogue vous informe que le fichier image que vous recadrez sera modifi sur le disque. Cliquez sur OK.
Chaque pixel de limage bitmap situ hors de la zone limite est supprim mais les autres objets de limage ne sont pas
affects.
5. Vrifiez laide de laperu que limage correspond vos attentes. Si ce nest pas le cas, choisissez Edition > Annuler
Recadrer pour revenir limage dorigine.
Remarque : vous pouvez annuler leffet de la commande Recadrer (et revenir au fichier dimage dorigine) jusquau moment
o vous quittez Dreamweaver ou alors modifiez le fichier dans une application de retouche dimage.
Optimisation dune image

Vous pouvez optimiser des images sur vos pages Web dans Dreamweaver.
1. Ouvrez la page qui contient limage optimiser, slectionnez limage et procdez de lune des manires suivantes :
Cliquez sur le bouton Modifier les paramtres de limage
dans linspecteur Proprits de limage.
Choisissez Modifier > Image > Optimiser.

2. Apportez les modifications dans la bote de dialogue Optimisation dimage, puis cliquez sur OK.
Accentuation dune image

Laccentuation augmente le contraste des pixels autour des objets pour augmenter la dfinition de limage et obtenir une meilleure nettet.
1. Ouvrez la page qui contient limage accentuer, slectionnez limage et procdez de lune des manires suivantes :
Cliquez sur le bouton Accentuer
Choisissez Modifier > Image > Accentuer.

2. Pour spcifier le degr daccentuation appliqu par Dreamweaver limage, dplacez le curseur ou tapez une valeur comprise
entre 0 et 10 dans la zone de texte. Lorsque vous ajustez la nettet de limage laide de la bote de dialogue Accentuer,
vous pouvez afficher un aperu de limage modifie.
3. Lorsque vous tes satisfait de limage, cliquez sur OK.
4. Enregistrez vos modifications en choisissant Fichier > Enregistrer ou revenez limage dorigine en choisissant Edition >
Annuler Accentuer.
Remarque : vous pouvez annuler leffet de la commande Accentuer (et revenir au fichier dimage dorigine) uniquement
avant denregistrer la page qui contient limage. Une fois que vous avez enregistr la page, les modifications apportes
limage sont dfinitivement enregistres.
Ajustement de la luminosit et du contraste dune image

La fonction Luminosit/Contraste modifie la luminosit ou le contraste des pixels qui composent limage. Ceci affecte les surbrillances, les ombres
et les demi-tons dune image. Cette fonction est utilise pour corriger les images trop sombres ou trop claires.
1. Ouvrez la page qui contient limage ajuster, slectionnez limage et procdez de lune des manires suivantes :
Cliquez sur le bouton Luminosit/Contraste
Choisissez Modifier > Image > Luminosit/Contraste.

2. Dplacez les curseurs de luminosit et de contraste pour modifier les valeurs votre convenance. Les valeurs sont comprises
entre -100 et 100.
3. Cliquez sur OK.
391
Haut de la page
Cration dune image survole

Vous pouvez insrer des images survoles dans votre page. Une image survole est une image qui, lorsquelle est visualise dans un navigateur,
change lorsque le pointeur vient se placer au-dessus delle.
Vous devez disposer de deux images pour crer limage survole : limage principale (affiche au chargement de la page) et limage secondaire
(qui apparat lorsque le pointeur est plac au-dessus de limage principale). Les deux images utilises doivent avoir les mmes dimensions ; si ce
nest pas le cas, Dreamweaver redimensionne la seconde image en fonction de la taille de la premire.
Les images survoles sont automatiquement dfinies pour rpondre lvnement onMouseOver. Vous pouvez configurer une image pour
quelle rponde un vnement diffrent (par exemple, un clic de souris) ou modifier une image survole.
1. Dans la fentre de document, placez le point dinsertion lendroit o vous voulez insrer limage survole.
2. Insrez limage survole laide de lune des mthodes suivantes :
Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Images puis slectionnez licne Image survole.
Lorsque licne Image survole saffiche dans le panneau Insertion, vous pouvez la faire glisser jusqu la fentre de
document.
Slectionnez Insertion > Objets image > Image survole.
3. Dfinissez les options, puis cliquez sur OK.
Nom de limage Nom de limage survole.
Image dorigine Image qui doit safficher au chargement de la page. Entrez le chemin daccs dans la zone de texte ou
cliquez sur Parcourir et slectionnez limage.
Image survole Image afficher lorsque le pointeur est plac au-dessus de limage originale. Entrez le chemin daccs de
limage ou cliquez sur Parcourir pour la slectionner.
Prcharger limage survole Prcharge les images dans la mmoire cache du navigateur afin dviter tout dlai lorsque
vous faites passer le pointeur de la souris par-dessus limage.
Texte secondaire (Facultatif) Texte qui dcrit limage lintention des personnes utilisant un navigateur en mode texte.
Si cliqu, aller lURL Fichier ouvrir lorsquun utilisateur clique sur limage survole. Entrez le chemin daccs du fichier
ou cliquez sur Parcourir pour le slectionner.
Remarque : si vous ne dfinissez pas un lien pour limage, Dreamweaver insre un lien nul (#) dans le code source HTML
auquel le comportement de survol est attach. Si vous supprimez le lien nul, limage survole ne fonctionne plus.
4. Choisissez Fichier > Aperu dans le navigateur ou appuyez sur la touche F12.
5. Dans le navigateur, placez le pointeur au-dessus de limage dorigine pour voir limage survole.
Remarque : il est impossible de voir leffet dune image survole dans le mode Cration.
Haut de la page
Utilisation dun diteur dimage externe

Dans Dreamweaver, vous pouvez ouvrir une image slectionne dans un diteur dimage externe. Lorsque vous revenez dans Dreamweaver
aprs avoir enregistr le fichier dimage modifi, toutes les modifications apportes limage sont visibles dans la fentre de document.
Vous pouvez dfinir Fireworks comme principal diteur dimage. Vous pouvez galement dfinir quels types de fichier un diteur peut ouvrir et
vous pouvez slectionner plusieurs diteurs dimage. Par exemple, vous pouvez dfinir des prfrences afin de dmarrer Fireworks pour modifier
les fichiers GIF et de lancer un diteur dimage diffrent pour modifier les fichiers JPG ou JPEG.
392
Dmarrage de lditeur dimage externe

Double-cliquez sur limage modifier.
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) sur limage
modifier, choisissez Modifier avec > Parcourir et slectionnez un diteur.
Slectionnez limage modifier, puis cliquez sur Modifier dans linspecteur Proprits.
Double-cliquez sur le fichier dimage dans le panneau Fichiers pour lancer lditeur dimage principal. Si vous navez pas
indiqu dditeur dimage, Dreamweaver excute lditeur par dfaut de ce type de fichier.
Remarque : lorsque vous ouvrez directement une image partir du panneau Fichiers, les fonctionnalits dintgration de
Fireworks sont inoprantes ; Fireworks nouvre pas le fichier original PNG. Pour utiliser ces fonctionnalits dintgration de
Fireworks, ouvrez les images partir de la fentre de document.
Si limage mise jour napparat pas une fois de retour dans la fentre de Dreamweaver, slectionnez limage et cliquez sur le
bouton Actualiser dans linspecteur Proprits.
Dfinition dun diteur dimage externe pour un type de fichier existant

Vous pouvez slectionner lditeur dimage utiliser pour ouvrir et modifier les fichiers graphiques.
1. Ouvrez la bote de dialogue Types de fichiers/Editeurs en effectuant lune des oprations suivantes :
Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh) et slectionnez la catgorie
Types de fichiers/Editeurs dans la liste de gauche.
Choisissez la commande Edition > Modifier avec diteur externe, puis slectionnez Types de fichiers/Editeurs.
2. Dans la liste Extensions, slectionnez lextension de fichier pour laquelle dfinir un diteur externe.
3. Cliquez sur le bouton Ajouter (+) au-dessus de la liste Editeurs.
4. Dans la bote de dialogue Slectionner un diteur externe, recherchez lapplication dmarrer en tant quditeur pour ce type
de fichier.
5. Dans la bote de dialogue Prfrences, cliquez sur Principal si vous souhaitez que cet diteur soit lditeur principal pour ce
type de fichier.
6. Si vous souhaitez configurer un diteur supplmentaire pour ce type de fichier, rptez les tapes 3 et 4.
Dreamweaver utilise automatiquement lditeur principal lorsque vous modifiez ce type dimage. Vous pouvez choisir lun des
autres diteurs figurant dans la liste, partir du menu droulant de limage, dans la fentre de document.
Ajout dun nouveau type de fichier la liste Extensions

2. Dans la bote de dialogue Types de fichiers/Editeurs, cliquez sur le bouton Ajouter (+) au-dessus de la liste Extensions.
Une zone de texte saffiche dans la liste Extensions.
3. Tapez lextension de fichier pour le type de fichier que vous voulez ouvrir avec lditeur.
4. Pour slectionner un diteur externe pour le type de fichier, cliquez sur le bouton Ajouter (+) au-dessus de la liste Editeurs.
5. Dans la bote de dialogue qui apparat alors, slectionnez lapplication utiliser pour modifier ce type dimage.
6. Cliquez sur Principal si vous dsirez que ce programme soit lditeur principal pour ce type dimage.
393
Modification dune prfrence dditeur existante

2. Dans la bote de dialogue Types de fichiers/Editeurs, slectionnez dans la liste Extensions le type de fichier que vous
souhaitez modifier pour visualiser les diteurs actuellement dfinis.
3. Dans la liste Editeurs, slectionnez lditeur que vous dsirez affecter ce type de fichier, puis procdez de lune des
manires suivantes :
Cliquez sur le bouton Ajouter (+) ou Supprimer (-), au-dessus de la liste Editeurs, pour ajouter ou supprimer un diteur.
Cliquez sur le bouton Rendre principal pour dfinir lditeur lancer par dfaut pour la retouche.
Haut de la page
Application de comportements aux images

Vous pouvez appliquer lun des comportements disponibles une image ou la zone ractive dune image. Lorsque vous appliquez un
comportement une zone ractive, Dreamweaver insre le code source HTML ncessaire dans la balise area. Trois comportements sappliquent
spcifiquement aux images : Prcharger les images, Permuter une image et Restaurer linterversion dimages.
Prcharger les images Place dans la mmoire cache du navigateur les images qui ne sont pas immdiatement affiches lors du chargement de
la page (par exemple, les images de substitution appeles par un comportement, un lment PA ou une fonction en JavaScript). Cela vite
lutilisateur dattendre que ces images soient charges, lorsquun vnement dclenche leur apparition.
Permuter une image Remplace une image par une autre, en modifiant lattribut SRC de la balise img. Utilisez cette action pour crer des
substitutions de boutons et autres effets sur des images (y compris la substitution de plusieurs images la fois).
Restaurer limage intervertie Rtablit la dernire interversion dimages son tat dorigine. Cette action est automatiquement ajoute par dfaut
lorsque vous associez laction Permuter une image un objet ; en principe, vous navez pas besoin dy faire appel manuellement.
Vous pouvez galement utiliser des comportements pour crer des systmes de navigation plus sophistiqus, comme les menus de reroutage.
394
Ajout d'objets multimdias

Insertion et modification d'objets multimdias
Lancement d'un diteur externe pour des fichiers multimdias
Spcification de l'diteur lancer depuis Dreamweaver
Utilisation des Design Notes avec les objets multimdias
Insertion d'animations Shockwave
Ajout de vido (non FLV)
Insertion du contenu d'un plug-in
Dpannage des plug-ins de
Insertion d'un contrle ActiveX
Insertion d'une applet Java
Utilisation de comportements pour contrler les objets multimdias
Utilisation de paramtres pour contrler des objets multimdia
Haut de la page
Insertion et modification d'objets multimdias
Outre les fichiers SWF et FLV, vous pouvez insrer des vidos QuickTime ou Shockwave, des applets Java, des contrles ActiveX ou d'autres
objets audio ou vido dans un document Dreamweaver. Si vous insrez des attributs d'accessibilit avec un objet multimdia, vous pouvez dfinir
les attributs d'accessibilit et modifier ces valeurs dans le code HTML.
1. Placez le point d'insertion dans la fentre de document l'endroit o vous souhaitez insrer l'objet.
2. Pour insrer l'objet souhait, procdez de l'une des manires suivantes :
Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Mdias et slectionnez l'icne correspondant au
type d'objet que vous souhaitez insrer.
Choisissez l'objet appropri dans le sous-menu Insertion > Mdias.
Si l'objet insrer n'est pas un objet Shockwave, Applet ou ActiveX, choisissez Plug-in dans le sous-menu Insertion >
Mdias.
Une bote de dialogue permet alors de choisir un fichier source et de spcifier certains paramtres de l'objet multimdia.
Pour viter que ces botes de dialogue ne s'affichent, choisissez Edition > Prfrences > Gnral (Windows) ou
Dreamweaver > Prfrences > Gnral (Macintosh) et dsactivez l'option Afficher la bote de dialogue lors de
l'insertion d'objets. Pour remplacer la prfrence d'affichage des botes de dialogue, maintenez enfonce la touche Ctrl
(Windows) ou Option (Macintosh) tout en insrant l'objet. Par exemple, pour insrer un espace rserv pour une
animation Shockwave sans spcifier le fichier correspondant, maintenez la touche Ctrl ou Option enfonce et cliquez
sur le bouton Shockwave partir du menu Support de la catgorie Commun du panneau Insertion ou choisissez
Insertion > Mdias > Shockwave.
3. Compltez les options de la bote de dialogue Slectionner un fichier, puis cliquez sur OK.
Remarque : La bote de dialogue Attributs d'accessibilit s'affiche si vous avez dcid d'afficher les attributs lors de l'insertion
de mdias dans la bote de dialogue Edition > Prfrences.
4. Dfinissez les attributs d'accessibilit.
Remarque : Vous pouvez galement modifier les attributs d'un objet multimdia. Pour ce faire, slectionnez 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 Contrle
enfonce (Macintosh), puis slectionnez Modifier le code de la balise.
Titre Entrez un titre pour l'objet multimdia.
Cl d'accs Entrez un quivalent clavier (une lettre) dans la zone de texte pour slectionner l'objet de formulaire dans le
navigateur. Cela permet aux visiteurs du site d'utiliser la touche Ctrl (Windows) conjointement la cl d'accs pour accder
l'objet. Par exemple, si vous entrez B comme Cl d'accs, utilisez Ctrl+B pour slectionner l'objet dans le navigateur.
Ordre des tabulations Entrez un nombre pour dfinir l'ordre de tabulation de l'objet. La dfinition d'un ordre d'apparition peut
se rvler 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 l'autre dans un ordre particulier. Si vous dfinissez un ordre d'apparition pour un objet, assurez-vous de le
faire galement pour tous les autres objets.
5. Cliquez sur OK pour insrer l'objet multimdia.
395
Remarque : Si vous cliquez sur Annuler, un espace rserv pour l'objet multimdia s'affiche dans le document, mais
Dreamweaver ne lui associe ni balises ni attributs d'accessibilit.
Pour spcifier un fichier source, dfinir les dimensions et d'autres paramtres et attributs, utilisez l'inspecteur Proprits pour
chaque objet. Vous pouvez modifier les attributs d'accessibilit d'un objet.
Lancement d'un diteur externe pour des fichiers multimdias
Haut de la page
Vous pouvez lancer un diteur externe depuis Dreamweaver pour modifier la plupart des fichiers multimdias. Vous pouvez galement dcider de
l'diteur que doit lancer Dreamweaver pour modifier le fichier.
1. Assurez-vous que le type du fichier multimdia est associ un diteur sur votre systme.
Pour savoir quel diteur est associ au type de fichier, slectionnez Edition > Prfrences dans Dreamweaver, puis Types de
fichiers/Editeurs dans la liste Catgorie. Cliquez sur l'extension de fichier dans la colonne Extensions pour consulter le ou les
diteurs associs dans la colonne Editeurs. Vous pouvez modifier l'diteur associ un type de fichier.
2. Double-cliquez sur le fichier multimdia dans le panneau Fichiers pour lancer l'diteur externe et ouvrir le fichier.
L'diteur qui est excut lorsque vous double-cliquez sur le fichier du panneau Fichiers est appel diteur principal . Si
vous double-cliquez sur un fichier image, par exemple, Dreamweaver ouvre le fichier dans l'application principale de retouche
d'image dfinie, par exemple Adobe Fireworks.
3. Si vous ne souhaitez pas utiliser l'diteur externe principal pour modifier le fichier, vous pouvez effectuer l'une des oprations
suivantes pour utiliser un autre diteur :
(Macintosh) sur le nom du fichier concern et slectionnez Ouvrir avec dans le menu qui s'affiche.
En mode Cration, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce
(Macintosh) sur l'lment multimdia de la page affiche, puis slectionnez Modifier avec dans le menu contextuel.
Spcification de l'diteur lancer depuis Dreamweaver
Haut de la page
Vous pouvez dfinir l'diteur lancer par Dreamweaver pour modifier un type de fichier et pour ajouter ou supprimer des types de fichiers
reconnus par Dreamweaver.
Indication explicite des diteurs externes lancer pour un type de fichier donn
1. Choisissez Edition > Prfrences, puis slectionnez Types de fichiers/Editeurs dans la liste Catgorie.
Les extensions de fichiers, par exemple .gif, .wav et .mpg, apparaissent dans la liste de gauche, sous le titre Extensions. Les
diteurs associs une extension apparaissent dans la liste de droite, sous le titre Editeurs.
2. Slectionnez l'extension de type de fichier dans la liste Extensions, puis effectuez l'une des oprations suivantes :
Pour associer un nouvel diteur au type de fichier, cliquez sur le bouton plus (+), au-dessus de la liste Editeurs et
renseignez la bote de dialogue qui s'affiche.
Par exemple, slectionnez l'icne de l'application Acrobat pour l'associer au type de fichier.
Pour faire d'un diteur l'diteur principal pour un type de fichier donn (c'est--dire celui qui s'ouvre automatiquement
lorsque vous double-cliquez sur un fichier de ce type dans le panneau Fichiers), slectionnez cet diteur dans la liste
Editeurs, puis cliquez sur Rendre principal.
Pour qu'un diteur ne soit plus li un type de fichier donn, slectionnez cet 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 diteur associ

1. Cliquez sur le bouton plus (+), au-dessus de la liste Extensions et entrez une extension de type de fichier (saisissez le point
prcdent l'extension) ou plusieurs extensions lies et spares par des espaces.
Vous pouvez, par exemple, entrer .xml .xsl si vous souhaitez associer ces fichiers avec un diteur XML install sur votre
systme.
2. Pour slectionner un diteur pour le type de fichier, cliquez sur le bouton plus (+), au-dessus de la liste Editeurs et renseignez
la bote de dialogue qui s'affiche.
Suppression d'un type de fichier

Slectionnez 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 tant impossible, soyez prudent lors d'une telle opration.
396
Utilisation des Design Notes avec les objets multimdias
Haut de la page
Comme pour la plupart des objets dans Dreamweaver, vous pouvez ajouter des Design Notes un objet multimdia. Les Design Notes sont des
notes associes un fichier particulier et stockes dans un fichier spar. Les Design Notes vous permettent de conserver des informations
supplmentaires sur les documents, par exemple, des commentaires sur l'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 Contrle enfonce (Macintosh) sur l'objet
dans la fentre de document.
Remarque : Vous devez dfinir votre site avant d'ajouter des Design Notes un objet.
2. Cliquez sur Design Notes de la page dans le menu contextuel.
3. Entrez les informations souhaites dans la Design Note.
Vous pouvez galement ajouter une Design Note un objet multimdia partir du panneau Fichiers en slectionnant le
fichier, en affichant le menu contextuel, puis en choisissant l'option Design Notes dans ce dernier.
Haut de la page
Insertion d'animations Shockwave
Vous pouvez utiliser Dreamweaver pour insrer des animations Shockwave dans vos documents. Adobe Shockwave, une norme pour les
lments multimdia interactifs sur le Web, est un format compress qui autorise le tlchargement rapide des fichiers multimdia crs dans
Adobe Director, ainsi que leur lecture dans la plupart des navigateurs.
1. Dans la fentre de document, placez le point d'insertion l'endroit o vous souhaitez insrer une animation Shockwave et
procdez de l'une des manires suivantes :
Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Mdias puis slectionnez l'icne Shockwave
dans le menu.
Choisissez Insertion > Mdias > Shockwave.
2. Dans la bote de dialogue qui s'affiche, slectionnez un fichier d'animation.
3. Dans l'inspecteur Proprits, tapez la largeur et la hauteur de l'animation dans les zones L et H.
Haut de la page
Ajout de vido (non FLV)
Plusieurs mthodes vous permettent d'ajouter une vido votre page Web et vous pouvez faire appel divers formats. L'utilisateur peut
tlcharger les vidos ou elles peuvent tre diffuses et lues pendant leur tlchargement.
1. Placez le fichier vido dans le dossier de votre site.
Ces clips se prsentent souvent au format AVI ou MPEG.
2. Insrez un lien vers la squence ou incorporez-la dans votre page.
Pour tablir un lien vers la squence, entrez un texte pour le lien (par exemple, Tlchargez la vido ), slectionnez le
texte et cliquez sur l'icne de dossier dans l'inspecteur de slections. Recherchez le fichier vido et slectionnez-le.
Remarque : L'utilisateur doit tlcharger une application d'aide (un plug-in) pour visualiser les formats lus en transit, comme
Real Media, QuickTime et Windows Media.
Haut de la page
Insertion du contenu d'un plug-in
Vous pouvez crer du contenu, par exemple une squence vido QuickTime pour un plug-in de navigateur, puis utiliser Dreamweaver pour insrer
ce contenu dans un document HTML. Par exemple, RealPlayer et QuickTime sont des plug-ins par dfaut, alors que les fichiers MP3 et les
animations QuickTime sont des fichiers de contenu.
Vous pouvez afficher un aperu des animations qui font directement appel aux plug-ins de navigateur dans le mode Cration dans la fentre de
document. Vous pouvez lire simultanment tous les lments des plug-ins pour savoir comment la page s'affichera sur le poste de l'utilisateur ou
lire chaque lment individuellement pour vous assurer que vous avez incorpor le bon lment multimdia.
Remarque : Il n'est pas possible d'afficher un aperu des films ou animations bases sur des contrles ActiveX.
Aprs avoir insr le contenu d'un plug-in , utilisez l'inspecteur Proprits pour en dfinir les paramtres. Pour afficher les proprits suivantes
dans l'inspecteur Proprits, slectionnez un objet plug-in
Lors de son ouverture, l'inspecteur Proprits affiche les proprits les plus couramment utilises. Cliquez sur la flche d'agrandissement, dans le
coin infrieur droit, pour afficher toutes les proprits.
Insertion du contenu d'un plug-in et dfinition de ses proprits

1. Dans la fentre de document (mode Cration), placez le point d'insertion l'endroit o vous souhaitez insrer le contenu, puis
397
Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Mdias puis slectionnez l'icne Plug-in
le menu.
dans
Slectionnez Insertion > Mdias > Plug-in.

2. Dans la bote de dialogue qui s'affiche, slectionnez un fichier de contenu pour un plug-in , puis cliquez sur OK.
3. Dfinissez les options du plug-in dans l'inspecteur Proprits.
Nom Spcifie un nom permettant d'identifier le plug-in dans un script. Tapez un nom dans la zone de texte sans titre,
l'extrme gauche de l'inspecteur Proprits.
L et H Spcifient, en pixels, la largeur et la hauteur alloues l'objet sur la page.
Src Spcifie le fichier des donnes source. Cliquez sur l'icne de dossier pour rechercher un fichier ou entrez un nom de
fichier.
URL du plug-in Spcifie l'URL pour l'attribut pluginspace. Indiquez l'URL complte du site partir duquel les utilisateurs
peuvent tlcharger le plug-in. Si l'utilisateur qui consulte votre page ne possde pas le plug-in ncessaire, le navigateur
essaie de le tlcharger partir de cette URL.
Alignement Dtermine l'alignement de l'objet sur la page.
Espace V. et Espace H. Spcifient la quantit d'espace blanc, en pixels, au-dessus, au-dessous et de chaque ct du plugin.
Bordure Spcifie la largeur de la bordure autour du plug-in.
Paramtres Ouvre une bote de dialogue permettant d'indiquer des paramtres supplmentaires transmettre au plug-in
Nombreux sont les plug-ins qui rpondent des paramtres particuliers.
Vous pouvez galement afficher les attributs affects au plug-in slectionn en cliquant sur le bouton Attribut. Vous pouvez
modifier, ajouter ou supprimer des attributs tels que la hauteur et la largeur dans cette bote de dialogue.
Lecture de contenu d'un plug-in dans la fentre de document

1. Insrez un ou plusieurs lments multimdias l'aide d'une des mthodes dcrites dans la section prcdente.
Slectionnez un des lments multimdia que vous avez insrs, puis choisissez la commande Affichage > Plug-ins >
Lire ou cliquez sur le bouton de lecture de l'inspecteur Proprits.
Choisissez la commande Affichage > Plug-ins > Lire tout pour lire tous les lments multimdia de la page slectionne
qui font appel 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.
Arrt de la lecture du contenu d'un plug-in

Slectionnez un lment multimdia, puis choisissez la commande Affichage > Plug-ins > Arrter ou cliquez sur le bouton d'arrt dans
l'inspecteur Proprits.
Vous pouvez galement slectionner Affichage > Plug-ins > Arrter tout pour interrompre la lecture de tous les contenus des plug-ins.
Haut de la page
Dpannage des plug-ins de
Vous avez suivi les tapes permettant de lire le contenu d'un plug-in dans la fentre de document, mais constatez qu'une partie ne fonctionne pas.
Essayez l'opration suivante :
Vrifiez que le plug-in associ est bien install sur votre ordinateur et que sa version est compatible avec le contenu charg.
Ouvrez le fichier Configuration/Plugins/UnsupportedPlugins.txt dans un diteur de texte et vrifiez si le plug-in posant problme
est rpertori. Ce fichier conserve la trace des plug-ins tant la source de problmes dans Dreamweaver et qui ne sont donc
pas pris en charge. Si vous constatez des problmes avec un plug-in particulier, il est souhaitable de l'ajouter ce fichier.
Vrifiez que vous avez suffisamment de mmoire. Certains plug-ins ncessitent de 2 5 Mo de mmoire supplmentaire pour
fonctionner.
Haut de la page
Insertion d'un contrle ActiveX
Vous pouvez ajouter un contrle ActiveX votre page. Les contrles ActiveX (autrefois appels commandes OLE) sont des composants
rutilisables, un peu comme des applications miniatures, qui peuvent fonctionner comme des plug-ins de navigateurs. Ils fonctionnent dans
Internet Explorer sous Windows, mais pas dans les navigateurs Macintosh. L'objet ActiveX de Dreamweaver vous permet de fournir les attributs et
paramtres d'un contrle ActiveX charg par le navigateur du visiteur.
398
Une fois un objet ActiveX insr, utilisez l'inspecteur Proprits pour dfinir les attributs de la balise object et les paramtres du contrle ActiveX.
Cliquez sur Paramtres dans l'inspecteur Proprits pour indiquer des noms et des valeurs de proprits qui n'apparaissent pas dans l'inspecteur
Proprits. Il n'existe pas de format standard unanimement accept pour les paramtres des contrles ActiveX. Consultez la documentation sur le
contrle ActiveX que vous utilisez pour savoir quels paramtres choisir.
Dans la fentre de document, positionnez le curseur l'emplacement o insrer le contenu et procdez de l'une des manires suivantes :
Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Mdias puis slectionnez l'icne ActiveX
Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Mdias puis slectionnez l'icne ActiveX. Lorsque
l'icne ActiveX s'affiche dans le panneau Insertion, vous pouvez la faire glisser jusqu' la fentre du document.
Choisissez Insertion > Mdias > ActiveX. Une icne indique l'emplacement de la page o apparatra le contrle ActiveX dans
Internet Explorer.
Proprits d'ActiveX
Nom Spcifie un nom qui permet d'identifier l'objet ActiveX pour les scripts. Tapez un nom dans la zone de texte sans titre, l'extrme gauche de
L et H Spcifient la largeur et la hauteur de l'objet, en pixels.
ID de classe Identifie le contrle ActiveX pour le navigateur. Tapez la valeur ou choisissez-en une dans le menu contextuel. Lorsque la page est
charge, le navigateur utilise l'ID de classe pour localiser le contrle ActiveX requis par l'objet ActiveX associ la page. Si le navigateur ne peut
pas localiser le contrle ActiveX spcifi, il essaie de le tlcharger partir de l'emplacement spcifi dans le champ Base.
Incorporer Ajoute une balise embed dans la balise object pour le contrle ActiveX. S'il existe un plug-in quivalent au contrle ActiveX, la balise
embed active ce plug-in. Dreamweaver affecte les valeurs que vous avez saisies comme proprits d'objets ActiveX aux plug-ins quivalents de
Paramtres Ouvre une bote de dialogue dans laquelle vous pouvez indiquer des paramtres supplmentaires transmettre l'objet ActiveX.
Nombreux sont les contrles ActiveX qui possdent des paramtres particuliers.
Src Dfinit le fichier de donnes utiliser pour un plug-in , si l'option Incorporer est active. Si vous n'entrez pas de valeur, Dreamweaver essaie
d'en dterminer une partir des proprits d'ActiveX entres prcdemment.
Espace V. et Espace H. Spcifient la quantit d'espace blanc, en pixels, au-dessus, au-dessous et de chaque ct de l'objet.
Base Spcifie l'URL qui contient le contrle ActiveX. Internet Explorer tlcharge le contrle ActiveX partir de cet emplacement s'il n'a pas t
install sur le systme du visiteur. Si vous ne prcisez pas le paramtre Base et que le contrle ActiveX ncessaire n'est pas dj install sur
l'ordinateur du visiteur, son navigateur ne pourra pas afficher l'objet ActiveX.
Img sec. Spcifie une image afficher si le navigateur ne prend pas en charge la balise object. Cette option n'est disponible que si l'option
Incorporer est dslectionne.
Donnes Spcifie un fichier de donnes que le contrle ActiveX doit charger. De nombreux contrles ActiveX, tels que Shockwave et RealPlayer,
n'utilisent pas ce paramtre.
Haut de la page
Insertion d'une applet Java
Vous pouvez insrer une applet Java dans un document HTML l'aide de Dreamweaver. Java est un langage de programmation qui permet de
dvelopper des applications lgres (applets) pouvant tre incorpores dans des pages Web.
Une fois une applet Java insre, utilisez l'inspecteur Proprits pour dfinir les paramtres. Slectionnez une applet Java pour afficher ses
proprits dans l'inspecteur Proprits.
1. Dans la fentre de document, placez le point d'insertion l'endroit o vous souhaitez insrer l'applet, puis procdez de l'une
des manires suivantes :
Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Mdias puis slectionnez l'icne Applet
Choisissez Insertion > Mdias > Applet.

2. Slectionnez un fichier contenant une applet Java.
Proprits des applets Java

Nom Spcifie un nom permettant d'identifier l'applet dans un script. Tapez un nom dans la zone de texte sans titre, l'extrme gauche de
L et H Spcifient la largeur et la hauteur de l'applet, en pixels.
Code Spcifie le fichier contenant le code Java de l'applet. Cliquez sur l'icne de dossier pour rechercher un fichier ou entrez un nom de fichier.
Base Identifie le dossier contenant l'applet slectionne. Lorsque vous choisissez une applet, cette zone de texte est renseigne
automatiquement.
399

Sec Spcifie un contenu de remplacement (gnralement une image) afficher si le navigateur de l'utilisateur ne prend pas en charge les applets
Java ou si Java y est dsactiv. Si vous tapez du texte, Dreamweaver insre le texte comme tant la valeur de l'attribut alt de l'applet. Si vous
slectionnez une image, Dreamweaver insre une balise img entre les balises applet d'ouverture et de fermeture.
Espace V. et Espace H. Spcifient la quantit d'espace blanc, en pixels, au-dessus, au-dessous et de chaque ct de l'applet.
Paramtres Ouvre une bote de dialogue dans laquelle vous pouvez indiquer des paramtres supplmentaires transmettre l'applet.
Nombreuses sont les applets qui rpondent des paramtres particuliers.
Utilisation de comportements pour contrler les objets multimdias
Haut de la page
Vous pouvez ajouter des comportements votre page pour commencer ou arrter la lecture de divers objets multimdia.
Contrler Shockwave ou Flash Permet de lire, d'arrter, 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 ds que l'utilisateur survole un lien l'aide de la souris.
Vrifier le Plug-in Permet de vrifier si les visiteurs de votre site disposent du plug-in requis, puis de les diriger vers diffrentes URL, en fonction
du rsultat. Cela s'applique uniquement aux plug-ins de , car ce comportement ne vrifie pas les contrles ActiveX.
Utilisation de paramtres pour contrler des objets multimdia
Haut de la page
Dfinissez les paramtres spciaux pour contrler les fichiers Shockwave et SWF, les contrles ActiveX, les plug-ins et les applets Java. Les
paramtres sont utiliss avec les balises object, embed et applet. Les paramtres dfinissent des attributs spcifiques aux diffrents types d'objets.
Par exemple, un fichier SWF peut disposer du paramtre qualit <paramname="quality"value="best"> pour la balise object. La bote de dialogue
Paramtre est disponible partir de l'inspecteur Proprits. Consultez la documentation sur l'objet que vous utilisez pour connatre les paramtres
requis.
Remarque : Il n'existe pas de standard unanimement accept pour l'identification des fichiers de donnes des contrles ActiveX. Consultez la
documentation sur le contrle ActiveX que vous utilisez pour savoir quels paramtres choisir.
Saisie du nom et de la valeur d'un paramtre

1. Slectionnez un objet pouvant tre associ des paramtres (par exemple, une animation Shockwave, un contrle ActiveX,
un plug-in ou une applet Java) dans la fentre de document.
2. Ouvrez la bote de dialogue en procdant de l'une des manires suivantes :
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) sur l'objet
et cliquez sur Paramtres dans le menu contextuel.
Ouvrez l'inspecteur Proprits s'il n'est pas dj ouvert, puis cliquez sur le bouton Paramtres situ dans la section
infrieure de l'inspecteur Proprits. Assurez-vous que l'inspecteur Proprits est dvelopp.
3. Cliquez sur le bouton Plug (+) et entrez le nom et la valeur du paramtre dans les colonnes appropries.
Suppression d'un paramtre

Slectionnez un paramtre et cliquez sur le bouton Moins (-).
Rorganisation de paramtres
Slectionnez un paramtre et utilisez les boutons flchs vers le haut ou vers le bas.
Voir aussi
400
Ajout de vido
Incorporation de vidos aux pages Web (HTML5)
Insertion de fichiers FLV
Haut de la page
Incorporation de vidos aux pages Web (HTML5)
HTML5 prend en charge les balises audio et vido, permettant aux utilisateurs de lire des fichier audio et vido dans un navigateur sans
complment ni lecteur externe. Dreamweaver prend en charge les conseils de code permettant l'ajout de balises vido et audio.
Le mode En direct affiche la vido, de faon prvisualiser la vido que vous incorporez la page Web.
Remarque : Bien que vous puissiez incorporer toute vido votre page Web, le mode En direct ne les affiche pas toujours toutes. Les balises
audio et vido 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, la page Web n'affichera pas le contenu multimdia.
Haut de la page

Vous pouvez insrer facilement des vidos FLV dans vos pages Web sans avoir recours l'outil de cration Flash. Vous devez disposer d'un
fichier FLV cod avant de commencer.
Dreamweaver insre un composant SWF qui affiche le fichier FLV. Dans un navigateur, ce composant affiche le fichier FLV slectionn, ainsi
qu'un jeu de contrles de lecture.
Dreamweaver dispose des options suivantes pour proposer de la vido FLV aux visiteurs de votre site :
Vido en tlchargement progressif Tlcharge le fichier FLV sur le disque dur du visiteur, puis lance sa lecture. Contrairement aux mthodes
traditionnelles de fourniture de vido par tlchargement et lecture , le tlchargement progressif permet de lancer la lecture du fichier vido
avant la fin de son tlchargement.
Vido en flux continu Diffuse en continu le contenu vido et le lit sur une page Web aprs une courte priode de mise en mmoire tampon, ce
qui assure une lecture homogne. Pour activer la diffusion vido en continu sur vos pages Web, vous devez avoir accs Adobe Flash Media
Server.
Vous devez disposer d'un fichier FLV cod avant d'utiliser ce dernier dans Dreamweaver. Vous pouvez insrer les fichiers vido crs avec deux
types de codecs (technologies de compression/dcompression) : Sorenson Squeeze et On2.
Lorsque vous insrez un fichier FLV, tout comme dans le cas d'un fichier SDF ordinaire, Dreamweaver insre du code qui dtecte si l'utilisateur
dispose d'une version approprie de Flash Player pour voir la vido. Si ce n'est pas le cas, la page affiche un contenu alternatif qui invite
l'utilisateur tlcharger la version la plus rcente de Flash Player.
Remarque : Pour pouvoir visualiser un fichier FLV, Flash Player en version 8 ou ultrieure doit tre install sur l'ordinateur de l'utilisateur. Si
401
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 ultrieure, 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 vido, consultez le Centre de technologie vido l'adresse www.adobe.com/go/flv_devcenter_fr.
Insertion d'un fichier FLV
1. Choisissez Insertion > Mdias > FLV.
2. Dans la bote de dialogue Insrer un fichier FLV, choisissez Vido en tlchargement progressif dans le menu Type de vido.
3. Renseignez les autres sections de la bote de dialogue selon les besoins puis cliquez sur OK.
Remarque : Microsoft Internet Information Server (IIS) ne traite pas les balises object imbriques. Pour les pages ASP, Dreamweaver utilise du
code object/embed imbriqu au lieu du code object imbriqu lors de l'insertion de fichiers SWF ou FLV.
Dfinition des options pour la vido en tlchargement progressif
La bote de dialogue Insrer FLV permet de dfinir des options pour la remise par tlchargement progressif d'un fichier FLV insr dans une
page Web.
1. Choisissez Insertion > Mdias > FLV (ou cliquez sur l'icne FLV de la catgorie Mdias de la barre d'insertion Commun).
2. Dans la bote de dialogue Insrer FLV, choisissez Vido tlchargement progressif dans le menu Type de vido.
3. Dfinissez les options suivantes :
URL Spcifie le chemin absolu ou relatif du fichier FLV. Pour spcifier un chemin relatif (par exemple,
monchemin/mavideo.flv), cliquez sur le bouton Parcourir, accdez au fichier FLV et slectionnez-le. Pour spcifier un chemin
absolu, tapez l'URL (par exemple, http://www.exemple.com/mavideo.flv) du fichier FLV.
Enveloppe Dfinit l'aspect du composant vido. Un aperu de l'enveloppe slectionne apparat sous le menu contextuel
Enveloppe.
Largeur Indique la largeur (en pixels) du fichier FLV. Cliquez sur le bouton Dtecter la taille pour connatre la largeur exacte
du fichier FLV. Si Dreamweaver ne peut pas dterminer la largeur, tapez une valeur.
Hauteur Indique la hauteur (en pixels) du fichier FLV. Cliquez sur le bouton Dtecter la taille pour connatre la hauteur exacte
du fichier FLV. Si Dreamweaver ne peut pas dterminer 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
slectionne.
Respecter les proportions Prserve le rapport hauteur/largeur du composant vido. Cette option est slectionne par
dfaut.
Lecture automatique Indique si la lecture de la vido doit dmarrer ou non ds l'ouverture de la page Web.
Rembobinage automatique Dtermine si le contrle de lecture doit revenir en position de dpart au terme de la lecture de la
vido.
4. Cliquez sur OK pour fermer la bote de dialogue et ajouter le contenu FLV votre page Web.
La commande Insrer FLV gnre un fichier SWF de lecteur vido et un fichier SWF d'habillage qui serviront afficher votre
contenu vido sur une page Web. (Il est parfois ncessaire de cliquer sur le bouton Actualiser pour afficher les nouveaux
fichiers dans le panneau Fichiers). Ces fichiers sont stocks dans le mme rpertoire que le fichier HTML auquel vous ajoutez
du contenu vido. Lorsque vous chargez la page HTML incluant le fichier FLV, Dreamweaver ces fichiers en tant que fichiers
dpendants ( condition de cliquer sur Oui dans la bote de dialogue Placer les fichiers dpendants).
Dfinition des options pour la vido en flux continu
La bote de dialogue Insrer FLV permet de dfinir des options pour le tlchargement de vido en flux contenu d'un fichier FLV insr dans une
page Web.
1. Choisissez Insertion > Mdias > FLV (ou cliquez sur l'icne FLV de la catgorie Mdias de la barre d'insertion Commun).
2. Activez l'option Vido en flux continu dans le menu contextuel Type de vido.
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 Spcifie le nom du fichier FLV lire (par exemple, mavideo.flv). L'extension .flv est facultative.
Enveloppe Dfinit l'aspect du composant vido. Un aperu de l'enveloppe slectionne apparat sous le menu contextuel
Enveloppe.
Largeur Indique la largeur (en pixels) du fichier FLV. Cliquez sur le bouton Dtecter la taille pour connatre la largeur exacte
du fichier FLV. Si Dreamweaver ne peut pas dterminer la largeur, tapez une valeur.
Hauteur Indique la hauteur (en pixels) du fichier FLV. Cliquez sur le bouton Dtecter la taille pour connatre la hauteur exacte
du fichier FLV. Si Dreamweaver ne peut pas dterminer 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
slectionne.
402
Respecter les proportions Prserve le rapport hauteur/largeur du composant vido. Cette option est slectionne par
dfaut.
Vido en temps rel Indique si le contenu vido est en temps rel ou non. Si vous slectionnez Vido en temps rel, Flash
Player diffuse en continu un flux vido provenant de Flash Media Server. Le nom de la vido en temps rel est le nom
indiqu dans la zone Nom du flux.
Remarque : Si vous activez l'option Vido en temps rel, seul le contrle de volume apparat sur l'enveloppe du composant,
car il est impossible d'intervenir sur de la vido en temps rel. De plus, les options Lecture automatique et Rembobinage
automatique sont sans effet.
Lecture automatique Indique si la lecture de la vido doit dmarrer ou non ds l'ouverture de la page Web.
Rembobinage automatique Dtermine si le contrle de lecture doit revenir en position de dpart au terme de la lecture de la
vido.
Dlai mise en tampon Indique le dlai (en secondes) de mise en tampon avant le dbut de la lecture de la vido. Par dfaut,
la mise en tampon est paramtre sur 0, si bien que la lecture de la vido dbute instantanment aprs un clic sur le bouton
de lecture. (Si l'option Lecture automatique est active, la lecture de la vido dbute ds que la connexion avec le serveur est
tablie.) Il peut galement tre ncessaire de dfinir un dlai de mise en mmoire tampon si vous fournissez une vido dont
le dbit en bits est suprieur celui de la connexion du visiteur du site ou lorsque le volume de trafic Internet risque
d'engendrer des problmes de bande passante ou de connectivit. Par exemple, si vous souhaitez envoyer 15 secondes de
vido la page Web avant que cette dernire ne lise la vido, dfinissez le dlai de mise en mmoire tampon sur 15.
3. Cliquez sur OK pour fermer la bote de dialogue et ajouter le contenu FLV votre page Web.
La commande Insrer FLV gnre un fichier SWF de lecteur vido et un fichier SWF d'habillage qui serviront afficher votre
vido sur une page Web. La commande gnre galement un fichier main.asc que vous devez transfrer sur votre serveur
Flash Media Server. (Il est parfois ncessaire de cliquer sur le bouton Actualiser pour afficher les nouveaux fichiers dans le
panneau Fichiers). Ces fichiers sont stocks dans le mme rpertoire que le fichier HTML auquel vous ajoutez du contenu
vido. Lorsque vous transfrez sur votre serveur la page HTML contenant le fichier FLV, n'oubliez pas de transfrer
galement ces fichiers SWF, et de transfrer le fichier main.asc sur votre serveur Flash Media Server.
Remarque : Si un fichier main.asc se trouve dj sur votre serveur, consultez l'administrateur de ce serveur avant de
transfrer le fichier main.asc gnr par la commande Insrer FLV.
Vous pouvez charger facilement tous les fichiers mdias requis en slectionnant l'espace rserv pour le composant vido
dans la fentre Document de Dreamweaver puis en cliquant sur le bouton Transfrer multimdia dans l'inspecteur Proprits
(Fentre > Proprits). Pour voir la liste des fichiers ncessaires, cliquez sur le bouton Afficher les fichiers ncessaires.
Remarque : Le bouton Transfrer multimdia ne transfre pas le fichier HTML qui contient le composant vido.
Modification des informations de tlchargement de Flash Player
Lorsque vous insrez un fichier FLV sur une page, Dreamweaver insre du code qui dtecte si l'utilisateur dispose de la version approprie de
Flash Player. Si ce n'est pas le cas, la page affiche du contenu alternatif afin d'inviter l'utilisateur tlcharger la version la plus rcente. Vous
pouvez tout moment modifier ce contenu alternatif.
Cette procdure s'applique 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 ultrieure, 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 fentre de document, en mode Cration, slectionnez le fichier SWF ou FLV.
2. Cliquez sur l'icne reprsentant un il dans l'onglet du fichier SWF ou FLV.
Vous pouvez galement utiliser le raccourci CTRL + ] pour activer l'affichage du contenu alternatif. Pour rtablir l'affichage
du fichier SWF/FLV, appuyez sur CTRL + [ jusqu' ce que l'intgralit du contenu alternatif soit slectionne. Ensuite,
appuyez 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 nouveau sur l'icne reprsentant un il pour revenir l'affichage du fichier SWF ou FLV.
Dpannage des fichiers FLV
Cette section dcrit quelques-unes des causes les plus courantes de problmes avec les fichiers FLV.
Affichage des problmes dus l'absence de fichiers associs
Le code gnr par Dreamweaver CS4 et versions ultrieures repose sur quatre fichiers dpendants, diffrents du fichier FLV proprement dit :
swfobject_modified.js
expressInstall.swf
FLVPlayer_Progressive.swf
403
Le fichier d'enveloppe (par exemple Clear_Skin_1.swf)

Notez qu'il existe deux fichiers dpendants supplmentaires pour Dreamweaver CS4 et versions ultrieures par rapport Dreamweaver CS3.
Les deux premiers fichiers (swfobject_modified.js et expressInstall.swf) sont installs dans un dossier baptis Scripts, que Dreamweaver cre la
racine de votre site s'il n'existe pas.
Les deux autres fichiers (FLVPlayer_Progressive.swf et le fichier d'enveloppe) sont installs dans le mme dossier que la page laquelle le fichier
FLV est incorpor. Le fichier d'enveloppe contient les contrles du fichier FLV. Son nom dpend de l'enveloppe choisie dans les options dcrites
dans l'aide de Dreamweaver. Par exemple, si vous choisissez Clear Skin, le fichier se nomme Clear_Skin_1.swf.
Les quatre fichiers dpendants DOIVENT tre tlchargs sur votre serveur distant pour que le fichier FLV s'affiche correctement.
L'oubli du tlchargement de ces fichiers est la cause la plus courante des erreurs d'excution de fichiers FLV sur une page Web. Si l'un des
fichiers manque, un carr blanc risque de s'afficher sur la page.
Pour garantir que vous avez bien tlcharg tous les fichiers dpendants, utilisez le panneau Fichiers de Dreamweaver pour tlcharger la page
o figure le fichier FLV. Lorsque vous tlchargez la page, Dreamweaver vous demande si vous voulez tlcharger les fichiers dpendants (sauf
si vous avez dsactiv cette option). Cliquez sur Oui pour tlcharger les fichiers dpendants.
Problmes d'affichage lors d'un aperu local des pages
Les mises jour de la scurit de Dreamweaver CS4 vous empchent d'utiliser la commande Aperu dans le navigateur pour tester une page
comportant un fichier FLV incorpor, sauf si vous dfinissez un serveur d'valuation local dans votre dfinition de site Dreamweaver et employez
ce serveur d'valuation pour prvisualiser la page.
Normalement, vous n'avez besoin d'un serveur d'valuation que si vous dveloppez des pages avec ASP, ColdFusion ou PHP (voir Configuration
de l'ordinateur pour le dveloppement d'applications). Si vous crez des sites Web qui n'emploient que HTML et que vous n'avez pas dfini de
serveur d'valuation, une pression sur F12 (Windows) ou Option+F12 (Macintosh) entrane l'affichage de contrles d'enveloppe incohrents. Pour
rsoudre le problme, dfinissez le serveur d'valuation et utilisez-le pour prvisualiser votre page, ou chargez vos fichiers sur un serveur distant
et visualisez-les sur celui-ci.
Remarque : Il se peut que les paramtres de scurit soient galement responsables de l'impossibilit de prvisualiser du contenu FLV local, mais
Adobe n'a pas t en mesure de le confirmer. Vous pouvez tenter de modifier vos paramtres de scurit afin de voir si le problme est rsolu.
Pour plus d'informations sur la modification de vos paramtres de scurit, consultez la Tech Note 117502.
Autres causes potentielles de problmes avec les fichiers FLV
Si vous prouvez des difficults prvisualiser localement, assurez-vous que l'option Aperu avec fichier temporaire est bien
dsactive dans la section Edition > Prfrences > Aperu dans le navigateur.
Assurez-vous de bien disposer de la version la plus rcente du complment Flash Player.
Faites preuve de prudence lorsque vous dplacez des fichiers et des dossiers l'extrieur de Dreamweaver. Lorsque vous
dplacez des fichiers et dossiers l'extrieur de Dreamweaver, Dreamweaver ne peut pas garantir l'exactitude des chemins
d'accs aux fichiers associs un fichier FLV.
Vous pouvez remplacer provisoirement le fichier FLV qui pose problme par un fichier FLV dont vous tes sr qu'il fonctionne.
Si le fichier FLV de remplacement fonctionne, c'est que le problme rside dans le fichier FLV d'origine et n'est pas d votre
navigateur ni l'ordinateur.
Modification ou suppression d'un composant FLV

Vous pouvez modifier les paramtres de la vido sur votre page Web en slectionnant l'espace rserv pour composant vido dans la fentre de
document de Dreamweaver et en utilisant l'inspecteur Proprits. Vous pouvez galement supprimer le composant vido puis le rinsrer l'aide
de la commande Insertion > Mdias > FLV.
Modification du composant FLV
1. Dans la fentre du document Dreamweaver, slectionnez l'espace rserv pour le composant vido en cliquant sur l'icne
FLV au centre de l'espace rserv.
2. Ouvrez l'inspecteur Proprits (Fentre > Proprits) et apportez les modifications dsires.
Remarque : Il est impossible de modifier le type de vido (de tlchargement progressif diffusion en continu, par exemple)
dans l'inspecteur Proprits. Pour modifier le type de vido, supprimez le composant FLV puis rinsrez-le en choisissant
Insertion > Mdias > FLV.
Suppression du composant FLV
Dans la fentre du document Dreamweaver, slectionnez l'espace rserv pour le composant FLV et appuyez sur la touche Suppr.
Suppression du code de dtection FLV
A partir de la version CS4 de Dreamweaver, Dreamweaver insre directement un code de dtection de Flash Player dans la balise object qui
contient le fichier FLV. Par contre, jusqu' la version CS3 de Dreamweaver, le code de dtection se trouve en dehors de la balise object du fichier
FLV. Ds lors, si vous voulez supprimer des fichiers FLV de pages cres l'aide de Dreamweaver CS3 ou une version plus ancienne, vous
devez supprimer les fichiers FLV puis utiliser la commande Supprimer la dtection FLV afin de supprimer galement le code de dtection.
404
Slectionnez Commandes > Supprimer la dtection Flash Video.
405

Dreamweaver permet dinsrer de la vido HTML5 dans des pages Web.
Llment vido HTML5 fournit une mthode standard dincorporation de vidos dans des pages Web.
Pour plus dinformations sur llment vido HTML, consultez larticle sur la vido HTML5 sur le site W3schools.com.

Prvisualisation de la vido dans un navigateur
Didacticiel vido
Ajout dune vido HTML5 dans Dreamweaver
Haut de la page

1. Assurez-vous que le curseur est lendroit o vous souhaitez insrer la vido.
2. Slectionnez Insertion > Multimdia > Vido HTML5. Llment vido HTML5 est insr lemplacement spcifi.
3. Dans le panneau Proprits, spcifiez des valeurs pour les diffrentes options.
Source/Source alt. 1/Source alt. 2 : Dans Source, entrez lemplacement du fichier vido. Vous pouvez galement cliquer
sur licne de dossier pour slectionner le fichier vido partir du systme de fichiers local. La prise en charge dun format
vido varie selon les navigateurs. Si le format de vido dans Source nest pas pris en charge dans un navigateur, le
format spcifi dans Source alt. 1 ou Source alt. 2 est utilis. Le navigateur slectionne le premier format reconnu pour
afficher la vido.
Pour ajouter rapidement des vidos aux trois champs, utilisez une slection multiple. Lorsque vous choisissez trois formats
vido pour la mme vido partir dun dossier, le premier format dans la liste est utilis pour la source. Les formats
suivants dans la liste sont utiliss pour complter automatiquement les champs Source alt. 1 et Source alt. 2.
Reportez-vous au tableau ci-dessous pour plus dinformations sur les navigateurs et les formats de vido pris en charge. Pour
connatre les dernires actualits, consultez la page HTML5 Browser Support (en anglais).
Navigateur
MP4
WebM
Ogg
Internet Explorer 9
Oui
Non
Non
Firefox 4.0
Non
Oui
Oui
Google Chrome 6
Oui
Oui
Oui
Apple Safari 5
Oui
Non
Non
Opera 10.6
Non
Oui
Oui
Titre : Spcifiez un titre pour la vido.

Largeur (L) : Entrez la largeur en pixels de la vido.
Hauteur (H) : Entrez la hauteur en pixels de la vido.
Commandes : Slectionnez cette option si vous souhaitez afficher les commandes vido dans la page HTML (par exemple
Lecture, Pause et Sourdine).
Lecture auto : Slectionnez cette option si vous voulez que la lecture de la vido dbute ds son chargement dans la
page Web.
Affiche : Entrez lemplacement de limage qui doit tre affiche jusqu ce que le tlchargement de la vido soit termin,
ou jusqu ce que lutilisateur clique sur Lire. Les valeurs Largeur et Hauteur sont remplies automatiquement lorsque vous
insrez limage.
406
Boucle : Slectionnez cette option si vous voulez que la vido soit lue en continu jusqu ce que lutilisateur arrte la
lecture.
Sourdine : Slectionnez cette option si vous souhaitez couper le son de la vido.
Vido Flash : Slectionnez un fichier SWF pour les navigateurs qui ne prennent pas en charge la vido HTML5.
Texte de rechange : Entrez le texte afficher si le navigateur ne prend pas en charge HTML5.
Prchargement : Spcifie les prfrences de lauteur quant la faon de charger la vido lors du chargement de la page.
Si vous slectionnez Auto, lintgralit de la vido est charge lors du tlchargement de la page. Si vous slectionnez
Mtadonnes, seules les mtadonnes seront tlcharges lorsque le tlchargement de la page sera termin.
Panneau Proprits de la vido HTML5
Haut de la page
Prvisualisation de la vido dans un navigateur

1. Enregistrez la page Web.
2. Slectionnez Fichier > Aperu dans le navigateur. Slectionnez le navigateur dans lequel vous souhaitez prvisualiser la
vido.
407
Insertion de fichiers SWF

A propos des types de fichiers FLA, SWF et FLV
Insertion et prvisualisation de fichiers SWF
Insertion de documents FlashPaper
Haut de la page
A propos des types de fichiers FLA, SWF et FLV
Avant d'utiliser Dreamweaver pour insrer du contenu cr l'aide d'Adobe Flash, familiarisez-vous aux types de fichiers suivants :
Fichier FLA (.fla) Fichier source pour tout projet, cr dans l'outil de cration Flash. Ce type de fichier peut uniquement tre ouvert dans
comportement Flash (il ne peut pas l'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 compile du fichier FLA (.fla), optimise pour l'affichage sur le Web. Ce fichier peut tre lu dans les navigateurs et
prvisualis dans Dreamweaver, mais il ne peut pas tre modifi dans Flash.
Fichier FLV (.flv) Est un fichier vido qui contient des donnes audio et vido codes, lisibles par Flash Player. Par exemple, si vous utilisez un
fichier vido QuickTime ou Windows Media, vous devez utiliser un encodeur (tel que Flash Video Encoder ou Sorensen Squeeze) pour convertir
le fichier vido en fichier FLV. Pour plus d'informations, consultez le Centre de technologie vido l'adresse
www.adobe.com/go/flv_devcenter_fr.
Haut de la page
Insertion et prvisualisation de fichiers SWF
Dreamweaver permet d'ajouter des fichiers SWF vos pages et d'en consulter un aperu dans un document ou un navigateur. Vous pouvez
galement dfinir les proprits des fichiers SWF dans l'inspecteur Proprits.
Vous trouverez un didacticiel consacr l'ajout de fichiers SWF des pages Web l'adresse www.adobe.com/go/vid0150_fr.
Insertion d'un fichier SWF

1. Dans la fentre de document (mode Cration), placez le point d'insertion l'endroit o vous souhaitez insrer le contenu, puis
Dans la catgorie Commun du panneau Insertion, choisissez Mdias puis cliquez sur l'icne SWF
Choisissez Insertion > Mdias > SWF.

2. Dans la bote de dialogue qui s'affiche, slectionnez un fichier SWF (.swf).
Un espace rserv pour le fichier SWF s'affiche dans la fentre de document.
Cet espace rserv est entour d'un contour bleu onglet. L'onglet indique le type d'actif (fichier SWF) et l'ID du fichier SWF.
Cet onglet comporte galement une icne qui reprsente un il. Il fait office de bascule entre le fichier SWF et les
informations de tlchargement que les utilisateurs voient s'ils ne possdent pas la version correcte de Flash Player.
Dreamweaver vous informe que deux fichiers dpendants, expressInstall.swf et swfobject_modified.js, vont tre enregistrs
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 galement charg ces fichiers
dpendants.
Remarque : Microsoft Internet Information Server (IIS) ne traite pas les balises object imbriques. Pour les pages ASP,
Dreamweaver utilise du code object/embed imbriqu au lieu du code object imbriqu lors de l'insertion de fichiers SWF ou
FLV.
408
Modification des informations de tlchargement de Flash Player

Lorsque vous insrez un fichier SWF sur une page, Dreamweaver insre du code qui dtecte si l'utilisateur dispose de la version approprie de
Flash Player. Si ce n'est pas le cas, la page affiche du contenu alternatif afin d'inviter l'utilisateur tlcharger la version la plus rcente. Vous
pouvez tout moment modifier ce contenu alternatif.
Cette procdure s'applique galement aux fichiers FLV.
Remarque : Si l'utilisateur ne dispose pas de la version requise mais bien de Flash Player en version 6.0 r65 ou une version ultrieure, 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 fentre de document, en mode Cration, slectionnez le fichier SWF ou FLV.
2. Cliquez sur l'icne reprsentant un il dans l'onglet du fichier SWF ou FLV.
Vous pouvez galement utiliser le raccourci CTRL + ] pour activer l'affichage du contenu alternatif. Pour rtablir l'affichage
du fichier SWF/FLV, appuyez sur CTRL + [ jusqu' ce que l'intgralit du contenu alternatif soit slectionne. Ensuite,
appuyez 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 nouveau sur l'icne reprsentant un il pour revenir l'affichage du fichier SWF (ou FLV).
Prvisualisation de fichiers SWF dans la fentre de document

1. Dans la fentre de document, cliquez sur l'espace rserv du fichier SWF afin de slectionner son contenu.
2. Dans l'inspecteur Proprits (Fentre > Proprits), cliquez sur le bouton Lire. Cliquez sur le bouton Arrt pour arrter la
prvisualisation. Vous pouvez galement prvisualiser le fichier SWF dans un navigateur en appuyant sur la touche F12.
Pour prvisualiser 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 placs en mode Lecture.
Dfinition des proprits d'un fichier SWF

Vous pouvez dfinir les proprits des fichiers SWF dans l'inspecteur Proprits. Les proprits s'appliquent galement aux animations
Shockwave.
Slectionnez un fichier SWF ou une animation Shockwave, puis dfinissez ses options dans l'inspecteur Proprits (Fentre > Proprits). Pour
afficher toutes les proprits, cliquez sur la flche de dveloppement dans le coin infrieur droit de l'inspecteur Proprits.
ID Dfinit un ID unique pour le fichier SWF. Entrez un ID dans la zone de texte sans titre, l'extrme gauche de l'inspecteur Proprits. Depuis
Dreamweaver CS4, un ID unique est requis.
L et H Spcifient la largeur et la hauteur de l'animation, en pixels.
Fichier Spcifie le chemin d'accs au fichier SWF ou Shockwave. Cliquez sur l'icne de dossier pour rechercher un fichier ou entrez le chemin
d'accs.
Src Dfinit le chemin d'accs au document source (le fichier FLA), lorsque Dreamweaver et Flash sont tous deux installs sur votre ordinateur.
Pour modifier un fichier SWF, mettez jour le document source de l'animation.
Ar-pl Spcifie une couleur d'arrire-plan pour la zone d'animation. Cette couleur apparat galement lorsque l'animation n'est pas en lecture (au
cours du chargement et la fin de la lecture).
Modifier Dmarre Flash pour mettre jour un fichier FLA (fichier cr dans le programme de cration Flash). Cette option est dsactive si Flash
n'est pas install sur votre ordinateur.
Classe Permet d'appliquer une classe CSS l'animation.
Boucle Active la lecture en boucle de l'animation. Si l'option Boucle n'est pas active, l'animation est lue une fois puis s'arrte.
Lecture automatique Lit automatiquement l'animation lors du chargement de la page.
Espace V. et Espace H. Dfinit le nombre de pixels d'espace blanc au-dessus, au-dessous et de chaque ct de l'animation.
Qualit Contrle l'anticrnelage pendant la lecture de l'animation. Des valeurs leves amliorent l'apparence des animations. Toutefois, avec des
valeurs leves, le rendu correct des animations l'cran exige un processeur plus rapide. Un paramtre faible amliore la vitesse au dtriment de
l'apparence, alors qu'un paramtre lev favorise l'aspect par rapport la vitesse. L'option Basse automatiquement amliore la vitesse au dpart,
mais galement l'apparence lorsque cela est possible. L'option Eleve automatiquement amliore de faon identique les deux qualits au dpart,
mais sacrifie ensuite l'apparence pour la vitesse si ncessaire.
Echelle Dtermine comment l'animation s'adapte aux dimensions dfinies dans les zones de largeur et de hauteur. Le paramtre par dfaut
affiche l'animation entire.
Alignement Dtermine l'alignement de l'animation sur la page.
Wmode Dfinit le paramtre Wmode pour le fichier SWF de manire viter tout conflit avec des lments DHTML, comme des widgets Spry. La
valeur par dfaut est Opaque, qui permet aux lments 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 lments DHTML apparaissent derrire celles-ci, activez l'option Transparent.
Activez l'option Fentre pour supprimer le paramtre Wmode du code et permettre au fichier SWF de s'afficher au-dessus d'autres lments
DHTML.
Lire Lit l'animation dans la fentre de document.
Paramtres Ouvre une bote de dialogue dans laquelle vous pouvez indiquer des paramtres supplmentaires transmettre l'animation.
L'animation doit avoir t conue pour recevoir ces paramtres supplmentaires.
409
Haut de la page
Insertion de documents FlashPaper

La fonctionnalit Insrer FlashPaper a t abandonne depuis Dreamweaver CS5.
Voir aussi
Fichiers SWF et calques DHTML
Didacticiel consacr l'utilisation de Flash
410
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 tre un
accordon, un panneau onglet ou un calendrier.
Vous pouvez rendre votre slection personnelle de widgets Web disponible dans Dreamweaver l'aide du navigateur de widgets Adobe, une
application AIR qui permet de naviguer dans les widgets, de les configurer et de les prvisualiser au moyen d'une interface visuelle.
1. Choisissez Insrer > Widget.
2. Dans la bote de dialogue Widget , slectionnez un widget et un paramtre prdfini (le cas chant), puis cliquez sur OK.
Vous pouvez galement ajouter un widget Web une page Dreamweaver (CS5.5 et versions ultrieures) en procdant comme suit :
1. Dans le Widget Browser, accdez Mes widgets.
2. Slectionnez le widget que vous voulez ajouter.
3. Cliquez sur l'icne Glisser-dposer dans Dreamweaver, dans le coin suprieur gauche de l'onglet Mode En direct, et
maintenez le bouton de la souris enfonc. Faites glisser le widget vers Dreamweaver, dans le mode Cration (Windows) ou le
mode Cration 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 aprs l'avoir
dpos sur la page.
Voir aussi
Aide d'Adobe Widget Browser
411
Ajout de son
Formats de fichiers audio
Lien vers un fichier audio
Incorporation d'un fichier audio
Haut de la page
Formats de fichiers audio
Il est possible d'ajouter du son 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 considrer avant de dcider d'un format et d'une mthode d'ajout de son : son objectif, son public, la taille du
fichier, la qualit du son et les diffrences entre les navigateurs.
Remarque : Le traitement des fichiers son est trs diffrent et incohrent suivant les navigateurs. Vous pouvez ajouter un fichier audio un fichier
SWF, puis incorporer le fichier SWF pour assurer une meilleure cohrence.
La liste ci-dessous dcrit les formats de fichiers audio les plus courants et prsente certains avantages et inconvnients de chaque conception
Web.
Le format .midi ou .mid (Musical Instrument Digital Interface) est destin la musique instrumentale. Les fichiers MIDI sont reconnus par
plusieurs navigateurs et ne requirent pas de plug-in. Bien que leur qualit sonore soit trs bonne, elle peut varier en fonction de la carte son du
visiteur. Un petit fichier MIDI peut offrir un clip audio de longue dure. Les fichiers MIDI ne peuvent pas tre enregistrs et doivent tre synthtiss
sur un ordinateur quip d'un matriel et d'un logiciel spciaux.
Le format .wav (Waveform Extension), qui offre une bonne qualit sonore, est pris en charge par plusieurs navigateurs et ne requiert pas de
plug-in. Vous pouvez enregistrer vos propres fichiers WAV partir d'un CD, d'une cassette, d'un microphone, etc. Toutefois, la taille importante
des fichiers limite srieusement 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 sonore, est pris en charge par
plusieurs navigateurs et ne requiert pas de plug-in. Vous pouvez galement enregistrer des fichiers AIFF partir d'un CD, d'une cassette, d'un
microphone, etc. Toutefois, la taille importante des fichiers limite srieusement 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 qui diminue de manire significative
la taille des fichiers audio. La qualit sonore est excellente : si un fichier MP3 est correctement enregistr et compress, sa qualit peut tre
quivalente celle d'un CD. La technologie MP3 permet de lire le fichier en transit afin que les visiteurs n'aient pas attendre le
tlchargement du fichier entier avant de pouvoir l'couter. Mais le fichier est plus gros qu'un fichier Real Audio, ce qui signifie que le
tlchargement d'une chanson entire peut s'avrer assez long si l'on utilise une connexion Internet par modem. Pour lire des fichiers MP3, les
visiteurs doivent tlcharger 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 trs lev de compression avec une taille de fichier infrieure celle du format MP3. Le
tlchargement de fichiers de chanson peut tre effectu dans un laps de temps raisonnable. Les fichiers pouvant tre diffuss partir d'un
serveur Web normal, les visiteurs peuvent commencer couter le son avant la fin du tlchargement. Les visiteurs doivent tlcharger et installer
l'application d'aide ou le plug-in RealPlayer afin de lire ces fichiers.
.qt, .qtm, .mov ou QuickTime est un format la fois audio et vido mis au point par Apple Computer. QuickTime est inclus dans le systme
d'exploitation des ordinateurs Apple Macintosh. Il est utilis par la plupart des applications Macintosh utilisant l'audio, la vido ou des animations.
Les PC aussi peuvent lancer les fichiers au format QuickTime, mais cela ncessite le pilote appropri. QuickTime prend en charge la plupart des
formats de codage, notamment Cinepak, JPEG et MPEG.
Remarque : En plus des formats les plus courants, mentionns ci-dessus, il existe de nombreux formats audio et vido utilisables sur le Web. Si
vous rencontrez un fichier audio ou vido dont le format vous est inconnu, retrouvez son crateur afin d'apprendre comment l'utiliser au mieux.
Haut de la page
Lien vers un fichier audio
Un lien vers un fichier audio est une mthode simple et efficace pour ajouter du son une page Web. Cette mthode d'incorporation de fichiers
audio permet aux visiteurs de choisir s'ils veulent couter le fichier et rend le fichier disponible pour un plus vaste public.
1. Slectionnez le texte ou l'image utiliser comme lien vers le fichier audio.
2. Dans l'inspecteur Proprits, cliquez sur l'icne de dossier, ct de la zone Lien, pour rechercher le fichier audio, ou tapez
le nom et le chemin d'accs au fichier dans la zone Lien.
Haut de la page
Incorporation d'un fichier audio
L'opration consistant incorporer un son intgre le fichier audio directement dans la page, mais le son est uniquement lu si les visiteurs du site
disposent du plug-in appropri pour le fichier audio choisi. Incorporez des fichiers si vous souhaitez utiliser le son en tant que musique de fond ou
412
pour contrler le volume, l'apparence du lecteur sur votre page ou encore les points de dmarrage et d'arrt du fichier audio.
Lorsque vous incorporez des fichiers son vos pages Web, rflchissez bien l'usage qu'il est possible d'en faire et de quelle faon les
visiteurs pourraient s'en servir. Proposez toujours une commande permettant d'activer ou de couper le son, au cas o certains visiteurs ne
souhaiteraient pas entendre le contenu audio.
1. En mode Cration, placez le point d'insertion l'endroit o vous souhaitez incorporer le fichier et procdez de l'une des
manires suivantes :
Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Mdias et slectionnez l'icne Plug-in
menu.
dans le
Slectionnez Insertion > Mdias > 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 appropries de l'inspecteur Proprits ou en
redimensionnant l'espace rserv au plug-in dans la fentre de document.
Ces valeurs dterminent la taille laquelle les contrles audio sont affichs dans le navigateur.
Voir aussi
413

Dreamweaver permet dinsrer et de prvisualiser de laudio HTML5 dans des pages Web. Llment audio HTML5 fournit une mthode standard
dincorporer du contenu audio dans des pages Web.
Pour plus dinformations sur llment audio HTML, consultez larticle sur laudio HTML5 sur le site W3schools.com.

Prvisualisation de laudio dans un navigateur
Haut de la page

1. Assurez-vous que le curseur est lendroit o vous souhaitez insrer laudio.
2. Slectionnez Insertion > Multimdia > Audio HTML5. Le fichier audio est insr lemplacement spcifi.
3. Dans le panneau Proprits, entrez les informations suivantes :
Source/Source alt. 1/Source alt. 2 : Dans Source, entrez lemplacement du fichier audio. Vous pouvez galement cliquer
sur licne de dossier afin de slectionner un fichier audio sur votre ordinateur. La prise en charge des formats audio varie
selon les navigateurs. Si le format audio dans Source nest pas pris en charge, le format spcifi dans Source alt. 1 ou
Source alt. 2 est utilis. Le navigateur slectionne le premier format reconnu pour afficher laudio.
Pour ajouter rapidement des vidos aux trois champs, utilisez une slection multiple. Lorsque vous choisissez trois formats
vido pour la mme vido partir dun dossier, le premier format dans la liste est utilis pour la source. Les formats
suivants dans la liste sont utiliss pour complter automatiquement les champs Source alt. 1 et Source alt. 2.
Navigateur
MP3
Wav
Ogg
Internet Explorer 9
Oui
Non
Non
Firefox 4.0
Non
Oui
Oui
Google Chrome 6
Oui
Oui
Oui
Apple Safari 5
Oui
Oui
Non
Opera 10.6
Non
Oui
Oui
Titre : Entrez un titre pour le fichier audio.

Texte de rechange : Entrez le texte afficher dans les navigateurs qui ne prennent pas en charge HTML5.
Commandes : Slectionnez cette option pour afficher les commandes audio dans la page HTML (par exemple Lecture,
Pause et Couper le son).
Lecture auto : Slectionnez cette option si vous voulez que la lecture de laudio dbute ds son chargement dans la page
Web.
Audio en boucle : Slectionnez cette option si vous voulez que laudio soit lu en continu jusqu ce que lutilisateur arrte
la lecture.
Sourdine : Slectionnez cette option si vous souhaitez mettre laudio en sourdine aprs le tlchargement.
Prchargement : Si vous slectionnez Auto, la totalit du fichier audio est charge lors du tlchargement de la page. Si
vous slectionnez Mtadonnes, seules les mtadonnes seront tlcharges lorsque le tlchargement de la page sera
termin.
414
Panneau Proprits pour laudio HTML5
Haut de la page
Prvisualisation de laudio dans un navigateur

1. Enregistrez la page Web.
2. Slectionnez Fichier > Aperu dans le navigateur. Slectionnez le navigateur dans lequel vous souhaitez prvisualiser laudio.
415

Utilisation du panneau Historique
Rptition d'tapes
Application d'tapes du panneau Historique des objets
Copie et collage d'tapes entre les documents
Cration et utilisation de commandes partir d'tapes de l'historique
Enregistrement et sauvegarde de commandes
Haut de la page
Le panneau Historique mmorise les tapes que vous effectuez lors de l'excution d'une tche. Vous pouvez automatiser une tche effectue
frquemment en reproduisant les tapes correspondantes partir du panneau Historique ou en crant une nouvelle commande qui effectue les
tapes automatiquement.
Certains mouvements de la souris, tels qu'une slection via un clic dans la fentre de document, ne peuvent pas tre reproduits ou sauvegards.
Lorsque vous effectuez ce type de mouvements, un trait noir s'affiche dans le panneau Historique (la prsence de cette ligne ne devient vidente
que lorsque vous effectuez une autre action). Pour viter cela, dplacez le point d'insertion l'aide des touches flches, et non de la souris, dans
la fentre de document.
Il existe quelques autres actions qui ne peuvent pas tre reproduites, par exemple le glisser-dplacer d'un lment de la page. Lorsque vous
effectuez ce type d'action, une icne contenant un petit X rouge s'affiche dans le panneau Historique.
Les commandes sauvegardes sont conserves en permanence ( moins que vous ne les supprimiez), tandis que les commandes enregistres
sont supprimes lorsque vous quittez Adobe Dreamweaver et les squences d'tapes copies sont supprimes lorsque vous copiez un autre
lment
Haut de la page
Utilisation du panneau Historique
Le panneau Historique (Fentre > Historique) affiche une liste des tapes que vous avez effectues dans le document actif depuis que vous l'avez
cr ou ouvert (mais pas les tapes effectues dans d'autres cadres, d'autres fentres de document ou dans le panneau Site). Utilisez le panneau
Historique pour annuler plusieurs tapes en mme temps et pour automatiser des tches.
A. Curseur (index) B. Etapes C. Bouton Reproduire D. Bouton Copier les tapes E. Bouton
Enregistrer comme commande
Lors de l'ouverture du panneau Historique, le curseur, ou index, pointe sur la dernire action que vous avez accomplie.
Remarque : Il est impossible de modifier l'ordre dans lequel les tapes sont affiches 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 dj
effectues.
Annulation de la dernire tape

Choisissez Edition > Annuler.
Dplacez le curseur du panneau Historique d'une tape vers le haut dans la liste.
Remarque : Pour provoquer un dplacement automatique vers une tape spcifique, cliquez gauche de cette tape ; si vous
cliquez sur l'tape elle-mme, elle sera slectionne. La slection d'une tape est une opration diffrente du retour cette
tape dans l'historique des actions.
416
Annulation de plusieurs tapes la fois

Faites glisser le curseur de faon pointer sur une tape de la liste, ou cliquez gauche d'une tape le long de la trajectoire du curseur.
Le curseur se dirige automatiquement vers cette tape en annulant toutes les tapes se trouvant sur son passage.
Remarque : Tout comme pour l'annulation d'une seule action, si vous annulez une srie d'tapes, puis effectuez une autre opration dans le
document, il ne vous sera plus possible de rtablir les actions annules : elles disparaissent du panneau Historique.
Dfinition du nombre maximal d'tapes que le panneau Historique conserve et affiche

Le nombre d'tapes par dfaut est suffisant pour la plupart des utilisateurs. Plus ce nombre est lev, plus le panneau Historique ncessite de la
mmoire, ce qui peut affecter les performances et ralentir considrablement votre ordinateur.
2. Slectionnez la catgorie Gnral dans la liste de gauche.
3. Tapez un chiffre dans la zone Nombre maximal d'tapes de l'historique.
Lorsque le panneau Historique atteint le nombre maximal d'tapes, les premires tapes sont supprimes.
Effacement de la liste des actions du panneau Historique pour le document actif

Dans le menu contextuel du panneau Historique, slectionnez Effacer l'historique.
Cette commande efface galement toutes les informations permettant d'annuler les actions effectues dans le document actif : aprs avoir cliqu
sur Effacer l'historique, il vous est impossible d'annuler les actions dont la trace a t efface. La fonction Effacer l'historique n'annule aucune
action passe, mais se limite supprimer la trace de ces tapes de la mmoire.
Haut de la page
Rptition d'tapes
Vous pouvez rpter la dernire tape effectue ou bien une srie d'tapes contigus ou non l'aide du panneau Historique. Reproduisez les
tapes directement depuis le panneau Historique.
Rptition d'une tape

Choisissez Edition > Rpter.
Dans le panneau Historique, slectionnez une tape et cliquez sur le bouton Reproduire. L'tape est reproduite et une nouvelle
instance de cette action apparat dans le panneau Historique.
Rptition d'une srie d'tapes

1. Slectionnez les tapes dsires dans le panneau Historique :
Pour slectionner des tapes adjacentes, faites glisser la souris d'une tape une autre (ne faites pas glisser le curseur ;
faites simplement glisser la souris de l'tiquette de texte d'une tape vers l'tiquette de texte d'une autre), ou slectionnez
la premire tape et, tout en maintenant la touche Maj enfonce, cliquez sur la dernire tape.
Pour slectionner des tapes non adjacentes, slectionnez une tape, puis tout en maintenant appuye la touche Ctrl
(Windows) ou Commande (Macintosh), cliquez sur d'autres tapes de faon les slectionner (ou les dslectionner le
cas chant).
Seules les actions slectionnes (en surbrillance), et pas ncessairement celle sur laquelle se trouve le curseur, sont
rptes.
Remarque : Bien que vous puissiez slectionner une srie d'tapes contenant un trait noir signalant une action impossible
enregistrer, cette tape est ignore lorsque vous reproduisez les tapes.
2. Cliquez sur Reproduire.
Les tapes sont reproduites dans l'ordre chronologique et une nouvelle tape, Reproduire les tapes, apparat dans le
panneau Historique.
Ralisation ou extension d'une slection

Maintenez la touche Maj enfonce tout en appuyant sur une touche flche.
Si un trait noir indiquant un mouvement de la souris apparat pendant que vous effectuez une tche que vous voulez ritrer ultrieurement,
vous pouvez annuler cette dernire action et tenter une autre approche (utilisez les touches flches, par exemple).
Application d'tapes du panneau Historique des objets
Haut de la page
Vous pouvez appliquer un ensemble d'tapes affiches dans le panneau Historique n'importe quel objet figurant dans la fentre de document.
417
Si vous slectionnez plusieurs objets, puis leur appliquez des tapes partir du panneau Historique, ces objets sont traits comme une slection
unique et Dreamweaver tente d'appliquer les tapes cette slection combine ; toutefois, vous ne pouvez appliquer un ensemble d'tapes qu'
un seul objet la fois.
Pour appliquer les tapes chaque objet d'un ensemble d'objets, vous devez faire en sorte que la dernire tape de la srie slectionne l'objet
suivant de l'ensemble. La deuxime procdure illustre ce principe dans un scnario particulier : dfinition de l'espacement vertical et horizontal
d'une srie d'images.
Application d'tapes un autre objet

1. Slectionnez l'objet.
2. Slectionnez l'tape appliquer dans le panneau Historique, puis cliquez sur Reproduire.
Application d'tapes plusieurs objets

1. Ouvrez un document dans lequel chaque ligne est compose d'une petite image (par exemple une puce graphique ou une
icne) suivie de texte.
L'objectif est d'espacer davantage ces images la fois du texte et des autres images situes au-dessus et en dessous.
2. Ouvrez l'inspecteur Proprits (Fentre > Proprits), si ncessaire.

3. Slectionnez la premire image.
4. Dans l'inspecteur Proprits, indiquez des valeurs dans les zones Espace V. et Espace H. pour dfinir l'espacement de
l'image.
5. Cliquez sur l'image de nouveau pour activer la fentre de document sans dplacer le point d'insertion.
6. Appuyez sur la touche flche gauche pour amener le point d'insertion gauche de l'image.
7. Appuyez sur la touche flche bas pour faire descendre le point d'insertion d'une ligne, tout en le laissant juste gauche de la
seconde image de la srie.
8. Appuyez sur la touche flche droite tout en maintenant la touche Maj. enfonce, pour slectionner la seconde image.
Remarque : Ne slectionnez surtout pas l'image en cliquant dessus, car vous ne pourriez plus reproduire toutes les tapes.
9. Dans le panneau Historique, slectionnez les tapes correspondant la modification de l'espacement de l'image et la
slection de l'image suivante. Cliquez sur le bouton Reproduire pour reproduire ces actions.
L'espacement de l'image courante est modifi, et l'image suivante est slectionne.
10. Continuez cliquer sur le bouton Reproduire jusqu' ce que toutes les images soient correctement espaces.
Haut de la page
Copie et collage d'tapes entre les documents
Chaque document ouvert possde son propre historique. Vous pouvez copier des 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 tapes d'un document ultrieurement, copiez ou
sauvegardez ces tapes avant de fermer ce document.
1. Slectionnez les tapes dsires dans le panneau Historique du document qui contient les tapes rutiliser.
2. Cliquez sur Copier les tapes dans le panneau Historique .
Remarque : Le bouton Copier les tapes (dans le panneau Historique) est diffrent de la commande Copier (dans le menu
Edition). Vous ne pouvez pas utiliser la commande Edition > Copier pour copier des tapes, mais vous pouvez utiliser la
418
commande Edition > Coller pour les coller.

Soyez prudent lorsque vous copiez des tapes qui comportent une commande Copier ou Coller:
N'utilisez pas Copier les tapes si l'une des tapes contient une commande Copier, car le collage de ces tapes risque
de ne pas s'effectuer comme souhait.
Si vos tapes contiennent une commande Coller, vous ne pouvez pas les coller, moins qu'elles ne comprennent
galement une commande Copier avant la commande Coller.
3. Ouvrez l'autre document.
4. Placez le point d'insertion sur l'emplacement dsir, ou slectionnez l'objet auquel vous voulez appliquer les tapes.
Les tapes sont reproduites ds qu'elles sont colles dans le panneau Historique du document. Le panneau Historique les
affiche comme une seule tape, appele Coller les tapes.
Si vous collez des tapes dans un 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 tre trs utile pour apprendre crire vos propres scripts.
Cration et utilisation de commandes partir d'tapes de l'historique
Haut de la page
Sauvegardez un ensemble d'tapes de l'historique sous la forme d'une commande laquelle vous donnerez un nom et qui deviendra alors
disponible dans le menu Commandes. Crez et enregistrez une nouvelle commande si vous pensez devoir utiliser de nouveau un ensemble
d'tapes, surtout aprs le prochain dmarrage de Dreamweaver.
Cration d'une commande

1. Slectionnez la ou les tapes dsires 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 apparat dans le menu Commandes.
Remarque : La commande est sauvegarde sous la forme d'un fichier Java Script (ou parfois HTML) dans votre dossier
Dreamweaver/Configuration/Commandes. Si vous utilisez Dreamweaver sur un systme d'exploitation plusieurs utilisateurs,
le fichier est enregistr dans le dossier Commandes de l'utilisateur spcifique.
Utilisation d'une commande sauvegarde

1. Slectionnez l'objet auquel vous dsirez appliquer la commande ou placez le point d'insertion l'emplacement dsir.
2. Slectionnez la commande de votre choix dans le menu Commandes.
Modification du nom d'une commande

1. Choisissez Commandes > Modifier la liste des commandes.
2. Slectionnez la commande renommer, indiquez son nouveau nom, puis cliquez sur Fermer.
Suppression d'un nom du menu Commandes

1. Choisissez Commandes > Modifier la liste des commandes.
2. Slectionnez une commande.
3. Cliquez sur Supprimer, puis sur Fermer.
Haut de la page
Enregistrement et sauvegarde de commandes
Enregistrez une commande temporaire pour une utilisation court terme, ou enregistrez et sauvegardez une commande pour l'utiliser
ultrieurement. Dreamweaver conserve uniquement une commande enregistre la fois ; ds que vous commencez enregistrer une nouvelle
commande, l'ancienne est perdue, moins que vous ne la sauvegardiez avant de mmoriser la nouvelle commande.
Enregistrement provisoire une srie d'tapes

1. Choisissez Commandes > Dmarrer 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 mmorisez une commande.
2. Lorsque l'opration est termine, choisissez Commandes > Arrter l'enregistrement ou appuyez nouveau sur la combinaison
de touches Ctrl+Maj+X (Windows) ou Commande+Maj+X (Macintosh).
419
Reproduction d'une commande enregistre

Slectionnez Commandes > Reproduire la commande enregistre.
Sauvegarde d'une commande enregistre

1. Slectionnez Commandes > Reproduire la commande enregistre.
2. Dans la liste d'tapes du panneau Historique, slectionnez l'tape Excuter commande et cliquez sur le bouton Enregistrer
comme commande.
3. Indiquez le nom de la commande et cliquez sur OK.
La commande apparat dans le menu Commandes.
Voir aussi
420
A propos des actifs et des bibliothques

A propos des actifs
A propos des lments de bibliothque
Haut de la page
A propos des actifs
Vous pouvez utiliser Adobe Dreamweaver 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 aperu. Vous pouvez galement faire glisser un actif directement pour l'insrer dans une
page de votre document actuel.
Vous pouvez obtenir des actifs partir de diffrentes sources. Par exemple, vous pouvez crer des actifs dans une application, telle que Adobe
Fireworks ou Adobe Flash, les recevoir d'un collgue, les copier partir d'un CD-ROM de graphiques ou encore les copier partir d'un
site Web d'images.
Dreamweaver permet galement d'accder deux types d'actifs spciaux : les bibliothques et les modles. Tous deux sont des actifs lis :
lorsque vous modifiez un lment de bibliothque ou un modle, Dreamweaver met jour tous les documents qui utilisent ces lments. Les
lments de bibliothque reprsentent gnralement de petits actifs de conception, tels que le logo ou les informations de copyright d'un site. Pour
dfinir la conception de zones plus larges, utilisez plutt un modle.
Haut de la page
A propos des lments de bibliothque
Une bibliothque est un fichier Dreamweaver spcial regroupant un ensemble d'actifs individuels ou de copies d'actifs que vous pouvez placer
dans vos pages Web. Les actifs prsents dans une bibliothque portent le nom d'lments de bibliothque. Les lments pouvant tre stocks
dans une bibliothque sont notamment les images, les tableaux, les sons et les fichiers crs l'aide d'Adobe Flash. Vous pouvez mettre jour
automatiquement toutes les pages qui utilisent un lment de bibliothque chaque fois que vous modifiez cet lment.
Par exemple, supposons que vous construisiez un site de grande taille pour une socit qui souhaite qu'un slogan figure sur chaque page. Vous
pouvez crer un lment de bibliothque qui contient le slogan et utiliser cet lment dans chaque page. Si le slogan est modifi, vous pouvez
modifier l'lment de bibliothque et mettre jour automatiquement chaque page qui l'utilise.
Dreamweaver stocke les lments de bibliothque dans un dossier nomm Library, au sein du dossier racine local de chaque site. Chaque site
possde sa propre bibliothque.
Vous pouvez crer un lment de bibliothque partir de n'importe quel lment dans la section body d'un document, notamment du texte, des
tableaux, des formulaires, des applets Java, des plug-ins, des lments ActiveX, des barres de navigation et des images.
Pour les lments lis tels que les images, la bibliothque enregistre uniquement une rfrence l'lment. Le fichier d'origine doit rester
l'emplacement spcifi pour que l'lment de la bibliothque fonctionne correctement.
Il peut toutefois tre utile de stocker une image dans un lment de bibliothque. Par exemple, vous pouvez stocker une balise img complte dans
un lment de bibliothque, afin de pouvoir modifier facilement le texte alt d'une image, ou mme 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 galement un
diteur d'image pour changer la taille relle de l'image.
Remarque : Si l'lment de bibliothque contient des liens, ils ne fonctionneront pas ncessairement sur le nouveau site. En outre, les images d'un
lment de bibliothque ne sont pas copies vers le nouveau site.
Lorsque vous utilisez un lment de bibliothque, Dreamweaver insre un lien vers cet lment dans la page Web au lieu d'insrer l'lment luimme. Cela signifie que Dreamweaver insre une copie du code source HTML pour cet lment dans le document et ajoute un commentaire
HTML contenant une rfrence l'lment externe d'origine. Il s'agit d'une rfrence externe qui rend la mise jour automatique possible.
Lorsque vous crez un lment de bibliothque qui comporte un lment auquel est attach un comportement Dreamweaver, Dreamweaver copie
l'lment et son gestionnaire d'vnements (l'attribut qui spcifie l'vnement dclenchant l'action, tel que onClick, onLoad ou onMouseOver, et
l'action appeler lorsque l'vnement se produit) dans le fichier de l'lment de bibliothque. Dreamweaver ne copie pas les fonctions JavaScript
associes dans l'lment de la bibliothque. Au lieu de cela, lorsque vous insrez l'lment de bibliothque dans un document, Dreamweaver
insre automatiquement les fonctions JavaScript appropries dans la section head de ce document (si elles ne s'y trouvent pas dj).
Remarque : Si vous rdigez manuellement le code JavaScript (c'est--dire si vous le crez sans utiliser de comportements Dreamweaver), vous
pouvez l'intgrer votre lment de bibliothque l'aide du comportement Appel JavaScript pour excuter le code. Si vous n'utilisez pas de
comportement Dreamweaver pour excuter le code, le code n'est pas conserv dans l'lment de bibliothque.
La modification des comportements dans les lments de bibliothque doit respecter certaines conditions. Les lments de bibliothque ne
peuvent pas contenir de feuilles de style, car le code associ ces lments figure dans la section HEAD.
421
Voir aussi
422
Utilisation des lments de bibliothque

Cration d'un lment de bibliothque
Insertion d'un lment de bibliothque dans un document
Modification des lments de bibliothque et mise jour des documents
Personnalisation de la mise en surbrillance des lments de bibliothque
Modification des proprits d'un lment de bibliothque
Autorisation de la modification d'lments de bibliothque dans un document
Modification d'un comportement dans un lment de bibliothque
Haut de la page
Cration d'un lment de bibliothque
Les lments de bibliothque sont des lments que vous souhaitez rutiliser ou mettre jour frquemment dans l'ensemble de votre site Web.
Crer un lment de bibliothque bas sur une slection

1. Dans la fentre de document, slectionnez une partie d'un document que vous souhaitez enregistrer comme lment de la
bibliothque.
Faites glisser la slection sur la catgorie Bibliothque
Cliquez sur le bouton Nouvel lment de bibliothque
.
en bas de la catgorie Bibliothque.
Slectionnez Modifier > Bibliothque > Ajouter un objet dans la bibliothque.

3. Tapez un nom pour le nouvel lment de la bibliothque, puis appuyez sur la touche Entre (Windows) ou Retour
(Macintosh).
Dreamweaver enregistre chaque lment de bibliothque dans un fichier spar (avec l'extension de fichier .lbi), dans le
dossier Library du dossier racine local du site.
Cration d'un lment de bibliothque vide

1. Vrifiez que rien n'est slectionn dans la fentre de document.
Si un lment est slectionn, il est plac dans le nouvel lment de bibliothque.
2. Dans le panneau Actifs, slectionnez la catgorie Bibliothque
3. Cliquez sur le bouton Nouvel lment de bibliothque
en bas du panneau.
4. Slectionnez l'lment et entrez son nom, puis appuyez sur Entre (Windows) ou sur Retour (Macintosh).
Insertion d'un lment de bibliothque dans un document
Haut de la page
Lorsque vous ajoutez un lment de bibliothque une page, le contenu rel est insr dans le document avec une rfrence l'lment de
bibliothque.
1. Placez le point d'insertion dans la fentre de document.

Faites glisser un lment de bibliothque du panneau Actifs vers la fentre de document.
Pour insrer le contenu d'un lment de bibliothque sans inclure de rfrence l'lment dans le document, appuyez
sur la touche Ctrl (Windows) ou Option (Macintosh) tout en faisant glisser l'lment hors du panneau Actifs. Lorsque
vous insrez un lment de cette faon, vous pouvez le modifier dans le document, mais le document ne sera pas mis
jour lorsque vous mettrez jour les pages qui utilisent cet lment.
Slectionnez un lment de bibliothque et cliquez sur Insrer.
Modification des lments de bibliothque et mise jour des documents

423
Haut de la page
Lorsque vous modifiez un lment de bibliothque, vous pouvez choisir de mettre jour tous les documents qui utilisent cet lment. Si vous
choisissez de ne pas les mettre jour, les documents restent associs l'lment de bibliothque. Il est toujours possible de les mettre jour
ultrieurement.
Vous pouvez renommer des lments pour rompre leur lien avec des documents ou des modles, supprimer des lments de la bibliothque du
site et recrer un lment de bibliothque manquant.
Remarque : Le panneau Styles CSS n'est pas disponible lorsque vous ditez un lment de bibliothque tant donn que ces derniers peuvent
uniquement contenir des lments body et que le code CSS (feuille de style en cascade) est insr dans la section head d'un document. La bote
de dialogue Proprits de la page est galement indisponible : en effet, un lment de bibliothque ne peut pas comporter de balise body ni
d'attributs de cette balise.
Modification d'un lment de bibliothque

2. Slectionnez un lment de bibliothque.

3. Vous pouvez soit cliquer sur le bouton Modifier
, soit double-cliquer sur l'lment de bibliothque.
Dreamweaver ouvre une nouvelle fentre, similaire la fentre de document, permettant de modifier l'lment de
bibliothque. L'arrire-plan gris indique que vous tres en train de modifier un lment de bibliothque et non un document.
4. Apportez les modifications et enregistrez-les.
5. Indiquez si vous souhaitez mettre jour les documents du site local qui utilisent l'lment de bibliothque modifi.
Slectionnez Mettre jour pour effectuer une mise jour immdiate. Si vous slectionnez Ne pas mettre jour, les
documents ne seront pas mis jour moins que vous ne slectionniez Modifier > Bibliothque > Mettre jour la page en
cours ou Mettre jour les pages.
Mise jour du document actif afin d'utiliser la version actuelle de tous les lments de bibliothque
Choisissez Modifier > Modles > Mettre jour la page en cours.
Mise jour du site entier ou de tous les documents utilisant un lment de bibliothque particulier
1. Choisissez Modifier > Bibliothque > Mettre jour les pages.
2. Dans le menu droulant Regarder dans, indiquez ce qui doit tre mis jour :
Pour mettre jour toutes les pages du site slectionn afin d'utiliser la version actuelle de tous les lments de
bibliothque, slectionnez Site entier, puis slectionnez le nom du site dans le menu droulant adjacent.
Pour mettre jour toutes les pages du site en cours qui utilisent l'lment de bibliothque, slectionnez Fichiers utilisant,
puis slectionnez un nom d'lment de bibliothque dans le menu droulant adjacent.
3. Sous Mettre jour, assurez-vous que l'option Elments de bibliothque est active.
Pour mettre les modles jour en mme temps, slectionnez Modles galement.
4. Cliquez sur Dmarrer.
Dreamweaver met jour les fichiers comme indiqu. Si vous avez slectionn l'option Afficher le journal, Dreamweaver
gnre un rapport qui indique si les fichiers ont t mis jour correctement et qui contient galement d'autres informations.
Modification du nom d'un lment de bibliothque

2. Cliquez sur l'lment de bibliothque, attendez, puis cliquez de nouveau. (Ne double-cliquez pas, car cela ouvrirait l'lment
pour modification.)
3. Entrez un nouveau nom.
4. Cliquez ailleurs ou appuyez sur Entre (Windows) ou sur Retour (Macintosh).
5. indiquez si vous souhaitez mettre jour les documents qui utilisent l'lment en choisissant soit Mettre jour, soit Ne pas
mettre jour.
Suppression d'un lment d'une bibliothque

Lorsque vous supprimez un lment de bibliothque, Dreamweaver supprime l'lment de la bibliothque mais ne modifie pas le contenu des
documents qui l'utilisent.
2. Slectionnez l'lment de bibliothque.

3. Cliquez sur le bouton Supprimer ou appuyez sur la touche Suppr, puis confirmez l'opration.
Important : Si vous supprimez un lment de bibliothque, vous ne pourrez pas utiliser Annuler pour le rcuprer. Vous
pouvez toutefois le recrer.
Rcration d'un lment de bibliothque manquant ou supprim

424
1. Slectionnez une instance de l'lment dans un de vos documents.

2. Cliquez sur le bouton Crer nouveau de l'inspecteur Proprits (Fentre > Proprits).
Personnalisation de la mise en surbrillance des lments de bibliothque
Haut de la page
Vous pouvez personnaliser la couleur de surbrillance des lments de bibliothque et afficher ou masquer la surbrillance en dfinissant des
prfrences de surbrillance.
Modification de la couleur de surbrillance des lments de bibliothque

2. Slectionnez la catgorie Surbrillance dans la liste situe gauche dans la bote de dialogue Prfrences.
3. Cliquez dans la case de couleur Elments de la bibliothque et slectionnez une couleur de surbrillance l'aide du slecteur
de couleurs (ou entrez la valeur hexadcimale correspondant la couleur de surbrillance dans la zone de texte).
4. Activez l'option Afficher pour afficher la couleur de surbrillance dans la fentre de document.
5. Cliquez sur OK.
Affichage ou masquage de la mise en surbrillance dans la fentre de document

Pour afficher la mise en surbrillance, slectionnez Affichage > Assistances visuelles > Elments invisibles. Pour masquer la mise en
surbrillance, dslectionnez l'option Elments invisibles.
Modification des proprits d'un lment de bibliothque
Haut de la page
L'inspecteur Proprits vous permet d'ouvrir un lment de bibliothque pour le modifier, dtacher un lment slectionn de son fichier source ou
remplacer un lment par celui slectionn actuellement.
1. Slectionnez un lment de bibliothque dans un document.
2. Slectionnez l'une des options suivantes dans l'inspecteur Proprits (Fentre > Proprits) :
Src Indique le nom de fichier et l'emplacement du fichier source de l'lment de la bibliothque. Vous ne pouvez pas modifier
ces informations.
Ouvrir Ouvre le fichier source de l'lment de bibliothque pour modification. Cela revient slectionner l'lment dans le
panneau Actifs et cliquer sur le bouton Modifier.
Dtacher de l'original Brise le lien entre l'lment de bibliothque slectionn et son fichier source. Vous pouvez modifier
l'lment dtach dans le document, mais il ne s'agit plus d'un lment de bibliothque et il n'est plus modifi lorsque vous
modifiez l'lment d'origine.
Crer nouveau Remplace l'lment d'origine par la slection en cours. Utilisez cette option pour recrer les lments de
bibliothque si l'lment de bibliothque d'origine manque ou a t accidentellement supprim.
Autorisation de la modification d'lments de bibliothque dans un document
Haut de la page
Si vous avez insr un lment de bibliothque dans un document et que vous dsirez modifier celui-ci uniquement sur cette page, vous devez
briser le lien qui existe entre cet lment et la bibliothque. Lorsqu'une instance d'lment de bibliothque a t rendue modifiable, elle n'est plus
mise jour quand l'lment de bibliothque est modifi.
1. Slectionnez un lment de la bibliothque dans le document actif.
2. Dans l'inspecteur Proprits, cliquez sur Dtacher de l'original (Fentre > Proprits).
Modification d'un comportement dans un lment de bibliothque
Haut de la page
Pour modifier un comportement dans un lment de bibliothque, vous devez tout d'abord insrer l'lment dans un document, puis le rendre
modifiable dans ce document. Une fois les changements apports, vous pouvez recrer l'lment de bibliothque en remplaant l'lment de la
bibliothque par l'lment modifi de votre document.
1. Ouvrez un document contenant l'lment de la bibliothque.
Notez le nom de l'lment de la bibliothque, ainsi que les balises exactes qu'il contient. Vous aurez besoin de cette
information plus tard.
2. Slectionnez l'lment de bibliothque et cliquez sur Dtacher de l'original dans l'inspecteur Proprits (Fentre > Proprits).
3. Slectionnez l'lment auquel est attach le comportement.
4. Dans le volet Comportements (Fentre > Comportements), double-cliquez sur l'action que vous voulez modifier.
5. Dans la bote de dialogue qui s'affiche, effectuez vos modifications et cliquez sur OK.
425
7. Notez prcisment le nom et la casse de l'lment de bibliothque d'origine ; slectionnez-le, puis cliquez sur le bouton
Supprimer.
8. Dans la fentre de document, slectionnez tous les lments qui constituent l'lment de bibliothque.
Veillez slectionner exactement les mmes lments que ceux qui se trouvaient dans l'lment de bibliothque original.
9. Dans le panneau Actifs, cliquez sur le bouton Nouvel lment de bibliothque
l'lment que vous avez supprim en respectant l'orthographe et la casse.
et donnez au nouvel lment le nom de
10. Pour mettre jour l'lment de bibliothque dans les autres documents de votre site, choisissez Modifier > Bibliothque >
Mettre jour les pages.
11. Dans le menu droulant Regarder dans, slectionnez Fichiers utilisant.
12. Dans le menu droulant adjacent, slectionnez le nom de l'lment de bibliothque que vous venez de crer.
13. Sous Mettre jour, vrifiez que l'option Elments de bibliothque est slectionne, puis cliquez sur Dmarrer.
14. Une fois les mises jour termines, cliquez sur Fermer.
Voir aussi
426
Liens et navigation
427
A propos des liens et de la navigation

A propos des liens
Chemins absolus, relatifs au documents et relatifs la racine du site
Haut de la page
A propos des liens
Une fois que vous avez dfini un site Dreamweaver dans lequel stocker les documents de votre site Web et que vous avez cr des pages HTML,
il vous reste tablir des connexions entre vos documents et d'autres types de documents.
Dreamweaver propose plusieurs mthodes pour crer des liens vers des documents, des images, des fichiers multimdias ou des logiciels
pouvant tre tlchargs. Vous pouvez tablir des liens vers n'importe quel texte ou n'importe quelle image d'un document, mme s'ils se trouvent
dans un en-tte, une liste, un tableau, un lment positionnement absolu (lment PA) ou un cadre.
Il existe diffrentes mthodes de cration et de gestion de liens. Certains concepteurs de pages Web prfrent crer des liens vers des pages ou
des fichiers qui n'existent pas encore, alors que d'autres prfrent crer d'abord tous les fichiers et pages, puis ajouter les liens. Une autre
mthode de gestion des liens consiste crer des pages de type espace rserv qui vous permettent d'ajouter des liens rapidement et de les
vrifier avant de terminer toutes les pages de votre site.
Chemins absolus, relatifs au documents et relatifs la racine du site
Haut de la page
Pour crer des liens, il est indispensable de comprendre le chemin d'accs qui s'tablit entre le document ou l'actif partir duquel vous tablissez
un lien et le document point par ce lien.
Chaque page Web possde une adresse unique, appele URL (Uniform Resource Locator) Cependant, lorsque vous crez un lien local (entre
deux documents du mme site), vous n'avez en gnral pas besoin de spcifier l'URL complte du document vers lequel vous crez le lien ; il est
prfrable d'indiquer un chemin relatif, partir du document actif ou de la racine du site.
Il existe trois types de chemins d'accs 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 la racine du site (par exemple /support/dreamweaver/contents.html).
Dreamweaver vous permet de choisir aisment le type de chemin crer pour vos liens.
Remarque : Il est prfrable d'utiliser le type de lien qui vous convient le mieux, qu'il soit relatif la racine du site ou au
document. L'exploration des liens, contrairement la saisie des chemins, garantit que vous entrez toujours le chemin correct.
Chemins absolus
Les chemins absolus indiquent l'URL complte du document li, y compris le protocole utiliser (en gnral http:// pour les pages Web), par
exemple, http://www.adobe.com/support/dreamweaver/contents.html. Pour un actif de type image, l'URL entire peut ressembler
http://www.adobe.com/support/dreamweaver/images/image1.jpg.
Vous devez utiliser un chemin absolu lorsque vous crez un lien vers un document ou un actif situ en dehors du site courant. Vous pouvez
galement utiliser des liens de chemins absolus pour les liens locaux (vers des documents sur le mme site), mais cette approche est
dconseille. Si vous dplacez 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 dplacer 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 rside sur un serveur distant
(c'est--dire, une image qui n'est pas disponible sur le disque dur local).
Chemins relatifs au document

Les chemins relatifs au document sont gnralement prfrables pour les liens locaux dans la plupart des sites Web. Ils sont particulirement
utiles lorsque le document actif et le document ou l'actif cible du lien se trouvent dans le mme dossier et le resteront vraisemblablement. Vous
pouvez galement utiliser un chemin relatif au document ou l'actif pour pointer sur un document situ dans un autre dossier, en indiquant le
chemin entre le document actif et le document li, au sein de la hirarchie de dossiers.
Indiquer un chemin relatif au document consiste tout simplement laisser de ct la partie du chemin absolu qui est identique pour le document
actuel et le document ou l'actif li, en n'indiquant que la partie du chemin qui diffre.
Par exemple, supposons que la structure de votre site soit la suivante :
428
Pour tablir un lien depuis contents.html vers hours.html (ces deux fichiers sont dans le mme dossier), utilisez le chemin
relatif hours.html :
Pour tablir un lien de contents.html vers tips.html (qui se trouve dans le sous-dossier resources ), utilisez le chemin relatif
resources/tips.html. A chaque barre oblique (/), vous descendez d'un niveau dans la hirarchie des dossiers.
Pour 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 hirarchie des dossiers.
Pour 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 squence ../ fait remonter au dossier parent, et products/ fait redescendre dans le
sous-dossier products .
Lorsque vous dplacez des fichiers sous la forme d'un groupe (par exemple, lorsque vous dplacez un dossier entier, afin que
tous les fichiers au sein de ce dossier conservent les mmes chemins relatifs entre eux), il n'est pas ncessaire de mettre
jour les liens relatifs au document entre ces fichiers. Toutefois, si vous dplacez individuellement un fichier qui contient des
liens relatifs au document, ou un fichier sur lequel pointe un lien relatif partir d'un autre document, il est ncessaire de mettre
ces liens jour (si vous dplacez ou renommez des fichiers dans le panneau Fichiers, Dreamweaver met automatiquement
jour tous les liens concerns).
Chemins relatifs la racine du site

Les chemins relatifs la racine du site reprsentent le chemin d'accs un document partir du dossier racine du site. Ces chemins peuvent tre
utiles si vous travaillez sur un grand site Web qui utilise plusieurs serveurs ou un seul serveur qui est l'hte de plusieurs sites. Toutefois, si vous
n'tes pas familier avec ce type de chemin, adoptez plutt les chemins relatifs au document.
Un chemin relatif la racine commence par une barre oblique, qui reprsente le dossier racine du site. Par exemple, /support/tips.html est le
chemin relatif la racine d'un fichier (tips.html) situ dans le sous-dossier support de la racine du site.
Un chemin relatif la racine reprsente souvent le meilleur moyen d'indiquer les liens si vous dplacez frquemment des fichiers HTML d'un
dossier un autre dans votre site Web. Lorsque vous dplacez un document qui contient des liens relatifs la racine du site, il n'est pas
ncessaire de modifier les liens, car les liens sont relatifs la racine du site, et non au document lui-mme. Par exemple, si vos fichiers HTML
utilisent des liens relatifs la racine du site pour les fichiers dpendants (les images en particulier), les liens des fichiers dpendants restent
valides si vous dplacez les fichiers HTML.
Toutefois, si vous dplacez ou renommez les documents sur lesquels pointent des liens relatifs la racine du site, vous devrez mettre ces liens
jour, mme si les chemins relatifs de ces documents entre eux n'ont pas chang. Par exemple, si vous dplacez un dossier, vous devez mettre
jour tous les liens relatifs la racine du site vers les fichiers que ce dossier contient (si vous dplacez ou renommez des fichiers dans le panneau
Fichiers, Dreamweaver met automatiquement jour tous les liens concerns).
Voir aussi
429
Etablissement de liens
Liens entre fichiers et documents
Association de comportements JavaScript des liens
Cration dun lien vers des documents laide de linspecteur Proprits
Cration dun lien vers des documents en utilisant licne Pointer vers un fichier
Ajout dun lien en utilisant la commande Hyperlien
Dfinir le chemin relatif des nouveaux liens
Cration dun lien vers un emplacement spcifique au sein dun document
Cration dun lien de courriel
Cration de liens nuls et de liens de script
Mise jour automatique des liens
Modification dun lien au niveau du site
Test de liens dans Dreamweaver
Haut de la page
Liens entre fichiers et documents

Avant de crer des liens, assurez-vous de bien comprendre le fonctionnement des chemins relatifs au
document, des chemins relatifs la racine du site et des chemins absolus. Vous pouvez crer plusieurs
types de liens dans un document :
Un lien vers un autre document ou fichier, tel que le fichier dune image, dune animation
ou dun son
Un lien vers une ancre nomme, qui permet de sauter un emplacement spcifique au
sein dun document
Un lien de courriel, qui cre un courriel vierge avec ladresse du destinataire dj
indique
Des liens nuls et de script, qui permettent daffecter des comportements un objet ou de
crer un lien qui excute un code JavaScript
Utilisez linspecteur Proprits et licne Pointer vers un fichier pour crer des liens partir dune image, dun
objet ou dun texte vers un autre document ou fichier.
Dreamweaver cre les liens vers dautres pages de votre site laide de chemins relatifs au document. Vous
pouvez toutefois demander Dreamweaver de crer les nouveaux liens laide de chemins relatifs la
racine du site.
Remarque : il est conseill de toujours enregistrer un nouveau fichier avant de crer un chemin relatif au
document, car ce dernier nest pas valide sans point de dpart bien dfini. Si vous crez un chemin relatif au
document avant denregistrer le fichier, Dreamweaver utilise provisoirement un chemin absolu commenant
par file:// jusqu ce que le fichier soit enregistr. Dreamweaver convertit alors le chemin file:// en chemin
relatif.
Vous trouverez un didacticiel consacr la cration de liens ladresse www.adobe.com/go/vid0149_fr.

430
Haut de la page
Association de comportements JavaScript des liens

Vous pouvez associer un comportement nimporte quel lien dun document. Les comportements dcrits cidessous peuvent tre trs intressants lorsque vous insrez des lments lis dans vos documents.
Texte de la barre dtat Permet de spcifier le texte dun message et de lafficher dans la barre dtat dans
la partie infrieure gauche de la fentre du navigateur. Par exemple, vous pouvez utiliser ce comportement
pour dcrire la destination dun lien dans la barre dtat, au lieu dafficher lURL associe
Ouvrir la fentre Navigateur Ouvre une URL dans une nouvelle fentre. Vous pouvez spcifier les
proprits de la nouvelle fentre, notamment son nom, sa taille et ses attributs (redimensionnable ou non,
dispose dune barre de menu ou non, etc.).
Menu de reroutage Modifie un menu de reroutage. Vous pouvez modifier la liste du menu, spcifier un
fichier li diffrent ou changer lemplacement du navigateur dans lequel ouvrir le document li.
Haut de la page
Cration dun lien vers des documents laide de linspecteur

Proprits
Vous pouvez utiliser licne de dossier de linspecteur Proprits ou la zone Lien pour crer des liens partir
dune image, un objet, du texte ou tout autre document ou fichier.
1. Slectionnez le texte ou une image dans la fentre de document en mode Cration.
2. Ouvrez linspecteur Proprits (Fentre > Proprits) et procdez de lune des manires
suivantes :
Cliquez sur licne reprsentant un dossier
rechercher et slectionner un fichier.
situe droite de la zone Lien pour
Le chemin daccs du document point par le lien saffiche dans la zone URL.
Utilisez le menu droulant Relatif dans la bote de dialogue Slectionner fichier
HTML pour spcifier si le chemin est relatif la racine ou au document, puis cliquez
sur Slectionner. Le type de chemin slectionn ne sapplique quau lien actif. Vous
pouvez modifier le paramtre par dfaut de la zone Relatif pour le site.
Tapez le chemin et le nom de fichier du document dans la zone Lien.
Pour crer un lien vers un document de votre site, indiquez un chemin relatif au
document ou la racine du site. Pour crer un lien vers un document situ 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 nayant pas
encore t cr.
3. Dans le menu droulant Cible, slectionnez un emplacement dans lequel ouvrir le
document :
_parent charge le document li dans le cadre parent ou dans la fentre parente du
cadre contenant le lien. Si le cadre contenant le lien nest pas imbriqu, le document
li est charg dans la fentre de base du navigateur.
_self charge le document li dans le mme cadre (ou la mme fentre) que le lien.
Il sagit de la cible par dfaut, il est donc en gnral inutile de la spcifier.
_top charge le document li dans la fentre de base du navigateur, en supprimant
tous les cadres.
431
Si tous les liens de la page doivent tre dfinis sur la mme cible, vous pouvez
spcifier celle-ci une fois pour toutes en choisissant la commande Insertion >
HTML > Balises den-tte > Base et en slectionnant les informations cible. Pour plus
dinformations sur le ciblage des cadres, voir Contrle des contenus de cadre avec
des liens.
Haut de la page
Cration dun lien vers des documents en utilisant licne Pointer

vers un fichier
2. Crez un lien de lune des deux faons suivantes :
Faites glisser licne Pointer vers un fichier
(icne cible), sur la droite de la
zone Lien de linspecteur Proprits, et pointez sur une ancre visible dans le
document actuel, une ancre visible dans un autre document ouvert, un lment
possdant un ID unique ou un document dans le panneau Fichiers.
Tout en maintenant la touche Maj enfonce, faites glisser le pointeur de la souris
depuis la slection et pointez sur une ancre visible dans le document actuel, une
ancre visible dans un autre document ouvert, un lment possdant un ID unique ou
un document dans le panneau Fichiers.
Remarque : vous pouvez crer un lien vers un autre document ouvert condition que
vos documents ne soient pas agrandis dans la fentre de document. Pour afficher les
documents en mosaque, slectionnez Fentre > Cascade ou Fentre > Mosaque.
Lorsque vous pointez vers un document ouvert, celui-ci passe au premier plan de votre
cran pendant que vous effectuez votre slection.
Haut de la page
Ajout dun lien en utilisant la commande Hyperlien

La commande Hyperlien vous permet de crer un lien vers une image, un objet ou vers un autre document
ou fichier.
1. Placez le curseur lendroit du document o vous souhaitez que le lien apparaisse.
2. Procdez de lune des manires suivantes pour afficher la bote de dialogue Hyperlien :
Choisissez Insertion > Hyperlien.
Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Hyperlien.
3. Tapez le texte du lien et, aprs la zone Lien, tapez le nom du fichier vers lequel un lien
va tre tabli (ou cliquez sur licne du dossier pour rechercher le fichier).
4. Dans le menu droulant Cible, choisissez la fentre dans laquelle le fichier devra souvrir
ou tapez son nom
Les noms de tous les cadres du document actif apparaissent dans la liste droulante. Si
vous spcifiez un cadre inexistant, la page lie souvre dans une nouvelle fentre portant
le nom que vous avez spcifi. Vous pouvez galement choisir parmi les noms de cible
rservs suivants :
_parent charge le fichier li dans le jeu de cadres parent, ou dans la fentre
parente du cadre contenant le lien. Si le cadre contenant le lien nest pas imbriqu, le
document li sera charg dans la fentre de base du navigateur.
_self charge le fichier li dans le mme cadre, ou dans la mme fentre, que le
lien. Cette cible tant celle par dfaut, vous navez gnralement pas la spcifier.
_top charge le fichier li dans la fentre de base du navigateur, supprimant ainsi
432
tous les cadres.

5. Dans la zone Ordre des tabulations, tapez une valeur correspondant lordre de longlet.
6. Dans la zone Titre, tapez un titre pour le lien.
7. Dans la zone Cl daccs, tapez une quivalence de clavier (une lettre) pour
slectionner le lien dans le navigateur.
8. Cliquez sur OK.
Haut de la page
Dfinir le chemin relatif des nouveaux liens

Par dfaut, Dreamweaver cre les liens vers dautres pages de votre site laide de chemins relatifs au
document. Pour utiliser des chemins relatifs la racine, vous devez dabord dfinir un dossier local dans
Dreamweaver en choisissant un dossier racine local qui servira dquivalent la racine des documents sur le
serveur. Dreamweaver utilise ce dossier pour dterminer les chemins relatifs la racine pointant vers des
fichiers.
2. Dans la bote de dialogue Grer les sites, double-cliquez sur votre site dans la liste.
3. Dans la bote de dialogue Configuration du site, dveloppez Paramtres avancs, puis
slectionnez la catgorie Infos locales.
4. Dfinissez le chemin relatif des nouveaux liens en slectionnant loption Document ou
Racine du site.
Lorsque vous cliquez sur OK, la modification de ce paramtre ne convertit pas le chemin
des liens existants. Le paramtre ne sapplique quaux nouveaux liens crs avec
Dreamweaver.
Remarque : le contenu li un chemin relatif la racine napparat pas lorsque vous
lancez laperu de documents dans un navigateur local, sauf si vous spcifiez un serveur
de test ou activez loption Aperu laide dun fichier temporaire dans Edition >
Prfrences > Aperu dans le navigateur. En effet, la diffrence des serveurs, les
navigateurs ne reconnaissent pas les racines de sites. Un moyen rapide de lancer
laperu dun contenu li des chemins relatifs la racine consiste placer le fichier sur
un serveur distant, puis slectionner Fichier > Aperu dans le navigateur.
Le paramtre du nouveau chemin ne sapplique quau site actif.
Haut de la page
Cration dun lien vers un emplacement spcifique au sein dun

document
Vous pouvez utiliser linspecteur Proprits pour tablir un lien vers une section donne dun document en
crant au pralable des ancres nommes. Les ancres nommes permettent de dfinir des marqueurs dans
un document et sont souvent places au niveau dune rubrique spcifique ou en haut dun document. Vous
pouvez ensuite crer des liens vers ces ancres nommes, qui amnent rapidement le visiteur la position
spcifie.
La cration dun lien vers une ancre nomme seffectue en deux tapes : il faut dabord crer lancre
nomme, puis crer un lien pointant sur elle.
Remarque : vous ne pouvez pas placer dancre nomme dans un lment PA ( positionnement absolu).
433
Cration dune ancre nomme

1. Dans la fentre de document, en mode Cration, placez le curseur lendroit o insrer
lancre nomme.
Choisissez Insertion > Ancre nomme.
Appuyez sur Ctrl+A (Windows) ou Commande+Option+A (Macintosh).
Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Ancre
nomme.
3. Dans la zone Ancre nomme, entrez le nom de lancre puis cliquez sur OK (le nom de
lancre ne peut pas contenir despaces).
Le marqueur de lancre apparat au niveau du point dinsertion.
Remarque : si vous ne voyez pas le marqueur de lancrage, choisissez Affichage >
Assistances visuelles > Elments invisibles.
Cration dun lien vers une ancre nomme

1. Dans la fentre de document en mode Cration, slectionnez le texte ou limage partir
desquels crer le lien.
2. Dans la zone Lien de linspecteur Proprits, tapez le signe dise (#) et le nom de
lancre. Par exemple, pour crer un lien vers une ancre nomme dbut dans le
document actif, tapez #top. Pour crer un lien vers une ancre nomme dbut dans
un autre document figurant dans le mme dossier, tapez filename.html#top.
Remarque : la casse (majuscules/minuscules) est importante dans les noms dancre.
Cration dun lien vers une ancre nomme laide de la mthode Pointer vers
un fichier
1. Ouvrez le document contenant lancre nomme.
Remarque : choisissez Affichage > Assistances visuelles > Elments invisibles pour
faire apparatre lancre, le cas chant.
2. Dans la fentre de cration du document, slectionnez le texte ou limage partir
desquels crer le lien (sil sagit dun autre document ouvert, vous devez basculer sur
celui-ci).
Cliquez sur licne du pointeur
(icne cible) droite de la zone Lien de linspecteur
Proprits et faites-la glisser sur lancre vers laquelle vous souhaitez crer un lien,
dans le mme document ou dans tout autre document ouvert.
En maintenant la touche Maj enfonce, dans la fentre de document, faites glisser
limage ou le texte slectionn sur lancre vers laquelle vous souhaitez crer un lien,
dans le mme document ou dans tout autre document ouvert.
Haut de la page
Cration dun lien de courriel

Un lien de courriel ouvre une nouvelle fentre de message (dans le programme de messagerie associ au
navigateur de lutilisateur) lorsque lutilisateur clique dessus. La zone A : de la fentre du courriel est
automatiquement complte par ladresse indique dans le lien.
434
Cration dun lien de courriel laide de la commande Insertion - Lien de

messagerie
1. Dans la fentre de document, placez le curseur lendroit o afficher le lien de courriel
ou slectionnez le texte ou limage qui doit reprsenter ce lien.
2. Procdez de lune des manires suivantes pour insrer le lien :
Choisissez Insertion > Lien de messagerie.
Dans la catgorie 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 lectronique, tapez ladresse lectronique, puis cliquez sur OK.
Cration dun lien de courriel laide de linspecteur Proprits

2. Dans la zone Lien de linspecteur Proprits, tapez mailto: suivi dune adresse
lectronique.
Ninsrez pas despaces entre le signe deux-points et ladresse lectronique.
Remplissage automatique de la ligne dobjet dun courriel

1. Crez un lien de courriel laide de linspecteur Proprits, comme expliqu ci-dessus.
2. Dans la zone Lien de linspecteur Proprits, ajoutez ?subject= aprs ladresse de
courriel, puis entrez un objet aprs le signe gal . Najoutez pas despaces entre le
point dinterrogation et la fin de ladresse de courriel.
Lentre entire doit se prsenter comme suit :
mailto:responsable@votresite.com?subject=Message de notre site
Haut de la page
Cration de liens nuls et de liens de script

Un lien nul est un lien non dsign. Utilisez des liens nuls pour attacher des comportements des objets ou
du texte sur une page. Par exemple, vous pouvez attacher un comportement un lien nul pour intervertir une
image ou afficher un lment PA lorsque le pointeur passe au-dessus du lien.
Les liens de script excutent un code JavaScript ou appellent une fonction JavaScript et permettent de fournir
aux utilisateurs des informations supplmentaires sur un lment sans quitter la page en cours. Les liens de
scripts permettent galement dexcuter des calculs, de valider des formulaires et deffectuer dautres tches
de traitement lorsquun visiteur clique sur un lment spcifique.
Cration dun lien nul

1. Slectionnez du texte, un objet ou une image dans la fentre de document en mode
Cration.
2. Dans linspecteur Proprits, tapez javascript:; (le mot javascript suivi par deux
points puis par un point-virgule) dans la zone Lien.
435
Cration dun lien de script

1. Slectionnez du texte, un objet ou une image dans la fentre de document en mode
Cration.
2. Dans la zone Lien de linspecteur Proprits, tapez javascript: suivi du code
JavaScript ou dun appel de fonction JavaScript. (Ninsrez pas despace entre le signe
deux-points et le code ou lappel.)
Haut de la page
Mise jour automatique des liens

Dreamweaver peut mettre jour les liens vers un document et partir de ce dernier lorsque vous le dplacez
ou le renommez au sein dun site local. Cette fonction fonctionne de faon optimale lorsquun site tout entier
(ou une section entire de celui-ci) est stock 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 sur le
serveur distant.
Pour acclrer le processus de mise jour, Dreamweaver peut crer un fichier de mmoire cache dans
lequel il conservera la liste de tous les liens du site local. Le fichier de mmoire cache est mis jour chaque
fois que vous ajoutez, modifiez ou supprimez des liens sur votre site local.
Activation de la mise jour automatique des liens

(Macintosh).
2. Dans la bote de dialogue Prfrences, slectionnez la catgorie Gnral dans la liste de
gauche.
3. Dans la section Options de document des prfrences Gnral, slectionnez une option
dans le menu droulant Mettre jour les liens lors du dplacement de fichiers.
Toujours Met automatiquement jour tous les liens vers un document slectionn et
partir de ce dernier lorsque vous le dplacez ou le renommez
Jamais Ne met pas automatiquement jour tous les liens vers un document slectionn
et partir de ce dernier lorsque vous le dplacez ou le renommez.
Invite Affiche dabord une bote de dialogue qui rpertorie tous les fichiers affects par
le changement. Cliquez sur Mettre jour pour mettre jour les liens de ces fichiers, ou
sur Ne pas mettre jour pour laisser les fichiers intacts.
4. Cliquez sur OK.
Cration dun fichier de mmoire cache pour votre site

2. Slectionnez un site, puis cliquez sur Modifier.
3. Dans la bote de dialogue Configuration du site, dveloppez Paramtres avancs, puis
slectionnez la catgorie Infos locales.
4. Dans la catgorie Infos locales, slectionnez loption Activer le cache.
Aprs avoir lanc Dreamweaver, la premire fois que vous modifiez ou supprimez des
liens vers des fichiers de votre dossier local, Dreamweaver vous invite charger la
mmoire cache. Si vous cliquez sur Oui, Dreamweaver charge la mmoire cache et met
436
jour tous les liens vers le fichier que vous venez de modifier. Si vous cliquez sur le
bouton Non, la modification est consigne dans la mmoire cache, mais Dreamweaver
ne charge pas la mmoire cache et ne met pas les liens jour.
Sur les sites de grande taille, le chargement de la mmoire cache peut prendre quelques
minutes du fait que Dreamweaver doit dterminer si la mmoire cache est prime en
comparant lheure et la date des fichiers qui se trouvent sur le site local celles
enregistres dans la mmoire cache. Si vous navez pas modifi de fichiers hors de
Dreamweaver, vous pouvez cliquer sur le bouton darrt en toute scurit lorsque le
bouton apparat.
Rcration de la mmoire cache

Dans le panneau Fichiers, slectionnez Site > Avanc > Recrer le cache du site.
Haut de la page
Modification dun lien au niveau du site

Outre la mise jour automatique des liens que Dreamweaver effectue chaque fois que vous dplacez ou
renommez un fichier, vous pouvez modifier manuellement tous les liens (y compris les liens de messagerie
lectronique, FTP, nuls et de scripts) pour quils pointent sur un autre chemin.
Cette option est surtout utile lorsque vous souhaitez supprimer un fichier auquel dautres fichiers sont lis,
mais pouvez lutiliser dautres fins. Par exemple, supposons que vous ayez tabli un lien entre les mots
films du mois et /films/juillet.html dans lensemble de votre site. Le 1er aot, vous voudrez modifier ces liens
pour quils pointent vers /films/aout.html.
1. Slectionnez un fichier dans laffichage local du panneau Fichiers.
Remarque : si vous changez un lien de messagerie lectronique, ftp, nul ou de script,
vous navez pas besoin de slectionner de fichier.
2. Choisissez Site > Modifier le lien au niveau du site.
3. Compltez les options suivantes dans la bote de dialogue Modifier le lien au niveau du
site :
Modifier tous les liens Cliquez sur licne reprsentant un dossier

pour rechercher
et slectionner le fichier cible vers lequel les liens doivent tre rompus. Si vous changez
un lien de messagerie lectronique, ftp, nul ou de script, tapez le texte complet du lien
changer.
En liens Cliquez sur licne reprsentant un dossier

pour rechercher et
slectionner le nouveau fichier vers lequel tablir un lien. Si vous changez un lien de
messagerie lectronique, ftp, nul ou de script, tapez le texte complet du lien de
remplacement.
4. Cliquez sur OK.
Dreamweaver met jour tous les documents qui pointent vers le fichier slectionn, en
les faisant pointer vers le nouveau fichier suivant le format de chemin daccs existant
(par exemple, si lancien chemin tait relatif au document, le nouveau lest galement).
Lorsquun lien a t chang au niveau de tout le site, le fichier slectionn devient
orphelin (plus aucun fichier du disque local ne pointe vers lui). Vous pouvez le supprimer
en toute scurit sans risque daltrer des liens sur le site local Dreamweaver.
Remarque : 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 t modifis, sinon les visiteurs ne
pourront pas visualiser les modifications.
437
Haut de la page
Test de liens dans Dreamweaver

Les liens ne sont pas actifs dans Dreamweaver ; cest--dire que vous ne pouvez pas ouvrir les documents
lis en cliquant sur le lien dans la fentre de document.
Slectionnez le lien et choisissez Modifier > Ouvrir la page lie.
Appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh), puis doublecliquez sur le lien.
Remarque : le document li doit rsider sur le disque local.
Voir aussi
Didacticiel vido : Ajout dhyperliens tout ou partie dune image
Chemins absolus, relatifs au document et relatifs la racine du site
Didacticiel de cration de liens
Utilisation de sites Dreamweaver
Correction de liens rompus
Application dun comportement
Rechercher les liens rompus, externes et orphelins
438
Menus de reroutage
Insertion de menus de reroutage
Insertion d'un menu de reroutage
Modification des lments d'un menu de reroutage
Dpannage des menus de reroutage
Haut de la page
Insertion de menus de reroutage
Un menu de reroutage est un menu droulant dans un document, visible pour tous les visiteurs du site et rpertoriant les liens vers des documents
ou des fichiers. Vous pouvez crer des liens vers des documents de votre site Web ou d'un autre site, des liens de messagerie lectronique, des
liens vers des images ou vers tout type de fichier pouvant tre ouvert dans un navigateur.
Chaque option d'un menu de reroutage est associe une URL. Lorsque les utilisateurs choisissent une option, ils sont redirigs ( rerouts )
vers l'URL associe. Ces menus sont insrs l'aide de l'objet de formulaire Menu de reroutage.
Un menu de reroutage peut comporter trois composants :
(Facultatif) Une invite de slection au sein du menu, par exemple une description de catgorie pour les lments du menu ou
des instructions, du type Faites votre choix .
(Obligatoire) Une liste d'lments de menu de reroutage : l'utilisateur choisit une option et le document ou le fichier li s'affiche.
(Facultatif) Un bouton Aller.
Haut de la page
Insertion d'un menu de reroutage

1. Ouvrez un document, puis placez le curseur dans la fentre de document.
Choisissez Insertion > Formulaire > Menu de reroutage.
Cliquez sur le bouton Menu de reroutage de la catgorie Formulaires du panneau Insertion.
3. Compltez les options de la bote de dialogue Insrer menu de reroutage, puis cliquez sur OK. Voici une liste partielle des
options :
Boutons Plus (+) et Moins (-) Cliquez sur Plus pour insrer un lment ; cliquez nouveau sur Plus pour en ajouter un
autre. Pour supprimer un lment, slectionnez-le et cliquez sur Moins.
Boutons flchs Slectionnez un lment et cliquez sur les boutons flchs pour le dplacer vers le haut ou le bas de la
liste.
Text Tapez le nom d'un lment sans nom. Si votre menu contient une invite de slection (telle que Faites votre choix ),
tapez-la ici en tant que premier lment de menu (dans ce cas, vous devez aussi slectionner l'option Slectionner le premier
lment aprs le changement d'URL situe en bas).
Si slectionn, aller l'URL Naviguez jusqu'au fichier cible ou tapez son chemin.
Ouvrir les URL dans Spcifiez si le fichier doit tre ouvert dans la mme fentre ou dans un cadre. Si le cadre dsigner
comme cible n'apparat pas dans le menu droulant, fermez la bote de dialogue Insrer menu de reroutage, puis donnez un
nom au cadre.
Menu Insrer bouton Aller aprs Choisissez d'insrer un bouton Aller au lieu d'une invite de slection de menu.
Slectionner le premier lment aprs le changement d'URL Slectionnez cette option si vous avez insr une invite de
slection de menu ( Faites votre choix ) en tant que premier lment du menu.
Modification des lments d'un menu de reroutage
Haut de la page
Vous pouvez modifier l'ordre des lments dans le menu ou le fichier auquel un lment est li, et vous pouvez ajouter, supprimer ou renommer
un lment.
Pour modifier l'emplacement d'ouverture d'un fichier li ou pour ajouter ou modifier une invite de slection de menu, vous devez appliquer le
comportement Menu de reroutage du panneau Comportements.
439
1. Ouvrez l'inspecteur Proprits (Fentre > Proprits), s'il n'est pas dj ouvert.
2. Dans la fentre de cration du document, cliquez sur l'objet Menu de reroutage pour le slectionner.
3. Dans l'inspecteur Proprits, cliquez sur le bouton Valeurs de la liste.
4. Utilisez la bote de dialogue Valeurs de la liste pour apporter vos modifications aux lments de menu et cliquer sur OK.
Haut de la page
Dpannage des menus de reroutage
Lorsqu'un lment de menu a t slectionn, il n'est plus possible de le slectionner nouveau si le visiteur revient cette page ou si la zone
Ouvrir les URL dans pointe sur un cadre. Il existe deux mthodes pour contourner ce problme :
Utiliser une invite de slection au sein du menu, par exemple une catgorie ou une instruction, du type Faites votre choix .
Une invite de slection au sein du menu est reslectionne aprs chaque slection.
Utiliser un bouton Aller, qui permet l'utilisateur de visiter nouveau le lien dj slectionn. Lorsque vous utilisez un bouton
Aller associ un menu de reroutage, le bouton Aller devient le seul mcanisme permettant l'utilisateur d'accder l'URL
associe la slection dans le menu. La slection d'un lment 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 bote de dialogue Insrer menu de reroutage, vous ne devez slectionner qu'une option pour chaque
menu de reroutage, car elles s'appliquent la totalit du menu de reroutage.
Voir aussi
440
Barres de navigation
A propos des barres de navigation
Haut de la page
A propos des barres de navigation

La fonctionnalit de barre de navigation a t abandonne depuis Dreamweaver CS5.
Adobe recommande d'employer le widget Spry Barre de menus pour crer une barre de navigation.
Voir aussi
Utilisation du widget Barre de menus Spry
441
Cartes graphiques
A propos des cartes graphiques
Insertion de cartes graphiques ct client
Modification des zones ractives d'une carte graphique
Haut de la page
A propos des cartes graphiques
Une carte graphique est une image ayant t divise en rgions appeles zones ractives. Lorsque vous cliquez sur une zone ractive, une
action est excute, par exemple, l'ouverture d'un nouveau fichier.
Les cartes graphiques ct client stockent les informations relatives aux liens hypertextes dans le document HTML, alors que les cartes
graphiques ct serveur conservent ces informations dans un fichier de carte spar. Lorsqu'un visiteur de site clique sur une zone ractive dans
l'image, l'URL associe est envoye directement au serveur. Ceci rend les cartes graphiques ct client plus rapides que leurs quivalents sur le
serveur, car celui-ci n'a pas interprter les coordonnes du point sur lequel l'utilisateur a cliqu. Les cartes graphiques ct client sont prises en
charge par Netscape Navigator 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 rfrences aux cartes graphiques sur le serveur, dans les documents existants. Vous pouvez utiliser les cartes
graphiques ct client et ct serveur dans le mme document. Les navigateurs qui prennent en charge les deux types de cartes donnent la
priorit aux cartes graphiques ct client. Pour inclure une carte graphique sur le serveur dans un document, vous devez crire le code HTML
appropri.
Haut de la page
Insertion de cartes graphiques ct client
Pour insrer une carte graphique ct client, crez une zone ractive, puis dfinissez un lien qui s'ouvre lorsqu'un utilisateur clique sur la zone
ractive.
Remarque : Vous pouvez crer plusieurs zones ractives, mais elles font toutes partie de la mme carte graphique.
1. Slectionnez l'image dans la fentre de document.
2. Dans l'inspecteur Proprits, cliquez sur la flche d'agrandissement situe dans le coin infrieur droit pour visualiser toutes les
proprits.
3. Dans la zone Nom de la carte, entrez un nom unique pour la carte graphique. Si vous utilisez plusieurs cartes graphiques
dans le mme document, veillez donner chaque carte un nom unique.
4. Pour dfinir les zones de la carte graphique, procdez de l'une des manires suivantes :
Slectionnez l'outil Cercle
et faites glisser le pointeur sur l'image pour crer une zone ractive circulaire.
Slectionnez l'outil Rectangle
et faites glisser le pointeur sur l'image pour crer une zone ractive rectangulaire.
Slectionnez l'outil Polygone

pour dfinir une zone ractive de forme irrgulire en cliquant pour chaque point de
segment de droite. Cliquez sur l'outil Flche pour fermer la forme.
Aprs avoir cr la zone ractive, l'inspecteur Proprits de cette zone apparat.
5. Dans la zone Lien de l'inspecteur Proprits de la zone ractive, cliquez sur l'icne du dossier
ouvrir lorsque l'utilisateur clique sur la zone ractive, ou tapez le chemin.
pour rechercher le fichier
6. Dans le menu droulant Cible, choisissez la fentre dans laquelle le fichier devra s'ouvrir ou tapez son nom
Les noms de tous les cadres du document actif apparaissent dans la liste droulante. Si vous spcifiez un cadre inexistant, la
page lie est charge dans une nouvelle fentre portant le nom que vous avez spcifi. Vous pouvez galement choisir parmi
les noms de cible rservs suivants :
_parent charge le fichier li dans le jeu de cadres parent, ou dans la fentre parente du cadre contenant le lien. Si le
cadre contenant le lien n'est pas imbriqu, le document li sera charg dans la fentre de base du navigateur.
_self charge le fichier li dans le mme cadre, ou dans la mme fentre, que le lien. Cette cible tant celle par dfaut,
vous n'avez gnralement pas la spcifier.
_top charge le fichier li dans la fentre de base du navigateur, supprimant ainsi tous les cadres.
Remarque : L'option Cible n'est disponible que lorsque la zone ractive slectionne contient un lien.
442
7. Dans la zone Alt, tapez un texte secondaire afficher dans les navigateurs qui affichent seulement du texte ou qui
tlchargent 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 ractive.
8. Rptez les tapes 4 7 pour dfinir d'autres zones ractives dans la carte graphique.
9. Une fois la dfinition de la carte de l'image termine, cliquez sur une zone vierge du document pour modifier l'inspecteur
Proprits.
Modification des zones ractives d'une carte graphique
Haut de la page
Vous pouvez facilement modifier les zones ractives que vous crez dans une carte graphique. Vous pouvez dplacer un groupe de zones
ractives, redimensionner des zones ractives ou dplacer une zone ractive vers l'avant ou l'arrire dans un lment positionnement absolu.
Vous pouvez galement copier une image contenant des zones ractives d'un document vers un autre ou copier une ou plusieurs zones ractives
d'une image et les coller vers une autre image. Les zones ractives associes l'image sont galement copies vers le nouveau document.
Slection de plusieurs zones ractives dans une carte graphique

1. Utilisez le pointeur de zone ractive pour slectionner une zone ractive.
En maintenant la touche Maj enfonce, cliquez tour tour sur les autres zones ractives slectionner.
Appuyez sur les touches Ctrl+A (Windows) ou Commande+A (Macintosh) pour slectionner toutes les zones ractives.
Dplacement d'une zone ractive

1. Utilisez le pointeur de zone ractive pour slectionner la zone ractive.
Faites glisser la zone ractive vers une nouvelle zone.
Utilisez la touche Ctrl et une touche flche pour dplacer une zone ractive de 10 pixels dans le sens slectionn.
Utilisez les touches flches pour dplacer une zone ractive de 1 pixel dans le sens slectionn.
Redimensionnement d'une zone ractive

1. Utilisez le pointeur de zone ractive
pour slectionner la zone ractive.
2. Faites glisser une poigne de slection de la zone ractive pour modifier la taille ou la forme de celle-ci.
443
Rsolution des problmes lis aux liens

Haut de la page
Utilisez la fonction Vrifier 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 vrifie uniquement les liens qui pointent vers des documents au sein du mme site. Dreamweaver dresse une liste des liens
externes qui apparaissent dans le ou les documents slectionns, mais ne les vrifie pas.
Vous pouvez identifier et supprimer les fichiers qui ne sont plus utiliss par les autres fichiers de votre site.
Vrification des liens au sein du document actif

1. Enregistrez le fichier dans un emplacement de votre site Dreamweaver local.
2. Choisissez Fichier > Vrifier la page > Liens.
Le rapport Liens briss apparat dans le panneau Vrificateur de lien (dans le groupe de panneaux Rsultats).
3. Dans le panneau Vrificateur de lien, slectionnez Liens externes dans le menu droulant Afficher pour afficher un autre
rapport.
Le rapport apparat dans le panneau Vrificateur de lien (dans le groupe de panneaux Rsultats).
Vous pouvez vrifier les fichiers orphelins lorsque vous vrifiez les liens dans un site entier.
4. Pour enregistrer le rapport, cliquez sur le bouton Enregistrer le rapport dans le panneau Vrificateur de lien. Le rapport est un
fichier temporaire ; il sera perdu si vous ne l'enregistrez pas.
Vrification des liens dans une partie d'un site local

1. Dans le panneau Fichiers, choisissez un site dans le menu droulant Sites en cours.
2. Dans Affichage local, slectionnez les fichiers ou les dossiers vrifier.
3. Suivez l'une des procdures suivantes pour accder aux options :
Cliquez avec le bouton droit de la souris (Windows) ou en appuyant sur la touche Contrle (Macintosh) sur l'un des
fichiers slectionns et cliquez sur Vrifier les liens > Fichiers/Dossiers slectionns dans le menu contextuel.
Choisissez Fichier > Vrifier la page > Liens.
4. Dans le panneau Vrificateur de lien, slectionnez Liens externes dans le menu droulant Afficher pour afficher un autre
rapport.
Le rapport apparat dans le panneau Vrificateur de lien (dans le groupe de panneaux Rsultats).
Vous pouvez vrifier les fichiers orphelins lorsque vous vrifiez les liens dans un site entier.
5. Pour enregistrer un rapport, cliquez sur le bouton Enregistrer rapport dans le panneau Vrificateur de lien.
Vrification des liens dans tout le site

1. Dans le panneau Fichiers, choisissez un site dans le menu droulant Sites en cours.
2. Choisissez Site > Vrifier tous les liens du site.
3. Dans le panneau Vrificateur de lien, slectionnez Liens externes ou Fichiers orphelins dans le menu droulant Afficher pour
afficher un autre rapport.
Une liste des fichiers correspondant au type du rapport slectionn s'affiche dans la bote de dialogue Vrificateur de lien.
Remarque : Si vous avez slectionn Fichiers orphelins comme type de rapport, vous pouvez directement supprimer des
444
fichiers orphelins du panneau Vrificateur de lien en slectionnant 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 Vrificateur de lien.
Haut de la page
Une fois le rapport de liens excut, vous pouvez corriger les liens rompus et les rfrences d'images directement dans la bote de dialogue
Vrificateur de lien, ou ouvrir les fichiers de la liste et rparer les liens dans l'inspecteur Proprits.
Correction de liens dans le panneau Vrificateur de lien

1. Excutez un rapport de vrification des liens.
2. Slectionnez le lien rompu dans la colonne Liens briss (pas dans la colonne Fichiers) du panneau Vrificateur de lien (dans
le groupe de panneaux Rsultats).
Une icne de dossier s'affiche ct du lien rompu.
situe en face du lien rompu et naviguez jusqu'au fichier appropri pour le slectionner, ou
3. Cliquez sur l'icne de dossier
entrez le chemin d'accs et le nom de fichier corrects.
4. Appuyez sur Tab ou Entre (Windows) ou Retour (Macintosh).
S'il y a d'autres liens rompus vers le mme fichier, le systme vous invite rparer galement les rfrences dans les autres
fichiers. Cliquez sur Oui pour que Dreamweaver mette jour tous les documents de la liste faisant rfrence ce fichier.
Cliquez sur Non pour que Dreamweaver mette uniquement jour la rfrence actuelle.
Remarque : Si l'option Activer l'archivage et l'extraction de fichier est active pour ce site, Dreamweaver essaie d'extraire les
fichiers qui ncessitent des modifications. S'il ne peut pas extraire un fichier, Dreamweaver affiche un avertissement et laisse
les rfrences rompues inchanges.
Correction de liens dans l'inspecteur Proprits

1. Excutez un rapport de vrification des liens.
2. Double-cliquez sur une entre de la colonne Fichier dans le panneau Vrificateur de lien (dans le groupe de panneaux
Rsultats).
Dreamweaver ouvre le document, slectionne l'image ou le lien rompu, et met en surbrillance le chemin d'accs et le nom de
fichier dans l'inspecteur Proprits (si l'inspecteur Proprits n'est pas ouvert, choisissez Fentre > Proprits pour l'ouvrir).
3. Pour dfinir un nouveau chemin d'accs et un nouveau nom de fichier, tapez directement sur le texte en surbrillance ou
cliquez sur l'icne du dossier
pour naviguer vers le fichier.
Si vous mettez jour une rfrence 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 Proprits pour rinitialiser les valeurs de hauteur et de largeur.
Ds que les liens sont rpars, leur entre disparat de la liste des liens rompus. Si une entre figure toujours dans la liste
aprs que vous avez indiqu un nouveau chemin d'accs ou nom de fichier dans le vrificateur de lien (ou aprs avoir
enregistr des changements apports l'inspecteur Proprits), Dreamweaver ne peut pas trouver le nouveau fichier et
considre toujours que le lien est rompu.
Voir aussi
445
jQuery
446

Les widgets Spry ont t remplacs par des widgets jQuery dans Dreamweaver CC et les versions ultrieures. Bien quil soit toujours possible de
modifier des widgets Spry sur votre page, vous ne pouvez pas ajouter de nouveaux widgets Spry.
Les widgets sont petites applications Web crites dans des langages comme DHTML et
JavaScript et qui peuvent tre insrs et excuts dans une page Web. Les widgets Web
fournissent notamment un moyen dimiter une exprience dordinateur de bureau sur une
page Web.
Les widgets dinterface utilisateur jQuery (par exemple accordon, onglets, slecteur de date,
glissire et saisie automatique) offrent une exprience dordinateur de bureau sur le Web.
Par exemple, le widget onglets peut tre utilis pour rpliquer la fonctionnalit donglet des
botes de dialogue dapplications de bureau.
Didacticiel
Cration de contenus HTML, CSS, jQuery
et PHP 5.4 (15 min)
Dcouvrez comment la dernire prise en
charge de HTML5, CSS3, jQuery et PHP5.4
dans Dreamweaver peut vous aider crer
des projets statiques, dynamiques, mobiles ou
ractifs.
Haut de la page
Insertion dun widget jQuery

Lorsque vous insrez un widget jQuery, les lments suivants sont automatiquement ajouts au code :
Rfrences tous les fichiers dpendants.
Balise de script contenant lAPI jQuery pour le widget. Les widgets supplmentaires sont ajouts la mme balise de script.
Pour plus dinformations sur les widgets jQuery, voir http://jqueryui.com/demos/
Remarque : pour les effets jQuery, aucune rfrence externe jquery-1.8.24.min.js nest ajoute, car ce fichier est automatiquement inclus
lorsque vous ajoutez un effet.
1. Assurez-vous que le curseur se trouve lendroit sur la page o vous voulez insrer le widget.
2. Choisissez Insrer > Interface utilisateur jQuery, puis choisissez le widget que vous souhaitez insrer.
Si vous utilisez le panneau Insertion, les widgets sont prsents dans la section Interface utilisateur jQuery du panneau
Insertion.
Lorsque vous slectionnez un widget jQuery, ses proprits saffichent dans le panneau Proprits.
Vous pouvez prvisualiser les widgets jQuery dans le mode Affichage en direct ou dans un navigateur qui prend en charge les widgets jQuery.
Haut de la page
Modification de widgets jQuery

1. Slectionnez le widget modifier.
2. Dans le panneau Proprits, modifiez les proprits.
Par exemple, pour ajouter un onglet supplmentaire au widget Onglets, slectionnez le widget et cliquez sur + dans le
panneau Proprits.
Didacticiel vido
Utilisation des widgets jQuery dans des pages Web avec Dreamweaver
447

Les effets Spry ont t remplacs par des effets jQuery dans Dreamweaver CC. Bien quil soit toujours possible de modifier des effets Spry sur
votre page, vous ne pouvez pas ajouter de nouveaux effets Spry.

Haut de la page

1. Dans le mode Cration ou Code de votre document Dreamweaver, slectionnez llment auquel vous souhaitez appliquer un
effet jQuery.
2. Choisissez Fentre > Comportements afin douvrir le panneau Comportements.
3. Cliquez sur
, cliquez sur Effets, puis cliquez sur leffet dsir.
Le panneau de personnalisation saffiche et prsente les paramtres de leffet slectionn.

4. Spcifiez les paramtres, tels que llment cible auquel leffet doit sappliquer, ainsi que la dure de leffet.
Llment cible peut tre le mme que llment slectionn initialement ou un autre lment de la page. Par exemple, si vous
souhaitez que les utilisateurs puissent cliquer sur un lment A pour afficher ou masquer un lment B, llment cible est B.
5. Pour ajouter plusieurs effets jQuery, rptez les tapes ci-dessus.
Lorsque vous slectionnez plusieurs effets, Dreamweaver les applique dans lordre o ils sont affichs dans le panneau
Comportements. Pour modifier lordre des effets, utilisez les touches flches dans la partie suprieure du panneau.
Dreamweaver insre automatiquement le code appropri dans votre document. Par exemple, si vous avez slectionn leffet Fondu, le code
suivant est insr :
Rfrences de fichiers externes pour les fichiers dpendants ncessaires au bon fonctionnement des effets jQuery :
<script src="jQueryAssets/jquery-1.7.2.min.js" type="text/javascript"></script><script src="jQueryAssets/jquery-uieffects.custom.min.js" type="text/javascript"></script>
Le code suivant sapplique llment dans la balise body :

<li id="earthFrm" onclick="MM_DW_effectAppearFade($('#earthForms'),'show','fade',1000)"> Earth Forms</li>
Une tiquette de script avec le code suivant est ajoute :

<script type="text/javascript"> function MM_DW_effectAppearFade(obj,method,effect,speed) { obj[method](effect, {},
speed); }</script>
Haut de la page

Lorsque vous appliquez un effet jQuery, il est attribu par dfaut lvnement onClick. Vous pouvez modifier lvnement dclencheur de leffet
laide du panneau Comportements.
448

2. Dans le panneau Fentre > Comportements, cliquez sur licne Afficher les vnements dfinis.
3. Cliquez sur la ligne correspondant leffet qui est actuellement appliqu. Notez que la premire colonne devient une liste
droulante qui contient la liste des vnements que vous pouvez choisir.
4. Cliquez sur lvnement dsir.
Haut de la page

Le panneau Comportements rpertorie tous les effets qui sont actuellement appliqus llment de page slectionn.
2. Slectionnez leffet de travail supprimer puis cliquez sur
449
Prvisualisation
450
Aperu et inspection de pages web sur plusieurs priphriques
Dreamweaver permet dsormais de tester des pages Web sur plusieurs appareils simultanment. Vous
pouvez ainsi observer la mise en forme de chaque page Web en fonction des diffrents formats, mais aussi
tester les fonctionnalits interactives prsentes sur vos pages. Et tout a, sans avoir installer une
application mobile spcifique ni tablir une connexion physique entre les priphriques et votre ordinateur !
Il vous suffit de scanner le code QR gnr automatiquement avec chaque appareil sur lequel vous souhaitez
afficher vos pages web.
Une fois active sur lordinateur, linspection en direct est lance sur tous les priphriques connects, ce qui
vous permet de vrifier les diffrents lments et dajuster votre conception en consquence.
Conditions requises
Priphriques pris en charge
Aperu de pages web sur des priphriques
Inspection de pages web sur des priphriques
Rsolution de problmes lis lAperu sur le priphrique
Voir aussi
Tutoriel vido : Prvisualisation et contrle sur terminaux mobiles
Haut de la page
Conditions requises
Vrifiez que vous avez install un lecteur de code QR sur vos priphriques.
Vrifiez que votre ordinateur et les priphriques mobiles sont connects Internet
et se trouvent sur le mme rseau.
Gardez les informations didentification de votre Adobe ID porte de main : pour
lancer laperu, vous devrez vous connecter aux priphriques en indiquant
lAdobe ID utilis pour Dreamweaver sur votre ordinateur.
Si vous tes un client Entreprise, vrifiez que vous disposez des autorisations
ncessaires pour accder au service Aperu sur le priphrique.
451
Sur les priphriques, assurez-vous que JavaScript et les cookies sont activs
dans les paramtres du navigateur.
Haut de la page
Priphriques pris en charge

Tous les appareils Android et iOS
Haut de la page
Aperu de pages web sur des priphriques

1. Sur votre ordinateur de bureau, lancez Dreamweaver et ouvrez la page web que vous
souhaitez prvisualiser sur des priphriques.
2. Cliquez sur licne Aperu sur le priphrique dans la barre doutils du document.
Icne Aperu sur le priphrique
Une fentre contextuelle intitule Aperu sur le priphrique apparat. Celle-ci comporte
un code QR et une URL abrge.
Fentre contextuelle Aperu sur le priphrique avec code QR et URL abrge
3. Scannez le code QR avec lappareil mobile sur lequel vous souhaitez prvisualiser le
document web. Pour connecter plusieurs appareils, scannez le code QR avec chacun
deux.
Vous pouvez aussi copier ( laide du bouton correspondant) le lien abrg, puis le coller
dans un navigateur sur votre ordinateur.
Option Copier lURL dans la fentre contextuelle Aperu sur le priphrique
452
4. Sur les priphriques, un cran de connexion saffiche. Connectez-vous laide des

informations didentification de votre Adobe ID. Veillez utiliser le mme Adobe ID que
pour les applications Dreamweaver et Creative Cloud.
Ecran de connexion sur les priphriques
5. Une fois la connexion tablie, les noms des appareils connects saffichent dans la
fentre contextuelle Aperu sur le priphrique. Vous pouvez galement voir laperu de
votre page web sur ces priphriques.
Fentre contextuelle Aperu sur le priphrique, indiquant les priphriques connects
Remarque : pour associer un nom dappareil figurant dans la fentre contextuelle au priphrique auquel il
correspond, placez le curseur de la souris sur ce nom. Un cran dinformation saffiche sur le priphrique
correspondant.
Haut de la page
Inspection de pages web sur des priphriques

Pour inspecter la page web sur tous les priphriques connects, cliquez sur licne
Inspecter dans Dreamweaver.
453
Pour inspecter la page web sur un priphrique spcifique, cliquez sur licne Inspecter
en regard du nom de ce priphrique dans la fentre contextuelle Aperu sur le
priphrique. Linspection se lance alors sur cet appareil et dans Dreamweaver, la fentre
daffichage de Dreamweaver tant configure pour reflter celle du priphrique.
Pour quitter le mode Inspection, cliquez nouveau sur licne Inspecter dans Dreamweaver.
Option de dbogage pour certains priphriques connects
Ds leur validation, toutes les modifications apportes la page web sur lordinateur sont immdiatement
rpercutes sur les priphriques.
Haut de la page
Rsolution de problmes lis lAperu sur le priphrique

Si vous rencontrez des problmes lors de la connexion des priphriques ou de laffichage des pages web
sur ces derniers, consultez larticle Aperu sur le priphrique Rsolution des problmes.
454
Prvisualisation des pages

Prvisualisation des pages dans les navigateurs
Le mode Cration vous donne une ide de l'aspect qu'aura votre page sur le Web, mais il ne restitue pas les pages de la mme faon que les
navigateurs. La fonctionnalit Affichage en direct fournit une reprsentation plus prcise et permet de travailler en mode Code, de faon
visualiser les modifications apportes au concept. La fonction Aperu dans le navigateur vous permet de voir la faon dont vos pages vont
s'afficher dans des navigateurs spcifiques.
Haut de la page
A propos de l'affichage en direct

Le mode Affichage en direct diffre du mode Cration traditionnel de Dreamweaver en ce sens quil offre un rendu plus raliste de lapparence de
votre page dans un navigateur, rendu qui peut galement tre modifi. Le mode Affichage en direct ne remplace par la commande Aperu dans le
navigateur, mais propose plutt une manire diffrente de voir quoi ressemble votre page en vrai sans devoir quitter lespace de travail de
Dreamweaver.
Vous pouvez passer l'affichage en direct tout moment lorsque vous vous trouvez en mode Cration. Toutefois, le passage l'affichage en
direct n'a aucun point commun avec le basculement entre les autres modes d'affichage traditionnels de Dreamweaver (Code/Fractionn/Cration).
Lorsque vous passez du mode Cration au mode Affichage en direct, vous vous contentez de faire basculer le mode Cration d'un tat modifiable
un tat en direct .
Bien que le mode Cration soit fig lorsque vous accdez 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 galement dcider 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 excute 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 figer le code JavaScript. Par exemple, vous pouvez passer en mode Affichage
en direct et survoler les lignes d'un tableau bas 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 tat actuel. Vous pouvez ensuite modifier votre code CSS ou JavaScript puis
actualiser la page pour voir l'effet des modifications. Il peut tre utile de figer le code JavaScript dans l'affichage en direct pour voir et modifier les
proprits des diffrents tats d'un menu ou d'autres lments interactifs qu'il est impossible de voir dans le mode Cration traditionnel.
Voir aussi :
Modification en mode Affichage en direct
Prvisualisation des pages en mode Affichage en direct

1. Veillez bien tre en mode Cration (Affichage > Cration) ou en modes Code et Cration (Affichage > Code et Cration).
2. Cliquez sur le bouton Affichage en direct.
3. (Facultatif) Apportez les modifications en mode Affichage du code, dans le panneau Styles CSS, dans une feuille de style
CSS externe ou dans tout autre fichier associ.
Mme sil est impossible dapporter des modifications en mode Affichage en direct, les options de modification dautres
455
endroits (par exemple dans le panneau Styles CSS ou en mode Affichage du code) changent au fur et mesure que vous
cliquez dans le mode Affichage en direct.
Vous pouvez travailler dans des fichiers associs (par exemple des feuilles de style CSS) tout en maintenant le focus sur
le mode Affichage en direct. Pour ce faire, ouvrez le fichier associ partir de la barre doutils Fichiers apparents, dans la
partie suprieure du document.
4. Si vous avez apport des modifications en mode Affichage du code ou dans un fichier associ, actualisez le mode Affichage
en direct en cliquant sur le bouton Actualiser de la barre doutils Document ou en appuyant sur F5.
5. Pour revenir en mode Cration modifiable, cliquez nouveau sur le bouton Affichage en direct.
Prvisualisation du code en direct

Le code affich en mode Code en direct est similaire ce que vous verriez si vous consultiez la source de la page partir d'un navigateur. Alors
que de telles sources de pages sont statiques et ne fournissent que la source de la page partir du navigateur, le mode Code en direct est
dynamique et est mis jour mesure que vous interagissez avec la page en mode Affichage en direct.
1. Veillez 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 excuter la page. Le code est surlign en jaune et ne
peut pas tre modifi.
Lorsque vous interagissez avec des lments interactifs, le mode Code en direct met en surbrillance les modifications
dynamiques apportes au code.
3. Pour dsactiver la mise en surbrillance des modifications dans le mode Code en direct, choisissez Affichage > Options
daffichage en direct > Surligner les modifications dans le code en direct.
4. Pour revenir en mode Affichage du code modifiable, cliquez nouveau sur le bouton Code en direct.
Pour modifier les prfrences du mode Code en direct, choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Mac OS),
puis choisissez la catgorie Coloration du code.
Figer JavaScript
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. Pour fermer la barre d'information, cliquez sur son
lien Fermer.
Options de l'affichage en direct

Outre l'option Figer JavaScript, le menu du bouton Affichage en direct comporte d'autres options, qui sont galement accessibles via le menu
Affichage > Options d'affichage en direct.
Figer JavaScript Fige les lments affects par JavaScript dans leur tat actuel.
456
Dsactiver JavaScript Dsactive JavaScript et rend nouveau la page de la manire dont elle se prsenterait dans un navigateur o JavaScript
serait dsactiv.
Dsactiver les plug-ins Dsactive les plug-ins et rend nouveau la page de la manire dont elle se prsenterait dans un navigateur o les plugins seraient dsactivs.
Surligner les modifications dans le code en direct Active ou dsactive 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 l'aide de la barre d'outils Navigation de l'explorateur ou de la fonctionnalit Suivre le lien. Vous devez tout d'abord
accder au document, puis choisir Modifier la page d'affichage en direct dans un nouvel onglet afin de crer 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 enfonce.
Suivre les liens de manire continue Rend les liens du mode En direct actifs en permanence jusqu' ce que vous les dsactiviez 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'icne 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 synchroniss.
Utiliser le serveur d'valuation pour la source de document Option employe principalement par les pages dynamiques (comme les pages
ColdFusion), active par dfaut pour de telles pages. Lorsque cette option est active, Dreamweaver emploie la version du fichier qui se trouve
sur le serveur d'valuation du site comme source d'affichage en direct.
Utiliser des fichiers locaux pour les liens de documents Rglage par dfaut pour les sites non dynamiques. Lorsque cette option est active
pour des sites dynamiques qui utilisent un serveur d'valuation, Dreamweaver emploie les versions locales des fichiers lis au document (par
exemple les fichiers CSS et JavaScript) au lieu des fichiers stocks sur le serveur d'valuation. Vous pouvez ensuite apporter des modifications
aux fichiers associs, de manire voir leur apparence avant de les placer sur le serveur d'valuation. Si cette option est dsactive,
Dreamweaver emploie les versions des fichiers associs qui se trouvent sur le serveur d'valuation.
Paramtres de demande HTTP Affiche une bote de dialogue de rglages avancs o vous pouvez entrer des valeurs relatives l'affiche de
donnes en direct. Pour plus d'informations, cliquez sur le bouton Aide de la bote de dialogue.
Haut de la page
Prvisualisation des pages dans les navigateurs
Affichage d'un aperu dans un navigateur

Vous pouvez obtenir un aperu d'une page dans un navigateur la demande. Il n'est pas ncessaire de la transfrer au pralable sur un serveur
Web. Lorsque vous affichez un aperu dune page, toutes les fonctions lies au navigateur doivent tre oprationnelles, y compris les
comportements JavaScript, les liens absolus et relatifs au document, les contrles ActiveX et les plug-ins Netscape Navigator, condition que
vous ayez install les plug-ins ou les contrles ActiveX requis dans vos navigateurs.
Avant dafficher un aperu dun document, enregistrez-le, sinon le navigateur naffichera pas vos modifications les plus rcentes.
1. Pour afficher un aperu de la page, procdez de lune des manires suivantes :
Choisissez Fichier > Aperu dans le navigateur, puis slectionnez un navigateur dans la liste.
Remarque : si aucun navigateur ne figure dans la liste, choisissez Edition > Prfrences (Windows) ou Dreamweaver >
Prfrences (Macintosh), puis slectionnez la catgorie Aperu dans le navigateur sur la gauche pour slectionner un
navigateur.
Appuyez sur la touche F12 (Windows) ou Option+F12 (Macintosh) pour afficher la page en cours dans votre navigateur
principal.
Appuyez sur la combinaison de touches Ctrl+F12 (Windows) ou Cmd+F12 (Macintosh) pour afficher la page en cours
457
dans votre navigateur secondaire.

2. Cliquez sur les liens et testez le contenu de votre page.
Remarque : le contenu li un chemin relatif la racine napparat pas lorsque vous lancez laperu de documents dans un
navigateur local, sauf si vous spcifiez un serveur de test ou activez loption Aperu laide dun fichier temporaire dans
Edition > Prfrences > Aperu dans le navigateur. En effet, la diffrence des serveurs, les navigateurs ne reconnaissent
pas les racines de sites.
Pour lancer laperu dun contenu li des chemins relatifs la racine, placez le fichier sur un serveur distant, puis
choisissez Fichier > Aperu dans le navigateur pour lafficher.
3. Lorsque vous avez termin le test, fermez la page dans le navigateur.
Dfinition des prfrences daperu dans un navigateur

Vous pouvez dfinir les prfrences utilises par les navigateurs lors de laffichage de laperu dun site et dfinir les navigateurs principaux et
secondaires.
1. Choisissez Fichier > Aperu dans le navigateur > Modifier la liste des navigateurs.
2. Pour ajouter un navigateur dans la liste, cliquez sur le bouton plus (+), renseignez la bote de dialogue Navigateurs, puis
cliquez sur OK.
3. Pour supprimer un navigateur de la liste, slectionnez-le, puis cliquez sur le bouton moins (-).
4. Pour modifier les paramtres d'un navigateur slectionn, cliquez sur le bouton Modifier, effectuez les modifications dans la
bote de dialogue Modifier le navigateur, puis cliquez sur OK.
5. Slectionnez l'option Navigateur principal ou Navigateur secondaire pour indiquer si le navigateur slectionn 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
Cmd+F12 (Macintosh) pour ouvrir le navigateur secondaire.
6. Slectionnez Aperu l'aide d'un fichier temporaire pour crer une copie temporaire qui sera utilise pour l'aperu et le
dboguage. Dslectionnez cette option si vous souhaitez mettre le document directement jour.

Didacticiel vido sur lutilisation du mode Affichage en direct
458
Codage
459

Langages pris en charge
Marquage non valide
Modification automatique du code
Code XHTML
Code de comportement de serveur
Haut de la page
Langages pris en charge
Adobe Dreamweaver contient la fois des options permettant de lancer des diteurs de texte et des options conues pour vous assister dans
la rdaction 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 spcifiques au langage de Dreamweaver ;
vous pouvez par exemple crer et modifier des fichiers Perl, mais vous ne pourrez pas accder aux conseils de code.
Haut de la page
Marquage non valide
Si votre document contient du code non valide, Dreamweaver l'affiche en mode Cration et, si les options adquates sont actives, le met en
surbrillance en mode Code. Si vous slectionnez ces lments dans l'un des deux modes, l'inspecteur Proprits affiche des informations sur les
causes de leur non-validit et sur la manire de corriger les erreurs.
Remarque : L'option de mise en surbrillance du code non valide en mode Code est dsactive par dfaut. Pour l'activer, passez en mode Code
(Affichage > Code) puis cliquez sur Affichage > Options d'affichage de code > Surligner le code non valide).
Vous pouvez galement indiquer vos prfrences concernant la correction automatique de certains types d'lments de code errons lorsque vous
ouvrez un document.
Haut de la page
Modification automatique du code
Certaines options de Dreamweaver permettent de nettoyer automatiquement votre code selon vos propres critres. Toutefois, le code n'est corrige
que si vous activez les options correspondantes ou si l'une de vos oprations entrane une modification du code. Par exemple, Dreamweaver
modifie vos espaces blancs et la casse des attributs uniquement si vous slectionnez la commande Appliquer le format source.
Quelques-unes des options de rcriture du code sont actives par dfaut.
Les fonctions Roundtrip HTML de Dreamweaver permettent d'changer des documents entre un 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 fonctionnalits, on
compte les suivantes :
Vous pouvez lancer un diteur de texte tiers pour modifier le document actif.
Par dfaut, Dreamweaver ne modifie pas le code cr ou modifi par un autre diteur HTML, mme s'il est incorrect, moins
que vous n'ayez activ les options de rcriture.
En l'absence de critres de rfrence, Dreamweaver conserve telles quelles les balises qu'il ne reconnat pas, notamment les
460
balises XML. Si une balise non reconnue encadre une autre balise (par exemple, <MyNewTag><em>text</MyNewTag></em>),
Dreamweaver la marque comme errone, mais ne modifie pas le code.
Vous pouvez activer certaines options de Dreamweaver pour mettre les lments de code HTML incorrects en surlign (jaune)
dans le mode Code. Si vous slectionnez une section en surbrillance, l'inspecteur Proprits affiche des informations sur
l'erreur et la manire de la corriger.
Haut de la page
Code XHTML
Dreamweaver gnre du nouveau code XHTML et nettoie le code XHTML existant, conformment la plupart des spcifications XHTML. Vous
disposez galement des outils permettant de se conformer aux rares spcifications XHTML ignores lors de ce type d'opration.
Remarque : Certaines de ces spcifications sont galement exiges dans diverses versions du langage HTML.
Le tableau ci-dessous rpertorie les spcifications XHTML automatiquement observes par Dreamweaver :
Spcification XHTML
Actions effectues par Dreamweaver
Une dclaration DOCTYPE doit prcder l'lment racine dans le

document, laquelle doit faire rfrence l'un des trois fichiers DTD
(Document Type Definition) pour XHTML (strict, transitionnel ou jeu
de cadres).
Ajoute une dclaration XHTML DOCTYPE un

document XHTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
Ou, si le document XHTML comporte un jeu de
cadres :
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1frameset.dtd">
L'lment racine du document doit tre html, et l'lmenthtml doit

dsigner l'espace de noms XHTML.
Ajoute l'attribut namespace l'lment html

comme suit :
<html xmlns="http://www.w3.org/1999/xhtml">
Un document standard doit comporter les lments structurels

head, title et body. Un document de jeu de cadres doit comporter
les lments structurels head, title et frameset.
Dans un document standard, inclut les lments

structurels head, title et body. Dans un
document de jeu de cadres, inclut les lments
head, title et frameset.
L'imbrication de tous les lments du document doit tre correcte :
Gnre correctement le code imbriqu et,

pendant le nettoyage du code XHTML, corrige
l'imbrication du code non gnr par
Dreamweaver.
<p>Voici un <i>exemple incorrect.</p></i> <p>Voici un <i>exemple

incorrect.</i></p>
Tous les noms d'lments et d'attributs doivent tre rdigs en
minuscules.
Impose l'usage des minuscules dans les noms

d'lments et d'attributs HTML du code XHTML
gnr par ses soins et pendant le nettoyage du
code XHTML, indpendamment des prfrences
de casse dfinies pour la balise et l'attribut.
Tous les lments doivent se terminer par une balise de fin,

moins qu'ils ne soient dclars dans le fichier DTD comme EMPTY.
Insre des balises de fin dans le code gnr

par ses soins, ainsi que pendant le nettoyage du
code XHTML.
Les lments vides doivent se terminer par une balise de fin ou la

balise de dbut doit tre ferme avec le code />. Par exemple, <br>
est incorrect ; la forme correcte de la balise est soit <br></br>,
soit <br/>. Les lments vides sont les suivants : area, base,
basefont, br, col, frame, hr, img, input, isindex, link, meta et param.
Insre les lments vides avec un espace avant

la barre oblique de fermeture des balises vides
dans le code gnr par ses soins ainsi que
pendant le nettoyage du code XHTML.
Pour garantir la rtrocompatibilit avec les navigateurs non XML, un

espace doit prcder le code /> (par exemple, <br /> et non<br/>).
Insre des paires attribut/valeur compltes dans
le code gnr par ses soins, ainsi que pendant
le nettoyage du code XHTML.
Il est impossible d'abrger les attributs ; ainsi, <td nowrap> est

incorrect ; la forme correcte est <td nowrap="nowrap">.
Cette rgle 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
interprter ces attributs boolens sous leur forme
461
complte.
Tous les attributs doivent tre placs entre guillemets.
Met les valeurs d'attribut entre guillemets dans

le code gnr par ses soins, ainsi que pendant
le nettoyage du code XHTML.
Les lments suivants doivent comporter un attribut id et un attribut

name : a, applet, form, frame, iframe, img et map. Par exemple, <a
name="intro">Introduction</a> est incorrect ; la forme correcte est
Affecte la mme valeur aux attributs name et id,

toutes les fois o l'attribut name est dfini par un
inspecteur Proprits, dans le code gnr par
Dreamweaver, ainsi que pendant le nettoyage
du code XHTML.
<a id="intro">Introduction</a> ou <a id="section1" name="intro">

Introduction</a>.
Dans le cas d'attributs dont les valeurs sont de type Enumr,
celles-ci doivent figurer en minuscules.
Une valeur de type Enumr est une valeur appartenant une liste
donne de valeurs autorises ; par exemple, l'attribut align
comprend les valeurs autorises suivantes : center, justify, left et
right.
Tous les lments de script et de style doivent comporter un attribut
type.
(La ncessit de l'attribut de type d'un lment de script a t
introduite avec HTML 4, lors de la dprciation de l'attribut de
language.)
Tous les lments img et area doivent comprendre un attribut alt.
Impose l'utilisation des minuscules pour les

valeurs de type Enumr dans le code gnr
par ses soins, ainsi que pendant le nettoyage du
code XHTML.
Dfinit les attributs de typeet de langage dans

les lments de script ainsi que l'attribut de type
dans les lments de style, mais aussi dans le
code gnr par ses soins et pendant le
nettoyage du code XHTML.
Dfinit ces attributs dans le code gnr par ses
soins et, pendant le nettoyage du code XHTML,
signale les attributs alt manquants.
Haut de la page
Les expressions rgulires sont des modles dcrivant des combinaisons de caractres dans un texte. Utilisez-les dans vos recherches pour
dcrire des concepts tels que lignes commenant par var' ou valeurs d'attribut contenant un nombre .
Le tableau ci-dessous prsente les caractres spciaux des expressions rgulires, leur signification et des exemples d'utilisation. Pour rechercher
du texte contenant un des caractres spciaux prsents dans le tableau, indiquez qu'il s'agit d'un caractre spcial l'aide d'une barre oblique
inverse. Par exemple, pour rechercher l'astrisque dans la phrase conditions spciales*, vous pouvez utiliser un modle de recherche tel que
celui-ci : spciales\*. Si vous n'indiquez pas l'astrisque comme caractre spcial, vous trouverez toutes les occurrences de spciales (de
mme que spciale , spcialess et spcialesss ), et pas seulement celles qui sont suivies d'un astrisque.
Caractre
trouve
Exemple
Dbut de saisie ou de ligne.
^T trouve T
dans Tonnerre
de Brest , mais
pas dans La
case de l'oncle
Tom
Fin de saisie ou de ligne.
n$ trouve n
dans malin
mais pas dans
noir
Le caractre prcdent, 0 ou plusieurs fois.
um* trouve um
dans rhum ,
umm dans
yummy et
u dans
bouge
Le caractre prcdent, 1 ou plusieurs fois.
um+ trouve um
dans rhum ,
umm dans
yummy mais
rien dans
bouge
462
Le caractre prcdent, une fois au maximum (en d'autres termes, le

caractre prcdent est facultatif).
st?on trouve
son dans
Johnson et
ston dans
Johnston , mais
rien dans
Appleton ou
tension
Tout caractre, sauf une nouvelle ligne (retour la ligne).
.an trouve ran ,

tan et lan
dans le mot
rantanplan
x|y
Soit x, soit y.
FF0000|0000FF
trouve FF0000
dans
bgcolor="#FF0000"
et 0000FF
dans font
color="#0000FF"
{n}
Exactement n occurrences du caractre prcdent.
l{2} trouve ll
dans elle et les
deux premiers l de
ellllle , mais ne
trouve rien dans
lger
{n,m}
Au moins n et au plus m occurrences du caractre prcdent.
F{2,4} trouve
FF dans
#FF0000 et les
quatre premiers F
dans #FFFFFF
[abc]
L'un des caractres entours de crochets. Spcifiez une plage de

caractres l'aide d'un trait d'union (par exemple, [a-f] quivaut
[abcdef]).
[e-g] trouve e
dans il , f
dans fil et
g dans
garde
[âbc]
Tout caractre non inclus entre les crochets. Spcifiez une plage de
caractres l'aide d'un trait d'union (par exemple, [â-f] quivaut
[âbcdef]).
[âeiou] trouve
initialement r
dans orange ,
b dans
balle et k
dans eek!
\b
Limite de mot (par exemple un espace ou un retour chariot).
\bb trouve b
dans balle
mais pas dans
gober ou
snob
\B
Tous les lments sauf les limites de mot
\Bb trouve b
dans gober
mais pas dans
balle
\d
Tout chiffre. C'est l'quivalent de [0-9].
\d trouve 3
dans C3PO et
2 dans
appartement
2G .
\D
Tout caractre alphabtique et non numrique. C'est l'quivalent de [^09].
\D trouve S
dans 900S et
Q dans
Q45 .
\f
Saut de page.
463
\n
Saut de ligne.
\r
Retour chariot.
\s
Tout espace blanc , ou caractre d'espacement : espace, tabulation,

saut de page ou saut de ligne.
\sval trouve val

dans le val
Andr mais pas
dans aval
\S
Tout caractre autre qu'un espace blanc.
\Sval trouve val

dans aval ,
mais pas dans le
val Andr
\t
Tabulation.
\w
Tout caractre alphanumrique, y compris le caractre de soulignement.

C'est l'quivalent de [A-Za-z0-9_].
c\w* trouve
chien dans le
chien noir , ainsi
que cou et
chien dans le
cou du chien
noir .
\W
Tout caractre non alphanumrique. C'est l'quivalent de [Â-Za-z0-9_].
\W trouve &
dans
Tintin&Milou et
% dans
100% .
Ctrl+Entre ou
Maj+Entre
(Windows), ou
Contrle+ Retour
ou Maj+Retour ou
Commande+Retour
(Macintosh)
Retour chariot. Veillez dsactiver l'option Ignorer les diffrences entre les
espaces blancs lorsque vous effectuez ce type de recherche si vous
n'utilisez pas des expressions rgulires. Notez que cette recherche porte
sur un caractre particulier et non sur la notion de retour la ligne ; par
exemple, elle ne trouvera pas une balise <br> ou <p>. Les caractres de
retour chariot apparaissent en tant qu'espaces en mode Cration, et non
en tant que sauts de ligne.
Utilisez des parenthses pour dfinir au sein de l'expression rgulire des groupes auxquels il sera fait rfrence plus tard ; utilisez $1, $2, $3,
etc. dans le champ Remplacer pour faire rfrence au premier, deuxime, troisime, etc., groupe entre parenthses.
Remarque : Dans la zone de texte Rechercher, faites rfrence au groupe entre parenthses mentionn plus tt dans l'expression rgulire en
indiquant \1, \2, \3 etc. au lieu de $1, $2, $3.
Par exemple, la recherche de (\d+)\/(\d+)\/(\d+) et le remplacement par $2/$1/$3 changent le jour et le mois dans une date spare par des
barres obliques permettant ainsi la conversion entre les dates de style amricain et les dates de style europen.
Haut de la page
Code de comportement de serveur
Lorsque vous slectionnez un comportement de serveur dans le panneau Comportements de serveur pendant le dveloppement d'une page
dynamique, Dreamweaver insre 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 dtecte les comportements
de serveur en se reprant des modles de code spcifiques dans la page, puis les affiche dans le panneau correspondant. Toute modification
du code d'un bloc de code empche ds lors Dreamweaver de dtecter 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.
Voir aussi
464
Configuration de votre environnement de codage

Utilisation d'espaces de travail orients codeur
Affichage du code
Ouverture de fichiers en mode Code par dfaut
Haut de la page
Utilisation d'espaces de travail orients codeur
Vous pouvez modifier l'environnement de codage de Dreamweaver pour l'adapter la faon dont vous travaillez. Vous pouvez par exemple
changer le mode d'affichage du code, dfinir diffrents raccourcis clavier ou importer et utiliser votre bibliothque de balises de prdilection.
Dreamweaver est fourni avec plusieurs dispositions d'espace de travail conues pour offrir une exprience de codage optimale. La fonction
Commutation d'espace de travail de la barre Application vous permet de slectionner l'un des espaces de travail suivants : Dveloppeur
d'applications, Dveloppeur d'applications Plus, Codeur et Codeur Plus. Tous ces espaces de travail s'affichent par dfaut en mode Code (dans la
fentre de document tout entire ou en modes Code et Cration) et comportent des panneaux ancrs du ct gauche de l'cran. A l'exception de
Dveloppeur d'applications Plus, ils liminent tous l'inspecteur Proprits de l'affichage par dfaut.
Si aucun des espaces de travail prdfinis ne rpond prcisment 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.
Haut de la page
Affichage du code
Vous pouvez visualiser le code source du document actif de plusieurs faons : en l'affichant dans la fentre de document aprs avoir activ le
mode Code, en fractionnant la fentre de document pour afficher la fois la page et son code, ou encore en travaillant dans l'Inspecteur de code,
qui forme une fentre de code distincte. L'inspecteur de code fonctionne comme le mode Code; il peut tre considr comme un mode Code
dtachable pour le document actif.
Affichage du code dans la fentre de document

Codage et modification simultane d'une page dans la fentre de document

1. Choisissez Affichage > Code et cration.
Le code apparat dans le volet suprieur, et la page dans le volet infrieur.
2. Pour afficher la page au premier plan, choisissez Mode Cration au premier plan dans le menu Affichage de la barre d'outils
du document.
3. Pour redimensionner les volets dans la fentre de document, faites glisser la barre de division l'endroit appropri. La barre
de division est intercale entre les deux volets.
Toutes les modifications apportes dans le mode Cration se rpercutent automatiquement dans le mode Code. Toutefois,
aprs avoir effectu des modifications en mode Code, vous devez mettre jour manuellement le document dans le mode
Cration ; il vous suffit pour cela de cliquer dans ce mode ou d'appuyer sur la touche F5.
Affichage du code dans une fentre distincte dans l'inspecteur de code

L'inspecteur de code permet de travailler dans une fentre de code distincte, comme vous le faites en mode Code.
Choisissez Fentre > Inspecteur de code. La barre d'outils contient les options suivantes :
Gestion des fichiers Permet de placer ou d'acqurir le fichier.
Aperu/Dbogage dans le navigateur Permet de prvisualiser ou de dboguer votre document dans un navigateur.
Actualiser mode Cration Met jour le document en mode Cration, de faon ce qu'il applique les modifications apportes dans le code. Les
modifications apportes dans le code n'apparaissent pas automatiquement dans le mode Cration : vous devez excuter tout d'abord certaines
oprations, comme enregistrer le fichier ou utiliser ce bouton.
Rfrence Ouvre le panneau Rfrence. Consultez la section Utilisation des documents de rfrence sur les langages.
Navigation par code Permet de se dplacer rapidement dans le code. Consultez la section Accs une fonction JavaScript ou VBScript.
Afficher les options Permet de dterminer la faon dont le code est affich. Consultez la section Dfinition de l'apparence du code.
Pour utiliser la barre de codage situe dans la partie gauche de la fentre, consultez la section Insertion de code avec la barre d'outils de codage.
465
Haut de la page
Rien ne vous empche d'utiliser vos raccourcis clavier prfrs dans Dreamweaver. Si vous tes habitu utiliser des raccourcis clavier
spcifiques (par exemple, Maj+Entre pour insrer un saut de ligne, Ctrl+G pour atteindre un code prcis), vous pouvez les intgrer dans
Dreamweaver au moyen de l'diteur de raccourcis clavier.
Pour plus d'informations, reportez-vous la section Personnalisation des raccourcis clavier.
Haut de la page
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 Cration. Vous pouvez dfinir les types de fichiers ouvrir en mode Code.
2. Slectionnez la catgorie 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.
Insrez un espace entre les extensions. Vous pouvez en ajouter autant que vous le souhaitez.
Voir aussi
466

A propos des prfrences de codage
Dfinition de lapparence du code
Modification du format du code
Dfinition des prfrences de correction de code
Dfinition du thme de couleur pour le mode Code
Utilisation dun diteur externe

Haut de la page
A propos des prfrences de codage

Vous pouvez dfinir des prfrences de codage, par exemple le formatage du code ou la mise en couleurs,
en fonction de vos besoins.
Remarque : pour dfinir les prfrences avances, utilisez lditeur de la bibliothque de balises (voir
Gestion des bibliothques de balises).
Haut de la page
Dfinition de lapparence du code

Le menu Affichage > Options daffichage de code permet de configurer le renvoi la ligne des mots,
laffichage du numro des lignes de code, la mise en surbrillance du code HTML incorrect, la coloration de la
syntaxe des lments de code, la mise en retrait du code, ainsi que laffichage des caractres masqus.
1. Affichez le document en mode Code ou dans lInspecteur de code.
Choisissez Affichage > Options daffichage de code
Cliquez sur le bouton Options daffichage
mode Code ou de lInspecteur de code.
dans la barre doutils situe en haut du
3. Activez ou dsactivez lune des options suivantes :
Renvoi la ligne Renvoie le code la ligne pour le rendre visible sans quil soit
ncessaire de le faire dfiler horizontalement. Cette option ninsre aucun saut de ligne ;
elle a pour seule fonction de simplifier la consultation du code.
Numros de lignes Affiche le numro des lignes de code sur le ct.
Caractres masqus Permet dafficher les caractres spciaux au lieu dun simple
467
espace blanc. Par exemple, un point apparat pour masquer chaque espace, un double
chevron remplace chaque tabulation, et une marque de paragraphe remplace chaque
saut de ligne.
Remarque : les retours la ligne contextuels que Dreamweaver utilise pour le renvoi du
texte la ligne ne sont pas symboliss par une marque de paragraphe.
Surligner le code non valide Dans Dreamweaver, active le surlignage en jaune du

code HTML non valide. Ds la slection dune balise incorrecte, linspecteur Proprits
affiche des instructions pour corriger lerreur.
Coloration de la syntaxe Active ou dsactive la mise en couleurs du code. Pour plus

dinformations sur la modification du modle de coloration appliquer, voir Dfinition des
couleurs du code.
Retrait auto Automatise la mise en retrait du code lorsque vous appuyez sur la touche
Entre pendant la rdaction du code. La nouvelle ligne de code saligne au mme niveau
que la ligne qui la prcde. Pour plus dinformations sur la modification de lespacement
du retrait, voir loption Taille de tabulation dans Modification du format du code.
Haut de la page

Vous pouvez modifier laspect de votre code en dfinissant des prfrences de formatage telles que la mise
en retrait, la longueur de ligne et la casse des noms de balises et dattributs.
Toutes les options de formatage de code, lexception de loption Remplacer la casse de, ne sappliquent
automatiquement quaux nouveaux documents et aux ajouts des documents que vous crez par la suite.
Pour modifier le formatage dun document HTML existant, ouvrez ce document puis cliquez sur
Commandes > Appliquer le format source.
2. Slectionnez la catgorie Format du code dans la liste de gauche.
Retrait Indique si le code gnr par Dreamweaver doit tre mis en retrait (en
conformit avec les rgles de retrait dfinies dans ces prfrences).
Remarque : la majorit des options de retrait de cette bote de dialogue ne sappliquent
quau code gnr par Dreamweaver et non au code entr par vos soins. Pour que
chaque nouvelle ligne entre saligne au mme niveau que la prcdente, slectionnez
Afficher > Option daffichage de code, option Retrait auto. Pour plus dinformations, voir
Dfinition de lapparence du code.
Avec (Zone de texte ou menu contextuel) Spcifie le nombre despaces ou de

tabulations que Dreamweaver doit utiliser afin de mettre en retrait le code gnr. Par
exemple, si vous tapez 3 dans la zone de texte et si vous slectionnez Tabulations dans
le menu contextuel, le code gnr par Dreamweaver sera mis en retrait de trois
tabulations chaque niveau de mise en retrait.
Taille de la tabulation Dtermine la taille, en caractres, de chaque tabulation en mode

Code. Par exemple, si cette taille est dfinie sur 4, chaque tabulation saffiche en mode
Code sous la forme dun espace long de 4 caractres. De plus, si la taille du retrait est
dfinie sur 3 et que les caractres utiliss sont des tabulations, le code gnr par
Dreamweaver est mis en retrait de trois tabulations par niveau de mise en retrait, ce qui
correspond un espace de 12 caractres en mode Code.
468
Remarque : Dreamweaver effectue les mises en retrait laide de tabulations ou

despaces mais ne convertit pas une srie despaces en tabulation lors de linsertion de
code.
Type de saut de ligne Permet dindiquer le type de serveur distant (Windows,

Macintosh ou UNIX) qui hbergera votre site. Le choix du type de caractres de saut de
ligne appropri (CR, CR/LF, LF) garantit que votre code source HTML saffiche
correctement lorsquil est affich partir du serveur distant. Ce paramtre est galement
utile lorsque vous travaillez avec un diteur de texte externe qui ne reconnat que
certains types de retours de chariot. Par exemple, utilisez CR/LF (Windows), si votre
diteur de texte est le Bloc-notes de Windows, et CR (Macintosh) sil sagit de
SimpleText.
Remarque : pour les serveurs auxquels vous vous connectez via FTP, cette option ne
sapplique quen mode de transfert binaire ; le mode de transfert ASCII de Dreamweaver
ignore cette option. Si vous tlchargez (en rception) des fichiers en mode ASCII,
Dreamweaver dfinit les sauts de ligne en fonction du systme dexploitation de votre
ordinateur ; si vous transfrez des fichiers en mode ASCII, les sauts de ligne sont
toujours dfinis comme CR/LF.
Casse de balise par dfaut et casse dattribut par dfaut Contrlez la capitalisation
des noms de balises et dattributs. Ces options sappliquent aux balises et aux attributs
que vous insrez ou que vous modifiez en mode Cration, mais pas aux balises ou
attributs que vous entrez directement en mode Code, ni aux balises ou attributs dj
contenus dans un document que vous ouvrez (sauf, dans ce dernier cas, si vous avez
galement activ lune des options Remplacer la casse de).
Remarque : cette prfrence sapplique uniquement aux pages HTML. Dreamweaver
lignore pour les pages XHTML tant donn que les balises et les attributs en majuscules
sont incorrects dans XHTML.
Remplacer la casse de : Balises et Attributs Spcifie sil faut toujours convertir les
noms de balises et dattributs dans la casse spcifie, mme lors de louverture dun
document HTML existant. Lorsque vous activez lune de ces options et que vous cliquez
sur OK pour fermer la bote de dialogue, les balises et les attributs du document actif
sont immdiatement convertis dans la casse indique et il en sera de mme dans tous
les documents que vous ouvrirez par la suite (du moins tant que vous naurez pas
dsactiv cette option). Les balises et les attributs que vous tapez en mode Code ou
dans Quick Tag Editor ou bien que vous insrez partir du panneau Insertion, sont
galement convertis dans la casse spcifie. Par exemple, si vous voulez que les noms
des balises soient toujours convertis en minuscules, spcifiez minuscules dans loption
Casse de balise par dfaut et activez loption Remplacer la casse de : Balises. Lorsque
vous ouvrez ensuite un document contenant des noms de balises en majuscules,
Dreamweaver les convertit en minuscules.
Remarque : danciennes versions du code HTML permettaient dcrire les noms
dattributs et les balises en majuscules ou en minuscules, mais le XHTML requiert des
minuscules. Lusage du XHTML tant de plus en plus rpandu, il est conseill dutiliser
des minuscules pour ces lments.
Balise TD : Ne pas inclure de saut de ligne dans la balise TD Rsout un problme

de rendu qui se rencontre dans certains anciens navigateurs, si un espace blanc ou des
sauts de ligne sont placs immdiatement aprs une balise <td> ou juste avant une
balise </td>. Si vous activez cette option, Dreamweaver ne place pas de saut de ligne
aprs une balise <td> ou avant une balise </td>, mme si le formatage de la
bibliothque de balises indique quun saut de ligne devrait tre insr.
Formatage avanc Permet de dfinir des options de mise en forme pour le code CSS
(Cascading Style Sheets, feuilles de style en cascade) et pour les diffrents attributs et
balises dans lditeur de la bibliothque de balises.
469
Espace blanc (Version japonaise uniquement) Permet de slectionner un espace

inscable ( ) ou un espace Zenkaku pour votre code HTML. Lespace blanc
slectionn avec cette option est utilis pour les balises vides lors de la cration dun
tableau et lorsque loption Autoriser plusieurs espaces conscutifs est active dans
les pages de codage japonaises.
Haut de la page
Dfinition des prfrences de correction de code

Les prfrences de correction de code permettent de spcifier les prfrences de modification de code par
Dreamweaver lors de louverture de documents, lorsque vous copiez et collez des lments de formulaires ou
que vous entrez des valeurs et adresses URL laide des outils (par exemple, linspecteur Proprits). Ces
prfrences sont sans effet lorsque vous modifiez du code HTML ou des scripts en mode Code.
Si vous dsactivez ces options de correction, les lments de marquage non valides sont affichs dans la
fentre de document pour le code HTML quil aurait corrig.
(Macintosh).
2. Slectionnez la catgorie Correction du code dans la liste de gauche.
Corriger les balises incorrectement imbriques et non fermes Corrige les balises
qui se chevauchent. Par exemple, <b><i>texte</b></i> est rcrit comme
<b><i>texte</i></b>. Cette option insre galement des guillemets et des crochets
de fermeture sils sont absents.
Renommer les lments de formulaire lors du collage Garantit labsence de noms

dobjets de formulaire en double. Cette option est active par dfaut.
Remarque : contrairement dautres options de cette bote de dialogue de prfrences,
cette option ne sapplique pas louverture dun document, mais uniquement lorsque
vous copiez et collez un lment de formulaire.
Supprimer les balises de fermeture superflues Supprime les balises de fermeture

auxquelles ne correspond aucune balise douverture.
Mavertir lors de la correction ou de la suppression de balises Affiche un

rcapitulatif des codes HTML techniquement non valides que Dreamweaver a tent de
corriger. Ce rcapitulatif indique lemplacement du problme ( laide des numros de
ligne et de colonne), pour vous permettre de vrifier la correction et veiller ce quelle
produise leffet voulu.
Ne jamais corriger le code : Dans les fichiers avec extensions Permet dempcher
Dreamweaver de corriger le code dans les fichiers portant les extensions indiques.
Cette option est particulirement utile pour les fichiers contenant des balises
propritaires.
Coder <, >, & et " dans les valeurs dattributs laide de & Garantit que les valeurs
dattribut entres ou modifies laide des outils Dreamweaver (par exemple, linspecteur
Proprits) ne contiennent que des caractres autoriss. Cette option est active par
dfaut.
Remarque : cette option et les options suivantes ne sappliquent pas aux adresses URL
entres en mode Code. De plus, ces options nentranent pas de modification dans le
code dj prsent dans un fichier.
470
Ne pas coder les caractres spciaux Empche toute modification des adresses URL
par Dreamweaver en vue de nutiliser que des caractres autoriss. Cette option est
active par dfaut.
Coder caractres spciaux dans les URL laide de &# Garantit que, lorsque vous
entrez ou modifiez des adresses URL laide des outils Dreamweaver (par exemple,
linspecteur Proprits), ces URL ne contiennent que des caractres autoriss.
Coder caractres spciaux dans les URL laide de % Fonctionne de faon

identique loption ci-dessus, mais utilise une autre mthode pour coder les caractres
spciaux. Cette mthode de codage ( laide du signe %) offre une meilleure
compatibilit avec les navigateurs plus anciens, mais ne se montre pas aussi efficace
avec les caractres utiliss dans certaines langues.
Haut de la page
Dfinition du thme de couleur pour le mode Code
Utilisez les prfrences de couleur du code pour spcifier un thme pour le mode Code. Vous pouvez
personnaliser le thme en slectionnant des modles de couleurs pour les arrire-plans, les premiers plans et
les caractres masqus.
Pour chaque type de document rpertori, vous pouvez personnaliser les couleurs pour diffrentes catgories
de balises et lments de code, par exemple les balises associes aux formulaires ou les identificateurs
JavaScript. Par exemple, avec le thme Raven appliqu tous les types de document, vous pouvez
slectionner une couleur bleue pour les balises associes au formulaire dans les documents HTML
uniquement.
Tous les paramtres personnaliss dans un thme sont enregistrs lorsque vous cliquez sur Appliquer et le
thme personnalis peut tre utilis dans les diffrentes sessions de Dreamweaver.
Remarque : pour dfinir les prfrences de coloration dune balise spcifique, modifiez sa dfinition dans
lditeur de la bibliothque de balises.
Personnalisation des thmes

Le thme par dfaut est Classique. Pour modifier ou personnaliser un thme, procdez comme suit :
(Macintosh).
2. Slectionnez la catgorie Coloration du code dans la liste de gauche.
3. Slectionnez un thme dans la liste des thmes.
471
Thmes prts lemploi du mode Code
4. Si vous souhaitez personnaliser le thme, procdez comme suit :

1. Pour modifier les couleurs darrire-plan, utilisez les options suivantes :
Arrire-plan par dfaut permet de dfinir la couleur darrire-plan par dfaut pour
le mode Code et pour lInspecteur de code.
Caractres masqus dfinit la couleur des caractres masqus.
Arrire-plan du code en direct dfinit la couleur darrire-plan du mode Code en

direct. La couleur par dfaut est le jaune.
Modifications du code en direct dfinit la couleur de surbrillance du code qui est

modifi en mode Code en direct. La couleur par dfaut est le rose.
Arrire-plan en lecture seule dfinit la couleur darrire-plan du texte en lecture

seule.
Arrire-plan de slection Dfinit la couleur darrire-plan du code slectionn.
Premier plan de slection Dfinit la couleur de premier plan du code slectionn.

2. Pour modifier le modle de coloration de catgories de balises ou dlments de
code spcifiques, slectionnez un type de document dans la liste Type de document.
Cliquez ensuite sur Modifier les couleurs du thme.
Remarque : les modifications que vous apportez au modle de coloration du code
dun type de document slectionn affecte tous les documents de ce type.
Dans la bote de dialogue Modifier le modle de coloration, choisissez un lment de
code dans la liste Styles, puis dfinissez la couleur du texte, la couleur darrire-plan
et ventuellement le style (gras, italique ou soulign). Lchantillon de code affich
472
dans le volet daperu est modifi pour correspondre aux nouveaux styles et
couleurs.
Modification du modle de couleurs pour le type de document HTML
3. Pour rtablir les paramtres par dfaut dun thme, cliquez sur Restaurer les
paramtres par dfaut.
5. Cliquez sur Appliquer pour enregistrer les modifications.
Loption Synchroniser les paramtres, dans les prfrences, permet de conserver la synchronisation des
thmes de code personnaliss entre les diffrentes instances de Dreamweaver. Pour plus dinformations,
voir Synchronisation des paramtres de Dreamweaver avec Creative Cloud.
Ajout de thmes la liste par dfaut

Si vous voulez quun thme personnalis soit ajout la liste des thmes par dfaut, effectuez la procdure
suivante :
1. Copiez et collez le fichier Themes.xml sur votre poste local depuis lemplacement
suivant :
Windows : C:\Program Files\Adobe\Adobe Dreamweaver CC
2015\configuration\themes
Mac : Applications/Adobe Dreamweaver CC 2015/configuration/themes/
2. Ouvrez le fichier Themes.xml dans le Bloc-notes et ajoutez la ligne suivante juste avant
la balise de fermeture <theme> :
<theme name="MyTheme"></theme>
3. Remplacez le fichier Themes.xml par celui que vous venez dditer dans le dossier
suivant :
473

4. Pour dfinir le modle de couleurs associ votre thme, rutilisez les fichiers XML des
thmes existants dans les emplacements suivants :
Par exemple, copiez les fichiers Raven.xml et defaultColorsRaven.xml, puis renommez
les fichiers copis en MyTheme.xml et defaultColorsMyTheme.xml.
5. Relancez Dreamweaver et rouvrez la liste des thmes par dfaut (Prfrences >
Coloration du code) pour voir si votre thme y figure.
Haut de la page
Utilisation dun diteur externe

Vous pouvez spcifier un diteur externe utiliser pour ldition de fichiers possdant des extensions
prcises. Par exemple, vous pouvez lancer un diteur de texte comme BBEdit, le Bloc-Notes ou TextEdit
partir de Dreamweaver pour modifier les fichiers JavaScript (JS).
Vous pouvez attribuer diffrents diteurs externes pour diffrentes extensions de nom de fichier.
Dfinition dun diteur externe pour un type de fichier

2. Slectionnez la catgorie Types de fichiers/Editeurs dans la liste de gauche, puis cliquez
sur OK.
Ouvrir en mode Code Prcise les extensions de noms de fichiers ouvrir

automatiquement en mode Code dans Dreamweaver.
Editeur de code externe Spcifie lditeur de texte utiliser.
Recharger les fichiers modifis Permet dindiquer ce que Dreamweaver doit faire
lorsquil dtecte que des changements ont t apports de lextrieur un document
dj ouvert dans Dreamweaver.
Enregistrer au dmarrage Permet dindiquer si Dreamweaver doit systmatiquement

enregistrer le document actif avant de lancer lditeur, ne jamais enregistrer le document
ou vous demander sil doit lenregistrer ou non chaque lancement de lditeur externe.
Fireworks Spcifiez les diteurs pour divers types de fichiers multimdia.
Dmarrage dun diteur de code externe

Choisissez Edition > Modifier avec diteur externe.

Affichage du code
Dfinition des prfrences dindicateurs de code
474

Personnalisation des prfrences de coloration de code dun modle
Modification de bibliothques, de balises et dattributs
Prvisualisation du code en direct
475
Rdaction et modification de code

Conseils de code
Conseils de code spcifiques au site
Insertion de code laide de la barre doutils de codage
Insertion de code l'aide du panneau Insertion
Insertion de code l'aide d'Emmet
Insertion de balises avec le Slecteur de balises
Insertion de commentaires HTML
Copie et collage de code
Aperu des images et des couleurs en mode Code
Analyse du code
Modification de balises avec des diteurs de balises
Modification de code l'aide du menu Codage
Modification d'une balise de langage de serveur l'aide de l'inspecteur Proprits
Mise en retrait des blocs de code
Accs une fonction JavaScript ou VBScript
Extraction de JavaScript
Manipulation de fragments de code
Recherche de balises, d'attributs ou de chanes de texte dans le code
Enregistrement et chargement de modles de recherche
Utilisation des documents de rfrence sur les langages
Impression de code
Tutoriel vido
Haut de la page
Conseils de code
Les conseils de code vous permettent d'insrer et de modifier le code rapidement et sans erreur de saisie.
mesure que vous tapez des caractres en mode Code, une liste de suggestions s'affiche et vous aide
complter votre saisie. Par exemple, lorsque vous tapez les premiers caractres du nom d'une balise, d'un
attribut ou d'une proprit CSS, une liste d'options dont le nom commence par ces caractres s'affiche. Cette
fonctionnalit facilite l'insertion et la modification de code. Vous pouvez galement l'utiliser pour consulter les
attributs disponibles pour une balise, les paramtres d'une fonction ou les mthodes d'un objet.
Les conseils de code sont disponibles pour diffrents types de code. Lorsque vous tapez le premier caractre
d'un type de code prcis, 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 (<). De mme, pour afficher des conseils
de code pour JavaScript, tapez un point aprs un objet.
Pour exploiter pleinement cette fonctionnalit, en particulier lorsque vous l'utilisez pour des fonctions et
des objets, dfinissez l'option Dlai de la bote de dialogue Prfrences des conseils de code sur
0 seconde.
476
La fonctionnalit de conseils de code reconnat galement les classes JavaScript personnalises qui ne sont
pas intgres ce langage. Vous pouvez rdiger ces classes personnalises ou les ajouter par l'intermdiaire
de bibliothques de fournisseurs tiers, comme Prototype.
Pour faire disparatre la liste des conseils de code, appuyez sur la touche Retour arrire (Windows) ou
Arrire (Macintosh).
Vous trouverez un tutoriel vido sur les conseils de code l'adresse www.adobe.com/go/lrvid4048_dw.
Vous trouverez un tutoriel vido sur la prise en charge de JavaScript dans Dreamweaver, ralis par l'quipe
de Dreamweaver, 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 ultrieures)
JavaScript (avec conseils de code pour les classes personnalises)
JSP
PHP MySQL
Spry
Affichage d'un menu de conseils de code

Le menu de conseils de code saffiche automatiquement lorsque vous tapez en mode Code. Vous pouvez
galement l'afficher manuellement, sans taper.
1. En mode Code (Fentre > Code), placez le point d'insertion l'intrieur d'une balise.
2. Appuyez sur Ctrl + Barre d'espace.
Insertion de code l'aide des conseils en mode Code

1. Saisissez le premier caractre du segment de code. Par exemple, pour insrer une
balise, tapez un crochet ouvrant (< ). Pour insrer un attribut, placez le point d'insertion
juste aprs le nom de la balise, puis appuyez sur la barre d'espace.
Une liste d'lments (par exemple les noms des diffrentes balises ou des diffrents
attributs) s'affiche.
Vous pouvez fermer cette liste tout moment en appuyant sur la touche Echap.
2. Faites dfiler les lments de la liste l'aide de la barre de dfilement ou des touches
flches vers le haut et vers le bas.
477
3. Double-cliquez sur l'un des lments de cette liste pour l'insrer ; vous pouvez
galement le slectionner, puis appuyer sur la touche Entre (Windows) ou Retour
(Macintosh).
Si vous avez cr 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 Cration 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
disparatre ce code non valide du mode Cration, appuyez sur F5 afin d'actualiser
l'affichage aprs l'insertion du style.
4. Pour insrer une balise de fin, tapez </ (barre oblique).
Remarque : par dfaut, Dreamweaver dtermine le moment o une balise de fermeture
est requise et l'insre automatiquement. Vous pouvez modifier ce comportement par
dfaut, de faon ce que Dreamweaver insre une balise de fermeture lorsque vous
avez tap le crochet fermant (>) final de la balise d'ouverture. Alternativement, le
comportement par dfaut peut consister ne pas insrer la moindre balise de fermeture.
Cliquez sur Edition > Prfrences > Conseils de code, puis slectionnez lune des
options Balises de fermeture.
Modification d'une balise l'aide des conseils de code

Pour remplacer un attribut par un autre, supprimez l'attribut concern et sa valeur, puis
ajoutez le nouvel attribut et la valeur associe en suivant la procdure ci-avant.
Pour modifier une valeur, supprimez la valeur concerne, puis ajoutez une nouvelle
valeur en suivant la procdure 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 un fichier JavaScript afin d'y apporter une modification. Cette modification se rpercute
dans la liste des conseils de code lorsque vous revenez au fichier HTML principal. Toutefois, la mise 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 dtecte des
erreurs de syntaxe dans votre code. Dreamweaver signale les erreurs de syntaxe en affichant des
informations leur sujet dans une barre en haut de la page. La barre d'informations sur les erreurs de
syntaxe affiche la premire ligne du code o Dreamweaver a rencontr l'erreur. Lorsque vous avez corrig
les erreurs, Dreamweaver continue afficher celles qui surviennent par la suite.
Dreamweaver fournit une assistance supplmentaire en mettant en rouge les numros des lignes o des
erreurs de syntaxe se sont produites. Cette mise en 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
associes. Supposons par exemple que vous travailliez sur une page HTML utilisant un fichier JavaScript
inclus. Si le fichier inclus contient une erreur, Dreamweaver affiche galement une alerte pour celui-ci. Vous
pouvez aisment ouvrir le fichier associ contenant l'erreur en cliquant sur son nom dans le haut du
document.
Vous pouvez dsactiver 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.
478
Dfinition des prfrences de conseils de code

Vous pouvez modifier les paramtres par dfaut des conseils de code. Par exemple, si vous ne voulez pas
afficher les noms des proprits CSS ou les conseils de code Spry, vous pouvez les dsactiver dans les
prfrences relatives aux conseils de code. Vous pouvez galement dfinir des prfrences relatives au dlai
d'affichage des conseils de code et aux balises de fermeture.
Mme si l'affichage des conseils de code est dsactiv, vous pouvez afficher un conseil en mode Code en
appuyant sur les touches Ctrl+Barre d'espace.
2. Slectionnez la catgorie Conseils de code dans la liste de gauche.
Balises de fermeture Permet de spcifier le mode d'insertion des balises de fermeture

par Dreamweaver. Par dfaut, Dreamweaver insre automatiquement la balise de
fermeture lorsque vous tapez les caractres </. Vous pouvez modifier ce comportement
par dfaut, de faon ce que Dreamweaver insre une balise de fermeture une fois que
vous avez tap le crochet fermant (>) de la balise d'ouverture, ou de faon omettre les
balises de fin.
Activer les conseils de code Entrane l'affichage des conseils de code lorsque vous
entrez du code en mode Code. Rglez le curseur Dlai pour dfinir le dlai (en
secondes) qui s'coule avant l'apparition des conseils appropris.
Activer les infobulles descriptives Affiche une description dtaille (s'il en existe une)
du conseil de code slectionn.
Menus Dfinit prcisment le type de conseils de code afficher pendant la saisie.

Libre vous d'utiliser tous les menus ou une partie seulement.
Haut de la page
Conseils de code spcifiques au site

Dreamweaver CS5 permet aux dveloppeurs qui emploient Joomla, Drupal, Wordpress ou d'autres cadres de
visualiser les conseils de code PHP lorsqu'ils crivent en mode Code. Pour afficher ces conseils de code,
vous devez tout d'abord crer un fichier de configuration l'aide de la bote de dialogue Conseils de code
spcifiques au site. La configuration indique o Dreamweaver doit rechercher les conseils de code
spcifiques votre site.
Vous trouverez un tutoriel vido sur l'utilisation des conseils de code spcifiques au site l'adresse
www.adobe.com/go/learn_dw_comm13_fr.
Cration du fichier de configuration

La bote de dialogue Conseils de code spcifiques au site permet de crer le fichier de configuration requis
pour afficher les conseils de code dans Dreamweaver.
Par dfaut, Dreamweaver place le fichier de configuration dans le rpertoire Adobe Dreamweaver
CS5\configuration\Shared\Dinamico\Presets.
Remarque : les conseils de code que vous crez sont spcifiques au site slectionn dans le panneau
Fichiers de Dreamweaver. Pour que les conseils de code puissent tre affichs, la page sur laquelle vous
travaillez doit se trouver dans le site actuellement slectionn.
479
1. Slectionnez Site > Conseils de code.

Par dfaut, la fonctionnalit Conseils de code spcifiques au site analyse votre site afin
de dterminer quel cadre CMS (systme de gestion du contenu) vous employez. Par
dfaut, Dreamweaver prend en charge trois cadres : Drupal, Joomla et Wordpress.
Les quatre boutons 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
dfaut existantes.
2. Dans la zone Sous-racine, dfinissez le dossier de sous-racine o vous stockez les
fichiers de votre cadre. Vous pouvez cliquer sur l'icne 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 analyser sont tous affichs, cliquez sur OK pour excuter
l'analyse. Si vous voulez personnaliser l'analyse, passez aux tapes suivantes.
3. Cliquez sur le bouton Plus (+) dans le haut de la fentre Fichiers afin de slectionner un
fichier ou un dossier ajouter l'analyse. Dans la bote de dialogue Ajouter
fichier/dossier, vous pouvez spcifier les extensions de fichiers spcifiques que vous
voulez inclure.
Remarque : la dfinition d'extensions de fichier spcifiques acclre le processus
d'analyse.
4. Pour retirer des fichiers de l'analyse, slectionnez-les, puis cliquez sur le bouton Moins () dans le haut de la fentre Fichiers.
Remarque : si vous avez slectionn le cadre Drupal ou Joomla, la bote de dialogue
Conseils de code spcifiques au site affiche un chemin d'accs supplmentaire vers un
fichier dans votre dossier de configuration de Dreamweaver. Ne le supprimez pas, car il
est ncessaire en cas d'emploi de ces cadres.
5. Pour personnaliser la faon dont la fonctionnalit Conseils de code spcifiques au site
traite un fichier ou un dossier prcis, slectionnez-le dans la liste et effectuez l'une des
actions suivantes :
Choisissez Analyser ce dossier pour inclure le dossier slectionn dans l'analyse.
Slectionnez Rcursif pour inclure tous les fichiers et dossiers du rpertoire
slectionn.
Cliquez sur le bouton Extensions pour ouvrir la bote de dialogue Rechercher des
extensions, o vous pouvez prciser les extensions de fichiers inclure dans
l'analyse pour un fichier ou un dossier dtermin.
Enregistrement de la structure du site

Vous pouvez enregistrer la structure de site personnalise que vous avez cre dans la bote de dialogue
Conseils de code spcifiques au site.
1. Crez la structure des fichiers et des dossiers dsire, en ajoutant et supprimant les
fichiers et dossiers selon vos besoins.
2. Cliquez sur le bouton Enregistrer la structure dans le coin suprieur droit de la bote de
dialogue.
3. Donnez un nom la structure du site, puis cliquez sur Enregistrer.
Remarque : si le nom que vous indiquez est dj utilis, Dreamweaver vous invite entrer un nom diffrent
ou confirmer que vous voulez craser la structure portant ce mme nom. Il est impossible d'craser les
structures de cadre par dfaut.
480
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 dfaut, ni le mot custom (personnalis).
1. Affichez la structure renommer.
2. Cliquez sur l'icne Renommer la structure dans le coin suprieur droit de la bote de
dialogue.
3. Entrez le nouveau nom de la structure, puis cliquez sur Renommer.
Remarque : si le nom que vous indiquez est dj utilis, Dreamweaver vous invite entrer un nom diffrent
ou confirmer que vous voulez craser la structure portant ce mme nom. Il est impossible d'craser les
structures de cadre par dfaut.
Ajout de fichiers ou de dossiers la structure d'un site

Vous pouvez ajouter n'importe quel fichier ou dossier associ votre cadre. Vous pouvez ensuite prciser les
extensions des fichiers analyser. (Voir la section suivante.)
1. Cliquez sur le bouton Plus (+) dans le haut de la fentre Fichiers pour ouvrir la bote de
dialogue Ajouter fichier/dossier.
2. Dans la zone Ajouter fichier/dossier, entrez le chemin d'accs au fichier ou au dossier
ajouter. Vous pouvez galement cliquer sur l'icne de dossier ct de la zone de texte
pour rechercher un fichier ou un dossier.
3. Cliquez sur le bouton Plus (+) dans le haut de la fentre Extensions pour prciser les
extensions des fichiers analyser.
Remarque : la dfinition d'extensions de fichier spcifiques acclre le processus
d'analyse.
4. Cliquez sur Ajouter.
Recherche d'extensions de fichiers dans un site

Utilisez la bote de dialogue Rechercher des extensions pour afficher et trouver les extensions des fichiers
inclus dans la structure du site.
1. Dans la bote de dialogue Conseils de code spcifiques au site, cliquez sur le bouton
Extensions.
La bote de dialogue Rechercher des extensions affiche les extensions pouvant tre
analyses pour l'instant.
2. Pour ajouter une autre extension la liste, cliquez sur le bouton Plus (+) dans le haut de
la fentre Extensions.
3. Pour supprimer une extension de la liste, cliquez sur le bouton Moins (-).
Haut de la page
Insertion de code laide de la barre doutils de codage

1. Assurez-vous que vous tes en mode Code (Affichage > Code).
2. Placez le curseur dans le code, ou slectionnez un bloc de code.
3. Cliquez sur un bouton de la barre d'outils de codage, ou slectionnez un lment de l'un
des menus contextuels de la barre d'outils.
481
Pour connatre la fonction de chaque bouton, positionnez le pointeur sur ce bouton

jusqu' ce qu'une info-bulle apparaisse. La barre d'outils de codage contient par dfaut
les boutons suivants :
Ouvrir les documents Affiche la liste des documents ouverts. Lorsque cette option est
slectionne, elle s'affiche dans la fentre Document.
Afficher la fentre Navigation dans le code Affiche la fentre Navigation dans le code.
Pour plus d'informations, voir Navigation vers le code associ.
Dvelopper tout Rtablit tout le code rduit.
Slectionner une balise parent Slectionne le contenu et les balises d'ouverture et de

fermeture qui encadrent la ligne dans laquelle est plac le point d'insertion. Si vous
cliquez plusieurs fois sur ce bouton et que toutes vos balises sont quilibres,
Dreamweaver slectionne finalement les balises html et /html situes aux extrmits.
Equilibrer les accolades Slectionne tout le code se trouvant l'intrieur des

parenthses, des accolades ou des crochets qui encadrent la ligne dans laquelle est
plac le point d'insertion. Si vous cliquez plusieurs fois sur ce bouton et que toutes vos
balises sont quilibres, Dreamweaver slectionne finalement les parenthses,
accolades ou crochets les plus extrieur(e)s du document.
Numros de lignes Permet d'afficher ou masquer les numros de lignes au dbut de

chaque ligne de code.
Renvoi la ligne Renvoie tout le texte la ligne en mode Code, afin quil apparaisse
dans lespace dfini de la vue.
Surligner le code non valide Surligne le code non valide en jaune.

Remarque : cette option nest pas disponible avec les fichiers HTML, CSS, JS, LESS,
Sass et SCSS. Dans ces fichiers, utilisez lanalyse Linting pour reprer dventuelles
erreurs dans le code.
Alertes d'erreurs de syntaxe dans la barre d'information Active ou dsactive une

barre d'information, dans le haut de la page, qui vous avertit des erreurs de syntaxe.
Lorsque Dreamweaver dtecte une erreur de syntaxe, la barre d'information sur les
erreurs de syntaxe spcifie la ligne de code o cette erreur est survenue. En outre,
Dreamweaver met en surbrillance le numro de la ligne de l'erreur, sur la gauche du
document, en mode Code. La barre d'information est active par dfaut, mais elle ne
s'affiche que lorsque Dreamweaver dtecte des erreurs de syntaxe sur la page.
Remarque : cette option nest pas disponible avec les fichiers HTML, CSS, JS, LESS,
Sass et SCSS. Dans ces fichiers, utilisez lanalyse Linting pour reprer dventuelles
erreurs dans le code.
Appliquer commentaire Permet d'encadrer le code slectionn avec des balises de

commentaires, ou d'ouvrir de nouvelles balises de commentaires.
Appliquer Commentaire HTML encadre le code slectionn de balises ,
ou ouvre une nouvelle balise si aucun code n'est slectionn.
Appliquer Commentaire // insre une double barre oblique (//) au dbut de chaque
ligne du code CSS ou JavaScript slectionn, ou insre une seule balise // si aucun
code n'est slectionn.
Appliquer Commentaire /* */ encadre le code CSS ou JavaScript slectionn avec les
codes de commentaires /* et /*.
482
La marque de commentaire ' a t conue pour le code Visual Basic. Elle insre un
guillemet droit simple au dbut de chaque ligne slectionne d'un script Visual Basic,
ou insre un guillemet droit simple au point d'insertion si aucun code n'est
slectionn.
Lorsque vous travaillez sur un fichier ASP, ASP.NET, JSP, PHP ou ColdFusion, si
vous appliquez l'option Appliquer Commentaire sur serveur, Dreamweaver dtecte
automatiquement la balise de commentaire correcte et l'applique la slection.
Supprimer commentaire Supprime les balises de commentaires du code slectionn.

Si une slection comporte des commentaires incorpors, seules les balises de
commentaire externe sont supprimes.
Envelopper avec balise Permet d'encadrer le code slectionn avec la balise indique
dans Quick Tag Editor.
Fragment de code rcents Permet de choisir dans le panneau Fragments de code un

fragment de code rcemment utilis et de l'insrer. Pour plus d'informations, voir
Manipulation de fragments de code.
Dplacer ou convertir une feuille CSS Permet de dplacer du code CSS ou de

convertir du code CSS intgr en rgles CSS. Pour plus d'informations, consultez les
sections Dplacement/exportation des rgles CSS et Conversion de code CSS intgr en
rgle CSS.
Indentation du code Ramne la slection vers la droite.
Indentation ngative du code Ramne la slection vers la gauche.
Mise en forme du code source Applique les formats de code prcdemment dfinis au
code slectionn (ou la page entire si aucun code n'est slectionn). Vous pouvez
galement dfinir les prfrences de formatage du code en slectionnant Formatage du
code source avec le bouton du mme nom, ou en modifiant les bibliothques de balises
en slectionnant Edition, Bibliothques 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 fentre du document. Pour voir tous les boutons
disponibles, vous pouvez redimensionner la fentre d'affichage du mode Code ou cliquer
sur le bouton d'expansion, la base de la barre d'outils de codage.
Vous pouvez galement modifier la barre d'outils de codage pour afficher des boutons
supplmentaires (Retour automatique la ligne, Caractres masqus et Retrait auto) ou
pour masquer des boutons que vous ne souhaitez pas utiliser. Nanmoins, vous devez
pour cela modifier le fichier XML qui gnre la barre d'outils. Pour plus d'informations,
voir Extension de Dreamweaver.
Remarque : l'option d'affichage des caractres masqus, qui ne fait pas partie des
boutons par dfaut de la barre d'outils de codage, est disponible partir du menu
Affichage (Affichage > Options d'affichage de code > Caractres masqus).
Haut de la page
Insertion de code l'aide du panneau Insertion

1. Positionnez le point d'insertion dans le code.
2. Slectionnez la catgorie approprie du panneau Insertion.
3. Cliquez sur un bouton du panneau Insertion ou slectionnez un lment de l'un des
menus de ce panneau.
Ds que vous cliquez sur une icne, le code peut apparatre immdiatement dans la
page ou une bote de dialogue peut vous demander de spcifier des informations
483
supplmentaires pour terminer le code.

Pour connatre la fonction de chaque bouton, positionnez le pointeur sur ce bouton
jusqu' ce qu'une info-bulle apparaisse. Le nombre et le type des boutons du panneau
Insertion varient selon la nature du document affich et selon que le mode Code ou
Cration est actif.
Bien que le panneau Insertion regroupe les balises frquemment utilises, son contenu
n'est pas exhaustif. Vous trouverez un choix plus vari de balises dans le slecteur de
balises.
Haut de la page
Insertion de code l'aide d'Emmet

Emmet est un plug-in qui permet un codage grande vitesse et la gnration de code HTML et CSS. Vous
pouvez dsormais utiliser des abrviations Emmet en mode Code ou Inspecteur de code dans Dreamweaver
et appuyer sur la touche de tabulation pour dvelopper ces abrviations en balises HTML ou en code CSS.
Les abrviations HTML sont dveloppes dans des pages HTML et PHP. Les abrviations CSS sont
dveloppes dans des pages CSS, LESS, Sass, SCSS ou lintrieur de la balise de style dans une page
HTML.
Voici quelques exemples d'utilisation des abrviations Emmet en mode Code. Pour plus dinformations et de
rfrences, consultez ladocumentation Emmet.
Remarque : actuellement, Dreamweaver prend uniquement en charge les abrviations Emmet 1.0.
Exemple 1 : insertion de code HTML l'aide d'Emmet

Pour ajouter rapidement le code HTML correspondant une liste non ordonne de trois lments, ouvrez le
fichier HTML et tapez labrviation Emmet suivante en mode Code, entre les balises <body></body> :
1
div>(ul>li*3>{Lorem Ipsum})+p*4>lorem
Vrifiez ensuite que le curseur est plac directement aprs labrviation Emmet et appuyez sur la touche
Tabulation pour dvelopper labrviation. Vous pouvez galement slectionner l'abrviation entire et appuyer
sur Entre.
L'abrviation est dveloppe pour afficher le code suivant :
1
2
3
4
5
6
7
8
9
10
11
<div>
<ul>
<li>Lorem Ipsum</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe,
voluptatum, perferendis ad impedit iste assumenda et laborum doloribus optio
molestiae perspiciatis modi quaerat corrupti velit cupiditate eligendi tempora
temporibus vel.</p>
<p>Ipsa, distinctio, eveniet ad numquam libero quam doloremque culpa illo
ex possimus eligendi amet nesciunt provident inventore rerum facere ea
veritatis itaque? Suscipit rem asperiores excepturi sapiente enim architecto
esse.</p>
<p>Harum, ad porro molestiae corporis natus aut non fugit. Recusandae,
reprehenderit, voluptate voluptas reiciendis voluptatum tempora vero vel
libero facere fuga maiores ratione eaque ad illum porro dignissimos sit
eos.</p>
<p>Dignissimos, molestiae, quis ducimus ratione temporibus sed accusamus
libero consequuntur ex velit maiores illum repudiandae cum! Dolorum, dolore,
pariatur, incidunt in saepe laudantium consequatur provident totam vero velit
nobis accusantium!</p>
</div>
484
Exemple 2 : insertion de code CSS l'aide d'Emmet

Pour insrer du code CSS afin de crer un rayon de bordure avec des prfixes fournisseur, ouvrez votre
fichier CSS et saisissez labrviation Emmet suivante :
1
-bdrs
Lorsque vous appuyez sur la touche Tabulation, labrviation est dveloppe pour afficher le code suivant :
1
2
3
4
5
-webkit-border-radius: ;
-moz-border-radius: ;
border-radius: ;
Haut de la page
Insertion de balises avec le Slecteur de balises

Vous pouvez utiliser le Slecteur de balises pour insrer dans une page n'importe quelle balise figurant dans
les bibliothques de balises de Dreamweaver (notamment les bibliothques 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 Contrle enfonce (Macintosh), puis slectionnez
Insrer la balise.
Le Slecteur de balises s'affiche. Le panneau de gauche rpertorie les bibliothques de
balises prises en charge, tandis que le panneau de droite affiche les balises individuelles
du dossier de bibliothques de balises slectionn.
2. Dans la bibliothque de balises, slectionnez une catgorie de balises ou dveloppez
cette catgorie pour slectionner une sous-catgorie.
3. Slectionnez la balise souhaite dans le volet de droite.
4. Pour afficher les informations concernant la syntaxe et l'emploi de la balise dans le
slecteur 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 Rfrence, cliquez sur l'icne <?>. Ces
informations, si elles existent, s'affichent.
6. Cliquez sur le bouton Insrer pour insrer la balise slectionne dans le code.
Si la balise affiche dans le volet de droite apparat entre crochets, par exemple
<title></title>), elle ne ncessite aucune information complmentaire et s'insre
directement dans le document au niveau du point d'insertion.
Si la balise ne ncessite aucune information complmentaire, un diteur de balises
s'affiche.
7. Le cas chant, entrez les informations supplmentaires dans l'diteur de balises, puis
cliquez sur OK.
8. Cliquez sur le bouton Fermer.
Haut de la page
Insertion de commentaires HTML

Un commentaire est un texte descriptif insr dans le code HTML pour expliciter le code ou fournir
d'autres informations. Le commentaire apparat uniquement en mode Code ; il ne s'affiche pas dans un
navigateur.
485
Insertion d'un commentaire au niveau du point d'insertion

Choisissez Insertion > Commentaire.
En mode Code, une balise de commentaire est insre et le point d'insertion est plac au
milieu de celle-ci. Saisissez votre commentaire.
En mode Cration, la bote de dialogue Commentaire s'affiche. Entrez le commentaire,
puis cliquez sur OK.
Affichage des marqueurs de commentaires en mode Cration

Vrifiez que l'option Commentaires est slectionne dans les prfrences des lments
invisibles. Dans le cas contraire, le marqueur de commentaire ne s'affiche pas.
Modification d'un commentaire existant

En mode Code, recherchez le commentaire pour en modifier le texte.
En mode Cration, slectionnez le marqueur Commentaire, modifiez le texte de votre
commentaire dans l'inspecteur Proprits, puis cliquez dans la fentre de document.
Haut de la page
Copie et collage de code

1. Copiez le code partir du mode Code ou d'une autre application.
2. Placez le point d'insertion en mode Code, puis choisissez Edition > Coller.
Haut de la page
Aperu des images et des couleurs en mode Code

Une fois que vous avez insr le code appropri pour les images et couleurs, vous pouvez le prvisualiser
directement en mode Code.
Aperu des images

Aperu des couleurs
Aperu des images

Passez votre curseur sur lURL dune image pour afficher un aperu de cette dernire en mode Code. Vous
pouvez prvisualiser les images qui sont rfrences comme suit :
url();
data-uri()
Valeur dattribut Src de la balise img
Dreamweaver affiche galement laperu des images hberges distance. Par exemple, <img
src="https://a2.behance.net/img/profile/no-image-138.jpg?cb=1816124956" />. Si
486
Dreamweaver ne parvient pas afficher laperu de fichiers distants, le message Impossible de charger
limage apparat.
Vous pouvez obtenir un aperu des types de fichiers dimage suivants :

JPEG
JPG
PNG
GIF
SVG
Aperu dimage en mode Code
Aperu des couleurs

Passez votre curseur sur des valeurs de couleurs souris pour afficher un aperu de ces couleurs en mode
Code. Les formats suivants sont pris en charge :
Valeurs de couleurs hexadcimales 3 et 6 chiffres : #ff0000;
RVB : rvb(0, 0, 0) ;
RVBA : rvba(0, 255, 228,0.5) ;
TSI : tsi(120, 100%, 50%) ;
TSLA : tsla(120, 60%, 70%, 0.3) ;
Noms de couleurs prdfinis, tels que Vert olive, Bleu sarcelle, rouge.
Appuyez sur les touches Ctrl + Barre despace pour afficher le slecteur de couleurs et modifier
rapidement des valeurs.
Laperu des couleurs est disponible dans tous les types de documents pour les formats de couleur indiqus
ci-dessus.
487
Aperu de couleur en mode Code
Haut de la page
Analyse du code
Dreamweaver prend en charge lanalyse Linting, qui consiste analyser le code pour dtecter dventuelles
erreurs. Le panneau Sortie rpertorie les erreurs et les avertissements dtects grce lanalyse Linting.
Pour plus dinformations, voir Analyse du code (Linting).
Dreamweaver affiche galement un aperu rapide des erreurs dans la colonne de la ligne incorrecte. Le
numro de ligne est indiqu en rouge pour indiquer la prsence derreurs et, quand vous passez dessus avec
le curseur, une brve description de lerreur saffiche.
Remarque : seule la premire erreur de la ligne est visible. Si la ligne contient uniquement un avertissement,
la description de ce dernier saffiche. Si la ligne contient un avertissement et une erreur, seule la description
de lerreur saffiche.
Haut de la page
Modification de balises avec des diteurs de balises

Les diteurs de balises permettent d'afficher, de spcifier et de modifier les attributs d'une balise.
1. Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle
enfonce (Macintosh) sur une balise (en mode Code) ou sur un objet (en mode
Cration), puis slectionnez la commande Modifier la balise du menu contextuel. Le
contenu de cette bote de dialogue varie selon la balise slectionne.
2. Indiquez ou modifiez les attributs de la balise, puis cliquez sur OK.
Pour obtenir davantage d'informations sur la balise partir de l'diteur de balises,
cliquez sur l'option Infos sur les balises.
Haut de la page
Modification de code l'aide du menu Codage

1. En mode Code, slectionnez du code, puis cliquez avec le bouton droit de la souris
(Windows) ou en maintenant la touche Contrle enfonce (Macintosh).
2. Cliquez sur le sous-menu Slection puis choisissez l'une des options suivantes :
Dvelopper tout Rtablit tout le code rduit.
Appliquer Commentaire HTML Encadre le code slectionn de balises ,

ou ouvre une nouvelle balise si aucun code n'est slectionn.
488
Appliquer Commentaire /* */ Encadre le code CSS ou JavaScript slectionn avec les

codes de commentaires /* et */.
Appliquer Commentaire // Insre une double barre oblique (//) au dbut de chaque
ligne du code CSS ou JavaScript slectionn, ou insre une seule balise // si aucun
code n'est slectionn.
Appliquer Commentaire ' Insre un guillemet droit simple au dbut de chaque ligne
slectionne d'un script Visual Basic, ou insre un guillemet droit simple au point
d'insertion si aucun code n'est slectionn.
Appliquer Commentaire sur serveur Enveloppe le code slectionn. Lorsque vous

travaillez sur un fichier ASP, ASP.NET, JSP, PHP ou ColdFusion, si vous appliquez
l'option Appliquer Commentaire sur serveur, Dreamweaver dtecte automatiquement la
balise de commentaire correcte et l'applique la slection.
Appliquer correction barre oblique inverse-commentaire Entoure le code CSS

slectionn de balises de commentaire qui forcent Internet Explorer 5 pour Macintosh
ignorer le code.
Appliquer correction Ciao Entoure le code CSS slectionn de balises de

commentaire qui forcent Internet Netscape Navigator 4 ignorer le code.
Supprimer commentaire Supprime les balises de commentaires du code slectionn.

Si une slection comporte des commentaires incorpors, seules les balises de
commentaire externe sont supprimes.
Supprimer correction barre oblique inverse-commentaire Supprime les balises de

commentaires du code CSS slectionn. Si une slection comporte des commentaires
incorpors, seules les balises de commentaire externe sont supprimes.
Supprimer correction Ciao Supprime les balises de commentaires du code CSS

slectionn. Si une slection comporte des commentaires incorpors, seules les balises
de commentaire externe sont supprimes.
Convertir les tabulations en espaces Convertit toutes les tabulations de la slection

en espaces ; le nombre d'espaces correspond la valeur de taille de tabulation dfinie
dans les prfrences Format. Pour plus d'informations, voir Modification du format du
code.
Convertir les espaces en tabulations Convertit les groupes d'espaces de la slection

en tabulations. Les groupes dont le nombre d'espaces correspond la valeur de taille de
tabulation dfinie sont convertis en tabulation.
Retrait Met la slection en retrait, en la repoussant vers la droite. Pour plus

d'informations, voir Mise en retrait des blocs de code.
Retrait ngatif Ramne la slection vers la gauche.
Supprimer toutes les balises Supprime toutes les balises de la slection.
Convertir les lignes en tableaux Insre une balise table sans attribut de part et
d'autre de la slection.
489
Ajouter des sauts de ligne Ajoute une balise br la fin de chaque ligne de la
slection.
Convertir en majuscules Convertit toutes les lettres de la slection (y compris les

noms et les valeurs des balises et des attributs) en majuscules.
Convertir en minuscules Convertit toutes les lettres de la slection (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 slection en majuscules.
Convertir les balises en minuscules Convertit tous les noms de balise et d'attribut et
toutes les valeurs d'attribut de la slection en minuscules.
Haut de la page
Modification d'une balise de langage de serveur l'aide de

l'inspecteur Proprits
Vous pouvez modifier le code dans une balise de langage de serveur (comme une balise ASP) sans accder
au mode Code, grce l'inspecteur Proprits du code.
1. En mode Cration, slectionnez l'icne visuelle de balise de langage de serveur.
2. Dans l'inspecteur Proprits, cliquez sur le bouton Edition.
3. Apportez les modifications requises au code de la balise puis cliquez sur OK.
Haut de la page
Mise en retrait des blocs de code

Lorsque vous rdigez 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 slectionns, en les dplaant d'une
tabulation vers la gauche ou vers la droite.
Mise en retrait du bloc de code slectionn

Appuyez sur la touche de tabulation.
Slectionnez Edition > Indentation du code.
Annulation de la mise en retrait du bloc de code slectionn

Appuyez sur Maj+Tab.
Slectionnez Edition > Indentation ngative du code.
Haut de la page
490
La fentre Navigation dans le code affiche une liste de codes source apparents une slection spcifique
sur votre page. Vous pouvez l'utiliser pour naviguer vers les codes source apparents, comme des rgles
CSS internes et externes, des inclusions ct serveur, des fichiers JavaScript externes, des fichiers de
modles parents, des fichiers de bibliothque et des fichiers source iframe. Lorsque vous cliquez sur un lien
dans la fentre Navigation dans le code, Dreamweaver ouvre le fichier contenant le code concern. Ce fichier
s'affiche dans la section des fichiers associs, pour autant que cette fonctionnalit soit active. Si elle n'est
pas active, Dreamweaver ouvre le fichier slectionn dans un document spar, dans la fentre de
document.
Si vous cliquez sur une rgle CSS dans la fentre Navigation dans le code, Dreamweaver accde
directement cette rgle. S'il s'agit d'une rgle interne du fichier, Dreamweaver l'affiche en mode fractionn.
Si la rgle est un fichier CSS externe, Dreamweaver ouvre ce dernier et affiche la rgle dans la section des
fichiers associs, au-dessus du document principal.
Vous pouvez accder la fentre Navigation dans le code depuis les modes Cration, Code et Fractionn,
ainsi qu' partir de l'Inspecteur de code.
Vous trouverez un tutoriel vido sur l'utilisation du navigateur de code, ralis par l'quipe de Dreamweaver,
l'adresse http://www.adobe.com/go/dw10codenav_fr.
Vous trouverez un tutoriel vido relatif l'utilisation du mode En direct, aux fichiers associs et la fentre
Navigation dans le code l'adresse www.adobe.com/go/lrvid4044_dw.
Ouverture de la fentre Navigation dans le code

Tout en maintenant la touche ALT (Windows) ou les touches Commande+Option
(Macintosh) enfonces, cliquez n'importe o sur la page. La fentre Navigation dans le
code affiche des liens vers le code qui s'applique la zone sur laquelle vous venez de
cliquer.
Cliquez en dehors de la fentre Navigation dans le code pour la fermer.

Remarque : vous pouvez galement ouvrir la fentre Navigation dans le code en cliquant sur licne
Cette icne s'affiche proximit du point d'insertion sur la page si la souris reste inactive pendant 2
secondes.
Navigation vers le code l'aide de la fentre Navigation dans le code

1. Ouvrez la fentre Navigation dans le code partir de la zone qui vous intresse.
2. Cliquez sur l'lment de code auquel vous voulez accder.
La fentre Navigation dans le code regroupe les sources de code apparentes par fichier et numre les
fichiers dans l'ordre alphabtique. Par exemple, supposons que des rgles CSS de trois fichiers externes
influent sur la slection dans votre document. Dans ce cas, la fentre Navigation dans le code prsente la
liste de ces trois fichiers, ainsi que des rgles CSS relatives la slection. Pour le code CSS relatif une
slection prcise, la fentre Navigation dans le code fonctionne de faon similaire au panneau Styles CSS du
mode Actuel.
Lorsque vous maintenez le pointeur de la souris au-dessus d'une rgle CSS, la fentre Navigation dans le
code affiche, dans une infobulle, les proprits de cette rgle. Ces infobulles peuvent vous aider
distinguer des rgles qui partagent un mme nom.
Dsactivation de l'icne Navigation dans le code

1. Ouvrez la fentre Navigation dans le code.
2. Cliquez sur Dsactiver l'indicateur dans le coin infrieur droit de la fentre.
3. Cliquez en dehors de la fentre Navigation dans le code pour la fermer.
491
Pour activer de nouveau l'icne Navigation dans le code, cliquez tout en maintenant la touche ALT
(Windows) ou les touches Commande+Option (Macintosh) enfonces, afin d'ouvrir la fentre Navigation dans
le code, puis dsactivez l'option Dsactiver l'indicateur.
Haut de la page
Accs une fonction JavaScript ou VBScript

En mode Code et dans l'Inspecteur de code, vous pouvez afficher la liste de toutes les fonctions JavaScript
ou VBScript de votre code et passer ainsi directement l'une de ces dernires.
1. Affichez le document en mode Code (Affichage > Code) ou l'inspecteur de code (Fentre
> Inspecteur de code).
En mode Code, cliquez du bouton droit (Windows) ou tout en appuyant sur Contrle
(Macintosh) dans la fentre Code, puis slectionnez le sous-menu Fonctions dans le
menu contextuel.
Le sous-menu Fonctions ne s'affiche pas en mode Cration.
Si votre code contient des fonctions JavaScript ou VBScript, elles apparaissent dans le
sous-menu.
Pour afficher ces fonctions par ordre alphabtique, cliquez avec le bouton droit de la
souris tout en appuyant sur la touche Ctrl (Windows) ou en maintenant les touches
Ctrl et Option enfonces (Macintosh) en mode Code, puis slectionnez le sous-menu
Fonctions.
Dans l'Inspecteur de code, cliquez sur le bouton de navigation dans le code ({ }) de
la barre d'outils.
3. Slectionnez un nom de fonction pour atteindre cette dernire.
Haut de la page
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 votre document. JSE peut galement
supprimer des gestionnaires d'vnements tels que onclick et onmouseover de votre code puis joindre
votre document, de manire transparente, le code JavaScript associ ces gestionnaires.
Avant d'utiliser 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 rsultats inattendus.
Par dfaut, Dreamweaver affiche la liste de ces scripts dans la bote de dialogue
Externaliser le code JavaScript, mais ne les slectionne pas pour extraction. Si vous le
souhaitez, vous pouvez les slectionner manuellement.
JSE n'extrait pas le code JavaScript des rgions modifiables de fichiers .dwt (modle
Dreamweaver), de rgions non modifiables d'instances de modles ou d'lments de
bibliothque Dreamweaver.
Lorsque vous avez extrait le code JavaScript l'aide de l'option Externaliser le code
JavaScript et associer de manire transparente, vous ne pouvez plus modifier les
comportements Dreamweaver dans le panneau Comportements. Dreamweaver ne peut
pas inspecter et complter le panneau Comportements l'aide de comportements qu'il a
associs de manire transparente.
Il est impossible d'annuler vos modifications aprs avoir ferm la page. Vous pouvez par
contre annuler les modifications tant que vous restez dans la mme session d'dition.
Pour annuler, choisissez Edition > Annuler Externaliser le code JavaScript.
492
Il se peut que certaines pages trs complexes ne fonctionnent pas comme prvu. 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 tutoriel vido sur la prise en charge de JavaScript dans Dreamweaver, ralis par l'quipe
de Dreamweaver, 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 > Externaliser le code JavaScript.
3. Dans la bote de dialogue Externaliser le code JavaScript, modifiez ventuellement les
options par dfaut.
Choisissez Externaliser le code JavaScript uniquement si vous voulez que
Dreamweaver dplace le code JavaScript dans un fichier externe et qu'il y fasse
rfrence dans le document actuel. Cette option laisse les gestionnaires
d'vnements 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 manire transparente si
vous voulez que Dreamweaver 1) dplace le code JavaScript vers un fichier externe
et y fasse rfrence dans le document actuel, et 2) supprime les gestionnaires
d'vnements du code HTML et les insre en cours d'excution l'aide de
JavaScript. Lorsque vous slectionnez cette option, vous ne pouvez plus modifier les
comportements dans le panneau Comportements.
Dans la colonne Modifier, dsactivez les modifications que vous ne voulez pas
apporter, ou activez celles que Dreamweaver n'a pas slectionnes par dfaut.
Par dfaut, Dreamweaver prsente mais ne slectionne pas les modifications
suivantes :
Les blocs de script dans l'en-tte du document qui contiennent des appels
document.write() ou document.writeln().
Les blocs de script dans l'en-tte du document qui contiennent des signatures de
fonction associes 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 donnes Spry.
Dreamweaver attribue automatiquement des ID aux lments qui n'en possdent pas
encore. Si ces ID ne vous conviennent pas, vous pouvez les modifier dans les zones
de texte ID.
4. Cliquez sur OK.
La bote de dialogue de synthse rcapitule les extractions. Passez ces extractions en
revue puis cliquez sur OK.
5. Enregistrez la page.
Dreamweaver cre 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 au mme niveau que la page partir de laquelle vous avez extrait le code JavaScript.
N'oubliez pas de charger ces deux fichiers dpendants sur votre serveur web lorsque vous enverrez la page
d'origine.
Haut de la page
Manipulation de fragments de code

Les fragments de code permettent de stocker des contenus en vue de pouvoir les rutiliser rapidement. Vous
pouvez crer, insrer, modifier ou supprimer des fragments de code HTML, JavaScript, CFML, ASP, PHP,
etc. Vous pouvez galement grer et partager vos fragments de code avec les autres membres de l'quipe.
493
Vous disposez de quelques fragments prdfinis que vous pouvez employer comme point de dpart.
Insertion d'un fragment de code

1. Placez le point d'insertion l'endroit o vous souhaitez insrer le fragment de code ou
slectionnez le code combiner avec le fragment choisi.
2. Dans le panneau Fragments de code (Fentre > Fragments de code), double-cliquez sur
le fragment de code.
Vous pouvez galement cliquer avec le bouton droit de la souris (Windows) ou en
maintenant la touche Contrle enfonce (Macintosh) sur le fragment de code, puis
slectionner Insrer dans le menu contextuel.
Cration d'un fragment de code

1. Cliquez sur l'icne Nouveau fragment de code situ 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 caractres
qui sont interdits dans les noms de fichiers (barres obliques (/ ou \), caractres spciaux
ou guillemets doubles ()).
3. (Facultatif) Entrez la description du fragment de code sous forme de texte. qui permettra
aux autres membres de l'quipe de l'utiliser plus facilement.
4. (Facultatif) Slectionnez le type d'aperu : Code ou Cration.
Cration Restitue le code et l'affiche dans le volet d'aperu du panneau Fragment de

code.
Code Affiche le code dans le volet d'aperu.

5. Cliquez sur OK.
Modification ou suppression d'un fragment de code

Dans le panneau Fragments de code, slectionnez un fragment de code, puis cliquez sur
le bouton Modifier le fragment de code ou sur le bouton Supprimer, dans le bas du
panneau.
Cration de dossiers de fragments de code et gestion de fragments

1. Cliquez sur le bouton Nouveau dossier de fragments de code situ au bas du panneau
Fragments de code.
2. Faites glisser des fragments de code vers le nouveau dossier ou d'autres dossiers,
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 enfonce (Macintosh) et slectionnez Modifier les
raccourcis clavier.
494
L'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. Slectionnez celui qui vous intresse et affectez-lui le raccourci clavier de votre choix.
Pour plus d'informations, voir Personnalisation des raccourcis clavier.
Partage d'un fragment de code avec d'autres membres de l'quipe

1. Recherchez le fichier correspondant au fragment de code partager dans le sousdossier Configuration/Snippets du dossier de l'application Dreamweaver.
2. Copiez le fichier du fragment de code dans un dossier partag sur votre ordinateur ou
sur un ordinateur en rseau.
3. Veillez ce que les autres membres de l'quipe copient le fichier du fragment de code
dans leurs dossiers Configuration/Snippets respectifs.
Haut de la page
Recherche de balises, d'attributs ou de chanes 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 galement rechercher des chanes de texte spcifiques se trouvant l'intrieur ou l'extrieur
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 tre effectue ou slectionnez des
documents ou un dossier dans le panneau Fichiers.
3. Indiquez les fichiers sur lesquels doit porter la recherche, puis indiquez le type de
recherche effectuer et enfin le texte ou les balises rechercher. Le cas chant,
spcifiez 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 bote de dialogue Rechercher et
remplacer, appuyez sur F3 (Windows) ou Commande+G (Macintosh).
Haut de la page
Enregistrement et chargement de modles de recherche

Vous pouvez sauvegarder vos modles de recherche pour les rutiliser ultrieurement.
Enregistrement d'un modle de recherche

1. Dans la bote de dialogue Rechercher et remplacer (Edition > Rechercher et remplacer),
dfinissez les paramtres de la recherche.
2. Cliquez sur le bouton Enregistrer la requte (reprsentant une disquette).
3. Dans la bote de dialogue qui s'affiche, recherchez le dossier o vous voulez enregistrer
495
les requtes. Saisissez un nom pour identifier le fichier correspondant la requte, puis
cliquez sur Enregistrer.
Par exemple, si le modle de recherche inclut la recherche de balises img sans l'attribut
alt, vous pouvez nommer la requte img_sans_alt.dwr.
Remarque : les fichiers correspondant aux requtes enregistres portent
lextension .dwr. Certains fichiers de requte enregistrs partir de versions antrieures
de Dreamweaver peuvent galement avoir l'extension .dwq.
Chargement d'un modle de recherche

2. Cliquez sur l'icne Charger la requte (reprsentant un dossier).
3. Recherchez le dossier contenant les requtes enregistres. Slectionnez ensuite un
fichier de requte, puis cliquez sur Ouvrir.
4. Cliquez sur Rechercher le suivant, Rechercher tout, Remplacer ou Remplacer tout pour
lancer la recherche.
Haut de la page
Utilisation des documents de rfrence sur les langages

Le panneau Rfrence est un outil de rfrence rapide pour les langages de balisage, les langages de
programmation et les styles CSS. Il comporte des informations sur les diffrentes balises, les objets et les
styles que vous manipulez en mode Code (ou Inspecteur de code). Il comporte galement des exemples de
code que vous pouvez coller dans vos documents.
Ouverture du panneau Rfrence

1. Excutez l'une des actions suivantes en mode Code :
Cliquez sur une balise, un attribut ou un mot-cl avec le bouton droit de la souris
(Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), puis slectionnez
Rfrence dans le menu contextuel.
Placez le point d'insertion dans une balise, un attribut ou un mot-cl, puis appuyez
sur Maj+F1.
Le panneau Rfrence apparat et affiche des informations sur la balise, l'attribut ou
le mot-cl sur lequel vous avez cliqu.
2. Pour ajuster la taille du texte dans le panneau Rfrence, slectionnez Grande police,
Police moyenne ou Petite police dans le menu Options (la petite flche en haut droite
du panneau).
Collage d'un exemple de code dans votre document
496
1. Cliquez n'importe o sur l'exemple de code de contenu de rfrence.

L'exemple de code entier est mis en surbrillance.
2. Slectionnez Edition > Copier, puis collez l'exemple de code dans votre document en
mode Code.
Consultation du contenu de rfrence dans le panneau Rfrence

1. Pour afficher les balises, les objets ou les styles d'un autre ouvrage, choisissez-en un
autre dans le menu droulant Livre.
2. Pour afficher des informations sur un lment spcifique, slectionnez-le dans le menu
droulant Balise, Objet, Style ou CFML (selon le manuel slectionn).
3. Pour consulter les informations se rapportant un attribut de l'lment slectionn,
slectionnez cet attribut dans le menu droulant affich prs du menu Balise, Objet,
Style ou CFML.
Ce menu contient la liste des attributs associs l'lment slectionn. L'lment
Description est slectionn par dfaut. Il contient une description de l'lment choisi.
Haut de la page
Impression de code
Vous pouvez imprimer le code que vous avez rdig pour le consulter, l'archiver ou le distribuer.
1. Ouvrez une page en mode Code.
2. Slectionnez Fichier > Imprimer le code.
3. Spcifiez les options d'impression, puis cliquez sur OK (Windows) ou sur Imprimer
(Macintosh).
Haut de la page
Tutoriel vido
Acclration de la programmation HTML5 et CSS (30 min)
Crez la structure d'une page web en mosaque l'aide de la mise en vidence des balises et des numros
de ligne, des indications de code pour les slecteurs CSS et des fonctions de remplissage du code.

Utilisation des menus d'indication dans Quick Tag Editor
DOM (Document Object Model) W3C
Tutoriel sur les conseils de code
Vrification de l'quilibre des balises et des accolades
propos des bibliothques de balises de Dreamweaver
Collage et dplacement de fragments de code rduits
Rduction et dveloppement de fragments de code
Configuration de lordinateur pour le dveloppement dapplications
Tutoriel sur la navigation dans le code
Cration visuelle de pages Spry
497
498
Rduction du code
Vous pouvez rduire ou dvelopper des fragments de code, ce qui permet de voir diffrentes sections du
document sans qu'il soit ncessaire d'utiliser la barre de dfilement. Par exemple, pour afficher toutes les
rgles CSS dans la balise head qui s'appliquent une balise div plus loin sur la page, vous pouvez rduire
tout le code qui se trouve entre les balises head et div, de manire voir les deux sections de code en
mme temps.
Vous pouvez rduire le code dans les fichiers HTML, PHP, XML et SVG sur la base des blocs de balise.
Dans les fichiers CSS, LESS, Sass, SCSS et JS, vous pouvez rduire le code sur la base des accolades.
Fichiers HTML : le code plac entre des balises HTML d'ouverture et de fermeture est
rduit et les attributs initiaux s'affichent dans le code rduit, le cas chant. Le bloc de
code rduit est automatiquement dvelopp lorsque le code situ dans le bloc est mis en
vidence par le biais du slecteur de balises, ou des options Rechercher et remplacer,
Atteindre la ligne, Affichage rapide des lments, Affichage en direct ou Annuler/Rtablir.
Une fois que la slection effectue dans ces fonctionnalits est modifie, le code est
automatiquement rduit nouveau.
Fichiers CSS, LESS, SASS, SCSS et JS : le code plac entre accolades est rduit et
l'aperu s'affiche sous la forme {...}.
Fichiers PHP : les lments HTML, ainsi que les blocs de code CSS et JS sont rduits
en plus des blocs de code PHP. Vous pouvez rduire un bloc de code PHP commenant
par <?php et se terminant par ?>.
Remarque : le code des fichiers crs partir de modles Dreamweaver est toujours affich en mode
dvelopp, mme si le modle (*.dwt) contient des fragments de code rduits.

Copie et dplacement de fragments de code rduits
Spcification de la taille de pliage de code
Haut de la page

Par dfaut, tout le code en mode Code est en mode dvelopp. Vous pouvez spcifier le nombre minimal de
lignes pour le pliage de code dans la bote de dialogue Prfrences.
Remarque : les tats rduits ou dvelopps des blocs de code sont conservs dans les diffrentes sessions
de Dreamweaver.
1. En mode Code, passez la souris sur la colonne de numro de ligne qui correspond au
bloc de code que vous souhaitez rduire ou dvelopper. Un petit triangle s'affiche en
regard des numros de ligne.
2. Cliquez sur le triangle pour rduire ou dvelopper le code.
Pour dvelopper tout le code rduit dans le document, vous pouvez utiliser le
raccourci clavier Ctrl+Alt+E (Windows) ou Commande+Alt+E (Mac).
499
Haut de la page
Copie et dplacement de fragments de code rduits

Vous pouvez copier et coller des fragments de code rduits dans le mme document ou dans d'autres
documents et applications. Vous pouvez galement dplacer des fragments de code rduits en les faisant
glisser en mode Code.
Copie et collage d'un fragment de code rduit

1. Cliquez sur le fragment de code rduit pour le slectionner.
2. Choisissez Edition > Copier.
3. Placez le curseur lendroit o vous voulez coller le code.
Dplacement d'un fragment de code rduit par glisser-dposer

1. Cliquez sur le fragment de code rduit pour le slectionner.
2. Faites glisser la slection vers le nouvel emplacement.
Pour faire glisser une copie de la slection, appuyez sur Ctrl (Windows) ou Alt
(Macintosh) et faites glisser la slection.
Remarque : il est impossible d'effectuer un glisser-dposer de fragments de code vers
d'autres documents.
Haut de la page
Spcification de la taille de pliage de code

La taille de pliage de code par dfaut est deux lignes. Cela signifie que lorsque vous rduisez le code, tous
les fragments de code qui contiennent au moins deux lignes de code sont rduits. Les fragments de code qui
sont infrieurs deux lignes s'affichent en mode dvelopp.
Vous pouvez modifier le nombre minimal de lignes pour le pliage de code dans la bote de dialogue
Prfrences.
2. Cliquez sur Format de code dans la liste Catgorie et spcifiez la taille de pliage de code
minimale.
500
Analyse du code (Linting)

Que vous soyez dbutant ou codeur expriment, il existe toujours des risques d'erreurs lorsque vous
intervenez dans le code par inadvertance ou en raison d'un manque de connaissances. Lorsque la page web
ou mme une partie de cette dernire ne correspond pas vos attentes, vous tes oblig de dboguer le
code pour rechercher les erreurs de syntaxe ou de logique. Le dbogage peut tre un processus
extrmement ardu et fastidieux, en particulier en cas de mises en uvre complexes.
Dreamweaver simplifie et facilite le dbogage du code pour les erreurs courantes grce l'analyse
Linting. La fonctionnalit Linting consiste analyser le code pour signaler toute erreur potentielle ou
utilisation suspecte du code. Lanalyse Linting dans Dreamweaver permet, entre autres, de signaler les
erreurs de syntaxe HTML, les erreurs danalyse en CSS ou les avertissements dans les fichiers JavaScript.
Les erreurs et les avertissements dtects sont rpertoris dans un panneau spar (Sortie) ancr en bas de
lespace de travail. Chaque ligne du panneau vous permet daccder directement la partie du code o
lerreur sest produite, ce qui vous aide trouver et corriger facilement le code. En outre, les numros des
lignes qui contiennent un code erron sont mis en surbrillance en rouge en cas derreur, en jaune en cas
davertissement. Lorsque vous placez la souris sur lun des numros de ligne mis en surbrillance, un aperu
de lerreur ou de lavertissement saffiche.
Pour effectuer une analyse Linting des fichiers HTML, CSS et JavaScript dans Dreamweaver, procdez
comme suit :
1. Spcifiez les rgles d'analyse Linting en modifiant les fichiers de configuration HTML,
CSS et JS. Pour plus d'informations, voir Spcification des rgles d'analyse Linting.
2. Activez l'analyse Linting et indiquez le moment o elle doit tre dclenche. Vous
pouvez analyser les fichiers lors de leur chargement, de leur enregistrement ou de leur
modification. Pour plus d'informations, voir Activation de l'analyse Linting et dfinition des
prfrences.
Les erreurs et avertissements dtects dans les fichiers s'affichent dans le panneau Sortie. Pour plus
d'informations, voir Rsultats de l'analyse Linting et panneau Sortie.
Haut de la page
Activation de l'analyse Linting et dfinition des prfrences

Cliquez sur Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Mac). Slectionnez Linting
dans la liste Catgorie.
Slectionnez Activer lanalyse Linting.
Spcifiez un ou plusieurs dclencheurs pour l'analyse Linting. Vous pouvez dclencher

lanalyse Linting lorsque vous chargez, enregistrez et/ou modifiez le fichier.
Haut de la page
Spcification des rgles d'analyse Linting
501
Vous pouvez analyser les fichiers HTML, CSS et JS en modifiant les rgles d'analyse Linting dans les fichiers
de configuration correspondants :
HTML : DW.htmlhintrc
CSS : DW.csslintrc
JS : DW.jshintrc
Pour accder ces fichiers et les modifier, procdez comme suit :

2. Slectionnez Linting dans la liste Catgorie.
3. Dans la section Modifier un ensemble de rgles, cliquez sur le type de fichier requis, puis
sur Modifier et appliquer les changements.
Le fichier de configuration correspondant s'ouvre dans Dreamweaver.
4. Modifiez ou ajoutez des rgles d'analyse Linting aux fichiers de configuration. Pour plus
d'informations sur les rgles d'analyse Linting, consultez la documentation suivante :
Utilitaire de Linting HTML : https://github.com/yaniswang/HTMLHint/wiki/Rules
Utilitaire de Linting CSS : https://github.com/CSSLint/csslint/wiki/Rules
Utilitaire de Linting JS : http://jshint.com/docs/options/
Dans ces fichiers de configuration, vous pouvez galement dfinir le type derreur ou
davertissement afficher. Dans les fichiers de configuration JS, vous pouvez aussi
dfinir le nombre maximal derreurs dtecter.
Haut de la page
Rsultats de l'analyse Linting et panneau Sortie

Les rsultats de l'analyse Linting (erreurs et avertissements) sont rpertoris dans le panneau Sortie. Ce
panneau est disponible en mode ancr au bas de tous les espaces de travail par dfaut. Si le panneau Sortie
est ferm, vous pouvez l'ouvrir en effectuant l'une des actions suivantes :
en cliquant sur l'icne d'tat de l'analyse Linting <icne> dans la barre d'tat de la fentre
Document ;
l'aide du raccourci clavier Maj+F6 ;
en utilisant les options Fentre > Rsultats > Sortie.
Panneau Sortie et icne Linting
502
Licne Linting prsente dans la barre dtat indique les rsultats de lanalyse :
Icne rouge : le document actif comporte des erreurs et des avertissements.
Icne jaune : le document actif ne comporte que des avertissements.
Icne verte : le document actif ne comporte pas derreurs.
Si licne Linting de la barre dtat est rouge ou jaune (pas verte), vous pouvez galement lutiliser pour
ouvrir ou fermer le panneau Sortie.
Les lignes qui contiennent des erreurs ou des avertissements sont respectivement mises en surbrillance en
rouge et en jaune. Vous pouvez double-cliquer sur un message dans le panneau Sortie pour accder
directement la ligne o lerreur sest produite. En mode Code, vous pouvez galement placer la souris sur
les numros des lignes contenant du code erron pour afficher un aperu des erreurs ou avertissements
associs.
Le panneau Sortie rpertorie jusqu 50 messages simultanment, les erreurs apparaissant avant les
avertissements. Au fur et mesure que vous corrigez des erreurs, la liste visible dans le panneau dfile afin
dafficher les erreurs suivantes.
503
Optimisation du code
Nettoyage du code
Vrification de lquilibre des balises et des accolades
Vrification de la compatibilit du navigateur
Validation des documents XML
Validation de documents laide du validateur W3C
Dfinition des prfrences du validateur
Mise en conformit des pages avec le langage XHTML
Haut de la page
Nettoyage du code
Vous pouvez supprimer automatiquement les balises vides, combiner les balises font imbriques et nettoyer
le code HTML ou XHTML dsordonn ou illisible.
Pour plus dinformations sur le nettoyage du code HTML gnr par Microsoft Word, consultez la section
Ouverture et modification de documents existants.
1. Ouvrez un document :
S'il s'agit d'un document HTML, slectionnez Commandes > Nettoyer le code HTML.
Sil sagit dun document XHTML, slectionnez Commandes > Nettoyer le
code XHTML.
La commande Nettoyer le code XHTML permet de nettoyer le code HTML, mais
aussi de corriger les erreurs de syntaxe XHTML, de mettre les attributs de balise en
minuscules et dajouter ou de signaler les attributs manquants dune balise dans un
document XHTML.
2. Dans la bote de dialogue qui s'affiche, dfinissez les options de votre choix, puis cliquez
sur OK.
Remarque : selon la taille du document et le nombre d'options slectionnes, le
nettoyage peut prendre plusieurs secondes.
Supprimer les balises de conteneur vides Supprime toute paire de balises sans
contenu. Par exemple, <b></b> et <font color="#FF0000"></font> sont des
balises vides, mais la balise <b> dans <b>texte</b> ne l'est pas.
Supprimer les balises imbriques redondantes Supprime toutes les occurrences

redondantes d'une balise. Par exemple, dans le code <b>C'est ce que je voulais
<b>vraiment</b> dire</b>, les balises b qui encadrent le mot vraiment sont
redondantes et seront supprimes.
Supprimer les commentaires HTML ne faisant pas partie de Dreamweaver

Supprime tous les commentaires qui nont pas t insrs par Dreamweaver. Par
exemple,  sera supprim, mais
 ne le sera pas, car il sagit
dun commentaire Dreamweaver qui marque le dbut dune zone modifiable dans un
modle.
504
Supprimer les marqueurs spcifiques Dreamweaver Supprime les commentaires

ajouts dans le code par Dreamweaver, pour que les documents soient
automatiquement mis jour en mme temps que les modles et les lments de la
bibliothque. Si vous activez cette option lors du nettoyage du code dun document cr
partir dun modle, le document et son modle sont dissocis. Pour plus dinformations,
consultez la section Dtachement dun document dun modle.
Supprimer des balises spcifiques Supprime les balises spcifies dans la zone de
texte adjacente. Utilisez cette option pour supprimer des balises personnalises insres
par d'autres diteurs visuels, ainsi que les autres balises que vous ne voulez pas voir
apparatre sur votre site (par exemple, blink). Sparez les diffrentes balises par des
virgules (par exemple, font, blink).
Combiner les balises <font> imbriques quand cest possible Combine deux ou
plusieurs balises font se rapportant la mme section de texte. Par exemple, <font
size="7"><font color="#FF0000">rouge</font></font> sera remplac par
<font size="7" color="#FF0000">rouge</font>.
Afficher le journal la fin Affiche un message davertissement dtaillant les

modifications apportes au document ds que le nettoyage est termin.
Haut de la page
Vrification de lquilibre des balises et des accolades

Vous pouvez vrifier que les paires de balises, de parenthses (( )), d'accolades ({ }) et de crochets ([ ]) sont
quilibres dans la page, autrement dit qu' chaque balise, parenthse, accolade ou crochet d'ouverture
correspond une balise, une parenthse, une accolade ou un crochet de fermeture, et inversement.
Vrification de l'quilibrage des accolades

1. Ouvrez le document en mode Code.
2. Placez le point d'insertion dans le code imbriqu vrifier.
3. Choisissez Edition > Slectionner balise parente.
Les balises correspondantes de dlimitation (ainsi que leur contenu) sont slectionnes
dans le code. Si vous cliquez plusieurs fois sur Edition > Slectionner balise parente et
que toutes vos balises sont quilibres, Dreamweaver slectionne finalement les balises
html et /html qui ouvrent et ferment le document.
Vrification de l'quilibre de paires de parenthses, d'accolades ou de

crochets
1. Ouvrez le document en mode Code.
2. Placez le point d'insertion dans le code vrifier.
3. Choisissez Edition > Equilibrer les accolades.
Le code se trouvant entre parenthses, entre accolades ou entre crochets est
slectionn. Choisissez de nouveau Edition > Equilibrer les accolades pour slectionner
le code qui se trouve l'intrieur des parenthses, des accolades ou des crochets
dlimitant la nouvelle slection.
Haut de la page
505
Vrification de la compatibilit du navigateur

Les fonctions de vrification de la compatibilit avec les navigateurs vous permettent de rechercher les
combinaisons de HTML et de feuilles de style CSS pouvant dclencher des problmes de restitution dans
des navigateurs. Cette fonctionnalit teste galement le code de vos documents et dtermine s'il contient des
proprits ou des valeurs CSS non prises en charge par les navigateurs cibles.
Remarque : cette fonction remplace lancienne fonction de vrification du navigateur cible, mais en conserve
la fonctionnalit CSS.
Haut de la page
Validation des documents XML

Vous pouvez dfinir les prfrences du validateur, les problmes spcifiques que celui-ci doit rechercher et
les types d'erreurs qu'il doit signaler.
Dans le cas d'un fichier XML ou XHTML, slectionnez Fichier > Valider > En XML.
Longlet Validation du panneau Rsultats affiche le message Pas derreur ou
davertissement ou numre les erreurs de syntaxe releves.
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.
Haut de la page
Validation de documents laide du validateur W3C

Dreamweaver permet de crer des pages Web normalises grce sa prise en charge intgre du validateur
W3C. Le validateur W3C valide la conformit de vos documents HTML aux normes HTML ou XHTML. Vous
pouvez valider des documents ouverts et des fichiers publis sur un serveur.
Utilisez le rapport gnr aprs la validation afin de corriger les erreurs dans votre fichier.
Validation dun document ouvert

1. Cliquez sur Fentre > Rsultats > Validation pour ouvrir le panneau Validation. Ce
panneau affiche les rsultats de la validation.
2. Slectionnez Fichier > Valider > Valider document actuel (W3C).
Validation d'un document en direct

Pour les documents en direct, Dreamweaver valide le code reu 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 particulirement utile lors de la validation de pages
dynamiques l'aide de PHP, JSP, etc.
Loption Valider un document en direct nest active que si lURL de la page valider commence par
http.
1. Cliquez sur Fentre > Rsultats > Validation pour ouvrir le panneau Validation. Ce
506
panneau affiche les rsultats de la validation.

2. Cliquez sur Affichage en direct.
3. Slectionnez Fichier > Valider > Valider un document en direct (W3C).
Pour les documents en direct, lorsque vous double-cliquez sur une erreur dans le panneau Validation W3C,
une nouvelle fentre s'affiche. Cette fentre affiche le code gnr par le navigateur, o la ligne contenant
l'erreur est mise en surbrillance.
Personnalisation des paramtres de validation

1. Cliquez sur Fentre > Rsultats > Validation pour ouvrir le panneau Validation.
2. Dans le panneau Validation W3C, cliquez sur l'icne Validation W3C (lecture).
Choisissez Paramtres.
3. Slectionnez un DOCTYPE pour la validation si aucun attribut DOCTYPE na t
explicitement dfini pour le document.
4. Si vous ne voulez pas que les erreurs et les avertissements soient affichs, dsactivez
les options correspondantes.
5. Cliquez sur Grer si vous voulez supprimer les avertissements ou les erreurs que vous
avez masqus 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. Slectionnez Ne pas afficher la bote de dialogue du validateur W3C si vous ne
voulez pas que cette fentre saffiche quand la validation commence.
Utilisation des rapports de validation

Lorsque la validation est termine, les rapports de validation s'affichent dans le panneau Validation W3C.
Pour plus d'informations sur une erreur ou un avertissement, slectionnez

l'erreur/l'avertissement dans le panneau Validation W3C. Cliquez sur Plus d'infos.
Pour enregistrer le rapport au format XML, cliquez sur Enregistrer le rapport.
Pour afficher le rapport complet au format HTML, cliquez sur Parcourir le rapport. Le
rapport HTML fournit la liste complte des erreurs et avertissements, accompagne d'un
rsum.
Pour passer l'emplacement de l'erreur dans le code, slectionnez l'erreur dans le
panneau Validation W3C. Cliquez sur le bouton Options, puis choisissez Aller la ligne.
Pour masquer les erreurs/avertissements, slectionnez 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 masques,
cliquez sur le bouton Options. Choisissez Tout afficher. Les erreurs et avertissements
masqus que vous avez supprims dans la bote de dialogue Prfrences ne sont pas
rpertoris.
Pour effacer tous les rsultats du panneau Validation W3C, cliquez sur le bouton Options.
Choisissez Effacer les rsultats.
Haut de la page
Dfinition des prfrences du validateur
507
La fonctionnalit de validation des balises a t abandonne 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 prsente ses
prfrences dans la catgorie Validateur de la bote de dialogue Prfrences.
(Macintosh).
2. Slectionnez la catgorie Validateur W3C dans la liste de gauche.
3. Slectionnez les bibliothques de balises utiliser pour la validation.
Vous ne pouvez pas slectionner plusieurs versions d'un mme langage ou d'une mme
bibliothque de balises. Par exemple, vous ne pouvez pas slectionner la fois
HTML 4.0 et HTML 3.2 ou HTML 2.0. Slectionnez la version la plus ancienne prendre
en compte. En effet, si le document contient du code valide pour HTML 2.0, ce code
sera galement valide pour HTML 4.0.
4. Slectionnez les options daffichage souhaites concernant les types derreurs et
davertissements inclure dans le rapport du validateur.
5. Cliquez sur Appliquer pour que les modifications prennent effet, puis sur Fermer pour
fermer la bote de dialogue Prfrences.
Haut de la page
Mise en conformit des pages avec le langage XHTML

Lorsque vous crez une page, vous pouvez faire en sorte qu'elle soit compatible avec le langage XHTML.
Cette opration est galement possible avec les documents HTML existants.
Cration de documents conformes au code XHTML

2. Slectionnez une catgorie et un type de page crer.
3. Slectionnez l'une des dfinitions de type de document (DTD) XHTML dans le menu
droulant Type de document (DTD) l'extrme droite de la bote de dialogue, puis
cliquez sur Crer.
Par exemple, vous pouvez rendre un document HTML compatible XHTML en
slectionnant XHTML 1.0 Transitional ou XHTML 1.0 Strict dans le menu droulant.
Remarque : cette opration est impossible pour certains types de documents.
Cration par dfaut de documents conformes au langage XHTML

1. Choisissez Edition > Prfrences ou Dreamweaver > Prfrences (Mac OS X), puis
slectionnez la catgorie Nouveau document.
2. Slectionnez un document par dfaut et l'une des dfinitions de type de document
XHTML dans le menu droulant Type de document (DTD), puis cliquez sur OK.
Conformit d'un document HTML avec le langage XHTML

1. Ouvrez un document, puis effectuez l'une des oprations suivantes :
Pour un document sans cadres, cliquez sur Fichier > Convertir, puis slectionnez
508
lune des dfinitions de type de document XHTML.

Pour un document avec cadres, slectionnez un cadre, cliquez sur Fichier >
Convertir, puis slectionnez lune des dfinitions de type de document XHTML.
2. Pour convertir le document entier, rptez cette tape pour chacun des cadres et pour le
document de jeu de cadres.
Remarque : il est impossible de convertir une instance d'un modle, puisqu'elle doit reprendre le mme
langage que le modle d'aprs lequel elle a t cre. Par exemple, un document conu d'aprs un modle
XHTML restera toujours en XHTML ; de mme, un document conu d'aprs un modle HTML non conforme
au langage XHTML restera toujours en HTML et ne pourra pas tre converti en XHTML ni dans aucun autre
langage.

Dfinition des couleurs du code
Recherche de problmes de rendu CSS entre les navigateurs
Code XHTML
509
Modification de code en mode Cration

A propos de la modification de code en mode Cration
Slection de balises enfants en mode Cration
Modification de code avec l'inspecteur Proprits
Modification de code CFML avec l'inspecteur Proprits
Modification d'attributs dans l'inspecteur de balises
Prsentation de Quick Tag Editor
Modification de code avec Quick Tag Editor
Modification de code l'aide du slecteur de balises
Rdaction et modification de scripts en mode Cration
Modification de scripts sur la page l'aide de l'inspecteur Proprits
Utilisation des comportements JavaScript
A propos de la modification de code en mode Cration
Haut de la page
Dreamweaver permet de crer et de modifier visuellement des pages Web sans se soucier du code source sous-jacent. Toutefois, vous serez
peut-tre amen modifier ce code afin de contrler pleinement les oprations effectues sur vos pages ou de corriger les ventuels problmes.
Dreamweaver vous permet de modifier une partie du code en mode Cration.
Cette section est destine aux personnes qui prfrent travailler en mode Cration, mais qui souhaitent galement disposer d'un accs rapide au
code.
Haut de la page
Slection de balises enfants en mode Cration
En mode Cration, si vous slectionnez un objet contenant des balises enfants, par exemple un tableau HTML, vous pouvez slectionner
rapidement la premire balise enfant de cet objet en choisissant Edition > Slectionner enfant.
Remarque : Cette commande est disponible uniquement en mode Cration.
Par exemple, la balise <table> comporte normalement des balises enfants <tr>. Si vous slectionnez une balise <table> dans le slecteur de
balises, vous pouvez slectionner la premire ligne du tableau en choisissant Edition> Slectionner enfant. Dreamweaver slectionne la premire
balise <tr> dans le slecteur de balises. Etant donn que la balise <tr> comporte elle-mme des balises enfants, <td> (dlimiteur de cellule), vous
pouvez choisir nouveau Edition > Slectionner enfant pour slectionner la premire cellule du tableau.
Haut de la page
Modification de code avec l'inspecteur Proprits
Vous pouvez utiliser l'inspecteur Proprits pour examiner et modifier les attributs du texte ou des objets dans votre page. Souvent, les proprits
affiches dans l'inspecteur Proprits correspondent aux attributs des balises ; la modification de l'une de ces proprits dans l'inspecteur revient
en principe modifier l'attribut correspondant en mode Code.
Remarque : L'inspecteur de balises et l'inspecteur Proprits permettent d'afficher et de modifier les attributs des balises. L'inspecteur de balises
permet d'afficher et de modifier l'ensemble des attributs associs une balise donne. L'inspecteur Proprits affiche uniquement les attributs les
plus frquents. En revanche, il contient un nombre plus important de commandes permettant de modifier les valeurs de ces attributs et permet
galement de modifier certains objets (par exemple les colonnes des tableaux) ne correspondant aucune balise spcifique.
1. Cliquez sur le texte ou slectionnez un objet dans la page.
L'inspecteur Proprits pour le texte ou l'objet s'affiche sous la fentre de document. Si l'inspecteur Proprits n'est pas
visible, choisissez Fentre > Proprits.
2. Utilisez l'inspecteur Proprits pour modifier vos attributs.
Modification de code CFML avec l'inspecteur Proprits

L'inspecteur Proprits permet d'examiner et de modifier le code CFML (ColdFusion markup language) en mode Cration.
1. Cliquez sur le bouton Attributs pour modifier les attributs de la balise ou pour en ajouter de nouveaux.
510
Haut de la page
2. Si la balise prsente un contenu entre ses balises d'ouverture et de fermeture, cliquez sur le bouton Contenu pour modifier ce
contenu.
Le bouton Contenu s'affiche uniquement si la balise slectionne n'est pas vide (c'est--dire, si elle possde une balise
d'ouverture et une balise de fermeture).
3. Si la balise contient une expression conditionnelle, apportez vos changements dans la zone Expression.
Haut de la page
Modification d'attributs dans l'inspecteur de balises
L'inspecteur de balises permet de modifier et d'ajouter des attributs et des valeurs d'attributs. L'inspecteur de balises permet de modifier balises et
objets en utilisant une fiche de proprits semblable celles que l'on trouve dans d'autres environnements de dveloppement intgrs (integrated
development environments, IDE).
1. Dans la fentre de document, effectuez l'une des procdures suivantes :
En mode Code (ou dans l'inspecteur de code), cliquez sur le nom d'une balise ou sur son contenu.
En mode Cration, slectionnez un objet ou slectionnez une balise dans le slecteur de balises.
2. Ouvrez l'inspecteur de balises (Fentre > Inspecteur de balises) et choisissez l'onglet Attributs.
Les attributs de la slection et les valeurs actuellement dfinies s'affichent dans l'inspecteur de balises.
3. Dans l'inspecteur de balises, effectuez l'une des oprations suivantes :
Pour afficher les attributs par catgories, cliquez sur le bouton Afficher la vue par catgorie
Pour afficher les attributs par ordre alphabtique, cliquez sur le bouton Afficher la vue sous forme de liste
Pour modifier la valeur de l'attribut, slectionnez cette valeur puis modifiez-la.

Pour ajouter une valeur un attribut qui n'en a pas, cliquez dans la colonne des valeurs d'attribut situe droite de
l'attribut, puis indiquez votre valeur.
Si l'attribut accepte les valeurs prdfinies, slectionnez une valeur dans le menu droulant (ou le slecteur de couleur)
situ droite de la colonne des valeurs d'attribut.
Si la valeur de l'attribut correspond une URL, cliquez sur le bouton Parcourir, utilisez l'icne du pointeur pour
slectionner un fichier, ou tapez le nom de l'URL dans la zone de texte.
Si la valeur de l'attribut correspond une source de contenu dynamique (par exemple, une base de donnes), cliquez sur
le bouton Donnes dynamiques situ droite de la colonne des valeurs d'attribut. Slectionnez ensuite votre source.
Pour supprimer la valeur de l'attribut, slectionnez la valeur supprimer, puis appuyez sur la touche Retour arrire
(Windows) ou Retour (Macintosh).
Pour modifier le nom d'un attribut, slectionnez le nom d'attribut souhait, puis modifiez-le.
Remarque : Si vous modifiez le nom d'un attribut standard et que vous lui attribuez une nouvelle valeur, le nouvel attribut
et la valeur qui lui est associe sont automatiquement dplacs dans la catgorie approprie.
Pour ajouter un attribut ne figurant pas sur la liste, cliquez sur l'espace vide au bas de cette liste, puis saisissez le nom de
l'attribut ajouter.
4. Pour que les modifications apportes soient prises en compte dans votre document, appuyez sur la touche Entre (Windows)
ou Retour (Macintosh) ou cliquez un autre endroit de l'inspecteur de balises.
Haut de la page
Prsentation de Quick Tag Editor
Vous pouvez utiliser Quick Tag Editor pour examiner, insrer et modifier rapidement des balises HTML sans quitter le mode Cration.
Si vous tapez des lments de code HTML non valides dans Quick Tag Editor, Dreamweaver tente de les corriger en insrant au besoin des
guillemets ou des crochets de fermeture.
Pour dfinir les options de Quick Tag Editor, ouvrez-le en appuyant sur Ctrl+T (Windows) ou sur Commande+T (Macintosh).
Quick Tag Editor comporte trois modes :
Insrer HTML, qui permet d'insrer de nouveaux lments de code HTML ;
Modifier la balise, qui permet de modifier une balise existante ;
Envelopper avec balise, qui permet d'insrer une nouvelle balise de part et d'autre d'une slection.
Remarque : Le mode dans lequel s'ouvre Quick Tag Editor dpend de la slection en cours en mode Cration.
Dans les trois modes, le fonctionnement de base de Quick Tag Editor reste le mme : ouvrez l'diteur, saisissez ou modifiez
des balises et des attributs, puis fermez l'diteur.
511
Lorsque Quick Tag Editor est actif, vous pouvez passer d'un mode l'autre en appuyant sur Ctrl+T (Windows) ou
Commande+T (Macintosh).
Haut de la page
Modification de code avec Quick Tag Editor

Quick Tag Editor permet d'examiner et de modifier rapidement les balises HTML sans quitter le mode Cration.
Insertion d'une balise HTML

1. En mode Cration, cliquez dans la page pour placer le point d'insertion l'endroit o vous voulez insrer le code.
2. Appuyez sur Ctrl+T (Windows) ou Commande+T (Macintosh).
Quick Tag Editor s'ouvre en mode Insrer HTML.
3. Saisissez la balise HTML, puis appuyez sur Entre.

La balise est insre dans votre code. Le cas chant, la balise de fermeture correspondante est galement insre.
4. Appuyez sur la touche Echap pour quitter Quick Tag Editor sans apporter aucun changement.
Modification d'une balise HTML

1. Slectionnez un objet en mode Cration.
Vous pouvez galement slectionner la balise que vous voulez modifier partir du slecteur de balise figurant au bas de la
fentre de document. Pour plus d'informations, consultez la section Modification de code l'aide du slecteur de balises.
2. Appuyez sur Ctrl+T (Windows) ou Commande+T (Macintosh).
Quick Tag Editor s'ouvre en mode Modifier la balise.
3. Saisissez de nouveaux attributs, modifiez les attributs existants ou modifiez le nom de la balise.
4. Appuyez sur Tab pour passer d'un attribut l'autre et sur Maj+Tab pour revenir en arrire.
Remarque : Par dfaut, les modifications sont appliques au document lorsque vous appuyez sur Tab ou Maj+Tab.
5. Pour fermer Quick Tag Editor et appliquer toutes les modifications, appuyez sur Entre.
6. Pour quitter Quick Tag Editor sans apporter d'autres changements, appuyez sur Echap.
Insertion de balises HTML de part et d'autre d'une slection

1. Slectionnez du texte ou un objet non mis en forme en mode Cration.
Remarque : Si vous slectionnez une chane de texte ou un objet comportant une balise HTML d'ouverture ou de fermeture,
Quick Tag Editor s'affiche en mode Modifier la balise et non en mode de balise enveloppante.
2. Appuyez sur Ctrl+T (Windows) ou Commande+T (Macintosh), ou cliquez sur le bouton Quick Tag Editor dans l'inspecteur
Proprits.
Quick Tag Editor s'ouvre en mode Envelopper avec balise.
3. Saisissez une balise d'ouverture, par exemple strong, puis appuyez sur Entre (Windows) ou Retour (Macintosh).
La balise est insre au dbut de la slection en cours et une balise de fermeture correspondante est insre la fin.
4. Pour quitter Quick Tag Editor sans apporter de changements, appuyez sur Echap.
Haut de la page
Dans Quick Tag Editor, vous pouvez accder un menu contextuel d'attributs rpertoriant tous les attributs valides de la balise que vous modifiez
ou insrez.
Vous pouvez galement dsactiver le menu contextuel ou modifier le dlai s'coulant avant l'apparition du menu droulant dans Quick Tag Editor.
Pour afficher un menu contextuel rpertoriant les attributs de balise valides, arrtez-vous quelques secondes pendant la modification d'un nom
d'attribut dans Quick Tag Editor. Un menu contextuel apparat, rpertoriant tous les attributs valides de la balise que vous modifiez.
De mme, arrtez-vous quelques secondes pendant la saisie ou la modification d'un nom de balise dans Quick Tag Editor pour afficher le menu
contextuel correspondant aux balises.
Remarque : Les prfrences d'indication de code de Quick Tag Editor sont rgies par les prfrences gnrales d'indication de code. Pour plus
d'informations, consultez la section Dfinition des prfrences de conseils de code.
512
Utilisation d'un menu de conseils de code

Commencez la saisie d'une balise ou d'un attribut. Le menu Conseils de code affiche le premier lment commenant par
les lettres que vous venez de taper.
Appuyez sur les touches flches Haut et Bas de votre clavier pour slectionner un lment.
Recherchez un lment l'aide de la barre de dfilement.
2. Pour insrer un lment, slectionnez-le, puis appuyez sur la touche Entre ou double-cliquez dessus.
3. Pour fermer le menu contextuel sans slectionner d'lment, appuyez sur la touche Echap ou poursuivez la saisie de votre
texte.
Dsactivation du menu contextuel ou modification du dlai s'coulant avant l'apparition du menu

contextuel
1. Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh) puis choisissez Conseils de code.
La bote de dialogue Prfrences de conseil de code s'affiche.
2. Pour dsactiver le menu des conseils, dslectionnez l'option Activer les conseils de code.
3. Pour modifier le dlai avant l'apparition du menu, rglez le curseur Dlai, puis cliquez sur OK.
Modification de code l'aide du slecteur de balises
Haut de la page
Vous pouvez utiliser le slecteur de balises pour slectionner, modifier ou supprimer les balises sans quitter le mode Cration. Le slecteur de
balises se trouve dans la barre d'tat en bas de la fentre de document, et prsente une srie de balises, comme suit :
Modification ou suppression d'une balise

1. Cliquez dans le document.
Les balises qui s'appliquent au niveau du point d'insertion s'affichent dans le slecteur de balises.
2. Cliquez l'aide du bouton droit (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) sur une balise dans le
slecteur de balises.
3. Pour modifier une balise, choisissez Modifier la balise dans le menu. Apportez les modifications requises dans Quick Tag
Editor. Pour plus d'informations, consultez la section Modification de code avec Quick Tag Editor.
4. Pour supprimer une balise, choisissez Supprimer la balise dans le menu.
Slection d'un objet correspondant une balise

1. Cliquez dans le document.
Les balises qui s'appliquent au niveau du point d'insertion s'affichent dans le slecteur de balises.
2. Cliquez sur une balise dans le slecteur de balises.
L'objet reprsent par la balise est slectionn sur la page.
Utilisez cette technique pour slectionner des lignes de tableau (balises tr) ou des cellules (balises td).
Rdaction et modification de scripts en mode Cration
Haut de la page
Vous pouvez travailler avec des scripts JavaScript et VBScript ct client en modes Cration et Code, en procdant des manires suivantes :
Vous pouvez crire un script JavaScript ou VBScript pour votre page sans quitter le mode Cration.
Vous pouvez crer un lien dans votre document vers un fichier script externe sans quitter le mode Cration.
Vous pouvez modifier un script sans quitter le mode Cration.
Avant toute chose, assurez-vous que l'affichage des marqueurs de script sur la page est activ en slectionnant Affichage >
Assistances visuelles > Elments invisibles.
Rdaction d'un script ct client

1. Placez le point d'insertion l'endroit o vous voulez insrer le script.
2. Choisissez Insertion > HTML > Objets Script > Script.
3. Choisissez le langage de script dans le menu droulant Langage.
513
Si vous utilisez JavaScript sans tre certain de la version, choisissez JavaScript plutt que JavaScript1.1 ou JavaScript1.2.
4. Saisissez ou collez le code de script dans la zone Contenu.
Vous n'avez pas besoin d'inclure les balises script de fermeture et d'ouverture.
5. Saisissez ou collez le code HTML dans la zone Aucun script. Les navigateurs ne prenant pas en charge le langage de script
slectionn affichent ce code au lieu d'excuter le script.
6. Cliquez sur OK.
Cration d'un lien vers un fichier script externe

1. Placez le point d'insertion l'endroit o vous voulez insrer le script.
2. Choisissez Insertion > HTML > Objets Script > Script.
3. Cliquez sur OK sans complter la zone de texte Contenu.
4. Slectionnez le marqueur de script dans le mode Cration de la fentre de document.
5. Dans l'inspecteur Proprits, cliquez sur l'icne de dossier pour rechercher et slectionner le fichier de script externe ou tapez
le nom de fichier dans la zone Source.
Modification d'un script

1. Slectionnez le marqueur de script.
2. Dans l'inspecteur Proprits, cliquez sur le bouton Edition.
Le script s'affiche dans la bote de dialogue Proprits du script.
Si vous avez cr un lien vers un fichier de script externe, le fichier s'ouvre en mode Code ; vous pouvez alors apporter vos
modifications.
Remarque : Si les balises script renferment des lments de code, la bote de dialogue Proprits du script s'affiche, mme si
vous avez cr un lien vers un fichier de script externe.
3. Dans la zone Langage, indiquez soit JavaScript soit VBScript comme langage de script.
4. Dans le menu droulant Type, indiquez le type de script, soit ct client, soit ct serveur.
5. (Facultatif) Dans la zone Source, indiquez un fichier de script externe li.
Cliquez sur l'icne de dossier
ou sur le bouton Parcourir pour rechercher le fichier, ou entrez le chemin d'accs.
6. Modifiez le script, puis cliquez sur OK.
Modification de scripts ASP ct serveur en mode Cration

L'inspecteur Proprits de script ASP permet d'examiner et de modifier les scripts ASP ct serveur en mode Cration.
1. En mode Cration, slectionnez l'icne visuelle de balise de langage de serveur.
2. Dans l'inspecteur Proprits de script ASP, cliquez sur le bouton Modifier
3. Modifiez le script ASP ct serveur, puis cliquez sur OK.
Modification de scripts sur la page l'aide de l'inspecteur Proprits
Haut de la page
1. Dans le menu droulant Langage de l'inspecteur Proprits, slectionnez le langage de script souhait ou saisissez
directement son nom dans la zone de texte Langage.
Remarque : Si vous utilisez JavaScript sans tre certain de la version, choisissez JavaScript plutt que JavaScript1.1 ou
JavaScript1.2.
2. Dans le menu droulant Type, indiquez le type de script, soit ct client, soit ct serveur.
3. (Facultatif) Dans la zone Source, indiquez un fichier de script externe li. Tapez le chemin d'accs ou cliquez sur l'icne du
dossier
pour slectionner le fichier.
4. Cliquez sur Modifier pour modifier le script.
Haut de la page
Utilisation des comportements JavaScript
L'onglet Comportements de l'inspecteur de balises permet d'associer aisment des comportements JavaScript (ct client) aux lments d'une
page. Pour plus d'informations, voir Application de comportements JavaScript intgrs.
Voir aussi
514
515
Utilisation de contenu d'en-tte pour les pages

Affichage et modification de contenu d'en-tte
Dfinition des proprits meta pour la page
Dfinition du titre de la page
Dfinition de mots-cls pour la page
Dfinition de descriptions pour la page
Dfinition des proprits d'actualisation de la page
Dfinition des proprits d'URL de base de la page
Dfinition des proprits de liaison de la page
Les pages contiennent des lments qui dcrivent les informations figurant sur la page ; ces lments sont utiliss par les moteurs de recherche.
Vous pouvez dfinir les proprits des lments head pour contrler la faon dont vos pages sont identifies.
Haut de la page
Affichage et modification de contenu d'en-tte
Vous pouvez afficher les lments de l'en-tte head d'un document via le menu Affichage, le mode Code de la fentre de document ou
l'inspecteur de code.
Affichage des lments de la section d'en-tte d'un document

Slectionnez Affichage > Contenu de l'en-tte. Pour chaque lment de la section head, un marqueur s'affiche dans le haut de la fentre de
document en mode Cration.
Remarque : Si la fentre de document affiche uniquement le mode Code, la commande Affichage > Contenu de l'en-tte est grise.
Insertion d'un lment dans la section d'en-tte d'un document

1. Slectionnez un lment du sous-menu Insertion > HTML > Balises d'en-tte.
2. Choisissez les options applicables l'lment dans la bote de dialogue qui s'affiche alors, ou dans l'inspecteur Proprits.
Modification d'un lment de la section d'en-tte d'un document

1. Slectionnez Affichage > Contenu de l'en-tte.
2. Cliquez sur l'une des icnes de la section head pour la slectionner.
3. Dfinissez ou modifiez les proprits de l'lment dans l'inspecteur Proprits.
Haut de la page
Dfinition des proprits meta pour la page
Une balise meta est un lment de la section head qui enregistre des informations sur la page en cours, comme le codage des caractres,
l'auteur, le copyright ou les mots-cls. Ces balises permettent galement de transmettre des informations au serveur, par exemple la date
d'expiration de la page, son intervalle de ractualisation et sa classification POWDER. (Le format de classification POWDER, Protocol for Web
Description Resources, permet de dfinir un niveau d'interdiction d'accs pour des raisons morales, comme la classification des films, aux pages
Web.)
Ajout d'une balise meta

1. Choisissez Insertion > HTML > Balises d'en-tte > Meta.
2. Dfinissez les proprits dans la bote de dialogue qui s'affiche.
Modification d'une balise meta existante

2. Slectionnez le marqueur Meta qui apparat en haut de la fentre de document.
3. Dfinissez les proprits dans l'inspecteur Proprits.
Proprits d'une d'une balise meta

Dfinissez les proprits de la balise meta comme suit :
Attribut Indique si la balise meta contient des informations descriptives sur la page (name) ou des informations d'en-tte HTTP (http-equiv).
516
Valeur Indique le type d'informations que vous donnez dans cette balise. Certaines valeurs, telles que description, keywords et refresh, sont dj
bien dfinies (et disposent de leurs propres inspecteurs de proprits dans Dreamweaver), mais vous pouvez indiquer pratiquement n'importe
quelle valeur (par exemple creationdate, documentID ou level).
Contenu Est l'information elle-mme. Si, par exemple, vous spcifiez level pour Valeur, vous pouvez spcifier beginner, intermediate ou
advanced pour Contenu.
Haut de la page
Dfinition du titre de la page
Le titre ne possde qu'une proprit : le titre de la page. Le titre apparat dans la barre de titre de la fentre de document dans Dreamweaver,
ainsi que dans la barre de titre de la plupart des navigateurs. Le titre apparat galement dans la barre d'outils de la fentre de document.
Dfinition du titre dans la fentre de document

Entrez le titre dans la zone Titre de la barre d'outils de la fentre de document.
Dfinition du titre dans le contenu de l'en-tte

2. Slectionnez le marqueur Title qui apparat en haut de la fentre de document.
3. Dfinissez le titre de la page dans l'inspecteur Proprits.
Haut de la page
Dfinition de mots-cls pour la page
De nombreux robots de moteurs de recherche (programmes parcourant automatiquement le Web pour collecter les informations ensuite indexes
par les moteurs de recherche) lisent le contenu de la balise meta Keywords, et utilisent ces informations pour indexer les pages dans leur base de
donnes. Comme certains moteurs de recherche limitent le nombre de mots-cls ou de caractres qu'ils indexent, ou ignorent tous les mots-cls
si vous dpassez la limite, il est judicieux de n'en utiliser que quelques-uns qui soient bien cibls.
Ajout d'une balise meta Keywords

1. Choisissez Insertion > HTML > Balises d'en-tte > Keywords.
2. Dfinissez les mots-cls, spars par des virgules, dans la bote de dialogue qui s'affiche.
Modification d'une balise meta Keywords

2. Slectionnez le marqueur Keywords qui apparat en haut de la fentre de document.
3. Dans l'inspecteur Proprits, consultez, modifiez ou supprimez des mots-cls. Vous pouvez galement ajouter des mots-cls
en les sparant par des virgules.
Haut de la page
Dfinition de descriptions pour la page
De nombreux robots de moteurs de recherche (programmes parcourant automatiquement le Web pour collecter les informations ensuite indexes
par les moteurs de recherche) lisent le contenu de la balise meta Description. Certains utilisent ces informations pour indexer vos pages dans
leurs bases de donnes, et certains affichent galement ces informations sur la page de rsultats de la recherche (au lieu d'afficher les premires
lignes du document). Certains moteurs de recherche limitant le nombre de caractres qu'ils indexent, il est judicieux de limiter votre description
quelques mots (par exemple, Spcialits de grillades de porc Albany, Gorgie, ou conception de sites Web des prix raisonnables dans le
monde entier).
Ajout d'une balise meta Description

1. Choisissez Insertion > HTML > Balises d'en-tte > Description.
2. Tapez le descriptif de votre site dans la bote de dialogue qui s'affiche.
Modification d'une balise meta Description

2. Slectionnez le marqueur Description qui apparat en haut de la fentre de document.
3. Dans l'inspecteur Proprits, consultez, modifiez ou supprimez le texte de la description.
Dfinition des proprits d'actualisation de la page
Haut de la page
L'lment Refresh (Actualisation) permet d'indiquer au navigateur s'il doit actualiser automatiquement votre page (en rechargeant la page en cours
ou en affichant une autre page) aprs un certain laps de temps. Cet lment est frquemment utilis pour rediriger les utilisateurs vers une autre
517
URL, notamment aprs avoir affich un message indiquant que l'URL a chang.
Ajout d'une balise meta Refresh

1. Choisissez Insertion > HTML > Balises d'en-tte > Refresh.
2. Dfinissez les proprits de la balise meta Refresh dans la bote de dialogue qui s'affiche.
Modification d'une balise meta Refresh

2. Slectionnez le marqueur Refresh qui apparat en haut de la fentre de document.
3. Dans l'inspecteur Proprits, dfinissez les proprits de la balise meta Refresh.
Dfinition des proprits d'une balise meta Refresh

Dfinissez les proprits de la balise meta Refresh comme suit :
Dlai Dure, exprime en secondes, qui s'coule avant que la page ne soit actualise par le navigateur. Pour que le navigateur actualise la page
immdiatement aprs l'avoir charge, saisissez 0 dans cette zone.
URL ou Action Indique si le navigateur doit se diriger vers une autre URL ou actualiser la page en cours, aprs le dlai spcifi. Pour ouvrir une
autre URL (plutt que d'actualiser la page en cours), cliquez sur le bouton Parcourir, puis naviguez vers et slectionnez la page charger.
Dfinition des proprits d'URL de base de la page
Haut de la page
L'lment Base permet de dfinir l'URL de base laquelle tous les chemins relatifs du document font rfrence.
Ajout d'une balise meta Base

1. Choisissez Insertion > HTML > Balises d'en-tte > Base.
2. Dfinissez les proprits de la balise meta Base dans la bote de dialogue qui s'affiche.
Modification d'une balise meta Base

2. Slectionnez le marqueur Base qui apparat en haut de la fentre de document.
3. Dans l'inspecteur Proprits, dfinissez les proprits de la balise meta Base.
Dfinition des proprits d'une balise meta Base

Dfinissez les proprits de la balise meta Base comme suit :
Href L'URL de base. Cliquez sur le bouton Parcourir pour naviguer vers et slectionner un fichier, ou saisissez le chemin du fichier dans la zone.
Cible Indique le cadre ou la fentre o tous les documents lis doivent s'ouvrir. Choisissez l'un des cadres du jeu de cadres actif, ou l'un des
noms de fentre rservs ci-dessous :
_parent charge le document li dans le jeu de cadres parent ou dans la fentre parente du cadre contenant le lien. Si le cadre
contenant le lien n'est pas imbriqu, alors il est quivalent _top : le document li est charg dans la fentre de base du
navigateur.
_self charge le document li dans le mme cadre (ou la mme fentre) que le lien. Il s'agit de la cible par dfaut, il est donc en
gnral inutile de la spcifier.
_top charge le document li dans la fentre de base du navigateur, en supprimant tous les cadres.
Haut de la page
Dfinition des proprits de liaison de la page

La balise link permet de dfinir une relation entre le document actif et une autre page.
Remarque : La balise link de la section head agit diffremment d'un lien HTML insr dans la section body et joignant des documents.
Ajout d'une balise meta Link

1. Choisissez Insertion > HTML > Balises d'en-tte > Link.
2. Dfinissez les proprits de la balise meta Link dans la bote de dialogue qui s'affiche.
Modification d'une balise meta Link

2. Slectionnez le marqueur Link qui apparat en haut de la fentre de document.
518
3. Dans l'inspecteur Proprits, dfinissez les proprits de la balise meta Link.
Dfinition des proprits d'une balise meta Link

Dfinissez les proprits de la balise meta Link comme suit :
Href L'URL (adresse Internet) du fichier vers laquelle vous dfinissez une relation. Cliquez sur le bouton Parcourir pour naviguer vers et
slectionner un fichier, ou saisissez le chemin du fichier dans la zone. Notez que cet attribut n'indique pas un fichier vers lequel vous tablissez un
lien, au sens o on l'entend gnralement en HTML ; les relations dfinies dans un lment Lien sont plus complexes.
ID Spcifie un identificateur unique pour le lien.
Titre Dcrit cette relation. Cet attribut est particulirement utilis pour les feuilles de style lies. Pour plus d'informations sur les feuilles de style
externes, consultez les spcifications HTML 4.0 sur le site du World Wide Web Consortium, www.w3.org/TR/REC-html40/present/styles.html#styleexternal.
Rel Spcifie la relation entre le document actif et celui indiqu dans la zone Href. Les valeurs possibles sont les suivantes : Alternate, Stylesheet,
Start, Next, Prev, Contents, Index, Glossary, Copyright, Chapter, Section, Subsection, Appendix, Help et Bookmark. Pour prciser plusieurs
relations, sparez les valeurs par un espace.
Rev Spcifie la relation inverse (l'oppos de Rel) entre le document actif et celui indiqu dans la zone Href. Les valeurs possibles sont les mmes
que pour Rel.
519
Utilisation des inclusions ct serveur

A propos des inclusions ct serveur
Insertion d'inclusions ct serveur
Modification du contenu d'une inclusion ct serveur
Haut de la page
A propos des inclusions ct serveur
Dreamweaver permet d'insrer des inclusions ct serveur dans vos pages, de modifier ces inclusions ou d'afficher un aperu des pages
contenant des inclusions.
Une inclusion ct serveur correspond un fichier incorpor dans un document par un serveur lorsque ce document est sollicit par un
navigateur.
Lorsque le navigateur du visiteur sollicite le document contenant l'instruction d'inclusion, le serveur traite cette dernire en crant un nouveau
document dans lequel le contenu du fichier inclus remplace l'instruction d'inclusion. Le serveur envoie ensuite ce nouveau document au navigateur
du visiteur. Cependant, lorsque vous ouvrez un document local directement dans un navigateur, c'est--dire sans utiliser le serveur pour traiter les
instructions d'inclusion dans ce document, le navigateur ouvre le document sans traiter ces instructions et le fichier cens tre inclus n'apparat pas
dans le navigateur. Il peut donc s'avrer difficile, sans Dreamweaver, de consulter les fichiers locaux et de les voir tels qu'ils apparatront une fois
que vous les aurez placs sur le serveur.
Grce Dreamweaver, vous pouvez prvisualiser les documents tels qu'ils apparaissent sur le serveur, la fois dans le mode Cration et lorsque
vous utilisez la fonctionnalit Aperu dans le navigateur. Toutefois, pour ce faire, vous devez veiller prvisualiser le fichier contenant l'inclusion
en tant que fichier temporaire. Choisissez Edition > Prfrences, puis la catgorie Aperu dans le navigateur, et assurez-vous que l'option Aperu
l'aide d'un fichier temporaire est bien active.
Remarque : Si vous utilisez un serveur de test (comme Apache ou Microsoft IIS) pour prvisualiser vos fichiers sur votre lecteur local, il n'est pas
ncessaire de prvisualiser le fichier en tant que fichier temporaire, car le serveur se charge du traitement pour vous.
Placer une instruction ct serveur dans un document a pour effet d'insrer une rfrence un fichier externe, sans insrer le contenu du fichier
spcifi dans le document actif. Le fichier spcifi ne doit contenir que ce que vous voulez inclure. En d'autres termes, le fichier d'inclusion ne doit
pas contenir de balises head, body, html (c'est--dire la balise <html> ; les balises HTML de formatage telles que p ou div ne posent aucun
problme). Si le fichier contient de telles balises, elles provoqueront un conflit avec celles qui se trouvent dans le document d'origine, et
Dreamweaver ne pourra pas afficher correctement la page.
Vous ne pouvez pas modifier le fichier inclus directement dans un document. Pour modifier le contenu d'une SSI, vous devez modifier directement
le fichier que vous incluez. Toute modification apporte au fichier externe est automatiquement reflte dans chaque document dans lequel il est
inclus.
Il existe deux types d'inclusions partir du serveur : les inclusions Virtuel et Fichier. Dreamweaver insre par dfaut des inclusions de type Fichier.
Vous pouvez toutefois employer l'inspecteur Proprits pour slectionner celle qui convient au type de serveur Web que vous utilisez :
Si votre serveur est un serveur Web Apache, slectionnez Virtuel. Dans Apache, Virtuel fonctionne dans tous les cas, tandis
que Fichier fonctionne seulement dans certains cas.
Si votre serveur est un serveur Microsoft IIS (Internet Information Server), slectionnez Fichier Virtuel ne fonctionne avec IIS
que dans des cas prcis.
Remarque : Malheureusement, IIS ne permet pas d'inclure un fichier dans un dossier situ au-dessus du dossier en cours
dans la hirarchie des fichiers, moins qu'un logiciel spcial n'ait t install sur le serveur. Pour pouvoir inclure un fichier d'un
dossier plac plus haut dans la hirarchie des dossiers sur un serveur IIS, demandez votre administrateur systme si le
logiciel ncessaire est install.
Pour les autres types de serveurs, ou si vous ne savez pas quel type de serveur vous utilisez, demandez votre
administrateur systme l'option utiliser.
Certains serveurs sont configurs de faon examiner tous les fichiers pour voir s'ils contiennent des inclusions ct serveur,
et d'autres pour examiner uniquement les fichiers portant une extension particulire, telle que .shtml, .shtm ou .inc. Si une
inclusion ct serveur ne fonctionne pas, demandez votre administrateur systme si le nom du fichier utilisant l'inclusion doit
avoir une extension spciale. Par exemple, si le fichier porte le nom canoe.html, il vous faudra peut-tre remplacer ce nom par
canoe.shtml. Si vous voulez que vos fichiers conservent leurs extensions .html ou .htm, demandez votre administrateur
systme de configurer le serveur de faon ce qu'il examine tous les fichiers (et pas seulement les fichiers portant une
certaine extension) pour les inclusions partir du serveur. L'analyse des inclusions partir du serveur demandant toutefois un
peu plus de temps, les pages analyses par le serveur s'affichent un peu plus lentement que les autres pages. Pour cette
raison, certains administrateurs systme ne donnent pas la possibilit d'analyser tous les fichiers.
520
Haut de la page
Insertion d'inclusions ct serveur

Dreamweaver permet d'insrer des inclusions ct serveur dans vos pages.
Insertion d'une inclusion ct serveur

1. Slectionnez Insertion > Inclusion ct serveur.
2. Dans la bote de dialogue qui s'affiche, recherchez le fichier et slectionnez-le.
Par dfaut, un type de fichier inclure est insr.
3. Pour modifier le type inclure, slectionnez l'inclusion ct serveur dans la fentre Document et modifiez son type dans
l'inspecteur Proprits (Fentre > Proprits), comme suit :
Si votre serveur est un serveur Web Apache, slectionnez Virtuel. Dans Apache, Virtuel fonctionne dans tous les cas,
tandis que Fichier fonctionne seulement dans certains cas.
Si votre serveur est un serveur Microsoft IIS (Internet Information Server), slectionnez Fichier (Virtuel ne fonctionne
avec IIS que dans des cas prcis).
Remarque : Malheureusement, IIS ne permet pas d'inclure un fichier dans un dossier situ au-dessus du dossier en cours
dans la hirarchie des fichiers, moins qu'un logiciel spcial n'ait t install sur le serveur. Pour pouvoir inclure un fichier
d'un dossier plac plus haut dans la hirarchie des dossiers sur un serveur IIS, demandez votre administrateur systme
si le logiciel ncessaire est install.
Pour les autres types de serveurs, ou si vous ne savez pas quel type de serveur vous utilisez, demandez votre
administrateur systme l'option utiliser.
Changement de fichier inclus

1. Slectionnez la SSI dans la fentre de document.
2. Ouvrez l'inspecteur Proprits (Fentre > Proprits).
Cliquez sur l'icne de dossier et localisez puis slectionnez le nouveau fichier inclure.
Dans la zone de texte, tapez le chemin et le nom de fichier du nouveau fichier inclure.
Modification du contenu d'une inclusion ct serveur
Haut de la page
Dreamweaver permet de modifier des inclusions ct serveur. Pour modifier le contenu associ au fichier inclus, vous devez ouvrir le fichier.
1. Slectionnez l'inclusion ct serveur soit en mode Cration, soit en mode Code, et cliquez sur Modifier dans l'inspecteur
Proprits.
Le fichier inclus s'ouvre dans une nouvelle fentre de document.
2. Modifiez le fichier puis enregistrez-le.
Les modifications sont immdiatement refltes dans le document actif et dans tous les autres documents ultrieurs qui
incluent ce fichier.
3. Si ncessaire, tlchargez le fichier inclus vers le site distant.
521

A propos des bibliothques de balises de Dreamweaver
Ouverture et fermeture de l'diteur de la bibliothque de balises
Ajout de bibliothques, de balises et d'attributs
Modification de bibliothques, de balises et d'attributs
Suppression de bibliothques, de balises et d'attributs
A propos des bibliothques de balises de Dreamweaver
Haut de la page
Une bibliothque de balises de Dreamweaver est une collection de balises d'un type donn accompagne d'informations sur le formatage des
balises par Dreamweaver. Les bibliothques de balises fournissent des informations propos des balises utilises par Dreamweaver pour les
conseils de code, les vrifications de navigateurs cibles, le slecteur de balises et autres options de codage. L'diteur de la bibliothque de balises
vous permet d'ajouter et de supprimer des bibliothques de balises, des balises, des attributs et des valeurs d'attribut, de dfinir les proprits
d'une bibliothque de balises, y compris le format (pour faciliter l'identification dans le code), ainsi que de modifier les balises et les attributs.
Ouverture et fermeture de l'diteur de la bibliothque de balises
Haut de la page
1. Choisissez Edition > Bibliothques de balises pour ouvrir l'diteur de la bibliothque de balises.
La bote de dialogue Editeur de la bibliothque de balises s'affiche. Le contenu de cette bote de dialogue varie selon la balise
slectionne.
2. Fermez l'diteur de la bibliothque de balises en procdant d'une des faons suivantes :
Pour enregistrer les modifications, cliquez sur OK.
Pour fermer l'diteur sans enregistrer les modifications, cliquez sur Annuler.
Remarque : Lorsque vous cliquez sur Annuler, toutes les modifications apportes la bibliothque de balises sont
effaces. Si vos modifications incluaient la suppression d'une balise ou d'une bibliothque, celle-ci est restaure.
Haut de la page
Ajout de bibliothques, de balises et d'attributs
L'diteur de la bibliothque de balises permet d'ajouter des bibliothques de balises ou des balises et des attributs aux bibliothques de balises
dans Dreamweaver.
Ajout d'une bibliothque de balises

1. Dans la bote de dialogue Editeur de la bibliothque de balises (Edition > Bibliothques de balises), cliquez sur le bouton
Plus (+) et choisissez Nouvelle bibliothque de balises.
2. Dans la zone de texte Nom de la bibliothque, entrez un nom (par exemple, balises diverses), puis cliquez sur OK.
Ajout de balises une bibliothque de balises

Plus (+) et choisissez Nouvelles balises.
2. Dans le menu droulant Bibliothque de balises, choisissez une bibliothque de balises.
3. Saisissez le nom de la nouvelle balise. Pour ajouter plusieurs balises, sparez leurs noms par une virgule suivie d'un espace
(par exemple : cfgraph, cfgraphdata).
4. Si les nouvelles balises ont des balises de fin correspondantes (</...>), slectionnez Avoir des balises de fin correspondantes.
5. Cliquez sur OK.
Ajout d'attributs une balise

Plus (+) et choisissez Nouveaux attributs.
2. Dans le menu droulant Bibliothque de balises, choisissez une bibliothque de balises.
3. Slectionnez une balise dans le menu contextuel Balise.
522
4. Saisissez le nom du nouvel attribut. Pour ajouter plusieurs attributs, sparez leurs noms par une virgule suivie d'un espace
(par exemple : width, height).
5. Cliquez sur OK.
Modification de bibliothques, de balises et d'attributs
Haut de la page
L'diteur de la bibliothque de balises vous permet de dfinir les proprits d'une bibliothque de balises ou modifier les balises et les attributs
d'une bibliothque.
Dfinition des proprits d'une bibliothque de balises

1. Dans la bote de dialogue Editeur de la bibliothque de balises (Edition > Bibliothques de balises), slectionnez une
bibliothque de balises (et non une balise) dans la liste des balises.
Remarque : Les proprits des bibliothques de balises s'affichent uniquement quand une bibliothque de balises est
slectionne. Les bibliothques de balises sont reprsentes par les dossiers de niveau suprieur dans la liste des balises.
Par exemple, le dossier des balises HTML reprsente une bibliothque de balises, et dans ce dossier, le sous-dossier abbr
reprsente une balise.
2. Dans la liste Utilis dans, slectionnez tous les types de document qui seront utiliss par la bibliothque de balises.
Les types de documents slectionns ici sont ceux qui fourniront les conseils de code pour la bibliothque de balises
spcifie. Par exemple, si l'option HTML n'est pas slectionne pour une bibliothque de balises, les conseils de code de
cette balise ne s'affichent pas dans les fichiers HTML.
3. (Facultatif) Entrez le prfixe des balises dans la zone de texte Prfixe de balise.
Remarque : Un prfixe est utilis pour identifier l'appartenance d'une balise dans le code une bibliothque de balises dfinie.
Certaines bibliothques n'utilisent pas de prfixes.
4. Cliquez sur OK.
Modification d'une balise dans une bibliothque

1. Dans la bote de dialogue Editeur de la bibliothque de balises (Edition > Bibliothques de balises), dveloppez une
bibliothque de balises dans la liste Balises et slectionnez une balise.
2. Dfinissez les options de format de balise suivantes :
Sauts de ligne Dtermine l'endroit o Dreamweaver insre les sauts de ligne pour une balise.
Contenu Dtermine comment Dreamweaver insre le contenu d'une balise, savoir si le saut de ligne et les rgles de
formatage s'appliquent au contenu.
Casse Indique la casse d'une balise spcifique. Choisissez Par dfaut, Minuscules, Majuscules ou Minuscules/majuscules. Si
vous choisissez cette dernire option, la bote de dialogue Nom de balise en minuscules/majuscules s'affiche. Saisissez la
balise en utilisant que Dreamweaver doit utiliser lors de l'insertion de cette dernire (par exemple, getProperty), puis cliquez
sur OK.
Par dfaut Dfinit la casse par dfaut de toutes les balises. Dans la bote de dialogue Casse de balise par dfaut qui
s'affiche, choisissez <MAJUSCULES> ou <minuscules>, puis cliquez sur OK.
Il est prfrable de dfinir les minuscules comme casse par dfaut, conformment aux normes XML et XHTML.
Modification de l'attribut d'une balise

1. Dans la bote de dialogue Editeur de la bibliothque de balises (Edition > Bibliothques de balises), ouvrez une bibliothque
de balises dans la zone Balises, dveloppez une balise et slectionnez un attribut.
2. Dans le menu droulant Casse d'attribut, choisissez Par dfaut, Minuscules, Majuscules ou Minuscules/majuscules.
Si vous choisissez cette dernire option, la bote de dialogue Nom d'attribut en minuscules/majuscules s'affiche. Saisissez
l'attribut en utilisant la casse dont doit se servir Dreamweaver lors de l'insertion de cet attribut (par exemple, onClick), puis
cliquez sur OK.
Cliquez sur le lien Dfaut pour dfinir la casse par dfaut pour tous les noms d'attributs.
3. Dans le menu droulant Type d'attribut, slectionnez le type de l'attribut.
Si vous choisissez Enumr, entrez toutes les valeurs d'attribut autorises dans la zone de texte Valeurs. Sparer les valeurs
par des virgules, sans insrer d'espaces. Par exemple, les valeurs numres de l'attribut showborder de la balise cfchart
sont dfinies comme yes,no.
Suppression de bibliothques, de balises et d'attributs

1. Dans la bote de dialogue Editeur de la bibliothque de balises (Edition > Bibliothques de balises), slectionnez une
bibliothque de balises, une balise ou un attribut dans la bote de dialogue Balises.
523
Haut de la page
2. Cliquez sur le bouton Moins (-).

3. Cliquez sur OK pour confirmer la suppression dfinitive.
L'lment disparat de la bote de dialogue Balises.
4. Cliquez sur OK pour fermer l'diteur de la bibliothque de balises et terminer la procdure de suppression.
Voir aussi
524
Importation de balises personnalises dans Dreamweaver

A propos de l'importation de balises personnalises dans Dreamweaver
Importation de balises partir de fichiers XML
Importation de balises ASP.NET personnalises
Importation de balises JSP partir d'un serveur (web.xml)
Importation de balises JRun
A propos de l'importation de balises personnalises dans Dreamweaver
Haut de la page
Une fois importes dans Dreamweaver, les balises personnalises font partie intgrante de l'environnement de cration de pages Web. Par
exemple, lorsque vous commencez taper une balise personnalise importe en mode Code, un menu de conseils de code s'affiche avec tous
les attributs de balise et vous permet d'en slectionner un.
Haut de la page
Importation de balises partir de fichiers XML

Vous pouvez importer des balises partir d'un fichier DTD XML (Document Type Definition) ou d'un schma.
1. Ouvrez l'diteur de la bibliothque de balises (Edition > Bibliothques de balises).
2. Cliquez sur le bouton Plus (+), puis choisissez Schma DTD > Importer le fichier DTD ou Schma XML.
3. Entrez le nom ou l'URL du fichier DTD ou schma.
4. Entrez le prfixe utiliser avec les balises.

Remarque : Un prfixe est utilis pour identifier l'appartenance d'une balise dans le code une bibliothque de balises dfinie.
Certaines bibliothques n'utilisent pas de prfixes.
5. Cliquez sur OK.
Haut de la page
Importation de balises ASP.NET personnalises

Vous pouvez importer des balises ASP.NET personnalises dans Dreamweaver.
Vrifiez tout d'abord que la balise personnalise est installe sur le serveur d'valuation dfini dans la bote de dialogue Dfinition du site (voir
Configuration d'un serveur d'valuation). Les balises compiles (fichiers DLL) doivent tre places dans le dossier /bin de la racine du site. Les
balises non compiles (fichiers ASCX) peuvent rsider dans un rpertoire ou un sous-rpertoire virtuel sur le serveur. Pour plus d'informations,
consultez la documentation Microsoft ASP.NET.
1. Ouvrez une page ASP.NET dans Dreamweaver.
3. Cliquez sur le bouton Plus (+), dfinissez les options suivantes, puis cliquez sur OK :
Pour importer toutes les balises ASP.NET personnalises partir du serveur d'application, choisissez ASP.NET > Importer
toutes les balises personnalises ASP.NET.
Pour n'importer que certaines balises personnalises partir du serveur d'application, choisissez ASP.NET > Importer les
balises personnalises ASP.NET slectionnes. Tout en maintenant la touche Ctrl (Windows) ou Commande (Macintosh)
enfonce, cliquez sur les balises dans la liste.
Importation de balises JSP partir d'un serveur (web.xml)
Haut de la page
Vous pouvez importer une bibliothque de balises JSP dans Dreamweaver partir de divers types de fichiers ou d'un serveur JSP.
1. Ouvrez une page JSP dans Dreamweaver.
3. Cliquez sur le bouton Plus (+), puis choisissez JSP > Importer depuis le fichier (*.tld, *.jar, *.zip) ou JSP > Importer depuis le
serveur (web.xml).
4. Cliquez sur le bouton Parcourir ou entrez un nom de fichier pour spcifier le fichier contenant la bibliothque de balises.
5. Entrez un URI pour identifier la bibliothque de balises.
525
L'URI (Uniform Resource Identifier) dsigne souvent l'URL de la socit charge de la maintenance de la bibliothque de
balises. L'URL n'est pas utilise pour afficher le site Web de la socit, mais uniquement titre d'identification de la
bibliothque de balises.
6. (Facultatif) Entrez le prfixe utiliser avec les balises. Certaines bibliothques de balises emploient un prfixe pour identifier
l'appartenance d'une balise dans le code une bibliothque de balises dfinie.
7. Cliquez sur OK.
Haut de la page
Importation de balises JRun

Si vous travaillez avec Adobe JRun, vous pouvez importer vos balises JRun dans Dreamweaver.
1. Ouvrez une page JSP dans Dreamweaver.
3. Cliquez sur le bouton Plus (+), puis choisissez JSP > Importer les balises de serveur JRUN depuis le dossier.
4. Spcifiez le nom du dossier contenant les balises de serveur JRUN.
5. Entrez un URI pour identifier la bibliothque de balises.
L'URI (Uniform Resource Identifier) dsigne souvent l'URL de la socit charge de la maintenance de la bibliothque de
balises. L'URL n'est pas utilise pour afficher le site Web de la socit, mais uniquement titre d'identification de la
bibliothque de balises.
6. (Facultatif) Entrez le prfixe utiliser avec les balises. Certaines bibliothques de balises emploient un prfixe pour identifier
l'appartenance d'une balise dans le code une bibliothque de balises dfinie.
7. Cliquez sur OK.
526
JavaScript
527
Utilisation de comportements JavaScript (instructions gnrales)

A propos des comportements JavaScript
Prsentation du panneau Comportements
A propos des vnements
Application d'un comportement
Modification ou suppression d'un comportement
Mise jour d'un comportement
Tlchargement et installation de comportements crs par des dveloppeurs indpendants
Haut de la page
A propos des comportements JavaScript
Les comportements Adobe Dreamweaver placent du code JavaScript dans des documents de faon ce que les visiteurs puissent modifier
une page Web de diffrentes faons ou lancer certaines tches. Un comportement est la combinaison d'un vnement et d'une action dclenche
par cet vnement. Dans le panneau Comportements, vous pouvez ajouter un comportement une page en spcifiant une action, puis
l'vnement qui dclenche cette action.
Remarque : Le code de comportement est un code JavaScript ct client, c'est--dire qu'il s'excute sur des navigateurs, mais pas sur des
serveurs.
Les vnements sont en ralit des messages gnrs par les navigateurs, indiquant qu'un utilisateur a fait quelque chose sur votre page. Par
exemple, lorsqu'un visiteur dplace le pointeur sur un lien, le navigateur gnre un vnement onMouseOver pour ce lien ; le navigateur vrifie
ensuite s'il doit appeler du code JavaScript (spcifi dans la page affiche) en guise de rponse. Ces vnements sont dfinis pour diffrents
lments de la page ; par exemple, dans la plupart des navigateurs, onMouseOver et onClick sont des vnements associs des liens, tandis
que onLoad est un vnement associ des images et la section body du document.
Une action correspond un code JavaScript pr-rdig qui effectue une tche spcifique, comme ouvrir une fentre de navigateur, afficher ou
masquer un calque, diffuser un son ou arrter une animation Adobe Shockwave. Les actions proposes dans Dreamweaver prsentent une
compatibilit inter-navigateurs maximale.
Une fois qu'un comportement est associ un lment de page, le comportement appelle l'action (code JavaScript) associe un vnement
chaque fois que cet vnement se produit pour cet lment. Les vnements disponibles pour dclencher une action donne varient d'un
navigateur l'autre. Par exemple, si vous associez l'action Message contextuel un lien et spcifiez que l'action sera dclenche par l'vnement
onMouseOver, votre message s'affiche dans une bote de dialogue lorsqu'un utilisateur pointe la souris sur ce lien dans le navigateur.
Un vnement unique peut dclencher plusieurs actions diffrentes et vous pouvez dfinir l'ordre d'excution de ces actions.
Dreamweaver propose plus d'une vingtaine d'actions ; des actions supplmentaires sont disponibles sur le site Web d'Exchange l'adresse
www.adobe.com/go/dreamweaver_exchange_fr, ainsi que sur les sites d'autres dveloppeurs Vous pouvez crire vos propres actions si vous
matrisez le langage JavaScript.
Remarque : Les termes comportement et action appartiennent la terminologie Dreamweaver et non la terminologie HTML. Du point de vue du
navigateur, une action est un lment de code JavaScript comme un autre.
Haut de la page
Prsentation du panneau Comportements
Utilisez le panneau Comportements (Fentre > Comportements) pour associer des comportements des lments de la page (plus prcisment
aux balises) et pour modifier les paramtres des comportements prcdemment associs.
Les comportements dj associs l'lment de la page actuellement slectionne sont rpertoris dans la liste de comportements (la zone
principale du panneau), tablie par vnement et par ordre alphabtique. Si plusieurs actions sont rpertories pour le mme vnement, elles
sont excutes dans l'ordre dans lequel elles apparaissent dans la liste. Si aucun comportement n'apparat dans la liste, cela signifie qu'aucun
comportement n'est associ l'lment slectionn.
Le panneau Comportements comprend les options suivantes :
Afficher les vnements dfinis Affiche uniquement les vnements associs au document actif. Les vnements sont organiss en catgorie
client et serveur. Les vnements de chaque catgorie se trouvent dans une liste que vous pouvez rduire. Afficher les vnements dfinis
constitue la vue par dfaut.
Afficher tous les vnements Affiche une liste alphabtique de tous les vnements d'une catgorie donne.
Ajouter un comportement (+) Affiche un menu d'actions pouvant tre associes l'lment actuellement slectionn. Lorsque vous slectionnez
une action dans la liste, une bote de dialogue s'affiche, dans laquelle vous pouvez dfinir les paramtres pour cette action. Si toutes les actions
s'affichent en gris, cela signifie qu'aucun vnement ne peut tre gnr par l'lment slectionn.
528
Supprimer un vnement () Supprime l'action et l'vnement slectionns de la liste de comportements.

Boutons flchs Haut et Bas Dplacent l'action slectionne vers le haut ou vers le bas dans la liste des comportements pour un vnement
particulier. Vous ne pouvez modifier l'ordre des actions que pour un vnement particulier ; par exemple, vous pouvez modifier l'ordre d'excution
de plusieurs actions pour l'vnement onLoad, mais toutes les actions onLoad restent groupes dans la liste de comportements. Les boutons
flchs sont dsactivs pour les actions ne pouvant tre dplaces dans la liste, vers le haut ou vers le bas.
Evnements Affiche un menu droulant, visible uniquement lorsqu'un vnement est slectionn, de tous les vnements qui peuvent dclencher
l'action (ce menu s'affiche lorsque vous cliquez sur la touche flche situe en face du nom de l'vnement slectionn). Diffrents vnements
s'affichent, selon l'objet slectionn. Si les vnements attendus n'apparaissent pas, assurez-vous d'avoir slectionn le bon lment de page ou
la bonne balise. (Pour slectionner une balise spcifique, utilisez le slecteur de balises situ dans le coin infrieur gauche de la fentre de
document.)
Remarque : Les noms d'vnement entre parenthses sont disponibles uniquement pour les liens. En choisissant l'un de ces noms d'vnement,
vous ajoutez automatiquement un lien nul l'lment sur la page slectionne et vous associez le comportement ce lien et non l'lment luimme. Le lien nul est dfini sous la forme href="javascript:;" dans le code HTML.
Haut de la page
A propos des vnements
Chaque navigateur gnre une srie d'vnements que vous pouvez associer aux actions rpertories dans le menu Actions (+) du panneau
Comportements. Lorsqu'un visiteur de votre page Web dclenche une action interactive avec celle-ci, en cliquant sur une image par exemple, le
navigateur gnre un vnement. Cet vnement permet d'appeler une fonction JavaScript excutant une action quelconque. Dreamweaver
fournit de nombreuses actions courantes que vous pouvez dclencher l'aide de ces vnements.
Pour obtenir les noms et les descriptions des vnements fournis par chacun des navigateurs, consultez le centre de support de Dreamweaver
l'adresse www.adobe.com/go/dreamweaver_support_fr.
Diffrents vnements s'affichent dans le menu Evnements, en fonction de l'objet slectionn. Pour savoir quels sont les vnements pris en
charge par un navigateur spcifique pour un lment de page donn, insrez l'lment de la page dans votre document et associez-lui un
comportement, puis consultez le menu Evnements dans le panneau Comportements. (Par dfaut, les vnements proviennent de la liste
d'vnements HTML 4.01 et ils sont pris en charge par la plupart des navigateurs modernes.) Certains vnements peuvent apparatre en gris
(dsactivs) si les objets pertinents n'existent pas encore dans la page ou si l'objet slectionn ne peut pas recevoir d'vnements. Si les objets
attendus ne sont pas affichs, assurez-vous que vous avez bien slectionn l'objet correct.
Si vous associez un comportement une image, certains vnements (par exemple onMouseOver) apparaissent entre parenthses. Ces
vnements ne sont disponibles que pour des liens. Lorsque vous en slectionnez un, Dreamweaver entoure l'image d'une balise a pour dfinir un
lien nul, Le lien nul est reprsent par javascript:; dans la zone de texte Lien de l'inspecteur Proprits. Vous pouvez modifier la valeur de ce lien
pour le transformer en vritable lien vers une autre page, mais si vous effacez le lien JavaScript sans le remplacer par un autre lien, vous
supprimerez le comportement.
Pour voir quelles balises peuvent tre utilises avec un vnement donn dans un navigateur donn, recherchez l'vnement dans l'un des
fichiers de votre dossier Dreamweaver/Configuration/Behaviors/Events.
Haut de la page
Application d'un comportement
Vous pouvez associer des comportements au document entier ( la balise <body>) ou des liens, des images, des lments de formulaire et
divers autres lments HTML.
Le navigateur cible que vous choisissez dtermine les vnements pris en charge pour un lment donn.
Vous pouvez attribuer plusieurs actions chaque vnement. Les actions sont excutes dans l'ordre dans lequel elles sont rpertories dans la
colonne Actions du panneau Comportements, mais vous pouvez modifier cet ordre.
1. Slectionnez un lment dans la page, tel qu'une image ou un lien.
Pour associer un comportement l'ensemble de la page, cliquez sur la balise <body> dans le slecteur de balises, situ dans
le coin infrieur gauche de la fentre de document.
2. Choisissez Fentre > Comportements.
3. Cliquez sur le bouton plus (+) et choisissez une action dans le menu Ajouter un comportement.
Vous ne pouvez pas choisir les actions qui apparaissent en gris dans le menu. Ces actions peuvent tre grises si un objet
ncessaire n'existe pas dans le document actif Par exemple, l'action Contrler Shockwave ou SWF s'affiche en gris si le
document ne contient pas de fichiers SWF Flash ou Shockwave.
Lorsque vous choisissez une action, une bote de dialogue s'affiche avec les paramtres et les instructions pour cette action.
4. Saisissez les paramtres pour l'action et cliquez sur OK.
Toutes les actions proposes dans Dreamweaver fonctionnent dans les navigateurs modernes. Certaines actions ne
fonctionnent pas dans les navigateurs plus anciens, mais elles n'entraneront pas d'erreurs.
Remarque : Les lments cibles doivent possder un ID unique. Par exemple, si vous souhaitez appliquer le comportement
Permuter une image une image, cette image doit avoir un ID. Si vous n'avez pas spcifi d'ID pour l'lment, Dreamweaver
le fait automatiquement votre place.
529
5. L'vnement par dfaut qui dclenchera l'action apparat dans la colonne Evnements. S'il ne s'agit pas de l'vnement que
vous dsirez utiliser, slectionnez-en un autre dans le menu contextuel Evnements. (Pour ouvrir le menu Evnements,
slectionnez un vnement ou une action dans le panneau Comportements, puis cliquez sur la flche noire pointe vers le
bas qui apparat entre le nom de l'vnement et le nom de l'action.)
Haut de la page
Modification ou suppression d'un comportement
Une fois le comportement associ, vous pouvez modifier l'vnement qui dclenche l'action, ajouter ou supprimer des actions et modifier les
paramtres des actions.
1. Slectionnez un objet auquel un comportement a t associ.
2. Choisissez Fentre > Comportements.
3. Effectuez les modifications voulues :
Pour modifier les paramtres d'une action, double-cliquez sur son nom ou slectionnez-le et appuyez sur la touche Entre
(Windows) ou Retour (Macintosh), modifiez les paramtres dans la bote de dialogue, puis cliquez sur OK.
Pour modifier l'ordre d'apparition des actions pour un vnement donn, slectionnez une action et cliquez sur la flche
Haut ou Bas. Vous pouvez galement slectionner l'action, puis la copier et la coller l'emplacement de votre choix parmi
les autres actions.
Pour supprimer un comportement, slectionnez-le et cliquez sur le signe moins (-) ou appuyez sur Supprimer.
Haut de la page
Mise jour d'un comportement

1. Slectionnez l'lment auquel est attach le comportement.
2. Choisissez Fentre > Comportements et double-cliquez sur le comportement.
3. Effectuez vos modifications, puis cliquez sur OK dans la bote de dialogue du comportement.
Toutes les occurrences de ce comportement sont actualises. Si d'autres pages de votre site contiennent ce comportement,
vous devez les mettre jour page par page.
Tlchargement et installation de comportements crs par des dveloppeurs indpendants
Haut de la page
De nombreuses extensions sont disponibles sur le site Web d'Exchange pour Dreamweaver (www.adobe.com/go/dreamweaver_exchange_fr).
1. Slectionnez Fentre > Comportements et choisissez l'option Tlcharger d'autres comportements dans le menu Ajouter un
comportement.
Votre navigateur principal s'ouvre sur le site d'Exchange
2. Localisez les progiciels.
3. Tlchargez et installez le progiciel d'extension souhait.
Pour plus d'informations, consultez la section Utilisation d'extensions dans Dreamweaver CS6, 12.1 et 12.2.
530

Utilisation des comportements intgrs
Application du comportement Appel JavaScript
Application du comportement Changer la proprit
Application du comportement Vrifier le navigateur
Application du comportement Vrifier le plug-in
Application du comportement Contrler Shockwave ou SWF
Application du comportement Tirer l'lment PA
Collecte d'informations sur l'lment PA dplaable
Application du comportement Atteindre l'URL
Application du comportement Menu de reroutage
Application du comportement Menu de reroutage Aller
Application du comportement Ouvrir la fentre Navigateur
Application du comportement Lire le son
Application du comportement Message contextuel
Application du comportement Prcharger les images
Application du comportement Dfinir image barre de navigation
Application du comportement Texte d'un cadre
Application du comportement Texte du conteneur
Application du comportement Dfinir le texte de la barre d'tat
Application du comportement Texte d'un champ de texte
Application du comportement Afficher-Masquer les lments
Application du comportement Afficher le menu contextuel
Ajout, suppression et rorganisation d'lments de menu contextuel
Mise en forme d'un menu contextuel
Positionnement d'un menu contextuel dans un document
Modification d'un menu contextuel
Application du comportement Permuter une image
Application du comportement Valider le formulaire
Haut de la page
Utilisation des comportements intgrs
Les comportements inclus dans Dreamweaver ont t conus pour fonctionner dans les navigateurs modernes. Les comportements chouent
dans les navigateurs plus anciens, sans que l'utilisateur en soit inform.
Remarque : Les actions Dreamweaver ont t rdiges avec soin afin de fonctionner avec le plus grand nombre possible de navigateurs. Si vous
supprimez manuellement le code d'une action Dreamweaver ou si vous le remplacez par votre propre code, vous risquez de perdre la
compatibilit inter-navigateurs.
Bien que les actions Dreamweaver aient t rdiges pour augmenter la compatibilit inter-navigateurs, certains navigateurs ne prennent pas du
tout en charge JavaScript et de nombreuses personnes dsactivent JavaScript sur leur navigateur lorsqu'ils explorent la Toile. Pour optimiser les
rsultats inter-plates-formes, fournissez d'autres interfaces contenues dans des balises <noscript> afin que votre site reste accessible aux
personnes qui n'utilisent pas JavaScript.
Haut de la page
Application du comportement Appel JavaScript
Le comportement Appel JavaScript excute une fonction ou une ligne de code JavaScript personnalise lorsqu'un vnement se produit (vous
pouvez rdiger le script vous-mme, ou utiliser le code fourni gratuitement dans le cadre de plusieurs bibliothques de JavaScript sur Internet).
1. Slectionnez un objet et choisissez Appel JavaScript dans le menu Ajouter un comportement du panneau Comportements.
2. Tapez le code JavaScript excuter ou le nom de la fonction.
Par exemple, pour crer un bouton Retour, vous pouvez saisir if (history.length > 0)\{history.back()\}. Si vous avez encapsul
votre code dans une fonction, indiquez simplement le nom de la fonction (par exemple, hGoBack()).
531
3. Cliquez sur OK et vrifiez que l'vnement par dfaut est correct.
Application du comportement Changer la proprit
Haut de la page
Utilisez le comportement Changer la proprit pour modifier la valeur d'une des proprits d'un objet (par exemple, la couleur d'arrire-plan d'une
balise div ou l'action d'un formulaire).
Remarque : N'utilisez ce comportement que si vous tes expert en HTML et en JavaScript.
1. Slectionnez un objet et choisissez Changer la proprit dans le menu Ajouter un comportement du panneau Comportements.
2. Dans le menu Type d'lment, slectionnez un type d'lment pour afficher tous les lments nomms de ce type.
3. Slectionnez un lment dans le menu ID d'lment.
4. Choisissez une proprit dans le menu Proprit ou tapez le nom de la proprit dans la zone de texte.
5. Entrez la nouvelle valeur pour la nouvelle proprit dans la zone Nouvelle valeur.
Application du comportement Vrifier le navigateur
Haut de la page
Ce comportement a t abandonn depuis Dreamweaver CS5.
Haut de la page
Application du comportement Vrifier le plug-in
Utilisez le comportement Vrifier le plug-in pour envoyer les visiteurs sur des pages diffrentes selon que le plug-in spcifi est install ou non.
Par exemple, vous pouvez rerouter les visiteurs sur une page s'ils possdent Shockwave, et sur une autre dans le cas contraire.
Remarque : Il est impossible de dtecter des plug-ins spcifiques dans Microsoft Internet Explorer (IE) l'aide de JavaScript. Toutefois, si vous
slectionnez les plug-ins Flash ou Director, le code VBScript appropri sera automatiquement ajout votre page pour les dtecter dans Internet
Explorer sous Windows. Il est impossible de dtecter les plug-ins dans Internet Explorer sur Mac OS.
1. Slectionnez un objet et choisissez Vrifier le plug-in dans le menu Ajouter un comportement du panneau Comportements.
2. Slectionnez un plug-in dans le menu Plug-in, ou cliquez sur Entre et tapez le nom exact du plug-in dans la zone de texte
adjacente.
Vous devez utiliser le nom exact du plug-in, tel qu'il apparat en gras sur la page A propos des plug-ins dans Netscape
Navigator (Dans Windows, choisissez la commande Aide > A propos des plug-ins dans le navigateur. Dans Mac OS,
choisissez A propos des plug-ins dans le menu Pomme).
3. Dans la zone de texte Si trouv, aller l'URL, spcifiez l'URL destine aux utilisateurs qui disposent du plug-in.
Si vous indiquez une URL distante, vous devez faire prcder l'adresse www du prfixe http://. Si vous ne renseignez pas la
zone, les visiteurs resteront dans la mme page.
4. Dans la zone de texte Sinon, aller l'URL, indiquez une autre URL pour les visiteurs qui ne disposent pas du plug-in. Si vous
ne renseignez pas la zone, les visiteurs resteront dans la mme page.
5. Spcifiez la procdure suivre si la dtection de plug-in n'est pas possible. Par dfaut, lorsque la dtection est impossible,
l'utilisateur est envoy l'URL indique dans la zone de texte Sinon. Pour que l'utilisateur soit envoy vers la premire URL
(Si trouv), slectionnez l'option Toujours aller la premire URL si la dtection n'est pas possible. Lorsqu'elle est
slectionne, cette option signifie que l'utilisateur possde a priori le plug-in, sauf si le navigateur indique explicitement que
ce n'est pas le cas . En gnral, activez cette option si le contenu du plug-in est un lment essentiel de votre page ; dans le
cas contraire, laissez-la dsactive.
Remarque : Cette option ne concerne qu'Internet Explorer ; Netscape Navigator dtecte toujours les plug-ins.
Application du comportement Contrler Shockwave ou SWF
Haut de la page
Haut de la page
Application du comportement Tirer l'lment PA
Le comportement Tirer l'lment PA permet au visiteur de faire glisser un lment positionnement absolu. Utilisez ce comportement pour crer
des puzzles, des contrles de dplacement et autres lments mobiles de l'interface.
Vous pouvez spcifier la direction vers laquelle l'utilisateur peut faire glisser l'lment PA (horizontalement, verticalement ou dans toutes les
directions), une cible vers laquelle l'utilisateur doit faire glisser l'lment PA, si ce dernier doit tre aimant par la cible ou non lorsqu'il arrive
moins d'un certain nombre de pixels de la cible, l'action dclencher lorsque l'lment PA touche la cible, etc.
532
Etant donn que le comportement Tirer l'lment PA doit tre appel avant que le visiteur puisse faire glisser l'lment PA, vous devez l'associer
l'objet body (avec l'vnementonLoad).
1. Choisissez Insertion > Objets mise en forme > Div PA ou cliquez sur le bouton Tracer un div pour un lment PA du panneau
Insertion, puis dessinez un div PA dans la vue Cration de la fentre de document.
2. Cliquez sur <body> dans le slecteur de balises situ dans le coin infrieur gauche de la fentre de document.
3. Choisissez Tirer l'lment PA dans le menu Ajouter un comportement du panneau Comportements.
Si l'option Tirer l'lment PA n'est pas disponible, cela signifie probablement qu'un lment PA est slectionn.
4. Dans le menu droulant Elment PA, slectionnez l'lment PA.
5. Slectionnez soit Contraint, soit Libre dans le menu contextuel Mouvement.
Les mouvements sans contrainte sont adapts aux puzzles et aux autres jeux base de glisser-dplacer. Pour les contrles
de dplacement et les objets mobiles (tiroirs, rideaux et stores), choisissez un mouvement contraint.
6. Pour la restriction de mouvement, indiquez les valeurs de dplacement admises (en pixels) dans les zones de texte Haut,
Bas, Gauche et Droite.
Ces valeurs sont relatives la position de dpart de l'lment PA. Pour restreindre les dplacements l'intrieur d'une zone
rectangulaire, indiquez des valeurs positives dans les quatre zones de texte. Pour permettre uniquement un mouvement
vertical, indiquez des valeurs positives pour Haut et Bas et 0 pour Gauche et Droite. Pour permettre uniquement un
mouvement horizontal, indiquez des valeurs positives pour Gauche et Droite et 0 pour Haut et Bas.
7. Indiquez les coordonnes (exprimes en pixels) de la cible de dpt dans les zones de texte Gauche et Haut.
La cible de dpt est le point sur lequel vous voulez que l'utilisateur dpose l'lment PA. Un lment PA est considr
comme ayant atteint la cible de dpt lorsque ses coordonnes d'origine (en haut gauche) correspondent aux valeurs
indiques dans les zones de texte Gauche et Haut. Ces coordonnes sont relatives l'angle suprieur gauche de la fentre
du navigateur. Cliquez sur Obtenir la position courante pour remplir automatiquement les zones de texte avec les
coordonnes actuelles de l'lment PA.
8. Entrez une valeur (exprime en pixels) dans la zone de texte Aligner si dans pour dterminer la distance minimale laquelle
le visiteur doit approcher de la cible pour que l'lment PA se place automatiquement sur celle-ci.
Les valeurs importantes permettent l'utilisateur de trouver plus facilement la cible de dpt.
9. Pour des puzzles simples et des dfilements d'images, vous pouvez vous en tenir l. Pour dfinir la poigne de dplacement
de l'lment PA, suivre le mouvement de l'lment PA pendant qu'il est dplac et dclencher une action lorsqu'il est dpos,
cliquez sur l'onglet Avanc.
10. Pour spcifier que l'utilisateur doit cliquer dans une zone particulire de l'lment PA pour pouvoir le dplacer, slectionnez
Zone dans l'lment dans le menu Poigne de dplacement, puis indiquez les coordonnes de l'origine (angle suprieur
gauche) de la poigne de dplacement, ainsi que la largeur et la hauteur de celle-ci.
Cette option est utile lorsque l'image insre l'intrieur de l'lment PA contient un symbole de dplacement, par exemple
une barre de titre ou une poigne de tiroir. N'activez pas cette option si vous voulez que l'utilisateur soit libre de cliquer
n'importe o dans l'lment PA pour le dplacer.
11. Choisissez, parmi les options de la zone En dplaant, celles que vous dsirez utiliser :
Activez l'option Placer l'lment au premier plan si l'lment PA doit tre amen au niveau le plus haut de l'ordre de
superposition lors de son dplacement. Si vous activez cette option, utilisez le menu droulant qui apparat pour indiquer
si l'lment PA doit tre laiss au niveau de visibilit le plus lev ou si sa position d'origine dans l'ordre de superposition
doit tre rtablie.
Tapez un code JavaScript ou un nom de fonction (par exemple, monitorAPelement()) dans la zone de texte Appel
JavaScript pour que ce code ou cette fonction soit excut en boucle pendant le dplacement de l'lment PA. Par
exemple, vous pouvez crire une fonction pour surveiller les coordonnes de l'lment PA et afficher des indications,
telles que Tu brles ou Tu t'loignes de la cible , dans une zone de texte.
12. Indiquez un code JavaScript ou un nom de fonction (par exemple, evaluateAPelementPos()) dans la deuxime zone de texte
Appel JavaScript si vous voulez que le code ou la fonction soit excut(e) lorsque l'lment PA est dpos. Activez l'option
Uniquement si align si le code JavaScript indiqu ne doit tre excut que si l'lment PA a atteint la cible de dpt.
Collecte d'informations sur l'lment PA dplaable
Haut de la page
Lorsque vous associez le comportement Tirer l'lment PA un objet, Dreamweaver insre la fonction MM_dragLayer() dans la section d'en-tte
(head) de votre document. (La fonction conserve l'ancienne convention d'attribution de nom pour les lments PA (anciennement, calques) de
faon ce que les calques crs dans les versions prcdentes de Dreamweaver restent modifiable.) Cette fonction enregistre l'lment PA
comme dplaable et dfinit trois proprits pour chaque lment PA dplaable, MM_LEFTRIGHT, MM_UPDOWN et MM_SNAPPED, que vous
pouvez utiliser dans vos propres fonctions JavaScript pour dterminer les positions horizontale et verticale de l'lment PA et s'il a atteint la cible
533
de dpt.
Remarque : Les informations fournies ici sont destines uniquement aux programmeurs JavaScript expriments.
Par exemple, la fonction suivante affiche la valeur de la proprit MM_UPDOWN (la position verticale actuelle de l'lment PA) dans un champ de
formulaire appel curPosField. Les champs de formulaires servent afficher des informations pouvant tre continuellement mises jour, parce
qu'ils sont dynamiques. Ainsi, vous pouvez modifier leur contenu aprs le chargement de la page.
1
2
3
4
5
function getPos(layerId){
var layerRef = document.getElementById(layerId);
var curVertPos = layerRef.MM_UPDOWN;
document.tracking.curPosField.value = curVertPos;
}
Au lieu d'afficher la valeur des proprits MM_UPDOWN ou MM_LEFTRIGHT dans un champ de formulaire, vous pouvez utiliser ces valeurs de
diffrentes manires. Par exemple, vous pouvez crire une fonction qui affiche un message dans ce champ selon la distance qui reste parcourir
jusqu' la cible, ou appeler une autre fonction pour afficher ou masquer un lment PA selon la valeur de cette distance.
Il est particulirement utile de tester la proprit MM_SNAPPED lorsque vous disposez, sur une page, de plusieurs lments PA qui doivent tous
atteindre leur cible pour que l'utilisateur puisse passer la page ou la tche suivante. Par exemple, vous pouvez crire une fonction qui compte
le nombre d'lments PA ayant la valeur MM_SNAPPED dfinie sur true et l'appeler chaque fois qu'un lment PA est dpos. Lorsque le nombre
d'lments PA arrivs sur leur cible atteint le nombre dsir, vous pouvez envoyer l'utilisateur la page suivante ou afficher un message de
flicitations.
Haut de la page
Application du comportement Atteindre l'URL
Le comportement Atteindre l'URL ouvre une nouvelle page dans la fentre en cours ou dans le cadre indiqu. Ce comportement est utile pour
modifier d'un seul clic le contenu de deux cadres ou plus
1. Slectionnez un objet et choisissez Atteindre l'URL dans le menu Ajouter un comportement du panneau Comportements.
2. Choisissez une destination pour l'URL dans la liste Ouvrir dans.
La liste Ouvrir dans numre automatiquement les noms de tous les cadres qui se trouvent dans le jeu de cadres actuel, ainsi
que la fentre principale. S'il n'y a pas de cadres, cette dernire est la seule option.
Remarque : Ne donnez pas vos cadres les noms top, blank, self ou parent, car cela pourrait produire des rsultats
inattendus. En effet, certains navigateurs peuvent confondre ces noms avec les mots rservs utiliss dans le champ Cible.
3. Cliquez sur Parcourir pour slectionner un document ouvrir ou tapez le nom et le chemin d'accs au fichier recherch dans
la zone de texte URL.
4. Rptez les tapes 2 et 3 pour ouvrir d'autres documents dans d'autres cadres.
Haut de la page
Application du comportement Menu de reroutage
Lorsque vous crez un menu de reroutage en utilisant Insertion > Formulaire > Menu de reroutage, Dreamweaver cre un objet de menu et lui
associe le comportement Menu de reroutage (ou Menu de reroutage Aller). En principe, il n'est pas ncessaire d'associer manuellement le
comportement Menu de reroutage un objet.
Vous pouvez modifier un menu de reroutage existant de deux manires diffrentes :
Vous pouvez modifier et rorganiser les lments du menu, modifier les fichiers rerouter et la fentre dans laquelle s'ouvrent
ces fichiers, en double-cliquant sur un comportement Menu de reroutage existant dans le panneau Comportements.
Vous pouvez modifier les lments du menu comme vous modifieriez les lments de n'importe quel menu, en slectionnant le
menu et en utilisant le bouton Valeurs de la liste dans l'inspecteur Proprits.
1. Crez un objet Menu de reroutage s'il n'en existe pas dj dans votre document.
2. Slectionnez l'objet et choisissez Menu de reroutage dans le menu Ajouter un comportement du panneau Comportements.
3. Effectuez les modifications souhaites dans la bote de dialogue Menu de reroutage, puis cliquez sur OK.
Application du comportement Menu de reroutage Aller
Haut de la page
Le comportement Menu de reroutage Aller est troitement associ l'action Menu de reroutage ; il vous permet d'associer un bouton Aller avec
un menu de reroutage (pour utiliser ce comportement, vous devez crer au pralable un menu de reroutage dans le document). Un clic sur le
bouton Aller ouvre le lien actuellement slectionn dans le menu de reroutage. En principe, il n'est pas indispensable d'ajouter un bouton Aller
un menu de reroutage : le choix d'un lment de ce dernier provoque en gnral le chargement d'une nouvelle URL sans aucune intervention
supplmentaire. Toutefois, si l'utilisateur choisit l'lment qui est dj slectionn dans le menu de reroutage, le reroutage ne se produira pas. En
534
gnral cela n'a pas d'importance, mais si le menu de reroutage apparat dans une image et que les lments du menu assurent la liaison avec
des pages dans d'autres images, un bouton Aller est souvent utile, pour permettre aux utilisateurs de choisir nouveau un lment dj
slectionn dans le menu de reroutage.
Remarque : Lorsque vous utilisez un bouton Aller associ un menu de reroutage, le bouton Aller devient le seul mcanisme permettant
l'utilisateur d'accder l'URL associe la slection dans le menu. La slection d'un lment 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.
1. Slectionnez un objet qui sera utilis comme bouton Aller (en gnral une image) et choisissez Menu de reroutage Aller dans
le menu Ajouter un comportement du panneau Comportements.
2. Dans le menu Choisissez un menu de reroutage, slectionnez un menu que le bouton Aller activera et cliquez sur OK.
Application du comportement Ouvrir la fentre Navigateur
Haut de la page
Utilisez l'action Ouvrir la fentre Navigateur pour ouvrir une page dans une nouvelle fentre. Vous pouvez spcifier les proprits de la nouvelle
fentre, dont sa taille, ses attributs (redimensionnable ou non, dispose d'une barre de menu ou non, etc.), ainsi que son nom Par exemple, vous
pouvez utiliser ce comportement pour ouvrir une image plus grande dans une fentre individuelle lorsque l'utilisateur clique sur l'image rduite ;
avec ce comportement, vous pouvez adapter la fentre la taille exacte de l'image.
Si vous ne spcifiez aucun attribut pour la fentre, elle s'ouvrira avec la taille et les attributs de la fentre partir de laquelle elle a t lance.
Choisir des attributs pour la fentre dsactive automatiquement tous ceux qui ne sont pas explicitement activs. Par exemple, si vous ne
dfinissez aucun attribut pour la fentre, elle peut s'ouvrir en 1024 x 768 pixels et comporter une barre de navigation (affichant les boutons
Prcdente, Suivante, Dmarrage et Actualiser), une barre d'adresse (indiquant l'URL), une barre d'tat (en bas, affichant les messages d'tat) et
une barre de menus (affichant les menus Fichier, Edition, Affichage et d'autres menus). Si vous dfinissez explicitement une largeur de 640 et une
hauteur de 480 pixels, sans aucun autre attribut, la fentre s'ouvrira en 640 x 480 pixels, sans aucune barre d'outils.
1. Slectionnez un objet et choisissez Ouvrir la fentre Navigateur dans le menu Ajouter un comportement du panneau
Comportements.
2. Tapez l'URL afficher ou cliquez sur Parcourir pour slectionner un fichier.
3. Dfinissez les options pour la largeur et la hauteur de la fentre (en pixels) et pour l'incorporation de diffrentes barres
d'outils, barres de dfilement, poignes de redimensionnement, etc. Donnez un nom la fentre (n'utilisez pas d'espaces ni
de caractres spciaux) si vous souhaitez qu'elle soit la cible de liens ou qu'elle soit contrle en JavaScript.
Haut de la page
Application du comportement Lire le son

Haut de la page
Application du comportement Message contextuel
Le comportement Message contextuel fait apparatre un message d'alerte JavaScript, avec le texte que vous avez spcifi. Comme les alertes
JavaScript ne disposent que d'un seul bouton (OK), utilisez ce comportement pour informer l'utilisateur plutt que pour lui proposer un choix.
Vous pouvez incorporer au texte des appels de fonction, proprits, variables globales ou autres expressions valides en JavaScript. Pour
incorporer une expression JavaScript, placez-la entre des accolades ({}). Pour afficher une accolade, faites-la prcder d'une barre oblique
inverse (\{).
Exemple :
1
The URL for this page is {window.location}, and today is {new Date()}.
Remarque : Le navigateur contrle l'aspect de l'alerte. Si vous dsirez avoir davantage de contrle sur l'apparence, pensez utiliser le
comportement Ouvrir la fentre Navigateur.
1. Slectionnez un objet et choisissez Message contextuel dans le menu Ajouter un comportement du panneau Comportements.
2. Tapez votre message dans la zone de texte prvue cet effet.
Application du comportement Prcharger les images
Haut de la page
Le comportement Prcharger les images raccourcit le dlai d'affichage en mettant en mmoire cache les images qui ne sont pas visibles lors du
premier affichage de la page (par exemple, les images qui vont tre remplaces par des comportements ou des scripts).
Remarque : Le comportement Permuter une image prcharge automatiquement toutes les images slectionnes lorsque vous choisissez l'option
Prcharger les images dans la bote de dialogue Permuter une image ; il n'est donc pas ncessaire d'ajouter manuellement l'action Prcharger les
535
images lorsque vous utilisez l'action Permuter une image.

1. Slectionnez un objet et choisissez Prcharger les images dans le menu Ajouter un comportement du panneau
Comportements.
2. Cliquez sur Parcourir pour slectionner un fichier d'image ou tapez le chemin d'accs et le nom du fichier d'une image dans la
zone de texte Fichier source des images.
3. Cliquez sur le bouton plus (+) en haut de la bote de dialogue pour ajouter l'image la liste Prcharger les images.
4. Rptez les tapes 2 et 3 pour les autres images que vous dsirez prcharger dans la page en cours.
5. Pour supprimer une image de la liste Prcharger les images, slectionnez-la et cliquez sur le bouton () (signe moins).
Application du comportement Dfinir image barre de navigation
Haut de la page
Haut de la page
Application du comportement Texte d'un cadre
Le comportement Texte d'un cadre vous permet de dfinir de faon dynamique le texte d'un cadre, en remplaant le contenu et le formatage d'un
cadre par le contenu indiqu. Ce contenu peut tre n'importe quel code source HTML valide. Ce comportement permet d'afficher les informations
de faon dynamique.
Bien que le comportement Texte d'un cadre permette de remplacer le formatage d'un cadre, vous pouvez activer l'option Prserver Couleur
d'arrire-plan pour conserver les attributs actuels pour l'arrire-plan de la page et la couleur du texte.
inverse (\{).
Exemple :
1
1. Slectionnez un objet et choisissez Texte > Texte du cadre dans le menu Ajouter un comportement du panneau
Comportements.
2. Dans la bote de dialogue qui s'affiche, slectionnez le cadre cible dans le menu Cadre.
3. Cliquez sur le bouton Reprendre HTML courant pour copier les contenus actuels de la section bodydu cadre cible.
4. Entrez un message dans la zone de texte Nouveau HTML.
Haut de la page
Application du comportement Texte du conteneur
Le comportement Texte du conteneur remplace le contenu et le formatage d'un contenu existant (c'est--dire, tout lment pouvant contenir du
texte ou d'autres lments) d'une page par le contenu indiqu. Ce contenu peut tre n'importe quel code source valide en HTML.
inverse (\{).
Exemple :
1
1. Slectionnez un objet et choisissez Texte > Texte du conteneur dans le menu Ajouter un comportement du panneau
Comportements.
2. Dans la bote de dialogue qui s'affiche, slectionnez l'lment cible dans le menu Conteneur.
3. Entrez le nouveau texte ou le nouveau code HTML dans la zone de texte Nouveau HTML.
Application du comportement Dfinir le texte de la barre d'tat

536
Haut de la page
Le comportement Dfinir le texte de la barre d'tat affiche un message dans la barre d'tat, dans la partie infrieure gauche de la fentre du
navigateur. Par exemple, vous pouvez utiliser ce comportement pour dcrire la destination d'un lien dans la barre d'tat, au lieu d'afficher l'URL
associe Cependant, il arrive frquemment que les utilisateurs ne tiennent pas compte des messages de la barre d'tat (certains navigateurs ne
prennent pas en charge la dfinition du texte de la barre d'tat). Si votre message est important, pensez l'afficher sous la forme d'un message
contextuel ou comme texte d'un lment PA.
Remarque : Si vous utilisez le comportement Dfinir le texte de la barre d'tat dans Dreamweaver, le texte de la barre d'tat du navigateur ne va
pas ncessairement changer du fait que certains navigateurs ncessitent des rglages spciaux lors de la modification du texte de la barre d'tat.
Par exemple, dans Firefox, vous devez modifier une option Avance qui permet JavaScript modifier le texte de la barre d'tat. Pour plus de
dtails, reportez-vous la documentation de votre navigateur.
inverse (\{).
Exemple :
1
1. Slectionnez un objet et choisissez Texte > Texte de la barre d'tat dans le menu Ajouter un comportement du panneau
Comportements.
2. Dans la bote de dialogue Dfinir le texte de la barre d'tat, tapez un message dans la zone de texte Message.
Utilisez un message concis. Le navigateur tronquera le message s'il est trop long pour la barre d'tat.
Application du comportement Texte d'un champ de texte
Haut de la page
Le comportement Texte d'un champ de texte remplace le contenu d'un champ de texte de formulaire par le contenu indiqu.
inverse (\{).
Exemple :
1
Cration d'un champ de texte nomm

1. Slectionnez Insertion > Formulaire > Champ de texte.
Si Dreamweaver vous invite ajouter une balise de formulaire, cliquez sur Oui.
2. Dans l'inspecteur Proprits, tapez le nom du champ de texte. Veillez utiliser un nom unique dans cette page (n'utilisez pas
le mme nom pour plusieurs lments appartenant la mme page, mme s'ils se trouvent dans des formulaires diffrents).
Application de l'action Texte d'un champ de texte

1. Slectionnez un champ de texte et choisissez Texte > Texte d'un champ de texte dans le menu Ajouter un comportement du
panneau Comportements.
2. Slectionnez le champ de texte cible dans le menu Champ de texte et entrez votre nouveau texte.
Application du comportement Afficher-Masquer les lments
Haut de la page
Le comportement Afficher-Masquer les lments affiche, masque ou rtablit la visibilit par dfaut d'un ou plusieurs lments de page. Ce
comportement permet d'afficher des informations en fonction des interactions de l'utilisateur avec la page. Par exemple, lorsque le pointeur passe
sur l'image d'une plante, vous pouvez afficher un lment de page comportant des dtails sur le climat idal de la plante, l'ensoleillement dont elle
a besoin, sa taille adulte, etc. Le comportement ne fait qu'afficher ou masquer l'lment pertinent, il ne supprime pas rellement l'lment du flux
de la page lorsqu'il est masqu.
1. Slectionnez un objet et choisissez Afficher-Masquer les lments dans le menu Ajouter un comportement du panneau
Comportements.
Si l'option Afficher-Masquer les lments n'est pas disponible, cela signifie probablement qu'un lment PA est slectionn.
537
Etant donn que les lments PA n'acceptent pas les vnements dans la version 4.0 des deux navigateurs, vous devez
choisir un objet diffrent, tel que la balise <body> ou un lien (<a>).
2. Dans la liste Elments, slectionnez l'lment que vous souhaitez afficher ou masquer et cliquez sur Afficher, Masquer ou
Restaurer (cette dernire option restaure la visibilit par dfaut).
3. Rptez l'tape 2 pour les autres lments dont vous voulez modifier la visibilit. Vous pouvez modifier la visibilit de
plusieurs lments avec un seul comportement.
Application du comportement Afficher le menu contextuel
Haut de la page
Ajout, suppression et rorganisation d'lments de menu contextuel
Haut de la page
Haut de la page
Mise en forme d'un menu contextuel

Positionnement d'un menu contextuel dans un document
Haut de la page
Haut de la page
Modification d'un menu contextuel

Application du comportement Permuter une image
Haut de la page
Cette action remplace une image par une autre, en modifiant l'attribut src de la balise <img>. Utilisez ce comportement pour crer des
substitutions de boutons et autres effets sur des images (y compris la substitution de plusieurs images la fois) L'insertion d'une image survole
ajoute automatiquement votre page un comportement Permuter une image.
Remarque : Etant donn que seul l'attribut src est affect par ce comportement, l'image de substitution doit en principe avoir les mmes
dimensions (hauteur et largeur) que l'original. Faute de quoi, l'image intervertie apparatrait dforme (compacte ou largie) de faon s'adapter
aux dimensions de l'image d'origine.
Il existe galement le comportement Restaurer l'image intervertie qui restaure la dernire interversion d'images son tat antrieur. Il est
automatiquement ajout lorsque vous associez le comportement Permuter une image un objet ; en principe, si vous avez laiss cette option
active en associant le comportement Permuter une image, vous n'avez pas besoin de l'utiliser manuellement.
1. Choisissez Insertion > Image ou cliquez sur le bouton Image du panneau Insertion pour insrer une image.
2. Dans l'inspecteur Proprits, indiquez un nom pour l'image dans la zone de texte situe l'extrme gauche.
Il n'est pas ncessaire de nommer les images ; elles sont nommes automatiquement lorsque vous associez le comportement
un objet. Toutefois, il vous sera plus facile de distinguer les images proposes dans la bote de dialogue Permuter une
image si vous avez vous-mme attribu un nom ces images.
3. Rptez les tapes 1 et 2 si vous souhaitez insrer des images supplmentaires.
4. Slectionnez un objet (en gnral, l'image que vous voulez remplacer) et choisissez l'option Permuter une image dans le
menu Ajouter un comportement du panneau Comportements.
5. Slectionnez l'image dont vous voulez modifier la source dans la liste Images.
6. Cliquez sur Parcourir pour slectionner le nouveau fichier d'image ou indiquez son chemin d'accs et son nom de fichier dans
la zone de texte Dfinir la source .
7. Rptez les tapes 5 et 6 si vous dsirez ajouter d'autres images modifier. Utilisez la mme action Permuter l'image pour
toutes les images que vous voulez modifier simultanment ; dans le cas contraire, l'action correspondante Restaurer l'image
intervertie ne les restaurerait pas toutes.
8. Slectionnez l'option Prcharger les images pour mettre en mmoire cache les nouvelles images au moment du chargement
de la page.
Cela vite le dlai de tlchargement des images lorsqu'un vnement dclenche leur apparition.
538
Application du comportement Valider le formulaire
Haut de la page
Le comportement Valider le formulaire teste le contenu des champs de texte indiqus pour vrifier que l'utilisateur a entr le type de donnes
correct. Associez ce comportement des champs de texte individuels l'aide de l'vnement onBlur pour valider ces champs au fur et mesure
que l'utilisateur remplit le formulaire ou associez-le au formulaire l'aide de l'vnement onSubmit pour valuer divers champs simultanment
lorsque l'utilisateur clique sur le bouton d'envoi. L'association de ce comportement un formulaire empche l'envoi de formulaires contenant des
donnes non valides.
1. Pour insrer un formulaire, choisissez Insertion > Formulaire ou cliquez sur le bouton Formulaire du panneau Insertion.
2. Pour insrer un champ de texte, choisissez Insertion > Formulaire > Champ de texte ou cliquez sur le bouton Champ de texte
du panneau Insertion.
Rptez cette tape pour insrer plusieurs champs de texte.
3. Choisissez une mthode de validation :
Pour valider les champs individuellement au fur et mesure que l'utilisateur remplit le formulaire, slectionnez un champ
de texte et choisissez Fentre > Comportements.
Pour valider plusieurs champs lorsque l'utilisateur envoie le formulaire, cliquez sur la balise <form> dans le slecteur de
balises situ dans le coin infrieur gauche de la fentre de document, puis choisissez Fentre > Comportements.
4. Slectionnez Valider le formulaire dans le menu Ajouter un comportement.
Si vous validez des champs individuellement, slectionnez dans la liste Champs le mme champ que celui que vous avez
slectionn dans la fentre de document.
Si vous validez plusieurs champs la fois, slectionnez un champ de texte dans la liste Champs.
6. Activez l'option Obligatoire si le champ doit obligatoirement contenir des donnes.
7. Slectionnez l'une des options d'acceptation suivantes :
Tout Vrifie qu'un champ obligatoire contient des donnes ; ces dernires peuvent tre de n'importe quel type.
Adresse lectronique Vrifie que le champ contient un symbole @.
Nombre Vrifie que le champ contient uniquement des valeurs numriques.
Nombre de Vrifie que le champ contient une valeur numrique comprise dans la plage indique.
8. Si vous validez plusieurs champs, rptez les tapes 6 et 7 pour tout champ supplmentaire valider.
9. Cliquez sur OK.
Si vous validez plusieurs champs lorsque l'utilisateur envoie le formulaire, l'vnement onSubmit apparat automatiquement
dans le menu droulant Evnements.
10. Si vous validez des champs individuellement, vrifiez que l'vnement par dfaut est bien onBlur ou onChange. Si ce n'est
pas le cas, slectionnez l'un de ces vnements.
Ces deux vnements dclenchent le comportement Valider le formulaire ds que l'utilisateur sort du champ concern. La
diffrence entre ces deux vnements est que onBlur est toujours dclench, que l'utilisateur ait saisi ou non du texte dans le
champ, alors que onChange n'est dclench que si l'utilisateur a modifi le contenu du champ. L'vnement onBlur est
prfrable si le champ est obligatoire.
Voir aussi
539
Procdures inter-produits
540
Modules complmentaires
Les modules sont de nouvelles fonctionnalits, faciles intgrer dans Dreamweaver. Vous pouvez utiliser plusieurs types de modules
complmentaires ; il existe, par exemple, des modules complmentaires qui permettent de reformater des tableaux, de se connecter des bases
de donnes principales ou qui vous aident crire des scripts pour les navigateurs.
Remarque : Pour installer des modules complmentaires accessibles tous les utilisateurs dans un systme dexploitation multiutilisateur, vous
devez disposer des droits Administrateur (Windows) ou root (Mac OS X). Pour plus dinformations sur lutilisation de Dreamweaver sur les
systmes multiutilisateurs, cliquez ici.
Haut de la page
Utilisation des modules complmentaires dans Dreamweaver

Cliquez sur Windows > Parcourir les modules complmentaires et installez les modules complmentaires. Lorsque vous cliquez sur Parcourir les
modules complmentaires, la page Modules complmentaires dAdobe Creative Cloud saffiche.
Sur la page Modules complmentaires dAdobe Creative Cloud, cliquez sur Dreamweaver sur la gauche pour afficher des modules
complmentaires spcifiques Dreamweaver. Vous pouvez galement utiliser la zone de recherche situe sur la droite pour rechercher un
module complmentaire particulier.
Page Modules complmentaires dAdobe Creative Cloud
Important : Avant dinstaller les modules complmentaires, assurez-vous davoir activ la synchronisation de fichiers pour votre compte
Adobe Creative Cloud. Pour plus de dtails, voir Activer la synchronisation de fichiers sur Adobe Creative Cloud.
Suivez les instructions lcran pour installer le module complmentaire.
Pour afficher les modules que vous avez installs ou partags, cliquez sur Tous vos achats et lments partags sous Mes modules
complmentaires.
541
Page Modules complmentaires dAdobe Creative Cloud - Mes modules complmentaires
Haut de la page
Activation de la synchronisation de fichiers sur Adobe Creative Cloud

Avant dinstaller les modules complmentaires dAdobe Creative Cloud, assurez-vous davoir activ la synchronisation des fichiers sur votre client
Adobe Creative Cloud.
1. Cliquez sur
sur la barre dtat systme pour ouvrir le client Adobe Creative Cloud.
2. Cliquez sur
, puis sur Prfrences.
542
Prfrences dans le client Adobe Creative Cloud
3. Dans longlet Fichiers, dfinissez Sync. active/dsactive sur Active.
543
Synchronisation de fichiers dans le client Adobe Creative Cloud
544
Intgration entre les applications

A propos de l'intgration de Photoshop, Flash et Fireworks
A propos de l'intgration de Photoshop, Flash et Fireworks
Haut de la page
Photoshop, Fireworks et Flash sont de puissants outils de dveloppement Web qui permettent de crer et de grer des graphismes et des fichiers
SWF. Vous pouvez intgrer de faon troite Dreamweaver avec ces outils au sein de votre processus de cration.
Remarque : Une intgration limite est galement disponible avec quelques autres applications. Par exemple, vous pouvez exporter un fichier
InDesign en format XHTML et continuer le modifier dans Dreamweaver. Vous trouverez un didacticiel consacr ce flux d'activits l'adresse
Vous pouvez insrer aisment des images et du contenu crs dans Adobe Flash (fichiers SWF et FLV) dans un document Dreamweaver. Vous
pouvez galement modifier une image ou un fichier SWF dans son diteur d'origine aprs l'avoir insr dans un document Dreamweaver.
Remarque : Pour qu'il soit possible d'utiliser Dreamweaver conjointement ces applications Adobe, toutes ces applications doivent tre installes
sur votre ordinateur.
Pour Fireworks et Flash, l'intgration des produits est ralise par l'intermdiaire de l'dition Roundtrip. L'dition Roundtrip permet de transfrer de
faon fiable les mises jour de code entre Dreamweaver et les autres applications, en prservant par exemple les comportements de survol ou les
liens vers d'autres fichiers.
Dreamweaver fait galement appel aux Design Notes pour l'intgration des produits. Les Design Notes sont de petits fichiers permettant
Dreamweaver de localiser le document source correspondant un fichier image ou un fichier SWF export. Lorsque vous exportez des fichiers
de Fireworks, Flash ou Photoshop directement vers un site dfini par Dreamweaver, les Design Notes qui contiennent des rfrences au fichier de
programmation PSD, PNG ou Flash (FLA) sont automatiquement exportes vers le site avec le fichier Web (format GIF, JPEG, PNG ou SWF).
Outre les informations relatives l'emplacement, les Design Notes contiennent des informations pertinentes sur les fichiers exports. Lorsque vous
exportez une table Fireworks, par exemple, Fireworks rdige une Design Note pour chaque fichier d'image export dans la table. Si le fichier
export contient des zones ractives ou des effets de survol, les Design Notes contiennent des informations sur les scripts les concernant.
Pendant l'exportation, Dreamweaver cre un dossier nomm _notes dans le mme dossier que l'actif export. Ce dossier contient les Design
Notes ncessaires l'intgration de Dreamweaver avec Photoshop, Flash ou Fireworks.
Remarque : Pour pouvoir utiliser les Design Notes, vous devez vous assurer qu'elles ne sont pas dsactives pour votre site Dreamweaver. Elles
sont actives par dfaut. Toutefois, mme si elles sont dsactives, lorsque vous insrez un fichier d'image Photoshop, Dreamweaver cre une
Design Note pour stocker l'emplacement du fichier PSD source.
Vous trouverez un didacticiel consacr l'intgration de Dreamweaver et Fireworks l'adresse www.adobe.com/go/vid0188_fr.
Vous trouverez un didacticiel consacr l'intgration de Dreamweaver et Photoshop l'adresse www.adobe.com/go/lrvid4043_dw_fr.
Voir aussi
Didacticiel sur Dreamweaver et InDesign
545
Utilisation de Fireworks et Dreamweaver

Insertion d'une image Fireworks
Modification d'une image ou d'un tableau Fireworks dans Dreamweaver
Optimisation d'une image Fireworks depuis Dreamweaver
Utilisation de Fireworks pour modifier les espaces rservs pour les images Dreamweaver
A propos des menus contextuels de Fireworks
Modification des menus contextuels de Fireworks dans Dreamweaver
Modification d'un menu contextuel cr dans Fireworks MX 2004 ou une version plus ancienne
Dfinition des prfrences de lancement et de modification des fichiers source Fireworks
Insertion de code HTML Fireworks dans un document Dreamweaver
Collage de code HTML Fireworks dans Dreamweaver
Mise jour du code HTML Fireworks plac dans Dreamweaver
Cration d'un album photos pour le Web
Haut de la page
Insertion d'une image Fireworks
Dreamweaver et Fireworks reconnaissent et partagent de nombreuses procdures de modifications apportes aux fichiers, parmi lesquelles celles
apportes aux liens, aux cartes graphiques, aux dcoupes de tables et bien plus. Runies, les deux applications rationalisent les tches de
dveloppement consistant modifier, optimiser et importer des fichiers graphiques Web dans des pages HTML.
Vous pouvez placer une image exporte avec Fireworks directement dans un document Dreamweaver l'aide de la commande Image (menu
Insertion) ou vous pouvez crer une image Fireworks partir d'un espace rserv pour l'image Dreamweaver.
1. Dans le document Dreamweaver, placez le point d'insertion l'emplacement o vous souhaitez insrer l'image, puis procdez
de l'une des manires suivantes :
Choisissez Insertion > Image.
Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Image ou faites-le glisser vers le document.
2. Recherchez le fichier Fireworks export et cliquez sur OK (Windows) ou Ouvrir (Macintosh).
Remarque : Si le fichier Fireworks ne se trouve pas dans le site courant de Dreamweaver, un message vous demande si vous
souhaitez copier le fichier dans le dossier racine. Cliquez sur Oui.
Modification d'une image ou d'un tableau Fireworks dans Dreamweaver
Haut de la page
Quand vous ouvrez ou ditez une image ou une dcoupe d'image faisant partie d'une table Fireworks, Dreamweaver lance Fireworks, ce qui
ouvre le fichier PNG partir duquel l'image ou la table a t exporte.
Remarque : Ce principe suppose que Fireworks soit dfini comme diteur d'image externe principal pour les fichiers PNG. Par ailleurs, Fireworks
est souvent dfini comme diteur par dfaut pour les fichiers JPEG et GIF, bien qu'il puisse tre utile de dfinir Photoshop comme diteur par
dfaut pour ces types de fichiers.
Lorsque l'image fait partie d'une table Fireworks, vous pouvez ouvrir la table entire en vue de la modifier, pour autant que le commentaire  figure dans le code HTML. Si le fichier PNG source a t export partir de Fireworks vers un site Dreamweaver l'aide du paramtre
Document HTML et image du style Dreamweaver, le commentaire de la table Fireworks est automatiquement insr dans le code HTML.
1. Dans Dreamweaver, ouvrez l'inspecteur Proprits (Fentre > Proprits), s'il n'est pas dj ouvert.
2. Cliquez sur une image ou une dcoupe d'image pour la slectionner.
Lorsque vous slectionnez une image exporte depuis Fireworks, l'inspecteur Proprits identifie la slection comme image
ou table Fireworks et affiche le nom du fichier source PNG.
3. Pour lancer Fireworks afin d'apporter des modifications, procdez de l'une des manires suivantes :
Dans l'inspecteur Proprits, cliquez sur Modifier.
Maintenez enfonce la touche Ctrl (Windows) ou Commande (Macintosh) et double-cliquez sur l'image slectionne.
Cliquez sur l'image slectionne avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle
enfonce (Macintosh) et choisissez Modifier avec Fireworks dans le menu contextuel.
546
Remarque : Si Fireworks ne trouve pas le fichier source, un message vous invite le faire. Lorsque vous travaillez dans le
fichier source Fireworks, les modifications sont enregistres dans le fichier source et le fichier export, sinon seul le fichier
export est mis jour.
4. Dans Fireworks, modifiez le fichier PNG source puis cliquez sur Termin.
Fireworks enregistre les modifications dans le fichier PNG, exporte l'image mise jour (ou le document HTML et les images)
et active de nouveau Dreamweaver. Dans Dreamweaver, l'image ou la table mise jour apparat.
Vous trouverez un didacticiel consacr l'intgration de Dreamweaver et Fireworks l'adresse
Optimisation d'une image Fireworks depuis Dreamweaver
Haut de la page
Dreamweaver permet de modifier rapidement une image ou une animation Fireworks. Depuis Dreamweaver, vous pouvez modifier les paramtres
d'optimisation et d'animation, ainsi que la taille et la zone de l'image exporte.
1. Dans Dreamweaver, slectionnez l'image dsire puis effectuez l'une des oprations suivantes :
Choisissez Commande > Optimiser l'image.
Cliquez sur le bouton de modification des paramtres de l'image dans l'inspecteur Proprits.
2. Apportez les modifications dans la bote de dialogue Aperu de l'image.
Pour modifier les paramtres d'optimisation, cliquez sur l'onglet Options.
Pour modifier la taille et la zone de l'image exporte, cliquez sur l'onglet Fichier.
3. Une fois termin, cliquez sur OK.
Utilisation de Fireworks pour modifier les espaces rservs pour les images Dreamweaver
Haut de la page
Vous pouvez crer un espace rserv dans un document Dreamweaver, puis lancer Fireworks pour crer une image graphique ou une table
Fireworks y placer.
Pour crer une image partir d'un espace rserv, Dreamweaver et Fireworks doivent tre installs sur votre systme.
1. Veillez ce que Fireworks soit dfini comme diteur d'image des fichiers PNG.
2. Dans la fentre de document, cliquez sur l'espace rserv pour l'image afin de le slectionner.
3. Dmarrez Fireworks en mode Modification depuis Dreamweaver en utilisant l'une des mthodes suivantes :
Dans l'inspecteur Proprits, cliquez sur Crer.
Appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh), puis double-cliquez sur l'espace rserv pour l'image.
Cliquez sur l'espace rserv pour l'image avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfonce (Macintosh), puis slectionnez Crer une image dans Fireworks.
4. Utilisez les options de Fireworks pour crer l'image.
Fireworks reconnat les paramtres suivants d'espace rserv pour l'image, qui sont dfinis lors de son utilisation dans
Dreamweaver : la taille de l'image (qui correspond la taille de la zone de travail Fireworks), l'ID de l'image (utilis par
Fireworks comme nom de document par dfaut pour le fichier source et le fichier d'exportation cr) et l'alignement du texte.
Fireworks reconnat galement les liens et certains comportements (permutation d'image, menu contextuel et texte
notamment) que vous avez associs l'espace rserv pour l'image lorsque vous travaillez dans Dreamweaver.
Remarque : Bien que les liens ajouts un espace rserv pour l'image soient invisibles dans Fireworks, ils sont conservs.
Si vous dessinez une zone ractive et que vous ajoutez un lien dans Fireworks, le programme ne supprimera pas le lien
ajout l'espace rserv pour l'image dans Dreamweaver. Toutefois, si dans Fireworks vous dessinez une dcoupe dans la
nouvelle image, le lien sera supprim du document Dreamweaver lors du remplacement de l'espace rserv pour l'image.
Fireworks ne reconnat pas les paramtres suivants d'espace rserv pour l'image : alignement de l'image, couleur,
espacement vertical et horizontal et cartes. Ils sont dsactivs dans l'inspecteur Proprits de l'espace rserv pour l'image.
5. Au terme de votre travail, cliquez sur Termin afin d'afficher l'invite d'enregistrement.
6. Dans la zone de texte Enregistrer dans, slectionnez le dossier dfini comme dossier du site local Dreamweaver.
Si vous avez attribu un nom l'espace rserv lors de son insertion dans le document Dreamweaver, Fireworks insre
automatiquement ce nom dans la zone de texte Nom de fichier. Vous pouvez modifier le nom.
7. Cliquez sur Enregistrer pour enregistrer le fichier PNG.
La bote de dialogue Exporter s'affiche. Cette bote de dialogue vous permet d'exporter l'image au format GIF, JPEG ou, dans
le cas d'images dcoupes, sous la forme de documents HTML et d'images.
547
8. Dans la zone Enregistrer dans, slectionnez le dossier du site local Dreamweaver.

La zone de texte Nom affiche automatiquement le nom dsignant le fichier PNG. Vous pouvez modifier le nom.
9. Dans la zone Enregistrer sous le type, slectionnez le type de fichier(s) exporter, par exemple Images uniquement ou
Documents HTML et images.
10. Cliquez sur Enregistrer pour enregistrer le fichier export.
Le fichier est enregistr et Dreamweaver est nouveau actif. Dans le document Dreamweaver, le fichier export ou la table
Fireworks remplace l'espace rserv pour l'image.
Haut de la page
A propos des menus contextuels de Fireworks

Fireworks permet de crer facilement et rapidement des menus contextuels de type CSS.
Les menus contextuels crs avec Fireworks sont non seulement plus extensibles et plus rapides tlcharger, mais encore prsentent les
avantages suivants :
Les lments de menu peuvent tre indexs par les moteurs de recherche.
Les lments de menu peuvent tre lus par des lecteurs d'cran, ce qui rend vos pages plus accessibles.
Le code gnr par Fireworks est aux normes et peut tre valid.
Vous pouvez modifier les menus contextuels Fireworks avec Dreamweaver ou Fireworks, mais pas les deux. Les modifications
apportes dans Dreamweaver ne sont pas conserves dans Fireworks.
Modification des menus contextuels de Fireworks dans Dreamweaver
Haut de la page
Vous pouvez crer un menu contextuel dans Fireworks 8, ou une version plus rcente, puis le modifier avec Dreamweaver ou Fireworks ( l'aide
de l'dition Roundtrip), mais pas les deux. Si vous modifiez vos menus dans Dreamweaver, puis dans Fireworks, vous perdez toutes les
modifications prcdentes, l'exception du texte.
Si vous prfrez modifier vos menus avec Dreamweaver, vous pouvez utiliser Fireworks pour crer le menu contextuel, puis Dreamweaver de
faon exclusive pour modifier le menu et le personnaliser.
Si vous prfrez modifier les menus dans Fireworks, vous pouvez utiliser la fonctionnalit d'dition Roundtrip de Dreamweaver, mais vous ne
devez pas modifier les menus directement dans Dreamweaver.
1. Dans Dreamweaver, slectionnez le tableau Fireworks contenant le menu contextuel, puis cliquez sur Modifier dans
Le fichier PNG source s'ouvre dans Fireworks.
2. Dans Fireworks, modifiez ce menu avec l'diteur correspondant, puis cliquez sur Termin dans la barre d'outils de Fireworks.
Fireworks renvoie le menu modifi Dreamweaver.
Si vous avez cr un menu contextuel dans Fireworks MX 2004 ou une version plus ancienne, vous pouvez le modifier dans
Dreamweaver avec la bote de dialogue Afficher le menu contextuel, disponible partir du panneau Comportements.
Modification d'un menu contextuel cr dans Fireworks MX 2004 ou une version plus
ancienne
Haut de la page
1. Dans Dreamweaver, slectionnez la zone ractive ou l'image qui dclenche le menu contextuel.
2. Dans le panneau Comportements (Maj+F3), double-cliquez sur Afficher le menu contextuel dans la liste Actions.
3. Apportez vos modifications dans la bote de dialogue Menu contextuel puis cliquez sur OK.
Dfinition des prfrences de lancement et de modification des fichiers source Fireworks
Haut de la page
Lorsque vous modifiez des images dans Fireworks, les images places dans vos pages Web sont normalement exportes par Fireworks depuis
un fichier source PNG. Lorsque vous ouvrez une image dans Dreamweaver pour la modifier, Fireworks ouvre automatiquement le fichier PNG
source, vous invitant prciser l'emplacement du fichier PNG si celui-ci ne peut pas tre localis. Vous pouvez rgler vos prfrences sous
Fireworks afin que Dreamweaver ouvre l'image insre, moins que vous ne prfriez que Fireworks vous offre la possibilit d'utiliser le fichier
d'image insre ou le fichier source Fireworks chaque fois que vous ouvrez une image sous Dreamweaver.
Remarque : Dreamweaver ne reconnat ces prfrences que dans certains cas. Par exemple, vous devez lancer et optimiser les images qui ne
font pas partie d'une table Fireworks et dont le chemin Design Notes vers un fichier PNG source est correct.
1. Dans Fireworks, choisissez Edition > Prfrences (Windows) ou Fireworks > Prfrences (Macintosh) et cliquez sur l'onglet
Lancer et Modifier (Windows) ou choisissez Lancer et Modifier dans le menu droulant (Macintosh).
548
2. Indiquez les prfrences applicables lors de la modification ou de l'optimisation d'images Fireworks places dans une
application externe :
Toujours utiliser le fichier PNG source Permet de lancer automatiquement le fichier PNG Fireworks dfini dans la Design
Note comme fichier source de l'image place. Les mises jour sont appliques au fichier PNG source et l'image place
correspondante.
Ne jamais utiliser le fichier PNG source Permet de lancer automatiquement l'image Fireworks place, qu'il existe ou non un
fichier PNG source. Les mises jour sont appliques l'image place uniquement.
Demander lors du lancement Affiche un message vous demandant si le fichier PNG source doit tre ouvert. Vous pouvez
galement dterminer les prfrences globales de la fonction de lancement et d'dition dans cette fentre d'invite.
Insertion de code HTML Fireworks dans un document Dreamweaver
Haut de la page
Dans Fireworks, la commande Exporter vous permet d'exporter et d'enregistrer des images optimises et des fichiers HTML dans le dossier du
site Dreamweaver de votre choix. Vous pouvez ensuite insrer le fichier dans Dreamweaver. Dreamweaver permet d'insrer dans un document du
code HTML gnr par Fireworks, intgrant des images, des dcoupes et du code JavaScript.
1. Dans le document Dreamweaver, placez le point d'insertion l o vous voulez insrer le code HTML Fireworks.
Choisissez Insertion > Objets image > HTML Fireworks.
Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Images et choisissez Insrer HTML Fireworks
dans le menu.
3. Cliquez sur Parcourir pour slectionner un fichier HTML Fireworks.
4. Si le fichier n'est plus ncessaire par la suite, activez l'option Supprimer fichier aprs insertion. Cette option n'a aucun effet
sur le fichier PNG source associ au fichier HTML.
Remarque : Si le fichier HTML se trouve sur un lecteur rseau, il est dfinitivement supprim (il n'est pas plac dans la
corbeille).
5. Cliquez sur OK pour insrer le code HTML, ainsi que les images associes, les dcoupes et le code JavaScript dans le
document Dreamweaver.
Collage de code HTML Fireworks dans Dreamweaver
Haut de la page
Pour placer rapidement dans Dreamweaver des images et tables gnres dans Fireworks, copiez et collez directement le code HTML Fireworks
dans un document Dreamweaver.
Copie et collage de code HTML Fireworks dans Dreamweaver

1. Dans Fireworks, choisissez Edition > Copier le code HTML.
2. Suivez les instructions de l'assistant qui vous aide effectuer la procdure d'exportation de votre code HTML et des images.
Quand vous y tes invit, indiquez le dossier du site Dreamweaver comme destination des images exportes.
L'assistant exporte les images l'endroit indiqu et copie le code HTML dans le Presse-papiers.
3. Dans le document Dreamweaver, placez le point d'insertion l'endroit du document o vous souhaitez coller le code HTML,
puis choisissez Edition > Coller code HTML Fireworks.
Le code HTML et JavaScript associ aux fichiers Fireworks exports est copi dans le document Dreamweaver et tous les
liens vers les images sont mis jour.
Exportation et collage de code HTML Fireworks dans Dreamweaver

1. Dans Fireworks, choisissez Fichier > Exporter.
2. Quand vous y tes invit, indiquez le dossier du site Dreamweaver comme destination des images exportes.
3. Dans le menu droulant Exporter, choisissez Documents HTML et Images.
4. Dans le menu droulant HTML, choisissez Copier dans le Presse-papiers, puis cliquez sur Exporter.
5. Dans le document Dreamweaver, placez le point d'insertion l'endroit du document o vous souhaitez coller le code HTML
export, puis choisissez Edition > Coller code HTML Fireworks.
Le code HTML et JavaScript associ aux fichiers Fireworks exports est copi dans le document Dreamweaver et tous les
liens vers les images sont mis jour.
Mise jour du code HTML Fireworks plac dans Dreamweaver
Haut de la page
Outre la technique de lancement et de modification dcrite ci-dessus, vous pouvez faire appel la commande Fichier > Mettre jour le code
549
HTML pour mettre jour des fichiers Fireworks placs dans Dreamweaver. La commande Mettre jour le code HTML vous permet de modifier
l'image PNG source dans Fireworks et de mettre jour automatiquement le code HTML et les fichiers d'image exports placs dans un document
Dreamweaver. Grce cette commande, vous pouvez mettre jour les fichiers Dreamweaver mme si Dreamweaver est inactif.
1. Dans Fireworks, ouvrez le fichier PNG source puis apportez les modifications dsires.
2. Choisissez Fichier > Enregistrer.
3. Dans Fireworks, choisissez Fichier > Mettre jour le code HTML.
4. Recherchez le fichier Dreamweaver qui contient le code HTML mettre jour, puis cliquez sur Ouvrir.
5. Recherchez le dossier dans lequel placer les fichiers d'image mis jour et cliquez sur Slectionner (Windows) ou Choisir
(Macintosh).
Fireworks met jour le code HTML et JavaScript du document Dreamweaver. Fireworks exporte galement les images mises
jour associes au code HTML et les place dans le dossier de destination indiqu.
Si Fireworks ne trouve pas le code HTML correspondant, il vous propose d'insrer du nouveau code HTML dans le document
Dreamweaver. Fireworks insre la section JavaScript du nouveau code au dbut du document et place la table HTML ou le
lien vers l'image la fin du document.
Haut de la page
Cration d'un album photos pour le Web

La fonctionnalit Crer un album photos pour le Web a t abandonne partir de Dreamweaver CS5.
Voir aussi
Utilisation d'un diteur d'image externe
Didacticiel sur Dreamweaver et Fireworks
Dfinition des options de la bote de dialogue Aperu de l'image
550
Utilisation de Flash et Dreamweaver

Modification dun fichier SWF depuis Dreamweaver dans Flash
Modification dun fichier SWF depuis Dreamweaver dans Flash
Haut de la page
Si Flash et Dreamweaver sont installs, vous pouvez slectionner un fichier SWF dans un document Dreamweaver et utiliser Flash pour le
modifier. Flash ne modifie pas directement le fichier SWF : il modifie le document source (fichier FLA), puis exporte nouveau le fichier SWF.
1. Dans Dreamweaver, ouvrez linspecteur des proprits (Fentre > Proprits).
2. Dans le document Dreamweaver, utilisez lune des mthodes suivantes :
Cliquez sur lespace rserv du fichier SWF pour le slectionner, puis sur Modifier dans linspecteur des proprits.
Cliquez sur lespace rserv du fichier SWF avec le bouton droit de la souris (Windows) ou en maintenant la touche
Contrle enfonce (Macintosh) et choisissez Modifier avec Flash dans le menu contextuel.
Dreamweaver passe sur Flash, qui tente son tour de localiser le fichier de programmation Flash (FLA) correspondant au
fichier SWF slectionn. Si Flash ne peut pas localiser le fichier de programmation Flash, un message vous invite le
faire.
Remarque : si le fichier FLA ou le fichier SWF est verrouill, extrayez le fichier dans Dreamweaver.
3. Dans Flash, modifiez le fichier FLA. La fentre Document Flash indique que vous tes en train de modifier le fichier partir de
Dreamweaver.
4. Une fois les modifications effectues, cliquez sur Termin.
Flash met jour le fichier FLA, le rexporte en tant que fichier SWF, se ferme et retourne sur le document Dreamweaver.
Remarque : pour mettre le fichier SWF jour et garder Flash ouvert, choisissez la commande Flash Fichier > Mettre jour
dans Dreamweaver.
5. Pour afficher le fichier mis jour dans le document, cliquez sur le bouton Lecture dans linspecteur des proprits de
Dreamweaver ou appuyez sur la touche F12 pour afficher un aperu de votre page dans une fentre de navigateur.
551
Utilisation d'Adobe Bridge et Dreamweaver

A propos d'Adobe Bridge
Dmarrage d'Adobe Bridge depuis Dreamweaver
Placement de fichiers dans Dreamweaver depuis Adobe Bridge
Placement d'un fichier Adobe Bridge sur votre page
Insertion d'un fichier Bridge sur votre page par glisser-dplacer
Dmarrage de Dreamweaver depuis Adobe Bridge
Haut de la page
A propos d'Adobe Bridge
Dreamweaver fournit une intgration en toute transparence avec Adobe Bridge, le navigateur de fichiers inter-plates-formes fourni avec les
composants d'Adobe Creative Suite 5. Adobe Bridge permet de retrouver, d'organiser et de parcourir les actifs dont vous avez besoin pour crer
des contenus d'impression, Web, vido et mobiles. Vous pouvez dmarrer Adobe Bridge partir de tout composant de Creative Suite (sauf
Acrobat 9) et l'employer pour accder des actifs de type Adobe et non Adobe.
A partir d'Adobe Bridge, vous pouvez :
Prvisualiser, rechercher, trier et traiter des fichiers sans ouvrir d'applications spcifiques de Creative Suite. Vous pouvez
galement modifier des mtadonnes de fichiers et utiliser Adobe Bridge pour importer des fichiers dans vos documents, vos
projets et vos compositions.
Importer et modifier des photos depuis la carte mmoire d'un appareil photo numrique, regrouper des photos apparentes
dans des piles, ainsi qu'ouvrir et modifier des fichiers RAW d'appareil photo sans devoir dmarrer Photoshop.
Excution de tches automatises, comme les commandes par lots
Synchroniser les paramtres de couleur entre les composants de la suite Creative Suite, auxquels est applique la gestion des
couleurs.
Haut de la page
Dmarrage d'Adobe Bridge depuis Dreamweaver
Vous pouvez dmarrer Adobe Bridge partir de Dreamweaver afin de visualiser vos fichiers avant de les placer ou de les faire glisser dans votre
page.
Vous pouvez dmarrer Adobe Bridge de diffrentes faons :
Choisissez Fichier > Parcourir dans Bridge.
Cliquez sur l'icne Parcourir dans Bridge de la barre d'outils standard.
Utilisez le raccourci clavier Parcourir dans Bridge : appuyez sur Ctrl+Alt+O (Windows) ou Commande+Option+O (Macintosh).
Adobe Bridge s'affiche en mode Gestionnaire de fichiers et prsente le contenu du dossier ouvert le plus rcemment dans Dreamweaver. Si
Adobe Bridge tait dj ouvert, sa fentre devient la fentre active.
Remarque : Adobe Bridge est uniquement install avec Dreamweaver CS5 lorsque vous installez Creative Suite CS5. Il n'est pas inclus avec la
version autonome de Dreamweaver CS5. Toutefois, Adobe Bridge tait inclus si vous avez install auparavant Dreamweaver CS3 ou CS4. Par
consquent, si vous avez toujours l'exemplaire d'Adobe Bridge install partir de ces versions, Dreamweaver CS5 peut y accder et l'utiliser.
Placement de fichiers dans Dreamweaver depuis Adobe Bridge
Haut de la page
Vous pouvez insrer des fichiers dans des pages Dreamweaver en les insrant ou en les dposant d'Adobe Bridge sur votre page. Pour que vous
puissiez utiliser cette fonctionnalit, le document Dreamweaver dans lequel vous voulez insrer le fichier doit tre ouvert et se trouver en mode
Cration.
Vous pouvez insrer la plupart des types de fichiers dans vos pages, mais Dreamweaver les traite diffremment :
Si vous insrez une image Web (JPEG, GIF ou PNG)), Dreamweaver insre directement les fichiers d'image dans la page et
en place une copie dans le dossier des images par dfaut de votre site.
Si vous insrez un fichier PSD Photoshop, vous devez dfinir ses paramtres d'optimisation avant que Dreamweaver puisse le
placer sur votre page.
552
Si vous insrez un fichier non graphique, comme un fichier MP3, PDF ou un fichier d'un type inconnu, Dreamweaver insre un
lien vers le fichier source.
Si vous insrez un fichier HTML, Dreamweaver insre un lien vers le fichier source.
(Windows uniquement) Si Microsoft Office est install et si vous insrez un fichier Microsoft Word ou Excel file, vous devez
indiquer si vous voulez insrer le fichier proprement dit ou un lien vers le fichier source. Si vous voulez insrer le fichier, vous
pouvez indiquer quelle proportion de formatage vous voulez conserver.
Placement d'un fichier Adobe Bridge sur votre page
Haut de la page
1. Dans Dreamweaver (mode Cration ou Code), placez le point d'insertion sur la page, l'endroit o vous voulez insrer le
fichier.
2. Dans Adobe Bridge, slectionnez le fichier puis choisissez Fichier > Placer dans Dreamweaver.
3. Si le fichier ne se trouve pas dans le dossier racine du site, vous tes invit l'y copier.
4. Si vous avez configur les prfrences (Edition > Prfrences > Accessibilit) de manire afficher les attributs lors de
l'insertion d'images, la bote de dialogue Attributs d'accessibilit aux balises d'image s'affiche quand vous insrez des images
Web dans un format tel que JPEG ou GIF.
Remarque : Si le point d'insertion se trouve en mode Code, Adobe Bridge dmarre normalement mais est incapable de placer le fichier. Vous
pouvez uniquement placer des fichiers en mode Cration.
Insertion d'un fichier Bridge sur votre page par glisser-dplacer
Haut de la page
1. Dans Dreamweaver (mode Cration ou Code), placez le point d'insertion sur la page, l'endroit o vous voulez insrer
l'image.
2. Si Adobe Bridge n'est pas dj ouvert, dmarrez-le.
3. Dans Adobe Bridge, slectionnez un ou plusieurs fichiers et faites-les glisser dans votre page Dreamweaver.
4. Si un fichier ne se trouve pas dans le dossier racine du site, vous tes invit l'y copier.
5. Si vous avez configur les prfrences (Edition > Prfrences > Accessibilit) de manire afficher les attributs lors de
l'insertion d'images, la bote de dialogue Attributs d'accessibilit aux balises d'image s'affiche quand vous insrez des images
Web dans un format tel que JPEG ou GIF.
Remarque : Si le point d'insertion se trouve en mode Code, Adobe Bridge dmarre normalement mais est incapable de placer le fichier. Vous
pouvez uniquement placer des fichiers en mode Cration.
Haut de la page
Dmarrage de Dreamweaver depuis Adobe Bridge

Slectionnez un fichier dans Adobe Bridge et effectuez l'une des oprations suivantes :
Choisissez Fichier > Ouvrir avec > Adobe Dreamweaver.
Ouvrir avec > Adobe Dreamweaverdans le menu contextuel.
Remarque : Si Dreamweaver est dj ouvert, cette action rend le programme actif. Si Dreamweaver n'est pas ouvert, Adobe Bridge le dmarre en
ignorant l'cran d'accueil.
Voir aussi
Creative Suite 5 - Bridge
Cration d'un objet dynamique
553
Utilisation de Device Central et Dreamweaver

Utilisation d'Adobe Device Central avec Dreamweaver
Conseils pour la cration de contenu Web Dreamweaver pour les priphriques mobiles
Utilisation d'Adobe Device Central avec Dreamweaver
Haut de la page
Device Central permet aux concepteurs et dveloppeurs Web travaillant sur Dreamweaver de prvisualiser des fichiers Dreamweaver sur de
nombreux priphriques mobiles. Device Central utilise la fonction Small-Screen Rendering d'Opera pour permettre aux concepteurs et aux
dveloppeurs de voir quoi ressemblera leur page Web sur un petit cran. Les concepteurs et les dveloppeurs peuvent aussi tester le
comportement de leurs fichiers en format CSS.
Par exemple, un dveloppeur Web peut travailler pour un client qui veut que le site Web soit disponible sur les tlphones portables. Le
dveloppeur Web peut utiliser Dreamweaver pour crer des pages prliminaires et Device Central pour tester l'affichage de ces pages sur
diffrents priphriques.
Conseils pour la cration de contenu Web Dreamweaver pour les priphriques mobiles
Haut de la page
Device Central permet dafficher des pages Web cres dans Dreamweaver laide de la fonction Small-Screen Rendering dOpera. Cette
prvisualisation peut vous donner une trs bonne ide de ce quoi ressemblera une page Web sur un priphrique mobile.
Remarque : la fonction Small-Screen Rendering dOpera peut tre ou ne pas tre pr-installe pour les priphriques virtuels. Device Central
donne simplement un aperu de ce quoi ressemblerait le contenu si la fonction Small-Screen Rendering dOpera tait installe.
Suivez les conseils ci-dessous pour vous assurer que les pages Web cres dans Dreamweaver saffichent correctement sur les priphriques
mobiles.
Si vous utilisez la structure Adobe Spry pour dvelopper un contenu, ajoutez la ligne HTML suivante vos pages afin
quelles saffichent en CSS et excutent les fonctions JavaScript correctement dans Device Central :
1
2
<link href="SpryAccordion.css" media="screen" rel="stylesheet" type="text/css"/>

<link href="SpryAccordion2.css" media="handheld" rel="stylesheet" type="text/css"/>
La fonction Small-Screen Rendering dOpera ne prend pas en charge les cadres, les listes droulantes, les soulignements, les
caractres barrs, les lgendes, les clignotements ni les rectangles de slection. Essayez dviter de dessiner ces lments.
Faites que les pages Web pour priphriques mobiles restent simples. En particulier, utilisez un nombre limit de polices,
tailles et couleurs de polices.
La rduction de la taille des images et la rduction du nombre de couleurs permettent daugmenter les chances que les images
ressemblent ce qui tait prvu. Utilisez les formats CSS ou HTML pour spcifier la largeur et la hauteur exactes pour chaque
image utilise. Indiquez du texte de remplacement pour toutes les images.
Remarque : vous trouverez de trs nombreuses informations sur loptimisation des pages Web pour les priphriques mobiles sur le site Web du
logiciel Opera.
Pour dautres conseils et de plus amples informations sur les techniques de cration de contenu pour les tlphones et priphriques mobiles,
visitez le site www.adobe.com/go/learn_cs_mobilewiki_fr.
Voir aussi
Aide d'Adobe Device Central
554
Utilisation de ConnectNow et Dreamweaver

Utilisation de ConnectNow
Haut de la page
Utilisation de ConnectNow
Adobe ConnectNow met votre disposition une salle de runion en ligne scurise et personnelle, o vous pouvez rencontrer dautres
personnes et collaborer avec elles sur le Web en temps rel. Grce ConnectNow, vous pouvez partager et annoter votre cran dordinateur,
envoyer des messages instantans et communiquer laide de la fonction audio intgre. Vous pouvez galement diffuser des vidos en temps
rel, partager des fichiers, capturer des comptes rendus et contrler lordinateur dun participant.
Vous pouvez accder ConnectNow directement partir de linterface de lapplication.
1. Choisissez la commande Fichier > Partager mon cran.
2. Dans la bote de dialogue Se connecter Adobe CS Live, entrez votre adresse de messagerie lectronique et votre mot de
passe, puis cliquez sur le bouton Se connecter. Si vous ne disposez pas dun ID Adobe, cliquez sur le bouton Crer un ID
Adobe.
3. Pour partager votre cran, cliquez sur le bouton Partager lcran de mon ordinateur, au centre de la fentre de lapplication
ConnectNow.
Pour obtenir des instructions compltes sur lutilisation de ConnectNow, consultez laide dAdobe ConnectNow.
Pour accder au didacticiel vido sur l'utilisation de ConnectNow, consultez la page Web Using ConnectNow to share your screen (7:12) (cette
prsentation est effectue dans Dreamweaver).
555
Extension AIR pour Dreamweaver

Installation de l'extension AIR pour Dreamweaver
Cration d'une application AIR dans Dreamweaver
Signature d'une application l'aide d'un certificat numrique
Modification des types de fichiers associs AIR
Modification des paramtres d'une application AIR
Aperu d'une page Web dans une application AIR
Utilisation des conseils de code et de la coloration du code AIR
Accs la documentation d'Adobe AIR
Avec l'extension Adobe AIR pour Dreamweaver, vous pouvez transformer une application Web en application de bureau. Les utilisateurs
peuvent ensuite excuter l'application sur leur bureau et ce, dans certains cas, sans connexion Internet.
Cette extension est utilisable avec Dreamweaver CS3 et les versions ultrieures. Elle n'est pas compatible avec Dreamweaver 8.
Remarque : Adobe AIR ne prend pas en charge Adobe InContext Editing. Si vous utilisez l'extension AIR pour Dreamweaver afin d'exporter une
application contenant des rgions InContext Editing, la fonctionnalit InContext Editing ne fonctionnera pas.
Haut de la page
Installation de l'extension AIR pour Dreamweaver
L'extension AIR pour Dreamweaver permet de crer des applications Internet enrichies utiliser sur le bureau. Par exemple, vous pouvez crer un
ensemble de pages Web qui interagissent afin d'afficher des donnes XML. Vous pouvez utiliser l'extension Adobe AIR pour Dreamweaver pour
regrouper cet ensemble de pages en une petite application qui peut tre installe sur l'ordinateur d'un utilisateur. Lorsque l'utilisateur excute
l'application depuis son bureau, celle-ci se charge et affiche le site Web dans sa propre fentre d'application, indpendamment d'un navigateur.
L'utilisateur peut ainsi consulter le site Web en local sur son ordinateur sans connexion Internet.
Les pages dynamiques telles que les pages Adobe ColdFusion et PHP ne fonctionnent pas dans Adobe AIR. Le module d'excution ne
fonctionne qu'avec HTML et JavaScript. Vous pouvez toutefois utiliser dans vos pages du code JavaScript afin d'appeler n'importe quel service
web expos sur Internet (y compris les services gnrs par ColdFusion ou PHP) l'aide de mthodes Ajax telles que XMLHTTPRequest ou des
API spcifiques Adobe AIR.
Configuration requise
Pour utiliser l'extension Adobe AIR pour Dreamweaver, les logiciels suivants doivent tre installs et configurs correctement :
Dreamweaver CS3 ou une version ultrieure
Adobe Extension Manager CS3 ou une version ultrieure
Java JRE 1.4 ou une version ultrieure (ncessaire pour la cration du fichier Adobe AIR). Java JRE est disponible l'adresse
http://java.sun.com/.
Les exigences ci-avant ne s'appliquent qu' la cration et la prvisualisation d'applications Adobe AIR dans Dreamweaver.
Pour installer et excuter une application Adobe AIR sur votre bureau, vous devez galement installer Adobe AIR sur
l'ordinateur. Pour tlcharger le module d'excution, consultez le site http://www.adobe.com/fr/products/air/.
Installation de l'extension Adobe AIR pour Dreamweaver

1. Tlchargez l'extension Adobe AIR pour Dreamweaver ici : http://www.adobe.com/fr/products/air/tools/ajax/.
2. Double-cliquez sur le fichier portant l'extension .mxp dans l'Explorateur Windows (Windows) ou dans le Finder (Macintosh).
3. Suivez les instructions qui s'affichent l'cran pour installer l'extension.
4. Quand vous avez termin, redmarrez Dreamweaver.
Pour plus d'informations sur l'utilisation de l'extension Adobe AIR pour Dreamweaver, voir Utilisation de l'extension AIR pour
Dreamweaver.
Haut de la page
Cration d'une application AIR dans Dreamweaver
Pour crer une application AIR base sur HTML dans Dreamweaver, slectionnez un site existant conditionner sous la forme d'une application
556
AIR.
1. Assurez-vous que les pages Web que vous voulez conditionner sous la forme d'une application sont bien contenues dans un
site Dreamweaver dfini.
2. Dans Dreamweaver, ouvrez la page d'accueil de l'ensemble de pages conditionner.
3. Choisissez Site > Paramtres d'application AIR.
4. Compltez la bote de dialogue AIR - Paramtres de l'application et du programme d'installation, puis cliquez sur Crer le
fichier AIR.
Pour plus d'informations, reportez-vous aux options de la bote de dialogue numres ci-dessous.
La premire fois que vous crez un fichier Adobe AIR, Dreamweaver cre un fichier .xml d'application dans le dossier racine
de votre site. Ce fichier fait office de manifeste et dfinit diffrentes proprits de l'application.
Les options de la bote de dialogue AIR - Paramtres de l'application et du programme d'installation sont les suivantes :
Nom de fichier de l'application le nom utilis pour le fichier excutable de l'application. Par dfaut, l'extension emploie le
nom du site Dreamweaver comme nom de fichier. Vous pouvez modifier ce nom si vous le souhaitez. Le nom ne doit toutefois
contenir que les caractres autoriss pour les noms de fichier ou de dossier. En d'autres termes, il ne peut contenir que des
caractres ASCII et ne peut pas se terminer par un point. Ce paramtre est obligatoire.
Nom de l'application le nom qui s'affiche sur les crans d'installation lorsque des utilisateurs installent l'application.
L'extension spcifie galement le nom du site Dreamweaver par dfaut. Ce paramtre n'est soumis aucune restrictions en
termes de caractres, et il n'est pas obligatoire.
ID de l'application identifie l'application l'aide d'un ID unique. Vous pouvez modifier l'ID par dfaut si vous le souhaitez.
N'utilisez pas d'espaces ni de caractres spciaux dans l'ID. Les seuls caractres valides sont 0 9, a z, A Z, . (point) et (tiret). Ce paramtre est obligatoire.
Version spcifie le numro de version de votre application. Ce paramtre est obligatoire.
Contenu initial dtermine la page de dmarrage de l'application. Cliquez sur le bouton Parcourir afin d'accder votre page
de dmarrage et de la slectionner. Le fichier choisi doit se trouver dans le dossier racine du site. Ce paramtre est
obligatoire.
Description permet de spcifier une description de l'application afficher lorsque l'utilisateur l'installe.
Copyright permet de spcifier un copyright qui s'affiche dans la section indiquant des informations sur les applications Adobe
AIR installes sur le Macintosh. Ces informations ne sont pas utilises pour les applications installes sous Windows.
Style de fentre spcifie le style de fentre (ou chrome) utiliser lorsque l'utilisateur excute l'application sur son ordinateur.
Le chrome systme entoure l'application avec le contrle de fentre standard du systme d'exploitation. Le chrome
personnalis (opaque) supprime le chrome standard du systme et vous permet de crer votre propre chrome pour
l'application. La cration du chrome personnalis s'effectue directement dans la page HTML conditionne. Le chrome
personnalis (transparent) est similaire au chrome personnalis (opaque), mais il ajoute des possibilits de transparence aux
bords de la page, ce qui permet de crer des fentres d'application non rectangulaires.
Taille de fentre spcifie les dimensions de la fentre d'application lorsqu'elle s'ouvre.
Icne permet de slectionner des images personnalises pour les icnes de l'application. Les images par dfaut sont des
images Adobe AIR qui sont fournies avec l'extension. Pour utiliser des images personnalises, cliquez sur le bouton
Slectionner les images d'icne. Ensuite, dans la bote de dialogue Images d'icne qui s'affiche, cliquez sur le dossier pour
chaque taille d'icne, puis slectionnez le fichier d'image utiliser. AIR n'accepte que les fichiers PNG comme images d'icne
d'application.
Remarque : Les images personnalises slectionnes doivent rsider dans le site de l'application et leurs chemins doivent
tre relatifs la racine du site.
Types de fichier associs permet d'associer des types de fichiers votre application. Pour plus d'informations, reportezvous aux sections suivantes.
Mises jour de l'application dtermine si c'est le programme d'installation d'application Adobe AIR ou l'application qui
effectue les mises jour vers les nouvelles versions des applications Adobe AIR. La case cocher est active par dfaut, ce
qui force le programme d'installation d'application Adobe AIR procder aux mises jour. Si vous voulez que votre
application se charge d'effectuer ses mises jour, dsactivez cette case cocher. Notez que si vous dsactivez la case
cocher, vous devrez rdiger une application capable d'excuter des mises jour.
Fichiers inclus spcifie les fichiers et les dossiers inclure dans votre application. Vous pouvez ajouter des fichiers HTML et
CSS, des fichiers d'image et des fichiers de bibliothque JavaScript. Cliquez sur le bouton Plus (+) pour ajouter des fichiers et
sur l'icne reprsentant un dossier pour ajouter des dossiers. N'incluez pas certains fichiers, tels que _mmServerScripts,
_notes, etc. Pour supprimer un fichier ou un dossier de la liste, slectionnez-le et cliquez sur le bouton Moins (-).
Signature numrique Cliquez sur Dfinir pour signer votre application l'aide d'une signature numrique. Ce paramtre est
obligatoire. Pour plus d'informations, reportez-vous aux sections suivantes.
557
Dossier du menu Programmes spcifie un sous-rpertoire, dans le menu Dmarrer de Windows, o le raccourci de
l'application doit tre cr. (Pas d'application sur Macintosh.)
Destination dtermine o le programme d'installation de la nouvelle application (fichier .air) doit tre enregistr.
L'emplacement par dfaut est la racine du site. Cliquez sur le bouton Parcourir pour choisir un autre emplacement. Le nom de
fichier par dfaut est bas sur le nom du site, auquel est ajoute une extension .air. Ce paramtre est obligatoire.
Voici un exemple de la bote de dialogue avec quelques options de base :
Signature d'une application l'aide d'un certificat numrique
Haut de la page
Une signature numrique permet de garantir que le code d'une application n'a pas t modifi ou corrompu depuis sa cration par l'auteur du
logiciel. Toutes les applications Adobe AIR ncessitent une signature numrique et ne peuvent tre installes sans celle-ci. Vous pouvez signer
votre application l'aide d'un certificat numrique que vous avez achet, crer votre propre certificat, ou prparer un fichier Adobe AIRI (fichier
intermdiaire d'Adobe AIR) que vous signerez plus tard.
1. Dans la bote de dialogue AIR - Paramtres de l'application et du programme d'installation, cliquez sur le bouton Dfinir situ
en regard de l'option Signature numrique.
2. Dans la bote de dialogue Signature numrique, effectuez l'une des oprations suivantes :
Pour signer une application avec un certificat numrique prachet, cliquez sur le bouton Parcourir, slectionnez le
certificat, entrez le mot de passe correspondant et cliquez sur OK.
Pour crer votre propre certificat numrique d'auto-signature, cliquez sur le bouton Crer et remplissez la bote de
dialogue. L'option de type du certificat fait rfrence au niveau de scurit : 1024-RSA utilise une cl 1 024 bits (moins
scurise) et 2048-RSA une cl 2 048 bits (plus scurise). Cliquez sur OK lorsque vous avez termin. Ensuite, entrez le
mot de passe correspondant dans la bote de dialogue Signature numrique et cliquez sur OK.
Choisissez Prparation d'un package AIR Intermdiaire (AIRI) signer ultrieurement, puis cliquez sur OK. Cette option
permet de crer une application AIR Intermdiaire (AIRI) sans signature numrique. Aucun utilisateur ne pourra toutefois
installer l'application tant que vous n'aurez pas ajout de signature numrique.
A propos de l'horodatage
Lorsque vous signez une application Adobe AIR l'aide d'un certificat numrique, l'outil de conditionnement interroge le serveur d'une autorit
d'horodatage afin d'obtenir une date et une heure de signature pouvant tre vrifies indpendamment. L'horodatage obtenu est incorpor au
fichier AIR. Tant que le certificat de signature est valide au moment de la signature, le fichier AIR peut tre install, mme aprs l'expiration du
certificat. Par contre, si aucun horodatage n'est obtenu, le fichier AIR ne pourra plus tre install lorsque le certificat aura expir ou sera rvoqu.
Par dfaut, l'extension Adobe AIR pour Dreamweaver obtient un horodatage lors de la cration d'une application Adobe AIR. Vous pouvez
toutefois dsactiver l'horodatage en dsactivant l'option Horodatage de la bote de dialogue Signature numrique. Ceci peut par exemple s'avrer
558
ncessaire si aucun service d'horodatage n'est disponible. Adobe recommande que tout fichier AIR distribu publiquement contienne un
horodatage.
L'autorit d'horodatage utilise par dfaut par les outils de conditionnement d'Adobe AIR est Geotrust. Pour plus d'informations sur l'horodatage et
les certificats numriques, voir Digitally signing an AIR file (en anglais).
Haut de la page
Modification des types de fichiers associs AIR
Vous pouvez associer diffrents types de fichiers une application Adobe AIR. Par exemple, si vous voulez que les fichiers possdant l'extension
.avf s'ouvrent dans Adobe AIR lorsqu'un utilisateur double-clique dessus, vous pouvez ajouter l'extension .avf votre liste de types de fichiers
associs.
1. Dans la bote de dialogue AIR - Paramtres de l'application et du programme d'installation, cliquez sur le bouton Modifier la
liste en regard de l'option Types de fichiers associs.
2. Dans la bote de dialogue Types de fichiers associs, effectuez l'une des actions suivantes :
Slectionnez un type de fichier puis cliquez sur le bouton Moins (-) pour supprimer ce type de fichier.
Cliquez sur le bouton Plus (+) pour ajouter un type de fichier.
Si vous cliquez sur le bouton Plus pour ajouter un type de fichier, la bote de dialogue Paramtres du type de fichier
s'affiche. Compltez la bote de dialogue puis cliquez sur OK pour la fermer.
Les options disponibles sont les suivantes :
Nom spcifie le nom du type de fichier qui s'affiche dans la liste Types de fichier associs. Cette option est obligatoire et
ne peut contenir que des caractres ASCII alphanumriques (a-z, A-Z, 0-9) et des points (par adobe.VideoFile). Le nom
doit dbuter par une lettre. La longueur maximale est fixe 38 caractres.
Extension spcifie l'extension du type de fichier. N'incluez pas le point qui prcde l'extension. Cette option est obligatoire
et ne peut contenir que des caractres ASCII alphanumriques (a-z, A-Z, 0-9). La longueur maximale est fixe 38
caractres.
Description permet de spcifier une description facultative du type de fichier.
Type de contenu spcifie le type MIME ou le type de mdia du fichier (par exemple text/html, image/gif, etc.).
Emplacements des fichiers d'icne permet de slectionner des images personnalises pour les types de fichiers
associs. Les images par dfaut sont des images Adobe AIR qui sont fournies avec l'extension.
Modification des paramtres d'une application AIR
Haut de la page
Vous pouvez modifier les paramtres de votre application Adobe AIR tout moment.
Choisissez Site > Paramtres de l'application AIR, puis apportez les modifications dsires.
Haut de la page
Aperu d'une page Web dans une application AIR
Vous pouvez prvisualiser dans Dreamweaver une page HTML de la faon dont elle se prsenterait dans une application Adobe AIR. La
prvisualisation peut tre utile si vous voulez voir l'apparence qu'aurait votre page Web dans l'application sans devoir crer l'application tout
entire.
Dans la barre d'outils Document, cliquez sur le bouton Aperu/Dbogage dans le navigateur, puis choisissez Aperu dans AIR.
Vous pouvez galement appuyer sur Ctrl+MAJ+F12 (Windows) ou sur Commande+MAJ+F12 (Macintosh).
Utilisation des conseils de code et de la coloration du code AIR
Haut de la page
L'extension Adobe AIR pour Dreamweaver ajoute galement des conseils de code et la coloration du code aux lments de langage Adobe AIR
dans le mode Code de Dreamweaver.
Ouvrez un fichier HTML ou JavaScript en mode Code, puis entrez du code Adobe AIR.
Remarque : Le mcanisme de conseil de code ne fonctionne que dans les balises <script> ou dans les fichiers .js.
Pour plus d'informations sur les lments du langage Adobe AIR, consultez la documentation dans la suite de ce guide.
Haut de la page
Accs la documentation d'Adobe AIR
L'extension Adobe AIR ajoute un lment au menu Aide de Dreamweaver qui permet d'accder au guide de dveloppement d'applications AIR
l'aide de code HTML et d'Ajax.
559
Choisissez Aide > Aide d'Adobe AIR.
560
Utilisation de Dreamweaver avec les services en ligne Adobe

BrowserLab
Les services en ligne Adobe sont des applications Web hberges qui s'utilisent comme des outils de bureau traditionnels. Nanmoins, le principal
avantage des services en ligne est qu'ils sont toujours actualiss, car ils sont hbergs sur le Web et non sur votre ordinateur.
Dreamweaver s'intgre directement Adobe BrowserLab et Adobe Business Catalyst InContext Editing. Vous trouverez des informations sur
l'utilisation de ces services dans les sections Aide qui suivent.
Dreamweaver s'intgre galement aux services en ligne Adobe CS Live (qui comprennent BrowserLab). Pour plus d'informations sur l'utilisation
de CS Live, voir Utilisation d'Adobe CS Live.
Pour plus d'informations sur la gestion des services en ligne Adobe, voir le site Web d'Adobe l'adresse suivante :
www.adobe.com/go/learn_creativeservices_fr.
Haut de la page
BrowserLab
Adobe BrowserLab lets you preview local web content from within Dreamweaver, without requiring you to post it to a publicly-accessible server
first. You can preview files from your local Dreamweaver site, or from a remote or testing server.
For information about using the BrowserLab online service, including information about using BrowserLab with Dreamweaver, see
www.adobe.com/go/lr_abl_en.
Haut de la page

Adobe Business Catalyst InContext Editing est un composant d'dition d'Adobe Business Catalyst qui permet aux utilisateurs d'apporter des
modifications de contenu simples dans un navigateur Web. Pour modifier une page Web, il suffit l'utilisateur d'accder celle-ci, de se connecter
au InContext Editing et d'apporter les modifications dsires. Les options d'dition sont simples et lgantes; leur utilisation n'exige aucune
connaissance pralable du code HTML ou de l'dition Web.
Avant d'autoriser des utilisateurs apporter des modifications en direct sur le Web, toutefois, vous allez utiliser Dreamweaver pour rendre vos
pages HTML modifiables. Pour ce faire, dfinissez des rgions, sur la page, dont vous autoriserez la modification par les utilisateurs. Par exemple,
supposons que vous ayez dfini une page d'actualit reprenant des titres et des notices qui annoncent les articles. Vous pouvez slectionner ce
contenu et le transformer en rgion modifiable InContext Editing, de sorte que quand un utilisateur se connecte au InContext Editing, il puisse
modifier directement les titres et les notices dans son navigateur.
Dans cette , vous apprendrez comment utiliser les rgions modifiables InContext Editing dans Dreamweaver. Toutefois, Adobe fournit galement
d'autres ressources qui vous aideront travailler dans InContext Editing :
Pour obtenir de la documentation sur l'emploi d'InContext Editing pour modifier des pages dans un navigateur, consultez la
page www.adobe.com/go/learn_dw_incontextediting_browser_fr.
Pour obtenir de la documentation sur l'utilisation du panneau Administration d'InContext Editing, consultez la page
www.adobe.com/go/learn_dw_incontextediting_administration_guide_fr.
Pour plus d'informations sur Adobe Business Catalyst, visitez le site www.businesscatalyst.com.
Remarque : Adobe AIR n'est pas compatible avec Adobe Business Catalyst InContext Editing. Si vous utilisez l'extension AIR pour Dreamweaver
afin d'exporter une application contenant des rgions InContext Editing, la fonctionnalit InContext Editing ne fonctionnera pas.
Cration d'une rgion modifiable InContext Editing

Une rgion modifiable InContext Editing est une paire de balises HTML dont la balise d'ouverture contient l'attribut ice:editable. La rgion
modifiable dfinit une zone de la page qu'un utilisateur peut modifier directement dans un navigateur.
Remarque : Si vous ajoutez une rgion modifiable InContext Editing une page base sur un modle Dreamweaver, la nouvelle rgion modifiable
InContext Editing doit se trouver l'intrieur d'une rgion qui est dj modifiable.
Slectionnez une balise div, th ou td que vous voulez transformer en rgion modifiable.
Placez le point d'insertion o vous voulez insrer une nouvelle rgion modifiable sur la page.
561
Slectionnez prcisment une rgion modifiable dans un modle Dreamweaver (fichier DWT).
Slectionnez tout autre contenu de la page que vous voulez rendre modifiable (par exemple un bloc de texte).
2. Choisissez Insertion > InContext Editing > Crer une rgion modifiable.
3. Les options votre disposition varient en fonction de votre slection.
Si vous avez slectionn une balise div, th ou td, Dreamweaver la transforme en rgion modifiable sans autres oprations.
Si vous insrez une nouvelle rgion modifiable vierge, effectuez l'une des actions suivantes :
Choisissez Insrer une nouvelle rgion modifiable au point d'insertion actuel, puis cliquez sur OK. Dreamweaver
insre une balise div dans votre code, en ajoutant l'attribut ice:editable la balise d'ouverture.
Choisissez Transformer la balise parente en rgion modifiable si vous voulez que Dreamweaver fasse de la balise
parente de la slection le conteneur de la rgion. Seules certaines balises HTML sont transformables : div, th et td.
Remarque : Cette seconde option n'est disponible que lorsque le nud parent rpond prcisment aux critres de
transformation. Par exemple, il doit s'agit d'une des balises transformables indiques, et elle ne doit pas tre
confronte l'une des erreurs rpertories dans la section Messages d'erreur d'InContext Editing.
Si vous avez slectionn une rgion modifiable d'un modle Dreamweaver, cliquez sur OK dans la bote de dialogue
Crer une rgion modifiable. Dreamweaver entoure la rgion modifiable du modle d'une balise div qui fait office de
conteneur pour la nouvelle rgion modifiable InContext Editing.
Si vous avez slectionn un autre contenu rendre modifiable, effectuez l'une des oprations suivantes :
Choisissez Entourer la slection actuelle d'une balise DIV puis la transformer si vous voulez entourer votre slection
d'une balise div puis la transformer en rgion modifiable. La balise div dont Dreamweaver entoure le contenu fait office
de conteneur pour la rgion modifiable.
Remarque : L'ajout de balises div aux pages peut modifier le rendu de ces pages et les effets des rgles CSS. Par
exemple, si une rgle CSS applique un cadre rouge autour des balises div, vous verrez un cadre rouge autour de
votre slection actuelle lorsque Dreamweaver l'entoure d'une balise div et la transforme. Pour viter ce type de conflit,
vous pouvez rcrire les rgles CSS qui influent sur la slection actuelle, ou annuler la transformation (Edition >
Annuler), puis slectionner et transformer une balise compatible que Dreamweaver ne doit pas entourer d'une balise
div.
Choisissez Transformer la balise parente en rgion modifiable si vous voulez que Dreamweaver fasse de la balise
parente de la slection le conteneur de la rgion modifiable. Seules certaines balises HTML sont transformables : div,
th et td.
4. En mode Cration, cliquez sur l'onglet bleu de la rgion modifiable afin de la slectionner, si ce n'est pas dj fait.
Remarque : Si vous travaillez dans un modle Dreamweaver, veillez slectionner la rgion modifiable InContext Editing (la
rgion conteneur), et pas la rgion modifiable du modle Dreamweaver.
5. Activez ou dsactivez des options dans l'inspecteur Proprits Rgion modifiable. Ces options seront accessibles aux
utilisateurs qui modifieront le contenu de la rgion modifiable dans un navigateur. Par exemple, si vous choisissez l'option
Gras, l'utilisateur pourra mettre le texte en gras. Si vous choisissez Liste numrote et Liste puces, l'utilisateur pourra crer
des listes numrotes et des listes puces. Si vous choisissez Liens, l'utilisateur pourra crer des liens, et ainsi de suite.
Laissez le pointeur de la souris au-dessus d'une option pour afficher une infobulle qui explique sa fonction.
Si c'est la premire fois que vous ajoutez la fonctionnalit InContext Editing une page, Dreamweaver vous informe qu'il
ajoute des fichiers de support InContext Editing votre site: ice.conf.js, ice.js et ide.html. N'oubliez pas de charger ces fichiers
sur le serveur lors de l'envoi de la page, faute de quoi la fonctionnalit InContext Editing ne sera pas utilisable dans un
navigateur.
Cration d'une rgion rpte InContext Editing

Une rgion rpte InContext Editing est une paire de balises HTML dont la balise d'ouverture contient l'attribut ice:repeating. La rgion rpte
dfinit une zone de la page qu'un utilisateur peut rpter et laquelle il peut ajouter du contenu lorsqu'il la modifie dans un navigateur. Par
exemple, si vous avez dfini un titre suivi d'un paragraphe, vous pouvez transformer ces lments en une rgion rpte, que l'utilisateur pourra
ensuite dupliquer sur la page.
562
Rgions rptes affiches dans une fentre de navigateur InContext Editing modifiable. La rgion infrieure est slectionne et peut tre
nouveau duplique, supprime ou dplace vers le haut ou vers le bas.
L'utilisateur peut ajouter des rgions rptes bases sur la rgion d'origine, mais vous pouvez aussi lui laisser la possibilit d'en supprimer,
d'ajouter des rgions tout fait indites (non bases sur le contenu de la rgion d'origine) et d'en dplacer vers le haut ou vers le bas.
Lorsque vous crez une rgion rpte, Dreamweaver l'entoure d'un autre conteneur, baptis groupe de rgions rptes . Ce conteneur (une
balise div dont la balise d'ouverture comprend l'attribut ice:repeatinggroup) fait office de conteneur de toutes les rgions rptes modifiables qu'un
utilisateur peut ajouter au groupe. Il est impossible de dplacer des rgions rptes en dehors de leurs conteneurs de groupes de rgions
rptes. Il est en outre dconseill d'ajouter manuellement des balises de groupes de rgions rptes votre page. Dreamweaver les ajoute
automatiquement en cas de besoin.
Remarque : Lorsque vous crez une rgion rpte partir d'une ligne de tableau (tr tag), Dreamweaver applique l'attribut du groupe de rgions
rptes la balise parente (par exemple, la balise table) et n'insre pas de balise div.
Si vous travaillez sur une page contenant dj un groupe de rgions rptes et que vous tentez d'ajouter une rgion rpte juste aprs le
groupe existant, Dreamweaver dtecte qu'un groupe de rgions rptes prcde la rgion que vous voulez ajouter, et vous donne la possibilit
d'ajouter la nouvelle rgion au groupe existant. Vous pouvez dcider d'ajouter la nouvelle rgion rpte au groupe existant ou de crer un
nouveau groupe de rgions rptes.
Remarque : Si vous ajoutez une rgion rpte InContext Editing une page base sur un modle Dreamweaver, la nouvelle rgion rpte
InContext Editing doit se trouver l'intrieur d'une rgion qui est dj modifiable.
Pour crer une rgion rpte dans Dreamweaver, procdez comme suit :
Slectionnez la balise que vous voulez transformer en rgion rpte. Vous pouvez choisir de nombreuses balises : a,
abbr, acronym, address, b, big, blockquote, center, cite, code, dd, dfn, dir, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i,
img, ins, kbd, label, li, menu, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, tr, tt, u, ul, ou encore
var.
Remarque : Seules les balises div peuvent possder simultanment l'attribut de rgion modifiable et l'attribut de rgion
rpte.
Placez le point d'insertion o vous voulez insrer une nouvelle rgion rpte sur la page.
Slectionnez prcisment une rgion rpte dans un modle Dreamweaver (fichier DWT).
Slectionnez tout autre contenu de la page que vous voulez rendre rpte (par exemple un bloc de texte).
2. Choisissez Insertion > InContext Editing > Crer une rgion rpte.
3. Les options votre disposition varient en fonction de votre slection.
Si vous avez slectionn une balise transformable, Dreamweaver la transforme en rgion rpte sans autres oprations.
Si vous insrez une nouvelle rgion rpte vierge, effectuez l'une des actions suivantes :
Choisissez Insrer une nouvelle rgion rpte au point d'insertion actuel puis cliquez sur OK.
563
Choisissez Transformer la balise parente en rgion rpte si vous voulez que Dreamweaver fasse de la balise
parente de la slection le conteneur de la rgion. Seules certaines balises HTML sont transformables : a, abbr,
acronym, address, b, big, blockquote, center, cite, code, dd, dfn, dir, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i,
img, ins, kbd, label, li, menu, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, tr, tt, u, ul et var.
Remarque : Cette seconde option n'est disponible que lorsque le nud parent rpond prcisment aux critres de
transformation. Par exemple, il doit s'agit d'une des balises transformables indiques, et elle ne doit pas tre
confronte l'une des erreurs rpertories dans la section Messages d'erreur d'InContext Editing.
Si vous avez slectionn une rgion rpte d'un modle Dreamweaver, cliquez sur OK dans la bote de dialogue Crer
une rgion rpte. Dreamweaver entoure la rgion rpte du modle d'une balise div qui fait office de conteneur pour la
nouvelle rgion rpte InContext Editing.
Si vous avez slectionn un autre contenu rendre rptable, effectuez l'une des oprations suivantes :
Choisissez Entourer la slection actuelle d'une balise DIV puis la transformer si vous voulez entourer votre slection
d'une balise div puis la transformer en rgion rpte. La balise div dont Dreamweaver entoure le contenu fait office de
conteneur pour la rgion rpte.
Choisissez Transformer la balise parente en rgion rpte si vous voulez que Dreamweaver fasse de la balise
parente de la slection le conteneur de la rgion rpte. Seules certaines balises HTML sont transformables : a,
abbr, acronym, address, b, big, blockquote, center, cite, code, dd, dfn, dir, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6,
hr, i, img, ins, kbd, label, li, menu, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, tr, tt, u, ul et
var.
4. En mode Cration, cliquez sur l'onglet bleu de la rgion rpte afin de la slectionner, si ce n'est pas dj fait. Notez que
Dreamweaver vous force en fait slectionner l'onglet du groupe de rgions rptes. En effet, toutes les rgions rptes
existent dans un groupe de rgions rptes, et vous devez dfinir les options de ces rgions pour le groupe tout entier.
5. Activez ou dsactivez des options dans l'inspecteur Proprits Groupe de rgions rptes. Deux options sont disponibles :
Rorganiser et Ajouter/Supprimer. Si vous activez Rorganiser, les utilisateurs pourront dplacer les rgions rptes vers le
haut ou vers le bas lorsqu'ils y apporteront des modifications dans un navigateur. Si vous activez Ajouter/Supprimer, les
utilisateurs pourront ajouter ou supprimer des rgions rptes. Les deux options sont actives par dfaut, et une des deux
doit toujours tre active.
Si c'est la premire fois que vous ajoutez la fonctionnalit InContext Editing une page, Dreamweaver vous informe qu'il
ajoute des fichiers de support InContext Editing votre site: ice.conf.js, ice.js et ide.html. N'oubliez pas de charger ces fichiers
sur le serveur lors de l'envoi de la page, faute de quoi la fonctionnalit InContext Editing ne sera pas utilisable dans un
navigateur.
Suppression d'une rgion

La meilleure faon de supprimer une rgion consiste utiliser son inspecteur Proprits. Vous tes ainsi assur de supprimer tout le code associ
la rgion.
1. Slectionnez une rgion modifiable, une rgion rpte ou un groupe de rgions rptes.
2. Dans l'inspecteur Proprits de la rgion, cliquez sur le bouton Supprimer la rgion.
Dfinition de classes CSS pour le formatage

La fonctionnalit Gestion des classes CSS disponibles d'InContext Editing est obsolte depuis Dreamweaver CS5.
Messages d'erreur d'InContext Editing

Impossible d'appliquer InContext Editing aux balises contenant des balises de script ou des blocs de code ct serveur.
Si votre slection contient du code ct serveur, Dreamweaver ne vous autorise pas la transformer en rgion modifiable ou rpte. Ce
problme est li la manire dont InContext Editing enregistre les pages modifiables lorsque l'utilisateur travaille dans le navigateur. Lorsqu'un
utilisateur enregistre la page aprs l'avoir modifie, InContext Editing supprime le code ct serveur de la rgion.
La slection actuelle ne peut pas tre transforme ou entoure d'une balise DIV, car le nud parent n'autorise pas DIV
comme balise enfant.
Lorsqu'il est impossible de transformer directement la slection que vous voulez transformer sur votre page, Dreamweaver doit entourer cette
slection de balises div qui feront office de conteneur pour votre nouvelle rgion modifiable ou rpte. C'est la raison pour laquelle les balises
parentes de ce que vous voulez transformer doivent accepter les balises div comme enfants. Si la balise parente de la balise que vous tentez de
transformer n'accepte pas les balises div enfants, Dreamweaver ne vous autorise pas excuter la transformation.
La slection actuelle contient dj une rgion modifiable ou se trouve l'intrieur d'une telle rgion. Les rgions
modifiables imbriques ne sont pas autorises.
564
Si votre slection se trouve dans une rgion modifiable, ou si une rgion modifiable se trouve l'intrieur de la slection, Dreamweaver ne vous
autorise pas excuter la transformation. InContext Editing ne prend pas en charge les rgions modifiables imbriques.
Les rgions modifiables ne doivent pas contenir de rgions rptes ou de groupes de rgions rptes.
Les rgions modifiables InContext Editing ne peuvent pas contenir d'autres fonctionnalits InContext Editing. Si vous tentez d'ajouter une rgion
rpte ou un groupe de rgions rptes une rgion modifiable, Dreamweaver ne vous autorise pas excuter la transformation.
Les rgions rptes ne doivent pas se trouver dans des rgions modifiables ou contenir des groupes de rgions
rptes.
Les rgions modifiables InContext Editing ne peuvent pas contenir d'autres fonctionnalits InContext Editing. Si vous tentez d'ajouter une rgion
rpte ou un groupe de rgions rptes une rgion modifiable, Dreamweaver ne vous autorise pas excuter la transformation. En outre,
Dreamweaver ne transforme pas un lment en rgion modifiable ou rpte s'il contient dj un groupe de rgions rptes.
La slection actuelle contient dj une rgion rpte ou se trouve l'intrieur d'une telle rgion. Les rgions rptes
imbriques ne sont pas autorises.
Si votre slection se trouve dans une rgion rpte, ou si une rgion rpte se trouve l'intrieur de la slection, Dreamweaver ne vous
autorise pas excuter la transformation. InContext Editing ne prend pas en charge les rgions rptes imbriques.
La slection doit contenir prcisment une rgion modifiable/rpte de modle Dreamweaver ou se trouver dans
n'importe quelle rgion modifiable/rpte de modle Dreamweaver.
Lorsque vous travaillez avec des fichiers de modle Dreamweaver (fichiers .dwt), vous devez respecter certaines rgles. Pour transformer une
rgion modifiable/rpte d'un modle en une rgion modifiable/rpte InContext Editing, vous devez slectionner prcisment une rgion
modifiable/rpte Dreamweaver sur la page puis la transformer. Pour transformer une autre slection sur la page (par exemple un bloc de texte),
la slection doit se trouver l'intrieur d'une rgion modifiable de modle Dreamweaver.
Les fonctionnalits Rgion modifiable et Rgion rpte ne peuvent tre appliques simultanment qu'aux balises DIV.
Si votre slection n'est pas une balise div, et si un attribut de rgion rpte lui est dj appliqu, Dreamweaver ne vous autorisera pas lui
appliquer galement l'attribut de rgion modifiable. Seules les balises div peuvent possder simultanment l'attribut de rgion modifiable et l'attribut
de rgion rpte.
Dreamweaver a dtect qu'une balise de groupe de rgions rptes prcdait la rgion rpte.
Toutes les rgions rptes InContext Editing doivent se trouve dans un groupe de rgions rptes. Lorsque vous ajoutez une nouvelle rgion
rpte une page, Dreamweaver dtecte si elle est dj prcde par un groupe de rgions rptes. Si c'est le cas, Dreamweaver vous
propose d'ajouter la nouvelle rgion rpte au groupe existant ou de crer un nouveau groupe de rgions rptes qui contiendra la nouvelle
rgion.
565
Extract dans Dreamweaver CC
Lintgration dExtract avec Dreamweaver permet aux designers et dveloppeurs web dappliquer les
informations sur la conception et dextraire des actifs optimiss pour le web au sein de lenvironnement de
codage. Extract fournit une solution complte et indpendante pour lextraction dinformations sur le style
dactifs de compositions PSD, rduisant ainsi les besoins daller-retour entre Photoshop et Dreamweaver.
Avec le panneau Extract de Dreamweaver, vous pouvez extraire des CSS, des images, des polices, des
couleurs, des dgrads et des mesures directement dans votre page web. Outre ces fonctions principales
dExtract, Dreamweaver fournit galement les fonctions uniques suivantes :
Accs direct aux fichiers PSD sur Creative Cloud et tous les
fichiers PSD partags avec vous dans un dossier de collaboration
Conseils de code contextuels pour dfinir facilement des polices,
des couleurs et des dgrads dans votre code CSS
Prise en charge de la fonction glisser-dposer pour crer des
balises dimage partir de calques PSD
Possibilit de coller directement des styles en mode En direct (par
exemple, CSS Designer et Affichage dlment)
Prise en main
dExtract
Dfinition des
prfrences
Extract
Extraction de
code CSS
566
Copie de texte
Extraction
dimages
Extraction de
mesures
Extraction de
polices,
couleurs et
dgrads
Haut de la page
Prise en main dExtract

Extract dans Dreamweaver vous permet daccder vos fichiers PSD
directement depuis panneau Extract de Dreamweaver. Pour plus
dinformations sur le panneau et lespace de travail Extract et sur le
chargement de vos fichiers PSD dans le panneau Extract, consultez
les rubriques suivantes :
Tutoriel pratique
Conversion de contenu
Photoshop en code dans
Dreamweaver
Panneau et espace de travail Extract

Chargement de fichiers PSD dans Creative Cloud
Ouverture de fichiers PSD dans le panneau Extract

Lespace de travail Extract est conu pour vous aider utiliser Extract avec Dreamweaver de manire
efficace. Dans cet espace de travail, le panneau Extract apparat sur la gauche et votre page web saffiche
sur la droite dans laffichage deux volets (modes En direct et Code). Vous pouvez personnaliser lespace
de travail en faisant glisser, en ancrant ou en rduisant les panneaux selon vos besoins. Vous pouvez
galement enregistrer un espace de travail personnalis pour une utilisation ultrieure.
Remarque : si vous devez fermer le panneau Extract, utilisez les touches de raccourci clavier - Ctrl + K
(Win), Cmd + K (Mac) - ou slectionnez Fentre > Extract pour rouvrir le panneau.
Lors du premier lancement de Dreamweaver, le panneau Extract affiche un tutoriel interactif pour vous aider
dcouvrir les diffrents workflows. Vous pouvez utiliser la liste droulante en haut du panneau pour passer
dun tutoriel lautre.
Aprs avoir utilis le tutoriel, vous pouvez cliquer sur Mise en route pour commencer utiliser Extract dans
Dreamweaver. Le panneau Extract affiche des vignettes des dossiers et des fichiers PSD dans votre compte
567
Creative Cloud. Ces fichiers ont t tlchargs ou synchroniss depuis votre bureau, ou sont les fichiers
partags avec vous par lintermdiaire dun dossier de collaboration sur Creative Cloud.
Panneau Extract affichant les fichiers PSD enregistrs sur Creative Cloud
Pour relancer le tutoriel, cliquez sur le menu droulant dans langle suprieur droit du panneau et
slectionnez Lancer le tutoriel.
Chargement de fichiers PSD dans Creative Cloud

Vous pouvez charger un fichier PSD de Creative Cloud en cliquant sur licne Charger un PSD dans le
panneau Extract. Si les compositions PSD sont dveloppes par une personne ou une quipe diffrente,
vous pouvez faire quelles soient partages sur Creative Cloud. Vous pouvez ensuite tlcharger les fichiers,
et les charger directement sur votre compte en vous connectant Creative Cloud ou via le panneau Extract
dans Dreamweaver.
Ouverture de fichiers PSD dans le panneau Extract

Cliquez sur la vignette du fichier PSD requis dans le panneau Extract. Si une version mise jour du
fichier PSD devient disponible sur Creative Cloud aprs que vous layez ouvert, rechargez le fichier PSD
dans le panneau Extract. Pour ce faire, cliquez sur le nom du fichier PSD ou cliquez sur Recharger PSD
dans le menu droulant dans langle suprieur droit. Pour revenir sur la vignette et slectionner un autre
fichier, cliquez sur licne Creative Cloud dans langle suprieur gauche du panneau.
Pour agrandir laffichage et observer de plus prs la conception, modifiez lchelle en haut du panneau
Extract ou utilisez la touche Alt +/-. Utilisez longlet Calques ou la liste droulante Composition de calques
pour afficher ou masquer les lments du fichier PSD.
Vous tes maintenant prt convertir la composition PSD en site web.
Haut de la page
Dfinition des prfrences Extract

laide des prfrences dExtract, vous pouvez spcifier le format de fichier par dfaut dans lequel les
images doivent tre extraites, ainsi que lunit par dfaut des polices afficher dans le panneau Extract.
1. Slectionnez Edition > Prfrences (Win) ou Dreamweaver > Prfrences (Mac).
2. Slectionnez Extract dans la liste Catgorie.
3. (Facultatif) Modifiez le format par dfaut dans lequel les images doivent tre extraites.
568
Format de limage extraite
4. (Facultatif) Dans la section Extract pour les priphriques, slectionnez les rsolutions
requises. Ces paramtres sont utiliss lorsque vous choisissez denregistrer plusieurs
versions dune image dans diffrentes rsolutions.
Pour enregistrer ces versions en y ajoutant des suffixes, cliquez sur la ligne
correspondante de la colonne Suffixe, puis saisissez le texte de votre choix.
Pour enregistrer les diffrentes versions dans des dossiers de sortie distincts, cliquez
sur la ligne correspondante de la colonne Dossier, puis indiquez chaque chemin
daccs relatif.
5. (Facultatif) Cliquez sur Vider la mmoire cache pour supprimer les donnes mises en
mmoire cache concernant lutilisation dExtract.
6. Cliquez sur Appliquer, puis fermez la bote de dialogue Prfrences.
7. Pour afficher les modifications dans le panneau Extract, rechargez le PSD (menu
droulant > Recharger PSD).
Option Recharger PSD dans le panneau Extract
Haut de la page
Extraction de code CSS de fichiers PSD

Vous pouvez copier toutes ou certaines proprits CSS des lments dans une composition PSD et coller
directement les styles dans CSS Designer, dans lAffichage dlment en mode En direct ou dans votre code
(source CSS ou document HTML).
En outre, des conseils de code sont automatiquement renseigns avec les proprits CSS de llment que
vous slectionnez dans la composition PSD. Si vous prfrez coder, vous pouvez utiliser ces conseils de
code pour extraire les proprits CSS dans le code.
1. Dans le panneau Extract (Fentre > Extract), cliquez sur le fichier PSD requis. La
569
vignette du PSD sagrandit, ce qui vous permet de voir clairement la composition.

2. Dans le fichier PSD, cliquez sur llment ou lactif requis. Une fentre contextuelle
contenant la liste des proprits CSS de llment apparat et vous offre la possibilit de
les slectionner et de les copier. La largeur et la hauteur de llment slectionn
peuvent tre exprimes en pixels ou en pourcentages.
Remarque : si vous optez pour les pourcentages, les mesures seront galement
indiques sous forme de pourcentages.
Option Copier CSS dans le panneau Extract
Pour copier le CSS, slectionnez les proprits copier, puis cliquez sur Copier CSS.
3. Collez le CSS dans votre document en utilisant lune des mthodes suivantes :
Pour coller le CSS dans CSS Designer, cliquez sur le slecteur requis, puis cliquez
sur Coller les styles.
Pour coller le CSS laide de lAffichage dlment, cliquez sur un slecteur avec le
bouton droit de la souris, puis cliquez sur Coller les styles.
Pour coller le CSS dans le code, placez le point dinsertion lendroit requis, cliquez
avec le bouton droit de la souris, puis cliquez sur Coller.
Pour utiliser des conseils de code pour extraire le CSS, procdez comme suit :
1. Ouvrez une source CSS associe votre document ou passez en mode Code pour un
document HTML.
2. Dans le panneau Extract, cliquez sur le fichier PSD requis, puis sur llment requis dans
la composition.
3. Dans le document, placez le point dinsertion lemplacement requis dans le code.
4. Commencez saisir le nom dune proprit CSS pour afficher les conseils de code
contenant les proprits CSS de llment slectionn dans la composition PSD. Cliquez
sur la proprit CSS requise pour linsrer dans le code.
570
Conseils de code avec une proprit CSS dun lment dans un fichier PSD
5. Pour extraire plusieurs proprits CSS, slectionnez les proprits requises dans le
panneau contextuel Extract. Cliquez ensuite sur Insrer la slection dans les conseils de
code.
Insertion par lots de proprits CSS
Haut de la page
Copie de texte depuis des fichiers PSD

Le texte ou le contenu dans vos compositions PSD peuvent tre insrs dans votre page web en un simple
clic. Pour copier le texte de votre composition PSD dans le panneau Extract, slectionnez un lment de
texte et cliquez sur Copier le texte. Le texte est copi dans le presse-papiers. Vous pouvez ensuite coller le
texte o requis.
571
Option Copier le texte dans le panneau Extract
Aprs avoir extrait le texte, vous pouvez extraire des proprits, telles que la police et les couleurs
associs au texte. Pour plus dinformations, voir Extraction de polices, couleurs et dgrads partir des
fichiers PSD.
Haut de la page
Extraction dimages depuis des fichiers PSD

Vous pouvez simplement faire glisser un calque de vos compositions PSD, depuis le panneau Extract vers un
endroit prcis dans la vue En direct de votre page web. Les aides visuelles du mode En direct, telles que les
icnes Guides en direct et DOM, vous aident positionner les lments de votre choix. Quand vous marquez
une pause de quelques instants avant de dposer un lment, licne DOM (</>) apparat. Lorsque vous
passez la souris sur cette icne, la structure DOM saffiche et vous pouvez y dposer llment. Si vous
prfrez passer par du code, vous pouvez utiliser les conseils de code contextuels et extraire des images.
Les conseils de code vous permettent dextraire les couleurs et les dgrads en tant quimages.
Avant dinsrer limage extraite, Dreamweaver affiche le nom de limage, nom que vous pouvez modifier. Par
dfaut, limage est enregistre dans le dossier racine du site. Si vous souhaitez enregistrer limage dans un
emplacement personnalis, vous pouvez inclure le chemin daccs complet au rpertoire avec le nom.
Remarque : si vous extrayez une image dans un document qui ne fait partie daucun site dfini, limage est
extraite dans le rpertoire dans lequel se trouve le document. Pour les documents non enregistrs, vous tes
invit dabord enregistrer le document.
Vous pouvez galement enregistrer limage en local et y refaire appel plus tard pour lintgrer votre page
web. En outre, si vous crez un site web ractif, vous pouvez enregistrer plusieurs versions dune image,
avec diffrentes rsolutions, dun simple clic.
1. Dans le panneau Extract, cliquez sur le fichier PSD partir duquel tlcharger les
images.
2. Cliquez sur limage approprie dans le fichier PSD.
Remarque : utilisez longlet Calques et la liste droulante Composition de calques du
panneau Extract pour afficher ou masquer les images dans la composition PSD. Si une
image comprend plusieurs calques, vous pouvez choisir le calque de limage extraire.
Notez que les conseils de code saffichent en mode Code sur la droite de lespace de
travail.
3. Pour importer plusieurs images, maintenez enfonce la Maj ou la touche Commande et
cliquez sur les images concernes. Les images slectionnes sont extraites comme une
seule image.
4. Effectuez lune des actions suivantes :
Dans la fentre contextuelle qui saffiche lorsque vous cliquez sur limage, cliquez
sur
. Indiquez le chemin, le nom et le format du fichier, ainsi que le facteur
dchelle (si ncessaire). Ensuite, effectuez lune des actions suivantes :
Cliquez sur Enregistrer pour enregistrer limage la rsolution 1x. Pour
redimensionner limage, slectionnez loption Echelle et indiquez le facteur
dchelle.
Cliquez sur Enregistrer plusieurs lments pour enregistrer plusieurs versions de
limage, dans diffrentes rsolutions. Il nest pas impratif que le fichier PSD
contienne ces versions : Dreamweaver peut enregistrer limage dans diffrentes
rsolutions au moment de lextraction.
Vous pouvez indiquer les rsolutions requises et le dossier de sortie
correspondant sous Prfrences ( ).
572
Extraction de limage laide de licne Extraire lactif
Faites glisser limage de votre document en mode En direct. En mode En direct, les
Guides en direct saffichent pour vous aider positionner limage.
Lorsque vous dposez limage, Dreamweaver affiche le nom de limage. Vous
pouvez non seulement modifier le nom de limage, mais aussi son extension ;
appuyez ensuite sur Entre pour enregistrer limage. Par dfaut, limage est
enregistre dans le dossier racine du site. Pour enregistrer limage dans un
emplacement personnalis, entrez le chemin avec le nom.
573
Option de modification du nom et de lextension du fichier lorsque vous faites glisser une
image depuis le panneau Extract
Lorsque vous cliquez sur limage, les conseils de code contextuels dans
Dreamweaver sont renseigns. Dans le mode Code de votre document HTML ou
dans le document CSS, placez le curseur au point dinsertion. Aprs avoir saisi le
nom de limage darrire-plan ou la balise <img>, le nom de limage slectionne
apparat dans les conseils de code. Slectionnez limage, modifiez le nom et
lextension, si ncessaire, puis appuyez sur Entre.
Par dfaut, limage est enregistre dans le dossier racine du site. Pour enregistrer
limage dans un emplacement personnalis, entrez le chemin de fichier
personnalis avec le nom.
Extraction dimages laide des conseils de code
Haut de la page
Extraction de mesures des fichiers PSD
574
laide du panneau Extract, vous pouvez facilement afficher et extraire la valeur de la mesure entre deux
lments dans la composition PSD.
1. Dans le fichier PSD dans le panneau Extract, cliquez sur les lments requis en
maintenant la touche Maj ou la touche Commande enfonce.
Le panneau Extract affiche les distances horizontale et verticale entre les deux lments.
Mesures dans le panneau Extract
Remarque : pour afficher les mesures sous la forme de pourcentages, cliquez sur un
lment et choisissez Pourcentage.
2. Cliquez sur la valeur requise pour la copier dans le Presse-papiers.
3. Collez cette valeur o requis, par exemple, dans les proprits CSS de CSS Designer ou
dans votre code.
Haut de la page
Extraction de polices, couleurs et dgrads partir des

fichiers PSD
laide du panneau Extract, vous pouvez extraire des proprits CSS des polices, couleurs ou dgrads
utiliss dans votre composition PSD.
1. Dans le panneau Extract, cliquez sur Styles.
2. Pour extraire des polices, procdez comme suit dans la section Polices.
1. Dveloppez le type de la police requise.
Pour afficher plus dinformations sur la police, cliquez sur licne Adobe Typekit (
2. Cliquez sur le format et la taille copier, puis, dans la fentre contextuelle qui
saffiche, cliquez sur Copier CSS. Extrayez les balises des lments de texte qui
utilisent la police, le format et la taille sur lesquels vous avez cliqu.
575
).
Extraction de polices
Remarque : vous pouvez modifier lunit de la police en em ou rem dans

les prfrences Extract (Prfrences > Extract). Cliquez sur Recharger PSD dans le
menu droulant situ dans langle suprieur droit du panneau Extract pour voir les
modifications.
3. Collez le CSS o requis, par exemple, dans le code ou dans CSS Designer.
3. Pour extraire des couleurs, procdez comme suit dans la section Couleurs :
1. Cliquez sur la nuance de couleur requise. Extrayez les balises les lments qui
utilisent la couleur slectionne.
Remarque : vous pouvez galement slectionner une autre couleur de la
composition PSD laide du slecteur de couleurs.
2. Dans la fentre contextuelle qui saffiche lorsque vous cliquez sur la nuance de
couleur, slectionnez le modle de couleur requis (RVB, hexadcimal ou TSI), puis
copiez (Ctrl+c ; Cmd+c) la valeur chromatique.
Extraction de couleurs
3. Collez la valeur chromatique o requis, par exemple, dans le code ou

576
dans CSS Designer.

4. Pour extraire les dgrads, cliquez sur une nuance de dgrad dans la section
Dgrads. Dans la fentre contextuelle qui saffiche, cliquez sur Copier CSS. Collez
le CSS o requis, par exemple, dans le code ou dans CSS Designer.
Extraction de dgrads
Les prfixes fournisseur slectionns dans les prfrences (Preferences > Styles CSS)
sont galement colls avec les dgrads. Si vous extrayez un dgrad radial, le CSS
correspondant est insr sans prfixe fournisseur, les dgrads radiaux ntant pas pris
en charge.
577
Intgration entre Dreamweaver et Business Catalyst

Remarque : lextension Business Catalyst pour Dreamweaver nest pas disponible avec
Dreamweaver CC 2015 et versions ultrieures. Pour en savoir plus sur lutilisation de Business Catalyst avec
Dreamweaver, consultez la documentation Business Catalyst.
Installation du module complmentaire Business Catalyst

Cration dun site Business Catalyst temporaire
Importation dun site Business Catalyst
Insertion de modules, de donnes ou de fragments
Modification des proprits dobjets Business Catalyst
Business Catalyst est une application hberge destine la cration et la gestion dactivits commerciales
en ligne. Cette plate-forme unifie et sans codage dorsal vous permet de crer ce que vous souhaitez, de
sites web dimpressionnantes boutiques en ligne.
Lintgration de Dreamweaver Business Catalyst vous permet de crer et de mettre jour un site
Business Catalyst dans Dreamweaver. Lorsque vous avez cr un site Business Catalyst, vous pouvez vous
connecter au serveur Business Catalyst. Le serveur propose des fichiers et des modles que vous pouvez
utiliser pour crer votre site.
Haut de la page
Installation du module complmentaire Business Catalyst

Pour installer le module complmentaire, accdez Fentre > Parcourir les modules complmentaires. La
page Modules complmentaires dAdobe Creative Cloud saffiche. Recherchez le module complmentaire
Business Catalyst et suivez les instructions lcran pour linstaller.
Important : avant dinstaller les modules complmentaires, assurez-vous davoir activ la synchronisation de
fichiers pour votre compte Adobe Creative Cloud. Pour plus de dtails, voir Activer la synchronisation de
fichiers sur Adobe Creative Cloud.
Haut de la page
Cration dun site Business Catalyst temporaire

2. Cliquez sur Nouveau site Business Catalyst.
3. Connectez-vous laide des informations didentification de votre Adobe ID.
4. Entrez votre date de naissance et cliquez sur Mettre jour.
5. Dans la bote de dialogue Crer un site temporaire, entrez les dtails de votre site, puis
cliquez sur Crer un site temporaire gratuit.
Remarque : des courriers lectroniques relatifs aux dtails de votre compte Business
Catalyst vous seront envoys aprs la cration de votre site. Ces courriers lectroniques
contiennent des informations au sujet de votre site, comme des informations de mise en
578
route, lURL du site que vous avez cr et celle du site dadministration.

6. Choisissez un dossier sur votre ordinateur pour le site local.
Remarque : si vous cliquez sur Annuler, le site est cr dans Business Catalyst, mais
nest pas affich dans Dreamweaver. Il en va de mme si un problme rseau survient
lors de la cration dun site Business Catalyst.
7. Entrez le mot de passe associ votre Adobe ID.
8. Lorsque lactivit lie aux fichiers est termine, cliquez sur Termin.
9. Choisissez Fentre > Fichier. La vue locale du site que vous avez cr saffiche.
10. Choisissez Serveur distant dans le menu.
11. Entrez lAdobe ID associ votre mot de passe.
La structure des fichiers sur le serveur distant saffiche.
Haut de la page
Importation dun site Business Catalyst

Pour plus dinformations sur la migration de sites que vous avez crs auparavant laide de lextension
Business Catalyst, voir Migration de sites Business Catalyst vers Dreamweaver CS6.
2. Cliquez sur Importer un site Business Catalyst. La liste des sites Business Catalyst que
vous avez crs avec lAdobe ID saffiche.
3. Slectionnez le site, puis cliquez sur Importer le site.
4. Pour le site que vous tentez dimporter, indiquez un emplacement sur votre ordinateur.
5. Entrez le mot de passe li votre Adobe ID.
6. Lorsque lactivit lie aux fichiers est termine, cliquez sur Termin.
Haut de la page

Business Catalyst tant aussi un service dhbergement web, vous pouvez utiliser Dreamweaver pour grer
les fichiers locaux et distants du site. Pour plus dinformations, voir les rubriques suivantes :
Haut de la page
Insertion de modules, de donnes ou de fragments

1. Choisissez Fentre > Business Catalyst pour ouvrir le panneau Business Catalyst.
Pour insrer un module Business Catalyst, cliquez sur longlet Modules.
Pour insrer des balises, cliquez sur longlet Donnes. Les balises saffichent si vous
modifiez des fichiers qui prennent en charge les balises, comme la page affiliate.html
du dossier Layouts/Affiliates.
3. Dveloppez le module, puis cliquez sur le module que vous voulez ajouter au fichier.
579
4. Entrez les informations requises, puis cliquez sur Insrer.

5. Si votre site actuel utilise le nouveau moteur de rendu, longlet Fragments est affich.
Les options de longlet Fragments vous permettent dajouter des fragments de code,
comme des rgions rptes et conditionnelles, des sections de commentaires et des
inclusions (fonctionnement similaire aux inclusions ct serveur).
6. Cliquez sur En direct pour afficher un aperu de la page telle quelle se prsenterait dans
un navigateur web.
Haut de la page
Modification des proprits dobjets Business Catalyst

Tout comme lors de la modification dautres objets sur une page web, vous pouvez utiliser linspecteur
Proprits pour modifier les proprits des objets dans des modules Business Catalyst.
Si vous ne voyez pas les options de modification des proprits, vrifiez si vous tes autoris modifier le
fichier. En outre, pour certains modules, vous ne pouvez modifier la page que sur le site web dadministration
en ligne.
580

Vous pouvez insrer 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 reoit le code HTML converti et l'insre dans votre page Web. La taille du fichier, aprs rception du
code HTML converti par Dreamweaver, doit tre infrieure 300 Ko.
Au lieu d'importer tout le contenu d'un fichier, vous pouvez galement coller une partie du document Word et protger 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 insrer un
lien vers le document.
1. Ouvrez la page Web dans laquelle vous souhaitez copier le document Word ou Excel.
2. En mode Cration, procdez de l'une des manires suivantes pour slectionner le fichier :
Dplacez le fichier de son emplacement actuel vers la page o le contenu doit s'afficher.
Choisissez Fichier > Importer > Document Word ou Fichier > Importer > Document Excel.
3. Dans la bote de dialogue Insrer un document, recherchez le fichier ajouter, slectionnez une option de formatage dans le
menu Mise en forme situ dans le bas de la bote de dialogue, puis cliquez sur Ouvrir.
Texte seul Permet d'insrer du texte non format. Si le texte d'origine est mis en forme, tout le formatage est supprim.
Texte structur Permet d'insrer 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 avec formatage de base Permet d'insrer du texte structur 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 avec formatage complet Permet d'insrer du texte en conservant toute sa structure, son formatage HTML
et ses styles CSS.
Nettoyage des espaces inter-paragraphes de Word Permet d'liminer les espaces superflus entre les paragraphes lorsque
vous collez le texte alors que l'option Texte structur ou Mise en forme de base est slectionne.
Le contenu du document Word ou Excel s'affiche dans votre page.
581
Utilisation de Photoshop et de Dreamweaver

A propos de lintgration de Photoshop
A propos des objets dynamiques et des flux de production entre Photoshop et Dreamweaver
Cration dun objet dynamique
Mise jour dun objet dynamique
Mise jour de plusieurs objets dynamiques
Redimensionnement dun objet dynamique
Modification du fichier Photoshop dorigine dun objet dynamique
Etat des objets dynamiques
Copier-coller dune slection partir de Photoshop
Modification dimages colles
Dfinition des options de la bote de dialogue Optimisation de limage
Haut de la page
A propos de lintgration de Photoshop

Vous pouvez insrer des fichiers dimage Photoshop (en format PSD) dans des pages Web de Dreamweaver, puis les faire optimiser par
Dreamweaver sous la forme dimages Web (en formats GIF, JPEG et PNG). Dans ce cas, Dreamweaver insre limage en tant quobjet
dynamique et conserve une connexion en direct avec le fichier PSD dorigine.
Vous pouvez galement coller une image Photoshop calques multiples ou tranches multiples, en tout ou en partie, dans une page Web de
Dreamweaver. Toutefois, lorsque vous effectuez un copier-coller partir de Photoshop, aucune connexion en direct avec le fichier dorigine nest
conserve. Pour mettre jour limage, apportez les modifications dans Photoshop, puis utilisez de nouveau la fonction copier-coller.
Remarque : si vous utilisez souvent cette fonctionnalit dintgration, il peut tre utile de stocker les fichiers Photoshop sur votre site
Dreamweaver, de manire y accder plus aisment. Dans ce cas, veillez les voiler, de faon viter toute publication des actifs dorigine et
tout transfert superflu entre le site local et le serveur distant.
Pour suivre un didacticiel consacr lintgration de Photoshop avec Dreamweaver, reportez-vous la page Intgration de Dreamweaver avec
Photoshop.
Haut de la page
A propos des objets dynamiques et des flux de production entre Photoshop et Dreamweaver
Il existe deux principaux flux de production pour traiter les fichiers Photoshop dans Dreamweaver : le flux de production copier/coller et celui des
objets dynamiques.
Flux de production copier/coller
Le flux de production copier/coller vous permet de slectionner des tranches ou des calques dans un fichier Photoshop, puis de passer dans
Dreamweaver pour en faire des images compatibles avec une utilisation sur le Web. Toutefois, si vous voulez mettre jour le contenu
ultrieurement, vous devez ouvrir le fichier Photoshop dorigine, effectuer vos modifications, copier de nouveau votre tranche ou votre calque dans
le Presse-papiers, puis coller la tranche ou le calque mis jour dans Dreamweaver. Ce flux de production est recommand uniquement lorsque
vous voulez insrer une partie dun fichier Photoshop (par exemple, une section dune composition) en tant quimage sur une page Web.
Flux de production dobjets dynamiques
Lorsque vous travaillez sur des fichiers Photoshop entiers, Adobe recommande lutilisation de ce flux de production. Dans Dreamweaver, un objet
dynamique dsigne une image place sur une page Web avec une connexion en ligne vers un fichier Photoshop (PSD) dorigine. En mode
582
Cration dans Dreamweaver, un objet dynamique est signal par une icne situe dans le coin suprieur gauche de limage.
Objet dynamique
Lorsque limage Web (cest--dire limage de la page Dreamweaver) nest pas synchronise avec le fichier Photoshop dorigine, Dreamweaver
dtecte que le fichier dorigine a t mis jour et affiche lune des flches de licne dobjet dynamique en rouge. Lorsque vous slectionnez
limage Web en mode Cration et que vous cliquez sur le bouton Mettre jour depuis loriginal dans linspecteur Proprits, limage se met jour
automatiquement avec tous les changements effectus dans le fichier Photoshop dorigine.
Lorsque vous utilisez le flux de production dobjets dynamiques, vous navez pas besoin douvrir Photoshop pour mettre jour une image Web. En
outre, toute mise jour dobjet dynamique dans Dreamweaver est non destructive. Cela signifie que vous pouvez modifier la version Web de
limage sur votre page tout en prservant lintgrit de limage Photoshop dorigine.
Vous pouvez galement mettre jour un objet dynamique sans slectionner limage Web en mode Cration. Le panneau des actifs vous permet
de mettre jour tous les objets dynamiques, y compris les images susceptibles de ne pas pouvoir tre slectionnes dans la fentre de document
(par exemple, les images darrire-plan CSS).
Paramtres doptimisation dimage
Pour les flux de production copier/coller et dobjets dynamiques, vous pouvez spcifier des paramtres doptimisation dans la bote de dialogue
Optimisation de limage. Cette bote de dialogue vous permet de spcifier le format de fichier et la qualit de limage. Si vous copiez une tranche
ou un calque ou que vous insrez un fichier Photoshop en tant quobjet dynamique pour la premire fois, Dreamweaver affiche cette bote de
dialogue pour vous aider crer limage Web.
Si vous copiez une mise jour dans une tranche ou un calque, Dreamweaver se souvient des paramtres dorigine et recre limage Web avec
ces paramtres. De mme, lorsque vous mettez jour un objet dynamique laide de linspecteur Proprits, Dreamweaver reprend les
paramtres que vous avez utiliss lorsque vous avez insr limage pour la premire fois. Vous pouvez tout moment modifier les paramtres
dune image : il vous suffit de slectionner limage Web en mode Cration, puis de cliquer sur le bouton Modifier les paramtres de limage dans
linspecteur Proprits.
Stockage des fichiers Photoshop
Si vous avez insr une image Web et que vous navez pas enregistr le fichier Photoshop dorigine sur votre site Dreamweaver, Dreamweaver
reconnat le chemin vers le fichier dorigine comme chemin de fichier local absolu (cest le cas pour les flux de production copier/coller et dobjets
dynamiques). Par exemple, si le chemin vers votre site Dreamweaver est C:\Sites\monSite et que votre fichier Photoshop se trouve sous
C:\Images\Photoshop, Dreamweaver ne reconnat pas le fichier dorigine comme faisant partie du site intitul monSite. Cela pose des problmes si
vous voulez partager ce fichier Photoshop avec dautres personnes, car Dreamweaver considre uniquement le fichier comme disponible sur un
disque dur local spcifique.
Toutefois, si vous stockez le fichier Photoshop sur votre site, Dreamweaver tablit un chemin li au site vers le fichier. Les utilisateurs ayant accs
au site pourront galement tablir le bon chemin vers le fichier, sous rserve que vous leur ayez aussi fourni le fichier dorigine tlcharger.
Pour suivre un didacticiel vido consacr ldition Roundtrip avec Photoshop, consultez la page Edition Roundtrip avec Photoshop.
Haut de la page
Cration dun objet dynamique
583
Lorsque vous insrez une image Photoshop (fichier PSD) dans votre page, Dreamweaver cre un objet dynamique. Un objet dynamique est une
image Web qui conserve une connexion en direct avec limage Photoshop dorigine. Lorsque vous mettez jour limage dorigine dans Photoshop,
Dreamweaver vous permet de mettre jour limage dans Dreamweaver par simple clic sur un bouton.
1. Dans Dreamweaver (mode Cration ou Code), placez le point dinsertion sur la page, lendroit o vous voulez insrer
limage.
2. Choisissez Insertion > Image.
Vous pouvez galement tirer le fichier PSD sur la page, partir du panneau Fichiers, si vous stockez vos fichiers
Photoshop sur votre site Web. Dans ce cas, vous passerez ltape suivante.
3. Dans la bote de dialogue Slectionner la source de limage, recherchez votre fichier dimage PSD Photoshop en cliquant sur
le bouton Parcourir et en accdant ce fichier.
4. Dans la bote de dialogue Optimisation de limage qui saffiche, ajustez les paramtres doptimisation requis puis cliquez sur
OK.
5. Enregistrez le fichier dimage Web un emplacement du dossier racine de votre site Web.
Dreamweaver cre lobjet dynamique sur la base des rglages doptimisation slectionns, puis place une version Web de limage sur votre page.
Lobjet dynamique conserve une connexion en direct limage dorigine et vous signale quand les deux versions ne sont plus synchronises.
Remarque : si vous dcidez, par la suite, de modifier les rglages doptimisation dune image place sur vos pages, vous pouvez slectionner
cette image, cliquer sur le bouton Modifier les paramtres de limage dans linspecteur Proprits, puis apporter les modifications dsires dans la
bote de dialogue Optimisation de limage. Les modifications apportes dans la bote de dialogue Optimisation de limage sont appliques de faon
non destructrice. Dreamweaver ne modifie jamais le fichier Photoshop dorigine et recre toujours limage Web sur la base des donnes dorigine.
Pour suivre un didacticiel vido consacr ldition Roundtrip avec Photoshop, consultez la page Edition Roundtrip avec Photoshop.
Haut de la page
Mise jour dun objet dynamique

Si vous modifiez le fichier Photoshop auquel votre objet dynamique est li, Dreamweaver vous informe que limage Web nest plus synchronise
avec loriginal. Dans Dreamweaver, les objets dynamiques sont indiqus par la prsence dune icne dans le coin suprieur gauche de limage.
Lorsque limage Web dans Dreamweaver est synchronise avec le fichier Photoshop dorigine, les deux flches de licne sont vertes. Lorsque
limage Web nest plus synchronise avec le fichier Photoshop dorigine, lune des flches de licne devient rouge.
Pour mettre jour un objet dynamique laide du contenu actuel du fichier Photoshop dorigine, slectionnez cet objet dans la
fentre de document, puis cliquez sur le bouton Mettre jour depuis loriginal de linspecteur Proprits.
Remarque : il nest pas ncessaire que Photoshop soit install pour que vous puissiez procder la mise jour partir de Dreamweaver.
Haut de la page
Mise jour de plusieurs objets dynamiques

Vous pouvez mettre jour plusieurs objets dynamiques simultanment laide du panneau Actifs. Le panneau Actifs vous permet galement de
visualiser les objets dynamiques quil peut tre impossible de slectionner dans la fentre de document (par exemple une image darrire-plan
CSS).
1. Dans le panneau Fichiers, cliquez sur longlet Actifs pour visualiser les actifs du site.
2. Assurez-vous que laffichage Images est bien activ. Sil ne lest pas, cliquez sur le bouton Images.
3. Slectionnez chaque actif dimage dans le panneau Actifs. Lorsque vous slectionnez un objet dynamique, son icne est
visible dans le coin suprieur gauche de limage. Les images ordinaires ne comportent pas cette icne.
4. Pour chaque objet dynamique mettre jour, cliquez sur le nom de fichier laide du bouton droit de la souris, puis
choisissez Mettre jour depuis loriginal. Vous pouvez galement slectionner plusieurs noms de fichier en cliquant dessus
tout en maintenant la touche Ctrl enfonce, de manire les mettre jour ensemble.
Remarque : il nest pas ncessaire que Photoshop soit install pour que vous puissiez procder la mise jour partir de Dreamweaver.
584
Haut de la page
Redimensionnement dun objet dynamique

Vous pouvez redimensionner un objet dynamique dans la fentre de document comme vous le feriez pour nimporte quelle autre image.
1. Pour redimensionner limage, slectionnez lobjet dynamique dans la fentre de document, puis tirez les poignes de
redimensionnement. Vous pouvez prserver les proportions de largeur et de hauteur en maintenant la touche MAJ enfonce
tout en tirant les poignes.
2. Cliquez sur le bouton Mettre jour depuis loriginal de linspecteur Proprits.
Lorsque vous mettez jour lobjet dynamique, limage Web est de nouveau rendue, de manire non destructive, sur la base
du contenu actuel du fichier dorigine, ainsi que des paramtres doptimisation dorigine.
Haut de la page
Modification du fichier Photoshop dorigine dun objet dynamique

Lorsque vous avez cr un objet dynamique sur votre page Dreamweaver, vous pouvez modifier le fichier PSD dorigine dans Photoshop. Aprs
avoir apport des modifications dans Photoshop, vous pouvez aisment mettre jour limage Web dans Dreamweaver.
Remarque : veillez dfinir Photoshop comme diteur dimages externe principal.
1. Slectionnez lobjet dynamique dans la fentre de document.
2. Cliquez sur le bouton Modifier dans linspecteur Proprits.
3. Apportez les modifications requises dans Photoshop puis enregistrez le nouveau fichier PSD.
4. Dans Dreamweaver, slectionnez de nouveau lobjet dynamique puis cliquez sur le bouton Mettre jour depuis loriginal.
Remarque : si vous avez modifi la taille de limage dans Photoshop, vous devez rinitialiser la taille de limage Web dans Dreamweaver.
Dreamweaver met uniquement jour lobjet dynamique sur la base du contenu du fichier Photoshop, et pas de sa taille. Pour synchroniser la taille
dune image Web avec celle du fichier Photoshop dorigine, cliquez dessus laide du bouton droit de la souris, puis choisissez Rtablir la taille
selon original.
Haut de la page
Etat des objets dynamiques

Le tableau suivant numre les diffrents tats des objets dynamiques.
Etat de lobjet
dynamique
Description
Action conseille
Images
synchronises.
Limage Web est synchronise avec le contenu

actuel du fichier Photoshop dorigine. Les attributs de
largeur et de hauteur dans le code HTML
correspondent aux dimensions de limage Web.
Aucun
Actif dorigine
modifi.
Le fichier Photoshop dorigine a t modifi aprs la

cration de limage Web dans Dreamweaver.
Utilisez le bouton Mettre jour depuis

loriginal de linspecteur Proprits pour
synchroniser les deux images.
Les dimensions
de limage Web
diffrent de la
largeur et de la
hauteur HTML
slectionnes.
Les attributs de largeur et de hauteur dans le code

HTML sont diffrents des dimensions de limage
Web que Dreamweaver a cre lors de linsertion. Si
les dimensions de limage Web sont plus petites que
les valeurs de largeur et de hauteur HTML
slectionnes, limage peut sembler pixellise.
Utilisez le bouton Mettre jour depuis

loriginal de linspecteur Proprits pour
recrer limage Web partir du fichier
Photoshop dorigine. Dreamweaver utilise
les valeurs de largeur et de hauteur
HTML spcifies pour recrer limage.
Les dimensions
Les valeurs de largeur et de hauteur dans le code
Ne crez pas dimage Web dont les
585
de lactif dorigine
sont trop petites
pour les valeurs
de largeur et de
hauteur HTML
slectionnes.
HTML sont suprieures aux dimensions du fichier

Photoshop dorigine. Il se peut que limage semble
pixellise.
dimensions sont suprieures aux

dimensions du fichier Photoshop
dorigine.
Actif dorigine
introuvable.
Dreamweaver ne trouve pas le fichier Photoshop

dorigine spcifi dans la zone Original de
linspecteur Proprits.
Corrigez le chemin daccs au fichier

dans la zone Original de linspecteur
Proprits, ou dplacez le fichier
Photoshop lemplacement spcifi
actuellement.
Haut de la page
Copier-coller dune slection partir de Photoshop

Vous pouvez copier une image Photoshop, ou une partie de celle-ci, et coller la slection dans votre page Dreamweaver sous la forme dune
image Web. Vous pouvez copier un calque ou un groupe de calques pour une partie slectionne de limage, ou encore copier une tranche de
limage. Toutefois, lorsque vous effectuez cette opration, Dreamweaver ne cre pas dobjet dynamique.
Remarque : bien que la fonctionnalit Mettre jour depuis loriginal ne soit pas disponible pour les images colles, vous pouvez ouvrir le fichier
Photoshop dorigine et le modifier en slectionnant limage colle, puis en cliquant sur le bouton Modifier de linspecteur Proprits.
1. Dans Photoshop, effectuez lune des oprations suivantes :
Copiez la totalit ou une partie dun calque. Pour ce faire, utilisez loutil Rectangle de slection pour slectionner la partie
copier, puis choisissez Edition > Copier. Cette opration ne copie que le calque actif correspondant la zone
slectionne dans le presse-papiers. Si vous avez dfini des effets bass sur des calques, ils ne sont pas copis.
Copiez et fusionnez plusieurs calques. Pour ce faire, utilisez loutil Rectangle de slection pour slectionner la partie
copier, puis choisissez Edition > Copier avec fusion. Cette opration aplatit et copie tous les calques actifs et infrieurs de
la zone slectionne dans le presse-papiers. Si des effets bass sur des calques sont associs lun de ces calques, ils
sont copis.
Copiez une tranche. Pour ce faire, slectionnez la tranche laide de loutil Slection de tranche, puis choisissez Edition >
Copier. Cette opration aplatit et copie tous les calques actifs et infrieurs de la tranche dans le presse-papiers.
Vous pouvez choisir Slection > Tout afin de slectionner rapidement une image entire en vue de la copier.
2. Dans Dreamweaver (mode Cration ou Code), placez le point dinsertion sur la page, lendroit o vous voulez insrer
limage.
4. Dans la bote de dialogue Optimisation de limage, ajustez les paramtres doptimisation requis puis cliquez sur OK.
5. Enregistrez le fichier dimage Web un emplacement du dossier racine de votre site Web.
Dreamweaver dfinit limage conformment aux paramtres doptimisation et en place une version Web sur votre page. Les informations relatives
limage, comme lemplacement du fichier PSD dorigine, sont enregistres dans une Design Note, que vous ayez ou non activ les Design Notes
pour votre site. La Design Note vous permet de revenir au fichier Photoshop dorigine, afin dy apporter des modifications, partir de
Dreamweaver.
Haut de la page
Modification dimages colles

Aprs avoir copi des images de Photoshop dans vos pages Dreamweaver, vous pouvez modifier le fichier PSD dorigine dans Photoshop.
Lorsque vous utilisez le flux dactivits copier/coller, Adobe recommande de toujours apporter vos modifications au fichier PSD dorigine (et non
limage Web), puis effectuer un nouveau copier/coller, de faon conserver une source unique.
Remarque : assurez-vous que Photoshop est bien dfini comme lditeur principal pour le type de fichier modifier.
586
1. Dans Dreamweaver, slectionnez une image Web cre lorigine dans Photoshop, puis effectuez lune des actions
suivantes :
Cliquez sur le bouton Modifier dans linspecteur Proprits de limage.
Appuyez sur la touche Ctrl (Windows) ou Cmd (Macintosh) lorsque vous double-cliquez sur le fichier.
Cliquez sur limage avec le bouton droit de la souris (Windows) ou maintenez la touche Ctrl enfonce et cliquez sur
limage (Macintosh), choisissez Modifier loriginal avec dans le menu contextuel, puis choisissez Photoshop.
Remarque : ce principe suppose que Photoshop soit dfini comme diteur dimage externe principal pour les fichiers dimage
PSD. Il peut galement tre utile de dfinir Photoshop comme diteur par dfaut pour les fichiers de type JPEG, GIF et PNG.
2. Modifiez le fichier dans Photoshop.
3. Revenez Dreamweaver et collez limage ou la slection mise jour dans votre page.
A tout moment, si vous voulez optimiser nouveau limage, vous pouvez la slectionner puis cliquer sur le bouton Modifier les paramtres de
limage.
Haut de la page
Dfinition des options de la bote de dialogue Optimisation de limage

Lorsque vous crez un objet dynamique ou que vous collez une slection depuis Photoshop, Dreamweaver affiche la bote de dialogue
Optimisation de limage. Cette bote de dialogue saffiche galement pour tout autre type dimage si vous la slectionnez puis que vous cliquez sur
le bouton Modifier les paramtres de limage de linspecteur Proprits. Cette bote de dialogue permet de dfinir les paramtres dimages Web et
den afficher un aperu, de faon dterminer la combinaison optimale de couleurs, de compression et de qualit.
Une image Web est une image qui peut tre affiche par tous les navigateurs Web modernes et qui possde la mme apparence, quel que soit le
systme ou le navigateur utilis. En rgle gnrale, ces paramtres permettent de parvenir un compromis entre qualit et taille de fichier.
Remarque : les paramtres que vous slectionnez ninfluent que sur la version importe du fichier dimage. Le fichier PSD (Photoshop) ou PNG
(Fireworks) dorigine reste toujours inchang.
Paramtre prdfini Choisissez le paramtre prdfini qui rpond le mieux vos besoins. La taille de fichier de limage change en fonction du
paramtre prdfini choisi. Un aperu instantan de limage avec le paramtre appliqu saffiche en arrire-plan.
Par exemple, pour les images qui doivent tre affiches avec un haut degr de clart, choisissez PNG24 pour photos (dtails nets). Slectionnez
GIF pour images darrire-plan (motifs) si vous insrez un motif qui fait office darrire-plan de la page.
Lorsque vous slectionnez un paramtre prdfini, ses options configurables sont affiches. Si vous souhaitez personnaliser davantage les
paramtres doptimisation, modifiez les valeurs de ces options.
587
Modles
588
A propos des modles Dreamweaver

Description des modles Dreamweaver
Types de rgions de modle
Liens des modles
Scripts de serveur dans un modle et documents bass sur un modle
Paramtres de modle
Expressions de modle
Langage d'expression de modle
La condition Multiple If dans le code du modle
Haut de la page
Description des modles Dreamweaver
Un modle est un type spcial de document qui sert concevoir une mise en page fixe . Il est alors possible de crer des documents bass sur
le modle, qui en hritent la mise en page. Lors de la conception d'un modle, vous spcifiez comme tant modifiable le contenu que les
utilisateurs sont habilits modifier dans un document bas sur ce modle. Les crateurs de modles peuvent contrler les lments de la page
que les utilisateurs des modles (rdacteurs, infographistes ou autres dveloppeurs) pourront modifier. Le crateur peut inclure plusieurs types de
rgions de modle dans un document.
Remarque : Les modles permettent de dfinir la conception d'une grande zone et de rutiliser des mises en page compltes. Si vous souhaitez
rutiliser des lments de conception individuels, tels que les informations sur le copyright d'un site ou un logo, crez des lments de
bibliothque.
L'utilisation de modles vous permet de mettre jour plusieurs pages la fois. Tout document cr partir d'un modle reste associ ce modle
(sauf si vous dcidez de dtacher le document ultrieurement). Lorsque vous modifiez un modle, la conception de tous les documents crs
partir de ce modle est immdiatement mise jour.
Remarque : Les modles de Dreamweaver sont diffrents des modles de certains autres logiciels Adobe Creative Suite en ce sens que les
sections de page des modles sont fixes (ou non modifiables) par dfaut.Dreamweaver
Haut de la page
Types de rgions de modle
Lorsque vous enregistrez un document en tant que modle, la plupart des rgions d'un document sont verrouilles. En tant que crateur de
modles, vous devez insrer des rgions ou paramtres modifiables dans un modle pour dfinir les rgions qui pourront tre modifies dans les
documents bass sur ce modle.
Lors de la cration du modle, vous pouvez apporter des modifications aux rgions modifiables et aux rgions verrouilles. En revanche, dans le
cas d'un document cr partir d'un modle, seules les rgions modifiables peuvent subir des modifications ; les rgions verrouilles ne peuvent
pas tre modifies.
Il existe quatre types de rgions de modle :
Une rgion modifiable Une rgion non verrouille dans un document bas sur un modle. Ce type de section peut tre modifi par l'utilisateur.
Le crateur du modle peut dfinir toute rgion du modle comme modifiable. Pour tre fonctionnel, un modle doit contenir au moins une rgion
modifiable. S'il n'en contient pas, les pages cres partir du modle ne pourront pas tre modifies.
Une rgion rpte Une section de la mise en forme du document qui est dfinie de faon ce que l'utilisateur du modle puisse ajouter ou
supprimer des copies de la rgion rpte dans un document bas sur le modle en fonction de ses besoins. Par exemple, vous pouvez dfinir
une ligne de tableau reproduire. En gnral, les sections rptes sont modifiables afin que l'utilisateur du modle puisse modifier le contenu de
l'lment rpt, tandis que le crateur du modle contrle la conception elle-mme.
Deux types de rgions rptes peuvent tre insres dans un modle : rgion rpte et tableau rpt.
Une rgion facultative Une section d'un modle qui renferme un contenu, tel que du texte ou une image, pouvant apparatre ou non dans un
document. Sur la page base sur le modle, l'utilisateur du modle dcide gnralement si le contenu doit tre affich ou non.
Un attribut de balise modifiable Permet de dverrouiller un attribut de balise dans un modle afin que les utilisateurs puissent le modifier dans
les pages cres partir de ce modle. Par exemple, vous pouvez verrouiller les images contenues dans le document tout en permettant
l'utilisateur du modle d'en dfinir l'alignement gauche, droite ou au centre.
Haut de la page
Liens des modles
Lorsque vous crez un fichier de modle en enregistrant une page existante en tant que modle, le nouveau modle situ dans le dossier
589
Templates, ainsi que tous les liens du fichier, sont mis jour de faon ce que leur chemin d'accs relatif au document soit correct. Par la suite,
lorsque vous crez un nouveau document partir de ce modle et que vous enregistrez ce nouveau document, tous les liens relatifs au document
sont de nouveau mis jour pour qu'ils continuent de pointer vers les fichiers adquats.
En revanche, si vous insrez un nouveau lien relatif un document dans un fichier de modle, il est facile de faire une faute de frappe lorsque
vous tapez le chemin dans la zone de texte du lien de l'inspecteur Proprits. Le chemin correct dans un fichier de modle est le chemin d'accs
au document li partir du dossier Templates, et non pas partir du dossier du document bas sur le modle. Assurez-vous que les chemins
d'accs utiliss pour les liens sont corrects en utilisant l'icne de dossier ou l'icne Pointer vers un fichier dans l'inspecteur Proprits lorsque vous
crez des liens dans des modles.
Prfrence de mise jour des liens dans Dreamweaver 8.01
Avant Dreamweaver 8 (c'est--dire, dans Dreamweaver version MX 2004 ou antrieure), Dreamweaver ne mettait pas jour les liens vers des
fichiers situs dans le dossier Templates. Par exemple, si vous aviez un fichier intitul main.css dans le dossier Templates, et si vous aviez crit
href="main.css" en tant que lien dans le fichier du modle, Dreamweaver ne mettait pas ce lien jour lors de la cration d'une page base sur ce
modle.
Certains utilisateurs ont tir parti de la faon dont Dreamweaver traitait les liens vers les fichiers du dossier Templates et ont utilis cette
incohrence pour crer des liens qu'ils n'avaient pas l'intention de mettre jour lors de la cration de pages partir d'un modle. Par exemple,
supposons que vous utilisez Dreamweaver MX 2004, et que vous possdez un site comprenant diffrents dossiers pour diffrentes applications :
Dreamweaver, Flash et Photoshop. Chaque dossier de produit contient une page index.html base sur un modle, et une version unique du
fichier main.css au mme niveau. Si le fichier du modle contient le lien relatif au document href="main.css" (un lien vers une version du fichier
main.css situe dans le dossier Templates), et que vous souhaitez que vos pages index.html bases sur le modle contiennent galement ce lien
tel qu'il a t rdig, vous pouvez crer des pages index.html bases sur le modle sans avoir vous proccuper que Dreamweaver mette jour
ces liens particuliers. Lorsque Dreamweaver MX 2004 cre des pages index.html bases sur le modle, les liens href="main.css" (non mis jour)
font rfrence aux fichiers main.css qui rsident dans les dossiers Dreamweaver, Flash et Photoshop, et non au fichier main.css qui rside dans
le dossier Templates.
Toutefois, dans Dreamweaver 8, ce comportement a t modifi de faon ce que tous les liens relatifs un document soient mis jour lors de la
cration de pages bases sur un modle, quel que soit l'emplacement apparent des fichiers lis. Dans ce scnario, Dreamweaver examine le lien
dans le fichier du modle (href="main.css") et cre dans la page base sur le modle un lien qui est relatif l'emplacement du nouveau document.
Par exemple, si vous crez un document bas sur un modle un niveau au-dessus du dossier Templates, Dreamweaver rdigerait le lien dans le
nouveau document de cette faon : href="Templates/main.css". Cette mise jour Dreamweaver 8 a rompu des liens dans les pages cres par
les concepteurs qui avaient tir parti de l'ancienne pratique de Dreamweaver qui consistait ne pas mettre jour les liens vers des fichiers du
dossier Templates.
Dreamweaver 8.01 a ajout une prfrence qui vous permet d'activer ou de dsactiver le comportement de mise jour des liens relatifs. (Cette
prfrence spciale s'applique uniquement aux liens vers des fichiers du dossier Templates, mais pas aux liens en gnral.) Le comportement par
dfaut est de ne pas mettre jour ces liens (comme c'tait le cas dans Dreamweaver version MX 2004 et antrieure), mais si vous souhaitez que
Dreamweaver mette jour ces types de liens lors de la cration de pages bases sur un modle, vous pouvez dslectionner la prfrence. Vous
ne feriez cela que si, par exemple, vous aviez une page CSS (Cascading Style Sheets, feuilles de style de cascade), main.css, dans votre dossier
Templates, et que vous souhaitiez qu'un document bas sur un modle contienne le lien href="Templates/main.css". Cette pratique n'est toutefois
pas recommande, car seuls les fichiers modles de Dreamweaver (DWT) doivent rsider dans le dossier Templates.
Pour que Dreamweaver mette jour les chemins relatifs au document vers les fichiers non lis au modle dans le dossier Modles, slectionnez
la catgorie Modles de la bote de dialogue Configuration du site (dans la section Paramtres avancs), puis dsactivez l'option Ne pas modifier
les chemins relatifs aux documents.
Pour plus d'informations, consultez la TechNote Dreamweaver sur le site Web d'Adobe l'adresse www.adobe.com/go/f55d8739_fr.
Scripts de serveur dans un modle et documents bass sur un modle
Haut de la page
Certains scripts de serveur sont insrs au tout dbut ou la toute fin du document (avant la balise <html> ou aprs la balise </html>). Ces scripts
requirent un traitement spcial dans les modles et les documents crs partir de modles. En rgle gnrale, lorsque vous apportez des
modifications au code de script situ avant la balise <html> ou aprs la balise </html> dans un modle, les modifications ne sont pas rpercutes
dans les documents crs partir du modle, ce qui peut entraner des erreurs de serveur lorsqu'un script de serveur situ dans le corps principal
du modle dpend d'un script non mis jour. Une alerte vous avertit lorsque vous tentez de modifier des scripts situs avant la balise <html> ou
aprs la balise </html> dans un modle.
Pour viter ce problme, vous pouvez insrer le code suivant dans la section head du modle :
1

Lorsque vous insrez ce code dans un modle, toutes les modifications apportes aux scripts situs avant la balise <html> ou aprs la balise
</html> sont rpercutes dans les documents crs partir du modle. Toutefois, vous ne pourrez plus modifier ces scripts dans les documents
crs partir du modle. Vous pouvez donc soit modifier les scripts dans le modle, soit dans les documents crs partir du modle, mais pas
dans les deux la fois.
590
Haut de la page
Paramtres de modle
Les paramtres de modle indiquent les valeurs qui permettent de personnaliser le contenu des documents bass sur le modle. Ils permettent de
dfinir des rgions facultatives, des attributs de balise modifiables ou des valeurs transmettre aux documents joints. Pour chaque paramtre,
vous devez dfinir un nom, un type de donne et une valeur par dfaut. Vous devez attribuer un nom unique chaque paramtre. En outre, les
paramtres sont sensibles la casse. Ils doivent possder l'un des cinq types de donnes admis : texte, boolen, couleur, URL ou nombre.
Les paramtres de modle sont transmis au document sous forme de paramtres d'instance. En gnral, l'utilisateur d'un modle est autoris
modifier les valeurs par dfaut du paramtre pour personnaliser le contenu du document bas sur le modle. Dans d'autres cas, le crateur du
modle peut dterminer ce qui apparat dans le document, selon la valeur d'une expression de modle.
Haut de la page
Expressions de modle
Les expressions de modle sont des instructions qui calculent ou valuent une valeur.
Vous pouvez utiliser une expression pour enregistrer une valeur et l'afficher dans un document. Vous pouvez notamment rdiger une expression
simple se limitant la valeur d'un paramtre, par exemple @@(Param)@@, ou bien une expression plus complexe permettant de calculer les
valeurs qui feront alterner la couleur d'arrire-plan de la ligne d'un tableau, par exemple @@((_index & 1) ? red : blue)@@.
Vous pouvez aussi rdiger des expressions de modle pour dfinir des conditions If et MultipleIf. Lorsqu'une instruction conditionnelle contient une
expression, Dreamweaver value si celle-ci est true ou false. Si la condition est true, la rgion facultative s'affiche dans le document bas sur le
modle ; si elle est false, elle n'apparat pas.
Vous pouvez dfinir des expressions en mode Code ou dans la bote de dialogue de la rgion facultative que vous insrez.
En mode Code, il existe deux faons de dfinir des expressions de modle : utilise le commentaire 
commentaire ou @@(votre expression)@@. Lorsque vous insrez l'expression dans le code du modle, un marqueur d'expression apparat en
mode Cration. Lorsque vous appliquez le modle, Dreamweaver value l'expression et affiche la valeur dans le document bas sur le modle.
Haut de la page
Langage d'expression de modle
Le langage d'expression de modle utilise la syntaxe et les rgles de priorit de JavaScript, dont il constitue un sous-ensemble. Utilisez des
oprateurs JavaScript pour rdiger des expressions, comme dans l'exemple suivant :
1
<samp class="codeph">@@(firstName+lastName)@@</samp>
Les fonctions et oprateurs suivants sont pris en charge :

constantes numriques, constantes de chane (syntaxe avec guillemets doubles uniquement), constantes boolennes (true ou
false)
rfrence de variable (voir la liste des variables dfinies plus bas dans cette section)
rfrence un champ (oprateur point )
oprateurs unaires : +, -, ~, !
oprateurs binaires : +, -, *, /, %, &, |, ^, &&, ||, <, <=, >, >=, ==, !=, <<, >>
oprateurs conditionnels : ?:
parenthses : ()
Les types de donnes suivants sont pris en charge : boolen, virgule flottante 64 bits IEEE, chane et objet. Les modles
Dreamweaver ne prennent pas en charge l'utilisation des types JavaScript null et undefined . Ils ne permettent pas non
plus de convertir implicitement les types scalaires en objet. Par consquent, l'expression "abc".length provoquera une erreur au
lieu de fournir la valeur 3.
Les seuls objets disponibles sont ceux qui sont dfinis par le modle d'objet d'expression. Les variables suivantes sont
dfinies :
_document Contient les donnes de modle de niveau document avec un champ pour chaque paramtre du modle.
_repeat Dfinie uniquement pour les expressions situes l'intrieur d'une rgion rpte. Fournit des informations
prdfinies sur la rgion
_index L'index numrique ( partir de 0) de l'entre en cours.
_numRows Nombre total d'entres dans la rgion rpte.
_isFirst Vrai (true) si l'entre en cours est la premire entre de la rgion rpte.
_isLast Vrai (true) si l'entre en cours est la premire entre de la rgion rpte.
591
_prevRecord L'objet _repeat de l'entre prcdente. L'accs cette proprit provoque une erreur si l'entre est la premire
de la rgion.
_nextRecord L'objet _repeat de l'entre suivante. L'accs cette proprit provoque une erreur si l'entre est la dernire de
la rgion.
_parent Dans une rgion rpte imbrique, donne l'objet _repeat correspondant la rgion rpte extrieure. L'accs
cette proprit en dehors d'une rgion rpte imbrique provoque une erreur.
Lors de l'valuation de l'expression, tous les champs de l'objet _document et _repeat sont implicitement disponibles. Par
exemple, vous pouvez saisir title au lieu de _document.title pour accder au paramtre de titre du document.
En cas de conflit de champ, les champs de l'objet _repeat ont la priorit sur les champs de l'objet _document. Vous n'avez
donc pas rfrencer explicitement _document ou _repeat. Toutefois, il se peut que _document soit ncessaire l'intrieur
d'une rgion rpte pour rfrencer les paramtres de document masqus par les paramtres de rgion rpte.
Dans le cas de rgions rptes imbriques, seuls les champs de la rgion rpte intrieure sont disponibles implicitement.
Les rgions extrieures doivent tre rfrences explicitement l'aide de _parent.
Haut de la page
La condition Multiple If dans le code du modle
Vous pouvez rdiger des expressions de modle pour dfinir des conditions If et MultipleIf. Dans l'exemple suivant, un paramtre appel Dept
est cr, une valeur initiale est dfinie et une condition MultipleIf est utilise pour dterminer le logo qui doit s'afficher.
Voici un exemple de code pouvant tre insr dans la section head du modle :
1

L'instruction conditionnelle suivante vrifie la valeur attribue au paramtre Dept. Si la condition renvoie true ou la valeur correspondante,
l'image adquate s'affiche.
1
2
3
4
5
6
7
<!-<!-<!-<!-<!-<!-
checks value of Dept and shows appropriate
TemplateBeginIfClause cond="Dept == 1" -->
TemplateBeginIfClause cond="Dept != 3" -->
TemplateEndMultipleIf -->
image-->
<img src=".../sales.gif"> 
<img src=".../support.gif"> 
<img src=".../hr.gif"> 
<img src=".../spacer.gif"> 
Lorsque vous crez un document bas sur un modle, les paramtres du modle lui sont automatiquement transmis. L'utilisateur du modle
dtermine l'image afficher.
Voir aussi
592
Reconnaissance des modles et des documents bass sur un modle

Reconnaissance des modles en mode Cration
Reconnaissance des modles en mode Code
Reconnaissance d'un document bas sur un modle en mode Cration
Reconnaissance d'un document bas sur un modle en mode Code
Haut de la page
Reconnaissance des modles en mode Cration
En mode Cration, les rgions modifiables s'affichent dans la fentre de document entoures d'un cadre rectangulaire d'une couleur de
surbrillance prdfinie. Un petit onglet indiquant le nom de la rgion s'affiche dans le coin suprieur gauche de chaque rgion.
La barre de titre de la fentre de document permet d'identifier les fichiers de modle. La barre de titre d'un fichier de modle contient le mot
<<Modle>> et l'extension du nom du fichier est .dwt.
Haut de la page
Reconnaissance des modles en mode Code

En mode Code, les rgions de contenu modifiables sont repres dans le code HTML par les commentaires suivants :

Vous pouvez utiliser les prfrences de couleur de code pour dfinir votre propre modle de coloration afin de pouvoir distinguer facilement les
rgions du modle lorsque vous affichez un document en mode Code.
Tous les lments compris entre ces commentaires sont modifiables dans les documents crs partir du modle. Le code source HTML d'une
rgion modifiable peut se prsenter comme suit :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table width="75%" border="1" cellspacing="0" cellpadding="0">

<tr bgcolor="#333366">
<td>Name</td>
<td><font color="#FFFFFF">Address</font></td>
<td><font color="#FFFFFF">Telephone Number</font></td>
</tr>

<tr>
<td>Enter name</td>
<td>Enter Address</td>
<td>Enter Telephone</td>
</tr>

</table>
593
Remarque : Lorsque vous modifiez le code du modle en mode Code, prenez garde ne pas modifier de balise de commentaire lie au modle et
utilise par Dreamweaver.
Reconnaissance d'un document bas sur un modle en mode Cration
Haut de la page
Dans un document bas sur un modle, les rgions modifiables s'affichent, dans le mode Cration de la fentre de document, entoures d'un
cadre rectangulaire d'une couleur de surbrillance prdfinie. Un petit onglet indiquant le nom de la rgion s'affiche dans le coin suprieur gauche
de chaque rgion.
Outre les rgions modifiables, la page entire est entoure d'un cadre d'une couleur diffrente et un onglet dans le coin suprieur droit indique le
nom du modle sur lequel le document est bas. Ce cadre a pour fonction de vous rappeler que le document a t cr partir d'un modle et
que vous ne pouvez rien changer en dehors des rgions modifiables.
Reconnaissance d'un document bas sur un modle en mode Code
Haut de la page
En mode Code, les rgions modifiables d'un document driv d'un modle s'affichent dans une couleur diffrente du code dans les rgions non
modifiables. Vous pouvez modifier uniquement le code dans lesrgions ou les paramtres modifiables, mais vous ne pouvez pas effectuer de
saisie dans les rgions verrouilles.
Le contenu modifiable est repr dans le code HTML par les commentaires Dreamweaver suivants :

Tous les lments compris entre ces commentaires sont modifiables dans un document bas sur un modle. Le code source HTML d'une rgion
modifiable peut se prsenter comme suit :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body bgcolor="#FFFFFF" leftmargin="0">

<tr bgcolor="#333366">
<td>Name</td>
<td><font color="#FFFFFF">Address</font></td>
<td><font color="#FFFFFF">Telephone Number</font></td>
</tr>

<tr>
<td>Enter name</td>
<td>Enter Address</td>
<td>Enter Telephone</td>
</tr>

</table>
</body>
La couleur par dfaut du texte non modifiable est le gris. Vous pouvez associer des couleurs diffrentes aux rgions modifiables et aux rgions
non modifiables l'aide de la bote de dialogue Prfrences.
Voir aussi
594
595
Cration d'un modle Dreamweaver

A propos de la cration de modles Dreamweaver
Cration d'un modle partir d'un document existant
Cration d'un modle l'aide du panneau Actifs
A propos de la cration de modles pour les sites Contribute
Cration d'un modle pour un site Contribute
Haut de la page
A propos de la cration de modles Dreamweaver
Vous pouvez crer un modle partir d'un document existant (tel qu'un document HTML, Adobe ColdFusion ou Microsoft ASP) ou bien partir
d'un nouveau document.
Remarque : La prise en charge de ColdFusion et d'ASP a t supprime de Dreamweaver CC et des versions ultrieures.
Aprs avoir cr un modle, vous pouvez insrer des rgions de modle et dfinir des prfrences de modle pour la couleur du code et la
couleur de surbrillance des rgions de modle.
Si vous souhaitez enregistrer des informations supplmentaires sur un modle (par exemple, le nom de la personne qui l'a cr, la date de sa
dernire modification ou les raisons justifiant certaines dcisions relatives la mise en forme), vous pouvez crer un fichier Design Notes pour
le modle. Les documents bass sur un modle n'hritent pas des Design Notes associes ce dernier.
Remarque : Les modles d'Adobe Dreamweaver sont diffrents des modles de certains autres produits Adobe Creative Suite en ce sens que les
sections de page des modles Dreamweaver sont fixes (ou non modifiables) par dfaut.
Vous trouverez un didacticiel consacr la cration de modles l'adresse www.adobe.com/go/vid0157_fr.
Vous trouverez un didacticiel consacr l'utilisation de modles l'adresse www.adobe.com/go/vid0158_fr.
Haut de la page
Cration d'un modle partir d'un document existant

Vous pouvez crer un modle partir d'un document existant.
1. Ouvrez le document que vous souhaitez enregistrer comme modle.
Choisissez Fichier > Enregistrer comme modle.
Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Modles, puis choisissez Crer un modle dans le
menu.
Remarque : Si vous n'avez pas slectionn Ne plus afficher ce message, un message s'affiche vous indiquant que le
document que vous enregistrez ne comporte aucune rgion modifiable. Cliquez sur OK pour enregistrer le document
comme modle, ou bien sur Annuler pour fermer la bote de dialogue sans crer de modle.
3. Slectionnez le site dans lequel vous souhaitez enregistrer le modle dans le menu droulant Site, puis tapez un nom unique
pour le modle dans la zone Enregistrer sous.
4. Cliquez sur Enregistrer. Dreamweaver enregistre le fichier de modle dans le dossier Templates du site, dans le dossier
racine local du site, avec l'extension .dwt. Si ce dossier n'existe pas, Dreamweaver le cre automatiquement au moment de
l'enregistrement du nouveau modle.
Remarque : Ne retirez pas vos modles du dossier Templates et placez dans celui-ci uniquement des fichiers de modles. Ne
retirez pas non plus le dossier Templates de votre dossier racine local, car cela pourrait provoquer des erreurs dans les
chemins d'accs des modles.
Haut de la page
Cration d'un modle l'aide du panneau Actifs

1. Dans le panneau Actifs (Fentre > Actifs), slectionnez la catgorie Modles sur le ct gauche du panneau
2. Cliquez sur le bouton Nouveau modle
en bas du panneau Actifs.
Un nouveau modle, sans nom, est ajout la liste de modles du panneau Actifs.
3. Le modle tant toujours slectionn, donnez-lui un nom, puis appuyez sur Entre (Windows) ou Retour (Macintosh).
Dreamweaver cre un modle vierge dans le panneau Actifs et dans le dossier Modles.
596
A propos de la cration de modles pour les sites Contribute
Haut de la page
A l'aide de Dreamweaver, vous pouvez crer des modles afin d'aider les utilisateurs d'Adobe Contribute crer de nouvelles pages, dfinir
l'aspect gnral du site et mettre jour la mise en forme de plusieurs pages la fois.
Lorsque vous crez un modle et que vous le chargez sur le serveur, il devient disponibles pour tous les utilisateurs se connectant votre site,
sauf si vous avez limit l'utilisation du modle certains rles de Contribute. Si vous avez dfini des restrictions sur l'utilisation des modles, il
peut s'avrer ncessaire d'ajouter chaque nouveau modle la liste des modles accessibles par un utilisateur de Contribute (voir Administration
de Contribute).
Remarque : Assurez-vous que le dossier racine de chaque site utilisateur de Contribute dfini est le mme que le dossier racine de votre dfinition
de site dans Dreamweaver. Si un dossier racine de site utilisateur ne correspond pas au vtre, cet utilisateur ne pourra pas utiliser les modles.
En complment des modles Dreamweaver, vous pouvez crer des modles non Dreamweaver l'aide des outils d'administration de Contribute.
Un modle non-Dreamweaver est une page existante dont les utilisateurs de peuvent se servir pour crer de nouvelles pages. Cette page est
similaire un modle Dreamweaver, l'exception que les pages bases sur ce modle ne se mettent pas jour lorsque vous apportez des
modifications ce dernier. Les modles non-Dreamweaver ne peuvent pas contenir d'lments de modles Dreamweaver, tels que des rgions
modifiables ou verrouilles, des rptitions de rgions ou autres rgions facultatives.
Lorsqu'un utilisateur de Contribute cre un nouveau document au sein d'un site contenant des modles Dreamweaver, Contribute tablit la liste
des modles disponibles (Dreamweaver et non-Dreamweaver) dans la bote de dialogue Nouvelle page.
Pour inclure des pages qui utilisent des codages autres que Latin-1 dans votre site, vous devrez peut-tre crer des modles (des modles
Dreamweaver ou non-Dreamweaver). Les utilisateurs de Contribute peuvent modifier des pages qui utilisent n'importe quel codage, mais lorsqu'un
utilisateur Contribute crer une page vierge, il utilise le codage Latin-1. Pour crer une page utilisant un codage diffrent, l'utilisateur de Contribute
peut crer une copie d'une page existante base sur un codage diffrent ou utiliser un modle bas sur un codage diffrent. Cela dit, si le site
utilisant d'autres codages ne contient pas de pages ni de modles, crez d'abord, dans Dreamweaver, une page ou un modle utilisant cet autre
codage.
Haut de la page
Cration d'un modle pour un site Contribute

2. Slectionnez un site et cliquez sur Modifier.
3. Dans la bote de dialogue Configuration du site, slectionnez la catgorie Contribute.
4. Si vous ne l'avez pas dj fait, vous devez activer la compatibilit avec Contribute.
Activez l'option Activer la compatibilit avec Contribute, puis tapez l'URL de la racine du site.
5. Cliquez sur le bouton Administrer le site dans Contribute.
6. Si ncessaire, tapez le mot de passe administrateur, puis cliquez sur OK.
7. Dans la catgorie Utilisateurs et rles, slectionnez un rle, puis cliquez sur le bouton Modifier les paramtres de rle.
8. Slectionnez la catgorie Nouvelles pages, puis ajoutez les pages existantes la liste situe en dessous de l'option Crer
597
une page en copiant une page de la liste ci-dessous.

Pour plus d'informations, voir Administration de Contribute.
9. Cliquez deux reprises sur OK pour fermer les botes de dialogue.
Voir aussi
Didacticiel consacr la cration de modles
Didacticiel consacr l'utilisation de modles
Cration d'un modle vierge
598
Cration de rgions modifiables dans des modles

Insertion d'une rgion modifiable
Slection de rgions modifiables
Suppression d'une rgion modifiable
Modification du nom d'une rgion modifiable
Haut de la page
Insertion d'une rgion modifiable
Il est possible de crer des rgions modifiables dans un modle pour dfinir les zones qui pourront tre modifies dans les pages bases sur ce
modle. Avant d'insrer une rgion modifiable, enregistrez le document actif comme modle.
Remarque : Si vous insrez une rgion modifiable non pas dans un fichier de modle mais dans un document, une alerte vous informe que le
document sera automatiquement enregistr comme modle.
Vous pouvez placer une rgion modifiable n'importe o sur votre page. Toutefois, tenez compte des informations suivantes si vous rendez
possible la modification d'un tableau ou d'un lment positionnement absolu :
Vous pouvez marquer un tableau entier ou une cellule de tableau individuelle comme modifiable, mais vous ne pouvez pas
marquer plusieurs cellules d'un tableau comme une seule et mme rgion modifiable. Si une balise <td> est slectionne, la
rgion modifiable comprend la rgion situe autour de la cellule. Dans le cas contraire, la rgion modifiable concerne
uniquement le contenu de la cellule.
Les lments PA et leur contenu sont deux lments distincts. Rendre un lment PA modifiable permet de changer la position
de l'lment PA et son contenu, alors que rendre le contenu d'un lment PA modifiable permet uniquement de modifier le
contenu de l'lment PA, et non sa position.
1. Dans la fentre de document, procdez de l'une des manires suivantes pour slectionner la rgion.
Slectionnez le texte ou le contenu que vous souhaitez dfinir comme rgion modifiable.
Placez le point d'insertion l'endroit o vous voulez insrer une rgion modifiable.
2. Procdez de l'une des manires suivantes pour insrer une rgion modifiable :
Choisissez Insertion > Objets de modle > Rgion modifiable.
Cliquez du bouton droit (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), puis choisissez Modles >
Nouvelle rgion modifiable.
Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Modles, puis choisissez Rgion modifiable dans
le menu.
3. Dans la zone Nom, tapez un nom unique pour la rgion. (vous ne pouvez pas utiliser le mme nom pour plusieurs rgions
modifiables dans un modle donn).
Remarque : Ne tapez pas de caractres spciaux dans la zone Nom.
4. Cliquez sur OK. La rgion modifiable est entoure d'un cadre rectangulaire dans le modle, de la couleur de surbrillance
dfinie dans les prfrences. Dans le coin suprieur gauche de la rgion, un onglet indique le nom de la rgion. Si vous
insrez une rgion modifiable vide dans le document, son nom s'affiche galement dans le cadre qui la dlimite.
Haut de la page
Slection de rgions modifiables
Vous pouvez facilement identifier et slectionner les diffrentes rgions prsentes dans un modle et dans un document bas sur un modle.
Slection d'une rgion modifiable dans la fentre de document

Cliquez sur l'onglet situ dans le coin suprieur gauche de la rgion modifiable.
Recherche d'une rgion modifiable et la slectionner dans le document

Choisissez Modifier > Modles, puis le nom de la rgion dans la liste figurant en bas de ce sous-menu.
Remarque : Les rgions modifiables situes l'intrieur d'une rgion rpte ne sont pas rpertories dans le menu. Pour localiser ces rgions,
vous devez rechercher les cadres onglet qui figurent dans la fentre de document.
La rgion modifiable est slectionne dans le document.
599
Haut de la page
Suppression d'une rgion modifiable
Si vous avez marqu une rgion de votre fichier de modle comme tant modifiable, vous pouvez la verrouiller (pour la rendre non modifiable
dans les documents bass sur le modle) l'aide de la commande Supprimer le marqueur de modle.
1. Cliquez sur l'onglet situ dans le coin suprieur gauche de la rgion modifiable pour la slectionner.
Choisissez Modifier > Modles > Supprimer le marqueur de modle.
Modles > Supprimer le marqueur de modle.
La rgion n'est alors plus modifiable.
Haut de la page
Modification du nom d'une rgion modifiable

Aprs avoir insr une rgion modifiable, vous pouvez en modifier le nom.
1. Cliquez sur l'onglet situ dans le coin suprieur gauche de la rgion modifiable pour la slectionner.
2. Dans l'inspecteur Proprits (Fentre > Proprits), tapez un nouveau nom.
Voir aussi
600
Cration de rgions rptes dans des modles

A propos des rgions rptes d'un modle
Cration d'une rgion rpte dans un modle
Insertion d'un tableau rpt
Dfinition d'une couleur d'arrire-plan alterne dans un tableau rpt
Haut de la page
A propos des rgions rptes d'un modle
Une rgion rpte est une section d'un modle qui peut tre reproduite de nombreuses fois dans les pages bases sur ce modle. On utilise
gnralement les rgions rptes dans le cas de tableaux. Toutefois, il est possible de dfinir des rgions rptes pour d'autres lments de
page.
Les rgions rptes permettent de dfinir la mise en page au moyen de la rptition de certains lments (article de catalogue et description, par
exemple) ou de lignes, par exemple dans le cas d'une liste d'lments.
Il existe deux objets de modle de rgion rpte : rgion rpte et tableau rpt.
Haut de la page
Cration d'une rgion rpte dans un modle
La rptition de rgions permet de copier une rgion spcifique autant de fois que ncessaire dans un modle. Une rgion rpte n'est pas
ncessairement modifiable.
Pour rendre modifiable le contenu d'une rgion rpte (par exemple, pour autoriser un utilisateur taper du texte dans une cellule de tableau
dans un document bas sur un modle), vous devez insrer une rgion modifiable dans la rgion rpte.
1. Dans la fentre Document, procdez de l'une des manires suivantes :
Slectionnez le texte ou le contenu que vous souhaitez dfinir comme rgion rpte.
Placez le point d'insertion dans le document l'endroit o vous souhaitez insrer la rgion rpte.
Choisissez Insertion > Objets de modle > Rgion rpte.
Modles > Nouvelle rgion rpte.
Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Modles, puis choisissez Rgion rpte dans le
menu.
3. Dans la zone Nom, tapez un nom unique pour la rgion de modle. (Vous ne pouvez pas utiliser le mme nom pour plusieurs
rgions rptes dans un modle donn.)
Remarque : N'insrez pas de caractres spciaux dans un nom de rgion.
4. Cliquez sur OK.
Haut de la page
Insertion d'un tableau rpt
Vous pouvez crer une rgion modifiable (sous forme de tableau) lignes rptes l'aide d'un tableau rpt. Vous pouvez dfinir des attributs
de tableau et indiquer les cellules du tableau pouvant tre modifies.
1. Placez le point d'insertion dans la fentre de document l'endroit o vous souhaitez insrer le tableau rpt.
Choisissez Insertion > Objets de modle > Tableau rpt.
Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Modles, puis choisissez Tableau rpt dans le
menu.
3. Dfinissez les options suivantes, puis cliquez sur OK.
Lignes Dtermine le nombre de lignes du tableau.
Colonnes Dtermine le nombre de colonnes du tableau.
601
Marge intrieure des cellules Dtermine l'espace (en pixels) entre le contenu d'une cellule et son contour.
Espacement des cellules Dtermine le nombre de pixels sparant les cellules contigus d'un tableau.
Lorsque vous n'affectez pas explicitement de valeur pour la marge intrieure et l'espacement des cellules, la plupart des
navigateurs affichent le tableau comme si la marge intrieure des cellules tait dfinie sur 1 et l'espacement entre les
cellules dfini sur 2. Pour tre sr que les navigateurs afficheront le tableau sans marge intrieure ni espacement,
dfinissez Marge intrieure des cellules et Espacement entre les cellules sur 0.
Largeur Indique la largeur du tableau en pixels ou en pourcentage de la largeur de fentre du navigateur.
Si vous n'affectez pas explicitement de valeur pour la bordure, la plupart des navigateurs affichent le tableau avec une
bordure dfinie sur 1. Pour vous assurer que les navigateurs affichent le tableau sans bordure, dfinissez Bordure sur 0.
Pour visualiser les contours des cellules et du tableau lorsque la bordure est dfinie sur 0, slectionnez Affichage >
Assistances visuelles > Bordures de tableau.
Rpter les lignes du tableau Permet d'indiquer les lignes du tableau inclure dans la rgion rpte.
Ligne de dbut Permet d'indiquer le numro de la premire ligne inclure dans la rgion rpte.
Ligne de fin Permet d'indiquer le numro de la premire ligne inclure dans la rgion rpte.
Nom de rgion Permet d'attribuer un nom unique la rgion rpte.
Dfinition d'une couleur d'arrire-plan alterne dans un tableau rpt
Haut de la page
Aprs avoir insr un tableau rpt dans un modle, vous pouvez le personnaliser en alternant la couleur d'arrire-plan des lignes du tableau.
1. Dans la fentre de document, slectionnez une ligne du tableau rpt.
2. Cliquez sur le bouton Afficher le mode code ou Afficher les modes Code et Cration de la barre d'outils du document pour
accder au code de la ligne slectionne.
3. En mode Code, modifiez la balise <tr> pour qu'elle se prsente de la faon suivante :
1
<tr bgcolor="@@( _index & 1 ? '#FFFFFF' : '#CCCCCC' )@@">
Vous pouvez modifier les valeurs hexadcimales #FFFFFF et #CCCCCC si vous souhaitez utiliser d'autres couleurs.
4. Enregistrez le modle.
Exemple de code correspondant un tableau dont la couleur d'arrire-plan des lignes est alterne :
1
2
3
4
5
6
7
8
9
10
11
12
13

<tr><th>Name</th><th>Phone Number</th><th>Email Address</th></tr>

<tr bgcolor="@@(_index & 1 ? '#FFFFFF' : '#CCCCCC')@@">
<td>  name 
</td>
<td>  phone 
</td>
<td>  email 
</td>
</tr>

</table>
Voir aussi
602
Utilisation de rgions facultatives dans des modles

A propos des rgions facultatives d'un modle
Insertion d'une rgion facultative
Dfinition de valeurs pour une rgion facultative
Haut de la page
A propos des rgions facultatives d'un modle
Une rgion facultative est une rgion de modle que les utilisateurs peuvent programmer pour qu'elle s'affiche ou reste masque dans les
documents bass sur ce modle. Utilisez une rgion facultative si vous souhaitez dfinir les conditions suivant lesquelles certains lments d'un
document doivent s'afficher.
Lorsque vous insrez une rgion facultative, vous pouvez associer des valeurs spcifiques un paramtre de modle ou bien dfinir des
instructions conditionnelles (instructions If...else) pour des rgions de modle. Vous pouvez utiliser des oprateurs simples (true/false) ou bien
dfinir des instructions conditionnelles et des expressions plus complexes. Vous pouvez modifier la rgion facultative ultrieurement si ncessaire.
Suivant les conditions dfinies, l'utilisateur du modle peut modifier les paramtres dans les documents qu'il cre partir du modle et dcider si la
rgion facultative doit s'afficher ou non.
Vous pouvez lier plusieurs rgions facultatives un paramtre nomm. Dans les documents bass sur un modle, les rgions lies entre elles
forment un groupe qui s'affiche ou reste masqu. Vous pouvez par exemple associer un article une image de remise (par exemple :
Liquidation totale ! ) et le texte du prix de vente.
Haut de la page
Insertion d'une rgion facultative
Une rgion facultative permet de dcider si des lments doivent s'afficher ou tre masqus dans les documents bass sur un modle. Il existe
quatre types de rgions facultatives :
Les rgions facultatives non modifiables, qui permettent l'utilisateur du modle d'afficher ou de masquer des rgions
spcialement marques sans lui permettre d'en modifier le contenu.
L'onglet d'une rgion facultative est prcd du mot if dans un modle. Suivant la condition dfinie dans le modle, l'utilisateur
du modle peut dcider si la rgion doit apparatre dans les pages qu'il cre.
Les rgions facultatives modifiables, qui permettent l'utilisateur du modle de dcider si la rgion doit tre affiche ou
masque et qui permettent aux utilisateurs d'en modifier le contenu.
Par exemple, si la rgion facultative comprend une image ou du texte, l'utilisateur du modle peut dcider si le contenu doit
s'afficher et peut y apporter des modifications si ncessaire. Une rgion modifiable est contrle par une instruction
conditionnelle.
Insertion d'une rgion facultative non modifiable

1. Dans la fentre de document, slectionnez l'lment que vous souhaitez dfinir comme rgion facultative.
Choisissez Insertion > Objets de modle > Rgion facultative.
Cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) sur le contenu
slectionn, puis choisissez Modles > Nouvelle rgion facultative.
Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Modles, puis choisissez Rgion facultative dans
le menu.
3. Tapez un nom pour la rgion facultative, puis cliquez sur l'onglet Avanc si vous souhaitez dfinir des valeurs pour la rgion
facultative, puis cliquez sur OK.
Insertion d'une rgion facultative modifiable

1. Dans la fentre de document, placez le point d'insertion l o vous voulez insrer la rgion facultative.
Il est impossible d'envelopper une slection pour crer une rgion facultative modifiable. Insrez la rgion puis insrez le
contenu dans la rgion.
603
Choisissez Insertion > Objets de modle > Rgion facultative modifiable.

Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Modles, puis choisissez Rgion modifiable
facultative dans le menu.
3. Tapez un nom pour la rgion facultative, puis cliquez sur l'onglet Avanc si vous souhaitez dfinir des valeurs pour la rgion
facultative, puis cliquez sur OK.
Haut de la page
Dfinition de valeurs pour une rgion facultative
Il est possible de modifier les paramtres d'une rgion facultative insre dans un modle. Par exemple, vous pouvez indiquer si le paramtre par
dfaut du contenu est d'tre affich ou non, de lier un paramtre une rgion facultative existante ou de modifier une expression de modle.
Crez des paramtres de modle et dfinissez des instructions conditionnelles (instructions If...else) pour les rgions de modle. Vous pouvez
utiliser des oprateurs simples (true/false) ou bien dfinir des instructions conditionnelles et des expressions plus complexes.
Les options de l'onglet Avanc vous permettent de lier plusieurs rgions facultatives un paramtre nomm. Dans les documents bass sur un
modle, les rgions lies entre elles forment un groupe qui s'affiche ou reste masqu. Vous pouvez par exemple associer un article une image
de remise (par exemple : Liquidation totale ! ) et le texte du prix de vente.
Vous pouvez galement utiliser l'onglet Avanc pour rdiger une expression de modle permettant de calculer une valeur lie la rgion
facultative et d'afficher ou de masquer cette rgion selon la valeur obtenue.
1. Dans la fentre Document, procdez de l'une des manires suivantes :
En mode Cration, cliquez sur l'onglet correspondant la rgion facultative que vous souhaitez modifier.
En mode Cration, placez le point d'insertion dans la rgion du modle, puis, dans le slecteur de balises situ en bas de
la fentre de document, slectionnez la balise de modle <mmtemplate:if>.
En mode Code, cliquez sur la balise de commentaire de la rgion que vous souhaitez modifier.
2. Dans l'inspecteur Proprits (Fentre > Proprits), cliquez sur le bouton Modifier.
3. Dans l'onglet Base, tapez un nom pour le paramtre dans la zone Nom.
4. Slectionnez Afficher par dfaut si vous souhaitez que la rgion slectionne s'affiche dans le document. Dsactivez-la pour
dfinir la valeur par dfaut sur false.
Remarque : Pour attribuer une autre valeur au paramtre, recherchez le paramtre dans la section du document en mode
Code et modifiez la valeur.
5. (Facultatif) Cliquez sur l'onglet Avanc, puis dfinissez les options suivantes :
Si vous voulez lier des paramtres de rgions facultatives, cliquez sur l'onglet Avanc, slectionnez Utiliser le paramtre,
puis choisissez dans le menu droulant le paramtre auquel vous voulez lier le contenu slectionn.
Si vous voulez rdiger une expression de modle afin de contrler l'affichage d'une rgion facultative, cliquez sur l'onglet
Avanc, slectionnez Saisir une expression, puis tapez l'expression dans la zone.
Remarque : Dreamweaver insre automatiquement des guillemets doubles avant et aprs le texte saisi.
6. Cliquez sur OK.
Lorsque vous utilisez l'objet de modle Rgion facultative, Dreamweaver insre des commentaires de modle dans le code.
Un paramtre de modle est dfini dans la section head, comme dans l'exemple suivant :
1

Du code semblable celui prsent ci-dessous s'affiche l'emplacement de la rgion facultative :

1
2
3


<p><img src="/images/airfare_on.gif" width="85" height="22"> </p>

Vous pouvez accder aux paramtres de modle et les modifier dans le document bas sur ce modle.
Voir aussi
604
Dfinition d'attributs de balises modifiables dans des modles

Dfinition des attributs de balise modifiables dans un modle
Conversion d'un attribut de balise modifiable en attribut non modifiable
Dfinition des attributs de balise modifiables dans un modle
Haut de la page
Vous pouvez permettre aux utilisateurs d'un modle de modifier des attributs de balise spcifiques dans les documents crs partir de ce
modle.
Vous pouvez par exemple appliquer une couleur d'arrire-plan au modle tout en permettant aux utilisateurs du modle d'appliquer une couleur
d'arrire-plan diffrente aux pages qu'ils crent. Les utilisateurs peuvent mettre jour uniquement les attributs que vous dfinissez comme tant
modifiables.
Vous pouvez dfinir plusieurs attributs modifiables sur une page afin que les utilisateurs du modle puissent modifier les attributs dans les
documents bass sur ce modle. Les types de donnes suivants sont pris en charge : texte, valeur boolenne (true/false), couleur et URL.
Lorsque vous crez un attribut de balise modifiable, un paramtre de modle est insr dans le code. L'attribut reoit une valeur initiale dans le
modle. Tous les documents crs partir du modle hritent de ce paramtre. L'utilisateur du modle peut alors modifier le paramtre dans le
document bas sur le modle.
Remarque : Si vous crez un lien vers une feuille de style avec un attribut modifiable, alors les attributs de la feuille de style ne sont plus
disponibles pour tre affichs ou modifis dans le fichier de modle.
1. Dans la fentre de document, slectionnez l'lment pour lequel vous souhaitez dfinir un attribut de balise modifiable.
2. Slectionnez Modifier > Modles > Rendre l'attribut modifiable.
3. Dans la zone Attribut, entrez un nom ou slectionnez un attribut dans la bote de dialogue Attributs de balise modifiables en
procdant comme suit :
Si l'attribut que vous souhaitez rendre modifiable est rpertori dans le menu droulant Attribut, slectionnez-le.
Si l'attribut que vous souhaitez rendre modifiable n'est pas rpertori dans le menu droulant Attribut, cliquez sur le bouton
Ajouter, tapez le nom de l'attribut que vous souhaitez ajouter dans la bote de dialogue qui s'affiche, puis cliquez sur OK.
4. Vrifiez que l'option Rendre l'attribut modifiable est active.
5. Tapez un nom unique pour l'attribut dans la zone Etiquette.
Pour retrouver plus facilement un attribut de balise modifiable spcifique, faites en sorte que l'tiquette indique clairement
l'lment et l'attribut concern. Par exemple, vous pouvez attribuer l'tiquette logoSrc au code source modifiable d'une
image ou bien l'tiquette bodyBgcolor la couleur d'arrire-plan modifiable d'une balise body.
6. Dans le menu droulant Type, slectionnez le type de valeur autorise pour cet attribut en dfinissant l'une des options
suivantes :
Si vous souhaitez que l'utilisateur puisse taper du texte pour dfinir l'attribut, slectionnez Texte. L'attribut align peut par
exemple tre dfini par du texte : l'utilisateur aura la possibilit de lui attribuer la valeur left, right ou center.
Pour insrer un lien vers un lment, tel qu'un chemin d'accs un fichier vers une image, slectionnez URL. Lorsque
cette option est slectionne, le chemin utilis dans un lien est automatiquement mis jour. Lorsque l'utilisateur dplace
l'image vers un nouveau dossier, la bote de dialogue de mise jour des liens s'affiche.
Si vous souhaitez que l'utilisateur puisse slectionner une valeur au moyen du slecteur de couleur, slectionnez Couleur.
Pour permettre un utilisateur de choisir une valeur vraie ou fausse sur la page, choisissez Vrai/Faux.
Si vous souhaitez que l'utilisateur d'un modle puisse taper une valeur numrique pour mettre jour un attribut (la hauteur
ou la largeur d'une image par exemple), slectionnez Nombre.
7. La zone Valeur par dfaut indique la valeur de l'attribut de balise slectionn dans le modle. Tapez une autre valeur dans
cette zone si vous souhaitez modifier la valeur initiale du paramtre dans les documents bass sur le modle.
8. (Facultatif) Si vous souhaitez apporter des modifications un autre attribut de la balise slectionne, slectionnez-le, puis
compltez-en la bote de dialogue.
9. Cliquez sur OK.
Conversion d'un attribut de balise modifiable en attribut non modifiable

605
Haut de la page
Une balise marque comme modifiable peut tre marque comme non modifiable.
1. Dans le modle, cliquez sur l'lment associ l'attribut modifiable, ou bien slectionnez la balise au moyen du slecteur de
balises.
2. Slectionnez Modifier > Modles > Rendre l'attribut modifiable.
3. Dans le menu droulant Attributs, slectionnez l'attribut que vous souhaitez affecter.
4. Dslectionnez Rendre l'attribut modifiable, puis cliquez sur OK.
5. Mettez jour les documents bass sur le modle.
Voir aussi
606

A propos des modles imbriqus
Empcher qu'une rgion modifiable d'un modle imbriqu devienne non modifiable dans les documents bass sur ce
modle
Haut de la page
A propos des modles imbriqus
Un modle imbriqu est un modle dont la conception et les rgions modifiables sont bases sur un autre modle. Les modles imbriqus sont
utiles pour grer le contenu de certaines pages d'un site qui ont de nombreux lments de prsentation en commun avec les autres pages du site
mais qui prsentent malgr tout quelques diffrences. Par exemple, vous pouvez crer un modle de base dfinissant la conception de zones plus
larges, qui sera utilis par une grande partie des responsables du contenu du site, et crer un modle imbriqu dfinissant de nouvelles rgions
modifiables dans les pages d'une section spcifique du site.
Les rgions modifiables d'un modle de base sont transmises aux modles imbriqus et restent modifiables dans les pages cres partir d'un
modle imbriqu, moins que de nouvelles rgions de modle ne soient insres dans ces rgions.
Les modifications apportes un modle de base sont automatiquement rpercutes dans les modles bass sur ce modle de base et dans tous
les documents bass sur les modles principal et imbriqu.
Dans l'exemple suivant, le modle trioHome contient trois rgions modifiables, nommes Body, NavBar et Footer :
Pour crer un modle imbriqu, nous avons cr un document partir du modle, puis nous avons enregistr ce document comme modle que
nous avons appel TrioNested. Dans le modle imbriqu, nous avons ajout deux rgions modifiables et du contenu dans la rgion nomme
Body.
607
Lorsque vous insrez une nouvelle rgion modifiable dans une rgion modifiable transmise au modle imbriqu, la couleur de surbrillance de la
rgion modifiable devient orange. Le contenu que vous ajoutez en dehors de la rgion modifiable, par exemple l'image insre dans
editableColumn, n'est plus modifiable dans les documents crs partir du modle imbriqu. Qu'elles aient t ajoutes au modle imbriqu ou
qu'elles soient hrites du modle de base, les rgions modifiables entoures d'un cadre de surbrillance bleu restent modifiables dans les
documents qui ont t crs partir du modle imbriqu. Les rgions de modle qui ne contiennent aucune rgion modifiable sont transmises
sous la forme de rgions modifiables aux documents bass sur le modle.
Haut de la page
Les modles imbriqus permettent de crer des variantes du modle de base. Vous pouvez crer une srie de modles imbriqus en chane pour
obtenir une mise en forme chaque fois plus prcise.
Par dfaut, toutes les rgions modifiables du modle de base sont transmises, via le modle imbriqu, aux documents bass sur ce modle
imbriqu. En d'autres termes, si vous dfinissez une rgion modifiable dans un modle de base, puis que vous crez un modle imbriqu, la
rgion modifiable apparatra dans les documents bass sur le modle imbriqu, condition que vous n'ayez insr aucune nouvelle rgion de
modle dans cette rgion du modle imbriqu.
Remarque : Vous pouvez insrer un marqueur de modle l'intrieur d'une rgion modifiable afin qu'elle ne soit pas modifiable dans les
documents bass sur le modle imbriqu. Ces rgions ont un cadre orange au lieu de bleu.
1. Crez un document partir du modle sur lequel vous souhaitez baser le modle imbriqu en procdant de l'une des faons
suivantes :
Dans la catgorie Modles du panneau Actifs, cliquez du bouton droit de la souris (Windows) ou en maintenant la touche
Ctrl enfonce (Macintosh) sur le modle partir duquel vous souhaitez crer un document, puis choisissez Nouveau
partir d'un modle dans le menu contextuel.
Choisissez Fichier > Nouveau. Dans la bote de dialogue Nouveau document, slectionnez la catgorie Page issue d'un
modle, puis slectionnez le site qui contient le modle que vous souhaitez utiliser. Dans la liste Modles, double-cliquez
sur le modle pour crer un document.
2. Slectionnez Fichier > Enregistrer comme modle pour enregistrer le nouveau document en tant que modle imbriqu :
3. Tapez un nom dans la zone Enregistrer sous, puis cliquez sur OK.
Empcher qu'une rgion modifiable d'un modle imbriqu devienne non modifiable dans les
documents bass sur ce modle
Haut de la page
Dans les modles imbriqus, les rgions modifiables qui seront transmises aux documents sont entoures d'un cadre bleu. Vous pouvez insrer
un marqueur de modle l'intrieur d'une rgion modifiable afin qu'elle ne soit pas modifiable dans les documents bass sur le modle imbriqu.
Ces rgions ont un cadre orange au lieu de bleu.
1. En mode Code, localisez la rgion modifiable que vous souhaitez rendre non modifiable dans les documents bass sur ce
modle.
608
Les rgions modifiables sont dfinies par les balises de commentaire du modle.
2. Ajoutez le code suivant au code de la rgion modifiable :
1
@@(<samp class="codeph">"</samp><samp class="codeph">")</samp>@@
Ce modle de code peut tre plac n'importe o l'intrieur des balises <!-InstanceEndEditable --> qui entourent la rgion modifiable. Par exemple :
1
2
3


<p><strong>@@("")@@</strong> Editable 1 </p>

Voir aussi
Modles imbriqus
609
Modification, mise jour et suppression de modles

A propos de la modification et de la mise jour des modles
Ouverture d'un modle modifier
Modification du nom d'un modle
Modification de la description d'un modle
Mise jour manuelle des documents bass sur des modles
Mise jour des modles pour un site Contribute
Suppression d'un fichier de modle
Haut de la page
A propos de la modification et de la mise jour des modles
Lorsque vous apportez des modifications un modle et que vous l'enregistrez, tous les documents bass sur ce modle sont mis jour. Vous
pouvez galement mettre jour manuellement un document bas sur un modle ou l'ensemble d'un site si ncessaire.
Remarque : Pour modifier un modle pour un site Contribute, vous devez utiliser Dreamweaver. Il est impossible de modifier des modles dans
Contribute.
Utilisez la catgorie Modles du panneau Actifs pour grer les modles existants. Elle permet entre autres de renommer ou supprimer des fichiers
de modle.
Le panneau Actifs permet d'effectuer les tches de gestion des modles suivantes :
Cration d'un modle
Modification et mise jour de modles
Dreamweaver vrifie la syntaxe du modle lorsque vous enregistrez un modle, mais il est conseill de vrifier la syntaxe du modle
manuellement mesure que vous le modifiez.
Haut de la page
Ouverture d'un modle modifier
Vous pouvez ouvrir un fichier de modle directement pour le modifier ou bien ouvrir un document bas sur un modle, puis ouvrir le modle joint
pour le modifier.
Lorsque vous apportez des modifications un modle, Dreamweaver vous invite mettre jour les documents bass sur ce modle.
Remarque : Vous pouvez aussi manuellement mettre jour les documents selon les modifications apportes au modle, si ncessaire.
Ouverture et modification d'un fichier de modle

Le panneau Actifs contient tous les modles disponibles pour votre site et affiche un aperu du modle slectionn.
2. Dans la liste des modles disponibles, procdez de l'une des manires suivantes :
Double-cliquez sur le nom du modle modifier.
Slectionnez un modle modifier, puis cliquez sur le bouton Modifier
en bas du panneau Actifs.
3. Modifiez le contenu du modle.

Pour modifier les proprits de page du modle, choisissez Modifier > Proprits de la page (les documents bass sur un
modle hritent des proprits de page associes ce dernier).
4. Enregistrez le modle. Un message s'affiche, vous invitant mettre jour les pages bases sur le modle.
5. Cliquez sur Mettre jour pour mettre jour tous les documents bass sur le modle modifi ; cliquez sur Ne pas mettre jour
si vous ne souhaitez pas mettre jour les documents bass sur le modle modifi.
Dreamweaver affiche un journal indiquant les fichiers mis jour.
Ouverture et modification du modle joint au document en cours

1. Ouvrez le document bas sur le modle dans la fentre de document.
610
Choisissez Modifier > Modles > Ouvrir le modle joint.

Modles > Ouvrir le modle joint.
3. Modifiez le contenu du modle.
Pour modifier les proprits de page du modle, choisissez Modifier > Proprits de la page (les documents bass sur un
modle hritent des proprits de page associes ce dernier).
4. Enregistrez le modle. Un message s'affiche, vous invitant mettre jour les pages bases sur le modle.
5. Cliquez sur Mettre jour pour mettre jour tous les documents bass sur le modle modifi ; cliquez sur Ne pas mettre jour
si vous ne souhaitez pas mettre jour les documents bass sur le modle modifi.
Dreamweaver affiche un journal indiquant les fichiers mis jour.
Haut de la page
Modification du nom d'un modle

2. Cliquez sur le nom du modle pour le slectionner.

3. Cliquez une nouvelle fois sur le nom de sorte que le texte soit modifiable, puis tapez le nouveau nom.
Cette mthode fonctionne de la mme faon que celle utilise dans l'Explorateur Windows ou dans le Finder (Macintosh).
Comme avec l'Explorateur Windows et le Finder, vous devez attendre un bref instant entre les deux clics. Ne double-cliquez
pas sur le nom, car cela ouvrirait le modle pour modification.
4. Cliquez sur une autre zone du panneau Actifs ou appuyez sur Entre (Windows) ou Retour (Macintosh) pour appliquer la
modification.
Une alerte vous demande si vous voulez mettre jour les documents crs partir de ce modle.
5. Pour mettre jour tous les documents du site crs partir de ce modle, cliquez sur Mettre jour. Cliquez sur Ne pas mettre
jour si vous ne souhaitez pas mettre jour les documents bass sur ce modle.
Haut de la page
Modification de la description d'un modle
La description du modle s'affiche dans la bote de dialogue Nouveau document lorsque vous crez une page partir d'un modle existant.
1. Choisissez Modifier > Modles > Description.
2. Dans la bote de dialogue Description du modle, modifiez la description, puis cliquez sur OK.
Mise jour manuelle des documents bass sur des modles
Haut de la page
Lorsque vous modifiez un modle, Dreamweaver vous invite mettre jour les documents bass sur ce modle, mais vous pouvez mettre jour
manuellement le document en cours ou le site tout entier si ncessaire. La mise jour manuelle des documents bass sur le modle a le mme
effet qu'une nouvelle application du modle.
Application des modifications apportes au modle au document en cours

1. Ouvrez le document dans la fentre de document.
2. Choisissez Modifier > Modles > Mettre jour la page en cours.
Dreamweaver applique au document les modifications apportes au modle.
Mise jour du site entier ou de tous les documents utilisant le modle spcifi
Vous pouvez mettre jour toutes les pages du site ou bien uniquement les pages bases sur un modle spcifique.
1. Choisissez Modifier > Modles > Mettre jour les pages.
2. Dans le menu Regarder dans, ralisez une des oprations suivantes :
Pour mettre jour tous les fichiers du site slectionn en fonction de leurs modles correspondants, choisissez Site entier,
puis slectionnez le nom du site dans le menu droulant adjacent.
Pour mettre jour les fichiers bass sur un modle spcifique, choisissez Fichiers utilisant, puis slectionnez le nom du
modle dans le menu droulant adjacent.
3. Dans la rubrique Mettre jour, assurez-vous que l'option Modles est active.
4. Si vous ne souhaitez pas voir de journal des fichiers mis jour par Dreamweaver, dsactivez l'option Afficher le journal ;
sinon, laissez-la active.
611
5. Cliquez sur Dmarrer pour mettre jour les fichiers comme indiqu. Si vous avez slectionn l'option Afficher le journal,
Dreamweaver affiche des informations sur les fichiers qu'il essaie de mettre jour et prcise si la mise jour a russi.
6. Cliquez sur Fermer.
Haut de la page
Mise jour des modles pour un site Contribute
Les utilisateurs de Contribute ne peuvent pas modifier de modles Dreamweaver. Vous pouvez cependant utiliser Dreamweaver pour apporter des
modifications dans un modle de site Contribute.
Tenez compte des facteurs suivants lors de la mise jour de modles dans un site Contribute :
Contribute rcupre les nouveaux modles et les modles modifis depuis le site uniquement au lancement de Contribute et
lorsqu'un utilisateur de Contribute modifie ses informations de connexion. Si vous apportez des modifications un modle
lorsqu'un utilisateur de Contribute modifie un fichier bas sur ce modle, l'utilisateur ne peut pas visualiser vos modifications
tant qu'il ne relance pas Contribute.
Si vous supprimez une rgion modifiable d'un modle lorsqu'un utilisateur de Contribute est en train de modifier une page
base sur ce modle, le contenu de cette rgion modifiable peut troubler cet utilisateur.
Pour mettre jour un modle dans un site Contribute, excutez les tapes suivantes.
1. Ouvrez le modle Contribute dansDreamweaver, modifiez le formulaire et enregistrez le document. Pour obtenir des
instructions, voir Ouverture d'un modle modifier.
2. Demandez tous les utilisateurs Contribute qui travaillent sur le site de redmarrer Contribute.
Haut de la page
Suppression d'un fichier de modle

2. Cliquez sur le nom du modle pour le slectionner.

3. Cliquez sur le bouton Supprimer en bas du panneau, puis confirmez l'opration.
Important : Une fois que vous avez supprim un fichier de modle, vous ne pouvez pas le rcuprer. Le fichier de modle est
supprim de votre site.
Les documents crs partir de ce modle ne sont pas dtachs du modle. Ils conservent la structure et les rgions
modifiables dont le fichier de modle disposait avant d'tre supprim. Vous pouvez convertir un document de ce type en
fichier HTML normal sans rgions modifiables ou verrouilles.
Voir aussi
612
Exportation et importation du contenu d'un modle

A propos du contenu XML d'un modle
Exportation des rgions modifiables d'un document au format XML
Importation de contenu XML
Exportation d'un site sans marqueur de modle
Haut de la page
A propos du contenu XML d'un modle
Vous pouvez imaginer qu'un document bas sur un modle contient des donnes reprsentes par des paires nom/valeur. Chaque paire se
compose du nom d'une rgion modifiable et du contenu de cette rgion.
Vous pouvez exporter les paires nom/valeur dans un fichier XML pour que vous puissiez utiliser les donnes du document en dehors de
Dreamweaver (par exemple dans un diteur XML, dans un diteur de texte ou mme dans une application de base de donnes). Inversement, si
vous disposez d'un document XML structur de manire approprie, vous pouvez importer ses donnes dans un document bas sur un modle
Dreamweaver.
Exportation des rgions modifiables d'un document au format XML
Haut de la page
1. Ouvrez un document bas sur un modle qui contient des rgions modifiables.
2. Choisissez Fichier > Exporter > Donnes du modle en XML.
3. Activez l'une des options Notation :
Si le modle contient des rgions rptes ou des paramtres de modle, choisissez Utiliser les balises XML standard de
Dreamweaver.
Si le modle ne contient ni rgion rpte ni paramtre de modle, choisissez Utiliser noms de rgions modifiables comme
balises XML.
4. Cliquez sur OK.
5. Dans la bote de dialogue qui s'affiche, slectionnez un dossier, nommez le fichier XML, puis cliquez sur le bouton Enregistrer.
Un fichier XML est gnr : il contient le matriau des paramtres et des rgions modifiables du document (y compris le
matriau des rgions facultatives et des rgions modifiables situes l'intrieur de rgions rptes). Le fichier XML comporte
le nom du modle original, ainsi que le nom et le contenu de chaque rgion de modle.
Remarque : Le contenu des rgions non modifiables n'est pas export vers le fichier XML.
Haut de la page
Importation de contenu XML

1. Choisissez Fichier > Importer > XML dans le modle.
2. Slectionnez le fichier XML et cliquez sur Ouvrir.
Dreamweaver cre un nouveau document bas sur le modle spcifi dans le fichier XML. Il remplit le contenu de chaque
rgion modifiable de ce document l'aide des donnes du fichier XML. Le document rsultant apparat dans une nouvelle
fentre de document.
Si votre fichier XML n'est pas configur exactement de la faon prvue par Dreamweaver, vous ne pourrez peut-tre pas
importer vos donnes. Une solution ce problme consiste exporter un fichier XML fictif de Dreamweaver, de faon
avoir un fichier XML ayant exactement la bonne structure, puis copier les donnes de votre fichier XML original dans le
fichier XML export. Vous obtenez ainsi un fichier XML ayant une structure correcte et contenant les donnes appropries,
prtes tre importes.
Haut de la page
Exportation d'un site sans marqueur de modle

Vous pouvez exporter des documents bass sur un modle d'un site vers un autre site sans inclure le marqueur de modle.
1. Choisissez Modifier > Modles > Exporter sans marqueur.
2. Dans la zone Dossier, tapez le chemin du dossier vers lequel vous souhaitez exporter le fichier, ou bien cliquez sur Parcourir
613
et slectionnez le dossier.
Remarque : Slectionnez un dossier situ l'extrieur du site courant.
3. Pour enregistrer une version XML des documents bass sur un modle que vous exportez, slectionnez Conserver les fichiers
contenant les donnes du modle.
4. Pour appliquer les modifications aux fichiers prcdemment exports, slectionnez Extraire les fichiers modifis uniquement.
614

Application d'un modle un document existant
Dtachement d'un document d'un modle
Haut de la page
Application d'un modle un document existant
Lorsque vous appliquez un modle un document contenant dj des lments, Dreamweaver tente de faire concorder le contenu existant avec
une rgion du modle. Si le modle que vous appliquez au document est une version rvise de l'un des modles existants, il est probable que
les noms concordent.
Si vous appliquez un modle un document auquel aucun modle n'a encore t appliqu, les rgions modifiables ne peuvent pas tre
compares et un cas de non-concordance se prsente. Dreamweaver les localise et vous pouvez alors slectionner la rgion ou les rgions vers
lesquelles le contenu de la page courante doit tre transfr, ou bien dcider de supprimer le contenu non cohrent.
Vous pouvez appliquer un modle un document existant l'aide du panneau Actifs ou partir de la fentre de document. Vous pouvez annuler
l'application d'un modle si ncessaire.
Important : Lorsque vous appliquez un modle un document existant, le modle remplace le contenu du document par le contenu passe-partout
du modle. Sauvegardez toujours le contenu d'une page avant de lui appliquer un modle.
Application d'un modle un document existant l'aide du panneau Actifs

1. Ouvrez le document auquel vous souhaitez appliquer le modle.

Faites glisser le modle que vous souhaitez appliquer du panneau Actifs dans la fentre de document.
Slectionnez le modle que vous souhaitez appliquer, puis cliquez sur le bouton Appliquer en bas du panneau Actifs.
Si le document comporte des lments qui ne peuvent pas tre automatiquement attribus une rgion de modle, la
bote de dialogue Noms de rgion incohrents s'affiche.
4. Slectionnez une destination pour le contenu l'aide du menu Dplacer le contenu vers la nouvelle rgion en slectionnant
l'une des options suivantes :
Slectionnez une rgion du nouveau modle vers laquelle vous souhaitez dplacer le contenu existant.
Slectionnez Nulle part pour supprimer le contenu du document.
5. Cliquez sur Utiliser pour tout pour dplacer l'ensemble des lments de contenu non concordants vers la rgion slectionne.
6. Cliquez sur OK pour appliquer le modle ou sur Annuler pour annuler l'application du modle au document.
Important : Lorsque vous appliquez un modle un document existant, le modle remplace le contenu du document par le
contenu passe-partout du modle. Sauvegardez toujours le contenu d'une page avant de lui appliquer un modle.
Application d'un modle un document existant partir de la fentre de document

1. Ouvrez le document auquel vous souhaitez appliquer le modle.
2. Choisissez Modifier > Modles > Appliquer le modle la page.
La bote de dialogue Slectionner le modle s'affiche.
3. Slectionnez un modle dans la liste, puis cliquez sur le bouton Slectionner.
Si le document comporte des lments qui ne peuvent pas tre automatiquement attribus une rgion de modle, la bote
de dialogue Noms de rgion incohrents s'affiche.
4. Slectionnez une destination pour le contenu l'aide du menu Dplacer le contenu vers la nouvelle rgion en slectionnant
l'une des options suivantes :
Slectionnez une rgion du nouveau modle vers laquelle vous souhaitez dplacer le contenu existant.
Slectionnez Nulle part pour supprimer le contenu du document.
5. Cliquez sur Utiliser pour tout pour dplacer l'ensemble des lments de contenu non concordants vers la rgion slectionne.
6. Cliquez sur OK pour appliquer le modle ou sur Annuler pour annuler l'application du modle au document.
615
Important : Lorsque vous appliquez un modle un document existant, le modle remplace le contenu du document par le
contenu passe-partout du modle. Sauvegardez toujours le contenu d'une page avant de lui appliquer un modle.
Annulation des modifications apportes un modle

Choisissez Edition > Annuler l'application du modle.
Le document retrouve l'tat dans lequel il se trouvait avant l'application du modle.
Haut de la page
Dtachement d'un document d'un modle
Pour apporter des modifications aux rgions verrouilles d'un document bas sur un modle, vous devez au pralable dtacher le document du
modle. Lorsqu'un document est dtach, toutes les rgions qui le composent deviennent modifiables.
Remarque : Vous ne pouvez pas convertir un fichier modle (.dwt) en un fichier normal simplement en l'enregistrant nouveau en tant que fichier
HTML (.html). Cette mthode ne supprime pas le code du modle qui figure dans le document. Si vous souhaitez convertir un fichier de modle en
un fichier normal, vous pouvez enregistrer le document comme un fichier normal HTML, mais vous devez ensuite supprimer manuellement tous les
codes de modle en mode Code.
1. Ouvrez le document bas sur un modle que vous souhaitez dtacher.
2. Choisissez Modifier > Modles > Dtacher du modle.
Le document est dtach du modle et tout le code du modle est supprim.
616
Modification du contenu d'un document bas sur un modle

A propos de la modification du contenu d'un document bas sur un modle
Modification des proprits d'un modle
Ajout, suppression et modification de l'ordre des entres dans une rgion rpte
A propos de la modification du contenu d'un document bas sur un modle
Haut de la page
Les modles de Dreamweaver spcifient les rgions qui sont verrouilles (non modifiables) et les autres qui sont modifiables dans les documents
bass sur ces modles.
Sur les pages bases sur un modle, les utilisateurs peuvent modifier uniquement le contenu des rgions modifiables. Vous pouvez facilement
identifier et slectionner les rgions modifiables afin d'en modifier le contenu. Les utilisateurs du modle ne peuvent pas modifier le contenu des
rgions verrouilles.
Remarque : Si vous essayez de modifier une rgion verrouille dans un document bas sur un modle lorsque la surbrillance est dsactive, le
pointeur de la souris se transforme pour indiquer que vous ne pouvez pas cliquer dans une rgion verrouille.
Les utilisateurs du modle peuvent galement modifier les proprits et les entres d'une rgion rpte dans les documents bass sur ce modle.
Haut de la page
Modification des proprits d'un modle
Lorsque l'auteur cre des paramtres dans un modle, les documents bass sur ce modle hritent automatiquement des paramtres et de leur
valeur initiale. L'utilisateur du modle peut mettre jour les attributs de balise modifiables et d'autres paramtres du modle (ceux d'une rgion
facultative, par exemple).
Modification d'un attribut de balise modifiable

1. Ouvrez le document bas sur un modle.
2. Choisissez Modifier > Proprits du modle.
La bote de dialogue Proprits du modle s'ouvre et affiche la liste des proprits disponibles. Elle indique les rgions
facultatives et les attributs de balise modifiables.
3. Slectionnez la proprit dans la liste Nom.
L'tiquette et la valeur de la proprit slectionne s'affichent dans la partie infrieure de la bote de dialogue.
4. Si vous souhaitez modifier la valeur de la proprit dans le document courant, saisissez une autre valeur dans le champ situ
droite de l'tiquette de la proprit.
Remarque : Le nom du champ et les valeurs modifiables sont dfinis dans le modle. Les attributs non rpertoris dans la
liste Nom ne peuvent pas tre modifis dans le document bas sur un modle.
5. Slectionnez Autoriser les modles imbriqus pour contrler ceci si vous souhaitez que la proprit modifiable soit transmise
aux documents bass sur le modle imbriqu.
Modification des paramtres de modle des rgions facultatives

2. Choisissez Modifier > Proprits du modle.
La bote de dialogue Proprits du modle s'ouvre et affiche la liste des proprits disponibles. Elle indique les rgions
facultatives et les attributs de balise modifiables.
3. Slectionnez une proprit dans la liste Nom.
L'tiquette et la valeur de la proprit slectionne s'affichent dans la bote de dialogue.
4. Slectionnez Afficher si vous souhaitez que la rgion facultative apparaisse dans le document, ou bien dslectionnez cette
option si vous souhaitez qu'elle soit masque.
Remarque : Le nom du champ et la valeur par dfaut sont dfinis dans le modle.
5. Slectionnez Autoriser les modles imbriqus pour contrler ceci si vous souhaitez que la proprit modifiable soit transmise
aux documents bass sur le modle imbriqu.
617
Ajout, suppression et modification de l'ordre des entres dans une rgion rpte
Haut de la page
Vous pouvez ajouter ou supprimer des entres ou bien modifier l'ordre des entres dans une rgion rpte. Lorsque vous ajoutez une entre de
rgion rpte, l'ensemble de la rgion rpte est reproduit dans le document. La rgion rpte doit contenir une rgion modifiable dans le
modle original pour que l'utilisateur puisse en modifier le contenu.
Ajout, suppression ou modification de l'ordre dans une rgion rpte

2. Placez le point d'insertion sur la rgion rpte pour la slectionner.
Cliquez sur le bouton plus (+) pour ajouter une entre de rgion rpte sous l'entre slectionne.
Cliquez sur le bouton moins () pour supprimer l'entre de rgion rpte slectionne.
Cliquez sur le bouton Flche bas pour dplacer l'entre slectionne d'un niveau vers le bas.
Cliquez sur le bouton Flche haut pour dplacer l'entre slectionne d'un niveau vers le haut.
Remarque : Vous pouvez galement choisir Modifier > Modles, puis activer l'une des options d'entre rpte prs du
bas du menu contextuel. Celui-ci permet d'insrer une nouvelle entre de rgion rpte et de modifier l'emplacement de
l'entre slectionne.
Couper, copier et supprimer des entres

2. Placez le point d'insertion sur la rgion rpte pour la slectionner.
Pour couper une entre rpte, choisissez Edition > Entres rptes > Couper l'entre rpte.
Pour copier une entre rpte, choisissez Edition > Entres rptes > Couper l'entre rpte.
Pour supprimer une entre rpte, choisissez Edition > Entres rptes > Supprimer l'entre rpte.
Pour coller une entre rpte, choisissez Edition > Coller.
Remarque : Lorsque vous collez une entre de rgion rpte, celle-ci s'insre dans le document sans craser d'entre
existante.
Voir aussi
Cration d'une page base sur un modle existant
618
Syntaxe des modles

Rgles gnrales de syntaxe
Balises de modle
Balises d'instance
Vrification de la syntaxe du modle
Haut de la page
Rgles gnrales de syntaxe
Dreamweaver fait appel des balises de commentaire HTML pour dfinir des rgions dans les modles et dans les documents bass sur un
modle, de telle faon que les documents bass sur un modle restent des fichiers HTML valides. Lorsque vous insrez un objet de modle, des
balises de modle sont insres dans le code.
Les rgles de syntaxe gnrale sont les suivantes :
L o il y a un espace, vous pouvez en ajouter autant que vous voulez (sous la forme d'espaces, de tabulations, de sauts de
ligne). L'espace blanc est obligatoire, sauf au tout dbut ou la toute fin d'un commentaire.
Les attributs peuvent tre saisis dans n'importe quel ordre. Par exemple, dans le cas de TemplateParam, vous pouvez
spcifier le type avant le nom.
Les noms des commentaires et des attributs sont sensibles la casse.
Tous les attributs doivent tre entre guillemets. Il est possible d'utiliser des guillemets simples ou doubles.
Haut de la page
Balises de modle
Dreamweaver utilise les balises de modle suivantes :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-

TemplateEndEditable -->
TemplateParam name="..." type="..." value="..." -->
TemplateBeginRepeat name="..." -->
TemplateEndRepeat -->
TemplateBeginIf cond="..." -->
TemplateEndIf -->
TemplateBeginPassthroughIf cond="..." -->
TemplateEndPassthroughIf -->
TemplateBeginMultipleIf -->
TemplateEndMultipleIf -->
TemplateBeginPassthroughMultipleIf -->
TemplateEndPassthroughMultipleIf -->
TemplateBeginIfClause cond="..." -->
TemplateEndIfClause -->
TemplateBeginPassthroughIfClause cond="..." -->
TemplateEndPassthroughIfClause -->
TemplateExpr expr="..." --> (equivalent to @@...@@)
TemplatePassthroughExpr expr="..." -->
TemplateInfo codeOutsideHTMLIsLocked="..." -->
Haut de la page
Balises d'instance
Dreamweaver utilise les balises d'instance suivantes :
1
2
3
4
5
6
7
<!-<!-<!-<!-<!-<!-

InstanceEnd -->
InstanceBeginEditable name="..." -->
InstanceEndEditable -->
InstanceParam name="..." type="..." value="..." passthrough="..." -->
InstanceBeginRepeat name="..." -->
InstanceEndRepeat -->
619
8
9



Haut de la page
Vrification de la syntaxe du modle
Dreamweaver vrifie la syntaxe du modle lorsque vous l'enregistrez, mais vous pouvez la vrifier manuellement avant d'enregistrer le modle.
Par exemple, si vous ajoutez un paramtre ou une expression de modle en mode Code, vous pouvez vrifier que le code suit la syntaxe
correcte.
1. Ouvrez le document que vous souhaitez vrifier dans la fentre de document.
2. Choisissez Modifier > Modles > Vrifier la syntaxe du modle.
Un message d'erreur s'affiche lorsque cette syntaxe est incorrecte. Le message dcrit l'erreur et indique la ligne du code
l'origine de cette erreur.
Voir aussi
620
Dfinition de prfrences de programmation pour les modles

Personnalisation des prfrences de coloration de code d'un modle
Dfinition des prfrences de surbrillance pour des rgions de modle
Personnalisation des prfrences de coloration de code d'un modle
Haut de la page
Utilisez ces prfrences pour dfinir la couleur des caractres, la couleur de l'arrire-plan et les attributs de style du texte affich en mode Code.
Vous pouvez dfinir votre propre modle de couleur afin de pouvoir distinguer facilement les rgions de modle lorsque vous affichez un document
en mode Code.
2. Slectionnez la catgorie Coloration du code dans la liste de gauche.
3. Slectionnez HTML dans la liste Type de document, puis cliquez sur le bouton Modifier le modle de coloration.
4. Dans la liste Styles pour, slectionnez Balises de modle.
5. Dfinissez la couleur des caractres, la couleur de l'arrire-plan et les attributs de style du texte affich en mode Code. Pour
ce faire, procdez de la manire suivante :
Tapez dans la zone Couleur de texte la valeur hexadcimale de la couleur que vous souhaitez appliquer au texte
slectionn, ou bien utilisez le slecteur de couleur pour slectionner cette couleur. Procdez de la mme manire pour le
champ Couleur d'arrire-plan si vous souhaitez appliquer une couleur l'arrire-plan du texte slectionn, ou bien
modifier la couleur courante.
Si vous souhaitez appliquer un attribut de style au code slectionn, utilisez les boutons B (gras), I (italique) ou U
(soulign) pour appliquer le format souhait.
6. Cliquez sur OK.
Remarque : Si vous souhaitez effectuer des modifications globales, vous pouvez modifier le fichier source dans lequel vos
prfrences sont enregistres. Sous Windows XP, ce fichier se trouve dans C:\Documents and Settings\%nom
d'utilisateur%\Application Data\Adobe\Dreamweaver 9\Configuration\CodeColoring\Colors.xml. Sous Windows Vista, ce fichier
se trouve dans C:\Utilisateurs\%nom d'utilisateur%\Application Data\Adobe\Dreamweaver
9\Configuration\CodeColoring\Colors.xml.
Dfinition des prfrences de surbrillance pour des rgions de modle
Haut de la page
Les prfrences de surbrillance Dreamweaver permettent de personnaliser les couleurs de surbrillance appliques aux cadres entourant les
rgions modifiables et les rgions verrouilles d'un modle en mode Cration. La couleur de surbrillance des rgions modifiables est utilise dans
le modle, mais aussi dans les documents bass sur ce modle.
Modification des couleurs de surbrillance de modle

2. Slectionnez la catgorie Surbrillance dans la liste de gauche.
3. Cliquez dans la case de couleur Rgions modifiables, Rgions modifiables imbriques ou Rgions verrouilles, puis
slectionnez une couleur de surbrillance l'aide de la pipette (ou tapez la valeur hexadcimale correspondant la couleur de
surbrillance dans la zone).
Pour plus d'informations sur l'utilisation du slecteur de couleur, consultez la section Utilisation du slecteur de couleur.
4. (Facultatif) Rptez cette opration pour les autres types de rgion de modle, autant de fois que ncessaire.
5. Cochez la case Afficher pour activer l'affichage des couleurs dans la fentre de document ou dcochez-la pour dsactiver
l'affichage.
Remarque : La case de couleur Rgions modifiables imbriques ne s'accompagne pas de l'option Afficher : l'affichage des
rgions imbriques est en effet contrl par l'option Rgions modifiables.
6. Cliquez sur OK.
Affichage des couleurs de surbrillance dans la fentre de document

Les couleurs de surbrillance apparaissent dans la fentre de document uniquement lorsque l'option Affichage > Assistances visuelles > Elments
621
invisibles est active et que les options appropries sont actives dans les prfrences de surbrillance.
Remarque : Si des lments invisibles apparaissent, mais pas les couleurs de surbrillance, choisissez Edition > Prfrences (Windows) ou
Dreamweaver > Prfrences (Macintosh), puis slectionnez la catgorie Surbrillance. Vrifiez que l'option Afficher est active prs de la couleur de
surbrillance approprie. Vrifiez galement que la couleur souhaite est contraste par rapport la couleur d'arrire-plan de votre page.
Voir aussi
622
Mobiles et crans multiples
623

Vous pouvez utiliser des requtes multimdias pour spcifier des fichiers CSS suivant les caractristiques indiques pour un appareil (conception
ractive). Le navigateur dun appareil vrifie la requte multimdia, puis utilise le fichier CSS correspondant pour afficher la page Web.
Par exemple, la requte multimdia suivante spcifie le fichier phone.css pour les appareils de 300 320 pixels de large.
1
<link href="css/orig/phone.css" rel="stylesheet" type="text/css" media="all and (min-width: 300px) and (maxwidth: 320px)">
Vous trouverez une prsentation dtaille des requtes multimdias dans larticle de Don Booth sur le Ple de dveloppement Adobe, ladresse
www.adobe.com/go/learn_dw_medquery_don_fr.
Pour plus dinformations sur les requtes multimdias sur le site du W3C, voir www.w3.org/TR/css3-mediaqueries/.
Cration dune requte multimdia

Utilisation dun fichier de requtes multimdias existant
Choix dun autre fichier de requtes multimdias lchelle du site
Affichage de pages Web sur la base dune requte multimdia
Voir aussi :
Conception ractive laide de mises en forme grille fluide
Haut de la page
Cration dune requte multimdia

Dans Dreamweaver, vous pouvez crer un fichier de requtes multimdias lchelle du site ou une requte multimdia spcifique au document.
Fichier de requtes multimdias lchelle du site
Spcifie les paramtres daffichage de toutes les pages de votre site qui comprennent ce fichier.
Le fichier de requtes multimdias lchelle du site fait office de dpt central pour toutes les requtes multimdias dans votre site. Aprs avoir
cr ce fichier, crez un lien vers celui-ci partir des pages de votre site qui doivent utiliser les requtes multimdias du fichier pour leur
affichage.
Requte multimdia spcifique au document
La requte multimdia est insre directement dans le document et la page saffiche en fonction de la requte multimdia insre.
1. Crez une page Web.
2. Choisissez Modifier > Requtes multimdias.
Pour crer un fichier de requtes multimdias lchelle du site, choisissez Fichier de requtes multimdias lchelle du
site.
Pour crer une requte multimdia propre au document, choisissez Ce document.
4. Pour une requte multimdia lchelle du site, procdez comme suit :
a. Cliquez sur Spcifier.
b. Choisissez Crer un nouveau fichier.
c. Indiquez le nom du fichier et cliquez sur OK.
5. Il se peut que certains appareils ne communiquent pas leur largeur relle. Pour forcer les appareils communiquer leur
largeur relle, assurez-vous que loption Forcer les appareils communiquer leur largeur relle est active.
Lorsque vous slectionnez cette option, le code suivant est insr dans votre fichier.
624
<meta name="viewport" content="width=device-width">

Cliquez sur + pour dfinir les proprits du fichier de requtes multimdias.
Cliquez sur Paramtres prdfinis par dfaut si vous souhaitez commencer avec des paramtres prdfinis.
7. Slectionnez les lignes du tableau et modifiez leurs proprits laide des options de la section Proprits.
Description Description de lappareil pour lequel le fichier CSS doit tre utilis. Par exemple, tlphone, tlviseur, tablette,
etc.
Largeur min et Largeur max Le fichier CSS est utilis pour les appareils dont la largeur communique figure dans la plage
de valeurs spcifies.
Remarque : laissez la valeur Largeur min ou Largeur max vide si vous ne souhaitez pas spcifier une plage explicite pour un
appareil. Par exemple, il est courant de laisser Largeur min vide si vous travaillez pour des tlphones, qui font 320px de
large ou moins.
Fichier CSS Slectionnez loption Utiliser fichier existant et localisez le fichier CSS pour lappareil.
Si vous souhaitez spcifier un fichier CSS que vous devez encore crer, slectionnez Crer un nouveau fichier. Entrez le nom
du fichier CSS. Le fichier est cr lorsque vous cliquez sur le bouton OK.
8. Cliquez sur OK.
9. Pour une requte multimdia lchelle du site, un nouveau fichier est cr. Enregistrez-le.
Requte multimdia lchelle du site : pour les pages existantes, veillez inclure le fichier de requtes multimdias dans la balise <head> de
toutes les pages.
Exemple de lien de requtes multimdias o mediaquery_adobedotcom.css est le fichier de requtes multimdias lchelle du site pour le site
www.adobe.com :
1
<link href="mediaquery_adobedotcom.css" rel="stylesheet" type="text/css">
Haut de la page
Utilisation dun fichier de requtes multimdias existant

1. Crez une page ou ouvrez une page existante.
2. Choisissez Modifier > Requtes multimdias.
3. Choisissez Fichier de requtes multimdias lchelle du site.
4. Cliquez sur Spcifier.
5. Choisissez loption Utiliser fichier existant si vous avez dj cr un fichier CSS avec la requte multimdia.
6. Cliquez sur licne Parcourir pour atteindre le fichier et le spcifier. Cliquez sur OK.
7. Choisissez Fichier de requtes multimdias lchelle du site.
8. Pour forcer les priphriques communiquer leur largeur relle, assurez-vous que loption Forcer les priphriques
communiquer leur largeur relle est active. Le code suivant est insr dans votre fichier lorsque vous slectionnez cette
option.
1
<meta name="viewport" content="width=device-width">
9. Cliquez sur OK.
Haut de la page
625
Choix dun autre fichier de requtes multimdias lchelle du site

Cette procdure permet de changer le fichier de requtes multimdias lchelle du site que vous avez dfini dans la bote de dialogue Requtes
multimdias.
2. Dans la bote de dialogue Grer les sites, slectionnez votre site.
3. Cliquez sur Edition. La bote de dialogue Configuration du site saffiche.
4. Sous Paramtres avancs dans le panneau de gauche, slectionnez Infos locales.
5. Dans la section Fichier de requtes multimdias lchelle du site du panneau de droite, cliquez sur Parcourir pour
slectionner le fichier CSS de requtes multimdias.
Remarque : le changement de fichier de requtes multimdias lchelle du site na aucune incidence sur les documents lis
un fichier de requtes multimdias lchelle du site diffrent ou prcdent.
Haut de la page
Affichage de pages Web sur la base dune requte multimdia

Les dimensions spcifies dans une requte multimdia apparaissent dans les options Taille de bouton/fentre crans multiples. Lorsque vous
slectionnez une dimension dans le menu, les changements suivants peuvent tre observs :
La taille de laffichage change pour reflter les dimensions spcifies. La taille du cadre du document nest pas modifie.
Le fichier CSS spcifi dans la requte multimdia est utilis pour afficher la page.
626
Modification de lorientation de la page pour les appareils mobiles

Sur les appareils mobiles les plus perfectionns, lorientation dune page change en fonction de la faon dont lappareil est tenu. Lorsque
lutilisateur tient le tlphone verticalement, laffichage emploie lorientation portrait. Lorsque lutilisateur fait pivoter lappareil lhorizontale, la
page sadapte automatiquement lorientation paysage.
Dans Dreamweaver, loption daffichage une page en orientation Portrait ou Paysage est disponible dans les modes Affichage en direct et
Cration. Ces options vous permettent de tester la manire dont votre page sadapte ces paramtres. Ensuite, vous pouvez, si ncessaire,
modifier votre fichier CSS, de sorte que la page saffiche comme prvu dans ces deux orientations.
Slectionnez Affichage > Taille de fentre > Orientation paysage ou Orientation Portrait.
627
Cration d'applications Web pour appareils mobiles (CS5.5)

Voir aussi
http://jquerymobile.com/demos/1.0a3/
http://docs.jquery.com/Downloading_jQuery#CDN_Hosted_jQuery
http://en.wikipedia.org/wiki/Content_delivery_network
http://docs.jquery.com/Downloading_jQuery
628
XML
629
A propos de XML et de XSLT

Utilisation de XML et XSL dans des pages Web
Transformations XSL ct serveur
Transformations XSL ct client
Donnes XML et lments rpts
Affichage d'un aperu des donnes XML
Haut de la page
Utilisation de XML et XSL dans des pages Web
Le langage XML (Extensible Markup Language) permet de structurer les informations. Tout comme HTML, XML utilise des balises pour structurer
les informations, mais les balises XML ne sont pas prdfinies comme c'est le cas des balises HTML. En effet, XML permet de crer des balises
sur mesure, adaptes la structure des donnes (schma). Les balises sont imbriques dans d'autres balises afin de crer un schma de balises
parentes et enfants. Comme la plupart des balises HTML, toutes les balises d'un schma XML comprennent une balise d'ouverture et une balise
de fermeture.
L'exemple suivant illustre la structure de base d'un fichier XML :
1
2
3
4
5
6
7
8
9
10
11
12
13
<?xml version="1.0">
<mybooks>
<book bookid="1">
<pubdate>03/01/2004</pubdate>
<title>Displaying XML Data with Adobe Dreamweaver</title>
<author>Charles Brown</author>
</book>
<book bookid="2">
<pubdate>04/08/2004</pubdate>
<title>Understanding XML</title>
<author>John Thompson</author>
</book>
</mybooks>
Dans cet exemple, chaque balise parente <book> contient trois balises enfants : <pubdate>, <title> et <author>. Toutefois, chaque balise <book>
est elle-mme un enfant de la balise <mybooks>, qui se trouve un niveau hirarchique plus lev du schma. Vous pouvez nommer et structurer
les balises XML votre guise, sous rserve qu'elles soient imbriques en consquence et qu'une balise de fermeture corresponde chaque balise
d'ouverture.
Les documents XML ne contiennent pas d'instructions de formatage, ce sont de simples conteneurs d'informations structures. Aprs avoir cr
un schma XML, vous pouvez utiliser le langage XSL (Extensible Stylesheet Language) pour afficher les informations. Tout comme les feuilles de
style en cascade (CSS) permettent de formater le contenu HTML, le langage XSL permet de formater les donnes XML. Vous pouvez dfinir des
styles, des lments de page, la mise en page, etc. dans un fichier XSL, puis associer celui-ci un fichier XML. Lorsqu'un utilisateur affiche les
donnes XML dans un navigateur, elles sont mises en forme conformment aux lments dfinis dans le fichier XSL. Le contenu (les donnes
XML) et la prsentation (dfinie par le fichier XSL) sont entirement spars, ce qui offre un meilleur contrle sur la faon dont les informations
sont affiches dans une page Web. En bref, le langage XSL constitue une technologie de prsentation pour les donnes XML, la sortie principale
correspondant une page HTML.
Le langage XSLT (Extensible Stylesheet Language Transformations) est un sous-ensemble du langage XSL qui permet d'afficher des donnes
XML sur une page Web et de les transformer , paralllement aux styles XSL, en informations lisibles et mises en forme au format HTML. Vous
pouvez utiliser Dreamweaver pour crer des pages XSLT permettant d'effectuer des transformations XSL dans un serveur d'application ou un
navigateur. Lorsqu'une transformation XSL est effectue sur le serveur, ce dernier prend en charge toutes les oprations de transformation des
donnes XML et XSL et de leur affichage dans la page. Lorsque cette transformation a lieu ct client, c'est le navigateur (par exemple, Internet
Explorer) qui se charge de ces oprations.
La mthode que vous adoptez (transformations ct serveur ou client) dpend du rsultat final que vous souhaitez obtenir, des technologies
votre disposition, du niveau d'accs aux fichiers XML source dont vous disposez et d'autres facteurs. Les deux mthodes prsentent des
avantages et des inconvnients. Les transformations ct serveur, par exemple, grent tous les navigateurs, alors que les transformations ct
client prennent uniquement en charge les navigateurs modernes (Internet Explorer 6, Netscape 8, Mozilla 1.8 et Firefox 1.0.2). Les transformations
ct serveur vous permettent d'afficher les donnes XML dynamiquement partir de votre propre serveur ou de n'importe o sur le Web. En
revanche, les donnes XML utilises par les transformations ct client doivent imprativement tre hberges localement sur votre propre
serveur Web. Enfin, les transformations ct serveur requirent le dploiement des pages sur un serveur d'application configur, tandis que les
transformations ct client exigent uniquement l'accs un serveur Web.
630
Vous trouverez un didacticiel consacr au langage XML l'adresse www.adobe.com/go/vid0165_fr.
Haut de la page
Transformations XSL ct serveur
Dreamweaver propose des mthodes de cration de pages XSLT permettant d'effectuer des transformations XSL ct serveur. Lorsqu'un serveur
d'application effectue la transformation XLS, le fichier contenant les donnes XML peut rsider sur votre propre serveur ou n'importe o sur le
Web. Par ailleurs, tout navigateur peut afficher les donnes transformes. En revanche, le dploiement de pages pour les transformations ct
serveur est plus complexe et ncessite un accs un serveur d'application.
Lorsque vous faites appel des transformations XSL ct serveur, vous pouvez utiliser Dreamweaver pour crer des pages XSLT gnrant des
documents HTML complets (des pages XSLT entires) ou des fragments XSLT gnrant une partie seulement d'un document HTML. Une page
XSLT entire est semblable une page HTML classique. Elle contient une balise <body> et une balise <head>, et permet d'afficher des donnes
HTML et XML sur la page. Un fragment XSLT est un segment de code utilis par un document distinct et qui affiche des donnes XML formates.
A la diffrence d'une page XSLT, un fragment XSLT est un fichier indpendant qui ne contient pas de balises <body> ou <head>. Pour afficher
des donnes XML sur une page distincte, vous pouvez crer une page XSLT entire et la lier vos donnes XML. Si, en revanche, vous
souhaitez afficher les donnes XML dans une section particulire d'une page dynamique existante (par exemple, la page d'accueil dynamique d'un
magasin d'quipement sportif, sur laquelle des scores issus d'un fil RSS sont affichs sur le ct gauche), vous pouvez crer un fragment XSLT et
insrer une rfrence ce fragment dans la page dynamique. La cration de fragments XSLT et leur utilisation avec d'autres pages dynamiques
afin d'afficher des donnes XML constituent le cas de figure le plus courant.
La premire tape de cration de ces types de pages consiste crer le fragment XSLT. il s'agit d'un fichier distinct qui contient la mise en page,
le formatage etc. des donnes XML que vous souhaitez afficher dans la page dynamique. Une fois le fragment XSLT cr, vous insrez une
rfrence ce fichier dans la page dynamique (par exemple, une page PHP ou ColdFusion). Cette rfrence au fragment XSLT a le mme effet
qu'une SSI (Server Side Include) : les donnes XML mises en forme (le fragment) rsident dans un fichier distinct. En mode Cration, un
emplacement rserv au fragment apparat dans la page dynamique. Lorsqu'un navigateur demande la page dynamique qui contient la rfrence
au fragment, le serveur traite l'instruction d'inclusion et cre un nouveau document dans lequel le contenu mis en forme du fragment apparat l o
se trouvait l'emplacement rserv.
1. Le navigateur demande une page dynamique. 2.

Le serveur Web recherche la page et la transmet au serveur d'application. 3. Le serveur d'application recherche des instructions sur la page et
obtient le fragment XSLT. 4. Le serveur d'application procde la transformation (lecture du fragment XSLT, obtention et mise en forme des
donnes XML). 5. Le serveur d'application insre le fragment transform dans la page et le retransfre au serveur Web. 6. Le serveur Web
envoie la page acheve au navigateur.
Pour insrer une rfrence un fragment XSLT dans une page dynamique, utilisez le comportement de serveur Transformation XSL. Lorsque
vous insrez la rfrence, Dreamweaver cre dans le dossier racine du site le sous-dossier includes/MM_XSLTransform/ et y copie un fichier
contenant une bibliothque d'excution. Le serveur d'application utilise les fonctions dfinies dans ce fichier lors de la transformation des donnes
XML spcifies. Le fichier extrait les donnes XML et les fragments XSLT, excute la transformation XSL et affiche le rsultat sur la page Web.
Pour que la page puisse tre affiche correctement, les fichiers contenant respectivement le fragment XSLT, vos donnes XML et la bibliothque
d'excution doivent tous les trois se trouver sur le serveur. (Si vous slectionnez un fichier XML distant comme source de donnes, par exemple
un fil RSS, celui-ci doit bien entendu rsider ailleurs sur Internet.)
Vous pouvez galement utiliser Dreamweaver pour crer des pages XSLT entires utiliser dans les transformations ct serveur. Une page
XSLT entire fonctionne exactement comme un fragment XSLT. Toutefois, lorsque vous insrez la rfrence la page XSLT entire au moyen du
comportement de serveur Transformation XSL, vous insrez le contenu intgral d'une page HTML. Par consquent, vous devez effacer tout le
contenu HTML de la page dynamique (la page .cfm, .php ou .asp qui sert de conteneur) avant d'insrer la rfrence.
Dreamweaver prend en charge les transformations XSL pour les pages ColdFusion, ASP et PHP.
Remarque : Pour excuter des transformations ct serveur, votre serveur doit tre correctement configur. Pour plus d'informations, contactez
l'administrateur de votre serveur.
631
Haut de la page
Transformations XSL ct client
Vous pouvez excuter des transformations XSL sur le client, sans utiliser de serveur d'application. Dreamweaver permet de crer une page XSLT
entire qui se chargera de cette opration. Toutefois, les transformations ct client ncessitent la manipulation du fichier XML contenant les
donnes afficher. Par ailleurs, les transformations ct client utilisent uniquement des navigateurs modernes (Internet Explorer 6, Netscape 8,
Mozilla 1.8 et Firefox 1.0.2). Pour plus d'informations sur les navigateurs qui prennent en charge les transformations XSL, consultez le site
www.w3schools.com/xsl/xsl_browsers.asp.
Crez d'abord une page XLST entire et associez-lui une source de donnes XML. (Dreamweaver vous invite associer la source de donnes
la cration de la page.) Vous pouvez crer une page XSLT entirement nouvelle ou convertir une page HTML existante en page XSLT. Lorsque
vous convertissez une page HTML existante en page XSLT, vous devez lui associer une source de donnes XML au moyen du panneau Liaisons
(Fentre > Liaisons).
Une fois que vous avez cr votre page XSLT, vous devez la lier au fichier .xml qui contient les donnes XML en insrant une rfrence la page
XSLT dans le fichier XML (tout comme vous insrez une rfrence une feuille de style en cascade (CSS) externe dans la section <head> d'une
page HTML). Les visiteurs de votre site doivent consulter le fichier XML (et non la page XSLT) dans un navigateur. Lorsqu'ils affichent la page, le
navigateur excute la transformation XSL et affiche les donnes XML, qui sont mises en forme par la page XSLT lie.
D'un point de vue conceptuel, la relation entre les pages XSLT et XML lies est similaire, tout en tant diffrente, au modle de page CSS
externe/HTML. Lorsqu'une page HTML contient du contenu (tel que du texte), vous utilisez une feuille de style externe pour formater ce contenu.
La page HTML dtermine le contenu, tandis que le code CSS externe, qui est totalement invisible pour l'utilisateur, dtermine la prsentation.
Avec XSLT et XML, la situation est inverse. Le fichier XML (que l'utilisateur ne voit jamais sous forme brute) dtermine le contenu alors que la
page XLST dfinit la prsentation. La page XSLT contient les tableaux, la mise en forme, les graphiques etc. que contient d'ordinaire le code
HTML standard. Lorsqu'un utilisateur affiche le fichier XML dans un navigateur, la page XSLT met le contenu en forme.
1. Le navigateur demande un fichier XML. 2. Le serveur rpond en

envoyant le fichier XML au navigateur. 3. Le navigateur lit la directive XML et appelle le fichier XSLT. 4. Le serveur envoie le fichier XSLT au
navigateur. 5. Le navigateur transforme les donnes XML et les affiche.
Lorsque vous utilisez Dreamweaver pour associer une page XSLT une page XML, Dreamweaver insre le code appropri en haut de la page
XML. Si la page XML lie vous appartient (autrement dit, si le fichier XML rside exclusivement sur votre serveur Web), il vous suffit d'utiliser
Dreamweaver pour insrer le code appropri qui lie les deux pages. Lorsque vous tes le propritaire du fichier XML, les transformations XSL
excutes par le client sont totalement dynamiques. En d'autres termes, toute mise jour des donnes du fichier XML est automatiquement
rpercute sur toute sortie HTML utilisant la page XSLT lie.
Remarque : Les fichiers XML et XSL que vous utilisez dans les transformations ct client doivent rsider dans un mme rpertoire. Si tel n'est
pas le cas, le navigateur lit le fichier XML et trouve la page XLST utiliser pour la transformation, mais ne peut pas localiser les actifs (feuilles de
style, images etc.) dfinis par les liens relatifs dans la page XSLT.
Si la page XML lie ne vous appartient pas (si, par exemple, vous souhaitez utiliser des donnes XML provenant d'un fil RSS sur le Web), le
processus est lgrement plus compliqu. Pour excuter des transformations ct client utilisant des donnes XML issues d'une source externe,
vous devez d'abord tlcharger le fichier XML source dans le rpertoire contenant votre page XSLT. Une fois la page XML sur votre site local,
vous pouvez utiliser Dreamweaver pour ajouter le code appropri afin de la lier la page XSLT et envoyer les deux pages (la page XML
tlcharge et la page XSLT lie) votre serveur Web. Lorsque l'utilisateur affiche la page XML dans un navigateur, la page XSLT met le contenu
en forme, tout comme dans l'exemple prcdent.
Les transformations XLS ct client de donnes XML provenant d'une source externe prsentent toutefois un inconvnient : les donnes XML ne
sont que partiellement dynamiques . Le fichier XML que vous tlchargez et modifiez est un simple instantan du fichier qui rside autre
part sur le Web. Si le fichier XML d'origine change sur le Web, vous devez nouveau le tlcharger, le lier la page XSLT et envoyer le fichier
XML votre serveur Web. Le navigateur assure uniquement le rendu des donnes qu'il reoit du fichier XML sur votre serveur Web, non des
632
donnes que contient le fichier XML source d'origine.
Haut de la page
Donnes XML et lments rpts
L'objet XSLT Rgion rpte permet d'afficher sur une page des lments rpts provenant d'un fichier XML. Toute zone contenant un
emplacement rserv pour donnes XML peut tre convertie en rgion rpte. Les zones les plus courantes sont les tableaux, les lignes de
tableau ou les sries de lignes de tableau.
L'exemple ci-dessous indique comment l'objet XSLT Rgion rpte s'applique une ligne de tableau qui affiche le menu d'un restaurant. La ligne
initiale contient trois lments diffrents du schma XML : item (plat), description et price (prix). Lorsque l'objet XSLT Rgion rpte est appliqu
la ligne et que la page est traite par un serveur d'application, le tableau est rpt et des donnes uniques sont insres dans chaque nouvelle
ligne.
Lorsque vous appliquez un objet XSLT Rgion rpte un lment dans la fentre de document, un contour fin de couleur grise dlimite la
rgion rpte. Lors de l'affichage de l'aperu dans un navigateur (Fichier > Aperu dans le navigateur), le contour gris disparat et la slection est
dveloppe pour afficher les lments rpts spcifis dans le fichier XML, comme illustr ci-dessus.
Lorsque vous ajoutez l'objet XSLT Rgion rpte la page, la longueur de l'emplacement rserv aux donnes XML dans la fentre de
document est rduite. En effet, Dreamweaver met jour le chemin XPath (XML Path language) de l'espace rserv aux donnes XML afin qu'il
soit relatif au chemin de l'lment rpt.
Le code suivant, par exemple, cre un tableau contenant deux espaces rservs dynamiques, sans appliquer d'objet XSLT Rgion rpte au
tableau:
1
2
3
4
5
6
7
8
<table width="500" border="1">

<tr>
<td><xsl:value-of select="rss/channel/item/title"/></td>
</tr>
<tr>
<td><xsl:value-of select="rss/channel/item/description"/></td>
</tr>
</table>
Le code suivant cre le mme tableau et lui applique l'objet XSLT Rgion rpte :
1
2
3
4
5
6
7
<xsl:for-each select="rss/channel/item">
<table width="500" border="1">
<tr>
<td><xsl:value-of select="title"/></td>
</tr>
<tr>
<td><xsl:value-of select="description"/></td>
633
8
9
10
</tr>
</table>
</xsl:for-each>
Dans l'exemple ci-dessus, Dreamweaver a mis jour le chemin XPath des lments qui sont compris dans la rgion rpte (title et description)
afin qu'il soit relatif au chemin XPath qui figure entre les balises <xsl:for-each>, plutt qu'au document entier.
Dreamweaver gnre galement des expressions XPath relatives au contexte dans d'autres cas. Si, par exemple, vous faites glisser un espace
rserv pour donnes XML vers un tableau auquel un objet Rgion rpte est dj appliqu, Dreamweaver affiche automatiquement un chemin
XPath relatif au chemin XPath existant qui figure entre les balises <xsl:for-each>.
Haut de la page
Affichage d'un aperu des donnes XML
Lorsque vous utilisez l'option Aperu dans le navigateur (Fichier > Aperu dans le navigateur) pour afficher un aperu des donnes XML que vous
avez insres dans un fragment XSLT ou une page XSLT entire, le moteur qui excute la transformation XSL varie d'une situation l'autre. Pour
les pages dynamiques contenant des fragments XSLT, c'est toujours le serveur d'application qui excute la transformation. Dans d'autres cas,
c'est soit Dreamweaver, soit le navigateur qui s'en charge.
Le tableau suivant passe en revue les cas de figure dans lesquels l'option Aperu dans le navigateur est utilise et indique le moteur qui excute
les transformations respectives :
Type de page affiche dans le navigateur
Moteur excutant la transformation des donnes
Page dynamique contenant un fragment XSLT
Serveur d'application
Fragment XSLT ou page XSLT entire
Dreamweaver
Fichier XML li une page XSLT entire
Navigateur
Les rubriques suivantes vous permettent de dterminer la mthode d'aperu adapte vos besoins:
Aperu de pages pour des transformations ct serveur
Dans le cas de transformations ct serveur, le contenu que le visiteur du site affiche est transform par votre serveur d'application. Lors de la
gnration de fragments XSLT et de pages dynamiques utiliser dans des transformations ct serveur, il est toujours prfrable d'effectuer un
aperu de la page dynamique qui contient le fragment XSLT, plutt que de ce dernier. Dans le premier cas, vous utilisez le serveur d'application et
avez ainsi la garantie que votre aperu reprsente le contenu qui s'affichera lorsque les visiteurs de votre site consulteront votre page. Dans le
deuxime cas, Dreamweaver excute la transformation et les rsultats ne sont pas ncessairement garantis. Vous pouvez utiliser Dreamweaver
pour afficher un aperu du fragment XSLT pendant que vous le crez, mais pour obtenir un rendu prcis des donnes, utilisez plutt le serveur
d'application pour afficher un aperu de la page dynamique aprs y avoir insr le fragment XSLT.
Aperu de pages pour des transformations ct client
Dans le cas de transformations ct client, le contenu que le visiteur du site affiche est transform par un navigateur. Pour ce faire, vous liez le
fichier XML la page XSLT. Si vous ouvrez le fichier XML dans Dreamweaver et en affichez un aperu dans un navigateur, c'est ce dernier qui
doit charger le fichier XML et excuter la transformation. Vous obtenez donc le mme rsultat que le visiteur de votre site.
Cette mthode prsente toutefois un inconvnient : il vous en effet plus difficile de dboguer votre page car le navigateur transforme le fichier XML
et gnre le contenu HTML en interne. Si vous slectionnez l'option Afficher la source du navigateur pour dboguer le contenu HTML gnr,
vous avez uniquement accs au code XML que le navigateur a reu l'origine et non la totalit du code HTML (balises, styles, etc.) qui a
effectu le rendu de la page. Pour afficher la totalit du code HTML lorsque vous consultez le code source, vous devez effectuer l'aperu de la
page XSLT dans un navigateur.
Aperu de pages XSLT entires et de fragments XSLT
Lorsque vous crez des pages XSLT entires et des fragments XSLT, il est souhaitable d'afficher un aperu de votre travail pour vous assurer
que les donnes s'affichent correctement. Si vous utilisez l'option Aperu dans le navigateur pour afficher une page XSLT entire ou un fragment
XSLT, Dreamweaver excute la transformation au moyen d'un moteur de transformation intgr. Cette mthode garantit des rsultats rapides et
vous permet de facilement gnrer et de dboguer votre page au fur et mesure. Elle vous permet aussi d'afficher la totalit du code HTML
(balises, styles, etc.) par le biais de l'option Afficher la source du navigateur.
Remarque : Cette mthode d'aperu est couramment utilise lorsque vous commencez gnrer des pages XSLT, que vous utilisiez le client ou
le serveur pour transformer vos donnes.
Voir aussi
Didacticiel consacr XML
634
635
Excution de transformations XSL sur le serveur

Processus d'excution des transformations XSL ct serveur
Cration d'une page XSLT
Conversion des pages HTML en pages XSLT
Association de sources de donnes XML
Affichage des donnes XML dans des pages XSLT
Affichage des lments rpts XML
Insertion de fragments XSLT dans des pages dynamiques
Suppression de fragments XSLT de pages dynamiques
Modification des comportements de serveur Transformation XLS
Cration d'un lien dynamique
Application de styles aux fragments XSLT
Utilisation des paramtres avec des transformations XSL
Cration et modification des rgions XSLT conditionnelles
Insertion de commentaires XSL
Utilisation du Crateur d'expressions XPath pour ajouter des expressions pour les donnes XML
Processus d'excution des transformations XSL ct serveur
Haut de la page
Vous pouvez excuter des transformations XLS ct serveur sur le serveur. Informez-vous sur les transformations XSL ct client et ct serveur
et sur l'utilisation de XML et de XSL avec les pages Web avant de crer des page affichant des donnes XML.
Remarque : Pour excuter des transformations ct serveur, votre serveur doit tre correctement configur. Pour plus d'informations, contactez
l'administrateur de votre serveur.
Le droulement gnral de l'excution des transformations XSL ct serveur est le suivant (chaque tape individuelle est dcrite dans d'autres
rubriques) :
1. Crez un site Dreamweaver.
2. Choisissez une technologie de serveur et configurez un serveur d'application.
3. Testez le serveur d'application.
Vous pouvez par exemple crer une page traiter et vous assurer que le serveur d'application effectue l'opration requise.
4. Crez un fragment ou une page XSLT, ou convertissez une page HTML en page XSLT.
Sur votre site Dreamweaver, crez un fragment XSLT ou une page XSLT entire.
Convertissez une page HTML existante en une page XSLT entire.
5. Associez une source de donnes XML la page.
6. Affichez les donnes XML en les liant au fragment XSLT ou la page XSLT entire.
7. Si cela s'impose, ajoutez un objet XSLT Rgion rpte au tableau ou la ligne de tableau contenant les espaces
rservs pour donnes XML.
8. Insrez des rfrences.
Pour insrer une rfrence au fragment XSLT dans votre page dynamique, utilisez le comportement de serveur
Transformation XSL.
Pour insrer une rfrence la page XSLT dans la page dynamique, supprimez tout le code HTML de la page dynamique,
puis utilisez le comportement de serveur Transformation XSL.
9. Envoyez la page et le fragment.
Envoyez la page dynamique et le fragment XSLT (ou la page XSLT entire) votre serveur d'application. Si vous utilisez un fichier XML local,
envoyez-le galement.
636
10. Affichez la page dynamique dans un navigateur.

Le serveur d'application transforme alors les donnes XML, les insre dans la page dynamique et les affiche dans le navigateur.
Haut de la page
Cration d'une page XSLT
Les pages XSLT permettent d'afficher des donnes XML sur des pages Web. Vous pouvez crer soit une page XSLT entire (une page XSLT
contenant une balise <body> et une balise <head>), soit un fragment XSLT. Lorsque vous crez un fragment XSLT, vous crez en fait un fichier
indpendant qui ne contient pas de balise body ni head, mais simplement du code qui sera ensuite insr dans une page dynamique.
Remarque : Si vous utilisez une page XSLT existante et devez lui associer une source de donnes XML.
2. Dans la catgorie Page vierge de la bote de dialogue Nouveau document, slectionnez l'une des options suivantes dans la
colonne Type de page :
Slectionnez XSLT (page entire) pour crer une page XSLT entire.
Slectionnez XSLT (Fragment) pour crer un fragment XSLT.
3. Cliquez sur Crer et effectuez l'une des actions suivantes dans la bote de dialogue Localiser source XML :
Choisissez Associer un fichier local, cliquez sur le bouton Parcourir, recherchez le fichier XML local sur votre ordinateur et
cliquez sur OK.
Choisissez Associer un fichier distant, indiquez l'adresse URL d'un fichier XML sur Internet (par exemple un fil RSS), puis
cliquez sur OK.
Remarque : Cliquer sur le bouton Annuler entrane la gnration d'une nouvelle page XSLT laquelle aucune source de
donnes XML n'est associe.
Le schma de votre source de donnes XML s'affiche dans le panneau Liaisons.
Le tableau suivant dcrit les diffrents lments que le schma est susceptible de contenir.
Elment
Reprsente
Dtails
<>
Elment XML non

rpt obligatoire
Elment qui apparat une fois seulement au sein de son

nud parent
<>+
Elment XML
rpt
Elment qui apparat une ou plusieurs fois au sein de son

nud parent
<>+
Elment XML
facultatif
Elment qui apparat zro ou plusieurs fois au sein de son

nud parent
Nud
d'lment en
gras
Elment contextuel
en cours
En rgle gnrale, l'lment rpt lorsque le point

d'insertion se trouve au sein d'une rgion rpte
Attribut XML
4. Enregistrez la nouvelle page (Fichier > Enregistrer) en lui attribuant l'extension .xsl ou .xslt (l'extension par dfaut est .xsl).
Haut de la page
Conversion des pages HTML en pages XSLT
Vous pouvez aussi convertir des pages HTML existantes en pages XSLT. Si, par exemple, vous disposez d'une page statique prdfinie
637
laquelle vous souhaitez ajouter des donnes XML, vous pouvez la convertir en page XSLT, plutt que de crer une page XSLT et de la redfinir
entirement.
1. Ouvrez la page HTML convertir.
2. Slectionnez Fichier > Convertir > XSLT 1.0.
Une copie de la page s'ouvre dans la fentre de document. La nouvelle page est une feuille de style XSL, enregistre avec
l'extension .xsl.
Haut de la page
Association de sources de donnes XML
Si vous utilisez une page XSLT existante ou si vous en crez une dans Dreamweaver sans lui associer de source de donnes XML, vous devez
utiliser le panneau Liaisons pour associer une source de donnes XML.
1. Dans le panneau Liaisons (Fentre > Liaisons), cliquez sur la liaison XML.
Remarque : Pour ajouter une source de donnes XML, vous pouvez aussi cliquer sur le lien Source, dans le coin suprieur
droit du panneau Liaisons.
Choisissez Associer un fichier local, cliquez sur le bouton Parcourir, recherchez le fichier XML local sur votre ordinateur et
cliquez sur OK.
Choisissez Associer un fichier distant, puis indiquez l'adresse URL d'un fichier XML sur Internet (par exemple un fil RSS).
3. Cliquez sur OK pour fermer la bote de dialogue Localiser source XML.
Le schma de votre source de donnes XML s'affiche dans le panneau Liaisons.
Affichage des donnes XML dans des pages XSLT
Haut de la page
Aprs avoir cr une page XSLT et lui avoir associ une source de donnes XML, vous pouvez lier des donnes la page. Pour ce faire, vous
ajoutez un emplacement rserv pour donnes XML dans votre page, puis vous utilisez le Crateur d'expression XPATH ou l'inspecteur
Proprits pour mettre en forme les donnes slectionnes qui vont s'afficher dans la page.
1. Ouvrez une page XSLT laquelle est associe une source donnes XML.
2. (Facultatif) Choisissez Insertion > Tableau pour ajouter un tableau la page. Un tableau permet d'organiser plus aisment les
donnes XML.
Remarque : En rgle gnrale, il est conseill d'utiliser l'objet XSLT Rgion rpte pour afficher des lments XML rpts
sur une page. Dans ce cas, vous pouvez crer un tableau d'une seule ligne avec une ou plusieurs colonnes, ou un tableau de
deux lignes si vous avez l'intention d'insrer un en-tte.
3. Dans le panneau Liaisons, slectionnez un lment XML et faites-le glisser jusqu' l'emplacement o vous souhaitez insrer
des donnes sur la page.
638
Un espace rserv pour donnes XML est cr sur la page. Cet espace rserv est en surbrillance et encadr d'accolades. Il
utilise la syntaxe XPath (XML Path Language) pour dcrire la structure hirarchique du schma XML. Par exemple, si vous
faites glisser l'lment enfant title sur la page, et si ses lments parents sont rss, channel et item, la syntaxe de l'espace
rserv dynamique sera \{rss/channel/item/title\}.
Double-cliquez sur l'emplacement rserv des donnes XML dans la page pour ouvrir le Crateur d'expression XPATH. Le
Crateur d'expression XPATH permet de mettre les donnes slectionnes en forme ou de slectionner d'autres lments
dans le schma XML.
4. (Facultatif) Pour affecter des styles vos donnes XML, slectionnez un espace rserv pour donnes XML et appliquez-lui
des styles, comme s'il s'agissait d'un autre segment de contenu, l'aide de l'inspecteur Proprits ou du panneau Styles CSS.
Pour appliquer des styles aux fragments XSLT, vous pouvez aussi utiliser des feuilles de style au moment de la cration.
Chacune de ces mthodes prsente des avantages et des inconvnients.
5. Vrifiez le rsultat dans un navigateur (Fichier > Aperu dans le navigateur).
Remarque : Lorsque vous utilisez la fonctionnalit Aperu dans le navigateur, Dreamweaver effectue une transformation XSL
en interne, sans faire appel un serveur d'application.
Haut de la page
Affichage des lments rpts XML
L'objet XSLT Rgion rpte permet d'afficher sur une page Web des lments rpts provenant d'une source de donnes XML. Par exemple, si
vous affichez des titres et descriptions d'articles partir d'un fil d'informations contenant entre 10 et 20 articles, chaque titre et chaque description
du fichier XML est probablement un lment enfant d'un lment rpt.
En mode cration, toute rgion contenant un emplacement rserv pour donnes XML peut tre convertie en rgion rpte. Toutefois, les zones
les plus frquentes sont les tableaux, les lignes de tableau ou une srie de lignes de tableau.
1. En mode Cration, slectionnez une rgion comportant un ou plusieurs espaces rservs pour donnes XML.
La slection peut tre de tout type, notamment tableau, ligne de tableau ou mme paragraphe de texte.
Pour slectionner prcisment une rgion sur une page, vous pouvez utiliser le slecteur de balises dans le coin infrieur
gauche de la fentre de document. Par exemple, si la rgion correspond un tableau, cliquez dans ce tableau, puis cliquez
sur la balise dans le slecteur de balises.
2. Effectuez l'une des actions suivantes :
Choisissez Insertion > Objets XSLT > Rgion rpte.
639
Dans la catgorie XSLT du panneau Insertion, cliquez sur le bouton Rgion rpte.
3. Dans le Crateur d'expression XPATH, slectionnez l'lment rpt (il est indiqu par un signe plus de petite taille).
4. Cliquez sur OK.

Dans la fentre de document, un contour fin de couleur grise dlimite la rgion rpte. Lors de l'affichage de l'aperu dans
un navigateur (Fichier > Aperu dans le navigateur), le cadre gris disparat et la slection est dveloppe pour afficher les
lments rpts spcifis dans le fichier XML.
Lorsque vous ajoutez l'objet XSLT Rgion rpte la page, l'emplacement rserv pour donnes XML dans la fentre de
document est tronqu. En effet, Dreamweaver met jour le chemin XPath de l'espace rserv pour donnes XML afin qu'il
soit relatif au chemin de l'lment rpt.
Dfinition des proprits des rgions rptes (XSL)

L'inspecteur Proprits permet de slectionner un autre nud XML rpter pour crer la rgion rpte.
Dans la zone Slection, tapez un nouveau nud, puis appuyez sur l'icne en forme d'clair et slectionnez le nud dans l'arborescence de
schma XML qui apparat.
Modification d'un objet XSLT Rgion rpte

Aprs avoir insr un objet XSLT Rgion rpte dans une rgion, vous pouvez le modifier l'aide de l'inspecteur Proprits.
1. Slectionnez l'objet voulu en cliquant dans le cadre gris qui entoure la rgion rpte.
2. Dans l'inspecteur Proprits (Fentre > Proprits), cliquez sur l'icne dynamique situe en regard de la zone de texte
Slection.
3. Dans le Crateur d'expression XPATH, effectuez les modifications ncessaires et cliquez sur OK.
Insertion de fragments XSLT dans des pages dynamiques
Haut de la page
Aprs avoir cr un fragment XSLT, vous pouvez l'insrer dans une page Web dynamique l'aide du comportement de serveur Transformation
XSL. Lorsque vous insrez ce comportement de serveur dans une page et affichez celle-ci dans un navigateur, un serveur d'application effectue
une transformation qui affiche les donnes XML du fragment XSLT slectionn. Dreamweaver prend en charge les transformations XSL pour les
pages ColdFusion, ASP et PHP.
Remarque : La procdure d'insertion du contenu d'une page XSLT entire dans une page dynamique est identique. Avant d'utiliser le
comportement de serveur Transformation XSL pour insrer la page XSLT entire, supprimez tout le code HTML de la page dynamique.
1. Ouvrez une page ColdFusion, ASP ou PHP.
2. En mode Cration, placez le curseur l o vous voulez insrer le fragment XSLT.
Remarque : Lors de l'insertion de fragments XSLT, vous devez toujours cliquer sur le bouton Afficher les modes Code et
Cration aprs avoir plac le point d'insertion sur la page, de faon s'assurer que le point d'insertion est l'emplacement
voulu. S'il n'y est pas, cliquez de nouveau dans l'cran Code pour placer le point d'insertion l'endroit voulu.
3. Dans le panneau Comportements de serveur (Fentre > Comportements de serveur), cliquez sur le bouton Plus (+), puis
choisissez Transformation XSL.
640
4. Dans la bote de dialogue Transformation XSL, cliquez sur le bouton Parcourir et recherchez un fragment XSLT ou une page
XSLT entire.
Dreamweaver renseigne le champ de texte suivant avec le chemin d'accs ou l'adresse URL du fichier XML associ ce
fragment. Pour modifier le contenu de ce champ, cliquez sur le bouton Parcourir et slectionnez un autre fichier.
5. (Facultatif) Cliquez sur le bouton Plus (+) pour ajouter un paramtre XSLT.
6. Cliquez sur OK pour insrer une rfrence au fragment XSLT dans la page. Il n'est pas possible de modifier ce fragment. Si
ncessaire, double-cliquez sur le fragment pour ouvrir son fichier source et le modifier.
Un sous-dossier includes/MM_XSLTransform/ contenant un fichier contenant une bibliothque d'excution est galement cr
dans le dossier racine du site. Le serveur d'application utilise les fonctions dfinies dans ce fichier lors de la transformation.
7. Transfrez la page dynamique votre serveur (Site > Placer) et cliquez sur Oui pour inclure les fichiers dpendants. Pour que
la page puisse tre affiche correctement, les fichiers contenant respectivement le fragment XSLT, vos donnes XML et la
bibliothque d'excution doivent tous les trois se trouver sur le serveur. (Si vous slectionnez un fichier XML distant comme
source de donnes, celui-ci doit bien entendu rsider ailleurs sur Internet.)
Suppression de fragments XSLT de pages dynamiques
Haut de la page
Pour supprimer un fragment XSLT d'une page, supprimez le comportement de serveur Transformation XSL qui a permis d'insrer le fragment. La
suppression de ce comportement de serveur supprime uniquement le fragment XSLT ; les fichiers associs (XML, XSLT ou bibliothque
d'excution) ne sont pas affects.
1. Dans le panneau Comportements de serveur (Fentre > Comportements de serveur), slectionnez le comportement de
serveur Transformation XSL supprimer.
Remarque : Vous devez toujours utiliser cette mthode pour supprimer un comportement de serveur. En effet, la suppression
manuelle du code correspondant ne supprime que partiellement le comportement de serveur, mme si celui-ci disparat bien
du panneau Comportements de serveur.
Modification des comportements de serveur Transformation XLS
Haut de la page
Aprs avoir ajout un fragment XSLT une page Web dynamique, vous pouvez tout moment modifier le comportement de serveur
Transformation XSL.
1. Dans le panneau Comportements de serveur (Fentre > Comportements de serveur), double-cliquez sur le comportement de
serveur Transformation XLS modifier.
2. Effectuez les modifications requises, puis cliquez sur OK.
Haut de la page
641
Cration d'un lien dynamique

Vous pouvez crer un lien dynamique dans votre page XSLT qui tablit un lien vers une URL spcifique lorsque l'utilisateur clique sur un mot ou
un groupe de mots spcifi dans vos donnes XML. Pour plus d'informations, consultez les listes d'erreurs Dreamweaver l'adresse
www.adobe.com/go/dw_documentation_fr.
Haut de la page
Application de styles aux fragments XSLT
Lorsque vous crez une page XSLT entire (autrement dit, une page XSLT qui contient des balises <body> et <head>), vous pouvez afficher les
donnes XML sur la page, puis les mettre en forme comme tout autre contenu l'aide de l'inspecteur Proprits ou du panneau Styles CSS.
Lorsque vous crez un fragment XSLT pour l'insertion dans une page dynamique, tel qu'un fragment insrer dans une page ASP, PHP ou Cold
Fusion), le rendu des styles du fragment et de la page dynamique devient plus compliqu. Bien que le fragment XSLT soit trait de faon
indpendante par rapport la page dynamique, il est important de conserver l'esprit que le fragment est conu pour cette page dynamique et
que le code renvoy par le fragment XSLT sera plac quelque part entre les balises <body> de la page dynamique. Etant donn ce processus, il
est important de s'assurer qu'aucun lment <head> (tel que des dfinitions de style ou des liens vers des feuilles de style externes) n'est inclus
dans des fragments XSLT. Sinon, le serveur d'application place ces lments dans la section <body> de la page dynamique, ce qui dbouche sur
un marquage non valide.
Vous pouvez, par exemple, dcider de crer un fragment XSLT insrer dans une page dynamique et le mettre en forme au moyen de la mme
feuille de style externe que la page dynamique. Si vous attachez la mme feuille de style au fragment, la page HTML rsultante contient un lien en
double la feuille de style (un dans la section <head> de la page dynamique et un autre dans la section <body> de la page, l o le contenu du
fragment XSLT apparat). Une meilleure faon de procder consiste utiliser des feuilles de style la conception pour rfrencer la feuille de style
externe.
Lors du formatage du contenu des fragments XSLT, utilisez la procdure suivante :
Tout d'abord, attachez une feuille de style externe la page dynamique. (Cette procdure reprend les meilleures pratiques
d'application des styles au contenu d'une page Web.)
Ensuite, attachez la mme feuille de style externe au fragment XSLT en tant que feuille de style la conception. Comme leur
nom l'indique, les feuilles de style la conception fonctionnent uniquement en mode Cration dans Dreamweaver.
Une fois les deux tapes prcdentes termines, vous pouvez crer de nouveaux styles dans votre fragment XSLT l'aide de
la feuille de style qui a t associe votre page dynamique. Vous obtiendrez un code HTML mieux structur (dans la mesure
o la rfrence la feuille de style n'est valide que dans Dreamweaver) et le fragment affichera toujours les styles requis en
mode Cration. De plus, tous vos styles sont appliqus au fragment et la page dynamique lorsque vous affichez cette
dernire en mode Cration ou en affichez un aperu dans un navigateur.
Remarque : Si vous demandez un aperu du fragment XSLT dans un navigateur, ce dernier n'affiche pas les styles. Par
contre, vous devez afficher un aperu de la page dynamique dans le navigateur afin de consulter le fragment XSLT dans le
contexte de la page dynamique.
Utilisation des paramtres avec des transformations XSL
Haut de la page
Lorsque vous ajoutez le comportement de serveur Transformation XLS une page Web, vous pouvez dfinir des paramtres de transformation
XSL. Un paramtre contrle la faon dont les donnes XML sont traites et affiches. Par exemple, vous pouvez utiliser un paramtre pour
identifier et afficher un article spcifique d'un fil d'informations. Lorsque la page est charge dans un navigateur, seul l'article spcifi par le
paramtre est affich.
Ajout d'un paramtre XSLT une transformation XSL

1. Ouvrez la bote de dialogue Transformation XSL. Pour ce faire, double-cliquez sur un comportement de serveur
Transformation XLS dans le panneau Comportements de serveur (Fentre > Comportements de serveur), ou ajoutez un
nouveau comportement de serveur Transformation XLS.
2. Dans la bote de dialogue Transformation XSL, cliquez sur le bouton Plus (+) ct du libell Paramtres XSLT.
3. Dans la bote de dialogue Ajouter un paramtre, tapez un nom pour le paramtre dans la zone Nom. Ce nom ne peut
comporter que des caractres alphanumriques, et il ne doit pas contenir d'espace.
642

Pour utiliser une valeur statique, saisissez-la dans la zone Valeur.
Pour utiliser une valeur dynamique, cliquez sur l'icne Dynamique ct de la zone Valeur, renseignez la bote de
dialogue Donnes dynamiques et cliquez sur le bouton OK. Pour plus d'informations, cliquez sur le bouton Aide de la bote
de dialogue Donnes dynamiques.
5. Dans la zone Valeur par dfaut, indiquez la valeur que le paramtre doit utiliser si la page ne reoit aucune valeur lors de son
excution, puis cliquez sur OK.
Modification d'un paramtre XSLT

2. Slectionnez un paramtre dans la liste des paramtres XSLT.
3. Cliquez sur le bouton Modifier.
4. Effectuez les modifications requises, puis cliquez sur OK.
Suppression d'un paramtre XSLT

2. Slectionnez un paramtre dans la liste des paramtres XSLT.
Cration et modification des rgions XSLT conditionnelles
Haut de la page
Vous pouvez crer des rgions conditionnelles simples ou multiples sur une page XSLT. Vous pouvez soit slectionner un lment en mode
Cration, puis appliquer une rgion conditionnelle la slection, soit insrer une rgion conditionnelle l'emplacement du point d'insertion dans le
document.
Supposons que vous souhaitiez afficher l'expression Non disponible en regard du prix d'un article lorsque celui-ci est en rupture de stock. Pour
ce faire, vous tapez l'expression Non disponible sur la page, la slectionnez et lui appliquez une rgion conditionnelle. Dreamweaver entoure
l'expression des balises <xsl:if> et affiche uniquement le mot Non disponible sur la page lorsque les donnes rpondent aux conditions
dfinies par l'expression conditionnelle.
Application d'une rgion XSLT conditionnelle

Vous pouvez rdiger une expression conditionnelle simple insrer dans votre page XSLT. Tout contenu slectionn l'ouverture de la bote de
dialogue Rgion conditionnelle est entour d'un bloc <xsl:if>. Si aucun contenu n'est slectionn, le bloc <xsl:if> est entr au point d'insertion. Il est
judicieux d'utiliser cette bote de dialogue pour dmarrer, puis de personnaliser l'expression en mode Code.
L'lment <xsl:if> est similaire l'instruction if d'autres langages. Il a pour fonction de tester une condition et de dclencher une action en fonction
du rsultat. L'lment <xsl:if> vous permet de tester si une expression est vraie ou fausse.
1. Choisissez Insertion > Objets XSLT > Rgion conditionnelle, ou cliquez sur l'icne Rgion conditionnelle de la catgorie XSLT
2. Dans la bote de dialogue Rgion conditionnelle, entrez l'expression conditionnelle utiliser pour la rgion.
L'exemple suivant vrifie si la valeur de l'attribut @available du nud contextuel correspond true (vrai).
3. Cliquez sur OK.

Le code suivant est insr dans votre page XSLT :
643
1
2
3
<xsl:if test="@available='true'">
Content goes here
</xsl:if>
Remarque : Vous devez placer les valeurs de chane telles que true entre guillemets. Dreamweaver code les guillemets (')
votre intention, afin qu'elles apparaissent dans un format XHTML valide.
Outre tester des nuds pour des valeurs, vous pouvez utiliser toute fonction XSLT prise en charge dans votre instruction
conditionnelle. La condition est teste pour le nud en cours de votre fichier XML. L'exemple suivant teste le dernier nud
des rsultats :
Pour plus d'informations et des exemples concernant l'criture d'expressions conditionnelles, consultez la section <xsl:if> du
panneau Rfrences (Aide > Rfrence).
Application de rgions XSLT conditionnelles multiples

Vous pouvez rdiger une expression conditionnelle simple insrer dans votre page XSLT. Tout contenu slectionn l'ouverture de la bote de
dialogue Rgion conditionnelle est entour d'un bloc <xsl:choose>. Si vous ne slectionnez pas de contenu, le bloc <xsl:choose> est entr au
point d'insertion. Il est judicieux d'utiliser cette bote de dialogue pour dmarrer, puis de personnaliser l'expression en mode Code.
L'lment <xsl:choose> est similaire l'instruction case d'autres langages. Il a pour fonction de tester une condition et de dclencher une action
en fonction du rsultat. L'lment <xsl:choose> vous permet de tester plusieurs conditions.
1. Choisissez Insertion > Objets XSLT > Rgion conditionnelle multiple, ou cliquez sur l'icne Rgion conditionnelle multiple de
la catgorie XSLT du panneau Insertion.
2. Entrez la premire condition dans la bote de dialogue Rgion conditionnelle multiple.
L'exemple suivant vrifie si la valeur du sous-lment price du nud contextuel est infrieure 5.
3. Cliquez sur OK.

Le code suivant est insr dans votre page XSLT :
1
2
3
4
5
6
7
8
<xsl:choose>
<xsl:when test="price<5">
Content goes here
</xsl:when>
<xsl:otherwise>
Content goes here
</xsl:otherwise>
</xsl:choose>
4. Pour insrer une autre condition, placez le point d'insertion en mode Code entre les paires de balises <xsl:when> ou juste
avant la balise <xsl:otherwise>, puis insrez une rgion conditionnelle (Insertion > Objets XSLT > Rgion conditionnelle).
Une fois que vous avez spcifi la condition et cliqu sur OK, une autre balise <xsl:when> est insre dans le bloc
<xsl:choose>.
644
Pour plus d'informations et des exemples concernant l'criture d'expressions conditionnelles, consultez les sections
<xsl:choose> du panneau Rfrences (Aide > Rfrence).
Dfinition des proprits des rgions conditionnelles (If)

L'inspecteur de dfinition des proprits des rgions conditionnelles permet de modifier la condition utilise dans une rgion conditionnelle dans
votre page XSL. La rgion conditionnelle teste la condition et dclenche une action en fonction du rsultat.
Dans la zone Test, tapez une nouvelle condition et appuyez sur Entre.
Dfinition des proprits conditionnelles (When)

L'inspecteur de dfinition des proprits des rgions conditionnelles permet de modifier la condition utilise dans une rgion conditionnelle multiple
dans votre page XSL. La rgion conditionnelle multiple teste la condition et dclenche une action en fonction du rsultat.
Dans la zone Test, tapez une nouvelle condition et appuyez sur Entre.
Haut de la page
Insertion de commentaires XSL
Vous pouvez ajouter des balises de commentaires XSL un document ou vous pouvez entourer une slection de balises de commentaires XSL.
Ajout de balises de commentaires XSL un document

En mode Cration, slectionnez Insertion > Objets XSLT > Commentaires XSL, tapez les commentaires (ou ne remplissez pas
la zone), puis cliquez sur OK.
En mode Code, slectionnez Insertion > Objets XSLT > Commentaires XSL.
Vous pouvez galement cliquer sur l'icne Commentaire XSL de la catgorie XSLT du panneau Insertion.
Placement d'une slection entre balises de commentaires XSLT

1. Basculez en mode Code (Affichage > Code).
2. Slectionnez le code auquel vous souhaitez ajouter des commentaires.
3. Dans la barre d'outils de codage, cliquez sur le bouton Appliquer commentaire et slectionnez Appliquer commentaire
<xsl:comment></xsl:comment>.
Utilisation du Crateur d'expressions XPath pour ajouter des expressions pour les donnes
XML
Haut de la page
XPath (XML Path Language) est une syntaxe non XML destine traiter des parties d'un document XML. Elle est essentiellement utilise comme
langage de requtes pour des donnes XML, tout comme le langage SQL est utilis pour des requtes de bases de donnes. Pour plus
d'informations sur XPath, consultez les spcifications du langage XPath sur le site Web du W3C, l'adresse www.w3.org/TR/xpath.
Le Crateur d'expression XPath est une fonction de Dreamweaver qui vous permet de crer des expressions XPath simples pour l'identification de
nuds de donnes spcifiques et pour les rgions rptes. Cette mthode prsente un avantage sur le glissement-dplacement de valeurs
partir de l'arborescence du schma XML car elle vous permet de mettre en forme la valeur qui est affiche. Le contexte en cours est identifi en
fonction de la position du point d'insertion dans le fichier XSL lors de l'ouverture de la bote de dialogue Crateur d'expressions XPath. Le contexte
en cours est affich en gras dans l'arborescence du schma XML. Au fur et mesure que vous effectuez des slections dans cette bote de
dialogue, les instructions XPATH correctes relatives votre contexte en cours sont gnres. Cette fonction simplifie le processus d'criture
d'expressions XPath correctes, tant pour les novices que les utilisateurs expriments.
Remarque : Cette fonction a t conue pour vous aider crer des expressions XPath simples pour identifier un nud spcifique ou pour les
rgions rptes. Elle ne vous permet pas de modifier les expressions manuellement. Si vous devez crer des expressions complexes, utilisez le
Crateur d'expressions XPath pour dmarrer, puis personnalisez vos expressions en mode Code ou au moyen de l'inspecteur Proprits.
Cration d'une expression XPath pour identifier un nud spcifique

1. Double-cliquez sur l'emplacement rserv des donnes XML dans la page pour ouvrir le Crateur d'expression XPATH.
2. Dans la bote de dialogue Crateur d'expression XPATH (Texte dynamique), slectionnez un nud dans l'arborescence du
schma XML.
L'expression XPath approprie est rdige dans la zone Expression pour identifier le nud.
Remarque : Si vous slectionnez un autre nud dans l'arborescence du schma XML, l'expression change en consquence.
Dans l'exemple suivant, vous souhaitez afficher le sous-lment price du nud item :
645
Une telle slection insre le code suivant dans votre page XSLT :
1
<xsl:value-of select="price"/>
3. (Facultatif) Slectionnez une option de formatage dans le menu droulant Format.

Le formatage d'une slection est utile lorsque la valeur du nud renvoie un nombre. Dreamweaver propose une liste
prdfinie de fonctions de formatage. Vous trouverez la liste complte de ces fonctions, ainsi que des exemples, dans le
panneau Rfrences.
Dans l'exemple suivant, vous souhaitez afficher le sous-lment price sous la forme d'une devise deux dcimales :
Ces options insrent le code suivant dans votre page XSLT :

1
<xsl:value-of select="format-number(provider/store/items/item/price,'$#.00')"/>
4. Cliquez sur OK.

5. Pour afficher la valeur de chaque nud dans le fichier XML, appliquez une rgion rpte l'lment contenant le texte
646
dynamique (une ligne d'un tableau HTML ou un paragraphe, par exemple).

Pour plus d'informations et des exemples concernant la slection de nuds pour renvoyer une valeur, consultez la section
<xsl:value-of/> du panneau Rfrences.
Slection d'un nud rpter

Vous pouvez slectionner un nud rpter et, ventuellement, choisir de filtrer les rsultats. Dans la bote de dialogue Crateur d'expressions
XPath, votre contenu slectionn sera entour d'un bloc <xsl:for-each>. Si aucun contenu n'est slectionn, le bloc <xsl:for-each> est entr au
point d'insertion.
1. Double-cliquez sur l'emplacement rserv des donnes XML dans la page pour ouvrir le Crateur d'expression XPATH.
2. Dans la bote de dialogue Crateur d'expressions XPATH (Rgion rpte), slectionnez l'lment rpter dans
l'arborescence du schma XML.
L'expression XPath approprie est rdige dans la zone Expression pour identifier le nud.
Remarque : Les lments rpts sont identifis par le symbole Plus (+) dans l'arborescence du schma XML.
Dans l'exemple suivant, vous souhaitez rpter chaque nud item au sein du fichier XML.
Lorsque vous cliquez sur OK, le code suivant est insr dans votre page XSLT :
1
2
3
<xsl:for-each select="provider/store/items/item">
Content goes here
</xsl:for-each>
Dans certains cas, vous souhaiterez peut-tre utiliser un sous-ensemble des nuds rpts. Ainsi, vous souhaiterez peuttre utiliser uniquement les articles dots d'un attribut d'une valeur spcifique. Vous devez alors crer un filtre.
Filtrage des donnes rpter

Utilisez un filtre pour identifier les nuds rpts possdant des valeurs d'attribut spcifiques.
1. Dans l'arborescence du schma XML, slectionnez un nud rpter.
2. Cliquez sur le bouton d'extension Crer un filtre.
3. Cliquez sur le bouton plus (+) pour crer un filtre vide.
4. Tapez les critres de filtre dans les champs suivants :
Filtrer par Indique le nud rpt contenant les donnes sur lesquelles fonder le filtre. Ce menu droulant propose une liste
de nuds anctres relatifs au nud slectionn dans l'arborescence du schma XML.
O Spcifie l'attribut ou le sous-lment du nud Filtrer par qui sera utilis pour filtrer les rsultats. Vous pouvez slectionner
un attribut ou un sous-lment dans le menu droulant, ou vous pouvez entrer votre propre expression XPath dans ce champ
pour identifier les enfants prsents aux autres niveaux.
Oprateur Spcifie l'opration de comparaison utiliser dans l'expression de filtre.
647
Valeur Spcifie la valeur rechercher dans le nud Filtrer par. Indiquez une valeur. Si des paramtres dynamiques sont
dfinis pour votre page XSLT, vous pouvez en slectionner un dans le menu droulant.
5. Pour insrer un autre filtre, cliquez nouveau sur le bouton Plus (+).
En fonction des valeurs que vous tapez ou slectionnez dans les menus droulants, l'expression XPath figurant dans la zone
Expression est modifie.
L'exemple suivant renvoie uniquement les nuds item dans lesquels la valeur de l'attribut @available correspond true (vrai).
1
2
3
<xsl:for-each select="provider/store/items/item[@available = 'true']">

Content goes here
</xsl:for-each>
Remarque : Vous devez placer les valeurs de chane telles que true entre guillemets. Dreamweaver code les guillemets (')
votre intention, afin qu'elles apparaissent dans un format XHTML valide.
Vous pouvez crer des filtres plus complexes qui vous permettent de spcifier des nuds parents dans vos critres de filtre.
L'exemple suivant affiche uniquement les nuds item pour lesquels l'attribut @id de store est gal 1 et le nud price
correspondant item est suprieur 5.
648
1
2
3
<xsl:for-each select="provider/store[@id = 1]/items/item[price > 5]">

Content goes here
</xsl:for-each>
Pour plus d'informations et des exemples de rgions rptes, consultez la section <xsl:for-each> du panneau Rfrences.
Voir aussi
649
Excution de transformations XSL sur le client

Processus d'excution des transformations XSL ct client
Cration de pages XSLT entires et affichage des donnes
Liaison d'une page XSLT une page XML
Processus d'excution des transformations XSL ct client
Haut de la page
Vous pouvez effectuez des transformations XSL ct client. Informez-vous sur les transformations XSL ct client et ct serveur et sur l'utilisation
de XML et de XSL avec les pages Web avant de crer des page affichant des donnes XML.
Le droulement gnral de l'excution des transformations XSL ct client est le suivant (chaque tape individuelle est dcrite dans d'autres
rubriques) :
1. Crez un site Dreamweaver.
2. Crez une page XSLT, ou convertissez une page HTML en page XSLT.
Sur votre site Dreamweaver, crez une page XSLT entire.
Convertissez une page HTML existante en une page XSLT entire.
3. Associez une source de donnes XML la page (le cas chant).
Le fichier XML que vous associez doit se trouver dans le mme rpertoire que la page XSLT.
4. Liez vos donnes XML la page XSLT.
5. Affichez les donnes XML en liant les donnes la page XSLT entire.
6. Si cela s'impose, ajoutez un objet XSLT Rgion rpte au tableau ou la ligne de tableau contenant le ou les espaces
rservs pour les donnes XML.
7. Associez la page XSLT la page XML.
8. Envoyez la page XML et la page XSLT lie votre serveur Web.
9. Affichez la page XML dans un navigateur.
Le navigateur transforme alors les donnes XML, les met en forme au moyen de la page XSLT et affiche la page rsultante dans le navigateur.
Cration de pages XSLT entires et affichage des donnes
Haut de la page
Vous devez utiliser une page XSLT entires pour les transformations ct client. Les fragments XSLT ne sont pas pris en charge par ce type de
transformation. Suivez les instructions gnrales suivantes pour crer des pages XSLT, y lier des donnes XML et les formater pour des
transformations ct client :
1. Crez la page XSLT.
2. Affichez des donnes dans la page XSLT.
3. Affichez des lments rpts dans la page XSLT.
Haut de la page
Liaison d'une page XSLT une page XML
Une fois que vous avez cr une page XSLT entire contenant des espaces rservs de contenu dynamique pour vos donnes XML, vous devez
insrer une rfrence la page XSLT dans la page XML.
Remarque : Les fichiers XML et XSL que vous utilisez dans les transformations ct client doivent rsider dans un mme rpertoire. Si tel n'est
pas le cas, le navigateur lit le fichier XML et trouve la page XLST utiliser pour la transformation, mais ne peut pas localiser les actifs (feuilles de
style, images etc.) dfinis par les liens relatifs dans la page XSLT.
1. Ouvrez le fichier XML que vous souhaitez lier votre page XSLT :
650
2. Slectionnez Commandes > Associer une feuille de style XSLT.

3. Dans la bote de dialogue, cliquez sur le bouton Parcourir, localisez la page XSLT associer, slectionnez-la et cliquez sur
OK.
4. Cliquez sur OK pour fermer la bote de dialogue et insrer la rfrence la page XSLT en haut du document XML.
Voir aussi
651
Entits de caractre manquant pour XSLT

Spcification d'une entit de caractre manquant
Haut de la page
Spcification d'une entit de caractre manquant
Dans le langage XSLT, certains caractres ne sont pas pris en charge dans certains contextes. Il est par exemple impossible d'utiliser le signe
infrieur (<) et l'esperluette (&) dans du texte plac entre des balises ou dans une valeur d'attribut. Le moteur de transformation XSLT renvoie
une erreur si ces caractres sont utiliss incorrectement. Pour rsoudre ce problme, vous pouvez remplacer les caractres spciaux par des
entits de caractres.
Une entit de caractre est une chane de caractres reprsentant d'autres caractres. Les entits de caractres sont nommes ou numrotes.
Une entit nomme commence par une esperluette (&) suivie du nom ou des caractres et se termine par un point-virgule (;). Par exemple, <
reprsente le chevron gauche (<). Les entits numrotes commencent et se terminent de la mme faon, mais le signe dise (#) et un nombre
spcifient le caractre.
XSLT propose cinq entits prdfinies :
Caractre
Code d'entit
< (infrieur )
<
& (esperluette)
&
> (suprieur )
>
" (guillemets)
"
(apostrophe)
'
Si vous utilisez d'autres entits de caractres dans un fichier XSL, vous devez les dfinir dans la section DTD du fichier XSL. Dreamweaver fournit
plusieurs dfinitions d'entit par dfaut que vous pouvez voir en haut de tout fichier XSL cr dans Dreamweaver. Ces entits par dfaut couvrent
un grand nombre de caractres courants.
Lorsque vous affichez un aperu de votre fichier XSL dans un navigateur, Dreamweaver vrifie la prsence d'entits indfinies dans le fichier XSL
et vous avertit si une telle entit est dtecte.
Si vous affichez l'aperu d'un fichier XML associ un fichier XSLT ou une page ct serveur associe une transformation XSLT, c'est le
serveur ou le navigateur (et non Dreamweaver) qui affiche ce message d'avertissement. L'exemple suivant illustre le message que Internet
Explorer est susceptible de renvoyer lorsque vous demandez la transformation d'un fichier XML par un fichier XLS dans lequel une entit n'est pas
dfinie.
1
2
3
Reference to undefined entity 'auml'. Error processing resource 'http://localhost/testthis/list.xsl'. Line

28, Position 20
<p class=''test''>ä</p>
-------------------^
Pour corriger l'erreur sur votre page, vous devez y ajouter la dfinition d'entit manuellement.
Spcification d'une dfinition d'entit manquante

1. Recherchez le caractre manquant dans la page de rfrence des entits de caractres sur le site Web du W3C
www.w3.org/TR/REC-html40/sgml/entities.html.
Cette page Web contient les 252 entits prises en charge par les langages HTML 4 et XHTML 1.0.
Si, par exemple, l'entit de caractre Egrave (e accent grave) n'est pas dfinie, recherchez Egrave sur la page Web du
W3C. Vous y trouverez les informations suivantes :
1
<!ENTITY Egrave CDATA "È" -- latin capital letter E with grave, U+00C8 ISOlat1 -->
652
2. Prenez note du nom et du code de l'entit.

Dans notre exemple, Egrave est le nom de l'entit et &#200 est le code de l'entit.
3. Muni de ses informations, passez en mode Code et tapez la balise d'entit suivante en haut de votre fichier XSL (aprs la
dclaration Doctype et au sein des autres balises d'entits) :
1
<!ENTITY <var class="varname">entityname</var> "<var class="varname">entitycode</var>;">
Dans notre exemple, vous taperiez la balise d'entit suivante :

1
<!ENTITY Egrave "È">
Si vous utilisez rgulirement les mmes entits de caractres, il est prfrable d'ajouter leur dfinition dans les fichiers XSL
crs par dfaut par Dreamweaver lorsque vous utilisez Fichier > Nouveau.
Ajout de dfinitions d'entit dans les fichiers XSL crs par dfaut par Dreamweaver
1. Localisez le fichier de configuration suivant dans le dossier d'application Dreamweaver et ouvrez-le dans un diteur de texte :
Configuration/DocumentTypes/MMDocumentTypeDeclarations.xml
2. Localisez la dclaration mm_xslt_1 :
1
<documenttypedeclaration id="mm_xslt_1">
3. Tapez la ou les nouvelles balises d'entit dans la liste de balises d'entit, comme suit :
1
<!ENTITY <var class="varname">entityname</var> "<var class="varname">entitycode</var>;">
4. Enregistrez le fichier et redmarrez Dreamweaver.
653
Sites, pages et formulaires web dynamiques
654

Utilisations courantes des applications Web
Exemple d'application Web
Fonctionnement d'une application Web
Traitement des pages Web statiques
Traitement des pages dynamiques
Accs une base de donnes
Terminologie du dveloppement d'applications Web
Haut de la page
Une application Web est un site Web dont le contenu des pages est partiellement ou entirement indtermin. Le contenu final d'une page est
dtermin uniquement lorsque l'utilisateur requiert une page depuis le serveur Web. Le contenu final d'une page variant d'une requte une autre
en fonction des actions de l'utilisateur, ce type de page est appel page dynamique.
Les applications Web sont construites de manire rpondre diffrents types de dfis et de problmes. Cette section dcrit les utilisations
courantes des applications Web et prsente un exemple simple.
Haut de la page
Utilisations courantes des applications Web

Les applications Web peuvent tre utilises de diverses faons par les visiteurs d'un site et les dveloppeurs, notamment pour :
Permettre aux utilisateurs de trouver rapidement et facilement des informations sur un site Web riche en contenu.
Ce type d'applications Web permet aux visiteurs du site de rechercher, d'organiser et de parcourir le contenu leur
convenance. Les exemples incluent des rseaux intranet d'entreprises, tels Microsoft MSDN (www.msdn.microsoft.com), et
Amazon.com (www.amazon.com).
Collecter, enregistrer et analyser des donnes fournies par les visiteurs du site.
Auparavant, les donnes saisies dans des formulaires HTML taient envoyes sous forme de courriels aux employs ou sous
forme d'applications CGI pour le traitement. Une application Web peut enregistrer les donnes d'un formulaire directement
dans une base de donnes, ainsi qu'extraire les donnes et crer des rapports Web pour l'analyse. Les exemples incluent des
pages de banque en ligne et de contrle des stocks, ainsi que des sondages et des formulaires de commentaires.
Mettre jour des sites Web dont le contenu change souvent.
Une application Web vite au crateur d'avoir mettre frquemment jour le code HTML du site. Les fournisseurs de contenu,
tels que les rdacteurs en chef, alimentent l'application Web et celle-ci met automatiquement le site jour, Il peut s'agir de The
Economist (www.economist.com) et de CNN (www.cnn.com).
Haut de la page
Exemple d'application Web
Julie, professionnelle de la cration Web, utilise Dreamweaver depuis de nombreuses annes. Elle est charge de la maintenance des sites
intranet et Internet d'une entreprise de taille moyenne comptant 1 000 employs. Christophe, du service des Ressources humaines, lui soumet un
jour un problme. Ce service gre un programme de mise en forme qui attribue des points aux employs pour chaque kilomtre parcouru en
marchant, en courant ou vlo. Tous les mois, chaque employ doit communiquer Christophe le nombre total de kilomtres parcourus, par
courriel. A la fin du mois, Christophe rassemble tous les courriels et rcompense chaque employ avec des prix en espces, en fonction de leur
total de points.
Le problme est que ce programme de mise en forme a suscit de plus en plus d'enthousiasme. Le nombre de participants est si important que
Christophe est submerg de courriels chaque fin de mois. Il demande donc Julie si une solution Web serait envisageable.
Julie suggre une application Web base sur un rseau intranet excutant les tches suivantes :
permettre aux employs de saisir leur kilomtrage sur une page Web au moyen d'un simple formulaire HTML ;
stocker le kilomtrage des employs dans une base de donnes ;
655
calculer les points de mise en forme en fonction du kilomtrage ;

permettre aux employs de suivre leurs progrs au fil des mois ;
permettre Christophe d'accder au total des points en un seul clic chaque fin de mois.
Julie met rapidement en place l'application l'aide de Dreamweaver, logiciel dot des outils ncessaires la cration rapide et
facile de ce type d'applications.
Haut de la page
Fonctionnement d'une application Web
Une application Web est un ensemble de pages statiques et dynamiques. Une page statique n'est pas modifie lorsqu'un visiteur la consulte : Le
serveur Web transmet la page au navigateur qui la sollicite sans la modifier. A l'inverse, une page Web dynamique est modifie par le serveur
avant d'tre transmise au navigateur qui la sollicite. C'est pourquoi cette page est dite dynamique.
Vous pouvez par exemple crer une page pour afficher les rsultats du programme de mise en forme et faire en sorte que certaines informations
(telles le nom et les rsultats de l'employ) soient dtermines lorsqu'une page est sollicite par un employ donn.
Les sections suivantes dcrivent en plus de dtails la faon dont les applications Web fonctionnent.
Haut de la page
Traitement des pages Web statiques
Un site Web statique comprend un jeu de pages et fichiers HTML associs hbergs sur un ordinateur excutant un serveur Web.
Un serveur Web est un logiciel qui fournit des pages Web en rponse des requtes de navigateurs Web. Une requte de page est gnre
lorsqu'un utilisateur clique sur un lien d'une page Web, choisit un signet dans le navigateur ou saisit une URL dans le champ Adresse du
navigateur.
Le contenu final d'une page Web statique est dtermin par le crateur de la page et n'est pas modifi lorsqu'un utilisateur la demande. Exemple :
1
2
3
4
5
6
7
8
9
<html>
<head>
<title>Trio Motors Information Page</title>
</head>
<body>
<h1>About Trio Motors</h1>
<p>Trio Motors is a leading automobile manufacturer.</p>
</body>
</html>
Chaque ligne du code HTML de la page est rdige par le crateur avant que la page ne soit place sur le serveur. Ce code HTML n'tant pas
modifi une fois la page sur le serveur, cette page est dite statique.
Remarque : Au sens strict du terme, une page dite statique peut ne pas tre statique du tout. Une image survole ou une animation Flash (un
fichier SWF), par exemple, peuvent animer une page statique. Cependant, ce guide qualifie une page de statique si elle est adresse au
navigateur sans modifications.
Lorsqu'un serveur Web reoit une requte de page statique, il lit la requte, localise la page et la transmet au navigateur qui l'a sollicite, comme
le montre l'exemple suivant :
1. Le navigateur Web demande une page statique. 2. Le serveur Web recherche la

page. 3. Le serveur Web envoie la page au navigateur requrant.
Dans le cas des applications Web, certaines lignes de code ne sont pas dtermines au moment o l'utilisateur sollicite la page. Ces lignes
656
doivent tre dtermines via un mcanisme avant que la page ne soit transmise au navigateur. Ce mcanisme est prsent dans la section
suivante.
Haut de la page
Traitement des pages dynamiques
Lorsqu'un serveur Web reoit une requte de page Web statique, il transmet directement cette page au navigateur qui la demande. Le serveur
Web ragit diffremment lorsqu'il reoit une requte de page dynamique : Il transmet la page un logiciel spcial charg de terminer la page. Ce
logiciel spcial est appel un serveur d'application.
Le serveur d'application lit le code de la page, termine cette page en fonction des instructions figurant dans le code, puis en retire le code. Il en
rsulte une page statique que le serveur d'application renvoie au serveur Web, lequel transmet alors cette page au navigateur demandeur. Le
navigateur reoit uniquement du code HTML pur lorsque la page lui est transmise. Voici un aperu du processus :
1. Le navigateur Web demande une page dynamique. 2. Le serveur Web

recherche la page et la transmet au serveur d'application. 3. Le serveur d'application analyse la page la recherche d'instructions et la
termine. 4. Le serveur d'application transmet la page termine au serveur Web. 5. Le serveur Web envoie la page acheve au navigateur
requrant
Haut de la page
Un serveur d'application vous permet de travailler avec des ressources ct serveur telles que les bases de donnes. Une page dynamique peut,
par exemple, ordonner au serveur d'application d'extraire des donnes de la base de donnes et de les insrer dans le code HTML de la page.
Pour plus d'informations, consultez le site www.adobe.com/go/learn_dw_dbguide_fr.
L'utilisation d'une base de donnes pour stocker un contenu vous permet de sparer l'aspect conceptuel d'un site Web du contenu afficher aux
utilisateurs du site. Plutt que de crer des fichiers HTML distincts pour chacune des pages, il vous suffit de crer une page (ou un modle) pour
les diffrents types d'informations que vous souhaitez prsenter. Vous pouvez ensuite tlcharger du contenu dans une base de donnes pour
qu'ensuite le site Web puisse extraire ce contenu en rponse une demande d'un utilisateur. Vous pouvez galement mettre jour des
informations dans une source unique, puis rpercuter cette modification travers le site Web sans avoir modifier chaque page manuellement.
Vous pouvez utiliser Adobe Dreamweaver pour crer des formulaires Web permettant d'insrer, de mettre jour ou de supprimer des donnes
dans une base de donnes.
L'instruction d'extraction des donnes de la base est nomme requte de base de donnes. Une requte est compose de critres de recherche
rdigs dans un langage de base de donnes appel SQL (Structured Query Language). La requte SQL est rdige dans les scripts ou les
balises de la page ct serveur.
Un serveur d'application ne peut pas communiquer directement avec une base de donnes car le format propritaire de cette dernire rend les
donnes indchiffrables, de la mme manire qu'un document Microsoft Word ouvert dans Bloc-notes ou BBEdit peut tre indchiffrable. Le
serveur d'application peut communiquer avec la base de donnes uniquement via un pilote de base de donnes, logiciel faisant office d'interprte
entre le serveur d'application et la base de donnes.
Une fois que le pilote a tabli la communication, la requte est excute par rapport la base de donnes et un jeu d'enregistrements est cr. Un
jeu d'enregistrements est un ensemble de donnes extraites d'une ou de plusieurs tables de base de donnes. Le jeu d'enregistrements est
renvoy au serveur d'application, lequel utilise les donnes pour terminer la page.
Voici un exemple simple de requte de base de donnes rdige en SQL :
657
1
2
SELECT lastname, firstname, fitpoints

FROM employees
Cette instruction cre un jeu d'enregistrements trois colonnes et le remplit de lignes comportant le nom, le prnom et les points de mise en forme
de tous les employs de la base de donnes. Pour plus d'informations, consultez le site www.adobe.com/go/learn_dw_sqlprimer_fr.
L'exemple suivant illustre le processus d'interrogation de la base de donnes via des requtes et de la transmission des donnes au navigateur :
1. Le navigateur Web demande une page

dynamique. 2. Le serveur Web recherche la page et la transmet au serveur d'application. 3. Le serveur d'application analyse la page la
recherche d'instructions. 4. Le serveur d'application envoie une requte au pilote de la base de donnes. 5. Le pilote excute la requte au
niveau de la base de donnes. 6. Le jeu d'enregistrements est renvoy au pilote. 7. Le pilote transmet le jeu d'enregistrements au serveur
d'application. 8. Le serveur d'application insre les donnes dans la page, puis transmet la page au serveur Web. 9. Le serveur Web envoie la
page acheve au navigateur requrant.
Vous pouvez utiliser pratiquement toutes les bases de donnes avec votre application Web, condition que les pilotes de base de donnes
appropris soient installs sur le serveur.
Si vous prvoyez de crer de petites applications peu onreuses, vous pouvez utiliser une base de donnes base sur fichier, cre par exemple
sous Microsoft Access. Si vous prvoyez de crer des applications stratgiques robustes, vous pouvez utiliser une base de donnes serveur,
cre par exemple avec Microsoft SQL Server, Oracle 9i ou MySQL.
Si votre base de donnes rside sur un systme autre que votre serveur Web, assurez-vous qu'il existe une connexion rapide entre les deux
systmes pour un fonctionnement efficace et rapide de votre application Web.
Haut de la page
La cration d'une page dynamique consiste crire d'abord le code HTML, puis ajouter les scripts ou les balises ct serveur au code HTML
pour rendre la page dynamique. Lorsque vous visualisez le code obtenu, le langage apparat incorpor dans le code HTML de la page. Par
consquent, ces langages sont appels langages de programmation HTML intgrs. L'exemple lmentaire ci-dessous utilise le langage CFML
(ColdFusion Markup Language) :
Remarque : La prise en charge de CFML a t supprime de Dreamweaver CC et des versions ultrieures.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head>
</head>
<body>

<cfset department="Sales">
<cfoutput>
<p>Be sure to visit our #department# page.</p>
</cfoutput>

</body>
</html>
658
Les instructions incorpores dans cette page excutent les actions suivantes :
1. Cration d'une variable appele department et affectation de la chane "Service commercial" cette variable.
2. Insertion de la valeur de la variable, "Service commercial", dans le code HTML.
Le serveur d'application renvoie la page suivante au serveur Web :
1
2
3
4
5
6
7
8
9
10
<html>
<head>
</head>
<body>
<p>Be sure to visit our Sales page.</p>
</body>
</html>
Le serveur Web transmet la page au navigateur requrant, lequel l'affiche de la manire suivante :
A propos de Trio Motors
Trio Motors est leader dans le domaine de la construction automobile.
Nous vous invitons visiter la page de notre Service commercial.
Choisissez un langage de script ou de balise en fonction de la technologie de votre serveur. Les langages les plus employs pour les technologies
de serveur prises en charge par Dreamweaver sont :
Technologie de serveur
Langage
ColdFusion
CFML (ColdFusion Markup Language)
Pages ASP (Active Server Pages)
VBScript
JavaScript
PHP
PHP
Dreamweaver peut crer les scripts ou les balises ct serveur ncessaires au bon fonctionnement de vos pages. Vous pouvez galement les
rdiger manuellement dans l'environnement de codage de Dreamweaver.
Terminologie du dveloppement d'applications Web
Haut de la page
Cette section regroupe la dfinition des termes relatifs aux applications Web frquemment utiliss.
Un serveur d'application est un logiciel qui aide un serveur Web traiter des pages Web contenant des scripts ou des balises ct serveur.
Lorsqu'une page de ce type est requise par le serveur, le serveur Web transmet cette page au serveur d'application afin qu'il la traite avant de
l'envoyer au navigateur. Pour plus d'informations, voir la section Fonctionnement d'une application Web.
Les serveurs d'applications les plus courants sont ColdFusion et PHP.
Une base de donnes est un ensemble de donnes stockes sous forme de tables. Chaque ligne d'une table correspond un enregistrement et
chaque colonne correspond un champ de l'enregistrement, tel qu'illustr dans l'exemple ci-dessous.
Un pilote de base de donnes est un logiciel qui agit comme un interprte entre une application Web et une base de donnes. Les donnes
d'une base de donnes sont stockes dans un format propritaire. Un pilote de base de donnes permet l'application Web de lire et de
manipuler des donnes qui, sans cela, seraient indchiffrables.
Un systme de gestion de bases de donnes (SGBD ou systme de base de donnes) est un logiciel utilis pour crer et manipuler des bases
de donnes. Les systmes de base de donnes les plus courants sont Microsoft Access, Oracle 9i et MySQL.
Une requte de base de donnes dsigne l'opration permettant d'extraire un jeu d'enregistrements d'une base de donnes. Une requte est
659
constitue de critres de recherche exprims en langage de base de donnes appel SQL. La requte peut, par exemple, spcifier que seules
certaines colonnes ou certains enregistrements doivent tre inclus dans le jeu d'enregistrements.
Une page dynamique est une page Web qui est personnalise par un serveur d'application avant d'tre transmise un navigateur.
Un jeu d'enregistrements est un ensemble de donnes extraites d'une ou plusieurs tables de base de donnes, comme l'illustre
l'exemple suivant :
Une base de donnes relationnelle est une base de donnes contenant plusieurs tables qui partagent des donnes. La base de donnes
suivante est relationnelle car deux tables partagent la colonne DepartmentID.
Une technologie de serveur est une technologie utilise par un serveur d'application pour modifier des pages dynamiques lors de l'excution.
L'environnement de dveloppement de Dreamweaver prend en charge les technologies de serveur suivantes :
Adobe ColdFusion
Pages ASP (Active Server Pages) de Microsoft
PHP: Hypertext Preprocessor (PHP)
Vous pouvez galement utiliser l'environnement de codage de Dreamweaver pour dvelopper des pages destines toute
autre technologie de serveur non rpertorie ci-dessus.
Une page statique est une page Web qui n'est pas modifie par un serveur d'application avant d'tre transmise un navigateur. Pour plus
d'informations, consultez la section Traitement des pages Web statiques.
Une application Web est un site Web dont le contenu des pages est partiellement ou entirement indtermin. Le contenu final de ces pages est
dtermin uniquement lorsque l'utilisateur requiert une page depuis le serveur Web. Le contenu final d'une page variant d'une requte une autre
en fonction des actions de l'utilisateur, ce type de page est appel page dynamique.
Un serveur Web est un logiciel qui renvoie des pages Web en rponse aux requtes de navigateurs Web. Une requte de page est gnre
lorsqu'un utilisateur clique sur un lien d'une page Web dans le navigateur, choisit un signet dans le navigateur ou saisit une URL dans le champ
Adresse du navigateur.
Les serveurs Web les plus courants sont IIS (Microsoft Internet Information Server) et Apache HTTP Server.
Voir aussi
Guide du dbutant en base de donnes
660
Configuration de l'ordinateur pour le dveloppement d'applications

Elments ncessaires la cration d'applications Web
Fonctions lmentaires du serveur Web
Choix d'un serveur Web
Choix d'un serveur d'application
Choix d'une base de donnes
Configuration d'un environnement de dveloppement ColdFusion
Configuration d'un environnement de dveloppement PHP
Configuration d'un environnement de dveloppement ASP
Cration d'un dossier racine pour l'application
A propos de la dfinition d'un site Dreamweaver
Elments ncessaires la cration d'applications Web
Haut de la page
Pour crer des applications Web dans Adobe Dreamweaver, vous devez disposer des logiciels suivants :
Un serveur Web
Un serveur d'application excut sur votre serveur Web
Remarque : Dans le contexte des applications Web, les termes serveur Web et serveur d'application font rfrence des
logiciels et non du matriel.
Si vous souhaitez utiliser une base de donnes en conjonction avec votre application, vous devez galement disposer des
logiciels suivants :
Un systme de base de donnes
Un pilote de base de donnes prenant en charge votre base de donnes
Plusieurs socits d'hbergement Web vous offrent la possibilit d'utiliser leurs logiciels pour tester et dployer des
applications Web. Dans certains cas, il est possible d'installer le logiciel requis sur le mme ordinateur que Dreamweaver
des fins de dveloppement. Vous pouvez galement installer les logiciels sur un ordinateur en rseau (le plus souvent un
ordinateur fonctionnant sous Windows 2000 ou XP) pour rendre votre projet accessible aux autres dveloppeurs de votre
quipe.
Si vous souhaitez utiliser une base de donnes avec votre application Web, vous devez au pralable tablir une connexion
avec cette base.
Haut de la page
Fonctions lmentaires du serveur Web
Pour dvelopper et tester des pages Web dynamiques, vous avez besoin d'un serveur Web oprationnel. Un serveur Web est un logiciel qui
fournit des pages Web en rponse des requtes de navigateurs Web. Un serveur Web est parfois appel serveur HTTP. Vous pouvez installer
et utiliser un serveur Web sur votre ordinateur local.
Si vous travaillez sur Macintosh, vous pouvez utiliser le serveur Web Apache dj install sur votre machine.
Remarque : Adobe ne fournit aucune assistance technique pour les logiciels tiers, tels que Microsoft Internet Information Server. Si vous avez
besoin d'aide pour un produit Microsoft, contactez le support technique de Microsoft.
Si vous utilisez Internet Information Server (IIS) pour dvelopper des applications Web, le nom par dfaut de votre serveur Web est le nom de
votre ordinateur. Vous pouvez modifier le nom du serveur en modifiant celui de votre ordinateur. Si votre ordinateur n'a pas de nom, le serveur
utilise le mot localhost .
Le nom du serveur correspond au dossier racine du serveur, lequel est gnralement (sur un ordinateur fonctionnant sous Windows) :
C:\Inetpub\wwwroot. Vous pouvez ouvrir une page Web quelconque stocke dans le dossier racine en entrant l'URL suivante dans un navigateur
en cours d'excution sur votre ordinateur.
http://nom_du_serveur/nom_de_fichier
Par exemple, si le nom du serveur est mer_noire et qu'une page Web intitule soleil.html est stocke dans C:\Inetput\wwwroot\, vous pouvez
ouvrir cette page en tapant l'URL suivante dans le navigateur en cours d'excution sur l'ordinateur local :
http://mer_noire/soleil.html
661
Remarque : Veillez taper des barres obliques normales et non inverses dans les URL.
Vous pouvez galement ouvrir une page Web quelconque stocke dans un sous-dossier du dossier racine en spcifiant ce sous-dossier dans
l'URL. Par exemple, supposons que le fichier soleil.html est stock dans un sous-dossier nomm gamelan, de la faon suivante :
C:\Inetput\wwwroot\gamelan\soleil.html
Vous pouvez ouvrir cette page en entrant l'URL suivante dans un navigateur en cours d'excution sur votre ordinateur :
http://mer_noire/gamelan/soleil.html
Lorsque le serveur Web est excut sur votre ordinateur, vous pouvez remplacer le nom du serveur par localhost. Par exemple, les URL suivantes
ouvrent la mme page dans un navigateur :
http://mer_noire/gamelan/soleil.html
http://localhost/gamelan/soleil.html
Remarque : Vous pouvez aussi utiliser une autre expression la place du nom du serveur ou de localhost : 127.0.0.1 (par exemple,
http://127.0.0.1/gamelan/soleil.html).
Haut de la page
Choix d'un serveur Web
Pour dvelopper et tester des applications Web, vous pouvez choisir parmi plusieurs serveurs Web courants, savoir IIS (Microsoft Internet
Information Server) et Apache HTTP Server.
Si vous n'utilisez pas de service d'hbergement Web, slectionnez un serveur Web et installez-le sur un ordinateur local des fins de
dveloppement. Les utilisateurs souhaitant dvelopper des applications Web ColdFusion sous Windows et sur Macintosh peuvent le faire grce au
serveur Web inclus dans l'dition dveloppeur du serveur d'application ColdFusion 8. Cette dition est disponible gratuitement.
Les autres utilisateurs Windows peuvent excuter un serveur Web sur leur ordinateur local en installant IIS. Ce serveur Web peut avoir dj t
install sur votre ordinateur. Parcourez votre arborescence pour vrifier si elle comporte un dossier C:\Inetpub ou D:\Inetpub. IIS cre ce dossier
pendant l'installation.
Les utilisateurs de Mac OS peuvent utiliser le serveur Web Apache local install avec leur systme d'exploitation.
Pour plus d'informations sur l'installation et la configuration des autres serveurs Web, consultez la documentation de votre fournisseur ou consultez
l'administrateur systme.
Haut de la page
Choix d'un serveur d'application
Un serveur d'application est un logiciel qui permet un serveur Web de traiter les pages dynamiques. Lorsque vous choisissez un serveur
d'application, tenez compte des critres suivants : votre budget, la technologie de serveur que vous souhaitez utiliser (ColdFusion, ASP ou PHP)
et le type serveur Web.
Budget Certains fournisseurs proposent des applications haut de gamme dont le prix d'achat et les cots de fonctionnement sont trs levs.
D'autres fournisseurs proposent des solutions plus simples et plus conomiques (par exemple ColdFusion). Certains serveurs d'application sont
intgrs aux serveurs Web (notamment Microsoft IIS) et d'autres peuvent tre tlchargs gratuitement sur Internet (notamment PHP).
Technologie de serveur Les serveurs d'application utilisent diffrentes technologies. Dreamweaver prend en charge trois technologies de
serveur : ColdFusion, ASP et PHP. Le tableau suivant indique les serveurs d'application courants axs sur l'une des technologies de serveur
prises en charge par Dreamweaver :
Technologie de serveur
Serveur d'application
ColdFusion
Adobe ColdFusion 8
ASP
Microsoft IIS
PHP
Serveur PHP
Pour en savoir davantage sur ColdFusion, slectionnez ColdFusion dans le menu Aide.
Pour en savoir plus sur ASP, visitez le site Web Microsoft l'adresse suivante : http://msdn.microsoft.com/library/default.asp?url=/library/frfr/dnanchor/html/activeservpages.asp.
Pour en savoir plus sur PHP, visitez le site Web de PHP l'adresse suivante : www.php.net/.
Haut de la page
Choix d'une base de donnes
Les bases de donnes se prsentent sous une multitude de formes, selon la quantit et la complexit des donnes qu'elles doivent stocker.
Lorsque vous choisissez une base de donnes, tenez compte de plusieurs facteurs, dont votre budget et le nombre d'utilisateurs qui devraient
accder la base de donnes.
662
Budget Certains fournisseurs proposent des serveurs de base de donnes d'application haut de gamme dont le prix d'achat et les cots
d'administration sont trs levs. D'autres fournisseurs proposent des solutions plus aises et plus conomiques, comme Microsoft Access ou la
base de donnes libre MySQL.
Utilisateurs Si vous pensez qu'une large communaut d'utilisateurs accdera votre site Web, optez pour une base de donnes conue pour
prendre en charge l'ensemble des utilisateurs potentiels de votre site. Lorsque les sites Web ncessitent une plus grande souplesse en termes de
modlisation des donnes et doivent prendre en charge un trs grand nombre d'utilisateurs simultans, envisagez d'employer des bases de
donnes relationnelles serveur (communment dsignes sous le nom de SGBDR), telles que Microsoft SQL Server et Oracle.
Configuration d'un environnement de dveloppement ColdFusion
Haut de la page
Pour plus d'informations sur la configuration d'un environnement de dveloppement ColdFusion pour Dreamweaver sur votre ordinateur Windows
ou Mac, consultez le site Web d'Adobe l'adresse suivante : www.adobe.com/devnet/dreamweaver/articles/setup_cf.html.
Les utilisateurs de Windows et de Macintosh peuvent tlcharger et installer une dition gratuite et totalement fonctionnelle du serveur
d'applications ColdFusion depuis le site d'Adobe, l'adresse www.adobe.com/go/coldfusion_fr/.
Remarque : L'dition dveloppeur est rserve au dveloppement et l'valuation d'applications Web non commerciales. La licence accorde ne
permet pas d'effectuer le dploiement. Cette dition prend en charge les requtes provenant de l'hte local et de deux adresses IP distantes. Vous
pouvez l'utiliser pour dvelopper et tester vos applications Web aussi longtemps que ncessaire, car la licence est permanente. Pour plus
d'informations, consultez l'aide de ColdFusion (Aide > Aide de ColdFusion).
Pendant l'installation, vous pouvez configurer ColdFusion de manire utiliser le serveur Web intgr au programme ou un autre serveur Web de
votre systme. En principe, il est prfrable de faire correspondre du mieux possible votre environnement de dveloppement et votre
environnement de production. Par consquent, si un serveur Web (par exemple, Microsoft IIS) est install sur l'ordinateur sur lequel vous
dveloppez vos applications, il est peut-tre prfrable de l'utiliser.
Configuration d'un environnement de dveloppement PHP
Haut de la page
Pour plus d'informations sur la configuration d'un environnement de dveloppement PHP pour Dreamweaver sur votre ordinateur Windows ou
Mac, consultez le site Web d'Adobe l'adresse suivante : www.adobe.com/devnet/dreamweaver/articles/setup_php.html.
Il existe une version du serveur d'application PHP pour les systmes Windows, Linux, UNIX, HP-UX, Solaris et Mac OS X. Pour plus
d'informations sur le serveur d'applications, consultez la documentation PHP, que vous pouvez galement tlcharger partir du site Web PHP
l'adresse www.php.net/download-docs.php.
Configuration d'un environnement de dveloppement ASP
Haut de la page
Pour plus d'informations sur la configuration d'un environnement de dveloppement ASP pour Dreamweaver sur votre ordinateur Windows ou
Mac, consultez le site Web d'Adobe l'adresse suivante : www.adobe.com/devnet/dreamweaver/articles/setup_asp.html.
Pour accder aux pages ASP, vous devez disposer d'une application prenant en charge Microsoft Active Server Pages 2.0., telle que Microsoft IIS,
qui est fournie avec Windows 2000 et Windows XP Professionnel. Les utilisateurs de Windows XP Professionnel peuvent installer et excuter IIS
sur leur ordinateur local. Les utilisateurs de Macintosh peuvent faire appel un service d'hbergement Web offrant une solution ASP ou bien
installer IIS sur un ordinateur distant.
Haut de la page
Cration d'un dossier racine pour l'application
Aprs avoir trouv une socit d'hbergement de site Web ou avoir vous-mme conu votre serveur, crez un dossier racine pour votre
application Web sur l'ordinateur o s'excute votre serveur. Le dossier racine peut tre un dossier local ou distant, suivant l'emplacement du
serveur Web.
Le serveur Web rpondra aux requtes HTTP d'un navigateur Web en renvoyant les fichiers de ce dossier ou de ses sous-dossiers. Par exemple,
sur un ordinateur excutant ColdFusion 8, tous les fichiers contenus dans le dossier\ColdFusion8\wwwroot et dans chacun de ses sous-dossiers
peuvent tre transmis un navigateur Web.
Le tableau ci-dessous rpertorie les dossiers racine par dfaut des diffrents serveurs Web :
Serveur Web
Dossier racine par dfaut
ColdFusion 8
\ColdFusion8\wwwroot
IIS
\Inetpub\wwwroot
Apache (Windows)
\apache\htdocs
Apache (Macintosh)
Users:MonNomd'Utilisateur:Sites
663
Pour tester le serveur Web, enregistrez une page HTML test dans le dossier racine par dfaut, puis tentez de l'ouvrir en indiquant son URL dans
un navigateur. L'URL est compose du nom de domaine et du nom du fichier correspondant la page HTML, comme dans l'exemple ci-dessous :
www.exemple.com/testpage.htm
Si le serveur Web s'excute sur votre ordinateur local, vous pouvez utiliser localhost au lieu d'un nom de domaine. Entrez l'une des URL d'hte
local suivantes correspondant votre serveur Web :
Serveur Web
URL d'hte local
ColdFusion 8
http://localhost:8500/testpage.htm
IIS
http://localhost/testpage.htm
Apache
(Windows)
http://localhost:80/testpage.htm
Apache
(Macintosh)
http://localhost/~MonNomd'Utilisateur/testpage.htm (o MonNomd'Utilisateur est votre nom

d'utilisateur Macintosh)
Remarque : Par dfaut, le serveur ColdFusion est reli au port 8500, et le serveur Web Apache pour Windows au port 80.
Si la page ne s'affiche pas correctement, recherchez les erreurs potentielles suivantes :
Le serveur Web n'est pas en cours d'excution. Consultez les instructions de dmarrage dans la documentation du serveur
Web.
Le fichier n'a pas d'extension .htm ou .html.
Vous avez indiqu le chemin du fichier contenant la page (par exemple, c:\ColdFusion8\wwwroot\testpage.htm) au lieu de son
URL (par exemple, http://localhost:8500/testpage.htm) dans la zone d'adresse de votre navigateur.
L'URL contient une faute de frappe. Recherchez les erreurs ventuelles et vrifiez que le nom de fichier n'est pas suivi d'une
barre oblique, comme dans l'adresse suivante : http://localhost:8080/testpage.htm/.
Aprs avoir cr un dossier racine pour votre application, dfinissez un site Dreamweaver pour la gestion des fichiers.
Haut de la page
A propos de la dfinition d'un site Dreamweaver
Aprs avoir configur le systme en vue du dveloppement d'applications Web, vous devez dfinir un site Dreamweaver pour la gestion des
fichiers.
Avant de commencer, vrifiez que les conditions suivantes sont runies :
Vous avez accs un serveur Web. Le serveur Web peut rsider sur un ordinateur local, sur un ordinateur distant tel qu'un
serveur de dveloppement, ou sur un serveur gr par une socit d'hbergement Web
Un serveur d'application est install et excut sur le systme o rside le serveur Web.
Vous avez cr un dossier racine pour votre application Web sur le systme excutant le serveur Web.
La dfinition d'un site Dreamweaver pour l'application Web se droule en trois tapes :
1. Dfinition d'un dossier local
Ce dossier local est le dossier du disque dur dans lequel seront stockes les copies de travail des fichiers du site. Vous pouvez dfinir un dossier
local pour chacune des applications Web cres. La dfinition d'un dossier local vous permet galement de grer vos fichiers et de les transfrer
aisment vers ou depuis le serveur Web.
2. Dfinition d'un dossier distant
Dfinissez un dossier situ sur l'ordinateur excutant le serveur Web comme dossier distant Dreamweaver. Ce dossier distant est le dossier que
vous avez cr sur le serveur Web pour l'application Web.
3. Dfinition d'un dossier de test
Dreamweaver utilise ce dossier pour gnrer et afficher du contenu dynamique et se connecter des bases de donnes pendant que vous
procdez la cration du site. Ce serveur d'valuation peut se trouver sur votre ordinateur local, un serveur de dveloppement, un serveur
intermdiaire ou un serveur de production. Vous devez seulement vous assurer que le serveur slectionn est en mesure de traiter le type de
pages dynamiques que vous avez l'intention de dvelopper.
Une fois le site Dreamweaver dfini, vous pouvez procder la cration de l'application Web.
Voir aussi
664
665
Connexions aux bases de donnes pour les dveloppeurs ColdFusion

Connexion une base de donnes ColdFusion
Cration ou modification dune source de donnes ColdFusion
Connexion la base de donnes dans Dreamweaver
Haut de la page

Pour dvelopper une application Web ColdFusion sous Dreamweaver, vous devez vous connecter une base de donnes en choisissant une
source de donnes ColdFusion dfinie dans Dreamweaver ou la console de gestion du serveur ColdFusion Administrator.
Avant dtablir une connexion une base de donnes, vous devez configurer une application Web ColdFusion. Vous devez galement installer
une base de donnes sur votre ordinateur local ou sur un systme auquel vous pouvez accder en rseau ou par FTP.
Assurez-vous galement que Dreamweaver sait o aller chercher les sources de donnes ColdFusion. Pour rcuprer les sources de donnes
ColdFusion au moment de la conception, Dreamweaver place des scripts dans un dossier sur lordinateur excutant ColdFusion. Vous devez
indiquer ce dossier dans la catgorie Serveur dvaluation de la bote de dialogue Dfinition du site.
Ensuite, vous devez crer une source de donnes ColdFusion dans Dreamweaver ou dans le programme ColdFusion Administrator (sil nen
existe pas dj une). Une fois la source de donnes ColdFusion cre, vous pouvez lutiliser dans Dreamweaver pour vous connecter la base de
donnes.
Haut de la page
Cration ou modification dune source de donnes ColdFusion

Pour tre en mesure dutiliser les informations dune base de donnes dans une page Web, vous devez dabord crer une source de donnes
ColdFusion. Si vous utilisez la version 7 de ColdFusion MX ou une version ultrieure, vous pouvez directement crer ou modifier la source de
donnes dans Dreamweaver. Si vous utilisez ColdFusion MX, vous devez utiliser la console de gestion sur le serveur, ColdFusion MX
Administrator, pour crer ou modifier la source de donnes. Dans ce cas, vous pouvez toutefois utiliser Dreamweaver pour ouvrir ColdFusion MX
Administrator.
Cration ou modification dune source de donnes ColdFusion avec ColdFusion MX 7 ou une version
ultrieure
1. Vrifiez quun ordinateur excutant ColdFusion MX 7 ou une version ultrieure est dfini comme serveur dvaluation pour
votre site.
2. Ouvrez une page ColdFusion dans Dreamweaver.
3. Pour crer une source de donnes, cliquez sur le bouton Plus (+) dans le panneau Bases de donnes (Fentre > Bases de
donnes) et saisissez les valeurs des paramtres spcifiques au pilote de base de donnes.
Remarque : Dreamweaver naffiche le bouton Plus (+) que si vous excutez ColdFusion MX 7 ou une version ultrieure.
4. Pour modifier une source de donnes, double-cliquez sur le bouton de connexion la base de donnes dans le panneau
Bases de donnes, et modifiez les valeurs ncessaires.
Vous pouvez modifier tous les paramtres, sauf le nom de la source de donnes. Pour plus dinformations, consultez la
documentation du fournisseur du pilote ou consultez votre administrateur systme.
666
Cration ou modification dune source de donnes ColdFusion avec ColdFusion MX 6.1 ou 6.0
2. Dans le panneau Bases de donnes (Fentre > Bases de donnes) de Dreamweaver, cliquez sur Modifier les sources de
donnes dans la barre doutils.
3. Connectez-vous ColdFusion MX Administrator et crez ou modifiez la source de donnes.
Pour plus dinformations, consultez laide de ColdFusion (Aide > Aide de ColdFusion).
Vous devez fournir certaines valeurs de paramtres pour crer la source de donnes ColdFusion. Pour les valeurs de
paramtres spcifiques votre pilote de base de donnes, consultez la documentation de votre fournisseur ou contactez votre
administrateur systme.
Une fois que vous avez cr une source de donnes ColdFusion, vous pouvez lutiliser dans Dreamweaver.
Haut de la page
Connexion la base de donnes dans Dreamweaver

Une fois la source de donnes ColdFusion cre, vous pouvez lutiliser dans Dreamweaver pour vous connecter la base de donnes.
Ouvrez nimporte quelle page ColdFusion dans Dreamweaver, puis allez dans le panneau Bases de donnes (Fentre > Bases de donnes). Vos
sources de donnes ColdFusion saffichent dans le panneau.
Si ce nest pas le cas, remplissez la liste de contrle du panneau. Assurez-vous galement que Dreamweaver sait o aller chercher les sources de
donnes ColdFusion. Dans la catgorie Serveur dvaluation de la bote de dialogue Dfinition du site, indiquez le dossier racine du site sur
lordinateur excutant ColdFusion.

Configuration dun serveur dvaluation
667
Connexions aux bases de donnes pour les dveloppeurs ASP

A propos des connexions aux bases de donnes ASP
A propos des connexions OLE DB
A propos des chanes de connexion
Cration dune connexion en utilisant un DSN local
Cration dune connexion en utilisant un DSN distant
Cration dune connexion en utilisant une chane de connexion
Modification ou suppression dune connexion une base de donnes
Haut de la page
A propos des connexions aux bases de donnes ASP

Une application ASP doit se connecter une base de donnes via un pilote ODBC ou un fournisseur OLE
DB. Le pilote ou le fournisseur joue le rle de traducteur pour permettre lapplication Web de communiquer
avec la base de donnes. Le tableau suivant rpertorie certains des pilotes que vous pouvez utiliser avec les
bases de donnes Microsoft Access, Microsoft SQL Server et Oracle :
Base de donnes
Pilote de base de donnes
Microsoft Access
Pilote Microsoft Access (ODBC)

Microsoft Jet Provider pour Access (OLE DB)
Microsoft SQL Server
Pilote Microsoft SQL Server (ODBC)

Fournisseur Microsoft SQL Server (OLE DB)
Oracle
Pilote Microsoft Oracle (ODBC)

Fournisseur Oracle pour OLE DB
Vous pouvez utiliser un DSN (Data Source Name, nom de source de donnes) ou une chane de connexion
pour vous connecter la base de donnes. Vous devez utiliser une chane de connexion si vous vous
connectez via un fournisseur OLE DB ou via un pilote ODBC qui nest pas install sur un systme Windows.
Un DSN est un identificateur form dun seul mot (MaConnexion, par exemple), qui pointe vers la base de
donnes et contient toutes les informations requises pour sy connecter. Le DSN se dfinit dans Windows.
Vous pouvez utiliser un DSN si vous vous connectez via un pilote ODBC install sur un systme Windows.
Une chane de connexion est une expression saisie la main qui identifie la base de donnes et fournit les
informations requises pour sy connecter, comme le montre lexemple suivant :
Driver={SQL Server};Server=Socrates;Database=AcmeMktg;
UID=wiley;PWD=roadrunner
Remarque : vous pouvez galement utiliser une chane de connexion si vous vous connectez via un pilote
ODBC install sur un systme Windows, mais il est plus facile dutiliser un DSN.
668
Haut de la page
A propos des connexions OLE DB

Vous pouvez utiliser un fournisseur OLE DB pour communiquer avec votre base de donnes (OLE DB nest
disponible que sous Windows NT, 2000 ou XP). Le fait de crer une connexion une OLE DB directe et
spcifique la base de donnes peut augmenter la vitesse de connexion en liminant lintermdiaire ODBC
entre votre application Web et la base de donnes.
Si vous ne prcisez pas de fournisseur OLE DB pour votre base de donnes, ASP utilise le fournisseur par
dfaut pour les pilotes ODBC afin de communiquer avec un pilote ODBC, lequel communiquera son tour
avec la base de donnes.
Diffrents fournisseurs OLE DB existent pour diffrentes bases de donnes. Vous pouvez obtenir des
fournisseurs OLE DB pour Microsoft Access et SQL Server en tlchargeant et en installant les packs
Microsoft Data Access Components (MDAC) 2.5 et 2.7 sur lordinateur Windows excutant IIS. Vous pouvez
tlcharger et installer les packs MDAC gratuitement partir du site web de Microsoft.
Remarque : assurez-vous que vous disposez de MDAC 2.5 avant dinstaller MDAC 2.7.
Vous pouvez tlcharger les fournisseurs OLE DB pour les bases de donnes Oracle depuis le site web
dOracle.
Pour crer une connexion OLE DB dans Dreamweaver, vous devez inclure un paramtre Provider
(Fournisseur) dans une chane de connexion. Voici par exemple des paramtres de fournisseurs OLE DB
courants pour les bases de donnes Access, SQL Server et Oracle, respectivement :
Provider=Microsoft.Jet.OLEDB.4.0;...
Provider=SQLOLEDB;...
Provider=OraOLEDB;...
Pour connatre le paramtre de votre fournisseur OLE DB, consultez la documentation du fournisseur de
votre pilote ou consultez votre administrateur systme.
Haut de la page
A propos des chanes de connexion

Une chane de connexion regroupe toutes les informations dont votre application Web a besoin pour se
connecter une base de donnes. Dreamweaver insre cette chane dans vos scripts de page ct serveur
afin que ceux-ci soient ultrieurement traits par votre serveur dapplication.
Une chane de connexion aux bases de donnes Microsoft Access et SQL Server se compose des
paramtres suivants, spars par des points-virgules :
Provider (Fournisseur) Indique le fournisseur OLE DB pour votre base de donnes. Voici par exemple des
paramtres de fournisseurs OLE DB courants pour les bases de donnes Access, SQL Server et Oracle,
respectivement :
Provider=Microsoft.Jet.OLEDB.4.0;...
Provider=SQLOLEDB;...
Provider=OraOLEDB;...
Pour connatre le paramtre de votre fournisseur OLE DB, consultez la documentation du fournisseur de
votre pilote ou consultez votre administrateur systme.
Si vous nincluez pas le paramtre Provider (Fournisseur), le fournisseur OLE DB par dfaut pour ODBC sera
utilis et vous devrez prciser un pilote ODBC appropri pour votre base de donnes.
Driver (Pilote) Indique le pilote ODBC utiliser si vous ne spcifiez pas de fournisseur OLE DB pour votre
669
base de donnes.
Server (Serveur) Indique le serveur hbergeant la base de donnes SQL Server si votre application Web
est excute sur un serveur diffrent.
Database (Base de donnes) Nom dune base de donnes SQL Server.
DBQ Chemin daccs une base de donnes base sur fichier (une base de donnes cre dans Microsoft
Access, par exemple). Le chemin est celui sur le serveur hbergeant le fichier de base de donnes.
UID Indique le nom de lutilisateur.
PWD Indique le mot de passe de lutilisateur.
DSN Nom de la source de donnes, le cas chant. Selon la faon dont vous dfinissez le DSN sur votre
serveur, vous pouvez omettre les autres paramtres de la chane de connexion. Par exemple, DSN=Results
peut constituer une chane de connexion valide si vous dfinissez les autres paramtres lorsque vous crez
le DSN.
Il est galement possible que ces paramtres aient un nom ou une utilisation diffrents pour dautres types
de bases de donnes. Pour plus dinformations, consultez la documentation du fournisseur de votre base de
donnes ou consultez votre administrateur systme.
Voici un exemple de chane de connexion crant une connexion ODBC une base de donnes Access
appele arbres.mdb :
Driver={Microsoft Access Driver (*.mdb)};
DBQ=C:\Inetpub\wwwroot\Research\trees.mdb
Voici un exemple de chane de connexion crant une connexion OLE DB un systme de base de donnes
SQL Server appel Mothra et se trouvant sur un serveur du nom de Gojira :
Provider=SQLOLEDB;Server=Gojira;Database=Mothra;UID=jsmith;
PWD=orlando8
Haut de la page
Cration dune connexion en utilisant un DSN local

Remarque : pour raliser les oprations prsentes cette section, vous devez avoir configur une
application ASP. Une base de donnes doit galement tre installe sur votre ordinateur local ou sur un
systme auquel vous pouvez accder en rseau ou par FTP.
Vous pouvez utiliser un DSN (Data Source Name, nom de source de donnes) pour crer une connexion
ODBC entre votre application Web et votre base de donnes. Un DSN est un nom contenant tous les
paramtres ncessaires pour tablir la connexion une base de donnes prcise laide dun pilote ODBC.
Comme vous pouvez uniquement spcifier un pilote ODBC dans un DSN, vous devez utiliser une chane de
connexion si vous souhaitez passer par un fournisseur OLE DB.
Vous pouvez utiliser un DSN dfini localement pour crer une connexion une base de donnes dans
Dreamweaver.
1. Dfinissez un DSN sur lordinateur Windows excutant Dreamweaver.
Pour obtenir des instructions, consultez les articles suivants sur le site Web de Microsoft :
Si votre ordinateur fonctionne sous Windows 2000, consultez larticle 300596 de la
base de connaissances Microsoft ladresse suivante :
http://support.microsoft.com/default.aspx?scid=kb;en-us;300596
Si votre ordinateur fonctionne sous Windows XP, consultez larticle 305599 de la
670
2. Ouvrez une page ASP dans Dreamweaver, puis accdez au panneau Bases de donnes
(Fentre > Bases de donnes).
3. Cliquez sur le bouton Plus (+) dans le panneau et slectionnez Nom de la source de
donnes (DSN) dans le menu.
4. Entrez un nom pour la nouvelle connexion, sans espaces ni caractres spciaux.
5. Activez loption Utilisation du DSN local et choisissez le DSN que vous souhaitez utiliser
dans le menu Nom de la source de donnes (DSN).
Si vous voulez utiliser un DSN local mais nen avez pas encore dfini, cliquez sur Dfinir
pour ouvrir ladministrateur de sources de donnes ODBC Windows.
6. Renseignez les zones Nom dutilisateur et Mot de passe.
7. Vous pouvez limiter le nombre dlments de base de donnes rcuprs par
Dreamweaver au moment de la conception en cliquant sur Avanc puis en saisissant un
nom de schma ou de catalogue.
Remarque : vous ne pouvez pas crer de schma ou de catalogue dans Microsoft
Access.
8. Cliquez sur Tester pour vous connecter la base de donnes, puis cliquez sur OK. Si la
connexion naboutit pas, double-cliquez sur la chane de connexion ou vrifiez les
paramtres du dossier dvaluation utilis par Dreamweaver pour traiter les pages
dynamiques.
Haut de la page
Cration dune connexion en utilisant un DSN distant

Remarque : pour raliser les oprations prsentes dans cette section, vous devez avoir configur une
application ASP. Une base de donnes doit galement tre installe sur votre ordinateur local ou sur un
systme auquel vous pouvez accder en rseau ou par FTP.
Remarque : Dreamweaver ne peut rcuprer que les DSN de serveur crs laide de ladministrateur de
source de donnes ODBC Windows.
Vous pouvez utiliser un DSN dfini sur un ordinateur distant pour crer une connexion une base de
donnes dans Dreamweaver. Si vous souhaitez utiliser un DSN distant, celui-ci doit tre dfini sur
lordinateur Windows excutant votre serveur dapplication (probablement IIS).
Remarque : comme vous pouvez uniquement spcifier un pilote ODBC dans un DSN, vous devez utiliser
une chane de connexion si vous souhaitez passer par un fournisseur OLE DB.
1. Dfinissez un DSN sur le systme distant excutant votre serveur dapplication.
Pour obtenir des instructions, consultez les articles suivants sur le site Web de Microsoft :
Si lordinateur distant fonctionne sous Windows 2000, consultez larticle 300596 de la
Si lordinateur distant fonctionne sous Windows XP, consultez larticle 305599 de la
2. Ouvrez une page ASP dans Dreamweaver, puis ouvrez le panneau Bases de donnes
3. Cliquez sur le bouton Plus (+) dans le panneau et slectionnez Nom de la source de
donnes (DSN) dans le menu.
5. Slectionnez Utilisation de la DSN sur le serveur dvaluation
671
Remarque : les utilisateurs Macintosh peuvent ignorer cette tape car toutes les
connexions des bases de donnes utilisent des DSN sur le serveur dapplication.
6. Tapez le DSN or ou cliquez sur le bouton DSN pour vous connecter au serveur et
slectionnez le DSN pour la base de donnes de votre choix, puis dfinissez les options.
7. Renseignez les zones Nom dutilisateur et Mot de passe.
Access.
dynamiques.
Haut de la page
Cration dune connexion en utilisant une chane de connexion

Vous pouvez utiliser une connexion sans DSN pour crer une connexion ODBC ou OLE DB entre votre
application Web et votre base de donnes. Il faut utiliser une chane de connexion pour crer ce type de
connexion.
2. Cliquez sur le bouton Plus (+) dans le panneau et slectionnez Chane de connexion
personnalise dans le menu. Dfinissez les options, puis cliquez sur OK.
4. Tapez une chane de connexion vers la base de donnes. Si vous nindiquez pas de
fournisseur de BD OLE dans la chane de connexion, cest--dire si vous ne saisissez
pas de paramtre Provider (Fournisseur), ASP utilisera automatiquement le
fournisseur de BD OLE pour les pilotes ODBC. Dans ce cas, vous devrez indiquer un
pilote ODBC appropri pour votre base de donnes.
Si votre site est hberg par un fournisseur daccs Internet et que vous ne connaissez
pas le chemin daccs complet votre base de donnes, utilisez la mthode MapPath
de lobjet de serveur ASP dans votre chane de connexion.
5. Si le pilote de base de donnes spcifi dans la chane de connexion nest pas install
sur le mme ordinateur que Dreamweaver, slectionnez Utilisation du pilote sur le
serveur dvaluation.
connexions aux bases de donnes utilisent le serveur dapplication.
Access.
dynamiques.
672
Connexion une base de donnes via un fournisseur daccs

Si vous tes un dveloppeur ASP travaillant pour un fournisseur daccs Internet, il est probable que vous ne
connaissez pas le chemin physique daccs aux fichiers que vous chargez, y compris celui de vos fichiers de
base de donnes.
Si votre fournisseur daccs ne dfinit pas de DSN pour vous ou ne le fait pas assez rapidement, vous devez
trouver un autre moyen de crer des connexions vos fichiers de base de donnes. Vous pouvez crer une
connexion sans DSN un fichier de base de donnes, mais une telle connexion nest possible que si vous
connaissez le chemin daccs physique du fichier de base de donnes sur le serveur du fournisseur daccs.
Vous pouvez obtenir le chemin daccs physique un fichier de base de donnes prsent sur un serveur en
utilisant la mthode MapPath de lobjet serveur ASP.
Remarque : les techniques prsentes dans cette section sont valables uniquement si votre base de
donnes est base sur un fichier, comme par exemple, une base de donnes Microsoft Access, qui stocke
les donnes dans un fichier .mdb.
Description des chemins daccs physiques et virtuels

Lorsque vous chargez vos fichiers sur un serveur distant en utilisant Dreamweaver, ces derniers sont placs
dans un dossier situ dans larborescence locale du serveur. Par exemple, sur un serveur excutant
Microsoft IIS, le chemin daccs vers votre page daccueil peut se prsenter comme suit :
c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm
Il sagit du chemin daccs physique vers votre fichier.

En revanche, lURL permettant douvrir votre fichier nutilise pas de chemin daccs physique. Elle utilise le
nom de serveur ou de domaine suivi dun chemin daccs virtuel, comme dans lexemple suivant :
www.plutoserve.com/jsmith/index.htm
Le chemin daccs virtuel, /jsmith/index.htm, remplace le chemin daccs physique,

c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm.
Recherche du chemin daccs physique dun fichier en utilisant le chemin

virtuel
Si vous travaillez avec un fournisseur daccs, il se peut que vous ne connaissiez pas le chemin daccs
physique des fichiers que vous chargez. Gnralement, les fournisseurs daccs vous fournissent un hte
FTP, parfois un rpertoire hte, ainsi quun nom de connexion et un mot de passe. Ils vous indiquent
galement une URL pour visualiser vos pages sur Internet, telle que www.plutoserve.com/jsmith/.
Si vous connaissez cette URL, vous pouvez obtenir le chemin daccs virtuel dun fichier : il sagit du chemin
qui suit le nom du serveur ou du domaine qui figure dans une URL. Une fois que vous connaissez le chemin
daccs virtuel, vous pouvez obtenir le chemin daccs physique un fichier prsent sur le serveur en
utilisant la mthode MapPath.
La mthode MacPath utilise le chemin daccs virtuel comme argument et renvoie le chemin daccs
physique et le nom du fichier. Voici la syntaxe de la mthode :
Server.MapPath("/virtualpath")
Si le chemin virtuel dun fichier est /jsmith/index.htm, lexpression suivante permet dobtenir son chemin
daccs physique :
Server.MapPath("/jsmith/index.htm")
673
Vous pouvez utiliser la mthode MapPath comme suit :

1. Ouvrez une page ASP dans Dreamweaver et basculez en mode Code (Affichage >
Code).
2. Saisissez lexpression suivante dans le code HTML de la page.
<%Response.Write(stringvariable)%>
3. Utilisez la mthode MapPath afin dobtenir une valeur pour largument
stringvariable.
Exemple :
<% Response.Write(Server.MapPath("/jsmith/index.htm")) %>
4. Passez au mode En direct (Affichage > En direct) pour afficher la page.
La page affiche le chemin physique du fichier sur le serveur dapplication, par exemple :
c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm
Pour plus dinformations sur la mthode MapPath, consultez la documentation en ligne
disponible avec Microsoft IIS.
Utilisation dun chemin daccs virtuel pour tablir une connexion une
base de donnes
Pour crire une chane de connexion sans DSN dans un fichier de base de donnes situ sur un serveur
distant, vous devez connatre le chemin daccs physique au fichier. Par exemple, voici une chane de
connexion sans DSN typique pour une base de donnes Microsoft Access :
DBQ=c:\Inetpub\wwwroot\accounts\users\jsmith\data\statistics.mdb
Si vous ne connaissez pas le chemin daccs physique vos fichiers sur le serveur distant, vous pouvez
lobtenir en utilisant la mthode MapPath dans votre chane de connexion.
1. Chargez le fichier de base de donnes sur le serveur distant et notez son chemin
daccs virtuel (par exemple, /jsmith/data/statistics.mdb).
2. Ouvrez une page ASP dans Dreamweaver, puis ouvrez le panneau Bases de donnes
3. Cliquez sur le bouton Plus (+) dans le panneau et slectionnez Chane de connexion
personnalise dans le menu.
5. Tapez la chane de connexion et utilisez la mthode MapPath pour fournir le paramtre
DBQ.
Supposons que le chemin virtuel vers votre base de donnes Microsoft Access soit
/jsmith/data/statistics.mdb. La chane de connexion peut tre exprime comme suit si
vous utilisez VBScript comme langage de script :
Driver={Microsoft Access Driver (*.mdb)};DBQ= & Server.MapPath
("/jsmith/data/statistics.mdb")
Lesperluette (&) est utilise pour concatner (combiner) deux chanes. La premire
chane est entre guillemets et la deuxime est fournie par lexpression
Server.MapPath. Lorsque les deux chanes sont combines, la chane suivante est
cre :
DBQ=C:\Inetpub\wwwroot\accounts\users\jsmith\data\statistics.mdb
674
Si vous utilisez JavaScript, lexpression est quasiment identique ; la seule diffrence

rside dans lutilisation dun signe Plus (+) au lieu dune esperluette (&) pour concatner
les deux chanes :
Driver={Microsoft Access Driver (*.mdb)};DBQ= + Server.MapPath
("/jsmith/data/statistics.mdb")
6. Slectionnez Utilisation du pilote sur le serveur dvaluation, cliquez sur Tester, puis
cliquez sur OK.
connexions aux bases de donnes utilisent le serveur dapplication.
Remarque : si la connexion choue, cliquez deux fois sur la chane de connexion ou
contactez votre fournisseur daccs pour vous assurer que le pilote de base de donnes
que vous avez spcifi dans la chane de connexion est install sur le serveur distant.
Vrifiez galement que le fournisseur daccs dispose de la version la plus rcente du
pilote. Par exemple, une base de donnes cre dans Microsoft Access 2000 ne
fonctionnera pas avec Microsoft Access Driver 3.5. Vous devez utiliser Microsoft Access
Driver, version 4.0 ou ultrieure.
7. Mettez jour la connexion de base de donnes des pages dynamiques existantes
(ouvrez la page dans Dreamweaver, double-cliquez sur le nom du jeu denregistrements
dans le panneau Liaisons ou Comportements de serveur, et slectionnez la connexion
que vous venez de crer dans le menu Connexion), et utilisez la nouvelle connexion
avec toutes les nouvelles pages que vous crerez.
Haut de la page
Modification ou suppression dune connexion une base de

donnes
Lorsque vous crez une connexion une base de donnes, Dreamweaver enregistre les informations de
connexion dans un fichier inclus, dans le sous-dossier Connections du dossier racine local du site. Vous
pouvez les modifier ou les supprimer manuellement dans le fichier ou en procdant comme suit :
Modification dune connexion

2. Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfonce (Macintosh) sur la connexion et choisissez Modifier la connexion dans le menu.
3. Modifiez les informations de connexion, puis cliquez sur OK.
Dreamweaver met automatiquement jour le fichier inclus, ce qui actualise toutes les
pages du site qui utilisent la connexion.
Suppression dune connexion

2. Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfonce (Macintosh) sur la connexion et choisissez Supprimer la connexion dans le
menu.
3. Dans la bote de dialogue qui saffiche, confirmez que vous souhaitez supprimer la
connexion.
Remarque : pour viter de recevoir des erreurs dues la suppression dune connexion,
675
mettez jour tous les jeux denregistrements qui utilisent lancienne connexion en
double-cliquant sur le nom du jeu denregistrements dans le panneau Liaisons et en
choisissant une nouvelle connexion.

676
Connexions aux bases de donnes pour les dveloppeurs PHP

A propos des connexions aux bases de donnes PHP
Etablissement dune connexion une base de donnes
Haut de la page
A propos des connexions aux bases de donnes PHP

Pour le dveloppement PHP, Dreamweaver prend uniquement en charge le systme de base de donnes MySQL. Les autres systmes de base
de donnes, tels que Microsoft Access ou Oracle ne sont pas pris en charge. MySQL est un logiciel ouvert que vous pouvez tlcharger
gratuitement partir dInternet des fins non commerciales. Pour plus dinformations, consultez le site Web MySQL, ladresse
http://dev.mysql.com/downloads/.
Pour raliser les oprations prsentes dans la prsente section, vous devez avoir configur une application PHP. Une base de donnes MySQL
doit galement tre installe sur votre ordinateur local ou sur un systme auquel vous pouvez accder en rseau ou par FTP.
Pour les besoins du dveloppement, tlchargez et installez la version Windows Essentials du serveur de base de donnes MySQL.
Haut de la page
Etablissement dune connexion une base de donnes

Pour tablir une connexion une base de donnes lors du dveloppement dune application PHP dans Dreamweaver, vous devez disposer dune
ou plusieurs bases de donnes MySQL et le serveur MySQL doit tre dmarr.
1. Ouvrez une page PHP dans Dreamweaver, puis ouvrez le panneau Bases de donnes (Fentre > Bases de donnes).
2. Cliquez sur le bouton Plus (+) dans le panneau, slectionnez Connexion MySQL dans le menu et dfinissez les options de la
bote de dialogue.
Entrez un nom pour la nouvelle connexion, sans espaces ni caractres spciaux.
Dans la zone Serveur MySQL, entrez une adresse IP ou un nom de serveur pour lordinateur qui hberge MySQL. Si
MySQL et PHP sexcutent sur le mme ordinateur, vous pouvez entrer localhost.
Entrez votre nom dutilisateur et votre mot de passe MySQL.
Dans la zone Base de donnes, entrez le nom de la base de donnes ou cliquez sur Slectionner et choisissez une base
de donnes dans la liste de bases de donnes MySQL, puis cliquez sur Tester.
Dreamweaver tente dtablir la connexion la base de donnes. Si la connexion choue, revrifiez le nom du serveur, le nom
dutilisateur et le mot de passe. Si la connexion naboutit toujours pas, vrifiez les paramtres du dossier dvaluation utilis
par Dreamweaver pour traiter les pages dynamiques.
Dreamweaver tente de deviner au mieux la valeur entrer automatiquement pour le prfixe dURL dans la catgorie Serveur
dvaluation de la bote de dialogue Dfinition du site. Toutefois, il peut parfois savrer ncessaire de modifier le prfixe
dURL pour garantir le fonctionnement de votre connexion. Assurez-vous que le prfixe dURL est bien lURL que les
utilisateurs entrent dans leur navigateur pour ouvrir lapplication Web, moins le nom de fichier (ou la page daccueil) de
lapplication.
3. Cliquez sur OK.
Remarque : si le message derreur Client does not support authentication protocol requested. Consider upgrading MySQL
client (Le client ne prend pas en charge le protocole didentification requis. Essayez de mettre jour le client MySQL.)
saffiche lors de lvaluation dune connexion de base de donnes PHP MySQL 4.1, consultez la section Rsolution des
messages derreur MySQL.
677
Haut de la page

Lorsque vous crez une connexion une base de donnes, Dreamweaver enregistre les informations de connexion dans un fichier inclus, dans le
sous-dossier Connections du dossier racine local du site. Vous pouvez les modifier ou les supprimer manuellement dans le fichier ou en procdant
comme suit :
Modification dune connexion

2. Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) sur la connexion et
choisissez Modifier la connexion dans le menu.
3. Modifiez les informations de connexion, puis cliquez sur OK.
Dreamweaver met automatiquement jour le fichier inclus, ce qui actualise toutes les pages du site qui utilisent la connexion.
Suppression dune connexion

2. Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) sur la connexion et
choisissez Supprimer la connexion dans le menu.
3. Dans la bote de dialogue qui saffiche, confirmez que vous souhaitez supprimer la connexion.
Remarque : pour viter les erreurs conscutives la suppression dune connexion, mettez jour chaque jeu
denregistrements utilisant lancienne connexion en double-cliquant sur le nom du jeu dans le panneau Liaisons et en
choisissant une nouvelle connexion dans la bote de dialogue Jeu denregistrements.
678

Rsolution des problmes d'autorisation
Rsolution des messages d'erreur Microsoft
Rsolution des messages d'erreur MySQL
Haut de la page
Rsolution des problmes d'autorisation
Les problmes d'autorisation sont la cause la plus frquente des erreurs d'accs aux dossiers ou aux fichiers. Si votre base de donnes est
installe sur un ordinateur quip de Windows 2000 ou Windows XP et si vous recevez un message d'erreur lorsque vous tentez d'afficher une
page dynamique dans un navigateur Web ou en mode En direct, l'erreur peut provenir d'un problme d'autorisation.
Le compte Windows qui tente d'accder la base de donnes ne dispose pas des droits suffisants. Le compte peut tre le compte anonyme
Windows (par dfaut, IUSR_computername) ou un compte utilisateur spcifique si la page a t scurise pour un accs authentifi.
Vous devez modifier les autorisations afin d'attribuer les droits d'accs appropris au compte IUSR_computername pour que le serveur Web
puisse accder au fichier de base de donnes. En outre, le dossier contenant le fichier de base de donnes doit galement disposer de certaines
autorisations pour crire dans cette base de donnes.
Si la page doit tre accde de manire anonyme, attribuez le contrle complet au compte IUSR_computername pour le dossier et le fichier de
base de donnes, comme indiqu dans la procdure ci-dessous.
En outre, si le chemin d'accs la base de donnes est rfrenc au moyen de la convention UNC (\\Serveur\Share), assurez-vous que les
Autorisations de partage attribuent les droits d'accs complets au compte IUSR_computername. Cette tape s'applique mme si le partage est
situ au niveau du serveur Web local.
Si vous copiez la base de donnes depuis un autre emplacement, il est possible qu'elle n'hrite pas des autorisations d'accs de son dossier de
destination et que vous deviez modifier les autorisations d'accs pour la base de donnes.
Vrification ou modification des autorisations de la base de donnes (Windows XP)

1. Assurez-vous que vous avez des privilges d'administrateur sur cet ordinateur.
2. Dans l'Explorateur Windows, localisez le fichier de la base de donnes ou le dossier contenant la base de donnes, cliquez
sur ce fichier ou ce dossier avec le bouton droit de la souris, puis slectionnez Proprits.
3. Cliquez sur l'onglet Scurit.
Remarque : Cette tape s'applique uniquement si vous utilisez un systme de fichiers NTFS. Si vous disposez d'un systme
de fichiers FAT, la bote de dialogue n'a pas d'onglet Scurit.
4. Si le compte IUSR_computername n'apparat pas dans la liste des noms d'utilisateur ou de groupe, cliquez sur le bouton
Ajouter pour le rajouter.
5. Dans la bote de dialogue de slection des utilisateurs ou des groupes, cliquez sur Avanc.
La bote de dialogue vous propose alors davantage d'options.
6. Cliquez sur le bouton des emplacements et slectionnez le nom de l'ordinateur.
7. Cliquez sur le bouton de recherche pour afficher une liste des noms de compte associs l'ordinateur.
8. Slectionnez le compte IUSR_computername et cliquez sur OK, puis cliquez une nouvelle fois sur OK pour refermer la bote
de dialogue.
9. Pour attribuer les droits d'accs complets au compte IUSR, cochez la case Contrle total et cliquez sur OK.
Vrification ou modification des autorisations de la base de donnes (Windows 2000)

1. Assurez-vous que vous avez des privilges d'administrateur sur cet ordinateur.
2. Dans l'Explorateur Windows, localisez le fichier de la base de donnes ou le dossier contenant la base de donnes, cliquez
sur ce fichier ou ce dossier avec le bouton droit de la souris, puis slectionnez Proprits.
3. Cliquez sur l'onglet Scurit.
Remarque : Cette tape s'applique uniquement si vous utilisez un systme de fichiers NTFS. Si vous disposez d'un systme
de fichiers FAT, la bote de dialogue n'a pas d'onglet Scurit.
4. Si le compte IUSR_computername n'est pas rpertori parmi les comptes Windows dans la bote de dialogue Autorisations Fichier, cliquez sur le bouton Ajouter pour l'ajouter.
5. Dans la bote de dialogue de slection des utilisateurs, ordinateurs ou groupes, choisissez le nom de l'ordinateur partir du
679
menu de recherche pour afficher une liste des noms de compte associs l'ordinateur.
6. Slectionnez le compte IUSR_computername et cliquez sur Ajouter.
7. Pour attribuer les droits d'accs complets au compte IUSR, slectionnez Contrle total dans le menu Type d'accs, puis
cliquez sur OK.
Pour une scurit accrue, les autorisations peuvent tre dfinies de faon ce que le droit d'accs en lecture soit dsactiv
pour le dossier Web contenant la base de donnes. Il ne sera pas permis de parcourir ce dossier, mais les pages Web
continueront d'accder la base de donnes.
Pour plus d'informations sur les autorisations du compte IUSR et du serveur Web, consultez les notes techniques du centre de
support technique Adobe :
Description de l'authentification anonyme et du compte IUSR l'adresse www.adobe.com/go/authentication_fr
Dfinition des autorisations d'un serveur Web IIS l'adresse www.adobe.com/go/server_permissions_fr
Haut de la page
Rsolution des messages d'erreur Microsoft
Ces messages d'erreur Microsoft peuvent se produire lorsque vous demandez une page dynamique au serveur si vous utilisez Internet Information
Server (IIS) avec un systme de base de donnes Microsoft tel que SQL Server ou Access.
Remarque : Adobe n'offre pas de support technique pour les logiciels tiers tels que Microsoft Windows et IIS. Si cette section ne vous permet pas
de rsoudre votre problme, contactez le support technique de Microsoft ou visitez le site Web de support technique Microsoft l'adresse
http://support.microsoft.com/.
Pour plus d'informations sur les erreurs de type 80004005, voir la section Guide de dpannage pour les erreurs de type 80004005 au niveau
des composants Active Server Pages et Microsoft Data Access (Q306518) sur le site Web de Microsoft l'adresse
http://support.microsoft.com/default.aspx?scid=kb;fr-fr;Q306518.
[Reference]80004005 - Data source name not found and no default driver specified (Le nom de la source de
donnes est introuvable et aucun pilote par dfaut n'est spcifi)
Cette erreur survient lorsque vous tentez de visualiser une page dynamique dans un navigateur Web ou en mode En direct. Le message d'erreur
varie en fonction de votre base de donnes et de votre serveur Web. D'autres variantes de ce message d'erreur incluent :
80004005Driver's SQLSetConnectAttr failed (Le paramtre SQLSetConnectAttr du pilote a chou)
80004005 - General error Unable to open registry key 'DriverId' (Erreur gnrale. Impossible d'ouvrir la cl du registre DriverId)
Les causes et les solutions possibles sont les suivantes :
La page ne parvient pas trouver le DSN. Assurez-vous qu'un DSN a t cr sur le serveur Web et sur l'ordinateur local.
Le DSN peut avoir t dfini en tant que DSN utilisateur, et non en tant que DSN systme. Supprimez le DSN utilisateur et
crez un DSN systme pour le remplacer.
Remarque : Si vous ne supprimez pas le DSN utilisateur, les noms DSN en double engendrent de nouvelles erreurs ODBC.
Si vous utilisez Microsoft Access, le fichier de base de donnes (.mdb) peut tre verrouill Ce verrouillage peut tre la consquence d'un DSN
avec un nom diffrent accdant la base de donnes. Dans l'Explorateur Windows, recherchez le fichier de verrouillage (.ldb) dans le dossier
contenant le fichier de base de donnes (.mdb) et supprimez-le. Si un autre DSN pointe vers le mme fichier de base de donnes, vous pouvez
supprimer ce DSN pour empcher tout risque d'erreur l'avenir. Redmarrez l'ordinateur aprs avoir apport des modifications.
[Reference]80004005Couldn't use (unknown)'; file already in use (Impossible d'utiliser "(inconnu)" ;

fichier en cours d'utilisation)
Cette erreur survient lorsque vous utilisez une base de donnes Microsoft Access et tentez de visualiser une page dynamique dans un navigateur
Web ou en mode En direct. Une variante de ce message d'erreur est 80004005 - Microsoft Jet database engine cannot open the file
(unknown) (Le moteur de base de donnes Jet ne peut pas ouvrir le fichier (inconnu)).
Ceci est probablement d un problme d'autorisations. Voici quelques causes et solutions spcifiques :
Le compte utilis par Internet Information Server (gnralement IUSR) peut ne pas disposer des droit d'accs Windows
adquats pour une base de donnes base sur fichier ou pour le dossier contenant le fichier. Vrifiez les droits d'accs du
compte IIS (IUSR) dans le gestionnaire utilisateur.
Il est possible que vous ne soyez pas autoris crer ou supprimer des fichiers temporaires. Vrifiez les autorisations
attribues au fichier et au dossier. Assurez-vous que vous tes autoris crer ou supprimer des fichiers temporaires. Les
fichiers temporaires sont gnralement crs dans le mme dossier que la base de donnes, mais ils peuvent galement tre
crs dans d'autres dossiers tels que /Winnt.
Sous Windows 2000, il peut tre ncessaire de modifier le dlai d'expiration pour le DSN de la base de donnes Access. Pour
modifier ce dlai, choisissez Dmarrer > Paramtres > Panneau de configuration > Outils d'administration > Sources de
donnes (ODBC). Cliquez sur l'onglet Systme, slectionnez le DSN appropri puis cliquez sur le bouton Configurer. Cliquez
sur le bouton Options et fixez la valeur de dlai d'expiration de la page 5000.
680
Si les problmes persistent, consultez les points suivants dans la base de connaissances Microsoft :
PRB : 80004005 Couldn't use (unknown)'; file already in use (Impossible d'utiliser "(inconnu)" ; fichier en cours d'utilisation)
l'adresse http://support.microsoft.com/default.aspx?scid=kb;fr-fr;Q174943.
PRB : La connectivit de la base de donnes Microsoft Access choue dans Active Server Pages l'adresse
PRB : Erreur Impossible d'ouvrir le fichier inconnu lors de l'utilisation d'Access l'adresse
[Reference]80004005Logon Failed() (Echec de connexion)

Cette erreur survient lorsque vous utilisez Microsoft SQL Server et tentez de visualiser une page dynamique dans un navigateur Web ou en mode
En direct.
Cette erreur est gnre par SQL Server s'il refuse ou ne reconnat pas le compte ou le mot de passe de connexion soumis (si vous utilisez une
scurit standard), ou si un compte Windows n'est pas associ un compte SQL (si vous utilisez une scurit intgre).
Les solutions possibles sont les suivantes :
Si vous utilisez une scurit standard, le nom de compte et le mot de passe peuvent tre incorrects. Essayez le compte et le
mot de passe de l'administrateur systme (ID utilisateur : sa et aucun mot de passe), qui doivent tre dfinis dans la ligne
de chane de connexion. Les DSN ne conservent pas les noms d'utilisateurs et les mots de passe.
Si vous utilisez une scurit intgre, vrifiez le compte Windows appelant la page et localisez son compte SQL associ (s'il
existe).
SQL Server n'autorise pas le trait de soulignement dans les noms de compte SQL. Si un utilisateur connecte manuellement le
compte Windows IUSR_nommachine un compte SQL portant le mme nom, il s'ensuivra automatiquement un chec.
Connectez un compte quelconque qui utilise un trait de soulignement un nom de compte SQL qui n'en comporte aucun.
[Reference]80004005Operation must use an updateable query (L'opration doit utiliser une requte
pouvant tre mise jour)
Cette erreur survient lorsqu'un vnement met jour un jeu d'enregistrements ou y insre des donnes.
Les autorisations dfinies pour le dossier contenant la base de donnes sont trop restrictives. Les droits d'accs IUSR doivent
tre dfinis sur lecture/criture.
Le fichier de base de donnes lui-mme ne dispose pas de droits d'accs en lecture/criture complets.
La base de donnes est peut-tre hors du rpertoire Inetpub/wwwroot. Bien que vous puissiez visualiser et parcourir les
donnes, vous risquez de ne pas pouvoir les mettre jour, moins que la base de donnes ne soit place dans le
rpertoire wwwroot.
Le jeu d'enregistrements repose sur une requte ne pouvant pas tre mise jour. Les relations sont de bons exemples de
requtes ne pouvant tre mises jour dans une base de donnes. Restructurez vos requtes de faon ce qu'elles puissent
tre mises jour.
Pour plus d'informations sur cette erreur, voir RBN : Erreur ASP 'La requte ne peut pas tre mise jour' lorsque vous
mettez l'enregistrement de la table jour dans la base de connaissance Microsoft l'adresse suivante
[Reference]80040e07Data type mismatch in criteria expression (Types de donnes non concordants dans
l'expression des critres)
Cette erreur survient lorsque le serveur essaie de traiter une page contenant un comportement de serveur Insrer l'enregistrement ou Mettre jour
l'enregistrement et que le comportement du serveur tente de dfinir la valeur d'une colonne Date/Heure d'une base de donnes Microsoft Access
sur une chane vide ("").
Microsoft Access utilise une saisie des caractres rigoureuse ; le logiciel impose un jeu de rgles strictes pour les valeurs de certaines colonnes.
La valeur d'une chane vide d'une requte SQL ne peut pas tre stocke dans une colonne Date/Heure Access. Actuellement, la seule solution
connue consiste viter d'insrer ou de mettre jour les colonnes Date/Heure Access avec des chanes vides ("") ou avec toute autre valeur ne
correspondant pas la gamme de valeurs spcifies pour le type de donnes.
[Reference]80040e10Too few parameters (Nombre de paramtres insuffisant)

Cette erreur survient lorsqu'une colonne spcifie dans votre requte SQL n'existe pas dans la table de la base de donnes. Vrifiez les noms
des colonnes de votre base de donnes par rapport votre requte SQL. Cette erreur est souvent due une typographie errone.
[Reference]80040e10COUNT field incorrect (Champ COUNT incorrect)

681
Cette erreur survient lorsque vous prvisualisez une page contenant un comportement de serveur Insrer l'enregistrement dans un navigateur
Web et que vous essayez de l'utiliser pour insrer un enregistrement dans une base de donnes Microsoft Access.
Vous tentez peut-tre d'insrer un enregistrement dans un champ de base de donnes qui comporte un point d'interrogation(?) dans son nom de
champ. Le point d'interrogation est un caractre spcial pour certains moteurs de bases de donnes, notamment Microsoft Access, et il ne doit
pas tre utilis pour les noms de tables de bases de donnes ou de champs.
Ouvrez votre systme de base de donnes, supprimez le point d'interrogation (?) des noms de champs et mettez jour les comportements de
serveur sur la page qui se rapporte ce champ.
[Reference]80040e14Syntax error in INSERT INTO statement (Erreur de syntaxe dans l'instruction INSERT
INTO)
Cette erreur survient lorsque le serveur tente de traiter une page contenant un comportement de serveur Insrer l'enregistrement.
Cette erreur rsulte gnralement d'un ou de plusieurs problmes, cits ci-dessous, relatifs au nom d'un champ, d'un objet ou d'une variable de la
base de donnes :
Utilisation d'un mot rserv en tant que nom. La majorit des bases de donnes disposent d'un jeu de mots rservs. Par
exemple, date est un mot rserv et ne peut pas tre utilis pour les noms de champs d'une base de donnes.
Utilisation de caractres spciaux dans le nom, tels que ceux mentionns ci-dessous :
./*:!#&-?
Utilisation d'un espace dans le nom.
L'erreur peut galement survenir lorsqu'un masque d'entre est dfini pour un objet de la base de donnes et que les donnes
insres ne sont pas conformes au masque.
Pour rsoudre le problme, vitez d'utiliser des mots rservs tels que date , name select , where et level
lorsque vous spcifiez des noms de colonnes dans votre base de donnes. Eliminez galement les espaces et les caractres
spciaux.
Consultez les pages Web suivantes pour des listes dtailles de mots rservs dans les systmes de bases de donnes
courants.
Microsoft Access l'adresse http://support.microsoft.com/default.aspx?scid=kb;fr-fr;Q209187
Microsoft SQL Server l'adresse http://msdn.microsoft.com/library/default.asp?url=/library/fr-fr/tsqlref/ts_ra-rz_9oj7.asp
MySQL l'adresse http://dev.mysql.com/doc/mysql/en/reserved-words.html
[Reference]80040e21ODBC error on Insert or Update (Erreur OBDC au moment d'insrer ou de mettre

jour)
Cette erreur survient lorsque le serveur tente de traiter une page contenant un comportement de serveur Mettre jour l'enregistrement ou Insrer
l'enregistrement. La base de donnes ne peut pas grer la mise jour ou l'insertion que le comportement de serveur tente de raliser.
Le comportement de serveur tente de mettre jour un champ de numrotation automatique d'une table de base de donnes
ou d'insrer un enregistrement dans un champ de numrotation automatique. Les champs de numrotation automatique sont
automatiquement complts par le systme de la base de donnes ; toute tentative faite pour les remplir manuellement est
voue l'chec.
Le type de donnes que le comportement de serveur met jour ou insre ne correspond pas celui du champ de la base de
donnes : insertion d'une date dans un champ boolen (oui/non), insertion d'une chane dans un champ numrique ou
insertion d'une chane la mise en forme incorrecte dans un champ Date/Heure.
[Reference]800a0bcdEither BOF or EOF is true (BOF ou EOF est gal True)

Cette erreur survient lorsque vous tentez de visualiser une page dynamique dans un navigateur Web ou en mode En direct.
Ce problme survient lorsque la page tente d'afficher des donnes partir d'un jeu d'enregistrements vide. Pour le rsoudre, appliquez le
comportement de serveur Afficher la rgion au contenu dynamique afficher sur la page, de la manire suivante :
1. Slectionnez le contenu dynamique de la page.
2. Dans le panneau Comportements de serveur, cliquez sur le bouton Plus (+) et choisissez Afficher la rgion > Afficher la rgion
si le jeu d'enregistrements n'est pas vide.
3. Slectionnez le jeu d'enregistrements dans lequel se trouve le contenu dynamique et cliquez sur OK.
4. Rptez les tapes 1 3 pour chaque lment de contenu dynamique sur la page.
Haut de la page
Rsolution des messages d'erreur MySQL

682
Le message d'erreur courant suivant peut survenir lors d'un test de connexion une base de donnes PHP avec MySQL 4.1 : Client does not
support authentication protocol requested. Consider upgrading MySQL client (Ce client ne prend pas en charge le protocole d'authentification
demand. Il peut tre ncessaire de mettre niveau le client MySQL).
Il peut tre ncessaire de revenir une version prcdente de MySQL ou d'installer PHP 5 et copier certaines bibliothques de liaison dynamique
(DLL). Vous trouverez des instructions dtailles dans la rubrique Configuration d'un environnement de dveloppement PHP.
683
Suppression de scripts de connexion

Utilisation de la commande Supprimer les scripts de connexion
Utilisation de la commande Supprimer les scripts de connexion
Haut de la page
Vous pouvez utiliser la commande Supprimer les scripts de connexion pour supprimer les scripts que Dreamweaver place dans un dossier distant
pour accder aux bases de donnes. Ces scripts ne sont ncessaires que lors de la phase de cration dans Dreamweaver.
Lorsque vous slectionnez l'option Utilisation du pilote sur le serveur d'valuation ou Utilisation de la DSN sur le serveur d'valuation dans la bote
de dialogue de connexion une base de donnes, Dreamweaver charge un script MMHTTPDB sur le serveur d'valuation. Ceci permet
Dreamweaver de manipuler le pilote de base de donnes distant avec le protocole HTTP, ce qui permet en retour Dreamweaver d'obtenir, dans
la base de donnes, les informations ncessaires la cration de votre site. Toutefois, ce fichier ne permet pas de voir les noms des sources de
donnes (DSN) dfinis sur l'ordinateur. Si les DSN et les bases de donnes ne sont pas protgs par un mot de passe, le script permet une
personne malveillante d'envoyer des commandes SQL la base de donnes.
Les fichiers de scripts MMHTTPDB se trouvent dans le dossier _mmServerScripts, qui est lui-mme situ la racine du site Web.
Remarque : Le navigateur de fichiers de Dreamweaver (le panneau Fichiers) ne montre pas le dossier _mmServerScripts. Celui-ci n'est visible
qu' partir d'un client FTP tiers ou du navigateur de fichiers.
Avec certaines configurations, ces scripts sont inutiles. Comme ces scripts ne sont pas utiliss lors du transfert des pages Web aux visiteurs du
site, il est conseill de ne pas les placer sur un serveur de production.
Si vous avez transfr le fichier de scripts MMHTTPDB sur un serveur de production, il est conseill de le supprimer. La commande Supprimer les
scripts de connexion efface automatiquement ces fichiers.
684

Configuration de l'inspecteur Proprits pour les procdures stockes ColdFusion et les commandes ASP
Haut de la page
Slectionnez la catgorie Donnes du menu Catgorie du panneau Insertion afin d'afficher un groupe de boutons permettant d'ajouter du contenu
dynamique et des comportements de serveur votre page.
Le nombre et le type de boutons apparaissant varient en fonction du type de document ouvert dans la fentre de document. Amenez la souris audessus d'une icne afin d'afficher une infobulle dcrivant la fonction de ce bouton.
Le panneau Insertion comprend des boutons qui permettent d'ajouter les lments suivants sur la page :
Jeu d'enregistrements
Texte ou tableaux dynamiques
Barres de navigation d'un enregistrement
Si vous passez en mode Code (Affichage > Code), il est possible que des panneaux supplmentaires apparaissent dans la
catgorie correspondante du panneau Insertion, ce qui vous permet d'insrer du code dans la page. Par exemple, si vous
visionnez une page ColdFusion en mode Code, un panneau CFML devient disponible dans la catgorie CFML du panneau
Insertion.
Plusieurs panneaux vous permettent de crer des pages dynamiques :
Slectionnez le panneau Liaisons (Fentre > Liaisons) pour dfinir des sources de contenu dynamique pour votre page et
ajouter le contenu dans la page.
Slectionnez Comportements du serveur (Fentre > Comportements du serveur) pour ajouter une logique ct serveur
dans vos pages dynamiques.
Slectionnez le panneau Bases de donnes (Fentre > Bases de donnes) pour explorer les bases de donnes ou crer
des connexions aux bases de donnes.
Slectionnez le panneau Composants (Fentre > Composants) afin d'inspecter, d'ajouter ou de modifier du code pour des
composants ColdFusion.
Remarque : Le panneau Composants n'est activ que si vous ouvrez une page ColdFusion.
Un comportement de serveur est l'ensemble des instructions insres dans une page dynamique au moment de la cration et
excutes sur le serveur lors de l'excution.
Vous trouverez un didacticiel consacr la configuration de l'espace de travail de dveloppement l'adresse

Une fois la connexion la base de donnes ralise, vous pouvez afficher sa structure et ses donnes dans Dreamweaver.
1. Ouvrez le panneau Base de donnes (Fentre > Bases de donnes).
Le panneau Base de donnes affiche toutes les bases de donnes pour lesquelles vous avez cr des connexions. Si vous
dveloppez un site ColdFusion, le panneau affiche toutes les bases de donnes pour lesquelles des sources de donnes ont
t dfinies dans ColdFusion Administrator.
Remarque : Dreamweaver recherche le site en cours sur le serveur ColdFusion dfini.
Si aucune base de donnes n'apparat dans le panneau, vous devez crer une connexion de base de donnes.
2. Pour afficher les tables, les procdures stockes et les modes dans la base de donnes, cliquez sur le signe plus (+) situe
685
Haut de la page
en regard de la connexion dans la liste.

3. Pour afficher les colonnes de la table, cliquez sur un nom de table.
Les icnes des colonnes refltent le type de donnes et indiquent la cl primaire de la table.
4. Pour afficher les donnes dans une table, cliquez sur le nom de la table dans la liste avec le bouton droit de la souris
(Windows) ou en appuyant sur Contrle (Macintosh) et choisissez Afficher les donnes dans le menu droulant.
Haut de la page
Les dveloppeurs d'applications Web dboguent souvent leurs pages en les vrifiant rgulirement dans un navigateur Web. Vous pouvez afficher
rapidement vos pages dynamiques dans un navigateur sans avoir les tlcharger manuellement sur un serveur au pralable.
Pour lancer un aperu des pages dynamiques, vous devez complter la catgorie Serveur d'valuation de la bote de dialogue Dfinition du site.
Vous pouvez configurer Dreamweaver pour utiliser des fichiers temporaires la place des fichiers d'origine. Avec cette option, Dreamweaver
excute une copie de la page sur un serveur Web avant de l'afficher dans votre navigateur (Dreamweaver efface ensuite le fichier temporaire du
serveur.) Pour dfinir cette option, slectionnez Edition > Prfrences > Aperu dans le navigateur.
L'option Aperu dans le navigateur ne tlcharge pas les pages associes (pages de rsultats ou d'informations dtailles), les fichiers
dpendants (tels que fichiers d'image) ou les inclusions ct serveur. Pour tlcharger un fichier manquant, choisissez Fentre > Site pour ouvrir
le panneau Site, slectionnez le fichier dans Dossier local et cliquez sur la flche haut bleue de la barre d'outils pour copier le fichier dans le
dossier du serveur Web.
Haut de la page
Les utilisateurs chevronns travaillant avec des systmes de base de donnes de grande envergure tels qu'Oracle devront limiter le nombre
d'lments de base de donnes rcuprs par Dreamweaver au moment de la conception. Une base de donnes Oracle peut contenir des
lments que Dreamweaver ne peut pas traiter au moment de la conception. Vous pouvez crer un schma dans Oracle, puis l'utiliser dans
Dreamweaver pour filtrer les lments indsirables au moment de la conception.
Remarque : Vous ne pouvez pas crer de schma ou de catalogue dans Microsoft Access.
D'autres utilisateurs peuvent avoir intrt limiter la quantit d'informations rcupres par Dreamweaver au moment de la conception. Certaines
bases de donnes contiennent des douzaines, voire des centaines de tableaux, et vous pouvez prfrer ne pas tous les rpertorier tous pendant
que vous travaillez. Un schma ou catalogue peut limiter le nombre d'lments de base de donnes rcuprs au moment de la conception.
Pour commencer, crez un schma ou un catalogue dans votre application de base de donnes pour pouvoir ensuite l'appliquer dans
Dreamweaver. Consultez la documentation de votre systme de base de donnes ou consultez votre administrateur systme.
Remarque : Vous ne pouvez pas appliquer un schma ou un catalogue dans Dreamweaver si vous dveloppez une application ColdFusion,
1. Ouvrez une page dynamique dans Dreamweaver, puis la fentre Bases de donnes (Fentre > Bases de donnes).
Si la connexion de base de donnes existe, cliquez sur cette connexion dans la liste avec le bouton droit de la souris
(Windows) ou en appuyant sur le bouton Contrle (Macintosh) et choisissez Modifier la connexion dans le menu droulant.
Si la connexion n'existe pas, cliquez sur le bouton Plus (+) en haut du panneau afin de la crer.
2. Cliquez sur Avanc dans la bote de dialogue de la connexion.
3. Indiquez votre schma ou catalogue et cliquez sur OK.
Configuration de l'inspecteur Proprits pour les procdures stockes ColdFusion et les

commandes ASP
Haut de la page
Modifiez la procdure stocke slectionne. Les options disponibles dpendent de la technologie de serveur utilise.
Modifiez les options votre convenance. Lorsque vous slectionnez une nouvelle option dans l'inspecteur, Dreamweaver met la page jour.
Haut de la page
Cet inspecteur Proprits s'affiche lorsque Dreamweaver rencontre un type d'entre inconnu. En gnral, cela est d une erreur de frappe ou
autre problme li la saisie de donnes.
Si vous modifiez le type de champ dans l'inspecteur Proprits et placez une valeur reconnue par Dreamweaver (par exemple, si vous corrigez la
faute d'orthographe) l'inspecteur Proprits se met jour pour afficher les proprits du type reconnu. Dfinissez les options suivantes dans
l'inspecteur Proprits :
Nom du champ Attribue un nom au champ. Cette zone est obligatoire et le nom doit tre unique.
Type Dfinit le type d'entre du champ. Le contenu de cette zone reflte la valeur du type d'entre apparaissant actuellement dans votre code
source HTML.
Valeur Dfinit la valeur du champ.
686
Paramtres Ouvre la bote de dialogue Paramtres pour que vous puissiez visualiser les attributs actuels du champ et ajouter ou supprimer des
attributs.
Voir aussi
Didacticiel consacr l'espace de travail de dveloppement
687
Conception de pages dynamiques

Dreamweaver et la conception de pages dynamiques
Dreamweaver et la conception de pages dynamiques
Haut de la page
Pour concevoir et crer un site Web dynamique avec succs, excutez la procdure gnrale suivante.
1. Conception de la page
La conception visuelle de la page constitue l'une des tapes cls dans la conception d'un site Web, qu'il soit statique ou
dynamique. En effet, lorsque vous ajoutez des lments dynamiques une page Web, son aspect fonctionnel dpend
largement de sa conception. Rflchissez attentivement la faon dont les utilisateurs interagiront avec chacune des pages et
avec le site Web dans son ensemble.
L'une des mthodes les plus courantes pour insrer un contenu dynamique dans une page Web consiste crer un tableau
pour prsenter le contenu puis importer le contenu dynamique dans une ou plusieurs des cellules du tableau. Cette
mthode vous permet de prsenter divers types d'informations dans un format structur.
2. Cration d'une source de contenu dynamique
Avant de pouvoir afficher des donnes dans une page, les sites Web dynamiques doivent tre associs une source de
contenu d'o ils peuvent extraire les donnes. Avant de pouvoir utiliser des sources de contenu dans une page Web,
effectuez les actions suivantes :
Crez une connexion avec la source de contenu dynamique (telle qu'une base de donnes) et avec le serveur
d'application charg du traitement de la page ; Crez la source de donnes l'aide du panneau Liaisons. Vous pouvez
ensuite slectionner et insrer la source de donnes dans la page.
Prcisez les informations de la base de donnes devant tre affiches ou les variables devant tre incluses dans la page
en crant un jeu d'enregistrements. Vous avez galement la possibilit de tester la requte depuis la bote de dialogue Jeu
d'enregistrements et de procder tous les rglages ncessaires avant de l'ajouter au panneau Liaisons.
Slectionnez et insrez des lments de contenu dynamique dans la page slectionne.
3. Ajout de contenu dynamique une page Web
Aprs avoir dfini un jeu d'enregistrements (ou toute autre source de donnes) et l'avoir ajout au panneau Liaisons, vous
pouvez insrer le contenu dynamique associ au jeu d'enregistrements dans la page. Grce l'interface base de menus de
Dreamweaver, il suffit de slectionner une source de contenu dynamique dans le panneau Liaisons et de l'insrer dans l'objet
de texte, d'image ou de formulaire appropri au sein de la page en cours pour ajouter des lments de contenu dynamique.
Lorsque vous insrez un lment de contenu dynamique ou un comportement de serveur dans une page, Dreamweaver
insre un script ct serveur dans le code source de la page. Ce script donne pour instruction au serveur de rcuprer des
donnes partir de la source dfinie et de les restituer dans la page Web. Pour insrer un contenu dynamique dans une
page Web, procdez de l'une des manires suivantes :
placez ce contenu au niveau du point d'insertion en mode Code ou Cration ;
remplacez une chane de texte ou un autre espace rserv ;
insrez le contenu dans un attribut HTML. Un contenu dynamique peut, par exemple, dfinir l'attribut src d'une image ou
l'attribut de valeur d'un champ de formulaire.
4. Ajout de comportements de serveur une page
En dehors de l'ajout de contenu dynamique, vous pouvez intgrer une logique applicative complexe dans des pages Web
l'aide des comportements de serveur. Les comportements de serveur correspondent des sections de code prdfinies ct
serveur qui ajoutent une logique applicative aux pages Web, ce qui optimise leur interactivit et leurs fonctionnalits.
Les comportements de serveur de Dreamweaver vous permettent d'ajouter une logique applicative un site Web sans que
vous ayez rdiger le code requis. Les comportements fournis avec Dreamweaver prennent en charge les types de
document ColdFusion, ASP et PHP. Les comportements de serveur sont dvelopps et tests de sorte tre rapides, fiables
et solides. Les comportements de serveur intgrs prennent en charge des pages adaptes diffrents types de platesformes et de navigateurs.
Grce l'interface pointer-cliquer de Dreamweaver, l'application de contenu dynamique et de comportements complexes
une page est aussi simple que l'insertion d'lments de texte et de conception. Les comportements de serveur suivants sont
688
disponibles :
Dfinition d'un jeu d'enregistrements partir d'une base de donnes existante. Le jeu d'enregistrements que vous
dfinissez est ensuite stock dans le panneau Liaisons.
Affichage de plusieurs enregistrements dans une mme page. Vous pouvez slectionner soit un tableau entier, soit des
cellules ou lignes prcises renfermant un contenu dynamique, puis dfinir le nombre d'enregistrements afficher sur
chaque page.
Cration et insertion d'un tableau dynamique dans une page, puis association du tableau un jeu d'enregistrements. Vous
pouvez ensuite modifier l'apparence du tableau et de la rgion rpte l'aide respectivement de l'inspecteur Proprits et
du comportement de serveur Rgion rpte.
Insertion d'un objet de texte dynamique dans une page. L'objet de texte que vous insrez est un lment provenant d'un
jeu d'enregistrements prdfini auquel vous appliquez le format de donnes de votre choix.
Cration de commandes de navigation entre enregistrements et d'tat des enregistrements, cration de pages
Principale/Dtails et de formulaires destins mettre jour les informations d'une base de donnes.
Affichage de plusieurs enregistrements partir d'un enregistrement de base de donnes.
Cration de liens de navigation de jeu d'enregistrements afin de permettre aux utilisateurs d'afficher les enregistrements
prcdant ou suivant un enregistrement de base de donnes.
Ajout d'un compteur d'enregistrements pour aider les utilisateurs suivre le nombre d'enregistrements renvoys et leur
emplacement dans le rsultat obtenu.
Vous pouvez galement enrichir les comportements de serveur de Dreamweaver en rdigeant vos propres comportements ou
en installant ceux rdigs par des tiers.
5. Test et dbogage de la page
Avant de rendre une page dynamique (ou un site Web entier) accessible sur le Web, il est ncessaire d'en tester les
fonctionnalits. Vous devriez galement examiner la faon dont les fonctionnalits de votre application peuvent tre adaptes
aux personnes souffrant d'un handicap.
Voir aussi
Ajout et modification d'images
689
Prsentation des sources de contenu dynamique

A propos des sources de contenu dynamique
A propos des jeux d'enregistrements
A propos des paramtres d'URL et de formulaire
A propos des variables de session
Variables d'application d'ASP et de ColdFusion
Variables de serveur ASP
Variables de serveur ColdFusion
Haut de la page
A propos des sources de contenu dynamique
Une source de contenu dynamique est un stock d'informations partir duquel il est possible de rcuprer du contenu dynamique en vue de
l'afficher dans une page Web. Diffrentes sources peuvent tre utilises comme sources de contenu dynamique : des informations enregistres
dans une base de donnes, mais aussi des valeurs envoyes au moyen d'un formulaire HTML, des valeurs contenues dans un objet de serveur,
etc.
Dreamweaver vous permet aisment d'tablir une connexion une base de donnes et de crer un jeu d'enregistrements partir duquel extraire
le contenu dynamique. Un jeu d'enregistrements correspond au rsultat d'une requte de base de donnes. Il permet d'extraire les informations
spcifiques demandes et de les afficher dans une page donne. L'utilisateur dfinit le jeu d'enregistrements en fonction des informations
prsentes dans la base de donnes et du contenu qu'il souhaite afficher.
Certains fournisseurs de technologie utilisent une terminologie diffrente pour dsigner un jeu d'enregistrements. Dans les technologies ASP et
ColdFusion, un jeu d'enregistrements est dfini comme requte. Si vous utilisez d'autres sources de donnes, telles que des entres utilisateur ou
des variables de serveur, le nom de la source de donnes dfini dans Dreamweaver est identique celui de la source de donnes.
Les sites Web dynamiques requirent une source de donnes partir de laquelle le contenu dynamique peut tre rcupr et affich.
Dreamweaver permet d'utiliser des bases de donnes, des procdures stockes, des variables de demande, d'URL, de serveur et de formulaire,
ainsi que d'autres sources de contenu dynamique. Suivant la source de donnes, il est possible soit de rcuprer un nouveau contenu pour
rpondre une demande, soit de modifier la page pour satisfaire aux besoins des utilisateurs.
Toute source de contenu dfinie dans Dreamweaver est ajoute la liste des sources de contenu du panneau Liaisons. Vous pouvez ensuite
insrer la source de contenu dans la page actuellement slectionne.
Haut de la page
A propos des jeux d'enregistrements
Les pages Web ne peuvent pas accder directement aux donnes stockes dans une base de donnes. Au lieu de cela, elles interagissent avec
un jeu d'enregistrements. Un jeu d'enregistrements correspond un sous-ensemble d'informations (ou enregistrements) extraits de la base de
donnes l'aide d'une requte de base de donnes. Une requte est une instruction de recherche conue pour trouver et extraire des
informations prcises stockes dans une base de donnes.
Si vous utilisez une base de donnes comme source de contenu d'une page Web dynamique, vous devez tout d'abord crer un jeu
d'enregistrements dans lequel seront stockes les donnes rcupres. Les jeux d'enregistrements servent d'intermdiaire entre la base de
donnes dans laquelle le contenu est enregistr et le serveur d'application qui gnre la page. Les jeux d'enregistrements sont stocks
temporairement dans la mmoire du serveur d'application, afin d'acclrer la rcupration de donnes. Le serveur supprime un jeu
d'enregistrements lorsqu'il n'est plus ncessaire.
Une requte peut gnrer un jeu d'enregistrements n'incluant que certaines colonnes, certains enregistrements ou encore une combinaison des
deux. Un jeu d'enregistrements peut galement inclure tous les enregistrements et toutes les colonnes d'une table de base de donnes. Toutefois,
comme les applications n'ont gnralement pas besoin de toutes les informations stockes dans une base de donnes, il est fortement conseill
d'essayer de limiter au maximum la taille des jeux d'enregistrements. De plus, comme le serveur Web stocke temporairement en mmoire le jeu
d'enregistrements, l'utilisation d'un jeu de taille limite conomise de la mmoire et peut de ce fait amliorer les performances du serveur.
Les requtes de base de donnes sont crites en SQL (Structured Query Language), langage simple permettant de rcuprer des informations
d'une base de donnes, mais aussi d'ajouter des donnes une base et d'en supprimer. Le gnrateur SQL fourni avec Dreamweaver permet de
crer des requtes simples sans matriser le langage SQL. Toutefois, si vous voulez crer des requtes SQL complexes, une connaissance de
base de ce langage vous permet de crer des requtes plus avances et vous offre davantage de souplesse pour la conception de pages
dynamiques.
Avant de dfinir un jeu d'enregistrements pour l'utiliser dans Dreamweaver, vous devez crer une connexion une base de donnes et saisir des
donnes dans la base si celle-ci n'en contient pas. Si vous n'avez pas encore dfini de connexion une base de donnes pour votre site,
690
consultez le chapitre consacr spcifiquement la mise en place d'une connexion une base de donnes dans le contexte de la technologie de
serveur que vous utilisez, et suivez les instructions fournies.
Haut de la page
A propos des paramtres d'URL et de formulaire
Les paramtres d'URL permettent de stocker les informations saisies par les utilisateurs. Pour dfinir un paramtre d'URL, vous devez crer un
formulaire ou un lien hypertexte utilisant la mthode GET pour l'envoi de donnes. Les informations sont annexes l'URL de la page demande
et communiques au serveur. Lorsque vous utilisez des variables d'URL, la chane de la requte contient une ou plusieurs paires nom-valeur
associes aux champs du formulaire. Ces paires nom-valeur sont annexes l'URL.
Les paramtres de formulaire permettent de stocker les informations rcupres dans la requte HTTP d'une page Web. Si vous crez un
formulaire utilisant la mthode POST, les donnes envoyes par le formulaire sont transmises au serveur. Avant de commencer, vrifiez que vous
avez transmis un paramtre de formulaire au serveur.
Haut de la page
A propos des variables de session
Les variables de session permettent de stocker et d'afficher des informations conserves pendant toute la dure de la visite (ou session) de
l'utilisateur. Le serveur cre un objet de session diffrent pour chaque utilisateur et le conserve pendant une priode dfinie ou jusqu' ce qu'il soit
explicitement clos.
Comme les variables de session sont conserves pendant toute la session de l'utilisateur, mme lorsque celui-ci passe d'une page l'autre dans
le site Web, elles conviennent parfaitement au stockage des prfrences de l'utilisateur. Les variables de session peuvent galement tre utilises
pour insrer une valeur dans le code HTML de la page, attribuer une valeur une variable locale ou fournir une valeur permettant d'valuer une
expression conditionnelle.
Avant de dfinir des variables de session pour une page, vous devez les crer dans le code source. Aprs avoir cr une variable de session
dans le code source de l'application Web, vous pouvez utiliser Dreamweaver pour rcuprer sa valeur et l'utiliser dans une page Web.
Fonctionnement des variables de session

Les variables de session stockent des informations (trs souvent des paramtres de formulaire ou d'URL envoys par les utilisateurs) et les
rendent accessibles toutes les pages de l'application pendant la dure de la visite d'un utilisateur. Ainsi, lorsqu'un utilisateur se connecte un
portail Web lui donnant accs une messagerie, des cours boursiers, des bulletins mto et des dossiers d'actualit, l'application Web stocke les
informations de connexion dans une variable de session qui identifie l'utilisateur dans toutes les pages du site. Cela permet l'utilisateur de ne
voir que le type de contenu qu'il a slectionn pendant qu'il parcourt le site. Les variables de session peuvent galement proposer un mcanisme
de scurit en mettant fin la session d'un utilisateur si le compte reste inactif pendant un certain temps. Cette mthode prsente aussi l'avantage
de librer les ressources de traitement et la mmoire du serveur lorsque les utilisateurs oublient de se dconnecter d'un site Web.
Les variables de session stockent les informations pendant toute la dure de la session d'un utilisateur. La session commence lorsque l'utilisateur
ouvre une page dans l'application et se termine lorsqu'il n'ouvre pas d'autre page dans l'application pendant un laps de temps donn ou lorsqu'il
met explicitement fin la session (en gnral, en cliquant sur un lien de dconnexion). Tant qu'elle existe, la session est spcifique un utilisateur
donn ; chaque utilisateur dispose donc d'une session qui lui est propre.
Faites appel aux variables de session pour stocker des informations auxquelles chaque page de l'application Web doit pouvoir accder. Ces
informations peuvent aller du nom de l'utilisateur ses prfrences pour la taille des polices l'cran, en passant par un indicateur signalant la
russite ou l'chec de sa connexion. Les variables de session sont galement souvent utilises pour assurer le suivi d'un comptage cumulatif, tel
que le nombre de questions auxquelles un utilisateur a rpondu correctement jusqu' prsent dans un quiz en ligne ou les produits qu'il a
slectionns dans un catalogue en ligne.
Les variables de session ne peuvent fonctionner que si le navigateur de l'utilisateur est configur pour accepter les cookies. Le serveur cre un
numro d'ID de session qui permet l'identification univoque de l'utilisateur lors de l'initialisation de la premire session, puis envoie au navigateur
de l'utilisateur un cookie contenant ce numro d'ID. Lorsque l'utilisateur demande une nouvelle page situe sur le serveur, celui-ci lit le cookie
dans le navigateur pour identifier l'utilisateur et rcuprer ses variables de session personnelles, stockes en mmoire.
Collecte, stockage et rcupration d'informations dans des variables de session

Avant de crer une variable de session, vous devez commencer par obtenir les informations stocker, puis les envoyer au serveur pour stockage.
Vous pouvez recueillir et envoyer des informations au serveur l'aide de formulaires HTML ou de liens hypertexte contenant des paramtres
d'URL. Vous pouvez galement obtenir des informations partir d'une base de donnes, des cookies stocks dans l'ordinateur d'un utilisateur ou
des en-ttes HTTP envoys par son navigateur avec une demande de page.
Un catalogue de produits utilisant des paramtres d'URL figs dans le code et crs l'aide d'un lien pour renvoyer des informations sur les
produits au serveur afin qu'elles soient stockes dans une variable de session est un exemple typique de stockage de paramtres d'URL dans les
variables de session. Quand un utilisateur clique sur le lien Add to shopping cart (Ajouter au panier), l'ID du produit est stocke dans une
variable de session pendant que l'utilisateur poursuit ses achats. Lorsqu'il passe la page de paiement, l'ID du produit stocke dans la variable de
session est rcupre.
Un sondage reposant sur un formulaire est un exemple typique de page stockant les paramtres de formulaire dans les variables de session. Le
formulaire renvoie l'information slectionne au serveur, o une page d'application note le sondage et stocke les rponses dans une variable de
session, afin, par exemple, de les transmettre une application qui regroupe les rponses de toutes les personnes ayant rpondu au sondage. Il
691
est galement possible que les informations soient stockes dans une base de donnes pour tre utilises ultrieurement.
Une fois que vous avez envoy les informations au serveur, vous pouvez les stocker dans des variables de session en ajoutant la page
spcifie par le paramtre de formulaire ou d'URL le code adapt votre modle de serveur. Appele page de destination, cette page est
spcifie soit dans l'attribut action du formulaire HTML, soit dans l'attribut href du lien hypertexte situ dans la premire page.
Aprs avoir stock une valeur dans une variable de session, vous pouvez utiliser Dreamweaver pour la rcuprer et l'utiliser dans une
application Web. Aprs avoir dfini la variable de session dans Dreamweaver, vous pouvez en insrer la valeur dans une page.
La syntaxe HTML de chaque attribut se prsente comme suit :
1
2
<form action="<var class="varname">destination.html</var>" method="get" name="<var

class="varname">myform</var>"> </form>
<param name="href"value="<dfn class="term">destination.html</dfn>">
Le choix de la technologie serveur et de la mthode d'obtention des informations dtermine le code utilis pour stocker les informations dans une
variable de session. La syntaxe de base de chaque technologie serveur se prsente comme suit :
ColdFusion
1
<CFSET session.<var class="varname">variable_name</var> = value>
ASP
1
<% Session("<var class="varname">variable_name</var>") = value %>
L'expression value correspond en gnral une expression de serveur telle que Request.Form("lastname"). Ainsi, si vous utilisez un paramtre
d'URL appel product (ou un formulaire HTML avec la mthode GET et un champ de texte appel product) pour recueillir des informations, les
instructions suivantes stockent les informations dans une variable de session appele prodID :
ColdFusion
1
<CFSET session.prodID = url.product>
ASP
1
<% Session("prodID") = Request.QueryString("product") %>
Si vous utilisez un formulaire HTML avec la mthode post et un champ de texte appel txtProduct pour recueillir les informations, les instructions
suivantes stockent alors ces informations dans la variable de session :
ColdFusion
1
<CFSET session.prodID = form.txtProduct>
ASP
1
<% Session("prodID") = Request.Form("txtProduct") %>
Exemple d'informations stockes dans des variables de session

Vous travaillez sur un site destin un vaste public de retraits. Dans Dreamweaver, ajoutez deux liens sur la page d'accueil du site pour que les
utilisateurs puissent modifier la taille du texte affich. Si l'utilisateur souhaite un affichage en caractres plus gros pour un texte plus facile lire, il
lui suffit de cliquer sur un lien ; s'il souhaite un texte de taille standard, il clique sur un autre lien.
692
Chaque lien comporte un paramtre d'URL appel fontsize. Il envoie au serveur la prfrence de texte de l'utilisateur, comme le montre l'exemple
suivant, spcifique Adobe ColdFusion :
1
2
<a href="resort.cfm?fontsize=large">Larger Text</a>

<a href="resort.cfm?fontsize=small">Normal Text</a>
Stockez la prfrence de texte de l'utilisateur dans une variable de session et de l'utiliser afin de dfinir la taille de police utiliser dans chaque
page demande par l'utilisateur.
En haut de la page de destination, saisissez le code suivant pour crer une session appele font_pref qui stocke la prfrence de l'utilisateur pour
la taille de police.
ColdFusion
1
<CFSET session.font_pref = url.fontsize>
ASP
1
<% Session("font_pref") = Request.QueryString("fontsize") %>
Lorsque l'utilisateur clique sur le lien hypertexte, la page envoie la page de destination la prfrence de texte de l'utilisateur dans un paramtre
d'URL. Le code de la page de destination stocke le paramtre d'URL dans la variable de session font_pref. Pendant la dure de la session de
l'utilisateur, toutes les pages de l'application rcuprent cette valeur et affichent la taille de police slectionne.
Haut de la page
Variables d'application d'ASP et de ColdFusion
Dans ASP et ColdFusion, les variables d'application permettent de mmoriser et d'afficher des informations conserves pendant toute la dure
d'utilisation de l'application, quel que soit l'utilisateur. La dure d'utilisation de l'application commence ds que le premier utilisateur demande une
page dans l'application et se termine avec l'arrt du serveur Web. (une application regroupe tous les fichiers se trouvant dans un rpertoire virtuel
et ses sous-rpertoires).
Les variables d'application tant conserves pendant toute la dure d'utilisation de l'application, quel que soit l'utilisateur, elles conviennent
parfaitement au stockage des informations ncessaires tous les utilisateurs, telles que l'heure et la date courantes. La valeur de la variable
d'application est dfinie dans le code de l'application.
Haut de la page
Variables de serveur ASP
Vous pouvez dfinir les variables de serveur ASP suivantes comme sources de contenu dynamique : Request.Cookie, Request.QueryString,
Request.Form, Request.ServerVariables et Request.ClientCertificates.
Haut de la page
Variables de serveur ColdFusion

Vous pouvez dfinir les variables de serveur ColdFusion suivantes :
Variables client Associent des donnes un client spcifique. Elles conservent l'tat de l'application pendant que l'utilisateur passe d'une page
l'autre et d'une session l'autre dans l'application. Conserver l'tat signifie conserver les informations d'une page (ou session) sur la suivante,
693
de faon ce que l'application se souvienne de l'utilisateur et de ses prcdents choix et prfrences.

Variables cookie Accdent aux cookies transmis au serveur par le navigateur.
Variables CGI Fournissent des informations sur le serveur excutant ColdFusion et sur le navigateur l'origine d'une demande de page, ainsi que
d'autres informations sur l'environnement de traitement.
Variables de serveur Sont accessibles tous les clients et toutes les applications du serveur. Elles sont conserves jusqu' l'arrt du serveur.
Variables locales Cres l'aide de la balise CFSET ou CFPARAM dans une page ColdFusion.
Voir aussi
694
Dfinition de sources de contenu dynamique

Dfinition un jeu d'enregistrements sans rdiger d'instructions SQL
Rdaction d'instructions SQL en vue de la dfinition d'un jeu d'enregistrements avanc
Cration de requtes SQL l'aide de l'arborescence Elments de base de donnes
Dfinition de paramtres d'URL
Dfinition de paramtres de formulaire
Dfinition de variables de session
Dfinition de variables d'application dans ASP et ColdFusion
Utilisation d'une variable comme source de donnes pour un jeu d'enregistrements de ColdFusion
Dfinition de variables de serveur
Mise en mmoire cache de sources de contenu
Modification ou suppression de sources de contenu
Copie d'un jeu d'enregistrements d'une page vers une autre
Dfinition un jeu d'enregistrements sans rdiger d'instructions SQL
Haut de la page
Vous pouvez crer un jeu d'enregistrements sans avoir entrer d'instructions SQL manuellement.
1. Dans la fentre de document, ouvrez la page devant utiliser le jeu d'enregistrements.
2. Choisissez Fentre > Liaisons pour afficher le panneau Liaisons.
3. Dans le panneau Liaisons, cliquez sur le bouton Plus (+) et choisissez Jeu d'enregistrements (Requte) dans le menu
droulant.
La bote de dialogue Jeu d'enregistrements simplifie s'affiche. Si vous dveloppez un site ColdFusion, la bote de dialogue
Jeu d'enregistrements qui s'affiche est lgrement diffrente. (Si la bote de dialogue Jeu d'enregistrements avance s'affiche,
cliquez sur le bouton Simple pour ouvrir sa version simplifie.)
4. Compltez les options de la bote de dialogue Jeu d'enregistrements pour votre type de document.
Pour obtenir des instructions, consultez les rubriques ci-dessous.
5. Cliquez sur le bouton Tester pour excuter la requte et vrifier qu'elle rcupre les informations attendues.
Si vous avez dfini un filtre qui utilise les paramtres saisis par l'utilisateur, saisissez une valeur dans la zone Valeur test et
cliquez sur OK. Si la cration d'une instance du jeu d'enregistrements aboutit, une table contenant les donnes extraites du
jeu d'enregistrements s'affiche.
6. Cliquez sur OK pour ajouter le jeu d'enregistrements la liste des sources de contenu disponibles du panneau Liaisons.
Options de la bote de dialogue Jeu d'enregistrements simplifie (PHP, ASP)

1. Dans la zone Nom, saisissez le nom du jeu d'enregistrements.
Il est d'usage d'ajouter le prfixe rs aux noms des jeux d'enregistrements, afin de les distinguer des autres noms d'objet dans
le code, par exemple : rsPressReleases.
Les noms des jeux d'enregistrements ne peuvent contenir que des lettres, des chiffres et des caractres de soulignement (_).
Ils ne doivent pas comporter d'espaces ni de caractres spciaux.
2. Slectionnez une connexion dans le menu droulant Connexion.
Si aucune connexion n'apparat dans la liste, cliquez sur Dfinir pour en crer une.
3. Dans le menu droulant Table, slectionnez la table de base de donnes qui fournira des donnes au jeu d'enregistrements.
Ce menu droulant rpertorie toutes les tables de la base de donnes spcifie.
4. Pour inclure un sous-ensemble des colonnes de la table dans le jeu d'enregistrements, cliquez sur Slectionnes, puis cliquez
sur les colonnes souhaites tout en maintenant la touche Ctrl (Windows) ou Commande (Macintosh) enfonce.
5. Pour limiter le nombre d'enregistrements renvoys depuis la table, compltez la section Filtre :
Dans le premier menu droulant, slectionnez un champ de la table comparer la valeur de rfrence dfinie.
695
Dans le deuxime menu droulant, slectionnez une expression conditionnelle pour comparer la valeur slectionne dans
chaque enregistrement la valeur de rfrence.
Dans le troisime menu droulant, slectionnez Valeur entre.
Dans la zone, saisissez la valeur test.
Si la valeur indique dans un enregistrement rpond aux conditions de filtrage, l'enregistrement est inclus dans le jeu
d'enregistrements.
6. (Facultatif) Pour trier les enregistrements, slectionnez une colonne de tri, puis indiquez si les enregistrements doivent tre
tris dans l'ordre croissant (1, 2, 3... ou A, B, C...) ou dcroissant.
7. Cliquez sur Tester pour vous connecter la base de donnes et crer une instance de la source de donnes, et cliquez sur
OK pour fermer la source de donnes.
Un tableau rpertoriant les donnes renvoyes s'affiche. Chaque ligne contient un enregistrement et chaque colonne un
champ de cet enregistrement.
8. Cliquez sur OK. Le jeu d'enregistrements que vous venez de dfinir s'affiche dans le panneau Liaisons.
Options de la bote de dialogue Jeu d'enregistrements simplifie (ColdFusion)

Dfinissez un jeu d'enregistrements pour les types de document ColdFusion comme source de contenu dynamique, sans qu'il soit ncessaire de
rdiger manuellement des instructions SQL.
Il est d'usage d'ajouter le prfixe rs aux noms des jeux d'enregistrements afin de les distinguer des autres noms d'objet dans
le code. Par exemple : rsPressReleases
2. Si vous dfinissez un jeu d'enregistrements pour un composant ColdFusion (si un fichier CFC est ouvert dans Dreamweaver),
slectionnez une fonction CFC existante dans le menu droulant Fonction, ou cliquez sur le bouton Nouvelle fonction pour
crer une fonction.
Remarque : Le menu droulant Fonction n'est disponible que si le document actuel est un fichier CFC, et si vous pouvez
accder un ordinateur excutant ColdFusion MX 7 ou version ultrieure.
Le jeu d'enregistrements sera dfini dans cette fonction.
3. Slectionnez une source de donnes dans le menu droulant Source de donnes.
Si le menu droulant ne contient aucune source de donnes, vous devez crer une source de donnes ColdFusion.
4. Dans les zones Nom d'utilisateur et Mot de passe, tapez le nom d'utilisateur et le mot de passe permettant d'accder au
serveur d'application ColdFusion, le cas chant.
Il se peut qu'un nom d'utilisateur et un mot de passe soient ncessaires pour accder aux sources de donnes dans
ColdFusion. S'ils ne vous ont pas t communiqus, contactez l'administrateur ColdFusion de votre socit.
5. Dans le menu droulant Table, slectionnez la table de base de donnes qui fournira des donnes au jeu d'enregistrements.
Ce menu droulant rpertorie toutes les tables de la base de donnes spcifie.
6. Pour inclure un sous-ensemble des colonnes de la table dans le jeu d'enregistrements, cliquez sur Slectionnes, puis cliquez
7. Pour limiter le nombre d'enregistrements renvoys depuis la table, compltez la section Filtre :
Dans le premier menu droulant, slectionnez un champ de la table comparer la valeur de rfrence dfinie.
Dans le deuxime menu droulant, slectionnez une expression conditionnelle pour comparer la valeur slectionne dans
chaque enregistrement la valeur de rfrence.
Dans le troisime menu droulant, slectionnez Valeur entre.
Dans la zone, saisissez la valeur test.
Si la valeur indique dans un enregistrement rpond aux conditions de filtrage, l'enregistrement est inclus dans le jeu
d'enregistrements.
8. (Facultatif) Pour trier les enregistrements, slectionnez une colonne de tri, puis indiquez si les enregistrements doivent tre
tris dans l'ordre croissant (1, 2, 3... ou A, B, C...) ou dcroissant.
9. Cliquez sur Tester pour vous connecter la base de donnes et crer une instance de la source de donnes.
Un tableau rpertoriant les donnes renvoyes s'affiche. Chaque ligne contient un enregistrement et chaque colonne un
champ de cet enregistrement. Cliquez sur OK pour fermer le jeu d'enregistrements test.
696
10. Cliquez sur OK. Le jeu d'enregistrements ColdFusion que vous venez de dfinir s'affiche dans le panneau Liaisons.
Rdaction d'instructions SQL en vue de la dfinition d'un jeu d'enregistrements avanc
Haut de la page
Rdigez vos propres instructions SQL l'aide de la bote de dialogue Jeu d'enregistrements avance, ou crez une instruction SQL l'aide de
l'arborescence Elments de base de donnes graphique.
1. Dans la fentre de document, ouvrez la page devant utiliser le jeu d'enregistrements.
3. Dans le panneau Liaisons, cliquez sur le bouton Plus (+) et choisissez Jeu d'enregistrements (Requte) dans le menu
droulant.
La bote de dialogue Jeu d'enregistrements avance s'affiche. Si vous dveloppez un site ColdFusion, la bote de dialogue Jeu
d'enregistrements qui s'affiche est lgrement diffrente. (Si la bote de dialogue Jeu d'enregistrements simplifie s'affiche la
place, cliquez sur le bouton Avanc pour en ouvrir la version avance.)
4. Dfinissez les options de la bote de dialogue Jeu d'enregistrements avance.
Pour obtenir des instructions, consultez les rubriques ci-dessous.
5. Cliquez sur le bouton Tester pour excuter la requte et vrifier qu'elle rcupre les informations attendues.
Si vous avez dfini un filtre qui utilise les paramtres saisis par l'utilisateur, la bote de dialogue Valeur test s'affiche lorsque
vous cliquez sur le bouton Tester. Saisissez une valeur dans la zone Valeur test et cliquez sur OK. Si la cration d'une
instance du jeu d'enregistrements aboutit, une table contenant les donnes du jeu d'enregistrements s'affiche.
6. Cliquez sur OK pour ajouter le jeu d'enregistrements la liste des sources de contenu disponibles du panneau Liaisons.
Options de la bote de dialogue Jeu d'enregistrements avance (PHP, ASP)

Dfinissez un jeu d'enregistrements comme source de contenu dynamique en rdigeant une instruction SQL personnalise ou en crant une
instruction SQL au moyen de l'arborescence graphique Elments de base de donnes.
Il est d'usage d'ajouter le prfixe rs aux noms des jeux d'enregistrements, afin de les distinguer des autres noms d'objet dans
le code. Par exemple : rsPressRelease
2. Slectionnez une connexion dans le menu droulant Connexion.
3. Saisissez une instruction SQL dans la zone de texte SQL ou utilisez l'arborescence graphique Elments de base de donnes
situe au bas de la bote de dialogue pour crer une instruction SQL partir du jeu d'enregistrements slectionn.
Pour crer une instruction SQL l'aide de l'arborescence Elments de base de donnes, procdez comme suit :
Vrifiez que la zone de texte SQL est vierge.
Dveloppez les branches de l'arborescence jusqu' ce que vous trouviez l'objet de base de donnes souhait, par
exemple une colonne de table ou une procdure stocke dans la base de donnes.
Slectionnez l'objet de base de donnes et cliquez sur l'un des boutons situs droite de l'arborescence.
Par exemple, si vous slectionnez une colonne de table, les boutons disponibles sont SELECT, WHERE et ORDER BY.
Cliquez sur l'un de ces boutons pour insrer l'instruction associe dans l'instruction SQL.
Vous pouvez galement utiliser une instruction SQL prdfinie issue d'une procdure stocke en slectionnant la
procdure stocke dans l'arborescence Elments de base de donnes et en cliquant sur le bouton Procdure.
Dreamweaver remplit automatiquement les zones SQL et Variable.
4. Si l'instruction SQL contient des variables, dfinissez leurs valeurs dans la zone Variables en cliquant sur le bouton Plus (+) et
en saisissant le nom de la variable, son type (entier, texte, date ou nombre virgule flottante), sa valeur par dfaut (celle que
doit prendre la variable si aucune valeur d'excution n'est renvoye) et sa valeur d'excution.
Remarque : Lorsque vous employez des variables dans une instruction SQL dans PHP, Dreamweaver ajoute
automatiquement un signe dollar au dbut du nom de la variable. N'en ajoutez pas un manuellement (tapez donc
nomcolonne et pas $nomcolonne ).
Si l'instruction SQL contient des variables, assurez-vous que la colonne Valeur par dfaut de la section Variables contient des
valeurs test correctes.
La valeur d'excution correspond gnralement un paramtre d'URL ou de formulaire saisi par l'utilisateur dans un champ
de formulaire HTML.
Paramtres d'URL dans la colonne Valeur d'excution :
697
Modle de serveur
Expression de la valeur d'excution dans le cas d'un paramtre d'URL
ASP
Request.QueryString(formFieldName)
PHP
$_GET['formFieldName']
Paramtres de formulaire dans la colonne Valeur d'excution.
Modle de
serveur
Expression de la valeur d'excution dans le cas d'un paramtre de

formulaire
ASP
Request.Form(formFieldName)
PHP
$_POST['formFieldName']
5. Cliquez sur Tester pour vous connecter la base de donnes et crer une instance du jeu d'enregistrements.
Si l'instruction SQL contient des variables, vrifiez que la colonne Valeur par dfaut de la section Variables contient des
valeurs test correctes avant de cliquer sur Tester.
Un tableau rpertoriant les donnes de votre jeu d'enregistrements s'affiche alors. Chaque ligne contient un enregistrement et
chaque colonne un champ de cet enregistrement. Cliquez sur OK pour effacer le jeu.
6. Si le rsultat vous convient, cliquez sur OK.
Options de la bote de dialogue Jeu d'enregistrements avance (ColdFusion)

La bote de dialogue Jeu d'enregistrements avance vous permet de rdiger des requtes SQL personnalises ou de crer des requtes SQL au
moyen de l'interface pointer-cliquer de l'arborescence Elments de base de donnes.
Il est d'usage d'ajouter le prfixe rs aux noms des jeux d'enregistrements afin de les distinguer des autres noms d'objet dans
le code. Par exemple : rsPressReleases
Si vous dfinissez un jeu d'enregistrements pour un composant ColdFusion (si un fichier CFC est ouvert dans Dreamweaver),
slectionnez une fonction CFC existante dans le menu droulant Fonction, ou cliquez sur le bouton Nouvelle fonction pour
crer une fonction.
Remarque : Le menu droulant Fonction n'est disponible que si le document actuel est un fichier CFC, et si vous pouvez
accder un ordinateur excutant ColdFusion MX 7 ou version ultrieure.
Le jeu d'enregistrements sera dfini dans cette fonction.
2. Slectionnez une source de donnes dans le menu droulant Source de donnes.
Si le menu droulant ne contient aucune source de donnes, vous devez au pralable crer une source de donnes
ColdFusion.
3. Dans les zones Nom d'utilisateur et Mot de passe, tapez le nom d'utilisateur et le mot de passe permettant d'accder au
serveur d'application ColdFusion, le cas chant.
Il se peut qu'un nom d'utilisateur et un mot de passe soient ncessaires pour accder aux sources de donnes dans
ColdFusion. S'ils ne vous ont pas t communiqus, contactez l'administrateur ColdFusion de votre socit.
4. Saisissez une instruction SQL dans la zone de texte SQL ou utilisez l'arborescence graphique Elments de base de donnes
situe au bas de la bote de dialogue pour crer une instruction SQL partir du jeu d'enregistrements slectionn.
5. (Facultatif) Pour crer une instruction SQL l'aide de l'arborescence Elments de base de donnes, procdez comme suit :
Vrifiez que la zone de texte SQL est vierge.
Dveloppez les branches de l'arborescence jusqu' ce que vous trouviez l'objet souhait, par exemple une colonne de
table.
Slectionnez l'objet de base de donnes et cliquez sur l'un des boutons situs droite de l'arborescence.
Par exemple, si vous slectionnez une colonne de table, les boutons disponibles sont SELECT, WHERE et ORDER BY.
Cliquez sur l'un de ces boutons pour insrer l'instruction associe dans l'instruction SQL.
698
Si l'instruction SQL contient des paramtres, dfinissez leurs valeurs dans la zone Paramtres en cliquant sur le bouton
Plus (+) et en saisissant le nom du paramtre et sa valeur par dfaut (celle que doit prendre le paramtre si aucune valeur
d'excution n'est renvoye).
Si l'instruction SQL contient des paramtres, vrifiez que la colonne Valeur par dfaut de la zone Paramtres contient des
valeurs test correctes.
Les paramtres de la page vous permettent d'indiquer les valeurs par dfaut des rfrences aux valeurs d'excution
contenues dans vos instructions SQL. Par exemple, l'instruction SQL suivante slectionne un enregistrement d'une base de
donnes rpertoriant les employs d'une entreprise suivant la valeur du matricule de l'employ. Vous pouvez attribuer une
valeur par dfaut ce paramtre pour vous assurer qu'une valeur d'excution sera toujours renvoye. Dans l'exemple suivant,
FormFieldName dsigne un champ de formulaire dans lequel les utilisateurs saisissent leur matricule :
1
SELECT * FROM Employees WHERE EmpID = + (Request.Form(<dfn

class="term">#FormFieldName#)</dfn>)
La bote de dialogue Add Page Parameters (Ajouter des paramtres de page) contiendrait alors une paire nom-valeur
semblable celle prsente ci-dessous :
Nom
FormFieldName
Valeurs par dfaut
0001
La valeur d'excution correspond gnralement un paramtre d'URL ou de formulaire saisi par l'utilisateur dans un champ
de formulaire HTML.
6. Cliquez sur Tester pour vous connecter la base de donnes et crer une instance du jeu d'enregistrements.
Si l'instruction SQL contient des rfrences des valeurs d'excution, vrifiez que la colonne Valeur par dfaut du champ
Paramtres de la page contient des valeurs test correctes avant de cliquer sur Tester.
Un tableau rpertoriant les donnes de votre jeu d'enregistrements s'affiche alors. Chaque ligne contient un enregistrement et
chaque colonne un champ de cet enregistrement. Cliquez sur OK pour effacer le jeu.
Dfinition de paramtres dans une instruction SQL (ColdFusion)

Dfinissez des paramtres dans une instruction SQL ; la valeur par dfaut est celle attribue au paramtre lorsque aucune valeur d'excution n'est
renvoye.
1. Slectionnez un paramtre dans le menu droulant Nom.
2. Dans la zone Paramtre par dfaut, saisissez la valeur par dfaut que vous souhaitez attribuer au paramtre, et cliquez sur
OK.
Dfinition de paramtres dans une instruction SQL (PHP)

Dfinissez des paramtres dans une instruction SQL ; la valeur par dfaut est celle attribue au paramtre lorsque aucune valeur d'excution n'est
renvoye.
1. Entrez un nom de paramtre dans la zone Nom.
2. Dans la zone Paramtre par dfaut, saisissez la valeur par dfaut que vous souhaitez attribuer au paramtre.
3. Tapez une valeur d'excution dans la zone Valeur d'excution puis sur OK.
Cration de requtes SQL l'aide de l'arborescence Elments de base de donnes
Haut de la page
Au lieu de saisir manuellement des instructions SQL dans la zone SQL, vous pouvez utiliser l'interface pointer-cliquer de l'arborescence Elments
de base de donnes pour crer des requtes complexes SQL. L'arborescence Elments de base de donnes permet de slectionner des objets
de base de donnes et de les lier au moyen des instructions SQL SELECT, WHERE et ORDER BY. Aprs avoir cr une requte SQL, vous
pouvez dfinir des variables dans la section Variables de la bote de dialogue.
Les deux exemples suivants prsentent deux instructions SQL et dcrivent les tapes de cration de ces instructions l'aide de l'arborescence
Elments de base de donnes de la bote de dialogue Jeu d'enregistrements avance.
699
Exemple : Slection d'une table

Dans cet exemple, la requte slectionne l'intgralit de la table Employees. L'instruction SQL dfinissant la requte se prsente de la faon
suivante :
1
SELECT * FROM Employees
Pour crer cette requte, procdez comme suit.

1. Dveloppez la branche Tables pour afficher toutes les tables de la base de donnes slectionne.
2. Slectionnez la table Employees.
3. Cliquez sur le bouton Select.
4. Cliquez sur OK pour ajouter le jeu d'enregistrements au panneau Liaisons.
Exemple : Slection de lignes spcifiques d'une table et classement des rsultats

Dans l'exemple suivant, la requte slectionne deux lignes de la table Employees, puis slectionne le type de tche (job) l'aide d'une variable
que vous devez dfinir. Les rsultats sont ensuite classs par nom d'employ.
1
2
3
4
SELECT emplNo, emplName

FROM Employees
WHERE emplJob = 'varJob'
ORDER BY emplName
1. Dveloppez la branche Tables pour afficher toutes les tables de la base de donnes slectionne, puis dveloppez la table
Employees pour afficher les lignes individuelles de la table.
2. Gnrez l'instruction SQL en procdant de la faon suivante :
Slectionnez emplNo et cliquez sur le bouton Select.
Slectionnez emplName et cliquez sur bouton Select.
Slectionnez emplJob et cliquez sur le bouton Where.
Slectionnez emplName et cliquez sur le bouton Order By.
3. Placez le point d'insertion aprs WHERE emplJob dans la zone de texte SQL et tapez ='varJob' (y compris le signe gal).
4. Dfinissez la variable 'varJob' en cliquant sur le bouton Plus (+) de la zone Variables et en saisissant les valeurs suivantes
dans les colonnes Nom, Valeur par dfaut et Valeur d'excution : varJob, CLERK, Request("job").
5. Cliquez sur OK pour ajouter le jeu d'enregistrements au panneau Liaisons.
Haut de la page
Dfinition de paramtres d'URL
Les paramtres d'URL permettent de stocker les informations saisies par les utilisateurs. Avant de commencer, vrifiez que vous avez transmis un
paramtre de formulaire ou d'URL au serveur. Aprs avoir dfini la variable d'URL, vous pouvez utiliser sa valeur dans la page slectionne.
1. Dans la fentre de document, ouvrez la page devant utiliser la variable.
3. Dans le panneau Liaisons, cliquez sur le bouton Plus (+) et choisissez l'une des options suivantes dans le menu droulant :
Types de
document
Elment du menu du panneau Liaisons permettant de dfinir une variable

d'URL
ASP
Variable de demande > Request.QueryString
ColdFusion
Variable d'URL
PHP
Variable d'URL
4. Dans la bote de dialogue Variable d'URL, tapez le nom de la variable d'URL dans la zone puis cliquez sur OK.
En gnral, le nom de la variable d'URL correspond au nom du champ du formulaire HTML ou de l'objet utilis pour obtenir
sa valeur.
700
5. La variable d'URL s'affiche dans le panneau Liaisons.
Haut de la page
Dfinition de paramtres de formulaire
Les paramtres de formulaire permettent de stocker les informations rcupres dans la requte HTTP d'une page Web. Si vous crez un
formulaire utilisant la mthode POST, les donnes envoyes par le formulaire sont transmises au serveur. Avant de commencer, vrifiez que vous
avez transmis un paramtre de formulaire au serveur. Aprs avoir dfini le paramtre de formulaire comme source de contenu, vous pouvez
l'utiliser dans une page.
1. Dans la fentre de document, ouvrez la page devant utiliser la variable.
3. Dans le panneau Liaisons, cliquez sur le bouton Plus (+) et choisissez l'une des options suivantes dans le menu droulant :
Types de
document
Elment du menu du panneau Liaisons permettant de dfinir une variable

de formulaire
ASP
Variable de demande > Request.Form
ColdFusion
Variable de formulaire
PHP
Variable de formulaire
4. Dans la bote de dialogue Variable de formulaire, tapez le nom de la variable de formulaire et cliquez sur OK. En gnral, le
nom du paramtre de formulaire correspond au nom du champ du formulaire HTML ou de l'objet utilis pour obtenir sa valeur.
Le paramtre de formulaire s'affiche dans le panneau Liaisons.
Haut de la page
Dfinition de variables de session
Les variables de session permettent de mmoriser et d'afficher des informations conserves pendant toute la dure de la visite de l'utilisateur (ou
session). Le serveur cre un objet de session diffrent pour chaque utilisateur et le conserve pendant une priode dfinie ou jusqu' ce qu'il soit
explicitement clos.
Avant de dfinir des variables de session pour une page, vous devez les crer dans le code source. Aprs avoir cr une variable de session
dans le code source de l'application Web, vous pouvez utiliser Dreamweaver pour rcuprer sa valeur et l'utiliser dans une page Web.
1. Crez une variable de session dans le code source et attribuez-lui une valeur.
Dans l'exemple suivant de ColdFusion, une instance de session appele username est cre, laquelle est attribue la
valeurCornelius :
1
<CFSET session.<samp class="codeph">username</samp> = <samp class="codeph">Cornelius</samp>>

3. Cliquez sur le bouton Plus (+) et choisissez Variable d'application dans le menu droulant.
4. Tapez le nom de la variable que vous avez dfinie dans le code source de l'application, et cliquez sur OK.
Dfinition de variables d'application dans ASP et ColdFusion
Haut de la page
Dans ASP et ColdFusion, les variables d'application permettent de mmoriser et d'afficher des informations conserves pendant toute la dure
701
d'utilisation de l'application, quel que soit l'utilisateur. Aprs avoir dfini une variable d'application, vous pouvez utiliser sa valeur dans une page.
Remarque : Il n'existe pas d'objets de variable d'application dans PHP.
1. Ouvrez un type de document dynamique dans la fentre de document.
4. Tapez le nom de la variable que vous avez dfinie dans le code source de l'application, et cliquez sur OK.
La variable d'application s'affiche dans le panneau Liaisons, sous l'icne Application.
Utilisation d'une variable comme source de donnes pour un jeu d'enregistrements de

ColdFusion
Haut de la page
Lorsque vous dfinissez un jeu d'enregistrements pour une page dans le panneau Liaisons, Dreamweaver entre le nom de la source de donnes
ColdFusion dans la balise cfquery sur la page. Pour plus de flexibilit, vous pouvez stocker un nom de source de donnes dans une variable et
utiliser cette dernire dans la balise cfquery. Dreamweaver permet de dfinir visuellement une variable de ce type dans vos jeux
d'enregistrements.
1. Assurez-vous qu'une page ColdFusion est active dans la fentre de document.
2. Dans le panneau Liaisons, cliquez sur le bouton Plus (+) et choisissez Variable du nom de source de donnes dans le menu
droulant.
La bote de dialogue Variable du nom de source de donnes s'affiche.
3. Dfinissez une variable et cliquez sur OK.
4. Lorsque vous dfinissez le jeu d'enregistrements, slectionnez la variable comme source de donnes du jeu
d'enregistrements.
Dans la bote de dialogue Jeu d'enregistrements, la variable s'affiche dans le menu droulant Source de donnes ainsi que les
sources de donnes ColdFusion sur le serveur.
5. Compltez les options de la bote de dialogue Jeu d'enregistrements, puis cliquez sur OK.
6. Initialisez la variable.
Celle-ci n'est pas initialise automatiquement par Dreamweaver afin que vous puissiez le faire vous-mme votre
convenance. Vous pouvez initialiser la variable dans le code de la page (avant la balise cfquery), dans un fichier inclus ou
encore dans un autre fichier, comme variable d'application ou de session.
Haut de la page
Dfinition de variables de serveur
Vous dfinissez des variables de serveur comme sources de contenu dynamique pouvant tre utilises dans une application Web. Les variables
de serveur varient d'un type de document l'autre et comprennent notamment les variables de formulaire, les variables d'URL, les variables de
session et les variables d'application.
Les variables de serveur sont accessibles tous les clients qui accdent au serveur et toutes les applications excutes sur le serveur. Les
variables de serveur sont conserves jusqu' l'arrt du serveur.
Dfinition de variables de serveur ColdFusion

1. Ouvrez le panneau Liaisons (Fentre > Liaisons). Dans la bote de dialogue Variable de serveur, tapez le nom de la variable
de serveur et cliquez sur OK.
2. Cliquez sur le bouton Plus (+) et choisissez la variable de serveur dans le menu droulant.
702
3. Saisissez le nom de l'objet et cliquez sur OK. La variable de serveur ColdFusion s'affiche dans le panneau Liaisons.
Le tableau ci-dessous rpertorie les variables de serveur de ColdFusion intgres :
Variable
Description
Server.ColdFusion.ProductName
Nom de produit de ColdFusion.
Server.ColdFusion.ProductVersion
Numro de version de ColdFusion.
Server.ColdFusion.ProductLevel
Edition de ColdFusion (dition entreprise ou professionnelle).
Server.ColdFusion.SerialNumber
Numro de srie de la version de ColdFusion installe.
Server.OS.Name
Nom du systme d'exploitation excut sur le serveur (Windows XP, Windows

2000, Linux)
Server.OS.AdditionalInformation
Informations supplmentaires sur le systme d'exploitation install (Service Packs,

mises jour).
Server.OS.Version
Version du systme d'exploitation install.
Server.OS.BuildNumber
Numro de compilation du systme d'exploitation install.
Dfinition d'une variable locale ColdFusion

Les variables locales sont cres au moyen de la balise CFSET ou CFPARAM dans une page ColdFusion. La variable locale dfinie s'affiche
dans le panneau Liaisons.
Dans la bote de dialogue Variable locale, tapez le nom de la variable locale et cliquez sur OK.
Dfinition de variables de serveur ASP

Vous pouvez dfinir les variables de serveur ASP suivantes comme sources de contenu dynamique : Request.Cookie, Request.QueryString,
Request.Form, Request.ServerVariables et Request.ClientCertificates.
1. Ouvrez le panneau Liaisons (Fentre > Liaisons).
3. Dans la bote de dialogue Variable de demande, slectionnez l'un des ensembles de demandes dans le menu droulant Type.
L'ensemble QueryString Rcupre des informations annexes l'URL de la page mettrice, par exemple lorsque la page
comprend un formulaire HTML utilisant la mthode GET. La chane de requte est compose d'une ou de plusieurs paires
nom/valeur (par exemple, last=Smith, first=Winston) annexes l'URL avec un point d'interrogation (?). Si la chane de
requte compte plusieurs paires nom/valeur, elles sont combines avec des esperluettes (&).
L'ensemble Form Rcupre les informations de formulaire incluses dans le corps de la demande HTTP par un formulaire
HTML utilisant la mthode POST.
L'ensemble ServerVariables Rcupre les valeurs de variables d'environnement prdfinies. Cet ensemble contient une
longue liste de variables, notamment CONTENT_LENGTH (longueur du contenu envoy dans la demande HTTP, qui permet
de savoir si un formulaire est vierge) et HTTP_USER_AGENT (fournit des informations sur le navigateur de l'utilisateur).
Par exemple, Request.ServerVariables("HTTP_USER_AGENT") contient des informations sur le navigateur expditeur,
comme Mozilla/4.07 [en] (WinNT; I), qui indique un navigateur Netscape Navigator 4.07.
La liste complte des variables d'environnement de serveur ASP figure dans la documentation en ligne fournie avec Microsoft
Personal Web Server (PWS) ou Internet Information Server (IIS).
L'ensemble Cookies Rcupre les valeurs des cookies envoys dans une demande HTTP. Par exemple, supposez que la
page lise un cookie appel readMe sur l'ordinateur de l'utilisateur. Sur le serveur, les valeurs du cookie sont enregistres
dans la variable Request.Cookies("readMe").
L'ensemble ClientCertificate Rcupre les zones de certification de la demande HTTP envoye par le navigateur. Les zones
de certification sont spcifies dans la norme X.509.
4. Indiquez quelle variable de l'ensemble vous souhaitez accder, et cliquez sur OK.
Par exemple, si vous souhaitez accder aux informations de la variable Request.ServerVariables("HTTP_USER_AGENT"),
tapez l'argument HTTP_USER_AGENT. Si vous souhaitez accder aux informations de la variable Request.Form("lastname"),
tapez l'argument lastname.
La variable de demande s'affiche dans le panneau Liaisons.
703
Dfinition de variables de serveur PHP

Dfinissez des variables de serveur comme source de contenu dynamique pour les types de document PHP. Les variables de serveur PHP
s'affichent dans le panneau Liaisons.
2. Cliquez sur le bouton Plus (+) et choisissez la variable de serveur dans le menu droulant.
3. Dans la bote de dialogue Variable de demande, tapez le nom de la variable (par exemple REQUEST_METHOD), puis cliquez
sur OK.
Pour plus d'informations, recherchez le mot cl $_SERVER dans la documentation de PHP.
Dfinition d'une variable client ColdFusion

Dfinissez une variable client ColdFusion comme source de contenu dynamique pour une page. Les variables de client ColdFusion que vous
venez de dfinir s'affichent dans le panneau Liaisons.
Dans la bote de dialogue Variable client, tapez le nom de la variable client et cliquez sur OK.
Par exemple, pour accder aux donnes contenues dans la Client.LastVisit, tapez LastVisit.
Les variables client sont des variables ajoutes au code pour associer des donnes un client spcifique. Elles conservent l'tat de l'application
pendant que l'utilisateur passe d'une page l'autre et d'une session l'autre dans l'application.
Il existe deux types de variables serveur : les variables intgres et les variables dfinies par l'utilisateur. Le tableau ci-dessous rpertorie les
variables client ColdFusion intgres :
Variable
Description
Client.CFID
Identifiant incrmentiel attribu chacun des clients se connectant au serveur.
Client.CFTOKEN
Numro gnr alatoirement et permettant d'identifier un client spcifique de faon univoque.
Client.URLToken
Combinaison de CFID et CFTOKEN devant tre transmise de modle en modle lorsque les
cookies ne sont pas utiliss.
Client.LastVisit
Enregistre la date de la dernire visite effectue par un client.
Client.HitCount
Nombre de demandes de pages lies un mme client (obtenu l'aide de CFID et CFTOKEN).
Client.TimeCreated
Enregistre l'heure de la premire cration de CFID et CFTOKEN pour un client spcifique.
Dfinition d'une variable cookie ColdFusion

Les variables cookie sont cres au niveau du code et permettent d'accder aux informations contenues dans les cookies transmis au serveur par
un navigateur. La variable cookie dfinie s'affiche dans le panneau Liaisons.
Dans la bote de dialogue Variable cookie, tapez le nom de la variable client et cliquez sur OK.
Dfinition d'une variable CGI ColdFusion

La variable CGI dfinie s'affiche dans le panneau Liaisons.
Dans la bote de dialogue Variable CGI, tapez le nom de la variable et cliquez sur OK.
Par exemple, si vous souhaitez accder aux donnes contenues dans la CGI.HTTP_REFERER , saisissez HTTP_REFERER.
Le tableau ci-dessous rpertorie les variables CGI de ColdFusion les plus frquemment cres sur le serveur :
Variable
Description
SERVER_SOFTWARE
Nom et version du logiciel du serveur d'informations rpondant la demande (et excutant

la passerelle). Format : nom/version.
SERVER_NAME
Nom d'hte, alias DNS ou adresse IP du serveur tel qu'il/elle se prsente dans les URL
d'appel.
GATEWAY_INTERFACE
Rvision de la spcification CGI applique par le serveur. Format : CGI/rvision.
SERVER_PROTOCOL
Nom et rvision du protocole d'informations par lequel la demande a t transmise. Format

: protocole/rvision.
SERVER_PORT
Numro du port auquel la demande a t envoye.
704
REQUEST_METHOD
Mthode utilise pour l'excution de la demande. Dans le cas de HTTP, il s'agit de Get,
Head, Post, etc.
PATH_INFO
Informations de chemin complmentaires, telles qu'elles sont fournies par le client. On

accde aux scripts en utilisant leur nom de chemin virtuel suivi des informations
complmentaires. Celles-ci sont envoyes en tant que PATH_INFO.
PATH_TRANSLATED
Le serveur fournit une version traduite de PATH_INFO, rsultat de la conversion du chemin

virtuel en chemin physique.
SCRIPT_NAME
Chemin virtuel vers le script en cours d'excution. Variable utilise pour les URL d'appel.
QUERY_STRING
Informations de requte qui suivent le point d'interrogation (?) dans l'URL rfrenant le
script.
REMOTE_HOST
Nom de l'hte l'origine de la demande. Si le serveur ne dispose pas de cette information,

il dfinit REMOTE_ADDR mais pas REMOTE_HOST.
REMOTE_ADDR
Adresse IP de l'hte distant l'origine de la demande.
AUTH_TYPE
Si le serveur prend en charge l'authentification de l'utilisateur et que le script est protg,

cette variable correspond la mthode d'authentification spcifique au protocole utilise
pour vrifier l'identit de l'utilisateur.
REMOTE_USER
AUTH_USER
Si le serveur prend en charge l'authentification de l'utilisateur et que le script est protg,

cette variable correspond au nom saisi par l'utilisateur lors de l'authentification (disponible
galement sous la forme AUTH_USER).
REMOTE_IDENT
Si le serveur HTTP prend en charge l'identification RFC 931, cette variable reoit comme
valeur le nom de l'utilisateur distant rcupr du serveur. Utilisez cette variable uniquement
pour la connexion.
CONTENT_TYPE
Dans le cas de requtes assorties d'informations, telles que HTTP POST et PUT, cette
variable correspond au type de contenu des donnes.
CONTENT_LENGTH
Longueur du contenu, tel qu'il a t fourni par le client.
Le tableau ci-dessous rpertorie les variables CGI les plus frquemment cres par le navigateur et transmises au serveur :
Variable
Description
HTTP_REFERER
Document de rfrence. Il s'agit du document associ aux donnes de formulaire ou

qui les envoie.
HTTP_USER_AGENT
Navigateur utilis par le client pour envoyer la demande. Format : logiciel/version

bibliothque/version.
HTTP_IF_MODIFIED_SINCE
Date de la dernire modification de la page. Cette variable est envoye suivant la

configuration du navigateur, gnralement en rponse au serveur ayant envoy l'entte LAST_MODIFIED HTTP. Peut tre utilise pour tirer parti des possibilits de mise
en mmoire cache au niveau du navigateur.
Haut de la page
Mise en mmoire cache de sources de contenu
Vous pouvez stocker des sources de contenu dynamique dans une Design Note. Cette opration vous permet de travailler sur un site mme
lorsque vous n'avez pas accs la base de donnes ou au serveur d'application contenant les sources de contenu dynamique. La mise en
mmoire cache permet galement d'acclrer le processus de dveloppement puisqu'elle vite de se connecter en continu la base de donnes
et au serveur d'application via le rseau.
Cliquez sur la touche flche dans le coin suprieur droit du panneau Liaisons et choisissez Cache dans le menu droulant.
Si vous modifiez l'une de vos sources de contenu, vous pouvez actualiser le cache en cliquant sur le bouton Actualiser (icne reprsentant une
flche en forme de cercle), dans le coin suprieur droit du panneau Liaisons Agrandissez l'affichage si ce bouton n'apparat pas.
Modification ou suppression de sources de contenu
Haut de la page
Vous pouvez modifier ou supprimer n'importe quelle source de contenu dynamique, autrement dit n'importe quelle source de contenu figurant
705
dans le panneau Liaisons.

La modification ou la suppression d'une source de contenu dans le panneau Liaisons ne change ni ne supprime les instances de cette source sur
la page. Cela affecte uniquement son rle de source de contenu pour la page.
Modification d'une source de contenu dans le panneau Liaisons

1. Dans le panneau Liaisons (Fentre > Liaisons), double-cliquez sur le nom de la source de contenu modifier.
2. Procdez aux modifications dans la bote de dialogue qui s'affiche.
Suppression d'une source de contenu dans le panneau Liaisons

1. Slectionnez la source souhaite dans le panneau Liaisons (Fentre > Liaisons).
Copie d'un jeu d'enregistrements d'une page vers une autre

Vous pouvez copier un jeu d'enregistrements d'une page une autre dans un site dfini.
1. Slectionnez le jeu d'enregistrements dans le panneau Liaisons ou dans le panneau Comportements de serveur.
2. Cliquez sur le jeu d'enregistrements avec le bouton droit de la souris et choisissez Copier dans le menu droulant.
3. Ouvrez la page dans laquelle vous souhaitez coller le jeu d'enregistrements.
4. Cliquez avec le bouton droit de la souris dans le panneau Liaisons ou sur la barre d'outils Comportements de serveur, et
choisissez Coller dans le menu droulant.
Voir aussi
Initiation SQL
706
Haut de la page
Ajout de contenu dynamique dans les pages

A propos de l'ajout de contenu dynamique
A propos du texte dynamique
Cration de texte dynamique
Cration d'images dynamiques
Cration d'attributs HTML dynamiques
Cration de paramtres d'objet (ActiveX, Flash, etc.) dynamiques
Haut de la page
A propos de l'ajout de contenu dynamique
Aprs avoir dfini une ou plusieurs sources de contenu dynamique, vous pouvez les utiliser pour ajouter un contenu dynamique la page. Les
sources de contenu peuvent tre une colonne dans un jeu d'enregistrements, une valeur envoye par un formulaire HTML, la valeur d'un objet de
serveur, etc.
Dans Dreamweaver, vous pouvez placer du contenu dynamique quasiment n'importe o dans une page Web ou dans son code source HTML. Il
est possible de placer le contenu dynamique au niveau du point d'insertion, de remplacer une chane de texte ou d'insrer le contenu en tant
qu'attribut HTML. Un contenu dynamique peut, par exemple, dfinir l'attribut src d'une image ou l'attribut value d'un champ de formulaire.
Vous pouvez ajouter du contenu dynamique une page en slectionnant une source de contenu dans le panneau Liaisons. Dreamweaver insre
alors dans le code source de la page un script ct serveur indiquant au serveur de transfrer les donnes de la source de contenu slectionne
vers le code source HTML de la page lorsqu'un navigateur appelle la page.
Il existe souvent diffrentes mthodes pour rendre dynamique un lment d'une page. Dans le cas d'une image, par exemple, vous pouvez utiliser
le panneau Liaisons, l'inspecteur Proprits ou la commande Image du menu Insertion.
Par dfaut, une page HTML ne peut afficher qu'un enregistrement la fois. Pour afficher les autres enregistrements du jeu, ajoutez un lien afin
d'explorer les enregistrements un un ou crez une rgion rpte pour afficher plusieurs enregistrements sur une seule page.
Haut de la page
A propos du texte dynamique
Le texte dynamique adopte le formatage du texte initial ou du point d'insertion. Le contenu dynamique conserve ainsi le style de feuille de style en
cascade (CSS, Cascading Style Sheet) du texte slectionn qu'il remplace. Vous pouvez galement ajouter ou modifier le format du texte d'un
contenu dynamique l'aide des outils de formatage de texte de Dreamweaver.
Vous pouvez galement appliquer un format de donnes un texte dynamique. Par exemple, si vos donnes sont des dates, vous pouvez
dterminer un format spcifique tel que 04/17/00 pour les visiteurs amricains ou 17/04/00 pour les visiteurs franais
Haut de la page
Cration de texte dynamique

Vous pouvez substituer un texte dynamique un texte existant ou le placer un point d'insertion donn de la page.
Ajout de texte dynamique

1. En mode Cration, slectionnez du texte sur la page ou cliquez l'endroit o insrer le texte dynamique.
2. Slectionnez une source de contenu dans le panneau Liaisons (Fentre > Liaisons). Si vous slectionnez un jeu
d'enregistrements, indiquez la colonne de votre choix dans le jeu d'enregistrements.
Cette source doit contenir du texte brut (texte ASCII), ce qui inclut HTML. Si aucune source de contenu n'apparat dans la liste
ou si aucune des sources disponibles ne correspond vos besoins, cliquez sur le bouton Plus (+) pour dfinir une nouvelle
source de contenu
3. (Facultatif) Slectionnez un format de donnes pour le texte.
4. Cliquez sur Insertion ou faites glisser la source de contenu sur la page.
Un espace rserv pour contenu dynamique s'affiche. (tout texte slectionn dans la page est remplac par l'espace rserv).
La syntaxe de l'espace rserv pour le contenu d'un jeu d'enregistrements est {RecordsetName.ColumnName}, o Recordset
est le nom du jeu d'enregistrements et ColumnName le nom de la colonne choisie dans ce jeu.
Il arrive que la longueur de l'espace rserv d'un texte dynamique dforme la mise en page dans la fentre de document.
Dans ce cas, utilisez des accolades vides pour reprsenter les espaces rservs, comme l'explique la section suivante.
707
Affichage d'espaces rservs pour le texte dynamique

1. Choisissez Edition > Prfrences > Elments invisibles (Windows) ou Dreamweaver > Prfrences > Elments invisibles
(Macintosh).
2. Dans le menu droulant Afficher le texte dynamique sous, choisissez { } et cliquez sur OK.
Haut de la page
Cration d'images dynamiques
Vous pouvez ajouter des images dynamiques votre page. Supposons que vous conceviez une page qui affiche les articles d'une vente de
charit. Chaque page doit contenir un texte descriptif, ainsi qu'une photo de l'article. La mise en forme gnrale de la page doit rester la mme
pour chaque article, mais la photo (et le texte) peuvent changer.
1. Ouvrez la page en mode Cration (Affichage > Cration) et placez le point d'insertion l'endroit o l'image doit apparatre sur
la page.
2. Choisissez Insertion > Image.
La bote de dialogue Slectionnez la source de l'image s'affiche.
3. Cliquez sur l'option Sources de donnes (Windows) ou sur le bouton Source de donnes (Macintosh).
La liste des sources de contenu s'affiche.
4. Slectionnez une source de contenu dans la liste, puis cliquez sur OK.
La source de donnes doit tre un jeu d'enregistrements qui contient les chemins d'accs de vos fichiers d'image. En fonction
de la structure de fichiers de votre site, ces chemins peuvent tre absolus, relatifs au document ou relatifs la racine.
Remarque : A l'heure actuelle, Dreamweaver ne prend pas en charge les images binaires stockes dans une base de
donnes.
Si aucun jeu d'enregistrements n'apparat dans la liste ou si aucun des jeux disponibles ne correspond vos besoins,
dfinissez un nouveau jeu.
Haut de la page
Cration d'attributs HTML dynamiques
Vous pouvez modifier l'apparence d'une page de manire dynamique en liant des attributs HTML aux donnes. Par exemple, modifiez l'image
d'arrire-plan d'un tableau en liant l'attribut background de ce tableau au champ d'un jeu d'enregistrements.
Vous pouvez lier des attributs HTML l'aide du panneau Liaisons ou de l'inspecteur Proprits.
Cration d'attributs HTML dynamiques avec le panneau Liaisons

2. Assurez-vous qu'il contient la source de donnes utiliser.
Cette source de contenu doit contenir les donnes appropries pour l'attribut HTML lier. Si aucune source de contenu
n'apparat dans la liste ou si aucune des sources disponibles ne correspond vos besoins, cliquez sur le bouton Plus (+) pour
dfinir une nouvelle source de donnes.
3. En mode Cration, slectionnez un objet HTML.
Par exemple, pour slectionner un tableau HTML, cliquez dedans, puis cliquez sur la balise <table> du slecteur de balises
qui figure en bas gauche dans la fentre de document.
4. Dans la liste du panneau Liaisons, slectionnez une source de contenu.
5. Dans le champ Lier , slectionnez un attribut HTML dans le menu contextuel.
6. Cliquez sur Lier.
Lors de la prochaine excution de la page sur le serveur d'applications, la valeur de la source de donnes sera affecte
l'attribut HTML.
Ajout d'attributs HTML dynamiques avec l'inspecteur Proprits

1. En mode Cration, slectionnez un objet HTML, puis ouvrez l'inspecteur Proprits (Fentre > Proprits).
Par exemple, pour slectionner un tableau HTML, cliquez dedans, puis cliquez sur la balise <table> du slecteur de balises
qui figure en bas gauche dans la fentre de document.
2. La manire dont il faut lier une source de contenu dynamique l'attribut HTML dpend de l'endroit o ce dernier est situ.
Si une icne de dossier est visible ct de l'attribut que vous souhaitez lier dans l'inspecteur Proprits, cliquez sur
l'icne du dossier afin d'ouvrir une bote de dialogue de slection de fichier, puis activez l'option Sources de donnes pour
afficher la liste des sources de donnes.
708
Si aucune icne de dossier n'apparat ct de l'attribut que vous souhaitez lier, cliquez sur l'onglet Liste (onglet du bas)
gauche de l'inspecteur.
La liste de l'inspecteur Proprits s'affiche.
Si l'attribut lier n'apparat pas dans ce mode, cliquez sur le bouton Plus (+), puis tapez le nom de l'attribut ou cliquez sur
le petit bouton flch et slectionnez l'attribut dans le menu droulant.
3. Pour rendre la valeur de l'attribut dynamique, cliquez sur l'attribut, puis sur l'icne reprsentant un clair ou sur l'icne de
dossier situe la fin de la ligne de l'attribut.
Si vous cliquez sur l'icne reprsentant un clair, une liste de sources de donnes s'affiche.
Si vous avez cliqu sur l'icne de dossier, une bote de dialogue affiche une slection de fichiers. Cliquez sur l'option Sources
de donnes pour afficher la liste des sources de contenu.
4. Slectionnez une source de contenu dans la liste et cliquez sur OK.
Cette source de contenu doit comprendre les donnes appropries pour l'attribut HTML lier. Si aucune source de contenu
n'apparat dans la liste ou si aucune des sources disponibles ne correspond vos besoins, dfinissez une nouvelle source.
Lors de la prochaine excution de la page sur le serveur d'applications, la valeur de la source de donnes sera affecte
l'attribut HTML.
Cration de paramtres d'objet (ActiveX, Flash, etc.) dynamiques
Haut de la page
Vous pouvez rendre dynamiques les paramtres des plug-ins et des applets Java, ainsi que les paramtres des objets ActiveX, Flash, Shockwave,
Director et Generator.
Assurez-vous au pralable que les champs de votre jeu d'enregistrements contiennent des donnes appropries pour les paramtres d'objet que
vous voulez lier.
1. En mode Cration, slectionnez un objet sur la page et ouvrez l'inspecteur Proprits (Fentre > Proprits).
2. Cliquez sur le bouton Paramtres.
3. Si votre paramtre ne s'affiche pas dans la liste, cliquez sur le bouton Plus (+), puis saisissez son nom dans la colonne
Paramtre.
4. Pour dterminer une valeur dynamique, cliquez sur la colonne Valeur du paramtre, puis sur l'icne reprsentant un clair.
La liste des sources de donnes s'affiche.
5. Slectionnez une source de donnes dans la liste, puis cliquez sur OK.
Cette source doit contenir des donnes appropries pour le paramtre d'objet que vous voulez lier. Si aucune source de
donnes n'apparat dans la liste ou si aucune des sources disponibles ne correspond vos besoins, dfinissez une nouvelle
source.
Voir aussi
709

A propos du contenu dynamique
Suppression de contenu dynamique
Test de contenu dynamique
Autorisation de la modification de contenu dynamique par les utilisateurs d'Adobe Contribute
Modification de jeux d'enregistrements l'aide de l'inspecteur Proprits
Haut de la page
A propos du contenu dynamique
Vous pouvez changer le contenu dynamique de votre page en modifiant le comportement de serveur qui fournit ce contenu. Vous pouvez, par
exemple, modifier le comportement de serveur d'un jeu d'enregistrements pour fournir plus d'enregistrements votre page.
Le contenu dynamique de la page est rpertori dans le panneau Comportements de serveur. Si vous ajoutez, par exemple, un jeu
d'enregistrements votre page, le panneau Comportements de serveur l'affiche sous forme de liste :
1
Recordset(<dfn class="term">myRecordset</dfn>)
Si vous ajoutez un autre jeu d'enregistrements votre page, le panneau Comportements de serveur les affiche tous deux sous forme de liste,
comme suit :
1
Recordset(<dfn class="term">mySecondRecordset</dfn>)Recordset(<dfn class="term">myRecordset</dfn>)
Haut de la page

1. Ouvrez le panneau Comportements de serveur (Fentre > Comportements de serveur).
2. Cliquez sur le bouton Plus (+) pour afficher les comportements de serveur, puis double-cliquez sur le comportement de
serveur dans le panneau.
La bote de dialogue dans laquelle vous avez dfini la source de donnes d'origine s'ouvre.
3. Effectuez vos modifications dans cette bote de dialogue, puis cliquez sur OK.
Haut de la page
Suppression de contenu dynamique

Aprs avoir ajout un contenu dynamique une page, vous pouvez le supprimer de l'une des faons suivantes :
Slectionnez le contenu dynamique de la page et appuyez sur Suppr.
Slectionnez le contenu dynamique dans le panneau Comportements de serveur et cliquez sur le bouton moins(-).
Remarque : Cette opration supprime de la page le script ct serveur qui rcupre le contenu dynamique de la base de
donnes, mais ne supprime pas les donnes dans la base.
Haut de la page
Test de contenu dynamique

Vous pouvez afficher un aperu d'un contenu dynamique et de le modifier l'aide du mode En direct.
Pendant que le contenu dynamique est affich, vous pouvez effectuer les oprations suivantes :
amliorer la prsentation de la page avec les outils de conception ;
ajouter, modifier ou effacer un contenu dynamique ;
ajouter, modifier ou effacer des comportements de serveur.
710
1. Cliquez sur le bouton Affichage en direct pour afficher le contenu dynamique.

2. Effectuez les modifications ncessaires dans la page. Vous devrez basculer entre le mode En direct et le mode Cration ou
Code pour apporter des modifications et observer leur effet.
Autorisation de la modification de contenu dynamique par les utilisateurs d'Adobe Contribute
Haut de la page
Lorsqu'un utilisateur de Contribute modifie une page comportant un contenu dynamique ou des lments invisibles (tels que des scripts ou des
commentaires), Contribute affiche le contenu dynamique et les lments invisibles sous forme de marqueurs jaunes. Par dfaut, les utilisateurs de
Contribute ne peuvent ni slectionner ni supprimer ces marqueurs.
Pour que les utilisateurs de Contribute puissent slectionner et supprimer un contenu dynamique ou d'autres lments invisibles sur une page,
vous pouvez modifier les paramtres du groupe d'autorisations en consquence. Normalement, les utilisateurs de Contribute ne peuvent en aucun
cas modifier un contenu dynamique, mme s'ils sont autoriss le slectionner.
Remarque : Grce certaines technologies de serveur, vous pouvez afficher du texte statique l'aide d'une fonction ou d'une balise de serveur.
Pour permettre aux utilisateurs de Contribute de modifier le texte statique d'une page dynamique qui utilise une technologie de serveur de ce type,
placez le texte statique en dehors des balises de serveur. Pour plus d'informations, voir Administration de Contribute.
1. Slectionnez Site > Administrer le site Contribute.
2. Si certaines options requises pour des raisons de compatibilit avec Contribute ne sont pas actives, une bote de dialogue
vous invitant activer ces options s'affiche. Cliquez sur OK pour activer ces options et la compatibilit avec Contribute.
3. Si ncessaire, tapez le mot de passe administrateur, puis cliquez sur OK.
La bote de dialogue Administration du site Web s'affiche.
4. Dans la catgorie Utilisateurs et rles, slectionnez un rle, puis cliquez sur le bouton Modifier les paramtres de rle.
5. Slectionnez la catgorie Modification et dslectionnez l'option de protection des scripts et des formulaires.
6. Cliquez sur OK pour fermer la bote de dialogue Modification des paramtres.
7. Cliquez sur Fermer pour fermer la bote de dialogue Administration du site Web.
Modification de jeux d'enregistrements l'aide de l'inspecteur Proprits
Haut de la page
Utilisez l'inspecteur Proprits pour modifier le jeu d'enregistrements slectionn. Les options disponibles dpendent du modle de serveur utilis.
1. Ouvrez l'inspecteur Proprits (Fentre > Proprits), puis slectionnez le jeu d'enregistrements dans le panneau
Comportements de serveur (Fentre > Comportements de serveur).
2. Modifiez les options votre convenance. Lorsque vous slectionnez une nouvelle option dans l'inspecteur, Dreamweaver met
la page jour.
Voir aussi
711
Affichage denregistrements dune base de donnes

A propos des enregistrements de base de donnes
Comportements de serveur et lments de formatage
Application dlments typographiques et de mise en forme de page des donnes dynamiques
Navigation parmi les rsultats dun jeu denregistrements de base de donnes
Cration dune barre de navigation de jeu denregistrements
Barres de navigation de jeu denregistrements personnalises
Tches de cration dune barre de navigation
Affichage et masquage des rgions en fonction des rsultats du jeu denregistrements
Affichage de plusieurs rsultats dun jeu denregistrements
Cration dun tableau dynamique
Cration de compteurs denregistrements
Utilisation de formats de donnes prdfinis
Haut de la page
A propos des enregistrements de base de donnes

Pour afficher des enregistrements de base de donnes, il faut rcuprer des informations stockes dans une source de contenu, telle quune base
de donnes, et en effectuer le rendu dans une page Web. Dreamweaver offre de nombreuses mthodes daffichage de contenu dynamique et
propose plusieurs comportements de serveur intgrs. Ces derniers permettent damliorer la prsentation du contenu dynamique, de faciliter les
recherches et de naviguer parmi les informations renvoyes par une base de donnes.
Les bases de donnes et les autres sources de contenu dynamique permettent dobtenir de meilleurs rsultats lors des oprations de recherche,
de tri ou de consultation de volumes dinformations importants. Lutilisation dune base de donnes pour stocker le contenu de sites Web est
particulirement recommande lorsque vous souhaitez stocker des quantits importantes de donnes, puis les rcuprer pour les afficher dune
manire spcifique. Dreamweaver fournit diffrents outils et comportements prdfinis qui permettent de rcuprer et dafficher efficacement les
informations dune base de donnes.
Haut de la page
Comportements de serveur et lments de formatage

Les comportements de serveur et les lments de formatage proposs par Dreamweaver pour enrichir la prsentation de donnes dynamiques
sont les suivants :
Formats Les formats permettent dappliquer diffrents types de valeurs numriques, montaires, de date/heure et de pourcentage un texte
dynamique.
Par exemple, si le prix dun lment dans un jeu denregistrements est de 10,989, vous pouvez lafficher sur votre page sous la forme 10,99 en
choisissant le format Devise - 2 dcimales de Dreamweaver. Dans ce format, les nombres saffichent avec deux chiffres aprs la virgule. Si le
nombre a plus de deux chiffres aprs la virgule, il est arrondi au nombre le plus proche. Si le nombre est un entier, il est suivi dune virgule et de
deux zros.
Rgion rpte Ces comportements de serveur permettent dafficher plusieurs lments renvoys par une requte de base de donnes et
dindiquer le nombre denregistrements afficher par page.
Navigation de jeu denregistrements Ces comportements de serveur permettent dinsrer des lments de navigation dont les utilisateurs
peuvent se servir pour passer au groupe denregistrements prcdent ou suivant renvoy par le jeu denregistrements. Supposons que vous
choisissiez dafficher dix enregistrements par page laide de lobjet de serveur Rgion rpte et que le jeu denregistrements renvoie
712
40 enregistrements ; vous pouvez alors parcourir les enregistrements par groupe de dix.
Barre dtat du jeu denregistrements Ces comportements de serveur permettent dajouter un compteur qui indique aux utilisateurs la position
dans laquelle ils se trouvent au sein dun groupe denregistrements par rapport au nombre total denregistrements renvoys.
Afficher la rgion Ces comportements de serveur permettent dafficher ou de masquer des lments de la page en fonction de la pertinence des
enregistrements affichs. Par exemple, si un utilisateur consulte le dernier enregistrement dun jeu, vous pouvez choisir de nafficher que le lien
Prcdent ; le lien Suivant est alors masqu.
Haut de la page
Application dlments typographiques et de mise en forme de page des donnes

dynamiques
Dreamweaver permet de prsenter des donnes dynamiques au sein dune page structure et dappliquer un formatage typographique laide de
HTML et des feuilles de style en cascade. Pour appliquer des formats des donnes dynamiques dans Dreamweaver, mettez en forme les
tableaux et les espaces rservs des donnes dynamiques laide des outils de formatage de Dreamweaver. Lors de leur insertion partir dune
source, les donnes adoptent automatiquement le formatage (police, style de paragraphe et tableau) spcifi.
Haut de la page
Navigation parmi les rsultats dun jeu denregistrements de base de donnes

Les liens de navigation de jeu denregistrements permettent de se dplacer dun enregistrement un autre ou dun jeu denregistrements un
autre. Aprs avoir cr une page devant afficher cinq enregistrements la fois, par exemple, vous pouvez ajouter des liens tels que Suivant ou
Prcdent pour que lutilisateur puisse afficher les cinq enregistrements suivants ou prcdents.
Vous pouvez crer quatre types de liens pour la navigation dans les jeux denregistrements : Premier, Prcdent, Suivant et Dernier. Une page
peut contenir un nombre illimit de liens, condition que tous agissent sur un mme jeu denregistrements. Vous ne pouvez pas insrer sur une
mme page des liens daccs des jeux denregistrements diffrents.
Les lments dynamiques suivants sont ncessaires pour la mise en place de liens de navigation de jeu denregistrements :
un jeu denregistrements dans lequel naviguer ;

un contenu dynamique sur la page pour afficher le ou les enregistrements ;
du texte ou des images sur la page pour servir de barre de navigation cliquable ;
un jeu de comportements serveur Dplacer vers lenregistrement pour naviguer dans le jeu denregistrements.
Vous pouvez ajouter simultanment les deux derniers lments en utilisant lobjet dynamique Barre de navigation des
enregistrements ou les ajouter sparment en utilisant les outils de conception et le panneau Comportements de serveur.
Haut de la page
Cration dune barre de navigation de jeu denregistrements

Vous pouvez crer en une seule opration une barre de navigation de jeu denregistrements laide du comportement de serveur correspondant.
Cet objet de serveur ajoute les lments suivants la page :
un tableau HTML comportant des liens texte ou image ;

un jeu de comportements de serveur Dplacer vers ;
un jeu de comportements de serveur Afficher la rgion.
La version texte de la barre de navigation du jeu denregistrements a laspect suivant :
713
Avant de placer la barre de navigation dans la page, assurez-vous que la page contient un jeu denregistrements dans lequel naviguer et une
mise en forme pour afficher les enregistrements.
Aprs avoir plac la barre de navigation sur la page, vous pouvez personnaliser la barre votre gr laide des outils de conception. Vous pouvez
galement modifier les comportements de serveur Dplacer vers et Afficher la rgion en double-cliquant dessus dans le panneau Comportements
de serveur.
Dreamweaver cre un tableau qui contient des liens texte ou image permettant lutilisateur, lorsquil clique dessus, de se dplacer dans le jeu
denregistrements slectionn. Lorsque le premier enregistrement du jeu saffiche, les liens ou images Premier et Prcdent sont masqus.
Lorsque le dernier enregistrement du jeu saffiche, les liens ou images Suivant et Dernier sont masqus.
Vous pouvez personnaliser la mise en forme de la barre de navigation laide des outils de conception et du panneau Comportements de serveur.
1. En mode Cration, placez le point dinsertion lendroit de la page o vous souhaitez que la barre de navigation apparaisse.
2. Ouvrez la bote de dialogue Barre de navigation du jeu denregistrements (Insertion > Objets de donnes > Pagination du jeu
denregistrements > Barre de navigation du jeu denregistrements).
3. Dans le menu droulant Jeu denregistrements, slectionnez le jeu denregistrements dans lequel naviguer.
4. Dans la section Afficher laide de, slectionnez le format daffichage des liens de navigation sur la page et cliquez sur OK.
Text Place des liens texte sur la page.
Images Inclut des images graphiques en tant que liens. Dreamweaver utilise ses propres fichiers dimage. Lorsque la barre
se trouve sur la page, vous pouvez nanmoins les remplacer par les vtres.
Haut de la page
Barres de navigation de jeu denregistrements personnalises

Vous pouvez crer votre propre barre de navigation de jeu denregistrements qui utilise des styles de formatage plus complexes que ceux quoffre
la table simple cre par lobjet de serveur Barre de navigation du jeu denregistrements.
Pour crer votre propre barre de navigation de jeu denregistrements, vous devez :
crer des liens de navigation dans du texte ou des image ;

placer les liens sur la page en mode Cration ;
attribuer un comportement de serveur distinct chaque lien de navigation.
Cette section explique comment assigner un comportement de serveur distinct chaque lien de navigation.
Cration et attribution de comportements de serveur un lien de navigation

1. En mode Cration, slectionnez sur la page la chane de texte ou limage qui servira de lien de navigation entre les
enregistrements.
2. Ouvrez le panneau Comportements de serveur (Fentre > Comportements de serveur), puis cliquez sur le bouton Plus (+).
3. Choisissez Pagination du jeu denregistrements dans le menu droulant, puis slectionnez le comportement qui convient dans
la liste des comportements de serveur.
Si le jeu contient un nombre important denregistrements, le comportement de serveur Dplacer vers le dernier enregistrement
peut tre long sexcuter lorsque lutilisateur clique sur le lien.
4. Dans le menu droulant Jeu denregistrements, slectionnez le jeu contenant les enregistrements et cliquez sur OK.
714
Le comportement de serveur est assign au lien de navigation.
Dfinition des options de la bote de dialogue Dplacer vers (comportement de serveur)

Ajoutez des liens permettant lutilisateur de naviguer parmi les enregistrements dun jeu denregistrements.
1. Si vous navez rien slectionn sur la page, slectionnez un lien dans le menu droulant.
2. Slectionnez le jeu contenant les enregistrements parcourir et cliquez sur OK.
Remarque : Si le jeu contient un nombre important denregistrements, le comportement de serveur Dplacer vers le dernier
enregistrement peut tre long sexcuter lorsque lutilisateur clique sur le lien.
Haut de la page
Tches de cration dune barre de navigation

Pour concevoir une barre de navigation personnalise, commencez par en crer la reprsentation visuelle laide des outils de conception de
page de Dreamweaver. Il est inutile de crer un lien pour la chane de texte ou limage, car Dreamweaver sen charge votre place.
La page sur laquelle crer la barre de navigation doit contenir un jeu denregistrements dans lequel naviguer. Une barre de navigation de jeu
denregistrements simple, cest--dire une barre dont les boutons sont crs partir dlments de contenu tels que des images, ressemble
ceci :
Aprs avoir ajout un jeu denregistrements une page et cr la barre de navigation, vous devez appliquer les comportements de serveur
individuels chaque lment de navigation. Par exemple, une barre de navigation de jeu denregistrements typique contient la reprsentation des
liens suivants, associe au comportement appropri :
Lien de navigation
Comportement de serveur
Accder la premire page
Dplacer vers la premire page
Accder la page prcdente
Dplacer vers la page prcdente
Accder la page suivante
Dplacer vers la page suivante
Accder la dernire page
Dplacer vers la dernire page
Haut de la page
Affichage et masquage des rgions en fonction des rsultats du jeu denregistrements

Vous pouvez galement indiquer quune rgion soit affiche ou masque selon que le jeu denregistrements est vide ou non. Si un jeu
denregistrements est vide (aucun enregistrement ne correspond la requte, par exemple), vous pouvez afficher un message informant
lutilisateur de labsence de rsultats. Cette fonction est particulirement utile lors de la cration de pages de recherche reposant sur des termes
que lutilisateur doit entrer. De mme, vous pouvez afficher un message derreur lorsquun problme survient au cours de la connexion une base
de donnes ou lorsque le nom et le mot de passe de lutilisateur ne correspondent pas ceux reconnus par le serveur.
Les comportements de serveur Afficher la rgion sont les suivants :
Afficher si le jeu denregistrements est vide

Afficher si le jeu denregistrements nest pas vide
Afficher sil sagit de la premire page
715
Afficher si ce nest pas la premire page

Afficher sil sagit de la dernire page
Afficher si ce nest pas la dernire page
1. En mode Cration, slectionnez sur la page la rgion afficher ou masquer.
2. Dans le panneau Comportements de serveur (Fentre > Comportements de serveur), cliquez sur le bouton Plus (+).
3. Dans le menu droulant, slectionnez Afficher la rgion, puis choisissez lun des comportements de serveur proposs et
cliquez sur OK.
Haut de la page
Affichage de plusieurs rsultats dun jeu denregistrements

Le comportement de serveur Rgion rpte vous permet dafficher sur une page plusieurs enregistrements dun jeu. Toute slection de donnes
dynamique peut tre convertie en rgion rpte. Les zones les plus courantes sont les tableaux, les lignes de tableau ou les sries de lignes de
tableau.
1. En mode Cration, slectionnez une rgion comportant un contenu dynamique.
La slection peut tre de tout type, notamment tableau, ligne de tableau ou mme paragraphe de texte.
Pour slectionner prcisment une rgion sur une page, vous pouvez utiliser le slecteur de balises dans le coin gauche de la
fentre de document. Par exemple, si la rgion correspond une ligne de tableau, cliquez sur la ligne, puis cliquez sur la
balise <tr> situe le plus droite dans le slecteur de balises pour slectionner la ligne du tableau.
2. Pour afficher le panneau Comportements de serveur, choisissez Fentre > Comportements de serveur.
3. Cliquez sur le bouton Plus (+) et choisissez Rgion rpte.
4. Slectionnez le nom du jeu denregistrements utiliser dans le menu droulant.
5. Slectionnez le nombre denregistrements afficher sur chaque page et cliquez sur OK.
Dans la fentre de document, un contour fin de couleur grise dlimite la rgion rpte.
Modification de rgions rptes dans linspecteur Proprits

Modifiez la rgion rpte slectionne en modifiant les options suivantes :
Nom de la rgion rpte.
Jeu denregistrements contenant les enregistrements pour la rgion rpte
Nombre denregistrements affichs
Lorsque vous slectionnez une nouvelle option, Dreamweaver met la page jour.
Rutilisation des jeux denregistrements en PHP

Si vous cherchez un didacticiel sur la rutilisation des jeux denregistrements PHP, consultez celui de David Powers : How Do I Reuse a PHP
Recordset in More Than One Repeat Region? (Comment rutiliser un jeu denregistrements PHP dans plusieurs rgions rptes ?)
Haut de la page
Cration dun tableau dynamique

Lexemple ci-dessous illustre comment le comportement de serveur Rgion rpte sapplique une ligne de tableau et indique quil est possible
dafficher un maximum de neuf enregistrements par page. La ligne elle-mme affiche quatre enregistrements diffrents : city, state, street address
et zip code.
716
Pour crer un tableau semblable celui de lexemple prcdent, vous devez crer un tableau contenant un contenu dynamique et appliquer le
comportement de serveur Rgion rpte la ligne renfermant le contenu dynamique. Lorsque la page est traite par le serveur dapplication, la
ligne est rpte autant de fois que le nombre spcifi dans lobjet de serveur Rgion rpte, avec un enregistrement diffrent insr dans
chaque ligne.
1. Procdez de lune des manires suivantes pour insrer un tableau dynamique :
Choisissez Insertion > Objets de donnes > Donnes dynamiques > Tableau dynamique pour afficher la bote de dialogue
Tableau dynamique.
Dans la catgorie Donnes du panneau Insertion, cliquez sur le bouton Donnes dynamiques et slectionnez licne
Tableau dynamique dans le menu.
2. Slectionnez le jeu denregistrements dans le menu droulant Jeu denregistrements.
3. Slectionnez le nombre denregistrements afficher sur chaque page.
4. (Facultatif) Entrez les valeurs des bordures du tableau, de la marge intrieure des cellules et de lespacement entre les
cellules.
La bote de dialogue Tableau dynamique mmorise les valeurs spcifies pour les bordures du tableau, la marge intrieure
des cellules et lespacement entre les cellules.
Remarque : si vous travaillez sur un projet ncessitant plusieurs tableaux dynamiques daspect semblable, tapez les valeurs
de mise en forme du tableau pour simplifier le dveloppement des pages. Une fois le tableau insr, vous pouvez toutefois
ajuster ces valeurs laide de linspecteur Proprits du tableau.
5. Cliquez sur OK.
Un tableau et des espaces rservs destins au contenu dynamique dfini dans le jeu denregistrements associ sinsrent
sur la page.
Dans cet exemple, le jeu denregistrements contient quatre colonnes : AUTHORID, FIRSTNAME, LASTNAME et BIO. Le nom
de chaque colonne se place dans la ligne de titre du tableau. Vous pouvez remplacer les titres par tout texte descriptif ou
image pertinente.
Haut de la page
Cration de compteurs denregistrements

717
Les compteurs denregistrements permettent aux utilisateurs de connatre leur position relative dans un jeu denregistrements. Ils affichent
gnralement le nombre total denregistrements renvoys et le nombre actuel denregistrements affichs. Prenons lexemple dun jeu
denregistrements renvoyant 40 enregistrements individuels, avec huit enregistrements affichs par page ; le compteur denregistrements indique
alors sur la premire page Affichage des enregistrements 1 8 sur 40 .
Avant de crer un compteur denregistrements pour une page, vous devez dabord crer un jeu denregistrements pour la page, une mise en
forme approprie pour la prsentation du contenu dynamique et une barre de navigation de jeu denregistrements.
Cration de compteurs denregistrements simples

Un compteur denregistrements indique aux utilisateurs la position dans laquelle ils se trouvent au sein dun groupe denregistrements, par rapport
au nombre total denregistrements renvoys. Il constitue donc un comportement utile permettant damliorer considrablement laspect fonctionnel
dun site Web.
Lobjet de serveur Etat de navigation du jeu denregistrements permet de crer un compteur denregistrements simple. Cet objet de serveur cre
une entre de texte sur la page pour afficher ltat de lenregistrement actif. Vous pouvez personnaliser votre compteur denregistrements laide
des outils de cration de page de Dreamweaver.
1. Placez le point dinsertion lendroit o vous souhaitez insrer le compteur denregistrements.
2. Choisissez Insertion > Objets de donnes > Afficher le nombre denregistrements > Etat de navigation du jeu
denregistrements, slectionnez le jeu denregistrements dans le menu droulant Jeu denregistrements, puis cliquez sur OK.
Lobjet de serveur Etat de navigation du jeu denregistrements insre un compteur denregistrements texte qui ressemble
lexemple suivant :
En mode Affichage en direct, le compteur prsente un apparence similaire lexemple suivant :
Cration et ajout du compteur denregistrements la page

Dans la bote de dialogue Insrer ltat de navigation du jeu denregistrements, slectionnez le jeu denregistrements
surveiller, puis cliquez sur OK.
Cration de compteurs denregistrements personnaliss

Vous faites appel des comportements de comptage denregistrements individuels pour crer des compteurs denregistrements personnaliss.
Les compteurs denregistrements personnaliss sont plus sophistiqus que le simple tableau une seule ligne insr par lobjet de serveur Etat de
navigation du jeu denregistrements. Vous pouvez organiser les lments de manires varies et cratives et appliquer un comportement de
serveur appropri chaque lment.
Les comportements de serveur de comptage des enregistrements sont les suivants :
Afficher le numro de lenregistrement de dbut

Afficher le numro de lenregistrement de fin
Afficher le nombre total denregistrements
Avant de crer un compteur denregistrements personnalis sur une page, vous devez dabord crer un jeu denregistrements pour la page, une
mise en forme approprie pour la prsentation du contenu dynamique et une barre de navigation de jeu denregistrements.
Dans cet exemple, un compteur denregistrements similaire lexemple de la section Crer des compteurs denregistrements simples est cr.
Dans cet exemple, le texte mis en forme avec la police sans-serif reprsente les espaces rservs aux nombres denregistrements qui seront
insrs dans la page. Le compteur denregistrements de cet exemple se prsente comme suit :
718
Affichage des enregistrements StartRow EndRow sur RecordSet.RecordCount.

1. En mode Cration, tapez le texte du compteur sur la page. Il peut sagir de nimporte quel texte. Par exemple :
1
Displaying records thru of .
2. Placez le point dinsertion la fin de la chane de texte.

3. Ouvrez le panneau Comportements de serveur (Fentre > Comportements de serveur).
4. Cliquez sur le bouton Plus(+) dans le coin suprieur gauche, puis cliquez sur Afficher le nombre denregistrements. Dans ce
sous-menu, choisissez Afficher le nombre total des enregistrements. Le comportement Afficher le nombre total des
enregistrements sinsre sur la page et un espace rserv se place au niveau du point dinsertion. La chane de texte
ressemble maintenant ce qui suit :
1
Displaying records thru of {Recordset1.RecordCount}.
5. Placez le point dinsertion aprs le mot records, et slectionnez Afficher le numro de lenregistrement de dbut dans le
panneau Nombre denregistrements (Comportements de serveur > Plus (+) > Nombre denregistrements. La chane de texte
ressemble maintenant ce qui suit :
1
Displaying records {StartRow_Recordset1} thru of {Recordset1.RecordCount}.
6. Placez maintenant le point dinsertion entre les mots thru et of, et slectionnez Afficher le numro de lenregistrement de
dbut dans le panneau Nombre denregistrements (Comportements de serveur > Plus (+) > Nombre denregistrements. La
chane de texte ressemble maintenant ce qui suit :
1
Displaying records {StartRow_Recordset1} thru {EndRow_Recordset1} of{Recordset1.RecordCount}.
7. Pour vrifier que le compteur fonctionne correctement, affichez la page en mode Affichage en direct. Le compteur prsente
une apparence similaire lexemple suivant :
1
Displaying records 1 thru 8 of 40.
Si la page de rsultats comporte un lien de navigation permettant daccder au groupe denregistrements suivant, il suffit de
cliquer sur ce lien pour mettre jour le compteur denregistrements comme suit :
1
Showing records 9 thru 16 of 40.
Haut de la page
Utilisation de formats de donnes prdfinis

Dreamweaver contient plusieurs formats de donnes prdfinis que vous pouvez appliquer des lments de donnes dynamiques. Les styles de
format de donnes prdfinis sont les suivants : Date/Heure, Devise, Nombre et Pourcentage.
Application dun format de donnes un contenu dynamique

1. Slectionnez lespace rserv pour contenu dynamique dans la fentre Document.
3. Dans la colonne Format, cliquez sur le bouton flch pointant vers le bas.
Si la flche vers le bas nest pas visible, agrandissez le panneau.
4. Dans le menu droulant Format, slectionnez la catgorie de format de donnes souhaite.
Assurez-vous que le format de donnes convient au type de donnes formater. Les formats Devise, par exemple, ne
fonctionnent que pour des donnes numriques. En outre, il est impossible dappliquer plusieurs formats aux mmes
donnes.
5. Assurez-vous que le format a t appliqu correctement. Pour ce faire, prvisualisez la page en mode Affichage en direct.
719
Personnalisation dun format de donnes

1. Ouvrez une page contenant des donnes dynamiques en mode Cration.
2. Slectionnez les donnes dynamiques pour lesquelles crer le format personnalis.
Llment de donnes lies dont vous avez slectionn le texte dynamique se met en surbrillance. Le panneau affiche deux
colonnes pour llment slectionn : Liaison et Format. Si la colonne Format nest pas visible, largissez le panneau Liaisons
afin de lafficher.
3. Dans le panneau Liaisons, cliquez sur la flche vers le bas de la colonne Format pour dvelopper le menu droulant des
formats de donnes disponibles.
Si la flche vers le bas nest pas visible, agrandissez davantage le panneau Liaisons.
4. Dans le menu droulant, choisissez Modifier la liste de formats.
5. Compltez les options de la bote de dialogue, puis cliquez sur OK.
a. Slectionnez le format dans la liste, puis cliquez sur Modifier.
b. Modifiez un ou plusieurs des paramtres suivants dans les botes de dialogue Devise, Nombre ou Pourcentage, puis
cliquez sur OK.
Nombre de chiffres afficher aprs la virgule
Affichage ou absence dun zro devant les nombres dcimaux infrieurs un
Affichage ou absence de parenthses ou dun signe moins pour les valeurs ngatives
Regroupement ou non des chiffres
c. Pour supprimer un format de donnes, cliquez sur le format dans la liste, puis sur le bouton Moins (-).
Cration dun format de donnes (ASP uniquement)

1. Ouvrez une page contenant des donnes dynamiques en mode Cration.
2. Slectionnez les donnes dynamiques pour lesquelles crer le format personnalis.
3. Choisissez Fentre > Liaisons pour afficher le panneau Liaisons, puis cliquez sur la flche vers le bas dans la colonne
Format. Si la flche vers le bas nest pas visible, agrandissez le panneau.
4. Dans le menu droulant, choisissez Modifier la liste de formats.
5. Cliquez sur le bouton Plus (+) et slectionnez un type de format.
6. Dfinissez le format et cliquez sur OK.
7. Entrez un nom pour le nouveau format dans la colonne Nom et cliquez sur OK.
Remarque : bien que Dreamweaver ne prenne en charge la cration de formats de donnes que pour les pages ASP, les
utilisateurs de ColdFusion et de PHP peuvent tlcharger des formats crs par dautres dveloppeurs, ou crer des formats
de serveur et les publier sur Dreamweaver Exchange. Pour plus dinformations sur lAPI de formats de serveur, voir Extension
de Dreamweaver (Aide > Extension de Dreamweaver > Formats de serveur).
720
Affichage des donnes dynamiques

Fourniture de donnes dynamiques une page en mode En direct
Dpannage des donnes en direct dans le mode En direct
La fonctionnalit d'affichage Live Data a t abandonne depuis Dreamweaver CS5. Elle a t remplace par la fonction Affichage en direct,
davantage optimise.
Pour afficher les donnes en direct en mode En direct, veillez effectuer les oprations suivantes :
Dfinissez un dossier pour le traitement des pages dynamiques (par exemple, un dossier racine sur un serveur ColdFusion,
sur votre ordinateur ou sur un ordinateur distant).
Si la page affiche un message d'erreur lorsque vous accdez au mode En direct, assurez-vous que l'URL Web est correct
dans la bote de dialogue Dfinition du site.
Copiez les fichiers associs (le cas chant) dans le dossier.
Fournissez tous les paramtres de la page qu'un utilisateur fournirait normalement.
Fourniture de donnes dynamiques une page en mode En direct
Haut de la page
1. Ouvrez la bote de dialogue Paramtres d'affichage en direct (Affichage > Options d'affichage en direct > Paramtres de
demande HTTP).
2. Dans la zone Demande d'URL, cliquez sur le bouton plus (+) pour entrer un paramtre attendu par votre page.
3. Indiquez un nom et une valeur test pour chaque paramtre.
4. Dans le menu droulant Mthode, slectionnez la mthode de formulaire HTML attendue par votre page : POST ou GET.
5. Pour enregistrer les paramtres de la page actuelle, choisissez Enregistrer les paramtres de ce document, puis cliquez sur
OK.
Remarque : Pour que les paramtres puissent tre enregistrs, vous devez activer Design Notes (Fichier > Design Notes).
Dpannage des donnes en direct dans le mode En direct
Haut de la page
Bon nombre de problmes d'affichage de donne en direct dans le mode En direct sont lis des valeurs manquantes ou incorrectes dans la
bote de dialogue Dfinition du site (Site > Modifier les sites).
Vrifiez les paramtres du serveur que vous avez spcifi comme serveur d'valuation. Vous devez spcifier un dossier capable de traiter des
pages dynamiques l'endroit o la bote de dialogue Dfinition du site demande un dossier de serveur ou un rpertoire racine. Voici un exemple
de dossier de serveur appropri si vous excutez IIS ou PWS sur votre disque dur :
C:\Inetpub\wwwroot\myapp\
Vrifiez que la case URL Web spcifie bien une URL correspondant au dossier distant. Par exemple, si PWS ou IIS est excut sur votre
ordinateur local, les dossiers distants suivants ont possdent les URL Web suivantes :
Dossier distant
URL Web
C:\Inetpub\wwwroot\
http://localhost/
C:\Inetpub\wwwroot\myapp\
http://localhost/myapp/
C:\Inetpub\wwwroot\fs\planes
http://localhost/fs/planes
Voir aussi
721
Ajout de comportements de serveur personnaliss

A propos des comportements de serveur personnaliss
Droulement du travail des comportements de serveur personnaliss
Utilisation du Crateur de comportements de serveur
Cration de blocs de code
Positionnement d'un bloc de code
Rptitions des blocs de code avec la directive de boucle
Demande d'un paramtre pour le comportement de serveur
Modification d'un comportement de serveur
Instructions pour le codage
Test des comportements de serveur
A propos des comportements de serveur personnaliss
Haut de la page
Dreamweaver est livr avec un ensemble de comportements de serveur qui vous permettent d'ajouter aisment des options dynamiques un site.
Si vous souhaitez accrotre les fonctionnalits de Dreamweaver, vous pouvez crer de nouveaux comportements de serveur en fonction de vos
besoins spcifiques ou en tlcharger depuis le site Web de Dreamweaver Exchange.
Avant de crer vos propres comportements de serveur, vrifiez sur le site Web de Dreamweaver Exchange que le comportement de serveur
offrant la fonctionnalit que vous souhaitez ajouter votre site Web n'a pas dj t cr par un autre dveloppeur. Il est frquent que des
dveloppeurs tiers crent et testent des comportements de serveur qui rpondent aux besoins d'autres personnes.
Accs Dreamweaver Exchange

1. Dans Dreamweaver, accdez Dreamweaver Exchange de l'une des faons suivantes :
Slectionnez Aide > Dreamweaver Exchange.
Slectionnez Fentre > Comportements de serveur, cliquez sur le bouton Plus (+), puis choisissez Obtenir d'autres
comportements de serveur.
La page Web de Dreamweaver Exchange apparat dans votre navigateur.
2. Connectez-vous Exchange en utilisant votre ID Adobe personnel ou, si vous n'avez pas encore cr d'ID Dreamweaver
Exchange, suivez les instructions d'ouverture d'un compte Adobe.
Installation d'un comportement de serveur ou d'une autre extension dans Dreamweaver

1. Pour dmarrer Extension Manager, choisissez Commandes > Grer les extensions.
2. Choisissez Fichier > Installer un paquet dans Extension Manager.
Pour plus d'informations, voir Utilisation de Extension Manager.
Droulement du travail des comportements de serveur personnaliss
Haut de la page
Si vous tes dveloppeur Web et que vous matrisez les technologies ColdFusion, JavaScript, VBScript ou PHP, vous pouvez rdiger vos propres
comportements de serveur. La cration d'un comportement de serveur implique les oprations suivantes :
Rdiger un ou plusieurs blocs de code excutant l'action requise.
Indiquer le point d'insertion du bloc de code dans le code HTML de la page.
Si le comportement de serveur requiert que la valeur d'un paramtre soit spcifie, crer une bote de dialogue invitant le
dveloppeur Web qui applique le comportement fournir la valeur approprie.
Tester le comportement de serveur avant de le rendre disponible d'autres utilisateurs.
Utilisation du Crateur de comportements de serveur
Haut de la page
Utilisez le Crateur de comportements de serveur pour ajouter le ou les blocs de code que le comportement doit insrer dans la page.
722
choisissez Nouveau comportement de serveur.
2. Dans le menu droulant Type de document, slectionnez le type de document pour lequel vous dveloppez le comportement
de serveur.
3. Dans la zone Nom, entrez le nom du comportement de serveur.
4. (Facultatif) Pour copier un comportement de serveur existant pour l'ajouter au comportement en cours de cration, activez
l'option Copier un comportement de serveur existant, puis slectionnez le comportement voulu dans le menu droulant
Comportement copier. Cliquez sur OK.
La bote de dialogue Crateur de comportements de serveur s'affiche.
5. Pour ajouter un nouveau bloc de code, cliquez sur le bouton Plus (+), nommez le bloc de code, puis cliquez sur OK.
Le nom que vous avez entr apparat dans le Crateur de comportements de serveur, tandis que les balises de script
appropries s'affichent dans la zone Bloc de code.
6. Dans la zone Bloc de code, tapez le code d'excution ncessaire pour implmenter le comportement de serveur.
Remarque : Lorsque vous entrez le code dans la zone Bloc de code, vous ne pouvez insrer qu'une balise ou qu'un bloc de
code pour chaque bloc de code nomm (par exemple, monComportement_bloc1, monComportement_bloc2,
monComportement_blocn, etc.). Pour saisir plusieurs balises ou blocs de code, crez un bloc de code individuel pour chaque
lment. Vous pouvez galement copier et coller le code d'autres pages.
7. Placez le point d'insertion dans le bloc de code l'endroit o vous souhaitez insrer le paramtre, ou slectionnez une chane
remplacer par un paramtre.
8. Cliquez sur le bouton Insrer le paramtre dans le bloc de code.
9. Tapez le nom du paramtre dans la zone Nom de paramtre (par exemple, Session), puis cliquez sur OK.
Le paramtre vient s'insrer dans le bloc de code l'endroit o vous avez plac le point d'insertion avant la dfinition du
paramtre. Si vous avez slectionnez une chane, chaque occurrence de la chane slectionne dans le bloc de code est
remplace par un marqueur de paramtre (par exemple, @@Session@@).
10. Dans le menu droulant Insrer code, choisissez une option indiquant l'endroit o incorporer les blocs de code.
11. (Facultatif) Pour spcifier des informations supplmentaires sur le comportement de serveur, cliquez sur le bouton Avanc.
12. Pour crer d'avantage de blocs de code, rptez les tapes 5 11.
13. Si le comportement de serveur requiert que des paramtres lui soient fournis, vous devez crer une bote de dialogue qui
accepte les paramtres de la personne appliquant le comportement. Reportez-vous au lien ci-dessous.
14. Aprs avoir excut les tapes requises pour crer le comportement de serveur, cliquez sur OK.
Le panneau Comportements de serveur rpertorie le comportement de serveur.
15. Testez-le pour vous assurer qu'il fonctionne correctement.
Options avances
Une fois le code source spcifi et l'emplacement de chaque bloc de code insr, le comportement de serveur est compltement dfini. Dans la
plupart des cas, il est inutile de spcifier d'autres informations.
Si vous tes un utilisateur chevronn, vous pouvez dfinir les options suivantes :
Identificateur Indique si le bloc de code doit tre trait comme un identificateur.
Par dfaut, chaque bloc de code constitue un identificateur. Si Dreamweaver trouve un bloc de code identificateur dans un document, il affiche le
comportement dans le panneau Comportements de serveur. Activez l'option Identificateur pour indiquer si le bloc de code doit tre trait comme
tel.
Au moins un des blocs de code du comportement de serveur doit tre un identificateur. Ne dfinissez pas comme identificateur un bloc de code
rpondant aux conditions suivantes : ce mme bloc de code est utilis dans d'autres comportements de serveur ; il s'agit d'un bloc de code
tellement simple qu'il peut se produire naturellement dans la page.
Titre du comportement de serveur Indique le titre du comportement dans le panneau Comportements de serveur.
Lorsque le crateur de la page clique sur le bouton Plus (+) du panneau Comportements de serveur, le titre du nouveau comportement s'affiche
dans le menu droulant. Lorsqu'un crateur applique une occurrence d'un comportement de serveur un document, le comportement est
rpertori dans la liste des comportements appliqus du panneau Comportements de serveur. Dans la zone Titre du comportement de serveur,
spcifiez le contenu du menu droulant Plus (+) et de la liste de comportements appliqus.
Le champ comporte par dfaut la valeur du nom que vous avez indiqu dans la bote de dialogue Nouveau comportement de serveur. A mesure
que les paramtres sont dfinis, le nom est automatiquement mis jour : les paramtres apparaissent entre parenthses aprs le nom du
comportement de serveur.
1
Set Session Variable (@@Name@@, @@Value@@)
723
Si l'utilisateur accepte la valeur par dfaut, tout ce qui prcde les parenthses s'affiche dans le menu droulant Plus (+) (par exemple, Set
Session Variable). Le nom et les paramtres sont rpertoris dans la liste des comportements appliqus, par exemple, Set Session Variable
( abcd , 5 ).
Bloc de code slectionner Slectionner indique le bloc de code slectionn lorsque l'utilisateur choisit le comportement dans le panneau
Comportements de serveur.
Lorsque vous appliquez un comportement de serveur, l'un de ses blocs de code est dsign comme tant le bloc de code slectionner . Si
vous appliquez le comportement de serveur, puis que vous le slectionnez dans le panneau Comportements de serveur, le bloc dsign est
slectionn dans la fentre de document. Par dfaut, Dreamweaver slectionne le premier bloc de code ne se trouvant pas au-dessus de la balise
html. Si tous les blocs de code se trouvent au-dessus de la balise html, le premier est slectionn. Les utilisateurs chevronns peuvent indiquer le
bloc de code devant tre slectionn.
Haut de la page
Cration de blocs de code
Les blocs de code ajouts dans le Crateur de comportements de serveur sont encapsuls dans un comportement de serveur figurant dans le
panneau Comportements de serveur. Le code peut correspondre tout code d'excution conforme au modle de serveur spcifi. Si vous
choisissez ColdFusion comme type de document pour votre comportement de serveur personnalis, par exemple, le code rdig doit correspondre
un code ColdFusion valide pouvant s'excuter sur un serveur d'application ColdFusion.
Vous pouvez crer les blocs de code soit directement depuis le Crateur de comportements de serveur, soit en les copiant et les collant depuis
d'autres sources. Chaque bloc de code ajout dans le Crateur de comportements de serveur doit reprsenter une balise ou un bloc de script
unique. Si vous devez insrer plusieurs blocs de balise, divisez-les en blocs de code distincts.
Conditions dans les blocs de code
Dreamweaver permet de crer des blocs de code contenant des instructions de contrle excution conditionnelle. Le Crateur de
comportements de serveur utilise des instructions if, elseif et else et peut contenir des paramtres de comportement de serveur. Cela permet
d'insrer plusieurs blocs de texte secondaire selon les valeurs des relations OR entre les paramtres de comportement de serveur.
L'exemple suivant montre les instructions if, elseif et else. Les crochets ([ ]) indiquent que le code est facultatif, alors que l'astrisque (*) signale
qu'il existe zro occurrence ou davantage. Pour n'excuter un bloc de code, ou une partie de celui-ci, que si certaines conditions sont remplies,
utilisez la syntaxe suivante :
1
2
3
<@ if (<dfn class="term">expression1</dfn>) @>

<dfn class="term">conditional
text1</dfn>[<@ elseif (<dfn class="term">expression2</dfn>) @>
<dfn class="term">conditional
text2</dfn>]*[<@ else @>
<dfn class="term">conditional text3</dfn>]<@ endif @>
Les expressions de condition peuvent correspondre toute expression JavaScript valuable l'aide de la fonction eval() de JavaScript, et peuvent
inclure un paramtre de comportement de serveur indiqu par des symboles @@. (Ces symboles sont ncessaires pour distinguer le paramtre
des variables et mots-cls JavaScript.)
Utilisation efficace des expressions conditionnelles
En utilisant les directives if, else et elseif au sein d'une balise XML insertText, le texte participant est prtrait pour rsoudre les directives if et
dterminer le texte inclure dans le rsultat. Les directives if et elseif interprtent l'expression comme un argument. L'expression de condition est
identique aux expressions de condition JavaScript et peut galement contenir des paramtres de comportement de serveur. Les directives de ce
type permettent d'effectuer un choix parmi plusieurs blocs de code possibles, et ce en fonction des valeurs des paramtres de comportement de
serveur ou des relations entre ces paramtres.
Le code JSP indiqu ci-dessous, par exemple, provient d'un comportement de serveur Dreamweaver utilisant le bloc de code conditionnel :
1
2
3
4
5
6
7
@@rsName@@.close();
<@ if (@@callableName@@ != '') @>
@@callableName@@.execute();
@@rsName@@ = @@callableName@@.getResultSet();<@ else @>
@@rsName@@ = Statement@@rsName@@.executeQuery();
<@ endif @>
@@rsName@@_hasData = @@rsName@@.next();
Le bloc de code conditionnel dbute par <@ if (@@callableName@@ != '') @> et se termine par <@ endif @>. Selon le code, si l'utilisateur entre
une valeur pour le paramtre @@callableName@@ dans la bote de dialogue Paramtre du comportement de serveur, c'est--dire si la valeur du
paramtre @@callableName@@ n'est pas nulle, ou (@@callableName@@ != ''), le bloc de code conditionnel est remplac par les instructions
suivantes :
1
2
@@callableName@@.execute();
@@rsName@@ = @@callableName@@.getResultSet();
724
Dans le cas contraire, le bloc de code est remplac par l'instruction suivante :
1
@@rsName@@ = Statement@@rsName@@.executeQuery();
Haut de la page
Positionnement d'un bloc de code
Lorsque vous crez des blocs de code l'aide du Crateur de comportements de serveur, vous devez prciser l'endroit o les insrer dans le
code HTML de la page.
Par exemple, si vous insrez un bloc de code au-dessus de la balise <html> d'ouverture, vous devez ensuite en indiquer la position par rapport
aux autres balises, scripts et comportements de serveur figurant dans cette section du code HTML de la page. Il peut s'agir, par exemple, de
placer un comportement avant ou aprs une requte portant sur des jeux d'enregistrements, qui pourrait dj figurer dans le code de la page audessus de la balise <html> d'ouverture.
Les options disponibles dans le menu droulant Position relative varient en fonction de la position slectionne dans le menu droulant Insrer
code. Il ne s'agit donc que des options pertinentes pour la partie concerne de la page. Par exemple, lorsque vous activez l'option Au-dessus de
la balise <html> dans le menu droulant Insrer code, les options de positionnement disponibles dans le menu droulant Position relative refltent
les choix pertinents pour la partie concerne de la page.
Le tableau suivant prsente les options d'insertion des blocs de code et les positions relatives correspondantes :
Options du menu
Insrer code
Au-dessus de la balise
<html>
Options de position relative
Au dbut du fichier
Juste avant les jeux d'enregistrements
Juste aprs les jeux d'enregistrements
Juste au-dessus de la balise <html>
Position personnalise
Au-dessous de la balise
</html>
Avant la fin du fichier

Avant la fermeture du jeu d'enregistrements
Aprs la fermeture du jeu d'enregistrements
Aprs la balise </html>
Position personnalise
Relatif une balise

spcifique
Choisissez une balise dans le menu droulant Balise, puis choisissez parmi les options de
positionnement des balises.
Relatif la slection
Avant la slection
Aprs la slection
Remplacer la slection
Envelopper la slection
Pour indiquer une position personnalise, vous devez attribuer une paisseur au bloc de code. Utilisez l'option Position personnalise lorsque
vous voulez insrer plusieurs blocs de code dans un ordre particulier. Par exemple, pour insrer une srie de trois blocs de code dans un certain
ordre aprs les blocs de code qui ouvrent des jeux d'enregistrements, tapez une paisseur de 60 pour le premier bloc, de 65 pour le deuxime et
de 70 pour le troisime.
Par dfaut, Dreamweaver attribue une paisseur de 50 tous les blocs de code d'ouverture de jeux d'enregistrement insrs au-dessus de la
balise <html>. Si plusieurs blocs ont la mme paisseur, Dreamweaver les classe de faon alatoire.
Placement d'un bloc de code (instructions gnrales)

1. A l'aide du Crateur de comportements de serveur, rdigez un bloc de code.
2. Dans la bote de dialogue Crateur de comportements de serveur, slectionnez la position dans laquelle insrer le bloc de
code dans le menu droulant Insrer code.
3. Dans la bote de dialogue Crateur de comportements de serveur, slectionnez une position relative celle qui est
725
slectionne dans le menu droulant Insrer code.

4. Si vous avez termin la cration du bloc de code, cliquez sur OK.
Le comportement de serveur est rpertori dans le panneau Comportements de serveur (Fentre > Comportements de
serveur) ; cliquez sur le bouton Plus (+) pour l'afficher.
5. Testez-le pour vous assurer qu'il fonctionne correctement.
Positionnement d'un bloc de code par rapport une autre balise de la page
1. Dans le menu droulant Insrer code, choisissez Relatif une balise spcifique.
2. Dans la zone Balise, saisissez la balise ou slectionnez-en une dans le menu droulant.
N'entrez pas les crochets de la balise (<>).
3. Spcifiez un emplacement relatif la balise en choisissant une option dans le menu droulant Position relative.
Positionnement d'un bloc de code par rapport une balise slectionne par le crateur de la page
1. Dans le menu droulant Insrer code, choisissez Relatif la slection.
2. Spcifiez un emplacement relatif la balise en choisissant une option dans le menu droulant Position relative.
Vous pouvez insrer votre bloc de code immdiatement avant ou aprs la slection. Vous pouvez galement remplacer la
slection par votre bloc de code ou renvoyer le bloc de code la ligne autour de la slection.
Pour envelopper le bloc de code autour d'une slection, cette dernire doit se composer d'une balise d'ouverture et d'une
balise de fermeture juxtaposes, comme suit:
1
<CFIF Day="Monday"></CFIF>
Insrez la balise d'ouverture du bloc de code s'insre avant la balise d'ouverture de la slection et sa balise de fermeture
aprs la balise de fermeture de la slection.
Haut de la page
Rptitions des blocs de code avec la directive de boucle

Pour rpter un bloc de code, ou une partie de celui-ci, un certain nombre de fois, utilisez la syntaxe suivante :
1
2
<@ loop (<dfn class="term">@@param1@@,@@param2@@</dfn>) @>

block</dfn><@ endloop @>
<dfn class="term">code
Lors de la cration de comportements de serveur, vous pouvez utiliser des structures de boucle pour rpter un bloc de code un nombre dfini de
fois.
1
2
<@ loop (<dfn class="term">@@param1@@,@@param2@@,@@param3@@,@@param_n@@</dfn>) @>

<@ endloop @>
code block
La directive de boucle accepte des arguments se prsentant sous la forme d'une liste de tableaux de paramtre spars par des virgules. Dans ce
cas, les arguments des tableaux de paramtre permettent aux utilisateurs de fournir plusieurs valeurs pour un mme paramtre. Le texte rptitif
sera dupliqu n fois, n correspondant la longueur des arguments des tableaux de paramtre. Si plusieurs arguments de tableaux de paramtre
sont indiqus, tous les tableaux doivent tre de la mme longueur. Lors de la nime valuation de la boucle, les nimes lments des tableaux de
paramtre remplacent les occurrences du paramtre correspondant dans le bloc de code.
Lorsque vous crez une bote de dialogue pour le comportement de serveur, vous pouvez ajouter une commande la bote de dialogue qui
permet au concepteur de la page de crer des tableaux de paramtre. Dreamweaver inclut une commande de tableau simple que vous pouvez
utiliser pour crer des botes de dialogue. Cette commande, qui s'appelle Liste de champs de texte spars par des virgules, est accessible
partir du Crateur de comportements de serveur. Pour crer des lments d'interface utilisateur plus complexes et apprendre concevoir une
bote de dialogue contenant une commande de cration de tableaux (commande de grille, par exemple), consultez la documentation API.
Vous pouvez imbriquer autant de directives conditionnelles ou de boucle que vous le souhaitez au sein d'une mme directive conditionnelle. Ainsi
pouvez-vous prciser, par exemple, que si une expression est vraie, la boucle doit tre excute.
L'exemple suivant montre comment utiliser des blocs de code rptitifs pour crer des comportements de serveur (cet exemple correspond un
comportement ColdFusion permettant d'accder une procdure stocke) :
1
<CFSTOREDPROC procedure="AddNewBook"
726
2
3
4
5
6
7
8
9
datasource=#MM_connection_DSN#
username=#MM_connection_USERNAME#
password=#MM_connection_PASSWORD#>
<CFPROCPARAM type="IN" dbvarname="@CategoryId" value="#Form.CategoryID#"
cfsqltype="CF_SQL_INTEGER">
<CFPROCPARAM type="IN" dbvarname="@ISBN" value="#Form.ISBN#"
cfsqltype="CF_SQL_VARCHAR">
</CFSTOREDPROC>
Dans cet exemple, la balise CFSTOREDPROC peut comprendre zro ou davantage de balises CFPROCPARAM. Toutefois, sans prise en charge
de la directive de boucle, il est impossible d'inclure les balises CFPROCPARAM au sein de la balise CFSTOREDPROC insre. Si vous vous
inspiriez de cet exemple pour crer un comportement de serveur sans la directive de boucle, il vous faudrait le diviser en deux participants : une
balise CFSTOREDPROC principale et une balise CFPROCPARAM dont le type de participant serait multiple.
Avec la directive de boucle, il est possible de rdiger cette mme procdure comme suit :
1
2
3
4
5
6
7
8
9
10
11
<CFSTOREDPROC procedure="@@procedure@@"
datasource=#MM_@@conn@@_DSN#
username=#MM_@@conn@@_USERNAME#
password=#MM_@@conn@@_PASSWORD#>
<@ loop (@@paramName@@,@@value@@,@@type@@) @>
<CFPROCPARAM type="IN"
dbvarname="@@paramName@@"
value="@@value@@"
cfsqltype="@@type@@">
<@ endloop @>
</CFSTOREDPROC>
Remarque : Les nouvelles lignes situes aprs chaque lment @> sont ignores.
Supposons que l'utilisateur ait tap les valeurs de paramtre suivantes dans la bote de dialogue Crateur de comportements de serveur :
1
2
3
4
5
procedure = "proc1"
conn = "connection1"
paramName = ["@CategoryId", "@Year", "@ISBN"]
value = ["#Form.CategoryId#", "#Form.Year#", "#Form.ISBN#"]
type = ["CF_SQL_INTEGER", "CF_SQL_INTEGER", "CF_SQL_VARCHAR"]
Le comportement de serveur insrerait alors le code d'excution suivant dans la page :

1
2
3
4
5
6
7
8
9
10
11
<CFSTOREDPROC procedure="proc1"
datasource=#MM_connection1_DSN#
username=#MM_connection1_USERNAME#
password=#MM_connection1_PASSWORD#>
<CFPROCPARAM type="IN" dbvarname="@CategoryId" value="#Form.CategoryId#"
<CFPROCPARAM type="IN" dbvarname="@Year" value="#Form.Year#"
<CFPROCPARAM type="IN" dbvarname="@ISBN" value="#Form.ISBN#"
cfsqltype="CF_SQL_VARCHAR">
</CFSTOREDPROC>
Remarque : Il est impossible d'utiliser les tableaux de paramtre en dehors d'une boucle, sauf en tant que composants d'une expression de
directive conditionnelle.
Utilisation des variables _length et _index de la directive de boucle
La directive de boucle comprend deux variables intgres utilisables dans les conditions if incorpores. Ces variables sont les suivantes : _length
et _index. La variable _length se rapporte la longueur des tableaux traits par la directive de boucle, alors que la variable _index se rapporte
l'index actuel de la directive loop elle-mme. Pour que ces variables ne soient reconnues qu'en tant que directives et non en tant que paramtres
faire passer par la boucle, ne les insrez pas entre des symboles @@.
Un exemple d'utilisation des variables intgres consiste les appliquer l'attribut import de la directive de page. L'attribut import requiert que les
paquets soient spars par des virgules. Si la directive loop englobe l'intgralit de l'attribut import, le nom d'attribut import= ne doit sortir qu' la
premire itration de la boucle (les guillemets fermants (") sont alors inclus) et aucune virgule n'apparat la dernire itration de la boucle. Pour
ce faire, vous pouvez utiliser la variable intgre comme suit :
1
<@loop (@@Import@@)@>
727
2
3
4
5
<@ if(_index == 0)@>import="

<@endif@>@@Import@@<@if (_index == _length-1)@>"<@else@>,
<@ endif @>
<@endloop@>
Demande d'un paramtre pour le comportement de serveur
Haut de la page
Les comportements de serveur requirent souvent que le concepteur de la page fournisse une valeur de paramtre. Cette valeur doit tre insre
avant que le code du comportement de serveur ne soit insr dans la page.
Pour crer la bote de dialogue, dfinissez dans le code les paramtres devant tre fournis par le concepteur. Vous gnrez ensuite une bote de
dialogue pour le comportement de serveur qui invite le concepteur de la page entrer une valeur de paramtre.
Remarque : Un paramtre est ajout votre bloc de code sans votre intervention si vous spcifiez que votre code doit tre insr par rapport
une balise prcise choisie par le crateur de la page (en d'autres termes, si vous choisissez Relatif une balise spcifique dans le menu
droulant Insrer code). Le paramtre ajoute un menu Balise la bote de dialogue du comportement pour permettre au crateur de la page de
slectionner une balise.
Dfinition du paramtre dans le code de comportement de serveur

1. Saisissez un marqueur de paramtre l'endroit du code o vous souhaitez insrer la valeur du paramtre fournie par le
concepteur. Le paramtre utilise la syntaxe suivante :
1
<dfn class="term">@@parameterName@@</dfn>
2. Insrez la chane formParam entre des marqueurs de paramtre (@@) :

1
<% Session("lang_pref") = Request.Form("@@formParam@@"); %>
Supposons que le comportement de serveur contienne le bloc de code suivant :

1
<% Session("lang_pref") = Request.Form("<dfn class="term">Form_Object_Name</dfn>"); %>
Pour imposer au concepteur de la page de fournir la valeur du paramtre Form_Object_Name, entourez la chane de
marqueurs de paramtre (@@) :
1
<% Session("lang_pref") = Request.Form("@@Form_Object_Name@@"); %>
Vous pouvez galement mettre la chane en surbrillance, puis cliquer sur le bouton Insrer le paramtre dans le bloc de code. Entrez un nom de
paramtre, puis cliquez sur OK. Dreamweaver remplace toutes les occurrences de la chane mise en surbrillance par le nom du paramtre
entour de marqueurs.
Dreamweaver utilise les chanes places entre les marqueurs de paramtre comme libell des commandes de la bote de dialogue qu'il gnre
(voir la procdure ci-dessous). Dans l'exemple ci-dessus, Dreamweaver cre une bote de dialogue avec le libell suivant :
Remarque : Les noms des paramtres du code de comportement de serveur ne peuvent pas comporter d'espaces. Aussi les libells de la bote de
dialogue ne peuvent-ils pas non plus comporter d'espaces. Pour inclure des espaces dans un libell, vous devez modifier le fichier HTML gnr.
Cration d'une bote de dialogue pour votre comportement de serveur afin de demander la valeur d'un
paramtre
1. Dans le Crateur de comportements de serveur, cliquez sur Suivant.
2. Pour modifier l'ordre d'affichage des commandes de la bote de dialogue, slectionnez un paramtre, puis cliquez sur les
728
flches vers le bas et vers le haut.

3. Pour modifier la commande d'un paramtre, slectionnez le paramtre voulu, puis slectionnez une autre commande dans la
colonne Afficher en tant que.
4. Cliquez sur OK.
Dreamweaver gnre une bote de dialogue comportant une commande pour chacun des paramtres dfinis comme devant
tre fournis par le concepteur.
Affichage de la bote de dialogue

Cliquez sur le bouton Plus (+) du panneau Comportements de serveur (Fentre > Comportements de serveur), puis slectionnez votre
comportement de serveur personnalis dans le menu droulant.
Modification de la bote de dialogue cre pour le comportement de serveur

1. Dans le panneau Comportements de serveur (Fentre > Comportements de serveur), cliquez sur le bouton Plus (+) et
choisissez Modifier les comportements de serveur dans le menu droulant.
2. Slectionnez votre comportement de serveur dans la liste, puis cliquez sur Ouvrir.
3. Cliquez sur Suivant.
Une bote de dialogue s'affiche, rpertoriant tous les paramtres fournis par le crateur que vous avez dfinis dans votre
code.
4. Pour modifier l'ordre d'affichage des commandes de la bote de dialogue, slectionnez un paramtre, puis cliquez sur les
flches vers le bas et vers le haut.
5. Pour modifier la commande d'un paramtre, slectionnez le paramtre voulu, puis slectionnez une autre commande dans la
colonne Afficher en tant que.
6. Cliquez sur OK.
Haut de la page
Modification d'un comportement de serveur
Vous pouvez modifier tout comportement de serveur cr l'aide du Crateur de comportements de serveur, y compris les comportements de
serveur que vous avez tlcharg depuis le site Web de Dreamweaver Exchange et d'autres dveloppeurs tiers.
Si vous appliquez un comportement une page puis le modifiez dans Dreamweaver, les occurrences de l'ancien comportement disparaissent du
panneau Comportements de serveur. Le panneau Comportements de serveur recherche dans la page le code correspondant au code des
comportements de serveur connus. Si le code d'un comportement de serveur change, le panneau ne reconnat pas les versions antrieures du
comportement sur la page.
Conservation des anciennes et les nouvelles versions du comportement dans le panneau

Cliquez sur le bouton Plus (+) du panneau Comportements de serveur (Fentre > Comportements de serveur), choisissez Nouveau
comportement de serveur, puis crez une copie de l'ancien comportement de serveur.
Modification du code d'excution d'un comportement de serveur cr l'aide du Crateur de

comportements de serveur
choisissez Modifier les comportements de serveur dans le menu droulant.
La bote de dialogue Modifier les comportements de serveur affiche tous les comportements de la technologie serveur
courante.
2. Slectionnez le comportement de serveur et cliquez sur Modifier.
3. Slectionnez le bloc de code appropri et modifiez le code, les marqueurs de paramtre ou la position du bloc de code
insrer dans les pages.
4. Si le code modifi ne contient pas de paramtres fournis par le crateur, cliquez sur OK.
Dreamweaver gnre une nouvelle fois le comportement de serveur sans bote de dialogue. Le nouveau comportement de
serveur s'affiche dans le menu droulant Plus (+) du panneau Comportements de serveur.
5. Si le code modifi contient des paramtres fournis par le crateur, cliquez sur Suivant.
Dreamweaver vous demande si vous voulez crer une nouvelle bote de dialogue qui crasera la prcdente. Effectuez les
modifications requises, puis cliquez sur OK.
Dreamweaver enregistre tous les changements apports dans le fichier EDML du comportement de serveur.
Haut de la page
Instructions pour le codage
729
D'une faon gnrale, le code de votre comportement de serveur doit tre compact et robuste. Les dveloppeurs d'applications Web sont trs
sensibles au code ajout leurs pages. Respectez les rgles de codage gnralement appliques pour le langage du type de document concern
(ColdFusion, JavaScript, VBScript ou PHP). Si vous ajoutez des commentaires, tenez compte des diffrents publics qui devront comprendre le
code, tels que les concepteurs de pages Web et d'lments interactifs ou tout autre dveloppeur d'applications Web. Incluez des commentaires
prcis dcrivant le but du code et ajoutez toutes les instructions utiles pour l'inclure dans une page.
Tenez compte des instructions de codage suivantes lors de la cration de comportements de serveur :
Le contrle des erreurs L'un des lments indispensables. Le code du comportement de serveur doit tre en mesure de traiter les cas d'erreur
avec lgance. Essayez de prvoir toutes les ventualits. Exemple : Que se passe-t-il si une demande de paramtre choue ? Si aucun
enregistrement n'est envoy suite une requte ?
L'utilisation de noms uniques Permet de s'assurer que le code est clairement identifiable et d'viter tout conflit entre le nom employ et un nom
dj utilis dans le code existant. Si la page contient une fonction appele hideLayer(), une variable globale appele ERROR_STRING et que le
comportement de serveur insre un code utilisant ces mmes noms, par exemple, ce comportement risque d'entrer en conflit avec le code
existant.
Les prfixes de code Permettent d'identifier les fonctions d'excution et les variables globales insres dans une page. Une convention consiste
employer vos propres initiales. N'utilisez jamais le prfixe MM_, qui est exclusivement rserv l'usage de Dreamweaver. Dreamweaver fait
prcder toutes les fonctions et variables globales du prfixe MM_ pour les empcher d'entrer en conflit avec le code que vous crivez.
1
2
var MM_ERROR_STRING = "...";

function MM_hideLayer() {
Evitez les blocs de code similaires de sorte que votre bloc ne ressemble pas trop au code d'autres blocs. En effet, si un bloc de code
ressemble un peu trop un autre bloc figurant sur la page, le panneau Comportements de serveur risque d'identifier par erreur ce premier bloc
comme une occurrence du deuxime (ou l'inverse). Pour viter ce problme, ajoutez par exemple un commentaire un bloc de code pour le
rendre plus unique.
Haut de la page
Test des comportements de serveur

Dreamweaver Exchange conseille de tester chacun des comportements de serveur que vous crez de la manire suivante :
Appliquez le comportement partir du panneau Comportements de serveur. S'il possde une bote de dialogue, saisissez des
donnes valides dans chaque champ et cliquez sur OK. Vrifiez qu'aucune erreur ne se produit lorsque le comportement est
appliqu. Vrifiez que le code d'excution du comportement de serveur apparat dans l'inspecteur de code.
Appliquez une nouvelle fois le comportement de serveur et saisissez des donnes incorrectes dans chaque champ de la bote
de dialogue. Essayez de laisser le champ vierge, de saisir des chiffres levs ou ngatifs ou des caractres non autoriss (tels
que /, ?, :, *, etc.) ou d'entrer des lettres dans les champs numriques. Vous avez la possibilit de rdiger des routines de
validation de formulaire pour grer les donnes non valides (les routines de validation exigent un codage manuel, technique
qui dpasse le cadre de cet ouvrage).
Une fois votre comportement de serveur appliqu la page, vrifiez ce qui suit :
Dans le panneau Comportements de serveur, vrifiez que le nom du comportement s'affiche dans la liste des comportements
ajouts la page.
Le cas chant, vrifiez que les icnes de script ct serveur apparaissent sur la page. Les icnes de script ct serveur
gnriques se prsentent sous la forme de blasons dors. Pour voir ces icnes, activez Elments invisibles (Affichage >
Assistances visuelles > Elments invisibles).
En mode Code (Affichage > Code), vrifiez qu'aucun code incorrect n'a t gnr.
En outre, si votre comportement de serveur insre dans le document un code tablissant une connexion une base de
donnes, crez une base de donnes d'valuation pour tester le code insr dans le document. Vrifiez la connexion en
dfinissant des requtes produisant des jeux de donnes de diffrents types et de diffrentes tailles.
Enfin, chargez la page sur le serveur et ouvrez-la dans un navigateur. Affichez le code source de la page et vrifiez qu'aucun
code HTML non valide n'a t gnr par les scripts ct serveur.
730
A propos de la cration de formulaires

Remarque : l'interface utilisateur de Dreamweaver CC et les versions ultrieures a t simplifie. Par consquent, il se peut que vous ne trouviez
pas certaines options dcrites dans cet article dans Dreamweaver CC et les versions ultrieures. Pour plus dinformations, voir cet article.
Lorsqu'un visiteur saisit des informations dans un formulaire Web affich dans un navigateur Web et clique sur le bouton d'envoi, les informations
sont envoyes un serveur, o une application ou un script ct serveur les traite. Le serveur rpond en renvoyant les informations traites
l'utilisateur (ou au client) ou en excutant une autre action dtermine par le contenu du formulaire.
Vous pouvez utiliser Dreamweaver pour crer des formulaires qui envoient des donnes la plupart des serveurs dapplication, dont PHP, ASP et
ColdFusion. Si vous utilisez ColdFusion, vous pouvez galement ajouter des contrles de formulaire spcifiques ColdFusion dans vos
formulaires. Vos formulaires peuvent contenir des zones de texte ou de mot de passe, des boutons radio, des cases cocher, des menus
contextuels, des boutons de commande et d'autres objets. Dreamweaver permet galement de rdiger le code qui valide les informations fournies
par un visiteur. Par exemple, vous pouvez vrifier quune adresse lectronique saisie par un utilisateur contient bien un symbole @ (a commercial)
ou quun champ de texte obligatoire a bien t renseign.
Remarque : la prise en charge de ColdFusion et dASP a t supprime de Dreamweaver CC et des versions ultrieures.
731
Utilisation de formulaires pour recueillir des informations des

utilisateurs
A propos de la collecte d'informations auprs des utilisateurs
Paramtres de formulaire HTML
Paramtres d'URL
Cration de paramtres d'URL l'aide de liens HTML
A propos de la collecte d'informations auprs des utilisateurs
Haut de la page
Vous pouvez utiliser des formulaires Web ou des liens hypertexte pour recueillir des informations provenant des utilisateurs, les stocker dans la
mmoire du serveur et les utiliser pour gnrer des rponses dynamiques bases sur les donnes entres par les utilisateurs. Les outils les plus
frquemment utiliss pour recueillir des informations utilisateur sont les formulaires HTML et les liens hypertexte.
Les formulaires HTML permettent de recueillir des informations provenant des utilisateurs et de les stocker dans la mmoire du serveur. Ils
peuvent transmettre les informations sous forme de paramtres de formulaire ou de paramtres d'URL.
Les liens hypertextes permettent de recueillir des informations provenant des utilisateurs et de les stocker dans la mmoire du serveur. Pour ce
faire, vous devez spcifier une ou plusieurs valeurs renvoyer lorsqu'un utilisateur clique sur un lien (tel qu'une prfrence) en annexant cette
valeur l'URL spcifie dans la balise d'ancrage. Lorsqu'un utilisateur clique sur le lien concern, le navigateur envoie alors l'URL et la valeur
annexe au serveur.
Haut de la page
Paramtres de formulaire HTML

Les paramtres de formulaire sont envoys au serveur l'aide d'un formulaire HTML utilisant la mthode POST ou GET.
En cas d'emploi de la mthode POST, les paramtres sont envoys au serveur Web dans l'en-tte du document et ne sont pas visibles ni
accessibles quiconque visualise la page par une mthode standard. La mthode POST doit tre utilise pour les valeurs qui influent sur le
contenu d'une base de donnes (par exemple insertion, mise jour ou suppression d'enregistrements) ou pour les valeurs envoyes par courrier
lectronique.
La mthode GET annexe les paramtres l'URL demande. Ces paramtres sont pour leur part visibles pour quiconque affiche la page. La
mthode GET doit tre utilise pour les formulaires de recherche.
Vous pouvez utiliser Dreamweaver pour concevoir rapidement des formulaires HTML qui envoient les paramtres de formulaire au serveur. Vous
devez connatre la mthode que vous utilisez pour transmettre les informations du navigateur au serveur.
Les paramtres de formulaire prennent le nom des objets de formulaire correspondants. Ainsi, si un formulaire contient un champ de texte portant
le nom txtLastName, le paramtre de formulaire suivant est alors transmis au serveur lorsqu'un utilisateur clique sur le bouton Envoyer :
1
txtLastName=<var class="varname">enteredvalue</var>
Si une application Web s'attend recevoir une valeur de paramtre prcise (lorsqu'elle excute une action en fonction d'une option parmi
plusieurs options possibles, par exemple), utilisez un objet de formulaire de type bouton radio, case cocher ou liste/menu afin de contrler les
valeurs susceptibles d'tre envoyes par l'utilisateur. Cela vite que les utilisateurs ne commettent des erreurs lors de la saisie d'informations et
empche de ce fait toute erreur au niveau de l'application. L'exemple ci-dessous dcrit un formulaire contenant un menu droulant trois choix :
732
Chaque choix du menu correspond une valeur fige dans le code qui est envoye au serveur en tant que paramtre de formulaire. La bote de
dialogue Valeurs de la liste prsente dans l'exemple suivant associe chaque lment de la liste une valeur (Ajouter, Mettre jour ou
Supprimer) :
Une fois un paramtre de formulaire cr, Dreamweaver peut en rcuprer la valeur et l'utiliser dans une application Web. Aprs avoir dfini un
paramtre de formulaire dans Dreamweaver, vous pouvez en insrer la valeur dans une page.
Haut de la page
Paramtres d'URL
Utilisez les paramtres d'URL pour transmettre du navigateur au serveur les informations fournies par les utilisateurs. Lorsqu'il reoit une demande
et que des paramtres sont annexs l'URL de la demande, le serveur met les paramtres la disposition de la page demande avant de fournir
la page au navigateur.
Un paramtre d'URL est une paire nom-valeur (name-value) annexe une URL. Le paramtre commence par un point d'interrogation (?). et se
prsente sous la forme nom=valeur. S'il existe plusieurs paramtres d'URL, ils sont spars par une esperluette (&). L'exemple ci-dessous dcrit
un paramtre d'URL dot de deux paires nom-valeur :
1
http://server/path/document?<var class="varname">name1</var>=<var class="varname">value1</var>&<var

class="varname">name2</var>=<var class="varname">value2</var>
Dans cet exemple de processus, l'application est une boutique en ligne. Comme les dveloppeurs souhaitent atteindre un public aussi large que
possible, le site a t conu pour prendre en charge plusieurs devises. Lorsque des utilisateurs se connectent au site, ils peuvent donc
slectionner la devise dans laquelle afficher les tarifs des articles disponibles.
1. Le navigateur demande la page report.cfm au serveur. Cette requte inclut le paramtre d'URL Currency="euro". La variable
Currency="euro" indique que tous les montants rcuprs doivent tre affichs en euros.
2. Le serveur stocke temporairement en mmoire le paramtre d'URL.
3. La page report.cfm utilise le paramtre pour obtenir le tarif des articles en euros. Ces montants peuvent soit tre stocks dans
une table de base de donnes contenant des devises diffrentes, soit tre convertis depuis la devise spcifique chaque
article (dans n'importe quelle devise prise en charge par l'application).
4. Le serveur renvoie la page report.cfm au navigateur en affichant le montant des articles dans la devise demande. Lorsque
cet utilisateur ferme la session, le serveur efface la valeur du paramtre d'URL et libre ainsi la mmoire du serveur qui peut
stocker de nouvelles demandes d'utilisateur.
733
Les paramtres d'URL sont galement crs lorsque la mthode GET du protocole HTTP est utilise en conjonction avec un
formulaire HTML. La mthode GET indique que la valeur du paramtre doit tre annexe la demande d'URL lors de l'envoi
du formulaire.
La personnalisation d'un site Web en fonction des prfrences d'un utilisateur constitue un exemple typique d'utilisation des
paramtres d'URL. Un paramtre d'URL compos d'un nom d'utilisateur et d'un mot de passe, par exemple, peut tre utilis
pour authentifier un utilisateur et n'afficher que les informations auxquelles il a souscrit. Les sites Web financiers affichant le
cours d'actions particulires en fonction des symboles boursiers slectionns prcdemment par un utilisateur ont recours
ce type de paramtres, par exemple. Les dveloppeurs d'applications Web utilisent souvent les paramtres d'URL pour
transmettre des valeurs aux variables au sein des applications. Vous pouvez, par exemple, transmettre des termes
rechercher des variable SQL au sein d'une application Web afin de gnrer des rsultats de recherche.
Cration de paramtres d'URL l'aide de liens HTML
Haut de la page
La cration de paramtres d'URL au sein d'un lien HTML consiste utiliser l'attribut href de la balise d'ancrage HTML. Vous pouvez entrer
directement les paramtres d'URL dans l'attribut en passant en mode Code (Affichage > Code) ou en ajoutant les paramtres d'URL la fin du
lien d'URL de la zone Lien de l'inspecteur Proprits.
Dans l'exemple ci-dessous, trois liens crent un mme paramtre d'URL (action) pouvant avoir trois valeurs : Add (ajouter), Update (mettre jour)
et Delete (supprimer). Lorsque l'utilisateur clique sur un lien, une valeur de paramtre diffrente est envoye au serveur et l'action demande est
excute.
1
2
3
<a href="http://www.mysite.com/index.cfm?action=Add">Add a record</a>

<a href="http://www.mysite.com/index.cfm?action=Update">Update a record</a>
<a href="http://www.mysite.com/index.cfm?action=Delete">Delete a record</a>
L'inspecteur Proprits (Fentre > Proprits) permet de crer les mmes paramtres d'URL en slectionnant le lien, puis en ajoutant les
paramtres d'URL la fin du lien d'URL de la zone Lien.
Une fois un paramtre d'URL cr, Dreamweaver peut en rcuprer la valeur et l'utiliser dans une application Web. Aprs avoir dfini un
paramtre d'URL dans Dreamweaver, vous pouvez en insrer la valeur dans une page.
Voir aussi
734

A propos des formulaires ColdFusion
Activation des amliorations ColdFusion
Insertion de contrles de formulaire ColdFusion
Insertion de champs de texte ColdFusion
Insertion de champs masqus ColdFusion
Insertion de zones de texte ColdFusion
Insertion de boutons ColdFusion
Insertion de cases cocher ColdFusion
Insertion de boutons radio ColdFusion
Insertion de zones de liste ColdFusion
Insertion de champs dimage ColdFusion
Insertion de champs de fichier ColdFusion
Insertion de champs de date ColdFusion
Modification de contrles de formulaire ColdFusion
Validation des donnes de formulaire ColdFusion
Haut de la page
A propos des formulaires ColdFusion

Les formulaires ColdFusion fournissent plusieurs mcanismes intgrs permettant de valider les donnes de formulaire. Par exemple, vous pouvez
vrifier si un utilisateur a entr une date valide. Certains contrles de formulaire comportent des fonctionnalits supplmentaires. Certaines dentre
elles nont pas de correspondant HTML et dautres prennent directement en charge le remplissage dynamique du contrle partir de sources de
donnes.
Dreamweaver comporte de nombreuses amliorations facilitant la tche des dveloppeurs ColdFusion qui utilisent ColdFusion MX 7 ou une
version ultrieure comme serveur de dveloppement. Ces amliorations se prsentent sous la forme dun plus grand nombre de boutons dans le
panneau Insertion, dlments de menu et dinspecteurs Proprits qui permettent de crer rapidement des formulaires ColdFusion et den dfinir
les proprits. Vous pouvez galement gnrer du code qui valide les informations fournies par les visiteurs du site. Par exemple, vous pouvez
vrifier quune adresse lectronique saisie par un utilisateur contient bien un symbole @ (a commercial) ou quun champ de texte obligatoire a
bien t renseign.
Haut de la page
Activation des amliorations ColdFusion

Certaines de ces amliorations ncessitent de dfinir un ordinateur excutant ColdFusion MX 7 ou une version ultrieure comme serveur
dvaluation de Dreamweaver. Par exemple, les inspecteurs de proprits destins aux contrles de formulaires ne sont disponibles que si vous
spcifiez le serveur dvaluation correct.
Il nest ncessaire de dfinir le serveur dvaluation que la premire fois. Dreamweaver dtecte ensuite automatiquement la version du serveur
dvaluation et rend les amliorations disponibles si ColdFusion est dtect.
1. Si ce nest dj fait, dfinissez un site Dreamweaver pour votre projet ColdFusion.
2. Choisissez Site > Grer les sites, slectionnez votre site dans la liste, puis cliquez sur Edition.
3. Slectionnez la catgorie Serveurs et choisissez un ordinateur excutant ColdFusion MX 7 ou une version ultrieure comme
serveur dvaluation de votre site Dreamweaver. Veillez entrer une URL Web valide.
4. Ouvrez un document ColdFusion.
735
Les changements de lespace de travail de Dreamweaver ne sont visibles quaprs ouverture dun document ColdFusion.
Haut de la page

Vous pouvez utiliser dans Dreamweaver un plus grand nombre de boutons dans le panneau Insertion, dlments de menu et dinspecteurs
Proprits pour crer rapidement des formulaires ColdFusion et dfinir leurs proprits.
Remarque : ces amliorations ne sont disponibles que si vous pouvez accder un ordinateur excutant ColdFusion MX 7 ou une version
ultrieure.
1. Ouvrez une page ColdFusion et placez le point dinsertion lendroit o vous souhaitez insrer le formulaire.
2. Choisissez Insertion > Objets ColdFusion > Formulaire CF > Formulaire CF, ou slectionnez la catgorie Formulaires CF du
panneau Insertion et cliquez sur licne Formulaire CF.
Dreamweaver insre un formulaire ColdFusion vierge. Dans une page affiche en mode Cration, les formulaires sont
indiqus par une bordure rouge en pointill. Si vous ne voyez pas la bordure, vrifiez que loption Affichage > Assistances
visuelles > Elments invisibles est active.
3. En veillant ce que le formulaire soit toujours slectionn, utilisez linspecteur Proprits pour dfinir les proprits de
formulaire suivantes.
Formulaire CF Dfinit le nom du formulaire.
Action Permet dindiquer le nom de la page ColdFusion traiter lorsque le formulaire est envoy.
Mthode Permet dindiquer la mthode utiliser pour envoyer les donnes du formulaire au serveur :
POST
Envoie les donnes laide de la mthode HTTP post, qui envoie les donnes au serveur dans un message spar.
GET
Envoie les donnes laide de la mthode HTTP get, qui place le contenu des champs du formulaire dans le corps de la
chane de la requte dURL.
Cible Permet de modifier la valeur de lattribut target de la balise cfform.
Type de codage Prcise la mthode de codage utilise pour transmettre les donnes du formulaire.
Remarque : le type de codage na rien voir avec le codage des caractres. Cet attribut indique le type de contenu utilis
pour envoyer le formulaire au serveur (lorsque la mthode post est utilise). Sil nest pas spcifi, il prend par dfaut la valeur
application/x-www-form-urlencoded .
Format Dtermine le type de formulaire crer :

HTML
Gnre un formulaire HTML et le transmet au client. Les contrles enfants cfgrid et cftree peuvent tre au format Flash ou
applet.
Flash
Gnre un formulaire Flash et le transmet au client. Tous les contrles sont au format Flash.
XML
Gnre un formulaire XML XForms et place les rsultats dans une variable avec le nom du formulaire ColdFusion. Rien nest
envoy au client. Les contrles enfants cfgrid et cftree peuvent tre au format Flash ou applet.
Style Permet dindiquer un style pour le formulaire. Pour plus dinformations, consultez la documentation ColdFusion.
736
Enveloppe Flash/XML Permet dindiquer la couleur de halo pour donner un style au rsultat. Le thme dtermine la couleur
utilise pour les lments activs et slectionns.
Prserver les donnes Dtermine si les valeurs initiales des contrles doivent tre remplaces ou non par les nouvelles
valeurs lorsque le formulaire sautotransmet les donnes.
Si cette option a la valeur Faux, les valeurs spcifies dans les attributs de la balise du contrle sont utilises.
Si elle a la valeur Vrai, ce sont les valeurs saisies qui sont utilises.
Source scripts Indique ladresse URL (relative la racine du site) du fichier JavaScript qui contient le code ct client utilis
par la balise et ses balises enfants. Cet attribut est utile si le fichier ne se trouve pas dans lemplacement par dfaut. Cet
attribut peut tre ncessaire dans certains environnements et configurations qui bloquent laccs au dossier /CFIDE.
Lemplacement par dfaut, qui peut tre modifi par ladministrateur ColdFusion, est /CFIDE/scripts/cfform.js.
Archive Indique ladresse URL des classes Java tlchargeables pour les contrles dapplet cfgrid, cfslider et cftree. Leur
emplacement par dfaut est /CFIDE/classes/cfapplets.jar.
Hauteur Indique la hauteur du formulaire.
Largeur Indique la largeur du formulaire.
Afficher lditeur de balises pour cfform Permet de modifier les proprits qui napparaissent pas dans linspecteur
Proprits.
4. Insrez des contrles de formulaire ColdFusion.
Placez le point dinsertion lendroit o vous souhaitez insrer le contrle de formulaire ColdFusion dans le formulaire, puis
slectionnez le contrle voulu dans le menu Insertion (Insertion > Objets ColdFusion > Formulaire) ou dans la catgorie
Formulaires du panneau Insertion.
5. Si ncessaire, dfinissez les proprits du contrle dans linspecteur Proprits.
Avant de dfinir les proprits dans linspecteur Proprits, vrifiez que le contrle est slectionn en mode Cration. Pour
plus dinformations sur les proprits, cliquez sur licne Aide de linspecteur Proprits.
6. Amliorez la mise en forme du formulaire ColdFusion.
Si vous crez un formulaire HTML, vous pouvez utiliser des sauts de ligne, des sauts de paragraphes, du texte prformat ou
des tableaux pour mettre en forme vos formulaires. Vous ne pouvez pas insrer un formulaire ColdFusion dans un autre
formulaire ColdFusion (cest--dire faire se chevaucher des balises), mais vous pouvez inclure plusieurs formulaires
ColdFusion dans une mme page.
Si vous crez un formulaire Flash, utilisez les styles CSS (feuilles de style en cascade) pour le mettre en page. ColdFusion
ignore les balises HTML du formulaire.
Noubliez pas de donner un libell avec un texte descriptif aux champs du formulaire ColdFusion, pour aider les utilisateurs.
Par exemple, crez un libell Indiquez votre nom pour le champ destin au nom de lutilisateur.
Haut de la page
Insertion de contrles de formulaire ColdFusion

Le panneau Insertion et le menu Insrer permettent dinsrer rapidement des contrles dans un formulaire ColdFusion. Vous devez crer un
formulaire ColdFusion vierge avant dy insrer des contrles.
Remarque : ces amliorations ne sont disponibles que si vous pouvez accder un ordinateur excutant ColdFusion MX 7 ou une version
ultrieure.
1. En mode Cration, placez le point dinsertion lintrieur de la bordure du formulaire.
2. Slectionnez le contrle dans le menu Insertion (Insertion > Objets ColdFusion > Formulaire) ou dans la catgorie Formulaires
737
3. Cliquez sur le contrle sur la page pour le slectionner, puis dfinissez ses proprits dans linspecteur Proprits.
Pour plus dinformations sur les proprits de contrles spcifiques, consultez les rubriques consacres chacun deux.
Haut de la page
Insertion de champs de texte ColdFusion

Vous pouvez insrer visuellement dans votre formulaire un champ de texte ou de mot de passe ColdFusion, puis dfinir ses options.
Remarque : cette amlioration nest disponible que si vous pouvez accder un ordinateur excutant ColdFusion MX 7 ou une version
ultrieure.
Insertion visuelle dun champ de texte ColdFusion

2. Dans la catgorie Formulaire du panneau Insertion, cliquez sur licne Champ de texte CF, ou slectionnez Insertion > Objets
ColdFusion > Formulaire > Champ de texte CF.
Un champ de texte apparat dans le formulaire.
3. Slectionnez le champ de texte et dfinissez ses options dans linspecteur Proprits.
4. Pour attribuer une tiquette au champ de texte dans la page, cliquez en regard du champ de texte et tapez le texte souhait.
Insertion visuelle dun champ de mot de passe

1. Rptez les tapes 1 et 2 de la procdure prcdente (insertion dun champ de texte).
2. Slectionnez le champ de texte que vous venez dinsrer pour lafficher dans linspecteur Proprits.
3. Dans linspecteur Proprits, slectionnez la valeur Mot de passe dans le menu droulant Mode texte.
Options des champs de texte (ColdFusion)

Pour dfinir les options dun champ de texte ou de mot de passe ColdFusion, dfinissez les options suivantes dans linspecteur Proprits :
CFtextfield (Ch. Texte CF) Dfinit lattribut id de la balise <cfinput>.
Valeur Permet dindiquer le texte afficher dans ce champ lorsque la page souvre dans un navigateur. Cette chane peut tre statique ou
dynamique.
Pour indiquer une valeur dynamique, cliquez sur licne reprsentant un clair ct de la zone Valeur, et slectionnez la colonne dun jeu
denregistrements dans la bote de dialogue Donnes dynamiques. Les jeux denregistrements de cette colonne fournissent les valeurs affiches
dans le champ de texte lorsque le formulaire est affich dans un navigateur.
Mode texte Permet de passer dun champ de saisie de texte standard un champ de saisie de mot de passe, et inversement. Lattribut modifi
par ce contrle est type.
Lecture seule Permet de mettre le texte affich en lecture seule.
Long. max. Indique le nombre maximum de caractres que peut contenir le champ.
Masque Permet dindiquer un masque de texte. Cette proprit permet de valider la saisie des utilisateurs. Le format du masque est compos de
caractres A, 9, X et ? .
738
Remarque : lattribut de masque est ignor pour la balise cfinput type="password".
Valider Spcifie le type de validation du champ actuel.
Valider Spcifie le moment de validation : onSubmit, onBlur ou onServer.
Etiquette Permet dindiquer un libell pour le champ de texte.
Schma Permet dindiquer un modle dexpression rgulire en JavaScript pour valider la saisie. Les barres obliques de dbut ou de fin sont
ignores. Pour plus dinformations, consultez la documentation ColdFusion.
Hauteur Permet dindiquer la hauteur du contrle, en pixels.
Largeur Permet dindiquer la largeur du contrle, en pixels.
Taille Permet dindiquer la taille du contrle.
Obligatoire Permet de prciser si le champ de texte doit contenir des donnes pour que le formulaire soit transmis au serveur.
Afficher lditeur de balises Permet de modifier les proprits qui napparaissent pas dans linspecteur Proprits.
Haut de la page
Insertion de champs masqus ColdFusion

Vous pouvez insrer visuellement dans votre formulaire un champ masqu ColdFusion, puis dfinir ses proprits. Les champs masqus
permettent de conserver et transmettre des informations qui ne sont pas saisies par lutilisateur. Ces informations sont masques afin que
lutilisateur ne puisse pas les voir.
ultrieure.
2. Dans la catgorie Formulaire du panneau Insertion, cliquez sur licne Champ cach CF.
Un marqueur apparat dans le formulaire ColdFusion. Si vous ne voyez pas le marqueur, choisissez Affichage > Assistances
visuelles > Elments invisibles.
3. Slectionnez le champ masqu sur la page et dfinissez les options suivantes dans linspecteur Proprits :
Cfhiddenfield (Champ masqu) Indique le nom unique du champ masqu.
Valeur Permet dindiquer la valeur du champ masqu. Cette chane peut tre statique ou dynamique.
Pour indiquer une valeur dynamique, cliquez sur licne reprsentant un clair ct de la zone Valeur, et slectionnez la
colonne dun jeu denregistrements dans la bote de dialogue Donnes dynamiques. Les jeux denregistrements de cette
colonne fournissent les valeurs affiches dans le champ de texte lorsque le formulaire est affich dans un navigateur.
Etiquette Permet dindiquer un libell pour le contrle. A lexcution, ce paramtre est ignor par le serveur ColdFusion.
739
Schma Permet dindiquer un modle dexpression rgulire en JavaScript pour valider la saisie. Les barres obliques de
dbut ou de fin sont ignores. Pour plus dinformations, consultez la documentation ColdFusion.
Hauteur Permet dindiquer la hauteur du contrle, en pixels. A lexcution, ce paramtre est ignor par le serveur ColdFusion.
Largeur Permet dindiquer la largeur du contrle, en pixels. A lexcution, ce paramtre est ignor par le serveur ColdFusion.
Taille Permet dindiquer la taille du contrle. A lexcution, ce paramtre est ignor par le serveur ColdFusion.
Obligatoire Permet de prciser si le champ masqu doit contenir des donnes pour que le formulaire soit transmis au
serveur.
Haut de la page
Insertion de zones de texte ColdFusion

Vous pouvez insrer visuellement dans votre formulaire une zone de texte ColdFusion, puis dfinir ses proprits. Une zone de texte est un
lment de saisie compos de plusieurs lignes de texte.
ultrieure.
1. Placez le point dinsertion dans la bordure du formulaire.
2. Dans la catgorie Formulaire du panneau Insertion, cliquez sur licne Zone de texte CF.
Une zone de texte apparat dans le formulaire ColdFusion.
3. Slectionnez la zone de texte sur la page et dfinissez les options suivantes dans linspecteur Proprits :
Cftextarea (Zone de texte) Permet dindiquer un nom unique pour le contrle.
Largeur car. Indique le nombre de caractres par ligne.
Nbre lignes Permet dindiquer le nombre de lignes afficher dans la zone de texte.
Wrap (Renvoi la ligne) Permet dindiquer comment le texte saisi par les utilisateurs doit tre renvoy la ligne.
Obligatoire Permet dindiquer si la saisie de texte dans ce contrle est obligatoire (case coche) ou non (case non coche).
Valeur initiale Permet dindiquer le texte afficher dans la zone de texte lorsque la page souvre dans un navigateur.
Etiquette Permet dindiquer un libell pour le contrle.
Style Permet dindiquer un style pour le contrle. Pour plus dinformations, consultez la documentation ColdFusion.
740
4. Pour attribuer une tiquette la zone de texte, cliquez en regard de la zone et tapez le texte souhait.
Haut de la page
Insertion de boutons ColdFusion

Vous pouvez insrer visuellement dans votre formulaire un bouton ColdFusion, puis dfinir ses proprits. Les boutons contrlent les diffrentes
oprations du formulaire ColdFusion. Les boutons permettent denvoyer les donnes du formulaire au serveur ou de rinitialiser le formulaire. Il
sagit en gnral des boutons Envoyer et Rinitialiser. Vous pouvez galement attribuer un bouton dautres tches de traitement pralablement
dfinies dans un script. Un bouton peut ainsi calculer le montant total des lments slectionns en fonction des valeurs que vous leur avez
attribues.
ultrieure.
1. Placez le point dinsertion dans la bordure du formulaire ColdFusion.
2. Dans la catgorie Formulaire du panneau Insertion, cliquez sur licne Bouton CF.
Un bouton apparat dans le formulaire ColdFusion.
3. Slectionnez le bouton sur la page et dfinissez les options suivantes dans linspecteur Proprits :
Cfbutton (Zone de texte) Permet dindiquer un nom unique pour le contrle.
Action Permet dindiquer le type de bouton crer.
A lexcution, les autres proprits sont ignores par le serveur ColdFusion.
Haut de la page
Insertion de cases cocher ColdFusion

Vous pouvez insrer visuellement dans votre formulaire une case cocher ColdFusion, puis dfinir ses proprits. Utilisez des cases cocher
pour permettre aux utilisateurs dactiver plusieurs options dans un groupe.
ultrieure.
2. Dans la catgorie Formulaire du panneau Insertion, cliquez sur licne Case cocher CF.
Une case cocher apparat dans le formulaire ColdFusion.
3. Slectionnez la case cocher sur la page et dfinissez les options suivantes dans linspecteur Proprits :
Cfcheckbox (Zone de texte) Permet dindiquer un nom unique pour le contrle.
Valeur Permet dindiquer la valeur renvoye par la case cocher si lutilisateur lactive.
741
Etat initial Permet dindiquer si la case cocher est dj active lorsque la page souvre dans un navigateur.
Valider Spcifie le type de validation de la case cocher.
Valider Spcifie le moment de validation de la case cocher : onSubmit, onBlur ou onServer.
Etiquette Permet dindiquer un libell pour la case cocher.
Obligatoire Permet de prciser si la case cocher doit tre coche pour que le formulaire soit transmis au serveur.
4. Pour attribuer une tiquette la case cocher, cliquez en regard de la case sur la page et tapez ltiquette souhaite.
Haut de la page
Insertion de boutons radio ColdFusion

Vous pouvez insrer visuellement dans votre formulaire un bouton radio ColdFusion, puis dfinir ses proprits. Utilisez des boutons radio lorsque
vous souhaitez que les utilisateurs ne slectionnent quune seule option dans un groupe. Elles sont gnralement utilises en groupe. Tous les
boutons radio dun mme groupe doivent porter le mme nom.
ultrieure.
2. Choisissez Insertion > Objets ColdFusion > Formulaire > Bouton radio.
Un bouton radio apparat dans le formulaire ColdFusion.
3. Slectionnez le bouton radio sur la page et dfinissez les options suivantes dans linspecteur Proprits :
Cfradiobutton (Zone de texte) Permet dindiquer un nom unique pour le contrle.
Valeur Permet dindiquer la valeur renvoye par le bouton radio si lutilisateur lactive.
Etat initial Permet dindiquer si le bouton radio est dj activ lorsque la page souvre dans un navigateur.
Valider Spcifie le type de validation du bouton radio.
742
Etiquette Permet dindiquer un libell pour le bouton radio.
Obligatoire Permet de prciser si le bouton radio doit tre activ pour que le formulaire soit transmis au serveur.
4. Pour attribuer une tiquette au bouton radio, cliquez en regard du bouton et tapez le texte souhait.
Haut de la page
Insertion de zones de liste ColdFusion

Vous pouvez insrer visuellement dans votre formulaire une zone de liste ColdFusion, puis dfinir ses proprits. Une zone de liste permet un
visiteur de slectionner un ou plusieurs lments dans une liste. Les zones de liste sont utiles lorsque vous disposez dun espace rduit et devez
afficher de nombreux lments. Elles savrent galement pratiques lorsque vous souhaitez contrler les valeurs renvoyes au serveur. A la
diffrence des champs de texte, dans lesquels les utilisateurs peuvent taper ce quils veulent, y compris des donnes non valides, cest vous de
dfinir les valeurs exactes renvoyes par un menu.
Il est possible dinsrer deux types de zones de liste dans un formulaire : un menu qui se droule lorsque lutilisateur clique dessus, ou un
menu qui affiche une liste dlments que vous pouvez faire dfiler et slectionner.
ultrieure.
2. Dans la catgorie Formulaire du panneau Insertion, cliquez sur licne Slection CF.
Une zone de liste apparat dans le formulaire ColdFusion.
3. Slectionnez la zone de liste sur la page et dfinissez les options suivantes dans linspecteur Proprits :
Cfselect (Zone de texte) Permet dindiquer un nom unique pour le contrle.
Type Permet de choisir entre un menu droulant ou une liste. Si vous choisissez le type Liste, les options Hauteur liste et
Autoriser la slection de plusieurs listes deviennent disponibles.
Hauteur liste Permet dindiquer le nombre de lignes afficher dans la liste. Cette proprit nest disponible quavec le type
Liste.
Autoriser la slection de plusieurs listes Permet dindiquer si lutilisateur peut slectionner plusieurs options la fois dans
la liste. Cette proprit nest disponible quavec le type Liste.
Modifier les valeurs Ouvre une bote de dialogue qui permet dajouter, modifier ou supprimer des options la zone de liste.
743
Initialement slectionn Dfinit les lments slectionns par dfaut dans la liste. Si vous avez activ loption Autoriser la
slection de plusieurs listes, vous pouvez slectionner plusieurs options.
Jeu denregistrements Permet dindiquer le nom de la requte ColdFusion utiliser pour remplir la liste ou le menu.
Afficher colonne Permet dindiquer la colonne du jeu denregistrements qui doit fournir le libell de chaque lment de la
liste. Cette proprit est utilise de concert avec la proprit Jeu denregistrements.
Colonne valeurs Permet dindiquer la colonne du jeu denregistrements qui doit fournir la valeur de chaque lment de la
liste. Cette proprit est utilise de concert avec la proprit Jeu denregistrements.
Etiquette Flash Permet dindiquer un libell pour la zone de liste.
Hauteur Flash Permet dindiquer la hauteur du contrle, en pixels. A lexcution, ce paramtre est ignor par le serveur
ColdFusion.
Largeur Flash Permet dindiquer la largeur du contrle, en pixels. A lexcution, ce paramtre est ignor par le serveur
ColdFusion.
Message Permet dindiquer le message afficher si la proprit Obligatoire est active et si lutilisateur na pas effectu de
slection avant de tenter denvoyer le formulaire.
Obligatoire Permet de prciser si un lment de menu doit tre slectionn pour que le formulaire soit transmis au serveur.
Haut de la page
Insertion de champs dimage ColdFusion

Vous pouvez insrer visuellement dans votre formulaire un champ dimage ColdFusion, puis dfinir ses options. Les champs dimage permettent
de crer des boutons personnaliss.
ultrieure.
2. Dans la catgorie Formulaire du panneau Insertion, cliquez sur licne Champ dimage CF. Recherchez limage insrer, puis
cliquez sur OK. Vous pouvez aussi entrer directement le chemin daccs du fichier image dans la zone Src.
Remarque : si le fichier dimage se trouve lextrieur du dossier racine du site, il est prfrable de copier cette image dans
le dossier racine. En effet, les images situes lextrieur du dossier racine risquent dtre inaccessible aprs publication du
site.
3. Slectionnez le champ dimage sur la page et dfinissez les options suivantes dans linspecteur Proprits :
Cfimagefield (Zone de texte) Permet dindiquer un nom unique pour le contrle.
Src Permet dindiquer ladresse URL de limage insrer.
Sec Permet dindiquer un message qui apparatra lorsque limage ne peut pas tre affiche.
744
Alignement Permet dindiquer lalignement de limage.
Bordure Permet dindiquer la largeur de la bordure de limage.
Modifier image Ouvre limage dans votre logiciel de retouche dimages par dfaut.
Pour dfinir votre logiciel de retouche dimages par dfaut, choisissez Edition > Prfrences > Types de fichiers/Editeurs. Si
ce logiciel nest pas dfini, le bouton Modifier limage est sans effet.
Valider Spcifie le type de validation du champ dimage.
Etiquette Permet dindiquer un libell pour le bouton radio.
Obligatoire Permet de prciser si le contrle doit contenir des donnes pour que le formulaire soit transmis au serveur.
Haut de la page
Insertion de champs de fichier ColdFusion

Vous pouvez insrer visuellement dans votre formulaire un champ de fichier ColdFusion, puis dfinir ses proprits. Vous pouvez crer un champ
de fichier pour permettre aux utilisateurs de slectionner un fichier sur leur ordinateur (tel quun document de traitement de texte ou un fichier
graphique) et de le transfrer sur le serveur. Un champ de fichier ColdFusion est similaire un champ de texte, mais contient galement un
bouton Parcourir. Lutilisateur peut soit saisir manuellement le chemin daccs au fichier transfrer, soit cliquer sur le bouton Parcourir pour le
rechercher et le slectionner.
Les champs de fichier ncessitent lutilisation de la mthode POST pour transmettre des fichiers depuis un navigateur vers le serveur. Le fichier est
transfr ladresse indique dans la zone de texte Action du formulaire. Avant dutiliser le champ de fichier, vrifiez auprs de votre
administrateur de serveur que le transfert anonyme de fichiers est autoris.
Les champs de fichier ncessitent aussi que le codage du formulaire soit dfini comme multipart/form . Dreamweaver active automatiquement
ce paramtre lorsque vous insrez un contrle de champ de fichier.
ultrieure.
1. En mode Cration, slectionnez le formulaire ColdFusion pour lafficher dans linspecteur Proprits.
Pour slectionner rapidement le formulaire, cliquez nimporte o dans son cadre, puis cliquez sur la balise <cfform> dans le
slecteur de balises figurant dans le coin infrieur de la fentre de document.
2. Dans linspecteur Proprits, dfinissez la mthode du formulaire comme POST .
3. Dans le menu droulant Enctype, slectionnez multipart/form-data.
745
4. Placez le point dinsertion lintrieur de la bordure du formulaire, lendroit o le champ de fichier doit apparatre.
5. Choisissez Insertion > Objets ColdFusion > Formulaire > Champ fichier.
Un champ de fichier apparat dans le document.
6. Slectionnez le champ de fichier sur la page et dfinissez les proprits suivantes dans linspecteur Proprits :
Cffilefield (Zone de texte) Permet dindiquer un nom unique pour le contrle.
Long. max. Indique le nombre maximum de caractres que peut contenir le chemin daccs du fichier.
Etiquette Permet dindiquer un libell pour le champ.
Obligatoire Permet de prciser si le champ de fichier doit contenir des donnes pour que le formulaire soit transmis au
serveur.
Haut de la page
Insertion de champs de date ColdFusion

Vous ne pouvez pas insrer visuellement dans votre formulaire un champ de date ColdFusion, mais vous pouvez dfinir visuellement ses
proprits. Un champ de date ColdFusion est un type spcial de champ de texte qui permet de slectionner une date dans un mini-calendrier afin
de linsrer dans le champ de texte.
ultrieure.
1. En mode Cration, slectionnez le formulaire ColdFusion pour lafficher dans linspecteur Proprits.
Pour slectionner rapidement le formulaire, cliquez nimporte o dans son cadre, puis cliquez sur la balise <cfform> dans le
slecteur de balises figurant dans le coin infrieur de la fentre de document.
2. Dans linspecteur Proprits, dfinissez le format du formulaire comme Flash .
Le contrle de champ de date ne peut apparatre que dans des formulaires ColdFusion en mode Flash.
3. Passez en mode daffichage Code (Affichage > Code) et insrez la balise suivante en un point quelconque entre les balises
CFForm douverture et de fermeture :
1
<cfinput name="datefield" type="datefield">
746
4. Passez en mode Cration, slectionnez le champ de date sur la page, puis dfinissez les options suivantes dans linspecteur
Proprits :
Cfdatefield (Zone de texte) Permet dindiquer un nom unique pour le contrle.
Valeur Permet dindiquer la date afficher dans ce champ lorsque la page souvre dans un navigateur. Cette date peut tre
statique ou dynamique.
Pour indiquer une valeur dynamique, cliquez sur licne reprsentant un clair ct de la zone Valeur, et slectionnez la
colonne dun jeu denregistrements dans la bote de dialogue Donnes dynamiques. Les jeux denregistrements de cette
colonne fournissent les valeurs affiches dans le champ de date lorsque le formulaire est affich dans un navigateur.
Etiquette Permet dindiquer un libell pour le champ.
Obligatoire Permet de prciser si le champ de date doit contenir des donnes pour que le formulaire soit transmis au
serveur.
Haut de la page
Modification de contrles de formulaire ColdFusion

Vous pouvez modifier visuellement les proprits des contrles de formulaires ColdFusion, que vous travailliez en mode Cration ou Code.
ultrieure.
1. En mode Cration, slectionnez le contrle de formulaire ; en mode Code, cliquez dans la balise du contrle concern.
Linspecteur Proprits affiche les proprits du contrle de formulaire.
2. Modifiez ces proprits dans linspecteur Proprits.
Pour plus dinformations, cliquez sur licne Aide de linspecteur Proprits.
3. Pour dfinir dautres proprits, cliquez sur le bouton Afficher lditeur de balises dans linspecteur Proprits, et dfinissez les
proprits dans lditeur de balises qui saffiche.
Haut de la page
Validation des donnes de formulaire ColdFusion

747
Dreamweaver permet de crer des formulaires ColdFusion permettant de vrifier dans le contenu des champs de texte spcifis que lutilisateur a
bien saisi le type de donnes appropri.
ultrieure.
1. Crez un formulaire ColdFusion comprenant au moins un champ de saisie et un bouton Envoyer. Assurez-vous que chaque
champ ColdFusion que vous souhaitez valider porte un nom unique.
2. Dans le formulaire, slectionnez le champ valider.
3. Dans linspecteur Proprits, indiquez comment le champ doit tre valid.
La partie infrieure de chaque inspecteur Proprits contient des contrles qui permettent de dfinir une rgle de validation
spcifique. Par exemple, vous pouvez spcifier quun champ de texte donn doit contenir un numro de tlphone. Pour ce
faire, choisissez Tlphone dans le menu droulant Valeur de linspecteur Proprits. Vous pouvez aussi indiquer le moment
de la validation dans le menu local Valider .

Utilisation de sites Dreamweaver
Configuration dun serveur dvaluation
748
Cration de formulaires Web

A propos des formulaires Web
Objets de formulaire
Cration d'un formulaire HTML
A propos des objets de formulaire dynamiques
Insertion ou modification d'un menu de formulaire HTML dynamique:
Ajout de la fonctionnalit dynamique des menus de formulaire HTML existants
Affichage de contenu dynamique dans des champs de texte HTML
Dfinition des options de la bote de dialogue Champ de texte dynamique
Activation dynamique d'une case cocher HTML
Activation dynamique d'un bouton radio HTML
Validation de donnes de formulaire HTML
Liaison de comportements JavaScript des objets de formulaire HTML
Liaison de scripts personnaliss des boutons de formulaire HTML
Cration de formulaires HTML accessibles
Remarque : La prise en charge des lments de formulaire HTML a t amliore dans les mises jour de Dreamweaver Creative Cloud. Pour
plus d'informations, voir Prise en charge amliore de HTML 5 pour les lments de formulaire.
Haut de la page
A propos des formulaires Web
Lorsqu'un visiteur saisit des informations dans un formulaire Web affich dans un navigateur Web et clique sur le bouton d'envoi, les informations
sont envoyes un serveur, o une application ou un script ct serveur les traite. Le serveur rpond en renvoyant les informations traites
l'utilisateur (ou au client) ou en excutant une autre action dtermine par le contenu du formulaire.
Vous pouvez crer des formulaires qui envoient des donnes la plupart des serveurs d'application, dont PHP, ASP et ColdFusion. Si vous
utilisez ColdFusion, vous pouvez galement ajouter des contrles de formulaire spcifiques ColdFusion dans vos formulaires.
Remarque : Vous pouvez galement envoyer des donnes de formulaire directement une adresse lectronique.
Haut de la page
Objets de formulaire
Dans Dreamweaver, les types d'entres de formulaire sont appels des objets de formulaire. Les objets de formulaire sont les lments qui
permettent aux utilisateurs d'entrer des donnes. Vous avez la possibilit d'ajouter les objets de formulaire suivants un formulaire :
Champs de texte Acceptent tout type d'entre alphanumrique. Vous pouvez afficher le texte sur une seule ligne, sur plusieurs lignes et sous la
forme d'un champ de mot de passe dans lequel le texte saisi est remplac par des astrisques ou des puces afin d'tre masqu.
Remarque : Les mots de passe et tout autre type d'informations envoys un serveur l'aide d'un champ de mot de passe ne sont pas crypts.
Les donnes transfres peuvent donc tre interceptes et lues en tant que texte alphanumrique. Aussi devez-vous prvoir le cryptage
systmatique des donnes que vous souhaitez protger.
Champs masqus Stockent des informations saisies par un utilisateur, telles qu'un nom, une adresse lectronique ou une prfrence d'affichage,
749
puis rutilisent ces informations lors de la prochaine visite de l'utilisateur sur le site.
Boutons Excutent des actions lorsque l'utilisateur clique dessus. Vous pouvez ajouter une tiquette ou un nom personnalis un bouton ou
utiliser l'une des tiquettes prdfinies : Envoyer ou Rtablir. Utilisez un bouton pour l'envoi des donnes du formulaire au serveur ou pour la
rinitialisation du formulaire. Vous pouvez galement attribuer un bouton d'autres tches de traitement pralablement dfinies dans un script. Un
bouton peut ainsi calculer le montant total des lments slectionns en fonction des valeurs que vous leur avez attribues.
Cases cocher Permettent les rponses multiples au sein d'un mme groupe d'options. Un utilisateur peut slectionner toutes les options qu'il
juge ncessaires. L'exemple suivant montre trois lments case cocher slectionns : Surfing, Mountain biking et Rafting sont actives.
Boutons radio Reprsentent des choix exclusifs. Lorsqu'un utilisateur clique sur un bouton dans un groupe de boutons radio, cela dslectionne
tous les autres boutons du groupe (un groupe comprend plusieurs boutons dots du mme nom). Dans l'exemple ci-dessous, Rafting est l'option
slectionne. Si l'utilisateur clique sur Surfing, l'option Rafting est automatiquement dsactive.
Listes droulantes Affichent des valeurs d'option au sein d'une liste droulante qui permet aux utilisateurs de slectionner plusieurs options.
L'option Liste affiche les valeurs d'option dans un menu et permet aux utilisateurs de slectionner un seul lment. Utilisez des menus lorsque
vous disposez d'un espace rduit et que vous devez afficher de nombreux lments, ou lorsque vous souhaitez contrler les valeurs renvoyes au
serveur. A la diffrence des champs de texte, dans lesquels les utilisateurs peuvent taper ce qu'ils veulent, y compris des donnes non valides,
c'est vous de dfinir les valeurs exactes renvoyes par un menu.
Remarque : Un menu droulant de formulaire HTML est diffrent d'un menu droulant graphique. Pour plus d'informations sur la cration, la
modification, l'affichage et le masquage d'un menu droulant graphique, cliquez sur le lien la fin de cette section.
Menus de reroutage Sont des listes de navigation ou des menus droulants qui vous permettent d'insrer un menu dans lequel chaque option
est relie un document ou un fichier.
Champs de fichier Permettent aux utilisateurs de rechercher un fichier sur leur ordinateur et de le tlcharger en tant que donnes de formulaire.
Champs d'image Permettent d'insrer une image dans un formulaire. Utilisez les champs d'image pour crer des boutons graphiques (bouton
Envoyer ou Rinitialiser, par exemple). Vous devez associer un comportement l'objet de formulaire pour pouvoir utiliser une image afin
d'effectuer une tche autre que l'envoi de donnes.
Haut de la page
Cration d'un formulaire HTML
(Utilisateurs de Creative Cloud uniquement) : Dans le cadre de la prise en charge de HTML5, de nouveaux attributs ont t ajouts au panneau
Proprits pour les lments de formulaire. En outre, quatre nouveaux lments du formulaire (E-mail, recherche, tlphone, URL) ont t ajouts
la section Formulaires du panneau Insertion. Pour plus d'informations, voir Prise en charge amliore de HTML5 pour les lments de
formulaire.
1. Ouvrez une page et placez le point d'insertion l'endroit o vous souhaitez insrer le formulaire.
2. Choisissez Insertion > Formulaire ou, dans le panneau Insertion, cliquez sur la catgorie Formulaires, puis sur l'icne
Formulaire.
Dans une page affiche en mode Cration, les formulaires sont indiqus par une bordure rouge en pointill. Si vous ne voyez
pas cette bordure, choisissez Affichage > Assistances visuelles > Elments invisibles.
750
3. Dfinissez les proprits du formulaire HTML dans l'inspecteur Proprits (Fentre > Proprits) :
a. Dans la fentre de document, cliquez sur la bordure du formulaire afin de le slectionner.
b. Dans la zone Nom du formulaire, tapez un nom unique afin d'identifier le formulaire.
Vous rendez ainsi possible son rfrencement ou son contrle l'aide d'un langage de script, tel que JavaScript ou
VBScript. Si vous n'attribuez aucun nom au formulaire, Dreamweaver gnre un nom en utilisant la syntaxe formn et
augmente la valeur de n pour chaque nouveau formulaire ajout la page.
c. Dans la zone Action, indiquez la page ou le script qui va traiter les donnes du formulaire en entrant son chemin d'accs
ou en cliquant sur l'icne du dossier pour naviguer jusqu' la page ou jusqu'au script appropri. Exemple :
processorder.php.
d. Dans le menu droulant Mthode, spcifiez la mthode permettant de transmettre les donnes du formulaire au serveur.
Parmi les options suivantes, dfinissez celles de votre choix :
Par dfaut Permet de se baser sur le paramtrage par dfaut du navigateur pour envoyer les donnes du formulaire au
serveur. En gnral, la valeur par dfaut est la mthode GET.
GET Permet d'annexer la valeur l'URL demandant la page.
POST Permet d'incorporer les donnes du formulaire dans la requte HTTP.
N'utilisez pas la mthode GET pour envoyer des formulaires longs. Les URL sont limites 8192 caractres. Si la
quantit de donnes envoyes est trop importante, celles-ci seront tronques, ce qui peut produire des rsultats
inattendus ou un chec du traitement.
Il est possible d'ajouter des signets aux pages dynamiques gnres par des paramtres transmis par la mthode GET,
car toutes les valeurs ncessaires pour rgnrer la page sont contenues dans l'URL affiche dans la zone Adresse du
navigateur. En revanche, il n'est pas possible d'ajouter de signet aux pages dynamiques gnres par des paramtres
transmis par la mthode POST.
Si vous rassemblez des noms d'utilisateur et des mots de passe, des numros de cartes de crdit ou d'autres
informations confidentielles, la mthode POST peut sembler plus sre que la mthode GET. Toutefois, les informations
envoyes par la mthode POST ne sont pas codes. Par consquent, les pirates peuvent les rcuprer facilement. Pour
garantir leur scurit, utilisez une connexion scurise un serveur scuris.
e. (Facultatif) Utilisez le menu droulant Enctype pour dfinir le type de codage MIME des donnes envoyes au serveur
pour traitement.
Le paramtre par dfaut application/x-www-form-urlencode est gnralement utilis en conjonction avec la mthode
POST. Si vous crez un champ de tlchargement de fichier, spcifiez le type de codage MIME multipart/form-data.
f. (Facultatif) Utilisez le menu droulant Cible pour spcifier la fentre dans laquelle les donnes renvoyes par le
programme appel s'affichent.
Si la fentre indique n'est pas encore ouverte, une nouvelle fentre du mme nom apparat. Dfinissez l'une des valeurs
cible suivantes :
_blank Ouvre le document de destination dans une nouvelle fentre sans nom.
_parent Ouvre le document de destination dans la fentre parente de celle affichant le document actif.
_self Ouvre le document de destination dans la mme fentre que celle dans laquelle le formulaire a t envoy.
_top Ouvre le document de destination au sein de la fentre en cours. Cette valeur permet de s'assurer que le document
de destination occupe la fentre entire, mme si le document d'origine tait affich dans un cadre.
4. Insrez des objets de formulaire dans la page :
a. Placez le point d'insertion l'endroit o l'objet de formulaire doit s'afficher dans le formulaire.
b. Choisissez l'objet dans le menu Insertion > Formulaire, ou dans la catgorie Formulaires du panneau Insertion.
c. Compltez la bote de dialogue Attributs d'accessibilit des balises d'entre. Pour plus d'informations, cliquez sur le
bouton Aide de la bote de dialogue.
Remarque : Si la bote de dialogue Attributs d'accessibilit des balises d'entre n'est pas visible, il se peut que le point
d'insertion se trouvait en mode Code lorsque vous avez tent d'insrer l'objet de formulaire. Assurez-vous que le point
d'insertion se trouve bien en mode Cration, puis ressayez. Pour plus d'informations ce sujet, reportez-vous l'article
Creating HTML forms in Dreamweaver (en anglais) de David Powers.
d. Dfinissez les proprits des objets.
e. Entrez un nom pour l'objet dans l'inspecteur Proprits.
Chaque objet champ de texte, champ cach, case cocher et liste/menu doit possder un nom unique identifiant l'objet
dans le formulaire. Les noms d'objets de formulaire ne peuvent comporter ni espaces, ni caractres spciaux. Vous
pouvez utiliser toutes les combinaisons de caractres alphanumriques ainsi qu'un caractre de soulignement (_).
L'tiquette que vous attribuez l'objet correspond au nom de la variable o la valeur du champ (les donnes saisies)
sera stocke. Il s'agit de la valeur envoye au serveur pour traitement.
Remarque : Tous les boutons radio d'un mme groupe doivent porter le mme nom.
751
f. Pour attribuer une tiquette l'objet champ de texte, case cocher ou bouton radio dans la page, cliquez en regard de
l'objet et tapez le texte souhait.
5. Amliorez la mise en forme du formulaire.
Utilisez des sauts de ligne, des sauts de paragraphes, du texte prformat ou des tableaux pour mettre en forme vos
formulaires. Vous ne pouvez pas insrer un formulaire dans un autre formulaire (c'est--dire superposer des balises), mais
vous pouvez inclure plusieurs formulaires dans une mme page.
Lors de la conception de formulaires, n'oubliez pas de libeller les champs du formulaire sous forme de texte descriptif, afin
que les utilisateurs sachent ce qu'ils ont faire (par exemple, Entrez votre nom pour demander des informations de nom).
Utilisez des tableaux pour fournir une structure pour les objets et les tiquettes de champ. Assurez-vous, lorsque vous utilisez
des tableaux dans un formulaire, que toutes les balises table sont incluses entre les balises form.
Vous trouverez un didacticiel consacr la cration de formulaires l'adresse www.adobe.com/go/vid0160_fr.
Vous trouverez un didacticiel consacr la mise en page de formulaires l'aide de CSS l'adresse www.adobe.com/go/vid0161_fr.
Proprits de l'objet Champ de texte

Slectionnez l'objet champ de texte et dfinissez les options suivantes dans l'inspecteur Proprits :
Largeur car. Dfinit le nombre maximal de caractres pouvant tre affichs dans le champ. Ce nombre peut tre infrieur Nbre max. de caract.,
qui dfinit le nombre maximal de caractres pouvant tre entrs dans le champ. Ainsi, si le champ Largeur de caractre est dfini sur la valeur par
dfaut 20 et qu'un utilisateur saisit 100 caractres, ce dernier ne pourra voir que 20 de ces caractres dans le champ de texte. Bien que
l'utilisateur ne voie pas tous les caractres saisis dans le champ, ils sont reconnus par l'objet de champ et envoys au serveur pour traitement.
Nbre max. de caract. Dfinit le nombre maximum de caractres qu'il est possible de saisir dans le champ pour les champs de texte une seule
ligne. Utilisez Nbre max. de caract. pour limiter un code postal 5 chiffres, un mot de passe 10 caractres, etc. Si vous ne renseignez pas la
zone de texte Nbre max. de caract., les utilisateurs peuvent saisir un texte d'une longueur illimite. Si l'entre de l'utilisateur dpasse la largeur des
caractres du champ, le texte dfile. Si l'entre de l'utilisateur dpasse le nombre maximum de caractres, le formulaire met un son d'alerte.
Nbre lignes (Disponible lorsque l'option Multiligne est slectionne) Dfinit la hauteur du champ pour les champs de texte plusieurs lignes.
Dsactiv Dsactive la zone de texte.
Lecture seule Transforme la zone de texte en zone en lecture seule.
Type Dsigne le type de champ : ligne simple, multiligne ou mot de passe.
Ligne simple Permet de positionner une balise input dont l'attribut type est fix text. Le paramtre Larg. des caractres reprsente l'attribut
size ; Nbre max. de caract. reprsente l'attribut maxlength.
Lignes multiples Permet de positionner une balise textarea. Le paramtre Larg. des caractres est reli l'attribut cols ; Nbre caract. max. est
reli l'attribut rows.
Mot de passe Permet de positionner une balise input dont l'attribut type est fix password. Les paramtres Larg. des caractres et Nbre max.
de caract. sont relis aux mmes attributs que les champs de texte une seule ligne. Lorsqu'un utilisateur entre des donnes dans un champ mot
de passe, le texte apparat sous forme de puces ou d'astrisques pour le protger du regard de tiers.
Init val Attribue la valeur affiche dans le champ lors du premier chargement du formulaire. Ainsi pouvez-vous indiquer, par exemple, que
l'utilisateur doit saisir des informations de type remarque ou exemple dans le champ.
Classe Permet d'appliquer des rgles CSS l'objet.
Options de l'objet Bouton

Nom de bouton Attribue un nom au bouton. Les deux noms rservs, Envoyer et Rinitialiser, indiquent respectivement au formulaire d'envoyer
les donnes du formulaire l'application ou au script de traitement et de rinitialiser les valeurs initiales des champs du formulaire.
Valeur Dtermine le texte apparaissant sur le bouton.
Action Dtermine ce qui se passe lorsque le bouton est cliqu.
Envoyer le formulaire Envoie les donnes du formulaire pour traitement lorsque l'utilisateur clique sur le bouton. Les donnes sont envoyes la
page ou au script spcifi par la proprit Action du formulaire.
Rinitialiser le formulaire Rtablit le contenu ses valeurs par dfaut lorsque l'utilisateur clique sur le bouton.
Aucun Spcifie l'action a excuter lorsque l'utilisateur clique sur le bouton. Par exemple, vous pouvez ajouter un comportement JavaScript qui
ouvre une autre page lorsque l'utilisateur clique sur le bouton.
Classe Applique des rgles CSS l'objet.
Options de l'objet Case cocher

Valeur Dfinit la valeur envoyer au serveur lorsque la case cocher est active. Par exemple, dans un sondage, vous pouvez dfinir une valeur
de 4 pour approuve fortement et une valeur de 1 pour dsapprouve fortement .
Etat initial Dtermine si la case cocher est slectionne lorsque le formulaire est charg dans le navigateur.
Dynamique Permet au serveur de dterminer de faon dynamique l'tat initial de la case cocher. Par exemple, vous pouvez prsenter
visuellement les informations Oui/Non stockes dans un enregistrement de base de donnes l'aide de cases cocher. Au stade de la
conception, vous ne connaissez pas ces informations. Au moment de l'excution, le serveur lit l'enregistrement de base de donnes et active la
case cocher si la valeur est Oui.
Classe Applique des rgles CSS (Cascading Style Sheets, feuilles de style en cascade) l'objet.
752
Options de l'objet Bouton radio unique

Valeur Dfinit la valeur envoyer au serveur lorsque le bouton radio est slectionn. Par exemple, vous pouvez taper ski dans la zone de texte
Valeur pour indiquer qu'un utilisateur a choisi le ski.
Etat initial Dtermine si le bouton radio est slectionne lorsque le formulaire est charg dans le navigateur.
Dynamique Permet au serveur de dterminer de faon dynamique l'tat initial du bouton radio. Par exemple, vous pouvez prsenter visuellement
des informations stockes dans un enregistrement de base de donnes l'aide de boutons radio. Au stade de la conception, vous ne connaissez
pas ces informations. Au moment de l'excution, le serveur lit l'enregistrement de base de donnes et vrifie si la valeur du bouton radio
correspond celle que vous avez spcifie.
Classe Applique des rgles CSS l'objet.
Options du menu
Liste/Menu Attribue un nom au menu. Ce nom doit tre unique.
Type Indique si le menu se droule lorsque l'utilisateur clique dessus (option Menu) ou s'il affiche une liste droulante d'lments (option Liste).
Slectionnez l'option Menu si vous souhaitez qu'un seul choix soit visible lorsque le formulaire s'affiche dans un navigateur. Pour afficher les autres
choix, l'utilisateur doit cliquer sur la flche vers le bas.
Slectionnez l'option Liste pour afficher quelques-unes ou l'ensemble des options lorsque le formulaire s'affiche dans un navigateur, afin de
permettre aux utilisateurs de slectionner plusieurs lments.
Hauteur (Type Liste uniquement) Dfinit le nombre d'lments affichs dans le menu.
Slections (Type Liste uniquement) Indique si l'utilisateur peut slectionner plusieurs lments dans la liste.
Valeurs de la liste Ouvre une bote de dialogue qui vous permet d'ajouter les lments un menu de formulaire :
1. Utilisez les boutons plus (+) et moins (-) pour ajouter et supprimer des lments de la liste.
2. Tapez un libell ainsi qu'une valeur optionnelle pour chaque lment de menu.
Chaque lment de la liste possde un libell (le texte qui apparat dans la liste) et une valeur (la valeur envoye
l'application de traitement si l'lment est slectionn). Si aucune valeur n'est spcifie, le libell est envoy l'application de
traitement.
3. Utilisez les boutons flchs Haut et Bas pour rorganiser les lments de la liste.
Les lments apparaissent dans le menu dans le mme ordre qu'ils apparaissent dans la bote de dialogue Valeurs de la liste.
Le premier lment sur la liste est l'lment slectionn lorsque la page est charge dans un navigateur.
Dynamique Permet au serveur de slectionner de faon dynamique un lment dans le menu lors de son affichage initial.
Initialement slectionn Dfinit les lments slectionns par dfaut dans la liste. Cliquez sur un ou plusieurs lments dans la liste.
Insertion de champs de tlchargement de fichier

Vous pouvez crer un champ de tlchargement de fichier permettant aux utilisateurs de slectionner un fichier sur leur ordinateur (tel qu'un
document de traitement de texte ou un fichier graphique) et de le tlcharger sur le serveur. Un champ de fichier est similaire un champ de
texte, mais contient galement un bouton Parcourir. L'utilisateur peut soit saisir manuellement le chemin d'accs au fichier tlcharger, soit
cliquer sur le bouton Parcourir pour le rechercher et le slectionner.
Avant d'utiliser les champs de tlchargement de fichiers, vous devez disposer d'un script ct serveur ou d'une page capable de traiter les
soumissions de fichiers. Consultez la documentation de la technologie serveur utiliser pour traiter les donnes des formulaires. Par exemple, si
vous utilisez PHP, consultez la section Handling files uploads (Gestion des tlchargements de fichiers) dans le manuel PHP l'adresse
http://us2.php.net/features.file-upload.php.
Les champs de fichier ncessitent l'utilisation de la mthode POST pour transmettre des fichiers depuis un navigateur vers le serveur. Le fichier
est transfr l'adresse indique dans la zone de texte Action du formulaire.
Remarque : Avant d'utiliser le champ de fichier, vrifiez auprs de votre administrateur de serveur que le tlchargement anonyme de fichiers est
autoris.
1. Insrez un formulaire dans la page (Insertion > Formulaire).
2. Slectionnez le formulaire pour en afficher l'inspecteur Proprits.
3. Dans le menu droulant Mthode, slectionnez POST.
4. Dans le menu droulant Enctype, slectionnez multipart/form-data.
5. Dans la zone de texte Action, spcifiez le script ct serveur ou la page capable de traiter le fichier tlcharg.
6. Placez le point d'insertion l'intrieur de la bordure du formulaire et slectionnez Insertion > Formulaire > Champ de fichier.
7. Dfinissez les options suivantes dans l'inspecteur Proprits :
Champ de fichier Indique le nom de l'objet champ de fichier.
Largeur car. Dfinit le nombre maximal de caractres pouvant tre affichs dans le champ.
Nbre max. de caract. Indique le nombre maximum de caractres que peut contenir le champ. Si l'utilisateur parcourt
l'arborescence pour trouver le fichier, le nom du fichier et son chemin d'accs risquent de comporter un nombre de caractres
suprieur celui indiqu dans le champ Nbre max. de caract. Par contre, si l'utilisateur tente de taper le nom du fichier et son
753
chemin d'accs, le champ de fichier ne lui permet pas d'entrer un nombre de caractres suprieur celui indiqu.
Insertion d'un bouton d'image

Vous pouvez utiliser des images en qualit d'icnes de bouton. Vous devez associer un comportement l'objet de formulaire pour pouvoir utiliser
une image afin d'effectuer une tche autre que l'envoi de donnes.
1. Dans le document, placez le point d'insertion dans la bordure du formulaire.
2. Slectionnez Insertion > Formulaire > Champ d'image.
La bote de dialogue Slectionnez la source de l'image s'affiche.
3. Slectionnez l'image souhaite pour le bouton dans la bote de dialogue Slectionnez la source de l'image et cliquez sur OK.
4. Dfinissez les options suivantes dans l'inspecteur Proprits :
Zone_image Attribue un nom au bouton. Les deux noms rservs, Envoyer et Rinitialiser, indiquent respectivement au
formulaire d'envoyer les donnes du formulaire l'application ou au script de traitement et de rinitialiser les valeurs initiales
des champs du formulaire.
Src Spcifie l'image utiliser pour le bouton.
Sec Permet de saisir un texte descriptif au cas o l'image ne parvient pas se charger dans le navigateur.
Alignement Dfinit l'attribut d'alignement de l'objet.
Modifier image Lance votre diteur d'image par dfaut et ouvre le fichier d'image afin que vous puissiez le modifier.
5. Pour associer un comportement JavaScript au bouton, slectionnez l'image, puis slectionnez le comportement dans le
panneau Comportements (Fentre > Comportements).
Options de l'objet Champ masqu

Champ masqu Indique le nom du champ.
Valeur Attribue une valeur au champ. Cette valeur est transmise au serveur lors de l'envoi du formulaire.
Insertion d'un groupe de boutons radio

1. Placez le point d'insertion dans la bordure du formulaire.
2. Slectionnez Insertion > Formulaire > Groupe de boutons radio.
a. Dans la zone de texte Nom, tapez le nom du groupe de boutons radio.
Si vous dfinissez les boutons radio pour qu'ils renvoient des paramtres au serveur, ces derniers seront associs au
nom du groupe. Par exemple, si vous attribuez le nom myGroup au groupe de boutons radio et dfinissez la mthode du
formulaire sur GET (en d'autres termes, vous souhaitez que le formulaire transmette au serveur des paramtres d'URL
plutt que des paramtres de formulaire lorsque l'utilisateur clique sur le bouton d'envoi), l'expression
myGroup="CheckedValue" sera transmise au serveur via l'URL.
b. Cliquez sur le bouton Plus (+) pour ajouter un bouton radio au groupe. Saisissez l'tiquette et la valeur du nouveau
bouton.
c. Cliquez sur les flches haut ou bas pour rorganiser les boutons.
d. Pour dfinir un bouton radio prcis de faon ce qu'il soit slectionn l'ouverture de la page dans un navigateur, dans
la zone de texte Slectionner une valeur gale , saisissez une valeur gale celle du bouton radio.
Saisissez une valeur statique ou dynamique. Pour saisir une valeur dynamique, cliquez sur l'icne reprsentant un clair
(en regard de la zone de texte), puis slectionnez un jeu d'enregistrements contenant des valeurs possibles. Dans les
deux cas de figure, la valeur indique doit correspondre celle de l'un des boutons radio du groupe. Pour afficher les
valeurs des boutons radio, slectionnez chaque bouton, puis ouvrez son inspecteur Proprits (Fentre > Proprits).
e. Slectionnez la mise en forme que Dreamweaver doit utiliser pour mettre en forme les boutons.
Utilisez soit des sauts de ligne, soit un tableau pour mettre les boutons en forme. Si vous activez l'option du tableau,
Dreamweaver cre un tableau une seule colonne en plaant les boutons radio sur la gauche et les tiquettes sur la
droite.
Vous pouvez galement dfinir les proprits l'aide de l'inspecteur Proprits ou directement en mode Code.
Insertion d'un groupe de cases cocher

1. Placez le point d'insertion dans la bordure du formulaire.
2. Choisissez Insertion > Formulaire > Groupe de cases cocher.
a. Dans la zone Nom, tapez le nom du groupe de cases cocher.
754
Si vous dfinissez les cases cocher pour qu'elles renvoient des paramtres au serveur, ces derniers seront associs au
nom du groupe. Par exemple, si vous nommez le groupe myGroup fixez la mthode du formulaire sur GET (en d'autres
termes, vous voulez que le formulaire transmette au serveur des paramtres d'URL plutt que des paramtres de
formulaire lorsque l'utilisateur clique sur le bouton d'envoi), l'expression myGroup="CheckedValue" est transmise au
serveur via l'URL.
b. Cliquez sur le bouton Plus (+) pour ajouter une case cocher au groupe. Saisissez l'tiquette et la valeur de la nouvelle
case cocher.
c. Cliquez sur les flches haut ou bas pour rorganiser les cases cocher.
d. Pour dfinir une case cocher prciser de faon ce qu'elle soit slectionne l'ouverture de la page dans un
navigateur, dans la zone de texte Slectionner une valeur gale , saisissez une valeur gale celle de la case cocher.
Saisissez une valeur statique ou dynamique. Pour saisir une valeur dynamique, cliquez sur l'icne reprsentant un clair
(en regard de la zone de texte), puis slectionnez un jeu d'enregistrements contenant des valeurs possibles. Dans les
deux cas de figure, la valeur indique doit correspondre celle de l'une des cases cocher du groupe. Pour afficher les
valeurs des cases cocher, slectionnez chacune d'elles puis ouvrez son inspecteur Proprits (Fentre > Proprits).
e. Slectionnez la mise en forme que Dreamweaver doit utiliser pour mettre en forme les cases cocher.
Utilisez soit des sauts de ligne, soit un tableau pour mettre les cases cocher en forme. Si vous activez l'option du
tableau, Dreamweaver cre un tableau une seule colonne en plaant les cases cocher sur la gauche et les tiquettes
sur la droite.
Vous pouvez galement dfinir les proprits l'aide de l'inspecteur Proprits ou directement en mode Code.
Haut de la page
A propos des objets de formulaire dynamiques
Un objet de formulaire dynamique est un objet de formulaire dont l'tat initial est dtermin par le serveur lorsque la page est demande au
serveur, et non par le concepteur du formulaire lors de sa cration. Par exemple, lorsqu'un utilisateur recherche une page PHP contenant un
formulaire dans lequel se trouve un menu, un script PHP insr dans la page renseigne automatiquement le menu par des valeurs stockes dans
une base de donnes. Le serveur envoie ensuite la page termine au navigateur de l'utilisateur.
Le fait de rendre les objets de formulaire dynamiques permet de simplifier la maintenance d'un site. Par exemple, de nombreux sites utilisent des
menus pour prsenter aux utilisateurs un ensemble d'options. Si un menu est dynamique, vous pouvez ajouter, supprimer ou modifier des
lments de menu en un seul endroit (la table de base de donnes dans laquelle sont stocks ces lments) afin de mettre jour toutes les
instances de ce mme menu sur le site.
Insertion ou modification d'un menu de formulaire HTML dynamique:
Haut de la page
Vous avez la possibilit de renseigner un menu de formulaire ou une liste droulante HTML de faon dynamique l'aide des entres d'une base
de donnes. Pour la majorit des pages, vous pouvez utiliser un objet de menu HTML.
Avant de commencer, vous devez insrer un formulaire HTML dans une page ColdFusion, PHP ou ASP, puis dfinir un jeu d'enregistrements ou
une autre source de contenu dynamique pour le menu.
1. Insertion d'un objet de formulaire Liste/Menu HTML dans votre page
a. Cliquez l'intrieur du formulaire HTML sur la page (Insertion > Formulaire > Formulaire).
b. Choisissez Insertion > Formulaire > Liste/Menu pour insrer l'objet de formulaire.
Slectionnez le nouvel objet de formulaire Liste/Menu HTML ou un objet existant, puis cliquez sur le bouton Dynamique
de l'inspecteur Proprits.
Choisissez Insertion > Objets de donnes > Donnes dynamiques > Liste de slection dynamique.
3. Compltez les options de la bote de dialogue Liste/Menu dynamique, puis cliquez sur OK.
a. Dans le menu droulant Options du jeu d'enregistrements, choisissez le jeu d'enregistrements utiliser comme source de
contenu. Ce menu vous permet galement de modifier ultrieurement les lments de menu ou de liste statiques et
dynamiques.
b. La zone Options statiques vous permet de saisir un lment par dfaut dans la liste ou le menu. Cette option vous permet
aussi de modifier les entres statiques d'un objet de formulaire de liste ou de menu aprs que vous avez ajout un
contenu dynamique.
c. (Facultatif) Utilisez les boutons plus (+) et moins (-) pour ajouter et supprimer des lments de la liste. Les lments sont
dans le mme ordre que dans la bote de dialogue Valeur de la liste. Le premier lment sur la liste est l'lment
slectionn lorsque la page est charge dans un navigateur. Utilisez les boutons flchs Haut et Bas pour rorganiser les
lments de la liste.
d. Dans le menu droulant Valeurs, slectionnez le champ contenant les valeurs des lments de menu.
755
e. Dans le menu droulant Etiquettes, slectionnez le champ contenant les tiquettes des lments de menu.
f. (Facultatif) Pour spcifier qu'un lment de menu particulier soit slectionn l'ouverture de la page dans un navigateur
ou lorsqu'un enregistrement est affich dans le formulaire, indiquez une valeur gale celle de l'lment de menu dans
la zone de texte Slectionner une valeur gale .
Vous pouvez indiquer une valeur statique ou dynamique, en cliquant sur l'icne reprsentant un clair ( ct de la zone
de texte), puis en slectionnant une valeur dynamique dans la liste des sources de donnes. Dans les deux cas, la valeur
indique doit correspondre l'une des valeurs des lments de menu.
Haut de la page
1. En mode Cration, slectionnez l'objet de formulaire liste/menu.

2. Dans l'inspecteur Proprits, cliquez sur le bouton Dynamique.
Haut de la page
Vous pouvez afficher un contenu dynamique dans des champs de texte HTML lorsque le formulaire est affich dans un navigateur.
Avant de commencer, vous devez crer le formulaire dans une page ColdFusion, PHP ou ASP, puis dfinir un jeu d'enregistrements ou une autre
source de contenu dynamique pour la zone de texte.
1. Slectionnez le champ de texte dans le formulaire HTML de votre page.
2. Dans l'inspecteur Proprits, cliquez sur l'icne en forme d'clair situe en regard de la zone de texte Val. init. pour afficher la
bote de dialogue Donnes dynamiques.
3. Slectionnez la colonne du jeu d'enregistrements qui doit fournir une valeur au champ de texte, puis cliquez sur OK.
Dfinition des options de la bote de dialogue Champ de texte dynamique
Haut de la page
1. Dans le menu droulant Champ de texte, slectionnez le champ de texte que vous souhaitez rendre dynamique.
2. Cliquez sur l'icne en forme d'clair situe en regard de la zone de texte Dfinir la valeur , puis slectionnez une source de
donnes dans la liste des sources disponibles.
Cette source doit contenir des informations textuelles. Si aucune source de donnes n'apparat dans la liste ou si aucune des
sources disponibles ne correspond vos besoins, cliquez sur le bouton Plus (+) pour dfinir une nouvelle source.
Haut de la page
Activation dynamique d'une case cocher HTML
Vous pouvez laisser le serveur dterminer l'ventuelle activation d'une case cocher lors de l'affichage du formulaire dans un navigateur.
Avant de commencer, vous devez crer le formulaire dans une page ColdFusion, PHP ou ASP, puis dfinir un jeu d'enregistrements ou une autre
source de contenu dynamique pour ces cases cocher. L'idal serait que la source de contenu contienne des donnes boolennes, telles que
Yes/No ou true/false.
1. Slectionnez un objet de formulaire correspondant une case cocher dans votre page.
3. Renseignez la bote de dialogue Case cocher dynamique, puis cliquez sur OK.
Slectionnez l'icne reprsentant un clair, ct de la zone de texte Cocher si, puis slectionnez le champ dans la liste
des sources de donnes.
La source de donnes doit contenir des donnes boolennes telles que Yes et No, ou true et false. Si aucune source de
donnes n'apparat dans la liste ou si aucune des sources disponibles ne correspond vos besoins, cliquez sur le bouton
Plus (+) pour dfinir une nouvelle source.
Dans la zone de texte Egal , tapez la valeur que le champ doit contenir pour que la case cocher soit active.
Par exemple, pour que la case soit active lorsqu'un champ donn d'un enregistrement a la valeur Yes, tapez Yes dans la
zone de texte Egal .
Remarque : Cette valeur est galement renvoye au serveur si l'utilisateur clique sur le bouton Envoyer du formulaire.
Haut de la page
Activation dynamique d'un bouton radio HTML

Activez dynamiquement un bouton radio HTML lorsqu'un enregistrements s'affiche dans le formulaire HTML dans un navigateur.
Avant de commencer, vous devez crer le formulaire dans une page ColdFusion, PHP ou ASP, puis insrer au moins un groupe de boutons
756
radio HTML (Insertion > Formulaire > Groupe de boutons radio). Vous devez galement dfinir un jeu d'enregistrements ou une autre source de
contenu dynamique pour les boutons radio. L'idal serait que la source de contenu contienne des donnes boolennes, telles que Yes/No ou
true/false.
1. En mode Cration, slectionnez un bouton radio dans le groupe.
3. Compltez les options de la bote de dialogue Groupe de boutons radio dynamiques, puis cliquez sur OK.
Dfinition des options de la bote de dialogue Groupe de boutons radio dynamiques

1. Dans le menu droulant Groupe de boutons radio dynamiques, slectionnez un formulaire et un groupe de boutons radio de la
page.
La zone Valeurs de boutons radio affiche la valeur de chaque bouton radio du groupe.
2. Dans la liste des valeurs affiches, slectionnez la valeur prslectionner dynamiquement. Cette valeur s'affiche dans la
zone de texte Valeur.
3. Cliquez sur l'icne en forme d'clair situe en regard de la zone de texte Slectionner une valeur gale , puis slectionnez
un jeu d'enregistrements contenant des valeurs possibles pour les boutons radio du groupe.
Le jeu d'enregistrements que vous slectionnez contient des valeurs correspondant celles des boutons radio. Pour afficher
les valeurs des boutons radio, slectionnez chaque bouton, puis ouvrez son inspecteur Proprits (Fentre > Proprits).
4. Cliquez sur OK.
Dfinition des options de la bote de dialogue Groupe de boutons radio dynamiques (ColdFusion)
1. Dans le menu droulant Groupe de boutons radio, slectionnez un groupe de boutons radio et un formulaire.
2. Cliquez sur l'icne en forme d'clair en regard de la zone de texte Slectionner une valeur gale .
3. Renseignez la bote de dialogue Donnes dynamiques, puis cliquez sur OK.
a. Slectionnez une source de donnes dans la liste.
b. (Facultatif) Slectionnez un format de donnes pour le texte.
c. (Facultatif) Modifiez le code que Dreamweaver insre dans votre page pour afficher le texte dynamique.
4. Cliquez sur OK pour fermer la bote de dialogue Groupe de boutons radio dynamiques et insrer l'espace rserv du contenu
dynamique.
Haut de la page
Validation de donnes de formulaire HTML
Dreamweaver permet d'ajouter un code JavaScript permettant de vrifier le contenu des champs de texte spcifis afin de garantir que l'utilisateur
a bien saisi le type de donnes appropri.
Vous pouvez utiliser des widgets de formulaire Spry pour crer vos formulaires et valider le contenu d'lments de formulaires spcifiques. Pour
plus d'informations, consultez les rubriques consacres Spry ci-dessous.
Vous pouvez galement crer dans Dreamweaver des formulaires ColdFusion qui valident le contenu de certains champs. Pour plus
d'informations, consultez le chapitre consacr ColdFusion ci-dessous.
1. Crez un formulaire HTML qui comprend au moins un champ de texte et un bouton Envoyer.
Assurez-vous que chaque champ de texte que vous souhaitez valider porte un nom unique.
2. Slectionnez le bouton Envoyer.
3. Dans le panneau Comportements (Fentre > Comportements), cliquez sur le bouton Plus (+) et slectionnez le comportement
Valider le formulaire dans la liste.
4. Dfinissez les rgles de validation de chaque champ de texte et cliquez sur OK.
Par exemple, vous pouvez spcifier qu'un champ de texte utilis pour l'ge d'une personne n'accepte que les chiffres.
Remarque : Le comportement Valider le formulaire est uniquement disponible lorsqu'un champ de texte a t insr dans le
document.
Liaison de comportements JavaScript des objets de formulaire HTML
Haut de la page
Vous pouvez associer des comportements JavaScript stocks dans Dreamweaver des objets de formulaire HTML tels que des boutons.
1. Slectionnez l'objet de formulaire HTML.
2. Dans le panneau Comportements (Fentre > Comportements), cliquez sur le bouton Plus (+) et slectionnez un comportement
dans la liste.
757
Liaison de scripts personnaliss des boutons de formulaire HTML
Haut de la page
Certains formulaires utilisent JavaScript ou VBScript pour effectuer des actions (traitement du formulaire, par exemple) ct client, plutt que
d'envoyer les donnes de formulaire au serveur pour leur traitement. Avec Dreamweaver, vous pouvez configurer un bouton de formulaire pour
excuter un script particulier ct client lorsqu'un utilisateur clique sur le bouton.
1. Slectionnez un bouton Envoyer dans un formulaire.
2. Dans le panneau Comportements (Fentre > Comportements), cliquez sur le bouton Plus (+) et choisissez Appel JavaScript
dans la liste.
3. Dans la zone Appel JavaScript, tapez le nom de la fonction JavaScript excuter lorsque l'utilisateur clique sur le bouton, puis
cliquez sur OK.
Vous pouvez, par exemple, indiquer le nom d'une fonction qui n'existe pas encore, comme processMyForm().
4. Si la fonction JavaScript ne figure pas encore dans la section head du document, ajoutez-la maintenant.
Par exemple, vous pouvez dfinir la fonction JavaScript suivante dans la section head du document afin d'afficher un
message lorsque l'utilisateur clique sur le bouton Envoyer.
1
2
3
function processMyForm(){
alert('Thanks for your order!');
}
Haut de la page
Cration de formulaires HTML accessibles
Lorsque vous insrez un objet de formulaire HTML, vous pouvez rendre l'objet de formulaire accessible et modifier les attributs d'accessibilit
ultrieurement.
Ajout d'un objet de formulaire accessible

1. La premire fois que vous ajoutez des objets de formulaire accessibles, activez la bote de dialogue Accessibilit pour les
objets de formulaire (consultez la section Optimisation de l'espace de travail pour le dveloppement visuel).
Vous devez effectuer cette opration une seule fois.
2. Dans le document, placez le point d'insertion l'endroit o l'objet de formulaire doit apparatre.
3. Choisissez Insertion > Formulaire, puis l'objet de formulaire insrer.
La bote de dialogue Attributs d'accessibilit aux balises d'entre s'affiche.
4. Compltez les options de la bote de dialogue, puis cliquez sur OK. Voici une liste partielle des options :
Remarque : Le lecteur d'cran lit le nom que vous avez entr en tant qu'attribut Label de l'objet.
ID attribue un ID au champ de formulaire. Cette valeur peut tre utilise pour faire rfrence au champ partir de JavaScript.
Elle est galement utilise comme valeur de l'attribut for si vous activez l'option Joindre une balise d'tiquette l'aide de
l'attribut For du groupe Style.
Envelopper avec une balise d'tiquette Entoure l'lment de formulaire d'une balise d'tiquette, comme suit :
1
2
3
<label>
<input type="radio" name="radiobutton" value="radiobutton">
RadioButton1</label>
Joindre une balise d'tiquette l'aide de l'attribut 'for' Utilise l'attribut for pour entourer l'lment de formulaire d'une
balise d'tiquette, comme suit :
1
2
<input type="radio" name="radiobutton" value="radiobutton" id="radiobutton">

<label for="radiobutton">RadioButton2</label>
Si vous choisissez cette option, le navigateur place un rectangle de slection sur le texte associ une case cocher ou un
bouton radio et permet l'utilisateur d'activer la case cocher ou le bouton radio en cliquant n'importe o dans le texte
associ.
Remarque : Il s'agit de l'option d'accessibilit la plus courante. Toutefois, cette fonction peut varier selon le navigateur utilis.
Aucune balise d'tiquette N'utilise pas de balise d'tiquette, comme suit:
758
1
2
<input type="radio" name="radiobutton" value="radiobutton">

RadioButton3
Cl d'accs Utilise un quivalent clavier (une lettre) et la touche Alt (Windows) ou Ctrl (Macintosh) pour slectionner l'objet
de formulaire dans le navigateur. Par exemple, si vous entrez B comme Cl d'accs, les utilisateurs de Macintosh peuvent
appuyer sur Ctrl+B pour slectionner l'objet de formulaire.
Ordre des tabulations Indique l'ordre d'apparition des objets de formulaire. Si vous dfinissez un ordre d'apparition pour un
objet, assurez-vous de le faire galement pour tous les autres objets.
La dfinition d'un ordre d'apparition peut se rvler 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 l'autre dans un ordre particulier.
5. Cliquez sur Oui pour insrer une balise de formulaire.
L'objet de formulaire apparat dans le document.
Remarque : Si vous cliquez sur Annuler, l'objet de formulaire s'affiche dans le document, mais Dreamweaver ne lui associe ni
les balises ni les attributs d'accessibilit.
Modification des valeurs d'accessibilit pour un objet de formulaire

1. Dans la fentre de document, slectionnez l'objet.
Modifiez les attributs en mode Code.
Modifier la balise.
Voir aussi
Didacticiel consacr la cration de formulaires
Didacticiel consacr la mise en page de formulaires
759
Prise en charge amliore de HTML5 pour les lments de formulaire

Rvision du flux de production de formulaires dans Dreamweaver
Nouveaux attributs communs aux lments de formulaire
Elments de formulaire avec attributs modifis
Elments de formulaire HTML5
Dans le cadre dune amlioration continue de la prise en charge de HTML5 dans Dreamweaver, de nouveaux attributs ont t introduits pour
quelques lments de formulaire. En outre, quatre nouveaux lments de formulaire HTML5 ont t introduits.
Vous trouverez les lments de formulaire dans le panneau Insertion. Choisissez Fentre > Insertion. Dans le menu Insertion du panneau,
slectionnez Formulaires.
Liens associs
Haut de la page
Nouveaux attributs communs aux lments de formulaire

Les nouveaux attributs suivants sont communs tous les lments de formulaire :
Dsactiv : Slectionnez cette option si vous souhaitez que le navigateur dsactive llment.
Obligatoire : Slectionnez cette option si vous souhaitez que le navigateur vrifie si une valeur a t indique.
Saisie automatique : Slectionnez cette option pour que les valeurs soient compltes automatiquement lorsque
lutilisateur entre des informations dans un navigateur.
Focus automatique : Slectionnez cette option si vous souhaitez que cet lment ait le focus lorsque navigateur charge la
page.
Lecture seule : Slectionnez cette option pour fixer la valeur de llment en lecture seule.
Formulaire : Spcifie un ou plusieurs formulaires auxquels un lment <input> appartient.
Nom : Nom unique utilis pour faire rfrence lobjet dans le code.
Emplacement rserv : Conseil qui dcrit la valeur attendue dun champ de saisie.
Motif : Expression rgulire par rapport laquelle la valeur de llment est valide.
Titre : Informations supplmentaires au sujet dun lment. Saffiche sous la forme dune infobulle.
Ordre des tabulations : Spcifie la position de llment actuel dans lordre des tabulations pour le document actuel.
Haut de la page
Elments de formulaire avec attributs modifis

Formulaire sans validation : Slectionnez cette option pour dsactiver la validation du formulaire. Cette slection
remplace lattribut Aucune validation au niveau du formulaire.
Type de codage du formulaire : Type MIME auquel un agent utilisateur est cens associer cet lment pour lenvoi du
formulaire.
Cible du formulaire cible : Nom de contexte de navigation ou mot-cl qui reprsente la cible du contrle.
Accepter jeu de caractres : Prcise les codages de caractres utiliss pour lenvoi du formulaire.
Remarque : les liens pour les attributs contiennent des informations sur tous les attributs numrs dans les spcifications de HTML5. Tous ces
attributs ne sont pas prsents dans le panneau Proprits. Vous pouvez utiliser le mode Code pour ajouter les attributs absents du panneau.
Elment
760
de
formulaire
Nouveaux attributs spcifiques llment
Description des attributs
Champ de
texte
Liste
http://www.w3.org/TR/html-markup/input.text.html
Bouton
<Aucun nouvel attribut spcifique>
http://www.w3.org/wiki/HTML/Elements/button
Case
cocher
http://www.w3.org/TR/html-markup/input.checkbox.html
Fichier
Multiple
http://www.w3.org/TR/html-markup/input.file.html
Formulaire
Sans validation, Accepter jeu de

caractres
http://www.w3.org/TR/2012/WD-html-markup20120329/form.html
Masqu
http://www.w3.org/TR/2012/WD-html-markup20120329/input.hidden.html
Mot de
passe
http://www.w3.org/TR/html-markup/input.password.html
Image
Largeur, Hauteur, Action, Mthode,

Formulaire sans validation, Type
de codage du formulaire, Cible du
formulaire.
http://www.w3.org/TR/html-markup/input.image.html
Rinitialiser
http://dev.w3.org/cvsweb/html5/markup/button.reset.html
Envoyer
Formulaire sans validation, Type

de codage du formulaire, Cible du
formulaire, Ordre des tabulations,
Mthode.
http://www.w3.org/TR/html-markup/input.submit.html
Case
doption
http://www.w3.org/TR/html-markup/input.radio.html
Zone de
texte
Lignes, Colonnes, Emplacement

rserv, Renvoi la ligne,
Longueur max., Ordre des
tabulations
http://www.w3.org/TR/html-markup/textarea.html
Slection
Taille
http://www.w3.org/wiki/HTML/Elements/select
Haut de la page
Elments de formulaire HTML5
Elment de
formulaire
Disponible
dans
Description
Description des attributs
Couleur
12.2
Pour les champs de saisie devant contenir une

couleur.
http://www.w3.org/TR/htmlmarkup/input.color.html
Date
12.2
Contrle permettant lutilisateur de slectionner une

date.
http://www.w3.org/TR/htmlmarkup/input.date.html
Date et
heure
12.2
Permet lutilisateur de slectionner une date et une

heure (avec fuseau horaire).
http://www.w3.org/TR/htmlmarkup/input.datetime.html
Date et
heure
locales
12.2
Permet lutilisateur de slectionner une date et une

heure (sans fuseau horaire).
http://www.w3.org/TR/htmlmarkup/input.datetimelocal.html
Mois
12.2
Permet lutilisateur de slectionner un mois et une

anne.
http://www.w3.org/TR/htmlmarkup/input.month.html
Nombre
12.2
Pour les champs ne devant contenir que des chiffres.
http://www.w3.org/TR/htmlmarkup/input.number.html
Plage
12.2
Pour les champs devant contenir des valeurs dans

une plage de chiffres.
http://www.w3.org/TR/htmlmarkup/input.range.html
761
Heure
12.2
Permet lutilisateur de slectionner une heure.
http://www.w3.org/TR/htmlmarkup/input.time.html
Semaine
12.2
Permet lutilisateur de slectionner une semaine et

une anne.
http://www.w3.org/TR/htmlmarkup/input.week.html
Adresse
lectronique
12.1
Contrle permettant de modifier une liste dadresses

lectroniques donne dans la valeur de llment.
http://www.w3.org/TR/htmlmarkup/input.email.html
Rechercher
12.1
Contrle de modification en texte brut dune ligne pour

la saisie dun ou plusieurs termes de recherche.
http://www.w3.org/TR/htmlmarkup/input.search.html
Tlphone
(Tl.)
12.1
Contrle de modification en texte brut dune ligne pour

la saisie dun numro de tlphone.
http://www.w3.org/TR/htmlmarkup/input.tel.html
URL
12.1
Contrle permettant de modifier une URL absolue

donne dans la valeur de llment.
http://www.w3.org/TR/htmlmarkup/input.url.html
762
Cration visuelle dapplications
763
Cration de pages principales et dtailles

A propos des pages principales et dtailles
Cration d'une page principale
Cration de liens vers la page de dtails
Recherche de l'enregistrement demand et affichage dans la page de dtails
Recherche d'un enregistrement prcis et affichage sur une page (ASP)
Cration de pages principale et de dtails en une seule opration
Haut de la page
A propos des pages principales et dtailles
Les pages principales et dtailles sont des ensembles de pages utilises pour organiser et afficher les donnes d'un jeu d'enregistrements. Ces
pages fournissent aux visiteurs de votre site une vue d'ensemble et une vue dtaille. La page principale prsente tous les enregistrements et
contient des liens vers des pages de dtails qui fournissent des informations complmentaires sur chaque enregistrement.
Page principale
764
Page de dtails
Vous pouvez crer des pages principales et des pages de dtails en insrant un objet de donnes destin crer une page principale et une
page de dtails en une seule opration, ou en utilisant des comportements de serveur pour crer ces pages d'une manire plus personnalise. Si
vous employez des comportements de serveur pour crer des pages principales et dtailles, vous devez tout d'abord crer une page principale
contenant la liste des enregistrements, puis ajouter des liens vers les pages de dtails depuis cette liste.
Haut de la page
Cration d'une page principale

Avant de commencer, vrifiez que vous avez dfini une connexion de base de donnes pour le site.
1. Pour crer une page vierge, choisissez Fichier > Nouveau > Page vierge, slectionnez un type de page puis cliquez sur
Crer. Cette page devient la page principale.
2. Dfinissez un jeu d'enregistrements.
Dans le panneau Liaisons (Fentre > Liaisons), cliquez sur le bouton Plus (+), slectionnez Jeu d'enregistrements puis
choisissez les options. Si vous voulez rdiger votre propre instruction SQL, cliquez sur Avanc.
Vrifiez que le jeu d'enregistrements contient toutes les colonnes de table ncessaires la cration de la page principale. Le
jeu d'enregistrements doit contenir la colonne comportant la cl unique de chacun des enregistrements, savoir la colonne
d'ID d'enregistrement. Dans l'exemple suivant, la colonne Code contient la cl unique de chaque enregistrement.
Colonnes de jeu d'enregistrements slectionnes pour une page principale

En gnral, le jeu d'enregistrements de la page principale extrait quelques colonnes d'un tableau de base de donnes tandis
que celui de la page de dtails extrait davantage de colonnes du mme tableau afin de fournir des dtails supplmentaires.
765
Le jeu d'enregistrements peut tre dfini par l'utilisateur au moment de l'excution. Pour plus d'informations, consultez la
rubrique Cration de pages de recherche et de rsultats.
3. Insrez un tableau dynamique afin d'afficher les enregistrements.
Placez le point d'insertion o vous voulez placer le tableau dynamique sur la page. Choisissez Insertion > Objets de donnes
> Donnes dynamiques > Tableau dynamique, dfinissez les options puis cliquez sur OK.
Si vous souhaitez que les utilisateurs ne puissent pas voir les ID d'enregistrement, supprimez la colonne correspondante du
tableau dynamique. Cliquez dans la page afin de la rendre active. Dplacez le curseur vers le haut de la colonne dans le
tableau dynamique jusqu' ce que les cellules de la colonne s'affichent avec un contour rouge, puis cliquez sur la colonne.
Appuyez sur la touche Suppr pour supprimer la colonne du tableau.
Haut de la page
Cration de liens vers la page de dtails
Aprs avoir cr la page principale et ajout le jeu d'enregistrements, vous devez crer des liens permettant d'ouvrir la page de dtails. Vous
devez ensuite modifier les liens de manire transmettre les ID des enregistrements slectionns par l'utilisateur. La page de dtails utilise cet ID
pour rechercher l'enregistrement demand dans la base de donnes et l'afficher.
Remarque : La cration de liens vers les pages de mises jour s'effectue de la mme manire. La page de rsultats est similaire une page
principale, et la page de mises jour une page de dtails.
Ouverture de la page de dtails et transfert d'un ID d'enregistrement (ColdFusion, PHP)

1. Dans le tableau dynamique, slectionnez l'espace rserv pour le texte qui servira de lien.
Les liens appliqus l'espace rserv sont slectionns.

2. Dans l'inspecteur Proprits, cliquez sur l'icne du dossier situe en regard de la zone Lien.
3. Parcourez vos fichiers afin de slectionner la page de dtails. Celle-ci apparat dans la zone Lien de l'inspecteur Proprits.
Dans le tableau dynamique, le texte slectionn apparat li. Lorsque la page s'excute sur le serveur, le lien s'applique au
texte de chaque ligne du tableau.
4. Dans la page principale, slectionnez le lien dans le tableau dynamique.
5. (ColdFusion) Dans la zone Lien de l'inspecteur Proprits, ajoutez la chane suivante la fin de l'URL :
1
?recordID=#recordsetName.fieldName#
Le point d'interrogation indique au serveur que ce qui suit correspond un ou plusieurs paramtres d'URL. Le mot recordID
correspond au nom du paramtre d'URL (vous pouvez inventer n'importe quel nom de votre choix). Notez le nom du
paramtre d'URL : vous devrez en effet l'utiliser ultrieurement au niveau de la page de dtails.
L'expression qui suit le signe gal correspond la valeur du paramtre. Dans ce cas, la valeur est gnre par une
expression ColdFusion qui renvoie un ID d'enregistrement du jeu d'enregistrements. Un ID diffrent est gnr pour chaque
ligne du tableau dynamique. Dans l'expression ColdFusion, remplacez recordsetName par le nom de votre jeu
d'enregistrements et remplacez fieldName par le nom du champ de votre jeu d'enregistrements qui permet d'identifier chaque
enregistrement de faon univoque. Dans la plupart des cas, le champ correspond un numro d'ID d'enregistrement. Dans
l'exemple suivant, le champ correspond des codes de location uniques.
1
locationDetail.cfm?recordID=#rsLocations.CODE#
Lorsque la page s'excute, les valeurs du champ CODE du jeu d'enregistrements sont insres dans les lignes
correspondantes du tableau dynamique. Par exemple, si le point de location Canberra, Australie, possde le code CBR, l'URL
suivante est utilise dans la ligne Canberra du tableau dynamique :
1
locationDetail.cfm?recordID=CBR
766
6. (PHP) Dans le champ Lien de l'inspecteur Proprits, ajoutez la chane suivante la fin de l'URL :
1
?recordID=<?php echo $row_<dfn class="term">recordsetName</dfn>['<dfn

class="term">fieldName</dfn>']; ?>
correspond au nom du paramtre d'URL. (Vous pouvez utiliser le nom de votre choix.) Notez le nom du paramtre d'URL :
vous devrez en effet l'utiliser ultrieurement au niveau de la page de dtails.
expression PHP qui renvoie un ID d'enregistrement du jeu d'enregistrements. Un ID diffrent est gnr pour chaque ligne du
tableau dynamique. Dans l'expression PHP, remplacez recordsetName par le nom de votre jeu d'enregistrements et fieldName
par le nom du champ de votre jeu d'enregistrements qui permet d'identifier chaque enregistrement de faon univoque. Dans la
plupart des cas, le champ correspond un numro d'ID d'enregistrement. Dans l'exemple suivant, le champ correspond des
codes de location uniques.
1
locationDetail.php?recordID=<?php echo $row_rsLocations['CODE']; ?>
1
locationDetail.php?recordID=CBR
Ouverture de la page de dtails et transfert d'un ID d'enregistrement (ASP)

1. Slectionnez le contenu dynamique devant assurer la fonction de lien.
choisissez Aller la page de dtails dans le menu droulant.
3. Dans la bote de dialogue page de dtails, cliquez sur Parcourir et recherchez la page.
4. Indiquez la valeur lui transmettre en slectionnant un jeu d'enregistrements et une colonne dans les menus droulants Jeu
d'enregistrements et Colonne. Cette valeur, telle que l'ID de cl unique, est gnralement propre l'enregistrement.
5. Si vous le souhaitez, vous pouvez transmettre les paramtres de page existants la page de dtails en slectionnant les
options Paramtres d'URL ou Paramtres de formulaire.
6. Cliquez sur OK.
Un lien spcial entoure le texte slectionn. Lorsque l'utilisateur clique sur le lien, le comportement de serveur Aller la page
de dtails transmet cette mme page un paramtre d'URL contenant l'ID de l'enregistrement. Prenons l'exemple d'un
paramtre d'URL appel id et d'une page de dtails appele customerdetail.asp ; lorsque l'utilisateur clique sur le lien, l'URL
se prsente comme suit :
http://www.mysite.com/customerdetail.asp?id=43
La premire partie de l'URL, http://www.mysite.com/customerdetail.asp, ouvre la page. La deuxime partie, ?id=43, constitue
le paramtre d'URL. Elle prcise la page de dtails quel enregistrement trouver et afficher. Le terme id est le nom du
paramtre d'URL et sa valeur est 43. Dans cet exemple, le paramtre d'URL contient le numro d'ID de l'enregistrement, soit
43.
Recherche de l'enregistrement demand et affichage dans la page de dtails
Haut de la page
Pour pouvoir afficher l'enregistrement demand par la page principale, vous devez dfinir un ensemble de donnes devant contenir un seul
enregistrement et lier les colonnes de l'ensemble de donnes la page de dtails.
1. Passez la page de dtails. Si vous n'avez pas encore cr une page de dtails, crez une page ColdFusion vierge (Fichier
> Nouveau).
2. Dans le panneau Liaisons (Fentre > Liaisons), cliquez sur le bouton Plus (+) et slectionnez Jeu d'enregistrements (Requte)
ou Jeu de donnes (Requte) dans le menu droulant.
La bote de dialogue Jeu d'enregistrements ou Jeu de donnes simplifie s'affiche. Si la bote de dialogue avance s'affiche,
767
cliquez sur Simple.

3. Donnez un nom au jeu d'enregistrements, puis slectionnez la source de donnes et la table de base de donnes qui
fourniront les donnes de votre jeu d'enregistrements.
4. Dans la zone Colonnes, slectionnez les colonnes du tableau inclure dans le jeu d'enregistrements.
Le jeu d'enregistrements peut tre identique ou diffrent du jeu de la page principale. Le jeu d'enregistrements d'une page de
dtails possde gnralement davantage de colonnes afin d'afficher plus de dtails.
Si les jeux d'enregistrements sont diffrents, le jeu d'enregistrements de la page de dtails doit avoir au moins une colonne en
commun avec celui de la page principale. La colonne commune est gnralement la colonne d'ID de l'enregistrement, mais
elle peut galement tre le champ commun aux tableaux relis.
Pour inclure uniquement certaines colonnes de la table dans le jeu d'enregistrements, cliquez sur Slectionnes, puis cliquez
5. Pour rechercher et afficher l'enregistrement spcifi dans le paramtre d'URL transmis par la page principale, renseignez la
section Filtre comme suit :
Dans le premier menu droulant de la zone Filtre, slectionnez la colonne du jeu d'enregistrements contenant les valeurs
correspondant celle du paramtre d'URL transmis par la page principale. Par exemple, si le paramtre d'URL contient un
numro d'ID d'enregistrement, slectionnez la colonne contenant les numros d'ID d'enregistrement. Dans l'exemple de la
section prcdente, la colonne intitule CODE contient les valeurs correspondant celle du paramtre d'URL transmis par
la page principale.
Dans le menu droulant situ ct du premier menu, slectionnez le signe gal (=) (si cela n'est pas dj fait).
Dans le troisime menu droulant, choisissez Paramtre d'URL. La page principale utilise un paramtre d'URL pour
transmettre des informations la page de dtails.
Dans la quatrime zone, tapez le nom du paramtre d'URL transmis par la page principale.
6. Cliquez sur OK. Le jeu d'enregistrements s'affiche dans le panneau Liaisons.
7. Liez les colonnes du jeu d'enregistrements la page de dtails ; pour ce faire, slectionnez les colonnes dans le panneau
Liaisons (Fentre > Liaisons) et faites-les glisser sur la page.
Aprs avoir tlcharg la page principale et la page de dtails sur le serveur, vous pouvez ouvrir la page principale dans un
navigateur. Lorsque vous cliquez sur un lien dans la page principale, la page de dtails correspondante s'ouvre et affiche des
informations sur l'enregistrement slectionn.
Recherche d'un enregistrement prcis et affichage sur une page (ASP)
Haut de la page
Vous pouvez ajouter un comportement de serveur permettant de rechercher un enregistrement spcifique dans le jeu d'enregistrements, de
manire afficher les donnes de l'enregistrement sur la page. Vous ne pouvez recourir au comportement de serveur que si vous utilisez le
modle de serveur ASP.
1. Crez une page rpondant aux conditions suivantes :
Un ID d'enregistrement contenu dans un paramtre d'URL a t transmis la page courante par une autre page. Vous
pouvez crer des paramtres d'URL sur l'autre page avec des hyperliens HTML ou un formulaire HTML. Pour plus
d'informations, voir Utilisation de formulaires pour recueillir des informations des utilisateurs.
Un jeu d'enregistrements a t dfini pour la page courante. Le comportement de serveur extrait les dtails
d'enregistrement de ce jeu. Pour obtenir des instructions, consultez la section Dfinition un jeu d'enregistrements sans
rdiger d'instructions SQL ou Rdaction d'instructions SQL en vue de la dfinition d'un jeu d'enregistrements avanc.
Des colonnes de jeu d'enregistrements ont t lies la page. L'enregistrement spcifique doit tre affich sur la page.
Pour plus d'informations, voir Cration de texte dynamique.
2. Ajoutez le comportement de serveur afin de trouver l'enregistrement spcifi par le paramtre d'URL. Pour ce faire, cliquez sur
le bouton Plus (+) du panneau Comportements de serveurs (Fentre > Comportements de serveur), puis choisissez
Pagination du jeu d'enregistrements > Dplacer vers un enregistrement spcifique.
3. Dans le menu droulant Dplacer vers l'enregistrement dans, slectionnez le jeu que vous avez dfini pour la page.
4. Dans le menu droulant O la colonne, slectionnez la colonne contenant la valeur transmise par l'autre page.
Par exemple, si cette page transmet un numro d'ID d'enregistrement, slectionnez la colonne contenant les numros d'ID
d'enregistrement.
5. Dans la zone Correspond au paramtre d'URL, entrez le nom du paramtre d'URL transmis par l'autre page.
Par exemple, si celle-ci a utilis l'URL id=43 pour ouvrir la page d'informations dtailles, tapezid dans la zone Correspond au
paramtre d'URL.
6. Cliquez sur OK.
768
Lorsque le navigateur enverra une nouvelle requte en vue d'obtenir la page, le comportement de serveur lira l'ID
d'enregistrement dans le paramtre d'URL transmis par l'autre page et passera l'enregistrement spcifi dans le jeu
d'enregistrements.
Cration de pages principale et de dtails en une seule opration
Haut de la page
Lorsque vous dveloppez des applications Web, vous pouvez crer rapidement des pages principales et de dtails l'aide de l'objet de donnes
Ensemble de pages Principale-Dtails.
1. Pour crer une page dynamique vierge, choisissez Fichier > Nouveau > Page vierge, slectionnez une page dynamique dans
la liste Type de page, puis cliquez sur Crer.
Cette page devient la page principale.
2. Dfinissez un jeu d'enregistrements pour la page.
Assurez-vous que le jeu d'enregistrements contient non seulement toutes les colonnes ncessaires pour la page principale,
mais galement celles ncessaires pour la page de dtails. En gnral, le jeu d'enregistrements de la page principale extrait
quelques colonnes d'un tableau de base de donnes tandis que celui de la page de dtails extrait davantage de colonnes du
mme tableau afin de fournir des dtails supplmentaires.
3. Ouvrez la page principale en mode Cration, puis slectionnez Insertion > Objets de donnes > Ensemble de pages
Principale Dtails.
4. Dans le menu droulant Jeu d'enregistrements, assurez-vous d'avoir slectionn le jeu contenant les enregistrements que
vous souhaitez afficher dans la page principale.
5. Dans la zone Champs de la page principale, slectionnez les colonnes du jeu d'enregistrements afficher dans la page
principale.
Par dfaut, toutes les colonnes du jeu d'enregistrements sont slectionnes. Si le jeu contient une colonne cl unique, telle
que recordID, slectionnez-la et cliquez sur le bouton Moins (-) afin qu'elle ne s'affiche pas sur votre page.
6. Pour modifier l'ordre d'apparition des colonnes dans la page principale, slectionnez une colonne dans la liste et cliquez sur la
flche vers le bas ou vers le haut.
Dans la page principale, les colonnes du jeu d'enregistrements sont disposes horizontalement dans un tableau. Un clic sur la
flche vers le haut dplace la colonne vers la gauche ; un clic sur la flche vers le bas dplace la colonne vers la droite.
7. Dans le menu droulant Lier la page de dtails depuis, slectionnez la colonne du jeu d'enregistrements qui affichera une
valeur servant galement de lien vers la page de dtails.
Par exemple, si vous souhaitez que chaque nom de produit de la page principale ait un lien vers la page de dtails,
slectionnez la colonne du jeu d'enregistrements contenant les noms de produit.
8. Dans le menu droulant Passer la cl unique, slectionnez la colonne du jeu d'enregistrements contenant les valeurs
identifiant les enregistrements.
En gnral, la colonne choisie est le numro d'identification de l'enregistrement. Cette valeur est transmise la page de
dtails afin d'identifier l'enregistrement choisi par l'utilisateur.
9. Si la colonne cl unique n'est pas numrique, dsactivez l'option Numrique.
Remarque : Cette option est slectionne par dfaut ; elle existe seulement pour certains modles de serveur.
10. Spcifiez le nombre d'enregistrements devant s'afficher dans la page principale.
11. Dans la zone Nom de la page de dtails, cliquez sur Parcourir et localisez le fichier de page de dtails que vous avez cr ou
bien entrez un nom et laissez l'objet de donnes le soin d'en crer un pour vous.
12. Dans la zone Champs de la page de dtails, slectionnez les colonnes afficher dans la page de dtails.
Par dfaut, toutes les colonnes du jeu d'enregistrements de la page principale sont slectionnes. Si le jeu d'enregistrements
contient une colonne cl unique, telle que recordID, slectionnez-la et cliquez sur le bouton Moins (-) afin qu'elle ne s'affiche
pas dans la page d'informations dtailles.
13. Pour modifier l'ordre d'apparition des colonnes dans la page de dtails, slectionnez une colonne dans la liste et cliquez sur la
flche vers le bas ou vers le haut.
Dans la page de dtails, les colonnes du jeu d'enregistrements sont disposes verticalement dans un tableau. Un clic sur la
flche vers le haut dplace la colonne vers le haut ; un clic sur la flche vers le bas dplace la colonne vers le bas.
14. Cliquez sur OK.
L'objet de donnes cre une page de dtails (si vous ne l'avez dj fait) et ajoute un contenu de page dynamique ainsi que
des comportements de serveur la page principale et la page de dtails.
15. Personnalisez la mise en forme de la page principale et de la page de dtails en fonction de vos besoins.
Vous pouvez personnaliser la mise en forme de chaque page l'aide des outils de conception de page de Dreamweaver.
769
Vous pouvez galement modifier les comportements de serveur en double-cliquant dessus dans le panneau Comportements
de serveur.
Aprs avoir cr l'ensemble de pages principales et de dtails l'aide de l'objet de donnes, utilisez le panneau
Comportements de serveur (Fentre > Comportements de serveur) pour modifier les divers lments que l'objet de donnes
insre dans les pages.
Voir aussi
770
Cration de pages de recherche et de rsultats

A propos des pages de recherche et de rsultats
Cration de la page de recherche
Cration d'une page de rsultats de base
Cration d'une page de rsultats avance
Affichage des rsultats de la recherche
Cration d'une page de dtails pour une page de rsultats
Cration d'un lien qui ouvre une page associe (ASP)
Haut de la page
A propos des pages de recherche et de rsultats
Vous avez la possibilit d'utiliser Dreamweaver pour crer un ensemble de pages permettant aux utilisateurs d'effectuer des recherches dans votre
base de donnes et d'afficher les rsultats de la recherche.
Dans la plupart des cas, pour intgrer cette nouvelle fonction dans votre application Web, un minimum de deux pages s'impose. La premire page
contient un formulaire HTML qui va servir la saisie des critres de recherche. Mme si aucune recherche n'est vritablement excute ce
niveau, on l'appelle toutefois page de recherche .
La deuxime page indispensable la recherche est la page de rsultats, qui permet d'effectuer la plupart du travail. La page de rsultats excute
les tches suivantes :
Analyse des critres de recherche envoys par la page de recherche
Etablissement d'une connexion la base de donnes et recherche d'enregistrements
Cration d'un jeu compos des enregistrements trouvs
Affichage du contenu du jeu d'enregistrements
L'insertion d'une page d'informations dtailles est galement possible, en option. Une page d'informations dtailles donne
des informations supplmentaires sur un enregistrement figurant dans une page de rsultats.
Si la recherche se fait sur la base d'un seul critre, Dreamweaver vous permet d'ajouter des fonctions de recherche votre
application Web sans utiliser de requtes ni de variables SQL. Contentez-vous de crer vos pages et de complter les champs
des quelques botes de dialogue qui s'affichent l'cran. Si la recherche dpend de plusieurs critres, il vous faut rdiger une
instruction SQL pour laquelle vous dfinissez de multiples variables.
Dreamweaver insre la requte SQL dans la page. Lorsque la page s'excute sur le serveur, chaque enregistrement de la
table de base de donnes est vrifi. Si la valeur du champ indiqu dans un enregistrement rpond aux conditions de la
requte SQL, l'enregistrement sera inclus dans le jeu d'enregistrements. La requte SQL en cours cre un jeu
d'enregistrements contenant uniquement les rsultats de la recherche.
Par exemple, le service commercial peut dtenir des renseignements sur les clients d'une zone particulire dont les revenus
sont suprieurs un niveau donn. Dans le formulaire d'une page de recherche, le responsable des ventes saisit un secteur
gographique et un niveau de revenu minimum, puis clique sur le bouton Envoyer pour envoyer les deux valeurs un serveur.
Sur le serveur, les valeurs sont communiques l'instruction SQL de la page de rsultats, qui cre ensuite le jeu
d'enregistrements contenant uniquement les clients du secteur indiqu avec des revenus suprieurs au niveau donn.
Haut de la page
Cration de la page de recherche
Une page de recherche sur le Web se compose normalement de champs destins la saisie de critres particuliers. La page de recherche doit
contenir au minimum un formulaire HTML et un bouton Envoyer.
Pour ajouter un formulaire HTML une page de recherche, procdez comme suit :
1. Ouvrez la page de recherche ou crez une nouvelle page, puis choisissez Insertion > Formulaire > Formulaire.
Un formulaire vierge est cr sur la page. Il est parfois ncessaire d'activer les lments invisibles (Affichage > Assistances
visuelles > Elments invisibles) pour afficher les contours du formulaire, reprsents par de fines lignes rouges.
2. Insrez des objets de formulaire afin de permettre aux utilisateurs de taper leurs critres de recherche en choisissant la
commande Formulaire dans le menu Insertion.
Les objets de formulaire sont de formes diverses : champs de texte, menus, options et boutons radio. La quantit d'objets qu'il
771
est possible d'insrer dans un formulaire pour aider les utilisateurs mieux cerner leurs recherches est quasi illimite.
Toutefois, n'oubliez pas que, plus le nombre de critres sur la page de recherche est grand, plus votre instruction SQL sera
complexe.
3. Ajoutez un bouton Envoyer au formulaire (Insertion > Formulaire > Bouton).
4. (Facultatif) Pour changer l'tiquette du bouton Envoyer, slectionnez ce bouton, ouvrez l'inspecteur Proprits (Fentre >
Proprits) et entrez une nouvelle valeur dans la zone de texte Valeur.
A prsent, il convient d'informer le formulaire du lieu o envoyer les critres de recherche lorsque l'utilisateur clique sur le
bouton Envoyer.
5. Slectionnez le formulaire l'aide de la balise <form> dans le slecteur de balises situ en bas de la fentre de document,
comme le montre l'illustration suivante :
6. Dans la zone Action de l'inspecteur Proprits du formulaire, tapez le nom de fichier de la page de rsultats effectuant la
recherche proprement dite dans la base de donnes.
7. Dans le menu droulant Mthode, slectionnez l'une des options suivantes pour dterminer comment les donnes du
formulaire doivent tre envoyes au serveur :
GET envoie les donnes en les annexant l'URL, sous forme de chane de requte. Cependant, la taille des URL tant
limite 8192 caractres, vous ne pouvez pas utiliser la mthode GET avec les formulaires longs.
POST envoie les donnes dans le corps d'un message.
Default utilise la mthode par dfaut du navigateur (GET, gnralement).
La page de recherche est termine.
Haut de la page
Cration d'une page de rsultats de base
Lorsque l'utilisateur clique sur le bouton Rechercher du formulaire, les critres sont envoys une page de rsultats sur le serveur. La charge de
rcupration des enregistrements dans la base de donnes incombe non pas la page de recherche sur le navigateur, mais la page de rsultats
sur le serveur. Si la page de recherche envoie un critre unique au serveur, vous pouvez crer la page de rsultats sans requte ni aucune
variable SQL. Vous crez un jeu d'enregistrements lmentaire auquel vous ajoutez un filtre qui supprime tous les enregistrements non conformes
au critre envoys par la page de recherche.
Remarque : Si vous appliquez plusieurs conditions de recherche, utilisez la bote de dialogue Jeu d'enregistrements avance pour dfinir votre jeu
(consultez la section Cration d'une page de rsultats avance).
Cration du jeu d'enregistrements contenant les rsultats de la recherche

1. Ouvrez la page de rsultats dans la fentre de document.
Si vous n'avez pas encore cr de page de rsultats, crez une page dynamique vierge (Fichier > Nouveau > Page vierge).
2. Crez un jeu d'enregistrements ; pour ce faire, ouvrez le panneau Liaisons (Fentre > Liaisons), cliquez sur le bouton Plus (+)
et slectionnez Jeu d'enregistrements dans le menu droulant.
3. Assurez-vous que la bote de dialogue Jeu d'enregistrements simplifie s'affiche l'cran.
Si la bote de dialogue avance s'affiche la place, cliquez sur le bouton Simple pour ouvrir sa version simplifie.
772
4. Attribuez un nom au jeu d'enregistrements et slectionnez une connexion.

La connexion doit tre tablie avec une base de donnes contenant des informations susceptibles d'intresser l'utilisateur.
5. Dans le menu droulant Table, slectionnez le tableau consulter dans la base de donnes.
Remarque : Si la recherche implique un seul critre, vous ne pouvez consulter des enregistrements que dans un seul tableau.
Pour consulter plusieurs tableaux simultanment, utilisez la bote de dialogue Jeu d'enregistrements avance et dfinissez une
requte SQL.
6. Pour inclure uniquement certaines colonnes de la table dans le jeu d'enregistrements, cliquez sur Slectionnes, puis
slectionnez les colonnes souhaites dans la liste tout en maintenant la touche Ctrl (Windows) ou Commande (Macintosh)
enfonce.
Il est prfrable d'inclure uniquement les colonnes qui contiennent des informations que vous souhaitez afficher dans la page
de rsultats.
Pour le moment, ne fermez pas la bote de dialogue Jeu d'enregistrements. Vous l'utiliserez lors de l'tape suivante pour
rcuprer les critres envoys par la page de recherche et pour crer un filtre destin exclure tous les enregistrements non
conformes aux critres de recherche.
Cration du filtre du jeu d'enregistrements

1. Dans le premier menu droulant de la zone Filtre, slectionnez la colonne de la table de base de donnes dans laquelle
effectuer la recherche.
Par exemple, si la valeur envoye par la page de recherche est le nom d'une ville, slectionnez la colonne qui rpertorie des
noms de ville.
2. Dans le menu droulant situ ct du premier menu, slectionnez le signe gal (=) (en principe, la valeur par dfaut).
3. Dans le troisime menu droulant, choisissez Variable de formulaire ou Paramtre d'URL, selon que vous empruntez les
mthodes POST ou GET, respectivement.
La page de recherche utilise soit une variable de formulaire, soit un paramtre d'URL pour transmettre des informations la
page de rsultats.
4. Dans la quatrime zone, entrez le nom de l'objet de formulaire qui accepte le critre sur la page de recherche.
Le nom de l'objet fait aussi fonction de nom pour la variable de formulaire ou le paramtre d'URL. Pour obtenir ce nom,
revenez la page de recherche, cliquez sur l'objet de formulaire pour le slectionner et prenez note du nom qui s'affiche dans
Par exemple, vous dsirez crer un jeu d'enregistrements comprenant uniquement les raids et randonnes dans un pays
particulier. Supposons qu'une colonne du tableau se nomme TRIPLOCATION et que le formulaire HTML de votre page de
recherche utilise la mthode GET et contienne un objet de menu nomm Location qui affiche une liste de pays. L'exemple
suivant indique quoi peut ressembler votre section de filtre :
5. (Facultatif) Cliquez sur Tester, tapez une valeur test et cliquez sur OK pour vous connecter la base de donnes et crer une
instance du jeu d'enregistrements.
La valeur test est une simulation de la valeur qui sans cela aurait t renvoye de la page de recherche. Cliquez sur OK pour
fermer le jeu d'enregistrements test.
6. Si le jeu d'enregistrements vous convient, cliquez sur OK.
Un script ct serveur est insr sur votre page ; lorsqu'il est excut sur le serveur, il vrifie chaque enregistrement de la
table de base de donnes. Si la valeur du champ indiqu dans un enregistrement rpond aux conditions de filtrage,
l'enregistrement sera inclus dans le jeu d'enregistrements. Le script cre un jeu d'enregistrements qui ne contient que les
rsultats de la recherche.
L'tape suivante consiste afficher le jeu d'enregistrements sur la page de rsultats. Pour plus d'informations, consultez la
section Affichage des rsultats de la recherche.
Haut de la page
Cration d'une page de rsultats avance
Si la page de recherche envoie plusieurs critres au serveur, il vous faut formuler une requte SQL pour la page de rsultats et intgrer les
critres de recherche dans les variables SQL.
Remarque : Si vous n'appliquez qu'une seule condition de recherche, utilisez la bote de dialogue Jeu d'enregistrements simplifie pour dfinir
votre jeu (consultez la section Cration d'une page de rsultats de base).
773
1. Ouvrez la page de rsultats dans Dreamweaver, puis crez un jeu d'enregistrements ; pour ce faire, ouvrez le panneau
Liaisons (Fentre > Liaisons), cliquez sur le bouton Plus (+) et choisissez Jeu d'enregistrements dans le menu droulant.
2. Assurez-vous que la bote de dialogue Jeu d'enregistrements avance s'affiche l'cran.
La bote de dialogue avance comporte une zone de texte qui permet la saisie d'instructions SQL. Si la bote de dialogue
simplifie s'affiche la place, cliquez sur le bouton Avanc pour ouvrir sa version avance.
3. Attribuez un nom au jeu d'enregistrements et slectionnez une connexion.
La connexion doit tre tablie avec une base de donnes contenant des informations susceptibles d'intresser l'utilisateur.
4. Saisissez l'instruction Select dans la zone de texte SQL.
Assurez-vous que l'instruction comporte une clause WHERE avec des variables pour stocker les critres de recherche. Dans
l'exemple suivant, les variables sont varLastName et varDept :
1
2
3
SELECT EMPLOYEEID, FIRSTNAME, LASTNAME, DEPARTMENT, EXTENSION FROM EMPLOYEE

WHERE LASTNAME LIKE 'varLastName'
AND DEPARTMENT LIKE 'varDept'
Pour limiter la frappe, utilisez l'arborescence des lments de la base de donnes situe dans la partie infrieure de la bote
de dialogue Jeu d'enregistrements avance. Pour obtenir des instructions, consultez la section Rdaction d'instructions SQL
en vue de la dfinition d'un jeu d'enregistrements avanc.
Pour plus d'informations sur la syntaxe SQL, consultez le guide Initiation SQL www.adobe.com/go/learn_dw_sqlprimer.
5. Donnez aux variables SQL les valeurs des critres de recherche. Pour ce faire, cliquez sur le bouton Plus (+) dans la zone
Variables, puis tapez le nom de la variable, sa valeur par dfaut (valeur que doit prendre la variable si aucune valeur
d'excution n'est renvoye) et sa valeur d'excution (gnralement un objet de serveur renfermant une valeur envoye par un
navigateur, telle qu'une variable de demande).
Dans l'exemple ASP suivant, le formulaire HTML sur la page de recherche utilise la mthode GET et contient deux champs
de texte, LastName et Department .
Dans un environnement ColdFusion, les valeurs d'excution seraient #LastName# et #Department#. Dans PHP, les valeurs
d'excution seraient $_REQUEST["LastName"] et $_REQUEST["Department"].
6. (Facultatif) Cliquez sur Tester pour crer une instance du jeu d'enregistrements l'aide des valeurs de variable par dfaut.
Les valeurs par dfaut sont une simulation des valeurs qui sans cela auraient t renvoyes de la page de recherche. Cliquez
sur OK pour fermer le jeu d'enregistrements test.
7. Si le jeu d'enregistrements vous convient, cliquez sur OK.
La requte SQL est insre dans votre page.
L'tape suivante consiste afficher le jeu d'enregistrements sur la page de rsultats.
Haut de la page
Affichage des rsultats de la recherche
Aprs avoir cr un jeu d'enregistrements pour y insrer les rsultats de la recherche, vous devez afficher les informations sur la page de
rsultats. L'affichage des enregistrements est une opration simple : il suffit de faire glisser des colonnes individuelles du panneau Liaisons vers la
page de rsultats. Ajoutez au choix des liens de navigation pour aller et venir dans le jeu d'enregistrements, ou crez une rgion rpte si vous
prfrez afficher plusieurs enregistrements sur la page. Vous pouvez galement insrer des liens sur une page d'informations dtailles.
Pour plus d'informations sur les mthodes d'affichage du contenu dynamique sur une page autres que l'affichage de rsultats dans un tableau
dynamique, consultez la section Affichage d'enregistrements d'une base de donnes.
1. Placez le point d'insertion l'endroit o vous souhaitez que le tableau dynamique apparaisse dans la page de rsultats, puis
slectionnez Insertion > Objets de donnes > Donnes dynamiques > Tableau dynamique.
2. Dans la bote de dialogue Tableau dynamique, slectionnez le jeu d'enregistrements que vous avez dfini afin de prsenter
les rsultats de recherche.
3. Cliquez sur OK. Un tableau dynamique contenant les rsultats de la recherche est insr sur la page de rsultats.
774
Cration d'une page de dtails pour une page de rsultats
Haut de la page
Vos pages de recherche et de rsultats peuvent inclure une page comportant des informations dtailles propos d'enregistrements spcifiques
rpertoris dans la page de rsultats. Dans ce cas, la page de rsultats fait galement fonction de page principale dans un ensemble de pages
principale/dtails.
Cration d'un lien qui ouvre une page associe (ASP)
Haut de la page
Vous pouvez crer un lien qui ouvre une page associe et transmet cette dernire les paramtres existants. Vous ne pouvez recourir au
comportement de serveur que si vous utilisez le modle de serveur ASP.
Avant d'ajouter un comportement de serveur Aller la page associe une page, assurez-vous que la page reoit les paramtres de formulaire
ou d'URL d'une autre page. Le rle du comportement de serveur consiste transmettre ces paramtres une troisime page. Vous pouvez, par
exemple, communiquer les critres de recherche reus par une page de rsultats une autre page, de manire ce que l'utilisateur n'ait pas les
taper plusieurs fois.
Sur la page, vous pouvez galement slectionner du texte ou une image devant assurer la fonction de lien ou placer le pointeur sans ne rien
slectionner pour que le texte du lien soit insr.
1. Dans la zone de texte Aller la page associe, cliquez sur Parcourir et localisez le fichier de la page associe.
Si la page active s'envoie des donnes elle-mme, tapez son nom de fichier.
2. Si les critres communiquer ont t directement reus d'un formulaire HTML via la mthode GET ou qu'ils figurent dans
l'URL de la page, choisissez l'option Paramtres d'URL.
3. Si les critres communiquer ont t directement reus d'un formulaire HTML via la mthode POST, choisissez l'option
Paramtres de formulaire.
4. Cliquez sur OK.
Lorsque vous cliquez sur le nouveau lien, la page transmet les critres la page associe par le biais d'une chane de
requte.
Voir aussi
775
Cration dune page dinsertion denregistrements

A propos de la cration de pages dinsertion denregistrements
Cration dune page dinsertion lment par lment
Cration de la page dinsertion en une seule opration
Haut de la page
A propos de la cration de pages dinsertion denregistrements

Votre application peut contenir une page permettant lutilisateur dinsrer de nouveaux enregistrements dans une base de donnes.
Une page dinsertion se compose de deux lments :
un formulaire HTML permettant aux utilisateurs de saisir des donnes ;

un comportement de serveur Insrer lenregistrement pour mettre jour la base de donnes.
Lorsque lutilisateur clique sur le bouton Envoyer dun formulaire, le comportement de serveur insre des enregistrements dans
une table de base de donnes.
Vous pouvez inclure ces lments dans la page en une seule opration laide de lobjet de donnes Formulaire dinsertion
denregistrement ou les insrer individuellement laide des outils de formulaire de Dreamweaver et du panneau
Comportements de serveur.
Remarque : la page dinsertion ne peut pas contenir plus dun comportement de serveur de modification denregistrement la fois. Par exemple,
vous ne pouvez pas y inclure galement un comportement de serveur Mettre jour lenregistrement ou Supprimer lenregistrement.
Haut de la page
Cration dune page dinsertion lment par lment

Vous pouvez galement crer une page dinsertion laide des outils de formulaires et des comportements de serveur.
Ajout dun formulaire HTML dans une page dinsertion

1. Crez une page dynamique (Fichier > Nouveau > Page vierge) et effectuez-en la mise en forme laide des outils de cration
de Dreamweaver.
2. Pour ajouter le formulaire HTML, placez le point dinsertion lendroit o le formulaire doit apparatre, puis slectionnez
Insertion > Formulaire > Formulaire.
Un formulaire vierge est cr sur la page. Il est parfois ncessaire dactiver les lments invisibles (Affichage > Assistances
3. Pour nommer le formulaire HTML, commencez par le slectionner en cliquant sur la balise <form> au bas de la fentre de
document, ouvrez linspecteur Proprits (Fentre > Proprits), puis entrez un nom dans la zone Nom du formulaire.
Vous navez pas besoin de dfinir lattribut action ou method du formulaire pour lui indiquer o et comment envoyer les
donnes denregistrement lorsque lutilisateur clique sur le bouton Envoyer. Le comportement de serveur Insrer un
enregistrement dfinit automatiquement ces attributs.
4. Insrez un objet de formulaire tel quun champ de texte (Insertion > Formulaire > Champ de texte) pour chaque colonne de la
table de base de donnes dans laquelle insrer des enregistrements.
776
Les objets de formulaire sont destins la saisie de donnes. On utilise souvent des champs de texte dans ce but, mais rien
ne vous empche dutiliser des menus, des options et des boutons radio.
Vous pouvez modifier ltiquette du bouton Envoyer ; pour ce faire, slectionnez ce bouton, ouvrez linspecteur Proprits
(Fentre > Proprits) et entrez une nouvelle valeur dans la zone Etiquette.
Ajout dun comportement de serveur destin linsertion denregistrements dans une base de donnes
(ColdFusion)
choisissez Insrer lenregistrement dans le menu droulant.
2. Dans le menu droulant Envoyer les valeurs partir de, slectionnez un formulaire.
3. Dans le menu droulant Source de donnes, slectionnez une connexion la base de donnes.
4. Saisissez votre nom dutilisateur et votre mot de passe.
5. Dans le menu droulant Insrer dans la table, slectionnez la table de base de donnes dans laquelle insrer
lenregistrement.
6. Indiquez la colonne de base de donnes dans laquelle vous souhaitez insrer lenregistrement. Dans le menu droulant
Valeur, slectionnez lobjet de formulaire devant insrer lenregistrement. Dans le menu droulant Envoyer en tant que,
slectionnez ensuite le type de donnes de lobjet de formulaire.
Le type de donnes est celui quattend la colonne de la table de base de donnes (texte, numrique, valeurs doption
boolennes).
Rptez cette procdure pour chaque objet du formulaire.
7. Dans la zone Aprs linsertion, aller , indiquez la page ouvrir aprs insertion de lenregistrement dans la table ou cliquez
sur le bouton Parcourir pour naviguer jusquau fichier.
8. Cliquez sur OK.
Dreamweaver ajoute la page un comportement de serveur qui permet aux utilisateurs dinsrer des enregistrements dans
une table de base de donnes. Pour ce faire, il leur suffit de complter le formulaire HTML et de cliquer sur le bouton
Envoyer.
(ASP)
2. Dans le menu droulant Connexion, slectionnez une connexion la base de donnes.
Cliquez sur le bouton Dfinir si vous devez dfinir une connexion.
3. Dans le menu droulant Insrer dans la table, slectionnez la table de base de donnes dans laquelle vous souhaitez insrer
lenregistrement.
5. Dans le menu droulant Obtenir les valeurs de, slectionnez le formulaire HTML utiliser pour la saisie des donnes.
Dreamweaver slectionne automatiquement le premier formulaire apparaissant sur votre page.
boolennes).
777
7. Cliquez sur OK.

Envoyer.
Pour modifier le comportement de serveur, ouvrez le panneau Comportements de serveur (Fentre > Comportements de
serveur) et double-cliquez sur le comportement Insrer un enregistrement.
(PHP)
4. Dans le menu droulant Insrer un tableau, slectionnez la table de base de donnes dans laquelle vous souhaitez insrer
lenregistrement.
boolennes).
7. Cliquez sur OK.
Envoyer.
Haut de la page
Cration de la page dinsertion en une seule opration

1. Ouvrez la page en mode Cration, puis slectionnez Insertion > Objets de donnes > Insrer un enregistrement > Assistant
de formulaire dinsertion denregistrement.
2. Dans le menu droulant Connexion, slectionnez une connexion la base de donnes. Cliquez sur le bouton Dfinir si vous
devez dfinir une connexion.
3. Dans le menu droulant Insrer dans la table, slectionnez la table de base de donnes dans laquelle vous souhaitez insrer
lenregistrement.
4. Si vous utilisez ColdFusion, saisissez le nom dutilisateur et le mot de passe.
6. Dans la zone Champs de formulaire, spcifiez les objets de formulaire que vous souhaitez inclure dans le formulaire HTML de
la page dinsertion, ainsi que les colonnes de la base de donnes que chaque objet de formulaire devra mettre jour.
Par dfaut, Dreamweaver cre un objet de formulaire pour chaque colonne de la table de base de donnes. Si votre base de
donnes gnre automatiquement un ID de cl unique pour chaque enregistrement cr, supprimez lobjet de formulaire
correspondant la colonne cl ; pour ce faire, slectionnez lobjet dans la liste et cliquez sur le bouton Moins (-). Ainsi,
lutilisateur du formulaire ne pourra pas entrer une valeur dID qui existe dj.
Vous pouvez galement modifier lordre des objets de formulaire dans le formulaire HTML ; il vous suffit de slectionner un
objet dans la liste et de le dplacer dans cette dernire en cliquant sur la flche vers le haut ou vers le bas situe sur la droite
de la bote de dialogue.
7. Dfinissez la faon dont chaque champ de saisie de donnes devra tre affich dans le formulaire HTML en cliquant sur une
778
ligne du tableau Champs de formulaire et en entrant les informations suivantes dans les zones affiches sous le tableau :
Dans la zone Etiquette, saisissez la description afficher ct du champ de saisie de donnes. Par dfaut,
Dreamweaver affiche dans ce champ le nom de la colonne de la table.
Dans le menu droulant Afficher comme, slectionnez lobjet de formulaire utiliser comme champ de saisie de donnes.
Vous avez le choix entre Champ de texte, Zone de texte, Menu, Case cocher, Groupe de boutons radio et Texte. Pour
les entres en lecture seule, choisissez Texte. Vous pouvez galement choisir Champ Mot de passe, Champ de fichier et
Champ masqu.
Remarque : les champs masqus sont insrs la fin du formulaire.
Dans le menu droulant Envoyer en tant que, slectionnez le format de donnes accept par la table de base de
donnes. Par exemple, si les donnes numriques sont les seules admises, choisissez Numrique.
Dfinissez les proprits de lobjet de formulaire. Vous avez le choix entre plusieurs possibilits, en fonction de lobjet de
formulaire slectionn comme champ de saisie de donnes. Pour les champs de texte, les zones de texte et le texte, vous
pouvez entrer une valeur initiale. Pour les menus et les groupes de boutons radio, ouvrez une autre bote de dialogue afin
de dfinir des proprits. Pour les options, slectionnez loption Coche ou Non coche.
8. Cliquez sur OK.
Dreamweaver insre dans la page un formulaire HTML et un comportement de serveur Insrer lenregistrement. Les objets de
formulaire sont disposs sur la page sous forme dun tableau simple, que vous pouvez ensuite personnaliser laide des
outils de conception de page de Dreamweaver (assurez-vous quaucun objet de formulaire ne dpasse les limites du
formulaire).
serveur) et double-cliquez sur le comportement Insrer un enregistrement.
779
Cration dune page de mise jour denregistrement

A propos des pages de mise jour denregistrements
Recherche de lenregistrement mettre jour
Cration de liens vers la page de mise jour
Rcupration de lenregistrement mettre jour
Finalisation de la page dactualisation lment par lment
Finalisation de la page de mise jour en une seule opration
Options des proprits dlment de formulaire
Haut de la page
A propos des pages de mise jour denregistrements

Votre application peut contenir un ensemble de pages permettant lutilisateur de mettre jour les enregistrements existants dune table de base
de donnes. Lensemble de pages se compose normalement dune page de recherche, dune page de rsultats et dune page de mise jour. La
page de recherche et la page de rsultats permettent aux utilisateurs de rcuprer un enregistrement et la page de mise jour de le modifier.
Haut de la page
Recherche de lenregistrement mettre jour

Lorsquun utilisateur veut mettre jour un enregistrement, il doit dabord localiser celui-ci dans la base de donnes. Vous devez donc crer une
page de recherche et de rsultats qui fonctionnera en tandem avec la page de mise jour. Lutilisateur entre des critres de recherche dans la
page de recherche et slectionne lenregistrement dans la page de rsultats. Lorsquil clique sur lenregistrement sur la page de rsultats, la page
de mise jour souvre et affiche lenregistrement dans un formulaire HTML.
Haut de la page
Cration de liens vers la page de mise jour

Aprs avoir cr les pages de recherche et de rsultats, vous devez ajouter des liens la page de rsultats afin douvrir la page de mise jour.
Vous devez ensuite modifier les liens de manire transmettre les ID des enregistrements slectionns par lutilisateur. La page de mise jour
utilise cet ID pour rechercher lenregistrement demand dans la base de donnes et lafficher.
Le processus destin ouvrir la page de mise jour et la transmission dun ID denregistrement est identique celui douverture dune page de
dtails et la transmission dun ID denregistrement. Pour plus dinformations, voir Cration de liens vers la page de dtails.
Haut de la page
Rcupration de lenregistrement mettre jour

Lorsque la page de rsultats a transmis un ID denregistrement la page de mise jour, de manire identifier lenregistrement mettre jour, la
page de mise jour doit lire le paramtre, rcuprer lenregistrement dans la table de base de donnes, puis le stocker temporairement dans un
jeu denregistrements.
1. Crez une page dans Dreamweaver et enregistrez-la.
Cette page est alors utilise comme page de mise jour.
2. Dans le panneau Liaisons (Fentre > Liaisons), cliquez sur le bouton Plus (+) et slectionnez Jeu denregistrements.
780
Si la bote de dialogue avance saffiche, cliquez sur Simple. La bote de dialogue avance comporte une zone de texte qui
permet la saisie dinstructions SQL, contrairement la bote de dialogue simplifie.
3. Nommez le jeu denregistrements et indiquez o se trouvent les donnes mettre jour laide des menus droulants
Connexion et Table.
4. Cliquez sur loption Slectionnes et choisissez une colonne cl (gnralement la colonne ID de lenregistrement), ainsi que
les colonnes contenant les donnes devant tre mises jour.
5. Configurez la zone Filtre de manire ce que la valeur de votre colonne cl soit gale celle du paramtre dURL
correspondant transmis par la page de rsultats.
Ce type de filtre cre un jeu denregistrements ne contenant que lenregistrement spcifi par la page de rsultats. Par
exemple, si votre colonne cl contient des informations dID denregistrement et sappelle PRID et si la page principale
transmet les informations dID denregistrement correspondantes dans le paramtre dURL appel id, votre zone Filtre doit
avoir laspect suivant :
6. Cliquez sur OK.

Lorsque lutilisateur slectionne un enregistrement sur la page de rsultats, la page de mise jour gnre un jeu
denregistrements contenant uniquement lenregistrement slectionn.
Haut de la page
Finalisation de la page dactualisation lment par lment

Une page de mise jour est constitue de trois lments :
un jeu denregistrements filtr permettant de rcuprer lenregistrement partir dune table de base de donnes ;
un formulaire HTML permettant aux utilisateurs de modifier les donnes de lenregistrement ;
un comportement de serveur Mettre jour lenregistrement permettant de mettre jour la base de donnes.
Vous pouvez insrer sparment les deux derniers lments de base dune page de mise jour laide des outils de
formulaire et du panneau Comportements de serveur.
Ajout dun formulaire HTML dans une page dactualisation

1. Crez une page (Fichier > Nouveau > Page vierge). Cette page devient la page de mise jour.
2. Mettez la page en forme laide des outils de conception de Dreamweaver.
3. Pour ajouter le formulaire HTML, placez le point dinsertion lendroit o le formulaire doit apparatre, puis slectionnez
Insertion > Formulaire > Formulaire.
Un formulaire vierge est cr sur la page. Il est parfois ncessaire dactiver les lments invisibles (Affichage > Assistances
document, ouvrez linspecteur Proprits (Fentre > Proprits), puis entrez un nom dans la zone Nom du formulaire.
Vous navez pas besoin de dfinir lattribut action ou method du formulaire pour lui indiquer o et comment envoyer les
donnes denregistrement lorsque lutilisateur clique sur le bouton Envoyer. Le comportement de serveur Mettre jour un
5. Insrez un objet de formulaire tel quun champ de texte (Insertion > Formulaire > Champ de texte) pour chaque colonne
mettre jour dans la table de base de donnes.
Les objets de formulaire sont destins la saisie de donnes. On utilise souvent des champs de texte dans ce but, mais rien
ne vous empche dutiliser des menus, des options et des boutons radio.
A chaque objet de formulaire doit correspondre une colonne dans le jeu denregistrements dfini prcdemment. La seule
exception est la colonne cl unique, qui ne doit pas avoir dobjet de formulaire correspondant.
781

Vous pouvez modifier ltiquette du bouton Envoyer ; pour ce faire, slectionnez ce bouton, ouvrez linspecteur Proprits
Affichage de lenregistrement dans le formulaire

1. Assurez-vous davoir au pralable dfini un jeu denregistrements pour stocker lenregistrement mettre jour.
Voir Rcupration de lenregistrement mettre jour.
2. Liez chaque objet du formulaire des donnes du jeu denregistrements, comme dcrit dans les sections suivantes :
Activation dynamique dune case cocher HTML
Activation dynamique dun bouton radio HTML
Insertion ou modification dun menu de formulaire HTML dynamique
Ajout dun comportement de serveur destin la mise jour de la base de donnes

choisissez Mettre jour lenregistrement dans le menu droulant.
La bote de dialogue Mettre jour lenregistrement saffiche.
3. Dans le menu droulant Source de donnes ou Connexion, slectionnez une connexion la base de donnes.
4. Tapez votre nom dutilisateur et votre mot de passe, le cas chant.
5. Dans le menu droulant Mettre jour la table, slectionnez la table de base de donnes qui contient lenregistrement mettre
jour.
6. (ColdFusion, PHP) Indiquez la colonne de base de donnes mettre jour. Dans le menu droulant Valeur, slectionnez
lobjet de formulaire devant mettre jour la colonne. Dans le menu droulant Envoyer en tant que, slectionnez le type de
donnes de lobjet de formulaire, puis choisissez Cl primaire si vous souhaitez dfinir cette colonne comme tant la cl
primaire.
boolennes).
7. (ASP) Dans le menu droulant Slectionner un enregistrement dans, indiquez le jeu contenant lenregistrement affich dans le
formulaire HTML. Dans le menu droulant Colonne cl unique, slectionnez une colonne cl (gnralement le champ dID
de lenregistrement) devant identifier lenregistrement dans la table de la base de donnes. Si la valeur est un nombre,
slectionnez loption Numrique. Une colonne cl naccepte gnralement que des valeurs numriques, mais dans certains
cas, elle accepte galement du texte.
8. Dans la zone Aprs la mise jour, aller ou En cas de russite, aller , indiquez la page ouvrir aprs mise jour de
lenregistrement dans la table ou cliquez sur le bouton Parcourir pour naviguer jusquau fichier.
9. (ASP) Indiquez la colonne de base de donnes mettre jour. Dans le menu droulant Valeur, slectionnez lobjet de
formulaire devant mettre jour la colonne. Dans le menu droulant Envoyer en tant que, slectionnez ensuite le type de
donnes de lobjet de formulaire. Le type de donnes est celui quattend la colonne de la table de base de donnes (texte,
numrique, valeurs doption boolennes). Rptez cette procdure pour chaque objet du formulaire.
10. Cliquez sur OK.
Dreamweaver ajoute la page un comportement de serveur qui permet aux utilisateurs de mettre jour les enregistrements
dune table de base de donnes ; pour ce faire, il leur suffit de modifier les informations affiches dans le formulaire HTML et
de cliquer sur le bouton Envoyer.
782
serveur) et double-cliquez sur le comportement Mettre jour lenregistrement.
Haut de la page
Finalisation de la page de mise jour en une seule opration

Une page de mise jour est constitue de trois lments :
un jeu denregistrements filtr permettant de rcuprer lenregistrement partir dune table de base de donnes ;
un formulaire HTML permettant aux utilisateurs de modifier les donnes de lenregistrement ;
un comportement de serveur Mettre jour lenregistrement permettant de mettre jour la base de donnes.
Vous pouvez insrer les deux derniers lments dune page de mise jour en une seule tape laide de lobjet de donnes Formulaire de mise
jour des enregistrements. Cet objet insre dans la page un formulaire HTML et un comportement de serveur Mettre jour lenregistrement.
Pour que vous puissiez utiliser lobjet de donnes, il faut que votre application Web soit capable didentifier lenregistrement mettre jour et que
votre page de mise jour soit en mesure de le rcuprer.
Aprs avoir insr les lments sur la page au moyen de lobjet de donnes, vous pouvez utiliser les outils de conception de Dreamweaver pour
personnaliser le formulaire ou le panneau Comportements de serveur pour modifier le comportement de serveur Mettre jour lenregistrement.
Remarque : la page de mise jour ne peut pas contenir plus dun comportement de serveur de modification denregistrement la fois. Par
exemple, vous ne pouvez pas y inclure galement un comportement de serveur Insrer un enregistrement ou Supprimer lenregistrement.
1. Ouvrez la page en mode Cration, puis choisissez Insertion > Objets de donnes > Mettre jour lenregistrement > Assistant
de formulaire de mise jour des enregistrements.
La bote de dialogue Formulaire de mise jour des enregistrements saffiche.
3. Dans le menu droulant Table mettre jour, slectionnez la table de base de donnes qui contient lenregistrement mettre
jour.
4. Dans le menu droulant Slectionner un enregistrement dans, indiquez le jeu contenant lenregistrement affich dans le
formulaire HTML.
5. Dans le menu droulant Colonne cl unique, slectionnez une colonne cl (gnralement le champ dID de
lenregistrement) devant identifier lenregistrement dans la table de la base de donnes.
Si la valeur est un nombre, slectionnez loption Numrique. Une colonne cl naccepte gnralement que des valeurs
numriques, mais dans certains cas, elle accepte galement du texte.
6. Dans la zone Aprs la mise jour, aller , indiquez la page ouvrir aprs la mise jour de lenregistrement dans la table.
7. Dans la zone Champs du formulaire, indiquez les colonnes de la table de base de donnes que chaque objet de formulaire
doit mettre jour.
Par dfaut, Dreamweaver cre un objet de formulaire pour chaque colonne de la table de base de donnes. Si votre base de
donnes gnre automatiquement un ID de cl unique pour chaque enregistrement cr, supprimez lobjet de formulaire
correspondant la colonne cl ; pour ce faire, slectionnez lobjet dans la liste et cliquez sur le bouton Moins (-). Ainsi,
lutilisateur du formulaire ne pourra pas entrer une valeur dID qui existe dj.
Vous pouvez galement modifier lordre des objets de formulaire dans le formulaire HTML ; il vous suffit de slectionner un
objet dans la liste et de le dplacer dans cette dernire en cliquant sur la flche vers le haut ou vers le bas situe sur la droite
de la bote de dialogue.
8. Dfinissez la faon dont chaque champ de saisie de donnes doit safficher sur le formulaire HTML. Pour ce faire, cliquez sur
une ligne du tableau Champs de formulaire et indiquez les informations suivantes dans les zones affiches sous la table :
Dans la zone Etiquette, saisissez la description afficher ct du champ de saisie de donnes. Par dfaut,
Dreamweaver affiche dans ce champ le nom de la colonne de la table.
Dans le menu droulant Afficher comme, slectionnez lobjet de formulaire utiliser comme champ de saisie de donnes.
Vous avez le choix entre Champ de texte, Zone de texte, Menu, Case cocher, Groupe de boutons radio et Texte. Pour
les entres en lecture seule, choisissez Texte. Vous pouvez galement choisir Champ Mot de passe, Champ de fichier et
783
Champ masqu.
Remarque : les champs masqus sont insrs la fin du formulaire.
Dans le menu droulant Envoyer en tant que, slectionnez le format de donnes qui sera accept par cette colonne de la
table de base de donnes. Par exemple, si les donnes numriques sont les seules admises, choisissez Numrique.
Dfinissez les proprits de lobjet de formulaire. Vous avez le choix entre plusieurs possibilits, en fonction de lobjet de
formulaire slectionn comme champ de saisie de donnes. Pour les champs de texte, les zones de texte et le texte, vous
pouvez entrer une valeur initiale. Pour les menus et les groupes de boutons radio, ouvrez une autre bote de dialogue afin
de dfinir des proprits. Pour les options, slectionnez loption Coche ou Non coche.
9. Dfinissez les proprits des autres objets de formulaire en slectionnant une autre ligne Champs du formulaire et en
saisissant une tiquette, une valeur Afficher en tant que et une valeur Envoyer en tant que.
Pour les menus et les groupes de boutons radio, ouvrez une autre bote de dialogue pour dfinir les proprits. Pour les
options, dfinissez une comparaison entre la valeur actuelle de lenregistrement pour loption et une valeur donne afin de
dterminer si loption doit tre active ou dsactive lorsque lenregistrement est affich.
10. Cliquez sur OK.
Dreamweaver insre dans la page un formulaire HTML et un comportement de serveur Mettre jour lenregistrement.
Lobjet de donnes insre dans la page un formulaire HTML et un comportement de serveur Mettre jour lenregistrement.
Les objets de formulaire sont disposs sur la page sous forme dun tableau simple, que vous pouvez ensuite personnaliser
laide des outils de conception de page de Dreamweaver (assurez-vous quaucun objet de formulaire ne dpasse les limites
du formulaire).
serveur) et double-cliquez sur le comportement Mettre jour lenregistrement.
Haut de la page
Options des proprits dlment de formulaire

La bote de dialogue Proprits dlment de formulaire a pour fonction de dfinir les options des lments de formulaire figurant sur des pages
qui permettent aux utilisateurs de mettre jour les enregistrements dune base de donnes.
1. Choisissez Manuellement ou Depuis la base de donnes selon la manire dont vous envisagez de crer llment de
formulaire.
2. Cliquez sur le bouton Plus (+) pour ajouter un lment.
3. Saisissez ltiquette et la valeur de llment.
4. Pour quun lment particulier soit slectionn louverture de la page dans un navigateur ou lorsquun enregistrement
saffiche dans le formulaire, indiquez une valeur gale celle de llment dans la zone Slectionner une valeur gale .
Pour choisir une valeur statique ou dynamique, cliquez sur licne reprsentant un clair, puis slectionnez une valeur
dynamique dans la liste des sources de donnes. Dans les deux cas, la valeur indique doit correspondre lune des valeurs
de llment.
784
Cration d'une page de suppression d'enregistrement

A propos des pages de suppression d'enregistrements
Recherche de l'enregistrement supprimer
Cration de liens vers une page de suppression
Cration de la page de suppression
Insertion de la logique permettant de supprimer l'enregistrement
A propos des pages de suppression d'enregistrements
Haut de la page
Votre application peut comporter un ensemble de pages permettant l'utilisateur de supprimer des enregistrements d'une base de donnes.
L'ensemble de pages se compose normalement d'une page de recherche, d'une page de rsultats et d'une page de suppression. Ce type de page
est gnralement une page d'informations dtailles fonctionnant en tandem avec une page de rsultats. Les pages de recherche et de rsultats
permettent aux utilisateurs de rcuprer l'enregistrement et la page de suppression de le confirmer puis de le supprimer.
Aprs avoir cr les pages de recherche et de rsultats, vous devez ajouter des liens la page de rsultats, de manire ouvrir la page de
suppression, puis crer une page de suppression qui affiche les enregistrements et un bouton Envoyer.
Haut de la page
Recherche de l'enregistrement supprimer
Lorsqu'un utilisateur veut supprimer un enregistrement, il doit d'abord localiser celui-ci dans la base de donnes. Vous devez donc crer une page
de recherche et de rsultats qui fonctionnera en tandem avec la page de suppression. L'utilisateur entre des critres de recherche dans la page de
recherche et slectionne l'enregistrement dans la page de rsultats. Lorsque l'utilisateur clique sur l'enregistrement, la page de suppression
s'ouvre et l'enregistrement s'affiche dans un formulaire HTML sur cette page.
Haut de la page
Cration de liens vers une page de suppression
Aprs avoir cr les pages de recherche et de rsultats, vous devez ajouter des liens la page de rsultats afin d'ouvrir la page de suppression.
Vous devez ensuite modifier les liens de manire transmettre les ID des enregistrements que l'utilisateur veut supprimer. La page de
suppression utilise cet ID pour rechercher l'enregistrement et l'afficher.
Cration manuelle de liens

1. Dans la page de rsultats, crez une colonne dans le tableau utilis pour afficher les enregistrements. Pour ce faire, cliquez
l'intrieur de la dernire colonne du tableau et slectionnez Modifier > Tableau > Insrer des lignes ou des colonnes.
2. Activez l'option Colonnes et l'option Aprs la colonne courante, puis cliquez sur OK.
Une colonne est ajoute au tableau.
3. Dans la colonne que vous venez de crer, entrez la chane Delete dans la ligne contenant les espaces rservs pour le
contenu dynamique. Vous devez entrer la chane dans la rgion rpte onglets.
Vous pouvez galement insrer une image comprenant un mot ou un symbole voquant une suppression.
4. Slectionnez la chane Delete afin de lui appliquer un lien.
5. Dans l'inspecteur Proprits, entrez le nom de la page de suppression dans la zone Lien. Vous pouvez entrer le nom de
fichier de votre choix.
Une fois que vous avez cliqu en dehors de la zone Lien, la chane Delete apparat lie dans le tableau. Si vous activez le
mode En direct, vous pouvez observer que le lien s'applique au mme texte dans chaque ligne du tableau.
6. Slectionnez le lien de suppression dans la page de rsultats.
7. (ColdFusion) Dans la zone Lien de l'inspecteur Proprits, ajoutez la chane suivante la fin de l'URL :
1
?recordID=#recordsetName.fieldName#
785
paramtre d'URL : vous devrez en effet l'utiliser ultrieurement au niveau de la page de suppression.
expression ColdFusion qui renvoie un ID d'enregistrement du jeu d'enregistrements. Un ID diffrent est gnr pour chaque
ligne du tableau dynamique. Dans l'expression ColdFusion, remplacez recordsetName par le nom de votre jeu
d'enregistrements et fieldName par le nom du champ de votre jeu d'enregistrements qui permet d'identifier chaque
enregistrement de faon univoque. Dans la plupart des cas, le champ correspond un numro d'ID d'enregistrement. Dans
l'exemple ci-dessous, le champ correspond des codes de location uniques :
1
confirmDelete.cfm?recordID=#rsLocations.CODE#
1
confirmDelete.cfm?recordID=CBR
8. (PHP) Dans le champ Lien de l'inspecteur Proprits, ajoutez la chane suivante la fin de l'URL :
1
?recordID=<?php echo $row_recordsetName['fieldName']; ?>
expression PHP qui renvoie un ID d'enregistrement du jeu d'enregistrements. Un ID diffrent est gnr pour chaque ligne du
tableau dynamique. Dans l'expression PHP, remplacez recordsetName par le nom de votre jeu d'enregistrements et fieldName
par le nom du champ de votre jeu d'enregistrements qui permet d'identifier chaque enregistrement de faon univoque. Dans la
plupart des cas, le champ correspond un numro d'ID d'enregistrement. Dans l'exemple ci-dessous, le champ correspond
des codes de location uniques :
1
confirmDelete.php?recordID=<?php echo $row_rsLocations['CODE']; ?>
1
confirmDelete.php?recordID=CBR
9. (ASP) Dans la zone Lien de l'inspecteur Proprits, ajoutez la chane suivante la fin de l'URL :
1
?recordID=<%=(recordsetName.Fields.Item("fieldName").Value)%>
expression ASP qui renvoie un ID d'enregistrement partir du jeu d'enregistrements. Un ID diffrent est gnr pour chaque
ligne du tableau dynamique. Dans l'expression ASP, remplacez recordsetName par le nom de votre jeu d'enregistrements et
fieldName par le nom du champ de votre jeu d'enregistrements qui permet d'identifier chaque enregistrement de faon
univoque. Dans la plupart des cas, le champ correspond un numro d'ID d'enregistrement. Dans l'exemple ci-dessous, le
champ correspond des codes de location uniques :
786
confirmDelete.asp?recordID=<%=(rsLocations.Fields.Item("CODE").Value)%>
1
confirmDelete.asp?recordID=CBR
Cration visuelle des liens (ASP uniquement)

1. Dans la page de rsultats, crez une colonne dans le tableau utilis pour afficher les enregistrements. Pour ce faire, cliquez
l'intrieur de la dernire colonne du tableau et slectionnez Modifier > Tableau > Insrer des lignes ou des colonnes.
2. Activez l'option Colonnes et l'option Aprs la colonne courante, puis cliquez sur OK.
Une colonne est ajoute au tableau.
3. Dans la colonne que vous venez de crer, entrez la chane Delete dans la ligne contenant les espaces rservs pour le
contenu dynamique. Vous devez entrer la chane dans la rgion rpte onglets.
Vous pouvez galement insrer une image comprenant un mot ou un symbole voquant une suppression.
4. Slectionnez la chane Delete afin de lui appliquer un lien.
choisissez Aller la page de dtails dans le menu droulant.
6. Dans la bote de dialogue Page de dtails, cliquez sur Parcourir et recherchez la page supprimer.
7. Dans la zone Passer le paramtre d'URL, entrez le nom de votre paramtre, par exemple recordID.
Vous pouvez utiliser le nom de votre choix ; veillez toutefois en prendre note, car vous devrez l'employer plus loin, dans la
page de suppression.
8. Indiquez la valeur transmettre la page de suppression en slectionnant un jeu d'enregistrements et une colonne dans les
menus droulants Jeu d'enregistrements et Colonne. Cette valeur, telle que l'ID de cl unique, est gnralement propre
l'enregistrement.
9. Activez l'option Paramtres d'URL.
10. Cliquez sur OK.
Un lien spcial entoure le texte slectionn. Lorsque l'utilisateur clique sur le lien, le comportement de serveur Aller la page
de dtails transmet la page de suppression indique un paramtre d'URL contenant l'ID de l'enregistrement. Prenons
l'exemple d'un paramtre d'URL appel recordID et d'une page de suppression appele confirmdelete.asp ; lorsque l'utilisateur
clique sur le lien, l'URL se prsente comme suit :
http://www.mysite.com/confirmdelete.asp?recordID=43
La premire partie de l'URL, http://www.mysite.com/confirmdelete.asp, ouvre la page de suppression. La deuxime partie, ?
recordID=43, constitue le paramtre d'URL. Elle prcise la page de suppression quel enregistrement trouver et afficher. Le
terme recordID est le nom du paramtre d'URL et sa valeur est 43. Dans cet exemple, le paramtre d'URL contient le numro
d'ID de l'enregistrement, soit 43.
Haut de la page
Cration de la page de suppression
Aprs avoir cr la page rpertoriant les enregistrements, passez la page de suppression. La page de suppression affiche l'enregistrement et
invite l'utilisateur confirmer sa suppression. Lorsque l'utilisateur confirme l'opration en cliquant sur le bouton du formulaire, l'application Web
supprime l'enregistrement de la base de donnes.
La cration de cette page consiste crer un formulaire HTML, rcuprer l'enregistrement afficher dans le formulaire, l'afficher dans le
formulaire et ajouter la logique permettant de supprimer l'enregistrement de la base de donnes. Les oprations de rcupration et d'affichage
de l'enregistrement impliquent de dfinir un jeu d'enregistrements destin recevoir cet enregistrement (celui que l'utilisateur souhaite supprimer)
et de lier les colonnes du jeu d'enregistrements au formulaire.
Remarque : La page de suppression ne peut pas contenir plus d'un comportement de serveur de modification d'enregistrement la fois. Par
exemple, vous ne pouvez pas y inclure galement un comportement de serveur Insrer un enregistrement ou Mettre jour l'enregistrement.
Cration d'un formulaire HTML permettant d'afficher l'enregistrement

1. Crez une page et enregistrez-la de sorte qu'elle devienne la page de suppression dfinie dans la section prcdente.
787
Vous avez dfini une page de suppression lors de la cration du lien de suppression (voir la section prcdente). Utilisez le
nom de cette page lorsque vous enregistrez le fichier pour la premire fois (par exemple, deleteConfirm.cfm).
2. Insrez un formulaire HTML dans la page (Insertion > Formulaire > Formulaire).
3. Ajoutez un champ masqu au formulaire.
Le champ masqu est ncessaire pour stocker l'ID d'enregistrement transmis par le paramtre d'URL. Pour insrer un champ
masqu, placez le point d'insertion dans le formulaire et choisissez Insertion > Formulaire > Champ masqu.
4. Ajoutez un bouton au formulaire.
Ce bouton permet l'utilisateur de confirmer la suppression de l'enregistrement affich. Pour insrer un bouton, placez le point
d'insertion dans le formulaire et choisissez Insertion > Formulaire > Bouton.
5. Modifiez la prsentation de la page selon les besoins et enregistrez-la.
Rcupration de l'enregistrement supprimer

1. Dans le panneau Liaisons (Fentre > Liaisons), cliquez sur le bouton Plus (+) et slectionnez Jeu d'enregistrements (Requte)
dans le menu droulant.
La bote de dialogue Jeu d'enregistrements ou Jeu de donnes simplifie s'affiche. Si la bote de dialogue Jeu
d'enregistrements avance s'affiche, cliquez sur Simple.
2. Attribuez un nom au jeu d'enregistrements, puis slectionnez une source de donnes ainsi que la table de base de donnes
contenant les enregistrements que les utilisateurs peuvent supprimer.
3. Dans la zone Colonnes, slectionnez les colonnes (champs d'enregistrement) afficher sur la page.
Pour n'afficher que certains champs de l'enregistrement, cliquez sur Slectionnes, puis cliquez sur les champs souhaits tout
en maintenant la touche Ctrl (Windows) ou Commande (Macintosh) enfonce.
Assurez-vous que le champ d'ID d'enregistrement est compris dans la slection, mme si vous ne souhaitez pas l'afficher.
4. Renseignez la section Filtre comme suit, pour rechercher et afficher l'enregistrement spcifi dans le paramtre d'URL
transmis par la page de rsultats :
Dans le premier menu droulant de la zone Filtre, slectionnez la colonne du jeu d'enregistrements contenant les valeurs
correspondant celle du paramtre d'URL transmis par la page comportant les liens Supprimer. Par exemple, si le
paramtre d'URL contient un numro d'ID d'enregistrement, slectionnez la colonne contenant les numros d'ID
d'enregistrement. Dans l'exemple de la section prcdente, la colonne intitule CODE contient les valeurs correspondant
celle du paramtre d'URL transmis par la page contenant les liens de suppression.
Dans le menu droulant situ en regard du premier menu, slectionnez le signe gal (=) (si cela n'est pas dj fait).
Dans le troisime menu droulant, choisissez Paramtre d'URL. La page contenant les liens de suppression utilise un
paramtre d'URL pour transmettre des informations la page de suppression.
Dans le quatrime champ, entez le nom du paramtre d'URL transmis par la page contenant les liens de suppression.
5. Cliquez sur OK.

Le jeu d'enregistrements s'affiche dans le panneau Liaisons.
Affichage de l'enregistrement supprimer

1. Slectionnez les colonnes de jeu de donnes (champs d'enregistrement) dans le panneau Liaisons et faites-les glisser vers la
page de suppression.
788
Veillez insrer le contenu dynamique en lecture seule au sein des limites du formulaire. Pour plus d'informations sur
l'insertion de contenu dynamique dans une page, consultez la section Cration de texte dynamique.
Vous devez ensuite lier la colonne d'ID d'enregistrement au champ de formulaire masqu.
2. Vrifiez que l'option Elments invisibles est active (Affichage > Assistances visuelles > Elments invisibles), puis cliquez sur
l'icne en forme de bouclier jaune reprsentant le champ masqu.
Le champ masqu est slectionn.
3. Dans l'inspecteur Proprits, cliquez sur l'icne en forme d'clair situe en regard de la zone Valeur.
4. Dans la bote de dialogue Donnes dynamiques, slectionnez la colonne d'ID d'enregistrement dans le jeu d'enregistrements.
Dans l'exemple suivant, la colonne d'ID d'enregistrement, CODE, contient des codes de magasin uniques.
Colonne d'ID de l'enregistrement slectionne

5. Cliquez sur OK et enregistrez la page.
Page de suppression termine
Insertion de la logique permettant de supprimer l'enregistrement
Haut de la page
Aprs avoir affich l'enregistrement slectionn sur la page de suppression, vous devez insrer sur cette page la logique permettant de supprimer
l'enregistrement de la base de donnes lorsque l'utilisateur clique sur le bouton de confirmation de la suppression. Le comportement de serveur
Supprimer l'enregistrement permet d'insrer rapidement cette logique.
Ajout d'un comportement de serveur pour supprimer un enregistrement (ColdFusion, PHP)

1. Assurez-vous que la page de suppression ColdFusion ou PHP est ouverte dans Dreamweaver.
789
choisissez Supprimer l'enregistrement.
3. Vrifiez que l'option Valeur de la cl primaire est slectionne dans la zone Vrifier au pralable si la variable est dfinie.
Vous dfinirez la valeur de la cl primaire ultrieurement dans cette bote de dialogue.
4. Dans le menu Connexion ou Source de donnes (ColdFusion), slectionnez une connexion la base de donnes de sorte
que le comportement de serveur puisse se connecter la base de donnes concerne.
5. Dans le menu droulant Table, slectionnez la table de base de donnes contenant les enregistrements supprimer.
6. Dans le menu droulant Colonne de la cl primaire, slectionnez la colonne contenant les ID d'enregistrement.
Le comportement de serveur Supprimer l'enregistrement recherche une correspondance dans cette colonne. Cette dernire
doit contenir les mmes ID d'enregistrement que la colonne du jeu d'enregistrements que vous avez lie au formulaire masqu
sur la page.
Si l'ID d'enregistrement est numrique, slectionnez l'option Numrique.
7. (PHP) Dans le menu droulant Valeur de la cl primaire, slectionnez la variable de la page contenant l'ID d'enregistrement
identifiant l'enregistrement supprimer.
La variable est gnre par le champ de formulaire masqu. Son nom correspond l'attribut name du champ masqu.
Suivant l'attribut method du formulaire, elle se prsente sous la forme d'un paramtre de formulaire ou d'un paramtre d'URL.
8. Dans la zone Aprs la suppression, aller ou En cas de russite, aller , indiquez la page ouvrir aprs la suppression de
l'enregistrement de la table.
Cette page peut par exemple prsenter un bref message indiquant l'utilisateur que l'opration a russi, ou bien rpertorier
les enregistrements restants afin que l'utilisateur puisse vrifier que l'enregistrement a bien t supprim.
9. Cliquez sur OK et enregistrez votre travail.
Ajout d'un comportement de serveur pour supprimer un enregistrement (ASP)

1. Assurez-vous que la page de suppression ASP est ouverte dans Dreamweaver.
choisissez Supprimer l'enregistrement.
3. Dans le menu droulant Connexion, slectionnez une connexion la base de donnes de sorte que le comportement de
serveur puisse se connecter la base de donnes concerne.
4. Dans le menu droulant Supprimer de la table, slectionnez la table de base de donnes qui contient les enregistrements
supprimer.
5. Dans le menu droulant Slectionner un enregistrement dans, indiquez le jeu contenant les enregistrements supprimer.
6. Dans le menu droulant Colonne cl unique, slectionnez une colonne cl (gnralement le champ d'ID de
l'enregistrement) devant identifier l'enregistrement dans la table de la base de donnes.
Si la valeur est un nombre, slectionnez l'option Numrique. Une colonne cl n'accepte gnralement que des valeurs
numriques, mais dans certains cas, elle accepte galement du texte.
7. Dans le menu droulant Supprimer en envoyant, spcifiez le formulaire HTML contenant le bouton Envoyer qui envoie la
commande de suppression au serveur.
8. Dans la zone Aprs la suppression, aller , indiquez la page ouvrir aprs la suppression de l'enregistrement de la table.
Cette page peut par exemple prsenter un bref message indiquant l'utilisateur que l'opration a russi, ou bien rpertorier
les enregistrements restants afin que l'utilisateur puisse vrifier que l'enregistrement a bien t supprim.
9. Cliquez sur OK et enregistrez votre travail.
Test des pages de suppression

790
1. Envoyez les pages de recherche, de rsultats et de suppression votre serveur Web, ouvrez un navigateur et recherchez un
enregistrement de test susceptible d'tre supprim.
Lorsque vous cliquez sur un lien de suppression sur la page de rsultats. la page de suppression doit s'afficher.
2. Cliquez sur le bouton Confirmer pour supprimer l'enregistrement de la base de donnes.
3. Recherchez l'enregistrement pour vous assurer qu'il a bien t supprim. L'enregistrement ne doit plus figurer sur la page de
rsultats.
Voir aussi
791
Cration de pages avec objets de manipulation de donnes avancs

(ColdFusion, ASP)
A propos des objets de commande ASP
Modification dune base de donnes laide des commandes ASP
A propos des procdures stockes
Ajout dune procdure stocke (ColdFusion) (CS6)
Excution dune procdure stocke (ASP) (CS6)
Haut de la page
A propos des objets de commande ASP

Un objet de commande ASP est un objet de serveur qui effectue une opration donne dans une base de donnes. Il peut contenir toute
instruction SQL valide, y compris une instruction qui renvoie un jeu denregistrements, ou qui insre, met jour ou supprime des enregistrements
dans une base de donnes. Un objet de commande peut modifier la structure dune base de donnes si linstruction SQL ajoute ou supprime une
colonne dans la table. Il peut galement servir excuter une procdure stocke dans une base de donnes.
Un objet de commande est dit rutilisable car le serveur peut excuter plusieurs fois la commande laide dune seule version compile de lobjet.
Pour quune commande soit rutilisable, dfinissez la proprit Prpar de lobjet de commande sur true, comme dans linstruction VBScript
suivante :
1
mycommand.Prepared = true
Si vous savez que la commande sera excute un grand nombre de fois, il est conseill dutiliser une seule version compile de lobjet pour
amliorer lefficacit des oprations effectues dans la base de donnes.
Remarque : les commandes prpares ne sont pas prises en charge par tous les fournisseurs de base de donnes. Si votre base de donnes ne
les prend pas en charge, elle risque de renvoyer une erreur lorsque vous dfinissez cette proprit sur true. Elle pourrait mme ignorer la
requte de prparation de la commande et dfinir la proprit Prpar sur false.
Sur une page ASP, un objet de commande est cr par lintermdiaire de scripts. Cependant, Dreamweaver vous permet de crer des objets de
commande sans avoir crire une seule ligne de code ASP.
Haut de la page
Modification dune base de donnes laide des commandes ASP

A laide de Dreamweaver, vous pouvez crer des objets de commande ASP qui insrent, mettent jour et suppriment des enregistrements dans
une base de donnes. Il vous suffit dindiquer lobjet de commande linstruction ou la procdure stocke SQL qui effectue lopration dans la
base de donnes.
1. Dans Dreamweaver, ouvrez la page ASP qui doit excuter la commande.
choisissez Commande.
3. Saisissez le nom de la commande, choisissez une connexion une base de donnes contenant les enregistrements
modifier, puis slectionnez lopration de modification que la commande doit effectuer (Insrer, Mettre jour ou Supprimer).
Dreamweaver rdige le dbut de linstruction SQL en fonction du type dopration slectionn. Par exemple, voici la bote de
dialogue qui saffiche lorsque vous slectionnez le type Insrer :
792
4. Compltez linstruction SQL.

Pour plus dinformations sur la rdaction dinstructions SQL modifiant des bases de donnes, consultez un manuel TransactSQL.
5. Dfinissez les variables SQL dans la zone Variables. Fournissez le nom et la valeur dexcution. La dfinition du type et de la
taille de chaque variable empche les attaques par injection.
Lexemple ci-dessous illustre une instruction Insert qui contient trois variables SQL. Les valeurs de ces variables sont fournies
par des paramtres dURL transmis la page, dont la dfinition saffiche dans la colonne Valeur dexcution de la zone
Variables.
Pour obtenir la valeur de taille, utilisez le volet Bases de donnes de Dreamweaver. Dans le volet Bases de donnes, trouvez
votre base de donnes et dveloppez-la. Trouvez ensuite la table que vous utilisez et dveloppez-la. La table contient les
tailles de vos champs. Par exemple, elle peut indiquer ADDRESS (WChar 50). Dans cet exemple, la taille vaut 50. Vous
pouvez galement trouver la taille dans votre application de base de donnes.
Remarque : les types de donnes Numrique, Boolen et date/heure emploient toujours la taille -1.
Pour dterminer la valeur Type, reportez-vous au tableau suivant :
Type dans la base de donnes
Type dans
Dreamweaver
Taille
Numrique (MS Access, MS SQL Server, MySQL)
Double
-1
Boolen, Oui/Non (MS Access, MS SQL Server, MySQL)
Double
-1
Date/Heure (MS Access, MS SQL Server, MySQL)
DBTimeStamp
-1
Tous les autres types de champ de texte, y compris les

types de donnes texte MySQL char, varchar et longtext
LongVarChar
reportez-vous la
table de base de
donnes
Texte (MS Access) ou nvarchar, nchar (MS SQL Server)
VarWChar
reportez-vous la
table de base de
donnes
Mmo (MS Access), ntext (MS SQL Server), ou champs

acceptant de grandes quantits de texte
LongVarWChar
1073741823
Pour plus dinformations sur le type et la taille des variables SQL, consultez le site Web dAdobe ladresse
793
www.adobe.com/go/4e6b330a_fr.
6. Fermez la bote de dialogue.
Dreamweaver insre dans votre page un code ASP qui, lorsquil sexcute sur le serveur, cre une commande qui insre,
met jour ou supprime des enregistrements dans la base de donnes.
Par dfaut, la proprit Prpar de lobjet de commande est dfinie sur true, ce qui permet au serveur dapplication de
rutiliser une seule version compile de lobjet chaque fois que la commande est excute. Pour modifier ce paramtre,
basculez en mode Code et dfinissez la proprit Prpar sur false.
7. Crez une page avec un formulaire HTML, de manire permettre aux utilisateurs dentrer des donnes sur les
enregistrements. Dans le formulaire HTML, ajoutez trois champs de texte (txtVille, txtAdresse et txtTlphone) et un bouton
Envoyer. Le formulaire utilise la mthode GET et envoie les valeurs des champs de texte la page contenant votre
commande.
Haut de la page
A propos des procdures stockes

Bien quil soit possible dutiliser des comportements de serveur pour crer des pages qui modifient des bases de donnes, vous pouvez
galement crer ces pages en utilisant des objets de manipulation de base de donnes, tels que des procdures stockes ou des objets de
commande ASP.
Une procdure stocke est un lment de base de donnes rutilisable qui effectue des oprations dans une base de donnes. Elle contient du
code SQL qui permet notamment dinsrer, de mettre jour ou de supprimer des enregistrements. Elle peut galement modifier la structure de la
base de donnes. Une procdure stocke peut ainsi servir ajouter une colonne ou encore supprimer une table.
Elle peut galement appeler une autre procdure stocke, accepter des paramtres dentre et renvoyer la procdure dappel plusieurs valeurs
sous la forme de paramtres de sortie.
Une procdure stocke est dite rutilisable car vous pouvez effectuer une opration dans la base de donnes plusieurs fois laide dune seule
version compile de la procdure. Si vous savez quune tche de base de donnes sera excute un grand nombre de fois ou quelle sera
excute par diffrentes applications, il est conseill dutiliser une procdure stocke pour amliorer lefficacit des oprations effectues dans la
base de donnes.
Remarque : les bases de donnes MySQL et Microsoft Access ne prennent pas en charge les procdures stockes.
Haut de la page
Ajout dune procdure stocke (ColdFusion) (CS6)

Vous pouvez modifier une base de donnes laide dune procdure stocke. Une procdure stocke est un lment de base de donnes
rutilisable qui effectue des oprations dans une base de donnes.
Avant de modifier une base de donnes laide dune procdure stocke, assurez-vous que cette dernire contient un code SQL qui modifie la
base de donnes dune manire ou dune autre. Pour crer et stocker une procdure stocke dans une base de donnes, consultez la
documentation de la base de donnes et un bon manuel Transact-SQL.
1. Dans Dreamweaver, ouvrez la page qui doit excuter la procdure stocke.
2. Dans le panneau Liaisons (Fentre > Liaisons), cliquez sur le bouton Plus (+), puis choisissez Procdure stocke.
3. Dans le menu droulant Source de donnes, slectionnez une connexion une base de donnes contenant la procdure
stocke.
4. Saisissez le nom dutilisateur et le mot de passe pour la source de donnes ColdFusion.
5. Slectionnez une procdure stocke dans le menu droulant Procdure.
Dreamweaver remplit automatiquement tous les paramtres.
6. Slectionnez un paramtre et cliquez sur Modifier si vous voulez y apporter des modifications.
La bote de dialogue Modifier la variable de la procdure stocke saffiche. Le nom de la variable modifier saffiche dans la
zone Nom.
Remarque : vous devez indiquer des valeurs test pour tout paramtre dentre dune procdure stocke.
7. Apportez les modifications de votre choix :
794
Slectionnez une direction dans le menu droulant. Une procdure stocke peut comporter des valeurs dentre, des
valeurs de sortie ou les deux.
Slectionnez un type SQL dans le menu droulant. Entrez une variable de renvoi, une valeur dexcution et une valeur
test.
8. Si la procdure stocke accepte un paramtre, cliquez sur le bouton Plus (+) pour ajouter un paramtre de page.
Remarque : vous devez indiquer les paramtres de page correspondant chaque valeur de retour de paramtre dune
procdure stocke. Il est inutile dajouter les paramtres de page sil ny a pas de valeur de retour correspondante.
Cliquez de nouveau sur le bouton Plus (+) pour ajouter un autre paramtre de page, si ncessaire.
9. Slectionnez un paramtre de page, puis cliquez sur le bouton Moins (-) pour supprimer le paramtre si besoin ou sur
Modifier pour y apporter des modifications.
10. Activez loption Renvoie le jeu denregistrements nomm, puis tapez le nom du jeu denregistrements. Si la procdure stocke
renvoie un jeu denregistrements, cliquez sur le bouton Tester pour lafficher.
Dreamweaver excute la procdure stocke et affiche le jeu denregistrements, le cas chant.
Remarque : si la procdure stocke renvoie un jeu denregistrements et accepte des paramtres, vous devez indiquer une
valeur dans la colonne Valeur par dfaut de la zone Variables pour tester la procdure stocke.
Vous pouvez utiliser diffrentes valeurs test pour gnrer divers jeux denregistrements. Pour modifier une valeur test,
cliquez sur le bouton Modifier correspondant au paramtre, puis modifiez la valeur test ou cliquez sur le bouton Modifier
correspondant au paramtre de page, puis modifiez la valeur par dfaut.
11. Activez loption Renvoie le code dtat nomm, puis saisissez le nom du code dtat si la procdure stocke renvoie une
valeur de retour de code dtat. Cliquez sur OK.
Lorsque vous fermez la bote de dialogue, Dreamweaver insre dans votre page un code ColdFusion qui, lorsquil sexcute
sur le serveur, appelle une procdure stocke dans la base de donnes. La procdure stocke effectue alors une opration
dans la base de donnes, telle que linsertion dun enregistrement.
Si la procdure stocke accepte des paramtres, vous pouvez crer une page qui recueille les valeurs de paramtre et les
envoie la page en mme temps que la procdure stocke. Ainsi, il est possible de crer une page qui recueille des valeurs
de paramtre auprs des utilisateurs laide de paramtres dURL ou dun formulaire HTML.
Haut de la page
Excution dune procdure stocke (ASP) (CS6)

Dans le cas de pages ASP, lexcution dune procdure stocke requiert lajout dun objet de commande. Pour plus dinformations sur les objets
de commande, voir A propos des objets de commande ASP.
1. Dans Dreamweaver, ouvrez la page qui doit excuter la procdure stocke.
2. Dans le panneau Liaisons (Fentre > Liaisons), cliquez sur le bouton Plus (+), puis choisissez Commande (Procdure
stocke).
La bote de dialogue Commande saffiche.
3. Saisissez le nom de la commande, slectionnez une connexion une base de donnes contenant la procdure stocke, puis
choisissez Procdure stocke dans le menu droulant Type.
4. Pour slectionner votre procdure stocke, dveloppez la branche Procdures stockes dans la zone Elments de base de
donnes, choisissez la procdure stocke dans la liste, puis cliquez sur le bouton Procdure.
5. Entrez tous les paramtres requis dans le tableau Variables.
Il est inutile dindiquer des paramtres pour les variables RETURN_VALUE.
6. Cliquez sur OK.
Une fois la bote de dialogue ferme, un code ASP est insr dans votre page. Lorsquil sexcute sur le serveur, ce code
cre un objet de commande qui excute une procdure stocke dans la base de donnes. La procdure stocke effectue
alors une opration dans la base de donnes, telle que linsertion dun enregistrement.
Par dfaut, la proprit Prpar de lobjet de commande est dfinie sur true, ce qui permet au serveur dapplication de
rutiliser une version compile de lobjet chaque fois que la procdure stocke est excute. Si vous savez que la commande
795
sera excute un grand nombre de fois, il est conseill dutiliser une seule version compile de lobjet pour amliorer
lefficacit des oprations effectues dans la base de donnes. Cependant, si la commande nest excute quune ou deux
fois, ceci risque de ralentir votre application Web car le systme doit sinterrompre pour compiler la commande. Pour modifier
ce paramtre, basculez en mode Code et dfinissez la proprit Prpar sur false.
Remarque : les commandes prpares ne sont pas prises en charge par tous les fournisseurs de base de donnes. Si votre
base de donnes ne les prend pas en charge, vous risquez de recevoir un message derreur lors de lexcution de la page.
Basculez en mode Code et dfinissez la proprit Prpar sur false.
Si la procdure stocke accepte des paramtres, vous pouvez crer une page qui recueille les valeurs de paramtre et les
envoie la page en mme temps que la procdure stocke. Ainsi, il est possible de crer une page qui recueille des valeurs
de paramtre auprs des utilisateurs laide de paramtres dURL ou dun formulaire HTML.
796
Cration d'une page d'enregistrement

A propos des pages d'enregistrement
Stockage des informations de connexion des utilisateurs
Ajout d'un formulaire HTML pour la slection d'un nom d'utilisateur et d'un mot de passe
Mise jour de la table de base de donnes des utilisateurs
Ajout d'un comportement de serveur pour garantir l'unicit des noms d'utilisateur
Haut de la page
A propos des pages d'enregistrement
Vous pouvez inclure dans votre application Web une page qui oblige les utilisateurs s'enregistrer la premire fois qu'ils visitent votre site.
Une page d'enregistrement se compose des lments structurels suivants :
une table de base de donnes pour stocker les informations de connexion des utilisateurs ;
un formulaire HTML qui permet aux utilisateurs de slectionner un nom d'utilisateur et un mot de passe
et qui peut galement tre utilis pour obtenir d'autres informations personnelles de la part des utilisateurs ;
un comportement de serveur Insrer un enregistrement pour mettre jour la table de base de donnes des utilisateurs du
site ;
un comportement de serveur Vrifier le nouveau nom d'utilisateur pour vrifier que le nom tap par l'utilisateur n'est pas dj
utilis.
Stockage des informations de connexion des utilisateurs
Haut de la page
Une page d'enregistrement ncessite une table de base de donnes dans laquelle stocker toutes les informations de connexion saisies par les
utilisateurs.
Assurez-vous que cette table contient bien une colonne nom d'utilisateur et mot de passe. Si vous voulez octroyer diffrents
droits d'accs aux utilisateurs, ajoutez une colonne droit d'accs.
Si vous voulez dfinir un mot de passe commun tous les utilisateurs du site, configurez votre application de base de donnes
(Microsoft Access, Microsoft SQL Server, Oracle, etc.) de faon entrer par dfaut ce mot de passe dans chaque nouvel
enregistrement utilisateur. Dans la plupart des applications de base de donnes, vous avez la possibilit d'affecter une valeur
par dfaut une colonne pour chaque nouvel enregistrement cr. Dfinissez le mot de passe par dfaut.
La table de base de donnes permet galement de stocker d'autres informations utiles sur l'utilisateur.
L'tape suivante de la cration d'une page d'enregistrement consiste ajouter un formulaire HTML cette page afin de
permettre aux utilisateurs de choisir un nom d'utilisateur et un mot de passe (le cas chant).
Ajout d'un formulaire HTML pour la slection d'un nom d'utilisateur et d'un mot de passe
Haut de la page
Pour permettre l'utilisateur de slectionner son nom d'utilisateur et son mot de passe, vous devez ajouter un formulaire HTML la page
d'enregistrement (le cas chant).
1. Crez une page (Fichier > Nouveau > Page vierge) et mettez en forme votre page d'enregistrement l'aide des outils de
cration de Dreamweaver.
2. Pour ajouter un formulaire HTML, placez le point d'insertion l'endroit o le formulaire doit apparatre, puis choisissez
Formulaire dans le menu Insertion.
document, ouvrez l'inspecteur Proprits (Fentre > Proprits), puis entrez un nom dans la zone Nom du formulaire.
Vous n'avez pas besoin de dfinir l'attribut action ou method du formulaire pour lui indiquer o et comment envoyer les
donnes d'enregistrement lorsque l'utilisateur clique sur le bouton Envoyer. Le comportement de serveur Insrer un
797
4. Ajoutez des champs de texte (Insertion > Formulaire > Champ de texte) afin de permettre l'utilisateur d'entrer un nom
d'utilisateur et un mot de passe.
Le formulaire peut galement comporter d'autres objets permettant d'enregistrer d'autres donnes personnelles.
Il est conseill d'ajouter des tiquettes (texte ou images) ct de chaque objet de formulaire, afin d'indiquer l'utilisateur de
quoi il s'agit. Il est galement conseill d'organiser les objets de formulaire en les plaant dans un tableau HTML. Pour plus
d'informations sur les objets de formulaire, consultez la section Cration de formulaires Web.
Vous pouvez modifier l'tiquette du bouton Envoyer ; pour ce faire, slectionnez ce bouton, ouvrez l'inspecteur Proprits
(Fentre > Proprits) et entrez une nouvelle valeur dans la zone Valeur.
L'tape suivante de la cration d'une page d'enregistrement consiste ajouter le comportement de serveur Insrer un
enregistrement pour insrer des enregistrements dans la table des utilisateurs de la base de donnes.
Mise jour de la table de base de donnes des utilisateurs
Haut de la page
Vous devez ajouter le comportement de serveur Insrer un enregistrement la page d'enregistrement pour mettre jour la table des utilisateurs
dans la base de donnes.
choisissez Insrer l'enregistrement dans le menu droulant.
La bote de dialogue Insrer un enregistrement s'affiche.
2. Compltez la bote de dialogue en veillant bien indiquer la table des utilisateurs dans la base de donnes dans laquelle
insrer les donnes des utilisateurs. Cliquez sur OK.
La dernire tape de la cration d'une page d'enregistrement consiste s'assurer que le nom d'utilisateur n'est pas dj utilis
par un autre utilisateur enregistr.
Ajout d'un comportement de serveur pour garantir l'unicit des noms d'utilisateur
Haut de la page
Vous pouvez ajouter un comportement de serveur une page d'enregistrement d'utilisateur. Le comportement vrifie que le nom d'utilisateur
envoy par le visiteur est unique avant d'ajouter ce dernier dans votre base de donnes des utilisateurs enregistrs.
Lorsque l'utilisateur clique sur le bouton Envoyer, sur la page d'enregistrement, le comportement de serveur compare le nom d'utilisateur entr
tous les autres noms dj enregistrs dans la table de la base de donnes. Si aucun doublon n'est trouv, le comportement de serveur poursuit
normalement l'insertion de l'enregistrement. En cas de doublon, le comportement de serveur annule l'insertion de l'enregistrement et ouvre une
nouvelle page (qui alerte gnralement l'utilisateur que le nom choisi est dj pris).
1. Dans le panneau Comportements de serveur (Fentre > Comportements de serveur), cliquez sur le bouton Plus (+). Dans le
menu droulant, slectionnez Authentification de l'utilisateur > Vrifier le nouveau nom d'utilisateur.
2. Dans le menu droulant Champ Nom d'utilisateur, slectionnez la zone de texte du formulaire dans laquelle l'utilisateur devra
entrer son nom d'utilisateur.
3. Dans la zone Si existe dj, aller , indiquez la page ouvrir si un doublon est trouv dans la table de la base de donnes,
puis cliquez sur OK.
Cette page doit alerter l'utilisateur que le nom qu'il a choisi est dj pris et lui permettre d'en entrer un autre.
Voir aussi
798
Cration d'une page d'ouverture de session

A propos des pages de connexion
Cration d'une table de base de donnes des utilisateurs enregistrs
Ajout d'un formulaire HTML permettant aux utilisateurs de se connecter
Vrification du nom d'utilisateur et du mot de passe
Haut de la page
A propos des pages de connexion

Votre application Web peut contenir une page qui permettra aux utilisateurs enregistrs de se connecter au site.
Une page de connexion se compose des lments structurels suivants :
une table de base de donnes regroupant les utilisateurs dj enregistrs ;
un formulaire HTML permettant aux utilisateurs d'entrer leur nom d'utilisateur et leur mot de passe ;
un comportement de serveur Connecter l'utilisateur qui vrifie que le nom d'utilisateur et le mot de passe saisis sont valides ;
une variable de session correspondant au nom d'utilisateur est cre pour l'utilisateur lorsqu'il se connecte avec succs.
Cration d'une table de base de donnes des utilisateurs enregistrs
Haut de la page
Vous avez besoin d'une table de base de donnes regroupant les utilisateurs dj enregistrs pour vrifier que le nom d'utilisateur et le mot de
passe saisis dans la page de connexion sont valides.
Pour crer cette table, utilisez votre application de base de donnes et une page d'enregistrement. Pour plus d'informations, consultez le lien
vers la rubrique connexe ci-dessous.
L'tape suivante de la cration d'une page de connexion consiste ajouter un formulaire HTML la page afin de permettre aux utilisateurs de se
connecter. Vous trouverez des instructions dans la rubrique suivante.
Ajout d'un formulaire HTML permettant aux utilisateurs de se connecter
Haut de la page
Ajoutez un formulaire HTML la page afin de permettre aux utilisateurs de se connecter en entrant un nom d'utilisateur et un mot de passe.
1. Crez une page (Fichier > Nouveau > Page vierge) et mettez en forme votre page de connexion l'aide des outils de cration
de Dreamweaver.
2. Pour ajouter le formulaire HTML, placez le point d'insertion l'endroit o le formulaire doit apparatre, puis choisissez
Insertion > Formulaire.
document, ouvrez l'inspecteur Proprits (Fentre > Proprits), puis entrez un nom dans la zone Nom du formulaire.
Vous n'avez pas besoin de dfinir l'attribut action ou method du formulaire pour lui indiquer o et comment envoyer les
donnes d'enregistrement lorsque l'utilisateur clique sur le bouton Envoyer. En effet, le comportement de serveur Connecter
l'utilisateur dfinit automatiquement ces attributs.
4. Ajoutez au formulaire les champs de texte Nom d'utilisateur et Mot de passe (Insertion > Formulaire > Champ de texte).
Ajoutez des tiquettes (texte ou images) ct de chaque zone de texte, puis organisez ces zones en les plaant dans un
tableau HTML et en donnant l'attribut BORDER de la table la valeur 0.
Vous pouvez modifier l'tiquette du bouton Envoyer ; pour ce faire, slectionnez ce bouton, ouvrez l'inspecteur Proprits
L'tape suivante de la cration d'une page de connexion consiste ajouter le comportement de serveur Connecter l'utilisateur
pour vrifier que le nom d'utilisateur et le mot de passe saisis sont valides.
799
Vrification du nom d'utilisateur et du mot de passe
Haut de la page
Vous devez ajouter le comportement de serveur Connecter l'utilisateur la page de connexion pour vrifier la validit du nom d'utilisateur et du
mot de passe taps par un utilisateur.
Lorsqu'un utilisateur clique sur le bouton Envoyer, sur la page de connexion, le comportement de serveur Connecter l'utilisateur compare les
valeurs saisies par l'utilisateur celles des utilisateurs dj enregistrs. Si les valeurs correspondent, le comportement de serveur ouvre une page
(gnralement la page d'accueil du site). Si elles ne correspondent pas, le comportement de serveur ouvre une autre page (qui alerte
gnralement l'utilisateur que la connexion a chou).
menu droulant, slectionnez Authentification de l'utilisateur > Connecter l'utilisateur.
2. Dfinissez le formulaire et les objets de formulaire que les visiteurs utilisent pour entrer leur nom d'utilisateur et leur mot de
passe.
3. (ColdFusion) Tapez votre nom d'utilisateur et votre mot de passe, le cas chant.
4. Dfinissez la table de la base de donnes et les colonnes qui contiennent les noms d'utilisateur et les mots de passe de tous
les utilisateurs dj enregistrs.
Le comportement de serveur compare le nom d'utilisateur et le mot de passe entrs par le visiteur sur la page de connexion
aux valeurs de ces colonnes.
5. Indiquez la page ouvrir si la connexion est tablie.
Cette page est gnralement la page d'accueil du site.
6. Indiquez la page ouvrir si la connexion choue.
Cette page alerte gnralement l'utilisateur que la connexion a chou et lui permet un nouvel essai.
7. Si vous voulez que les utilisateurs envoys vers la page de connexion aprs avoir essay d'accder la page retournent
cette page d'accs restreint aprs la connexion, choisissez l'option Aller l'URL prcdente.
Si un utilisateur essaie d'accder votre site en ouvrant une page l'accs restreint sans s'tre pralablement connect, la
page accs restreint peut l'envoyer vers la page de connexion. Une fois l'utilisateur connect, la page de connexion le
redirige vers la page accs restreint qui l'a pralablement envoy vers la page de connexion.
Lorsque vous saisissez les informations relatives au comportement de serveur Restreindre l'accs la page dans la bote
de dialogue, prenez soin de prciser la page de connexion dans la zone de texte Si l'accs est refus, aller .
8. Indiquez si l'accs la page est accord selon le nom d'utilisateur et le mot de passe uniquement ou galement selon un
niveau de privilges, puis cliquez sur OK.
Un comportement de serveur est ajout la page de connexion. Il est destin vrifier que le nom d'utilisateur et le mot de
passe saisis par le visiteur sont valides.
Voir aussi
800
Cration d'une page accs restreint

A propos des pages protges
Renvoi des utilisateurs non autoriss
Stockage des privilges d'accs dans la base de donnes des utilisateurs
Dconnexion d'utilisateurs
Haut de la page
A propos des pages protges

Votre application Web peut contenir une page protge laquelle seuls les utilisateurs autoriss ont accs.
Si un utilisateur essaie, par exemple, de contourner la page de connexion en entrant l'URL de la page protge dans le navigateur, il est redirig
vers une autre page. De mme, si vous donnez une page le niveau d'accs Administrateur, alors seuls les utilisateurs ayant les privilges
d'accs Administrateur peuvent la consulter. Si un utilisateur connect tente d'accder la page protge alors qu'il ne possde pas les privilges
d'accs requis, il est redirig vers une autre page.
Les niveaux d'accs vous permettent aussi de ne pas octroyer immdiatement l'accs la totalit du site aux utilisateurs rcemment enregistrs.
Ainsi, vous pouvez, par exemple, attendre de recevoir un paiement avant d'octroyer l'accs aux pages membre du site. Pour cela, protgez les
pages membre avec un niveau d'accs Membre et n'octroyez que les privilges d'accs Visiteur aux utilisateurs rcemment enregistrs. Aprs
rception du paiement, vous pouvez octroyer l'utilisateur les privilges d'accs suprieurs, c'est--dire Membre (dans la table de base de
donnes des utilisateurs enregistrs).
Si vous n'envisagez pas d'utiliser des niveaux d'accs, vous pouvez nanmoins protger une page de votre site en ajoutant simplement la page
le comportement de serveur Restreindre l'accs la page. Ce comportement redirige vers une autre page tout utilisateur n'ayant pas russi
tablir la connexion.
Si vous envisagez d'utiliser des niveaux d'accs, vous pouvez protger une page de votre site l'aide des blocs structurels suivants :
un comportement de serveur Restreindre l'accs la page, pour rediriger les utilisateurs non autoriss vers une autre page ;
une colonne supplmentaire dans la table de base de donnes des utilisateurs, pour enregistrer les privilges d'accs de
chaque utilisateur.
Que vous utilisiez les niveaux d'accs ou non, vous pouvez ajouter un lien la page protge pour permettre l'utilisateur de
se dconnecter et d'effacer toutes les variables de session.
Haut de la page
Renvoi des utilisateurs non autoriss
Pour empcher les utilisateurs non autoriss d'accder une page, ajoutez-lui le comportement de serveur Restreindre l'accs la page. Ce
comportement redirige l'utilisateur vers une autre page s'il tente de contourner la page de connexion en entrant l'URL de la page protge dans le
navigateur, ou s'il est connect mais tente d'accder la page protge sans avoir les privilges requis.
Remarque : Le comportement de serveur Restreindre l'accs la page ne protge que les pages HTML, et non les autres ressources du site telles
que les fichiers d'images et audio.
Si vous voulez attribuer plusieurs pages du site les mmes droits d'accs, vous pouvez copier-coller ces droits d'une page vers une autre.
Renvoi des utilisateurs non autoriss vers une autre page

1. Ouvrez la page protger.
menu droulant, slectionnez Authentification de l'utilisateur > Restreindre l'accs la page.
3. Slectionnez le niveau d'accs pour la page. Si vous voulez que seuls les utilisateurs ayant certains privilges puissent
afficher la page, slectionnez l'option Nom d'utilisateur, mot de passe et niveau d'accs et spcifiez le niveau d'accs de la
page.
Vous pouvez par exemple stipuler que seuls les utilisateurs disposant des privilges Administrateur peuvent afficher la page,
en slectionnant Administrateur dans la liste des niveaux d'autorisation.
4. Pour ajouter des niveaux d'autorisation la liste, cliquez sur Dfinir. Dans la liste Dfinir les niveaux d'accs qui s'affiche,
entrez un nouveau niveau d'accs, puis cliquez sur le bouton Plus (+). Le nouveau niveau d'autorisation est stock de manire
pouvoir tre utilis avec les autres pages.
Vrifiez que la chane du niveau d'autorisation correspond exactement la chane stocke dans votre base de donnes des
801
utilisateurs. Par exemple, si la colonne autorisation de votre base de donnes contient la valeur Administrator, tapez
Administrator, et non Admin, dans la zone de texte Nom.
5. Si vous voulez dfinir plusieurs niveaux d'autorisation pour une page, cliquez sur les niveaux de la liste tout en maintenant la
touche Ctrl (Windows) ou Commande (Macintosh) enfonce.
Vous pouvez par exemple stipuler que tout utilisateur possdant les privilges Visiteur, Membre ou Administrateur peut
consulter la page.
6. Indiquez la page ouvrir si un utilisateur non autoris tente d'ouvrir la page protge.
Vrifiez bien que la page choisie n'est pas protge.
7. Cliquez sur OK.
Copie et collage des droits d'accs d'une page sur d'autres pages du site
1. Ouvrez la page protge et slectionnez le comportement Restreindre l'accs la page dans le panneau Comportements de
serveur, et non dans le menu droulant Plus (+).
2. Cliquez sur la flche dans le coin suprieur droit du panneau et slectionnez Copier dans le menu droulant.
Le comportement de serveur Restreindre l'accs la page est copi dans le Presse-papiers de votre systme.
3. Ouvrez une autre page protger de la mme faon.
4. Dans le panneau Comportements de serveur (Fentre > Comportements de serveur), cliquez sur la flche dans le coin
suprieur droit et slectionnez Coller dans le menu droulant.
5. Rptez les tapes 3 et 4 pour chaque page protger.
Stockage des privilges d'accs dans la base de donnes des utilisateurs
Haut de la page
Ce bloc structurel n'est ncessaire que si vous voulez octroyer diffrents privilges certains des utilisateurs connects. Si vous voulez
simplement que l'utilisateur se connecte, il n'est pas ncessaire de stocker des privilges d'accs.
1. Si vous voulez que certains utilisateurs connects aient diffrents privilges d'accs, assurez-vous que votre table de base de
donnes des utilisateurs contient une colonne spcifiant les privilges d'accs de chaque utilisateur (Visiteur, Utilisateur,
Administrateur, etc.). Les privilges d'accs de chaque utilisateur doivent tre entrs dans la base de donnes par
l'administrateur du site.
Dans la plupart des applications de base de donnes, vous avez la possibilit d'affecter une valeur par dfaut une colonne
pour chaque nouvel enregistrement cr. Choisissez comme valeur par dfaut les privilges d'accs les plus courants de
votre site (Invit, par exemple), puis changez manuellement les exceptions (en remplaant Invit par Administrateur, par
exemple). L'utilisateur a maintenant accs toutes les pages administrateur.
2. Vrifiez que chaque utilisateur dans la base de donnes n'a qu'un seul privilge d'accs, comme Invit ou Administrateur, et
non plusieurs. Si vous voulez dfinir plusieurs privilges d'accs pour vos pages (en octroyant l'accs d'une page tous les
invits et tous les administrateurs, par exemple), vous devez dfinir ces privilges au niveau de la page, et non de la base de
donnes.
Haut de la page
Dconnexion d'utilisateurs
Lorsque l'utilisateur tablit la connexion avec succs, une variable de session compose du nom d'utilisateur est cre. Lorsque l'utilisateur quitte
votre site, vous pouvez utiliser le comportement de serveur Dconnecter l'utilisateur pour effacer cette variable de session et rediriger l'utilisateur
vers une autre page (gnralement une page de fin de session ou de remerciement).
Vous pouvez appeler le comportement de serveur Dconnecter l'utilisateur lorsque l'utilisateur clique sur un lien ou qu'une page spcifique est
charge.
Ajout d'un lien permettant l'utilisateur de se dconnecter

1. Slectionnez le texte ou l'image utiliser comme lien dans la page.
2. Dans le panneau Comportements de serveur (Fentre > Comportements), cliquez sur le bouton Plus (+) et slectionnez
Authentification de l'utilisateur > Dconnecter l'utilisateur.
3. Indiquez une page ouvrir lorsque l'utilisateur clique sur le lien, puis cliquez sur OK.
Il s'agit gnralement d'une page de fin de session ou de remerciement.
Dconnexion des utilisateurs lors du chargement d'une page spcifique

1. Ouvrez la page qui se chargera dans Dreamweaver.
Il s'agit gnralement d'une page de fin de session ou de remerciement.
802
2. Dans le panneau Comportements de serveur, cliquez sur le bouton Plus (+) et slectionnez Authentification de l'utilisateur >
Dconnecter l'utilisateur.
3. Slectionnez l'option Se dconnecter au chargement de la page, puis cliquez sur OK.
Voir aussi
803
Scurisation dun dossier dans votre application (ColdFusion)

Scurisation dun dossier ou dun site sur le serveur (ColdFusion)
Haut de la page
Scurisation dun dossier ou dun site sur le serveur (ColdFusion)

Dreamweaver permet de protger laide dun mot de passe un dossier spcifique de lapplication ColdFusion, y compris le dossier racine de
lapplication. Dans ce cas, lorsquun visiteur demande une page figurant dans ce dossier, ColdFusion demande un nom dutilisateur et un mot de
passe. ColdFusion enregistre le nom dutilisateur et le mot de passe dans des variables de session, de sorte que le visiteur ne se les voit plus
demander au cours de la mme session.
Remarque : cette fonctionnalit nest disponible que si vous pouvez accder un ordinateur excutant ColdFusion MX 7 ou une version
ultrieure.
1. Ouvrez un document ColdFusion dans Dreamweaver, et choisissez Commandes > Assistant douverture de session
ColdFusion.
2. Saisissez les paramtres voulus dans lassistant douverture de session ColdFusion.
a. Indiquez le chemin daccs complet du rpertoire scuriser et cliquez sur Suivant.
b. Dans lcran suivant, choisissez lun des types dauthentification suivants :
Authentification simple Scurise lapplication laide dun nom et dun mot de passe identiques pour tous les
utilisateurs.
Authentification Windows NT Scurise lapplication avec les noms dutilisateur et mots de passe de Windows NT.
Authentification LDAP Scurise lapplication avec les noms dutilisateur et mots de passe enregistrs sur un serveur
LDAP.
c. Indiquez si vous souhaitez que les utilisateurs se connectent laide dune page douverture de session ColdFusion ou dun
menu droulant.
d. Dans lcran suivant, dfinissez les options ci-dessous :
Si vous avez choisi lauthentification simple, indiquez le nom et le mot de passe que chaque utilisateur doit saisir.
Si vous avez choisi lauthentification Windows NT, indiquez le domaine NT utiliser pour la validation.
Si vous avez choisi lauthentification LDAP, indiquez le serveur LDAP utiliser pour la validation.
3. Transfrez les nouveaux fichiers sur le site distant. Ces fichiers se trouvent dans le dossier local de votre site.
804

A propos des composants ColdFusion
Prsentation du panneau Composants (ColdFusion)
Cration ou suppression dun CFC dans Dreamweaver
Affichage de CFC dans Dreamweaver
Modification de CFC dans Dreamweaver
Cration de pages Web qui emploient des CFC
Dfinition dun jeu denregistrements dans un CFC
Utilisation dun jeu denregistrements dans un CFC comme source de contenu dynamique
Dfinition de contenu dynamique laide dun CFC
Haut de la page
A propos des composants ColdFusion

Les fichiers de composants ColdFusion (CFC) permettent dencapsuler la logique dapplication et dentreprise au sein dunits autonomes
rutilisables. Ils permettent galement de crer rapidement des services Web.
Un composant ColdFusion est une unit logicielle rutilisable crite en CFML (ColdFusion markup language), qui facilite la rutilisation et la
maintenance du code.
Vous pouvez utiliser Dreamweaver pour travailler avec des CFC. Pour plus dinformations sur les balises et la syntaxe des CFC, consultez la
documentation de ColdFusion dans Dreamweaver (Aide > Utilisation de ColdFusion).
Remarque : les CFC ne peuvent tre utiliss quavec ColdFusion MX ou une version ultrieure. Les CFC ne sont pas pris en charge par la
version 5 de ColdFusion.
Les CFC sont conus pour offrir aux dveloppeurs une mthode dencapsulage des lments de leurs sites Web, qui soit la fois simple et
puissante. Ces composants sutilisent gnralement pour la logique dapplication ou dentreprise. Utilisez des balises personnalises pour
introduire des lments de prsentation tels que des messages personnaliss ou des menus dynamiques.
Lajout de parties interchangeables peut rendre les sites dynamiques plus efficaces, comme cest le cas pour bon nombre dautres types de
structures. Il peut arriver, par exemple, quun site dynamique doive excuter la mme requte maintes reprises ou recalculer le prix total dun
panier dachats chaque fois quun article est ajout. Les composants peuvent se charger de ces tches. Vous pouvez rparer, amliorer,
dvelopper, voire remplacer un composant sans que cela ait un grand impact sur le reste de lapplication.
Prenons lexemple dun magasin en ligne qui calcule les frais de port en fonction du total de la commande passe. Pour les commandes
infrieures 20 , les frais de port sont de 4 ; pour les commandes comprises entre 20 et 40 , ils sont de 6 , etc. Vous pourriez insrer la
logique de calcul des frais de port sur la page du panier dachats et sur la page de rglement. Vous seriez alors amen mlanger du code de
prsentation HTML et du code de logique CFML. Avec cette mthode, il est cependant souvent difficile de rutiliser et de grer le code.
Il vaut donc mieux crer un CFC appel Pricing, incluant entre autres une fonction appele ShippingCharge. La fonction accepte un argument
reprsentant un prix et renvoie les frais de port. Ainsi, si la valeur de largument est de 32,80, la fonction renvoie 6.
Sur les pages du panier dachats et de rglement, il vous reste insrer une balise spciale appelant la fonction ShippingCharge. Lorsque la
page est demande, la fonction est appele et les frais de port sont renvoys la page.
Supposons que le magasin fasse ultrieurement une offre promotionnelle : livraison gratuite pour toute commande dun montant suprieur
100 . Il vous suffit alors de modifier les frais de port un seul endroit, savoir la fonction ShippingCharge du composant Pricing, pour que les
frais de port soient mis jour sur toutes les pages utilisant la fonction.
Haut de la page
Prsentation du panneau Composants (ColdFusion)

Le panneau Composants (Fentre > Composants) permet dafficher et de modifier les composants ColdFusion, ainsi que dcrire dans la page un
805
code qui appelle la fonction lorsque la page CFM est demande.

Remarque : le panneau Composants est uniquement disponible lors de laffichage dune page ColdFusion dans le panneau Dreamweaver.
Haut de la page
Cration ou suppression dun CFC dans Dreamweaver

Vous pouvez utiliser Dreamweaver pour dfinir visuellement un CFC et ses fonctions. Dreamweaver cre un fichier .cfc et insre automatiquement
les balises CFML ncessaires.
Remarque : selon le composant, il vous faudra peut-tre complter le code manuellement.
2. Dans le panneau Composants (Fentre > Composants), choisissez Composants CF dans le menu droulant.
3. Cliquez sur le bouton plus (+), compltez la bote de dialogue Crer un composant, puis cliquez sur OK.
a. Dans la section Composants, saisissez les dtails du composant. Voici une liste partielle :
Nom Spcifie le nom de fichier du composant. Ce nom ne peut contenir que des caractres alphanumriques et des
caractres de soulignement (_). Il est inutile dajouter lextension de fichier .cfc au nom.
Rpertoire des composants Spcifie lemplacement o est enregistr le composant. Slectionnez le dossier racine
de lapplication Web (\Inetpub\wwwroot\monapp\, par exemple) ou lun de ses sous-dossiers.
b. Pour dfinir une ou plusieurs fonctions pour le composant, choisissez Fonctions dans la liste Section, cliquez sur le
bouton Plus (+), puis saisissez les dtails de la nouvelle fonction.
Veillez bien dfinir le type de valeur renvoye par la fonction dans loption Type de renvoi.
Si vous choisissez loption distant dans le menu Accs, la fonction peut dsormais servir de service Web.
c. Pour dfinir un ou plusieurs arguments pour une fonction, choisissez Arguments dans la liste Section, slectionnez la
fonction dans le menu droulant, cliquez sur le bouton Plus (+), puis saisissez les dtails du nouvel argument sur la droite.
4. Si vous utilisez un serveur de dveloppement distant, tlchargez vers le serveur distant le fichier CFC et tous les fichiers
indpendants (tels que ceux utiliss pour mettre en uvre une fonction ou inclure des fichiers).
Le tlchargement des fichiers vers le serveur garantit que les fonctionnalits de Dreamweaver, telles que le mode Live et
Aperu dans le navigateur, fonctionnent correctement.
Dreamweaver crit un fichier .cfc et lenregistre dans le dossier spcifi. Le nouveau composant saffiche galement dans le
panneau Composants (il vous suffit de cliquer sur Actualiser).
5. Si vous utilisez un serveur de dveloppement distant, tlchargez vers le serveur distant le fichier CFC et tous les fichiers
indpendants (tels que ceux utiliss pour mettre en uvre une fonction ou inclure des fichiers).
Haut de la page
Affichage de CFC dans Dreamweaver

Dreamweaver permet dexaminer visuellement et globalement les composants ColdFusion (CFC) situs dans le dossier de votre site ou sur le
serveur. Dreamweaver lit les fichiers CFC et affiche les informations qui les concernent dans une arborescence simple parcourir dans le
panneau Composants.
Dreamweaver recherche les composants sur votre serveur dvaluation (voir Connexion la base de donnes dans Dreamweaver). Si vous crez
des CFC ou modifiez des CFC existants, veillez les transfrer sur le serveur dvaluation afin quils apparaissent dans le panneau Composants.
Pour afficher les composants situs sur un autre serveur, modifiez les paramtres du serveur dvaluation.
Vous pouvez consulter les informations suivantes relatives aux composants CF :
dresser la liste de tous les composants ColdFusion dfinis pour le site ;
(si vous excutez ColdFusion MX 7 ou une version ultrieure) filtrer la liste pour afficher uniquement les CFC situs dans le
dossier de votre site ;
tudier les fonctions et arguments de chaque composant ;
examiner les proprits des fonctions qui servent de services Web.
806
Si vous voulez utiliser Dreamweaver pour inspecter les CFC rsidant dans la racine du serveur tout en grant les fichiers du site dans une
racine de site Web diffrente, vous pouvez dfinir deux sites Dreamweaver. Configurez le premier site de faon ce quil renvoie la racine du
serveur et le second pour quil renvoie la racine du site Web. Utilisez le menu Site du panneau Fichiers pour passer rapidement dun site
lautre.
Pour afficher les CFC dans Dreamweaver, procdez comme suit :

2. Dans le panneau Composants (Fentre > Composants), choisissez Composants CF dans le menu droulant.
3. Dans le panneau, cliquez sur le bouton Actualiser pour rcuprer les composants.
Les composants sont affichs sur le serveur. Les fichiers CFC des composants saffichent dans des dossiers.
Si les composants existants napparaissent pas, cliquez sur le bouton Actualiser dans la barre doutils du panneau.
4. Pour afficher uniquement les CFC situs dans le dossier de votre site, cliquez sur le bouton Afficher uniquement les fichiers
CFC du site actuel, dans la barre doutils du panneau Composants.
Remarque : cette fonctionnalit nest disponible que si vous avez dfini un ordinateur excutant ColdFusion MX 6 ou une
version ultrieure comme serveur dvaluation de Dreamweaver.
Remarque : si le site actuel apparat dans un dossier virtuel sur le serveur distant, le filtrage nest pas oprationnel.
5. Cliquez sur le bouton Plus (+) en regard du nom du dossier pour afficher les composants quil contient.
Pour dresser la liste des fonctions dun composant, cliquez sur le bouton Plus (+) en regard du nom du composant.
Pour connatre les arguments quune fonction accepte, ainsi que leur type et leur caractre facultatif ou obligatoire,
dveloppez la branche de la fonction dans larborescence.
Aucun bouton Plus (+) ne figure en regard des fonctions sans argument.
Pour afficher rapidement les dtails dun argument, dune fonction ou dun composant, slectionnez llment dans
larborescence, puis cliquez sur le bouton Obtenir des dtails dans la barre doutils du panneau.
Vous pouvez galement cliquer sur llment avec le bouton droit de la souris (Windows) ou en maintenant la touche
Contrle enfonce (Macintosh) et choisir Obtenir des dtails dans le menu droulant qui saffiche.
Les dtails de llment sont affichs dans une bote de message.
Haut de la page
Modification de CFC dans Dreamweaver

Dreamweaver permet de modifier de faon rationalise le code des composants ColdFusion dfinis dans un site. Vous pouvez, par exemple,
ajouter, modifier ou supprimer toute fonction dun composant sans quitter Dreamweaver.
Pour ce faire, votre environnement de dveloppement doit tre configur comme suit :
ColdFusion doit sexcuter localement.

Dans longlet Avanc de la bote de dialogue Dfinition du site de Dreamweaver, le type daccs spcifi dans la catgorie du
serveur dvaluation doit tre Local/Rseau.
Dans longlet Avanc de la bote de dialogue Dfinition du site, le chemin daccs votre dossier racine local doit tre
identique au chemin daccs au dossier du serveur dvaluation (par exemple, c:\Inetpub\wwwroot\cf_projects\myNewApp\).
Pour consulter et modifier ces chemins daccs, choisissez Site > Modifier les sites.
Le composant doit tre stock dans le dossier local du site ou dans lun de ses sous-dossiers sur votre disque dur.
Ouvrez une page ColdFusion dans Dreamweaver et affichez les composants dans le panneau Composants. Pour afficher les composants, ouvrez
le panneau Composants (Fentre > Composants), choisissez Composants CF dans le menu droulant du panneau, puis cliquez sur le bouton
Actualiser dans le panneau.
Comme ColdFusion sexcute localement, Dreamweaver affiche les composants figurant sur votre disque dur.
Procdez comme suit pour modifier un composant.
1. Ouvrez une page ColdFusion dans Dreamweaver et affichez les composants dans le panneau Composants (Fentre >
807
Composants).
2. Dans le menu droulant du panneau, choisissez Composants CF, puis cliquez sur le bouton Actualiser la liste des composants
ColdFusion (CFC).
Comme ColdFusion sexcute localement, Dreamweaver affiche les composants figurant sur votre disque dur.
Remarque : pour modifier visuellement le jeu denregistrements du CFC, double-cliquez sur son nom dans le panneau
Liaisons.
3. Pour modifier un fichier du composant de faon gnrale, ouvrez le dossier dans lequel il rside et double-cliquez sur le nom
du composant dans larborescence.
Le fichier du composant est ouvert en mode Code.
4. Pour modifier une fonction, un argument ou une proprit spcifique, double-cliquez sur llment dans larborescence.
5. Effectuez les modifications manuellement en mode Code.
6. Enregistrez le fichier (Fichier > Enregistrer).
7. Pour quune nouvelle fonction apparaisse dans le panneau Composants, actualisez la vue en cliquant sur le bouton Actualiser
dans la barre doutils du panneau.
Haut de la page
Cration de pages Web qui emploient des CFC

Pour utiliser la fonction dun composant dans vos pages Web, vous pouvez crire dans la page un code qui appelle la fonction lorsque la page est
demande. Dreamweaver peut vous aider effectuer cette opration.
Remarque : pour connatre dautres modes dutilisation des composants, consultez la documentation de ColdFusion dans Dreamweaver (Aide >
Utilisation de ColdFusion).
1. Dans Dreamweaver, ouvrez la page ColdFusion qui doit utiliser la fonction de composant.
2. Basculez en mode Code (Affichage > Code).
3. Ouvrez le panneau Composants (Fentre > Composants), puis choisissez Composants CF dans le menu droulant.
4. Recherchez le composant utiliser et insrez-le laide de lune des mthodes suivantes :
A partir de larborescence, faites glisser une fonction sur la page. Du code permettant dappeler la fonction est insr dans
la page.
Slectionnez la fonction dans le panneau et cliquez sur le bouton Insrer de la barre doutils du panneau (deuxime
bouton partir de la droite). Dreamweaver insre le code dans la page au niveau du point dinsertion.
5. Si vous insrez une fonction possdant des arguments, compltez manuellement le code des arguments.
Pour plus dinformations, consultez la documentation de ColdFusion dans Dreamweaver (Aide > Utilisation de ColdFusion).
6. Enregistrez la page (Fichier > Enregistrer).
Haut de la page
Dfinition dun jeu denregistrements dans un CFC

Dreamweaver permet de dfinir un jeu denregistrements (requte ColdFusion) dans un composant ColdFusion (CFC). En dfinissant un jeu
denregistrements dans un CFC, il nest plus ncessaire de le dfinir dans chaque page qui lutilise. Le jeu denregistrements est dfini une fois
pour toutes dans le CFC, qui est utilis dans les diffrentes pages.
ultrieure. Pour plus dinformations, voir Activation des amliorations ColdFusion.
1. Crez ou ouvrez un fichier CFC dans Dreamweaver.

2. Dans le panneau Liaisons (Fentre > Liaisons), cliquez sur le bouton Plus (+) et slectionnez Jeu denregistrements (Requte)
808
La bote de dialogue Jeu denregistrements saffiche. Vous pouvez choisir de travailler dans la bote de dialogue simple ou
avance.
3. Pour utiliser une fonction existante du CFC, slectionnez cette fonction dans la liste droulante Fonction, puis passez
ltape 5.
Le jeu denregistrements sera dfini dans cette fonction.
4. Pour dfinir une nouvelle fonction dans le CFC, cliquez sur le bouton Nouvelle fonction, saisissez le nom de la fonction dans
la bote de dialogue qui apparat alors, et cliquez sur OK.
Ce nom ne peut contenir que des caractres alphanumriques et des caractres de soulignement (_).
5. Pour dfinir un jeu denregistrements pour la fonction, dfinissez les options de la bote de dialogue Jeu denregistrements.
La nouvelle fonction est insre dans le CFC qui dfinit le jeu denregistrements.
Haut de la page
Utilisation dun jeu denregistrements dans un CFC comme source de contenu dynamique
Il est possible dutiliser un composant ColdFusion (CFC) comme source de contenu dynamique des pages, si ce composant contient une fonction
dfinissant un jeu denregistrements.
ultrieure. Pour plus dinformations, consultez la section Activation des amliorations ColdFusion.
2. Dans le panneau Liaisons (Fentre > Liaisons), cliquez sur le bouton Plus (+) et slectionnez Jeu denregistrements (Requte)
La bote de dialogue Jeu denregistrements saffiche. Vous pouvez choisir de travailler dans la bote de dialogue simple ou
avance.
3. Cliquez sur le bouton Requte CFC.
4. Remplissez la bote de dialogue Requte CFC, cliquez sur OK, puis cliquez nouveau sur OK pour ajouter le jeu
denregistrements CFC la liste des sources de contenu disponibles dans le panneau Liaisons.
5. Utilisez le panneau Liaisons pour lier le jeu denregistrements aux divers lments de la page.
Pour plus dinformations, voir Ajout de contenu dynamique dans les pages.
Haut de la page
Dfinition de contenu dynamique laide dun CFC

Vous pouvez dfinir un jeu denregistrements comme source de contenu dynamique dans Dreamweaver en utilisant un CFC qui contient une
dfinition de jeu denregistrements.
1. Dans la zone Nom, saisissez le nom du jeu denregistrements CFC.

Il est dusage dajouter le prfixe rs aux noms des jeux denregistrements, afin de les distinguer des autres noms dobjet dans le code, par
exemple : rsPressRelease.
Le nom dun jeu denregistrements ne peut contenir que des caractres alphanumriques et des caractres de soulignement (_). Ils ne doivent pas
comporter despaces ni de caractres spciaux.
2. Slectionnez un dossier parmi ceux qui sont dfinis sur le serveur.

Si le dossier napparat pas dans le menu droulant, actualisez la liste en cliquant sur le bouton Actualiser ct du menu.
Auparavant, vrifiez que vous avez bien transfr vos CFC sur le serveur dvaluation. Seuls les fichiers CFC sur le serveur dvaluation sont
affichs.
3. Slectionnez un composant parmi ceux qui sont dfinis dans le dossier slectionn.
809
Si le menu droulant des composants ne contient aucun composant, ou si aucun des composants que vous avez crs prcdemment napparat,
transfrez vos fichiers CFC sur le serveur dvaluation.
4.(Facultatif) Pour crer un nouveau composant, cliquez sur le bouton Crer un nouveau composant.
a. Dans la zone Nom, saisissez le nom du nouveau CFC. Ce nom ne peut contenir que des caractres alphanumriques et des caractres
de soulignement (_).
b. Dans la zone Rpertoire des composants, saisissez lemplacement du CFC, ou recherchez le dossier correspondant.
Remarque : ce dossier doit tre le chemin relatif au dossier racine du site.
5. Dans le menu droulant Fonction, slectionnez la fonction contenant la dfinition du jeu denregistrements.
Le menu droulant Fonction ne contient que les fonctions dfinies dans le composant slectionn. Si aucune fonction napparat dans le menu
droulant, ou si vos derniers changements napparaissent pas dans les fonctions affiches, vrifiez que les derniers changements ont bien t
enregistrs et transfrs sur le serveur.
Remarque : les zones Connexion et SQL sont en lecture seule.
6. Cliquez sur le bouton Modifier pour modifier chaque paramtre (type, valeur, valeur par dfaut) qui doit tre pass en argument la fonction.
a. Saisissez une valeur pour le paramtre actuel en slectionnant le type de valeur dans le menu droulant Valeur et en saisissant la valeur
voulue dans la zone situe sa droite. Le type de valeur peut tre un paramtre dURL, une variable de formulaire, un cookie, une variable
de session, une variable dapplication ou une valeur fixe que vous saisissez.
b. Dans la zone Valeur par dfaut, saisissez la valeur par dfaut que vous souhaitez attribuer au paramtre. Si aucune valeur nest
renvoye lexcution, la valeur par dfaut est utilise.
c. Cliquez sur OK.
Il est impossible de modifier la connexion de base de donnes et la requte SQL du jeu denregistrements. Ces champs sont toujours dsactivs,
et ces donnes ne sont affiches ici qu titre dinformation.
7. Cliquez sur Tester pour vous connecter la base de donnes et crer une instance du jeu denregistrements.
Si linstruction SQL contient des paramtres de page, vrifiez que la colonne Valeur par dfaut de la zone Paramtres contient des valeurs test
correctes avant de cliquer sur Tester.
Si la requte a t correctement excute, le jeu denregistrements est affich dans un tableau. Chaque ligne contient un enregistrement et
chaque colonne un champ de cet enregistrement.
Cliquez sur OK pour effacer la requte CFC.
8. Cliquez sur OK.
810
Accessibilit
811
Dreamweaver et l'accessibilit
A propos du contenu accessible
Utilisation de lecteurs d'cran avec Dreamweaver
Prise en charge des fonctions d'accessibilit du systme d'exploitation
Optimisation de l'espace de travail pour la conception de pages accessibles
Fonction de rapport de validation d'accessibilit de Dreamweaver
Navigation dans Dreamweaver l'aide du clavier
Haut de la page
A propos du contenu accessible
L'accessibilit consiste faire en sorte que les sites ou les produits Web que vous crez puissent tre utiliss par des personnes souffrant de
handicaps visuels, auditifs, moteurs ou autres. Les fonctions d'accessibilit de produits logiciels et de sites Web peuvent tre : la prise en charge
de lecteurs d'cran, des quivalents textuels pour les graphiques, des raccourcis clavier, des modifications dans les couleurs d'affichage pour
augmenter le contraste, etc. Dreamweaver inclut des outils qui facilitent son utilisation et vous permettent de crer un contenu accessible.
Pour les dveloppeurs Dreamweaver qui doivent faire appel aux fonctions d'accessibilit, l'application prend en charge des lecteurs d'cran, la
navigation avec le clavier et les fonctions d'accessibilit de votre systme d'exploitation.
Pour les concepteurs Web qui souhaitent crer du contenu accessible, Dreamweaver vous aide crer des pages accessibles au contenu utile
pour les lecteurs d'cran et en conformit avec les directives gouvernementales. Par exemple, des botes de dialogue vous invitent entrer des
attributs d'accessibilit, tels que l'quivalent texte d'une image, lorsque vous insrez des lments de page. Ainsi, lorsque l'image s'affiche sur le
systme d'un utilisateur ayant des problmes de vue, le lecteur d'cran lit la description.
Remarque : Pour en savoir plus sur deux de ces importantes initiatives, consultez le site de la World Wide Web Consortium Web Accessibility
Initiative (www.w3.org/wai) et la Section 508 de la loi amricaine Federal Rehabilitation Act (www.section508.gov).
Aucun outil de cration Web ne peut automatiser entirement le processus de dveloppement. Pour concevoir des sites Web accessibles, vous
devez comprendre les exigences lies l'accessibilit et devez continuellement tenir compte lors de vos prises de dcisions de la faon dont les
personnes souffrant d'un handicap interagissent avec les pages Web. La meilleure faon de s'assurer qu'un site Web est accessible est de
respecter toutes les procdures de prparation, de dveloppement, de tests et d'valuation.
Haut de la page
Utilisation de lecteurs d'cran avec Dreamweaver
Un lecteur d'cran rcite le texte qui s'affiche sur l'cran de l'ordinateur. Il lit aussi les informations non textuelles, telles que les tiquettes de
boutons ou les descriptions d'images dans l'application, fournies dans les balises ou les attributs d'accessibilit lors de la cration.
En tant que concepteur Dreamweaver, vous pouvez utiliser un lecteur d'cran pour vous assister dans la cration de vos pages Web. Le lecteur
d'cran commence sa lecture par le coin suprieur gauche de la fentre de document.
Dreamweaver prend en charge les lecteurs d'cran JAWS pour Windows de Freedom Scientific (www.freedomscientific.com) et Window-Eyes de
GW Micro (www.gwmicro.com).
Prise en charge des fonctions d'accessibilit du systme d'exploitation
Haut de la page
Dreamweaver prend en charge les fonctionnalits d'accessibilit des systmes d'exploitation Windows et Macintosh. Par exemple, sur le
Macintosh, dfinissez les prfrences visuelles dans la bote de dialogue Prfrences d'accs universelles (Apple > Prfrences systme). Les
paramtres slectionns sont alors repris par l'espace de travail de Dreamweaver.
Le paramtre de contraste lev du systme d'exploitation Windows est galement pris en charge. Vous pouvez activer cette option l'aide du
Panneau de configuration de Windows et elle affecte Dreamweaver de la faon suivante :
Les botes de dialogue et les panneaux utilisent des paramtres de couleurs systme. Par exemple, si vous fixez les couleurs
Blanc sur Noir, les botes de dialogue et les panneaux Dreamweaver utilisent du blanc comme couleur de premier plan et du
noir en arrire-plan.
Le mode Code utilise les couleurs systme des fentres et du texte de fentres. Par exemple, si vous avez fix les couleurs
systme Blanc sur Noir et que vous changez les couleurs de texte dans Edition > Prfrences > Coloration du code,
Dreamweaver ignore ces paramtres de couleur et affiche le texte de code avec du blanc comme couleur de premier plan et
du noir en arrire-plan.
Le mode Cration utilise les couleurs d'arrire-plan et de texte que vous avez dfinies dans Modifier > Proprits de la page
812
pour que les pages que vous crez aient un rendu des couleurs similaire celui d'un navigateur.
Optimisation de l'espace de travail pour la conception de pages accessibles
Haut de la page
Lorsque vous crez des pages accessibles, vous devez associer des informations aux objets prsents sur les pages, telles que des tiquettes et
des descriptions, pour rendre votre contenu accessible tous les utilisateurs.
Pour ce faire, activez la bote de dialogue Accessibilit de chaque objet, de faon ce que Dreamweaver vous demande d'entrer les informations
d'accessibilit lorsque vous insrez des objets. Vous pouvez activer une bote de dialogue pour n'importe quel objet de la catgorie Accessibilit
dans les prfrences.
2. Slectionnez la catgorie Accessibilit dans la liste gauche, slectionnez un objet, dfinissez les options suivantes, puis
cliquez sur OK.
Affichage des attributs lors de l'insertion Slectionnez les objets pour lesquels vous souhaitez activer les botes de
dialogue d'accessibilit. Par exemple, les objets de formulaire, les cadres, les mdias et les images.
Laisser le focus sur le panneau Conserve le panneau l'tat actif afin qu'il soit disponible pour le lecteur d'cran. Si vous
ne slectionnez pas cette option, le focus demeure en mode Cration ou Code lorsqu'un utilisateur ouvre un panneau.
Restitution hors cran Slectionnez cette option lorsque vous utilisez un lecteur d'cran.
Remarque : Les attributs d'accessibilit apparaissent dans la bote de dialogue Tableau lors de l'insertion d'un nouveau
tableau.
Fonction de rapport de validation d'accessibilit de Dreamweaver
Haut de la page
La fonction de validation de l'accessibilit de Dreamweaver a t abandonne depuis Dreamweaver CS5.
Haut de la page
Navigation dans Dreamweaver l'aide du clavier
Vous pouvez utiliser le clavier pour parcourir les panneaux, les inspecteurs, les botes de dialogue, les cadres et les tableaux sans utiliser de
souris.
Remarque : L'utilisation de la touche de tabulation et des touches flches n'est prise en charge que sous Windows.
Navigation dans les panneaux

1. Dans la fentre de document, appuyez sur Ctrl+F6 pour activer un panneau.
Une ligne pointille autour du titre du panneau indique que le panneau est actif. Le lecteur d'cran lit la barre de titre du
panneau actif.
2. Appuyez de nouveau sur Ctrl+F6 jusqu' ce que le panneau dans lequel vous voulez travailler soit actif. Appuyez sur
Ctrl+Maj+F6 pour activer le panneau prcdent.
3. Si le panneau dans lequel vous voulez travailler n'est pas ouvert, utilisez les raccourcis clavier indiqus dans le menu Fentre
pour afficher le panneau appropri, puis appuyez sur Ctrl+F6.
Si le panneau dans lequel vous voulez travailler est ouvert, mais affich sous sa forme rduite, activez la barre de titre du
panneau et appuyez sur la barre d'espace. Appuyez de nouveau sur la barre d'espace pour rduire le panneau.
4. Appuyez sur la touche de tabulation pour passer d'une option une autre dans le panneau.
5. Utilisez les touches flches de faon approprie :
Si une option comporte des choix, utilisez les touches flches pour faire dfiler ces choix, puis appuyez sur la barre
d'espace pour valider la slection.
Si le groupe de panneaux comporte des onglets pour ouvrir d'autres panneaux, activez l'onglet ouvert puis utilisez la
touche flche gauche ou droite pour ouvrir un autre onglet. Aprs avoir ouvert un nouvel onglet, appuyez sur la touche
de tabulation pour faire dfiler les options de ce panneau.
Navigation dans l'inspecteur Proprits

1. Appuyez sur Ctrl+F3 pour afficher l'inspecteur Proprits, s'il n'est pas visible.
2. Appuyez sur Ctrl+F6 (Windows uniquement) jusqu' ce que l'inspecteur Proprits soit actif.
3. Appuyez sur la touche de tabulation pour passer d'une option de l'inspecteur Proprits une autre.
4. Utilisez les touches flches pour parcourir les diffrentes options.
5. Appuyez sur Ctrl+Flche vers le bas/Flche vers le haut (Windows) ou sur Commande+Flche vers le bas/Flche vers le haut
(Macintosh) pour ouvrir ou fermer la section dveloppe de l'inspecteur Proprits, selon vos besoins. Alternativement, placez
le focus sur la flche de dveloppement dans le coin infrieur droit puis appuyez sur la barre d'espace.
813
Remarque : Pour pouvoir dvelopper et rduire l'inspecteur Proprits, le focus du clavier doit se trouver dans celui-ci, et pas
sur le titre du panneau.
Navigation dans une bote de dialogue

1. Appuyez sur la touche de tabulation pour passer d'une option une autre dans la bote de dialogue.
2. Utilisez les touches flches pour faire dfiler les choix d'une option.
3. Si la bote de dialogue comporte une liste Catgorie, appuyez sur Ctrl+Tab (Windows) pour activer la liste Catgorie puis
utilisez les touches flches pour vous dplacer vers le haut ou vers le bas dans la liste.
4. Appuyez de nouveau sur Ctrl+Tab pour afficher les options d'une catgorie.
5. Appuyez sur Entre pour quitter la bote de dialogue.
Navigation dans les cadres

Si votre document contient des cadres, vous pouvez utiliser les touches flches pour activer un cadre.
Slection d'un cadre

1. Appuyez sur Alt+Flche vers le bas pour placer le point d'insertion dans la fentre de document.
2. Appuyez sur Alt+Flche vers le haut pour slectionner le cadre actif.
3. Continuez d'appuyer sur Alt+Flche vers le haut pour activer le jeu de cadres, puis les jeux de cadres parents, s'il existe des
jeux de cadres imbriqus.
4. Appuyez sur Alt+Flche vers le bas pour activer un jeu de cadres enfant ou un seul cadre dans un jeu de cadres.
5. Lorsqu'un cadre est actif, appuyez sur Alt+Flche gauche ou droite pour vous dplacer entre les cadres.
Navigation dans un tableau

1. Utilisez les touches flches ou appuyez sur la touche de tabulation pour vous dplacer vers d'autres cellules dans un
tableau.
Si vous appuyez sur la touche de tabulation lorsque vous tre dans la cellule la plus droite, vous ajoutez une ligne au
tableau.
2. Pour slectionner une cellule, appuyez sur Ctrl+A (Windows uniquement) lorsque le point d'insertion est dans la cellule.
3. Pour slectionner un tableau en entier, appuyez deux fois sur Ctrl+A (Windows) si le point d'insertion est dans une cellule ou
une fois si une cellule est slectionne.
4. Pour quitter le tableau, appuyez trois fois sur Ctrl+A (Windows) lorsque le point d'insertion est dans une cellule, deux fois si la
cellule est slectionne ou une fois si le tableau est slectionn, puis appuyez sur les touches Haut, Gauche ou Droite.
814
Dreamweaver et Creative Cloud
815
Synchronisation des paramtres de Dreamweaver avec

Creative Cloud
Premire synchronisation
Importation des paramtres des versions prcdentes de Dreamweaver
Modification des prfrences pour la synchronisation des paramtres
Synchronisation automatique
Synchronisation manuelle
Rsolution de conflits lors de la synchronisation
Accs direct aux ressources sur Creative Cloud
Un compte dabonnement Adobe Creative Cloud vous permet dactiver Dreamweaver sur deux machines. Un
compte dabonnement est fondamentalement le compte de lAdobe ID avec lequel vous avez achet
labonnement. La synchronisation avec le cloud est troitement lie votre compte dabonnement.
La fonctionnalit de synchronisation dans le cloud permet de synchroniser les paramtres suivants de

Dreamweaver entre les deux machines :
Prfrences dapplication :
Gnral : toutes les prfrences sauf Activer les fichiers associs et Dcouvrir les
fichiers association dynamique.
Coloration du code : toutes les prfrences.
Format de code : toutes les prfrences sauf les bibliothques de balises.
Indicateurs de code : toutes les prfrences sauf les modifications effectues laide
du lien Editeur de la bibliothque de balises.
Correction du code : toutes les prfrences.
Copier/Coller : toutes les prfrences.
Styles CSS : toutes les prfrences.
Comparaison de fichiers : ce paramtre est uniquement synchronis entre des
ordinateurs qui tournent sous le mme systme dexploitation.
Types de fichiers/Editeurs : recharger uniquement les fichiers modifis et Enregistrer
au dmarrage.
Mise en surbrillance : toutes les prfrences.
Nouveau document : toutes les prfrences sauf Type de document par dfaut (DTD)
et Codage par dfaut.
Aperu dans le navigateur : seule la fonction Aperu laide dun fichier temporaire
est synchronise.
Site : toutes les prfrences sauf Toujours afficher <options> Sur la <Droite/Gauche>.
Programme de validation W3C : toutes les prfrences sauf les modifications
effectues avec loption Grer .
Tailles de fentre : toutes les prfrences.
Sur Mac, paramtres de la barre dapplication et du cadre dapplication.
Remarque : lexception de loption Comparaison de fichiers, toutes les autres prfrences rpertories cidessus sont synchronises entre les ordinateurs, indpendamment du systme dexploitation sous lequel ils
tournent. Par exemple, de Mac vers Windows.
Paramtres du site : tous les paramtres du site (sauf le nom dutilisateur et le mot de
passe) sont synchroniss entre les ordinateurs qui tournent sous le mme systme
dexploitation. Le nom dutilisateur et le mot de passe ne peuvent pas tre synchroniss.
816
Le chemin daccs et le nom du dossier local du site sont synchroniss sil existe un dossier du mme
nom au niveau du mme chemin daccs.
Si le site nexiste pas sur un ordinateur, Dreamweaver cre un nouveau dossier de site
lemplacement par dfaut et tous les chemins sont relatifs ce dossier. Vous pouvez modifier ce
chemin tout moment. Pour toutes les synchronisations suivantes, seules les modifications apportes
au dossier du site sont synchronises.
Raccourcis clavier : les raccourcis clavier ne sont synchroniss quentre les ordinateurs
qui tournent sous le mme systme dexploitation.
Espaces de travail : les espaces de travail sont enregistrs lorsque vous quittez
Dreamweaver puis sont synchroniss avec le cloud. Si vous souhaitez synchroniser des
modifications despace de travail sans quitter Dreamweaver (dans la session active),
cliquez sur Enregistrer actuel dans le menu Espace de travail, puis synchronisez
manuellement les paramtres (Prfrences > Synchroniser les paramtres).
Les espaces de travail ne sont synchroniss quentre les ordinateurs qui tournent sous le mme systme
dexploitation.
Remarque : vous pouvez dcider de ne pas synchroniser un paramtre prcis, par exemple les prfrences.
Pour ce faire, dsactivez la case cocher Obligatoire dans la bote de dialogue Prfrences (Synchroniser
les paramtres).
La synchronisation avec Creative Cloud nest pas prise en charge dans les situations suivantes :
Vous disposez dune licence en volume et vous tes connect en tant quutilisateur
anonyme.
Votre ordinateur est configur pour se connecter Internet via un serveur proxy.
Vous passez dun compte dadministrateur un compte dutilisateur standard.
Haut de la page
Premire synchronisation
Lorsque vous lancez Dreamweaver sur la machine o vous lavez install en premier lieu, la bote de
dialogue suivante saffiche :
Synchroniser les paramtres Synchronise immdiatement les paramtres avec le cloud.
Toujours synchroniser automatiquement les paramtres Synchronise automatiquement les paramtres.

Pour plus dinformations, voir Synchronisation automatique.
Dsactiver les paramtres de synchronisation Dsactive la synchronisation.

Remarque : vous pouvez activer la synchronisation tout moment en utilisant la bote de dialogue
Prfrences.
817
Avanc Ouvre les options Paramtres de synchronisation de la bote de dialogue Prfrences.
Paramtres de synchronisation dans la bote de dialogue Prfrences
Sur le second ordinateur, la bote de dialogue suivante saffiche lorsque vous lancez Dreamweaver :
Synchronisation du cloud Applique les paramtres stocks dans le cloud. Les prfrences de lapplication
sur le second ordinateur sont remplaces par les paramtres du cloud. Les paramtres du site dans le cloud
sont ajouts ceux du second ordinateur.
Synchronisation locale Les modifications apportes aux prfrences et aux paramtres du site sur le
second ordinateur sont conserves et sont galement transmises au cloud.
Toujours synchroniser automatiquement les paramtres Synchronise automatiquement les paramtres.

Pour plus dinformations, voir Synchronisation automatique.
Avanc Ouvre les options Paramtres de synchronisation de la bote de dialogue Prfrences.

Les scnarios suivants vous aideront comprendre la diffrence entre les options Synchronisation du cloud
et Synchronisation locale :
Scnario 1
Vous modifiez les prfrences sur le premier ordinateur et synchronisez ces modifications avec le cloud. Sur
818
le deuxime ordinateur, vous modifiez galement les prfrences. Ensuite, lorsque vous cliquez sur :
Synchronisation du cloud Les modifications apportes aux prfrences sur le premier ordinateur sont
synchronises avec le second ordinateur. Les modifications que vous avez apportes sur le second
ordinateur sont perdues.
Synchronisation locale Les modifications apportes aux prfrences sur le second ordinateur sont
conserves et sont galement synchronises avec le cloud. Lors de la prochaine synchronisation du premier
ordinateur, si vous choisissez Synchroniser le cloud, ces modifications sont rpercutes sur le premier
ordinateur.
Scnario 2
Synchronisation du cloud Les modifications apportes aux paramtres du site sur le premier ordinateur
sont ajoutes aux paramtres du second ordinateur.
Synchronisation locale Les modifications apportes sur le second ordinateur sont conserves et sont
synchronises avec le cloud. Lors de la prochaine synchronisation du premier ordinateur, si vous choisissez
Synchroniser le cloud, le nouveau site est ajout aux paramtres du premier ordinateur.
Remarque : si vous modifiez des paramtres dans la fentre Prfrences pendant la synchronisation, ceuxci ne seront pas appliqus.
Haut de la page
Importation des paramtres des versions prcdentes de

Dreamweaver
Si vous avez synchronis les paramtres Dreamweaver avec Creative Cloud, mme une seule fois, dans la
prcdente version de Dreamweaver, la nouvelle version de Dreamweaver affiche la bote de dialogue
suivante au premier dmarrage :
Importation des paramtres dans Dreamweaver CC 2014
Pour importer les paramtres stocks sur Creative Cloud, cliquez sur Importer les
paramtres synchroniss.
Remarque : cette option nest plus disponible par la suite.
Pour synchroniser les paramtres dans linstance actuelle de Dreamweaver avec
Creative Cloud, cliquez sur Sync. locale.
Pour synchroniser automatiquement les paramtres par la suite, slectionnez Toujours
synchroniser automatiquement les paramtres.
Pour afficher les options avances de synchronisation des paramtres, cliquez sur
Avanc.
Si vous navez pas synchronis les paramtres avec Creative Cloud en utilisant la prcdente version de
819
Dreamweaver, les options dcrites dans la section Premire synchronisation sont affiches.
Si vous voulez importer les paramtres plus tard, vous pouvez le faire laide de la bote de dialogue
Prfrences.
1. Slectionnez Edition > Prfrences pour ouvrir la bote de dialogue Prfrences.
2. Cliquez sur Paramtres de synchronisation dans la liste Catgorie.
Importation des paramtres des versions prcdentes de Dreamweaver
3. Slectionnez Importer les paramtres synchroniss, puis cliquez sur Fermer.

4. Quittez Dreamweaver et relancez lapplication afin dappliquer les paramtres imports.
Important : les options slectionnes dans la section Paramtres synchroniser ne sappliquent pas
limportation des paramtres enregistrs sur le cloud. Lorsque vous slectionnez loption Importer les
paramtres synchroniss, tous les paramtres enregistrs sur le cloud sont imports et les paramtres locaux
sont remplacs.
Haut de la page
Modification des prfrences pour la synchronisation des

paramtres
La bote de dialogue Prfrences vous permet de choisir les paramtres que vous souhaitez synchroniser, de
spcifier les paramtres de rsolution des conflits, dactiver la synchronisation automatique ou de dclencher
une synchronisation la demande.
820
2. Cliquez sur Paramtres de synchronisation dans la liste Catgorie.

3. Dans la section Paramtres synchroniser, cliquez sur le paramtre que vous voulez
synchroniser.
4. Dans la liste Rsolution des conflits, cliquez sur une option pour rsoudre les conflits au
cours de la synchronisation. Pour plus dinformations, voir Rsolution des conflits
pendant la synchronisation.
5. Pour activer la synchronisation automatique toutes les 30 minutes, cliquez sur Activer la
synchronisation automatique.
6. Pour synchroniser les paramtres un moment donn (synchronisation la demande),
cliquez sur Synchroniser les paramtres maintenant.
(13.1) Si des mises jour dans le cloud sont tlcharges sur votre ordinateur, le bouton
Synchroniser les paramtres maintenant devient Appliquer MJ. Vous pouvez choisir
dappliquer les mises jour immdiatement ou fermer la bote de dialogue Prfrences
afin dappliquer les mises jour plus tard. Si vous apportez des modifications
loccurrence de Dreamweaver sur lordinateur avant dappliquer les mises jour, un
conflit peut survenir. Il sera rsolu sur la base des paramtres de rsolution de conflits.
7. Cliquez sur Appliquer pour enregistrer les modifications que vous avez apportes aux
821
prfrences de synchronisation des paramtres.

8. Cliquez sur Fermer pour quitter la bote de dialogue Prfrences.
Haut de la page
Synchronisation automatique
Vous pouvez activer la synchronisation automatique de lune des faons suivantes :
Slectionnez Toujours synchroniser automatiquement les paramtres dans la bote de
dialogue Paramtres de synchronisation.
Remarque : les botes de dialogue Synchroniser les paramtres saffichent uniquement lorsque vous accdez
Dreamweaver pour la premire fois aprs lavoir install sur vos machines. Pour les synchronisations
suivantes, utilisez la bote de dialogue Prfrences ou la notification (
).
Cliquez sur Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Mac), puis
slectionnez Paramtres de synchronisation > Activer la synchronisation automatique.
Lorsque vous activez la synchronisation automatique, Dreamweaver recherche dventuelles modifications
dans le cloud toutes les 30 minutes et synchronise automatiquement les paramtres sil y a lieu.
Haut de la page
Synchronisation manuelle
Cliquez sur Synchroniser les paramtres maintenant dans la bote de dialogue
Paramtres de synchronisation.
Cliquez sur Modifier > (votre Adobe ID) > Synchroniser les paramtres maintenant.
Cliquez sur Synchroniser maintenant dans la notification. Pour ouvrir la bote de dialogue
de notification, cliquez sur
dans la barre doutils du document.
Bouton Sync. paramtres, avant synchronisation
Bouton Appliquer maintenant, aprs synchronisation

(uniquement en 13.1)
(13.1) Si des mises jour sont disponibles dans le cloud, elles sont tlcharges sur lordinateur. Le bouton
Synchroniser les paramtres dans la notification devient Appliquer maintenant. Vous pouvez choisir
dappliquer les mises jour immdiatement ou plus tard. Si vous apportez des modifications aux paramtres
de Dreamweaver avant dappliquer les mises jour tlcharges, un conflit peut survenir. Il sera rsolu sur la
base des paramtres de rsolution des conflits.
(Sous Mac) Dreamweaver > Synchroniser les paramtres maintenant et sous Windows,
Edition > Synchroniser les paramtres maintenant.
Haut de la page
Rsolution de conflits lors de la synchronisation

Sil existe une diffrence entre les paramtres des ordinateurs et ceux du cloud, le conflit est rsolu en
fonction des paramtres Rsolution des conflits de la bote de dialogue Prfrences.
822
Si le paramtre Rsolution des conflits est dfini sur Ma prfrence, la bote de dialogue suivante saffiche
lorsquun conflit survient :
Si vous slectionnez loption Mmoriser ma prfrence, loption que vous slectionnez (Synchronisation
locale ou Synchronisation du cloud) est coche dans la bote de dialogue Prfrences.
IMPORTANT : si vous appuyez sur la touche Echap pour fermer la bote de dialogue Paramtres en conflit,
laction de synchronisation locale est excute.
Haut de la page
Accs direct aux ressources sur Creative Cloud

Vous pouvez ouvrir, slectionner ou enregistrer des fichiers sur Creative Cloud directement partir de
linterface utilisateur de Dreamweaver. Installez lutilitaire Creative Cloud Connection Preview depuis la
page http://creative.adobe.com/fr.
Lorsque vous installez cet utilitaire, loption Creative Cloud Files (en surbrillance dans la capture dcran) est
disponible dans les botes de dialogue Ouvrir, Enregistrer et Slectionner de Dreamweaver.
823

Dreamweaver CC

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Dreamweaver CC

Uploaded by

Copyright:

Available Formats

Aide dAdobe DreamweaverCC

Table des matires

Utilisation de lapplication de bureau Creative Cloud pour grer vos applications

Exploration, synchronisation et gestion dactifs

Ajout de polices depuis Typekit

Creative Cloud Market

Creative Cloud Extract

Bibliothques Creative Cloud

Workflow et espace de travail

Flux de travaux et espace de travail dans Dreamweaver

Personnalisation de lespace de travail de Dreamweaver

Utilisation de la fentre de document

Utilisation de barres d'outils, d'inspecteurs et de menus contextuels

Utilisation du panneau Insertion

Panneau CSS Designer

Recherche de fichiers sur la base de leur nom ou de leur contenu | Mac OS

Optimisation de l'espace de travail pour le dveloppement visuel

A propos des sites Dreamweaver

A propos des sites dynamiques

Cration dune version locale de votre site

Connexion un serveur distant

Options de la bote de dialogue Grer les sites

Configuration dun serveur de test

Contrle de version et paramtres avancs

Importation et exportation des paramtres de site de Dreamweaver

Modification d'un site Web distant existant

Dfinition des prfrences de site pour le transfert de fichiers

Dfinition des paramtres du serveur proxy

Gestion des fichiers

Cration et ouverture de documents

Gestion des fichiers et des dossiers

Acquisition et placement de fichiers depuis ou vers votre serveur

Archivage et extraction de fichiers

Comparaison de fichiers pour en chercher les diffrences

Voilage de fichiers et de dossiers dans votre site Dreamweaver

Test de votre site Dreamweaver

Mise en forme et design

Utilisation d'assistances visuelles pour la mise en forme

Mise en forme de pages avec CSS

Utilisation de fichiers Bootstrap

Requtes multimdias visuelles

Design ractif laide de mises en forme grille fluide

Prsentation de contenu dans des tableaux

Utilisation de widgets dinterface utilisateur jQuery dans Dreamweaver

Utilisation deffets jQuery dans Dreamweaver

Panneau CSS Designer

Dfinition de prfrences de styles CSS

Cration d'une rgle CSS

Dfinition des proprits CSS

Modification d'une rgle CSS

Ajout d'une proprit une rgle CSS

Application, suppression ou modification du nom de styles de classe CSS

Conversion de code CSS intgr en rgle CSS

Etablissement d'un lien vers une feuille de style CSS externe

Modification d'une feuille de style CSS

Mise en forme du code CSS

Dsactivation/Activation de code CSS

Inspection de code CSS en mode En direct

Vrification de problmes de restitution CSS entre les navigateurs

Utilisation des feuilles de style la conception

Utilisation des balises div

Application de dgrads larrire-plan

Effets de transition CSS3

Utilisation d'exemples de feuilles de style Dreamweaver