ADOBE Dreamweaver CS5 Instruction Manual [fr]

Utilisation de

ADOBE® DREAMWEAVER® CS5 & CS5.5

Mentions légales

Vous trouverez des informations juridiques à l'adresse http://help.adobe.com/fr_FR/legalnotices/index.html.

Dernière mise à jour le 4/5/2011

Sommaire

Chapitre 1 : Nouveautés

Nouveautés (CS5.5) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Nouveautés (CS5) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Chapitre 2 : Espace de travail

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

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

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

Personnalisation de l'espace de travail de CS5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

Raccourcis clavier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

Extensions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

Chapitre 3 : Utilisation de sites Dreamweaver

Configuration d'un site Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

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

iii

Chapitre 4 : Création et gestion de fichiers

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

Gestion des fichiers et des dossiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77

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

Archivage et extraction de fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91

Synchronisation de fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100

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

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

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

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

Test de votre site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112

Chapitre 5 : Gestion des actifs et des bibliothèques

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

Utilisation des actifs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117

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

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

Chapitre 6 : Création de pages avec CSS

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

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

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

Utilisation des balises div . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164

Chapitre 7 : Mise en forme des pages avec HTML

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

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

Utilisation de cadres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200

Dernière mise à jour le 4/5/2011

UTILISATION DE DREAMWEAVER

Sommaire

Chapitre 8 : Ajout de contenu dans les pages

Utilisation des pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213

Ajout et formatage de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226

Ajout et modification d'images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243

Incorporation de vidéos aux pages Web (HTML5) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256

Insertion de fichiers SWF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256

Insertion de fichiers FLV . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259

Ajout de widgets Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265

Ajout de séquences audio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265

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

Automatisation des tâches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276

Chapitre 9 : Liens et navigation

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

Etablissement de liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284

Menus de reroutage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292

Barres de navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293

Cartes graphiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294

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

Chapitre 10 : Prévisualisation des pages

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

Prévisualisation des pages dans les navigateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302

Prévisualisation des pages dans les périphériques mobiles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303

Chapitre 11 : Utilisation de code de page

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

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

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

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

Réduction du code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334

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

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

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

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

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

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

Chapitre 12 : Ajout de comportements JavaScript

Utilisation des comportements JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360

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

Chapitre 13 : Utilisation d'autres applications

Intégration entre les applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375

Utilisation de Fireworks et Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 376

Utilisation de Photoshop et Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382

Utilisation de Flash et Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392

Utilisation d'Adobe Bridge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 393

Dernière mise à jour le 4/5/2011

UTILISATION DE DREAMWEAVER

Sommaire

Utilisation de Device Central . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395

Utilisation de ConnectNow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 396

Extension AIR pour Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397

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

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

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

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

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

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

Utilisation des régions facultatives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 418

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

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

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

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

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

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

Syntaxe des modèles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 435

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

Chapitre 15 : Création de pages Spry visuellement

A propos du cadre applicatif Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 438

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

Utilisation du widget Accordéon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 440

Utilisation du widget Barre de menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 443

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

Utilisation du widget Panneau à onglet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 451

Utilisation du widget Info-bulle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 454

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

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

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

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

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

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

Utilisation du widget Validation de confirmation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 478

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

Ajout d'effets Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 495

Chapitre 16 : Création de contenu pour écrans et appareils multiples

Création de requêtes multimédias (CS 5.5) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 500

Modification de l'orientation de la page (CS 5.5) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 502

Création d'applications Web pour appareils mobiles (CS5.5) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 502

Déploiement d'applications Web sous forme d'applications mobiles natives (CS 5.5) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 505

Aperçu des pages avec le panneau Aperçu sur écrans multiples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 508

Dernière mise à jour le 4/5/2011

UTILISATION DE DREAMWEAVER

Sommaire

Chapitre 17 : Utilisation des services en ligne Adobe

Services en ligne Adobe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 510

BrowserLab . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 510

Business Catalyst InContext Editing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 510

Chapitre 18 : Affichage de données XML avec XSLT

A propos de XML et de XSLT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 517

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

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

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

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

Description des applications Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 545

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

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

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

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

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

Suppression de scripts de connexion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 575

Chapitre 20 : Ajout de contenu dynamique aux pages Web

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

