ADOBE DREAMWEAVER CS5, DREAMWEAVER CS5.5 User Manual

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.

Last updated 10/4/2012

Chapter 1: Nouveautés

Nouveautés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Chapter 2: Espace de travail

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

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 Dreamweaver CS5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

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

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

Chapter 3: Utilisation de sites Dreamweaver

A propos des sites Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

Configuration d'une version locale de votre site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

Connexion à un serveur distant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

Configuration d'un serveur d'évaluation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50

Contrôle de version et paramètres avancés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52

Options de la boîte de dialogue Gérer les sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

Importation et exportation des paramètres d'un site Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54

Modification d'un site Web distant existant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

Définition des préférences de site pour le transfert de fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

Gestion de sites Contribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58

iii

Chapter 4: Création et gestion de fichiers

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

Gestion des fichiers et des dossiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80

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

Archivage et extraction de fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94

Synchronisation de fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103

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

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

Voilage de fichiers et de dossiers dans votre site Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109

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

Test de votre site Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

Chapter 5: Gestion des actifs et des bibliothèques

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

Utilisation des actifs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120

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

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

Chapter 6: Création de pages avec CSS

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

Panneau Styles CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137

Last updated 10/4/2012

UTILISATION DE DREAMWEAVER

Contents

Améliorations à la prise en charge de CSS3 dans le panneau Styles CSS (CS 5.5) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141

Définition de préférences de styles CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142

Création d'une nouvelle règle CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143

Définition des propriétés CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144

Modification d'une règle CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150

Ajout d'une propriété à une règle CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151

Application, suppression ou changement du nom de styles de classe CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151

Déplacement/exportation de règles CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152

Conversion d'un style CSS intégré en une règle CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154

Etablissement d'un lien vers une feuille de style CSS externe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154

Modification d'une feuille de style CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155

Mise en forme du code CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155

Désactivation/Activation du code CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157

Inspection de CSS en mode En direct . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157

Vérification de problèmes de restitution CSS entre les navigateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158

Utilisation des feuilles de style à la conception . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160

Utilisation des exemples de feuilles de style de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161

Mise à jour des feuilles de style CSS dans un site Contribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162

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

Utilisation des balises div . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169

Chapter 7: Mise en forme des pages avec HTML

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

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

Utilisation de cadres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205

Chapter 8: Ajout de contenu dans les pages

Utilisation du panneau Insertion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218

Définition des propriétés de page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221

Définition des propriétés de liens CSS pour une page entière . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223

Définition des propriétés d'en-tête CSS pour une page entière . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223

Définition des propriétés de titre et de codage d'une page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224

Utilisation d'un tracé d'image pour créer une page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225

Description de l'encodage de document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225

Sélection et affichage d'éléments dans la fenêtre de document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225

Couleurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228

Zoom avant et arrière . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229

Définition des préférences de durée et de taille des téléchargements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230

Utilisation du texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231

Définition des propriétés de texte dans l'inspecteur Propriétés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239

Vérification de l'orthographe d'une page Web. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242

Importation de données tabulaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242

Importation de documents Microsoft Office (Windows uniquement) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243

Création d'un lien vers un document Word ou Excel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243

Utilisation de formatage HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244

Utilisation de barres horizontales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246

Modification des combinaisons de polices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246

Last updated 10/4/2012

UTILISATION DE DREAMWEAVER

Contents

Insertion de dates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247

Ajout et modification d'images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248

Ajout d'une vidéo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261

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

Ajout de widgets Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269

Ajout de séquences audio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270

Ajout d'objets multimédias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272

Automatisation des tâches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280

Chapter 9: Liens et navigation

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

Etablissement de liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289

Menus de reroutage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297

Barres de navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298

Cartes graphiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299

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

Chapter 10: Prévisualisation des pages

Prévisualisation des pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304

Chapter 11: Utilisation de code de page

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

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

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

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

Réduction du code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339

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

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

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

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

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

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

Chapter 12: Ajout de comportements JavaScript

Utilisation de comportements JavaScript (instructions générales) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365

Application de comportements JavaScript intégrés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 368

Chapter 13: Utilisation d'autres applications

Intégration entre les applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380

Utilisation de Fireworks et Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 381

Utilisation de Photoshop et Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387

Utilisation de Flash et Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397

Utilisation d'Adobe Bridge et Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397

