ADOBE Dreamweaver CS4 Instruction Manual [fr]

Utilisation

ADOBE® DREAMWEAVER® CS4

Utilisation d'Adobe

Si le présent guide est distribué avec un logiciel sous contrat de licence de l’utilisateur final, ce guide, de même que le logiciel dont il traite, est cédé sous licence et ne peut être copié ou utilisé que conformément à cette licence. Sauf autorisation spécifiée dans la licence, aucune partie de cette publication ne peut être reproduite, enregistrée sur un système de recherche ou transmise sous quelque forme ou par quelque moyen que ce soit (enregistrement électronique, mécanique ou autre), sans l’autorisation écrite préalable d’Adobe Systems Incorporated. Notez que le contenu de ce manuel est protégé par des droits d’auteur, même s’il n’est pas distribué avec un logiciel accompagné d’un contrat de licence pour l’utilisateur final.

Les informations contenues dans ce guide sont fournies à titre informatif uniquement ; elles sont susceptibles d’être modifiées sans préavis et ne doivent pas être interprétées comme étant un engagement de la part d’Adobe Systems Incorporated. Adobe Systems Incorporated n’accepte aucune responsabilité quant aux erreurs ou inexactitudes pouvant être contenues dans le présent guide.

Nous attirons votre attention sur le fait que les illustrations ou images que vous pouvez être amené à incorporer à vos projets peuvent être protégées par des droits d’auteur. L’inclusion non autorisée de tels éléments dans vos nouveaux travaux peut constituer une violation des droits du détenteur du copyright. Veuillez vous assurer que vous obtenez toute autorisation nécessaire auprès du détenteur du copyright.

Toute référence à des noms de sociétés dans les modèles types n’est utilisée qu’à titre d’exemple et ne fait référence à aucune société réelle.

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