Conception de pages dynamiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 579

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

Panneaux de contenu dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 586

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

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

Modification d'un contenu dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 607

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

Affichage des données dynamiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 618

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

Chapitre 21 : Création visuelle d'applications

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

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

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

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

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

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

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

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

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

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

Utilisation de composants ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 676

Dernière mise à jour le 4/5/2011

UTILISATION DE DREAMWEAVER

Sommaire

Chapitre 22 : Création de formulaires

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

Création de formulaires Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 687

Création de formulaires ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 702

Chapitre 23 : Accessibilité

Dreamweaver et l'accessibilité . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 716

vii

Dernière mise à jour le 4/5/2011

Chapitre 1 : Nouveautés

Nouveautés (CS5.5)

Prise en charge de l'affichage sur écrans multiples Prévisualisez vos conceptions dans des résolutions d'écran

standard, ou utilisez des requêtes multimédias pour définir la résolution. Lorsque vous testez pour des appareils qui modifient l'orientation de la page en fonction de la façon dont l'appareil est tenu, utilisez les options paysage et portrait au cours de la prévisualisation. Pour plus d'informations, voir « Création de contenu pour écrans et appareils

multiples » à la page 500.

Prise en charge des requêtes multimédias Permet d'utiliser des requêtes multimédias pour personnaliser l'apparence

de votre site pour différentes résolutions d'écran. Pour plus d'informations, voir « Création de requêtes multimédias

(CS 5.5) » à la page 500.

Création d'applications Web qui fonctionnent sur des appareils mobiles Permet de concevoir rapidement une

application Web qui fonctionne sur la plupart des appareils mobiles à l'aide du widget jQuery Mobile. Pour plus d'informations, reportez-vous à la section « Création d'applications Web pour appareils mobiles (CS5.5) » à la page 502.

Assemblage de vos applications Web pour appareils Android, iPhone et iPad Permet d'assembler vos applications

Web dans Dreamweaver et de les déployer sur des appareils tournant sous Android™ et iOS. Pour plus d'informations, consultez la section « Déploiement d'applications Web sous forme d'applications mobiles natives (CS 5.5) » à la page 505.

Prise en charge de HTML5, CSS3 et jQuery Dreamweaver prend en charge les conseils de code pour HTML5, CSS3, et

jQuery.

Les mises en forme de départ sont également disponibles pour la création de nouvelles pages HTML5. Dreamweaver prend en charge la fonctionnalité HTML5 d'incorporation de vidéos dans les pages HTML. Pour plus d'informations, voir « Incorporation de vidéos aux pages Web (HTML5) » à la page 256.

Le panneau CSS a été amélioré de façon à prendre en charge les propriétés CSS3 les plus fréquemment utilisées. Pour plus d'informations, voir « Conseils de code » à la page 316 et « Améliorations à la prise en charge de CSS3 dans le

panneau Styles CSS (CS 5.5) » à la page 137.

Prise en charge de FTPS Permet de transférer les données à l'aide FTPS. FTPS (FTP sur SSL) fournit une prise en

charge du chiffrement et de l'authentification, au contraire de SFTP qui ne en charge que le chiffrement. Pour plus d'informations, voir « Définition des options pour les connexions FTPS (CS 5.5) » à la page 44.

Prise en charge du Validateur W3C Permet de créer des pages HTML et XHTML normalisées à l'aide du validateur

W3C dans Dreamweaver. Pour plus d'informations, voir « Validation de documents à l'aide du validateur W3C (CS

5.5) » à la page 338.

Nouveautés (CS5)

Adobe BrowserLab

Dreamweaver CS5 s'intègre à Adobe BrowserLab, l'un des nouveaux services en ligne de CS Live, qui propose une solution précise et rapide de test de compatibilité inter-navigateurs. BrowserLab permet de prévisualiser les pages Web et le contenu local à l'aide de divers outils d'affichage et de comparaison. Voir « BrowserLab » à la page 510.

Dernière mise à jour le 4/5/2011

UTILISATION DE DREAMWEAVER

Nouveautés

Intégration de Business Catalyst

Adobe Business Catalyst est une application hébergée qui remplace les outils de bureau traditionnels par une plateforme centralisée pour concepteurs Web. Cette application s'associe à Dreamweaver pour vous permettre de créer ce que vous souhaitez, de sites de base reposant sur les données à de puissantes boutiques en ligne. Voir