Utilisation de Device Central et Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400

Utilisation de ConnectNow et Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 401

Extension AIR pour Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 401

Last updated 10/4/2012

UTILISATION DE DREAMWEAVER

Contents

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

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

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

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

Création de régions modifiables dans les modèles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 418

Création de régions répétées dans les modèles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420

Utilisation de régions facultatives dans les modèles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 422

Définition d'attributs de balise modifiables dans les modèles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424

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

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

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

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

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

Syntaxe des modèles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 439

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

Chapter 15: Création de pages Spry visuellement

A propos du cadre applicatif Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 442

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

Utilisation du widget Accordéon Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 444

Utilisation du widget Barre de menus Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 447

Utilisation du widget Panneau réductible Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 453

Utilisation du widget Panneau à onglet Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 455

Utilisation du widget Info-bulle Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 458

Utilisation du widget Validation de groupe de boutons radio Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 460

Utilisation du widget Validation de zone de texte Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 464

Utilisation du widget Zone de texte de validation Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 469

Utilisation du widget Validation de la sélection Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 473

Utilisation du widget Validation de case à cocher Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 476

Utilisation du widget Validation de mot de passe Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 478

Utilisation du widget Validation de confirmation Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 482

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

Ajout d'effets Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 499

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

Création de requêtes multimédias (CS5.5 et versions ultérieures) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 504

Modification de l'orientation de la page pour les appareils mobiles (CS5.5 et versions ultérieures) . . . . . . . . . . . . . . . . . . . . . . 506

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

Assemblage d'applications Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 509

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

Chapter 17: Utilisation des services en ligne Adobe

Utilisation de Dreamweaver avec les services en ligne d'Adobe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 514

Chapter 18: Affichage de données XML avec XSLT

A propos de XML et de XSLT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 521

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

Last updated 10/4/2012

UTILISATION DE DREAMWEAVER

Contents

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

Entités de caractère manquant pour XSLT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 547

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

Description des applications Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 549

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

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

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

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

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

Suppression de scripts de connexion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 579

Chapter 20: Ajout de contenu dynamique aux pages Web

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

Conception de pages dynamiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 583

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

Panneaux de contenu dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 590

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

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

Modification d'un contenu dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 611

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

Affichage des données dynamiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 622

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

vii

Chapter 21: Création visuelle d'applications

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

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

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

Création d'une page de mise à jour d'enregistrement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 654

Création d'une page de suppression d'enregistrement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 659

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

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

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

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

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

Utilisation de composants ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 680

Chapter 22: Création de formulaires

Utilisation de formulaires pour recueillir des informations des utilisateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 688

Création de formulaires Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 691

Création de formulaires ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 706

Chapter 23: Accessibilité

Dreamweaver et l'accessibilité . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 720

Last updated 10/4/2012

Chapter 1: Nouveautés

Nouveautés

Important: Cette page fournit une liste des nouvelles fonctionnalités de Dreamweaver CS5 et Dreamweaver CS5.5. Cette page n'explique PAS comment utiliser ces fonctionnalités. Pour plus d'informations sur ces nouvelles fonctionnalités, cliquez sur les liens fournis. Vous pouvez également regarder une présentation des fonctionnalités de CS5 ou une

présentation des fonctionnalités de CS5.5 sur AdobeTV.

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” on page 504.

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 (CS5.5 et versions ultérieures)” on page 504.

Applications Web pour 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)” on page 506.

Assemblage d'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 “Assemblage d'applications Web sous forme

d'applications mobiles natives (CS 5.5)” on page 509.

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)” on page 261.

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” on page 321 et “Améliorations à la prise en charge de CSS3 dans le

panneau Styles CSS (CS 5.5)” on page 141.

Last updated 10/4/2012

UTILISATION DE DREAMWEAVER

Nouveautés

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, consultez la section “Connexions FTPS (CS5.5 )” on page 45.

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)” on page 343.

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” on page 514.

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” on page 157.

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” on page 157.

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” on page 167.

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” on page 77.

Last updated 10/4/2012

UTILISATION DE DREAMWEAVER

Nouveautés

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” on page 304.

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.

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. Consultez les sections “Configuration d'une version locale de votre site” on page 42 et “Connexion à un

serveur distant” on page 42.

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” on page 324.

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” on page 97.

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

Last updated 10/4/2012

UTILISATION DE DREAMWEAVER

Nouveautés

