715
Ce PDF d’aide est un composant de l’aide complète et à jour disponible en ligne. Pour consulter l’aide, connectez-vous à Internet. Vous pouvez également utiliser la nouvelle application Adobe Community Help afin de télécharger le contenu de l’aide pour un accès hors ligne. Utilisation d’ ADOBE ® DREAMWEAVER ® CS5 version préliminaire

Dream Weaver Cs5 Help

  • Upload
    oliwek

  • View
    1.081

  • Download
    7

Embed Size (px)

Citation preview

version prliminaire

Utilisation dADOBE DREAMWEAVER CS5Ce 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 prliminaireDernire 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 prliminaireDernire mise jour le 19/3/2010iii

SommaireChapitre 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 prliminaireDernire mise jour le 19/3/2010UTILISATION DE DREAMWEAVER CS5 ivSommaire

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 prliminaireDernire mise jour le 19/3/2010UTILISATION DE DREAMWEAVER CS5 vSommaire

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 prliminaireDernire mise jour le 19/3/2010UTILISATION DE DREAMWEAVER CS5 viSommaire

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 prliminaireDernire mise jour le 19/3/20101

Chapitre 1 : NouveautsVoici 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 prliminaireDernire mise jour le 19/3/2010UTILISATION DE DREAMWEAVER CS5 2Nouveauts

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 prliminaireDernire mise jour le 19/3/20103

Chapitre 2 : Espace de travailL'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 DreamweaverPrsentation des processus de DreamweaverVous 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 prliminaireDernire mise jour le 19/3/2010UTILISATION DE DREAMWEAVER CS5 4Espace 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 travailL'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 prliminaireDernire mise jour le 19/3/2010UTILISATION DE DREAMWEAVER CS5 5Espace 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 prliminaireDernire mise jour le 19/3/2010UTILISATION DE DREAMWEAVER CS5 6Espace 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 aussiUtilisation 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 lmentsL'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 prliminaireDernire mise jour le 19/3/2010UTILISATION DE DREAMWEAVER CS5 7Espace 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 documentLa 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 prliminaireDernire mise jour le 19/3/2010UTILISATION DE DREAMWEAVER CS5 8Espace 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 documentLa 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 prliminaireDernire mise jour le 19/3/2010UTILISATION DE DREAMWEAVER CS5 9Espace 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 standardLa 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 prliminaireDernire mise jour le 19/3/2010UTILISATION DE DREAMWEAVER CS5 10Espace de travail

Prsentation de la barre d'outils Rendu de styleLa 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'explorateurLa 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 prliminaireDernire mise jour le 19/3/2010UTILISATION DE DREAMWEAVER CS5 11Espace 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 codageLa 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 prliminaireDernire mise jour le 19/3/2010UTILISATION DE DREAMWEAVER CS5 12Espace de travail

Prsentation de la barre d'tatLa 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 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 prliminaireDernire mise jour le 19/3/2010UTILISATION DE DREAMWEAVER CS5 13Espace de travail

Prsentation de l'inspecteur PropritsL'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 InsertionLes 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 prliminaireDernire mise jour le 19/3/2010UTILISATION DE DREAMWEAVER CS5 14Espace 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 prliminaireDernire mise jour le 19/3/2010UTILISATION DE DREAMWEAVER CS5 15Espace de travail

Prsentation du panneau FichiersVous 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 prliminaireDernire mise jour le 19/3/2010UTILISATION DE DREAMWEAVER CS5 16Espace de travail

Prsentation du panneau Styles CSSIl 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 prliminaireDernire mise jour le 19/3/2010UTILISATION DE DREAMWEAVER CS5 17Espace de travail

Prsentation des guides visuelsDreamweaver 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 ladisposition des lments sur la page

Utiliser un trac d'image en arrire-plan de la page, de manire pouvoir reproduire plus aisment une mise enforme 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 deslments de page

Utilisez la grille afin d'effectuer un positionnement et un redimensionnement prcis des lments positionnementabsolu (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 GoLiveSi 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 aussiDidacticiel consacr Dreamweaver pour les utilisateurs de GoLive

Utilisation de la fentre de documentBasculement d'un mode un autre dans la fentre de documentVous 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 prliminaireDernire mise jour le 19/3/2010UTILISATION DE DREAMWEAVER CS5 18Espace de travail

Activation du mode Code fractionnLe 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 Effectuez l'une des oprations suivantes :

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 Effectuez l'une des oprations suivantes :

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 modesCette 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 prliminaireDernire mise jour le 19/3/2010UTILISATION DE DREAMWEAVER CS5 19Espace 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 documentSi 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 documentLa 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 prliminaireDernire mise jour le 19/3/2010UTILISATION DE DREAMWEAVER CS5 20Espace 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 connexion1 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 DreamweaverDans 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 prliminaireDernire mise jour le 19/3/2010UTILISATION DE DREAMWEAVER CS5 21Espace 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 contextuelsAffichage des barres d'outilsUtilisez 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 prliminaireDernire mise jour le 19/3/2010UTILISATION DE DREAMWEAVER CS5 22Espace 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 PropritsL'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 page1 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 prliminaireDernire mise jour le 19/3/2010UTILISATION DE DREAMWEAVER CS5 23Espace de travail

Utilisation des menus contextuelsLes 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 CS4Gestion des fentres et des panneauxPour 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 prliminaireDernire mise jour le 19/3/2010UTILISATION DE DREAMWEAVER CS5 24Espace de travail

Rorganisation, ancrage ou dplacement des fentres de documentLes 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 lemplacementvoulu dans le groupe.

Pour annuler lancrage dune fentre de document un groupe de fentres, faites glisser longlet de cette fentrehors 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 dansle groupe.

Pour crer des groupes de documents empils ou juxtaposs, faites glisser la fentre vers lune des zones de largagesitues 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