http://www.adobe.com/go/business_catalyst_get_extension_fr.

Améliorations apportées à CSS

Désactivation/Activation de CSS

La fonction Désactiver/Activer CSS permet de désactiver ou de réactiver directement les propriétés CSS depuis le panneau Styles CSS. La désactivation d'une propriété CSS se borne à la mettre en commentaire, sans la supprimer. Voir « Désactivation/Activation du code CSS » à la page 153.

Inspection CSS

Le mode Inspection permet d'afficher visuellement les propriétés du modèle de boîte en feuilles CSS (dont l'espacement, la bordure et la marge) en détail, sans devoir lire de code ou employer un utilitaire tiers tel que Firebug. Voir « Inspection de CSS en mode En direct » à la page 153.

Mises en forme CSS de départ

Dreamweaver CS5 comprend des mises en forme CSS de départ qui ont été mises à jour et simplifiées. Les sélecteurs descendants complexes des mises en forme CS4 ont été supprimés et remplacés par des classes simplifiées, plus compréhensibles. Voir « Création d'une page avec une mise en forme CSS » à la page 162.

Fichiers à association dynamique

La fonctionnalité Fichiers à association dynamique permet de trouver tous les fichiers et scripts externes requis pour l'assemblage de pages CMS (système de gestion du contenu) basées sur PHP, ainsi que d'afficher leur nom de fichier dans la barre d'outils Fichiers associés. Par défaut, Dreamweaver prend en charge la recherche de fichiers pour les cadres CMS Wordpress, Drupal et Joomla! . Voir « Ouverture de fichiers à association dynamique » à la page 74.

Navigation dans le mode En direct

La navigation dans le mode En direct active les liens dans l'affichage en direct, ce qui permet d'interagir avec les applications côté serveur et les données dynamiques. Cette fonctionnalité permet d'entrer une URL afin d'inspecter les pages servies à partir d'un serveur Web en direct, ainsi que de modifier les pages consultées si elles existent dans l'un de vos sites définis localement. Voir « Prévisualisation de pages dans Dreamweaver » à la page 299.

Conseils de code pour classes personnalisées PHP

Les conseils de code pour classes personnalisées PHP affichent la syntaxe appropriée pour les fonctions, objets et constantes PHP, ce qui vous aide à taper du code plus précis. Les conseils de code fonctionnent également avec vos fonctions et classes personnalisées, ainsi qu'avec les cadres tiers tels que le cadre Zend.

Dernière mise à jour le 4/5/2011

UTILISATION DE DREAMWEAVER

Nouveautés

Simplification de la configuration d'un site

La boîte de dialogue Définition du site remise à neuf (et désormais baptisée Configuration du site) facilite la configuration d'un site Dreamweaver local, de façon à vous permettre d'entamer immédiatement la création de pages Web. La catégorie Serveur distant permet de spécifier, dans la même vue, les serveurs distants et les serveurs d'évaluation. Voir « Création d'un nouveau site » à la page 40.

Conseils de code spécifiques au site

La fonctionnalité de conseils de code spécifiques au site permet de personnaliser votre environnement de codage lorsque vous utilisez des bibliothèques PHP et des cadres CMS tiers, comme WordPress, Drupal, Joomla! ou d'autres cadres. Les fichiers de thème pour les blogs et les autres fichiers et répertoires PHP personnalisés peuvent être inclus ou exclus des sources de conseils de code. Voir « Conseils de code spécifiques au site » à la page 319.

Améliorations de la prise en charge de Subversion

Dreamweaver CS5 bénéficie d'une prise en charge accrue de Subversion. Vous pouvez désormais déplacer, copier et supprimer des fichiers localement, puis synchroniser les modifications avec votre référentiel SVN distant. La nouvelle commande Rétablir permet de corriger rapidement les conflits d'arborescence ou de revenir à la version précédente d'un fichier. En outre, une nouvelle extension vous permet de préciser quelle version de Subversion vous voulez utiliser pour un projet précis. Voir « Utilisation de Subversion (svn) pour acquérir et archiver des fichiers » à la page 94.

Fonctionnalités obsolètes