• 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

Last updated 10/4/2012

Chapter 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” on 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” on page 80 et “Gestion des actifs et des bibliothèques” on page 119.)

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” on page 132 et “Mise en forme des pages avec HTML” on page 185.)

Last updated 10/4/2012

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” on page 218).

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” on page 309.)

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” on page 549.)

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” on page 580.)

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” on page 89.)

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.

Last updated 10/4/2012

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.

Last updated 10/4/2012

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.

Présentation des éléments de l'espace de travail

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

Note: 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.

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,

Last updated 10/4/2012

UTILISATION DE DREAMWEAVER

Espace de travail

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, feuilles de style en cascade).

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

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.

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.

Last updated 10/4/2012

UTILISATION DE DREAMWEAVER

Espace de travail

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.

More Help topics

“Utilisation de la fenêtre de document” on page 19

“A propos de l'affichage en direct” on page 304

“Ouverture des fichiers associés” on page 75

“Informations générales sur le codage dans Dreamweaver” on page 309

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.

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

Note: 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.

Last updated 10/4/2012

UTILISATION DE DREAMWEAVER

Espace de travail

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.

Note: 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.

More Help topics

“Prévisualisation des pages en mode Affichage en direct” on page 304

“Définition des préférences de codage” on page 316

“Affichage et modification de contenu d'en-tête” on page 353

“Utilisation d'assistances visuelles pour la mise en forme” on page 185

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.

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.

Last updated 10/4/2012

UTILISATION DE DREAMWEAVER

Espace de travail

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.

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

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.

More Help topics

“Prévisualisation de pages dans Dreamweaver” on page 304

Last updated 10/4/2012

UTILISATION DE DREAMWEAVER

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.

More Help topics

“Insertion de code avec la barre d'outils de codage” on page 326

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.

Last updated 10/4/2012

UTILISATION DE DREAMWEAVER

Espace de travail

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

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

More Help topics

“Définition de la taille des fenêtres et de la vitesse de connexion” on page 22

“Zoom avant et arrière” on page 229

“Redimensionnement de la fenêtre de document” on page 21

“Définition des préférences de durée et de taille des téléchargements” on page 230

Last updated 10/4/2012

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.

More Help topics

“Ancrage et annulation d’ancrage de panneaux” on page 26

“Utilisation de l'inspecteur Propriétés” on 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.

Last updated 10/4/2012

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.

More Help topics

“Utilisation du panneau Insertion” on page 218

Last updated 10/4/2012

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.

More Help topics

“Utilisation des fichiers depuis le panneau Fichiers” on page 83

Last updated 10/4/2012

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.

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

Last updated 10/4/2012

UTILISATION DE DREAMWEAVER

Espace de travail

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

More Help topics

“Utilisation d'assistances visuelles pour la mise en forme” on page 185

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.

More Help topics

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.

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.

Last updated 10/4/2012

UTILISATION DE DREAMWEAVER

Espace de travail

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

More Help topics

“Présentation de la fenêtre de document” on page 9

“Prévisualisation des pages en mode Affichage en direct” on page 304

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.

More Help topics

“Gestion des fenêtres et des panneaux” on page 25

“Affichage de documents à onglets (Dreamweaver sur Macintosh)” on 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.

Last updated 10/4/2012

UTILISATION DE DREAMWEAVER

Espace de travail

• (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.

Note: (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.

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.

Last updated 10/4/2012

UTILISATION DE DREAMWEAVER

Espace de travail

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.

More Help topics

“Présentation de la barre d'état” on page 13

“Redimensionnement de la fenêtre de document” on 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.

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

Last updated 10/4/2012

UTILISATION DE DREAMWEAVER

Espace de travail

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.

Note: 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.

More Help topics

“Présentation de la barre d'outils de document” on page 10

“Présentation de la barre d'outils standard” on page 11

“Présentation de la barre d'outils de codage” on page 13

“Présentation de la barre d'outils Rendu de style” on page 11

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.

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

More Help topics

“Présentation de l'inspecteur Propriétés” on page 15

“Définition des propriétés de texte dans l'inspecteur Propriétés” on page 239

“Ancrage et annulation d’ancrage de panneaux” on page 26

“Modification d'attributs dans l'inspecteur de balises” on page 348

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.

Last updated 10/4/2012

+ 700 hidden pages