This product includes software developed by the Apache Software Foundation (

The Graphics Interchange Format © is the Copyright property of CompuServe Incorporated. GIF(sm) is a Service Mark property of CompuServe Incorporated.

MPEG Layer-3 audio compression technology licensed by Fraunhofer IIS and Thomson Multimedia ( compressed audio within the Software for real time or live broadcasts. If you require an MP3 decoder for real time or live broadcasts, you are responsible for obtaining this MP3 technology license.

Speech compression and decompression technology licensed from Nellymoser, Inc. (

This product includes software developed by the OpenSymphony Group (

Sorenson Spark

® Dreamweaver® CS4 pour Windows® et Mac OS

http://www.apache.org/).

http://www.mp3licensing.com). You cannot use the MP3

www.nellymoser.com)

http://www.on2.com.

http://www.opensymphony.com/)

™ video compression and decompression technology licensed from Sorenson Media, Inc.

1994. All Rights Reserved. Proximity Technology Inc. The Proximity/Merriam-Webster Inc./Franklin Electronic Publishers Inc. © 1990 Williams Collins Sons & Co. Ltd. © 1997 - All rights reserved Proximity Technology Inc. © 1990 Williams Collins Sons & Co. Ltd. © 1990 - All rights reserved Proximity Technology Inc. © Oxford University Press © 2000. All rights reserved Proximity Technology Inc. © 1990 IDE a.s. © 1990 - All rights reserved Proximity Technology Inc.

This product includes software developed by Fourthought, Inc. (

This product includes software developed by CollabNet (

Adobe Systems Incorporated, 345 Park Avenue, San Jose, California 95110, USA.

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

http://www.fourthought.com).

http://www.Collab.Net/)

Sommaire

Chapitre 1 : Ressources

Activation et enregistrement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Aide et assistance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

Services, téléchargements et extras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

Dernières nouveautés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

Chapitre 2 : Espace de travail

Déroulement du travail et espace de travail dans Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

Utilisation de la fenêtre de document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

Utilisation de barres d'outils, d'inspecteurs et de menus contextuels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

Personnalisation de l'espace de travail de CS4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

Raccourcis clavier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

Extensions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

Chapitre 3 : Utilisation de sites Dreamweaver

Configuration d'un site Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

Gestion des sites Contribute avec Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

Utilisation de fichiers sans définir de site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62

Options de l'onglet Elémentaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64

iii

Chapitre 4 : Création et gestion de fichiers

Création et ouverture de documents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

Gestion des fichiers et des dossiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

Acquisition et placement de fichiers depuis ou vers votre serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90

Archivage et extraction de fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95

Synchronisation de fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104

Création de fichiers InContext Editing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106

Comparaison de fichiers pour en chercher les différences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113

Restauration de fichiers (utilisateurs de Contribute) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116

Voilage de fichiers et de dossiers dans votre site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116

Stockage des informations sur les fichiers dans des Design Notes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119

Test de votre site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122

Chapitre 5 : Gestion des actifs et des bibliothèques

A propos des actifs et des bibliothèques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126

Utilisation des actifs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127

Création et gestion d'une liste d'actifs favoris . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132

Utilisation des éléments de bibliothèque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134

Chapitre 6 : Création de pages avec CSS

Description des feuilles de style en cascade . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139

Création et gestion de CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144

Mise en forme des pages avec CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165

Utilisation des balises Div . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184

UTILISATION DE DREAMWEAVER CS4

Sommaire

Chapitre 7 : Mise en forme des pages avec HTML

Utilisation d'assistances visuelles pour la mise en forme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189

Présentation de contenu à l'aide de tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193

Utilisation de cadres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209

Chapitre 8 : Ajout de contenu dans les pages

Utilisation des pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223

Ajout et mise en forme de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236

Ajout et modification d'images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253

Insertion de fichiers SWF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266

Insertion de fichiers FLV . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270

Ajout de séquences audio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274

Ajout d'autres objets multimédias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276

Automatisation des tâches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284

Chapitre 9 : Liens et navigation

A propos des liens et de la navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290

Etablissement de liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292

Menus de reroutage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300

Barres de navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302

Cartes graphiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304

Résolution des problèmes liés aux liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 306

Chapitre 10 : Aperçu des pages

Prévisualisation de pages dans Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309

Aperçu des pages dans les navigateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311

Aperçu des pages dans les périphériques mobiles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313

Chapitre 11 : Utilisation de code de page

Informations générales sur le codage dans Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314

Configuration d'un environnement de codage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319

Définition des préférences de codage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321

Rédaction et modification de code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326

Réduction du code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342

Optimisation et débogage de code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344

Modification de code en mode Création . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349

Utilisation de contenu d'en-tête pour les pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356

Utilisation des inclusions côté serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360

Gestion des bibliothèques de balises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362

Importation de balises personnalisées dans Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365

Chapitre 12 : Ajout de comportements JavaScript

Utilisation des comportements JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 368

Application de comportements Dreamweaver intégrés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 372

Chapitre 13 : Utilisation d'autres applications

Intégration entre les applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389

Utilisation de Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390

UTILISATION DE DREAMWEAVER CS4

Sommaire

Utilisation de Photoshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397

Utilisation de Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 407

Utilisation de Bridge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408

Utilisation de Device Central . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 410

Utilisation de ConnectNow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412

Gestion des connexions aux services Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412

Chapitre 14 : Création et gestion des modèles

A propos des modèles Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414

Reconnaissance des modèles et des documents basés sur un modèle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420

Création d'un modèle Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 422

Création de régions modifiables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425

Création de régions répétées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 427

Utilisation des régions facultatives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 429

Définition d'attributs de balise modifiables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 432

Création d'un modèle imbriqué . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 433

Modification, mise à jour et suppression de modèles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 436

Exportation et importation du contenu d'un modèle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 440

Application ou suppression d'un modèle depuis un document existant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 441

Modification du contenu d'un document basé sur un modèle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 443

Syntaxe des modèles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 445

Définition de préférences de programmation pour les modèles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 447

Chapitre 15 : Création de pages Spry visuellement

A propos du cadre applicatif Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 449

Utilisation des widgets Spry (instructions générales) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 449

Utilisation du widget Accordéon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 451

Utilisation du widget Barre de menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 454

Utilisation du widget Panneau réductible . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 459

Utilisation du widget Panneau à onglet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 462

Utilisation du widget Info-bulle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 464

Utilisation du widget Validation de groupe de boutons radio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 466

Utilisation du widget Validation de zone de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 470

Utilisation du widget Zone de texte de validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 475

Utilisation du widget Validation de la sélection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 478

Utilisation du widget Validation de case à cocher . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 481

Utilisation du widget Validation de mot de passe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 484

Utilisation du widget Validation de confirmation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 488

Affichage de données à l'aide de Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 491

Ajout d'effets Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 505

Chapitre 16 : Affichage de données XML avec XSLT

A propos de XML et de XSLT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 510

Exécution de transformations XSL sur le serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 517

Exécution de transformations XSL sur le client . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 534

Entités de caractère manquant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 536

UTILISATION DE DREAMWEAVER CS4

Sommaire

Chapitre 17 : Préparation à la création de sites dynamiques

Description des applications Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 539

Configuration de l'ordinateur pour le développement d'applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 547

Connexions aux bases de données pour les développeurs ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 552

Connexions aux bases de données pour les développeurs ASP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 554

Connexions aux bases de données pour les développeurs PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 561

Résolution des problèmes de connexion aux bases de données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 563

Suppression de scripts de connexion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 569

Chapitre 18 : Ajout de contenu dynamique aux pages Web

Optimisation de l'espace de travail pour le développement visuel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 570

Conception de pages dynamiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 573

Présentation des sources de contenu dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 575

Panneaux de contenu dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 581

Définition de sources de contenu dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 582

Ajout de contenu dynamique dans les pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 597

Modification d'un contenu dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 601

Affichage des enregistrements de base de données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 604

Affichage des données dynamiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 614

Ajout de comportements de serveur personnalisés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 618

Chapitre 19 : Création visuelle d'applications

Création de pages principales et détaillées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 630

Création de pages de recherche et de résultats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 638

Création d'une page d'insertion d'enregistrement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 644

Création de pages de mise à jour d'enregistrements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 648

Création de pages de suppression d'enregistrements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 653

Création de pages avec objets de manipulation de données avancés (ColdFusion, ASP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 662

Création d'une page d'enregistrement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 667

Création d'une page d'ouverture de session . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 670

Création d'une page à accès restreint . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 672

Sécurisation d’un dossier dans votre application (ColdFusion) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 675

Utilisation de composants ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 675

Chapitre 20 : Création de formulaires

Collecte d'informations auprès des utilisateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 683

Création de formulaires Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 686

Création de formulaires ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 701

Chapitre 21 : Accessibilité

Dreamweaver et l'accessibilité . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 715

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 719

Chapitre 1 : Ressources

Avant de commencer à vous servir de votre logiciel, prenez le temps de lire la présentation relative à l'activation et aux nombreuses ressources à votre disposition. Vous avez accès à des vidéos d’explication, des modules externes, des modèles, des communautés d’utilisateurs, des séminaires, des didacticiels, des flux RSS, etc.

Activation et enregistrement

Aide à l’installation

Pour obtenir de l’aide pendant l’installation, consultez le Centre d’assistance à l’installation à l’adresse suivante :

www.adobe.com/go/cs4install_fr.

Activation de la licence

Lors du processus d’installation, votre logiciel Adobe contacte Adobe afin d’achever le processus d’activation de la licence. Aucune donnée personnelle n’est transmise lors de cette opération. Pour plus de détails sur l’activation du produit, consultez le site Web d’Adobe à l’adresse http://www.adobe.com/go/activation_fr.

L’activation d’une licence monoutilisateur prend en charge deux ordinateurs. Par exemple, vous pouvez installer le produit sur un ordinateur de bureau de votre lieu de travail et sur un ordinateur portable utilisé à votre domicile. Si vous souhaitez installer le logiciel sur un troisième ordinateur, vous devez d’abord le désactiver sur l’un des deux autres ordinateurs. Choisissez la commande Aide > Désactiver.

Enregistrement

Enregistrez votre produit afin de bénéficier gratuitement d’une aide à l’installation, de notifications de mises à jour, ainsi que d’autres services.

❖ Pour procéder à l’enregistrement, suivez les instructions affichées dans la boîte de dialogue d’enregistrement qui

s’affiche après l’installation du logiciel.

Si vous reportez l’enregistrement, vous pourrez effectuer cette procédure ultérieurement en choisissant la commande Aide > Enregistrement.

Programme d’amélioration des produits Adobe

Après un certain nombre d’utilisations du logiciel Adobe, une boîte de dialogue peut éventuellement apparaître, vous invitant à participer au programme d’amélioration des produits Adobe.

Si vous acceptez d’y participer, des données relatives à votre utilisation du logiciel sont envoyées à Adobe. Aucune information personnelle n’est enregistrée ou transmise. Le programme d’amélioration des produits Adobe ne rassemble que les informations concernant les fonctionnalités et les outils que vous utilisez dans le logiciel, ainsi que la fréquence d’utilisation.

Vous pouvez rejoindre ou quitter le programme d’amélioration à tout moment :

• Pour participer, choisissez la commande Aide > Programme d’amélioration des produits Adobe, puis cliquez sur le

bouton Oui, participer.

UTILISATION DE DREAMWEAVER CS4

Ressources

• Pour mettre fin à votre participation, choisissez la commande Aide > Programme d’amélioration des produits

Adobe, puis cliquez sur le bouton Non, merci.

Lisez-moi

Un fichier Lisez-moi relatif à votre logiciel est disponible en ligne et sur le disque d’installation. Ouvrez le fichier pour consulter des informations importantes sur les rubriques de type :

• Configuration système

• Installation (dont la désinstallation du logiciel)

• Activation et enregistrement

• Installation des polices

• Résolution des problèmes

• Support technique

• Informations juridiques

Aide et assistance

Aide communautaire

L’aide communautaire sur adobe.com est un environnement uniforme vous permettant d’accéder à différentes ressources générées par la communauté et contrôlées par des experts de l’industrie et des spécialistes Adobe. Les utilisateurs y fournissent des commentaires et des évaluations qui peuvent vous orienter vers les réponses souhaitées. La fonction de recherche dans l’aide communautaire vous permet de retrouver les meilleures ressources du Web consacrées aux produits et aux technologies Adobe. Sont notamment disponibles :

• Des vidéos, des didacticiels, des conseils et des techniques, des blogs, des articles et des exemples destinés aux

concepteurs comme aux développeurs.

• L’aide complète en ligne, régulièrement mise à jour, est plus approfondie que celle qui accompagne votre produit.

Si vous êtes connecté à Internet lorsque vous accédez à l’aide, vous êtes directement dirigé vers l’aide complète disponible sur le Web, et non vers la version abrégée fournie avec votre produit.

• Toutes les autres ressources disponibles sur adobe.com, telles que les articles de la base de connaissances, les fichiers

en téléchargement et les mises à jour, Developper Connection, etc.

Utilisez le champ de recherche de l’aide dans l’interface utilisateur de votre produit pour accéder à l’aide communautaire. Une vidéo consacrée à l’aide communautaire est disponible à l’adresse suivante :

www.adobe.com/go/lrvid4117_xp_fr.

Ressources supplémentaires

Vous pouvez commander une version imprimée de l’aide en ligne à l’adresse suivante : www.adobe.com/go/store_fr (les frais de livraison et de manutention vous seront facturés). L’aide en ligne fournit également un lien vers l’aide au format PDF, celle-ci étant complète et actualisée en permanence.

Consultez le site Web d’assistance technique d’Adobe, à l’adresse www.adobe.com/fr/support, pour en savoir plus sur les options d’assistance technique gratuites et payantes.

UTILISATION DE DREAMWEAVER CS4

Ressources

Services, téléchargements et extras

Vous pouvez optimiser votre produit en y intégrant divers services, modules externes et extensions. Vous pouvez également télécharger des exemples et autres éléments qui vous aideront dans votre travail.

Services créatifs en ligne Adobe

Adobe® Creative Suite® 4 s’enrichit de nouvelles fonctionnalités en ligne qui vous permettent d’exploiter toute la puissance du Web à partir de votre Bureau. Vous pourrez utiliser ces fonctionnalités pour vous mettre en contact et collaborer avec des membres de la communauté, tout en tirant le meilleur parti de vos outils Adobe. Extrêmement puissants, les services créatifs en ligne vous permettent de réaliser un vaste éventail de tâches, de la mise en correspondance de couleurs à l’échange de données en direct. Ces services s’intègrent de manière transparente aux applications bureautiques afin que vous puissiez rapidement améliorer les flux de production existants. Certains services offrent des fonctionnalités complètes ou partielles même lorsque vous êtes hors ligne.

Consultez le site adobe.com pour en savoir plus sur les services disponibles. Certaines applications de la suite Creative Suite 4 intègrent les fonctions suivantes :

Panneau Kuler™ Créez, partagez et découvrez des thèmes de couleurs en ligne.

Adobe® ConnectNow Travaillez en étroite collaboration avec des groupes de travail dispersés sur le Web, et partagez

voix, données et contenu multimédia.

Resource Central Accédez instantanément à des didacticiels, des fichiers d’exemple et des extensions pour les

applications vidéo numériques Adobe.

Pour plus de détails sur la gestion de vos services, consultez le site Web d’Adobe à l’adresse suivante :

www.adobe.com/go/learn_creativeservices_fr.

Adobe Exchange

Visitez le site Adobe Exchange à l’adresse www.adobe.com/go/exchange_fr pour télécharger des exemples, ainsi que des milliers de modules externes et d’extensions fournis par Adobe et des développeurs tiers. Ces modules externes et extensions peuvent vous aider à automatiser des tâches, à personnaliser des processus et à créer des effets professionnels spécifiques, entre autres.

Téléchargements Adobe

Rendez-vous à l’adresse www.adobe.com/go/downloads_fr pour obtenir gratuitement des mises à jour, des versions d’essai et d’autres logiciels utiles.

Adobe Labs

Le site Adobe Labs à l’adresse www.adobe.com/go/labs_fr vous permet de découvrir et d’évaluer les nouveaux produits et technologies développés par Adobe. Adobe Labs vous donne accès à tout un éventail de ressources :

• préversions de logiciels et technologies à venir ;

• échantillons de code et méthodes conseillées pour accélérer votre apprentissage ;

• préversions de la documentation technique et produit ;

• forums, contenu Wiki et autres ressources de collaboration pour vous aider à interagir avec des développeurs qui

partagent vos opinions.

UTILISATION DE DREAMWEAVER CS4

Ressources

Adobe Labs favorise la mise en place d’un processus de développement de logiciels axé sur la collaboration. Dans cet environnement, les clients utilisant de nouveaux produits et technologies deviennent rapidement productifs. Adobe Labs comprend également un forum permettant de recueillir les premiers commentaires. L’équipe de développement Adobe s’appuie sur ces commentaires pour créer des logiciels répondant aux besoins et aux attentes de la communauté.

Adobe TV

Le canal Adobe TV disponible à l’adresse http://tv.adobe.com/fr propose des vidéos permettant de parfaire ses connaissances ou de trouver une source d’inspiration.

Extras

Le disque d’installation contient divers extras qui vous permettront de profiter pleinement des fonctionnalités de votre logiciel Adobe. Certains extras sont installés sur votre ordinateur au cours du processus d’installation, tandis que d’autres sont disponibles sur le disque.

Pour afficher les extras installés avec le logiciel, accédez au dossier de l’application sur votre ordinateur.

• Windows® : [disque de démarrage]\Program Files\Adobe\[application Adobe]

• Mac OS® : [disque de démarrage]/Applications/[application Adobe]

Pour afficher les extras disponibles sur le disque, accédez au dossier Goodies pour la langue de votre choix sur le disque. Exemple :

• /English/Goodies/

Dernières nouveautés

Voici la liste des principales nouvelles fonctionnalités de Adobe® Dreamweaver® CS4.

Mode En direct

Dreamweaver CS4 vous permet de créer des pages Web dans des conditions de navigation réalistes, grâce au nouveau mode d'affichage En direct, tout en conservant un accès direct au code. Les modifications apportées au code se répercutent immédiatement dans l'affichage rendu. Voir « Prévisualisation de pages dans Dreamweaver » à la page 309.

Conseils de code pour les cadres applicatifs Ajax et JavaScript

Vous pouvez désormais rédiger du code JavaScript de manière plus rapide et précise, grâce à une prise en charge améliorée des objets essentiels JavaScript et des types de données primitifs. Vous pouvez également mettre en œuvre la fonctionnalité de codage étendue de Dreamweaver en incorporant des cadres applicatifs JavaScript courants tels que jQuery, Prototype et Adobe Spry. Voir « Utilisation des indicateurs de code » à la page 326.

Fichiers apparentés et Navigation dans le code

Dreamweaver CS4 vous permet de gérer de manière efficace les différents fichiers qui constituent les pages Web modernes. Vous pouvez cliquer sur n'importe quel fichier apparenté pour afficher en même temps sa source en mode Code et la page parente en mode Création. La nouvelle fonctionnalité Navigation dans le code montre toutes les sources de code qui influent sur votre sélection actuelle : règles CSS (feuilles de style en cascade), inclusions côté serveur, fonctions JavaScript externes, modèles Dreamweaver, fichiers source iFrame, etc. Voir « Ouverture des

fichiers associés » à la page 78 et « Navigation vers le code apparenté » à la page 335.

UTILISATION DE DREAMWEAVER CS4

Ressources

InContext Editing

Vous pouvez permettre aux utilisateurs d'apporter des modifications simples à leurs pages Web sans devoir faire appel à vos services ou à des logiciels supplémentaires. En tant que concepteur Dreamweaver, vous pouvez limiter les modifications à des pages spécifiques, des régions distinctes, voire des options de mise en forme personnalisées, le tout de manière rapide et aisée. Voir « Création de fichiers InContext Editing » à la page 106.

Meilleures pratiques CSS

L'inspecteur Propriétés de Dreamweaver CS4 vous permet de créer de nouvelles règles CSS et fournit des explications simples et précises quant à la place de chaque propriété dans la cascade des styles. Voir « Définition des propriétés de

texte dans l'inspecteur Propriétés » à la page 246.

Ensembles de données HTML

Vous pouvez intégrer la puissance des données dynamiques à vos pages Web sans devoir vous échiner à maîtriser les bases de données ou le codage XML (Extensible Markup Language). Les ensembles de données Spry reconnaissent les données dans une table HTML simple comme source de données interactive. Voir « Création d'un ensemble de

données HTML Spry » à la page 492.

Objets dynamiques Adobe Photoshop

Vous pouvez insérer n'importe quel document Adobe® Photoshop PSD (Photoshop Data File) dans Dreamweaver afin de créer un objet image dynamique. Les objets dynamiques sont étroitement liés au fichier source. Vous pouvez apporter des modifications à l'image source et mettre à jour l'image dans Dreamweaver sans ouvrir Photoshop. Voir « Utilisation de Photoshop » à la page 397.

Intégration de Subversion

Dreamweaver CS4 intègre le logiciel Subversion®, un système ouvert de contrôle de version, de manière à offrir une expérience d'archivage/extraction plus robuste. Vous pouvez mettre à jour votre site et archiver directement les modifications à partir de Dreamweaver. Voir « Utilisation de Subversion (svn) pour acquérir et archiver des fichiers » à la page 99.

Nouvelle interface utilisateur

Un nouveau concept d'interface utilisateur partagée vous permet de travailler de manière plus rapide et plus intelligente dans les composants de Adobe Creative Suite® 4. La fonction Commutation d'espace de travail vous permet de passer rapidement d'un environnement de travail à un autre. Consultez « Espace de travail » à la page 6.

Fonctionnalités obsolètes

Les fonctionnalités suivantes sont devenues obsolètes dans Dreamweaver CS4 :

• Scénarios

• Services Web

• Mode Mise en forme

• Vue Carte du site

• Prise en charge Java Bean

• Eléments Adobe® Flash (Visualisateur d'images)

• Texte Adobe® Flash et boutons Adobe® Flash

• Comportements de serveur et jeux d'enregistrements ASP.NET et JSP

Chapitre 2 : Espace de travail

L'espace de travail de Adobe® Dreamweaver® CS4 contient les barres d'outils, les inspecteurs et les panneaux qui servent à la création de pages Web. Vous pouvez personnaliser l'apparence générale et le comportement de l'espace de travail.

Déroulement du travail et espace de travail dans Dreamweaver

Présentation des processus de Dreamweaver

Vous pouvez utiliser plusieurs approches pour créer un site Web. Voici l'une des approches possibles :

Planification et configuration de votre site

Déterminez l'emplacement où vos fichiers seront enregistrés 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'accès utilisateur et les restrictions en matière de navigateurs, de plug-ins ou de téléchargement. Après avoir organisé vos informations et défini une structure, vous pouvez commencer la création du site. (Voir « Utilisation de sites

Dreamweaver » à la page 40.)

Organisation et gestion des fichiers de votre site

Dans le panneau Fichiers, vous pouvez facilement ajouter, supprimer et renommer des fichiers et des dossiers afin de modifier l'organisation en fonction de vos besoins. Dans le panneau Fichiers, vous trouverez de nombreux outils permettant la gestion de votre site, le transfert de vos fichiers vers et depuis un serveur distant, la configuration d'un processus d'archivage/extraction pour empêcher 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 gérer certains aspects de vos sites Adobe® Contribute®. (Voir « Gestion des fichiers et des dossiers » à la page 81 et « Gestion des actifs et des bibliothèques » à la page 126.)

Mise en forme de vos pages Web

Sélectionnez la technique de mise en forme de votre choix ou combinez les options de mise en forme de Dreamweaver pour définir la présentation de votre site. Vous pouvez utiliser des éléments PA, des styles de positionnement CSS ou des mises en forme CSS prédéfinies de Dreamweaver pour définir la mise en forme. Les outils de création de tableaux vous permettent de concevoir des pages rapidement en dessinant, puis en réorganisant la structure des pages. Si vous souhaitez afficher plusieurs éléments simultanément dans un navigateur Web, vous pouvez utiliser des cadres pour mettre en forme vos documents. Finalement, vous pouvez créer de nouvelles pages à partir d'un modèle Dreamweaver, puis actualiser automatiquement leur mise en forme lorsque le modèle change. (Voir « Création de pages avec CSS » à la page 139 et « Mise en forme des pages avec HTML » à la page 189.)

UTILISATION DE DREAMWEAVER CS4

Espace de travail

Ajout de contenu dans les pages

Ajoutez des actifs et des éléments de conception, par exemple du texte, des images, des images avec effet de survol, des cartes graphiques, des couleurs, des animations, des sons, des liens HTML, des menus de reroutage, etc. Vous pouvez utiliser les fonctions intégrées de création de page pour les éléments tels que les titres et les arrière-plans, taper directement dans la page ou importer du contenu d'autres documents. Dreamweaver fournit également des comportements permettant d'exécuter des tâches en réponse à des événements spécifiques, comme par exemple la validation d'un formulaire lorsque le visiteur clique le sur bouton Envoyer ou l'ouverture d'une deuxième fenêtre 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 différents navigateurs Web. (Voir « Ajout de contenu dans les pages » à la page 223).

Création de pages par codage manuel

Le codage manuel des pages Web constitue une autre approche de la création 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 méthodes (ou bien les deux) pour créer et modifier vos pages. (Voir « Utilisation de code de page » à la page 314.)

Configuration d'une application Web pour un contenu dynamique

De nombreux sites Web contiennent des pages dynamiques qui permettent aux visiteurs d'afficher les informations stockées dans des bases de données, voire d'ajouter ou de modifier des données dans certains cas. Pour créer ce type de pages, vous devez d'abord configurer un serveur Web et un serveur d'application, créer ou modifier un site Dreamweaver et vous connecter à une base de données. (Voir « Préparation à la création de sites dynamiques » à la page 539.)

Création de pages dynamiques

Dans Dreamweaver, vous pouvez définir diverses sources de contenu dynamique, y compris des jeux d'enregistrements extraits de bases de données, des paramètres de formulaire et des composants JavaBeans. Pour ajouter le contenu dynamique à une page, il suffit de le faire glisser vers cette dernière.

Vous pouvez définir une configuration de page qui affiche un ou plusieurs enregistrements à la fois (ou plusieurs pages d'enregistrements), ajoute des liens spéciaux permettant de passer d'une page d'enregistrements à une autre et crée des compteurs d'enregistrements pour faciliter la gestion de ces derniers. Vous pouvez encapsuler la logique d'application ou d'entreprise en faisant appel à des technologies telles que Adobe ® ColdFusion® et les services Web. Si vous avez besoin de plus de souplesse, vous pouvez créer des comportements de serveur et formulaires interactifs personnalisés. (Voir « Ajout de contenu dynamique aux pages Web » à la page 570.)

Test et publication

Le test de vos pages est un processus continu qui se déroule tout au long du cycle de développement. A la fin de ce cycle, vous publiez le site sur un serveur. De nombreux développeurs programment également une maintenance régulière pour s'assurer que le site reste à jour et est opérationnel. (Voir « Acquisition et placement de fichiers depuis

ou vers votre serveur » à la page 90.)

Vous trouverez un didacticiel vidéo sur les possibilités offertes par Dreamweaver à l'adresse

www.adobe.com/go/lrvid4040_dw_fr.

Vue d'ensemble de la présentation de l'espace de travail

L'espace de travail de Dreamweaver permet d'afficher des documents et les propriétés des objets. Il comporte des barres d'outils donnant accès aux opérations les plus courantes, vous permettant ainsi de modifier rapidement vos documents.

UTILISATION DE DREAMWEAVER CS4

Espace de travail

Sous Windows®, Dreamweaver propose une présentation intégrée en une seule fenêtre. Dans l'espace de travail intégré, toutes les fenêtres et tous les panneaux sont rassemblés dans une grande fenêtre d'application.

A. Barre d'application B. Barre d'outils du document C. Fenêtre de document D. Groupes de panneaux E. Commutation d'espace de travail F. Sélecteur de balises G. Inspecteur Propriétés H. Panneau Fichiers

Sous Mac OS®, Dreamweaver peut afficher de multiples documents dans une seule fenêtre, 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 fenêtre. Les groupes de panneaux sont initialement ancrés ensemble, mais vous pouvez les séparer pour les faire apparaître dans leur propre fenêtre. Lorsque des groupes de panneaux sont ancrés et que la fenêtre de document est agrandie, le redimensionnement, l'affichage et le masquage de panneaux entraîne le redimensionnement automatique du document principal, comme c'est le cas dans Windows.

UTILISATION DE DREAMWEAVER CS4

Espace de travail

A. Barre d'application B. Barre d'outils du document C. Fenêtre de document D. Commutation d'espace de travail E. Groupes de panneaux F. Sélecteur de balises G. Inspecteur Propriétés H. Panneau Fichiers

Vous trouverez un didacticiel sur l'utilisation des différents 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 présentation des éléments

L'espace de travail contient les éléments suivants:

Remarque : Dreamweaver propose de nombreux autres inspecteurs, panneaux et fenêtres. Pour ouvrir les panneaux, inspecteurs et fenêtres, utilisez le menu Fenêtre.

Ecran d'accueil Permet d'ouvrir un document récent ou de créer un nouveau document. Vous pouvez également, à

partir de l'écran d'accueil, survoler Dreamweaver ou accéder à un didacticiel.

Barre d'application Sur toute la largeur de la partie supérieure de la fenêtre d'application, cette barre contient une

section de commutation d'espace de travail, des menus (Windows uniquement) et d'autres contrôles d'application.

Barre d'outils du document Contient des boutons permettant d'accéder aux différents modes d'affichage de la fenêtre

du document (tels que le mode Création ou le mode Code), de définir les différentes options d'affichage et d'effectuer certaines opérations courantes, telles que la prévisualisation dans un navigateur.

UTILISATION DE DREAMWEAVER CS4

Espace de travail

Barre d'outils standard Non affichée dans l'agencement par défaut de l'espace de travail. Contient des boutons

correspondant aux opérations courantes des menus Fichier et Edition : Nouveau, Ouvrir, Parcourir dans Bridge, Enregistrer, Enregistrer tout, Imprimer le code, Couper, Copier, Coller, Annuler et Répéter. Pour afficher la barre d'outils standard, choisissez Affichage > Barres d'outils > Standard.

La barre d'outils de codage Affichée en mode Code uniquement. Regroupe des boutons couvrant la plupart des

opérations de codage standard.

La barre d'outils de rendu de style Masquée par défaut. Composée de boutons qui vous permettent d'avoir un aperçu

de votre création dans différents types de média si vous utilisez des feuilles de style dépendantes du média. Elle contient également un bouton qui permet d'activer ou de désactiver les styles CSS (Cascading Style Sheets).

Fenêtre de document Affiche le document que vous créez et modifiez.

L'inspecteur Propriétés Permet de visualiser et de modifier diverses propriétés de l'objet ou du texte sélectionné.

Chaque objet possède des propriétés différentes. L'inspecteur Propriétés n'est pas développé par défaut dans la présentation de l'espace de travail Codeur.

Sélecteur de balises Située dans la barre d'état, dans le bas de la fenêtre de document. Affiche la hiérarchie des balises

entourant la sélection active. Cliquez sur une balise quelconque dans la hiérarchie pour la sélectionner avec son contenu.

Panneaux Permet de surveiller et de modifier votre travail. Citons par exemple le panneau Insertion, le panneau Styles

CSS et le panneau Fichiers. Pour développer un panneau, double-cliquez sur son onglet.

Panneau Insertion Contient des boutons permettant d'insérer divers types d'objets, tels que des images, tableaux et

éléments multimédias dans un document. Chaque objet est une portion de code HTML vous permettant de définir différents attributs lors de son insertion. Vous pouvez, par exemple, insérer un tableau en cliquant sur le bouton Tableau du panneau Insertion. Si vous le préférez, vous pouvez insérer les objets à partir du menu Insertion.

Le panneau Fichiers Permet de gérer 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'accéder à tous les fichiers situés sur votre disque local, tout comme l'Explorateur Windows (Windows) ou le Finder (Macintosh).

Voir aussi

« Utilisation de la fenêtre de document » à la page 19

« Utilisation de barres d'outils, d'inspecteurs et de menus contextuels » à la page 23

« Gestion des fenêtres et des panneaux » à la page 25

Présentation de la fenêtre de document

La fenêtre de document affiche le document actif. Vous pouvez choisir parmi les modes d'affichage suivants :

Mode Création Un environnement de création pour la mise en forme visuelle des pages, l'édition visuelle et le

développement rapide d'applications. Dans ce mode, Dreamweaver affiche une représentation visuelle entièrement modifiable du document, similaire à la représentation de la page sur un navigateur.

Mode Code Environnement de codage manuel pour rédiger et modifier du code HTML, JavaScript et de langage de

serveur, tel que le langage PHP ou CFML (ColdFusion Markup Language), ou tout autre type de code.

Mode Code fractionné Version fractionnée du mode Code, qui permet de travailler dans différentes sections du

document en même temps.

Modes Code et Création Permettent d'obtenir l'affichage Code et l'affichage Création du document dans une même

fenêtre.

UTILISATION DE DREAMWEAVER CS4

Espace de travail

Mode En direct Tout comme le mode Création, le mode Affichage en direct fournit une représentation plus réaliste 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 exécuter la page. Il peut changer de manière dynamique lorsque vous interagissez avec la page en mode Affichage en direct. Le mode Code en direct n'est pas modifiable.

Lorsqu'une fenêtre de document est agrandie (mode d'affichage par défaut), des onglets s'affichent en haut de la fenêtre de document indiquant les noms de fichier de tous les documents ouverts. Dreamweaver affiche un astérisque après le nom du fichier si vous avez apporté des modifications que vous n'avez pas encore enregistrées.

Pour passer à un autre document, cliquez sur son onglet.

Dreamweaver affiche également la barre d'outils Fichiers associés en dessous de l'onglet du document (ou sous la barre de titre du document si vous avez affiché les documents dans des fenêtres séparées). Les documents associés sont des fichiers, par exemple CSS ou JavaScript, qui sont associés au fichier actuel. Pour ouvrir l'un de ces fichiers associés dans la fenêtre de document, cliquez sur son nom dans la barre d'outils Fichiers associés.

Voir aussi

« Utilisation de la fenêtre de document » à la page 19

« A propos de l'affichage en direct » à la page 309

« Ouverture des fichiers associés » à la page 78

« Affichage de données dynamiques en mode Création » à la page 614

« Informations générales sur le codage dans Dreamweaver » à la page 314

Présentation de la barre d'outils de document

La barre d'outils Document contient des boutons qui permettent de basculer rapidement entre différents 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 transférer d'un site local vers un site distant. L'illustration ci-dessous représente la barre d'outil Document développée.

A. Afficher le mode Code B. Afficher les modes Code et Création C. Afficher le mode Création D. Mode En direct E. Mode Code en direct F. Titre du document G. Gestion des fichiers H. Aperçu/Débogage dans le navigateur I. Actualiser mode Création J. Afficher les options K. Assistances visuelles L. Valider le marqueur M. Vérification de la compatibilité avec les navigateurs

Les options suivantes s'affichent dans la barre d'outils de document :

Afficher le mode Code Affiche uniquement le mode Code dans la fenêtre de document.

Afficher les modes Code et Création Fractionne la fenêtre de document afin d'afficher le mode Code et le mode

Création. Dans ce cas, l'option Mode Création en haut est activée dans le menu Options d'affichage.

Afficher le mode Création Affiche uniquement le mode Création dans la fenêtre de document.

Remarque : Si vous utilisez certaines types de fichiers, tels que XML, JavaScript, CSS ou d'autres types en mode code, les fichiers ne sont pas visibles en mode Création, et les boutons Création et Fractionner sont grisés.

UTILISATION DE DREAMWEAVER CS4

Espace de travail

Mode En direct Affiche une vue du document non modifiable, interactive, basée sur un navigateur.

Mode Code en direct Affiche le code tel qu'il est utilisé par le navigateur pour exécuter 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 possède déjà un titre, celui-ci s'affiche dans ce champ.

Gestion des fichiers Affiche le menu Gestion des fichiers.

Aperçu/Débogage dans le navigateur Permet de prévisualiser ou de déboguer votre document dans un navigateur.

Sélectionnez un navigateur dans le menu.

Actualiser mode Création Actualise le mode Création du document après avoir apporté des modifications dans le

mode Code. Les modifications apportées dans le mode Code n'apparaissent pas automatiquement dans le mode Création. Vous devez exécuter tout d'abord certaines opérations, comme enregistrer le fichier ou utiliser ce bouton.

Remarque : L'actualisation met également à jour les fonctionnalités de code qui dépendent de DOM (Document Object Model), comme la possibilité de sélectionner les balises d'ouverture ou de fermeture d'un bloc de code.

Afficher les options Permet de définir les options d'affichage des modes Code et Création, notamment le mode devant

s'afficher au-dessus de l'autre. Les options du menu s'appliquent à l'affichage actuel : Mode Création, mode Code ou les deux.

Assistances visuelles Permet d'utiliser différents supports visuels en vue de la conception de vos pages.

Valider le marqueur Permet de valider le document actif ou la balise sélectionnée.

Vérification de la compatibilité avec les navigateurs Permet de vérifier si votre code CSS est compatible avec

différents navigateurs.

Voir aussi

« Affichage des barres d'outils » à la page 23

« Prévisualisation des pages en mode Affichage en direct » à la page 309

« Définition des préférences de codage » à la page 321

« Affichage et modification de contenu d'en-tête » à la page 356

« Utilisation d'assistances visuelles pour la mise en forme » à la page 189

Présentation de la barre d'outils standard

La barre d'outils Standard contient des boutons correspondant aux opérations courantes des menus Fichier et Edition : Nouveau, Ouvrir, Parcourir dans Bridge, Enregistrer, Enregistrer tout, Imprimer le code, Couper, Copier, Coller, Annuler et Répéter. Utilisez ces boutons comme vous utiliseriez les commandes de menu équivalentes.

Voir aussi

« Affichage des barres d'outils » à la page 23

« Création et ouverture de documents » à la page 69

Présentation de la barre d'état

La barre d'état, située dans le bas de la fenêtre de document, fournit des informations supplémentaires sur le document en cours de création.

UTILISATION DE DREAMWEAVER CS4

A. Sélecteur de balises B. Outil Sélectionner C. Outil Main D. Outil Zoom E. Définir le facteur de zoom F. Menu contextuel Taille de fenêtre G. Taille du document et estimation du temps de téléchargement H. Indicateur de codage

Sélecteur de balises Affiche la hiérarchie des balises entourant la sélection active. Cliquez sur une balise quelconque

dans la hiérarchie pour la sélectionner avec son contenu. Cliquez sur document. Pour définir les attributs

class ou id d'une balise dans le sélecteur de balises, cliquez avec le bouton droit

<body> pour sélectionner tout le corps du

Espace de travail

de la souris (Windows) ou en maintenant la touche Option enfoncée (Macintosh) sur la balise et choisissez une classe ou un ID dans le menu contextuel.

Outil Sélectionner Active et désactive l'outil Main.

Outil Main Permet de cliquer sur le document et de le glisser jusque dans la fenêtre de document.

Outil Zoom et menu Définir le facteur de zoom Permettent de définir un taux d'agrandissement pour votre document.

Menu contextuel Taille de fenêtre Non disponible en mode Code. Permet de redimensionner la fenêtre du document

selon des dimensions prédéfinies ou personnalisées.

Taille du document et temps de téléchargement Fournit une estimation de la taille du document et du temps de

téléchargement de la page, ainsi que la liste de tous les fichiers dépendants, tels que les images et autres fichiers de données.

Indicateur de codage Affiche le codage du texte du document actuel.

Voir aussi

« Définition de la taille des fenêtres et de la vitesse de connexion » à la page 22

« Zoom avant et arrière » à la page 234

« Redimensionnement de la fenêtre de document » à la page 21

« Définition des préférences de durée et de taille des téléchargements » à la page 236

UTILISATION DE DREAMWEAVER CS4

Espace de travail

Présentation de la barre d'outils de codage

La barre d'outils de codage est composée de boutons qui vous permettent d'effectuer de nombreuses opérations de codage standard (réduction et agrandissement des sélections de code, mise en évidence de code non valide, application et suppression de commentaires, mise en retrait de code, insertion de fragments de code récemment utilisés, etc.) La barre d'outils Codage s'affiche à la verticale sur la gauche de la fenêtre de document. Elle n'est visible que lorsque le mode Code est affiché.

Vous ne pouvez pas détacher ni déplacer 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 supplémentaires (Retour automatique à la ligne, Caractères cachés et Retrait auto) ou pour masquer des boutons que vous ne souhaitez pas utiliser. Néanmoins, vous devez pour cela modifier le fichier XML qui génère la barre d'outils. Pour plus d'informations, voir Extension de Dreamweaver.

Voir aussi

« Affichage des barres d'outils » à la page 23

« Insertion de code avec la barre d'outils de codage » à la page 329

Présentation de la barre d'outils Rendu de style

La barre d'outils de rendu de style (masquée par défaut) est composée de boutons qui vous permettent d'avoir un aperçu de votre création dans différents types de média si vous utilisez des feuilles de style dépendantes du média. Elle contient également un bouton qui permet d'activer ou de désactiver les styles CSS. Pour afficher la barre d'outils standard, choisissez Affichage > Barres d'outils > Rendu de style.

UTILISATION DE DREAMWEAVER CS4

Espace de travail

Cette barre d'outil n'est fonctionnelle que si vos documents appliquent des feuilles de styles dépendantes du média. Par exemple, votre feuille de style peut comporter une règle relative au corps du texte pour l'impression et une autre pour l'affichage sur des téléphones portables. Pour plus d'informations sur la création de feuilles de style dépendantes du média, consultez le site Web du World Wide Web Consortium à l'adresse www.w3.org/TR/CSS21/media.html.

Par défaut, Dreamweaver affiche votre mise en forme pour le type de média écran (qui indique comment une page apparaît sur un écran d'ordinateur). Vous pouvez afficher les rendus de type de média suivants en cliquant sur les boutons respectifs dans la barre d'outils de rendu de style.

Rendu pour le type de support Ecran Indique comment la page apparaît sur un écran d'ordinateur.

Rendu pour le type de support Impression Indique comment la page apparaît sur une feuille de papier imprimée.

Rendu pour le type de support Téléphone mobile Indique comment la page apparaît sur un appareil portatif comme

un téléphone mobile et un BlackBerry.

Rendu pour le type de support Projection Indique comment la page apparaît sur un projecteur.

Rendu pour le type de support TTY Indique comment la page apparaît sur un appareil de type télétype.

Rendu pour le type de support TV Indique comment la page apparaît sur un téléviseur.

Intervertir l'affichage des Styles CSS Permet d'activer ou de désactiver les styles CSS. Ce bouton fonctionne

indépendamment des autres boutons de média.

Feuilles de style à la création Permet de définir une feuille de style à la création.

Pour accéder à un didacticiel relatif à la création de feuilles de style pour l'impression et les appareils portatifs, consultez le site Web de Adobe à l'adresse www.adobe.com/go/vid0156_fr.

Voir aussi

« Affichage des barres d'outils » à la page 23

Présentation de l'inspecteur Propriétés

L'inspecteur Propriétés permet d'examiner et de modifier les propriétés les plus fréquentes de l'élément de la page sélectionnée, tel que le texte ou un objet inséré. Le contenu de l'inspecteur Propriétés varie en fonction de l'élément sélectionné. Par exemple, si vous sélectionnez une image de la page, l'inspecteur Propriétés se modifie pour montrer les propriétés de l'image (telles que le chemin d'accès au fichier, la largeur et la hauteur de l'image, la bordure autour de l'image, s'il y a lieu, et ainsi de suite).

L'inspecteur Propriétés se trouve par défaut sur le bord inférieur de l'espace de travail. Vous pouvez toutefois le détacher et en faire un panneau flottant dans l'espace de travail.

Voir aussi

« Ancrage et annulation d’ancrage de panneaux » à la page 26

« Utilisation de l'inspecteur Propriétés » à la page 24

UTILISATION DE DREAMWEAVER CS4

Espace de travail

Présentation du panneau Insertion

Les boutons qui composent le panneau Insertion permettent de créer et d'insérer des objets, tels que des tableaux, des images et des liens. Ces boutons sont organisés en plusieurs catégories que vous pouvez afficher en alternance en choisissant la catégorie désirée dans le menu Catégorie. D'autres catégories s'affichent lorsque le document sélectionné contient du code serveur, tel que des documents ASP ou CFML.

Certaines catégories disposent de boutons ouvrant des menus contextuels. Lorsque vous sélectionnez une option dans l'un d'eux, l'action associée est attribuée par défaut au bouton. Par exemple, si vous sélectionnez le menu contextuel du bouton Image, puis Espace réservé pour l'image, la prochaine fois que vous cliquerez sur le bouton Image, Dreamweaver insérera un espace réservé pour l'image. Lorsque vous sélectionnez une nouvelle option dans l'un de ces menus, l'action attribuée par défaut au bouton change.

Le panneau Insertion est organisé en différentes catégories, comme suit :

Catégorie Commun Permet de créer et d'insérer les objets les plus couramment utilisés, comme les images et les

tableaux.

Catégorie Mise en forme Permet d'insérer des tableaux, des éléments de tableau, des balises div, des cadres et des

widgets Spry. Vous pouvez choisir deux modes pour les tableaux : Standard (par défaut) et Développé.

Catégorie Formulaires Contient des boutons permettant de créer des formulaires et d'insérer des éléments de

formulaire, dont des widgets de validation Spry.

Catégorie Données Permet d'insérer des éléments de données Spry et d'autres éléments dynamiques, tels que des jeux

d'enregistrements, des régions répétées et des formulaires d'insertion et de mise à jour d'enregistrements.

Catégorie Spry Contient des boutons permettant de créer des pages Spry, avec des objets de données Spry et des

widgets.

La catégorie InContext Editing Contient des boutons destinés à la création de pages InContext Editing, dont des

boutons pour les régions modifiables, pour les régions répétées et pour la gestion des classes CSS.

Catégorie Texte Permet d'insérer diverses balises de mise en forme de texte et de liste, telles que b, em, p, h1 et ul.

UTILISATION DE DREAMWEAVER CS4

Espace de travail

Catégorie Favoris Permet de regrouper et d'organiser, dans un espace commun, les boutons du panneau Insertion que

vous utilisez le plus fréquemment.

Catégories de code serveur Disponibles uniquement pour les pages utilisant un langage serveur spécifique, comme

ASP, CFML Basic, CFML Flow, CFML Advanced, et PHP. Ces catégories proposent des objets de type code serveur que vous pouvez insérer en mode Code.

Contrairement aux autres panneaux de Dreamweaver, vous pouvez retirer le panneau Insertion de son emplacement d'ancrage par défaut et le placer à l'horizontale, au-dessus de la fenêtre de document. Dans ce cas, ce panneau se transforme en barre d'outils, même 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 223

« Création de pages Spry visuellement » à la page 449

Présentation du panneau Fichiers

Vous pouvez utiliser les panneaux Fichiers pour afficher et exploiter les fichiers dans votre site Dreamweaver.

Lorsque vous affichez des sites, des fichiers ou des dossiers dans le panneau Fichiers, vous pouvez modifier la taille de la zone d'affichage. Vous pouvez également agrandir ou réduire le panneau Fichiers. Dans sa forme réduite, le panneau Fichiers affiche le contenu du site local, du site distant, du serveur d'évaluation ou du référentiel SVN sous la forme d'une liste de fichiers. Dans sa forme développée, il affiche d'une part le site local et d'autre part le site distant, le serveur d'évaluation ou le référentiel 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 défaut dans le panneau réduit.

Voir aussi

« Utilisation des fichiers depuis le panneau Fichiers » à la page 84

UTILISATION DE DREAMWEAVER CS4

Espace de travail

Présentation du panneau Styles CSS

Il vous permet de suivre les règles CSS et les propriétés qui affectent un élément de page sélectionné (mode Current (ou Sélection)), ou les règles et les propriétés qui affectent l'ensemble d'un document (mode All (ou Tout)). Un bouton bascule placé sur la partie supérieure du panneau Styles CSS vous permet de passer d'un mode à l'autre. Le panneau Styles CSS vous permet de modifier les propriétés CSS dans les deux modes.

Vous pouvez redimensionner n'importe quel volet en faisant glisser les cadres entre les volets.

En mode Current (Sélection), le panneau Styles CSS présente trois volets : un volet Summary for Selection (Récapitulatif de la sélection) qui présente les propriétés CSS de la sélection en cours dans le document; un volet Rules (Règles) qui précise l'emplacement des propriétés sélectionnées (ou une cascade de règles pour la balise sélectionnée, selon votre sélection); et un volet Propriétés qui vous permet de modifier les propriétés CSS de la règle définissant la sélection.

En mode All (Tout), le panneau Styles CSS présente deux volets : un volet All Rules (Toutes les règles) (en haut) et un volet Propriétés (en bas). Le volet Toutes les règles présente la liste des règles définies dans le document actif, ainsi que l'ensemble des règles définies dans les feuilles de styles jointes à ce document. Le volet Propriétés permet de modifier les propriétés CSS de toute règle sélectionnée dans le volet Toutes les règles.

Toute modification apportée dans le volet Propriétés s'applique immédiatement, ce qui vous permet d'avoir un aperçu direct de votre travail.

Voir aussi

« Création et gestion de CSS » à la page 144

UTILISATION DE DREAMWEAVER CS4

Espace de travail

Présentation des guides visuels

Dreamweaver met à votre disposition plusieurs types de guides visuels pour vous aider à concevoir vos documents et à prévoir approximativement l'aspect qu'ils auront dans un navigateur. Vous pouvez effectuer les opérations suivantes :

• Adapter instantanément la taille de la fenêtre de document à un format d'affichage donné, afin de contrôler la

disposition des éléments sur la page

• Utiliser un tracé d'image en arrière-plan de la page, de manière à pouvoir reproduire plus aisément une mise en

forme créée dans une application graphique telle que Adobe® Photoshop® ou Adobe® Fireworks®.

• Utiliser des règles et des guides comme repère visuel pour le positionnement et le redimensionnement précis des

éléments de page

• Utilisez la grille afin d'effectuer un positionnement et un redimensionnement précis des éléments à positionnement

absolu (PA).

Si la fonction d'alignement automatique est activée, les éléments PA s'alignent automatiquement sur le croisillon de grille le plus proche lorsqu'ils sont déplacés ou redimensionnés (d'autres objets, par exemple les images et les paragraphes, ne sont pas aimantés par la grille). L'alignement fonctionne même si la grille n'est pas visible.

Voir aussi

« Utilisation d'assistances visuelles pour la mise en forme » à la page 189

Utilisateurs de GoLive

Si vous utilisez GoLive jusqu'ici et que vous souhaitez passer à l'utilisation de Dreamweaver, vous pouvez consultez une présentation en ligne de l'espace de travail et du déroulement 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 fenêtre de document

Basculement d'un mode à un autre dans la fenêtre de document

Vous pouvez afficher un document dans la fenêtre de document en mode Code, en mode Code fractionné, en mode Création, en modes Code et Création (mode fractionné) et en mode Affichage en direct. Vous pouvez également afficher le mode Code fractionné ou les modes Code et Création en les séparant à l'horizontale ou à la verticale. Le mode d'affichage à l'horizontale est le mode par défaut.

Activation du mode Code

❖ Effectuez l'une des opérations suivantes :

• Choisissez Affichage > Code.

• Dans la barre d'outils du document, cliquez sur le bouton Afficher le mode Code .

UTILISATION DE DREAMWEAVER CS4

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 même temps.

❖ Choisissez Affichage > Fractionner le code.

Remarque : Si vous redimensionnez la fenêtre de document ou la fenêtre de l'application, ou si vous modifiez la disposition de votre espace de travail, Dreamweaver préserve le rapport de fractionnement, de façon à ce que les deux modes soient toujours visibles.

Activation du mode Création

❖ Effectuez l'une des opérations suivantes :

• Choisissez Affichage > Création.

• Dans la barre d'outils du document, cliquez sur le bouton Afficher le mode Création .

Affichage à la fois en modes Code et Création

❖ Effectuez l'une des opérations suivantes :

• Choisissez Affichage > Code et création.

• Dans la barre d'outils du document, cliquez sur le bouton Afficher les modes Code et Création .

Par défaut, le mode Code s'affiche en haut de la fenêtre de document et le mode Création en bas. Pour afficher le mode Création en haut de la fenêtre, choisissez Affichage > Mode Création en haut.

Basculement entre les modes Code et Création

❖ Appuyez sur Ctrl + guillemet simple d'ouverture (').

Si les deux modes sont affichés simultanément dans la fenêtre 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 Création (mode fractionné). Elle est désactivée pour le mode Code et le mode Création.

1 Veillez à bien être en mode Code fractionné (Affichage > Code fractionné) ou en modes Code et Création

(Affichage > Code et Création).

2 Choisissez Affichage > Fractionner à la verticale.

Si vous êtes en modes Code et Création, vous pouvez afficher le mode Création sur la gauche (Affichage > Mode Création à gauche).

UTILISATION DE DREAMWEAVER CS4

Voir aussi

« Présentation de la fenêtre de document » à la page 10

« Prévisualisation des pages en mode Affichage en direct » à la page 309

Affichage en cascade ou en mosaïque des fenêtres de document

Si plusieurs documents sont ouverts à la fois, vous pouvez les afficher en cascade ou en mosaïque.

Voir aussi

« Gestion des fenêtres et des panneaux » à la page 25

« Affichage de documents à onglets (Dreamweaver sur Macintosh) » à la page 31

Affichage en cascade des fenêtres de document

❖ Choisissez Fenêtre > Cascade.

Affichage en mosaïque des fenêtres de document

• (Windows) Sélectionnez Fenêtre > Mosaïque horizontale ou Fenêtre > Mosaïque verticale.

• (Macintosh) Sélectionnez Fenêtre > Mosaïque.

Espace de travail

Redimensionnement de la fenêtre de document

La barre d'état affiche les dimensions de la fenêtre de document sélectionnée (en pixels). Pour qu'une page s'affiche de façon optimale à une taille spécifique, vous pouvez régler la fenêtre de document sur l'une des tailles prédéterminées, modifier ces tailles prédéterminées ou en créer de nouvelles.

Redimensionnement de la fenêtre de document selon une taille prédéterminée:

❖ Choisissez l'une des tailles affichées dans le menu contextuel Taille de fenêtre qui se trouve dans la barre d'état de

la fenêtre de document.

Remarque : (Windows uniquement) Les documents dans la fenêtre de document sont agrandis par défaut ; il est impossible de les redimensionner lorsqu'ils sont agrandis. Pour annuler l'affichage du document en mode agrandi, cliquez sur l'icône dans le coin supérieur droit du document.

La taille de la fenêtre correspond aux dimensions internes de la fenêtre de navigateur, bordures exclues ; la résolution de l'écran est indiquée entre parenthèses. Optez, par exemple, pour le format « 536 x 196 (640 x 480, valeur par défaut) » si les visiteurs de votre site utilisent Microsoft Internet Explorer ou Netscape Navigator par défaut sur un moniteur de 640 x 480.

UTILISATION DE DREAMWEAVER CS4

Espace de travail

Pour un redimensionnement moins précis des fenêtres, utilisez les méthodes standard de votre système d'exploitation, par exemple, en faisant glisser le coin inférieur droit d'une fenêtre.

Modification des valeurs figurant dans le menu contextuel Taille de fenêtre:

1 Cliquez sur Modifier les tailles dans le menu contextuel Taille de fenêtre.

2 Cliquez sur une valeur de largeur ou de hauteur dans la liste Taille de la fenêtre, puis entrez une nouvelle valeur.

Pour que la fenêtre de document adopte uniquement une largeur spécifique sans que sa hauteur change, sélectionnez la valeur de hauteur et supprimez-la.

3 Cliquez sur la zone Description pour saisir un texte décrivant la taille spécifique.

Ajout d'un nouveau format d'affichage au menu contextuel Taille de fenêtre:

1 Cliquez sur Modifier les tailles dans le menu contextuel Taille de fenêtre.

2 Cliquez dans l'espace vierge qui apparaît sous la dernière valeur de la colonne Largeur.

3 Indiquez les valeurs souhaitées pour Largeur et Hauteur.

Pour définir soit la largeur, soit la hauteur, laissez l'un des champs vide.

4 Cliquez dans le champ Description pour saisir un texte décrivant la taille ajoutée.

Par exemple, vous pouvez entrer SVGA ou PC standard à côté de l'entrée correspondant à un moniteur d'une résolution de 800 x 600 pixels, et Mac 17 à côté de l'entrée correspondant à un moniteur d'une résolution de 832 x 624 pixels. Diverses résolutions peuvent être réglées sur la plupart des moniteurs.

Définition de la taille des fenêtres et de la vitesse de connexion

1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).

2 Sélectionnez la catégorie Barre d'état dans la liste de gauche.

3 Parmi les options suivantes, définissez celles de votre choix :

Taille de la fenêtre Permet de personnaliser les tailles de fenêtre qui s'affichent dans le menu contextuel de la barre

d'état.

Vitesse de connexion Détermine la vitesse de connexion (exprimée en kilobits par seconde) utilisée pour calculer le

temps de téléchargement. Le temps de téléchargement de la page est indiqué dans la barre d'état. Celui des images est affiché dans l'inspecteur Propriétés lorsqu'une image est sélectionnée dans la fenêtre de document.

Voir aussi

« Présentation de la barre d'état » à la page 12

« Redimensionnement de la fenêtre de document » à la page 21

Rapports dans Dreamweaver

Dans Dreamweaver, vous pouvez exécuter des rapports afin de rechercher ou de tester des contenus ou encore de corriger des erreurs. Vous pouvez générer les types de rapports suivants :

Rechercher Permet de rechercher des balises, des attributs ou une portion de texte spécifique dans les balises.

Référence Permet de rechercher des informations de référence.

Validation Permet de rechercher les erreurs de code ou de syntaxe.

UTILISATION DE DREAMWEAVER CS4

Espace de travail

Navigateurs compatibles Permet de tester le code HTML de vos documents afin de déterminer s'il contient des balises

ou des attributs non pris en charge par les navigateurs cibles.

Vérificateur de lien Permet de rechercher et de corriger les liens brisés, externes et orphelins.

Rapports du site Permet d'améliorer le déroulement du travail et de tester les attributs HTML dans votre site. Les

rapports sur le déroulement du travail incluent les fonctions Extrait par, Modifiés récemment et Design Notes ; les rapports HTML incluent les balises de polices imbriquées combinables, l'accessibilité, les textes secondaires manquants, les balises imbriquées redondantes, les balises vides amovibles et les documents sans nom.

Journal FTP Permet d'avoir une vue d'ensemble des transferts de fichiers en FTP.

Débogage du serveur Permet de consulter des informations afin de déboguer une application Adobe® ColdFusion®.

Voir aussi

« Recherche de balises, d'attributs ou de chaînes de texte dans le code » à la page 340

« Utilisation des documents de référence sur les langages » à la page 341

« Test de votre site » à la page 122

« Validation des balises » à la page 346

« Vérification de la compatibilité du navigateur » à la page 346

« Recherche de liens rompus, externes et orphelins » à la page 306

« Placement de fichiers sur un serveur distant » à la page 93

« Acquisition de fichiers depuis un serveur distant » à la page 91

« Utilisation du débogueur ColdFusion (Windows uniquement) » à la page 348

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

Affichage des barres d'outils

Utilisez les barres d'outils document et standard pour effectuer des opérations de modification standard liées au document ; utilisez la barre d'outils codage pour insérer du code rapidement ; et utilisez la barre d'outils rendu de style pour afficher votre page comme elle apparaîtrait dans différents types de média. Vous pouvez afficher ou masquer ces barres selon qu'elles vous sont utiles ou non.

• Sélectionnez Affichage > Barres d'outils, puis sélectionnez la barre d'outils voulue.

• Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh)

sur l'une des barres d'outils et sélectionnez la barre d'outils dans le menu contextuel.

Remarque : Pour afficher la barre d'outils de codage dans l'Inspecteur de code (Fenêtre > Inspecteur de code), vous devez la sélectionner dans le menu déroulant des options d'affichage situé en haut de l'inspecteur.

Voir aussi

« Présentation de la barre d'outils de document » à la page 11

« Présentation de la barre d'outils standard » à la page 12

UTILISATION DE DREAMWEAVER CS4

Espace de travail

« Présentation de la barre d'outils de codage » à la page 14

« Présentation de la barre d'outils Rendu de style » à la page 14

Utilisation de l'inspecteur Propriétés

Pour accéder à l'aide relative à un inspecteur Propriétés spécifique, cliquez sur le bouton d'aide dans son coin supérieur droit, ou choisissez Aide dans son menu Options.

Remarque : L'inspecteur de balises permet d'afficher et de modifier les attributs associés aux propriétés d'une balise.

Voir aussi

« Présentation de l'inspecteur Propriétés » à la page 15

« Définition des propriétés de texte dans l'inspecteur Propriétés » à la page 246

« Ancrage et annulation d’ancrage de panneaux » à la page 26

« Modification d'attributs dans l'inspecteur de balises » à la page 350

Affichage ou masquage de l'inspecteur Propriétés

❖ Choisissez Fenêtre > Propriétés.

Développement ou réduction de l'inspecteur Propriétés

❖ Cliquez sur la flèche d'agrandissement dans l'angle inférieur droit de l'inspecteur Propriétés.

Affichage et modification des propriétés d'un élément de page

1 Sélectionnez l'élément de la page dans la fenêtre de document.

Si nécessaire, développez l'inspecteur Propriétés afin que toutes les propriétés de l'élément sélectionné puissent apparaître.

2 Modifiez les propriétés de votre choix dans l'inspecteur Propriétés.

Remarque : Pour obtenir des informations sur des propriétés particulières, sélectionnez un élément dans la fenêtre de document, puis cliquez sur l'icône Aide (?) dans le coin supérieur droit de l'inspecteur Propriétés.

3 Si les changements ne s'appliquent pas immédiatement dans la fenêtre de document, appliquez-les d'une des façons

suivantes :

• Cliquez hors des champs de texte de modification des propriétés.

• Appuyez sur la touche Entrée (Windows) ou Retour (Macintosh).

• Appuyez sur la touche de tabulation pour passer à une autre propriété.

+ 714 hidden pages