Les fonctionnalités suivantes sont devenues obsolètes depuis Dreamweaver CS5 :

• Rapport de validation d'accessibilité

• Comportements de serveur ASP/JavaScript

• Vérification du comportement JavaScript du navigateur

• Connexion à un serveur FTP/RDS sans définir de site

• Contrôle du comportement JavaScript de Shockwave ou de SWF

• Créer un album photos pour le Web

• Comportement JavaScript de masquage de menu contextuel

• Gestion des classes CSS disponibles d'InContext Editing

• Insérer FlashPaper

• Insertion/suppression de Mark of the Web

• Intégration de Microsoft Visual Sourcesafe

• Barres de navigation

• Comportement JavaScript Lire le son

• Menu Afficher les événements (panneau Comportements)

• Comportement JavaScript d'affichage de menu contextuel

• Comportements JavaScript de montage

• Validation des balises

• Affichage de Live Data

Dernière mise à jour le 4/5/2011

Chapitre 2 : 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 39.)

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 77 et « Gestion des actifs et des bibliothèques » à la page 116.)

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 129 et « Mise en forme des pages avec HTML » à la page 180.)

Dernière mise à jour le 4/5/2011

UTILISATION DE DREAMWEAVER

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

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

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

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

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

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.

Dernière mise à jour le 4/5/2011

UTILISATION DE DREAMWEAVER

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. Commutation d'espace de travail E. Groupes de panneaux F. CS Live G. Sélecteur de balises H. Inspecteur Propriétés I. 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.

Dernière mise à jour le 4/5/2011

UTILISATION DE DREAMWEAVER

Espace de travail

A. Barre d'application B. Barre d'outils du document C. Commutation d'espace de travail D. Fenêtre de document E. CS Live F. Groupes de panneaux G. Sélecteur de balises H. Inspecteur Propriétés I. 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 » à la page 22

« Personnalisation de l'espace de travail de CS5 » à la page 24

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

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.

Dernière mise à jour le 4/5/2011

UTILISATION DE DREAMWEAVER

Espace de travail

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.

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 18

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

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

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.

Dernière mise à jour le 4/5/2011

UTILISATION DE DREAMWEAVER

Espace de travail

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.

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 18

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

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

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

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 Code en direct E. Vérification de la compatibilité avec les navigateurs F. Mode En direct G. Mode Inspection CSS H. Aperçu/Débogage dans le navigateur I. Assistances visuelles J. Actualiser mode Création K. Titre du document L. Gestion des fichiers

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

Afficher le mode Code Affiche uniquement le mode Code dans la 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.

Dernière mise à jour le 4/5/2011

UTILISATION DE DREAMWEAVER

Espace de travail

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.

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 22

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

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

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

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

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 22

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

Dernière mise à jour le 4/5/2011

UTILISATION DE DREAMWEAVER

Espace de travail

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.

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 d'Adobe à l'adresse www.adobe.com/go/vid0156_fr.

Voir aussi

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

Présentation de la barre d'outils Navigation de l'explorateur

La barre d'outils Navigation de l'explorateur devient active dans le mode En direct et vous montre l'adresse de la page que vous examinez dans la fenêtre de document. A partir de Dreamweaver CS5, le mode En direct se comporte comme un navigateur ordinaire. Ainsi, même si vous accédez à un site en dehors de votre site local (par exemple http://www.adobe.com), Dreamweaver charge la page dans la fenêtre de document.

A. Contrôles de navigateur B. Zone d'adresse C. Options de l'affichage en direct

Dernière mise à jour le 4/5/2011

UTILISATION DE DREAMWEAVER

Espace de travail

Par défaut, les liens ne sont pas actifs dans le mode En direct. Si les liens ne sont pas actifs, vous pouvez sélectionner le texte d'un lien dans la fenêtre de document, ou cliquer sur celui-ci, sans accéder à une page différente. Pour tester les liens en mode En direct, vous pouvez permettre un clic unique ou des clics continus, grâce aux commandes Suivre le lien et Suivre les liens de manière continue du menu Options d'affichage, à droite de la zone d'adresse.

Voir aussi

« Prévisualisation de pages dans Dreamweaver » à la page 299

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 22

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

Dernière mise à jour le 4/5/2011

