Aide de Dreamweaver CS5

version prliminaire
Utilisation dADOBE DREAMWEAVER CS5

Ce PDF daide est un composant de laide complte et jour disponible en ligne. Pour consulter laide, connectez-vous Internet. Vous pouvez galement utiliser la nouvelle application Adobe Community Help afin de tlcharger le contenu de laide pour un accs hors ligne.
version prliminaire
Dernire mise jour le 19/3/2010
2010 Adobe Systems Incorporated and its licensors. All rights reserved.
Copyright
Utilisation d'Adobe Dreamweaver CS5 pour Windows et Mac OS This user guide is protected under copyright law, furnished for informational use only, is subject to change without notice, and should not be construed as a commitment by Adobe Systems Incorporated. Adobe Systems Incorporated assumes no responsibility or liability for any errors or inaccuracies that may appear in the informational content contained in this guide. This user guide is licensed for use under the terms of the Creative Commons Attribution Non-Commercial 3.0 License. This License allows users to copy, distribute, and transmit the user guide for noncommercial purposes only so long as (1) proper attribution to Adobe is given as the owner of the user guide; and (2) any reuse or distribution of the user guide contains a notice that use of the user guide is governed by these terms. The best way to provide notice is to include the following link. To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/ Adobe, the Adobe logo, ActionScript, ColdFusion, Contribute, Creative Suite, Director, Dreamweaver, Fireworks, Flash, FlashPaper, FreeHand, HomeSite, Illustrator, InDesign, JRun, Shockwave, and Version Cue are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. ActiveX, Microsoft, Windows, and Windows Vista are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries. Apple, Macintosh, and Mac OS are trademarks of Apple Inc., registered in the United States and other countries. Java, Solaris, and SunOS are trademarks or registered trademarks of Sun Microsystems, Inc. in the United States and other countries. Linux is the registered trademark of Linus Torvalds in the U.S. and other countries. UNIX is a registered trademark of The Open Group in the U.S. and other countries. Arial is a trademark of The Monotype Corporation registered in the U.S. Patent and Trademark Office and certain other jurisdictions. Times New Roman is a registered trademark of The Monotype Corporation registered in the U.S. Patent and Trademark Office and may be registered in certain other jurisdictions. All other trademarks are the property of their respective owners. Updated Information/Additional Third Party Code Information available at http://www.adobe.com/go/thirdparty. This product includes software developed by the Apache Software Foundation (http://www.apache.org/). This product includes software developed by CollabNet (http://www.Collab.Net/) This product includes software developed by Fourthought, Inc. (http://www.fourthought.com). MPEG Layer-3 audio coding technology licensed by Fraunhofer IIS and Thomson. This software is based in part on the work of the Independent JPEG Group. Speech compression and decompression technology licensed from Nellymoser, Inc. (www.nellymoser.com) Video in Flash Player is powered by On2 TrueMotion video technology. 1992-2005 On2 Technologies, Inc. All Rights Reserved. http://www.on2.com. This product contains either BSAFE and/or TIPEM software by RSA Security, Inc. Sorenson Spark video compression and decompression technology licensed from Sorenson Media, Inc.
Notice to U.S. Government End Users. The Software and Documentation are Commercial Items, as that term is defined at 48 C.F.R. 2.101, consisting of Commercial Computer Software and Commercial Computer Software Documentation, as such terms are used in 48 C.F.R. 12.212 or 48 C.F.R. 227.7202, as applicable. Consistent with 48 C.F.R. 12.212 or 48 C.F.R. 227.7202-1 through 227.7202-4, as applicable, the Commercial Computer Software and Commercial Computer Software Documentation are being licensed to U.S. Government end users (a) only as Commercial Items and (b) with only those rights as are granted to all other end users pursuant to the terms and conditions herein. Unpublished rights reserved under the copyright laws of the United States. Adobe Systems Incorporated, 345 Park Avenue, San Jose, CA 95110-2704, USA. For U.S. Government End Users, Adobe agrees to comply with all applicable equal opportunity laws including, if appropriate, the provisions of Executive Order 11246, as amended, Section 402 of the Vietnam Era Veterans Readjustment Assistance Act of 1974 (38 USC 4212), and Section 503 of the Rehabilitation Act of 1973, as amended, and the regulations at 41 CFR Parts 60-1 through 60-60, 60-250, and 60-741. The affirmative action clause and regulations contained in the preceding sentence shall be incorporated by reference. Adobe Systems Incorporated, 345 Park Avenue, San Jose, California 95110, USA.
version prliminaire
iii
Sommaire
Chapitre 1 : Nouveauts Chapitre 2 : Espace de travail Droulement du travail et espace de travail dans Dreamweaver Utilisation de la fentre de document
......................................................... 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Utilisation de barres d'outils, d'inspecteurs et de menus contextuels Personnalisation de l'espace de travail de CS4 Raccourcis clavier Extensions
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Chapitre 3 : Utilisation de sites Dreamweaver Configuration d'un site Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 Gestion des sites Contribute avec Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Chapitre 4 : Cration et gestion de fichiers Cration et ouverture de documents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 Gestion des fichiers et des dossiers Archivage et extraction de fichiers Synchronisation de fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100 Acquisition et placement de fichiers depuis ou vers votre serveur
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Comparaison de fichiers pour en chercher les diffrences Restauration de fichiers (utilisateurs de Contribute) Voilage de fichiers et de dossiers dans votre site Test de votre site
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
Stockage des informations sur les fichiers dans des Design Notes
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
Chapitre 5 : Gestion des actifs et des bibliothques A propos des actifs et des bibliothques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114 Utilisation des actifs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122 Cration et gestion d'une liste d'actifs favoris Utilisation des lments de bibliothque Chapitre 6 : Cration de pages avec CSS Description des feuilles de style en cascade Cration et gestion de CSS Utilisation des balises Div Mise en forme des pages avec CSS
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
Chapitre 7 : Mise en forme des pages avec HTML Utilisation d'assistances visuelles pour la mise en forme Prsentation de contenu l'aide de tableaux Utilisation de cadres
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198
version prliminaire
UTILISATION DE DREAMWEAVER CS5 iv
Sommaire
Chapitre 8 : Ajout de contenu dans les pages Utilisation des pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212 Ajout et formatage de texte Ajout et modification d'images Insertion de fichiers SWF Insertion de fichiers FLV Ajout de widgets Web Ajout de squences audio Automatisation des tches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274
Ajout d'autres objets multimdias
Chapitre 9 : Liens et navigation A propos des liens et de la navigation Etablissement de liens Menus de reroutage Barres de navigation Cartes graphiques
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294
Rsolution des problmes lis aux liens
Chapitre 10 : Aperu des pages Prvisualisation de pages dans Dreamweaver Aperu des pages dans les navigateurs
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300
Aperu des pages dans les priphriques mobiles
Chapitre 11 : Utilisation de code de page Informations gnrales sur le codage dans Dreamweaver Configuration d'un environnement de codage Dfinition des prfrences de codage Rdaction et modification de code Rduction du code Optimisation et dbogage de code
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332
Modification de code en mode Cration Utilisation des inclusions ct serveur Gestion des bibliothques de balises
Utilisation de contenu d'en-tte pour les pages
Importation de balises personnalises dans Dreamweaver
Chapitre 12 : Ajout de comportements JavaScript Utilisation des comportements JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357 Application de comportements Dreamweaver intgrs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360
Chapitre 13 : Utilisation d'autres applications Intgration entre les applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 372 Utilisation de Fireworks et Dreamweaver Utilisation de Photoshop et Dreamweaver Utilisation de Flash et Dreamweaver Utilisation d'Adobe Bridge Utilisation de Device Central . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 379
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392
version prliminaire
UTILISATION DE DREAMWEAVER CS5 v
Sommaire
Utilisation de ConnectNow
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 394 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 394
Extension AIR pour Dreamweaver
Chapitre 14 : Cration et gestion des modles A propos des modles Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400 Reconnaissance des modles et des documents bass sur un modle Cration d'un modle Dreamweaver Cration de rgions modifiables Cration de rgions rptes Utilisation des rgions facultatives Cration d'un modle imbriqu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 406 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 418 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 422 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 426 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 427 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 429 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 433
Dfinition d'attributs de balise modifiables
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 419
Modification, mise jour et suppression de modles Exportation et importation du contenu d'un modle
Application ou suppression d'un modle depuis un document existant Modification du contenu d'un document bas sur un modle Syntaxe des modles Dfinition de prfrences de programmation pour les modles
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 431
Chapitre 15 : Cration de pages Spry visuellement A propos du cadre applicatif Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 435 Utilisation des widgets Spry (instructions gnrales) Utilisation du widget Accordon Utilisation du widget Barre de menus Utilisation du widget Panneau onglet Utilisation du widget Info-bulle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 435 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 437 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 440 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 446 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 448 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 453
Utilisation du widget Panneau rductible
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 451 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 457 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 462 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 468 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 471 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 475
Utilisation du widget Validation de groupe de boutons radio Utilisation du widget Validation de zone de texte Utilisation du widget Zone de texte de validation Utilisation du widget Validation de la slection Utilisation du widget Validation de case cocher Utilisation du widget Validation de mot de passe Utilisation du widget Validation de confirmation Affichage de donnes l'aide de Spry Ajout d'effets Spry
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 478
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 492
Chapitre 16 : Utilisation des services en ligne Adobe Gestion des connexions aux services en ligne Adobe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 497 BrowserLab . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 498 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 499 Business Catalyst InContext Editing
Chapitre 17 : Affichage de donnes XML avec XSLT A propos de XML et de XSLT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 506 Excution de transformations XSL sur le serveur Excution de transformations XSL sur le client Entits de caractre manquant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 513 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 530
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 532
version prliminaire
UTILISATION DE DREAMWEAVER CS5 vi
Sommaire
Chapitre 18 : Prparation la cration de sites dynamiques Description des applications Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 535 Configuration de l'ordinateur pour le dveloppement d'applications Connexions aux bases de donnes pour les dveloppeurs ColdFusion Connexions aux bases de donnes pour les dveloppeurs ASP Connexions aux bases de donnes pour les dveloppeurs PHP Rsolution des problmes de connexion aux bases de donnes Suppression de scripts de connexion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 543 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 548
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 550 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 557 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 559
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 565
Chapitre 19 : Ajout de contenu dynamique aux pages Web Optimisation de l'espace de travail pour le dveloppement visuel Conception de pages dynamiques Panneaux de contenu dynamique Prsentation des sources de contenu dynamique Dfinition de sources de contenu dynamique Ajout de contenu dynamique dans les pages Modification d'un contenu dynamique Affichage des donnes dynamiques
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 566
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 569 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 571 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 576 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 578 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 593 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 599 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 610
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 597
Affichage des enregistrements de base de donnes Ajout de comportements de serveur personnaliss
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 608
Chapitre 20 : Cration visuelle d'applications Cration de pages principales et dtailles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 622 Cration de pages de recherche et de rsultats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 629 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 636 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 640 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 645 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 653 Cration d'une page d'insertion d'enregistrement Cration de pages de mise jour d'enregistrements Cration de pages de suppression d'enregistrements Cration d'une page d'enregistrement Cration d'une page accs restreint Utilisation de composants ColdFusion
Cration de pages avec objets de manipulation de donnes avancs (ColdFusion, ASP) Cration d'une page d'ouverture de session
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 658 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 661 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 666 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 663 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 666
Scurisation dun dossier dans votre application (ColdFusion)
Chapitre 21 : Cration de formulaires Collecte d'informations auprs des utilisateurs Cration de formulaires Web Cration de formulaires ColdFusion Chapitre 22 : Accessibilit Dreamweaver et l'accessibilit
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 674
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 677 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 692
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 706
version prliminaire
1
Chapitre 1 : Nouveauts
Voici la liste des principales nouvelles fonctionnalits de Adobe Dreamweaver CS5. Adobe BrowserLab Dreamweaver CS5 s'intgre Adobe BrowserLab, l'un des nouveaux services en ligne de CS Live, qui propose une solution prcise et rapide de test de compatibilit inter-navigateurs. BrowserLab permet de prvisualiser les pages Web et le contenu local l'aide de divers outils d'affichage et de comparaison. Voir BrowserLab la page 498. Intgration de Business Catalyst Adobe Business Catalyst est une application hberge qui remplace les outils de bureau traditionnels par une plateforme centralise pour concepteurs Web. Cette application s'associe Dreamweaver pour vous permettre de crer ce que vous souhaitez, de sites de base reposant sur les donnes de puissantes boutiques en ligne. Voir http://www.adobe.com/go/business_catalyst_get_extension_fr. Activer/Dsactiver CSS La fonction Activer/Dsactiver CSS permet de dsactiver ou de ractiver directement les proprits CSS depuis le panneau Styles CSS. La dsactivation d'une proprit CSS se borne la mettre en commentaire, sans la supprimer. Voir Dsactivation/Activation du code CSS la page 149. Inspection CSS Le mode Inspection permet d'afficher visuellement les proprits du modle de bote en feuilles CSS (dont l'espacement, la bordure et la marge) en dtail, sans devoir lire de code ou employer un utilitaire tiers tel que Firebug. Voir Inspection de CSS en mode En direct la page 150. Mises en forme CSS de dpart Dreamweaver CS5 comprend des mises en forme CSS de dpart qui ont t mises jour et simplifies. Les slecteurs descendants complexes des mises en forme CS4 ont t supprims et remplacs par des classes simplifies, plus comprhensibles. Voir Cration d'une page avec une mise en forme CSS la page 159. Fichiers association dynamique La fonctionnalit Fichiers association dynamique permet de trouver tous les fichiers et scripts externes requis pour l'assemblage de pages CMS (systme de gestion du contenu) bases sur PHP, ainsi que d'afficher leur nom de fichier dans la barre d'outils Fichiers associs. Par dfaut, Dreamweaver prend en charge la recherche de fichiers pour les cadres CMS Wordpress, Drupal et Joomla! . Voir Ouverture de fichiers association dynamique la page 72. Navigation dans le mode En direct La navigation dans le mode En direct active les liens dans l'affichage en direct, ce qui permet d'interagir avec les applications ct serveur et les donnes dynamiques. Cette fonctionnalit permet d'entrer une URL afin d'inspecter les pages servies partir d'un serveur Web en direct, ainsi que de modifier les pages consultes si elles existent dans l'un de vos sites dfinis localement. Voir Prvisualisation de pages dans Dreamweaver la page 297. Conseils de code pour classes personnalises PHP Les conseils de code pour classes personnalises PHP affichent la syntaxe approprie pour les fonctions, objets et constantes PHP, ce qui vous aide taper du code plus prcis. Les conseils de code fonctionnent galement avec vos fonctions et classes personnalises, ainsi qu'avec les cadres tiers tels que le cadre Zend.
version prliminaire
UTILISATION DE DREAMWEAVER CS5 2
Nouveauts
Simplification de la configuration d'un site La bote de dialogue Dfinition du site remise neuf (et dsormais baptise Configuration du site) facilite la configuration d'un site Dreamweaver local, de faon vous permettre d'entamer immdiatement la cration de pages Web. La catgorie Serveur distant permet de spcifier, dans la mme vue, les serveurs distants et les serveurs d'valuation. Voir Cration d'un nouveau site la page 39. Conseils de code spcifiques au site La fonctionnalit de conseils de code spcifiques au site permet de personnaliser votre environnement de codage lorsque vous utilisez des bibliothques PHP et des cadres CMS tiers, comme WordPress, Drupal, Joomla! ou d'autres cadres. Les fichiers de thme pour les blogs et les autres fichiers et rpertoires PHP personnaliss peuvent tre inclus ou exclus des sources de conseils de code. Voir Conseils de code spcifiques au site la page 317. Amliorations de la prise en charge de Subversion Dreamweaver CS5 bnficie d'une prise en charge accrue de Subversion. Vous pouvez dsormais dplacer, copier et supprimer des fichiers localement, puis synchroniser les modifications avec votre rfrentiel SVN distant. La nouvelle commande Rtablir permet de corriger rapidement les conflits d'arborescence ou de revenir la version prcdente d'un fichier. En outre, une nouvelle extension vous permet de prciser quelle version de Subversion vous voulez utiliser pour un projet prcis. Voir Utilisation de Subversion (svn) pour acqurir et archiver des fichiers la page 92. Fonctionnalits obsoltes Les fonctionnalits suivantes sont devenues obsoltes depuis Dreamweaver CS5 :
Rapport de validation d'accessibilit Comportements de serveur ASP/JavaScript Vrification du comportement JavaScript du navigateur Connexion un serveur FTP/RDS sans dfinir de site Contrle du comportement JavaScript de Shockwave ou de SWF Crer un album photos pour le Web Comportement JavaScript de masquage de menu contextuel Gestion des classes CSS disponibles d'InContext Editing Insrer FlashPaper Insertion/suppression de Mark of the Web Intgration de Microsoft Visual Sourcesafe Barres de navigation Comportement JavaScript Lire le son Menu Afficher les vnements (panneau Comportements) Comportement JavaScript d'affichage de menu contextuel Comportements JavaScript de montage Validation des balises Affichage de Live Data
version prliminaire
3
Chapitre 2 : Espace de travail

L'espace de travail de Adobe Dreamweaver CS5 contient les barres d'outils, les inspecteurs et les panneaux qui servent la cration de pages Web. Vous pouvez personnaliser l'apparence gnrale et le comportement de l'espace de travail.
Droulement du travail et espace de travail dans Dreamweaver

Prsentation des processus de Dreamweaver
Vous pouvez utiliser plusieurs approches pour crer un site Web. Voici l'une des approches possibles : Planification et configuration de votre site Dterminez l'emplacement o vos fichiers seront enregistrs et examinez les besoins du site, les profils de ses utilisateurs et les objectifs du site. Il convient galement d'examiner les conditions techniques requises, notamment l'accs 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 Utilisation de sites Dreamweaver la page 38.) Organisation et gestion des fichiers de votre site Dans le panneau Fichiers, vous pouvez facilement ajouter, supprimer et renommer des fichiers et des dossiers afin de modifier l'organisation en fonction de vos besoins. Dans le panneau Fichiers, vous trouverez de nombreux outils permettant la gestion de votre site, le transfert de vos fichiers vers et depuis un serveur distant, la configuration d'un processus d'archivage/extraction pour empcher l'crasement des fichiers et la synchronisation des fichiers sur vos sites locaux et distants. Utilisez le panneau Actifs pour organiser facilement les actifs sur un site ; vous pouvez ensuite faire glisser la plupart des actifs directement du panneau vers un document Dreamweaver. Dreamweaver vous permet galement de grer certains aspects de vos sites Adobe Contribute. (Voir Gestion des fichiers et des dossiers la page 75 et Gestion des actifs et des bibliothques la page 114.) 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 des lments PA, des styles de positionnement CSS ou des mises en forme CSS prdfinies de Dreamweaver pour dfinir la mise en forme. Les outils de cration de tableaux vous permettent de concevoir des pages rapidement en dessinant, puis en rorganisant la structure des pages. Si vous souhaitez afficher plusieurs lments simultanment dans un navigateur Web, vous pouvez utiliser des cadres pour mettre en forme vos documents. Finalement, vous pouvez crer de nouvelles pages partir d'un modle Dreamweaver, puis actualiser automatiquement leur mise en forme lorsque le modle change. (Voir Cration de pages avec CSS la page 127 et Mise en forme des pages avec HTML la page 178.)
version prliminaire
Espace de travail
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 d'autres documents. Dreamweaver fournit galement des comportements permettant d'excuter des tches en rponse des vnements spcifiques, comme par exemple la validation d'un formulaire lorsque le visiteur clique le sur bouton Envoyer ou l'ouverture d'une deuxime fentre de navigateur lorsque le chargement de la page principale est termin. Finalement, Dreamweaver comprend des outils permettant d'optimiser les performances de votre site Web et de tester les pages pour garantir leur compatibilit avec diffrents navigateurs Web. (Voir Ajout de contenu dans les pages la page 212). Cration de pages par codage manuel Le codage manuel des pages Web constitue une autre approche de la cration de pages. Dreamweaver dispose d'outils d'dition visuelle conviviaux ainsi que d'un environnement de codage sophistiqu. Vous pouvez utiliser l'une ou l'autre de ces mthodes (ou bien les deux) pour crer et modifier vos pages. (Voir Utilisation de code de page la page 302.) Configuration d'une application Web pour un contenu dynamique De nombreux sites Web contiennent des pages dynamiques qui permettent aux visiteurs d'afficher les informations stockes dans des bases de donnes, voire d'ajouter ou de modifier des donnes dans certains cas. Pour crer ce type de pages, vous devez d'abord configurer un serveur Web et un serveur d'application, crer ou modifier un site Dreamweaver et vous connecter une base de donnes. (Voir Prparation la cration de sites dynamiques la page 535.) Cration de pages dynamiques Dans Dreamweaver, vous pouvez dfinir diverses sources de contenu dynamique, y compris des jeux d'enregistrements 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 d'enregistrements), ajoute des liens spciaux permettant de passer d'une page d'enregistrements une autre et cre des compteurs d'enregistrements pour faciliter la gestion de ces derniers. Vous pouvez encapsuler la logique d'application ou d'entreprise en faisant appel des technologies telles que Adobe ColdFusion et les services Web. Si vous avez besoin de plus de souplesse, vous pouvez crer des comportements de serveur et formulaires interactifs personnaliss. (Voir Ajout de contenu dynamique aux pages Web la page 566.) Test et publication Le test de vos pages est un processus continu qui se droule tout au long du cycle de dveloppement. A la fin de ce cycle, vous publiez le site sur un serveur. De nombreux dveloppeurs programment galement une maintenance rgulire pour s'assurer que le site reste jour et est oprationnel. (Voir Acquisition et placement de fichiers depuis ou vers votre serveur la page 84.) Vous trouverez un didacticiel vido sur les possibilits offertes par Dreamweaver l'adresse www.adobe.com/go/lrvid4040_dw_fr.
Vue d'ensemble de la prsentation de l'espace de travail

L'espace de travail de Dreamweaver permet d'afficher des documents et les proprits des objets. Il comporte des barres d'outils donnant accs aux oprations les plus courantes, vous permettant ainsi de modifier rapidement vos documents.
version prliminaire
Espace de travail
Sous Windows, Dreamweaver propose une prsentation intgre en une seule fentre. Dans l'espace de travail intgr, toutes les fentres et tous les panneaux sont rassembls dans une grande fentre d'application.
A. Barre d'application B. Barre d'outils du document C. Fentre de document D. Commutation d'espace de travail E. Groupes de panneaux F. CS Live G. Slecteur de balises H. Inspecteur Proprits I. Panneau Fichiers
Sous Mac OS, Dreamweaver peut afficher de multiples documents dans une seule fentre, avec des onglets qui identifient chacun d'eux. Dreamweaver permet galement d'afficher un espace de travail flottant o chaque document dispose de sa propre fentre. Les groupes de panneaux sont initialement ancrs ensemble, mais vous pouvez les sparer pour les faire apparatre dans leur propre fentre. Lorsque des groupes de panneaux sont ancrs et que la fentre de document est agrandie, le redimensionnement, l'affichage et le masquage de panneaux entrane le redimensionnement automatique du document principal, comme c'est le cas dans Windows.
version prliminaire
Espace de travail
A. Barre d'application B. Barre d'outils du document C. Commutation d'espace de travail D. Fentre de document E. CS Live F. Groupes de panneaux G. Slecteur de balises H. Inspecteur Proprits I. Panneau Fichiers
Vous trouverez un didacticiel sur l'utilisation des diffrents espaces de travail de Dreamweaver l'adresse www.adobe.com/go/lrvid4042_fr.
Voir aussi
Utilisation de barres d'outils, d'inspecteurs et de menus contextuels Personnalisation de l'espace de travail de CS4 Affichage de documents onglets (Dreamweaver sur Macintosh) Didacticiel consacr l'espace de travail Dreamweaver
Espace de travail prsentation des lments

L'espace 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 d'accueil Permet d'ouvrir un document rcent ou de crer un nouveau document. Vous pouvez galement,
partir de l'cran d'accueil, survoler Dreamweaver ou accder un didacticiel.
version prliminaire
Espace de travail
Barre d'application Sur toute la largeur de la partie suprieure de la fentre d'application, cette barre contient une section de commutation d'espace de travail, des menus (Windows uniquement) et d'autres contrles d'application. Barre d'outils du document Contient des boutons permettant d'accder aux diffrents modes d'affichage de la fentre
du document (tels que le mode Cration ou le mode Code), de dfinir les diffrentes options d'affichage et d'effectuer certaines oprations courantes, telles que la prvisualisation dans un navigateur.
Barre d'outils standard Non affiche dans l'agencement par dfaut de l'espace de travail. 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. Pour afficher la barre d'outils standard, choisissez Affichage > Barres d'outils > Standard.
La barre d'outils de codage Affiche en mode Code uniquement. Regroupe des boutons couvrant la plupart des
oprations de codage standard.

La barre d'outils de rendu de style Masque par dfaut. Compose de boutons qui vous permettent d'avoir un aperu de votre cration dans diffrents types de mdia si vous utilisez des feuilles de style dpendantes du mdia. Elle contient galement un bouton qui permet d'activer ou de dsactiver les styles CSS (Cascading Style Sheets). Fentre de document Affiche le document que vous crez et modifiez. L'inspecteur Proprits Permet de visualiser et de modifier diverses proprits de l'objet ou du texte slectionn. Chaque objet possde des proprits diffrentes. L'inspecteur Proprits n'est pas dvelopp par dfaut dans la prsentation de l'espace de travail Codeur. Slecteur de balises Situe dans la barre d'tat, 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 Permet de surveiller et de modifier votre travail. Citons par exemple le panneau Insertion, le panneau Styles CSS et le panneau Fichiers. Pour dvelopper un panneau, double-cliquez sur son onglet. Panneau Insertion Contient des boutons permettant d'insrer divers types d'objets, 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.
Le panneau Fichiers Permet de grer vos fichiers et dossiers, qu'ils fassent partie d'un site Dreamweaver ou qu'ils se trouvent sur un serveur distant. Il permet galement d'accder tous les fichiers situs sur votre disque local, tout comme l'Explorateur Windows (Windows) ou le Finder (Macintosh).
Voir aussi
Utilisation de la fentre de document la page 17 Utilisation de barres d'outils, d'inspecteurs et de menus contextuels la page 21 Gestion des fentres et des panneaux la page 23
Prsentation de la fentre de document

La fentre de document affiche le document actif. Vous pouvez choisir parmi les modes d'affichage suivants :
Mode Cration Un environnement de cration pour la mise en forme visuelle des pages, l'dition visuelle et le dveloppement rapide d'applications. Dans ce mode, Dreamweaver affiche une reprsentation visuelle entirement modifiable du document, similaire la reprsentation de la page sur un navigateur.
version prliminaire
Espace de travail
Mode Code Environnement de codage manuel pour rdiger et modifier du code HTML, JavaScript et de langage de
serveur, tel que le langage PHP ou CFML (ColdFusion Markup Language), ou tout autre type de code.
Mode Code fractionn Version fractionne du mode Code, qui permet de travailler dans diffrentes sections du
document en mme temps.

Modes Code et Cration Permettent d'obtenir l'affichage Code et l'affichage Cration du document dans une mme
fentre.
Mode En direct Tout comme le mode Cration, le mode Affichage en direct fournit une reprsentation plus raliste de l'apparence de votre document dans un navigateur. Il permet galement d'interagir avec le document comme vous le feriez dans un navigateur. Le mode Affichage en direct n'est pas modifiable. Vous pouvez toutefois apporter des modifications en mode Code et actualiser l'affichage en direct afin de voir l'impact de ces modifications. Mode Code en direct Uniquement disponible lors de l'affichage d'un document en mode Affichage en direct. Le mode
Code en direct affiche le code qu'un navigateur utilise pour 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 n'est pas modifiable. Lorsqu'une fentre de document est agrandie (mode d'affichage par dfaut), des onglets s'affichent 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 n'avez pas encore enregistres. Pour passer un autre document, cliquez sur son onglet. Dreamweaver affiche galement la barre d'outils Fichiers associs en dessous de l'onglet 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 l'un de ces fichiers associs dans la fentre de document, cliquez sur son nom dans la barre d'outils Fichiers associs.
Voir aussi
Utilisation de la fentre de document la page 17 A propos de l'affichage en direct la page 297 Ouverture des fichiers associs la page 70 Informations gnrales sur le codage dans Dreamweaver la page 302
Prsentation de la barre d'outils de document

La barre d'outils Document contient des boutons qui permettent de basculer rapidement entre diffrents mode d'affichage de votre document. La barre d'outils contient galement plusieurs commandes et options courantes permettant d'afficher le document et de le transfrer d'un site local vers un site distant. L'illustration ci-dessous reprsente la barre d'outil Document dveloppe.
A. Afficher le mode Code B. Afficher les modes Code et Cration C. Afficher le mode Cration D. Mode Code en direct E. Vrification de la compatibilit avec les navigateurs F. Mode En direct G. Mode Inspection CSS H. Aperu/Dbogage dans le navigateur I. Assistances visuelles J. Actualiser mode Cration K. Titre du document L. Gestion des fichiers
Les options suivantes s'affichent dans la barre d'outils de document :

Afficher le mode Code Affiche uniquement le mode Code dans la fentre de document. Afficher les modes Code et Cration Fractionne la fentre de document afin d'afficher le mode Code et le mode
Cration. Dans ce cas, l'option Mode Cration en haut est active dans le menu Options d'affichage.
version prliminaire
Espace de travail
Afficher le mode Cration Affiche uniquement le mode Cration dans la fentre de document.
Remarque : Si vous utilisez certaines types de fichiers, tels que XML, JavaScript, CSS ou d'autres types en mode code, les fichiers ne sont pas visibles en mode Cration, et les boutons Cration et Fractionner sont griss.
Mode En direct Affiche une vue du document non modifiable, interactive, base sur un navigateur. Mode Code en direct Affiche le code tel qu'il est utilis par le navigateur pour excuter la page. Titre du document Permet d'attribuer un titre votre document et l'afficher dans la barre de titre du navigateur. Si
votre document possde dj un titre, celui-ci s'affiche dans ce champ.

Gestion des fichiers Affiche le menu Gestion des fichiers. Aperu/Dbogage dans le navigateur Permet de prvisualiser ou de dboguer votre document dans un navigateur. Slectionnez un navigateur dans le menu. Actualiser mode Cration Actualise le mode Cration du document aprs avoir apport des modifications dans le mode Code. Les modifications apportes dans le mode Code n'apparaissent pas automatiquement dans le mode Cration. Vous devez excuter tout d'abord certaines oprations, comme enregistrer le fichier ou utiliser ce bouton.
Remarque : L'actualisation met galement jour les fonctionnalits de code qui dpendent de DOM (Document Object Model), comme la possibilit de slectionner les balises d'ouverture ou de fermeture d'un bloc de code.
Afficher les options Permet de dfinir les options d'affichage des modes Code et Cration, notamment le mode devant s'afficher au-dessus de l'autre. Les options du menu s'appliquent l'affichage actuel : Mode Cration, mode Code ou les deux. Assistances visuelles Permet d'utiliser diffrents supports visuels en vue de la conception de vos pages. Valider le marqueur Permet de valider le document actif ou la balise slectionne. Vrification de la compatibilit avec les navigateurs Permet de vrifier si votre code CSS est compatible avec
diffrents navigateurs.
Voir aussi
Affichage des barres d'outils la page 21 Prvisualisation des pages en mode Affichage en direct la page 297 Dfinition des prfrences de codage la page 309 Affichage et modification de contenu d'en-tte la page 345 Utilisation d'assistances visuelles pour la mise en forme la page 178
Prsentation de la barre d'outils standard

La barre d'outils 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.
Voir aussi
Affichage des barres d'outils la page 21 Cration et ouverture de documents la page 61
version prliminaire
Espace de travail
Prsentation de la barre d'outils Rendu de style

La barre d'outils de rendu de style (masque par dfaut) est compose de boutons qui vous permettent d'avoir un aperu de votre cration dans diffrents types de mdia si vous utilisez des feuilles de style dpendantes du mdia. Elle contient galement un bouton qui permet d'activer ou de dsactiver les styles CSS. Pour afficher la barre d'outils standard, choisissez Affichage > Barres d'outils > Rendu de style.
Cette barre d'outil n'est fonctionnelle que si vos documents appliquent des feuilles de styles dpendantes du mdia. Par exemple, votre feuille de style peut comporter une rgle relative au corps du texte pour l'impression et une autre pour l'affichage sur des tlphones portables. Pour plus d'informations sur la cration de feuilles de style dpendantes du mdia, consultez le site Web du World Wide Web Consortium l'adresse www.w3.org/TR/CSS21/media.html. Par dfaut, Dreamweaver affiche votre mise en forme pour le type de mdia cran (qui indique comment une page apparat sur un cran d'ordinateur). Vous pouvez afficher les rendus de type de mdia suivants en cliquant sur les boutons respectifs dans la barre d'outils de rendu de style.
Rendu pour le type de support Ecran Indique comment la page apparat sur un cran d'ordinateur. Rendu pour le type de support Impression Indique comment la page apparat sur une feuille de papier imprime. Rendu pour le type de support Tlphone mobile Indique comment la page apparat sur un appareil portatif comme
un tlphone mobile et un BlackBerry.

Rendu pour le type de support Projection Indique comment la page apparat sur un projecteur. Rendu pour le type de support TTY Indique comment la page apparat sur un appareil de type tltype. Rendu pour le type de support TV Indique comment la page apparat sur un tlviseur. Intervertir l'affichage des Styles CSS Permet d'activer ou de dsactiver les styles CSS. Ce bouton fonctionne
indpendamment des autres boutons de mdia.

Feuilles de style la cration Permet de dfinir une feuille de style la cration.
Pour accder un didacticiel relatif la cration de feuilles de style pour l'impression et les appareils portatifs, consultez le site Web d'Adobe l'adresse www.adobe.com/go/vid0156_fr.
Voir aussi
Affichage des barres d'outils la page 21
Prsentation de la barre d'outils Navigation de l'explorateur

La barre d'outils Navigation de l'explorateur devient active dans le mode En direct et vous montre l'adresse de la page que vous examinez dans la fentre de document. A partir de Dreamweaver CS5, le mode 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), Dreamweaver charge la page dans la fentre de document.
A. Contrles de navigateur B. Zone d'adresse C. Options de l'affichage en direct
version prliminaire
Espace de travail
Par dfaut, les liens ne sont pas actifs dans le mode En direct. Si les liens ne sont pas actifs, vous pouvez slectionner le texte d'un lien dans la fentre de document, ou cliquer sur celui-ci, sans accder une page diffrente. Pour tester les liens en mode 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 d'affichage, droite de la zone d'adresse.
Voir aussi
Prvisualisation de pages dans Dreamweaver la page 297
Prsentation de la barre d'outils de codage

La barre d'outils de codage est compose de boutons qui vous permettent d'effectuer 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 d'outils Codage s'affiche la verticale sur la gauche de la fentre de document. Elle n'est visible que lorsque le mode Code est affich.
Vous ne pouvez pas dtacher ni dplacer la barre d'outils Codage, mais vous pouvez la masquer (Affichage > Barres d'outils > Codage). Vous pouvez galement modifier la barre d'outils 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 d'outils. Pour plus d'informations, voir Extension de Dreamweaver.
Voir aussi
Affichage des barres d'outils la page 21 Insertion de code avec la barre d'outils de codage la page 319
version prliminaire
Espace de travail
Prsentation de la barre d'tat

La barre d'tat, situe dans le bas de la fentre de document, fournit des informations supplmentaires sur le document en cours de cration.
A. Slecteur de balises B. Outil Slectionner C. Outil Main D. Outil Zoom E. Dfinir le facteur de zoom F. Menu contextuel Taille de fentre G. Taille du document et estimation du temps de tlchargement H. Indicateur de codage
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 d'une balise dans le slecteur de balises, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Option enfonce (Macintosh) sur la balise et choisissez une classe ou un ID dans le menu contextuel.
Outil Slectionner Active et dsactive l'outil Main. Outil Main Permet de cliquer sur le document et de le glisser jusque dans la fentre de document. Outil Zoom et menu Dfinir le facteur de zoom Permettent de dfinir un taux d'agrandissement pour votre document. Menu contextuel Taille de fentre Non disponible en mode Code. Permet de redimensionner la fentre du document
selon des dimensions prdfinies ou personnalises.

Taille du document et temps de tlchargement Fournit une estimation de la taille du document et du temps de tlchargement de la page, ainsi que la liste de tous les fichiers dpendants, tels que les images et autres fichiers de donnes. Indicateur de codage Affiche le codage du texte du document actuel.
Voir aussi
Dfinition de la taille des fentres et de la vitesse de connexion la page 20 Zoom avant et arrire la page 223 Redimensionnement de la fentre de document la page 19 Dfinition des prfrences de dure et de taille des tlchargements la page 225
version prliminaire
Espace de travail
Prsentation 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. Par exemple, si vous slectionnez une image de la page, l'inspecteur Proprits se modifie pour montrer les proprits de l'image (telles que le chemin d'accs au fichier, la largeur et la hauteur de l'image, la bordure autour de l'image, s'il y a lieu, et ainsi de suite).
L'inspecteur Proprits se trouve par dfaut sur le bord infrieur de l'espace de travail. Vous pouvez toutefois le dtacher et en faire un panneau flottant dans l'espace de travail.
Voir aussi
Ancrage et annulation dancrage de panneaux la page 24 Utilisation de l'inspecteur Proprits la page 22
Prsentation du panneau Insertion

Les boutons qui composent le panneau Insertion permettent de crer et d'insrer 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 le menu Catgorie. D'autres catgories s'affichent lorsque le document slectionn contient du code serveur, tel que des documents ASP ou CFML.
version prliminaire
Espace de travail
Certaines catgories disposent de boutons ouvrant des menus contextuels. Lorsque vous slectionnez une option dans l'un d'eux, l'action associe est attribue par dfaut au bouton. Par exemple, si vous slectionnez le menu contextuel du bouton Image, puis Espace rserv pour l'image, la prochaine fois que vous cliquerez sur le bouton Image, Dreamweaver insrera un espace rserv pour l'image. Lorsque vous slectionnez une nouvelle option dans l'un de ces menus, l'action attribue par dfaut au bouton change. Le panneau Insertion est organis en diffrentes catgories, comme suit :
Catgorie Commun Permet de crer et d'insrer les objets les plus couramment utiliss, comme les images et les
tableaux.
Catgorie Mise en forme Permet d'insrer des tableaux, des lments de tableau, des balises div, des cadres et des widgets Spry. Vous pouvez choisir deux modes pour les tableaux : Standard (par dfaut) et Dvelopp. Catgorie Formulaires Contient des boutons permettant de crer des formulaires et d'insrer des lments de formulaire, dont des widgets de validation Spry. Catgorie Donnes Permet d'insrer des lments de donnes Spry et d'autres lments dynamiques, tels que des jeux d'enregistrements, des rgions rptes et des formulaires d'insertion et de mise jour d'enregistrements. Catgorie Spry Contient des boutons permettant de crer des pages Spry, avec des objets de donnes Spry et des
widgets.
La catgorie InContext Editing Contient des boutons destins la cration de pages InContext Editing, dont des
boutons pour les rgions modifiables, pour les rgions rptes et pour la gestion des classes CSS.
Catgorie Texte Permet d'insrer diverses balises de formatage de texte et de liste, telles que b, em, p, h1 et ul. Catgorie Favoris Permet de regrouper et d'organiser, dans un espace commun, les boutons du panneau Insertion que vous utilisez le plus frquemment. Catgories de code serveur Disponibles uniquement pour les pages utilisant un langage serveur spcifique, comme
ASP, CFML Basic, CFML Flow, CFML Advanced, et PHP. Ces catgories proposent des objets de type code serveur que vous pouvez insrer en mode Code. Contrairement aux autres panneaux de Dreamweaver, vous pouvez retirer le panneau Insertion de son emplacement d'ancrage par dfaut et le placer l'horizontale, au-dessus de la fentre de document. Dans ce cas, ce panneau se transforme en barre d'outils, mme s'il est impossible de la masquer et de l'afficher comme vous le feriez pour les autres barres d'outils.
Voir aussi
Utilisation du panneau Insertion la page 212 Cration de pages Spry visuellement la page 435
version prliminaire
Espace de travail
Prsentation du panneau Fichiers

Vous pouvez utiliser les panneaux Fichiers pour afficher et exploiter les fichiers dans votre site Dreamweaver.
Lorsque vous affichez des sites, des fichiers ou des dossiers dans le panneau Fichiers, vous pouvez modifier la taille de la zone d'affichage. Vous pouvez galement agrandir ou rduire le panneau Fichiers. Dans sa forme rduite, le panneau Fichiers affiche le contenu du site local, du site distant, du serveur d'valuation ou du rfrentiel SVN sous la forme d'une liste de fichiers. Dans sa forme dveloppe, il affiche d'une part le site local et d'autre part le site distant, le serveur d'valuation ou le rfrentiel SVN. 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.
Voir aussi
Utilisation des fichiers depuis le panneau Fichiers la page 78
version prliminaire
Espace de travail
Prsentation du panneau Styles CSS

Il vous permet de suivre les rgles CSS et les proprits qui affectent un lment de page slectionn (mode Current (ou Slection)), ou les rgles et les proprits qui affectent l'ensemble d'un document (mode All (ou Tout)). Un bouton bascule plac sur la partie suprieure du panneau Styles CSS vous permet de passer d'un mode l'autre. Le panneau Styles CSS vous permet de modifier les proprits CSS dans les deux modes.
Vous pouvez redimensionner n'importe quel volet en faisant glisser les cadres entre les volets. En mode Current (Slection), le panneau Styles CSS prsente trois volets : un volet Summary for Selection (Rcapitulatif de la slection) qui prsente les proprits CSS de la slection en cours dans le document; un volet Rules (Rgles) qui prcise l'emplacement des proprits slectionnes (ou une cascade de rgles pour la balise slectionne, selon votre slection); et un volet Proprits qui vous permet de modifier les proprits CSS de la rgle dfinissant la slection. En mode All (Tout), le panneau Styles CSS prsente deux volets : un volet All Rules (Toutes les rgles) (en haut) et un volet Proprits (en bas). Le volet Toutes les rgles prsente la liste des rgles dfinies dans le document actif, ainsi que l'ensemble des rgles dfinies dans les feuilles de styles jointes ce document. Le volet Proprits permet de modifier les proprits CSS de toute rgle slectionne dans le volet Toutes les rgles. Toute modification apporte dans le volet Proprits s'applique immdiatement, ce qui vous permet d'avoir un aperu direct de votre travail.
Voir aussi
Cration et gestion de CSS la page 132
version prliminaire
Espace de travail
Prsentation des guides visuels

Dreamweaver met votre disposition plusieurs types de guides visuels pour vous aider concevoir vos documents et prvoir approximativement l'aspect qu'ils auront dans un navigateur. Vous pouvez effectuer les oprations suivantes :
Adapter instantanment la taille de la fentre de document un format d'affichage donn, afin de contrler la
disposition des lments sur la page
Utiliser un trac d'image 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 page
Utilisez la grille afin d'effectuer un positionnement et un redimensionnement prcis des lments positionnement
absolu (PA). Si la fonction d'alignement automatique est active, les lments PA s'alignent automatiquement sur le croisillon de grille le plus proche lorsqu'ils sont dplacs ou redimensionns (d'autres objets, par exemple les images et les paragraphes, ne sont pas aimants par la grille). L'alignement fonctionne mme si la grille n'est pas visible.
Voir aussi
Utilisation d'assistances visuelles pour la mise en forme la page 178
Utilisateurs de GoLive
Si vous utilisez GoLive jusqu'ici et que vous souhaitez passer l'utilisation de Dreamweaver, vous pouvez consultez une prsentation en ligne de l'espace de travail et du droulement du travail dans Dreamweaver ainsi qu'une discussion sur les moyens de faire migrer votre site vers Dreamweaver. Pour plus d'informations, consultez le site www.adobe.com/go/learn_dw_golive_fr.
Voir aussi
Didacticiel consacr Dreamweaver pour les utilisateurs de GoLive
Utilisation de la fentre de document

Basculement d'un mode un autre dans la fentre de document
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 l'horizontale ou la verticale. Le mode d'affichage l'horizontale est le mode par dfaut.
Activation du mode Code

Effectuez l'une des oprations suivantes :
Choisissez Affichage > Code. Dans la barre d'outils du document, cliquez sur le bouton Afficher le mode Code.
version prliminaire
Espace de travail
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.
Remarque : Si vous redimensionnez la fentre de document ou la fentre de l'application, ou si vous modifiez la disposition de votre espace de travail, Dreamweaver prserve le rapport de fractionnement, de faon ce que les deux modes soient toujours visibles.
Activation du mode Cration

Choisissez Affichage > Cration. Dans la barre d'outils Document, cliquez sur le bouton Afficher le mode Cration.
Affichage la fois en modes Code et Cration

Choisissez Affichage > Code et cration. Dans la barre d'outils du document, cliquez sur le bouton Afficher les modes Code et Cration.
Par dfaut, le mode Code s'affiche en haut de la fentre de document et le mode Cration en bas. Pour afficher le mode Cration en haut de la fentre, choisissez Affichage > Mode Cration en haut. Remarque : Si vous redimensionnez la fentre de document ou la fentre de l'application, ou si vous modifiez la disposition de votre espace de travail, Dreamweaver prserve le rapport de fractionnement, de faon ce que les deux modes soient toujours visibles.
Basculement entre les modes Code et Cration

Appuyez sur Ctrl + guillemet simple d'ouverture (').
Si les deux modes sont affichs simultanment dans la fentre de document, ce raccourci clavier permet d'activer tour tour les deux modes.
Fractionnement vertical des modes

Cette option n'est disponible que pour le mode Code fractionn et les modes Code et Cration (mode fractionn). Elle est dsactive pour le mode Code et le mode Cration.
1 Veillez bien tre en mode Code fractionn (Affichage > Code fractionn) ou en modes Code et Cration
(Affichage > Code et Cration).

2 Choisissez Affichage > Fractionner la verticale.
Si vous tes en modes Code et Cration, vous pouvez afficher le mode Cration sur la gauche (Affichage > Mode Cration gauche). Remarque : Si vous redimensionnez la fentre de document ou la fentre de l'application, ou si vous modifiez la disposition de votre espace de travail, Dreamweaver prserve le rapport de fractionnement, de faon ce que les deux modes soient toujours visibles.
version prliminaire
Espace de travail
Voir aussi
Prsentation de la fentre de document la page 7 Prvisualisation des pages en mode Affichage en direct la page 297
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.
Voir aussi
Gestion des fentres et des panneaux la page 23 Affichage de documents onglets (Dreamweaver sur Macintosh) la page 29
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.
Redimensionnement de la fentre de document

La barre d'tat affiche les dimensions de la fentre de document slectionne (en pixels). Pour qu'une page s'affiche de faon optimale une taille spcifique, vous pouvez rgler la fentre de document sur l'une des tailles prdtermines, modifier ces tailles prdtermines ou en crer de nouvelles.
Redimensionnement de la fentre de document selon une taille prdtermine:

Choisissez l'une des tailles affiches dans le menu contextuel Taille de fentre qui se trouve dans la barre d'tat de
la fentre de document. Remarque : (Windows uniquement) Les documents dans la fentre de document sont agrandis par dfaut ; il est impossible de les redimensionner lorsqu'ils sont agrandis. Pour annuler l'affichage du document en mode agrandi, cliquez sur l'icne dans le coin suprieur droit du document.
La taille de la fentre correspond aux dimensions internes de la fentre de navigateur, bordures exclues ; la rsolution de l'cran est indique entre parenthses. Optez, par exemple, pour le format 536 x 196 (640 x 480, valeur par dfaut) si les visiteurs de votre site utilisent Microsoft Internet Explorer ou Netscape Navigator par dfaut sur un moniteur de 640 x 480.
version prliminaire
Espace de travail
Pour un redimensionnement moins prcis des fentres, utilisez les mthodes standard de votre systme d'exploitation, par exemple, en faisant glisser le coin infrieur droit d'une fentre.
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 d'un nouveau format d'affichage au menu contextuel Taille de fentre:

1 Cliquez sur Modifier les tailles dans le menu contextuel Taille de fentre. 2 Cliquez dans l'espace 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 l'un 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 l'entre correspondant un moniteur d'une rsolution de 800 x 600 pixels, et Mac 17 ct de l'entre correspondant un moniteur d'une rsolution de 832 x 624 pixels. Diverses rsolutions peuvent tre rgles sur la plupart des moniteurs.
Dfinition de la taille des fentres et de la vitesse de connexion

1 Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh). 2 Slectionnez la catgorie Barre d'tat dans la liste de gauche. 3 Parmi les options suivantes, dfinissez celles de votre choix :
Taille de la fentre Permet de personnaliser les tailles de fentre qui s'affichent dans le menu contextuel de la barre
d'tat.
Vitesse de connexion Dtermine la vitesse de connexion (exprime en kilobits par seconde) utilise pour calculer le
temps de tlchargement. Le temps de tlchargement de la page est indiqu dans la barre d'tat. Celui des images est affich dans l'inspecteur Proprits lorsqu'une image est slectionne dans la fentre de document.
Voir aussi
Prsentation de la barre d'tat la page 12 Redimensionnement de la fentre de document la page 19
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.
version prliminaire
Espace de travail
Navigateurs compatibles Permet de tester le code HTML de vos documents afin de dterminer s'il contient des balises ou des attributs non pris 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 d'amliorer 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, l'accessibilit, les textes secondaires manquants, les balises imbriques redondantes, les balises vides amovibles et les documents sans nom.
Journal FTP Permet d'avoir une vue d'ensemble des transferts de fichiers en FTP. Dbogage du serveur Permet de consulter des informations afin de dboguer une application Adobe ColdFusion.
Voir aussi
Recherche de balises, d'attributs ou de chanes de texte dans le code la page 330 Utilisation des documents de rfrence sur les langages la page 331 Test de votre site la page 110 Validation des balises la page 336 Vrification de la compatibilit du navigateur la page 336 Recherche de liens rompus, externes et orphelins la page 294 Placement de fichiers sur un serveur distant la page 86 Acquisition de fichiers depuis un serveur distant la page 85 Utilisation du dbogueur ColdFusion (Windows uniquement) la page 337
Utilisation de barres d'outils, d'inspecteurs et de menus contextuels

Affichage des barres d'outils
Utilisez les barres d'outils document et standard pour effectuer des 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 mdia. 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.
Voir aussi
Prsentation de la barre d'outils de document la page 8 Prsentation de la barre d'outils standard la page 9
version prliminaire
Espace de travail
Prsentation de la barre d'outils de codage la page 11 Prsentation de la barre d'outils Rendu de style la page 10
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.
Voir aussi
Prsentation de l'inspecteur Proprits la page 13 Dfinition des proprits de texte dans l'inspecteur Proprits la page 235 Ancrage et annulation dancrage de panneaux la page 24 Modification d'attributs dans l'inspecteur de balises la page 339
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.
version prliminaire
Espace de travail
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.
Personnalisation de l'espace de travail de CS4

Gestion des fentres et des panneaux
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.
version prliminaire
Espace de travail
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 prend pas en charge lancrage des fentres de document ni son annulation. Utilisez le bouton Rduire de la fentre de document pour crer des fentres flottantes, 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.
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.
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.
version prliminaire
Espace de travail
Dplacement du panneau Navigateur vers un nouveau dock ; cette opration est indique par une surbrillance verticale bleue.
Panneau Navigateur 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 s'affiche pas, faites glisser la souris l'emplacement 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.
version prliminaire
Espace de travail
A B
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.
version prliminaire
Espace de travail
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 cliquer une fois 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 la palette 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
version prliminaire
Espace de travail
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. Dans certaines applications, si vous slectionnez loption Rduction automatique des panneaux dicnes 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 de panneaux flottants dvelopps).
Enregistrement et basculement dun espace de travail lautre

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, Illustrator, 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.
version prliminaire
Espace 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 seulement). 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.
(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 l'espace de travail De base par dfaut l'aide du slecteur situ dans la barre d'application.
Remarque : Dans Dreamweaver, Designer correspond lespace de travail par dfaut.

2 (PhotoShop, InDesign, InCopy) Choisissez la commande Fentre > Espace de travail > Rinitialiser [Nom de
lespace de travail].
(Photoshop) Restauration d'une 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 l'ordre des espaces de travail de la barre dapplication, faites-les glisser.
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 d'une partie de l'espace de travail flottant dans laquelle chaque document s'affiche dans sa propre fentre.
version prliminaire
Espace de travail
Ouverture d'un document onglets dans une fentre spare

Cliquez en maintenant la touche Ctrl enfonce sur l'onglet, 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.
Dreamweaver ne modifie pas l'affichage des documents ouverts lorsque vous modifiez les prfrences. En revanche, une fois que vous avez slectionn une nouvelle prfrence, les documents ouverts s'affichent en fonction de cette dernire.
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 d'elles. Vous pouvez activer les icnes en couleur de manire permanente, mme quand le pointeur de la souris ne se trouve pas au-dessus d'elles.
Choisissez Affichage > Icnes en couleur. Basculez vers l'espace de travail Classique ou Codeur.
Pour dsactiver l'affichage des icnes en couleur, dsactivez l'option Icnes en couleur du menu Affichage, ou passez un espace de travail diffrent.
Voir aussi
Affichage de lespace de travail ou basculement dun espace de travail lautre la page 29
Masquage et affichage de l'cran d'accueil de Dreamweaver

L'cran d'accueil s'affiche lorsque vous dmarrez Dreamweaver ou lorsqu'aucun document n'est ouvert. Vous pouvez masquer l'cran d'accueil puis l'afficher de nouveau ultrieurement selon vos besoins. Lorsque l'cran d'accueil est masqu et qu'aucun document n'est ouvert, la fentre de document est vide.
Masquage de l'cran d'accueil

Slectionnez l'option Ne plus afficher dans l'cran d'accueil.
Affichage de l'cran d'accueil

1 Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh). 2 Dans la catgorie Gnral, activez l'option Afficher l'cran d'accueil.
version prliminaire
Espace de travail
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 d'un utilisateur n'affecte celle d'un autre. Pour ce faire, la premire fois que vous excutez Dreamweaver sur l'un des systmes multiutilisateurs reconnus, l'application cre des copies de divers 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 d'utilisateur\Application Data\Adobe\Dreamweaver\fr_FR\Configuration, un dossier qui est cach par dfaut. Pour afficher les fichiers et dossiers cachs, choisissez Outils > Options des dossiers dans l'Explorateurs Windows, cliquez sur l'onglet Affichage, puis activez l'option Afficher les fichiers et dossiers cachs. Sous Windows Vista, ils se trouvent dans C:\Utilisateurs\nom d'utilisateur\AppData\Roaming\Adobe\Dreamweaver \fr_FR\Configuration, qui est cach par dfaut. Pour afficher les fichiers et dossiers cachs, choisissez Outils > Options des dossiers dans l'Explorateurs Windows, cliquez sur l'onglet Affichage, puis activez l'option 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.
Dfinition des prfrences gnrales de Dreamweaver

1 Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh). 2 Parmi les options suivantes, dfinissez celles de votre choix :
Ouvrir les documents dans des onglets Permet d'ouvrir tous les documents dans une seule fentre contenant des onglets que vous utilisez pour passer d'un document l'autre (Macintosh uniquement). Afficher lcran daccueil Affiche l'cran d'accueil de Dreamweaver lorsque vous dmarrez Dreamweaver ou qu'aucun
document n'est ouvert.

Rouvrir les documents au dmarrage Ouvre tous les documents qui taient ouverts lorsque vous avez ferm Dreamweaver. Si cette option n'est pas slectionne, Dreamweaver affiche l'cran d'accueil ou un cran vide au dmarrage (selon les paramtres dfinis pour Afficher l'cran d'accueil). Avertir l'ouverture de fichiers en lecture seule Vous informe lorsque le fichier que vous ouvrez est en lecture seule
(verrouill). Vous pouvez dverrouiller/extraire le fichier, l'afficher en lecture seule ou annuler l'action.
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 l'un de ces boutons, le fichier correspondant est ouvert.
Dcouvrir les fichiers association dynamique Permet d'indiquer si les fichiers association dynamique doivent
apparatre automatiquement dans la barre d'outils 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
version prliminaire
Espace de travail
toujours automatiquement mis jour, les liens ne sont jamais mis jour ou un message vous demande s'il convient d'excuter une mise jour (Voir Mise jour automatique des liens la page 288.)
Afficher la bote de dialogue lors de l'insertion d'un objet Dtermine si Dreamweaver vous invite entrer des informations supplmentaires lorsque vous insrez des images, des tableaux, des animations Shockwave et certains autres objets l'aide du panneau Insertion ou du menu Insertion. Si cette option est dsactive, aucune bote de dialogue ne s'affiche ; dans ce cas, prcisez le fichier source pour les images, le nombre de lignes dans un tableau, etc. dans l'inspecteur Proprits. Lorsque vous insrez des images avec effet de survol ou du code HTML Fireworks, une bote de dialogue s'affiche 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 l'entre en ligne deux octets Permet d'entrer 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 s'affiche, 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 qu'en appuyant sur la touche Entre (Windows) ou Retour
(Macintosh) la fin d'un paragraphe de titre en mode d'affichage Cration, 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 d'un 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 d'ajouter les dtails ultrieurement).
Autoriser plusieurs espaces conscutifs Indique qu'en entrant deux espaces ou plus en mode d'affichage Cration, vous crez des espaces inscables qui s'affichent sous forme de plusieurs espaces dans un navigateur. (Par exemple, vous pouvez taper deux espaces entre les phrases, tout comme vous le faites sur une machine 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 l'inspecteur 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 d'viter 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
d'avertissement s'affiche lorsque vous enregistrez un modle Dreamweaver prsentant une rgion modifiable dans une balise de paragraphe ou d'en-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 l'aide de divalign="center" ou de la balise center lorsque
vous cliquez sur le bouton Centrer de l'inspecteur Proprits. Remarque : L'utilisation de ces deux mthodes de centrage n'est plus recommande depuis les spcifications de HTML 4.01. Il est conseill d'utiliser 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.
version prliminaire
Espace de travail
Nombre maximum d'tapes d'historique Dtermine le nombre maximal d'tapes que le panneau Historique conserve
et affiche. (la valeur par dfaut doit tre suffisante pour la plupart des utilisateurs). Si le nombre d'tapes dpasse la valeur indique, les tapes les plus anciennes sont supprimes. Pour plus d'informations, voir Automatisation des tches la page 274.
Dictionnaire orthographique Affiche la liste des dictionnaires disponibles. Si un dictionnaire contient plusieurs
dialectes ou conventions orthographiques (par exemple, l'anglais britannique et l'anglais amricain), les dits dialectes sont rpertoris individuellement dans le menu contextuel Dictionnaire.
Voir aussi
Vue d'ensemble de la prsentation de l'espace de travail la page 4 Mise jour automatique des liens la page 288
Dfinition des prfrences de police pour les documents dans Dreamweaver

Le codage d'un document dtermine la faon dont le document s'affiche dans un navigateur. Les prfrences de polices de Dreamweaver vous permettent d'utiliser un texte affich dans la police et la taille de votre choix. Toutefois, les polices slectionnes dans la bote de dialogue Prfrences des polices n'influent que sur la faon dont les documents s'affichent dans Dreamweaver. Elles n'ont aucun impact sur la faon dont ils s'affichent dans le navigateur d'un visiteur. Pour modifier la faon dont les polices s'affichent dans un navigateur, vous devez modifier le texte l'aide de l'inspecteur Proprits ou en appliquant une rgle CSS. Pour plus d'informations sur la dfinition d'un codage par dfaut pour les nouveaux documents, consultez la section Cration et ouverture de documents la page 61.
1 Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh). 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 d'exploitation prenne en charge les polices deux octets.
4 Slectionnez une police et un format utiliser pour chaque catgorie du codage slectionn.
Remarque : Pour qu'une police apparaisse dans les menus contextuels correspondants, il est indispensable de l'installer sur votre ordinateur. Par exemple, si vous souhaitez visualiser un texte rdig en japonais, il vous faut installer un jeu de caractres japonais au pralable.
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.
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.
Mode Code Police utilise dans tout le texte qui apparat dans le mode d'affichage Code et dans l'inspecteur de code.
La valeur par dfaut varie en fonction des polices installes sur votre systme.
Voir aussi
Description de l'encodage de document la page 219
version prliminaire
Espace de travail
Personnalisation des couleurs de surbrillance de Dreamweaver

Les prfrences de surbrillance servent personnaliser les couleurs utilises dans Dreamweaver pour identifier les zones d'un modle, les lments d'une bibliothque, les balises tierces, les lments de mise en forme et le code.
Voir aussi
Utilisation du slecteur de couleur la page 223 Modification de la couleur de surbrillance des balises div la page 163
Modification de la couleur de surbrillance

1 Choisissez Edition > Prfrences, puis la catgorie Surbrillance. 2 Cliquez sur le slecteur de couleur situe prs de l'objet 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 d'un objet

1 Choisissez Edition > Prfrences, puis la catgorie Surbrillance. 2 Cochez ou dcochez l'option Afficher situe prs de l'objet dont vous souhaitez activer ou dsactiver la couleur de
surbrillance.
Raccourcis clavier
Cration d'un feuille de rfrence pour le jeu de raccourcis en cours
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.
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.
Voir aussi
Manipulation de fragments de code la page 328
version prliminaire
Espace de travail
Cration d'un raccourci clavier

Crez vos propres touches de raccourci, modifiez des raccourcis existants ou slectionnez un jeu de raccourcis prdfini.
1 Slectionnez Edition > Raccourcis clavier (Windows) ou Dreamweaver > Raccourcis clavier (Macintosh). 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 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

1 Slectionnez Edition > Raccourcis clavier (Windows) ou Dreamweaver > Raccourcis clavier (Macintosh). 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 (-).
version prliminaire
Espace de travail
Ajout d'un raccourci clavier une commande

1 Slectionnez Edition > Raccourcis clavier (Windows) ou Dreamweaver > Raccourcis clavier (Macintosh). 2 Dans le menu contextuel Commandes, slectionnez une catgorie. 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

1 Slectionnez Edition > Raccourcis clavier (Windows) ou Dreamweaver > Raccourcis clavier (Macintosh). 2 Dans le menu contextuel Commandes, slectionnez une catgorie. 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.

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.
version prliminaire
Espace de travail
Extensions
Ajout et gestion d'extensions dans Dreamweaver
Les extensions sont de nouvelles fonctions, faciles intgrer dans Dreamweaver. Vous pouvez utiliser plusieurs types d'extensions ; il existe, par exemple, des extensions qui permettent de reformater des tableaux, d'crire des complments de scripts cot serveurs ou clients. Remarque : Pour installer des extensions accessibles tous les utilisateurs dans un systme d'exploitation multiutilisateur, vous devez disposer des droits Administrateur (Windows) ou root (Mac OS X). Pour rechercher les extensions les plus rcentes pour Dreamweaver, consultez le site Web d'Adobe Exchange, l'adresse suivante : www.adobe.com/go/dreamweaver_exchange_fr/. Sur ce site, vous pouvez vous connecter et tlcharger des extensions (un grand nombre d'entre elles sont gratuites), participer des forums de discussion, visualiser les rapports et analyses d'utilisateurs, ainsi qu'installer et exploiter Extension Manager. Vous devez installer Extension Manager avant de pouvoir tlcharger des extensions. Le logiciel Extension Manager est une application indpendante permettant d'installer et de grer les extensions dans les applications Adobe. Vous pouvez lancer Extension Manager partir de Dreamweaver en choisissant Commandes > Grer les extensions.
1 Sur le site Web Adobe Exchange, cliquez sur le lien de tlchargement de l'extension qui vous intresse.
Votre navigateur vous permet peut-tre d'ouvrir et d'installer l'extension directement depuis le site ou de l'enregistrer sur votre disque.
Si vous l'ouvrez directement, Extension Manager traite automatiquement l'installation. Si vous l'enregistrez sur votre disque, placez le fichier du logiciel d'extension (.mxp ou .mxi) dans le dossier des
extensions tlcharges de l'application Dreamweaver sur votre ordinateur.
2 Double-cliquez sur le fichier du logiciel d'extension ou ouvrez Extension Manager et choisissez Fichier >
Installer l'extension. (Certaines extensions ne sont accessibles qu'une fois que vous avez redmarr l'application. Remarque : Utilisez Extension Manager pour supprimer des extensions ou pour consulter des informations sur l'extension.
Voir aussi
A propos de la personnalisation de Dreamweaver dans les systmes multiutilisateurs la page 31
version prliminaire
38
Chapitre 3 : Utilisation de sites Dreamweaver

Un site Adobe Dreamweaver CS5 est un ensemble de tous les fichiers et de tous les 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.
Configuration d'un site Dreamweaver

A propos des sites 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 consacr la dfinition d'un site Dreamweaver l'adresse www.adobe.com/go/lrvid4050_fr.
version prliminaire
Utilisation de sites Dreamweaver
Description de la structure du dossier local et du dossier distant

Si vous voulez utiliser Dreamweaver pour vous connecter un dossier distant, vous devez dfinir ce dossier distant dans la catgorie Infos distantes de la bote de dialogue Dfinition 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 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.
Non Rpertoire de connexion
(Ne doit pas tre un dossier distant dans ce cas)
Dossier local
(dossier racine)
Oui
public_html
(Doit tre un dossier distant)
Actifs
Non
Actifs
(Ne doit pas tre un dossier distant)
HTML
HTML
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 se charger de cette opration.
Cration d'un nouveau site

Un site Dreamweaver vous permet d'organiser tous les documents associs un site Web. La bote de dialogue Configuration du site vous permet de dfinir les paramtres de votre site Dreamweaver. Pour ouvrir la bote de dialogue Configuration du site, choisissez Site > Nouveau site.
version prliminaire
Catgorie Site
La catgorie Site de la bote de dialogue Configuration du site est la seule que vous devez complter pour pouvoir commencer travailler sur votre site Dreamweaver. Cette catgorie permet de prciser le dossier local o vous allez stocker tous les fichiers de votre site. Le dossier local peut se trouver sur un ordinateur local ou sur un serveur rseau. 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. Remarque : Vous n'avez pas besoin de dfinir un dossier distant si votre dossier racine local se trouve sur le systme excutant votre serveur Web. Ce scnario suppose que le serveur Web s'excute sur votre ordinateur local.
Nom du site Le nom qui s'affiche dans le panneau Fichiers et dans la bote de dialogue Grer les sites ; il ne s'affiche
pas dans le navigateur.

Dossier local du site Le nom du dossier sur votre disque local o vous stockez les fichiers, les modles et les lments de bibliothque de votre site. Crez un dossier sur votre disque dur ou cliquez sur l'icne de dossier pour rechercher un dossier. Lorsque Dreamweaver rsout des liens relatifs la racine du site, il le fait par rapport ce dossier.
Catgorie Serveurs
La catgorie Serveurs permet d'indiquer des serveurs distants et d'valuation. Le serveur distant est l'endroit o vous spcifiez le dossier distant qui contiendra les fichiers des fins de production, de collaboration, de dploiement ou divers autres scnarios. En rgle gnrale, votre dossier distant se trouve sur l'ordinateur partir duquel vous excutez votre serveur Web. Dans le panneau Fichiers de Dreamweaver, le dossier distant reprsente votre site distant. Lorsque vous configurez un dossier distant, vous devez slectionner une mthode de connexion qui permettra Dreamweaver de transfrer des fichiers votre serveur Web et de tlcharger des fichiers depuis ce serveur. Remarque : Dreamweaver prend en charge les connexions aux serveurs compatibles IPv6. Les types de connexion pris en charge sont notamment FTP, SFTP, WebDav et RDS. Pour plus d'informations, voir www.ipv6.org/ Dfinition des options pour les connexions FTP Utilisez ce paramtre si vous vous connectez votre serveur Web par FTP.
1 Choisissez Site > Grer les sites. 2 Cliquez sur Nouveau pour configurer un nouveau site, ou slectionnez un site Dreamweaver existant et cliquez sur
Modifier.
3 Dans la bote de dialogue Configuration du site, slectionnez la catgorie Serveurs et effectuez l'une des actions
suivantes :
Cliquez sur le bouton Ajouter nouveau serveur pour ajouter un nouveau serveur. Slectionnez un serveur existant puis cliquez sur le bouton Modifier serveur existant.
Les illustrations suivantes montrent l'cran Base de la catgorie Serveur, avec les zones de texte dj remplies.
version prliminaire
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 entrer le nom de votre choix. 5 Slectionnez FTP dans la liste droulante Se connecter au moyen de. 6 Dans la zone Adresse FTP, entrez l'adresse du serveur FTP sur lequel vous chargez les fichiers pour votre site Web.
Votre adresse FTP est le nom Internet complet d'un systme informatique, par exemple, ftp.mindspring.com. Entrez l'adresse complte sans ajouter de texte. Evitez en particulier d'ajouter un nom de protocole devant l'adresse. Si vous ne connaissez pas votre adresse FTP, contactez votre 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 d'utilisateur et Mot de passe, entrez le nom d'utilisateur et le mot de passe utiliss pour la
connexion au serveur FTP.

8 Cliquez sur Tester pour tester votre adresse FTP, votre nom d'utilisateur et votre mot de passe.
Remarque : Vous devez obtenir les informations relatives l'adresse FTP, au nom d'utilisateur et au mot de passe auprs de l'administrateur systme de la socit qui hberge votre site. Personne d'autre n'a 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 l'option 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 distant o sont stocks les
documents visibles pour le public. Si vous n'tes pas sr du rpertoire racine saisir, contactez l'administrateur 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 d'utilisateur, il s'agit probablement du nom indiquer dans la zone Rpertoire racine.
11 Dans la zone URL Web, entrez l'URL de votre site Web (par exemple http://www.monsite.com). Dreamweaver
utilise l'URL Web pour crer des liens relatifs la racine du site et pour vrifier les liens lorsque vous employez la fonction de vrification des liens.
version prliminaire
Pour une explication plus dtaille de cette option, voir Catgorie Paramtres avancs la page 46.
12 Dveloppez la section Options supplmentaires si vous devez encore dfinir des options supplmentaires. 13 Slectionnez l'option Utiliser FTP passif si la configuration de votre pare-feu ncessite l'utilisation d'un FTP passif.
Cette fonction permet votre logiciel local de configurer la connexion FTP la place du serveur distant. Si vous n'tes pas sr d'utiliser le mode FTP passif, consultez votre administrateur systme ou faites des essais en activant puis en dsactivant l'option Utiliser FTP passif. Pour plus d'informations, consultez la TechNote 15220 sur le site Web d'Adobe l'adresse www.adobe.com/go/tn_15220_fr.
14 Choisissez Utiliser le mode de transfert IPv6 si vous employez un serveur FTP compatible IPv6.
Paralllement au dploiement de la version 6 d'Internet Protocol (IPv6), les commandes EPRT et EPSV ont remplac respectivement les commandes FTP PORT et PASV. 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 d'informations, voir www.ipv6.org/.
15 Choisissez Utiliser proxy si... 16 Cliquez sur Enregistrer pour fermer l'cran Base. Ensuite, dans la catgorie Serveurs, indiquez si le serveur que vous
venez d'ajouter ou de modifier est un serveur distant, un serveur d'valuation ou les deux. Pour plus d'informations sur ces options, consultez la TechNote 14834 sur le site Web d'Adobe, l'adresse www.adobe.com/go/tn_14834_fr. Dfinition des options pour les connexions SFTP Utilisez l'option Secure FTP (SFTP) si la configuration de votre pare-feu exige l'emploi d'une connexion FTP scurise. SFTP utilise un systme de cryptage et de cls publiques pour scuriser la connexion votre serveur d'valuation. 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.
Modifier.
suivantes :
4 Dans la zone Nom du serveur, entrez le nom du nouveau serveur. Vous pouvez entrer le nom de votre choix. 5 Slectionnez SFTP dans la liste droulante Se connecter au moyen de.
Les autres options sont identiques celles des connexions FTP. Reportez-vous la section ci-dessus pour plus d'informations. Remarque : Le port 22 est le port par dfaut pour la rception de connexions SFTP.
version prliminaire
Dfinition d'options pour les connexions de type local ou rseau Utilisez cette option pour vous connecter un dossier rseau, si vous stockez des fichiers ou excutez votre serveur d'valuation sur votre ordinateur local.
Modifier.
suivantes :
4 Dans la zone Nom du serveur, entrez le nom du nouveau serveur. Vous pouvez entrer le nom de votre choix. 5 Slectionnez Local/Rseau dans la liste droulante Se connecter au moyen de. 6 Cliquez sur l'icne 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.

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. Pour une explication plus dtaille de cette option, voir Catgorie Paramtres avancs la page 46.
8 Cliquez sur Enregistrer pour fermer l'cran Base. Ensuite, dans la catgorie Serveurs, indiquez si le serveur que vous
venez d'ajouter ou de modifier est un serveur distant, un serveur d'valuation ou les deux. Dfinition des options pour les connexions WebDAV Utilisez ce paramtre si vous vous connectez votre serveur l'aide du protocole WebDAV (Web-based Distributed Authoring and Versioning). Cette mthode de connexion suppose que vous disposez d'un serveur prenant en charge ce protocole, par exemple Microsoft Internet Information Server (IIS) 5.0 ou une installation du serveur Web Apache configure de faon adquate. Remarque : Si vous slectionnez WebDAV comme mthode de connexion et que vous utilisez Dreamweaver 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 d'autres slectionnent d'autres mthodes de connexion (par exemple, FTP), la fonction archivage/extraction de Dreamweaver fonctionnera de faon imprvisible, car WebDAV utilise son propre systme de verrouillage.
Modifier.
suivantes :
4 Dans la zone Nom du serveur, entrez le nom du nouveau serveur. Vous pouvez entrer le nom de votre choix. 5 Slectionnez WebDAV dans la liste droulante Se connecter au moyen de.
version prliminaire
6 Dans la zone URL, indiquez l'URL complte vers le rpertoire du serveur WebDAV auquel vous voulez vous
connecter. Cette URL inclut le protocole, le port et le rpertoire (s'il ne s'agit pas du rpertoire racine). Par exemple, http://webdav.mondomaine.net/monsite.
7 Entrez votre nom d'utilisateur et votre mot de passe.
Ces informations sont relatives l'identification du serveur et ne sont pas associes Dreamweaver. Si vous ne connaissez pas votre nom d'utilisateur et votre mot de passe, consultez votre administrateur systme ou Web.
8 Cliquez sur Tester pour tester vos paramtres de connexion. 9 Activez l'option Enregistrer si vous voulez que Dreamweaver mmorise votre mot de passe chaque nouvelle
session.
venez d'ajouter ou de modifier est un serveur distant, un serveur d'valuation ou les deux. Dfinition des options pour les connexions RDS Utilisez ce paramtre si vous vous connectez votre serveur Web l'aide de RDS (Remote Development Services). Cette mthode de connexion suppose que votre serveur distant se trouve sur un ordinateur excutant Adobe ColdFusion
Modifier.
suivantes :
4 Dans la zone Nom du serveur, entrez le nom du nouveau serveur. Vous pouvez entrer le nom de votre choix. 5 Slectionnez RDS dans la liste droulante Se connecter au moyen de. 6 Cliquez sur le bouton Paramtres et entrez les informations suivantes dans la bote de dialogue Configurer le
serveur RDS :
Entrez le nom de l'ordinateur hte sur lequel votre serveur Web est install.
Il s'agit probablement d'une adresse IP ou d'une 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 d'utilisateur et votre mot de passe RDS.

Remarque : Ces options seront peut-tre invisibles si vous avez configur votre nom d'utilisateur et votre mot de passe dans les paramtres de scurit de ColdFusion Administrator.
version prliminaire
Slectionnez l'option Enregistrer si vous voulez que Dreamweaver mmorise vos paramtres.
7 Cliquez sur OK pour fermer la bote de dialogue Configurer le serveur RDS. 8 Dans la zone URL Web, entrez l'URL de votre site Web (par exemple http://www.monsite.com). Dreamweaver
venez d'ajouter ou de modifier est un serveur distant, un serveur d'valuation ou les deux. Dfinition des options pour les connexions Microsoft Visual SourceSafe La prise en charge de Microsoft Visual SourceSafe a t abandonne partir de Dreamweaver CS5. Dfinition des options avances 1 Choisissez Site > Grer les sites.
2 Cliquez sur Nouveau pour configurer un nouveau site, ou slectionnez un site Dreamweaver existant et cliquez sur
Modifier.
suivantes :
4 Dfinissez les options de base requises, puis cliquez sur le bouton Avanc. 5 Slectionnez l'option Conserver les informations de synchronisation si vous souhaitez que vos fichiers locaux et
distants soient synchroniss automatiquement. (Cette option est slectionne par dfaut.)
6 Slectionnez l'option Tlcharger autom. les fichiers vers le serveur lors de l'enregistrement si vous voulez que
Dreamweaver charge votre fichier sur votre site distant lorsque vous l'enregistrez.
7 Slectionnez l'option Activer l'extraction de fichier si vous voulez activer le systme d'archivage et d'extraction. 8 Si vous employez un serveur d'valuation, slectionnez un modle de serveur dans le menu Modle de serveur .
Pour plus d'informations, consultez la section Configuration d'un serveur d'valuation la page 48. 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 d'un dossier distant et sur la faon de les rsoudre. Vous trouverez, sur le site Web d'Adobe, une TechNote dtaille qui fournit des informations spcifiques au dpannage FTP. Cette TechNote se trouve l'adresse www.adobe.com/go/tn_14834_fr.
La mise en oeuvre FTP de Dreamweaver peut ne pas fonctionner correctement avec certains serveurs proxy, parefeu multiniveaux et autres formes d'accs indirect un serveur. Si vous avez des problmes d'accs FTP, demandez l'aide de votre administrateur systme.
Pour la mise en oeuvre 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.
version prliminaire
Utilisez des traits de soulignement la place des espaces, et vitez, dans la mesure du possible, d'utiliser des
caractres spciaux pour les noms de fichiers et de dossiers. La prsence de symboles deux points, de barres obliques, de points et d'apostrophes 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 compter plus de 31 caractres.
Notez que certains serveurs utilisent ce qui est appel, suivant le systme d'exploitation, 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 ailleurs. Ces alias n'ont gnralement pas d'effet ngatif sur votre capacit vous connecter au dossier ou rpertoire appropri, mais si vous ne pouvez vous connecter qu' une partie du serveur, il s'agit peut-tre d'un problme d'alias.
Si vous dcouvrez un message d'erreur du type impossible de placer le fichier , votre dossier distant peut tre
satur. Pour plus d'informations, 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 l'onglet Journal FTP.
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 la page 92.
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 ces types de liens, voir Chemins absolus, relatifs au documents et relatifs la racine du site la page 280. 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 un chemin relatif la racine du site n'apparat pas lorsque vous lancez l'aperu de documents dans un navigateur local, sauf si vous spcifiez un serveur de test ou activez l'option Aperu l'aide d'un fichier temporaire dans Edition > Prfrences > Aperu dans le 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.
version prliminaire
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" />
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 documents et relatifs la racine du site la page 280. 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 Permet de vrifier 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 demandera si vous souhaitez crer de nouveau 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.
Connexion ou dconnexion d'un dossier distant via un accs FTP

Dans le panneau Fichiers :
Pour vous connecter, cliquez sur l'option Connecter un hte distant dans la barre d'outils. Pour vous dconnecter, cliquez sur Dconnecter dans la barre d'outils.
Connexion ou dconnexion d'un dossier distant via un accs rseau

Vous n'avez pas besoin de vous connecter au dossier distant ; vous tes connect en permanence. Cliquez sur le
bouton Actualiser pour afficher vos fichiers distants.
version prliminaire
Configuration d'un serveur d'valuation

Si vous envisagez le dveloppement de pages dynamiques, Dreamweaver doit pouvoir recourir aux services d'un serveur d'valuation pour gnrer et afficher du contenu dynamique pendant que vous procdez la cration du site. Ce serveur d'valuation peut se trouver sur votre ordinateur local, un serveur de dveloppement, un serveur intermdiaire ou un serveur de production.
Modifier.
suivantes :
4 Dfinissez les options de base requises, puis cliquez sur le bouton Avanc.
Remarque : Vous devez entrer une URL Web dans l'cran Base lorsque vous spcifiez un serveur d'valuation. Pour plus d'informations, consultez la section suivante.
5 Sous Serveur d'valuation, slectionnez le modle de serveur que vous voulez utiliser pour votre application Web.
Remarque : Depuis la version CS5, Dreamweaver n'installe plus de comportements de serveur ASP.NET, ASP JavaScript ou JSP. Toutefois, si vous travaillez sur des pages ASP.NET, ASP JavaScript ou JSP, Dreamweaver continuera prendre en charge le mode En direct, la coloration de code et les indicateurs de code pour ces pages. Pour que ces fonctionnalits soient oprationnelles, il n'est pas ncessaire de slectionner ASP.NET, ASP JavaScript ou JSP dans la bote de dialogue Dfinition du site.
6 Cliquez sur Enregistrer pour fermer l'cran Avanc. Ensuite, dans la catgorie Serveurs, spcifiez le serveur que
vous venez d'ajouter ou de modifier comme serveur d'valuation.
Voir aussi
Choix d'un serveur d'application la page 545 Prparation la cration de sites dynamiques la page 535
A propos de l'URL Web pour le serveur d'valuation

Vous devez spcifier une URL Web afin que Dreamweaver puisse faire appel aux services d'un serveur d'valuation pour afficher les donnes et se connecter aux bases de donnes pendant que vous procdez la cration du site, Dreamweaver utilise la connexion au moment de la conception afin de vous transmettre des informations utiles sur la base de donnes, telles que le nom des tableaux qu'elle contient et le nom des colonnes de ces tableaux. L'URL Web d'un serveur d'valuation est constitue du nom de domaine et du nom d'un sous-rpertoire ou d'un rpertoire virtuel du rpertoire de base de votre site Web. Remarque : Bien que cette terminologie, utilise dans Microsoft IIS, puisse diffrer d'un serveur l'autre, les mmes concepts s'appliquent la plupart des serveurs Web.
Le 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 (c'est--dire que ce dossier est mapp sur le nom de domaine de votre site, par exemple www.mystartup.com). Dans ce cas, le prfixe d'URL est http://www.mystartup.com/.
version prliminaire
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 l'URL. 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 l'URL Web suivante : http://www.mystartup.com/inventory/ Si le dossier utiliser pour traiter les pages dynamiques n'est pas votre rpertoire de base ni l'un de ses sous-rpertoires, vous devez crer un rpertoire virtuel.
Un rpertoire virtuel Dossier qui ne se trouve pas physiquement dans le rpertoire de base du serveur, mme s'il apparat dans l'URL. Pour crer un rpertoire virtuel, spcifiez un alias reprsentant le chemin du dossier dans l'URL. 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 l'alias warehouse. Entrez l'URL Web suivante :
http://www.mystartup.com/warehouse/
Localhost Terme qui peut tre utilis pour dsigner le rpertoire de base dans vos URL lorsque le client (gnralement
un navigateur, mais dans ce cas Dreamweaver) rside sur le mme systme que votre serveur Web. Supposons que Dreamweaver rside sur le mme systme Windows que le serveur Web, que votre rpertoire de base soit c:\sites\company et que vous ayez dfini un rpertoire virtuel nomm warehouse dsignant le dossier charg du traitement des pages dynamiques. Les URL Web suivantes doivent tre entres pour les serveurs Web slectionns :
Serveur Web ColdFusion MX 7 IIS Apache (Windows) Jakarta Tomcat (Windows) URL Web http://localhost:8500/warehouse/ http://localhost/warehouse/ http://localhost:80/warehouse/ http://localhost:8080/warehouse/
Remarque : Par dfaut, le serveur Web ColdFusion MX 7 s'excute 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/MonNomd'Utilisateur/Sites (MonNomd'Utilisateur correspond votre nom d'utilisateur Macintosh). L'installation de Mac OS 10.1 ou version suprieure entrane la dfinition automatique d'un alias intitul ~MonNomd'Utilisateur. Ds lors, votre URL Web utilise par dfaut dans Dreamweaver se prsente de la manire suivante : http://localhost/~MonNomd'Utilisateur/ Si le dossier que vous souhaitez utiliser pour le traitement des pages dynamiques correspond Users:MonNomd'Utilisateur:Sites:inventory, l'URL Web est la suivante : http://localhost/~MonNomd'Utilisateur/inventory/
Gestion et modification de sites

La bote de dialogue Grer les sites a pour fonction de vous permettre de crer un nouveau site, de modifier, de dupliquer, de supprimer un site, d'importer ou d'exporter les paramtres d'un site.
1 Slectionnez Site > Grer les sites et slectionnez un site dans la liste de gauche. 2 Cliquez sur le bouton correspondant l'opration qui vous convient, puis cliquez sur Termin.
Nouveau Pour crer un nouveau site.
version prliminaire
Modifier Pour modifier un site existant. Dupliquer Pour crer une copie du site slectionn. Cette copie s'affiche dans la liste des sites. Supprimer Pour supprimer le site slectionn ; cette opration est irrversible. Exporter Pour exporter les paramtres d'un site sous forme de fichier XML (*.ste). Importer Pour slectionner un fichier de paramtres d'un site (*.ste) importer.
Voir aussi
Importer et exporter les paramtres d'un site la page 51
Modification d'un site Web distant existant dans Dreamweaver

Vous pouvez utiliser Dreamweaver pour copier un site distant existant (ou une partie d'un site distant) sur votre disque dur local, et le modifier localement, mme si vous n'avez pas utilis Dreamweaver pour crer le site original.
1 Crez un dossier local contenant le site existant, puis dfinissez-le en tant que dossier local du 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. Veillez choisir le dossier racine correct pour le site distant.
3 Dans le panneau Fichiers (Fentre > Fichiers), cliquez sur le bouton Connecter un hte distant (pour un accs
FTP) ou sur Actualiser (pour un accs rseau) dans la barre d'outils pour afficher le site distant.
4 Modifiez le site :
Si vous souhaitez travailler sur l'ensemble du site, slectionnez, dans le panneau Fichiers, le dossier racine du site
distant, puis cliquez sur Acqurir le(s) fichier(s) dans la barre d'outils pour tlcharger l'ensemble du site sur votre disque local.
Si vous dsirez travailler sur un seul des fichiers ou dossiers du site, slectionnez ce fichier ou dossier dans le volet
Affichage distant du panneau Fichiers et cliquez sur Acqurir le(s) fichier(s) dans la barre d'outils pour tlcharger ce fichier sur votre disque dur local. Dreamweaver duplique automatiquement toute la partie de la structure du site distant ncessaire pour replacer le fichier tlcharg au niveau adquat dans 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.
Suppression d'un site Dreamweaver de votre liste de sites

La suppression d'un Dreamweaver et de toutes ses informations de configuration de votre liste de site n'entrane pas la suppression des fichiers du site de votre ordinateur.
1 Choisissez Site > Grer les sites. 2 Slectionnez le nom du site. 3 Cliquez sur Supprimer, puis sur Oui pour supprimer le site de la liste ou sur Non pour conserver le site, puis cliquez
sur Termin.
version prliminaire
Importer et exporter les paramtres d'un site

Vous pouvez exporter les paramtres de votre site en tant que fichier XML que vous pourrez importer dans Dreamweaver ultrieurement. Cela vous permet de dplacer des sites entre plusieurs ordinateurs et versions de produit ainsi que de partager les paramtres avec d'autres utilisateurs. Exportez les paramtres de votre site rgulirement de faon disposer d'une copie de sauvegarde au cas o un incident surviendrait sur ce site.
Exportation de vos sites

1 Slectionnez Site > Grer les sites. 2 Slectionnez un ou plusieurs sites dont vous souhaitez exporter les paramtres, puis cliquez sur 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, 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 (nom d'utilisateur et mot de passe, par exemple), ainsi que les informations de chemin 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 pas les informations qui ne sont pas valables pour d'autres utilisateurs (vos informations de connexion au serveur distant et de chemins locaux, par exemple).
5 Pour chaque site dont les paramtres doivent tre exports, recherchez un emplacement o vous souhaitez
enregistrer le site et cliquez sur Enregistrer. (Dreamweaver enregistre les paramtres de chaque site en tant que fichier XML avec une extension de fichier .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.
Importation de sites
1 Slectionnez Site > Grer les sites. 2 Cliquez sur Importer. 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.
Une fois que Dreamweaver a import les sites, leurs noms apparaissent dans la bote de dialogue Grer les sites.
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.
1 Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh).
version prliminaire
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 du pare-feu 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. Slectionnez l'option Utiliser un pare-feu de la bote de dialogue Dfinition du site si vous vous connectez au serveur distant tout en tant protg par un pare-feu
Port du pare-feu Spcifie le port 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.
version prliminaire
Gestion des sites Contribute avec Dreamweaver

Gestion de sites Contribute
Adobe Contribute CS4 regroupe les fonctions d'un navigateur Web et d'un diteur de pages Web. Il permet vos collgues ou clients de naviguer jusqu' une page d'un site que vous avez cr et de modifier ou de mettre jour cette page s'ils possdent les droits d'accs adquats. Les utilisateurs de Contribute peuvent ajouter et mettre jour du contenu Web de base, y compris du texte mis en forme, des images, des tableaux et des liens. Les administrateurs de sites Contribute peuvent limiter les actions que les utilisateurs ordinaires (non administrateurs) peuvent effectuer dans un site. Remarque : Cette section s'adresse aux administrateurs de Contribute. En tant qu'administrateur du site, vous donnez la possibilit aux personnes qui ne sont pas administrateurs de modifier des pages en crant et en leur envoyant une cl de connexion (pour plus d'informations sur la faon de procder, consultez l'aide de Contribute). Vous pouvez galement configurer une connexion un site Contribute l'aide de Dreamweaver qui vous permet, vous ou votre concepteur de site, de vous connecter au site Contribute et d'utiliser toutes les fonctions de modification disponibles dans Dreamweaver. Contribute ajoute des fonctionnalits votre site Web avec Contribute Publishing Server (CPS), une suite d'applications de publication et d'outils de gestion utilisateur qui vous permet d'intgrer Contribute au service d'annuaire utilisateur de votre organisation (Lightweight Directory Access Protocol (LDAP) ou Active Directory, par exemple). Lorsque vous activez votre site Dreamweaver en tant que site Contribute, Dreamweaver lit les paramtres d'administration de Contribute chaque fois que vous vous connectez au site distant. Si Dreamweaver dtecte que CPS est actif, il hrite de certaines fonctionnalits des services CPS (restauration des fichiers et consignation des vnements, par exemple). Vous pouvez utiliser Dreamweaver pour vous connecter un site Contribute et modifier un fichier de ce site. La plupart des options Dreamweaver fonctionnent avec un site Contribute de la mme faon qu'avec tout autre site. Toutefois, lorsque vous utilisez Dreamweaver avec un site Contribute, Dreamweaver effectue automatiquement certaines oprations de gestion de fichiers, telles que l'enregistrement de diffrentes versions d'un document et la consignation de certains vnements dans la console CPS. Pour plus d'informations, consultez l'aide de Contribute.
Structure du site et conception de pages pour un site Contribute

Pour permettre aux utilisateurs de Contribute de modifier votre site Web, tenez compte des considrations suivantes lors de sa structuration :
Utilisez une structure de site simple. Evitez de crer de nombreux niveaux de dossiers. Regroupez les lments
associs dans un mme dossier.
Dfinissez des droits en lecture et en criture appropris pour les dossiers sur le serveur. Ajoutez des pages d'index aux dossiers mesure que vous les crez pour inciter les utilisateurs de Contribute
placer les nouvelles pages dans les dossiers appropris. Par exemple, si les utilisateurs de Contribute fournissent des pages contenant des comptes rendus de runions, vous pouvez crer un dossier dans le dossier racine du site appel comptes_rendus et y insrer une page d'index. Vous devez ensuite crer un lien qui renvoie la page d'index des comptes rendus sur la page principale du site. Un utilisateur de Contribute peut alors atteindre la page d'index et crer une page de procs-verbal pour une runion donne, dsigne par un lien depuis cette page.
Dans chaque page d'index du dossier, fournissez une liste de liens vers chaque page et document contenus dans ce
dossier.
version prliminaire
Utilisez des conceptions de pages simples en vitant des mises en forme fantaisistes. Utilisez CSS plutt que des balises HTML et attribuez un nom descriptif vos styles CSS. Si les utilisateurs de
Contribute utilisent un jeu de styles standard dans Microsoft Word, attribuez vos styles CSS les mmes noms que ceux des styles Word correspondants, afin que Contribute puisse faire correspondre les styles lorsqu'un utilisateur copie des donnes d'un document Word et les colle dans une page Contribute.
Pour empcher les utilisateurs de Contribute d'utiliser un style CSS, modifiez le nom du style de sorte qu'il
commence par mmhide_. Par exemple, si vous utilisez un style nomm Justification_droite dans une page mais que vous ne souhaitez pas que les utilisateurs de Contribute puissent utiliser ce style, renommez-le de la faon suivante : mmhide_Justification_droite. Remarque : Vous devez ajouter mmhide_ au nom du style en mode Code et non dans le panneau CSS.
Dans un souci de simplicit, utilisez aussi peu de styles CSS que possible. Si vous utilisez des inclusions ct serveur pour des lments de pages HTML, par exemple des en-tte ou des pieds
de page, crez une page HTML non lie contenant les liens vers les fichiers d'inclusion. Les utilisateurs de Contribute peuvent ensuite marquer cette page et l'utiliser pour rechercher les fichiers d'inclusion et les modifier.
Voir aussi
Cration d'un modle Dreamweaver la page 408 Cration et gestion de CSS la page 132 Utilisation des inclusions ct serveur la page 349
Transfert de fichiers depuis et vers un site Contribute

Contribute utilise un systme similaire au systme d'archivage et d'extraction de Dreamweaver afin qu'un seul utilisateur la fois puisse modifier une page Web donne. Lorsque vous activez la compatibilit avec Contribute dans Dreamweaver, le systme d'archivage et d'extraction de Dreamweaver est automatiquement activ. Pour transfrer des fichiers depuis et vers un site Contribute l'aide de Dreamweaver, utilisez toujours les commandes Archiver et Extraire. Si vous utilisez les commandes Placer et Acqurir pour transfrer les fichiers, vous risquez d'craser les dernires modifications apportes un fichier par un utilisateur de Contribute. Lorsque vous archivez un fichier dans un site Contribute, Dreamweaver effectue automatiquement une copie de sauvegarde de la version prcdemment archive du fichier dans le dossier _baks et ajoute votre nom d'utilisateur et la date un fichier Design Notes.
Voir aussi
Archivage et extraction de fichiers la page 89
Autorisations des fichiers et des dossiers Contribute sur le serveur

Contribute offre un moyen de grer les autorisations de fichiers et de dossiers pour chaque rle d'utilisateur que vous aurez dfini ; toutefois, Contribute ne permet pas de grer les autorisations de lecture et d'criture de base affectes aux fichiers et aux dossiers par le serveur. Dans Dreamweaver, vous pouvez grer ces autorisations directement sur le serveur.
version prliminaire
Si un utilisateur de Contribute ne dispose pas de droit d'accs en lecture sur le serveur pour un fichier dpendant, tel qu'une image affiche dans une page, le contenu de ce fichier ne s'affiche pas dans la fentre Contribute. Par exemple, si un utilisateur ne dispose pas de droit d'accs en lecture un dossier d'images, les images contenues dans ce dossier s'affichent sous la forme d'icnes d'image dchire dans Contribute. De mme, les modles Dreamweaver sont stocks dans un sous-dossier du dossier racine du site. Ainsi, si un utilisateur de Contribute ne dispose pas d'accs en lecture au dossier racine, il ne peut pas utiliser les modles de ce site, sauf si vous copiez les modles dans un dossier accessible. Lorsque vous dfinissez un site Dreamweaver, vous devez accorder aux utilisateurs des droits d'accs en lecture au dossier /_mm sur le serveur (sous-dossier _mm du dossier racine), ainsi qu'au dossier /Templates et tous les dossiers contenant des ressources dont ils auront besoin. Si pour une raison quelconque, vous ne pouvez pas accorder de droits d'accs en lecture au dossier /Templates, vous pouvez tout de mme rendre les modles accessibles aux utilisateurs de Contribute. Consultez la rubrique Activation de l'accs aux modles sans l'accs au dossier racine pour les utilisateurs de Contribute la page 59. Pour plus d'informations sur les autorisations Contribute, voir Administration de Contribute dans l'aide de Contribute.
Fichiers spciaux Contribute

Contribute utilise divers fichiers spciaux qui ne sont pas destins tre consults par les visiteurs du site :
le fichier de paramtres partags, avec une extension CSI, qui s'affiche dans un dossier nomm _mm dans le dossier
racine du site et contient des informations utilises par Contribute pour la gestion du site ;
des versions prcdentes de fichiers, dans des dossiers nomms _baks ; des versions temporaires de pages, afin que les utilisateurs puissent afficher un aperu des modifications ; des fichiers de verrouillage temporaires, indiquant qu'une page spcifique est en cours de modification ou affiche
en aperu ;
des fichiers Design Notes contenant des mtadonnes relatives aux pages du site.
En gnral, vous ne devez pas modifier ces fichiers spciaux dans Dreamweaver ; Dreamweaver les gre automatiquement. Si vous ne souhaitez pas que ces fichiers spciaux Contribute apparaissent sur votre serveur publiquement accessible, vous pouvez dfinir un serveur intermdiaire sur lequel les utilisateurs de Contribute pourront travailler sur les pages. Vous pouvez ensuite rgulirement copier ces pages Web du serveur intermdiaire au serveur de production qui se trouve sur le Web. Si vous utilisez un serveur intermdiaire, copiez uniquement les pages Web sur le serveur de production. Ne copiez aucun des fichiers spciaux Contribute mentionns ci-dessus. En particulier, ne copiez pas les dossiers _mm et _baks sur le serveur de production. Remarque : Pour plus d'informations sur la configuration d'un serveur afin d'viter que les visiteurs ne voient les fichiers des dossiers commenant par un soulign, consultez le chapitre traitant de la scurit des sites Web dans l'aide de Contribute. Parfois, vous devrez supprimer manuellement d'autres fichiers spciaux Contribute. Par exemple, si Contribute n'arrive pas supprimer des pages temporaires d'aperu, une fois l'aperu ferm par l'utilisateur, vous devez supprimer ces pages temporaires manuellement. Le nom de fichier des pages temporaires d'aperu commence par TMP. De mme, un fichier de verrouillage obsolte peut accidentellement rester sur le serveur. Dans ce cas, vous devez le supprimer manuellement pour que les autres utilisateurs puissent modifier la page.
version prliminaire
Prparation d'un site utiliser avec Contribute

Si vous prparez un site Dreamweaver existant pour les utilisateurs de Contribute, vous devez activer la compatibilit avec Contribute de faon explicite afin d'utiliser les fonctions relatives Contribute ; Dreamweaver n'affiche pas de message vous invitant le faire ; toutefois, lorsque vous vous connectez un site qui a t configur en tant que site Contribute (avec un administrateur), Dreamweaver vous invite activer la compatibilit avec Contribute. Tous les types de connexion ne prennent pas en charge la compatibilit avec Contribute. Les restrictions suivantes s'appliquent aux types de connexion :
Si vous vous connectez votre site distant l'aide de WebDAV, vous ne pouvez pas activer la compatibilit avec
Contribute, car ces systmes de commande source ne sont pas compatibles avec les systmes Design Notes et les systmes d'archivage et d'extraction que Dreamweaver utilise pour les sites Contribute.
Si vous utilisez RDS pour vous connecter votre site distant, vous pouvez activer la compatibilit avec Contribute,
mais vous devez ensuite personnaliser votre connexion avant de pouvoir la partager avec des utilisateurs de Contribute.
Si vous utilisez votre ordinateur local comme serveur Web, vous devez dfinir le site l'aide d'une connexion FTP
ou rseau (au lieu d'un simple chemin de dossier local) pour pouvoir partager votre connexion avec des utilisateurs de Contribute. Lorsque vous activez la compatibilit avec Contribute, Dreamweaver active automatiquement Design Notes (y compris l'option Tlcharger les Design Notes pour les partager), ainsi que le systme d'archivage et d'extraction de fichiers. Si Contribute Publishing Server (CPS) est actif sur le site distant auquel vous vous connectez, Dreamweaver notifie CPS ds que vous excutez une opration rseau, telle que l'archivage, la restauration ou la publication d'un fichier. Le CPS conserve une trace de ces vnements, que vous pouvez afficher dans la console d'administration CPS. (Si vous dsactivez CPS, ces vnements ne sont pas consigns.) L'activation de CPS s'effectue via Contribute. Pour plus d'informations, consultez l'aide d'Adobe Contribute. Remarque : Vous pouvez rendre un site compatible avec Contribute sans que Contribute soit install sur votre ordinateur. Toutefois, si vous souhaitez dmarrer Contribute Administrator partir de Dreamweaver, Contribute doit tre install sur le mme ordinateur que Dreamweaver et vous devez tre connect au site distant avant d'activer la compatibilit avec Contribute. Dans le cas contraire, Dreamweaver ne peut pas lire les paramtres d'administration de Contribute pour dterminer si les services CPS et l'option de restauration sont activs. Important : Vous devez vous assurer que le fichier de paramtres partags (fichier CSI) que Contribute emploie pour administrer le site se trouve bien sur le serveur distant et n'est pas endommag. Contribute cre automatiquement ce fichier (et crase ses anciennes versions) ds que vous effectuez des tches d'administration dans Contribute Administrator. Si le fichier de paramtres partags ne se trouve pas sur le serveur, ou s'il est endommag, Dreamweaver vous informe que le fichier requis pour la compatibilit avec Contribute n'existe pas sur le serveur ds que vous tentez une opration rseau (comme un placement). Pour vous assurer que le fichier correct se trouve bien sur le serveur, dsactivez la connexion au serveur dans Dreamweaver, dmarrez Contribute Administrator, apportez une modification administrative, puis reconnectez-vous au serveur dans Dreamweaver. Pour plus d'informations, consultez l'aide d'Adobe Contribute.
1 Choisissez Site > Grer les sites. 2 Slectionnez un site, puis cliquez sur Modifier. 3 Dans la bote de dialogue Configuration du site, dveloppez Paramtres avancs, slectionnez la catgorie
Contribute, puis activez l'option Activer la compatibilit avec Contribute.

4 Si une bote de dialogue s'affiche indiquant que vous devez activer Design Notes et la fonction Archiver/Extraire,
cliquez sur OK.
version prliminaire
5 Si vous n'avez pas dj fourni les informations de contact pour la fonction Archiver/Extraire, entrez votre nom et
votre adresse lectronique dans la bote de dialogue, puis cliquez sur OK. L'tat de la restauration, l'tat des services CPS, la zone de texte URL de la racine du site et le bouton Administrer le site dans Contribute apparaissent dans la bote de dialogue Dfinition du site. Si la restauration est active dans Contribute, vous pouvez restaurer les versions prcdentes des fichiers que vous avez modifis dans Dreamweaver.
6 Vrifiez l'URL qui s'affiche dans la zone de texte URL de la racine du site et modifiez-la le cas chant. Dreamweaver
construit une URL de la racine du site en fonction des informations de dfinition de site que vous avez fournies, mais il se peut que l'URL construite ne soit pas tout fait correcte.
7 Cliquez sur le bouton Tester pour vrifier si l'URL que vous avez saisie est correcte.
Remarque : Si vous tes prt envoyer une cl de connexion ou effectuer les tches d'administration du site Contribute, ignorez les tapes restantes.
8 Cliquez sur Administrer le site dans Contribute si vous voulez apporter des modifications administratives.
N'oubliez pas que Contribute doit tre install sur le mme ordinateur si vous voulez ouvrir Contribute Administrator partir de Dreamweaver.
9 Cliquez sur Enregistrer puis sur Termin.
Voir aussi
Restauration de fichiers (utilisateurs de Contribute) la page 103
Administration d'un site Contribute avec Dreamweaver

Aprs avoir activ la compatibilit avec Contribute, vous pouvez utiliser Dreamweaver pour lancer Contribute afin d'effectuer les tches d'administration du site. Remarque : Contribute doit tre install sur le mme ordinateur que Dreamweaver. En tant qu'administrateur d'un site Contribute, vous pouvez :
modifier les paramtres administratifs au niveau du site ;

Les paramtres administratifs de Contribute rassemblent les paramtres qui s'appliquent l'ensemble des utilisateurs de votre site Web. Ces paramtres permettent de configurer Contribute avec prcision pour bnficier d'une meilleure exprience utilisateur.
modifier les autorisations accordes aux rles utilisateur de Contribute ; dfinir les utilisateurs de Contribute.
Les utilisateurs de Contribute ncessitent certaines informations sur le site pour pouvoir s'y connecter. Vous pouvez regrouper toutes ces informations dans un fichier, appel cl de connexion, que vous envoyez aux utilisateurs de Contribute. Remarque : Une cl de connexion ne correspond pas un fichier de site export de Dreamweaver Avant de donner aux utilisateurs de Contribute les informations de connexion dont ils ont besoin pour modifier les pages, utilisez Dreamweaver pour crer la hirarchie de dossiers de base de votre site, ainsi que les modles et les feuilles de style CSS ncessaires au site.
1 Choisissez Site > Grer les sites. 2 Slectionnez un site, puis cliquez sur Modifier.
version prliminaire
3 Dans la bote de dialogue Configuration du site, dveloppez Paramtres avancs, puis slectionnez la catgorie
Contribute.
4 Cliquez sur le bouton Administrer le site dans Contribute.
Remarque : Ce bouton s'affiche uniquement si vous avez activ la compatibilit avec Contribute.
5 Si ncessaire, tapez le mot de passe administrateur, puis cliquez sur OK.
La bote de dialogue Administration du site Web s'affiche.
Pour modifier les paramtres administratifs, slectionnez une catgorie dans la liste de gauche, puis modifiez les
paramtres en fonction des besoins.
Pour modifier les paramtres de rle, dans la catgorie Utilisateurs et rles, cliquez sur Modifier les paramtres de
rle, puis apportez les modifications ncessaires.
Pour envoyer une cl de connexion afin de dfinir les utilisateurs, dans la catgorie Utilisateurs et rles, cliquez sur
Envoyer la cl de connexion, puis renseignez l'Assistant de connexion.
6 Cliquez sur Fermer, cliquez sur OK, puis sur Termin.
Pour plus d'informations sur les paramtres administratifs, la gestion des rles utilisateur ou la cration d'une cl de connexion, voir l'aide de Contribute.
Voir aussi
Importer et exporter les paramtres d'un site la page 51
Suppression, dplacement ou modification du nom d'un fichier distant sur un site Contribute
Pour supprimer un fichier d'un serveur distant qui hberge un site Contribute, procdez de la mme faon que pour supprimer un fichier sur le serveur de tout site Dreamweaver. Toutefois, lorsque vous supprimez un fichier d'un site Contribute, Dreamweaver vous demande si vous souhaitez supprimer toutes les anciennes versions du fichier. Si vous dcidez de les conserver, Dreamweaver enregistre une copie de la version actuelle dans le dossier _baks afin que vous puissiez la restaurer ultrieurement. Pour modifier le nom d'un fichier distant ou dplacer le fichier d'un dossier un autre dans un site Contribute, procdez de la mme faon que sur tout site Dreamweaver. Dans un site Contribute, Dreamweaver renomme ou dplace galement les anciennes versions du fichier associes qui sont enregistres dans le dossier _baks.
1 Slectionnez le fichier dans le volet distant du panneau Fichiers (Fentre > Fichiers) et appuyez sur Retour arrire
(Windows) ou Arrire (Macintosh). Une bote de dialogue s'affiche vous demandant de confirmer la suppression du fichier.
2 Dans la bote de dialogue de confirmation :
Pour supprimer toutes les versions prcdentes du fichier ainsi que la version actuelle, slectionnez l'option
Supprimer les versions de restauration.
Pour conserver les anciennes versions sur le serveur, dslectionnez l'option Supprimer les versions de restauration.
3 Cliquez sur Oui pour supprimer le fichier.
version prliminaire
Activation de l'accs aux modles sans l'accs au dossier racine pour les utilisateurs de Contribute
Dans un site Contribute, les autorisations de fichiers et de dossiers de base sont gres directement sur le serveur. Si pour des raisons de scurit, vous ne pouvez pas accorder de droits d'accs en lecture au dossier /Templates, vous pouvez tout de mme rendre les modles accessibles aux utilisateurs.
1 Dfinissez le site Contribute afin que le dossier racine soit le dossier qui s'affiche en tant que racine pour les
utilisateurs.
2 Copiez manuellement le dossier de modles du dossier racine du site principal dans le dossier racine du site
Contribute, l'aide du panneau Fichiers.

3 Aprs avoir modifi le site principal, recopiez les modles modifis dans les sous-dossiers appropris.
Si vous faites appel cette mthode, n'utilisez pas de liens relatifs la racine du site dans les sous-dossiers. Les liens relatifs la racine du site sont associs au dossier racine principal du serveur, et non au dossier racine dfini dans Dreamweaver. Les utilisateurs de Contribute ne peuvent pas crer de liens relatifs la racine du site. Si les liens d'une page Contribute apparaissent rompus, il peut s'agir d'un problme d'autorisations pour le dossier, en particulier si les liens renvoient des pages qui ne se trouvent pas dans le dossier racine de l'utilisateur de Contribute. Vrifiez les autorisations de lecture et d'criture pour les dossiers sur le serveur.
Voir aussi
Chemins absolus, relatifs au documents et relatifs la racine du site la page 280
Dpannage d'un site Contribute

Si un fichier distant d'un site Contribute semble avoir t extrait, mais qu'il n'est pas rellement verrouill sur l'ordinateur de l'utilisateur, vous pouvez dverrouiller le fichier afin de permettre aux utilisateurs de le modifier. Lorsque vous cliquez sur un bouton li l'administration d'un site Contribute, Dreamweaver vrifie qu'il peut se connecter au site distant et que l'URL de la racine du site indique pour le site est valide. Si Dreamweaver ne peut pas se connecter ou si l'URL nest pas valide, un message d'erreur s'affiche. Si les outils d'administration ne fonctionnent pas correctement, cela peut tre d au dossier _mm .
Dverrouillage d'un fichier dans un site Contribute

Remarque : Avant de suivre cette procdure, assurez-vous que le fichier n'est pas extrait. Si vous dverrouillez un fichier pendant qu'un utilisateur de Contribute le modifie, plusieurs utilisateurs risquent de modifier ce fichier en mme temps.
1 Effectuez l'une des oprations 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. Une bote de dialogue peut s'afficher, qui indique l'utilisateur ayant extrait le fichier et demande de confirmer le dverrouillage du fichier.
2 Si cette bote de dialogue s'affiche, cliquez sur Oui pour confirmer.
Le fichier est dverrouill sur le serveur.
version prliminaire
Dpannage des problmes de connexion pour un site Contribute

1 Vrifiez l'URL de la racine du site dans la catgorie Contribute de la bote de dialogue Dfinition de site en ouvrant
cette URL dans un navigateur, pour vous assurer qu'elle ouvre la bonne page.
2 Cliquez sur le bouton Tester dans la catgorie Infos distantes de la bote de dialogue Dfinition du site pour vous
assurer que vous pouvez vous connecter au site.

3 Si l'URL est correcte mais qu'un message d'erreur s'affiche lorsque vous effectuez un test, contactez votre
administrateur systme pour obtenir de l'aide.
Dpannage des outils administratifs de Contribute

1 Sur le serveur, assurez-vous que vous disposez des autorisations de lecture et d'criture, voire d'excution, pour le
dossier _mm.
2 Vrifiez que le dossier _mm contient un fichier de paramtres partags portant l'extension CSI. 3 Si ce n'est pas le cas, utilisez l'Assistant de connexion pour crer une connexion au site et devenir administrateur
du site. Le fichier de paramtres partags est cr automatiquement lorsque vous devenez administrateur. Pour plus d'informations sur la faon de devenir administrateur d'un site Web Contribute existant, consultez la section Administration de Contribute dans l'aide de Contribute.
version prliminaire
61
Chapitre 4 : Cration et gestion de fichiers

Vous pouvez non seulement crer des pages Web, mais aussi organiser les fichiers et les actifs appartenant votre site Web. Vous pouvez crer, grer et synchroniser des fichiers, les archiver et les extraire et tester la faon dont votre site va fonctionner dans diffrents navigateurs.
Cration et ouverture de documents

A propos de la cration de documents Dreamweaver
Dreamweaver fournit un environnement souple pour l'utilisation 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). 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 d'un nouveau document. Vous pouvez crer les types de document suivants :
un nouveau document ou un modle vierge ; un document bas sur l'une 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 l'habitude 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 l'arrire-plan, ainsi que d'autres proprits de page, en mode Cration ou en mode Code.
Types de fichier Dreamweaver

Vous pouvez travailler avec un grand choix de types de fichiers dans Dreamweaver. Le fichier HTML est celui avec lequel vous travaillerez le plus souvent. Les fichiers HTML (pour fichiers de type Hypertext Markup Language) contiennent le langage base de balises qui se charge d'afficher une page Web dans un navigateur. Vous pouvez enregistrer les fichiers HTML avec l'extension .html ou .htm. Dreamweaver enregistre par dfaut les fichiers avec l'extension .html. Voici quelques autres types de fichiers courants que vous pourriez utiliser quand vous travaillez avec Dreamweaver :
CSS Les fichiers CSS (Cascading Style Sheet, feuille de style en cascade) possdent l'extension .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 l'extension .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 d'un maximum de 256 couleurs.
JPEG Les fichiers JPEG (Joint Photographic Experts Group, du nom de l'organisation qui a cr le format) possdent
l'extension .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.
version prliminaire
Cration et gestion de fichiers
XML Les fichiers XML (Extensible Markup Language) possdent l'extension .xml. Ils contiennent des donnes brutes qui peuvent tre formates en utilisant XSL (Extensible Stylesheet Language). XSL Les fichiers XSL (Extensible Stylesheet Language) possdent l'extension .xsl ou .xslt. Ils sont utiliss pour crer des
donnes XML que vous voulez afficher sur une page Web.
CFML Les fichiers CFML (ColdFusion Markup Language ) possdent l'extension .cfm. Ils sont utiliss pour traiter des
pages dynamiques.
PHP Les fichiers Hypertext Preprocessor possdent l'extension .php et sont utiliss pour traiter des pages dynamiques.
Voir aussi
Affichage de donnes XML avec XSLT la page 506 Cration visuelle d'applications la page 622 Description des feuilles de style en cascade la page 127
Cration d'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 Choisissez 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, choisissez HTML pour crer une page HTML ordinaire, ColdFusion pour crer une page ColdFusion, et ainsi de suite.
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 s'affichent 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 n'est 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 s'adapte 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.
4 Slectionnez un type de document dans le menu DocType. Dans la plupart des cas, vous pouvez conserver l'option
par dfaut, XHTML 1.0 transitionnel. Slectionnez l'une 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) n'est autre qu'une nouvelle mouture de HTML sous la forme d'une application XML. En rgle gnrale, l'utilisation de XHTML vous permet d'exploiter les avantages de XML tout en garantissant la compatibilit descendante et ascendante de vos documents Web. Remarque : Pour plus d'informations sur XHTML, consultez le site Web du World Wide Web Consortium (W3C), qui contient la 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).
version prliminaire
5 Si vous avez choisi une mise en forme CSS dans la colonne Mise en forme, choisissez l'emplacement du code CSS
de mise en forme dans la liste droulante CSS de mise en forme.

Ajouter l'en-tte Ajoute le code CSS de mise en forme l'en-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 d'indiquer un fichier CSS existant qui contient dj les rgles CSS requises pour la mise en forme. Pour ce faire, cliquez sur l'icne 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 l'icne Ajouter une feuille de style dessus du volet Lier le fichier CSS, puis slectionnez une feuille de style CSS.
au-
Vous trouverez une description dtaille de ce processus dans l'article 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 l'enregistrerez. 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 l'une 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 l'ID content. Si vous le souhaitez, vous pourrez ajouter par la suite d'autres rgions modifiables la page.
8 Cliquez sur le bouton Prfrences pour dfinir les prfrences par dfaut du document (par exemple, le type de
document, l'encodage et une extension de ficher).

9 Cliquez sur le lien Obtenir plus de contenu pour lancer Dreamweaver Exchange et tlcharger d'autres contenus de
conception de pages.
10 Cliquez sur le bouton Crer. 11 Enregistrez la page (Fichier > Enregistrer). 12 Dans la bote de dialogue qui s'affiche, recherchez le dossier o vous voulez enregistrer le fichier.
Il est conseill d'enregistrer votre fichier dans un site Dreamweaver.

13 Dans la zone de texte Nom de fichier, entrez le nom du fichier.
Evitez les espaces et les caractres spciaux pour les noms de fichiers et de dossiers ; les noms de fichiers ne doivent pas commencer par un chiffre. En particulier, n'utilisez pas de caractres spciaux (par exemple , ou ) ou de signes de ponctuation (deux points, barres obliques ou points) dans le nom des fichiers que vous avez l'intention de placer sur un serveur distant. En effet, la plupart des serveurs transforment ces caractres lors du transfert, rendant ainsi inoprants les liens vers ces fichiers.
Voir aussi
Code XHTML la page 303 Mise en forme des pages avec CSS la page 155 Dfinition du type et du codage par dfaut d'un document la page 68 Business Catalyst InContext Editing la page 499
version prliminaire
Cration d'un 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.
1 Choisissez Fichier > Nouveau. 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.
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 s'affichent sur la droite de la bote de dialogue. Les mises en forme CSS prdfinies fournissent les types de colonnes suivants :

Liquide La largeur de colonne est dfinie en tant que pourcentage de la largeur du navigateur du visiteur du site. La mise en page s'adapte si le visiteur du site augmente ou diminue la largeur de son navigateur, mais pas en fonction des paramtres de texte dfinis par le visiteur.
5 Slectionnez un type de document dans le menu DocType. Dans la plupart des cas, vous pouvez conserver l'option
par dfaut, XHTML 1.0 transitionnel. Slectionnez l'une 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) n'est autre qu'une nouvelle mouture de HTML sous la forme d'une application XML. En rgle gnrale, l'utilisation de XHTML vous permet d'exploiter les avantages de XML tout en garantissant la compatibilit descendante et ascendante de vos documents Web. Remarque : Pour plus d'informations sur XHTML, consultez le site Web du World Wide Web Consortium (W3C), qui contient la 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 l'emplacement du code CSS
de mise en forme dans la liste droulante CSS de mise en forme.

Ajouter l'en-tte Ajoute le code CSS de mise en forme l'en-tte de la page que vous crez. 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.

Lier au fichier existant Permet d'indiquer un fichier CSS existant qui contient dj les rgles CSS requises pour la mise
en forme. Pour ce faire, cliquez sur l'icne 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.
forme CSS) lors de la cration de cette page. Pour ce faire, cliquez sur l'icne Ajouter une feuille de style 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
au-
Editing ds que vous l'enregistrerez.
version prliminaire
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 l'une 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 l'ID content. Si vous le souhaitez, vous pourrez ajouter par la suite d'autres rgions modifiables la page.

11 Cliquez sur le bouton Crer. 12 Enregistrez la page (Fichier > Enregistrer). Si vous n'avez pas encore ajout de rgions modifiables au modle, une
bote de dialogue vous en avertit. Cliquez sur OK pour fermer la bote de dialogue.
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 n'est pas ncessaire d'ajouter l'extension
de fichier au nom du modle. Lorsque vous cliquez sur Enregistrer, l'extension .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, n'utilisez 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 l'intention 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.
Voir aussi
Code XHTML la page 303 Mise en forme des pages avec CSS la page 155 Cration et gestion des modles la page 400 Configuration d'un site Dreamweaver la page 38 Dfinition du type et du codage par dfaut d'un document la page 68 Business Catalyst InContext Editing la page 499
Cration d'une page base sur un modle existant

Vous pouvez slectionner, prvisualiser et crer un nouveau document partir d'un modle existant. La bote de dialogue Nouveau document vous permet de slectionner un modle parmi les sites dfinis dans Dreamweaver ou d'utiliser le panneau Actifs pour crer un nouveau document sur la base d'un modle existant.
Voir aussi
Cration et gestion des modles la page 400 Configuration d'un site Dreamweaver la page 38 Dfinition du type et du codage par dfaut d'un document la page 68
Cration d'un document bas sur un modle

1 Choisissez Fichier > Nouveau.
version prliminaire
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 l'option 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 d'un document partir d'un modle l'aide du panneau Actifs

1 Ouvrez le panneau Actifs (Fentre > Actifs) s'il n'est pas dj ouvert. 2 Dans le panneau Actifs, cliquez sur l'icne Modles
situe gauche pour afficher la liste des modles utiliss
dans votre site actuel. Si le modle que vous souhaitez utiliser vient d'tre cr, il peut tre ncessaire de cliquer sur le bouton Actualiser pour l'afficher.
3 Cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) sur le modle
appliquer, puis slectionnez Nouveau partir d'un modle. Le document s'ouvre dans la fentre de document.
4 Enregistrez le document.
Cration d'un document bas sur un fichier d'exemple Dreamweaver

Dreamweaver inclut plusieurs mises en formes de pages de cadres professionnelles, ainsi que des fichiers de conception CSS. Vous pouvez utiliser ces fichiers d'exemple comme point de dpart pour la cration de pages sur vos sites Web. Lorsque vous crez un document bas sur un fichier d'exemple, Dreamweaver cre une copie du fichier. La bote de dialogue Nouveau document permet de prvisualiser un fichier d'exemple et de consulter une brve description des lments de conception d'un document. Dans le cas de feuilles de style en cascade (CSS), vous pouvez copier une feuille prdfinie pour l'appliquer vos documents. Remarque : Si vous crez un document bas sur un jeu de cadres prdfini, seule la structure du jeu de cadres est copie, sans le contenu des cadres. En outre, vous devez enregistrer sparment chacun des fichiers composant le cadre.
1 Choisissez Fichier > Nouveau. 2 Dans la bote de dialogue Nouveau document, slectionnez la catgorie Page de l'exemple. 3 Dans la colonne Dossier exemple, choisissez Feuille de style en cascade ou Jeu de cadres, puis slectionnez un fichier
d'exemple dans la liste de droite.

4 Cliquez sur le bouton Crer.
Le nouveau document s'ouvre dans la fentre de document (modes Code et Cration). Si vous avez slectionn Feuille de style de cascade (CSS), la feuille de style CSS s'affiche en mode code.
5 Enregistrez le document (Fichier > Enregistrer). 6 Si la bote de dialogue Copier les fichiers dpendants apparat, dfinissez les options, puis cliquez sur Copier pour
copier les actifs dans le dossier slectionn.
version prliminaire
Vous pouvez choisir l'emplacement 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 d'exemple).
Voir aussi
Description des feuilles de style en cascade la page 127 Enregistrement des fichiers du cadre et du jeu de cadres la page 205
Cration d'autres 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.
1 Choisissez Fichier > Nouveau. 2 Dans la bote de dialogue Nouveau document, slectionnez la catgorie Autre. 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).
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, n'utilisez 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 l'intention 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 numro.
Voir aussi
Cration d'une page vierge la page 62
Enregistrement d'un 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.
2 Dans la bote de dialogue Enregistrer sous qui s'affiche, recherchez le dossier dans lequel vous voulez enregistrer le
fichier.
3 Dans la zone de texte Nom de fichier, entrez le nom du fichier. 4 Cliquez sur Enregistrer pour enregistrer le fichier.
Enregistrement de tous les documents ouverts

1 Choisissez Fichier > Enregistrer tout. 2 Si des documents non enregistrs sont ouverts, la bote de dialogue Enregistrer sous s'affiche pour chacun d'entre eux.
Dans la bote de dialogue qui s'affiche, recherchez le dossier o vous voulez enregistrer le fichier.
version prliminaire
3 Dans la zone de texte Nom de fichier, entrez le nom du fichier puis cliquez sur Enregistrer.
Rtablissement de la dernire version enregistre d'un document

1 Slectionnez Fichier > Rtablir.
Une bote de dialogue vous invite confirmer l'annulation 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 que vous quittez Dreamweaver, il ne sera pas possible de revenir la version prcdente lors de la prochaine utilisation de Dreamweaver.
Dfinition du type et du codage par dfaut d'un 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 l'extension de fichier que vous prfrez (.htm ou .html) pour les nouvelles pages HTML que vous crerez.
Remarque : cette option est dsactive pour d'autres types de fichier.

Type de document par dfaut (DDT) Slectionnez l'une 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 d'entit est superflu dans la mesure o UTF 8 permet de reprsenter de faon fiable tous les caractres. Si vous slectionnez un autre codage de document, le codage d'entit peut tre ncessaire pour reprsenter certains caractres. Pour plus d'informations sur les entits de caractres, voir www.w3.org/TR/REC-html40/sgml/entities.html. Si vous slectionnez Unicode (UTF8) en tant que code par dfaut, vous pouvez inclure une marque BOM (Byte Order Mark) dans le document en slectionnant l'option Inclure une signature Unicode (BOM). Il s'agit d'une marque constitue de 2 4 octets placs au dbut d'un fichier texte identifiant un fichier comme tant au format Unicode et, dans ce cas, l'ordre des octets suivants. Le code UTF 8 ne prsentant pas d'ordre octet, l'ajout d'une marque BOM UTF 8 est facultatif. Dans le cas de UTF 16 et UTF 32, cette marque est obligatoire.
Formulaire de normalisation Unicode Activez l'une de ces options si vous slectionnez Unicode (UTF 8) en tant que
code par dfaut.
version prliminaire
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 d'un seul caractre, e trma ou de deux caractres, e Latin ordinaire + trma . Un caractre Unicode de combinaison est un caractre associ au caractre prcdent, ce qui fait apparatre le trma au-dessus du e Latin. Les deux formes donnent la mme typographie visuelle, alors que chacune est enregistre diffremment dans le fichier. La normalisation est le processus consistant s'assurer que tous les caractres pouvant tre enregistrs sous diffrentes formes le sont tous sous la mme forme. C'est--dire que tous les caractres d'un document sont enregistrs sous forme de e trma unique ou de e + trma de combinaison , mais pas sous les deux formes dans un mme document. Pour plus d'informations sur la Normalisation Unicode et les formulaires spcifiques pouvant tre utiliss, consultez le site Web Unicode www.unicode.org/reports/tr15.
Voir aussi
Code XHTML la page 303 Description de l'encodage de document la page 219
Dfinition de l'extension de fichier par dfaut de nouveaux documents HTML

Vous pouvez dfinir l'extension 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 l'extension 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.
Ouverture et modification de documents existants

Vous pouvez ouvrir une page Web existante ou un document texte, mme si celui-ci n'a 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 d'utiliser 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.
version prliminaire
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 n'a pas encore t effectue, il est conseill d'organiser les fichiers que vous comptez ouvrir et modifier au sein d'un site Dreamweaver, au lieu de les ouvrir depuis un autre emplacement.
3 Cliquez sur Ouvrir.
Le document s'ouvre dans la fentre de document. Par dfaut, JavaScript, le texte et les feuilles de style en cascade (CSS) s'ouvrent en mode Code. Vous pouvez mettre jour le document pendant que vous travaillez dans Dreamweaver, puis enregistrer les modifications dans le fichier.
Voir aussi
Nettoyage du code la page 334 Lancement d'un diteur externe pour des fichiers multimdia la page 267 Utilisation des fichiers depuis le panneau Fichiers la page 78
Ouverture des fichiers associs

Dreamweaver permet de visualiser les fichiers apparents 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 d'afficher et de modifier ces fichiers apparents 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 d'aide. Par dfaut, Dreamweaver affiche le nom de tous les fichiers apparents au document principal dans une barre d'outils Fichiers apparents, sous le titre du document principal. L'ordre des boutons de cette barre d'outils suit l'ordre des liens vers les fichiers apparents dans le document principal. Remarque : Si un fichier apparent est manquant, Dreamweaver affiche quand mme le bouton correspondant dans la barre d'outils Fichiers apparents. Toutefois, si vous cliquez sur ce bouton, Dreamweaver n'affiche rien. Dreamweaver prend en charge les types de fichiers apparents suivants:
Fichiers de script ct client Inclusions ct serveur Sources d'ensembles de donnes Spry (XML et HTML) Feuilles de style CSS externes (dont les feuilles de style imbriques)
Vous trouverez un didacticiel vido sur l'utilisation des fichiers apparents, ralis par l'quipe de Dreamweaver, l'adresse www.adobe.com/go/dw10relatedfiles_fr. Vous trouverez un didacticiel vido relatif l'utilisation du mode Affichage en direct, aux fichiers apparents et la fentre Navigation dans le code l'adresse www.adobe.com/go/lrvid4044_dw_fr.
version prliminaire
Ouverture d'un fichier apparent partir de la barre d'outils Fichiers apparents

Procdez comme suit, au choix :
Dans la barre d'outils Fichiers apparents en haut du document, cliquez sur le nom du fichier apparent ouvrir. Dans la barre d'outils Fichiers apparents en haut du document, cliquez l'aide du bouton droit de la souris sur le
nom du fichier apparent ouvrir, puis choisissez Ouvrir en tant que fichier spar dans le menu. Lorsque vous utilisez cette mthode pour ouvrir un fichier apparent, le document principal ne reste pas visible simultanment.
Ouverture d'un fichier apparent partir de la fentre Navigation dans le code

1 Placez le point d'insertion sur une ligne ou dans une zone dont vous savez qu'elle est influence par un fichier
apparent.
2 Attendez que l'indicateur Navigation dans le code s'affiche, 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 d'afficher davantage d'informations
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 Clique sur l'lment qui vous intresse afin d'ouvrir le fichier apparent correspondant.
Retour au code source du document principal

Cliquez sur le bouton Code source de la barre d'outils Fichiers apparents.
Modification de l'affichage de fichiers apparents

Vous pouvez afficher les fichiers apparents de diverses manires :
Lorsque vous ouvrez un fichier apparent depuis le mode Cration ou le mode Code et Cration (mode
Fractionn), ce fichier s'affiche dans une fentre fractionne au-dessus du mode Cration du document principal. Vous pouvez choisir Affichage > Mode Cration en haut pour que le fichier apparent s'affiche plutt dans le bas de la fentre de document.
Lorsque vous ouvrez un fichier apparent depuis le mode Code et Cration fractionn verticalement (Affichage >
Fractionner verticalement), ce fichier s'affiche dans une fentre fractionne ct du mode Cration du document principal. Selon l'endroit o vous voulez placer le mode Cration, vous pouvez activer ou dsactiver l'option Affichage > Mode Cration gauche.
Lorsque vous ouvrez un fichier apparent depuis le mode Code et Cration fractionn ou fractionn verticalement
(Affichage > Mode Fractionn ou Affichage > Fractionner verticalement), le fichier apparent s'affiche 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 l'option d'affichage 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. Par exemple, 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 d'afficher les documents apparents en mme temps que le code source du
document principal.
version prliminaire
Dsactivation des fichiers apparents

1 Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh). 2 Dans la catgorie Gnral, dsactivez Activer les fichiers apparents.
Voir aussi
Basculement d'un mode un autre dans la fentre de document la page 17 Navigation vers le code apparent la page 325 Prvisualisation de pages dans Dreamweaver la page 297 Didacticiel relatif aux fichiers apparents
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 associs aux pages dynamiques dans la barre d'outils Fichiers associs. Plus prcisment, la fonction Fichiers association dynamique permet de voir les nombreuses inclusions dynamiques requises pour gnrer le code d'excution 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 d'applications PHP local ou distant qui excute WordPress, Drupal ou Joomla! Une approche courante du test de pages consiste configurer un serveur d'applications 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 d'applications PHP.

Pour savoir comment le faire localement, voir Important : Le serveur doit tre en cours d'excution avant que vous ne tentiez d'utiliser des fichiers association dynamique dans Dreamweaver.
Installez WordPress, Drupal ou Joomla! sur le serveur d'applications.

Pour plus d'informations, consultez les liens suivants :
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 l'emplacement des fichiers de WordPress, Drupal ou Joomla! installs comme dossier distant et de test. Tlchargez (obtenez) vos fichiers de CMS depuis le dossier distant.
Vous trouverez, l'adresse ci-aprs, une vido de l'quipe de conception de Dreamweaver qui prsente l'utilisation des fichiers association dynamique : www.adobe.com/go/dwcs5drf_fr.
version prliminaire
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 l'option 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 l'option Dsactiv.
Dcouverte de fichiers association dynamique

1 Ouvrez ne page laquelle des fichiers association dynamique sont lis, par exemple la page index.php la racine
d'un 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 s'affiche dans la barre d'outils Fichiers associs. L'ordre des fichiers associs et association dynamiques dans la barre d'outils Fichiers associs est le suivant :
Fichiers associs statiques (c.--d. fichiers n'exigeant aucun traitement dynamique) Fichiers associs externes (c.--d. fichiers .css et .js) qui sont lis des fichiers d'inclusion de serveur chemin
dynamique
Fichiers d'inclusion de serveur chemin dynamique (c.--d. fichiers .php, .inc et .module)
Filtrer les fichiers associs

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 l'icne Filtrer les fichiers associs sur la droite de la barre d'outils Fichiers associs. 4 Slectionnez les types de fichiers afficher dans la barre d'outils Fichiers associs. Par dfaut, Dreamweaver
slectionne tous les fichiers associs.

5 Pour crer un filtre personnalis, cliquez sur l'icne 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 l'aide de pointsvirgules (par exemple style.css;*.js;*tpl.php). Remarque : Les paramtres de filtre ne sont pas conservs lorsque vous fermez le fichier.
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.
version prliminaire
Le code que Dreamweaver supprime est principalement utilis par Word pour mettre en forme et afficher les documents dans Word mme, et n'est pas ncessaire dans un vritable fichier HTML. Conservez une copie de votre fichier Word original (.doc) comme 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 s'affiche (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 balisesHTML, les mtadonnes personnalises Word et les balises de liens figurant dans l'en-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 l'onglet Dtaill.
Nettoyer CSS Supprime de l'en-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 l'onglet Dtaill.
Nettoyer les balises <font> Supprime les balises HTML, en convertissant le corps du texte par dfaut en HTML de
taille 2.
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 d'en-tte (au niveau du bloc).
Appliquer le format source Permet d'appliquer 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 d'avertissement dtaillant les modifications apportes au document ds que le nettoyage est termin.
5 Cliquez sur OK ou sur l'onglet Dtaill pour personnaliser davantage les options Supprimer les marqueurs
spcifiques Word et Nettoyer CSS, puis cliquez sur OK.
Voir aussi
Nettoyage du code la page 334 Importation de documents Microsoft Office (Windows uniquement) la page 234
version prliminaire
Gestion des fichiers et des dossiers

A propos de la gestion des fichiers et des dossiers
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.
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 :
Accs aux sites, un serveur et aux disques locaux Affichage de fichiers et de dossiers Gestion de fichiers et de dossiers dans le panneau Fichiers
Pour les sites Dreamweaver, utilisez les options suivantes pour afficher ou 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. Il permet galement d'accder tous les fichiers situs sur votre disque local, tout comme l'Explorateur Windows (Windows) ou le Slecteur (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.
version prliminaire
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). 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.
Voir aussi
Prsentation du panneau Fichiers la page 15 Archivage et extraction de fichiers dans un dossier distant la page 90 Placement de fichiers sur un serveur distant la page 86 Acquisition de fichiers depuis un serveur distant la page 85 Synchronisation de fichiers la page 98
version prliminaire
Affichage de fichiers et de dossiers

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.
Voir aussi
Configuration d'un serveur d'valuation la page 48
Ouverture ou fermeture du panneau Fichiers

Choisissez Fentre > Fichiers.
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)

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.
version prliminaire
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 B C
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 Slecteur (Macintosh).
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.
Voir aussi
Synchronisation de fichiers la page 98 Accs aux sites, un serveur et aux disques locaux la page 81
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. 3 Procdez comme suit, au choix :
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 dun fichier ou dun 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).
version prliminaire
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 dun fichier ou dun 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. 4 Appuyez sur la touche Entre (Windows) ou Retour (Macintosh).
Dplacement dun fichier ou dun dossier

1 Slectionnez le fichier dplacer dans le panneau Fichiers (Fentre > Fichiers). 2 Procdez comme suit, au choix :
Copiez le fichier ou le dossier, puis collez-le son nouvel emplacement. Faites glisser le fichier ou le dossier vers son nouvel emplacement.
3 Actualisez le panneau Fichiers pour afficher le fichier ou le dossier son nouvel emplacement.
Actualisation du panneau Actifs

Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) sur un
fichier ou sur un dossier, puis choisissez Actualiser.
(Sites Dreamweaver uniquement) Cliquez sur le bouton Actualiser dans la barre d'outils du panneau Fichiers (cette
option actualise les deux panneaux). Remarque : Dreamweaver actualise le panneau Fichiers lorsque vous apportez des modifications dans une autre application, puis revenez Dreamweaver.
Recherche de fichiers dans votre site Dreamweaver

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.
Voir aussi
Utilisation des rapports pour tester votre site la page 111
Recherche d'un fichier ouvert dans votre site

1 Ouvrez le fichier dans la fentre de document. 2 Slectionnez Site > Reprer dans le site.
version prliminaire
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.
Dreamweaver slectionne les fichiers dans le panneau Fichiers.
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). 2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), puis
slectionnez Retrouver sur le site local ou Retrouver sur le site distant (selon l'emplacement o le fichier a t slectionn). Dreamweaver slectionne les fichiers dans le panneau Fichiers.
Recherche et slection des fichiers qui sont plus rcents sur le site local que sur le site distant
coin suprieur droit du panneau Fichiers, puis slectionnez Modifier > Slectionner Local plus rcent. Dreamweaver slectionne les fichiers dans le panneau Fichiers.
Recherche et slection des fichiers qui sont plus rcents sur le site distant que sur le site local
coin suprieur droit du panneau Fichiers, puis slectionnez Edition > Slectionner distants plus rcents. Dreamweaver slectionne les fichiers dans le panneau Fichiers.
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 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.
version prliminaire
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

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 le fichier supprimer et appuyez sur Supprimer (Windows) ou Command+Supprimer (Macintosh).
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.
Voir aussi
Activation et dsactivation du voilage d'un site la page 105
Accs aux sites, un serveur et aux disques locaux

Vous pouvez ouvrir, modifier et enregistrer les fichiers et dossiers de vos sites Dreamweaver, comme les fichiers ou dossiers qui ne font pas partie d'un site Dreamweaver. Outre les sites Dreamweaver, vous pouvez 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.
version prliminaire
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 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.
version prliminaire
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
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

1 Choisissez Site > Grer les sites. 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.
version prliminaire
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).
Acquisition et placement de fichiers depuis ou vers votre serveur

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.
Voir aussi
Archivage et extraction de fichiers la page 89 Activation et dsactivation du voilage d'un site la page 105
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 ;
version prliminaire
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 entrane l'annulation de cette opration.
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.
Voir aussi
Archivage et extraction de fichiers la page 89 Synchronisation de fichiers la page 98
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.
version prliminaire
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.
Placement de fichiers sur un serveur distant

Vous pouvez placer des fichiers du site local vers le site distant, dans la plupart des cas sans changer l'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.
version prliminaire
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 www.adobe.com/go/vid0163_fr. Vous trouverez un didacticiel consacr au dpannage des problmes de publication l'adresse www.adobe.com/go/vid0164_fr.
Voir aussi
Synchronisation de fichiers la page 98 A propos du systme d'archivage et d'extraction de fichiers la page 89 Didacticiel consacr au placement de fichiers Didacticiel consacr au dpannage des problmes de publication
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.
version prliminaire
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.
Remarque : Dans le panneau Fichiers en mode dvelopp, vous pouvez cliquer sur le bouton Journal FTP.
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.
version prliminaire
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.
Archivage et extraction de fichiers

A propos du systme d'archivage et d'extraction de fichiers
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. Pour plus d'informations sur les fichiers LCK et sur le fonctionnement du systme d'archivage et d'extraction, consultez les notes techniques 15447 sur le site Web Adobe l'adresse www.adobe.com/go/15447_fr.
Voir aussi
Acquisition et placement de fichiers depuis ou vers votre serveur la page 84
Configuration du systme d'archivage et d'extraction de fichiers

Pour utiliser le systme d'archivage et d'extraction, vous devez associer votre site local un serveur distant.
1 Choisissez Site > Grer les sites. 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 :
4 Dfinissez les options de base requises, puis cliquez sur le bouton Avanc.
version prliminaire
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 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.
Archivage et extraction de fichiers dans un dossier distant

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.
version prliminaire
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 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.
version prliminaire
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

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 :
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.
7 Cliquez sur Enregistrer.
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

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 cliente Subversion 1.6.6. 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.
version prliminaire
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.
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 http://subversion.tigris.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, voir Configuration d'un site Dreamweaver la page 38.
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.
version prliminaire
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 dans le panneau Fichiers dvelopp.
Voir aussi
Utilisation du panneau Fichiers la page 75
Montage de dossiers partir du rfrentiel SVN

Le processus de montage de dossiers du rfrentiel SVN sur votre ordinateur local cre un mappage prcis de la structure des dossiers sur le rfrentiel SVN. Lorsque vous montez un dossier partir du rfrentiel SVN, Dreamweaver obtient tous les fichiers figurant dans ce dossier, ainsi que ses ventuels sous-dossiers. 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. 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 avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh)
sur le dossier du rfrentiel SVN que vous voulez monter, puis choisissez Monter les dossiers.
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. 2 Effectuez l'une des oprations suivantes :
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 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.
version prliminaire
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
droulante Affichage. Si vous travaillez dans le panneau Fichiers dvelopp, l'affichage local est automatiquement disponible. Slectionnez ensuite le fichier valider puis cliquez sur Archiver.
du panneau Fichiers ou en cliquant sur le bouton Fichiers du rfrentiel dans le panneau Fichiers dvelopp. Cliquez ensuite 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.
1 Assurez-vous d'avoir bien dfini une connexion SVN. 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.
1 Assurez-vous d'avoir bien dfini une connexion SVN. 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

1 Assurez-vous d'avoir bien dfini une connexion SVN.
version prliminaire
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 dont vous voulez afficher les versions, puis choisissez Contrle de version > Afficher les versions.
du panneau Fichiers ou en cliquant sur le bouton Fichiers du rfrentiel dans le panneau Fichiers dvelopp. Cliquez ensuite 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.
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.
du panneau Fichiers ou en cliquant sur le bouton Fichiers du rfrentiel dans le panneau Fichiers dvelopp. Cliquez ensuite 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.
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 qui vous intresse, puis choisissez Verrouiller ou Dverrouiller.
version prliminaire
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.
1 Assurez-vous d'avoir bien dfini une connexion 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.
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.).
1 Assurez-vous d'avoir bien dfini une connexion SVN.
version prliminaire
2 Affichez la version locale de vos fichiers SVN dans le panneau Fichiers en choisissant Affichage local dans la liste
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.
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.
Synchronisation de fichiers
Synchronisation des fichiers entre le site local et le site distant
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.
version prliminaire
Voir aussi
Gestion des transferts de fichiers la page 88 Archivage et extraction de fichiers dans un dossier distant la page 90 Acquisition de fichiers depuis un serveur distant la page 85 Placement de fichiers sur un serveur distant la page 86 Comparaison de fichiers pour en chercher les diffrences la page 100
Identification des fichiers qui sont plus rcents sur le site local ou le site distant, sans effectuer de synchronisation
Procdez de lune 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.
version prliminaire
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.
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.
Comparaison de fichiers pour en chercher les diffrences

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.
version prliminaire
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 sur 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 FileMerge BBEdit TextWrangler Slectionnez le fichier suivant usr/bin/opendiff usr/bin/bbdiff 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 des fichiers slectionns. L'outil de comparaison de fichiers dmarre et compare les deux fichiers.
version prliminaire
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. L'outil de comparaison de fichiers dmarre et compare les deux fichiers.
Comparaison entre un fichier local et un fichier distant

Vous pouvez effectuer une comparaison entre un fichier local et un fichier se trouvant sur votre serveur distant. Pour cela, vous devez d'abord 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. L'outil de comparaison de fichiers dmarre et compare les deux fichiers.
Comparaison entre un fichier distant et un fichier local

Vous pouvez effectuer une comparaison entre un fichier distant et un fichier local. Vous devez 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.
L'outil de comparaison de fichiers dmarre et compare les deux fichiers. 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.
version prliminaire
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.
L'outil de comparaison de fichiers dmarre et compare les deux fichiers. 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.
Comparaison de fichiers lors de la synchronisation

Vous pouvez comparer les versions locales de vos fichiers avec les versions distantes lorsque vous synchronisez les fichiers de votre site avec Dreamweaver. 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
Synchronisation de fichiers la page 98
Restauration de fichiers (utilisateurs de Contribute)

Restauration de fichiers (utilisateurs de Contribute)
Dreamweaver enregistre automatiquement plusieurs versions d'un document lorsque la compatibilit Adobe Contribute est active.
version prliminaire
Remarque : Contribute doit tre install sur le mme ordinateur que Dreamweaver. La restauration des fichiers doit tre active au niveau des paramtres administratifs de Contribute. Pour plus d'informations, voir Administration de Contribute.
1 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) sur un
fichier dans le panneau Fichiers.

2 Slectionnez Restaurer la page.
S'il existe une version prcdente de la page restaurer, la bote de dialogue Restauration s'affiche.
3 Slectionnez la version de la page restaurer et cliquez sur Restaurer.
Voir aussi
Prparation d'un site utiliser avec Contribute la page 56 Suppression, dplacement ou modification du nom d'un fichier distant sur un site Contribute la page 58
Voilage de fichiers et de dossiers dans votre site

A propos du voilage de site
Le voilage vous permet d'exclure des fichiers et dossiers du site de certaines 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.
version prliminaire
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.
Voilage et suppression du voilage pour les fichiers et dossiers d'un site

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 panneau Fichiers, puis en effectuant l'opration voulue. Toute opration effectue directement sur un fichier ou un dossier annule le voilage.
Voilage et suppression du voilage de certains types de fichier

Vous pouvez indiquer des types de fichier voiler afin que Dreamweaver voile tous les fichiers se terminant d'une certaine manire. Ainsi pouvez-vous, 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

1 Dans le panneau Fichiers (Fentre > Fichiers), slectionnez un site pour lequel la fonction de voilage est active. 2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), puis
slectionnez Voilage > Paramtres.
version prliminaire
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 panneau Fichiers, puis en effectuant l'opration voulue. Toute opration effectue directement sur un fichier ou un dossier annule le voilage.
Dsactivation du voilage de certains types de fichier au sein d'un site

1 Dans le panneau Fichiers (Fentre > Fichiers), slectionnez un site pour lequel la fonction de voilage est active. 2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), puis
slectionnez Voilage > Paramtres.

3 Dans la bote de dialogue Dfinition du site, onglet Avanc, utilisez lune 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

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.
1 Dans le panneau Fichiers (Fentre > Fichiers), slectionnez un site pour lequel la fonction de voilage est active. 2 Slectionnez un fichier ou un dossier quelconque du site. 3 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), puis
slectionnez Voilage> Supprimer tous les voiles. 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.
version prliminaire
Stockage des informations sur les fichiers dans des Design Notes
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 :
fw_source="file:///Mydisk/sites/assets/orig/myhouse.png"
Au mme titre, les Design Notes d'un fichier Flash pourraient contenir la ligne suivante :
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.
Voir aussi
Lancement d'un diteur externe pour des fichiers multimdia la page 267
Activation et dsactivation des Design Notes pour un site

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.
1 Choisissez Site > Grer les sites. 2 Dans la bote de dialogue Grer les sites, slectionnez un site puis cliquez sur Modifier.
version prliminaire
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 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.
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.
version prliminaire
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.
Voir aussi
Acquisition et placement de fichiers depuis ou vers votre serveur la page 84 Archivage et extraction de fichiers dans un dossier distant la page 90
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 lune 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. 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

1 Choisissez Site > Grer les sites. 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.
version prliminaire
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.
Test de votre site

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 qu'ils ne s'aggravent et de les empcher de se rpter). Vous devez vous assurer que vos pages ont l'apparence et le fonctionnement attendus dans les navigateurs cibls, qu'il n'y a pas de liens rompus et que les pages ne sont pas trop longues tlcharger. Vous pouvez galement tester l'ensemble 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 :
1. 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 s'affichent pas dans des navigateurs anciens, songez utiliser le comportement Vrifier le navigateur pour rediriger automatiquement les visiteurs vers une autre page.
2. 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 d'lments qu'il est impossible de prvoir lors de la vrification dans le navigateur cible.
3. Vrifiez que le site ne contient pas de liens briss (rparez-les s'il 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.
4. Contrlez la taille de vos pages et leur dure de tlchargement.
Pour les pages constitues d'un grand tableau, n'oubliez pas que, sous certains navigateurs, les visiteurs ne voient rien tant que le tableau n'est pas entirement charg. Envisagez de fragmenter les grands tableaux ; si c'est 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
5. Effectuez quelques rapports sur le site pour tester et dpanner le site entier.
Vous pouvez rechercher sur le site entier d'ventuels problmes, tels que des documents sans nom, des balises vides ou des balises imbriques redondantes.
version prliminaire
6. Validez votre code pour dtecter toute erreur de balise ou de syntaxe. 7. Continuez mettre le site jour et en assurer la maintenance aprs sa publication.
La publication d'un site peut tre accomplie de diffrentes manires et constitue un processus continu. La dfinition et l'implmentation d'un systme de contrle de version constituent une partie importante du processus, que ce soit avec les outils intgrs Dreamweaver ou par le biais d'une application de contrle de version externe.
8. Consultez les forums de discussion.
Utilisez les forums de discussion Dreamweaver du site Web Adobe, l'adresse www.adobe.com/go/dreamweaver_newsgroup_fr. 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 d'autres utilisateurs de Dreamweaver. Vous trouverez un didacticiel consacr au dpannage des problmes de publication l'adresse www.adobe.com/go/vid0164_fr.
Voir aussi
Correction de liens rompus la page 295 Test de liens dans Dreamweaver la page 289 Application du comportement Vrifier le navigateur la page 361 Validation des balises la page 336 Vrification de la compatibilit du navigateur la page 336 Didacticiel consacr au dpannage des problmes de publication
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 d'une 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 l'enregistrer au format XML, puis l'importer dans un modle, une base de donnes ou une feuille de calcul et l'imprimer, ou encore l'afficher sur un site Web. Remarque : Vous pouvez galement ajouter diffrents types de rapport Dreamweaver via le site Web d'Adobe Dreamweaver Exchange.
version prliminaire
Voir aussi
Rapports dans Dreamweaver la page 20 Test de liens dans Dreamweaver la page 289 Ajout et gestion d'extensions dans Dreamweaver la page 37
Excution de rapports afin de tester un site

1 Choisissez Site > Rapports. 2 Slectionnez l'objet du rapport dans le menu Rapport sur, puis dfinissez l'un des types de rapport excuter
(droulement du travail ou HTML). Vous ne pouvez pas excuter un rapport sur Fichiers slectionns dans le site si vous n'avez 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 l'quipe. Entrez le nom d'un membre de l'quipe et cliquez sur OK pour revenir la bote de dialogue Rapports. Design Notes Cre un rapport qui dresse la liste de l'ensemble 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.
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 l'emplacement des fichiers afficher.

4 Si vous avez slectionn un rapport HTML, choisissez l'un 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 d'cran lisent le texte secondaire et certains navigateurs affichent du texte secondaire lorsque l'utilisateur passe la souris sur l'image.
Extrait par Cre un rapport qui dresse la liste de tous les documents extraits par un membre spcifique de l'quipe. 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 s'appliquant cet lment.
version prliminaire
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 titres rpts 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 l'avez pas dj fait). Une liste de rsultats apparat dans le panneau Rapports du site (dans le groupe de panneaux Rsultats).
Utilisation et enregistrement d'un rapport

1 Excuter un rapport (voir la procdure prcdente). 2 Dans le panneau Rapports du site, effectuez l'une des oprations suivantes pour consulter le rapport :
Cliquez sur l'en-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 d'infos situ gauche du panneau
Rapports du site pour obtenir la description du problme. Ces informations s'affichent dans le panneau Rfrence.
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 l'importer dans un fichier modle existant. Vous pouvez alors soit importer le fichier dans une base de donnes ou un tableur puis l'imprimer, soit l'afficher sur un site Web. Aprs avoir excut les rapports HTML, utilisez la commande Nettoyer HTML pour corriger les erreurs HTML signales.
version prliminaire
114
Chapitre 5 : Gestion des actifs et des bibliothques

Le panneau Actifs (situ dans le mme groupe de panneaux que le panneau Fichiers) est le principal outil que vous utilisez pour organiser les actifs de votre site, notamment les lments de contenu rutilisables appels lments de bibliothque.
A propos des actifs et des bibliothques

A propos des actifs
Vous pouvez utiliser Adobe Dreamweaver CS5 pour assurer le suivi des actifs inclus dans un site, notamment les images, les animations, les couleurs, les scripts et les liens, et pour en afficher un aperu. Vous pouvez galement faire glisser un actif directement pour l'insrer dans une page de votre document actuel. Vous pouvez obtenir des actifs partir de diffrentes sources. Par exemple, vous pouvez crer des actifs dans une application, telle que Adobe Fireworks ou Adobe Flash, les recevoir d'un collgue, les copier partir d'un CD-ROM de graphiques ou encore les copier partir d'un site Web d'images. Dreamweaver permet galement d'accder deux types d'actifs spciaux : les bibliothques et les modles. Tous deux sont des actifs lis : lorsque vous modifiez un lment de bibliothque ou un modle, Dreamweaver met jour tous les documents qui utilisent ces lments. Les lments de bibliothque reprsentent gnralement de petits actifs de conception, tels que le logo ou les informations de copyright d'un site. Pour dfinir la conception de zones plus larges, utilisez plutt un modle.
Voir aussi
A propos des modles Dreamweaver la page 400
A propos des lments de bibliothque

Une bibliothque est un fichier Dreamweaver spcial regroupant un ensemble d'actifs individuels ou de copies d'actifs que vous pouvez placer dans vos pages Web. Les actifs prsents dans une bibliothque portent le nom d'lments de bibliothque. Les lments pouvant tre stocks dans une bibliothque sont notamment les images, les tableaux, les sons et les fichiers crs l'aide d'Adobe Flash. Vous pouvez mettre jour automatiquement toutes les pages qui utilisent un lment de bibliothque chaque fois que vous modifiez cet lment. Par exemple, supposons que vous construisiez un site de grande taille pour une socit qui souhaite qu'un slogan figure sur chaque page. Vous pouvez crer un lment de bibliothque qui contient le slogan et utiliser cet lment dans chaque page. Si le slogan est modifi, vous pouvez modifier l'lment de bibliothque et mettre jour automatiquement chaque page qui l'utilise. Dreamweaver stocke les lments de bibliothque dans un dossier nomm Library, au sein du dossier racine local de chaque site. Chaque site possde sa propre bibliothque. Vous pouvez crer un lment de bibliothque partir de n'importe quel lment dans la section body d'un document, notamment du texte, des tableaux, des formulaires, des applets Java, des plug-ins, des lments ActiveX, des barres de navigation et des images.
version prliminaire
Gestion des actifs et des bibliothques
Pour les lments lis tels que les images, la bibliothque enregistre uniquement une rfrence l'lment. Le fichier d'origine doit rester l'emplacement spcifi pour que l'lment de la bibliothque fonctionne correctement. Il peut toutefois tre utile de stocker une image dans un lment de bibliothque. Par exemple, vous pouvez stocker une balise img complte dans un lment de bibliothque, afin de pouvoir modifier facilement le texte alt d'une image, ou mme son attribut src, dans l'ensemble du site. N'utilisez pas cette technique pour modifier les attributs de largeur et de hauteur (width et height) d'une image, sauf si vous utilisez galement un diteur d'image pour changer la taille relle de l'image. Remarque : Si l'lment de bibliothque contient des liens, ils ne fonctionneront pas ncessairement sur le nouveau site. En outre, les images d'un lment de bibliothque ne sont pas copies vers le nouveau site. Lorsque vous utilisez un lment de bibliothque, Dreamweaver insre un lien vers cet lment dans la page Web au lieu d'insrer l'lment lui-mme. Cela signifie que Dreamweaver insre une copie du code source HTML pour cet lment dans le document et ajoute un commentaire HTML contenant une rfrence l'lment externe d'origine. Il s'agit d'une rfrence externe qui rend la mise jour automatique possible. Lorsque vous crez un lment de bibliothque qui comporte un lment auquel est attach un comportement Dreamweaver, Dreamweaver copie l'lment et son gestionnaire d'vnements (l'attribut qui spcifie l'vnement dclenchant l'action, tel que onClick, onLoad ou onMouseOver, et l'action appeler lorsque l'vnement se produit) dans le fichier de l'lment de bibliothque. Dreamweaver ne copie pas les fonctions JavaScript associes dans l'lment de la bibliothque. Au lieu de cela, lorsque vous insrez l'lment de bibliothque dans un document, Dreamweaver insre automatiquement les fonctions JavaScript appropries dans la section head de ce document (si elles ne s'y trouvent pas dj). Remarque : Si vous rdigez manuellement le code JavaScript (c'est--dire si vous le crez sans utiliser de comportements Dreamweaver), vous pouvez l'intgrer votre lment de bibliothque l'aide du comportement Appel JavaScript pour excuter le code. Si vous n'utilisez pas de comportement Dreamweaver pour excuter le code, le code n'est pas conserv dans l'lment de bibliothque. La modification des comportements dans les lments de bibliothque doit respecter certaines conditions. Les lments de bibliothque ne peuvent pas contenir de feuilles de style, car le code associ ces lments figure dans la section HEAD.
Voir aussi
Modification d'un comportement dans un lment de bibliothque la page 126
Utilisation des actifs

Prsentation du panneau Actifs
Utilisez le panneau Actifs (Fentre > Actifs) pour grer les actifs du site en cours. Le panneau Actifs affiche les actifs du site associs au document actif dans la fentre du document. Remarque : Vous devez dfinir un site local avant de pouvoir afficher des actifs dans le panneau Actifs.
version prliminaire
Panneau Actifs avec la liste Site affiche. Les icnes de catgorie se trouvent gauche et la zone d'aperu se trouve au-dessus de la liste.
Le panneau Actifs vous propose deux vues diffrentes des actifs :

la liste Site Elle prsente tous les actifs de votre site, y compris les couleurs et les adresses URL utilises dans les documents de votre site. la liste Favoris Prsente uniquement les actifs que vous avez slectionns de faon explicite.
Pour basculer entre ces deux modes, slectionnez le bouton radio Site ou Favoris situ en haut de la zone d'aperu. (Ces deux modes d'affichage ne sont pas disponibles pour les catgories Modles et Bibliothque.) Remarque : La plupart des oprations du panneau Actifs fonctionnent de la mme faon dans les deux listes. Toutefois, il existe quelques tches qui ne peuvent tre ralises que dans la liste Favoris. Dans les deux listes, les actifs appartiennent l'une des catgories suivantes :
Images Couleurs
Fichiers d'image en formats GIF, JPEG ou PNG.
Les couleurs utilises dans les documents et les feuilles de style, y compris les couleurs du texte, des arrire-plans et des liens. Les liens externes se trouvant dans les documents du site en cours, y compris FTP, gopher, HTTP, HTTPS, JavaScript, courriel (mailto), et fichiers locaux (file://).
URL
Flash Fichiers dans n'importe quelle version d'Adobe Flash. Seuls les fichiers SWF (fichiers compresss crs avec Flash) s'affichent dans le panneau Actifs. Les fichiers FLA (source Flash) ne s'affichent pas. Shockwave Films Scripts
Fichiers dans n'importe quelle version d'Adobe Shockwave. Fichiers QuickTime ou MPEG.
Fichiers JavaScript ou VBScript. Les scripts dans les fichiers HTML (plutt que dans des fichiers JavaScript ou VBScript indpendants) n'apparaissent pas dans le panneau Actifs.
Modles Les mises en forme de pages principales utilises sur plusieurs pages. La modification d'un modle entrane automatiquement la modification de toutes les pages qui y sont associes. Elments de bibliothque
Des lments que vous utilisez dans plusieurs pages. Lorsque vous modifiez un lment de bibliothque, toutes les pages qui le contiennent sont mises jour. Remarque : Pour figurer dans le panneau Actifs, un fichier doit appartenir l'une de ces catgories. Il existe d'autres types de fichiers parfois appels actifs, mais qui ne sont pas affichs dans le panneau.
version prliminaire
Par dfaut, les actifs d'une catgorie donne sont rpertoris en fonction de leur nom par ordre alphabtique, mais vous pouvez les trier par type et en fonction de plusieurs autres critres. Vous pouvez galement afficher un aperu des actifs et redimensionner les colonnes ainsi que la zone d'aperu.
Voir aussi
Cration et gestion d'une liste d'actifs favoris la page 120 Utilisation des lments de bibliothque la page 122
Affichage d'un actif dans la zone d'aperu

Slectionnez l'actif dans le panneau Actifs.
Par exemple, lorsque vous slectionnez un actif de type animation, une icne s'affiche dans la zone d'aperu. Pour visualiser l'animation, cliquez sur le bouton Lecture (le triangle vert) dans l'angle suprieur droit de la zone d'aperu.
Affichage des actifs d'une catgorie donne

Cliquez sur une icne de catgorie dans le ct gauche du panneau Actifs.
Tri des actifs

Cliquez sur une en-tte de colonne.
Par exemple, pour trier la liste des images par type (afin de regrouper toutes les images GIF, puis toutes les images JPEG, etc.), cliquez sur l'en-tte de la colonne Type.
Redimensionnement d'une colonne

Faites glisser la ligne qui spare deux en-ttes de colonne.
Redimensionnement de la zone d'aperu

Faites glisser la barre de sparation (entre la zone d'aperu et la liste des actifs) vers le haut ou vers le bas.
Actualisation du panneau Actifs

La cration de la liste Site peut prendre quelques secondes du fait que Dreamweaver doit d'abord lire le cache du site. Certaines modifications n'apparaissent pas immdiatement dans le panneau Actifs. Par exemple, lorsque vous ajoutez ou supprimez un actif du site, les modifications ne sont pas rpercutes dans le panneau Actifs tant que vous n'actualisez pas la liste Site en cliquant sur le bouton Actualiser la liste du site. Si vous ajoutez ou supprimez un actif en dehors de Dreamweaver (via l'Explorateur Windows ou le Finder, par exemple), vous devez recrer le cache du site pour actualiser le panneau Actifs. Lorsque vous supprimez l'unique instance d'une URL ou d'une couleur donne du site, ou lorsque vous enregistrez un nouveau fichier contenant une couleur ou une URL n'ayant pas encore t utilise dans le site, les modifications ne sont rpercutes dans le panneau Actifs qu'une fois la liste Site actualise.
Pour actualiser la liste Site manuellement, cliquez sur le bouton Actualiser la liste du site
cache du site ou le met jour si ncessaire.
. Dreamweaver cre le
Pour actualiser la liste Site et recrer le cache du site manuellement, cliquez avec le bouton droit de la souris
(Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) dans la liste Actifs, puis cliquez sur Actualiser la liste du site.
version prliminaire
Ajout d'un actif un document

Vous pouvez insrer la plupart des actifs dans un document en les faisant glisser dans la fentre de document en mode Code ou en mode Cration, ou bien en utilisant le bouton Insrer du panneau. Vous pouvez insrer des couleurs et des URL ou les appliquer au texte slectionn en mode Cration Les URL peuvent galement tre appliques aux autres lments, tels que des images, en mode Cration.
1 En mode Cration, placez le point d'insertion l'endroit o l'actif doit apparatre. 2 Dans le panneau Actifs, slectionnez l'un des boutons de catgorie d'actif situs gauche.
Remarque : Slectionnez toute catgorie autre que Modles. Un modle est appliqu un document entier. Il ne peut pas tre insr dans un document.
3 Slectionnez Site ou Favoris en haut du panneau, puis slectionnez l'actif.
Il n'existe pas de liste Site ou Favoris pour les lments de bibliothque. Omettez cette tape si vous insrez un tel lment.
Faites glisser l'actif depuis le panneau vers le document.

Vous pouvez faire glisser des scripts dans la zone du contenu de l'en-tte de la fentre de document. Si cette zone n'est pas visible, choisissez Affichage > Contenu de l'en-tte.
Slectionnez l'actif dans le panneau et cliquez sur Insrer.

Si l'actif insr est une couleur, elle s'applique au texte qui figure aprs le point d'insertion.
Application d'une couleur un texte l'aide du panneau Actifs

Le panneau Actifs indique les couleurs que vous avez dj appliques aux diffrents lments du site, tels que du texte, des bordures de tableau, des arrire-plans, etc.
1 Slectionnez du texte dans le document. 2 Dans le panneau Actifs, slectionnez la catgorie Couleurs 3 Slectionnez la couleur souhaite puis cliquez sur Appliquer.
Voir aussi
Ajout ou suppression d'actifs favoris la page 120
Appliquer une URL une image ou du texte l'aide du panneau Actifs

1 Slectionnez le texte ou l'image. 2 Dans le panneau Actifs, slectionnez la catgorie URL
dans la vue Sites ou Favoris, selon l'endroit o l'URL est
stocke. Remarque : Les URL des fichiers de votre site sont stocks, par dfaut, dans le mode Sites. La vue Favoris contient les URL que vous avez ajouts manuellement.
3 Slectionnez l'URL. 4 Effectuez l'une des oprations suivantes :
Faites glisser l'URL depuis le panneau vers la slection dans la fentre de document en mode Cration. Slectionnez l'URL et cliquez sur Insrer.
version prliminaire
Slection et modification d'actifs

Le panneau Actifs permet de slectionner simultanment plusieurs actifs ; il offre galement un moyen rapide de commencer l'dition d'actifs.
Voir aussi
Lancement d'un diteur externe pour des fichiers multimdia la page 267
Slection de plusieurs actifs.

1 Dans le panneau Actifs, slectionnez un actif. 2 Slectionnez les autres actifs l'aide de l'une des mthodes suivantes :
Cliquez en maintenant la touche Maj enfonce pour slectionner une srie conscutive d'actifs. Cliquez en maintenant la touche Ctrl (Windows) ou la touche Commande (Macintosh) enfonce pour ajouter un
actif individuel la slection (qu'il soit adjacent ou non la slection existante). Cliquez en maintenant la touche Ctrl (Windows) ou la touche Commande (Macintosh) enfonce sur un actif slectionn pour le dslectionner.
Modification d'un actif

Lorsque vous modifiez un actif dans le panneau Actifs, le comportement varie en fonction du type d'actif. Pour certains actifs, tels que les images, vous utilisez un diteur externe qui s'ouvre automatiquement si vous avez dfini un diteur pour ce type d'actif. Vous ne pouvez modifier les couleurs et les URL que dans la liste Favoris. Lorsque vous modifiez des modles et des lments de bibliothque, vous effectuez les modifications dans Dreamweaver.
1 Dans le panneau Actifs, procdez de l'une des manires suivantes :
Double-cliquez sur l'actif. Slectionnez l'actif, puis cliquez sur le bouton Modifier
. Remarque : Si l'actif doit tre modifi dans un diteur externe et qu'aucun diteur ne s'ouvre automatiquement, slectionnez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh), slectionnez la catgorie Types de fichiers/Editeurs, et assurez-vous qu'un diteur externe est dfini pour ce type d'actif.
2 Apportez les modifications voulues. 3 Lorsque vous avez termin, procdez de lune des faons suivantes :
Si l'actif est bas sur un fichier (tout objet autre qu'une couleur ou une URL), enregistrez-le (via l'diteur que vous
utilisez), puis fermez-le.
Si l'actif est une URL, cliquez sur OK dans la bote de dialogue Modifier l'URL.
Remarque : Si l'actif est une couleur, le slecteur de couleur se ferme automatiquement lorsque vous slectionnez une couleur. Pour fermer le slecteur de couleur sans slectionner de couleur, appuyez sur la touche Echap.
Rutilisation d'actifs dans un autre site

Le panneau Actifs affiche tous les actifs (de types reconnus) dans le site actuel. Pour utiliser un actif du site actuel dans un autre site, il est ncessaire de le copier. Vous pouvez copier un actif individuel, un ensemble d'actifs individuels ou un dossier Favoris entier en une seule opration. Vous devrez peut-tre localiser le fichier dans le panneau Fichiers correspondant un actif dans le panneau Actifs avant de transfrer l'actif depuis ou vers votre site distant. Remarque : Le panneau Fichiers peut afficher un site diffrent de celui prsent par le panneau Actifs, car le panneau Actifs est associ au document actif.
version prliminaire
Localisation d'un fichier d'actif dans le panneau Fichiers

1 Dans le panneau Actifs, slectionnez la catgorie de l'actif que vous recherchez. 2 Cliquez avec le bouton droit (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) sur l'icne ou
le nom de l'actif dans le panneau Actifs, puis choisissez l'option Reprer dans le site dans le menu contextuel. Remarque : L'option Reprer dans le site n'est pas disponible pour les couleurs et les URL, qui ne correspondent pas des fichiers dans le site. Le panneau Fichiers s'ouvre, avec le fichier d'actif slectionn. La commande Reprer dans le site repre le fichier correspondant l'actif lui-mme, et non les fichiers qui utilisent cet actif.
Copie d'actifs depuis le panneau Actifs vers un autre site

1 Dans le panneau Actifs, slectionnez la catgorie de l'actif que vous souhaitez copier. 2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh)
sur un ou plusieurs actifs dans la liste Site ou Favoris, slectionnez Copier dans le site, puis slectionnez le nom du site cible dans le sous-menu qui rpertorie les sites que vous avez dfinis. Remarque : Dans la liste Favoris, vous pouvez copier un dossier Favoris ainsi que des actifs individuels. Les actifs sont copis dans leurs emplacements correspondants dans le site cible. Dreamweaver cre de nouveaux dossiers dans la hirarchie du site cible en fonction des besoins. Les actifs sont galement ajouts la liste Favoris du site cible. Remarque : Si l'actif que vous avez copi est une couleur ou une URL, il s'affiche uniquement dans la liste Favoris du site cible. Du fait que les couleurs et les URL ne correspondent pas des fichiers, il n'existe aucun fichier copier dans l'autre site.
Cration et gestion d'une liste d'actifs favoris

Gestion des actifs favoris
La liste complte de tous les actifs reconnus peut devenir encombre pour certains sites volumineux. Vous pouvez ajouter des actifs frquemment utiliss une liste Favoris, grouper des actifs connexes, leur attribuer des surnoms pour mmoriser leur objet et les retrouver aisment dans le panneau Actifs. Remarque : Les actifs favoris ne sont pas stocks en tant que fichiers distincts sur le disque. Ils font rfrence aux actifs de la liste Site. Dreamweaver conserve la trace des actifs de la liste Site afficher dans la liste Favoris. La plupart des oprations du panneau Actifs sont identiques dans les listes Favoris et Site. Toutefois, il existe plusieurs tches que vous pouvez raliser uniquement dans la liste Favoris.
Ajout ou suppression d'actifs favoris

Il existe plusieurs mthodes pour ajouter des actifs la liste Favoris du site dans le panneau Actifs. L'ajout d'une couleur ou d'une URL la liste Favoris ncessite une tape supplmentaire. Vous ne pouvez pas ajouter de nouvelles couleurs ou URL la liste Site. Cette dernire contient uniquement les actifs dj utiliss dans le site. Remarque : Il n'existe pas de liste Favoris pour les modles et les lments de bibliothque.
version prliminaire
Voir aussi
Prsentation du panneau Actifs la page 115 Utilisation du slecteur de couleur la page 223
Ajout d'actifs la liste Favoris

Slectionnez un ou plusieurs actifs dans la liste Site du panneau Actifs, puis cliquez sur le bouton Ajouter aux
favoris .
Slectionnez un ou plusieurs actifs dans la liste Site du panneau Actifs, cliquez avec le bouton droit (Windows) ou
en maintenant la touche Ctrl enfonce (Macintosh), puis slectionnez Ajouter aux favoris.
Slectionnez un ou plusieurs fichiers dans le panneau Fichiers, cliquez avec le bouton droit (Windows) ou en
maintenant la touche Ctrl enfonce (Macintosh), puis slectionnez Ajouter aux favoris. Dreamweaver ignore les fichiers n'appartenant pas une catgorie du panneau Actifs.
Cliquez avec le bouton droit (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) sur un lment
dans la fentre de document en mode Cration, puis choisissez l'option du menu contextuel pour ajouter l'lment une catgorie Favoris. Le menu contextuel pour le texte contient soit l'option Ajouter aux favoris Couleur, soit l'option Ajouter aux favoris URL, selon qu'un lien est attach au texte. Vous pouvez ajouter uniquement les lments qui correspondent aux catgories du panneau Actifs.
Ajout d'une nouvelle couleur ou une nouvelle URL la liste Favoris

1 Dans le panneau Actifs, slectionnez la catgorie Couleurs ou URL. 2 Slectionnez l'option Favoris en haut du panneau. 3 Cliquez sur le bouton Nouvelle couleur ou Nouvelle URL 4 Effectuez l'une des oprations suivantes :
Slectionnez une couleur dans le slecteur de couleur et donnez-lui un surnom si vous le souhaitez.
Pour fermer le slecteur de couleur sans slectionner de couleur, appuyez sur la touche Echap ou cliquez sur la barre de couleur grise en haut du slecteur de couleur.
Entrez une URL et un surnom dans la bote de dialogue Ajouter URL, puis cliquez sur OK.
Suppression d'actifs de la liste Favoris

1 Dans le panneau Actifs, slectionnez l'option Favoris en haut du panneau. 2 Slectionnez un ou plusieurs actifs (ou un dossier) dans la liste Favoris. 3 Cliquez sur le bouton Supprimer des favoris
Les actifs sont supprims de la liste Favoris, mais pas de la liste Site. Si vous supprimez un dossier Favoris, ce dernier est supprim, ainsi que tout son contenu.
Cration d'un surnom pour un actif favori

Vous pouvez attribuer des surnoms (par exemple, CouleurArrirePlanPage au lieu de #999900) uniquement aux actifs de la liste Favoris. La liste Site retient leur nom de fichier rel (ou leur valeur, dans le cas de couleurs et d'URL).
1 Dans le panneau Actifs, (Fentre > Actifs), slectionnez la catgorie qui contient votre actif.
version prliminaire
2 Slectionnez l'option Favoris en haut du panneau. 3 Effectuez l'une des oprations suivantes :
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) sur le
nom ou l'icne de l'actif dans le panneau Actifs, puis slectionnez Modifier le surnom.
Cliquez une fois sur le nom de l'actif, effectuez une pause, puis cliquez nouveau. (Ne double-cliquez pas, car cela
ouvrirait l'lment pour modification.)
4 Tapez un surnom pour l'actif, puis appuyez sur la touche Entre (Windows) ou Retour (Macintosh).
Voir aussi
Prsentation du panneau Actifs la page 115
Regroupement d'actifs dans un dossier Favoris

Le fait de placer un actif dans un dossier Favoris ne modifie pas l'emplacement du fichier d'actif sur le disque.
1 Dans le panneau Actifs, slectionnez l'option Favoris en haut du panneau. 2 Cliquez sur le bouton Nouveau dossier Favoris
3 Tapez un nom pour le dossier, puis appuyez sur la touche Entre (Windows) ou Retour (Macintosh). 4 Faites glisser les actifs vers le dossier.
Utilisation des lments de bibliothque

Cration d'un lment de bibliothque
Les lments de bibliothque sont des lments que vous souhaitez rutiliser ou mettre jour frquemment dans l'ensemble de votre site Web.
Voir aussi
A propos des lments de bibliothque la page 114
Crer un lment de bibliothque bas sur une slection

1 Dans la fentre de document, slectionnez une partie d'un document que vous souhaitez enregistrer comme
lment de la bibliothque.
Faites glisser la slection sur la catgorie Bibliothque Cliquez sur le bouton Nouvel lment de bibliothque
. en bas de la catgorie Bibliothque.
Slectionnez Modifier > Bibliothque > Ajouter un objet dans la bibliothque.

3 Tapez un nom pour le nouvel lment de la bibliothque, puis appuyez sur la touche Entre (Windows) ou Retour
(Macintosh). Dreamweaver enregistre chaque lment de bibliothque dans un fichier spar (avec l'extension de fichier .lbi), dans le dossier Library du dossier racine local du site.
version prliminaire
Cration d'un lment de bibliothque vide

1 Vrifiez que rien n'est slectionn dans la fentre de document.
Si un lment est slectionn, il est plac dans le nouvel lment de bibliothque.

2 Dans le panneau Actifs, slectionnez la catgorie Bibliothque 3 Cliquez sur le bouton Nouvel lment de bibliothque
en bas du panneau.
4 Slectionnez l'lment et entrez son nom, puis appuyez sur Entre (Windows) ou sur Retour (Macintosh).
Insertion d'un lment de bibliothque dans un document

Lorsque vous ajoutez un lment de bibliothque une page, le contenu rel est insr dans le document avec une rfrence l'lment de bibliothque.
1 Placez le point d'insertion dans la fentre de document. 2 Dans le panneau Actifs, slectionnez la catgorie Bibliothque 3 Effectuez l'une des oprations suivantes :
Faites glisser un lment de bibliothque du panneau Actifs vers la fentre de document.

Pour insrer le contenu d'un lment de bibliothque sans inclure de rfrence l'lment dans le document, appuyez sur la touche Ctrl (Windows) ou Option (Macintosh) tout en faisant glisser l'lment hors du panneau Actifs. Lorsque vous insrez un lment de cette faon, vous pouvez le modifier dans le document, mais le document ne sera pas mis jour lorsque vous mettrez jour les pages qui utilisent cet lment.
Slectionnez un lment de bibliothque et cliquez sur Insrer.
Modification des lments de bibliothque et mise jour des documents

Lorsque vous modifiez un lment de bibliothque, vous pouvez choisir de mettre jour tous les documents qui utilisent cet lment. Si vous choisissez de ne pas les mettre jour, les documents restent associs l'lment de bibliothque. Il est toujours possible de les mettre jour ultrieurement. Vous pouvez renommer des lments pour rompre leur lien avec des documents ou des modles, supprimer des lments de la bibliothque du site et recrer un lment de bibliothque manquant. Remarque : Le panneau Styles CSS n'est pas disponible lorsque vous ditez un lment de bibliothque tant donn que ces derniers peuvent uniquement contenir des lments body et que le code CSS (feuille de style en cascade) est insr dans la section head d'un document. La bote de dialogue Proprits de la page est galement indisponible : en effet, un lment de bibliothque ne peut pas comporter de balise body ni d'attributs de cette balise.
Modification d'un lment de bibliothque

1 Dans le panneau Actifs, slectionnez la catgorie Bibliothque 2 Slectionnez un lment de bibliothque. 3 Vous pouvez soit cliquer sur le bouton Modifier
, soit double-cliquer sur l'lment de bibliothque.
Dreamweaver ouvre une nouvelle fentre, similaire la fentre de document, permettant de modifier l'lment de bibliothque. L'arrire-plan gris indique que vous tres en train de modifier un lment de bibliothque et non un document.
4 Apportez les modifications et enregistrez-les.
version prliminaire
5 Indiquez si vous souhaitez mettre jour les documents du site local qui utilisent l'lment de bibliothque modifi.
Slectionnez Mettre jour pour effectuer une mise jour immdiate. Si vous slectionnez Ne pas mettre jour, les documents ne seront pas mis jour moins que vous ne slectionniez Modifier > Bibliothque > Mettre jour la page en cours ou Mettre jour les pages.
Mise jour du document actif afin d'utiliser la version actuelle de tous les lments de bibliothque
Choisissez Modifier > Modles > Mettre jour la page en cours.
Mise jour du site entier ou de tous les documents utilisant un lment de bibliothque particulier
1 Choisissez Modifier > Bibliothque > Mettre jour les pages. 2 Dans le menu droulant Regarder dans, indiquez ce qui doit tre mis jour :
Pour mettre jour toutes les pages du site slectionn afin d'utiliser la version actuelle de tous les lments de
bibliothque, slectionnez Site entier, puis slectionnez le nom du site dans le menu droulant adjacent.
Pour mettre jour toutes les pages du site en cours qui utilisent l'lment de bibliothque, slectionnez Fichiers
utilisant, puis slectionnez un nom d'lment de bibliothque dans le menu droulant adjacent.
3 Sous Mettre jour, assurez-vous que l'option Elments de bibliothque est active.
Pour mettre les modles jour en mme temps, slectionnez Modles galement.
4 Cliquez sur Dmarrer.
Dreamweaver met jour les fichiers comme indiqu. Si vous avez slectionn l'option Afficher le journal, Dreamweaver gnre un rapport qui indique si les fichiers ont t mis jour correctement et qui contient galement d'autres informations.
Modification du nom d'un lment de bibliothque

1 Dans le panneau Actifs, slectionnez la catgorie Bibliothque
2 Cliquez sur l'lment de bibliothque, attendez, puis cliquez de nouveau. (Ne double-cliquez pas, car cela ouvrirait
l'lment pour modification.)

3 Entrez un nouveau nom. 4 Cliquez ailleurs ou appuyez sur Entre (Windows) ou sur Retour (Macintosh). 5 indiquez si vous souhaitez mettre jour les documents qui utilisent l'lment en choisissant soit Mettre jour, soit
Ne pas mettre jour.
Suppression d'un lment d'une bibliothque

Lorsque vous supprimez un lment de bibliothque, Dreamweaver supprime l'lment de la bibliothque mais ne modifie pas le contenu des documents qui l'utilisent.
1 Dans le panneau Actifs, slectionnez la catgorie Bibliothque 2 Slectionnez llment de bibliothque. 3 Cliquez sur le bouton Supprimer ou appuyez sur la touche Suppr, puis confirmez l'opration.
Important : Si vous supprimez un lment de bibliothque, vous ne pourrez pas utiliser Annuler pour le rcuprer. Vous pouvez toutefois le recrer.
version prliminaire
Rcration d'un lment de bibliothque manquant ou supprim

1 Slectionnez une instance de l'lment dans un de vos documents. 2 Cliquez sur le bouton Crer nouveau de l'inspecteur Proprits (Fentre > Proprits).
Personnalisation de la mise en surbrillance des lments de bibliothque

Vous pouvez personnaliser la couleur de surbrillance des lments de bibliothque et afficher ou masquer la surbrillance en dfinissant des prfrences de surbrillance.
Voir aussi
Utilisation du slecteur de couleur la page 223
Modification de la couleur de surbrillance des lments de bibliothque

1 Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh). 2 Slectionnez la catgorie Surbrillance dans la liste situe gauche dans la bote de dialogue Prfrences. 3 Cliquez dans la case de couleur Elments de la bibliothque et slectionnez une couleur de surbrillance l'aide du
slecteur de couleurs (ou entrez la valeur hexadcimale correspondant la couleur de surbrillance dans la zone de texte).
4 Activez l'option Afficher pour afficher la couleur de surbrillance dans la fentre de document. 5 Cliquez sur OK.
Affichage ou masquage de la mise en surbrillance dans la fentre de document

Pour afficher la mise en surbrillance, slectionnez Affichage > Assistances visuelles > Elments invisibles. Pour
masquer la mise en surbrillance, dslectionnez l'option Elments invisibles.
Modification des proprits d'un lment de bibliothque

L'inspecteur Proprits vous permet d'ouvrir un lment de bibliothque pour le modifier, dtacher un lment slectionn de son fichier source ou remplacer un lment par celui slectionn actuellement.
1 Slectionnez un lment de bibliothque dans un document. 2 Slectionnez l'une des options suivantes dans l'inspecteur Proprits (Fentre > Proprits) :
Src Indique le nom de fichier et l'emplacement du fichier source de l'lment de la bibliothque. Vous ne pouvez pas modifier ces informations. Ouvrir Ouvre le fichier source de l'lment de bibliothque pour modification. Cela revient slectionner l'lment dans le panneau Actifs et cliquer sur le bouton Modifier. Dtacher de l'original Brise le lien entre l'lment de bibliothque slectionn et son fichier source. Vous pouvez
modifier l'lment dtach dans le document, mais il ne s'agit plus d'un lment de bibliothque et il n'est plus modifi lorsque vous modifiez l'lment d'origine.
Crer nouveau Remplace l'lment d'origine par la slection en cours. Utilisez cette option pour recrer les lments
de bibliothque si l'lment de bibliothque d'origine manque ou a t accidentellement supprim.
version prliminaire
Autorisation de la modification d'lments de bibliothque dans un document

Si vous avez insr un lment de bibliothque dans un document et que vous dsirez modifier celui-ci uniquement sur cette page, vous devez briser le lien qui existe entre cet lment et la bibliothque. Lorsqu'une instance d'lment de bibliothque a t rendue modifiable, elle n'est plus mise jour quand l'lment de bibliothque est modifi.
1 Slectionnez un lment de la bibliothque dans le document actif. 2 Dans l'inspecteur Proprits, cliquez sur Dtacher de l'original (Fentre > Proprits).
Modification d'un comportement dans un lment de bibliothque

Pour modifier un comportement dans un lment de bibliothque, vous devez tout d'abord insrer l'lment dans un document, puis le rendre modifiable dans ce document. Une fois les changements apports, vous pouvez recrer l'lment de bibliothque en remplaant l'lment de la bibliothque par l'lment modifi de votre document.
1 Ouvrez un document contenant l'lment de la bibliothque.
Notez le nom de l'lment de la bibliothque, ainsi que les balises exactes qu'il contient. Vous aurez besoin de cette information plus tard.
2 Slectionnez l'lment de bibliothque et cliquez sur Dtacher de l'original dans l'inspecteur Proprits
(Fentre > Proprits).

3 Slectionnez l'lment auquel est attach le comportement. 4 Dans le volet Comportements (Fentre > Comportements), double-cliquez sur l'action que vous voulez modifier. 5 Dans la bote de dialogue qui s'affiche, effectuez vos modifications et cliquez sur OK. 6 Dans le panneau Actifs, slectionnez la catgorie Bibliothque
7 Notez prcisment le nom et la casse de l'lment de bibliothque d'origine ; slectionnez-le, puis cliquez sur le
bouton Supprimer.
8 Dans la fentre de document, slectionnez tous les lments qui constituent l'lment de bibliothque.
Veillez slectionner exactement les mmes lments que ceux qui se trouvaient dans l'lment de bibliothque original.
9 Dans le panneau Actifs, cliquez sur le bouton Nouvel lment de bibliothque
et donnez au nouvel lment le
nom de l'lment que vous avez supprim en respectant l'orthographe et la casse.

10 Pour mettre jour l'lment de bibliothque dans les autres documents de votre site, choisissez Modifier >
Bibliothque > Mettre jour les pages.

11 Dans le menu droulant Regarder dans, slectionnez Fichiers utilisant. 12 Dans le menu droulant adjacent, slectionnez le nom de l'lment de bibliothque que vous venez de crer. 13 Sous Mettre jour, vrifiez que l'option Elments de bibliothque est slectionne, puis cliquez sur Dmarrer. 14 Une fois les mises jour termines, cliquez sur Fermer.
Voir aussi
Utilisation des comportements JavaScript la page 345
version prliminaire
127
Chapitre 6 : Cration de pages avec CSS

Adobe Dreamweaver CS5 comprend de nombreuses fonctions qui vous permettent d'utiliser des feuilles de style en cascade (CSS) pour crer des styles et des mises en forme pour vos pages Web.
Description des feuilles de style en cascade

A propos des feuilles de style en cascade
Les feuilles de style en cascade (CSS) regroupent des rgles de formatage qui dterminent l'aspect du contenu d'une 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 l'aspect de votre site partir d'un point central car vous n'avez 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 d'accessibilit (par exemple, qui utilisent des lecteurs d'cran). CSS vous offre une plus grande souplesse et une plus grande matrise de l'aspect 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 d'arrire-plan, la couleur des liens et le soulignement des liens, etc. En utilisant CSS pour contrler vos polices de caractres, vous vous assurez d'un traitement plus cohrent de la mise en page et de l'aspect de votre page dans diffrents navigateurs. Outre le formatage du texte, CSS permet de grer le format et le positionnement des blocs d'lments d'une 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 d'arrire-plan, faire flotter du texte autour d'eux, etc. C'est essentiellement en manipulant des lments de niveau bloc que vous ralisez des mises en page avec CSS. Pour accder un didacticiel relatif aux feuilles de style en cascade, consultez le site Web d'Adobe l'adresse www.adobe.com/go/vid0152_fr.
Voir aussi
Utilisation des balises Div la page 161 Mise en forme des pages avec CSS la page 155 Didacticiel de description des feuilles CSS
version prliminaire
Cration de pages avec CSS
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 l'lment mis en forme tandis que le bloc de dclaration dfinit quels sont les proprits de style. Dans l'exemple suivant, h1 correspond au slecteur tandis que tout ce qui est plac entre les crochets ({}) correspond la dclaration :
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, d'une 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 s'appliquer de nombreuses balises la fois (et dans le cas de feuilles de style externes, la rgle peut s'appliquer 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 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.
Where to stay
H1 { font-family: Ariel; font-size: 16px; font-weight: bold; }
What to do
main.html
Spring Festival
Feuille de style externe
events.html
Vous pouvez dfinir les types de styles suivants dans Dreamweaver :
Les styles de classe vous permettent d'appliquer des proprits de style tout lment de la page. Les styles appliqus aux balises HTML redfinissent le formatage d'une balise spcifique, telle que h1. Lorsque vous
crez ou modifiez un style CSS pour la balise h1, tout le texte format l'aide de cette balise h1 est immdiatement modifi en consquence.
Les styles avancs redfinissent le formatage pour une combinaison particulire d'lments ou pour d'autres formes
du slecteur admises par CSS (par exemple, le slecteur td h2 s'applique chaque fois qu'un 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 s'appliquent toutes les balises qui contiennent la paire valeur-attribut id="myStyle").
version prliminaire
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 d'un site Web l'aide d'un lien ou d'une rgle @import situ dans la section head d'un document.
Feuilles de style CSS internes (ou imbriques) Ensembles de rgles CSS incluses dans une balise style de la section
head d'un document HTML.

Styles en ligne Dfinis dans des instances spcifiques de balises dans un document HTML. L'utilisation de styles en
ligne n'est pas recommande. Dreamweaver reconnat les styles dfinis dans des documents existants, pour peu qu'ils soient conformes aux recommandations des feuilles de style CSS. Dreamweaver restitue galement la plupart des styles appliqus directement en mode Conception. Toutefois, la prvisualisation d'un document dans une fentre de navigateur vous permet d'obtenir le rendu direct le plus prcis de la page. Certains styles CSS s'affichent diffremment dans Microsoft Internet Explorer, Netscape Navigator, Opera, Apple Safari ou d'autres navigateurs, et certains ne sont pas encore pris en charge par aucun navigateur. Pour afficher le guide de rfrence CSS d'O'Reilly inclus dans Dreamweaver, choisissez Aide > Rfrence et slectionnez O'Reilly - Rfrence CSS dans le menu droulant du panneau Rfrence.
Voir aussi
Application, suppression ou changement du nom de styles de classe la page 144
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 d'une page Web. Trois sources sont responsables des styles visibles sur une page Web : la feuille de style cre par l'auteur de la page, les ventuelles slections de style personnalises de l'utilisateur, et les styles par dfaut du navigateur. Les sections prcdentes expliquent la cration de styles pour une page Web par l'auteur 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 l'affichage des pages Web. L'apparence finale d'une page Web est le rsultat de la combinaison (cascadre) des rgles 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, c'est--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, s'affiche par dfaut dans la police Times New Roman de taille moyenne. Toutefois, si vous tes l'auteur d'une 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 :
p { font-family: Arial; font-size: small; }
Lorsqu'un 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.
version prliminaire
Les utilisateurs peuvent effectuer des slections pour personnaliser l'affichage du navigateur selon leurs attentes. Par exemple, dans Internet Explorer, l'utilisateur 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 l'utilisateur 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 l'auteur de la page Web. L'hritage est un autre lment important de la cascade. Les proprits de la plupart des lments d'une page Web sont hrites. Par exemple, les balises de paragraphe hritent de certaines proprits des balises body, les balises de listes puces de certaines proprits des balises de paragraphe, et ainsi de suite. Ainsi, vous pouvez crer la rgle suivante dans votre feuille de style :
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 d'hritage standard. Par exemple, vous pouvez crer les rgles suivantes dans votre feuille de style :
body { font-family: Arial; font-style: italic; } p { font-family: Courier; font-style: normal; }
Tout le texte du corps est en Arial italique, sauf le texte des paragraphes (et celui des balises hritires), qui s'affiche en Courier normal (non italique). D'un point de vue technique, la balise de paragraphe hrite tout d'abord des proirits dfinies pour la balise body, puis elle ignore celles-ci, car des proprits ont t dfinies spcifiquement pour elle. En d'autres termes, bien que les lments de page hritent gnralement des proprits suprieures, l'application directe d'une proprit une balise entrane toujours l'crasement de la formule d'hritage standard. La combinaison de tous les facteurs exposs ci-dessus et d'autres facteurs, tels que la spcificit CSS (un systme qui attribue un poids diffrent des types prcis de rgles CSS) et l'ordre 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 d'informations sur les rgles en matire de cascade, d'hritage et de spcificit, visitez le site www.w3.org/TR/CSS2/cascade.html.
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 l'aide de l'inspecteur 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 l'inspecteur Proprits et prsente toutes les rgles CSS dfinies dans le document actif, qu'elles soient intgres la section head du document ou dans une feuille de style externe. Adobe recommande l'utilisation du panneau Styles CSS (plutt que l'inspecteur Proprits) comme outil principal de cration et modification de vos styles CSS. Ainsi, votre code sera plus clair et sa maintenance en sera simplifie.
version prliminaire
Outre les styles et feuilles de style de votre composition, libre vous d'utiliser les feuilles de style livres avec Dreamweaver pour styliser vos documents Pour accder un didacticiel relatif au formatage de texte l'aide de feuilles de style en cascade, consultez le site Web d'Adobe l'adresse www.adobe.com/go/vid0153_fr.
Voir aussi
Ajout et formatage de texte la page 225 Cration d'une nouvelle rgle CSS la page 136 Didacticiel de formatage de texte avec CSS
A propos des proprits de la forme courte des styles CSS

La spcification CSS permet la cration de styles l'aide d'une syntaxe abrge appele forme courte des styles CSS. Elle permet de spcifier la valeur de plusieurs proprits l'aide d'une seule dclaration. Par exemple, la proprit font vous permet de dfinir les proprits font-style, font-variant, font-weight, font-size, line-height et fontfamily sur une seule ligne. Il est important de savoir que sous forme courte, les proprits dont la valeur est omise reoivent leur valeur par dfaut. Certaines pages risquent donc de s'afficher 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, fontstretch, font-size-adjust et font-style ont reu leur valeur par dfaut. 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 :
h1 { font: bold 16pt/18pt Arial }
Sous forme courte, les proprits dont la valeur est omise reoivent automatiquement leur valeur par dfaut. Ainsi, l'exemple de forme abrge ci-dessus omet les balises font-variant, font-style, font-stretch et font-sizeadjust. Si des styles sont dfinis en plusieurs emplacements (par exemple, incorpors dans une page HTML et imports d'une feuille de style externe) sous deux formes, longue et courte, n'oubliez pas que les proprits omises dans une rgle de notation abrge risquent d'craser les proprits explicitement dfinies dans une autre rgle. (On parle de styles en cascade.)
version prliminaire
Dreamweaver utilise donc la forme longue par dfaut, Ceci permet d'viter qu'une rgle de notation abrge ne remplace une rgle de notation longue. Si vous ouvrez une page Web code en forme courte dans Dreamweaver, n'oubliez 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 l'aide du panneau Style CSS, n'oubliez pas que le codage manuel de rgles CSS sous forme courte risque de provoquer l'crasement des proprits cres sous forme longue par celles cres sous forme courte. Il est donc prfrable de crer vos styles CSS sous forme longue.
Cration et gestion de CSS

Styles CSS, panneau
Le panneau Styles CSS vous permet de suivre les rgles CSS et les proprits qui affectent un lment de page slectionn (mode Actuel), ou l'ensemble des rgles et des proprits qui sont disponibles pour le document (mode Tous). Un bouton bascule plac sur la partie suprieure du panneau vous permet de passer d'un mode l'autre. Le panneau Styles CSS vous permet de modifier les proprits CSS dans les deux modes.
Panneau Styles CSS en mode Actuel

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

En mode Tous, le panneau Styles CSS prsente deux volets : un volet Toutes les rgles (en haut) et un volet Proprits (en bas). Le volet Toutes les rgles prsente la liste des rgles dfinies dans le document actif, ainsi que l'ensemble des rgles dfinies dans les feuilles de styles jointes ce document. Le volet Proprits permet de modifier les proprits CSS de toute rgle slectionne dans le volet Toutes les rgles.
Vous pouvez redimensionner l'un quelconque des volets en faisant glisser les cadres entre les volets et redimensionner les colonnes Proprits en faisant glisser les sparateurs. Lorsque vous slectionnez une rgle dans le volet Toutes les rgles, toutes les proprits s'appliquant cette rgle s'affiche au-dessous dans le volet Proprits. Vous pouvez alors utiliser le volet Proprits pour modifier rapidement votre style CSS, qu'il soit intgr dans le document en cours ou reli via par une feuille de style. Par dfaut, le volet Proprits ne prsente que les proprits prcdemment dfinies et les classe par ordre alphabtique. Vous pouvez choisir d'afficher les proprits dans deux autres vues. La vue Catgorie regroupe les proprits en catgories, telles que Police, Arrire-plan, Bloc, Bordure, etc., les proprits dfinies places en haut de chaque catgorie. La vue Liste prsente la liste alphabtique de toutes les proprits disponibles, les proprits dfinies galement places en haut de chaque catgorie. Pour passer d'une vue l'autre, cliquez sur les boutons Afficher la vue par catgorie, Afficher la vue sous forme de liste ou Afficher uniquement les proprits dfinies, situs dans le coin infrieur droit du volet Proprits. Dans toutes les vues, les proprits utilises dans la slection s'affichent en bleu. Toute modification apporte dans le volet Proprits s'applique immdiatement, ce qui vous permet d'avoir un aperu direct de votre travail.
version prliminaire
Voir aussi
Ouverture du panneau Styles CSS la page 135
Boutons et vues du panneau Styles CSS

Dans les modes Tous et Actuel, le panneau Styles CSS prsente trois boutons qui vous permettent de modifier l'affichage du volet Proprits (volet infrieur) :
A. Vue Catgorie B. Vue Liste C. Vue Dfinition des proprits
Vue Catgorie Rpartit les proprits CSS prises en charge par Dreamweaver en huit catgories distinctes : police, arrire-plan, bloc, bordure, bote, liste, positionnement et extensions. Les proprits de chaque catgorie sont conserves dans une liste que vous pouvez dvelopper ou rduire en cliquant sur le bouton plus (+) en regard de la catgorie de votre choix. Les proprits dfinies s'affichent en bleu en haut de la liste. Vue Liste Affiche l'ensemble des proprits CSS prises en charge par Dreamweaver par ordre alphabtique. Les
proprits dfinies s'affichent en bleu en haut de la liste.

Vue Dfinition des proprits N'affiche que les proprits dj dfinies et constitue la vue par dfaut.
Dans les modes Tous et Actuel, le panneau Styles CSS contient galement les boutons suivants :
A. Attacher une feuille de style B. Nouvelle rgle de CSS C. Modifier le style D. Dsactiver/Activer la proprit CSS E. Supprimer rgle de CSS
Attacher une feuille de style Ouvre la bote de dialogue Ajouter une feuille de style externe. Slectionnez une feuille de
style externe pour crer un lien vers le document actif ou l'importer dans celui-ci.
Nouvelle rgle de CSS Ouvre une bote de dialogue qui permet de slectionner le type du style que vous crez, par exemple, pour crer un style de classe, redfinir une balise HTML ou pour dfinir un slecteur CSS. Modifier le style Ouvre une bote de dialogue qui permet de modifier les styles dans le document actuel ou dans une
feuille de style externe.

Supprimer rgle de CSS Supprime la rgle ou la proprit slectionne du panneau Styles CSS et le formatage de tous les lments auxquels elle est applique. (Les rfrences ce style ne sont cependant pas supprimes.) Le bouton Supprimer rgle de CSS peut galement dtacher (ou rompre le lien de) une feuille de style CSS associe.
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) sur le panneau Styles CSS pour ouvrir un menu contextuel d'options disponibles pour l'excution des commandes de feuilles de style CSS.
Ouverture du panneau Styles CSS

Le panneau Styles CSS vous permet d'afficher, de crer, de modifier et de supprimer des styles CSS, mais galement de joindre des feuilles de style externes aux documents.
Effectuez lune des tches suivantes :
Choisissez Fentre > Styles CSS. Appuyez sur les touches Maj+F11.
version prliminaire
Cliquez sur le bouton CSS de l'inspecteur Proprits.
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.
Cration d'une nouvelle rgle CSS

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.
version prliminaire
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.
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.
Dfinition des proprits CSS

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

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 3.0, utilisez une police Windows en premier. 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
version prliminaire
dfinissez le 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.
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'arrireplan 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.
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 Arrire-plan, puis dfinissez les proprits de
style. Laissez les proprits suivantes vides si elles ne sont pas importantes pour ce style :
Couleur d'arrire-plan Dfinit la couleur d'arrire-plan de l'lment. Cet attribut est pris en charge par les deux
navigateurs.
Image darrire-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 l'image une seule fois, dans le coin suprieur gauche de l'lment. Rpter cre une mosaque horizontale et verticale de l'image derrire l'lment. 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 vous permet de redfinir la balise body et de dfinir une image d'arrire-plan sans mosaque ni rptition.
Pice jointe de l'arrire-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.
version prliminaire
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.
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 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.
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 individuels aux cts d'un lment lors de la dfinition du remplissage et des marges ou utiliser l'option Idem pour tous pour appliquer le mme paramtre tous les cts d'un lment.
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.
version prliminaire
3 Dans la bote de dialogue Dfinition des rgles de CSS, choisissez Bote, puis dfinissez les proprits de style
suivantes. Ne dfinissez pas la proprit si elle n'est pas importante pour le style.
Largeur et Hauteur Dfinissent la largeur et la hauteur de l'lment. Flottante Dtermine de quel ct les autres lments, tels que le texte, les divs PA, les tableaux, etc., flottent autour d'un lment. Les autres lments sont affichs autour de l'lment flottant, suivant la mthode habituelle. Cet attribut est pris en charge par les deux navigateurs. Effacer Dfinit les cts sur lesquels les lments PA ne sont pas autoriss. Si un lment PA apparat du ct marqu
dans Effacer, l'lment possdant cet attribut passera sous le cadre. Cet attribut est pris en charge par les deux navigateurs.
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.
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.
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 Bordure, puis dfinissez les proprits de 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. 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.
version prliminaire
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.
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 Liste, puis dfinissez les proprits de style
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).

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.
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 Positionnement, puis dfinissez les proprits de
style qui vous conviennent. Laissez les proprits suivantes vides si elles ne sont pas importantes pour ce style :
Position Dtermine la faon dont le navigateur doit positionner l'lment slectionn, avec les options suivantes :
Absolu place le contenu en fonction des coordonnes indiques dans les zones Emplacement par rapport l'anctre
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 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 :
Inherit hrite de la proprit de visibilit du parent du contenu. Visible affiche le contenu, quelle que soit la valeur du parent.
version prliminaire
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.
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.
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 Extensions, puis dfinissez les proprits de 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.
version prliminaire
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.
Modification d'une rgle 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)

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. 4 Effectuez lune des tches suivantes :
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)

1 Ouvrez le panneau Styles CSS en slectionnant Fentre > Styles CSS. 2 Cliquez sur le bouton Tous, situ en haut du panneau Styles CSS. 3 Effectuez lune des tches suivantes :
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.
Modification du nom d'un slecteur CSS

1 Dans le panneau Styles CSS (mode Tous), slectionnez le slecteur modifier.
version prliminaire
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 la page 235
Ajout d'une proprit une rgle

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).

2 Effectuez lune des tches suivantes :
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.
Application, suppression ou changement du nom de styles 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.
Voir aussi
A propos des feuilles de style en cascade la page 127 A propos des styles en cascade la page 129
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.
version prliminaire
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.
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.
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 l'ancien nom de la classe pouvant exister dans votre site.
Dplacement/exportation de rgles CSS

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.
Voir aussi
Insertion de code avec la barre d'outils de codage la page 319
Dplacement/exportation de rgles CSS vers une nouvelle feuille de style

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 vue 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.
version prliminaire
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

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 vue 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 disponible uniquement en mode Code.
Rorganisation ou dplacement des rgles CSS en les faisant glisser

Dans le panneau Styles CSS (mode Tous), slectionnez une rgle et faites-la glisser jusqu' l'emplacement dsir.
Vous pouvez slectionner 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

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.
Conversion d'un style CSS intgr en une 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 l'ensemble de la balise <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.
version prliminaire
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 disponible uniquement en mode Code.
Voir aussi
Insertion de code avec la barre d'outils de codage la page 319
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. Il se trouve 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.
version prliminaire
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 la page 66
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.
Mise en forme du code CSS

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).
Voir aussi
Modification du format du code la page 310
Dfinition des prfrences de formatage du code CSS

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 douverture sur une ligne spare Place l'accolade d'ouverture pour une rgle sur une ligne spare de celle
du slecteur.
version prliminaire
Seulement si plusieurs proprits Place les rgles une seule proprit sur la mme ligne que le slecteur. Tous les slecteurs dune rgle sur la mme ligne Place tous les slecteurs dune 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

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.
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.
Dsactivation/Activation du 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.
version prliminaire
3 (Facultatif) Pour activer ou supprimer toutes les proprits dsactives d'une rgle slectionne, cliquez l'aide du
bouton droit de la souris (Windows) ou en maintenant la touche Commande enfonce (Macintosh) sur n'importe quelle 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.
Inspection de 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.). Vous trouverez, l'adresse ci-aprs, une vido de l'quipe de conception de Dreamweaver qui prsente l'utilisation du mode Inspection : http://www.adobe.com/go/dwcs5inspect_fr.
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.
Voir aussi
Prvisualisation de pages dans Dreamweaver la page 297 Styles CSS, panneau la page 132
version prliminaire
Vrification de problmes de restitution CSS entre les navigateurs

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.
Voir aussi
Validation des balises la page 336 CSS Advisor
Excution d'une vrification de compatibilit avec les navigateurs

Slectionnez Fichier > Vrifier la page > Compatibilit avec les navigateurs.
Slection de l'lment affect par un problme dtect

Double-cliquez sur le problme dans le panneau Rsultats.
Accs au problme suivant/prcdent dtect dans le code

Dans le menu Vrification de la compatibilit avec les navigateurs de la barre d'outils du document, slectionnez
Problme suivant ou Problme prcdent.
version prliminaire
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. 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

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.
Modification de la liste des problmes ignors

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

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
1 Excutez une vrification de compatibilit avec les navigateurs. 2 Cliquez sur le bouton Parcourir le rapport dans le ct gauche du panneau Rsultats.
Amenez le pointeur de la souris sur les boutons du panneau Rsultats pour afficher les info-bulles relatives chaque bouton.
version prliminaire
Ouverture du site Web Adobe CSS Advisor

navigateurs.
2 Cliquez sur le texte du lien situ dans l'angle infrieur droit du panneau.
Utilisation des feuilles de style la conception

Les feuilles de style la conception permettent d'afficher ou de masquer la conception applique par une feuille de style CSS lorsque vous travaillez dans un document Dreamweaver. Vous pouvez par exemple utiliser cette fonction pour inclure ou exclure l'effet d'une feuille de style Macintosh ou Windows pendant la cration d'une page. Les feuilles de style la conception s'appliquent uniquement lorsque vous travaillez dans un document ; lorsque la page est affiche dans une fentre de navigateur, seuls les styles rellement attachs au document ou qui y sont incorpors apparaissent. Remarque : Vous pouvez galement activer ou dsactiver des styles pour l'ensemble d'une page l'aide de la barre d'outils Rendu du style. Pour afficher la barre d'outils standard, choisissez Affichage > Barres d'outils > Rendu de style. Le bouton Intervertir l'affichage des Styles CSS (le plus droite) fonctionne indpendamment des autres boutons de support de la barre d'outils. Pour utiliser une feuille de style la conception, procdez comme suit.
1 Ouvrez la bote de dialogue Feuilles de style la conception en procdant de l'une des manires suivantes :
Cliquez avec le bouton droit de la souris dans le panneau Styles CSS et choisissez Conception dans le menu
contextuel.
Choisissez Format > Styles CSS > Conception.

2 Dans la bote de dialogue, dfinissez les options d'affichage ou de masquage de la feuille de style slectionne :
Pour afficher une feuille de style CSS la conception, cliquez sur le bouton plus (+) situ au-dessus d'Afficher la
conception uniquement, puis recherchez la feuille de style CSS afficher dans la bote de dialogue Slectionner une feuille de style.
Pour masquer une feuille de style CSS, cliquez sur le bouton plus (+) situ au-dessus de Masquer la conception,
puis recherchez la feuille de style CSS masquer dans la bote de dialogue Slectionner une feuille de style.
Pour supprimer une feuille de style de l'une ou l'autre des listes, cliquez sur la feuille de style que vous voulez
supprimer, puis cliquez sur le bouton moins () appropri.
3 Cliquez sur OK pour fermer la bote de dialogue.
Le panneau Styles CSS est actualis avec le nom de la feuille de style slectionne ainsi qu'un indicateur, masqu ou concevoir , selon l'tat de la feuille de style.
Voir aussi
Prsentation de la barre d'outils Rendu de style la page 10
Utilisation des exemples de feuilles de style de Dreamweaver

Dreamweaver est fourni avec des exemples de feuilles de style que vous pouvez appliquer vos pages ou que vous pouvez utiliser comme points de dpart pour crer vos propres styles.
1 Ouvrez le panneau Styles CSS en procdant de l'une des manires suivantes :
Choisissez Fentre > Styles CSS.
version prliminaire
Appuyez sur les touches Maj+F11.

2 Dans le panneau Styles CSS, cliquez sur le bouton Attacher une feuille de style. (Dans le coin infrieur droit du
panneau.)
3 Dans la bote de dialogue Ajouter une feuille de style externe, cliquez sur Exemples de feuilles de style. 4 Dans la bote de dialogue Exemples de feuilles de style, slectionnez une feuille de style dans la liste droulante.
Lorsque vous slectionnez des feuilles de style dans la zone de liste, le formatage du texte et des couleurs s'affiche dans le panneau d'aperu.
5 Cliquez sur le bouton Aperu pour appliquer la feuille de style et vrifier que le style de votre choix est bien appliqu
la page active. Si les styles appliqus ne sont pas ceux que vous escomptiez, slectionnez une autre feuille de style dans la liste et cliquez sur le bouton Aperu pour visualiser les styles correspondants.
6 Par dfaut, Dreamweaver enregistre la feuille de style dans un dossier nomm CSS au niveau juste en dessous de la
racine du site dfini pour votre page. Si ce dossier n'existe pas, Dreamweaver le cre. Vous pouvez enregistrer le fichier dans un autre emplacement en cliquant sur le bouton Parcourir pour rechercher un autre dossier.
7 Lorsque vous trouvez une feuille de style dont les rgles correspondent vos critres, cliquez sur OK.
Mise jour des feuilles de style CSS dans un site Contribute

Les utilisateurs d'Adobe Contribute ne peuvent pas apporter de modifications une feuille de style CSS. Pour modifier une feuille de style pour un site Contribute, utilisez Dreamweaver.
1 Utilisez les outils de modification de feuille de style prsents dans Dreamweaver pour modifier les feuilles de style. 2 Avertissez les utilisateurs de Contribute qui travaillent la publication des pages que vous utilisez une feuille de
style dfinie. Modifiez ensuite nouveau ces pages pour voir la nouvelle feuille de style. Les facteurs suivants doivent tre pris en compte lors de la mise jour de feuilles de style pour un site Contribute :
Si vous apportez des modifications une feuille de style alors qu'un utilisateur de Contribute modifie une page qui
utilise cette feuille de style, l'utilisateur ne pourra pas observer les changements apports la feuille de style tant que la page ne sera pas publie.
Si vous supprimez un style d'une feuille de style, le nom du style en question n'est pas supprim des pages qui
utilisent cette feuille, mais, puisque le style n'existe plus, il n'est pas appliqu la page comme l'utilisateur de Contribute pourrait s'y attendre. Ainsi, si un utilisateur vous dclare que rien ne se passe lorsque celui-ci applique un style donn, il est possible que le style ait t supprim de la feuille de style.
version prliminaire
Mise en forme des pages avec CSS

A propos de la mise en page CSS
Une mise en page CSS utilise le format de feuilles de style CSS, au lieu de tables ou de cadres HTML traditionnels, pour organiser le contenu d'une page Web. Les lments de base de la mise en forme CSS est la balise div : il s'agit d'une balise HTML qui, la plupart du temps, sert de conteneur pour du texte, des images et d'autres 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' l'intrieur de lignes et de colonnes d'un tableau, les balises div peut figurer n'importe 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 distance par rapport d'autres lments de page). Vous pouvez galement placer des balises div afin de dfinir des lments flottants, des marges intrieurs et des marges. Cette mthode est privilgie dans les normes Web modernes. La cration de mises en forme CSS entirement nouvelles peut s'avrer 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 d'autres 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 l'aide de mises en forme CSS en fournissant 16 mises en forme prdfinies qui fonctionnent sur diffrents types de navigateurs. L'utilisation 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 l'aide d'lments positionnement absolu (lments PA) de Dreamweaver. 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 l'inconvnient 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. Pour plus d'informations sur les diffrents types de mises en forme CSS, consultez l'article suivant de Gary White : Layout 101 (en anglais). Pour accder un didacticiel relatif la cration de mises en page CSS, consultez le site Web d'Adobe l'adresse www.adobe.com/go/vid0155_fr.
Voir aussi
Utilisation des balises Div la page 161 didacticiel relatif aux mises en formes CSS
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. Les lments de base de la mise en forme CSS est la balise div : il s'agit d'une balise HTML qui, la plupart du temps, sert de conteneur pour du texte, des images et d'autres lments de page. L'exemple ci-dessous montre une page HTML qui contient trois balises div distinctes : une balise container de grande taille, et deux autres balises (une balise sidebar et une balise main content) situes l'intrieur de la balise container.
version prliminaire
A C
A. Div Container B. Div sidebar C. Div Main Content
Voici le code correspondant ces trois balises div dans le code HTML :
 <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>
Dans l'exemple ci-dessus, aucun style n'est associ aux balises div. Si aucune rgle CSS n'est 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 l'exemple 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 :
#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 l'application de la rgle la balise div container sont les suivants :
version prliminaire
Balise div Container, 780 pixels, pas de marge A. Texte align gauche B. Arrire-plan blanc C. Bordure noire pleine d'un pixel
La rgle CSS suivante cre des rgles de style pour la balise div sidebar :
#sidebar { float: left; width: 200px; background: #EBEBEB; padding: 15px 10px 15px 20px; }
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. L'ordre 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 l'application de la rgle la balise div sidebar sont les suivants :
A B
Div sidebar, flottante gache 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 :
#mainContent { margin: 0 0 0 250px; padding: 0 20px 20px 20px; }
version prliminaire
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 d'espacement sur les cts droit, bas et gauche de la balise div main content. Les rsultats de l'application de la rgle la balise div mainContent sont les suivants :
A B
Div main content, marge gauche de 250 pixels A. remplissage gauche de 20 pixels B. remplissage droit de 20 pixels C. remplissage bas de 20 pixels
Le code complet ressemble ce qui suit :

<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> </head> <body> 
version prliminaire
<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 : L'exemple 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 l'aide des mises en formes prdfinies fournies avec Dreamweaver.
Voir aussi
Description des feuilles de style en cascade la page 127
Cration d'une page avec une mise en forme CSS

Lors de la cration d'une 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 qu'elles figurent parmi les choix de mise en forme dans la bote de dialogue Nouveau Document. Dreamweaver Les mises en page CSS sont restitues correctement dans les navigateurs suivants : Firefox (Windows et Macintosh) 1.0, 1.5 et 2.0, Internet Explorer (Windows) 5.5, 6.0, 7.0, Opera (Windows et Macintosh) 8.0, 9.0, et Safari 2.0.
Voir aussi
Cration d'une page vierge la page 62 Dfinition du type et du codage par dfaut d'un document la page 68 Etablissement d'un lien vers une feuille de style CSS externe la page 147
Cration d'une page avec une mise en forme CSS

1 Choisissez Fichier > Nouveau. 2 Dans la bote de dialogue Nouveau document, slectionnez la catgorie Modle vierge. Il s'agit de la slection par
dfaut.
3 Pour Type de page, slectionnez le type de page crer.
version prliminaire
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. Les mises en forme CSS prdfinies fournissent les types de colonnes suivants :

Liquide La largeur de colonne est dfinie en tant que pourcentage de la largeur du navigateur du visiteur du site. La
mise en page s'adapte si le visiteur du site augmente ou diminue la largeur de son navigateur, mais pas en fonction des paramtres de texte dfinis par le visiteur.
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.
Ajouter l'en-tte Ajoute le code CSS de mise en forme l'en-tte de la page que vous crez. 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.

Lier au fichier existant Permet d'indiquer un fichier CSS existant qui contient dj les rgles CSS requises pour la mise en 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.
7 Procdez comme suit, au choix :
Si vous avez slectionn Ajouter l'en-tte dans le menu droulant CSS de mise en forme dans (l'option 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 l'icne d'ajout 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 l'option 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 pour Internet Explorer, qui permettent de contourner les problmes de rendu dans IE, restent incorpors dans la section head du nouveau document de mise en forme CSS, mme si vous slectionnez Nouveau fichier externe ou Fichier externe existant en tant qu'emplacement pour votre fichier CSS de mise en forme;
forme CSS) lors de la cration de cette page. Pour ce faire, cliquez sur l'icne Ajouter une feuille de style au-dessus du volet Lier le fichier CSS, puis slectionnez une feuille de style CSS.
version prliminaire
Vous trouverez une description dtaille de ce processus dans l'article 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 formes fournies avec Dreamweaver, vous devez enregistrer votre fichier HTML avec une extension .htm.
2 Ajoutez la page HTML au dossier Adobe Dreamweaver CS4\Configuration\BuiltIn\Layouts. 3 (Facultatif) Ajoutez une image d'aperu de votre mise en forme (par exemple, un fichier .gif ou .png) au dossier
Adobe Dreamweaver CS4\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 d'aperu le mme nom de fichier que votre fichier de faon pouvoir l'identifier facilement. Par exemple, si votre fichier HTML est nomm myCustomLayout.htm, appelez votre image d'aperu myCustomLayout.png.
4 (Facultatif) Crez un fichier de notes pour votre mise en forme personnalise en ouvrant le dossier Adobe
Dreamweaver CS4\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 d'aperu.
Utilisation des balises Div

Insertion et modification de balises div
Vous pouvez crer des mises en page en insrant manuellement des balises div et en leur appliquant des styles de positionnement CSS. Une balise div est une balise qui dfinit les divisions logiques dans le contenu d'une page Web. Vous pouvez utiliser des balises div pour centrer des blocs de contenu, crer des effets de colonne, crer diffrentes zones de couleur, etc. Si vous ne connaissez pas bien l'utilisation des balises div et des feuilles de style CSS pour crer des pages Web, vous pouvez crer une mise en forme CSS partir de l'une des mises en forme prdfinies fournies avec Dreamweaver. Si vous n'tes pas l'aise dans l'utilisation des feuilles de style CSS, mais que vous connaissez bien l'utilisation des tableaux, vous pouvez galement essayer d'utiliser des tableaux. Remarque : Dreamweaver considre comme des lments positionnement absolu (lments PA) toutes les balises div, mme si vous n'avez pas cr ces balises div l'aide de l'outil de dessin Div PA.
Voir aussi
A propos des lments PA dans Dreamweaver la page 165 Cration d'une page avec une mise en forme CSS la page 159 Prsentation de contenu l'aide de tableaux la page 182
version prliminaire
Insertion de balises div

Vous pouvez utiliser des balises div pour crer des blocs de mise en forme CSS et les placer dans votre document. Cette mthode est utile si une feuille de style CSS existante contenant des styles de positionnement est associe votre document. Dreamweaver vous permet d'insrer rapidement une balise div et de lui appliquer des styles existants.
1 Dans la fentre de document, placez le point d'insertion l'endroit o vous voulez insrer la balise div. 2 Effectuez lune des tches suivantes :
Choisissez Insertion > Objets mise en forme > Balise Div. Dans la catgorie Mise en forme du panneau Insertion, cliquez sur le bouton Insrer la balise Div
3 Parmi les options suivantes, dfinissez celles de votre choix :
Insrer Permet de choisir l'emplacement de la balise div et le nom de la balise s'il ne s'agit pas d'une nouvelle. Classe Affiche le style de classe actuellement appliqu la balise. Si vous avez associ une feuille de style, les classes qui
y sont dfinies s'affichent dans la liste. Ce menu permet de slectionner le style appliquer la balise.
ID Vous permet de modifier le nom utilis pour identifier la balise div. Si vous avez associ une feuille de style, les ID qui y sont dfinis s'affichent dans la liste. Les ID des blocs dj prsents dans votre document ne sont pas rpertoris.
Remarque : Dreamweaver vous avertit si vous tapez un ID dj affect une autre balise dans votre document.
Nouvelle rgle de CSS Ouvre la bote de dialogue Nouvelle rgle CSS.
4 Cliquez sur OK.
La balise div s'affiche dans votre document sous la forme d'une zone contenant du texte d'espace rserv. Lorsque vous dplacez le pointeur sur le bord de cette zone, Dreamweaver la met en surbrillance. Si la balise div est place de manire absolue, elle devient un lment PA. Vous pouvez modifier les balises div qui ne sont pas positionnement absolu.
Voir aussi
A propos des lments PA dans Dreamweaver la page 165 Cration d'une page avec une mise en forme CSS la page 159
Modification des balises div

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

Recherchez la surbrillance afin de voir les bordures.
Cliquez l'intrieur de la balise div et appuyez sur les touches Ctrl+A (Windows) ou Commande+A (Macintosh)
deux reprises.
Cliquez l'intrieur de la balise div, puis slectionnez-la partir du slecteur de balises figurant au bas de la fentre
du document.
2 Choisissez Fentre > Styles CSS pour afficher le panneau Styles CSS, si besoin est.
Les rgles appliques la balise div s'affichent dans le panneau.

3 Effectuez les modifications ncessaires.
Placement du point d'insertion dans une balise div afin d'y ajouter du contenu
Cliquez n'importe o l'intrieur des bordures de la balise.
Modification du texte de l'espace rserv dans une balise div

Slectionnez le texte, puis tapez un nouveau texte par-dessus ou appuyez sur la touche Suppr.
Remarque : Vous pouvez ajouter du contenu la balise div exactement comme vous le feriez dans une page.
Modification de la couleur de surbrillance des balises div

Lorsque vous faites passer le pointeur sur le pourtour d'une balise div en mode Cration, Dreamweaver met ses bordures en surbrillance. Vous pouvez activer ou dsactiver la surbrillance votre convenance ou en modifier la couleur de surbrillance dans la bote de dialogue Prfrences.
1 Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh). 2 Slectionnez la catgorie Surbrillance dans la liste de gauche. 3 Effectuez l'une des modifications suivantes, puis cliquez sur OK :
Pour modifier la couleur de surbrillance des balises div, cliquez dans la case de couleur Survol et slectionnez une
couleur de surbrillance l'aide du slecteur de couleur (ou tapez la valeur hexadcimale correspondant la couleur de surbrillance dans la zone de texte).
Pour activer ou dsactiver la surbrillance des balises div, activez ou dsactivez la case cocher Afficher de l'option
Survol. Remarque : Ces options ont un impact sur tous les objets (tableaux, par exemple) que Dreamweaver met en surbrillance lorsque vous y dplacez le pointeur.
version prliminaire
Blocs de mise en forme CSS

Visualisation des blocs de mise en forme CSS
Vous pouvez visualiser les blocs de mise en forme CSS pendant que vous travaillez en mode Cration. Un bloc de mise en forme CSS est un lment de page HTML que vous pouvez positionner n'importe o sur votre page. Un bloc de mise en forme CSS est plus prcisment soit une balise div sans display:inline, soit un autre lment de page qui inclut les dclarations CSS display:block, position:absolute ou position:relative. Les lments suivants, par exemple, sont considrs comme des blocs de mise en forme CSS dans Dreamweaver:
Une balise div Une image laquelle est affecte une position relative ou absolue Une balise a laquelle le style display:block est affect. Un paragraphe auquel une position relative ou absolue est affecte
Remarque : Pour des raisons de rendu visuel, les blocs de mise en forme CSS n'incluent pas d'lments en ligne (c'est-dire d'lments dont le code est dfini dans une ligne de texte) ni d'lments de blocs simples tels que des paragraphes. Dreamweaver fournit de nombreuses assistances visuelles pour afficher les blocs de mise en forme CSS. Vous pouvez par exemple activer des contours, des arrire-plans et le modle de bote pour les blocs de mise en forme CSS en mode Cration. Vous pouvez aussi afficher des info-bulles qui indiquent les proprits du bloc de mise en forme CSS slectionn lorsque vous placez le pointeur dessus. La liste suivante d'assistances visuelles de bloc de mise en forme CSS dcrit ce que Dreamweaver rend visible pour chacune d'elles :
Contours en feuille CSS Affiche les contours de tous les blocs de mise en forme CSS sur la page. Arrire-plans de mise en forme CSS Affiche les couleurs d'arrire-plan affectes temporairement de chaque bloc de mise en forme CSS et masque toutes les autres couleurs d'arrire-plan ou images qui apparaissent normalement sur la page.
Lorsque vous activez les assistances visuelles pour afficher les arrire-plans de blocs de mise en forme CSS, Dreamweaver affecte automatiquement une couleur d'arrire-plan distincte chaque bloc de mise en forme CSS. ((Dreamweaver slectionne les couleurs l'aide d'un processus algorithmique. Vous n'avez aucun moyen d'attribuer vous-mme les couleurs.) Les couleurs attribues sont visuellement diffrentes et sont conues pour vous aider distinguer les blocs de mise en forme CSS les uns des autres.
Modle de bote de mise en forme CSS Affiche le modle de bote (remplissages et marges) du bloc de mise en forme
CSS slectionn.
Affichage des blocs de mise en forme CSS

Vous pouvez activer ou dsactiver les assistances visuelles des blocs de calques CSS en fonction des besoins. Affichage des contours des blocs de mise en forme CSS Choisissez Affichage > Assistances visuelles > Contours en feuille CSS. Affichage des arrire-plans de blocs de mise en forme CSS
Choisissez Affichage > Assistances visuelles > Arrire-plans de mise en forme CSS.
Affichage des modles de bote de blocs de mise en forme CSS

Choisissez Affichage > Assistances visuelles > Modle de bote de mise en forme CSS.
version prliminaire
Pour accder aux options d'assistances visuelles des blocs de mise en forme CSS, vous pouvez aussi cliquer sur le bouton Assistances visuelles de la barre d'outils du document.
Utilisation des assistances visuelles avec des lments de blocs de mise en forme non-CSS
Vous pouvez utiliser une feuille de style la conception pour afficher les arrire-plans, les bordures ou le modle de bote d'lments qui ne sont pas normalement considrs comme des blocs de mise en forme CSS. Pour ce faire, vous devez d'abord crer une feuille de style la conception qui affecte l'attribut display:block l'lment de page appropri.
1 Crez une feuille de style en cascade (CSS) externe. Pour ce faire, choisissez Fichier > Nouveau, puis slectionnez
Page de base dans la colonne Catgorie et CSS dans la colonne Page de base. Cliquez ensuite sur Crer.
2 Dans la nouvelle feuille de style, crez des rgles qui affectent l'attribut display:block aux lments de page
afficher en tant que blocs de mise en forme CSS. Si, par exemple, vous souhaitez appliquer une couleur d'arrire-plan aux paragraphes ou aux lments de liste, vous pouvez crer une feuille de style comprenant les rgles suivantes :
p{ display:block; } li{ display:block; }
3 Enregistrez le fichier. 4 En mode Cration, ouvrez la page laquelle vous souhaitez associer les nouveaux styles. 5 Choisissez Format > Styles CSS > Conception. 6 Dans la bote de dialogue Feuilles de style la conception, cliquez sur le bouton plus (+) situ au-dessus de la zone de
texte Afficher la conception uniquement, slectionnez la feuille de style que vous venez de crer et cliquez sur OK.
7 Cliquez sur OK pour fermer la bote de dialogue Feuilles de style la conception.
La feuille de style est associe votre document. Si vous avez cr une feuille de style en suivant l'exemple prcdent, tous les paragraphes et lments de liste seront formats au moyen de l'attribut display:block. Vous pouvez ainsi activer ou dsactiver les assistances visuelles de bloc de mise en forme CSS pour les paragraphes et les lments de liste.
Voir aussi
Utilisation des feuilles de style la conception la page 153
Utilisation d'lments PA
A propos des lments PA dans Dreamweaver
Un lment PA (lment positionnement absolu) est un lment de page HTML (plus prcisment, une balise div ou toute autre balise) auquel une position absolue est attribue. Les lments PA peuvent comporter du texte, des images ou tout autre contenu placer au sein d'un document HTML. Dreamweaver vous permet d'effectuer la mise en forme d'une page l'aide d'lments PA. Vous pouvez placer les lments PA devant ou derrire d'autres lments PA, masquer certains d'entre eux et en montrer d'autres ou encore dplacer les lments PA travers l'cran. Vous pouvez placer une image d'arrire-plan dans un lment PA, puis placer un deuxime lment PA contenant du texte avec un arrire-plan transparent devant ce dernier.
version prliminaire
Les lments PA sont gnralement des balises div PA. (Ce sont les types d'lments PA que Dreamweaver insre par dfaut.) Mais n'oubliez pas que vous pouvez classifier tout lment HTML (par exemple, une image) en tant qu'lment PA en lui affectant une position absolue. Tous les lments PA (et pas uniquement les balises div PA) s'affichent dans le panneau Elments PA.
Code HTML pour lments Div PA

Dreamweaver cre des lments PA en utilisant la balise div. Lorsque vous crez un lment PA l'aide de l'outil Tracer un div pour un lment PA, Dreamweaver insre une balise div dans le document et attribue la balise div une valeur ID (DivAP1 par dfaut au premier div que vous tracez, DivAP2, au deuxime div que vous tracez, etc.). Vous pouvez renommer la div PA votre guise par la suite au moyen du panneau Elments PA ou de l'inspecteur Proprits. Dreamweaver utilise galement des styles CSS intgrs dans la section head du document pour positionner la balise div PA et pour lui affecter ses dimensions exactes. Ce qui suit est un chantillon de code HTML pour une div PA :
<head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Sample AP Div Page</title> <style type="text/css"> <!-#apDiv1 { position:absolute; left:62px; top:67px; width:421px; height:188px; z-index:1; } --> </style> </head> <body> <div id="apDiv1"> </div> </body> </html>
Vous pouvez dfinir les proprits des balises div PA (ou tout lment PA) de votre page, y compris les coordonnes x et y, l'index z (galement appel ordre de superposition) et la visibilit.
Insertion d'une balise div PA

Dreamweaver vous permet de crer facilement des balises div PA sur votre page et de les positionner. Vous pouvez galement crer des balises div PA imbriques. Lorsque vous insrez une div PA, Dreamweaver affiche par dfaut sa bordure en mode Cration et met le bloc en surbrillance lorsque vous passez le pointeur dessus. Vous pouvez dsactiver l'assistance visuelle qui affiche les contours des divs PA (ou de tout lment PA) en dsactivant Contours des lments PA et Contours en feuille CSS dans le menu Affichage > Assistances visuelles. Vous pouvez galement activer les arrire-plans et le modle de bote pour les lments PA en guise d'aide visuelle lors de la conception. Une fois une balise div PA cre, vous pouvez y ajouter du contenu en plaant simplement votre point d'insertion dessus, puis en ajoutant le contenu comme vous le feriez pour celui d'une page.
version prliminaire
Voir aussi
Slection d'lments PA la page 172 Modification de la couleur de surbrillance des balises div la page 163 Visualisation des blocs de mise en forme CSS la page 164 Traage d'une seule balise div PA ou de plusieurs balises div PA la suite 1 Dans la catgorie Mise en forme du panneau Insertion, cliquez sur le bouton Tracer un div pour un lment PA
2 Dans la fentre de cration du document, procdez de l'une des manires suivantes :
Faites glisser le pointeur pour dessiner une seule div PA. Maintenez la touche Ctrl (Windows) ou Commande (Macintosh) enfonce pour dessiner plusieurs divs PA la
suite. Vous pouvez continuer tracer des divs PA tant que vous n'avez pas relch les touches Ctrl ou Commande. Insertion d'une div PA un endroit prcis du document
Placez le point d'insertion dans la fentre de document, puis choisissez Insertion > Objets mise en forme > Div PA.
Remarque : La balise associe la div PA est place l'emplacement sur lequel vous avez cliqu dans la fentre de document. Le rendu visuel de la balise div PA est donc susceptible d'affecter les autres lments de page (le texte par exemple) qui l'entourent. Placement du point d'insertion dans une div PA
Cliquez n'importe o l'intrieur des bordures de la balise div PA.
Le contour de la div PA est en surbrillance et la poigne de slection apparat, mais la balise elle-mme n'est pas slectionne. Affichage des bordures d'une div PA Choisissez Affichage > Assistances visuelles, puis slectionnez Contours des divs PA ou Contours en feuille CSS. Remarque : La slection simultane des deux options a le mme effet. Masquage des bordures d'une div PA
Choisissez Affichage > Assistances visuelles, puis dslectionnez Contours des divs PA et Contours en feuille CSS.
Utilisation de divs PA imbriques

Une div PA imbrique est une balise div PA dont le code est contenu l'intrieur des balises d'une autre div PA. Par exemple, le code suivant montre deux div PA qui ne sont pas imbriques, et deux divs PA qui le sont :
<div id="apDiv1"></div> <div id="apDiv2"></div> <div id="apDiv3"> <div id="apDiv4"></div> </div>
version prliminaire
La reprsentation graphique de ces deux groupes de balises div PA pourrait ressembler ce qui suit :
Dans le premier groupe de balises div, une div se trouve au dessus de l'autre dans la page. Dans le deuxime groupe, la balise div apDiv4 se trouve effectivement l'intrieur de la balise div apDiv3. (Vous pouvez modifier l'ordre de superposition des divs PA dans le panneau Elments PA.) L'imbrication est souvent utilise pour regrouper des balises div PA. Une balise div PA imbrique se dplace avec sa div PA parent et peut tre configure pour hriter de la visibilit de son parent. Vous pouvez activer l'option Imbrication si vous voulez que les divs PA que vous dessinez l'intrieur d'autres div PA soient automatiquement imbriques. Pour crer une div PA l'intrieur ou par dessus une autre div PA, vous devez aussi dslectionner l'option Empcher les chevauchements. Dessin d'une div PA imbrique 1 Assurez-vous que l'option Empcher les chevauchements est dslectionne dans le panneau Elments PA (Fentre > Elments PA).
2 Dans la catgorie Mise en forme du panneau Insertion, cliquez sur le bouton Tracer un div pour un lment PA
3 Dans la fentre de cration du document, dessinez une balise div PA l'intrieur d'une div PA existante en faisant
glisser la souris. Si l'option Imbrication est dsactive dans les prfrences des lments PA, maintenez la touche Alt (Windows) ou Option (Macintosh) enfonce et faites glisser une div PA pour l'imbriquer dans une div PA existante. Les divs PA imbriques peuvent s'afficher diffremment suivant les navigateurs. Lorsque vous crez des divs PA imbriques, contrlez rgulirement leur affichage dans diffrents navigateurs au cours du processus de cration. Insertion d'une div PA imbrique 1 Assurez-vous que l'option Empcher les chevauchements est dslectionne.
2 Placez le point d'insertion l'intrieur d'une div PA existante dans la fentre de cration du document, puis
choisissez Insertion > Objets mise en forme > Div PA. Imbrication d'un lment PA existant dans un autre l'aide du panneau Elments PA
1 Slectionnez Fentre > Elments PA pour ouvrir le panneau Elments PA. 2 Slectionnez un lment PA dans le panneau Elments PA, puis maintenez la touche Ctrl (Windows) ou
Commande (Macintosh) enfonce tout en faisant glisser la souris pour diriger l'lment PA vers l'lment PA cible, dans le panneau Elments PA.
3 Relchez le bouton de la souris lorsque le nom de l'lment PA cible est mis en surbrillance.
version prliminaire
Imbrication des balises div PA automatiquement lorsque vous dessinez une div PA l'intrieur d'une autre div PA Slectionnez l'option Imbrication dans les prfrences des lments PA.
Affichage ou dfinition des prfrences des lments PA

Utilisez la catgorie Elments PA dans la bote de dialogue Prfrences pour indiquer les paramtres par dfaut des nouveaux lments PA crs.
1 Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh). 2 Slectionnez la catgorie Elments PA dans la liste gauche, slectionnez des lments PA et dfinissez les
prfrences suivantes, puis cliquez sur OK.

Visibilit Dtermine si les lments PA sont visibles par dfaut. Les options sont par dfaut, hriter, visible et masqu. Largeur et Hauteur Indiquez une largeur et une hauteur par dfaut (en pixels) pour les lments PA que vous crez
l'aide du menu Insertion > Objets mise en forme > Div PA.
Couleur d'arrire-plan Spcifie une couleur darrire-plan par dfaut. Slectionnez une couleur l'aide du slecteur de
couleur.
Image darrire-plan Spcifie une image darrire-plan par dfaut. Cliquez sur Parcourir pour trouver le fichier de
l'image sur votre ordinateur.

Imbrication: Imbriquer en cas de cration dans une div PA Indique si une div PA que vous dessinez partir d'un point situ dans les limites d'une div PA existante doit tre une div PA imbrique. Maintenez la touche Alt (Windows) ou Option (Macintosh) enfonce pour modifier temporairement ce paramtre lorsque vous dessinez une div PA.
Affichage ou dfinition des proprits pour un seul lment PA

Lorsque vous slectionnez un lment PA, l'inspecteur Proprits affiche les proprits de cet lment.
1 Slectionnez un lment PA. 2 Dans l'inspecteur Proprits (Fentre > Proprits), cliquez sur la flche d'agrandissement situe dans le coin
infrieur droit (si l'inspecteur est affich en mode rduit) pour visualiser l'ensemble des proprits.
3 Parmi les options suivantes, dfinissez celles de votre choix :

Elment CSS-P Spcifie un identificateur pour l'lment PA slectionn. Cet ID identifie l'lment PA dans le panneau
Elments PA et dans le code JavaScript. Seuls les caractres alphanumriques sont accepts ; n'utilisez aucun caractre spcial comme les espaces, les traits d'union, les barres obliques ou les points. Chaque lment PA doit avoir un ID unique. Remarque : L'inspecteur Proprits CSS-P prsente les mmes options pour les lments positionnement relatif.
G et S (gauche et haut) Indiquez la position du coin suprieur gauche de l'lment PA par rapport au coin suprieur gauche de la page, ou de l'lment PA parent s'il est imbriqu. L et H Indiquez la largeur et la hauteur de l'lment PA.
version prliminaire
Remarque : Si le contenu d'un lment PA dpasse la taille indique, le bord infrieur de cet lment PA (tel qu'il apparat en mode Cration dans Dreamweaver) s'tire proportionnellement. (Le bord infrieur ne s'tend pas lorsque l'lment PA apparat dans un navigateur, sauf si la proprit Dbordement est dfinie sur Visible). L'unit par dfaut de la position et de la taille est le pixel (px). Vous pouvez galement choisir les units suivantes : pc (picas), pt (points), in (pouces), mm (millimtres), cm (centimtres) ou% (pourcentage de la valeur quivalente de l'lment PA parent). Les abrviations doivent suivre la valeur sans espace : par exemple, 3mm.
Index Z Dtermine l'index z ou ordre de superposition, de l'lment PA.
Dans un navigateur, les lments PA portant les valeurs les plus leves se superposent aux lments PA portant les valeurs moins leves. Les valeurs peuvent tre positives ou ngatives. Il est plus facile de modifier l'ordre de superposition des lments PA l'aide du panneau Elments PA qu'en saisissant des valeurs d'index z spcifiques.
Vis Indique si l'lment PA est initialement visible ou non. Faites votre choix parmi les options suivantes :
Aucune proprit de visibilit n'est dfinie par dfaut. Lorsque aucune visibilit n'est prcise, la plupart des
navigateurs choisissent Hriter.
L'option Hriter utilise la proprit de visibilit de l'objet parent de l'lment PA. Visible affiche le contenu de l'lment PA, quelle que soit la valeur du parent. Masqu dissimule le contenu de l'lment PA, quelle que soit la valeur du parent.
Utilisez un langage de script, par exemple JavaScript, pour contrler la proprit de visibilit et afficher le contenu des lments PA de faon dynamique.
Image ar-pl Spcifie une image d'arrire-plan pour l'lment PA.
Cliquez sur l'icne du dossier parcourir et slectionnez un fichier d'image.

Couleur d'ar-pl. Spcifie une couleur d'arrire-plan pour l'lment PA.
Laissez cette option vide pour spcifier un arrire-plan transparent.

Classe Indique la classe CSS utilise pour crer l'lment PA. Dbordement Contrle la manire dont les lments PA apparaissent dans un navigateur lorsque le contenu dpasse la taille spcifie de l'lment PA.
Visible indique que le contenu supplmentaire apparatra dans l'lment PA ; en fait, l'lment PA s'agrandit proportionnellement. Masqu signifie que le contenu supplmentaire ne sera pas affich dans le navigateur. Dfilement indique que le navigateur devra ajouter des barres de dfilement dans l'lment PA, qu'elles soient ncessaires ou non. Auto entrane l'affichage des barres de dfilement de l'lment PA dans le navigateur uniquement lorsque cela est ncessaire (c'est--dire lorsque le contenu de l'lment PA dpasse ses limites). Remarque : La prise en charge de l'option Dbordement est ingale suivant les navigateurs.
Dtourage Dfinit la zone visible de l'lment PA.
Indiquez les coordonnes gauche, haut, droite et bas pour dfinir un rectangle dans le champ des coordonnes de l'lment PA (en partant du coin suprieur gauche de l'lment PA). L'lment PA est dtour afin que seul le rectangle spcifi soit visible. Par exemple, pour rendre le contenu d'un lment PA invisible l'exception d'un rectangle visible d'une largeur de 50 pixels et d'une hauteur de 75 pixels dans le coin suprieur gauche de l'lment PA, dfinissez G sur 0, S sur 0, D sur 50 et B sur 75. Remarque : Bien que les feuilles de style en cascade utilisent des termes diffrents pour le dtourage, Dreamweaver interprte le dtourage de la mme manire que la plupart des navigateurs.
version prliminaire
4 Si vous avez tap une valeur dans une zone de texte, appuyez sur Tab ou Entre (Windows) ou Retour (Macintosh)
pour l'appliquer.
Affichage ou dfinition des proprits pour plusieurs lments PA

Lorsque vous slectionnez plusieurs lments PA, l'inspecteur Proprits affiche les proprits du texte et un sousensemble de proprits d'lment PA standard, ce qui vous permet de modifier plusieurs lments PA simultanment. Slection de plusieurs lments PA Slectionnez les lments PA tout en maintenant la touche Maj enfonce. Affichage et dfinition des proprits pour plusieurs lments PA 1 Slectionnez plusieurs lments PA.
2 Dans l'inspecteur Proprits (Fentre > Proprits), cliquez sur la flche d'agrandissement situe dans le coin
infrieur droit (si l'inspecteur est affich en mode rduit) pour visualiser l'ensemble des proprits.
3 Dfinissez les proprits suivantes pour plusieurs lments PA :

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

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

Si la poigne n'est pas visible, cliquez n'importe o dans l'lment PA pour la faire apparatre.
Cliquez sur une bordure d'un lment PA. Cliquez l'intrieur d'un lment PA en appuyant sur les touches Ctrl et Maj (Windows) ou Commande et Maj
(Macintosh).
Pour slectionner le contenu d'un lment PA, cliquez l'intrieur de celui-ci et appuyez sur les touches Ctrl+A
(Windows) ou Commande+A (Macintosh). Appuyez nouveau sur Ctrl+A ou Commande+A pour slectionner l'lment PA.
Cliquez l'intrieur d'un lment PA et slectionnez sa balise dans le slecteur de balises.

Slection de plusieurs lments PA
Effectuez lune des tches suivantes :
Dans le panneau Elments PA (Fentre > Elments PA), appuyez sur la touche Maj tout en cliquant sur le nom de
deux lments PA ou plus.
Dans la fentre de document, appuyez sur la touche Maj tout en cliquant l'intrieur d'un ou de plusieurs lments
PA ou sur leur bordure.
version prliminaire
Modification de l'ordre de superposition des lments PA

Utilisez l'inspecteur Proprits ou le panneau Elments PA pour modifier l'ordre de superposition des lments PA. L'lment PA situ en haut de la liste du panneau Calques Elments PA se trouve au premier rang de l'ordre de superposition et apparat avant les autres lments PA. En code HTML, l'ordre de superposition, ou index z, des lments PA dtermine l'ordre dans lequel ils sont dessins dans un navigateur. Plus l'index z d'un lment PA est lev, et plus sa position dans l'ordre de superposition est leve. Vous pouvez modifier l'index z de chaque lment PA l'aide du panneau Elments PA ou de l'inspecteur Proprits. Modification de l'ordre de superposition des lments PA l'aide du panneau Elments PA 1 Slectionnez Fentre > Elments PA pour ouvrir le panneau Elments PA.
2 Faites glisser un lment PA l'emplacement dsir dans la hirarchie de l'ordre de superposition.
Une ligne indiquant le futur emplacement de l'lment PA apparat tandis que vous dplacez l'lment PA. Relchez le bouton de la souris lorsque la ligne apparat l'emplacement souhait dans l'ordre de superposition. Modification de l'ordre de superposition des lments PA l'aide de l'inspecteur Proprits
1 Choisissez Fentre > Elments PA pour ouvrir le panneau Elments PA et visualiser l'ordre de superposition en
cours.
2 Slectionnez un lment PA dans le panneau Elments PA ou dans la fentre de document. 3 Dans l'inspecteur Proprits (Fentre > Proprits), tapez un nombre dans la zone de texte Index Z.
Tapez une valeur suprieure afin de dplacer l'lment PA vers le haut dans l'ordre de superposition. Tapez une valeur infrieure afin de dplacer l'lment PA vers le bas dans l'ordre de superposition.
Affichage et masquage des lments PA

Lorsque vous travaillez sur votre document, vous pouvez afficher ou masquer les lments PA manuellement, l'aide du panneau Elments PA, pour voir comment la page apparatra dans diffrentes situations. Remarque : L'lment PA actuellement slectionn devient toujours visible et apparat devant les autres lments PA. Modification de la visibilit d'un lment PA 1 Slectionnez Fentre > Elments PA pour ouvrir le panneau Elments PA.
2 Cliquez dans la colonne de l'icne en forme d'oeil pour changer la visibilit d'un lment PA.
Un oeil ouvert signifie que l'lment PA est visible. Un oeil ferm signifie que l'lment PA est invisible. Si l'icne de l'oeil n'apparat pas, l'lment PA hrite de la visibilit de son parent (lorsque les lments PA ne sont
pas imbriqus, le parent correspond au corps du document, qui est toujours visible). Aucune icne en forme d'oeil ne s'affiche lorsque la visibilit n'est pas indique (apparat dans l'inspecteur Proprits comme Visibilit par dfaut). Modification de la visibilit de tous les lments PA la fois
Dans le panneau Elments PA (Fentre > Calques), cliquez sur l'icne en forme d'il en haut de la colonne.
Remarque : Cette procdure permet de dfinir la visibilit ou la non-visibilit de tous les lments PA, mais elle ne leur permet pas d'hriter.
version prliminaire
Redimensionnement des lments PA

Vous pouvez redimensionner un seul ou plusieurs lments PA la fois pour qu'ils aient tous la mme largeur et la mme hauteur. Si l'option Empcher le chevauchement est active, vous ne pourrez pas redimensionner un lment PA s'il doit pour cela en chevaucher un autre.
Voir aussi
Utilisation de la grille de mise en forme la page 180 Redimensionnement d'un lment PA 1 En mode Cration, slectionnez un lment PA.
2 Pour redimensionner l'lment PA, procdez de l'une des manires suivantes :
Pour redimensionner l'lment PA en le faisant glisser, faites glisser l'une de ses poignes. Pour redimensionner l'lment PA par incrments d'un pixel, maintenez la touche Ctrl (Windows) ou Option
(Macintosh) enfonce tout en utilisant les touches flches. Les flches dplacent les bords droit et infrieur de l'lment PA ; cette technique ne permet pas de redimensionner l'lment PA en utilisant les bords suprieur et gauche.
Pour redimensionner en alignant sur la grille, appuyez sur Maj-Ctrl-flche (Windows) ou Maj-Option-flche
(Macintosh).
Dans l'inspecteur Proprits (Fentre > Proprits), tapez les valeurs de largeur (L) et de hauteur (H).
Le redimensionnement d'un lment PA en modifie la largeur et la hauteur. Cette action ne dfinit pas la partie visible du contenu de l'lment PA. Vous pouvez dfinir la zone visible d'un lment PA dans les prfrences. Redimensionnement de plusieurs lments PA la fois
1 En mode Cration, slectionnez au moins deux lments PA. 2 Effectuez lune des tches suivantes :
Choisissez Modifier > Rorganiser > Mme largeur ou Modifier > Rorganiser > Mme hauteur.
Les premiers lments PA slectionns prendront la largeur ou la hauteur du dernier slectionn.
Dans l'inspecteur Proprits (Fentre > Proprits), sous Plusieurs lments CSS-P, tapez les valeurs de largeur et
de hauteur. Ces valeurs sont appliques tous les lments PA slectionns.
Dplacement des lments PA

Vous pouvez dplacer les lments PA en mode Cration de la mme manire que les objets dans la plupart des applications graphiques de base. Si l'option Empcher le chevauchement est active, vous ne pourrez pas dplacer un lment PA s'il doit pour cela en chevaucher un autre.
1 En mode Cration, slectionnez un ou plusieurs lments PA. 2 Effectuez lune des tches suivantes :
Pour dplacer des lments PA en les faisant glisser, slectionnez-les et faites glisser la poigne de slection du
dernier lment PA slectionn (en surbrillance noire).
version prliminaire
Pour dplacer l'image par incrments d'un pixel, utilisez les touches flches.
Maintenez la touche Maj enfonce tout en appuyant sur les touches flches pour dplacer l'lment PA par incrments de la grille.
Voir aussi
Utilisation de la grille de mise en forme la page 180
Alignement des lments PA

Utilisez les commandes d'alignement pour aligner un ou plusieurs lments PA sur l'un des bords du dernier lment PA slectionn. Lors de l'alignement, les lments PA enfants qui ne sont pas slectionns seront dplacs en mme temps que leur parent, si celui-ci est slectionn et dplac. Pour viter ce dplacement, n'utilisez pas d'lments PA imbriqus.
1 En mode Cration, slectionnez un lment PA. 2 Choisissez Modifier > Rorganiser, puis slectionnez une option d'alignement.
Par exemple, si vous slectionnez Haut, tous les lments PA se dplacent de faon telle que leurs bordures suprieures sont au mme niveau que celle du dernier lment PA slectionn (en surbrillance noire).
Conversion des lments PA en tableau

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

Crez votre mise en forme l'aide d'lments PA, puis convertissez les lments PA en tableaux afin que votre mise en forme puisse s'afficher dans les navigateurs les moins rcents. Avant de convertir vos lments PA en tableaux, assurez-vous qu'ils ne se chevauchent pas. Veillez en outre bien tre en mode Standard (Affichage > Mode Tableau > Mode Standard). Conversion des lments PA en tableau 1 Slectionnez Modifier > Convertir > Divs PA en tableau.
version prliminaire
2 Parmi les options suivantes, dfinissez celles de votre choix et cliquez sur OK :
La plus prcise Cre une cellule de tableau pour chaque lment PA et ajoute les cellules ncessaires pour prserver
l'espace entre les lments PA.

La plus petite : Rduit les cellules vides. Indique que les bords des lments PA doivent tre aligns s'ils sont
positionns dans la limite du nombre de pixels dfini. Si vous choisissez cette option, le tableau que vous obtiendrez aura moins de lignes et de colonnes vides, mais ne correspondra pas ncessairement exactement votre mise en forme.
Utiliser les GIF transparents Remplit la dernire ligne du tableau d'images GIF transparentes. Slectionner cette option
permet d'tre sr que le tableau s'affichera avec les mmes largeurs de colonne dans tous les navigateurs. Lorsque cette option est active, vous ne pouvez pas modifier le tableau obtenu en faisant glisser ses colonnes. Lorsque cette option est dsactive, le tableau obtenu ne contient pas les GIF transparents, mais les largeurs des colonnes peuvent varier suivant le navigateur.
Centrer dans la page Centre le tableau obtenu dans la page. Si cette option est dsactive, le tableau commence sur le
bord gauche de la page. Conversion des tableaux en divs PA 1 Slectionnez Modifier > Convertir > Tableaux en divs PA.
2 Parmi les options suivantes, dfinissez celles de votre choix et cliquez sur OK :
Empcher le chevauchement des lments PA Limite la position des lments PA lorsqu'ils sont crs, dplacs et
redimensionns, afin d'viter tout chevauchement.

Afficher le panneau Elments PA Affiche le panneau Elments PA. Afficher la grille et Aligner sur la grille Vous permettent d'utiliser une grille pour faciliter le positionnement des
lments PA. Les tableaux sont convertis en divs PA. Les cellules vides ne sont pas converties en lments PA, sauf si elles possdent une couleur d'arrire-plan. Remarque : Les lments de la page qui se trouvaient en dehors des tableaux sont galement placs dans les balises div PA.
Empchement du chevauchement des lments PA

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

Adobe Dreamweaver CS5 inclut des outils de mise en forme qui vous permettent de crer des pages Web l'aide de tableaux ou de cadres HTML. L'application propose galement des rgles, des repres et une grille qui vous permettent d'effectuer des mises en page et de positionner des lments de faon prcise.
Utilisation d'assistances visuelles pour la mise en forme

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
fentre de document en mode Cration, sur un point de la page. , situe dans le coin suprieur gauche de la
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.
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.
version prliminaire
Mise en forme des pages avec HTML
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.
Afficher et dplacer 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.
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.
version prliminaire
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.
Voir aussi
Alignement des lments PA la page 175 Dplacement des lments PA la page 174
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.
Voir aussi
Alignement des lments PA la page 175 Dplacement des lments PA la page 174
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.
version prliminaire
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 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.
version prliminaire
Prsentation de contenu l'aide de tableaux

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 chaque colonne du tableau lorsque le tableau est slectionn ou que le point d'insertion se trouve dedans. 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 s'affichent pour cette colonne : 200 (la largeur spcifie dans le code) et (250) entre parenthses (la largeur visuelle de la colonne telle qu'elle apparat l'cran). Remarque : Vous avez aussi la possibilit de mettre vos pages en forme l'aide du positionnement par feuilles de style en cascade CSS.
Voir aussi
Mise en forme des pages avec CSS la page 155
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. L'ordre de priorit pour le formatage de tableau est le suivant :
1 Cellules 2 Lignes 3 Tableau
Par exemple, si vous dfinissez une couleur bleue pour l'arrire-plan d'une cellule, puis la couleur jaune pour celui du tableau, la couleur de la cellule bleue ne changera pas, puisque la proprit de formatage de cellule a la priorit sur la proprit de formatage du tableau. Remarque : Lorsque vous dfinissez les proprits d'une colonne, Dreamweaver modifie les attributs de la balise td correspondant chaque cellule de la colonne.
version prliminaire
A propos du fractionnement et de la fusion de cellules de tableau

Vous pouvez fusionner n'importe quel nombre de cellules adjacentes (tant que la 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 restructure automatiquement le tableau (en ajoutant les attributs colspan ou rowspan ncessaires) pour obtenir l'agencement spcifi. Dans l'exemple ci-dessous, les cellules au milieu des deux premires lignes ont t fusionnes en une seule cellule qui s'tend sur deux lignes.
Insertion d'un 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 : La fonction 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 d'informations sur le mode Mise en forme et la raison pour laquelle il a t rendu obsolte, consultez le Blog de l'quipe 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.
Choisissez Insertion > Tableau. Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Tableau.
2 Dfinissez les attributs dans la bote de dialogue Tableau et 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 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 d'un tableau.
Lorsque vous n'affectez pas explicitement de valeur pour la largeur de la bordure, l'espacement entre les cellules et la marge 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 qui spare la bordure d'une cellule et son contenu. Aucun N'autorise pas les en-ttes de colonne ou de ligne pour le tableau. Gauche Transforme la premire colonne du tableau en colonne d'en-ttes pour vous permettre d'entrer un en-tte pour ligne du tableau.
version prliminaire
Haut Transforme la premire ligne du tableau en ligne d'en-ttes pour vous permettre d'entrer un en-tte pour chaque
colonne du tableau.
Les deux Vous permet d'entrer 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 Fournit un titre de tableau qui s'affiche en dehors du tableau. Aligner la lgende Indique o la lgende du tableau apparat 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.
Voir aussi
Ajout et formatage de texte la page 225 Ajout et modification d'images la page 242
Importation et exportation de donnes tabulaires

Vous pouvez importer des donnes tabulaires cres dans une autre application (par exemple, Microsoft Excel) et enregistres dans un format texte dlimit (lments spars par des tabulations, virgules, deux-points, points-virgules ou autres dlimiteurs) dans Dreamweaver et les mettre en forme dans un tableau. Vous pouvez galement exporter les donnes d'un tableau depuis Dreamweaver vers un fichier texte, avec le contenu de cellules contigus 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 qu'une partie des donnes d'un 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) avant d'exporter le nouveau tableau.
Importation de donnes tabulaires

Choisissez Fichier > Importer > Donnes tabulaires. Dans la catgorie Donnes du panneau Insertion, cliquez sur l'icne Importer les donnes tabulaires Choisissez Insertion > Objets du 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.
version prliminaire
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 qu'elle
contient.
Slectionnez Fixe pour spcifier une largeur de tableau fixe, en pixels ou en pourcentage de la largeur de fentre du
navigateur.
Bordure Indique la largeur, en pixels, des bordures du tableau. Marge intrieure des cellules Dtermine l'espace (en pixels) entre le contenu d'une cellule et son contour. Espacement des cellules Dtermine le nombre de pixels sparant les cellules contigus d'un tableau.
Lorsque vous n'affectez pas explicitement de valeur pour 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 contours des cellules et du tableau lorsque la bordure est dfinie sur 0, slectionnez Affichage > Assistances visuelles > Bordures de tableau.
Formatage ligne suprieure Dtermine le formatage appliqu, le cas chant, la ligne suprieure du tableau. Choisissez parmi quatre options de formatage : pas de formatage, gras, italique ou gras italique.
Exportation d'un tableau

1 Placez le point d'insertion dans l'une des cellules du tableau. 2 Choisissez Fichier > Exporter > Tableau. 3 Dfinissez les options suivantes :
Dlimiteur Indique quel caractre dlimiteur doit tre utilis pour sparer des 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.
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 dplacez le pointeur sur un tableau, une ligne, une colonne ou une cellule, Dreamweaver met toutes les cellules de cette slection 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.
version prliminaire
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 l'icne de grille du tableau pour vous indiquer que vous pouvez slectionner le tableau (sauf si vous cliquez sur la bordure d'une ligne ou d'une colonne).
Cliquez dans une cellule du tableau, puis slectionnez la balise <table> dans le slecteur de balises 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.
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.
Slectionner 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 (Macintosh) enfonce. Cliquez dans la cellule, puis choisissez Edition > Slectionner tout.
Lorsqu'une cellule est dj slectionne, choisissez Edition > Slectionner tout nouveau pour slectionner tout le tableau.
version prliminaire
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. Tout en appuyant sur la touche Ctrl (Windows) ou Commande (Macintosh), cliquez sur la
mme cellule, puis cliquez dans une autre cellule en maintenant la touche Maj enfonce. Toutes les cellules se trouvant l'intrieur de la zone rectangulaire ou linaire ainsi dlimite par les deux cellules sont slectionnes.
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 d'un tableau

1 Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh). 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 slection d'lments du tableau, activez ou dsactivez l'option Afficher de l'option
Survol. Remarque : Ces options s'appliquent tous les objets, tels que les lments positionnement absolu (PA), que Dreamweaver met en surbrillance lorsque vous faites passer le pointeur dessus.
Dfinition des proprits des tableaux

Vous pouvez utiliser l'inspecteur 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 Un identificateur du tableau. Lignes et colonnes Le nombre de lignes et de colonnes dans le tableau. L La largeur du tableau, en pixels ou en pourcentage de la largeur de fentre du navigateur.
Remarque : Il est rarement utile de dfinir la hauteur d'un tableau.

Remplissage Dtermine l'espace (en pixels) entre le contenu d'une cellule et son contour. Espac. de cellule Dtermine le nombre de pixels sparant les cellules contigus d'un tableau.
version prliminaire
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 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 contours des cellules et du tableau lorsque la bordure est dfinie sur 0, slectionnez Affichage > Assistances visuelles > Bordures de tableau.
Classe Applique une classe CSS au tableau.
Remarque : Il peut tre ncessaire de dvelopper l'inspecteur Proprits du tableau pour afficher les options suivantes. Pour dvelopper l'inspecteur Proprits du tableau, cliquez sur la flche de dveloppement dans son coin infrieur droit.
Effacer largeurs de colonne et Effacer hauteurs de ligne suppriment toutes les valeurs de hauteur de ligne ou de largeur de colonne du tableau explicitement spcifies. Convertir largeurs de tableau en pixels et Convertir les hauteurs de tableau en pixels dfinissent la largeur ou la hauteur de chaque colonne du tableau sur sa largeur en pixels (dfinit galement la largeur du tableau sur sa largeur en pixels). Convertir largeurs de tableau en pourcentage et Convertir les hauteurs de tableau en pourcentages dfinissent la
largeur ou la hauteur de chaque colonne du tableau sur sa largeur exprime en pourcentage de la largeur de la fentre de document (dfinit galement la largeur du tableau sur sa largeur en pourcentage de la largeur de la fentre de document). Si vous avez tap une valeur dans une zone de texte, appuyez sur Tab ou Entre (Windows) ou Retour (Macintosh) pour l'appliquer.
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).
Vert. Indique l'alignement vertical du contenu d'une cellule, d'une ligne ou d'une colonne. Vous pouvez aligner le contenu de la cellule sur le haut, le centre ou le bas des cellules, sur la ligne de base ou encore indiquer au navigateur d'utiliser l'alignement par 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
version prliminaire
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 s'affiche pas au pourcentage de hauteur spcifi dans les navigateurs.
Ar-pl La couleur d'arrire-plan d'une cellule, d'une colonne ou d'une ligne, choisie l'aide 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 ou la hauteur par des pixels ou des pourcentages. Vous pouvez convertir les pixels en pourcentages et inversement. Remarque : Lorsque vous dfinissez les proprits d'une colonne, Dreamweaver modifie les attributs de la balise td correspondant chaque cellule de la colonne. Lorsque vous dfinissez certaines proprits d'une ligne, Dreamweaver modifie les attributs de la balise tr plutt que de modifier les attributs de chaque balise td dans la ligne. Lorsque vous appliquez le mme format toutes les cellules d'une ligne, en appliquant le format la balise tr, vous obtenez un code HTML plus net et plus concis.
3 Appuyez sur Tab ou Entre (Windows) ou Retour (Macintosh) pour appliquer la valeur.
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 de manire prcise. Par exemple, vous pouvez dvelopper un tableau pour placer le point d'insertion gauche ou droite d'une image, sans slectionner l'image ou la cellule du tableau par inadvertance.
A. Tableau en mode Standard B. Tableau en mode Tableaux dvelopps
version prliminaire
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 Dvelopp.
Une barre tiquete Mode Tableaux dvelopps s'affiche en haut de la fentre de document. Dreamweaver ajoute une marge intrieure des cellules et de l'espacement entre les cellules tous les tableaux de la page et augmente l'paisseur des bordures des tableaux.
Sortie du mode Tableaux dvelopps

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

Vous pouvez modifier l'aspect des tableaux en 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 formater le texte dans une cellule de tableau, suivez la mme procdure que pour formater du texte en dehors d'un tableau.
Voir aussi
Ajout et formatage de texte la page 225
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. 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 d'une colonne, Dreamweaver modifie les attributs de la balise td correspondant chaque cellule de la colonne. Lorsque vous dfinissez certaines proprits d'une ligne, Dreamweaver modifie les attributs de la balise tr plutt que de modifier les attributs de chaque balise td dans la ligne. Lorsque vous appliquez le mme format toutes les cellules d'une ligne, en appliquant le format la balise tr, vous obtenez un code HTML plus net et plus concis.
version prliminaire
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 le tableau, cliquez du bouton droit de la souris (Windows) ou en
maintenant la touche Ctrl enfonce (Macintosh), puis choisissez Modifier le code de la balise.
Redimensionnement des tableaux, des colonnes et des lignes

Redimensionnement des tableaux Vous pouvez redimensionner tout un tableau ou seulement certaines cellules ou certaines colonnes individuelles. Lorsque vous redimensionnez tout un tableau, toutes ses cellules changent de taille en proportion. Si les cellules d'un tableau ont une largeur ou une hauteur 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 l'une de ses poignes de slection. Dreamweaver affiche la largeur du tableau, ainsi qu'un menu des en-ttes de tableau, en haut ou en bas du tableau lorsque le tableau est slectionn ou que le point d'insertion se trouve dedans. 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. Dreamweaver affiche les largeurs de colonne et de tableau ainsi que les menus d'en-ttes pour vous aider mettre les tableaux en forme. Vous pouvez activer ou dsactiver ces informations votre convenance. Redimensionnement des colonnes et des lignes Vous pouvez modifier la largeur d'une colonne ou la hauteur d'une ligne dans l'inspecteur 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 l'aide du mode Code. Dreamweaver affiche la largeur des colonnes, ainsi que les menus des en-ttes de colonne, en haut ou en bas des colonnes lorsque le tableau est slectionn ou que le point d'insertion se trouve dedans. Vous pouvez activer ou dsactiver les menus d'en-ttes de colonne votre convenance.
Voir aussi
Utilisation de code de page la page 302
version prliminaire
Redimensionnement de tableaux, de colonnes et de lignes

Redimensionnement d'un tableau
Slectionnez le tableau.
Pour redimensionner le tableau horizontalement, faites glisser la poigne de slection vers la droite. Pour redimensionner le tableau verticalement, faites glisser la poigne de slection vers le bas. Pour redimensionner le tableau verticalement et horizontalement, faites glisser la poigne de slection vers le coin
infrieur droit.
Modification de la largeur d'une colonne tout en conservant la mme largeur de tableau

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 avec des largeurs en pourcentage (et non en pixels), si vous faites glisser la bordure droite de l'extrme droite du tableau, la largeur globale du tableau est modifie et toutes les colonnes s'adaptent proportionnellement.
Modification de la largeur d'une colonne en conservant les dimensions des autres colonnes
Maintenez la touche Maj 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.
version prliminaire
2 Cliquez sur le menu des en-ttes de tableau, puis choisissez Uniformiser toutes les largeurs.
Dreamweaver redfinit la largeur spcifie dans le code sur la largeur visuelle.
Effacement de toutes les largeurs et hauteurs dfinies dans un tableau

1 Slectionnez le tableau. 2 Effectuez l'une des oprations suivantes :
Choisissez Modifier > Tableau > Effacer les largeurs de colonnes ou Modifier > Tableau > Effacer les hauteurs de
cellules.
Dans l'inspecteur Proprits (Fentre > Proprits), cliquez sur le bouton Effacer les hauteurs de ligne
bouton Effacer les largeurs de colonne largeurs. .
ou sur le
Cliquez sur le menu des en-ttes de colonne, puis choisissez Effacer toutes les hauteurs ou Effacer toutes les
Effacement d'une largeur de colonne dfinie

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.
Ajout et suppression de lignes et de colonnes

Pour ajouter et supprimer des lignes et des colonnes l'aide des commandes Modifier > Tableau ou du menu des enttes de colonne.
version prliminaire
Le fait d'appuyer sur la touche de tabulation lorsque le curseur se trouve dans la dernire cellule d'un 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 d'insertion ou une colonne apparat gauche du point d'insertion.
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 Indique les lignes ou les colonnes insrer. Nombre de lignes ou Nombre de colonnes Le 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.
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 choisissez 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 indiquant le nombre de colonnes.
Remarque : Dreamweaver ne vous avertit pas si vous supprimez des lignes et des colonnes contenant des donnes.
Fractionnement et fusion de cellules

Utilisez l'inspecteur Proprits ou les commandes du sous-menu Modifier > Tableau pour fractionner ou fusionner des cellules.
version prliminaire
Fusion de plusieurs cellules d'un 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 l'illustration ci-dessous, la slection n'est pas un rectangle ; les cellules ne peuvent donc pas tre fusionnes.
Choisissez Modifier > Tableau > Fusionner les cellules. Dans l'inspecteur Proprits HTML (Fentre > Proprits) en mode dvelopp, cliquez sur le bouton Fusionner les
cellules . Remarque : Si le bouton n'est pas visible, cliquez sur la flche de dveloppement, dans le coin infrieur droit de l'inspecteur 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 l'inspecteur Proprits HTML (Fentre > Proprits) en mode agrandi, cliquez sur le bouton Fractionner les
cellules . Remarque : Si le bouton n'est pas visible, cliquez sur la flche de dveloppement, dans le coin infrieur droit de l'inspecteur Proprits, pour afficher toutes les options.
2 Dans la bote de dialogue Fractionner la cellule, spcifiez comment vous voulez fractionner la cellule :
Fractionner la cellule Indique comment la cellule doit tre fractionne, en lignes ou en 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

Choisissez Modifier > Tableau > Augmenter l'tendue de ligne ou Modifier > Tableau > Augmenter l'tendue de
colonne.
version prliminaire
Choisissez Modifier > Tableau > Rduire l'tendue de ligne ou Modifier > Tableau > Rduire l'tendue de colonne.
Copie, collage et suppression de cellules

Vous pouvez copier, coller ou supprimer une ou plusieurs cellules tout en prservant leur formatage. 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.
Coupure ou copie des cellules d'un 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 peuvent donc tre coupes ou copies.
Dans l'illustration ci-dessous, la slection n'est 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 non 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 d'une cellule spcifique, cliquez dans celle-ci. Pour coller une colonne entire de cellules gauche d'une cellule spcifique, cliquez dans celle-ci.
Remarque : Si vous avez plac moins d'une ligne ou d'une colonne entire dans le Presse-papiers et que vous cliquez dans une cellule puis collez les cellules figurant dans le Presse-papiers, alors il se peut que la cellule dans laquelle vous avez cliqu et les cellules voisines (selon leur emplacement dans le tableau) soient remplaces par les cellules que vous avez colles.
version prliminaire
Pour crer un nouveau tableau avec les cellules colles, placez le point d'insertion hors 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 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.
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.
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 trier les tableaux contenant colspan ou rowspan, c'est--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 de la bote de dialogue et cliquez sur OK.
Trier par Dtermine quelles valeurs de colonne utiliser pour trier les lignes du tableau. Ordre Dtermine comment la colonne doit tre trie (dans l'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/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.
Le tri inclut la premire ligne Indique que la premire ligne du tableau doit tre incluse dans le tri. Si la premire ligne
correspond un titre ne pas dplacer, n'activez pas cette option.
version prliminaire
Trier les lignes d'en-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.
Utilisation de cadres
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.
version prliminaire
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.
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/.
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.
version prliminaire
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.
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.
version prliminaire
Pour obtenir des informations plus dtailles sur les cadres, consultez le site Web de Thierry Koblentz l'adresse www.tjkdesign.com/articles/frames/.
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.
version prliminaire
Utilisation de jeux de cadres dans la fentre de document

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).

4 Dans l'inspecteur Proprits, dfinissez la proprit Cible pour tous les liens afin que le contenu li apparaisse dans
la zone approprie.
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 vous-mme. 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.
Voir aussi
Dreamweaver et l'accessibilit la page 706
Cration d'un jeu de cadres prdfini et affichage d'un document existant dans un cadre
1 Placez le point dinsertion dans un document et procdez de lune des manires suivantes :
Choisissez Insertion > HTML > Cadres et slectionnez un jeu de cadres prdfini. de cadres prdfini.
Dans la catgorie Mise en forme du panneau Insertion, cliquez sur la flche du bouton Cadres et choisissez un jeu
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.)
version prliminaire
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 sousmenu 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.
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.
version prliminaire
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.
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.
version prliminaire
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.
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.
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.
Enregistrement des fichiers du cadre et du jeu de cadres

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.
version prliminaire
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

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. 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.
Voir aussi
Dreamweaver et l'accessibilit la page 706
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).

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
version prliminaire
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.
version prliminaire
3 Cliquez dans le code du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce
(Macintosh), et 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

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).
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.
version prliminaire
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. 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.
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.
version prliminaire
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
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

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 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 la page 357.
version prliminaire
Voir aussi
Application du comportement Texte d'un cadre la page 367 Application du comportement Atteindre l'URL la page 364 Application du comportement Dfinir image barre de navigation la page 367 Application du comportement Menu de reroutage la page 365
version prliminaire
212
Chapitre 8 : Ajout de contenu dans les pages

Vous pouvez ajouter visuellement du contenu vos pages Web sans devoir connatre le langage HTML. Vous pouvez ajouter du texte, des images, de la vido cre l'aide d'Adobe Flash, du son et d'autres objets multimdias vos pages, ainsi que dfinir les proprits des pages.
Utilisation des pages

Utilisation du panneau Insertion
Les boutons qui composent le panneau Insertion permettent de crer et d'insrer des objets, tels que des tableaux et des images. Ces boutons sont organiss en plusieurs catgories.
Voir aussi
Prsentation du panneau Insertion la page 13 Modification de balises avec des diteurs de balises la page 323 Slection et affichage d'lments dans la fentre de document la page 219
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 l'option de mode Cration sont griss, car vous ne pouvez pas insrer d'lments dans ces fichiers de code.
Affichage des boutons d'une 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.
version prliminaire
Ajout de contenu dans les pages
Affichage du menu d'un bouton

Cliquez sur le bouton flch pointant vers le bas situ prs de l'icne du bouton.
Insertion d'un objet

1 Choisissez la catgorie approprie dans le menu Catgorie du panneau Insertion. 2 Effectuez l'une des oprations suivantes :
Cliquez sur un bouton d'objet ou faites glisser l'icne du bouton dans la fentre de document. Cliquez sur la flche d'un bouton, puis slectionnez une option dans le menu.
Selon le type d'objet que vous slectionnez, une bote de dialogue d'insertion d'objet s'affiche, le cas chant, et vous invite rechercher un fichier ou spcifier les paramtres d'un objet spcifique. En outre, Dreamweaver vous permet d'insrer du code dans le document ou d'ouvrir un diteur de balises ou un panneau vous permettant de spcifier les informations avant l'insertion du code. Dans le cas de certains objets, aucune bote de dialogue ne s'affiche si vous insrez les objets en mode Cration, mais un diteur de balises s'affiche si vous insrez les objets en mode Code. Pour d'autres objets, lorsque vous essayez d'insrer des objets en mode Cration, Dreamweaver passe en mode Code avant de raliser l'insertion. Remarque : Certains objets, tels que les ancres nommes, ne sont pas visibles lorsque vous visualisez la page dans la fentre d'un navigateur. Vous pouvez afficher des icnes en mode Cration indiquant l'emplacement de ces objets invisibles.
Contournement de la bote de dialogue d'insertion d'objets et insertion d'un espace rserv vide
Appuyez sur la touche Ctrl (Windows) ou Option (Macintosh) tout en cliquant avec la souris sur le bouton
correspondant l'objet. Par exemple, pour insrer un espace rserv d'image sans spcifier de fichier d'image, 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 d'insertion d'objet. De nombreux objets, y compris les lments PA et les jeux de cadres, n'insrent pas d'espaces rservs ni d'objets avec des valeurs par dfaut.
version prliminaire
Modification des prfrences du panneau Insertion

1 Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh). 2 Dans la catgorie Gnral de la bote de dialogue Prfrences, dsactivez l'option Afficher la bote de dialogue lors
de l'insertion d'objets pour supprimer les botes de dialogue lors de l'insertion d'objets, tels que des images, des tableaux, des scripts ou des lments d'en-tte. Vous pouvez galement maintenir la touche Ctrl (Windows) ou Option (Macintosh) enfonce tandis que vous crez l'objet. Si cette option est dsactive lorsque vous insrez un objet, celui-ci aura des valeurs par dfaut. Utilisez l'inspecteur Proprits pour modifier les proprits de l'objet aprs l'avoir insr.
Ajout, suppression ou gestion des boutons de la catgorie Favoris du panneau Insertion

1 Slectionnez l'une des catgories du panneau Insertion. 2 Cliquez l'aide du bouton droit de la souris (Windows) ou tout en maintenant la touche Contrle enfonce
(Macintosh) l'endroit o les boutons s'affichent, 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 l'objet 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 d'ajouter une catgorie entire votre liste de favoris.
Pour supprimer un objet ou un sparateur, slectionnez l'objet dans le volet Objets favoris situ droite, puis
cliquez sur le bouton Supprimer l'objet 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 n'est pas la catgorie active, slectionnez-la afin de voir les modifications apportes.
Insertion d'objets l'aide 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.
version prliminaire
Affichage du panneau Insertion sous la forme d'une barre Insertion horizontale

Contrairement aux autres panneaux de Dreamweaver, vous pouvez retirer le panneau Insertion de son emplacement d'ancrage par dfaut et le placer l'horizontale, au-dessus de la fentre de document. Dans ce cas, ce panneau se transforme en barre d'outils, mme s'il est impossible de la masquer et de l'afficher comme vous le feriez pour les autres barres d'outils.
1 Cliquez sur l'onglet du panneau Insertion et tirez-le en haut de la fentre de document.
2 Lorsqu'une ligne bleue horizontale s'affiche sur la largeur de la fentre du document, relche le panneau Insertion.
Remarque : La barre Insertion horizontale est galement un lment par dfaut de l'espace de travail Classique. Pour activer l'espace de travail Classique, choisissez Classique dans la section Commutation d'espace de travail de la barre Application.
Rtablissement du panneau Insertion

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

Cliquez sur la flche du menu situe prs du nom de la catgorie, l'extrmit gauche de la barre Insertion
horizontale, puis choisissez Afficher en tant qu'onglets.
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.
version prliminaire
Dfinition des proprits de page

Pour chaque page que vous crez dans Dreamweaver, vous pouvez spcifier les proprits de formatage dans la bote de dialogue Proprits de la page (Modifier > Proprits de la page). Cette bote de dialogue permet de spcifier la famille et la taille par dfaut de la police, la couleur d'arrire-plan, les marges, le style des liens ainsi que d'autres aspects de la conception de page. Vous pouvez attribuer de nouvelles proprits chaque nouvelle page que vous crez et modifier celles des pages existantes. Les modifications que vous apportez dans la bote de dialogue Proprits de la page s'appliquent la page entire. Dreamweaver dfinit des rgles CSS pour toutes les proprits spcifies dans les catgories Apparence (CSS), Liens (CSS) et En-ttes (CSS) de la bote de dialogue Proprits de la page. Les rgles sont intgres dans la section head de la page. Vous pouvez toujours dfinir les proprits de la page l'aide de code HTML mais, pour ce faire, vous devez slectionner la catgorie Apparence (HTML) de la bote de dialogue Proprits de la page. Les botes de dialogue Titre/codage et Trac de l'image dfinissent elles aussi des proprits de page l'aide de HTML. Remarque : Les proprits de page que vous choisissez ne s'appliquent qu'au document actif. Si une page utilise une feuille de style CSS externe, Dreamweaver n'crase pas les balises dfinies dans la feuille de style, car ceci affecterait les autres pages qui utilisent cette feuille.
1 Choisissez Modifier > Proprits de la page ou cliquez sur le bouton Proprits de la page de l'inspecteur Proprits. 2 Modifiez les proprits de la page puis cliquez sur OK.
Voir aussi
Dfinition des proprits CSS la page 137 Utilisation de formatage HTML la page 238 Code XHTML la page 303
Dfinition des proprits CSS de police, de couleur de fond et d'image de fond d'une page
La bote de dialogue Proprits de la page permet de spcifier diverses options de base de mise en forme des pages Web, comme la police, la couleur de fond et l'image de fond.
1 Choisissez Modifier > Proprits de la page ou cliquez sur le bouton Proprits de la page de l'inspecteur Proprits. 2 Slectionnez la catgorie Apparence (CSS) et dfinissez les options.
Police Spcifie la famille de polices par dfaut utiliser dans vos pages Web. Dreamweaver utilise la famille de polices
spcifie sauf si une autre police est dsigne pour un lment de texte donn.
Taille Spcifie la taille de police par dfaut utiliser dans vos pages Web. Dreamweaver utilise la taille de police spcifie sauf si une autre taille est dsigne pour un lment de texte donn. Couleur du texte Spcifie la couleur d'affichage des polices par dfaut. Couleur d'arrire-plan Dfinit la couleur d'arrire-plan de la page. Activez l'option Couleur d'arrire-plan puis
choisissez une couleur dans le slecteur.

Image darrire-plan Dfinit une image d'arrire-plan Cliquez sur le bouton Parcourir puis accdez l'image et slectionnez-la. Vous pouvez galement indiquer le chemin de l'image d'arrire-plan dans le champ Image d'arrire-plan.
Dreamweaver gnre une mosaque (multiplication) de l'image d'arrire-plan si elle ne remplit pas entirement sa fentre, comme le font les navigateurs. Pour viter la cration de cette mosaque, dsactivez cette fonction l'aide des feuilles de style en cascade.
version prliminaire
Rptition Indique comment l'image d'arrire-plan sera affiche sur la page :
Slectionnez l'option Pas de rptition pour n'afficher l'image d'arrire-plan qu'une seule fois. Slectionnez l'option Rptition pour rpter, ou mettre en mosaque, l'image l'horizontale et la verticale. Slectionnez l'option Rpter-x pour former une mosaque horizontale. Slectionnez l'option Rpter-y pour former une mosaque verticale.
Marge gauche et Marge droite Spcifie la taille des marges gauche et droite de la page. Marge haut et Marge bas Spcifie la taille des marges en haut et en bas de la page.
Dfinition des proprits HTML d'une page

La dfinition de proprits dans cette catgorie de la bote de dialogue Proprits de la page entrane un formatage de la page l'aide de code HTML au lieu de code CSS.
1 Choisissez Modifier > Proprits de la page ou cliquez sur le bouton Proprits de la page de l'inspecteur Proprits. 2 Slectionnez la catgorie Apparence (HTML) et dfinissez les options.
Image darrire-plan Dfinit une image d'arrire-plan Cliquez sur le bouton Parcourir puis accdez l'image et slectionnez-la. Vous pouvez galement indiquer le chemin de l'image d'arrire-plan dans le champ Image d'arrire-plan.
Dreamweaver gnre une mosaque (multiplication) de l'image d'arrire-plan si elle ne remplit pas entirement sa fentre, comme le font les navigateurs. Pour viter la cration de cette mosaque, dsactivez cette fonction l'aide des feuilles de style en cascade.
Arrire-plan Dfinit la couleur d'arrire-plan de la page. Activez l'option Couleur d'arrire-plan puis choisissez une
couleur dans le slecteur.

Texte Spcifie la couleur d'affichage des polices par dfaut. Lien Spcifie la couleur appliquer au texte qui constitue le lien. Liens visits Spcifie la couleur appliquer aux liens visits. Liens actifs Spcifie la couleur appliquer lorsque la souris ou le curseur clique sur un lien. Marge gauche et Marge droite Spcifie la taille des marges gauche et droite de la page. Marge haut et Marge bas Spcifie la taille des marges en haut et en bas de la page.
Dfinition des proprits de liens CSS

Vous pouvez dfinir le type et la taille de la police par dfaut, ainsi que les couleurs utilises pour les liens, les liens visits et les liens actifs
1 Choisissez Modifier > Proprits de la page ou cliquez sur le bouton Proprits de la page de l'inspecteur Proprits. 2 Slectionnez la catgorie Liens (CSS) et dfinissez les options.
Police du lien Dfinit la famille de polices par dfaut utiliser pour les liens. Par dfaut, Dreamweaver utilise la police dfinie pour la page entire, sauf si une autre police est spcifie. Taille Dfinit la taille de police par dfaut utiliser pour les liens. Couleur des liens Spcifie la couleur appliquer au texte qui constitue le lien. Liens visits Spcifie la couleur appliquer aux liens visits. Liens de survol Spcifie la couleur appliquer lorsque la souris ou le curseur est plac sur un lien. Liens actifs Spcifie la couleur appliquer lorsque la souris ou le curseur clique sur un lien.
version prliminaire
Style soulign Spcifie le style de soulignement appliquer aux liens. Si un style de soulignement est dj dfini pour
votre page (par exemple, par le biais d'une feuille de style CSS), le menu par dfaut est remplac par la mention ne pas modifier . Cette mention vous informe d'un style de lien qui a t dfini. Si vous modifiez le style de soulignement l'aide de la bote de dialogue Proprits de la page, Dreamweaver modifiera la dfinition de lien prcdente.
Dfinition des proprits d'en-tte de page (CSS)

Vous pouvez dfinir le type et la taille de la police par dfaut, ainsi que les couleurs utilises pour les liens, les liens visits et les liens actifs
1 Choisissez Modifier > Proprits de la page ou cliquez sur le bouton Proprits de la page de l'inspecteur Proprits. 2 Slectionnez la catgorie En-ttes (CSS) et dfinissez les options.
Police des en-ttes Dfinit la famille de polices par dfaut utiliser pour les en-ttes. Dreamweaver utilise la famille
de polices spcifie sauf si une autre police est dsigne pour un lment de texte donn.
En-tte 1 En-tte 6 Spcifie les tailles et couleurs utiliser pour chaque niveau de balises d'en-tte.
Dfinition des proprits du titre et de codage de la page

Vous pouvez dfinir le type et la taille de la police par dfaut, ainsi que les couleurs utilises pour les liens, les liens visits et les liens actifs La catgorie Titre/codage de la bote de dialogue Proprits de la page permet de dfinir le type de codage de document spcifique au langage utilis pour crer vos pages Web, ainsi que le Formulaire de normalisation Unicode utiliser avec ce type de codage.
1 Choisissez Modifier > Proprits de la page ou cliquez sur le bouton Proprits de la page de l'inspecteur Proprits. 2 Slectionnez la catgorie Titre/codage et dfinissez les options.
Titre Spcifie le titre de la page, qui s'affiche dans la barre de titre de la fentre de document et dans la plupart des
fentres du navigateur.
Type de document (DTD) Spcifie une dfinition de type de document. Par exemple, vous pouvez rendre un document
HTML compatible XHTML en slectionnant XHTML 1.0 transitionnel ou XHTML 1.0 Strict dans le menu droulant.
Codage Prcise le codage utilis pour les caractres du document.
Si vous slectionnez Unicode (UTF 8) en tant que codage de document, le codage d'entit est superflu dans la mesure o UTF 8 permet de reprsenter de faon fiable tous les caractres. Si vous slectionnez un autre codage de document, le codage d'entit peut tre ncessaire pour reprsenter certains caractres. Pour plus d'informations sur les entits de caractres, voir www.w3.org/TR/REC-html40/sgml/entities.html.
Recharger Convertit le document existant ou de l'ouvrir de nouveau avec le nouveau codage. Formulaire de normalisation Unicode N'est active que si vous slectionnez UTF 8 en tant que code par dfaut. Il
existe quatre Formulaires de normalisation Unicode. Le plus important est le Formulaire de normalisation Unicode C car il est le plus utilis dans le Modle de caractres li au World Wide Web, mais Adobe fournit galement les trois autres Formulaires de normalisation Unicode. Certains caractres Unicode semblent visuellement similaires mais peuvent tre stocks de diffrentes manires dans le document. Par exemple, (e trma) peut tre reprsent sous la forme d'un seul caractre, e trma ou de deux caractres, e Latin ordinaire + trma . Un caractre Unicode de combinaison est un caractre associ au caractre prcdent, ce qui fait apparatre le trma au-dessus du e Latin. Les deux formes donnent la mme typographie visuelle, alors que chacune est enregistre diffremment dans le fichier. La normalisation est le processus consistant s'assurer que tous les caractres pouvant tre enregistrs sous diffrentes formes le sont tous sous la mme forme. C'est--dire que tous les caractres d'un document sont enregistrs sous
version prliminaire
forme de e trma unique ou de e + trma de combinaison , mais pas sous les deux formes dans un mme document. Pour plus d'informations sur la Normalisation Unicode et les formulaires spcifiques pouvant tre utiliss, consultez le site Web Unicode www.unicode.org/reports/tr15.
Inclure une signature Unicode (BOM) Inclut une marque d'ordre d'octet (BOM, byte order mark) dans le document. Il s'agit d'une marque constitue de 2 4 octets placs au dbut d'un fichier texte identifiant un fichier comme tant au format Unicode et, dans ce cas, l'ordre des octets suivants. Le code UTF 8 ne prsentant pas d'ordre octet, l'ajout d'une marque BOM UTF 8 est facultatif. Dans le cas de UTF 16 et UTF 32, cette marque est obligatoire.
Utilisation d'un trac d'image pour crer la page

Vous pouvez insrer un fichier image utiliser comme guide dans la cration de votre page :
1 Choisissez Modifier > Proprits de la page ou cliquez sur le bouton Proprits de la page de l'inspecteur Proprits. 2 Slectionnez la catgorie Trac de limage et dfinissez les options.
Trac de l'image Permet de spcifier l'image utiliser comme guide pour reproduire une mise en page. Cette image
sert uniquement de rfrence et n'apparat pas lorsque le document s'affiche dans un navigateur.
Transparence Dtermine l'opacit du trac de l'image, de compltement transparent compltement opaque.
Description de l'encodage de document

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

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

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

Choisissez Affichage > Assistances visuelles > Elments invisibles.
Remarque : L'affichage des lments invisibles risque de modifier lgrement la mise en page, en dplaant d'autres lments de quelques pixels. Pour conserver une mise en page prcise, vous devez donc masquer ces lments invisibles.
Dfinition des prfrences des lments invisibles

Utilisez les prfrences des lments invisibles pour dterminer les types d'lments devant tre affichs lorsque l'option Affichage > Assistances visuelles > Elments invisibles est active.
1 Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh), puis cliquez sur
Elments invisibles.
2 Slectionnez les lments rendre visibles, puis cliquez sur OK.
Remarque : Une coche ct du nom de l'lment dans la bote de dialogue signifie que l'lment est visible lorsque l'option Affichage > Assistances visuelles > Elments invisibles est active.
Ancres nommes Affiche une icne marquant l'emplacement de chaque ancre nomme (a name ="") dans le
document.
Scripts Affiche une icne marquant l'emplacement de code Java Script ou VBScript dans le corps du document. Slectionnez cette icne pour modifier le script dans l'inspecteur Proprits, ou pour crer un lien vers un fichier script externe. Commentaires Affiche une icne marquant l'emplacement dun commentaire HTML. Slectionnez cette icne pour consultez le commentaire dans l'inspecteur Proprits. Sauts de ligne Affiche une icne marquant l'emplacement de chaque saut de ligne (BR). Cette option est dslectionne par dfaut. Cartes graphiques ct client Affiche une icne marquant l'emplacement de chaque carte graphique du document. Styles incorpors Affiche une icne marquant l'emplacement de styles CSS incorpors dans le corps du document. Les styles CSS placs dans l'en-tte du document n'apparaissent pas dans la fentre de document. Champs de formulaire masqus Affiche une icne marquant l'emplacement de champs de formulaire dont l'attribut
type est fix "hidden".
Sparateur de formulaire Affiche une bordure dlimitant le formulaire pour vous aider y insrer des lments. La
bordure indique l'tendue de la balise form ; ainsi, tous les lments de formulaire l'intrieur de cette bordure sont correctement inclus dans les balises form.
Points d'ancrage des lments PA Affiche une icne marquant l'emplacement du code dfinissant un lment PA. L'lment PA lui-mme peut tre positionn n'importe o dans la page. Les lments PA ne constituent pas des lments invisibles ; seul le code qui les dfinit est invisible. Slectionnez l'icne afin de slectionner l'lment PA. Vous pouvez ainsi afficher le contenu de l'lment PA, mme s'il est marqu comme masqu. Points d'ancrage des lments aligns Affiche une icne marquant l'emplacement du code HTML des lments qui acceptent l'attribut align. Ces lments sont les suivants : images, tableaux, objets ActiveX, plug-ins et applets. Dans certains cas, le code de l'lment peut tre spar de l'objet visible. Balises de marquage de serveur visuel Affiche l'emplacement des balises de marquage de serveur (telles que les balises ASP (Active Server Pages) et ColdFusion) dont le contenu ne peut pas tre affich dans la fentre de document. En
version prliminaire
rgle gnrale, lorsqu'elles sont traites par un serveur, ces balises gnrent des balises HTML. Par exemple, une balise <CFGRAPH> gnre un tableau HTML lorsqu'elle est traite par un serveur ColdFusion. Dreamweaver reprsente la balise l'aide d'un lment ColdFusion invisible, car il lui est impossible de dterminer la sortie dynamique finale de la page.
Balises de marquage de serveur non visuel Affiche l'emplacement des balises de marquage de serveur (telles que les
balises ASP (Active Server Pages) et ColdFusion) dont le contenu ne peut pas tre affich dans la fentre de document. Il s'agit gnralement de balises de configuration, de traitement ou de logique (par exemple <CFSET>, <CFWDDX> et <CFXML>) qui ne gnrent pas de balises HTML.
Affichage CSS: Aucun Affiche une icne qui montre l'emplacement du contenu masqu par la proprit display:none de la feuille de style lie ou incorpore. Afficher le texte dynamique sous Affiche le texte dynamique de la page dans le format {Recordset:Field} par dfaut. Si la longueur de ces valeurs perturbe le formatage de la page, vous pouvez choisir le type d'affichage {}. Inclusions ct serveur Affiche le contenu rel de chaque fichier d'inclusion ct serveur.
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 Netscape Navigator 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 de Netscape Navigator 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.
version prliminaire
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
.
Zoom avant et arrire

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.
Voir aussi
Prsentation de la barre d'tat la page 12
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).
version prliminaire
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).
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.
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

1 Slectionnez un lment de la page. 2 Slectionnez Affichage > Ajuster la slection.
Adaptation de la fentre du document une page entire

Slectionnez Affichage > Ajuster la page.
Adaptation de la fentre du document la largeur d'une page

Slectionnez Affichage > Ajuster la largeur.
Utilisation de comportements Java Script pour dtecter le type et la version des navigateurs et des plug-ins
Vous pouvez utiliser des comportements pour dterminer le type de navigateur utilis par vos visiteurs, et savoir s'ils disposent d'un plug-in particulier.
Vrifier le navigateur Permet d'envoyer les visiteurs sur des pages diffrentes selon le type et la version de leur navigateur. Par exemple, vous pouvez envoyer les utilisateurs de Netscape Navigator 4.0 ou version ultrieure sur une page, les utilisateurs de Microsoft Internet Explorer 4.0 ou version ultrieure sur une autre, et les utilisateurs d'un autre type de navigateur sur la page en cours. Vrifier le Plug-in Permet d'envoyer les visiteurs sur des pages diffrentes selon qu'ils disposent ou non du plug-in
indiqu. Par exemple, vous pouvez envoyer les utilisateurs disposant de Shockwave sur une page et les autres sur une page diffrente.
Voir aussi
Utilisation des comportements JavaScript la page 357 Application du comportement Vrifier le navigateur la page 361 Application du comportement Vrifier le plug-in la page 361
version prliminaire
Dfinition des prfrences de dure et de taille des tlchargements

Dreamweaver calcule la taille sur la base du contenu de toute la page, y compris tous les objets lis, tels que les images et les plug-ins. Dreamweaver estime la dure de tlchargement en fonction de la vitesse de connexion entre dans les prfrences de la Barre d'tat. Le temps de tlchargement rel dpend de l'tat du trafic sur Internet, Pour vrifier les dures de tlchargement pour une page Web particulire, il est intressant d'utiliser la rgle des 8 secondes ; c'est--dire que la plupart des utilisateurs n'attendront pas plus de huit secondes pour le tlchargement d'une page.
1 Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh). 2 Slectionnez la catgorie Barre d'tat dans la liste de gauche. 3 Choisissez la vitesse de connexion partir de laquelle le temps de tlchargement sera calcul, puis cliquez sur OK.
Voir aussi
Dfinition de la taille des fentres et de la vitesse de connexion la page 20
Ajout et formatage de texte

Ajout de texte dans un document
Pour ajouter du texte dans un document Dreamweaver, vous pouvez le saisir directement dans la fentre du document ou effectuer un copier/coller. Vous pouvez galement importer du texte partir dautres documents. Pour coller du texte dans un document Dreamweaver, vous pouvez utiliser la commande Coller ou Collage spcial. La commande Collage spcial permet de prciser le format du texte coll de diffrentes faons. Par exemple, lorsque vous souhaitez coller le texte d'un document Microsoft Word dj format dans votre document Dreamweaver en ignorant son formatage initial afin d'appliquer votre propre feuille de style CSS, slectionnez le texte dans Word, copiez-le dans le presse-papiers, puis utilisez la commande Collage spcial pour slectionner l'option qui permet de ne coller que le texte. Lorsque vous utilisez la commande Coller pour coller un texte issu d'une autre application, vous pouvez dfinir des prfrences de collage comme options par dfaut. Remarque : Dans la vue Code, Ctrl-V (Windows) et Commande-V (Macintosh) collent toujours le texte seulement (sans formatage).
Pour ajouter du texte dans un document, procdez de l'une des manires suivantes :
Tapez le texte directement dans la fentre de document. Copiez du texte partir d'une autre application, passez dans Dreamweaver, placez le point d'insertion dans la
fentre du document en mode Cration, puis choisissez Edition > Coller ou Edition > Collage spcial. Lorsque vous choisissez Edition > Collage spcial, vous pouvez choisir plusieurs options de formatage du texte coll. Vous pouvez galement coller du texte l'aide des raccourcis clavier suivants :
version prliminaire
Option de collage Coller
Raccourci clavier Ctrl+V (Windows) Commande+V (Macintosh)
Collage spcial
Ctrl+Maj+V (Windows) Commande+Maj+V (Macintosh)
Insertion de caractres spciaux

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

Le langage HTML n'autorisant qu'un seul espace entre les caractres, il convient d'insrer un espace inscable afin d'ajouter un espace supplmentaire dans un document. Vous pouvez dfinir une prfrence pour l'insertion automatique d'un espace inscable dans un document.
Insertion d'un espace inscable

Choisissez Insertion > HTML > Caractres spciaux > Espace inscable. Appuyez sur les touches Ctrl+Maj+Espace (Windows) ou Option+Espace (Macintosh). Dans la catgorie Texte du panneau Insertion, cliquez sur le bouton Caractres et cliquez sur l'icne Espace
inscable.
Dfinition d'une prfrence pour l'ajout d'espaces inscables

1 Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh). 2 Dans la catgorie Gnral, assurez-vous que l'option Autoriser plusieurs espaces conscutifs soit active.
version prliminaire
Cration de listes puces ou numrotes

Vous pouvez crer des listes numrotes (tries), des listes puces (non tries) et des listes de dfinitions partir d'un texte existant ou d'un nouveau texte que vous tapez dans la fentre de document. Les listes de dfinitions n'utilisent pas de caractres d'en-tte tels que des puces ou des nombres et sont souvent utilises dans les glossaires ou les descriptions. Les listes peuvent galement tre imbriques, c'est--dire qu'elles contiennent d'autres listes. Par exemple, vous pouvez imbriquer une liste numrote ou puces au sein d'une autre liste de mme type. La bote de dialogue Proprits de liste vous permet de dfinir l'aspect d'une liste complte ou d'un lment de liste. Vous pouvez dfinir le style de numrotation, remettre zro la numrotation ou dfinir les options du style de puce d'lments individuels de la liste ou de la liste complte.
Voir aussi
Dfinition des proprits CSS la page 137
Cration d'une nouvelle liste

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

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

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

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

1 Dans la fentre de document, crez au moins un lment de liste. Le nouveau style s'applique automatiquement aux
nouveaux lments ajouts la liste.

2 Placez le point d'insertion dans le texte de l'lment de la liste, puis choisissez Format > Liste > Proprits de la liste
pour ouvrir la bote de dialogue Proprits de liste.
version prliminaire
3 Slectionnez les options que vous voulez appliquer la liste :

Type de liste Spcifie les proprits de la liste, tandis que Elment de liste caractrise un lment individuel d'une liste.
Dans le menu droulant, slectionnez une liste simple, une liste numrote, une liste des rpertoires ou une liste des menus. Les options disponibles dans la bote de dialogue varient selon le type de liste choisi.
Style Dfinit le style des numros ou des puces utiliss avec une liste numrote ou puces. Tous les lments de la
liste prendront ce style, sauf si vous attribuez un nouveau style certains lments.
Dmarrer le comptage Dfinit la valeur attribuer au premier lment d'une liste numrote.
4 Cliquez sur OK pour dfinir les options.
Dfinition des proprits d'un lment de liste

1 Dans la fentre de document, placez le point d'insertion dans le texte d'un lment de la liste. 2 Choisissez Format > Liste > Proprits de la liste. 3 Dans Elment de liste, slectionnez les options que vous voulez dfinir :
Nouveau style Caractrise le style de l'lment de liste slectionn. Les styles du menu Nouveau style sont apparents
au type de liste affich dans le menu Type de liste. Si, par exemple, vous avez choisi l'option Liste simple dans le menu Type de liste, seules les options de puce sont disponibles dans le menu Nouveau style.
Rinitialiser le compte Dfinit un numro spcifique partir duquel numroter les lments de liste.
4 Cliquez sur OK pour dfinir les options.
Recherche et remplacement de texte

Vous pouvez utiliser la commande Rechercher et remplacer pour rechercher du texte ainsi que des attributs et des balises HTML dans un ou plusieurs documents. Le panneau Recherche, situ dans le groupe de panneaux Rsultats, indique les rsultats des recherches pour lesquelles l'option Rechercher tout est slectionne. Remarque : Pour rechercher des fichiers dans un site, utilisez les commandes suivantes : Retrouver sur le site local et Retrouver sur le site distant.
Voir aussi
Affichage du code la page 308 Expressions rgulires la page 305
Recherche et remplacement de texte

1 Ouvrez le document dans lequel la recherche doit tre effectue ou slectionnez des documents ou un dossier dans
le panneau Fichiers.
2 Slectionnez la commande Edition > Rechercher et remplacer. 3 L'option Rechercher dans vous permet de dfinir les fichiers dans lesquels effectuer la recherche :
Texte slectionn Permet de limiter la recherche au texte alors slectionn dans le document actif. Document actif Permet de limiter la recherche au document actif. Ouvrir les documents Permet d'effectuer la recherche dans tous les documents alors ouverts. Dossier Permet de limiter la recherche un dossier spcifique. Aprs avoir choisi Dossier, cliquez sur l'icne
reprsentant un dossier pour slectionner le dossier dans lequel effectuer votre recherche.
version prliminaire
Fichiers slectionns dans le site Permet de limiter la recherche aux fichiers et dossiers actuellement slectionns dans
Site local en cours entier Permet d'tendre la recherche l'ensemble des documents HTML, des fichiers de
bibliothque et des documents texte du site courant.

4 Le menu droulant Rechercher permet de spcifier le type de recherche effectuer :
Code source Permet de rechercher des chanes de texte spcifiques dans le code source HTML. Vous pouvez
rechercher des balises spcifiques l'aide de cette option, mais la recherche Balise spcifique offre une approche plus flexible pour ce type d'opration.
Texte Permet de rechercher des chanes spcifiques de texte au sein du document. Une recherche sur du texte ignore tout code HTML qui interromprait la chane indique. Par exemple, si vous recherchez le chien noir, vous trouverez aussi bien le chien noir que le chien <i>noir</i>. Texte (avanc) Permet de rechercher des chanes de texte spcifiques se trouvant l'intrieur ou l'extrieur d'une ou plusieurs balises. Par exemple, dans un document qui contient le code HTML suivant, la recherche de essaie en prcisant Pas de balise interne et la balise i renvoie uniquement la seconde occurrence du mot essaie : Jean
<i>essaie</i> de terminer son travail temps, mais n'y arrive pas toujours. Il essaie cependant farouchement..
Balise spcifique Permet de rechercher des balises, attributs et valeurs d'attribut spcifiques, telles que toutes les balises td o valign est dfini sur top.
Remarque : Appuyez sur Ctrl+Entre ou Maj+Entre (Windows) ou sur Contrle+Retour, Maj+Retour ou Commande+Retour (Macintosh) pour insrer des sauts de ligne au sein des champs de recherche, ce qui permet de rechercher un caractre de retour chariot. Lorsque vous effectuez une telle recherche, dsactivez l'option Ignorer les diffrences entre les espaces blancs si vous n'utilisez pas d'expressions rgulires. Cette recherche porte sur un caractre de retour chariot en particulier, et non sur l'occurrence d'un saut de ligne ; par exemple, elle ne trouvera pas de balise <br> ou <p>. Les caractres de retour chariot apparaissent en tant qu'espaces en mode Cration, et non en tant que sauts de ligne.
5 Utilisez les options suivantes pour largir ou limiter la recherche :
Respecter la casse Limite la recherche au texte dont la casse correspond celle du texte recherch. Par exemple, si vous recherchez le franais, vous ne trouverez pas le Franais. Ignorer les diffrences entre les espaces blancs Traite tout espace blanc comme s'il s'agissait d'un simple espace pour
les besoins de la recherche. Par exemple, si cette option est active, ce texte correspond ce texte et texte, mais pas cetexte. Cette option n'est pas disponible lorsque l'option Utiliser les expressions ce rgulires est slectionne ; vous devez crire explicitement l'expression rgulire pour ignorer les espaces blancs. Notez que les balises <p> et <br> ne sont pas comptes comme des espaces blancs.
Mot entier Limite la recherche aux occurrences contenant un ou plusieurs mots entiers.
Remarque : L'utilisation de cette option quivaut effectuer une recherche classique d'une chane commenant et terminant par \b, l'expression rgulire de limite entre les mots.
Utiliser les expressions rgulires Fait en sorte que certains caractres et chanes courtes (tels que ?, *, \w et \b) de la
chane recherche soient interprts comme des oprateurs d'expression rgulires. Par exemple, une recherche sur le
c\w*\b noir trouvera aussi bien le chien noir que le chapeau noir
Remarque : Si vous travaillez dans l'Affichage de code et modifiez le document, puis essayez de rechercher et de remplacer tout lment autre que du code source, une bote de dialogue s'affiche et vous informe que Dreamweaver synchronise les deux fentres avant d'effectuer la recherche.
version prliminaire
6 Pour rechercher des chanes sans les remplacer, cliquez sur Rechercher suivant ou sur Rechercher tout :
Suivant Permet de passer l'occurrence suivante dans le document actif et de la slectionner. S'il s'agit de la dernire occurrence de la chane recherche, Dreamweaver passe au document suivant si la recherche porte sur plusieurs documents. Rechercher tout Ouvre le panneau Recherche du groupe de panneaux Rsultats. Si la recherche ne porte que sur un
document, toutes les occurrences de la chane recherche s'affichent avec leur contexte. Si la recherche porte sur un dossier ou un site, Rechercher tout affiche la liste des documents contenant la chane recherche.
7 Pour remplacer les chanes trouves, cliquez sur Remplacer ou sur Remplacer tout. 8 Cliquez sur Fermer lorsque vous avez termin.
Nouvelle recherche sans afficher la bote de dialogue Rechercher et remplacer

Appuyez sur F3 (Windows) ou Commande+G (Macintosh).
Affichage du contexte d'un rsultat donn

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

Cliquez sur le bouton Rechercher et remplacer.
Arrt d'une recherche en cours

Cliquez sur le bouton Arrter.
Recherche d'une balise spcifique

La bote de dialogue Rechercher et remplacer vous permet de rechercher du texte et des balises dans un document et de remplacer les occurrences trouves par un autre texte ou d'autres balises.
1 Slectionnez la commande Edition > Rechercher et remplacer. 2 Dans le menu droulant Rechercher, slectionnez Balise spcifique. 3 Slectionnez une balise spcifique ou [toute balise] dans le menu droulant situ prs du menu droulant
Rechercher ou tapez un nom de balise dans la zone de texte.

4 (Facultatif) Limitez la recherche l'aide de l'un des modificateurs de balise suivants :
Avec attribut Permet de slectionner un attribut qui ne doit pas figurer dans la balise pour que la correspondance soit
trouve. Vous pouvez spcifier une valeur particulire pour cet attribut ou choisir [toute valeur].
Sans attribut Permet de slectionner un attribut qui ne doit pas figurer dans la balise pour que la correspondance soit trouve. Par exemple, vous pouvez rechercher toutes les balises img n'ayant pas l'attribut alt. Contenant Indique un texte ou une balise qui doit figurer dans la balise d'origine pour que la correspondance soit
trouve. Par exemple, dans le code <b><font size="4">heading 1</font></b>, labalise font est place l'intrieur de la balise b.
version prliminaire
Ne contenant pas Indique un texte ou une balise qui ne doit pas figurer dans la balise d'origine pour que la
correspondance soit trouve.

Balise interne Spcifie une balise l'intrieur de laquelle la balise cible doit tre incluse pour que la correspondance
soit trouve.
Pas de balise interne Spcifie une balise l'intrieur de laquelle la balise cible ne doit pas se trouver pour que la

5 (Facultatif) Pour cibler encore la recherche, cliquez sur le bouton plus (+) et rptez l'tape 3. 6 Si aucun modificateur de balise n'a t appliqu aux tapes 3 et 4, cliquez sur le bouton moins (-) pour rduire le
menu de modificateur de balise.

7 Si vous devez excuter une action lorsque la balise est trouve (telle que le retrait ou le remplacement de cette
balise), slectionnez cette action dans le menu contextuel Action, puis, si ncessaire, spcifiez l'action effectuer.
Recherche de texte spcifique (avance)

La bote de dialogue Rechercher et remplacer vous permet de rechercher du texte et des balises dans un document et de remplacer les occurrences trouves par un autre texte ou d'autres balises.
1 Slectionnez la commande Edition > Rechercher et remplacer. 2 Dans le menu droulant Rechercher, choisissez Texte (avanc). 3 Tapez le texte dans la zone de texte situ prs du menu droulant Rechercher.
Par exemple, tapez le mot Indfini.

4 Slectionnez l'option balise interne ou pas de balise interne, puis choisissez une balise dans le menu droulant
adjacent. Par exemple, cliquez sur Dans la balise, puis slectionnez title.
5 (Facultatif) Cliquez sur le bouton plus (+) pour limiter la recherche l'aide d'un des modificateurs de balise suivants :
Avec attribut Permet de slectionner un attribut qui ne doit pas figurer dans la balise pour que la correspondance soit
trouve. Vous pouvez spcifier une valeur particulire pour cet attribut ou choisir [toute valeur].
Sans attribut Permet de slectionner un attribut qui ne doit pas figurer dans la balise pour que la correspondance soit trouve. Par exemple, vous pouvez rechercher toutes les balises img n'ayant pas l'attribut alt. Contenant Indique un texte ou une balise qui doit figurer dans la balise d'origine pour que la correspondance soit
trouve. Par exemple, dans le code <b><font size="4">heading 1</font></b>, labalise font est place l'intrieur de la balise b.
Ne contenant pas Indique un texte ou une balise qui ne doit pas figurer dans la balise d'origine pour que la

Balise interne Spcifie une balise l'intrieur de laquelle la balise cible doit tre incluse pour que la correspondance
soit trouve.
Pas de balise interne Spcifie une balise l'intrieur de laquelle la balise cible ne doit pas se trouver pour que la

6 (Facultatif) Pour cibler encore plus la recherche, rptez l'tape 4.
version prliminaire
Dfinition d'abrviations et d'acronymes

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

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

Texte structur Permet de coller du texte en conservant sa structure, mais sans le formatage de base. Par exemple, vous pouvez coller un texte et conserver la structure des paragraphes, des listes et des tableaux, mais pas les mises en gras, italiques et autres formatages. Texte structur avec formatage de base Permet de coller du texte structur et du texte HTML avec une mise en forme simple (tel que des paragraphes et des tableaux, ainsi que du texte mis en forme avec les balises b, i, u, strong, em, hr, abbr ou acronym). Texte structur avec formatage complet Permet de coller du texte en conservant toute sa structure, son formatage
HTML et ses styles CSS. Remarque : L'option Mise en forme complte ne permet pas de conserver les styles CSS provenant d'une feuille de style externe, ni les styles provenant d'applications qui ne les conservent pas lors d'une copie dans le presse-papiers.
Conserver les sauts de ligne Permet de conserver les sauts de ligne dans le texte coll. Cette option est dsactive si vous avez slectionn Texte seul.
version prliminaire
Nettoyage des espaces inter-paragraphes de Word Slectionnez cette option lorsque vous avez slectionn Texte structur ou Mise en forme de base et souhaitez liminer l'espace supplmentaire qui spare les paragraphes lorsque vous collez votre texte.
Vrification de l'orthographe d'une page Web.

La commande Orthographe permet de vrifier l'orthographe du document actif. Le document doit tre une page Web (par exemple une page HTML, ColdFusion ou PHP). La commande Orthographe ne fonctionne pas dans les fichiers texte ou XML. En outre, elle ignore les balises HTML et les valeurs d'attributs. Remarque : Dreamweaver peut uniquement vrifier l'orthographe du fichier actuellement ouvert dans la fentre de document. Il ne peut pas vrifier l'orthographe de tous les fichiers d'un site en mme temps. Par dfaut, le correcteur orthographique utilise le dictionnaire Anglais US. Pour changer de dictionnaire, choisissez Edition > Prfrences > Gnral (Windows) ou Dreamweaver > Prfrences > Gnral (Macintosh), puis choisissez le dictionnaire que vous souhaitez utiliser dans le menu droulant Dictionnaire du correcteur d'orthographe.
1 Choisissez Commandes > Orthographe ou appuyez sur les touches Maj+F7.
Lorsque Dreamweaver ne reconnat pas un mot, la bote de dialogue Vrifier l'orthographe s'affiche.
2 Slectionnez l'option correspondant au traitement que vous souhaitez appliquer l'occurrence.
Ajouter Ajoute le mot non reconnu votre dictionnaire personnel. Ignorer Ignore cette occurrence du mot non reconnu. Remplacer Remplace cette occurrence du mot non reconnu par le texte que vous tapez dans la zone de texte
Remplacer par, ou par le mot slectionn dans la liste Suggestions.

Tout ignorer Ignore toutes les occurrences du mot non reconnu. Tout remplacer Remplace toutes les occurrences du mot non reconnu.
Remarque : Dreamweaver ne permet pas de supprimer les entres qui ont t ajoutes aux dictionnaires personnels.
Importation de donnes tabulaires

Vous pouvez importer des donnes tabulaires dans un document en enregistrant d'abord ces fichiers (tels que des fichiers Microsoft Excel ou d'une base de donnes) sous forme de fichiers texte dlimits. Vous pouvez importer et mettre en forme des donnes tabulaires, ainsi qu'importer du text partir de documents HTML Microsoft Word. Vous pouvez galement ajouter du texte provenant d'un document Microsoft Excel dans un document Dreamweaver en important le contenu du fichier Excel dans une page Web.
1 Choisissez Fichier > Importer > Importer les donnes tabulaires ou Insertion > Objets du tableau > Importer les
donnes tabulaires.
2 Recherchez le fichier souhait ou entrez son nom dans la zone de texte. 3 Slectionnez le dlimiteur utilis lors de l'enregistrement du fichier en tant que texte dlimit. Les options sont Tab,
Virgule, Point-virgule, Deux points et Autre. Si vous slectionnez Autre, un champ vierge s'affiche ct de l'option. Entrez le caractre utilis comme dlimiteur.
4 Utilisez les options restantes pour formater ou dfinir le tableau dans lequel importer les donnes, puis cliquez sur OK.
version prliminaire
Voir aussi
Ouverture et modification de documents existants la page 69 Importation et exportation de donnes tabulaires la page 184
Importation de documents Microsoft Office (Windows uniquement)

Vous pouvez insrer le contenu d'un document Microsoft Word ou Excel dans une page Web nouvelle ou existante. Lorsque vous importez un document Word ou Excel, Dreamweaver reoit le code HTML converti et l'insre dans votre page Web. La taille du fichier, aprs rception du code HTML converti par Dreamweaver, doit tre infrieure 300 Ko. Au lieu d'importer tout le contenu d'un fichier, vous pouvez galement coller une partie du document Word et protger son formatage. Remarque : Si vous utilisez Microsoft Office 97, il n'est pas possible d'importer le contenu d'un document Word ou Excel. Vous devez insrer un lien vers le document.
1 Ouvrez la page Web dans laquelle vous souhaitez copier le document Word ou Excel. 2 En mode Cration, procdez de l'une des manires suivantes pour slectionner le fichier :
Dplacez le fichier de son emplacement actuel vers la page o le contenu doit s'afficher. Choisissez Fichier > Importer > Document Word ou Fichier > Importer > Document Excel.
3 Dans la bote de dialogue Insrer un document, recherchez le fichier ajouter, slectionnez une option de
formatage dans le menu Mise en forme situ dans le bas de la bote de dialogue, puis cliquez sur Ouvrir.
Texte seul Permet d'insrer du texte non format. Si le texte d'origine est mis en forme, tout le formatage est supprim. Texte structur Permet d'insrer du texte en conservant sa structure, mais sans le formatage de base. Par exemple, vous pouvez coller un texte et conserver la structure des paragraphes, des listes et des tableaux, mais pas les mises en gras, italiques et autres formatages. Texte structur avec formatage de base Permet d'insrer du texte structur et du texte HTML avec une mise en forme simple (tel que des paragraphes et des tableaux, ainsi que du texte mis en forme avec les balisesb, i, u, strong, em, hr, abbr ou acronym tag). Texte structur avec formatage complet Permet d'insrer du texte en conservant toute sa structure, son formatage
HTML et ses styles CSS.

Nettoyage des espaces inter-paragraphes de Word Permet d'liminer les espaces superflus entre les paragraphes lorsque vous collez le texte alors que l'option Texte structur ou Mise en forme de base est slectionne.
Le contenu du document Word ou Excel s'affiche dans votre page.
Cration d'un lien vers un document Word ou Excel

Vous pouvez insrer un lien vers un document Microsoft Word ou Excel dans une page existante.
1 Ouvrez la page o le lien doit tre affich. 2 Faites glisser le fichier de son emplacement actuel vers la page Dreamweaver, en plaant le lien l'emplacement
voulu.
3 Slectionnez Crer un lien, puis cliquez sur OK. 4 Si le document vers lequel vous crez un lien rside hors du dossier racine de votre site, Dreamweaver vous invite
le copier dans ce dossier.
version prliminaire
En copiant le document dans le dossier racine du site, vous tes assur que le document sera disponible lors de la publication du site Web.
5 Lorsque vous chargez votre page sur le serveur Web, vous devez galement charger le fichier Word ou Excel.
Votre page contient dsormais un lien vers le document Word ou Excel. Le texte du lien est le nom du fichier li. Si vous le souhaitez, vous pouvez modifier ce texte dans la fentre du document.
A propos du formatage de texte (CSS et HTML)

Les mthodes de formatage du texte dans Dreamweaver s'apparentent celles d'un logiciel de traitement de texte standard. Vous pouvez dfinir le style de formatage par dfaut (Paragraphe, En-tte 1, En-tte 2, etc.) pour un bloc de texte, modifier la police, la taille la couleur et l'alignement du texte slectionn ou appliquer des styles de texte tels que gras, italique, code (texte chasse fixe) et soulign. Dreamweaver comprend deux inspecteurs Proprits, intgrs pour n'en faire qu'un : l'inspecteur Proprits CSS et l'inspecteur Proprits HTML. Lorsque vous utilisez l'inspecteur Proprits CSS, Dreamweaver met en forme le texte l'aide de feuilles de style en cascade. Les styles CSS offrent aux concepteurs et dveloppeurs Web un meilleur contrle de l'aspect de la page Web tout en proposant des fonctions qui permettent d'amliorer l'accessibilit et de rduire la taille des fichiers. L'inspecteur Proprits CSS permet d'accder des styles existants et d'en crer de nouveaux. CSS permet de modifier le style d'une page Web sans compromettre sa structure. En sparant les lments de conception visuelle (polices, couleurs, marges, etc.) des lments logiques internes la structure d'une page Web, CSS offre aux concepteurs un contrle la fois visuel et typographique sans nuire l'intgrit du contenu. De plus, dfinir une conception typographique et une mise en page depuis un bloc unique de code (sans avoir recours aux cartes graphiques, aux balises font, aux tableaux et aux GIF d'espacement) permet un chargement plus rapide, simplifie la maintenance du site et fournit un point central partir duquel il est possible de contrler les attributs de conception sur plusieurs pages Web. Vous pouvez stocker les styles crs l'aide de CSS directement dans le document ou, pour disposer de davantage de puissance et de flexibilit, vous pouvez les stocker dans une feuille de style externe. Si vous associez une feuille de style externe plusieurs pages Web, toutes les pages s'adapteront automatiquement si vous effectuez une modification dans cette feuille de style. Pour accder toutes les rgles CSS d'une page, utilisez le panneau Styles CSS (Fentre > Styles CSS). Pour accder aux rgles qui s'appliquent la slection actuelle, utilisez le panneau Styles CSS (mode Actuel) ou le menu Rgle cible de l'inspecteur Proprits CSS. Si vous le prfrez, vous pouvez mettre en forme le texte de vos pages Web l'aide de balises de marquage HTML. Pour employer des balises HTML au lieu de CSS, mettez le texte en forme l'aide de l'inspecteur Proprits HTML. Remarque : Vous pouvez combiner des formatages CSS et HTML 3.2 dans une mme page. Le formatage est appliqu de faon hirarchique : le formatage HTML 3.2 supplante celui appliqu par des feuilles de style CSS externes et le formatage CSS intgr dans un document supplante les styles CSS externes.
Voir aussi
Ouverture du panneau Styles CSS la page 135 Description des feuilles de style en cascade la page 127
Dfinition des proprits de texte dans l'inspecteur Proprits

Vous pouvez utiliser l'inspecteur Proprits de texte pour appliquer un formatage HTML ou CSS. Lorsque vous appliquez un formatage HTML, Dreamweaver ajoute des proprits au code HTML du corps de la page. Lorsque vous appliquez un formatage CSS, Dreamweaver crit les proprits dans l'en-tte du document ou dans une feuille de style spare.
version prliminaire
Remarque : Lorsque vous crez des styles CSS intgrs, Dreamweaver ajoute directement le code d'attribut du style au corps de la page.
Voir aussi
Cration d'une nouvelle rgle CSS la page 136 Dfinition des proprits CSS la page 137 Dfinition des proprits de cellule, de ligne ou de colonne la page 188 Dfinition des prfrences gnrales de Dreamweaver la page 31 Didacticiel relatif l'inspecteur Proprits CSS
Modification de rgles CSS dans l'inspecteur Proprits

1 Si ce n'est pas dj fait, ouvrez l'inspecteur Proprits (Fentre > Proprits) puis cliquez sur le bouton CSS. 2 Effectuez l'une des oprations suivantes :
Placez le point d'insertion dans un bloc de texte qui a t mis en forme l'aide d'une rgle que vous voulez modifier.
La rgle s'affiche dans le menu Rgle cible.
Choisissez une rgle dans le menu Rgle cible.

3 Apportez les modifications dsires la rgle l'aide des diffrentes options de l'inspecteur Proprits CSS.
Rgle cible La rgle que vous modifiez dans l'inspecteur Proprits CSS. Lorsqu'un style existant est appliqu au texte, la rgle qui influe sur le format du texte s'affiche lorsque vous cliquez dans le texte sur la page. Vous pouvez galement utiliser le menu Rgle cible pour crer de nouvelles rgles CSS et de nouveaux styles intgrs, ou pour appliquer des classes existantes au texte slectionn. Si vous crez une nouvelle rgle, vous devez remplir la bote de dialogue Nouvelle rgle CSS. Pour plus d'informations, consultez les liens dans le bas de cette rubrique. Modifier la rgle Ouvre la bote de dialogue Dfinition des rgles CSS pour la rgle cible. Par contre, si vous choisissez Nouvelle rgle CSS dans le menu Rgle cible puis que vous cliquez sur le bouton Modifier la rgle, Dreamweaver ouvre la bote de dialogue Dfinition de nouvelle rgle CSS. Panneau CSS Ouvre le panneau Styles CSS et affiche les proprits de la rgle cible en mode Actuel. Police Modifie la police de la rgle cible. Taille Dfinit la taille de police de la rgle cible. Couleur du texte Dfinit la couleur slectionn comme couleur de police dans la rgle cible. Slectionnez une couleur scurise pour le Web en cliquant sur le slecteur de couleur ou tapez directement une valeur hexadcimale (par exemple, #FF0000) dans le champ de texte adjacent. Gras Ajoute la proprit gras la rgle cible. Italique Ajoute la proprit italique la rgle cible. Aligner gauche, Centrer et Aligner droite Ajoute les proprits d'alignement respectives la rgle cible.
Remarque : Les proprits Police, Taille, Couleur du texte, Gras, Italique et Alignement affichent toujours les proprits de la rgle qui s'applique la slection actuelle dans la fentre de document. Lorsque vous modifiez l'une de ces proprits, vous influez sur la rgle cible. Vous trouverez un didacticiel vido sur l'utilisation de l'inspecteur Proprits CSS l'adresse www.adobe.com/go/lrvid4041_dw_fr.
version prliminaire
Dfinition de formatage HTML dans l'inspecteur Proprits

1 Si ce n'est pas dj fait, ouvrez l'inspecteur Proprits (Fentre > Proprits) puis cliquez sur le bouton HTML. 2 Slectionnez le texte que vous souhaitez mettre en forme. 3 Dfinissez les options que vous voulez appliquer au texte slectionn :
Format Dfinit le style de paragraphe du texte slectionn. Paragraphe applique un format par dfaut pour une balise
<p>, En-tte 1 ajoute une balise H1, et ainsi de suite.
ID Attribue un ID votre slection. Le menu ID prsente (le cas chant) tous les ID non utiliss et dclars dans le
document.
Classe Affiche le style de classe appliqu au texte slectionn. Si aucun style n'est appliqu la slection, la mention
Aucun styleCSS apparat dans le menu droulant. Si plusieurs styles sont appliqus la slection, le menu est vide. Le menu Style permet d'effectuer les oprations suivantes :
Slectionnez le style appliquer la slection. Choisissez Aucun pour ne plus appliquer le style slectionn. Pour renommer le style, choisissez Renommer. Slectionnez Attacher une feuille de style pour ouvrir une bote de dialogue qui vous permet d'attacher une feuille
de style externe la page.
Gras Applique soit <b> soit <strong> au texte slectionn en fonction de la prfrence de style dfinie dans la catgorie Gnral de la bote de dialogue Prfrences. Italique Applique soit <i> soit <em> au texte slectionn en fonction de la prfrence de style dfinie dans la catgorie
Gnral de la bote de dialogue Prfrences.

Liste non ordonne Cre une liste puces partir du texte slectionn. Si aucun texte n'est slectionn, une nouvelle
liste puces est ouverte.

Liste numrote Cre une liste numrote partir du texte slectionn. Si aucun texte n'est slectionn, une nouvelle liste numrote est ouverte. Blockquote et Supprimer Blockquote Augmente ou supprime la mise en retrait du texte slectionn, en insrant ou supprimant la balise blockquote. Au sein d'une liste, l'ajout d'un retrait cre une liste imbrique et sa suppression ramne les lments de la liste au niveau parent. Lien Cre une liste puces partir du texte slectionn. Cliquez sur l'icne de dossier pour rechercher un fichier de
votre site, faites glisser l'icne Pointer vers un fichier sur un fichier du panneau Fichiers ou faites glisser un fichier du panneau Fichiers sur la zone.
Titre Dfinit l'infobulle textuelle d'un lien hypertexte. Cible Spcifie la fentre ou le cadre dans lequel sera charg le document li :
_blank charge le document li dans une nouvelle fentre, sans nom, du navigateur. _parent charge le document li dans le jeu de cadres parent (ou dans la fentre parente) du cadre contenant le lien. Si le cadre contenant le lien n'est pas imbriqu, le document li sera charg dans la fentre de base du navigateur. _self charge le document li dans le mme cadre (ou la mme fentre) que le lien. Il s'agit de la cible par dfaut,
de sorte qu'il est le plus souvent inutile de la spcifier.

_top charge le document li dans la fentre de base du navigateur, en supprimant tous les cadres.
version prliminaire
Utilisation de formatage HTML

Mme si CSS est la mthode de formatage de texte privilgie, Dreamweaver permet d'employer du code HTML cette fin.
Mise en forme des paragraphes

Utilisez le menu Format de l'inspecteur Proprits HTML ou le sous-menu Format > Format de paragraphe pour appliquer des balises standard de paragraphe et d'en-tte.
1 Placez le point d'insertion dans le paragraphe, ou slectionnez une partie du texte du paragraphe. 2 Choisissez Texte > Format de paragraphe ou le menu Format de l'inspecteur Proprits, puis slectionnez une
option :
Choisissez un format de paragraphe (par exemple, En-tte 1, En-tte 2, Texte pr-format, etc.). La balise HTML
associe au style choisi (par exemple, h1 pour En-tte 1, h2 pour En-tte 2, pre pour Texte pr-format, etc.) est applique tout le paragraphe.
Choisissez Aucun pour supprimer un format de paragraphe.

Lorsque vous appliquez une balise d'en-tte un paragraphe, Dreamweaver insre automatiquement la ligne de texte suivante comme un paragraphe. Pour modifier ce paramtre, choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh), puis assurez-vous que l'option Passer en paragraphe normal aprs le titre est dsactive dans les Options d'dition de la catgorie Gnral.
Voir aussi
Dfinition des proprits de texte dans l'inspecteur Proprits la page 235 Dfinition des proprits CSS la page 137
Modification de la couleur du texte

Vous pouvez modifier la couleur par dfaut de tout le texte d'une page, ou la couleur du texte slectionn sur la page.
Voir aussi
Utilisation du slecteur de couleur la page 223 Dfinition des couleurs par dfaut du texte sur une page Choisissez Modifier > Proprits de la page > Apparence (HTML) ou Liens (HTML), puis choisissez la couleur pour les options Couleur du texte, Couleur du lien, Liens visits et Liens actifs. Remarque : La couleur du lien actif est la couleur que prend un lien lorsque l'utilisateur clique dessus. Il est possible que certains navigateurs Web n'utilisent pas la couleur que vous avez spcifie. Modification de la couleur du texte slectionn
Choisissez Format > Couleur, slectionnez une couleur dans le slecteur systme, puis cliquez sur OK.
Alignement du texte
Vous pouvez aligner du texte l'aide de code HTML en utilisant le menu Format > Aligner. Vous pouvez centrer un lment sur la page l'aide de la commande Format > Aligner > Centre. Alignement de text sur une page 1 Slectionnez le texte aligner ou insrez le pointeur au dbut du texte.
2 Choisissez Format > Aligner, puis slectionnez une commande d'alignement.
version prliminaire
Centrage des lments de page 1 Slectionnez l'lment (image, plug-in, tableau ou tout autre lment de la page) que vous dsirez aligner au centre.
2 Choisissez Format > Aligner > Centre.
Remarque : Vous pouvez aligner et centrer des blocs de texte complets ; par contre, vous ne pouvez pas aligner ou centrer une partie d'un en-tte ou d'un paragraphe.
Mise en retrait du texte

La commande Retrait applique la balise HTML blockquote un paragraphe de texte, ce qui a pour effet de mettre en retrait le texte de chaque ct de la page.
1 Placez le point d'insertion l'emplacement o insrer le retrait. 2 Choisissez Format > Retrait ou Retrait ngatif, ou choisissez Liste > Retrait ou Retrait ngatif dans le menu.
Remarque : Un paragraphe accepte plusieurs indentations. Chaque application de cette commande produit un retrait supplmentaire du texte de chaque ct du document.
Application de styles de police

Vous pouvez utiliser HTML pour appliquer un formatage de texte une seule lettre, des paragraphes entiers du site ou encore des blocs de texte. Le menu Format permet de dfinir ou de modifier les caractristiques de police du texte slectionn. Vous pouvez dfinir le type, le style (par exemple, gras ou italique) et la taille d'une police de caractres.
1 Slectionnez le texte. Si aucun texte n'est slectionn, l'option s'appliquera au texte que vous taperez ensuite. 2 Faites votre choix parmi les options suivantes :
Pour modifier la police, choisissez la combinaison dsire dans le menu Format > Police. Choisissez Par dfaut pour
supprimer les polices pralablement appliques. Cette option applique la police par dfaut au texte slectionn (en l'occurrence, la police par dfaut du navigateur ou la police affecte cette balise dans une feuille de style CSS).
Pour modifier le style de police, slectionnez le style dsir (gras, italique, soulign, etc.) dans le menu Format >
Style.
Voir aussi
Cration de pages avec CSS la page 127 Cration d'une nouvelle rgle CSS la page 136
Modification du nom d'une classe partir de l'inspecteur Proprits HTML

Dreamweaver affiche toutes les classes disponibles pour votre page dans le menu Classe de l'inspecteur Proprits HTML. Vous pouvez renommer des styles dans cette liste en choisissant l'option Renommer, la fin de la liste des styles de classes.
1 Choisissez Renommer dans le menu droulant Style de l'inspecteur Proprits du texte. 2 Slectionnez le style renommer dans le menu contextuel Renommer un style. 3 Entrez un nouveau nom dans la zone Nouveau nom, puis cliquez sur OK.
version prliminaire
Ajout d'espacements de paragraphe

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

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

Appuyez sur les touches Maj+Entre (Windows) ou Maj+Retour (Macintosh). Choisissez Insertion > HTML > Caractres spciaux > Saut de ligne. Dans la catgorie Texte du panneau Insertion, cliquez sur le bouton Caractres et cliquez sur l'icne Saut de ligne.
Utilisation de barres horizontales

Les barres (lignes) horizontales sont utiles pour organiser les informations. Sur une page, le texte et les objets peuvent tre visuellement spars par une ou plusieurs barres.
Cration d'une barre horizontale

1 Dans la fentre de document, placez le curseur l o vous voulez insrer une barre horizontale. 2 Choisissez Insertion > HTML > Barre horizontale.
Modification d'une barre horizontale

1 Dans la fentre de document, slectionnez la barre horizontale. 2 Choisissez Fentre > Proprits pour ouvrir l'inspecteur Proprits et modifier les proprits selon vos besoins :
La zone de texte ID Permet de dfinir un ID pour la rgle horizontale. L et H Spcifient la largeur et la hauteur de la barre, en pixels ou en pourcentage de la taille de la page. Alignement Spcifie l'alignement de la barre (Par dfaut, Gauche, Centre ou Droite). Ce paramtrage ne s'applique
que si la largeur de la barre est infrieure celle de la fentre du navigateur.

Ombrage Spcifie si la barre est accompagne d'un effet d'ombre porte. Dsactivez cette option pour dessiner la barre
en couleur pleine.
Classe Permet de joindre une feuille de style ou d'appliquer une classe partir d'une feuille de style dj jointe.
Modification des combinaisons de polices

Pour dfinir la combinaison de polices qui apparat dans l'inspecteur Proprits et dans Format > Police, utilisez la commande Modifier la liste des polices. Les combinaisons de polices de caractres dterminent la faon dont le texte des pages Web est affich par les navigateurs. Ces derniers utilisent, au sein de la combinaison de polices choisie, la premire police installe sur l'ordinateur de l'utilisateur. Si aucune des polices de cette combinaison n'est installe, le navigateur affiche le texte avec la police par dfaut indique dans ses prfrences.
version prliminaire
Modification des combinaisons de polices

1 Choisissez Format > Police > Modifier la liste des polices. 2 Choisissez la combinaison de polices dans la liste qui apparat en haut de la bote de dialogue.
Les polices de la combinaison slectionne apparaissent dans la liste Polices choisies, dans le coin infrieur gauche de la bote de dialogue. Une liste de toutes les polices disponibles installes sur votre systme se trouve sa droite.
Pour ajouter ou retirer des polices d'une combinaison, cliquez selon le cas sur l'un des boutons << ou >> qui se
trouvent entre les listes Polices choisies et Polices disponibles.
Pour ajouter ou supprimer une combinaison de polices, cliquez selon le cas sur l'un des boutons plus (+) ou moins
(-) qui se trouvent dans la partie suprieure de la bote de dialogue.
Pour ajouter une police qui n'est pas installe sur votre ordinateur, tapez son nom dans le champ de texte en dessous
de la liste Polices disponibles, et cliquez sur le bouton<< pour ajouter cette police la combinaison courante. Il peut tre utile d'ajouter une police qui n'est pas installe sur votre systme, par exemple pour indiquer une police spcifique Windows lorsque vous travaillez sur un Macintosh.
Pour dplacer la combinaison de polices au sein de la liste, cliquez sur les boutons flchs en haut de la bote de
dialogue.
Ajout d'une nouvelle combinaison la liste des polices

1 Choisissez Format > Police > Modifier la liste des polices. 2 Slectionnez une police dans la liste Polices disponibles, et cliquez sur le bouton << pour l'insrer dans la liste
Polices choisies.
3 Rptez l'tape 2 pour chaque police ncessaire dans la combinaison.
Pour ajouter une police qui n'est pas installe sur votre ordinateur, tapez son nom dans le champ de texte en dessous de la liste Polices disponibles, et cliquez sur le bouton<< pour ajouter cette police la combinaison courante. Il peut tre utile d'ajouter une police qui n'est pas installe sur votre systme, par exemple pour indiquer une police spcifique Windows lorsque vous travaillez sur un Macintosh.
4 Lorsque vous avez fini de choisir des polices, slectionnez une famille de polices gnrique dans la liste Polices
disponibles et cliquez sur le bouton << pour l'insrer dans la liste Polices choisies. Les familles gnriques de polices sont les suivantes : cursive, fantaisie, monospace (espacement non proportionnel), sans-serif (espacement proportionnel sans empattement) et serif (espacement proportionnel avec empattement). Si aucune des polices de la liste Polices disponibles n'est disponible sur l'ordinateur de l'utilisateur, le texte apparat dans la police par dfaut associe la famille de polices gnrique. Par exemple, avec la plupart des systmes d'exploitation, la police non proportionnelle (monospace) par dfaut est Courier.
Insertion de dates
Dreamweaver comporte un objet Date pratique qui insre la date actuelle dans le format de votre choix (avec ou sans heure), ainsi qu'une option pour mettre jour cette date lorsque vous enregistrez le fichier. Remarque : Les dates et heures affiches dans la bote de dialogue Insrer date ne reprsentent pas la date actuelle ni ne refltent les dates/heures visualises par un visiteur lorsqu'il affiche votre site. Elles ne sont qu'un exemple de la manire dont vous souhaitez afficher ces informations.
1 Dans la fentre de document, placez le curseur l o vous dsirez insrer la date.
version prliminaire
Choisissez Insertion > Date. Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Date.
3 Dans la bote de dialogue qui apparat alors, slectionnez un format d'affichage pour le jour de la semaine, pour la
date et pour l'heure.

4 Si vous dsirez que cette date soit actualise chaque nouvel enregistrement du document, activez l'option Mettre
jour automatiquement lors de l'enregistrement. Si vous prfrez que la date soit insre comme du texte normal et ne soit jamais actualise, dsactivez cette option.
5 Cliquez sur OK pour insrer la date.
Si vous avez slectionn Mettre jour automatiquement lors de l'enregistrement, vous pouvez modifier le format de la date aprs l'avoir insre dans le document, en cliquant sur le texte mis en forme et en slectionnant Modifier le format de date dans l'inspecteur Proprits.
Ajout et modification d'images

A propos des images
Diffrents types de formats de fichiers graphiques existent, mais trois formats de fichiers graphiques sont gnralement utiliss dans les pages Web : GIF, JPEG et PNG. Les formats de fichier GIF et JPEG sont les plus rpandus ; ils peuvent tre affichs dans la plupart des navigateurs. Les fichiers PNG sont les plus adapts pour la plupart des types de graphiques Web en raison de leur souplesse et de leur taille rduite ; toutefois, l'affichage d'images PNG n'est que partiellement pris en charge dans Microsoft Internet Explorer (4.0 et versions ultrieures) et dans Netscape Navigator (4.04 et versions ultrieures). A moins que votre site ne soit spcifiquement destin des navigateurs prenant en charge le format PNG, utilisez des fichiers GIF ou JPEG afin de cibler un plus large public.
GIF (Graphic Interchange Format) Les fichiers GIF utilisent un maximum de 256 couleurs et sont destins l'affichage d'images tons non continus ou d'images comportant de larges zones de couleurs unies, telles que les barres de navigation, les boutons, les icnes, les logos ou d'autres images contenant des tons et des couleurs uniformes. JPEG (Joint Photographic Experts Group) Le format de fichier JPEG est le format suprieur destin aux photographies
ou aux images tons continus, car de tels fichiers peuvent contenir des millions de couleurs. Lorsque la qualit d'un fichier JPEG augmente, sa taille et son temps de tlchargement augmentent galement. Il est souvent possible d'obtenir un bon compromis entre la qualit de l'image et sa taille de fichier en compressant un fichier JPEG.
Le format de fichier PNG (Portable Network Group) Le format de fichier PNG est un format de remplacement non brevet pour les fichiers GIF, qui inclut la prise en charge des images couleurs indexes, en niveaux de gris et en couleurs vraies ainsi que la prise en charge du canal alpha pour la transparence. PNG est le format de fichier natif d'Adobe Fireworks. Les fichiers PNG conservent toutes les informations d'origine sur les calques, les vecteurs, les couleurs et les effets (comme par exemple des ombres portes) et tous ces lments peuvent tre modifis tout moment. Les fichiers doivent avoir l'extension .png pour tre reconnus comme fichiers PNG par Dreamweaver.
Insertion d'une image

Lorsque vous insrez une image dans un document Dreamweaver, le programme cre une rfrence ce fichier d'image dans le code source HTML. Pour que cette rfrence soit correcte, le fichier d'image doit rsider sur le site. Dans le cas contraire, Dreamweaver vous invite copier le fichier sur le site.
version prliminaire
Vous pouvez galement insrer des images de faon dynamique. Les images dynamiques sont des images qui changent souvent ; par exemple, les systmes de rotation de bannires publicitaires qui slectionnent les bannires de manire alatoire, puis affichent l'image de la bannire slectionne lors de l'affichage d'une page. Aprs avoir insr une image, vous pouvez dfinir les options d'accessibilit aux balises d'image qui pourront tre lues par les lecteurs d'cran destins aux utilisateurs malvoyants. Ces attributs peuvent tre modifis dans le code HTML. Vous trouverez un didacticiel consacr l'insertion d'images l'adresse www.adobe.com/go/vid0148_fr.
1 Placez le point d'insertion l'endroit o doit apparatre l'image dans la fentre de document, puis procdez de l'une
des manires suivantes :
Dans la catgorie Commun du panneau Insertion, cliquez sur l'icne Images
Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Images et slectionnez l'icne Image.
Lorsque l'icne Image est affiche dans le panneau Insertion, vous pouvez la faire glisser vers la fentre du document (ou la fentre du mode Code si vous travaillez sur le code).
Choisissez Insertion > Image. Faites glisser une image partir du panneau Actifs (Fentre > Actifs) vers l'emplacement souhait dans la fentre
de document, puis passez l'tape 3.
Faites glisser une image partir du panneau Fichiers vers l'emplacement souhait dans la fentre de document, puis
passez l'tape 3.
Faites glisser une image partir du bureau vers l'emplacement dsir sur la page, puis passez l'tape 3.
2 Dans la bote de dialogue qui s'affiche, procdez de l'une des manires suivantes :
Slectionnez Systme de fichiers pour choisir un fichier d'image. Slectionnez Source de donnes pour choisir une source d'images dynamiques. Cliquez sur le bouton Sites et serveurs pour choisir un fichier d'image dans un dossier distant de l'un de vos sites
Dreamweaver.
3 Parcourez l'arborescence pour slectionner l'image ou la source de contenu insrer.
Tant que le document sur lequel vous travaillez n'a pas encore t enregistr, Dreamweaver cre automatiquement une rfrence d'emplacement de fichier de type file://. Lorsque vous enregistrez le document sur le site, Dreamweaver convertit cette rfrence en indiquant un chemin relatif au document. Remarque : Lors de l'insertion d'images, vous pouvez galement utiliser un chemin absolu vers une image qui rside sur un serveur distant (c'est--dire une image qui n'est pas disponible sur le disque dur local). Toutefois, si vous constatez des problmes de performances lorsque vous travaillez, vous pouvez dcider de dsactiver l'affichage de l'image en mode Cration en dslectionnant l'option Commandes > Afficher les fichiers externes.
4 Cliquez sur OK. La bote de dialogue Attributs d'accessibilit aux balises d'image s'affiche si elle a t active dans
les prfrences (Edition > Prfrences).

5 Tapez des valeurs dans les zones Texte secondaire et Description longue, puis cliquez sur OK.
Dans la zone Texte secondaire, entrez un nom ou une brve description de l'image. Le lecteur d'cran lit les
informations que vous entrez ici. N'entrez pas plus de 50 caractres. Pour de plus longues descriptions, entrez plutt, dans la zone de texte Description longue, un lien vers un fichier donnant davantage d'informations propos de l'image.
Dans la zone de texte Description longue, saisissez l'emplacement du fichier afficher lorsque l'utilisateur clique
sur l'image ou cliquez sur l'icne du dossier pour naviguer jusqu' un fichier. Cette zone de texte fournit un lien vers un fichier qui concerne ou donne davantage d'informations sur l'image.
version prliminaire
Remarque : Vous pouvez entrer les informations dans une seule zone de texte ou les deux, selon vos besoins. Le lecteur d'cran lit l'attribut Alt de l'image. Remarque : Si vous cliquez sur Annuler, l'image s'affiche dans le document, mais Dreamweaver ne lui associe ni balises ni attributs d'accessibilit.
6 Dans l'inspecteur Proprits (Fentre > Proprits), dfinissez les proprits de l'image.
Voir aussi
Cration d'images dynamiques la page 594 Cartes graphiques la page 292 Optimisation de l'espace de travail pour la conception de pages accessibles la page 707 Dfinition des proprits de page la page 216 Didacticiel sur l'insertion d'images
Dfinition des proprits de l'image

L'inspecteur Proprits Images vous permet de dfinir les proprits d'une image. Pour voir toutes les proprits illustres, cliquez sur la flche d'agrandissement, dans le coin infrieur droit de l'inspecteur Proprits.
1 Choisissez la commande Fentre > Proprits pour afficher l'inspecteur Proprits pour une image slectionne. 2 Dans la zone de texte situe au-dessous de l'image miniature, dfinissez un nom d'image auquel vous pouvez faire
rfrence lors de l'utilisation d'un comportement Dreamweaver (tel que Permuter une image) ou lors de l'utilisation d'un langage de script tel que JavaScript ou VBScript.
3 Dfinissez les options de l'image.
L et H La largeur et la hauteur de l'image, en pixels. Dreamweaver met automatiquement jour ces zones de texte avec
les dimensions d'origine de l'image lorsque vous insrez une image dans une page. Si vous dfinissez pour L (largeur) et H (hauteur) des valeurs qui ne correspondent pas aux dimensions relles de l'image, celle-ci risque de ne pas s'afficher correctement dans un navigateur (Pour revenir aux valeurs d'origine, cliquez sur les tiquettes de zone de texte L et H ou sur le bouton Rtablir la taille originale de l'image qui apparat droite des zones de texte L et H une fois que vous avez tap de nouvelles valeurs. Remarque : Vous pouvez modifier ces valeurs pour modifier l'chelle d'affichage de cette instance de l'image, mais cette technique ne diminuera pas le temps de chargement, puisque le navigateur chargera la totalit de l'image son chelle normale avant de la rduire. Pour rduire le temps de tlchargement et tre sr que toutes les instances de l'image sont affiches aux mmes dimensions, utilisez une application de retouche d'image pour adapter les proportions de l'image.
Src Spcifie le fichier source de l'image. Tapez le chemin d'accs ou cliquez sur l'icne du dossier pour trouver le fichier source et le slectionner. Lien Spcifie un lien hypertexte pour l'image. Faites glisser l'icne Pointer vers un fichier dans le panneau Fichiers,
cliquez sur l'icne de dossier pour rechercher et slectionner un document de votre site ou tapez directement l'URL.
version prliminaire
Alignement Aligne l'image et le texte sur la mme ligne. Sec Spcifie le texte secondaire qui apparatra la place de l'image dans les navigateurs de type texte seulement, ou
dans les navigateurs dont l'utilisateur a dsactiv le tlchargement automatique des images. Pour les utilisateurs malvoyants qui utilisent un synthtiseur vocal avec un navigateur en mode texte, le texte est lu. Dans certains navigateurs, ce texte apparat galement lorsque le pointeur se trouve sur l'image.
Nom de la carte et outils Zone ractive Permettent de nommer et de crer une carte graphique ct client Espace V. et Espace H. Ajoutent un espace, en pixels, le long des cts de l'image. Espace V ajoute un espace le long des bords suprieur et infrieur d'une image. Espace H ajoute un espace le long des bords gauche et droit d'une image. Cible Spcifie la fentre ou le cadre dans lequel la page lie devrait tre charge. Cette option n'est pas disponible lorsque l'image n'est pas lie un autre fichier. Les noms de tous les cadres dans le jeu de cadres actuel s'affichent dans la liste Cible. Vous pouvez galement choisir parmi les noms de cible rservs suivants :
_blank charge le fichier li dans une nouvelle fentre, sans nom, du navigateur. _parent charge le fichier li dans le jeu de cadres parent, ou dans la fentre parente du cadre contenant le lien. Si le cadre contenant le lien n'est pas imbriqu, le document li sera charg dans la fentre de base du navigateur. _self charge le fichier li dans le mme cadre, ou dans la mme fentre, que le lien. Cette cible tant celle par
dfaut, vous n'avez gnralement pas la spcifier.

_top charge le fichier li dans la fentre de base du navigateur, supprimant ainsi tous les cadres.
Bordure Correspond la largeur, en pixels, de la bordure de l'image. La valeur par dfaut est Pas de bordure. Modifier Lance l'diteur d'image que vous avez indiqu dans les prfrences d'diteurs externes et ouvre l'image
slectionne.
Modification des paramtres d'une image
affiche la bote de dialogue Aperu d'image, o vous pouvez optimiser
l'image.
Recadrer
Permet de rogner une image en supprimant les zones indsirables de l'image slectionne.
Rchantillonner Permet de rchantillonner une image redimensionne et d'en amliorer la qualit dans ses nouvelles taille et forme. Luminosit et contraste Accentuer
Ajuste la luminosit et le contraste d'une image
Permet d'ajuster la nettet d'une image.
Rtablir la taille Ramne les valeurs L et H la taille originale de l'image. Ce bouton apparat droite des zones de texte L et H lorsque vous ajustez les valeurs de l'image slectionne.
Modification des attributs d'accessibilit d'une image dans le code

Si vous avez insr des attributs d'accessibilit pour une image, vous pouvez modifier ces valeurs dans le code HTML.
1 Slectionnez l'image dans la fentre de document. 2 Effectuez l'une des oprations suivantes :
Modifiez les attributs de l'image en mode Code. Cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), puis
choisissez Modifier la balise.
Modifiez la valeur Alt dans l'inspecteur Proprits.
version prliminaire
Alignement d'une image

Vous pouvez aligner une image sur du texte, sur une autre image, sur un plug-in ou sur d'autres lments de la ligne. Vous pouvez galement dfinir l'alignement horizontal d'une image.
1 Slectionnez l'image dans le mode Cration. 2 Dfinissez les attributs d'alignement de l'image dans l'inspecteur Proprits, l'aide du menu Alignement.
Vous pouvez dfinir l'alignement selon d'autres lments situs dans le mme paragraphe ou la mme ligne. Remarque : Le langage HTML ne permet pas de placer un texte autour des contours d'une image, contrairement certaines applications de traitement de texte. Les options d'alignement sont les suivantes :
Par dfaut Provoque un alignement sur la ligne de base. La valeur par dfaut varie selon le navigateur du visiteur du
site.
Ligne de base et Bas Alignent la ligne de base du texte (ou de tout autre lment du mme paragraphe) sur le bas de
l'objet slectionn.
Haut Aligne le haut d'une image sur le haut de l'lment le plus lev (image ou texte) dans la ligne. Milieu Aligne le milieu de l'image avec la ligne de base de la ligne. Haut du texte Aligne le haut de l'image avec le haut du plus grand caractre de la ligne de texte. Milieu absolu Aligne le milieu de l'image avec le milieu du texte dans la ligne actuelle. Bas absolu Aligne le bas de l'image avec le bas de la ligne de texte (y compris les jambages infrieurs comme dans la
lettre g).
Gauche Aligne l'image slectionne sur la marge de gauche et place le texte qui l'entoure sa droite. Si le texte align gauche prcde l'objet sur la ligne, les objets aligns gauche sont gnralement placs automatiquement sur une nouvelle ligne. Droite Aligne l'image sur la marge de droite et place le texte qui l'entoure sa gauche. Si le texte align droite prcde l'objet sur la ligne, les objets aligns droite sont gnralement placs automatiquement sur une nouvelle ligne.
Redimensionnement visuel d'une image

Dans Dreamweaver, vous pouvez redimensionner visuellement certains lments comme des images, des plug-ins, des fichiers Shockwave ou SWF, des applets et des contrles ActiveX. Le redimensionnement visuel d'une image permet de mieux voir comment l'image affecte la mise en forme en diffrentes dimensions. Il n'adapte pas les dimensions de l'image aux proportions que vous avez spcifies. Si vous redimensionnez visuellement une image dans Dreamweaver, mais que vous n'utilisez pas d'application de retouche d'image (comme Adobe Fireworks) pour en adapter les proportions aux dimensions dsires, le navigateur de l'utilisateur devra le faire lorsque la page sera charge. Cela risque d'entraner l'allongement du temps de tlchargement de la page et l'affichage incorrect de l'image dans le navigateur. Pour rduire le temps de tlchargement et tre sr que toutes les instances de l'image sont affiches aux mmes dimensions, utilisez une application de retouche d'image pour adapter les proportions de l'image. Lorsque vous redimensionnez une image dans Dreamweaver, vous pouvez la rchantillonner afin de l'adapter ses nouvelles dimensions. Le rchantillonnage ajoute ou enlve des pixels d'images JPEG ou GIF redimensionnes afin qu'elles correspondent le mieux possible l'aspect des images originales. Le rchantillonnage d'une image rduit la taille de son fichier, ce qui permet d'en acclrer le tlchargement.
version prliminaire
Voir aussi
Modification d'images dans Dreamweaver la page 249
Redimensionnement visuel d'un lment

1 Slectionnez l'lment (par exemple, une image ou un fichier SWF) dans la fentre de document.
Des poignes de redimensionnement apparaissent droite et en bas de l'lment, et dans le coin infrieur droit. Si ces poignes n'apparaissent pas, cliquez l'extrieur de l'lment redimensionner, puis slectionnez-le nouveau ou cliquez sur la balise correspondante dans le slecteur de balises.
2 Pour redimensionner l'lment, utilisez l'une des mthodes suivantes :
Pour ajuster la largeur de l'lment, dplacez la poigne droite de la slection. Pour ajuster la hauteur de l'lment, dplacez la poigne au bas de la slection. Pour ajuster simultanment la largeur et la hauteur de l'lment, faites glisser la poigne de l'angle de la slection. Pour conserver les proportions de l'lment (rapport largeur/hauteur) lorsque vous modifiez ses dimensions, faites
glisser la poigne de l'angle de la slection tout en appuyant sur la touche Maj.
Pour ajuster la largeur et la hauteur d'un lment une taille prcise, (par exemple, 1x1 pixel), utilisez l'inspecteur Proprits pour entrer une valeur numrique. Les lments peuvent tre redimensionns visuellement une taille minimale de 8 x 8 pixels. cliquez sur le bouton Rtablir la taille dans l'inspecteur Proprits.
3 Pour rtablir la taille originale d'un lment redimensionn, supprimez les valeurs des zones de texte L et H ou
Rtablissement de la taille originale d'une image

Cliquez sur le bouton Rtablir la taille
dans l'inspecteur Proprits des images.
Rchantillonnage d'une image redimensionne

1 Redimensionnez l'image de la manire dcrite ci-dessus. 2 Cliquez sur le bouton Rchantillonner
Remarque : Vous ne pouvez pas rchantillonner les espaces rservs pour une image ou les lments autres que les images bitmap.
Insertion d'un espace rserv pour l'image

Un espace rserv pour une image est un graphique que vous utilisez jusqu' ce que le dessin final soit prt pour tre ajout une page Web. Vous pouvez dfinir la taille et la couleur de l'espace rserv et lui donner une tiquette de texte.
1 Dans la fentre de document, placez le point d'insertion l'endroit o vous voulez insrer un espace rserv pour
un graphique.
2 Cliquez sur Insertion > Objets image > Espace rserv pour limage. 3 Dans la zone de texte Nom (facultatif), tapez le texte que vous souhaitez voir apparatre comme tiquette de l'espace
rserv pour l'image. Laissez la zone de texte vide si vous ne voulez pas faire apparatre d'tiquette. Le nom doit commencer par une lettre et ne peut contenir que des lettres ou des chiffres : les espaces et les caractres ASCII tendu ne sont pas autoriss.
4 (Obligatoire) Dans les zones de texte Largeur et Hauteur, saisissez un nombre pour dfinir la taille de l'image en
pixels.
version prliminaire
5 (Facultatif) Pour Couleur, procdez de l'une des manires suivantes pour appliquer une couleur :
Utilisez le slecteur de couleur pour slectionner une couleur. Entrez la valeur hexadcimale de la couleur (par exemple #FF0000). Entrez le nom d'une couleur scurise pour le Web (par exemple rouge).
6 (Facultatif) Dans Texte secondaire, entrez une description de l'image pour les personnes utilisant un navigateur en
mode texte. Remarque : Une balise image est insre automatiquement dans le code HTML, avec un attribut src vide.
7 Cliquez sur OK.
Les attributs de couleur et de taille ainsi que l'tiquette de l'espace rserv s'affichent comme suit :
Lorsqu'ils sont visualiss dans un navigateur, le texte de l'tiquette et celui de la taille ne s'affichent pas.
Voir aussi
Redimensionnement visuel d'une image la page 246 Utilisation de Fireworks pour modifier les espaces rservs pour les images Dreamweaver la page 375
Remplacement d'un espace rserv pour une image

Un espace rserv pour l'image n'affiche pas d'image dans un navigateur. Avant de publier votre site, il convient de remplacer tous les espaces rservs pour une image que vous avez ajouts par des fichiers d'image adapts au Web, tels que des images GIF ou JPEG. Si vous possdez Fireworks, vous pouvez crer un nouveau graphique partir d'un espace rserv pour image dans Dreamweaver. La nouvelle image reprend la mme taille que celle de l'espace rserv pour l'image. Vous pouvez modifier l'image, puis la remplacer dans Dreamweaver.
1 Dans la fentre Document, procdez de l'une des manires suivantes :
Double-cliquez sur l'espace rserv pour l'image. Cliquez sur l'espace rserv pour l'image pour le slectionner, puis dans l'inspecteur Proprits (Fentre >
Proprits), cliquez sur l'icne du dossier ct de la zone de texte Src.
2 Dans la bote de dialogue Source de l'image, localisez l'image que vous voulez utiliser pour remplacer l'espace
rserv, puis cliquez sur OK.
Voir aussi
Utilisation de Fireworks pour modifier les espaces rservs pour les images Dreamweaver la page 375
Dfinition des proprits de l'espace rserv pour l'image

Pour dfinir les proprits d'un espace rserv pour l'image, slectionnez l'espace rserv dans la fentre de document, puis choisissez la commande Fentre > Proprits pour afficher l'inspecteur Proprits. Cliquez sur la flche d'agrandissement dans l'angle infrieur droit pour afficher toutes les proprits.
version prliminaire
Utilisez l'inspecteur Proprits pour dfinir un nom, une largeur, une hauteur, une source d'image, une autre description de texte, un alignement ou une couleur pour l'espace rserv pour l'image.
Dans l'inspecteur Proprits de l'espace rserv, la zone de texte grise et la zone de texte Aligner sont dsactives. Vous pouvez dfinir ces proprits dans l'inspecteur Proprits de l'image lorsque vous remplacez l'espace rserv par une image.
Parmi les options suivantes, dfinissez celles de votre choix : L et H Dfinissent la largeur et la hauteur de l'espace rserv pour l'image, en pixels. Src Spcifie le fichier source de l'image. Pour un espace rserv pour une image, cette zone de texte est vide. Cliquez sur le bouton Parcourir pour slectionner une image utiliser en remplacement du graphique de l'espace rserv. Lien Spcifie un lien hypertexte pour l'espace rserv de l'image. Faites glisser l'icne Pointer vers un fichier dans le
panneau Fichiers, cliquez sur l'icne de dossier pour rechercher et slectionner un document de votre site ou tapez directement l'URL.
Sec Spcifie le texte secondaire qui apparatra la place de l'image dans les navigateurs de type texte seulement, ou
dans les navigateurs dont l'utilisateur a dsactiv le tlchargement automatique des images. Pour les utilisateurs malvoyants qui utilisent un synthtiseur vocal avec un navigateur en mode texte, le texte est lu. Dans certains navigateurs, ce texte apparat galement lorsque le pointeur se trouve sur l'image.
Crer Permet de lancer Fireworks pour crer une image de remplacement. Le bouton Crer est dsactiv sauf si
Fireworks est galement install sur votre ordinateur.

Rtablir la taille Ramne les valeurs L et H la taille originale de l'image. Couleur Spcifie une couleur pour l'espace rserv de l'image.
Voir aussi
Utilisation de Fireworks pour modifier les espaces rservs pour les images Dreamweaver la page 375
Modification d'images dans Dreamweaver

Vous pouvez rchantillonner, recadrer, optimiser et accentuer les images dans Dreamweaver. Vous pouvez galement rgler leur luminosit et leur contraste.
Fonctions de retouche d'image

Dreamweaver comprend des fonctions basiques de retouche d'image, ce qui vous vite de devoir lancer une application externe pour effectuer cette tche (par exemple, Fireworks ou Photoshop). Les outils de retouche d'image de Dreamweaver sont conus pour un travail simplifi avec les concepteurs de contenu responsables de la cration des fichiers d'image utiliss sur votre site Web.
version prliminaire
Remarque : Il n'est pas ncessaire d'installer Fireworks ou d'autres applications de retouche d'image sur votre ordinateur pour utiliser les fonctions de retouche d'image de Dreamweaver.
Choisissez Modifier > Image. Dfinissez l'une des fonctions de retouche d'image Dreamweaver suivantes : Rchantillonner Ajoute ou enlve des pixels d'images JPEG ou GIF redimensionnes afin qu'elles correspondent le
mieux possible l'aspect des images originales. Le rchantillonnage d'une image rduit la taille de son fichier, ce qui permet d'en acclrer le tlchargement. Lorsque vous redimensionnez une image dans Dreamweaver, vous pouvez la rchantillonner afin de l'adapter ses nouvelles dimensions. Lorsqu'un objet bitmap est rchantillonn, des pixels sont ajouts l'image ou en sont enlevs afin de l'agrandir ou de la rduire. En gnral, le rchantillonnage d'une image une rsolution suprieure provoque une faible perte de qualit. Le rchantillonnage une rsolution infrieure, en revanche, provoque toujours une perte de donnes et donne une moins bonne qualit.
Recadrer Permet de rduire la surface des images. En gnral, il est utile pour mettre en vidence le sujet de l'image et supprimer les aspects indsirables qui entourent le centre d'intrt de l'image. Luminosit et contraste Modifie la luminosit et le contraste des pixels qui composent l'image. Ceci affecte les surbrillances, les ombres et les demi-tons d'une image. Cette fonction est utilise pour corriger les images trop sombres ou trop claires. Accentuer Ajuste la mise au point d'une image en augmentant le contraste des bords sur l'image. Lorsque vous scannez
une image ou que vous prenez une photo numrique, la plupart des logiciels de capture d'images estompent par dfaut les bords des objets photographis. Cela empche les dtails extrmement prcis de se perdre dans les pixels dont sont constitues les images numriques. Cependant, il est souvent ncessaire d'accentuer l'image pour faire ressortir les dtails dans les fichiers d'image numrique, ce qui augmente le contraste des bords et rend l'image encore plus nette. Remarque : Les fonctions de retouche d'image de Dreamweaver s'appliquent uniquement aux formats de fichiers d'image JPEG et GIF. Les autres formats de fichiers d'image bitmap ne peuvent pas tre modifis l'aide de ces fonctions.
Recadrage d'une image

Dreamweaver permet de recadrer (ou rogner) les images bitmap. Remarque : Lorsque vous recadrez une image, le fichier d'image source est modifi sur le disque. Il peut donc s'avrer utile de conserver une copie de sauvegarde du fichier d'image au cas o vous auriez besoin de revenir l'image d'origine.
1 Ouvrez la page qui contient l'image recadrer, slectionnez l'image et procdez de l'une des manires suivantes :
Cliquez sur l'icne Recadrer
Choisissez Modifier > Image > Recadrer.

Des poignes de recadrage apparaissent autour de l'image slectionne.
2 Ajustez-les jusqu' ce que la surface de l'image conserver soit entoure d'une zone limite. 3 Double-cliquez dans cette zone ou appuyez sur Entre pour recadrer la slection. 4 Une bote de dialogue vous informe que le fichier image que vous recadrez sera modifi sur le disque. Cliquez sur
OK. Chaque pixel de l'image bitmap situ hors de la zone limite est supprim mais les autres objets de l'image ne sont pas affects.
5 Vrifiez l'aide de l'aperu que l'image correspond vos attentes. Si ce n'est pas le cas, choisissez Edition > Annuler
Recadrer pour revenir l'image d'origine. Remarque : Vous pouvez annuler l'effet de la commande Recadrer (et revenir au fichier d'image d'origine) jusqu'au moment o vous quittez Dreamweaver ou alors modifiez le fichier dans une application de retouche d'image.
version prliminaire
Optimisation d'une image

Vous pouvez optimiser des images sur vos pages Web dans Dreamweaver.
1 Ouvrez la page qui contient l'image optimiser, slectionnez l'image et procdez de l'une des manires suivantes :
Cliquez sur le bouton de modification des paramtres de l'image Choisissez Modifier > Image > Optimiser.
dans l'inspecteur Proprits de l'image.
2 Apportez les modifications dans la bote de dialogue Aperu d'image, puis cliquez sur OK.
Accentuation d'une image

L'accentuation augmente le contraste des pixels autour des objets pour augmenter la dfinition de l'image et obtenir une meilleure nettet.
1 Ouvrez la page qui contient l'image accentuer, slectionnez l'image et procdez de l'une des manires suivantes :
Cliquez sur le bouton Accentuer
Choisissez Modifier > Image > Accentuer.

2 Pour spcifier le degr d'accentuation appliqu par Dreamweaver l'image, dplacez le curseur ou tapez une valeur
comprise entre 0 et 10 dans la zone de texte. Lorsque vous ajustez la nettet de l'image l'aide de la bote de dialogue Accentuer, vous pouvez afficher un aperu de l'image modifie.
3 Lorsque vous tes satisfait de l'image, cliquez sur OK. 4 Enregistrez vos modifications en choisissant Fichier > Enregistrer ou revenez l'image d'origine en choisissant
Edition > Annuler Accentuer. Remarque : Vous pouvez annuler l'effet de la commande Accentuer (et revenir au fichier d'image d'origine) uniquement avant d'enregistrer la page qui contient l'image. Une fois que vous avez enregistr la page, les modifications apportes l'image sont dfinitivement enregistres.
Ajustement de la luminosit et du contraste d'une image

La fonction Luminosit/Contraste modifie la luminosit ou le contraste des pixels qui composent l'image. Ceci affecte les surbrillances, les ombres et les demi-tons d'une image. Cette fonction est utilise pour corriger les images trop sombres ou trop claires.
1 Ouvrez la page qui contient l'image ajuster, slectionnez l'image et procdez de l'une des manires suivantes :
Cliquez sur le bouton Luminosit/Contraste
Choisissez Modifier > Image > Luminosit/Contraste.

2 Dplacez les curseurs de luminosit et de contraste pour modifier les valeurs votre convenance. Les valeurs sont
comprises entre -100 et 100.

3 Cliquez sur OK.
Cration d'une image survole

Vous pouvez insrer des images survoles dans votre page. Une image survole est une image qui, lorsqu'elle est visualise dans un navigateur, change lorsque le pointeur vient se placer au-dessus delle. Vous devez disposer de deux images pour crer l'image survole : l'image principale (affiche au chargement de la page) et l'image secondaire (qui apparat lorsque le pointeur est plac au-dessus de l'image principale). Les deux images utilises doivent avoir les mmes dimensions ; si ce n'est pas le cas, Dreamweaver redimensionne la seconde image en fonction de la taille de la premire.
version prliminaire
Les images survoles sont automatiquement dfinies pour rpondre l'vnement onMouseOver. Vous pouvez configurer une image pour qu'elle rponde un vnement diffrent (par exemple, un clic de souris) ou modifier une image survole. Vous trouverez un didacticiel consacr la cration d'images survoles l'adresse www.adobe.com/go/vid0159_fr.
1 Dans la fentre de document, placez le point d'insertion l'endroit o vous voulez insrer l'image survole. 2 Insrez l'image survole l'aide de l'une des mthodes suivantes :
Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Images puis slectionnez l'icne Image
survole. Lorsque l'icne Image survole s'affiche dans le panneau Insertion, vous pouvez la faire glisser jusqu' la fentre de document.
Slectionnez Insertion > Objets image > Image survole.

3 Dfinissez les options, puis cliquez sur OK.
Nom de l'image Nom de l'image survole. Image dorigine L'image qui doit s'afficher au chargement de la page. Entrez le chemin d'accs dans la zone de texte ou cliquez sur Parcourir et slectionnez l'image. Image survole L'image afficher lorsque le pointeur est plac au-dessus de l'image originale. Entrez le chemin d'accs de l'image ou cliquez sur Parcourir pour la slectionner. Prcharger l'image survole Prcharge les images dans la mmoire cache du navigateur afin d'viter tout dlai lorsque
vous faites passer le pointeur de la souris par-dessus l'image.

Texte secondaire (Facultatif) Texte qui dcrit l'image l'intention des personnes utilisant un navigateur en mode
texte.
Si cliqu, aller l'URL Le fichier ouvrir lorsqu'un utilisateur clique sur l'image survole. Entrez le chemin d'accs du fichier ou cliquez sur Parcourir pour le slectionner.
Remarque : Si vous ne dfinissez pas un lien pour l'image, Dreamweaver insre un lien nul (#) dans le code source HTML auquel le comportement de survol est attach. Si vous supprimez le lien nul, l'image survole ne fonctionne plus.
4 Choisissez Fichier > Aperu dans le navigateur ou appuyez sur la touche F12. 5 Dans le navigateur, placez le pointeur au-dessus de l'image d'origine pour voir l'image survole.
Remarque : Il est impossible de voir l'effet d'une image survole dans le mode Cration.
Voir aussi
Application du comportement Permuter une image la page 370 Didacticiel sur les images survoles
Utilisation d'un diteur d'image externe

Dans Dreamweaver, vous pouvez ouvrir une image slectionne dans un diteur d'image externe. Lorsque vous revenez dans Dreamweaver aprs avoir enregistr le fichier d'image modifi, toutes les modifications apportes l'image sont visibles dans la fentre de document. Vous pouvez dfinir Fireworks comme principal diteur d'image. Vous pouvez galement dfinir quels types de fichier un diteur peut ouvrir et vous pouvez slectionner plusieurs diteurs d'image. Par exemple, vous pouvez dfinir des prfrences afin de dmarrer Fireworks pour modifier les fichiers GIF et de lancer un diteur d'image diffrent pour modifier les fichiers JPG ou JPEG.
version prliminaire
Voir aussi
Utilisation de Photoshop et Dreamweaver la page 379 Utilisation de Fireworks et Dreamweaver la page 373 Lancement d'un diteur externe pour des fichiers multimdia la page 267
Dmarrage de l'diteur d'image externe

Double-cliquez sur l'image modifier. Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh)
sur l'image modifier, choisissez l'option Modifier avec > Parcourir et slectionnez un diteur.
Slectionnez l'image modifier, puis cliquez sur Modifier dans l'inspecteur Proprits. Double-cliquez sur le fichier d'image dans le panneau Fichiers pour lancer l'diteur d'image principal. Si vous n'avez
pas indiqu d'diteur d'image, Dreamweaver excute l'diteur par dfaut de ce type de fichier. Remarque : Lorsque vous ouvrez directement une image partir du panneau Fichiers, les fonctionnalits d'intgration de Fireworks sont inoprantes ; Fireworks n'ouvre pas le fichier original PNG. Pour utiliser ces fonctionnalits d'intgration de Fireworks, ouvrez les images partir de la fentre de document. Si l'image mise jour n'apparat pas une fois de retour dans la fentre Dreamweaver, slectionnez l'image et cliquez sur le bouton Actualiser dans l'inspecteur Proprits.
Dfinition d'un diteur d'image externe pour un type de fichier existant

Vous pouvez slectionner l'diteur d'image utiliser pour ouvrir et modifier les fichiers graphiques.
1 Ouvrez la bote de dialogue Types de fichiers/Editeurs en effectuant l'une des oprations suivantes :
Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh) et slectionnez la
catgorie Types de fichiers/Editeurs dans la liste de gauche.
Choisissez la commande Edition > Modifier avec diteur externe, puis slectionnez Types de fichiers/Editeurs.
2 Dans la liste Extensions, slectionnez l'extension de fichier pour laquelle dfinir un diteur externe. 3 Cliquez sur le bouton Ajouter (+) au-dessus de la liste Editeurs. 4 Dans la bote de dialogue Slectionner un diteur externe, recherchez l'application dmarrer en tant qu'diteur
pour ce type de fichier.

5 Dans la bote de dialogue Prfrences, cliquez sur Principal si vous souhaitez que cet diteur soit l'diteur principal
pour ce type de fichier.

6 Si vous souhaitez configurer un diteur supplmentaire pour ce type de fichier, rptez les tapes 3 et 4.
Dreamweaver utilise automatiquement l'diteur principal lorsque vous modifiez ce type d'image. Vous pouvez choisir l'un des autres diteurs figurant dans la liste, partir du menu droulant de l'image, dans la fentre de document.
Ajout d'un nouveau type de fichier la liste Extensions

version prliminaire
2 Dans la bote de dialogue Types de fichiers/Editeurs, cliquez sur le bouton Ajouter (+) au-dessus de la liste
Extensions. Une zone de texte s'affiche dans la liste Extensions.

3 Tapez l'extension de fichier pour le type de fichier que vous voulez ouvrir avec l'diteur. 4 Pour slectionner un diteur externe pour le type de fichier, cliquez sur le bouton Ajouter (+) au-dessus de la liste
Editeurs.
5 Dans la bote de dialogue qui apparat alors, slectionnez l'application utiliser pour modifier ce type d'image. 6 Cliquez sur Principal si vous dsirez que ce programme soit l'diteur principal pour ce type d'image.
Modification d'une prfrence d'diteur existante

2 Dans la bote de dialogue Types de fichiers/Editeurs, slectionnez dans la liste Extensions le type de fichier que vous
souhaitez modifier pour visualiser les diteurs actuellement dfinis.

3 Dans la liste Editeurs, slectionnez l'diteur que vous dsirez affecter ce type de fichier, puis procdez de l'une des
manires suivantes :
Cliquez sur le bouton Ajouter (+) ou Supprimer (-), au-dessus de la liste Editeurs, pour ajouter ou supprimer un
diteur.
Cliquez sur le bouton Rendre principal pour dfinir l'diteur lancer par dfaut pour la retouche.
Application de comportements aux images

Vous pouvez appliquer l'un des comportements disponibles une image ou la zone ractive d'une image. Lorsque vous appliquez un comportement une zone ractive, Dreamweaver insre le code source HTML ncessaire dans la balise area. Il existe trois comportements qui s'appliquent spcifiquement aux images : Prcharger les images, Permuter une image et Restaurer l'interversion d'images.
Prcharger les images Place dans la mmoire cache du navigateur les images qui ne sont pas immdiatement affiches lors du chargement de la page (par exemple, les images de substitution appeles par un comportement, un lment PA ou une fonction en JavaScript). Cela vite l'utilisateur d'attendre que ces images soient charges, lorsqu'un vnement dclenche leur apparition. Permuter une image Remplace une image par une autre, en modifiant l'attribut SRC de la balise img. Utilisez cette action pour crer des substitutions de boutons et autres effets sur des images (y compris la substitution de plusieurs images la fois). Restaurer l'image intervertie Rtablit la dernire interversion d'images son tat d'origine. Cette action est automatiquement ajoute par dfaut lorsque vous associez l'action Permuter une image un objet ; en principe, vous n'avez pas besoin d'y faire appel manuellement.
Vous pouvez galement utiliser des comportements pour crer des systmes de navigation plus sophistiqus, comme les menus de reroutage.
version prliminaire
Voir aussi
Insertion d'un menu de reroutage la page 290 Application du comportement Permuter une image la page 370 Application du comportement Prcharger les images la page 366
Insertion de fichiers SWF

A propos des types de fichiers FLA, SWF et FLV
Avant d'utiliser Dreamweaver pour insrer du contenu cr l'aide d'Adobe Flash, familiarisez-vous aux types de fichiers suivants :
Fichier FLA (.fla) Fichier source pour tout projet, cr dans l'outil de cration Flash. Ce type de fichier peut uniquement
tre ouvert dans comportement Flash (il ne peut pas l'tre dans Dreamweaver ni dans des navigateurs). Vous pouvez ouvrir le fichier FLA dans Flash, puis le publier sous la forme d'un fichier SWF ou SWT pour l'utiliser dans des navigateurs.
Fichier SWF (.swf) Version compile du fichier FLA (.fla), optimise pour l'affichage sur le Web. Ce fichier peut tre lu
dans les navigateurs et prvisualis dans Dreamweaver, mais il ne peut pas tre modifi dans Flash.
Fichier FLV (.flv) Est un fichier vido qui contient des donnes audio et vido codes, lisibles par Flash Player. Par
exemple, si vous utilisez un fichier vido QuickTime ou Windows Media, vous devez utiliser un encodeur (tel que Flash CS4 Video Encoder ou Sorensen Squeeze) pour convertir le fichier vido en fichier FLV. Pour plus d'informations, consultez le Centre de technologie vido l'adresse www.adobe.com/go/flv_devcenter_fr.
Voir aussi
Utilisation de Flash et Dreamweaver la page 389 Insertion de fichiers FLV la page 258
Insertion et prvisualisation de fichiers SWF

Dreamweaver permet d'ajouter des fichiers SWF vos pages et d'en consulter un aperu dans un document ou un navigateur. Vous pouvez galement dfinir les proprits des fichiers SWF dans l'inspecteur Proprits. Vous trouverez un didacticiel consacr l'ajout de fichiers SWF des pages Web l'adresse www.adobe.com/go/vid0150_fr.
Voir aussi
Utilisation de Flash et Dreamweaver la page 389 Modification dun fichier SWF depuis Dreamweaver dans Flash la page 389 Fichiers SWF et calques DHTML Insertion d'animations Shockwave la page 268 Insertion de fichiers FLV la page 258 Didacticiel consacr l'utilisation de Flash
version prliminaire
Insertion d'un fichier SWF

1 Dans la fentre de document (mode Cration), placez le point d'insertion l'endroit o vous souhaitez insrer le
contenu, puis procdez de l'une des manires suivantes :
Dans la catgorie Commun du panneau Insertion, choisissez Mdias puis cliquez sur l'icne SWF Choisissez Insertion > Mdias > SWF.
2 Dans la bote de dialogue qui s'affiche, slectionnez un fichier SWF (.swf).
Un espace rserv pour le fichier SWF s'affiche dans la fentre de document.
Cet espace rserv est entour d'un contour bleu onglet. L'onglet indique le type d'actif (fichier SWF) et l'ID du fichier SWF. Cet onglet comporte galement une icne qui reprsente un il. Il fait office de bascule entre le fichier SWF et les informations de tlchargement que les utilisateurs voient s'ils ne possdent pas la version correcte de Flash Player.
3 Enregistrez le fichier.
Dreamweaver vous informe que deux fichiers dpendants, expressInstall.swf et swfobject_modified.js, vont tre enregistrs dans un dossier Scripts de votre site. N'oubliez pas de charger ces fichiers lorsque vous placez le fichier SWF sur votre serveur Web. Les navigateurs ne peuvent afficher correctement le fichier SWF que si vous avez galement charg ces fichiers dpendants. Remarque : Microsoft Internet Information Server (IIS) ne traite pas les balises object imbriques. Pour les pages ASP, Dreamweaver utilise du code object/embed imbriqu au lieu du code object imbriqu lors de l'insertion de fichiers SWF ou FLV.
Modification des informations de tlchargement de Flash Player

Lorsque vous insrez un fichier SWF sur une page, Dreamweaver insre du code qui dtecte si l'utilisateur dispose de la version approprie de Flash Player. Si ce n'est pas le cas, la page affiche du contenu alternatif afin d'inviter l'utilisateur tlcharger la version la plus rcente. Vous pouvez tout moment modifier ce contenu alternatif. Cette procdure s'applique galement aux fichiers FLV. Remarque : Si l'utilisateur ne dispose pas de la version requise mais bien de Flash Player en version 6.0 r65 ou une version ultrieure, le navigateur affiche un programme d'installation express de Flash Player. Si l'utilisateur refuse l'installation express, la page affiche le contenu alternatif.
1 Dans la fentre de document, en mode Cration, slectionnez le fichier SWF ou FLV. 2 Cliquez sur l'icne reprsentant un il dans l'onglet du fichier SWF ou FLV.
Vous pouvez galement utiliser le raccourci CTRL + ] pour activer l'affichage du contenu alternatif. Pour rtablir l'affichage du fichier SWF/FLV, appuyez sur CTRL + [ jusqu' ce que l'intgralit du contenu alternatif soit slectionne. Ensuite, appuyez nouveau sur CTRL + [.
3 Modifiez le contenu comme vous le feriez pour tout autre contenu dans Dreamweaver.
Remarque : Il est impossible d'ajouter des fichiers SWF ou FLV en tant que contenu alternatif.
4 Cliquez nouveau sur l'icne reprsentant un il pour revenir l'affichage du fichier SWF (ou FLV).
version prliminaire
Prvisualisation de fichiers SWF dans la fentre de document

1 Dans la fentre de document, cliquez sur l'espace rserv du fichier SWF afin de slectionner son contenu. 2 Dans l'inspecteur Proprits (Fentre > Proprits), cliquez sur le bouton Lire. Cliquez sur le bouton Arrt pour
arrter la prvisualisation. Vous pouvez galement prvisualiser le fichier SWF dans un navigateur en appuyant sur la touche F12. Pour prvisualiser tous le fichiers SWF dans une page, appuyez sur les touches Ctrl+Alt+Maj+P (Windows) ou Maj+Option+Commande+P (Macintosh). Tous les fichiers SWF sont placs en mode Lecture.
Dfinition des proprits d'un fichier SWF

Vous pouvez dfinir les proprits des fichiers SWF dans l'inspecteur Proprits. Les proprits s'appliquent galement aux animations Shockwave.
Slectionnez un fichier SWF ou une animation Shockwave, puis dfinissez ses options dans l'inspecteur Proprits
(Fentre > Proprits). Pour afficher toutes les proprits, cliquez sur la flche de dveloppement dans le coin infrieur droit de l'inspecteur Proprits.
ID Dfinit un ID unique pour le fichier SWF. Entrez un ID dans la zone de texte sans titre, l'extrme gauche de
l'inspecteur Proprits. Depuis Dreamweaver CS4, un ID unique est requis.

L et H Spcifient la largeur et la hauteur de l'animation, en pixels. Fichier Spcifie le chemin d'accs au fichier SWF ou Shockwave. Cliquez sur l'icne de dossier pour rechercher un fichier ou entrez le chemin d'accs. Src Dfinit le chemin d'accs au document source (le fichier FLA), lorsque Dreamweaver et Flash sont tous deux installs sur votre ordinateur. Pour modifier un fichier SWF, mettez jour le document source de l'animation. Ar-pl Spcifie une couleur d'arrire-plan pour la zone d'animation. Cette couleur apparat galement lorsque
l'animation n'est pas en lecture (au cours du chargement et la fin de la lecture).

Modifier Dmarre Flash pour mettre jour un fichier FLA (fichier cr dans le programme de cration Flash). Cette
option est dsactive si Flash n'est pas install sur votre ordinateur.
Classe Permet d'appliquer une classe CSS l'animation. Boucle Active la lecture en boucle de l'animation. Si l'option Boucle n'est pas active, l'animation est lue une fois puis
s'arrte.
Lecture automatique Lit automatiquement l'animation lors du chargement de la page. Espace V. et Espace H. Dfinit le nombre de pixels d'espace blanc au-dessus, au-dessous et de chaque ct de
l'animation.
Qualit Contrle l'anticrnelage pendant la lecture de l'animation. Des valeurs leves amliorent l'apparence des animations. Toutefois, avec des valeurs leves, le rendu correct des animations l'cran exige un processeur plus rapide. Un paramtre faible amliore la vitesse au dtriment de l'apparence, alors qu'un paramtre lev favorise l'aspect par rapport la vitesse. L'option Basse automatiquement amliore la vitesse au dpart, mais galement l'apparence lorsque cela est possible. L'option Eleve automatiquement amliore de faon identique les deux qualits au dpart, mais sacrifie ensuite l'apparence pour la vitesse si ncessaire. Echelle Dtermine comment l'animation s'adapte aux dimensions dfinies dans les zones de largeur et de hauteur. Le paramtre par dfaut affiche l'animation entire. Alignement Dtermine l'alignement de l'animation sur la page. Wmode Dfinit le paramtre Wmode pour le fichier SWF de manire viter tout conflit avec des lments DHTML, comme des widgets Spry. La valeur par dfaut est Opaque, qui permet aux lments DHTML de s'affiche au-dessus des
version prliminaire
fichiers SWF dans un navigateur. Si le fichier SWF comprend des sections transparentes et si vous voulez que les lments DHTML apparaissent derrire celles-ci, activez l'option Transparent. Activez l'option Fentre pour supprimer le paramtre Wmode du code et permettre au fichier SWF de s'afficher au-dessus d'autres lments DHTML.
Lire Lit l'animation dans la fentre de document. Paramtres Ouvre une bote de dialogue dans laquelle vous pouvez indiquer des paramtres supplmentaires
transmettre l'animation. L'animation doit avoir t conue pour recevoir ces paramtres supplmentaires.
Insertion de documents FlashPaper

La fonctionnalit Insrer FlashPaper a t abandonne depuis Dreamweaver CS5.
Insertion de fichiers FLV

Insertion de fichiers FLV
Vous pouvez insrer facilement des vidos FLV dans vos pages Web sans avoir recours l'outil de cration Flash. Vous devez disposer d'un fichier FLV cod avant de commencer. Dreamweaver insre un composant SWF qui affiche le fichier FLV. Dans un navigateur, ce composant affiche le fichier FLV slectionn, ainsi qu'un jeu de contrles de lecture.
Dreamweaver dispose des options suivantes pour proposer de la vido FLV aux visiteurs de votre site :
Vido en tlchargement progressif Tlcharge le fichier FLV sur le disque dur du visiteur, puis lance sa lecture.
Contrairement aux mthodes traditionnelles de fourniture de vido par tlchargement et lecture , le tlchargement progressif permet de lancer la lecture du fichier vido avant la fin de son tlchargement.
Vido en flux continu Diffuse en continu le contenu vido et le lit sur une page Web aprs une courte priode de mise
en mmoire tampon, ce qui assure une lecture homogne. Pour activer la diffusion vido en continu sur vos pages Web, vous devez avoir accs Adobe Flash Media Server. Vous devez disposer d'un fichier FLV cod avant d'utiliser ce dernier dans Dreamweaver. Vous pouvez insrer les fichiers vido crs avec deux types de codecs (technologies de compression/dcompression) : Sorenson Squeeze et On2.
version prliminaire
Lorsque vous insrez un fichier FLV, tout comme dans le cas d'un fichier SDF ordinaire, Dreamweaver insre du code qui dtecte si l'utilisateur dispose d'une version approprie de Flash Player pour voir la vido. Si ce n'est pas le cas, la page affiche un contenu alternatif qui invite l'utilisateur tlcharger la version la plus rcente de Flash Player. Remarque : Pour pouvoir visualiser un fichier FLV, Flash Player en version 8 ou ultrieure doit tre install sur l'ordinateur de l'utilisateur. Si l'utilisateur ne dispose pas de la version requise de Flash Player, mais bien de Flash Player en version 6.0 r65 ou une version ultrieure, le navigateur affiche un programme d'installation express de Flash Player au lieu du contenu alternatif. Si l'utilisateur refuse l'installation express, la page affiche le contenu alternatif. Pour plus d'informations sur l'utilisation de vido, consultez le Centre de technologie vido l'adresse www.adobe.com/go/flv_devcenter_fr.
Insertion d'un fichier FLV

1 Choisissez Insertion > Mdias > FLV. 2 Dans la bote de dialogue Insrer un fichier FLV, choisissez Vido en tlchargement progressif dans le menu Type
de vido.
3 Renseignez les autres sections de la bote de dialogue selon les besoins puis cliquez sur OK.
Remarque : Microsoft Internet Information Server (IIS) ne traite pas les balises object imbriques. Pour les pages ASP, Dreamweaver utilise du code object/embed imbriqu au lieu du code object imbriqu lors de l'insertion de fichiers SWF ou FLV.
Dfinition des options pour la vido en tlchargement progressif

La bote de dialogue Insrer FLV permet de dfinir des options pour la remise par tlchargement progressif d'un fichier FLV insr dans une page Web.
1 Choisissez Insertion > Mdias > FLV (ou cliquez sur l'icne FLV de la catgorie Mdias de la barre d'insertion
Commun).
2 Dans la bote de dialogue Insrer FLV, choisissez Vido tlchargement progressif dans le menu Type de vido. 3 Dfinissez les options suivantes :
URL Spcifie le chemin absolu ou relatif du fichier FLV. Pour spcifier un chemin relatif (par exemple,
monchemin/mavideo.flv), cliquez sur le bouton Parcourir, accdez au fichier FLV et slectionnez-le. Pour spcifier un chemin absolu, tapez l'URL (par exemple, http://www.exemple.com/mavideo.flv) du fichier FLV.
Enveloppe Dfinit l'aspect du composant vido. Un aperu de lenveloppe slectionne apparat sous le menu
contextuel Enveloppe.
Largeur Indique la largeur (en pixels) du fichier FLV. Cliquez sur le bouton Dtecter la taille pour connatre la largeur exacte du fichier FLV. Si Dreamweaver ne peut pas dterminer la largeur, tapez une valeur. Hauteur Indique la hauteur (en pixels) du fichier FLV. Cliquez sur le bouton Dtecter la taille pour connatre la
hauteur exacte du fichier FLV. Si Dreamweaver ne peut pas dterminer la hauteur, tapez une valeur. Remarque : Total avec enveloppe indique la largeur et la hauteur du fichier FLV plus la largeur et la hauteur de l'enveloppe slectionne.
Respecter les proportions Prserve le rapport hauteur/largeur du composant vido. Cette option est slectionne par
dfaut.
Lecture automatique Indique si la lecture de la vido doit dmarrer ou non ds louverture de la page Web. Rembobinage automatique Dtermine si le contrle de lecture doit revenir en position de dpart au terme de la
lecture de la vido.
version prliminaire
4 Cliquez sur OK pour fermer la bote de dialogue et ajouter le contenu FLV votre page Web.
La commande Insrer FLV gnre un fichier SWF de lecteur vido et un fichier SWF d'habillage qui serviront afficher votre contenu vido sur une page Web. (Il est parfois ncessaire de cliquer sur le bouton Actualiser pour afficher les nouveaux fichiers dans le panneau Fichiers). Ces fichiers sont stocks dans le mme rpertoire que le fichier HTML auquel vous ajoutez du contenu vido. Lorsque vous chargez la page HTML incluant le fichier FLV, Dreamweaver ces fichiers en tant que fichiers dpendants ( condition de cliquer sur Oui dans la bote de dialogue Placer les fichiers dpendants).
Dfinition des options pour la vido en flux continu

La bote de dialogue Insrer FLV permet de dfinir des options pour le tlchargement de vido en flux contenu d'un fichier FLV insr dans une page Web.
1 Choisissez Insertion > Mdias > FLV (ou cliquez sur l'icne FLV de la catgorie Mdias de la barre d'insertion
Commun).
2 Activez loption Vido en flux continu dans le menu contextuel Type de vido.
URI du serveur Indique le nom du serveur FCS, le nom de lapplication et le nom de linstance dans le formulaire
rtmp://www.example.com/app_name/instance_name.
Nom du flux Spcifie le nom du fichier FLV lire (par exemple, mavideo.flv). L'extension .flv est facultative. Enveloppe Dfinit l'aspect du composant vido. Un aperu de lenveloppe slectionne apparat sous le menu
contextuel Enveloppe.
Largeur Indique la largeur (en pixels) du fichier FLV. Cliquez sur le bouton Dtecter la taille pour connatre la largeur exacte du fichier FLV. Si Dreamweaver ne peut pas dterminer la largeur, tapez une valeur. Hauteur Indique la hauteur (en pixels) du fichier FLV. Cliquez sur le bouton Dtecter la taille pour connatre la
hauteur exacte du fichier FLV. Si Dreamweaver ne peut pas dterminer la hauteur, tapez une valeur. Remarque : Total avec enveloppe indique la largeur et la hauteur du fichier FLV plus la largeur et la hauteur de l'enveloppe slectionne.
Respecter les proportions Prserve le rapport hauteur/largeur du composant vido. Cette option est slectionne par
dfaut.
Vido en temps rel Indique si le contenu vido est en temps rel ou non. Si vous slectionnez Vido en temps rel,
Flash Player diffuse en continu un flux vido provenant de Flash Media Server. Le nom de la vido en temps rel est le nom indiqu dans la zone Nom du flux. Remarque : Si vous activez loption Vido en temps rel, seul le contrle de volume apparat sur lenveloppe du composant, car il est impossible dintervenir sur de la vido en temps rel. De plus, les options Lecture automatique et Rembobinage automatique sont sans effet.
Lecture automatique Indique si la lecture de la vido doit dmarrer ou non ds louverture de la page Web. Rembobinage automatique Dtermine si le contrle de lecture doit revenir en position de dpart au terme de la
lecture de la vido.
Dlai mise en tampon Indique le dlai (en secondes) de mise en tampon avant le dbut de la lecture de la vido. Par
dfaut, la mise en tampon est paramtre sur 0, si bien que la lecture de la vido dbute instantanment aprs un clic sur le bouton de lecture. (Si l'option Lecture automatique est active, la lecture de la vido dbute ds que la connexion avec le serveur est tablie.) Il peut galement tre ncessaire de dfinir un dlai de mise en mmoire tampon si vous fournissez une vido dont le dbit en bits est suprieur celui de la connexion du visiteur du site ou lorsque le volume de trafic Internet risque d'engendrer des problmes de bande passante ou de connectivit. Par exemple, si vous
version prliminaire
souhaitez envoyer 15 secondes de vido la page Web avant que cette dernire ne lise la vido, dfinissez le dlai de mise en mmoire tampon sur 15.
3 Cliquez sur OK pour fermer la bote de dialogue et ajouter le contenu FLV votre page Web.
La commande Insrer FLV gnre un fichier SWF de lecteur vido et un fichier SWF d'habillage qui serviront afficher votre vido sur une page Web. La commande gnre galement un fichier main.asc que vous devez transfrer sur votre serveur Flash Media Server. (Il est parfois ncessaire de cliquer sur le bouton Actualiser pour afficher les nouveaux fichiers dans le panneau Fichiers). Ces fichiers sont stocks dans le mme rpertoire que le fichier HTML auquel vous ajoutez du contenu vido. Lorsque vous transfrez sur votre serveur la page HTML contenant le fichier FLV, noubliez pas de transfrer galement ces fichiers SWF, et de transfrer le fichier main.asc sur votre serveur Flash Media Server. Remarque : Si un fichier main.asc se trouve dj sur votre serveur, consultez ladministrateur de ce serveur avant de transfrer le fichier main.asc gnr par la commande Insrer FLV. Vous pouvez charger facilement tous les fichiers mdias requis en slectionnant l'espace rserv pour le composant vido dans la fentre Document de Dreamweaver puis en cliquant sur le bouton Transfrer multimdia dans l'inspecteur Proprits (Fentre > Proprits). Pour voir la liste des fichiers ncessaires, cliquez sur le bouton Afficher les fichiers ncessaires. Remarque : Le bouton Transfrer multimdia ne transfre pas le fichier HTML qui contient le composant vido.
Modification des informations de tlchargement de Flash Player

Lorsque vous insrez un fichier FLV sur une page, Dreamweaver insre du code qui dtecte si l'utilisateur dispose de la version approprie de Flash Player. Si ce n'est pas le cas, la page affiche du contenu alternatif afin d'inviter l'utilisateur tlcharger la version la plus rcente. Vous pouvez tout moment modifier ce contenu alternatif. Cette procdure s'applique galement aux fichiers SWF. Remarque : Si l'utilisateur ne dispose pas de la version requise mais bien de Flash Player en version 6.0 r65 ou une version ultrieure, le navigateur affiche un programme d'installation express de Flash Player. Si l'utilisateur refuse l'installation express, la page affiche le contenu alternatif.
1 Dans la fentre de document, en mode Cration, slectionnez le fichier SWF ou FLV. 2 Cliquez sur l'icne reprsentant un il dans l'onglet du fichier SWF ou FLV.
Vous pouvez galement utiliser le raccourci CTRL + ] pour activer l'affichage du contenu alternatif. Pour rtablir l'affichage du fichier SWF/FLV, appuyez sur CTRL + [ jusqu' ce que l'intgralit du contenu alternatif soit slectionne. Ensuite, appuyez nouveau sur CTRL + [.
3 Modifiez le contenu comme vous le feriez pour tout autre contenu dans Dreamweaver.
Remarque : Il est impossible d'ajouter des fichiers SWF ou FLV en tant que contenu alternatif.
4 Cliquez nouveau sur l'icne reprsentant un il pour revenir l'affichage du fichier SWF ou FLV.
Dpannage des fichiers FLV

Cette section dcrit quelques-unes des causes les plus courantes de problmes avec les fichiers FLV. Affichage des problmes dus l'absence de fichiers associs Le code gnr par Dreamweaver CS4 repose sur quatre fichiers dpendants, diffrents du fichier FLV proprement dit.
swfobject_modified.js expressInstall.swf FLVPlayer_Progressive.swf
version prliminaire
Le fichier d'enveloppe (par exemple Clear_Skin_1.swf)

Notez qu'il existe deux fichiers dpendants supplmentaires pour Dreamweaver CS4 par rapport Dreamweaver CS3. Les deux premiers fichiers (swfobject_modified.js et expressInstall.swf) sont installs dans un dossier baptis Scripts, que Dreamweaver cre la racine de votre site s'il n'existe pas. Les deux autres fichiers (FLVPlayer_Progressive.swf et le fichier d'enveloppe) sont installs dans le mme dossier que la page laquelle le fichier FLV est incorpor. Le fichier d'enveloppe contient les contrles du fichier FLV. Son nom dpend de l'enveloppe choisie dans les options dcrites dans l'aide de DW CS4. Par exemple, si vous choisissez Clear Skin, le fichier se nomme Clear_Skin_1.swf. Les quatre fichiers dpendants DOIVENT tre tlchargs sur votre serveur distant pour que le fichier FLV s'affiche correctement. L'oubli du tlchargement de ces fichiers est la cause la plus courante des erreurs d'excution de fichiers FLV sur une page Web. Si l'un des fichiers manque, un carr blanc risque de s'afficher sur la page. Pour garantir que vous avez bien tlcharg tous les fichiers dpendants, utilisez le panneau Fichiers de Dreamweaver pour tlcharger la page o figure le fichier FLV. Lorsque vous tlchargez la page, Dreamweaver vous demande si vous voulez tlcharger les fichiers dpendants (sauf si vous avez dsactiv cette option). Cliquez sur Oui pour tlcharger les fichiers dpendants. Problmes d'affichage lors d'un aperu local des pages Les mises jour de la scurit de Dreamweaver CS4 vous empchent d'utiliser la commande Aperu dans le navigateur pour tester une page comportant un fichier FLV incorpor, sauf si vous dfinissez un serveur d'valuation local dans votre dfinition de site Dreamweaver et employez ce serveur d'valuation pour prvisualiser la page. Normalement, vous n'avez besoin d'un serveur d'valuation que si vous dveloppez des pages avec ASP, ColdFusion ou PHP (voir Configuration de l'ordinateur pour le dveloppement d'applications la page 543). Si vous crez des sites Web qui n'emploient que HTML et que vous n'avez pas dfini de serveur d'valuation, une pression sur F12 (Windows) ou Option+F12 (Macintosh) entrane l'affichage de contrles d'enveloppe incohrents. Pour rsoudre le problme, dfinissez le serveur d'valuation et utilisez-le pour prvisualiser votre page, ou chargez vos fichiers sur un serveur distant et visualisez-les sur celui-ci. Remarque : Il se peut que les paramtres de scurit soient galement responsables de l'impossibilit de prvisualiser du contenu FLV local, mais Adobe n'a pas t en mesure de le confirmer. Vous pouvez tenter de modifier vos paramtres de scurit afin de voir si le problme est rsolu. Pour plus d'informations sur la modification de vos paramtres de scurit, consultez la Tech Note 117502. Autres causes potentielles de problmes avec les fichiers FLV
Si vous prouvez des difficults prvisualiser localement, assurez-vous que l'option Aperu avec fichier
temporaire est bien dsactive dans la section Edition > Prfrences > Aperu dans le navigateur.
Assurez-vous de bien disposer de la version la plus rcente du complment Flash Player. Faites preuve de prudence lorsque vous dplacez des fichiers et des dossiers lextrieur de Dreamweaver. Lorsque
vous dplacez des fichiers et dossiers lextrieur de Dreamweaver, Dreamweaver ne peut pas garantir l'exactitude des chemins d'accs aux fichiers associs un fichier FLV.
Vous pouvez remplacer provisoirement le fichier FLV qui pose problme par un fichier FLV dont vous tes sr qu'il
fonctionne. Si le fichier FLV de remplacement fonctionne, c'est que le problme rside dans le fichier FLV d'origine et n'est pas d votre navigateur ni l'ordinateur.
version prliminaire
Modification ou suppression d'un composant FLV

Vous pouvez modifier les paramtres de la vido sur votre page Web en slectionnant l'espace rserv pour composant vido dans la fentre de document de Dreamweaver et en utilisant l'inspecteur Proprits. Vous pouvez galement supprimer le composant vido puis le rinsrer l'aide de la commande Insertion > Mdias > FLV.
Modification du composant FLV

1 Dans la fentre du document Dreamweaver, slectionnez l'espace rserv pour le composant vido en cliquant sur
licne FLV au centre de lespace rserv.

2 Ouvrez l'inspecteur Proprits (Fentre > Proprits) et apportez les modifications dsires.
Remarque : Il est impossible de modifier le type de vido (de tlchargement progressif diffusion en continu, par exemple) dans l'inspecteur Proprits. Pour modifier le type de vido, supprimez le composant FLV puis rinsrez-le en choisissant Insertion > Mdias > FLV.
Suppression du composant FLV

Dans la fentre du document Dreamweaver, slectionnez lespace rserv pour le composant FLV et appuyez sur la
touche Suppr.
Suppression du code de dtection FLV

A partir de la version CS4 de Dreamweaver, Dreamweaver insre directement un code de dtection de Flash Player dans la balise object qui contient le fichier FLV. Par contre, jusqu' la version CS3 de Dreamweaver, le code de dtection se trouve en dehors de la balise object du fichier FLV. Ds lors, si vous voulez supprimer des fichiers FLV de pages cres l'aide de Dreamweaver CS3 ou une version plus ancienne, vous devez supprimer les fichiers FLV puis utiliser la commande Supprimer la dtection FLV afin de supprimer galement le code de dtection.
Slectionnez Commandes > Supprimer la dtection Flash Video.
Ajout de widgets Web

Un widget Web est un composant de page Web consistant en code HTML, CSS et JavaScript. Un widget Web peut par exemple tre un accordon, un panneau onglet ou un calendrier. Vous pouvez rendre votre slection personnelle de widgets Web disponible dans Dreamweaver l'aide du navigateur de widgets Adobe, une application AIR qui permet de naviguer dans les widgets, de les configurer et de les prvisualiser au moyen d'une interface visuelle. Pour plus d'informations sur l'emploi du navigateur de widgets Adobe, voir http://help.adobe.com/fr_FR/WidgetBrowser/.
1 Choisissez Insrer > Widget. 2 Dans la bote de dialogue Widget , slectionnez un widget et un paramtre prdfini (le cas chant), puis cliquez
sur OK.
Voir aussi
Utilisation des widgets Spry (instructions gnrales) la page 435
version prliminaire
Ajout de squences audio

Formats de fichiers audio
Il est possible d'ajouter du son une page Web. Il existe de nombreux types de fichiers et de formats audio, par exemple, les fichiers .wav, .midi et .mp3. Certains facteurs sont considrer avant de dcider d'un format et d'une mthode d'ajout de son : son objectif, son public, la taille du fichier, la qualit du son et les diffrences entre les navigateurs. Remarque : Le traitement des fichiers son est trs diffrent et incohrent suivant les navigateurs. Vous pouvez ajouter un fichier audio un fichier SWF, puis incorporer le fichier SWF pour assurer une meilleure cohrence. La liste ci-dessous dcrit les formats de fichiers audio les plus courants et prsente certains avantages et inconvnients de chaque conception Web.
Le format .midi ou .mid (Musical Instrument Digital Interface) est destin la musique instrumentale. Les fichiers
MIDI sont reconnus par plusieurs navigateurs et ne requirent pas de plug-in. Bien que leur qualit sonore soit trs bonne, elle peut varier en fonction de la carte son du visiteur. Un petit fichier MIDI peut offrir un clip audio de longue dure. Les fichiers MIDI ne peuvent pas tre enregistrs et doivent tre synthtiss sur un ordinateur quip d'un matriel et d'un logiciel spciaux.
Le format .wav (Waveform Extension), qui offre une bonne qualit sonore, est pris en charge par plusieurs navigateurs
et ne requiert pas de plug-in. Vous pouvez enregistrer vos propres fichiers WAV partir d'un CD, d'une cassette, d'un microphone, etc. Toutefois, la taille importante des fichiers limite srieusement la longueur des clips audio que vous pouvez utiliser dans vos pages Web.
Le format .aif (Audio Interchange File Format ou AIFF), tout comme le format WAV, offre une bonne qualit sonore,
est pris en charge par plusieurs navigateurs et ne requiert pas de plug-in. Vous pouvez galement enregistrer des fichiers AIFF partir d'un CD, d'une cassette, d'un microphone, etc. Toutefois, la taille importante des fichiers limite srieusement la longueur des clips audio que vous pouvez utiliser dans vos pages Web.
Le format .mp3 (Motion Picture Experts Group Audio, ou MPEG-Audio Layer-3) est un format compress qui diminue
de manire significative la taille des fichiers audio. La qualit sonore est excellente : si un fichier MP3 est correctement enregistr et compress, sa qualit peut tre quivalente celle d'un CD. La technologie MP3 permet de lire le fichier en transit afin que les visiteurs n'aient pas attendre le tlchargement du fichier entier avant de pouvoir l'couter. Mais le fichier est plus gros qu'un fichier Real Audio, ce qui signifie que le tlchargement d'une chanson entire peut s'avrer assez long si l'on utilise une connexion Internet par modem. Pour lire des fichiers MP3, les visiteurs doivent tlcharger et installer une application d'aide ou un plug-in tel que QuickTime, Windows Media Player ou RealPlayer.
Le format .ra, .ram, .rpm ou Real Audio offre un degr trs lev de compression avec une taille de fichier infrieure celle du format MP3. Le tlchargement de fichiers de chanson peut tre effectu dans un laps de temps raisonnable. Les fichiers pouvant tre diffuss partir d'un serveur Web normal, les visiteurs peuvent commencer couter le son avant la fin du tlchargement. Les visiteurs doivent tlcharger et installer l'application d'aide ou le plug-in RealPlayer afin de lire ces fichiers. .qt, .qtm, .mov ou QuickTime est un format la fois audio et vido mis au point par Apple Computer. QuickTime est inclus dans le systme d'exploitation des ordinateurs Apple Macintosh. Il est utilis par la plupart des applications Macintosh utilisant l'audio, la vido ou des animations. Les PC aussi peuvent lancer les fichiers au format QuickTime, mais cela ncessite le pilote appropri. QuickTime prend en charge la plupart des formats de codage, notamment Cinepak, JPEG et MPEG.
Remarque : En plus des formats les plus courants, mentionns ci-dessus, il existe de nombreux formats audio et vido utilisables sur le Web. Si vous rencontrez un fichier audio ou vido dont le format vous est inconnu, retrouvez son crateur afin d'apprendre comment l'utiliser au mieux.
version prliminaire
Voir aussi
Insertion et modification d'objets multimdias la page 265
Lien vers un fichier audio

Un lien vers un fichier audio est une mthode simple et efficace pour ajouter du son une page Web. Cette mthode d'incorporation de fichiers audio permet aux visiteurs de choisir s'ils veulent couter le fichier et rend le fichier disponible pour un plus vaste public.
1 Slectionnez le texte ou l'image utiliser comme lien vers le fichier audio. 2 Dans l'inspecteur Proprits, cliquez sur l'icne de dossier, ct de la zone Lien, pour rechercher le fichier audio,
ou tapez le nom et le chemin d'accs au fichier dans la zone Lien.
Incorporation d'un fichier son

L'opration consistant incorporer un son intgre le fichier audio directement dans la page, mais le son est uniquement lu si les visiteurs du site disposent du plug-in appropri pour le fichier audio choisi. Incorporez des fichiers si vous souhaitez utiliser le son en tant que musique de fond ou pour contrler le volume, l'apparence du lecteur sur votre page ou encore les points de dmarrage et d'arrt du fichier audio. Lorsque vous incorporez des fichiers son vos pages Web, rflchissez bien l'usage qu'il est possible d'en faire et de quelle faon les visiteurs pourraient s'en servir. Proposez toujours une commande permettant d'activer ou de couper le son, au cas o certains visiteurs ne souhaiteraient pas entendre le contenu audio.
1 En mode Cration, placez le point d'insertion l'endroit o vous souhaitez incorporer le fichier et procdez de l'une
des manires suivantes :
Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Mdias et slectionnez l'icne Plug-in
dans le menu.
Slectionnez Insertion > Mdias > Plug-in.

2 Recherchez le fichier audio puis cliquez sur OK. 3 Entrez la largeur et la hauteur en saisissant les valeurs dans les zones de texte appropries de l'inspecteur Proprits
ou en redimensionnant l'espace rserv au plug-in dans la fentre de document. Ces valeurs dterminent la taille laquelle les contrles audio sont affichs dans le navigateur.
Voir aussi
Insertion du contenu d'un plug-in Netscape Navigator la page 269
Ajout d'autres objets multimdias

Insertion et modification d'objets multimdias
Outre les fichiers SWF et FLV, vous pouvez insrer des vidos QuickTime ou Shockwave, des applets Java, des contrles ActiveX ou d'autres objets audio ou vido dans un document Dreamweaver. Si vous insrez des attributs d'accessibilit avec un objet multimdia, vous pouvez dfinir les attributs d'accessibilit et modifier ces valeurs dans le code HTML.
1 Placez le point d'insertion dans la fentre de document l'endroit o vous souhaitez insrer l'objet.
version prliminaire
2 Pour insrer l'objet souhait, procdez de l'une des manires suivantes :
Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Mdias et slectionnez l'icne
correspondant au type d'objet que vous souhaitez insrer.
Choisissez l'objet appropri dans le sous-menu Insertion > Mdias. Si l'objet insrer n'est pas un objet Shockwave, Applet ou ActiveX, choisissez Plug-in dans le sous-menu
Insertion > Mdias. Une bote de dialogue permet alors de choisir un fichier source et de spcifier certains paramtres de l'objet multimdia. Pour viter que ces botes de dialogue ne s'affichent, choisissez Edition > Prfrences > Gnral (Windows) ou Dreamweaver > Prfrences > Gnral (Macintosh) et dsactivez l'option Afficher la bote de dialogue lors de l'insertion d'objets. Pour remplacer la prfrence d'affichage des botes de dialogue, maintenez enfonce la touche Ctrl (Windows) ou Option (Macintosh) tout en insrant l'objet. Par exemple, pour insrer un espace rserv pour une animation Shockwave sans spcifier le fichier correspondant, maintenez la touche Ctrl ou Option enfonce et cliquez sur le bouton Shockwave partir du menu Support de la catgorie Commun du panneau Insertion ou choisissez Insertion > Mdias > Shockwave.
3 Compltez les options de la bote de dialogue Slectionner un fichier, puis cliquez sur OK.
Remarque : La bote de dialogue Attributs d'accessibilit s'affiche si vous avez dcid d'afficher les attributs lors de l'insertion de mdias dans la bote de dialogue Edition > Prfrences.
4 Dfinissez les attributs d'accessibilit.
Remarque : Vous pouvez galement modifier les attributs d'un objet multimdia. Pour ce faire, slectionnez l'objet et modifiez le code HTML en mode Code, ou cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh), puis slectionnez Modifier le code de la balise.
Titre Entrez un titre pour l'objet multimdia. Cl d'accs Entrez un quivalent clavier (une lettre) dans la zone de texte pour slectionner l'objet de formulaire dans le navigateur. Cela permet aux visiteurs du site d'utiliser la touche Ctrl (Windows) conjointement la cl d'accs pour accder l'objet. Par exemple, si vous entrez B comme Cl d'accs, utilisez Ctrl+B pour slectionner l'objet dans le navigateur. Ordre des tabulations Entrez un nombre pour dfinir l'ordre de tabulation de l'objet. La dfinition d'un ordre
d'apparition peut se rvler utile lorsque la page contient d'autres liens et d'autres objets de formulaire et que vous voulez que l'utilisateur passe de l'un l'autre dans un ordre particulier. Si vous dfinissez un ordre d'apparition pour un objet, assurez-vous de le faire galement pour tous les autres objets.
5 Cliquez sur OK pour insrer l'objet multimdia.
Remarque : Si vous cliquez sur Annuler, un espace rserv pour l'objet multimdia s'affiche dans le document, mais Dreamweaver ne lui associe ni balises ni attributs d'accessibilit. Pour spcifier un fichier source, dfinir les dimensions et d'autres paramtres et attributs, utilisez l'inspecteur Proprits pour chaque objet. Vous pouvez modifier les attributs d'accessibilit d'un objet.
Voir aussi
Optimisation de l'espace de travail pour la conception de pages accessibles la page 707 Insertion du contenu d'un plug-in Netscape Navigator la page 269
version prliminaire
Lancement d'un diteur externe pour des fichiers multimdia

Vous pouvez lancer un diteur externe depuis Dreamweaver pour modifier la plupart des fichiers multimdias. Vous pouvez galement dcider de l'diteur que doit lancer Dreamweaver pour modifier le fichier.
1 Assurez-vous que le type du fichier multimdia est associ un diteur sur votre systme.
Pour savoir quel diteur est associ au type de fichier, slectionnez Edition > Prfrences dans Dreamweaver, puis Types de fichiers/Editeurs dans la liste Catgorie. Cliquez sur l'extension de fichier dans la colonne Extensions pour consulter le ou les diteurs associs dans la colonne Editeurs. Vous pouvez modifier l'diteur associ un type de fichier.
2 Double-cliquez sur le fichier multimdia dans le panneau Fichiers pour lancer l'diteur externe et ouvrir le fichier.
L'diteur qui est excut lorsque vous double-cliquez sur le fichier du panneau Fichiers est appel diteur principal . Si vous double-cliquez sur un fichier image, par exemple, Dreamweaver ouvre le fichier dans l'application principale de retouche d'image dfinie, par exemple Adobe Fireworks.
3 Si vous ne souhaitez pas utiliser l'diteur externe principal pour modifier le fichier, vous pouvez effectuer l'une des
oprations suivantes pour utiliser un autre diteur :
Dans le panneau Fichiers, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfonce (Macintosh) sur le nom du fichier concern et slectionnez Ouvrir avec dans le menu qui s'affiche.
En mode Cration, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce
(Macintosh) sur l'lment multimdia de la page affiche, puis slectionnez Modifier avec dans le menu contextuel.
Spcification de l'diteur lancer depuis Dreamweaver

Vous pouvez dfinir l'diteur lancer par Dreamweaver pour modifier un type de fichier et pour ajouter ou supprimer des types de fichiers reconnus par Dreamweaver.
Indication explicite des diteurs externes lancer pour un type de fichier donn
1 Choisissez Edition > Prfrences, puis slectionnez Types de fichiers/Editeurs dans la liste Catgorie.
Les extensions de fichiers, par exemple .gif, .wav et .mpg, apparaissent dans la liste de gauche, sous le titre Extensions. Les diteurs associs une extension apparaissent dans la liste de droite, sous le titre Editeurs.
2 Slectionnez l'extension de type de fichier dans la liste Extensions, puis effectuez l'une des oprations suivantes :
Pour associer un nouvel diteur au type de fichier, cliquez sur le bouton plus (+), au-dessus de la liste Editeurs et
renseignez la bote de dialogue qui s'affiche. Par exemple, slectionnez l'icne de l'application Acrobat pour l'associer au type de fichier.
Pour faire d'un diteur l'diteur principal pour un type de fichier donn (c'est--dire celui qui s'ouvre
automatiquement lorsque vous double-cliquez sur un fichier de ce type dans le panneau Fichiers), slectionnez cet diteur dans la liste Editeurs, puis cliquez sur Rendre principal.
Pour qu'un diteur ne soit plus li un type de fichier donn, slectionnez cet diteur dans la liste Editeurs et cliquez
sur le bouton moins (-) au-dessus de la liste.
Ajout d'un nouveau type de fichier et un diteur associ

1 Cliquez sur le bouton plus (+), au-dessus de la liste Extensions et entrez une extension de type de fichier (saisissez
le point prcdent l'extension) ou plusieurs extensions lies et spares par des espaces. Vous pouvez, par exemple, entrer .xml .xsl si vous souhaitez associer ces fichiers avec un diteur XML install sur votre systme.
version prliminaire
2 Pour slectionner un diteur pour le type de fichier, cliquez sur le bouton plus (+), au-dessus de la liste Editeurs et
renseignez la bote de dialogue qui s'affiche.
Suppression d'un type de fichier

Slectionnez le type de fichier dans la liste Extensions et cliquez sur le bouton moins (-) au-dessus de la liste
Extensions Remarque : L'annulation de la suppression d'un type de fichier tant impossible, soyez prudent lors d'une telle opration.
Utilisation des Design Notes avec les objets multimdias

Comme pour la plupart des objets dans Dreamweaver, vous pouvez ajouter des Design Notes un objet multimdia. Les Design Notes sont des notes associes un fichier particulier et stockes dans un fichier spar. Les Design Notes vous permettent de conserver des informations supplmentaires sur les documents, par exemple, des commentaires sur l'tat des fichiers ou le nom des fichiers source des images.
sur l'objet dans la fentre de document. Remarque : Vous devez dfinir votre site avant d'ajouter des Design Notes un objet.
2 Cliquez sur Design Notes de la page dans le menu contextuel. 3 Entrez les informations souhaites dans la Design Note.
Vous pouvez galement ajouter une Design Note un objet multimdia partir du panneau Fichiers en slectionnant le fichier, en affichant le menu contextuel, puis en choisissant l'option Design Notes dans ce dernier.
Voir aussi
Activation et dsactivation des Design Notes pour un site la page 107 Stockage des informations sur les fichiers dans des Design Notes la page 107
Insertion d'animations Shockwave

Vous pouvez utiliser Dreamweaver pour insrer des animations Shockwave dans vos documents. Adobe Shockwave, une norme pour les lments multimdia interactifs sur le Web, est un format compress qui autorise le tlchargement rapide des fichiers multimdia crs dans Adobe Director, ainsi que leur lecture dans la plupart des navigateurs.
1 Dans la fentre de document, placez le point d'insertion l'endroit o vous souhaitez insrer une animation
Shockwave et procdez de l'une des manires suivantes :
Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Mdias puis slectionnez l'icne
Shockwave dans le menu.
Choisissez Insertion > Mdias > Shockwave.

2 Dans la bote de dialogue qui s'affiche, slectionnez un fichier d'animation. 3 Dans l'inspecteur Proprits, tapez la largeur et la hauteur de l'animation dans les zones L et H.
Voir aussi
Dfinition des proprits d'un fichier SWF la page 257
version prliminaire
Ajout de vido (non FLV)

Plusieurs mthodes vous permettent d'ajouter une vido votre page Web et vous pouvez faire appel divers formats. L'utilisateur peut tlcharger les vidos ou elles peuvent tre diffuses et lues pendant leur tlchargement.
1 Placez le fichier vido dans le dossier de votre site.
Ces clips se prsentent souvent au format AVI ou MPEG.

2 Insrez un lien vers la squence ou incorporez-la dans votre page.
Pour tablir un lien vers la squence, entrez un texte pour le lien (par exemple, Tlchargez la vido ), slectionnez le texte et cliquez sur l'icne de dossier dans l'inspecteur de slections. Recherchez le fichier vido et slectionnez-le. Remarque : L'utilisateur doit tlcharger une application d'aide (un plug-in) pour visualiser les formats lus en transit, comme Real Media, QuickTime et Windows Media.
Insertion du contenu d'un plug-in Netscape Navigator

Vous pouvez crer du contenu, par exemple une squence vido QuickTime pour un plug-in Netscape Navigator, puis utiliser Dreamweaver pour insrer ce contenu dans un document HTML. Par exemple, RealPlayer et QuickTime sont des plug-ins par dfaut, alors que les fichiers MP3 et les animations QuickTime sont des fichiers de contenu. Vous pouvez afficher un aperu des animations qui font directement appel aux plug-ins Netscape Navigator dans le mode Cration dans la fentre de document. Vous pouvez lire simultanment tous les lments des plug-ins pour savoir comment la page s'affichera sur le poste de l'utilisateur ou lire chaque lment individuellement pour vous assurer que vous avez incorpor le bon lment multimdia. Remarque : Il n'est pas possible d'afficher un aperu des films ou animations bases sur des contrles ActiveX. Aprs avoir insr le contenu d'un plug-in Netscape Navigator, utilisez l'inspecteur Proprits pour en dfinir les paramtres. Pour afficher les proprits suivantes dans l'inspecteur Proprits, slectionnez un objet plug-in Netscape Navigator. Lors de son ouverture, l'inspecteur Proprits affiche les proprits les plus couramment utilises. Cliquez sur la flche d'agrandissement, dans le coin infrieur droit, pour afficher toutes les proprits.
Insertion du contenu d'un plug-in Netscape Navigator et dfinition de ses proprits

1 Dans la fentre de document (mode Cration), placez le point d'insertion l'endroit o vous souhaitez insrer le
contenu, puis procdez de l'une des manires suivantes :
Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Mdias puis slectionnez l'icne Plug-in
dans le menu.
Slectionnez Insertion > Mdias > Plug-in.

2 Dans la bote de dialogue qui s'affiche, slectionnez un fichier de contenu pour un plug-in Netscape Navigator, puis
cliquez sur OK.

3 Dfinissez les options du plug-in dans l'inspecteur Proprits.
Nom Spcifie un nom permettant d'identifier le plug-in dans un script. Tapez un nom dans la zone de texte sans titre,
l'extrme gauche de l'inspecteur Proprits.

L et H Spcifient, en pixels, la largeur et la hauteur alloues l'objet sur la page. Src Spcifie le fichier des donnes source. Cliquez sur l'icne de dossier pour rechercher un fichier ou entrez un nom de fichier.
version prliminaire
URL du plug-in Spcifie l'URL pour l'attribut pluginspace. Indiquez l'URL complte du site partir duquel les
utilisateurs peuvent tlcharger le plug-in. Si l'utilisateur qui consulte votre page ne possde pas le plug-in ncessaire, le navigateur essaie de le tlcharger partir de cette URL.
Alignement Dtermine l'alignement de l'objet sur la page. Espace V. et Espace H. Spcifient la quantit d'espace blanc, en pixels, au-dessus, au-dessous et de chaque ct du plug-in. Bordure Spcifie la largeur de la bordure autour du plug-in. Paramtres Ouvre une bote de dialogue permettant d'indiquer des paramtres supplmentaires transmettre au
plug-in Netscape Navigator. Nombreux sont les plug-ins qui rpondent des paramtres particuliers. Vous pouvez galement afficher les attributs affects au plug-in slectionn en cliquant sur le bouton Attribut. Vous pouvez modifier, ajouter ou supprimer des attributs tels que la hauteur et la largeur dans cette bote de dialogue.
Lecture de contenu d'un plug-in dans la fentre de document

1 Insrez un ou plusieurs lments multimdias l'aide d'une des mthodes dcrites dans la section prcdente. 2 Effectuez l'une des oprations suivantes :
Slectionnez un des lments multimdia que vous avez insrs, puis choisissez la commande Affichage > Plug-ins
> Lire ou cliquez sur le bouton de lecture de l'inspecteur Proprits.
Choisissez la commande Affichage > Plug-ins > Lire tout pour lire tous les lments multimdia de la page
slectionne qui font appel des plug-ins. Remarque : L'option Lire tout s'applique uniquement au document actif. Elle ne s'applique pas aux autres documents dans un ensemble de cadres par exemple.
Arrt de la lecture du contenu d'un plug-in

Slectionnez un lment multimdia, puis choisissez la commande Affichage > Plug-ins > Arrter ou cliquez sur le
bouton d'arrt dans l'inspecteur Proprits. Vous pouvez galement slectionner Affichage > Plug-ins > Arrter tout pour interrompre la lecture de tous les contenus des plug-ins.
Dpannage des plug-ins de Netscape Navigator

Vous avez suivi les tapes permettant de lire le contenu d'un plug-in dans la fentre de document, mais constatez qu'une partie ne fonctionne pas. Essayez l'opration suivante :
Vrifiez que le plug-in associ est bien install sur votre ordinateur et que sa version est compatible avec le contenu
charg.
Ouvrez le fichier Configuration/Plugins/UnsupportedPlugins.txt dans un diteur de texte et vrifiez si le plug-in

posant problme est rpertori. Ce fichier conserve la trace des plug-ins tant la source de problmes dans Dreamweaver et qui ne sont donc pas pris en charge. Si vous constatez des problmes avec un plug-in particulier, il est souhaitable de l'ajouter ce fichier.
Vrifiez que vous avez suffisamment de mmoire. Certains plug-ins ncessitent de 2 5 Mo de mmoire
supplmentaire pour fonctionner.
version prliminaire
Insertion d'un contrle ActiveX

Vous pouvez ajouter un contrle ActiveX votre page. Les contrles ActiveX (autrefois appels commandes OLE) sont des composants rutilisables, un peu comme des applications miniatures, qui peuvent fonctionner comme des plugins de navigateurs. Ils fonctionnent dans Internet Explorer sous Windows, mais pas sur Macintosh ni dans Netscape Navigator. L'objet ActiveX de Dreamweaver vous permet de fournir les attributs et paramtres d'un contrle ActiveX charg par le navigateur du visiteur. Une fois un objet ActiveX insr, utilisez l'inspecteur Proprits pour dfinir les attributs de la balise object et les paramtres du contrle ActiveX. Cliquez sur Paramtres dans l'inspecteur Proprits pour indiquer des noms et des valeurs de proprits qui n'apparaissent pas dans l'inspecteur Proprits. Il n'existe pas de format standard unanimement accept pour les paramtres des contrles ActiveX. Consultez la documentation sur le contrle ActiveX que vous utilisez pour savoir quels paramtres choisir.
Dans la fentre de document, positionnez le curseur l'emplacement o insrer le contenu et procdez de l'une des
manires suivantes :
Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Mdias puis slectionnez l'icne ActiveX
Lorsque l'icne ActiveX s'affiche dans le panneau Insertion, vous pouvez la faire glisser jusqu' la fentre du document.
Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Mdias puis slectionnez l'icne ActiveX.
Choisissez Insertion > Mdias > ActiveX. Une icne indique l'emplacement de la page o apparatra le contrle
ActiveX dans Internet Explorer.
Proprits d'ActiveX
Lors de son ouverture, l'inspecteur Proprits affiche les proprits les plus couramment utilises. Cliquez sur la flche d'agrandissement, dans le coin infrieur droit, pour afficher toutes les proprits.
Nom Spcifie un nom qui permet d'identifier l'objet ActiveX pour les scripts. Tapez un nom dans la zone de texte sans
titre, l'extrme gauche de l'inspecteur Proprits.

L et H Spcifient la largeur et la hauteur de l'objet, en pixels. ID de classe Identifie le contrle ActiveX pour le navigateur. Tapez la valeur ou choisissez-en une dans le menu
contextuel. Lorsque la page est charge, le navigateur utilise l'ID de classe pour localiser le contrle ActiveX requis par l'objet ActiveX associ la page. Si le navigateur ne peut pas localiser le contrle ActiveX spcifi, il essaie de le tlcharger partir de l'emplacement spcifi dans le champ Base.
Incorporer Ajoute une balise embed dans la balise object pour le contrle ActiveX. S'il existe un plug-in Netscape
Navigator quivalent au contrle ActiveX, la balise embed active ce plug-in. Dreamweaver affecte les valeurs que vous avez saisies comme proprits d'objets ActiveX aux plug-ins quivalents de Netscape Navigator.
Alignement Dtermine l'alignement de l'objet sur la page. Paramtres Ouvre une bote de dialogue dans laquelle vous pouvez indiquer des paramtres supplmentaires
transmettre l'objet ActiveX. Nombreux sont les contrles ActiveX qui possdent des paramtres particuliers.
Src Dfinit le fichier de donnes utiliser pour un plug-in Netscape Navigator, si l'option Incorporer est active. Si vous n'entrez pas de valeur, Dreamweaver essaie d'en dterminer une partir des proprits d'ActiveX entres prcdemment. Espace V. et Espace H. Spcifient la quantit d'espace blanc, en pixels, au-dessus, au-dessous et de chaque ct de
l'objet.
Base Spcifie l'URL qui contient le contrle ActiveX. Internet Explorer tlcharge le contrle ActiveX partir de cet
emplacement s'il n'a pas t install sur le systme du visiteur. Si vous ne prcisez pas le paramtre Base et que le
version prliminaire
contrle ActiveX ncessaire n'est pas dj install sur l'ordinateur du visiteur, son navigateur ne pourra pas afficher l'objet ActiveX.
Img sec. Spcifie une image afficher si le navigateur ne prend pas en charge la balise object. Cette option n'est disponible que si l'option Incorporer est dslectionne. Donnes Spcifie un fichier de donnes que le contrle ActiveX doit charger. De nombreux contrles ActiveX, tels que
Shockwave et RealPlayer, n'utilisent pas ce paramtre.
Insertion d'une applet Java

Vous pouvez insrer une applet Java dans un document HTML l'aide de Dreamweaver. Java est un langage de programmation qui permet de dvelopper des applications lgres (applets) pouvant tre incorpores dans des pages Web. Une fois une applet Java insre, utilisez l'inspecteur Proprits pour dfinir les paramtres. Slectionnez une applet Java pour afficher ses proprits dans l'inspecteur Proprits.
1 Dans la fentre de document, placez le point d'insertion l'endroit o vous souhaitez insrer l'applet, puis procdez
de l'une des manires suivantes :
Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Mdias puis slectionnez l'icne Applet Choisissez Insertion > Mdias > Applet.
2 Slectionnez un fichier contenant une applet Java.
Proprits des applets Java

Lors de son ouverture, l'inspecteur Proprits affiche les proprits les plus couramment utilises. Cliquez sur la flche d'agrandissement, dans le coin infrieur droit, pour afficher toutes les proprits.
Nom Spcifie un nom permettant d'identifier l'applet dans un script. Tapez un nom dans la zone de texte sans titre,
l'extrme gauche de l'inspecteur Proprits.

L et H Spcifient la largeur et la hauteur de l'applet, en pixels. Code Spcifie le fichier contenant le code Java de l'applet. Cliquez sur l'icne de dossier pour rechercher un fichier ou
entrez un nom de fichier.

Base Identifie le dossier contenant l'applet slectionne. Lorsque vous choisissez une applet, cette zone de texte est
renseigne automatiquement.
Alignement Dtermine l'alignement de l'objet sur la page. Sec Spcifie un contenu de remplacement (gnralement une image) afficher si le navigateur de l'utilisateur ne prend
pas en charge les applets Java ou si Java y est dsactiv. Si vous tapez du texte, Dreamweaver insre le texte comme tant la valeur de l'attribut alt de l'applet. Si vous slectionnez une image, Dreamweaver insre une balise img entre les balises applet d'ouverture et de fermeture. Remarque : Pour spcifier un contenu de remplacement visible dans Netscape Navigator (avec JavaScript dsactiv) comme dans Lynx (navigateur bas sur le texte), slectionnez une image, puis ajoutez manuellement un attribut alt la balise img dans l'inspecteur de code.
Espace V. et Espace H. Spcifient la quantit d'espace blanc, en pixels, au-dessus, au-dessous et de chaque ct de
l'applet.
Paramtres Ouvre une bote de dialogue dans laquelle vous pouvez indiquer des paramtres supplmentaires
transmettre l'applet. Nombreuses sont les applets qui rpondent des paramtres particuliers.
version prliminaire
Utilisation de comportements pour contrler les objets multimdias

Vous pouvez ajouter des comportements votre page pour commencer ou arrter la lecture de divers objets multimdia.
Contrler Shockwave ou Flash Permet de lire, d'arrter, de rembobiner ou d'atteindre un cadre dans une animation
Shockwave ou un fichier SWF

Lire le son Permet de jouer un son. Vous pouvez ainsi jouer un effet sonore ds que l'utilisateur survole un lien l'aide de la souris. Vrifier le Plug-in Permet de vrifier si les visiteurs de votre site disposent du plug-in requis, puis de les diriger vers
diffrentes URL, en fonction du rsultat. Cela s'applique uniquement aux plug-ins de Netscape Navigator, car ce comportement ne vrifie pas les contrles ActiveX.
Voir aussi
Application du comportement Contrler Shockwave ou SWF la page 362 Application du comportement Lire le son la page 366 Application du comportement Vrifier le plug-in la page 361
Utilisation de paramtres pour contrler des objets multimdia

Dfinissez les paramtres spciaux pour contrler les fichiers Shockwave et SWF, les contrles ActiveX, les plug-ins Netscape Navigator et les applets Java. Les paramtres sont utiliss avec les balises object, embed et applet. Les paramtres dfinissent des attributs spcifiques aux diffrents types d'objets. Par exemple, un fichier SWF peut disposer du paramtre qualit <paramname="quality"value="best"> pour la balise object. La bote de dialogue Paramtre est disponible partir de l'inspecteur Proprits. Consultez la documentation sur l'objet que vous utilisez pour connatre les paramtres requis. Remarque : Il n'existe pas de standard unanimement accept pour l'identification des fichiers de donnes des contrles ActiveX. Consultez la documentation sur le contrle ActiveX que vous utilisez pour savoir quels paramtres choisir.
Saisie du nom et de la valeur d'un paramtre

1 Slectionnez un objet pouvant tre associ des paramtres (par exemple, une animation Shockwave, un contrle
ActiveX, un plug-in Netscape Navigator ou une applet Java) dans la fentre de document.
2 Ouvrez la bote de dialogue en procdant de l'une des manires suivantes :
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh)
sur l'objet et cliquez sur Paramtres dans le menu contextuel.
Ouvrez l'inspecteur Proprits s'il n'est pas dj ouvert, puis cliquez sur le bouton Paramtres situ dans la section
infrieure de l'inspecteur Proprits. Assurez-vous que l'inspecteur Proprits est dvelopp.
3 Cliquez sur le bouton Plug (+) et entrez le nom et la valeur du paramtre dans les colonnes appropries.
Suppression d'un paramtre

Slectionnez un paramtre et cliquez sur le bouton Moins (-).
Rorganisation de paramtres
Slectionnez un paramtre et utilisez les boutons flchs vers le haut ou vers le bas.
version prliminaire
Automatisation des tches

Automatisation des tches
Le panneau Historique mmorise les tapes que vous effectuez lors de l'excution d'une tche. Vous pouvez automatiser une tche effectue frquemment en reproduisant les tapes correspondantes partir du panneau Historique ou en crant une nouvelle commande qui effectue les tapes automatiquement. Certains mouvements de la souris, tels qu'une slection via un clic dans la fentre de document, ne peuvent pas tre reproduits ou sauvegards. Lorsque vous effectuez ce type de mouvements, un trait noir s'affiche dans le panneau Historique (la prsence de cette ligne ne devient vidente que lorsque vous effectuez une autre action). Pour viter cela, dplacez le point d'insertion l'aide des touches flches, et non de la souris, dans la fentre de document. Il existe quelques autres actions qui ne peuvent pas tre reproduites, par exemple le glisser-dplacer d'un lment de la page. Lorsque vous effectuez ce type d'action, une icne contenant un petit X rouge s'affiche dans le panneau Historique. Les commandes sauvegardes sont conserves en permanence ( moins que vous ne les supprimiez), tandis que les commandes enregistres sont supprimes lorsque vous quittez Adobe Dreamweaver CS5 et les squences d'tapes copies sont supprimes lorsque vous copiez un autre lment
Utilisation du panneau Historique

Le panneau Historique (Fentre > Historique) affiche une liste des tapes que vous avez effectues dans le document actif depuis que vous l'avez cr ou ouvert (mais pas les tapes effectues dans d'autres cadres, d'autres fentres de document ou dans le panneau Site). Utilisez le panneau Historique pour annuler plusieurs tapes en mme temps et pour automatiser des tches.
A. Curseur (index) B. Etapes C. Bouton Reproduire D. Bouton Copier les tapes E. Bouton Enregistrer comme commande
Lors de l'ouverture du panneau Historique, le curseur, ou index, pointe sur la dernire action que vous avez accomplie. Remarque : Il est impossible de modifier l'ordre dans lequel les tapes sont affiches dans le panneau Historique. Il ne faut pas voir dans le panneau Historique une collection arbitraire de commandes ; il vous permet de voir, dans l'ordre chronologique, la liste des actions dj effectues.
Annulation de la dernire tape

Choisissez Edition > Annuler. Dplacez le curseur du panneau Historique d'une tape vers le haut dans la liste.
Remarque : Pour provoquer un dplacement automatique vers une tape spcifique, cliquez gauche de cette tape ; si vous cliquez sur l'tape elle-mme, elle sera slectionne. La slection d'une tape est une opration diffrente du retour cette tape dans l'historique des actions.
version prliminaire
Annulation de plusieurs tapes la fois

Faites glisser le curseur de faon pointer sur une tape de la liste, ou cliquez gauche d'une tape le long de la
trajectoire du curseur. Le curseur se dirige automatiquement vers cette tape en annulant toutes les tapes se trouvant sur son passage. Remarque : Tout comme pour l'annulation d'une seule action, si vous annulez une srie d'tapes, puis effectuez une autre opration dans le document, il ne vous sera plus possible de rtablir les actions annules : elles disparaissent du panneau Historique.
Dfinition du nombre maximal d'tapes que le panneau Historique conserve et affiche

Le nombre d'tapes par dfaut est suffisant pour la plupart des utilisateurs. Plus ce nombre est lev, plus le panneau Historique ncessite de la mmoire, ce qui peut affecter les performances et ralentir considrablement votre ordinateur.
1 Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh). 2 Slectionnez la catgorie Gnral dans la liste de gauche. 3 Tapez un chiffre dans la zone Nombre maximal d'tapes de l'historique.
Lorsque le panneau Historique atteint le nombre maximal d'tapes, les premires tapes sont supprimes.
Effacement de la liste des actions du panneau Historique pour le document actif

Dans le menu contextuel du panneau Historique, slectionnez Effacer l'historique.
Cette commande efface galement toutes les informations permettant d'annuler les actions effectues dans le document actif : aprs avoir cliqu sur Effacer l'historique, il vous est impossible d'annuler les actions dont la trace a t efface. La fonction Effacer l'historique n'annule aucune action passe, mais se limite supprimer la trace de ces tapes de la mmoire.
Rptition d'tapes
Vous pouvez rpter la dernire tape effectue ou bien une srie d'tapes contigus ou non l'aide du panneau Historique. Reproduisez les tapes directement depuis le panneau Historique.
Rptition d'une tape

Choisissez Edition > Rpter. Dans le panneau Historique, slectionnez une tape et cliquez sur le bouton Reproduire. L'tape est reproduite et
une nouvelle instance de cette action apparat dans le panneau Historique.
Rptition d'une srie d'tapes

1 Slectionnez les tapes dsires dans le panneau Historique :
Pour slectionner des tapes adjacentes, faites glisser la souris d'une tape une autre (ne faites pas glisser le
curseur ; faites simplement glisser la souris de l'tiquette de texte d'une tape vers l'tiquette de texte d'une autre), ou slectionnez la premire tape et, tout en maintenant la touche Maj enfonce, cliquez sur la dernire tape.
Pour slectionner des tapes non adjacentes, slectionnez une tape, puis tout en maintenant appuye la touche Ctrl
(Windows) ou Commande (Macintosh), cliquez sur d'autres tapes de faon les slectionner (ou les dslectionner le cas chant).
version prliminaire
Seules les actions slectionnes (en surbrillance), et pas ncessairement celle sur laquelle se trouve le curseur, sont rptes. Remarque : Bien que vous puissiez slectionner une srie d'tapes contenant un trait noir signalant une action impossible enregistrer, cette tape est ignore lorsque vous reproduisez les tapes.
2 Cliquez sur Reproduire.
Les tapes sont reproduites dans l'ordre chronologique et une nouvelle tape, Reproduire les tapes, apparat dans le panneau Historique.
Ralisation ou extension d'une slection

Maintenez la touche Maj enfonce tout en appuyant sur une touche flche.
Si un trait noir indiquant un mouvement de la souris apparat pendant que vous effectuez une tche que vous voulez ritrer ultrieurement, vous pouvez annuler cette dernire action et tenter une autre approche (utilisez les touches flches, par exemple).
Application d'tapes du panneau Historique des objets

Vous pouvez appliquer un ensemble d'tapes affiches dans le panneau Historique n'importe quel objet figurant dans la fentre de document. Si vous slectionnez plusieurs objets, puis leur appliquez des tapes partir du panneau Historique, ces objets sont traits comme une slection unique et Dreamweaver tente d'appliquer les tapes cette slection combine ; toutefois, vous ne pouvez appliquer un ensemble d'tapes qu' un seul objet la fois. Pour appliquer les tapes chaque objet d'un ensemble d'objets, vous devez faire en sorte que la dernire tape de la srie slectionne l'objet suivant de l'ensemble. La deuxime procdure illustre ce principe dans un scnario particulier : dfinition de l'espacement vertical et horizontal d'une srie d'images.
Application d'tapes un autre objet

1 Slectionnez l'objet. 2 Slectionnez l'tape appliquer dans le panneau Historique, puis cliquez sur Reproduire.
Application d'tapes plusieurs objets

1 Ouvrez un document dans lequel chaque ligne est compose d'une petite image (par exemple une puce graphique
ou une icne) suivie de texte. L'objectif est d'espacer davantage ces images la fois du texte et des autres images situes au-dessus et en dessous.
2 Ouvrez l'inspecteur Proprits (Fentre > Proprits), si ncessaire. 3 Slectionnez la premire image. 4 Dans l'inspecteur Proprits, indiquez des valeurs dans les zones Espace V. et Espace H. pour dfinir l'espacement
de l'image.
5 Cliquez sur l'image de nouveau pour activer la fentre de document sans dplacer le point d'insertion.
version prliminaire
6 Appuyez sur la touche flche gauche pour amener le point d'insertion gauche de l'image. 7 Appuyez sur la touche flche bas pour faire descendre le point d'insertion d'une ligne, tout en le laissant juste
gauche de la seconde image de la srie.

8 Appuyez sur la touche flche droite tout en maintenant la touche Maj. enfonce, pour slectionner la seconde
image. Remarque : Ne slectionnez surtout pas l'image en cliquant dessus, car vous ne pourriez plus reproduire toutes les tapes.
9 Dans le panneau Historique, slectionnez les tapes correspondant la modification de l'espacement de l'image et
la slection de l'image suivante. Cliquez sur le bouton Reproduire pour reproduire ces actions.
L'espacement de l'image courante est modifi, et l'image suivante est slectionne.
10 Continuez cliquer sur le bouton Reproduire jusqu' ce que toutes les images soient correctement espaces.
Copie et collage d'tapes entre les documents

Chaque document ouvert possde son propre historique. Vous pouvez copier des tapes d'un document et les coller dans un autre document. La fermeture d'un document supprime son historique. Si vous savez que vous voudrez utiliser des tapes d'un document ultrieurement, copiez ou sauvegardez ces tapes avant de fermer ce document.
1 Slectionnez les tapes dsires dans le panneau Historique du document qui contient les tapes rutiliser. 2 Cliquez sur Copier les tapes dans le panneau Historique
Remarque : Le bouton Copier les tapes (dans le panneau Historique) est diffrent de la commande Copier (dans le menu Edition). Vous ne pouvez pas utiliser la commande Edition > Copier pour copier des tapes, mais vous pouvez utiliser la commande Edition > Coller pour les coller. Soyez prudent lorsque vous copiez des tapes qui comportent une commande Copier ou Coller:
N'utilisez pas Copier les tapes si l'une des tapes contient une commande Copier, car le collage de ces tapes risque
de ne pas s'effectuer comme souhait.
Si vos tapes contiennent une commande Coller, vous ne pouvez pas les coller, moins qu'elles ne comprennent
galement une commande Copier avant la commande Coller.
3 Ouvrez l'autre document. 4 Placez le point d'insertion sur l'emplacement dsir, ou slectionnez l'objet auquel vous voulez appliquer les tapes. 5 Choisissez Edition > Coller.
version prliminaire
Les tapes sont reproduites ds qu'elles sont colles dans le panneau Historique du document. Le panneau Historique les affiche comme une seule tape, appele Coller les tapes. Si vous collez des tapes dans un diteur de texte, en mode Code ou dans l'inspecteur de code, elles s'affichent sous forme de code Java Script. Ce point peut vous tre trs utile pour apprendre crire vos propres scripts.
Voir aussi
Rdaction et modification de code la page 314
Cration et utilisation de commandes partir d'tapes de l'historique

Sauvegardez un ensemble d'tapes de l'historique sous la forme d'une commande laquelle vous donnerez un nom et qui deviendra alors disponible dans le menu Commandes. Crez et enregistrez une nouvelle commande si vous pensez devoir utiliser de nouveau un ensemble d'tapes, surtout aprs le prochain dmarrage de Dreamweaver.
Cration d'une commande

1 Slectionnez la ou les tapes dsires dans le panneau Historique. 2 Cliquez sur le bouton Enregistrer comme commande ou choisissez l'option Enregistrer comme commande dans le
menu contextuel du panneau Historique.

3 Indiquez le nom de la commande et cliquez sur OK.
La commande apparat dans le menu Commandes. Remarque : La commande est sauvegarde sous la forme d'un fichier Java Script (ou parfois HTML) dans votre dossier Dreamweaver/Configuration/Commandes. Si vous utilisez Dreamweaver sur un systme d'exploitation plusieurs utilisateurs, le fichier est enregistr dans le dossier Commandes de l'utilisateur spcifique.
Utilisation d'une commande sauvegarde

1 Slectionnez l'objet auquel vous dsirez appliquer la commande ou placez le point d'insertion l'emplacement
dsir.
2 Slectionnez la commande de votre choix dans le menu Commandes.
Modification du nom d'une commande

1 Choisissez Commandes > Modifier la liste des commandes. 2 Slectionnez la commande renommer, indiquez son nouveau nom, puis cliquez sur Fermer.
Suppression d'un nom du menu Commandes

1 Choisissez Commandes > Modifier la liste des commandes. 2 Slectionnez une commande. 3 Cliquez sur Supprimer, puis sur Fermer.
Enregistrement et sauvegarde de commandes

Enregistrez une commande temporaire pour une utilisation court terme, ou enregistrez et sauvegardez une commande pour l'utiliser ultrieurement. Dreamweaver conserve uniquement une commande enregistre la fois ; ds que vous commencez enregistrer une nouvelle commande, l'ancienne est perdue, moins que vous ne la sauvegardiez avant de mmoriser la nouvelle commande.
version prliminaire
Enregistrement provisoire une srie d'tapes

1 Choisissez Commandes > Dmarrer l'enregistrement ou appuyez sur la combinaison de touches Ctrl+Maj+X
(Windows) ou Commande+Maj+X (Macintosh). Le pointeur change d'aspect pour indiquer que vous mmorisez une commande.
2 Lorsque l'opration est termine, choisissez Commandes > Arrter l'enregistrement ou appuyez nouveau sur la
combinaison de touches Ctrl+Maj+X (Windows) ou Commande+Maj+X (Macintosh).
Reproduction d'une commande enregistre

Choisissez Commandes > Reproduire la commande enregistre ou appuyez sur la combinaison de touches
Ctrl+Maj+R (Windows) ou Commande+Maj+R (Macintosh).
Sauvegarde d'une commande enregistre

1 Slectionnez Commandes > Reproduire la commande enregistre. 2 Dans la liste d'tapes du panneau Historique, slectionnez l'tape Excuter commande et cliquez sur le bouton
Enregistrer comme commande.

3 Indiquez le nom de la commande et cliquez sur OK.
La commande apparat dans le menu Commandes.
version prliminaire
280
Chapitre 9 : Liens et navigation

Aprs avoir dfini un site, vous pouvez relier les pages entre elles. Vous pouvez crer des liens HTML, des menus de reroutage et des cartes graphiques.
A propos des liens et de la navigation

A propos des liens
Une fois que vous avez dfini un site Dreamweaver dans lequel stocker les documents de votre site Web et que vous avez cr des pages HTML, il vous reste tablir des connexions entre vos documents et d'autres types de documents. Dreamweaver propose plusieurs mthodes pour crer des liens vers des documents, des images, des fichiers multimdias ou des logiciels pouvant tre tlchargs. Vous pouvez tablir des liens vers n'importe quel texte ou n'importe quelle image d'un document, mme s'ils se trouvent dans un en-tte, une liste, un tableau, un lment positionnement absolu (lment PA) ou un cadre. Il existe diffrentes mthodes de cration et de gestion de liens. Certains concepteurs de pages Web prfrent crer des liens vers des pages ou des fichiers qui n'existent pas encore, alors que d'autres prfrent crer d'abord tous les fichiers et pages, puis ajouter les liens. Une autre mthode de gestion des liens consiste crer des pages de type espace rserv qui vous permettent d'ajouter des liens rapidement et de les vrifier avant de terminer toutes les pages de votre site.
Voir aussi
Test de liens dans Dreamweaver la page 289
Chemins absolus, relatifs au documents et relatifs la racine du site

Pour crer des liens, il est indispensable de comprendre le chemin d'accs qui s'tablit entre le document ou l'actif partir duquel vous tablissez un lien et le document point par ce lien. Chaque page Web possde une adresse unique, appele URL (Uniform Resource Locator) Cependant, lorsque vous crez un lien local (entre deux documents du mme site), vous n'avez en gnral pas besoin de spcifier l'URL complte du document vers lequel vous crez le lien ; il est prfrable d'indiquer un chemin relatif, partir du document actif ou de la racine du site. Il existe trois types de chemins d'accs de liaison :
Chemins absolus (par exemple, http://www.adobe.com/support/dreamweaver/contents.html). Chemins relatifs au document (par exemple dreamweaver/contents.html). Chemins relatifs la racine du site (par exemple /support/dreamweaver/contents.html).
Dreamweaver vous permet de choisir aisment le type de chemin crer pour vos liens. Remarque : Il est prfrable d'utiliser le type de lien qui vous convient le mieux, qu'il soit relatif la racine du site ou au document. L'exploration des liens, contrairement la saisie des chemins, garantit que vous entrez toujours le chemin correct.
version prliminaire
Liens et navigation
Voir aussi
Dfinition du chemin relatif des nouveaux liens la page 285
Chemins absolus
Les chemins absolus indiquent l'URL complte du document li, y compris le protocole utiliser (en gnral http:// pour les pages Web), par exemple, http://www.adobe.com/support/dreamweaver/contents.html. Pour un actif de type image, l'URL entire peut ressembler http://www.adobe.com/support/dreamweaver/images/image1.jpg. Vous devez utiliser un chemin absolu lorsque vous crez un lien vers un document ou un actif situ en dehors du site courant. Vous pouvez galement utiliser des liens de chemins absolus pour les liens locaux (vers des documents sur le mme site), mais cette approche est dconseille. Si vous dplacez le site vers un autre domaine, tous les liens de chemins absolus locaux seront rompus. De plus, l'utilisation de chemins relatifs pour les liens locaux offre une plus grande souplesse si vous devez dplacer des fichiers au sein de votre site. Remarque : Lors de l'insertion d'images (et non de liens), vous pouvez utiliser un chemin absolu vers une image qui rside sur un serveur distant (c'est--dire, une image qui n'est pas disponible sur le disque dur local).
Chemins relatifs au document

Les chemins relatifs au document sont gnralement prfrables pour les liens locaux dans la plupart des sites Web. Ils sont particulirement utiles lorsque le document actif et le document ou l'actif cible du lien se trouvent dans le mme dossier et le resteront vraisemblablement. Vous pouvez galement utiliser un chemin relatif au document ou l'actif pour pointer sur un document situ dans un autre dossier, en indiquant le chemin entre le document actif et le document li, au sein de la hirarchie de dossiers. Indiquer un chemin relatif au document consiste tout simplement laisser de ct la partie du chemin absolu qui est identique pour le document actuel et le document ou l'actif li, en n'indiquant que la partie du chemin qui diffre. Par exemple, supposons que la structure de votre site soit la suivante :
my_site (dossier racine) Support technique contents.html hours.html Ressources tips.html Produits catalog.html
index.html (page d'accueil)
Pour tablir un lien depuis contents.html vers hours.html (ces deux fichiers sont dans le mme dossier), utilisez le
chemin relatif hours.html :
Pour tablir un lien de contents.html vers tips.html (qui se trouve dans le sous-dossier resources ), utilisez le
chemin relatif resources/tips.html. A chaque barre oblique (/), vous descendez d'un niveau dans la hirarchie des dossiers.
Pour tablir un lien de contents.html vers index.html (qui se trouve dans le dossier parent, un niveau au-dessus de
contents.html), utilisez le chemin relatif ../index.html. Deux points et une barre oblique (../) permettent de remonter d'un niveau dans la hirarchie des dossiers.
version prliminaire
Liens et navigation
Pour tablir un lien de contents.html vers catalog.html (qui se trouve dans un autre sous-dossier du dossier parent),
utilisez le chemin relatif ../products/catalog.html. Ici, la squence ../ fait remonter au dossier parent, et products/ fait redescendre dans le sous-dossier products . Lorsque vous dplacez des fichiers sous la forme d'un groupe (par exemple, lorsque vous dplacez un dossier entier, afin que tous les fichiers au sein de ce dossier conservent les mmes chemins relatifs entre eux), il n'est pas ncessaire de mettre jour les liens relatifs au document entre ces fichiers. Toutefois, si vous dplacez individuellement un fichier qui contient des liens relatifs au document, ou un fichier sur lequel pointe un lien relatif partir d'un autre document, il est ncessaire de mettre ces liens jour (si vous dplacez ou renommez des fichiers dans le panneau Fichiers, Dreamweaver met automatiquement jour tous les liens concerns).
Chemins relatifs la racine du site

Les chemins relatifs la racine du site reprsentent le chemin d'accs un document partir du dossier racine du site. Ces chemins peuvent tre utiles si vous travaillez sur un grand site Web qui utilise plusieurs serveurs ou un seul serveur qui est l'hte de plusieurs sites. Toutefois, si vous n'tes pas familier avec ce type de chemin, adoptez plutt les chemins relatifs au document. Un chemin relatif la racine commence par une barre oblique, qui reprsente le dossier racine du site. Par exemple, /support/tips.html est le chemin relatif la racine d'un fichier (tips.html) situ dans le sous-dossier support de la racine du site. Un chemin relatif la racine reprsente souvent le meilleur moyen d'indiquer les liens si vous dplacez frquemment des fichiers HTML d'un dossier un autre dans votre site Web. Lorsque vous dplacez un document qui contient des liens relatifs la racine du site, il n'est pas ncessaire de modifier les liens, car les liens sont relatifs la racine du site, et non au document lui-mme. Par exemple, si vos fichiers HTML utilisent des liens relatifs la racine du site pour les fichiers dpendants (les images en particulier), les liens des fichiers dpendants restent valides si vous dplacez les fichiers HTML. Toutefois, si vous dplacez ou renommez les documents sur lesquels pointent des liens relatifs la racine du site, vous devrez mettre ces liens jour, mme si les chemins relatifs de ces documents entre eux n'ont pas chang. Par exemple, si vous dplacez un dossier, vous devez mettre jour tous les liens relatifs la racine du site vers les fichiers que ce dossier contient (si vous dplacez ou renommez des fichiers dans le panneau Fichiers, Dreamweaver met automatiquement jour tous les liens concerns).
Etablissement de liens
Liens entre fichiers et documents
Avant de crer des liens, assurez-vous de bien comprendre le fonctionnement des chemins relatifs au document, des chemins relatifs la racine du site et des chemins absolus. Vous pouvez crer plusieurs types de liens dans un document :
Un lien vers un autre document ou fichier, tel que le fichier d'une image, d'une animation ou d'un son Un lien vers une ancre nomme, qui permet de sauter un emplacement spcifique au sein d'un document Un lien de courriel, qui cre un courriel vierge avec l'adresse du destinataire dj indique. Des liens nuls et de script, qui permettent d'affecter des comportements un objet ou de crer un lien qui excute
un code JavaScript Utilisez l'inspecteur Proprits et l'icne Pointer vers un fichier pour crer des liens partir d'une image, d'un objet ou de texte vers un autre document ou fichier.
version prliminaire
Liens et navigation
Dreamweaver cre les liens vers d'autres pages de votre site l'aide de chemins relatifs au document. Vous pouvez toutefois demander Dreamweaver de crer les nouveaux liens l'aide de chemins relatifs la racine du site. Important : Il est conseill de toujours enregistrer un nouveau fichier avant de crer un chemin relatif au document, car ce dernier n'est pas valide sans point de dpart bien dfini. Si vous crez un chemin relatif au document avant d'enregistrer le fichier, Dreamweaver utilise provisoirement un chemin absolu commenant par file:// jusqu' ce que le fichier soit enregistr. Dreamweaver convertit alors le chemin file:// en chemin relatif. Vous trouverez un didacticiel consacr la cration de liens l'adresse www.adobe.com/go/vid0149_fr.
Voir aussi
Chemins absolus, relatifs au documents et relatifs la racine du site la page 280 Didacticiel de cration de liens
Association de comportements JavaScript des liens

Vous pouvez associer un comportement n'importe quel lien d'un document. Les comportements dcrits ci-dessous peuvent tre trs intressants lorsque vous insrez des lments lis dans vos documents.
Texte de la barre d'tat Permet de spcifier le texte d'un message et de l'afficher dans la barre d'tat dans la partie infrieure gauche de la fentre du navigateur. Par exemple, vous pouvez utiliser ce comportement pour dcrire la destination d'un lien dans la barre d'tat, au lieu d'afficher l'URL associe Ouvrir la fentre Navigateur Ouvre une URL dans une nouvelle fentre. Vous pouvez spcifier les proprits de la
nouvelle fentre, notamment son nom, sa taille et ses attributs (redimensionnable ou non, dispose d'une barre de menu ou non, etc.).
Menu de reroutage modifie un menu de reroutage. Vous pouvez modifier la liste du menu, spcifier un fichier li diffrent ou changer l'emplacement du navigateur dans lequel ouvrir le document li.
Voir aussi
Application de comportements Dreamweaver intgrs la page 360
Cration d'un lien vers des documents l'aide de l'inspecteur Proprits

Vous pouvez utiliser l'icne de dossier de l'inspecteur Proprits ou la zone Lien pour crer des liens partir d'une image, un objet, du texte ou tout autre document ou fichier.
1 Slectionnez le texte ou une image dans la fentre de document en mode Cration. 2 Ouvrez l'inspecteur Proprits (Fentre > Proprits) et procdez de l'une des manires suivantes :
Cliquez sur l'icne reprsentant un dossier

fichier.
situe droite de la zone Lien pour rechercher et slectionner un
Le chemin d'accs du document point par le lien s'affiche dans la zone URL. Utilisez le menu droulant Relatif dans la bote de dialogue Slectionner fichier HTML pour spcifier si le chemin est relatif la racine ou au document, puis cliquez sur Slectionner. Le type de chemin slectionn ne s'applique qu'au lien actif. Vous pouvez modifier le paramtre par dfaut de la zone Relatif pour le site.
Tapez le chemin et le nom de fichier du document dans la zone Lien.

Pour crer un lien vers un document de votre site, indiquez un chemin relatif au document ou la racine du site. Pour crer un lien vers un document situ en dehors du site, indiquez un chemin absolu, avec le type de protocole (par exemple, http://). Vous pouvez utiliser cette approche pour entrer un lien vers un fichier n'ayant pas encore t cr.
version prliminaire
Liens et navigation
3 Dans le menu droulant Cible, slectionnez un emplacement dans lequel ouvrir le document :
_blank charge le document li dans une nouvelle fentre, sans nom, du navigateur. _parent charge le document li dans le cadre parent ou dans la fentre parente du cadre contenant le lien. Si le
cadre contenant le lien n'est pas imbriqu, le document li est charg dans la fentre de base du navigateur.
_self charge le document li dans le mme cadre (ou la mme fentre) que le lien. Il s'agit de la cible par dfaut, il
est donc en gnral inutile de la spcifier.

Si tous les liens de la page doivent tre dfinis sur la mme cible, vous pouvez spcifier celle-ci une fois pour toutes en choisissant la commande Insertion > HTML > Balises d'en-tte > Base et en slectionnant les informations cible. Pour plus d'informations sur le ciblage des cadres, voir la section Contrle des contenus de cadre avec des liens la page 209.
Voir aussi
Cration d'un lien vers des documents en utilisant l'icne Pointer vers un fichier
1 Slectionnez le texte ou une image dans la fentre de document en mode Cration. 2 Crez un lien de l'une des deux faons suivantes :
Faites glisser l'icne Pointer vers un fichier
(icne cible), sur la droite de la zone Lien de l'inspecteur Proprits, et pointez sur une ancre visible dans le document actuel, une ancre visible dans un autre document ouvert, un lment possdant un ID unique ou un document dans le panneau Fichiers. une ancre visible dans le document actuel, une ancre visible dans un autre document ouvert, un lment possdant un ID unique ou un document dans le panneau Fichiers.
Tout en maintenant la touche Maj enfonce, faites glisser le pointeur de la souris depuis la slection et pointez sur
Remarque : Vous pouvez crer un lien vers un autre document ouvert condition que vos documents ne soient pas agrandis dans la fentre de document. Pour afficher les documents en mosaque, slectionnez Fentre > Cascade ou Fentre > Mosaque. Lorsque vous pointez vers un document ouvert, celui-ci passe au premier plan de votre cran pendant que vous effectuez votre slection.
Voir aussi
Cration d'un lien vers un emplacement spcifique au sein d'un document la page 286
Ajout d'un lien en utilisant la commande Hyperlien

La commande Hyperlien vous permet de crer un lien vers une image, un objet ou vers un autre document ou fichier.
1 Placez le curseur l'endroit du document o vous souhaitez que le lien apparaisse. 2 Procdez de l'une des manires suivantes pour afficher la bote de dialogue Hyperlien :
Choisissez Insertion > Hyperlien. Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Hyperlien.
3 Tapez le texte du lien et, aprs la zone Lien, tapez le nom du fichier vers lequel un lien va tre tabli (ou cliquez sur
l'icne du dossier
pour rechercher le fichier).
4 Dans le menu droulant Cible, choisissez la fentre dans laquelle le fichier devra s'ouvrir ou tapez son nom
version prliminaire
Liens et navigation
Les noms de tous les cadres du document actif apparaissent dans la liste droulante. Si vous spcifiez un cadre inexistant, la page lie s'ouvre dans une nouvelle fentre portant le nom que vous avez spcifi. Vous pouvez galement choisir parmi les noms de cible rservs suivants :

5 Dans la zone Ordre des tabulations, tapez une valeur correspondant l'ordre de l'onglet. 6 Dans la zone Titre, tapez un titre pour le lien. 7 Dans la zone Cl d'accs, tapez une quivalence de clavier (une lettre) pour slectionner le lien dans le navigateur. 8 Cliquez sur OK.
Dfinition du chemin relatif des nouveaux liens

Par dfaut, Dreamweaver cre les liens vers d'autres pages de votre site l'aide de chemins relatifs au document. Pour utiliser des chemins relatifs la racine, vous devez d'abord dfinir un dossier local dans Dreamweaver en choisissant un dossier racine local qui servira d'quivalent la racine des documents sur le serveur. Dreamweaver utilise ce dossier pour dterminer les chemins relatifs la racine pointant vers des fichiers.
1 Choisissez Site > Grer les sites. 2 Dans la bote de dialogue Grer les sites, double-cliquez sur votre site dans la liste. 3 Dans la bote de dialogue Configuration du site, dveloppez Paramtres avancs, puis slectionnez la catgorie Infos
locales.
4 Dfinissez le chemin relatif des nouveaux liens en slectionnant l'option Document ou Racine du site.
Lorsque vous cliquez sur OK, la modification de ce paramtre ne convertit pas le chemin des liens existants. Le paramtre ne s'applique qu'aux nouveaux liens crs avec Dreamweaver. Remarque : Le contenu li un chemin relatif la racine n'apparat pas lorsque vous lancez l'aperu de documents dans un navigateur local, sauf si vous spcifiez un serveur de test ou activez l'option Aperu l'aide d'un fichier temporaire dans Edition > Prfrences > Aperu dans le navigateur. En effet, la diffrence des serveurs, les navigateurs ne reconnaissent pas les racines de sites. Un moyen rapide de lancer l'aperu d'un contenu li des chemins relatifs la racine consiste placer le fichier sur un serveur distant, puis slectionner Fichier > Aperu dans le navigateur.
5 Cliquez sur Enregistrer.
Le paramtre du nouveau chemin ne s'applique qu'au site actif.
Voir aussi
version prliminaire
Liens et navigation
Cration d'un lien vers un emplacement spcifique au sein d'un document

Vous pouvez utiliser l'inspecteur Proprits pour tablir un lien vers une section donne d'un document en crant au pralable des ancres nommes. Les ancres nommes permettent de dfinir des marqueurs dans un document et sont souvent places au niveau d'une rubrique spcifique ou en haut d'un document. Vous pouvez ensuite crer des liens vers ces ancres nommes, qui amnent rapidement le visiteur la position spcifie. La cration d'un lien vers une ancre nomme s'effectue en deux tapes : il faut d'abord crer l'ancre nomme, puis crer un lien pointant sur elle. Remarque : Vous ne pouvez pas placer d'ancre nomme dans un lment PA ( positionnement absolu).
Cration d'une ancre nomme

1 Dans la fentre de document, en mode Cration, placez le curseur l'endroit o insrer l'ancre nomme. 2 Effectuez l'une des oprations suivantes :
Choisissez Insertion > Ancre nomme. Appuyez sur Ctrl+A (Windows) ou Commande+Option+A (Macintosh). Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Ancre nomme.
3 Dans la zone Ancre nomme, entrez le nom de l'ancre puis cliquez sur OK (le nom de l'ancre ne peut pas contenir
d'espaces). Le marqueur de l'ancre apparat au niveau du point d'insertion. Remarque : Si vous ne voyez pas le marqueur de l'ancre, choisissez Affichage > Assistances visuelles > Elments invisibles.
Cration d'un lien vers une ancre nomme

1 Dans la fentre de document en mode Cration, slectionnez le texte ou l'image partir desquels crer le lien. 2 Dans la zone Lien de l'inspecteur Proprits, tapez le signe dise (#) et le nom de l'ancre. Par exemple, pour crer
un lien vers une ancre nomme dbut dans le document actif, tapez #top. Pour crer un lien vers une ancre nomme dbut dans un autre document figurant dans le mme dossier, tapez filename.html#top. Remarque : La casse (majuscules/minuscules) est importante dans les noms d'ancre.
Cration d'un lien vers une ancre nomme l'aide de la mthode Pointer vers un fichier
1 Ouvrez le document contenant l'ancre nomme.
Remarque : Choisissez Affichage > Assistances visuelles > Elments invisibles pour faire apparatre l'ancre, le cas chant.
2 Dans la fentre de cration du document, slectionnez le texte ou l'image partir desquels crer le lien (s'il s'agit
d'un autre document ouvert, vous devez basculer sur celui-ci).

Cliquez sur l'icne du pointeur
(icne cible) droite de la zone Lien de l'inspecteur Proprits et faites-la glisser sur l'ancre vers laquelle vous souhaitez crer un lien, dans le mme document ou dans tout autre document ouvert. sur l'ancre vers laquelle vous souhaitez crer un lien, dans le mme document ou dans tout autre document ouvert.
En maintenant la touche Maj enfonce, dans la fentre de document, faites glisser l'image ou le texte slectionn :
version prliminaire
Liens et navigation
Cration d'un lien de courriel

Un lien de courriel ouvre une nouvelle fentre de message (dans le programme de messagerie associ au navigateur de l'utilisateur) lorsque l'utilisateur clique dessus. La zone A : de la fentre du courriel est automatiquement complte par l'adresse indique dans le lien.
Cration d'un lien de courriel l'aide de la commande Insertion - Lien de messagerie

1 Dans la fentre de document, placez le curseur l'endroit o afficher le lien de courriel ou slectionnez le texte ou
l'image qui doit reprsenter ce lien.

2 Procdez de l'une des manires suivantes pour insrer le lien :
Choisissez Insertion > Lien de messagerie. Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Lien de messagerie.
3 Dans la zone Texte, saisissez ou modifiez le corps du courriel. 4 Dans la zone Adresse lectronique, tapez l'adresse lectronique, puis cliquez sur OK.
Cration d'un lien de courriel l'aide de l'inspecteur Proprits

1 Slectionnez le texte ou une image dans la fentre de document en mode Cration. 2 Dans la zone Lien de l'inspecteur Proprits, tapez mailto: suivi d'une adresse lectronique.
N'insrez pas d'espaces entre le signe deux points et l'adresse lectronique.
Remplissage automatique de la ligne d'objet d'un courriel

1 Crez un lien de courriel l'aide de l'inspecteur Proprits, comme expliqu ci-dessus. 2 Dans la zone Lien de l'inspecteur Proprits, ajoutez ?subject= aprs l'adresse de courriel, puis entrez un objet
aprs le signe gal . N'ajoutez pas d'espaces entre le point d'interrogation et la fin de l'adresse de courriel. L'entre entire doit se prsenter comme suit :
mailto:responsable@votresite.com?subject=Message de notre site
Cration de liens nuls et de liens de script

Un lien nul est un lien non dsign. Utilisez des liens nuls pour attacher des comportements des objets ou du texte sur une page. Par exemple, vous pouvez attacher un comportement un lien nul pour intervertir une image ou afficher un lment PA lorsque le pointeur passe au-dessus du lien. Les liens de script excutent un code JavaScript ou appellent une fonction JavaScript et permettent de fournir aux utilisateurs des informations supplmentaires sur un lment sans quitter la page en cours. Les liens de scripts permettent galement d'excuter des calculs, de valider des formulaires et d'effectuer d'autres tches de traitement lorsqu'un visiteur clique sur un lment spcifique.
Voir aussi
Application d'un comportement la page 359
Cration d'un lien nul

1 Slectionnez du texte, un objet ou une image dans la fentre de document en mode Cration. 2 Dans l'inspecteur Proprits, tapez javascript:; (le mot javascript suivi par deux points puis par un point-
virgule) dans la zone Lien.
version prliminaire
Liens et navigation
Cration d'un lien de script

1 Slectionnez du texte, un objet ou une image dans la fentre de document en mode Cration. 2 Dans la zone Lien de l'inspecteur Proprits, tapez javascript: suivi du code JavaScript ou d'un appel de fonction
JavaScript. (N'insrez pas d'espace entre le signe deux points et le code ou l'appel.)
Mise jour automatique des liens

Dreamweaver peut mettre jour les liens vers un document et partir de ce dernier lorsque vous le dplacez ou renommez au sein d'un site local. Cette fonction fonctionne de faon optimale lorsqu'un site tout entier (ou une section entire de celui-ci) est stock sur votre disque dur local. Dreamweaver ne modifie pas les fichiers du dossier distant avant que vous y placiez les fichiers locaux ou que vous les archiviez dans le serveur distant. Pour acclrer le processus de mise jour, Dreamweaver peut crer un fichier cache dans lequel il conservera la liste de tous les liens du site local. Le fichier cache est mis jour chaque fois que vous ajoutez, modifiez ou supprimez des liens sur votre site local.
Activation de la mise jour automatique des liens

1 Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh). 2 Dans la bote de dialogue Prfrences, slectionnez la catgorie Gnral dans la liste de gauche. 3 Dans la section Options de document des prfrences Gnral, slectionnez une option dans le menu droulant
Mettre jour les liens lors du dplacement de fichiers.

Toujours Met automatiquement jour tous les liens vers un document slectionn et partir de ce dernier lorsque
vous le dplacez ou le renommez

Jamais Ne met pas automatiquement jour tous les liens vers un document slectionn et partir de ce dernier
lorsque vous le dplacez ou le renommez.

Invite Affiche d'abord une bote de dialogue qui rpertorie tous les fichiers affects par le changement. Cliquez sur
Mettre jour pour mettre jour les liens de ces fichiers, ou sur Ne pas mettre jour pour laisser les fichiers intacts.
4 Cliquez sur OK.
Cration d'un fichier cache pour votre site

1 Choisissez Site > Grer les sites. 2 Slectionnez un site, puis cliquez sur Modifier. 3 Dans la bote de dialogue Configuration du site, dveloppez Paramtres avancs, puis slectionnez la catgorie Infos
locales.
4 Dans la catgorie Infos locales, slectionnez l'option Activer le cache.
Aprs avoir lanc Dreamweaver, la premire fois que vous modifiez ou supprimez des liens vers des fichiers de votre dossier local, Dreamweaver vous invite charger le cache. Si vous cliquez sur Oui, Dreamweaver charge le cache et met jour tous les liens vers le fichier que vous venez de modifier. Si vous cliquez sur le bouton Non, la modification est consigne dans le cache, mais Dreamweaver ne charge pas le cache et ne met pas les liens jour. Sur les sites de grande taille, le chargement du cache peut prendre quelques minutes du fait que Dreamweaver doit dterminer si le cache est prim en comparant l'heure et la date des fichiers qui se trouvent sur le site local celles enregistres dans le cache. Si vous n'avez pas modifi de fichiers hors de Dreamweaver, vous pouvez cliquer sur le bouton d'arrt en toute scurit lorsque le bouton apparat.
version prliminaire
Liens et navigation
Rcration du cache
Dans le panneau Fichiers, slectionnez Site > Avanc > Recrer le cache du site.
Modification d'un lien au niveau du site

Outre la mise jour automatique des liens que Dreamweaver effectue chaque fois que vous dplacez ou renommez un fichier, vous pouvez modifier manuellement tous les liens (y compris les liens de messagerie lectronique, ftp, nuls et de scripts) pour qu'ils pointent sur un autre chemin. Cette option est surtout utile lorsque vous souhaitez supprimer un fichier auquel d'autres fichiers sont lis, mais pouvez l'utiliser d'autres fins. Par exemple, supposons que vous ayez tabli un lien entre les mots films du mois et /films/juillet.html dans l'ensemble de votre site. Le 1er aot, vous voudrez modifier ces liens pour qu'ils pointent vers /films/aout.html.
1 Slectionnez un fichier dans l'affichage local du panneau Fichiers.
Remarque : Si vous changez un lien de messagerie lectronique, ftp, nul ou de script, vous n'avez pas besoin de slectionner de fichier.
2 Choisissez Site > Modifier le lien au niveau du site. 3 Compltez les options suivantes dans la bote de dialogue Modifier le lien au niveau du site :
Modifier tous les liens Cliquez sur l'icne du dossier parcourir et slectionnez le fichier cible vers lequel les liens doivent tre rompus. Si vous changez un lien de messagerie lectronique, ftp, nul ou de script, tapez le texte complet du lien changer. En liens to Cliquez sur l'icne de dossier
parcourir et slectionnez le nouveau fichier vers lequel tablir un lien. Si vous changez un lien de messagerie lectronique, ftp, nul ou de script, tapez le texte complet du lien de remplacement.
4 Cliquez sur OK.
Dreamweaver met jour tous les documents qui pointent vers le fichier slectionn, en les faisant pointer vers le nouveau fichier suivant le format de chemin d'accs existant (par exemple, si l'ancien chemin tait relatif au document, le nouveau l'est galement). Lorsqu'un lien a t chang au niveau de tout le site, le fichier slectionn devient orphelin (plus aucun fichier du disque local ne pointe vers lui). Vous pouvez le supprimer en toute scurit sans risque d'altrer des liens sur le site local Dreamweaver. Important : Ces modifications se produisant localement, vous devez supprimer manuellement le fichier orphelin correspondant dans le dossier distant et placer ou archiver tous les fichiers dans lesquels les liens ont t modifis, sinon les visiteurs ne pourront pas visualiser les modifications.
Test de liens dans Dreamweaver

Les liens ne sont pas actifs dans Dreamweaver ; c'est--dire que vous ne pouvez pas ouvrir les documents lis en cliquant sur le lien dans la fentre de document.
Slectionnez le lien et choisissez Modifier > Ouvrir la page lie. Appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh), puis double-cliquez sur le lien.
Remarque : Le document li doit rsider sur le disque local.
version prliminaire
Liens et navigation
Voir aussi
Recherche de liens rompus, externes et orphelins la page 294 Correction de liens rompus la page 295
Menus de reroutage
Insertion de menus de reroutage
Un menu de reroutage est un menu droulant dans un document, visible pour tous les visiteurs du site et rpertoriant les liens vers des documents ou des fichiers. Vous pouvez crer des liens vers des documents de votre site Web ou d'un autre site, des liens de messagerie lectronique, des liens vers des images ou vers tout type de fichier pouvant tre ouvert dans un navigateur. Chaque option d'un menu de reroutage est associe une URL. Lorsque les utilisateurs choisissent une option, ils sont redirigs ( rerouts ) vers l'URL associe. Ces menus sont insrs l'aide de l'objet de formulaire Menu de reroutage. Un menu de reroutage peut comporter trois composants :
(Facultatif) Une invite de slection au sein du menu, par exemple une description de catgorie pour les lments
du menu ou des instructions, du type Faites votre choix .
(Obligatoire) Une liste d'lments de menu de reroutage : l'utilisateur choisit une option et le document ou le fichier
li s'affiche.
(Facultatif) Un bouton Aller.
Voir aussi
Application du comportement Menu de reroutage la page 365 Application du comportement Menu de reroutage Aller la page 365
Insertion d'un menu de reroutage

1 Ouvrez un document, puis placez le curseur dans la fentre de document. 2 Effectuez l'une des oprations suivantes :
Choisissez Insertion > Formulaire > Menu de reroutage. Cliquez sur le bouton Menu de reroutage de la catgorie Formulaires du panneau Insertion.
3 Compltez les options de la bote de dialogue Insrer menu de reroutage, puis cliquez sur OK. Voici une liste
partielle des options :

Boutons Plus (+) et Moins (-) Cliquez sur Plus pour insrer un lment ; cliquez nouveau sur Plus pour en ajouter un autre. Pour supprimer un lment, slectionnez-le et cliquez sur Moins. Boutons flchs Slectionnez un lment et cliquez sur les boutons flchs pour le dplacer vers le haut ou le bas de la
liste.
Texte Tapez le nom d'un lment sans nom. Si votre menu contient une invite de slection (telle que Faites votre choix ), tapez-la ici en tant que premier lment de menu (dans ce cas, vous devez aussi slectionner l'option Slectionner le premier lment aprs le changement d'URL situe en bas). Si slectionn, aller l'URL Naviguez jusqu'au fichier cible ou tapez son chemin.
version prliminaire
Liens et navigation
Ouvrir les URL dans Spcifiez si le fichier doit tre ouvert dans la mme fentre ou dans un cadre. Si le cadre dsigner comme cible n'apparat pas dans le menu droulant, fermez la bote de dialogue Insrer menu de reroutage, puis donnez un nom au cadre. Menu Insrer bouton Aller aprs Choisissez d'insrer un bouton Aller au lieu d'une invite de slection de menu. Slectionner le premier lment aprs le changement d'URL Slectionnez cette option si vous avez insr une invite de slection de menu ( Faites votre choix ) en tant que premier lment du menu.
Voir aussi
Affichage et dfinition des des proprits et des attributs de cadre la page 206
Modification des lments d'un menu de reroutage

Vous pouvez modifier l'ordre des lments dans le menu ou le fichier auquel un lment est li, et vous pouvez ajouter, supprimer ou renommer un lment. Pour modifier l'emplacement d'ouverture d'un fichier li ou pour ajouter ou modifier une invite de slection de menu, vous devez appliquer le comportement Menu de reroutage du panneau Comportements.
1 Ouvrez l'inspecteur Proprits (Fentre > Proprits), s'il n'est pas dj ouvert. 2 Dans la fentre de cration du document, cliquez sur l'objet Menu de reroutage pour le slectionner. 3 Dans l'inspecteur Proprits, cliquez sur le bouton Valeurs de la liste. 4 Utilisez la bote de dialogue Valeurs de la liste pour apporter vos modifications aux lments de menu et cliquer sur OK.
Voir aussi
Application du comportement Menu de reroutage la page 365
Dpannage des menus de reroutage

Lorsqu'un lment de menu a t slectionn, il n'est plus possible de le slectionner nouveau si le visiteur revient cette page ou si la zone Ouvrir les URL dans pointe sur un cadre. Il existe deux mthodes pour contourner ce problme :
Utiliser une invite de slection au sein du menu, par exemple une catgorie ou une instruction, du type Faites
votre choix . Une invite de slection au sein du menu est reslectionne aprs chaque slection.
Utiliser un bouton Aller, qui permet l'utilisateur de visiter nouveau le lien dj slectionn. Lorsque vous utilisez
un bouton Aller associ un menu de reroutage, le bouton Aller devient le seul mcanisme permettant l'utilisateur d'accder l'URL associe la slection dans le menu. La slection d'un lment de menu dans le menu de reroutage n'a plus pour effet de rediriger l'utilisateur automatiquement vers une autre page ou un autre cadre. Remarque : Dans la bote de dialogue Insrer menu de reroutage, vous ne devez slectionner qu'une option pour chaque menu de reroutage, car elles s'appliquent la totalit du menu de reroutage.
Barres de navigation
A propos des barres de navigation
La fonctionnalit de barre de navigation a t abandonne depuis Dreamweaver CS5.
version prliminaire
Liens et navigation
Adobe recommande d'employer le widget Spry Barre de menus pour crer une barre de navigation.
Voir aussi
Utilisation du widget Barre de menus la page 440
Cartes graphiques
A propos des cartes graphiques
Une carte graphique est une image ayant t divise en rgions appeles zones ractives. Lorsque vous cliquez sur une zone ractive, une action est excute, par exemple, l'ouverture d'un nouveau fichier. Les cartes graphiques ct client stockent les informations relatives aux liens hypertextes dans le document HTML, alors que les cartes graphiques ct serveur conservent ces informations dans un fichier de carte spar. Lorsqu'un visiteur de site clique sur une zone ractive dans l'image, l'URL associe est envoye directement au serveur. Ceci rend les cartes graphiques ct client plus rapides que leurs quivalents sur le serveur, car celui-ci n'a pas interprter les coordonnes du point sur lequel l'utilisateur a cliqu. Les cartes graphiques ct client sont prises en charge par Netscape Navigator partir de sa version 2.0, par NCSA Mosaic 2.1 et 3.0, et par toutes les versions de Microsoft Internet Explorer. Dreamweaver ne modifie pas les rfrences aux cartes graphiques sur le serveur, dans les documents existants. Vous pouvez utiliser les cartes graphiques ct client et ct serveur dans le mme document. Les navigateurs qui prennent en charge les deux types de cartes donnent la priorit aux cartes graphiques ct client. Pour inclure une carte graphique sur le serveur dans un document, vous devez crire le code HTML appropri.
Insertion de cartes graphiques ct client

Pour insrer une carte graphique ct client, crez une zone ractive, puis dfinissez un lien qui s'ouvre lorsqu'un utilisateur clique sur la zone ractive. Remarque : Vous pouvez crer plusieurs zones ractives, mais elles font toutes partie de la mme carte graphique.
1 Slectionnez l'image dans la fentre de document. 2 Dans l'inspecteur Proprits, cliquez sur la flche d'agrandissement situe dans le coin infrieur droit pour
visualiser toutes les proprits.

3 Dans la zone Nom de la carte, entrez un nom unique pour la carte graphique. Si vous utilisez plusieurs cartes
graphiques dans le mme document, veillez donner chaque carte un nom unique.
4 Pour dfinir les zones de la carte graphique, procdez de l'une des manires suivantes :
Slectionnez l'outil Cercle Slectionnez l'outil Rectangle Slectionnez l'outil Polygone
et faites glisser le pointeur sur l'image pour crer une zone ractive circulaire. et faites glisser le pointeur sur l'image pour crer une zone ractive rectangulaire.
pour dfinir une zone ractive de forme irrgulire en cliquant pour chaque point de segment de droite. Cliquez sur l'outil Flche pour fermer la forme.
Aprs avoir cr la zone ractive, l'inspecteur Proprits de cette zone apparat.

5 Dans la zone Lien de l'inspecteur Proprits de la zone ractive, cliquez sur l'icne du dossier
pour rechercher
le fichier ouvrir lorsque l'utilisateur clique sur la zone ractive, ou tapez le chemin.
6 Dans le menu droulant Cible, choisissez la fentre dans laquelle le fichier devra s'ouvrir ou tapez son nom
version prliminaire
Liens et navigation
Les noms de tous les cadres du document actif apparaissent dans la liste droulante. Si vous spcifiez un cadre inexistant, la page lie est charge dans une nouvelle fentre portant le nom que vous avez spcifi. Vous pouvez galement choisir parmi les noms de cible rservs suivants :

Remarque : L'option Cible n'est disponible que lorsque la zone ractive slectionne contient un lien.
7 Dans la zone Alt, tapez un texte secondaire afficher dans les navigateurs qui affichent seulement du texte ou qui
tlchargent les images manuellement. Certains navigateurs affichent ce texte sous forme d'une info-bulle lorsque l'utilisateur fait passer le pointeur de la souris au-dessus de la zone ractive.
8 Rptez les tapes 4 7 pour dfinir d'autres zones ractives dans la carte graphique. 9 Une fois la dfinition de la carte de l'image termine, cliquez sur une zone vierge du document pour modifier
l'inspecteur Proprits.
Modification des zones ractives d'une carte graphique

Vous pouvez facilement modifier les zones ractives que vous crez dans une carte graphique. Vous pouvez dplacer un groupe de zones ractives, redimensionner des zones ractives ou dplacer une zone ractive vers l'avant ou l'arrire dans un lment positionnement absolu. Vous pouvez galement copier une image contenant des zones ractives d'un document vers un autre ou copier une ou plusieurs zones ractives d'une image et les coller vers une autre image. Les zones ractives associes l'image sont galement copies vers le nouveau document.
Slection de plusieurs zones ractives dans une carte graphique

1 Utilisez le pointeur de zone ractive pour slectionner une zone ractive. 2 Effectuez l'une des oprations suivantes :
En maintenant la touche Maj enfonce, cliquez tour tour sur les autres zones ractives slectionner. Appuyez sur les touches Ctrl+A (Windows) ou Commande+A (Macintosh) pour slectionner toutes les zones
ractives.
Dplacement d'une zone ractive

1 Utilisez le pointeur de zone ractive pour slectionner la zone ractive. 2 Effectuez l'une des oprations suivantes :
Faites glisser la zone ractive vers une nouvelle zone. Utilisez la touche Ctrl et une touche flche pour dplacer une zone ractive de 10 pixels dans le sens slectionn. Utilisez les touches flches pour dplacer une zone ractive de 1 pixel dans le sens slectionn.
Redimensionnement d'une zone ractive

1 Utilisez le pointeur de zone ractive
pour slectionner la zone ractive.
version prliminaire
Liens et navigation
2 Faites glisser une poigne de slection de la zone ractive pour modifier la taille ou la forme de celle-ci.
Rsolution des problmes lis aux liens

Recherche de liens rompus, externes et orphelins
Utilisez la fonction Vrifier les liens pour rechercher les liens rompus et les fichiers orphelins (les fichiers qui existent toujours dans le site mais vers lesquels aucun lien ne pointe dans le site). Vous pouvez faire porter la recherche sur un fichier ouvert, sur une partie ou sur l'ensemble d'un site local. Dreamweaver vrifie uniquement les liens qui pointent vers des documents au sein du mme site. Dreamweaver dresse une liste des liens externes qui apparaissent dans le ou les documents slectionns, mais ne les vrifie pas. Vous pouvez identifier et supprimer les fichiers qui ne sont plus utiliss par les autres fichiers de votre site.
Voir aussi
Identification et suppression des fichiers non utiliss la page 81
Vrification des liens au sein du document actif

1 Enregistrez le fichier dans un emplacement de votre site Dreamweaver local. 2 Choisissez Fichier > Vrifier la page > Liens.
Le rapport Liens briss apparat dans le panneau Vrificateur de lien (dans le groupe de panneaux Rsultats).
3 Dans le panneau Vrificateur de lien, slectionnez Liens externes dans le menu droulant Afficher pour afficher un
autre rapport. Le rapport apparat dans le panneau Vrificateur de lien (dans le groupe de panneaux Rsultats). Vous pouvez vrifier les fichiers orphelins lorsque vous vrifiez les liens dans un site entier.
4 Pour enregistrer le rapport, cliquez sur le bouton Enregistrer le rapport dans le panneau Vrificateur de lien. Le
rapport est un fichier temporaire ; il sera perdu si vous ne l'enregistrez pas.
Vrification des liens dans une partie d'un site local

1 Dans le panneau Fichiers, choisissez un site dans le menu droulant Sites en cours. 2 Dans Affichage local, slectionnez les fichiers ou les dossiers vrifier. 3 Suivez l'une des procdures suivantes pour accder aux options :
Cliquez avec le bouton droit de la souris (Windows) ou en appuyant sur la touche Contrle (Macintosh) sur l'un
des fichiers slectionns et cliquez sur Vrifier les liens > Fichiers/Dossiers slectionns dans le menu contextuel.
Choisissez Fichier > Vrifier la page > Liens.

4 Dans le panneau Vrificateur de lien, slectionnez Liens externes dans le menu droulant Afficher pour afficher un
autre rapport. Le rapport apparat dans le panneau Vrificateur de lien (dans le groupe de panneaux Rsultats).
version prliminaire
Liens et navigation
Vous pouvez vrifier les fichiers orphelins lorsque vous vrifiez les liens dans un site entier.
5 Pour enregistrer un rapport, cliquez sur le bouton Enregistrer rapport dans le panneau Vrificateur de lien.
Vrification des liens dans tout le site

1 Dans le panneau Fichiers, choisissez un site dans le menu droulant Sites en cours. 2 Choisissez Site > Vrifier tous les liens du site.
3 Dans le panneau Vrificateur de lien, slectionnez Liens externes ou Fichiers orphelins dans le menu droulant
Afficher pour afficher un autre rapport. Une liste des fichiers correspondant au type du rapport slectionn s'affiche dans la bote de dialogue Vrificateur de lien. Remarque : Si vous avez slectionn Fichiers orphelins comme type de rapport, vous pouvez directement supprimer des fichiers orphelins du panneau Vrificateur de lien en slectionnant un fichier dans la liste et en appuyant sur la touche Supprimer.
4 Pour enregistrer un rapport, cliquez sur le bouton Enregistrer rapport dans le panneau Vrificateur de lien.
Correction de liens rompus

Une fois le rapport de liens excut, vous pouvez corriger les liens rompus et les rfrences d'images directement dans la bote de dialogue Vrificateur de lien, ou ouvrir les fichiers de la liste et rparer les liens dans l'inspecteur Proprits.
Correction de liens dans le panneau Vrificateur de lien

1 Excutez un rapport de vrification des liens. 2 Slectionnez le lien rompu dans la colonne Liens briss (pas dans la colonne Fichiers) du panneau Vrificateur de
lien (dans le groupe de panneaux Rsultats). Une icne de dossier s'affiche ct du lien rompu.
3 Cliquez sur l'icne de dossier
situe en face du lien rompu et naviguez jusqu'au fichier appropri pour le slectionner, ou entrez le chemin d'accs et le nom de fichier corrects.
4 Appuyez sur Tab ou Entre (Windows) ou Retour (Macintosh).
S'il y a d'autres liens rompus vers le mme fichier, le systme vous invite rparer galement les rfrences dans les autres fichiers. Cliquez sur Oui pour que Dreamweaver mette jour tous les documents de la liste faisant rfrence ce fichier. Cliquez sur Non pour que Dreamweaver mette uniquement jour la rfrence actuelle. Remarque : Si l'option Activer l'archivage et l'extraction de fichier est active pour ce site, Dreamweaver essaie d'extraire les fichiers qui ncessitent des modifications. S'il ne peut pas extraire un fichier, Dreamweaver affiche un avertissement et laisse les rfrences rompues inchanges.
Correction de liens dans l'inspecteur Proprits

1 Excutez un rapport de vrification des liens. 2 Double-cliquez sur une entre de la colonne Fichier dans le panneau Vrificateur de lien (dans le groupe de
panneaux Rsultats). Dreamweaver ouvre le document, slectionne l'image ou le lien rompu, et met en surbrillance le chemin d'accs et le nom de fichier dans l'inspecteur Proprits (si l'inspecteur Proprits n'est pas ouvert, choisissez Fentre > Proprits pour l'ouvrir).
version prliminaire
Liens et navigation
3 Pour dfinir un nouveau chemin d'accs et un nouveau nom de fichier, tapez directement sur le texte en
surbrillance ou cliquez sur l'icne du dossier
pour naviguer vers le fichier.
Si vous mettez jour une rfrence d'image, et si la nouvelle image s'affiche avec une taille incorrecte, cliquez sur L et H (ou sur le bouton Actualiser) dans l'inspecteur Proprits pour rinitialiser les valeurs de hauteur et de largeur.
Ds que les liens sont rpars, leur entre disparat de la liste des liens rompus. Si une entre figure toujours dans la liste aprs que vous avez indiqu un nouveau chemin d'accs ou nom de fichier dans le vrificateur de lien (ou aprs avoir enregistr des changements apports l'inspecteur Proprits), Dreamweaver ne peut pas trouver le nouveau fichier et considre toujours que le lien est rompu.
version prliminaire
297
Chapitre 10 : Aperu des pages

Le mode Cration vous donne une ide de l'aspect qu'aura votre page sur le Web, mais il ne restitue pas les pages de la mme faon que les navigateurs. La fonctionnalit Affichage en direct fournit une reprsentation plus prcise et permet de travailler en mode Code, de faon visualiser les modifications apportes au concept. La fonction Aperu dans le navigateur vous permet de voir la faon dont vos pages vont s'afficher dans des navigateurs spcifiques.
Prvisualisation de pages dans Dreamweaver

A propos de l'affichage en direct
L'affichage en direct diffre du mode Cration traditionnel de Dreamweaver en ce sens qu'il offre un rendu non modifiable et plus raliste de l'apparence de votre page dans un navigateur. L'affichage en direct ne remplace par la commande Aperu dans le navigateur, mais fournit plutt une faon diffrente de voir quoi ressemble votre page en direct sans devoir quitter l'espace de travail de Dreamweaver. Vous pouvez passer l'affichage en direct tout moment lorsque vous vous trouvez en mode Cration. Toutefois, le passage l'affichage en direct n'a aucun point commun avec le basculement entre les autres modes d'affichage traditionnels de Dreamweaver (Code/Fractionn/Cration). Lorsque vous passez du mode Cration au mode Affichage en direct, vous vous contentez de faire basculer le mode Cration d'un tat modifiable un tat en direct . Bien que le mode Cration soit fig lorsque vous accdez au mode Affichage en direct, le mode Code reste modifiable, ce qui vous permet de modifier le code puis d'actualiser l'affichage en direct pour voir l'effet de vos modifications. Lorsque vous vous trouvez en mode Affichage en direct, vous pouvez galement dcider d'afficher le code en direct. Le mode Code en direct est similaire au mode Affichage en direct, en ce sens qu'il affiche une version du code que le navigateur excute pour rendre la page. Tout comme le mode Affichage en direct, le mode Code en direct est un affichage non modifiable. Un autre avantage du mode Affichage en direct est sa capacit figer le code JavaScript. Par exemple, vous pouvez passer en mode Affichage en direct et survoler les lignes d'un tableau bas sur Spry qui changent de couleur de par l'interaction avec l'utilisateur. Lorsque vous figez le code JavaScript, le mode Affichage en direct fige la page dans son tat actuel. Vous pouvez ensuite modifier votre code CSS ou JavaScript puis actualiser la page pour voir l'effet des modifications. Il peut tre utile de figer le code JavaScript dans l'affichage en direct pour voir et modifier les proprits des diffrents tats d'un menu ou d'autres lments interactifs qu'il est impossible de voir dans le mode Cration traditionnel. Vous trouverez un didacticiel vido sur l'utilisation du mode En direct, ralis par l'quipe de Dreamweaver, l'adresse www.adobe.com/go/dw10liveview_fr. Vous trouverez, l'adresse ci-aprs, une vido de l'quipe de conception de Dreamweaver qui prsente l'utilisation de la navigation dans le mode En direct : http://www.adobe.com/go/dwcs5livenav_fr. Vous trouverez un didacticiel vido relatif l'utilisation du mode Affichage en direct, aux fichiers apparents et la fentre Navigation dans le code l'adresse www.adobe.com/go/lrvid4044_dw_fr.
Prvisualisation des pages en mode Affichage en direct

1 Veillez bien tre en mode Cration (Affichage > Cration) ou en modes Code et Cration (Affichage > Code et
Cration).
version prliminaire
Aperu des pages
2 Cliquez sur le bouton Affichage en direct.
3 (Facultatif) Apportez les modifications dans le mode Code, dans le panneau Styles CSS, dans une feuille de style
CSS externe ou dans tout autre fichier apparent. Mme s'il est impossible d'apporter des modifications dans le mode Affichage en direct, les options de modification d'autres endroits (par exemple dans le panneau Styles CSS ou dans le mode Code) changement au fur et mesure que vous cliquez dans l'affichage en direct. Vous pouvez travailler dans des fichiers apparents (par exemple des feuilles de style CSS) tout en maintenant le focus sur l'affichage en direct. Pour ce faire, ouvrez le fichier apparent partir de la barre d'outils Fichiers apparents, dans le haut du document.
4 Si vous avez apport des modifications en mode Code ou dans un fichier apparent, actualisez l'affichage en direct
en cliquant sur le bouton Actualiser de la barre d'outils Document ou en appuyant sur F5.
5 Pour revenir au mode Cration modifiable, cliquez nouveau sur le bouton Affichage en direct.
Prvisualisation du code en direct

Le code affich en mode Code en direct est similaire ce que vous verriez si vous consultiez la source de la page partir d'un navigateur. Alors que de telles sources de pages sont statiques et ne fournissent que la source de la page partir du navigateur, le mode Code en direct est dynamique et est mis jour mesure que vous interagissez avec la page en mode Affichage en direct.
1 Veillez vous trouver en mode Affichage en direct. 2 Cliquez sur le bouton Code en direct.
Dreamweaver affiche le code en direct que le navigateur utiliserait pour excuter la page. Le code est surlign en jaune et ne peut pas tre modifi. Lorsque vous interagissez avec des lments interactifs, le mode Code en direct met en surbrillance les modifications dynamiques apportes au code.
3 Pour dsactiver la mise en surbrillance des modifications dans le mode Code en direct, choisissez Affichage >
Options d'affichage en direct > Surligner les modifications dans le code en direct.
4 Pour revenir au mode Code modifiable, cliquez nouveau sur le bouton Code en direct.
Pour modifier les prfrences du mode Code en direct, choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (MacOS), puis choisissez la catgorie Coloration du code.
Gel du code JavaScript

Appuyez sur la touche F6 Choisissez Figer JavaScript dans le menu du bouton Affichage en direct.
Une barre d'information, en haut du document, vous informe que le code JavaScript est fig. Pour fermer la barre d'information, cliquez sur son lien Fermer.
version prliminaire
Aperu des pages
Options de l'affichage en direct

Outre l'option Figer JavaScript, le menu du bouton Affichage en direct comporte d'autres options, qui sont galement accessibles via le menu Affichage > Options d'affichage en direct.
Figer JavaScript Fige les lments affects par JavaScript dans leur tat actuel. Dsactiver JavaScript Dsactive JavaScript et rend nouveau la page de la manire dont elle se prsenterait dans un navigateur o JavaScript serait dsactiv. Dsactiver les plug-ins Dsactive les plug-ins et rend nouveau la page de la manire dont elle se prsenterait dans un
navigateur o les plug-ins seraient dsactivs.

Surligner les modifications dans le code en direct Active ou dsactive la mise en surbrillance des modifications dans le
mode Code en direct.

Modification de la page d'affichage en direct dans un nouvel onglet Permet d'ouvrir de nouveaux onglets pour les
documents du site vers lesquels vous naviguez l'aide de la barre d'outils Navigation de l'explorateur ou de la fonctionnalit Suivre le lien. Vous devez tout d'abord accder au document, puis choisir Modifier la page d'affichage en direct dans un nouvel onglet afin de crer un nouvel onglet pour celui-ci.
Suivre le lien Rend actif le lien suivant sur lequel vous cliquez en mode En direct. Alternativement, vous pouvez rendre un lien actif en cliquant dessus, dans le mode En direct, tout en maintenant la touche CTRL enfonce. Suivre les liens de manire continue Rend les liens du mode En direct actifs en permanence jusqu' ce que vous les
dsactiviez ou que vous fermiez la page.

Synchroniser automatiquement les fichiers distants Synchronise automatiquement le fichier local et le fichier distant lorsque vous cliquez sur l'icne Actualiser de la barre d'outils Navigation de l'explorateur. Dreamweaver place votre fichier sur le serveur avant l'actualisation, ce qui garantit que les deux fichiers soient synchroniss. Utiliser le serveur d'valuation pour la source de document Option employe principalement par les pages dynamiques (comme les pages ColdFusion), active par dfaut pour de telles pages. Lorsque cette option est active, Dreamweaver emploie la version du fichier qui se trouve sur le serveur d'valuation du site comme source d'affichage en direct. Utiliser des fichiers locaux pour les liens de documents Rglage par dfaut pour les sites non dynamiques. Lorsque
cette option est active pour des sites dynamiques qui utilisent un serveur d'valuation, Dreamweaver emploie les versions locales des fichiers lis au document (par exemple les fichiers CSS et JavaScript) au lieu des fichiers stocks sur le serveur d'valuation. Vous pouvez ensuite apporter des modifications aux fichiers associs, de manire voir leur apparence avant de les placer sur le serveur d'valuation. Si cette option est dsactive, Dreamweaver emploie les versions des fichiers apparents qui se trouvent sur le serveur d'valuation.
Paramtres de demande HTTP Affiche une bote de dialogue de rglages avancs o vous pouvez entrer des valeurs
relatives l'affiche de donnes en direct. Pour plus d'informations, cliquez sur le bouton Aide de la bote de dialogue.
Voir aussi
Prsentation de la barre d'outils Navigation de l'explorateur la page 10 Basculement d'un mode un autre dans la fentre de document la page 17 Ouverture des fichiers associs la page 70 Affichage des donnes dynamiques la page 608 Didacticiel sur l'utilisation du mode Affichage en direct
version prliminaire
Aperu des pages
Aperu des pages dans les navigateurs

Affichage d'un aperu dans un navigateur
Vous pouvez obtenir un aperu d'une page dans un navigateur la demande. Il n'est pas ncessaire de la transfrer au pralable sur un serveur Web. Lorsque vous affichez un aperu d'une page, toutes les fonctions lies au navigateur doivent tre oprationnelles, y compris les comportements JavaScript, les liens absolus et relatifs au document, les contrles ActiveX et les plug-ins Netscape Navigator, condition que vous ayez install les plug-ins ou les contrles ActiveX requis dans vos navigateurs. Avant d'afficher un aperu d'un document, enregistrez-le, sinon le navigateur n'affiche pas vos modifications les plus rcentes.
1 Procdez de l'une des manires suivantes pour afficher un aperu de la page :
Choisissez Fichier > Aperu dans le navigateur, puis slectionnez un navigateur dans la liste.
Remarque : Si aucun navigateur ne figure dans la liste, choisissez Edition > Prfrences ou Dreamweaver > Prfrences (Macintosh), puis slectionnez la catgorie Aperu situe dans la partie gauche du navigateur pour slectionner un navigateur
Appuyez sur la touche F12 (Windows) ou Option+F12 (Macintosh) pour afficher la page en cours dans votre
navigateur par dfaut.
Appuyez sur la combinaison de touches Ctrl+F12 (Windows) ou Commande+F12 (Macintosh) pour afficher la
page en cours dans votre navigateur secondaire.
2 Cliquez sur les liens et testez le contenu de votre page.
Remarque : Le contenu li un chemin relatif la racine n'apparat pas lorsque vous lancez l'aperu de documents dans un navigateur local, sauf si vous spcifiez un serveur de test ou activez l'option Aperu l'aide d'un fichier temporaire dans Edition > Prfrences > Aperu dans le navigateur. En effet, la diffrence des serveurs, les navigateurs ne reconnaissent pas les racines de sites. Pour lancer l'aperu d'un contenu li des chemins relatifs la racine, placez le fichier sur un serveur distant, puis choisissez Fichier > Aperu dans le navigateur pour l'afficher.
3 Fermez la page dans le navigateur aprs avoir effectu le test.
Voir aussi
Chemins relatifs la racine du site la page 282
Dfinition des prfrences d'aperu dans un navigateur

Vous pouvez dfinir les prfrences que les navigateurs emploieront lors de l'affichage de l'aperu d'un site, ainsi que dfinir les navigateurs principaux et secondaires.
1 Choisissez Fichier > Aperu dans le navigateur > Modifier la liste des navigateurs. 2 Pour ajouter un navigateur dans la liste, cliquez sur le bouton plus (+), compltez la bote de dialogue Navigateurs,
puis cliquez sur OK.

3 Pour supprimer un navigateur de la liste, slectionnez-le, puis cliquez sur le bouton moins (-). 4 Pour modifier les paramtres d'un navigateur slectionn, cliquez sur le bouton Modifier, effectuez les
modifications dans la bote de dialogue Modifier le navigateur, puis cliquez sur OK.
version prliminaire
Aperu des pages
5 Slectionnez l'option Navigateur principal ou Navigateur secondaire pour indiquer si le navigateur slectionn est
le navigateur primaire ou secondaire. Appuyez sur F12 (Windows) ou Option+F12 (Macintosh) pour ouvrir le navigateur principal et sur Ctrl+F12 (Windows) ou Commande+F12 (Macintosh) pour ouvrir le navigateur secondaire.
6 Slectionnez Aperu l'aide d'un fichier temporaire pour crer une copie temporaire qui sera utilise pour l'aperu
et le dboguage. Dslectionnez cette option si vous souhaitez mettre le document directement jour.
Aperu des pages dans les priphriques mobiles

Pour prvisualiser des pages cres dans Dreamweaver sur diffrents priphriques mobiles, utilisez Device Central avec sa fonction intgre Small-Screen Rendering d'Opera. Des navigateurs diffrents sont installs sur les diffrents priphriques, mais la prvisualisation peut vous donner un bon aperu du contenu et de son comportement sur un priphrique donn.
1 Lancez Dreamweaver. 2 Ouverture d'un fichier. 3 Effectuez l'une des oprations suivantes :
Slectionnez Fichier > Aperu dans le navigateur > Device Central. Dans la barre d'outils de la fentre du document, cliquez et maintenez enfonc le bouton du navigateur
Aperu/dbogage dans le navigateur et slectionnez Aperu dans Device Central. Le fichier est affich dans l'onglet Emulateur de Device Central. Pour poursuivre le test, cliquez deux fois sur le nom d'un autre priphrique dans les listes Ensembles de priphriques ou Priphriques disponibles.
Voir aussi
Utilisation de Device Central la page 392
version prliminaire
302
Chapitre 11 : Utilisation de code de page

Adobe Dreamweaver CS5 est un outil de conception visuelle et un diteur de code fiable, qui fournit des fonctionnalits de conseil de code, de rduction de code, de dbogage de code et d'autres fonctions d'dition de code.
Informations gnrales sur le codage dans Dreamweaver

Voir aussi
Indicateurs de code la page 314 Dfinition des prfrences de codage la page 309 Personnalisation des raccourcis clavier la page 309 Conformit des pages avec le langage XHTML la page 336 Recherche de balises, d'attributs ou de chanes de texte dans le code la page 330 Enregistrement et chargement de modles de recherche la page 330 Optimisation de l'espace de travail pour le dveloppement visuel la page 566 Affichage des enregistrements de base de donnes la page 599
Langages pris en charge

Adobe Dreamweaver CS5 contient la fois des options permettant de lancer des diteurs de texte et des options conues pour vous assister dans la rdaction du code, par exemple les conseils de code, et ce dans les langages suivants :
HTML XHTML CSS JavaScript CFML (ColdFusion Markup Language) VBScript (pour ASP) C# et Visual Basic (pour ASP.NET) JSP PHP
D'autres langages, par exemple le langage Perl, ne sont pas pris en charge par les fonctions de codage spcifiques au langage de Dreamweaver ; vous pouvez par exemple crer et modifier des fichiers Perl, mais vous ne pourrez pas accder aux conseils de code.
version prliminaire
Utilisation de code de page
Marquage non valide

Si votre document contient du code non valide, Dreamweaver l'affiche en mode Cration et, si les options adquates sont actives, le met en surbrillance en mode Code. Si vous slectionnez ces lments dans l'un des deux modes, l'inspecteur Proprits affiche des informations sur les causes de leur non-validit et sur la manire de corriger les erreurs. Remarque : L'option de mise en surbrillance du code non valide en mode Code est dsactive par dfaut. Pour l'activer, passez en mode Code (Affichage > Code) puis cliquez sur Affichage > Options d'affichage de code > Surligner le code non valide). Vous pouvez galement indiquer vos prfrences concernant la correction automatique de certains types d'lments de code errons lorsque vous ouvrez un document.
Modification automatique du code

Certaines options de Dreamweaver permettent de nettoyer automatiquement votre code selon vos propres critres. Toutefois, le code n'est corrige que si vous activez les options correspondantes ou si l'une de vos oprations entrane une modification du code. Par exemple, Dreamweaver modifie vos espaces blancs et la casse des attributs uniquement si vous slectionnez la commande Appliquer le format source. Quelques-unes des options de rcriture du code sont actives par dfaut. Les fonctions Roundtrip HTML de Dreamweaver permettent d'changer des documents entre un diteur HTML en mode texte et Dreamweaver, moyennant un impact nul ou infime sur le contenu et la structure du code source HTML original du document. Parmi ces fonctionnalits, on compte les suivantes :
Vous pouvez lancer un diteur de texte tiers pour modifier le document actif. Par dfaut, Dreamweaver ne modifie pas le code cr ou modifi par un autre diteur HTML, mme s'il est
incorrect, moins que vous n'ayez activ les options de rcriture.
En l'absence de critres de rfrence, Dreamweaver conserve telles quelles les balises qu'il ne reconnat pas,
notamment les balises XML. Si une balise non reconnue encadre une autre balise (par exemple, <MyNewTag><em>text</MyNewTag></em>), Dreamweaver la marque comme errone, mais ne modifie pas le code.
Vous pouvez activer certaines options de Dreamweaver pour mettre les lments de code HTML incorrects en
surlign (jaune) dans le mode Code. Si vous slectionnez une section en surbrillance, l'inspecteur Proprits affiche des informations sur l'erreur et la manire de la corriger.
Code XHTML
Dreamweaver gnre du nouveau code XHTML et nettoie le code XHTML existant, conformment la plupart des spcifications XHTML. Vous disposez galement des outils permettant de se conformer aux rares spcifications XHTML ignores lors de ce type d'opration. Remarque : Certaines de ces spcifications sont galement exiges dans diverses versions du langage HTML. Le tableau ci-dessous rpertorie les spcifications XHTML automatiquement observes par Dreamweaver :
version prliminaire
Spcification XHTML Une dclaration DOCTYPE doit prcder l'lment racine dans le document, laquelle doit faire rfrence l'un des trois fichiers DTD (Document Type Definition) pour XHTML (strict, transitionnel ou jeu de cadres).
Actions effectues par Dreamweaver Ajoute une dclaration XHTML DOCTYPE un document XHTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
Ou, si le document XHTML comporte un jeu de cadres :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1frameset.dtd">
L'lment racine du document doit tre html, et l'lmenthtml doit Ajoute l'attribut namespace l'lment html comme suit : dsigner l'espace de noms XHTML.
<html xmlns="http://www.w3.org/1999/xhtml">
Un document standard doit comporter les lments structurels head, Dans un document standard, inclut les lments structurels head, title et body. Un document de jeu de cadres doit comporter les title et body. Dans un document de jeu de cadres, inclut les lments structurels head, title et frameset. lments head, title et frameset. L'imbrication de tous les lments du document doit tre correcte :
<p>Voici un <i>exemple incorrect.</p></i> <p>Voici un <i>exemple incorrect.</i></p>
Gnre correctement le code imbriqu et, pendant le nettoyage du code XHTML, corrige l'imbrication du code non gnr par Dreamweaver. Impose l'usage des minuscules dans les noms d'lments et d'attributs HTML du code XHTML gnr par ses soins et pendant le nettoyage du code XHTML, indpendamment des prfrences de casse dfinies pour la balise et l'attribut. Insre des balises de fin dans le code gnr par ses soins, ainsi que pendant le nettoyage du code XHTML.
Tous les noms d'lments et d'attributs doivent tre rdigs en minuscules.
Tous les lments doivent se terminer par une balise de fin, moins qu'ils ne soient dclars dans le fichier DTD comme EMPTY.
Insre les lments vides avec un espace avant la barre oblique de Les lments vides doivent se terminer par une balise de fin ou la balise de dbut doit tre ferme avec le code />. Par exemple, <br> fermeture des balises vides dans le code gnr par ses soins ainsi est incorrect ; la forme correcte de la balise est soit <br></br>, que pendant le nettoyage du code XHTML. soit <br/>. Les lments vides sont les suivants : area, base, basefont, br, col, frame, hr, img, input, isindex, link, meta et param. Pour garantir la rtrocompatibilit avec les navigateurs non XML, un espace doit prcder le code /> (par exemple, <br /> et non<br/>). Il est impossible d'abrger les attributs ; ainsi, <td nowrap> est incorrect ; la forme correcte est <td nowrap="nowrap">. Cette rgle s'applique aux attributs suivants : checked, compact, declare, defer, disabled, ismap, multiple, noresize, noshade, nowrap, readonly et selected. Tous les attributs doivent tre placs entre guillemets. Insre des paires attribut/valeur compltes dans le code gnr par ses soins, ainsi que pendant le nettoyage du code XHTML. Remarque : Un navigateur HTML ne prenant pas en charge HTML 4 risque de ne pas pouvoir interprter ces attributs boolens sous leur forme complte. Met les valeurs d'attribut entre guillemets dans le code gnr par ses soins, ainsi que pendant le nettoyage du code XHTML. Affecte la mme valeur aux attributs name et id, toutes les fois o l'attribut name est dfini par un inspecteur Proprits, dans le code gnr par Dreamweaver, ainsi que pendant le nettoyage du code XHTML.
Les lments suivants doivent comporter un attribut id et un attribut name : a, applet, form, frame, iframe, img et map. Par exemple, <a name="intro">Introduction</a> est incorrect ; la forme correcte est
<a id="intro">Introduction</a> ou <a id="section1" name="intro"> Introduction</a>.
version prliminaire
Spcification XHTML Dans le cas d'attributs dont les valeurs sont de type Enumr, cellesci doivent figurer en minuscules. Une valeur de type Enumr est une valeur appartenant une liste donne de valeurs autorises ; par exemple, l'attribut align comprend les valeurs autorises suivantes : center, justify, left et right. Tous les lments de script et de style doivent comporter un attribut type. (La ncessit de l'attribut de type d'un lment de script a t introduite avec HTML 4, lors de la dprciation de l'attribut de language.)
Actions effectues par Dreamweaver Impose l'utilisation des minuscules pour les valeurs de type Enumr dans le code gnr par ses soins, ainsi que pendant le nettoyage du code XHTML.
Dfinit les attributs de typeet de langage dans les lments de script ainsi que l'attribut de type dans les lments de style, mais aussi dans le code gnr par ses soins et pendant le nettoyage du code XHTML.
Tous les lments img et area doivent comprendre un attribut alt. Dfinit ces attributs dans le code gnr par ses soins et, pendant le nettoyage du code XHTML, signale les attributs alt manquants.
Expressions rgulires
Les expressions rgulires sont des modles dcrivant des combinaisons de caractres dans un texte. Utilisez-les dans vos recherches pour dcrire des concepts tels que lignes commenant par var ou valeurs d'attribut contenant un nombre . Le tableau ci-dessous prsente les caractres spciaux des expressions rgulires, leur signification et des exemples d'utilisation. Pour rechercher du texte contenant un des caractres spciaux prsents dans le tableau, indiquez qu'il s'agit d'un caractre spcial l'aide d'une barre oblique inverse. Par exemple, pour rechercher l'astrisque dans la phrase conditions spciales*, vous pouvez utiliser un modle de recherche tel que celui-ci : spciales\*. Si vous n'indiquez pas l'astrisque comme caractre spcial, vous trouverez toutes les occurrences de spciales (de mme que spciale , spcialess et spcialesss ), et pas seulement celles qui sont suivies d'un astrisque.
Caractre ^ trouve Dbut de saisie ou de ligne. Exemple
^T trouve T dans Tonnerre de Brest , mais pas dans La
case de l'oncle Tom $ * Fin de saisie ou de ligne. Le caractre prcdent, 0 ou plusieurs fois.
n$ trouve n dans malin mais pas dans noir um* trouve um dans rhum , umm dans yummy et
u dans bouge + Le caractre prcdent, 1 ou plusieurs fois.

um+ trouve um dans rhum , umm dans yummy
mais rien dans bouge ? Le caractre prcdent, une fois au maximum (en d'autres termes, le caractre prcdent est facultatif).
st?on trouve son dans Johnson et ston dans
Johnston , mais rien dans Appleton ou tension
Tout caractre, sauf une nouvelle ligne (retour .an trouve ran , tan et lan dans le mot rantanplan la ligne). Soit x, soit y.
FF0000|0000FF trouve FF0000 dans bgcolor="#FF0000" et 0000FF dans font color="#0000FF" l{2} trouve ll dans elle et les deux premiers l de
x|y
{n}
Exactement n occurrences du caractre prcdent. Au moins n et au plus m occurrences du caractre prcdent.
ellllle , mais ne trouve rien dans lger

F{2,4} trouve FF dans #FF0000 et les quatre premiers
{n,m}
F dans #FFFFFF
version prliminaire
Caractre [abc]
trouve L'un des caractres entours de crochets. Spcifiez une plage de caractres l'aide d'un trait d'union (par exemple, [a-f] quivaut [abcdef]). Tout caractre non inclus entre les crochets. Spcifiez une plage de caractres l'aide d'un trait d'union (par exemple, [â-f] quivaut [âbcdef]). Limite de mot (par exemple un espace ou un retour chariot). Tous les lments sauf les limites de mot Tout chiffre. C'est l'quivalent de [0-9].
Exemple
[e-g] trouve e dans il , f dans fil et g dans
garde
[âbc]
[âeiou] trouve initialement r dans orange , b dans
balle et k dans eek!
\b
\bb trouve b dans balle mais pas dans gober ou
snob
\Bb trouve b dans gober mais pas dans balle \d trouve 3 dans C3PO et 2 dans appartement
\B \d
2G . \D Tout caractre alphabtique et non numrique. \D trouve S dans 900S et Q dans Q45 . C'est l'quivalent de [^0-9]. Saut de page. Saut de ligne. Retour chariot. Tout espace blanc , ou caractre \sval trouve val dans le val Andr mais pas dans d'espacement : espace, tabulation, saut de page aval ou saut de ligne. Tout caractre autre qu'un espace blanc.
\Sval trouve val dans aval , mais pas dans le val
\f \n \r \s
\S
Andr \t \w Tabulation. Tout caractre alphanumrique, y compris le c\w* trouve chien dans le chien noir , ainsi que cou et caractre de soulignement. C'est l'quivalent de chien dans le cou du chien noir . [A-Za-z0-9_]. Tout caractre non alphanumrique. C'est l'quivalent de [Â-Za-z0-9_]. Retour chariot. Veillez dsactiver l'option Ignorer les diffrences entre les espaces blancs lorsque vous effectuez ce type de recherche si vous n'utilisez pas des expressions rgulires. Notez que cette recherche porte sur un caractre particulier et non sur la notion de retour la ligne ; par exemple, elle ne trouvera pas une balise <br> ou <p>. Les caractres de retour chariot apparaissent en tant qu'espaces en mode Cration, et non en tant que sauts de ligne. \W trouve & dans Tintin&Milou et % dans 100% .
\W
Ctrl+Entre ou Maj+Entre (Windows), ou Contrle+ Retour ou Maj+Retour ou Commande+Retour (Macintosh)
Utilisez des parenthses pour dfinir au sein de l'expression rgulire des groupes auxquels il sera fait rfrence plus tard ; utilisez $1, $2, $3, etc. dans le champ Remplacer pour faire rfrence au premier, deuxime, troisime, etc., groupe entre parenthses. Remarque : Dans la zone de texte Rechercher, faites rfrence au groupe entre parenthses mentionn plus tt dans l'expression rgulire en indiquant \1, \2, \3 etc. au lieu de $1, $2, $3.
version prliminaire
Par exemple, la recherche de (\d+)\/(\d+)\/(\d+) et le remplacement par $2/$1/$3 changent le jour et le mois dans une date spare par des barres obliques permettant ainsi la conversion entre les dates de style amricain et les dates de style europen.
Code de comportement de serveur

Lorsque vous slectionnez un comportement de serveur dans le panneau Comportements de serveur pendant le dveloppement d'une page dynamique, Dreamweaver insre un ou plusieurs blocs de code dans la page pour faire fonctionner le comportement de serveur. Si vous modifiez manuellement le code contenu dans un bloc de code, les panneaux, par exemple le panneau Liaisons et le panneau Comportements de serveur, ne sont plus accessibles pour la modification du comportement du serveur. Dreamweaver dtecte les comportements de serveur en se reprant des modles de code spcifiques dans la page, puis les affiche dans le panneau correspondant. Toute modification du code d'un bloc de code empche ds lors Dreamweaver de dtecter le comportement de serveur et de l'afficher dans le panneau Comportements de serveur. Le comportement de serveur subsiste toutefois dans la page : vous pouvez donc le corriger dans l'environnement de codage de Dreamweaver.
Configuration d'un environnement de codage

Utilisation d'espaces de travail orients codeur
Vous pouvez modifier l'environnement de codage de Dreamweaver pour l'adapter la faon dont vous travaillez. Vous pouvez par exemple changer le mode d'affichage du code, dfinir diffrents raccourcis clavier ou importer et utiliser votre bibliothque de balises de prdilection. Dreamweaver est fourni avec plusieurs dispositions d'espace de travail conues pour offrir une exprience de codage optimale. La fonction Commutation d'espace de travail de la barre Application vous permet de slectionner l'un des espaces de travail suivants : Dveloppeur d'applications, Dveloppeur d'applications Plus, Codeur et Codeur Plus. Tous ces espaces de travail s'affichent par dfaut en mode Code (dans la fentre de document tout entire ou en modes Code et Cration) et comportent des panneaux ancrs du ct gauche de l'cran. l'exception de Dveloppeur d'applications Plus, ils liminent tous l'inspecteur Proprits de l'affichage par dfaut. Si aucun des espaces de travail prdfinis ne rpond prcisment vos attentes, vous pouvez personnaliser la disposition en ouvrant et en encrant des panneaux comme bon vous semble, puis en enregistrant l'espace de travail en tant qu'espace de travail personnalis.
Voir aussi
Gestion des fentres et des panneaux la page 23 Enregistrement et basculement dun espace de travail lautre la page 28 Personnalisation des raccourcis clavier la page 34 Gestion des bibliothques de balises la page 352
version prliminaire
Affichage du code
Vous pouvez visualiser le code source du document actif de plusieurs faons : en l'affichant dans la fentre de document aprs avoir activ le mode Code, en fractionnant la fentre de document pour afficher la fois la page et son code, ou encore en travaillant dans l'Inspecteur de code, qui forme une fentre de code distincte. L'inspecteur de code fonctionne comme le mode Code; il peut tre considr comme un mode Code dtachable pour le document actif.
Voir aussi
Modification du format du code la page 310 Dfinition des prfrences de conseils de code la page 317 Dfinition des couleurs du code la page 313
Affichage du code dans la fentre de document

Choisissez Affichage > Code.
Codage et modification simultane d'une page dans la fentre de document

1 Choisissez Affichage > Code et cration.
Le code apparat dans le volet suprieur, et la page dans le volet infrieur.

2 Pour afficher la page au premier plan, choisissez Mode Cration au premier plan dans le menu Affichage de la barre
d'outils du document.
3 Pour redimensionner les volets dans la fentre de document, faites glisser la barre de division l'endroit appropri.
La barre de division est intercale entre les deux volets. Toutes les modifications apportes dans le mode Cration se rpercutent automatiquement dans le mode Code. Toutefois, aprs avoir effectu des modifications en mode Code, vous devez mettre jour manuellement le document dans le mode Cration ; il vous suffit pour cela de cliquer dans ce mode ou d'appuyer sur la touche F5.
Affichage du code dans une fentre distincte dans l'inspecteur de code

L'inspecteur de code permet de travailler dans une fentre de code distincte, comme vous le faites en mode Code.
Choisissez Fentre > Inspecteur de code. La barre d'outils contient les options suivantes : Gestion des fichiers Permet de placer ou d'acqurir le fichier. Aperu/Dbogage dans le navigateur Permet de prvisualiser ou de dboguer votre document dans un navigateur. Actualiser mode Cration Met jour le document en mode Cration, de faon ce qu'il applique les modifications
apportes dans le code. Les modifications apportes dans le code n'apparaissent pas automatiquement dans le mode Cration : vous devez excuter tout d'abord certaines oprations, comme enregistrer le fichier ou utiliser ce bouton.
Rfrence Ouvre le panneau Rfrence. Consultez la section Utilisation des documents de rfrence sur les
langages la page 331.

Navigation par code Permet de se dplacer rapidement dans le code. Consultez la section Accs une fonction JavaScript ou VBScript la page 326. Afficher les options Permet de dterminer la faon dont le code est affich. Consultez la section Dfinition de l'apparence du code la page 309.
Pour utiliser la barre de codage situe dans la partie gauche de la fentre, consultez la section Insertion de code avec la barre d'outils de codage la page 319.
version prliminaire
Personnalisation des raccourcis clavier

Rien ne vous empche d'utiliser vos raccourcis clavier prfrs dans Dreamweaver. Si vous tes habitu utiliser des raccourcis clavier spcifiques (par exemple, Maj+Entre pour insrer un saut de ligne, Ctrl+G pour atteindre un code prcis), vous pouvez les intgrer dans Dreamweaver au moyen de l'diteur de raccourcis clavier. Pour plus d'informations, reportez-vous la section Personnalisation des raccourcis clavier la page 34.
Voir aussi
Manipulation de fragments de code la page 328
Ouverture de fichiers en mode Code par dfaut

Lorsque vous ouvrez un fichier qui ne contient normalement aucun code HTML (par exemple, un fichier JavaScript), il s'ouvre en mode Code (ou dans l'Inspecteur de code), et non pas en mode Cration. Vous pouvez dfinir les types de fichiers ouvrir en mode Code.
1 Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh). 2 Slectionnez la catgorie Types de fichiers/Editeurs dans la liste de gauche. 3 Dans la zone de texte Ouvrir en mode Code, entrez les extensions des types de fichier que vous voulez ouvrir
automatiquement en mode Code. Insrez un espace entre les extensions. Vous pouvez en ajouter autant que vous le souhaitez.
Voir aussi
Utilisation d'un diteur externe la page 314 Recherche d'erreurs de codage l'aide du validateur la page 334
Dfinition des prfrences de codage

A propos des prfrences de codage
Vous pouvez dfinir des prfrences de codage, par exemple le formatage du code ou la mise en couleurs, en fonction de vos besoins. Remarque : Pour dfinir les prfrences avances, utilisez l'diteur de la bibliothque de balises (consultez la section Gestion des bibliothques de balises la page 352).
Dfinition de l'apparence du code

Le menu Affichage > Options d'affichage de code permet de configurer le renvoi la ligne des mots, l'affichage du numro des lignes de code, la mise en surbrillance du code HTML incorrect, la coloration de la syntaxe des lments de code, la mise en retrait du code, ainsi que laffichage des caractres masqus.
1 Affichez le document dans le mode Code ou l'Inspecteur de code. 2 Effectuez l'une des oprations suivantes :
Choisissez Affichage > Code et cration
version prliminaire
Cliquez sur le bouton Options d'affichage

de code.
dans la barre d'outils situe en haut du mode Code ou de l'Inspecteur
3 Activez ou dsactivez lune des options suivantes :

Renvoi la ligne Renvoie le code la ligne pour le rendre visible sans qu'il soit ncessaire de le faire dfiler
horizontalement. Cette option n'insre aucun saut de ligne ; elle a pour seule fonction de simplifier la consultation du code.
Numros de lignes Affiche le numro des lignes de code sur le ct. Caractres masqus Permet dafficher les caractres spciaux au lieu dun simple espace blanc. Par exemple, un point
apparat pour masquer chaque espace, un double chevron remplace chaque tabulation, et une marque de paragraphe remplace chaque saut de ligne. Remarque : Les retours la ligne contextuels que Dreamweaver utilise pour le renvoi du texte la ligne ne sont pas symboliss par une marque de paragraphe.
Surligner le code non valide Active, dans Dreamweaver, le surlignage en jaune du code HTML non valide. Ds la slection d'une balise incorrecte, l'inspecteur Proprits affiche des instructions pour corriger l'erreur. Coloration de la syntaxe Active ou dsactive la mise en couleurs du code. Pour plus d'informations sur la modification
des couleurs appliquer, consultez la section Dfinition des couleurs du code la page 313.
Retrait auto Automatise la mise en retrait du code lorsque vous appuyez sur la touche Entre pendant la rdaction du
code. La nouvelle ligne de code s'aligne au mme niveau que la ligne qui la prcde. Pour plus d'informations sur la modification de l'espacement du retrait, consultez l'option Taille de tabulation dans Modification du format du code la page 310.
Voir aussi
Affichage du code la page 308 Prsentation de la barre d'outils de codage la page 11 Dfinition des prfrences de conseils de code la page 317
Modification du format du code

Vous pouvez modifier l'aspect de votre code en dfinissant des prfrences de formatage telles que la mise en retrait, la longueur de ligne et la casse des noms de balises et d'attributs. Toutes les options de formatage de code, l'exception de l'option Remplacer la casse de, ne s'appliquent automatiquement qu'aux nouveaux documents et aux additions des documents que vous crez par la suite. Pour modifier le formatage d'un document HTML existant, ouvrez ce document puis cliquez sur Commandes > Appliquer le format source.
1 Choisissez Edition > Prfrences. 2 Slectionnez la catgorie Format du code dans la liste de gauche. 3 Parmi les options suivantes, dfinissez celles de votre choix :
Retrait Indique si le code gnr par Dreamweaver doit tre mis en retrait (en conformit avec les rgles de retrait
dfinies dans ces prfrences) ou non. Remarque : La majorit des options de retrait de cette bote de dialogue ne s'appliquent qu'au code gnr par Dreamweaver et non au code entr par vos soins. Pour que chaque nouvelle ligne entre s'aligne au mme niveau que la prcdente, utilisez l'option Retrait auto dans les options d'affichage du mode Code. Pour plus d'informations, consultez la section Dfinition de l'apparence du code la page 309.
version prliminaire
Avec (Zone de texte ou menu contextuel) Spcifie le nombre d'espaces ou de tabulations que Dreamweaver doit
utiliser afin de mettre en retrait le code gnr. Par exemple, si vous tapez 3 dans la zone de texte et si vous slectionnez Tabulations dans le menu contextuel, le code gnr par Dreamweaver sera mis en retrait de trois tabulations chaque niveau de mise en retrait.
Taille de la tabulation Dtermine la taille, en caractres, de chaque tabulation dans le mode Code. Par exemple, si cette taille est dfinie sur 4, chaque tabulation s'affiche dans le mode Code sous la forme d'un espace long de 4 caractres. De plus, si la taille du retrait est dfinie sur 3 et que les caractres utiliss sont des tabulations, le code gnr par Dreamweaver est mis en retrait de trois tabulations par niveau de mise en retrait, ce qui correspond un espace de 12 caractres en mode Code.
Remarque : Dreamweaver effectue les mises en retrait l'aide de tabulations ou d'espaces mais ne convertit pas une srie d'espaces en tabulation lors de l'insertion de code.
Renvoi la ligne auto Insre un retour de chariot (ou retour la ligne forc) lorsqu'une ligne atteint la largeur de colonne spcifie. (Dreamweaver insre des retours de chariot uniquement lorsqu'ils ne modifient pas l'apparence du document dans un navigateur. Certaines lignes peuvent donc tre plus longues que la valeur indique dans l'option Renvoi la ligne auto). A l'inverse, l'option Retour la ligne du mode Code affiche les lignes dont la longueur dpasse la largeur de la fentre comme si elles contenaient des retours de chariot, sans en insrer vritablement. Type de saut de ligne Permet d'indiquer le type de serveur distant (Windows, Macintosh ou UNIX) qui hbergera
votre site. Le choix du type de caractres de saut de ligne appropri (CR, CR/LF, LF) garantit que votre code source HTML s'affiche correctement lorsqu'il est affich partir du serveur distant. Ce paramtre est galement utile lorsque vous travaillez avec un diteur de texte externe qui ne reconnat que certains types de retours de chariot. Par exemple, utilisez CR/LF (Windows), si votre diteur de texte est le Bloc-notes de Windows, et CR (Macintosh) s'il s'agit de SimpleText. Remarque : Pour les serveurs auxquels vous vous connectez via FTP, cette option ne s'applique qu'en mode de transfert binaire ; le mode de transfert ASCII de Dreamweaver ignore cette option. Si vous tlchargez (en rception) des fichiers en mode ASCII, Dreamweaver dfinit les sauts de ligne en fonction du systme d'exploitation de votre ordinateur ; si vous transfrez des fichiers en mode ASCII, les sauts de ligne sont toujours dfinis comme CR/LF.
Casse de balise par dfaut et casse d'attribut par dfaut Contrlez la capitalisation des noms de balises et d'attributs.
Ces options s'appliquent aux balises et aux attributs que vous insrez ou que vous modifiez dans le mode Cration, mais pas aux balises ou attributs que vous entrez directement dans le mode Code (ou l'Inspecteur de code), ni aux balises ou attributs dj contenus dans un document que vous ouvrez (sauf, dans ce dernier cas, si vous avez galement activ l'une des options Remplacer la casse de). Remarque : Cette prfrence s'applique uniquement aux pages HTML. Dreamweaver l'ignore pour les pages XHTML tant donn que les balises et les attributs en majuscules sont incorrects dans XHTML.
Remplacer la casse de : Balises et Attributs Spcifie s'il faut toujours convertir les noms de balises et d'attributs dans la casse spcifie, mme lors de l'ouverture d'un document HTML existant. Lorsque vous activez l'une de ces options et que vous cliquez sur OK pour fermer la bote de dialogue, les balises et les attributs du document actif sont immdiatement convertis dans la casse indique et il en sera de mme dans tous les documents que vous ouvrirez par la suite (du moins tant que vous n'aurez pas dsactiv cette option). Les balises et les attributs que vous tapez en mode Code ou dans Quick Tag Editor ou bien que vous insrez partir du panneau Insertion, sont galement convertis dans la casse spcifie. Par exemple, si vous voulez que les noms des balises soient toujours convertis en minuscules, spcifiez minuscules dans l'option Casse de balise par dfaut et activez l'option Remplacer la casse de : Balises. Lorsque vous ouvrez ensuite un document contenant des noms de balises en majuscules, Dreamweaver les convertit en minuscules.
Remarque : D'anciennes versions du code HTML permettaient d'crire les noms d'attributs et les balises en majuscules ou en minuscules, mais le XHTML requiert des minuscules. L'usage du XHTML tant de plus en plus rpandu, il est conseill d'utiliser des minuscules pour ces lments.
version prliminaire
Balise TD : Ne pas inclure de saut de ligne dans la balise TD Rsout un problme de rendu qui se rencontre dans
certains anciens navigateurs, si un espace blanc ou des sauts de ligne sont placs immdiatement aprs une balise <td> ou juste avant une balise </td>. Si vous activez cette option, Dreamweaver ne place pas de saut de ligne aprs une balise <td> ou avant une balise </td>, mme si le formatage de la bibliothque de balises indique qu'un saut de ligne devrait tre insr.
Formatage avanc Permet de dfinir des options de formatage pour le code CSS (Cascading Style Sheets, feuilles de style en cascade) et pour les diffrents attributs et balises dans l'diteur de la bibliothque de balises. Espace blanc (version japonaise uniquement) Permet de slectionner une espace inscable ( ) ou une espace Zenkaku pour votre code HTML. L'espace blanc slectionn avec cette option est utilis pour les balises vides lors de la cration d'un tableau et lorsque l'option Autoriser plusieurs espaces conscutives est active dans les pages de codage japonaises.
Voir aussi
Mise en forme du code CSS la page 148 Dfinition des prfrences de conseils de code la page 317
Dfinition des prfrences de correction de code

Les prfrences de correction de code permettent de spcifier les prfrences de modification de code par Dreamweaver lors de l'ouverture de documents, lorsque vous copiez et collez des lments de formulaires ou que vous entrez des valeurs et adresses URL l'aide des outils (par exemple, l'inspecteur Proprits). Ces prfrences sont sans effet lorsque vous modifiez du code HTML ou des scripts dans le mode Code. Si vous dsactivez ces options de correction, les lments de marquage non valides sont affichs dans la fentre de document pour le code HTML qu'il aurait corrig.
1 Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh). 2 Slectionnez la catgorie Correction du code dans la liste de gauche. 3 Parmi les options suivantes, dfinissez celles de votre choix :
Corriger les balises incorrectement imbriques et non fermes Corrige les balises qui se chevauchent. Par exemple,
<b><i>texte</b></i> est rcrit comme <b><i>texte</i></b>. Cette option insre galement des guillemets et des crochets de fermeture s'ils sont absents.
Renommer les lments de formulaire lors du collage Garantit l'absence de noms d'objets de formulaire en double.
Cette option est active par dfaut. Remarque : Contrairement d'autres options de cette bote de dialogue de prfrences, cette option ne s'applique pas l'ouverture d'un document, mais uniquement lorsque vous copiez et collez un lment de formulaire.
Supprimer les balises de fermeture superflues Supprime les balises de fermeture auxquelles aucune balise d'ouverture
ne correspond.
M'avertir lors de la correction ou de la suppression de balises Affiche un rcapitulatif des codes HTML
techniquement non valides que Dreamweaver a tent de corriger. Ce rcapitulatif indique l'emplacement du problme ( l'aide des numros de ligne et de colonne), pour vous permettre de vrifier la correction et veiller ce qu'elle produise l'effet voulu.
Ne jamais corriger le code : Dans les fichiers avec extensions. Permet d'empcher Dreamweaver de corriger le code
dans les fichiers portant les extensions indiques. Cette option est particulirement utile pour les fichiers contenant des balises propritaires.
version prliminaire
Coder <, >, & et " dans les valeurs d'attributs l'aide de & Garantit que les valeurs d'attribut entres ou modifies
l'aide des outils Dreamweaver (par exemple, l'inspecteur Proprits) ne contiennent que des caractres autoriss. Cette option est active par dfaut. Remarque : Cette option et les options suivantes ne s'appliquent pas aux adresses URL entres dans le mode Code. De plus, ces options n'entranent pas de modification dans le code dj prsent dans un fichier.
Ne pas coder les caractres spciaux Empche toute modification des adresses URL par Dreamweaver en vue de
n'utiliser que des caractres autoriss. Cette option est active par dfaut.
Coder caractres spciaux dans les URL l'aide de &# Garantit que, lorsque vous entrez ou modifiez des adresses URL l'aide des outils Dreamweaver (par exemple, l'inspecteur Proprits), ces URL ne contiennent que des caractres autoriss. Coder caractres spciaux dans les URL l'aide de % Fonctionne de faon identique l'option ci-dessus, mais utilise
une autre mthode pour coder les caractres spciaux. Cette mthode d'encodage ( l'aide du signe %) offre une meilleure compatibilit avec les navigateurs plus anciens, mais ne se montre pas aussi efficace avec les caractres utiliss dans certaines langues.
Voir aussi
Nettoyage de fichiers HTML crs avec Microsoft Word la page 73 Dfinition des prfrences de conseils de code la page 317
Dfinition des couleurs du code

Utilisez les prfrences de coloration du code pour spcifier les couleurs des principales catgories de balises et d'lments de code, par exemple les balises lies la mise en forme ou les identificateurs JavaScript. Pour dfinir les prfrences de coloration d'une balise spcifique, modifiez sa dfinition dans l'diteur de la bibliothque de balises.
1 Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh). 2 Slectionnez la catgorie Coloration du code dans la liste de gauche. 3 Slectionnez un type de document dans la liste Type de document. Les modifications que vous apportez aux
prfrences de coloration du code influeront sur tous les documents de ce type.

4 Cliquez sur le bouton Modifier le modle de coloration. 5 Dans la bote de dialogue Modifier le modle de coloration, choisissez un lment de code dans la liste Styles, puis
dfinissez la couleur du texte, la couleur d'arrire-plan et ventuellement le style (gras, italique ou soulign). L'chantillon de code affich dans le volet d'aperu est modifi pour correspondre aux nouveaux styles et couleurs. Cliquez sur OK pour enregistrer les modifications et fermer la bote de dialogue Modifier le modle de coloration.
6 Apportez les autres modifications requises aux prfrences de coloration du code, puis cliquez sur OK.
Arrire-plan par dfaut permet de dfinir la couleur d'arrire-plan par dfaut pour le mode Code et pour l'inspecteur
de code.
Caractres masqus dfinit la couleur des caractres masqus. Arrire-plan du code en direct dfinit la couleur d'arrire-plan du mode Code en direct. La couleur par dfaut est le
jaune.
Modifications du code en direct dfinit la couleur de surbrillance du code qui est modifi dans le mode Code en direct.
La couleur par dfaut est le rose.

Arrire-plan en lecture seule dfinit la couleur d'arrire-plan du texte en lecture seule.
version prliminaire
Voir aussi
Personnalisation des prfrences de coloration de code d'un modle la page 433 Modification de bibliothques, de balises et d'attributs la page 353 Prvisualisation du code en direct la page 298 Dfinition des prfrences de conseils de code la page 317
Utilisation d'un diteur externe

Vous pouvez spcifier un diteur externe utiliser pour l'dition de fichiers possdant des extensions prcises. Par exemple, vous pouvez lancer un diteur de texte comme BBEdit, le Bloc-Notes ou TextEdit partir de Dreamweaver pour modifier les fichiers JavaScript (JS). Vous pouvez attribuer diffrents diteurs externes pour diffrentes extensions de nom de fichier.
Voir aussi
Ouverture de fichiers en mode Code par dfaut la page 309
Dfinition d'un diteur externe pour un type de fichier

1 Choisissez Edition > Prfrences. 2 Slectionnez la catgorie Types de fichiers/Editeurs dans la liste de gauche, puis cliquez sur OK.
Ouvrir en mode Code Prcise les extensions de noms de fichiers ouvrir automatiquement en mode Code dans
Dreamweaver.
Editeur de code externe Spcifie l'diteur de texte utiliser. Recharger les fichiers modifis Indiquez ce que Dreamweaver doit faire lorsqu'il dtecte que des changements ont t apports de l'extrieur un document dj ouvert dans Dreamweaver. Enregistrer au dmarrage Permet d'indiquer si Dreamweaver doit systmatiquement enregistrer le document actif
avant d'excuter l'diteur, ne jamais enregistrer le document ou vous demander s'il doit l'enregistrer ou non chaque lancement de l'diteur externe.
Fireworks Spcifiez les diteurs pour divers types de fichiers multimdia.
Dmarrage d'un diteur de code externe

Choisissez Edition > Modifier avec diteur externe.
Rdaction et modification de code

Indicateurs de code
Les conseils de code vous permettent d'insrer et de modifier le code rapidement et sans erreur de saisie. A mesure que vous tapez des caractres en mode Code, une liste de suggestions s'affiche et vous aide complter votre saisie. Par exemple, lorsque vous tapez les premiers caractres du nom d'une balise, d'un attribut ou d'une proprit CSS, une liste d'options dont le nom commence par ces caractres s'affiche. Cette fonctionnalit facilite l'insertion et la modification de code. Vous pouvez galement l'utiliser pour consulter les attributs disponibles pour une balise, les paramtres d'une fonction ou les mthodes d'un objet.
version prliminaire
Les conseils de code sont disponibles pour diffrents types de code. Lorsque vous tapez le premier caractre d'un type de code prcis, une liste de suggestions s'affiche. Par exemple, pour afficher la liste des conseils de code pour les noms de balises HTML, tapez un crochet ouvrant (<). De mme, pour afficher des conseils de code pour JavaScript, tapez un point aprs un objet. Pour exploiter pleinement cette fonctionnalit, en particulier lorsque vous l'utilisez pour des fonctions et des objets, dfinissez l'option Dlai de la bote de dialogue Prfrences de conseils de code sur 0 seconde. La fonctionnalit de conseils de code reconnat galement les classes JavaScript personnalises qui ne sont pas intgres ce langage. Vous pouvez rdiger ces classes personnalises ou les ajouter par l'intermdiaire de bibliothques de fournisseurs tiers, comme Prototype. Pour faire disparatre la liste des conseils de code, appuyez sur la touche Retour arrire (Windows) ou Arrire (Macintosh). Vous trouverez un didacticiel vido sur les conseils de code l'adresse www.adobe.com/go/lrvid4048_dw_fr. Vous trouverez un didacticiel vido sur la prise en charge de JavaScript dans Dreamweaver, ralis par l'quipe de Dreamweaver, l'adresse www.adobe.com/go/dw10javascript_fr.
Langages et technologies pris en charge

Dreamweaver prend en charge les conseils de code pour les langages et les technologies suivants :
HTML CSS DOM (Document Object Model) JavaScript (avec conseils de code pour les classes personnalises) Ajax Spry Adobe ColdFusion JSP PHP MySQL ASP JavaScript ASP VBScript ASP.NET C# ASP.NET VB
Affichage d'un menu de conseils de code

Le menu de conseils de code s'affiche automatiquement lorsque vous tapez en mode Code. Vous pouvez galement l'afficher manuellement, sans taper.
1 En mode Code (Fentre > Code), placez le point d'insertion l'intrieur d'une balise. 2 Appuyez sur Ctrl + Barre d'espace.
Insertion de code l'aide des conseils en mode Code

1 Saisissez le premier caractre du segment de code. Par exemple, pour insrer une balise, tapez un crochet ouvrant
(<). Pour insrer un attribut, placez le point d'insertion juste aprs le nom de la balise, puis appuyez sur la barre d'espace.
version prliminaire
Une liste d'lments (par exemple les noms des diffrentes balises ou des diffrents attributs) s'affiche. Vous pouvez fermer cette liste tout moment en appuyant sur la touche Echap.
2 Faites dfiler les lments de la liste l'aide de la barre de dfilement ou des touches flches vers le haut et vers le bas. 3 Double-cliquez sur l'un des lments de cette liste pour l'insrer ; vous pouvez galement le slectionner, puis
appuyer sur la touche Entre (Windows) ou Retour (Macintosh). Si vous avez cr un style CSS et que celui-ci ne figure pas dans la liste des conseils de code correspondant aux styles CSS, cliquez sur Actualiser la liste des styles. Si le mode Cration est visible, il peut arriver que du code non valide s'y affiche provisoirement lorsque vous cliquez sur Actualiser la liste des styles. Pour faire disparatre ce code non valide du mode Cration, appuyez sur F5 afin d'actualiser l'affichage aprs l'insertion du style.
4 Pour insrer une balise de fin, tapez </ (barre oblique).
Remarque : Par dfaut, Dreamweaver dtermine le moment o une balise de fermeture est requise et l'insre automatiquement. Vous pouvez modifier ce comportement par dfaut, de faon ce que Dreamweaver insre une balise de fermeture lorsque vous avez tap le crochet fermant (>) final de la balise d'ouverture. Alternativement, le comportement par dfaut peut consister ne pas insrer la moindre balise de fermeture. Slectionnez Edition > Prfrences > Conseils de code, puis slectionnez l'une des options de Balises de fermeture.
Modification d'une balise l'aide des conseils de code

Pour remplacer un attribut par un autre, supprimez l'attribut concern et sa valeur, puis ajoutez le nouvel attribut
et la valeur associe en suivant la procdure ci-avant.
Pour modifier une valeur, supprimez la valeur concerne, puis ajoutez une nouvelle valeur en suivant la procdure
ci-avant.
Actualisation des conseils de code JavaScript

Dreamweaver actualise automatiquement la liste des conseils de code disponibles lorsque vous travaillez dans un fichier JavaScript. Par exemple, supposons que vous travailliez dans un fichier HTML principal et que vous passiez un fichier JavaScript afin d'y apporter une modification. Cette modification se rpercute dans la liste des conseils de code lorsque vous revenez au fichier HTML principal. Toutefois, la mise jour automatique ne fonctionne que si vous modifiez vos fichiers JavaScript dans Dreamweaver. Si vous les modifiez en dehors de Dreamweaver, appuyez sur CTRL+point pour actualiser les conseils de code JavaScript.
Conseils de code et erreurs de syntaxe

Il peut arriver que les conseils de code ne fonctionnent pas correctement si Dreamweaver dtecte des erreurs de syntaxe dans votre code. Dreamweaver signale les erreurs de syntaxe en affichant des informations leur sujet dans une barre en haut de la page. La barre d'informations sur les erreurs de syntaxe affiche la premire ligne du code o Dreamweaver a rencontr l'erreur. Lorsque vous avez corrig les erreurs, Dreamweaver continue afficher celles qui surviennent par la suite. Dreamweaver fournit une assistance supplmentaire en mettant en rouge les numros des lignes o des erreurs de syntaxe se sont produites. Cette mise en vidence est visible dans le mode Code du fichier contenant l'erreur. Dreamweaver affiche non seulement les erreurs de syntaxe pour la page actuelle, mais aussi pour les pages associes. Supposons par exemple que vous travailliez sur une page HTML utilisant un fichier JavaScript inclus. Si le fichier inclus contient une erreur, Dreamweaver affiche galement une alerte pour celui-ci. Vous pouvez aisment ouvrir le fichier associ contenant l'erreur en cliquant sur son nom dans le haut du document.
version prliminaire
Vous pouvez dsactiver la barre d'informations sur les erreurs de syntaxe. Pour ce faire, cliquez sur le bouton Alertes d'erreurs de syntaxe dans la barre d'outils de codage.
Dfinition des prfrences de conseils de code

Vous pouvez modifier les paramtres par dfaut des conseils de code. Par exemple, si vous ne voulez pas afficher les noms des proprits CSS ou les conseils de code Spry, vous pouvez les dsactiver parmi les prfrences des conseils de code. Vous pouvez galement dfinir des prfrences relatives au dlai d'affichage des conseils de code et aux balises de fermeture. Mme si l'affichage des conseils de code est dsactiv, vous pouvez afficher un conseil en mode Code en appuyant sur les touches Ctrl+Barre d'espace.
1 Choisissez Edition > Prfrences. 2 Slectionnez la catgorie Conseils de code dans la liste de gauche. 3 Parmi les options suivantes, dfinissez celles de votre choix :
Balises de fermeture Permet de spcifier le mode d'insertion des balises de fermeture par Dreamweaver. Par dfaut,
Dreamweaver insre la balise de fermeture automatiquement lorsque vous tapez les caractres </. Vous pouvez modifier ce comportement par dfaut, de faon ce que Dreamweaver insre une balise de fermeture suite au crochet fermant (>) de la balise d'ouverture, ou de faon omettre les balises de fin.
Activer les conseils de code Entrane l'affichage des conseils de code lorsque vous entrez du code en mode Code.
Rglez le curseur Dlai pour dfinir le dlai (en secondes) qui s'coule avant l'apparition des conseils appropris.
Activer les infobulles descriptives Affiche une description dtaille (s'il en existe une) du conseil de code slectionn. Menus Dfinit prcisment le type de conseils de code afficher pendant la saisie. Libre vous d'utiliser tous les menus ou une partie seulement.
Voir aussi
Utilisation des menus d'indication dans Quick Tag Editor la page 342 DOM (Document Object Model) W3C Didacticiel sur les conseils de code
Conseils de code spcifiques au site

Dreamweaver CS5 permet aux dveloppeurs qui emploient Joomla, Drupal, Wordpress ou d'autres cadres de visualiser les conseils de code PHP lorsqu'ils crivent en mode Code. Pour afficher ces conseils de code, vous devez tout d'abord crer un fichier de configuration l'aide de la bote de dialogue Conseils de code spcifiques au site. La configuration indique o Dreamweaver doit rechercher les conseils de code spcifiques votre site.
Cration du fichier de configuration

La bote de dialogue Conseils de code spcifiques au site permet de crer le fichier de configuration requis pour afficher les conseils de code dans Dreamweaver. Par dfaut, Dreamweaver place le fichier de configuration dans le rpertoire Adobe Dreamweaver CS5\configuration\Shared\Dinamico\Presets.
version prliminaire
Remarque : Les conseils de code que vous crez sont spcifiques au site slectionn dans le panneau Fichiers de Dreamweaver. Pour que les conseils de code puissent tre affichs, la page sur laquelle vous travaillez doit se trouve dans le site actuellement slectionn.
1 Choisissez Site > Conseils de code.
Par dfaut, la fonctionnalit Conseils de code spcifiques au site analyse votre site afin de dterminer quel cadre CMS (systme de gestion du contenu) vous employez. Par dfaut, Dreamweaver prend en charge trois cadres : Drupal, Joomla et Wordpress. Les quatre boutons droite du menu Structure permettent d'importer, enregistrer, renommer ou supprimer des structures de cadre. Remarque : Il est impossible de supprimer ou de renommer les structures de cadre par dfaut existantes.
2 Dans la zone Sous-racine, dfinissez le dossier de sous-racine o vous stockez les fichiers de votre cadre. Vous
pouvez cliquer sur l'icne de dossier en regard de la zone de texte pour rechercher l'emplacement des fichiers de cadre. Dreamweaver affiche l'arborescence des dossiers contenant les fichiers de votre cadre. Si les dossiers et/ou fichiers analyser sont tous affichs, cliquez sur OK pour excuter l'analyse. Si vous voulez personnaliser l'analyse, passez aux tapes suivantes.
3 Cliquez sur le bouton Plus (+) dans le haut de la fentre Fichiers afin de slectionner un fichier ou un dossier
ajouter l'analyse. Dans la bote de dialogue Ajouter fichier/dossier, vous pouvez spcifier les extensions de fichiers spcifiques que vous voulez inclure. Remarque : La dfinition d'extensions de fichier spcifiques acclre le processus d'analyse.
4 Pour retirer des fichiers de l'analyse, slectionnez-les puis cliquez sur le bouton Moins (-) dans le haut de la fentre
Fichiers. Remarque : Si vous avez slectionn le cadre Drupal ou Joomla, la bote de dialogue Conseils de code spcifiques au site affiche un chemin d'accs supplmentaire vers n fichier dans votre dossier de configuration de Dreamweaver. Ne le supprimez pas, car il est ncessaire en cas d'emploi de ces cadres.
5 Pour personnaliser la faon dont la fonctionnalit Conseils de code spcifiques au site traite un fichier ou un dossier
prcis, slectionnez-le dans la liste et effectuez l'une des actions suivantes :
Choisissez Analyser ce dossier pour inclure le dossier slectionn dans l'analyse. Slectionnez Rcursif pour inclure tous les fichiers et dossiers du rpertoire slectionn. Cliquez sur le bouton Extensions pour ouvrir la bote de dialogue Rechercher des extensions, o vous pouvez
prciser les extensions de fichiers inclure dans l'analyse pour un fichier ou un dossier dtermin.
Enregistrement de la structure du site

Vous pouvez enregistrer la structure de site personnalise que vous avez cre dans la bote de dialogue Conseils de code spcifiques au site.
1 Crez la structure des fichiers et des dossiers dsire, en ajoutant et supprimant les fichiers et dossiers selon vos
besoins.
2 Cliquez sur le bouton Enregistrer la structure dans le coin suprieur droit de la bote de dialogue. 3 Donnez un nom la structure du site, puis cliquez sur Enregistrer.
Remarque : Si le nom que vous indiquez est dj utilis, Dreamweaver vous invite entrer un nom diffrent ou confirmer que vous voulez craser la structure portant ce mme nom. Il est impossible d'craser les structures de cadre par dfaut.
version prliminaire
Modification du nom d'une structure de site

Lorsque vous renommez la structure de votre site, n'oubliez pas que vous ne pouvez pas utiliser les noms d'une des trois structures de cadre de site par dfaut, ni le mot custom (personnalis).
1 Affichez la structure renommer. 2 Cliquez sur l'icne Renommer la structure dans le coin suprieur droit de la bote de dialogue. 3 Entrez le nouveau nom de la structure, puis cliquez sur Renommer.
Remarque : Si le nom que vous indiquez est dj utilis, Dreamweaver vous invite entrer un nom diffrent ou confirmer que vous voulez craser la structure portant ce mme nom. Il est impossible d'craser les structures de cadre par dfaut.
Ajout de fichiers ou de dossiers la structure d'un site

Vous pouvez ajouter n'importe quel fichier ou dossier associ votre cadre. Vous pouvez ensuite prciser les extensions des fichiers analyser. (Voir la section suivante.)
1 Cliquez sur le bouton Plus (+) dans le haut de la fentre Fichiers pour ouvrir la bote de dialogue Ajouter
fichier/dossier.
2 Dans la zone Ajouter fichier/dossier, entrez le chemin d'accs au fichier ou au dossier ajouter. Vous pouvez
galement cliquer sur l'icne de dossier ct de la zone de texte pour rechercher un fichier ou un dossier.
3 Cliquez sur le bouton Plus (+) dans le haut de la fentre Extensions pour prciser les extensions des fichiers
analyser. Remarque : La dfinition d'extensions de fichier spcifiques acclre le processus d'analyse.

4 Cliquez sur Ajouter.
Recherche d'extensions de fichiers dans un site

Utilisez la bote de dialogue Rechercher des extensions pour afficher et trouver les extensions des fichiers inclus dans la structure du site.
1 Dans la bote de dialogue Conseils de code spcifiques au site, cliquez sur le bouton Extensions.
La bote de dialogue Rechercher des extensions affiche les extensions pouvant tre analyses pour l'instant.
2 Pour ajouter une autre extension la liste, cliquez sur le bouton Plus (+) dans le haut de la fentre Extensions. 3 Pour supprimer une extension de la liste, cliquez sur le bouton Moins (-).
Insertion de code avec la barre d'outils de codage

1 Assurez-vous que vous tes en mode Code (Affichage > Code). 2 Placez le curseur dans le code, ou slectionnez un bloc de code. 3 Cliquez sur un bouton de la barre d'outils de codage, ou slectionnez un lment de l'un des menus contextuels de
la barre d'outils. Pour connatre la fonction de chaque bouton, positionnez le pointeur sur ce bouton jusqu' ce qu'une info-bulle apparaisse. La barre d'outils de codage contient par dfaut les boutons suivants :
Ouvrir les documents Affiche la liste des documents ouverts. Lorsque cette option est slectionne, elle s'affiche dans
la fentre Document.
Afficher la fentre Navigation dans le code Affiche la fentre Navigation dans le code. Pour plus d'informations,
consultez la rubrique Navigation vers le code apparent la page 325.
version prliminaire
Rduire balises entires Rduit tout le contenu compris entre une balise douverture et sa balise de fermeture (par exemple, tout le code compris entre <table> et </table>). Pour rduire tout le contenu d'une balise complte, placez le point d'insertion sur la balise d'ouverture ou de fermeture, puis cliquez sur le bouton Rduire balise entire.
Il est galement possible de rduire le code situ l'extrieur d'une balise complte, en plaant le point d'insertion dans une balise d'ouverture ou de fermeture avant de cliquer sur le bouton Rduire balise entire tout en maintenant la touche Alt enfonce (Windows) ou la touche Option (Macintosh). Par ailleurs, vous pouvez maintenir la touche Ctrl enfonce tout en cliquant sur ce bouton pour dsactiver la rduction intelligente. Dans ce cas, Dreamweaver najuste pas le contenu rduit lextrieur de la paire de balises. Pour plus d'informations sur le mode Code, consultez la section A propos de la rduction du code la page 332.
Rduire la slection Rduit le code slectionn.
Vous pouvez galement rduire le code en dehors d'une slection en cliquant tout en maintenant enfonce la touche Alt (Windows) ou Option (Macintosh) sur le bouton Rduire slection. Par ailleurs, vous pouvez maintenir la touche Ctrl enfonce tout en cliquant sur ce bouton pour dsactiver la rduction intelligente. Dans ce cas, Dreamweaver najuste pas le contenu et rduit exactement le code slectionn. Pour plus d'informations sur le mode Code, consultez la section A propos de la rduction du code la page 332.
Dvelopper tout Rtablit tout le code rduit. Slectionner une balise parent Slectionne le contenu et les balises douverture et de fermeture qui encadrent la ligne
dans laquelle est plac le point dinsertion. Si vous cliquez plusieurs fois sur ce bouton et que toutes vos balises sont quilibres, Dreamweaver slectionne finalement les balises html et /html situes aux extrmits.
Equilibrer les accolades Slectionne tout le code se trouvant l'intrieur des parenthses, des accolades ou des crochets qui encadrent la ligne dans laquelle est plac le point dinsertion. Si vous cliquez plusieurs fois sur ce bouton et que toutes vos balises sont quilibres, Dreamweaver slectionne finalement les parenthses, accolades ou crochets les plus extrieur(e)s du document. Numros de lignes Permet d'afficher ou masquer les numros de lignes au dbut de chaque ligne de code. Surligner le code non valide Surligne le code non valide en jaune. Alertes d'erreurs de syntaxe dans la barre d'information Active ou dsactive une barre d'information, dans le haut de
la page, qui vous avertit des erreurs de syntaxe. Lorsque Dreamweaver dtecte une erreur de syntaxe, la barre d'information sur les erreurs de syntaxe spcifie la ligne de code o cette erreur est survenue. En outre, Dreamweaver met en surbrillance le numro de la ligne de l'erreur, sur la gauche du document, en mode Code. La barre d'information est active par dfaut, mais elle ne s'affiche que lorsque Dreamweaver dtecte des erreurs de syntaxe sur la page.
Appliquer commentaire Permet d'encadrer le code slectionn avec des balises de commentaires, ou d'ouvrir de nouvelles balises de commentaires.
Appliquer Commentaire HTML encadre le code slectionn de balises , ou ouvre une nouvelle balise si
aucun code n'est slectionn.
Appliquer Commentaire // insre une double barre oblique (//) au dbut de chaque ligne du code CSS ou
JavaScript slectionn, ou insre une unique balise // si aucun code n'est slectionn.
Appliquer Commentaire /* */ encadre le code CSS ou JavaScript slectionn avec les codes de commentaires /* et /*. La marque de commentaire ' a t conue pour le code Visual Basic. Elle insre un guillemet droit simple au dbut
de chaque ligne slectionne d'un script Visual Basic, ou insre un guillemet droit simple au point d'insertion si aucun code n'est slectionn.
Lorsque vous travaillez sur un fichier ASP, ASP.NET, JSP, PHP ou ColdFusion, si vous appliquez loption
Appliquer Commentaire sur serveur, Dreamweaver dtecte automatiquement la balise de commentaire correcte et lapplique la slection.
version prliminaire
Supprimer commentaire Supprime les balises de commentaires du code slectionn. Si une slection comporte des
commentaires incorpors, seules les balises de commentaire externe sont supprimes.

Envelopper avec balise Permet d'encadrer le code slectionn avec la balise indique dans Quick Tag Editor. Fragment de code rcents Permet de choisir dans le panneau Fragments de code un fragment de code rcemment utilis et de l'insrer. Pour plus d'informations, consultez la section Manipulation de fragments de code la page 328. Dplacer ou convertir une feuille CSS Permet de dplacer du code CSS ou de convertir du code CSS intgr en rgles
CSS. Pour plus d'informations, consultez les sections Dplacement/exportation de rgles CSS la page 145 et Conversion d'un style CSS intgr en une rgle CSS la page 146.
Indentation du code Ramne la slection vers la droite. Indentation ngative du code Ramne la slection vers la gauche. Mise en forme du code source Applique les formats de code prcdemment dfinis au code slectionn (ou la page entire si aucun code n'est slectionn). Vous pouvez galement dfinir les prfrences de formatage du code en slectionnant Formatage du code source avec le bouton du mme nom, ou en modifiant les bibliothques de balises en slectionnant Edition, Bibliothques de balises.
Le nombre de boutons disponibles dans la barre d'outils de codage varie selon la taille d'affichage en mode Code dans la fentre du document. Pour voir tous les boutons disponibles, vous pouvez redimensionner la fentre d'affichage du mode Code ou cliquer sur le bouton d'expansion, la base de la barre d'outils de codage. Vous pouvez galement modifier la barre d'outils de codage pour afficher des boutons supplmentaires (Retour automatique la ligne, Caractres masqus et Retrait auto) ou pour masquer des boutons que vous ne souhaitez pas utiliser. Nanmoins, vous devez pour cela modifier le fichier XML qui gnre la barre d'outils. Pour plus d'informations, voir Extension de Dreamweaver. Remarque : L'option d'affichage des caractres masqus, qui ne fait pas partie des boutons par dfaut de la barre d'outils de codage, est disponible partir du menu Affichage (Affichage > Options d'affichage de code > Caractres masqus).
Voir aussi
Vrification de l'quilibre des balises et des accolades la page 335 Prsentation de la barre d'outils de codage la page 11 Affichage des barres d'outils la page 21
Insertion de code l'aide du panneau Insertion

1 Positionnez le point d'insertion dans le code. 2 Slectionnez la catgorie approprie du panneau Insertion. 3 Cliquez sur un bouton du panneau Insertion ou slectionnez un lment de l'un des menus de ce panneau.
Ds que vous cliquez sur une icne, le code peut apparatre immdiatement dans la page ou une bote de dialogue peut vous demander de spcifier des informations supplmentaires pour terminer le code. Pour connatre la fonction de chaque bouton, positionnez le pointeur sur ce bouton jusqu' ce qu'une info-bulle apparaisse. Le nombre et le type des boutons du panneau Insertion varient selon la nature du document affich. et selon que le mode Code ou Cration est actif. Bien que le panneau Insertion regroupe les balises frquemment utilises, son contenu n'est pas exhaustif. Vous trouverez un choix plus vari de balises dans le slecteur de balises.
version prliminaire
Voir aussi
Utilisation du panneau Insertion la page 212
Insertion de balises avec le Slecteur de balises

Vous pouvez utiliser le slecteur de balises pour insrer dans une page n'importe quelle balise figurant dans les bibliothques de balises de Dreamweaver (notamment les bibliothques de balises de ColdFusion et ASP.NET).
1 Placez le point d'insertion dans le code, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la
touche Contrle enfonce (Macintosh), puis slectionnez Insrer la balise. Le Slecteur de balises s'affiche. Le panneau de gauche rpertorie les bibliothques de balises prises en charge, tandis que le panneau de droite affiche les balises individuelles du dossier de bibliothques de balises slectionn.
2 Dans la bibliothque de balises, slectionnez une catgorie de balises ou dveloppez cette catgorie pour
slectionner une sous-catgorie.

3 Slectionnez la balise souhaite dans le volet de droite. 4 Pour afficher les informations concernant la syntaxe et l'emploi de la balise dans le slecteur de balises, cliquez sur
le bouton Infos sur les balises. Ces informations, si elles existent, s'affichent.
5 Pour afficher ces informations dans le panneau Rfrence, cliquez sur l'icne <?>. Ces informations, si elles existent,
s'affichent.
6 Cliquez sur le bouton Insrer pour insrer la balise slectionne dans le code.
Si la balise affiche dans le volet de droite apparat entre crochets, par exemple <title></title>), elle ne ncessite aucune information complmentaire et s'insre directement dans le document au niveau du point d'insertion. Si la balise ne ncessite aucune information complmentaire, un diteur de balises s'affiche.
7 Le cas chant, entrez les informations supplmentaires dans l'diteur de balises, puis cliquez sur OK. 8 Cliquez sur le bouton Fermer.
Voir aussi
A propos des bibliothques de balises de Dreamweaver la page 352
Insertion de commentaires HTML

Un commentaire est un texte descriptif insr dans le code HTML pour expliciter le code ou fournir d'autres informations. Le commentaire apparat uniquement en mode Code ; il ne s'affiche pas dans un navigateur.
Insertion d'un commentaire au niveau du point d'insertion

Choisissez Insertion > Commentaire.
En mode Code, une balise de commentaire est insre et le point d'insertion est plac au milieu de celle-ci. Saisissez votre commentaire. En mode Cration, la bote de dialogue Commentaire s'affiche. Entrez le commentaire, puis cliquez sur OK.
Affichage des marqueurs de commentaires en mode Cration

Vrifiez que l'option Commentaires est slectionne dans les prfrences des lments invisibles. Dans le cas contraire, le marqueur de commentaire ne s'affiche pas.
version prliminaire
Modification d'un commentaire existant

En mode Code, recherchez le commentaire pour en modifier le texte. En mode Cration, slectionnez le marqueur Commentaire, modifiez le texte de votre commentaire dans
l'inspecteur Proprits, puis cliquez dans la fentre de document.
Copie et collage de code

1 Copiez le code partir du mode Code ou d'une autre application. 2 Placez le point d'insertion en mode Code, puis choisissez Edition > Coller.
Voir aussi
Collage et dplacement de fragments de code rduits la page 333
Modification de balises avec des diteurs de balises

Les diteurs de balises permettent d'afficher, de spcifier et de modifier les attributs d'une balise.
sur une balise (en mode Code) ou sur un objet (en mode Cration), puis slectionnez la commande Modifier la balise du menu contextuel. Le contenu de cette bote de dialogue varie selon la balise slectionne.
2 Indiquez ou modifiez les attributs de la balise, puis cliquez sur OK.
Pour obtenir davantage d'informations sur la balise partir de l'diteur de balises, cliquez sur l'option Infos sur les balises.
Modification de code l'aide du menu Codage

1 En mode Code, slectionnez du code, puis cliquez avec le bouton droit de la souris (Windows) ou en maintenant
la touche Contrle enfonce (Macintosh).

2 Cliquez sur le sous-menu Slection puis choisissez l'une des options suivantes :
Rduire la slection Rduit le code slectionn. Rduire l'extrieur de la slection Rduit tout le code l'extrieur du code slectionn. Dvelopper la slection Dveloppe le fragment de code slectionn. Rduire balises entires Rduit tout le contenu compris entre une balise douverture et sa balise de fermeture (par exemple, tout le code compris entre <table> et </table>). Rduire extrieur balises entires Rduit le contenu l'extrieur d'un jeu de balises d'ouverture et de fermeture (par exemple, le contenu l'extrieur de <table> et </table>). Dvelopper tout Rtablit tout le code rduit. Appliquer Commentaire HTML Encadre le code slectionn de balises , ou ouvre une nouvelle balise si
aucun code n'est slectionn.

Appliquer Commentaire /* */ Encadre le code CSS ou JavaScript slectionn avec les codes de commentaires /* et */. Appliquer Commentaire // Insre une double barre oblique (//) au dbut de chaque ligne du code CSS ou JavaScript
slectionn, ou insre une unique balise // si aucun code nest slectionn.

Appliquer Commentaire ' Insre un guillemet droit simple au dbut de chaque ligne slectionne d'un script Visual Basic, ou insre un guillemet droit simple au point d'insertion si aucun code n'est slectionn.
version prliminaire
Appliquer Commentaire sur serveur Entoure le code slectionn. Lorsque vous travaillez sur un fichier ASP,
ASP.NET, JSP, PHP ou ColdFusion, si vous appliquez loption Appliquer Commentaire sur serveur, Dreamweaver dtecte automatiquement la balise de commentaire correcte et lapplique la slection.
Appliquer correction barre oblique inverse-commentaire Entoure le code CSS slectionn de balises de commentaire qui forcent Internet Explorer 5 pour Macintosh ignorer le code. Appliquer correction Ciao Entoure le code CSS slectionn de balises de commentaire qui forcent Internet Netscape Navigator 4 ignorer le code. Supprimer commentaire Supprime les balises de commentaires du code slectionn. Si une slection comporte des
commentaires incorpors, seules les balises de commentaire externe sont supprimes.

Supprimer correction barre oblique inverse-commentaire Supprime les balises de commentaires du code CSS
slectionn. Si une slection comporte des commentaires incorpors, seules les balises de commentaire externe sont supprimes.
Supprimer correction Ciao Supprime les balises de commentaires du code CSS slectionn. Si une slection comporte
des commentaires incorpors, seules les balises de commentaire externe sont supprimes.
Convertir les tabulations en espaces Convertit toutes les tabulations de la slection en espaces ; le nombre d'espaces correspond la valeur de taille de tabulation dfinie dans les prfrences Format. Pour plus d'informations, consultez la section Modification du format du code la page 310. Convertir les espaces en tabulations Convertit les groupes d'espaces de la slection en tabulations. Les groupes dont le nombre d'espaces correspond la valeur de taille de tabulation dfinie sont convertis en tabulation. Retrait Met la slection en retrait, en la repoussant vers la droite. Pour plus d'informations, consultez la section Mise
en retrait des blocs de code la page 325.

Retrait ngatif Ramne la slection vers la gauche. Supprimer toutes les balises Supprime toutes les balises de la slection. Convertir les lignes en tableaux Insre une balise table sans attribut de part et d'autre de la slection. Ajouter des sauts de ligne Ajoute une balise br la fin de chaque ligne de la slection. Convertir en majuscules Convertit toutes les lettres de la slection (y compris les noms et les valeurs des balises et des
attributs) en majuscules.
Convertir en minuscules Convertit toutes les lettres de la slection (y compris les noms et les valeurs des balises et des
attributs) en minuscules.
Convertir les balises en majuscules Convertit tous les noms de balise et d'attribut et toutes les valeurs d'attribut de la
slection en majuscules.
Convertir les balises en minuscules Convertit tous les noms de balise et d'attribut et toutes les valeurs d'attribut de la
slection en minuscules.
Voir aussi
Rduction et dveloppement de fragments de code la page 332
version prliminaire
Modification d'une balise de langage de serveur l'aide de l'inspecteur Proprits

Vous pouvez modifier le code dans une balise de langage de serveur (comme une balise ASP) sans accder au mode Code, grce l'inspecteur Proprits du code.
1 En mode Cration, slectionnez l'icne visuelle de balise de langage de serveur. 2 Dans l'inspecteur Proprits, cliquez sur le bouton Edition. 3 Apportez les modifications requises au code de la balise puis cliquez sur OK.
Voir aussi
Configuration de l'ordinateur pour le dveloppement d'applications la page 543
Mise en retrait des blocs de code

Lorsque vous rdigez et modifiez votre code en mode Code ou dans l'inspecteur de code, vous pouvez corriger le niveau de mise en retrait de la ligne ou du bloc de code slectionns, en les dplaant d'une tabulation vers la gauche ou vers la droite.
Mise en retrait du bloc de code slectionn

Appuyez sur la touche de tabulation. Slectionnez Edition > Indentation du code.
Annulation de la mise en retrait du bloc de code slectionn

Appuyez sur Maj+Tab. Slectionnez Edition > Indentation ngative du code.
Navigation vers le code apparent

La fentre Navigation dans le code affiche une liste de codes source apparents une slection spcifique sur votre page. Vous pouvez l'utiliser pour naviguer vers les codes source apparents, comme des rgles CSS internes et externes, des inclusions ct serveur, des fichiers JavaScript externes, des fichiers de modles parents, des fichiers de bibliothque et des fichiers source iframe. Lorsque vous cliquez sur un lien dans la fentre Navigation dans le code, Dreamweaver ouvre le fichier contenant le code concern. Ce fichier s'affiche dans la section des fichiers apparents, pour autant que cette fonctionnalit soit active. Si elle n'est pas active, Dreamweaver ouvre le fichier slectionn dans un document spar, dans la fentre de document. Si vous cliquez sur une rgle CSS dans la fentre Navigation dans le code, Dreamweaver accde directement cette rgle. S'il s'agit d'une rgle interne du fichier, Dreamweaver l'affiche en mode fractionn. Si la rgle est un fichier CSS externe, Dreamweaver ouvre ce dernier et affiche la rgle dans la section des fichiers apparents, au-dessus du document principal. Vous pouvez accder la fentre Navigation dans le code depuis les modes Cration, Code et fractionn, ainsi qu' partir de l'inspecteur de code. Vous trouverez un didacticiel vido sur l'utilisation du navigateur de code, ralis par l'quipe de Dreamweaver, l'adresse http://www.adobe.com/go/dw10codenav_fr. Vous trouverez un didacticiel vido relatif l'utilisation du mode Affichage en direct, aux fichiers apparents et la fentre Navigation dans le code l'adresse www.adobe.com/go/lrvid4044_dw_fr.
version prliminaire
Ouverture de la fentre Navigation dans le code

Tout en maintenant la touche ALT (Windows) ou les touches Commande+Option (Macintosh) enfonces, cliquez
n'importe o sur la page. La fentre Navigation dans le code affiche des liens vers le code qui s'applique la zone sur laquelle vous venez de cliquer. Cliquez en dehors de la fentre Navigation dans le code pour la fermer. Remarque : Vous pouvez galement ouvrir la fentre Navigation dans le code en cliquant sur l'icne s'affiche proximit du point d'insertion sur la page si la souris reste inactive pendant 2 secondes. . Cette icne
Navigation vers le code l'aide de la fentre Navigation dans le code

1 Ouvrez la fentre Navigation dans le code partir de la zone qui vous intresse. 2 Clique sur l'lment de code auquel vous voulez accder.
La fentre Navigation dans le code regroupe les sources de code apparentes par fichier et numre les fichiers dans l'ordre alphabtique. Par exemple, supposons que des rgles CSS de trois fichiers externes influent sur la slection dans votre document. Dans ce cas, la fentre Navigation dans le code prsente la liste de ces trois fichiers, ainsi que des rgles CSS relatives la slection. Pour le code CSS relatif une slection prcise, la fentre Navigation dans le code fonctionne de faon similaire au panneau Styles CSS du mode Actuel. Lorsque vous maintenez le pointeur de la souris au-dessus d'une rgle CSS, la fentre Navigation dans le code affiche, dans une infobulle, les proprits de cette rgle. Ces infobulles peuvent vous aider distinguer des rgles qui partagent un mme nom.
Dsactivation de l'icne Navigation dans le code

1 Ouvrez la fentre Navigation dans le code. 2 Cliquez sur Dsactiver l'indicateur dans le coin infrieur droit de la fentre. 3 Cliquez en dehors de la fentre Navigation dans le code pour la fermer.
Pour activer de nouveau l'icne Navigation dans le code, cliquez tout en maintenant la touche ALT (Windows) ou les touches Commande+Option (Macintosh) enfonces, afin d'ouvrir la fentre Navigation dans le code, puis dsactivez l'option Dsactiver l'indicateur.
Voir aussi
Ouverture des fichiers associs la page 70 Didacticiel sur la navigation dans le code
Accs une fonction JavaScript ou VBScript

En mode Code et dans l'inspecteur de code, vous pouvez afficher la liste des fonctions JavaScript ou VBScript de votre code et passer ainsi directement l'une de ces dernires.
1 Affichez le document en mode Code (Affichage > Code) ou l'inspecteur de code (Fentre > Inspecteur de code). 2 Effectuez l'une des oprations suivantes :
En mode Code, cliquez du bouton droit (Windows) ou tout en appuyant sur Contrle (Macintosh) dans la fentre
Code, puis slectionnez le sous-menu Fonctions dans le menu contextuel. Le sous-menu Fonctions ne s'affiche pas en mode Cration. Si votre code contient des fonctions JavaScript ou VBScript, elles apparaissent dans le sous-menu.
version prliminaire
Pour afficher ces fonctions dans l'ordre alphabtique, cliquez avec le bouton droit de la souris tout en appuyant sur la touche Ctrl (Windows) ou en maintenant les touches Ctrl et Option enfonces (Macintosh) en mode Code, puis slectionnez le sous-menu Fonctions.
Dans l'Inspecteur de code, cliquez sur le bouton de navigation dans le code ({ }) de la barre d'outils.
3 Slectionnez un nom de fonction pour atteindre cette dernire.
Extraction de JavaScript
JavaScript Extractor (JSE) supprime tout le code JavaScript (ou la plupart de celui-ci) de votre document Dreamweaver, l'exporte dans un fichier externe et lie ce fichier votre document. JSE peut galement supprimer des gestionnaires d'vnements tels que onclick et onmouseover de votre code puis joindre votre document, de manire transparente, le code JavaScript associ ces gestionnaires. Avant d'employer JavaScript Extractor, nous attirons votre attention sur les limitations suivantes :
JSE n'extrait pas les balises de script du corps du document (sauf dans le cas de widgets Spry). Il se pourrait que
l'externalisation de ces scripts donne des rsultats inattendus. Par dfaut, Dreamweaver affiche la liste de ces scripts dans la bote de dialogue Externaliser le code JavaScript, mais ne les slectionne pas pour extraction. Si vous le souhaitez, vous pouvez les slectionner manuellement.
JSE n'extrait pas le code JavaScript des rgions modifiables de fichiers .dwt (modle Dreamweaver), de rgions non
modifiables d'instances de modles ou d'lments de bibliothque Dreamweaver.
Lorsque vous avez extrait le code JavaScript l'aide de l'option Externaliser le code JavaScript et associer de manire
transparente, vous ne pouvez plus modifier les comportements Dreamweaver dans le panneau Comportements. Dreamweaver ne peut pas inspecter et complter le panneau Comportements l'aide de comportements qu'il a associs de manire transparente.
Il est impossible d'annuler vos modifications aprs avoir ferm la page. Vous pouvez par contre annuler les
modifications tant que vous restez dans la mme session d'dition. Pour annuler, choisissez Edition > Annuler Externaliser le code JavaScript.
Il se peut que certaines pages trs complexes ne fonctionnent pas comme prvu. Faites preuve de prudence lors de
l'extraction de code JavaScript de pages dont le corps et les variables globales contiennent document.write(). Vous trouverez un didacticiel vido sur la prise en charge de JavaScript dans Dreamweaver, ralis par l'quipe de Dreamweaver, l'adresse www.adobe.com/go/dw10javascript_fr. Pour utiliser JavaScript Extractor :
1 Ouvrez une page qui contient du code JavaScript (par exemple une page Spry). 2 Choisissez Commandes > Externaliser le code JavaScript. 3 Dans la bote de dialogue Externaliser le code JavaScript, modifiez ventuellement les options par dfaut.
Choisissez Externaliser le code JavaScript uniquement si vous voulez que Dreamweaver dplace le code
JavaScript dans un fichier externe et qu'il y fasse rfrence dans le document actuel. Cette option laisse les gestionnaires d'vnements tels que onclick et onload dans le document et conserve les comportements visibles dans le panneau Comportements.
Choisissez Externaliser le code JavaScript et associer de manire transparente si vous voulez que Dreamweaver
1) dplace le code JavaScript vers un fichier externe et y fasse rfrence dans le document actuel, et 2) supprime les gestionnaires d'vnements du code HTML et les insre en cours d'excution l'aide de JavaScript. Lorsque vous slectionnez cette option, vous ne pouvez plus modifier les comportements dans le panneau Comportements.
version prliminaire
Dans la colonne Modifier, dsactivez les modifications que vous ne voulez pas apporter, ou activez celles que
Dreamweaver n'a pas slectionnes par dfaut. Par dfaut, Dreamweaver prsente mais ne slectionne pas les modifications suivantes :
Les blocs de script dans l'en-tte du document qui contiennent des appels document.write() ou
document.writeln().
Les blocs de script dans l'en-tte du document qui contiennent des signatures de fonction associes au code
de gestion EOLAS, qui utilise document.write().
Les blocs de script dans le corps du document, sauf s'ils contiennent uniquement un widget Spry ou des
constructeurs d'ensembles de donnes Spry.
Dreamweaver attribue automatiquement des ID aux lments qui n'en possdent pas encore. Si ces ID ne vous
conviennent pas, vous pouvez les modifier dans les zones de texte ID.
4 Cliquez sur OK.
La bote de dialogue de synthse rcapitule les extractions. Passez ces extractions en revue puis cliquez sur OK.
5 Enregistrez la page.
Dreamweaver cre un fichier SpryDOMUtils.js, ainsi qu'un autre fichier contenant le code JavaScript extrait. Dreamweaver enregistre le fichier SpryDOMUtils.js dans un dossier SpryAssets de votre site. L'autre fichier est enregistr au mme niveau que la page partir de laquelle vous avez extrait le code JavaScript. N'oubliez pas de charger ces deux fichiers dpendants sur votre serveur Web lorsque vous enverrez la page d'origine.
Voir aussi
Cration de pages Spry visuellement la page 435
Manipulation de fragments de code

Les fragments de code permettent de stocker des contenus en vue de pouvoir les rutiliser rapidement. Vous pouvez crer, insrer, modifier ou supprimer des fragments de code HTML, JavaScript, CFML, ASP, PHP, etc. Vous pouvez galement grer et partager vos fragments de code avec les autres membres de l'quipe. Vous disposez de quelques fragments prdfinis que vous pouvez employer comme point de dpart. Les fragments de code contenant des balises <font> et d'autres lments et attributs dconseills ont t dplacs dans le dossier Anciennes versions du panneau Fragments de code.
Insertion d'un fragment de code

1 Placez le point d'insertion l'endroit o vous souhaitez insrer le fragment de code ou slectionnez le code
combiner avec le fragment choisi.

2 Dans le panneau Fragments de code (Fentre > Fragments de code), double-cliquez sur le fragment de code.
Vous pouvez galement cliquer avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) sur le fragment de code, puis slectionner Insrer dans le menu contextuel.
Cration d'un fragment de code

1 Cliquez sur l'icne Nouveau fragment de code situ au bas du panneau Fragments de code 2 Donnez un nom au fragment de code.
Remarque : Les noms de fragments de code ne peuvent pas comporter les caractres qui sont interdits dans les noms de fichiers (barres obliques (/ ou \), caractres spciaux ou guillemets doubles ()).
version prliminaire
3 (Facultatif) Entrez la description du fragment de code sous forme de texte. qui permettra aux autres membres de
l'quipe de l'utiliser plus facilement.

4 Pour l'option Type de fragment de code, slectionnez Envelopper la slection ou Insrer le bloc. a Si vous avez opt pour l'enveloppement de la slection, ajoutez du code aux options suivantes :
Insrer avant Tapez ou collez le code insrer avant la slection en cours. Insrer aprs Tapez ou collez le code insrer aprs la slection en cours.
Pour dfinir un espacement par dfaut entre les blocs, utilisez des sauts de ligne ; appuyez sur Entre (Windows) ou Retour (Macintosh) l'intrieur des zones de texte. Remarque : Dans la mesure o les fragments de code peuvent tre crs en dbut ou en fin de bloc, vous pouvez les utiliser pour encadrer d'autres balises et contenus. Ce procd est pratique pour insrer un formatage, des liens, des lments de navigation et des blocs de script spciaux. Il vous suffit de mettre en surbrillance l'lment entourer puis d'insrer le fragment de code.
b Si vous avez opt pour l'insertion du bloc, tapez ou collez le code insrer. 5 (Facultatif) Slectionnez le type d'aperu : Code ou Cration.
Cration Restitue le code et l'affiche dans le volet d'aperu du panneau Fragment de code. Code Affiche le code dans le volet d'aperu.
6 Cliquez sur OK.
Modification ou suppression d'un fragment de code

Dans le panneau Fragments de code, slectionnez un fragment de code, puis cliquez sur le bouton Modifier le
fragment de code ou sur le bouton Supprimer, dans le bas du panneau.
Cration de dossiers de fragments de code et gestion de fragments

1 Cliquez sur le bouton Nouveau dossier de fragments de code situ au bas du panneau Fragments de code. 2 Faites glisser des fragments de code vers le nouveau dossier ou d'autres dossiers, votre convenance.
Ajout ou modification d'un raccourci clavier pour un fragment de code

1 Dans le panneau Fragments de code, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la
touche Ctrl enfonce (Macintosh) et slectionnez Modifier les raccourcis clavier. L'diteur de raccourcis clavier s'ouvre.
2 Dans le menu contextuel Commandes, choisissez Fragments de code.
Une liste de fragments de code s'affiche.

3 Slectionnez celui qui vous intresse et affectez-lui le raccourci clavier de votre choix.
Pour plus d'informations, consultez la section Personnalisation des raccourcis clavier la page 34.
Partage d'un fragment de code avec d'autres membres de l'quipe

1 Recherchez le fichier correspondant au fragment de code partager dans le sous-dossier Configuration/Snippets
du dossier de l'application Dreamweaver.

2 Copiez le fichier du fragment de code dans un dossier partag sur votre ordinateur ou sur un ordinateur en rseau. 3 Veillez ce que les autres membres de l'quipe copient le fichier du fragment de code dans leurs dossiers
Configuration/Snippets respectifs.
version prliminaire
Recherche de balises, d'attributs ou de chanes de texte dans le code

Vous pouvez rechercher certains types de balises, des attributs et des valeurs d'attribut. Par exemple, vous pouvez rechercher toutes les balises img n'ayant pas l'attribut alt. Vous pouvez galement rechercher des chanes de texte spcifiques se trouvant l'intrieur ou l'extrieur d'un jeu de balises. Par exemple, vous pouvez rechercher le mot Untitled document entre les balises title pour trouver toutes les pages sans nom du site.
1 Ouvrez le document dans lequel la recherche doit tre effectue ou slectionnez des documents ou un dossier dans
2 Slectionnez la commande Edition > Rechercher et remplacer. 3 Indiquez les fichiers sur lesquels doit porter la recherche, puis indiquez le type de recherche effectuer et enfin le
texte ou les balises rechercher. Le cas chant, spcifiez galement le texte de remplacement. Cliquez ensuite sur un des boutons Rechercher ou Remplacer.
4 Cliquez sur le bouton Fermer. 5 Pour effectuer une nouvelle recherche sans afficher la bote de dialogue Rechercher et remplacer, appuyez sur F3
(Windows) ou Commande+G (Macintosh).
Voir aussi
Expressions rgulires la page 305 Recherche et remplacement de texte la page 228
Enregistrement et chargement de modles de recherche

Vous pouvez sauvegarder vos modles de recherche pour les rutiliser ultrieurement.
Voir aussi
Expressions rgulires la page 305 Recherche et remplacement de texte la page 228
Enregistrement d'un modle de recherche

1 Dans la bote de dialogue Rechercher et remplacer (Edition > Rechercher et remplacer), dfinissez les paramtres
de la recherche.
2 Cliquez sur le bouton Enregistrer la requte (reprsentant une disquette). 3 Dans la bote de dialogue qui s'affiche, recherchez le dossier o vous voulez enregistrer les requtes. Saisissez un
nom pour identifier le fichier correspondant la requte, puis cliquez sur Enregistrer. Par exemple, si le modle de recherche inclut la recherche de balises img sans l'attribut alt, vous pouvez nommer la requte img_sans_alt.dwr. Remarque : L'extension des fichiers correspondant aux requtes enregistres est .dwr. Certains fichiers de requte enregistrs partir de versions antrieures de Dreamweaver peuvent galement avoir l'extension .dwq.
Chargement d'un modle de recherche

1 Slectionnez la commande Edition > Rechercher et remplacer. 2 Cliquez sur l'icne Charger la requte (reprsentant un dossier).
version prliminaire
3 Recherchez le dossier contenant les requtes enregistres. Slectionnez ensuite un fichier de requte, puis cliquez
sur Ouvrir.
4 Cliquez sur Rechercher le suivant, Rechercher tout, Remplacer ou Remplacer tout pour lancer la recherche.
Utilisation des documents de rfrence sur les langages

Le panneau Rfrence est un outil de rfrence rapide pour les langages de balisage, les langages de programmation et les styles CSS. Il comporte des informations sur les diffrentes balises, les objets et les styles que vous manipulez en mode Code (ou Inspecteur de code). Il comporte galement des exemples de code que vous pouvez coller dans vos documents.
Ouverture du panneau Rfrence

1 Excutez l'une des actions suivantes en mode Code :
Cliquez sur une balise, un attribut ou un mot-cl avec le bouton droit de la souris (Windows) ou en maintenant la
touche Ctrl enfonce (Macintosh), puis slectionnez Rfrence dans le menu contextuel.
Placez le point d'insertion dans une balise, un attribut ou un mot-cl, puis appuyez sur Maj+F1.
Le panneau Rfrence apparat et affiche des informations sur la balise, l'attribut ou le mot-cl sur lequel vous avez cliqu.
2 Pour ajuster la taille du texte dans le panneau Rfrence, slectionnez Grande police, Police moyenne ou Petite
police dans le menu Options (la petite flche en haut droite du panneau).
Collage d'un exemple de code dans votre document

1 Cliquez n'importe o sur l'exemple de code de contenu de rfrence.
L'exemple de code entier est mis en surbrillance.

2 Slectionnez Edition > Copier, puis collez l'exemple de code dans votre document en mode Code.
Consultation du contenu de rfrence dans le panneau Rfrence

1 Pour afficher les balises, les objets ou les styles d'un autre ouvrage, choisissez-en un autre dans le menu
droulant Livre.
2 Pour afficher des informations sur un lment spcifique, slectionnez-le dans le menu droulant Balise, Objet,
Style ou CFML (selon le manuel slectionn).

3 Pour consulter les informations se rapportant un attribut de l'lment slectionn, slectionnez cet attribut dans
le menu droulant affich prs du menu Balise, Objet, Style ou CFML. Ce menu contient la liste des attributs associs l'lment slectionn. L'lment Description est slectionn par dfaut. Il contient une description de l'lment choisi.
version prliminaire
Impression de code
Vous pouvez imprimer le code que vous avez rdig pour le consulter, l'archiver ou le distribuer.
1 Ouvrez une page en mode Code. 2 Slectionnez Fichier > Imprimer le code. 3 Spcifiez les options d'impression, puis cliquez sur OK (Windows) ou sur Imprimer (Macintosh).
Rduction du code
A propos de la rduction du code
Vous pouvez rduire ou dvelopper des fragments de code, ce qui permet de voir diffrentes sections du document sans quil soit ncessaire dutiliser la barre de dfilement. Par exemple, pour afficher toutes les rgles CSS dans la balise head qui s'appliquent une balise div plus loin sur la page, vous pouvez rduire tout ce qui se trouve entre les baliseshead et div, de manire voir les deux sections de code en mme temps. Bien que vous puissiez slectionner des fragments de code en mode Cration ou Code, vous ne pouvez rduire le code qu'en mode Code. Remarque : Le code des fichiers crs partir de modles Dreamweaver est toujours affich en mode dvelopp, mme si le modle (*.dwt) contient des fragments de code rduits.
Voir aussi
Collage et dplacement de fragments de code rduits la page 333 Insertion de code avec la barre d'outils de codage la page 319 Nettoyage du code la page 334
Rduction et dveloppement de fragments de code

Lorsque vous slectionnez du code, un ensemble de boutons de rduction est affich prs de la slection (symboles Moins sous Windows ; triangles verticaux sur le Macintosh). Cliquez sur ces boutons pour dvelopper et rduire la slection. Lorsque le code est rduit, les boutons de rduction se transforment en boutons de dveloppement (un bouton Plus sous Windows ; triangle horizontal sur le Macintosh). Il peut arriver que le fragment de code slectionn ne soit pas prcisment rduit. En effet, Dreamweaver utilise une technique de rduction intelligente pour rduire les types de slection les plus courants de la faon la plus agrable visuellement. Par exemple, si vous avez slectionn une balise en retrait, puis les espaces dindentation situs avant cette balise, Dreamweaver ne rduira pas ces espaces dindentation, car la plupart des utilisateurs sattendent ce que lindentation du code soit prserve. Pour dsactiver la rduction intelligente du code et forcer Dreamweaver rduire exactement ce que vous avez slectionn, maintenez la touche Control enfonce avant de rduire le code. Par ailleurs, une icne davertissement est affiche ct des fragments de code rduits contenant des erreurs ou du code qui nest pas gr par certains navigateurs. Vous pouvez galement rduire le code en cliquant tout en maintenant enfonce la touche Alt (Windows) ou Option (Macintosh) sur l'un des boutons de rduction ou le bouton Rduire slection de la barre d'outils de codage.
1 Slectionnez du code. 2 Slectionnez Edition > Fractionnement de code, puis slectionnez l'une des options.
version prliminaire
Voir aussi
Modification de code l'aide du menu Codage la page 323 Insertion de code avec la barre d'outils de codage la page 319
Slection d'un fragment de code rduit

En mode d'affichage Code, cliquez sur le fragment de code rduit.
Remarque : En mode Cration, lorsque vous effectuez une slection qui fait partie dun fragment de code rduit, cette portion de code est automatiquement dveloppe dans le mode Code. Toujours en mode Cration, lorsque vous slectionnez un fragment de code complet, cette portion de code reste rduite dans le mode d'affichage Code.
Affichage du code dun fragment de code rduit sans le dvelopper

Amenez le pointeur de la souris au-dessus du fragment de code rduit.
Utilisation de raccourcis clavier pour rduire et dvelopper le code

Vous pouvez galement utiliser les raccourcis clavier suivants :
Commande Rduire la slection Rduire l'extrieur de la slection Dvelopper la slection Rduire balises entires Rduire extrieur balises entires Dvelopper tout Windows Ctrl+Maj+C Ctrl+Alt+C Ctrl+Maj+E Ctrl+Maj+J Ctrl+Alt+J Ctrl+Alt+E Macintosh Commande+Maj+C Commande+Alt+C Commande+Maj+E Commande+Maj+J Commande+Alt+J Commande+Alt+E
Collage et dplacement de fragments de code rduits

Vous pouvez copier et coller des fragments de code rduits, ou faire glisser des fragments de code rduits afin de les dplacer.
Voir aussi
Insertion de code avec la barre d'outils de codage la page 319 Nettoyage du code la page 334
Copie et collage un fragment de code rduit

1 Slectionnez le fragment de code rduit. 2 Choisissez Edition > Copier. 3 Placez le curseur au point o vous voulez coller le code. 4 Choisissez Edition > Coller.
Remarque : Vous pouvez coller du code dans d'autres applications, il est automatiquement dvelopp.
Dplacement d'un fragment de code rduit par glisser-dplacer

1 Slectionnez le fragment de code rduit.
version prliminaire
2 Faites glisser la slection vers le nouvel emplacement.
Pour faire glisser une copie de la slection, appuyez sur Ctrl (Windows) ou Alt (Macintosh) et faites glisser la slection. Remarque : Il est impossible d'effectuer un glisser-dposer vers d'autres documents.
Optimisation et dbogage de code

Recherche d'erreurs de codage l'aide du validateur
La fonctionnalit de validation des balises a t abandonne depuis Dreamweaver CS5. Toutefois, Dreamweaver prend toujours en charge les validateurs de code externes que vous installez sous forme d'extensions. Lorsque vous installez une extension de validation externe, Dreamweaver prsente ses prfrences dans la catgorie Validateur de la bote de dialogue Prfrences.
1 Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh). 2 Slectionnez la catgorie Programme de validation dans la liste de gauche. 3 Slectionnez les bibliothques de balises utiliser pour la validation.
Vous ne pouvez pas slectionner plusieurs versions d'un mme langage ou d'une mme bibliothque de balises. Par exemple, vous ne pouvez pas slectionner la fois HTML 4.0 et HTML 3.2 ou HTML 2.0. Slectionnez la version la plus ancienne prendre en compte. En effet, si le document contient du code valide pour HTML 2.0, ce code sera galement valide pour HTML 4.0.
4 Cliquez sur Options et dfinissez les options pour ces bibliothques. 5 Slectionnez les options d'affichage correspondant aux types d'erreurs et d'avertissements inclure dans le rapport
du programme de validation.
6 Slectionnez les lments faire vrifier par le validateur.
Guillemets dans le texte Indique que Dreamweaver doit vous avertir lors de chaque utilisation de guillemets dans le texte du document. Il est recommand d'utiliser l'entit " la place de guillemets dans le texte de documents HTML. Entits dans le texte Indique que Dreamweaver doit conseiller le remplacement de certains caractres (comme l'esperluette (&), infrieur (<) et suprieur (>)) par leurs quivalents en entit HTML.
7 Cliquez sur OK pour fermer la bote de dialogue Options du programme de validation, puis nouveau sur OK pour
dfinir les prfrences.
Voir aussi
Validation des balises la page 336
Nettoyage du code
Vous pouvez supprimer automatiquement les balises vides, de combiner les balises font imbriques et de nettoyer le code HTML ou XHTML dsordonn ou illisible. Pour plus d'informations sur le nettoyage du code HTML gnr par Microsoft Word, consultez la section Ouverture et modification de documents existants la page 69.
1 Ouvrez un document :
S'il s'agit d'un document HTML, slectionnez Commandes > Nettoyer le code HTML.
version prliminaire
S'il s'agit d'un document XHTML, slectionnez Commandes > Nettoyer le code XHTML.
La commande Nettoyer le code XHTML permet de nettoyer le code HTML, de corriger les erreurs de syntaxe XHTML, de dfinir les attributs de balise en minuscules et d'ajouter ou de signaler les attributs manquants d'une balise dans un document XHTML.
2 Dans la bote de dialogue qui s'affiche, dfinissez les options de votre choix, puis cliquez sur OK.
Remarque : Selon la taille du document et le nombre d'options slectionnes, le nettoyage peut prendre plusieurs secondes.
Supprimer Balises de conteneur vides Supprime toute paire de balises sans contenu. Par exemple, <b></b> et <font
color="#FF0000"></font> sont des balises vides, mais la balise <b> dans <b>texte</b> ne l'est pas.
Supprimer Balises redondantes imbriques Supprime toutes les occurrences redondantes d'une balise. Par exemple, dans le code <b>C'est ce que je voulais <b>vraiment</b> dire</b>, les balises b qui encadrent le mot vraiment sont redondantes et seront supprimes. Supprimer Commentaires HTML ne faisant pas partie de Dreamweaver Supprime tous les commentaires qui n'ont pas
t insrs par Dreamweaver. Par exemple,  sera supprim, mais
 ne le sera pas, car il s'agit d'un commentaire Dreamweaver
qui marque le dbut d'une zone modifiable dans un modle.

Supprimer Marqueur spcial Dreamweaver Supprime les commentaires ajouts par Dreamweaver. De cette manire, les documents sont automatiquement mis jour en mme temps que les modles et les lments de la bibliothque. Si vous activez cette option lors du nettoyage du code d'un document cr partir d'un modle, le document et son modle sont dissocis. Pour plus d'informations, consultez la section Dtachement d'un document d'un modle la page 429. Supprimer Balise(s) Supprime les balises spcifies dans la zone de texte adjacente. Utilisez cette option pour
supprimer des balises personnalises insres par d'autres diteurs visuels, ainsi que les autres balises que vous ne voulez pas voir apparatre sur votre site (par exemple, blink). Sparez les diffrentes balises par des virgules (par exemple, font, blink).
Combiner les balises <font> imbriques lorsque possible Combine deux ou plusieurs balises font se rapportant la
mme section de texte. Par exemple, <font size="7"><font color="#FF0000">rouge</font></font> sera remplac par <font size="7" color="#FF0000">rouge</font>.
Afficher le journal la fin Affiche un message d'avertissement dtaillant les modifications apportes au document ds que le nettoyage est termin.
Voir aussi
Modification du format du code la page 310 Dfinition des couleurs du code la page 313
Vrification de l'quilibre des balises et des accolades

Vous pouvez vrifier que les paires de balises, de parenthses (( )), d'accolades ({ }) et de crochets ([ ]) sont quilibres dans la page, autrement dit qu' chaque balise, parenthse, accolade ou crochet d'ouverture correspond une balise, une parenthse, une accolade ou un crochet de fermeture, et inversement.
Vrification de lquilibrage des accolades

1 Ouvrez le document en mode Code. 2 Placez le point d'insertion dans le code imbriqu vrifier.
version prliminaire
3 Choisissez Edition > Slectionner balise parente.
Les balises correspondantes de dlimitation (ainsi que leur contenu) sont slectionnes dans le code. Si vous choisissez plusieurs fois Edition > Slectionner balise parente et que toutes vos balises sont quilibres, Dreamweaver slectionne finalement les balises html et /html qui ouvrent et ferment le document.
Vrification de l'quilibre de paires de parenthses, d'accolades ou de crochets

1 Ouvrez le document en mode Code. 2 Placez le point d'insertion dans le code vrifier. 3 Choisissez Edition > Equilibrer les accolades.
Le code se trouvant entre parenthses, entre accolades ou entre crochets est slectionn. Choisissez de nouveau Edition > Equilibrer les accolades pour slectionner le code qui se trouve l'intrieur des parenthses, des accolades ou des crochets dlimitant la nouvelle slection.
Vrification de la compatibilit du navigateur

Les fonctions de vrification de la compatibilit avec les navigateurs vous permettent de rechercher les combinaisons de HTML et de feuilles de style CSS pouvant dclencher des problmes de restitution dans des navigateurs. Cette fonctionnalit teste galement le code de vos documents et dtermine s'il contient des proprits ou des valeurs CSS non prises en charge par les navigateurs cibles. Remarque : Cette fonction remplace l'ancienne fonction de vrification du navigateur cible, mais conserve la fonctionnalit CSS de cette fonction.
Voir aussi
Vrification de problmes de restitution CSS entre les navigateurs la page 151
Validation des balises

La fonctionnalit de validation des balises (Fichier > Valider ) a t abandonne depuis Dreamweaver CS5.
Conformit des pages avec le langage XHTML

Lorsque vous crez une page, vous pouvez faire en sorte qu'elle soit compatible avec le langage XHTML. Cette opration est galement possible avec les documents HTML existants.
Voir aussi
Code XHTML la page 303
Cration de documents conformes au code XHTML

1 Choisissez Fichier > Nouveau. 2 Slectionnez une catgorie et un type de page crer. 3 Slectionnez l'une des dfinitions de type de document (DTD) XHTML dans le menu droulant Type de document
(DTD) l'extrme droite de la bote de dialogue, puis cliquez sur Crer. Par exemple, vous pouvez rendre un document HTML compatible XHTML en slectionnant XHTML 1.0 transitionnel ou XHTML 1.0 Strict dans le menu droulant. Remarque : Cette opration est impossible pour certains types de documents.
version prliminaire
Cration de documents conformes au code XHTML par dfaut

1 Choisissez Edition > Prfrences ou Dreamweaver > Prfrences (Mac OS X), puis slectionnez la catgorie
Nouveau document.
2 Slectionnez un document par dfaut et l'une des dfinitions de type de document XHTML dans le menu droulant
Type de document (DTD), puis cliquez sur OK. 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.
Conformit d'un document HTML avec le langage XHTML

1 Ouvrez un document, puis effectuez l'une des oprations suivantes :
Pour un document sans cadres, slectionnez Fichier > Convertir, puis slectionnez l'une des dfinitions de type
de document 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.
Pour un document avec cadres, slectionnez un cadre, puis Fichier > Convertir, puis slectionnez l'une des
dfinitions de type de document XHTML.
2 Pour convertir le document entier, rptez cette tape pour chacun des cadres et pour le document de jeu de cadres.
Remarque : Il est impossible de convertir une instance d'un modle, puisqu'elle doit reprendre le mme langage que le modle d'aprs lequel elle a t cre. Par exemple, un document conu d'aprs un modle XHTML restera toujours en XHTML ; de mme, un document conu d'aprs un modle HTML non conforme au langage XHTML restera toujours en HTML et ne pourra pas tre converti en XHTML ni dans aucun autre langage.
Utilisation du dbogueur ColdFusion (Windows uniquement)

Si vous utilisez ColdFusion pour tester Dreamweaver, vous pouvez afficher les informations de dbogage ColdFusion sans quitter Dreamweaver. Remarque : Cette fonction n'est pas prise en charge sur Macintosh. Les dveloppeurs Macintosh peuvent ouvrir une page ColdFusion dans un autre navigateur au moyen de la commande Aperu dans le navigateur (F12). Si la page contient des erreurs, les informations relatives aux causes possibles s'affichent au bas de la page. Si vous utilisez ColdFusion MX 6.1 ou une version antrieure, commencez par vrifier que le dbogage est activ dans ColdFusion Administrator. Si vous utilisez ColdFusion MX 7 ou une version ultrieure, Dreamweaver active automatiquement ce paramtrage. Vrifiez galement que ColdFusion est en cours dexcution sur le serveur dvaluation de Dreamweaver. Pour plus d'informations, consultez la section Configuration d'un serveur d'valuation la page 48. Pour garantir l'actualisation des informations de dbogage chaque fois qu'une page est affiche dans le navigateur interne, veillez ce que Internet Explorer recherche les versions plus rcentes du fichier chaque fois que celui-ci est demand. Dans Internet Explorer, slectionnez Outils > Options Internet, slectionnez l'onglet Gnral, puis cliquez sur le bouton Paramtres dans la zone Fichiers Internet temporaires. Dans la bote de dialogue Paramtres, slectionnez le bouton radio A chaque visite de la page.
1 Ouvrez la page ColdFusion dans Dreamweaver. 2 Cliquez sur l'icne Dbogage du serveur
dans la barre d'outils du document.
Dreamweaver demande la page hberge sur le serveur ColdFusion et l'affiche dans une fentre interne du navigateur Internet Explorer. Si la page contient des erreurs, leurs causes possibles s'affichent au bas de la page.
version prliminaire
Le panneau Dbogage de serveur qui s'ouvre simultanment regroupe de nombreuses informations utiles, telles que toutes les pages traites par le serveur pour la restitution de la page, toutes les requtes SQL excutes sur la page, ainsi que toutes les variables du serveur et leur valeur respective, le cas chant. Ce panneau rcapitule galement les dures d'excution.
3 Si une catgorie Exceptions apparat dans le panneau Dbogage de serveur, cliquez sur le bouton Plus (+) pour la
dvelopper. Cette catgorie s'affiche lorsque le serveur dtecte un ou plusieurs problmes sur la page. Dveloppez-la pour obtenir des informations sur le problme.
4 Repassez en mode Code (Affichage > Code) ou en mode Cration (Affichage > Cration), puis corrigez l'erreur. 5 Enregistrez le fichier puis cliquez nouveau sur l'icne Dbogage du serveur.
Dreamweaver restitue une nouvelle fois la page dans le navigateur interne et actualise le panneau Dbogage de serveur. Si tous les problmes sont rsolus sur la page, la catgorie Exceptions ne rapparat pas dans le panneau.
6 Pour quitter le mode de dbogage, passez en mode Code (Affichage > Code) ou en mode Cration (Affichage >
Cration).
Voir aussi
Utilisation de composants ColdFusion la page 666
Modification de code en mode Cration

A propos de la modification de code en mode Cration
Dreamweaver permet de crer et de modifier visuellement des pages Web sans se soucier du code source sous-jacent. Toutefois, vous serez peut-tre amen modifier ce code afin de contrler pleinement les oprations effectues sur vos pages ou de corriger les ventuels problmes. Dreamweaver vous permet de modifier une partie du code en mode Cration. Cette section est destine aux personnes qui prfrent travailler en mode Cration, mais qui souhaitent galement disposer d'un accs rapide au code.
Slection de balises enfants en mode Cration

En mode Cration, si vous slectionnez un objet contenant des balises enfants, par exemple un tableau HTML, vous pouvez slectionner rapidement la premire balise enfant de cet objet en choisissant Edition > Slectionner enfant. Remarque : Cette commande est disponible uniquement en mode Cration. Par exemple, la balise <table> comporte normalement des balises enfants <tr>. Si vous slectionnez une balise <table> dans le slecteur de balises, vous pouvez slectionner la premire ligne du tableau en choisissant Edition> Slectionner enfant. Dreamweaver slectionne la premire balise <tr> dans le slecteur de balises. Etant donn que la balise <tr> comporte elle-mme des balises enfants, <td> (dlimiteur de cellule), vous pouvez choisir nouveau Edition > Slectionner enfant pour slectionner la premire cellule du tableau.
version prliminaire
Modification de code avec l'inspecteur Proprits

Vous pouvez utiliser l'inspecteur Proprits pour examiner et modifier les attributs du texte ou des objets dans votre page. Souvent, les proprits affiches dans l'inspecteur Proprits correspondent aux attributs des balises ; la modification de l'une de ces proprits dans l'inspecteur revient en principe modifier l'attribut correspondant en mode Code. Remarque : L'inspecteur de balises et l'inspecteur Proprits permettent d'afficher et de modifier les attributs des balises. L'inspecteur de balises permet d'afficher et de modifier l'ensemble des attributs associs une balise donne. L'inspecteur Proprits affiche uniquement les attributs les plus frquents. En revanche, il contient un nombre plus important de commandes permettant de modifier les valeurs de ces attributs et permet galement de modifier certains objets (par exemple les colonnes des tableaux) ne correspondant aucune balise spcifique.
1 Cliquez sur le texte ou slectionnez un objet dans la page.
L'inspecteur Proprits pour le texte ou l'objet s'affiche sous la fentre de document. Si l'inspecteur Proprits n'est pas visible, choisissez Fentre > Proprits.
2 Utilisez l'inspecteur Proprits pour modifier vos attributs.
Modification de code CFML avec l'inspecteur Proprits

L'inspecteur Proprits permet d'examiner et de modifier le code CFML (ColdFusion markup language) en mode Cration.
1 Cliquez sur le bouton Attributs pour modifier les attributs de la balise ou pour en ajouter de nouveaux. 2 Si la balise prsente un contenu entre ses balises d'ouverture et de fermeture, cliquez sur le bouton Contenu pour
modifier ce contenu. Le bouton Contenu s'affiche uniquement si la balise slectionne n'est pas vide (c'est--dire, si elle possde une balise d'ouverture et une balise de fermeture).
3 Si la balise contient une expression conditionnelle, apportez vos changements dans la zone Expression.
Modification d'attributs dans l'inspecteur de balises

L'inspecteur de balises permet de modifier et d'ajouter des attributs et des valeurs d'attributs. L'inspecteur de balises permet de modifier balises et objets en utilisant une fiche de proprits semblable celles que l'on trouve dans d'autres environnements de dveloppement intgrs (integrated development environments, IDE).
1 Dans la fentre de document, effectuez l'une des procdures suivantes :
En mode Code (ou dans l'inspecteur de code), cliquez sur le nom d'une balise ou sur son contenu. En mode Cration, slectionnez un objet ou slectionnez une balise dans le slecteur de balises.
2 Ouvrez l'inspecteur de balises (Fentre > Inspecteur de balises) et choisissez l'onglet Attributs.
Les attributs de la slection et les valeurs actuellement dfinies s'affichent dans l'inspecteur de balises.
3 Dans l'inspecteur de balises, effectuez l'une des oprations suivantes :
Pour afficher les attributs par catgories, cliquez sur le bouton Afficher la vue par catgorie Pour modifier la valeur de l'attribut, slectionnez cette valeur puis modifiez-la.
. .
Pour afficher les attributs par ordre alphabtique, cliquez sur le bouton Afficher la vue sous forme de liste
Pour ajouter une valeur un attribut qui n'en a pas, cliquez dans la colonne des valeurs d'attribut situe droite de
l'attribut, puis indiquez votre valeur.
version prliminaire
Si l'attribut accepte les valeurs prdfinies, slectionnez une valeur dans le menu droulant (ou le slecteur de
couleur) situ droite de la colonne des valeurs d'attribut.
Si la valeur de l'attribut correspond une URL, cliquez sur le bouton Parcourir, utilisez l'icne du pointeur pour
slectionner un fichier, ou tapez le nom de l'URL dans la zone de texte.
Si la valeur de l'attribut correspond une source de contenu dynamique (par exemple, une base de donnes),
cliquez sur le bouton Donnes dynamiques situ droite de la colonne des valeurs d'attribut. Slectionnez ensuite votre source.
Pour supprimer la valeur de l'attribut, slectionnez la valeur supprimer, puis appuyez sur la touche Retour arrire
(Windows) ou Retour (Macintosh).
Pour modifier le nom d'un attribut, slectionnez le nom d'attribut souhait, puis modifiez-le.
Remarque : Si vous modifiez le nom d'un attribut standard et que vous lui attribuez une nouvelle valeur, le nouvel attribut et la valeur qui lui est associe sont automatiquement dplacs dans la catgorie approprie.
Pour ajouter un attribut ne figurant pas sur la liste, cliquez sur l'espace vide au bas de cette liste, puis saisissez le
nom de l'attribut ajouter.
4 Pour que les modifications apportes soient prises en compte dans votre document, appuyez sur la touche Entre
(Windows) ou Retour (Macintosh) ou cliquez un autre endroit de l'inspecteur de balises.
Voir aussi
Utilisation des comportements JavaScript la page 357 Cration et gestion de CSS la page 132 Dfinition de sources de contenu dynamique la page 578
Prsentation de Quick Tag Editor

Vous pouvez utiliser Quick Tag Editor pour examiner, insrer et modifier rapidement des balises HTML sans quitter le mode Cration. Si vous tapez des lments de code HTML non valides dans Quick Tag Editor, Dreamweaver tente de les corriger en insrant au besoin des guillemets ou des crochets de fermeture. Pour dfinir les options de Quick Tag Editor, ouvrez-le en appuyant sur Ctrl+T (Windows) ou sur Commande+T (Macintosh). Quick Tag Editor comporte trois modes :
Insrer HTML, qui permet d'insrer de nouveaux lments de code HTML ; Modifier la balise, qui permet de modifier une balise existante ; Envelopper avec balise, qui permet d'insrer une nouvelle balise de part et d'autre d'une slection.
Remarque : Le mode dans lequel s'ouvre Quick Tag Editor dpend de la slection en cours en mode Cration. Dans les trois modes, le fonctionnement de base de Quick Tag Editor reste le mme : ouvrez l'diteur, saisissez ou modifiez des balises et des attributs, puis fermez l'diteur. Lorsque Quick Tag Editor est actif, vous pouvez passer d'un mode l'autre en appuyant sur Ctrl+T (Windows) ou Commande+T (Macintosh).
version prliminaire
Voir aussi
Utilisation des menus d'indication dans Quick Tag Editor la page 342
Modification de code avec Quick Tag Editor

Quick Tag Editor permet d'examiner et de modifier rapidement les balises HTML sans quitter le mode Cration.
Voir aussi
Rdaction et modification de scripts en mode Cration la page 343
Insertion d'une balise HTML

1 En mode Cration, cliquez dans la page pour placer le point d'insertion l'endroit o vous voulez insrer le code. 2 Appuyez sur Ctrl+T (Windows) ou Commande+T (Macintosh).
Quick Tag Editor s'ouvre en mode Insrer HTML.
3 Saisissez la balise HTML, puis appuyez sur Entre.
La balise est insre dans votre code. Le cas chant, la balise de fermeture correspondante est galement insre.
4 Appuyez sur la touche Echap pour quitter Quick Tag Editor sans apporter aucun changement.
Modification d'une balise HTML

1 Slectionnez un objet en mode Cration.
Vous pouvez galement slectionner la balise que vous voulez modifier partir du slecteur de balise figurant au bas de la fentre de document. Pour plus d'informations, consultez la section Modification de code l'aide du slecteur de balises la page 343.
2 Appuyez sur Ctrl+T (Windows) ou Commande+T (Macintosh).
Quick Tag Editor s'ouvre en mode Modifier la balise.

3 Saisissez de nouveaux attributs, modifiez les attributs existants ou modifiez le nom de la balise. 4 Appuyez sur Tab pour passer d'un attribut l'autre et sur Maj+Tab pour revenir en arrire.
Remarque : Par dfaut, les modifications sont appliques au document lorsque vous appuyez sur Tab ou Maj+Tab.
5 Pour fermer Quick Tag Editor et appliquer toutes les modifications, appuyez sur Entre. 6 Pour quitter Quick Tag Editor sans apporter d'autres changements, appuyez sur Echap.
Insertion de balises HTML de part et d'autre d'une slection

1 Slectionnez du texte ou un objet non mis en forme en mode Cration.
Remarque : Si vous slectionnez une chane de texte ou un objet comportant une balise HTML d'ouverture ou de fermeture, Quick Tag Editor s'affiche en mode Modifier la balise et non en mode de balise enveloppante.
2 Appuyez sur Ctrl+T (Windows) ou Commande+T (Macintosh), ou cliquez sur le bouton Quick Tag Editor dans
l'inspecteur Proprits.
version prliminaire
Quick Tag Editor s'ouvre en mode Envelopper avec balise.

3 Saisissez une balise d'ouverture, par exemple strong, puis appuyez sur Entre (Windows) ou Retour (Macintosh).
La balise est insre au dbut de la slection en cours et une balise de fermeture correspondante est insre la fin.
4 Pour quitter Quick Tag Editor sans apporter de changements, appuyez sur Echap.
Utilisation des menus d'indication dans Quick Tag Editor

Dans Quick Tag Editor, vous pouvez accder un menu contextuel d'attributs rpertoriant tous les attributs valides de la balise que vous modifiez ou insrez. Vous pouvez galement dsactiver le menu contextuel ou modifier le dlai s'coulant avant l'apparition du menu droulant dans Quick Tag Editor. Pour afficher un menu contextuel rpertoriant les attributs de balise valides, arrtez-vous quelques secondes pendant la modification d'un nom d'attribut dans Quick Tag Editor. Un menu contextuel apparat, rpertoriant tous les attributs valides de la balise que vous modifiez. De mme, arrtez-vous quelques secondes pendant la saisie ou la modification d'un nom de balise dans Quick Tag Editor pour afficher le menu contextuel correspondant aux balises. Remarque : Les prfrences d'indication de code de Quick Tag Editor sont rgies par les prfrences gnrales d'indication de code. Pour plus d'informations, consultez la section Dfinition des prfrences de conseils de code la page 317.
Voir aussi
Prsentation de Quick Tag Editor la page 340
Utilisation d'un menu de conseils de code

Commencez la saisie d'une balise ou d'un attribut. Le menu Conseils de code affiche le premier lment
commenant par les lettres que vous venez de taper.
Appuyez sur les touches flches Haut et Bas de votre clavier pour slectionner un lment. Recherchez un lment l'aide de la barre de dfilement.
2 Pour insrer un lment, slectionnez-le, puis appuyez sur la touche Entre ou double-cliquez dessus. 3 Pour fermer le menu contextuel sans slectionner d'lment, appuyez sur la touche Echap ou poursuivez la saisie
de votre texte.
Dsactivation du menu contextuel ou modification du dlai s'coulant avant l'apparition du menu contextuel
1 Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh) puis choisissez Conseils
de code. La bote de dialogue Prfrences de conseil de code s'affiche.

2 Pour dsactiver le menu des conseils, dslectionnez l'option Activer les conseils de code. 3 Pour modifier le dlai avant l'apparition du menu, rglez le curseur Dlai, puis cliquez sur OK.
version prliminaire
Modification de code l'aide du slecteur de balises

Vous pouvez utiliser le slecteur de balises pour slectionner, modifier ou supprimer les balises sans quitter le mode Cration. Le slecteur de balises se trouve dans la barre d'tat en bas de la fentre de document, et prsente une srie de balises, comme suit :
Modification ou suppression d'une balise

1 Cliquez dans le document.
Les balises qui s'appliquent au niveau du point d'insertion s'affichent dans le slecteur de balises.
2 Cliquez l'aide du bouton droit (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) sur une
balise dans le slecteur de balises.

3 Pour modifier une balise, choisissez Modifier la balise dans le menu. Apportez les modifications requises dans
Quick Tag Editor. Pour plus d'informations, consultez la section Modification de code avec Quick Tag Editor la page 341.
4 Pour supprimer une balise, choisissez Supprimer la balise dans le menu.
Slection d'un objet correspondant une balise

1 Cliquez dans le document.
Les balises qui s'appliquent au niveau du point d'insertion s'affichent dans le slecteur de balises.
2 Cliquez sur une balise dans le slecteur de balises.
L'objet reprsent par la balise est slectionn sur la page. Utilisez cette technique pour slectionner des lignes de tableau (balises tr) ou des cellules (balises td).
Rdaction et modification de scripts en mode Cration

Vous pouvez travailler avec des scripts JavaScript et VBScript ct client en modes Cration et Code, en procdant des manires suivantes :
Vous pouvez crire un script JavaScript ou VBScript pour votre page sans quitter le mode Cration. Vous pouvez crer un lien dans votre document vers un fichier script externe sans quitter le mode Cration. Vous pouvez modifier un script sans quitter le mode Cration.
Avant toute chose, assurez-vous que l'affichage des marqueurs de script sur la page est activ en slectionnant Affichage > Assistances visuelles > Elments invisibles.
Rdaction d'un script ct client

1 Placez le point d'insertion l'endroit o vous voulez insrer le script. 2 Choisissez Insertion > HTML > Objets Script > Script. 3 Choisissez le langage de script dans le menu droulant Langage.
Si vous utilisez JavaScript sans tre certain de la version, choisissez JavaScript plutt que JavaScript1.1 ou JavaScript1.2.
4 Saisissez ou collez le code de script dans la zone Contenu.
version prliminaire
Vous n'avez pas besoin d'inclure les balises script de fermeture et d'ouverture.
5 Saisissez ou collez le code HTML dans la zone Aucun script. Les navigateurs ne prenant pas en charge le langage de
script slectionn affichent ce code au lieu d'excuter le script.

6 Cliquez sur OK.
Cration d'un lien vers un fichier script externe

1 Placez le point d'insertion l'endroit o vous voulez insrer le script. 2 Choisissez Insertion > HTML > Objets Script > Script. 3 Cliquez sur OK sans complter la zone de texte Contenu. 4 Slectionnez le marqueur de script dans le mode Cration de la fentre de document. 5 Dans l'inspecteur Proprits, cliquez sur l'icne de dossier pour rechercher et slectionner le fichier de script
externe ou tapez le nom de fichier dans la zone Source.
Modification d'un script

1 Slectionnez le marqueur de script. 2 Dans l'inspecteur Proprits, cliquez sur le bouton Edition.
Le script s'affiche dans la bote de dialogue Proprits du script. Si vous avez cr un lien vers un fichier de script externe, le fichier s'ouvre en mode Code ; vous pouvez alors apporter vos modifications. Remarque : Si les balises script renferment des lments de code, la bote de dialogue Proprits du script s'affiche, mme si vous avez cr un lien vers un fichier de script externe.
3 Dans la zone Langage, indiquez soit JavaScript soit VBScript comme langage de script. 4 Dans le menu droulant Type, indiquez le type de script, soit ct client, soit ct serveur. 5 (Facultatif) Dans la zone Source, indiquez un fichier de script externe li.
Cliquez sur l'icne de dossier
ou sur le bouton Parcourir pour rechercher le fichier, ou entrez le chemin d'accs.
6 Modifiez le script, puis cliquez sur OK.
Modification de scripts ASP ct serveur en mode Cration

L'inspecteur Proprits de script ASP permet d'examiner et de modifier les scripts ASP ct serveur en mode Cration.
1 En mode Cration, slectionnez l'icne visuelle de balise de langage de serveur. 2 Dans l'inspecteur Proprits de script ASP, cliquez sur le bouton Modifier 3 Modifiez le script ASP ct serveur, puis cliquez sur OK.
Modification de scripts sur la page l'aide de l'inspecteur Proprits

1 Dans le menu droulant Langage de l'inspecteur Proprits, slectionnez le langage de script souhait ou saisissez
directement son nom dans la zone de texte Langage. Remarque : Si vous utilisez JavaScript sans tre certain de la version, choisissez JavaScript plutt que JavaScript1.1 ou JavaScript1.2.
2 Dans le menu droulant Type, indiquez le type de script, soit ct client, soit ct serveur.
version prliminaire
3 (Facultatif) Dans la zone Source, indiquez un fichier de script externe li. Tapez le chemin d'accs ou cliquez sur
l'icne du dossier
pour slectionner le fichier.
4 Cliquez sur Modifier pour modifier le script.
Voir aussi
Rdaction et modification de scripts en mode Cration la page 343
Utilisation des comportements JavaScript

L'onglet Comportements de l'inspecteur de balises permet d'associer aisment des comportements JavaScript (ct client) aux lments d'une page. Pour plus d'informations, consultez la section Application de comportements Dreamweaver intgrs la page 360.
Utilisation de contenu d'en-tte pour les pages

Les pages contiennent des lments qui dcrivent les informations figurant sur la page ; ces lments sont utiliss par les moteurs de recherche. Vous pouvez dfinir les proprits des lments head pour contrler la faon dont vos pages sont identifies.
Affichage et modification de contenu d'en-tte

Vous pouvez afficher les lments de l'en-tte head d'un document via le menu Affichage, le mode Code de la fentre de document ou l'inspecteur de code.
Affichage des lments de la section d'en-tte d'un document

Slectionnez Affichage > Contenu de l'en-tte. Pour chaque lment de la section head, un marqueur s'affiche dans
le haut de la fentre de document en mode Cration. Remarque : Si la fentre de document affiche uniquement le mode Code, la commande Affichage > Contenu de l'en-tte est grise.
Insertion d'un lment dans la section d'en-tte d'un document

1 Slectionnez un lment du sous-menu Insertion > HTML > Balises d'en-tte. 2 Choisissez les options applicables l'lment dans la bote de dialogue qui s'affiche alors, ou dans l'inspecteur
Proprits.
Modification d'un lment de la section d'en-tte d'un document

1 Slectionnez Affichage > Contenu de l'en-tte. 2 Cliquez sur l'une des icnes de la section head pour la slectionner. 3 Dfinissez ou modifiez les proprits de l'lment dans l'inspecteur Proprits.
version prliminaire
Dfinition des proprits meta pour la page

Une balise meta est un lment de la section head qui enregistre des informations sur la page en cours, comme l'encodage des caractres, l'auteur, le copyright ou les mots-cls. Ces balises permettent galement de transmettre des informations au serveur, par exemple une date d'expiration de la page, son intervalle de ractualisation et sa classification PICS. Le format de classification PICS (Platform For Internet Content Selection) permet de dfinir un niveau d'interdiction d'accs pour des raisons morales (comme la classification des films) aux pages Web.
Ajout d'une balise meta

1 Choisissez Insertion > HTML > Balises d'en-tte > Meta. 2 Dfinissez les proprits dans la bote de dialogue qui s'affiche.
Modification d'une balise meta existante

1 Slectionnez Affichage > Contenu de l'en-tte. 2 Slectionnez le marqueur Meta qui apparat en haut de la fentre de document. 3 Dfinissez les proprits dans l'inspecteur Proprits.
Proprits d'une d'une balise meta

Dfinissez les proprits de la balise meta comme suit : Attribut Indique si la balise meta contient des informations descriptives sur la page (name) ou des informations d'entte HTTP (http-equiv). Valeur Indique le type d'informations que vous donnez dans cette balise. Certaines valeurs, telles que description,
keywords et refresh, sont dj bien dfinies (et disposent de leurs propres inspecteurs de proprits dans
Dreamweaver), mais vous pouvez indiquer pratiquement n'importe quelle valeur (par exemple creationdate,
documentID ou level).
Contenu Est linformation elle-mme. Si, par exemple, vous spcifiez level pour Valeur, vous pouvez spcifier
beginner, intermediate ou advanced pour Contenu.
Dfinition du titre de la page

Le titre ne possde qu'une proprit : le titre de la page. Le titre apparat dans la barre de titre de la fentre de document dans Dreamweaver, ainsi que dans la barre de titre de la plupart des navigateurs. Le titre apparat galement dans la barre d'outils de la fentre de document.
Dfinition du titre dans la fentre de document

Entrez le titre dans la zone Titre de la barre d'outils de la fentre de document.
Dfinition du titre dans le contenu de l'en-tte

1 Slectionnez Affichage > Contenu de l'en-tte. 2 Slectionnez le marqueur Title qui apparat en haut de la fentre de document. 3 Dfinissez le titre de la page dans l'inspecteur Proprits.
version prliminaire
Dfinition de mots-cls pour la page

De nombreux robots de moteurs de recherche (programmes parcourant automatiquement le Web pour collecter les informations ensuite indexes par les moteurs de recherche) lisent le contenu de la balise meta Keywords, et utilisent ces informations pour indexer les pages dans leur base de donnes. Comme certains moteurs de recherche limitent le nombre de mots-cls ou de caractres qu'ils indexent, ou ignorent tous les mots-cls si vous dpassez la limite, il est judicieux de n'en utiliser que quelques-uns qui soient bien cibls.
Ajout d'une balise meta Keywords

1 Choisissez Insertion > HTML > Balises d'en-tte > Keywords. 2 Dfinissez les mots-cls, spars par des virgules, dans la bote de dialogue qui s'affiche.
Modification d'une balise meta Keywords

1 Slectionnez Affichage > Contenu de l'en-tte. 2 Slectionnez le marqueur Keywords qui apparat en haut de la fentre de document. 3 Dans l'inspecteur Proprits, consultez, modifiez ou supprimez des mots-cls. Vous pouvez galement ajouter des
mots-cls en les sparant par des virgules.
Dfinition de descriptions pour la page

De nombreux robots de moteurs de recherche (programmes parcourant automatiquement le Web pour collecter les informations ensuite indexes par les moteurs de recherche) lisent le contenu de la balise meta Description. Certains utilisent ces informations pour indexer vos pages dans leurs bases de donnes, et certains affichent galement ces informations sur la page de rsultats de la recherche (au lieu d'afficher les premires lignes du document). Certains moteurs de recherche limitant le nombre de caractres qu'ils indexent, il est judicieux de limiter votre description quelques mots (par exemple, Spcialitsde grilladesde porcAlbany,Gorgie, ou conceptionde sitesWeb des prixraisonnablesdansle mondeentier).
Ajout d'une balise meta Description

1 Choisissez Insertion > HTML > Balises d'en-tte > Description. 2 Tapez le descriptif de votre site dans la bote de dialogue qui s'affiche.
Modification d'une balise meta Description

1 Slectionnez Affichage > Contenu de l'en-tte. 2 Slectionnez le marqueur Description qui apparat en haut de la fentre de document. 3 Dans l'inspecteur Proprits, consultez, modifiez ou supprimez le texte de la description.
Dfinition des proprits d'actualisation de la page

L'lment Refresh (Actualisation) permet d'indiquer au navigateur s'il doit actualiser automatiquement votre page (en rechargeant la page en cours ou en affichant une autre page) aprs un certain laps de temps. Cet lment est frquemment utilis pour rediriger les utilisateurs vers une autre URL, notamment aprs avoir affich un message indiquant que l'URL a chang.
Ajout d'une balise meta Refresh

1 Choisissez Insertion > HTML > Balises d'en-tte > Refresh.
version prliminaire
2 Dfinissez les proprits de la balise meta Refresh dans la bote de dialogue qui s'affiche.
Modification d'une balise meta Refresh

1 Slectionnez Affichage > Contenu de l'en-tte. 2 Slectionnez le marqueur Refresh qui apparat en haut de la fentre de document. 3 Dans l'inspecteur Proprits, dfinissez les proprits de la balise meta Refresh.
Dfinition des proprits d'une balise meta Refresh

Dfinissez les proprits de la balise meta Refresh comme suit : Dlai Dure, exprime en secondes, qui s'coule avant que la page ne soit actualise par le navigateur. Pour que le
navigateur actualise la page immdiatement aprs l'avoir charge, saisissez 0 dans cette zone.
URL ou Action Indique si le navigateur doit se diriger vers une autre URL ou actualiser la page en cours, aprs le dlai
spcifi. Pour ouvrir une autre URL (plutt que d'actualiser la page en cours), cliquez sur le bouton Parcourir, puis naviguez vers et slectionnez la page charger.
Dfinition des proprits d'URL de base de la page

Llment Base permet de dfinir l'URL de base laquelle tous les chemins relatifs du document font rfrence.
Ajout d'une balise meta Base

1 Choisissez Insertion > HTML > Balises d'en-tte > Base. 2 Dfinissez les proprits de la balise meta Base dans la bote de dialogue qui s'affiche.
Modification d'une balise meta Base

1 Slectionnez Affichage > Contenu de l'en-tte. 2 Slectionnez le marqueur Base qui apparat en haut de la fentre de document. 3 Dans l'inspecteur Proprits, dfinissez les proprits de la balise meta Base.
Dfinition des proprits d'une balise meta Base

Dfinissez les proprits de la balise meta Base comme suit : Href LURL de base. Cliquez sur le bouton Parcourir pour naviguer vers et slectionner un fichier, ou saisissez le
chemin du fichier dans la zone.

Cible Indique le cadre ou la fentre o tous les documents lis doivent s'ouvrir. Choisissez l'un des cadres du jeu de cadres actif, ou l'un des noms de fentre rservs ci-dessous :
_blank charge le document li dans une nouvelle fentre, sans nom, du navigateur. _parent charge le document li dans le jeu de cadres parent ou dans la fentre parente du cadre contenant le lien. Si le cadre contenant le lien n'est pas imbriqu, alors il est quivalent _top : le document li est charg dans la fentre de base du navigateur. _self charge le document li dans le mme cadre (ou la mme fentre) que le lien. Il s'agit de la cible par dfaut, il
est donc en gnral inutile de la spcifier.

version prliminaire
Dfinition des proprits de liaison de la page

La balise link permet de dfinir une relation entre le document actif et une autre page. Remarque : La balise link de la section head agit diffremment d'un lien HTML insr dans la section body et joignant des documents.
Ajout d'une balise meta Link

1 Choisissez Insertion > HTML > Balises d'en-tte > Link. 2 Dfinissez les proprits de la balise meta Link dans la bote de dialogue qui s'affiche.
Modification d'une balise meta Link

1 Slectionnez Affichage > Contenu de l'en-tte. 2 Slectionnez le marqueur Link qui apparat en haut de la fentre de document. 3 Dans l'inspecteur Proprits, dfinissez les proprits de la balise meta Link.
Dfinition des proprits d'une balise meta Link

Dfinissez les proprits de la balise meta Link comme suit : Href L'URL (adresse Internet) du fichier vers laquelle vous dfinissez une relation. Cliquez sur le bouton Parcourir
pour naviguer vers et slectionner un fichier, ou saisissez le chemin du fichier dans la zone. Notez que cet attribut n'indique pas un fichier vers lequel vous tablissez un lien, au sens o on l'entend gnralement en HTML ; les relations dfinies dans un lment Lien sont plus complexes.
ID Spcifie un identificateur unique pour le lien. Titre Dcrit cette relation. Cet attribut est particulirement utilis pour les feuilles de style lies. Pour plus
d'informations sur les feuilles de style externes, consultez les spcifications HTML 4.0 sur le site du World Wide Web Consortium, www.w3.org/TR/REC-html40/present/styles.html#style-external.
Rel Spcifie la relation entre le document actif et celui indiqu dans la zone Href. Les valeurs possibles sont les suivantes : Alternate, Stylesheet, Start, Next, Prev, Contents, Index, Glossary, Copyright, Chapter, Section, Subsection, Appendix, Help et Bookmark. Pour prciser plusieurs relations, sparez les valeurs par un espace. Rev Spcifie la relation inverse (l'oppos de Rel) entre le document actif et celui indiqu dans la zone Href. Les valeurs
possibles sont les mmes que pour Rel.
Utilisation des inclusions ct serveur

A propos des inclusions ct serveur
Dreamweaver permet d'insrer des inclusions ct serveur dans vos pages, de modifier ces inclusions ou d'afficher un aperu des pages contenant des inclusions. Une inclusion ct serveur correspond un fichier incorpor dans un document par un serveur lorsque ce document est sollicit par un navigateur.
version prliminaire
Lorsque le navigateur du visiteur sollicite le document contenant l'instruction d'inclusion, le serveur traite cette dernire en crant un nouveau document dans lequel le contenu du fichier inclus remplace l'instruction d'inclusion. Le serveur envoie ensuite ce nouveau document au navigateur du visiteur. Cependant, lorsque vous ouvrez un document local directement dans un navigateur, c'est--dire sans utiliser le serveur pour traiter les instructions d'inclusion dans ce document, le navigateur ouvre le document sans traiter ces instructions et le fichier cens tre inclus n'apparat pas dans le navigateur. Il peut donc s'avrer difficile, sans Dreamweaver, de consulter les fichiers locaux et de les voir tels qu'ils apparatront une fois que vous les aurez placs sur le serveur. Grce Dreamweaver, vous pouvez prvisualiser les documents tels qu'ils apparaissent sur le serveur, la fois dans le mode Cration et lorsque vous utilisez la fonctionnalit Aperu dans le navigateur. Toutefois, pour ce faire, vous devez veiller prvisualiser le fichier contenant l'inclusion en tant que fichier temporaire. Choisissez Edition > Prfrences, puis la catgorie Aperu dans le navigateur, et assurez-vous que l'option Aperu l'aide d'un fichier temporaire est bien active. Remarque : Si vous utilisez un serveur de test (comme Apache ou Microsoft IIS) pour prvisualiser vos fichiers sur votre lecteur local, il n'est pas ncessaire de prvisualiser le fichier en tant que fichier temporaire, car le serveur se charge du traitement pour vous. Placer une instruction ct serveur dans un document a pour effet d'insrer une rfrence un fichier externe, sans insrer le contenu du fichier spcifi dans le document actif. Le fichier spcifi ne doit contenir que ce que vous voulez inclure. En d'autres termes, le fichier d'inclusion ne doit pas contenir de balises head, body, html (c'est--dire la balise <html> ; les balises HTML de formatage telles que p ou div ne posent aucun problme). Si le fichier contient de telles balises, elles provoqueront un conflit avec celles qui se trouvent dans le document d'origine, et Dreamweaver ne pourra pas afficher correctement la page. Vous ne pouvez pas modifier le fichier inclus directement dans un document. Pour modifier le contenu d'une SSI, vous devez modifier directement le fichier que vous incluez. Toute modification apporte au fichier externe est automatiquement reflte dans chaque document dans lequel il est inclus. Il existe deux types d'inclusions partir du serveur : les inclusions Virtuel et Fichier. Dreamweaver insre par dfaut des inclusions de type Fichier. Vous pouvez toutefois employer l'inspecteur Proprits pour slectionner celle qui convient au type de serveur Web que vous utilisez :
Si votre serveur est un serveur Web Apache, slectionnez Virtuel. Dans Apache, Virtuel fonctionne dans tous les
cas, tandis que Fichier fonctionne seulement dans certains cas.
Si votre serveur est un serveur Microsoft IIS (Internet Information Server), slectionnez Fichier Virtuel ne
fonctionne avec IIS que dans des cas prcis. Remarque : Malheureusement, IIS ne permet pas d'inclure un fichier dans un dossier situ au-dessus du dossier en cours dans la hirarchie des fichiers, moins qu'un logiciel spcial n'ait t install sur le serveur. Pour pouvoir inclure un fichier d'un dossier plac plus haut dans la hirarchie des dossiers sur un serveur IIS, demandez votre administrateur systme si le logiciel ncessaire est install.
Pour les autres types de serveurs, ou si vous ne savez pas quel type de serveur vous utilisez, demandez votre
administrateur systme loption utiliser. Certains serveurs sont configurs de faon examiner tous les fichiers pour voir s'ils contiennent des inclusions ct serveur, et d'autres pour examiner uniquement les fichiers portant une extension particulire, telle que .shtml, .shtm ou .inc. Si une inclusion ct serveur ne fonctionne pas, demandez votre administrateur systme si le nom du fichier utilisant l'inclusion doit avoir une extension spciale. Par exemple, si le fichier porte le nom canoe.html, il vous faudra peut-tre remplacer ce nom par canoe.shtml. Si vous voulez que vos fichiers conservent leurs
version prliminaire
extensions .html ou .htm, demandez votre administrateur systme de configurer le serveur de faon ce qu'il examine tous les fichiers (et pas seulement les fichiers portant une certaine extension) pour les inclusions partir du serveur. L'analyse des inclusions partir du serveur demandant toutefois un peu plus de temps, les pages analyses par le serveur s'affichent un peu plus lentement que les autres pages. Pour cette raison, certains administrateurs systme ne donnent pas la possibilit d'analyser tous les fichiers.
Insertion d'inclusions ct serveur

Dreamweaver permet d'insrer des inclusions ct serveur dans vos pages.
Insertion d'une inclusion ct serveur

1 Slectionnez Insertion > Inclusion ct serveur. 2 Dans la bote de dialogue qui s'affiche, recherchez le fichier et slectionnez-le.
Par dfaut, un type de fichier inclure est insr.

3 Pour modifier le type inclure, slectionnez l'inclusion ct serveur dans la fentre Document et modifiez son type
dans l'inspecteur Proprits (Fentre > Proprits), comme suit :
Si votre serveur est un serveur Web Apache, slectionnez Virtuel. Dans Apache, Virtuel fonctionne dans tous les
cas, tandis que Fichier fonctionne seulement dans certains cas.
Si votre serveur est un serveur Microsoft IIS (Internet Information Server), slectionnez Fichier (Virtuel ne
fonctionne avec IIS que dans des cas prcis). Remarque : Malheureusement, IIS ne permet pas d'inclure un fichier dans un dossier situ au-dessus du dossier en cours dans la hirarchie des fichiers, moins qu'un logiciel spcial n'ait t install sur le serveur. Pour pouvoir inclure un fichier d'un dossier plac plus haut dans la hirarchie des dossiers sur un serveur IIS, demandez votre administrateur systme si le logiciel ncessaire est install.
Pour les autres types de serveurs, ou si vous ne savez pas quel type de serveur vous utilisez, demandez votre
administrateur systme loption utiliser.
Changement de fichier inclus

1 Slectionnez la SSI dans la fentre de document. 2 Ouvrez l'inspecteur Proprits (Fentre > Proprits). 3 Effectuez l'une des oprations suivantes :
Cliquez sur l'icne de dossier et localisez puis slectionnez le nouveau fichier inclure. Dans la zone de texte, tapez le chemin et le nom de fichier du nouveau fichier inclure.
Modification du contenu d'une inclusion ct serveur

Dreamweaver permet de modifier des inclusions ct serveur. Pour modifier le contenu associ au fichier inclus, vous devez ouvrir le fichier.
1 Slectionnez l'inclusion ct serveur soit en mode Cration, soit en mode Code, et cliquez sur Modifier dans
l'inspecteur Proprits. Le fichier inclus s'ouvre dans une nouvelle fentre de document.
2 Modifiez le fichier puis enregistrez-le.
version prliminaire
Les modifications sont immdiatement refltes dans le document actif et dans tous les autres documents ultrieurs qui incluent ce fichier.
3 Si ncessaire, tlchargez le fichier inclus vers le site distant.
Gestion des bibliothques de balises

A propos des bibliothques de balises de Dreamweaver
Une bibliothque de balises de Dreamweaver est une collection de balises d'un type donn accompagne d'informations sur le formatage des balises par Dreamweaver. Les bibliothques de balises fournissent des informations propos des balises utilises par Dreamweaver pour les conseils de code, les vrifications de navigateurs cibles, le slecteur de balises et autres options de codage. L'diteur de la bibliothque de balises vous permet d'ajouter et de supprimer des bibliothques de balises, des balises, des attributs et des valeurs d'attribut, de dfinir les proprits d'une bibliothque de balises, y compris le format (pour faciliter l'identification dans le code), ainsi que de modifier les balises et les attributs.
Voir aussi
Importation de balises personnalises dans Dreamweaver la page 355 Dfinition des prfrences de codage la page 309
Ouverture et fermeture de l'diteur de la bibliothque de balises

1 Choisissez Edition > Bibliothques de balises pour ouvrir l'diteur de la bibliothque de balises.
La bote de dialogue Editeur de la bibliothque de balises s'affiche. Le contenu de cette bote de dialogue varie selon la balise slectionne.
2 Fermez l'diteur de la bibliothque de balises en procdant d'une des faons suivantes :
Pour enregistrer les modifications, cliquez sur OK. Pour fermer l'diteur sans enregistrer les modifications, cliquez sur Annuler.
Remarque : Lorsque vous cliquez sur Annuler, toutes les modifications apportes la bibliothque de balises sont effaces. Si vos modifications incluaient la suppression d'une balise ou d'une bibliothque, celle-ci est restaure.
Ajout de bibliothques, de balises et d'attributs

L'diteur de la bibliothque de balises permet d'ajouter des bibliothques de balises ou des balises et des attributs aux bibliothques de balises dans Dreamweaver.
Voir aussi
Dfinition des prfrences de codage la page 309 Importation de balises personnalises dans Dreamweaver la page 355
Ajout d'une bibliothque de balises

1 Dans la bote de dialogue Editeur de la bibliothque de balises (Edition > Bibliothques de balises), cliquez sur le
bouton Plus (+) et choisissez Nouvelle bibliothque de balises.
version prliminaire
2 Dans la zone de texte Nom de la bibliothque, entrez un nom (par exemple, balises diverses), puis cliquez sur OK.
Ajout de balises une bibliothque de balises

bouton Plus (+) et choisissez Nouvelles balises.

2 Dans le menu droulant Bibliothque de balises, choisissez une bibliothque de balises. 3 Saisissez le nom de la nouvelle balise. Pour ajouter plusieurs balises, sparez leurs noms par une virgule suivie d'un
espace (par exemple : cfgraph, cfgraphdata).

4 Si les nouvelles balises ont des balises de fin correspondantes (</...>), slectionnez Avoir des balises de fin
correspondantes.
5 Cliquez sur OK.
Ajout d'attributs une balise

bouton Plus (+) et choisissez Nouveaux attributs.

2 Dans le menu droulant Bibliothque de balises, choisissez une bibliothque de balises. 3 Slectionnez une balise dans le menu contextuel Balise. 4 Saisissez le nom du nouvel attribut. Pour ajouter plusieurs attributs, sparez leurs noms par une virgule suivie d'un
espace (par exemple : width, height).

5 Cliquez sur OK.
Modification de bibliothques, de balises et d'attributs

L'diteur de la bibliothque de balises vous permet de dfinir les proprits d'une bibliothque de balises ou modifier les balises et les attributs d'une bibliothque.
Voir aussi
Dfinition des prfrences de codage la page 309
Dfinition des proprits d'une bibliothque de balises

1 Dans la bote de dialogue Editeur de la bibliothque de balises (Edition > Bibliothques de balises), slectionnez une
bibliothque de balises (et non une balise) dans la liste des balises. Remarque : Les proprits des bibliothques de balises s'affichent uniquement quand une bibliothque de balises est slectionne. Les bibliothques de balises sont reprsentes par les dossiers de niveau suprieur dans la liste des balises. Par exemple, le dossier des balises HTML reprsente une bibliothque de balises, et dans ce dossier, le sous-dossier abbr reprsente une balise.
2 Dans la liste Utilis dans, slectionnez tous les types de document qui seront utiliss par la bibliothque de balises.
Les types de documents slectionns ici sont ceux qui fourniront les conseils de code pour la bibliothque de balises spcifie. Par exemple, si l'option HTML n'est pas slectionne pour une bibliothque de balises, les conseils de code de cette balise ne s'affichent pas dans les fichiers HTML.
3 (Facultatif) Entrez le prfixe des balises dans la zone de texte Prfixe de balise.
Remarque : Un prfixe est utilis pour identifier l'appartenance d'une balise dans le code une bibliothque de balises dfinie. Certaines bibliothques n'utilisent pas de prfixes.
version prliminaire
4 Cliquez sur OK.
Modification d'une balise dans une bibliothque

1 Dans la bote de dialogue Editeur de la bibliothque de balises (Edition > Bibliothques de balises), dveloppez une
bibliothque de balises dans la liste Balises et slectionnez une balise.

2 Dfinissez les options de format de balise suivantes :
Sauts de ligne Dtermine l'endroit o Dreamweaver insre les sauts de ligne pour une balise. Contenu Dtermine comment Dreamweaver insre le contenu d'une balise, savoir si le saut de ligne et les rgles de
formatage s'appliquent au contenu.

Casse Indique la casse d'une balise spcifique. Choisissez Par dfaut, Minuscules, Majuscules ou
Minuscules/majuscules. Si vous choisissez cette dernire option, la bote de dialogue Nom de balise en minuscules/majuscules s'affiche. Saisissez la balise en utilisant que Dreamweaver doit utiliser lors de l'insertion de cette dernire (par exemple, getProperty), puis cliquez sur OK.
Par dfaut Dfinit la casse par dfaut de toutes les balises. Dans la bote de dialogue Casse de balise par dfaut qui s'affiche, choisissez <MAJUSCULES> ou <minuscules>, puis cliquez sur OK.
Il est prfrable de dfinir les minuscules comme casse par dfaut, conformment aux normes XML et XHTML.
Modification de l'attribut d'une balise

1 Dans la bote de dialogue Editeur de la bibliothque de balises (Edition > Bibliothques de balises), ouvrez une
bibliothque de balises dans la zone Balises, dveloppez une balise et slectionnez un attribut.
2 Dans le menu droulant Casse d'attribut, choisissez Par dfaut, Minuscules, Majuscules ou Minuscules/majuscules.
Si vous choisissez cette dernire option, la bote de dialogue Nom d'attribut en minuscules/majuscules s'affiche. Saisissez l'attribut en utilisant la casse dont doit se servir Dreamweaver lors de l'insertion de cet attribut (par exemple, onClick), puis cliquez sur OK. Cliquez sur le lien Dfaut pour dfinir la casse par dfaut pour tous les noms d'attributs.
3 Dans le menu droulant Type d'attribut, slectionnez le type de l'attribut.
Si vous choisissez Enumr, entrez toutes les valeurs d'attribut autorises dans la zone de texte Valeurs. Sparer les valeurs par des virgules, sans insrer d'espaces. Par exemple, les valeurs numres de l'attribut showborder de la balise cfchart sont dfinies comme yes,no.
Suppression de bibliothques, de balises et d'attributs

1 Dans la bote de dialogue Editeur de la bibliothque de balises (Edition > Bibliothques de balises), slectionnez une
bibliothque de balises, une balise ou un attribut dans la bote de dialogue Balises.

2 Cliquez sur le bouton Moins (-). 3 Cliquez sur OK pour confirmer la suppression dfinitive.
L'lment disparat de la bote de dialogue Balises.

4 Cliquez sur OK pour fermer l'diteur de la bibliothque de balises et terminer la procdure de suppression.
Voir aussi
Dfinition des prfrences de codage la page 309
version prliminaire
Importation de balises personnalises dans Dreamweaver

A propos de l'importation de balises personnalises dans Dreamweaver
Une fois importes dans Dreamweaver, les balises personnalises font partie intgrante de l'environnement de cration de pages Web. Par exemple, lorsque vous commencez taper une balise personnalise importe en mode Code, un menu de conseils de code s'affiche avec tous les attributs de balise et vous permet d'en slectionner un.
Importation de balises partir de fichiers XML

Vous pouvez importer des balises partir d'un fichier DTD XML (Document Type Definition) ou d'un schma.
1 Ouvrez l'diteur de la bibliothque de balises (Edition > Bibliothques de balises). 2 Cliquez sur le bouton Plus (+), puis choisissez Schma DTD > Importer le fichier DTD ou Schma XML. 3 Entrez le nom ou l'URL du fichier DTD ou schma. 4 Entrez le prfixe utiliser avec les balises.
Remarque : Un prfixe est utilis pour identifier l'appartenance d'une balise dans le code une bibliothque de balises dfinie. Certaines bibliothques n'utilisent pas de prfixes.
5 Cliquez sur OK.
Importation de balises ASP.NET personnalises

Vous pouvez importer des balises ASP.NET personnalises dans Dreamweaver. Vrifiez tout dabord que la balise personnalise est installe sur le serveur d'valuation dfini dans la bote de dialogue Dfinition du site (voir Configuration d'un serveur d'valuation la page 48). Les balises compiles (fichiers DLL) doivent tre places dans le dossier /bin de la racine du site. Les balises non compiles (fichiers ASCX) peuvent rsider dans un rpertoire ou un sous-rpertoire virtuel sur le serveur. Pour plus d'informations, consultez la documentation Microsoft ASP.NET.
1 Ouvrez une page ASP.NET dans Dreamweaver. 2 Ouvrez l'diteur de la bibliothque de balises (Edition > Bibliothques de balises). 3 Cliquez sur le bouton Plus (+), dfinissez les options suivantes, puis cliquez sur OK :
Pour importer toutes les balises ASP.NET personnalises partir du serveur d'application, choisissez ASP.NET >
Importer toutes les balises personnalises ASP.NET.
Pour n'importer que certaines balises personnalises partir du serveur d'application, choisissez ASP.NET >
Importer les balises personnalises ASP.NET slectionnes. Tout en maintenant la touche Ctrl (Windows) ou Commande (Macintosh) enfonce, cliquez sur les balises dans la liste.
Importation de balises JSP partir d'un serveur (web.xml)

Vous pouvez importer une bibliothque de balises JSP dans Dreamweaver partir de divers types de fichiers ou d'un serveur JSP.
1 Ouvrez une page JSP dans Dreamweaver. 2 Ouvrez l'diteur de la bibliothque de balises (Edition > Bibliothques de balises).
version prliminaire
3 Cliquez sur le bouton Plus (+), puis choisissez JSP > Importer depuis le fichier (*.tld, *.jar, *.zip) ou JSP > Importer
depuis le serveur (web.xml).

4 Cliquez sur le bouton Parcourir ou entrez un nom de fichier pour spcifier le fichier contenant la bibliothque de
balises.
5 Entrez un URI pour identifier la bibliothque de balises.
L'URI (Uniform Resource Identifier) dsigne souvent l'URL de la socit charge de la maintenance de la bibliothque de balises. L'URL n'est pas utilise pour afficher le site Web de la socit, mais uniquement titre d'identification de la bibliothque de balises.
6 (Facultatif) Entrez le prfixe utiliser avec les balises. Certaines bibliothques de balises emploient un prfixe pour
identifier l'appartenance d'une balise dans le code une bibliothque de balises dfinie.
7 Cliquez sur OK.
Importation de balises JRun

Si vous travaillez avec Adobe JRun, vous pouvez importer vos balises JRun dans Dreamweaver.
1 Ouvrez une page JSP dans Dreamweaver. 2 Ouvrez l'diteur de la bibliothque de balises (Edition > Bibliothques de balises). 3 Cliquez sur le bouton Plus (+), puis choisissez JSP > Importer les balises de serveur JRUN depuis le dossier. 4 Spcifiez le nom du dossier contenant les balises de serveur JRUN. 5 Entrez un URI pour identifier la bibliothque de balises.
L'URI (Uniform Resource Identifier) dsigne souvent l'URL de la socit charge de la maintenance de la bibliothque de balises. L'URL n'est pas utilise pour afficher le site Web de la socit, mais uniquement titre d'identification de la bibliothque de balises.
6 (Facultatif) Entrez le prfixe utiliser avec les balises. Certaines bibliothques de balises emploient un prfixe pour
identifier l'appartenance d'une balise dans le code une bibliothque de balises dfinie.
7 Cliquez sur OK.
version prliminaire
357
Chapitre 12 : Ajout de comportements JavaScript

Vous pouvez utiliser les comportements intgrs pour amliorer l'aspect, la fonctionnalit et l'attrait de votre site Web. Vous pouvez associer ces comportements des lments de vos pages Web sans avoir connatre JavaScript.
Utilisation des comportements JavaScript

A propos des comportements JavaScript
Les comportements Adobe Dreamweaver CS5 placent du code JavaScript dans des documents de faon ce que les visiteurs puissent modifier une page Web de diffrentes faons ou lancer certaines tches. Un comportement est la combinaison d'un vnement et d'une action dclenche par cet vnement. Dans le panneau Comportements, vous pouvez ajouter un comportement une page en spcifiant une action, puis l'vnement qui dclenche cette action. Remarque : Le code de comportement est un code JavaScript ct client, c'est--dire qu'il s'excute sur des navigateurs, mais pas sur des serveurs. Les vnements sont en ralit des messages gnrs par les navigateurs, indiquant qu'un utilisateur a fait quelque chose sur votre page. Par exemple, lorsqu'un visiteur dplace le pointeur sur un lien, le navigateur gnre un vnement onMouseOver pour ce lien ; le navigateur vrifie ensuite s'il doit appeler du code JavaScript (spcifi dans la page affiche) en guise de rponse. Ces vnements sont dfinis pour diffrents lments de la page ; par exemple, dans la plupart des navigateurs, onMouseOver et onClick sont des vnements associs des liens, tandis que onLoad est un vnement associ des images et la section body du document. Une action correspond un code JavaScript pr-rdig qui effectue une tche spcifique, comme ouvrir une fentre de navigateur, afficher ou masquer un calque, diffuser un son ou arrter une animation Adobe Shockwave. Les actions proposes dans Dreamweaver prsentent une compatibilit inter-navigateurs maximale. Une fois qu'un comportement est associ un lment de page, le comportement appelle l'action (code JavaScript) associe un vnement chaque fois que cet vnement se produit pour cet lment. Les vnements disponibles pour dclencher une action donne varient d'un navigateur l'autre. Par exemple, si vous associez l'action Message contextuel un lien et spcifiez que l'action sera dclenche par l'vnement onMouseOver, votre message s'affiche dans une bote de dialogue lorsqu'un utilisateur pointe la souris sur ce lien dans le navigateur. Un vnement unique peut dclencher plusieurs actions diffrentes et vous pouvez dfinir l'ordre d'excution de ces actions. Dreamweaver propose plus d'une vingtaine d'actions ; des actions supplmentaires sont disponibles sur le site Web d'Exchange l'adresse www.adobe.com/go/dreamweaver_exchange_fr, ainsi que sur les sites d'autres dveloppeurs Vous pouvez crire vos propres actions si vous matrisez le langage JavaScript. Remarque : Les termes comportement et action appartiennent la terminologie Dreamweaver et non la terminologie HTML. Du point de vue du navigateur, une action est un lment de code JavaScript comme un autre.
version prliminaire
Ajout de comportements JavaScript
Prsentation du panneau Comportements

Utilisez le panneau Comportements (Fentre > Comportements) pour associer des comportements des lments de la page (plus prcisment aux balises) et pour modifier les paramtres des comportements prcdemment associs. Les comportements dj associs l'lment de la page actuellement slectionne sont rpertoris dans la liste de comportements (la zone principale du panneau), tablie par vnement et par ordre alphabtique. Si plusieurs actions sont rpertories pour le mme vnement, elles sont excutes dans l'ordre dans lequel elles apparaissent dans la liste. Si aucun comportement n'apparat dans la liste, cela signifie qu'aucun comportement n'est associ l'lment slectionn. Le panneau Comportements comprend les options suivantes :
Afficher les vnements dfinis Affiche uniquement les vnements associs au document actif. Les vnements sont organiss en catgorie client et serveur. Les vnements de chaque catgorie se trouvent dans une liste que vous pouvez rduire. Afficher les vnements dfinis constitue la vue par dfaut. Afficher tous les vnements Affiche une liste alphabtique de tous les vnements d'une catgorie donne. Ajouter un comportement (+) Affiche un menu d'actions pouvant tre associes l'lment actuellement slectionn. Lorsque vous slectionnez une action dans la liste, une bote de dialogue s'affiche, dans laquelle vous pouvez dfinir les paramtres pour cette action. Si toutes les actions s'affichent en gris, cela signifie qu'aucun vnement ne peut tre gnr par l'lment slectionn. Supprimer un vnement () Supprime l'action et l'vnement slectionns de la liste de comportements. Boutons flchs Haut et Bas Dplacent l'action slectionne vers le haut ou vers le bas dans la liste des comportements pour un vnement particulier. Vous ne pouvez modifier l'ordre des actions que pour un vnement particulier ; par exemple, vous pouvez modifier l'ordre d'excution de plusieurs actions pour l'vnement onLoad, mais toutes les actions onLoad restent groupes dans la liste de comportements. Les boutons flchs sont dsactivs pour les actions ne pouvant tre dplaces dans la liste, vers le haut ou vers le bas. Evnements Affiche un menu droulant, visible uniquement lorsqu'un vnement est slectionn, de tous les
vnements qui peuvent dclencher l'action (ce menu s'affiche lorsque vous cliquez sur la touche flche situe en face du nom de l'vnement slectionn). Diffrents vnements s'affichent, selon l'objet slectionn. Si les vnements attendus n'apparaissent pas, assurez-vous d'avoir slectionn le bon lment de page ou la bonne balise. (Pour slectionner une balise spcifique, utilisez le slecteur de balises situ dans le coin infrieur gauche de la fentre de document.) Remarque : Les noms d'vnement entre parenthses sont disponibles uniquement pour les liens. En choisissant l'un de ces noms d'vnement, vous ajoutez automatiquement un lien nul l'lment sur la page slectionne et vous associez le comportement ce lien et non l'lment lui-mme. Le lien nul est dfini sous la forme href="javascript:;" dans le code HTML.
A propos des vnements

Chaque navigateur gnre une srie d'vnements que vous pouvez associer aux actions rpertories dans le menu Actions (+) du panneau Comportements. Lorsqu'un visiteur de votre page Web dclenche une action interactive avec celle-ci, en cliquant sur une image par exemple, le navigateur gnre un vnement. Cet vnement permet d'appeler une fonction JavaScript excutant une action quelconque. Dreamweaver fournit de nombreuses actions courantes que vous pouvez dclencher l'aide de ces vnements. Pour obtenir les noms et les descriptions des vnements fournis par chacun des navigateurs, consultez le centre de support de Dreamweaver l'adresse www.adobe.com/go/dreamweaver_support_fr.
version prliminaire
Diffrents vnements s'affichent dans le menu Evnements, en fonction de l'objet slectionn. Pour savoir quels sont les vnements pris en charge par un navigateur spcifique pour un lment de page donn, insrez l'lment de la page dans votre document et associez-lui un comportement, puis consultez le menu Evnements dans le panneau Comportements. (Par dfaut, les vnements proviennent de la liste d'vnements HTML 4.01 et ils sont pris en charge par la plupart des navigateurs modernes.) Certains vnements peuvent apparatre en gris (dsactivs) si les objets pertinents n'existent pas encore dans la page ou si l'objet slectionn ne peut pas recevoir d'vnements. Si les objets attendus ne sont pas affichs, assurez-vous que vous avez bien slectionn l'objet correct. Si vous associez un comportement une image, certains vnements (par exemple onMouseOver) apparaissent entre parenthses. Ces vnements ne sont disponibles que pour des liens. Lorsque vous en slectionnez un, Dreamweaver entoure l'image d'une balise a pour dfinir un lien nul, Le lien nul est reprsent par javascript:; dans la zone de texte Lien de l'inspecteur Proprits. Vous pouvez modifier la valeur de ce lien pour le transformer en vritable lien vers une autre page, mais si vous effacez le lien JavaScript sans le remplacer par un autre lien, vous supprimerez le comportement. Pour voir quelles balises peuvent tre utilises avec un vnement donn dans un navigateur donn, recherchez l'vnement dans l'un des fichiers de votre dossier Dreamweaver/Configuration/Behaviors/Events.
Application d'un comportement

Vous pouvez associer des comportements au document entier ( la balise <body>) ou des liens, des images, des lments de formulaire et divers autres lments HTML. Le navigateur cible que vous choisissez dtermine les vnements pris en charge pour un lment donn. Vous pouvez attribuer plusieurs actions chaque vnement. Les actions sont excutes dans l'ordre dans lequel elles sont rpertories dans la colonne Actions du panneau Comportements, mais vous pouvez modifier cet ordre.
1 Slectionnez un lment dans la page, tel qu'une image ou un lien.
Pour associer un comportement l'ensemble de la page, cliquez sur la balise <body> dans le slecteur de balises, situ dans le coin infrieur gauche de la fentre de document.
2 Choisissez Fentre > Comportements. 3 Cliquez sur le bouton plus (+) et choisissez une action dans le menu Ajouter un comportement.
Vous ne pouvez pas choisir les actions qui apparaissent en gris dans le menu. Ces actions peuvent tre grises si un objet ncessaire n'existe pas dans le document actif Par exemple, l'action Contrler Shockwave ou SWF s'affiche en gris si le document ne contient pas de fichiers SWF Flash ou Shockwave. Lorsque vous choisissez une action, une bote de dialogue s'affiche avec les paramtres et les instructions pour cette action.
4 Saisissez les paramtres pour l'action et cliquez sur OK.
Toutes les actions proposes dans Dreamweaver fonctionnent dans les navigateurs modernes. Certaines actions ne fonctionnent pas dans les navigateurs plus anciens, mais elles n'entraneront pas d'erreurs. Remarque : Les lments cibles doivent possder un ID unique. Par exemple, si vous souhaitez appliquer le comportement Permuter une image une image, cette image doit avoir un ID. Si vous n'avez pas spcifi d'ID pour l'lment, Dreamweaver le fait automatiquement votre place.
5 L'vnement par dfaut qui dclenchera l'action apparat dans la colonne Evnements. S'il ne s'agit pas de
l'vnement que vous dsirez utiliser, slectionnez-en un autre dans le menu contextuel Evnements. (Pour ouvrir le menu Evnements, slectionnez un vnement ou une action dans le panneau Comportements, puis cliquez sur la flche noire pointe vers le bas qui apparat entre le nom de l'vnement et le nom de l'action.)
version prliminaire
Modification ou suppression d'un comportement

Une fois le comportement associ, vous pouvez modifier l'vnement qui dclenche l'action, ajouter ou supprimer des actions et modifier les paramtres des actions.
1 Slectionnez un objet auquel un comportement a t associ. 2 Choisissez Fentre > Comportements. 3 Effectuez les modifications voulues :
Pour modifier les paramtres d'une action, double-cliquez sur son nom ou slectionnez-le et appuyez sur la touche
Entre (Windows) ou Retour (Macintosh), modifiez les paramtres dans la bote de dialogue, puis cliquez sur OK.
Pour modifier l'ordre d'apparition des actions pour un vnement donn, slectionnez une action et cliquez sur la
flche Haut ou Bas. Vous pouvez galement slectionner l'action, puis la copier et la coller l'emplacement de votre choix parmi les autres actions.
Pour supprimer un comportement, slectionnez-le et cliquez sur le signe moins (-) ou appuyez sur Supprimer.
Mise jour d'un comportement

1 Slectionnez l'lment auquel est attach le comportement. 2 Choisissez Fentre > Comportements et double-cliquez sur le comportement. 3 Effectuez vos modifications, puis cliquez sur OK dans la bote de dialogue du comportement.
Toutes les occurrences de ce comportement sont actualises. Si d'autres pages de votre site contiennent ce comportement, vous devez les mettre jour page par page.
Tlchargement et installation de comportements crs par des dveloppeurs indpendants

De nombreuses extensions sont disponibles sur le site Web d'Exchange pour Dreamweaver (www.adobe.com/go/dreamweaver_exchange_fr).
1 Slectionnez Fentre > Comportements et choisissez l'option Tlcharger d'autres comportements dans le menu
Ajouter un comportement. Votre navigateur principal s'ouvre sur le site d'Exchange

2 Localisez les progiciels. 3 Tlchargez et installez le progiciel d'extension souhait.
Pour plus d'informations, consultez la section Ajout et gestion d'extensions dans Dreamweaver la page 37.
Application de comportements Dreamweaver intgrs

Utilisation des comportements intgrs
Les comportements inclus dans Dreamweaver ont t conus pour fonctionner dans les navigateurs modernes. Les comportements chouent dans les navigateurs plus anciens, sans que l'utilisateur en soit inform. Remarque : Les actions Dreamweaver ont t rdiges avec soin afin de fonctionner avec le plus grand nombre possible de navigateurs. Si vous supprimez manuellement le code d'une action Dreamweaver ou si vous le remplacez par votre propre code, vous risquez de perdre la compatibilit inter-navigateurs.
version prliminaire
Bien que les actions Dreamweaver aient t rdiges pour augmenter la compatibilit inter-navigateurs, certains navigateurs ne prennent pas du tout en charge JavaScript et de nombreuses personnes dsactivent JavaScript sur leur navigateur lorsqu'ils explorent la Toile. Pour optimiser les rsultats inter-plates-formes, fournissez d'autres interfaces contenues dans des balises <noscript> afin que votre site reste accessible aux personnes qui n'utilisent pas JavaScript.
Application du comportement Appel JavaScript

Le comportement Appel JavaScript excute une fonction ou une ligne de code JavaScript personnalise lorsqu'un vnement se produit (vous pouvez rdiger le script vous-mme, ou utiliser le code fourni gratuitement dans le cadre de plusieurs bibliothques de JavaScript sur Internet).
1 Slectionnez un objet et choisissez Appel JavaScript dans le menu Ajouter un comportement du panneau
Comportements.
2 Tapez le code JavaScript excuter ou le nom de la fonction.
Par exemple, pour crer un bouton Retour, vous pouvez saisir if (history.length > 0)\{history.back()\}. Si vous avez encapsul votre code dans une fonction, indiquez simplement le nom de la fonction (par exemple, hGoBack()).
3 Cliquez sur OK et vrifiez que l'vnement par dfaut est correct.
Application du comportement Changer la proprit

Utilisez le comportement Changer la proprit pour modifier la valeur d'une des proprits d'un objet (par exemple, la couleur d'arrire-plan d'une balise div ou l'action d'un formulaire). Remarque : N'utilisez ce comportement que si vous tes expert en HTML et en JavaScript.
1 Slectionnez un objet et choisissez Changer la proprit dans le menu Ajouter un comportement du panneau
Comportements.
2 Dans le menu Type d'lment, slectionnez un type d'lment pour afficher tous les lments nomms de ce type. 3 Slectionnez un lment dans le menu ID d'lment. 4 Choisissez une proprit dans le menu Proprit ou tapez le nom de la proprit dans la zone de texte. 5 Entrez la nouvelle valeur pour la nouvelle proprit dans la zone Nouvelle valeur. 6 Cliquez sur OK et vrifiez que l'vnement par dfaut est correct.
Application du comportement Vrifier le navigateur

Ce comportement a t abandonn depuis Dreamweaver CS5.
Application du comportement Vrifier le plug-in

Utilisez le comportement Vrifier le plug-in pour envoyer les visiteurs sur des pages diffrentes selon que le plug-in spcifi est install ou non. Par exemple, vous pouvez rerouter les visiteurs sur une page s'ils possdent Shockwave, et sur une autre dans le cas contraire.
version prliminaire
Remarque : Il est impossible de dtecter des plug-ins spcifiques dans Microsoft Internet Explorer (IE) l'aide de JavaScript. Toutefois, si vous slectionnez les plug-ins Flash ou Director, le code VBScript appropri sera automatiquement ajout votre page pour les dtecter dans Internet Explorer sous Windows. Il est impossible de dtecter les plug-ins dans Internet Explorer sur Mac OS.
1 Slectionnez un objet et choisissez Vrifier le plug-in dans le menu Ajouter un comportement du panneau
Comportements.
2 Slectionnez un plug-in dans le menu Plug-in, ou cliquez sur Entre et tapez le nom exact du plug-in dans la zone
de texte adjacente. Vous devez utiliser le nom exact du plug-in, tel qu'il apparat en gras sur la page A propos des plug-ins dans Netscape Navigator (Dans Windows, choisissez la commande Aide > A propos des plug-ins dans le navigateur. Dans Mac OS, choisissez A propos des plug-ins dans le menu Pomme).
3 Dans la zone de texte Si trouv, aller l'URL, spcifiez l'URL destine aux utilisateurs qui disposent du plug-in.
Si vous indiquez une URL distante, vous devez faire prcder l'adresse www du prfixe http://. Si vous ne renseignez pas la zone, les visiteurs resteront dans la mme page.
4 Dans la zone de texte Sinon, aller l'URL, indiquez une autre URL pour les visiteurs qui ne disposent pas du plug-
in. Si vous ne renseignez pas la zone, les visiteurs resteront dans la mme page.
5 Spcifiez la procdure suivre si la dtection de plug-in n'est pas possible. Par dfaut, lorsque la dtection est
impossible, l'utilisateur est envoy l'URL indique dans la zone de texte Sinon. Pour que l'utilisateur soit envoy vers la premire URL (Si trouv), slectionnez l'option Toujours aller la premire URL si la dtection n'est pas possible. Lorsqu'elle est slectionne, cette option signifie que l'utilisateur possde a priori le plug-in, sauf si le navigateur indique explicitement que ce n'est pas le cas . En gnral, activez cette option si le contenu du plug-in est un lment essentiel de votre page ; dans le cas contraire, laissez-la dsactive. Remarque : Cette option ne concerne qu'Internet Explorer ; Netscape Navigator dtecte toujours les plug-ins.
Application du comportement Contrler Shockwave ou SWF

Application du comportement Tirer l'lment PA

Le comportement Tirer l'lment PA permet au visiteur de faire glisser un lment positionnement absolu. Utilisez ce comportement pour crer des puzzles, des contrles de dplacement et autres lments mobiles de l'interface. Vous pouvez spcifier la direction vers laquelle l'utilisateur peut faire glisser l'lment PA (horizontalement, verticalement ou dans toutes les directions), une cible vers laquelle l'utilisateur doit faire glisser l'lment PA, si ce dernier doit tre aimant par la cible ou non lorsqu'il arrive moins d'un certain nombre de pixels de la cible, l'action dclencher lorsque l'lment PA touche la cible, etc. Etant donn que le comportement Tirer l'lment PA doit tre appel avant que le visiteur puisse faire glisser l'lment PA, vous devez l'associer l'objet body (avec l'vnementonLoad).
1 Choisissez Insertion > Objets mise en forme > Div PA ou cliquez sur le bouton Tracer un div pour un lment PA
du panneau Insertion, puis dessinez un div PA dans la vue Cration de la fentre de document.
2 Cliquez sur <body> dans le slecteur de balises situ dans le coin infrieur gauche de la fentre de document. 3 Choisissez Tirer l'lment PA dans le menu Ajouter un comportement du panneau Comportements.
Si l'option Tirer l'lment PA n'est pas disponible, cela signifie probablement qu'un lment PA est slectionn.
version prliminaire
4 Dans le menu droulant Elment PA, slectionnez l'lment PA. 5 Slectionnez soit Contraint, soit Libre dans le menu contextuel Mouvement.
Les mouvements sans contrainte sont adapts aux puzzles et aux autres jeux base de glisser-dplacer. Pour les contrles de dplacement et les objets mobiles (tiroirs, rideaux et stores), choisissez un mouvement contraint.
6 Pour la restriction de mouvement, indiquez les valeurs de dplacement admises (en pixels) dans les zones de texte
Haut, Bas, Gauche et Droite. Ces valeurs sont relatives la position de dpart de l'lment PA. Pour restreindre les dplacements l'intrieur d'une zone rectangulaire, indiquez des valeurs positives dans les quatre zones de texte. Pour permettre uniquement un mouvement vertical, indiquez des valeurs positives pour Haut et Bas et 0 pour Gauche et Droite. Pour permettre uniquement un mouvement horizontal, indiquez des valeurs positives pour Gauche et Droite et 0 pour Haut et Bas.
7 Indiquez les coordonnes (exprimes en pixels) de la cible de dpt dans les zones de texte Gauche et Haut.
La cible de dpt est le point sur lequel vous voulez que l'utilisateur dpose l'lment PA. Un lment PA est considr comme ayant atteint la cible de dpt lorsque ses coordonnes d'origine (en haut gauche) correspondent aux valeurs indiques dans les zones de texte Gauche et Haut. Ces coordonnes sont relatives l'angle suprieur gauche de la fentre du navigateur. Cliquez sur Obtenir la position courante pour remplir automatiquement les zones de texte avec les coordonnes actuelles de l'lment PA.
8 Entrez une valeur (exprime en pixels) dans la zone de texte Aligner si dans pour dterminer la distance minimale
laquelle le visiteur doit approcher de la cible pour que l'lment PA se place automatiquement sur celle-ci. Les valeurs importantes permettent l'utilisateur de trouver plus facilement la cible de dpt.
9 Pour des puzzles simples et des dfilements d'images, vous pouvez vous en tenir l. Pour dfinir la poigne de
dplacement de l'lment PA, suivre le mouvement de l'lment PA pendant qu'il est dplac et dclencher une action lorsqu'il est dpos, cliquez sur l'onglet Avanc.
10 Pour spcifier que l'utilisateur doit cliquer dans une zone particulire de l'lment PA pour pouvoir le dplacer,
slectionnez Zone dans l'lment dans le menu Poigne de dplacement, puis indiquez les coordonnes de l'origine (angle suprieur gauche) de la poigne de dplacement, ainsi que la largeur et la hauteur de celle-ci. Cette option est utile lorsque l'image insre l'intrieur de l'lment PA contient un symbole de dplacement, par exemple une barre de titre ou une poigne de tiroir. N'activez pas cette option si vous voulez que l'utilisateur soit libre de cliquer n'importe o dans l'lment PA pour le dplacer.
11 Choisissez, parmi les options de la zone En dplaant, celles que vous dsirez utiliser :
Activez l'option Placer l'lment au premier plan si l'lment PA doit tre amen au niveau le plus haut de l'ordre
de superposition lors de son dplacement. Si vous activez cette option, utilisez le menu droulant qui apparat pour indiquer si l'lment PA doit tre laiss au niveau de visibilit le plus lev ou si sa position d'origine dans l'ordre de superposition doit tre rtablie.
Tapez un code JavaScript ou un nom de fonction (par exemple, monitorAPelement()) dans la zone de texte Appel
JavaScript pour que ce code ou cette fonction soit excut en boucle pendant le dplacement de l'lment PA. Par exemple, vous pouvez crire une fonction pour surveiller les coordonnes de l'lment PA et afficher des indications, telles que Tu brles ou Tu t'loignes de la cible , dans une zone de texte.
12 Indiquez un code JavaScript ou un nom de fonction (par exemple, evaluateAPelementPos()) dans la deuxime
zone de texte Appel JavaScript si vous voulez que le code ou la fonction soit excut(e) lorsque l'lment PA est dpos. Activez l'option Uniquement si align si le code JavaScript indiqu ne doit tre excut que si l'lment PA a atteint la cible de dpt.
version prliminaire
Collecte d'informations sur l'lment PA dplaable

Lorsque vous associez le comportement Tirer l'lment PA un objet, Dreamweaver insre la fonction MM_dragLayer() dans la section d'en-tte (head) de votre document. (La fonction conserve l'ancienne convention d'attribution de nom pour les lments PA (anciennement, calques) de faon ce que les calques crs dans les versions prcdentes de Dreamweaver restent modifiable.) Cette fonction enregistre l'lment PA comme dplaable et dfinit trois proprits pour chaque lment PA dplaable, MM_LEFTRIGHT, MM_UPDOWN et MM_SNAPPED, que vous pouvez utiliser dans vos propres fonctions JavaScript pour dterminer les positions horizontale et verticale de l'lment PA et s'il a atteint la cible de dpt. Remarque : Les informations fournies ici sont destines uniquement aux programmeurs JavaScript expriments. Par exemple, la fonction suivante affiche la valeur de la proprit MM_UPDOWN (la position verticale actuelle de l'lment PA) dans un champ de formulaire appel curPosField. Les champs de formulaires servent afficher des informations pouvant tre continuellement mises jour, parce qu'ils sont dynamiques. Ainsi, vous pouvez modifier leur contenu aprs le chargement de la page.
function getPos(layerId){ var layerRef = document.getElementById(layerId); var curVertPos = layerRef.MM_UPDOWN; document.tracking.curPosField.value = curVertPos; }
Au lieu d'afficher la valeur des proprits MM_UPDOWN ou MM_LEFTRIGHT dans un champ de formulaire, vous pouvez utiliser ces valeurs de diffrentes manires. Par exemple, vous pouvez crire une fonction qui affiche un message dans ce champ selon la distance qui reste parcourir jusqu' la cible, ou appeler une autre fonction pour afficher ou masquer un lment PA selon la valeur de cette distance. Il est particulirement utile de tester la proprit MM_SNAPPED lorsque vous disposez, sur une page, de plusieurs lments PA qui doivent tous atteindre leur cible pour que l'utilisateur puisse passer la page ou la tche suivante. Par exemple, vous pouvez crire une fonction qui compte le nombre d'lments PA ayant la valeur MM_SNAPPED dfinie sur true et l'appeler chaque fois qu'un lment PA est dpos. Lorsque le nombre d'lments PA arrivs sur leur cible atteint le nombre dsir, vous pouvez envoyer l'utilisateur la page suivante ou afficher un message de flicitations.
Application du comportement Atteindre l'URL

Le comportement Atteindre l'URL ouvre une nouvelle page dans la fentre en cours ou dans le cadre indiqu. Ce comportement est utile pour modifier d'un seul clic le contenu de deux cadres ou plus
1 Slectionnez un objet et choisissez Atteindre l'URL dans le menu Ajouter un comportement du panneau
Comportements.
2 Choisissez une destination pour l'URL dans la liste Ouvrir dans.
La liste Ouvrir dans numre automatiquement les noms de tous les cadres qui se trouvent dans le jeu de cadres actuel, ainsi que la fentre principale. S'il n'y a pas de cadres, cette dernire est la seule option. Remarque : Ne donnez pas vos cadres les noms top, blank, self ou parent, car cela pourrait produire des rsultats inattendus. En effet, certains navigateurs peuvent confondre ces noms avec les mots rservs utiliss dans le champ Cible.
3 Cliquez sur Parcourir pour slectionner un document ouvrir ou tapez le nom et le chemin d'accs au fichier
recherch dans la zone de texte URL.

4 Rptez les tapes 2 et 3 pour ouvrir d'autres documents dans d'autres cadres. 5 Cliquez sur OK et vrifiez que l'vnement par dfaut est correct.
version prliminaire
Application du comportement Menu de reroutage

Lorsque vous crez un menu de reroutage en utilisant Insertion > Formulaire > Menu de reroutage, Dreamweaver cre un objet de menu et lui associe le comportement Menu de reroutage (ou Menu de reroutage Aller). En principe, il n'est pas ncessaire d'associer manuellement le comportement Menu de reroutage un objet. Vous pouvez modifier un menu de reroutage existant de deux manires diffrentes :
Vous pouvez modifier et rorganiser les lments du menu, modifier les fichiers rerouter et la fentre dans laquelle
s'ouvrent ces fichiers, en double-cliquant sur un comportement Menu de reroutage existant dans le panneau Comportements.
Vous pouvez modifier les lments du menu comme vous modifieriez les lments de n'importe quel menu, en
slectionnant le menu et en utilisant le bouton Valeurs de la liste dans l'inspecteur Proprits.
1 Crez un objet Menu de reroutage s'il n'en existe pas dj dans votre document. 2 Slectionnez l'objet et choisissez Menu de reroutage dans le menu Ajouter un comportement du panneau
Comportements.
3 Effectuez les modifications souhaites dans la bote de dialogue Menu de reroutage, puis cliquez sur OK.
Voir aussi
Menus de reroutage la page 290 Insertion ou modification d'un menu de formulaire HTML dynamique la page 687
Application du comportement Menu de reroutage Aller

Le comportement Menu de reroutage Aller est troitement associ l'action Menu de reroutage ; il vous permet d'associer un bouton Aller avec un menu de reroutage (pour utiliser ce comportement, vous devez crer au pralable un menu de reroutage dans le document). Un clic sur le bouton Aller ouvre le lien actuellement slectionn dans le menu de reroutage. En principe, il n'est pas indispensable d'ajouter un bouton Aller un menu de reroutage : le choix d'un lment de ce dernier provoque en gnral le chargement d'une nouvelle URL sans aucune intervention supplmentaire. Toutefois, si l'utilisateur choisit l'lment qui est dj slectionn dans le menu de reroutage, le reroutage ne se produira pas. En gnral cela n'a pas d'importance, mais si le menu de reroutage apparat dans une image et que les lments du menu assurent la liaison avec des pages dans d'autres images, un bouton Aller est souvent utile, pour permettre aux utilisateurs de choisir nouveau un lment dj slectionn dans le menu de reroutage. Remarque : Lorsque vous utilisez un bouton Aller associ un menu de reroutage, le bouton Aller devient le seul mcanisme permettant l'utilisateur d'accder l'URL associe la slection dans le menu. La slection d'un lment de menu dans le menu de reroutage n'a plus pour effet de rediriger l'utilisateur automatiquement vers une autre page ou un autre cadre.
1 Slectionnez un objet qui sera utilis comme bouton Aller (en gnral une image) et choisissez Menu de reroutage
Aller dans le menu Ajouter un comportement du panneau Comportements.

2 Dans le menu Choisissez un menu de reroutage, slectionnez un menu que le bouton Aller activera et cliquez sur OK.
Application du comportement Ouvrir la fentre Navigateur

Utilisez l'action Ouvrir la fentre Navigateur pour ouvrir une page dans une nouvelle fentre. Vous pouvez spcifier les proprits de la nouvelle fentre, dont sa taille, ses attributs (redimensionnable ou non, dispose d'une barre de menu ou non, etc.), ainsi que son nom Par exemple, vous pouvez utiliser ce comportement pour ouvrir une image plus grande dans une fentre individuelle lorsque l'utilisateur clique sur l'image rduite ; avec ce comportement, vous pouvez adapter la fentre la taille exacte de l'image.
version prliminaire
Si vous ne spcifiez aucun attribut pour la fentre, elle s'ouvrira avec la taille et les attributs de la fentre partir de laquelle elle a t lance. Choisir des attributs pour la fentre dsactive automatiquement tous ceux qui ne sont pas explicitement activs. Par exemple, si vous ne dfinissez aucun attribut pour la fentre, elle peut s'ouvrir en 1024 x 768 pixels et comporter une barre de navigation (affichant les boutons Prcdente, Suivante, Dmarrage et Actualiser), une barre d'adresse (indiquant l'URL), une barre d'tat (en bas, affichant les messages d'tat) et une barre de menus (affichant les menus Fichier, Edition, Affichage et d'autres menus). Si vous dfinissez explicitement une largeur de 640 et une hauteur de 480 pixels, sans aucun autre attribut, la fentre s'ouvrira en 640 x 480 pixels, sans aucune barre d'outils.
1 Slectionnez un objet et choisissez Ouvrir la fentre Navigateur dans le menu Ajouter un comportement du
panneau Comportements.
2 Tapez l'URL afficher ou cliquez sur Parcourir pour slectionner un fichier. 3 Dfinissez les options pour la largeur et la hauteur de la fentre (en pixels) et pour l'incorporation de diffrentes
barres d'outils, barres de dfilement, poignes de redimensionnement, etc. Donnez un nom la fentre (n'utilisez pas d'espaces ni de caractres spciaux) si vous souhaitez qu'elle soit la cible de liens ou qu'elle soit contrle en JavaScript.
Application du comportement Lire le son

Application du comportement Message contextuel

Le comportement Message contextuel fait apparatre un message d'alerte JavaScript, avec le texte que vous avez spcifi. Comme les alertes JavaScript ne disposent que d'un seul bouton (OK), utilisez ce comportement pour informer l'utilisateur plutt que pour lui proposer un choix. Vous pouvez incorporer au texte des appels de fonction, proprits, variables globales ou autres expressions valides en JavaScript. Pour incorporer une expression JavaScript, placez-la entre des accolades ({}). Pour afficher une accolade, faites-la prcder d'une barre oblique inverse (\{). Exemple :
The URL for this page is {window.location}, and today is {new Date()}.
Remarque : Le navigateur contrle l'aspect de l'alerte. Si vous dsirez avoir davantage de contrle sur l'apparence, pensez utiliser le comportement Ouvrir la fentre Navigateur.
1 Slectionnez un objet et choisissez Message contextuel dans le menu Ajouter un comportement du panneau
Comportements.
2 Tapez votre message dans la zone de texte prvue cet effet. 3 Cliquez sur OK et vrifiez que l'vnement par dfaut est correct.
Application du comportement Prcharger les images

Le comportement Prcharger les images raccourcit le dlai d'affichage en mettant en mmoire cache les images qui ne sont pas visibles lors du premier affichage de la page (par exemple, les images qui vont tre remplaces par des comportements ou des scripts).
version prliminaire
Remarque : Le comportement Permuter une image prcharge automatiquement toutes les images slectionnes lorsque vous choisissez l'option Prcharger les images dans la bote de dialogue Permuter une image ; il n'est donc pas ncessaire d'ajouter manuellement l'action Prcharger les images lorsque vous utilisez l'action Permuter une image.
1 Slectionnez un objet et choisissez Prcharger les images dans le menu Ajouter un comportement du panneau
Comportements.
2 Cliquez sur Parcourir pour slectionner un fichier d'image ou tapez le chemin d'accs et le nom du fichier d'une
image dans la zone de texte Fichier source des images.

3 Cliquez sur le bouton plus (+) en haut de la bote de dialogue pour ajouter l'image la liste Prcharger les images. 4 Rptez les tapes 2 et 3 pour les autres images que vous dsirez prcharger dans la page en cours. 5 Pour supprimer une image de la liste Prcharger les images, slectionnez-la et cliquez sur le bouton () (signe
moins).
Application du comportement Dfinir image barre de navigation

Application du comportement Texte d'un cadre

Le comportement Texte d'un cadre vous permet de dfinir de faon dynamique le texte d'un cadre, en remplaant le contenu et le formatage d'un cadre par le contenu indiqu. Ce contenu peut tre n'importe quel code source HTML valide. Ce comportement permet d'afficher les informations de faon dynamique. Bien que le comportement Texte d'un cadre permette de remplacer le formatage d'un cadre, vous pouvez activer l'option Prserver Couleur d'arrire-plan pour conserver les attributs actuels pour l'arrire-plan de la page et la couleur du texte. Vous pouvez incorporer au texte des appels de fonction, proprits, variables globales ou autres expressions valides en JavaScript. Pour incorporer une expression JavaScript, placez-la entre des accolades ({}). Pour afficher une accolade, faites-la prcder d'une barre oblique inverse (\{). Exemple :
1 Slectionnez un objet et choisissez Texte > Texte du cadre dans le menu Ajouter un comportement du panneau
Comportements.
2 Dans la bote de dialogue qui s'affiche, slectionnez le cadre cible dans le menu Cadre. 3 Cliquez sur le bouton Reprendre HTML courant pour copier les contenus actuels de la section bodydu cadre cible. 4 Entrez un message dans la zone de texte Nouveau HTML. 5 Cliquez sur OK et vrifiez que l'vnement par dfaut est correct.
Voir aussi
Cration de cadres et de jeux de cadres la page 202
version prliminaire
Application du comportement Texte du conteneur

Le comportement Texte du conteneur remplace le contenu et le formatage d'un contenu existant (c'est--dire, tout lment pouvant contenir du texte ou d'autres lments) d'une page par le contenu indiqu. Ce contenu peut tre n'importe quel code source valide en HTML. Vous pouvez incorporer au texte des appels de fonction, proprits, variables globales ou autres expressions valides en JavaScript. Pour incorporer une expression JavaScript, placez-la entre des accolades ({}). Pour afficher une accolade, faites-la prcder d'une barre oblique inverse (\{). Exemple :
1 Slectionnez un objet et choisissez Texte > Texte du conteneur dans le menu Ajouter un comportement du panneau
Comportements.
2 Dans la bote de dialogue qui s'affiche, slectionnez l'lment cible dans le menu Conteneur. 3 Entrez le nouveau texte ou le nouveau code HTML dans la zone de texte Nouveau HTML. 4 Cliquez sur OK et vrifiez que l'vnement par dfaut est correct.
Voir aussi
Insertion d'une balise div PA la page 166
Application du comportement Dfinir le texte de la barre d'tat

Le comportement Dfinir le texte de la barre d'tat affiche un message dans la barre d'tat, dans la partie infrieure gauche de la fentre du navigateur. Par exemple, vous pouvez utiliser ce comportement pour dcrire la destination d'un lien dans la barre d'tat, au lieu d'afficher l'URL associe Cependant, il arrive frquemment que les utilisateurs ne tiennent pas compte des messages de la barre d'tat (certains navigateurs ne prennent pas en charge la dfinition du texte de la barre d'tat). Si votre message est important, pensez l'afficher sous la forme d'un message contextuel ou comme texte d'un lment PA. Remarque : Si vous utilisez le comportement Dfinir le texte de la barre d'tat dans Dreamweaver, le texte de la barre d'tat du navigateur ne va pas ncessairement changer du fait que certains navigateurs ncessitent des rglages spciaux lors de la modification du texte de la barre d'tat. Par exemple, dans Firefox, vous devez modifier une option Avance qui permet JavaScript modifier le texte de la barre d'tat. Pour plus de dtails, reportez-vous la documentation de votre navigateur. Vous pouvez incorporer au texte des appels de fonction, proprits, variables globales ou autres expressions valides en JavaScript. Pour incorporer une expression JavaScript, placez-la entre des accolades ({}). Pour afficher une accolade, faites-la prcder d'une barre oblique inverse (\{). Exemple :
1 Slectionnez un objet et choisissez Texte > Texte de la barre d'tat dans le menu Ajouter un comportement du
panneau Comportements.
2 Dans la bote de dialogue Dfinir le texte de la barre d'tat, tapez un message dans la zone de texte Message.
Utilisez un message concis. Le navigateur tronquera le message s'il est trop long pour la barre d'tat.
version prliminaire
Application du comportement Texte d'un champ de texte

Le comportement Texte d'un champ de texte remplace le contenu d'un champ de texte de formulaire par le contenu indiqu. Vous pouvez incorporer au texte des appels de fonction, proprits, variables globales ou autres expressions valides en JavaScript. Pour incorporer une expression JavaScript, placez-la entre des accolades ({}). Pour afficher une accolade, faites-la prcder d'une barre oblique inverse (\{). Exemple :
Cration d'un champ de texte nomm

1 Slectionnez Insertion > Formulaire > Champ de texte.
Si Dreamweaver vous invite ajouter une balise de formulaire, cliquez sur Oui.
2 Dans l'inspecteur Proprits, tapez le nom du champ de texte. Veillez utiliser un nom unique dans cette page
(n'utilisez pas le mme nom pour plusieurs lments appartenant la mme page, mme s'ils se trouvent dans des formulaires diffrents).
Application de l'action Texte d'un champ de texte

1 Slectionnez un champ de texte et choisissez Texte > Texte d'un champ de texte dans le menu Ajouter un
comportement du panneau Comportements.

2 Slectionnez le champ de texte cible dans le menu Champ de texte et entrez votre nouveau texte. 3 Cliquez sur OK et vrifiez que l'vnement par dfaut est correct.
Application du comportement Afficher-Masquer les lments

Le comportement Afficher-Masquer les lments affiche, masque ou rtablit la visibilit par dfaut d'un ou plusieurs lments de page. Ce comportement permet d'afficher des informations en fonction des interactions de l'utilisateur avec la page. Par exemple, lorsque le pointeur passe sur l'image d'une plante, vous pouvez afficher un lment de page comportant des dtails sur le climat idal de la plante, l'ensoleillement dont elle a besoin, sa taille adulte, etc. Le comportement ne fait qu'afficher ou masquer l'lment pertinent, il ne supprime pas rellement l'lment du flux de la page lorsqu'il est masqu.
1 Slectionnez un objet et choisissez Afficher-Masquer les lments dans le menu Ajouter un comportement du
panneau Comportements. Si l'option Afficher-Masquer les lments n'est pas disponible, cela signifie probablement qu'un lment PA est slectionn. Etant donn que les lments PA n'acceptent pas les vnements dans la version 4.0 des deux navigateurs, vous devez choisir un objet diffrent, tel que la balise <body> ou un lien (<a>).
2 Dans la liste Elments, slectionnez l'lment que vous souhaitez afficher ou masquer et cliquez sur Afficher,
Masquer ou Restaurer (cette dernire option restaure la visibilit par dfaut).

3 Rptez l'tape 2 pour les autres lments dont vous voulez modifier la visibilit. Vous pouvez modifier la visibilit
de plusieurs lments avec un seul comportement.

Application du comportement Afficher le menu contextuel

version prliminaire
Ajout, suppression et rorganisation d'lments de menu contextuel

Mise en forme d'un menu contextuel

Positionnement d'un menu contextuel dans un document

Modification d'un menu contextuel

Application du comportement Permuter une image

Cette action remplace une image par une autre, en modifiant l'attribut src de la balise <img>. Utilisez ce comportement pour crer des substitutions de boutons et autres effets sur des images (y compris la substitution de plusieurs images la fois) L'insertion d'une image survole ajoute automatiquement votre page un comportement Permuter une image. Remarque : Etant donn que seul l'attribut src est affect par ce comportement, l'image de substitution doit en principe avoir les mmes dimensions (hauteur et largeur) que l'original. Faute de quoi, l'image intervertie apparatrait dforme (compacte ou largie) de faon s'adapter aux dimensions de l'image d'origine. Il existe galement le comportement Restaurer l'image intervertie qui restaure la dernire interversion d'images son tat antrieur. Il est automatiquement ajout lorsque vous associez le comportement Permuter une image un objet ; en principe, si vous avez laiss cette option active en associant le comportement Permuter une image, vous n'avez pas besoin de l'utiliser manuellement.
1 Choisissez Insertion > Image ou cliquez sur le bouton Image du panneau Insertion pour insrer une image. 2 Dans l'inspecteur Proprits, indiquez un nom pour l'image dans la zone de texte situe l'extrme gauche.
Il n'est pas ncessaire de nommer les images ; elles sont nommes automatiquement lorsque vous associez le comportement un objet. Toutefois, il vous sera plus facile de distinguer les images proposes dans la bote de dialogue Permuter une image si vous avez vous-mme attribu un nom ces images.
3 Rptez les tapes 1 et 2 si vous souhaitez insrer des images supplmentaires. 4 Slectionnez un objet (en gnral, l'image que vous voulez remplacer) et choisissez l'option Permuter une image
dans le menu Ajouter un comportement du panneau Comportements.

5 Slectionnez l'image dont vous voulez modifier la source dans la liste Images. 6 Cliquez sur Parcourir pour slectionner le nouveau fichier d'image ou indiquez son chemin d'accs et son nom de
fichier dans la zone de texte Dfinir la source .

7 Rptez les tapes 5 et 6 si vous dsirez ajouter d'autres images modifier. Utilisez la mme action Permuter l'image
pour toutes les images que vous voulez modifier simultanment ; dans le cas contraire, l'action correspondante Restaurer l'image intervertie ne les restaurerait pas toutes.
8 Slectionnez l'option Prcharger les images pour mettre en mmoire cache les nouvelles images au moment du
chargement de la page. Cela vite le dlai de tlchargement des images lorsqu'un vnement dclenche leur apparition.
version prliminaire
Application du comportement Valider le formulaire

Le comportement Valider le formulaire teste le contenu des champs de texte indiqus pour vrifier que l'utilisateur a entr le type de donnes correct. Associez ce comportement des champs de texte individuels l'aide de l'vnement onBlur pour valider ces champs au fur et mesure que l'utilisateur remplit le formulaire ou associez-le au formulaire l'aide de l'vnement onSubmit pour valuer divers champs simultanment lorsque l'utilisateur clique sur le bouton d'envoi. L'association de ce comportement un formulaire empche l'envoi de formulaires contenant des donnes non valides.
1 Pour insrer un formulaire, choisissez Insertion > Formulaire ou cliquez sur le bouton Formulaire du panneau
Insertion.
2 Pour insrer un champ de texte, choisissez Insertion > Formulaire > Champ de texte ou cliquez sur le bouton
Champ de texte du panneau Insertion. Rptez cette tape pour insrer plusieurs champs de texte.
3 Choisissez une mthode de validation :
Pour valider les champs individuellement au fur et mesure que l'utilisateur remplit le formulaire, slectionnez un
champ de texte et choisissez Fentre > Comportements.
Pour valider plusieurs champs lorsque l'utilisateur envoie le formulaire, cliquez sur la balise <form> dans le
slecteur de balises situ dans le coin infrieur gauche de la fentre de document, puis choisissez Fentre > Comportements.
4 Slectionnez Valider le formulaire dans le menu Ajouter un comportement. 5 Effectuez l'une des oprations suivantes :
Si vous validez des champs individuellement, slectionnez dans la liste Champs le mme champ que celui que vous
avez slectionn dans la fentre de document.
Si vous validez plusieurs champs la fois, slectionnez un champ de texte dans la liste Champs.
6 Activez l'option Obligatoire si le champ doit obligatoirement contenir des donnes. 7 Slectionnez l'une des options d'acceptation suivantes :
Tout Vrifie qu'un champ obligatoire contient des donnes ; ces dernires peuvent tre de n'importe quel type. Adresse lectronique Vrifie que le champ contient un symbole @. Nombre Vrifie que le champ contient uniquement des valeurs numriques. Nombre de Vrifie que le champ contient une valeur numrique comprise dans la plage indique.
8 Si vous validez plusieurs champs, rptez les tapes 6 et 7 pour tout champ supplmentaire valider. 9 Cliquez sur OK.
Si vous validez plusieurs champs lorsque l'utilisateur envoie le formulaire, l'vnement onSubmit apparat automatiquement dans le menu droulant Evnements.
10 Si vous validez des champs individuellement, vrifiez que l'vnement par dfaut est bien onBlur ou onChange. Si
ce n'est pas le cas, slectionnez l'un de ces vnements. Ces deux vnements dclenchent le comportement Valider le formulaire ds que l'utilisateur sort du champ concern. La diffrence entre ces deux vnements est que onBlur est toujours dclench, que l'utilisateur ait saisi ou non du texte dans le champ, alors que onChange n'est dclench que si l'utilisateur a modifi le contenu du champ. L'vnement onBlur est prfrable si le champ est obligatoire.
version prliminaire
372
Chapitre 13 : Utilisation d'autres applications

Adobe Dreamweaver CS5 s'intgre de nombreuses applications dont Flash, Fireworks, Adobe Photoshop et Adobe Bridge. Vous pouvez utiliser directement d'autres applications Adobe, comme Adobe Device Central, partir de l'espace de travail de Dreamweaver.
Intgration entre les applications

A propos de l'intgration de Photoshop, Flash et Fireworks
Photoshop, Fireworks et Flash sont de puissants outils de dveloppement Web qui permettent de crer et de grer des graphismes et des fichiers SWF. Vous pouvez intgrer de faon troite Dreamweaver avec ces outils au sein de votre processus de cration. Remarque : Une intgration limite est galement disponible avec quelques autres applications. Par exemple, vous pouvez exporter un fichier InDesign en format XHTML et continuer le modifier dans Dreamweaver. Vous trouverez un didacticiel consacr ce flux d'activits l'adresse www.adobe.com/go/vid0202_fr. Vous pouvez insrer aisment des images et du contenu crs dans Adobe Flash (fichiers SWF et FLV) dans un document Dreamweaver. Vous pouvez galement modifier une image ou un fichier SWF dans son diteur d'origine aprs l'avoir insr dans un document Dreamweaver. Remarque : Pour qu'il soit possible d'utiliser Dreamweaver conjointement ces applications Adobe, toutes ces applications doivent tre installes sur votre ordinateur. Pour Fireworks et Flash, l'intgration des produits est ralise par l'intermdiaire de l'dition Roundtrip. L'dition Roundtrip permet de transfrer de faon fiable les mises jour de code entre Dreamweaver et les autres applications, en prservant par exemple les comportements de survol ou les liens vers d'autres fichiers. Dreamweaver fait galement appel aux Design Notes pour l'intgration des produits. Les Design Notes sont de petits fichiers permettant Dreamweaver de localiser le document source correspondant un fichier image ou un fichier SWF export. Lorsque vous exportez des fichiers de Fireworks, Flash ou Photoshop directement vers un site dfini par Dreamweaver, les Design Notes qui contiennent des rfrences au fichier de programmation PSD, PNG ou Flash (FLA) sont automatiquement exportes vers le site avec le fichier Web (format GIF, JPEG, PNG ou SWF). Outre les informations relatives l'emplacement, les Design Notes contiennent des informations pertinentes sur les fichiers exports. Lorsque vous exportez une table Fireworks, par exemple, Fireworks rdige une Design Note pour chaque fichier d'image export dans la table. Si le fichier export contient des zones ractives ou des effets de survol, les Design Notes contiennent des informations sur les scripts les concernant. Pendant l'exportation, Dreamweaver cre un dossier nomm _notes dans le mme dossier que l'actif export. Ce dossier contient les Design Notes ncessaires l'intgration de Dreamweaver avec Photoshop, Flash ou Fireworks. Remarque : Pour pouvoir utiliser les Design Notes, vous devez vous assurer qu'elles ne sont pas dsactives pour votre site Dreamweaver. Elles sont actives par dfaut. Toutefois, mme si elles sont dsactives, lorsque vous insrez un fichier d'image Photoshop, Dreamweaver cre une Design Note pour stocker l'emplacement du fichier PSD source.
version prliminaire
Utilisation d'autres applications
Vous trouverez un didacticiel consacr l'intgration de Dreamweaver et Fireworks l'adresse www.adobe.com/go/vid0188_fr. Vous trouverez un didacticiel consacr l'intgration de Dreamweaver et Photoshop l'adresse www.adobe.com/go/lrvid4043_dw_fr.
Voir aussi
A propos des Design Notes la page 107 Activation et dsactivation des Design Notes pour un site la page 107 Didacticiel sur Dreamweaver et InDesign
Utilisation de Fireworks et Dreamweaver

Insertion d'une image Fireworks
Dreamweaver et Fireworks reconnaissent et partagent de nombreuses procdures de modifications apportes aux fichiers, parmi lesquelles celles apportes aux liens, aux cartes graphiques, aux dcoupes de tables et bien plus. Runies, les deux applications rationalisent les tches de dveloppement consistant modifier, optimiser et importer des fichiers graphiques Web dans des pages HTML. Vous pouvez placer une image exporte avec Fireworks directement dans un document Dreamweaver l'aide de la commande Image (menu Insertion) ou vous pouvez crer une image Fireworks partir d'un espace rserv pour l'image Dreamweaver.
1 Dans le document Dreamweaver, placez le point d'insertion l'emplacement o vous souhaitez insrer l'image, puis
procdez de l'une des manires suivantes :
Choisissez Insertion > Image. Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Image ou faites-le glisser vers le document.
2 Recherchez le fichier Fireworks export et cliquez sur OK (Windows) ou Ouvrir (Macintosh).
Remarque : Si le fichier Fireworks ne se trouve pas dans le site courant de Dreamweaver, un message vous demande si vous souhaitez copier le fichier dans le dossier racine. Cliquez sur Oui.
Voir aussi
A propos de l'intgration de Photoshop, Flash et Fireworks la page 372
Modification d'une image ou d'un tableau Fireworks dans Dreamweaver

Quand vous ouvrez ou ditez une image ou une dcoupe d'image faisant partie d'une table Fireworks, Dreamweaver lance Fireworks, ce qui ouvre le fichier PNG partir duquel l'image ou la table a t exporte. Remarque : Ce principe suppose que Fireworks soit dfini comme diteur d'image externe principal pour les fichiers PNG. Par ailleurs, Fireworks est souvent dfini comme diteur par dfaut pour les fichiers JPEG et GIF, bien qu'il puisse tre utile de dfinir Photoshop comme diteur par dfaut pour ces types de fichiers.
version prliminaire
Lorsque l'image fait partie d'une table Fireworks, vous pouvez ouvrir la table entire en vue de la modifier, pour autant que le commentaire  figure dans le code HTML. Si le fichier PNG source a t export partir de Fireworks vers un site Dreamweaver l'aide du paramtre Document HTML et image du style Dreamweaver, le commentaire de la table Fireworks est automatiquement insr dans le code HTML.
1 Dans Dreamweaver, ouvrez l'inspecteur Proprits (Fentre > Proprits), s'il n'est pas dj ouvert. 2 Cliquez sur une image ou une dcoupe d'image pour la slectionner.
Lorsque vous slectionnez une image exporte depuis Fireworks, l'inspecteur Proprits identifie la slection comme image ou table Fireworks et affiche le nom du fichier source PNG.
3 Pour lancer Fireworks afin d'apporter des modifications, procdez de l'une des manires suivantes :
Dans l'inspecteur Proprits, cliquez sur Modifier. Maintenez enfonce la touche Ctrl (Windows) ou Commande (Macintosh) et double-cliquez sur l'image
slectionne.
Cliquez sur l'image slectionne avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle
enfonce (Macintosh) et choisissez Modifier avec Fireworks dans le menu contextuel. Remarque : Si Fireworks ne trouve pas le fichier source, un message vous invite le faire. Lorsque vous travaillez dans le fichier source Fireworks, les modifications sont enregistres dans le fichier source et le fichier export, sinon seul le fichier export est mis jour.
4 Dans Fireworks, modifiez le fichier PNG source puis cliquez sur Termin.
Fireworks enregistre les modifications dans le fichier PNG, exporte l'image mise jour (ou le document HTML et les images) et active de nouveau Dreamweaver. Dans Dreamweaver, l'image ou la table mise jour apparat. Vous trouverez un didacticiel consacr l'intgration de Dreamweaver et Fireworks l'adresse www.adobe.com/go/vid0188_fr.
Voir aussi
Utilisation d'un diteur d'image externe la page 252 Didacticiel sur Dreamweaver et Fireworks
Optimisation d'une image Fireworks depuis Dreamweaver

Dreamweaver permet de modifier rapidement une image ou une animation Fireworks. Depuis Dreamweaver, vous pouvez modifier les paramtres d'optimisation et d'animation, ainsi que la taille et la zone de l'image exporte.
1 Dans Dreamweaver, slectionnez l'image dsire puis effectuez l'une des oprations suivantes :
Choisissez Commande > Optimiser l'image. Cliquez sur le bouton de modification des paramtres de l'image dans l'inspecteur Proprits.
2 Apportez les modifications dans la bote de dialogue Aperu de l'image.
Pour modifier les paramtres d'optimisation, cliquez sur l'onglet Options. Pour modifier la taille et la zone de l'image exporte, cliquez sur l'onglet Fichier.
3 Une fois termin, cliquez sur OK.
Voir aussi
Dfinition des options de la bote de dialogue d'aperu d'image la page 386
version prliminaire
Utilisation de Fireworks pour modifier les espaces rservs pour les images Dreamweaver
Vous pouvez crer un espace rserv dans un document Dreamweaver, puis lancer Fireworks pour crer une image graphique ou une table Fireworks y placer. Pour crer une image partir d'un espace rserv, Dreamweaver et Fireworks doivent tre installs sur votre systme.
1 Veillez ce que Fireworks soit dfini comme diteur d'image des fichiers PNG. 2 Dans la fentre de document, cliquez sur l'espace rserv pour l'image afin de le slectionner. 3 Dmarrez Fireworks en mode Modification depuis Dreamweaver en utilisant l'une des mthodes suivantes :
Dans l'inspecteur Proprits, cliquez sur Crer. Appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh), puis double-cliquez sur l'espace rserv pour
l'image.
Cliquez sur l'espace rserv pour l'image avec le bouton droit de la souris (Windows) ou en maintenant la touche
Ctrl enfonce (Macintosh), puis slectionnez Crer une image dans Fireworks.
4 Utilisez les options de Fireworks pour crer l'image.
Fireworks reconnat les paramtres suivants d'espace rserv pour l'image, qui sont dfinis lors de son utilisation dans Dreamweaver : la taille de l'image (qui correspond la taille de la zone de travail Fireworks), l'ID de l'image (utilis par Fireworks comme nom de document par dfaut pour le fichier source et le fichier d'exportation cr) et l'alignement du texte. Fireworks reconnat galement les liens et certains comportements (permutation d'image, menu contextuel et texte notamment) que vous avez associs l'espace rserv pour l'image lorsque vous travaillez dans Dreamweaver. Remarque : Bien que les liens ajouts un espace rserv pour l'image soient invisibles dans Fireworks, ils sont conservs. Si vous dessinez une zone ractive et que vous ajoutez un lien dans Fireworks, le programme ne supprimera pas le lien ajout l'espace rserv pour l'image dans Dreamweaver. Toutefois, si dans Fireworks vous dessinez une dcoupe dans la nouvelle image, le lien sera supprim du document Dreamweaver lors du remplacement de l'espace rserv pour l'image. Fireworks ne reconnat pas les paramtres suivants d'espace rserv pour l'image : alignement de l'image, couleur, espacement vertical et horizontal et cartes. Ils sont dsactivs dans l'inspecteur Proprits de l'espace rserv pour l'image.
5 Au terme de votre travail, cliquez sur Termin afin d'afficher l'invite d'enregistrement. 6 Dans la zone de texte Enregistrer dans, slectionnez le dossier dfini comme dossier du site local Dreamweaver.
Si vous avez attribu un nom l'espace rserv lors de son insertion dans le document Dreamweaver, Fireworks insre automatiquement ce nom dans la zone de texte Nom de fichier. Vous pouvez modifier le nom.
7 Cliquez sur Enregistrer pour enregistrer le fichier PNG.
La bote de dialogue Exporter s'affiche. Cette bote de dialogue vous permet d'exporter l'image au format GIF, JPEG ou, dans le cas d'images dcoupes, sous la forme de documents HTML et d'images.
8 Dans la zone Enregistrer dans, slectionnez le dossier du site local Dreamweaver.
La zone de texte Nom affiche automatiquement le nom dsignant le fichier PNG. Vous pouvez modifier le nom.
9 Dans la zone Enregistrer sous le type, slectionnez le type de fichier(s) exporter, par exemple Images uniquement
ou Documents HTML et images.

10 Cliquez sur Enregistrer pour enregistrer le fichier export.
version prliminaire
Le fichier est enregistr et Dreamweaver est nouveau actif. Dans le document Dreamweaver, le fichier export ou la table Fireworks remplace l'espace rserv pour l'image.
Voir aussi
Utilisation d'un diteur d'image externe la page 252 Insertion d'une image la page 242
A propos des menus contextuels de Fireworks

Fireworks permet de crer facilement et rapidement des menus contextuels de type CSS. Les menus contextuels crs avec Fireworks sont non seulement plus extensibles et plus rapides tlcharger, mais encore prsentent les avantages suivants :
Les lments de menu peuvent tre indexs par les moteurs de recherche. Les lments de menu peuvent tre lus par des lecteurs d'cran, ce qui rend vos pages plus accessibles. Le code gnr par Fireworks est aux normes et peut tre valid.
Vous pouvez modifier les menus contextuels Fireworks avec Dreamweaver ou Fireworks, mais pas les deux. Les modifications apportes dans Dreamweaver ne sont pas conserves dans Fireworks.
Voir aussi
Modification des menus contextuels de Fireworks dans Dreamweaver la page 376
Modification des menus contextuels de Fireworks dans Dreamweaver

Vous pouvez crer un menu contextuel dans Fireworks 8, ou une version plus rcente, puis le modifier avec Dreamweaver ou Fireworks ( l'aide de l'dition Roundtrip), mais pas les deux. Si vous modifiez vos menus dans Dreamweaver, puis dans Fireworks, vous perdez toutes les modifications prcdentes, l'exception du texte. Si vous prfrez modifier vos menus avec Dreamweaver, vous pouvez utiliser Fireworks pour crer le menu contextuel, puis Dreamweaver de faon exclusive pour modifier le menu et le personnaliser. Si vous prfrez modifier les menus dans Fireworks, vous pouvez utiliser la fonctionnalit d'dition Roundtrip de Dreamweaver, mais vous ne devez pas modifier les menus directement dans Dreamweaver.
1 Dans Dreamweaver, slectionnez le tableau Fireworks contenant le menu contextuel, puis cliquez sur Modifier
dans l'inspecteur Proprits. Le fichier PNG source s'ouvre dans Fireworks.

2 Dans Fireworks, modifiez ce menu avec l'diteur correspondant, puis cliquez sur Termin dans la barre d'outils de
Fireworks. Fireworks renvoie le menu modifi Dreamweaver. Si vous avez cr un menu contextuel dans Fireworks MX 2004 ou une version plus ancienne, vous pouvez le modifier dans Dreamweaver avec la bote de dialogue Afficher le menu contextuel, disponible partir du panneau Comportements.
Voir aussi
A propos des menus contextuels de Fireworks la page 376
version prliminaire
Modification d'un menu contextuel cr dans Fireworks MX 2004 ou une version plus ancienne
1 Dans Dreamweaver, slectionnez la zone ractive ou l'image qui dclenche le menu contextuel. 2 Dans le panneau Comportements (Maj+F3), double-cliquez sur Afficher le menu contextuel dans la liste Actions. 3 Apportez vos modifications dans la bote de dialogue Menu contextuel puis cliquez sur OK.
Voir aussi
Application du comportement Afficher le menu contextuel la page 369
Dfinition des prfrences de lancement et de modification des fichiers source Fireworks

Lorsque vous modifiez des images dans Fireworks, les images places dans vos pages Web sont normalement exportes par Fireworks depuis un fichier source PNG. Lorsque vous ouvrez une image dans Dreamweaver pour la modifier, Fireworks ouvre automatiquement le fichier PNG source, vous invitant prciser l'emplacement du fichier PNG si celui-ci ne peut pas tre localis. Vous pouvez rgler vos prfrences sous Fireworks afin que Dreamweaver ouvre l'image insre, moins que vous ne prfriez que Fireworks vous offre la possibilit d'utiliser le fichier d'image insre ou le fichier source Fireworks chaque fois que vous ouvrez une image sous Dreamweaver. Remarque : Dreamweaver ne reconnat ces prfrences que dans certains cas. Par exemple, vous devez lancer et optimiser les images qui ne font pas partie d'une table Fireworks et dont le chemin Design Notes vers un fichier PNG source est correct.
1 Dans Fireworks, choisissez Edition > Prfrences (Windows) ou Fireworks > Prfrences (Macintosh) et cliquez
sur l'onglet Lancer et Modifier (Windows) ou choisissez Lancer et Modifier dans le menu droulant (Macintosh).
2 Indiquez les prfrences applicables lors de la modification ou de l'optimisation d'images Fireworks places dans
une application externe :

Toujours utiliser le fichier PNG source Permet de lancer automatiquement le fichier PNG Fireworks dfini dans la
Design Note comme fichier source de l'image place. Les mises jour sont appliques au fichier PNG source et l'image place correspondante.
Ne jamais utiliser le fichier PNG source Permet de lancer automatiquement l'image Fireworks place, qu'il existe ou non un fichier PNG source. Les mises jour sont appliques l'image place uniquement. Demander lors du lancement Affiche un message vous demandant si le fichier PNG source doit tre ouvert. Vous pouvez galement dterminer les prfrences globales de la fonction de lancement et d'dition dans cette fentre d'invite.
Insertion de code HTML Fireworks dans un document Dreamweaver

Dans Fireworks, la commande Exporter vous permet d'exporter et d'enregistrer des images optimises et des fichiers HTML dans le dossier du site Dreamweaver de votre choix. Vous pouvez ensuite insrer le fichier dans Dreamweaver. Dreamweaver permet d'insrer dans un document du code HTML gnr par Fireworks, intgrant des images, des dcoupes et du code JavaScript.
1 Dans le document Dreamweaver, placez le point d'insertion l o vous voulez insrer le code HTML Fireworks. 2 Effectuez l'une des oprations suivantes :
Choisissez Insertion > Objets image > HTML Fireworks.
version prliminaire
Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Images et choisissez Insrer HTML
Fireworks dans le menu.
3 Cliquez sur Parcourir pour slectionner un fichier HTML Fireworks. 4 Si le fichier n'est plus ncessaire par la suite, activez l'option Supprimer fichier aprs insertion. Cette option n'a
aucun effet sur le fichier PNG source associ au fichier HTML. Remarque : Si le fichier HTML se trouve sur un lecteur rseau, il est dfinitivement supprim (il n'est pas plac dans la corbeille).
5 Cliquez sur OK pour insrer le code HTML, ainsi que les images associes, les dcoupes et le code JavaScript dans
le document Dreamweaver.
Collage de code HTML Fireworks dans Dreamweaver

Pour placer rapidement dans Dreamweaver des images et tables gnres dans Fireworks, copiez et collez directement le code HTML Fireworks dans un document Dreamweaver.
Copie et collage de code HTML Fireworks dans Dreamweaver

1 Dans Fireworks, choisissez Edition > Copier le code HTML. 2 Suivez les instructions de l'assistant qui vous aide effectuer la procdure d'exportation de votre code HTML et des
images. Quand vous y tes invit, indiquez le dossier du site Dreamweaver comme destination des images exportes. L'assistant exporte les images l'endroit indiqu et copie le code HTML dans le Presse-papiers.
3 Dans le document Dreamweaver, placez le point d'insertion l'endroit du document o vous souhaitez coller le
code HTML, puis choisissez Edition > Coller code HTML Fireworks. Le code HTML et JavaScript associ aux fichiers Fireworks exports est copi dans le document Dreamweaver et tous les liens vers les images sont mis jour.
Exportation et collage de code HTML Fireworks dans Dreamweaver

1 Dans Fireworks, choisissez Fichier > Exporter. 2 Quand vous y tes invit, indiquez le dossier du site Dreamweaver comme destination des images exportes. 3 Dans le menu droulant Exporter, choisissez Documents HTML et Images. 4 Dans le menu droulant HTML, choisissez Copier dans le Presse-papiers, puis cliquez sur Exporter. 5 Dans le document Dreamweaver, placez le point d'insertion l'endroit du document o vous souhaitez coller le
code HTML export, puis choisissez Edition > Coller code HTML Fireworks. Le code HTML et JavaScript associ aux fichiers Fireworks exports est copi dans le document Dreamweaver et tous les liens vers les images sont mis jour.
Mise jour du code HTML Fireworks plac dans Dreamweaver

Outre la technique de lancement et de modification dcrite ci-dessus, vous pouvez faire appel la commande Fichier > Mettre jour le code HTML pour mettre jour des fichiers Fireworks placs dans Dreamweaver. La commande Mettre jour le code HTML vous permet de modifier l'image PNG source dans Fireworks et de mettre jour automatiquement le code HTML et les fichiers d'image exports placs dans un document Dreamweaver. Grce cette commande, vous pouvez mettre jour les fichiers Dreamweaver mme si Dreamweaver est inactif.
1 Dans Fireworks, ouvrez le fichier PNG source puis apportez les modifications dsires.
version prliminaire
2 Choisissez Fichier > Enregistrer. 3 Dans Fireworks, choisissez Fichier > Mettre jour le code HTML. 4 Recherchez le fichier Dreamweaver qui contient le code HTML mettre jour, puis cliquez sur Ouvrir. 5 Recherchez le dossier dans lequel placer les fichiers d'image mis jour et cliquez sur Slectionner (Windows) ou
Choisir (Macintosh). Fireworks met jour le code HTML et JavaScript du document Dreamweaver. Fireworks exporte galement les images mises jour associes au code HTML et les place dans le dossier de destination indiqu. Si Fireworks ne trouve pas le code HTML correspondant, il vous propose d'insrer du nouveau code HTML dans le document Dreamweaver. Fireworks insre la section JavaScript du nouveau code au dbut du document et place la table HTML ou le lien vers l'image la fin du document.
Cration d'un album photos pour le Web

La fonctionnalit Crer un album photos pour le Web a t abandonne partir de Dreamweaver CS5.
Utilisation de Photoshop et Dreamweaver

A propos de l'intgration de Photoshop
Vous pouvez insrer des fichiers d'image Photoshop (en format PSD) dans des pages Web de Dreamweaver, puis les faire optimiser par Dreamweaver sous la forme d'images Web (en formats GIF, JPEG et PNG). Dans ce cas, Dreamweaver insre l'image en tant qu'objet dynamique et conserve une connexion en direct avec le fichier PDS d'origine. Vous pouvez galement coller une image Photoshop calques multiples ou tranches multiples, en tout ou en partie, dans une page Web de Dreamweaver. Toutefois, lorsque vous effectuez un copier-coller partir de Photoshop, aucune connexion en direct avec le fichier d'origine n'est conserve. Pour mettre jour l'image, apportez les modifications dans Photoshop, puis utilisez de nouveau la fonction copier-coller. Remarque : Si vous employez souvent cette fonctionna lit d'intgration, il peut tre utile de stocker les fichiers Photoshop sur votre site Dreamweaver, de manire y accder plus aisment. Dans ce cas, veillez les voiler, de faon viter toute publication des actifs d'origine et tout transfert superflu entre le site local et le serveur distant. Pour consulter un didacticiel relatif au flux de production d'objets dynamiques dans Photoshop et Dreamweaver, rendez-vous ladresse suivante : www.adobe.com/go/lrvid4043_dw_fr.
Voir aussi
Voilage et suppression du voilage de certains types de fichier la page 105
A propos des objets dynamiques et des flux de production entre Photoshop et Dreamweaver
Il existe deux principaux flux de production pour traiter les fichiers Photoshop dans Dreamweaver : le flux de production copier/coller et celui des objets dynamiques.
version prliminaire
Flux de production copier/coller Le flux de production copier/coller vous permet de slectionner des tranches ou des calques dans un fichier Photoshop, puis de passer dans Dreamweaver pour en faire des images compatibles avec une utilisation sur le Web. Toutefois, si vous voulez mettre jour le contenu ultrieurement, vous devez ouvrir le fichier Photoshop dorigine, effectuer vos modifications, copier de nouveau votre tranche ou votre calque dans le Presse-papiers, puis coller la tranche ou le calque mis jour dans Dreamweaver. Ce flux de production est recommand uniquement lorsque vous voulez insrer une partie dun fichier Photoshop (par exemple, une section dune composition) en tant quimage sur une page Web. Flux de production dobjets dynamiques Lorsque vous travaillez sur des fichiers Photoshop entiers, Adobe recommande lutilisation de ce flux de production. Dans Dreamweaver, un objet dynamique dsigne une image place sur une page Web avec une connexion en ligne vers un fichier Photoshop (PSD) dorigine. En mode Cration dans Dreamweaver, un objet dynamique est signal par une icne situe dans le coin suprieur gauche de limage.
Objet dynamique
Lorsque limage Web (cest--dire limage de la page Dreamweaver) nest pas synchronise avec le fichier Photoshop dorigine, Dreamweaver dtecte que le fichier dorigine a t mis jour et affiche lune des flches de licne dobjet dynamique en rouge. Lorsque vous slectionnez limage Web en mode Cration et que vous cliquez sur le bouton Mettre jour depuis loriginal dans linspecteur Proprits, limage se met jour automatiquement avec tous les changements effectus dans le fichier Photoshop dorigine. Lorsque vous utilisez le flux de production dobjets dynamiques, vous navez pas besoin douvrir Photoshop pour mettre jour une image Web. En outre, toute mise jour dobjet dynamique dans Dreamweaver est non destructive. Cela signifie que vous pouvez modifier la version Web de limage sur votre page tout en prservant lintgrit de limage Photoshop dorigine.
version prliminaire
Vous pouvez galement mettre jour un objet dynamique sans slectionner limage Web en mode Cration. Le panneau des actifs vous permet de mettre jour tous les objets dynamiques, y compris les images susceptibles de ne pas pouvoir tre slectionnes dans la fentre de document (par exemple, les images darrire-plan CSS). Paramtres doptimisation dimage Pour les flux de production copier/coller et dobjets dynamiques, vous pouvez spcifier des paramtres doptimisation dans la bote de dialogue daperu de limage. Cette bote de dialogue vous permet de dfinir des lments tels que le format de fichier, la qualit de limage, etc. Si vous copiez une tranche ou un calque pour la premire fois ou que vous insrez un fichier Photoshop en tant quobjet dynamique pour la premire fois, Dreamweaver affiche cette bote de dialogue pour vous aider crer limage Web. Si vous copiez une mise jour dans une tranche ou un calque, Dreamweaver se souvient des paramtres dorigine et recre limage Web avec ces paramtres. De mme, lorsque vous mettez jour un objet dynamique laide de linspecteur Proprits, Dreamweaver reprend les paramtres que vous avez utiliss lorsque vous avez insr limage pour la premire fois. Vous pouvez tout moment modifier les paramtres dune image : il vous suffit de slectionner limage Web en mode Cration, puis de cliquer sur le bouton de modification des paramtres dimage dans linspecteur Proprits. Stockage des fichiers Photoshop Si vous avez insr une image Web et que vous navez pas enregistr le fichier Photoshop dorigine sur votre site Dreamweaver, Dreamweaver reconnat le chemin vers le fichier dorigine comme chemin de fichier local absolu (cest le cas pour les flux de production copier/coller et dobjets dynamiques). Par exemple, si le chemin vers votre site Dreamweaver est C:\Sites\monSite et que votre fichier Photoshop se trouve sous C:\Images\Photoshop, Dreamweaver ne reconnat pas le fichier dorigine comme faisant partie du site intitul monSite. Cela pose des problmes si vous voulez partager ce fichier Photoshop avec dautres personnes, car Dreamweaver considre uniquement le fichier comme disponible sur un disque dur local spcifique. Toutefois, si vous stockez le fichier Photoshop sur votre site, Dreamweaver tablit un chemin li au site vers le fichier. Les utilisateurs ayant accs au site pourront galement tablir le bon chemin vers le fichier, sous rserve que vous leur ayez aussi fourni le fichier dorigine tlcharger. Un didacticiel vido consacr au flux de production utilisant des objets dynamiques dans Photoshop et Dreamweaver est disponible ladresse suivante : www.adobe.com/go/lrvid4043_dw_fr.
Cration dun objet dynamique

Lorsque vous insrez une image Photoshop (fichier PSD) dans votre page, Dreamweaver cre un objet dynamique. Un objet dynamique est une image Web qui conserve une connexion en direct avec l'image Photoshop d'origine. Lorsque vous mettez jour l'image d'origine dans Photoshop, Dreamweaver vous permet de mettre jour l'image dans Dreamweaver par simple clic sur un bouton.
1 Dans Dreamweaver (mode Cration ou Code), placez le point d'insertion sur la page, l'endroit o vous voulez
insrer l'image.
2 Choisissez Insertion > Image.
Vous pouvez galement tirer le fichier PSD sur la page, partir du panneau Fichiers, si vous stockez vos fichiers Photoshop sur votre site Web. Dans ce cas, vous passerez l'tape suivante.
3 Dans la bote de dialogue Slectionnez la source de l'image, recherchez votre fichier d'image PSD Photoshop en
cliquant sur le bouton Parcourir et en accdant ce fichier.

4 Dans la bote de dialogue d'aperu de l'image qui s'affiche, ajustez les paramtres d'optimisation requis puis cliquez
sur OK.
version prliminaire
5 Enregistrez le fichier d'image Web un emplacement du dossier racine de votre site Web.
Dreamweaver cre l'objet dynamique sur la base des rglages d'optimisation slectionns, puis place une version Web de l'image sur votre page. L'objet dynamique conserve une connexion en direct l'image d'origine et vous signale quand les deux versions ne sont plus synchronises. Remarque : Si vous dcidez, par la suite, de modifier les rglages d'optimisation d'une image place sur vos pages, vous pouvez slectionner cette image, cliquer sur le bouton de modification des paramtres de l'image dans l'inspecteur Proprits, puis apporter les modifications dsires dans la bote de dialogue d'aperu d'image. Les modifications apportes dans la bote de dialogue d'aperu d'image sont appliques de faon non destructrice. Dreamweaver ne modifie jamais le fichier Photoshop d'origine et recre toujours l'image Web sur la base des donnes d'origine. Vous trouverez un didacticiel vido sur l'utilisation des objets dynamiques Photoshop l'adresse www.adobe.com/go/lrvid4043_dw_fr.
Voir aussi
Dreamweaver et l'accessibilit la page 706 Dfinition des options de la bote de dialogue d'aperu d'image la page 386
Mise jour dun objet dynamique

Si vous modifiez le fichier Photoshop auquel votre objet dynamique est li, Dreamweaver vous informe que l'image Web n'est plus synchronise avec l'original. Dans Dreamweaver, les objets dynamiques sont indiqus par la prsence d'une icne dans le coin suprieur gauche de l'image. Lorsque l'image Web dans Dreamweaver est synchronise avec le fichier Photoshop d'origine, les deux flches de l'icne sont vertes. Lorsque l'image Web n'est plus synchronise avec le fichier Photoshop d'origine, l'une des flches de l'icne devient rouge.
Pour mettre jour un objet intelligent l'aide du contenu actuel du fichier Photoshop d'origine, slectionnez cet
objet dans la fentre de document, puis cliquez sur le bouton Mettre jour depuis l'original de l'inspecteur Proprits. Remarque : Il n'est pas ncessaire que Photoshop soit install pour que vous puissiez procder la mise jour partir de Dreamweaver.
Mise jour de plusieurs objets dynamiques

Vous pouvez mettre jour plusieurs objets dynamiques simultanment l'aide du panneau Actifs. Le panneau Actifs vous permet galement de visualiser les objets dynamiques qu'il peut tre impossible de slectionne dans la fentre de document (par exemple une image d'arrire-plan CSS).
1 Dans le panneau Fichiers, cliquez sur l'onglet Actifs pour visualiser les actifs du site. 2 Assurez-vous que l'affichage Images est bien activ. S'il ne l'est pas, cliquez sur le bouton Images. 3 Slectionnez chaque actif d'image dans le panneau Actifs. Lorsque vous slectionnez un objet dynamique, son icne
est visible dans le coin suprieur gauche de l'image. Les images ordinaires ne comportent pas cette icne.
4 Pour chaque objet dynamique mettre jour, cliquez sur le nom de fichier l'aide du bouton droit de la souris, puis
choisissez Mettre jour depuis l'original. Vous pouvez galement slectionner plusieurs noms de fichier en cliquant dessus tout en maintenant la touche CTRL enfonce, de manire les mettre jour ensemble. Remarque : Il n'est pas ncessaire que Photoshop soit install pour que vous puissiez procder la mise jour partir de Dreamweaver.
version prliminaire
Redimensionnement dun objet dynamique

Vous pouvez redimensionner un objet dynamique dans la fentre de document comme vous le feriez pour n'importe quelle autre image.
1 Pour redimensionner l'image, slectionnez l'objet dynamique dans la fentre de document, puis tirez les poignes
de redimensionnement. Vous pouvez prserver les proportions de largeur et de hauteur en maintenant la touche MAJ enfonce tout en tirant les poignes.
2 Cliquez sur le bouton Mettre jour depuis l'original de l'inspecteur Proprits.
Lorsque vous mettez jour l'objet dynamique, l'image Web est de nouveau rendue, de manire non destructive, sur la base du contenu actuel du fichier d'origine ainsi que des paramtres d'optimisation d'origine.
Modification du fichier Photoshop d'origine dun objet dynamique

Lorsque vous avez cr un objet dynamique sur votre page Dreamweaver, vous pouvez modifier le fichier PSD d'origine dans Photoshop. Aprs avoir apport des modifications dans Photoshop, vous pouvez aisment mettre jour l'image Web dans Dreamweaver. Remarque : Veillez dfinir Photoshop comme diteur d'images externe principal.
1 Slectionnez l'objet dynamique dans la fentre de document. 2 Cliquez sur le bouton Modifier dans l'inspecteur Proprits. 3 Apportez les modifications requises dans Photoshop puis enregistrez le nouveau fichier PSD. 4 Dans Dreamweaver, slectionnez de nouveau l'objet dynamique puis cliquez sur le bouton Mettre jour depuis
l'original. Remarque : Si vous avez modifi la taille de l'image dans Photoshop, vous devez rinitialiser la taille de l'image Web dans Dreamweaver. Dreamweaver met uniquement jour l'objet dynamique sur la base du contenu du fichier Photoshop, et pas de sa taille. Pour synchroniser la taille d'une image Web avec celle du fichier Photoshop d'origine, cliquez dessus l'aide du bouton droit de la souris, puis choisissez Rtablir la taille selon original.
Voir aussi
Modification d'images dans Dreamweaver la page 249 Utilisation d'un diteur d'image externe la page 252 Dfinition des options de la bote de dialogue d'aperu d'image la page 386
Etat des objets dynamiques

Le tableau suivant numre les diffrents tats des objets dynamiques.
version prliminaire
Etat de l'objet dynamique Images synchronises
Description
Action conseille
L'image Web est synchronise avec le contenu actuel du fichier Aucun Photoshop d'origine. Les attributs de largeur et de hauteur dans le code HTML correspondent aux dimensions de l'image Web. Le fichier Photoshop d'origine a t modifi aprs la cration de l'image Web dans Dreamweaver. Utilisez le bouton Mettre jour depuis l'original de l'inspecteur Proprits pour synchroniser les deux images. Utilisez le bouton Mettre jour depuis l'original de l'inspecteur Proprits pour recrer l'image Web partir du fichier Photoshop d'origine. Dreamweaver utilise les valeurs de largeur et de hauteur HTML spcifies pour recrer l'image. Ne crez pas d'image Web dont les dimensions sont suprieures aux dimensions du fichier Photoshop d'origine.
Actif d'origine modifi
Les dimensions de l'image Web diffrent de la largeur et de la hauteur HTML slectionnes.
Les attributs de largeur et de hauteur dans le code HTML sont diffrents des dimensions de l'image Web que Dreamweaver a cre lors de l'insertion. Si les dimensions de l'image Web sont plus petites que les valeurs de largeur et de hauteur HTML slectionnes, l'image peut sembler pixellise.
Les dimensions de l'actif d'origine sont trop petites pour les valeurs de largeur et de hauteur HTML slectionnes. Actif d'origine introuvable
Les valeurs de largeur et de hauteur dans le code HTML sont suprieures aux dimensions du fichier Photoshop d'origine. Il se peut que l'image semble pixellise.
Dreamweaver ne trouve pas le fichier Photoshop d'origine spcifi dans la zone Original de l'inspecteur Proprits.
Corrigez le chemin d'accs au fichier dans la zone Original de l'inspecteur Proprits, ou dplacez le fichier Photoshop l'emplacement spcifi actuellement.
Copie et collage d'une slection partir de Photoshop

Vous pouvez copier une image Photoshop, ou une partie de celle-ci, et coller la slection dans votre page Dreamweaver sous la forme d'une image Web. Vous pouvez copier un calque ou un groupe de calques pour une partie slectionne de l'image, ou encore copier une tranche de l'image. Toutefois, lorsque vous effectuez cette opration, Dreamweaver ne cre pas d'objet dynamique. Remarque : Bien que la fonctionnalit Mettre jour depuis l'original ne soit pas disponible pour les images colles, vous pouvez ouvrir le fichier Photoshop d'origine et le modifier en slectionnant l'image colle, puis en cliquant sur le bouton Modifier de l'inspecteur Proprits.
1 Dans Photoshop, effectuez l'une des oprations suivantes :
Copiez la totalit ou une partie d'un calque. Pour ce faire, employez l'outil Rectangle de slection pour slectionner
la partie copier, puis choisissez Edition > Copier. Cette opration ne copie que le calque actif correspondant la zone slectionne dans le presse-papiers. Si vous avez dfini des effets bass sur des calques, ils ne sont pas copis.
Copiez et fusionnez plusieurs calques. Pour ce faire, employez l'outil Rectangle de slection pour slectionner la
partie copier, puis choisissez Edition > Copier avec fusion. Cette opration aplatit et copie tous les calques actifs et infrieurs de la zone slectionne dans le presse-papiers. Si des effets bass sur des calques sont associs l'un de ces calques, ils sont copis.
Copiez une tranche. Pour ce faire, slectionnez la tranche l'aide de l'outil Slection de tranche, puis choisissez
Edition > Copier. Cette opration aplatit et copie tous les calques actifs et infrieurs de la tranche dans le pressepapiers. Vous pouvez choisir Slection > Tout afin de slectionner rapidement une image entire en vue de la copier.
insrer l'image.
3 Choisissez Edition > Coller.
version prliminaire
4 Dans la bote de dialogue d'aperu de l'image, ajustez les paramtres d'optimisation requis puis cliquez sur OK. 5 Enregistrez le fichier d'image Web un emplacement du dossier racine de votre site Web.
Dreamweaver dfinit l'image conformment aux paramtres d'optimisation et en place une version Web sur votre page. Les informations relatives l'image, comme l'emplacement du fichier PSD d'origine, sont enregistres dans une Design Note, que vous ayez ou non activ les Design Notes pour votre site. La Design vous permet de revenir au fichier Photoshop d'origine, afin d'y apporter des modifications, partir de Dreamweaver. Vous trouverez un didacticiel consacr la copie et au collage entre diffrentes applications, dont Dreamweaver et Photoshop, l'adresse www.adobe.com/go/vid0193_fr.
Voir aussi
A propos de l'intgration de Photoshop, Flash et Fireworks la page 372 Dfinition des options de la bote de dialogue d'aperu d'image la page 386 Dreamweaver et l'accessibilit la page 706 Didacticiel sur la copie et le collage entre produits
Modification d'images colles

Aprs avoir copi des images de Photoshop dans vos pages Dreamweaver, vous pouvez modifier le fichier PSD d'origine dans Photoshop. Lorsque vous utilisez le flux d'activits copier/coller, Adobe recommande de toujours apporter vos modifications au fichier PSD d'origine (et non l'image Web), puis effectuer un nouveau copier/coller, de faon conserver une source unique. Remarque : Assurez-vous que Photoshop est bien dfini comme l'diteur principal pour le type de fichier modifier.
1 Dans Dreamweaver, slectionnez une image Web cre l'origine dans Photoshop, puis effectuez l'une des actions
suivantes :
Cliquez sur le bouton Modifier dans l'inspecteur Proprits de l'image. Appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) lorsque vous double-cliquez sur le fichier. Cliquez sur l'image avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce
(Macintosh), choisissez Modifier l'original avec dans le menu contextuel, puis choisissez Photoshop. Remarque : Ce principe suppose que Photoshop soit dfini comme diteur d'image externe principal pour les fichiers d'image PSD. Il peut galement tre utile de dfinir Photoshop comme diteur par dfaut pour les fichiers de type JPEG, GIF et PNG.
2 Modifiez le fichier dans Photoshop. 3 Revenez Dreamweaver et collez l'image ou la slection mise jour dans votre page.
A tout moment, si vous voulez optimiser nouveau l'image, vous pouvez la slectionner puis cliquer sur le bouton de modification des paramtres de l'image.
Voir aussi
Modification d'images dans Dreamweaver la page 249 Utilisation d'un diteur d'image externe la page 252 Dfinition des options de la bote de dialogue d'aperu d'image la page 386
version prliminaire
Dfinition des options de la bote de dialogue d'aperu d'image

Options de la bote de dialogue d'aperu d'image
Lorsque vous crez un objet dynamique ou que vous collez une slection depuis Photoshop, Dreamweaver affiche la bote de dialogue d'aperu d'image. Cette bote de dialogue s'affiche galement pour tout autre type d'image si vous la slectionnez puis que vous cliquez sur le bouton de modification des paramtres de l'image de l'inspecteur Proprits. Cette bote de dialogue permet de dfinir les paramtres d'images Web et d'en afficher un aperu, de faon dterminer la combinaison optimale de couleurs, de compression et de qualit. Une image Web est une image qui peut tre affiche par tous les navigateurs Web modernes et qui possde la mme apparence, quel que soit le systme ou le navigateur utilis. Lorsque vous insrez une image Photoshop, la bote de dialogue d'aperu de l'image vous permet d'ajuster divers paramtres pour optimiser la publication sur le Web. En rgle gnrale, ces paramtres permettent de parvenir un compromis entre qualit et taille de fichier.
La bote de dialogue d'aperu de l'image A. Onglet Options B. Onglet Fichier C. Panneau d'aperu
Remarque : Les paramtres que vous slectionnez n'influent que sur la version exporte du fichier d'image. Le fichier PSD (Photoshop) ou PNG (Fireworks) file d'origine reste toujours inchang. La bote de dialogue Aperu de l'image comprend trois sections :
L'onglet Options permet de dfinir le format de fichier utiliser et de dfinir des prfrences telles que la couleur. L'onglet Fichier permet de dfinir le facteur de mise l'chelle et la taille de fichier dsire pour l'image.
version prliminaire
Le panneau d'aperu permet de voir une version de l'image avec vos paramtres actuels.
L'onglet Options comprend de nombreuses options relatives l'image, qui varient selon le format de fichier choisi. Pour vous faciliter la tche, plusieurs jeux d'options pour images GIF et JPEG sont disponibles dans le menu Paramtres enregistrs. Options des images JPEG Vous pouvez optimiser une image JPEG en dfinissant ses paramtres de compression et de lissage. Il est impossible de modifier sa palette de couleurs.
Qualit La glissire permet d'augmenter ou de rduire la qualit de l'image. Une qualit plus leve produit un fichier de plus grande taille. Lissage Permet d'augmenter le degr de lissage en fonction de vos besoins. Une image de moins bonne qualit peut exiger l'emploi d'une valeur plus leve. Affichage progressif du navigateur Affiche l'image tout d'abord en basse rsolution, puis augmente progressivement
cette rsolution pendant le tlchargement. Cette option n'est pas active par dfaut.
Accentuer les bords des couleurs Permet d'obtenir une image de qualit plus leve. Matage Permet de dfinir l'arrire-plan de l'image. Vous pouvez conserver la transparence d'une image PNG 32 bpc (bits par canal) en cliquant sur l'icne de transparence de la bote de dialogue Matage. Vous pouvez galement utiliser cette bote de dialogue pour activer l'anticrnelage d'objets contours flous qui se trouvent directement au-dessus de la zone de document, en faisant correspondre la couleur du cache l'arrire-plan de la cible. Supprimer les couleurs non utilises Rduit la taille du fichier en supprimant les couleurs non utilises dans l'image. Optimiser la taille Permet de dfinir la taille de l'image, en kilo-octets. Dans le cas d'images 8 bpc, l'assistant tente de
parvenir la taille de fichier demande en ajustant le nombre de couleurs ou en appliquant un tramage. Options des images GIF et PNG Dans l'onglet Options, vous pouvez dfinir la valeur de transparence de couleurs spcifiques des images GIF et PNG 8 bpc, de manire ce que l'arrire-plan de la page Web soit visible travers les zones possdant ces couleurs. Pour ce faire, ajustez la palette de couleurs sur la gauche de l'onglet Options. Les images PNG en format 32 bpc contiennent automatiquement de la transparence, mme si l'option de transparence n'est pas visible pour ces fichiers dans le panneau Optimiser.
Palette Rgle sur Adaptive par dfaut. Slectionnez dans le menu l'un des paramtres de palette de couleurs proposs
si vous voulez utiliser un ensemble d'options prdfinis

Perte Rgle sur 0 par dfaut. Cette option n'est pas d'application pour les images PNG Tramer Dfinit approximativement les couleurs qui ne figurent pas dans la palette actuelle, en alternant les pixels de
couleurs similaires de faon donner l'apparence d'un mlange produisant la couleur manquante. Le tramage est particulirement utile lors de l'exportation d'images comportant des mlanges ou des dgrads complexes, ou en cas d'exportation d'images photographiques dans un format graphique 8 bpc tel que le format GIF. Cette option n'est pas active par dfaut. Remarque : Le tramage peut accrotre considrablement la taille du fichier.
Liste Nombre de couleurs Rgle sur 256 par dfaut. Le nombre de couleurs dpend du comportement actuel de la
palette. Par exemple, la palette Web 216 n'affiche que 216 couleurs.
Palette Couleur Les couleurs affiches varient selon le comportement de palette slectionn et le nombre maximal de
couleurs.
version prliminaire
Outils de palette Cliquez sur un pixel de la palette puis sur l'une de ces icnes pour modifier, ajouter ou supprimer
une couleur, ou pour rendre une couleur transparente, compatible Web ou verrouille.
Icnes de slection de la couleur de transparence Ces icnes permettent de slectionner, d'ajouter ou de supprimer
une couleur de la palette. Par exemple, si vous choisissez l'option de slection de la couleur de transparence, vous pouvez cliquer sur un pixel de la palette ou sur un point de couleur du panneau d'aperu pour le rendre transparent.
Menu Transparence Permet de choisir Transparence d'index, Transparence Alpha ou Pas de transparence. Un damier gris et blanc, sur les aperus du document, indique les zones transparentes. Pour voir comment vos modifications influent sur l'image, cliquez sur 2 vues ou 4 vues dans l'aperu de l'image, puis cliquez sur une image qui n'est pas l'originale.
Transparence d'index La transparence de type Index s'emploie lors de l'exportation d'images GIF contenant des zones transparentes. Avec la transparence d'index, vous pouvez choisir des couleurs prcises qui seront transparentes lors de l'exportation. La transparence d'index active ou dsactive les pixels possdant des valeurs de couleur spcifiques. Transparence Alpha La transparence de type Alpha s'emploie lors de l'exportation d'images PNG 8 bpc contenant des zones transparentes. La transparence alpha permet d'obtenir un dgrad de transparence et des pixels semiopaques.
Matage Permet de dfinir l'arrire-plan de l'image. Vous pouvez conserver la transparence d'une image PNG 32 bpc
en cliquant sur l'icne de transparence de la bote de dialogue Matage. Vous pouvez galement utiliser cette bote de dialogue pour activer l'anticrnelage d'objets contours flous qui se trouvent directement au-dessus de la zone de document, en faisant correspondre la couleur du cache l'arrire-plan de la cible.
Supprimer les couleurs non utilises Rduit la taille du fichier en supprimant les couleurs non utilises dans l'image. Affichage entrelac du navigateur Affiche une image entrelace tout d'abord en basse rsolution, puis passe
progressivement en pleine rsolution pendant le tlchargement. Cette option n'est pas active par dfaut.
Optimiser la taille Permet de dfinir la taille de l'image, en kilo-octets. Dans le cas d'images 8 bpc, l'assistant tente de
parvenir la taille de fichier demande en ajustant le nombre de couleurs ou en appliquant un tramage. Paramtres enregistrs Dreamweaver comporte plusieurs paramtres prdfinis. En fonction des paramtres enregistrs que vous choisissez, les options spcifiques un type de fichier, dcrites ci-dessus, peuvent varier.
GIF Web 216 Force toutes les couleurs tre compatibles Web. La palette de couleurs contient 216 couleurs au
maximum.
GIF Websnap 256 Convertit les couleurs non compatibles avec le Web dans la couleur compatible avec le Web la plus proche. La palette de couleurs contient 256 couleurs au maximum. GIF Websnap 128 Convertit les couleurs non compatibles avec le Web dans la couleur compatible avec le Web la plus proche. La palette de couleurs contient 128 couleurs au maximum. GIF Adaptive 256 Palette de couleurs qui ne contient que les couleurs rellement utilises dans le graphisme. La palette
de couleurs contient 256 couleurs au maximum.

JPEG - Qualit suprieure Dfinit la qualit sur 80 et le lissage sur 0, ce qui produit une image de haute qualit mais
dont le fichier est de plus grande taille.

JPEG - Fichier rduit Fixe la qualit 60 et le lissage 2, ce qui produit un fichier dont la taille vaut moins que la moiti d'un fichier JPEG de qualit suprieure, mais avec un niveau de qualit moins lev.
version prliminaire
(Facultatif) Modification des options d'chelle ou de zone d'exportation d'une image dans l'onglet Fichier
1 Slectionnez l'onglet Fichier. 2 Rduisez ou dveloppez l'image d'une des manires suivantes :
Dfinissez un pourcentage de mise l'chelle. Entrez des valeurs absolues, en pixels, pour la largeur ou la hauteur.
3 Activez l'option Contraindre pour prserver les proportions initiales de l'image lorsque vous la redimensionnez. 4 Modifiez la forme de l'image place en activant l'option Exporter zone et en effectuant l'une des actions suivantes :
Tirez la bordure pointille autour de l'aperu de l'image. Vous pouvez ramener l'image l'intrieur du cadre
d'affichage afin d'afficher les zones masques.
Entrez les coordonnes, en pixels, des limites de l'image.
(Facultatif) Prvisualisation et ajustement d'images dans le panneau Aperu

1 Dans la bote de dialogue d'aperu de l'image, activez l'option Aperu si vous voulez voir comment l'image se
prsente si vos paramtres lui sont appliqus. Pour amliorer les performances, il peut tre utile de dsactiver cette option.
2
Slectionnez dans le menu l'un des paramtres de palette de couleurs dans le menu Paramtres enregistrs si vous voulez utiliser un ensemble d'options prdfinis. dfiler afin de visualiser ses diffrentes parties.
3 Si votre image est plus grande que la zone d'aperu, utilisez le pointeur pour saisir l'image dans l'aperu et la faire 4 L'outil Recadrer permet de rduire la taille de l'image. Il peut tre ncessaire d'effectuer un zoom arrire pour
afficher l'image entire.

5 Choisissez une valeur dans le menu Zoom pour agrandir ou rduire l'affichage de l'image dans l'aperu. Vous
pouvez galement choisir l'outil Zoom, puis cliquer pour effectuer un zoom avant ou cliquer tout en maintenant enfonce la touche Alt (Windows) ou Option (Macintosh) pour effectuer un zoom arrire.
6 Vous pouvez consulter un aperu de deux ou quatre optimisations diffrentes en cliquant sur le bouton 2 vues ou
4 vues dans le bas du panneau d'aperu et en choisissant des palettes de couleur diffrentes pour chaque volet. Remarque : Les contrles d'animation de la bote de dialogue d'aperu d'image sont toujours dsactivs pour les images Photoshop.
Utilisation de Flash et Dreamweaver

Modification dun fichier SWF depuis Dreamweaver dans Flash
Si Flash et Dreamweaver sont installs, vous pouvez slectionner un fichier SWF dans un document Dreamweaver et utiliser Flash pour le modifier. Flash ne modifie pas directement le fichier SWF : il modifie le document source (fichier FLA), puis exporte nouveau le fichier SWF.
1 Dans Dreamweaver, ouvrez linspecteur des proprits (Fentre > Proprits). 2 Dans le document Dreamweaver, utilisez lune des mthodes suivantes :
Cliquez sur lespace rserv du fichier SWF pour le slectionner, puis sur Modifier dans linspecteur des proprits.
version prliminaire
Cliquez sur lespace rserv du fichier SWF avec le bouton droit de la souris (Windows) ou en maintenant la touche
Contrle enfonce (Macintosh) et choisissez Modifier avec Flash dans le menu contextuel. Dreamweaver passe sur Flash, qui tente son tour de localiser le fichier de programmation Flash (FLA) correspondant au fichier SWF slectionn. Si Flash ne peut pas localiser le fichier de programmation Flash, un message vous invite le faire. Remarque : si le fichier FLA ou le fichier SWF est verrouill, extrayez le fichier dans Dreamweaver.
3 Dans Flash, modifiez le fichier FLA. La fentre Document Flash indique que vous tes en train de modifier le fichier
partir de Dreamweaver.
4 Une fois les modifications effectues, cliquez sur Termin.
Flash met jour le fichier FLA, le rexporte en tant que fichier SWF, se ferme et retourne sur le document Dreamweaver. Remarque : pour mettre le fichier SWF jour et garder Flash ouvert, choisissez la commande Flash Fichier > Mettre jour dans Dreamweaver.
5 Pour afficher le fichier mis jour dans le document, cliquez sur le bouton Lecture dans linspecteur des proprits
de Dreamweaver ou appuyez sur la touche F12 pour afficher un aperu de votre page dans une fentre de navigateur.
Utilisation d'Adobe Bridge

A propos d'Adobe Bridge
Dreamweaver fournit une intgration en toute transparence avec Adobe Bridge, le navigateur de fichiers inter-platesformes fourni avec les composants d'Adobe Creative Suite 5. Adobe Bridge permet de retrouver, dorganiser et de parcourir les actifs dont vous avez besoin pour crer des contenus dimpression, Web, vido et mobiles. Vous pouvez dmarrer Adobe Bridge partir de tout composant de Creative Suite (sauf Acrobat 9) et l'employer pour accder des actifs de type Adobe et non Adobe. A partir d'Adobe Bridge, vous pouvez :
Prvisualiser, rechercher, trier et traiter des fichiers sans ouvrir d'applications spcifiques de Creative Suite. Vous
pouvez galement modifier des mtadonnes de fichiers et utiliser Adobe Bridge pour importer des fichiers dans vos documents, vos projets et vos compositions.
Importer et modifier des photos depuis la carte mmoire d'un appareil photo numrique, regrouper des photos
apparentes dans des piles, ainsi qu'ouvrir et modifier des fichiers RAW d'appareil photo sans devoir dmarrer Photoshop.
Excution de tches automatises, comme les commandes par lots

Synchroniser les paramtres de couleur entre les composants de la suite Creative Suite, auxquels est applique la gestion des couleurs.
Voir aussi
Creative Suite 5 - Bridge
version prliminaire
Dmarrage d'Adobe Bridge depuis Dreamweaver

Vous pouvez dmarrer Adobe Bridge partir de Dreamweaver afin de visualiser vos fichiers avant de les placer ou de les faire glisser dans votre page.
Vous pouvez dmarrer Adobe Bridge de diffrentes faons :
Choisissez Fichier > Parcourir dans Bridge. Cliquez sur l'icne Parcourir dans Bridge de la barre d'outils standard. Utilisez le raccourci clavier Parcourir dans Bridge : appuyez sur Ctrl+Alt+O (Windows) ou
Commande+Option+O (Macintosh). Adobe Bridge s'affiche en mode Gestionnaire de fichiers et prsente le contenu du dossier ouvert le plus rcemment dans Dreamweaver. Si Adobe Bridge tait dj ouvert, sa fentre devient la fentre active. Remarque : Si Adobe Bridge n'est pas install, Dreamweaver affiche un message d'erreur. Vous devez installer l'application avant de pouvoir utiliser ces fonctionnalits.
Placement de fichiers dans Dreamweaver depuis Adobe Bridge

Vous pouvez insrer des fichiers dans des pages Dreamweaver en les insrant ou en les dposant d'Adobe Bridge sur votre page. Pour que vous puissiez utiliser cette fonctionnalit, le document Dreamweaver dans lequel vous voulez insrer le fichier doit tre ouvert et se trouver en mode Cration. Vous pouvez insrer la plupart des types de fichiers dans vos pages, mais Dreamweaver les traite diffremment :
Si vous insrez une image Web (JPEG, GIF ou PNG)), Dreamweaver insre directement les fichiers d'image dans
la page et en place une copie dans le dossier des images par dfaut de votre site.
Si vous insrez un fichier PSD Photoshop, vous devez dfinir ses paramtres d'optimisation avant que
Dreamweaver puisse le placer sur votre page.
Si vous insrez un fichier non graphique, comme un fichier MP3, PDF ou un fichier d'un type inconnu,
Dreamweaver insre un lien vers le fichier source.
Si vous insrez un fichier HTML, Dreamweaver insre un lien vers le fichier source. (Windows uniquement) Si Microsoft Office est install et si vous insrez un fichier Microsoft Word ou Excel file,
vous devez indiquer si vous voulez insrer le fichier proprement dit ou un lien vers le fichier source. Si vous voulez insrer le fichier, vous pouvez indiquer quelle proportion de formatage vous voulez conserver.
Voir aussi
Cration dun objet dynamique la page 381 Utilisation de Photoshop et Dreamweaver la page 379
Placement d'un fichier Adobe Bridge sur votre page

insrer le fichier.
2 Dans Adobe Bridge, slectionnez le fichier puis choisissez Fichier > Placer dans Dreamweaver. 3 Si le fichier ne se trouve pas dans le dossier racine du site, vous tes invit l'y copier. 4 Si vous avez configur les prfrences (Edition > Prfrences > Accessibilit) de manire afficher les attributs lors
de l'insertion d'images, la bote de dialogue Attributs d'accessibilit aux balises d'image s'affiche quand vous insrez des images Web dans un format tel que JPEG ou GIF.
version prliminaire
Remarque : Si le point d'insertion se trouve en mode Code, Adobe Bridge dmarre normalement mais est incapable de placer le fichier. Vous pouvez uniquement placer des fichiers en mode Cration.
Insertion d'un fichier Bridge sur votre page par glisser-dplacer

insrer l'image.
2 Si Adobe Bridge n'est pas dj ouvert, dmarrez-le. 3 Dans Adobe Bridge, slectionnez un ou plusieurs fichiers et faites-les glisser dans votre page Dreamweaver. 4 Si un fichier ne se trouve pas dans le dossier racine du site, vous tes invit l'y copier. 5 Si vous avez configur les prfrences (Edition > Prfrences > Accessibilit) de manire afficher les attributs lors
de l'insertion d'images, la bote de dialogue Attributs d'accessibilit aux balises d'image s'affiche quand vous insrez des images Web dans un format tel que JPEG ou GIF. Remarque : Si le point d'insertion se trouve en mode Code, Adobe Bridge dmarre normalement mais est incapable de placer le fichier. Vous pouvez uniquement placer des fichiers en mode Cration.
Dmarrage de Dreamweaver depuis Adobe Bridge

Slectionnez un fichier dans Adobe Bridge et effectuez l'une des oprations suivantes :
Choisissez Fichier > Ouvrir avec > Adobe Dreamweaver. Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), puis
choisissez Ouvrir avec > Adobe Dreamweaver dans le menu contextuel. Remarque : Si Dreamweaver est dj ouvert, cette action rend le programme actif. Si Dreamweaver n'est pas ouvert, Adobe Bridge le dmarre en ignorant l'cran d'accueil.
Utilisation de Device Central

Utilisation d'Adobe Device Central avec Dreamweaver
Device Central permet aux concepteurs et dveloppeurs Web travaillant sur Dreamweaver de prvisualiser des fichiers Dreamweaver sur de nombreux priphriques mobiles. Device Central utilise la fonction Small-Screen Rendering d'Opera pour permettre aux concepteurs et aux dveloppeurs de voir quoi ressemblera leur page Web sur un petit cran. Les concepteurs et les dveloppeurs peuvent aussi tester le comportement de leurs fichiers en format CSS. Par exemple, un dveloppeur Web peut travailler pour un client qui veut que le site Web soit disponible sur les tlphones portables. Le dveloppeur Web peut utiliser Dreamweaver pour crer des pages prliminaires et Device Central pour tester l'affichage de ces pages sur diffrents priphriques.
Voir aussi
Aide d'Adobe Device Central
version prliminaire
Prvisualisation d'un contenu mobile avec Adobe Device Central et Dreamweaver

Pour prvisualiser des pages cres dans Dreamweaver sur diffrents priphriques mobiles, utilisez Device Central avec sa fonction intgre Small-Screen Rendering d'Opera. Des navigateurs diffrents sont installs sur les diffrents priphriques, mais la prvisualisation peut vous donner un bon aperu du contenu et de son comportement sur un priphrique donn.
1 Lancez Dreamweaver. 2 Ouverture d'un fichier. 3 Effectuez l'une des oprations suivantes :
Slectionnez Fichier > Aperu dans le navigateur > Device Central. Dans la barre d'outils de la fentre du document, cliquez et maintenez enfonc le bouton du navigateur
Aperu/dbogage dans le navigateur et slectionnez Aperu dans Device Central. Le fichier est affich dans l'onglet Emulateur de Device Central. Pour poursuivre le test, cliquez deux fois sur le nom d'un autre priphrique dans les listes Ensembles de priphriques ou Priphriques disponibles.
Conseils pour la cration de contenu Web Dreamweaver pour les priphriques mobiles
Device Central permet dafficher des pages Web cres dans Dreamweaver laide de la fonction Small-Screen Rendering dOpera. Cette prvisualisation peut vous donner une trs bonne ide de ce quoi ressemblera une page Web sur un priphrique mobile. Remarque : la fonction Small-Screen Rendering dOpera peut tre ou ne pas tre pr-installe pour les priphriques virtuels. Device Central donne simplement un aperu de ce quoi ressemblerait le contenu si la fonction Small-Screen Rendering dOpera tait installe. Suivez les conseils ci-dessous pour vous assurer que les pages Web cres dans Dreamweaver saffichent correctement sur les priphriques mobiles.
Si vous utilisez la structure Adobe Spry pour dvelopper un contenu, ajoutez la ligne HTML suivante vos pages
afin quelles saffichent en CSS et excutent les fonctions JavaScript correctement dans Device Central :
<link href="SpryAccordion.css" media="screen" rel="stylesheet" type="text/css"/> <link href="SpryAccordion2.css" media="handheld" rel="stylesheet" type="text/css"/>
La fonction Small-Screen Rendering dOpera ne prend pas en charge les cadres, les listes droulantes, les
soulignements, les caractres barrs, les lgendes, les clignotements ni les rectangles de slection. Essayez dviter de dessiner ces lments.
Faites que les pages Web pour priphriques mobiles restent simples. En particulier, utilisez un nombre limit de
polices, tailles et couleurs de polices.
La rduction de la taille des images et la rduction du nombre de couleurs permettent daugmenter les chances que
les images ressemblent ce qui tait prvu. Utilisez les formats CSS ou HTML pour spcifier la largeur et la hauteur exactes pour chaque image utilise. Indiquez du texte de remplacement pour toutes les images. Remarque : vous trouverez de trs nombreuses informations sur loptimisation des pages Web pour les priphriques mobiles sur le site Web du logiciel Opera. Pour dautres conseils et plus dinformations sur les techniques de cration de contenu pour des tlphones et des priphriques mobiles, visitez le site www.adobe.com/go/learn_cs_mobilewiki_fr.
version prliminaire
Adobe ConnectNow met votre disposition une salle de runion en ligne scurise et personnelle, o vous pouvez rencontrer dautres personnes et collaborer avec elles sur le Web en temps rel. Grce ConnectNow, vous pouvez partager et annoter votre cran dordinateur, envoyer des messages instantans et communiquer laide de la fonction audio intgre. Vous pouvez galement diffuser des vidos en temps rel, partager des fichiers, capturer des comptes rendus et contrler lordinateur dun participant. Vous pouvez accder ConnectNow directement partir de linterface de lapplication.
1 Choisissez la commande Fichier > Partager mon cran. 2 Dans la bote de dialogue Partager mon cran, entrez votre ID et votre mot de passe Adobe, puis cliquez sur le
bouton Se connecter. Si vous ne disposez pas dun ID et dun mot de passe Adobe, cliquez sur le lien de cration dun ID Adobe gratuit, situ en haut de la bote de dialogue.
3 Pour partager votre cran, cliquez sur le bouton Partager lcran de mon ordinateur, au centre de la fentre de
lapplication ConnectNow. Pour obtenir des instructions compltes sur lutilisation de ConnectNow, rendez-vous sur http://help.adobe.com/fr_FR/Acrobat.com/ConnectNow/index.html. Pour accder au didacticiel vido sur l'utilisation de ConnectNow, consultez la page Web Using ConnectNow to share your screen (7:12) (cette prsentation est effectue dans Dreamweaver).
Extension AIR pour Dreamweaver

Avec l'extension Adobe AIR pour Dreamweaver, vous pouvez transformer une application Web en application de bureau. Les utilisateurs peuvent ensuite excuter l'application sur leur bureau et ce, dans certains cas, sans connexion Internet. Cette extension est utilisable avec Dreamweaver CS3 et les versions ultrieures. Elle n'est pas compatible avec Dreamweaver 8. Remarque : Adobe AIR ne prend pas en charge Adobe InContext Editing. Si vous utilisez l'extension AIR pour Dreamweaver afin d'exporter une application contenant des rgions InContext Editing, la fonctionnalit InContext Editing ne fonctionnera pas.
Installation de l'extension AIR pour Dreamweaver

L'extension AIR pour Dreamweaver permet de crer des applications Internet enrichies utiliser sur le bureau. Par exemple, vous pouvez crer un ensemble de pages Web qui interagissent afin d'afficher des donnes XML. Vous pouvez utiliser l'extension Adobe AIR pour Dreamweaver pour regrouper cet ensemble de pages en une petite application qui peut tre installe sur l'ordinateur dun utilisateur. Lorsque l'utilisateur excute lapplication depuis son bureau, celle-ci se charge et affiche le site Web dans sa propre fentre dapplication, indpendamment dun navigateur. Lutilisateur peut ainsi consulter le site Web en local sur son ordinateur sans connexion Internet. Les pages dynamiques telles que les pages Adobe ColdFusion et PHP ne fonctionnent pas dans Adobe AIR. Le module d'excution ne fonctionne qu'avec HTML et JavaScript. Vous pouvez toutefois utiliser dans vos pages du code JavaScript afin d'appeler n'importe quel service web expos sur Internet (y compris les services gnrs par ColdFusion ou PHP) l'aide de mthodes Ajax telles que XMLHTTPRequest ou des API spcifiques Adobe AIR.
version prliminaire
Configuration requise
Pour utiliser l'extension Adobe AIR pour Dreamweaver, les logiciels suivants doivent tre installs et configurs correctement :
Dreamweaver CS3 ou une version ultrieure Adobe Extension Manager CS3 ou une version ultrieure Java JRE 1.4 ou une version ultrieure (ncessaire pour la cration du fichier Adobe). Java JRE est disponible
l'adresse http://java.sun.com/. Les exigences ci-avant ne s'appliquent qu' la cration et la prvisualisation d'applications Adobe AIR dans Dreamweaver. Pour installer et excuter une application Adobe AIR sur votre bureau, vous devez galement installer Adobe AIR sur l'ordinateur. Pour tlcharger le module d'excution, consultez le site http://www.adobe.com/fr/products/air/.
Installation de l'extension Adobe AIR pour Dreamweaver

1 Tlchargez l'extension Adobe AIR pour Dreamweaver ici : http://www.adobe.com/fr/products/air/tools/ajax/. 2 Double-cliquez sur le fichier portant l'extension .mxp dans l'Explorateur Windows (Windows) ou dans le Finder
(Macintosh).
3 Suivez les instructions qui s'affichent l'cran pour installer l'extension. 4 Quand vous avez termin, redmarrez Dreamweaver.
Pour plus d'informations sur l'utilisation de l'extension Adobe AIR pour Dreamweaver, voir Utilisation de l'extension AIR pour Dreamweaver.
Cration d'une application AIR dans Dreamweaver

Pour crer une application AIR base sur HTML dans Dreamweaver, slectionnez un site existant conditionner sous la forme d'une application AIR.
1 Assurez-vous que les pages Web que vous voulez conditionner sous la forme d'une application sont bien contenues
dans un site Dreamweaver dfini.

2 Dans Dreamweaver, ouvrez la page d'accueil de l'ensemble de pages conditionner. 3 Choisissez Site > Paramtres d'application AIR. 4 Compltez la bote de dialogue AIR - Paramtres de l'application et du programme d'installation, puis cliquez sur
Crer le fichier AIR. Pour plus d'informations, reportez-vous aux options de la bote de dialogue numres ci-dessous. La premire fois que vous crez un fichier Adobe AIR, Dreamweaver cre un fichier .xml d'application dans le dossier racine de votre site. Ce fichier fait office de manifeste et dfinit diffrentes proprits de l'application. Les options de la bote de dialogue AIR - Paramtres de l'application et du programme d'installation sont les suivantes :
Nom de fichier de l'application le nom utilis pour le fichier excutable de l'application. Par dfaut, l'extension
emploie le nom du site Dreamweaver comme nom de fichier. Vous pouvez modifier ce nom si vous le souhaitez. Le nom ne doit toutefois contenir que les caractres autoriss pour les noms de fichier ou de dossier. En d'autres termes, il ne peut contenir que des caractres ASCII et ne peut pas se terminer par un point. Ce paramtre est obligatoire.
version prliminaire
Nom de lapplication le nom qui saffiche sur les crans dinstallation lorsque des utilisateurs installent
lapplication. Lextension spcifie galement le nom du site Dreamweaver par dfaut. Ce paramtre n'est soumis aucune restrictions en termes de caractres, et il n'est pas obligatoire.
ID de lapplication identifie l'application l'aide d'un ID unique. Vous pouvez modifier l'ID par dfaut si vous le souhaitez. Nutilisez pas despaces ni de caractres spciaux dans lID. Les seuls caractres valides sont 0 9, a z, A Z, . (point) et - (tiret). Ce paramtre est obligatoire. Version spcifie le numro de version de votre application. Ce paramtre est obligatoire. Contenu initial dtermine la page de dmarrage de l'application. Cliquez sur le bouton Parcourir afin d'accder votre page de dmarrage et de la slectionner. Le fichier choisi doit se trouver dans le dossier racine du site. Ce paramtre est obligatoire. Description permet de spcifier une description de lapplication afficher lorsque lutilisateur linstalle. Copyright permet de spcifier un copyright qui saffiche dans la section indiquant des informations sur les
applications Adobe AIR installes sur Macintosh. Ces informations ne sont pas utilises pour les applications installes sous Windows.
Style de fentre spcifie le style de fentre (ou chrome) utiliser lorsque l'utilisateur excute l'application sur son
ordinateur. Le chrome systme entoure l'application avec le contrle de fentre standard du systme d'exploitation. Le chrome personnalis (opaque) supprime le chrome standard du systme et vous permet de crer votre propre chrome pour l'application. La cration du chrome personnalis s'effectue directement dans la page HTML conditionne. Le chrome personnalis (transparent) est similaire au chrome personnalis (opaque), mais il ajoute des possibilits de transparence aux bords de la page, ce qui permet de crer des fentres d'application non rectangulaires.
Taille de fentre spcifie les dimensions de la fentre dapplication lorsquelle souvre. Icne permet de slectionner des images personnalises pour les icnes de lapplication. Les images par dfaut sont des images Adobe AIR qui sont fournies avec l'extension. Pour utiliser des images personnalises, cliquez sur le bouton Slectionner les images d'icne. Ensuite, dans la bote de dialogue Images d'icne qui s'affiche, cliquez sur le dossier pour chaque taille d'icne, puis slectionnez le fichier d'image utiliser. AIR n'accepte que les fichiers PNG comme images d'icne d'application.
Remarque : les images personnalises slectionnes doivent rsider dans le site de lapplication et leurs chemins doivent tre relatifs la racine du site.
Types de fichier associs permet d'associer des types de fichiers votre application. Pour plus dinformations, reportez-vous aux sections suivantes. Mises jour de l'application dtermine si c'est le programme d'installation d'application Adobe AIR ou l'application qui effectue les mises jour vers les nouvelles versions des applications Adobe AIR. La case cocher est active par dfaut, ce qui force le programme d'installation d'application Adobe AIR procder aux mises jour. Si vous voulez que votre application se charge d'effectuer ses mises jour, dsactivez cette case cocher. Notez que si vous dsactivez la case cocher, vous devrez rdiger une application capable d'excuter des mises jour. Fichiers inclus spcifie les fichiers et les dossiers inclure dans votre application. Vous pouvez ajouter des
fichiers HTML et CSS, des fichiers dimage et des fichiers de bibliothque JavaScript. Cliquez sur le bouton Plus (+) pour ajouter des fichiers et sur l'icne reprsentant un dossier pour ajouter des dossiers. N'incluez pas certains fichiers, tels que _mmServerScripts, _notes, etc. Pour supprimer un fichier ou un dossier de la liste, slectionnez-le et cliquez sur le bouton Moins (-).
Signature numrique Cliquez sur Dfinir pour signer votre application laide dune signature numrique. Ce
paramtre est obligatoire. Pour plus dinformations, reportez-vous aux sections suivantes.
version prliminaire
Dossier du menu Programmes spcifie un sous-rpertoire, dans le menu Dmarrer de Windows, o le raccourci de l'application doit tre cr. (Pas d'application sur Macintosh.) Destination dtermine o le programme d'installation de la nouvelle application (fichier .air) doit tre enregistr.
Lemplacement par dfaut est la racine du site. Cliquez sur le bouton Parcourir pour choisir un autre emplacement. Le nom de fichier par dfaut est bas sur le nom du site, auquel est ajoute une extension .air. Ce paramtre est obligatoire. Voici un exemple de la bote de dialogue avec quelques options de base :
Signature dune application laide dun certificat numrique

Une signature numrique permet de garantir que le code dune application na pas t modifi ou corrompu depuis sa cration par lauteur du logiciel. Toutes les applications Adobe AIR ncessitent une signature numrique et ne peuvent tre installes sans celle-ci. Vous pouvez signer votre application l'aide d'un certificat numrique que vous avez achet, crer votre propre certificat, ou prparer un fichier Adobe AIRI (fichier intermdiaire d'Adobe AIR) que vous signerez plus tard.
1 Dans la bote de dialogue AIR - Paramtres de l'application et du programme d'installation, cliquez sur le bouton
Dfinir situ en regard de loption Signature numrique.

2 Dans la bote de dialogue Signature numrique, effectuez lune des oprations suivantes :
Pour signer une application avec un certificat numrique prachet, cliquez sur le bouton Parcourir,
slectionnez le certificat, entrez le mot de passe correspondant et cliquez sur OK.
Pour crer votre propre certificat numrique dauto-signature, cliquez sur le bouton Crer et remplissez la bote
de dialogue. Loption de type du certificat fait rfrence au niveau de scurit : 1024-RSA utilise une cl 1 024 bits (moins scurise) et 2048-RSA une cl 2 048 bits (plus scurise). Cliquez sur OK lorsque vous avez termin. Ensuite, entrez le mot de passe correspondant dans la bote de dialogue Signature numrique et cliquez sur OK.
version prliminaire
Choisissez Prparation d'un package AIR Intermdiaire (AIRI) signer ultrieurement, puis cliquez sur OK.
Cette option permet de crer une application AIR Intermdiaire (AIRI) sans signature numrique. Aucun utilisateur ne pourra toutefois installer l'application tant que vous n'aurez pas ajout de signature numrique.
A propos de l'horodatage
Lorsque vous signez une application Adobe AIR l'aide d'un certificat numrique, l'outil de conditionnement interroge le serveur d'une autorit d'horodatage afin d'obtenir une date et une heure de signature pouvant tre vrifies indpendamment. L'horodatage obtenu est incorpor au fichier AIR. Tant que le certificat de signature est valide au moment de la signature, le fichier AIR peut tre install, mme aprs l'expiration du certificat. Par contre, si aucun horodatage n'est obtenu, le fichier AIR ne pourra plus tre install lorsque le certificat aura expir ou sera rvoqu. Par dfaut, l'extension Adobe AIR pour Dreamweaver obtient un horodatage lors de la cration d'une application Adobe AIR. Vous pouvez toutefois dsactiver l'horodatage en dsactivant l'option Horodatage de la bote de dialogue Signature numrique. Ceci peut par exemple s'avrer ncessaire si aucun service d'horodatage n'est disponible. Adobe recommande que tout fichier AIR distribu publiquement contienne un horodatage. L'autorit d'horodatage utilise par dfaut par les outils de conditionnement d'Adobe AIR est Geotrust. Pour plus d'informations sur l'horodatage et les certificats numriques, voir Signature numrique d'un fichier AIR.
Modification des types de fichiers associs AIR

Vous pouvez associer diffrents types de fichiers une application Adobe AIR. Par exemple, si vous voulez que les fichiers possdant l'extension .avf s'ouvrent dans Adobe AIR lorsqu'un utilisateur double-clique dessus, vous pouvez ajouter l'extension .avf votre liste de types de fichiers associs.
1 Dans la bote de dialogue AIR - Paramtres de l'application et du programme d'installation, cliquez sur le bouton
Modifier la liste en regard de l'option Types de fichiers associs.

2 Dans la bote de dialogue Types de fichiers associs, effectuez lune des actions suivantes :
Slectionnez un type de fichier puis cliquez sur le bouton Moins (-) pour supprimer ce type de fichier. Cliquez sur le bouton Plus (+) pour ajouter un type de fichier.
Si vous cliquez sur le bouton Plus pour ajouter un type de fichier, la bote de dialogue Paramtres du type de fichier s'affiche. Compltez la bote de dialogue puis cliquez sur OK pour la fermer. Les options disponibles sont les suivantes :
Nom spcifie le nom du type de fichier qui s'affiche dans la liste Types de fichier associs. Cette option est
obligatoire et ne peut contenir que des caractres ASCII alphanumriques (a-z, A-Z, 0-9) et des points (par adobe.VideoFile). Le nom doit dbuter par une lettre. La longueur maximale est fixe 38 caractres.
Extension spcifie l'extension du type de fichier. N'incluez pas le point qui prcde l'extension. Cette option est
obligatoire et ne peut contenir que des caractres ASCII alphanumriques (a-z, A-Z, 0-9). La longueur maximale est fixe 38 caractres.
Description permet de spcifier une description facultative du type de fichier. Type de contenu spcifie le type MIME ou le type de mdia du fichier (par exemple text/html, image/gif, etc.). Emplacements des fichiers d'icne permet de slectionner des images personnalises pour les types de fichiers
associs. Les images par dfaut sont des images Adobe AIR qui sont fournies avec l'extension.
version prliminaire
Modification des paramtres d'une application AIR

Vous pouvez modifier les paramtres de votre application Adobe AIR tout moment.
Choisissez Site > Paramtres de l'application AIR, puis apportez les modifications dsires.
Aperu d'une page Web dans une application AIR

Vous pouvez prvisualiser dans Dreamweaver une page HTML de la faon dont elle se prsenterait dans une application Adobe AIR. La prvisualisation peut tre utile si vous voulez voir l'apparence qu'aurait votre page Web dans l'application sans devoir crer l'application tout entire.
Dans la barre d'outils Document, cliquez sur le bouton Aperu/Dbogage dans le navigateur, puis choisissez
Aperu dans AIR. Vous pouvez galement appuyer sur Ctrl+MAJ+F12 (Windows) ou sur Commande+MAJ+F12 (Macintosh).
Utilisation des conseils de code et de la coloration du code AIR

L'extension Adobe AIR pour Dreamweaver ajoute galement des conseils de code et la coloration du code aux lments de langage Adobe AIR dans le mode Code de Dreamweaver.
Ouvrez un fichier HTML ou JavaScript en mode Code, puis entrez du code Adobe AIR.
Remarque : Le mcanisme de conseil de code ne fonctionne que dans les balises <script> ou dans les fichiers .js. Pour plus d'informations sur les lments du langage Adobe AIR, consultez la documentation dans la suite de ce guide.
Accs la documentation d'Adobe AIR

L'extension Adobe AIR ajoute un lment au menu Aide de Dreamweaver qui permet d'accder au guide de dveloppement d'applications AIR l'aide de code HTML et d'Ajax.
Choisissez Aide > Aide d'Adobe AIR.
version prliminaire
400
Chapitre 14 : Cration et gestion des modles

L'utilisation d'un modle vous permet de crer de nombreuses pages bases sur une seule conception, ou de crer des zones spcifiques d'une page que les utilisateurs peuvent modifier. Adobe Dreamweaver CS5 contient de nombreux outils de cration et de gestion de modles.
A propos des modles Dreamweaver

Description des modles Dreamweaver
Un modle est un type spcial de document qui sert concevoir une mise en page fixe . Il est alors possible de crer des documents bass sur le modle, qui en hritent la mise en page. Lors de la conception d'un modle, vous spcifiez comme tant modifiable le contenu que les utilisateurs sont habilits modifier dans un document bas sur ce modle. Les crateurs de modles peuvent contrler les lments de la page que les utilisateurs des modles (rdacteurs, infographistes ou autres dveloppeurs) pourront modifier. Le crateur peut inclure plusieurs types de rgions de modle dans un document. Remarque : Les modles permettent de dfinir la conception d'une grande zone et de rutiliser des mises en page compltes. Si vous souhaitez rutiliser des lments de conception individuels, tels que les informations sur le copyright d'un site ou un logo, crez des lments de bibliothque. L'utilisation de modles vous permet de mettre jour plusieurs pages la fois. Tout document cr partir d'un modle reste associ ce modle (sauf si vous dcidez de dtacher le document ultrieurement). Lorsque vous modifiez un modle, la conception de tous les documents crs partir de ce modle est immdiatement mise jour. Remarque : Les modles de Dreamweaver sont diffrents des modles de certains autres logiciels Adobe Creative Suite en ce sens que les sections de page des modles Dreamweaver sont fixes (ou non modifiables) par dfaut.
Voir aussi
Gestion des actifs et des bibliothques la page 114 Cration d'un modle Dreamweaver la page 408
Types de rgions de modle

Lorsque vous enregistrez un document en tant que modle, la plupart des rgions d'un document sont verrouilles. En tant que crateur de modles, vous devez insrer des rgions ou paramtres modifiables dans un modle pour dfinir les rgions qui pourront tre modifies dans les documents bass sur ce modle. Lors de la cration du modle, vous pouvez apporter des modifications aux rgions modifiables et aux rgions verrouilles. En revanche, dans le cas d'un document cr partir d'un modle, seules les rgions modifiables peuvent subir des modifications ; les rgions verrouilles ne peuvent pas tre modifies. Il existe quatre types de rgions de modle :
Une rgion modifiable Une rgion non verrouille dans un document bas sur un modle. Ce type de section peut tre modifi par l'utilisateur. Le crateur du modle peut dfinir toute rgion du modle comme modifiable. Pour tre
version prliminaire
Cration et gestion des modles
fonctionnel, un modle doit contenir au moins une rgion modifiable. S'il n'en contient pas, les pages cres partir du modle ne pourront pas tre modifies.
Une rgion rpte Une section de la mise en forme du document qui est dfinie de faon ce que l'utilisateur du modle puisse ajouter ou supprimer des copies de la rgion rpte dans un document bas sur le modle en fonction de ses besoins. Par exemple, vous pouvez dfinir une ligne de tableau reproduire. En gnral, les sections rptes sont modifiables afin que l'utilisateur du modle puisse modifier le contenu de l'lment rpt, tandis que le crateur du modle contrle la conception elle-mme.
Deux types de rgions rptes peuvent tre insres dans un modle : rgion rpte et tableau rpt.
Une rgion facultative Une section d'un modle qui renferme un contenu, tel que du texte ou une image, pouvant
apparatre ou non dans un document. Sur la page base sur le modle, l'utilisateur du modle dcide gnralement si le contenu doit tre affich ou non.
Un attribut de balise modifiable Permet de dverrouiller un attribut de balise dans un modle afin que les utilisateurs puissent le modifier dans les pages cres partir de ce modle. Par exemple, vous pouvez verrouiller les images contenues dans le document tout en permettant l'utilisateur du modle d'en dfinir l'alignement gauche, droite ou au centre.
Voir aussi
Modification du contenu d'un document bas sur un modle la page 429 Cration de rgions modifiables la page 411 Cration de rgions rptes la page 413 Utilisation des rgions facultatives la page 415 Dfinition d'attributs de balise modifiables la page 418
Liens des modles

Lorsque vous crez un fichier de modle en enregistrant une page existante en tant que modle, le nouveau modle situ dans le dossier Templates, ainsi que tous les liens du fichier, sont mis jour de faon ce que leur chemin d'accs relatif au document soit correct. Par la suite, lorsque vous crez un nouveau document partir de ce modle et que vous enregistrez ce nouveau document, tous les liens relatifs au document sont de nouveau mis jour pour qu'ils continuent de pointer vers les fichiers adquats. En revanche, si vous insrez un nouveau lien relatif un document dans un fichier de modle, il est facile de faire une faute de frappe lorsque vous tapez le chemin dans la zone de texte du lien de l'inspecteur Proprits. Le chemin correct dans un fichier de modle est le chemin d'accs au document li partir du dossier Templates, et non pas partir du dossier du document bas sur le modle. Assurez-vous que les chemins d'accs utiliss pour les liens sont corrects en utilisant l'icne de dossier ou l'icne Pointer vers un fichier dans l'inspecteur Proprits lorsque vous crez des liens dans des modles. Prfrence de mise jour des liens dans Dreamweaver 8.01 Avant Dreamweaver 8 (c'est--dire, dans Dreamweaver version MX 2004 ou antrieure), Dreamweaver ne mettait pas jour les liens vers des fichiers situs dans le dossier Templates. Par exemple, si vous aviez un fichier intitul main.css dans le dossier Templates, et si vous aviez crit href="main.css" en tant que lien dans le fichier du modle, Dreamweaver ne mettait pas ce lien jour lors de la cration d'une page base sur ce modle.
version prliminaire
Certains utilisateurs ont tir parti de la faon dont Dreamweaver traitait les liens vers les fichiers du dossier Templates et ont utilis cette incohrence pour crer des liens qu'ils n'avaient pas l'intention de mettre jour lors de la cration de pages partir d'un modle. Par exemple, supposons que vous utilisez Dreamweaver MX 2004, et que vous possdez un site comprenant diffrents dossiers pour diffrentes applications : Dreamweaver, Flash et Photoshop. Chaque dossier de produit contient une page index.html base sur un modle, et une version unique du fichier main.css au mme niveau. Si le fichier du modle contient le lien relatif au document href="main.css" (un lien vers une version du fichier main.css situe dans le dossier Templates), et que vous souhaitez que vos pages index.html bases sur le modle contiennent galement ce lien tel qu'il a t rdig, vous pouvez crer des pages index.html bases sur le modle sans avoir vous proccuper que Dreamweaver mette jour ces liens particuliers. Lorsque Dreamweaver MX 2004 cre des pages index.html bases sur le modle, les liens href="main.css" (non mis jour) font rfrence aux fichiers main.css qui rsident dans les dossiers Dreamweaver, Flash et Photoshop, et non au fichier main.css qui rside dans le dossier Templates. Toutefois, dans Dreamweaver 8, ce comportement a t modifi de faon ce que tous les liens relatifs un document soient mis jour lors de la cration de pages bases sur un modle, quel que soit l'emplacement apparent des fichiers lis. Dans ce scnario, Dreamweaver examine le lien dans le fichier du modle (href="main.css") et cre dans la page base sur le modle un lien qui est relatif l'emplacement du nouveau document. Par exemple, si vous crez un document bas sur un modle un niveau au-dessus du dossier Templates, Dreamweaver rdigerait le lien dans le nouveau document de cette faon : href="Templates/main.css". Cette mise jour Dreamweaver 8 a rompu des liens dans les pages cres par les concepteurs qui avaient tir parti de l'ancienne pratique de Dreamweaver qui consistait ne pas mettre jour les liens vers des fichiers du dossier Templates. Dreamweaver 8.01 a ajout une prfrence qui vous permet d'activer ou de dsactiver le comportement de mise jour des liens relatifs. (Cette prfrence spciale s'applique uniquement aux liens vers des fichiers du dossier Templates, mais pas aux liens en gnral.) Le comportement par dfaut est de ne pas mettre jour ces liens (comme c'tait le cas dans Dreamweaver version MX 2004 et antrieure), mais si vous souhaitez que Dreamweaver mette jour ces types de liens lors de la cration de pages bases sur un modle, vous pouvez dslectionner la prfrence. Vous ne feriez cela que si, par exemple, vous aviez une page CSS (Cascading Style Sheets), main.css, dans votre dossier Templates, et que vous souhaitiez qu'un document bas sur un modle contienne le lien href="Templates/main.css". Cette pratique n'est toutefois pas recommande, car seuls les fichiers modles de Dreamweaver (DWT) doivent rsider dans le dossier Templates. Pour que Dreamweaver mette jour les chemins relatifs au document vers les fichiers non lis au modle dans le dossier Modles, slectionnez la catgorie Modles de la bote de dialogue Configuration du site (dans la section Paramtres avancs), puis dsactivez l'option Ne pas modifier les chemins relatifs aux documents. Pour plus d'informations, consultez la TechNote Dreamweaver sur le site Web d'Adobe l'adresse www.adobe.com/go/f55d8739_fr.
Voir aussi
Cration d'un lien vers des documents en utilisant l'icne Pointer vers un fichier la page 284 Chemins relatifs au document la page 281
version prliminaire
Scripts de serveur dans un modle et documents bass sur un modle

Certains scripts de serveur sont insrs au tout dbut ou la toute fin du document (avant la balise <html> ou aprs la balise </html>). Ces scripts requirent un traitement spcial dans les modles et les documents crs partir de modles. En rgle gnrale, lorsque vous apportez des modifications au code de script situ avant la balise <html> ou aprs la balise </html> dans un modle, les modifications ne sont pas rpercutes dans les documents crs partir du modle, ce qui peut entraner des erreurs de serveur lorsqu'un script de serveur situ dans le corps principal du modle dpend d'un script non mis jour. Une alerte vous avertit lorsque vous tentez de modifier des scripts situs avant la balise <html> ou aprs la balise </html> dans un modle. Pour viter ce problme, vous pouvez insrer le code suivant dans la section head du modle :

Lorsque vous insrez ce code dans un modle, toutes les modifications apportes aux scripts situs avant la balise <html> ou aprs la balise </html> sont rpercutes dans les documents crs partir du modle. Toutefois, vous ne pourrez plus modifier ces scripts dans les documents crs partir du modle. Vous pouvez donc soit modifier les scripts dans le modle, soit dans les documents crs partir du modle, mais pas dans les deux la fois.
Paramtres de modle
Les paramtres de modle indiquent les valeurs qui permettent de personnaliser le contenu des documents bass sur le modle. Ils permettent de dfinir des rgions facultatives, des attributs de balise modifiables ou des valeurs transmettre aux documents joints. Pour chaque paramtre, vous devez dfinir un nom, un type de donne et une valeur par dfaut. Vous devez attribuer un nom unique chaque paramtre. En outre, les paramtres sont sensibles la casse. Ils doivent possder l'un des cinq types de donnes admis : texte, boolen, couleur, URL ou nombre. Les paramtres de modle sont transmis au document sous forme de paramtres d'instance. En gnral, l'utilisateur d'un modle est autoris modifier les valeurs par dfaut du paramtre pour personnaliser le contenu du document bas sur le modle. Dans d'autres cas, le crateur du modle peut dterminer ce qui apparat dans le document, selon la valeur d'une expression de modle. Remarque : Vous trouverez un article pratique ce sujet l'adresse www.adobe.com/devnet/dreamweaver/articles/template_parameters.html.
Voir aussi
Utilisation des rgions facultatives la page 415 Dfinition d'attributs de balise modifiables la page 418
Expressions de modle
Les expressions de modle sont des instructions qui calculent ou valuent une valeur. Vous pouvez utiliser une expression pour enregistrer une valeur et l'afficher dans un document. Vous pouvez notamment rdiger une expression simple se limitant la valeur d'un paramtre, par exemple @@(Param)@@, ou bien une expression plus complexe permettant de calculer les valeurs qui feront alterner la couleur d'arrire-plan de la ligne d'un tableau, par exemple @@((_index & 1) ? red : blue)@@. Vous pouvez aussi rdiger des expressions de modle pour dfinir des conditions If et MultipleIf. Lorsqu'une instruction conditionnelle contient une expression, Dreamweaver value si celle-ci est true ou false. Si la condition est true, la rgion facultative s'affiche dans le document bas sur le modle ; si elle est false, elle n'apparat pas. Vous pouvez dfinir des expressions en mode Code ou dans la bote de dialogue de la rgion facultative que vous insrez.
version prliminaire
En mode Code, il existe deux faons de dfinir des expressions de modle : utilise le commentaire  commentaire ou @@(votre expression)@@. Lorsque vous insrez l'expression dans le code du modle, un marqueur d'expression apparat en mode Cration. Lorsque vous appliquez le modle, Dreamweaver value l'expression et affiche la valeur dans le document bas sur le modle.
Voir aussi
Langage d'expression de modle la page 404 La condition Multiple If dans le code du modle la page 405
Langage d'expression de modle

Le langage d'expression de modle utilise la syntaxe et les rgles de priorit de JavaScript, dont il constitue un sousensemble. Utilisez des oprateurs JavaScript pour rdiger des expressions, comme dans l'exemple suivant :
@@(firstName+lastName)@@
Les fonctions et oprateurs suivants sont pris en charge :
constantes numriques, constantes de chane (syntaxe avec guillemets doubles uniquement), constantes
boolennes (true ou false)
rfrence de variable (voir la liste des variables dfinies plus bas dans cette section) rfrence un champ (oprateur point ) oprateurs unaires : +, -, ~, ! oprateurs binaires : +, -, *, /, %, &, |, ^, &&, ||, <, <=, >, >=, ==, !=, <<, >> oprateurs conditionnels : ?: parenthses : ()
Les types de donnes suivants sont pris en charge : boolen, virgule flottante 64 bits IEEE, chane et objet. Les modles Dreamweaver ne prennent pas en charge l'utilisation des types JavaScript null et undefined . Ils ne permettent pas non plus de convertir implicitement les types scalaires en objet. Par consquent, l'expression "abc".length provoquera une erreur au lieu de fournir la valeur 3. Les seuls objets disponibles sont ceux qui sont dfinis par le modle d'objet d'expression. Les variables suivantes sont dfinies :
_document Contient les donnes de modle de niveau document avec un champ pour chaque paramtre du
modle.
_repeat Dfinie uniquement pour les expressions situes l'intrieur d'une rgion rpte. Fournit des
informations prdfinies sur la rgion

_index L'index numrique ( partir de 0) de l'entre en cours. _numRows Nombre total d'entres dans la rgion rpte. _isFirst Vrai (true) si l'entre en cours est la premire entre de la rgion rpte. _isLast Vrai (true) si l'entre en cours est la premire entre de la rgion rpte. _prevRecord L'objet _repeat de l'entre prcdente. L'accs cette proprit provoque une erreur si l'entre est la premire de la rgion. _nextRecord L'objet _repeat de l'entre suivante. L'accs cette proprit provoque une erreur si l'entre est la
dernire de la rgion.
version prliminaire
_parent Dans une rgion rpte imbrique, donne l'objet _repeat correspondant la rgion rpte extrieure.
L'accs cette proprit en dehors d'une rgion rpte imbrique provoque une erreur. Lors de l'valuation de l'expression, tous les champs de l'objet _document et _repeat sont implicitement disponibles. Par exemple, vous pouvez saisir title au lieu de _document.title pour accder au paramtre de titre du document. En cas de conflit de champ, les champs de l'objet _repeat ont la priorit sur les champs de l'objet _document. Vous n'avez donc pas rfrencer explicitement _document ou _repeat. Toutefois, il se peut que _document soit ncessaire l'intrieur d'une rgion rpte pour rfrencer les paramtres de document masqus par les paramtres de rgion rpte. Dans le cas de rgions rptes imbriques, seuls les champs de la rgion rpte intrieure sont disponibles implicitement. Les rgions extrieures doivent tre rfrences explicitement l'aide de _parent.
La condition Multiple If dans le code du modle

Vous pouvez rdiger des expressions de modle pour dfinir des conditions If et MultipleIf. Dans l'exemple suivant, un paramtre appel Dept est cr, une valeur initiale est dfinie et une condition MultipleIf est utilise pour dterminer le logo qui doit s'afficher. Voici un exemple de code pouvant tre insr dans la section head du modle :

L'instruction conditionnelle suivante vrifie la valeur attribue au paramtre Dept. Si la condition renvoie true ou la valeur correspondante, l'image adquate s'affiche.
  TemplateEndIfClause -->  TemplateEndIfClause-->  TemplateEndIfClause -->  TemplateEndIfClause -->  image--> <img src=".../sales.gif"> <!-<img src=".../support.gif"> <!-<img src=".../hr.gif"> <!-<img src=".../spacer.gif"> 
Vous pouvez utiliser les prfrences de couleur de code pour dfinir votre propre modle de coloration afin de pouvoir distinguer facilement les rgions du modle lorsque vous affichez un document en mode Code. Tous les lments compris entre ces commentaires sont modifiables dans les documents crs partir du modle. Le code source HTML d'une rgion modifiable peut se prsenter comme suit :
version prliminaire
<table width="75%" border="1" cellspacing="0" cellpadding="0"> <tr bgcolor="#333366"> <td>Name</td> <td><font color="#FFFFFF">Address</font></td> <td><font color="#FFFFFF">Telephone Number</font></td> </tr>  <tr> <td>Enter name</td> <td>Enter Address</td> <td>Enter Telephone</td> </tr>  </table>
Remarque : Lorsque vous modifiez le code du modle en mode Code, prenez garde ne pas modifier de balise de commentaire lie au modle et utilise par Dreamweaver.
Voir aussi
Personnalisation des prfrences de coloration de code d'un modle la page 433
Reconnaissance d'un document bas sur un modle en mode Cration

Dans un document bas sur un modle, les rgions modifiables s'affichent, dans le mode Cration de la fentre de document, entoures d'un cadre rectangulaire d'une couleur de surbrillance prdfinie. Un petit onglet indiquant le nom de la rgion s'affiche dans le coin suprieur gauche de chaque rgion. Outre les rgions modifiables, la page entire est entoure d'un cadre d'une couleur diffrente et un onglet dans le coin suprieur droit indique le nom du modle sur lequel le document est bas. Ce cadre a pour fonction de vous rappeler que le document a t cr partir d'un modle et que vous ne pouvez rien changer en dehors des rgions modifiables.
version prliminaire
Voir aussi
Dfinition des prfrences de surbrillance pour des rgions de modle la page 433
Reconnaissance d'un document bas sur un modle en mode Code

En mode Code, les rgions modifiables d'un document driv d'un modle s'affichent dans une couleur diffrente du code dans les rgions non modifiables. Vous pouvez modifier uniquement le code dans lesrgions ou les paramtres modifiables, mais vous ne pouvez pas effectuer de saisie dans les rgions verrouilles. Le contenu modifiable est repr dans le code HTML par les commentaires Dreamweaver suivants :

Tous les lments compris entre ces commentaires sont modifiables dans un document bas sur un modle. Le code source HTML d'une rgion modifiable peut se prsenter comme suit :
<body bgcolor="#FFFFFF" leftmargin="0"> <table width="75%" border="1" cellspacing="0" cellpadding="0"> <tr bgcolor="#333366"> <td>Name</td> <td><font color="#FFFFFF">Address</font></td> <td><font color="#FFFFFF">Telephone Number</font></td> </tr>  <tr> <td>Enter name</td> <td>Enter Address</td> <td>Enter Telephone</td> </tr>  </table> </body>
La couleur par dfaut du texte non modifiable est le gris. Vous pouvez associer des couleurs diffrentes aux rgions modifiables et aux rgions non modifiables l'aide de la bote de dialogue Prfrences.
Voir aussi
Personnalisation des prfrences de coloration de code d'un modle la page 433
Cration d'un modle Dreamweaver

A propos de la cration de modles Dreamweaver
Vous pouvez crer un modle partir d'un document existant (tel qu'un document HTML, Adobe ColdFusion ou Microsoft ASP) ou bien partir d'un nouveau document. Aprs avoir cr un modle, vous pouvez insrer des rgions de modle et dfinir des prfrences de modle pour la couleur du code et la couleur de surbrillance des rgions de modle. Si vous souhaitez enregistrer des informations supplmentaires sur un modle (par exemple, le nom de la personne qui l'a cr, la date de sa dernire modification ou les raisons justifiant certaines dcisions relatives la mise en forme), vous pouvez crer un fichier Design Notes pour le modle. Les documents bass sur un modle n'hritent pas des Design Notes associes ce dernier.
version prliminaire
Remarque : Les modles d'Adobe Dreamweaver sont diffrents des modles de certains autres produits Adobe Creative Suite en ce sens que les sections de page des modles Dreamweaver sont fixes (ou non modifiables) par dfaut. Vous trouverez un didacticiel consacr la cration de modles l'adresse www.adobe.com/go/vid0157_fr. Vous trouverez un didacticiel consacr l'utilisation de modles l'adresse www.adobe.com/go/vid0158_fr.
Voir aussi
Types de rgions de modle la page 400 Dfinition de prfrences de programmation pour les modles la page 433 Association de Design Notes un fichier la page 108 Didacticiel consacr la cration de modles Didacticiel consacr l'utilisation de modles
Cration d'un modle partir d'un document existant

Vous pouvez crer un modle partir d'un document existant.
1 Ouvrez le document que vous souhaitez enregistrer comme modle. 2 Effectuez l'une des oprations suivantes :
Choisissez Fichier > Enregistrer comme modle. Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Modles, puis choisissez Crer un modle
dans le menu. Remarque : Si vous n'avez pas slectionn Ne plus afficher ce message, un message s'affiche vous indiquant que le document que vous enregistrez ne comporte aucune rgion modifiable. Cliquez sur OK pour enregistrer le document comme modle, ou bien sur Annuler pour fermer la bote de dialogue sans crer de modle.
3 Slectionnez le site dans lequel vous souhaitez enregistrer le modle dans le menu droulant Site, puis tapez un nom
unique pour le modle dans la zone Enregistrer sous.

4 Cliquez sur Enregistrer. Dreamweaver enregistre le fichier de modle dans le dossier Templates du site, dans le
dossier racine local du site, avec l'extension .dwt. Si ce dossier n'existe pas, Dreamweaver le cre automatiquement au moment de l'enregistrement du nouveau modle. Remarque : Ne retirez pas vos modles du dossier Templates et placez dans celui-ci uniquement des fichiers de modles. Ne retirez pas non plus le dossier Templates de votre dossier racine local, car cela pourrait provoquer des erreurs dans les chemins d'accs des modles.
Voir aussi
Cration d'un modle vierge la page 64 Cration et ouverture de documents la page 61
Cration d'un modle l'aide du panneau Actifs

1 Dans le panneau Actifs (Fentre > Actifs), slectionnez la catgorie Modles sur le ct gauche du panneau 2 Cliquez sur le bouton Nouveau modle
en bas du panneau Actifs.
Un nouveau modle, sans nom, est ajout la liste de modles du panneau Actifs.
version prliminaire
3 Le modle tant toujours slectionn, donnez-lui un nom, puis appuyez sur Entre (Windows) ou Retour
(Macintosh). Dreamweaver cre un modle vierge dans le panneau Actifs et dans le dossier Modles.
A propos de la cration de modles pour les sites Contribute

A l'aide de Dreamweaver, vous pouvez crer des modles afin d'aider les utilisateurs d'Adobe Contribute crer de nouvelles pages, dfinir l'aspect gnral du site et mettre jour la mise en forme de plusieurs pages la fois. Lorsque vous crez un modle et que vous le chargez sur le serveur, il devient disponibles pour tous les utilisateurs se connectant votre site, sauf si vous avez limit l'utilisation du modle certains rles de Contribute. Si vous avez dfini des restrictions sur l'utilisation des modles, il peut s'avrer ncessaire d'ajouter chaque nouveau modle la liste des modles accessibles par un utilisateur de Contribute (voir Administration de Contribute). Remarque : Assurez-vous que le dossier racine de chaque site utilisateur de Contribute dfini est le mme que le dossier racine de votre dfinition de site dans Dreamweaver. Si un dossier racine de site utilisateur ne correspond pas au vtre, cet utilisateur ne pourra pas utiliser les modles. En complment des modles Dreamweaver, vous pouvez crer des modles non Dreamweaver l'aide des outils d'administration de Contribute. Un modle non-Dreamweaver est une page existante dont les utilisateurs de peuvent se servir pour crer de nouvelles pages. Cette page est similaire un modle Dreamweaver, l'exception que les pages bases sur ce modle ne se mettent pas jour lorsque vous apportez des modifications ce dernier. Les modles nonDreamweaver ne peuvent pas contenir d'lments de modles Dreamweaver, tels que des rgions modifiables ou verrouilles, des rptitions de rgions ou autres rgions facultatives. Lorsqu'un utilisateur de Contribute cre un nouveau document au sein d'un site contenant des modles Dreamweaver, Contribute tablit la liste des modles disponibles (Dreamweaver et non-Dreamweaver) dans la bote de dialogue Nouvelle page.
version prliminaire
Pour inclure des pages qui utilisent des codages autres que Latin-1 dans votre site, vous devrez peut-tre crer des modles (des modles Dreamweaver ou non-Dreamweaver). Les utilisateurs de Contribute peuvent modifier des pages qui utilisent n'importe quel codage, mais lorsqu'un utilisateur Contribute crer une page vierge, il utilise le codage Latin-1. Pour crer une page utilisant un codage diffrent, l'utilisateur de Contribute peut crer une copie d'une page existante base sur un encodage diffrent ou utiliser un modle bas sur un encodage diffrent. Cela dit, si le site utilisant d'autres codages ne contient pas de pages ni de modles, crez d'abord, dans Dreamweaver, une page ou un modle utilisant cet autre codage.
Cration d'un modle pour un site Contribute

1 Choisissez Site > Grer les sites. 2 Slectionnez un site et cliquez sur Modifier. 3 Dans la bote de dialogue Configuration du site, slectionnez la catgorie Contribute. 4 Si vous ne l'avez pas dj fait, vous devez activer la compatibilit avec Contribute.
Activez l'option Activer la compatibilit avec Contribute, puis tapez l'URL de la racine du site.
5 Cliquez sur le bouton Administrer le site dans Contribute. 6 Si ncessaire, tapez le mot de passe administrateur, puis cliquez sur OK. 7 Dans la catgorie Utilisateurs et rles, slectionnez un rle, puis cliquez sur le bouton Modifier les paramtres de
rle.
8 Slectionnez la catgorie Nouvelles pages, puis ajoutez les pages existantes la liste situe en dessous de l'option
Crer une page en copiant une page de la liste ci-dessous. Pour plus d'informations, voir Administration de Contribute.
9 Cliquez deux reprises sur OK pour fermer les botes de dialogue.
Voir aussi
Prparation d'un site utiliser avec Contribute la page 56
Cration de rgions modifiables

Insertion d'une rgion modifiable
Il est possible de crer des rgions modifiables dans un modle pour dfinir les zones qui pourront tre modifies dans les pages bases sur ce modle. Avant d'insrer une rgion modifiable, enregistrez le document actif comme modle. Remarque : Si vous insrez une rgion modifiable non pas dans un fichier de modle mais dans un document, une alerte vous informe que le document sera automatiquement enregistr comme modle. Vous pouvez placer une rgion modifiable n'importe o sur votre page. Toutefois, tenez compte des informations suivantes si vous rendez possible la modification d'un tableau ou d'un lment positionnement absolu :
Vous pouvez marquer un tableau entier ou une cellule de tableau individuelle comme modifiable, mais vous ne
pouvez pas marquer plusieurs cellules d'un tableau comme une seule et mme rgion modifiable. Si une balise <td> est slectionne, la rgion modifiable comprend la rgion situe autour de la cellule. Dans le cas contraire, la rgion modifiable concerne uniquement le contenu de la cellule.
version prliminaire
Les lments PA et leur contenu sont deux lments distincts. Rendre un lment PA modifiable permet de changer
la position de l'lment PA et son contenu, alors que rendre le contenu d'un lment PA modifiable permet uniquement de modifier le contenu de l'lment PA, et non sa position.
1 Dans la fentre de document, procdez de l'une des manires suivantes pour slectionner la rgion.
Slectionnez le texte ou le contenu que vous souhaitez dfinir comme rgion modifiable. Placez le point d'insertion l'endroit o vous voulez insrer une rgion modifiable.
2 Procdez de l'une des manires suivantes pour insrer une rgion modifiable :
Choisissez Insertion > Objets de modle > Rgion modifiable. Cliquez du bouton droit (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), puis choisissez
Modles > Nouvelle rgion modifiable.
Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Modles, puis choisissez Rgion modifiable
dans le menu.
3 Dans la zone Nom, tapez un nom unique pour la rgion. (vous ne pouvez pas utiliser le mme nom pour plusieurs
rgions modifiables dans un modle donn). Remarque : Ne tapez pas de caractres spciaux dans la zone Nom.
4 Cliquez sur OK. La rgion modifiable est entoure d'un cadre rectangulaire dans le modle, de la couleur de
surbrillance dfinie dans les prfrences. Dans le coin suprieur gauche de la rgion, un onglet indique le nom de la rgion. Si vous insrez une rgion modifiable vide dans le document, son nom s'affiche galement dans le cadre qui la dlimite.
Voir aussi
Cration d'un modle Dreamweaver la page 408 Dfinition des prfrences de surbrillance pour des rgions de modle la page 433
Slection de rgions modifiables

Vous pouvez facilement identifier et slectionner les diffrentes rgions prsentes dans un modle et dans un document bas sur un modle.
Slection d'une rgion modifiable dans la fentre de document

Cliquez sur l'onglet situ dans le coin suprieur gauche de la rgion modifiable.
Recherche d'une rgion modifiable et la slectionner dans le document

Choisissez Modifier > Modles, puis le nom de la rgion dans la liste figurant en bas de ce sous-menu.
Remarque : Les rgions modifiables situes l'intrieur d'une rgion rpte ne sont pas rpertories dans le menu. Pour localiser ces rgions, vous devez rechercher les cadres onglet qui figurent dans la fentre de document. La rgion modifiable est slectionne dans le document.
version prliminaire
Suppression d'une rgion modifiable

Si vous avez marqu une rgion de votre fichier de modle comme tant modifiable, vous pouvez la verrouiller (pour la rendre non modifiable dans les documents bass sur le modle) l'aide de la commande Supprimer le marqueur de modle.
1 Cliquez sur l'onglet situ dans le coin suprieur gauche de la rgion modifiable pour la slectionner. 2 Effectuez l'une des oprations suivantes :
Choisissez Modifier > Modles > Supprimer le marqueur de modle. Cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), puis
choisissez Modles > Supprimer le marqueur de modle. La rgion n'est alors plus modifiable.
Modification du nom d'une rgion modifiable

Aprs avoir insr une rgion modifiable, vous pouvez en modifier le nom.
1 Cliquez sur l'onglet situ dans le coin suprieur gauche de la rgion modifiable pour la slectionner. 2 Dans l'inspecteur Proprits (Fentre > Proprits), tapez un nouveau nom. 3 Appuyez sur la touche Entre (Windows) ou Retour (Macintosh).
Cration de rgions rptes

A propos des rgions rptes d'un modle
Une rgion rpte est une section d'un modle qui peut tre reproduite de nombreuses fois dans les pages bases sur ce modle. On utilise gnralement les rgions rptes dans le cas de tableaux. Toutefois, il est possible de dfinir des rgions rptes pour d'autres lments de page. Les rgions rptes permettent de dfinir la mise en page au moyen de la rptition de certains lments (article de catalogue et description, par exemple) ou de lignes, par exemple dans le cas d'une liste d'lments. Il existe deux objets de modle de rgion rpte : rgion rpte et tableau rpt.
Voir aussi
Types de rgions de modle la page 400
Cration d'une rgion rpte dans un modle

La rptition de rgions permet de copier une rgion spcifique autant de fois que ncessaire dans un modle. Une rgion rpte n'est pas ncessairement modifiable. Pour rendre modifiable le contenu d'une rgion rpte (par exemple, pour autoriser un utilisateur taper du texte dans une cellule de tableau dans un document bas sur un modle), vous devez insrer une rgion modifiable dans la rgion rpte.
Slectionnez le texte ou le contenu que vous souhaitez dfinir comme rgion rpte. Placez le point d'insertion dans le document l'endroit o vous souhaitez insrer la rgion rpte.
version prliminaire
Choisissez Insertion > Objets de modle > Rgion rpte. Cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), puis
choisissez Modles > Nouvelle rgion rpte.
Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Modles, puis choisissez Rgion rpte
dans le menu.
3 Dans la zone Nom, tapez un nom unique pour la rgion de modle. (Vous ne pouvez pas utiliser le mme nom pour
plusieurs rgions rptes dans un modle donn.) Remarque : N'insrez pas de caractres spciaux dans un nom de rgion.
4 Cliquez sur OK.
Voir aussi
Insertion d'une rgion modifiable la page 411
Insertion d'un tableau rpt

Vous pouvez crer une rgion modifiable (sous forme de tableau) lignes rptes l'aide d'un tableau rpt. Vous pouvez dfinir des attributs de tableau et indiquer les cellules du tableau pouvant tre modifies.
1 Placez le point d'insertion dans la fentre de document l'endroit o vous souhaitez insrer le tableau rpt. 2 Effectuez l'une des oprations suivantes :
Choisissez Insertion > Objets de modle > Tableau rpt. Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Modles, puis choisissez Tableau rpt
dans le menu.
3 Dfinissez les options suivantes, puis cliquez sur OK.
Lignes Dtermine le nombre de lignes du tableau. Colonnes Dtermine le nombre de colonnes du tableau. Marge intrieure des cellules Dtermine l'espace (en pixels) entre le contenu d'une cellule et son contour. Espacement des cellules Dtermine le nombre de pixels sparant les cellules contigus d'un tableau.
Lorsque vous n'affectez pas explicitement de valeur pour la marge intrieure et l'espacement des cellules, la plupart des navigateurs affichent le tableau comme si la marge intrieure des cellules tait dfinie sur 1 et l'espacement entre les cellules dfini sur 2. Pour tre sr que les navigateurs afficheront le tableau sans marge intrieure ni espacement, dfinissez Marge intrieure des cellules et Espacement entre les cellules sur 0.
Largeur Indique la largeur du tableau en pixels ou en pourcentage de la largeur de fentre du navigateur. Bordure Indique la largeur, en pixels, des bordures du tableau.
Si vous n'affectez pas explicitement de valeur pour la bordure, la plupart des navigateurs affichent le tableau avec une bordure dfinie sur 1. Pour vous assurer que les navigateurs affichent le tableau sans bordure, dfinissez Bordure sur 0. Pour visualiser les contours des cellules et du tableau lorsque la bordure est dfinie sur 0, slectionnez Affichage > Assistances visuelles > Bordures de tableau.
Rpter les lignes du tableau Permet d'indiquer les lignes du tableau inclure dans la rgion rpte. Ligne de dbut Permet d'indiquer le numro de la premire ligne inclure dans la rgion rpte.
version prliminaire
Ligne de fin Permet d'indiquer le numro de la premire ligne inclure dans la rgion rpte. Nom de rgion Permet d'attribuer un nom unique la rgion rpte.
Dfinition d'une couleur d'arrire-plan alterne dans un tableau rpt

Aprs avoir insr un tableau rpt dans un modle, vous pouvez le personnaliser en alternant la couleur d'arrireplan des lignes du tableau.
1 Dans la fentre de document, slectionnez une ligne du tableau rpt. 2 Cliquez sur le bouton Afficher le mode code ou Afficher les modes Code et Cration de la barre d'outils du
document pour accder au code de la ligne slectionne.

3 En mode Code, modifiez la balise <tr> pour qu'elle se prsente de la faon suivante :
<tr bgcolor="@@( _index & 1 ? '#FFFFFF' : '#CCCCCC' )@@">
Vous pouvez modifier les valeurs hexadcimales #FFFFFF et #CCCCCC si vous souhaitez utiliser d'autres couleurs.
4 Enregistrez le modle.
Exemple de code correspondant un tableau dont la couleur d'arrire-plan des lignes est alterne :
<table width="75%" border="1" cellspacing="0" cellpadding="0"> <tr><th>Name</th><th>Phone Number</th><th>Email Address</th></tr>  <tr bgcolor="@@(_index & 1 ? '#FFFFFF' : '#CCCCCC')@@"> <td>  name  </td> <td>  phone  </td> <td>  email  </td> </tr>  </table>
Utilisation des rgions facultatives

A propos des rgions facultatives d'un modle
Une rgion facultative est une rgion de modle que les utilisateurs peuvent programmer pour qu'elle s'affiche ou reste masque dans les documents bass sur ce modle. Utilisez une rgion facultative si vous souhaitez dfinir les conditions suivant lesquelles certains lments d'un document doivent s'afficher. Lorsque vous insrez une rgion facultative, vous pouvez associer des valeurs spcifiques un paramtre de modle ou bien dfinir des instructions conditionnelles (instructions If...else) pour des rgions de modle. Vous pouvez utiliser des oprateurs simples (true/false) ou bien dfinir des instructions conditionnelles et des expressions plus complexes. Vous pouvez modifier la rgion facultative ultrieurement si ncessaire. Suivant les conditions dfinies, l'utilisateur du modle peut modifier les paramtres dans les documents qu'il cre partir du modle et dcider si la rgion facultative doit s'afficher ou non. Vous pouvez lier plusieurs rgions facultatives un paramtre nomm. Dans les documents bass sur un modle, les rgions lies entre elles forment un groupe qui s'affiche ou reste masqu. Vous pouvez par exemple associer un article une image de remise (par exemple : Liquidation totale ! ) et le texte du prix de vente.
version prliminaire
Voir aussi
Modification des proprits d'un modle la page 429 Types de rgions de modle la page 400
Insertion d'une rgion facultative

Une rgion facultative permet de dcider si des lments doivent s'afficher ou tre masqus dans les documents bass sur un modle. Il existe quatre types de rgions facultatives :
Les rgions facultatives non modifiables, qui permettent l'utilisateur du modle d'afficher ou de masquer des
rgions spcialement marques sans lui permettre d'en modifier le contenu. L'onglet d'une rgion facultative est prcd du mot if dans un modle. Suivant la condition dfinie dans le modle, l'utilisateur du modle peut dcider si la rgion doit apparatre dans les pages qu'il cre.
Les rgions facultatives modifiables, qui permettent l'utilisateur du modle de dcider si la rgion doit tre affiche
ou masque et qui permettent aux utilisateurs d'en modifier le contenu. Par exemple, si la rgion facultative comprend une image ou du texte, l'utilisateur du modle peut dcider si le contenu doit s'afficher et peut y apporter des modifications si ncessaire. Une rgion modifiable est contrle par une instruction conditionnelle.
Voir aussi
Insertion d'une rgion facultative non modifiable

1 Dans la fentre de document, slectionnez l'lment que vous souhaitez dfinir comme rgion facultative. 2 Effectuez l'une des oprations suivantes :
Choisissez Insertion > Objets de modle > Rgion facultative. Cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) sur le
contenu slectionn, puis choisissez Modles > Nouvelle rgion facultative.
Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Modles, puis choisissez Rgion facultative
dans le menu.
3 Tapez un nom pour la rgion facultative, puis cliquez sur l'onglet Avanc si vous souhaitez dfinir des valeurs pour
la rgion facultative, puis cliquez sur OK.
Insertion d'une rgion facultative modifiable

1 Dans la fentre de document, placez le point d'insertion l o vous voulez insrer la rgion facultative.
Il est impossible d'envelopper une slection pour crer une rgion facultative modifiable. Insrez la rgion puis insrez le contenu dans la rgion.
Choisissez Insertion > Objets de modle > Rgion facultative modifiable. Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Modles, puis choisissez Rgion modifiable
facultative dans le menu.
3 Tapez un nom pour la rgion facultative, puis cliquez sur l'onglet Avanc si vous souhaitez dfinir des valeurs pour
la rgion facultative, puis cliquez sur OK.
version prliminaire
Dfinition de valeurs pour une rgion facultative

Il est possible de modifier les paramtres d'une rgion facultative insre dans un modle. Par exemple, vous pouvez indiquer si le paramtre par dfaut du contenu est d'tre affich ou non, de lier un paramtre une rgion facultative existante ou de modifier une expression de modle. Crez des paramtres de modle et dfinissez des instructions conditionnelles (instructions If...else) pour les rgions de modle. Vous pouvez utiliser des oprateurs simples (true/false) ou bien dfinir des instructions conditionnelles et des expressions plus complexes. Les options de l'onglet Avanc vous permettent de lier plusieurs rgions facultatives un paramtre nomm. Dans les documents bass sur un modle, les rgions lies entre elles forment un groupe qui s'affiche ou reste masqu. Vous pouvez par exemple associer un article une image de remise (par exemple : Liquidation totale ! ) et le texte du prix de vente. Vous pouvez galement utiliser l'onglet Avanc pour rdiger une expression de modle permettant de calculer une valeur lie la rgion facultative et d'afficher ou de masquer cette rgion selon la valeur obtenue.
En mode Cration, cliquez sur l'onglet correspondant la rgion facultative que vous souhaitez modifier. En mode Cration, placez le point d'insertion dans la rgion du modle, puis, dans le slecteur de balises situ en
bas de la fentre de document, slectionnez la balise de modle <mmtemplate:if>.
En mode Code, cliquez sur la balise de commentaire de la rgion que vous souhaitez modifier.
2 Dans l'inspecteur Proprits (Fentre > Proprits), cliquez sur le bouton Modifier. 3 Dans l'onglet Base, tapez un nom pour le paramtre dans la zone Nom. 4 Slectionnez Afficher par dfaut si vous souhaitez que la rgion slectionne s'affiche dans le document. Dsactivez-
la pour dfinir la valeur par dfaut sur false. Remarque : Pour attribuer une autre valeur au paramtre, recherchez le paramtre dans la section du document en mode Code et modifiez la valeur.
5 (Facultatif) Cliquez sur l'onglet Avanc, puis dfinissez les options suivantes :
Si vous voulez lier des paramtres de rgions facultatives, cliquez sur l'onglet Avanc, slectionnez Utiliser le
paramtre, puis choisissez dans le menu droulant le paramtre auquel vous voulez lier le contenu slectionn.
Si vous voulez rdiger une expression de modle afin de contrler l'affichage d'une rgion facultative, cliquez sur
l'onglet Avanc, slectionnez Saisir une expression, puis tapez l'expression dans la zone. Remarque : Dreamweaver insre automatiquement des guillemets doubles avant et aprs le texte saisi.
6 Cliquez sur OK.
Lorsque vous utilisez l'objet de modle Rgion facultative, Dreamweaver insre des commentaires de modle dans le code. Un paramtre de modle est dfini dans la section head, comme dans l'exemple suivant :

Du code semblable celui prsent ci-dessous s'affiche l'emplacement de la rgion facultative :

 <p><img src="/images/airfare_on.gif" width="85" height="22"> </p> 
Vous pouvez accder aux paramtres de modle et les modifier dans le document bas sur ce modle.
version prliminaire
Voir aussi
Modification des proprits d'un modle la page 429 Expressions de modle la page 403
Dfinition d'attributs de balise modifiables

Dfinition des attributs de balise modifiables dans un modle
Vous pouvez permettre aux utilisateurs d'un modle de modifier des attributs de balise spcifiques dans les documents crs partir de ce modle. Vous pouvez par exemple appliquer une couleur d'arrire-plan au modle tout en permettant aux utilisateurs du modle d'appliquer une couleur d'arrire-plan diffrente aux pages qu'ils crent. Les utilisateurs peuvent mettre jour uniquement les attributs que vous dfinissez comme tant modifiables. Vous pouvez dfinir plusieurs attributs modifiables sur une page afin que les utilisateurs du modle puissent modifier les attributs dans les documents bass sur ce modle. Les types de donnes suivants sont pris en charge : texte, valeur boolenne (true/false), couleur et URL. Lorsque vous crez un attribut de balise modifiable, un paramtre de modle est insr dans le code. L'attribut reoit une valeur initiale dans le modle. Tous les documents crs partir du modle hritent de ce paramtre. L'utilisateur du modle peut alors modifier le paramtre dans le document bas sur le modle. Remarque : Si vous crez un lien vers une feuille de style avec un attribut modifiable, alors les attributs de la feuille de style ne sont plus disponibles pour tre affichs ou modifis dans le fichier de modle.
1 Dans la fentre de document, slectionnez l'lment pour lequel vous souhaitez dfinir un attribut de balise
modifiable.
2 Slectionnez Modifier > Modles > Rendre l'attribut modifiable. 3 Dans la zone Attribut, entrez un nom ou slectionnez un attribut dans la bote de dialogue Attributs de balise
modifiables en procdant comme suit :
Si l'attribut que vous souhaitez rendre modifiable est rpertori dans le menu droulant Attribut, slectionnez-le. Si l'attribut que vous souhaitez rendre modifiable n'est pas rpertori dans le menu droulant Attribut, cliquez sur
le bouton Ajouter, tapez le nom de l'attribut que vous souhaitez ajouter dans la bote de dialogue qui s'affiche, puis cliquez sur OK.
4 Vrifiez que l'option Rendre l'attribut modifiable est active. 5 Tapez un nom unique pour l'attribut dans la zone Etiquette.
Pour retrouver plus facilement un attribut de balise modifiable spcifique, faites en sorte que l'tiquette indique clairement l'lment et l'attribut concern. Par exemple, vous pouvez attribuer l'tiquette logoSrc au code source modifiable d'une image ou bien l'tiquette bodyBgcolor la couleur d'arrire-plan modifiable d'une balise body.
6 Dans le menu droulant Type, slectionnez le type de valeur autorise pour cet attribut en dfinissant l'une des
options suivantes :
Si vous souhaitez que l'utilisateur puisse taper du texte pour dfinir l'attribut, slectionnez Texte. L'attribut align
peut par exemple tre dfini par du texte : l'utilisateur aura la possibilit de lui attribuer la valeur left, right ou center.
version prliminaire
Pour insrer un lien vers un lment, tel qu'un chemin d'accs un fichier vers une image, slectionnez URL.
Lorsque cette option est slectionne, le chemin utilis dans un lien est automatiquement mis jour. Lorsque l'utilisateur dplace l'image vers un nouveau dossier, la bote de dialogue de mise jour des liens s'affiche.
Si vous souhaitez que l'utilisateur puisse slectionner une valeur au moyen du slecteur de couleur, slectionnez
Couleur.
Pour permettre un utilisateur de choisir une valeur vraie ou fausse sur la page, choisissez Vrai/Faux. Si vous souhaitez que l'utilisateur d'un modle puisse taper une valeur numrique pour mettre jour un attribut (la
hauteur ou la largeur d'une image par exemple), slectionnez Nombre.
7 La zone Valeur par dfaut indique la valeur de l'attribut de balise slectionn dans le modle. Tapez une autre valeur
dans cette zone si vous souhaitez modifier la valeur initiale du paramtre dans les documents bass sur le modle.
8 (Facultatif) Si vous souhaitez apporter des modifications un autre attribut de la balise slectionne, slectionnez-
le, puis compltez-en la bote de dialogue.

9 Cliquez sur OK.
Voir aussi
Conversion d'un attribut de balise modifiable en attribut non modifiable

Une balise marque comme modifiable peut tre marque comme non modifiable.
1 Dans le modle, cliquez sur l'lment associ l'attribut modifiable, ou bien slectionnez la balise au moyen du
slecteur de balises.
2 Slectionnez Modifier > Modles > Rendre l'attribut modifiable. 3 Dans le menu droulant Attributs, slectionnez l'attribut que vous souhaitez affecter. 4 Dslectionnez Rendre l'attribut modifiable, puis cliquez sur OK. 5 Mettez jour les documents bass sur le modle.
Cration d'un modle imbriqu

A propos des modles imbriqus
Un modle imbriqu est un modle dont la conception et les rgions modifiables sont bases sur un autre modle. Les modles imbriqus sont utiles pour grer le contenu de certaines pages d'un site qui ont de nombreux lments de prsentation en commun avec les autres pages du site mais qui prsentent malgr tout quelques diffrences. Par exemple, vous pouvez crer un modle de base dfinissant la conception de zones plus larges, qui sera utilis par une grande partie des responsables du contenu du site, et crer un modle imbriqu dfinissant de nouvelles rgions modifiables dans les pages d'une section spcifique du site. Les rgions modifiables d'un modle de base sont transmises aux modles imbriqus et restent modifiables dans les pages cres partir d'un modle imbriqu, moins que de nouvelles rgions de modle ne soient insres dans ces rgions. Les modifications apportes un modle de base sont automatiquement rpercutes dans les modles bass sur ce modle de base et dans tous les documents bass sur les modles principal et imbriqu.
version prliminaire
Dans l'exemple suivant, le modle trioHome contient trois rgions modifiables, nommes Body, NavBar et Footer :
version prliminaire
Pour crer un modle imbriqu, nous avons cr un document partir du modle, puis nous avons enregistr ce document comme modle que nous avons appel TrioNested. Dans le modle imbriqu, nous avons ajout deux rgions modifiables et du contenu dans la rgion nomme Body.
Lorsque vous insrez une nouvelle rgion modifiable dans une rgion modifiable transmise au modle imbriqu, la couleur de surbrillance de la rgion modifiable devient orange. Le contenu que vous ajoutez en dehors de la rgion modifiable, par exemple l'image insre dans editableColumn, n'est plus modifiable dans les documents crs partir du modle imbriqu. Qu'elles aient t ajoutes au modle imbriqu ou qu'elles soient hrites du modle de base, les rgions modifiables entoures d'un cadre de surbrillance bleu restent modifiables dans les documents qui ont t crs partir du modle imbriqu. Les rgions de modle qui ne contiennent aucune rgion modifiable sont transmises sous la forme de rgions modifiables aux documents bass sur le modle.
Cration d'un modle imbriqu

Les modles imbriqus permettent de crer des variantes du modle de base. Vous pouvez crer une srie de modles imbriqus en chane pour obtenir une mise en forme chaque fois plus prcise. Par dfaut, toutes les rgions modifiables du modle de base sont transmises, via le modle imbriqu, aux documents bass sur ce modle imbriqu. En d'autres termes, si vous dfinissez une rgion modifiable dans un modle de base, puis que vous crez un modle imbriqu, la rgion modifiable apparatra dans les documents bass sur le modle imbriqu, condition que vous n'ayez insr aucune nouvelle rgion de modle dans cette rgion du modle imbriqu.
version prliminaire
Remarque : Vous pouvez insrer un marqueur de modle l'intrieur d'une rgion modifiable afin qu'elle ne soit pas modifiable dans les documents bass sur le modle imbriqu. Ces rgions ont un cadre orange au lieu de bleu.
1 Crez un document partir du modle sur lequel vous souhaitez baser le modle imbriqu en procdant de l'une
des faons suivantes :
Dans la catgorie Modles du panneau Actifs, cliquez du bouton droit de la souris (Windows) ou en maintenant la
touche Ctrl enfonce (Macintosh) sur le modle partir duquel vous souhaitez crer un document, puis choisissez Nouveau partir d'un modle dans le menu contextuel.
Choisissez Fichier > Nouveau. Dans la bote de dialogue Nouveau document, slectionnez la catgorie Page issue
d'un modle, puis slectionnez le site qui contient le modle que vous souhaitez utiliser. Dans la liste Modles, double-cliquez sur le modle pour crer un document.
2 Slectionnez Fichier > Enregistrer comme modle pour enregistrer le nouveau document en tant que modle
imbriqu :
3 Tapez un nom dans la zone Enregistrer sous, puis cliquez sur OK.
Voir aussi
Scripts de serveur dans un modle et documents bass sur un modle la page 403
Empcher qu'une rgion modifiable d'un modle imbriqu devienne non modifiable dans les documents bass sur ce modle
Dans les modles imbriqus, les rgions modifiables qui seront transmises aux documents sont entoures d'un cadre bleu. Vous pouvez insrer un marqueur de modle l'intrieur d'une rgion modifiable afin qu'elle ne soit pas modifiable dans les documents bass sur le modle imbriqu. Ces rgions ont un cadre orange au lieu de bleu.
1 En mode Code, localisez la rgion modifiable que vous souhaitez rendre non modifiable dans les documents bass
sur ce modle. Les rgions modifiables sont dfinies par les balises de commentaire du modle.
2 Ajoutez le code suivant au code de la rgion modifiable :
@@("")@@
Ce modle de code peut tre plac n'importe o l'intrieur des balises <!-InstanceEndEditable --> qui entourent la rgion modifiable. Par exemple :  <p>@@("")@@ Editable 1 </p> 
Pour plus d'informations, consultez la TechNote 16416 sur le site Web d'Adobe l'adresse www.adobe.com/go/16416_fr.
Modification, mise jour et suppression de modles

A propos de la modification et de la mise jour des modles
Lorsque vous apportez des modifications un modle et que vous l'enregistrez, tous les documents bass sur ce modle sont mis jour. Vous pouvez galement mettre jour manuellement un document bas sur un modle ou l'ensemble d'un site si ncessaire.
version prliminaire
Remarque : Pour modifier un modle pour un site Contribute, vous devez utiliser Dreamweaver. Il est impossible de modifier des modles dans Contribute. Utilisez la catgorie Modles du panneau Actifs pour grer les modles existants. Elle permet entre autres de renommer ou supprimer des fichiers de modle. Le panneau Actifs permet d'effectuer les tches de gestion des modles suivantes :
Cration d'un modle Modification et mise jour de modles Application ou suppression d'un modle depuis un document existant
Dreamweaver vrifie la syntaxe du modle lorsque vous enregistrez un modle, mais il est conseill de vrifier la syntaxe du modle manuellement mesure que vous le modifiez.
Voir aussi
Cration d'un modle Dreamweaver la page 408 Vrification de la syntaxe du modle la page 432 Application ou suppression d'un modle depuis un document existant la page 427
Ouverture d'un modle modifier

Vous pouvez ouvrir un fichier de modle directement pour le modifier ou bien ouvrir un document bas sur un modle, puis ouvrir le modle joint pour le modifier. Lorsque vous apportez des modifications un modle, Dreamweaver vous invite mettre jour les documents bass sur ce modle. Remarque : Vous pouvez aussi manuellement mettre jour les documents selon les modifications apportes au modle, si ncessaire.
Voir aussi
Vrification de la syntaxe du modle la page 432
Ouverture et modification d'un fichier de modle

1 Dans le panneau Actifs (Fentre > Actifs), slectionnez la catgorie Modles sur le ct gauche du panneau
Le panneau Actifs contient tous les modles disponibles pour votre site et affiche un aperu du modle slectionn.
2 Dans la liste des modles disponibles, procdez de l'une des manires suivantes :
Double-cliquez sur le nom du modle modifier. Slectionnez un modle modifier, puis cliquez sur le bouton Modifier
3 Modifiez le contenu du modle.
en bas du panneau Actifs.
Pour modifier les proprits de page du modle, choisissez Modifier > Proprits de la page (les documents bass sur un modle hritent des proprits de page associes ce dernier).
4 Enregistrez le modle. Un message s'affiche, vous invitant mettre jour les pages bases sur le modle. 5 Cliquez sur Mettre jour pour mettre jour tous les documents bass sur le modle modifi ; cliquez sur Ne pas
mettre jour si vous ne souhaitez pas mettre jour les documents bass sur le modle modifi. Dreamweaver affiche un journal indiquant les fichiers mis jour.
version prliminaire
Ouverture et modification du modle joint au document en cours

1 Ouvrez le document bas sur le modle dans la fentre de document. 2 Effectuez l'une des oprations suivantes :
Choisissez Modifier > Modles > Ouvrir le modle joint. Cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), puis
choisissez Modles > Ouvrir le modle joint.
3 Modifiez le contenu du modle.
Pour modifier les proprits de page du modle, choisissez Modifier > Proprits de la page (les documents bass sur un modle hritent des proprits de page associes ce dernier).
4 Enregistrez le modle. Un message s'affiche, vous invitant mettre jour les pages bases sur le modle. 5 Cliquez sur Mettre jour pour mettre jour tous les documents bass sur le modle modifi ; cliquez sur Ne pas
mettre jour si vous ne souhaitez pas mettre jour les documents bass sur le modle modifi. Dreamweaver affiche un journal indiquant les fichiers mis jour.
Modification du nom d'un modle

1 Dans le panneau Actifs (Fentre > Actifs), slectionnez la catgorie Modles sur le ct gauche du panneau 2 Cliquez sur le nom du modle pour le slectionner. 3 Cliquez une nouvelle fois sur le nom de sorte que le texte soit modifiable, puis tapez le nouveau nom.
Cette mthode fonctionne de la mme faon que celle utilise dans l'Explorateur Windows ou dans le Finder (Macintosh). Comme avec l'Explorateur Windows et le Finder, vous devez attendre un bref instant entre les deux clics. Ne double-cliquez pas sur le nom, car cela ouvrirait le modle pour modification.
4 Cliquez sur une autre zone du panneau Actifs ou appuyez sur Entre (Windows) ou Retour (Macintosh) pour
appliquer la modification. Une alerte vous demande si vous voulez mettre jour les documents crs partir de ce modle.
5 Pour mettre jour tous les documents du site crs partir de ce modle, cliquez sur Mettre jour. Cliquez sur Ne
pas mettre jour si vous ne souhaitez pas mettre jour les documents bass sur ce modle.
Voir aussi
Cration d'un modle Dreamweaver la page 408 Application ou suppression d'un modle depuis un document existant la page 427
Modification de la description d'un modle

La description du modle s'affiche dans la bote de dialogue Nouveau document lorsque vous crez une page partir d'un modle existant.
1 Choisissez Modifier > Modles > Description. 2 Dans la bote de dialogue Description du modle, modifiez la description, puis cliquez sur OK.
Voir aussi
Cration d'un modle Dreamweaver la page 408
version prliminaire
Mise jour manuelle des documents bass sur des modles

Lorsque vous modifiez un modle, Dreamweaver vous invite mettre jour les documents bass sur ce modle, mais vous pouvez mettre jour manuellement le document en cours ou le site tout entier si ncessaire. La mise jour manuelle des documents bass sur le modle a le mme effet qu'une nouvelle application du modle.
Application des modifications apportes au modle au document en cours

1 Ouvrez le document dans la fentre de document. 2 Choisissez Modifier > Modles > Mettre jour la page en cours.
Dreamweaver applique au document les modifications apportes au modle.
Mise jour du site entier ou de tous les documents utilisant le modle spcifi
Vous pouvez mettre jour toutes les pages du site ou bien uniquement les pages bases sur un modle spcifique.
1 Choisissez Modifier > Modles > Mettre jour les pages. 2 Dans le menu Regarder dans, ralisez une des oprations suivantes :
Pour mettre jour tous les fichiers du site slectionn en fonction de leurs modles correspondants, choisissez Site
entier, puis slectionnez le nom du site dans le menu droulant adjacent.
Pour mettre jour les fichiers bass sur un modle spcifique, choisissez Fichiers utilisant, puis slectionnez le nom
du modle dans le menu droulant adjacent.
3 Dans la rubrique Mettre jour, assurez-vous que l'option Modles est active. 4 Si vous ne souhaitez pas voir de journal des fichiers mis jour par Dreamweaver, dsactivez l'option Afficher le
journal ; sinon, laissez-la active.

5 Cliquez sur Dmarrer pour mettre jour les fichiers comme indiqu. Si vous avez slectionn l'option Afficher le
journal, Dreamweaver affiche des informations sur les fichiers qu'il essaie de mettre jour et prcise si la mise jour a russi.
6 Cliquez sur Fermer.
Mise jour des modles pour un site Contribute

Les utilisateurs de Contribute ne peuvent pas modifier de modles Dreamweaver. Vous pouvez cependant utiliser Dreamweaver pour apporter des modifications dans un modle de site Contribute. Tenez compte des facteurs suivants lors de la mise jour de modles dans un site Contribute :
Contribute rcupre les nouveaux modles et les modles modifis depuis le site uniquement au lancement de
Contribute et lorsqu'un utilisateur de Contribute modifie ses informations de connexion. Si vous apportez des modifications un modle lorsqu'un utilisateur de Contribute modifie un fichier bas sur ce modle, l'utilisateur ne peut pas visualiser vos modifications tant qu'il ne relance pas Contribute.
Si vous supprimez une rgion modifiable d'un modle lorsqu'un utilisateur de Contribute est en train de modifier
une page base sur ce modle, le contenu de cette rgion modifiable peut troubler cet utilisateur. Pour mettre jour un modle dans un site Contribute, excutez les tapes suivantes.
1 Ouvrez le modle Contribute dansDreamweaver, modifiez le formulaire et enregistrez le document. Pour obtenir
des instructions, voir Ouverture d'un modle modifier la page 423.

2 Demandez tous les utilisateurs Contribute qui travaillent sur le site de redmarrer Contribute.
version prliminaire
Suppression d'un fichier de modle

1 Dans le panneau Actifs (Fentre > Actifs), slectionnez la catgorie Modles sur le ct gauche du panneau 2 Cliquez sur le nom du modle pour le slectionner. 3 Cliquez sur le bouton Supprimer
en bas du panneau, puis confirmez l'opration.
Important : Une fois que vous avez supprim un fichier de modle, vous ne pouvez pas le rcuprer. Le fichier de modle est supprim de votre site. Les documents crs partir de ce modle ne sont pas dtachs du modle. Ils conservent la structure et les rgions modifiables dont le fichier de modle disposait avant d'tre supprim. Vous pouvez convertir un document de ce type en fichier HTML normal sans rgions modifiables ou verrouilles.
Voir aussi
Dtachement d'un document d'un modle la page 429 Application ou suppression d'un modle depuis un document existant la page 427 Cration d'un modle Dreamweaver la page 408
Exportation et importation du contenu d'un modle

A propos du contenu XML d'un modle
Vous pouvez imaginer qu'un document bas sur un modle contient des donnes reprsentes par des paires nom/valeur. Chaque paire se compose du nom d'une rgion modifiable et du contenu de cette rgion. Vous pouvez exporter les paires nom/valeur dans un fichier XML pour que vous puissiez utiliser les donnes du document en dehors de Dreamweaver (par exemple dans un diteur XML, dans un diteur de texte ou mme dans une application de base de donnes). Inversement, si vous disposez d'un document XML structur de manire approprie, vous pouvez importer ses donnes dans un document bas sur un modle Dreamweaver.
Exportation des rgions modifiables d'un document au format XML

1 Ouvrez un document bas sur un modle qui contient des rgions modifiables. 2 Choisissez Fichier > Exporter > Donnes du modle en XML. 3 Activez l'une des options Notation :
Si le modle contient des rgions rptes ou des paramtres de modle, choisissez Utiliser les balises XML standard
de Dreamweaver.
Si le modle ne contient ni rgion rpte ni paramtre de modle, choisissez Utiliser noms de rgions modifiables
comme balises XML.
4 Cliquez sur OK. 5 Dans la bote de dialogue qui s'affiche, slectionnez un dossier, nommez le fichier XML, puis cliquez sur le bouton
Enregistrer. Un fichier XML est gnr : il contient le matriau des paramtres et des rgions modifiables du document (y compris le matriau des rgions facultatives et des rgions modifiables situes l'intrieur de rgions rptes). Le fichier XML comporte le nom du modle original, ainsi que le nom et le contenu de chaque rgion de modle.
version prliminaire
Remarque : Le contenu des rgions non modifiables n'est pas export vers le fichier XML.
Importation de contenu XML

1 Choisissez Fichier > Importer > XML dans le modle. 2 Slectionnez le fichier XML et cliquez sur Ouvrir.
Dreamweaver cre un nouveau document bas sur le modle spcifi dans le fichier XML. Il remplit le contenu de chaque rgion modifiable de ce document l'aide des donnes du fichier XML. Le document rsultant apparat dans une nouvelle fentre de document. Si votre fichier XML n'est pas configur exactement de la faon prvue par Dreamweaver, vous ne pourrez peut-tre pas importer vos donnes. Une solution ce problme consiste exporter un fichier XML fictif de Dreamweaver, de faon avoir un fichier XML ayant exactement la bonne structure, puis copier les donnes de votre fichier XML original dans le fichier XML export. Vous obtenez ainsi un fichier XML ayant une structure correcte et contenant les donnes appropries, prtes tre importes.
Exportation d'un site sans marqueur de modle

Vous pouvez exporter des documents bass sur un modle d'un site vers un autre site sans inclure le marqueur de modle.
1 Choisissez Modifier > Modles > Exporter sans marqueur. 2 Dans la zone Dossier, tapez le chemin du dossier vers lequel vous souhaitez exporter le fichier, ou bien cliquez sur
Parcourir et slectionnez le dossier. Remarque : Slectionnez un dossier situ l'extrieur du site courant.
3 Pour enregistrer une version XML des documents bass sur un modle que vous exportez, slectionnez Conserver
les fichiers contenant les donnes du modle.

4 Pour appliquer les modifications aux fichiers prcdemment exports, slectionnez Extraire les fichiers modifis
uniquement.
Application ou suppression d'un modle depuis un document existant

Application d'un modle un document existant
Lorsque vous appliquez un modle un document contenant dj des lments, Dreamweaver tente de faire concorder le contenu existant avec une rgion du modle. Si le modle que vous appliquez au document est une version rvise de l'un des modles existants, il est probable que les noms concordent. Si vous appliquez un modle un document auquel aucun modle n'a encore t appliqu, les rgions modifiables ne peuvent pas tre compares et un cas de non-concordance se prsente. Dreamweaver les localise et vous pouvez alors slectionner la rgion ou les rgions vers lesquelles le contenu de la page courante doit tre transfr, ou bien dcider de supprimer le contenu non cohrent. Vous pouvez appliquer un modle un document existant l'aide du panneau Actifs ou partir de la fentre de document. Vous pouvez annuler l'application d'un modle si ncessaire.
version prliminaire
Important : Lorsque vous appliquez un modle un document existant, le modle remplace le contenu du document par le contenu passe-partout du modle. Sauvegardez toujours le contenu d'une page avant de lui appliquer un modle.
Application d'un modle un document existant l'aide du panneau Actifs

1 Ouvrez le document auquel vous souhaitez appliquer le modle. 2 Dans le panneau Actifs (Fentre > Actifs), slectionnez la catgorie Modles sur le ct gauche du panneau 3 Effectuez l'une des oprations suivantes :
Faites glisser le modle que vous souhaitez appliquer du panneau Actifs dans la fentre de document. Slectionnez le modle que vous souhaitez appliquer, puis cliquez sur le bouton Appliquer en bas du panneau
Actifs. Si le document comporte des lments qui ne peuvent pas tre automatiquement attribus une rgion de modle, la bote de dialogue Noms de rgion incohrents s'affiche.
4 Slectionnez une destination pour le contenu l'aide du menu Dplacer le contenu vers la nouvelle rgion en
slectionnant l'une des options suivantes :
Slectionnez une rgion du nouveau modle vers laquelle vous souhaitez dplacer le contenu existant. Slectionnez Nulle part pour supprimer le contenu du document.
5 Cliquez sur Utiliser pour tout pour dplacer l'ensemble des lments de contenu non concordants vers la rgion
slectionne.
6 Cliquez sur OK pour appliquer le modle ou sur Annuler pour annuler l'application du modle au document.
Application d'un modle un document existant partir de la fentre de document

1 Ouvrez le document auquel vous souhaitez appliquer le modle. 2 Choisissez Modifier > Modles > Appliquer le modle la page.
La bote de dialogue Slectionner le modle s'affiche.

3 Slectionnez un modle dans la liste, puis cliquez sur le bouton Slectionner.
Si le document comporte des lments qui ne peuvent pas tre automatiquement attribus une rgion de modle, la bote de dialogue Noms de rgion incohrents s'affiche.
4 Slectionnez une destination pour le contenu l'aide du menu Dplacer le contenu vers la nouvelle rgion en
slectionnant l'une des options suivantes :
Slectionnez une rgion du nouveau modle vers laquelle vous souhaitez dplacer le contenu existant. Slectionnez Nulle part pour supprimer le contenu du document.
5 Cliquez sur Utiliser pour tout pour dplacer l'ensemble des lments de contenu non concordants vers la rgion
slectionne.
6 Cliquez sur OK pour appliquer le modle ou sur Annuler pour annuler l'application du modle au document.
Annulation des modifications apportes un modle

Choisissez Edition > Annuler l'application du modle.
version prliminaire
Le document retrouve l'tat dans lequel il se trouvait avant l'application du modle.
Dtachement d'un document d'un modle

Pour apporter des modifications aux rgions verrouilles d'un document bas sur un modle, vous devez au pralable dtacher le document du modle. Lorsqu'un document est dtach, toutes les rgions qui le composent deviennent modifiables.
1 Ouvrez le document bas sur un modle que vous souhaitez dtacher. 2 Choisissez Modifier > Modles > Dtacher du modle.
Le document est dtach du modle et tout le code du modle est supprim.
Modification du contenu d'un document bas sur un modle

A propos de la modification du contenu d'un document bas sur un modle
Les modles de Dreamweaver spcifient les rgions qui sont verrouilles (non modifiables) et les autres qui sont modifiables dans les documents bass sur ces modles. Sur les pages bases sur un modle, les utilisateurs peuvent modifier uniquement le contenu des rgions modifiables. Vous pouvez facilement identifier et slectionner les rgions modifiables afin d'en modifier le contenu. Les utilisateurs du modle ne peuvent pas modifier le contenu des rgions verrouilles. Remarque : Si vous essayez de modifier une rgion verrouille dans un document bas sur un modle lorsque la surbrillance est dsactive, le pointeur de la souris se transforme pour indiquer que vous ne pouvez pas cliquer dans une rgion verrouille. Les utilisateurs du modle peuvent galement modifier les proprits et les entres d'une rgion rpte dans les documents bass sur ce modle.
Voir aussi
Cration d'une page base sur un modle existant la page 65 A propos des modles Dreamweaver la page 400 Slection de rgions modifiables la page 412
Modification des proprits d'un modle

Lorsque l'auteur cre des paramtres dans un modle, les documents bass sur ce modle hritent automatiquement des paramtres et de leur valeur initiale. L'utilisateur du modle peut mettre jour les attributs de balise modifiables et d'autres paramtres du modle (ceux d'une rgion facultative, par exemple).
Voir aussi
Paramtres de modle la page 403 Utilisation des rgions facultatives la page 415 Dfinition d'attributs de balise modifiables la page 418
version prliminaire
Modification d'un attribut de balise modifiable

1 Ouvrez le document bas sur un modle. 2 Choisissez Modifier > Proprits du modle.
La bote de dialogue Proprits du modle s'ouvre et affiche la liste des proprits disponibles. Elle indique les rgions facultatives et les attributs de balise modifiables.
3 Slectionnez la proprit dans la liste Nom.
L'tiquette et la valeur de la proprit slectionne s'affichent dans la partie infrieure de la bote de dialogue.
4 Si vous souhaitez modifier la valeur de la proprit dans le document courant, saisissez une autre valeur dans le
champ situ droite de l'tiquette de la proprit. Remarque : Le nom du champ et les valeurs modifiables sont dfinis dans le modle. Les attributs non rpertoris dans la liste Nom ne peuvent pas tre modifis dans le document bas sur un modle.
5 Slectionnez Autoriser les modles imbriqus pour contrler ceci si vous souhaitez que la proprit modifiable soit
transmise aux documents bass sur le modle imbriqu.
Modification des paramtres de modle des rgions facultatives

1 Ouvrez le document bas sur un modle. 2 Choisissez Modifier > Proprits du modle.
La bote de dialogue Proprits du modle s'ouvre et affiche la liste des proprits disponibles. Elle indique les rgions facultatives et les attributs de balise modifiables.
3 Slectionnez une proprit dans la liste Nom.
L'tiquette et la valeur de la proprit slectionne s'affichent dans la bote de dialogue.

4 Slectionnez Afficher si vous souhaitez que la rgion facultative apparaisse dans le document, ou bien
dslectionnez cette option si vous souhaitez qu'elle soit masque. Remarque : Le nom du champ et la valeur par dfaut sont dfinis dans le modle.
5 Slectionnez Autoriser les modles imbriqus pour contrler ceci si vous souhaitez que la proprit modifiable soit
transmise aux documents bass sur le modle imbriqu.
Ajout, suppression et modification de l'ordre des entres dans une rgion rpte
Vous pouvez ajouter ou supprimer des entres ou bien modifier l'ordre des entres dans une rgion rpte. Lorsque vous ajoutez une entre de rgion rpte, l'ensemble de la rgion rpte est reproduit dans le document. La rgion rpte doit contenir une rgion modifiable dans le modle original pour que l'utilisateur puisse en modifier le contenu.
version prliminaire
Voir aussi
Cration de rgions rptes la page 413
Ajout, suppression ou modification de l'ordre dans une rgion rpte

1 Ouvrez le document bas sur un modle. 2 Placez le point d'insertion sur la rgion rpte pour la slectionner. 3 Effectuez l'une des oprations suivantes :
Cliquez sur le bouton plus (+) pour ajouter une entre de rgion rpte sous l'entre slectionne. Cliquez sur le bouton moins () pour supprimer l'entre de rgion rpte slectionne. Cliquez sur le bouton Flche bas pour dplacer l'entre slectionne d'un niveau vers le bas. Cliquez sur le bouton Flche haut pour dplacer l'entre slectionne d'un niveau vers le haut.
Remarque : Vous pouvez galement choisir Modifier > Modles, puis activer l'une des options d'entre rpte prs du bas du menu contextuel. Celui-ci permet d'insrer une nouvelle entre de rgion rpte et de modifier l'emplacement de l'entre slectionne.
Couper, copier et supprimer des entres

1 Ouvrez le document bas sur un modle. 2 Placez le point d'insertion sur la rgion rpte pour la slectionner. 3 Effectuez l'une des oprations suivantes :
Pour couper une entre rpte, choisissez Edition > Entres rptes > Couper l'entre rpte. Pour copier une entre rpte, choisissez Edition > Entres rptes > Couper l'entre rpte. Pour supprimer une entre rpte, choisissez Edition > Entres rptes > Supprimer l'entre rpte. Pour coller une entre rpte, choisissez Edition > Coller.
Remarque : Lorsque vous collez une entre de rgion rpte, celle-ci s'insre dans le document sans craser d'entre existante.
Syntaxe des modles

Rgles gnrales de syntaxe
Dreamweaver fait appel des balises de commentaire HTML pour dfinir des rgions dans les modles et dans les documents bass sur un modle, de telle faon que les documents bass sur un modle restent des fichiers HTML valides. Lorsque vous insrez un objet de modle, des balises de modle sont insres dans le code. Les rgles de syntaxe gnrale sont les suivantes :
L o il y a un espace, vous pouvez en ajouter autant que vous voulez (sous la forme d'espaces, de tabulations, de
sauts de ligne). L'espace blanc est obligatoire, sauf au tout dbut ou la toute fin d'un commentaire.
Les attributs peuvent tre saisis dans n'importe quel ordre. Par exemple, dans le cas de TemplateParam, vous
pouvez spcifier le type avant le nom.
Les noms des commentaires et des attributs sont sensibles la casse. Tous les attributs doivent tre entre guillemets. Il est possible d'utiliser des guillemets simples ou doubles.
version prliminaire
Balises de modle
Dreamweaver utilise les balises de modle suivantes :
<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-TemplateBeginEditable name="..." --> TemplateEndEditable --> TemplateParam name="..." type="..." value="..." --> TemplateBeginRepeat name="..." --> TemplateEndRepeat --> TemplateBeginIf cond="..." --> TemplateEndIf --> TemplateBeginPassthroughIf cond="..." --> TemplateEndPassthroughIf --> TemplateBeginMultipleIf --> TemplateEndMultipleIf --> TemplateBeginPassthroughMultipleIf --> TemplateEndPassthroughMultipleIf --> TemplateBeginIfClause cond="..." --> TemplateEndIfClause --> TemplateBeginPassthroughIfClause cond="..." --> TemplateEndPassthroughIfClause --> TemplateExpr expr="..." --> (equivalent to @@...@@) TemplatePassthroughExpr expr="..." --> TemplateInfo codeOutsideHTMLIsLocked="..." -->
Balises d'instance
Dreamweaver utilise les balises d'instance suivantes :
<!-<!-<!-<!-<!-<!-<!-<!-<!-InstanceBegin template="..." codeOutsideHTMLIsLocked="..." --> InstanceEnd --> InstanceBeginEditable name="..." --> InstanceEndEditable --> InstanceParam name="..." type="..." value="..." passthrough="..." --> InstanceBeginRepeat name="..." --> InstanceEndRepeat --> InstanceBeginRepeatEntry --> InstanceEndRepeatEntry -->
Vrification de la syntaxe du modle

Dreamweaver vrifie la syntaxe du modle lorsque vous l'enregistrez, mais vous pouvez la vrifier manuellement avant d'enregistrer le modle. Par exemple, si vous ajoutez un paramtre ou une expression de modle en mode Code, vous pouvez vrifier que le code suit la syntaxe correcte.
1 Ouvrez le document que vous souhaitez vrifier dans la fentre de document. 2 Choisissez Modifier > Modles > Vrifier la syntaxe du modle.
Un message d'erreur s'affiche lorsque cette syntaxe est incorrecte. Le message dcrit l'erreur et indique la ligne du code l'origine de cette erreur.
Voir aussi
Reconnaissance des modles et des documents bass sur un modle la page 406 Expressions de modle la page 403
version prliminaire
Dfinition de prfrences de programmation pour les modles

Personnalisation des prfrences de coloration de code d'un modle
Utilisez ces prfrences pour dfinir la couleur des caractres, la couleur de l'arrire-plan et les attributs de style du texte affich en mode Code. Vous pouvez dfinir votre propre modle de couleur afin de pouvoir distinguer facilement les rgions de modle lorsque vous affichez un document en mode Code.
1 Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh). 2 Slectionnez la catgorie Coloration du code dans la liste de gauche. 3 Slectionnez HTML dans la liste Type de document, puis cliquez sur le bouton Modifier le modle de coloration. 4 Dans la liste Styles pour, slectionnez Balises de modle. 5 Dfinissez la couleur des caractres, la couleur de l'arrire-plan et les attributs de style du texte affich en mode
Code. Pour ce faire, procdez de la manire suivante :
Tapez dans la zone Couleur de texte la valeur hexadcimale de la couleur que vous souhaitez appliquer au texte
slectionn, ou bien utilisez le slecteur de couleur pour slectionner cette couleur. Procdez de la mme manire pour le champ Couleur d'arrire-plan si vous souhaitez appliquer une couleur l'arrire-plan du texte slectionn, ou bien modifier la couleur courante.
Si vous souhaitez appliquer un attribut de style au code slectionn, utilisez les boutons B (gras), I (italique) ou U
(soulign) pour appliquer le format souhait.
6 Cliquez sur OK.
Remarque : Si vous souhaitez effectuer des modifications globales, vous pouvez modifier le fichier source dans lequel vos prfrences sont enregistres. Sous Windows XP, ce fichier se trouve dans C:\Documents and Settings\%nom d'utilisateur%\Application Data\Adobe\Dreamweaver 9\Configuration\CodeColoring\Colors.xml. Sous Windows Vista, ce fichier se trouve dans C:\Utilisateurs\%nom d'utilisateur%\Application Data\Adobe\Dreamweaver 9\Configuration\CodeColoring\Colors.xml.
Dfinition des prfrences de surbrillance pour des rgions de modle

Les prfrences de surbrillance Dreamweaver permettent de personnaliser les couleurs de surbrillance appliques aux cadres entourant les rgions modifiables et les rgions verrouilles d'un modle en mode Cration. La couleur de surbrillance des rgions modifiables est utilise dans le modle, mais aussi dans les documents bass sur ce modle.
Voir aussi
Reconnaissance d'un document bas sur un modle en mode Cration la page 407 Reconnaissance des modles en mode Cration la page 406
Modification des couleurs de surbrillance de modle

1 Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh). 2 Slectionnez la catgorie Surbrillance dans la liste de gauche. 3 Cliquez dans la case de couleur Rgions modifiables, Rgions modifiables imbriques ou Rgions verrouilles, puis
slectionnez une couleur de surbrillance l'aide de la pipette (ou tapez la valeur hexadcimale correspondant la couleur de surbrillance dans la zone).
version prliminaire
Pour plus d'informations sur l'utilisation du slecteur de couleur, consultez la section Utilisation du slecteur de couleur la page 223.
4 (Facultatif) Rptez cette opration pour les autres types de rgion de modle, autant de fois que ncessaire. 5 Cochez la case Afficher pour activer l'affichage des couleurs dans la fentre de document ou dcochez-la pour
dsactiver l'affichage. Remarque : La case de couleur Rgions modifiables imbriques ne s'accompagne pas de l'option Afficher : l'affichage des rgions imbriques est en effet contrl par l'option Rgions modifiables.
6 Cliquez sur OK.
Affichage des couleurs de surbrillance dans la fentre de document

Les couleurs de surbrillance apparaissent dans la fentre de document uniquement lorsque l'option Affichage > Assistances visuelles > Elments invisibles est active et que les options appropries sont actives dans les prfrences de surbrillance. Remarque : Si des lments invisibles apparaissent, mais pas les couleurs de surbrillance, choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh), puis slectionnez la catgorie Surbrillance. Vrifiez que l'option Afficher est active prs de la couleur de surbrillance approprie. Vrifiez galement que la couleur souhaite est contraste par rapport la couleur d'arrire-plan de votre page.
version prliminaire
435
Chapitre 15 : Cration de pages Spry visuellement

Le cadre applicatif Spry est une bibliothque JavaScript qui permet aux concepteurs Web de crer des pages Web offrant une exprience enrichie aux visiteurs de leurs sites. Avec Spry, vous pouvez utiliser du code HTML et CSS, ainsi qu'une quantit minime de JavaScript, afin d'incorporer des donnes XML dans vos documents HTML, de crer des widgets tels que des accordons et des barres de menus, ou encore ajouter diffrents effets divers lments de page. Le cadre applicatif Spry est conu de telle sorte que le marquage est simple et facile utiliser pour toute personne possdant une connaissance de base du langage HTML, de CSS et de JavaScript. Le cadre applicatif Spry est principalement destin aux professionnels de la conception Web ou aux concepteurs Web amateurs expriments. Il n'est pas destin servir de cadre d'applications Web part entire pour le dveloppement Web au niveau de l'entreprise, bien qu'il puisse tre employ en combinaison avec d'autres pages au niveau de l'entreprise.
A propos du cadre applicatif Spry

Le cadre applicatif Spry est une bibliothque JavaScript qui permet aux concepteurs Web de crer des pages Web offrant une exprience enrichie aux visiteurs de leurs sites. Avec Spry, vous pouvez utiliser du code HTML et CSS, ainsi qu'une quantit minime de JavaScript, afin d'incorporer des donnes XML dans vos documents HTML, de crer des widgets tels que des accordons et des barres de menus, ou encore ajouter diffrents effets divers lments de page. Le cadre applicatif Spry est conu de telle sorte que le marquage est simple et facile utiliser pour toute personne possdant une connaissance de base du langage HTML, de CSS et de JavaScript. Le cadre applicatif Spry est principalement destin aux professionnels de la conception Web ou aux concepteurs Web amateurs expriments. Il n'est pas destin servir de cadre d'applications Web part entire pour le dveloppement Web au niveau de l'entreprise, bien qu'il puisse tre employ en combinaison avec d'autres pages au niveau de l'entreprise. Pour plus d'informations sur le cadre applicatif Spry, consultez le site www.adobe.com/go/learn_dw_spryframework_fr.
Voir aussi
Guide de dveloppement Spry
Utilisation des widgets Spry (instructions gnrales)

A propos des widgets Spry
Un widget Spry est un lment de page qui fournit une exprience utilisateur enrichie en permettant l'interaction de l'utilisateur. Un widget Spry comprend les lments suivats :
Structure du widget Bloc de code HTML qui dfinit la composition structurelle du widget.
version prliminaire
Cration de pages Spry visuellement
Comportement du widget JavaScript qui dtermine comment le widget rpond aux vnements provoqus par
l'utilisateur.
Style du Widget CSS qui dfinit l'apparence du widget.
Le cadre applicatif Spry prend en charge un ensemble de widgets rutilisables rdigs en code HTML, CSS et JavaScript standard. Vous pouvez insrer aisment ces widgets, dont le code est du langage HTML et CSS extrmement simple, puis dfinir le style du widget. Les comportements du cadre applicatif comprennent des fonctionnalits qui permettent aux utilisateurs d'afficher ou de masquer du contenu sur la page, de modifier l'apparence de la page (par exemple sa couleur), d'interagir avec des menus, et bien plus encore. Chaque widget du cadre applicatif Spry est associ des fichiers CSS et JavaScript uniques. Le fichier CSS contient toutes les informations requises pour dfinir le style du widget, alors que le fichier JavaScript lui confre ses fonctionnalits. Lorsque vous insrez un widget l'aide de l'interface Dreamweaver, Dreamweaver lie automatiquement ces fichiers votre page, de sorte que votre widget contienne les fonctionnalits et le style requis. Les fichiers CSS et JavaScript associs un widget sont nomms selon ce dernier. De la sorte, vous saurez aisment quels fichiers correspondent chaque widget. Par exemple, les fichiers associs au widget Accordon sont nomms SpryAccordion.css et SpryAccordion.js. Lorsque vous insrez un widget dans une page enregistre, Dreamweaver cre un rpertoire SpryAssets dans votre site et y place les fichiers JavaScript et CSS correspondants.
Voir aussi
Description des feuilles de style en cascade la page 127
Ressources et didacticiels pour les widgets Spry

Les ressources en ligne suivantes fournissent plus d'informations sur la personnalisation des widgets Spry. Exemples de widgets Spry Personnalisation des barres de menus Spry dans Dreamweaver Didacticiel sur le widget Panneaux onglet et Barre de menus Widgets de validation Spry (didacticiel vido)
Insertion d'un widget Spry

Choisissez Insertion > Spry puis slectionnez le widget insrer.
Lorsque vous insrez un widget, Dreamweaver ajoute automatiquement les fichiers JavaScript et CSS Spry requis dans votre site lorsque vous enregistrez la page. Remarque : Vous pouvez galement insrer des widgets Spry par l'intermdiaire de la catgorie Spry du panneau Insertion.
Slection d'un widget Spry

1 Maintenez le pointeur de la souris au-dessus du widget jusqu' ce que le contour bleu du widget soit visible. 2 Cliquez sur l'onglet du widget, dans son coin suprieur gauche.
Modification d'un widget Spry

Slectionnez le widget modifier puis apportez les modifications dsires dans l'inspecteur Proprits (Fentre >
Proprits).
version prliminaire
Pour plus d'informations sur la modification de widgets spcifiques, consultez les sections relatives chacun d'eux.
Dfinition du style d'un widget Spry

Accdez le fichier CSS appropri pour le widget dans le dossier SpryAssets de votre site, puis modifiez ce fichier
CSS selon vos prfrences. Pour plus d'informations sur la dfinition du style de widgets spcifiques, consultez les sections de personnalisation relatives chacun d'eux. Vous pouvez galement dfinir le style d'un widget Spry en modifiant les styles dans le panneau CSS, comme vous le feriez pour tout autre lment de la page possdant un style.
Obtention d'autres widgets

Il existe bien d'autres widgets Web que les widgets Spry installs avec Dreamweaver. Le site Adobe Exchange fournit des widgets Web qui ont t conus par d'autres professionnels.
Choisissez Rechercher des widgets Web dans le menu Etendre Dreamweaver
de la barre Application.
Vous trouverez un didacticiel vido sur l'utilisation des widgets Web, ralis par l'quipe de Dreamweaver, l'adresse www.adobe.com/go/dw10widgets_fr.
Modification du dossier par dfaut des actifs Spry

Lorsque vous insrez un widget, un jeu de donnes ou un effet Spry dans une page enregistre, Dreamweaver cre un rpertoire SpryAssets dans votre site et y place les fichiers JavaScript et CSS correspondants. Vous pouvez modifier l'emplacement par dfaut o Dreamweaver enregistre les actifs Spry si vous prfrez les enregistrer ailleurs.
1 Choisissez Site > Grer les sites. 2 Slectionnez votre site dans la bote de dialogue Grer les sites, puis cliquez sur Modifier. 3 Dans la bote de dialogue Configuration du site, dveloppez Paramtres avancs, puis slectionnez la catgorie Spry. 4 Entrez le chemin d'accs au dossier utiliser pour les actifs Spry, puis cliquez sur OK. Vous pouvez galement
cliquer sur l'icne du dossier afin d'accder l'emplacement dsir.
Voir aussi
Configuration d'un site Dreamweaver la page 38
Utilisation du widget Accordon

A propos du widget Accordon
Un widget Accordon est un ensemble de panneaux rductibles pouvant stocker une grande quantit de contenu tout en restant compact. Les visiteurs du site affichent ou masquent le contenu stock dans l'accordon en cliquant sur l'onglet du panneau. Les panneaux de l'accordon se dveloppent ou se rduisent mesure que le visiteur clique sur les diffrents onglets. Dans un accordon, un seul panneau de contenu est ouvert et visible tout moment. L'exemple suivant montre un widget Accordon dont le premier panneau est dvelopp :
version prliminaire
A. Onglet du panneau accordon B. Contenu du panneau accordon C. Panneau accordon (ouvert)
Le code HTML par dfaut du widget Accordon comprend une balise div extrieure contenant tous les panneaux, une balise div pour chaque panneau, ainsi qu'une balise div d'en-tte et une balise div de contenu l'intrieur de la balise pour chaque panneau. Un widget Accordon peut contenir n'importe quel nombre de panneaux distincts. Le code HTML du widget Accordon comprend galement des balises script dans l'en-tte du document et aprs le marquage HTML de l'accordon. Vous trouverez une explication plus dtaille du fonctionnement du widget Accordon, ainsi qu'une description complte de son code, l'adresse www.adobe.com/go/learn_dw_spryaccordion_fr. Pour consulter un didacticiel relatif lutilisation du widget Accordon, rendez-vous ladresse suivante : www.adobe.com/go/vid0167_fr.
Insertion et modification du widget Accordon

Insertion du widget Accordon
Choisissez Insertion > Spry > Accordon Spry.
Remarque : Vous pouvez galement insrer un widget Accordon par l'intermdiaire de la catgorie Spry du panneau Insertion.
Ajout d'un panneau un widget Accordon

1 Slectionnez un widget Accordon dans la fentre de document. 2 Cliquez sur le bouton Plus (+) de l'inspecteur Proprits (Fentre > Proprits). 3 (Facultatif) Modifiez le nom du panneau en slectionnant son texte en mode Cration puis en apportant les
modifications dsires.
Suppression d'un panneau d'un widget Accordon

1 Slectionnez un widget Accordon dans la fentre de document. 2 Dans le menu Panneaux de l'inspecteur Proprits (Fentre > Proprits), slectionnez le nom du panneau
supprimer puis cliquez sur le bouton Moins (-).
version prliminaire
Ouverture d'un panneau modifier

Placez le pointeur de la souris au-dessus de l'onglet du panneau pour l'ouvrir en mode cration, puis cliquez sur
l'icne reprsentant un oeil qui s'affiche sur la droite de l'onglet.
Slectionnez un widget Accordon dans la fentre de document, puis cliquez sur le nom du panneau pour le
modifier dans le menu Panneaux de l'inspecteur Proprits (Fentre > Proprits).
Modification de l'ordre des panneaux

1 Slectionnez un widget Accordon dans la fentre de document. 2 Dans l'inspecteur Proprits (Fentre > Proprits), slectionnez le nom du panneau accordon dplacer. 3 Cliquez sur les flches vers le haut ou vers le bas pour monter ou descendre le panneau.
Personnalisation du widget Accordon

Bien que l'inspecteur Proprits permette d'apporter des modifications simples un widget Accordon, il ne prend pas en charge les tches de dfinition de style personnalises. Vous pouvez modifier les rgles CSS du widget Accordon de manire crer un accordon adapt vos besoins. Pour savoir comment modifier les couleurs du widget Accordon, consultez l'article Quick guide to styling Spry tabbed panels, accordions, and collapsible panels de David Powers (en anglais). Vous trouverez la liste des tches de dfinition de style avances l'adresse www.adobe.com/go/learn_dw_spryaccordion_custom_fr. Toutes les rgles CSS des sections suivantes font rfrence aux rgles par dfaut, qui figurent dans le fichier SpryAccordion.css. Dreamweaver enregistre le fichier SpryAccordion.css dans le dossier SpryAssets de votre site ds que vous crez un widget Accordon Spry. Ce fichier contient galement des informations commentes au sujet de divers styles qui s'appliquent au widget. Il peut ds lors tre utile de consulter galement le fichier. Mme s'il est facile de modifier directement les rgles du widget Accordon dans le fichier CSS, vous pouvez galement utiliser le panneau Styles CSS pour modifier le code CSS de l'accordon. Le panneau Styles CSS peut vous aider trouver les classes CSS attribues diffrentes parties du widget, en particulier si vous employez le mode Actuel du panneau.
Voir aussi
Panneau Styles CSS en mode Actuel la page 132
Dfinition du style du widget Accordon

Vous pouvez dfinir le style du texte d'un widget Accordon en dfinissant des proprits pour le conteneur entier du widget Accordon, ou en dfinissant des proprits distinctes pour chaque composant du widget.
Pour modifier le style du texte d'un widget Accordon, recherchez la rgle CSS approprie dans le tableau suivant,
puis ajoutez vos proprits et valeurs de style du texte.
version prliminaire
Texte modifier
Rgle CSS pertinente
Exemple de proprits et de valeurs ajouter font: Arial; font-size:medium;
Texte dans l'accordon entier (onglet et panneau de contenu)
.Accordion ou .AccordionPanel
Texte dans les onglets du panneau accordon .AccordionPanelTab uniquement Texte dans les panneaux de contenu de l'accordon uniquement .AccordionPanelContent
font: Arial; font-size:medium;
Modification des couleurs d'arrire-plan du widget Accordon

Pour modifier les couleurs d'arrire-plan des diffrentes parties d'un widget Accordon, recherchez la rgle CSS
approprie dans le tableau suivant, puis ajoutez ou modifiez les proprits et les valeurs de couleur d'arrire-plan.
Partie du widget modifier Rgle CSS pertinente Exemple de proprit et de valeur ajouter ou modifier background-color: #CCCCCC; (Valeur par dfaut) background-color: #CCCCCC;
Couleur d'arrire-plan des onglets du panneau accordon Couleur d'arrire-plan des panneaux de contenu de l'accordon Couleur d'arrire-plan du panneau accordon ouvert Couleur d'arrire-plan des onglets de panneau lorsque le pointeur de la souris passe au-dessus
.AccordionPanelTab
.AccordionPanelContent
.AccordionPanelOpen .AccordionPanelTab
background-color: #EEEEEE; (Valeur par dfaut) color: #555555; (Valeur par dfaut)
.AccordionPanelTabHover
Couleur d'arrire-plan de l'onglet de panneau .AccordionPanelOpen ouvert lorsque le pointeur de la souris passe .AccordionPanelTabHover au-dessus
color: #555555; (Valeur par dfaut)
Limitation de la largeur d'un accordon

Par dfaut, le widget Accordon se dveloppe pour occuper l'espace disponible. Vous pouvez toutefois limiter la largeur d'un widget Accordon en dfinissant une proprit width pour le conteneur de l'accordon.
1 Reprez la rgle CSS .Accordion en ouvrant le fichier SpryAccordion.css. Il s'agit de la rgle qui dfinit les proprits
de l'lment conteneur principal du widget Accordon. Vous pouvez galement trouver cette rgle en slectionnant le widget Accordon puis en examinant le panneau Styles CSS (Fentre > Styles CSS). Assurez-vous que le panneau se trouve en mode Actuel.
2 Ajoutez une proprit et une valeur de largeur (width) la rgle, par exemple width: 300px;.
Utilisation du widget Barre de menus

A propos du widget Barre de menus
Un widget Barre de menus est un ensemble de boutons de menu de navigation. Lorsque le visiteur d'un site place le pointeur de la souris au-dessus de ces boutons, ils affichent des sous-menus. Les barres de menus permettent d'afficher une grande quantit d'informations de navigation dans un espace compact et de donner aux visiteurs du site un aperu de son contenu sans les contraindre l'explorer dans ses moindres recoins.
version prliminaire
Dreamweaver permet d'insrer deux types de widgets Barre de menus : une barre verticale et l'autre horizontale. L'exemple suivant montre un widget Barre de menus horizontale, dont le troisime lment de menu est dvelopp :
Widget Barre de menus (consistant en balises <ul>, <li> et <a>) A. Elment de menu avec sous-menu B. Elment de sous-menu avec sous-menu
Le code HTML du widget Barre de menus comprend une balise ul extrieure contenant une balise li pour chaque lment de menu de niveau suprieur. Les lments de menu de niveau suprieur (balises li) contiennent leur tous des balises ul et li qui dfinissent les sous-menus de chacun d'eux. Ces sous-menus peuvent leur tour comprendre des sous-menus. Les menus de niveau suprieur et les sous-menus peuvent contenir autant d'lments de sous-menu que vous le souhaitez. Vous trouverez une explication plus dtaille du fonctionnement du widget Barre de menus, ainsi qu'une description complte de son code, l'adresse www.adobe.com/go/learn_dw_sprymenubar_fr. Vous trouverez un didacticiel consacr la cration d'une barre de menus Spry l'adresse www.adobe.com/go/vid0168_fr.
Voir aussi
Didacticiel consacr aux barres de menus Spry
Insertion et modification du widget Barre de menus

Insertion du widget Barre de menus
1 Choisissez Insertion > Spry > Barre de menus Spry. 2 Slectionnez Horizontale ou Verticale, puis cliquez sur OK.
Remarque : Vous pouvez galement insrer un widget Barre de menus par l'intermdiaire de la catgorie Spry du panneau Insertion. Remarque : Le widget Barre de menus Spry emploie des calques DHTML pour afficher des sections de code HTML audessus d'autres sections. Si votre page comporte du contenu cr l'aide d'Adobe Flash, un problme peut se poser. Les fichiers SDF sont en effet toujours affichs au-dessus de tous les autres calques DHTML, si bien qu'il se peut que ce fichier SWF s'affiche au-dessus de vos sous-menus. La solution ce problme consiste modifier les paramtres du fichier SWF, de manire employer wmode="transparent". Vous pouvez le faire aisment en slectionnant le fichier SWF dans la fentre de document puis en rglant l'option wmode sur transparent dans l'inspecteur Proprits. Pour plus d'informations, consultez le site www.adobe.com/go/15523_fr.
Ajout ou suppression de menus et de sous-menus

L'inspecteur Proprits (Fentre > Proprits) permet d'ajouter des lments de menu au widget Barre de menus et d'en supprimer.
version prliminaire
Ajout d'un lment de menu principal 1 Slectionnez un widget Barre de menus dans la fentre de document.
2 Dans l'inspecteur Proprits, cliquez sur le bouton Plus au-dessus de la premire colonne. 3 (Facultatif) Renommez le nouvel lment de menu en modifiant son texte par dfaut, dans la fentre de document
ou dans la zone de texte de l'inspecteur Proprits. Ajout d'un lment de sous-menu

1 Slectionnez un widget Barre de menus dans la fentre de document. 2 Dans l'inspecteur Proprits, slectionnez le nom de l'lment de menu principal auquel vous voulez ajouter le
sous-menu.
3 Cliquez sur le bouton Plus au-dessus de la deuxime colonne. 4 (Facultatif) Renommez le nouvel lment de sous-menu en modifiant son texte par dfaut, dans la fentre de
document ou dans la zone de texte de l'inspecteur Proprits. Pour ajouter un sous-menu un sous-menu, slectionnez le nom de ce dernier, puis cliquez sur le bouton Plus audessus de la troisime colonne de l'inspecteur Proprits. Remarque : Dreamweaver ne prend en charge que deux niveaux de sous-menus en mode Cration, mais vous pouvez en ajouter autant que vous le voulez en mode Code. Suppression d'un lment de menu principal ou de sous-menu
1 Slectionnez un widget Barre de menus dans la fentre de document. 2 Dans l'inspecteur Proprits, slectionnez le nom de l'lment de menu principal ou de sous-menu supprimer,
puis cliquez sur le bouton Moins.
Modification de l'ordre des lments de menu

1 Slectionnez un widget Barre de menus dans la fentre de document. 2 Dans l'inspecteur Proprits (Fentre > Proprits), slectionnez le nom de l'lment de menu dplacer. 3 Cliquez sur les flches vers le haut ou vers le bas pour monter ou descendre l'lment de menu.
Modification du texte d'un lment de menu

1 Slectionnez un widget Barre de menus dans la fentre de document. 2 Dans l'inspecteur Proprits (Fentre > Proprits), slectionnez le nom de l'lment de menu dont vous voulez
modifier le texte.
3 Apportez les modifications dsires dans la zone de texte.
Liaison d'un lment de menu

1 Slectionnez un widget Barre de menus dans la fentre de document. 2 Dans l'inspecteur Proprits (Fentre > Proprits), slectionnez le nom de l'lment de menu auquel vous voulez
appliquer un lien.
3 Entrez le lien dans la zone Lien ou cliquez sur l'icne reprsentant un dossier afin de rechercher un fichier.
Cration d'une infobulle pour un lment de menu

1 Slectionnez un widget Barre de menus dans la fentre de document.
version prliminaire
2 Dans l'inspecteur Proprits (Fentre > Proprits), slectionnez le nom de l'lment de menu pour lequel vous
voulez crer une infobulle.

3 Entrez le texte de l'infobulle dans la zone Titre.
Attribution d'un attribut cible un lment de menu

L'attribut cible dtermine l'endroit o une page lie doit tre ouverte. Par exemple, vous pouvez attribuer un attribut cible un lment de menu de faon ce que la page lie s'affiche dans une nouvelle fentre de navigateur lorsqu'un visiteur du site clique sur son lien. Si vous employez des jeux de cadres, vous pouvez galement dfinir le nom d'un cadre dans lequel la page lie doit s'ouvrir.
1 Slectionnez un widget Barre de menus dans la fentre de document. 2 Dans l'inspecteur Proprits (Fentre > Proprits), slectionnez le nom de l'lment de menu auquel vous voulez
attribuer un attribut cible.

3 Entrez l'un des quatre attributs dans la zone Cible :
_blank Ouvre la page lie dans une nouvelle fentre du navigateur. _self Charge la page lie dans la mme fentre de navigateur. Il s'agit de l'option par dfaut. Si la page se trouve dans
un cadre ou un jeu de cadres, elle se charge dans ce cadre.

_parent Charge le document li dans le parent de jeu de cadres immdiat du document. _top Charge la page lie dans la fentre suprieure d'un jeu de cadres.
Dsactivation des styles

Vous pouvez dsactiver le style d'un widget Barre de menus de manire mieux voir sa structure HTML en mode Cration. Par exemple, lorsque vous dsactivez les styles, les lments de la barre de menus s'affichent sous la forme d'une liste puces sur la page et pas sous la forme d'lments mis en forme dans une barre de menus.
1 Slectionnez un widget Barre de menus dans la fentre de document. 2 Cliquez sur le bouton Dsactiver les styles de l'inspecteur Proprits (Fentre > Proprits).
Modification de l'orientation d'un widget Barre de menus

Vous pouvez modifier l'orientation d'un widget Barre de menus, de manire transformer une barre horizontale en barre verticale et inversement. Il suffit pour ce faire de modifier le code HTML de la barre de menus et de vrifier que votre dossier SpryAssets contient bien le fichier CSS correct. L'exemple suivant transforme un widget Barre de menus horizontale en widget Barre de menus verticale.
1 Dans Dreamweaver, ouvrez la page qui contient un widget Barre de menus horizontale. 2 Insrez un widget Barre de menus verticale (Insertion > Spry > Barre de menus Spry) puis enregistrez la page. Cette
tape garantit l'inclusion du fichier CSS correct pour une barre de menus verticale dans votre site. Remarque : Si votre site comprend dj un autre widget Barre de menus verticale, il n'est pas ncessaire d'en insrer un nouveau. Vous pouvez vous contenter de joindre le fichier SpryMenuBarVertical.css la page au lieu de cliquer sur le bouton Attacher une feuille de style du panneau Styles CSS (Fentre > Styles CSS).
3 Supprimez la barre de menus verticale. 4 En mode Code (Affichage > Code), accdez la classe MenuBarHorizontal et remplacez-la par MenuBarVertical.
La classe MenuBarHorizontal est dfinie dans la balise conteneur ul de la barre de menus (<ul id="MenuBar1" class="MenuBarHorizontal">).
5 Aprs le code de la barre de menus, accdez au constructeur de la barre :
version prliminaire
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
6 Supprimez l'option de prchargement imgDown (et la virgule) du constructeur :

var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
Remarque : En cas de conversion d'une barre de menus verticale en barre horizontale, vous devez au contraire ajouter l'option de prchargement imgDown et la virgule.
7 (Facultatif) Si votre page ne comprend plus d'autres widgets Barre de menus horizontale, supprimez le lien vers
l'ancien fichier MenuBarHorizontal.css dans l'en-tte du document.

Personnalisation du widget Barre de menus

Bien que l'inspecteur Proprits permette d'apporter des modifications simples un widget Barre de menus, il ne prend pas en charge les tches de dfinition de style personnalises. Vous pouvez modifier les rgles CSS du widget Barre de menus de manire crer une barre de menus adapte vos besoins. Vous trouverez la liste des tches de dfinition de style avances l'adresse www.adobe.com/go/learn_dw_sprymenubar_custom_fr. Pour savoir comment raliser les tches de formatage les plus courantes, consultez l'article Customizing a Spry Menu Bar de David Powers (en anglais). Vous trouverez d'autres ressources Web au sujet de la personnalisation du widget Barre de menus dans l'article Customizing Spry Menu Bars in Dreamweaver de Ryan Grabenstein (en anglais). Toutes les rgles CSS des sections suivantes font rfrence aux rgles par dfaut, qui figurent dans le fichier SpryMenuBarHorizontal.css ou SpryMenuBarVertical.css (selon l'option slectionne). Dreamweaver enregistre ces fichiers CSS dans le dossier SpryAssets de votre site ds que vous crez un widget Barre de menus Spry. Ces fichiers contiennent galement des informations commentes au sujet de divers styles qui s'appliquent au widget. Mme s'il est facile de modifier directement les rgles du widget Barre de menus dans le fichier CSS qui l'accompagne, vous pouvez galement utiliser le panneau Styles CSS pour modifier le code CSS de la barre de menus. Le panneau Styles CSS peut vous aider trouver les classes CSS attribues diffrentes parties du widget, en particulier si vous employez le mode Actuel du panneau.
Voir aussi
Modification du style du texte d'un lment de menu

Le code CSS joint la balise <a> contient les informations de style du texte. La balise <a> comprend galement plusieurs valeurs de classe de style de texte pertinentes qui concernent diffrents tats des menus.
Pour modifier le style du texte d'un lment de menu, recherchez la rgle CSS approprie dans le tableau suivant,
puis modifiez sa valeur par dfaut :
version prliminaire
Style modifier
Rgle CSS pour une barre de menus verticale ou horizontale ul.MenuBarVertical a, ul.MenuBarHorizontal a ul.MenuBarVertical a:hover, ul.MenuBarHorizontal a:hover ul.MenuBarVertical a:focus, ul.MenuBarHorizontal a:focus ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemHover
Proprits correspondantes et valeurs par dfaut color: #333; text-decoration: none; color: #FFF;
Texte par dfaut Couleur du texte lorsque le pointeur de la souris se trouve au-dessus de celui-ci Couleur du texte actif
color: #FFF;
Couleur d'un lment de la barre de menus lorsque le pointeur de la souris se trouve audessus de celui-ci
color: #FFF;
Couleur d'un lment de sous-menu lorsque le ul.MenuBarVertical pointeur de la souris se trouve au-dessus de a.MenuBarItemSubmenuHover, celui-ci ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
color: #FFF;
Modification de la couleur d'arrire-plan d'un lment de menu

Le code CSS joint la balise <a> contient les informations de couleur d'arrire-plan d'un lment de menu. La balise <a> comprend galement plusieurs valeurs de classe de couleur d'arrire-plan pertinentes qui concernent diffrents tats des menus.
Pour modifier la couleur d'arrire-plan d'un lment de menu, recherchez la rgle CSS approprie dans le tableau
suivant, puis modifiez sa valeur par dfaut :

Couleur modifier Rgle CSS pour une barre de menus verticale Proprits correspondantes et valeurs ou horizontale par dfaut ul.MenuBarVertical a, ul.MenuBarHorizontal a background-color: #EEE; background-color: #33C;
Arrire-plan par dfaut
Couleur d'arrire-plan de l'lment lorsque le ul.MenuBarVertical a:hover, pointeur de la souris se trouve au-dessus de ul.MenuBarHorizontal a:hover celui-ci Couleur d'arrire-plan quand l'lment est actif Couleur d'un lment de la barre de menus lorsque le pointeur de la souris se trouve audessus de celui-ci ul.MenuBarVertical a:focus, ul.MenuBarHorizontal a:focus ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemHover
background-color: #33C;
Couleur d'un lment de sous-menu lorsque ul.MenuBarVertical le pointeur de la souris se trouve au-dessus de a.MenuBarItemSubmenuHover, celui-ci ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
Modification de la taille des lments de menu

Vous pouvez modifier la taille des lments de menu en modifiant les proprits de largeur des balises li et ul de ces lments.
1 Accdez la rgle ul.MenuBarVertical li ou ul.MenuBarHorizontal li : 2 Modifiez la proprit width afin de lui donner la largeur dsire (ou remplacez sa valeur par auto pour
supprimer une largeur fixe, puis ajoutez la proprit et la valeur white-space: nowrap; la rgle).
3 Accdez la rgle ul.MenuBarVertical ul ou ul.MenuBarHorizontal ul. 4 Modifiez la proprit width afin de lui donner la largeur dsire (ou remplacez sa valeur par auto pour
supprimer une largeur fixe).
version prliminaire
5 Accdez la rgle ul.MenuBarVertical ul li ou ul.MenuBarHorizontal ul li : 6 Ajoutez les proprits suivantes la rgle : float: none; et background-color: transparent;. 7 Supprimez la proprit width: 8.2em; et sa valeur.
Dfinition de la position des sous-menus

La position des sous-menus d'une barre de menus Spry est contrle par la proprit margin des balises ul du sous-menu.
1 Accdez la rgle ul.MenuBarVertical ul ou ul.MenuBarHorizontal ul. 2 Remplacez les valeurs par dfaut margin: -5% 0 0 95%; par les valeurs dsires.
Utilisation du widget Panneau rductible

A propos du widget Panneau rductible
Un widget Panneau rductible est un panneau qui peut stocker du contenu en n'occupant que peu de place. Les utilisateurs affichent ou masquent le contenu stock dans le panneau rductible en cliquant sur l'onglet du widget. L'exemple suivant montre un widget Panneau rductible dvelopp et rduit :
A. Dvelopp B. Rduit
Le code HTML du widget Panneau rductible comprend une balise div extrieure qui comprend la balise de contenu div et la balise conteneur d'ongletdiv. Le code HTML du widget Panneau rductible comprend galement des balises script dans l'en-tte du document et aprs le marquage HTML du panneau rductible. Vous trouverez une explication plus dtaille du fonctionnement du widget Panneau rductible, ainsi qu'une description complte de son code, l'adresse www.adobe.com/go/learn_dw_sprycollapsiblepanel_fr.
Insertion et modification du widget Panneau rductible

Insertion du widget Panneau rductible
Choisissez Insertion > Spry > Panneau rductible Spry.
Remarque : Vous pouvez galement insrer un widget Panneau rductible par l'intermdiaire de la catgorie Spry du panneau Insertion.
Ouverture ou fermeture du panneau rductible en mode cration

Placez le pointeur de la souris au-dessus de l'onglet du panneau en mode cration, puis cliquez sur l'icne
reprsentant un oeil qui s'affiche sur la droite de l'onglet.
version prliminaire
Slectionnez un widget Panneau rductible dans la fentre de document, puis choisissez Ouvert ou Ferm dans le
menu Affichage de l'inspecteur Proprits (Fentre > Proprits).
Dfinition de l'tat par dfaut d'un widget Panneau rductible

Vous pouvez dfinir l'tat par dfaut (ouvert ou ferm) d'un widget Panneau rductible lorsque la page Web est charge dans un navigateur.
1 Slectionnez un widget Panneau rductible dans la fentre de document. 2 Dans l'inspecteur Proprits (Fentre > Proprits), choisissez Ouvert ou Ferm dans le menu droulant Par dfaut.
Activation ou dsactivation de l'animation du widget Panneau rductible

Par dfaut, si vous activez l'animation d'un widget Panneau rductible, le panneau s'ouvre et se ferme progressivement, en douceur, lorsque le visiteur du site clique sur son onglet. Si vous dsactivez l'animation, le panneau rductible s'ouvre et se ferme brusquement.
1 Slectionnez un widget Panneau rductible dans la fentre de document. 2 Dans l'inspecteur Proprits (Fentre > Proprits), activez ou dsactivez l'option Activer lanimation.
Personnalisation du widget Panneau rductible

Bien que l'inspecteur Proprits permette d'apporter des modifications simples un widget Panneau rductible, il ne prend pas en charge les tches de dfinition de style personnalises. Vous pouvez modifier les rgles CSS du widget Panneau rductible de manire crer un panneau rductible adapt vos besoins. Pour savoir comment modifier les couleurs du widget Panneau rductible, consultez l'article Quick guide to styling Spry tabbed panels, accordions, and collapsible panels de David Powers (en anglais). Vous trouverez la liste des tches de dfinition de style avances l'adresse www.adobe.com/go/learn_dw_sprycollapsiblepanel_custom_fr. Toutes les rgles CSS des sections suivantes font rfrence aux rgles par dfaut, qui figurent dans le fichier SpryCollapsiblePanel.css. Dreamweaver enregistre le fichier SpryCollapsiblePanel.css dans le dossier SpryAssets de votre site ds que vous crez un widget Panneau rductible. Ce fichier contient galement des informations commentes au sujet de divers styles qui s'appliquent au widget. Mme s'il est facile de modifier directement les rgles du widget Panneau rductible dans le fichier CSS qui l'accompagne, vous pouvez galement utiliser le panneau Styles CSS pour modifier le code CSS du panneau rductible. Le panneau Styles CSS peut vous aider trouver les classes CSS attribues diffrentes parties du widget, en particulier si vous employez le mode Actuel du panneau.
Voir aussi
Dfinition du style du texte d'un widget Panneau rductible

Vous pouvez dfinir le style du texte d'un widget Panneau rductible en dfinissant des proprits pour le conteneur entier du widget Panneau rductible, ou en dfinissant des proprits distinctes pour chaque composant du widget.
Pour modifier le format du texte d'un widget Panneau rductible, recherchez la rgle CSS approprie dans le tableau
suivant, puis ajoutez vos proprits et valeurs de style du texte.
version prliminaire
Style modifier
Rgle CSS pertinente
Exemple de proprits et de valeurs ajouter ou modifier font: Arial; font-size:medium; font: bold 0.7em sans-serif; (Valeur par dfaut) font: Arial; font-size:medium;
Texte du panneau rductible entier
.CollapsiblePanel
Texte dans l'onglet du panneau uniquement .CollapsiblePanelTab Texte dans le panneau de contenu uniquement .CollapsiblePanelContent
Modification des couleurs d'arrire-plan du widget Panneau rductible

Pour modifier les couleurs d'arrire-plan des diffrentes parties d'un widget Panneau rductible, recherchez la rgle
CSS approprie dans le tableau suivant, puis ajoutez ou modifiez les proprits et les valeurs de couleur d'arrire-plan.
Couleur modifier Rgle CSS pertinente Exemple de proprit et de valeur ajouter ou modifier background-color: #DDD; (Valeur par dfaut) background-color: #DDD;
Couleur d'arrire-plan de l'onglet du panneau Couleur d'arrire-plan du panneau de contenu Couleur d'arrire-plan de l'onglet quand le panneau est ouvert Couleur d'arrire-plan de l'onglet d'un panneau ouvert lorsque le pointeur de la souris passe au-dessus
.CollapsiblePanelTab
.CollapsiblePanelContent
.CollapsiblePanelOpen .CollapsiblePanelTab
background-color: #EEE; (Valeur par dfaut) background-color: #CCC; (Valeur par dfaut)
.CollapsiblePanelTabHover, .CollapsiblePanelOpen .CollapsiblePanelTabHover
Limitation de la largeur d'un panneau rductible

Par dfaut, le widget Panneau rductible se dveloppe pour occuper l'espace disponible. Vous pouvez toutefois limiter la largeur d'un widget Panneau rductible en dfinissant une proprit width pour le conteneur du panneau rductible.
1 Recherchez la rgle CSS .CollapsiblePanel en ouvrant le fichier SpryCollapsible Panel.css. Cette rgle dfinit les
proprits de l'lment conteneur principal du widget Panneau rductible. Vous pouvez galement trouver cette rgle en slectionnant le widget Panneau rductible puis en examinant le panneau Styles CSS (Fentre > Styles CSS). Assurez-vous que le panneau se trouve en mode Actuel.
Utilisation du widget Panneau onglet

A propos du widget Panneau onglet
Un widget Panneaux onglet est un ensemble de panneaux qui peuvent stocker du contenu en n'occupant que peu de place. Les visiteurs du site affichent ou masquent le contenu stock dans les panneaux onglet en cliquant sur l'onglet du panneau auquel ils veulent accder. Les panneaux du widget s'ouvrent mesure que le visiteur clique sur les diffrents onglets. Dans un widget Panneaux onglet, un seul panneau de contenu est ouvert tout moment. L'exemple suivant montre un widget Panneaux onglet dont le troisime panneau est ouvert :
version prliminaire
A. Onglet B. Contenu C. Widget Panneaux onglet D. Panneau onglet
Le code HTML du widget Panneaux onglet comprend une balise extrieure div qui contient tous les panneaux, la liste des onglets, une div comprenant les panneaux de contenu, ainsi qu'une div pour chaque panneau de contenu. Le code HTML du widget Panneaux onglet comprend galement des balises script dans l'en-tte du document et aprs le marquage HTML du widget Panneau onglet. Vous trouverez une explication plus dtaille du fonctionnement du widget Panneaux onglet, ainsi qu'une description complte de son code, l'adresse www.adobe.com/go/learn_dw_sprytabbedpanels_fr.
Insertion et modification du widget Panneaux onglet

Insertion du widget Panneaux onglet
Choisissez Insertion > Spry > Panneaux onglet Spry.
Remarque : Vous pouvez galement insrer un widget Panneaux onglet par l'intermdiaire de la catgorie Spry du panneau Insertion.
Ajout d'un panneau un widget Panneaux onglet

1 Slectionnez un widget Panneaux onglet dans la fentre de document. 2 Cliquez sur le bouton Plus de l'inspecteur Proprits (Fentre > Proprits). 3 (Facultatif) Modifiez le nom de l'onglet en slectionnant son texte en mode Cration puis en apportant les
modifications dsires.
Suppression d'un panneau d'un widget Panneaux onglet

1 Slectionnez un widget Panneaux onglet dans la fentre de document. 2 Dans le menu Panneaux de l'inspecteur Proprits (Fentre > Proprits), slectionnez le nom du panneau
supprimer puis cliquez sur le bouton Moins.
Ouverture d'un panneau modifier

Placez le pointeur de la souris au-dessus de l'onglet du panneau pour l'ouvrir en mode cration, puis cliquez sur
l'icne reprsentant un oeil qui s'affiche sur la droite de l'onglet.
Slectionnez un widget Panneaux onglet dans la fentre de document, puis cliquez sur le nom du panneau pour
le modifier dans le menu Panneaux de l'inspecteur Proprits (Fentre > Proprits).
Modification de l'ordre des panneaux

1 Slectionnez un widget Panneaux onglet dans la fentre de document.
version prliminaire
2 Dans le menu Panneaux de l'inspecteur Proprits (Fentre > Proprits), slectionnez le nom du panneau
dplacer.
3 Cliquez sur les flches vers le haut ou vers le bas pour monter ou descendre le panneau.
Dfinition du panneau ouvert par dfaut

Vous pouvez dterminer quel panneau du widget Panneaux onglet est ouvert par dfaut lorsque la page est ouverte dans un navigateur.
1 Slectionnez un widget Panneaux onglet dans la fentre de document. 2 Dans l'inspecteur Proprits (Fentre > Proprits), slectionnez le panneau ouvrir par dfaut dans le menu
droulant Par dfaut.
Personnalisation du widget Panneaux onglet

Bien que l'inspecteur Proprits permette d'apporter des modifications simples un widget Panneaux onglet, il ne prend pas en charge les tches de dfinition de style personnalises. Vous pouvez modifier les rgles CSS du widget Panneaux onglet de manire crer un widget adapt vos besoins. Pour savoir comment modifier les couleurs du widget Panneaux onglet, consultez l'article Quick guide to styling Spry tabbed panels, accordions, and collapsible panels de David Powers (en anglais). Vous trouverez la liste des tches de dfinition de style avances l'adresse www.adobe.com/go/learn_dw_sprytabbedpanels_custom_fr. Toutes les rgles CSS des sections suivantes font rfrence aux rgles par dfaut, qui figurent dans le fichier SpryTabbedPanels.css. Dreamweaver enregistre le fichier SpryTabbedPanels.css dans le dossier SpryAssets de votre site ds que vous crez un widget Panneaux onglets. Ce fichier contient galement des informations commentes au sujet de divers styles qui s'appliquent au widget. Mme s'il est facile de modifier directement les rgles du widget Panneaux onglet dans le fichier CSS qui l'accompagne, vous pouvez galement utiliser le panneau Styles CSS pour modifier le code CSS du widget. Le panneau Styles CSS peut vous aider trouver les classes CSS attribues diffrentes parties du widget, en particulier si vous employez le mode Actuel du panneau.
Voir aussi
Dfinition du style du texte d'un widget Panneaux onglet

Vous pouvez dfinir le style du texte d'un widget Panneaux onglet en dfinissant des proprits pour le conteneur entier du widget Panneaux onglet, ou en dfinissant des proprits distinctes pour chaque composant du widget.
Pour modifier le style du texte d'un widget Panneaux onglet, recherchez la rgle CSS approprie dans le tableau
suivant, puis ajoutez vos proprits et valeurs de style du texte.
version prliminaire
Texte modifier
Rgle CSS pertinente
Exemple de proprits et de valeurs ajouter font: Arial; font-size:medium; font: Arial; font-size:medium;
Texte dans le widget entier Texte dans les onglets du panneau uniquement
.TabbedPanels .TabbedPanelsTabGroup ou .TabbedPanelsTab
Texte dans les panneaux de contenu .TabbedPanelsContentGroup ou uniquement .TabbedPanelsContent
Modification des couleurs d'arrire-plan du widget Panneaux onglet

Pour modifier les couleurs d'arrire-plan des diffrentes parties d'un widget Panneaux onglet, recherchez la rgle
CSS approprie dans le tableau suivant, puis ajoutez ou modifiez les proprits et les valeurs de couleur d'arrire-plan.
Couleur modifier Rgle CSS pertinente Exemple de proprit et de valeur ajouter ou modifier
Couleur d'arrire-plan des onglets du panneau Couleur d'arrire-plan des panneaux de contenu Couleur d'arrire-plan de l'onglet slectionn Couleur d'arrire-plan des onglets du panneau ouvert lorsque le pointeur de la souris passe au-dessus de ceux-ci
.TabbedPanelsTabGroup ou .TabbedPanelsTab background-color: #DDD; (Valeur par dfaut)
.Tabbed PanelsContentGroup ou .TabbedPanelsContent .TabbedPanelsTabSelected
background-color: #EEE; (Valeur par dfaut)
background-color: #EEE; (Valeur par dfaut)
.TabbedPanelsTabHover
background-color: #CCC; (Valeur par dfaut)
Limitation de la largeur de panneaux onglet

Par dfaut, le widget Panneaux onglet se dveloppe pour occuper l'espace disponible. Vous pouvez toutefois limiter la largeur d'un widget Panneaux onglet en dfinissant une proprit width pour le conteneur de l'accordon.
1 Recherchez la rgle CSS .TabbedPanels en ouvrant le fichier SpryTabbedPanels.css. Cette rgle dfinit les proprits
de l'lment conteneur principal du widget Panneaux onglet. Vous pouvez galement trouver cette rgle en slectionnant le widget Panneaux onglet puis en examinant le panneau Styles CSS (Fentre > Styles CSS). Assurez-vous que le panneau se trouve en mode Actuel.
Utilisation du widget Info-bulle

A propos du widget Info-bulle
Le widget Info-bulle Spry affiche des informations supplmentaires lorsqu'un utilisateur place le pointeur de la souris au-dessus d'un lment spcifique d'une page Web. Le contenu supplmentaire disparat lorsque l'utilisateur cesse l'opration. Vous pouvez galement configurer les info-bulles de manire ce qu'elles restent ouvertes plus longtemps afin de permettre aux utilisateurs d'interagir avec le contenu qui s'y trouve. Le widget Info-bulle comprend les trois lments suivants :
Le conteneur d'info-bulle. Il s'agit de l'lment qui contient le message ou le contenu que vous souhaitez afficher
lorsque l'utilisateur active l'info-bulle.
version prliminaire
L'lment ou les lments de page permettant d'activer l'info-bulle. Le script du constructeur. Il s'agit du code JavaScript indiquant Spry de crer la fonctionnalit d'info-bulle.
Lorsque vous insrez un widget Info-bulle, Dreamweaver cre un conteneur d'info-bulle l'aide de balises div et entoure l'lment de dclenchement (l'lment de page permettant d'activer l'info-bulle) de balises span. Dreamweaver utilise ces balises par dfaut. Toutefois, toutes les balises peuvent tre utilises avec l'infobulle et l'lment de dclenchement dans la mesure o elles se trouvent dans le corps de la page. Lorsque vous utilisez le widget Info-bulle, tenez compte des considrations suivantes :
Toute infobulle ouverte se ferme avant l'ouverture de la suivante. Les info-bulles restent affiches lorsque les utilisateurs placent le pointeur de la souris au-dessus de la zone de
dclenchement.
Vous n'tes soumis aucune restriction en ce qui concerne le type de balises que vous pouvez utiliser pour les
dclenchements et le contenu d'info-bulle. (Il est toutefois toujours recommand d'avoir recours des lments de niveau bloc afin d'viter des problmes de rendu inter-navigateurs ventuels).
Par dfaut, l'info-bulle est de 20 pixels, et apparat en bas droite du curseur. Vous pouvez utiliser les options de
dcalage horizontal et vertical de l'inspecteur Proprits pour dfinir un point d'aspect personnalis.
Il n'existe actuellement aucun moyen permettant l'ouverture d'une info-bulle lorsqu'une page se charge dans un
navigateur. Le widget Info-bulle ncessite trs peu de code CSS. Spry utilise JavaScript pour afficher, masquer et positionner l'infobulle. Vous pouvez appliquer toute autre mise en page l'info-bulle l'aide des techniques CSS standard, selon les exigences de votre page. La seule rgle contenue dans le fichier CSS par dfaut est une solution aux problmes Internet Explorer 6 consistant faire apparatre l'info-bulle au-dessus des lments de formulaires ou des objets Flash. Vous trouverez une explication plus dtaille du fonctionnement du widget Spry Infobulle, ainsi qu'une description complte de son code, l'adresse www.adobe.com/go/learn_dw_sprytooltip_fr. Vous trouverez un didacticiel vido sur l'utilisation du widget Spry Infobulle l'adresse www.adobe.com/go/lrvid4046_dw_fr.
Insertion du widget Info-bulle

Choisissez Insertion > Spry > Infobulle Spry.
Remarque : Vous pouvez galement insrer un widget Info-bulle par l'intermdiaire de la catgorie Spry du panneau Insertion. Cette action permet d'insrer un nouveau widget Info-bulle intgrant un conteneur ddi au contenu de l'info-bulle et une phrase d'espace rserv faisant office de dclencheur d'info-bulle. Vous pouvez galement slectionner un lment existant sur la page (par exemple, une image), puis insrer l'info-bulle. Lorsque vous effectuez cette opration, l'lment slectionn fait office de dclencheur de la nouvelle info-bulle. L'lment slectionn doit inclure une balise entire (par exemple, une balise img ou p) afin de permettre Dreamweaver de lui attribuer un ID s'il n'en dispose pas dj un.
Modification des options de widget Info-bulle

Vous pouvez dfinir les options vous permettant de personnaliser le comportement du widget Info-bulle.
1 Amenez le pointeur de la souris ou placez le point d'insertion dans le contenu de l'info-bulle sur la page. 2 Cliquez sur l'onglet bleu du widget Info-bulle pour le slectionner.
version prliminaire
3 Dfinissez les options dans l'inspecteur Proprits du widget Info-bulle, votre convenance.
Nom Nom du conteneur d'info-bulle. Le conteneur renferme le contenu de l'info-bulle. Par dfaut, Dreamweaver
utilise une balise div en tant que conteneur.

Dclencheur Elment de la page qui active l'info-bulle. Par dfaut, Dreamweaver insre une phrase d'espace rserv,
entoure de balises span, en tant que dclencheur, mais vous pouvez slectionner n'importe quel lment de la page disposant d'un ID unique.
Suivre la souris Lorsqu'elle est slectionne, cette option oblige l'info-bulle suivre la souris lors du survol de l'lment
de dclenchement.
Masquer lors du retrait de la souris Lorsqu'elle est slectionne, cette option permet de garder l'info-bulle ouverte tant que la souris la survole (mme si la souris quitte l'lment de dclenchement). Il est utile de laisser l'infobulle ouverte si elle contient des liens ou d'autres lments interactifs. Si cette option n'est pas slectionne, l'lment de l'info-bulle se ferme lorsque la souris quitte la zone de dclenchement. Dcalage horizontal Calcule la position horizontale de l'info-bulle par rapport la souris. La valeur de dcalage est
exprime en pixels ; le dcalage par dfaut est de 20 pixels.

Dcalage vertical Calcule la position verticale de l'info-bulle par rapport la souris. La valeur de dcalage est exprime en pixels ; le dcalage par dfaut est de 20 pixels Afficher le dlai Dlai en millisecondes avant l'apparition de l'info-bulle lorsqu'elle se trouve dans l'lment de dclenchement. La valeur par dfaut est 0. Masquer le dlai Dlai en millisecondes avant la disparition de l'info-bulle lorsqu'elle a quitt l'lment de
dclenchement. La valeur par dfaut est 0.

Effet Type d'effet que vous voulez utiliser lorsque l'info-bulle apparat. Store simule l'effet d'un store qui monte et descend pour afficher et masquer l'info-bulle. Fondu fait apparatre et disparatre l'info-bulle en fondu. La valeur par dfaut est aucun.
Utilisation du widget Validation de groupe de boutons radio

A propos du widget Validation de groupe de boutons radio
Le widget Validation de groupe de boutons radio est un groupe de boutons radio intgrant la prise en charge de la validation de la slection. Le widget applique la slection d'un bouton radio dans le groupe. L'exemple suivant montre un widget Validation de groupe de boutons radio dans diffrents tats.
B
Choisissez une valeur valide.
Veuillez effectuer une slection.
A. Messages d'erreur du widget Validation de groupe de boutons radio B. Groupe de widgets Validation de groupe de boutons radio
version prliminaire
Outre l'tat initial, le widget Validation de groupe de boutons radio peut possder trois tats : valide, non valide et valeur obligatoire. Vous pouvez modifier les proprits de ces tats en modifiant le fichier CSS correspondant (SpryValidationRadio.css), en fonction des rsultats de validation dsirs. Un widget Validation de groupe de boutons radio peut effectuer une validation diffrents moments : lorsque le visiteur clique en dehors du widget, pendant qu'il effectue une slection ou lorsqu'il tente d'envoyer le formulaire.
Etat initial Lorsque la page se charge dans le navigateur, ou lorsque l'utilisateur rinitialise le formulaire. Etat valide Lorsque l'utilisateur effectue une slection, ce qui permet l'envoi du formulaire. Etat obligatoire Lorsque l'utilisateur n'a pas effectu une slection obligatoire. Etat non valide Lorsque l'utilisateur slectionne un bouton radio dont la valeur n'est pas acceptable.
Lorsqu'un widget Validation de groupe de boutons radio passe dans l'un de ces tats suite l'interaction avec l'utilisateur, la logique du cadre applicatif Spry applique une classe CSS spcifique au conteneur HTML pour le widget lors de l'excution. Par exemple, si un utilisateur tente d'envoyer un formulaire mais n'a pas effectu de slections, Spry applique au widget une classe qui le force afficher le message d'erreur Vous devez effectuer une slection . Les rgles qui contrlent le style et les tats d'affichage de messages d'erreur se trouvent dans le fichier qui accompagne le widget, SpryValidationRadio.css. Le code HTML par dfaut du widget Validation de groupe de boutons radio, gnralement dans un formulaire, contient une balise conteneur span qui entoure la balise input type="radio" du groupe de boutons radio. Le code HTML du widget Validation de groupe de boutons radio comprend galement des balises script dans l'en-tte du document et aprs le code HTML du widget. Vous trouverez une explication plus dtaille du fonctionnement du widget Validation de groupe de boutons radio, ainsi qu'une description complte de son code, l'adresse www.adobe.com/go/learn_dw_spryradio_fr.
Insertion et modification du widget Validation de groupe de boutons radio

Insertion du widget Validation de groupe de boutons radio
1 Choisissez Insertion > Spry > Validation de groupe de boutons radio Spry. 2 Dans la zone de texte Nom, entrez le nom du groupe de boutons radio. 3 Ajoutez ou retirez des boutons radio du groupe en cliquant sur les boutons Plus (+) ou Moins (-). 4 Dans la colonne Etiquette, cliquez sur le nom de chaque bouton radio pour rendre le champ modifiable, puis
attribuez des noms uniques chacun d'entre eux.

5 Dans la colonne Valeur, cliquez sur chaque valeur pour rendre le champ modifiable, puis attribuez une valeur
unique chaque bouton radio.

6 (Facultatif) Cliquez sur un bouton radio ou sur sa valeur pour slectionner une ligne spcifique, puis sur les flches
pointant vers le haut et vers le bas pour dplacer la ligne vers le haut ou vers le bas.
7 Slectionnez un type de mise en forme pour le groupe de boutons radio.
Sauts de ligne Place chaque bouton radio sur une ligne spare l'aide de sauts de ligne (balises br). Tableau Place chaque bouton radio sur une ligne spare l'aide de lignes de tableau individuelles (balises tr).
8 Cliquez sur OK.
Remarque : Vous pouvez galement insrer un widget Groupe de boutons radio par l'intermdiaire de la catgorie Spry du panneau Insertion.
version prliminaire
Dfinition du moment de validation

Vous pouvez fixer le moment auquel la validation se produit : quand le visiteur du site clique en dehors du widget, pendant qu'il effectue des slections ou lorsqu'il tente d'envoyer le formulaire.
1 Slectionnez un widget Validation de groupe de boutons radio dans la fentre de document en cliquant sur son
onglet bleu.
2 Dans l'inspecteur Proprits (Fentre > Proprits), slectionnez l'option qui indique le moment o vous voulez
que la validation se produise. Vous pouvez activer toutes les options, ou uniquement onSubmit.
onBlur Validation quand l'utilisateur clique en dehors du groupe de boutons radio. onChange Validation lorsque l'utilisateur effectue des slections. onSubmit Validation lorsque l'utilisateur tente d'envoyer le formulaire. L'option onSubmit est active par dfaut et ne
peut pas tre dsactive.
Affichage des tats du widget en mode Cration

onglet bleu.
2 Dans l'inspecteur Proprits (Fentre > Proprits), slectionnez l'tat afficher dans le menu droulant Aperu des
tats. Par exemple, slectionnez Initial pour afficher le widget dans son tat initial.
Modification de l'tat obligatoire des boutons radio

Par dfaut, les widgets Validation de groupe de boutons radio exigent que l'utilisateur effectue une slection avant d'envoyer le formulaire. Vous pouvez toutefois stipuler que certaines slections sont facultatives pour l'utilisateur.
onglet bleu.
2 Dans l'inspecteur Proprits (Fentre > Proprits), dsactivez l'option Obligatoire.
Spcification d'une valeur vide ou non valide

Vous pouvez dfinir une valeur qui est considre comme vide ou non valide si l'utilisateur slectionne un bouton radio associ l'une de ces valeurs. Si l'utilisateur slectionne un bouton radio dont la valeur est vide, le navigateur renvoie le message d'erreur Vous devez effectuer une slection . Si l'utilisateur slectionne un bouton radio dont la valeur est non valide, le navigateur renvoie le message d'erreur Vous devez slectionner une valeur valide .
Veuillez effectuer une slection.
Widget Groupe de boutons radio incluant un bouton radio de valeur vide.
1 Dans votre widget Groupe de boutons radio, slectionnez le bouton radio utiliser pour le bouton radio vide ou
non valide. Lorsque vous spcifiez des valeurs vides ou non valides pour le widget, des boutons radio doivent correspondre aux valeurs dj attribues.
2 Dans l'inspecteur Proprits du bouton radio (Fentre > Proprits), attribuez une valeur au bouton radio. Pour
crer un bouton radio dont la valeur est vide, tapez aucune dans la zone Valeur. Pour crer un bouton radio dont la valeur est non valide, tapez non valide dans la zone Valeur.
3 Slectionnez le widget Validation de groupe de boutons radio entier en cliquant sur son onglet bleu.
version prliminaire
4 Dans l'inspecteur Proprits, spcifiez des valeurs vides ou non valides. Pour crer un widget affichant le message
d'erreur de valeur vide Vous devez effectuer une slection , tapez aucune dans la zone Valeur vide. Pour crer un widget affichant le message d'erreur de valeur non valide Vous devez slectionner une valeur valide , tapez non valide dans la zone Valeur non valide. N'oubliez pas que les valeurs aucune ou non valide doivent tre attribues au bouton radio et au widget Groupe de boutons radio pour que les messages d'erreur puissent s'afficher correctement.
Personnalisation du widget Validation de groupe de boutons radio

Bien que l'inspecteur Proprits permette d'apporter des modifications simples un widget Validation de groupe de boutons radio, il ne prend pas en charge les tches de dfinition de style personnalises. Vous pouvez modifier les rgles CSS du widget Validation de groupe de boutons radio de manire crer un widget dont le style est adapt vos besoins. Vous trouverez la liste des tches de dfinition de style avances l'adresse www.adobe.com/go/learn_dw_spryradio_custom_fr. Toutes les rgles CSS des sections suivantes font rfrence aux rgles par dfaut, qui figurent dans le fichier SpryValidationRadio.css. Dreamweaver enregistre le fichier SpryValidationRadio.css dans le dossier SpryAssets de votre site ds que vous crez un widget Validation de groupe de boutons radio Spry. La consultation de ce fichier peut s'avrer utile, car il contient des informations commentes au sujet de divers styles qui s'appliquent au widget. Mme s'il est facile de modifier directement les rgles du widget Validation de groupe de boutons radio dans le fichier CSS qui l'accompagne, vous pouvez galement utiliser le panneau Styles CSS pour modifier le code CSS du widget. Le panneau Styles CSS peut vous aider trouver les classes CSS attribues diffrentes parties du widget, en particulier si vous employez le mode Actuel du panneau.
Voir aussi
Dfinition du style du widget Validation de groupe de boutons radio (instructions gnrales)

1 Ouvrez le fichier SpryValidationRadio.css. 2 Accdez la rgle CSS pour la partie du widget modifier. Par exemple, pour modifier la couleur d'arrire-plan de
l'tat obligatoire du widget Groupe de boutons radio, modifiez la rgle radioRequiredState dans le fichier SpryValidationRadio.css.
3 Apportez les modifications dsires la rgle CSS puis enregistrez le fichier.
Le fichier SpryValidationRadio.css contient de nombreux commentaires qui expliquent le code et le rle de certaines rgles. Pour plus d'informations, consultez les commentaires dans le fichier.
Dfinition du style du texte de message d'erreur d'un widget Validation de groupe de boutons radio
Par dfaut, les messages d'erreur du widget Validation de groupe de boutons radio s'affichent en rouge, entours d'un bord plein de 1 pixel d'paisseur.
Pour modifier le style des messages d'erreur d'un widget Validation de groupe de boutons radio, recherchez la rgle
CSS approprie dans le tableau suivant, puis modifiez les proprits par dfaut ou ajoutez vos proprits et valeurs de style du texte.
version prliminaire
Texte mettre en forme Texte de message d'erreur
Rgle CSS pertinente .radioRequiredState .radioRequiredMsg, .radioInvalidState .radioInvalidMsg
Proprits modifier color: #CC3333; border: 1px solid #CC3333;
Utilisation du widget Validation de zone de texte

A propos du widget Validation de zone de texte
Le widget Validation Spry de champ de texte est un champ de texte qui affiche des tats valides ou non valides lorsque le visiteur du site entre du texte. Par exemple, vous pouvez ajouter un widget Validation de zone de texte un formulaire dans lequel le visiteur doit entrer son adresse lectronique. S'il ne tape pas de symbole @ ni de point dans l'adresse, le widget affiche un message qui indique que les informations entres ne sont pas valides. L'exemple suivant montre un widget Validation de zone de texte dans diffrents tats :
A
Format non valide
D La valeur est obligatoire
A. Widget Champ de texte, conseil activ B. Widget Champ de texte, tat valide C. Widget Champ de texte, tat non valide D. Widget Champ de texte, tat obligatoire
Le widget Validation de zone de texte peut possder divers tats (par exemple valide, non valide, valeur obligatoire, etc.). Vous pouvez modifier les proprits de ces tats l'aide de l'inspecteur Proprits, en fonction des rsultats de validation dsirs. Un widget Validation de zone de texte peut effectuer une validation diffrents moments, par exemple lorsque le visiteur clique en dehors du widget, pendant qu'il entre des donnes ou lorsqu'il tente d'envoyer le formulaire.
Etat initial Etat du widget lorsque la page se charge dans le navigateur, ou lorsque l'utilisateur rinitialise le formulaire. Etat actif Etat du widget lorsque l'utilisateur place le point d'insertion l'intrieur. Etat valide Etat du widget lorsque l'utilisateur a entr des informations correctes, ce qui permet l'envoi du formulaire. Etat non valide Etat du widget si l'utilisateur a entr du texte dans un format non valide. Par exemple, 06 pour l'anne
au lieu de 2006.
Etat obligatoire Etat du widget lorsque l'utilisateur n'a pas entr du texte obligatoire dans la zone de texte. Nombre minimal de caractres Etat du widget lorsque l'utilisateur a entr moins de caractres que le nombre minimal
requis pour le champ de texte.

Nombre maximal de caractres Etat du widget lorsque l'utilisateur a entr plus de caractres que le nombre maximal
admis pour le champ de texte.

Valeur minimale Etat du widget lorsque l'utilisateur a entr une valeur infrieure la valeur requise par la zone de texte. S'applique aux validations de type entier, rel et date.
version prliminaire
Valeur maximale Etat du widget lorsque l'utilisateur a entr une valeur suprieure la valeur maximale admise par la
zone de texte. S'applique aux validations de type entier, rel et date. Lorsqu'un widget Validation de zone de texte passe dans l'un de ces tats suite l'interaction avec l'utilisateur, la logique du cadre applicatif Spry applique une classe CSS spcifique au conteneur HTML pour le widget lors de l'excution. Par exemple, si un utilisateur tente d'envoyer un formulaire mais n'a pas entr de texte dans un champ obligatoire, Spry applique au widget une classe qui le force afficher le message d'erreur Vous devez entrer une valeur . Les rgles qui contrlent le style et les tats d'affichage de messages d'erreur se trouvent dans le fichier CSS qui accompagne le widget, SpryValidationTextField.css. Le code HTML par dfaut du widget Validation de zone de texte, gnralement dans un formulaire, contient une balise conteneur <span> qui entoure la balise <input> du champ de texte. Le code HTML du widget Validation de zone de texte comprend galement des balises script dans l'en-tte du document et aprs le marquage HTML du widget. Vous trouverez une explication plus dtaille du fonctionnement du widget Validation de zone de texte, ainsi qu'une description complte de son code, l'adresse www.adobe.com/go/learn_dw_sprytextfield_fr.
Insertion et modification du widget Validation de zone de texte

Insertion du widget Validation de zone de texte
1 Choisissez Insertion > Spry > Validation Spry de champ de texte. 2 Compltez la bote de dialogue Attributs d'accessibilit des balises objet, puis cliquez sur OK.
Remarque : Vous pouvez galement insrer un widget Validation de zone de texte par l'intermdiaire de la catgorie Spry du panneau Insertion.
Voir aussi
Cration de formulaires HTML accessibles la page 691
Dfinition d'un type de validation et d'un format

Vous pouvez dfinir diffrents types de validation pour le widget Validation de zone de texte. Par exemple, vous pouvez dfinir un type de validation Carte de crdit si la zone de texte est destine contenir des numros de carte de crdit.
1 Slectionnez un widget Validation de zone de texte dans la fentre de document. 2 Dans l'inspecteur Proprits (Fentre > Proprits), choisissez un type de validation dans le menu droulant Type. 3 Le cas chant, slectionnez un format dans le menu droulant Format.
Pour la plupart des types de validation, la zone de texte attend un format standard. Par exemple, si vous appliquez le type de validation Entier une zone de texte, le widget n'effectue de validation que si l'utilisateur a entr des chiffres dans la zone de texte. Toutefois, certains types de validation permettent de choisir le type de format que votre zone de texte acceptera. Le tableau suivant numre les types de validation et les formats disponibles dans l'inspecteur Proprits :
Type de validation Aucun Nombre entier Adresse lectronique Adresse Format Aucun format particulier requis. La zone de texte n'accepte que des chiffres. La zone de texte accepte les adresses lectroniques contenant un @ et un point (.) prcd et suivi d'au moins une lettre.
version prliminaire
Type de validation Date Heure
Format Formats variables. Slectionnez-en un dans le menu Format de l'inspecteur Proprits. Formats variables. Slectionnez-en un dans le menu Format de l'inspecteur Proprits. tt reprsente le format am/pm et t le format a/p. Formats variables. Slectionnez-en un dans le menu Format de l'inspecteur Proprits. Vous pouvez dcider d'accepter toutes les cartes de crdit ou spcifier un type de carte particulier (MasterCard, Visa, etc.). Le champ de texte n'accepte pas les espaces dans un numro de carte de crdit (p.ex. 4321 3456 4567 4567). Formats variables. Slectionnez-en un dans le menu Format de l'inspecteur Proprits. La zone de texte accepte les numros de tlphone mis en forme pour les Etats-Unis et le Canada, savoir (000) 000-0000, ou les formats personnaliss. Si vous slectionnez le format personnalis, entrez ce format, par exemple 000.00(00), dans la zone Schma. La zone de texte accepte les numros de scurit sociale en format 000-00-0000. Si vous voulez utiliser un format diffrent, choisissez Personnalis comme type de validation, puis spcifiez un modle. Le mcanisme de validation par modle n'accepte que les caractres ASCII. La zone de texte accepte les devises en format 1,000,000.00 ou 1.000.000,00. Valide divers types de nombres : les entiers (par exemple 1), les valeurs flottantes (par exemple 12,123) et les valeurs flottantes en notation scientifique (par exemple 1,212e+12, 1,221e-12, o e reprsente une puissance de 10). Formats variables. Slectionnez-en un dans le menu Format de l'inspecteur Proprits. La zone de texte accepte les URL en format http://xxx.xxx.xxx ou ftp://xxx.xxx.xxx. Permet de choisir un type et un format de validation personnalis. Entrez le schma du format (et une indication, si ncessaire), dans l'inspecteur Proprits. Le mcanisme de validation par modle n'accepte que les caractres ASCII.
Carte de crdit
Code postal Numro de tlphone
Numro de scurit sociale
Devise Nombre rel/Notation scientifique
Adresse IP URL Personnalis

Vous pouvez fixer le moment auquel la validation se produit : quand le visiteur du site clique en dehors du widget, pendant qu'il tape des donnes ou lorsqu'il tente d'envoyer le formulaire.
1 Slectionnez un widget Validation de zone de texte dans la fentre de document. 2 Dans l'inspecteur Proprits (Fentre > Proprits), slectionnez l'option qui indique le moment o vous voulez
onBlur Validation quand l'utilisateur clique en dehors de la zone de texte. onChange Validation lorsque l'utilisateur modifie du texte l'intrieur de la zone de texte. onSubmit Validation lorsque l'utilisateur tente d'envoyer le formulaire. L'option onSubmit est active par dfaut et ne
Dfinition d'un nombre minimal et maximal de caractres

Cette option n'est disponible que pour les types de validation Aucun, Nombre entier, Adresse lectronique et URL.
1 Slectionnez un widget Validation de zone de texte dans la fentre de document. 2 Dans l'inspecteur Proprits (Fentre > Proprits), entrez un nombre dans la zone Nbre min. de caract. ou Nbre
max. de caract. Par exemple, si vous entrez 3 dans la zone Nbre min. de caract., le widget n'effectue la validation que si l'utilisateur entre au moins 3 caractres.
version prliminaire
Dfinition des valeurs minimale et maximale

Cette option n'est disponible que pour les types de validation Nombre entier, Heure, Devise et Nombre rel/Notation scientifique.
1 Slectionnez un widget Validation de zone de texte dans la fentre de document. 2 Dans l'inspecteur Proprits (Fentre > Proprits), entrez un nombre dans la zone Valeur min. ou Valeur max. Par
exemple, si vous entrez 3 dans la zone Valeur min., le widget n'effectue de validation que si l'utilisateur entre le chiffre 3 ou une valeur plus leve (4, 5, 6 etc.) dans la zone de texte.

1 Slectionnez un widget Validation de zone de texte dans la fentre de document. 2 Dans l'inspecteur Proprits (Fentre > Proprits), slectionnez l'tat afficher dans le menu droulant Aperu des
tats. Par exemple, si vous voulez afficher le widget dans son tat valide, slectionnez Valide.
Modification de l'tat obligatoire d'une zone de texte

Par dfaut, tous les widgets Validation de zone de texte que vous insrez l'aide de Dreamweaver exigent que l'utilisateur y entre des donnes lorsqu'ils sont publis sur une page Web. Vous pouvez toutefois rendre la saisie de texte dans certaines zones facultative pour l'utilisateur.
1 Slectionnez un widget Validation de zone de texte dans la fentre de document. 2 Dans l'inspecteur Proprits (Fentre > Proprits), activez ou dsactivez l'option Obligatoire, en fonction de vos
prfrences.
Cration d'un conseil pour une zone de texte

Comme les zones de texte peuvent possder de multiples formats, il peut tre utile de donner aux utilisateurs un conseil relatif aux donnes qu'ils doivent entrer. Par exemple, une zone de texte possdant le type de validation Numro de tlphone n'accepte que les numros en format (000) 000-0000. Vous pouvez entrer cet exemple de numro sous la forme d'un conseil, de manire ce que la zone affiche le format correct lorsque l'utilisateur charge la page dans un navigateur.
1 Slectionnez un widget Validation de zone de texte dans la fentre de document. 2 Dans l'inspecteur Proprits (Fentre > Proprits), entrez un conseil dans la zone Conseil.
Blocage des caractres incorrects

Vous pouvez empcher les utilisateurs d'entrer des caractres non valides dans un widget Validation de zone de texte. Par exemple, si vous activez cette option pour un widget possdant le type de validation Nombre entier, rien ne s'affiche dans le champ si l'utilisateur tente d'y taper une lettre.
1 Slectionnez un widget Validation de zone de texte dans la fentre de document. 2 Dans l'inspecteur Proprits (Fentre > Proprits), activez l'option Imposer modle.
Personnalisation du widget Validation de zone de texte

Bien que l'inspecteur Proprits permette d'apporter des modifications simples un widget Validation de zone de texte, il ne prend pas en charge les tches de dfinition de style personnalises. Vous pouvez modifier les rgles CSS du widget Validation de zone de texte de manire crer un widget dont le style est adapt vos besoins. Vous trouverez la liste des tches de dfinition de style avances l'adresse www.adobe.com/go/learn_dw_sprytextfield_custom_fr.
version prliminaire
Toutes les rgles CSS des sections suivantes font rfrence aux rgles par dfaut, qui figurent dans le fichier SpryValidationTextField.css. Dreamweaver enregistre le fichier SpryValidationTextField.css dans le dossier SpryAssets de votre site ds que vous crez un widget Validation de zone de texte. La consultation de ce fichier peut s'avrer utile, car il contient des informations commentes au sujet de divers styles qui s'appliquent au widget. Mme s'il est facile de modifier directement les rgles du widget Validation de zone de texte dans le fichier CSS qui l'accompagne, vous pouvez galement utiliser le panneau Styles CSS pour modifier le code CSS du widget. Le panneau Styles CSS peut vous aider trouver les classes CSS attribues diffrentes parties du widget, en particulier si vous employez le mode Actuel du panneau.
Voir aussi
Dfinition du style du texte de message d'erreur d'un widget Validation de zone de texte
Par dfaut, les messages d'erreur du widget Validation de zone de texte s'affichent en rouge, entours d'un bord pais de 1 pixel.
Pour modifier le style des messages d'erreur d'un widget Champ de texte de validation, recherchez la rgle CSS
approprie dans le tableau suivant, puis modifiez les proprits par dfaut ou ajoutez vos proprits et valeurs de style du texte:
Texte modifier Texte de message d'erreur Rgle CSS pertinente Proprits modifier
.textfieldRequiredState .textfieldRequiredMsg, .textfieldInvalidFormatState color: #CC3333; border: 1px solid .textfieldInvalidFormatMsg, .textfieldMinValueState #CC3333; .textfieldMinValueMsg, .textfieldMaxValueState .textfieldMaxValueMsg, .textfieldMinCharsState .textfieldMinCharsMsg, .textfieldMaxCharsState .textfieldMaxCharsMsg
Modification des couleurs d'arrire-plan du widget Validation de zone de texte

Pour modifier les couleurs d'arrire-plan du widget Validation de zone de texte dans diffrents tats, recherchez la
rgle CSS approprie dans le tableau suivant, puis modifiez la couleur d'arrire-plan par dfaut :
Couleur modifier Couleur d'arrire-plan du widget dans un tat valide Rgle CSS pertinente .textfieldValidState input, input.textfieldValidState Proprit modifier background-color: #B8F5B1;
Couleur d'arrire-plan du input.textfieldRequiredState, .textfieldRequiredState input, background-color: #FF9F9F; widget dans un tat non valide input.textfieldInvalidFormatState, .textfieldInvalidFormatState input, input.textfieldMinValueState, .textfieldMinValueState input, input.textfieldMaxValueState, .textfieldMaxValueState input, input.textfieldMinCharsState, .textfieldMinCharsState input, input.textfieldMaxCharsState, .textfieldMaxCharsState input Couleur d'arrire-plan du widget actif .textfieldFocusState input, input.textfieldFocusState background-color: #FFFFCC;
version prliminaire
Utilisation du widget Zone de texte de validation

A propos du widget Zone de texte de validation
Le widget Validation Spry de zone de texte est une zone de texte qui affiche des tats valides ou non valides lorsque le visiteur du site entre quelques lignes de texte. Si la zone de texte est un champ obligatoire et que l'utilisateur n'y entre pas de texte, le widget affiche un message indiquant qu'une valeur est requise. L'exemple suivant montre un widget Zone de texte de validation dans diffrents tats :
A
B
Nombre maximal de caractres dpass
D
La valeur est obligatoire
A. Compteur de caractres restants B. Widget Zone de texte activ, nombre maximal de caractres C. Widget Zone de texte activ, tat valide D. Widget Zone de texte, tat obligatoire E. Compteur de caractres taps
Le widget Zone de texte de validation peut possder divers tats (par exemple valide, non valide, valeur obligatoire, etc.). Vous pouvez modifier les proprits de ces tats l'aide de l'inspecteur Proprits, en fonction des rsultats de validation dsirs. Un widget Zone de texte de validation peut effectuer une validation diffrents moments, par exemple lorsque le visiteur clique en dehors du widget, pendant qu'il entre des donnes ou lorsqu'il tente d'envoyer le formulaire.
Etat initial Etat du widget lorsque la page se charge dans le navigateur, ou lorsque l'utilisateur rinitialise le formulaire. Etat actif Etat du widget lorsque l'utilisateur place le point d'insertion l'intrieur. Etat valide Etat du widget lorsque l'utilisateur a entr des informations correctes, ce qui permet l'envoi du formulaire. Etat obligatoire Etat du widget si l'utilisateur n'a pas entr de texte. Nombre minimal de caractres Etat du widget lorsque l'utilisateur a entr moins de caractres que le nombre minimal
requis pour la zone de texte.

Nombre maximal de caractres Etat du widget lorsque l'utilisateur a entr plus de caractres que le nombre maximal
admis pour la zone de texte. Lorsqu'un widget Zone de texte de validation passe dans l'un de ces tats suite l'interaction avec l'utilisateur, la logique du cadre applicatif Spry applique une classe CSS spcifique au conteneur HTML pour le widget lors de l'excution. Par exemple, si un utilisateur tente d'envoyer un formulaire mais n'a pas entr de texte dans la zone de texte, Spry applique au widget une classe qui le force afficher le message d'erreur Vous devez entrer une valeur . Les rgles qui contrlent le style et les tats d'affichage de messages d'erreur se trouvent dans le fichier CSS qui accompagne le widget, SpryValidationTextArea.css.
version prliminaire
Le code HTML par dfaut du widget Zone de texte de validation, gnralement dans un formulaire, contient une balise conteneur <span> qui entoure la balise <textarea> de la zone de texte. Le code HTML du widget Zone de texte de validation comprend galement des balises script dans l'en-tte du document et aprs le marquage HTML du widget. Vous trouverez une explication plus dtaille du fonctionnement du widget Zone de texte de validation, ainsi qu'une description complte de son code, l'adresse www.adobe.com/go/learn_dw_sprytextarea_fr.
Insertion et modification du widget Zone de texte de validation

Insertion du widget Zone de texte de validation
1 Choisissez Insertion > Spry > Validation Spry de zone de texte. 2 Compltez la bote de dialogue Attributs d'accessibilit des balises objet, puis cliquez sur OK.
Remarque : Vous pouvez galement insrer un widget Zone de texte de validation par l'intermdiaire de la catgorie Spry du panneau Insertion.
Voir aussi

1 Slectionnez un widget Zone de texte de validation dans la fentre de document. 2 Dans l'inspecteur Proprits (Fentre > Proprits), slectionnez l'option Valider si qui indique le moment o vous
voulez que la validation se produise. Vous pouvez activer toutes les options, ou uniquement onSubmit.
onBlur Validation quand l'utilisateur clique en dehors de la zone de texte. onChange Validation lorsque l'utilisateur modifie du texte l'intrieur de la zone de texte. onSubmit Validation lorsque l'utilisateur tente d'envoyer le formulaire. L'option onSubmit est active par dfaut et ne
Dfinition d'un nombre minimal et maximal de caractres

1 Slectionnez un widget Zone de texte de validation dans la fentre de document. 2 Dans l'inspecteur Proprits du calque (Fentre > Proprits), entrez un nombre dans la zone Nbre min. de caract.
ou Nbre max. de caract. Par exemple, si vous entrez 20 dans la zone Nbre min. de caract., le widget n'effectue la validation que si l'utilisateur entre au moins 20 caractres dans la zone de texte.
Ajout d'un compteur de caractres

Vous pouvez ajouter un compteur de caractres qui indique l'utilisateur combien de caractres il a tap ou combien il lui reste de caractres lorsqu'il entre du texte dans la zone de texte. Par dfaut, lorsque vous ajoutez un compteur de caractres, il s'affiche l'extrieur du widget, prs de son coin infrieur droit.
1 Slectionnez un widget Zone de texte de validation dans la fentre de document. 2 Dans l'inspecteur Proprits (Fentre > Proprits), activez l'option Nombre caract. ou Car. restants.
Remarque : L'option Car. restants n'est disponible que si vous avez dj fixe un nombre maximal de caractres autoriss.
version prliminaire

1 Slectionnez un widget Zone de texte de validation dans la fentre de document. 2 Dans l'inspecteur Proprits (Fentre > Proprits), slectionnez l'tat afficher dans le menu droulant Aperu des
Modification de l'tat obligatoire d'une zone de texte

Par dfaut, tous les widgets Zone de texte de validation que vous insrez l'aide de Dreamweaver exigent que l'utilisateur y entre des donnes lorsqu'ils sont publis sur une page Web. Vous pouvez toutefois stipuler que certaines zones de texte sont facultatives pour la validation.
1 Slectionnez un widget Zone de texte de validation dans la fentre de document. 2 Dans l'inspecteur Proprits (Fentre > Proprits), activez ou dsactivez l'option Obligatoire, en fonction de vos
prfrences.
Cration d'un conseil pour une zone de texte

Vous pouvez ajouter un conseil pour une zone de texte (par exemple Entrez votre description ici ) pour indiquer aux utilisateurs le type d'informations qu'ils doivent y entrer. La zone de texte affiche le conseil lorsque l'utilisateur charge la page dans un navigateur.
1 Slectionnez un widget Zone de texte de validation dans la fentre de document. 2 Dans l'inspecteur Proprits (Fentre > Proprits), entrez un conseil dans la zone Conseil.
Blocage des caractres supplmentaires

Vous pouvez empcher les utilisateurs d'entrer davantage de caractres que le nombre maximal admis dans un widget Zone de texte de validation. Par exemple, si vous activez cette option pour un widget configur de manire ne pas accepter plus de 20 caractres, l'utilisateur ne pourra pas entrer plus de 20 caractres dans la zone de texte.
1 Slectionnez un widget Zone de texte de validation dans la fentre de document. 2 Dans l'inspecteur Proprits (Fentre > Proprits), activez l'option Bloquer les caractres supplmentaires.
Personnalisation du widget Zone de texte de validation

Bien que l'inspecteur Proprits permette d'apporter des modifications simples un widget Zone de texte de validation, il ne prend pas en charge les tches de dfinition de style personnalises. Vous pouvez modifier les rgles CSS du widget Zone de texte de validation de manire crer un widget dont le style est adapt vos besoins. Vous trouverez la liste des tches de dfinition de style avances l'adresse www.adobe.com/go/learn_dw_sprytextarea_custom_fr. Toutes les rgles CSS des sections suivantes font rfrence aux rgles par dfaut, qui figurent dans le fichier SpryValidationTextArea.css. Dreamweaver enregistre le fichier SpryValidationTextArea.css dans le dossier SpryAssets de votre site ds que vous crez un widget Zone de texte de validation. La consultation de ce fichier peut s'avrer utile, car il contient des informations commentes au sujet de divers styles qui s'appliquent au widget. Mme s'il est facile de modifier directement les rgles du widget Zone de texte de validation dans le fichier CSS qui l'accompagne, vous pouvez galement utiliser le panneau Styles CSS pour modifier le code CSS du widget. Le panneau Styles CSS peut vous aider trouver les classes CSS attribues diffrentes parties du widget, en particulier si vous employez le mode Actuel du panneau.
version prliminaire
Voir aussi
Dfinition du style du texte de message d'erreur d'un widget Zone de texte de validation
Par dfaut, les messages d'erreur du widget Zone de texte de validation s'affichent en rouge, entours d'un bord pais de 1 pixel.
Pour modifier le style des messages d'erreur d'un widget Zone de texte de validation, recherchez la rgle CSS
approprie dans le tableau suivant, puis modifiez les proprits par dfaut ou ajoutez vos proprits et valeurs de style du texte :
Texte modifier Texte de message d'erreur Rgle CSS pertinente .textareaRequiredState .textareaRequiredMsg, .textareaMinCharsState .textareaMinCharsMsg, .textareaMaxCharsState .textareaMaxCharsMsg Proprits modifier color: #CC3333; border: 1px solid #CC3333;
Modification des couleurs d'arrire-plan du widget Zone de texte de validation

Pour modifier les couleurs d'arrire-plan du widget Zone de texte de validation dans diffrents tats, recherchez la
Couleur d'arrire-plan modifier Couleur d'arrire-plan du widget dans un tat valide Couleur d'arrire-plan du widget dans un tat non valide Rgle CSS pertinente .textareaValidState textarea, textarea.textareaValidState textarea.textareaRequiredState, .textareaRequiredState textarea, textarea.textareaMinCharsState, .textareaMinCharsState textarea, textarea.textareaMaxCharsState, .textareaMaxCharsState textarea .textareaFocusState textarea, textarea.textareaFocusState Proprit modifier background-color: #B8F5B1;
background-color: #FF9F9F;
Couleur d'arrire-plan du widget actif
background-color: #FFFFCC;
Utilisation du widget Validation de la slection

A propos du widget Validation de la slection
Un widget Validation de la slection Spry est un menu droulant qui affiche des tats valides ou non valides lorsque l'utilisateur effectue une slection. Par exemple, vous pouvez insrer un widget Validation de la slection contenant une liste d'tats, regroups en diffrentes sections et spars par des lignes horizontales. Si l'utilisateur slectionne par erreur l'une des lignes de sparation au lieu d'un des tats, le widget Validation de la slection affiche un message pour indiquer que la slection n'est pas valide. L'exemple suivant montre un widget Validation de la slection dvelopp, ainsi que la forme rduite de ce widget dans divers tats :
version prliminaire
C
Slectionnez un lment
D
Slectionnez un tat valide
A. Widget Validation de la slection activ B. Widget Validation de la slection, tat valide C. Widget Validation de la slection, tat obligatoire D. Widget Validation de la slection, tat non valide
Le widget Validation de la slection peut possder divers tats (par exemple valide, non valide, valeur obligatoire, etc.). Vous pouvez modifier les proprits de ces tats l'aide de l'inspecteur Proprits, en fonction des rsultats de validation dsirs. Un widget Validation de slection peut effectuer une validation diffrents moments, par exemple lorsque le visiteur clique en dehors du widget, pendant qu'il effectue une slection ou lorsqu'il tente d'envoyer le formulaire.
Etat initial Etat du widget lorsque la page se charge dans le navigateur, ou lorsque l'utilisateur rinitialise le formulaire. Etat actif Etat du widget lorsque l'utilisateur clique dessus. Etat valide Etat du widget lorsque l'utilisateur a slectionn un lment valide, ce qui permet l'envoi du formulaire. Etat non valide Etat du widget si l'utilisateur a slectionn un lment non valide. Etat obligatoire Etat du widget si l'utilisateur n'a pas slectionn d'lment valide.
Lorsqu'un widget Validation de la slection passe dans l'un de ces tats suite l'interaction avec l'utilisateur, la logique du cadre applicatif Spry applique une classe CSS spcifique au conteneur HTML pour le widget lors de l'excution. Par exemple, si un utilisateur tente d'envoyer un formulaire mais n'a pas slectionn d'lment dans le menu, Spry applique au widget une classe qui le force afficher le message d'erreur Vous devez slectionner un lment . Les rgles qui contrlent le style et les tats d'affichage de messages d'erreur se trouvent dans le fichier CSS qui accompagne le widget, SpryValidationSelect.css. Le code HTML par dfaut du widget Validation de la slection, gnralement dans un formulaire, contient une balise conteneur <span> qui entoure la balise <select> de la zone de texte. Le code HTML du widget Validation de la slection comprend galement des balises script dans l'en-tte du document et aprs le marquage HTML du widget. Vous trouverez une explication plus dtaille du fonctionnement du widget Validation de la slection, ainsi qu'une description complte de son code, l'adresse www.adobe.com/go/learn_dw_spryselect_fr.
Insertion et modification du widget Validation de la slection

Insertion du widget Validation de la slection
1 Choisissez Insertion > Spry > Validation de slection Spry. 2 Compltez la bote de dialogue Attributs d'accessibilit des balises objet, puis cliquez sur OK. 3 En mode Code, ajoutez des balises d'option contenant des lments de menu et des valeurs. Dreamweaver ne s'en
charge pas automatiquement. Pour plus d'informations, consultez la rubrique ci-dessus. Remarque : Vous pouvez galement insrer un widget Validation de la slection par l'intermdiaire de la catgorie Spry du panneau Insertion.
version prliminaire
Voir aussi

1 Slectionnez un widget Validation de la slection dans la fentre de document. 2 Dans l'inspecteur Proprits (Fentre > Proprits), slectionnez l'option qui indique le moment o vous voulez
onBlur Validation quand l'utilisateur clique en dehors du widget. onChange Validation lorsque l'utilisateur effectue des slections. onSubmit Validation lorsque l'utilisateur tente d'envoyer le formulaire. L'option onSubmit est active par dfaut et ne

1 Slectionnez un widget Validation de la slection dans la fentre de document. 2 Dans l'inspecteur Proprits (Fentre > Proprits), slectionnez l'tat afficher dans le menu droulant Aperu des
Interdiction ou autorisation de valeurs vides

Par dfaut, tous les widgets Validation de slection que vous insrez l'aide de Dreamweaver exigent que l'utilisateur slectionne des lments de menu possdant une valeur associe lorsque le widget et publi sur une page Web. Vous pouvez toutefois dsactiver cette option.
1 Slectionnez un widget Validation de la slection dans la fentre de document. 2 Dans l'inspecteur Proprits (Fentre > Proprits), activez ou dsactivez l'option Ne pas autoriser Valeur vide, en
fonction de vos prfrences.
Spcification d'une valeur incorrecte

Vous pouvez dfinir une valeur qui est considre comme non valide si l'utilisateur slectionne un lment de menu associ cette valeur. Par exemple, si vous dfinissez -1 comme valeur non valide et si vous l'attribuez une balise d'option, le widget affiche un message d'erreur si l'utilisateur slectionne cet lment de menu.
<option value="-1"> ------------------- </option>
1 Slectionnez un widget Validation de la slection dans la fentre de document. 2 Dans l'inspecteur Proprits du calque (Fentre > Proprits), entrez un nombre utiliser comme valeur non valide
dans la zone Valeur non valide.
Personnalisation du widget Validation de la slection

Bien que l'inspecteur Proprits permette d'apporter des modifications simples un widget Validation de la slection, il ne prend pas en charge les tches de dfinition de style personnalises. Vous pouvez modifier les rgles CSS du widget Validation de la slection de manire crer un widget dont le style est adapt vos besoins. Vous trouverez la liste des tches de dfinition de style avances l'adresse www.adobe.com/go/learn_dw_spryselect_custom_fr.
version prliminaire
Toutes les rgles CSS des sections suivantes font rfrence aux rgles par dfaut, qui figurent dans le fichier SpryValidationSelect.css. Dreamweaver enregistre le fichier SpryValidationSelect.css dans le dossier SpryAssets de votre site ds que vous crez un widget Validation de la slection. La consultation de ce fichier peut s'avrer utile, car il contient des informations commentes au sujet de divers styles qui s'appliquent au widget. Mme s'il est facile de modifier directement les rgles du widget Validation de la slection dans le fichier CSS qui l'accompagne, vous pouvez galement utiliser le panneau Styles CSS pour modifier le code CSS du widget. Le panneau Styles CSS peut vous aider trouver les classes CSS attribues diffrentes parties du widget, en particulier si vous employez le mode Actuel du panneau.
Voir aussi
Dfinition du style du texte de message d'erreur d'un widget Validation de la slection

Par dfaut, les messages d'erreur du widget Validation de la slection s'affichent en rouge, entours d'un bord pais de 1 pixel.
Pour modifier le style des messages d'erreur d'un widget Validation de slection, recherchez la rgle CSS approprie
dans le tableau suivant, puis modifiez les proprits par dfaut ou ajoutez vos proprits et valeurs de style du texte :
Texte mettre en forme Texte de message d'erreur Rgle CSS pertinente Proprits modifier
.selectRequiredState .selectRequiredMsg, .selectInvalidState color: #CC3333; border: 1px solid #CC3333; .selectInvalidMsg
Modification des couleurs d'arrire-plan du widget Validation de la slection

Pour modifier les couleurs d'arrire-plan du widget Validation de la slection dans diffrents tats, recherchez la
Couleur d'arrire-plan modifier Rgle CSS pertinente Proprit modifier background-color: #B8F5B1;
Couleur d'arrire-plan du widget dans un tat .selectValidState select, select.selectValidState valide Couleur d'arrire-plan du widget dans un tat select.selectRequiredState, .selectRequiredState select, non valide select.selectInvalidState, .selectInvalidState select Couleur d'arrire-plan du widget actif .selectFocusState select, select.selectFocusState
Utilisation du widget Validation de case cocher

A propos du widget Validation de case cocher
Le widget Validation de case cocher Spry est une case cocher ou un groupe de cases cocher, dans un formulaire HTML, qui affiche des tats valides ou non valide lorsque l'utilisateur active ou n'active pas une case cocher. Par exemple, vous pouvez ajouter un widget Validation de case cocher un formulaire dans lequel l'utilisateur doit effectuer trois slections. Si l'utilisateur n'effectue pas ces trois slections, le widget renvoie un message indiquant que le nombre minimal de slections n'a pas t effectu. L'exemple suivant montre un widget Validation de case cocher dans diffrents tats :
version prliminaire
A Nombre minimal de slections non effectu
Effectuez une slection
A. Groupe de widgets Validation de case cocher, nombre minimal de slections B. Widget Validation de case cocher, tat obligatoire
Le widget Validation de case cocher peut possder divers tats (par exemple valide, non valide, valeur obligatoire, etc.). Vous pouvez modifier les proprits de ces tats l'aide de l'inspecteur Proprits, en fonction des rsultats de validation dsirs. Un widget Validation de case cocher peut effectuer une validation diffrents moments, par exemple lorsque le visiteur clique en dehors du widget, pendant qu'il effectue une slection ou lorsqu'il tente d'envoyer le formulaire.
Etat initial Etat du widget lorsque la page se charge dans le navigateur, ou lorsque l'utilisateur rinitialise le formulaire. Etat valide Etat du widget lorsque l'utilisateur a effectu une slection ou le nombre correct de slections, ce qui
permet l'envoi du formulaire.

Etat obligatoire Etat du widget si l'utilisateur n'a pas effectu une slection obligatoire. Nombre minimal de slections Etat du widget lorsque l'utilisateur a slectionn moins de cases cocher que le nombre
minimal requis.
Nombre maximal de slections Etat du widget lorsque l'utilisateur a slectionn plus de cases cocher que le nombre
maximal admis. Lorsqu'un widget Validation de case cocher passe dans l'un de ces tats suite l'interaction avec l'utilisateur, la logique du cadre applicatif Spry applique une classe CSS spcifique au conteneur HTML pour le widget lors de l'excution. Par exemple, si un utilisateur tente d'envoyer un formulaire mais n'a pas effectu de slections, Spry applique au widget une classe qui le force afficher le message d'erreur Vous devez effectuer une slection . Les rgles qui contrlent le style et les tats d'affichage de messages d'erreur se trouvent dans le fichier CSS qui accompagne le widget, SpryValidationCheckbox.css. Le code HTML par dfaut du widget Validation de case cocher, gnralement dans un formulaire, contient une balise conteneur <span> qui entoure la balise <input type="checkbox"> de la zone de texte. Le code HTML du widget Validation de case cocher comprend galement des balises script dans l'en-tte du document et aprs le marquage HTML du widget. Vous trouverez une explication plus dtaille du fonctionnement du widget Validation de case cocher, ainsi qu'une description complte de son code, l'adresse www.adobe.com/go/learn_dw_sprycheckbox_fr.
Insertion et modification du widget Validation de case cocher

Insertion du widget Validation de case cocher
1 Choisissez Insertion > Spry > Validation de case cocher Spry. 2 Compltez la bote de dialogue Attributs d'accessibilit des balises objet, puis cliquez sur OK.
version prliminaire
Remarque : Vous pouvez galement insrer un widget Validation de case cocher par l'intermdiaire de la catgorie Spry du panneau Insertion.
Voir aussi

Vous pouvez fixer le moment auquel la validation se produit : quand le visiteur du site clique en dehors du widget, pendant qu'il effectue des slections ou lorsqu'il tente d'envoyer le formulaire.
1 Slectionnez un widget Validation de case cocher dans la fentre de document. 2 Dans l'inspecteur Proprits (Fentre > Proprits), slectionnez l'option qui indique le moment o vous voulez
onBlur Validation quand l'utilisateur clique en dehors de la case cocher. onChange Validation lorsque l'utilisateur effectue des slections. onSubmit Validation lorsque l'utilisateur tente d'envoyer le formulaire. L'option onSubmit est active par dfaut et ne
Dfinition d'une plage de slections minimale et maximale

Par dfaut, un widget Validation de case cocher est obligatoire. Si vous insrez plusieurs cases cocher sur la page, il est toutefois possible de spcifier une plage de slections minimale et maximale. Par exemple, si la balise <span> d'un widget Validation de case cocher contient six cases cocher et si vous voulez que l'utilisateur en slectionne au moins trois, vous pouvez dfinir une prfrence de ce type pour le widget entier.
1 Slectionnez un widget Validation de case cocher dans la fentre de document. 2 Dans l'inspecteur Proprits (Fentre > Proprits), activez l'option Imposer plage. 3 Entrez un nombre minimal ou maximal (voire les deux) de cases cocher que l'utilisateur doit activer.

1 Slectionnez un widget Validation de case cocher dans la fentre de document. 2 Dans l'inspecteur Proprits (Fentre > Proprits), slectionnez l'tat afficher dans le menu droulant Aperu des
tats. Par exemple, slectionnez Initial pour afficher le widget dans son tat initial.
Personnalisation des messages d'erreur d'un widget Validation de case cocher

Par dfaut, les messages d'erreur du widget Validation de case cocher s'affichent en rouge, entours d'un bord pais de 1 pixel. Vous pouvez modifier les rgles CSS du widget Validation de case cocher de manire crer un widget dont le style est adapt vos besoins. Vous trouverez la liste des tches de dfinition de style avances l'adresse www.adobe.com/go/learn_dw_sprycheckbox_custom_fr.
1 Ouvrez le fichier SpryValidationCheckbox.css.
Dreamweaver enregistre le fichier SpryValidationCheckbox.css dans le dossier SpryAssets de votre site ds que vous crez un widget Validation de case cocher. La consultation de ce fichier peut s'avrer utile, car il contient des informations commentes au sujet de divers styles qui s'appliquent au widget.
version prliminaire
2 Recherchez la rgle CSS approprie dans le tableau suivant, puis modifiez les proprits par dfaut ou ajoutez vos
proprits et valeurs de style du texte :

Texte mettre en forme Texte de message d'erreur Rgle CSS pertinente Proprits modifier
.checkboxRequiredState .checkboxRequiredMsg, .checkboxMinSelectionsState .checkboxMinSelectionsMsg, .checkboxMaxSelectionsState .checkboxMaxSelectionsMsg
color: #CC3333; border: 1px solid #CC3333;
Mme s'il est facile de modifier directement les rgles du widget Validation de case cocher dans le fichier CSS qui l'accompagne, vous pouvez galement utiliser le panneau Styles CSS pour modifier le code CSS du widget. Le panneau Styles CSS peut vous aider trouver les classes CSS attribues diffrentes parties du widget, en particulier si vous employez le mode Actuel du panneau.
Voir aussi
Utilisation du widget Validation de mot de passe

A propos du widget Validation de mot de passe
Le widget Validation de mot de passe Spry est un champ de texte de mot de passe que vous pouvez utiliser pour appliquer les rgles de mot de passe (par exemple, le nombre et le type de caractres). Le widget affiche des messages d'avertissement ou d'erreur en fonction des donnes saisies par l'utilisateur. Remarque : Vous devez vous tre familiaris avec les widgets de validation Spry avant de pouvoir utiliser le widget Mot de passe. S'ils ne vous sont pas familiers, consultez la rubrique Utilisation du widget Validation de zone de texte la page 457 ou toute autre prsentation du widget de validation avant de commencer. Cette prsentation n'aborde pas tous les concepts du widget de validation de base. L'exemple suivant montre un widget Validation de mot de passe dans diffrents tats :
A
Le nombre minimal de caractres n'a pas t entr.

B
Le nombre maximal de caractres a t dpass. Mindestanzahl an Zeichen nicht erreicht.

C
Une valeur est requise.
A. Widget Mot de passe, nombre minimal de caractres B. Widget Mot de passe, nombre maximal de caractres C. Widget Mot de passe, tat obligatoire
Le widget Validation de mot de passe peut possder divers tats (par exemple valide, obligatoire, nombre minimal de caractres, etc.). Vous pouvez modifier les proprits de ces tats en modifiant le fichier CSS correspondant (SpryValidationPassword.css), en fonction des rsultats de validation dsirs. Un widget Validation de mot de passe peut effectuer une validation diffrents moments, par exemple lorsque le visiteur clique en dehors de la zone de texte, pendant qu'il entre des donnes ou lorsqu'il tente d'envoyer le formulaire.
Etat initial Lorsque la page se charge dans le navigateur, ou lorsque l'utilisateur rinitialise le formulaire. Etat actif Lorsque l'utilisateur place le point d'insertion l'intrieur du widget.
version prliminaire
Etat valide Lorsque l'utilisateur a entr des informations correctes, ce qui permet l'envoi du formulaire. Etat de rsistance non valide Lorsque l'utilisateur entre du texte qui ne correspond pas aux critres de rsistance du
champ de texte de mot de passe. (Par exemple, si vous avez spcifi qu'un mot de passe doit contenir au moins deux lettres majuscules, et que le mot de passe entr ne contient aucune lettre majuscule ou uniquement une seule).
Etat obligatoire Lorsque l'utilisateur n'a pas entr du texte obligatoire dans le champ de texte. Nombre minimal de caractres Lorsque l'utilisateur a entr moins de caractres que le nombre minimal requis pour le
champ de texte de mot de passe.

Nombre maximal de caractres Lorsque l'utilisateur a entr plus de caractres que le nombre maximal admis pour le champ de texte de mot de passe.
Vous trouverez une explication plus dtaille du fonctionnement des widgets Validation de mot de passe, ainsi que des informations supplmentaires sur la structure du widget, l'adresse www.adobe.com/go/learn_dw_sprypassword_fr.
Voir aussi
Exemples de widget Validation de mot de passe
Insertion et modification du widget Validation de mot de passe

Insertion du widget Validation de mot de passe
1 Choisissez Insertion > Spry > Validation de mot de passe Spry. 2 Compltez la bote de dialogue Attributs d'accessibilit des balises objet, puis cliquez sur OK.
Remarque : Vous pouvez galement insrer un widget Validation de mot de passe par l'intermdiaire de la catgorie Spry du panneau Insertion.
Voir aussi
Modification de l'tat obligatoire d'un widget Validation de mot de passe

Par dfaut, tous les widgets Validation de mot de passe que vous insrez l'aide de Dreamweaver exigent que l'utilisateur y entre des donnes lorsqu'ils sont publis sur une page Web. Vous pouvez toutefois rendre la saisie de mot de passe dans certaines zones facultative pour l'utilisateur.
1 Slectionnez un widget Validation de mot de passe dans la fentre de document en cliquant sur son onglet bleu. 2 Dans l'inspecteur Proprits (Fentre > Proprits), activez ou dsactivez l'option Obligatoire, en fonction de vos
prfrences.

1 Slectionnez un widget Validation de mot de passe dans la fentre de document en cliquant sur son onglet bleu. 2 Dans l'inspecteur Proprits (Fentre > Proprits), slectionnez l'tat afficher dans le menu droulant Aperu des
version prliminaire

1 Slectionnez un widget Validation de mot de passe dans la fentre de document en cliquant sur son onglet bleu. 2 Dans l'inspecteur Proprits (Fentre > Proprits), slectionnez l'option qui indique le moment o vous voulez
onBlur Validation quand l'utilisateur clique en dehors du champ de texte de mot de passe. onChange Validation lorsque l'utilisateur modifie du texte l'intrieur du champ de texte de mot de passe. onSubmit Validation lorsque l'utilisateur tente d'envoyer le formulaire. L'option onSubmit est active par dfaut et ne
Dfinition de la rsistance de mot de passe

La rsistance de mot de passe dsigne le degr auquel les combinaisons de certains caractres remplissent les exigences d'un champ de texte de mot de passe. Par exemple, si vous avez cr un formulaire dans lequel les utilisateurs slectionnent un mot de passe, vous pouvez les forcer inclure un certain nombre de lettres majuscules dans le mot de passe, un certain nombre de caractres spciaux, etc. Remarque : Par dfaut, aucune des options disponibles n'est dfinie pour le widget Mot de passe.
1 Cliquez sur l'onglet bleu du widget Validation de mot de passe pour le slectionner. 2 Dfinissez les options dans l'inspecteur Proprits (Fentre > Proprits) votre convenance. Les nombres que vous
entrez dans les champs d'option sont les nombres requis en vue de la validation du widget. Par exemple, si vous entrez dans la zone Nombre minimal de caractres, le widget n'effectuera pas la validation tant que l'utilisateur n'aura pas entr au moins 8 caractres dans la zone du mot de passe.
Nombre minimal/maximal de caractres Spcifie le nombre minimal et maximal de caractres requis pour que le mot
de passe soit valide.

Nombre minimal/maximal de lettres Spcifie le nombre minimal et maximal de lettres (a, b, c, etc.) requis pour que le
mot de passe soit valide.

Nombre minimal/maximal de nombres Spcifie le nombre minimal et maximal de nombres (1, 2, 3, etc.) requis pour
que le mot de passe soit valide.

Nombre minimal/maximal de majuscules Spcifie le nombre minimal et maximal de lettres majuscules (A, B, C, etc.)
requis pour que le mot de passe soit valide.

Nombre minimal/maximal de caractres spciaux Spcifie le nombre minimal et maximal de caractres spciaux (!, @,
#, etc.) requis pour que le mot de passe soit valide. Si vous laissez l'une des options ci-dessus vides, le widget n'effectuera pas de validation par rapport ce critre. Par exemple, si vous laissez l'option du nombre minimal/maximal de chiffres vide, le widget ne recherche pas les chiffres dans la chane du mot de passe.
Personnalisation du widget Validation de mot de passe

Bien que l'inspecteur Proprits permette d'apporter des modifications simples un widget Validation de mot de passe, il ne prend pas en charge les tches de dfinition de style personnalises. Vous pouvez modifier les rgles CSS du widget Validation de mot de passe de manire crer un widget dont le style est adapt vos besoins. Vous trouverez la liste des tches de dfinition de style avances l'adresse www.adobe.com/go/learn_dw_sprypassword_custom_fr.
version prliminaire
Toutes les rgles CSS des sections suivantes font rfrence aux rgles par dfaut, qui figurent dans le fichier SpryValidationPassword.css. Dreamweaver enregistre le fichier SpryValidationPassword.css dans le dossier SpryAssets de votre site ds que vous crez un widget Validation de mot de passe Spry. La consultation de ce fichier peut s'avrer utile, car il contient des informations commentes au sujet de divers styles qui s'appliquent au widget. Mme s'il est facile de modifier directement les rgles du widget Validation de mot de passe dans le fichier CSS qui l'accompagne, vous pouvez galement utiliser le panneau Styles CSS pour modifier le code CSS du widget. Le panneau Styles CSS peut vous aider trouver les classes CSS attribues diffrentes parties du widget, en particulier si vous employez le mode Actuel du panneau.
Voir aussi
Dfinition du style du widget Validation de mot de passe (instructions gnrales)

1 Ouvrez le fichier SpryValidationPassword.css. 2 Accdez la rgle CSS pour la partie du widget modifier. Par exemple, pour modifier la couleur d'arrire-plan de
l'tat obligatoire du widget Mot de passe, modifiez la rgle input.passwordRequiredState dans le fichier SpryValidationPassword.css.
3 Apportez les modifications dsires au code CSS puis enregistrez le fichier.
Le fichier SpryValidationPassword.css contient de nombreux commentaires qui expliquent le code et le rle de certaines rgles. Pour plus d'informations, consultez les commentaires dans le fichier.
Dfinition du style du texte de message d'erreur d'un widget Validation de mot de passe
Par dfaut, les messages d'erreur du widget Validation de mot de passe s'affichent en rouge, entours d'un bord plein de 1 pixel d'paisseur.
Pour modifier le style des messages d'erreur d'un widget Validation de mot de passe, recherchez la rgle CSS
approprie dans le tableau suivant, puis modifiez les proprits par dfaut ou ajoutez vos proprits et valeurs de style du texte.
Texte modifier Texte de message d'erreur Rgle CSS pertinente .passwordRequiredState .passwordRequiredMsg, .passwordMinCharsState .passwordMinCharsMsg, .passwordMaxCharsState .passwordMaxCharsMsg, .passwordInvalidStrengthState .passwordInvalidStrengthMsg, .passwordCustomState .passwordCustomMsg Proprits modifier color: #CC3333; border: 1px solid #CC3333;
Modification des couleurs d'arrire-plan du widget Validation de mot de passe

Pour modifier les couleurs d'arrire-plan du widget Validation de mot de passe dans diffrents tats, recherchez la
rgle CSS approprie dans le tableau suivant, puis modifiez la couleur d'arrire-plan par dfaut.
version prliminaire
Couleur modifier Couleur d'arrire-plan du widget dans un tat valide Couleur d'arrire-plan du widget dans un tat non valide
Rgle CSS pertinente .passwordValidState input, input.passwordValidState
Proprit modifier background-color: #B8F5B1;
input.passwordRequiredState, .passwordRequiredState input, input.passwordInvalidStrengthState, .passwordInvalidStrengthState input, input.passwordMinCharsState, .passwordMinCharsState input, input.passwordCustomState, .passwordCustomState input, input.passwordMaxCharsState, .passwordMaxCharsState input .passwordFocusState input, input.passwordFocusState
Couleur d'arrire-plan du widget actif
Utilisation du widget Validation de confirmation

A propos du widget Validation de confirmation
Le widget Validation de confirmation est un champ de texte ou un champ de formulaire de mot de passe qui affiche des tats valides ou non valides lorsqu'un utilisateur entre une valeur ne correspondant pas celle d'un champ similaire du mme formulaire. Par exemple, vous pouvez ajouter un widget Validation de confirmation un formulaire qui oblige un utilisateur ressaisir le mot de passe qu'il a spcifi dans un champ prcdent. Si l'utilisateur ne parvient pas saisir le mot de passe exactement comme il l'a spcifi auparavant, le widget renvoie un message d'erreur indiquant que les valeurs ne correspondent pas. Vous pouvez galement utiliser un widget Validation de confirmation en combinaison avec un widget Validation de mot de passe afin de valider les adresses e-mail. Remarque : Vous devez vous tre familiaris avec les widgets de validation Spry avant de pouvoir utiliser le widget Confirmation. S'ils ne vous sont pas familiers, consultez la rubrique Utilisation du widget Validation de zone de texte la page 457 ou toute autre prsentation du widget de validation avant de commencer. Cette prsentation n'aborde pas tous les concepts du widget de validation de base. L'illustration ci-dessous montre une configuration type d'un widget Confirmation :
A
A. Champ de mot de passe ou widget Validation de mot de passe Spry B. Widget Confirmation
Le widget Validation de confirmation peut possder divers tats (par exemple valide, non valide, obligatoire, etc.). Vous pouvez modifier les proprits de ces tats en modifiant le fichier CSS correspondant (SpryValidationConfirm.css), en fonction des rsultats de validation dsirs. Un widget Validation de confirmation peut effectuer une validation diffrents moments, par exemple lorsque le visiteur clique en dehors du widget, pendant qu'il entre des donnes ou lorsqu'il tente d'envoyer le formulaire.
Etat initial Lorsque la page se charge dans le navigateur, ou lorsque l'utilisateur rinitialise le formulaire. Etat actif Lorsque l'utilisateur place le point d'insertion l'intrieur du widget. Etat valide Lorsque l'utilisateur a entr des informations correctes, ce qui permet l'envoi du formulaire.
version prliminaire
Etat non valide Lorsqu'un utilisateur entre du texte qui ne correspond pas celui entr dans une zone de texte
prcdente, un widget Validation de zone de texte ou un widget Validation de mot de passe.

Etat obligatoire Lorsque l'utilisateur n'a pas entr du texte obligatoire dans le champ de texte.
Vous trouverez une explication plus dtaille du fonctionnement des widgets Validation de confirmation, ainsi que des informations supplmentaires sur la structure du widget, l'adresse www.adobe.com/go/learn_dw_spryconfirm_fr.
Voir aussi
Exemples de widget Validation de confirmation
Insertion et modification du widget Validation de confirmation

Insertion du widget Validation de confirmation
1 Choisissez Insertion > Spry > Validation de confirmation Spry. 2 Compltez la bote de dialogue Attributs d'accessibilit des balises objet, puis cliquez sur OK.
Remarque : Vous pouvez galement insrer un widget Validation de confirmation par l'intermdiaire de la catgorie Spry du panneau Insertion.
Voir aussi
Modification de l'tat obligatoire d'un widget Validation de confirmation

Par dfaut, tous les widgets Validation de confirmation que vous insrez l'aide de Dreamweaver exigent que l'utilisateur y entre des donnes lorsqu'ils sont publis sur une page Web. Vous pouvez toutefois rendre la saisie de texte de confirmation dans certaines zones facultative pour l'utilisateur.
1 Slectionnez un widget Validation de confirmation dans la fentre de document en cliquant sur son onglet bleu. 2 Dans l'inspecteur Proprits (Fentre > Proprits), activez ou dsactivez l'option Obligatoire, en fonction de vos
prfrences.
Spcification du champ de texte utiliser pour la validation

1 Slectionnez un widget Validation de confirmation dans la fentre de document en cliquant sur son onglet bleu. 2 Dans l'inspecteur Proprits (Fentre > Proprits), slectionnez le champ de texte utiliser pour la validation dans
le menu droulant Utiliser pour la validation. Tous les champs de texte possdant des ID uniques apparaissent en tant qu'options dans le menu droulant.

1 Slectionnez un widget Validation de confirmation dans la fentre de document en cliquant sur son onglet bleu. 2 Dans l'inspecteur Proprits (Fentre > Proprits), slectionnez l'tat afficher dans le menu droulant Aperu des
version prliminaire

1 Slectionnez un widget Validation de confirmation dans la fentre de document en cliquant sur son onglet bleu. 2 Dans l'inspecteur Proprits (Fentre > Proprits), slectionnez l'option qui indique le moment o vous voulez
onBlur Validation quand l'utilisateur clique en dehors du champ de texte de confirmation. onChange Validation lorsque l'utilisateur modifie du texte l'intrieur du champ de texte de confirmation. onSubmit Validation lorsque l'utilisateur tente d'envoyer le formulaire. L'option onSubmit est active par dfaut et ne
Personnalisation du widget Validation de confirmation

Bien que l'inspecteur Proprits permette d'apporter des modifications simples un widget Validation de confirmation, il ne prend pas en charge les tches de dfinition de style personnalises. Vous pouvez modifier les rgles CSS du widget Validation de confirmation de manire crer un widget dont le style est adapt vos besoins. Vous trouverez la liste des tches de dfinition de style avances l'adresse www.adobe.com/go/learn_dw_spryconfirm_custom_fr. Toutes les rgles CSS des sections suivantes font rfrence aux rgles par dfaut, qui figurent dans le fichier SpryValidationConfirm.css. Dreamweaver enregistre le fichier SpryValidationConfirm.css dans le dossier SpryAssets de votre site ds que vous crez un widget Validation de confirmation Spry. La consultation de ce fichier peut s'avrer utile, car il contient des informations commentes au sujet de divers styles qui s'appliquent au widget. Mme s'il est facile de modifier directement les rgles du widget Validation de confirmation dans le fichier CSS qui l'accompagne, vous pouvez galement utiliser le panneau Styles CSS pour modifier le code CSS du widget. Le panneau Styles CSS peut vous aider trouver les classes CSS attribues diffrentes parties du widget, en particulier si vous employez le mode Actuel du panneau.
Voir aussi
Dfinition du style du widget Validation de confirmation (instructions gnrales)

1 Ouvrez le fichier SpryValidationConfirm.css. 2 Accdez la rgle CSS pour la partie du widget modifier. Par exemple, pour modifier la couleur d'arrire-plan de
l'tat obligatoire du widget Confirmation, modifiez la rgle input.confirmRequiredState dans le fichier SpryValidationConfirm.css.
3 Apportez les modifications dsires au code CSS puis enregistrez le fichier.
Le fichier SpryValidationConfirm.css contient de nombreux commentaires qui expliquent le code et le rle de certaines rgles. Pour plus d'informations, consultez les commentaires dans le fichier.
version prliminaire
Dfinition du style du texte de message d'erreur d'un widget Validation de confirmation

Par dfaut, les messages d'erreur du widget Validation de confirmation s'affichent en rouge, entours d'un bord plein de 1 pixel d'paisseur.
Pour modifier le style des messages d'erreur d'un widget Validation de confirmation, recherchez la rgle CSS
approprie dans le tableau suivant, puis modifiez les proprits par dfaut ou ajoutez vos proprits et valeurs de style du texte.
Texte modifier Texte de message d'erreur Rgle CSS pertinente .confirmRequiredState .confirmRequiredMsg, .confirmInvalidState .confirmInvalidMsg Proprits modifier color: #CC3333; border: 1px solid #CC3333;
Modification des couleurs d'arrire-plan du widget Validation de confirmation

Pour modifier les couleurs d'arrire-plan du widget Validation de confirmation dans diffrents tats, recherchez la
rgle CSS approprie dans le tableau suivant, puis modifiez la couleur d'arrire-plan par dfaut.
Couleur modifier Couleur d'arrire-plan du widget dans un tat valide Couleur d'arrire-plan du widget dans un tat non valide Couleur d'arrire-plan du widget actif Rgle CSS pertinente .confirmValidState input, input.confirmValidState Proprit modifier background-color: #B8F5B1;
input.confirmRequiredState, .confirmRequiredState input, input.confirmInvalidState, .confirmInvalidState input
.confirmFocusState input, input.confirmFocusState
Affichage de donnes l'aide de Spry

A propos des ensembles de donnes Spry
Un ensemble de donnes Spry est essentiellement un objet JavaScript qui contient une collection de donnes que vous dfinissez. Dreamweaver vous permet de crer rapidement cet objet et d'y charger des donnes partir d'une source de donnes (comme un fichier XML ou HTML). L'ensemble de donnes produit une plage de donnes, sous la forme d'un tableau standard compos de lignes et de colonnes. Lorsque vous crez un ensemble de donnes avec Dreamweaver, vous pouvez galement dfinir comment afficher les donnes sur une page Web. L'on peut considrer un ensemble de donnes comme un conteneur virtuel dont la structure consiste en lignes et en colonnes. Il se prsente sous la forme d'un objet JavaScript dont les informations ne sont visibles que lorsque vous stipulez prcisment comment les afficher sur la page Web. Vous pouvez afficher toutes les donnes de ce conteneur, ou dcider de n'afficher qu'une slection parmi celles-ci. Vous trouverez toutes les informations relatives au fonctionnement des ensembles de donnes Spry l'adresse www.adobe.com/go/learn_dw_sdg_sprydataset_fr. Vous trouverez un didacticiel vido sur l'utilisation des ensembles de donnes Spry, ralis par l'quipe de Dreamweaver, l'adresse www.adobe.com/go/dw10datasets_fr. Vous trouverez un didacticiel vido sur l'utilisation des ensembles de donnes Spry l'adresse www.adobe.com/go/lrvid4047_dw_fr.
version prliminaire
Cration d'un ensemble de donnes Spry

Cration d'un ensemble de donnes HTML Spry
1 Si vous ne procdez qu' la cration d'un ensemble de donnes, il n'est pas ncessaire de vous intresser au point
d'insertion. Si vous crez un ensemble de donnes et insrez galement une disposition, veillez ce que le point d'insertion se trouve l'endroit o vous voulez insrer la disposition sur la page.
2 Choisissez Insertion > Spry > Ensemble de donnes Spry. 3 Dans la fentre Dfinir la source des donnes, effectuez les oprations suivantes :
Choisissez HTML dans la liste droulante Slectionner le type de donnes. Cette option est active par dfaut. Donnez un nom au nouvel ensemble de donnes. Le nom par dfaut est ds1 lors de la premire cration d'un
ensemble de donnes. Le nom de l'ensemble de donnes peut contenir des lettres, des chiffres et des caractres de soulignement, mais il ne peut pas dbuter par un chiffre.
Dfinissez les lments de donnes, dans votre source de donnes, que Dreamweaver doit dtecter. Par exemple,
si vous avez organis vos donnes l'intrieur d'une balise div et que vous voulez que Dreamweaver dtecte les balises div au lieu des tableaux, choisissez Divs dans la liste droulante Dtecter. L'option Personnalis vous permet d'entrer n'importe quel nom de balise dtecter.
Indiquez le chemin d'accs au fichier contenant votre source de donnes HTML. Il peut s'agir d'un chemin relatif
un fichier local de votre site (par exemple donnes/donnes_html.html), ou d'une URL absolue vers une page Web publie ( l'aide du protocole HTTP ou HTTPS). Vous pouvez cliquer sur le bouton Parcourir afin d'accder un fichier local puis le slectionner. Dreamweaver rend la source de donnes HTML dans la fentre Slection de donnes et affiche des repres visuels pour les lments susceptibles de servir de conteneurs l'ensemble de donnes. L'lment que vous voulez utiliser doit dj possder un ID unique. Si ce n'est pas le cas, Dreamweaver affiche un message d'erreur, et vous devrez revenir la source de donnes afin d'attribuer un ID unique. Par ailleurs, les lments susceptibles d'tre slectionns, dans le fichier source des donnes, ne peuvent pas se trouver dans des rgions Spry ni contenir d'autres rfrences de donnes. Alternativement, vous pouvez dfinir un flux de conception comme source de donnes. Pour plus d'informations, voir Utilisation d'un flux de conception la page 487.
Slectionnez l'lment pour votre conteneur de donnes en cliquant sur l'une des flches jaunes qui s'affichent
dans la fentre Slection de donnes, ou en choisissant un ID dans la liste droulante Conteneurs de donnes.
version prliminaire
Slection de l'lment pour le conteneur de donnes de l'ensemble de donnes HTML.
Si votre fichier est de grande taille, vous pouvez cliquer sur la flche Dvelopper/Rduire dans le bas de la fentre Slection de donnes afin d'afficher davantage de donnes. Lorsque vous avez slectionn l'lment de donnes pour l'ensemble de donnes, Dreamweaver affiche un aperu de l'ensemble dans la fentre Aperu des donnes.
(Facultatif) Activez l'option Slection de donnes avance si vous voulez dfinir des slecteurs CSS pour
l'ensemble de donnes. Par exemple, si vous avez indiqu .product dans la zone Slecteurs de lignes et .boximage dans la zone Slecteurs de colonnes, l'ensemble de donnes contiendra uniquement les lignes auxquelles la classe .product a t attribue, et uniquement les colonnes possdant la classe .boximage. Si vous voulez entrer plusieurs slecteurs dans une zone de texte prcise, sparez chacun d'eux par une virgule. Pour plus d'informations, voir A propos des slecteurs de donnes Spry la page 488.
Lorsque vous avez termin d'utiliser la fentre Dfinir la source des donnes, cliquez sur Termin pour crer
immdiatement l'ensemble de donnes, ou cliquez sur Suivant pour accder la fentre Dfinir les options des donnes. Si vous cliquez sur Termin, l'ensemble de donnes est disponible dans le panneau Liaisons (Fentre > Liaisons).
version prliminaire
4 Dans la fentre Dfinir les options des donnes, effectuez les oprations suivantes :
(Facultatif) Dfinissez les types de colonnes de l'ensemble de donnes en slectionnant une colonne, puis en
effectuant une slection dans la liste droulante Type. Par exemple, si une colonne de l'ensemble de donnes contient des nombres, slectionnez cette colonne puis choisissez Nombre dans la liste droulante Type. Cette option n'est importante que si vous voulez que les utilisateurs puissent trier les donnes sur la base de cette colonne. Vous pouvez slectionner une colonne dans l'ensemble de donnes en cliquant sur son titre, en la slectionnant dans la liste droulante Nom de colonne, ou en y accdant l'aide des flches vers la gauche et la droite situes dans le coin suprieur gauche de la fentre.
(Facultatif) Dterminez comment les donnes doivent tre tries, en slectionnant la colonne sur laquelle le tri
doit tre bas dans la liste droulante Colonne de tri. Lorsque vous avez slectionn la colonne, vous pouvez dterminer si elle doit tre trie dans l'ordre croissant ou dcroissant.
(Facultatif : tableaux uniquement) Dsactivez l'option Utiliser la premire ligne comme en-tte si vous voulez
employer des noms de colonnes gnriques (c.--d. column0, column1, column2, etc.) au lieu des noms de colonnes dfinis dans votre source de donnes HTML. Remarque : Si vous avez slectionn autre chose qu'un tableau comme lment conteneur de votre ensemble de donnes, cette option et la suivante ne sont pas disponibles. Dreamweaver utilise automatiquement column0, column1, column2, et ainsi de suite, comme nom des colonnes des ensembles de donnes non bass sur un tableau.
(Facultatif : tableaux uniquement) Activez l'option Utiliser les colonnes comme lignes pour permuter
l'orientation horizontale et verticale des donnes dans l'ensemble de donnes. Si vous activez cette option, les colonnes seront utilises comme lignes.
(Facultatif) Activez l'option Filtrer les lignes en double pour exclure les lignes de donnes en double de
l'ensemble de donnes.
(Facultatif) Activez l'option Dsactiver la mise en cache des donnes si vous voulez toujours avoir accs aux
donnes les plus rcentes de l'ensemble de donnes. Si vous voulez que les donnes s'actualisent automatiquement, activez l'option Actualiser automatiquement les donnes puis dfinissez un intervalle d'actualisation, en millisecondes.
Lorsque vous avez termin d'utiliser la fentre Dfinir les options des donnes, cliquez sur Termin pour crer
immdiatement l'ensemble de donnes, ou cliquez sur Suivant pour accder la fentre Choisir les options d'insertion. Si vous cliquez sur Termin, l'ensemble de donnes est disponible dans le panneau Liaisons (Fentre > Liaisons).
5 Dans la fentre Choisir les options d'insertion, effectuez l'une des oprations suivantes :
Slectionnez la disposition du nouvel ensemble de donnes et dfinissez les options de configuration

appropries. Pour plus d'informations, voir Slection d'une disposition pour l'ensemble de donnes la page 484.
Activez l'option Ne pas insrer de code HTML. Si vous activez cette option, Dreamweaver cre l'ensemble de
donnes, mais n'ajoute pas de code HTML la page. L'ensemble de donnes est disponible dans le panneau Liaisons (Fentre > Liaisons), et vous pouvez tirer manuellement des donnes sur la page partir de l'ensemble de donnes.
version prliminaire
Dreamweaver cre l'ensemble de donnes et, si vous avez choisi une option de disposition, affiche la disposition et les espaces rservs pour les donnes sur votre page. En mode Code, vous pouvez constater que Dreamweaver a ajout des rfrences, dans l'en-tte, aux fichiers SpryData.js et SpryHTMLDataSet.js. Ces fichiers sont d'importants actifs Spry qui fonctionnent en combinaison avec la page. Veillez ne pas supprimer ce code de la page, faute de quoi l'ensemble de donnes ne fonctionnera pas. Lorsque vous chargez votre page sur un serveur, vous devez galement charger ces fichiers, en tant que fichiers dpendants.
Cration d'un ensemble de donnes XML Spry

1 Si vous ne procdez qu' la cration d'un ensemble de donnes, il n'est pas ncessaire de vous intresser au point
d'insertion. Si vous crez un ensemble de donnes et insrez galement une disposition, veillez ce que le point d'insertion se trouve l'endroit o vous voulez insrer la disposition sur la page.
2 Choisissez Insertion > Spry > Ensemble de donnes Spry. 3 Dans la fentre Dfinir la source des donnes, effectuez les oprations suivantes :
Choisissez XML dans la liste droulante Slectionner le type de donnes. Donnez un nom au nouvel ensemble de donnes. Le nom par dfaut est ds1 lors de la premire cration d'un
ensemble de donnes. Le nom de l'ensemble de donnes peut contenir des lettres, des chiffres et des caractres de soulignement, mais il ne peut pas dbuter par un chiffre.
Indiquez le chemin d'accs au fichier contenant votre source de donnes XML. Il peut s'agir d'un chemin relatif
un fichier local de votre site (par exemple donnes/donnes.xml), ou d'une URL absolue vers une page sur le Web ( l'aide du protocole HTTP ou HTTPS). Vous pouvez cliquer sur le bouton Parcourir afin d'accder un fichier local puis le slectionner. Dreamweaver rend la source de donnes XML dans la fentre Elments de ligne et affiche l'arborescence XML des lments de donnes pouvant tre slectionns. Les lments rpts sont indiqus par un signe plus (+), et les lments enfants sont mis en retrait. Alternativement, vous pouvez dfinir un flux de conception comme source de donnes. Pour plus d'informations, voir Utilisation d'un flux de conception la page 487.
Slectionnez l'lment qui contient les donnes afficher. En rgle gnrale, il s'agit d'un lment rpt, tel que
<menu_item>, avec plusieurs lments enfants tels que <item>, <link>, <description>, etc.
version prliminaire
Slection d'un lment rpt pour l'ensemble de donnes XML.
Lorsque vous avez slectionn l'lment de donnes pour l'ensemble de donnes, Dreamweaver affiche un aperu de l'ensemble dans la fentre Aperu des donnes. La zone XPath affiche une expression qui indique l'emplacement du nud slectionn dans le fichier XML source. Remarque : XPath (XML Path Language) est une syntaxe destine traiter des parties d'un document XML. Elle est essentiellement utilise comme langage de requtes pour des donnes XML, tout comme le langage SQL est utilis pour des requtes de bases de donnes. Pour plus d'informations sur XPath, consultez les spcifications du langage XPath sur le site Web du W3C, l'adresse www.w3.org/TR/xpath.
Lorsque vous avez termin d'utiliser la fentre Dfinir la source des donnes, cliquez sur Termin pour crer
immdiatement l'ensemble de donnes, ou cliquez sur Suivant pour accder la fentre Dfinir les options des donnes. Si vous cliquez sur Termin, l'ensemble de donnes est disponible dans le panneau Liaisons (Fentre > Liaisons).
4 Dans la fentre Dfinir les options des donnes, effectuez les oprations suivantes :
(Facultatif) Dfinissez les types de colonnes de l'ensemble de donnes en slectionnant une colonne, puis en
effectuant une slection dans la liste droulante Type. Par exemple, si une colonne de l'ensemble de donnes contient des nombres, slectionnez cette colonne puis choisissez Nombre dans la liste droulante Type. Cette option n'est importante que si vous voulez que les utilisateurs puissent trier les donnes sur la base de cette colonne. Vous pouvez slectionner une colonne dans l'ensemble de donnes en cliquant sur son titre, en la slectionnant dans la liste droulante Nom de colonne, ou en y accdant l'aide des flches vers la gauche et la droite situes dans le coin suprieur gauche de la fentre.
version prliminaire
(Facultatif) Dterminez comment les donnes doivent tre tries, en slectionnant la colonne sur laquelle le tri
doit tre bas dans la liste droulante Colonne de tri. Lorsque vous avez slectionn la colonne, vous pouvez dterminer si elle doit tre trie dans l'ordre croissant ou dcroissant.
(Facultatif) Activez l'option Filtrer les lignes en double pour exclure les lignes de donnes en double de
l'ensemble de donnes.
(Facultatif) Activez l'option Dsactiver la mise en cache des donnes si vous voulez toujours avoir accs aux
donnes les plus rcentes de l'ensemble de donnes. Si vous voulez que les donnes s'actualisent automatiquement, activez l'option Actualiser automatiquement les donnes puis dfinissez un intervalle d'actualisation, en millisecondes.
Lorsque vous avez termin d'utiliser la fentre Dfinir les options des donnes, cliquez sur Termin pour crer
immdiatement l'ensemble de donnes, ou cliquez sur Suivant pour accder la fentre Choisir les options d'insertion. Si vous cliquez sur Termin, l'ensemble de donnes est disponible dans le panneau Liaisons (Fentre > Liaisons).
5 Dans la fentre Choisir les options d'insertion, effectuez l'une des oprations suivantes :
Slectionnez la disposition du nouvel ensemble de donnes et dfinissez les options de configuration

appropries. Pour plus d'informations, voir Slection d'une disposition pour l'ensemble de donnes la page 484.
Activez l'option Ne pas insrer de code HTML. Si vous activez cette option, Dreamweaver cre l'ensemble de
donnes, mais n'ajoute pas de code HTML la page. L'ensemble de donnes est disponible dans le panneau Liaisons (Fentre > Liaisons), et vous pouvez tirer manuellement des donnes sur la page partir de l'ensemble de donnes.
Dreamweaver cre l'ensemble de donnes et, si vous avez choisi une option de disposition, affiche la disposition et les espaces rservs pour les donnes sur votre page. En mode Code, vous pouvez constater que Dreamweaver a ajout des rfrences, dans l'en-tte, aux fichiers xpath.js et SpryData.js. Ces fichiers sont d'importants actifs Spry qui fonctionnent en combinaison avec la page. Veillez ne pas supprimer ce code de la page, faute de quoi l'ensemble de donnes ne fonctionnera pas. Lorsque vous chargez votre page sur un serveur, vous devez galement charger ces fichiers, en tant que fichiers dpendants.
Slection d'une disposition pour l'ensemble de donnes

La fentre Choisir les options d'insertion permet de slectionner diverses options d'affichage des valeurs de l'ensemble de donnes sur la page. Vous pouvez afficher les donnes l'aide d'un tableau Spry dynamique, d'une disposition principale/dtails, d'une disposition conteneurs empils (colonne unique) ou conteneurs empils avec zone focalisable (deux colonnes). Une vignette reprsentant l'apparence de chaque disposition s'affiche dans la fentre Choisir les options d'insertion. Tableau dynamique Activez cette option si vous voulez afficher vos donnes dans un tableau Spry dynamique. Les tableaux Spry permettent le tri dynamique des colonnes et d'autres comportements interactifs. Lorsque vous avez activ cette option, cliquez sur le bouton Configurer pour ouvrir la bote de dialogue Insrer un tableau, puis procdez comme suit :
1 Dans le panneau Colonnes, ajustez les colonnes du tableau en procdant comme suit :
Slectionnez le nom d'une colonne puis cliquez sur le signe moins (-) pour la supprimer du tableau. Cliquez sur
le signe plus (+) puis slectionnez le nom d'une colonne pour l'ajouter au tableau.
version prliminaire
Slectionnez le nom d'une colonne puis cliquez sur la flche vers le haut ou vers le bas pour la dplacer. Si vous
faites monter une colonne, elle se trouvera davantage sur la gauche du tableau affich, et sur la droite si vous la faites descendre.
2 Pour autoriser le tri dans une colonne, slectionnez-la dans le panneau Colonnes, puis activez l'option Trier la
colonne en cas de clic sur len-tte. Par dfaut, toutes les colonnes peuvent faire l'objet d'un tri. Si vous voulez dsactiver le tri dans une colonne, slectionnez son nom dans le panneau Colonnes, puis dsactivez l'option Trier la colonne en cas de clic sur len-tte.
3 Si des styles CSS sont associs votre page, sous la forme d'une feuille de style jointe ou d'un ensemble de styles
individuels dans la page HTML, vous pouvez appliquer une classe CSS pour une ou plusieurs des options suivantes :
Classe de ligne impaire Modifie l'apparence des lignes impaires dans le tableau dynamique en fonction du style de
classe slectionn.
Classe de ligne paire Modifie l'apparence des lignes paires dans le tableau dynamique en fonction du style de classe
slectionn.
Classe de survol Modifie l'apparence d'une ligne du tableau lorsque vous amenez le pointeur de la souris au-dessus
d'elle, en fonction du style de classe slectionn.

Slectionner une classe Modifie l'apparence d'une ligne du tableau lorsque vous cliquez dessus, en fonction du
style de classe slectionn. Remarque : L'ordre des classes impaire , paire , survol et slection dans votre feuille de style est trs important. Les rgles doivent tre prcisment places dans l'ordre indiqu ci-dessus (impaire, paire, survol, slection). Si la rgle de survol est place sous la rgle de slection dans la feuille de style, l'effet de survol ne sera visible que lorsque l'utilisateur survolera une autre ligne. Si les rgles de survol et de slection figurent au-dessus des rgles impaire et paire dans la feuille de style, les effets impaire et paire ne fonctionneront pas du tout. Vous pouvez tirer les rgles dans le panneau CSS afin de les placer au bon endroit, ou manipuler directement le code CSS.
4 Si le tableau que vous crez doit devenir un tableau principal dynamique Spry, activez l'option Mettre jour les
rgions dtailles en cas de clic sur une ligne. Pour plus d'informations, voir A propos des tableaux principaux Spry et de la mise jour des rgions dtailles la page 488.
5 Cliquez sur OK pour fermer la bote de dialogue, puis sur Terminer dans la fentre Choisir les options d'insertion.
Si vous tes en mode Cration, le tableau s'affiche avec une ligne d'en-ttes et une ligne de rfrences de donnes. Les rfrences de donnes sont mises en surbrillance et entoures d'accolades ({}). Disposition Principale/Dtails Activez cette option si vous voulez afficher vos donnes selon une disposition principale/dtails. La disposition principale/dtails permet l'utilisateur de cliquer sur un lment dans la rgion principale ( gauche) de manire actualiser les informations dans la rgion de dtails ( droite). En rgle gnrale, la rgion principale contient une longue liste de noms, par exemple une liste de produits disponibles. Lorsque l'utilisateur clique sur l'un des noms de produits, la rgion dtaille affiche des informations bien plus dtailles sur la slection. Lorsque vous avez activ cette option, cliquez sur le bouton Configurer pour ouvrir la bote de dialogue Insrer un bloc d'affichage principal/dtaill, puis procdez comme suit :
1 Dans le panneau Colonnes principales, ajustez le contenu de votre rgion principale en procdant comme suit :
Slectionnez le nom d'une colonne puis cliquez sur le signe moins (-) pour la supprimer de la rgion principale.
Cliquez sur le signe plus (+) puis slectionnez le nom d'une colonne pour l'ajouter la rgion principale. Par dfaut, Dreamweaver remplit la rgion principale des donnes de la premire colonne de l'ensemble de donnes.
version prliminaire
Slectionnez le nom d'une colonne puis cliquez sur la flche vers le haut ou vers le bas pour la dplacer. En faisant
monter ou descendre une colonne dans le panneau Colonnes principales, vous dfinissez l'ordre d'apparition des donnes dans la rgion principale de la page.
2 Rptez la procdure ci-dessus pour le panneau Colonnes de dtails. Par dfaut, Dreamweaver remplit la rgion
dtaille de toutes les donnes qui ne se trouvent pas dans la rgion principale (c'est--dire toutes les colonnes de l'ensemble de donnes, sauf la premire).
3 (Facultatif) Dfinissez diffrents types de conteneurs pour les donnes dans la rgion dtaille. Pour ce faire,
choisissez le nom d'une colonne dtaille puis slectionnez le conteneur utiliser pour celle-ci dans la liste droulante Type de conteneur. Vous pouvez choisir des balises DIV, P, SPAN ou H1-H6.
En mode Cration, vous verrez les rgions principale/dtaille s'afficher, remplies des rfrences de donnes slectionnes. Les rfrences de donnes sont mises en surbrillance et entoures d'accolades ({}). Conteneurs empils Activez cette option si vous voulez afficher vos donnes l'aide d'une structure de conteneurs rpts sur la page. Par exemple, si l'ensemble de donnes contient quatre colonnes de donnes, chaque conteneur peut comprendre les quatre colonnes, et la structure de conteneur se rptera pour chaque ligne de l'ensemble de donnes. Lorsque vous avez activ cette option, cliquez sur le bouton Configurer pour ouvrir la bote de dialogue Insrer des conteneurs empils, puis procdez comme suit :
1 Dans le panneau Colonnes, ajustez le contenu de vos conteneurs empils en procdant comme suit :
Slectionnez le nom d'une colonne puis cliquez sur le signe moins (-) pour la supprimer des conteneurs empils.
Cliquez sur le signe plus (+) puis slectionnez le nom d'une colonne pour l'ajouter aux conteneurs. Par dfaut, Dreamweaver remplit les conteneurs empils des donnes de chaque colonne de l'ensemble de donnes.
monter ou descendre une colonne dans le panneau Colonnes, vous dfinissez l'ordre d'apparition des donnes dans les conteneurs empils de la page.
2 (Facultatif) Dfinissez diffrents types de conteneurs pour les donnes dans les conteneurs empils. Pour ce faire,
choisissez le nom d'une colonne de l'ensemble de donnes, puis slectionnez le conteneur utiliser pour celle-ci dans la liste droulante Type de conteneur. Vous pouvez choisir des balises DIV, P, SPAN ou H1-H6.
En mode Cration, vous verrez le conteneur s'afficher, rempli des rfrences de donnes slectionnes. Les rfrences de donnes sont mises en surbrillance et entoures d'accolades ({}). Conteneurs empils avec zone focalisable Activez cette option si vous voulez afficher les donnes l'aide d'une structure de conteneurs rpts sur la page, avec une zone focalisable dans chaque conteneur. En rgle gnrale, la zone focalisable contient une image. La disposition Zone focalisable est similaire la disposition Conteneurs empils, ceci prs que dans la disposition Zone focalisable, l'affichage des donnes est spar en deux colonnes (dans le mme conteneur). Lorsque vous avez activ cette option, cliquez sur le bouton Configurer pour ouvrir la bote de dialogue Insrer une mise en forme de zone focalisable, puis procdez comme suit :
1 Dans le panneau Colonnes focalisables, ajustez le contenu de votre zone focalisable en procdant comme suit :
Slectionnez le nom d'une colonne puis cliquez sur le signe moins (-) pour la supprimer de la zone focalisable.
Cliquez sur le signe plus (+) puis slectionnez le nom d'une colonne pour l'ajouter la zone focalisable. Par dfaut, Dreamweaver remplit la zone focalisable des donnes de la premire colonne de l'ensemble de donnes.
version prliminaire
monter ou descendre une colonne dans le panneau Colonnes focalisables, vous dfinissez l'ordre d'apparition des donnes dans la zone focalisable de la page.
2 (Facultatif) Dfinissez diffrents types de conteneurs pour les donnes dans la zone focalisable. Pour ce faire,
choisissez le nom d'une colonne de l'ensemble de donnes, puis slectionnez le conteneur utiliser pour celle-ci dans la liste droulante Type de conteneur. Vous pouvez choisir des balises DIV, P, SPAN ou H1-H6.
3 Rptez la procdure ci-dessus pour le panneau Colonnes empiles. Par dfaut, Dreamweaver remplit les colonnes
empiles de toutes les donnes qui ne se trouvent pas dans la zone focalisable (c'est--dire toutes les colonnes de l'ensemble de donnes, sauf la premire).
En mode Cration, la zone focalisable s'affiche, avec des conteneurs empils ses cts, remplie par les rfrences de donnes slectionnes. Les rfrences de donnes sont mises en surbrillance et entoures d'accolades ({}). Ne pas insrer de code HTML Activez cette option si vous voulez crer un ensemble de donnes, mais sans que Dreamweaver n'insre de disposition HTML pour celui-ci. L'ensemble de donnes est disponible dans le panneau Liaisons (Fentre > Liaisons), et vous pouvez tirer manuellement des lments sur la page. Mme si vous crez un ensemble de donnes sans insrer de disposition, vous pourrez insrer tout moment l'une des dispositions HTML disponibles. Pour ce faire, double-cliquez sur le nom de l'ensemble de donnes dans le panneau Liaisons, cliquez jusqu' ce que vous accdiez la fentre Choisir les options d'insertion, slectionnez une disposition puis cliquez sur Termin. Remarque : Vous pouvez galement tirer le nom de l'ensemble de donnes du panneau Liaisons jusqu'au point d'insertion sur la page. Lorsque vous procdez de la sorte, la fentre Choisir les options d'insertion s'affiche. Slectionnez une disposition puis cliquez sur Termin.
Modification dun ensemble de donnes

Lorsque vous avez cr un ensemble de donnes Spry, vous pouvez le modifier tout moment.
Dans le panneau Liaisons (Fentre > Liaisons), double-cliquez sur le nom de l'ensemble de donnes puis apportez-
y les modifications dsires. Remarque : Lorsque vous modifiez un ensemble de donnes, si vous slectionnez une nouvelle disposition dans la fentre Choisir les options d'insertion, Dreamweaver ne remplace pas la disposition existante sur la page, mais en insre une nouvelle.
Utilisation d'un flux de conception

Si vous travaillez sur des donnes en cours de dveloppement, il peut tre utile d'employer un flux de conception. Par exemple, si le dveloppeur du serveur est en train de finaliser la base de donnes sous-jacente votre fichier de donnes XML, vous pouvez utiliser une version de test du fichier afin de mettre au point votre page indpendamment du dveloppement de la base de donnes. Si vous utilisez un flux de conception, Dreamweaver se borne remplir l'environnement de travail l'aide des donnes provenant de ce flux. Les rfrences la source de donnes qui se trouvent dans le code de page restent des rfrences la vritable source de donnes que vous voulez utiliser.
1 Commencez par crer un ensemble de donnes Spry (reportez-vous la procdure prcdente pour plus
d'informations).
2 Dans la fentre Dfinir la source des donnes, cliquez sur le lien Flux de conception.
version prliminaire
3 Cliquez sur le bouton Parcourir pour rechercher le flux de conception, puis cliquez sur OK.
A propos des slecteurs de donnes Spry

Lorsque vous utilisez Dreamweaver pour crer un ensemble de donnes Spry, Dreamweaver, inclut par dfaut toutes les donnes dans un conteneur slectionn. Vous pouvez affiner cette slection en employant des slecteurs de donnes CSS. Les slecteurs de donnes CSS permettent de n'inclure qu'une partie des donnes de la source de donnes, en dfinissant des rgles CSS qui sont lies certains lments de donnes. Par exemple, si vous entrez .product dans la ligne Slecteurs de lignes de la fentre Dfinir la source des donnes, Dreamweaver cre un ensemble de donnes qui ne contient que les lignes auxquelles la classe .product a t attribue. Pout que les zones des slecteurs de donnes soient accessibles, vous devez activer l'option Slection de donnes avance de la fentre Dfinir la source des donnes. Si vous entrez des slecteurs de donnes puis que vous dsactivez cette option, Dreamweaver conserve ce que vous avez entr dans ces zones, mais il ne les utilise pas pour filtrer l'ensemble de donnes.
A propos des tableaux principaux Spry et de la mise jour des rgions dtailles
L'une des fonctions les plus courantes des ensembles de donnes Spry consiste crer un ou plusieurs tableaux HTML qui mettent jour, de manire dynamique, une autre page en rponse une action de l'utilisateur. Par exemple, si un utilisateur slectionne un produit dans une liste d'un tableau, l'ensemble de donnes peut immdiatement mettre jour des donnes, ailleurs sur la page, l'aide d'informations dtailles sur le produit slectionn. Avec Spry, ces mises jour n'exigent pas l'actualisation de la page. Ces rgions de page distinctes sont baptises rgion principale et rgion dtaille . En rgle gnrale, une partie de la page (la rgion principale) affiche une liste d'lments classs en catgories (par exemple une liste de produits) et une autre partie de la page (la rgion dtaille) affiche plus d'informations au sujet d'un enregistrement slectionn. Chaque ensemble de donnes utilise la notion d'une ligne actuelle et, par dfaut, cette ligne actuelle est la premire de l'ensemble de donnes. Lorsqu'un utilisateur effectue une slection dans une rgion principale (en partant toujours de l'exemple d'une liste de diffrents produits), Spry modifie en fait la ligne actuelle de l'ensemble de donnes. Comme la rgion dtaille dpend de la rgion principale, toute modification rsultant de l'interaction de l'utilisateur avec la rgion principale (par exemple la slection de diffrents produits) entrane la modification des donnes affiches dans la rgion dtaille. Dreamweaver cre automatiquement des dispositions principale/dtaille, de faon mettre en place toutes les associations entre rgion principale et rgion dtaille. Toutefois, si vous voulez crer un tableau principal dynamique, vous pouvez le prparer en vue d'une association ultrieure une rgion dtaille. Lorsque vous activez l'option Mettre jour les rgions dtailles en cas de clic sur une ligne (dans la bote de dialogue Insrer un tableau), Dreamweaver insre une balise spry:setrow l'intrieur de la balise de la ligne rpte de votre tableau dynamique. Cet attribut prpare le tableau en tant que tableau principal capable de rinitialiser la ligne actuelle des donnes lorsque l'utilisateur interagit avec le tableau. Pour plus d'informations sur la cration manuelle de rgions principale/dtaille, voir le guide de dveloppement Spry l'adresse www.adobe.com/go/learn_dw_sdg_masterdetail_fr.
Cration d'une rgion Spry

Le cadre applicatif Spry emploie deux types de rgions. L'une est une rgion Spry qui entoure les objets de donnes, comme les tableaux et les listes rptes. L'autre est une rgion de dtail Spry qui s'utilise en combinaison avec un objet de tableau principal afin de permettre la mise jour dynamique de donnes sur une page Dreamweaver.
version prliminaire
Tous les objets de donnes Spry doivent tre inclus dans une rgion Spry. Si vous tentez d'ajouter un objet de donnes Spry avant d'ajouter une rgion Spry une page, Dreamweaver vous invite ajouter une rgion Spry. Par dfaut, les rgions Spry se trouvent dans des conteneurs div HTML. Vous pouvez les ajouter avant d'ajouter un tableau, les ajouter automatiquement quand vous insrez un tableau ou une liste rpte, ou encore les placer autour d'objets de tableau ou de liste rpte existants. En rgle gnrale, si vous ajoutez une rgion de dtail, vous ajouterez tout d'abord l'objet de tableau principal, puis vous activerez l'option Mettre jour les rgions dtailles (voir Tableau dynamique la page 484). La seule valeur qui soit diffrente et spcifique pour une rgion de dtail est l'option Type de la bote de dialogue Insrer une rgion Spry.
1 Choisissez Insertion > Spry > Rgion Spry.
Vous pouvez galement cliquer sur le bouton Rgion XML Spry de la catgorie Spry du panneau Insertion.
2 Comme conteneur de l'objet, vous pouvez slectionner l'option <div> ou l'option <span>. Le conteneur <div> est
utilis par dfaut.

3 Choisissez l'une des options suivantes :
Pour crer une rgion Spry, activez Rgion (l'option par dfaut) comme type de rgion insrer. Pour crer une rgion de dtail Spry, activez l'option Rgion Dtail. Une rgion de dtail ne s'emploie que si vous
voulez lier des donnes dynamiques qui sont mises jour lorsque les donnes d'une autre rgion Spry changent. Important : Vous devez insrer une rgion de dtail dans une <div> diffrente de celle de la rgion de la table principale. Il peut tre ncessaire de passer en mode Code pour placer prcisment le point d'insertion.
4 Choisissez votre ensemble de donnes Spry dans le menu. 5 Si vous voulez crer ou modifier la rgion dfinie pour un objet, slectionnez-le puis activez l'une des options
suivantes :
Renvoi la ligne de la slection Place une nouvelle rgion autour d'un objet. Remplacer la slection Remplace une rgion existante pour un objet.
6 Lorsque vous cliquez sur OK, Dreamweaver place un espace rserv de rgion sur votre page, avec le texte Placez
ici le contenu de la rgion de dtail Spry . Vous pouvez remplacer ce texte d'espace rserv par un objet de donnes Spry, tel qu'un tableau ou une liste rpte, ou par des donnes dynamiques provenant du panneau Liaisons (Fentre > Liaisons).
Le panneau Liaisons affiche les donnes disponibles depuis l'ensemble de donnes.
version prliminaire
Remarque : Le panneau Liaisons contient quelques lments Spry intgrs : ds_RowID, ds_CurrentRowID et ds_RowCount. Spry les emploie pour dfinir la ligne dans laquelle un utilisateur a cliqu lorsqu'il dtermine comment mettre jour des rgions de dtail dynamiques.
7 Pour remplacer le texte d'espace rserv par un objet de donnes Spry (par exemple un tableau Spry), cliquez sur le
bouton de l'objet de donnes correspondant dans la catgorie Spry du panneau Insertion.

8 Pour remplacer le texte d'espace rserv par des donnes dynamiques, utilisez l'une des mthodes suivantes :
Tirez un ou plusieurs lments du panneau Liaisons au-dessus du texte slectionn. En mode Code, tapez directement le code d'un ou plusieurs lments. Utilisez le format suivant : {nom-ensemblede-donnes::nom-lment}, comme dans {ds1::category}. ou {dsProducts::desc}. Si vous n'utilisez qu'un
ensemble de donnes dans votre fichier, ou si vous employez des lments du mme ensemble de donnes que celui dfini pour la rgion, vous pouvez omettre le nom de l'ensemble de donnes et simplement crire {category} or {desc}. Quelle que soit la mthode utilise pour dfinir le contenu de votre rgion, les lignes suivantes sont ajoutes votre code HTML :
<div spry:region="ds1">{name}{category}</div> <div spry:region="ds2">{ds1::name}{ds1::descheader}</div>
Cration d'une rgion rpte Spry

Vous pouvez ajouter des rgions rptes pour afficher vos donnes. Une rgion rpte est une structure de donnes simple que vous pouvez mettre en forme comme bon vous semble pour prsenter les donnes. Par exemple, vous pouvez utiliser une rgion rpte pour afficher un ensemble de vignettes photographiques l'une aprs l'autre dans un objet de mise en forme de page, tel qu'un lment div PA.
1 Choisissez Insertion > Spry > Rptition Spry.
Vous pouvez galement cliquer sur le bouton Rptition Spry de la catgorie Spry du panneau Insertion.
2 Comme conteneur de l'objet, vous pouvez slectionner l'option <div> ou l'option <span>, en fonction du type de
balise dsire. Le conteneur <div> est utilis par dfaut.

3 Activez l'option Rpter (par dfaut) ou Rpter les enfants.
Pour disposer d'une souplesse accrue, vous pouvez utiliser l'option Rpter les enfants, o la validation des donnes est effectue pour chaque ligne d'une liste au niveau des enfants. Par exemple, dans une liste <ul>, les donnes sont vrifies au niveau <li>. Si vous activez l'option Rpter, les donnes sont vrifies au niveau <ul>. L'option Rpter les enfants peut s'avrer particulirement utile si vous employez des expressions conditionnelles dans le code.
4 Choisissez votre ensemble de donnes Spry dans le menu. 5 Si vous avez dj slectionn du texte ou des lments, vous pouvez les entourer ou les remplacer. 6 Cliquez sur OK pour afficher une rgion rpte sur votre page.
Remarque : Tous les objets de donnes Spry doivent se trouver dans une rgion. Veillez donc crer une rgion Spry sur votre page avant d'insrer une rgion rpte.
7 Lorsque vous cliquez sur OK, Dreamweaver insre un espace rserv de rgion sur votre page, avec le texte Placez
ici le contenu de la rgion de dtail Spry . Vous pouvez remplacer ce texte d'espace rserv par un objet de donnes Spry, tel qu'un tableau ou une liste rpte, ou par des donnes dynamiques provenant du panneau Liaisons (Fentre > Liaisons).
version prliminaire
Le panneau Liaisons affiche les donnes disponibles depuis l'ensemble de donnes.
Remarque : Le panneau Liaisons contient quelques lments Spry intgrs : ds_RowID, ds_CurrentRowID et ds_RowCount. Spry les emploie pour dfinir la ligne dans laquelle un utilisateur a cliqu lorsqu'il dtermine comment mettre jour des rgions de dtail dynamiques.
8 Pour remplacer le texte d'espace rserv par un objet de donnes Spry, cliquez sur le bouton de l'objet de donnes
appropri dans le panneau Insertion.

9 Pour remplacer le texte d'espace rserv par une ou plusieurs donnes dynamiques, utilisez l'une des mthodes
suivantes :
Tirez un ou plusieurs lments du panneau Liaisons au-dessus du texte slectionn. En mode Code, tapez directement le code d'un ou plusieurs lments. Utilisez le format suivant : {nom-ensemblede-donnes::nom-lment}, comme dans {ds1::category}. ou {dsProducts::desc}. Si vous n'utilisez qu'un
ensemble de donnes dans votre fichier, ou si vous employez des lments du mme ensemble de donnes que celui dfini pour la rgion, vous pouvez omettre le nom de l'ensemble de donnes et simplement crire {category} or {desc}. Quelle que soit la mthode utilise pour dfinir le contenu de votre rgion, les lignes suivantes sont ajoutes votre code HTML :
<div spry:region="ds1">{name}{category}</div> <div spry:region="ds2">{ds1::name}{ds1::descheader}</div>
Cration d'une liste de rptition Spry

Vous pouvez ajouter des listes de rptition pour afficher vos donnes sous la forme d'une liste ordonne, d'une liste non ordonne ( puces) ou d'une liste droulante.
1 Choisissez Insertion > Spry > Liste de rptition Spry.
Vous pouvez galement cliquer sur le bouton Liste de rptition Spry de la catgorie Spry du panneau Insertion.
2 Choisissez la balise conteneur utiliser : UL, OL, DL ou SELECT. Les autres options varient en fonction du
conteneur choisi. Si vous choisissez SELECT, vous devez complter les zones suivantes :
Colonne affiche : Il s'agit de ce que les utilisateurs voient lorsqu'ils affichent la page dans leur navigateur. Colonne de valeurs : Il s'agit de la valeur envoye au serveur d'arrire-plan.
version prliminaire
Par exemple, vous pouvez crer une liste de villes et montrer Bordeaux et Boulogne aux utilisateurs, tout en envoyant BO ou BO au serveur. Vous pouvez galement utiliser SELECT comme outil de navigation et montrer des noms de produit tels que Adobe Dreamweaver et Adobe Acrobat aux utilisateurs, tout en envoyant des URL telles que support/products/dreamweaver.html et support/products/acrobat.html au serveur.
3 Choisissez votre ensemble de donnes Spry dans le menu. 4 Choisissez les colonnes afficher. 5 Cliquez sur OK pour afficher une liste de rptition sur votre page. En mode Code, vous pouvez voir que des balises
de slection <ul>, <ol>, <dl> ou FORM ont t insres dans le fichier. Remarque : Si vous tentez d'insrer une liste de rptition sans avoir cr de rgion, Dreamweaver vous invite en ajouter une avant d'insrer le tableau. Tous les objets de donnes Spry doivent se trouver l'intrieur de rgions.
Ajout d'effets Spry

Prsentation des effets Spry
Les effets Spry sont des amliorations visuelles que vous pouvez appliquer pratiquement n'importe quel lment d'une page HTML l'aide de JavaScript. Les effets sont souvent utiliss pour surligner des informations, crer des transitions animes ou modifier visuellement un lment de page pendant un certain dlai. Vous pouvez appliquer des effets aux lments HTML sans devoir employer de balises personnalises supplmentaires. Remarque : Pour appliquer un effet un lment, il doit tre slectionn ou possder un ID. Si, par exemple, vous surlignez une balise div qui n'est pas slectionne, elle doit possder une valeur ID valide. Si ce n'est pas encore le cas, vous devez en ajouter un au code HTML. Les effets peuvent modifier les proprits d'opacit, d'chelle, de position et de style d'un lment, comme sa couleur d'arrire-plan. Vous pouvez crer d'intressants effets visuels en combinant plusieurs proprits. Ces effets sont bass sur Spry. Ds lors, lorsqu'un utilisateur clique sur un lment possdant un effet, seul l'lment est mis jour de manire dynamique. La page HTML n'est pas entirement actualise. Spry comporte les effets suivants :
Apparition/Fondu Fait apparatre ou disparatre lentement un lment. Surligner Modifie la couleur d'arrire-plan d'un lment. Volet Simule l'effet d'un store qui monte ou descend pour afficher ou masquer l'lment. Faire coulisser lobjet 3D Fait monter ou descendre l'lment. Agrandissement/Rduction Augmente ou diminue la taille de l'lment. Secouer Donne l'impression que l'lment est secou de gauche droite. Ecraser Fait disparatre l'lment dans le coin suprieur gauche de la page.
Important : Lorsque vous utilisez un effet, diverses lignes de code sont ajoutes au fichier en mode Code. Une ligne identifie le fichier SpryEffects.js, qui est ncessaire l'inclusion des effets. Ne supprimez pas cette ligne du code, faute de quoi les effets ne fonctionneront pas. Vous trouverez la liste dtaille des effets Spry disponibles dans le cadre applicatif Spry l'adresse www.adobe.com/go/learn_dw_spryeffects_fr.
version prliminaire
Application d'un effet Apparition/Fondu

Remarque : Vous pouvez utiliser cet effet avec n'importe quel lment HTML, sauf applet, body, iframe, object, tr, tbody ou th.
1 (Facultatif) Slectionnez le contenu ou l'lment de mise en forme auquel vous voulez appliquer l'effet. 2 Dans le panneau Comportements (Fentre > Comportements), cliquez sur le bouton Plus (+) puis choisissez Effets
> Apparition/Fondu dans le menu.

3 Slectionnez l'ID de l'lment dans le menu de l'lment cible. Si vous avez dj slectionn un lment, choisissez
<Slection actuelle>.
4 Dans la zone Dure de leffet, dfinissez le dlai (en millisecondes) ncessaire pour que l'effet se produise. 5 Slectionnez l'effet appliquer : Fondu ou Apparition. 6 Dans la zone Dbut du fondu, dfinissez le pourcentage d'opacit que l'effet doit possder lorsqu'il apparat. 7 Dans la zone Fin du fondu, dfinissez le pourcentage d'opacit atteindre. 8 Cliquez sur Effet de bascule si vous voulez que l'effet soit rversible, en apparaissant lentement puis en disparaissant
de nouveau chaque clic de souris.
Application d'un effet Store

Remarque : Cet effet ne peut tre utilis que sur les lments HTML suivants : address, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, p, ol, ul, li, applet, center, dir, menu ou pre.
> Store dans le menu.

4 Dans la zone Dure de leffet, dfinissez le dlai (en millisecondes) ncessaire pour que l'effet se produise. 5 Slectionnez l'effet appliquer : Store mont ou Store baiss. 6 Dans la zone Store mont depuis/Store baiss depuis, dfinissez le point de dpart du droulement du store, sous
la forme d'un pourcentage ou d'un nombre de pixels. Ces valeurs sont calcules partir du dessus de l'lment.
7 Dans la zone Store mont jusqu'/Store baiss jusqu', dfinissez le point final du droulement du store, sous la
forme d'un pourcentage ou d'un nombre de pixels. Ces valeurs sont calcules partir du dessus de l'lment.
8 Cliquez sur Effet de bascule si vous voulez que l'effet soit rversible, en remontant puis en redescendant chaque
clic de souris.
Application d'un effet Agrandissement/Rduction

Remarque : Vous pouvez utiliser cet effet avec les lments HTML suivants : address, dd, div, dl, dt, form, p, ol, ul, applet, center, dir, menu ou pre.
> Agrandissement/Rduction dans le menu.

3 Slectionnez l'ID de l'lment dans le menu contextuel de l'lment cible. Si vous avez dj slectionn un lment,
choisissez <Slection actuelle>.
version prliminaire
4 Dans la zone Dure de leffet, dfinissez le dlai (en millisecondes) ncessaire pour que l'effet se produise. 5 Slectionnez l'effet appliquer : Agrandissement ou Rduction. 6 Dans la zone Dbut agrandissement/Dbut rduction, dfinissez la taille de l'lment au dbut de l'effet. Il s'agit
d'un pourcentage de la taille ou d'un nombre de pixels.

7 Dans la zone Fin agrandissement/Fin rduction, dfinissez la taille de l'lment la fin de l'effet. Il s'agit d'un
pourcentage de la taille ou d'un nombre de pixels.

8 Si vous choisissez les pixels pour l'une des zones Dbut ou Fin agrandissement/rduction, la zone largeur/hauteur
devient visible. En fonction de l'option choisie, l'lment sera agrandi ou rduit de manire proportionnelle.
9 Indiquez si vous voulez que l'lment soit agrandi ou rduit vers le coin suprieur gauche de la page ou le centre de
la page.
10 Cliquez sur Effet de bascule si vous voulez que l'effet soit rversible, en tant agrandi puis rduit chaque clic de
souris.
Application d'un effet Surligner

Remarque : Vous pouvez utiliser cet effet avec n'importe quel lment HTML, sauf applet, body, frame, frameset et noframes.
> Surligner dans le menu.

4 Dans la zone Dure de leffet, dfinissez le dlai (en millisecondes) pendant lequel l'effet doit durer. 5 Slectionnez la couleur de dbut du surlignage. 6 Slectionnez la couleur de fin du surlignage. Cette couleur ne dure que pendant le dlai dfini dans la zone Dure
de l'effet.
7 Slectionnez la couleur de l'lment la fin du surlignage. 8 Cliquez sur Effet de bascule si vous voulez que l'effet soit rversible, en recevant successivement les diffrentes
couleurs de surlignage chaque clic de souris.
Application d'un effet Secouer

Remarque : Cet effet peut tre utilis avec les lments HTML suivants : address, blockquote, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, iframe, img, object, p, ol, ul, li, applet, dir, hr, menu, pre ou table.
> Secouer dans le menu.

version prliminaire
Application d'un effet Glisser

Pour que l'effet Glisser fonctionne correctement, l'lment cible doit tre entour d'une balise conteneur possdant un ID unique. La balise conteneur dont vous entourez l'lment cible doit tre de type blockquote, dd, form, div ou center. La balise d'lment cible doit tre l'une des suivantes : blockquote, dd,div, form, center, table, span, input, textarea, select ou image.
1 (Facultatif) Slectionnez la balise conteneur du contenu auquel vous voulez appliquer l'effet. 2 Dans le panneau Comportements (Fentre > Comportements), cliquez sur le bouton Plus (+) puis choisissez Effets
> Glisser dans le menu.

3 Slectionnez l'ID du conteneur dans le menu de l'lment cible. Si le conteneur est dj slectionn, choisissez
4 Dans la zone Dure de leffet, dfinissez le dlai (en millisecondes) ncessaire pour que l'effet se produise. 5 Slectionnez l'effet appliquer : Glisser vers le haut ou Glisser vers le bas. 6 Dans la zone Glisser vers le haut depuis, dfinissez le point de dpart du coulissement, sous la forme d'un
pourcentage ou d'un nombre de pixels.

7 Dans la zone Glisser vers le haut jusqu', dfinissez le point final du coulissement, sous la forme d'un pourcentage
ou d'un nombre de pixels positif.

8 Cliquez sur Effet de bascule si vous voulez que l'effet soit rversible, en coulissant vers le haut puis vers le bas
chaque clic de souris.
Application d'un effet Ecraser

Remarque : Cet effet ne peut tre utilis qu'avec les lments HTML suivants : address, dd, div, dl, dt, form, img, p, ol, ul, applet, center, dir, menu ou pre.
> Ecraser dans le menu.

Ajout d'un effet supplmentaire

Vous pouvez associer plusieurs comportements d'effets au mme lment, de manire produire des effets intressants.
1 (Facultatif) Slectionnez le contenu ou l'lment de mise en forme auquel vous voulez appliquer l'effet. 2 Dans le panneau Comportements (Fentre > Comportements), cliquez sur le bouton Plus (+) puis choisissez un
effet dans le menu Effets.

version prliminaire
Suppression d'un effet

Vous pouvez supprimer un ou plusieurs comportements d'effet d'un lment.
1 (Facultatif) Slectionnez le contenu ou l'lment de mise en forme auquel vous voulez appliquer l'effet. 2 Dans le panneau Comportements (Fentre > Comportements), cliquez sur l'effet supprimer de la liste de
comportements.
3 Procdez comme suit, au choix :
Cliquez sur le bouton Supprimer un vnement (-) de la barre de titre du panneau secondaire. Cliquez sur le comportement avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce
(Macintosh), puis choisissez Supprimer le comportement.
version prliminaire
497
Chapitre 16 : Utilisation des services en ligne Adobe

Gestion des connexions aux services en ligne Adobe
Adobe Creative Suite 5 senrichit de services en ligne qui vous permettent dexploiter toute la puissance du Web partir de votre Bureau. Vous pourrez utiliser ces services pour vous mettre en contact et collaborer avec des membres de la communaut, tout en tirant le meilleur parti de vos outils Adobe. Les services sintgrent aux applications Creative Suite 5 afin que vous puissiez rapidement optimiser les flux de production existants. Certains services offrent des fonctionnalits compltes ou partielles mme lorsque vous tes hors ligne.
Adobe Acrobat.com Crez des documents et des prsentations en ligne, partagez des documents dans un
environnement de consultation scuris, puis stockez les fichiers distance. Vous navez pas vous occuper de la compatibilit entre les plateformes, du croisement des pare-feux ou de linstallation du logiciel.
Adobe BrowserLab Capturez vos pages Web telles quelles saffichent dans diffrents navigateurs et systmes
dexploitation, puis comparez-les.

Adobe Business Catalyst Crez tout ce que vous souhaitez avec cette application hberge, des sites Web de base
dirigs par les donnes aux grands magasins virtuels.

Adobe ConnectNow Travaillez en troite collaboration avec des groupes de travail disperss sur le Web et partagez voix, donnes et contenu multimdia. Adobe CS Review Publiez les fichiers de cration, notamment les fichiers de composition Photoshop, puis autorisez les autres utilisateurs les consulter et y apporter des commentaires laide doutils dannotation.
Les services CS Live regroupent les quatre services en ligne suivants : ConnectNow, BrowserLab, CS Review et Acrobat.com. Pour plus dinformations sur la gestion de vos services, consultez le site Web dAdobe ladresse suivante : www.adobe.com/go/learn_creativeservices_fr. Certaines applications de la suite Creative Suite 5 intgrent des fonctions de service individuelles.
Accs CS Live
1 Dans Adobe InDesign, Photoshop, Illustrator, Flash, Fireworks ou Dreamweaver, choisissez la commande
Fentre > Extensions > Accder CS Live.

2 Si ncessaire, cliquez sur le lien Inscription dans le panneau, entrez votre ID et votre mot de passe Adobe, puis
cliquez sur le bouton Inscription. Remarque : lapplication que vous utilisez vous inscrit automatiquement si vous avez fourni lID et le mot de passe Adobe pendant le processus dinstallation.
3 (Facultatif) Pour rester connect lorsque vous redmarrez lapplication, slectionnez loption Rester connect.
version prliminaire
Utilisation des services en ligne Adobe
BrowserLab
Adobe BrowserLab permet de consulter un aperu du contenu Web local depuis Dreamweaver, sans devoir au pralable le publier sur un serveur accessible publiquement. Vous pouvez consulter un aperu des fichiers depuis votre site Dreamweaver local ou depuis un serveur distant ou d'valuation. Vous trouverez, l'adresse ci-aprs, une vido de l'quipe de conception de Dreamweaver qui prsente l'utilisation de BrowserLab : www.adobe.com/go/dwcs5browserlab_fr.
Dfinition de l'emplacement prfrentiel des fichiers

BrowserLab permet de consulter un aperu des versions locales de vos fichiers (c.--d. des fichiers que vous n'avez pas chargs sur votre serveur Web) ou de fichiers sur un autre serveur (par exemple un serveur intermdiaire distant ou un serveur d'valuation distant). Lorsque vous consultez un aperu d'un fichier local, BrowserLab envoie en fait ce fichier un serveur BrowserLab, ralise la capture d'cran de votre page dans diffrents navigateurs, puis affiche les captures d'cran dans la fentre d'application. Lorsque vous consultez un aperu d'un fichier depuis un serveur, BrowserLab procde de la mme faon que pour les autres fichiers en direct : il ralise des captures d'cran du fichier du serveur dans diffrents navigateurs, puis affiche celles-ci dans la fentre d'application.
1 Choisissez Fentre > Extensions > Adobe BrowserLab. 2 Dans le panneau des services Web BrowserLab, choisissez un emplacement dans le menu contextuel.
Remarque : L'emplacement de fichier que vous choisissez reste inchang jusqu' ce que vous le changiez nouveau.
Local ordonne BrowserLab de prvisualiser les fichiers depuis votre site local. Lorsque vous prvisualisez un
fichier en mode Cration ou Code, BrowserLab utilise le fichier local comme source pour les captures d'cran. Lorsque vous prvisualisez le fichier depuis le mode Affichage en direct, BrowserLab utilise la page rendue par WebKit (le moteur de rendu du mode Affichage en direct) comme source de captures d'cran.
Server (Serveur) ordonne BrowserLab de prvisualiser les fichiers depuis votre serveur actif.
Lorsque vous prvisualisez des fichiers l'aide de la configuration de serveur (c.--d. pas les fichiers du site Dreamweaver local), le serveur qu'utilise BrowserLab est le serveur qui est actif dans Dreamweaver. Le serveur actif est le serveur que vous avez slectionn en dernier lieu dans la panneau fichiers dvelopp ou rduit. Par exemple, si vous avez envoy les fichiers de votre site local sur un serveur d'valuation prcis, BrowserLab effectuera des captures d'cran du fichier spcifi sur le serveur d'valuation. Dreamweaver mmorise ce rglage et le conserve jusqu' ce que vous changiez manuellement de serveur actif. Pour savoir quel est votre serveur actif, cliquez sur le bouton Dvelopper du panneau Fichiers. Le serveur slectionn (d'valuation ou distant) est le serveur actif. Important : Si votre serveur actif est un serveur distant (part exemple un serveur intermdiaire distant) ou un serveur d'valuation, vous devez complter la zone URL Web du mode Edition de base du serveur. L'URL Web doit correspondre l'emplacement du serveur distant ou d'valuation spcifi (adresse FTP pour les sites FTP, dossier distant pour les sites Locaux/Rseau, et ainsi de suite).
version prliminaire
Prvisualisation d'une page

1 Dans Dreamweaver, ouvrez la page prvisualiser. 2 Choisissez Fichier > Aperu dans le navigateur > Adobe BrowserLab. 3 Lorsque la fentre de connexion de BrowserLab s'affiche, entrez votre ID Adobe (adresse lectronique) et votre mot
de passe, puis cliquez sur Connexion.
Modification et actualisation d'une page

Vous pouvez modifier une page locale dans Dreamweaver puis actualiser la page dans BrowserLab sans devoir au pralable enregistrer le fichier dans Dreamweaver ni l'envoyer un serveur. Cette fonctionnalit est particulirement utile si vous apportez de nombreuses modifications votre code CSS et que vous souhaitez prvisualiser toutes les modifications au fur et mesure que vous les apportez, sans devoir enregistrer vos modifications. Remarque : Si vous affichez un aperu dans BrowserLab l'aide de la configuration distante, BrowserLab enregistre automatiquement votre fichier et l'envoie au serveur actif avant la prvisualisation.
1 Dans Dreamweaver, ouvrez la page prvisualiser. 2 Choisissez Fichier > Aperu dans le navigateur > Adobe BrowserLab. 3 Apportez des modifications la page ou au code CSS qui y est joint. 4 Cliquez sur le bouton Actualiser dans la fentre d'application de BrowserLab.
BrowserLab affiche l'aperu de votre page sans exiger que vous enregistriez au pralable les modifications locales.
Voir aussi
Prvisualisation de pages dans Dreamweaver la page 297 Configuration d'un serveur d'valuation la page 48 A propos de l'URL Web pour le serveur d'valuation la page 48
Business Catalyst InContext Editing

propos de Business Catalyst InContext Editing
Adobe Business Catalyst InContext Editing est un service hberg en ligne qui permet aux utilisateurs d'apporter des modifications de contenu simples dans un navigateur Web. Pour modifier une page Web, il suffit l'utilisateur d'accder celle-ci, de se connecter au service InContext Editing et d'apporter les modifications dsires. Les options d'dition sont simples et lgantes; leur utilisation n'exige aucune connaissance pralable du code HTML ou de l'dition Web. Avant d'autoriser des utilisateurs apporter des modifications en direct sur le Web, toutefois, vous allez utiliser Dreamweaver pour rendre vos pages HTML modifiables. Pour ce faire, dfinissez des rgions, sur la page, dont vous autoriserez la modification par les utilisateurs. Par exemple, supposons que vous ayez dfini une page d'actualit reprenant des titres et des notices qui annoncent les articles. Vous pouvez slectionner ce contenu et le transformer en rgion modifiable InContext Editing, de sorte que quand un utilisateur se connecte au service InContext Editing, il puisse modifier directement les titres et les notices dans son navigateur.
version prliminaire
Dans cette , vous apprendrez comment utiliser les rgions modifiables InContext Editing dans Dreamweaver. Toutefois, Adobe fournit galement d'autres ressources qui vous aideront travailler dans InContext Editing :
Vous trouverez un didacticiel vido relatif Adobe InContext Editing l'adresse

www.adobe.com/go/lrvid4045_dw_fr.
Pour plus d'informations sur vos premiers pas dans InContext Editing, ainsi que des didacticiels, consultez la page
www.adobe.com/go/incontextediting_getstarted_fr.
Pour obtenir de la documentation sur l'emploi d'InContext Editing pour modifier des pages dans un navigateur,
consultez la page www.adobe.com/go/learn_dw_incontextediting_browser_fr.
Pour obtenir de la documentation sur l'utilisation du panneau Administration d'InContext Editing, consultez la
page www.adobe.com/go/learn_dw_incontextediting_administration_guide_fr. Remarque : Adobe Business Catalyst InContext Editing ne fonctionne pas correctement dans certaines situations. Vous trouverez une liste des limitations en matire de rseau, de navigateurs, de pages et d'dition l'adresse www.adobe.com/go/incontextediting_limitations_fr. Remarque : Adobe AIR n'est pas compatible avec Adobe Business Catalyst InContext Editing. Si vous utilisez l'extension AIR pour Dreamweaver afin d'exporter une application contenant des rgions InContext Editing, la fonctionnalit InContext Editing ne fonctionnera pas.
Cration d'une rgion modifiable InContext Editing

Une rgion modifiable InContext Editing est une paire de balises HTML dont la balise d'ouverture contient l'attribut ice:editable. La rgion modifiable dfinit une zone de la page qu'un utilisateur peut modifier directement dans un navigateur. Remarque : Si vous ajoutez une rgion modifiable InContext Editing une page base sur un modle Dreamweaver, la nouvelle rgion modifiable InContext Editing doit se trouver l'intrieur d'une rgion qui est dj modifiable.
Slectionnez une balise div, th ou td que vous voulez transformer en rgion modifiable. Placez le point d'insertion o vous voulez insrer une nouvelle rgion modifiable sur la page. Slectionnez prcisment une rgion modifiable dans un modle Dreamweaver (fichier DWT). Slectionnez tout autre contenu de la page que vous voulez rendre modifiable (par exemple un bloc de texte).
2 Choisissez Insertion > InContext Editing > Crer une rgion modifiable. 3 Les options votre disposition varient en fonction de votre slection.
Si vous avez slectionn une balise div, th ou td, Dreamweaver la transforme en rgion modifiable sans autres
oprations.
Si vous insrez une nouvelle rgion modifiable vierge, effectuez l'une des actions suivantes : Choisissez Insrer une nouvelle rgion modifiable au point d'insertion actuel, puis cliquez sur OK.
Dreamweaver insre une balise div dans votre code, en ajoutant l'attribut ice:editable la balise d'ouverture.
Choisissez Transformer la balise parente en rgion modifiable si vous voulez que Dreamweaver fasse de la
balise parente de la slection le conteneur de la rgion. Seules certaines balises HTML sont transformables : div, th et td.
version prliminaire
Remarque : Cette seconde option n'est disponible que lorsque le nud parent rpond prcisment aux critres de transformation. Par exemple, il doit s'agit d'une des balises transformables indiques, et elle ne doit pas tre confronte l'une des erreurs rpertories dans la section Messages d'erreur d'InContext Editing la page 504.
Si vous avez slectionn une rgion modifiable d'un modle Dreamweaver, cliquez sur OK dans la bote de
dialogue Crer une rgion modifiable. Dreamweaver entoure la rgion modifiable du modle d'une balise div qui fait office de conteneur pour la nouvelle rgion modifiable InContext Editing.
Si vous avez slectionn un autre contenu rendre modifiable, effectuez l'une des oprations suivantes : Choisissez Entourer la slection actuelle d'une balise DIV puis la transformer si vous voulez entourer votre
slection d'une balise div puis la transformer en rgion modifiable. La balise div dont Dreamweaver entoure le contenu fait office de conteneur pour la rgion modifiable. Remarque : L'ajout de balises div aux pages peut modifier le rendu de ces pages et les effets des rgles CSS. Par exemple, si une rgle CSS applique un cadre rouge autour des balises div, vous verrez un cadre rouge autour de votre slection actuelle lorsque Dreamweaver l'entoure d'une balise div et la transforme. Pour viter ce type de conflit, vous pouvez rcrire les rgles CSS qui influent sur la slection actuelle, ou annuler la transformation (Edition > Annuler), puis slectionner et transformer une balise compatible que Dreamweaver ne doit pas entourer d'une balise div.
Choisissez Transformer la balise parente en rgion modifiable si vous voulez que Dreamweaver fasse de la
balise parente de la slection le conteneur de la rgion modifiable. Seules certaines balises HTML sont transformables : div, th et td.
4 En mode Cration, cliquez sur l'onglet bleu de la rgion modifiable afin de la slectionner, si ce n'est pas dj fait.
Remarque : Si vous travaillez dans un modle Dreamweaver, veillez slectionner la rgion modifiable InContext Editing (la rgion conteneur), et pas la rgion modifiable du modle Dreamweaver.
5 Activez ou dsactivez des options dans l'inspecteur Proprits Rgion modifiable. Ces options seront accessibles
aux utilisateurs qui modifieront le contenu de la rgion modifiable dans un navigateur. Par exemple, si vous choisissez l'option Gras, l'utilisateur pourra mettre le texte en gras. Si vous choisissez Liste numrote et Liste puces, l'utilisateur pourra crer des listes numrotes et des listes puces. Si vous choisissez Liens, l'utilisateur pourra crer des liens, et ainsi de suite. Laissez le pointeur de la souris au-dessus d'une option pour afficher une infobulle qui explique sa fonction.
Si c'est la premire fois que vous ajoutez la fonctionnalit InContext Editing une page, Dreamweaver vous informe qu'il ajoute des fichiers de support InContext Editing votre site: ice.conf.js, ice.js et ide.html. N'oubliez pas de charger ces fichiers sur le serveur lors de l'envoi de la page, faute de quoi la fonctionnalit InContext Editing ne sera pas utilisable dans un navigateur.
Cration d'une rgion rpte InContext Editing

Une rgion rpte InContext Editing est une paire de balises HTML dont la balise d'ouverture contient l'attribut ice:repeating. La rgion rpte dfinit une zone de la page qu'un utilisateur peut rpter et laquelle il peut ajouter du contenu lorsqu'il la modifie dans un navigateur. Par exemple, si vous avez dfini un titre suivi d'un paragraphe, vous pouvez transformer ces lments en une rgion rpte, que l'utilisateur pourra ensuite dupliquer sur la page.
version prliminaire
Titre 1
Titre 2
Titre 3
Rgions rptes affiches dans une fentre de navigateur InContext Editing modifiable. La rgion infrieure est slectionne et peut tre nouveau duplique, supprime ou dplace vers le haut ou vers le bas.
L'utilisateur peut ajouter des rgions rptes bases sur la rgion d'origine, mais vous pouvez aussi lui laisser la possibilit d'en supprimer, d'ajouter des rgions tout fait indites (non bases sur le contenu de la rgion d'origine) et d'en dplacer vers le haut ou vers le bas. Lorsque vous crez une rgion rpte, Dreamweaver l'entoure d'un autre conteneur, baptis groupe de rgions rptes . Ce conteneur (une balise div dont la balise d'ouverture comprend l'attribut ice:repeatinggroup) fait office de conteneur de toutes les rgions rptes modifiables qu'un utilisateur peut ajouter au groupe. Il est impossible de dplacer des rgions rptes en dehors de leurs conteneurs de groupes de rgions rptes. Il est en outre dconseill d'ajouter manuellement des balises de groupes de rgions rptes votre page. Dreamweaver les ajoute automatiquement en cas de besoin. Remarque : Lorsque vous crez une rgion rpte partir d'une ligne de tableau (tr tag), Dreamweaver applique l'attribut du groupe de rgions rptes la balise parente (par exemple, la balise table) et n'insre pas de balise div. Si vous travaillez sur une page contenant dj un groupe de rgions rptes et que vous tentez d'ajouter une rgion rpte juste aprs le groupe existant, Dreamweaver dtecte qu'un groupe de rgions rptes prcde la rgion que vous voulez ajouter, et vous donne la possibilit d'ajouter la nouvelle rgion au groupe existant. Vous pouvez dcider d'ajouter la nouvelle rgion rpte au groupe existant ou de crer un nouveau groupe de rgions rptes. Remarque : Si vous ajoutez une rgion rpte InContext Editing une page base sur un modle Dreamweaver, la nouvelle rgion rpte InContext Editing doit se trouver l'intrieur d'une rgion qui est dj modifiable. Pour crer une rgion rpte dans Dreamweaver, procdez comme suit :
Slectionnez la balise que vous voulez transformer en rgion rpte. Vous pouvez choisir de nombreuses balises
: a, abbr, acronym, address, b, big, blockquote, center, cite, code, dd, dfn, dir, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, img, ins, kbd, label, li, menu, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, tr, tt, u, ul, ou encore var.
version prliminaire
Remarque : Seules les balises div peuvent possder simultanment l'attribut de rgion modifiable et l'attribut de rgion rpte.
Placez le point d'insertion o vous voulez insrer une nouvelle rgion rpte sur la page. Slectionnez prcisment une rgion rpte dans un modle Dreamweaver (fichier DWT). Slectionnez tout autre contenu de la page que vous voulez rendre rpte (par exemple un bloc de texte).
2 Choisissez Insertion > InContext Editing > Crer une rgion rpte. 3 Les options votre disposition varient en fonction de votre slection.
Si vous avez slectionn une balise transformable, Dreamweaver la transforme en rgion rpte sans autres
oprations.
Si vous insrez une nouvelle rgion rpte vierge, effectuez l'une des actions suivantes : Choisissez Insrer une nouvelle rgion rpte au point d'insertion actuel puis cliquez sur OK. Choisissez Transformer la balise parente en rgion rpte si vous voulez que Dreamweaver fasse de la balise
parente de la slection le conteneur de la rgion. Seules certaines balises HTML sont transformables : a, abbr, acronym, address, b, big, blockquote, center, cite, code, dd, dfn, dir, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, img, ins, kbd, label, li, menu, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, tr, tt, u, ul et var. Remarque : Cette seconde option n'est disponible que lorsque le nud parent rpond prcisment aux critres de transformation. Par exemple, il doit s'agit d'une des balises transformables indiques, et elle ne doit pas tre confronte l'une des erreurs rpertories dans la section Messages d'erreur d'InContext Editing la page 504.
Si vous avez slectionn une rgion rpte d'un modle Dreamweaver, cliquez sur OK dans la bote de dialogue
Crer une rgion rpte. Dreamweaver entoure la rgion rpte du modle d'une balise div qui fait office de conteneur pour la nouvelle rgion rpte InContext Editing.
Si vous avez slectionn un autre contenu rendre rptable, effectuez l'une des oprations suivantes : Choisissez Entourer la slection actuelle d'une balise DIV puis la transformer si vous voulez entourer votre
slection d'une balise div puis la transformer en rgion rpte. La balise div dont Dreamweaver entoure le contenu fait office de conteneur pour la rgion rpte.
Choisissez Transformer la balise parente en rgion rpte si vous voulez que Dreamweaver fasse de la balise
parente de la slection le conteneur de la rgion rpte. Seules certaines balises HTML sont transformables : a, abbr, acronym, address, b, big, blockquote, center, cite, code, dd, dfn, dir, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, img, ins, kbd, label, li, menu, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, tr, tt, u, ul et var.
4 En mode Cration, cliquez sur l'onglet bleu de la rgion rpte afin de la slectionner, si ce n'est pas dj fait. Notez
que Dreamweaver vous force en fait slectionner l'onglet du groupe de rgions rptes. En effet, toutes les rgions rptes existent dans un groupe de rgions rptes, et vous devez dfinir les options de ces rgions pour le groupe tout entier.
5 Activez ou dsactivez des options dans l'inspecteur Proprits Groupe de rgions rptes. Deux options sont
disponibles : Rorganiser et Ajouter/Supprimer. Si vous activez Rorganiser, les utilisateurs pourront dplacer les rgions rptes vers le haut ou vers le bas lorsqu'ils y apporteront des modifications dans un navigateur. Si vous activez Ajouter/Supprimer, les utilisateurs pourront ajouter ou supprimer des rgions rptes. Les deux options sont actives par dfaut, et une des deux doit toujours tre active.
version prliminaire
Si c'est la premire fois que vous ajoutez la fonctionnalit InContext Editing une page, Dreamweaver vous informe qu'il ajoute des fichiers de support InContext Editing votre site: ice.conf.js, ice.js et ide.html. N'oubliez pas de charger ces fichiers sur le serveur lors de l'envoi de la page, faute de quoi la fonctionnalit InContext Editing ne sera pas utilisable dans un navigateur.
Suppression d'une rgion

La meilleure faon de supprimer une rgion consiste utiliser son inspecteur Proprits. Vous tes ainsi assur de supprimer tout le code associ la rgion.
1 Slectionnez une rgion modifiable, une rgion rpte ou un groupe de rgions rptes. 2 Dans l'inspecteur Proprits de la rgion, cliquez sur le bouton Supprimer la rgion.
Dfinition de classes CSS pour le formatage

La fonctionnalit Gestion des classes CSS disponibles d'InContext Editing est obsolte depuis Dreamweaver CS5.
Messages d'erreur d'InContext Editing

Impossible d'appliquer InContext Editing aux balises contenant des balises de script ou des blocs de code ct serveur.
Si votre slection contient du code ct serveur, Dreamweaver ne vous autorise pas la transformer en rgion modifiable ou rpte. Ce problme est li la manire dont InContext Editing enregistre les pages modifiables lorsque l'utilisateur travaille dans le navigateur. Lorsqu'un utilisateur enregistre la page aprs l'avoir modifie, InContext Editing supprime le code ct serveur de la rgion.
La slection actuelle ne peut pas tre transforme ou entoure d'une balise DIV, car le nud parent n'autorise pas DIV comme balise enfant.
Lorsqu'il est impossible de transformer directement la slection que vous voulez transformer sur votre page, Dreamweaver doit entourer cette slection de balises div qui feront office de conteneur pour votre nouvelle rgion modifiable ou rpte. C'est la raison pour laquelle les balises parentes de ce que vous voulez transformer doivent accepter les balises div comme enfants. Si la balise parente de la balise que vous tentez de transformer n'accepte pas les balises div enfants, Dreamweaver ne vous autorise pas excuter la transformation.
La slection actuelle contient dj une rgion modifiable ou se trouve l'intrieur d'une telle rgion. Les rgions modifiables imbriques ne sont pas autorises.
Si votre slection se trouve dans une rgion modifiable, ou si une rgion modifiable se trouve l'intrieur de la slection, Dreamweaver ne vous autorise pas excuter la transformation. InContext Editing ne prend pas en charge les rgions modifiables imbriques.
Les rgions modifiables ne doivent pas contenir de rgions rptes ou de groupes de rgions rptes.
Les rgions modifiables InContext Editing ne peuvent pas contenir d'autres fonctionnalits InContext Editing. Si vous tentez d'ajouter une rgion rpte ou un groupe de rgions rptes une rgion modifiable, Dreamweaver ne vous autorise pas excuter la transformation.
version prliminaire
Les rgions rptes ne doivent pas se trouver dans des rgions modifiables ou contenir des groupes de rgions rptes.
Les rgions modifiables InContext Editing ne peuvent pas contenir d'autres fonctionnalits InContext Editing. Si vous tentez d'ajouter une rgion rpte ou un groupe de rgions rptes une rgion modifiable, Dreamweaver ne vous autorise pas excuter la transformation. En outre, Dreamweaver ne transforme pas un lment en rgion modifiable ou rpte s'il contient dj un groupe de rgions rptes.
La slection actuelle contient dj une rgion rpte ou se trouve l'intrieur d'une telle rgion. Les rgions rptes imbriques ne sont pas autorises.
Si votre slection se trouve dans une rgion rpte, ou si une rgion rpte se trouve l'intrieur de la slection, Dreamweaver ne vous autorise pas excuter la transformation. InContext Editing ne prend pas en charge les rgions rptes imbriques.
La slection doit contenir prcisment une rgion modifiable/rpte de modle Dreamweaver ou se trouver dans n'importe quelle rgion modifiable/rpte de modle Dreamweaver.
Lorsque vous travaillez avec des fichiers de modle Dreamweaver (fichiers .dwt), vous devez respecter certaines rgles. Pour transformer une rgion modifiable/rpte d'un modle en une rgion modifiable/rpte InContext Editing, vous devez slectionner prcisment une rgion modifiable/rpte Dreamweaver sur la page puis la transformer. Pour transformer une autre slection sur la page (par exemple un bloc de texte), la slection doit se trouver l'intrieur d'une rgion modifiable de modle Dreamweaver.
Les fonctionnalits Rgion modifiable et Rgion rpte ne peuvent tre appliques simultanment qu'aux balises DIV.
Si votre slection n'est pas une balise div, et si un attribut de rgion rpte lui est dj appliqu, Dreamweaver ne vous autorisera pas lui appliquer galement l'attribut de rgion modifiable. Seules les balises div peuvent possder simultanment l'attribut de rgion modifiable et l'attribut de rgion rpte.
Dreamweaver a dtect qu'une balise de groupe de rgions rptes prcdait la rgion rpte.
Toutes les rgions rptes InContext Editing doivent se trouve dans un groupe de rgions rptes. Lorsque vous ajoutez une nouvelle rgion rpte une page, Dreamweaver dtecte si elle est dj prcde par un groupe de rgions rptes. Si c'est le cas, Dreamweaver vous propose d'ajouter la nouvelle rgion rpte au groupe existant ou de crer un nouveau groupe de rgions rptes qui contiendra la nouvelle rgion.
version prliminaire
506
Chapitre 17 : Affichage de donnes XML avec XSLT

Adobe Dreamweaver CS5 comprend des outils permettant d'afficher des donnes XML (Extensible Markup Language) dans votre page Web et de crer des pages qui excutent des transformations XSLT (Extensible Stylesheet Language Transformations) sur le client ou sur le serveur.
A propos de XML et de XSLT

Utilisation de XML et XSL dans des pages Web
Le langage XML (Extensible Markup Language) permet de structurer les informations. Tout comme HTML, XML utilise des balises pour structurer les informations, mais les balises XML ne sont pas prdfinies comme c'est le cas des balises HTML. En effet, XML permet de crer des balises sur mesure, adaptes la structure des donnes (schma). Les balises sont imbriques dans d'autres balises afin de crer un schma de balises parentes et enfants. Comme la plupart des balises HTML, toutes les balises dun schma XML comprennent une balise douverture et une balise de fermeture. L'exemple suivant illustre la structure de base d'un fichier XML :
<?xml version="1.0"> <mybooks> <book bookid="1"> <pubdate>03/01/2004</pubdate> <title>Displaying XML Data with Adobe Dreamweaver</title> <author>Charles Brown</author> </book> <book bookid="2"> <pubdate>04/08/2004</pubdate> <title>Understanding XML</title> <author>John Thompson</author> </book> </mybooks>
Dans cet exemple, chaque balise parente <book> contient trois balises enfants : <pubdate>, <title> et <author>. Toutefois, chaque balise <book> est elle-mme un enfant de la balise <mybooks>, qui se trouve un niveau hirarchique plus lev du schma. Vous pouvez nommer et structurer les balises XML votre guise, sous rserve qu'elles soient imbriques en consquence et qu'une balise de fermeture corresponde chaque balise d'ouverture. Les documents XML ne contiennent pas dinstructions de formatage, ce sont de simples conteneurs dinformations structures. Aprs avoir cr un schma XML, vous pouvez utiliser le langage XSL (Extensible Stylesheet Language) pour afficher les informations. Tout comme les feuilles de style en cascade (CSS) permettent de formater le contenu HTML, le langage XSL permet de formater les donnes XML. Vous pouvez dfinir des styles, des lments de page, la mise en page, etc. dans un fichier XSL, puis associer celui-ci un fichier XML. Lorsqu'un utilisateur affiche les donnes XML dans un navigateur, elles sont mises en forme conformment aux lments dfinis dans le fichier XSL. Le contenu (les donnes XML) et la prsentation (dfinie par le fichier XSL) sont entirement spars, ce qui offre un meilleur contrle sur la faon dont les informations sont affiches dans une page Web. En bref, le langage XSL constitue une technologie de prsentation pour les donnes XML, la sortie principale correspondant une page HTML.
version prliminaire
Affichage de donnes XML avec XSLT
Le langage XSLT (Extensible Stylesheet Language Transformations) est un sous-ensemble du langage XSL qui permet dafficher des donnes XML sur une page Web et de les transformer , paralllement aux styles XSL, en informations lisibles et mises en forme au format HTML. Vous pouvez utiliser Dreamweaver pour crer des pages XSLT permettant d'effectuer des transformations XSL dans un serveur d'application ou un navigateur. Lorsqu'une transformation XSL est effectue sur le serveur, ce dernier prend en charge toutes les oprations de transformation des donnes XML et XSL et de leur affichage dans la page. Lorsque cette transformation a lieu ct client, cest le navigateur (par exemple, Internet Explorer) qui se charge de ces oprations. La mthode que vous adoptez (transformations ct serveur ou client) dpend du rsultat final que vous souhaitez obtenir, des technologies votre disposition, du niveau d'accs aux fichiers XML source dont vous disposez et d'autres facteurs. Les deux mthodes prsentent des avantages et des inconvnients. Les transformations ct serveur, par exemple, grent tous les navigateurs, alors que les transformations ct client prennent uniquement en charge les navigateurs modernes (Internet Explorer 6, Netscape 8, Mozilla 1.8 et Firefox 1.0.2). Les transformations ct serveur vous permettent d'afficher les donnes XML dynamiquement partir de votre propre serveur ou de n'importe o sur le Web. En revanche, les donnes XML utilises par les transformations ct client doivent imprativement tre hberges localement sur votre propre serveur Web. Enfin, les transformations ct serveur requirent le dploiement des pages sur un serveur d'application configur, tandis que les transformations ct client exigent uniquement l'accs un serveur Web. Vous trouverez un didacticiel consacr au langage XML l'adresse www.adobe.com/go/vid0165_fr.
Voir aussi
Didacticiel consacr XML
Transformations XSL ct serveur

Dreamweaver propose des mthodes de cration de pages XSLT permettant d'effectuer des transformations XSL ct serveur. Lorsqu'un serveur d'application effectue la transformation XLS, le fichier contenant les donnes XML peut rsider sur votre propre serveur ou n'importe o sur le Web. Par ailleurs, tout navigateur peut afficher les donnes transformes. En revanche, le dploiement de pages pour les transformations ct serveur est plus complexe et ncessite un accs un serveur d'application. Lorsque vous faites appel des transformations XSL ct serveur, vous pouvez utiliser Dreamweaver pour crer des pages XSLT gnrant des documents HTML complets (des pages XSLT entires) ou des fragments XSLT gnrant une partie seulement d'un document HTML. Une page XSLT entire est semblable une page HTML classique. Elle contient une balise <body> et une balise <head>, et permet d'afficher des donnes HTML et XML sur la page. Un fragment XSLT est un segment de code utilis par un document distinct et qui affiche des donnes XML formates. A la diffrence dune page XSLT, un fragment XSLT est un fichier indpendant qui ne contient pas de balises <body> ou <head>. Pour afficher des donnes XML sur une page distincte, vous pouvez crer une page XSLT entire et la lier vos donnes XML. Si, en revanche, vous souhaitez afficher les donnes XML dans une section particulire d'une page dynamique existante (par exemple, la page d'accueil dynamique d'un magasin d'quipement sportif, sur laquelle des scores issus d'un fil RSS sont affichs sur le ct gauche), vous pouvez crer un fragment XSLT et insrer une rfrence ce fragment dans la page dynamique. La cration de fragments XSLT et leur utilisation avec d'autres pages dynamiques afin d'afficher des donnes XML constituent le cas de figure le plus courant.
version prliminaire
La premire tape de cration de ces types de pages consiste crer le fragment XSLT. il s'agit d'un fichier distinct qui contient la mise en page, le formatage etc. des donnes XML que vous souhaitez afficher dans la page dynamique. Une fois le fragment XSLT cr, vous insrez une rfrence ce fichier dans la page dynamique (par exemple, une page PHP ou ColdFusion). Cette rfrence au fragment XSLT a le mme effet qu'une SSI (Server Side Include) : les donnes XML mises en forme (le fragment) rsident dans un fichier distinct. En mode Cration, un emplacement rserv au fragment apparat dans la page dynamique. Lorsquun navigateur demande la page dynamique qui contient la rfrence au fragment, le serveur traite linstruction d'inclusion et cre un nouveau document dans lequel le contenu mis en forme du fragment apparat l o se trouvait lemplacement rserv.
SERVEUR WEB Serveur d'application
<HTML> <p>data </HTML>
<xsl:>
3
</xsl:>
XML
Navigateur Web
<HTML> <code> </HTML>
1. Le navigateur demande une page dynamique. 2. Le serveur Web recherche la page et la transmet au serveur d'application. 3. Le serveur d'application recherche des instructions sur la page et obtient le fragment XSLT. 4. Le serveur d'application procde la transformation (lecture du fragment XSLT, obtention et mise en forme des donnes XML). 5. Le serveur d'application insre le fragment transform dans la page et le retransfre au serveur Web. 6. Le serveur Web envoie la page acheve au navigateur.
Pour insrer une rfrence un fragment XSLT dans une page dynamique, utilisez le comportement de serveur Transformation XSL. Lorsque vous insrez la rfrence, Dreamweaver cre dans le dossier racine du site le sous-dossier includes/MM_XSLTransform/ et y copie un fichier contenant une bibliothque dexcution. Le serveur d'application utilise les fonctions dfinies dans ce fichier lors de la transformation des donnes XML spcifies. Le fichier extrait les donnes XML et les fragments XSLT, excute la transformation XSL et affiche le rsultat sur la page Web. Pour que la page puisse tre affiche correctement, les fichiers contenant respectivement le fragment XSLT, vos donnes XML et la bibliothque d'excution doivent tous les trois se trouver sur le serveur. (Si vous slectionnez un fichier XML distant comme source de donnes, par exemple un fil RSS, celui-ci doit bien entendu rsider ailleurs sur Internet.) Vous pouvez galement utiliser Dreamweaver pour crer des pages XSLT entires utiliser dans les transformations ct serveur. Une page XSLT entire fonctionne exactement comme un fragment XSLT. Toutefois, lorsque vous insrez la rfrence la page XSLT entire au moyen du comportement de serveur Transformation XSL, vous insrez le contenu intgral d'une page HTML. Par consquent, vous devez effacer tout le contenu HTML de la page dynamique (la page .cfm, .php ou .asp qui sert de conteneur) avant d'insrer la rfrence. Dreamweaver prend en charge les transformations XSL pour les pages ColdFusion, ASP et PHP. Remarque : Pour excuter des transformations ct serveur, votre serveur doit tre correctement configur. Pour plus d'informations, contactez l'administrateur du serveur ou consultez le site www.adobe.com/go/dw_xsl_fr.
version prliminaire
Voir aussi
Excution de transformations XSL sur le serveur la page 513
Transformations XSL ct client

Vous pouvez excuter des transformations XSL sur le client, sans utiliser de serveur d'application. Dreamweaver permet de crer une page XSLT entire qui se chargera de cette opration. Toutefois, les transformations ct client ncessitent la manipulation du fichier XML contenant les donnes afficher. Par ailleurs, les transformations ct client utilisent uniquement des navigateurs modernes (Internet Explorer 6, Netscape 8, Mozilla 1.8 et Firefox 1.0.2). Pour plus d'informations sur les navigateurs qui prennent en charge les transformations XSL, consultez le site www.w3schools.com/xsl/xsl_browsers.asp. Crez d'abord une page XLST entire et associez-lui une source de donnes XML. (Dreamweaver vous invite associer la source de donnes la cration de la page.) Vous pouvez crer une page XSLT entirement nouvelle ou convertir une page HTML existante en page XSLT. Lorsque vous convertissez une page HTML existante en page XSLT, vous devez lui associer une source de donnes XML au moyen du panneau Liaisons (Fentre > Liaisons). Une fois que vous avez cr votre page XSLT, vous devez la lier au fichier .xml qui contient les donnes XML en insrant une rfrence la page XSLT dans le fichier XML (tout comme vous insrez une rfrence une feuille de style en cascade (CSS) externe dans la section <head> d'une page HTML). Les visiteurs de votre site doivent consulter le fichier XML (et non la page XSLT) dans un navigateur. Lorsqu'ils affichent la page, le navigateur excute la transformation XSL et affiche les donnes XML, qui sont mises en forme par la page XSLT lie. D'un point de vue conceptuel, la relation entre les pages XSLT et XML lies est similaire, tout en tant diffrente, au modle de page CSS externe/HTML. Lorsqu'une page HTML contient du contenu (tel que du texte), vous utilisez une feuille de style externe pour formater ce contenu. La page HTML dtermine le contenu, tandis que le code CSS externe, qui est totalement invisible pour l'utilisateur, dtermine la prsentation. Avec XSLT et XML, la situation est inverse. Le fichier XML (que l'utilisateur ne voit jamais sous forme brute) dtermine le contenu alors que la page XLST dfinit la prsentation. La page XSLT contient les tableaux, la mise en forme, les graphiques etc. que contient d'ordinaire le code HTML standard. Lorsqu'un utilisateur affiche le fichier XML dans un navigateur, la page XSLT met le contenu en forme.
5 Navigateur Web 1
<XML> <directive>
SERVEUR WEB
XSLT
4
1. Le navigateur demande un fichier XML. 2. Le serveur rpond en envoyant le fichier XML au navigateur. 3. Le navigateur lit la directive XML et appelle le fichier XSLT. 4. Le serveur envoie le fichier XSLT au navigateur. 5. Le navigateur transforme les donnes XML et les affiche.
version prliminaire
Lorsque vous utilisez Dreamweaver pour associer une page XSLT une page XML, Dreamweaver insre le code appropri en haut de la page XML. Si la page XML lie vous appartient (autrement dit, si le fichier XML rside exclusivement sur votre serveur Web), il vous suffit d'utiliser Dreamweaver pour insrer le code appropri qui lie les deux pages. Lorsque vous tes le propritaire du fichier XML, les transformations XSL excutes par le client sont totalement dynamiques. En d'autres termes, toute mise jour des donnes du fichier XML est automatiquement rpercute sur toute sortie HTML utilisant la page XSLT lie. Remarque : Les fichiers XML et XSL que vous utilisez dans les transformations ct client doivent rsider dans un mme rpertoire. Si tel n'est pas le cas, le navigateur lit le fichier XML et trouve la page XLST utiliser pour la transformation, mais ne peut pas localiser les actifs (feuilles de style, images etc.) dfinis par les liens relatifs dans la page XSLT. Si la page XML lie ne vous appartient pas (si, par exemple, vous souhaitez utiliser des donnes XML provenant d'un fil RSS sur le Web), le processus est lgrement plus compliqu. Pour excuter des transformations ct client utilisant des donnes XML issues d'une source externe, vous devez d'abord tlcharger le fichier XML source dans le rpertoire contenant votre page XSLT. Une fois la page XML sur votre site local, vous pouvez utiliser Dreamweaver pour ajouter le code appropri afin de la lier la page XSLT et envoyer les deux pages (la page XML tlcharge et la page XSLT lie) votre serveur Web. Lorsque l'utilisateur affiche la page XML dans un navigateur, la page XSLT met le contenu en forme, tout comme dans l'exemple prcdent. Les transformations XLS ct client de donnes XML provenant d'une source externe prsentent toutefois un inconvnient : les donnes XML ne sont que partiellement dynamiques . Le fichier XML que vous tlchargez et modifiez est un simple instantan du fichier qui rside autre part sur le Web. Si le fichier XML d'origine change sur le Web, vous devez nouveau le tlcharger, le lier la page XSLT et envoyer le fichier XML votre serveur Web. Le navigateur assure uniquement le rendu des donnes qu'il reoit du fichier XML sur votre serveur Web, non des donnes que contient le fichier XML source d'origine.
Voir aussi
Excution de transformations XSL sur le client la page 530
Donnes XML et lments rpts

L'objet XSLT Rgion rpte permet d'afficher sur une page des lments rpts provenant d'un fichier XML. Toute zone contenant un emplacement rserv pour donnes XML peut tre convertie en rgion rpte. Les zones les plus courantes sont les tableaux, les lignes de tableau ou les sries de lignes de tableau.
version prliminaire
L'exemple ci-dessous indique comment l'objet XSLT Rgion rpte s'applique une ligne de tableau qui affiche le menu d'un restaurant. La ligne initiale contient trois lments diffrents du schma XML : item (plat), description et price (prix). Lorsque l'objet XSLT Rgion rpte est appliqu la ligne et que la page est traite par un serveur d'application, le tableau est rpt et des donnes uniques sont insres dans chaque nouvelle ligne.
Lorsque vous appliquez un objet XSLT Rgion rpte un lment dans la fentre de document, un contour fin de couleur grise dlimite la rgion rpte. Lors de laffichage de laperu dans un navigateur (Fichier > Aperu dans le navigateur), le contour gris disparat et la slection est dveloppe pour afficher les lments rpts spcifis dans le fichier XML, comme illustr ci-dessus. Lorsque vous ajoutez l'objet XSLT Rgion rpte la page, la longueur de l'emplacement rserv aux donnes XML dans la fentre de document est rduite. En effet, Dreamweaver met jour le chemin XPath (XML Path language) de l'espace rserv aux donnes XML afin qu'il soit relatif au chemin de l'lment rpt. Le code suivant, par exemple, cre un tableau contenant deux espaces rservs dynamiques, sans appliquer d'objet XSLT Rgion rpte au tableau:
<table width="500" border="1"> <tr> <td><xsl:value-of select="rss/channel/item/title"/></td> </tr> <tr> <td><xsl:value-of select="rss/channel/item/description"/></td> </tr> </table>
Le code suivant cre le mme tableau et lui applique l'objet XSLT Rgion rpte :
version prliminaire
<xsl:for-each select="rss/channel/item"> <table width="500" border="1"> <tr> <td><xsl:value-of select="title"/></td> </tr> <tr> <td><xsl:value-of select="description"/></td> </tr> </table> </xsl:for-each>
Dans l'exemple ci-dessus, Dreamweaver a mis jour le chemin XPath des lments qui sont compris dans la rgion rpte (title et description) afin qu'il soit relatif au chemin XPath qui figure entre les balises <xsl:for-each>, plutt qu'au document entier. Dreamweaver gnre galement des expressions XPath relatives au contexte dans d'autres cas. Si, par exemple, vous faites glisser un espace rserv pour donnes XML vers un tableau auquel un objet Rgion rpte est dj appliqu, Dreamweaver affiche automatiquement un chemin XPath relatif au chemin XPath existant qui figure entre les balises <xsl:for-each>.
Voir aussi
Affichage des lments rpts XML la page 518
Affichage d'un aperu des donnes XML

Lorsque vous utilisez l'option Aperu dans le navigateur (Fichier > Aperu dans le navigateur) pour afficher un aperu des donnes XML que vous avez insres dans un fragment XSLT ou une page XSLT entire, le moteur qui excute la transformation XSL varie d'une situation l'autre. Pour les pages dynamiques contenant des fragments XSLT, c'est toujours le serveur d'application qui excute la transformation. Dans d'autres cas, c'est soit Dreamweaver, soit le navigateur qui s'en charge. Le tableau suivant passe en revue les cas de figure dans lesquels l'option Aperu dans le navigateur est utilise et indique le moteur qui excute les transformations respectives :
Type de page affiche dans le navigateur Page dynamique contenant un fragment XSLT Fragment XSLT ou page XSLT entire Fichier XML li une page XSLT entire Moteur excutant la transformation des donnes Serveur d'application Dreamweaver Navigateur
Les rubriques suivantes vous permettent de dterminer la mthode d'aperu adapte vos besoins: Aperu de pages pour des transformations ct serveur Dans le cas de transformations ct serveur, le contenu que le visiteur du site affiche est transform par votre serveur d'application. Lors de la gnration de fragments XSLT et de pages dynamiques utiliser dans des transformations ct serveur, il est toujours prfrable d'effectuer un aperu de la page dynamique qui contient le fragment XSLT, plutt que de ce dernier. Dans le premier cas, vous utilisez le serveur d'application et avez ainsi la garantie que votre aperu reprsente le contenu qui s'affichera lorsque les visiteurs de votre site consulteront votre page. Dans le deuxime cas, Dreamweaver excute la transformation et les rsultats ne sont pas ncessairement garantis. Vous pouvez utiliser Dreamweaver pour afficher un aperu du fragment XSLT pendant que vous le crez, mais pour obtenir un rendu prcis des donnes, utilisez plutt le serveur d'application pour afficher un aperu de la page dynamique aprs y avoir insr le fragment XSLT.
version prliminaire
Aperu de pages pour des transformations ct client Dans le cas de transformations ct client, le contenu que le visiteur du site affiche est transform par un navigateur. Pour ce faire, vous liez le fichier XML la page XSLT. Si vous ouvrez le fichier XML dans Dreamweaver et en affichez un aperu dans un navigateur, c'est ce dernier qui doit charger le fichier XML et excuter la transformation. Vous obtenez donc le mme rsultat que le visiteur de votre site. Cette mthode prsente toutefois un inconvnient : il vous en effet plus difficile de dboguer votre page car le navigateur transforme le fichier XML et gnre le contenu HTML en interne. Si vous slectionnez l'option Afficher la source du navigateur pour dboguer le contenu HTML gnr, vous avez uniquement accs au code XML que le navigateur a reu l'origine et non la totalit du code HTML (balises, styles, etc.) qui a effectu le rendu de la page. Pour afficher la totalit du code HTML lorsque vous consultez le code source, vous devez effectuer l'aperu de la page XSLT dans un navigateur. Aperu de pages XSLT entires et de fragments XSLT Lorsque vous crez des pages XSLT entires et des fragments XSLT, il est souhaitable d'afficher un aperu de votre travail pour vous assurer que les donnes s'affichent correctement. Si vous utilisez l'option Aperu dans le navigateur pour afficher une page XSLT entire ou un fragment XSLT, Dreamweaver excute la transformation au moyen d'un moteur de transformation intgr. Cette mthode garantit des rsultats rapides et vous permet de facilement gnrer et de dboguer votre page au fur et mesure. Elle vous permet aussi d'afficher la totalit du code HTML (balises, styles, etc.) par le biais de l'option Afficher la source du navigateur. Remarque : Cette mthode d'aperu est couramment utilise lorsque vous commencez gnrer des pages XSLT, que vous utilisiez le client ou le serveur pour transformer vos donnes.
Excution de transformations XSL sur le serveur

Processus d'excution des transformations XSL ct serveur
Vous pouvez excuter des transformations XLS ct serveur sur le serveur. Informez-vous sur les transformations XSL ct client et ct serveur et sur l'utilisation de XML et de XSL avec les pages Web avant de crer des page affichant des donnes XML. Remarque : Pour excuter des transformations ct serveur, votre serveur doit tre correctement configur. Pour plus d'informations, contactez l'administrateur du serveur ou consultez le site www.adobe.com/go/dw_xsl_fr. Le droulement gnral de l'excution des transformations XSL ct serveur est le suivant (chaque tape individuelle est dcrite dans d'autres rubriques) :
1. Crez un site Dreamweaver. 2. Choisissez une technologie de serveur et configurez un serveur d'application. 3. Testez le serveur d'application.
Vous pouvez par exemple crer une page traiter et vous assurer que le serveur d'application effectue l'opration requise. Vous trouverez un didacticiel ce sujet sur le site www.adobe.com/go/dw_xsl_fr.
4. Crez un fragment ou une page XSLT, ou convertissez une page HTML en page XSLT.
Sur votre site Dreamweaver, crez un fragment XSLT ou une page XSLT entire. Convertissez une page HTML existante en une page XSLT entire.
version prliminaire
5. Associez une source de donnes XML la page. 6. Affichez les donnes XML en les liant au fragment XSLT ou la page XSLT entire. 7. Si cela s'impose, ajoutez un objet XSLT Rgion rpte au tableau ou la ligne de tableau contenant les espaces rservs pour donnes XML. 8. Insrez des rfrences.
Pour insrer une rfrence au fragment XSLT dans votre page dynamique, utilisez le comportement de serveur
Transformation XSL.
Pour insrer une rfrence la page XSLT dans la page dynamique, supprimez tout le code HTML de la page
dynamique, puis utilisez le comportement de serveur Transformation XSL.
9. Envoyez la page et le fragment.
Envoyez la page dynamique et le fragment XSLT (ou la page XSLT entire) votre serveur d'application. Si vous utilisez un fichier XML local, envoyez-le galement.
10. Affichez la page dynamique dans un navigateur.
Le serveur d'application transforme alors les donnes XML, les insre dans la page dynamique et les affiche dans le navigateur.
Voir aussi
Configuration d'un site Dreamweaver la page 38 Choix d'un serveur d'application la page 545 Utilisation de XML et XSL dans des pages Web la page 506 Transformations XSL ct client la page 509 Transformations XSL ct serveur la page 507
Cration d'une page XSLT

Les pages XSLT permettent d'afficher des donnes XML sur des pages Web. Vous pouvez crer soit une page XSLT entire (une page XSLT contenant une balise <body> et une balise <head>), soit un fragment XSLT. Lorsque vous crez un fragment XSLT, vous crez en fait un fichier indpendant qui ne contient pas de balise body ni head, mais simplement du code qui sera ensuite insr dans une page dynamique. Remarque : Si vous utilisez une page XSLT existante et devez lui associer une source de donnes XML.
1 Choisissez Fichier > Nouveau. 2 Dans la catgorie Page vierge de la bote de dialogue Nouveau document, slectionnez l'une des options suivantes
dans la colonne Type de page :
Slectionnez XSLT (page entire) pour crer une page XSLT entire. Slectionnez XSLT (Fragment) pour crer un fragment XSLT.
3 Cliquez sur Crer et effectuez l'une des actions suivantes dans la bote de dialogue Localiser source XML :
Choisissez Associer un fichier local, cliquez sur le bouton Parcourir, recherchez le fichier XML local sur votre
ordinateur et cliquez sur OK.
version prliminaire
Choisissez Associer un fichier distant, indiquez l'adresse URL d'un fichier XML sur Internet (par exemple un fil
RSS), puis cliquez sur OK. Remarque : Cliquer sur le bouton Annuler entrane la gnration d'une nouvelle page XSLT laquelle aucune source de donnes XML n'est associe. Le schma de votre source de donnes XML s'affiche dans le panneau Liaisons.
Le tableau suivant dcrit les diffrents lments que le schma est susceptible de contenir.
Elment <> Reprsente Elment XML non rpt obligatoire Dtails Elment qui apparat une fois seulement au sein de son nud parent Elment qui apparat une ou plusieurs fois au sein de son nud parent Elment qui apparat zro ou plusieurs fois au sein de son nud parent En rgle gnrale, l'lment rpt lorsque le point d'insertion se trouve au sein d'une rgion rpte
<>+
Elment XML rpt
<>+
Elment XML facultatif
Nud d'lment en gras
Elment contextuel en cours
Attribut XML
4 Enregistrez la nouvelle page (Fichier > Enregistrer) en lui attribuant l'extension .xsl ou .xslt (l'extension par dfaut
est .xsl).
Conversion des pages HTML en pages XSLT

Vous pouvez aussi convertir des pages HTML existantes en pages XSLT. Si, par exemple, vous disposez d'une page statique prdfinie laquelle vous souhaitez ajouter des donnes XML, vous pouvez la convertir en page XSLT, plutt que de crer une page XSLT et de la redfinir entirement.
1 Ouvrez la page HTML convertir. 2 Slectionnez Fichier > Convertir > XSLT 1.0.
Une copie de la page s'ouvre dans la fentre de document. La nouvelle page est une feuille de style XSL, enregistre avec l'extension .xsl.
version prliminaire
Association de sources de donnes XML

Si vous utilisez une page XSLT existante ou si vous en crez une dans Dreamweaver sans lui associer de source de donnes XML, vous devez utiliser le panneau Liaisons pour associer une source de donnes XML.
1 Dans le panneau Liaisons (Fentre > Liaisons), cliquez sur la liaison XML.
Remarque : Pour ajouter une source de donnes XML, vous pouvez aussi cliquer sur le lien Source, dans le coin suprieur droit du panneau Liaisons.
Choisissez Associer un fichier local, cliquez sur le bouton Parcourir, recherchez le fichier XML local sur votre
ordinateur et cliquez sur OK.
Choisissez Associer un fichier distant, puis indiquez l'adresse URL d'un fichier XML sur Internet (par exemple un
fil RSS).
3 Cliquez sur OK pour fermer la bote de dialogue Localiser source XML.
Le schma de votre source de donnes XML s'affiche dans le panneau Liaisons.
Affichage des donnes XML dans des pages XSLT

Aprs avoir cr une page XSLT et lui avoir associ une source de donnes XML, vous pouvez lier des donnes la page. Pour ce faire, vous ajoutez un emplacement rserv pour donnes XML dans votre page, puis vous utilisez le Crateur d'expression XPATH ou l'inspecteur Proprits pour mettre en forme les donnes slectionnes qui vont s'afficher dans la page.
1 Ouvrez une page XSLT laquelle est associe une source donnes XML. 2 (Facultatif) Choisissez Insertion > Tableau pour ajouter un tableau la page. Un tableau permet d'organiser plus
aisment les donnes XML. Remarque : En rgle gnrale, il est conseill d'utiliser l'objet XSLT Rgion rpte pour afficher des lments XML rpts sur une page. Dans ce cas, vous pouvez crer un tableau d'une seule ligne avec une ou plusieurs colonnes, ou un tableau de deux lignes si vous avez l'intention d'insrer un en-tte.
version prliminaire
3 Dans le panneau Liaisons, slectionnez un lment XML et faites-le glisser jusqu' l'emplacement o vous souhaitez
insrer des donnes sur la page.
Un espace rserv pour donnes XML est cr sur la page. Cet espace rserv est en surbrillance et encadr d'accolades. Il utilise la syntaxe XPath (XML Path Language) pour dcrire la structure hirarchique du schma XML. Par exemple, si vous faites glisser llment enfant title sur la page, et si ses lments parents sont rss, channel et item, la syntaxe de lespace rserv dynamique sera \{rss/channel/item/title\}. Double-cliquez sur l'emplacement rserv des donnes XML dans la page pour ouvrir le Crateur d'expression XPATH. Le Crateur d'expression XPATH permet de mettre les donnes slectionnes en forme ou de slectionner d'autres lments dans le schma XML.
4 (Facultatif) Pour affecter des styles vos donnes XML, slectionnez un espace rserv pour donnes XML et
appliquez-lui des styles, comme s'il s'agissait d'un autre segment de contenu, l'aide de l'inspecteur Proprits ou du panneau Styles CSS. Pour appliquer des styles aux fragments XSLT, vous pouvez aussi utiliser des feuilles de style au moment de la cration. Chacune de ces mthodes prsente des avantages et des inconvnients.
5 Vrifiez le rsultat dans un navigateur (Fichier > Aperu dans le navigateur).
Remarque : Lorsque vous utilisez la fonctionnalit Aperu dans le navigateur, Dreamweaver effectue une transformation XSL en interne, sans faire appel un serveur d'application.
Voir aussi
Affichage d'un aperu des donnes XML la page 512 Prsentation de contenu l'aide de tableaux la page 182
version prliminaire
Affichage des lments rpts XML

L'objet XSLT Rgion rpte permet d'afficher sur une page Web des lments rpts provenant d'une source de donnes XML. Par exemple, si vous affichez des titres et descriptions darticles partir dun fil dinformations contenant entre 10 et 20 articles, chaque titre et chaque description du fichier XML est probablement un lment enfant d'un lment rpt. En mode cration, toute rgion contenant un emplacement rserv pour donnes XML peut tre convertie en rgion rpte. Toutefois, les zones les plus frquentes sont les tableaux, les lignes de tableau ou une srie de lignes de tableau.
1 En mode Cration, slectionnez une rgion comportant un ou plusieurs espaces rservs pour donnes XML.
La slection peut tre de tout type, notamment tableau, ligne de tableau ou mme paragraphe de texte.
Pour slectionner prcisment une rgion sur une page, vous pouvez utiliser le slecteur de balises dans le coin infrieur gauche de la fentre de document. Par exemple, si la rgion correspond un tableau, cliquez dans ce tableau, puis cliquez sur la balise dans le slecteur de balises.
2 Effectuez l'une des actions suivantes :
Choisissez Insertion > Objets XSLT > Rgion rpte. Dans la catgorie XSLT du panneau Insertion, cliquez sur le bouton Rgion rpte.
3 Dans le Crateur d'expression XPATH, slectionnez l'lment rpt (il est indiqu par un signe plus de petite
taille).
version prliminaire
4 Cliquez sur OK.
Dans la fentre de document, un contour fin de couleur grise dlimite la rgion rpte. Lors de laffichage de laperu dans un navigateur (Fichier > Aperu dans le navigateur), le cadre gris disparat et la slection est dveloppe pour afficher les lments rpts spcifis dans le fichier XML. Lorsque vous ajoutez l'objet XSLT Rgion rpte la page, l'emplacement rserv pour donnes XML dans la fentre de document est tronqu. En effet, Dreamweaver met jour le chemin XPath de l'espace rserv pour donnes XML afin qu'il soit relatif au chemin de l'lment rpt.
Voir aussi
Utilisation du Crateur d'expressions XPath pour ajouter des expressions pour les donnes XML la page 526 Donnes XML et lments rpts la page 510
Dfinition des proprits des rgions rptes (XSL)

L'inspecteur Proprits permet de slectionner un autre noeud XML rpter pour crer la rgion rpte.
Dans la zone Slection, tapez un nouveau noeud, puis appuyez sur l'icne en forme d'clair et slectionnez le noeud
dans l'arborescence de schma XML qui apparat.
Modification d'un objet XSLT Rgion rpte

Aprs avoir insr un objet XSLT Rgion rpte dans une rgion, vous pouvez le modifier laide de l'inspecteur Proprits.
1 Slectionnez l'objet voulu en cliquant dans le cadre gris qui entoure la rgion rpte. 2 Dans l'inspecteur Proprits (Fentre > Proprits), cliquez sur l'icne dynamique situe en regard de la zone de
texte Slection.
3 Dans le Crateur d'expression XPATH, effectuez les modifications ncessaires et cliquez sur OK.
Insertion de fragments XSLT dans des pages dynamiques

Aprs avoir cr un fragment XSLT, vous pouvez linsrer dans une page Web dynamique laide du comportement de serveur Transformation XSL. Lorsque vous insrez ce comportement de serveur dans une page et affichez celle-ci dans un navigateur, un serveur d'application effectue une transformation qui affiche les donnes XML du fragment XSLT slectionn. Dreamweaver prend en charge les transformations XSL pour les pages ColdFusion, ASP et PHP. Remarque : La procdure d'insertion du contenu d'une page XSLT entire dans une page dynamique est identique. Avant d'utiliser le comportement de serveur Transformation XSL pour insrer la page XSLT entire, supprimez tout le code HTML de la page dynamique.
1 Ouvrez une page ColdFusion, ASP ou PHP. 2 En mode Cration, placez le curseur l o vous voulez insrer le fragment XSLT.
Remarque : Lors de l'insertion de fragments XSLT, vous devez toujours cliquer sur le bouton Afficher les modes Code et Cration aprs avoir plac le point d'insertion sur la page, de faon s'assurer que le point d'insertion est l'emplacement voulu. S'il n'y est pas, cliquez de nouveau dans l'cran Code pour placer le point d'insertion l'endroit voulu.
version prliminaire
3 Dans le panneau Comportements de serveur (Fentre > Comportements de serveur), cliquez sur le bouton Plus (+),
puis choisissez Transformation XSL.
4 Dans la bote de dialogue Transformation XSL, cliquez sur le bouton Parcourir et recherchez un fragment XSLT ou
une page XSLT entire. Dreamweaver renseigne le champ de texte suivant avec le chemin d'accs ou l'adresse URL du fichier XML associ ce fragment. Pour modifier le contenu de ce champ, cliquez sur le bouton Parcourir et slectionnez un autre fichier.
5 (Facultatif) Cliquez sur le bouton Plus (+) pour ajouter un paramtre XSLT. 6 Cliquez sur OK pour insrer une rfrence au fragment XSLT dans la page. Il n'est pas possible de modifier ce
fragment. Si ncessaire, double-cliquez sur le fragment pour ouvrir son fichier source et le modifier. Un sous-dossier includes/MM_XSLTransform/ contenant un fichier contenant une bibliothque d'excution est galement cr dans le dossier racine du site. Le serveur d'application utilise les fonctions dfinies dans ce fichier lors de la transformation.
7 Transfrez la page dynamique votre serveur (Site > Placer) et cliquez sur Oui pour inclure les fichiers dpendants.
Pour que la page puisse tre affiche correctement, les fichiers contenant respectivement le fragment XSLT, vos donnes XML et la bibliothque d'excution doivent tous les trois se trouver sur le serveur. (Si vous slectionnez un fichier XML distant comme source de donnes, celui-ci doit bien entendu rsider ailleurs sur Internet.)
Voir aussi
Cration d'une page XSLT la page 514 Transformations XSL ct serveur la page 507
version prliminaire
Suppression de fragments XSLT de pages dynamiques

Pour supprimer un fragment XSLT d'une page, supprimez le comportement de serveur Transformation XSL qui a permis d'insrer le fragment. La suppression de ce comportement de serveur supprime uniquement le fragment XSLT ; les fichiers associs (XML, XSLT ou bibliothque dexcution) ne sont pas affects.
1 Dans le panneau Comportements de serveur (Fentre > Comportements de serveur), slectionnez le
comportement de serveur Transformation XSL supprimer.

2 Cliquez sur le bouton Moins (-).
Remarque : Vous devez toujours utiliser cette mthode pour supprimer un comportement de serveur. En effet, la suppression manuelle du code correspondant ne supprime que partiellement le comportement de serveur, mme si celuici disparat bien du panneau Comportements de serveur.
Modification des comportements de serveur Transformation XLS

Aprs avoir ajout un fragment XSLT une page Web dynamique, vous pouvez tout moment modifier le comportement de serveur Transformation XSL.
1 Dans le panneau Comportements de serveur (Fentre > Comportements de serveur), double-cliquez sur le
comportement de serveur Transformation XLS modifier.

2 Effectuez les modifications requises, puis cliquez sur OK.
Cration d'un lien dynamique

Vous pouvez crer un lien dynamique dans votre page XSLT qui tablit un lien vers une URL spcifique lorsque l'utilisateur clique sur un mot ou un groupe de mots spcifi dans vos donnes XML. Pour plus d'informations, consultez les listes d'erreurs Dreamweaver l'adresse www.adobe.com/go/dw_documentation_fr.
Application de styles aux fragments XSLT

Lorsque vous crez une page XSLT entire (autrement dit, une page XSLT qui contient des balises <body> et <head>), vous pouvez afficher les donnes XML sur la page, puis les mettre en forme comme tout autre contenu l'aide de l'inspecteur Proprits ou du panneau Styles CSS. Lorsque vous crez un fragment XSLT pour l'insertion dans une page dynamique, tel qu'un fragment insrer dans une page ASP, PHP ou Cold Fusion), le rendu des styles du fragment et de la page dynamique devient plus compliqu. Bien que le fragment XSLT soit trait de faon indpendante par rapport la page dynamique, il est important de conserver l'esprit que le fragment est conu pour cette page dynamique et que le code renvoy par le fragment XSLT sera plac quelque part entre les balises <body> de la page dynamique. Etant donn ce processus, il est important de s'assurer qu'aucun lment <head> (tel que des dfinitions de style ou des liens vers des feuilles de style externes) n'est inclus dans des fragments XSLT. Sinon, le serveur d'application place ces lments dans la section <body> de la page dynamique, ce qui dbouche sur un marquage non valide. Vous pouvez, par exemple, dcider de crer un fragment XSLT insrer dans une page dynamique et le mettre en forme au moyen de la mme feuille de style externe que la page dynamique. Si vous attachez la mme feuille de style au fragment, la page HTML rsultante contient un lien en double la feuille de style (un dans la section <head> de la page dynamique et un autre dans la section <body> de la page, l o le contenu du fragment XSLT apparat). Une meilleure faon de procder consiste utiliser des feuilles de style la conception pour rfrencer la feuille de style externe.
version prliminaire
Lors du formatage du contenu des fragments XSLT, utilisez la procdure suivante :
Tout d'abord, attachez une feuille de style externe la page dynamique. (Cette procdure reprend les meilleures
pratiques d'application des styles au contenu d'une page Web.)
Ensuite, attachez la mme feuille de style externe au fragment XSLT en tant que feuille de style la conception.
Comme leur nom l'indique, les feuilles de style la conception fonctionnent uniquement en mode Cration dans Dreamweaver. Une fois les deux tapes prcdentes termines, vous pouvez crer de nouveaux styles dans votre fragment XSLT l'aide de la feuille de style qui a t associe votre page dynamique. Vous obtiendrez un code HTML mieux structur (dans la mesure o la rfrence la feuille de style n'est valide que dans Dreamweaver) et le fragment affichera toujours les styles requis en mode Cration. De plus, tous vos styles sont appliqus au fragment et la page dynamique lorsque vous affichez cette dernire en mode Cration ou en affichez un aperu dans un navigateur. Remarque : Si vous demandez un aperu du fragment XSLT dans un navigateur, ce dernier n'affiche pas les styles. Par contre, vous devez afficher un aperu de la page dynamique dans le navigateur afin de consulter le fragment XSLT dans le contexte de la page dynamique. Pour plus d'informations sur l'utilisation de CSS pour formater les fragments XSLT, voir www.adobe.com/go/dw_xsl_styles_fr.
Voir aussi
Utilisation des feuilles de style la conception la page 153
Utilisation des paramtres avec des transformations XSL

Lorsque vous ajoutez le comportement de serveur Transformation XLS une page Web, vous pouvez dfinir des paramtres de transformation XSL. Un paramtre contrle la faon dont les donnes XML sont traites et affiches. Par exemple, vous pouvez utiliser un paramtre pour identifier et afficher un article spcifique d'un fil d'informations. Lorsque la page est charge dans un navigateur, seul larticle spcifi par le paramtre est affich.
Ajout d'un paramtre XSLT une transformation XSL

1 Ouvrez la bote de dialogue Transformation XSL. Pour ce faire, double-cliquez sur un comportement de serveur
Transformation XLS dans le panneau Comportements de serveur (Fentre > Comportements de serveur), ou ajoutez un nouveau comportement de serveur Transformation XLS.
2 Dans la bote de dialogue Transformation XSL, cliquez sur le bouton Plus (+) ct du libell Paramtres XSLT.
version prliminaire
3 Dans la bote de dialogue Ajouter un paramtre, tapez un nom pour le paramtre dans la zone Nom. Ce nom ne
peut comporter que des caractres alphanumriques, et il ne doit pas contenir d'espace.
Pour utiliser une valeur statique, saisissez-la dans la zone Valeur. Pour utiliser une valeur dynamique, cliquez sur l'icne Dynamique ct de la zone Valeur, renseignez la bote de
dialogue Donnes dynamiques et cliquez sur le bouton OK. Pour plus d'informations, cliquez sur le bouton Aide de la bote de dialogue Donnes dynamiques.
5 Dans la zone Valeur par dfaut, indiquez la valeur que le paramtre doit utiliser si la page ne reoit aucune valeur
lors de son excution, puis cliquez sur OK.
Modification d'un paramtre XSLT

2 Slectionnez un paramtre dans la liste des paramtres XSLT. 3 Cliquez sur le bouton Modifier. 4 Effectuez les modifications requises, puis cliquez sur OK.
Suppression d'un paramtre XSLT

2 Slectionnez un paramtre dans la liste des paramtres XSLT. 3 Cliquez sur le bouton Moins (-).
Cration et modification des rgions XSLT conditionnelles

Vous pouvez crer des rgions conditionnelles simples ou multiples sur une page XSLT. Vous pouvez soit slectionner un lment en mode Cration, puis appliquer une rgion conditionnelle la slection, soit insrer une rgion conditionnelle l'emplacement du point d'insertion dans le document. Supposons que vous souhaitiez afficher l'expression Non disponible en regard du prix d'un article lorsque celui-ci est en rupture de stock. Pour ce faire, vous tapez l'expression Non disponible sur la page, la slectionnez et lui appliquez une rgion conditionnelle. Dreamweaver entoure l'expression des balises <xsl:if> et affiche uniquement le mot Non disponible sur la page lorsque les donnes rpondent aux conditions dfinies par l'expression conditionnelle.
Application d'une rgion XSLT conditionnelle

Vous pouvez rdiger une expression conditionnelle simple insrer dans votre page XSLT. Tout contenu slectionn l'ouverture de la bote de dialogue Rgion conditionnelle est entour d'un bloc <xsl:if>. Si aucun contenu n'est slectionn, le bloc <xsl:if> est entr au point d'insertion. Il est judicieux d'utiliser cette bote de dialogue pour dmarrer, puis de personnaliser l'expression en vue Code.
version prliminaire
L'lment <xsl:if> est similaire l'instruction if d'autres langages. Il a pour fonction de tester une condition et de dclencher une action en fonction du rsultat. L'lment <xsl:if> vous permet de tester si une expression est vraie ou fausse.
1 Choisissez Insertion > Objets XSLT > Rgion conditionnelle, ou cliquez sur l'icne Rgion conditionnelle de la
catgorie XSLT du panneau Insertion.

2 Dans la bote de dialogue Rgion conditionnelle, entrez l'expression conditionnelle utiliser pour la rgion.
L'exemple suivant vrifie si la valeur de l'attribut @available du nud contextuel correspond true (vrai).
3 Cliquez sur OK.
Le code suivant est insr dans votre page XSLT :

<xsl:if test="@available='true'"> Content goes here </xsl:if>
Remarque : Vous devez placer les valeurs de chane telles que true entre guillemets. Dreamweaver code les guillemets (') votre intention, afin qu'elles apparaissent dans un format XHTML valide. Outre tester des noeuds pour des valeurs, vous pouvez utiliser toute fonction XSLT prise en charge dans votre instruction conditionnelle. La condition est teste pour le noeud en cours de votre fichier XML. L'exemple suivant teste le dernier noeud des rsultats :
Pour plus d'informations et des exemples concernant l'criture d'expressions conditionnelles, consultez la section <xsl:if> du panneau Rfrences (Aide > Rfrence).
Application de rgions XSLT conditionnelles multiples

Vous pouvez rdiger une expression conditionnelle simple insrer dans votre page XSLT. Tout contenu slectionn l'ouverture de la bote de dialogue Rgion conditionnelle est entour d'un bloc <xsl:choose>. Si vous ne slectionnez pas de contenu, le bloc <xsl:choose> est entr au point d'insertion. Il est judicieux d'utiliser cette bote de dialogue pour dmarrer, puis de personnaliser l'expression en vue Code.
version prliminaire
L'lment <xsl:choose> est similaire l'instruction case d'autres langages. Il a pour fonction de tester une condition et de dclencher une action en fonction du rsultat. L'lment <xsl:choose> vous permet de tester plusieurs conditions.
1 Choisissez Insertion > Objets XSLT > Rgion conditionnelle multiple, ou cliquez sur l'icne Rgion conditionnelle
multiple de la catgorie XSLT du panneau Insertion.

2 Entrez la premire condition dans la bote de dialogue Rgion conditionnelle multiple.
L'exemple suivant vrifie si la valeur du sous-lment price du nud contextuel est infrieure 5.
3 Cliquez sur OK.
Le code suivant est insr dans votre page XSLT :

<xsl:choose> <xsl:when test="price<5"> Content goes here </xsl:when> <xsl:otherwise> Content goes here </xsl:otherwise> </xsl:choose>
4 Pour insrer une autre condition, placez le point d'insertion en mode Code entre les paires de balises <xsl:when>
ou juste avant la balise <xsl:otherwise>, puis insrez une rgion conditionnelle (Insertion > Objets XSLT > Rgion conditionnelle). Une fois que vous avez spcifi la condition et cliqu sur OK, une autre balise <xsl:when> est insre dans le bloc
<xsl:choose>.
Pour plus d'informations et des exemples concernant l'criture d'expressions conditionnelles, consultez les sections
<xsl:choose> du panneau Rfrences (Aide > Rfrence).
Dfinition des proprits des rgions conditionnelles (If)

L'inspecteur de dfinition des proprits des rgions conditionnelles permet de modifier la condition utilise dans une rgion conditionnelle dans votre page XSL. La rgion conditionnelle teste la condition et dclenche une action en fonction du rsultat.
Dans la zone Test, tapez une nouvelle condition et appuyez sur Entre.
Dfinition des proprits conditionnelles (When)

L'inspecteur de dfinition des proprits des rgions conditionnelles permet de modifier la condition utilise dans une rgion conditionnelle multiple dans votre page XSL. La rgion conditionnelle multiple teste la condition et dclenche une action en fonction du rsultat.
Dans la zone Test, tapez une nouvelle condition et appuyez sur Entre.
version prliminaire
Insertion de commentaires XSL

Vous pouvez ajouter des balises de commentaires XSL un document ou vous pouvez entourer une slection de balises de commentaires XSL.
Ajout de balises de commentaires XSL un document

En mode Cration, slectionnez Insertion > Objets XSLT > Commentaires XSL, tapez les commentaires (ou ne
remplissez pas la zone), puis cliquez sur OK.
En mode Code, slectionnez Insertion > Objets XSLT > Commentaires XSL.
Vous pouvez galement cliquer sur l'icne Commentaire XSL de la catgorie XSLT du panneau Insertion.
Entourer une slection de balises de commentaires XSLT

1 Basculez en mode Code (Affichage > Code). 2 Slectionnez le code auquel vous souhaitez ajouter des commentaires. 3 Dans la barre d'outils de codage, cliquez sur le bouton Appliquer commentaire et slectionnez Appliquer
commentaire <xsl:comment></xsl:comment>.
Utilisation du Crateur d'expressions XPath pour ajouter des expressions pour les donnes XML
XPath (XML Path Language) est une syntaxe non XML destine traiter des parties d'un document XML. Elle est essentiellement utilise comme langage de requtes pour des donnes XML, tout comme le langage SQL est utilis pour des requtes de bases de donnes. Pour plus d'informations sur XPath, consultez les spcifications du langage XPath sur le site Web du W3C, l'adresse www.w3.org/TR/xpath. Le Crateur d'expression XPath est une fonction de Dreamweaver qui vous permet de crer des expressions XPath simples pour l'identification de noeuds de donnes spcifiques et pour les rgions rptes. Cette mthode prsente un avantage sur le glissement-dplacement de valeurs partir de l'arborescence du schma XML car elle vous permet de mettre en forme la valeur qui est affiche. Le contexte en cours est identifi en fonction de la position du point d'insertion dans le fichier XSL lors de l'ouverture de la bote de dialogue Crateur d'expressions XPath. Le contexte en cours est affich en gras dans l'arborescence du schma XML. Au fur et mesure que vous effectuez des slections dans cette bote de dialogue, les instructions XPATH correctes relatives votre contexte en cours sont gnres. Cette fonction simplifie le processus d'criture d'expressions XPath correctes, tant pour les novices que les utilisateurs expriments. Remarque : Cette fonction a t conue pour vous aider crer des expressions XPath simples pour identifier un nud spcifique ou pour les rgions rptes. Elle ne vous permet pas de modifier les expressions manuellement. Si vous devez crer des expressions complexes, utilisez le Crateur d'expressions XPath pour dmarrer, puis personnalisez vos expressions en mode Code ou au moyen de l'inspecteur Proprits.
Cration d'une expression XPath pour identifier un nud spcifique

1 Double-cliquez sur l'emplacement rserv des donnes XML dans la page pour ouvrir le Crateur d'expression
XPATH.
2 Dans la bote de dialogue Crateur d'expression XPATH (Texte dynamique), slectionnez un nud dans
l'arborescence du schma XML. L'expression XPath approprie est rdige dans la zone Expression pour identifier le nud.
version prliminaire
Remarque : Si vous slectionnez un autre noeud dans l'arborescence du schma XML, l'expression change en consquence. Dans l'exemple suivant, vous souhaitez afficher le sous-lment price du noeud item :
Une telle slection insre le code suivant dans votre page XSLT :
<xsl:value-of select="price"/>
3 (Facultatif) Slectionnez une option de formatage dans le menu droulant Format.
Le formatage d'une slection est utile lorsque la valeur du nud renvoie un nombre. Dreamweaver propose une liste prdfinie de fonctions de formatage. Vous trouverez la liste complte de ces fonctions, ainsi que des exemples, dans le panneau Rfrences. Dans l'exemple suivant, vous souhaitez afficher le sous-lment price sous la forme d'une devise deux dcimales :
version prliminaire
Ces options insrent le code suivant dans votre page XSLT :

<xsl:value-of select="format-number(provider/store/items/item/price,'$#.00')"/>
4 Cliquez sur OK. 5 Pour afficher la valeur de chaque nud dans le fichier XML, appliquez une rgion rpte l'lment contenant le
texte dynamique (une ligne d'un tableau HTML ou un paragraphe, par exemple). Pour plus d'informations et des exemples concernant la slection de noeuds pour renvoyer une valeur, consultez la section <xsl:value-of/> du panneau Rfrences.
Slection d'un noeud rpter

Vous pouvez slectionner un nud rpter et, ventuellement, choisir de filtrer les rsultats. Dans la bote de dialogue Crateur d'expressions XPath, votre contenu slectionn sera entour d'un bloc <xsl:for-each>. Si aucun contenu n'est slectionn, le bloc <xsl:for-each> est entr au point d'insertion.
1 Double-cliquez sur l'emplacement rserv des donnes XML dans la page pour ouvrir le Crateur d'expression
XPATH.
2 Dans la bote de dialogue Crateur d'expressions XPATH (Rgion rpte), slectionnez l'lment rpter dans
l'arborescence du schma XML. L'expression XPath approprie est rdige dans la zone Expression pour identifier le nud. Remarque : Les lments rpts sont identifis par le symbole Plus (+) dans l'arborescence du schma XML. Dans l'exemple suivant, vous souhaitez rpter chaque nud item au sein du fichier XML.
Lorsque vous cliquez sur OK, le code suivant est insr dans votre page XSLT :
<xsl:for-each select="provider/store/items/item"> Content goes here </xsl:for-each>
Dans certains cas, vous souhaiterez peut-tre utiliser un sous-ensemble des noeuds rpts. Ainsi, vous souhaiterez peut-tre utiliser uniquement les articles dots d'un attribut d'une valeur spcifique. Vous devez alors crer un filtre.
version prliminaire
Filtrage des donnes rpter

Utilisez un filtre pour identifier les nuds rpts possdant des valeurs d'attribut spcifiques.
1 Dans l'arborescence du schma XML, slectionnez un noeud rpter. 2 Cliquez sur le bouton d'extension Crer un filtre. 3 Cliquez sur le bouton plus (+) pour crer un filtre vide. 4 Tapez les critres de filtre dans les champs suivants :
Filtrer par Indique le nud rpt contenant les donnes sur lesquelles fonder le filtre. Ce menu droulant propose une liste de nuds anctres relatifs au nud slectionn dans l'arborescence du schma XML. O Spcifie l'attribut ou le sous-lment du nud Filtrer par qui sera utilis pour filtrer les rsultats. Vous pouvez
slectionner un attribut ou un sous-lment dans le menu droulant, ou vous pouvez entrer votre propre expression XPath dans ce champ pour identifier les enfants prsents aux autres niveaux.
Oprateur Spcifie l'opration de comparaison utiliser dans l'expression de filtre. Valeur Spcifie la valeur rechercher dans le nud Filtrer par. Indiquez une valeur. Si des paramtres dynamiques
sont dfinis pour votre page XSLT, vous pouvez en slectionner un dans le menu droulant.
5 Pour insrer un autre filtre, cliquez nouveau sur le bouton Plus (+).
En fonction des valeurs que vous tapez ou slectionnez dans les menus droulants, l'expression XPath figurant dans la zone Expression est modifie. L'exemple suivant renvoie uniquement les nuds item dans lesquels la valeur de l'attribut @available correspond
true (vrai).
<xsl:for-each select="provider/store/items/item[@available = 'true']"> Content goes here </xsl:for-each>
version prliminaire
Remarque : Vous devez placer les valeurs de chane telles que true entre guillemets. Dreamweaver code les guillemets (') votre intention, afin qu'elles apparaissent dans un format XHTML valide. Vous pouvez crer des filtres plus complexes qui vous permettent de spcifier des nuds parents dans vos critres de filtre. L'exemple suivant affiche uniquement les noeuds item pour lesquels l'attribut @id de store est gal 1 et le noeud price correspondant item est suprieur 5.
<xsl:for-each select="provider/store[@id = 1]/items/item[price > 5]"> Content goes here </xsl:for-each>
Pour plus d'informations et des exemples de rgions rptes, consultez la section <xsl:for-each> du panneau Rfrences.
Rsolution des problmes lis aux transformations XSL

Si vous ne parvenez pas faire fonctionner vos transformations XSL, consultez le guide de dpannage disponible l'adresse www.adobe.com/go/dw_xsl_faq_fr. Ce guide rpond de nombreuses questions poses frquemment.
Excution de transformations XSL sur le client

Processus d'excution des transformations XSL ct client
Vous pouvez effectuez des transformations XSL ct client. Informez-vous sur les transformations XSL ct client et ct serveur et sur l'utilisation de XML et de XSL avec les pages Web avant de crer des page affichant des donnes XML.
version prliminaire
Le droulement gnral de l'excution des transformations XSL ct client est le suivant (chaque tape individuelle est dcrite dans d'autres rubriques) :
1. Crez un site Dreamweaver. 2. Crez une page XSLT, ou convertissez une page HTML en page XSLT.
Sur votre site Dreamweaver, crez une page XSLT entire. Convertissez une page HTML existante en une page XSLT entire.
3. Associez une source de donnes XML la page (le cas chant).
Le fichier XML que vous associez doit se trouver dans le mme rpertoire que la page XSLT.
4. Liez vos donnes XML la page XSLT. 5. Affichez les donnes XML en liant les donnes la page XSLT entire. 6. Si cela s'impose, ajoutez un objet XSLT Rgion rpte au tableau ou la ligne de tableau contenant le ou les espaces rservs pour les donnes XML. 7. Associez la page XSLT la page XML. 8. Envoyez la page XML et la page XSLT lie votre serveur Web. 9. Affichez la page XML dans un navigateur.
Le navigateur transforme alors les donnes XML, les met en forme au moyen de la page XSLT et affiche la page rsultante dans le navigateur.
Voir aussi
Configuration d'un site Dreamweaver la page 38 Choix d'un serveur d'application la page 545 Liaison d'une page XSLT une page XML la page 532 Utilisation de XML et XSL dans des pages Web la page 506 Transformations XSL ct client la page 509 Transformations XSL ct serveur la page 507
Cration de pages XSLT entires et affichage des donnes

Vous devez utiliser une page XSLT entires pour les transformations ct client. Les fragments XSLT ne sont pas pris en charge par ce type de transformation. Suivez les instructions gnrales suivantes pour crer des pages XSLT, y lier des donnes XML et les formater pour des transformations ct client :
version prliminaire
1. Crez la page XSLT. 2. Affichez des donnes dans la page XSLT. 3. Affichez des lments rpts dans la page XSLT. 4. Vrifiez les ventuels problmes.
Voir aussi
Cration d'une page XSLT la page 514 Affichage des donnes XML dans des pages XSLT la page 516 Affichage des lments rpts XML la page 518 Rsolution des problmes lis aux transformations XSL la page 530
Liaison d'une page XSLT une page XML

Une fois que vous avez cr une page XSLT entire contenant des espaces rservs de contenu dynamique pour vos donnes XML, vous devez insrer une rfrence la page XSLT dans la page XML. Remarque : Les fichiers XML et XSL que vous utilisez dans les transformations ct client doivent rsider dans un mme rpertoire. Si tel n'est pas le cas, le navigateur lit le fichier XML et trouve la page XLST utiliser pour la transformation, mais ne peut pas localiser les actifs (feuilles de style, images etc.) dfinis par les liens relatifs dans la page XSLT.
1 Ouvrez le fichier XML que vous souhaitez lier votre page XSLT : 2 Slectionnez Commandes > Associer une feuille de style XSLT. 3 Dans la bote de dialogue, cliquez sur le bouton Parcourir, localisez la page XSLT associer, slectionnez-la et
cliquez sur OK.

4 Cliquez sur OK pour fermer la bote de dialogue et insrer la rfrence la page XSLT en haut du document XML.
Rsolution des problmes lis aux transformations XSL

Si vous ne parvenez pas faire fonctionner vos transformations XSL, consultez le guide de dpannage disponible l'adresse www.adobe.com/go/dw_xsl_faq_fr. Ce guide rpond de nombreuses questions poses frquemment.
Entits de caractre manquant

Spcification d'une entit de caractre manquant
Dans le langage XSLT, certains caractres ne sont pas pris en charge dans certains contextes. Il est par exemple impossible d'utiliser le signe infrieur (<) et l'esperluette (&) dans du texte plac entre des balises ou dans une valeur d'attribut. Le moteur de transformation XSLT renvoie une erreur si ces caractres sont utiliss incorrectement. Pour rsoudre ce problme, vous pouvez remplacer les caractres spciaux par des entits de caractres. Une entit de caractre est une chane de caractres reprsentant d'autres caractres. Les entits de caractres sont nommes ou numrotes. Une entit nomme commence par une esperluette (&) suivie du nom ou des caractres et se termine par un point-virgule (;). Par exemple, < reprsente le chevron gauche (<). Les entits numrotes commencent et se terminent de la mme faon, mais le signe dise (#) et un nombre spcifient le caractre.
version prliminaire
XSLT propose cinq entits prdfinies :

Caractre < (infrieur ) & (esperluette) > (suprieur ) " (guillemets) (apostrophe) Code d'entit < & > " '
Si vous utilisez d'autres entits de caractres dans un fichier XSL, vous devez les dfinir dans la section DTD du fichier XSL. Dreamweaver fournit plusieurs dfinitions d'entit par dfaut que vous pouvez voir en haut de tout fichier XSL cr dans Dreamweaver. Ces entits par dfaut couvrent un grand nombre de caractres courants. Lorsque vous affichez un aperu de votre fichier XSL dans un navigateur, Dreamweaver vrifie la prsence d'entits indfinies dans le fichier XSL et vous avertit si une telle entit est dtecte. Si vous affichez l'aperu d'un fichier XML associ un fichier XSLT ou une page ct serveur associe une transformation XSLT, c'est le serveur ou le navigateur (et non Dreamweaver) qui affiche ce message d'avertissement. L'exemple suivant illustre le message que Internet Explorer est susceptible de renvoyer lorsque vous demandez la transformation d'un fichier XML par un fichier XLS dans lequel une entit n'est pas dfinie.
Reference to undefined entity 'auml'. Error processing resource 'http://localhost/testthis/list.xsl'. Line 28, Position 20 <p class=''test''>ä</p> -------------------^
Pour corriger l'erreur sur votre page, vous devez y ajouter la dfinition d'entit manuellement.
Spcification d'une dfinition d'entit manquante

1 Recherchez le caractre manquant dans la page de rfrence des entits de caractres sur le site Web du W3C
www.w3.org/TR/REC-html40/sgml/entities.html. Cette page Web contient les 252 entits prises en charge par les langages HTML 4 et XHTML 1.0. Si, par exemple, l'entit de caractre Egrave (e accent grave) n'est pas dfinie, recherchez Egrave sur la page Web du W3C. Vous y trouverez les informations suivantes :
<!ENTITY Egrave CDATA "È" -- latin capital letter E with grave, U+00C8 ISOlat1 -->
2 Prenez note du nom et du code de l'entit.
Dans notre exemple, Egrave est le nom de l'entit et &#200 est le code de l'entit.
3 Muni de ses informations, passez en mode Code et tapez la balise d'entit suivante en haut de votre fichier XSL
(aprs la dclaration Doctype et au sein des autres balises d'entits) :

<!ENTITY entityname "entitycode;">
Dans notre exemple, vous taperiez la balise d'entit suivante :

<!ENTITY Egrave "È">
Si vous utilisez rgulirement les mmes entits de caractres, il est prfrable d'ajouter leur dfinition dans les fichiers XSL crs par dfaut par Dreamweaver lorsque vous utilisez Fichier > Nouveau.
version prliminaire
Ajout de dfinitions d'entit dans les fichiers XSL crs par dfaut par Dreamweaver
1 Localisez le fichier de configuration suivant dans le dossier d'application Dreamweaver et ouvrez-le dans un diteur
de texte : Configuration/DocumentTypes/MMDocumentTypeDeclarations.xml
2 Localisez la dclaration mm_xslt_1 :
<documenttypedeclaration id="mm_xslt_1">
3 Tapez la ou les nouvelles balises d'entit dans la liste de balises d'entit, comme suit :
<!ENTITY entityname "entitycode;">
4 Enregistrez le fichier et redmarrez Dreamweaver.
version prliminaire
535
Chapitre 18 : Prparation la cration de sites dynamiques

Avant d'entreprendre la cration de pages Web dynamiques, vous devez effectuer un certain nombre de tches de prparation, notamment la configuration d'un serveur d'application Web et la connexion une base de donnes pour les applications Coldfusion, ASP et PHP. Adobe Dreamweaver CS5 gre les connexions aux bases de donnes diffremment suivant la technologie de serveur que vous utilisez.
Description des applications Web

Prsentation des applications Web
Une application Web est un site Web dont le contenu des pages est partiellement ou entirement indtermin. Le contenu final d'une page est dtermin uniquement lorsque l'utilisateur requiert une page depuis le serveur Web. Le contenu final d'une page variant d'une requte une autre en fonction des actions de l'utilisateur, ce type de page est appel page dynamique. Les applications Web sont construites de manire rpondre diffrents types de dfis et de problmes. Cette section dcrit les utilisations courantes des applications Web et prsente un exemple simple.
Utilisations courantes des applications Web

Les applications Web peuvent tre utilises de diverses faons par les visiteurs d'un site et les dveloppeurs, notamment pour :
Permettre aux utilisateurs de trouver rapidement et facilement des informations sur un site Web riche en contenu.
Ce type d'applications Web permet aux visiteurs du site de rechercher, d'organiser et de parcourir le contenu leur convenance. Les exemples incluent des rseaux intranet d'entreprises, tels Microsoft MSDN (www.msdn.microsoft.com), et Amazon.com (www.amazon.com).
Collecter, enregistrer et analyser des donnes fournies par les visiteurs du site.
Auparavant, les donnes saisies dans des formulaires HTML taient envoyes sous forme de courriels aux employs ou sous forme d'applications CGI pour le traitement. Une application Web peut enregistrer les donnes d'un formulaire directement dans une base de donnes, ainsi qu'extraire les donnes et crer des rapports Web pour l'analyse. Les exemples incluent des pages de banque en ligne et de contrle des stocks, ainsi que des sondages et des formulaires de commentaires.
Mettre jour des sites Web dont le contenu change souvent.

Une application Web vite au crateur d'avoir mettre frquemment jour le code HTML du site. Les fournisseurs de contenu, tels que les rdacteurs en chef, alimentent l'application Web et celle-ci met automatiquement le site jour, Il peut s'agir de The Economist (www.economist.com) et de CNN (www.cnn.com).
version prliminaire
Prparation la cration de sites dynamiques
Exemple d'application Web

Julie, professionnelle de la cration Web, utilise Dreamweaver depuis de nombreuses annes. Elle est charge de la maintenance des sites intranet et Internet d'une entreprise de taille moyenne comptant 1 000 employs. Christophe, du service des Ressources humaines, lui soumet un jour un problme. Ce service gre un programme de mise en forme qui attribue des points aux employs pour chaque kilomtre parcouru en marchant, en courant ou vlo. Tous les mois, chaque employ doit communiquer Christophe le nombre total de kilomtres parcourus, par courriel. A la fin du mois, Christophe rassemble tous les courriels et rcompense chaque employ avec des prix en espces, en fonction de leur total de points. Le problme est que ce programme de mise en forme a suscit de plus en plus d'enthousiasme. Le nombre de participants est si important que Christophe est submerg de courriels chaque fin de mois. Il demande donc Julie si une solution Web serait envisageable. Julie suggre une application Web base sur un rseau intranet excutant les tches suivantes :
permettre aux employs de saisir leur kilomtrage sur une page Web au moyen d'un simple formulaire HTML ; stocker le kilomtrage des employs dans une base de donnes ; calculer les points de mise en forme en fonction du kilomtrage ; permettre aux employs de suivre leurs progrs au fil des mois ; permettre Christophe d'accder au total des points en un seul clic chaque fin de mois.
Julie met rapidement en place l'application l'aide de Dreamweaver, logiciel dot des outils ncessaires la cration rapide et facile de ce type d'applications.
Fonctionnement d'une application Web

Une application Web est un ensemble de pages statiques et dynamiques. Une page statique n'est pas modifie lorsqu'un visiteur la consulte : Le serveur Web transmet la page au navigateur qui la sollicite sans la modifier. A l'inverse, une page Web dynamique est modifie par le serveur avant d'tre transmise au navigateur qui la sollicite. C'est pourquoi cette page est dite dynamique. Vous pouvez par exemple crer une page pour afficher les rsultats du programme de mise en forme et faire en sorte que certaines informations (telles le nom et les rsultats de l'employ) soient dtermines lorsqu'une page est sollicite par un employ donn. Les sections suivantes dcrivent en plus de dtails la faon dont les applications Web fonctionnent.
Traitement des pages Web statiques

Un site Web statique comprend un jeu de pages et fichiers HTML associs hbergs sur un ordinateur excutant un serveur Web. Un serveur Web est un logiciel qui fournit des pages Web en rponse des requtes de navigateurs Web. Une requte de page est gnre lorsqu'un utilisateur clique sur un lien d'une page Web, choisit un signet dans le navigateur ou saisit une URL dans le champ Adresse du navigateur. Le contenu final d'une page Web statique est dtermin par le crateur de la page et n'est pas modifi lorsqu'un utilisateur la demande. Exemple :
version prliminaire
<html> <head> <title>Trio Motors Information Page</title> </head> <body> <h1>About Trio Motors</h1> <p>Trio Motors is a leading automobile manufacturer.</p> </body> </html>
Chaque ligne du code HTML de la page est rdige par le crateur avant que la page ne soit place sur le serveur. Ce code HTML n'tant pas modifi une fois la page sur le serveur, cette page est dite statique. Remarque : Au sens strict du terme, une page dite statique peut ne pas tre statique du tout. Une image survole ou une animation Flash (un fichier SWF), par exemple, peuvent animer une page statique. Cependant, ce guide qualifie une page de statique si elle est adresse au navigateur sans modifications. Lorsqu'un serveur Web reoit une requte de page statique, il lit la requte, localise la page et la transmet au navigateur qui l'a sollicite, comme le montre l'exemple suivant :
3
Rponse
Serveur Web
<HTML> <p>H1 </HTML>

Navigateur Web
2
Demande
1 1. Le navigateur Web demande une page statique. 2. Le serveur Web recherche la page. 3. Le serveur Web envoie la page au navigateur requrant.
Dans le cas des applications Web, certaines lignes de code ne sont pas dtermines au moment o l'utilisateur sollicite la page. Ces lignes doivent tre dtermines via un mcanisme avant que la page ne soit transmise au navigateur. Ce mcanisme est prsent dans la section suivante.
Traitement des pages dynamiques

Lorsqu'un serveur Web reoit une requte de page Web statique, il transmet directement cette page au navigateur qui la demande. Le serveur Web ragit diffremment lorsqu'il reoit une requte de page dynamique : Il transmet la page un logiciel spcial charg de terminer la page. Ce logiciel spcial est appel un serveur d'application. Le serveur d'application lit le code de la page, termine cette page en fonction des instructions figurant dans le code, puis en retire le code. Il en rsulte une page statique que le serveur d'application renvoie au serveur Web, lequel transmet alors cette page au navigateur demandeur. Le navigateur reoit uniquement du code HTML pur lorsque la page lui est transmise. Voici un aperu du processus :
version prliminaire
Serveur Web
5
Rponse
4
<HTML> <p>H1 </HTML>
Serveur d'application Navigateur Web
Demande
1. Le navigateur Web demande une page dynamique. 2. Le serveur Web recherche la page et la transmet au serveur d'application. 3. Le serveur d'application analyse la page la recherche d'instructions et la termine. 4. Le serveur d'application transmet la page termine au serveur Web. 5. Le serveur Web envoie la page acheve au navigateur requrant
Accs une base de donnes

Un serveur d'application vous permet de travailler avec des ressources ct serveur telles que les bases de donnes. Une page dynamique peut, par exemple, ordonner au serveur d'application d'extraire des donnes de la base de donnes et de les insrer dans le code HTML de la page. Pour plus d'informations, consultez le site www.adobe.com/go/learn_dw_dbguide_fr. L'utilisation d'une base de donnes pour stocker un contenu vous permet de sparer l'aspect conceptuel d'un site Web du contenu afficher aux utilisateurs du site. Plutt que de crer des fichiers HTML distincts pour chacune des pages, il vous suffit de crer une page (ou un modle) pour les diffrents types d'informations que vous souhaitez prsenter. Vous pouvez ensuite tlcharger du contenu dans une base de donnes pour qu'ensuite le site Web puisse extraire ce contenu en rponse une demande d'un utilisateur. Vous pouvez galement mettre jour des informations dans une source unique, puis rpercuter cette modification travers le site Web sans avoir modifier chaque page manuellement. Vous pouvez utiliser Adobe Dreamweaver CS5 pour crer des formulaires Web permettant d'insrer, de mettre jour ou de supprimer des donnes dans une base de donnes. L'instruction d'extraction des donnes de la base est nomme requte de base de donnes. Une requte est compose de critres de recherche rdigs dans un langage de base de donnes appel SQL (Structured Query Language). La requte SQL est rdige dans les scripts ou les balises de la page ct serveur. Un serveur d'application ne peut pas communiquer directement avec une base de donnes car le format propritaire de cette dernire rend les donnes indchiffrables, de la mme manire qu'un document Microsoft Word ouvert dans Bloc-notes ou BBEdit peut tre indchiffrable. Le serveur d'application peut communiquer avec la base de donnes uniquement via un pilote de base de donnes, logiciel faisant office d'interprte entre le serveur d'application et la base de donnes. Une fois que le pilote a tabli la communication, la requte est excute par rapport la base de donnes et un jeu d'enregistrements est cr. Un jeu d'enregistrements est un ensemble de donnes extraites d'une ou de plusieurs tables de base de donnes. Le jeu d'enregistrements est renvoy au serveur d'application, lequel utilise les donnes pour terminer la page. Voici un exemple simple de requte de base de donnes rdige en SQL :
version prliminaire
SELECT lastname, firstname, fitpoints FROM employees
Cette instruction cre un jeu d'enregistrements trois colonnes et le remplit de lignes comportant le nom, le prnom et les points de mise en forme de tous les employs de la base de donnes. Pour plus d'informations, consultez le site www.adobe.com/go/learn_dw_sqlprimer_fr. L'exemple suivant illustre le processus d'interrogation de la base de donnes via des requtes et de la transmission des donnes au navigateur :
SERVEUR WEB
9
Rponse
8
<HTML> <p>data </HTML>
7 6
Jeu d'enregistrements
Serveur d'application Navigateur Web
Pilote de base de donnes
Base de donnes
Demande
Requte
4 2 3
1. Le navigateur Web demande une page dynamique. 2. Le serveur Web recherche la page et la transmet au serveur d'application. 3. Le serveur d'application analyse la page la recherche d'instructions. 4. Le serveur d'application envoie une requte au pilote de la base de donnes. 5. Le pilote excute la requte au niveau de la base de donnes. 6. Le jeu d'enregistrements est renvoy au pilote. 7. Le pilote transmet le jeu d'enregistrements au serveur d'application. 8. Le serveur d'application insre les donnes dans la page, puis transmet la page au serveur Web. 9. Le serveur Web envoie la page acheve au navigateur requrant.
Vous pouvez utiliser pratiquement toutes les bases de donnes avec votre application Web, condition que les pilotes de base de donnes appropris soient installs sur le serveur. Si vous prvoyez de crer de petites applications peu onreuses, vous pouvez utiliser une base de donnes base sur fichier, cre par exemple sous Microsoft Access. Si vous prvoyez de crer des applications stratgiques robustes, vous pouvez utiliser une base de donnes serveur, cre par exemple avec Microsoft SQL Server, Oracle 9i ou MySQL. Si votre base de donnes rside sur un systme autre que votre serveur Web, assurez-vous qu'il existe une connexion rapide entre les deux systmes pour un fonctionnement efficace et rapide de votre application Web.
Voir aussi
Guide du dbutant en base de donnes
Cration de pages dynamiques

La cration d'une page dynamique consiste crire d'abord le code HTML, puis ajouter les scripts ou les balises ct serveur au code HTML pour rendre la page dynamique. Lorsque vous visualisez le code obtenu, le langage apparat incorpor dans le code HTML de la page. Par consquent, ces langages sont appels langages de programmation HTML intgrs. L'exemple lmentaire ci-dessous utilise le langage CFML (ColdFusion Markup Language) :
version prliminaire
<html> <head> <title>Trio Motors Information Page</title> </head> <body> <h1>About Trio Motors</h1> <p>Trio Motors is a leading automobile manufacturer.</p>  <cfset department="Sales"> <cfoutput> <p>Be sure to visit our #department# page.</p> </cfoutput>  </body> </html>
Les instructions incorpores dans cette page excutent les actions suivantes :
1 Cration d'une variable appele department et affectation de la chane "Service commercial" cette variable. 2 Insertion de la valeur de la variable, "Service commercial", dans le code HTML.
Le serveur d'application renvoie la page suivante au serveur Web :

<html> <head> <title>Trio Motors Information Page</title> </head> <body> <h1>About Trio Motors</h1> <p>Trio Motors is a leading automobile manufacturer.</p> <p>Be sure to visit our Sales page.</p> </body> </html>
Le serveur Web transmet la page au navigateur requrant, lequel l'affiche de la manire suivante : A propos de Trio Motors Trio Motors est leader dans le domaine de la construction automobile. Nous vous invitons visiter la page de notre Service commercial. Choisissez un langage de script ou de balise en fonction de la technologie de votre serveur. Les langages les plus employs pour les technologies de serveur prises en charge par Dreamweaver sont :
Technologie de serveur ColdFusion Pages ASP (Active Server Pages) Langage CFML (ColdFusion Markup Language) VBScript JavaScript PHP PHP
Dreamweaver peut crer les scripts ou les balises ct serveur ncessaires au bon fonctionnement de vos pages. Vous pouvez galement les rdiger manuellement dans l'environnement de codage de Dreamweaver.
version prliminaire
Voir aussi
Choix d'un serveur d'application la page 545
Terminologie du dveloppement d'applications Web

Cette section regroupe la dfinition des termes relatifs aux applications Web frquemment utiliss.
Un serveur d'application est un logiciel qui aide un serveur Web traiter des pages Web contenant des scripts ou des balises ct serveur. Lorsqu'une page de ce type est requise par le serveur, le serveur Web transmet cette page au serveur d'application afin qu'il la traite avant de l'envoyer au navigateur. Pour plus d'informations, voir la section Fonctionnement d'une application Web la page 536.
Les serveurs d'applications les plus courants sont ColdFusion et PHP.

Une base de donnes est un ensemble de donnes stockes sous forme de tables. Chaque ligne d'une table correspond
un enregistrement et chaque colonne correspond un champ de l'enregistrement, tel qu'illustr dans l'exemple cidessous.
Champs (colonnes)
Number LastName FirstName Position
Goal Enregistrements (lignes)
Un pilote de base de donnes est un logiciel qui agit comme un interprte entre une application Web et une base de
donnes. Les donnes d'une base de donnes sont stockes dans un format propritaire. Un pilote de base de donnes permet l'application Web de lire et de manipuler des donnes qui, sans cela, seraient indchiffrables.
Un systme de gestion de bases de donnes (SGBD ou systme de base de donnes) est un logiciel utilis pour crer et manipuler des bases de donnes. Les systmes de base de donnes les plus courants sont Microsoft Access, Oracle 9i et MySQL. Une requte de base de donnes dsigne l'opration permettant d'extraire un jeu d'enregistrements d'une base de
donnes. Une requte est constitue de critres de recherche exprims en langage de base de donnes appel SQL. La requte peut, par exemple, spcifier que seules certaines colonnes ou certains enregistrements doivent tre inclus dans le jeu d'enregistrements.
Une page dynamique est une page Web qui est personnalise par un serveur d'application avant d'tre transmise un
navigateur.
version prliminaire
Un jeu d'enregistrements est un ensemble de donnes extraites d'une ou plusieurs tables de base de donnes, comme
l'illustre l'exemple suivant :

Number LastName FirstName Position Goals
Table de base de donnes
LastName FirstName Position
Table de jeux d'enregistrements
Une base de donnes relationnelle est une base de donnes contenant plusieurs tables qui partagent des donnes. La
base de donnes suivante est relationnelle car deux tables partagent la colonne DepartmentID.
Une technologie de serveur est une technologie utilise par un serveur d'application pour modifier des pages
dynamiques lors de l'excution. L'environnement de dveloppement de Dreamweaver prend en charge les technologies de serveur suivantes :
Adobe ColdFusion Pages ASP (Active Server Pages) de Microsoft PHP: Hypertext Preprocessor (PHP)
Vous pouvez galement utiliser l'environnement de codage de Dreamweaver pour dvelopper des pages destines toute autre technologie de serveur non rpertorie ci-dessus.
Une page statique est une page Web qui n'est pas modifie par un serveur d'application avant d'tre transmise un
navigateur. Pour plus d'informations, consultez la section Traitement des pages Web statiques la page 536.
Une application Web est un site Web dont le contenu des pages est partiellement ou entirement indtermin. Le
contenu final de ces pages est dtermin uniquement lorsque l'utilisateur requiert une page depuis le serveur Web. Le contenu final d'une page variant d'une requte une autre en fonction des actions de l'utilisateur, ce type de page est appel page dynamique.
Un serveur Web est un logiciel qui renvoie des pages Web en rponse aux requtes de navigateurs Web. Une requte de page est gnre lorsqu'un utilisateur clique sur un lien d'une page Web dans le navigateur, choisit un signet dans le navigateur ou saisit une URL dans le champ Adresse du navigateur.
Les serveurs Web les plus courants sont IIS (Microsoft Internet Information Server) et Apache HTTP Server.
version prliminaire
Configuration de l'ordinateur pour le dveloppement d'applications

Elments ncessaires la cration d'applications Web
Pour crer des applications Web dans Adobe Dreamweaver CS5, vous devez disposer des logiciels suivants :
Un serveur Web Un serveur d'application excut sur votre serveur Web

Remarque : Dans le contexte des applications Web, les termes serveur Web et serveur d'application font rfrence des logiciels et non du matriel. Si vous souhaitez utiliser une base de donnes en conjonction avec votre application, vous devez galement disposer des logiciels suivants :
Un systme de base de donnes Un pilote de base de donnes prenant en charge votre base de donnes
Plusieurs socits d'hbergement Web vous offrent la possibilit d'utiliser leurs logiciels pour tester et dployer des applications Web. Dans certains cas, il est possible d'installer le logiciel requis sur le mme ordinateur que Dreamweaver des fins de dveloppement. Vous pouvez galement installer les logiciels sur un ordinateur en rseau (le plus souvent un ordinateur fonctionnant sous Windows 2000 ou XP) pour rendre votre projet accessible aux autres dveloppeurs de votre quipe. Si vous souhaitez utiliser une base de donnes avec votre application Web, vous devez au pralable tablir une connexion avec cette base.
Voir aussi
Configuration d'un environnement de dveloppement ColdFusion la page 545 Configuration d'un environnement de dveloppement PHP la page 546 Configuration d'un environnement de dveloppement ASP la page 546
Fonctions lmentaires du serveur Web

Pour dvelopper et tester des pages Web dynamiques, vous avez besoin d'un serveur Web oprationnel. Un serveur Web est un logiciel qui fournit des pages Web en rponse des requtes de navigateurs Web. Un serveur Web est parfois appel serveur HTTP. Vous pouvez installer et utiliser un serveur Web sur votre ordinateur local. Si vous travaillez sur Macintosh, vous pouvez utiliser le serveur Web Apache dj install sur votre machine. Remarque : Adobe ne fournit aucune assistance technique pour les logiciels tiers, tels que Microsoft Internet Information Server. Si vous avez besoin d'aide pour un produit Microsoft, contactez le support technique de Microsoft. Si vous utilisez Internet Information Server (IIS) pour dvelopper des applications Web, le nom par dfaut de votre serveur Web est le nom de votre ordinateur. Vous pouvez modifier le nom du serveur en modifiant celui de votre ordinateur. Si votre ordinateur n'a pas de nom, le serveur utilise le mot localhost . Le nom du serveur correspond au dossier racine du serveur, lequel est gnralement (sur un ordinateur fonctionnant sous Windows) : C:\Inetpub\wwwroot. Vous pouvez ouvrir une page Web quelconque stocke dans le dossier racine en entrant l'URL suivante dans un navigateur en cours d'excution sur votre ordinateur. http://nom_du_serveur/nom_de_fichier
version prliminaire
Par exemple, si le nom du serveur est mer_noire et qu'une page Web intitule soleil.html est stocke dans C:\Inetput\wwwroot\, vous pouvez ouvrir cette page en tapant l'URL suivante dans le navigateur en cours d'excution sur l'ordinateur local : http://mer_noire/soleil.html Remarque : Veillez taper des barres obliques normales et non inverses dans les URL. Vous pouvez galement ouvrir une page Web quelconque stocke dans un sous-dossier du dossier racine en spcifiant ce sous-dossier dans l'URL. Par exemple, supposons que le fichier soleil.html est stock dans un sous-dossier nomm gamelan, de la faon suivante : C:\Inetput\wwwroot\gamelan\soleil.html Vous pouvez ouvrir cette page en entrant l'URL suivante dans un navigateur en cours d'excution sur votre ordinateur : http://mer_noire/gamelan/soleil.html Lorsque le serveur Web est excut sur votre ordinateur, vous pouvez remplacer le nom du serveur par localhost. Par exemple, les URL suivantes ouvrent la mme page dans un navigateur : http://mer_noire/gamelan/soleil.html http://localhost/gamelan/soleil.html Remarque : Vous pouvez aussi utiliser une autre expression la place du nom du serveur ou de localhost : 127.0.0.1 (par exemple, http://127.0.0.1/gamelan/soleil.html).
Voir aussi
Choix d'un serveur Web

Pour dvelopper et tester des applications Web, vous pouvez choisir parmi plusieurs serveurs Web courants, savoir IIS (Microsoft Internet Information Server) et Apache HTTP Server. Si vous n'utilisez pas de service d'hbergement Web, slectionnez un serveur Web et installez-le sur un ordinateur local des fins de dveloppement. Les utilisateurs souhaitant dvelopper des applications Web ColdFusion sous Windows et sur Macintosh peuvent le faire grce au serveur Web inclus dans l'dition dveloppeur du serveur d'application ColdFusion 8. Cette dition est disponible gratuitement. Les autres utilisateurs Windows peuvent excuter un serveur Web sur leur ordinateur local en installant IIS. Ce serveur Web peut avoir dj t install sur votre ordinateur. Parcourez votre arborescence pour vrifier si elle comporte un dossier C:\Inetpub ou D:\Inetpub. IIS cre ce dossier pendant l'installation. Les utilisateurs de Mac OS peuvent utiliser le serveur Web Apache local install avec leur systme d'exploitation. Pour plus d'informations sur l'installation et la configuration des autres serveurs Web, consultez la documentation de votre fournisseur ou consultez l'administrateur systme.
version prliminaire
Choix d'un serveur d'application

Un serveur d'application est un logiciel qui permet un serveur Web de traiter les pages dynamiques. Lorsque vous choisissez un serveur d'application, tenez compte des critres suivants : votre budget, la technologie de serveur que vous souhaitez utiliser (ColdFusion, ASP ou PHP) et le type serveur Web.
Budget Certains fournisseurs proposent des applications haut de gamme dont le prix d'achat et les cots de
fonctionnement sont trs levs. D'autres fournisseurs proposent des solutions plus simples et plus conomiques (par exemple ColdFusion). Certains serveurs d'application sont intgrs aux serveurs Web (notamment Microsoft IIS) et d'autres peuvent tre tlchargs gratuitement sur Internet (notamment PHP).
Technologie de serveur Les serveurs d'application utilisent diffrentes technologies. Dreamweaver prend en charge trois technologies de serveur : ColdFusion, ASP et PHP. Le tableau suivant indique les serveurs d'application courants axs sur l'une des technologies de serveur prises en charge par Dreamweaver :
Technologie de serveur ColdFusion ASP PHP Serveur d'application Adobe ColdFusion 8 Microsoft IIS Serveur PHP
Pour en savoir davantage sur ColdFusion, slectionnez ColdFusion dans le menu Aide. Pour en savoir plus sur ASP, visitez le site Web Microsoft l'adresse suivante : http://msdn.microsoft.com/library/default.asp?url=/library/fr-fr/dnanchor/html/activeservpages.asp. Pour en savoir plus sur PHP, visitez le site Web de PHP l'adresse suivante : www.php.net/.
Choix d'une base de donnes

Les bases de donnes se prsentent sous une multitude de formes, selon la quantit et la complexit des donnes qu'elles doivent stocker. Lorsque vous choisissez une base de donnes, tenez compte de plusieurs facteurs, dont votre budget et le nombre d'utilisateurs qui devraient accder la base de donnes.
Budget Certains fournisseurs proposent des serveurs de base de donnes d'application haut de gamme dont le prix
d'achat et les cots d'administration sont trs levs. D'autres fournisseurs proposent des solutions plus aises et plus conomiques, comme Microsoft Access ou la base de donnes libre MySQL.
Utilisateurs Si vous pensez qu'une large communaut d'utilisateurs accdera votre site Web, optez pour une base de donnes conue pour prendre en charge l'ensemble des utilisateurs potentiels de votre site. Lorsque les sites Web ncessitent une plus grande souplesse en termes de modlisation des donnes et doivent prendre en charge un trs grand nombre d'utilisateurs simultans, envisagez d'employer des bases de donnes relationnelles serveur (communment dsignes sous le nom de SGBDR), telles que Microsoft SQL Server et Oracle.
Configuration d'un environnement de dveloppement ColdFusion

Pour plus d'informations sur la configuration d'un environnement de dveloppement ColdFusion pour Dreamweaver sur votre ordinateur Windows ou Mac, consultez le site Web d'Adobe l'adresse suivante www.adobe.com/go/learn_dw_cfsetup_fr. Les utilisateurs de Windows et de Macintosh peuvent tlcharger et installer une dition gratuite et totalement fonctionnelle du serveur d'applications ColdFusion depuis le site d'Adobe, l'adresse www.adobe.com/go/coldfusion_fr/.
version prliminaire
Remarque : L'dition dveloppeur est rserve au dveloppement et l'valuation d'applications Web non commerciales. La licence accorde ne permet pas d'effectuer le dploiement. Cette dition prend en charge les requtes provenant de l'hte local et de deux adresses IP distantes. Vous pouvez l'utiliser pour dvelopper et tester vos applications Web aussi longtemps que ncessaire, car la licence est permanente. Pour plus d'informations, consultez l'aide de ColdFusion (Aide > Aide de ColdFusion). Pendant l'installation, vous pouvez configurer ColdFusion de manire utiliser le serveur Web intgr au programme ou un autre serveur Web de votre systme. En principe, il est prfrable de faire correspondre du mieux possible votre environnement de dveloppement et votre environnement de production. Par consquent, si un serveur Web (par exemple, Microsoft IIS) est install sur l'ordinateur sur lequel vous dveloppez vos applications, il est peut-tre prfrable de l'utiliser.
Configuration d'un environnement de dveloppement PHP

Pour plus d'informations sur la configuration d'un environnement de dveloppement PHP pour Dreamweaver sur votre ordinateur Windows ou Mac, consultez le site Web d'Adobe l'adresse suivante www.adobe.com/go/learn_dw_phpsetup_fr. Il existe une version du serveur d'application PHP pour les systmes Windows, Linux, UNIX, HP-UX, Solaris et Mac OS X. Pour plus d'informations sur le serveur d'applications, consultez la documentation PHP, que vous pouvez galement tlcharger partir du site Web PHP l'adresse www.php.net/download-docs.php.
Configuration d'un environnement de dveloppement ASP

Pour plus d'informations sur la configuration d'un environnement de dveloppement ASP pour Dreamweaver sur votre ordinateur Windows ou Mac, consultez le site Web d'Adobe l'adresse suivante www.adobe.com/go/learn_dw_aspsetup_fr. Pour accder aux pages ASP, vous devez disposer d'une application prenant en charge Microsoft Active Server Pages 2.0., telle que Microsoft IIS, qui est fournie avec Windows 2000 et Windows XP Professionnel. Les utilisateurs de Windows XP Professionnel peuvent installer et excuter IIS sur leur ordinateur local. Les utilisateurs de Macintosh peuvent faire appel un service d'hbergement Web offrant une solution ASP ou bien installer IIS sur un ordinateur distant.
Cration d'un dossier racine pour l'application

Aprs avoir trouv une socit d'hbergement de site Web ou avoir vous-mme conu votre serveur, crez un dossier racine pour votre application Web sur l'ordinateur o s'excute votre serveur. Le dossier racine peut tre un dossier local ou distant, suivant l'emplacement du serveur Web. Le serveur Web rpondra aux requtes HTTP d'un navigateur Web en renvoyant les fichiers de ce dossier ou de ses sous-dossiers. Par exemple, sur un ordinateur excutant ColdFusion 8, tous les fichiers contenus dans le dossier\ColdFusion8\wwwroot et dans chacun de ses sous-dossiers peuvent tre transmis un navigateur Web. Le tableau ci-dessous rpertorie les dossiers racine par dfaut des diffrents serveurs Web :
Serveur Web ColdFusion 8 IIS Apache (Windows) Apache (Macintosh) Dossier racine par dfaut \ColdFusion8\wwwroot \Inetpub\wwwroot \apache\htdocs Users:MonNomd'Utilisateur:Sites
version prliminaire
Pour tester le serveur Web, enregistrez une page HTML test dans le dossier racine par dfaut, puis tentez de l'ouvrir en indiquant son URL dans un navigateur. L'URL est compose du nom de domaine et du nom du fichier correspondant la page HTML, comme dans l'exemple ci-dessous : www.exemple.com/testpage.htm Si le serveur Web s'excute sur votre ordinateur local, vous pouvez utiliser localhost au lieu d'un nom de domaine. Entrez l'une des URL d'hte local suivantes correspondant votre serveur Web :
Serveur Web ColdFusion 8 IIS Apache (Windows) Apache (Macintosh) URL d'hte local http://localhost:8500/testpage.htm http://localhost/testpage.htm http://localhost:80/testpage.htm http://localhost/~MonNomd'Utilisateur/testpage.htm (o MonNomd'Utilisateur est votre nom d'utilisateur Macintosh)
Remarque : Par dfaut, le serveur ColdFusion est reli au port 8500, et le serveur Web Apache pour Windows au port 80. Si la page ne s'affiche pas correctement, recherchez les erreurs potentielles suivantes :
Le serveur Web n'est pas en cours d'excution. Consultez les instructions de dmarrage dans la documentation du
serveur Web.
Le fichier n'a pas d'extension .htm ou .html. Vous avez indiqu le chemin du fichier contenant la page (par exemple, c:\ColdFusion8\wwwroot\testpage.htm)
au lieu de son URL (par exemple, http://localhost:8500/testpage.htm) dans la zone d'adresse de votre navigateur.
L'URL contient une faute de frappe. Recherchez les erreurs ventuelles et vrifiez que le nom de fichier n'est pas
suivi d'une barre oblique, comme dans l'adresse suivante : http://localhost:8080/testpage.htm/. Aprs avoir cr un dossier racine pour votre application, dfinissez un site Dreamweaver pour la gestion des fichiers.
Voir aussi
Fonctions lmentaires du serveur Web la page 543 Configuration d'un site Dreamweaver la page 38
A propos de la dfinition d'un site Dreamweaver

Aprs avoir configur le systme en vue du dveloppement d'applications Web, vous devez dfinir un site Dreamweaver pour la gestion des fichiers. Avant de commencer, vrifiez que les conditions suivantes sont runies :
Vous avez accs un serveur Web. Le serveur Web peut rsider sur un ordinateur local, sur un ordinateur distant
tel qu'un serveur de dveloppement, ou sur un serveur gr par une socit d'hbergement Web
Un serveur d'application est install et excut sur le systme o rside le serveur Web. Vous avez cr un dossier racine pour votre application Web sur le systme excutant le serveur Web.
La dfinition d'un site Dreamweaver pour l'application Web se droule en trois tapes :
version prliminaire
1. Dfinition d'un dossier local Ce dossier local est le dossier du disque dur dans lequel seront stockes les copies de travail des fichiers du site. Vous pouvez dfinir un dossier local pour chacune des applications Web cres. La dfinition d'un dossier local vous permet galement de grer vos fichiers et de les transfrer aisment vers ou depuis le serveur Web. 2. Dfinition d'un dossier distant Dfinissez un dossier situ sur l'ordinateur excutant le serveur Web comme dossier distant Dreamweaver. Ce dossier distant est le dossier que vous avez cr sur le serveur Web pour l'application Web. 3. Dfinition d'un dossier de test Dreamweaver utilise ce dossier pour gnrer et afficher du contenu dynamique et se connecter des bases de donnes pendant que vous procdez la cration du site. Ce serveur d'valuation peut se trouver sur votre ordinateur local, un serveur de dveloppement, un serveur intermdiaire ou un serveur de production. Vous devez seulement vous assurer que le serveur slectionn est en mesure de traiter le type de pages dynamiques que vous avez l'intention de dvelopper. Une fois le site Dreamweaver dfini, vous pouvez procder la cration de l'application Web.
Voir aussi
Configuration d'un site Dreamweaver la page 38
Connexions aux bases de donnes pour les dveloppeurs ColdFusion

Connexion une base de donnes ColdFusion
Pour dvelopper une application Web ColdFusion sous Dreamweaver, vous devez vous connecter une base de donnes en choisissant une source de donnes ColdFusion dfinie dans Dreamweaver ou la console de gestion du serveur ColdFusion Administrator. Avant d'tablir une connexion une base de donnes, vous devez configurer une application Web ColdFusion. Vous devez galement installer une base de donnes sur votre ordinateur local ou sur un systme auquel vous pouvez accder en rseau ou par FTP. Assurez-vous galement que Dreamweaver sait o aller chercher les sources de donnes ColdFusion. Pour rcuprer les sources de donnes ColdFusion au moment de la conception, Dreamweaver place des scripts dans un dossier sur l'ordinateur excutant ColdFusion. Vous devez indiquer ce dossier dans la catgorie Serveur d'valuation de la bote de dialogue Dfinition du site. Ensuite, vous devez crer une source de donnes ColdFusion dans Dreamweaver ou le programme ColdFusion Administrator (s'il n'en existe pas dj une). Une fois la source de donnes ColdFusion cre, vous pouvez l'utiliser dans Dreamweaver pour vous connecter la base de donnes.
Cration ou modification d'une source de donnes ColdFusion

Pour tre en mesure dutiliser les informations dune base de donnes dans une page Web, vous devez dabord crer une source de donnes ColdFusion. Si vous utilisez la version 7 ou ultrieure de ColdFusion MX, vous pouvez directement crer ou modifier la source de donnes dans Dreamweaver. Si vous utilisez ColdFusion MX, vous devez utiliser la console de gestion sur le serveur, ColdFusion MX Administrator, pour crer ou modifier la source de donnes. Dans ce cas, vous pouvez toutefois utiliser Dreamweaver pour ouvrir ColdFusion MX Administrator.
version prliminaire
Voir aussi
Configuration d'un serveur d'valuation la page 48 Activation des amliorations ColdFusion la page 693
Cration ou modification d'une source de donnes ColdFusion avec ColdFusion MX 7 ou version ultrieure
1 Vrifiez qu'un ordinateur excutant ColdFusion MX 7 ou version ultrieure est dfini comme serveur d'valuation
pour votre site.

2 Ouvrez une page ColdFusion dans Dreamweaver. 3 Pour crer une source de donnes, cliquez sur le bouton Plus (+) dans le panneau Bases de donnes (Fentre > Bases
de donnes) et saisissez les valeurs des paramtres spcifiques au pilote de base de donnes. Remarque : Dreamweaver naffiche le bouton Plus que si vous excutez ColdFusion MX 7 ou une version ultrieure.
4 Pour modifier une source de donnes, double-cliquez sur le bouton de connexion la base de donnes dans le
panneau Bases de donnes, et modifiez les valeurs ncessaires. Vous pouvez modifier tous les paramtres, sauf le nom de la source de donnes. Pour plus d'informations, consultez la documentation du fournisseur du pilote ou consultez votre administrateur systme.
Cration ou modification d'une source de donnes ColdFusion avec ColdFusion MX 6.1 ou 6.0
1 Ouvrez une page ColdFusion dans Dreamweaver. 2 Dans le panneau Bases de donnes (Fentre > Bases de donnes) de Dreamweaver, cliquez sur Modifier les sources
de donnes dans la barre d'outils.

3 Connectez-vous ColdFusion MX Administrator et crez ou modifiez la source de donnes.
Pour plus d'informations, consultez l'aide de ColdFusion (Aide > Aide de ColdFusion). Vous devez fournir certaines valeurs de paramtres pour crer la source de donnes ColdFusion. Pour les valeurs de paramtres spcifiques votre pilote de base de donnes, consultez la documentation de votre fournisseur ou contactez votre administrateur systme. Une fois que vous avez cr une source de donnes ColdFusion, vous pouvez l'utiliser dans Dreamweaver.
Connexion la base de donnes dans Dreamweaver

Une fois la source de donnes ColdFusion cre, vous pouvez l'utiliser dans Dreamweaver pour vous connecter la base de donnes. Ouvrez n'importe quelle page ColdFusion dans Dreamweaver, puis allez dans le panneau Bases de donnes (Fentre > Bases de donnes). Vos sources de donnes ColdFusion s'affichent dans le panneau. Si ce n'est pas le cas, remplissez la liste de contrle du panneau. Assurez-vous galement que Dreamweaver sait o aller chercher les sources de donnes ColdFusion. Dans la catgorie Serveur d'valuation de la bote de dialogue Dfinition du site, indiquez le dossier racine du site sur l'ordinateur excutant ColdFusion.
Voir aussi
Rsolution des problmes de connexion aux bases de donnes la page 559
version prliminaire
Connexions aux bases de donnes pour les dveloppeurs ASP

A propos des connexions aux bases de donnes ASP
Une application ASP doit se connecter une base de donnes via un pilote ODBC ou un fournisseur de OLE DB. Le pilote ou le fournisseur joue le rle de traducteur pour permettre l'application Web de communiquer avec la base de donnes. Le tableau suivant rpertorie certains des pilotes que vous pouvez utiliser avec les bases de donnes Microsoft Access, Microsoft SQL Server et Oracle :
Base de donnes Microsoft Access Pilote de base de donnes Pilote Microsoft Access (ODBC) Microsoft Jet Provider pour Access (OLE DB) Microsoft SQL Server Pilote Microsoft SQL Server (ODBC) Fournisseur Microsoft SQL Server (OLE DB) Oracle Pilote Microsoft Oracle (ODBC) Fournisseur Oracle pour OLE DB
Vous pouvez utiliser un DSN (Data Source Name, nom de source de donnes) ou une chane de connexion pour vous connecter la base de donnes. Vous devez utiliser une chane de connexion si vous vous connectez via un fournisseur OLE DB ou via un pilote ODBC qui n 'est pas install sur un systme Windows. Un DSN est un identificateur form d'un seul mot (MaConnexion, par exemple), qui pointe vers la base de donnes et contient toutes les informations requises pour s'y connecter. Le DSN se dfinit dans Windows. Vous pouvez utiliser un DSN si vous vous connectez via un pilote ODBC install sur un systme Windows. Une chane de connexion est une expression saisie la main qui identifie la base de donnes et fournit les informations requises pour s'y connecter, comme le montre l'exemple suivant :
Driver={SQL Server};Server=Socrates;Database=AcmeMktg; UID=wiley;PWD=roadrunner
Remarque : Vous pouvez galement utiliser une chane de connexion si vous vous connectez via un pilote ODBC install sur un systme Windows, mais il est plus facile d'utiliser un DSN.
Voir aussi
Accs une base de donnes la page 538
A propos des connexions OLE DB

Vous pouvez utiliser un fournisseur OLE DB pour communiquer avec votre base de donnes (OLE DB n'est disponible que sous Windows NT, 2000 ou XP). Le fait de crer une connexion une OLE DB directe et spcifique la base de donnes peut augmenter la vitesse de connexion en liminant l'intermdiaire ODBC entre votre application Web et la base de donnes. Si vous ne prcisez pas de fournisseur de OLE DB pour votre base de donnes, ASP utilisera le fournisseur par dfaut pour les pilotes ODBC pour communiquer avec un pilote ODBC, lequel communiquera son tour avec la base de donnes.
version prliminaire
Diffrents fournisseurs de OLE DB existent pour diffrentes bases de donnes. Vous pouvez obtenir des fournisseurs de OLE DB pour Microsoft Access et SQL Server en tlchargeant et en installant les packs Microsoft Data Access Components (MDAC) 2.5 et 2.7 sur l'ordinateur Windows excutant IIS. Vous pouvez tlcharger et installer les packs MDAC gratuitement partir du site Web de Microsoft l'adresse http://msdn.microsoft.com/data/mdac/downloads/. Remarque : Assurez-vous que vous disposez de MDAC 2.5 avant d'installer MDAC 2.7. Vous pouvez tlcharger les fournisseurs de OLE DB pour les bases de donnes Oracle sur le site Web d'Oracle, l'adresse www.oracle.com/technology/software/tech/windows/ole_db/index.html (enregistrement obligatoire). Pour crer une connexion OLE DB dans Dreamweaver, vous devez inclure un paramtre Provider (Fournisseur) dans une chane de connexion. Voici par exemple des paramtres de fournisseurs de OLE DB courants pour les bases de donnes Access, SQL Server et Oracle, respectivement :
Provider=Microsoft.Jet.OLEDB.4.0;... Provider=SQLOLEDB;... Provider=OraOLEDB;...
Pour connatre le paramtre de votre fournisseur de OLE DB, consultez la documentation du fournisseur de votre pilote ou consultez votre administrateur systme.
A propos des chanes de connexion

Une chane de connexion regroupe toutes les informations dont votre application Web a besoin pour se connecter une base de donnes. Dreamweaver insre cette chane dans vos scripts de page ct serveur afin que ceux-ci soient ultrieurement traits par votre serveur d'application. Une chane de connexion aux bases de donnes Microsoft Access et SQL Server se compose des paramtres suivants, spars par des points-virgules :
Provider (Fournisseur) Indique le fournisseur OLE DB pour votre base de donnes. Voici par exemple des paramtres
de fournisseurs de OLE DB courants pour les bases de donnes Access, SQL Server et Oracle, respectivement :
Provider=Microsoft.Jet.OLEDB.4.0;... Provider=SQLOLEDB;... Provider=OraOLEDB;...
Pour connatre le paramtre de votre fournisseur de OLE DB, consultez la documentation du fournisseur de votre pilote ou consultez votre administrateur systme. Si vous n'incluez pas le paramtre Provider (Fournisseur), le fournisseur de OLE DB par dfaut pour ODBC sera utilis et vous devrez prciser un pilote ODBC appropri pour votre base de donnes.
Driver (Pilote) Indique le pilote ODBC utiliser si vous ne spcifiez pas de fournisseur de OLE DB pour votre base de
donnes.
Server (Serveur) Indique le serveur hbergeant la base de donnes SQL Server si votre application Web est excute sur un serveur diffrent. Database (base de donnes) Est le nom d'une base de donnes SQL Server. DBQ Est le chemin une base de donnes base sur fichier (une base de donnes cre dans Microsoft Access, par exemple). Le chemin est celui sur le serveur hbergeant le fichier de base de donnes. UID Indique le nom de l'utilisateur. PWD Indique le mot de passe de l'utilisateur.
version prliminaire
DSN Est le nom de la source de donnes, si toutefois vous en utilisez une. Selon la faon dont vous dfinissez le DSN sur votre serveur, vous pouvez omettre les autres paramtres de la chane de connexion. Par exemple, DSN=Results peut constituer une chane de connexion valide si vous dfinissez les autres paramtres lorsque vous crez le DSN.
Il est galement possible que ces paramtres aient un nom ou une utilisation diffrents pour d'autres types de bases de donnes. Pour plus d'informations, consultez la documentation du fournisseur de votre base de donnes ou consultez votre administrateur systme. Voici un exemple de chane de connexion crant une connexion ODBC une base de donnes Access appele arbres.mdb :
Driver={Microsoft Access Driver (*.mdb)}; DBQ=C:\Inetpub\wwwroot\Research\trees.mdb
Voici un exemple de chane de connexion crant une connexion OLE DB un systme de base de donnes SQL Server appel Mothra et se trouvant sur un serveur du nom de Gojira :
Provider=SQLOLEDB;Server=Gojira;Database=Mothra;UID=jsmith; PWD=orlando8
Cration d'une connexion en utilisant un DSN local

Remarque : Pour raliser les oprations prsentes dans la prsente section, vous devez avoir configur une application ASP. Une base de donnes doit galement tre installe sur votre ordinateur local ou sur un systme auquel vous pouvez accder en rseau ou par FTP. Vous pouvez utiliser un DSN (Data Source Name, nom de source de donnes) pour crer une connexion ODBC entre votre application Web et votre base de donnes. Un DSN est un nom contenant tous les paramtres ncessaires pour tablir la connexion une base de donnes prcise l'aide d'un pilote ODBC. Comme vous pouvez uniquement spcifier un pilote ODBC dans un DSN, vous devez utiliser une chane de connexion si vous souhaitez passer par un fournisseur de OLE DB. Vous pouvez utiliser un DSN dfini localement pour crer une connexion une base de donnes dans Dreamweaver.
1 Dfinissez un DSN sur l'ordinateur Windows excutant Dreamweaver.
Pour obtenir des instructions, consultez les articles suivants sur le site Web de Microsoft :
Si votre ordinateur fonctionne sous Windows 2000, consultez l'article 300596 de la base de connaissances Microsoft
l'adresse suivante :http://support.microsoft.com/default.aspx?scid=kb;fr-fr;300596
Si votre ordinateur fonctionne sous Windows XP, consultez l'article 305599 de la base de connaissances Microsoft
2 Ouvrez une page ASP dans Dreamweaver, puis accdez au panneau Bases de donnes (Fentre > Bases de donnes). 3 Cliquez sur le bouton Plus (+) dans le panneau et slectionnez Nom de la source de donnes (DSN) dans le menu. 4 Entrez un nom pour la nouvelle connexion, sans espaces ni caractres spciaux. 5 Activez l'option Utilisation du DSN local et choisissez le DSN que vous souhaitez utiliser dans le menu Nom de la
source de donnes (DSN). Si vous voulez utiliser un DSN local mais n'en avez pas encore dfini, cliquez sur Dfinir pour ouvrir l'administrateur de sources de donnes ODBC Windows.
6 Renseignez les zones Nom d'utilisateur et Mot de passe. 7 Vous pouvez limiter le nombre d'lments de base de donnes rcuprs par Dreamweaver au moment de la
conception en cliquant sur Avanc puis en saisissant un nom de schma ou de catalogue.
version prliminaire
Remarque : Vous ne pouvez pas crer de schma ou de catalogue dans Microsoft Access.
8 Cliquez sur Tester pour vous connecter la base de donnes, puis cliquez sur OK. Si la connexion n'aboutit pas,
double-cliquez sur la chane de connexion ou vrifiez les paramtres du dossier d'valuation utilis par Dreamweaver pour traiter les pages dynamiques.
Voir aussi
Limitation des informations de base de donnes affiches dans Dreamweaver la page 568 Configuration de l'ordinateur pour le dveloppement d'applications la page 543 Rsolution des problmes de connexion aux bases de donnes la page 559
Cration d'une connexion en utilisant un DSN distant

Remarque : Pour raliser les oprations prsentes dans la prsente section, vous devez avoir configur une application ASP. Une base de donnes doit galement tre installe sur votre ordinateur local ou sur un systme auquel vous pouvez accder en rseau ou par FTP. Remarque : Dreamweaver ne peut rcuprer que les DSN de serveur crs l'aide de l'administrateur de source de donnes ODBC Windows. Vous pouvez utiliser un DSN dfini sur un ordinateur distant pour crer une connexion une base de donnes dans Dreamweaver. Si vous souhaitez utiliser un DSN distant, celui-ci doit tre dfini sur l'ordinateur Windows excutant votre serveur d'application (probablement IIS). Remarque : Comme vous pouvez uniquement spcifier un pilote ODBC dans un DSN, vous devez utiliser une chane de connexion si vous souhaitez passer par un fournisseur de OLE DB.
1 Dfinissez un DSN sur le systme distant excutant votre serveur d'application.
Pour obtenir des instructions, consultez les articles suivants sur le site Web de Microsoft :
Si votre ordinateur fonctionne sous Windows 2000, consultez l'article 300596 de la base de connaissances Microsoft
Si votre ordinateur fonctionne sous Windows XP, consultez l'article 305599 de la base de connaissances Microsoft
2 Ouvrez une page ASP dans Dreamweaver, puis ouvrez le panneau Bases de donnes (Fentre > Bases de donnes). 3 Cliquez sur le bouton Plus (+) dans le panneau et slectionnez Nom de la source de donnes (DSN) dans le menu. 4 Entrez un nom pour la nouvelle connexion, sans espaces ni caractres spciaux. 5 Slectionnez Utilisation de la DSN sur le serveur d'valuation
Remarque : Les utilisateurs Macintosh peuvent ignorer cette tape car toutes les connexions des bases de donnes utilisent des DSN sur le serveur d'application.
6 Tapez le DSN or ou cliquez sur le bouton DSN pour vous connecter au serveur et slectionnez le DSN pour la base
de donnes de votre choix, puis dfinissez les options.

7 Renseignez les zones Nom d'utilisateur et Mot de passe. 8 Vous pouvez limiter le nombre d'lments de base de donnes rcuprs par Dreamweaver au moment de la
conception en cliquant sur Avanc puis en saisissant un nom de schma ou de catalogue. Remarque : Vous ne pouvez pas crer de schma ou de catalogue dans Microsoft Access.
version prliminaire
Voir aussi
Configuration de l'ordinateur pour le dveloppement d'applications la page 543 Limitation des informations de base de donnes affiches dans Dreamweaver la page 568 Rsolution des problmes de connexion aux bases de donnes la page 559
Cration d'une connexion en utilisant une chane de connexion

Vous pouvez utiliser une connexion sans DSN pour crer une connexion ODBC ou OLE DB entre votre application Web et votre base de donnes. Il faut utiliser une chane de connexion pour crer ce type de connexion.
1 Ouvrez une page ASP dans Dreamweaver, puis accdez au panneau Bases de donnes (Fentre > Bases de donnes). 2 Cliquez sur le bouton Plus (+) dans le panneau et slectionnez Chane de connexion personnalise dans le menu.
Dfinissez les options, puis cliquez sur OK.

3 Entrez un nom pour la nouvelle connexion, sans espaces ni caractres spciaux. 4 Tapez une chane de connexion vers la base de donnes. Si vous n'indiquez pas de fournisseur de BD OLE dans la
chane de connexion, c'est--dire si vous ne saisissez pas de paramtre Provider (Fournisseur), ASP utilisera automatiquement le fournisseur de BD OLE pour les pilotes ODBC. Dans ce cas, vous devrez indiquer un pilote ODBC appropri pour votre base de donnes. Si votre site est hberg par un fournisseur d'accs Internet et que vous ne connaissez pas le chemin d'accs complet votre base de donnes, utilisez la mthode MapPath de l'objet de serveur ASP dans votre chane de connexion.
5 Si le pilote de base de donnes spcifi dans la chane de connexion n'est pas install sur le mme ordinateur que
Dreamweaver, slectionnez Utilisation du pilote sur le serveur d'valuation. Remarque : Les utilisateurs Macintosh peuvent ignorer cette tape car toutes les connexions aux bases de donnes utilisent le serveur d'application.
6 Vous pouvez limiter le nombre d'lments de base de donnes rcuprs par Dreamweaver au moment de la
conception en cliquant sur Avanc puis en saisissant un nom de schma ou de catalogue. Remarque : Vous ne pouvez pas crer de schma ou de catalogue dans Microsoft Access.
Voir aussi
Connexion une base de donnes ColdFusion la page 548 Limitation des informations de base de donnes affiches dans Dreamweaver la page 568 Rsolution des problmes de connexion aux bases de donnes la page 559
Connexion une base de donnes via un fournisseur d'accs

Si vous tes un dveloppeur ASP travaillant pour un fournisseur d'accs Internet, il est probable que vous ne connaissez pas le chemin physique d'accs aux fichiers que vous chargez, y compris celui de vos fichiers de base de donnes.
version prliminaire
Si votre fournisseur d'accs ne dfinit pas de DSN pour vous ou ne le fait pas assez rapidement, vous devez trouver un autre moyen de crer des connexions vos fichiers de base de donnes. Vous pouvez crer une connexion sans DSN un fichier de base de donnes, mais une telle connexion n'est possible que si vous connaissez le chemin d'accs physique du fichier de base de donnes sur le serveur du fournisseur d'accs. Vous pouvez obtenir le chemin d'accs physique un fichier de base de donnes prsent sur un serveur en utilisant la mthode MapPath de l'objet serveur ASP. Remarque : Les techniques prsentes dans la prsente section sont valables uniquement si votre base de donnes est base sur un fichier, comme par exemple, une base de donnes Microsoft Access, qui stocke les donnes dans un fichier .mdb.
Description des chemins d'accs physiques et virtuels

Lorsque vous chargez vos fichiers sur un serveur distant en utilisant Dreamweaver, ces derniers sont placs dans un dossier situ dans l'arborescence locale du serveur. Par exemple, sur un serveur excutant Microsoft IIS, le chemin d'accs vers votre page d'accueil peut se prsenter comme suit :
c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm
Il s'agit du chemin d'accs physique vers votre fichier. En revanche, l'URL permettant d'ouvrir votre fichier n'utilise pas de chemin d'accs physique. Elle utilise le nom de serveur ou de domaine suivi d'un chemin d'accs virtuel, comme dans l'exemple suivant :
www.plutoserve.com/jsmith/index.htm
Le chemin d'accs virtuel, /jsmith/index.htm, remplace le chemin d'accs physique, c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm.
Recherche du chemin d'accs physique d'un fichier en utilisant le chemin virtuel

Si vous travaillez avec un fournisseur d'accs, il se peut que vous ne connaissiez pas le chemin d'accs physique des fichiers que vous chargez. Gnralement, les fournisseurs d'accs vous fournissent un hte FTP, parfois un rpertoire hte, ainsi qu'un nom de connexion et un mot de passe. Ils vous indiquent galement une URL pour visualiser vos pages sur Internet, telle que www.plutoserve.com/jsmith/. Si vous connaissez cette URL, vous pouvez obtenir le chemin d'accs virtuel d'un fichier : il s'agit du chemin qui suit le nom du serveur ou du domaine qui figure dans une URL. Une fois que vous connaissez le chemin d'accs virtuel, vous pouvez obtenir le chemin d'accs physique un fichier prsent sur le serveur en utilisant la mthode MapPath. La mthode MacPath utilise le chemin d'accs virtuel comme argument et renvoie le chemin d'accs physique et le nom du fichier. Voici la syntaxe de la mthode :
Server.MapPath("/virtualpath")
Si le chemin virtuel d'un fichier est /jsmith/index.htm, l'expression suivante permet d'obtenir son chemin d'accs physique :
Server.MapPath("/jsmith/index.htm")
Vous pouvez utiliser la mthode MacPath comme suit.

1 Ouvrez une page ASP dans Dreamweaver et basculez en mode Code (Affichage > Code). 2 Saisissez l'expression suivante dans le code HTML de la page.
<%Response.Write(stringvariable)%>
3 Utilisez la mthode MapPath afin d'obtenir une valeur pour l'argument stringvariable.
Exemple :
version prliminaire
<% Response.Write(Server.MapPath("/jsmith/index.htm")) %>
4 Passez au mode En direct (Affichage > Affichage en direct) pour afficher la page.
La page affiche le chemin physique du fichier sur le serveur d'application, par exemple :
c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm
Pour plus d'informations sur la mthode MapPath, consultez la documentation en ligne disponible avec Microsoft IIS.
Utilisation d'un chemin d'accs virtuel pour tablir une connexion une base de donnes
Pour crire une chane de connexion sans DSN dans un fichier de base de donnes situ sur un serveur distant, vous devez connatre le chemin d'accs physique au fichier. Par exemple, voici une chane de connexion sans DSN typique pour une base de donnes Microsoft Access :
Driver={Microsoft Access Driver (*.mdb)}; DBQ=c:\Inetpub\wwwroot\accounts\users\jsmith\data\statistics.mdb
Si vous ne connaissez pas le chemin d'accs physique vos fichiers sur le serveur distant, vous pouvez l'obtenir en utilisant la mthode MapPath dans votre chane de connexion.
1 Chargez le fichier de base de donnes le fichier de base de donnes sur le serveur distant et notez son chemin d'accs
virtuel (par exemple, /jsmith/data/statistics.mdb).

2 Ouvrez une page ASP dans Dreamweaver, puis ouvrez le panneau Bases de donnes (Fentre > Bases de donnes). 3 Cliquez sur le bouton Plus (+) dans le panneau et slectionnez Chane de connexion personnalise dans le menu. 4 Entrez un nom pour la nouvelle connexion, sans espaces ni caractres spciaux. 5 Tapez la chane de connexion et utilisez la mthode MapPath pour fournir le paramtre DBQ.
Supposons que le chemin virtuel vers votre base de donnes Microsoft Access soit /jsmith/data/statistics.mdb. La chane de connexion peut tre exprime comme suit si vous utilisez VBScript comme langage de script :
"Driver={Microsoft Access Driver (*.mdb)};DBQ=" & Server.MapPath ("/jsmith/data/statistics.mdb")
L'esperluette (&) est utilise pour concatner (combiner) deux chanes. La premire chane est entre guillemets et la deuxime est fournie par l'expression Server.MapPath. Lorsque les deux chanes sont combines, la chane suivante est cre :
Driver={Microsoft Access Driver (*.mdb)}; DBQ=C:\Inetpub\wwwroot\accounts\users\jsmith\data\statistics.mdb
Si vous utilisez JavaScript, l'expression est quasiment identique ; la seule diffrence rside dans l'utilisation d'un signe plus (+) au lieu d'une esperluette (&) pour concatner les deux chanes :
"Driver={Microsoft Access Driver (*.mdb)};DBQ=" + Server.MapPath ("/jsmith/data/statistics.mdb")
6 Slectionnez Utilisation du pilote sur le serveur d'valuation, cliquez sur Tester, puis cliquez sur OK.
Remarque : Les utilisateurs Macintosh peuvent ignorer cette tape car toutes les connexions aux bases de donnes utilisent le serveur d'application. Remarque : Si la connexion n'choue, cliquez deux fois sur la chane de connexion ou contactez votre fournisseur d'accs pour vous assurer que le pilote de base de donnes que vous avez spcifi dans la chane de connexion est install sur le serveur distant. Vrifiez galement que le fournisseur d'accs dispose de la version la plus rcente du pilote. Par exemple, une base de donnes cre dans Microsoft Access 2000 ne fonctionnera pas avec Microsoft Access Driver 3.5. Vous devez utiliser Microsoft Access Driver, version 4.0 ou ultrieure.
version prliminaire
7 Mettez jour la connexion de base de donnes des pages dynamiques existantes (ouvrez la page dans Dreamweaver,
double-cliquez sur le nom du jeu d'enregistrements dans le panneau Liaisons ou Comportements de serveur, et slectionnez la connexion que vous venez de crer dans le menu Connexion), et utilisez la nouvelle connexion avec toutes les nouvelles pages que vous crerez.
Modification ou suppression d'une connexion une base de donnes

Lorsque vous crez une connexion une base de donnes, Dreamweaver enregistre les informations de connexion dans un fichier inclus, dans le sous-dossier Connections du dossier racine local du site. Vous pouvez les modifier ou les supprimer manuellement dans le fichier ou en procdant de la faon suivante :
Modification d'une connexion

1 Ouvrez une page ASP dans Dreamweaver, puis accdez au panneau Bases de donnes (Fentre > Bases de donnes). 2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) sur la
connexion et choisissez Modifier la connexion dans le menu.

3 Modifiez les informations de connexion, puis cliquez sur OK.
Dreamweaver met automatiquement jour le fichier inclus, ce qui actualise toutes les pages du site qui utilisent la connexion.
Suppression d'une connexion

1 Ouvrez une page ASP dans Dreamweaver, puis accdez au panneau Bases de donnes (Fentre > Bases de donnes). 2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) sur la
connexion et choisissez Supprimer la connexion dans le menu.

3 Dans la bote de dialogue qui s'affiche, confirmez que vous souhaitez supprimer la connexion.
Remarque : Pour viter de recevoir des erreurs dues la suppression d'une connexion, mettez jour tous les jeux d'enregistrements qui utilisent l'ancienne connexion en double-cliquant sur le nom du jeu d'enregistrements dans le panneau Liaisons et en choisissant une nouvelle connexion.
Connexions aux bases de donnes pour les dveloppeurs PHP

A propos des connexions aux bases de donnes PHP
Pour le dveloppement PHP, Dreamweaver prend uniquement en charge le systme de base de donnes MySQL. Les autres systmes de base de donnes, tels que Microsoft Access ou Oracle ne sont pas pris en charge. MySQL est un logiciel ouvert que vous pouvez tlcharger gratuitement partir d'Internet des fins non commerciales. Pour plus d'informations, consultez le site Web MySQL, l'adresse http://dev.mysql.com/downloads/. Pour raliser les oprations prsentes dans la prsente section, vous devez avoir configur une application PHP. Une base de donnes MySQL doit galement tre installe sur votre ordinateur local ou sur un systme auquel vous pouvez accder en rseau ou par FTP. Pour les besoins du dveloppement, tlchargez et installez la version Windows Essentials du serveur de base de donnes MySQL.
version prliminaire
Voir aussi
Configuration d'un environnement de dveloppement PHP la page 546
Etablissement d'une connexion une base de donnes

Pour tablir une connexion une base de donnes lors du dveloppement d'une application PHP dans Dreamweaver, vous devez disposer d'une ou plusieurs bases de donnes MySQL et le serveur MySQL doit tre dmarr.
1 Ouvrez une page PHP dans Dreamweaver, puis ouvrez le panneau Bases de donnes (Fentre > Bases de donnes). 2 Cliquez sur le bouton Plus (+) dans le panneau, slectionnez Connexion MySQL dans le menu et dfinissez les
options de la bote de dialogue.
Entrez un nom pour la nouvelle connexion, sans espaces ni caractres spciaux. Dans la zone Serveur MySQL, entrez une adresse IP ou un nom de serveur pour l'ordinateur qui hberge MySQL.
Si MySQL et PHP s'excutent sur le mme ordinateur, vous pouvez entrer localhost.
Entrez votre nom d'utilisateur et mot de passe MySQL. Dans la zone Base de donnes, entrez le nom de la base de donnes ou cliquez sur Slectionner et choisissez une
base de donnes dans la liste de bases de donnes MySQL, puis cliquez sur Tester. Dreamweaver tente d'tablir la connexion la base de donnes. Si la connexion choue, revrifiez le nom du serveur, le nom d'utilisateur et le mot de passe. Si la connexion n'aboutit toujours pas, vrifiez les paramtres du dossier d'valuation utilis par Dreamweaver pour traiter les pages dynamiques. Dreamweaver tente de deviner au mieux la valeur entrer automatiquement pour le prfixe d'URL dans la catgorie Serveur d'valuation de la bote de dialogue Dfinition du site. Toutefois, il peut parfois s'avrer ncessaire de modifier le prfixe d'URL pour garantir le fonctionnement de votre connexion. Assurez-vous que le prfixe d'URL est bien l'URL que les utilisateurs entrent dans leur navigateur pour ouvrir l'application Web, moins le nom de fichier (ou la page d'accueil) de l'application.
3 Cliquez sur OK.
Remarque : Si vous voyez le message d'erreur Client does not support authentication protocol requested. Consider upgrading MySQL client (Le client ne prend pas en charge le protocole d'identification requis. Essayez de mettre jour le client MySQL.) lors de l'valuation d'une connexion de base de donnes PHP MySQL 4.1, consultez la section Rsolution des messages d'erreur MySQL la page 564.
Modification ou suppression d'une connexion une base de donnes

Lorsque vous crez une connexion une base de donnes, Dreamweaver enregistre les informations de connexion dans un fichier inclus, dans le sous-dossier Connections du dossier racine local du site. Vous pouvez les modifier ou les supprimer manuellement dans le fichier ou en procdant de la faon suivante :
Modification d'une connexion

1 Ouvrez une page PHP dans Dreamweaver, puis ouvrez le panneau Bases de donnes (Fentre > Bases de donnes). 2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) sur la
connexion et choisissez Modifier la connexion dans le menu.

3 Modifiez les informations de connexion, puis cliquez sur OK.
Dreamweaver met automatiquement jour le fichier inclus, ce qui actualise toutes les pages du site qui utilisent la connexion.
version prliminaire
Suppression d'une connexion

1 Ouvrez une page PHP dans Dreamweaver, puis ouvrez le panneau Bases de donnes (Fentre > Bases de donnes). 2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) sur la
connexion et choisissez Supprimer la connexion dans le menu.

3 Dans la bote de dialogue qui s'affiche, confirmez que vous souhaitez supprimer la connexion.
Remarque : Pour viter les erreurs conscutives la suppression d'une connexion, mettez jour chaque jeu d'enregistrements utilisant l'ancienne connexion en double-cliquant sur le nom du jeu dans le panneau Liaisons et en choisissant une nouvelle connexion dans la bote de dialogue Jeu d'enregistrements.
Rsolution des problmes de connexion aux bases de donnes

Rsolution des problmes d'autorisation
Les problmes d'autorisation sont la cause la plus frquente des erreurs d'accs aux dossiers ou aux fichiers. Si votre base de donnes est installe sur un ordinateur quip de Windows 2000 ou Windows XP et si vous recevez un message d'erreur lorsque vous tentez d'afficher une page dynamique dans un navigateur Web ou en mode En direct, l'erreur peut provenir d'un problme d'autorisation. Le compte Windows qui tente d'accder la base de donnes ne dispose pas des droits suffisants. Le compte peut tre le compte anonyme Windows (par dfaut, IUSR_computername) ou un compte utilisateur spcifique si la page a t scurise pour un accs authentifi. Vous devez modifier les autorisations afin d'attribuer les droits d'accs appropris au compte IUSR_computername pour que le serveur Web puisse accder au fichier de base de donnes. En outre, le dossier contenant le fichier de base de donnes doit galement disposer de certaines autorisations pour crire dans cette base de donnes. Si la page doit tre accde de manire anonyme, attribuez le contrle complet au compte IUSR_computername pour le dossier et le fichier de base de donnes, comme indiqu dans la procdure ci-dessous. En outre, si le chemin d'accs la base de donnes est rfrenc au moyen de la convention UNC (\\Serveur\Share), assurez-vous que les Autorisations de partage attribuent les droits d'accs complets au compte IUSR_computername. Cette tape s'applique mme si le partage est situ au niveau du serveur Web local. Si vous copiez la base de donnes depuis un autre emplacement, il est possible qu'elle n'hrite pas des autorisations d'accs de son dossier de destination et que vous deviez modifier les autorisations d'accs pour la base de donnes.
Vrification ou modification des autorisations de la base de donnes (Windows XP)

1 Assurez-vous que vous avez des privilges d'administrateur sur cet ordinateur. 2 Dans l'Explorateur Windows, localisez le fichier de la base de donnes ou le dossier contenant la base de donnes,
cliquez sur ce fichier ou ce dossier avec le bouton droit de la souris, puis slectionnez Proprits.
3 Cliquez sur l'onglet Scurit.
Remarque : Cette tape s'applique uniquement si vous utilisez un systme de fichiers NTFS. Si vous disposez d'un systme de fichiers FAT, la bote de dialogue n'a pas d'onglet Scurit.
4 Si le compte IUSR_computername n'apparat pas dans la liste des noms d'utilisateur ou de groupe, cliquez sur le
bouton Ajouter pour le rajouter.

5 Dans la bote de dialogue de slection des utilisateurs ou des groupes, cliquez sur Avanc.
version prliminaire
La bote de dialogue vous propose alors davantage d'options.

6 Cliquez sur le bouton des emplacements et slectionnez le nom de l'ordinateur. 7 Cliquez sur le bouton de recherche pour afficher une liste des noms de compte associs l'ordinateur. 8 Slectionnez le compte IUSR_computername et cliquez sur OK, puis cliquez une nouvelle fois sur OK pour
refermer la bote de dialogue.

9 Pour attribuer les droits d'accs complets au compte IUSR, cochez la case Contrle total et cliquez sur OK.
Vrification ou modification des autorisations de la base de donnes (Windows 2000)

1 Assurez-vous que vous avez des privilges d'administrateur sur cet ordinateur. 2 Dans l'Explorateur Windows, localisez le fichier de la base de donnes ou le dossier contenant la base de donnes,
cliquez sur ce fichier ou ce dossier avec le bouton droit de la souris, puis slectionnez Proprits.
3 Cliquez sur l'onglet Scurit.
Remarque : Cette tape s'applique uniquement si vous utilisez un systme de fichiers NTFS. Si vous disposez d'un systme de fichiers FAT, la bote de dialogue n'a pas d'onglet Scurit.
4 Si le compte IUSR_computername n'est pas rpertori parmi les comptes Windows dans la bote de dialogue
Autorisations - Fichier, cliquez sur le bouton Ajouter pour l'ajouter.

5 Dans la bote de dialogue de slection des utilisateurs, ordinateurs ou groupes, choisissez le nom de l'ordinateur
partir du menu de recherche pour afficher une liste des noms de compte associs l'ordinateur.
6 Slectionnez le compte IUSR_computername et cliquez sur Ajouter. 7 Pour attribuer les droits d'accs complets au compte IUSR, slectionnez Contrle total dans le menu Type d'accs,
puis cliquez sur OK. Pour une scurit accrue, les autorisations peuvent tre dfinies de faon ce que le droit d'accs en lecture soit dsactiv pour le dossier Web contenant la base de donnes. Il ne sera pas permis de parcourir ce dossier, mais les pages Web continueront d'accder la base de donnes. Pour plus d'informations sur les autorisations du compte IUSR et du serveur Web, consultez les notes techniques du centre de support technique Adobe :
Description de l'authentification anonyme et du compte IUSR l'adresse www.adobe.com/go/authentication_fr Dfinition des autorisations d'un serveur Web IIS l'adresse www.adobe.com/go/server_permissions_fr
Rsolution des messages d'erreur Microsoft

Ces messages d'erreur Microsoft peuvent se produire lorsque vous demandez une page dynamique au serveur si vous utilisez Internet Information Server (IIS) avec un systme de base de donnes Microsoft tel que SQL Server ou Access. Remarque : Adobe n'offre pas de support technique pour les logiciels tiers tels que Microsoft Windows et IIS. Si cette section ne vous permet pas de rsoudre votre problme, contactez le support technique de Microsoft ou visitez le site Web de support technique Microsoft l'adresse http://support.microsoft.com/. Pour plus d'informations sur les erreurs de type 80004005, voir la section Guide de dpannage pour les erreurs de type 80004005 au niveau des composants Active Server Pages et Microsoft Data Access (Q306518) sur le site Web de Microsoft l'adresse http://support.microsoft.com/default.aspx?scid=kb;fr-fr;Q306518.
version prliminaire
[Reference]80004005 - Data source name not found and no default driver specified (Le nom de la source de donnes est introuvable et aucun pilote par dfaut n'est spcifi)
Cette erreur survient lorsque vous tentez de visualiser une page dynamique dans un navigateur Web ou en mode En direct. Le message d'erreur varie en fonction de votre base de donnes et de votre serveur Web. D'autres variantes de ce message d'erreur incluent :
80004005Driver's SQLSetConnectAttr failed (Le paramtre SQLSetConnectAttr du pilote a chou) 80004005 - General error Unable to open registry key 'DriverId' (Erreur gnrale. Impossible d'ouvrir la cl du
registre DriverId) Les causes et les solutions possibles sont les suivantes :
La page ne parvient pas trouver le DSN. Assurez-vous qu'un DSN a t cr sur le serveur Web et sur l'ordinateur
local.
Le DSN peut avoir t dfini en tant que DSN utilisateur, et non en tant que DSN systme. Supprimez le DSN
utilisateur et crez un DSN systme pour le remplacer. Remarque : Si vous ne supprimez pas le DSN utilisateur, les noms DSN en double engendrent de nouvelles erreurs ODBC. Si vous utilisez Microsoft Access, le fichier de base de donnes (.mdb) peut tre verrouill Ce verrouillage peut tre la consquence d'un DSN avec un nom diffrent accdant la base de donnes. Dans l'Explorateur Windows, recherchez le fichier de verrouillage (.ldb) dans le dossier contenant le fichier de base de donnes (.mdb) et supprimez-le. Si un autre DSN pointe vers le mme fichier de base de donnes, vous pouvez supprimer ce DSN pour empcher tout risque d'erreur l'avenir. Redmarrez l'ordinateur aprs avoir apport des modifications.
[Reference]80004005Couldnt use (unknown); file already in use (Impossible d'utiliser "(inconnu)" ; fichier en cours d'utilisation)
Cette erreur survient lorsque vous utilisez une base de donnes Microsoft Access et tentez de visualiser une page dynamique dans un navigateur Web ou en mode En direct. Une variante de ce message d'erreur est 80004005 Microsoft Jet database engine cannot open the file (unknown) (Le moteur de base de donnes Jet ne peut pas ouvrir le fichier (inconnu)). Ceci est probablement d un problme d'autorisations. Voici quelques causes et solutions spcifiques :
Le compte utilis par Internet Information Server (gnralement IUSR) peut ne pas disposer des droit d'accs
Windows adquats pour une base de donnes base sur fichier ou pour le dossier contenant le fichier. Vrifiez les droits d'accs du compte IIS (IUSR) dans le gestionnaire utilisateur.
Il est possible que vous ne soyez pas autoris crer ou supprimer des fichiers temporaires. Vrifiez les
autorisations attribues au fichier et au dossier. Assurez-vous que vous tes autoris crer ou supprimer des fichiers temporaires. Les fichiers temporaires sont gnralement crs dans le mme dossier que la base de donnes, mais ils peuvent galement tre crs dans d'autres dossiers tels que /Winnt.
Sous Windows 2000, il peut tre ncessaire de modifier le dlai d'expiration pour le DSN de la base de donnes Access.
Pour modifier ce dlai, choisissez Dmarrer > Paramtres > Panneau de configuration > Outils d'administration > Sources de donnes (ODBC). Cliquez sur l'onglet Systme, slectionnez le DSN appropri puis cliquez sur le bouton Configurer. Cliquez sur le bouton Options et fixez la valeur de dlai d'expiration de la page 5000. Si les problmes persistent, consultez les points suivants dans la base de connaissances Microsoft :
PRB : 80004005 Couldnt use (unknown); file already in use (Impossible d'utiliser "(inconnu)" ; fichier en cours
d'utilisation) l'adresse http://support.microsoft.com/default.aspx?scid=kb;fr-fr;Q174943.
version prliminaire
PRB : La connectivit de la base de donnes Microsoft Access choue dans Active Server Pages l'adresse
http://support.microsoft.com/default.aspx?scid=kb;fr-fr;Q253604.
PRB : Erreur Impossible d'ouvrir le fichier inconnu lors de l'utilisation d'Access l'adresse
http://support.microsoft.com/default.aspx?scid=kb;fr-fr;Q166029.
[Reference]80004005Logon Failed() (Echec de connexion)

Cette erreur survient lorsque vous utilisez Microsoft SQL Server et tentez de visualiser une page dynamique dans un navigateur Web ou en mode En direct. Cette erreur est gnre par SQL Server s'il refuse ou ne reconnat pas le compte ou le mot de passe de connexion soumis (si vous utilisez une scurit standard), ou si un compte Windows n'est pas associ un compte SQL (si vous utilisez une scurit intgre). Les solutions possibles sont les suivantes :
Si vous utilisez une scurit standard, le nom de compte et le mot de passe peuvent tre incorrects. Essayez le
compte et le mot de passe de l'administrateur systme (ID utilisateur : sa et aucun mot de passe), qui doivent tre dfinis dans la ligne de chane de connexion. Les DSN ne conservent pas les noms d'utilisateurs et les mots de passe.
Si vous utilisez une scurit intgre, vrifiez le compte Windows appelant la page et localisez son compte SQL
associ (s'il existe).
SQL Server n'autorise pas le trait de soulignement dans les noms de compte SQL. Si un utilisateur connecte
manuellement le compte Windows IUSR_nommachine un compte SQL portant le mme nom, il s'ensuivra automatiquement un chec. Connectez un compte quelconque qui utilise un trait de soulignement un nom de compte SQL qui n'en comporte aucun.
[Reference]80004005Operation must use an updateable query (L'opration doit utiliser une requte pouvant tre mise jour)
Cette erreur survient lorsqu'un vnement met jour un jeu d'enregistrements ou y insre des donnes. Les causes et les solutions possibles sont les suivantes :
Les autorisations dfinies pour le dossier contenant la base de donnes sont trop restrictives. Les droits
d'accs IUSR doivent tre dfinis sur lecture/criture.
Le fichier de base de donnes lui-mme ne dispose pas de droits d'accs en lecture/criture complets. La base de donnes est peut-tre hors du rpertoire Inetpub/wwwroot. Bien que vous puissiez visualiser et
parcourir les donnes, vous risquez de ne pas pouvoir les mettre jour, moins que la base de donnes ne soit place dans le rpertoire wwwroot.
Le jeu d'enregistrements repose sur une requte ne pouvant pas tre mise jour. Les relations sont de bons exemples
de requtes ne pouvant tre mises jour dans une base de donnes. Restructurez vos requtes de faon ce qu'elles puissent tre mises jour. Pour plus d'informations sur cette erreur, voir RBN : Erreur ASP 'La requte ne peut pas tre mise jour' lorsque vous mettez l'enregistrement de la table jour dans la base de connaissance Microsoft l'adresse suivante http://support.microsoft.com/default.aspx?scid=kb;fr-fr;Q174640.
version prliminaire
[Reference]80040e07Data type mismatch in criteria expression (Types de donnes non concordants dans l'expression des critres)
Cette erreur survient lorsque le serveur essaie de traiter une page contenant un comportement de serveur Insrer l'enregistrement ou Mettre jour l'enregistrement et que le comportement du serveur tente de dfinir la valeur d'une colonne Date/Heure d'une base de donnes Microsoft Access sur une chane vide (""). Microsoft Access utilise une saisie des caractres rigoureuse ; le logiciel impose un jeu de rgles strictes pour les valeurs de certaines colonnes. La valeur d'une chane vide d'une requte SQL ne peut pas tre stocke dans une colonne Date/Heure Access. Actuellement, la seule solution connue consiste viter d'insrer ou de mettre jour les colonnes Date/Heure Access avec des chanes vides ("") ou avec toute autre valeur ne correspondant pas la gamme de valeurs spcifies pour le type de donnes.
[Reference]80040e10Too few parameters (Nombre de paramtres insuffisant)

Cette erreur survient lorsqu'une colonne spcifie dans votre requte SQL n'existe pas dans la table de la base de donnes. Vrifiez les noms des colonnes de votre base de donnes par rapport votre requte SQL. Cette erreur est souvent due une typographie errone.
[Reference]80040e10COUNT field incorrect (Champ COUNT incorrect)

Cette erreur survient lorsque vous prvisualisez une page contenant un comportement de serveur Insrer l'enregistrement dans un navigateur Web et que vous essayez de l'utiliser pour insrer un enregistrement dans une base de donnes Microsoft Access. Vous tentez peut-tre d'insrer un enregistrement dans un champ de base de donnes qui comporte un point d'interrogation(?) dans son nom de champ. Le point d'interrogation est un caractre spcial pour certains moteurs de bases de donnes, notamment Microsoft Access, et il ne doit pas tre utilis pour les noms de tables de bases de donnes ou de champs. Ouvrez votre systme de base de donnes, supprimez le point d'interrogation (?) des noms de champs et mettez jour les comportements de serveur sur la page qui se rapporte ce champ.
[Reference]80040e14Syntax error in INSERT INTO statement (Erreur de syntaxe dans l'instruction INSERT INTO)
Cette erreur survient lorsque le serveur tente de traiter une page contenant un comportement de serveur Insrer l'enregistrement. Cette erreur rsulte gnralement d'un ou de plusieurs problmes, cits ci-dessous, relatifs au nom d'un champ, d'un objet ou d'une variable de la base de donnes :
Utilisation d'un mot rserv en tant que nom. La majorit des bases de donnes disposent d'un jeu de mots rservs.
Par exemple, date est un mot rserv et ne peut pas tre utilis pour les noms de champs d'une base de donnes.
Utilisation de caractres spciaux dans le nom, tels que ceux mentionns ci-dessous :
./*:!#&-?
Utilisation d'un espace dans le nom.

L'erreur peut galement survenir lorsqu'un masque d'entre est dfini pour un objet de la base de donnes et que les donnes insres ne sont pas conformes au masque. Pour rsoudre le problme, vitez d'utiliser des mots rservs tels que date , name select , where et level lorsque vous spcifiez des noms de colonnes dans votre base de donnes. Eliminez galement les espaces et les caractres spciaux.
version prliminaire
Consultez les pages Web suivantes pour des listes dtailles de mots rservs dans les systmes de bases de donnes courants.
Microsoft Access l'adresse http://support.microsoft.com/default.aspx?scid=kb;fr-fr;Q209187 Microsoft SQL Server l'adresse http://msdn.microsoft.com/library/default.asp?url=/library/fr-fr/tsqlref/ts_rarz_9oj7.asp
MySQL l'adresse http://dev.mysql.com/doc/mysql/en/reserved-words.html
[Reference]80040e21ODBC error on Insert or Update (Erreur OBDC au moment d'insrer ou de mettre jour)
Cette erreur survient lorsque le serveur tente de traiter une page contenant un comportement de serveur Mettre jour l'enregistrement ou Insrer l'enregistrement. La base de donnes ne peut pas grer la mise jour ou l'insertion que le comportement de serveur tente de raliser. Les causes et les solutions possibles sont les suivantes :
Le comportement de serveur tente de mettre jour un champ de numrotation automatique d'une table de base de
donnes ou d'insrer un enregistrement dans un champ de numrotation automatique. Les champs de numrotation automatique sont automatiquement complts par le systme de la base de donnes ; toute tentative faite pour les remplir manuellement est voue l'chec.
Le type de donnes que le comportement de serveur met jour ou insre ne correspond pas celui du champ de la
base de donnes : insertion d'une date dans un champ boolen (oui/non), insertion d'une chane dans un champ numrique ou insertion d'une chane la mise en forme incorrecte dans un champ Date/Heure.
[Reference]800a0bcdEither BOF or EOF is true (BOF ou EOF est gal True)

Cette erreur survient lorsque vous tentez de visualiser une page dynamique dans un navigateur Web ou en mode En direct. Ce problme survient lorsque la page tente d'afficher des donnes partir d'un jeu d'enregistrements vide. Pour le rsoudre, appliquez le comportement de serveur Afficher la rgion au contenu dynamique afficher sur la page, de la manire suivante :
1 Slectionnez le contenu dynamique de la page. 2 Dans le panneau Comportements de serveur, cliquez sur le bouton Plus (+) et choisissez Afficher la rgion >
Afficher la rgion si le jeu d'enregistrements n'est pas vide.

3 Slectionnez le jeu d'enregistrements dans lequel se trouve le contenu dynamique et cliquez sur OK. 4 Rptez les tapes 1 3 pour chaque lment de contenu dynamique sur la page.
Rsolution des messages d'erreur MySQL

Le message d'erreur courant suivant peut survenir lors d'un test de connexion une base de donnes PHP avec MySQL 4.1 : Client does not support authentication protocol requested. Consider upgrading MySQL client (Ce client ne prend pas en charge le protocole d'authentification demand. Il peut tre ncessaire de mettre niveau le client MySQL). Il peut tre ncessaire de revenir une version prcdente de MySQL ou d'installer PHP 5 et copier certaines bibliothques de liaison dynamique (DLL). Vous trouverez des instructions dtailles dans la rubrique Configuration d'un environnement de dveloppement PHP la page 546.
version prliminaire
Voir galement les notes techniques suivantes :
TechNote c45f8a29 l'adresse www.adobe.com/go/c45f8a29_fr. TechNote 16515 l'adresse www.adobe.com/go/16515_fr.
Suppression de scripts de connexion

Utilisation de la commande Supprimer les scripts de connexion
Vous pouvez utiliser la commande Supprimer les scripts de connexion pour supprimer les scripts que Dreamweaver place dans un dossier distant pour accder aux bases de donnes. Ces scripts ne sont ncessaires que lors de la phase de cration dans Dreamweaver. Lorsque vous slectionnez l'option Utilisation du pilote sur le serveur d'valuation ou Utilisation de la DSN sur le serveur d'valuation dans la bote de dialogue de connexion une base de donnes, Dreamweaver charge un script MMHTTPDB sur le serveur d'valuation. Ceci permet Dreamweaver de manipuler le pilote de base de donnes distant avec le protocole HTTP, ce qui permet en retour Dreamweaver d'obtenir, dans la base de donnes, les informations ncessaires la cration de votre site. Toutefois, ce fichier ne permet pas de voir les noms des sources de donnes (DSN) dfinis sur l'ordinateur. Si les DSN et les bases de donnes ne sont pas protgs par un mot de passe, le script permet une personne malveillante d'envoyer des commandes SQL la base de donnes. Les fichiers de scripts MMHTTPDB se trouvent dans le dossier _mmServerScripts, qui est lui-mme situ la racine du site Web. Remarque : Le navigateur de fichiers de Dreamweaver (le panneau Fichiers) ne montre pas le dossier _mmServerScripts. Celui-ci nest visible qu partir dun client FTP tiers ou du navigateur de fichiers. Avec certaines configurations, ces scripts sont inutiles. Comme ces scripts ne sont pas utiliss lors du transfert des pages Web aux visiteurs du site, il est conseill de ne pas les placer sur un serveur de production. Si vous avez transfr le fichier de scripts MMHTTPDB sur un serveur de production, il est conseill de le supprimer. La commande Supprimer les scripts de connexion efface automatiquement ces fichiers. Pour plus d'informations, consultez la TechNote 19214 sur le site Web d'Adobe l'adresse www.adobe.com/go/19214_fr.
version prliminaire
566
Chapitre 19 : Ajout de contenu dynamique aux pages Web

Vous pouvez crer des pages dynamiques qui affichent des informations provenant de sources de contenu dynamiques, telles que des bases de donnes et des variables de session. Adobe Dreamweaver CS5 prend en charge le dveloppement de pages dynamiques pour les modles de serveurs ColdFusion, ASP et PHP. Vous pouvez galement utiliser un cadre bas sur Ajax, baptis Spry, pour crer des pages dynamiques qui affichent et traitent des donnes XML. L'emploi d'lments de formulaire Spry prdfinis permet de crer des pages dynamiques qui n'exigent pas d'actualisation globale.
Optimisation de l'espace de travail pour le dveloppement visuel

Affichage de panneaux de dveloppement d'applications Web
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 au-dessus 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.
version prliminaire
Ajout de contenu dynamique aux pages Web
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.
Voir aussi
Panneau Liaisons la page 576 Panneau Comportements de serveur la page 577 Panneau Bases de donnes la page 577 Panneau Composants la page 578 Didacticiel consacr l'espace de travail de dveloppement
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 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.
Voir aussi
Aperu des pages dynamiques dans un navigateur

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.
version prliminaire
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.
Voir aussi
Limitation des informations de base de donnes affiches dans Dreamweaver

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
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.
version prliminaire
Voir aussi
Modification de contenu dynamique la page 597
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. Paramtres Ouvre la bote de dialogue Paramtres pour que vous puissiez visualiser les attributs actuels du champ et
ajouter ou supprimer des attributs.
Conception de pages dynamiques

Dreamweaver et la conception de pages dynamiques
Pour concevoir et crer un site Web dynamique avec succs, excutez la procdure gnrale suivante.
1 Conception de la page
La conception visuelle de la page constitue l'une des tapes cls dans la conception d'un site Web, qu'il soit statique ou dynamique. En effet, lorsque vous ajoutez des lments dynamiques une page Web, son aspect fonctionnel dpend largement de sa conception. Rflchissez attentivement la faon dont les utilisateurs interagiront avec chacune des pages et avec le site Web dans son ensemble. L'une des mthodes les plus courantes pour insrer un contenu dynamique dans une page Web consiste crer un tableau pour prsenter le contenu puis importer le contenu dynamique dans une ou plusieurs des cellules du tableau. Cette mthode vous permet de prsenter divers types d'informations dans un format structur.
2 Cration d'une source de contenu dynamique
Avant de pouvoir afficher des donnes dans une page, les sites Web dynamiques doivent tre associs une source de contenu d'o ils peuvent extraire les donnes. Avant de pouvoir utiliser des sources de contenu dans une page Web, effectuez les actions suivantes :
Crez une connexion avec la source de contenu dynamique (telle qu'une base de donnes) et avec le serveur
d'application charg du traitement de la page ; Crez la source de donnes l'aide du panneau Liaisons. Vous pouvez ensuite slectionner et insrer la source de donnes dans la page.
Prcisez les informations de la base de donnes devant tre affiches ou les variables devant tre incluses dans la
page en crant un jeu d'enregistrements. Vous avez galement la possibilit de tester la requte depuis la bote de dialogue Jeu d'enregistrements et de procder tous les rglages ncessaires avant de l'ajouter au panneau Liaisons.
Slectionnez et insrez des lments de contenu dynamique dans la page slectionne.
version prliminaire
3 Ajout de contenu dynamique une page Web
Aprs avoir dfini un jeu d'enregistrements (ou toute autre source de donnes) et l'avoir ajout au panneau Liaisons, vous pouvez insrer le contenu dynamique associ au jeu d'enregistrements dans la page. Grce l'interface base de menus de Dreamweaver, il suffit de slectionner une source de contenu dynamique dans le panneau Liaisons et de l'insrer dans l'objet de texte, d'image ou de formulaire appropri au sein de la page en cours pour ajouter des lments de contenu dynamique. Lorsque vous insrez un lment de contenu dynamique ou un comportement de serveur dans une page, Dreamweaver insre un script ct serveur dans le code source de la page. Ce script donne pour instruction au serveur de rcuprer des donnes partir de la source dfinie et de les restituer dans la page Web. Pour insrer un contenu dynamique dans une page Web, procdez de l'une des manires suivantes :
placez ce contenu au niveau du point d'insertion en mode Code ou Cration ; remplacez une chane de texte ou un autre espace rserv ;
insrez le contenu dans un attribut HTML. Un contenu dynamique peut, par exemple, dfinir l'attribut src d'une image ou l'attribut de valeur d'un champ de formulaire.
4 Ajout de comportements de serveur une page
En dehors de l'ajout de contenu dynamique, vous pouvez intgrer une logique applicative complexe dans des pages Web l'aide des comportements de serveur. Les comportements de serveur correspondent des sections de code prdfinies ct serveur qui ajoutent une logique applicative aux pages Web, ce qui optimise leur interactivit et leurs fonctionnalits. Les comportements de serveur de Dreamweaver vous permettent d'ajouter une logique applicative un site Web sans que vous ayez rdiger le code requis. Les comportements fournis avec Dreamweaver prennent en charge les types de document ColdFusion, ASP et PHP. Les comportements de serveur sont dvelopps et tests de sorte tre rapides, fiables et solides. Les comportements de serveur intgrs prennent en charge des pages adaptes diffrents types de plates-formes et de navigateurs. Grce l'interface pointer-cliquer de Dreamweaver, l'application de contenu dynamique et de comportements complexes une page est aussi simple que l'insertion d'lments de texte et de conception. Les comportements de serveur suivants sont disponibles :
Dfinition d'un jeu d'enregistrements partir d'une base de donnes existante. Le jeu d'enregistrements que
vous dfinissez est ensuite stock dans le panneau Liaisons.
Affichage de plusieurs enregistrements dans une mme page. Vous pouvez slectionner soit un tableau entier,
soit des cellules ou lignes prcises renfermant un contenu dynamique, puis dfinir le nombre d'enregistrements afficher sur chaque page.
Cration et insertion d'un tableau dynamique dans une page, puis association du tableau un jeu
d'enregistrements. Vous pouvez ensuite modifier l'apparence du tableau et de la rgion rpte l'aide respectivement de l'inspecteur Proprits et du comportement de serveur Rgion rpte.
Insertion d'un objet de texte dynamique dans une page. L'objet de texte que vous insrez est un lment
provenant d'un jeu d'enregistrements prdfini auquel vous appliquez le format de donnes de votre choix.
Cration de commandes de navigation entre enregistrements et d'tat des enregistrements, cration de pages
Principale/Dtails et de formulaires destins mettre jour les informations d'une base de donnes.
Affichage de plusieurs enregistrements partir d'un enregistrement de base de donnes. Cration de liens de navigation de jeu d'enregistrements afin de permettre aux utilisateurs d'afficher les
enregistrements prcdant ou suivant un enregistrement de base de donnes.
version prliminaire
Ajout d'un compteur d'enregistrements pour aider les utilisateurs suivre le nombre d'enregistrements renvoys
et leur emplacement dans le rsultat obtenu. Vous pouvez galement enrichir les comportements de serveur de Dreamweaver en rdigeant vos propres comportements ou en installant ceux rdigs par des tiers.
5 Test et dbogage de la page
Avant de rendre une page dynamique (ou un site Web entier) accessible sur le Web, il est ncessaire d'en tester les fonctionnalits. Vous devriez galement examiner la faon dont les fonctionnalits de votre application peuvent tre adaptes aux personnes souffrant d'un handicap. Vous trouverez un didacticiel consacr la cration de pages dynamiques l'adresse www.adobe.com/go/learn_dw_webapp_fr.
Voir aussi
Prsentation de contenu l'aide de tableaux la page 182 Ajout et formatage de texte la page 225 Ajout et modification d'images la page 242 Insertion de fichiers SWF la page 255
Prsentation des sources de contenu dynamique

A propos des sources de contenu dynamique
Une source de contenu dynamique est un stock d'informations partir duquel il est possible de rcuprer du contenu dynamique en vue de l'afficher dans une page Web. Diffrentes sources peuvent tre utilises comme sources de contenu dynamique : des informations enregistres dans une base de donnes, mais aussi des valeurs envoyes au moyen d'un formulaire HTML, des valeurs contenues dans un objet de serveur, etc. Dreamweaver vous permet aisment d'tablir une connexion une base de donnes et de crer un jeu d'enregistrements partir duquel extraire le contenu dynamique. Un jeu d'enregistrements correspond au rsultat d'une requte de base de donnes. Il permet d'extraire les informations spcifiques demandes et de les afficher dans une page donne. L'utilisateur dfinit le jeu d'enregistrements en fonction des informations prsentes dans la base de donnes et du contenu qu'il souhaite afficher. Certains fournisseurs de technologie utilisent une terminologie diffrente pour dsigner un jeu d'enregistrements. Dans les technologies ASP et ColdFusion, un jeu d'enregistrements est dfini comme requte. Si vous utilisez d'autres sources de donnes, telles que des entres utilisateur ou des variables de serveur, le nom de la source de donnes dfini dans Dreamweaver est identique celui de la source de donnes. Les sites Web dynamiques requirent une source de donnes partir de laquelle le contenu dynamique peut tre rcupr et affich. Dreamweaver permet d'utiliser des bases de donnes, des procdures stockes, des variables de demande, d'URL, de serveur et de formulaire, ainsi que d'autres sources de contenu dynamique. Suivant la source de donnes, il est possible soit de rcuprer un nouveau contenu pour rpondre une demande, soit de modifier la page pour satisfaire aux besoins des utilisateurs. Toute source de contenu dfinie dans Dreamweaver est ajoute la liste des sources de contenu du panneau Liaisons. Vous pouvez ensuite insrer la source de contenu dans la page actuellement slectionne.
version prliminaire
A propos des jeux d'enregistrements

Les pages Web ne peuvent pas accder directement aux donnes stockes dans une base de donnes. Au lieu de cela, elles interagissent avec un jeu d'enregistrements. Un jeu d'enregistrements correspond un sous-ensemble d'informations (ou enregistrements) extraits de la base de donnes l'aide d'une requte de base de donnes. Une requte est une instruction de recherche conue pour trouver et extraire des informations prcises stockes dans une base de donnes. Si vous utilisez une base de donnes comme source de contenu d'une page Web dynamique, vous devez tout d'abord crer un jeu d'enregistrements dans lequel seront stockes les donnes rcupres. Les jeux d'enregistrements servent d'intermdiaire entre la base de donnes dans laquelle le contenu est enregistr et le serveur d'application qui gnre la page. Les jeux d'enregistrements sont stocks temporairement dans la mmoire du serveur d'application, afin d'acclrer la rcupration de donnes. Le serveur supprime un jeu d'enregistrements lorsqu'il n'est plus ncessaire. Une requte peut gnrer un jeu d'enregistrements n'incluant que certaines colonnes, certains enregistrements ou encore une combinaison des deux. Un jeu d'enregistrements peut galement inclure tous les enregistrements et toutes les colonnes d'une table de base de donnes. Toutefois, comme les applications n'ont gnralement pas besoin de toutes les informations stockes dans une base de donnes, il est fortement conseill d'essayer de limiter au maximum la taille des jeux d'enregistrements. De plus, comme le serveur Web stocke temporairement en mmoire le jeu d'enregistrements, l'utilisation d'un jeu de taille limite conomise de la mmoire et peut de ce fait amliorer les performances du serveur. Les requtes de base de donnes sont crites en SQL (Structured Query Language), langage simple permettant de rcuprer des informations d'une base de donnes, mais aussi d'ajouter des donnes une base et d'en supprimer. Le gnrateur SQL fourni avec Dreamweaver permet de crer des requtes simples sans matriser le langage SQL. Toutefois, si vous voulez crer des requtes SQL complexes, une connaissance de base de ce langage vous permet de crer des requtes plus avances et vous offre davantage de souplesse pour la conception de pages dynamiques. Avant de dfinir un jeu d'enregistrements pour l'utiliser dans Dreamweaver, vous devez crer une connexion une base de donnes et saisir des donnes dans la base si celle-ci n'en contient pas. Si vous n'avez pas encore dfini de connexion une base de donnes pour votre site, consultez le chapitre consacr spcifiquement la mise en place d'une connexion une base de donnes dans le contexte de la technologie de serveur que vous utilisez, et suivez les instructions fournies.
Voir aussi
Dfinition un jeu d'enregistrements sans rdiger d'instructions SQL la page 578
A propos des paramtres d'URL et de formulaire

Les paramtres d'URL permettent de stocker les informations saisies par les utilisateurs. Pour dfinir un paramtre d'URL, vous devez crer un formulaire ou un lien hypertexte utilisant la mthode GET pour l'envoi de donnes. Les informations sont annexes l'URL de la page demande et communiques au serveur. Lorsque vous utilisez des variables d'URL, la chane de la requte contient une ou plusieurs paires nom-valeur associes aux champs du formulaire. Ces paires nom-valeur sont annexes l'URL. Les paramtres de formulaire permettent de stocker les informations rcupres dans la requte HTTP d'une page Web. Si vous crez un formulaire utilisant la mthode POST, les donnes envoyes par le formulaire sont transmises au serveur. Avant de commencer, vrifiez que vous avez transmis un paramtre de formulaire au serveur.
Voir aussi
Paramtres d'URL la page 675 Dfinition de paramtres de formulaire la page 586
version prliminaire
A propos des variables de session

Les variables de session permettent de stocker et d'afficher des informations conserves pendant toute la dure de la visite (ou session) de l'utilisateur. Le serveur cre un objet de session diffrent pour chaque utilisateur et le conserve pendant une priode dfinie ou jusqu' ce qu'il soit explicitement clos. Comme les variables de session sont conserves pendant toute la session de l'utilisateur, mme lorsque celui-ci passe d'une page l'autre dans le site Web, elles conviennent parfaitement au stockage des prfrences de l'utilisateur. Les variables de session peuvent galement tre utilises pour insrer une valeur dans le code HTML de la page, attribuer une valeur une variable locale ou fournir une valeur permettant d'valuer une expression conditionnelle. Avant de dfinir des variables de session pour une page, vous devez les crer dans le code source. Aprs avoir cr une variable de session dans le code source de l'application Web, vous pouvez utiliser Dreamweaver pour rcuprer sa valeur et l'utiliser dans une page Web.
Fonctionnement des variables de session

Les variables de session stockent des informations (trs souvent des paramtres de formulaire ou d'URL envoys par les utilisateurs) et les rendent accessibles toutes les pages de l'application pendant la dure de la visite d'un utilisateur. Ainsi, lorsqu'un utilisateur se connecte un portail Web lui donnant accs une messagerie, des cours boursiers, des bulletins mto et des dossiers d'actualit, l'application Web stocke les informations de connexion dans une variable de session qui identifie l'utilisateur dans toutes les pages du site. Cela permet l'utilisateur de ne voir que le type de contenu qu'il a slectionn pendant qu'il parcourt le site. Les variables de session peuvent galement proposer un mcanisme de scurit en mettant fin la session d'un utilisateur si le compte reste inactif pendant un certain temps. Cette mthode prsente aussi l'avantage de librer les ressources de traitement et la mmoire du serveur lorsque les utilisateurs oublient de se dconnecter d'un site Web. Les variables de session stockent les informations pendant toute la dure de la session d'un utilisateur. La session commence lorsque l'utilisateur ouvre une page dans l'application et se termine lorsqu'il n'ouvre pas d'autre page dans l'application pendant un laps de temps donn ou lorsqu'il met explicitement fin la session (en gnral, en cliquant sur un lien de dconnexion). Tant qu'elle existe, la session est spcifique un utilisateur donn ; chaque utilisateur dispose donc d'une session qui lui est propre. Faites appel aux variables de session pour stocker des informations auxquelles chaque page de l'application Web doit pouvoir accder. Ces informations peuvent aller du nom de l'utilisateur ses prfrences pour la taille des polices l'cran, en passant par un indicateur signalant la russite ou l'chec de sa connexion. Les variables de session sont galement souvent utilises pour assurer le suivi d'un comptage cumulatif, tel que le nombre de questions auxquelles un utilisateur a rpondu correctement jusqu' prsent dans un quiz en ligne ou les produits qu'il a slectionns dans un catalogue en ligne. Les variables de session ne peuvent fonctionner que si le navigateur de l'utilisateur est configur pour accepter les cookies. Le serveur cre un numro d'ID de session qui permet l'identification univoque de l'utilisateur lors de l'initialisation de la premire session, puis envoie au navigateur de l'utilisateur un cookie contenant ce numro d'ID. Lorsque l'utilisateur demande une nouvelle page situe sur le serveur, celui-ci lit le cookie dans le navigateur pour identifier l'utilisateur et rcuprer ses variables de session personnelles, stockes en mmoire.
Collecte, stockage et rcupration d'informations dans des variables de session

Avant de crer une variable de session, vous devez commencer par obtenir les informations stocker, puis les envoyer au serveur pour stockage. Vous pouvez recueillir et envoyer des informations au serveur l'aide de formulaires HTML ou de liens hypertexte contenant des paramtres d'URL. Vous pouvez galement obtenir des informations partir d'une base de donnes, des cookies stocks dans l'ordinateur d'un utilisateur ou des en-ttes HTTP envoys par son navigateur avec une demande de page.
version prliminaire
Un catalogue de produits utilisant des paramtres d'URL figs dans le code et crs l'aide d'un lien pour renvoyer des informations sur les produits au serveur afin qu'elles soient stockes dans une variable de session est un exemple typique de stockage de paramtres d'URL dans les variables de session. Quand un utilisateur clique sur le lien Add to shopping cart (Ajouter au panier), l'ID du produit est stocke dans une variable de session pendant que l'utilisateur poursuit ses achats. Lorsqu'il passe la page de paiement, l'ID du produit stocke dans la variable de session est rcupre. Un sondage reposant sur un formulaire est un exemple typique de page stockant les paramtres de formulaire dans les variables de session. Le formulaire renvoie l'information slectionne au serveur, o une page d'application note le sondage et stocke les rponses dans une variable de session, afin, par exemple, de les transmettre une application qui regroupe les rponses de toutes les personnes ayant rpondu au sondage. Il est galement possible que les informations soient stockes dans une base de donnes pour tre utilises ultrieurement. Une fois que vous avez envoy les informations au serveur, vous pouvez les stocker dans des variables de session en ajoutant la page spcifie par le paramtre de formulaire ou d'URL le code adapt votre modle de serveur. Appele page de destination, cette page est spcifie soit dans l'attribut action du formulaire HTML, soit dans l'attribut href du lien hypertexte situ dans la premire page. Aprs avoir stock une valeur dans une variable de session, vous pouvez utiliser Dreamweaver pour la rcuprer et l'utiliser dans une application Web. Aprs avoir dfini la variable de session dans Dreamweaver, vous pouvez en insrer la valeur dans une page. La syntaxe HTML de chaque attribut se prsente comme suit :
<form action="destination.html" method="get" name="myform"> </form> <param name="href"value="destination.html">
Le choix de la technologie serveur et de la mthode d'obtention des informations dtermine le code utilis pour stocker les informations dans une variable de session. La syntaxe de base de chaque technologie serveur se prsente comme suit : ColdFusion
<CFSET session.variable_name = value>
ASP
<% Session("variable_name") = value %>
L'expression value correspond en gnral une expression de serveur telle que Request.Form("lastname"). Ainsi, si vous utilisez un paramtre d'URL appel product (ou un formulaire HTML avec la mthode GET et un champ de texte appel product) pour recueillir des informations, les instructions suivantes stockent les informations dans une variable de session appele prodID : ColdFusion
<CFSET session.prodID = url.product>
ASP
<% Session("prodID") = Request.QueryString("product") %>
Si vous utilisez un formulaire HTML avec la mthode post et un champ de texte appel txtProduct pour recueillir les informations, les instructions suivantes stockent alors ces informations dans la variable de session : ColdFusion
<CFSET session.prodID = form.txtProduct>
version prliminaire
ASP
<% Session("prodID") = Request.Form("txtProduct") %>
Exemple d'informations stockes dans des variables de session

Vous travaillez sur un site destin un vaste public de retraits. Dans Dreamweaver, ajoutez deux liens sur la page d'accueil du site pour que les utilisateurs puissent modifier la taille du texte affich. Si l'utilisateur souhaite un affichage en caractres plus gros pour un texte plus facile lire, il lui suffit de cliquer sur un lien ; s'il souhaite un texte de taille standard, il clique sur un autre lien.
Chaque lien comporte un paramtre d'URL appel fontsize. Il envoie au serveur la prfrence de texte de l'utilisateur, comme le montre l'exemple suivant, spcifique Adobe ColdFusion :
<a href="resort.cfm?fontsize=large">Larger Text</a><br> <a href="resort.cfm?fontsize=small">Normal Text</a>
Stockez la prfrence de texte de l'utilisateur dans une variable de session et de l'utiliser afin de dfinir la taille de police utiliser dans chaque page demande par l'utilisateur. En haut de la page de destination, saisissez le code suivant pour crer une session appele font_pref qui stocke la prfrence de l'utilisateur pour la taille de police. ColdFusion
<CFSET session.font_pref = url.fontsize>
ASP
<% Session("font_pref") = Request.QueryString("fontsize") %>
Lorsque l'utilisateur clique sur le lien hypertexte, la page envoie la page de destination la prfrence de texte de l'utilisateur dans un paramtre d'URL. Le code de la page de destination stocke le paramtre d'URL dans la variable de session font_pref. Pendant la dure de la session de l'utilisateur, toutes les pages de l'application rcuprent cette valeur et affichent la taille de police slectionne.
Voir aussi
Ajout de contenu dynamique dans les pages la page 593 Dfinition de variables de session la page 586
version prliminaire
Variables d'application d'ASP et de ColdFusion

Dans ASP et ColdFusion, les variables d'application permettent de mmoriser et d'afficher des informations conserves pendant toute la dure d'utilisation de l'application, quel que soit l'utilisateur. La dure d'utilisation de l'application commence ds que le premier utilisateur demande une page dans l'application et se termine avec l'arrt du serveur Web. (une application regroupe tous les fichiers se trouvant dans un rpertoire virtuel et ses sousrpertoires). Les variables d'application tant conserves pendant toute la dure d'utilisation de l'application, quel que soit l'utilisateur, elles conviennent parfaitement au stockage des informations ncessaires tous les utilisateurs, telles que l'heure et la date courantes. La valeur de la variable d'application est dfinie dans le code de l'application.
Variables de serveur ASP

Vous pouvez dfinir les variables de serveur ASP suivantes comme sources de contenu dynamique : Request.Cookie, Request.QueryString, Request.Form, Request.ServerVariables et Request.ClientCertificates.
Voir aussi
Dfinition de variables de serveur la page 588
Variables de serveur ColdFusion

Vous pouvez dfinir les variables de serveur ColdFusion suivantes :
Variables client Associent des donnes un client spcifique. Elles conservent l'tat de l'application pendant que
l'utilisateur passe d'une page l'autre et d'une session l'autre dans l'application. Conserver l'tat signifie conserver les informations d'une page (ou session) sur la suivante, de faon ce que l'application se souvienne de l'utilisateur et de ses prcdents choix et prfrences.
Variables cookie Accdent aux cookies transmis au serveur par le navigateur. Variables CGI Fournissent des informations sur le serveur excutant ColdFusion et sur le navigateur l'origine d'une
demande de page, ainsi que d'autres informations sur l'environnement de traitement.

Variables de serveur Sont accessibles tous les clients et toutes les applications du serveur. Elles sont conserves
jusqu' l'arrt du serveur.

Variables locales Cres l'aide de la balise CFSET ou CFPARAM dans une page ColdFusion.
Voir aussi
Dfinition de variables de serveur la page 588
Panneaux de contenu dynamique

Panneau Liaisons
Le panneau Liaisons vous permet de dfinir et de modifier des sources de contenu dynamique, d'ajouter du contenu dynamique une page et d'appliquer des formats de donnes du texte dynamique. Ce panneau permet d'effectuer les oprations suivantes :
Dfinition de sources de contenu dynamique la page 578
version prliminaire
Ajout de contenu dynamique dans les pages la page 593 Modification ou suppression de sources de contenu la page 592 Utilisation de formats de donnes prdfinis la page 607 Association de sources de donnes XML la page 516 Affichage des donnes XML dans des pages XSLT la page 516 Paramtres d'URL la page 675 Dfinition de variables de session la page 586 Dfinition de variables d'application dans ASP et ColdFusion la page 587 Dfinition de variables de serveur la page 588 Mise en mmoire cache de sources de contenu la page 592 Copie d'un jeu d'enregistrements d'une page vers une autre la page 592 Cration d'attributs HTML dynamiques la page 595
Panneau Comportements de serveur

Ce panneau vous permet d'ajouter les comportements de serveur Dreamweaver sur une page, de les modifier et d'en crer de nouveaux. Ce panneau permet d'effectuer les oprations suivantes :
Affichage des enregistrements de base de donnes la page 599 Dfinition de sources de contenu dynamique la page 578 Cration de pages principale et de dtails en une seule opration la page 628 Cration de pages de recherche et de rsultats la page 629 Cration d'une page d'insertion d'enregistrement la page 636 Cration de pages de mise jour d'enregistrements la page 640 Cration de pages de suppression d'enregistrements la page 645 Cration d'une page accs restreint la page 663 Cration d'une page d'enregistrement la page 658 Cration d'une page d'ouverture de session la page 661 Cration d'une page accs restreint la page 663 Ajout d'une procdure stocke (ColdFusion) la page 656 Suppression de contenu dynamique la page 597 Ajout de comportements de serveur personnaliss la page 610
Panneau Bases de donnes

Le panneau Bases de donnes vous permet de crer des connexions de base de donnes, d'inspecter les bases de donnes et d'insrer un code de base de donnes dans vos pages. Ce panneau vous permet de visualiser votre base de donnes et de vous y connecter :
Affichage de votre base de donnes dans Dreamweaver la page 567
version prliminaire
Connexions aux bases de donnes pour les dveloppeurs ColdFusion la page 548 Connexions aux bases de donnes pour les dveloppeurs ASP la page 550 Connexions aux bases de donnes pour les dveloppeurs PHP la page 557
Panneau Composants
Le panneau Composants vous permet de crer et d'inspecter les composants et d'insrer un code de composant dans vos pages. Remarque : Ce panneau ne s'ouvre pas en mode Cration. Ce panneau permet d'effectuer les oprations suivantes :
Utilisation de composants ColdFusion la page 666
Dfinition de sources de contenu dynamique

Dfinition un jeu d'enregistrements sans rdiger d'instructions SQL
Vous pouvez crer un jeu d'enregistrements sans avoir entrer d'instructions SQL manuellement.
1 Dans la fentre de document, ouvrez la page devant utiliser le jeu d'enregistrements. 2 Choisissez Fentre > Liaisons pour afficher le panneau Liaisons. 3 Dans le panneau Liaisons, cliquez sur le bouton Plus (+) et choisissez Jeu d'enregistrements (Requte) dans le menu
droulant. La bote de dialogue Jeu d'enregistrements simplifie s'affiche. Si vous dveloppez un site ColdFusion, la bote de dialogue Jeu d'enregistrements qui s'affiche est lgrement diffrente. (Si la bote de dialogue Jeu d'enregistrements avance s'affiche, cliquez sur le bouton Simple pour ouvrir sa version simplifie.)
4 Compltez les options de la bote de dialogue Jeu d'enregistrements pour votre type de document.
Pour obtenir des instructions, consultez les rubriques ci-dessous.

5 Cliquez sur le bouton Tester pour excuter la requte et vrifier qu'elle rcupre les informations attendues.
Si vous avez dfini un filtre qui utilise les paramtres saisis par l'utilisateur, saisissez une valeur dans la zone Valeur test et cliquez sur OK. Si la cration d'une instance du jeu d'enregistrements aboutit, une table contenant les donnes extraites du jeu d'enregistrements s'affiche.
6 Cliquez sur OK pour ajouter le jeu d'enregistrements la liste des sources de contenu disponibles du panneau
Liaisons.
Options de la bote de dialogue Jeu d'enregistrements simplifie (PHP, ASP)

1 Dans la zone Nom, saisissez le nom du jeu d'enregistrements.
Il est d'usage d'ajouter le prfixe rs aux noms des jeux d'enregistrements, afin de les distinguer des autres noms d'objet dans le code, par exemple : rsPressReleases. Les noms des jeux d'enregistrements ne peuvent contenir que des lettres, des chiffres et des caractres de soulignement (_). Ils ne doivent pas comporter d'espaces ni de caractres spciaux.
2 Slectionnez une connexion dans le menu droulant Connexion.
version prliminaire
Si aucune connexion n'apparat dans la liste, cliquez sur Dfinir pour en crer une.
3 Dans le menu droulant Table, slectionnez la table de base de donnes qui fournira des donnes au jeu
d'enregistrements. Ce menu droulant rpertorie toutes les tables de la base de donnes spcifie.
4 Pour inclure un sous-ensemble des colonnes de la table dans le jeu d'enregistrements, cliquez sur Slectionnes,
puis cliquez sur les colonnes souhaites tout en maintenant la touche Ctrl (Windows) ou Commande (Macintosh) enfonce.
5 Pour limiter le nombre d'enregistrements renvoys depuis la table, compltez la section Filtre :
Dans le premier menu droulant, slectionnez un champ de la table comparer la valeur de rfrence dfinie. Dans le deuxime menu droulant, slectionnez une expression conditionnelle pour comparer la valeur
slectionne dans chaque enregistrement la valeur de rfrence.
Dans le troisime menu droulant, slectionnez Valeur entre. Dans la zone, saisissez la valeur test.
Si la valeur indique dans un enregistrement rpond aux conditions de filtrage, l'enregistrement est inclus dans le jeu d'enregistrements.
6 (Facultatif) Pour trier les enregistrements, slectionnez une colonne de tri, puis indiquez si les enregistrements
doivent tre tris dans l'ordre croissant (1, 2, 3... ou A, B, C...) ou dcroissant.
7 Cliquez sur Tester pour vous connecter la base de donnes et crer une instance de la source de donnes, et cliquez
sur OK pour fermer la source de donnes. Un tableau rpertoriant les donnes renvoyes s'affiche. Chaque ligne contient un enregistrement et chaque colonne un champ de cet enregistrement.
8 Cliquez sur OK. Le jeu d'enregistrements que vous venez de dfinir s'affiche dans le panneau Liaisons.
Options de la bote de dialogue Jeu d'enregistrements simplifie (ColdFusion)

Dfinissez un jeu d'enregistrements pour les types de document ColdFusion comme source de contenu dynamique, sans qu'il soit ncessaire de rdiger manuellement des instructions SQL.
Il est d'usage d'ajouter le prfixe rs aux noms des jeux d'enregistrements afin de les distinguer des autres noms d'objet dans le code. Par exemple : rsPressReleases Les noms des jeux d'enregistrements ne peuvent contenir que des lettres, des chiffres et des caractres de soulignement (_). Ils ne doivent pas comporter d'espaces ni de caractres spciaux.
2 Si vous dfinissez un jeu d'enregistrements pour un composant ColdFusion (si un fichier CFC est ouvert dans
Dreamweaver), slectionnez une fonction CFC existante dans le menu droulant Fonction, ou cliquez sur le bouton Nouvelle fonction pour crer une fonction. Remarque : Le menu droulant Fonction nest disponible que si le document actuel est un fichier CFC, et si vous pouvez accder un ordinateur excutant ColdFusion MX 7 ou version ultrieure. Le jeu d'enregistrements sera dfini dans cette fonction.
3 Slectionnez une source de donnes dans le menu droulant Source de donnes.
Si le menu droulant ne contient aucune source de donnes, vous devez crer une source de donnes ColdFusion.
version prliminaire
4 Dans les zones Nom d'utilisateur et Mot de passe, tapez le nom d'utilisateur et le mot de passe permettant d'accder
au serveur d'application ColdFusion, le cas chant. Il se peut qu'un nom d'utilisateur et un mot de passe soient ncessaires pour accder aux sources de donnes dans ColdFusion. S'ils ne vous ont pas t communiqus, contactez l'administrateur ColdFusion de votre socit.
5 Dans le menu droulant Table, slectionnez la table de base de donnes qui fournira des donnes au jeu
d'enregistrements. Ce menu droulant rpertorie toutes les tables de la base de donnes spcifie.
6 Pour inclure un sous-ensemble des colonnes de la table dans le jeu d'enregistrements, cliquez sur Slectionnes,
puis cliquez sur les colonnes souhaites tout en maintenant la touche Ctrl (Windows) ou Commande (Macintosh) enfonce.
7 Pour limiter le nombre d'enregistrements renvoys depuis la table, compltez la section Filtre :
Dans le premier menu droulant, slectionnez un champ de la table comparer la valeur de rfrence dfinie. Dans le deuxime menu droulant, slectionnez une expression conditionnelle pour comparer la valeur
slectionne dans chaque enregistrement la valeur de rfrence.
Dans le troisime menu droulant, slectionnez Valeur entre. Dans la zone, saisissez la valeur test.
Si la valeur indique dans un enregistrement rpond aux conditions de filtrage, l'enregistrement est inclus dans le jeu d'enregistrements.
8 (Facultatif) Pour trier les enregistrements, slectionnez une colonne de tri, puis indiquez si les enregistrements
doivent tre tris dans l'ordre croissant (1, 2, 3... ou A, B, C...) ou dcroissant.
9 Cliquez sur Tester pour vous connecter la base de donnes et crer une instance de la source de donnes.
Un tableau rpertoriant les donnes renvoyes s'affiche. Chaque ligne contient un enregistrement et chaque colonne un champ de cet enregistrement. Cliquez sur OK pour fermer le jeu d'enregistrements test.
10 Cliquez sur OK. Le jeu d'enregistrements ColdFusion que vous venez de dfinir s'affiche dans le panneau Liaisons.
Rdaction d'instructions SQL en vue de la dfinition d'un jeu d'enregistrements avanc

Rdigez vos propres instructions SQL l'aide de la bote de dialogue Jeu d'enregistrements avance, ou crez une instruction SQL l'aide de l'arborescence Elments de base de donnes graphique.
1 Dans la fentre de document, ouvrez la page devant utiliser le jeu d'enregistrements. 2 Choisissez Fentre > Liaisons pour afficher le panneau Liaisons. 3 Dans le panneau Liaisons, cliquez sur le bouton Plus (+) et choisissez Jeu d'enregistrements (Requte) dans le menu
droulant. La bote de dialogue Jeu d'enregistrements avance s'affiche. Si vous dveloppez un site ColdFusion, la bote de dialogue Jeu d'enregistrements qui s'affiche est lgrement diffrente. (Si la bote de dialogue Jeu d'enregistrements simplifie s'affiche la place, cliquez sur le bouton Avanc pour en ouvrir la version avance.)
4 Dfinissez les options de la bote de dialogue Jeu d'enregistrements avance.
Pour obtenir des instructions, consultez les rubriques ci-dessous.

5 Cliquez sur le bouton Tester pour excuter la requte et vrifier qu'elle rcupre les informations attendues.
version prliminaire
Si vous avez dfini un filtre qui utilise les paramtres saisis par l'utilisateur, la bote de dialogue Valeur test s'affiche lorsque vous cliquez sur le bouton Tester. Saisissez une valeur dans la zone Valeur test et cliquez sur OK. Si la cration d'une instance du jeu d'enregistrements aboutit, une table contenant les donnes du jeu d'enregistrements s'affiche.
6 Cliquez sur OK pour ajouter le jeu d'enregistrements la liste des sources de contenu disponibles du panneau
Liaisons.
Voir aussi
Cration de requtes SQL l'aide de l'arborescence Elments de base de donnes la page 584 Connexions aux bases de donnes pour les dveloppeurs ASP la page 550 Connexions aux bases de donnes pour les dveloppeurs PHP la page 557 Dfinition de sources de contenu dynamique la page 578 Ajout d'une procdure stocke (ColdFusion) la page 656 Initiation SQL
Options de la bote de dialogue Jeu d'enregistrements avance (PHP, ASP)

Dfinissez un jeu d'enregistrements comme source de contenu dynamique en rdigeant une instruction SQL personnalise ou en crant une instruction SQL au moyen de l'arborescence graphique Elments de base de donnes.
Il est d'usage d'ajouter le prfixe rs aux noms des jeux d'enregistrements, afin de les distinguer des autres noms d'objet dans le code. Par exemple : rsPressRelease Les noms des jeux d'enregistrements ne peuvent contenir que des lettres, des chiffres et des caractres de soulignement (_). Ils ne doivent pas comporter d'espaces ni de caractres spciaux.
2 Slectionnez une connexion dans le menu droulant Connexion. 3 Saisissez une instruction SQL dans la zone de texte SQL ou utilisez l'arborescence graphique Elments de base de
donnes situe au bas de la bote de dialogue pour crer une instruction SQL partir du jeu d'enregistrements slectionn. Pour crer une instruction SQL l'aide de l'arborescence Elments de base de donnes, procdez comme suit :
Vrifiez que la zone de texte SQL est vierge. Dveloppez les branches de l'arborescence jusqu' ce que vous trouviez l'objet de base de donnes souhait, par
exemple une colonne de table ou une procdure stocke dans la base de donnes.
Slectionnez l'objet de base de donnes et cliquez sur l'un des boutons situs droite de l'arborescence.
Par exemple, si vous slectionnez une colonne de table, les boutons disponibles sont SELECT, WHERE et ORDER BY. Cliquez sur l'un de ces boutons pour insrer l'instruction associe dans l'instruction SQL. Vous pouvez galement utiliser une instruction SQL prdfinie issue d'une procdure stocke en slectionnant la procdure stocke dans l'arborescence Elments de base de donnes et en cliquant sur le bouton Procdure. Dreamweaver remplit automatiquement les zones SQL et Variable.
4 Si l'instruction SQL contient des variables, dfinissez leurs valeurs dans la zone Variables en cliquant sur le bouton
Plus (+) et en saisissant le nom de la variable, son type (entier, texte, date ou nombre virgule flottante), sa valeur par dfaut (celle que doit prendre la variable si aucune valeur d'excution n'est renvoye) et sa valeur d'excution.
version prliminaire
Remarque : Lorsque vous employez des variables dans une instruction SQL dans PHP, Dreamweaver ajoute automatiquement un signe dollar au dbut du nom de la variable. N'en ajoutez pas un manuellement (tapez donc nomcolonne et pas $nomcolonne ). Si l'instruction SQL contient des variables, assurez-vous que la colonne Valeur par dfaut de la section Variables contient des valeurs test correctes. La valeur d'excution correspond gnralement un paramtre d'URL ou de formulaire saisi par l'utilisateur dans un champ de formulaire HTML. Paramtres d'URL dans la colonne Valeur d'excution :
Modle de serveur ASP PHP Expression de la valeur d'excution dans le cas d'un paramtre d'URL Request.QueryString(formFieldName) $_GET['formFieldName']
Paramtres de formulaire dans la colonne Valeur d'excution.

Modle de serveur ASP PHP Expression de la valeur d'excution dans le cas d'un paramtre de formulaire Request.Form(formFieldName) $_POST['formFieldName']
5 Cliquez sur Tester pour vous connecter la base de donnes et crer une instance du jeu d'enregistrements.
Si l'instruction SQL contient des variables, vrifiez que la colonne Valeur par dfaut de la section Variables contient des valeurs test correctes avant de cliquer sur Tester. Un tableau rpertoriant les donnes de votre jeu d'enregistrements s'affiche alors. Chaque ligne contient un enregistrement et chaque colonne un champ de cet enregistrement. Cliquez sur OK pour effacer le jeu.
6 Si le rsultat vous convient, cliquez sur OK.
Options de la bote de dialogue Jeu d'enregistrements avance (ColdFusion)

La bote de dialogue Jeu d'enregistrements avance vous permet de rdiger des requtes SQL personnalises ou de crer des requtes SQL au moyen de l'interface pointer-cliquer de l'arborescence Elments de base de donnes.
Il est d'usage d'ajouter le prfixe rs aux noms des jeux d'enregistrements afin de les distinguer des autres noms d'objet dans le code. Par exemple : rsPressReleases Les noms des jeux d'enregistrements ne peuvent contenir que des lettres, des chiffres et des caractres de soulignement (_). Ils ne doivent pas comporter d'espaces ni de caractres spciaux. Si vous dfinissez un jeu d'enregistrements pour un composant ColdFusion (si un fichier CFC est ouvert dans Dreamweaver), slectionnez une fonction CFC existante dans le menu droulant Fonction, ou cliquez sur le bouton Nouvelle fonction pour crer une fonction. Remarque : Le menu droulant Fonction nest disponible que si le document actuel est un fichier CFC, et si vous pouvez accder un ordinateur excutant ColdFusion MX 7 ou version ultrieure. Le jeu d'enregistrements sera dfini dans cette fonction.
2 Slectionnez une source de donnes dans le menu droulant Source de donnes.
version prliminaire
Si le menu droulant ne contient aucune source de donnes, vous devez au pralable crer une source de donnes ColdFusion.
3 Dans les zones Nom d'utilisateur et Mot de passe, tapez le nom d'utilisateur et le mot de passe permettant d'accder
au serveur d'application ColdFusion, le cas chant. Il se peut qu'un nom d'utilisateur et un mot de passe soient ncessaires pour accder aux sources de donnes dans ColdFusion. S'ils ne vous ont pas t communiqus, contactez l'administrateur ColdFusion de votre socit.
4 Saisissez une instruction SQL dans la zone de texte SQL ou utilisez l'arborescence graphique Elments de base de
donnes situe au bas de la bote de dialogue pour crer une instruction SQL partir du jeu d'enregistrements slectionn.
5 (Facultatif) Pour crer une instruction SQL l'aide de l'arborescence Elments de base de donnes, procdez
comme suit :
Vrifiez que la zone de texte SQL est vierge. Dveloppez les branches de l'arborescence jusqu' ce que vous trouviez l'objet souhait, par exemple une colonne
de table.
Slectionnez l'objet de base de donnes et cliquez sur l'un des boutons situs droite de l'arborescence.
Par exemple, si vous slectionnez une colonne de table, les boutons disponibles sont SELECT, WHERE et ORDER BY. Cliquez sur l'un de ces boutons pour insrer l'instruction associe dans l'instruction SQL. Si l'instruction SQL contient des paramtres, dfinissez leurs valeurs dans la zone Paramtres en cliquant sur le bouton Plus (+) et en saisissant le nom du paramtre et sa valeur par dfaut (celle que doit prendre le paramtre si aucune valeur d'excution n'est renvoye). Si l'instruction SQL contient des paramtres, vrifiez que la colonne Valeur par dfaut de la zone Paramtres contient des valeurs test correctes. Les paramtres de la page vous permettent d'indiquer les valeurs par dfaut des rfrences aux valeurs d'excution contenues dans vos instructions SQL. Par exemple, l'instruction SQL suivante slectionne un enregistrement d'une base de donnes rpertoriant les employs d'une entreprise suivant la valeur du matricule de l'employ. Vous pouvez attribuer une valeur par dfaut ce paramtre pour vous assurer qu'une valeur d'excution sera toujours renvoye. Dans l'exemple suivant, FormFieldName dsigne un champ de formulaire dans lequel les utilisateurs saisissent leur matricule :
SELECT * FROM Employees WHERE EmpID = + (Request.Form(#FormFieldName#))
La bote de dialogue Add Page Parameters (Ajouter des paramtres de page) contiendrait alors une paire nom-valeur semblable celle prsente ci-dessous :
Nom FormFieldName Valeurs par dfaut
0001
La valeur d'excution correspond gnralement un paramtre d'URL ou de formulaire saisi par l'utilisateur dans un champ de formulaire HTML.
Si l'instruction SQL contient des rfrences des valeurs d'excution, vrifiez que la colonne Valeur par dfaut du champ Paramtres de la page contient des valeurs test correctes avant de cliquer sur Tester. Un tableau rpertoriant les donnes de votre jeu d'enregistrements s'affiche alors. Chaque ligne contient un enregistrement et chaque colonne un champ de cet enregistrement. Cliquez sur OK pour effacer le jeu.
version prliminaire
7 Si le rsultat vous convient, cliquez sur OK.
Dfinition de paramtres dans une instruction SQL (ColdFusion)

Dfinissez des paramtres dans une instruction SQL ; la valeur par dfaut est celle attribue au paramtre lorsque aucune valeur d'excution n'est renvoye.
1 Slectionnez un paramtre dans le menu droulant Nom. 2 Dans la zone Paramtre par dfaut, saisissez la valeur par dfaut que vous souhaitez attribuer au paramtre, et
cliquez sur OK.
Dfinition de paramtres dans une instruction SQL (PHP)

Dfinissez des paramtres dans une instruction SQL ; la valeur par dfaut est celle attribue au paramtre lorsque aucune valeur d'excution n'est renvoye.
1 Entrez un nom de paramtre dans la zone Nom. 2 Dans la zone Paramtre par dfaut, saisissez la valeur par dfaut que vous souhaitez attribuer au paramtre. 3 Tapez une valeur d'excution dans la zone Valeur d'excution puis sur OK.
Cration de requtes SQL l'aide de l'arborescence Elments de base de donnes

Au lieu de saisir manuellement des instructions SQL dans la zone SQL, vous pouvez utiliser l'interface pointer-cliquer de l'arborescence Elments de base de donnes pour crer des requtes complexes SQL. L'arborescence Elments de base de donnes permet de slectionner des objets de base de donnes et de les lier au moyen des instructions SQL SELECT, WHERE et ORDER BY. Aprs avoir cr une requte SQL, vous pouvez dfinir des variables dans la section Variables de la bote de dialogue. Les deux exemples suivants prsentent deux instructions SQL et dcrivent les tapes de cration de ces instructions l'aide de l'arborescence Elments de base de donnes de la bote de dialogue Jeu d'enregistrements avance.
Exemple : Slection d'une table

Dans cet exemple, la requte slectionne l'intgralit de la table Employees. L'instruction SQL dfinissant la requte se prsente de la faon suivante :
SELECT * FROM Employees
Pour crer cette requte, procdez comme suit.

1 Dveloppez la branche Tables pour afficher toutes les tables de la base de donnes slectionne. 2 Slectionnez la table Employees. 3 Cliquez sur le bouton Select. 4 Cliquez sur OK pour ajouter le jeu d'enregistrements au panneau Liaisons.
Exemple : Slection de lignes spcifiques d'une table et classement des rsultats

Dans l'exemple suivant, la requte slectionne deux lignes de la table Employees, puis slectionne le type de tche (job) l'aide d'une variable que vous devez dfinir. Les rsultats sont ensuite classs par nom d'employ.
version prliminaire
SELECT emplNo, emplName FROM Employees WHERE emplJob = 'varJob' ORDER BY emplName
1 Dveloppez la branche Tables pour afficher toutes les tables de la base de donnes slectionne, puis dveloppez la
table Employees pour afficher les lignes individuelles de la table.

2 Gnrez l'instruction SQL en procdant de la faon suivante :
Slectionnez emplNo et cliquez sur le bouton Select. Slectionnez emplName et cliquez sur bouton Select. Slectionnez emplJob et cliquez sur le bouton Where. Slectionnez emplName et cliquez sur le bouton Order By.
3 Placez le point d'insertion aprs WHERE emplJob dans la zone de texte SQL et tapez ='varJob' (y compris le signe
gal).
4 Dfinissez la variable 'varJob' en cliquant sur le bouton Plus (+) de la zone Variables et en saisissant les valeurs
suivantes dans les colonnes Nom, Valeur par dfaut et Valeur d'excution : varJob, CLERK, Request("job").
5 Cliquez sur OK pour ajouter le jeu d'enregistrements au panneau Liaisons.
Dfinition de paramtres d'URL

Les paramtres d'URL permettent de stocker les informations saisies par les utilisateurs. Avant de commencer, vrifiez que vous avez transmis un paramtre de formulaire ou d'URL au serveur. Aprs avoir dfini la variable d'URL, vous pouvez utiliser sa valeur dans la page slectionne.
1 Dans la fentre de document, ouvrez la page devant utiliser la variable. 2 Choisissez Fentre > Liaisons pour afficher le panneau Liaisons. 3 Dans le panneau Liaisons, cliquez sur le bouton Plus (+) et choisissez l'une des options suivantes dans le menu
droulant :
Types de document ASP ColdFusion PHP Elment du menu du panneau Liaisons permettant de dfinir une variable d'URL Variable de demande > Request.QueryString Variable d'URL Variable d'URL
4 Dans la bote de dialogue Variable d'URL, tapez le nom de la variable d'URL dans la zone puis cliquez sur OK.
En gnral, le nom de la variable d'URL correspond au nom du champ du formulaire HTML ou de l'objet utilis pour obtenir sa valeur.
5 La variable d'URL s'affiche dans le panneau Liaisons.
Voir aussi
A propos des paramtres d'URL et de formulaire la page 572 Ajout de contenu dynamique dans les pages la page 593 Paramtres d'URL la page 675 Variables de serveur ColdFusion la page 576
version prliminaire
Dfinition de paramtres de formulaire

Les paramtres de formulaire permettent de stocker les informations rcupres dans la requte HTTP d'une page Web. Si vous crez un formulaire utilisant la mthode POST, les donnes envoyes par le formulaire sont transmises au serveur. Avant de commencer, vrifiez que vous avez transmis un paramtre de formulaire au serveur. Aprs avoir dfini le paramtre de formulaire comme source de contenu, vous pouvez l'utiliser dans une page.
1 Dans la fentre de document, ouvrez la page devant utiliser la variable. 2 Choisissez Fentre > Liaisons pour afficher le panneau Liaisons. 3 Dans le panneau Liaisons, cliquez sur le bouton Plus (+) et choisissez l'une des options suivantes dans le menu
droulant :
Types de document ASP ColdFusion PHP Elment du menu du panneau Liaisons permettant de dfinir une variable de formulaire Variable de demande > Request.Form Variable de formulaire Variable de formulaire
4 Dans la bote de dialogue Variable de formulaire, tapez le nom de la variable de formulaire et cliquez sur OK. En
gnral, le nom du paramtre de formulaire correspond au nom du champ du formulaire HTML ou de l'objet utilis pour obtenir sa valeur. Le paramtre de formulaire s'affiche dans le panneau Liaisons.
Voir aussi
A propos des sources de contenu dynamique la page 571 A propos des paramtres d'URL et de formulaire la page 572 Dfinition de variables de serveur la page 588
Dfinition de variables de session

Les variables de session permettent de mmoriser et d'afficher des informations conserves pendant toute la dure de la visite de l'utilisateur (ou session). Le serveur cre un objet de session diffrent pour chaque utilisateur et le conserve pendant une priode dfinie ou jusqu' ce qu'il soit explicitement clos. Avant de dfinir des variables de session pour une page, vous devez les crer dans le code source. Aprs avoir cr une variable de session dans le code source de l'application Web, vous pouvez utiliser Dreamweaver pour rcuprer sa valeur et l'utiliser dans une page Web.
1 Crez une variable de session dans le code source et attribuez-lui une valeur.
Dans l'exemple suivant de ColdFusion, une instance de session appele username est cre, laquelle est attribue la valeurCornelius :
version prliminaire
<CFSET session.username = Cornelius>
2 Choisissez Fentre > Liaisons pour afficher le panneau Liaisons. 3 Cliquez sur le bouton Plus (+) et choisissez Variable d'application dans le menu droulant. 4 Tapez le nom de la variable que vous avez dfinie dans le code source de l'application, et cliquez sur OK.
Voir aussi
Collecte d'informations auprs des utilisateurs la page 674 Fonctionnement des variables de session la page 573 Collecte, stockage et rcupration d'informations dans des variables de session la page 573
Dfinition de variables d'application dans ASP et ColdFusion

Dans ASP et ColdFusion, les variables d'application permettent de mmoriser et d'afficher des informations conserves pendant toute la dure d'utilisation de l'application, quel que soit l'utilisateur. Aprs avoir dfini une variable d'application, vous pouvez utiliser sa valeur dans une page. Remarque : Il n'existe pas d'objets de variable d'application dans PHP.
1 Ouvrez un type de document dynamique dans la fentre de document. 2 Choisissez Fentre > Liaisons pour afficher le panneau Liaisons. 3 Cliquez sur le bouton Plus (+) et choisissez Variable d'application dans le menu droulant. 4 Tapez le nom de la variable que vous avez dfinie dans le code source de l'application, et cliquez sur OK.
La variable d'application s'affiche dans le panneau Liaisons, sous l'icne Application.
Voir aussi
A propos de l'ajout de contenu dynamique la page 593 Dfinition de variables de serveur la page 588
version prliminaire
Utilisation d'une variable comme source de donnes pour un jeu d'enregistrements de ColdFusion
Lorsque vous dfinissez un jeu d'enregistrements pour une page dans le panneau Liaisons, Dreamweaver entre le nom de la source de donnes ColdFusion dans la balise cfquery sur la page. Pour plus de flexibilit, vous pouvez stocker un nom de source de donnes dans une variable et utiliser cette dernire dans la balise cfquery. Dreamweaver permet de dfinir visuellement une variable de ce type dans vos jeux d'enregistrements.
1 Assurez-vous qu'une page ColdFusion est active dans la fentre de document. 2 Dans le panneau Liaisons, cliquez sur le bouton Plus (+) et choisissez Variable du nom de source de donnes dans
le menu droulant. La bote de dialogue Variable du nom de source de donnes s'affiche.

3 Dfinissez une variable et cliquez sur OK. 4 Lorsque vous dfinissez le jeu d'enregistrements, slectionnez la variable comme source de donnes du jeu
d'enregistrements. Dans la bote de dialogue Jeu d'enregistrements, la variable s'affiche dans le menu droulant Source de donnes ainsi que les sources de donnes ColdFusion sur le serveur.
5 Compltez les options de la bote de dialogue Jeu d'enregistrements, puis cliquez sur OK. 6 Initialisez la variable.
Celle-ci n'est pas initialise automatiquement par Dreamweaver afin que vous puissiez le faire vous-mme votre convenance. Vous pouvez initialiser la variable dans le code de la page (avant la balise cfquery), dans un fichier inclus ou encore dans un autre fichier, comme variable d'application ou de session.
Dfinition de variables de serveur

Vous dfinissez des variables de serveur comme sources de contenu dynamique pouvant tre utilises dans une application Web. Les variables de serveur varient d'un type de document l'autre et comprennent notamment les variables de formulaire, les variables d'URL, les variables de session et les variables d'application. Les variables de serveur sont accessibles tous les clients qui accdent au serveur et toutes les applications excutes sur le serveur. Les variables de serveur sont conserves jusqu' l'arrt du serveur.
Voir aussi
Ajout de contenu dynamique dans les pages la page 593 Paramtres d'URL la page 675 Paramtres de formulaire HTML la page 674 Variables de serveur ColdFusion la page 576
Dfinition de variables de serveur ColdFusion

1 Ouvrez le panneau Liaisons (Fentre > Liaisons). Dans la bote de dialogue Variable de serveur, tapez le nom de la
variable de serveur et cliquez sur OK.

2 Cliquez sur le bouton Plus (+) et choisissez la variable de serveur dans le menu droulant. 3 Saisissez le nom de lobjet et cliquez sur OK. La variable de serveur ColdFusion s'affiche dans le panneau Liaisons.
Le tableau ci-dessous rpertorie les variables de serveur de ColdFusion intgres :
version prliminaire
Variable Server.ColdFusion.ProductName Server.ColdFusion.ProductVersion Server.ColdFusion.ProductLevel Server.ColdFusion.SerialNumber Server.OS.Name Server.OS.AdditionalInformation
Description Nom de produit de ColdFusion. Numro de version de ColdFusion. Edition de ColdFusion (dition entreprise ou professionnelle). Numro de srie de la version de ColdFusion installe. Nom du systme d'exploitation excut sur le serveur (Windows XP, Windows 2000, Linux) Informations supplmentaires sur le systme d'exploitation install (Service Packs, mises jour). Version du systme d'exploitation install. Numro de compilation du systme d'exploitation install.
Server.OS.Version Server.OS.BuildNumber
Dfinition d'une variable locale ColdFusion

Les variables locales sont cres au moyen de la balise CFSET ou CFPARAM dans une page ColdFusion. La variable locale dfinie s'affiche dans le panneau Liaisons.
Dans la bote de dialogue Variable locale, tapez le nom de la variable locale et cliquez sur OK.
Dfinition de variables de serveur ASP

Vous pouvez dfinir les variables de serveur ASP suivantes comme sources de contenu dynamique : Request.Cookie, Request.QueryString, Request.Form, Request.ServerVariables et Request.ClientCertificates.
1 Ouvrez le panneau Liaisons (Fentre > Liaisons). 2 Cliquez sur le bouton Plus (+) et choisissez Variable d'application dans le menu droulant. 3 Dans la bote de dialogue Variable de demande, slectionnez l'un des ensembles de demandes dans le menu
droulant Type.
L'ensemble QueryString Rcupre des informations annexes l'URL de la page mettrice, par exemple lorsque la page comprend un formulaire HTML utilisant la mthode GET. La chane de requte est compose d'une ou de plusieurs paires nom/valeur (par exemple, last=Smith, first=Winston) annexes l'URL avec un point d'interrogation (?). Si la chane de requte compte plusieurs paires nom/valeur, elles sont combines avec des esperluettes (&). L'ensemble Form Rcupre les informations de formulaire incluses dans le corps de la demande HTTP par un
formulaire HTML utilisant la mthode POST.

L'ensemble ServerVariables Rcupre les valeurs de variables d'environnement prdfinies. Cet ensemble contient une longue liste de variables, notamment CONTENT_LENGTH (longueur du contenu envoy dans la demande HTTP, qui permet de savoir si un formulaire est vierge) et HTTP_USER_AGENT (fournit des informations sur le navigateur de l'utilisateur).
Par exemple, Request.ServerVariables("HTTP_USER_AGENT") contient des informations sur le navigateur expditeur, comme Mozilla/4.07 [en] (WinNT; I), qui indique un navigateur Netscape Navigator 4.07. La liste complte des variables d'environnement de serveur ASP figure dans la documentation en ligne fournie avec Microsoft Personal Web Server (PWS) ou Internet Information Server (IIS).
L'ensemble Cookies Rcupre les valeurs des cookies envoys dans une demande HTTP. Par exemple, supposez que
la page lise un cookie appel readMe sur lordinateur de l'utilisateur. Sur le serveur, les valeurs du cookie sont enregistres dans la variable Request.Cookies("readMe").
version prliminaire
L'ensemble ClientCertificate Rcupre les zones de certification de la demande HTTP envoye par le navigateur. Les
zones de certification sont spcifies dans la norme X.509.

4 Indiquez quelle variable de l'ensemble vous souhaitez accder, et cliquez sur OK.
Par exemple, si vous souhaitez accder aux donnes contenues dans la

Request.ServerVariables("HTTP_USER_AGENT"), tapez l'argument HTTP_USER_AGENT. Si vous souhaitez accder
aux informations de la variable Request.Form("lastname"), tapez l'argument lastname. La variable de demande s'affiche dans le panneau Liaisons.
Dfinition de variables de serveur PHP

Dfinissez des variables de serveur comme source de contenu dynamique pour les types de document PHP. Les variables de serveur PHP s'affichent dans le panneau Liaisons.
1 Ouvrez le panneau Liaisons (Fentre > Liaisons). 2 Cliquez sur le bouton Plus (+) et choisissez la variable de serveur dans le menu droulant. 3 Dans la bote de dialogue Variable de demande, tapez le nom de la variable (par exemple REQUEST_METHOD),
puis cliquez sur OK. Pour plus d'informations, recherchez le mot cl $_SERVER dans la documentation de PHP.
Dfinition d'une variable client ColdFusion

Dfinissez une variable client ColdFusion comme source de contenu dynamique pour une page. Les variables de client ColdFusion que vous venez de dfinir s'affichent dans le panneau Liaisons.
Dans la bote de dialogue Variable client, tapez le nom de la variable client et cliquez sur OK.
Par exemple, pour accder aux donnes contenues dans la Client.LastVisit, tapez LastVisit. Les variables client sont des variables ajoutes au code pour associer des donnes un client spcifique. Elles conservent l'tat de l'application pendant que l'utilisateur passe d'une page l'autre et d'une session l'autre dans l'application. Il existe deux types de variables serveur : les variables intgres et les variables dfinies par l'utilisateur. Le tableau cidessous rpertorie les variables client ColdFusion intgres :
Variable Client.CFID Client.CFTOKEN Client.URLToken Description Identifiant incrmentiel attribu chacun des clients se connectant au serveur. Numro gnr alatoirement et permettant d'identifier un client spcifique de faon univoque. Combinaison de CFID et CFTOKEN devant tre transmise de modle en modle lorsque les cookies ne sont pas utiliss. Enregistre la date de la dernire visite effectue par un client. Nombre de demandes de pages lies un mme client (obtenu l'aide de CFID et CFTOKEN). Enregistre l'heure de la premire cration de CFID et CFTOKEN pour un client spcifique.
Client.LastVisit Client.HitCount Client.TimeCreated
Dfinition d'une variable cookie ColdFusion

Les variables cookie sont cres au niveau du code et permettent d'accder aux informations contenues dans les cookies transmis au serveur par un navigateur. La variable cookie dfinie s'affiche dans le panneau Liaisons.
Dans la bote de dialogue Variable cookie, tapez le nom de la variable client et cliquez sur OK.
version prliminaire
Dfinition d'une variable CGI ColdFusion

La variable CGI dfinie s'affiche dans le panneau Liaisons.
Dans la bote de dialogue Variable CGI, tapez le nom de la variable et cliquez sur OK.
Par exemple, si vous souhaitez accder aux donnes contenues dans la CGI.HTTP_REFERER , saisissez HTTP_REFERER. Le tableau ci-dessous rpertorie les variables CGI de ColdFusion les plus frquemment cres sur le serveur :
Variable SERVER_SOFTWARE Description Nom et version du logiciel du serveur d'informations rpondant la demande (et excutant la passerelle). Format : nom/version. Nom d'hte, alias DNS ou adresse IP du serveur tel qu'il/elle se prsente dans les URL d'appel. Rvision de la spcification CGI applique par le serveur. Format : CGI/rvision. Nom et rvision du protocole d'informations par lequel la demande a t transmise. Format : protocole/rvision. Numro du port auquel la demande a t envoye. Mthode utilise pour l'excution de la demande. Dans le cas de HTTP, il s'agit de Get, Head, Post, etc. Informations de chemin complmentaires, telles qu'elles sont fournies par le client. On accde aux scripts en utilisant leur nom de chemin virtuel suivi des informations complmentaires. Celles-ci sont envoyes en tant que PATH_INFO. Le serveur fournit une version traduite de PATH_INFO, rsultat de la conversion du chemin virtuel en chemin physique. Chemin virtuel vers le script en cours d'excution. Variable utilise pour les URL d'appel. Informations de requte qui suivent le point d'interrogation (?) dans l'URL rfrenant le script. Nom de l'hte l'origine de la demande. Si le serveur ne dispose pas de cette information, il dfinit REMOTE_ADDR mais pas REMOTE_HOST. Adresse IP de l'hte distant l'origine de la demande. Si le serveur prend en charge l'authentification de l'utilisateur et que le script est protg, cette variable correspond la mthode d'authentification spcifique au protocole utilise pour vrifier l'identit de l'utilisateur. Si le serveur prend en charge l'authentification de l'utilisateur et que le script est protg, cette variable correspond au nom saisi par l'utilisateur lors de l'authentification (disponible galement sous la forme AUTH_USER). Si le serveur HTTP prend en charge l'identification RFC 931, cette variable reoit comme valeur le nom de l'utilisateur distant rcupr du serveur. Utilisez cette variable uniquement pour la connexion. Dans le cas de requtes assorties d'informations, telles que HTTP POST et PUT, cette variable correspond au type de contenu des donnes. Longueur du contenu, tel qu'il a t fourni par le client.
SERVER_NAME GATEWAY_INTERFACE SERVER_PROTOCOL
SERVER_PORT REQUEST_METHOD PATH_INFO
PATH_TRANSLATED
SCRIPT_NAME QUERY_STRING REMOTE_HOST
REMOTE_ADDR AUTH_TYPE
REMOTE_USER AUTH_USER
REMOTE_IDENT
CONTENT_TYPE
CONTENT_LENGTH
Le tableau ci-dessous rpertorie les variables CGI les plus frquemment cres par le navigateur et transmises au serveur :
version prliminaire
Variable HTTP_REFERER HTTP_USER_AGENT
Description Document de rfrence. Il s'agit du document associ aux donnes de formulaire ou qui les envoie. Navigateur utilis par le client pour envoyer la demande. Format : logiciel/version bibliothque/version. Date de la dernire modification de la page. Cette variable est envoye suivant la configuration du navigateur, gnralement en rponse au serveur ayant envoy l'en-tte LAST_MODIFIED HTTP. Peut tre utilise pour tirer parti des possibilits de mise en mmoire cache au niveau du navigateur.
HTTP_IF_MODIFIED_SINCE
Mise en mmoire cache de sources de contenu

Vous pouvez stocker des sources de contenu dynamique dans une Design Note. Cette opration vous permet de travailler sur un site mme lorsque vous n'avez pas accs la base de donnes ou au serveur d'application contenant les sources de contenu dynamique. La mise en mmoire cache permet galement d'acclrer le processus de dveloppement puisqu'elle vite de se connecter en continu la base de donnes et au serveur d'application via le rseau.
Cliquez sur la touche flche dans le coin suprieur droit du panneau Liaisons et choisissez Cache dans le menu
droulant. Si vous modifiez l'une de vos sources de contenu, vous pouvez actualiser le cache en cliquant sur le bouton Actualiser (icne reprsentant une flche en forme de cercle), dans le coin suprieur droit du panneau Liaisons Agrandissez l'affichage si ce bouton n'apparat pas.
Modification ou suppression de sources de contenu

Vous pouvez modifier ou supprimer n'importe quelle source de contenu dynamique, autrement dit n'importe quelle source de contenu figurant dans le panneau Liaisons. La modification ou la suppression d'une source de contenu dans le panneau Liaisons ne change ni ne supprime les instances de cette source sur la page. Cela affecte uniquement son rle de source de contenu pour la page.
Modification d'une source de contenu dans le panneau Liaisons

1 Dans le panneau Liaisons (Fentre > Liaisons), double-cliquez sur le nom de la source de contenu modifier. 2 Procdez aux modifications dans la bote de dialogue qui s'affiche. 3 Si le rsultat vous convient, cliquez sur OK.
Suppression d'une source de contenu dans le panneau Liaisons

1 Slectionnez la source souhaite dans le panneau Liaisons (Fentre > Liaisons). 2 Cliquez sur le bouton Moins (-).
Copie d'un jeu d'enregistrements d'une page vers une autre

Vous pouvez copier un jeu d'enregistrements d'une page une autre dans un site dfini.
1 Slectionnez le jeu d'enregistrements dans le panneau Liaisons ou dans le panneau Comportements de serveur. 2 Cliquez sur le jeu d'enregistrements avec le bouton droit de la souris et choisissez Copier dans le menu droulant. 3 Ouvrez la page dans laquelle vous souhaitez coller le jeu d'enregistrements.
version prliminaire
4 Cliquez avec le bouton droit de la souris dans le panneau Liaisons ou sur la barre d'outils Comportements de
serveur, et choisissez Coller dans le menu droulant.
Voir aussi
A propos des sources de contenu dynamique la page 571 Modification ou suppression de sources de contenu la page 592
Ajout de contenu dynamique dans les pages

A propos de l'ajout de contenu dynamique
Aprs avoir dfini une ou plusieurs sources de contenu dynamique, vous pouvez les utiliser pour ajouter un contenu dynamique la page. Les sources de contenu peuvent tre une colonne dans un jeu d'enregistrements, une valeur envoye par un formulaire HTML, la valeur d'un objet de serveur, etc. Dans Dreamweaver, vous pouvez placer du contenu dynamique quasiment n'importe o dans une page Web ou dans son code source HTML. Il est possible de placer le contenu dynamique au niveau du point d'insertion, de remplacer une chane de texte ou d'insrer le contenu en tant qu'attribut HTML. Un contenu dynamique peut, par exemple, dfinir l'attribut src d'une image ou l'attribut value d'un champ de formulaire. Vous pouvez ajouter du contenu dynamique une page en slectionnant une source de contenu dans le panneau Liaisons. Dreamweaver insre alors dans le code source de la page un script ct serveur indiquant au serveur de transfrer les donnes de la source de contenu slectionne vers le code source HTML de la page lorsqu'un navigateur appelle la page. Il existe souvent diffrentes mthodes pour rendre dynamique un lment d'une page. Dans le cas d'une image, par exemple, vous pouvez utiliser le panneau Liaisons, l'inspecteur Proprits ou la commande Image du menu Insertion. Par dfaut, une page HTML ne peut afficher qu'un enregistrement la fois. Pour afficher les autres enregistrements du jeu, ajoutez un lien afin d'explorer les enregistrements un un ou crez une rgion rpte pour afficher plusieurs enregistrements sur une seule page.
Voir aussi
Dfinition de sources de contenu dynamique la page 578 Cration d'une barre de navigation de jeu d'enregistrements la page 600 Affichage de plusieurs rsultats d'un jeu d'enregistrements la page 603 Application d'lments typographiques et de mise en forme de page des donnes dynamiques la page 600 Utilisation de formats de donnes prdfinis la page 607
A propos du texte dynamique

Le texte dynamique adopte le formatage du texte initial ou du point d'insertion. Le contenu dynamique conserve ainsi le style de feuille de style en cascade (CSS, Cascading Style Sheet) du texte slectionn qu'il remplace. Vous pouvez galement ajouter ou modifier le format du texte d'un contenu dynamique l'aide des outils de formatage de texte de Dreamweaver.
version prliminaire
Vous pouvez galement appliquer un format de donnes un texte dynamique. Par exemple, si vos donnes sont des dates, vous pouvez dterminer un format spcifique tel que 04/17/00 pour les visiteurs amricains ou 17/04/00 pour les visiteurs franais
Cration de texte dynamique

Vous pouvez substituer un texte dynamique un texte existant ou le placer un point d'insertion donn de la page.
Voir aussi
A propos des jeux d'enregistrements la page 572 Utilisation de formats de donnes prdfinis la page 607
Ajout de texte dynamique

1 En mode Cration, slectionnez du texte sur la page ou cliquez l'endroit o insrer le texte dynamique. 2 Slectionnez une source de contenu dans le panneau Liaisons (Fentre > Liaisons). Si vous slectionnez un jeu
d'enregistrements, indiquez la colonne de votre choix dans le jeu d'enregistrements. Cette source doit contenir du texte brut (texte ASCII), ce qui inclut HTML. Si aucune source de contenu n'apparat dans la liste ou si aucune des sources disponibles ne correspond vos besoins, cliquez sur le bouton Plus (+) pour dfinir une nouvelle source de contenu
3 (Facultatif) Slectionnez un format de donnes pour le texte. 4 Cliquez sur Insertion ou faites glisser la source de contenu sur la page.
Un espace rserv pour contenu dynamique s'affiche. (tout texte slectionn dans la page est remplac par l'espace rserv). La syntaxe de l'espace rserv pour le contenu d'un jeu d'enregistrements est {RecordsetName.ColumnName}, o Recordset est le nom du jeu d'enregistrements et ColumnName le nom de la colonne choisie dans ce jeu. Il arrive que la longueur de l'espace rserv d'un texte dynamique dforme la mise en page dans la fentre de document. Dans ce cas, utilisez des accolades vides pour reprsenter les espaces rservs, comme l'explique la section suivante.
Affichage d'espaces rservs pour le texte dynamique

1 Choisissez Edition > Prfrences > Elments invisibles (Windows) ou Dreamweaver > Prfrences > Elments
invisibles (Macintosh).
2 Dans le menu droulant Afficher le texte dynamique sous, choisissez { } et cliquez sur OK.
Cration d'images dynamiques

Vous pouvez ajouter des images dynamiques votre page. Supposons que vous conceviez une page qui affiche les articles d'une vente de charit. Chaque page doit contenir un texte descriptif, ainsi qu'une photo de l'article. La mise en forme gnrale de la page doit rester la mme pour chaque article, mais la photo (et le texte) peuvent changer.
1 Ouvrez la page en mode Cration (Affichage > Cration) et placez le point d'insertion l'endroit o l'image doit
apparatre sur la page.

2 Choisissez Insertion > Image.
La bote de dialogue Slectionnez la source de l'image s'affiche.

3 Cliquez sur l'option Sources de donnes (Windows) ou sur le bouton Source de donnes (Macintosh).
La liste des sources de contenu s'affiche.
version prliminaire
4 Slectionnez une source de contenu dans la liste, puis cliquez sur OK.
La source de donnes doit tre un jeu d'enregistrements qui contient les chemins d'accs de vos fichiers d'image. En fonction de la structure de fichiers de votre site, ces chemins peuvent tre absolus, relatifs au document ou relatifs la racine. Remarque : A l'heure actuelle, Dreamweaver ne prend pas en charge les images binaires stockes dans une base de donnes. Si aucun jeu d'enregistrements n'apparat dans la liste ou si aucun des jeux disponibles ne correspond vos besoins, dfinissez un nouveau jeu.
Voir aussi
Dfinition un jeu d'enregistrements sans rdiger d'instructions SQL la page 578
Cration d'attributs HTML dynamiques

Vous pouvez modifier l'apparence d'une page de manire dynamique en liant des attributs HTML aux donnes. Par exemple, modifiez l'image d'arrire-plan d'un tableau en liant l'attribut background de ce tableau au champ d'un jeu d'enregistrements. Vous pouvez lier des attributs HTML l'aide du panneau Liaisons ou de l'inspecteur Proprits.
Cration d'attributs HTML dynamiques avec le panneau Liaisons

1 Ouvrez le panneau Liaisons (Fentre > Liaisons). 2 Assurez-vous qu'il contient la source de donnes utiliser.
Cette source de contenu doit contenir les donnes appropries pour l'attribut HTML lier. Si aucune source de contenu n'apparat dans la liste ou si aucune des sources disponibles ne correspond vos besoins, cliquez sur le bouton Plus (+) pour dfinir une nouvelle source de donnes.
3 En mode Cration, slectionnez un objet HTML.
Par exemple, pour slectionner un tableau HTML, cliquez dedans, puis cliquez sur la balise <table> du slecteur de balises qui figure en bas gauche dans la fentre de document.
4 Dans la liste du panneau Liaisons, slectionnez une source de contenu. 5 Dans le champ Lier , slectionnez un attribut HTML dans le menu contextuel. 6 Cliquez sur Lier.
Lors de la prochaine excution de la page sur le serveur d'applications, la valeur de la source de donnes sera affecte l'attribut HTML.
Ajout d'attributs HTML dynamiques avec l'inspecteur Proprits

1 En mode Cration, slectionnez un objet HTML, puis ouvrez l'inspecteur Proprits (Fentre > Proprits).
Par exemple, pour slectionner un tableau HTML, cliquez dedans, puis cliquez sur la balise <table> du slecteur de balises qui figure en bas gauche dans la fentre de document.
2 La manire dont il faut lier une source de contenu dynamique l'attribut HTML dpend de l'endroit o ce dernier
est situ.
Si une icne de dossier est visible ct de l'attribut que vous souhaitez lier dans l'inspecteur Proprits, cliquez sur
l'icne du dossier afin d'ouvrir une bote de dialogue de slection de fichier, puis activez l'option Sources de donnes pour afficher la liste des sources de donnes.
version prliminaire
Si aucune icne de dossier n'apparat ct de l'attribut que vous souhaitez lier, cliquez sur l'onglet Liste (onglet du
bas) gauche de l'inspecteur. La liste de l'inspecteur Proprits s'affiche.
Si l'attribut lier n'apparat pas dans ce mode, cliquez sur le bouton Plus (+), puis tapez le nom de l'attribut ou
cliquez sur le petit bouton flch et slectionnez l'attribut dans le menu droulant.
3 Pour rendre la valeur de l'attribut dynamique, cliquez sur l'attribut, puis sur l'icne reprsentant un clair ou sur
l'icne de dossier situe la fin de la ligne de l'attribut. Si vous cliquez sur l'icne reprsentant un clair, une liste de sources de donnes s'affiche. Si vous avez cliqu sur l'icne de dossier, une bote de dialogue affiche une slection de fichiers. Cliquez sur l'option Sources de donnes pour afficher la liste des sources de contenu.
4 Slectionnez une source de contenu dans la liste et cliquez sur OK.
Cette source de contenu doit comprendre les donnes appropries pour l'attribut HTML lier. Si aucune source de contenu n'apparat dans la liste ou si aucune des sources disponibles ne correspond vos besoins, dfinissez une nouvelle source. Lors de la prochaine excution de la page sur le serveur d'applications, la valeur de la source de donnes sera affecte l'attribut HTML.
Cration de paramtres d'objet (ActiveX, Flash, etc.) dynamiques

Vous pouvez rendre dynamiques les paramtres des plug-ins et des applets Java, ainsi que les paramtres des objets ActiveX, Flash, Shockwave, Director et Generator. Assurez-vous au pralable que les champs de votre jeu d'enregistrements contiennent des donnes appropries pour les paramtres d'objet que vous voulez lier.
1 En mode Cration, slectionnez un objet sur la page et ouvrez l'inspecteur Proprits (Fentre > Proprits). 2 Cliquez sur le bouton Paramtres. 3 Si votre paramtre ne s'affiche pas dans la liste, cliquez sur le bouton Plus (+), puis saisissez son nom dans la colonne
Paramtre.
4 Pour dterminer une valeur dynamique, cliquez sur la colonne Valeur du paramtre, puis sur l'icne reprsentant
un clair. La liste des sources de donnes s'affiche.

5 Slectionnez une source de donnes dans la liste, puis cliquez sur OK.
Cette source doit contenir des donnes appropries pour le paramtre d'objet que vous voulez lier. Si aucune source de donnes n'apparat dans la liste ou si aucune des sources disponibles ne correspond vos besoins, dfinissez une nouvelle source.
Voir aussi
version prliminaire
Modification d'un contenu dynamique

A propos du contenu dynamique
Vous pouvez changer le contenu dynamique de votre page en modifiant le comportement de serveur qui fournit ce contenu. Vous pouvez, par exemple, modifier le comportement de serveur d'un jeu d'enregistrements pour fournir plus d'enregistrements votre page. Le contenu dynamique de la page est rpertori dans le panneau Comportements de serveur. Si vous ajoutez, par exemple, un jeu d'enregistrements votre page, le panneau Comportements de serveur l'affiche sous forme de liste :
Recordset(myRecordset)
Si vous ajoutez un autre jeu d'enregistrements votre page, le panneau Comportements de serveur les affiche tous deux sous forme de liste, comme suit :
Recordset(mySecondRecordset)Recordset(myRecordset)
Modification de contenu dynamique

1 Ouvrez le panneau Comportements de serveur (Fentre > Comportements de serveur). 2 Cliquez sur le bouton Plus (+) pour afficher les comportements de serveur, puis double-cliquez sur le
comportement de serveur dans le panneau. La bote de dialogue dans laquelle vous avez dfini la source de donnes d'origine s'ouvre.
3 Effectuez vos modifications dans cette bote de dialogue, puis cliquez sur OK.
Suppression de contenu dynamique

Aprs avoir ajout un contenu dynamique une page, vous pouvez le supprimer de l'une des faons suivantes :
Slectionnez le contenu dynamique de la page et appuyez sur Suppr. Slectionnez le contenu dynamique dans le panneau Comportements de serveur et cliquez sur le bouton moins(-).
Remarque : Cette opration supprime de la page le script ct serveur qui rcupre le contenu dynamique de la base de donnes, mais ne supprime pas les donnes dans la base.
Test de contenu dynamique

Vous pouvez afficher un aperu d'un contenu dynamique et de le modifier l'aide du mode En direct. Pendant que le contenu dynamique est affich, vous pouvez effectuer les oprations suivantes :
amliorer la prsentation de la page avec les outils de conception ; ajouter, modifier ou effacer un contenu dynamique ; ajouter, modifier ou effacer des comportements de serveur.
1 Cliquez sur le bouton Affichage en direct pour afficher le contenu dynamique. 2 Effectuez les modifications ncessaires dans la page. Vous devrez basculer entre le mode En direct et le mode
Cration ou Code pour apporter des modifications et observer leur effet.
version prliminaire
Voir aussi
Paramtres de formulaire HTML la page 674 Paramtres d'URL la page 675 Fonctionnement des variables de session la page 573
Autorisation de la modification de contenu dynamique par les utilisateurs d'Adobe Contribute

Lorsqu'un utilisateur de Contribute modifie une page comportant un contenu dynamique ou des lments invisibles (tels que des scripts ou des commentaires), Contribute affiche le contenu dynamique et les lments invisibles sous forme de marqueurs jaunes. Par dfaut, les utilisateurs de Contribute ne peuvent ni slectionner ni supprimer ces marqueurs. Pour que les utilisateurs de Contribute puissent slectionner et supprimer un contenu dynamique ou d'autres lments invisibles sur une page, vous pouvez modifier les paramtres du groupe d'autorisations en consquence. Normalement, les utilisateurs de Contribute ne peuvent en aucun cas modifier un contenu dynamique, mme s'ils sont autoriss le slectionner. Remarque : Grce certaines technologies de serveur, vous pouvez afficher du texte statique l'aide d'une fonction ou d'une balise de serveur. Pour permettre aux utilisateurs de Contribute de modifier le texte statique d'une page dynamique qui utilise une technologie de serveur de ce type, placez le texte statique en dehors des balises de serveur. Pour plus d'informations, voir Administration de Contribute.
1 Slectionnez Site > Administrer le site Contribute. 2 Si certaines options requises pour des raisons de compatibilit avec Contribute ne sont pas actives, une bote de
dialogue vous invitant activer ces options s'affiche. Cliquez sur OK pour activer ces options et la compatibilit avec Contribute.
3 Si ncessaire, tapez le mot de passe administrateur, puis cliquez sur OK.
La bote de dialogue Administration du site Web s'affiche.

4 Dans la catgorie Utilisateurs et rles, slectionnez un rle, puis cliquez sur le bouton Modifier les paramtres de
rle.
5 Slectionnez la catgorie Modification et dslectionnez l'option de protection des scripts et des formulaires. 6 Cliquez sur OK pour fermer la bote de dialogue Modification des paramtres. 7 Cliquez sur Fermer pour fermer la bote de dialogue Administration du site Web.
Voir aussi
Gestion des sites Contribute avec Dreamweaver la page 53 Cration d'un modle pour un site Contribute la page 411
Modification de jeux d'enregistrements l'aide de l'inspecteur Proprits

Utilisez l'inspecteur Proprits pour modifier le jeu d'enregistrements slectionn. Les options disponibles dpendent du modle de serveur utilis.
1 Ouvrez l'inspecteur Proprits (Fentre > Proprits), puis slectionnez le jeu d'enregistrements dans le panneau
Comportements de serveur (Fentre > Comportements de serveur).
version prliminaire
2 Modifiez les options votre convenance. Lorsque vous slectionnez une nouvelle option dans l'inspecteur,
Dreamweaver met la page jour.
Voir aussi
Modification de contenu dynamique la page 597
Affichage des enregistrements de base de donnes

A propos des enregistrements de base de donnes
Pour afficher des enregistrements de base de donnes, il faut rcuprer des informations stockes dans une source de contenu, telle qu'une base de donnes, et en effectuer le rendu dans une page Web. Dreamweaver offre de nombreuses mthodes d'affichage de contenu dynamique et propose plusieurs comportements de serveur intgrs. Ces derniers permettent d'amliorer la prsentation du contenu dynamique, de faciliter les recherches et de naviguer parmi les informations renvoyes par une base de donnes. Les bases de donnes et les autres sources de contenu dynamique permettent d'obtenir de meilleurs rsultats lors des oprations de recherche, de tri ou de consultation de volumes d'informations importants. L'utilisation d'une base de donnes pour stocker le contenu de sites Web est particulirement recommande lorsque vous souhaitez stocker des quantits importantes de donnes, puis les rcuprer pour les afficher d'une manire spcifique. Dreamweaver fournit diffrents outils et comportements prdfinis qui permettent de rcuprer et d'afficher efficacement les informations d'une base de donnes.
Comportements de serveur et lments de formatage

Les comportements de serveur et les lments de formatage proposs par Dreamweaver pour enrichir la prsentation de donnes dynamiques sont les suivants :
Formats Les formats permettent d'appliquer diffrents types de valeurs numriques, montaires, de date/heure et de pourcentage un texte dynamique.
Par exemple, si le prix d'un lment dans un jeu d'enregistrements est de 10,989, vous pouvez l'afficher sur votre page sous la forme 10,99 en choisissant le format Devise - 2 dcimales de Dreamweaver. Dans ce format, les nombres s'affichent avec deux chiffres aprs la virgule. Si le nombre a plus de deux chiffres aprs la virgule, il est arrondi au nombre le plus proche. Si le nombre est un entier, il est suivi d'une virgule et de deux zros.
Rgion rpte Ces comportements de serveur permettent d'afficher plusieurs lments renvoys par une requte de base de donnes et d'indiquer le nombre d'enregistrements afficher par page. Navigation de jeu d'enregistrements Ces comportements de serveur permettent d'insrer des lments de navigation dont les utilisateurs peuvent se servir pour passer au groupe d'enregistrements prcdent ou suivant renvoy par le jeu d'enregistrements. Supposons que vous choisissiez d'afficher dix enregistrements par page l'aide de l'objet de serveur Rgion rpte et que le jeu d'enregistrements renvoie 40 enregistrements ; vous pouvez alors parcourir les enregistrements par groupe de dix. Barre d'tat du jeu d'enregistrements Ces comportements de serveur permettent d'ajouter un compteur qui indique
aux utilisateurs la position dans laquelle ils se trouvent au sein d'un groupe d'enregistrements par rapport au nombre total d'enregistrements renvoys.
Afficher la rgion Ces comportements de serveur permettent d'afficher ou de masquer des lments de la page en fonction de la pertinence des enregistrements affichs. Par exemple, si un utilisateur consulte le dernier enregistrement d'un jeu, vous pouvez choisir de n'afficher que le lien Prcdent ; le lien Suivant est alors masqu.
version prliminaire
Application d'lments typographiques et de mise en forme de page des donnes dynamiques

Dreamweaver permet de prsenter des donnes dynamiques au sein d'une page structure et d'appliquer un formatage typographique l'aide de HTML et des feuilles de style en cascade. Pour appliquer des formats des donnes dynamiques dans Dreamweaver, mettez en forme les tableaux et les espaces rservs des donnes dynamiques l'aide des outils de formatage de Dreamweaver. Lors de leur insertion partir d'une source, les donnes adoptent automatiquement le formatage (police, style de paragraphe et tableau) spcifi.
Voir aussi
Prsentation de contenu l'aide de tableaux la page 182 Ajout et formatage de texte la page 225
Navigation parmi les rsultats d'un jeu d'enregistrements de base de donnes

Les liens de navigation de jeu d'enregistrements permettent de se dplacer d'un enregistrement un autre ou d'un jeu d'enregistrements un autre. Aprs avoir cr une page devant afficher cinq enregistrements la fois, par exemple, vous pouvez ajouter des liens tels que Suivant ou Prcdent pour que l'utilisateur puisse afficher les cinq enregistrements suivants ou prcdents. Vous pouvez crer quatre types de liens pour la navigation dans les jeux d'enregistrements : Premier, Prcdent, Suivant et Dernier. Une page peut contenir un nombre illimit de liens, condition que tous agissent sur un mme jeu d'enregistrements : Vous ne pouvez pas insrer sur une mme page des liens d'accs des jeux d'enregistrements diffrents. Les lments dynamiques suivants sont ncessaires pour la mise en place de liens de navigation de jeu d'enregistrements :
Un jeu d'enregistrements dans lequel naviguer. Un contenu dynamique sur la page pour afficher le ou les enregistrements. Du texte ou des images sur la page pour servir de barre de navigation cliquable. Un jeu de comportements serveur Dplacer vers l'enregistrement pour naviguer dans le jeu d'enregistrements.
Vous pouvez ajouter simultanment les deux derniers lments en utilisant l'objet dynamique Barre de navigation des enregistrements ou bien les ajouter sparment en utilisant les outils de conception et le panneau Comportements de serveur.
Cration d'une barre de navigation de jeu d'enregistrements

Vous pouvez crer en une seule opration une barre de navigation de jeu d'enregistrements l'aide du comportement de serveur correspondant. Cet objet de serveur ajoute les lments suivants la page :
Un tableau HTML comportant des liens texte ou image. Un jeu de comportements de serveur Dplacer vers. Un jeu de comportements de serveur Afficher la rgion.
La version texte de la barre de navigation du jeu d'enregistrements a laspect suivant :
version prliminaire
La version image de la barre de navigation du jeu d'enregistrements a laspect suivant :
Avant de placer la barre de navigation dans la page, assurez-vous que la page contient un jeu d'enregistrements dans lequel naviguer et une mise en forme pour afficher les enregistrements. Aprs avoir plac la barre de navigation sur la page, vous pouvez personnaliser la barre votre gr l'aide des outils de conception. Vous pouvez galement modifier les comportements de serveur Dplacer vers et Afficher la rgion en double-cliquant dessus dans le panneau Comportements de serveur. Dreamweaver cre un tableau qui contient des liens texte ou image permettant l'utilisateur, lorsqu'il clique dessus, de se dplacer dans le jeu d'enregistrements slectionn. Lorsque le premier enregistrement du jeu s'affiche, les liens ou images Premier et Prcdent sont masqus. Lorsque le dernier enregistrement du jeu s'affiche, les liens ou images Suivant et Dernier sont masqus. Vous pouvez personnaliser la mise en forme de la barre de navigation l'aide des outils de conception et du panneau Comportements de serveur.
1 En mode Cration, placez le point d'insertion l'endroit de la page o vous souhaitez que la barre de navigation
apparaisse.
2 Ouvrez la bote de dialogue Barre de navigation du jeu d'enregistrements (Insertion > Objets de donnes >
Pagination du jeu d'enregistrements > Barre de navigation du jeu d'enregistrements).

3 Dans le menu droulant Jeu d'enregistrements, slectionnez le jeu d'enregistrements dans lequel naviguer. 4 Dans la section Afficher l'aide de, slectionnez le format d'affichage des liens de navigation sur la page et cliquez
sur OK.
Texte Place des liens texte sur la page. Images Inclut des images graphiques en tant que liens. Dreamweaver utilise ses propres fichiers d'image. Lorsque la
barre se trouve sur la page, vous pouvez nanmoins les remplacer par les vtres.
Barres de navigation de jeu d'enregistrements personnalises

Vous pouvez crer votre propre barre de navigation de jeu d'enregistrements qui utilise des styles de formatage plus complexes que ceux qu'offre la table simple cre par l'objet de serveur Barre de navigation du jeu d'enregistrements. Pour crer votre propre barre de navigation de jeu d'enregistrements, vous devez :
crer des liens de navigation dans du texte ou des image ; placer les liens sur la page en mode Cration ; attribuer un comportement de serveur distinct chaque lien de navigation.
Cette section explique comment assigner un comportement de serveur distinct chaque lien de navigation.
Cration et attribution de comportements de serveur un lien de navigation

1 En mode Cration, slectionnez sur la page la chane de texte ou l'image qui servira de lien de navigation entre les
enregistrements.
2 Ouvrez le panneau Comportements de serveur (Fentre > Comportements de serveur), puis cliquez sur le bouton
Plus (+).
3 Choisissez Pagination du jeu d'enregistrements dans le menu droulant, puis slectionnez le comportement qui
convient dans la liste des comportements de serveur.
version prliminaire
Si le jeu contient un nombre important d'enregistrements, le comportement de serveur Dplacer vers le dernier enregistrement peut tre long s'excuter lorsque l'utilisateur clique sur le lien.
4 Dans le menu droulant Jeu d'enregistrements, slectionnez le jeu contenant les enregistrements et cliquez sur OK.
Le comportement de serveur est assign au lien de navigation.
Dfinition des options de la bote de dialogue Dplacer vers (comportement de serveur)

Ajouter des liens permettant l'utilisateur de naviguer parmi les enregistrements d'un jeu d'enregistrements
1 Si vous n'avez rien slectionn sur la page, slectionnez un lien dans le menu droulant. 2 Slectionnez le jeu contenant les enregistrements parcourir et cliquez sur OK.
Remarque : Si le jeu contient un nombre important d'enregistrements, le comportement de serveur Dplacer vers le dernier enregistrement peut tre long s'excuter lorsque l'utilisateur clique sur le lien.
Tches de cration d'une barre de navigation

Pour concevoir une barre de navigation personnalise, commencez par en crer la reprsentation visuelle l'aide des outils de conception de page de Dreamweaver. Il est inutile de crer un lien pour la chane de texte ou l'image, car Dreamweaver s'en charge votre place. La page sur laquelle crer la barre de navigation doit contenir un jeu d'enregistrements dans lequel naviguer. Une barre de navigation de jeu d'enregistrements simple, c'est--dire une barre dont les boutons sont crs partir d'lments de contenu tels que des images, ressemble ceci :
Aprs avoir ajout un jeu d'enregistrements une page et cr la barre de navigation, vous devez appliquer les comportements de serveur individuels chaque lment de navigation. Par exemple, une barre de navigation de jeu d'enregistrements typique contient la reprsentation des liens suivants, associe au comportement appropri :
Lien de navigation Accder la premire page Accder la page prcdente Accder la page suivante Accder la dernire page Comportement de serveur Dplacer vers la premire page Dplacer vers la page prcdente Dplacer vers la page suivante Dplacer vers la dernire page
Voir aussi
A propos des jeux d'enregistrements la page 572
Affichage et masquage des rgions en fonction des rsultats du jeu d'enregistrements

Vous pouvez galement indiquer qu'une rgion soit affiche ou masque selon que le jeu d'enregistrements est vide ou non. Si un jeu d'enregistrements est vide (aucun enregistrement ne correspond la requte, par exemple), vous pouvez afficher un message informant l'utilisateur de l'absence de rsultats. Cette fonction est particulirement utile lors de la cration de pages de recherche reposant sur des termes que l'utilisateur doit entrer. De mme, vous pouvez afficher un message d'erreur lorsqu'un problme survient au cours de la connexion une base de donnes ou lorsque le nom et le mot de passe de l'utilisateur ne correspondent pas ceux reconnus par le serveur.
version prliminaire
Les comportements de serveur Afficher la rgion sont les suivants :
Afficher si le jeu d'enregistrements est vide Afficher si le jeu d'enregistrements n'est pas vide Afficher s'il s'agit de la premire page Afficher si ce n'est pas la premire page Afficher s'il s'agit de la dernire page Afficher si ce n'est pas la dernire page
1 En mode Cration, slectionnez sur la page la rgion afficher ou masquer. 2 Dans le panneau Comportements de serveur (Fentre > Comportements de serveur), cliquez sur le bouton Plus (+). 3 Dans le menu droulant, slectionnez Afficher la rgion, puis choisissez l'un des comportements de serveur
proposs et cliquez sur OK.
Voir aussi
A propos des enregistrements de base de donnes la page 599 Cration d'un tableau dynamique la page 604
Affichage de plusieurs rsultats d'un jeu d'enregistrements

Le comportement de serveur Rgion rpte vous permet d'afficher sur une page plusieurs enregistrements d'un jeu. Toute slection de donnes dynamique peut tre convertie en rgion rpte. Les zones les plus courantes sont les tableaux, les lignes de tableau ou les sries de lignes de tableau.
1 En mode Cration, slectionnez une rgion comportant un contenu dynamique.
La slection peut tre de tout type, notamment tableau, ligne de tableau ou mme paragraphe de texte. Pour slectionner prcisment une rgion sur une page, vous pouvez utiliser le slecteur de balises dans le coin gauche de la fentre de document. Par exemple, si la rgion correspond une ligne de tableau, cliquez sur la ligne, puis cliquez sur la balise <tr> situe le plus droite dans le slecteur de balises pour slectionner la ligne du tableau.
2 Pour afficher le panneau Comportements de serveur, choisissez Fentre > Comportements de serveur. 3 Cliquez sur le bouton Plus (+) et choisissez Rgion rpte. 4 Slectionnez le nom du jeu d'enregistrements utiliser dans le menu droulant. 5 Slectionnez le nombre d'enregistrements afficher sur chaque page et cliquez sur OK.
Dans la fentre de document, un contour fin de couleur grise dlimite la rgion rpte.
Voir aussi
A propos des enregistrements de base de donnes la page 599 Modification de contenu dynamique la page 597
Modification de rgions rptes dans l'inspecteur Proprits

Modifiez la rgion rpte slectionne en modifiant les options suivantes :
Nom de la rgion rpte. Jeu d'enregistrements contenant les enregistrements pour la rgion rpte
version prliminaire
Nombre d'enregistrements affichs

Lorsque vous slectionnez une nouvelle option, Dreamweaver met la page jour.
Cration et ajoute d'une rgion rpte pour afficher plusieurs enregistrements sur une page
1 Spcifiez le jeu d'enregistrements contenant les donnes afficher dans la rgion rpte. 2 Spcifiez le nombre d'enregistrements afficher sur chaque page et cliquez sur OK.
Si vous indiquez un nombre limit d'enregistrements par page et que le nombre d'enregistrements demand risque d'tre suprieur, ajoutez des liens de navigation afin que l'utilisateur puisse visualiser les autres enregistrements.
Cration d'un tableau dynamique

L'exemple ci-dessous illustre comment le comportement de serveur Rgion rpte s'applique une ligne de tableau et indique qu'il est possible d'afficher un maximum de neuf enregistrements par page. La ligne elle-mme affiche quatre enregistrements diffrents : city, state, street address et zip code.
Pour crer un tableau semblable celui de l'exemple prcdent, vous devez crer un tableau contenant un contenu dynamique et appliquer le comportement de serveur Rgion rpte la ligne renfermant le contenu dynamique. Lorsque la page est traite par le serveur d'application, la ligne est rpte autant de fois que le nombre spcifi dans l'objet de serveur Rgion rpte, avec un enregistrement diffrent insr dans chaque ligne.
1 Procdez de l'une des manires suivantes pour insrer un tableau dynamique :
Choisissez Insertion > Objets de donnes > Donnes dynamiques > Tableau dynamique pour afficher la bote de
dialogue Tableau dynamique.
Dans la catgorie Donnes du panneau Insertion, cliquez sur le bouton Donnes dynamiques et slectionnez l'icne
Tableau dynamique dans le menu.
version prliminaire
2 Slectionnez le jeu d'enregistrements dans le menu droulant Jeu d'enregistrements. 3 Slectionnez le nombre d'enregistrements afficher sur chaque page. 4 (Facultatif) Entrez les valeurs des bordures du tableau, de la marge intrieure des cellules et de l'espacement entre
les cellules. La bote de dialogue Tableau dynamique mmorise les valeurs spcifies pour les bordures du tableau, la marge intrieure des cellules et l'espacement entre les cellules. Remarque : Si vous travaillez sur un projet ncessitant plusieurs tableaux dynamiques d'aspect semblable, tapez les valeurs de mise en forme du tableau pour simplifier le dveloppement des pages. Une fois le tableau insr, vous pouvez toutefois ajuster ces valeurs l'aide de l'inspecteur Proprits du tableau.
5 Cliquez sur OK.
Un tableau et des espaces rservs destins au contenu dynamique dfini dans le jeu d'enregistrements associ s'insrent sur la page.
Dans cet exemple, le jeu d'enregistrements contient quatre colonnes : AUTHORID, FIRSTNAME, LASTNAME et BIO. Le nom de chaque colonne se place dans la ligne de titre du tableau. Vous pouvez remplacer les titres par tout texte descriptif ou image pertinente.
Cration de compteurs d'enregistrements

Les compteurs d'enregistrements permettent aux utilisateurs de connatre leur position relative dans un jeu d'enregistrements. Ils affichent gnralement le nombre total d'enregistrements renvoys et le nombre actuel d'enregistrements affichs. Prenons l'exemple d'un jeu d'enregistrements renvoyant 40 enregistrements individuels, avec huit enregistrements affichs par page ; le compteur d'enregistrements indique alors sur la premire page Affichage des enregistrements 1 8 sur 40 . Avant de crer un compteur d'enregistrements pour une page, vous devez d'abord crer un jeu d'enregistrements pour la page, une mise en forme approprie pour la prsentation du contenu dynamique et une barre de navigation de jeu d'enregistrements.
Voir aussi
A propos des jeux d'enregistrements la page 572 Cration d'une barre de navigation de jeu d'enregistrements la page 600 Affichage de plusieurs rsultats d'un jeu d'enregistrements la page 603 Cration d'un tableau dynamique la page 604
Cration de compteurs d'enregistrements simples

Un compteur d'enregistrements indique aux utilisateurs la position dans laquelle ils se trouvent au sein d'un groupe d'enregistrements, par rapport au nombre total d'enregistrements renvoys. Il constitue donc un comportement utile permettant d'amliorer considrablement l'aspect fonctionnel d'un site Web.
version prliminaire
L'objet de serveur Etat de navigation du jeu d'enregistrements permet de crer un compteur d'enregistrements simple. Cet objet de serveur cre une entre de texte sur la page pour afficher l'tat de l'enregistrement actif. Vous pouvez personnaliser votre compteur d'enregistrements l'aide des outils de cration de page de Dreamweaver.
1 Placez le point d'insertion l'endroit o vous souhaitez insrer le compteur d'enregistrements. 2 Choisissez Insertion > Objets de donnes > Afficher le nombre d'enregistrements > Etat de navigation du jeu
d'enregistrements, slectionnez le jeu d'enregistrements dans le menu droulant Jeu d'enregistrements, puis cliquez sur OK. L'objet de serveur Etat de navigation du jeu d'enregistrements insre un compteur d'enregistrements texte qui ressemble l'exemple suivant :
Affich en mode En direct, le compteur prsente un apparence similaire l'exemple suivant :
Cration et ajout du compteur d'enregistrements la page

Dans la bote de dialogue Insrer l'tat de navigation du jeu d'enregistrements, slectionnez le jeu d'enregistrements
surveiller, puis cliquez sur OK.
Cration de compteurs d'enregistrements personnaliss

Vous faites appel des comportements de comptage d'enregistrements individuels pour crer des compteurs d'enregistrements personnaliss. Les compteurs d'enregistrements personnaliss sont plus sophistiqus que le simple tableau une seule ligne insr par l'objet de serveur Etat de navigation du jeu d'enregistrements. Vous pouvez organiser les lments de manires varies et cratives et appliquer un comportement de serveur appropri chaque lment. Les comportements de serveur de comptage des enregistrements sont les suivants :
Afficher le numro de l'enregistrement de dbut Afficher le numro de l'enregistrement de fin Afficher le nombre total d'enregistrements
Avant de crer un compteur d'enregistrements personnalis sur une page, vous devez d'abord crer un jeu d'enregistrements pour la page, une mise en forme approprie pour la prsentation du contenu dynamique et une barre de navigation de jeu d'enregistrements. Dans cet exemple, un compteur d'enregistrements similaire l'exemple de la section Crer des compteurs d'enregistrements simples est cr. Dans cet exemple, le texte mis en forme avec la police sans-serif reprsente les espaces rservs aux nombres d'enregistrements qui seront insrs dans la page. Le compteur d'enregistrements de cet exemple se prsente comme suit : Affichage des enregistrements Affichage des enregistrements StartRow EndRow sur RecordSet.RecordCount.
1 En mode Cration, tapez le texte du compteur sur la page. Il peut s'agir de n'importe quel texte. Par exemple :
Displaying records thru of .
2 Placez le point d'insertion la fin de la chane de texte. 3 Ouvrez le panneau Comportements de serveur (Fentre > Comportements de serveur).
version prliminaire
4 Cliquez sur le bouton Plus(+) dans le coin suprieur gauche, puis cliquez sur Afficher le nombre d'enregistrements.
Dans ce sous-menu, choisissez Afficher le nombre total des enregistrements. Le comportement Afficher le nombre total des enregistrements s'insre sur la page et un espace rserv se place au niveau du point d'insertion. La chane de texte ressemble maintenant ce qui suit :
Displaying records thru of {Recordset1.RecordCount}.
5 Placez le point d'insertion aprs le mot records, et slectionnez Afficher le numro de l'enregistrement de dbut
dans le panneau Nombre d'enregistrements (Comportements de serveur > Plus (+) > Nombre d'enregistrements. La chane de texte ressemble maintenant ce qui suit :
Displaying records {StartRow_Recordset1} thru of {Recordset1.RecordCount}.
6 Placez maintenant le point d'insertion entre les mots thru et of, et slectionnez Afficher le numro de
l'enregistrement de dbut dans le panneau Nombre d'enregistrements (Comportements de serveur > Plus (+) > Nombre d'enregistrements. La chane de texte ressemble maintenant ce qui suit :
Displaying records {StartRow_Recordset1} thru {EndRow_Recordset1} of{Recordset1.RecordCount}.
7 Pour vrifier que le compteur fonctionne correctement, affichez la page en mode En direct. Le compteur prsente
une apparence similaire l'exemple suivant :

Displaying records 1 thru 8 of 40.
Si la page de rsultats comporte un lien de navigation permettant d'accder au groupe d'enregistrements suivant, il suffit de cliquer sur ce lien pour mettre jour le compteur d'enregistrements comme suit :
Showing records 9 thru 16 of 40.
Utilisation de formats de donnes prdfinis

Dreamweaver contient plusieurs formats de donnes prdfinis que vous pouvez appliquer des lments de donnes dynamiques. Les styles de format de donnes prdfinis sont les suivants : Date/Heure, Devise, Nombre et Pourcentage.
Application d'un format de donnes un contenu dynamique

1 Slectionnez l'espace rserv pour contenu dynamique dans la fentre Document. 2 Choisissez Fentre > Liaisons pour afficher le panneau Liaisons. 3 Dans la colonne Format, cliquez sur le bouton flch pointant vers le bas.
Si la flche vers le bas n'est pas visible, agrandissez le panneau.

4 Dans le menu droulant Format, slectionnez la catgorie de format de donnes souhaite.
Assurez-vous que le format de donnes convient au type de donnes formater. Les formats Devise, par exemple, ne fonctionnent que pour des donnes numriques. En outre, il est impossible d'appliquer plusieurs formats aux mmes donnes.
5 Assurez-vous que le format a t appliqu correctement. Pour ce faire, prvisualisez la page en mode En direct.
Personnalisation d'un format de donnes

1 Ouvrez une page contenant des donnes dynamiques en mode Cration. 2 Slectionnez les donnes dynamiques dont vous souhaitez personnaliser le format.
L'lment de donnes lies dont vous avez slectionn le texte dynamique se met en surbrillance. Le panneau affiche deux colonnes pour l'lment slectionn : Liaison et Format. Si la colonne Format n'est pas visible, largissez le panneau Liaisons afin de l'afficher.
version prliminaire
3 Dans le panneau Liaisons, cliquez sur la flche vers le bas de la colonne Format pour dvelopper le menu droulant
des formats de donnes disponibles. Si la flche vers le bas n'est pas visible, agrandissez davantage le panneau Liaisons.
4 Dans le menu droulant, choisissez Modifier la liste de formats. 5 Compltez les options de la bote de dialogue, puis cliquez sur OK. a Slectionnez le format dans la liste, puis cliquez sur Modifier. b Modifiez un ou plusieurs des paramtres suivants dans les botes de dialogue Devise, Nombre ou Pourcentage, puis
cliquez sur OK.
Nombre de chiffres afficher aprs la virgule Affichage ou absence d'un zro devant les nombres dcimaux infrieurs un Affichage ou absence de parenthses ou d'un signe moins pour les valeurs ngatives Regroupement ou non des chiffres
c Pour supprimer un format de donnes, cliquez sur le format dans la liste, puis sur le bouton Moins (-).
Cration d'un format de donnes (ASP uniquement)

1 Ouvrez une page contenant des donnes dynamiques en mode Cration. 2 Slectionnez les donnes dynamiques pour lesquelles crer le format personnalis. 3 Choisissez Fentre > Liaisons pour afficher le panneau Liaisons, puis cliquez sur la flche vers le bas dans la colonne
Format. Si la flche vers le bas n'est pas visible, agrandissez le panneau.

4 Dans le menu droulant, choisissez Modifier la liste de formats. 5 Cliquez sur le bouton Plus (+) et slectionnez un type de format. 6 Dfinissez le format et cliquez sur OK. 7 Entrez un nom pour le nouveau format dans la colonne Nom et cliquez sur OK.
Remarque : Bien que Dreamweaver ne prenne en charge la cration de formats de donnes que pour les pages ASP, les utilisateurs de ColdFusion et de PHP peuvent tlcharger des formats crs par d'autres dveloppeurs, ou crer des formats de serveur et les publier sur Dreamweaver Exchange. Pour plus d'informations sur l'API de formats de serveur, voir Extension de Dreamweaver (Aide> Extension de Dreamweaver > Formats de serveur).
Affichage des donnes dynamiques

La fonctionnalit d'affichage Live Data a t abandonne depuis Dreamweaver CS5. Elle a t remplace par la fonction Affichage en direct, davantage optimise. Pour afficher les donnes en direct en mode En direct, veillez effectuer les oprations suivantes :
Dfinissez un dossier pour le traitement des pages dynamiques (par exemple, un dossier racine sur un serveur
ColdFusion, sur votre ordinateur ou sur un ordinateur distant). Si la page affiche un message d'erreur lorsque vous accdez au mode En direct, assurez-vous que le prfixe de l'URL est correct dans la bote de dialogue Dfinition du site.
Copiez les fichiers associs (le cas chant) dans le dossier. Fournissez tous les paramtres de la page qu'un utilisateur fournirait normalement.
version prliminaire
Fourniture de donnes dynamiques une page en mode En direct

1 Ouvrez la bote de dialogue Paramtres d'affichage en direct (Affichage > Options d'affichage en direct >
Paramtres de demande HTTP).

2 Dans la zone Demande d'URL, cliquez sur le bouton plus (+) pour entrer un paramtre attendu par votre page. 3 Indiquez un nom et une valeur test pour chaque paramtre. 4 Dans le menu droulant Mthode, slectionnez la mthode de formulaire HTML attendue par votre page : POST ou GET. 5 Dans la zone de texte Script d'initialisation, entrez le code source que vous souhaitez insrer au dbut de la page
avant de l'excuter. Le script d'initialisation comporte gnralement un code qui dfinit les variables de session.
6 Choisissez Enregistrer les paramtres de ce document pour enregistrer les paramtres de la page sur laquelle vous
travaillez, puis cliquez sur OK. Remarque : Pour que les paramtres puissent tre enregistrs, vous devez activer Design Notes (Fichier > Design Notes).
Dpannage des donnes en direct dans le mode En direct

Bon nombre de problmes d'affichage de donne en direct dans le mode En direct sont lis des valeurs manquantes ou incorrectes dans la bote de dialogue Dfinition du site (Site > Modifier les sites). Vrifiez la catgorie Serveur d'valuation de la bote de dialogue Dfinition du site. La zone de dossier distant doit spcifier un dossier capable de traiter des pages dynamiques. Voici un exemple de dossier distant appropri si vous excutez IIS ou PWS sur votre disque dur : C:\Inetpub\wwwroot\myapp\ Vrifiez que la case Prfixe de l'URL spcifie une URL qui correspond au dossier distant. Par exemple, si PWS ou IIS est excut sur votre ordinateur local, les dossiers distants suivants ont les prfixes d'URL suivants :
Dossier distant C:\Inetpub\wwwroot\ C:\Inetpub\wwwroot\myapp\ C:\Inetpub\wwwroot\fs\planes Prfixe de l'URL http://localhost/ http://localhost/myapp/ http://localhost/fs/planes
Voir aussi
Basculement d'un mode un autre dans la fentre de document la page 17 Prvisualisation des pages en mode Affichage en direct la page 297 Aperu des pages dynamiques dans un navigateur la page 567
version prliminaire
Ajout de comportements de serveur personnaliss

A propos des comportements de serveur personnaliss
Dreamweaver est livr avec un ensemble de comportements de serveur qui vous permettent d'ajouter aisment des options dynamiques un site. Si vous souhaitez accrotre les fonctionnalits de Dreamweaver, vous pouvez crer de nouveaux comportements de serveur en fonction de vos besoins spcifiques ou en tlcharger depuis le site Web de Dreamweaver Exchange. Avant de crer vos propres comportements de serveur, vrifiez sur le site Web de Dreamweaver Exchange que le comportement de serveur offrant la fonctionnalit que vous souhaitez ajouter votre site Web n'a pas dj t cr par un autre dveloppeur. Il est frquent que des dveloppeurs tiers crent et testent des comportements de serveur qui rpondent aux besoins d'autres personnes.
Accs Dreamweaver Exchange

1 Dans Dreamweaver, accdez Dreamweaver Exchange de l'une des faons suivantes :
Slectionnez Aide > Dreamweaver Exchange. Slectionnez Fentre > Comportements de serveur, cliquez sur le bouton Plus (+), puis choisissez Obtenir d'autres
comportements de serveur. La page Web de Dreamweaver Exchange apparat dans votre navigateur.
2 Connectez-vous Exchange en utilisant votre ID Adobe personnel ou, si vous n'avez pas encore cr d'ID
Dreamweaver Exchange, suivez les instructions d'ouverture d'un compte Adobe.
Installation d'un comportement de serveur ou d'une autre extension dans Dreamweaver

1 Pour dmarrer Extension Manager, choisissez Commandes > Grer les extensions. 2 Choisissez Fichier > Installer un paquet dans Extension Manager.
Pour plus d'informations, voir Utilisation de Extension Manager.
Droulement du travail des comportements de serveur personnaliss

Si vous tes dveloppeur Web et que vous matrisez les technologies ColdFusion, JavaScript, VBScript ou PHP, vous pouvez rdiger vos propres comportements de serveur. La cration d'un comportement de serveur implique les oprations suivantes :
Rdiger un ou plusieurs blocs de code excutant l'action requise. Indiquer le point dinsertion du bloc de code dans le code HTML de la page. Si le comportement de serveur requiert que la valeur d'un paramtre soit spcifie, crer une bote de dialogue
invitant le dveloppeur Web qui applique le comportement fournir la valeur approprie.
Tester le comportement de serveur avant de le rendre disponible d'autres utilisateurs.
Voir aussi
Demande d'un paramtre pour le comportement de serveur la page 618 Test des comportements de serveur la page 621
version prliminaire
Utilisation du Crateur de comportements de serveur

Utilisez le Crateur de comportements de serveur pour ajouter le ou les blocs de code que le comportement doit insrer dans la page.
1 Dans le panneau Comportements de serveur (Fentre > Comportements de serveur), cliquez sur le bouton Plus (+),
puis choisissez Nouveau comportement de serveur.

2 Dans le menu droulant Type de document, slectionnez le type de document pour lequel vous dveloppez le
comportement de serveur.
3 Dans la zone Nom, entrez le nom du comportement de serveur. 4 (Facultatif) Pour copier un comportement de serveur existant pour l'ajouter au comportement en cours de cration,
activez l'option Copier un comportement de serveur existant, puis slectionnez le comportement voulu dans le menu droulant Comportement copier. Cliquez sur OK. La bote de dialogue Crateur de comportements de serveur s'affiche.
5 Pour ajouter un nouveau bloc de code, cliquez sur le bouton Plus (+), nommez le bloc de code, puis cliquez sur OK.
Le nom que vous avez entr apparat dans le Crateur de comportements de serveur, tandis que les balises de script appropries s'affichent dans la zone Bloc de code.
6 Dans la zone Bloc de code, tapez le code d'excution ncessaire pour implmenter le comportement de serveur.
Remarque : Lorsque vous entrez le code dans la zone Bloc de code, vous ne pouvez insrer qu'une balise ou qu'un bloc de code pour chaque bloc de code nomm (par exemple, monComportement_bloc1, monComportement_bloc2, monComportement_blocn, etc.). Pour saisir plusieurs balises ou blocs de code, crez un bloc de code individuel pour chaque lment. Vous pouvez galement copier et coller le code d'autres pages.
7 Placez le point d'insertion dans le bloc de code l'endroit o vous souhaitez insrer le paramtre, ou slectionnez
une chane remplacer par un paramtre.

8 Cliquez sur le bouton Insrer le paramtre dans le bloc de code. 9 Tapez le nom du paramtre dans la zone Nom de paramtre (par exemple, Session), puis cliquez sur OK.
Le paramtre vient s'insrer dans le bloc de code l'endroit o vous avez plac le point d'insertion avant la dfinition du paramtre. Si vous avez slectionnez une chane, chaque occurrence de la chane slectionne dans le bloc de code est remplace par un marqueur de paramtre (par exemple, @@Session@@).
10 Dans le menu droulant Insrer code, choisissez une option indiquant l'endroit o incorporer les blocs de code. 11 (Facultatif) Pour spcifier des informations supplmentaires sur le comportement de serveur, cliquez sur le bouton
Avanc.
12 Pour crer d'avantage de blocs de code, rptez les tapes 5 11. 13 Si le comportement de serveur requiert que des paramtres lui soient fournis, vous devez crer une bote de
dialogue qui accepte les paramtres de la personne appliquant le comportement. Reportez-vous au lien ci-dessous.
14 Aprs avoir excut les tapes requises pour crer le comportement de serveur, cliquez sur OK.
Le panneau Comportements de serveur rpertorie le comportement de serveur.

15 Testez-le pour vous assurer qu'il fonctionne correctement.
Voir aussi
Rptitions des blocs de code avec la directive de boucle la page 616 Instructions pour le codage la page 620
version prliminaire
Demande d'un paramtre pour le comportement de serveur la page 618 Ajout de comportements de serveur personnaliss la page 610
Options avances
Une fois le code source spcifi et l'emplacement de chaque bloc de code insr, le comportement de serveur est compltement dfini. Dans la plupart des cas, il est inutile de spcifier d'autres informations. Si vous tes un utilisateur chevronn, vous pouvez dfinir les options suivantes :
Identificateur Indique si le bloc de code doit tre trait comme un identificateur.
Par dfaut, chaque bloc de code constitue un identificateur. Si Dreamweaver trouve un bloc de code identificateur dans un document, il affiche le comportement dans le panneau Comportements de serveur. Activez l'option Identificateur pour indiquer si le bloc de code doit tre trait comme tel. Au moins un des blocs de code du comportement de serveur doit tre un identificateur. Ne dfinissez pas comme identificateur un bloc de code rpondant aux conditions suivantes : ce mme bloc de code est utilis dans d'autres comportements de serveur ; il s'agit d'un bloc de code tellement simple qu'il peut se produire naturellement dans la page.
Titre du comportement de serveur Indique le titre du comportement dans le panneau Comportements de serveur.
Lorsque le crateur de la page clique sur le bouton Plus (+) du panneau Comportements de serveur, le titre du nouveau comportement s'affiche dans le menu droulant. Lorsqu'un crateur applique une occurrence d'un comportement de serveur un document, le comportement est rpertori dans la liste des comportements appliqus du panneau Comportements de serveur. Dans la zone Titre du comportement de serveur, spcifiez le contenu du menu droulant Plus (+) et de la liste de comportements appliqus. Le champ comporte par dfaut la valeur du nom que vous avez indiqu dans la bote de dialogue Nouveau comportement de serveur. A mesure que les paramtres sont dfinis, le nom est automatiquement mis jour : les paramtres apparaissent entre parenthses aprs le nom du comportement de serveur.
Set Session Variable (@@Name@@, @@Value@@)
Si l'utilisateur accepte la valeur par dfaut, tout ce qui prcde les parenthses s'affiche dans le menu droulant Plus (+) (par exemple, Set Session Variable). Le nom et les paramtres sont rpertoris dans la liste des comportements appliqus, par exemple, Set Session Variable ( abcd , 5 ).
Bloc de code slectionner Slectionner indique le bloc de code slectionn lorsque l'utilisateur choisit le comportement dans le panneau Comportements de serveur.
Lorsque vous appliquez un comportement de serveur, l'un de ses blocs de code est dsign comme tant le bloc de code slectionner . Si vous appliquez le comportement de serveur, puis que vous le slectionnez dans le panneau Comportements de serveur, le bloc dsign est slectionn dans la fentre de document. Par dfaut, Dreamweaver slectionne le premier bloc de code ne se trouvant pas au-dessus de la balise html. Si tous les blocs de code se trouvent au-dessus de la balise html, le premier est slectionn. Les utilisateurs chevronns peuvent indiquer le bloc de code devant tre slectionn.
Cration de blocs de code

Les blocs de code ajouts dans le Crateur de comportements de serveur sont encapsuls dans un comportement de serveur figurant dans le panneau Comportements de serveur. Le code peut correspondre tout code d'excution conforme au modle de serveur spcifi. Si vous choisissez ColdFusion comme type de document pour votre comportement de serveur personnalis, par exemple, le code rdig doit correspondre un code ColdFusion valide pouvant s'excuter sur un serveur d'application ColdFusion.
version prliminaire
Vous pouvez crer les blocs de code soit directement depuis le Crateur de comportements de serveur, soit en les copiant et les collant depuis d'autres sources. Chaque bloc de code ajout dans le Crateur de comportements de serveur doit reprsenter une balise ou un bloc de script unique. Si vous devez insrer plusieurs blocs de balise, divisezles en blocs de code distincts. Conditions dans les blocs de code Dreamweaver permet de crer des blocs de code contenant des instructions de contrle excution conditionnelle. Le Crateur de comportements de serveur utilise des instructions if, elseif et else et peut contenir des paramtres de comportement de serveur. Cela permet d'insrer plusieurs blocs de texte secondaire selon les valeurs des relations OR entre les paramtres de comportement de serveur. L'exemple suivant montre les instructions if, elseif et else. Les crochets ([ ]) indiquent que le code est facultatif, alors que l'astrisque (*) signale qu'il existe zro occurrence ou davantage. Pour n'excuter un bloc de code, ou une partie de celui-ci, que si certaines conditions sont remplies, utilisez la syntaxe suivante :
<@ if (expression1) @>conditional text1[<@ elseif (expression2) @>conditional text2]*[<@ else @> conditional text3]<@ endif @>
Les expressions de condition peuvent correspondre toute expression JavaScript valuable l'aide de la fonction eval() de JavaScript, et peuvent inclure un paramtre de comportement de serveur indiqu par des symboles @@. (Ces symboles sont ncessaires pour distinguer le paramtre des variables et mots-cls JavaScript.) Utilisation efficace des expressions conditionnelles En utilisant les directives if, else et elseif au sein d'une balise XML insertText, le texte participant est prtrait pour rsoudre les directives if et dterminer le texte inclure dans le rsultat. Les directives if et elseif interprtent l'expression comme un argument. L'expression de condition est identique aux expressions de condition JavaScript et peut galement contenir des paramtres de comportement de serveur. Les directives de ce type permettent d'effectuer un choix parmi plusieurs blocs de code possibles, et ce en fonction des valeurs des paramtres de comportement de serveur ou des relations entre ces paramtres. Le code JSP indiqu ci-dessous, par exemple, provient d'un comportement de serveur Dreamweaver utilisant le bloc de code conditionnel :
@@rsName@@.close(); <@ if (@@callableName@@ != '') @> @@callableName@@.execute(); @@rsName@@ = @@callableName@@.getResultSet();<@ else @> @@rsName@@ = Statement@@rsName@@.executeQuery(); <@ endif @> @@rsName@@_hasData = @@rsName@@.next();
Le bloc de code conditionnel dbute par <@ if (@@callableName@@ != '') @> et se termine par <@ endif @>. Selon le code, si l'utilisateur entre une valeur pour le paramtre @@callableName@@ dans la bote de dialogue Paramtre du comportement de serveur, c'est--dire si la valeur du paramtre @@callableName@@ n'est pas nulle, ou (@@callableName@@ != ''), le bloc de code conditionnel est remplac par les instructions suivantes :
@@callableName@@.execute(); @@rsName@@ = @@callableName@@.getResultSet();
Dans le cas contraire, le bloc de code est remplac par l'instruction suivante :
@@rsName@@ = Statement@@rsName@@.executeQuery();
version prliminaire
Voir aussi
Rptitions des blocs de code avec la directive de boucle la page 616
Positionnement d'un bloc de code

Lorsque vous crez des blocs de code l'aide du Crateur de comportements de serveur, vous devez prciser l'endroit o les insrer dans le code HTML de la page. Par exemple, si vous insrez un bloc de code au-dessus de la balise <html> d'ouverture, vous devez ensuite en indiquer la position par rapport aux autres balises, scripts et comportements de serveur figurant dans cette section du code HTML de la page. Il peut s'agir, par exemple, de placer un comportement avant ou aprs une requte portant sur des jeux d'enregistrements, qui pourrait dj figurer dans le code de la page au-dessus de la balise <html> d'ouverture. Les options disponibles dans le menu droulant Position relative varient en fonction de la position slectionne dans le menu droulant Insrer code. Il ne s'agit donc que des options pertinentes pour la partie concerne de la page. Par exemple, lorsque vous activez l'option Au-dessus de la balise <html> dans le menu droulant Insrer code, les options de positionnement disponibles dans le menu droulant Position relative refltent les choix pertinents pour la partie concerne de la page. Le tableau suivant prsente les options d'insertion des blocs de code et les positions relatives correspondantes :
Options du menu Insrer code Au-dessus de la balise <html> Options de position relative
Au dbut du fichier Juste avant les jeux d'enregistrements Juste aprs les jeux d'enregistrements Juste au-dessus de la balise <html> Position personnalise Avant la fin du fichier Avant la fermeture du jeu d'enregistrements Aprs la fermeture du jeu d'enregistrements Aprs la balise </html> Position personnalise
Au-dessous de la balise </html>
Relatif une balise spcifique
Choisissez une balise dans le menu droulant Balise, puis choisissez parmi les options de positionnement des balises. Avant la slection Aprs la slection Remplacer la slection Envelopper la slection
Relatif la slection
Pour indiquer une position personnalise, vous devez attribuer une paisseur au bloc de code. Utilisez l'option Position personnalise lorsque vous voulez insrer plusieurs blocs de code dans un ordre particulier. Par exemple, pour insrer une srie de trois blocs de code dans un certain ordre aprs les blocs de code qui ouvrent des jeux d'enregistrements, tapez une paisseur de 60 pour le premier bloc, de 65 pour le deuxime et de 70 pour le troisime.
version prliminaire
Par dfaut, Dreamweaver attribue une paisseur de 50 tous les blocs de code d'ouverture de jeux d'enregistrement insrs au-dessus de la balise <html>. Si plusieurs blocs ont la mme paisseur, Dreamweaver les classe de faon alatoire.
Voir aussi
Demande d'un paramtre pour le comportement de serveur la page 618 Instructions pour le codage la page 620 A propos des comportements de serveur personnaliss la page 610 Cration de blocs de code la page 612 Test des comportements de serveur la page 621
Placement d'un bloc de code (instructions gnrales)

1 A l'aide du Crateur de comportements de serveur, rdigez un bloc de code. 2 Dans la bote de dialogue Crateur de comportements de serveur, slectionnez la position dans laquelle insrer le
bloc de code dans le menu droulant Insrer code.

3 Dans la bote de dialogue Crateur de comportements de serveur, slectionnez une position relative celle qui est
slectionne dans le menu droulant Insrer code.

4 Si vous avez termin la cration du bloc de code, cliquez sur OK.
Le comportement de serveur est rpertori dans le panneau Comportements de serveur (Fentre > Comportements de serveur) ; cliquez sur le bouton Plus (+) pour l'afficher.
5 Testez-le pour vous assurer qu'il fonctionne correctement.
Positionnement d'un bloc de code par rapport une autre balise de la page
1 Dans le menu droulant Insrer code, choisissez Relatif une balise spcifique. 2 Dans la zone Balise, saisissez la balise ou slectionnez-en une dans le menu droulant.
N'entrez pas les crochets de la balise (<>).

3 Spcifiez un emplacement relatif la balise en choisissant une option dans le menu droulant Position relative.
Positionnement d'un bloc de code par rapport une balise slectionne par le crateur de la page
1 Dans le menu droulant Insrer code, choisissez Relatif la slection. 2 Spcifiez un emplacement relatif la balise en choisissant une option dans le menu droulant Position relative.
Vous pouvez insrer votre bloc de code immdiatement avant ou aprs la slection. Vous pouvez galement remplacer la slection par votre bloc de code ou renvoyer le bloc de code la ligne autour de la slection. Pour envelopper le bloc de code autour d'une slection, cette dernire doit se composer d'une balise d'ouverture et d'une balise de fermeture juxtaposes, comme suit:
<CFIF Day="Monday"></CFIF>
Insrez la balise d'ouverture du bloc de code s'insre avant la balise d'ouverture de la slection et sa balise de fermeture aprs la balise de fermeture de la slection.
version prliminaire
Rptitions des blocs de code avec la directive de boucle

Pour rpter un bloc de code, ou une partie de celui-ci, un certain nombre de fois, utilisez la syntaxe suivante :
<@ loop (@@param1@@,@@param2@@) @>code block<@ endloop @>
Lors de la cration de comportements de serveur, vous pouvez utiliser des structures de boucle pour rpter un bloc de code un nombre dfini de fois.
<@ loop (@@param1@@,@@param2@@,@@param3@@,@@param_n@@) @>code block <@ endloop @>
La directive de boucle accepte des arguments se prsentant sous la forme d'une liste de tableaux de paramtre spars par des virgules. Dans ce cas, les arguments des tableaux de paramtre permettent aux utilisateurs de fournir plusieurs valeurs pour un mme paramtre. Le texte rptitif sera dupliqu n fois, n correspondant la longueur des arguments des tableaux de paramtre. Si plusieurs arguments de tableaux de paramtre sont indiqus, tous les tableaux doivent tre de la mme longueur. Lors de la nime valuation de la boucle, les nimes lments des tableaux de paramtre remplacent les occurrences du paramtre correspondant dans le bloc de code. Lorsque vous crez une bote de dialogue pour le comportement de serveur, vous pouvez ajouter une commande la bote de dialogue qui permet au concepteur de la page de crer des tableaux de paramtre. Dreamweaver inclut une commande de tableau simple que vous pouvez utiliser pour crer des botes de dialogue. Cette commande, qui s'appelle Liste de champs de texte spars par des virgules, est accessible partir du Crateur de comportements de serveur. Pour crer des lments d'interface utilisateur plus complexes et apprendre concevoir une bote de dialogue contenant une commande de cration de tableaux (commande de grille, par exemple), consultez la documentation API. Vous pouvez imbriquer autant de directives conditionnelles ou de boucle que vous le souhaitez au sein d'une mme directive conditionnelle. Ainsi pouvez-vous prciser, par exemple, que si une expression est vraie, la boucle doit tre excute. L'exemple suivant montre comment utiliser des blocs de code rptitifs pour crer des comportements de serveur (cet exemple correspond un comportement ColdFusion permettant d'accder une procdure stocke) :
<CFSTOREDPROC procedure="AddNewBook" datasource=#MM_connection_DSN# username=#MM_connection_USERNAME# password=#MM_connection_PASSWORD#> <CFPROCPARAM type="IN" dbvarname="@CategoryId" value="#Form.CategoryID#" cfsqltype="CF_SQL_INTEGER"> <CFPROCPARAM type="IN" dbvarname="@ISBN" value="#Form.ISBN#" cfsqltype="CF_SQL_VARCHAR"> </CFSTOREDPROC>
Dans cet exemple, la balise CFSTOREDPROC peut comprendre zro ou davantage de balises CFPROCPARAM. Toutefois, sans prise en charge de la directive de boucle, il est impossible d'inclure les balises CFPROCPARAM au sein de la balise CFSTOREDPROC insre. Si vous vous inspiriez de cet exemple pour crer un comportement de serveur sans la directive de boucle, il vous faudrait le diviser en deux participants : une balise CFSTOREDPROC principale et une balise CFPROCPARAM dont le type de participant serait multiple. Avec la directive de boucle, il est possible de rdiger cette mme procdure comme suit :
version prliminaire
<CFSTOREDPROC procedure="@@procedure@@" datasource=#MM_@@conn@@_DSN# username=#MM_@@conn@@_USERNAME# password=#MM_@@conn@@_PASSWORD#> <@ loop (@@paramName@@,@@value@@,@@type@@) @> <CFPROCPARAM type="IN" dbvarname="@@paramName@@" value="@@value@@" cfsqltype="@@type@@"> <@ endloop @> </CFSTOREDPROC>
Remarque : Les nouvelles lignes situes aprs chaque lment @> sont ignores. Supposons que l'utilisateur ait tap les valeurs de paramtre suivantes dans la bote de dialogue Crateur de comportements de serveur :
procedure = "proc1" conn = "connection1" paramName = ["@CategoryId", "@Year", "@ISBN"] value = ["#Form.CategoryId#", "#Form.Year#", "#Form.ISBN#"] type = ["CF_SQL_INTEGER", "CF_SQL_INTEGER", "CF_SQL_VARCHAR"]
Le comportement de serveur insrerait alors le code d'excution suivant dans la page :

<CFSTOREDPROC procedure="proc1" datasource=#MM_connection1_DSN# username=#MM_connection1_USERNAME# password=#MM_connection1_PASSWORD#> <CFPROCPARAM type="IN" dbvarname="@CategoryId" value="#Form.CategoryId#" cfsqltype="CF_SQL_INTEGER"> <CFPROCPARAM type="IN" dbvarname="@Year" value="#Form.Year#" cfsqltype="CF_SQL_INTEGER"> <CFPROCPARAM type="IN" dbvarname="@ISBN" value="#Form.ISBN#" cfsqltype="CF_SQL_VARCHAR"> </CFSTOREDPROC>
Remarque : Il est impossible d'utiliser les tableaux de paramtre en dehors d'une boucle, sauf en tant que composants d'une expression de directive conditionnelle. Utilisation des variables _length et _index de la directive de boucle La directive de boucle comprend deux variables intgres utilisables dans les conditions if incorpores. Ces variables sont les suivantes : _length et _index. La variable _length se rapporte la longueur des tableaux traits par la directive de boucle, alors que la variable _index se rapporte l'index actuel de la directive loop elle-mme. Pour que ces variables ne soient reconnues qu'en tant que directives et non en tant que paramtres faire passer par la boucle, ne les insrez pas entre des symboles @@. Un exemple d'utilisation des variables intgres consiste les appliquer l'attribut import de la directive de page. L'attribut import requiert que les paquets soient spars par des virgules. Si la directive loop englobe l'intgralit de l'attribut import, le nom d'attribut import= ne doit sortir qu' la premire itration de la boucle (les guillemets fermants (") sont alors inclus) et aucune virgule n'apparat la dernire itration de la boucle. Pour ce faire, vous pouvez utiliser la variable intgre comme suit :
version prliminaire
<@loop (@@Import@@)@> <@ if(_index == 0)@>import=" <@endif@>@@Import@@<@if (_index == _length-1)@>"<@else@>, <@ endif @> <@endloop@>
Demande d'un paramtre pour le comportement de serveur

Les comportements de serveur requirent souvent que le concepteur de la page fournisse une valeur de paramtre. Cette valeur doit tre insre avant que le code du comportement de serveur ne soit insr dans la page. Pour crer la bote de dialogue, dfinissez dans le code les paramtres devant tre fournis par le concepteur. Vous gnrez ensuite une bote de dialogue pour le comportement de serveur qui invite le concepteur de la page entrer une valeur de paramtre. Remarque : Un paramtre est ajout votre bloc de code sans votre intervention si vous spcifiez que votre code doit tre insr par rapport une balise prcise choisie par le crateur de la page (en d'autres termes, si vous choisissez Relatif une balise spcifique dans le menu droulant Insrer code). Le paramtre ajoute un menu Balise la bote de dialogue du comportement pour permettre au crateur de la page de slectionner une balise.
Dfinition du paramtre dans le code de comportement de serveur

1 Saisissez un marqueur de paramtre l'endroit du code o vous souhaitez insrer la valeur du paramtre fournie
par le concepteur. Le paramtre utilise la syntaxe suivante :

@@parameterName@@
2 Insrez la chane formParam entre des marqueurs de paramtre (@@) :

<% Session("lang_pref") = Request.Form("@@formParam@@"); %>
Supposons que le comportement de serveur contienne le bloc de code suivant :

<% Session("lang_pref") = Request.Form("Form_Object_Name"); %>
Pour imposer au concepteur de la page de fournir la valeur du paramtre Form_Object_Name, entourez la chane de marqueurs de paramtre (@@) :
<% Session("lang_pref") = Request.Form("@@Form_Object_Name@@"); %>
Vous pouvez galement mettre la chane en surbrillance, puis cliquer sur le bouton Insrer le paramtre dans le bloc de code. Entrez un nom de paramtre, puis cliquez sur OK. Dreamweaver remplace toutes les occurrences de la chane mise en surbrillance par le nom du paramtre entour de marqueurs. Dreamweaver utilise les chanes places entre les marqueurs de paramtre comme libell des commandes de la bote de dialogue qu'il gnre (voir la procdure ci-dessous). Dans l'exemple ci-dessus, Dreamweaver cre une bote de dialogue avec le libell suivant :
Remarque : Les noms des paramtres du code de comportement de serveur ne peuvent pas comporter d'espaces. Aussi les libells de la bote de dialogue ne peuvent-ils pas non plus comporter d'espaces. Pour inclure des espaces dans un libell, vous devez modifier le fichier HTML gnr.
version prliminaire
Cration d'une bote de dialogue pour votre comportement de serveur afin de demander la valeur d'un paramtre
1 Dans le Crateur de comportements de serveur, cliquez sur Suivant. 2 Pour modifier l'ordre d'affichage des commandes de la bote de dialogue, slectionnez un paramtre, puis cliquez
sur les flches vers le bas et vers le haut.

3 Pour modifier la commande d'un paramtre, slectionnez le paramtre voulu, puis slectionnez une autre
commande dans la colonne Afficher en tant que.

4 Cliquez sur OK.
Dreamweaver gnre une bote de dialogue comportant une commande pour chacun des paramtres dfinis comme devant tre fournis par le concepteur.
Affichage de la bote de dialogue

Cliquez sur le bouton Plus (+) du panneau Comportements de serveur (Fentre > Comportements de serveur), puis
slectionnez votre comportement de serveur personnalis dans le menu droulant.
Modification de la bote de dialogue cre pour le comportement de serveur

1 Dans le panneau Comportements de serveur (Fentre > Comportements de serveur), cliquez sur le bouton Plus (+)
et choisissez Modifier les comportements de serveur dans le menu droulant.

2 Slectionnez votre comportement de serveur dans la liste, puis cliquez sur Ouvrir. 3 Cliquez sur Suivant.
Une bote de dialogue s'affiche, rpertoriant tous les paramtres fournis par le crateur que vous avez dfinis dans votre code.
4 Pour modifier l'ordre d'affichage des commandes de la bote de dialogue, slectionnez un paramtre, puis cliquez
sur les flches vers le bas et vers le haut.

5 Pour modifier la commande d'un paramtre, slectionnez le paramtre voulu, puis slectionnez une autre
commande dans la colonne Afficher en tant que.

6 Cliquez sur OK.
Modification d'un comportement de serveur

Vous pouvez modifier tout comportement de serveur cr l'aide du Crateur de comportements de serveur, y compris les comportements de serveur que vous avez tlcharg depuis le site Web de Dreamweaver Exchange et d'autres dveloppeurs tiers. Si vous appliquez un comportement une page puis le modifiez dans Dreamweaver, les occurrences de l'ancien comportement disparaissent du panneau Comportements de serveur. Le panneau Comportements de serveur recherche dans la page le code correspondant au code des comportements de serveur connus. Si le code d'un comportement de serveur change, le panneau ne reconnat pas les versions antrieures du comportement sur la page.
Voir aussi
Utilisation du Crateur de comportements de serveur la page 611 Positionnement d'un bloc de code la page 614
version prliminaire
Conservation des anciennes et les nouvelles versions du comportement dans le panneau

Cliquez sur le bouton Plus (+) du panneau Comportements de serveur (Fentre > Comportements de serveur),
choisissez Nouveau comportement de serveur, puis crez une copie de l'ancien comportement de serveur.
Modification du code d'excution d'un comportement de serveur cr l'aide du Crateur de comportements de serveur
et choisissez Modifier les comportements de serveur dans le menu droulant. La bote de dialogue Modifier les comportements de serveur affiche tous les comportements de la technologie serveur courante.
2 Slectionnez le comportement de serveur et cliquez sur Modifier. 3 Slectionnez le bloc de code appropri et modifiez le code, les marqueurs de paramtre ou la position du bloc de
code insrer dans les pages.

4 Si le code modifi ne contient pas de paramtres fournis par le crateur, cliquez sur OK.
Dreamweaver gnre une nouvelle fois le comportement de serveur sans bote de dialogue. Le nouveau comportement de serveur s'affiche dans le menu droulant Plus (+) du panneau Comportements de serveur.
5 Si le code modifi contient des paramtres fournis par le crateur, cliquez sur Suivant.
Dreamweaver vous demande si vous voulez crer une nouvelle bote de dialogue qui crasera la prcdente. Effectuez les modifications requises, puis cliquez sur OK. Dreamweaver enregistre tous les changements apports dans le fichier EDML du comportement de serveur.
Instructions pour le codage

D'une faon gnrale, le code de votre comportement de serveur doit tre compact et robuste. Les dveloppeurs d'applications Web sont trs sensibles au code ajout leurs pages. Respectez les rgles de codage gnralement appliques pour le langage du type de document concern (ColdFusion, JavaScript, VBScript ou PHP). Si vous ajoutez des commentaires, tenez compte des diffrents publics qui devront comprendre le code, tels que les concepteurs de pages Web et d'lments interactifs ou tout autre dveloppeur d'applications Web. Incluez des commentaires prcis dcrivant le but du code et ajoutez toutes les instructions utiles pour l'inclure dans une page. Tenez compte des instructions de codage suivantes lors de la cration de comportements de serveur :
Le contrle des erreurs L'un des lments indispensables. Le code du comportement de serveur doit tre en mesure de traiter les cas d'erreur avec lgance. Essayez de prvoir toutes les ventualits. Exemple : Que se passe-t-il si une demande de paramtre choue ? Si aucun enregistrement n'est envoy suite une requte ? L'utilisation de noms uniques Permet de s'assurer que le code est clairement identifiable et d'viter tout conflit entre le
nom employ et un nom dj utilis dans le code existant. Si la page contient une fonction appele hideLayer(), une variable globale appele ERROR_STRING et que le comportement de serveur insre un code utilisant ces mmes noms, par exemple, ce comportement risque d'entrer en conflit avec le code existant.
Les prfixes de code Permettent d'identifier les fonctions d'excution et les variables globales insres dans une page.
Une convention consiste employer vos propres initiales. N'utilisez jamais le prfixe MM_, qui est exclusivement rserv l'usage de Dreamweaver. Dreamweaver fait prcder toutes les fonctions et variables globales du prfixe MM_ pour les empcher d'entrer en conflit avec le code que vous crivez.
version prliminaire
var MM_ERROR_STRING = "..."; function MM_hideLayer() {
Evitez les blocs de code similaires de sorte que votre bloc ne ressemble pas trop au code d'autres blocs. En effet, si un
bloc de code ressemble un peu trop un autre bloc figurant sur la page, le panneau Comportements de serveur risque d'identifier par erreur ce premier bloc comme une occurrence du deuxime (ou l'inverse). Pour viter ce problme, ajoutez par exemple un commentaire un bloc de code pour le rendre plus unique.
Voir aussi
A propos des comportements de serveur personnaliss la page 610 Droulement du travail des comportements de serveur personnaliss la page 610
Test des comportements de serveur

Dreamweaver Exchange conseille de tester chacun des comportements de serveur que vous crez de la manire suivante :
Appliquez le comportement partir du panneau Comportements de serveur. S'il possde une bote de dialogue,
saisissez des donnes valides dans chaque champ et cliquez sur OK. Vrifiez qu'aucune erreur ne se produit lorsque le comportement est appliqu. Vrifiez que le code d'excution du comportement de serveur apparat dans l'inspecteur de code.
Appliquez une nouvelle fois le comportement de serveur et saisissez des donnes incorrectes dans chaque champ
de la bote de dialogue. Essayez de laisser le champ vierge, de saisir des chiffres levs ou ngatifs ou des caractres non autoriss (tels que /, ?, :, *, etc.) ou d'entrer des lettres dans les champs numriques. Vous avez la possibilit de rdiger des routines de validation de formulaire pour grer les donnes non valides (les routines de validation exigent un codage manuel, technique qui dpasse le cadre de cet ouvrage). Une fois votre comportement de serveur appliqu la page, vrifiez ce qui suit :
Dans le panneau Comportements de serveur, vrifiez que le nom du comportement s'affiche dans la liste des
comportements ajouts la page.
Le cas chant, vrifiez que les icnes de script ct serveur apparaissent sur la page. Les icnes de script ct
serveur gnriques se prsentent sous la forme de blasons dors. Pour voir ces icnes, activez Elments invisibles (Affichage > Assistances visuelles > Elments invisibles).
En mode Code (Affichage > Code), vrifiez qu'aucun code incorrect n'a t gnr.
En outre, si votre comportement de serveur insre dans le document un code tablissant une connexion une base de donnes, crez une base de donnes d'valuation pour tester le code insr dans le document. Vrifiez la connexion en dfinissant des requtes produisant des jeux de donnes de diffrents types et de diffrentes tailles. Enfin, chargez la page sur le serveur et ouvrez-la dans un navigateur. Affichez le code source de la page et vrifiez qu'aucun code HTML non valide n'a t gnr par les scripts ct serveur.
version prliminaire
622
Chapitre 20 : Cration visuelle d'applications

Dans Adobe Dreamweaver CS5, vous pouvez utiliser Adobe ColdFusion, PHP ou ASP pour crer des pages permettant de rechercher, insrer, mettre jour ou supprimer des enregistrements dans une base de donnes, d'afficher des informations principales et dtailles, ainsi que de limiter l'accs certains utilisateurs.
Cration de pages principales et dtailles

A propos des pages principales et dtailles
Les pages principales et dtailles sont des ensembles de pages utilises pour organiser et afficher les donnes d'un jeu d'enregistrements. Ces pages fournissent aux visiteurs de votre site une vue d'ensemble et une vue dtaille. La page principale prsente tous les enregistrements et contient des liens vers des pages de dtails qui fournissent des informations complmentaires sur chaque enregistrement.
Page principale
version prliminaire
Cration visuelle d'applications
Page de dtails
Vous pouvez crer des pages principales et des pages de dtails en insrant un objet de donnes destin crer une page principale et une page de dtails en une seule opration, ou en utilisant des comportements de serveur pour crer ces pages d'une manire plus personnalise. Si vous employez des comportements de serveur pour crer des pages principales et dtailles, vous devez tout d'abord crer une page principale contenant la liste des enregistrements, puis ajouter des liens vers les pages de dtails depuis cette liste.
Voir aussi
A propos des pages de recherche et de rsultats la page 629
Cration d'une page principale

Avant de commencer, vrifiez que vous avez dfini une connexion de base de donnes pour le site.
1 Pour crer une page vierge, choisissez Fichier > Nouveau > Page vierge, slectionnez un type de page puis cliquez
sur Crer. Cette page devient la page principale.

2 Dfinissez un jeu d'enregistrements.
Dans le panneau Liaisons (Fentre > Liaisons), cliquez sur le bouton Plus (+), slectionnez Jeu d'enregistrements puis choisissez les options. Si vous voulez rdiger votre propre instruction SQL, cliquez sur Avanc. Vrifiez que le jeu d'enregistrements contient toutes les colonnes de table ncessaires la cration de la page principale. Le jeu d'enregistrements doit contenir la colonne comportant la cl unique de chacun des enregistrements, savoir la colonne d'ID d'enregistrement. Dans l'exemple suivant, la colonne Code contient la cl unique de chaque enregistrement.
version prliminaire
Colonnes de jeu d'enregistrements slectionnes pour une page principale
En gnral, le jeu d'enregistrements de la page principale extrait quelques colonnes d'un tableau de base de donnes tandis que celui de la page de dtails extrait davantage de colonnes du mme tableau afin de fournir des dtails supplmentaires. Le jeu d'enregistrements peut tre dfini par l'utilisateur au moment de l'excution. Pour plus d'informations, consultez la rubrique Cration de pages de recherche et de rsultats la page 629.
3 Insrez un tableau dynamique afin d'afficher les enregistrements.
Placez le point d'insertion o vous voulez placer le tableau dynamique sur la page. Choisissez Insertion > Objets de donnes > Donnes dynamiques > Tableau dynamique, dfinissez les options puis cliquez sur OK. Si vous souhaitez que les utilisateurs ne puissent pas voir les ID d'enregistrement, supprimez la colonne correspondante du tableau dynamique. Cliquez dans la page afin de la rendre active. Dplacez le curseur vers le haut de la colonne dans le tableau dynamique jusqu' ce que les cellules de la colonne s'affichent avec un contour rouge, puis cliquez sur la colonne. Appuyez sur la touche Suppr pour supprimer la colonne du tableau.
Voir aussi
Dfinition un jeu d'enregistrements sans rdiger d'instructions SQL la page 578 Rdaction d'instructions SQL en vue de la dfinition d'un jeu d'enregistrements avanc la page 580 Cration d'un tableau dynamique la page 604
Cration de liens vers la page de dtails

Aprs avoir cr la page principale et ajout le jeu d'enregistrements, vous devez crer des liens permettant d'ouvrir la page de dtails. Vous devez ensuite modifier les liens de manire transmettre les ID des enregistrements slectionns par l'utilisateur. La page de dtails utilise cet ID pour rechercher l'enregistrement demand dans la base de donnes et l'afficher. Remarque : La cration de liens vers les pages de mises jour s'effectue de la mme manire. La page de rsultats est similaire une page principale, et la page de mises jour une page de dtails.
Voir aussi
Cration de pages de mise jour d'enregistrements la page 640
version prliminaire
Ouverture de la page de dtails et transfert d'un ID d'enregistrement (ColdFusion, PHP)

1 Dans le tableau dynamique, slectionnez l'espace rserv pour le texte qui servira de lien.
Les liens appliqus l'espace rserv sont slectionns.
2 Dans l'inspecteur Proprits, cliquez sur l'icne du dossier situe en regard de la zone Lien. 3 Parcourez vos fichiers afin de slectionner la page de dtails. Celle-ci apparat dans la zone Lien de l'inspecteur
Proprits. Dans le tableau dynamique, le texte slectionn apparat li. Lorsque la page s'excute sur le serveur, le lien s'applique au texte de chaque ligne du tableau.
4 Dans la page principale, slectionnez le lien dans le tableau dynamique. 5 (ColdFusion) Dans la zone Lien de l'inspecteur Proprits, ajoutez la chane suivante la fin de l'URL :
?recordID=#recordsetName.fieldName#
Le point d'interrogation indique au serveur que ce qui suit correspond un ou plusieurs paramtres d'URL. Le mot recordID correspond au nom du paramtre d'URL (vous pouvez inventer n'importe quel nom de votre choix). Notez le nom du paramtre d'URL : vous devrez en effet l'utiliser ultrieurement au niveau de la page de dtails. L'expression qui suit le signe gal correspond la valeur du paramtre. Dans ce cas, la valeur est gnre par une expression ColdFusion qui renvoie un ID d'enregistrement du jeu d'enregistrements. Un ID diffrent est gnr pour chaque ligne du tableau dynamique. Dans l'expression ColdFusion, remplacez recordsetName par le nom de votre jeu d'enregistrements et remplacez fieldName par le nom du champ de votre jeu d'enregistrements qui permet d'identifier chaque enregistrement de faon univoque. Dans la plupart des cas, le champ correspond un numro d'ID d'enregistrement. Dans l'exemple suivant, le champ correspond des codes de location uniques.
locationDetail.cfm?recordID=#rsLocations.CODE#
Lorsque la page s'excute, les valeurs du champ CODE du jeu d'enregistrements sont insres dans les lignes correspondantes du tableau dynamique. Par exemple, si le point de location Canberra, Australie, possde le code CBR, l'URL suivante est utilise dans la ligne Canberra du tableau dynamique :
locationDetail.cfm?recordID=CBR
6 (PHP) Dans le champ Lien de l'inspecteur Proprits, ajoutez la chane suivante la fin de l'URL :
?recordID=<?php echo $row_recordsetName['fieldName']; ?>
Le point d'interrogation indique au serveur que ce qui suit correspond un ou plusieurs paramtres d'URL. Le mot recordID correspond au nom du paramtre d'URL. (Vous pouvez utiliser le nom de votre choix.) Notez le nom du paramtre d'URL : vous devrez en effet l'utiliser ultrieurement au niveau de la page de dtails. L'expression qui suit le signe gal correspond la valeur du paramtre. Dans ce cas, la valeur est gnre par une expression PHP qui renvoie un ID d'enregistrement du jeu d'enregistrements. Un ID diffrent est gnr pour chaque ligne du tableau dynamique. Dans l'expression PHP, remplacez recordsetName par le nom de votre jeu d'enregistrements et fieldName par le nom du champ de votre jeu d'enregistrements qui permet d'identifier chaque enregistrement de faon univoque. Dans la plupart des cas, le champ correspond un numro d'ID d'enregistrement. Dans l'exemple suivant, le champ correspond des codes de location uniques.
version prliminaire
locationDetail.php?recordID=<?php echo $row_rsLocations['CODE']; ?>
locationDetail.php?recordID=CBR
Ouverture de la page de dtails et transfert d'un ID d'enregistrement (ASP)

1 Slectionnez le contenu dynamique devant assurer la fonction de lien. 2 Dans le panneau Comportements de serveur (Fentre > Comportements de serveur), cliquez sur le bouton Plus (+)
et choisissez Aller la page de dtails dans le menu droulant.

3 Dans la bote de dialogue page de dtails, cliquez sur Parcourir et recherchez la page. 4 Indiquez la valeur lui transmettre en slectionnant un jeu d'enregistrements et une colonne dans les menus
droulants Jeu d'enregistrements et Colonne. Cette valeur, telle que l'ID de cl unique, est gnralement propre l'enregistrement.
5 Si vous le souhaitez, vous pouvez transmettre les paramtres de page existants la page de dtails en slectionnant
les options Paramtres d'URL ou Paramtres de formulaire.

6 Cliquez sur OK.
Un lien spcial entoure le texte slectionn. Lorsque l'utilisateur clique sur le lien, le comportement de serveur Aller la page de dtails transmet cette mme page un paramtre d'URL contenant l'ID de l'enregistrement. Prenons l'exemple d'un paramtre d'URL appel id et d'une page de dtails appele customerdetail.asp ; lorsque l'utilisateur clique sur le lien, l'URL se prsente comme suit : http://www.mysite.com/customerdetail.asp?id=43 La premire partie de l'URL, http://www.mysite.com/customerdetail.asp, ouvre la page. La deuxime partie, ?id=43, constitue le paramtre d'URL. Elle prcise la page de dtails quel enregistrement trouver et afficher. Le terme id est le nom du paramtre d'URL et sa valeur est 43. Dans cet exemple, le paramtre d'URL contient le numro d'ID de l'enregistrement, soit 43.
Recherche de l'enregistrement demand et affichage dans la page de dtails

Pour pouvoir afficher l'enregistrement demand par la page principale, vous devez dfinir un ensemble de donnes devant contenir un seul enregistrement et lier les colonnes de l'ensemble de donnes la page de dtails.
1 Passez la page de dtails. Si vous n'avez pas encore cr une page de dtails, crez une page ColdFusion vierge
(Fichier > Nouveau).

2 Dans le panneau Liaisons (Fentre > Liaisons), cliquez sur le bouton Plus (+) et slectionnez Jeu d'enregistrements
(Requte) ou Jeu de donnes (Requte) dans le menu droulant. La bote de dialogue Jeu d'enregistrements ou Jeu de donnes simplifie s'affiche. Si la bote de dialogue avance s'affiche, cliquez sur Simple.
3 Donnez un nom au jeu d'enregistrements, puis slectionnez la source de donnes et la table de base de donnes qui
fourniront les donnes de votre jeu d'enregistrements.

4 Dans la zone Colonnes, slectionnez les colonnes du tableau inclure dans le jeu d'enregistrements.
Le jeu d'enregistrements peut tre identique ou diffrent du jeu de la page principale. Le jeu d'enregistrements d'une page de dtails possde gnralement davantage de colonnes afin d'afficher plus de dtails.
version prliminaire
Si les jeux d'enregistrements sont diffrents, le jeu d'enregistrements de la page de dtails doit avoir au moins une colonne en commun avec celui de la page principale. La colonne commune est gnralement la colonne d'ID de l'enregistrement, mais elle peut galement tre le champ commun aux tableaux relis. Pour inclure uniquement certaines colonnes de la table dans le jeu d'enregistrements, cliquez sur Slectionnes, puis cliquez sur les colonnes souhaites tout en maintenant la touche Ctrl (Windows) ou Commande (Macintosh) enfonce.
5 Pour rechercher et afficher l'enregistrement spcifi dans le paramtre d'URL transmis par la page principale,
renseignez la section Filtre comme suit :
Dans le premier menu droulant de la zone Filtre, slectionnez la colonne du jeu d'enregistrements contenant les
valeurs correspondant celle du paramtre d'URL transmis par la page principale. Par exemple, si le paramtre d'URL contient un numro d'ID d'enregistrement, slectionnez la colonne contenant les numros d'ID d'enregistrement. Dans l'exemple de la section prcdente, la colonne intitule CODE contient les valeurs correspondant celle du paramtre d'URL transmis par la page principale.
Dans le menu droulant situ ct du premier menu, slectionnez le signe gal (=) (si cela n'est pas dj fait). Dans le troisime menu droulant, choisissez Paramtre d'URL. La page principale utilise un paramtre d'URL
pour transmettre des informations la page de dtails.
Dans la quatrime zone, tapez le nom du paramtre d'URL transmis par la page principale.
6 Cliquez sur OK. Le jeu d'enregistrements s'affiche dans le panneau Liaisons. 7 Liez les colonnes du jeu d'enregistrements la page de dtails ; pour ce faire, slectionnez les colonnes dans le
panneau Liaisons (Fentre > Liaisons) et faites-les glisser sur la page. Aprs avoir tlcharg la page principale et la page de dtails sur le serveur, vous pouvez ouvrir la page principale dans un navigateur. Lorsque vous cliquez sur un lien dans la page principale, la page de dtails correspondante s'ouvre et affiche des informations sur l'enregistrement slectionn.
Voir aussi
Recherche d'un enregistrement prcis et affichage sur une page (ASP)

Vous pouvez ajouter un comportement de serveur permettant de rechercher un enregistrement spcifique dans le jeu d'enregistrements, de manire afficher les donnes de l'enregistrement sur la page. Vous ne pouvez recourir au comportement de serveur que si vous utilisez le modle de serveur ASP.
1 Crez une page rpondant aux conditions suivantes :
Un ID d'enregistrement contenu dans un paramtre d'URL a t transmis la page courante par une autre page.
Vous pouvez crer des paramtres d'URL sur l'autre page avec des hyperliens HTML ou un formulaire HTML. Pour plus d'informations, consultez la rubrique Collecte d'informations auprs des utilisateurs la page 674.
Un jeu d'enregistrements a t dfini pour la page courante. Le comportement de serveur extrait les dtails
d'enregistrement de ce jeu. Pour obtenir des instructions, consultez la section Dfinition un jeu d'enregistrements sans rdiger d'instructions SQL la page 578 ou Rdaction d'instructions SQL en vue de la dfinition d'un jeu d'enregistrements avanc la page 580.
Des colonnes de jeu d'enregistrements ont t lies la page. L'enregistrement spcifique doit tre affich sur la
page. Pour plus d'informations, voir Cration de texte dynamique la page 594.
version prliminaire
2 Ajoutez le comportement de serveur afin de trouver l'enregistrement spcifi par le paramtre d'URL. Pour ce faire,
cliquez sur le bouton Plus (+) du panneau Comportements de serveurs (Fentre > Comportements de serveur), puis choisissez Pagination du jeu d'enregistrements > Dplacer vers un enregistrement spcifique.
3 Dans le menu droulant Dplacer vers l'enregistrement dans, slectionnez le jeu que vous avez dfini pour la page. 4 Dans le menu droulant O la colonne, slectionnez la colonne contenant la valeur transmise par l'autre page.
Par exemple, si cette page transmet un numro d'ID d'enregistrement, slectionnez la colonne contenant les numros d'ID d'enregistrement.
5 Dans la zone Correspond au paramtre d'URL, entrez le nom du paramtre d'URL transmis par l'autre page.
Par exemple, si celle-ci a utilis l'URL id=43 pour ouvrir la page d'informations dtailles, tapezid dans la zone Correspond au paramtre d'URL.
6 Cliquez sur OK.
Lorsque le navigateur enverra une nouvelle requte en vue d'obtenir la page, le comportement de serveur lira l'ID d'enregistrement dans le paramtre d'URL transmis par l'autre page et passera l'enregistrement spcifi dans le jeu d'enregistrements.
Cration de pages principale et de dtails en une seule opration

Lorsque vous dveloppez des applications Web, vous pouvez crer rapidement des pages principales et de dtails l'aide de l'objet de donnes Ensemble de pages Principale-Dtails.
1 Pour crer une page dynamique vierge, choisissez Fichier > Nouveau > Page vierge, slectionnez une page
dynamique dans la liste Type de page, puis cliquez sur Crer. Cette page devient la page principale.
2 Dfinissez un jeu d'enregistrements pour la page.
Assurez-vous que le jeu d'enregistrements contient non seulement toutes les colonnes ncessaires pour la page principale, mais galement celles ncessaires pour la page de dtails. En gnral, le jeu d'enregistrements de la page principale extrait quelques colonnes d'un tableau de base de donnes tandis que celui de la page de dtails extrait davantage de colonnes du mme tableau afin de fournir des dtails supplmentaires.
3 Ouvrez la page principale en mode Cration, puis slectionnez Insertion > Objets de donnes > Ensemble de pages
Principale Dtails.
4 Dans le menu droulant Jeu d'enregistrements, assurez-vous d'avoir slectionn le jeu contenant les
enregistrements que vous souhaitez afficher dans la page principale.

5 Dans la zone Champs de la page principale, slectionnez les colonnes du jeu d'enregistrements afficher dans la
page principale. Par dfaut, toutes les colonnes du jeu d'enregistrements sont slectionnes. Si le jeu contient une colonne cl unique, telle que recordID, slectionnez-la et cliquez sur le bouton Moins (-) afin qu'elle ne s'affiche pas sur votre page.
6 Pour modifier l'ordre d'apparition des colonnes dans la page principale, slectionnez une colonne dans la liste et
cliquez sur la flche vers le bas ou vers le haut. Dans la page principale, les colonnes du jeu d'enregistrements sont disposes horizontalement dans un tableau. Un clic sur la flche vers le haut dplace la colonne vers la gauche ; un clic sur la flche vers le bas dplace la colonne vers la droite.
7 Dans le menu droulant Lier la page de dtails depuis, slectionnez la colonne du jeu d'enregistrements qui
affichera une valeur servant galement de lien vers la page de dtails.
version prliminaire
Par exemple, si vous souhaitez que chaque nom de produit de la page principale ait un lien vers la page de dtails, slectionnez la colonne du jeu d'enregistrements contenant les noms de produit.
8 Dans le menu droulant Passer la cl unique, slectionnez la colonne du jeu d'enregistrements contenant les valeurs
identifiant les enregistrements. En gnral, la colonne choisie est le numro d'identification de l'enregistrement. Cette valeur est transmise la page de dtails afin d'identifier l'enregistrement choisi par l'utilisateur.
9 Si la colonne cl unique n'est pas numrique, dsactivez l'option Numrique.
Remarque : Cette option est slectionne par dfaut ; elle existe seulement pour certains modles de serveur.
10 Spcifiez le nombre d'enregistrements devant s'afficher dans la page principale. 11 Dans la zone Nom de la page de dtails, cliquez sur Parcourir et localisez le fichier de page de dtails que vous avez
cr ou bien entrez un nom et laissez l'objet de donnes le soin d'en crer un pour vous.
12 Dans la zone Champs de la page de dtails, slectionnez les colonnes afficher dans la page de dtails.
Par dfaut, toutes les colonnes du jeu d'enregistrements de la page principale sont slectionnes. Si le jeu d'enregistrements contient une colonne cl unique, telle que recordID, slectionnez-la et cliquez sur le bouton Moins (-) afin qu'elle ne s'affiche pas dans la page d'informations dtailles.
13 Pour modifier l'ordre d'apparition des colonnes dans la page de dtails, slectionnez une colonne dans la liste et
cliquez sur la flche vers le bas ou vers le haut. Dans la page de dtails, les colonnes du jeu d'enregistrements sont disposes verticalement dans un tableau. Un clic sur la flche vers le haut dplace la colonne vers le haut ; un clic sur la flche vers le bas dplace la colonne vers le bas.
14 Cliquez sur OK.
L'objet de donnes cre une page de dtails (si vous ne l'avez dj fait) et ajoute un contenu de page dynamique ainsi que des comportements de serveur la page principale et la page de dtails.
15 Personnalisez la mise en forme de la page principale et de la page de dtails en fonction de vos besoins.
Vous pouvez personnaliser la mise en forme de chaque page l'aide des outils de conception de page de Dreamweaver. Vous pouvez galement modifier les comportements de serveur en double-cliquant dessus dans le panneau Comportements de serveur. Aprs avoir cr l'ensemble de pages principales et de dtails l'aide de l'objet de donnes, utilisez le panneau Comportements de serveur (Fentre > Comportements de serveur) pour modifier les divers lments que l'objet de donnes insre dans les pages.
Voir aussi
Modification de contenu dynamique la page 597 Dfinition de sources de contenu dynamique la page 578
Cration de pages de recherche et de rsultats

A propos des pages de recherche et de rsultats
Vous avez la possibilit d'utiliser Dreamweaver pour crer un ensemble de pages permettant aux utilisateurs d'effectuer des recherches dans votre base de donnes et d'afficher les rsultats de la recherche.
version prliminaire
Dans la plupart des cas, pour intgrer cette nouvelle fonction dans votre application Web, un minimum de deux pages s'impose. La premire page contient un formulaire HTML qui va servir la saisie des critres de recherche. Mme si aucune recherche n'est vritablement excute ce niveau, on l'appelle toutefois page de recherche . La deuxime page indispensable la recherche est la page de rsultats, qui permet d'effectuer la plupart du travail. La page de rsultats excute les tches suivantes :
Analyse des critres de recherche envoys par la page de recherche Etablissement d'une connexion la base de donnes et recherche d'enregistrements Cration d'un jeu compos des enregistrements trouvs Affichage du contenu du jeu d'enregistrements
L'insertion d'une page d'informations dtailles est galement possible, en option. Une page d'informations dtailles donne des informations supplmentaires sur un enregistrement figurant dans une page de rsultats. Si la recherche se fait sur la base d'un seul critre, Dreamweaver vous permet d'ajouter des fonctions de recherche votre application Web sans utiliser de requtes ni de variables SQL. Contentez-vous de crer vos pages et de complter les champs des quelques botes de dialogue qui s'affichent l'cran. Si la recherche dpend de plusieurs critres, il vous faut rdiger une instruction SQL pour laquelle vous dfinissez de multiples variables. Dreamweaver insre la requte SQL dans la page. Lorsque la page s'excute sur le serveur, chaque enregistrement de la table de base de donnes est vrifi. Si la valeur du champ indiqu dans un enregistrement rpond aux conditions de la requte SQL, l'enregistrement sera inclus dans le jeu d'enregistrements. La requte SQL en cours cre un jeu d'enregistrements contenant uniquement les rsultats de la recherche. Par exemple, le service commercial peut dtenir des renseignements sur les clients d'une zone particulire dont les revenus sont suprieurs un niveau donn. Dans le formulaire d'une page de recherche, le responsable des ventes saisit un secteur gographique et un niveau de revenu minimum, puis clique sur le bouton Envoyer pour envoyer les deux valeurs un serveur. Sur le serveur, les valeurs sont communiques l'instruction SQL de la page de rsultats, qui cre ensuite le jeu d'enregistrements contenant uniquement les clients du secteur indiqu avec des revenus suprieurs au niveau donn.
Voir aussi
Dfinition de sources de contenu dynamique la page 578 Cration de pages de recherche et de rsultats la page 629
Cration de la page de recherche

Une page de recherche sur le Web se compose normalement de champs destins la saisie de critres particuliers. La page de recherche doit contenir au minimum un formulaire HTML et un bouton Envoyer. Pour ajouter un formulaire HTML une page de recherche, procdez comme suit :
1 Ouvrez la page de recherche ou crez une nouvelle page, puis choisissez Insertion > Formulaire > Formulaire.
Un formulaire vierge est cr sur la page. Il est parfois ncessaire d'activer les lments invisibles (Affichage > Assistances visuelles > Elments invisibles) pour afficher les contours du formulaire, reprsents par de fines lignes rouges.
2 Insrez des objets de formulaire afin de permettre aux utilisateurs de taper leurs critres de recherche en choisissant
la commande Formulaire dans le menu Insertion.
version prliminaire
Les objets de formulaire sont de formes diverses : champs de texte, menus, options et boutons radio. La quantit d'objets qu'il est possible d'insrer dans un formulaire pour aider les utilisateurs mieux cerner leurs recherches est quasi illimite. Toutefois, n'oubliez pas que, plus le nombre de critres sur la page de recherche est grand, plus votre instruction SQL sera complexe.
3 Ajoutez un bouton Envoyer au formulaire (Insertion > Formulaire > Bouton). 4 (Facultatif) Pour changer l'tiquette du bouton Envoyer, slectionnez ce bouton, ouvrez l'inspecteur Proprits
(Fentre > Proprits) et entrez une nouvelle valeur dans la zone de texte Valeur. A prsent, il convient d'informer le formulaire du lieu o envoyer les critres de recherche lorsque l'utilisateur clique sur le bouton Envoyer.
5 Slectionnez le formulaire l'aide de la balise <form> dans le slecteur de balises situ en bas de la fentre de
document, comme le montre l'illustration suivante :
6 Dans la zone Action de l'inspecteur Proprits du formulaire, tapez le nom de fichier de la page de rsultats
effectuant la recherche proprement dite dans la base de donnes.

7 Dans le menu droulant Mthode, slectionnez l'une des options suivantes pour dterminer comment les donnes
du formulaire doivent tre envoyes au serveur :
GET envoie les donnes en les annexant l'URL, sous forme de chane de requte. Cependant, la taille des URL tant
limite 8192 caractres, vous ne pouvez pas utiliser la mthode GET avec les formulaires longs.
POST envoie les donnes dans le corps d'un message. Default utilise la mthode par dfaut du navigateur (GET, gnralement).
La page de recherche est termine.
Voir aussi
A propos des pages de recherche et de rsultats la page 629 Cration de formulaires Web la page 677
Cration d'une page de rsultats de base

Lorsque l'utilisateur clique sur le bouton Rechercher du formulaire, les critres sont envoys une page de rsultats sur le serveur. La charge de rcupration des enregistrements dans la base de donnes incombe non pas la page de recherche sur le navigateur, mais la page de rsultats sur le serveur. Si la page de recherche envoie un critre unique au serveur, vous pouvez crer la page de rsultats sans requte ni aucune variable SQL. Vous crez un jeu d'enregistrements lmentaire auquel vous ajoutez un filtre qui supprime tous les enregistrements non conformes au critre envoys par la page de recherche. Remarque : Si vous appliquez plusieurs conditions de recherche, utilisez la bote de dialogue Jeu d'enregistrements avance pour dfinir votre jeu (consultez la section Cration d'une page de rsultats avance la page 633).
version prliminaire
Voir aussi
A propos des pages de recherche et de rsultats la page 629 Cration de la page de recherche la page 630 Cration d'une page de dtails pour une page de rsultats la page 635
Cration du jeu d'enregistrements contenant les rsultats de la recherche

1 Ouvrez la page de rsultats dans la fentre de document.
Si vous n'avez pas encore cr de page de rsultats, crez une page dynamique vierge (Fichier > Nouveau > Page vierge).
2 Crez un jeu d'enregistrements ; pour ce faire, ouvrez le panneau Liaisons (Fentre > Liaisons), cliquez sur le
bouton Plus (+) et slectionnez Jeu d'enregistrements dans le menu droulant.

3 Assurez-vous que la bote de dialogue Jeu d'enregistrements simplifie s'affiche l'cran.
Si la bote de dialogue avance s'affiche la place, cliquez sur le bouton Simple pour ouvrir sa version simplifie.
4 Attribuez un nom au jeu d'enregistrements et slectionnez une connexion.
La connexion doit tre tablie avec une base de donnes contenant des informations susceptibles d'intresser l'utilisateur.
5 Dans le menu droulant Table, slectionnez le tableau consulter dans la base de donnes.
Remarque : Si la recherche implique un seul critre, vous ne pouvez consulter des enregistrements que dans un seul tableau. Pour consulter plusieurs tableaux simultanment, utilisez la bote de dialogue Jeu d'enregistrements avance et dfinissez une requte SQL.
6 Pour inclure uniquement certaines colonnes de la table dans le jeu d'enregistrements, cliquez sur Slectionnes,
puis slectionnez les colonnes souhaites dans la liste tout en maintenant la touche Ctrl (Windows) ou Commande (Macintosh) enfonce. Il est prfrable d'inclure uniquement les colonnes qui contiennent des informations que vous souhaitez afficher dans la page de rsultats. Pour le moment, ne fermez pas la bote de dialogue Jeu d'enregistrements. Vous l'utiliserez lors de l'tape suivante pour rcuprer les critres envoys par la page de recherche et pour crer un filtre destin exclure tous les enregistrements non conformes aux critres de recherche.
version prliminaire
Cration du filtre du jeu d'enregistrements

1 Dans le premier menu droulant de la zone Filtre, slectionnez la colonne de la table de base de donnes dans
laquelle effectuer la recherche. Par exemple, si la valeur envoye par la page de recherche est le nom d'une ville, slectionnez la colonne qui rpertorie des noms de ville.
2 Dans le menu droulant situ ct du premier menu, slectionnez le signe gal (=) (en principe, la valeur par
dfaut).
3 Dans le troisime menu droulant, choisissez Variable de formulaire ou Paramtre d'URL, selon que vous
empruntez les mthodes POST ou GET, respectivement. La page de recherche utilise soit une variable de formulaire, soit un paramtre d'URL pour transmettre des informations la page de rsultats.
4 Dans la quatrime zone, entrez le nom de l'objet de formulaire qui accepte le critre sur la page de recherche.
Le nom de l'objet fait aussi fonction de nom pour la variable de formulaire ou le paramtre d'URL. Pour obtenir ce nom, revenez la page de recherche, cliquez sur l'objet de formulaire pour le slectionner et prenez note du nom qui s'affiche dans l'inspecteur Proprits. Par exemple, vous dsirez crer un jeu d'enregistrements comprenant uniquement les raids et randonnes dans un pays particulier. Supposons qu'une colonne du tableau se nomme TRIPLOCATION et que le formulaire HTML de votre page de recherche utilise la mthode GET et contienne un objet de menu nomm Location qui affiche une liste de pays. L'exemple suivant indique quoi peut ressembler votre section de filtre :
5 (Facultatif) Cliquez sur Tester, tapez une valeur test et cliquez sur OK pour vous connecter la base de donnes et
crer une instance du jeu d'enregistrements. La valeur test est une simulation de la valeur qui sans cela aurait t renvoye de la page de recherche. Cliquez sur OK pour fermer le jeu d'enregistrements test.
6 Si le jeu d'enregistrements vous convient, cliquez sur OK.
Un script ct serveur est insr sur votre page ; lorsqu'il est excut sur le serveur, il vrifie chaque enregistrement de la table de base de donnes. Si la valeur du champ indiqu dans un enregistrement rpond aux conditions de filtrage, l'enregistrement sera inclus dans le jeu d'enregistrements. Le script cre un jeu d'enregistrements qui ne contient que les rsultats de la recherche. L'tape suivante consiste afficher le jeu d'enregistrements sur la page de rsultats. Pour plus d'informations, consultez la section Affichage des rsultats de la recherche la page 635.
Cration d'une page de rsultats avance

Si la page de recherche envoie plusieurs critres au serveur, il vous faut formuler une requte SQL pour la page de rsultats et intgrer les critres de recherche dans les variables SQL.
version prliminaire
Remarque : Si vous n'appliquez qu'une seule condition de recherche, utilisez la bote de dialogue Jeu d'enregistrements simplifie pour dfinir votre jeu (consultez la section Cration d'une page de rsultats de base la page 631).
1 Ouvrez la page de rsultats dans Dreamweaver, puis crez un jeu d'enregistrements ; pour ce faire, ouvrez le
panneau Liaisons (Fentre > Liaisons), cliquez sur le bouton Plus (+) et choisissez Jeu d'enregistrements dans le menu droulant.
2 Assurez-vous que la bote de dialogue Jeu d'enregistrements avance s'affiche l'cran.
La bote de dialogue avance comporte une zone de texte qui permet la saisie d'instructions SQL. Si la bote de dialogue simplifie s'affiche la place, cliquez sur le bouton Avanc pour ouvrir sa version avance.
3 Attribuez un nom au jeu d'enregistrements et slectionnez une connexion.
La connexion doit tre tablie avec une base de donnes contenant des informations susceptibles d'intresser l'utilisateur.
4 Saisissez l'instruction Select dans la zone de texte SQL.
Assurez-vous que l'instruction comporte une clause WHERE avec des variables pour stocker les critres de recherche. Dans l'exemple suivant, les variables sont varLastName et varDept :
SELECT EMPLOYEEID, FIRSTNAME, LASTNAME, DEPARTMENT, EXTENSION FROM EMPLOYEE WHERE LASTNAME LIKE 'varLastName' AND DEPARTMENT LIKE 'varDept'
Pour limiter la frappe, utilisez l'arborescence des lments de la base de donnes situe dans la partie infrieure de la bote de dialogue Jeu d'enregistrements avance. Pour obtenir des instructions, consultez la section Rdaction d'instructions SQL en vue de la dfinition d'un jeu d'enregistrements avanc la page 580. Pour plus d'informations sur la syntaxe SQL, consultez le guide Initiation SQL www.adobe.com/go/learn_dw_sqlprimer.
5 Donnez aux variables SQL les valeurs des critres de recherche. Pour ce faire, cliquez sur le bouton Plus (+) dans la
zone Variables, puis tapez le nom de la variable, sa valeur par dfaut (valeur que doit prendre la variable si aucune valeur d'excution n'est renvoye) et sa valeur d'excution (gnralement un objet de serveur renfermant une valeur envoye par un navigateur, telle qu'une variable de demande). Dans l'exemple ASP suivant, le formulaire HTML sur la page de recherche utilise la mthode GET et contient deux champs de texte, LastName et Department .
Dans un environnement ColdFusion, les valeurs d'excution seraient #LastName# et #Department#. Dans PHP, les valeurs d'excution seraient $_REQUEST["LastName"] et $_REQUEST["Department"].
6 (Facultatif) Cliquez sur Tester pour crer une instance du jeu d'enregistrements l'aide des valeurs de variable par
dfaut. Les valeurs par dfaut sont une simulation des valeurs qui sans cela auraient t renvoyes de la page de recherche. Cliquez sur OK pour fermer le jeu d'enregistrements test.
7 Si le jeu d'enregistrements vous convient, cliquez sur OK.
La requte SQL est insre dans votre page.
version prliminaire
L'tape suivante consiste afficher le jeu d'enregistrements sur la page de rsultats.
Affichage des rsultats de la recherche

Aprs avoir cr un jeu d'enregistrements pour y insrer les rsultats de la recherche, vous devez afficher les informations sur la page de rsultats. L'affichage des enregistrements est une opration simple : il suffit de faire glisser des colonnes individuelles du panneau Liaisons vers la page de rsultats. Ajoutez au choix des liens de navigation pour aller et venir dans le jeu d'enregistrements, ou crez une rgion rpte si vous prfrez afficher plusieurs enregistrements sur la page. Vous pouvez galement insrer des liens sur une page d'informations dtailles. Pour plus d'informations sur les mthodes d'affichage du contenu dynamique sur une page autres que l'affichage de rsultats dans un tableau dynamique, consultez la section Affichage des enregistrements de base de donnes la page 599.
1 Placez le point d'insertion l'endroit o vous souhaitez que le tableau dynamique apparaisse dans la page de
rsultats, puis slectionnez Insertion > Objets de donnes > Donnes dynamiques > Tableau dynamique.
2 Dans la bote de dialogue Tableau dynamique, slectionnez le jeu d'enregistrements que vous avez dfini afin de
prsenter les rsultats de recherche.

3 Cliquez sur OK. Un tableau dynamique contenant les rsultats de la recherche est insr sur la page de rsultats.
Cration d'une page de dtails pour une page de rsultats

Vos pages de recherche et de rsultats peuvent inclure une page comportant des informations dtailles propos d'enregistrements spcifiques rpertoris dans la page de rsultats. Dans ce cas, la page de rsultats fait galement fonction de page principale dans un ensemble de pages principale/dtails.
Voir aussi
Cration de pages principale et de dtails en une seule opration la page 628 Cration de la page de recherche la page 630 Cration d'une page de rsultats de base la page 631
Cration d'un lien qui ouvre une page associe (ASP)

Vous pouvez crer un lien qui ouvre une page associe et transmet cette dernire les paramtres existants. Vous ne pouvez recourir au comportement de serveur que si vous utilisez le modle de serveur ASP. Avant d'ajouter un comportement de serveur Aller la page associe une page, assurez-vous que la page reoit les paramtres de formulaire ou d'URL d'une autre page. Le rle du comportement de serveur consiste transmettre ces paramtres une troisime page. Vous pouvez, par exemple, communiquer les critres de recherche reus par une page de rsultats une autre page, de manire ce que l'utilisateur n'ait pas les taper plusieurs fois. Sur la page, vous pouvez galement slectionner du texte ou une image devant assurer la fonction de lien ou placer le pointeur sans ne rien slectionner pour que le texte du lien soit insr.
1 Dans la zone de texte Aller la page associe, cliquez sur Parcourir et localisez le fichier de la page associe.
Si la page active s'envoie des donnes elle-mme, tapez son nom de fichier.
2 Si les critres communiquer ont t directement reus d'un formulaire HTML via la mthode GET ou qu'ils
figurent dans l'URL de la page, choisissez l'option Paramtres d'URL.
version prliminaire
3 Si les critres communiquer ont t directement reus d'un formulaire HTML via la mthode POST, choisissez
l'option Paramtres de formulaire.

4 Cliquez sur OK.
Lorsque vous cliquez sur le nouveau lien, la page transmet les critres la page associe par le biais d'une chane de requte.
Voir aussi
Collecte d'informations auprs des utilisateurs la page 674
Cration d'une page d'insertion d'enregistrement

A propos de la cration de pages d'insertion d'enregistrements
Votre application peut contenir une page permettant l'utilisateur d'insrer de nouveaux enregistrements dans une base de donnes. Vous trouverez un didacticiel consacr la cration d'une page d'insertion d'enregistrements l'adresse www.adobe.com/go/learn_dw_webapp_fr. Une page d'insertion se compose de deux lments :
un formulaire HTML permettant aux utilisateurs de saisir des donnes ; un comportement de serveur Insrer l'enregistrement pour mettre jour la base de donnes.
Lorsque l'utilisateur clique sur le bouton Envoyer d'un formulaire, le comportement de serveur insre des enregistrements dans une table de base de donnes. Vous pouvez inclure ces lments dans la page en une seule opration l'aide de l'objet de donnes Formulaire d'insertion d'enregistrement ou les insrer individuellement l'aide des outils de formulaire de Dreamweaver et du panneau Comportements de serveur. Remarque : La page d'insertion ne peut pas contenir plus d'un comportement de serveur de modification d'enregistrement la fois. Par exemple, vous ne pouvez pas y inclure galement un comportement de serveur Mettre jour l'enregistrement ou Supprimer l'enregistrement.
Cration d'une page d'insertion lment par lment

Vous pouvez galement crer une page d'insertion l'aide des outils de formulaires et des comportements de serveur.
Voir aussi
Cration de formulaires Web la page 677
Ajout d'un formulaire HTML dans une page d'insertion

1 Crez une page dynamique (Fichier > Nouveau > Page vierge) et effectuez-en la mise en forme l'aide des outils de
cration de Dreamweaver.
2 Pour ajouter le formulaire HTML, placez le point d'insertion l'endroit o le formulaire doit apparatre, puis
slectionnez Insertion > Formulaire > Formulaire.
version prliminaire
Un formulaire vierge est cr sur la page. Il est parfois ncessaire d'activer les lments invisibles (Affichage > Assistances visuelles > Elments invisibles) pour afficher les contours du formulaire, reprsents par de fines lignes rouges.
3 Pour nommer le formulaire HTML, commencez par le slectionner en cliquant sur la balise <form> au bas de la
fentre de document, ouvrez l'inspecteur Proprits (Fentre > Proprits), puis entrez un nom dans la zone Nom du formulaire. Vous n'avez pas besoin de dfinir l'attribut action ou method du formulaire pour lui indiquer o et comment envoyer les donnes d'enregistrement lorsque l'utilisateur clique sur le bouton Envoyer. Le comportement de serveur Insrer un enregistrement dfinit automatiquement ces attributs.
4 Insrez un objet de formulaire tel qu'un champ de texte (Insertion > Formulaire > Champ de texte) pour chaque
colonne de la table de base de donnes dans laquelle insrer des enregistrements. Les objets de formulaire sont destins la saisie de donnes. On utilise souvent des champs de texte dans ce but, mais rien ne vous empche d'utiliser des menus, des options et des boutons radio.
5 Ajoutez un bouton Envoyer au formulaire (Insertion > Formulaire > Bouton).
Vous pouvez modifier l'tiquette du bouton Envoyer ; pour ce faire, slectionnez ce bouton, ouvrez l'inspecteur Proprits (Fentre > Proprits) et entrez une nouvelle valeur dans la zone Etiquette.
Ajout d'un comportement de serveur destin l'insertion d'enregistrements dans une base de donnes (ColdFusion)
et choisissez Insrer l'enregistrement dans le menu droulant.

2 Dans le menu droulant Envoyer les valeurs partir de, slectionnez un formulaire. 3 Dans le menu droulant Source de donnes, slectionnez une connexion la base de donnes. 4 Saisissez votre nom d'utilisateur et votre mot de passe. 5 Dans le menu droulant Insrer dans la table, slectionnez la table de base de donnes dans laquelle insrer
l'enregistrement.
6 Indiquez la colonne de base de donnes dans laquelle vous souhaitez insrer l'enregistrement. Dans le menu
droulant Valeur, slectionnez l'objet de formulaire devant insrer l'enregistrement. Dans le menu droulant Envoyer en tant que, slectionnez ensuite le type de donnes de l'objet de formulaire. Le type de donnes est celui qu'attend la colonne de la table de base de donnes (texte, numrique, valeurs d'option boolennes). Rptez cette procdure pour chaque objet du formulaire.
7 Dans la zone Aprs l'insertion, aller , indiquez la page ouvrir aprs insertion de l'enregistrement dans la table ou
cliquez sur le bouton Parcourir pour naviguer jusqu'au fichier.

8 Cliquez sur OK.
Dreamweaver ajoute la page un comportement de serveur qui permet aux utilisateurs d'insrer des enregistrements dans une table de base de donnes. Pour ce faire, il leur suffit de complter le formulaire HTML et de cliquer sur le bouton Envoyer.
Ajout d'un comportement de serveur destin l'insertion d'enregistrements dans une base de donnes (ASP)
version prliminaire
2 Dans le menu droulant Connexion, slectionnez une connexion la base de donnes.
Cliquez sur le bouton Dfinir si vous devez dfinir une connexion.

3 Dans le menu droulant Insrer dans la table, slectionnez la table de base de donnes dans laquelle vous souhaitez
insrer l'enregistrement.

5 Dans le menu droulant Obtenir les valeurs de, slectionnez le formulaire HTML utiliser pour la saisie des
donnes. Dreamweaver slectionne automatiquement le premier formulaire apparaissant sur votre page.
7 Cliquez sur OK.
Dreamweaver ajoute la page un comportement de serveur qui permet aux utilisateurs d'insrer des enregistrements dans une table de base de donnes. Pour ce faire, il leur suffit de complter le formulaire HTML et de cliquer sur le bouton Envoyer. Pour modifier le comportement de serveur, ouvrez le panneau Comportements de serveur (Fentre > Comportements de serveur) et double-cliquez sur le comportement Insrer un enregistrement.
Ajout d'un comportement de serveur destin l'insertion d'enregistrements dans une base de donnes (PHP)

2 Dans le menu droulant Envoyer les valeurs partir de, slectionnez un formulaire. 3 Dans le menu droulant Connexion, slectionnez une connexion la base de donnes. 4 Dans le menu droulant Insrer un tableau, slectionnez la table de base de donnes dans laquelle vous souhaitez

7 Cliquez sur OK.
version prliminaire
Dreamweaver ajoute la page un comportement de serveur qui permet aux utilisateurs d'insrer des enregistrements dans une table de base de donnes. Pour ce faire, il leur suffit de complter le formulaire HTML et de cliquer sur le bouton Envoyer.
Cration de la page d'insertion en une seule opration

1 Ouvrez la page en mode Cration, puis slectionnez Insertion > Objets de donnes > Insrer un enregistrement >
Assistant de formulaire d'insertion d'enregistrement.

2 Dans le menu droulant Connexion, slectionnez une connexion la base de donnes. Cliquez sur le bouton
Dfinir si vous devez dfinir une connexion.

3 Dans le menu droulant Insrer dans la table, slectionnez la table de base de donnes dans laquelle vous souhaitez
4 Si vous utilisez ColdFusion, saisissez le nom d'utilisateur et le mot de passe. 5 Dans la zone Aprs l'insertion, aller , indiquez la page ouvrir aprs insertion de l'enregistrement dans la table ou

6 Dans la zone Champs de formulaire, spcifiez les objets de formulaire que vous souhaitez inclure dans le formulaire
HTML de la page d'insertion, ainsi que les colonnes de la base de donnes que chaque objet de formulaire devra mettre jour. Par dfaut, Dreamweaver cre un objet de formulaire pour chaque colonne de la table de base de donnes. Si votre base de donnes gnre automatiquement un ID de cl unique pour chaque enregistrement cr, supprimez l'objet de formulaire correspondant la colonne cl ; pour ce faire, slectionnez l'objet dans la liste et cliquez sur le bouton Moins (-). Ainsi, l'utilisateur du formulaire ne pourra pas entrer une valeur d'ID qui existe dj. Vous pouvez galement modifier l'ordre des objets de formulaire dans le formulaire HTML ; il vous suffit de slectionner un objet dans la liste et de le dplacer dans cette dernire en cliquant sur la flche vers le haut ou vers le bas situe sur la droite de la bote de dialogue.
7 Dfinissez la faon dont chaque champ de saisie de donnes devra tre affich dans le formulaire HTML en cliquant
sur une ligne du tableau Champs de formulaire et en entrant les informations suivantes dans les zones affiches sous le tableau :
Dans la zone Etiquette, saisissez la description afficher ct du champ de saisie de donnes. Par dfaut,
Dreamweaver affiche dans ce champ le nom de la colonne de la table.
Dans le menu droulant Afficher comme, slectionnez l'objet de formulaire utiliser comme champ de saisie de
donnes. Vous avez le choix entre Champ de texte, Zone de texte, Menu, Case cocher, Groupe de boutons radio et Texte. Pour les entres en lecture seule, choisissez Texte. Vous pouvez galement choisir Champ Mot de passe, Champ de fichier et Champ masqu. Remarque : Les champs masqus sont insrs la fin du formulaire.
Dans le menu droulant Envoyer en tant que, slectionnez le format de donnes accept par la table de base de
donnes. Par exemple, si les donnes numriques sont les seules admises, choisissez Numrique.
Dfinissez les proprits de l'objet de formulaire. Vous avez le choix entre plusieurs possibilits, en fonction de
l'objet de formulaire slectionn comme champ de saisie de donnes. Pour les champs de texte, les zones de texte et le texte, vous pouvez entrer une valeur initiale. Pour les menus et les groupes de boutons radio, ouvrez une autre bote de dialogue afin de dfinir des proprits. Pour les options, slectionnez l'option Coche ou Non coche.
8 Cliquez sur OK.
version prliminaire
Dreamweaver insre dans la page un formulaire HTML et un comportement de serveur Insrer l'enregistrement. Les objets de formulaire sont disposs sur la page sous forme d'un tableau simple, que vous pouvez ensuite personnaliser l'aide des outils de conception de page de Dreamweaver. (assurez-vous qu'aucun objet de formulaire ne dpasse les limites du formulaire). Pour modifier le comportement de serveur, ouvrez le panneau Comportements de serveur (Fentre > Comportements de serveur) et double-cliquez sur le comportement Insrer un enregistrement.
Cration de pages de mise jour d'enregistrements

A propos des pages de mise jour d'enregistrements
Votre application peut contenir un ensemble de pages permettant l'utilisateur de mettre jour les enregistrements existants d'une table de base de donnes. L'ensemble de pages se compose normalement d'une page de recherche, d'une page de rsultats et d'une page de mise jour. La page de recherche et la page de rsultats permettent aux utilisateurs de rcuprer un enregistrement et la page de mise jour de le modifier.
Recherche de l'enregistrement mettre jour

Lorsqu'un utilisateur veut mettre jour un enregistrement, il doit d'abord localiser celui-ci dans la base de donnes. Vous devez donc crer une page de recherche et de rsultats qui fonctionnera en tandem avec la page de mise jour. L'utilisateur entre des critres de recherche dans la page de recherche et slectionne l'enregistrement dans la page de rsultats. Lorsqu'il clique sur l'enregistrement sur la page de rsultats, la page de mise jour s'ouvre et affiche l'enregistrement dans un formulaire HTML.
Voir aussi
Cration de pages de recherche et de rsultats la page 629
Cration de liens vers la page de mise jour

Aprs avoir cr les pages de recherche et de rsultats, vous devez ajouter des liens la page de rsultats afin d'ouvrir la page de mise jour. Vous devez ensuite modifier les liens de manire transmettre les ID des enregistrements slectionns par l'utilisateur. La page de mise jour utilise cet ID pour rechercher l'enregistrement demand dans la base de donnes et l'afficher. Le processus destin ouvrir la page de mise jour et la transmission d'un ID d'enregistrement est identique celui d'ouverture d'une page de dtails et la transmission d'un ID d'enregistrement. Pour plus d'informations, consultez la section Cration de liens vers la page de dtails la page 624.
Voir aussi
Paramtres d'URL la page 675
Rcupration de l'enregistrement mettre jour

Lorsque la page de rsultats a transmis un ID d'enregistrement la page de mise jour, de manire identifier l'enregistrement mettre jour, la page de mise jour doit lire le paramtre, rcuprer l'enregistrement dans la table de base de donnes, puis le stocker temporairement dans un jeu d'enregistrements.
1 Crez une page dans Dreamweaver et enregistrez-la.
version prliminaire
Cette page est alors utilise comme page de mise jour.

2 Dans le panneau Liaisons (Fentre > Liaisons), cliquez sur le bouton Plus (+) et slectionnez Jeu d'enregistrements.
Si la bote de dialogue avance s'affiche, cliquez sur Simple. La bote de dialogue avance comporte une zone de texte qui permet la saisie d'instructions SQL, contrairement la bote de dialogue simplifie.
3 Nommez le jeu d'enregistrements et indiquez o se trouvent les donnes mettre jour l'aide des menus
droulants Connexion et Table.

4 Cliquez sur l'option Slectionnes et choisissez une colonne cl (gnralement la colonne ID de l'enregistrement),
ainsi que les colonnes contenant les donnes devant tre mises jour.
5 Configurez la zone Filtre de manire ce que la valeur de votre colonne cl soit gale celle du paramtre d'URL
correspondant transmis par la page de rsultats. Ce type de filtre cre un jeu d'enregistrements ne contenant que l'enregistrement spcifi par la page de rsultats. Par exemple, si votre colonne cl contient des informations d'ID d'enregistrement et s'appelle PRID et si la page principale transmet les informations d'ID d'enregistrement correspondantes dans le paramtre d'URL appel id, votre zone Filtre doit avoir l'aspect suivant :
6 Cliquez sur OK.
Lorsque l'utilisateur slectionne un enregistrement sur la page de rsultats, la page de mise jour gnre un jeu d'enregistrements contenant uniquement l'enregistrement slectionn.
Finalisation de la page d'actualisation lment par lment

Une page de mise jour est constitue de trois lments :
un jeu d'enregistrements filtr permettant de rcuprer l'enregistrement partir d'une table de base de donnes ; un formulaire HTML permettant aux utilisateurs de modifier les donnes de l'enregistrement ; un comportement de serveur Mettre jour l'enregistrement permettant de mettre jour la base de donnes.
Vous pouvez insrer sparment les deux derniers lments de base d'une page de mise jour l'aide des outils de formulaire et du panneau Comportements de serveur.
Voir aussi
Rcupration de l'enregistrement mettre jour la page 640 Cration de formulaires Web la page 677
Ajout d'un formulaire HTML dans une page d'actualisation

1 Crez une page (Fichier > Nouveau > Page vierge) Cette page devient la page de mise jour. 2 Mettez la page en forme l'aide des outils de conception de Dreamweaver. 3 Pour ajouter le formulaire HTML, placez le point d'insertion l'endroit o le formulaire doit apparatre, puis
slectionnez Insertion > Formulaire > Formulaire. Un formulaire vierge est cr sur la page. Il est parfois ncessaire d'activer les lments invisibles (Affichage > Assistances visuelles > Elments invisibles) pour afficher les contours du formulaire, reprsents par de fines lignes rouges.
version prliminaire
fentre de document, ouvrez l'inspecteur Proprits (Fentre > Proprits), puis entrez un nom dans la zone Nom du formulaire. Vous n'avez pas besoin de dfinir l'attribut action ou method du formulaire pour lui indiquer o et comment envoyer les donnes d'enregistrement lorsque l'utilisateur clique sur le bouton Envoyer. Le comportement de serveur Mettre jour un enregistrement dfinit automatiquement ces attributs.
5 Insrez un objet de formulaire tel qu'un champ de texte (Insertion > Formulaire > Champ de texte) pour chaque
colonne mettre jour dans la table de base de donnes. Les objets de formulaire sont destins la saisie de donnes. On utilise souvent des champs de texte dans ce but, mais rien ne vous empche d'utiliser des menus, des options et des boutons radio. A chaque objet de formulaire doit correspondre une colonne dans le jeu d'enregistrements dfini prcdemment. La seule exception est la colonne cl unique, qui ne doit pas avoir d'objet de formulaire correspondant.
Vous pouvez modifier l'tiquette du bouton Envoyer ; pour ce faire, slectionnez ce bouton, ouvrez l'inspecteur Proprits (Fentre > Proprits) et entrez une nouvelle valeur dans la zone Etiquette.
Affichage de l'enregistrement dans le formulaire

1 Assurez-vous que vous avez dfini au pralable un jeu d'enregistrements pour stocker l'enregistrement mettre jour.
Consultez la section Rcupration de l'enregistrement mettre jour la page 640.

2 Liez chaque objet du formulaire des donnes du jeu d'enregistrements, comme dcrit dans les sections suivantes :
Affichage de contenu dynamique dans des champs de texte HTML la page 688 Activation dynamique d'une case cocher HTML la page 688 Activation dynamique d'un bouton radio HTML la page 689 Insertion ou modification d'un menu de formulaire HTML dynamique la page 687 Ajout de la fonctionnalit dynamique des menus de formulaire HTML existants la page 688
Ajout d'un comportement de serveur destin la mise jour de la base de donnes

et choisissez Mettre jour l'enregistrement dans le menu droulant. La bote de dialogue Mettre jour l'enregistrement s'affiche.
2 Dans le menu droulant Envoyer les valeurs partir de, slectionnez un formulaire. 3 Dans le menu droulant Source de donnes ou Connexion, slectionnez une connexion la base de donnes. 4 Tapez votre nom d'utilisateur et votre mot de passe, le cas chant. 5 Dans le menu droulant Mettre jour la table, slectionnez la table de base de donnes qui contient l'enregistrement
mettre jour.
6 (ColdFusion, PHP) Indiquez la colonne de base de donnes mettre jour. Dans le menu droulant Valeur,
slectionnez l'objet de formulaire devant mettre jour la colonne. Dans le menu droulant Envoyer en tant que, slectionnez le type de donnes de l'objet de formulaire, puis choisissez Cl primaire si vous souhaitez dfinir cette colonne comme tant la cl primaire. Le type de donnes est celui qu'attend la colonne de la table de base de donnes (texte, numrique, valeurs d'option boolennes).
version prliminaire
Rptez cette procdure pour chaque objet du formulaire.

7 (ASP) Dans le menu droulant Slectionner un enregistrement dans, indiquez le jeu contenant l'enregistrement
affich dans le formulaire HTML. Dans le menu droulant Colonne cl unique, slectionnez une colonne cl (gnralement le champ d'ID de l'enregistrement) devant identifier l'enregistrement dans la table de la base de donnes. Si la valeur est un nombre, slectionnez l'option Numrique. Une colonne cl n'accepte gnralement que des valeurs numriques, mais dans certains cas, elle accepte galement du texte.
8 Dans la zone Aprs la mise jour, aller ou En cas de russite, aller , indiquez la page ouvrir aprs mise jour
de l'enregistrement dans la table ou cliquez sur le bouton Parcourir pour naviguer jusqu'au fichier.
9 (ASP) Indiquez la colonne de base de donnes mettre jour. Dans le menu droulant Valeur, slectionnez l'objet
de formulaire devant mettre jour la colonne. Dans le menu droulant Envoyer en tant que, slectionnez ensuite le type de donnes de l'objet de formulaire. Le type de donnes est celui qu'attend la colonne de la table de base de donnes (texte, numrique, valeurs d'option boolennes). Rptez cette procdure pour chaque objet du formulaire.
10 Cliquez sur OK.
Dreamweaver ajoute la page un comportement de serveur qui permet aux utilisateurs de mettre jour les enregistrements d'une table de base de donnes ; pour ce faire, il leur suffit de modifier les informations affiches dans le formulaire HTML et de cliquer sur le bouton Envoyer. Pour modifier le comportement de serveur, ouvrez le panneau Comportements de serveur (Fentre > Comportements de serveur) et double-cliquez sur le comportement Mettre jour l'enregistrement.
Finalisation de la page de mise jour en une seule opration

Une page de mise jour est constitue de trois lments :
un jeu d'enregistrements filtr permettant de rcuprer l'enregistrement partir d'une table de base de donnes ; un formulaire HTML permettant aux utilisateurs de modifier les donnes de l'enregistrement ; un comportement de serveur Mettre jour l'enregistrement permettant de mettre jour la base de donnes.
Vous pouvez insrer les deux derniers lments d'une page de mise jour en une seule tape l'aide de l'objet de donnes Formulaire de mise jour des enregistrements. Cet objet insre dans la page un formulaire HTML et un comportement de serveur Mettre jour l'enregistrement. Pour que vous puissiez utiliser l'objet de donnes, il faut que votre application Web soit capable d'identifier l'enregistrement mettre jour et que votre page de mise jour soit en mesure de le rcuprer. Aprs avoir insr les lments sur la page au moyen de l'objet de donnes, vous pouvez utiliser les outils de conception de Dreamweaver pour personnaliser le formulaire ou le panneau Comportements de serveur pour modifier le comportement de serveur Mettre jour l'enregistrement. Remarque : La page de mise jour ne peut pas contenir plus d'un comportement de serveur de modification d'enregistrement la fois. Par exemple, vous ne pouvez pas y inclure galement un comportement de serveur Insrer un enregistrement ou Supprimer l'enregistrement.
1 Ouvrez la page en mode Cration, puis choisissez Insertion > Objets de donnes > Mettre jour l'enregistrement >
Assistant de formulaire de mise jour des enregistrements. La bote de dialogue Formulaire de mise jour des enregistrements s'affiche.
2 Dans le menu droulant Connexion, slectionnez une connexion la base de donnes.
Cliquez sur le bouton Dfinir si vous devez dfinir une connexion.
version prliminaire
3 Dans le menu droulant Table mettre jour, slectionnez la table de base de donnes qui contient l'enregistrement
mettre jour.
4 Dans le menu droulant Slectionner un enregistrement dans, indiquez le jeu contenant l'enregistrement affich
dans le formulaire HTML.

5 Dans le menu droulant Colonne cl unique, slectionnez une colonne cl (gnralement le champ d'ID de
l'enregistrement) devant identifier l'enregistrement dans la table de la base de donnes. Si la valeur est un nombre, slectionnez l'option Numrique. Une colonne cl n'accepte gnralement que des valeurs numriques, mais dans certains cas, elle accepte galement du texte.
6 Dans la zone Aprs la mise jour, aller , indiquez la page ouvrir aprs la mise jour de l'enregistrement dans la
table.
7 Dans la zone Champs du formulaire, indiquez les colonnes de la table de base de donnes que chaque objet de
formulaire doit mettre jour. Par dfaut, Dreamweaver cre un objet de formulaire pour chaque colonne de la table de base de donnes. Si votre base de donnes gnre automatiquement un ID de cl unique pour chaque enregistrement cr, supprimez l'objet de formulaire correspondant la colonne cl ; pour ce faire, slectionnez l'objet dans la liste et cliquez sur le bouton Moins (-). Ainsi, l'utilisateur du formulaire ne pourra pas entrer une valeur d'ID qui existe dj. Vous pouvez galement modifier l'ordre des objets de formulaire dans le formulaire HTML ; il vous suffit de slectionner un objet dans la liste et de le dplacer dans cette dernire en cliquant sur la flche vers le haut ou vers le bas situe sur la droite de la bote de dialogue.
8 Dfinissez la faon dont chaque champ de saisie de donnes doit s'afficher sur le formulaire HTML. Pour ce faire,
cliquez sur une ligne du tableau Champs de formulaire et indiquez les informations suivantes dans les zones affiches sous la table :
Dans la zone Etiquette, saisissez la description afficher ct du champ de saisie de donnes. Par dfaut,
Dreamweaver affiche dans ce champ le nom de la colonne de la table.
Dans le menu droulant Afficher comme, slectionnez l'objet de formulaire utiliser comme champ de saisie de
donnes. Vous avez le choix entre Champ de texte, Zone de texte, Menu, Case cocher, Groupe de boutons radio et Texte. Pour les entres en lecture seule, choisissez Texte. Vous pouvez galement choisir Champ Mot de passe, Champ de fichier et Champ masqu. Remarque : Les champs masqus sont insrs la fin du formulaire.
Dans le menu droulant Envoyer en tant que, slectionnez le format de donnes qui sera accept par cette colonne
de la table de base de donnes. Par exemple, si les donnes numriques sont les seules admises, choisissez Numrique.
Dfinissez les proprits de l'objet de formulaire. Vous avez le choix entre plusieurs possibilits, en fonction de
l'objet de formulaire slectionn comme champ de saisie de donnes. Pour les champs de texte, les zones de texte et le texte, vous pouvez entrer une valeur initiale. Pour les menus et les groupes de boutons radio, ouvrez une autre bote de dialogue afin de dfinir des proprits. Pour les options, slectionnez l'option Coche ou Non coche.
9 Dfinissez les proprits des autres objets de formulaire en slectionnant une autre ligne Champs du formulaire et
en saisissant une tiquette, une valeur Afficher en tant que et une valeur Envoyer en tant que. Pour les menus et les groupes de boutons radio, ouvrez une autre bote de dialogue pour dfinir les proprits. Pour les options, dfinissez une comparaison entre la valeur actuelle de l'enregistrement pour l'option et une valeur donne afin de dterminer si l'option doit tre active ou dsactive lorsque l'enregistrement est affich.
10 Cliquez sur OK.
Dreamweaver insre dans la page un formulaire HTML et un comportement de serveur Mettre jour l'enregistrement.
version prliminaire
L'objet de donnes insre dans la page un formulaire HTML et un comportement de serveur Mettre jour l'enregistrement. Les objets de formulaire sont disposs sur la page sous forme d'un tableau simple, que vous pouvez ensuite personnaliser l'aide des outils de conception de page de Dreamweaver. (assurez-vous qu'aucun objet de formulaire ne dpasse les limites du formulaire). Pour modifier le comportement de serveur, ouvrez le panneau Comportements de serveur (Fentre > Comportements de serveur) et double-cliquez sur le comportement Mettre jour l'enregistrement.
Voir aussi
Rcupration de l'enregistrement mettre jour la page 640 Insertion ou modification d'un menu de formulaire HTML dynamique la page 687
Options des proprits d'lment de formulaire

La bote de dialogue Proprits d'lment de formulaire a pour fonction de dfinir les options des lments de formulaire figurant sur des pages qui permettent aux utilisateurs de mettre jour les enregistrements d'une base de donnes.
1 Choisissez Manuellement ou Depuis la base de donnes selon la manire dont vous envisagez de crer l'lment de
formulaire.
2 Cliquez sur le bouton Plus (+) pour ajouter un lment. 3 Saisissez l'tiquette et la valeur de l'lment. 4 Pour qu'un lment particulier soit slectionn l'ouverture de la page dans un navigateur ou lorsqu'un
enregistrement s'affiche dans le formulaire, indiquez une valeur gale celle de l'lment dans la zone Slectionner une valeur gale . Pour choisir une valeur statique ou dynamique, cliquez sur l'icne reprsentant un clair, puis slectionnez une valeur dynamique dans la liste des sources de donnes. Dans les deux cas, la valeur indique doit correspondre l'une des valeurs de l'lment.
Cration de pages de suppression d'enregistrements

A propos des pages de suppression d'enregistrements
Votre application peut comporter un ensemble de pages permettant l'utilisateur de supprimer des enregistrements d'une base de donnes. L'ensemble de pages se compose normalement d'une page de recherche, d'une page de rsultats et d'une page de suppression. Ce type de page est gnralement une page d'informations dtailles fonctionnant en tandem avec une page de rsultats. Les pages de recherche et de rsultats permettent aux utilisateurs de rcuprer l'enregistrement et la page de suppression de le confirmer puis de le supprimer. Aprs avoir cr les pages de recherche et de rsultats, vous devez ajouter des liens la page de rsultats, de manire ouvrir la page de suppression, puis crer une page de suppression qui affiche les enregistrements et un bouton Envoyer.
version prliminaire
Recherche de l'enregistrement supprimer

Lorsqu'un utilisateur veut supprimer un enregistrement, il doit d'abord localiser celui-ci dans la base de donnes. Vous devez donc crer une page de recherche et de rsultats qui fonctionnera en tandem avec la page de suppression. L'utilisateur entre des critres de recherche dans la page de recherche et slectionne l'enregistrement dans la page de rsultats. Lorsque l'utilisateur clique sur l'enregistrement, la page de suppression s'ouvre et l'enregistrement s'affiche dans un formulaire HTML sur cette page.
Voir aussi
Cration de pages de recherche et de rsultats la page 629
Cration de liens vers une page de suppression

Aprs avoir cr les pages de recherche et de rsultats, vous devez ajouter des liens la page de rsultats afin d'ouvrir la page de suppression. Vous devez ensuite modifier les liens de manire transmettre les ID des enregistrements que l'utilisateur veut supprimer. La page de suppression utilise cet ID pour rechercher l'enregistrement et l'afficher.
Voir aussi
Paramtres d'URL la page 675
Cration manuelle de liens

1 Dans la page de rsultats, crez une colonne dans le tableau utilis pour afficher les enregistrements. Pour ce faire,
cliquez l'intrieur de la dernire colonne du tableau et slectionnez Modifier > Tableau > Insrer des lignes ou des colonnes.
2 Activez l'option Colonnes et l'option Aprs la colonne courante, puis cliquez sur OK.
Une colonne est ajoute au tableau.

3 Dans la colonne que vous venez de crer, entrez la chane Delete dans la ligne contenant les espaces rservs pour
le contenu dynamique. Vous devez entrer la chane dans la rgion rpte onglets. Vous pouvez galement insrer une image comprenant un mot ou un symbole voquant une suppression.
4 Slectionnez la chane Delete afin de lui appliquer un lien. 5 Dans l'inspecteur Proprits, entrez le nom de la page de suppression dans la zone Lien. Vous pouvez entrer le nom
de fichier de votre choix. Une fois que vous avez cliqu en dehors de la zone Lien, la chane Delete apparat lie dans le tableau. Si vous activez le mode En direct, vous pouvez observer que le lien s'applique au mme texte dans chaque ligne du tableau.
6 Slectionnez le lien de suppression dans la page de rsultats. 7 (ColdFusion) Dans la zone Lien de l'inspecteur Proprits, ajoutez la chane suivante la fin de l'URL :
?recordID=#recordsetName.fieldName#
Le point d'interrogation indique au serveur que ce qui suit correspond un ou plusieurs paramtres d'URL. Le mot recordID correspond au nom du paramtre d'URL (vous pouvez inventer n'importe quel nom de votre choix). Notez le nom du paramtre d'URL : vous devrez en effet l'utiliser ultrieurement au niveau de la page de suppression.
version prliminaire
L'expression qui suit le signe gal correspond la valeur du paramtre. Dans ce cas, la valeur est gnre par une expression ColdFusion qui renvoie un ID d'enregistrement du jeu d'enregistrements. Un ID diffrent est gnr pour chaque ligne du tableau dynamique. Dans l'expression ColdFusion, remplacez recordsetName par le nom de votre jeu d'enregistrements et fieldName par le nom du champ de votre jeu d'enregistrements qui permet d'identifier chaque enregistrement de faon univoque. Dans la plupart des cas, le champ correspond un numro d'ID d'enregistrement. Dans l'exemple ci-dessous, le champ correspond des codes de location uniques :
confirmDelete.cfm?recordID=#rsLocations.CODE#
confirmDelete.cfm?recordID=CBR
8 (PHP) Dans le champ Lien de l'inspecteur Proprits, ajoutez la chane suivante la fin de l'URL :
?recordID=<?php echo $row_recordsetName['fieldName']; ?>
Le point d'interrogation indique au serveur que ce qui suit correspond un ou plusieurs paramtres d'URL. Le mot recordID correspond au nom du paramtre d'URL (vous pouvez inventer n'importe quel nom de votre choix). Notez le nom du paramtre d'URL : vous devrez en effet l'utiliser ultrieurement au niveau de la page de suppression. L'expression qui suit le signe gal correspond la valeur du paramtre. Dans ce cas, la valeur est gnre par une expression PHP qui renvoie un ID d'enregistrement du jeu d'enregistrements. Un ID diffrent est gnr pour chaque ligne du tableau dynamique. Dans l'expression PHP, remplacez recordsetName par le nom de votre jeu d'enregistrements et fieldName par le nom du champ de votre jeu d'enregistrements qui permet d'identifier chaque enregistrement de faon univoque. Dans la plupart des cas, le champ correspond un numro d'ID d'enregistrement. Dans l'exemple ci-dessous, le champ correspond des codes de location uniques :
confirmDelete.php?recordID=<?php echo $row_rsLocations['CODE']; ?>
confirmDelete.php?recordID=CBR
9 (ASP) Dans la zone Lien de l'inspecteur Proprits, ajoutez la chane suivante la fin de l'URL :
?recordID=<%=(recordsetName.Fields.Item("fieldName").Value)%>
Le point d'interrogation indique au serveur que ce qui suit correspond un ou plusieurs paramtres d'URL. Le mot recordID correspond au nom du paramtre d'URL (vous pouvez inventer n'importe quel nom de votre choix). Notez le nom du paramtre d'URL : vous devrez en effet l'utiliser ultrieurement au niveau de la page de suppression. L'expression qui suit le signe gal correspond la valeur du paramtre. Dans ce cas, la valeur est gnre par une expression ASP qui renvoie un ID d'enregistrement partir du jeu d'enregistrements. Un ID diffrent est gnr pour chaque ligne du tableau dynamique. Dans l'expression ASP, remplacez recordsetName par le nom de votre jeu d'enregistrements et fieldName par le nom du champ de votre jeu d'enregistrements qui permet d'identifier chaque enregistrement de faon univoque. Dans la plupart des cas, le champ correspond un numro d'ID d'enregistrement. Dans l'exemple ci-dessous, le champ correspond des codes de location uniques :
confirmDelete.asp?recordID=<%=(rsLocations.Fields.Item("CODE").Value)%>
confirmDelete.asp?recordID=CBR
version prliminaire
Cration visuelle des liens (ASP uniquement)

1 Dans la page de rsultats, crez une colonne dans le tableau utilis pour afficher les enregistrements. Pour ce faire,
cliquez l'intrieur de la dernire colonne du tableau et slectionnez Modifier > Tableau > Insrer des lignes ou des colonnes.
2 Activez l'option Colonnes et l'option Aprs la colonne courante, puis cliquez sur OK.
Une colonne est ajoute au tableau.

3 Dans la colonne que vous venez de crer, entrez la chane Delete dans la ligne contenant les espaces rservs pour
le contenu dynamique. Vous devez entrer la chane dans la rgion rpte onglets. Vous pouvez galement insrer une image comprenant un mot ou un symbole voquant une suppression.
4 Slectionnez la chane Delete afin de lui appliquer un lien. 5 Dans le panneau Comportements de serveur (Fentre > Comportements de serveur), cliquez sur le bouton Plus (+)
et choisissez Aller la page de dtails dans le menu droulant.

6 Dans la bote de dialogue Page de dtails, cliquez sur Parcourir et recherchez la page supprimer. 7 Dans la zone Passer le paramtre d'URL, entrez le nom de votre paramtre, par exemple recordID.
Vous pouvez utiliser le nom de votre choix ; veillez toutefois en prendre note, car vous devrez l'employer plus loin, dans la page de suppression.
8 Indiquez la valeur transmettre la page de suppression en slectionnant un jeu d'enregistrements et une colonne
dans les menus droulants Jeu d'enregistrements et Colonne. Cette valeur, telle que l'ID de cl unique, est gnralement propre l'enregistrement.
9 Activez l'option Paramtres d'URL. 10 Cliquez sur OK.
Un lien spcial entoure le texte slectionn. Lorsque l'utilisateur clique sur le lien, le comportement de serveur Aller la page de dtails transmet la page de suppression indique un paramtre d'URL contenant l'ID de l'enregistrement. Prenons l'exemple d'un paramtre d'URL appel recordID et d'une page de suppression appele confirmdelete.asp ; lorsque l'utilisateur clique sur le lien, l'URL se prsente comme suit : http://www.mysite.com/confirmdelete.asp?recordID=43 La premire partie de l'URL, http://www.mysite.com/confirmdelete.asp, ouvre la page de suppression. La deuxime partie, ?recordID=43, constitue le paramtre d'URL. Elle prcise la page de suppression quel enregistrement trouver et afficher. Le terme recordID est le nom du paramtre d'URL et sa valeur est 43. Dans cet exemple, le paramtre d'URL contient le numro d'ID de l'enregistrement, soit 43.
Cration de la page de suppression

Aprs avoir cr la page rpertoriant les enregistrements, passez la page de suppression. La page de suppression affiche l'enregistrement et invite l'utilisateur confirmer sa suppression. Lorsque l'utilisateur confirme l'opration en cliquant sur le bouton du formulaire, l'application Web supprime l'enregistrement de la base de donnes. La cration de cette page consiste crer un formulaire HTML, rcuprer l'enregistrement afficher dans le formulaire, l'afficher dans le formulaire et ajouter la logique permettant de supprimer l'enregistrement de la base de donnes. Les oprations de rcupration et d'affichage de l'enregistrement impliquent de dfinir un jeu d'enregistrements destin recevoir cet enregistrement (celui que l'utilisateur souhaite supprimer) et de lier les colonnes du jeu d'enregistrements au formulaire.
version prliminaire
Remarque : La page de suppression ne peut pas contenir plus d'un comportement de serveur de modification d'enregistrement la fois. Par exemple, vous ne pouvez pas y inclure galement un comportement de serveur Insrer un enregistrement ou Mettre jour l'enregistrement.
Cration d'un formulaire HTML permettant d'afficher l'enregistrement

1 Crez une page et enregistrez-la de sorte qu'elle devienne la page de suppression dfinie dans la section prcdente.
Vous avez dfini une page de suppression lors de la cration du lien de suppression (voir la section prcdente). Utilisez le nom de cette page lorsque vous enregistrez le fichier pour la premire fois (par exemple, deleteConfirm.cfm).
2 Insrez un formulaire HTML dans la page (Insertion > Formulaire > Formulaire). 3 Ajoutez un champ masqu au formulaire.
Le champ masqu est ncessaire pour stocker l'ID d'enregistrement transmis par le paramtre d'URL. Pour insrer un champ masqu, placez le point d'insertion dans le formulaire et choisissez Insertion > Formulaire > Champ masqu.
4 Ajoutez un bouton au formulaire.
Ce bouton permet l'utilisateur de confirmer la suppression de l'enregistrement affich. Pour insrer un bouton, placez le point d'insertion dans le formulaire et choisissez Insertion > Formulaire > Bouton.
5 Modifiez la prsentation de la page selon les besoins et enregistrez-la.
Rcupration de l'enregistrement supprimer

1 Dans le panneau Liaisons (Fentre > Liaisons), cliquez sur le bouton Plus (+) et slectionnez Jeu d'enregistrements
(Requte) dans le menu droulant. La bote de dialogue Jeu d'enregistrements ou Jeu de donnes simplifie s'affiche. Si la bote de dialogue Jeu d'enregistrements avance s'affiche, cliquez sur Simple.
2 Attribuez un nom au jeu d'enregistrements, puis slectionnez une source de donnes ainsi que la table de base de
donnes contenant les enregistrements que les utilisateurs peuvent supprimer.

3 Dans la zone Colonnes, slectionnez les colonnes (champs d'enregistrement) afficher sur la page.
Pour n'afficher que certains champs de l'enregistrement, cliquez sur Slectionnes, puis cliquez sur les champs souhaits tout en maintenant la touche Ctrl (Windows) ou Commande (Macintosh) enfonce. Assurez-vous que le champ d'ID d'enregistrement est compris dans la slection, mme si vous ne souhaitez pas l'afficher.
4 Renseignez la section Filtre comme suit, pour rechercher et afficher l'enregistrement spcifi dans le paramtre
d'URL transmis par la page de rsultats :
Dans le premier menu droulant de la zone Filtre, slectionnez la colonne du jeu d'enregistrements contenant les
valeurs correspondant celle du paramtre d'URL transmis par la page comportant les liens Supprimer. Par exemple, si le paramtre d'URL contient un numro d'ID d'enregistrement, slectionnez la colonne contenant les numros d'ID d'enregistrement. Dans l'exemple de la section prcdente, la colonne intitule CODE contient les valeurs correspondant celle du paramtre d'URL transmis par la page contenant les liens de suppression.
Dans le menu droulant situ en regard du premier menu, slectionnez le signe gal (=) (si cela n'est pas dj fait). Dans le troisime menu droulant, choisissez Paramtre d'URL. La page contenant les liens de suppression utilise
un paramtre d'URL pour transmettre des informations la page de suppression.
version prliminaire
Dans le quatrime champ, entez le nom du paramtre d'URL transmis par la page contenant les liens de
suppression.
5 Cliquez sur OK.
Le jeu d'enregistrements s'affiche dans le panneau Liaisons.
Affichage de l'enregistrement supprimer

1 Slectionnez les colonnes de jeu de donnes (champs d'enregistrement) dans le panneau Liaisons et faites-les glisser
vers la page de suppression. Veillez insrer le contenu dynamique en lecture seule au sein des limites du formulaire. Pour plus d'informations sur l'insertion de contenu dynamique dans une page, consultez la section Cration de texte dynamique la page 594. Vous devez ensuite lier la colonne d'ID d'enregistrement au champ de formulaire masqu.
2 Vrifiez que l'option Elments invisibles est active (Affichage > Assistances visuelles > Elments invisibles), puis
cliquez sur l'icne en forme de bouclier jaune reprsentant le champ masqu. Le champ masqu est slectionn.
3 Dans l'inspecteur Proprits, cliquez sur l'icne en forme d'clair situe en regard de la zone Valeur. 4 Dans la bote de dialogue Donnes dynamiques, slectionnez la colonne d'ID d'enregistrement dans le jeu
d'enregistrements. Dans l'exemple suivant, la colonne d'ID d'enregistrement, CODE, contient des codes de magasin uniques.
version prliminaire
Colonne d'ID de l'enregistrement slectionne
5 Cliquez sur OK et enregistrez la page.
Page de suppression termine
Insertion de la logique permettant de supprimer l'enregistrement

Aprs avoir affich l'enregistrement slectionn sur la page de suppression, vous devez insrer sur cette page la logique permettant de supprimer l'enregistrement de la base de donnes lorsque l'utilisateur clique sur le bouton de confirmation de la suppression. Le comportement de serveur Supprimer l'enregistrement permet d'insrer rapidement cette logique.
Ajout d'un comportement de serveur pour supprimer un enregistrement (ColdFusion, PHP)

1 Assurez-vous que la page de suppression ColdFusion ou PHP est ouverte dans Dreamweaver. 2 Dans le panneau Comportements de serveur (Fentre > Comportements de serveur), cliquez sur le bouton Plus (+),
puis choisissez Supprimer l'enregistrement.
version prliminaire
3 Vrifiez que l'option Valeur de la cl primaire est slectionne dans la zone Vrifier au pralable si la variable est
dfinie. Vous dfinirez la valeur de la cl primaire ultrieurement dans cette bote de dialogue.
4 Dans le menu Connexion ou Source de donnes (ColdFusion), slectionnez une connexion la base de donnes de
sorte que le comportement de serveur puisse se connecter la base de donnes concerne.

5 Dans le menu droulant Table, slectionnez la table de base de donnes contenant les enregistrements supprimer. 6 Dans le menu droulant Colonne de la cl primaire, slectionnez la colonne contenant les ID d'enregistrement.
Le comportement de serveur Supprimer l'enregistrement recherche une correspondance dans cette colonne. Cette dernire doit contenir les mmes ID d'enregistrement que la colonne du jeu d'enregistrements que vous avez lie au formulaire masqu sur la page. Si l'ID d'enregistrement est numrique, slectionnez l'option Numrique.
7 (PHP) Dans le menu droulant Valeur de la cl primaire, slectionnez la variable de la page contenant l'ID
d'enregistrement identifiant l'enregistrement supprimer. La variable est gnre par le champ de formulaire masqu. Son nom correspond l'attribut name du champ masqu. Suivant l'attribut method du formulaire, elle se prsente sous la forme d'un paramtre de formulaire ou d'un paramtre d'URL.
8
Dans la zone Aprs la suppression, aller ou En cas de russite, aller , indiquez la page ouvrir aprs la suppression de l'enregistrement de la table.
Cette page peut par exemple prsenter un bref message indiquant l'utilisateur que l'opration a russi, ou bien rpertorier les enregistrements restants afin que l'utilisateur puisse vrifier que l'enregistrement a bien t supprim.
9 Cliquez sur OK et enregistrez votre travail.
Ajout d'un comportement de serveur pour supprimer un enregistrement (ASP)

1 Assurez-vous que la page de suppression ASP est ouverte dans Dreamweaver. 2 Dans le panneau Comportements de serveur (Fentre > Comportements de serveur), cliquez sur le bouton Plus (+),
puis choisissez Supprimer l'enregistrement.

3 Dans le menu droulant Connexion, slectionnez une connexion la base de donnes de sorte que le
comportement de serveur puisse se connecter la base de donnes concerne. Cliquez sur le bouton Dfinir si vous devez dfinir une connexion.
version prliminaire
4 Dans le menu droulant Supprimer de la table, slectionnez la table de base de donnes qui contient les
enregistrements supprimer.
5 Dans le menu droulant Slectionner un enregistrement dans, indiquez le jeu contenant les enregistrements
supprimer.
6 Dans le menu droulant Colonne cl unique, slectionnez une colonne cl (gnralement le champ d'ID de
l'enregistrement) devant identifier l'enregistrement dans la table de la base de donnes. Si la valeur est un nombre, slectionnez l'option Numrique. Une colonne cl n'accepte gnralement que des valeurs numriques, mais dans certains cas, elle accepte galement du texte.
7 Dans le menu droulant Supprimer en envoyant, spcifiez le formulaire HTML contenant le bouton Envoyer qui
envoie la commande de suppression au serveur.

8 Dans la zone Aprs la suppression, aller , indiquez la page ouvrir aprs la suppression de l'enregistrement de la
table. Cette page peut par exemple prsenter un bref message indiquant l'utilisateur que l'opration a russi, ou bien rpertorier les enregistrements restants afin que l'utilisateur puisse vrifier que l'enregistrement a bien t supprim.
9 Cliquez sur OK et enregistrez votre travail.
Test des pages de suppression

1 Envoyez les pages de recherche, de rsultats et de suppression votre serveur Web, ouvrez un navigateur et
recherchez un enregistrement de test susceptible d'tre supprim. Lorsque vous cliquez sur un lien de suppression sur la page de rsultats. la page de suppression doit s'afficher.
2 Cliquez sur le bouton Confirmer pour supprimer l'enregistrement de la base de donnes. 3 Recherchez l'enregistrement pour vous assurer qu'il a bien t supprim. L'enregistrement ne doit plus figurer sur
la page de rsultats.
Cration de pages avec objets de manipulation de donnes avancs (ColdFusion, ASP)

A propos des objets de commande ASP
Un objet de commande ASP est un objet de serveur qui effectue une opration donne dans une base de donnes. Il peut contenir toute instruction SQL valide, y compris une instruction qui renvoie un jeu d'enregistrements, ou qui insre, met jour ou supprime des enregistrements dans une base de donnes. Un objet de commande peut modifier la structure d'une base de donnes si l'instruction SQL ajoute ou supprime une colonne dans la table. Il peut galement servir excuter une procdure stocke dans une base de donnes. Un objet de commande est dit rutilisable car le serveur peut excuter plusieurs fois la commande l'aide d'une seule version compile de l'objet. Pour qu'une commande soit rutilisable, dfinissez la proprit Prpar de l'objet de commande sur true, comme dans l'instruction VBScript suivante :
mycommand.Prepared = true
Si vous savez que la commande sera excute un grand nombre de fois, il est conseill d'utiliser une seule version compile de l'objet pour amliorer l'efficacit des oprations effectues dans la base de donnes.
version prliminaire
Remarque : Les commandes prpares ne sont pas prises en charge par tous les fournisseurs de base de donnes. Si votre base de donnes ne les prend pas en charge, elle risque de renvoyer une erreur lorsque vous dfinissez cette proprit sur true. Elle pourrait mme ignorer la requte de prparation de la commande et dfinir la proprit Prpar sur false. Sur une page ASP, un objet de commande est cr par l'intermdiaire de scripts. Cependant, Dreamweaver vous permet de crer des objets de commande sans avoir crire une seule ligne de code ASP.
Modification d'une base de donnes l'aide des commandes ASP

A l'aide de Dreamweaver, vous pouvez crer des objets de commande ASP qui insrent, mettent jour et suppriment des enregistrements dans une base de donnes. Il vous suffit d'indiquer l'objet de commande l'instruction ou la procdure stocke SQL qui effectue l'opration dans la base de donnes.
1 Dans Dreamweaver, ouvrez la page ASP qui doit excuter la commande. 2 Dans le panneau Comportements de serveur (Fentre > Comportements de serveur), cliquez sur le bouton Plus (+),
puis choisissez Commande.

3 Saisissez le nom de la commande, choisissez une connexion une base de donnes contenant les enregistrements
modifier, puis slectionnez l'opration de modification que la commande doit effectuer (Insrer, Mettre jour ou Supprimer). Dreamweaver rdige le dbut de l'instruction SQL en fonction du type d'opration slectionn. Par exemple, voici la bote de dialogue qui s'affiche lorsque vous slectionnez le type Insrer :
4 Compltez l'instruction SQL.
Pour plus d'informations sur la rdaction d'instructions SQL modifiant des bases de donnes, consultez un manuel Transact-SQL.
5 Dfinissez les variables SQL dans la zone Variables. Fournissez le nom et la valeur d'excution. La dfinition du type
et de la taille de chaque variable empche les attaques par injection.
version prliminaire
L'exemple ci-dessous illustre une instruction Insert qui contient trois variables SQL. Les valeurs de ces variables sont fournies par des paramtres d'URL transmis la page, dont la dfinition s'affiche dans la colonne Valeur d'excution de la zone Variables.
Pour obtenir la valeur de taille, utilisez le volet Bases de donnes de Dreamweaver. Dans le volet Bases de donnes, trouvez votre base de donnes et dveloppez-la. Trouvez ensuite la table que vous utilisez et dveloppez-la. La table contient les tailles de vos champs. Par exemple, elle peut indiquer ADDRESS (WChar 50). Dans cet exemple, la taille vaut 50. Vous pouvez galement trouver la taille dans votre application de base de donnes. Remarque : Les types de donnes Numrique, Boolen et date/heure emploient toujours la taille -1. Pour dterminer la valeur Type, reportez-vous au tableau suivant :
Type dans la base de donnes Numrique (MS Access, MS SQL Server, MySQL) Boolen, Oui/Non (MS Access, MS SQL Server, MySQL) Date/Heure (MS Access, MS SQL Server, MySQL) Tous les autres types de champ de texte, y compris les types de donnes texte MySQL char, varchar et longtext Texte (MS Access) ou nvarchar, nchar (MS SQL Server) Type dans Dreamweaver Double Double DBTimeStamp LongVarChar Taille -1 -1 -1 reportez-vous la table de base de donnes reportez-vous la table de base de donnes 1073741823
VarWChar
Mmo (MS Access), ntext (MS SQL Server), ou champs acceptant de grandes quantits de texte
LongVarWChar
Pour plus d'informations sur le type et la taille des variables SQL, consultez le site Web d'Adobe l'adresse www.adobe.com/go/4e6b330a_fr.
6 Fermez la bote de dialogue.
Dreamweaver insre dans votre page un code ASP qui, lorsqu'il s'excute sur le serveur, cre une commande qui insre, met jour ou supprime des enregistrements dans la base de donnes. Par dfaut, la proprit Prpar de l'objet de commande est dfinie sur true, ce qui permet au serveur d'application de rutiliser une seule version compile de l'objet chaque fois que la commande est excute. Pour modifier ce paramtre, basculez en mode Code et dfinissez la proprit Prpar sur false.
version prliminaire
7 Crez une page avec un formulaire HTML, de manire permettre aux utilisateurs d'entrer des donnes sur les
enregistrements. Dans le formulaire HTML, ajoutez trois champs de texte (txtVille, txtAdresse et txtTlphone) et un bouton Envoyer. Le formulaire utilise la mthode GET et envoie les valeurs des champs de texte la page contenant votre commande.
A propos des procdures stockes

Bien qu'il soit possible d'utiliser des comportements de serveur pour crer des pages qui modifient des bases de donnes, vous pouvez galement crer ces pages en utilisant des objets de manipulation de base de donnes, tels que des procdures stockes ou des objets de commande ASP. Une procdure stocke est un lment de base de donnes rutilisable qui effectue des oprations dans une base de donnes. Elle contient du code SQL qui permet notamment d'insrer, de mettre jour ou de supprimer des enregistrements. Elle peut galement modifier la structure de la base de donnes. Une procdure stocke peut ainsi servir ajouter une colonne ou encore supprimer une table. Elle peut galement appeler une autre procdure stocke, accepter des paramtres d'entre et renvoyer la procdure d'appel plusieurs valeurs sous la forme de paramtres de sortie. Une procdure stocke est dite rutilisable car vous pouvez effectuer une opration dans la base de donnes plusieurs fois l'aide d'une seule version compile de la procdure. Si vous savez qu'une tche de base de donnes sera excute un grand nombre de fois ou qu'elle sera excute par diffrentes applications, il est conseill d'utiliser une procdure stocke pour amliorer l'efficacit des oprations effectues dans la base de donnes. Remarque : Les bases de donnes MySQL et Microsoft Access ne prennent pas en charge les procdures stockes.
Ajout d'une procdure stocke (ColdFusion)

Vous pouvez modifier une base de donnes l'aide d'une procdure stocke. Une procdure stocke est un lment de base de donnes rutilisable qui effectue des oprations dans une base de donnes. Avant de modifier une base de donnes l'aide d'une procdure stocke, assurez-vous que cette dernire contient un code SQL qui modifie la base de donnes d'une manire ou d'une autre. Pour crer et stocker une procdure stocke dans une base de donnes, consultez la documentation de la base de donnes et un bon manuel Transact-SQL.
1 Dans Dreamweaver, ouvrez la page qui doit excuter la procdure stocke. 2 Dans le panneau Liaisons (Fentre > Liaisons), cliquez sur le bouton Plus (+), puis choisissez Procdure stocke. 3 Dans le menu droulant Source de donnes, slectionnez une connexion une base de donnes contenant la
procdure stocke.
4 Saisissez le nom d'utilisateur et le mot de passe pour la source de donnes ColdFusion. 5 Slectionnez une procdure stocke dans le menu droulant Procdure.
Dreamweaver remplit automatiquement tous les paramtres.

6 Slectionnez un paramtre et cliquez sur Modifier si vous voulez y apporter des modifications.
La bote de dialogue Modifier la variable de la procdure stocke s'affiche. Le nom de la variable modifier s'affiche dans la zone Nom. Remarque : Vous devez indiquer des valeurs test pour tout paramtre d'entre d'une procdure stocke.
7 Apportez les modifications de votre choix :
Slectionnez une direction dans le menu droulant. Une procdure stocke peut comporter des valeurs d'entre,
des valeurs de sortie ou les deux.
version prliminaire
Slectionnez un type SQL dans le menu droulant. Entrez une variable de renvoi, une valeur d'excution et une
valeur test.
8 Si la procdure stocke accepte un paramtre, cliquez sur le bouton Plus (+) pour ajouter un paramtre de page.
Remarque : Vous devez indiquer les paramtres de page correspondant chaque valeur de retour de paramtre d'une procdure stocke. Il est inutile d'ajouter les paramtres de page s'il n'y a pas de valeur de retour correspondante. Cliquez de nouveau sur le bouton Plus (+) pour ajouter un autre paramtre de page, si ncessaire.
9 Slectionnez un paramtre de page, puis cliquez sur le bouton Moins (-) pour supprimer le paramtre si besoin ou
sur Modifier pour y apporter des modifications.

10 Activez l'option Renvoie le jeu d'enregistrements nomm, puis tapez le nom du jeu d'enregistrements. Si la
procdure stocke renvoie un jeu d'enregistrements, cliquez sur le bouton Tester pour l'afficher. Dreamweaver excute la procdure stocke et affiche le jeu d'enregistrements, le cas chant. Remarque : Si la procdure stocke renvoie un jeu d'enregistrements et accepte des paramtres, vous devez indiquer une valeur dans la colonne Valeur par dfaut de la zone Variables pour tester la procdure stocke. Vous pouvez utiliser diffrentes valeurs test pour gnrer divers jeux d'enregistrements. Pour modifier une valeur test, cliquez sur le bouton Modifier correspondant au paramtre, puis modifiez la valeur test ou cliquez sur le bouton Modifier correspondant au paramtre de page, puis modifiez la valeur par dfaut.
11 Activez l'option Renvoie le code d'tat nomm, puis saisissez le nom du code d'tat si la procdure stocke renvoie
une valeur de retour de code d'tat. Cliquez sur OK. Lorsque vous fermez la bote de dialogue, Dreamweaver insre dans votre page un code ColdFusion qui, lorsqu'il s'excute sur le serveur, appelle une procdure stocke dans la base de donnes. La procdure stocke effectue alors une opration dans la base de donnes, telle que l'insertion d'un enregistrement. Si la procdure stocke accepte des paramtres, vous pouvez crer une page qui recueille les valeurs de paramtre et les envoie la page en mme temps que la procdure stocke. Ainsi, il est possible de crer une page qui recueille des valeurs de paramtre auprs des utilisateurs l'aide de paramtres d'URL ou d'un formulaire HTML.
Voir aussi
Rdaction d'instructions SQL en vue de la dfinition d'un jeu d'enregistrements avanc la page 580
Excution d'une procdure stocke (ASP)

Dans le cas de pages ASP, l'excution d'une procdure stocke requiert l'ajout d'un objet de commande. Pour plus d'informations sur les objets de commande, consultez la section A propos des objets de commande ASP la page 653.
1 Dans Dreamweaver, ouvrez la page qui doit excuter la procdure stocke. 2 Dans le panneau Liaisons (Fentre > Liaisons), cliquez sur le bouton Plus (+), puis choisissez Commande
(Procdure stocke). La bote de dialogue Commande s'affiche.

3 Saisissez le nom de la commande, slectionnez une connexion une base de donnes contenant la procdure
stocke, puis choisissez Procdure stocke dans le menu droulant Type.

4 Pour slectionner votre procdure stocke, dveloppez la branche Procdures stockes dans la zone Elments de
base de donnes, choisissez la procdure stocke dans la liste, puis cliquez sur le bouton Procdure.
5 Entrez tous les paramtres requis dans le tableau Variables.
version prliminaire
Il est inutile d'indiquer des paramtres pour les variables RETURN_VALUE.

6 Cliquez sur OK.
Une fois la bote de dialogue ferme, un code ASP est insr dans votre page. Lorsqu'il s'excute sur le serveur, ce code cre un objet de commande qui excute une procdure stocke dans la base de donnes. La procdure stocke effectue alors une opration dans la base de donnes, telle que l'insertion d'un enregistrement. Par dfaut, la proprit Prpar de l'objet de commande est dfinie sur true, ce qui permet au serveur d'application de rutiliser une version compile de l'objet chaque fois que la procdure stocke est excute. Si vous savez que la commande sera excute un grand nombre de fois, il est conseill d'utiliser une seule version compile de l'objet pour amliorer l'efficacit des oprations effectues dans la base de donnes. Cependant, si la commande n'est excute qu'une ou deux fois, ceci risque de ralentir votre application Web car le systme doit s'interrompre pour compiler la commande. Pour modifier ce paramtre, basculez en mode Code et dfinissez la proprit Prpar sur false. Remarque : Les commandes prpares ne sont pas prises en charge par tous les fournisseurs de base de donnes. Si votre base de donnes ne les prend pas en charge, vous risquez de recevoir un message d'erreur lors de l'excution de la page. Basculez en mode Code et dfinissez la proprit Prpar sur false. Si la procdure stocke accepte des paramtres, vous pouvez crer une page qui recueille les valeurs de paramtre et les envoie la page en mme temps que la procdure stocke. Ainsi, il est possible de crer une page qui recueille des valeurs de paramtre auprs des utilisateurs l'aide de paramtres d'URL ou d'un formulaire HTML.
Cration d'une page d'enregistrement

A propos des pages d'enregistrement
Vous pouvez inclure dans votre application Web une page qui oblige les utilisateurs s'enregistrer la premire fois qu'ils visitent votre site. Une page d'enregistrement se compose des lments structurels suivants :
une table de base de donnes pour stocker les informations de connexion des utilisateurs ; un formulaire HTML qui permet aux utilisateurs de slectionner un nom d'utilisateur et un mot de passe
et qui peut galement tre utilis pour obtenir d'autres informations personnelles de la part des utilisateurs ;
un comportement de serveur Insrer un enregistrement pour mettre jour la table de base de donnes des
utilisateurs du site ;
un comportement de serveur Vrifier le nouveau nom d'utilisateur pour vrifier que le nom tap par l'utilisateur
n'est pas dj utilis.
Voir aussi
Ajout d'un formulaire HTML pour la slection d'un nom d'utilisateur et d'un mot de passe la page 659 Mise jour de la table de base de donnes des utilisateurs la page 660 Ajout d'un comportement de serveur pour garantir l'unicit des noms d'utilisateur la page 660
version prliminaire
Stockage des informations de connexion des utilisateurs

Une page d'enregistrement ncessite une table de base de donnes dans laquelle stocker toutes les informations de connexion saisies par les utilisateurs.
Assurez-vous que cette table contient bien une colonne nom d'utilisateur et mot de passe. Si vous voulez octroyer
diffrents droits d'accs aux utilisateurs, ajoutez une colonne droit d'accs.
Si vous voulez dfinir un mot de passe commun tous les utilisateurs du site, configurez votre application de base
de donnes (Microsoft Access, Microsoft SQL Server, Oracle, etc.) de faon entrer par dfaut ce mot de passe dans chaque nouvel enregistrement utilisateur. Dans la plupart des applications de base de donnes, vous avez la possibilit d'affecter une valeur par dfaut une colonne pour chaque nouvel enregistrement cr. Dfinissez le mot de passe par dfaut.
La table de base de donnes permet galement de stocker d'autres informations utiles sur l'utilisateur.
L'tape suivante de la cration d'une page d'enregistrement consiste ajouter un formulaire HTML cette page afin de permettre aux utilisateurs de choisir un nom d'utilisateur et un mot de passe (le cas chant).
Voir aussi
Stockage des privilges d'accs dans la base de donnes des utilisateurs la page 665
Ajout d'un formulaire HTML pour la slection d'un nom d'utilisateur et d'un mot de passe
Pour permettre l'utilisateur de slectionner son nom d'utilisateur et son mot de passe, vous devez ajouter un formulaire HTML la page d'enregistrement (le cas chant).
1 Crez une page (Fichier > Nouveau > Page vierge) et mettez en forme votre page d'enregistrement l'aide des outils
de cration de Dreamweaver.
2 Pour ajouter un formulaire HTML, placez le point d'insertion l'endroit o le formulaire doit apparatre, puis
choisissez Formulaire dans le menu Insertion. Un formulaire vierge est cr sur la page. Il est parfois ncessaire d'activer les lments invisibles (Affichage > Assistances visuelles > Elments invisibles) pour afficher les contours du formulaire, reprsents par de fines lignes rouges.
fentre de document, ouvrez l'inspecteur Proprits (Fentre > Proprits), puis entrez un nom dans la zone Nom du formulaire. Vous n'avez pas besoin de dfinir l'attribut action ou method du formulaire pour lui indiquer o et comment envoyer les donnes d'enregistrement lorsque l'utilisateur clique sur le bouton Envoyer. Le comportement de serveur Insrer un enregistrement dfinit automatiquement ces attributs.
4 Ajoutez des champs de texte (Insertion > Formulaire > Champ de texte) afin de permettre l'utilisateur d'entrer un
nom d'utilisateur et un mot de passe. Le formulaire peut galement comporter d'autres objets permettant d'enregistrer d'autres donnes personnelles. Il est conseill d'ajouter des tiquettes (texte ou images) ct de chaque objet de formulaire, afin d'indiquer l'utilisateur de quoi il s'agit. Il est galement conseill d'organiser les objets de formulaire en les plaant dans un tableau HTML. Pour plus d'informations sur les objets de formulaire, consultez la section Cration de formulaires Web la page 677.
version prliminaire
Vous pouvez modifier l'tiquette du bouton Envoyer ; pour ce faire, slectionnez ce bouton, ouvrez l'inspecteur Proprits (Fentre > Proprits) et entrez une nouvelle valeur dans la zone Valeur. L'tape suivante de la cration d'une page d'enregistrement consiste ajouter le comportement de serveur Insrer un enregistrement pour insrer des enregistrements dans la table des utilisateurs de la base de donnes.
Mise jour de la table de base de donnes des utilisateurs

Vous devez ajouter le comportement de serveur Insrer un enregistrement la page d'enregistrement pour mettre jour la table des utilisateurs dans la base de donnes.
et choisissez Insrer l'enregistrement dans le menu droulant. La bote de dialogue Insrer un enregistrement s'affiche.
2 Compltez la bote de dialogue en veillant bien indiquer la table des utilisateurs dans la base de donnes dans
laquelle insrer les donnes des utilisateurs. Cliquez sur OK. La dernire tape de la cration d'une page d'enregistrement consiste s'assurer que le nom d'utilisateur n'est pas dj utilis par un autre utilisateur enregistr.
Voir aussi
Cration d'une page d'insertion lment par lment la page 636
Ajout d'un comportement de serveur pour garantir l'unicit des noms d'utilisateur
Vous pouvez ajouter un comportement de serveur une page d'enregistrement d'utilisateur. Le comportement vrifie que le nom d'utilisateur envoy par le visiteur est unique avant d'ajouter ce dernier dans votre base de donnes des utilisateurs enregistrs. Lorsque l'utilisateur clique sur le bouton Envoyer, sur la page d'enregistrement, le comportement de serveur compare le nom d'utilisateur entr tous les autres noms dj enregistrs dans la table de la base de donnes. Si aucun doublon n'est trouv, le comportement de serveur poursuit normalement l'insertion de l'enregistrement. En cas de doublon, le comportement de serveur annule l'insertion de l'enregistrement et ouvre une nouvelle page (qui alerte gnralement l'utilisateur que le nom choisi est dj pris).
1 Dans le panneau Comportements de serveur (Fentre > Comportements de serveur), cliquez sur le bouton Plus (+).
Dans le menu droulant, slectionnez Authentification de l'utilisateur > Vrifier le nouveau nom d'utilisateur.
2 Dans le menu droulant Champ Nom d'utilisateur, slectionnez la zone de texte du formulaire dans laquelle
l'utilisateur devra entrer son nom d'utilisateur.

3 Dans la zone Si existe dj, aller , indiquez la page ouvrir si un doublon est trouv dans la table de la base de
donnes, puis cliquez sur OK. Cette page doit alerter l'utilisateur que le nom qu'il a choisi est dj pris et lui permettre d'en entrer un autre.
version prliminaire
Cration d'une page d'ouverture de session

A propos des pages de connexion
Votre application Web peut contenir une page qui permettra aux utilisateurs enregistrs de se connecter au site. Une page de connexion se compose des lments structurels suivants :
une table de base de donnes regroupant les utilisateurs dj enregistrs ; un formulaire HTML permettant aux utilisateurs d'entrer leur nom d'utilisateur et leur mot de passe ; un comportement de serveur Connecter l'utilisateur qui vrifie que le nom d'utilisateur et le mot de passe saisis sont
valides ; une variable de session correspondant au nom d'utilisateur est cre pour l'utilisateur lorsqu'il se connecte avec succs.
Voir aussi
Ajout d'un formulaire HTML permettant aux utilisateurs de se connecter la page 661 Vrification du nom d'utilisateur et du mot de passe la page 662
Cration d'une table de base de donnes des utilisateurs enregistrs

Vous avez besoin d'une table de base de donnes regroupant les utilisateurs dj enregistrs pour vrifier que le nom d'utilisateur et le mot de passe saisis dans la page de connexion sont valides.
Pour crer cette table, utilisez votre application de base de donnes et une page d'enregistrement. Pour plus
d'informations, consultez le lien vers la rubrique connexe ci-dessous. L'tape suivante de la cration d'une page de connexion consiste ajouter un formulaire HTML la page afin de permettre aux utilisateurs de se connecter. Vous trouverez des instructions dans la rubrique suivante.
Voir aussi
Cration d'une page d'enregistrement la page 658
Ajout d'un formulaire HTML permettant aux utilisateurs de se connecter

Ajoutez un formulaire HTML la page afin de permettre aux utilisateurs de se connecter en entrant un nom d'utilisateur et un mot de passe.
1 Crez une page (Fichier > Nouveau > Page vierge) et mettez en forme votre page de connexion l'aide des outils de
cration de Dreamweaver.
2 Pour ajouter le formulaire HTML, placez le point d'insertion l'endroit o le formulaire doit apparatre, puis
choisissez Insertion > Formulaire. Un formulaire vierge est cr sur la page. Il est parfois ncessaire d'activer les lments invisibles (Affichage > Assistances visuelles > Elments invisibles) pour afficher les contours du formulaire, reprsents par de fines lignes rouges.
fentre de document, ouvrez l'inspecteur Proprits (Fentre > Proprits), puis entrez un nom dans la zone Nom du formulaire.
version prliminaire
Vous n'avez pas besoin de dfinir l'attribut action ou method du formulaire pour lui indiquer o et comment envoyer les donnes d'enregistrement lorsque l'utilisateur clique sur le bouton Envoyer. En effet, le comportement de serveur Connecter l'utilisateur dfinit automatiquement ces attributs.
4 Ajoutez au formulaire les champs de texte Nom d'utilisateur et Mot de passe (Insertion > Formulaire > Champ de
texte). Ajoutez des tiquettes (texte ou images) ct de chaque zone de texte, puis organisez ces zones en les plaant dans un tableau HTML et en donnant l'attribut BORDER de la table la valeur 0.
Vous pouvez modifier l'tiquette du bouton Envoyer ; pour ce faire, slectionnez ce bouton, ouvrez l'inspecteur Proprits (Fentre > Proprits) et entrez une nouvelle valeur dans la zone Etiquette. L'tape suivante de la cration d'une page de connexion consiste ajouter le comportement de serveur Connecter l'utilisateur pour vrifier que le nom d'utilisateur et le mot de passe saisis sont valides.
Vrification du nom d'utilisateur et du mot de passe

Vous devez ajouter le comportement de serveur Connecter l'utilisateur la page de connexion pour vrifier la validit du nom d'utilisateur et du mot de passe taps par un utilisateur. Lorsqu'un utilisateur clique sur le bouton Envoyer, sur la page de connexion, le comportement de serveur Connecter l'utilisateur compare les valeurs saisies par l'utilisateur celles des utilisateurs dj enregistrs. Si les valeurs correspondent, le comportement de serveur ouvre une page (gnralement la page d'accueil du site). Si elles ne correspondent pas, le comportement de serveur ouvre une autre page (qui alerte gnralement l'utilisateur que la connexion a chou).
1 Dans le panneau Comportements de serveur (Fentre > Comportements de serveur), cliquez sur le bouton Plus (+).
Dans le menu droulant, slectionnez Authentification de l'utilisateur > Connecter l'utilisateur.

2 Dfinissez le formulaire et les objets de formulaire que les visiteurs utilisent pour entrer leur nom d'utilisateur et
leur mot de passe.

3 (ColdFusion) Tapez votre nom d'utilisateur et votre mot de passe, le cas chant. 4 Dfinissez la table de la base de donnes et les colonnes qui contiennent les noms d'utilisateur et les mots de passe
de tous les utilisateurs dj enregistrs. Le comportement de serveur compare le nom d'utilisateur et le mot de passe entrs par le visiteur sur la page de connexion aux valeurs de ces colonnes.
5 Indiquez la page ouvrir si la connexion est tablie.
Cette page est gnralement la page d'accueil du site.

6 Indiquez la page ouvrir si la connexion choue.
Cette page alerte gnralement l'utilisateur que la connexion a chou et lui permet un nouvel essai.
7 Si vous voulez que les utilisateurs envoys vers la page de connexion aprs avoir essay d'accder la page
retournent cette page d'accs restreint aprs la connexion, choisissez l'option Aller l'URL prcdente. Si un utilisateur essaie d'accder votre site en ouvrant une page l'accs restreint sans s'tre pralablement connect, la page accs restreint peut l'envoyer vers la page de connexion. Une fois l'utilisateur connect, la page de connexion le redirige vers la page accs restreint qui l'a pralablement envoy vers la page de connexion. Lorsque vous saisissez les informations relatives au comportement de serveur Restreindre l'accs la page dans la bote de dialogue, prenez soin de prciser la page de connexion dans la zone de texte Si l'accs est refus, aller .
version prliminaire
8 Indiquez si l'accs la page est accord selon le nom d'utilisateur et le mot de passe uniquement ou galement selon
un niveau de privilges, puis cliquez sur OK. Un comportement de serveur est ajout la page de connexion. Il est destin vrifier que le nom d'utilisateur et le mot de passe saisis par le visiteur sont valides.
Voir aussi
Renvoi des utilisateurs non autoriss la page 664 Cration d'une page accs restreint la page 663
Cration d'une page accs restreint

A propos des pages protges
Votre application Web peut contenir une page protge laquelle seuls les utilisateurs autoriss ont accs. Si un utilisateur essaie, par exemple, de contourner la page de connexion en entrant l'URL de la page protge dans le navigateur, il est redirig vers une autre page. De mme, si vous donnez une page le niveau d'accs Administrateur, alors seuls les utilisateurs ayant les privilges d'accs Administrateur peuvent la consulter. Si un utilisateur connect tente d'accder la page protge alors qu'il ne possde pas les privilges d'accs requis, il est redirig vers une autre page. Les niveaux d'accs vous permettent aussi de ne pas octroyer immdiatement l'accs la totalit du site aux utilisateurs rcemment enregistrs. Ainsi, vous pouvez, par exemple, attendre de recevoir un paiement avant d'octroyer l'accs aux pages membre du site. Pour cela, protgez les pages membre avec un niveau d'accs Membre et n'octroyez que les privilges d'accs Visiteur aux utilisateurs rcemment enregistrs. Aprs rception du paiement, vous pouvez octroyer l'utilisateur les privilges d'accs suprieurs, c'est--dire Membre (dans la table de base de donnes des utilisateurs enregistrs). Si vous n'envisagez pas d'utiliser des niveaux d'accs, vous pouvez nanmoins protger une page de votre site en ajoutant simplement la page le comportement de serveur Restreindre l'accs la page. Ce comportement redirige vers une autre page tout utilisateur n'ayant pas russi tablir la connexion. Si vous envisagez d'utiliser des niveaux d'accs, vous pouvez protger une page de votre site l'aide des blocs structurels suivants :
un comportement de serveur Restreindre l'accs la page, pour rediriger les utilisateurs non autoriss vers une
autre page ;
une colonne supplmentaire dans la table de base de donnes des utilisateurs, pour enregistrer les privilges d'accs
de chaque utilisateur. Que vous utilisiez les niveaux d'accs ou non, vous pouvez ajouter un lien la page protge pour permettre l'utilisateur de se dconnecter et d'effacer toutes les variables de session.
Voir aussi
Scurisation dun dossier dans votre application (ColdFusion) la page 666
version prliminaire
Renvoi des utilisateurs non autoriss

Pour empcher les utilisateurs non autoriss d'accder une page, ajoutez-lui le comportement de serveur Restreindre l'accs la page. Ce comportement redirige l'utilisateur vers une autre page s'il tente de contourner la page de connexion en entrant l'URL de la page protge dans le navigateur, ou s'il est connect mais tente d'accder la page protge sans avoir les privilges requis. Remarque : Le comportement de serveur Restreindre l'accs la page ne protge que les pages HTML, et non les autres ressources du site telles que les fichiers d'images et audio. Si vous voulez attribuer plusieurs pages du site les mmes droits d'accs, vous pouvez copier-coller ces droits d'une page vers une autre.
Renvoi des utilisateurs non autoriss vers une autre page

1 Ouvrez la page protger. 2 Dans le panneau Comportements de serveur (Fentre > Comportements de serveur), cliquez sur le bouton Plus (+).
Dans le menu droulant, slectionnez Authentification de l'utilisateur > Restreindre l'accs la page.
3 Slectionnez le niveau d'accs pour la page. Si vous voulez que seuls les utilisateurs ayant certains privilges puissent
afficher la page, slectionnez l'option Nom d'utilisateur, mot de passe et niveau d'accs et spcifiez le niveau d'accs de la page. Vous pouvez par exemple stipuler que seuls les utilisateurs disposant des privilges Administrateur peuvent afficher la page, en slectionnant Administrateur dans la liste des niveaux d'autorisation.
4 Pour ajouter des niveaux d'autorisation la liste, cliquez sur Dfinir. Dans la liste Dfinir les niveaux d'accs qui
s'affiche, entrez un nouveau niveau d'accs, puis cliquez sur le bouton Plus (+). Le nouveau niveau d'autorisation est stock de manire pouvoir tre utilis avec les autres pages. Vrifiez que la chane du niveau d'autorisation correspond exactement la chane stocke dans votre base de donnes des utilisateurs. Par exemple, si la colonne autorisation de votre base de donnes contient la valeur Administrator, tapez Administrator, et non Admin, dans la zone de texte Nom.
5 Si vous voulez dfinir plusieurs niveaux d'autorisation pour une page, cliquez sur les niveaux de la liste tout en
maintenant la touche Ctrl (Windows) ou Commande (Macintosh) enfonce. Vous pouvez par exemple stipuler que tout utilisateur possdant les privilges Visiteur, Membre ou Administrateur peut consulter la page.
6 Indiquez la page ouvrir si un utilisateur non autoris tente d'ouvrir la page protge.
Vrifiez bien que la page choisie n'est pas protge.

7 Cliquez sur OK.
Copie et collage des droits d'accs d'une page sur d'autres pages du site
1 Ouvrez la page protge et slectionnez le comportement Restreindre l'accs la page dans le panneau
Comportements de serveur, et non dans le menu droulant Plus (+).

2 Cliquez sur la flche dans le coin suprieur droit du panneau et slectionnez Copier dans le menu droulant.
Le comportement de serveur Restreindre l'accs la page est copi dans le Presse-papiers de votre systme.
3 Ouvrez une autre page protger de la mme faon. 4 Dans le panneau Comportements de serveur (Fentre > Comportements de serveur), cliquez sur la flche dans le
coin suprieur droit et slectionnez Coller dans le menu droulant.

5 Rptez les tapes 3 et 4 pour chaque page protger.
version prliminaire
Stockage des privilges d'accs dans la base de donnes des utilisateurs

Ce bloc structurel n'est ncessaire que si vous voulez octroyer diffrents privilges certains des utilisateurs connects. Si vous voulez simplement que l'utilisateur se connecte, il nest pas ncessaire de stocker des privilges d'accs.
1 Si vous voulez que certains utilisateurs connects aient diffrents privilges d'accs, assurez-vous que votre table de
base de donnes des utilisateurs contient une colonne spcifiant les privilges d'accs de chaque utilisateur (Visiteur, Utilisateur, Administrateur, etc.). Les privilges d'accs de chaque utilisateur doivent tre entrs dans la base de donnes par l'administrateur du site. Dans la plupart des applications de base de donnes, vous avez la possibilit d'affecter une valeur par dfaut une colonne pour chaque nouvel enregistrement cr. Choisissez comme valeur par dfaut les privilges d'accs les plus courants de votre site (Invit, par exemple), puis changez manuellement les exceptions (en remplaant Invit par Administrateur, par exemple). L'utilisateur a maintenant accs toutes les pages administrateur.
2 Vrifiez que chaque utilisateur dans la base de donnes n'a qu'un seul privilge d'accs, comme Invit ou
Administrateur, et non plusieurs. Si vous voulez dfinir plusieurs privilges d'accs pour vos pages (en octroyant l'accs d'une page tous les invits et tous les administrateurs, par exemple), vous devez dfinir ces privilges au niveau de la page, et non de la base de donnes.
Dconnexion d'utilisateurs
Lorsque l'utilisateur tablit la connexion avec succs, une variable de session compose du nom d'utilisateur est cre. Lorsque l'utilisateur quitte votre site, vous pouvez utiliser le comportement de serveur Dconnecter l'utilisateur pour effacer cette variable de session et rediriger l'utilisateur vers une autre page (gnralement une page de fin de session ou de remerciement). Vous pouvez appeler le comportement de serveur Dconnecter l'utilisateur lorsque l'utilisateur clique sur un lien ou qu'une page spcifique est charge.
Ajout d'un lien permettant l'utilisateur de se dconnecter

1 Slectionnez le texte ou l'image utiliser comme lien dans la page. 2 Dans le panneau Comportements de serveur (Fentre > Comportements), cliquez sur le bouton Plus (+) et
slectionnez Authentification de l'utilisateur > Dconnecter l'utilisateur.

3 Indiquez une page ouvrir lorsque l'utilisateur clique sur le lien, puis cliquez sur OK.
Il s'agit gnralement d'une page de fin de session ou de remerciement.
Dconnexion des utilisateurs lors du chargement d'une page spcifique

1 Ouvrez la page qui se chargera dans Dreamweaver.
Il s'agit gnralement d'une page de fin de session ou de remerciement.

2 Dans le panneau Comportements de serveur, cliquez sur le bouton Plus (+) et slectionnez Authentification de
l'utilisateur > Dconnecter l'utilisateur.

3 Slectionnez l'option Se dconnecter au chargement de la page, puis cliquez sur OK.
version prliminaire
Scurisation dun dossier dans votre application (ColdFusion)

Scurisation d'un dossier ou d'un site sur le serveur (ColdFusion)
Dreamweaver permet de protger laide dun mot de passe un dossier spcifique de lapplication ColdFusion, y compris le dossier racine de lapplication. Dans ce cas, lorsquun visiteur demande une page figurant dans ce dossier, ColdFusion demande un nom dutilisateur et un mot de passe. ColdFusion enregistre le nom dutilisateur et le mot de passe dans des variables de session, de sorte que le visiteur ne se les voit plus demander au cours de la mme session. Remarque : Cette fonctionnalit nest disponible que si vous pouvez accder un ordinateur excutant ColdFusion MX 7 ou version ultrieure.
1 Ouvrez un document ColdFusion dans Dreamweaver, et choisissez Commandes > Assistant douverture de session
ColdFusion
2 Saisissez les paramtres voulus dans lassistant douverture de session ColdFusion a Indiquez le chemin daccs complet du rpertoire scuriser. b Dans lcran suivant, choisissez lun des types dauthentification suivants :
Authentification simple Scurise lapplication laide dun nom et dun mot de passe identiques pour tous les
utilisateurs.
Authentification Windows NT Scurise lapplication avec les noms dutilisateur et mots de passe de Windows NT. Authentification LDAP Scurise lapplication avec les noms dutilisateur et mots de passe enregistrs sur un serveur LDAP.
c Indiquez si vous souhaitez que les utilisateurs se connectent laide dune page douverture de session ColdFusion
ou dun menu droulant.

d Dans lcran suivant, dfinissez les options ci-dessous :
Si vous avez choisi lauthentification simple, indiquez le nom et le mot de passe que chaque utilisateur doit saisir. Si vous avez choisi lauthentification Windows NT, indiquez le domaine NT utiliser pour la validation. Si vous avez choisi lauthentification LDAP, indiquez le serveur LDAP utiliser pour la validation.
3 Transfrez les nouveaux fichiers sur le site distant. Ces fichiers se trouvent dans le dossier local de votre site.
Voir aussi
Activation des amliorations ColdFusion la page 693 Cration d'une page accs restreint la page 663 Scurisation dun dossier dans votre application (ColdFusion) la page 666
Utilisation de composants ColdFusion

A propos des composants ColdFusion
Les fichiers de composants ColdFusion (CFC) permettent d'encapsuler la logique d'application et d'entreprise au sein d'units autonomes rutilisables. Ils permettent galement de crer rapidement des services Web.
version prliminaire
Un composant ColdFusion est une unit logicielle rutilisable crite en CFML (ColdFusion markup language), qui facilite la rutilisation et la maintenance du code. Vous pouvez utiliser Dreamweaver pour travailler avec des CFC. Pour plus d'informations sur les balises et la syntaxe des CFC, consultez la documentation de ColdFusion dans Dreamweaver (Aide > Utilisation de ColdFusion). Remarque : Les CFC ne peuvent tre utiliss quavec ColdFusion MX ou une version ultrieure. Les CFC ne sont pas pris en charge par la version 5 de ColdFusion. Les CFC sont conus pour offrir aux dveloppeurs une mthode d'encapsulage des lments de leurs sites Web, qui soit la fois simple et puissante. Ces composants s'utilisent gnralement pour la logique d'application ou d'entreprise. Utilisez des balises personnalises pour introduire des lments de prsentation tels que des messages personnaliss ou des menus dynamiques. L'ajout de parties interchangeables peut rendre les sites dynamiques plus efficaces, comme c'est le cas pour bon nombre d'autres types de structures. Il peut arriver, par exemple, qu'un site dynamique doive excuter la mme requte maintes reprises ou recalculer le prix total d'un panier d'achats chaque fois qu'un article est ajout. Les composants peuvent se charger de ces tches. Vous pouvez rparer, amliorer, dvelopper, voire remplacer un composant sans que cela ait un grand impact sur le reste de l'application. Prenons l'exemple d'un magasin en ligne qui calcule les frais de port en fonction du total de la commande passe. Pour les commandes infrieures 20 , les frais de port sont de 4 ; pour les commandes comprises entre 20 et 40 , ils sont de 6 , etc. Vous pourriez insrer la logique de calcul des frais de port sur la page du panier d'achats et sur la page de rglement. Vous seriez alors amen mlanger du code de prsentation HTML et du code de logique CFML. Avec cette mthode, il est cependant souvent difficile de rutiliser et de grer le code. Il vaut donc mieux crer un CFC appel Pricing, incluant entre autres une fonction appele ShippingCharge. La fonction accepte un argument reprsentant un prix et renvoie les frais de port. Ainsi, si la valeur de l'argument est de 32,80, la fonction renvoie 6. Sur les pages du panier d'achats et de rglement, il vous reste insrer une balise spciale appelant la fonction ShippingCharge. Lorsque la page est demande, la fonction est appele et les frais de port sont renvoys la page. Supposons que le magasin fasse ultrieurement une offre promotionnelle : livraison gratuite pour toute commande d'un montant suprieur 100 . Il vous suffit alors de modifier les frais de port un seul endroit, savoir la fonction ShippingCharge du composant Pricing, pour que les frais de port soient mis jour sur toutes les pages utilisant la fonction.
Prsentation du panneau Composants (ColdFusion)

Le panneau Composants (Fentre > Composants) permet d'afficher et de modifier les composants ColdFusion, ainsi que d'crire dans la page un code qui appelle la fonction lorsque la page CFM est demande. Remarque : Le panneau Composants est uniquement disponible lors de l'affichage d'une page ColdFusion dans Dreamweaver.
Voir aussi
Cration de pages Web qui emploient des CFC la page 670
Cration ou suppression d'un CFC dans Dreamweaver

Vous pouvez utiliser Dreamweaver pour dfinir visuellement un CFC et ses fonctions. Dreamweaver cre un fichier .cfc et insre automatiquement les balises CFML ncessaires.
version prliminaire
Remarque : Selon le composant, il vous faudra peut-tre complter le code manuellement.

1 Ouvrez une page ColdFusion dans Dreamweaver. 2 Dans le panneau Composants (Fentre > Composants), choisissez Composants CF dans le menu droulant. 3 Cliquez sur le bouton plus (+), compltez la bote de dialogue Crer un composant, puis cliquez sur OK. a Dans la section Composants, saisissez les dtails du composant. Voici une liste partielle :
Nom Spcifie le nom de fichier du composant. Ce nom ne peut contenir que des caractres alphanumriques et des
caractres de soulignement (_). Il est inutile d'ajouter l'extension de fichier .cfc au nom.
Rpertoire des composants Indique l'endroit dans lequel le composant sera enregistr. Slectionnez le dossier racine de l'application Web (\Inetpub\wwwroot\monapp\, par exemple) ou l'un de ses sous-dossiers.
b Pour dfinir une ou plusieurs fonctions pour le composant, choisissez Fonctions dans la liste Section, cliquez sur le
bouton Plus (+), puis saisissez les dtails de la nouvelle fonction. Veillez bien dfinir le type de valeur renvoye par la fonction dans l'option Type de renvoi. Si vous choisissez l'option distant dans le menu Accs, la fonction peut dsormais servir de service Web.
c Pour dfinir un ou plusieurs arguments pour une fonction, choisissez Arguments dans la liste Section, slectionnez
la fonction dans le menu droulant, cliquez sur le bouton Plus (+), puis saisissez les dtails du nouvel argument sur la droite.
4 Si vous utilisez un serveur de dveloppement distant, tlchargez vers le serveur distant le fichier CFC et tous les
fichiers indpendants (tels que ceux utiliss pour mettre en uvre une fonction ou inclure des fichiers). Le tlchargement des fichiers vers le serveur garantit que les fonctionnalits de Dreamweaver, telles que le mode Live et Aperu dans le navigateur, fonctionnent correctement. Dreamweaver crit un fichier .cfc et l'enregistre dans le dossier spcifi. Le nouveau composant s'affiche galement dans le panneau Composants (il vous suffit de cliquer sur Actualiser).
5 Pour supprimer un composant, vous devez supprimer manuellement le fichier CFC du serveur.
Voir aussi
Cration de pages Web qui emploient des CFC la page 670 A propos des composants ColdFusion la page 666
Affichage de CFC dans Dreamweaver

Dreamweaver permet dexaminer visuellement et globalement les composants ColdFusion (CFC) situs dans le dossier de votre site ou sur le serveur. Dreamweaver lit les fichiers CFC et affiche les informations qui les concernent dans une arborescence qu'il est facile de parcourir dans le panneau Composants. Dreamweaver recherche les composants sur votre serveur d'valuation (consultez la section Connexion la base de donnes dans Dreamweaver la page 549). Si vous crez des CFC ou modifiez des CFC existants, veillez les transfrer sur le serveur dvaluation afin quils apparaissent dans le panneau Composants. Pour afficher les composants situs sur un autre serveur, modifiez les paramtres du serveur d'valuation. Vous pouvez consulter les informations suivantes relatives aux composants CF :
dresser la liste de tous les composants ColdFusion dfinis pour le site ;
version prliminaire
(si vous excutez ColdFusion MX 7 ou version ultrieure) filtrer la liste pour afficher uniquement les CFC situs
dans le dossier de votre site ;
tudier les fonctions et arguments de chaque composant ; examiner les proprits des fonctions qui servent de services Web.
Si vous voulez utiliser Dreamweaver pour inspecter les CFC rsidant dans la racine du serveur tout en grant les fichiers du site dans une racine de site Web diffrente, vous pouvez dfinir deux sites Dreamweaver. Configurez le premier site de faon ce qu'il renvoie la racine du serveur et le second pour qu'il renvoie la racine du site Web. Utilisez le menu Site du panneau Fichiers pour passer rapidement d'un site l'autre. Pour afficher les CFC dans Dreamweaver, procdez comme suit :
1 Ouvrez une page ColdFusion dans Dreamweaver. 2 Dans le panneau Composants (Fentre > Composants), choisissez Composants CF dans le menu droulant. 3 Dans le panneau, cliquez sur le bouton Actualiser pour rcuprer les composants.
Les composants sont affichs sur le serveur. Les fichiers CFC des composants s'affichent dans des dossiers. Si les composants existants n'apparaissent pas, cliquez sur le bouton Actualiser dans la barre d'outils du panneau.
4 Pour afficher uniquement les CFC situs dans le dossier de votre site, cliquez sur le bouton Afficher uniquement
les fichiers CFC du site actuel, dans la barre doutils du panneau Composants. Remarque : Cette fonctionnalit nest disponible que si vous avez dfini un ordinateur excutant ColdFusion MX 6 ou une version ultrieure comme serveur dvaluation de Dreamweaver. Remarque : Si le site actuel apparat dans un dossier virtuel sur le serveur distant, le filtrage nest pas oprationnel.
5 Cliquez sur le bouton Plus (+) en regard du nom du dossier pour afficher les composants qu'il contient.
Pour dresser la liste des fonctions d'un composant, cliquez sur le bouton Plus (+) en regard du nom du composant. Pour connatre les arguments qu'une fonction accepte, ainsi que leur type et leur caractre facultatif ou obligatoire,
dveloppez la branche de la fonction dans l'arborescence. Aucun bouton Plus (+) ne figure en regard des fonctions sans argument.
Pour afficher rapidement les dtails d'un argument, d'une fonction ou d'un composant, slectionnez l'lment dans
l'arborescence, puis cliquez sur le bouton Obtenir des dtails dans la barre d'outils du panneau. Vous pouvez galement cliquer sur l'lment avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) et choisir Obtenir des dtails dans le menu droulant qui s'affiche. Les dtails de l'lment sont affichs dans une bote de message.
Voir aussi
Configuration d'un serveur d'valuation la page 48 Activation des amliorations ColdFusion la page 693 Cration de pages Web qui emploient des CFC la page 670
Modification de CFC dans Dreamweaver

Dreamweaver permet de modifier de faon rationalise le code des composants ColdFusion dfinis dans un site. Vous pouvez, par exemple, ajouter, modifier ou supprimer toute fonction d'un composant sans quitter Dreamweaver.
version prliminaire
Pour ce faire, votre environnement de dveloppement doit tre configur comme suit :
ColdFusion doit s'excuter localement. Dans l'onglet Avanc de la bote de dialogue Dfinition du site de Dreamweaver, le type d'accs spcifi dans la
catgorie du serveur d'valuation doit tre Local/Rseau.
Dans l'onglet Avanc de la bote de dialogue Dfinition du site, le chemin d'accs votre dossier racine local doit
tre identique au chemin d'accs au dossier du serveur d'valuation (par exemple, c:\Inetpub\wwwroot\cf_projects\myNewApp\). Pour consulter et modifier ces chemins d'accs, choisissez Site > Modifier les sites.
Le composant doit tre stock dans le dossier local du site ou dans l'un de ses sous-dossiers sur votre disque dur.
Ouvrez une page ColdFusion dans Dreamweaver et affichez les composants dans le panneau Composants. Pour afficher les composants, ouvrez le panneau Composants (Fentre > Composants), choisissez Composants CF dans le menu droulant du panneau, puis cliquez sur le bouton Actualiser dans le panneau. Comme ColdFusion s'excute localement, Dreamweaver affiche les composants figurant sur votre disque dur. Procdez comme suit pour modifier un composant.
1 Ouvrez une page ColdFusion dans Dreamweaver et affichez les composants dans le panneau Composants (Fentre
> Composants).
2 Dans le menu droulant du panneau, choisissez Composants CF, puis cliquez sur le bouton Actualiser la liste des
composants ColdFusion (CFC). Comme ColdFusion s'excute localement, Dreamweaver affiche les composants figurant sur votre disque dur. Remarque : Pour modifier visuellement le jeu denregistrements du CFC, double-cliquez sur son nom dans le panneau Liaisons.
3 Pour modifier un fichier du composant de faon gnrale, ouvrez le dossier dans lequel il rside et double-cliquez
sur le nom du composant dans l'arborescence. Le fichier du composant est ouvert en mode Code.
4 Pour modifier une fonction, un argument ou une proprit spcifique, double-cliquez sur l'lment dans
l'arborescence.
5 Effectuez les modifications manuellement en mode Code. 6 Enregistrez le fichier (Fichier > Enregistrer). 7 Pour qu'une nouvelle fonction apparaisse dans le panneau Composants, actualisez la vue en cliquant sur le bouton
Actualiser dans la barre d'outils du panneau.
Voir aussi
Affichage de CFC dans Dreamweaver la page 668
Cration de pages Web qui emploient des CFC

Pour utiliser la fonction d'un composant dans vos pages Web, vous pouvez crire dans la page un code qui appelle la fonction lorsque la page est demande. Dreamweaver peut vous aider effectuer cette opration. Remarque : Pour connatre d'autres modes d'utilisation des composants, consultez la documentation de ColdFusion dans Dreamweaver (Aide > Utilisation de ColdFusion).
1 Dans Dreamweaver, ouvrez la page ColdFusion qui doit utiliser la fonction de composant.
version prliminaire
2 Basculez en mode Code (Affichage > Code). 3 Ouvrez le panneau Composants (Fentre > Composants), puis choisissez Composants CF dans le menu droulant. 4 Recherchez le composant utiliser et insrez-le l'aide de l'une des mthodes suivantes :
A partir de l'arborescence, faites glisser une fonction sur la page. Du code permettant d'appeler la fonction est insr
dans la page.
Slectionnez la fonction dans le panneau et cliquez sur le bouton Insrer de la barre d'outils du panneau (deuxime
bouton partir de la droite). Dreamweaver insre le code dans la page au niveau du point d'insertion.
5 Si vous insrez une fonction possdant des arguments, compltez manuellement le code des arguments.
Pour plus d'informations, consultez la documentation de ColdFusion dans Dreamweaver (Aide > Utilisation de ColdFusion).
6 Enregistrez la page (Fichier > Enregistrer).
Dfinition d'un jeu d'enregistrements dans un CFC

Dreamweaver permet de dfinir un jeu denregistrements (requte ColdFusion) dans un composant ColdFusion (CFC). En dfinissant un jeu denregistrements dans un CFC, il nest plus ncessaire de le dfinir dans chaque page qui lutilise. Le jeu denregistrements est dfini une fois pour toutes dans le CFC, qui est utilis dans les diffrentes pages. Remarque : Cette fonctionnalit nest disponible que si vous pouvez accder un ordinateur excutant ColdFusion MX 7 ou version ultrieure. Pour plus dinformations, consultez la section Activation des amliorations ColdFusion la page 693.
1 Crez ou ouvrez un fichier CFC dans Dreamweaver. 2 Dans le panneau Liaisons (Fentre > Liaisons), cliquez sur le bouton Plus (+) et slectionnez Jeu d'enregistrements
(Requte) dans le menu droulant. La bote de dialogue Jeu denregistrements s'affiche. Vous pouvez choisir de travailler dans la bote de dialogue simple ou avance.
3 Pour utiliser une fonction existante du CFC, slectionnez cette fonction dans la liste droulante Fonction, puis
passez ltape 5. Le jeu d'enregistrements sera dfini dans cette fonction.

4 Pour dfinir une nouvelle fonction dans le CFC, cliquez sur le bouton Nouvelle fonction, saisissez le nom de la
fonction dans la bote de dialogue qui apparat alors, et cliquez sur OK. Ce nom ne peut contenir que des caractres alphanumriques et des caractres de soulignement (_).
5 Pour dfinir un jeu d'enregistrements pour la fonction, dfinissez les options de la bote de dialogue Jeu
d'enregistrements. La nouvelle fonction est insre dans le CFC qui dfinit le jeu d'enregistrements.
Voir aussi
Cration ou suppression d'un CFC dans Dreamweaver la page 667
version prliminaire
Utilisation dun jeu denregistrements dans un CFC comme source de contenu dynamique
Il est possible dutiliser un composant ColdFusion (CFC) comme source de contenu dynamique des pages, si ce composant contient une fonction dfinissant un jeu denregistrements. Remarque : Cette fonctionnalit nest disponible que si vous pouvez accder un ordinateur excutant ColdFusion MX 7 ou version ultrieure. Pour plus dinformations, consultez la section Activation des amliorations ColdFusion.
1 Ouvrez une page ColdFusion dans Dreamweaver. 2 Dans le panneau Liaisons (Fentre > Liaisons), cliquez sur le bouton Plus (+) et slectionnez Jeu d'enregistrements
(Requte) dans le menu droulant. La bote de dialogue Jeu denregistrements s'affiche. Vous pouvez choisir de travailler dans la bote de dialogue simple ou avance.
3 Cliquez sur le bouton Requte CFC. 4 Remplissez la bote de dialogue Requte CFC, cliquez sur OK, puis cliquez nouveau sur OK pour ajouter le jeu
d'enregistrements CFC la liste des sources de contenu disponibles dans le panneau Liaisons.
5 Utilisez le panneau Liaisons pour lier le jeu denregistrements aux divers lments de la page.
Pour plus d'informations, consultez la section Ajout de contenu dynamique dans les pages la page 593.
Dfinition de contenu dynamique l'aide d'un CFC

Vous pouvez dfinir un jeu denregistrements comme source de contenu dynamique dans Dreamweaver en utilisant un CFC qui contient une dfinition de jeu denregistrements.
1 Dans la zone Nom, saisissez le nom du jeu d'enregistrements CFC.
Il est d'usage d'ajouter le prfixe rs aux noms des jeux d'enregistrements, afin de les distinguer des autres noms d'objet dans le code, par exemple : rsPressRelease Le nom d'un jeu d'enregistrements ne peut contenir que des caractres alphanumriques et des caractres de soulignement (_). Ils ne doivent pas comporter d'espaces ni de caractres spciaux.
2 Slectionnez un dossier parmi ceux qui sont dfinis sur le serveur.
Si le dossier napparat pas dans le menu droulant, actualisez la liste en cliquant sur le bouton Actualiser ct du menu. Auparavant, vrifiez que vous avez bien transfr vos CFC sur le serveur dvaluation. Seuls les fichiers CFC sur le serveur dvaluation sont affichs.
3 Slectionnez un composant parmi ceux qui sont dfinis dans le dossier slectionn.
Si le menu droulant des composant ne contient aucun composant, or u si aucun des composants que vous avez crs prcdemment napparat, transfrez vos fichiers CFC sur le serveur dvaluation.
4 (Facultatif) Pour crer un nouveau composant, cliquez sur le bouton Crer un nouveau composant. a Dans la zone Nom, saisissez le nom du nouveau CFC. Ce nom ne peut contenir que des caractres alphanumriques
et des caractres de soulignement (_).

b Dans la zone Rpertoire des composants, saisissez lemplacement du CFC, ou recherchez le dossier correspondant.
Remarque : Ce dossier doit tre le chemin relatif au dossier racine du site.

5 Dans le menu droulant Fonction, slectionnez la fonction contenant la dfinition du jeu denregistrements.
version prliminaire
Le menu droulant Fonction ne contient que les fonctions dfinies dans le composant slectionn. Si aucune fonction napparat dans le menu droulant, ou si vos derniers changements napparaissent pas dans les fonctions affiches, vrifiez que les derniers changements ont bien t enregistrs et transfrs sur le serveur. Remarque : Les zones Connexion et SQL sont toutes les deux en lecture seule.
6 Cliquez sur le bouton Modifier pour modifier chaque paramtre (type, valeur, valeur par dfaut) qui doit tre pass
en argument la fonction.
a Saisissez une valeur pour le paramtre actuel en slectionnant le type de valeur dans le menu droulant Valeur et
en saisissant la valeur voulue dans la zone situe sa droite. Le type de valeur peut tre un paramtre dURL, une variable de formulaire, un cookie, une variable de session, une variable dapplication ou une valeur fixe que vous saisissez.
b Dans la zone Valeur par dfaut, saisissez la valeur par dfaut que vous souhaitez attribuer au paramtre.
Si aucune valeur nest renvoye l'excution, la valeur par dfaut est utilise.
c Cliquez sur OK.
Il est impossible de modifier la connexion de base de donnes et la requte SQL du jeu denregistrements. Ces champs sont toujours dsactivs, et ces donnes ne sont affiches ici qu titre dinformation.
Si l'instruction SQL contient des paramtres de page, vrifiez que la colonne Valeur par dfaut de la zone Paramtres contient des valeurs test correctes avant de cliquer sur Tester. Si la requte a t correctement excute, le jeu denregistrements est affich dans un tableau. Chaque ligne contient un enregistrement et chaque colonne un champ de cet enregistrement. Cliquez sur OK pour effacer la requte.
8 Cliquez sur OK.
version prliminaire
674
Chapitre 21 : Cration de formulaires

Lorsqu'un visiteur saisit des informations dans un formulaire Web affich dans un navigateur Web et clique sur le bouton d'envoi, les informations sont envoyes un serveur, o une application ou un script ct serveur les traite. Le serveur rpond en renvoyant les informations traites l'utilisateur (ou au client) ou en excutant une autre action dtermine par le contenu du formulaire. Vous pouvez utiliser Dreamweaver pour crer des formulaires qui envoient des donnes la plupart des serveurs d'application, dont PHP, ASP et ColdFusion. Si vous utilisez ColdFusion, vous pouvez galement ajouter des contrles de formulaire spcifiques ColdFusion dans vos formulaires. Vos formulaires peuvent contenir des zones de texte ou de mot de passe, des boutons radio, des cases cocher, des menus contextuels, des boutons de commande et d'autres objets. Dreamweaver permet galement de rdiger le code qui valide les informations fournies par un visiteur. Par exemple, vous pouvez vrifier qu'une adresse lectronique saisie par un utilisateur contient bien un symbole @ (a commercial) ou qu'un champ de texte obligatoire a bien t renseign.
Collecte d'informations auprs des utilisateurs

A propos de la collecte d'informations auprs des utilisateurs
Vous pouvez utiliser des formulaires Web ou des liens hypertexte pour recueillir des informations provenant des utilisateurs, les stocker dans la mmoire du serveur et les utiliser pour gnrer des rponses dynamiques bases sur les donnes entres par les utilisateurs. Les outils les plus frquemment utiliss pour recueillir des informations utilisateur sont les formulaires HTML et les liens hypertexte.
Les formulaires HTML permettent de recueillir des informations provenant des utilisateurs et de les stocker dans la
mmoire du serveur. Ils peuvent transmettre les informations sous forme de paramtres de formulaire ou de paramtres d'URL.
Les liens hypertextes permettent de recueillir des informations provenant des utilisateurs et de les stocker dans la
mmoire du serveur. Pour ce faire, vous devez spcifier une ou plusieurs valeurs renvoyer lorsqu'un utilisateur clique sur un lien (tel qu'une prfrence) en annexant cette valeur l'URL spcifie dans la balise d'ancrage. Lorsqu'un utilisateur clique sur le lien concern, le navigateur envoie alors l'URL et la valeur annexe au serveur.
Paramtres de formulaire HTML

Les paramtres de formulaire sont envoys au serveur l'aide d'un formulaire HTML utilisant la mthode POST ou GET. En cas d'emploi de la mthode POST, les paramtres sont envoys au serveur Web dans l'en-tte du document et ne sont pas visibles ni accessibles quiconque visualise la page par une mthode standard. La mthode POST doit tre utilise pour les valeurs qui influent sur le contenu d'une base de donnes (par exemple insertion, mise jour ou suppression d'enregistrements) ou pour les valeurs envoyes par courrier lectronique. La mthode GET annexe les paramtres l'URL demande. Ces paramtres sont pour leur part visibles pour quiconque affiche la page. La mthode GET doit tre utilise pour les formulaires de recherche. Vous pouvez utiliser Dreamweaver pour concevoir rapidement des formulaires HTML qui envoient les paramtres de formulaire au serveur. Vous devez connatre la mthode que vous utilisez pour transmettre les informations du navigateur au serveur.
version prliminaire
Cration de formulaires
Les paramtres de formulaire prennent le nom des objets de formulaire correspondants. Ainsi, si un formulaire contient un champ de texte portant le nom txtLastName, le paramtre de formulaire suivant est alors transmis au serveur lorsqu'un utilisateur clique sur le bouton Envoyer :
txtLastName=enteredvalue
Si une application Web s'attend recevoir une valeur de paramtre prcise (lorsqu'elle excute une action en fonction d'une option parmi plusieurs options possibles, par exemple), utilisez un objet de formulaire de type bouton radio, case cocher ou liste/menu afin de contrler les valeurs susceptibles d'tre envoyes par l'utilisateur. Cela vite que les utilisateurs ne commettent des erreurs lors de la saisie d'informations et empche de ce fait toute erreur au niveau de l'application. L'exemple ci-dessous dcrit un formulaire contenant un menu droulant trois choix :
Chaque choix du menu correspond une valeur fige dans le code qui est envoye au serveur en tant que paramtre de formulaire. La bote de dialogue Valeurs de la liste prsente dans l'exemple suivant associe chaque lment de la liste une valeur (Ajouter, Mettre jour ou Supprimer) :
Une fois un paramtre de formulaire cr, Dreamweaver peut en rcuprer la valeur et l'utiliser dans une application Web. Aprs avoir dfini un paramtre de formulaire dans Dreamweaver, vous pouvez en insrer la valeur dans une page.
Voir aussi
Cration de formulaires Web la page 677 Ajout de contenu dynamique dans les pages la page 593 Accs une base de donnes la page 538
Paramtres d'URL
Utilisez les paramtres d'URL pour transmettre du navigateur au serveur les informations fournies par les utilisateurs. Lorsqu'il reoit une demande et que des paramtres sont annexs l'URL de la demande, le serveur met les paramtres la disposition de la page demande avant de fournir la page au navigateur.
version prliminaire
Un paramtre d'URL est une paire nom-valeur (name-value) annexe une URL. Le paramtre commence par un point d'interrogation (?). et se prsente sous la forme nom=valeur. S'il existe plusieurs paramtres d'URL, ils sont spars par une esperluette (&). L'exemple ci-dessous dcrit un paramtre d'URL dot de deux paires nom-valeur :
http://server/path/document?name1=value1&name2=value2
Dans cet exemple de processus, l'application est une boutique en ligne. Comme les dveloppeurs souhaitent atteindre un public aussi large que possible, le site a t conu pour prendre en charge plusieurs devises. Lorsque des utilisateurs se connectent au site, ils peuvent donc slectionner la devise dans laquelle afficher les tarifs des articles disponibles.
1 Le navigateur demande la page report.cfm au serveur. Cette requte inclut le paramtre d'URL Currency="euro".
La variable Currency="euro" indique que tous les montants rcuprs doivent tre affichs en euros.
2 Le serveur stocke temporairement en mmoire le paramtre d'URL. 3 La page report.cfm utilise le paramtre pour obtenir le tarif des articles en euros. Ces montants peuvent soit tre
stocks dans une table de base de donnes contenant des devises diffrentes, soit tre convertis depuis la devise spcifique chaque article (dans n'importe quelle devise prise en charge par l'application).
4 Le serveur renvoie la page report.cfm au navigateur en affichant le montant des articles dans la devise demande.
Lorsque cet utilisateur ferme la session, le serveur efface la valeur du paramtre d'URL et libre ainsi la mmoire du serveur qui peut stocker de nouvelles demandes d'utilisateur.
SERVEUR WEB
http://www.mysite.com/ report.cfm?Currency="" Currency=""
Navigateur Web
report.cfm
Les paramtres d'URL sont galement crs lorsque la mthode GET du protocole HTTP est utilise en conjonction avec un formulaire HTML. La mthode GET indique que la valeur du paramtre doit tre annexe la demande d'URL lors de l'envoi du formulaire. La personnalisation d'un site Web en fonction des prfrences d'un utilisateur constitue un exemple typique d'utilisation des paramtres d'URL. Un paramtre d'URL compos d'un nom d'utilisateur et d'un mot de passe, par exemple, peut tre utilis pour authentifier un utilisateur et n'afficher que les informations auxquelles il a souscrit. Les sites Web financiers affichant le cours d'actions particulires en fonction des symboles boursiers slectionns prcdemment par un utilisateur ont recours ce type de paramtres, par exemple. Les dveloppeurs d'applications Web utilisent souvent les paramtres d'URL pour transmettre des valeurs aux variables au sein des applications. Vous pouvez, par exemple, transmettre des termes rechercher des variable SQL au sein d'une application Web afin de gnrer des rsultats de recherche.
version prliminaire
Cration de paramtres d'URL l'aide de liens HTML

La cration de paramtres d'URL au sein d'un lien HTML consiste utiliser l'attribut href de la balise d'ancrage HTML. Vous pouvez entrer directement les paramtres d'URL dans l'attribut en passant en mode Code (Affichage > Code) ou en ajoutant les paramtres d'URL la fin du lien d'URL de la zone Lien de l'inspecteur Proprits. Dans l'exemple ci-dessous, trois liens crent un mme paramtre d'URL (action) pouvant avoir trois valeurs : Add (ajouter), Update (mettre jour) et Delete (supprimer). Lorsque l'utilisateur clique sur un lien, une valeur de paramtre diffrente est envoye au serveur et l'action demande est excute.
<a href="http://www.mysite.com/index.cfm?action=Add">Add a record</a> <a href="http://www.mysite.com/index.cfm?action=Update">Update a record</a> <a href="http://www.mysite.com/index.cfm?action=Delete">Delete a record</a>
L'inspecteur Proprits (Fentre > Proprits) permet de crer les mmes paramtres d'URL en slectionnant le lien, puis en ajoutant les paramtres d'URL la fin du lien d'URL de la zone Lien.
Une fois un paramtre d'URL cr, Dreamweaver peut en rcuprer la valeur et l'utiliser dans une application Web. Aprs avoir dfini un paramtre d'URL dans Dreamweaver, vous pouvez en insrer la valeur dans une page.
Voir aussi
A propos des paramtres d'URL et de formulaire la page 572 Etablissement de liens la page 282 Dfinition de paramtres de formulaire la page 586 Ajout de contenu dynamique dans les pages la page 593 Accs une base de donnes la page 538
Cration de formulaires Web

A propos des formulaires Web
Lorsqu'un visiteur saisit des informations dans un formulaire Web affich dans un navigateur Web et clique sur le bouton d'envoi, les informations sont envoyes un serveur, o une application ou un script ct serveur les traite. Le serveur rpond en renvoyant les informations traites l'utilisateur (ou au client) ou en excutant une autre action dtermine par le contenu du formulaire. Vous pouvez crer des formulaires qui envoient des donnes la plupart des serveurs d'application, dont PHP, ASP et ColdFusion. Si vous utilisez ColdFusion, vous pouvez galement ajouter des contrles de formulaire spcifiques ColdFusion dans vos formulaires. Remarque : Vous pouvez galement envoyer des donnes de formulaire directement une adresse lectronique.
version prliminaire
Voir aussi
Collecte d'informations auprs des utilisateurs la page 674 Cration de formulaires ColdFusion la page 692
Objets de formulaire
Dans Dreamweaver, les types d'entres de formulaire sont appels des objets de formulaire. Les objets de formulaire sont les lments qui permettent aux utilisateurs d'entrer des donnes. Vous avez la possibilit d'ajouter les objets de formulaire suivants un formulaire :
Champs de texte Acceptent tout type d'entre alphanumrique. Vous pouvez afficher le texte sur une seule ligne, sur
plusieurs lignes et sous la forme d'un champ de mot de passe dans lequel le texte saisi est remplac par des astrisques ou des puces afin d'tre masqu.
Remarque : Les mots de passe et tout autre type d'informations envoys un serveur l'aide d'un champ de mot de passe ne sont pas crypts. Les donnes transfres peuvent donc tre interceptes et lues en tant que texte alphanumrique. Aussi devez-vous prvoir le cryptage systmatique des donnes que vous souhaitez protger.
Champs masqus Stockent des informations saisies par un utilisateur, telles qu'un nom, une adresse lectronique ou une prfrence d'affichage, puis rutilisent ces informations lors de la prochaine visite de l'utilisateur sur le site. Boutons Excutent des actions lorsque l'utilisateur clique dessus. Vous pouvez ajouter une tiquette ou un nom
personnalis un bouton ou utiliser l'une des tiquettes prdfinies : Envoyer ou Rtablir. Utilisez un bouton pour l'envoi des donnes du formulaire au serveur ou pour la rinitialisation du formulaire. Vous pouvez galement attribuer un bouton d'autres tches de traitement pralablement dfinies dans un script. Un bouton peut ainsi calculer le montant total des lments slectionns en fonction des valeurs que vous leur avez attribues.
version prliminaire
Cases cocher Permettent les rponses multiples au sein d'un mme groupe d'options. Un utilisateur peut slectionner toutes les options qu'il juge ncessaires. L'exemple suivant montre trois lments case cocher slectionns : Surfing, Mountain biking et Rafting sont actives.
Boutons radio Reprsentent des choix exclusifs. Lorsqu'un utilisateur clique sur un bouton dans un groupe de boutons
radio, cela dslectionne tous les autres boutons du groupe (un groupe comprend plusieurs boutons dots du mme nom). Dans l'exemple ci-dessous, Rafting est l'option slectionne. Si l'utilisateur clique sur Surfing, l'option Rafting est automatiquement dsactive.
Listes droulantes Affichent des valeurs d'option au sein d'une liste droulante qui permet aux utilisateurs de
slectionner plusieurs options. L'option Liste affiche les valeurs d'option dans un menu et permet aux utilisateurs de slectionner un seul lment. Utilisez des menus lorsque vous disposez d'un espace rduit et que vous devez afficher de nombreux lments, ou lorsque vous souhaitez contrler les valeurs renvoyes au serveur. A la diffrence des champs de texte, dans lesquels les utilisateurs peuvent taper ce qu'ils veulent, y compris des donnes non valides, c'est vous de dfinir les valeurs exactes renvoyes par un menu. Remarque : Un menu droulant de formulaire HTML est diffrent d'un menu droulant graphique. Pour plus d'informations sur la cration, la modification, l'affichage et le masquage d'un menu droulant graphique, cliquez sur le lien la fin de cette section.
Menus de reroutage Sont des listes de navigation ou des menus droulants qui vous permettent d'insrer un menu
dans lequel chaque option est relie un document ou un fichier.

Champs de fichier Permettent aux utilisateurs de rechercher un fichier sur leur ordinateur et de le tlcharger en tant que donnes de formulaire. Champs d'image Permettent d'insrer une image dans un formulaire. Utilisez les champs d'image pour crer des
boutons graphiques (bouton Envoyer ou Rinitialiser, par exemple). Vous devez associer un comportement l'objet de formulaire pour pouvoir utiliser une image afin d'effectuer une tche autre que l'envoi de donnes.
version prliminaire
Voir aussi
Application du comportement Afficher le menu contextuel la page 369
Cration d'un formulaire HTML

1 Ouvrez une page et placez le point d'insertion l'endroit o vous souhaitez insrer le formulaire. 2 Choisissez Insertion > Formulaire ou, dans le panneau Insertion, cliquez sur la catgorie Formulaires, puis sur
l'icne Formulaire. Dans une page affiche en mode Cration, les formulaires sont indiqus par une bordure rouge en pointill. Si vous ne voyez pas cette bordure, choisissez Affichage > Assistances visuelles > Elments invisibles.
3 Dfinissez les proprits du formulaire HTML dans l'inspecteur Proprits (Fentre > Proprits) : a Dans la fentre de document, cliquez sur la bordure du formulaire afin de le slectionner. b Dans la zone Nom du formulaire, tapez un nom unique afin d'identifier le formulaire.
Vous rendez ainsi possible son rfrencement ou son contrle l'aide d'un langage de script, tel que JavaScript ou VBScript. Si vous n'attribuez aucun nom au formulaire, Dreamweaver gnre un nom en utilisant la syntaxe formn et augmente la valeur de n pour chaque nouveau formulaire ajout la page.
c Dans la zone Action, indiquez la page ou le script qui va traiter les donnes du formulaire en entrant son chemin
d'accs ou en cliquant sur l'icne du dossier pour naviguer jusqu' la page ou jusqu'au script appropri. Exemple : processorder.php.
d Dans le menu droulant Mthode, spcifiez la mthode permettant de transmettre les donnes du formulaire au
serveur. Parmi les options suivantes, dfinissez celles de votre choix :

Par dfaut Permet de se baser sur le paramtrage par dfaut du navigateur pour envoyer les donnes du formulaire au serveur. En gnral, la valeur par dfaut est la mthode GET. GET Permet d'annexer la valeur l'URL demandant la page. POST Permet d'incorporer les donnes du formulaire dans la requte HTTP.
N'utilisez pas la mthode GET pour envoyer des formulaires longs. Les URL sont limites 8192 caractres. Si la quantit de donnes envoyes est trop importante, celles-ci seront tronques, ce qui peut produire des rsultats inattendus ou un chec du traitement. Il est possible d'ajouter des signets aux pages dynamiques gnres par des paramtres transmis par la mthode GET, car toutes les valeurs ncessaires pour rgnrer la page sont contenues dans l'URL affiche dans la zone Adresse du navigateur. En revanche, il n'est pas possible d'ajouter de signet aux pages dynamiques gnres par des paramtres transmis par la mthode POST. Si vous rassemblez des noms d'utilisateur et des mots de passe, des numros de cartes de crdit ou d'autres informations confidentielles, la mthode POST peut sembler plus sre que la mthode GET. Toutefois, les informations envoyes par la mthode POST ne sont pas codes. Par consquent, les pirates peuvent les rcuprer facilement. Pour garantir leur scurit, utilisez une connexion scurise un serveur scuris.
e (Facultatif) Utilisez le menu droulant Enctype pour dfinir le type de codage MIME des donnes envoyes au
serveur pour traitement. Le paramtre par dfaut application/x-www-form-urlencode est gnralement utilis en conjonction avec la mthode POST. Si vous crez un champ de tlchargement de fichier, spcifiez le type de codage MIME multipart/form-data.
f
(Facultatif) Utilisez le menu droulant Cible pour spcifier la fentre dans laquelle les donnes renvoyes par le programme appel s'affichent.
version prliminaire
Si la fentre indique n'est pas encore ouverte, une nouvelle fentre du mme nom apparat. Dfinissez l'une des valeurs cible suivantes :
_blank Ouvre le document de destination dans une nouvelle fentre sans nom. _parent Ouvre le document de destination dans la fentre parente de celle affichant le document actif. _self Ouvre le document de destination dans la mme fentre que celle dans laquelle le formulaire a t envoy. _top Ouvre le document de destination au sein de la fentre en cours. Cette valeur permet de s'assurer que le document de destination occupe la fentre entire, mme si le document d'origine tait affich dans un cadre.
4 Insrez des objets de formulaire dans la page : a Placez le point d'insertion l'endroit o l'objet de formulaire doit s'afficher dans le formulaire. b Choisissez l'objet dans le menu Insertion > Formulaire, ou dans la catgorie Formulaires du panneau Insertion. c Compltez la bote de dialogue Attributs d'accessibilit des balises d'entre. Pour plus d'informations, cliquez sur
le bouton Aide de la bote de dialogue. Remarque : Si la bote de dialogue Attributs d'accessibilit des balises d'entre n'est pas visible, il se peut que le point d'insertion se trouvait en mode Code lorsque vous avez tent d'insrer l'objet de formulaire. Assurez-vous que le point d'insertion se trouve bien en mode Cration, puis ressayez. Pour plus d'informations ce sujet, reportez-vous l'article Creating HTML forms in Dreamweaver (en anglais) de David Powers.
d Dfinissez les proprits des objets. e Entrez un nom pour l'objet dans l'inspecteur Proprits.
Chaque objet champ de texte, champ cach, case cocher et liste/menu doit possder un nom unique identifiant l'objet dans le formulaire. Les noms d'objets de formulaire ne peuvent comporter ni espaces, ni caractres spciaux. Vous pouvez utiliser toutes les combinaisons de caractres alphanumriques ainsi qu'un caractre de soulignement (_). L'tiquette que vous attribuez l'objet correspond au nom de la variable o la valeur du champ (les donnes saisies) sera stocke. Il s'agit de la valeur envoye au serveur pour traitement. Remarque : Tous les boutons radio d'un mme groupe doivent porter le mme nom.
f
Pour attribuer une tiquette l'objet champ de texte, case cocher ou bouton radio dans la page, cliquez en regard de l'objet et tapez le texte souhait.
5 Amliorez la mise en forme du formulaire.
Utilisez des sauts de ligne, des sauts de paragraphes, du texte prformat ou des tableaux pour mettre en forme vos formulaires. Vous ne pouvez pas insrer un formulaire dans un autre formulaire (c'est--dire superposer des balises), mais vous pouvez inclure plusieurs formulaires dans une mme page. Lors de la conception de formulaires, n'oubliez pas de libeller les champs du formulaire sous forme de texte descriptif, afin que les utilisateurs sachent ce qu'ils ont faire (par exemple, Entrez votre nom pour demander des informations de nom). Utilisez des tableaux pour fournir une structure pour les objets et les tiquettes de champ. Assurez-vous, lorsque vous utilisez des tableaux dans un formulaire, que toutes les balises table sont incluses entre les balises form. Vous trouverez un didacticiel consacr la cration de formulaires l'adresse www.adobe.com/go/vid0160_fr. Vous trouverez un didacticiel consacr la mise en page de formulaires l'aide de CSS l'adresse www.adobe.com/go/vid0161_fr.
version prliminaire
Voir aussi
Collecte d'informations auprs des utilisateurs la page 674 Dfinition de paramtres de formulaire la page 586 Dfinition de paramtres d'URL la page 585 Cration de formulaires ColdFusion la page 692 Cration de pages Spry visuellement la page 435 Didacticiel consacr la cration de formulaires Didacticiel consacr la mise en page de formulaires
Proprits de l'objet Champ de texte

Slectionnez l'objet champ de texte et dfinissez les options suivantes dans l'inspecteur Proprits :
Largeur car. Dfinit le nombre maximal de caractres pouvant tre affichs dans le champ. Ce nombre peut tre
infrieur Nbre max. de caract., qui dfinit le nombre maximal de caractres pouvant tre entrs dans le champ. Ainsi, si le champ Largeur de caractre est dfini sur la valeur par dfaut 20 et qu'un utilisateur saisit 100 caractres, ce dernier ne pourra voir que 20 de ces caractres dans le champ de texte. Bien que l'utilisateur ne voie pas tous les caractres saisis dans le champ, ils sont reconnus par l'objet de champ et envoys au serveur pour traitement.
Nbre max. de caract. Dfinit le nombre maximum de caractres qu'il est possible de saisir dans le champ pour les champs de texte une seule ligne. Utilisez Nbre max. de caract. pour limiter un code postal 5 chiffres, un mot de passe 10 caractres, etc. Si vous ne renseignez pas la zone de texte Nbre max. de caract., les utilisateurs peuvent saisir un texte d'une longueur illimite. Si l'entre de l'utilisateur dpasse la largeur des caractres du champ, le texte dfile. Si l'entre de l'utilisateur dpasse le nombre maximum de caractres, le formulaire met un son d'alerte. Nbre lignes (Disponible lorsque l'option Multiligne est slectionne) Dfinit la hauteur du champ pour les champs de texte plusieurs lignes. Dsactiv Dsactive la zone de texte. Lecture seule Transforme la zone de texte en zone en lecture seule. Type Dsigne le type de champ : ligne simple, multiligne ou mot de passe.
Ligne simple Permet de positionner une balise input dont l'attribut type est fix text. Le paramtre Larg. des caractres reprsente l'attribut size ; Nbre max. de caract. reprsente l'attribut maxlength. Lignes multiples Permet de positionner une balise textarea. Le paramtre Larg. des caractres est reli l'attribut
cols ; Nbre caract. max. est reli l'attribut rows.
Mot de passe Permet de positionner une balise input dont l'attribut type est fix password. Les paramtres Larg. des caractres et Nbre max. de caract. sont relis aux mmes attributs que les champs de texte une seule ligne. Lorsqu'un utilisateur entre des donnes dans un champ mot de passe, le texte apparat sous forme de puces ou d'astrisques pour le protger du regard de tiers.
Init val Attribue la valeur affiche dans le champ lors du premier chargement du formulaire. Ainsi pouvez-vous indiquer, par exemple, que l'utilisateur doit saisir des informations de type remarque ou exemple dans le champ. Classe Permet d'appliquer des rgles CSS l'objet.
version prliminaire
Options de l'objet Bouton

Nom de bouton Attribue un nom au bouton. Les deux noms rservs, Envoyer et Rinitialiser, indiquent respectivement au formulaire d'envoyer les donnes du formulaire l'application ou au script de traitement et de rinitialiser les valeurs initiales des champs du formulaire. Valeur Dtermine le texte apparaissant sur le bouton. Action Dtermine ce qui se passe lorsque le bouton est cliqu.
Envoyer le formulaire Envoie les donnes du formulaire pour traitement lorsque l'utilisateur clique sur le bouton. Les donnes sont envoyes la page ou au script spcifi par la proprit Action du formulaire. Rinitialiser le formulaire Rtablit le contenu ses valeurs par dfaut lorsque l'utilisateur clique sur le bouton. Aucun Spcifie l'action a excuter lorsque l'utilisateur clique sur le bouton. Par exemple, vous pouvez ajouter un comportement JavaScript qui ouvre une autre page lorsque l'utilisateur clique sur le bouton.
Classe Applique des rgles CSS l'objet.
Options de l'objet Case cocher

Valeur Dfinit la valeur envoyer au serveur lorsque la case cocher est active. Par exemple, dans un sondage, vous
pouvez dfinir une valeur de 4 pour approuve fortement et une valeur de 1 pour dsapprouve fortement .
Etat initial Dtermine si la case cocher est slectionne lorsque le formulaire est charg dans le navigateur. Dynamique Permet au serveur de dterminer de faon dynamique l'tat initial de la case cocher. Par exemple, vous pouvez prsenter visuellement les informations Oui/Non stockes dans un enregistrement de base de donnes l'aide de cases cocher. Au stade de la conception, vous ne connaissez pas ces informations. Au moment de l'excution, le serveur lit l'enregistrement de base de donnes et active la case cocher si la valeur est Oui. Classe Applique des rgles CSS (Cascading Style Sheets, feuilles de style en cascade) l'objet.
Options de l'objet Bouton radio unique

Valeur Dfinit la valeur envoyer au serveur lorsque le bouton radio est slectionn. Par exemple, vous pouvez taper
ski dans la zone de texte Valeur pour indiquer qu'un utilisateur a choisi le ski.
Etat initial Dtermine si le bouton radio est slectionne lorsque le formulaire est charg dans le navigateur. Dynamique Permet au serveur de dterminer de faon dynamique l'tat initial du bouton radio. Par exemple, vous pouvez prsenter visuellement des informations stockes dans un enregistrement de base de donnes l'aide de boutons radio. Au stade de la conception, vous ne connaissez pas ces informations. Au moment de l'excution, le serveur lit l'enregistrement de base de donnes et vrifie si la valeur du bouton radio correspond celle que vous avez spcifie. Classe Applique des rgles CSS l'objet.
Options du menu
Liste/Menu Attribue un nom au menu. Ce nom doit tre unique. Type Indique si le menu se droule lorsque l'utilisateur clique dessus (option Menu) ou s'il affiche une liste droulante d'lments (option Liste). Slectionnez l'option Menu si vous souhaitez qu'un seul choix soit visible lorsque le formulaire s'affiche dans un navigateur. Pour afficher les autres choix, l'utilisateur doit cliquer sur la flche vers le bas.
Slectionnez l'option Liste pour afficher quelques-unes ou l'ensemble des options lorsque le formulaire s'affiche dans un navigateur, afin de permettre aux utilisateurs de slectionner plusieurs lments.
Hauteur (Type Liste uniquement) Dfinit le nombre d'lments affichs dans le menu.
version prliminaire
Slections (Type Liste uniquement) Indique si l'utilisateur peut slectionner plusieurs lments dans la liste. Valeurs de la liste Ouvre une bote de dialogue qui vous permet d'ajouter les lments un menu de formulaire :
1 Utilisez les boutons plus (+) et moins (-) pour ajouter et supprimer des lments de la liste. 2 Tapez un libell ainsi qu'une valeur optionnelle pour chaque lment de menu.
Chaque lment de la liste possde un libell (le texte qui apparat dans la liste) et une valeur (la valeur envoye l'application de traitement si l'lment est slectionn). Si aucune valeur n'est spcifie, le libell est envoy l'application de traitement.
3 Utilisez les boutons flchs Haut et Bas pour rorganiser les lments de la liste.
Les lments apparaissent dans le menu dans le mme ordre qu'ils apparaissent dans la bote de dialogue Valeurs de la liste. Le premier lment sur la liste est l'lment slectionn lorsque la page est charge dans un navigateur.
Dynamique Permet au serveur de slectionner de faon dynamique un lment dans le menu lors de son affichage
initial.
Classe Permet d'appliquer des rgles CSS l'objet. Initialement slectionn Dfinit les lments slectionns par dfaut dans la liste. Cliquez sur un ou plusieurs
lments dans la liste.
Insertion de champs de tlchargement de fichier

Vous pouvez crer un champ de tlchargement de fichier permettant aux utilisateurs de slectionner un fichier sur leur ordinateur (tel qu'un document de traitement de texte ou un fichier graphique) et de le tlcharger sur le serveur. Un champ de fichier est similaire un champ de texte, mais contient galement un bouton Parcourir. L'utilisateur peut soit saisir manuellement le chemin d'accs au fichier tlcharger, soit cliquer sur le bouton Parcourir pour le rechercher et le slectionner. Avant d'utiliser les champs de tlchargement de fichiers, vous devez disposer d'un script ct serveur ou d'une page capable de traiter les soumissions de fichiers. Consultez la documentation de la technologie serveur utiliser pour traiter les donnes des formulaires. Par exemple, si vous utilisez PHP, consultez la section Handling files uploads (Gestion des tlchargements de fichiers) dans le manuel PHP l'adresse http://us2.php.net/features.file-upload.php. Les champs de fichier ncessitent l'utilisation de la mthode POST pour transmettre des fichiers depuis un navigateur vers le serveur. Le fichier est transfr l'adresse indique dans la zone de texte Action du formulaire. Remarque : Avant d'utiliser le champ de fichier, vrifiez auprs de votre administrateur de serveur que le tlchargement anonyme de fichiers est autoris.
1 Insrez un formulaire dans la page (Insertion > Formulaire). 2 Slectionnez le formulaire pour en afficher l'inspecteur Proprits. 3 Dans le menu droulant Mthode, slectionnez POST. 4 Dans le menu droulant Enctype, slectionnez multipart/form-data. 5 Dans la zone de texte Action, spcifiez le script ct serveur ou la page capable de traiter le fichier tlcharg. 6 Placez le point d'insertion l'intrieur de la bordure du formulaire et slectionnez Insertion > Formulaire > Champ
de fichier.
7 Dfinissez les options suivantes dans l'inspecteur Proprits :
Champ de fichier Indique le nom de l'objet champ de fichier. Largeur car. Dfinit le nombre maximal de caractres pouvant tre affichs dans le champ.
version prliminaire
Nbre max. de caract. Indique le nombre maximum de caractres que peut contenir le champ. Si l'utilisateur parcourt l'arborescence pour trouver le fichier, le nom du fichier et son chemin d'accs risquent de comporter un nombre de caractres suprieur celui indiqu dans le champ Nbre max. de caract. Par contre, si l'utilisateur tente de taper le nom du fichier et son chemin d'accs, le champ de fichier ne lui permet pas d'entrer un nombre de caractres suprieur celui indiqu.
Insertion d'un bouton d'image

Vous pouvez utiliser des images en qualit d'icnes de bouton. Vous devez associer un comportement l'objet de formulaire pour pouvoir utiliser une image afin d'effectuer une tche autre que l'envoi de donnes.
1 Dans le document, placez le point d'insertion dans la bordure du formulaire. 2 Slectionnez Insertion > Formulaire > Champ d'image.
La bote de dialogue Slectionnez la source de l'image s'affiche.

3 Slectionnez l'image souhaite pour le bouton dans la bote de dialogue Slectionnez la source de l'image et cliquez
sur OK.
4 Dfinissez les options suivantes dans l'inspecteur Proprits :
Zone_image Attribue un nom au bouton. Les deux noms rservs, Envoyer et Rinitialiser, indiquent respectivement
au formulaire d'envoyer les donnes du formulaire l'application ou au script de traitement et de rinitialiser les valeurs initiales des champs du formulaire.
Src Spcifie l'image utiliser pour le bouton. Sec Permet de saisir un texte descriptif au cas o l'image ne parvient pas se charger dans le navigateur. Alignement Dfinit l'attribut d'alignement de l'objet. Modifier image Lance votre diteur d'image par dfaut et ouvre le fichier d'image afin que vous puissiez le modifier. Classe Permet d'appliquer des rgles CSS l'objet.
5 Pour associer un comportement JavaScript au bouton, slectionnez l'image, puis slectionnez le comportement
dans le panneau Comportements (Fentre > Comportements).
Options de l'objet Champ masqu

Champ masqu Indique le nom du champ. Valeur Attribue une valeur au champ. Cette valeur est transmise au serveur lors de l'envoi du formulaire.
Insertion d'un groupe de boutons radio

1 Placez le point d'insertion dans la bordure du formulaire. 2 Slectionnez Insertion > Formulaire > Groupe de boutons radio. 3 Compltez les options de la bote de dialogue, puis cliquez sur OK. a Dans la zone de texte Nom, tapez le nom du groupe de boutons radio.
Si vous dfinissez les boutons radio pour qu'ils renvoient des paramtres au serveur, ces derniers seront associs au nom du groupe. Par exemple, si vous attribuez le nom myGroup au groupe de boutons radio et dfinissez la mthode du formulaire sur GET (en d'autres termes, vous souhaitez que le formulaire transmette au serveur des paramtres d'URL plutt que des paramtres de formulaire lorsque l'utilisateur clique sur le bouton d'envoi), l'expression myGroup="CheckedValue" sera transmise au serveur via l'URL.
b Cliquez sur le bouton Plus (+) pour ajouter un bouton radio au groupe. Saisissez l'tiquette et la valeur du nouveau
bouton.
version prliminaire
c Cliquez sur les flches haut ou bas pour rorganiser les boutons. d Pour dfinir un bouton radio prcis de faon ce qu'il soit slectionn l'ouverture de la page dans un navigateur,
dans la zone de texte Slectionner une valeur gale , saisissez une valeur gale celle du bouton radio. Saisissez une valeur statique ou dynamique. Pour saisir une valeur dynamique, cliquez sur l'icne reprsentant un clair (en regard de la zone de texte), puis slectionnez un jeu d'enregistrements contenant des valeurs possibles. Dans les deux cas de figure, la valeur indique doit correspondre celle de l'un des boutons radio du groupe. Pour afficher les valeurs des boutons radio, slectionnez chaque bouton, puis ouvrez son inspecteur Proprits (Fentre > Proprits).
e Slectionnez la mise en forme que Dreamweaver doit utiliser pour mettre en forme les boutons.
Utilisez soit des sauts de ligne, soit un tableau pour mettre les boutons en forme. Si vous activez l'option du tableau, Dreamweaver cre un tableau une seule colonne en plaant les boutons radio sur la gauche et les tiquettes sur la droite. Vous pouvez galement dfinir les proprits l'aide de l'inspecteur Proprits ou directement en mode Code.
Insertion d'un groupe de cases cocher

1 Placez le point d'insertion dans la bordure du formulaire. 2 Choisissez Insertion > Formulaire > Groupe de cases cocher. 3 Compltez les options de la bote de dialogue, puis cliquez sur OK. a Dans la zone Nom, tapez le nom du groupe de cases cocher.
Si vous dfinissez les cases cocher pour qu'elles renvoient des paramtres au serveur, ces derniers seront associs au nom du groupe. Par exemple, si vous nommez le groupe myGroup fixez la mthode du formulaire sur GET (en d'autres termes, vous voulez que le formulaire transmette au serveur des paramtres d'URL plutt que des paramtres de formulaire lorsque l'utilisateur clique sur le bouton d'envoi), l'expression myGroup="CheckedValue" est transmise au serveur via l'URL.
b Cliquez sur le bouton Plus (+) pour ajouter une case cocher au groupe. Saisissez l'tiquette et la valeur de la
nouvelle case cocher.

c Cliquez sur les flches haut ou bas pour rorganiser les cases cocher. d Pour dfinir une case cocher prciser de faon ce qu'elle soit slectionne l'ouverture de la page dans un
navigateur, dans la zone de texte Slectionner une valeur gale , saisissez une valeur gale celle de la case cocher. Saisissez une valeur statique ou dynamique. Pour saisir une valeur dynamique, cliquez sur l'icne reprsentant un clair (en regard de la zone de texte), puis slectionnez un jeu d'enregistrements contenant des valeurs possibles. Dans les deux cas de figure, la valeur indique doit correspondre celle de l'une des cases cocher du groupe. Pour afficher les valeurs des cases cocher, slectionnez chacune d'elles puis ouvrez son inspecteur Proprits (Fentre > Proprits).
e Slectionnez la mise en forme que Dreamweaver doit utiliser pour mettre en forme les cases cocher.
Utilisez soit des sauts de ligne, soit un tableau pour mettre les cases cocher en forme. Si vous activez l'option du tableau, Dreamweaver cre un tableau une seule colonne en plaant les cases cocher sur la gauche et les tiquettes sur la droite. Vous pouvez galement dfinir les proprits l'aide de l'inspecteur Proprits ou directement en mode Code.
version prliminaire
A propos des objets de formulaire dynamiques

Un objet de formulaire dynamique est un objet de formulaire dont l'tat initial est dtermin par le serveur lorsque la page est demande au serveur, et non par le concepteur du formulaire lors de sa cration. Par exemple, lorsqu'un utilisateur recherche une page PHP contenant un formulaire dans lequel se trouve un menu, un script PHP insr dans la page renseigne automatiquement le menu par des valeurs stockes dans une base de donnes. Le serveur envoie ensuite la page termine au navigateur de l'utilisateur. Le fait de rendre les objets de formulaire dynamiques permet de simplifier la maintenance d'un site. Par exemple, de nombreux sites utilisent des menus pour prsenter aux utilisateurs un ensemble d'options. Si un menu est dynamique, vous pouvez ajouter, supprimer ou modifier des lments de menu en un seul endroit (la table de base de donnes dans laquelle sont stocks ces lments) afin de mettre jour toutes les instances de ce mme menu sur le site.
Voir aussi
Insertion ou modification d'un menu de formulaire HTML dynamique

Vous avez la possibilit de renseigner un menu de formulaire ou une liste droulante HTML de faon dynamique l'aide des entres d'une base de donnes. Pour la majorit des pages, vous pouvez utiliser un objet de menu HTML. Avant de commencer, vous devez insrer un formulaire HTML dans une page ColdFusion, PHP ou ASP, puis dfinir un jeu d'enregistrements ou une autre source de contenu dynamique pour le menu.
1 Insertion d'un objet de formulaire Liste/Menu HTML dans votre page a Cliquez l'intrieur du formulaire HTML sur la page (Insertion > Formulaire > Formulaire). b Choisissez Insertion > Formulaire > Liste/Menu pour insrer l'objet de formulaire. 2 Effectuez l'une des oprations suivantes :
Slectionnez le nouvel objet de formulaire Liste/Menu HTML ou un objet existant, puis cliquez sur le bouton
Dynamique de l'inspecteur Proprits.
Choisissez Insertion > Objets de donnes > Donnes dynamiques > Liste de slection dynamique.
3 Compltez les options de la bote de dialogue Liste/Menu dynamique, puis cliquez sur OK. a Dans le menu droulant Options du jeu d'enregistrements, choisissez le jeu d'enregistrements utiliser comme
source de contenu. Ce menu vous permet galement de modifier ultrieurement les lments de menu ou de liste statiques et dynamiques.
b La zone Options statiques vous permet de saisir un lment par dfaut dans la liste ou le menu. Cette option vous
permet aussi de modifier les entres statiques d'un objet de formulaire de liste ou de menu aprs que vous avez ajout un contenu dynamique.
c (Facultatif) Utilisez les boutons plus (+) et moins (-) pour ajouter et supprimer des lments de la liste. Les lments
sont dans le mme ordre que dans la bote de dialogue Valeur de la liste. Le premier lment sur la liste est l'lment slectionn lorsque la page est charge dans un navigateur. Utilisez les boutons flchs Haut et Bas pour rorganiser les lments de la liste.
d Dans le menu droulant Valeurs, slectionnez le champ contenant les valeurs des lments de menu. e Dans le menu droulant Etiquettes, slectionnez le champ contenant les tiquettes des lments de menu. f
(Facultatif) Pour spcifier qu'un lment de menu particulier soit slectionn l'ouverture de la page dans un navigateur ou lorsqu'un enregistrement est affich dans le formulaire, indiquez une valeur gale celle de l'lment de menu dans la zone de texte Slectionner une valeur gale .
version prliminaire
Vous pouvez indiquer une valeur statique ou dynamique, en cliquant sur l'icne reprsentant un clair ( ct de la zone de texte), puis en slectionnant une valeur dynamique dans la liste des sources de donnes. Dans les deux cas, la valeur indique doit correspondre l'une des valeurs des lments de menu.
Ajout de la fonctionnalit dynamique des menus de formulaire HTML existants

1 En mode Cration, slectionnez l'objet de formulaire liste/menu. 2 Dans l'inspecteur Proprits, cliquez sur le bouton Dynamique. 3 Compltez les options de la bote de dialogue, puis cliquez sur OK.
Affichage de contenu dynamique dans des champs de texte HTML

Vous pouvez afficher un contenu dynamique dans des champs de texte HTML lorsque le formulaire est affich dans un navigateur. Avant de commencer, vous devez crer le formulaire dans une page ColdFusion, PHP ou ASP, puis dfinir un jeu d'enregistrements ou une autre source de contenu dynamique pour la zone de texte.
1 Slectionnez le champ de texte dans le formulaire HTML de votre page. 2 Dans l'inspecteur Proprits, cliquez sur l'icne en forme d'clair situe en regard de la zone de texte Val. init. pour
afficher la bote de dialogue Donnes dynamiques.

3 Slectionnez la colonne du jeu d'enregistrements qui doit fournir une valeur au champ de texte, puis cliquez sur OK.
Dfinition des options de la bote de dialogue Champ de texte dynamique

1 Dans le menu droulant Champ de texte, slectionnez le champ de texte que vous souhaitez rendre dynamique. 2 Cliquez sur l'icne en forme d'clair situe en regard de la zone de texte Dfinir la valeur , puis slectionnez une
source de donnes dans la liste des sources disponibles. Cette source doit contenir des informations textuelles. Si aucune source de donnes n'apparat dans la liste ou si aucune des sources disponibles ne correspond vos besoins, cliquez sur le bouton Plus (+) pour dfinir une nouvelle source.
Voir aussi
Activation dynamique d'une case cocher HTML

Vous pouvez laisser le serveur dterminer l'ventuelle activation d'une case cocher lors de l'affichage du formulaire dans un navigateur. Avant de commencer, vous devez crer le formulaire dans une page ColdFusion, PHP ou ASP, puis dfinir un jeu d'enregistrements ou une autre source de contenu dynamique pour ces cases cocher. L'idal serait que la source de contenu contienne des donnes boolennes, telles que Yes/No ou true/false.
1 Slectionnez un objet de formulaire correspondant une case cocher dans votre page. 2 Dans l'inspecteur Proprits, cliquez sur le bouton Dynamique.
version prliminaire
3 Renseignez la bote de dialogue Case cocher dynamique, puis cliquez sur OK.
Slectionnez l'icne reprsentant un clair, ct de la zone de texte Cocher si, puis slectionnez le champ dans la
liste des sources de donnes. La source de donnes doit contenir des donnes boolennes telles que Yes et No, ou true et false. Si aucune source de donnes n'apparat dans la liste ou si aucune des sources disponibles ne correspond vos besoins, cliquez sur le bouton Plus (+) pour dfinir une nouvelle source.
Dans la zone de texte Egal , tapez la valeur que le champ doit contenir pour que la case cocher soit active.
Par exemple, pour que la case soit active lorsqu'un champ donn d'un enregistrement a la valeur Yes, tapez Yes dans la zone de texte Egal . Remarque : Cette valeur est galement renvoye au serveur si l'utilisateur clique sur le bouton Envoyer du formulaire.
Activation dynamique d'un bouton radio HTML

Activez dynamiquement un bouton radio HTML lorsqu'un enregistrements s'affiche dans le formulaire HTML dans un navigateur. Avant de commencer, vous devez crer le formulaire dans une page ColdFusion, PHP ou ASP, puis insrer au moins un groupe de boutons radio HTML (Insertion > Formulaire > Groupe de boutons radio). Vous devez galement dfinir un jeu d'enregistrements ou une autre source de contenu dynamique pour les boutons radio. L'idal serait que la source de contenu contienne des donnes boolennes, telles que Yes/No ou true/false.
1 En mode Cration, slectionnez un bouton radio dans le groupe. 2 Dans l'inspecteur Proprits, cliquez sur le bouton Dynamique. 3 Compltez les options de la bote de dialogue Groupe de boutons radio dynamiques, puis cliquez sur OK.
Dfinition des options de la bote de dialogue Groupe de boutons radio dynamiques

1 Dans le menu droulant Groupe de boutons radio dynamiques, slectionnez un formulaire et un groupe de boutons
radio de la page. La zone Valeurs de boutons radio affiche la valeur de chaque bouton radio du groupe.
2 Dans la liste des valeurs affiches, slectionnez la valeur prslectionner dynamiquement. Cette valeur s'affiche
dans la zone de texte Valeur.

3 Cliquez sur l'icne en forme d'clair situe en regard de la zone de texte Slectionner une valeur gale , puis
slectionnez un jeu d'enregistrements contenant des valeurs possibles pour les boutons radio du groupe. Le jeu d'enregistrements que vous slectionnez contient des valeurs correspondant celles des boutons radio. Pour afficher les valeurs des boutons radio, slectionnez chaque bouton, puis ouvrez son inspecteur Proprits (Fentre > Proprits).
4 Cliquez sur OK.
Dfinition des options de la bote de dialogue Groupe de boutons radio dynamiques (ColdFusion)
1 Dans le menu droulant Groupe de boutons radio, slectionnez un groupe de boutons radio et un formulaire. 2 Cliquez sur l'icne en forme d'clair en regard de la zone de texte Slectionner une valeur gale . 3 Renseignez la bote de dialogue Donnes dynamiques, puis cliquez sur OK. a Slectionnez une source de donnes dans la liste.
version prliminaire
b (Facultatif) Slectionnez un format de donnes pour le texte. c (Facultatif) Modifiez le code que Dreamweaver insre dans votre page pour afficher le texte dynamique. 4 Cliquez sur OK pour fermer la bote de dialogue Groupe de boutons radio dynamiques et insrer l'espace rserv
du contenu dynamique.
Validation de donnes de formulaire HTML

Dreamweaver permet d'ajouter un code JavaScript permettant de vrifier le contenu des champs de texte spcifis afin de garantir que l'utilisateur a bien saisi le type de donnes appropri. Vous pouvez utiliser des widgets de formulaire Spry pour crer vos formulaires et valider le contenu d'lments de formulaires spcifiques. Pour plus d'informations, consultez les rubriques consacres Spry ci-dessous. Vous pouvez galement crer dans Dreamweaver des formulaires ColdFusion qui valident le contenu de certains champs. Pour plus d'informations, consultez le chapitre consacr ColdFusion ci-dessous.
1 Crez un formulaire HTML qui comprend au moins un champ de texte et un bouton Envoyer.
Assurez-vous que chaque champ de texte que vous souhaitez valider porte un nom unique.
2 Slectionnez le bouton Envoyer. 3 Dans le panneau Comportements (Fentre > Comportements), cliquez sur le bouton Plus (+) et slectionnez le
comportement Valider le formulaire dans la liste.

4 Dfinissez les rgles de validation de chaque champ de texte et cliquez sur OK.
Par exemple, vous pouvez spcifier qu'un champ de texte utilis pour l'ge d'une personne n'accepte que les chiffres. Remarque : Le comportement Valider le formulaire est uniquement disponible lorsqu'un champ de texte a t insr dans le document.
Voir aussi
Utilisation du widget Validation de zone de texte la page 457 Utilisation du widget Zone de texte de validation la page 462 Utilisation du widget Validation de la slection la page 465 Utilisation du widget Validation de case cocher la page 468 Validation des donnes de formulaire ColdFusion la page 705
Liaison de comportements JavaScript des objets de formulaire HTML

Vous pouvez associer des comportements JavaScript stocks dans Dreamweaver des objets de formulaire HTML tels que des boutons.
1 Slectionnez l'objet de formulaire HTML. 2 Dans le panneau Comportements (Fentre > Comportements), cliquez sur le bouton Plus (+) et slectionnez un
comportement dans la liste.
version prliminaire
Liaison de scripts personnaliss des boutons de formulaire HTML

Certains formulaires utilisent JavaScript ou VBScript pour effectuer des actions (traitement du formulaire, par exemple) ct client, plutt que d'envoyer les donnes de formulaire au serveur pour leur traitement. Avec Dreamweaver, vous pouvez configurer un bouton de formulaire pour excuter un script particulier ct client lorsqu'un utilisateur clique sur le bouton.
1 Slectionnez un bouton Envoyer dans un formulaire. 2 Dans le panneau Comportements (Fentre > Comportements), cliquez sur le bouton Plus (+) et choisissez Appel
JavaScript dans la liste.

3 Dans la zone Appel JavaScript, tapez le nom de la fonction JavaScript excuter lorsque l'utilisateur clique sur le
bouton, puis cliquez sur OK. Vous pouvez, par exemple, indiquer le nom d'une fonction qui n'existe pas encore, comme processMyForm().
4 Si la fonction JavaScript ne figure pas encore dans la section head du document, ajoutez-la maintenant.
Par exemple, vous pouvez dfinir la fonction JavaScript suivante dans la section head du document afin d'afficher un message lorsque l'utilisateur clique sur le bouton Envoyer.
function processMyForm(){ alert('Thanks for your order!'); }
Voir aussi
Application du comportement Appel JavaScript la page 361
Cration de formulaires HTML accessibles

Lorsque vous insrez un objet de formulaire HTML, vous pouvez rendre l'objet de formulaire accessible et modifier les attributs d'accessibilit ultrieurement.
Ajout d'un objet de formulaire accessible

1 La premire fois que vous ajoutez des objets de formulaire accessibles, activez la bote de dialogue Accessibilit pour
les objets de formulaire (consultez la section Optimisation de l'espace de travail pour le dveloppement visuel la page 566). Vous devez effectuer cette opration une seule fois.
2 Dans le document, placez le point d'insertion l'endroit o l'objet de formulaire doit apparatre. 3 Choisissez Insertion > Formulaire, puis l'objet de formulaire insrer.
La bote de dialogue Attributs d'accessibilit aux balises d'entre s'affiche.

4 Compltez les options de la bote de dialogue, puis cliquez sur OK. Voici une liste partielle des options :
Remarque : Le lecteur d'cran lit le nom que vous avez entr en tant qu'attribut Label de l'objet.
ID attribue un ID au champ de formulaire. Cette valeur peut tre utilise pour faire rfrence au champ partir de
JavaScript. Elle est galement utilise comme valeur de l'attribut for si vous activez l'option Joindre une balise d'tiquette l'aide de l'attribut For du groupe Style.
Envelopper avec une balise d'tiquette Entoure l'lment de formulaire d'une balise d'tiquette, comme suit :
<label> <input type="radio" name="radiobutton" value="radiobutton"> RadioButton1</label>
version prliminaire
Joindre une balise d'tiquette l'aide de l'attribut 'for' Utilise l'attribut for pour entourer l'lment de formulaire
d'une balise d'tiquette, comme suit :

<input type="radio" name="radiobutton" value="radiobutton" id="radiobutton"> <label for="radiobutton">RadioButton2</label>
Si vous choisissez cette option, le navigateur place un rectangle de slection sur le texte associ une case cocher ou un bouton radio et permet l'utilisateur d'activer la case cocher ou le bouton radio en cliquant n'importe o dans le texte associ. Remarque : Il s'agit de l'option d'accessibilit la plus courante. Toutefois, cette fonction peut varier selon le navigateur utilis.
Aucune balise d'tiquette N'utilise pas de balise d'tiquette, comme suit:
<input type="radio" name="radiobutton" value="radiobutton"> RadioButton3
Cl d'accs Utilise un quivalent clavier (une lettre) et la touche Alt (Windows) ou Ctrl (Macintosh) pour slectionner
l'objet de formulaire dans le navigateur. Par exemple, si vous entrez B comme Cl d'accs, les utilisateurs de Macintosh peuvent appuyer sur Ctrl+B pour slectionner l'objet de formulaire.
Ordre des tabulations Indique l'ordre d'apparition des objets de formulaire. Si vous dfinissez un ordre d'apparition
pour un objet, assurez-vous de le faire galement pour tous les autres objets. La dfinition d'un ordre d'apparition peut se rvler utile lorsque la page contient d'autres liens et d'autres objets de formulaire et que vous voulez que l'utilisateur passe de l'un l'autre dans un ordre particulier.
5 Cliquez sur Oui pour insrer une balise de formulaire.
L'objet de formulaire apparat dans le document. Remarque : Si vous cliquez sur Annuler, l'objet de formulaire s'affiche dans le document, mais Dreamweaver ne lui associe ni les balises ni les attributs d'accessibilit.
Modification des valeurs d'accessibilit pour un objet de formulaire

1 Dans la fentre de document, slectionnez l'objet. 2 Effectuez l'une des oprations suivantes :
Modifiez les attributs en mode Code. Cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), puis
choisissez Modifier la balise.
Cration de formulaires ColdFusion

A propos des formulaires ColdFusion
Les formulaires ColdFusion fournissent plusieurs mcanismes intgrs permettant de valider les donnes de formulaire. Par exemple, vous pouvez vrifier si un utilisateur a entr une date valide. Certains contrles de formulaire comportent des fonctionnalits supplmentaires. Certaines d'entre elles n'ont pas de correspondant HTML et d'autres prennent directement en charge le remplissage dynamique du contrle partir de sources de donnes.
version prliminaire
Dreamweaver comporte de nombreuses amliorations facilitant la tche des dveloppeurs ColdFusion qui utilisent ColdFusion MX 7 ou version ultrieure comme serveur de dveloppement. Ces amliorations se prsentent sous la forme d'un plus grand nombre de boutons dans le panneau Insertion, d'lments de menu et d'inspecteurs Proprits qui permettent de crer rapidement des formulaires ColdFusion et d'en dfinir les proprits. Vous pouvez galement gnrer du code qui valide les informations fournies par les visiteurs du site. Par exemple, vous pouvez vrifier qu'une adresse lectronique saisie par un utilisateur contient bien un symbole @ (a commercial) ou qu'un champ de texte obligatoire a bien t renseign.
Activation des amliorations ColdFusion

Certaines de ces amliorations ncessitent de dfinir un ordinateur excutant ColdFusion MX 7 ou une version ultrieure comme serveur d'valuation de Dreamweaver. Par exemple, les inspecteurs de proprits destins aux contrles de formulaires ne sont disponibles que si vous spcifiez le serveur dvaluation correct. Il nest ncessaire de dfinir le serveur dvaluation que la premire fois. Dreamweaver dtecte ensuite automatiquement la version du serveur d'valuation et rend les amliorations disponibles si ColdFusion est dtect.
1 Si ce nest dj fait, dfinissez un site Dreamweaver pour votre projet ColdFusion. 2 Choisissez Site > Grer les sites, slectionnez votre site dans la liste, puis cliquez sur Edition. 3 Slectionnez la catgorie Serveurs et choisissez un ordinateur excutant ColdFusion MX 7 ou une version ultrieure
comme serveur dvaluation de votre site Dreamweaver. Veillez entrer une URL Web valide.
4 Ouvrez un document ColdFusion.
Les changements de lespace de travail de Dreamweaver ne sont visibles quaprs ouverture dun document ColdFusion.
Voir aussi
Scurisation dun dossier dans votre application (ColdFusion) la page 666 Configuration d'un site Dreamweaver la page 38 Configuration d'un serveur d'valuation la page 48
Cration de formulaires ColdFusion

Vous pouvez utiliser dans Dreamweaver un plus grand nombre de boutons dans le panneau Insertion, d'lments de menu et d'inspecteurs Proprits pour crer rapidement des formulaires ColdFusion et dfinir leurs proprits. Remarque : Ces amliorations ne sont disponibles que si vous pouvez accder un ordinateur excutant ColdFusion MX 7 ou une version ultrieure.
1 Ouvrez une page ColdFusion et placez le point d'insertion l'endroit o vous souhaitez insrer le formulaire. 2 Choisissez Insertion > Objets ColdFusion > Formulaire > Formulaire, ou slectionnez la catgorie Formulaires du
panneau Insertion et cliquez sur l'icne Formulaire CF. Dreamweaver insre un formulaire ColdFusion vierge. Dans une page affiche en mode Cration, les formulaires sont indiqus par une bordure rouge en pointill. Si vous ne voyez pas la bordure, vrifiez que l'option Affichage > Assistances visuelles > Elments invisibles est active.
3 En veillant ce que le formulaire soit toujours slectionn, utilisez linspecteur Proprits pour dfinir les proprits
de formulaire suivantes.
Formulaire CF Dfinit le nom du formulaire.
version prliminaire
Action Permet dindiquer le nom de la page ColdFusion traiter lorsque le formulaire est envoy. Mthode Permet dindiquer la mthode utiliser pour envoyer les donnes du formulaire au serveur:
POST Envoie les donnes laide de la mthode HTTP post, qui envoie les donnes au serveur dans un message
spar.
GET Envoie les donnes laide de la mthode HTTP get, qui place le contenu des champs du formulaire dans le corps de la chane de la requte dURL.
Cible Permet de modifier la valeur de lattribut target de la balise cfform. Type de codage Prcise la mthode de codage utilise pour transmettre les donnes du formulaire.
Remarque : Le type de codage na rien voir avec le codage des caractres. Cet attribut indique le type de contenu utilis pour envoyer le formulaire au serveur (lorsque la mthode post est utilise). S'il n'est pas spcifi, il prend par dfaut la valeur application/x-www-form-urlencoded .
Format Dtermine le type de formulaire crer :
HTML Gnre un formulaire HTML et le transmet au client. Les contrles enfants cfgrid et cftree peuvent tre au format Flash ou applet. Flash Gnre un formulaire Flash et le transmet au client. Tous les contrles sont au format Flash. XML Gnre un formulaire XML XForms et place les rsultats dans une variable avec le nom du formulaire ColdFusion. Rien n'est envoy au client. Les contrles enfants cfgrid et cftree peuvent tre au format Flash ou applet.
Style Permet dindiquer un style pour le formulaire. Pour plus d'informations, consultez la documentation
ColdFusion.
Enveloppe Flash/XML Permet dindiquer la couleur de halo pour donner un style au rsultat. Le thme dtermine la
couleur utilise pour les lments activs et slectionns.

Prserver les donnes Dtermine si les valeurs initiales des contrles doivent tre remplaces ou non par les nouvelles
valeurs lorsque le formulaire s'autotransmet les donnes.
Si cette option a la valeur Faux, les valeurs spcifies dans les attributs de la balise du contrle sont utilises. Si elle a la valeur Vrai, ce sont les valeurs saisies qui sont utilises.
Source scripts Indique ladresse URL (relative la racine du site) du fichier JavaScript qui contient le code ct client utilis par la balise et ses balises enfants. Cet attribut est utile si le fichier ne se trouve pas dans l'emplacement par dfaut. Cet attribut peut tre ncessaire dans certains environnements et configurations qui bloquent l'accs au dossier /CFIDE. Lemplacement par dfaut, qui peut tre modifi par ladministrateur ColdFusion, est /CFIDE/scripts/cfform.js. Archive Indique ladresse URL des classes Java tlchargeables pour les contrles dapplet cfgrid, cfslider et cftree. Leur emplacement par dfaut est /CFIDE/classes/cfapplets.jar. Hauteur Indique la hauteur du formulaire. Largeur Indique la largeur du formulaire. Afficher l'diteur de balises pour cfform Permet de modifier les proprits qui napparaissent pas dans linspecteur
Proprits.
4 Insrez des contrles de formulaire ColdFusion.
Placez le point d'insertion l'endroit o vous souhaitez insrer le contrle de formulaire ColdFusion dans le formulaire, puis slectionnez le contrle voulu dans le menu Insertion (Insertion > Objets ColdFusion > Formulaire) ou dans la catgorie Formulaires du panneau Insertion.
version prliminaire
5 Si ncessaire, dfinissez les proprits du contrle dans l'inspecteur Proprits.
Avant de dfinir les proprits dans l'inspecteur Proprits, vrifiez que le contrle est slectionn en mode Cration. Pour plus d'informations sur les proprits, cliquez sur l'icne Aide de l'inspecteur Proprits.
6 Amliorez la mise en forme du formulaire ColdFusion.
Si vous crez un formulaire HTML, vous pouvez utiliser des sauts de ligne, des sauts de paragraphes, du texte prformat ou des tableaux pour mettre en forme vos formulaires. Vous ne pouvez pas insrer un formulaire ColdFusion dans un autre formulaire ColdFusion (c'est--dire faire se chevaucher des balises), mais vous pouvez inclure plusieurs formulaires ColdFusion dans une mme page. Si vous crez un formulaire Flash, utilisez les styles CSS (feuilles de style en cascade ) pour le mettre en page. ColdFusion ignore les balises HTML du formulaire. Noubliez pas de donner un libell avec un texte descriptif aux champs du formulaire ColdFusion, pour aider les utilisateurs. Par exemple, crez un libell Indiquez votre nom pour le champ destin au nom de lutilisateur.
Voir aussi
Validation des donnes de formulaire ColdFusion la page 705 Cration d'un formulaire HTML la page 680
Insertion de contrles de formulaire ColdFusion

Le panneau Insertion et le menu Insrer permettent d'insrer rapidement des contrles dans un formulaire ColdFusion. Vous devez crer un formulaire ColdFusion vierge avant dy insrer des contrles. Remarque : Ces amliorations ne sont disponibles que si vous pouvez accder un ordinateur excutant ColdFusion MX 7 ou une version ultrieure.
1 En mode Cration, placez le point d'insertion l'intrieur de la bordure du formulaire. 2 Slectionnez le contrle dans le menu Insertion (Insertion > Objets ColdFusion > Formulaire) ou dans la catgorie
Formulaires du panneau Insertion.

3 Cliquez sur le contrle sur la page pour le slectionner, puis dfinissez ses proprits dans l'inspecteur Proprits.
Pour plus d'informations sur les proprits de contrles spcifiques, consultez les rubriques consacres chacun d'eux.
Voir aussi
Modification de contrles de formulaire ColdFusion la page 705 Validation des donnes de formulaire ColdFusion la page 705
Insertion de champs de texte ColdFusion

Vous pouvez insrer visuellement dans votre formulaire un champ de texte ou de mot de passe ColdFusion, puis dfinir ses options. Remarque : Cette amlioration nest disponible que si vous pouvez accder un ordinateur excutant ColdFusion MX 7 ou une version ultrieure.
Insertion visuelle d'un champ de texte ColdFusion

1 En mode Cration, placez le point d'insertion l'intrieur de la bordure du formulaire.
version prliminaire
2 Dans la catgorie Formulaire du panneau Insertion, cliquez sur l'icne Champ de texte CF, ou slectionnez
Insertion > Objets ColdFusion > Formulaire > Champ de texte CF. Un champ de texte apparat dans le formulaire.
3 Slectionnez le champ de texte et dfinissez ses options dans l'inspecteur Proprits. 4 Pour attribuer une tiquette au champ de texte dans la page, cliquez en regard du champ de texte et tapez le texte
souhait.
Insertion visuelle d'un champ de mot de passe

1 Rptez les tapes 1 et 2 de la procdure prcdente (insertion dun champ de texte). 2 Slectionnez le champ de texte que vous venez dinsrer pour lafficher dans linspecteur Proprits. 3 Dans l'inspecteur Proprits, slectionnez la valeur Mot de passe dans le menu droulant Mode texte.
Options des champs de texte (ColdFusion)

Pour dfinir les options d'un champ de texte ou de mot de passe ColdFusion, dfinissez les options suivantes dans l'inspecteur Proprits :
CFtextfield (Ch. Texte CF) Dfinit lattribut id de la balise <cfinput>. Valeur Permet dindiquer le texte afficher dans ce champ lorsque la page souvre dans un navigateur. Cette chane
peut tre statique ou dynamique. Pour indiquer une valeur dynamique, cliquez sur l'icne reprsentant un clair ct de la zone Valeur, et slectionnez la colonne d'un jeu d'enregistrements dans la bote de dialogue Donnes dynamiques. Les jeux denregistrements de cette colonne fournissent les valeurs affiches dans le champ de texte lorsque le formulaire est affich dans un navigateur.
Mode texte Permet de passer dun champ de saisie de texte standard un champ de saisie de mot de passe, et inversement. Lattribut modifi par ce contrle est type. Lecture seule Permet de mettre le texte affich en lecture seule. Long. max. Indique le nombre maximum de caractres que peut contenir le champ. Masque Permet dindiquer un masque de texte. Cette proprit permet de valider la saisie des utilisateurs Le format du masque est compos de caractres A, 9, X et ? .
Remarque : Lattribut de masque est ignor pour la balise cfinput type="password".

Valider Spcifie le type de validation du champ actuel. Valider Spcifie le moment de validation : onSubmit, onBlur ou onServer. Etiquette Permet dindiquer un libell pour le champ de texte. Schma Permet dindiquer un modle dexpression rgulire en JavaScript pour valider la saisie. Les barres obliques de dbut ou de fin sont ignores. Pour plus d'informations, consultez la documentation ColdFusion. Hauteur Permet dindiquer la hauteur du contrle, en pixels. Largeur Permet dindiquer la largeur du contrle, en pixels. Taille Permet dindiquer la taille du contrle. Obligatoire Permet de prciser si le champ de texte doit contenir des donnes pour que le formulaire soit transmis au
serveur.
Afficher l'diteur de balises Permet de modifier les proprits qui napparaissent pas dans linspecteur Proprits.
version prliminaire
Insertion de champs masqus ColdFusion

Vous pouvez insrer visuellement dans votre formulaire un champ masqu ColdFusion, puis dfinir ses proprits. Les champs masqus permettent de conserver et transmettre des informations qui ne sont pas saisies par lutilisateur. Ces informations sont masques afin que l'utilisateur ne puisse pas les voir. Remarque : Cette amlioration nest disponible que si vous pouvez accder un ordinateur excutant ColdFusion MX 7 ou une version ultrieure.
1 En mode Cration, placez le point d'insertion l'intrieur de la bordure du formulaire. 2 Dans la catgorie Formulaire du panneau Insertion, cliquez sur l'icne Champ cach CF.
Un marqueur apparat dans le formulaire ColdFusion. Si vous ne voyez pas le marqueur, choisissez Affichage > Assistances visuelles > Elments invisibles.
3 Slectionnez le champ masqu sur la page et dfinissez les options suivantes dans l'inspecteur Proprits :
Cfhiddenfield (Champ masqu) Indique le nom unique du champ masqu. Valeur Permet dindiquer la valeur du champ masqu. Cette chane peut tre statique ou dynamique.
Pour indiquer une valeur dynamique, cliquez sur l'icne reprsentant un clair ct de la zone Valeur, et slectionnez la colonne d'un jeu d'enregistrements dans la bote de dialogue Donnes dynamiques. Les jeux denregistrements de cette colonne fournissent les valeurs affiches dans le champ de texte lorsque le formulaire est affich dans un navigateur.
Valider Spcifie le type de validation du champ actuel. Valider Spcifie le moment de validation : onSubmit, onBlur ou onServer. Etiquette Permet dindiquer un libell pour le contrle. A l'excution, ce paramtre est ignor par le serveur ColdFusion. Schma Permet dindiquer un modle dexpression rgulire en JavaScript pour valider la saisie. Les barres obliques de dbut ou de fin sont ignores. Pour plus d'informations, consultez la documentation ColdFusion. Hauteur Permet dindiquer la hauteur du contrle, en pixels. A l'excution, ce paramtre est ignor par le serveur
ColdFusion.
Largeur Permet dindiquer la largeur du contrle, en pixels. A l'excution, ce paramtre est ignor par le serveur ColdFusion. Taille Permet dindiquer la taille du contrle. A l'excution, ce paramtre est ignor par le serveur ColdFusion. Obligatoire Permet de prciser si le champ masqu doit contenir des donnes pour que le formulaire soit transmis au
serveur.
Voir aussi
Modification de contrles de formulaire ColdFusion la page 705
Insertion de zones de texte ColdFusion

Vous pouvez insrer visuellement dans votre formulaire une zone de texte ColdFusion, puis dfinir ses proprits. Une zone de texte est un lment de saisie compos de plusieurs lignes de texte.
version prliminaire
Remarque : Cette amlioration nest disponible que si vous pouvez accder un ordinateur excutant ColdFusion MX 7 ou une version ultrieure.
1 Placez le point d'insertion dans la bordure du formulaire. 2 Dans la catgorie Formulaire du panneau Insertion, cliquez sur l'icne Zone de texte CF.
Une zone de texte apparat dans le formulaire ColdFusion.

3 Slectionnez la zone de texte sur la page et dfinissez les options suivantes dans l'inspecteur Proprits :
Cftextarea (Zone de texte) Permet dindiquer un nom unique pour le contrle. Largeur car. Indique le nombre de caractres par ligne. Nbre lignes Permet dindiquer le nombre de lignes afficher dans la zone de texte. Wrap (Renvoi la ligne) Permet dindiquer comment le texte saisi par les utilisateurs doit tre renvoy la ligne. Obligatoire Permet dindiquer si la saisie de texte dans ce contrle est obligatoire (case coche) ou non (case non
coche).
Valeur initiale Permet dindiquer le texte afficher dans la zone de texte lorsque la page souvre dans un navigateur. Valider Spcifie le type de validation du champ actuel. Valider Spcifie le moment de validation : onSubmit, onBlur ou onServer. Etiquette Permet dindiquer un libell pour le contrle. Style Permet dindiquer un style pour le contrle. Pour plus d'informations, consultez la documentation ColdFusion. Hauteur Permet dindiquer la hauteur du contrle, en pixels. A l'excution, ce paramtre est ignor par le serveur
ColdFusion.
Largeur Permet dindiquer la largeur du contrle, en pixels. A l'excution, ce paramtre est ignor par le serveur ColdFusion. Afficher l'diteur de balises Permet de modifier les proprits qui napparaissent pas dans linspecteur Proprits.
4 Pour attribuer une tiquette la zone de texte, cliquez en regard de la zone et tapez le texte souhait.
Voir aussi
Validation des donnes de formulaire ColdFusion la page 705 Modification de contrles de formulaire ColdFusion la page 705
Insertion de boutons ColdFusion

Vous pouvez insrer visuellement dans votre formulaire un bouton ColdFusion, puis dfinir ses proprits. Les boutons contrlent les diffrentes oprations du formulaire ColdFusion. Les boutons permettent d'envoyer les donnes du formulaire au serveur ou de rinitialiser le formulaire. Il s'agit en gnral des boutons Envoyer et Rinitialiser. Vous pouvez galement attribuer un bouton d'autres tches de traitement pralablement dfinies dans un script. Un bouton peut ainsi calculer le montant total des lments slectionns en fonction des valeurs que vous leur avez attribues. Remarque : Cette amlioration nest disponible que si vous pouvez accder un ordinateur excutant ColdFusion MX 7 ou une version ultrieure.
1 Placez le point d'insertion dans la bordure du formulaire ColdFusion. 2 Dans la catgorie Formulaire du panneau Insertion, cliquez sur l'icne Bouton CF.
version prliminaire
Un bouton apparat dans le formulaire ColdFusion.

3 Slectionnez le bouton sur la page et dfinissez les options suivantes dans l'inspecteur Proprits :
Cfbutton (Zone de texte) Permet dindiquer un nom unique pour le contrle. Action Permet dindiquer le type de bouton crer. Afficher l'diteur de balises Permet de modifier les proprits qui napparaissent pas dans linspecteur Proprits.
A l'excution, les autres proprits sont ignores par le serveur ColdFusion.
Voir aussi
Modification de contrles de formulaire ColdFusion la page 705
Insertion de cases cocher ColdFusion

Vous pouvez insrer visuellement dans votre formulaire une case cocher ColdFusion, puis dfinir ses proprits. Utilisez des cases cocher pour permettre aux utilisateurs d'activer plusieurs options dans un groupe. Remarque : Cette amlioration nest disponible que si vous pouvez accder un ordinateur excutant ColdFusion MX 7 ou une version ultrieure.
1 Placez le point d'insertion dans la bordure du formulaire. 2 Dans la catgorie Formulaire du panneau Insertion, cliquez sur l'icne Case cocher CF.
Une case cocher apparat dans le formulaire ColdFusion.

3 Slectionnez la case cocher sur la page et dfinissez les options suivantes dans l'inspecteur Proprits :
Cfcheckbox (Zone de texte) Permet dindiquer un nom unique pour le contrle. Valeur Permet dindiquer la valeur renvoye par la case cocher si lutilisateur lactive. Etat initial Permet dindiquer si la case cocher est dj active lorsque la page souvre dans un navigateur. Valider Spcifie le type de validation de la case cocher. Valider Spcifie le moment de validation de la case cocher : onSubmit, onBlur ou onServer. Etiquette Permet dindiquer un libell pour la case cocher. Schma Permet dindiquer un modle dexpression rgulire en JavaScript pour valider la saisie. Les barres obliques
de dbut ou de fin sont ignores. Pour plus d'informations, consultez la documentation ColdFusion.
Hauteur Permet dindiquer la hauteur du contrle, en pixels. A l'excution, ce paramtre est ignor par le serveur
ColdFusion.
Largeur Permet dindiquer la largeur du contrle, en pixels. A l'excution, ce paramtre est ignor par le serveur ColdFusion. Taille Permet dindiquer la taille du contrle. A l'excution, ce paramtre est ignor par le serveur ColdFusion. Obligatoire Permet de prciser si la case cocher doit tre coche pour que le formulaire soit transmis au serveur. Afficher l'diteur de balises Permet de modifier les proprits qui napparaissent pas dans linspecteur Proprits.
4 Pour attribuer une tiquette la case cocher, cliquez en regard de la case sur la page et tapez l'tiquette souhaite.
version prliminaire
Voir aussi
Insertion de boutons radio ColdFusion

Vous pouvez insrer visuellement dans votre formulaire un bouton radio ColdFusion, puis dfinir ses proprits. Utilisez des boutons radio lorsque vous souhaitez que les utilisateurs ne slectionnent qu'une seule option dans un groupe. Elles sont gnralement utilises en groupe. Tous les boutons radio d'un mme groupe doivent porter le mme nom. Remarque : Cette amlioration nest disponible que si vous pouvez accder un ordinateur excutant ColdFusion MX 7 ou une version ultrieure.
1 Placez le point d'insertion dans la bordure du formulaire. 2 Choisissez Insertion > Objets ColdFusion > Formulaire > Bouton radio.
Un bouton radio apparat dans le formulaire ColdFusion.

3 Slectionnez le bouton radio sur la page et dfinissez les options suivantes dans l'inspecteur Proprits :
Cfradiobutton (Zone de texte) Permet dindiquer un nom unique pour le contrle. Valeur Permet dindiquer la valeur renvoye par le bouton radio si lutilisateur lactive. Etat initial Permet dindiquer si le bouton radio est dj activ lorsque la page souvre dans un navigateur. Valider Spcifie le type de validation du bouton radio. Valider Spcifie le moment de validation : onSubmit, onBlur ou onServer. Etiquette Permet dindiquer un libell pour le bouton radio. Schma Permet dindiquer un modle dexpression rgulire en JavaScript pour valider la saisie. Les barres obliques de dbut ou de fin sont ignores. Pour plus d'informations, consultez la documentation ColdFusion. Hauteur Permet dindiquer la hauteur du contrle, en pixels. A l'excution, ce paramtre est ignor par le serveur
ColdFusion.
Largeur Permet dindiquer la largeur du contrle, en pixels. A l'excution, ce paramtre est ignor par le serveur ColdFusion. Taille Permet dindiquer la taille du contrle. A l'excution, ce paramtre est ignor par le serveur ColdFusion. Obligatoire Permet de prciser si le bouton radio doit tre activ pour que le formulaire soit transmis au serveur. Afficher l'diteur de balises Permet de modifier les proprits qui napparaissent pas dans linspecteur Proprits.
4 Pour attribuer une tiquette au bouton radio, cliquez en regard du bouton et tapez le texte souhait.
Voir aussi
version prliminaire
Insertion de zones de liste ColdFusion

Vous pouvez insrer visuellement dans votre formulaire une zone de liste ColdFusion, puis dfinir ses proprits. Une zone de liste permet un visiteur de slectionner un ou plusieurs lments dans une liste. Les zones de liste sont utiles lorsque vous disposez d'un espace rduit et devez afficher de nombreux lments. Elles s'avrent galement pratiques lorsque vous souhaitez contrler les valeurs renvoyes au serveur. A la diffrence des champs de texte, dans lesquels les utilisateurs peuvent taper ce qu'ils veulent, y compris des donnes non valides, c'est vous de dfinir les valeurs exactes renvoyes par un menu. Il est possible d'insrer deux types de zones de liste dans un formulaire : un menu qui se droule lorsque l'utilisateur clique dessus, ou un menu qui affiche une liste d'lments que vous pouvez faire dfiler et slectionner. Remarque : Cette amlioration nest disponible que si vous pouvez accder un ordinateur excutant ColdFusion MX 7 ou une version ultrieure.
1 Placez le point d'insertion dans la bordure du formulaire. 2 Dans la catgorie Formulaire du panneau Insertion, cliquez sur l'icne Slection CF.
Une zone de liste apparat dans le formulaire ColdFusion.

3 Slectionnez la zone de liste sur la page et dfinissez les options suivantes dans l'inspecteur Proprits :
Cfselect (Zone de texte) Permet dindiquer un nom unique pour le contrle. Type Permet de choisir entre un menu droulant ou une liste. Si vous choisissez le type Liste, les options Hauteur liste et Autoriser la slection de plusieurs listes deviennent disponibles. Hauteur liste Permet dindiquer le nombre de lignes afficher dans la liste. Cette proprit nest disponible quavec le
type Liste.
Autoriser la slection de plusieurs listes Permet dindiquer si lutilisateur peut slectionner plusieurs options la fois dans la liste. Cette proprit nest disponible quavec le type Liste. Modifier les valeurs Ouvre une bote de dialogue qui permet d'ajouter, modifier ou supprimer des options la zone de
liste.
Initialement slectionn Dfinit les lments slectionns par dfaut dans la liste. Si vous avez activ loption
Autoriser la slection de plusieurs listes, vous pouvez slectionner plusieurs options.

Jeu d'enregistrements Permet dindiquer le nom de la requte ColdFusion utiliser pour remplir la liste ou le menu. Afficher colonne Permet dindiquer la colonne du jeu denregistrements qui doit fournir le libell de chaque lment de la liste. Cette proprit est utilise de concert avec la proprit Jeu denregistrements. Colonne valeurs Permet dindiquer la colonne du jeu denregistrements qui doit fournir la valeur de chaque lment de la liste. Cette proprit est utilise de concert avec la proprit Jeu denregistrements. Etiquette Flash Permet dindiquer un libell pour la zone de liste. Hauteur Flash Permet dindiquer la hauteur du contrle, en pixels. A l'excution, ce paramtre est ignor par le serveur
ColdFusion.
Largeur Flash Permet dindiquer la largeur du contrle, en pixels. A l'excution, ce paramtre est ignor par le serveur
ColdFusion.
Message Permet dindiquer le message afficher si la proprit Obligatoire est active et si lutilisateur na pas effectu
de slection avant de tenter denvoyer le formulaire.

Obligatoire Permet de prciser si un lment de menu doit tre slectionn pour que le formulaire soit transmis au
serveur.
version prliminaire
Voir aussi
Insertion de champs dimage ColdFusion

Vous pouvez insrer visuellement dans votre formulaire un champ dimage ColdFusion, puis dfinir ses options. Les champs dimage permettent de crer des boutons personnaliss. Remarque : Cette amlioration nest disponible que si vous pouvez accder un ordinateur excutant ColdFusion MX 7 ou une version ultrieure.
1 En mode Cration, placez le point d'insertion l'intrieur de la bordure du formulaire. 2 Dans la catgorie Formulaire du panneau Insertion, cliquez sur l'icne Champ d'image CF. Recherchez limage
insrer, puis cliquez sur OK. Vous pouvez aussi entrer directement le chemin daccs du fichier image dans la zone Src. Remarque : Si le fichier dimage se trouve lextrieur du dossier racine du site, il est prfrable de copier cette image dans le dossier racine. En effet, les images situes lextrieur du dossier racine risquent dtre inaccessible aprs publication du site.
3 Slectionnez le champ d'image sur la page et dfinissez les options suivantes dans l'inspecteur Proprits :
Cfimagefield (Zone de texte) Permet dindiquer un nom unique pour le contrle. Src Permet dindiquer ladresse URL de limage insrer. Sec Permet d'indiquer un message qui apparatra lorsque l'image ne peut pas tre affiche. Alignement Permet dindiquer lalignement de limage. Bordure Permet dindiquer la largeur de la bordure de limage. Modifier image Ouvre limage dans votre logiciel de retouche dimages par dfaut.
Pour dfinir votre logiciel de retouche dimages par dfaut, choisissez Edition > Prfrences > Types de fichiers/Editeurs. Si ce logiciel nest pas dfini, le bouton Modifier limage est sans effet.
Valider Spcifie le type de validation du champ dimage. Valider Spcifie le moment de validation : onSubmit, onBlur ou onServer. Etiquette Permet dindiquer un libell pour le bouton radio. Schma Permet dindiquer un modle dexpression rgulire en JavaScript pour valider la saisie. Les barres obliques de dbut ou de fin sont ignores. Pour plus d'informations, consultez la documentation ColdFusion. Hauteur Permet dindiquer la hauteur du contrle, en pixels. Largeur Permet dindiquer la largeur du contrle, en pixels. Taille Permet dindiquer la taille du contrle. A l'excution, ce paramtre est ignor par le serveur ColdFusion. Obligatoire Permet de prciser si le contrle doit contenir des donnes pour que le formulaire soit transmis au serveur. Afficher l'diteur de balises Permet de modifier les proprits qui napparaissent pas dans linspecteur Proprits.
version prliminaire
Voir aussi
Insertion de champs de fichier ColdFusion

Vous pouvez insrer visuellement dans votre formulaire un champ de fichier ColdFusion, puis dfinir ses proprits. Vous pouvez crer un champ de fichier pour permettre aux utilisateurs de slectionner un fichier sur leur ordinateur (tel qu'un document de traitement de texte ou un fichier graphique) et de le transfrer sur le serveur. Un champ de fichier ColdFusion est similaire un champ de texte, mais contient galement un bouton Parcourir. L'utilisateur peut soit saisir manuellement le chemin d'accs au fichier transfrer, soit cliquer sur le bouton Parcourir pour le rechercher et le slectionner. Les champs de fichier ncessitent l'utilisation de la mthode POST pour transmettre des fichiers depuis un navigateur vers le serveur. Le fichier est transfr l'adresse indique dans la zone de texte Action du formulaire. Avant d'utiliser le champ de fichier, vrifiez auprs de votre administrateur de serveur que le transfert anonyme de fichiers est autoris. Les champs de fichier ncessitent aussi que le codage du formulaire soit dfini comme multipart/form . Dreamweaver active automatiquement ce paramtre lorsque vous insrez un contrle de champ de fichier. Remarque : Cette amlioration nest disponible que si vous pouvez accder un ordinateur excutant ColdFusion MX 7 ou une version ultrieure.
1 En mode Cration, slectionnez le formulaire ColdFusion pour lafficher dans linspecteur Proprits.
Pour slectionner rapidement le formulaire, cliquez n'importe o dans son cadre, puis cliquez sur la balise <cfform> dans le slecteur de balises figurant dans le coin infrieur de la fentre de document.
2 Dans l'inspecteur Proprits, dfinissez la mthode du formulaire comme POST . 3 Dans le menu droulant Enctype, slectionnez multipart/form-data. 4 Placez le point d'insertion l'intrieur de la bordure du formulaire, lendroit o le champ de fichier doit
apparatre.
5 Choisissez Insertion > Objets ColdFusion > Formulaire > Champ fichier.
Un champ de fichier apparat dans le document.

6 Slectionnez le champ de fichier sur la page et dfinissez les proprits suivantes dans l'inspecteur Proprits :
Cffilefield (Zone de texte) Permet dindiquer un nom unique pour le contrle. Long. max. Indique le nombre maximum de caractres que peut contenir le chemin daccs du fichier. Valider Spcifie le type de validation du champ actuel. Valider Spcifie le moment de validation : onSubmit, onBlur ou onServer. Etiquette Permet dindiquer un libell pour le champ. Schma Permet dindiquer un modle dexpression rgulire en JavaScript pour valider la saisie. Les barres obliques de dbut ou de fin sont ignores. Pour plus d'informations, consultez la documentation ColdFusion. Hauteur Permet dindiquer la hauteur du contrle, en pixels. A l'excution, ce paramtre est ignor par le serveur
ColdFusion.
Largeur Permet dindiquer la largeur du contrle, en pixels. A l'excution, ce paramtre est ignor par le serveur ColdFusion. Taille Permet dindiquer la taille du contrle.
version prliminaire
Obligatoire Permet de prciser si le champ de fichier doit contenir des donnes pour que le formulaire soit transmis
au serveur.
Voir aussi
Insertion de champs de date ColdFusion

Vous ne pouvez pas insrer visuellement dans votre formulaire un champ de date ColdFusion, mais vous pouvez dfinir visuellement ses proprits. Un champ de date ColdFusion est un type spcial de champ de texte qui permet de slectionner une date dans un mini-calendrier afin de linsrer dans le champ de texte. Remarque : Cette amlioration nest disponible que si vous pouvez accder un ordinateur excutant ColdFusion MX 7 ou une version ultrieure.
1 En mode Cration, slectionnez le formulaire ColdFusion pour lafficher dans linspecteur Proprits.
Pour slectionner rapidement le formulaire, cliquez n'importe o dans son cadre, puis cliquez sur la balise <cfform> dans le slecteur de balises figurant dans le coin infrieur de la fentre de document.
2 Dans l'inspecteur Proprits, dfinissez le format du formulaire comme Flash .
Le contrle de champ de date ne peut apparatre que dans des formulaires ColdFusion en mode Flash.
3 Passez en mode daffichage Code (Affichage > Code) et insrez la balise suivante en un point quelconque entre les
balises CFForm douverture et de fermeture :

<cfinput name="datefield" type="datefield">
4 Passez en mode Cration, slectionnez le champ de date sur la page, puis dfinissez les options suivantes dans
l'inspecteur Proprits :
Cfdatefield (Zone de texte) Permet dindiquer un nom unique pour le contrle. Valeur Permet dindiquer la date afficher dans ce champ lorsque la page souvre dans un navigateur. Cette date peut
tre statique ou dynamique. Pour indiquer une valeur dynamique, cliquez sur l'icne reprsentant un clair ct de la zone Valeur, et slectionnez la colonne d'un jeu d'enregistrements dans la bote de dialogue Donnes dynamiques. Les jeux denregistrements de cette colonne fournissent les valeurs affiches dans le champ de date lorsque le formulaire est affich dans un navigateur.
Valider Spcifie le type de validation du champ actuel. Valider Spcifie le moment de validation : onSubmit, onBlur ou onServer. Etiquette Permet dindiquer un libell pour le champ. Schma Permet dindiquer un modle dexpression rgulire en JavaScript pour valider la saisie. Les barres obliques de dbut ou de fin sont ignores. Pour plus d'informations, consultez la documentation ColdFusion. Hauteur Permet dindiquer la hauteur du contrle, en pixels. Largeur Permet dindiquer la largeur du contrle, en pixels. Taille Permet dindiquer la taille du contrle.
version prliminaire
Obligatoire Permet de prciser si le champ de date doit contenir des donnes pour que le formulaire soit transmis au
serveur.
Voir aussi
Validation des donnes de formulaire ColdFusion la page 705
Modification de contrles de formulaire ColdFusion

Vous pouvez modifier visuellement les proprits des contrles de formulaires ColdFusion, que vous travailliez en mode Cration ou Code. Remarque : Cette amlioration nest disponible que si vous pouvez accder un ordinateur excutant ColdFusion MX 7 ou une version ultrieure.
1 En mode Cration, slectionnez le contrle de formulaire ; en mode Code, cliquez dans la balise du contrle
concern. L'inspecteur Proprits affiche les proprits du contrle de formulaire.

2 Modifiez ces proprits dans l'inspecteur Proprits.
Pour plus d'informations, cliquez sur l'icne Aide de l'inspecteur Proprits.

3 Pour dfinir d'autres proprits, cliquez sur le bouton Afficher l'diteur de balises dans l'inspecteur Proprits, et
dfinissez les proprits dans l'diteur de balises qui s'affiche.
Validation des donnes de formulaire ColdFusion

Dreamweaver permet de crer des formulaires ColdFusion permettant de vrifier dans le contenu des champs de texte spcifis que l'utilisateur a bien saisi le type de donnes appropri. Remarque : Cette amlioration nest disponible que si vous pouvez accder un ordinateur excutant ColdFusion MX 7 ou une version ultrieure.
1 Crez un formulaire ColdFusion comprenant au moins un champ de saisie et un bouton Envoyer. Assurez-vous
que chaque champ ColdFusion que vous souhaitez valider porte un nom unique.
2 Dans le formulaire, slectionnez le champ valider. 3 Dans linspecteur Proprits, indiquez comment le champ doit tre valid.
La partie infrieure de chaque inspecteur Proprits contient des contrles qui permettent de dfinir une rgle de validation spcifique. Par exemple, vous pouvez spcifier quun champ de texte donn doit contenir un numro de tlphone. Pour ce faire, choisissez Tlphone dans le menu droulant Valeur de l'inspecteur Proprits. Vous pouvez aussi indiquer le moment de la validation dans le menu local Valider .
version prliminaire
706
Chapitre 22 : Accessibilit
Adobe Dreamweaver CS5 comprend une srie de fonctions permettant de concevoir et de dvelopper des pages Web accessibles. En outre, l'application est elle-mme accessible aux personnes souffrant de handicaps.
Dreamweaver et l'accessibilit
Voir aussi
Insertion d'une image la page 242 Insertion de fichiers SWF la page 255 Validation de donnes de formulaire HTML la page 690 Cration de cadres et de jeux de cadres la page 202 Insertion d'un tableau et ajout de contenu la page 183
A propos du contenu accessible

L'accessibilit consiste faire en sorte que les sites ou les produits Web que vous crez puissent tre utiliss par des personnes souffrant de handicaps visuels, auditifs, moteurs ou autres. Les fonctions d'accessibilit de produits logiciels et de sites Web peuvent tre : la prise en charge de lecteurs d'cran, des quivalents textuels pour les graphiques, des raccourcis clavier, des modifications dans les couleurs d'affichage pour augmenter le contraste, etc. Dreamweaver inclut des outils qui facilitent son utilisation et vous permettent de crer un contenu accessible. Pour les dveloppeurs Dreamweaver qui doivent faire appel aux fonctions d'accessibilit, l'application prend en charge des lecteurs d'cran, la navigation avec le clavier et les fonctions d'accessibilit de votre systme d'exploitation. Pour les concepteurs Web qui souhaitent crer du contenu accessible, Dreamweaver vous aide crer des pages accessibles au contenu utile pour les lecteurs d'cran et en conformit avec les directives gouvernementales. Par exemple, des botes de dialogue vous invitent entrer des attributs d'accessibilit, tels que l'quivalent texte d'une image, lorsque vous insrez des lments de page. Ainsi, lorsque l'image s'affiche sur le systme d'un utilisateur ayant des problmes de vue, le lecteur d'cran lit la description. Remarque : Pour en savoir plus sur deux de ces importantes initiatives, consultez le site de la World Wide Web Consortium Web Accessibility Initiative (www.w3.org/wai) et la Section 508 de la loi amricaine Federal Rehabilitation Act (www.section508.gov). Aucun outil de cration Web ne peut automatiser entirement le processus de dveloppement. Pour concevoir des sites Web accessibles, vous devez comprendre les exigences lies l'accessibilit et devez continuellement tenir compte lors de vos prises de dcisions de la faon dont les personnes souffrant d'un handicap interagissent avec les pages Web. La meilleure faon de s'assurer qu'un site Web est accessible est de respecter toutes les procdures de prparation, de dveloppement, de tests et d'valuation.
Utilisation de lecteurs d'cran avec Dreamweaver

Un lecteur d'cran rcite le texte qui s'affiche sur l'cran de l'ordinateur. Il lit aussi les informations non textuelles, telles que les tiquettes de boutons ou les descriptions d'images dans l'application, fournies dans les balises ou les attributs d'accessibilit lors de la cration.
version prliminaire
Accessibilit
En tant que concepteur Dreamweaver, vous pouvez utiliser un lecteur d'cran pour vous assister dans la cration de vos pages Web. Le lecteur d'cran commence sa lecture par le coin suprieur gauche de la fentre de document. Dreamweaver prend en charge les lecteurs d'cran JAWS pour Windows de Freedom Scientific (www.freedomscientific.com) et Window-Eyes de GW Micro (www.gwmicro.com).
Prise en charge des fonctions d'accessibilit du systme d'exploitation

Dreamweaver prend en charge les fonctionnalits d'accessibilit des systmes d'exploitation Windows et Macintosh. Par exemple, sur le Macintosh, dfinissez les prfrences visuelles dans la bote de dialogue Prfrences d'accs universelles (Apple > Prfrences systme). Les paramtres slectionns sont alors repris par l'espace de travail de Dreamweaver. Le paramtre de contraste lev du systme d'exploitation Windows est galement pris en charge. Vous pouvez activer cette option l'aide du Panneau de configuration de Windows et elle affecte Dreamweaver de la faon suivante :
Les botes de dialogue et les panneaux utilisent des paramtres de couleurs systme. Par exemple, si vous fixez les
couleurs Blanc sur Noir, les botes de dialogue et les panneaux Dreamweaver utilisent du blanc comme couleur de premier plan et du noir en arrire-plan.
Le mode Code utilise les couleurs systme des fentres et du texte de fentres. Par exemple, si vous avez fix les
couleurs systme Blanc sur Noir et que vous changez les couleurs de texte dans Edition > Prfrences > Coloration du code, Dreamweaver ignore ces paramtres de couleur et affiche le texte de code avec du blanc comme couleur de premier plan et du noir en arrire-plan.
Le mode Cration utilise les couleurs d'arrire-plan et de texte que vous avez dfinies dans Modifier > Proprits
de la page pour que les pages que vous crez aient un rendu des couleurs similaire celui d'un navigateur.
Optimisation de l'espace de travail pour la conception de pages accessibles

Lorsque vous crez des pages accessibles, vous devez associer des informations aux objets prsents sur les pages, telles que des tiquettes et des descriptions, pour rendre votre contenu accessible tous les utilisateurs. Pour ce faire, activez la bote de dialogue Accessibilit de chaque objet, de faon ce que Dreamweaver vous demande d'entrer les informations d'accessibilit lorsque vous insrez des objets. Vous pouvez activer une bote de dialogue pour n'importe quel objet de la catgorie Accessibilit dans les prfrences.
1 Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh). 2 Slectionnez la catgorie Accessibilit dans la liste gauche, slectionnez un objet, dfinissez les options suivantes,
puis cliquez sur OK.

Affichage des attributs lors de l'insertion Slectionnez les objets pour lesquels vous souhaitez activer les botes de
dialogue d'accessibilit. Par exemple, les objets de formulaire, les cadres, les mdias et les images.
Laisser le focus sur le panneau Conserve le panneau l'tat actif afin qu'il soit disponible pour le lecteur d'cran. Si vous ne slectionnez pas cette option, le focus demeure en mode Cration ou Code lorsqu'un utilisateur ouvre un panneau. Restitution hors cran Slectionnez cette option lorsque vous utilisez un lecteur d'cran.
Remarque : Les attributs d'accessibilit apparaissent dans la bote de dialogue Tableau lors de l'insertion d'un nouveau tableau.
Fonction de rapport de validation d'accessibilit de Dreamweaver

La fonction de validation de l'accessibilit de Dreamweaver a t abandonne depuis Dreamweaver CS5.
version prliminaire
Accessibilit
Navigation dans Dreamweaver l'aide du clavier

Vous pouvez utiliser le clavier pour parcourir les panneaux, les inspecteurs, les botes de dialogue, les cadres et les tableaux sans utiliser de souris. Remarque : L'utilisation de la touche de tabulation et des touches flches n'est prise en charge que sous Windows.
Navigation dans les panneaux

1 Dans la fentre de document, appuyez sur Ctrl+F6 pour activer un panneau.
Une ligne pointille autour du titre du panneau indique que le panneau est actif. Le lecteur d'cran lit la barre de titre du panneau actif.
2 Appuyez de nouveau sur Ctrl+F6 jusqu' ce que le panneau dans lequel vous voulez travailler soit actif. Appuyez
sur Ctrl+Maj+F6 pour activer le panneau prcdent.

3 Si le panneau dans lequel vous voulez travailler n'est pas ouvert, utilisez les raccourcis clavier indiqus dans le menu
Fentre pour afficher le panneau appropri, puis appuyez sur Ctrl+F6. Si le panneau dans lequel vous voulez travailler est ouvert, mais affich sous sa forme rduite, activez la barre de titre du panneau et appuyez sur la barre d'espace. Appuyez de nouveau sur la barre d'espace pour rduire le panneau.
4 Appuyez sur la touche de tabulation pour passer d'une option une autre dans le panneau. 5 Utilisez les touches flches de faon approprie :
Si une option comporte des choix, utilisez les touches flches pour faire dfiler ces choix, puis appuyez sur la barre
d'espace pour valider la slection.
Si le groupe de panneaux comporte des onglets pour ouvrir d'autres panneaux, activez l'onglet ouvert puis utilisez
la touche flche gauche ou droite pour ouvrir un autre onglet. Aprs avoir ouvert un nouvel onglet, appuyez sur la touche de tabulation pour faire dfiler les options de ce panneau.
Navigation dans l'inspecteur Proprits

1 Appuyez sur Ctrl+F3 pour afficher l'inspecteur Proprits, s'il n'est pas visible. 2 Appuyez sur Ctrl+F6 (Windows uniquement) jusqu' ce que l'inspecteur Proprits soit actif. 3 Appuyez sur la touche de tabulation pour passer d'une option de l'inspecteur Proprits une autre. 4 Utilisez les touches flches pour parcourir les diffrentes options. 5 Appuyez sur Ctrl+Flche vers le bas/Flche vers le haut (Windows) ou sur Commande+Flche vers le bas/Flche
vers le haut (Macintosh) pour ouvrir ou fermer la section dveloppe de l'inspecteur Proprits, selon vos besoins. Alternativement, placez le focus sur la flche de dveloppement dans le coin infrieur droit puis appuyez sur la barre d'espace. Remarque : Pour pouvoir dvelopper et rduire l'inspecteur Proprits, le focus du clavier doit se trouver dans celui-ci, et pas sur le titre du panneau.
Navigation dans une bote de dialogue

1 Appuyez sur la touche de tabulation pour passer d'une option une autre dans la bote de dialogue. 2 Utilisez les touches flches pour faire dfiler les choix d'une option. 3 Si la bote de dialogue comporte une liste Catgorie, appuyez sur Ctrl+Tab (Windows) pour activer la liste
Catgorie puis utilisez les touches flches pour vous dplacer vers le haut ou vers le bas dans la liste.
4 Appuyez de nouveau sur Ctrl+Tab pour afficher les options d'une catgorie.
version prliminaire
Accessibilit
5 Appuyez sur Entre pour quitter la bote de dialogue.
Navigation dans les cadres

Si votre document contient des cadres, vous pouvez utiliser les touches flches pour activer un cadre.
Slection d'un cadre

1 Appuyez sur Alt+Flche vers le bas pour placer le point d'insertion dans la fentre de document. 2 Appuyez sur Alt+Flche vers le haut pour slectionner le cadre actif. 3 Continuez d'appuyer sur Alt+Flche vers le haut pour activer le jeu de cadres, puis les jeux de cadres parents, s'il
existe des jeux de cadres imbriqus.

4 Appuyez sur Alt+Flche vers le bas pour activer un jeu de cadres enfant ou un seul cadre dans un jeu de cadres. 5 Lorsqu'un cadre est actif, appuyez sur Alt+Flche gauche ou droite pour vous dplacer entre les cadres.
Navigation dans un tableau

1 Utilisez les touches flches ou appuyez sur la touche de tabulation pour vous dplacer vers d'autres cellules dans
un tableau. Si vous appuyez sur la touche de tabulation lorsque vous tre dans la cellule la plus droite, vous ajoutez une ligne au tableau.
2 Pour slectionner une cellule, appuyez sur Ctrl+A (Windows uniquement) lorsque le point d'insertion est dans la
cellule.
3 Pour slectionner un tableau en entier, appuyez deux fois sur Ctrl+A (Windows) si le point d'insertion est dans une
cellule ou une fois si une cellule est slectionne.

4 Pour quitter le tableau, appuyez trois fois sur Ctrl+A (Windows) lorsque le point d'insertion est dans une cellule,
deux fois si la cellule est slectionne ou une fois si le tableau est slectionn, puis appuyez sur les touches Haut, Gauche ou Droite.

Aide de Dreamweaver CS5

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Aide de Dreamweaver CS5

Uploaded by

Copyright:

Available Formats

version prliminaire

Utilisation dADOBE DREAMWEAVER CS5

Ajout d'autres objets multimdias

Rsolution des problmes lis aux liens

Aperu des pages dans les priphriques mobiles

Utilisation de contenu d'en-tte pour les pages

Importation de balises personnalises dans Dreamweaver

Extension AIR pour Dreamweaver

Dfinition d'attributs de balise modifiables

Utilisation du widget Panneau rductible

Affichage des enregistrements de base de donnes Ajout de comportements de serveur personnaliss

Scurisation dun dossier dans votre application (ColdFusion)

Chapitre 2 : Espace de travail

Droulement du travail et espace de travail dans Dreamweaver

Vue d'ensemble de la prsentation de l'espace de travail

Espace de travail prsentation des lments

partir de l'cran d'accueil, survoler Dreamweaver ou accder un didacticiel.

oprations de codage standard.

Prsentation de la fentre de document

document en mme temps.

Prsentation de la barre d'outils de document

Les options suivantes s'affichent dans la barre d'outils de document :

votre document possde dj un titre, celui-ci s'affiche dans ce champ.

Prsentation de la barre d'outils standard

Prsentation de la barre d'outils Rendu de style

un tlphone mobile et un BlackBerry.

indpendamment des autres boutons de mdia.

Prsentation de la barre d'outils Navigation de l'explorateur

A. Contrles de navigateur B. Zone d'adresse C. Options de l'affichage en direct

Prsentation de la barre d'outils de codage

Prsentation de la barre d'tat

selon des dimensions prdfinies ou personnalises.

Prsentation de l'inspecteur Proprits

Prsentation du panneau Insertion

Prsentation du panneau Fichiers

Prsentation du panneau Styles CSS

Prsentation des guides visuels

Utilisation de la fentre de document

Activation du mode Code

Activation du mode Code fractionn

Activation du mode Cration

Affichage la fois en modes Code et Cration

Basculement entre les modes Code et Cration

Fractionnement vertical des modes

(Affichage > Code et Cration).

Affichage en cascade ou en mosaque des fentres de document

Affichage en cascade des fentres de document

Affichage en mosaque des fentres de document

Redimensionnement de la fentre de document

Redimensionnement de la fentre de document selon une taille prdtermine:

Modification des valeurs figurant dans le menu contextuel Taille de fentre:

Ajout d'un nouveau format d'affichage au menu contextuel Taille de fentre:

Dfinition de la taille des fentres et de la vitesse de connexion

Rapports dans Dreamweaver

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

Utilisation de l'inspecteur Proprits

Affichage ou masquage de l'inspecteur Proprits

Dveloppement ou rduction de l'inspecteur Proprits

Affichage et modification des proprits d'un lment de page

Utilisation des menus contextuels

l'objet ou la fentre qui vous intresse.

Personnalisation de l'espace de travail de CS4

Rorganisation, ancrage ou dplacement des fentres de document

Ancrage et annulation dancrage de panneaux