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
Importation de documents Microsoft Office (Windows uniquement)
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
Extract pour les priphriques

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
Prsentation de la barre doutils Navigation de lexplorateur

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
Prsentation de la barre doutils de codage

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
Informations gnrales sur le codage dans Dreamweaver
Prvisualisation des pages en mode Affichage en direct
Dfinition des prfrences de codage
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
Dfinition des prfrences de dure et de taille des tlchargements
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
Affichage des barres d'outils
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
Zoom avant ou arrire sur une 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
Modification d'une page aprs un zoom
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
Dfilement d'une page aprs un zoom

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.
Adaptation de la fentre du document la slection
Haut de la page
1. Slectionnez un lment de la page.

2. Slectionnez Affichage > Ajuster la slection.
Adaptation de la fentre du document une page entire
Haut de la page
Slectionnez Affichage > Ajuster la page.
Adaptation de la fentre du document la largeur d'une 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
Personnalisation des raccourcis clavier
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
Affichage de panneaux de dveloppement d'applications Web
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.
Affichage de votre base de donnes dans Dreamweaver

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.
Aperu des pages dynamiques dans un navigateur
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.
Limitation des informations de base de donnes affiches dans Dreamweaver
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
Options de nom du champ
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
Gestion des fichiers
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
Ouverture et modification de documents existants

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
Nettoyage de fichiers HTML crs avec Microsoft Word

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
Prsentation du codage de document
Nettoyage du code
Lancement dun diteur externe pour des fichiers multimdias
Utilisation de fichiers depuis le panneau Fichiers
Navigation vers le code associ
Prvisualisation de pages dans Dreamweaver
159
Gestion des fichiers et des dossiers

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
4. Appuyez sur la touche Entre (Windows) ou Retour (Macintosh).
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

Effectuez l'une des oprations suivantes :
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
Acquisition et placement de fichiers depuis ou vers votre serveur

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.
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), puis choisissez
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.
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.
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.

1. Choisissez Fichier > Nouveau.
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 :
Cration de requtes multimdias
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.
Importation de donnes tabulaires

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.
Bordure Indique la largeur, en pixels, des bordures du tableau.

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
Ajout deffets jQuery

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
Effets jQuery bass sur un vnement

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
Suppression deffets jQuery

1. Slectionnez llment de page requis.
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
Couleurs Web scurises
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
Utilisation du slecteur de couleur
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
Dfinition des proprits de texte dans l'inspecteur Proprits
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
Mise en forme du code CSS

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

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 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
1. Excutez une vrification de compatibilit avec les navigateurs.

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
1. Excutez une vrification de compatibil

Langue

Bienvenue sur Scribd !

Dreamweaver CC

Transféré par

Informations du document

Description :

Date du transfert

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Description :

Droits d'auteur :

Formats disponibles

Dreamweaver CC

Transféré par

Description :

Droits d'auteur :

Formats disponibles

Titres liés

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