UTILISATION DE DREAMWEAVER

Espace de travail

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.

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

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.

<body> pour sélectionner tout le corps du

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. Lorsque vous modifiez la taille d'affichage d'une page en mode Création ou Affichage en direct, seules les dimensions de la vue changent. La taille du document n'est pas modifiée.

Outre les formats prédéterminés et personnalisés, Dreamweaver répertorie également les tailles spécifiées dans une requête multimédia. Lorsque vous sélectionnez une taille correspondant à une requête multimédia, Dreamweaver utilise cette requête multimédia pour afficher la page. Vous pouvez également modifier l'orientation de la page pour prévisualiser la page pour les appareils mobiles sur lesquels la disposition change selon la façon dont l'appareil est tenu.

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 21

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

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

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

Dernière mise à jour le 4/5/2011

UTILISATION DE DREAMWEAVER

Espace de travail

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 25

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

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.

Dernière mise à jour le 4/5/2011

UTILISATION DE DREAMWEAVER

Espace de travail

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 formatage de texte et de liste, telles que b, em, p, h1 et ul.

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 213

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

Dernière mise à jour le 4/5/2011

UTILISATION DE DREAMWEAVER

Espace de travail

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.

(CS 5.5) Le panneau Fichiers interagit avec le serveur à intervalles réguliers afin de mettre à jour son contenu. Un message d'erreur s'affiche lorsque vous tentez d'effectuer une action dans le panneau Fichiers alors qu'il exécute une telle mise à jour automatique. Pour désactiver l'option de mise à jour automatique, ouvrez le menu Options du panneau Fichiers et désactivez l'option Mise à jour automatique du menu Affichage.

Pour mettre à jour manuellement le contenu du panneau, utilisez le bouton Actualiser dans le panneau. Toutefois, l'état d'extraction actuel des fichiers n'est mis à jour que lorsque la mise à jour automatique est activée.

Voir aussi

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

Dernière mise à jour le 4/5/2011

UTILISATION DE DREAMWEAVER

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 134

Dernière mise à jour le 4/5/2011

UTILISATION DE DREAMWEAVER

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 180

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.

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.

Dernière mise à jour le 4/5/2011

UTILISATION DE DREAMWEAVER

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.

Activation du mode Création

❖ Effectuez l'une des opérations suivantes :

• Choisissez Affichage > Création.

• Dans la barre d'outils 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).

Voir aussi

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

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

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.

Dernière mise à jour le 4/5/2011

UTILISATION DE DREAMWEAVER

Espace de travail

Voir aussi

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

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

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.

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.

Lorsque vous modifiez la taille d'affichage d'une page en mode Création ou Affichage en direct, seules les dimensions de la vue changent. La taille du document n'est pas modifiée.

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. Dreamweaver CS5.5 et les versions ultérieures fournissent une plus vaste liste de choix, y compris des options pour les principaux périphériques mobiles (comme illustré ci-dessous).

La taille de la fenêtre correspond aux dimensions internes de la fenêtre de navigateur, bordures exclues ; la taille du moniteur ou le périphérique mobile est indiqué sur la droite.

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.

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.

Dernière mise à jour le 4/5/2011

UTILISATION DE DREAMWEAVER

Espace de travail

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 Choisissez Barre d'état (CS5) ou Tailles des fenêtres (CS5.5 et versions ultérieures) dans la liste de catégories sur la

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 13

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

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.

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.

Dernière mise à jour le 4/5/2011

UTILISATION DE DREAMWEAVER

Espace de travail

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 332

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

« Test de votre site » à la page 112

« Validation des documents XML » à la page 338

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

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

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

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

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

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édias. 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 9

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

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

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

Dernière mise à jour le 4/5/2011

UTILISATION DE DREAMWEAVER

Espace de travail

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 14

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

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

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

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

Utilisation des menus contextuels

Les menus contextuels vous permettent d'accéder rapidement aux commandes et propriétés les plus utiles relatives à l'objet ou à la fenêtre avec lesquels vous travaillez. Les menus contextuels répertorient uniquement les commandes en rapport avec la sélection en cours.

1 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur

l'objet ou la fenêtre qui vous intéresse.

Dernière mise à jour le 4/5/2011

+ 696 hidden pages