Adobe Dreamweaver CS5.5 Manuel utilisateur

Utilisation de
ADOBE® DREAMWEAVER® CS5 & CS5.5
Mentions légales
Mentions légales
Vous trouverez des informations juridiques à l'adresse http://help.adobe.com/fr_FR/legalnotices/index.html.
Dernière mise à jour le 4/5/2011
iii
Sommaire
Chapitre 1 : Nouveautés
Nouveautés (CS5.5) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Nouveautés (CS5)
..................................................................................................... 1
Chapitre 2 : Espace de travail
Déroulement du travail et espace de travail dans Dreamweaver
Utilisation de la fenêtre de document
......................................................... 4
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Utilisation de barres d'outils, d'inspecteurs et de menus contextuels
Personnalisation de l'espace de travail de CS5
Raccourcis clavier
Extensions
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Chapitre 3 : Utilisation de sites Dreamweaver
Configuration d'un site Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Gestion des sites Contribute avec Dreamweaver
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Chapitre 4 : Création et gestion de fichiers
Création et ouverture de documents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Gestion des fichiers et des dossiers
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Acquisition et placement de fichiers depuis ou vers votre serveur
Archivage et extraction de fichiers
Synchronisation de fichiers
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Comparaison de fichiers pour en chercher les différences
Restauration de fichiers (utilisateurs de Contribute)
Voilage de fichiers et de dossiers dans votre site
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Stockage des informations sur les fichiers dans des Design Notes
Test de votre site
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
Chapitre 5 : Gestion des actifs et des bibliothèques
A propos des actifs et des bibliothèques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Utilisation des actifs
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
Création et gestion d'une liste d'actifs favoris
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
Utilisation des éléments de bibliothèque
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
Chapitre 6 : Création de pages avec CSS
Description des feuilles de style en cascade
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
Création et gestion de CSS
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Mise en forme des pages avec CSS
Utilisation des balises div
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
Chapitre 7 : Mise en forme des pages avec HTML
Utilisation d'assistances visuelles pour la mise en forme
Présentation de contenu à l'aide de tableaux
Utilisation de cadres
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Dernière mise à jour le 4/5/2011
iv
UTILISATION DE DREAMWEAVER
Sommaire
Chapitre 8 : Ajout de contenu dans les pages
Utilisation des pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
Ajout et formatage de texte
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
Ajout et modification d'images
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243
Incorporation de vidéos aux pages Web (HTML5)
Insertion de fichiers SWF
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
Insertion de fichiers FLV
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259
Ajout de widgets Web
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
Ajout de séquences audio
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
Ajout d'autres objets multimédias
Automatisation des tâches
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276
Chapitre 9 : Liens et navigation
A propos des liens et de la navigation
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282
Etablissement de liens
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284
Menus de reroutage
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292
Barres de navigation
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293
Cartes graphiques
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294
Résolution des problèmes liés aux liens
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296
Chapitre 10 : Prévisualisation des pages
Prévisualisation de pages dans Dreamweaver
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299
Prévisualisation des pages dans les navigateurs
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302
Prévisualisation des pages dans les périphériques mobiles
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303
Chapitre 11 : Utilisation de code de page
Informations générales sur le codage dans Dreamweaver
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304
Configuration d'un environnement de codage
Définition des préférences de codage
Rédaction et modification de code
Réduction du code
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334
Optimisation et débogage de code
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336
Modification de code en mode Création
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342
Utilisation de contenu d'en-tête pour les pages
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348
Utilisation des inclusions côté serveur
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353
Gestion des bibliothèques de balises
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355
Importation de balises personnalisées dans Dreamweaver
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358
Chapitre 12 : Ajout de comportements JavaScript
Utilisation des comportements JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360
Application de comportements Dreamweaver intégrés
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363
Chapitre 13 : Utilisation d'autres applications
Intégration entre les applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375
Utilisation de Fireworks et Dreamweaver
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 376
Utilisation de Photoshop et Dreamweaver
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382
Utilisation de Flash et Dreamweaver
Utilisation d'Adobe Bridge
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 393
Dernière mise à jour le 4/5/2011
v
UTILISATION DE DREAMWEAVER
Sommaire
Utilisation de Device Central
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395
Utilisation de ConnectNow
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 396
Extension AIR pour Dreamweaver
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397
Chapitre 14 : Création et gestion des modèles
A propos des modèles Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403
Reconnaissance des modèles et des documents basés sur un modèle
Création d'un modèle Dreamweaver
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411
Création de régions modifiables
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414
Création de régions répétées
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 416
Utilisation des régions facultatives
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 418
Définition d'attributs de balise modifiables
Création d'un modèle imbriqué
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 422
Modification, mise à jour et suppression de modèles
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425
Exportation et importation du contenu d'un modèle
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 429
Application ou suppression d'un modèle depuis un document existant
Modification du contenu d'un document basé sur un modèle
Syntaxe des modèles
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 430
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 432
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 435
Définition de préférences de programmation pour les modèles
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 436
Chapitre 15 : Création de pages Spry visuellement
A propos du cadre applicatif Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 438
Utilisation des widgets Spry (instructions générales)
Utilisation du widget Accordéon
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 438
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 440
Utilisation du widget Barre de menus
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 443
Utilisation du widget Panneau réductible
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 449
Utilisation du widget Panneau à onglet
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 451
Utilisation du widget Info-bulle
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 454
Utilisation du widget Validation de groupe de boutons radio
Utilisation du widget Validation de zone de texte
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 456
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 460
Utilisation du widget Zone de texte de validation
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465
Utilisation du widget Validation de la sélection
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 468
Utilisation du widget Validation de case à cocher
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 471
Utilisation du widget Validation de mot de passe
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 474
Utilisation du widget Validation de confirmation
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 478
Affichage de données à l'aide de Spry
Ajout d'effets Spry
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 481
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 495
Chapitre 16 : Création de contenu pour écrans et appareils multiples
Création de requêtes multimédias (CS 5.5) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 500
Modification de l'orientation de la page (CS 5.5)
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 502
Création d'applications Web pour appareils mobiles (CS5.5)
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 502
Déploiement d'applications Web sous forme d'applications mobiles natives (CS 5.5)
Aperçu des pages avec le panneau Aperçu sur écrans multiples
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 505
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 508
Dernière mise à jour le 4/5/2011
vi
UTILISATION DE DREAMWEAVER
Sommaire
Chapitre 17 : Utilisation des services en ligne Adobe
Services en ligne Adobe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 510
BrowserLab
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 510
Business Catalyst InContext Editing
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 510
Chapitre 18 : Affichage de données XML avec XSLT
A propos de XML et de XSLT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 517
Exécution de transformations XSL sur le serveur
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 524
Exécution de transformations XSL sur le client
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 541
Entités de caractère manquant
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 543
Chapitre 19 : Préparation à la création de sites dynamiques
Description des applications Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 545
Configuration de l'ordinateur pour le développement d'applications
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 553
Connexions aux bases de données pour les développeurs ColdFusion
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 558
Connexions aux bases de données pour les développeurs ASP
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 560
Connexions aux bases de données pour les développeurs PHP
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 567
Résolution des problèmes de connexion aux bases de données
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 569
Suppression de scripts de connexion
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 575
Chapitre 20 : Ajout de contenu dynamique aux pages Web
Optimisation de l'espace de travail pour le développement visuel
Conception de pages dynamiques
Présentation des sources de contenu dynamique
Panneaux de contenu dynamique
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 576
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 579
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 581
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 586
Définition de sources de contenu dynamique
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 588
Ajout de contenu dynamique dans les pages
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 603
Modification d'un contenu dynamique
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 607
Affichage des enregistrements de base de données
Affichage des données dynamiques
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 609
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 618
Ajout de comportements de serveur personnalisés
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 619
Chapitre 21 : Création visuelle d'applications
Création de pages principales et détaillées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 632
Création de pages de recherche et de résultats
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 639
Création d'une page d'insertion d'enregistrement
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 646
Création de pages de mise à jour d'enregistrements
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 650
Création de pages de suppression d'enregistrements
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 655
Création de pages avec objets de manipulation de données avancés (ColdFusion, ASP)
Création d'une page d'enregistrement
Création d'une page d'ouverture de session
Création d'une page à accès restreint
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 671
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 673
Sécurisation d’un dossier dans votre application (ColdFusion)
Utilisation de composants ColdFusion
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 663
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 668
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 676
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 676
Dernière mise à jour le 4/5/2011
vii
UTILISATION DE DREAMWEAVER
Sommaire
Chapitre 22 : Création de formulaires
Collecte d'informations auprès des utilisateurs
Création de formulaires Web
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 687
Création de formulaires ColdFusion
Chapitre 23 : Accessibilité
Dreamweaver et l'accessibilité
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 684
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 702
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 716
Dernière mise à jour le 4/5/2011
1
Chapitre 1 : Nouveautés
Nouveautés (CS5.5)
Prise en charge de l'affichage sur écrans multiples Prévisualisez vos conceptions dans des résolutions d'écran
standard, ou utilisez des requêtes multimédias pour définir la résolution. Lorsque vous testez pour des appareils qui
modifient l'orientation de la page en fonction de la façon dont l'appareil est tenu, utilisez les options paysage et portrait
au cours de la prévisualisation. Pour plus d'informations, voir « Création de contenu pour écrans et appareils
multiples » à la page 500.
Prise en charge des requêtes multimédias Permet d'utiliser des requêtes multimédias pour personnaliser l'apparence
de votre site pour différentes résolutions d'écran. Pour plus d'informations, voir « Création de requêtes multimédias
(CS 5.5) » à la page 500.
Création d'applications Web qui fonctionnent sur des appareils mobiles Permet de concevoir rapidement une
application Web qui fonctionne sur la plupart des appareils mobiles à l'aide du widget jQuery Mobile. Pour plus
d'informations, reportez-vous à la section « Création d'applications Web pour appareils mobiles (CS5.5) » à la
page 502.
Assemblage de vos applications Web pour appareils Android, iPhone et iPad Permet d'assembler vos applications
Web dans Dreamweaver et de les déployer sur des appareils tournant sous Android™ et iOS. Pour plus d'informations,
consultez la section « Déploiement d'applications Web sous forme d'applications mobiles natives (CS 5.5) » à la
page 505.
Prise en charge de HTML5, CSS3 et jQuery Dreamweaver prend en charge les conseils de code pour HTML5, CSS3, et
jQuery.
Les mises en forme de départ sont également disponibles pour la création de nouvelles pages HTML5. Dreamweaver
prend en charge la fonctionnalité HTML5 d'incorporation de vidéos dans les pages HTML. Pour plus d'informations,
voir « Incorporation de vidéos aux pages Web (HTML5) » à la page 256.
Le panneau CSS a été amélioré de façon à prendre en charge les propriétés CSS3 les plus fréquemment utilisées. Pour
plus d'informations, voir « Conseils de code » à la page 316 et « Améliorations à la prise en charge de CSS3 dans le
panneau Styles CSS (CS 5.5) » à la page 137.
Prise en charge de FTPS Permet de transférer les données à l'aide FTPS. FTPS (FTP sur SSL) fournit une prise en
charge du chiffrement et de l'authentification, au contraire de SFTP qui ne en charge que le chiffrement. Pour plus
d'informations, voir « Définition des options pour les connexions FTPS (CS 5.5) » à la page 44.
Prise en charge du Validateur W3C Permet de créer des pages HTML et XHTML normalisées à l'aide du validateur
W3C dans Dreamweaver. Pour plus d'informations, voir « Validation de documents à l'aide du validateur W3C (CS
5.5) » à la page 338.
Nouveautés (CS5)
Adobe BrowserLab
Dreamweaver CS5 s'intègre à Adobe BrowserLab, l'un des nouveaux services en ligne de CS Live, qui propose une
solution précise et rapide de test de compatibilité inter-navigateurs. BrowserLab permet de prévisualiser les pages Web
et le contenu local à l'aide de divers outils d'affichage et de comparaison. Voir « BrowserLab » à la page 510.
Dernière mise à jour le 4/5/2011
2
UTILISATION DE DREAMWEAVER
Nouveautés
Intégration de Business Catalyst
Adobe Business Catalyst est une application hébergée qui remplace les outils de bureau traditionnels par une plateforme centralisée pour concepteurs Web. Cette application s'associe à Dreamweaver pour vous permettre de créer ce
que vous souhaitez, de sites de base reposant sur les données à de puissantes boutiques en ligne. Voir
http://www.adobe.com/go/business_catalyst_get_extension_fr.
Améliorations apportées à CSS
Désactivation/Activation de CSS
La fonction Désactiver/Activer CSS permet de désactiver ou de réactiver directement les propriétés CSS depuis le
panneau Styles CSS. La désactivation d'une propriété CSS se borne à la mettre en commentaire, sans la supprimer. Voir
« Désactivation/Activation du code CSS » à la page 153.
Inspection CSS
Le mode Inspection permet d'afficher visuellement les propriétés du modèle de boîte en feuilles CSS (dont
l'espacement, la bordure et la marge) en détail, sans devoir lire de code ou employer un utilitaire tiers tel que Firebug.
Voir « Inspection de CSS en mode En direct » à la page 153.
Mises en forme CSS de départ
Dreamweaver CS5 comprend des mises en forme CSS de départ qui ont été mises à jour et simplifiées. Les sélecteurs
descendants complexes des mises en forme CS4 ont été supprimés et remplacés par des classes simplifiées, plus
compréhensibles. Voir « Création d'une page avec une mise en forme CSS » à la page 162.
Fichiers à association dynamique
La fonctionnalité Fichiers à association dynamique permet de trouver tous les fichiers et scripts externes requis pour
l'assemblage de pages CMS (système de gestion du contenu) basées sur PHP, ainsi que d'afficher leur nom de fichier
dans la barre d'outils Fichiers associés. Par défaut, Dreamweaver prend en charge la recherche de fichiers pour les
cadres CMS Wordpress, Drupal et Joomla! . Voir « Ouverture de fichiers à association dynamique » à la page 74.
Navigation dans le mode En direct
La navigation dans le mode En direct active les liens dans l'affichage en direct, ce qui permet d'interagir avec les
applications côté serveur et les données dynamiques. Cette fonctionnalité permet d'entrer une URL afin d'inspecter les
pages servies à partir d'un serveur Web en direct, ainsi que de modifier les pages consultées si elles existent dans l'un
de vos sites définis localement. Voir « Prévisualisation de pages dans Dreamweaver » à la page 299.
Conseils de code pour classes personnalisées PHP
Les conseils de code pour classes personnalisées PHP affichent la syntaxe appropriée pour les fonctions, objets et
constantes PHP, ce qui vous aide à taper du code plus précis. Les conseils de code fonctionnent également avec vos
fonctions et classes personnalisées, ainsi qu'avec les cadres tiers tels que le cadre Zend.
Dernière mise à jour le 4/5/2011
3
UTILISATION DE DREAMWEAVER
Nouveautés
Simplification de la configuration d'un site
La boîte de dialogue Définition du site remise à neuf (et désormais baptisée Configuration du site) facilite la
configuration d'un site Dreamweaver local, de façon à vous permettre d'entamer immédiatement la création de pages
Web. La catégorie Serveur distant permet de spécifier, dans la même vue, les serveurs distants et les serveurs
d'évaluation. Voir « Création d'un nouveau site » à la page 40.
Conseils de code spécifiques au site
La fonctionnalité de conseils de code spécifiques au site permet de personnaliser votre environnement de codage
lorsque vous utilisez des bibliothèques PHP et des cadres CMS tiers, comme WordPress, Drupal, Joomla! ou d'autres
cadres. Les fichiers de thème pour les blogs et les autres fichiers et répertoires PHP personnalisés peuvent être inclus
ou exclus des sources de conseils de code. Voir « Conseils de code spécifiques au site » à la page 319.
Améliorations de la prise en charge de Subversion
Dreamweaver CS5 bénéficie d'une prise en charge accrue de Subversion. Vous pouvez désormais déplacer, copier et
supprimer des fichiers localement, puis synchroniser les modifications avec votre référentiel SVN distant. La nouvelle
commande Rétablir permet de corriger rapidement les conflits d'arborescence ou de revenir à la version précédente
d'un fichier. En outre, une nouvelle extension vous permet de préciser quelle version de Subversion vous voulez utiliser
pour un projet précis. Voir « Utilisation de Subversion (svn) pour acquérir et archiver des fichiers » à la page 94.
Fonctionnalités obsolètes
Les fonctionnalités suivantes sont devenues obsolètes depuis Dreamweaver CS5 :
• Rapport de validation d'accessibilité
• Comportements de serveur ASP/JavaScript
• Vérification du comportement JavaScript du navigateur
• Connexion à un serveur FTP/RDS sans définir de site
• Contrôle du comportement JavaScript de Shockwave ou de SWF
• Créer un album photos pour le Web
• Comportement JavaScript de masquage de menu contextuel
• Gestion des classes CSS disponibles d'InContext Editing
• Insérer FlashPaper
• Insertion/suppression de Mark of the Web
• Intégration de Microsoft Visual Sourcesafe
• Barres de navigation
• Comportement JavaScript Lire le son
• Menu Afficher les événements (panneau Comportements)
• Comportement JavaScript d'affichage de menu contextuel
• Comportements JavaScript de montage
• Validation des balises
• Affichage de Live Data
Dernière mise à jour le 4/5/2011
4
Chapitre 2 : Espace de travail
Déroulement du travail et espace de travail dans
Dreamweaver
Présentation des processus de Dreamweaver
Vous pouvez utiliser plusieurs approches pour créer un site Web. Voici l'une des approches possibles :
Planification et configuration de votre site
Déterminez l'emplacement où vos fichiers seront enregistrés et examinez les besoins du site, les profils de ses
utilisateurs et les objectifs du site. Il convient également d'examiner les conditions techniques requises, notamment
l'accès utilisateur et les restrictions en matière de navigateurs, de plug-ins ou de téléchargement. Après avoir organisé
vos informations et défini une structure, vous pouvez commencer la création du site. (Voir « Utilisation de sites
Dreamweaver » à la page 39.)
Organisation et gestion des fichiers de votre site
Dans le panneau Fichiers, vous pouvez facilement ajouter, supprimer et renommer des fichiers et des dossiers afin de
modifier l'organisation en fonction de vos besoins. Dans le panneau Fichiers, vous trouverez de nombreux outils
permettant la gestion de votre site, le transfert de vos fichiers vers et depuis un serveur distant, la configuration d'un
processus d'archivage/extraction pour empêcher l'écrasement des fichiers et la synchronisation des fichiers sur vos
sites locaux et distants. Utilisez le panneau Actifs pour organiser facilement les actifs sur un site ; vous pouvez ensuite
faire glisser la plupart des actifs directement du panneau vers un document Dreamweaver. Dreamweaver vous permet
également de gérer certains aspects de vos sites Adobe® Contribute®. (Voir « Gestion des fichiers et des dossiers » à la
page 77 et « Gestion des actifs et des bibliothèques » à la page 116.)
Mise en forme de vos pages Web
Sélectionnez la technique de mise en forme de votre choix ou combinez les options de mise en forme de Dreamweaver
pour définir la présentation de votre site. Vous pouvez utiliser des éléments PA, des styles de positionnement CSS ou
des mises en forme CSS prédéfinies de Dreamweaver pour définir la mise en forme. Les outils de création de tableaux
vous permettent de concevoir des pages rapidement en dessinant, puis en réorganisant la structure des pages. Si vous
souhaitez afficher plusieurs éléments simultanément dans un navigateur Web, vous pouvez utiliser des cadres pour
mettre en forme vos documents. Finalement, vous pouvez créer de nouvelles pages à partir d'un modèle Dreamweaver,
puis actualiser automatiquement leur mise en forme lorsque le modèle change. (Voir « Création de pages avec CSS »
à la page 129 et « Mise en forme des pages avec HTML » à la page 180.)
Dernière mise à jour le 4/5/2011
5
UTILISATION DE DREAMWEAVER
Espace de travail
Ajout de contenu dans les pages
Ajoutez des actifs et des éléments de conception, par exemple du texte, des images, des images avec effet de survol, des
cartes graphiques, des couleurs, des animations, des sons, des liens HTML, des menus de reroutage, etc. Vous pouvez
utiliser les fonctions intégrées de création de page pour les éléments tels que les titres et les arrière-plans, taper
directement dans la page ou importer du contenu d'autres documents. Dreamweaver fournit également des
comportements permettant d'exécuter des tâches en réponse à des événements spécifiques, comme par exemple la
validation d'un formulaire lorsque le visiteur clique le sur bouton Envoyer ou l'ouverture d'une deuxième fenêtre de
navigateur lorsque le chargement de la page principale est terminé. Finalement, Dreamweaver comprend des outils
permettant d'optimiser les performances de votre site Web et de tester les pages pour garantir leur compatibilité avec
différents navigateurs Web. (Voir « Ajout de contenu dans les pages » à la page 213).
Création de pages par codage manuel
Le codage manuel des pages Web constitue une autre approche de la création de pages. Dreamweaver dispose d'outils
d'édition visuelle conviviaux ainsi que d'un environnement de codage sophistiqué. Vous pouvez utiliser l'une ou l'autre
de ces méthodes (ou bien les deux) pour créer et modifier vos pages. (Voir « Utilisation de code de page » à la
page 304.)
Configuration d'une application Web pour un contenu dynamique
De nombreux sites Web contiennent des pages dynamiques qui permettent aux visiteurs d'afficher les informations
stockées dans des bases de données, voire d'ajouter ou de modifier des données dans certains cas. Pour créer ce type
de pages, vous devez d'abord configurer un serveur Web et un serveur d'application, créer ou modifier un site
Dreamweaver et vous connecter à une base de données. (Voir « Préparation à la création de sites dynamiques » à la
page 545.)
Création de pages dynamiques
Dans Dreamweaver, vous pouvez définir diverses sources de contenu dynamique, y compris des jeux
d'enregistrements extraits de bases de données, des paramètres de formulaire et des composants JavaBeans. Pour
ajouter le contenu dynamique à une page, il suffit de le faire glisser vers cette dernière.
Vous pouvez définir une configuration de page qui affiche un ou plusieurs enregistrements à la fois (ou plusieurs pages
d'enregistrements), ajoute des liens spéciaux permettant de passer d'une page d'enregistrements à une autre et crée des
compteurs d'enregistrements pour faciliter la gestion de ces derniers. Vous pouvez encapsuler la logique d'application
ou d'entreprise en faisant appel à des technologies telles que Adobe ® ColdFusion® et les services Web. Si vous avez
besoin de plus de souplesse, vous pouvez créer des comportements de serveur et formulaires interactifs personnalisés.
(Voir « Ajout de contenu dynamique aux pages Web » à la page 576.)
Test et publication
Le test de vos pages est un processus continu qui se déroule tout au long du cycle de développement. A la fin de ce
cycle, vous publiez le site sur un serveur. De nombreux développeurs programment également une maintenance
régulière pour s'assurer que le site reste à jour et est opérationnel. (Voir « Acquisition et placement de fichiers depuis
ou vers votre serveur » à la page 86.)
Vous trouverez un didacticiel vidéo sur les possibilités offertes par Dreamweaver à l'adresse
www.adobe.com/go/lrvid4040_dw_fr.
Vue d'ensemble de la présentation de l'espace de travail
L'espace de travail de Dreamweaver permet d'afficher des documents et les propriétés des objets. Il comporte des barres
d'outils donnant accès aux opérations les plus courantes, vous permettant ainsi de modifier rapidement vos
documents.
Dernière mise à jour le 4/5/2011
6
UTILISATION DE DREAMWEAVER
Espace de travail
Sous Windows®, Dreamweaver propose une présentation intégrée en une seule fenêtre. Dans l'espace de travail intégré,
toutes les fenêtres et tous les panneaux sont rassemblés dans une grande fenêtre d'application.
A. Barre d'application B. Barre d'outils du document C. Fenêtre de document D. Commutation d'espace de travail E. Groupes de panneaux
F. CS Live G. Sélecteur de balises H. Inspecteur Propriétés I. Panneau Fichiers
Sous Mac OS®, Dreamweaver peut afficher de multiples documents dans une seule fenêtre, avec des onglets qui
identifient chacun d'eux. Dreamweaver permet également d'afficher un espace de travail flottant où chaque document
dispose de sa propre fenêtre. Les groupes de panneaux sont initialement ancrés ensemble, mais vous pouvez les séparer
pour les faire apparaître dans leur propre fenêtre. Lorsque des groupes de panneaux sont ancrés et que la fenêtre de
document est agrandie, le redimensionnement, l'affichage et le masquage de panneaux entraîne le redimensionnement
automatique du document principal, comme c'est le cas dans Windows.
Dernière mise à jour le 4/5/2011
7
UTILISATION DE DREAMWEAVER
Espace de travail
A. Barre d'application B. Barre d'outils du document C. Commutation d'espace de travail D. Fenêtre de document E. CS Live F. Groupes de
panneaux G. Sélecteur de balises H. Inspecteur Propriétés I. Panneau Fichiers
Vous trouverez un didacticiel sur l'utilisation des différents espaces de travail de Dreamweaver à l'adresse
www.adobe.com/go/lrvid4042_fr.
Voir aussi
« Utilisation de barres d'outils, d'inspecteurs et de menus contextuels » à la page 22
« Personnalisation de l'espace de travail de CS5 » à la page 24
« Affichage de documents à onglets (Dreamweaver sur Macintosh) » à la page 30
Didacticiel consacré à l'espace de travail Dreamweaver
Espace de travail présentation des éléments
L'espace de travail contient les éléments suivants:
Remarque : Dreamweaver propose de nombreux autres inspecteurs, panneaux et fenêtres. Pour ouvrir les panneaux,
inspecteurs et fenêtres, utilisez le menu Fenêtre.
Ecran d'accueil Permet d'ouvrir un document récent ou de créer un nouveau document. Vous pouvez également, à
partir de l'écran d'accueil, survoler Dreamweaver ou accéder à un didacticiel.
Dernière mise à jour le 4/5/2011
8
UTILISATION DE DREAMWEAVER
Espace de travail
Barre d'application Sur toute la largeur de la partie supérieure de la fenêtre d'application, cette barre contient une
section de commutation d'espace de travail, des menus (Windows uniquement) et d'autres contrôles d'application.
Barre d'outils du document Contient des boutons permettant d'accéder aux différents modes d'affichage de la fenêtre
du document (tels que le mode Création ou le mode Code), de définir les différentes options d'affichage et d'effectuer
certaines opérations courantes, telles que la prévisualisation dans un navigateur.
Barre d'outils standard Non affichée dans l'agencement par défaut de l'espace de travail. Contient des boutons
correspondant aux opérations courantes des menus Fichier et Edition : Nouveau, Ouvrir, Parcourir dans Bridge,
Enregistrer, Enregistrer tout, Imprimer le code, Couper, Copier, Coller, Annuler et Répéter. Pour afficher la barre
d'outils standard, choisissez Affichage > Barres d'outils > Standard.
La barre d'outils de codage Affichée en mode Code uniquement. Regroupe des boutons couvrant la plupart des
opérations de codage standard.
La barre d'outils de rendu de style Masquée par défaut. Composée de boutons qui vous permettent d'avoir un aperçu
de votre création dans différents types de média si vous utilisez des feuilles de style dépendantes du média. Elle contient
également un bouton qui permet d'activer ou de désactiver les styles CSS (Cascading Style Sheets).
Fenêtre de document Affiche le document que vous créez et modifiez.
L'inspecteur Propriétés Permet de visualiser et de modifier diverses propriétés de l'objet ou du texte sélectionné.
Chaque objet possède des propriétés différentes. L'inspecteur Propriétés n'est pas développé par défaut dans la
présentation de l'espace de travail Codeur.
Sélecteur de balises Située dans la barre d'état, dans le bas de la fenêtre de document. Affiche la hiérarchie des balises
entourant la sélection active. Cliquez sur une balise quelconque dans la hiérarchie pour la sélectionner avec son
contenu.
Panneaux Permet de surveiller et de modifier votre travail. Citons par exemple le panneau Insertion, le panneau Styles
CSS et le panneau Fichiers. Pour développer un panneau, double-cliquez sur son onglet.
Panneau Insertion Contient des boutons permettant d'insérer divers types d'objets, tels que des images, tableaux et
éléments multimédias dans un document. Chaque objet est une portion de code HTML vous permettant de définir
différents attributs lors de son insertion. Vous pouvez, par exemple, insérer un tableau en cliquant sur le bouton
Tableau du panneau Insertion. Si vous le préférez, vous pouvez insérer les objets à partir du menu Insertion.
Le panneau Fichiers Permet de gérer vos fichiers et dossiers, qu'ils fassent partie d'un site Dreamweaver ou qu'ils se
trouvent sur un serveur distant. Il permet également d'accéder à tous les fichiers situés sur votre disque local, tout
comme l'Explorateur Windows (Windows) ou le Finder (Macintosh).
Voir aussi
« Utilisation de la fenêtre de document » à la page 18
« Utilisation de barres d'outils, d'inspecteurs et de menus contextuels » à la page 22
« Gestion des fenêtres et des panneaux » à la page 24
Présentation de la fenêtre de document
La fenêtre de document affiche le document actif. Vous pouvez choisir parmi les modes d'affichage suivants :
Mode Création Un environnement de création pour la mise en forme visuelle des pages, l'édition visuelle et le
développement rapide d'applications. Dans ce mode, Dreamweaver affiche une représentation visuelle entièrement
modifiable du document, similaire à la représentation de la page sur un navigateur.
Dernière mise à jour le 4/5/2011
9
UTILISATION DE DREAMWEAVER
Espace de travail
Mode Code Environnement de codage manuel pour rédiger et modifier du code HTML, JavaScript et de langage de
serveur, tel que le langage PHP ou CFML (ColdFusion Markup Language), ou tout autre type de code.
Mode Code fractionné Version fractionnée du mode Code, qui permet de travailler dans différentes sections du
document en même temps.
Modes Code et Création Permettent d'obtenir l'affichage Code et l'affichage Création du document dans une même
fenêtre.
Mode En direct Tout comme le mode Création, le mode Affichage en direct fournit une représentation plus réaliste de
l'apparence de votre document dans un navigateur. Il permet également d'interagir avec le document comme vous le
feriez dans un navigateur. Le mode Affichage en direct n'est pas modifiable. Vous pouvez toutefois apporter des
modifications en mode Code et actualiser l'affichage en direct afin de voir l'impact de ces modifications.
Mode Code en direct Uniquement disponible lors de l'affichage d'un document en mode Affichage en direct. Le mode
Code en direct affiche le code qu'un navigateur utilise pour exécuter la page. Il peut changer de manière dynamique
lorsque vous interagissez avec la page en mode Affichage en direct. Le mode Code en direct n'est pas modifiable.
Lorsqu'une fenêtre de document est agrandie (mode d'affichage par défaut), des onglets s'affichent en haut de la fenêtre
de document indiquant les noms de fichier de tous les documents ouverts. Dreamweaver affiche un astérisque après
le nom du fichier si vous avez apporté des modifications que vous n'avez pas encore enregistrées.
Pour passer à un autre document, cliquez sur son onglet.
Dreamweaver affiche également la barre d'outils Fichiers associés en dessous de l'onglet du document (ou sous la barre
de titre du document si vous avez affiché les documents dans des fenêtres séparées). Les documents associés sont des
fichiers, par exemple CSS ou JavaScript, qui sont associés au fichier actuel. Pour ouvrir l'un de ces fichiers associés dans
la fenêtre de document, cliquez sur son nom dans la barre d'outils Fichiers associés.
Voir aussi
« Utilisation de la fenêtre de document » à la page 18
« A propos de l'affichage en direct » à la page 299
« Ouverture des fichiers associés » à la page 72
« Informations générales sur le codage dans Dreamweaver » à la page 304
Présentation de la barre d'outils de document
La barre d'outils Document contient des boutons qui permettent de basculer rapidement entre différents mode
d'affichage de votre document. La barre d'outils contient également plusieurs commandes et options courantes
permettant d'afficher le document et de le transférer d'un site local vers un site distant. L'illustration ci-dessous
représente la barre d'outil Document développée.
A. Afficher le mode Code B. Afficher les modes Code et Création C. Afficher le mode Création D. Mode Code en direct E. Vérification de la
compatibilité avec les navigateurs F. Mode En direct G. Mode Inspection CSS H. Aperçu/Débogage dans le navigateur I. Assistances visuelles
J. Actualiser mode Création K. Titre du document L. Gestion des fichiers
Les options suivantes s'affichent dans la barre d'outils de document :
Afficher le mode Code Affiche uniquement le mode Code dans la fenêtre de document.
Afficher les modes Code et Création Fractionne la fenêtre de document afin d'afficher le mode Code et le mode
Création. Dans ce cas, l'option Mode Création en haut est activée dans le menu Options d'affichage.
Dernière mise à jour le 4/5/2011
10
UTILISATION DE DREAMWEAVER
Espace de travail
Afficher le mode Création Affiche uniquement le mode Création dans la fenêtre de document.
Remarque : Si vous utilisez certaines types de fichiers, tels que XML, JavaScript, CSS ou d'autres types en mode code, les
fichiers ne sont pas visibles en mode Création, et les boutons Création et Fractionner sont grisés.
Mode En direct Affiche une vue du document non modifiable, interactive, basée sur un navigateur.
Mode Code en direct Affiche le code tel qu'il est utilisé par le navigateur pour exécuter la page.
Titre du document Permet d'attribuer un titre à votre document et l'afficher dans la barre de titre du navigateur. Si
votre document possède déjà un titre, celui-ci s'affiche dans ce champ.
Gestion des fichiers Affiche le menu Gestion des fichiers.
Aperçu/Débogage dans le navigateur Permet de prévisualiser ou de déboguer votre document dans un navigateur.
Sélectionnez un navigateur dans le menu.
Actualiser mode Création Actualise le mode Création du document après avoir apporté des modifications dans le
mode Code. Les modifications apportées dans le mode Code n'apparaissent pas automatiquement dans le mode
Création. Vous devez exécuter tout d'abord certaines opérations, comme enregistrer le fichier ou utiliser ce bouton.
Remarque : L'actualisation met également à jour les fonctionnalités de code qui dépendent de DOM (Document Object
Model), comme la possibilité de sélectionner les balises d'ouverture ou de fermeture d'un bloc de code.
Afficher les options Permet de définir les options d'affichage des modes Code et Création, notamment le mode devant
s'afficher au-dessus de l'autre. Les options du menu s'appliquent à l'affichage actuel : Mode Création, mode Code ou
les deux.
Assistances visuelles Permet d'utiliser différents supports visuels en vue de la conception de vos pages.
Valider le marqueur Permet de valider le document actif ou la balise sélectionnée.
Vérification de la compatibilité avec les navigateurs Permet de vérifier si votre code CSS est compatible avec
différents navigateurs.
Voir aussi
« Affichage des barres d'outils » à la page 22
« Prévisualisation des pages en mode Affichage en direct » à la page 299
« Définition des préférences de codage » à la page 311
« Affichage et modification de contenu d'en-tête » à la page 348
« Utilisation d'assistances visuelles pour la mise en forme » à la page 180
Présentation de la barre d'outils standard
La barre d'outils Standard contient des boutons correspondant aux opérations courantes des menus Fichier et Edition
: Nouveau, Ouvrir, Parcourir dans Bridge, Enregistrer, Enregistrer tout, Imprimer le code, Couper, Copier, Coller,
Annuler et Répéter. Utilisez ces boutons comme vous utiliseriez les commandes de menu équivalentes.
Voir aussi
« Affichage des barres d'outils » à la page 22
« Création et ouverture de documents » à la page 63
Dernière mise à jour le 4/5/2011
11
UTILISATION DE DREAMWEAVER
Espace de travail
Présentation de la barre d'outils Rendu de style
La barre d'outils de rendu de style (masquée par défaut) est composée de boutons qui vous permettent d'avoir un
aperçu de votre création dans différents types de média si vous utilisez des feuilles de style dépendantes du média. Elle
contient également un bouton qui permet d'activer ou de désactiver les styles CSS. Pour afficher la barre d'outils
standard, choisissez Affichage > Barres d'outils > Rendu de style.
Cette barre d'outil n'est fonctionnelle que si vos documents appliquent des feuilles de styles dépendantes du média. Par
exemple, votre feuille de style peut comporter une règle relative au corps du texte pour l'impression et une autre pour
l'affichage sur des téléphones portables. Pour plus d'informations sur la création de feuilles de style dépendantes du
média, consultez le site Web du World Wide Web Consortium à l'adresse www.w3.org/TR/CSS21/media.html.
Par défaut, Dreamweaver affiche votre mise en forme pour le type de média écran (qui indique comment une page
apparaît sur un écran d'ordinateur). Vous pouvez afficher les rendus de type de média suivants en cliquant sur les
boutons respectifs dans la barre d'outils de rendu de style.
Rendu pour le type de support Ecran Indique comment la page apparaît sur un écran d'ordinateur.
Rendu pour le type de support Impression Indique comment la page apparaît sur une feuille de papier imprimée.
Rendu pour le type de support Téléphone mobile Indique comment la page apparaît sur un appareil portatif comme
un téléphone mobile et un BlackBerry.
Rendu pour le type de support Projection Indique comment la page apparaît sur un projecteur.
Rendu pour le type de support TTY Indique comment la page apparaît sur un appareil de type télétype.
Rendu pour le type de support TV Indique comment la page apparaît sur un téléviseur.
Intervertir l'affichage des Styles CSS Permet d'activer ou de désactiver les styles CSS. Ce bouton fonctionne
indépendamment des autres boutons de média.
Feuilles de style à la création Permet de définir une feuille de style à la création.
Pour accéder à un didacticiel relatif à la création de feuilles de style pour l'impression et les appareils portatifs,
consultez le site Web d'Adobe à l'adresse www.adobe.com/go/vid0156_fr.
Voir aussi
« Affichage des barres d'outils » à la page 22
Présentation de la barre d'outils Navigation de l'explorateur
La barre d'outils Navigation de l'explorateur devient active dans le mode En direct et vous montre l'adresse de la page
que vous examinez dans la fenêtre de document. A partir de Dreamweaver CS5, le mode En direct se comporte comme
un navigateur ordinaire. Ainsi, même si vous accédez à un site en dehors de votre site local (par exemple
http://www.adobe.com), Dreamweaver charge la page dans la fenêtre de document.
A. Contrôles de navigateur B. Zone d'adresse C. Options de l'affichage en direct
Dernière mise à jour le 4/5/2011
12
UTILISATION DE DREAMWEAVER
Espace de travail
Par défaut, les liens ne sont pas actifs dans le mode En direct. Si les liens ne sont pas actifs, vous pouvez sélectionner le
texte d'un lien dans la fenêtre de document, ou cliquer sur celui-ci, sans accéder à une page différente. Pour tester les
liens en mode En direct, vous pouvez permettre un clic unique ou des clics continus, grâce aux commandes Suivre le
lien et Suivre les liens de manière continue du menu Options d'affichage, à droite de la zone d'adresse.
Voir aussi
« Prévisualisation de pages dans Dreamweaver » à la page 299
Présentation de la barre d'outils de codage
La barre d'outils de codage est composée de boutons qui vous permettent d'effectuer de nombreuses opérations de
codage standard (réduction et agrandissement des sélections de code, mise en évidence de code non valide, application
et suppression de commentaires, mise en retrait de code, insertion de fragments de code récemment utilisés, etc.) La
barre d'outils Codage s'affiche à la verticale sur la gauche de la fenêtre de document. Elle n'est visible que lorsque le
mode Code est affiché.
Vous ne pouvez pas détacher ni déplacer la barre d'outils Codage, mais vous pouvez la masquer (Affichage > Barres
d'outils > Codage).
Vous pouvez également modifier la barre d'outils de codage pour afficher des boutons supplémentaires (Retour
automatique à la ligne, Caractères cachés et Retrait auto) ou pour masquer des boutons que vous ne souhaitez pas
utiliser. Néanmoins, vous devez pour cela modifier le fichier XML qui génère la barre d'outils. Pour plus
d'informations, voir Extension de Dreamweaver.
Voir aussi
« Affichage des barres d'outils » à la page 22
« Insertion de code avec la barre d'outils de codage » à la page 321
Dernière mise à jour le 4/5/2011
13
UTILISATION DE DREAMWEAVER
Espace de travail
Présentation de la barre d'état
La barre d'état, située dans le bas de la fenêtre de document, fournit des informations supplémentaires sur le document
en cours de création.
A. Sélecteur de balises B. Outil Sélectionner C. Outil Main D. Outil Zoom E. Définir le facteur de zoom F. Menu contextuel Taille de fenêtre
G. Taille du document et estimation du temps de téléchargement H. Indicateur de codage
Sélecteur de balises Affiche la hiérarchie des balises entourant la sélection active. Cliquez sur une balise quelconque
dans la hiérarchie pour la sélectionner avec son contenu. Cliquez sur <body> pour sélectionner tout le corps du
document. Pour définir les attributs class ou id d'une balise dans le sélecteur de balises, cliquez avec le bouton droit
de la souris (Windows) ou en maintenant la touche Option enfoncée (Macintosh) sur la balise et choisissez une classe
ou un ID dans le menu contextuel.
Outil Sélectionner Active et désactive l'outil Main.
Outil Main Permet de cliquer sur le document et de le glisser jusque dans la fenêtre de document.
Outil Zoom et menu Définir le facteur de zoom Permettent de définir un taux d'agrandissement pour votre document.
Menu contextuel Taille de fenêtre Non disponible en mode Code. Permet de redimensionner la fenêtre du document
selon des dimensions prédéfinies ou personnalisées. Lorsque vous modifiez la taille d'affichage d'une page en mode
Création ou Affichage en direct, seules les dimensions de la vue changent. La taille du document n'est pas modifiée.
Outre les formats prédéterminés et personnalisés, Dreamweaver répertorie également les tailles spécifiées dans une
requête multimédia. Lorsque vous sélectionnez une taille correspondant à une requête multimédia, Dreamweaver
utilise cette requête multimédia pour afficher la page. Vous pouvez également modifier l'orientation de la page pour
prévisualiser la page pour les appareils mobiles sur lesquels la disposition change selon la façon dont l'appareil est tenu.
Taille du document et temps de téléchargement Fournit une estimation de la taille du document et du temps de
téléchargement de la page, ainsi que la liste de tous les fichiers dépendants, tels que les images et autres fichiers de
données.
Indicateur de codage Affiche le codage du texte du document actuel.
Voir aussi
« Définition de la taille des fenêtres et de la vitesse de connexion » à la page 21
« Zoom avant et arrière » à la page 224
« Redimensionnement de la fenêtre de document » à la page 20
« Définition des préférences de durée et de taille des téléchargements » à la page 226
Dernière mise à jour le 4/5/2011
14
UTILISATION DE DREAMWEAVER
Espace de travail
Présentation de l'inspecteur Propriétés
L'inspecteur Propriétés permet d'examiner et de modifier les propriétés les plus fréquentes de l'élément de la page
sélectionnée, tel que le texte ou un objet inséré. Le contenu de l'inspecteur Propriétés varie en fonction de l'élément
sélectionné. Par exemple, si vous sélectionnez une image de la page, l'inspecteur Propriétés se modifie pour montrer
les propriétés de l'image (telles que le chemin d'accès au fichier, la largeur et la hauteur de l'image, la bordure autour
de l'image, s'il y a lieu, et ainsi de suite).
L'inspecteur Propriétés se trouve par défaut sur le bord inférieur de l'espace de travail. Vous pouvez toutefois le
détacher et en faire un panneau flottant dans l'espace de travail.
Voir aussi
« Ancrage et annulation d’ancrage de panneaux » à la page 25
« Utilisation de l'inspecteur Propriétés » à la page 23
Présentation du panneau Insertion
Les boutons qui composent le panneau Insertion permettent de créer et d'insérer des objets, tels que des tableaux, des
images et des liens. Ces boutons sont organisés en plusieurs catégories que vous pouvez afficher en alternance en
choisissant la catégorie désirée dans le menu Catégorie. D'autres catégories s'affichent lorsque le document sélectionné
contient du code serveur, tel que des documents ASP ou CFML.
Dernière mise à jour le 4/5/2011
15
UTILISATION DE DREAMWEAVER
Espace de travail
Certaines catégories disposent de boutons ouvrant des menus contextuels. Lorsque vous sélectionnez une option dans
l'un d'eux, l'action associée est attribuée par défaut au bouton. Par exemple, si vous sélectionnez le menu contextuel du
bouton Image, puis Espace réservé pour l'image, la prochaine fois que vous cliquerez sur le bouton Image,
Dreamweaver insérera un espace réservé pour l'image. Lorsque vous sélectionnez une nouvelle option dans l'un de ces
menus, l'action attribuée par défaut au bouton change.
Le panneau Insertion est organisé en différentes catégories, comme suit :
Catégorie Commun Permet de créer et d'insérer les objets les plus couramment utilisés, comme les images et les
tableaux.
Catégorie Mise en forme Permet d'insérer des tableaux, des éléments de tableau, des balises div, des cadres et des
widgets Spry. Vous pouvez choisir deux modes pour les tableaux : Standard (par défaut) et Développé.
Catégorie Formulaires Contient des boutons permettant de créer des formulaires et d'insérer des éléments de
formulaire, dont des widgets de validation Spry.
Catégorie Données Permet d'insérer des éléments de données Spry et d'autres éléments dynamiques, tels que des jeux
d'enregistrements, des régions répétées et des formulaires d'insertion et de mise à jour d'enregistrements.
Catégorie Spry Contient des boutons permettant de créer des pages Spry, avec des objets de données Spry et des
widgets.
La catégorie InContext Editing Contient des boutons destinés à la création de pages InContext Editing, dont des
boutons pour les régions modifiables, pour les régions répétées et pour la gestion des classes CSS.
Catégorie Texte Permet d'insérer diverses balises de formatage de texte et de liste, telles que b, em, p, h1 et ul.
Catégorie Favoris Permet de regrouper et d'organiser, dans un espace commun, les boutons du panneau Insertion que
vous utilisez le plus fréquemment.
Catégories de code serveur Disponibles uniquement pour les pages utilisant un langage serveur spécifique, comme
ASP, CFML Basic, CFML Flow, CFML Advanced, et PHP. Ces catégories proposent des objets de type code serveur
que vous pouvez insérer en mode Code.
Contrairement aux autres panneaux de Dreamweaver, vous pouvez retirer le panneau Insertion de son emplacement
d'ancrage par défaut et le placer à l'horizontale, au-dessus de la fenêtre de document. Dans ce cas, ce panneau se
transforme en barre d'outils, même s'il est impossible de la masquer et de l'afficher comme vous le feriez pour les autres
barres d'outils.
Voir aussi
« Utilisation du panneau Insertion » à la page 213
« Création de pages Spry visuellement » à la page 438
Dernière mise à jour le 4/5/2011
16
UTILISATION DE DREAMWEAVER
Espace de travail
Présentation du panneau Fichiers
Vous pouvez utiliser les panneaux Fichiers pour afficher et exploiter les fichiers dans votre site Dreamweaver.
Lorsque vous affichez des sites, des fichiers ou des dossiers dans le panneau Fichiers, vous pouvez modifier la taille de
la zone d'affichage. Vous pouvez également agrandir ou réduire le panneau Fichiers. Dans sa forme réduite, le panneau
Fichiers affiche le contenu du site local, du site distant, du serveur d'évaluation ou du référentiel SVN sous la forme
d'une liste de fichiers. Dans sa forme développée, il affiche d'une part le site local et d'autre part le site distant, le serveur
d'évaluation ou le référentiel SVN.
Pour les sites Dreamweaver, il est également possible de personnaliser le panneau Fichiers en modifiant la vue (site
local ou distant) qui s'affiche par défaut dans le panneau réduit.
(CS 5.5) Le panneau Fichiers interagit avec le serveur à intervalles réguliers afin de mettre à jour son contenu. Un
message d'erreur s'affiche lorsque vous tentez d'effectuer une action dans le panneau Fichiers alors qu'il exécute une
telle mise à jour automatique. Pour désactiver l'option de mise à jour automatique, ouvrez le menu Options du
panneau Fichiers et désactivez l'option Mise à jour automatique du menu Affichage.
Pour mettre à jour manuellement le contenu du panneau, utilisez le bouton Actualiser dans le panneau. Toutefois,
l'état d'extraction actuel des fichiers n'est mis à jour que lorsque la mise à jour automatique est activée.
Voir aussi
« Utilisation des fichiers depuis le panneau Fichiers » à la page 80
Dernière mise à jour le 4/5/2011
17
UTILISATION DE DREAMWEAVER
Espace de travail
Présentation du panneau Styles CSS
Il vous permet de suivre les règles CSS et les propriétés qui affectent un élément de page sélectionné (mode Current
(ou Sélection)), ou les règles et les propriétés qui affectent l'ensemble d'un document (mode All (ou Tout)). Un bouton
bascule placé sur la partie supérieure du panneau Styles CSS vous permet de passer d'un mode à l'autre. Le panneau
Styles CSS vous permet de modifier les propriétés CSS dans les deux modes.
Vous pouvez redimensionner n'importe quel volet en faisant glisser les cadres entre les volets.
En mode Current (Sélection), le panneau Styles CSS présente trois volets : un volet Summary for Selection
(Récapitulatif de la sélection) qui présente les propriétés CSS de la sélection en cours dans le document; un volet Rules
(Règles) qui précise l'emplacement des propriétés sélectionnées (ou une cascade de règles pour la balise sélectionnée,
selon votre sélection); et un volet Propriétés qui vous permet de modifier les propriétés CSS de la règle définissant la
sélection.
En mode All (Tout), le panneau Styles CSS présente deux volets : un volet All Rules (Toutes les règles) (en haut) et un
volet Propriétés (en bas). Le volet Toutes les règles présente la liste des règles définies dans le document actif, ainsi que
l'ensemble des règles définies dans les feuilles de styles jointes à ce document. Le volet Propriétés permet de modifier
les propriétés CSS de toute règle sélectionnée dans le volet Toutes les règles.
Toute modification apportée dans le volet Propriétés s'applique immédiatement, ce qui vous permet d'avoir un aperçu
direct de votre travail.
Voir aussi
« Création et gestion de CSS » à la page 134
Dernière mise à jour le 4/5/2011
18
UTILISATION DE DREAMWEAVER
Espace de travail
Présentation des guides visuels
Dreamweaver met à votre disposition plusieurs types de guides visuels pour vous aider à concevoir vos documents et
à prévoir approximativement l'aspect qu'ils auront dans un navigateur. Vous pouvez effectuer les opérations suivantes :
• Adapter instantanément la taille de la fenêtre de document à un format d'affichage donné, afin de contrôler la
disposition des éléments sur la page
• Utiliser un tracé d'image en arrière-plan de la page, de manière à pouvoir reproduire plus aisément une mise en
forme créée dans une application graphique telle que Adobe® Photoshop® ou Adobe® Fireworks®.
• Utiliser des règles et des guides comme repère visuel pour le positionnement et le redimensionnement précis des
éléments de page
• Utilisez la grille afin d'effectuer un positionnement et un redimensionnement précis des éléments à positionnement
absolu (PA).
Si la fonction d'alignement automatique est activée, les éléments PA s'alignent automatiquement sur le croisillon
de grille le plus proche lorsqu'ils sont déplacés ou redimensionnés (d'autres objets, par exemple les images et les
paragraphes, ne sont pas aimantés par la grille). L'alignement fonctionne même si la grille n'est pas visible.
Voir aussi
« Utilisation d'assistances visuelles pour la mise en forme » à la page 180
Utilisateurs de GoLive
Si vous utilisez GoLive jusqu'ici et que vous souhaitez passer à l'utilisation de Dreamweaver, vous pouvez consultez
une présentation en ligne de l'espace de travail et du déroulement du travail dans Dreamweaver ainsi qu'une discussion
sur les moyens de faire migrer votre site vers Dreamweaver.
Voir aussi
Didacticiel consacré à Dreamweaver pour les utilisateurs de GoLive
Utilisation de la fenêtre de document
Basculement d'un mode à un autre dans la fenêtre de document
Vous pouvez afficher un document dans la fenêtre de document en mode Code, en mode Code fractionné, en mode
Création, en modes Code et Création (mode fractionné) et en mode Affichage en direct. Vous pouvez également
afficher le mode Code fractionné ou les modes Code et Création en les séparant à l'horizontale ou à la verticale. Le
mode d'affichage à l'horizontale est le mode par défaut.
Activation du mode Code
❖ Effectuez l'une des opérations suivantes :
• Choisissez Affichage > Code.
• Dans la barre d'outils du document, cliquez sur le bouton Afficher le mode Code.
Dernière mise à jour le 4/5/2011
19
UTILISATION DE DREAMWEAVER
Espace de travail
Activation du mode Code fractionné
Le mode Code fractionné scinde le document en deux parties, ce qui permet de travailler sur deux sections du code en
même temps.
❖ Choisissez Affichage > Fractionner le code.
Activation du mode Création
❖ Effectuez l'une des opérations suivantes :
• Choisissez Affichage > Création.
• Dans la barre d'outils Document, cliquez sur le bouton Afficher le mode Création.
Affichage à la fois en modes Code et Création
❖ Effectuez l'une des opérations suivantes :
• Choisissez Affichage > Code et création.
• Dans la barre d'outils du document, cliquez sur le bouton Afficher les modes Code et Création.
Par défaut, le mode Code s'affiche en haut de la fenêtre de document et le mode Création en bas. Pour afficher le mode
Création en haut de la fenêtre, choisissez Affichage > Mode Création en haut.
Basculement entre les modes Code et Création
❖ Appuyez sur Ctrl + guillemet simple d'ouverture (').
Si les deux modes sont affichés simultanément dans la fenêtre de document, ce raccourci clavier permet d'activer tour
à tour les deux modes.
Fractionnement vertical des modes
Cette option n'est disponible que pour le mode Code fractionné et les modes Code et Création (mode fractionné). Elle
est désactivée pour le mode Code et le mode Création.
1 Veillez à bien être en mode Code fractionné (Affichage > Code fractionné) ou en modes Code et Création
(Affichage > Code et Création).
2 Choisissez Affichage > Fractionner à la verticale.
Si vous êtes en modes Code et Création, vous pouvez afficher le mode Création sur la gauche (Affichage > Mode
Création à gauche).
Voir aussi
« Présentation de la fenêtre de document » à la page 8
« Prévisualisation des pages en mode Affichage en direct » à la page 299
Affichage en cascade ou en mosaïque des fenêtres de document
Si plusieurs documents sont ouverts à la fois, vous pouvez les afficher en cascade ou en mosaïque.
Dernière mise à jour le 4/5/2011
20
UTILISATION DE DREAMWEAVER
Espace de travail
Voir aussi
« Gestion des fenêtres et des panneaux » à la page 24
« Affichage de documents à onglets (Dreamweaver sur Macintosh) » à la page 30
Affichage en cascade des fenêtres de document
❖ Choisissez Fenêtre > Cascade.
Affichage en mosaïque des fenêtres de document
• (Windows) Sélectionnez Fenêtre > Mosaïque horizontale ou Fenêtre > Mosaïque verticale.
• (Macintosh) Sélectionnez Fenêtre > Mosaïque.
Redimensionnement de la fenêtre de document
La barre d'état affiche les dimensions de la fenêtre de document sélectionnée (en pixels). Pour qu'une page s'affiche de
façon optimale à une taille spécifique, vous pouvez régler la fenêtre de document sur l'une des tailles prédéterminées,
modifier ces tailles prédéterminées ou en créer de nouvelles.
Lorsque vous modifiez la taille d'affichage d'une page en mode Création ou Affichage en direct, seules les dimensions
de la vue changent. La taille du document n'est pas modifiée.
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.
Redimensionnement de la fenêtre de document selon une taille prédéterminée
❖ Choisissez l'une des tailles affichées dans le menu contextuel Taille de fenêtre qui se trouve dans la barre d'état de
la fenêtre de document. Dreamweaver CS5.5 et les versions ultérieures fournissent une plus vaste liste de choix, y
compris des options pour les principaux périphériques mobiles (comme illustré ci-dessous).
La taille de la fenêtre correspond aux dimensions internes de la fenêtre de navigateur, bordures exclues ; la taille du
moniteur ou le périphérique mobile est indiqué sur la droite.
Pour un redimensionnement moins précis des fenêtres, utilisez les méthodes standard de votre système d'exploitation,
par exemple, en faisant glisser le coin inférieur droit d'une fenêtre.
Remarque : (Windows uniquement) Les documents dans la fenêtre de document sont agrandis par défaut ; il est
impossible de les redimensionner lorsqu'ils sont agrandis. Pour annuler l'affichage du document en mode agrandi, cliquez
sur l'icône
dans le coin supérieur droit du document.
Dernière mise à jour le 4/5/2011
21
UTILISATION DE DREAMWEAVER
Espace de travail
Modification des valeurs figurant dans le menu contextuel Taille de fenêtre
1 Cliquez sur Modifier les tailles dans le menu contextuel Taille de fenêtre.
2 Cliquez sur une valeur de largeur ou de hauteur dans la liste Taille de la fenêtre, puis entrez une nouvelle valeur.
Pour que la fenêtre de document adopte uniquement une largeur spécifique sans que sa hauteur change, sélectionnez
la valeur de hauteur et supprimez-la.
3 Cliquez sur la zone Description pour saisir un texte décrivant la taille spécifique.
Ajout d'un nouveau format d'affichage au menu contextuel Taille de fenêtre
1 Cliquez sur Modifier les tailles dans le menu contextuel Taille de fenêtre.
2 Cliquez dans l'espace vierge qui apparaît sous la dernière valeur de la colonne Largeur.
3 Indiquez les valeurs souhaitées pour Largeur et Hauteur.
Pour définir soit la largeur, soit la hauteur, laissez l'un des champs vide.
4 Cliquez dans le champ Description pour saisir un texte décrivant la taille ajoutée.
Par exemple, vous pouvez entrer SVGA ou PC standard à côté de l'entrée correspondant à un moniteur d'une
résolution de 800 x 600 pixels, et Mac 17 à côté de l'entrée correspondant à un moniteur d'une résolution de 832 x 624
pixels. Diverses résolutions peuvent être réglées sur la plupart des moniteurs.
Définition de la taille des fenêtres et de la vitesse de connexion
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
2 Choisissez Barre d'état (CS5) ou Tailles des fenêtres (CS5.5 et versions ultérieures) dans la liste de catégories sur la
gauche.
3 Parmi les options suivantes, définissez celles de votre choix :
Taille de la fenêtre Permet de personnaliser les tailles de fenêtre qui s'affichent dans le menu contextuel de la barre
d'état.
Vitesse de connexion Détermine la vitesse de connexion (exprimée en kilobits par seconde) utilisée pour calculer le
temps de téléchargement. Le temps de téléchargement de la page est indiqué dans la barre d'état. Celui des images est
affiché dans l'inspecteur Propriétés lorsqu'une image est sélectionnée dans la fenêtre de document.
Voir aussi
« Présentation de la barre d'état » à la page 13
« Redimensionnement de la fenêtre de document » à la page 20
Rapports dans Dreamweaver
Dans Dreamweaver, vous pouvez exécuter des rapports afin de rechercher ou de tester des contenus ou encore de
corriger des erreurs. Vous pouvez générer les types de rapports suivants :
Rechercher Permet de rechercher des balises, des attributs ou une portion de texte spécifique dans les balises.
Référence Permet de rechercher des informations de référence.
Validation Permet de rechercher les erreurs de code ou de syntaxe.
Navigateurs compatibles Permet de tester le code HTML de vos documents afin de déterminer s'il contient des balises
ou des attributs non pris en charge par les navigateurs cibles.
Dernière mise à jour le 4/5/2011
22
UTILISATION DE DREAMWEAVER
Espace de travail
Vérificateur de lien Permet de rechercher et de corriger les liens brisés, externes et orphelins.
Rapports du site Permet d'améliorer le déroulement du travail et de tester les attributs HTML dans votre site. Les
rapports sur le déroulement du travail incluent les fonctions Extrait par, Modifiés récemment et Design Notes ; les
rapports HTML incluent les balises de polices imbriquées combinables, l'accessibilité, les textes secondaires
manquants, les balises imbriquées redondantes, les balises vides amovibles et les documents sans nom.
Journal FTP Permet d'avoir une vue d'ensemble des transferts de fichiers en FTP.
Débogage du serveur Permet de consulter des informations afin de déboguer une application Adobe® ColdFusion®.
Voir aussi
« Recherche de balises, d'attributs ou de chaînes de texte dans le code » à la page 332
« Utilisation des documents de référence sur les langages » à la page 333
« Test de votre site » à la page 112
« Validation des documents XML » à la page 338
« Vérification de la compatibilité du navigateur » à la page 337
« Recherche de liens rompus, externes et orphelins » à la page 296
« Placement de fichiers sur un serveur distant » à la page 88
« Acquisition de fichiers depuis un serveur distant » à la page 87
« Utilisation du débogueur ColdFusion (Windows uniquement) » à la page 341
Utilisation de barres d'outils, d'inspecteurs et de menus
contextuels
Affichage des barres d'outils
Utilisez les barres d'outils document et standard pour effectuer des opérations de modification standard liées au
document ; utilisez la barre d'outils codage pour insérer du code rapidement ; et utilisez la barre d'outils rendu de style
pour afficher votre page comme elle apparaîtrait dans différents types de médias. Vous pouvez afficher ou masquer ces
barres selon qu'elles vous sont utiles ou non.
• Sélectionnez Affichage > Barres d'outils, puis sélectionnez la barre d'outils voulue.
• Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh)
sur l'une des barres d'outils et sélectionnez la barre d'outils dans le menu contextuel.
Remarque : Pour afficher la barre d'outils de codage dans l'Inspecteur de code (Fenêtre > Inspecteur de code), vous devez
la sélectionner dans le menu déroulant des options d'affichage situé en haut de l'inspecteur.
Voir aussi
« Présentation de la barre d'outils de document » à la page 9
« Présentation de la barre d'outils standard » à la page 10
« Présentation de la barre d'outils de codage » à la page 12
« Présentation de la barre d'outils Rendu de style » à la page 11
Dernière mise à jour le 4/5/2011
23
UTILISATION DE DREAMWEAVER
Espace de travail
Utilisation 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é.
Pour accéder à l'aide relative à un inspecteur Propriétés spécifique, cliquez sur le bouton d'aide dans son coin supérieur
droit, ou choisissez Aide dans son menu Options.
Remarque : L'inspecteur de balises permet d'afficher et de modifier les attributs associés aux propriétés d'une balise.
Voir aussi
« Présentation de l'inspecteur Propriétés » à la page 14
« Définition des propriétés de texte dans l'inspecteur Propriétés » à la page 236
« Ancrage et annulation d’ancrage de panneaux » à la page 25
« Modification d'attributs dans l'inspecteur de balises » à la page 343
Affichage ou masquage de l'inspecteur Propriétés
❖ Choisissez Fenêtre > Propriétés.
Développement ou réduction de l'inspecteur Propriétés
❖ Cliquez sur la flèche d'agrandissement dans l'angle inférieur droit de l'inspecteur Propriétés.
Affichage et modification des propriétés d'un élément de page
1 Sélectionnez l'élément de la page dans la fenêtre de document.
Si nécessaire, développez l'inspecteur Propriétés afin que toutes les propriétés de l'élément sélectionné puissent
apparaître.
2 Modifiez les propriétés de votre choix dans l'inspecteur Propriétés.
Remarque : Pour obtenir des informations sur des propriétés particulières, sélectionnez un élément dans la fenêtre de
document, puis cliquez sur l'icône Aide (?) dans le coin supérieur droit de l'inspecteur Propriétés.
3 Si les changements ne s'appliquent pas immédiatement dans la fenêtre de document, appliquez-les d'une des façons
suivantes :
• Cliquez hors des champs de texte de modification des propriétés.
• Appuyez sur la touche Entrée (Windows) ou Retour (Macintosh).
• Appuyez sur la touche de tabulation pour passer à une autre propriété.
Utilisation des menus contextuels
Les menus contextuels vous permettent d'accéder rapidement aux commandes et propriétés les plus utiles relatives à
l'objet ou à la fenêtre avec lesquels vous travaillez. Les menus contextuels répertorient uniquement les commandes en
rapport avec la sélection en cours.
1 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur
l'objet ou la fenêtre qui vous intéresse.
Dernière mise à jour le 4/5/2011
24
UTILISATION DE DREAMWEAVER
Espace de travail
2 Choisissez une commande dans le menu contextuel.
Personnalisation de l'espace de travail de CS5
Gestion des fenêtres et des panneaux
Pour créer un espace de travail personnalisé, vous déplacez et manipulez les fenêtres de document et les panneaux.
Vous pouvez également enregistrer des espaces de travail, puis passer de l’un à l’autre. Dans Fireworks, renommer les
espaces de travail personnalisés peut provoquer un comportement inattendu.
Remarque : les exemples suivants sont basés sur Photoshop. L’espace de travail est le même dans tous les produits.
Réorganisation, ancrage ou déplacement des fenêtres de document
Les fenêtres de document comportent des onglets lorsque plusieurs fichiers sont ouverts.
• Pour modifier l’ordre des onglets de la fenêtre de document, faites glisser un onglet de la fenêtre à l’emplacement
voulu dans le groupe.
• Pour annuler l’ancrage d’une fenêtre de document à un groupe de fenêtres, faites glisser l’onglet de cette fenêtre
hors du groupe.
Dernière mise à jour le 4/5/2011
25
UTILISATION DE DREAMWEAVER
Espace de travail
Remarque : dans Photoshop, vous pouvez également sélectionner Fenêtre > Réorganiser > Afficher dans une fenêtre
flottante pour afficher une seule fenêtre flottante de document ou Fenêtre > Réorganiser > Tout afficher dans des
fenêtres flottantes pour afficher simultanément toutes les fenêtres flottantes de document. Pour plus d’informations,
voir la note technique kb405298.
Remarque : Dreamweaver ne prend pas en charge l’ancrage des fenêtres de document ni son annulation. Utilisez le
bouton Réduire de la fenêtre de document pour créer des fenêtres flottantes (sous Windows), ou Fenêtre > Mosaïque
verticale pour créer des fenêtres de document côte à côte. Pour plus d’informations sur cette rubrique, recherchez
« Mosaïque verticale » dans l’aide de Dreamweaver. Le flux de travaux diffère légèrement pour les utilisateurs
Macintosh.
• Pour ancrer une fenêtre de document à un groupe de fenêtres de document distinct, faites glisser cette fenêtre dans
le groupe.
• Pour créer des groupes de documents empilés ou juxtaposés, faites glisser la fenêtre vers l’une des zones de largage
situées en haut, en bas ou sur les côtés d’une autre fenêtre. Vous pouvez également sélectionner une disposition
pour le groupe en utilisant le bouton Disposition de la barre d’application.
Remarque : certains produits ne prennent pas en charge cette fonctionnalité. Cependant, votre produit peut présenter
des commandes Cascade et Mosaïque (ou Juxtaposer), sous le menu Fenêtre, pour vous permettre d’organiser vos
documents.
• Dans un groupe à onglets, pour passer à un autre document lors du glissement d’une sélection, faites glisser cette
sélection sur l’onglet du document souhaité pendant un moment.
Remarque : certains produits ne prennent pas en charge cette fonctionnalité.
Ancrage et annulation d’ancrage de panneaux
Un dock est un ensemble de panneaux ou de groupes de panneaux affichés ensemble, généralement en position
verticale. Pour ancrer et annuler l’ancrage des panneaux, insérez-les dans le dock et déplacez-les hors du dock.
• Pour ancrer un panneau, cliquez sur l’onglet correspondant et faites-le glisser dans le dock, au-dessus, sous ou entre
d’autres panneaux.
• Pour ancrer un groupe de panneaux, cliquez sur sa barre de titre (barre vide de couleur unie située au-dessus des
onglets) et faites-le glisser dans le dock.
• Pour supprimer un panneau ou un groupe de panneaux, faites-le glisser en dehors du dock en cliquant sur l’onglet
ou la barre de titre. Vous pouvez faire glisser l’élément vers un autre dock ou le rendre flottant.
Déplacement du panneau Navigation vers un nouveau dock ; cette opération est indiquée par une surbrillance verticale bleue.
Dernière mise à jour le 4/5/2011
26
UTILISATION DE DREAMWEAVER
Espace de travail
Panneau Navigation dans son propre dock
Vous pouvez faire en sorte que les panneaux n’occupent pas la totalité de l’espace disponible dans un dock. Faites
glisser le bord inférieur du dock vers le haut de sorte qu’il ne coïncide plus avec le bord de l’espace de travail.
Déplacement de panneaux
Lorsque vous déplacez des panneaux, des zones de largage en surbrillance bleue apparaissent : il s’agit des zones dans
lesquelles vous pouvez déplacer le panneau. Vous pouvez, par exemple, déplacer un panneau vers le haut ou vers le bas
en le faisant glisser sur la fine zone de largage bleue située au-dessus ou sous un autre panneau. Si vous faites glisser le
panneau vers un emplacement autre qu’une zone de largage, ce dernier flotte dans l’espace de travail.
Remarque : la position de la souris active la zone de largage (au lieu de la position du panneau). Si la zone de largage ne
s'affiche pas, faites glisser la souris à l'emplacement où devrait se situer la zone de largage.
• Pour déplacer un panneau, faites-le glisser en cliquant sur son onglet.
• Pour déplacer un groupe de panneaux, faites glisser la barre de titre.
A
B
C
La fine zone de largage bleue indique que le panneau Couleur va être ancré seul au-dessus du groupe de panneaux Calques.
A. Barre de titre B. Onglet C. Zone de largage
Pour empêcher l’ancrage d’un panneau, appuyez sur la touche Ctrl (Windows) ou Commande (Mac OS) lors de son
déplacement. Pour annuler l’opération, appuyez sur la touche Echap lors du déplacement du panneau.
Ajout et suppression de panneaux
Lorsque vous supprimez tous les panneaux d’un dock, ce dernier disparaît. Vous pouvez créer un dock en déplaçant
les panneaux vers le bord droit de l’espace de travail jusqu’à ce qu’une zone de largage soit visible.
• Pour supprimer un panneau, cliquez sur son onglet avec le bouton droit de la souris (Windows) ou en appuyant
sur la touche Contrôle (Mac), puis sélectionnez l’option Fermer ; vous pouvez également le désélectionner dans le
menu Fenêtre.
• Pour ajouter un panneau, sélectionnez-le dans le menu Fenêtre et ancrez-le à l’emplacement de votre choix.
Dernière mise à jour le 4/5/2011
27
UTILISATION DE DREAMWEAVER
Espace de travail
Manipulation de groupes de panneaux
• Pour déplacer un panneau dans un groupe, faites glisser son onglet vers la zone de largage en surbrillance située
dans le groupe.
Ajout d’un panneau à un groupe
• Pour réorganiser les panneaux d’un groupe, faites glisser l’onglet du panneau de votre choix vers son nouvel
emplacement.
• Pour rendre un panneau flottant, faites-le glisser en dehors du groupe au moyen de son onglet.
• Pour déplacer un groupe, faites glisser la barre de titre (zone située au-dessus des onglets).
Empilage de panneaux flottants
Lorsque vous faites sortir un panneau de son dock et que vous le placez en dehors de toute zone de largage, ce panneau
flotte dans l’espace de travail. Un panneau flottant peut être placé à n’importe quel endroit dans l’espace de travail.
Vous pouvez empiler des panneaux ou groupes de panneaux flottants de sorte qu’ils se comportent comme une seule
entité lorsque vous faites glisser la barre de titre supérieure.
Panneaux empilés flottants
• Pour empiler des panneaux flottants, cliquez sur un onglet pour faire glisser le panneau correspondant vers la zone
de largage située au bas d’un autre panneau.
• Pour modifier l’ordre d’empilage, cliquez sur un onglet afin de faire glisser le panneau correspondant vers le haut
ou vers le bas.
Remarque : prenez soin de « déposer » l’onglet sur l’étroite zone de largage située entre les panneaux, plutôt que sur
la large zone de largage située dans une barre de titre.
• Pour rendre un panneau ou groupe de panneaux de la pile flottant, déplacez-le hors de la pile au moyen de son
onglet ou de sa barre de titre.
Redimensionnement des panneaux
• Pour réduire ou agrandir un panneau, un groupe de panneaux ou une pile de panneaux, cliquez deux fois sur un
onglet. Vous pouvez également double-cliquer sur la zone d’onglets (l’espace vide situé à côté des onglets).
• Pour redimensionner un panneau, faites glisser l’un de ses côtés. Cette méthode de redimensionnement ne
fonctionne pas toujours, notamment avec le panneau Couleur de Photoshop.
Réduction et développement des icônes de panneaux
Vous pouvez réduire des panneaux à la taille d’icônes afin de limiter l’encombrement de l’espace de travail. Dans
certains cas, les panneaux sont réduits de la sorte dans l’espace de travail par défaut.
Dernière mise à jour le 4/5/2011
28
UTILISATION DE DREAMWEAVER
Espace de travail
Panneaux réduits à la taille d’icônes
Panneaux agrandis
• Pour réduire ou développer toutes les icônes de panneau d’une colonne, cliquez sur la double flèche située dans la
partie supérieure du dock.
• Pour développer une seule icône de panneau, cliquez sur cette dernière.
• Pour redimensionner les icônes de panneau afin de voir les icônes uniquement (et non les libellés), réglez la largeur
du dock jusqu’à ce que le texte ne soit plus visible. Pour afficher à nouveau le texte, augmentez la largeur du dock.
• Pour réduire à la taille d’une icône un panneau qui a été développé, cliquez sur son onglet, sur son icône ou sur la
double flèche affichée dans sa barre de titre.
Dans certaines applications, si vous sélectionnez l’option Réduction automatique des panneaux d’icônes dans les
préférences d’interface ou les options d’interface utilisateur, une icône de panneau développée est réduite
automatiquement lorsque vous cliquez en dehors de cette dernière.
• Pour ajouter un panneau flottant ou un groupe de panneaux à un dock d’icônes, faites-le glisser au moyen de son
onglet ou de sa barre de titre (les panneaux sont réduits automatiquement à la taille d’icônes lorsque vous les ajoutez
à un dock d’icônes).
• Pour déplacer une icône de panneau (ou un groupe d’icônes de panneau), faites-la glisser. Vous pouvez déplacer
des icônes de panneau vers le haut et vers le bas dans le dock, dans d’autres docks (elles apparaissent dans le style
du panneau de ce dock) ou en dehors du dock (elles apparaissent sous la forme d'icônes flottantes).
Enregistrement et basculement d’un espace de travail à l’autre
En enregistrant la taille et la position actuelles des panneaux comme espace de travail nommé, vous gardez la
possibilité de restaurer cet espace par la suite, et ce, même si vous avez déplacé ou fermé un panneau. Les noms des
espaces de travail enregistrés sont visibles dans le sélecteur d’espace de travail de la barre d’application.
Dernière mise à jour le 4/5/2011
29
UTILISATION DE DREAMWEAVER
Espace de travail
Enregistrement d’un espace de travail personnalisé
1 Lorsque l’espace de travail se trouve dans la configuration que vous souhaitez enregistrer, utilisez l’une des
méthodes suivantes :
• (Illustrator) Choisissez la commande Fenêtre > Espace de travail > Enregistrer l’espace de travail.
• (Photoshop, Illustrator, InCopy) Choisissez la commande Fenêtre > Espace de travail > Nouvel espace de
travail.
• (Dreamweaver) Choisissez la commande Fenêtre > Présentation de l’espace de travail > Nouvel espace de
travail.
• (Flash) Choisissez la commande Nouvel espace de travail dans le sélecteur d’espace de travail de la barre
d’application.
• (Fireworks) Choisissez la commande Enregistrer la présentation active dans le sélecteur d’espace de travail de la
barre d’application.
2 Attribuez un nom à l’espace de travail.
3 (Photoshop, InDesign) Sélectionnez ensuite une ou plusieurs options dans la section Capture :
Position des panneaux Enregistre la position actuelle des panneaux (InDesign uniquement).
Raccourcis clavier Enregistre l’ensemble de raccourcis clavier actuel (Photoshop seulement).
Menus ou Personnalisation des menus Enregistre l’ensemble de menus actuels.
Affichage de l’espace de travail ou basculement d’un espace de travail à l’autre
❖ Sélectionnez un espace de travail dans le sélecteur d’espace de travail de la barre d’application.
Dans Photoshop, vous pouvez attribuer un raccourci clavier à chacun des espaces de travail pour pouvoir passer de
l’un à l’autre plus rapidement.
Suppression d’un espace de travail personnalisé
• Choisissez l’option Gérer les espaces de travail dans le sélecteur d’espace de travail de la barre d’application,
sélectionnez l’espace de travail, puis cliquez sur la commande Supprimer. (Cette option n’est pas disponible dans
Fireworks.)
• (Photoshop, InDesign, InCopy) Sélectionnez la commande Supprimer l’espace de travail dans le sélecteur d’espace
de travail.
• (Illustrator) Choisissez la commande Fenêtre > Espace de travail > Gérer les espaces de travail, sélectionnez l’espace
de travail, puis cliquez sur l’icône Supprimer.
• (Photoshop, InDesign) Choisissez la commande Fenêtre > Espace de travail > Supprimer l’espace de travail,
sélectionnez l’espace de travail, puis cliquez sur le bouton Supprimer.
Restauration de l’espace de travail par défaut
1 Sélectionnez l’espace de travail de base ou par défaut à l’aide du sélecteur situé dans la barre d’application. Pour
Fireworks, consultez l’article http://www.adobe.com/devnet/fireworks/articles/workspace_manager_panel.html.
Remarque : dans Dreamweaver, Designer correspond à l’espace de travail par défaut.
2 Pour Fireworks (Windows), supprimez les dossiers suivants :
Windows Vista \\utilisateur\<nom utilisateur>\AppData\Roaming\Adobe\Fireworks CS4\
Windows XP \\Documents and Settings\<nom utilisateur>\Application Data\Adobe\Fireworks CS4
Dernière mise à jour le 4/5/2011
30
UTILISATION DE DREAMWEAVER
Espace de travail
3 (PhotoShop, InDesign, InCopy) Choisissez la commande Fenêtre > Espace de travail > Réinitialiser [Nom de
l’espace de travail].
(Photoshop) Restauration d'une disposition d’espace de travail enregistrée
Dans Photoshop, les espaces de travail s’affichent automatiquement en fonction de leur dernière disposition, mais
vous pouvez restaurer la disposition d’origine des panneaux.
• Pour restaurer un espace de travail individuel, sélectionnez Fenêtre > Espace de travail > Réinitialiser Nom de
l’espace de travail.
• Pour restaurer tous les espaces de travail installés avec Photoshop, cliquez sur Restaurer les espaces de travail par
défaut dans les préférences d’interface.
Pour réorganiser l'ordre des espaces de travail de la barre d’application, faites-les glisser.
Affichage de documents à onglets (Dreamweaver sur Macintosh)
Vous pouvez afficher plusieurs documents dans une seule fenêtre de document avec des onglets qui identifient chacun
des documents. Vous pouvez aussi les afficher sous la forme d'une partie de l'espace de travail flottant dans laquelle
chaque document s'affiche dans sa propre fenêtre.
Ouverture d'un document à onglets dans une fenêtre séparée
❖ Cliquez en maintenant la touche Ctrl enfoncée sur l'onglet, puis sélectionnez Déplacer dans une nouvelle fenêtre
dans le menu contextuel.
Rassemblement de documents séparés dans des fenêtres à onglets
❖ Choisissez Fenêtre > Combiner en onglets.
Modification du paramètre de document à onglets par défaut
1 Sélectionnez Dreamweaver > Préférences, puis la catégorie Général.
2 Sélectionnez ou désélectionnez Ouvrir les documents dans des onglets et cliquez sur OK.
Dreamweaver ne modifie pas l'affichage des documents ouverts lorsque vous modifiez les préférences. En revanche,
une fois que vous avez sélectionné une nouvelle préférence, les documents ouverts s'affichent en fonction de cette
dernière.
Activation des icônes en couleur
Par défaut, Dreamweaver en version CS4 et ultérieures emploie des icônes en noir et blanc qui se transforment en
icônes en couleur lorsque vous laissez le pointeur de la souris au-dessus d'elles. Vous pouvez activer les icônes en
couleur de manière permanente, même quand le pointeur de la souris ne se trouve pas au-dessus d'elles.
❖ Effectuez l'une des opérations suivantes :
• Choisissez Affichage > Icônes en couleur.
• Basculez vers l'espace de travail Classique ou Codeur.
Pour désactiver l'affichage des icônes en couleur, désactivez l'option Icônes en couleur du menu Affichage, ou passez
à un espace de travail différent.
Dernière mise à jour le 4/5/2011
31
UTILISATION DE DREAMWEAVER
Espace de travail
Voir aussi
« Affichage de l’espace de travail ou basculement d’un espace de travail à l’autre » à la page 29
Masquage et affichage de l'écran d'accueil de Dreamweaver
L'écran d'accueil s'affiche lorsque vous démarrez Dreamweaver ou lorsqu'aucun document n'est ouvert. Vous pouvez
masquer l'écran d'accueil puis l'afficher de nouveau ultérieurement selon vos besoins. Lorsque l'écran d'accueil est
masqué et qu'aucun document n'est ouvert, la fenêtre de document est vide.
Masquage de l'écran d'accueil
❖ Sélectionnez l'option Ne plus afficher dans l'écran d'accueil.
Affichage de l'écran d'accueil
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
2 Dans la catégorie Général, activez l'option Afficher l'écran d'accueil.
A propos de la personnalisation de Dreamweaver dans les systèmes
multiutilisateurs
Dreamweaver peut être personnalisé selon les besoins, même dans les systèmes multiutilisateurs tels que Windows XP
ou Mac OS X.
Dreamweaver empêche que la configuration personnalisée d'un utilisateur n'affecte celle d'un autre. Pour ce faire, la
première fois que vous exécutez Dreamweaver sur l'un des systèmes multiutilisateurs reconnus, l'application crée des
copies de divers fichiers de configuration. Ces fichiers sont enregistrés dans un dossier vous appartenant.
Par exemple, sous Windows XP, ils se trouvent dans C:\Documents and Settings\nom d'utilisateur\Application
Data\Adobe\Dreamweaver\fr_FR\Configuration, un dossier qui est caché par défaut. Pour afficher les fichiers et
dossiers cachés, choisissez Outils > Options des dossiers dans l'Explorateurs Windows, cliquez sur l'onglet Affichage,
puis activez l'option Afficher les fichiers et dossiers cachés.
Sous Windows Vista, ils se trouvent dans C:\Utilisateurs\nom d'utilisateur\AppData\Roaming\Adobe\Dreamweaver
\fr_FR\Configuration, qui est caché par défaut. Pour afficher les fichiers et dossiers cachés, choisissez Outils > Options
des dossiers dans l'Explorateurs Windows, cliquez sur l'onglet Affichage, puis activez l'option Afficher les fichiers et
dossiers cachés.
Sous Mac OS X, ils sont situés dans votre dossier personnel, dans
Utilisateurs/nom_utilisateur/Bibliothèque/Application Support/Adobe/Dreamweaver /Configuration.
Si vous réinstallez ou mettez Dreamweaver à jour, Dreamweaver crée automatiquement des copies de sauvegarde des
fichiers de configuration existants. Ainsi, si vous avez personnalisé manuellement ces fichiers, vos modifications
restent disponibles.
Définition des préférences générales de Dreamweaver
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
2 Parmi les options suivantes, définissez celles de votre choix :
Ouvrir les documents dans des onglets Permet d'ouvrir tous les documents dans une seule fenêtre contenant des
onglets que vous utilisez pour passer d'un document à l'autre (Macintosh uniquement).
Dernière mise à jour le 4/5/2011
32
UTILISATION DE DREAMWEAVER
Espace de travail
Afficher l’écran d’accueil Affiche l'écran d'accueil de Dreamweaver lorsque vous démarrez Dreamweaver ou qu'aucun
document n'est ouvert.
Rouvrir les documents au démarrage Ouvre tous les documents qui étaient ouverts lorsque vous avez fermé
Dreamweaver. Si cette option n'est pas sélectionnée, Dreamweaver affiche l'écran d'accueil ou un écran vide au
démarrage (selon les paramètres définis pour Afficher l'écran d'accueil).
Avertir à l'ouverture de fichiers en lecture seule Vous informe lorsque le fichier que vous ouvrez est en lecture seule
(verrouillé). Vous pouvez déverrouiller/extraire le fichier, l'afficher en lecture seule ou annuler l'action.
Activer les fichiers associés Permet de savoir quels fichiers sont associés au document actuel (par exemple des fichiers
CSS ou JavaScript). Dreamweaver affiche un bouton pour chaque fichier associé en haut du document. Si vous cliquez
sur l'un de ces boutons, le fichier correspondant est ouvert.
Découvrir les fichiers à association dynamique Permet d'indiquer si les fichiers à association dynamique doivent
apparaître automatiquement dans la barre d'outils Fichiers associés, ou uniquement après une interaction manuelle.
Vous pouvez également désactiver la recherche de fichiers à association dynamique.
Mettre à jour les liens lors de la suppression de fichiers Détermine ce qui se passe lorsque vous déplacez, renommez
ou supprimez un document dans un site. Vous pouvez définir cette préférence de trois façons différentes: les liens sont
toujours automatiquement mis à jour, les liens ne sont jamais mis à jour ou un message vous demande s'il convient
d'exécuter une mise à jour (Voir « Mise à jour automatique des liens » à la page 290.)
Afficher la boîte de dialogue lors de l'insertion d'un objet Détermine si Dreamweaver vous invite à entrer des
informations supplémentaires lorsque vous insérez des images, des tableaux, des animations Shockwave et certains
autres objets à l'aide du panneau Insertion ou du menu Insertion. Si cette option est désactivée, aucune boîte de
dialogue ne s'affiche ; dans ce cas, précisez le fichier source pour les images, le nombre de lignes dans un tableau, etc.
dans l'inspecteur Propriétés. Lorsque vous insérez des images avec effet de survol ou du code HTML Fireworks, une
boîte de dialogue s'affiche toujours, quel que soit le réglage de cette option. (Pour remplacer temporairement ce
paramètre, appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant avec la souris lorsque
vous créez et insérez des objets.)
Activer l'entrée en ligne à deux octets Permet d'entrer un texte à deux octets directement dans la fenêtre de document,
si vous utilisez un environnement de développement ou un kit linguistique facilitant la saisie de texte à deux octets (les
caractères japonais, par exemple). Si cette option est désélectionnée, une fenêtre de saisie de texte s'affiche, dans
laquelle vous entrez et convertissez le texte à deux octets ; le texte apparaît dans la fenêtre de document après avoir été
accepté.
Passer en paragraphe normal après le titre Indique qu'en appuyant sur la touche Entrée (Windows) ou Retour
(Macintosh) à la fin d'un paragraphe de titre en mode d'affichage Création, vous créez un nouveau paragraphe indiqué
par une balise p. (Un paragraphe de titre est indiqué par une balise de titre, telle que h1 ou h2.) Lorsque cette option
est désactivée, en appuyant sur la touche Entrée ou Retour à la fin d'un paragraphe de titre, vous créez un nouveau
paragraphe indiqué par la même balise de titre (ce qui vous permet de saisir plusieurs titres à la suite les uns des autres,
puis d'ajouter les détails ultérieurement).
Autoriser plusieurs espaces consécutifs Indique qu'en entrant deux espaces ou plus en mode d'affichage Création,
vous créez des espaces insécables qui s'affichent sous forme de plusieurs espaces dans un navigateur. (Par exemple,
vous pouvez taper deux espaces entre les phrases, tout comme vous le faites sur une machine à écrire.) Cette option est
conçue principalement pour les personnes qui utilisent les traitements de texte. Lorsque cette option est désactivée, les
espaces multiples sont traités comme des espaces simples (car les navigateurs traitent les espaces multiples comme des
espaces simples).
Utiliser <strong> et <em> au lieu de <b> et <i> Détermine que Dreamweaver applique la balise strong lorsque vous
effectuez une action qui appliquerait normalement la balise b, et la balise em lorsque vous effectuez une action qui
appliquerait normalement la balise i. Ces actions incluent notamment le fait de cliquer sur les boutons Gras ou Italique
Dernière mise à jour le 4/5/2011
33
UTILISATION DE DREAMWEAVER
Espace de travail
de l'inspecteur Propriétés de texte en mode HTML et de choisir Format > Style > Gras ou Format > Style > Italique.
Pour utiliser les balises b et i dans vos documents, désélectionnez cette option.
Remarque : Le World Wide Web Consortium recommande d'éviter les balises b et i ; les balises strong et em fournissent
des informations plus sémantiques que les balises b et i.
Avertir lors du placement de régions modifiables dans des balises <p> ou <h1> - <h6> Indique si un message
d'avertissement s'affiche lorsque vous enregistrez un modèle Dreamweaver présentant une région modifiable dans une
balise de paragraphe ou d'en-tête. Le message vous informe que les utilisateurs ne pourront pas créer de paragraphes
supplémentaires dans la région. Cette option est activée par défaut.
Centrer Spécifie si vous voulez centrer des éléments à l'aide de divalign="center" ou de la balise center lorsque
vous cliquez sur le bouton Centrer de l'inspecteur Propriétés.
Remarque : L'utilisation de ces deux méthodes de centrage n'est plus recommandée depuis les spécifications de
HTML 4.01. Il est conseillé d'utiliser les feuilles de style CSS. Ces méthodes sont encore techniquement applicables à la
spécification XHTML 1.0 transitionnel, mais ne sont plus reconnues dans les spécifications XHTML 1.0 Strict.
Nombre maximum d'étapes d'historique Détermine le nombre maximal d'étapes que le panneau Historique conserve
et affiche. (la valeur par défaut doit être suffisante pour la plupart des utilisateurs). Si le nombre d'étapes dépasse la
valeur indiquée, les étapes les plus anciennes sont supprimées.
Pour plus d'informations, voir « Automatisation des tâches » à la page 276.
Dictionnaire orthographique Affiche la liste des dictionnaires disponibles. Si un dictionnaire contient plusieurs
dialectes ou conventions orthographiques (par exemple, l'anglais britannique et l'anglais américain), les dits dialectes
sont répertoriés individuellement dans le menu contextuel Dictionnaire.
Voir aussi
« Vue d'ensemble de la présentation de l'espace de travail » à la page 5
« Mise à jour automatique des liens » à la page 290
Définition des préférences de police pour les documents dans Dreamweaver
Le codage d'un document détermine la façon dont le document s'affiche dans un navigateur. Les préférences de polices
de Dreamweaver vous permettent d'utiliser un texte affiché dans la police et la taille de votre choix. Toutefois, les
polices sélectionnées dans la boîte de dialogue Préférences des polices n'influent que sur la façon dont les documents
s'affichent dans Dreamweaver. Elles n'ont aucun impact sur la façon dont ils s'affichent dans le navigateur d'un visiteur.
Pour modifier la façon dont les polices s'affichent dans un navigateur, vous devez modifier le texte à l'aide de
l'inspecteur Propriétés ou en appliquant une règle CSS.
Pour plus d'informations sur la définition d'un codage par défaut pour les nouveaux documents, consultez la section
« Création et ouverture de documents » à la page 63.
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
2 Sélectionnez la catégorie Polices dans la liste de gauche.
3 Sélectionnez le type de codage désiré (par exemple, Occidental ou Japonais) dans la liste Paramètres de la police.
Remarque : Pour afficher un document en langue asiatique, il est indispensable que votre système d'exploitation prenne
en charge les polices à deux octets.
4 Sélectionnez une police et un format à utiliser pour chaque catégorie du codage sélectionné.
Dernière mise à jour le 4/5/2011
34
UTILISATION DE DREAMWEAVER
Espace de travail
Remarque : Pour qu'une police apparaisse dans les menus contextuels correspondants, il est indispensable de l'installer
sur votre ordinateur. Par exemple, si vous souhaitez visualiser un texte rédigé en japonais, il vous faut installer un jeu de
caractères japonais au préalable.
Proportionnelle La police proportionnelle est utilisée par Dreamweaver pour afficher du texte normal (par exemple,
un texte contenu dans des paragraphes, des en-têtes et des tableaux). La valeur par défaut varie en fonction des polices
installées sur votre système. Pour la plupart des systèmes français, la police proportionnelle par défaut est Times New
Roman 12 pt (moyen) sous Windows et Times 12 pt sous Mac OS.
Fixe La police fixe est utilisée par Dreamweaver pour afficher du texte dans les balises pre, code et tt. La valeur par
défaut varie en fonction des polices installées sur votre système. Pour la plupart des systèmes français, la police fixe par
défaut est Courier New 10 pt (petit) sous Windows et Monaco 12 pt sous Mac OS.
Mode Code Police utilisée dans tout le texte qui apparaît dans le mode d'affichage Code et dans l'inspecteur de code.
La valeur par défaut varie en fonction des polices installées sur votre système.
Voir aussi
« Description de l'encodage de document » à la page 220
Personnalisation des couleurs de surbrillance de Dreamweaver
Les préférences de surbrillance servent à personnaliser les couleurs utilisées dans Dreamweaver pour identifier les
zones d'un modèle, les éléments d'une bibliothèque, les balises tierces, les éléments de mise en forme et le code.
Voir aussi
« Utilisation du sélecteur de couleur » à la page 224
« Modification de la couleur de surbrillance des balises div » à la page 166
Modification de la couleur de surbrillance
1 Choisissez Edition > Préférences, puis la catégorie Surbrillance.
2 Cliquez sur le sélecteur de couleur située près de l'objet dont vous souhaitez modifier la couleur de surbrillance, puis
utilisez la palette de couleur pour sélectionner une nouvelle couleur. Vous pouvez également saisir une valeur
hexadécimale.
Activation ou désactivation de la surbrillance d'un objet
1 Choisissez Edition > Préférences, puis la catégorie Surbrillance.
2 Cochez ou décochez l'option Afficher située près de l'objet dont vous souhaitez activer ou désactiver la couleur de
surbrillance.
Restauration des préférences par défaut
Pour connaître les procédures de rétablissement des préférences par défaut de Dreamweaver, consultez la Tech Note
83912.
Dernière mise à jour le 4/5/2011
35
UTILISATION DE DREAMWEAVER
Espace de travail
Raccourcis clavier
Création d'un feuille de référence pour le jeu de raccourcis en cours
Une feuille de référence est un enregistrement du jeu de raccourcis en cours. Les informations sont stockées sous forme
d'un tableau HTML. Vous pouvez afficher la feuille de référence dans un navigateur Web ou l'imprimer.
1 Sélectionnez Edition > Raccourcis clavier (Windows) ou Dreamweaver > Raccourcis clavier (Macintosh).
2 Cliquez sur le bouton Exporter le jeu au format HTML ; il s'agit du troisième bouton du jeu de quatre boutons situé
en haut de la boîte de dialogue.
3 Dans la boîte de dialogue d'enregistrement, entrez le nom de la feuille de référence et sélectionnez l'emplacement
approprié pour enregistrer le fichier.
Personnalisation des raccourcis clavier
Utilisez l'éditeur de raccourcis clavier pour créer vos propres touches de raccourci, y compris pour les fragments de
code. Vous pouvez également supprimer des raccourcis clavier, les modifier, et sélectionner un jeu prédéfini de
raccourcis dans l'éditeur de raccourcis clavier.
Voir aussi
« Manipulation de fragments de code » à la page 330
Création d'un raccourci clavier
Créez vos propres touches de raccourci, modifiez des raccourcis existants ou sélectionnez un jeu de raccourcis
prédéfini.
1 Sélectionnez Edition > Raccourcis clavier (Windows) ou Dreamweaver > Raccourcis clavier (Macintosh).
2 Parmi les options suivantes, définissez celles de votre choix et cliquez sur OK :
Jeu en cours Vous permet de choisir un jeu de raccourcis prédéfinis livrés avec Dreamweaver, ou tout autre jeu
personnalisé que vous avez vous-même défini. Les jeux prédéfinis sont répertoriés en haut du menu. Par exemple, si
vous connaissez les raccourcis de HomeSite ou BBEdit, vous pouvez les utiliser en choisissant le jeu prédéfini
correspondant.
Commandes Vous permet de sélectionner une catégorie de commandes à modifier. Par exemple, vous pouvez
modifier des commandes de menu, telles que Ouvrir ou des commandes de modification du code, telles que Equilibrer
les accolades.
Pour ajouter ou modifier un raccourci clavier pour un fragment de code, sélectionnez Fragment de code dans le menu
contextuel Commandes.
La liste des commandes affiche les commandes de la catégorie que vous avez choisie dans le menu contextuel
Commandes, ainsi que les raccourcis clavier attribués. Les catégories de commandes Menu s'affichent sous une forme
arborescente, suivant la structure des menus. Les autres catégories répertorient les commandes par leur nom (par
exemple, Quitter l'application).
Raccourcis affiche la liste des raccourcis clavier assignés à la commande sélectionnée.
Ajouter l'élément (+) ajoute un nouveau raccourci pour la commande en cours. Cliquez sur ce bouton pour ajouter
une nouvelle ligne vierge aux Raccourcis. Entrez une nouvelle combinaison de touches et cliquez sur Remplacer pour
ajouter un nouveau raccourci clavier pour cette commande. Vous pouvez attribuer deux raccourcis clavier différents
pour chaque commande. S'il en existe déjà deux, le bouton Ajouter l'élément (+) n'a aucun effet.
Dernière mise à jour le 4/5/2011
36
UTILISATION DE DREAMWEAVER
Espace de travail
Supprimer l'élément (-) supprime le raccourci sélectionné de la liste.
Appuyer sur la touche affiche la combinaison de touches que vous saisissez lorsque vous ajoutez ou modifiez un
raccourci.
Remplacer Ajoute la combinaison de touches indiquée dans la zone Appuyer sur la touche à la liste des raccourcis ou
applique le nouveau raccourci clavier à la combinaison de touches spécifiées.
Dupliquer le jeu duplique le jeu courant. Attribuez un nom au nouveau jeu ; le nom par défaut est le nom du jeu en
cours doté du suffixe copie.
Renommer le jeu renomme le jeu actuel.
Exporter comme fichier HTML enregistre le jeu actuel dans un format de table HTML en vue d'un affichage et d'une
impression simples. Vous pouvez ouvrir le fichier HTML dans votre navigateur et imprimer les raccourcis comme
référence rapide.
Supprimer le jeu supprime un jeu. Les jeux actifs ne peuvent pas être supprimés.
Suppression d'un raccourci d'une commande
1 Sélectionnez Edition > Raccourcis clavier (Windows) ou Dreamweaver > Raccourcis clavier (Macintosh).
2 Dans le menu contextuel Commandes, sélectionnez une catégorie.
3 Sélectionnez une commande dans la liste, puis sélectionnez un raccourci.
4 Cliquez sur le bouton Supprimer un élément (-).
Ajout d'un raccourci clavier à une commande
1 Sélectionnez Edition > Raccourcis clavier (Windows) ou Dreamweaver > Raccourcis clavier (Macintosh).
2 Dans le menu contextuel Commandes, sélectionnez une catégorie.
3 Sélectionnez une commande dans la liste.
Pour ajouter ou modifier un raccourci clavier pour un fragment de code, sélectionnez Fragment de code dans le menu
contextuel Commandes.
Les raccourcis attribués à la commande apparaissent dans la zone Raccourcis.
4 Procédez de l'une des manières suivantes pour ajouter un raccourci :
• Si moins de deux raccourcis sont déjà attribués à la commande, cliquez sur le bouton Ajouter l'élément (+). Une
nouvelle ligne vide apparaît dans la zone Raccourcis et le point d'insertion s'affiche dans la zone Appuyer sur la
touche.
• Si deux raccourcis sont déjà attribués à la commande, sélectionnez-en un (il sera remplacé par le nouveau
raccourci). Cliquez ensuite dans la zone Appuyer sur la touche.
5 Appuyez sur une combinaison de touches. Celle-ci apparaît dans la zone Appuyer sur la touche.
Remarque : Si la combinaison de touches est incorrecte (par exemple, elle est déjà attribuée à une autre commande), un
message s'affiche sous la zone Raccourcis et vous en avertit. Vous ne pourrez peut-être pas ajouter, ni modifier le
raccourci.
6 Cliquez sur Remplacer. La nouvelle combinaison de touches est attribuée à la commande.
Dernière mise à jour le 4/5/2011
37
UTILISATION DE DREAMWEAVER
Espace de travail
Modification d'un raccourci existant
1 Sélectionnez Edition > Raccourcis clavier (Windows) ou Dreamweaver > Raccourcis clavier (Macintosh).
2 Dans le menu contextuel Commandes, sélectionnez une catégorie.
3 Sélectionnez une commande dans la liste, puis sélectionnez un raccourci à modifier.
4 Cliquez dans la zone Appuyer sur la touche, et entrez une nouvelle combinaison de touches.
5 Cliquez sur le bouton Remplacer pour modifier le raccourci.
Remarque : Si la combinaison de touches est incorrecte (par exemple, elle est déjà attribuée à une autre commande), un
message s'affiche sous la zone Raccourcis et vous en avertit. Vous ne pourrez peut-être pas ajouter, ni modifier le
raccourci.
A propos des raccourcis clavier et des claviers non-U.S.
Les raccourcis clavier Dreamweaver par défaut fonctionnent principalement sur les claviers U.S. standardisés. Les
claviers d'autres pays (y compris ceux qui sont produits au Royaume-Uni) peuvent ne pas présenter la fonctionnalité
nécessaire à l'utilisation de ces raccourcis. Si votre clavier ne prend pas en charge certains raccourcis Dreamweaver,
Dreamweaver désactive leur fonctionnalité.
Pour personnaliser des raccourcis clavier fonctionnant avec des claviers non-U.S., voir la section « Modification des
mappages des raccourcis clavier » du manuel Extension de Dreamweaver.
Extensions
Ajout et gestion d'extensions dans Dreamweaver
Les extensions sont de nouvelles fonctions, faciles à intégrer dans Dreamweaver. Vous pouvez utiliser plusieurs types
d'extensions ; il existe, par exemple, des extensions qui permettent de reformater des tableaux, d'écrire des
compléments de scripts coté serveurs ou clients.
Remarque : Pour installer des extensions accessibles à tous les utilisateurs dans un système d'exploitation
multiutilisateur, vous devez disposer des droits Administrateur (Windows) ou root (Mac OS X).
Pour rechercher les extensions les plus récentes pour Dreamweaver, consultez le site Web d'Adobe Exchange, à
l'adresse suivante : www.adobe.com/go/dreamweaver_exchange_fr/. Sur ce site, vous pouvez vous connecter et
télécharger des extensions (un grand nombre d'entre elles sont gratuites), participer à des forums de discussion,
visualiser les rapports et analyses d'utilisateurs, ainsi qu'installer et exploiter Extension Manager. Vous devez installer
Extension Manager avant de pouvoir télécharger des extensions.
Le logiciel Extension Manager est une application indépendante permettant d'installer et de gérer les extensions dans
les applications Adobe. Vous pouvez lancer Extension Manager à partir de Dreamweaver en choisissant Commandes
> Gérer les extensions.
1 Sur le site Web Adobe Exchange, cliquez sur le lien de téléchargement de l'extension qui vous intéresse.
Votre navigateur vous permet peut-être d'ouvrir et d'installer l'extension directement depuis le site ou de l'enregistrer
sur votre disque.
• Si vous l'ouvrez directement, Extension Manager traite automatiquement l'installation.
Dernière mise à jour le 4/5/2011
38
UTILISATION DE DREAMWEAVER
Espace de travail
• Si vous l'enregistrez sur votre disque, placez le fichier du logiciel d'extension (.mxp ou .mxi) dans le dossier des
extensions téléchargées de l'application Dreamweaver sur votre ordinateur.
2 Double-cliquez sur le fichier du logiciel d'extension ou ouvrez Extension Manager et choisissez Fichier >
Installer l'extension. (Certaines extensions ne sont accessibles qu'une fois que vous avez redémarré l'application.
Remarque : Utilisez Extension Manager pour supprimer des extensions ou pour consulter des informations sur
l'extension.
Voir aussi
« A propos de la personnalisation de Dreamweaver dans les systèmes multiutilisateurs » à la page 31
Dernière mise à jour le 4/5/2011
39
Chapitre 3 : Utilisation de sites
Dreamweaver
Un site Adobe® Dreamweaver® CS5 est un ensemble de tous les fichiers et de tous les actifs de votre site Web. Vous
pouvez créer des pages Web sur votre ordinateur, les transférer sur un serveur Web et gérer le site en transférant des
fichiers mis à jour chaque fois que vous les sauvegardez. Vous pouvez également modifier et gérer des sites Web qui
ont été créés sans Dreamweaver.
Configuration d'un site Dreamweaver
A propos des sites Dreamweaver
Dans Dreamweaver, le terme « site » se rapporte à un lieu de stockage local ou distant dans lequel sont conservés tous
les documents appartenant à un site Web. Un site Dreamweaver permet d'organiser et de gérer tous vos documents
Web, de transférer vos fichiers de site à un serveur Web, de suivre et de gérer les liens, ainsi que de gérer et de partager
les fichiers. Définissez un site pour tirer le meilleur parti des fonctions offertes par Dreamweaver.
Remarque : Pour définir un site Dreamweaver, vous devez simplement configurer un dossier local. Pour transférer des
fichiers vers un serveur Web ou pour développer des applications Web, vous devez également ajouter des informations
concernant un site distant et un serveur d'évaluation.
Un site Dreamweaver se compose de trois parties, ou dossiers, selon votre environnement de travail et le type de site
Web que vous développez :
Dossier racine local Stocke les fichiers en cours de développement. Dans Dreamweaver, ce dossier est appelé votre
« site local ». Ce dossier se trouve généralement sur votre ordinateur local, mais il peut également se trouver sur un
serveur de réseau.
Dossier distant Stocke les fichiers que vous réservez aux évaluations, à la production, à la collaboration, etc. Dans
Dreamweaver, ce dossier est appelé votre « site distant » dans le panneau Fichiers. En règle générale, votre dossier
distant se trouve sur l'ordinateur à partir duquel vous exécutez votre serveur Web. Le dossier distant contient les
fichiers auxquels les utilisateurs accèdent via Internet.
Ces deux dossiers (local et distant) vous permettent de transférer des fichiers entre votre disque dur local et un serveur
Web, ce qui facilite la gestion des fichiers sur vos sites Dreamweaver. Vous travaillez sur les fichiers dans le dossier
local, puis vous les publiez dans le dossier distant lorsque vous voulez les rendre accessibles à d'autres utilisateurs.
Dossier du serveur d'évaluation Dossier dans lequel Dreamweaver traite les pages dynamiques.
Vous trouverez un didacticiel sur la définition d'un site Dreamweaver à l'adresse
www.adobe.com/go/learn_dw_comm08_fr.
Dernière mise à jour le 4/5/2011
40
UTILISATION DE DREAMWEAVER
Utilisation de sites Dreamweaver
Description de la structure du dossier local et du dossier distant
Si vous voulez utiliser Dreamweaver pour vous connecter à un dossier distant, vous devez définir ce dossier distant
dans la catégorie Infos distantes de la boîte de dialogue Définition du site. Le dossier distant (également baptisé
« répertoire hôte ») doit correspondre au dossier racine local de votre site Dreamweaver. Le dossier racine local est le
dossier supérieur de votre site Dreamweaver. Les dossiers distants, tout comme les dossiers locaux, peuvent posséder
n'importe quel titre. Toutefois, les fournisseurs d'accès à Internet nomment généralement les dossiers distants de
niveau supérieur de leurs différents comptes d'utilisateur public_html, pub_html, etc. Si vous êtes responsable de votre
serveur distant et si vous pouvez nommer le dossier distant à votre guise, il est conseillé de donner le même nom au
dossier racine local et au dossier distant.
L'exemple ci-dessous représente un exemple de dossier racine local à gauche et un exemple de dossier distant à droite.
Le dossier racine local sur l'ordinateur local correspond directement au dossier distant du serveur Web, et non à l'un
des sous-dossier du dossier distant ou à des dossiers situés au-dessus du dossier distant dans la structure des
répertoires.
Répertoire de connexion
Non
(Ne doit pas être un dossier
distant dans ce cas)
Dossier local
Oui
public_html
(Doit être un
dossier distant)
(dossier racine)
Actifs
Actifs
Non
(Ne doit pas être
un dossier distant)
HTML
HTML
Remarque : L'exemple ci-dessus représente un dossier racine local sur l'ordinateur local, et un dossier distant de niveau
supérieur sur le serveur Web distant. Toutefois, si vous gérez plusieurs sites Dreamweaver sur l'ordinateur local, vous
aurez besoin d'un nombre identique de dossiers distants sur le serveur distant. Dans un tel cas, l'exemple ci-dessus n'est
pas d'application. Vous devez au contraire créer différents dossiers distants dans le dossier public_html, puis les faire
correspondre à leurs dossiers racine locaux respectifs sur l'ordinateur local.
Lorsque vous établissez une première connexion distante, le dossier distant du serveur Web est généralement vide.
Ensuite, lorsque vous utilisez Dreamweaver pour charger tous les fichiers de votre dossier racine local, le dossier
distant se remplit de tous vos fichiers Web. La structure des répertoires du dossier distant doit toujours être identique
à celle du dossier racine local. En d'autres termes, il doit toujours exister une correspondance précise entre les fichiers
et les dossiers de votre dossier racine locale et ceux de votre dossier distant. Si la structure du dossier distant ne
correspond pas à celle du dossier racine local, Dreamweaver transfère les fichiers au mauvais endroit et ils risquent de
ne pas être visibles pour les visiteurs du site. En outre, les chemins d'accès des images et les liens peuvent être aisément
endommagés si les structures des dossiers et des fichiers ne sont pas synchronisées.
Le dossier distant doit déjà exister pour que Dreamweaver puisse s'y connecter. Si aucun répertoire racine n'existe ne
fait office de dossier distant sur le serveur Web, créez-en un ou demandez à l'administrateur du serveur de se charger
de cette opération.
Création d'un nouveau site
Un site Dreamweaver vous permet d'organiser tous les documents associés à un site Web. La boîte de dialogue
Configuration du site vous permet de définir les paramètres de votre site Dreamweaver.
Pour ouvrir la boîte de dialogue Configuration du site, choisissez Site > Nouveau site.
Dernière mise à jour le 4/5/2011
41
UTILISATION DE DREAMWEAVER
Utilisation de sites Dreamweaver
Vous trouverez un didacticiel vidéo sur la configuration d'un nouveau site Dreamweaver à l'adresse
www.adobe.com/go/learn_dw_comm08_fr.
Définition de l'emplacement du site local
La catégorie Site de la boîte de dialogue Configuration du site est la seule que vous devez compléter pour pouvoir
commencer à travailler sur votre site Dreamweaver. Cette catégorie permet de préciser le dossier local où vous allez
stocker tous les fichiers de votre site. Le dossier local peut se trouver sur un ordinateur local ou sur un serveur réseau.
Lorsque vous êtes prêt, vous pouvez compléter les autres catégories de la boîte de dialogue Configuration du site, dont
la catégorie Serveurs, où vous pouvez indiquer un dossier distant sur votre serveur distant.
Remarque : Vous n'avez pas besoin de définir un dossier distant si votre dossier racine local se trouve sur le système
exécutant votre serveur Web. Ce scénario suppose que le serveur Web s'exécute sur votre ordinateur local.
Nom du site Le nom qui s'affiche dans le panneau Fichiers et dans la boîte de dialogue Gérer les sites ; il ne s'affiche
pas dans le navigateur.
Dossier local du site Le nom du dossier sur votre disque local où vous stockez les fichiers, les modèles et les éléments
de bibliothèque de votre site. Créez un dossier sur votre disque dur ou cliquez sur l'icône de dossier pour rechercher
un dossier. Lorsque Dreamweaver résout des liens relatifs à la racine du site, il le fait par rapport à ce dossier.
Définition des serveurs
La catégorie Serveurs permet d'indiquer des serveurs distants et d'évaluation.
Le serveur distant est l'endroit où vous spécifiez le dossier distant qui contiendra les fichiers à des fins de production,
de collaboration, de déploiement ou divers autres scénarios. En règle générale, votre dossier distant se trouve sur
l'ordinateur à partir duquel vous exécutez votre serveur Web.
Dans le panneau Fichiers de Dreamweaver, le dossier distant représente votre site distant. Lorsque vous configurez un
dossier distant, vous devez sélectionner une méthode de connexion qui permettra à Dreamweaver de transférer des
fichiers à votre serveur Web et de télécharger des fichiers depuis ce serveur.
Remarque : Dreamweaver prend en charge les connexions aux serveurs compatibles IPv6. Les types de connexion pris en
charge sont notamment FTP, SFTP, WebDav et RDS. Pour plus d'informations, voir www.ipv6.org/
Définition d'options pour les connexions de type local ou réseau
Utilisez cette option pour vous connecter à un dossier réseau, si vous stockez des fichiers ou exécutez votre serveur
d'évaluation sur votre ordinateur local.
1 Choisissez Site > Gérer les sites.
2 Cliquez sur Nouveau pour configurer un nouveau site, ou sélectionnez un site Dreamweaver existant et cliquez sur
Modifier.
3 Dans la boîte de dialogue Configuration du site, sélectionnez la catégorie Serveurs et effectuez l'une des actions
suivantes :
• Cliquez sur le bouton Ajouter nouveau serveur pour ajouter un nouveau serveur.
• Sélectionnez un serveur existant puis cliquez sur le bouton Modifier serveur existant.
4 Dans la zone Nom du serveur, entrez le nom du nouveau serveur. Vous pouvez entrer le nom de votre choix.
5 Sélectionnez Local/Réseau dans la liste déroulante Se connecter au moyen de.
6 Cliquez sur l'icône de dossier à droite de la zone de texte Dossier du serveur pour rechercher puis sélectionner le
dossier dans lequel vous stockez les fichiers de votre site.
Dernière mise à jour le 4/5/2011
42
UTILISATION DE DREAMWEAVER
Utilisation de sites Dreamweaver
7 Dans la zone URL Web, entrez l'URL de votre site Web (par exemple http://www.monsite.com). Dreamweaver
utilise l'URL Web pour créer des liens relatifs à la racine du site et pour vérifier les liens lorsque vous employez la
fonction de vérification des liens.
Pour une explication plus détaillée de cette option, voir « Catégorie Paramètres avancés » à la page 48.
8 Cliquez sur Enregistrer pour fermer l'écran Base. Ensuite, dans la catégorie Serveurs, indiquez si le serveur que vous
venez d'ajouter ou de modifier est un serveur distant, un serveur d'évaluation ou les deux.
Définition des options pour les connexions FTP
Utilisez ce paramètre si vous vous connectez à votre serveur Web par FTP.
1 Choisissez Site > Gérer les sites.
2 Cliquez sur Nouveau pour configurer un nouveau site, ou sélectionnez un site Dreamweaver existant et cliquez sur
Modifier.
3 Dans la boîte de dialogue Configuration du site, sélectionnez la catégorie Serveurs et effectuez l'une des actions
suivantes :
• Cliquez sur le bouton Ajouter nouveau serveur pour ajouter un nouveau serveur.
• Sélectionnez un serveur existant puis cliquez sur le bouton Modifier serveur existant.
Les illustrations suivantes montrent l'écran Base de la catégorie Serveur, avec les zones de texte déjà remplies.
Ecran Base de la catégorie Serveur, boîte de dialogue Configuration du site.
4 Dans la zone Nom du serveur, entrez le nom du nouveau serveur. Vous pouvez entrer le nom de votre choix.
5 Sélectionnez FTP dans la liste déroulante Se connecter au moyen de.
6 Dans la zone Adresse FTP, entrez l'adresse du serveur FTP sur lequel vous chargez les fichiers pour votre site Web.
Votre adresse FTP est le nom Internet complet d'un système informatique, par exemple, ftp.mindspring.com. Entrez
l'adresse complète sans ajouter de texte. Evitez en particulier d'ajouter un nom de protocole devant l'adresse.
Si vous ne connaissez pas votre adresse FTP, contactez votre hébergeur de site Web.
Remarque : Le port 21 est le port par défaut pour la réception de connexions FTP. Vous pouvez modifier le numéro de
port par défaut en modifiant le contenu de la zone de texte à droite. Ce faisant, lorsque vous enregistrez vos paramètres,
un signe deux points et le nouveau numéro de port seront ajoutés à votre adresse FTP (par exemple
ftp.mindspring.com:29).
Dernière mise à jour le 4/5/2011
43
UTILISATION DE DREAMWEAVER
Utilisation de sites Dreamweaver
7 Dans les zones Nom d'utilisateur et Mot de passe, entrez le nom d'utilisateur et le mot de passe utilisés pour la
connexion au serveur FTP.
8 Cliquez sur Tester pour tester votre adresse FTP, votre nom d'utilisateur et votre mot de passe.
Remarque : Vous devez obtenir les informations relatives à l'adresse FTP, au nom d'utilisateur et au mot de passe auprès
de l'administrateur système de la société qui héberge votre site. Personne d'autre n'a accès à ces informations. Entrez les
informations de la façon précise dont votre administrateur système vous les a communiquées.
9 Par défaut, Dreamweaver enregistre votre mot de passe. Désélectionnez l'option Enregistrer si vous préférez que
Dreamweaver vous demande le mot de passe à chaque connexion au serveur distant.
10 Dans la zone Répertoire racine, entrez le nom du répertoire (dossier) hôte du serveur distant où sont stockés les
documents visibles pour le public.
Si vous n'êtes pas sûr du répertoire racine à saisir, contactez l'administrateur du serveur ou laissez la zone de texte vide.
Sur certains serveurs, votre répertoire racine est celui dans lequel la connexion FTP est établie. Pour en être sûr,
établissez une connexion avec le serveur. Si vous voyez apparaître dans le volet Affichage distant de votre panneau
Fichiers un dossier nommé public_html, www ou ayant votre nom d'utilisateur, il s'agit probablement du nom à
indiquer dans la zone Répertoire racine.
11 Dans la zone URL Web, entrez l'URL de votre site Web (par exemple http://www.monsite.com). Dreamweaver
utilise l'URL Web pour créer des liens relatifs à la racine du site et pour vérifier les liens lorsque vous employez la
fonction de vérification des liens.
Pour une explication plus détaillée de cette option, voir « Catégorie Paramètres avancés » à la page 48.
12 Développez la section Options supplémentaires si vous devez encore définir des options supplémentaires.
13 Sélectionnez l'option Utiliser FTP passif si la configuration de votre pare-feu nécessite l'utilisation d'un FTP passif.
Cette fonction permet à votre logiciel local de configurer la connexion FTP à la place du serveur distant. Si vous n'êtes
pas sûr d'utiliser le mode FTP passif, consultez votre administrateur système ou faites des essais en activant puis en
désactivant l'option Utiliser FTP passif.
Pour plus d'informations, consultez la TechNote 15220 sur le site Web d'Adobe à l'adresse
www.adobe.com/go/tn_15220_fr.
14 Choisissez Utiliser le mode de transfert IPv6 si vous employez un serveur FTP compatible IPv6.
Parallèlement au déploiement de la version 6 d'Internet Protocol (IPv6), les commandes EPRT et EPSV ont remplacé
respectivement les commandes FTP PORT et PASV. Par conséquent, si vous tentez de vous connecter à un serveur
FTP compatible IPv6, vous devez utiliser les commandes passif étendu (EPSV) et actif étendu (EPRT) pour votre
connexion de données.
Pour plus d'informations, voir www.ipv6.org/.
15 Choisissez Utiliser un proxy si vous voulez spécifier un hôte ou un port proxy.
Pour plus d'informations, cliquez sur le lien afin d'accéder à la boîte de dialogue Préférences, puis cliquez-y sur le
bouton Aide de la catégorie Site.
16 Cliquez sur Enregistrer pour fermer l'écran Base. Ensuite, dans la catégorie Serveurs, indiquez si le serveur que vous
venez d'ajouter ou de modifier est un serveur distant, un serveur d'évaluation ou les deux.
Pour plus d'informations sur le dépannage des problèmes de connectivité FTP, consultez la TechNote kb405912 sur le
site Web d'Adobe, à l'adresse www.adobe.com/go/kb405912_fr.
Dernière mise à jour le 4/5/2011
44
UTILISATION DE DREAMWEAVER
Utilisation de sites Dreamweaver
Définition des options pour les connexions FTPS (CS 5.5)
FTPS (FTP sur SSL) fournit une prise en charge du chiffrement et de l'authentification, au contraire de SFTP qui prend
uniquement en charge le chiffrement.
Lorsque vous utilisez FTPS pour le transfert de données, vous pouvez choisir de chiffrer vos informations
d'identification, ainsi que les données transmises au serveur. En outre, vous pouvez choisir d'authentifier les
informations d'identification du serveur et les connexions. Les informations d'identification d'un serveur sont validées
par rapport à l'ensemble actuel des certificats de serveur d'autorité de certification approuvés dans la base de données
Dreamweaver. Les autorités de certification (CA), qui comprennent des sociétés comme VeriSign, Thawte, etc.
émettent des certificats de serveur signés numériquement.
Remarque : Cette procédure décrit les options spécifiques à FTPS. Pour plus d'informations sur les options FTP régulières,
consultez la section précédente.
1 Choisissez Site > Gérer les sites.
2 Cliquez sur Nouveau pour configurer un nouveau site, ou sélectionnez un site Dreamweaver existant et cliquez sur
Modifier.
3 Dans la boîte de dialogue Configuration du site, sélectionnez la catégorie Serveurs et effectuez l'une des actions
suivantes :
• Cliquez sur le bouton « + » (Ajouter nouveau serveur) pour ajouter un nouveau serveur.
• Sélectionnez un serveur existant, puis cliquez sur le bouton Modifier serveur existant.
4 Dans la zone Nom du serveur, entrez le nom du nouveau serveur.
5 Dans la zone Se connecter à l'aide, sélectionnez l'une des options suivantes en fonction de vos besoins.
FTP sur SSL/TLS (chiffrement implicite) Le serveur met fin à la connexion si la requête de sécurité n'est pas reçue.
FTP sur SSL/TLS (chiffrement explicite) Si le client ne demande pas de sécurité, le serveur peut choisir de procéder
à une transaction non sécurisée ou de refuser/limiter la connexion.
6 Dans la zone Authentification, choisissez l'une des options suivantes :
Aucun Les informations d'identification du serveur, signées ou auto-signées, s'affichent. Si vous acceptez les
informations d'identification du serveur, le certificat est ajouté à un magasin de certificats, trustedSites.db, dans
Dreamweaver. La prochaine fois que vous vous connecterez à ce serveur, Dreamweaver se connectera directement
au serveur.
Remarque : Si les informations d'identification d'un certificat auto-signé ont été modifiées sur le serveur, vous êtes
invité à accepter les nouvelles informations d'identification.
Approuvé Le certificat présenté est validé avec l'ensemble actuel des certificats de serveur d'autorité de certification
approuvés dans la base de données Dreamweaver. La liste de serveurs approuvés est stockée dans le fichier
cacerts.pem.
Remarque : Un message d'erreur s'affiche si vous sélectionnez Serveur approuvé et que vous vous connectez à un
serveur avec un certificat auto-signé.
7 Développez la section Options supplémentaires pour définir d'autres options.
Chiffrer uniquement le canal de commande Sélectionnez cette option si vous souhaitez ne chiffrer que les
commandes qui sont transmises. Utilisez cette option lorsque les données transmises sont déjà chiffrées ou ne
contiennent pas d'informations confidentielles.
Chiffrer uniquement le nom d'utilisateur et le mot de passe Sélectionnez cette option si vous souhaitez chiffrer
votre nom d'utilisateur et votre mot de passe.
Dernière mise à jour le 4/5/2011
45
UTILISATION DE DREAMWEAVER
Utilisation de sites Dreamweaver
8 Cliquez sur Enregistrer pour fermer l'écran Base. Ensuite, dans la catégorie Serveurs, indiquez si le serveur que vous
avez ajouté ou modifié est un serveur distant, un serveur d'évaluation ou les deux.
Pour plus d'informations sur le dépannage des problèmes de connectivité FTP, consultez la TechNote kb405912 sur le
site Web d'Adobe, à l'adresse www.adobe.com/go/kb405912_fr.
Définition des options pour les connexions SFTP
Utilisez l'option Secure FTP (SFTP) si la configuration de votre pare-feu exige l'emploi d'une connexion FTP sécurisée.
SFTP utilise un système de cryptage et de clés publiques pour sécuriser la connexion à votre serveur d'évaluation.
Remarque : Pour que vous puissiez sélectionner cette option, votre serveur doit exécuter un service SFTP. Si vous ignorez
si votre serveur exécute SFTP, consultez votre administrateur système.
1 Choisissez Site > Gérer les sites.
2 Cliquez sur Nouveau pour configurer un nouveau site, ou sélectionnez un site Dreamweaver existant et cliquez sur
Modifier.
3 Dans la boîte de dialogue Configuration du site, sélectionnez la catégorie Serveurs et effectuez l'une des actions
suivantes :
• Cliquez sur le bouton Ajouter nouveau serveur pour ajouter un nouveau serveur.
• Sélectionnez un serveur existant puis cliquez sur le bouton Modifier serveur existant.
4 Dans la zone Nom du serveur, entrez le nom du nouveau serveur. Vous pouvez entrer le nom de votre choix.
5 Sélectionnez SFTP dans la liste déroulante Se connecter au moyen de.
Les autres options sont identiques à celles des connexions FTP. Reportez-vous à la section ci-dessus pour plus
d'informations.
Remarque : Le port 22 est le port par défaut pour la réception de connexions SFTP.
Définition des options pour les connexions WebDAV
Utilisez ce paramètre si vous vous connectez à votre serveur à l'aide du protocole WebDAV (Web-based Distributed
Authoring and Versioning).
Cette méthode de connexion suppose que vous disposez d'un serveur prenant en charge ce protocole, par exemple
Microsoft Internet Information Server (IIS) 5.0 ou une installation du serveur Web Apache configurée de façon
adéquate.
Remarque : Si vous sélectionnez WebDAV comme méthode de connexion et que vous utilisez Dreamweaver dans un
environnement multi-utilisateurs, vous devez également veiller à ce que tous vos utilisateurs sélectionnent WebDAV
comme méthode de connexion. Si certains utilisateurs sélectionnent WebDAV, alors que d'autres sélectionnent d'autres
méthodes de connexion (par exemple, FTP), la fonction archivage/extraction de Dreamweaver fonctionnera de façon
imprévisible, car WebDAV utilise son propre système de verrouillage.
1 Choisissez Site > Gérer les sites.
2 Cliquez sur Nouveau pour configurer un nouveau site, ou sélectionnez un site Dreamweaver existant et cliquez sur
Modifier.
3 Dans la boîte de dialogue Configuration du site, sélectionnez la catégorie Serveurs et effectuez l'une des actions
suivantes :
• Cliquez sur le bouton Ajouter nouveau serveur pour ajouter un nouveau serveur.
• Sélectionnez un serveur existant puis cliquez sur le bouton Modifier serveur existant.
4 Dans la zone Nom du serveur, entrez le nom du nouveau serveur. Vous pouvez entrer le nom de votre choix.
Dernière mise à jour le 4/5/2011
46
UTILISATION DE DREAMWEAVER
Utilisation de sites Dreamweaver
5 Sélectionnez WebDAV dans la liste déroulante Se connecter au moyen de.
6 Dans la zone URL, indiquez l'URL complète vers le répertoire du serveur WebDAV auquel vous voulez vous
connecter.
Cette URL inclut le protocole, le port et le répertoire (s'il ne s'agit pas du répertoire racine). Par exemple,
http://webdav.mondomaine.net/monsite.
7 Entrez votre nom d'utilisateur et votre mot de passe.
Ces informations sont relatives à l'identification du serveur et ne sont pas associées à Dreamweaver. Si vous ne
connaissez pas votre nom d'utilisateur et votre mot de passe, consultez votre administrateur système ou Web.
8 Cliquez sur Tester pour tester vos paramètres de connexion.
9 Activez l'option Enregistrer si vous voulez que Dreamweaver mémorise votre mot de passe à chaque nouvelle
session.
10 Dans la zone URL Web, entrez l'URL de votre site Web (par exemple http://www.monsite.com). Dreamweaver
utilise l'URL Web pour créer des liens relatifs à la racine du site et pour vérifier les liens lorsque vous employez la
fonction de vérification des liens.
Pour une explication plus détaillée de cette option, voir « Catégorie Paramètres avancés » à la page 48.
11 Cliquez sur Enregistrer pour fermer l'écran Base. Ensuite, dans la catégorie Serveurs, indiquez si le serveur que vous
venez d'ajouter ou de modifier est un serveur distant, un serveur d'évaluation ou les deux.
Définition des options pour les connexions RDS
Utilisez ce paramètre si vous vous connectez à votre serveur Web à l'aide de RDS (Remote Development Services).
Cette méthode de connexion suppose que votre serveur distant se trouve sur un ordinateur exécutant Adobe®
ColdFusion®
1 Choisissez Site > Gérer les sites.
2 Cliquez sur Nouveau pour configurer un nouveau site, ou sélectionnez un site Dreamweaver existant et cliquez sur
Modifier.
3 Dans la boîte de dialogue Configuration du site, sélectionnez la catégorie Serveurs et effectuez l'une des actions
suivantes :
• Cliquez sur le bouton Ajouter nouveau serveur pour ajouter un nouveau serveur.
• Sélectionnez un serveur existant puis cliquez sur le bouton Modifier serveur existant.
4 Dans la zone Nom du serveur, entrez le nom du nouveau serveur. Vous pouvez entrer le nom de votre choix.
5 Sélectionnez RDS dans la liste déroulante Se connecter au moyen de.
6 Cliquez sur le bouton Paramètres et entrez les informations suivantes dans la boîte de dialogue Configurer le
serveur RDS :
• Entrez le nom de l'ordinateur hôte sur lequel votre serveur Web est installé.
Il s'agit probablement d'une adresse IP ou d'une URL. En cas de doute, demandez à votre administrateur.
• Entrez le numéro du port auquel vous vous connectez.
• Définissez votre dossier racine distant comme répertoire hôte.
Par exemple, c:\inetpub\wwwroot\myHostDir\.
• Entrez votre nom d'utilisateur et votre mot de passe RDS.
Dernière mise à jour le 4/5/2011
47
UTILISATION DE DREAMWEAVER
Utilisation de sites Dreamweaver
Remarque : Ces options seront peut-être invisibles si vous avez configuré votre nom d'utilisateur et votre mot de passe
dans les paramètres de sécurité de ColdFusion Administrator.
• Sélectionnez l'option Enregistrer si vous voulez que Dreamweaver mémorise vos paramètres.
7 Cliquez sur OK pour fermer la boîte de dialogue Configurer le serveur RDS.
8 Dans la zone URL Web, entrez l'URL de votre site Web (par exemple http://www.monsite.com). Dreamweaver
utilise l'URL Web pour créer des liens relatifs à la racine du site et pour vérifier les liens lorsque vous employez la
fonction de vérification des liens.
Pour une explication plus détaillée de cette option, voir « Catégorie Paramètres avancés » à la page 48.
9 Cliquez sur Enregistrer pour fermer l'écran Base. Ensuite, dans la catégorie Serveurs, indiquez si le serveur que vous
venez d'ajouter ou de modifier est un serveur distant, un serveur d'évaluation ou les deux.
Définition des options pour les connexions Microsoft Visual SourceSafe
La prise en charge de Microsoft Visual SourceSafe a été abandonnée à partir de Dreamweaver CS5.
Définition des options avancées
1 Choisissez Site > Gérer les sites.
2 Cliquez sur Nouveau pour configurer un nouveau site, ou sélectionnez un site Dreamweaver existant et cliquez sur
Modifier.
3 Dans la boîte de dialogue Configuration du site, sélectionnez la catégorie Serveurs et effectuez l'une des actions
suivantes :
• Cliquez sur le bouton Ajouter nouveau serveur pour ajouter un nouveau serveur.
• Sélectionnez un serveur existant puis cliquez sur le bouton Modifier serveur existant.
4 Définissez les options de base requises, puis cliquez sur le bouton Avancé.
5 Sélectionnez l'option Conserver les informations de synchronisation si vous souhaitez que vos fichiers locaux et
distants soient synchronisés automatiquement. (Cette option est sélectionnée par défaut.)
6 Sélectionnez l'option Télécharger autom. les fichiers vers le serveur lors de l'enregistrement si vous voulez que
Dreamweaver charge votre fichier sur votre site distant lorsque vous l'enregistrez.
7 Sélectionnez l'option Activer l'extraction de fichier si vous voulez activer le système d'archivage et d'extraction.
8 Si vous employez un serveur d'évaluation, sélectionnez un modèle de serveur dans le menu Modèle de serveur .
Pour plus d'informations, consultez la section « Configuration d'un serveur d'évaluation » à la page 50.
Résolution des problèmes de configuration du dossier distant
La liste suivante contient des informations sur les problèmes courants que vous pouvez rencontrer lors de la
configuration d'un dossier distant et sur la façon de les résoudre.
Vous trouverez, sur le site Web d'Adobe, une TechNote détaillée qui fournit des informations spécifiques au
dépannage FTP. Cette TechNote se trouve à l'adresse www.adobe.com/go/kb405912_fr.
• La mise en oeuvre FTP de Dreamweaver peut ne pas fonctionner correctement avec certains serveurs proxy, parefeu multiniveaux et autres formes d'accès indirect à un serveur. Si vous avez des problèmes d'accès FTP, demandez
l'aide de votre administrateur système.
Dernière mise à jour le 4/5/2011
48
UTILISATION DE DREAMWEAVER
Utilisation de sites Dreamweaver
• Pour la mise en oeuvre FTP de Dreamweaver, il est indispensable de se connecter au dossier racine du système
distant. Veillez à désigner le dossier racine du système distant en tant que répertoire hôte. Si vous avez spécifié le
répertoire hôte avec une seule barre oblique (/), vous aurez peut-être besoin de spécifier un chemin relatif entre le
répertoire auquel vous vous connectez et le dossier racine distant. Si, par exemple, le dossier racine distant est un
répertoire de niveau supérieur, vous pouvez avoir besoin de spécifier ../../ pour le répertoire hôte.
• Utilisez des traits de soulignement à la place des espaces, et évitez, dans la mesure du possible, d'utiliser des
caractères spéciaux pour les noms de fichiers et de dossiers. La présence de symboles deux points, de barres
obliques, de points et d'apostrophes dans les noms de fichiers ou de dossiers peut parfois causer des problèmes.
• En cas de problème avec un nom de fichier long, raccourcissez ce nom. Sous Mac OS, les noms de fichiers ne
peuvent pas compter plus de 31 caractères.
• Notez que certains serveurs utilisent ce qui est appelé, suivant le système d'exploitation, des liens symboliques
(Unix), des raccourcis (Windows) ou des alias (Macintosh), pour connecter un dossier situé en un point du disque
du serveur à un autre dossier situé ailleurs. Ces alias n'ont généralement pas d'effet négatif sur votre capacité à vous
connecter au dossier ou répertoire approprié, mais si vous ne pouvez vous connecter qu'à une partie du serveur, il
s'agit peut-être d'un problème d'alias.
• Si vous découvrez un message d'erreur du type « impossible de placer le fichier », votre dossier distant peut être
saturé. Pour plus d'informations, consultez le journal FTP.
Remarque : En général, si vous avez un problème durant un transfert via FTP, examinez le journal FTP en choisissant
Fenêtre > Résultats (Windows) ou Site > Journal FTP (Macintosh), puis en cliquant sur l'onglet Journal FTP.
Catégorie Contrôle de version
Vous pouvez extraire et archiver des fichiers à l'aide de Subversion. Pour plus d'informations, voir « Utilisation de
Subversion (svn) pour acquérir et archiver des fichiers » à la page 94.
Catégorie Paramètres avancés
Infos locales
Dossier des images par défaut Le dossier dans lequel vous voulez stocker les images de votre site. Tapez le chemin
d'accès au dossier, ou cliquez sur l'icône du dossier pour trouver le dossier et le sélectionner. Dreamweaver utilise le
chemin d'accès au dossier lorsque vous ajoutez des images aux documents.
Liens relatifs à Détermine le type de liens que Dreamweaver crée lorsque vous créez des liens vers d'autres actifs ou
pages dans votre site. Dreamweaver peut créer deux types de liens : des liens relatifs au document et des liens relatifs à
la racine du site. Pour plus d'informations sur les différences entre ces types de liens, voir « Chemins absolus, relatifs
au documents et relatifs à la racine du site » à la page 282.
Par défaut, Dreamweaver crée des liens relatifs au document. Si vous modifiez le paramètre par défaut et activez
l'option Racine du site, veillez à entrer l'URL Web correcte pour le site dans la zone URL Web (voir ci-dessous). La
modification de ce paramètre ne convertit pas le chemin des liens existants ; il s'applique uniquement aux nouveaux
liens que vous créez visuellement à l'aide de Dreamweaver.
Remarque : Le contenu lié à un chemin relatif à la racine du site n'apparaît pas lorsque vous lancez l'aperçu de
documents dans un navigateur local, sauf si vous spécifiez un serveur de test ou activez l'option Aperçu à l'aide d'un
fichier temporaire dans Edition > Préférences > Aperçu dans le navigateur. En effet, à la différence des serveurs, les
navigateurs ne reconnaissent pas les racines de sites.
URL Web L'URL de votre site Web. Dreamweaver utilise l'URL Web pour créer des liens relatifs à la racine du site et
pour vérifier les liens lorsque vous employez la fonction de vérification des liens.
Dernière mise à jour le 4/5/2011
49
UTILISATION DE DREAMWEAVER
Utilisation de sites Dreamweaver
Les liens relatifs à la racine du site sont utiles si vous n'êtes pas sûr de l'emplacement final, dans la structure des
répertoires, de la page sur laquelle vous travaillez, ou si vous pensez qu'il pourrait vous arriver de déplacer ou de
réorganiser ultérieurement des fichiers contenant des liens. Les liens relatifs à la racine du site sont des liens dont les
chemins d'accès à d'autres actifs du site sont relatifs à la racine du site, et non au document. Ainsi, si vous déplacez le
document par la suite, le chemin d'accès à ces actifs reste correct.
Supposons que vous ayez indiqué http://www.mysite.com/mycoolsite (répertoire racine du site du serveur distant)
comme URL Web, et que vous ayez également placé un dossier images dans le répertoire mycoolsite sur le serveur
distant (http://www.mysite.com/mycoolsite/images). Supposons en outre que votre fichier index.html se trouve dans
le répertoire mycoolsite.
Lorsque vous créez un lien relatif à la racine du site à partir du fichier index.html vers une image située dans le
répertoire images, le lien se présente comme suit :
<img src="/mycoolsite/images/image1.jpg" />
Ce lien est différent d'un lien relatif au document, qui serait simplement :
<img src="images/image1.jpg" />
L'ajout de /mycoolsite/ à la source des images lie l'image par rapport à la racine du site, et non au document. En
supposant que l'image reste dans le répertoire image, le chemin d'accès à l'image (/mycoolsite/images/image1.jpg) sera
toujours correct, même si vous déplacez le fichier index.html dans un autre répertoire.
Pour plus d'informations, voir « Chemins absolus, relatifs au documents et relatifs à la racine du site » à la page 282.
En ce qui concerne la vérification des liens, l'URL Web est nécessaire pour déterminer si un lien est interne ou externe
au site. Par exemple, si votre URL Web est http://www.mysite.com/mycoolsite et si le vérificateur de liens trouve une
URL http://www.yoursite.com sur votre page, il détermine que ce dernier lien est externe et le signale comme tel. De
même, le vérificateur de liens utilise l'URL Web pour déterminer si des liens sont internes au site, puis vérifie si ces
liens internes ne sont pas coupés.
Vérification des liens sensible à la casse Permet de vérifier que la casse des liens correspond à celle des noms de
fichiers lorsque Dreamweaver vérifie les liens. Cette option s'adresse plus particulièrement aux systèmes UNIX où les
noms de fichiers tiennent compte des majuscules et des minuscules.
Activer le cache Indique s'il faut créer un cache local pour améliorer la vitesse des tâches de gestion des liens et du site.
Si vous n'activez pas cette option, Dreamweaver vous demandera si vous souhaitez créer de nouveau un cache avant
de créer le site. Il est préférable d'activer cette option, car le panneau Actifs (du groupe Fichiers) est uniquement
opérationnel si un cache est créé.
Voilage et autres catégories
Pour plus d'informations sur les catégories Voilage, Design Notes, Colonnes mode Fichier, Modèles ou Spry, cliquez
sur le bouton Aide de la boîte de dialogue.
Connexion ou déconnexion d'un dossier distant via un accès FTP
❖ Dans le panneau Fichiers :
• Pour vous connecter, cliquez sur l'option Connecter à un hôte distant dans la barre d'outils.
• Pour vous déconnecter, cliquez sur Déconnecter dans la barre d'outils.
Connexion ou déconnexion d'un dossier distant via un accès réseau
❖ Vous n'avez pas besoin de vous connecter au dossier distant ; vous êtes connecté en permanence. Cliquez sur le
bouton Actualiser pour afficher vos fichiers distants.
Dernière mise à jour le 4/5/2011
50
UTILISATION DE DREAMWEAVER
Utilisation de sites Dreamweaver
Configuration d'un serveur d'évaluation
Si vous envisagez le développement de pages dynamiques, Dreamweaver doit pouvoir recourir aux services d'un
serveur d'évaluation pour générer et afficher du contenu dynamique pendant que vous procédez à la création du site.
Ce serveur d'évaluation peut se trouver sur votre ordinateur local, un serveur de développement, un serveur
intermédiaire ou un serveur de production.
Pour un aperçu détaillé des objectifs d'un serveur d'évaluation, consultez l'article de David Powers sur le Pôle de
développement Dreamweaver : Setting up a local testing server in Dreamweaver CS.
Voir aussi
« Choix d'un serveur d'application » à la page 555
« Préparation à la création de sites dynamiques » à la page 545
Configuration d'un serveur d'évaluation
1 Choisissez Site > Gérer les sites.
2 Cliquez sur Nouveau pour configurer un nouveau site, ou sélectionnez un site Dreamweaver existant et cliquez sur
Modifier.
3 Dans la boîte de dialogue Configuration du site, sélectionnez la catégorie Serveurs et effectuez l'une des actions
suivantes :
• Cliquez sur le bouton Ajouter nouveau serveur pour ajouter un nouveau serveur.
• Sélectionnez un serveur existant puis cliquez sur le bouton Modifier serveur existant.
4 Définissez les options de base requises, puis cliquez sur le bouton Avancé.
Remarque : Vous devez entrer une URL Web dans l'écran Base lorsque vous spécifiez un serveur d'évaluation. Pour
plus d'informations, consultez la section suivante.
5 Sous Serveur d'évaluation, sélectionnez le modèle de serveur que vous voulez utiliser pour votre application Web.
Remarque : Depuis la version CS5, Dreamweaver n'installe plus de comportements de serveur ASP.NET, ASP
JavaScript ou JSP. Toutefois, si vous travaillez sur des pages ASP.NET, ASP JavaScript ou JSP, Dreamweaver
continuera à prendre en charge le mode En direct, la coloration de code et les conseils de code pour ces pages. Pour que
ces fonctionnalités soient opérationnelles, il n'est pas nécessaire de sélectionner ASP.NET, ASP JavaScript ou JSP dans
la boîte de dialogue Définition du site.
6 Cliquez sur Enregistrer pour fermer l'écran Avancé. Ensuite, dans la catégorie Serveurs, spécifiez le serveur que
vous venez d'ajouter ou de modifier comme serveur d'évaluation.
A propos de l'URL Web pour le serveur d'évaluation
Vous devez spécifier une URL Web afin que Dreamweaver puisse faire appel aux services d'un serveur d'évaluation
pour afficher les données et se connecter aux bases de données pendant que vous procédez à la création du site,
Dreamweaver utilise la connexion au moment de la conception afin de vous transmettre des informations utiles sur la
base de données, telles que le nom des tableaux qu'elle contient et le nom des colonnes de ces tableaux.
L'URL Web d'un serveur d'évaluation est constituée du nom de domaine et du nom d'un sous-répertoire ou d'un
répertoire virtuel du répertoire de base de votre site Web.
Dernière mise à jour le 4/5/2011
51
UTILISATION DE DREAMWEAVER
Utilisation de sites Dreamweaver
Remarque : Bien que cette terminologie, utilisée dans Microsoft IIS, puisse différer d'un serveur à l'autre, les mêmes
concepts s'appliquent à la plupart des serveurs Web.
Le répertoire de base Dossier qui, sur le serveur, est mappé sur le nom de domaine de votre site. Supposons que le
dossier que vous souhaitez utiliser pour traiter des pages dynamiques est c:\sites\company\, et que ce dossier est votre
répertoire de base (c'est-à-dire que ce dossier est mappé sur le nom de domaine de votre site, par exemple
www.mystartup.com). Dans ce cas, le préfixe d'URL est http://www.mystartup.com/.
Si le dossier que vous souhaitez utiliser pour le traitement des pages dynamiques est un sous-dossier du répertoire de
base, ajoutez ce sous-dossier à l'URL. Supposons que votre répertoire de base est c:\sites\company\, que le nom de
domaine de votre site est www.mystartup.com et que le dossier à utiliser pour traiter les pages dynamiques est
c:\sites\company\inventory. Entrez l'URL Web suivante :
http://www.mystartup.com/inventory/
Si le dossier à utiliser pour traiter les pages dynamiques n'est pas votre répertoire de base ni l'un de ses sous-répertoires,
vous devez créer un répertoire virtuel.
Un répertoire virtuel Dossier qui ne se trouve pas physiquement dans le répertoire de base du serveur, même s'il
apparaît dans l'URL. Pour créer un répertoire virtuel, spécifiez un alias représentant le chemin du dossier dans l'URL.
Supposons que votre répertoire de base soit c:\sites\company et votre dossier de traitement d:\apps\inventory, et que
vous ayez défini pour ce dossier l'alias warehouse. Entrez l'URL Web suivante :
http://www.mystartup.com/warehouse/
Localhost Terme qui peut être utilisé pour désigner le répertoire de base dans vos URL lorsque le client (généralement
un navigateur, mais dans ce cas Dreamweaver) réside sur le même système que votre serveur Web. Supposons que
Dreamweaver réside sur le même système Windows que le serveur Web, que votre répertoire de base soit
c:\sites\company et que vous ayez défini un répertoire virtuel nommé warehouse désignant le dossier chargé du
traitement des pages dynamiques. Les URL Web suivantes doivent être entrées pour les serveurs Web sélectionnés :
Serveur Web
URL Web
ColdFusion MX 7
http://localhost:8500/warehouse/
IIS
http://localhost/warehouse/
Apache (Windows)
http://localhost:80/warehouse/
Jakarta Tomcat (Windows)
http://localhost:8080/warehouse/
Remarque : Par défaut, le serveur Web ColdFusion MX 7 s'exécute sur le port 8500, le serveur Web Apache sur le port 80
et le serveur Web Jakarta Tomcat sur le port 8080.
Le répertoire de base des utilisateurs exécutant le serveur Web Apache sur Macintosh est le suivant :
Users/MonNomd'Utilisateur/Sites (MonNomd'Utilisateur correspond à votre nom d'utilisateur Macintosh).
L'installation de Mac OS 10.1 ou version supérieure entraîne la définition automatique d'un alias intitulé
~MonNomd'Utilisateur. Dès lors, votre URL Web utilisée par défaut dans Dreamweaver se présente de la manière
suivante :
http://localhost/~MonNomd'Utilisateur/
Si le dossier que vous souhaitez utiliser pour le traitement des pages dynamiques correspond à
Users:MonNomd'Utilisateur:Sites:inventory, l'URL Web est la suivante :
http://localhost/~MonNomd'Utilisateur/inventory/
Dernière mise à jour le 4/5/2011
52
UTILISATION DE DREAMWEAVER
Utilisation de sites Dreamweaver
Gestion et modification de sites
La boîte de dialogue Gérer les sites a pour fonction de vous permettre de créer un nouveau site, de modifier, de
dupliquer, de supprimer un site, d'importer ou d'exporter les paramètres d'un site.
1 Sélectionnez Site > Gérer les sites et sélectionnez un site dans la liste de gauche.
2 Cliquez sur le bouton correspondant à l'opération qui vous convient, puis cliquez sur Terminé.
Nouveau Pour créer un nouveau site.
Modifier Pour modifier un site existant.
Dupliquer Pour créer une copie du site sélectionné. Cette copie s'affiche dans la liste des sites.
Supprimer Pour supprimer le site sélectionné ; cette opération est irréversible.
Exporter Pour exporter les paramètres d'un site sous forme de fichier XML (*.ste).
Importer Pour sélectionner un fichier de paramètres d'un site (*.ste) à importer.
Voir aussi
« Importation et exportation des paramètres d'un site » à la page 53
Modification d'un site Web distant existant dans Dreamweaver
Vous pouvez utiliser Dreamweaver pour copier un site distant existant (ou une partie d'un site distant) sur votre disque
dur local, et le modifier localement, même si vous n'avez pas utilisé Dreamweaver pour créer le site original.
1 Créez un dossier local contenant le site existant, puis définissez-le en tant que dossier local du site.
Remarque : Vous devez copier localement la structure complète de la branche concernée du site distant existant.
2 Configurez un dossier distant en utilisant les informations d'accès à distance de votre site existant. Vous devez vous
connecter au site existant pour télécharger les fichiers sur votre ordinateur avant de pouvoir les modifier.
Veillez à choisir le dossier racine correct pour le site distant.
3 Dans le panneau Fichiers (Fenêtre > Fichiers), cliquez sur le bouton Connecter à un hôte distant (pour un accès
FTP) ou sur Actualiser (pour un accès réseau) dans la barre d'outils pour afficher le site distant.
4 Modifiez le site :
• Si vous souhaitez travailler sur l'ensemble du site, sélectionnez, dans le panneau Fichiers, le dossier racine du site
distant, puis cliquez sur Acquérir le(s) fichier(s) dans la barre d'outils pour télécharger l'ensemble du site sur votre
disque local.
• Si vous désirez travailler sur un seul des fichiers ou dossiers du site, sélectionnez ce fichier ou dossier dans le volet
Affichage distant du panneau Fichiers et cliquez sur Acquérir le(s) fichier(s) dans la barre d'outils pour télécharger
ce fichier sur votre disque dur local.
Dreamweaver duplique automatiquement toute la partie de la structure du site distant nécessaire pour replacer le
fichier téléchargé au niveau adéquat dans la hiérarchie du site. Si vous ne modifiez qu'une partie d'un site, il est en
général conseillé de charger également les fichiers dépendants, tels que les fichiers d'image.
Suppression d'un site Dreamweaver de votre liste de sites
La suppression d'un Dreamweaver et de toutes ses informations de configuration de votre liste de site n'entraîne pas
la suppression des fichiers du site de votre ordinateur.
1 Choisissez Site > Gérer les sites.
Dernière mise à jour le 4/5/2011
53
UTILISATION DE DREAMWEAVER
Utilisation de sites Dreamweaver
2 Sélectionnez le nom du site.
3 Cliquez sur Supprimer, puis sur Oui pour supprimer le site de la liste ou sur Non pour conserver le site, puis cliquez
sur Terminé.
Importation et exportation des paramètres d'un site
Vous pouvez exporter les paramètres de votre site en tant que fichier XML que vous pourrez importer dans
Dreamweaver ultérieurement. Cela vous permet de déplacer des sites entre plusieurs ordinateurs et versions de produit
ainsi que de partager les paramètres avec d'autres utilisateurs.
Exportez les paramètres de votre site régulièrement de façon à disposer d'une copie de sauvegarde au cas où un
incident surviendrait sur ce site.
Exportation de vos sites
1 Sélectionnez Site > Gérer les sites.
2 Sélectionnez un ou plusieurs sites dont vous souhaitez exporter les paramètres, puis cliquez sur Exporter :
• Pour sélectionner plusieurs sites, appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en
cliquant avec la souris sur chaque site.
• Pour sélectionner une série de sites, cliquez en maintenant la touche Maj enfoncée sur le premier et le dernier site
de la série.
3 Si vous voulez sauvegarder les paramètres de votre site, choisissez la première option de la boîte de dialogue
Exportation du site, puis cliquez sur OK. Dreamweaver enregistre les informations de connexion au serveur distant
(nom d'utilisateur et mot de passe, par exemple), ainsi que les informations de chemin local.
4 Si vous voulez partager vos paramètres avec d'autres utilisateurs, choisissez la seconde option de la boîte de dialogue
Exportation du site, puis cliquez sur OK. (Dreamweaver n'enregistre pas les informations qui ne sont pas valables
pour d'autres utilisateurs (vos informations de connexion au serveur distant et de chemins locaux, par exemple).
5 Pour chaque site dont les paramètres doivent être exportés, recherchez un emplacement où vous souhaitez
enregistrer le site et cliquez sur Enregistrer. (Dreamweaver enregistre les paramètres de chaque site en tant que
fichier XML avec une extension de fichier .ste.)
6 Cliquez sur Terminé.
Remarque : Enregistrez le fichier *.ste dans le dossier racine de votre site ou sur votre bureau pour faciliter sa recherche.
Si vous ne vous souvenez pas de l'endroit où il se trouve, effectuez sur votre ordinateur une recherche portant sur les
fichiers dotés de l'extension *.ste.
Importation de sites
1 Sélectionnez Site > Gérer les sites.
2 Cliquez sur Importer.
3 Recherchez et sélectionnez un ou plusieurs sites (définis dans des fichiers ayant une extension .ste) dont vous
souhaitez importer les paramètres.
Pour sélectionner plusieurs sites, appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant
avec la souris sur chaque fichier .ste. Pour sélectionner une série de sites, cliquez en maintenant la touche Maj enfoncée
sur le premier et le dernier fichier de la série.
4 Cliquez sur Ouvrir, puis sur Terminé.
Une fois que Dreamweaver a importé les sites, leurs noms apparaissent dans la boîte de dialogue Gérer les sites.
Dernière mise à jour le 4/5/2011
54
UTILISATION DE DREAMWEAVER
Utilisation de sites Dreamweaver
Définition des préférences de site pour le transfert de fichiers
Sélectionnez vos préférences pour le contrôle des fonctions de transfert de fichiers dans le panneau Fichiers.
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
2 Dans la boîte de dialogue Préférences, sélectionnez la catégorie Site dans la liste de gauche.
3 Définissez les options, puis cliquez sur OK.
Toujours afficher Indique le site (local ou distant) qui doit toujours être affiché ainsi que le volet (gauche ou droit) du
panneau Fichiers dans lequel doivent être présentés les fichiers locaux et distants.
Par défaut, le site local apparaît toujours dans le volet droit. Le volet qui n'a pas été choisi (celui de gauche par défaut)
sera le volet interchangeable : il pourra alors afficher les fichiers de l'autre site (le site distant par défaut).
Fichiers dépendants Affiche une invite proposant de transférer les fichiers dépendants (images, feuilles de style
externes et autres fichiers référencés par les fichiers HTML) qui doivent être chargés par le navigateur en même temps
que le fichier HTML. Par défaut, les options Invite lors de Acquérir/Extraire et Invite lors de Placer/Archiver sont
toutes deux activées.
D'une manière générale, il est conseillé de télécharger les fichiers dépendants lorsque le fichier extrait est un nouveau
fichier, mais c'est inutile si les versions les plus récentes des fichiers dépendants sont déjà présentes sur le disque local.
Cela s'applique également lors du transfert et de l'archivage de fichiers : il n'est pas nécessaire si des copies mises à jour
sont déjà présentes dans la destination.
Si vous désactivez ces options, vos fichiers dépendants ne sont pas transférés. Ainsi, pour forcer l'affichage la boîte de
dialogue Fichiers dépendants même lorsque ces options sont désélectionnées, maintenez la touche Alt (Windows) ou
Option (Macintosh) enfoncée tout en choisissant Acquérir, Placer, Archiver ou Extraire.
Connexion FTP Détermine si la connexion avec le site distant doit être interrompue après le délai d'inactivité spécifié.
Délai FTP Indique le temps, exprimé en secondes, pendant lequel Dreamweaver tente d'établir une connexion avec le
serveur distant.
S'il n'y a toujours pas de réponse à l'issue du délai indiqué, Dreamweaver affiche une boîte de dialogue pour vous en
avertir.
Options de transfert FTP Détermine si Dreamweaver sélectionne l'option par défaut après un nombre de secondes
spécifié, lorsqu'une boîte de dialogue apparaît lors du transfert d'un fichier et que l'utilisateur ne fournit aucune
réponse.
Hôte proxy Spécifie l'adresse du serveur proxy par lequel vous vous connectez aux serveurs externes si vous vous
trouvez derrière un pare-feu.
Dans le cas contraire, laissez ce champ vierge. Si vous vous trouvez derrière un pare-feu, activez l'option Utiliser un
proxy de la boîte de dialogue Définition du site (Serveurs > Modifier un serveur existant (icône représentant un
crayon) > Autres options).
Port du proxy Spécifie le port de votre proxy ou de votre pare-feu par lequel vous passez pour vous connecter au
serveur distant. Si vous vous connectez par l'intermédiaire d'un port autre que 21 (port par défaut pour FTP), tapez
son numéro ici.
Options de placement : Enregistrer les fichiers avant de les placer Indique que les fichiers non enregistrés sont
automatiquement enregistrés avant d'être placés sur le site distant.
Options de déplacement : Demander avant de déplacer les fichiers sur le serveur Vous alerte lorsque vous tentez de
déplacer des fichiers sur le site distant.
Dernière mise à jour le 4/5/2011
55
UTILISATION DE DREAMWEAVER
Utilisation de sites Dreamweaver
Gérer les sites Ouvre la boîte de dialogue Gérer les sites, dans laquelle vous pouvez créer un site ou modifier un site
existant.
Vous pouvez définir si les types de fichiers transférés doivent l'être au format ASCII (texte) ou binaire, et ce en
personnalisant le fichier FTPExtensionMap.txt situé dans le dossier Dreamweaver/Configuration (sur Macintosh, il
s'agit du fichier FTPExtensionMapMac.txt). Pour plus d'informations, voir Extension de Dreamweaver.
Gestion des sites Contribute avec Dreamweaver
Gestion de sites Contribute
Adobe® Contribute® CS4 regroupe les fonctions d'un navigateur Web et d'un éditeur de pages Web. Il permet à vos
collègues ou clients de naviguer jusqu'à une page d'un site que vous avez créé et de modifier ou de mettre à jour cette
page s'ils possèdent les droits d'accès adéquats. Les utilisateurs de Contribute peuvent ajouter et mettre à jour du
contenu Web de base, y compris du texte mis en forme, des images, des tableaux et des liens. Les administrateurs de
sites Contribute peuvent limiter les actions que les utilisateurs ordinaires (non administrateurs) peuvent effectuer dans
un site.
Remarque : Cette section s'adresse aux administrateurs de Contribute.
En tant qu'administrateur du site, vous donnez la possibilité aux personnes qui ne sont pas administrateurs de modifier
des pages en créant et en leur envoyant une clé de connexion (pour plus d'informations sur la façon de procéder,
consultez l'aide de Contribute). Vous pouvez également configurer une connexion à un site Contribute à l'aide de
Dreamweaver qui vous permet, à vous ou à votre concepteur de site, de vous connecter au site Contribute et d'utiliser
toutes les fonctions de modification disponibles dans Dreamweaver.
Contribute ajoute des fonctionnalités à votre site Web avec Contribute Publishing Server (CPS), une suite
d'applications de publication et d'outils de gestion utilisateur qui vous permet d'intégrer Contribute au service
d'annuaire utilisateur de votre organisation (Lightweight Directory Access Protocol (LDAP) ou Active Directory, par
exemple). Lorsque vous activez votre site Dreamweaver en tant que site Contribute, Dreamweaver lit les paramètres
d'administration de Contribute chaque fois que vous vous connectez au site distant. Si Dreamweaver détecte que CPS
est actif, il hérite de certaines fonctionnalités des services CPS (restauration des fichiers et consignation des
événements, par exemple).
Vous pouvez utiliser Dreamweaver pour vous connecter à un site Contribute et modifier un fichier de ce site. La
plupart des options Dreamweaver fonctionnent avec un site Contribute de la même façon qu'avec tout autre site.
Toutefois, lorsque vous utilisez Dreamweaver avec un site Contribute, Dreamweaver effectue automatiquement
certaines opérations de gestion de fichiers, telles que l'enregistrement de différentes versions d'un document et la
consignation de certains événements dans la console CPS.
Pour plus d'informations, consultez l'aide de Contribute.
Structure du site et conception de pages pour un site Contribute
Pour permettre aux utilisateurs de Contribute de modifier votre site Web, tenez compte des considérations suivantes
lors de sa structuration :
• Utilisez une structure de site simple. Evitez de créer de nombreux niveaux de dossiers. Regroupez les éléments
associés dans un même dossier.
• Définissez des droits en lecture et en écriture appropriés pour les dossiers sur le serveur.
Dernière mise à jour le 4/5/2011
56
UTILISATION DE DREAMWEAVER
Utilisation de sites Dreamweaver
• Ajoutez des pages d'index aux dossiers à mesure que vous les créez pour inciter les utilisateurs de Contribute à
placer les nouvelles pages dans les dossiers appropriés. Par exemple, si les utilisateurs de Contribute fournissent des
pages contenant des comptes rendus de réunions, vous pouvez créer un dossier dans le dossier racine du site appelé
comptes_rendus et y insérer une page d'index. Vous devez ensuite créer un lien qui renvoie à la page d'index des
comptes rendus sur la page principale du site. Un utilisateur de Contribute peut alors atteindre la page d'index et
créer une page de procès-verbal pour une réunion donnée, désignée par un lien depuis cette page.
• Dans chaque page d'index du dossier, fournissez une liste de liens vers chaque page et document contenus dans ce
dossier.
• Utilisez des conceptions de pages simples en évitant des mises en forme fantaisistes.
• Utilisez CSS plutôt que des balises HTML et attribuez un nom descriptif à vos styles CSS. Si les utilisateurs de
Contribute utilisent un jeu de styles standard dans Microsoft Word, attribuez à vos styles CSS les mêmes noms que
ceux des styles Word correspondants, afin que Contribute puisse faire correspondre les styles lorsqu'un utilisateur
copie des données d'un document Word et les colle dans une page Contribute.
• Pour empêcher les utilisateurs de Contribute d'utiliser un style CSS, modifiez le nom du style de sorte qu'il
commence par mmhide_. Par exemple, si vous utilisez un style nommé Justification_droite dans une page mais que
vous ne souhaitez pas que les utilisateurs de Contribute puissent utiliser ce style, renommez-le de la façon suivante :
mmhide_Justification_droite.
Remarque : Vous devez ajouter mmhide_ au nom du style en mode Code et non dans le panneau CSS.
• Dans un souci de simplicité, utilisez aussi peu de styles CSS que possible.
• Si vous utilisez des inclusions côté serveur pour des éléments de pages HTML, par exemple des en-tête ou des pieds
de page, créez une page HTML non liée contenant les liens vers les fichiers d'inclusion. Les utilisateurs de
Contribute peuvent ensuite marquer cette page et l'utiliser pour rechercher les fichiers d'inclusion et les modifier.
Voir aussi
« Création d'un modèle Dreamweaver » à la page 411
« Création et gestion de CSS » à la page 134
« Utilisation des inclusions côté serveur » à la page 353
Transfert de fichiers depuis et vers un site Contribute
Contribute utilise un système similaire au système d'archivage et d'extraction de Dreamweaver afin qu'un seul
utilisateur à la fois puisse modifier une page Web donnée. Lorsque vous activez la compatibilité avec Contribute dans
Dreamweaver, le système d'archivage et d'extraction de Dreamweaver est automatiquement activé.
Pour transférer des fichiers depuis et vers un site Contribute à l'aide de Dreamweaver, utilisez toujours les commandes
Archiver et Extraire. Si vous utilisez les commandes Placer et Acquérir pour transférer les fichiers, vous risquez
d'écraser les dernières modifications apportées à un fichier par un utilisateur de Contribute.
Lorsque vous archivez un fichier dans un site Contribute, Dreamweaver effectue automatiquement une copie de
sauvegarde de la version précédemment archivée du fichier dans le dossier _baks et ajoute votre nom d'utilisateur et la
date à un fichier Design Notes.
Voir aussi
« Archivage et extraction de fichiers » à la page 91
Dernière mise à jour le 4/5/2011
57
UTILISATION DE DREAMWEAVER
Utilisation de sites Dreamweaver
Autorisations des fichiers et des dossiers Contribute sur le serveur
Contribute offre un moyen de gérer les autorisations de fichiers et de dossiers pour chaque rôle d'utilisateur que vous
aurez défini ; toutefois, Contribute ne permet pas de gérer les autorisations de lecture et d'écriture de base affectées aux
fichiers et aux dossiers par le serveur. Dans Dreamweaver, vous pouvez gérer ces autorisations directement sur
le serveur.
Si un utilisateur de Contribute ne dispose pas de droit d'accès en lecture sur le serveur pour un fichier dépendant, tel
qu'une image affichée dans une page, le contenu de ce fichier ne s'affiche pas dans la fenêtre Contribute. Par exemple,
si un utilisateur ne dispose pas de droit d'accès en lecture à un dossier d'images, les images contenues dans ce dossier
s'affichent sous la forme d'icônes d'image déchirée dans Contribute. De même, les modèles Dreamweaver sont stockés
dans un sous-dossier du dossier racine du site. Ainsi, si un utilisateur de Contribute ne dispose pas d'accès en lecture
au dossier racine, il ne peut pas utiliser les modèles de ce site, sauf si vous copiez les modèles dans un dossier accessible.
Lorsque vous définissez un site Dreamweaver, vous devez accorder aux utilisateurs des droits d'accès en lecture au
dossier /_mm sur le serveur (sous-dossier _mm du dossier racine), ainsi qu'au dossier /Templates et à tous les dossiers
contenant des ressources dont ils auront besoin.
Si pour une raison quelconque, vous ne pouvez pas accorder de droits d'accès en lecture au dossier /Templates, vous
pouvez tout de même rendre les modèles accessibles aux utilisateurs de Contribute. Consultez la rubrique « Activation
de l'accès aux modèles sans l'accès au dossier racine pour les utilisateurs de Contribute » à la page 61.
Pour plus d'informations sur les autorisations Contribute, voir Administration de Contribute dans l'aide de Contribute.
Fichiers spéciaux Contribute
Contribute utilise divers fichiers spéciaux qui ne sont pas destinés à être consultés par les visiteurs du site :
• le fichier de paramètres partagés, avec une extension CSI, qui s'affiche dans un dossier nommé _mm dans le dossier
racine du site et contient des informations utilisées par Contribute pour la gestion du site ;
• des versions précédentes de fichiers, dans des dossiers nommés _baks ;
• des versions temporaires de pages, afin que les utilisateurs puissent afficher un aperçu des modifications ;
• des fichiers de verrouillage temporaires, indiquant qu'une page spécifique est en cours de modification ou affichée
en aperçu ;
• des fichiers Design Notes contenant des métadonnées relatives aux pages du site.
En général, vous ne devez pas modifier ces fichiers spéciaux dans Dreamweaver ; Dreamweaver les gère
automatiquement.
Si vous ne souhaitez pas que ces fichiers spéciaux Contribute apparaissent sur votre serveur publiquement
accessible, vous pouvez définir un serveur intermédiaire sur lequel les utilisateurs de Contribute pourront travailler
sur les pages. Vous pouvez ensuite régulièrement copier ces pages Web du serveur intermédiaire au serveur de
production qui se trouve sur le Web. Si vous utilisez un serveur intermédiaire, copiez uniquement les pages Web
sur le serveur de production. Ne copiez aucun des fichiers spéciaux Contribute mentionnés ci-dessus. En
particulier, ne copiez pas les dossiers _mm et _baks sur le serveur de production.
Remarque : Pour plus d'informations sur la configuration d'un serveur afin d'éviter que les visiteurs ne voient les
fichiers des dossiers commençant par un souligné, consultez le chapitre traitant de la sécurité des sites Web dans l'aide
de Contribute.
Parfois, vous devrez supprimer manuellement d'autres fichiers spéciaux Contribute. Par exemple, si Contribute
n'arrive pas à supprimer des pages temporaires d'aperçu, une fois l'aperçu fermé par l'utilisateur, vous devez supprimer
ces pages temporaires manuellement. Le nom de fichier des pages temporaires d'aperçu commence par TMP.
Dernière mise à jour le 4/5/2011
58
UTILISATION DE DREAMWEAVER
Utilisation de sites Dreamweaver
De même, un fichier de verrouillage obsolète peut accidentellement rester sur le serveur. Dans ce cas, vous devez le
supprimer manuellement pour que les autres utilisateurs puissent modifier la page.
Préparation d'un site à utiliser avec Contribute
Si vous préparez un site Dreamweaver existant pour les utilisateurs de Contribute, vous devez activer la compatibilité
avec Contribute de façon explicite afin d'utiliser les fonctions relatives à Contribute ; Dreamweaver n'affiche pas de
message vous invitant à le faire ; toutefois, lorsque vous vous connectez à un site qui a été configuré en tant que site
Contribute (avec un administrateur), Dreamweaver vous invite à activer la compatibilité avec Contribute.
Tous les types de connexion ne prennent pas en charge la compatibilité avec Contribute. Les restrictions suivantes
s'appliquent aux types de connexion :
• Si vous vous connectez à votre site distant à l'aide de WebDAV, vous ne pouvez pas activer la compatibilité avec
Contribute, car ces systèmes de commande source ne sont pas compatibles avec les systèmes Design Notes et les
systèmes d'archivage et d'extraction que Dreamweaver utilise pour les sites Contribute.
• Si vous utilisez RDS pour vous connecter à votre site distant, vous pouvez activer la compatibilité avec Contribute,
mais vous devez ensuite personnaliser votre connexion avant de pouvoir la partager avec des utilisateurs de
Contribute.
• Si vous utilisez votre ordinateur local comme serveur Web, vous devez définir le site à l'aide d'une connexion FTP
ou réseau (au lieu d'un simple chemin de dossier local) pour pouvoir partager votre connexion avec des utilisateurs
de Contribute.
Lorsque vous activez la compatibilité avec Contribute, Dreamweaver active automatiquement Design Notes (y
compris l'option Télécharger les Design Notes pour les partager), ainsi que le système d'archivage et d'extraction de
fichiers.
Si Contribute Publishing Server (CPS) est actif sur le site distant auquel vous vous connectez, Dreamweaver notifie
CPS dès que vous exécutez une opération réseau, telle que l'archivage, la restauration ou la publication d'un fichier. Le
CPS conserve une trace de ces événements, que vous pouvez afficher dans la console d'administration CPS. (Si vous
désactivez CPS, ces événements ne sont pas consignés.) L'activation de CPS s'effectue via Contribute. Pour plus
d'informations, consultez l'aide d'Adobe Contribute.
Remarque : Vous pouvez rendre un site compatible avec Contribute sans que Contribute soit installé sur votre
ordinateur. Toutefois, si vous souhaitez démarrer Contribute Administrator à partir de Dreamweaver, Contribute doit
être installé sur le même ordinateur que Dreamweaver et vous devez être connecté au site distant avant d'activer la
compatibilité avec Contribute. Dans le cas contraire, Dreamweaver ne peut pas lire les paramètres d'administration de
Contribute pour déterminer si les services CPS et l'option de restauration sont activés.
Important : Vous devez vous assurer que le fichier de paramètres partagés (fichier CSI) que Contribute emploie pour
administrer le site se trouve bien sur le serveur distant et n'est pas endommagé. Contribute crée automatiquement ce
fichier (et écrase ses anciennes versions) dès que vous effectuez des tâches d'administration dans Contribute
Administrator. Si le fichier de paramètres partagés ne se trouve pas sur le serveur, ou s'il est endommagé, Dreamweaver
vous informe que le fichier requis pour la compatibilité avec Contribute n'existe pas sur le serveur dès que vous tentez une
opération réseau (comme un placement). Pour vous assurer que le fichier correct se trouve bien sur le serveur, désactivez
la connexion au serveur dans Dreamweaver, démarrez Contribute Administrator, apportez une modification
administrative, puis reconnectez-vous au serveur dans Dreamweaver. Pour plus d'informations, consultez l'aide d'Adobe
Contribute.
1 Choisissez Site > Gérer les sites.
2 Sélectionnez un site, puis cliquez sur Modifier.
Dernière mise à jour le 4/5/2011
59
UTILISATION DE DREAMWEAVER
Utilisation de sites Dreamweaver
3 Dans la boîte de dialogue Configuration du site, développez Paramètres avancés, sélectionnez la catégorie
Contribute, puis activez l'option Activer la compatibilité avec Contribute.
4 Si une boîte de dialogue s'affiche indiquant que vous devez activer Design Notes et la fonction Archiver/Extraire,
cliquez sur OK.
5 Si vous n'avez pas déjà fourni les informations de contact pour la fonction Archiver/Extraire, entrez votre nom et
votre adresse électronique dans la boîte de dialogue, puis cliquez sur OK. L'état de la restauration, l'état des services
CPS, la zone de texte URL de la racine du site et le bouton Administrer le site dans Contribute apparaissent dans la
boîte de dialogue Définition du site.
Si la restauration est activée dans Contribute, vous pouvez restaurer les versions précédentes des fichiers que vous
avez modifiés dans Dreamweaver.
6 Vérifiez l'URL qui s'affiche dans la zone de texte URL de la racine du site et modifiez-la le cas échéant. Dreamweaver
construit une URL de la racine du site en fonction des informations de définition de site que vous avez fournies,
mais il se peut que l'URL construite ne soit pas tout à fait correcte.
7 Cliquez sur le bouton Tester pour vérifier si l'URL que vous avez saisie est correcte.
Remarque : Si vous êtes prêt à envoyer une clé de connexion ou à effectuer les tâches d'administration du site
Contribute, ignorez les étapes restantes.
8 Cliquez sur Administrer le site dans Contribute si vous voulez apporter des modifications administratives.
N'oubliez pas que Contribute doit être installé sur le même ordinateur si vous voulez ouvrir Contribute
Administrator à partir de Dreamweaver.
9 Cliquez sur Enregistrer puis sur Terminé.
Voir aussi
« Restauration de fichiers (utilisateurs de Contribute) » à la page 105
Administration d'un site Contribute avec Dreamweaver
Après avoir activé la compatibilité avec Contribute, vous pouvez utiliser Dreamweaver pour lancer Contribute afin
d'effectuer les tâches d'administration du site.
Remarque : Contribute doit être installé sur le même ordinateur que Dreamweaver.
En tant qu'administrateur d'un site Contribute, vous pouvez :
• modifier les paramètres administratifs au niveau du site ;
Les paramètres administratifs de Contribute rassemblent les paramètres qui s'appliquent à l'ensemble des
utilisateurs de votre site Web. Ces paramètres permettent de configurer Contribute avec précision pour bénéficier
d'une meilleure expérience utilisateur.
• modifier les autorisations accordées aux rôles utilisateur de Contribute ;
• définir les utilisateurs de Contribute.
Les utilisateurs de Contribute nécessitent certaines informations sur le site pour pouvoir s'y connecter. Vous
pouvez regrouper toutes ces informations dans un fichier, appelé clé de connexion, que vous envoyez aux
utilisateurs de Contribute.
Remarque : Une clé de connexion ne correspond pas à un fichier de site exporté de Dreamweaver
Dernière mise à jour le 4/5/2011
60
UTILISATION DE DREAMWEAVER
Utilisation de sites Dreamweaver
Avant de donner aux utilisateurs de Contribute les informations de connexion dont ils ont besoin pour modifier
les pages, utilisez Dreamweaver pour créer la hiérarchie de dossiers de base de votre site, ainsi que les modèles et
les feuilles de style CSS nécessaires au site.
1 Choisissez Site > Gérer les sites.
2 Sélectionnez un site, puis cliquez sur Modifier.
3 Dans la boîte de dialogue Configuration du site, développez Paramètres avancés, puis sélectionnez la catégorie
Contribute.
4 Cliquez sur le bouton Administrer le site dans Contribute.
Remarque : Ce bouton s'affiche uniquement si vous avez activé la compatibilité avec Contribute.
5 Si nécessaire, tapez le mot de passe administrateur, puis cliquez sur OK.
La boîte de dialogue Administration du site Web s'affiche.
• Pour modifier les paramètres administratifs, sélectionnez une catégorie dans la liste de gauche, puis modifiez les
paramètres en fonction des besoins.
• Pour modifier les paramètres de rôle, dans la catégorie Utilisateurs et rôles, cliquez sur Modifier les paramètres de
rôle, puis apportez les modifications nécessaires.
• Pour envoyer une clé de connexion afin de définir les utilisateurs, dans la catégorie Utilisateurs et rôles, cliquez sur
Envoyer la clé de connexion, puis renseignez l'Assistant de connexion.
6 Cliquez sur Fermer, cliquez sur OK, puis sur Terminé.
Pour plus d'informations sur les paramètres administratifs, la gestion des rôles utilisateur ou la création d'une clé de
connexion, voir l'aide de Contribute.
Voir aussi
« Importation et exportation des paramètres d'un site » à la page 53
Suppression, déplacement ou modification du nom d'un fichier distant sur un
site Contribute
Pour supprimer un fichier d'un serveur distant qui héberge un site Contribute, procédez de la même façon que pour
supprimer un fichier sur le serveur de tout site Dreamweaver. Toutefois, lorsque vous supprimez un fichier d'un site
Contribute, Dreamweaver vous demande si vous souhaitez supprimer toutes les anciennes versions du fichier. Si vous
décidez de les conserver, Dreamweaver enregistre une copie de la version actuelle dans le dossier _baks afin que vous
puissiez la restaurer ultérieurement.
Pour modifier le nom d'un fichier distant ou déplacer le fichier d'un dossier à un autre dans un site Contribute,
procédez de la même façon que sur tout site Dreamweaver. Dans un site Contribute, Dreamweaver renomme ou
déplace également les anciennes versions du fichier associées qui sont enregistrées dans le dossier _baks.
1 Sélectionnez le fichier dans le volet distant du panneau Fichiers (Fenêtre > Fichiers) et appuyez sur Retour arrière
(Windows) ou Arrière (Macintosh).
Une boîte de dialogue s'affiche vous demandant de confirmer la suppression du fichier.
2 Dans la boîte de dialogue de confirmation :
• Pour supprimer toutes les versions précédentes du fichier ainsi que la version actuelle, sélectionnez l'option
Supprimer les versions de restauration.
• Pour conserver les anciennes versions sur le serveur, désélectionnez l'option Supprimer les versions de restauration.
Dernière mise à jour le 4/5/2011
61
UTILISATION DE DREAMWEAVER
Utilisation de sites Dreamweaver
3 Cliquez sur Oui pour supprimer le fichier.
Activation de l'accès aux modèles sans l'accès au dossier racine pour les
utilisateurs de Contribute
Dans un site Contribute, les autorisations de fichiers et de dossiers de base sont gérées directement sur le serveur. Si
pour des raisons de sécurité, vous ne pouvez pas accorder de droits d'accès en lecture au dossier /Templates, vous
pouvez tout de même rendre les modèles accessibles aux utilisateurs.
1 Définissez le site Contribute afin que le dossier racine soit le dossier qui s'affiche en tant que racine pour les
utilisateurs.
2 Copiez manuellement le dossier de modèles du dossier racine du site principal dans le dossier racine du site
Contribute, à l'aide du panneau Fichiers.
3 Après avoir modifié le site principal, recopiez les modèles modifiés dans les sous-dossiers appropriés.
Si vous faites appel à cette méthode, n'utilisez pas de liens relatifs à la racine du site dans les sous-dossiers. Les liens
relatifs à la racine du site sont associés au dossier racine principal du serveur, et non au dossier racine défini dans
Dreamweaver. Les utilisateurs de Contribute ne peuvent pas créer de liens relatifs à la racine du site.
Si les liens d'une page Contribute apparaissent rompus, il peut s'agir d'un problème d'autorisations pour le dossier, en
particulier si les liens renvoient à des pages qui ne se trouvent pas dans le dossier racine de l'utilisateur de Contribute.
Vérifiez les autorisations de lecture et d'écriture pour les dossiers sur le serveur.
Voir aussi
« Chemins absolus, relatifs au documents et relatifs à la racine du site » à la page 282
Dépannage d'un site Contribute
Si un fichier distant d'un site Contribute semble avoir été extrait, mais qu'il n'est pas réellement verrouillé sur
l'ordinateur de l'utilisateur, vous pouvez déverrouiller le fichier afin de permettre aux utilisateurs de le modifier.
Lorsque vous cliquez sur un bouton lié à l'administration d'un site Contribute, Dreamweaver vérifie qu'il peut se
connecter au site distant et que l'URL de la racine du site indiquée pour le site est valide. Si Dreamweaver ne peut pas
se connecter ou si l'URL n’est pas valide, un message d'erreur s'affiche.
Si les outils d'administration ne fonctionnent pas correctement, cela peut être dû au dossier _mm .
Déverrouillage d'un fichier dans un site Contribute
Remarque : Avant de suivre cette procédure, assurez-vous que le fichier n'est pas extrait. Si vous déverrouillez un fichier
pendant qu'un utilisateur de Contribute le modifie, plusieurs utilisateurs risquent de modifier ce fichier en même temps.
1 Effectuez l'une des opérations suivantes :
• Ouvrez le fichier dans la fenêtre Document, puis choisissez Site > Annuler extraction.
• Dans le panneau Fichiers (Fenêtre > Fichiers), cliquez avec le bouton droit (Windows) ou en maintenant la touche
Ctrl enfoncée (Macintosh), puis sélectionnez Annuler extraction.
Une boîte de dialogue peut s'afficher, qui indique l'utilisateur ayant extrait le fichier et demande de confirmer le
déverrouillage du fichier.
2 Si cette boîte de dialogue s'affiche, cliquez sur Oui pour confirmer.
Le fichier est déverrouillé sur le serveur.
Dernière mise à jour le 4/5/2011
62
UTILISATION DE DREAMWEAVER
Utilisation de sites Dreamweaver
Dépannage des problèmes de connexion pour un site Contribute
1 Vérifiez l'URL de la racine du site dans la catégorie Contribute de la boîte de dialogue Définition de site en ouvrant
cette URL dans un navigateur, pour vous assurer qu'elle ouvre la bonne page.
2 Cliquez sur le bouton Tester dans la catégorie Infos distantes de la boîte de dialogue Définition du site pour vous
assurer que vous pouvez vous connecter au site.
3 Si l'URL est correcte mais qu'un message d'erreur s'affiche lorsque vous effectuez un test, contactez votre
administrateur système pour obtenir de l'aide.
Dépannage des outils administratifs de Contribute
1 Sur le serveur, assurez-vous que vous disposez des autorisations de lecture et d'écriture, voire d'exécution, pour le
dossier _mm.
2 Vérifiez que le dossier _mm contient un fichier de paramètres partagés portant l'extension CSI.
3 Si ce n'est pas le cas, utilisez l'Assistant de connexion pour créer une connexion au site et devenir administrateur
du site. Le fichier de paramètres partagés est créé automatiquement lorsque vous devenez administrateur. Pour plus
d'informations sur la façon de devenir administrateur d'un site Web Contribute existant, consultez la section
Administration de Contribute dans l'aide de Contribute.
Dernière mise à jour le 4/5/2011
63
Chapitre 4 : Création et gestion de fichiers
Création et ouverture de documents
A propos de la création de documents Dreamweaver
Dreamweaver fournit un environnement souple pour l'utilisation de divers documents Web. Outre les documents
HTML, vous pouvez créer et ouvrir divers documents en mode texte, de type CFML (ColdFusion Markup Language),
ASP, JavaScript et CSS (Cascading Style Sheets). Les fichiers de code source, tels que Visual Basic, .NET, C# et Java,
sont également pris en charge.
Dreamweaver propose diverses options pour la création d'un nouveau document. Vous pouvez créer les types de
document suivants :
• un nouveau document ou un modèle vierge ;
• un document basé sur l'une des mises en pages prédéfinies fournies avec Dreamweaver, dont plus de 30 mises en
page basées sur CSS ;
• un document basé sur un de vos modèles existants.
Vous pouvez également définir les préférences des documents. Par exemple, si vous avez l'habitude de travailler
avec un type particulier de document, vous pouvez le définir comme type par défaut pour les nouvelles pages.
Vous pouvez aisément définir des propriétés de document, telles que les balises meta, le titre du document et la
couleur de l'arrière-plan, ainsi que d'autres propriétés de page, en mode Création ou en mode Code.
Types de fichier Dreamweaver
Vous pouvez travailler avec un grand choix de types de fichiers dans Dreamweaver. Le fichier HTML est celui avec
lequel vous travaillerez le plus souvent. Les fichiers HTML (pour fichiers de type Hypertext Markup Language)
contiennent le langage à base de balises qui se charge d'afficher une page Web dans un navigateur. Vous pouvez
enregistrer les fichiers HTML avec l'extension .html ou .htm. Dreamweaver enregistre par défaut les fichiers avec
l'extension .html.
Dreamweaver permet de créer et de modifier des pages Web HTML5. Les mises en forme de départ sont également
disponibles pour la création de nouvelles pages HTML5.
Voici quelques autres types de fichiers courants que vous pourriez utiliser quand vous travaillez avec Dreamweaver :
CSS Les fichiers CSS (Cascading Style Sheet, feuille de style en cascade) possèdent l'extension .css. Ils sont utilisés pour
formater le contenu HTML et fixer le positionnement de divers éléments de page.
GIF Les fichiers GIF (Graphics Interchange Format) possèdent l'extension .gif. Ce format graphique est très utilisé
dans les dessins humoristiques, les logos, les graphismes pourvus de zones transparentes et les animations. Les GIF
sont constitués d'un maximum de 256 couleurs.
JPEG Les fichiers JPEG (Joint Photographic Experts Group, du nom de l'organisation qui a créé le format) possèdent
l'extension .jpg et correspondent généralement à des photographies ou à des images très colorées. Ce format est le plus
approprié pour les photographies numériques ou scannées, les images utilisant des textures, les images pourvues de
transitions à gradient de couleurs ainsi que toutes les images exigeant plus de 256 couleurs.
XML Les fichiers XML (Extensible Markup Language) possèdent l'extension .xml. Ils contiennent des données brutes
qui peuvent être formatées en utilisant XSL (Extensible Stylesheet Language).
Dernière mise à jour le 4/5/2011
64
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
XSL Les fichiers XSL (Extensible Stylesheet Language) possèdent l'extension .xsl ou .xslt. Ils sont utilisés pour créer des
données XML que vous voulez afficher sur une page Web.
CFML Les fichiers CFML (ColdFusion Markup Language ) possèdent l'extension .cfm. Ils sont utilisés pour traiter des
pages dynamiques.
PHP Les fichiers Hypertext Preprocessor possèdent l'extension .php et sont utilisés pour traiter des pages dynamiques.
Voir aussi
« Affichage de données XML avec XSLT » à la page 517
« Création visuelle d'applications » à la page 632
« Description des feuilles de style en cascade » à la page 129
Création d'une page vierge
Vous pouvez créer une page contenant une mise en forme CSS prédéfinie, ou créer une page totalement vierge puis
créer la mise en forme de votre choix.
1 Choisissez Fichier > Nouveau.
2 Dans la catégorie Page vierge de la boîte de dialogue Nouveau document, sélectionnez le type de page à créer dans
la colonne Type de page. Par exemple, choisissez HTML pour créer une page HTML ordinaire, ColdFusion pour
créer une page ColdFusion, et ainsi de suite.
3 Si vous voulez que la nouvelle page contienne une mise en forme CSS, sélectionnez une mise en forme CSS
prédéfinie dans la colonne Mise en forme. Dans le cas contraire, cliquez sur Aucune. En fonction de votre sélection,
un aperçu et la description de la mise en forme sélectionnée s'affichent sur la droite de la boîte de dialogue.
Les mises en forme CSS prédéfinies fournissent les types de colonnes suivants :
Fixe La largeur de colonne est définie en pixels. La colonne n'est pas redimensionnée selon la taille du navigateur ou
des paramètres de texte du visiteur du site.
Liquide La largeur de colonne est définie en tant que pourcentage de la largeur du navigateur du visiteur du site. La
mise en page s'adapte si le visiteur du site augmente ou diminue la largeur de son navigateur, mais pas en fonction des
paramètres de texte définis par le visiteur.
Dreamweaver propose également deux mises en forme CSS HTML5 : deux et trois colonnes fixes.
4 Sélectionnez un type de document dans le menu DocType. Dans la plupart des cas, vous pouvez conserver l'option
par défaut, XHTML 1.0 transitionnel.
Sélectionnez l'une des définitions de type de document (DTD) XHTML pour rendre la page compatible XHTML. Par
exemple, vous pouvez rendre un document HTML compatible XHTML en sélectionnant XHTML 1.0 transitionnel ou
XHTML 1.0 Strict dans le menu déroulant. Le langage XHTML (Extensible Hypertext Markup Language) n'est autre
qu'une nouvelle mouture de HTML sous la forme d'une application XML. En règle générale, l'utilisation de XHTML
vous permet d'exploiter les avantages de XML tout en garantissant la compatibilité descendante et ascendante de vos
documents Web.
Remarque : Pour plus d'informations sur XHTML, consultez le site Web du World Wide Web Consortium (W3C), qui
contient la spécification pour XHTML 1.1 - Module-Based XHTML (www.w3.org/TR/xhtml11/) et XHTML 1.0
(www.w3c.org/TR/xhtml1/), ainsi que les sites de validateur XHTML où vous trouverez des fichiers Web
(http://validator.w3.org/) et des fichiers locaux (http://validator.w3.org/file-upload.html).
Dreamweaver propose également HTML5 comme option doctype.
Dernière mise à jour le 4/5/2011
65
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
5 Si vous avez choisi une mise en forme CSS dans la colonne Mise en forme, choisissez l'emplacement du code CSS
de mise en forme dans la liste déroulante CSS de mise en forme.
Ajouter à l'en-tête Ajoute le code CSS de mise en forme à l'en-tête de la page que vous créez.
Créer un nouveau fichier Ajoute le code CSS de mise en forme à un nouveau fichier CSS externe et associe la nouvelle
feuille de style à la page que vous créez.
Lier au fichier existant Permet d'indiquer un fichier CSS existant qui contient déjà les règles CSS requises pour la mise
en forme. Pour ce faire, cliquez sur l'icône Ajouter une feuille de style au-dessus du volet Lier le fichier CSS, puis
sélectionnez une feuille de style CSS existante. Cette option est particulièrement utile si vous voulez utiliser la même
mise en forme CSS (les règles CSS figurant dans un fichier) dans plusieurs documents.
6 (Facultatif) Vous pouvez également lier des feuilles de style CSS à la nouvelle page (sans rapport avec la mise en
forme CSS) lors de la création de cette page. Pour ce faire, cliquez sur l'icône Ajouter une feuille de style
dessus du volet Lier le fichier CSS, puis sélectionnez une feuille de style CSS.
au-
Vous trouverez une description détaillée de ce processus dans l'article de David Powers « Automatically attaching a
style sheet to new documents » (en anglais).
7 Choisissez Activer InContext Editing si vous voulez créer une page qui deviendra compatible avec InContext
Editing dès que vous l'enregistrerez.
Une page compatible InContext Editing doit comporter au moins une balise div pouvant être spécifiée en tant que
région modifiable. Par exemple, si vous avez sélectionné le type de page HTML, vous devez choisir l'une des mises en
forme CSS pour votre nouvelle page. Ces mises en forme contiennent en effet des balises div prédéfinies. La région
modifiable InContext Editing est automatiquement placée dans la balise div avec l'ID content. Si vous le souhaitez,
vous pourrez ajouter par la suite d'autres régions modifiables à la page.
8 Cliquez sur le bouton Préférences pour définir les préférences par défaut du document (par exemple, le type de
document, l'encodage et une extension de ficher).
9 Cliquez sur le lien Obtenir plus de contenu pour lancer Dreamweaver Exchange et télécharger d'autres contenus de
conception de pages.
10 Cliquez sur le bouton Créer.
11 Enregistrez la page (Fichier > Enregistrer).
12 Dans la boîte de dialogue qui s'affiche, recherchez le dossier où vous voulez enregistrer le fichier.
Il est conseillé d'enregistrer votre fichier dans un site Dreamweaver.
13 Dans la zone de texte Nom de fichier, entrez le nom du fichier.
Evitez les espaces et les caractères spéciaux pour les noms de fichiers et de dossiers ; les noms de fichiers ne doivent pas
commencer par un chiffre. En particulier, n'utilisez pas de caractères spéciaux (par exemple é, ç ou ¥) ou de signes de
ponctuation (deux points, barres obliques ou points) dans le nom des fichiers que vous avez l'intention de placer sur
un serveur distant. En effet, la plupart des serveurs transforment ces caractères lors du transfert, rendant ainsi
inopérants les liens vers ces fichiers.
Voir aussi
« Code XHTML » à la page 305
« Mise en forme des pages avec CSS » à la page 158
« Définition du type et du codage par défaut d'un document » à la page 70
« Business Catalyst InContext Editing » à la page 510
Dernière mise à jour le 4/5/2011
66
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
Création d'un modèle vierge
La boîte de dialogue Nouveau document permet de créer des modèles Dreamweaver. Par défaut, les modèles sont
enregistrés dans le dossier Templates de votre site.
1 Choisissez Fichier > Nouveau.
2 Dans la boîte de dialogue Nouveau document, sélectionnez la catégorie Modèle vierge.
3 Sélectionnez le type de modèle à créer dans la colonne Type de modèle. Par exemple, choisissez Modèle HTML pour
créer un modèle HTML ordinaire, Modèle ColdFusion pour créer un modèle ColdFusion, et ainsi de suite.
4 Si vous voulez que la nouvelle page contienne une mise en forme CSS, sélectionnez une mise en forme CSS
prédéfinie dans la colonne Mise en forme. Dans le cas contraire, cliquez sur Aucune. En fonction de votre sélection,
un aperçu et la description de la mise en forme sélectionnée s'affichent sur la droite de la boîte de dialogue.
Les mises en forme CSS prédéfinies fournissent les types de colonnes suivants :
Fixe La largeur de colonne est définie en pixels. La colonne n'est pas redimensionnée selon la taille du navigateur ou
des paramètres de texte du visiteur du site.
Liquide La largeur de colonne est définie en tant que pourcentage de la largeur du navigateur du visiteur du site. La
mise en page s'adapte si le visiteur du site augmente ou diminue la largeur de son navigateur, mais pas en fonction des
paramètres de texte définis par le visiteur.
5 Sélectionnez un type de document dans le menu DocType. Dans la plupart des cas, vous pouvez conserver l'option
par défaut, XHTML 1.0 transitionnel.
Sélectionnez l'une des définitions de type de document (DTD) XHTML pour rendre la page compatible XHTML. Par
exemple, vous pouvez rendre un document HTML compatible XHTML en sélectionnant XHTML 1.0 transitionnel ou
XHTML 1.0 Strict dans le menu déroulant. Le langage XHTML (Extensible Hypertext Markup Language) n'est autre
qu'une nouvelle mouture de HTML sous la forme d'une application XML. En règle générale, l'utilisation de XHTML
vous permet d'exploiter les avantages de XML tout en garantissant la compatibilité descendante et ascendante de vos
documents Web.
Remarque : Pour plus d'informations sur XHTML, consultez le site Web du World Wide Web Consortium (W3C), qui
contient la spécification pour XHTML 1.1 - Module-Based XHTML (www.w3.org/TR/xhtml11/) et XHTML 1.0
(www.w3c.org/TR/xhtml1/), ainsi que les sites de validateur XHTML où vous trouverez des fichiers Web
(http://validator.w3.org/) et des fichiers locaux (http://validator.w3.org/file-upload.html).
6 Si vous avez choisi une mise en forme CSS dans la colonne Mise en forme, choisissez l'emplacement du code CSS
de mise en forme dans la liste déroulante CSS de mise en forme.
Ajouter à l'en-tête Ajoute le code CSS de mise en forme à l'en-tête de la page que vous créez.
Créer un nouveau fichier Ajoute le code CSS de mise en forme à une nouvelle feuille de style CSS externe et associe la
nouvelle feuille de style à la page que vous créez.
Lier au fichier existant Permet d'indiquer un fichier CSS existant qui contient déjà les règles CSS requises pour la mise
en forme. Pour ce faire, cliquez sur l'icône Ajouter une feuille de style
au-dessus du volet Lier le fichier CSS, puis
sélectionnez une feuille de style CSS existante. Cette option est particulièrement utile si vous voulez utiliser la même
mise en forme CSS (les règles CSS figurant dans un fichier) dans plusieurs documents.
7 (Facultatif) Vous pouvez également lier des feuilles de style CSS à la nouvelle page (sans rapport avec la mise en
forme CSS) lors de la création de cette page. Pour ce faire, cliquez sur l'icône Ajouter une feuille de style
dessus du volet Lier le fichier CSS, puis sélectionnez une feuille de style CSS.
8 Choisissez Activer InContext Editing si vous voulez créer une page qui deviendra compatible avec InContext
Editing dès que vous l'enregistrerez.
Dernière mise à jour le 4/5/2011
au-
67
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
Une page compatible InContext Editing doit comporter au moins une balise div pouvant être spécifiée en tant que
région modifiable. Par exemple, si vous avez sélectionné le type de page HTML, vous devez choisir l'une des mises en
forme CSS pour votre nouvelle page. Ces mises en forme contiennent en effet des balises div prédéfinies. La région
modifiable InContext Editing est automatiquement placée dans la balise div avec l'ID content. Si vous le souhaitez,
vous pourrez ajouter par la suite d'autres régions modifiables à la page.
9 Cliquez sur le bouton Préférences pour définir les préférences par défaut du document (par exemple, le type de
document, l'encodage et une extension de ficher).
10 Cliquez sur le lien Obtenir plus de contenu pour lancer Dreamweaver Exchange et télécharger d'autres contenus de
conception de pages.
11 Cliquez sur le bouton Créer.
12 Enregistrez la page (Fichier > Enregistrer). Si vous n'avez pas encore ajouté de régions modifiables au modèle, une
boîte de dialogue vous en avertit. Cliquez sur OK pour fermer la boîte de dialogue.
13 Dans la boîte de dialogue Enregistrer sous, sélectionnez le site dans lequel le modèle doit être enregistré.
14 Dans la zone de texte Nom de fichier, entrez le nom du nouveau modèle. Il n'est pas nécessaire d'ajouter l'extension
de fichier au nom du modèle. Lorsque vous cliquez sur Enregistrer, l'extension .dwt est ajoutée au nouveau modèle,
qui est enregistré dans le dossier Templates de votre site.
Evitez les espaces et les caractères spéciaux pour les noms de fichiers et de dossiers ; les noms de fichiers ne doivent pas
commencer par un chiffre. En particulier, n'utilisez pas de caractères spéciaux (par exemple é, ç ou ¥) ou de signes de
ponctuation (deux points, barres obliques ou points) dans le nom des fichiers que vous avez l'intention de placer sur
un serveur distant. En effet, la plupart des serveurs transforment ces caractères lors du transfert, rendant ainsi
inopérants les liens vers ces fichiers.
Voir aussi
« Code XHTML » à la page 305
« Mise en forme des pages avec CSS » à la page 158
« Création et gestion des modèles » à la page 403
« Configuration d'un site Dreamweaver » à la page 39
« Définition du type et du codage par défaut d'un document » à la page 70
« Business Catalyst InContext Editing » à la page 510
Création d'une page basée sur un modèle existant
Vous pouvez sélectionner, prévisualiser et créer un nouveau document à partir d'un modèle existant. La boîte de
dialogue Nouveau document vous permet de sélectionner un modèle parmi les sites définis dans Dreamweaver ou
d'utiliser le panneau Actifs pour créer un nouveau document sur la base d'un modèle existant.
Voir aussi
« Création et gestion des modèles » à la page 403
« Configuration d'un site Dreamweaver » à la page 39
« Définition du type et du codage par défaut d'un document » à la page 70
Création d'un document basé sur un modèle
1 Choisissez Fichier > Nouveau.
Dernière mise à jour le 4/5/2011
68
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
2 Dans la boîte de dialogue Nouveau document, sélectionnez la catégorie Page du modèle.
3 Dans la colonne Site, sélectionnez le site Dreamweaver contenant le modèle à utiliser, puis sélectionnez un modèle
dans la liste de droite.
4 Désactivez l'option Mettre la page à jour quand le modèle est modifié si vous ne souhaitez pas que la page soit mise
à jour lors de chaque modification apportée au modèle sur lequel elle est basée.
5 Cliquez sur le bouton Préférences pour définir les préférences par défaut du document (par exemple, le type de
document, l'encodage et une extension de ficher).
6 Cliquez sur le lien Obtenir plus de contenu pour lancer Dreamweaver Exchange et télécharger d'autres contenus de
conception de pages.
7 Cliquez sur Créer puis enregistrez le document (Fichier > Enregistrer).
Création d'un document à partir d'un modèle à l'aide du panneau Actifs
1 Ouvrez le panneau Actifs (Fenêtre > Actifs) s'il n'est pas déjà ouvert.
2 Dans le panneau Actifs, cliquez sur l'icône Modèles
située à gauche pour afficher la liste des modèles utilisés
dans votre site actuel.
Si le modèle que vous souhaitez utiliser vient d'être créé, il peut être nécessaire de cliquer sur le bouton Actualiser pour
l'afficher.
3 Cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur le modèle à
appliquer, puis sélectionnez Nouveau à partir d'un modèle.
Le document s'ouvre dans la fenêtre de document.
4 Enregistrez le document.
Création d'un document basé sur un fichier d'exemple Dreamweaver
Dreamweaver inclut plusieurs mises en formes de pages de cadres professionnelles, ainsi que des fichiers de conception
CSS. Vous pouvez utiliser ces fichiers d'exemple comme point de départ pour la création de pages sur vos sites Web.
Lorsque vous créez un document basé sur un fichier d'exemple, Dreamweaver crée une copie du fichier.
La boîte de dialogue Nouveau document permet de prévisualiser un fichier d'exemple et de consulter une brève
description des éléments de conception d'un document. Dans le cas de feuilles de style en cascade (CSS), vous pouvez
copier une feuille prédéfinie pour l'appliquer à vos documents.
Remarque : Si vous créez un document basé sur un jeu de cadres prédéfini, seule la structure du jeu de cadres est copiée,
sans le contenu des cadres. En outre, vous devez enregistrer séparément chacun des fichiers composant le cadre.
1 Choisissez Fichier > Nouveau.
2 Dans la boîte de dialogue Nouveau document, sélectionnez la catégorie Page de l'exemple.
3 Dans la colonne Dossier exemple, choisissez Feuille de style en cascade ou Jeu de cadres, puis sélectionnez un fichier
d'exemple dans la liste de droite.
4 Cliquez sur le bouton Créer.
Le nouveau document s'ouvre dans la fenêtre de document (modes Code et Création). Si vous avez sélectionné Feuille
de style de cascade (CSS), la feuille de style CSS s'affiche en mode code.
5 Enregistrez le document (Fichier > Enregistrer).
6 Si la boîte de dialogue Copier les fichiers dépendants apparaît, définissez les options, puis cliquez sur Copier pour
copier les actifs dans le dossier sélectionné.
Dernière mise à jour le 4/5/2011
69
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
Vous pouvez choisir l'emplacement des fichiers dépendants ou enregistrer les fichiers dans le dossier par défaut créé
par Dreamweaver (ce dossier est créé en fonction du nom source du fichier d'exemple).
Voir aussi
« Description des feuilles de style en cascade » à la page 129
« Enregistrement des fichiers du cadre et du jeu de cadres » à la page 207
Création d'autres types de pages
La catégorie Autre de la boîte de dialogue Nouveau document permet de créer divers types de page qui peuvent être
utiles dans Dreamweaver, comme des pages C#, VBScript et en texte seul.
1 Choisissez Fichier > Nouveau.
2 Dans la boîte de dialogue Nouveau document, sélectionnez la catégorie Autre.
3 Sélectionnez le type de document à créer dans la colonne Type de page, puis cliquez sur le bouton Créer.
4 Enregistrez le document (Fichier > Enregistrer).
Enregistrement et rétablissement de documents
Vous pouvez enregistrer un document en utilisant son nom et son emplacement actuels ou enregistrer une copie du
document sous un nouveau nom, dans un autre emplacement.
Evitez tout espace ou caractère spécial dans les noms de fichier ou de dossier. En particulier, n'utilisez pas de caractères
spéciaux (par exemple é, ç ou ¥) ou de signes de ponctuation (deux points, barres obliques ou points) dans le nom des
fichiers que vous avez l'intention de placer sur un serveur distant. En effet, la plupart des serveurs transforment ces
caractères lors du transfert, rendant ainsi inopérants les liens vers ces fichiers. En outre, ne commencez pas le nom de
fichier par un numéro.
Voir aussi
« Création d'une page vierge » à la page 64
Enregistrement d'un document
1 Effectuez l'une des opérations suivantes :
• Pour écraser la version présente sur le disque et enregistrer toute modification effectuée, sélectionnez Fichier >
Enregistrer.
• Pour enregistrer le fichier dans un dossier différent ou sous un autre nom, sélectionnez Fichier > Enregistrer sous.
2 Dans la boîte de dialogue Enregistrer sous qui s'affiche, recherchez le dossier dans lequel vous voulez enregistrer le
fichier.
3 Dans la zone de texte Nom de fichier, entrez le nom du fichier.
4 Cliquez sur Enregistrer pour enregistrer le fichier.
Enregistrement de tous les documents ouverts
1 Choisissez Fichier > Enregistrer tout.
2 Si des documents non enregistrés sont ouverts, la boîte de dialogue Enregistrer sous s'affiche pour chacun d'entre eux.
Dans la boîte de dialogue qui s'affiche, recherchez le dossier où vous voulez enregistrer le fichier.
Dernière mise à jour le 4/5/2011
70
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
3 Dans la zone de texte Nom de fichier, entrez le nom du fichier puis cliquez sur Enregistrer.
Rétablissement de la dernière version enregistrée d'un document
1 Sélectionnez Fichier > Rétablir.
Une boîte de dialogue vous invite à confirmer l'annulation de vos modifications et le retour à la version précédemment
enregistrée.
2 Cliquez sur Oui pour revenir à la version précédente ou sur Non pour appliquer les modifications.
Remarque : Si vous enregistrez un document, puis que vous quittez Dreamweaver, il ne sera pas possible de revenir à la
version précédente lors de la prochaine utilisation de Dreamweaver.
Définition du type et du codage par défaut d'un document
Vous pouvez définir le type de document par défaut utilisé pour un site.
Par exemple, si la plupart des pages de votre site sont de type spécifique (tel que les documents ColdFusion, HTML ou
ASP), vous pouvez définir des préférences de document pour créer automatiquement les nouveaux documents de ce type.
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
Vous pouvez également cliquer sur le bouton Préférences dans la boîte de dialogue Nouveau document pour définir
les nouvelles préférences liées au document en cours de création.
2 Cliquez sur la catégorie Nouveau document dans la liste de gauche.
3 Définissez ou modifiez les préférences selon vos besoins, puis cliquez sur OK pour les enregistrer.
Document par défaut Sélectionnez le type de document qui sera employé pour les pages que vous créez.
Extension par défaut Indiquez l'extension de fichier que vous préférez (.htm ou .html) pour les nouvelles pages
HTML que vous créerez.
Remarque : Cette option est désactivée pour d'autres types de fichier.
Type de document par défaut (DDT) Sélectionnez l'une des définitions de type de document (DTD) XHTML qui
permettent de rendre les pages compatibles XHTML. Par exemple, vous pouvez rendre un document HTML
compatible XHTML en sélectionnant XHTML 1.0 transitionnel ou XHTML 1.0 Strict dans le menu déroulant.
Codage par défaut Spécifie le codage à utiliser lorsque vous créez une page ou que vous ouvrez un document ne
spécifiant aucun codage.
Si vous sélectionnez Unicode (UTF 8) en tant que codage de document, le codage d'entité est superflu dans la mesure
où UTF 8 permet de représenter de façon fiable tous les caractères. Si vous sélectionnez un autre codage de document,
le codage d'entité peut être nécessaire pour représenter certains caractères. Pour plus d'informations sur les entités de
caractères, voir www.w3.org/TR/REC-html40/sgml/entities.html.
Si vous sélectionnez Unicode (UTF8) en tant que code par défaut, vous pouvez inclure une marque BOM (Byte Order
Mark) dans le document en sélectionnant l'option Inclure une signature Unicode (BOM).
Il s'agit d'une marque constituée de 2 à 4 octets placés au début d'un fichier texte identifiant un fichier comme étant au
format Unicode et, dans ce cas, l'ordre des octets suivants. Le code UTF 8 ne présentant pas d'ordre octet, l'ajout d'une
marque BOM UTF 8 est facultatif. Dans le cas de UTF 16 et UTF 32, cette marque est obligatoire.
Formulaire de normalisation Unicode Activez l'une de ces options si vous sélectionnez Unicode (UTF 8) en tant que
code par défaut.
Dernière mise à jour le 4/5/2011
71
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
Il existe quatre Formulaires de normalisation Unicode. Le plus important est le Formulaire de normalisation Unicode
C, car il est le plus utilisé dans le Modèle de caractères lié au World Wide Web, mais Adobe fournit également les trois
autres Formulaires de normalisation Unicode.
Afficher la boîte de dialogue Nouveau document si Ctrl+N Désactivez cette option (baptisée « Commande+N » sur
Macintosh) pour appliquer automatiquement le type par défaut au nouveau document créé lorsque vous utilisez la
touche de commande.
Certains caractères Unicode semblent visuellement similaires mais peuvent être stockés de différentes manières dans
le document. Par exemple, ë (e tréma) peut être représenté sous la forme d'un seul caractère, « e tréma » ou de deux
caractères, « e Latin ordinaire » + « tréma ». Un caractère Unicode de combinaison est un caractère associé au caractère
précédent, ce qui fait apparaître le tréma au-dessus du « e » Latin. Les deux formes donnent la même typographie
visuelle, alors que chacune est enregistrée différemment dans le fichier.
La normalisation est le processus consistant à s'assurer que tous les caractères pouvant être enregistrés sous différentes
formes le sont tous sous la même forme. C'est-à-dire que tous les caractères « ë » d'un document sont enregistrés sous
forme de « e tréma » unique ou de « e + tréma de combinaison », mais pas sous les deux formes dans un même
document.
Pour plus d'informations sur la Normalisation Unicode et les formulaires spécifiques pouvant être utilisés, consultez
le site Web Unicode www.unicode.org/reports/tr15.
Voir aussi
« Code XHTML » à la page 305
« Description de l'encodage de document » à la page 220
Conversion de HTML5 vers un ancien doctype
L'emploi de Fichier > Convertir pour passer de HTML5 vers un ancien DOCTYPE ne supprime pas les éléments et
attributs HTML5. Seul le DOCTYPE change et des barres obliques (pour XHTML) sont insérées à la fin.
Les balises sémantiques telles que <header> et <article>, ainsi que les attributs tels que required, placeholder et
type="number", ne sont pas affectés.
Définition de l'extension de fichier par défaut de nouveaux documents HTML
Vous pouvez définir l'extension de fichier par défaut de documents HTML créés dans Dreamweaver. Par exemple,
vous pouvez utiliser une extension .htm ou .html pour tous les nouveaux documents HTML.
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
Vous pouvez également cliquer sur le bouton Préférences dans la boîte de dialogue Nouveau document pour définir
les nouvelles préférences liées au document en cours de création.
2 Cliquez sur la catégorie Nouveau document dans la liste de gauche.
3 Assurez-vous que HTML est bien sélectionné dans le menu Document par défaut.
4 Dans la zone de texte Extension par défaut, spécifiez l'extension de fichier que vous souhaitez utiliser pour les
nouveaux documents HTML créés dans Dreamweaver.
Sous Windows, vous pouvez spécifier les extensions suivantes : .html, .htm, .shtml, .shtm, .stm, .tpl, .lasso, .xhtml.
Sous Macintosh, vous pouvez spécifier les extensions suivantes : .html, .htm, .shtml, .shtm, .tpl, .lasso, .xhtml, .ssi.
Dernière mise à jour le 4/5/2011
72
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
Ouverture et modification de documents existants
Vous pouvez ouvrir une page Web existante ou un document texte, même si celui-ci n'a pas été créé avec
Dreamweaver, et le modifier en mode Code ou en mode Création.
Si le document que vous ouvrez est un fichier Microsoft Word enregistré au format HTML, il est conseillé d'utiliser la
commande Nettoyage du HTML Word pour supprimer les balises superflues ajoutées par Word au fichier HTML.
Pour nettoyer un fichier HTML ou XHTML non généré par Microsoft Word, utilisez la commande Nettoyage du HTML.
Vous pouvez également ouvrir des fichiers texte non HTML, comme des fichiers JavaScript, XML, feuilles de style en
cascade (CSS) ou des fichiers texte enregistrés dans des traitements de texte ou des éditeurs de texte.
1 Choisissez Fichier > Ouvrir.
Vous pouvez également utiliser le panneau Fichiers pour ouvrir les fichiers.
2 Recherchez et sélectionnez le fichier à ouvrir.
Remarque : Si cette opération n'a pas encore été effectuée, il est conseillé d'organiser les fichiers que vous comptez ouvrir
et modifier au sein d'un site Dreamweaver, au lieu de les ouvrir depuis un autre emplacement.
3 Cliquez sur Ouvrir.
Le document s'ouvre dans la fenêtre de document. Par défaut, JavaScript, le texte et les feuilles de style en cascade (CSS)
s'ouvrent en mode Code. Vous pouvez mettre à jour le document pendant que vous travaillez dans Dreamweaver, puis
enregistrer les modifications dans le fichier.
Voir aussi
« Nettoyage du code » à la page 336
« Lancement d'un éditeur externe pour des fichiers multimédias » à la page 268
« Utilisation des fichiers depuis le panneau Fichiers » à la page 80
Ouverture des fichiers associés
Dreamweaver permet de visualiser les fichiers associés à votre document principal, tout en restant focalisé sur ce
dernier. Par exemple, si des fichiers CSS et JavaScript sont joints à un document principal, Dreamweaver permet
d'afficher et de modifier ces fichiers associés dans la fenêtre de document tout en laissant le document principal visible.
Remarque : Les fichiers à association dynamique (comme les fichiers PHP de systèmes de gestion du contenu) sont
abordés dans la prochaine section d'aide.
Par défaut, Dreamweaver affiche le nom de tous les fichiers associés au document principal dans une barre d'outils
Fichiers associés, sous le titre du document principal. L'ordre des boutons de cette barre d'outils suit l'ordre des liens
vers les fichiers associés dans le document principal.
Remarque : Si un fichier associé est manquant, Dreamweaver affiche quand même le bouton correspondant dans la barre
d'outils Fichiers associés. Toutefois, si vous cliquez sur ce bouton, Dreamweaver n'affiche rien.
Dreamweaver prend en charge les types de fichiers associés suivants:
• Fichiers de script côté client
• Inclusions côté serveur
• Sources d'ensembles de données Spry (XML et HTML)
• Feuilles de style CSS externes (dont les feuilles de style imbriquées)
Dernière mise à jour le 4/5/2011
73
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
Vous trouverez un didacticiel vidéo sur l'utilisation des fichiers associés, réalisé par l'équipe de Dreamweaver, à
l'adresse www.adobe.com/go/dw10relatedfiles_fr.
Vous trouverez un didacticiel vidéo relatif à l'utilisation du mode Affichage en direct, aux fichiers associés et à la
fenêtre Navigation dans le code à l'adresse www.adobe.com/go/lrvid4044_dw_fr.
Ouverture d'un fichier associé à partir de la barre d'outils Fichiers associés
Procédez comme suit, au choix :
• Dans la barre d'outils Fichiers associés en haut du document, cliquez sur le nom du fichier associé à ouvrir.
• Dans la barre d'outils Fichiers associés en haut du document, cliquez à l'aide du bouton droit de la souris sur le nom
du fichier associé à ouvrir, puis choisissez Ouvrir en tant que fichier séparé dans le menu. Lorsque vous utilisez cette
méthode pour ouvrir un fichier associé, le document principal ne reste pas visible simultanément.
Ouverture d'un fichier associé à partir de la fenêtre Navigation dans le code
1 Placez le point d'insertion sur une ligne ou dans une zone dont vous savez qu'elle est influencée par un fichier
associé.
2 Attendez que l'indicateur Navigation dans le code s'affiche, puis cliquez dessus pour ouvrir la fenêtre Navigation
dans le code.
3 Vous pouvez survoler les éléments de la fenêtre Navigation dans le code afin d'afficher davantage d'informations à
leur sujet. Par exemple, si vous voulez modifier une propriété de couleur CSS précise mais que vous ignorez dans
quelle règle elle se trouve, vous pouvez trouver cette règle en survolant les règles disponible dans la fenêtre
Navigation dans le code.
4 Cliquez sur l'élément qui vous intéresse afin d'ouvrir le fichier associé correspondant.
Retour au code source du document principal
❖ Cliquez sur le bouton Code source de la barre d'outils Fichiers apparentés.
Modification de l'affichage de fichiers associés
Vous pouvez afficher les fichiers associés de diverses manières :
• Lorsque vous ouvrez un fichier associé depuis le mode Création ou le mode Code et Création (mode Fractionné),
ce fichier s'affiche dans une fenêtre fractionnée au-dessus du mode Création du document principal.
Vous pouvez choisir Affichage > Mode Création en haut pour que le fichier associé s'affiche plutôt dans le bas de
la fenêtre de document.
• Lorsque vous ouvrez un fichier associé depuis le mode Code et Création fractionné verticalement (Affichage >
Fractionner verticalement), ce fichier s'affiche dans une fenêtre fractionnée à côté du mode Création du document
principal.
Selon l'endroit où vous voulez placer le mode Création, vous pouvez activer ou désactiver l'option Affichage > Mode
Création à gauche.
• Lorsque vous ouvrez un fichier associé depuis le mode Code et Création fractionné ou fractionné verticalement
(Affichage > Mode Fractionné ou Affichage > Fractionner verticalement), le fichier associé s'affiche dans une
fenêtre fractionnée en dessous, au-dessus ou à côté du code source du document principal, en fonction des options
que vous avez sélectionnées.
Dernière mise à jour le 4/5/2011
74
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
Le « mode Code » dans l'option d'affichage fait référence au code source du document principal. Par exemple, si
vous choisissez Affichage > Mode Code en haut, Dreamweaver affiche le code source du document principal dans
la moitié supérieure de la fenêtre de document. Par exemple, si vous choisissez Affichage > Mode Code à gauche,
Dreamweaver affiche le code source du document principal sur le côté gauche de la fenêtre de document.
• Le mode Code standard ne permet pas d'afficher les documents apparentés en même temps que le code source du
document principal.
Désactivation des fichiers associés
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
2 Dans la catégorie Général, désactivez Activer les fichiers associés.
Voir aussi
« Basculement d'un mode à un autre dans la fenêtre de document » à la page 18
« Navigation vers le code apparenté » à la page 327
« Prévisualisation de pages dans Dreamweaver » à la page 299
Didacticiel relatif aux fichiers associés
Ouverture de fichiers à association dynamique
La fonction Fichiers à association dynamique accroît les possibilités de la fonction Fichiers associés, en vous
permettant de voir les fichiers associés aux pages dynamiques dans la barre d'outils Fichiers associés. Plus précisément,
la fonction Fichiers à association dynamique permet de voir les nombreuses inclusions dynamiques requises pour
générer le code d'exécution des cadres CMS (système de gestion du contenu) PHP ouverts les plus populaires, tels que
WordPress, Drupal et Joomla!
Pour pouvoir utiliser la fonction Fichiers à association dynamique, vous devez avoir accès à un serveur d'applications
PHP local ou distant qui exécute WordPress, Drupal ou Joomla! Une approche courante du test de pages consiste à
configurer un serveur d'applications PHP sur localhost puis à tester les pages localement.
Avant de tester les pages, vous devez effectuer les opérations suivantes :
• Créez un site Dreamweaver et assurez-vous que vous avez bien complété la zone de texte URL Web de la boîte de
dialogue Configuration du site.
• Configurez un serveur d'applications PHP.
Important : Le serveur doit être en cours d'exécution avant que vous ne tentiez d'utiliser des fichiers à association
dynamique dans Dreamweaver.
• Installez WordPress, Drupal ou Joomla! sur le serveur d'applications. Pour plus de détails, voir:
• Installation de WordPress
• Installation de Drupal
• Installation de Joomla
• Dans Dreamweaver, définissez un fichier local où vous allez télécharger et modifier vos fichiers de CMS.
• Définissez l'emplacement des fichiers de WordPress, Drupal ou Joomla! installés comme dossier distant et de test.
• Téléchargez (obtenez) vos fichiers de CMS depuis le dossier distant.
Dernière mise à jour le 4/5/2011
75
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
Voir aussi
www.adobe.com/go/dwcs5drf_en
Définition des préférences relatives aux fichiers à association dynamique
Lorsque vous ouvrez une page liée à des fichiers à association dynamique, Dreamweaver peut rechercher les fichiers
automatiquement ou vous permettre de les rechercher manuellement (en cliquant sur un lien dans la barre
Informations, dans le haut de la page). Par défaut, la recherche se fait manuellement.
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Mac OS).
2 Dans la catégorie Général, assurez-vous que l'option Activer les fichiers associés est bien activée.
3 Sélectionnez Manuellement ou Automatiquement dans le menu Fichiers à association dynamique. Vous pouvez
également désactiver complètement la recherche en choisissant l'option Désactivé.
Découverte de fichiers à association dynamique
1 Ouvrez ne page à laquelle des fichiers à association dynamique sont liés, par exemple la page index.php à la racine
d'un site WordPress, Drupal ou Joomla!
2 Si la recherche de fichiers à association dynamique se fait manuellement (option par défaut), cliquez sur le lien
Découvrir dans la barre Informations, dans le haut de la fenêtre Document.
Si la recherche de fichiers à association dynamique se fait automatiquement, la liste des fichiers à association
dynamique s'affiche dans la barre d'outils Fichiers associés.
L'ordre des fichiers associés et à association dynamiques dans la barre d'outils Fichiers associés est le suivant :
• Fichiers associés statiques (c.-à-d. fichiers n'exigeant aucun traitement dynamique)
• Fichiers associés externes (c.-à-d. fichiers .css et .js) qui sont liés à des fichiers d'inclusion de serveur à chemin
dynamique
• Fichiers d'inclusion de serveur à chemin dynamique (c.-à-d. fichiers .php, .inc et .module)
Filtrage des fichiers associés
Comme les fichiers associés et les fichiers à association dynamique peuvent être nombreux, Dreamweaver permet de
filtrer les fichiers associés, de façon à trouver précisément les fichiers avec lesquels vous voulez travailler.
1 Ouvrez une page à laquelle des fichiers associés sont liés.
2 Si nécessaire, recherchez les fichiers à association dynamique.
3 Cliquez sur l'icône Filtrer les fichiers associés sur la droite de la barre d'outils Fichiers associés.
4 Sélectionnez les types de fichiers à afficher dans la barre d'outils Fichiers associés. Par défaut, Dreamweaver
sélectionne tous les fichiers associés.
5 Pour créer un filtre personnalisé, cliquez sur l'icône Filtrer les fichiers associés, puis choisissez Filtre personnalisé.
La boîte de dialogue Filtre personnalisé ne permet de filtrer que les noms de fichiers précis (style.css), les extensions
de fichiers (.php) et les expressions à caractère générique utilisant des astérisques (*menu*). Vous pouvez filtrer
selon des expressions à caractères génériques multiples en séparant les différentes expressions à l'aide de pointsvirgules (par exemple style.css;*.js;*tpl.php).
Remarque : Les paramètres de filtre ne sont pas conservés lorsque vous fermez le fichier.
Dernière mise à jour le 4/5/2011
76
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
Nettoyage de fichiers HTML créés avec Microsoft Word
Vous pouvez ouvrir des documents enregistrés par Microsoft Word en tant que fichiers HTML, puis utiliser la
commande Nettoyer HTML Word pour supprimer le code HTML superflu généré par Word. La commande Nettoyer
HTML Word est utilisable pour les documents enregistrés sous forme de fichiers HTML par Word 97 ou une version
ultérieure.
Le code que Dreamweaver supprime est principalement utilisé par Word pour mettre en forme et afficher les
documents dans Word même, et n'est pas nécessaire dans un véritable fichier HTML. Conservez une copie de votre
fichier Word original (.doc) comme sécurité, car il se peut que vous ne puissiez plus ouvrir ce document HTML dans
Word après avoir appliqué la fonction Nettoyer HTML Word.
Pour nettoyer un fichier HTML ou XHTML non généré par Microsoft Word, utilisez la commande Nettoyage du HTML.
1 Enregistrez votre document Microsoft Word au format HTML.
Remarque : Sous Windows, fermez le fichier dans Word pour éviter une violation de partage.
2 Ouvrez le fichier HTML dans Dreamweaver.
Pour afficher le code HTML généré par Word, activez le mode Code (Affichage > Code).
3 Sélectionnez Commandes > Nettoyer HTML Word.
Remarque : Si Dreamweaver ne parvient pas à déterminer la version de Word qui a été utilisée pour enregistrer ce fichier,
choisissez la version correcte dans le menu déroulant.
4 Activez (ou désactivez) les options de nettoyage. Les préférences que vous entrez sont sauvegardées comme
paramètres de nettoyage par défaut.
Dreamweaver applique les paramètres de nettoyage au document HTML et un journal contenant une liste des
modifications apportées s'affiche (sauf si cette option a été désélectionnée dans la boîte de dialogue).
Supprimer les marqueurs spécifiques à Word Supprime tout le code HTML spécifique à Word, y compris le code XML
des balisesHTML, les métadonnées personnalisées Word et les balises de liens figurant dans l'en-tête du document, les
balises XML Word, les balises conditionnelles et leur contenu, ainsi que les paragraphes vides et les marges des styles.
Vous pouvez sélectionner chacune de ces options individuellement à partir de l'onglet Détaillé.
Nettoyer CSS Supprime de l'en-tête toutes les feuilles de style spécifiques à Word, y compris les styles CSS incorporés
si possible (lorsque le style parent possède les mêmes propriétés), les attributs de style commençant par « mso », les
déclarations de styles non CSS, les attributs de style CSS des tableaux et toutes les définitions de style non utilisées.
Vous pouvez personnaliser cette option encore davantage à partir de l'onglet Détaillé.
Nettoyer les balises <font> Supprime les balises HTML, en convertissant le corps du texte par défaut en HTML de
taille 2.
Corriger les imbrications de balises non valides Supprime les balises de définition des polices de caractères insérées
par Word en dehors des balises de paragraphe et d'en-tête (au niveau du bloc).
Appliquer le format source Permet d'appliquer au document les options de formatage que vous avez indiquées dans
les préférences de format HTML et dans le fichier SourceFormat.txt.
Afficher le journal à la fin Affiche un message d'avertissement détaillant les modifications apportées au document dès
que le nettoyage est terminé.
5 Cliquez sur OK ou sur l'onglet Détaillé pour personnaliser davantage les options Supprimer les marqueurs
spécifiques à Word et Nettoyer CSS, puis cliquez sur OK.
Dernière mise à jour le 4/5/2011
77
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
Voir aussi
« Nettoyage du code » à la page 336
« Importation de documents Microsoft Office (Windows uniquement) » à la page 235
Gestion des fichiers et des dossiers
A propos de la gestion des fichiers et des dossiers
Dreamweaver possède un panneau Fichiers qui permet de gérer et de transférer des fichiers vers un serveur distant et
à partir de celui-ci. Lorsque vous transférez des fichiers entre le site local et le site distant, les structures de fichiers et
de dossiers parallèles sur les deux sites sont préservées. Lors du transfert de fichiers entre les sites, Dreamweaver crée
les dossiers nécessaires s'ils n'existent pas encore sur l'un des sites. Vous pouvez également synchroniser les fichiers
entre le site local et le site distant. Dans ce cas, Dreamweaver copie les fichiers requis dans les deux sens et supprime,
le cas échéant, les fichiers inutiles.
Utilisation du panneau Fichiers
Le panneau Fichiers vous permet d'afficher des fichiers et des dossiers (qu'ils soient ou non associés à un site
Dreamweaver) et d'effectuer des opérations courantes de maintenance, comme l'ouverture et le déplacement de
fichiers.
Remarque : Dans les versions précédentes de Dreamweaver, le panneau Fichiers s'appelait le panneau Site.
Vous pouvez déplacer le panneau Fichiers selon vos besoins et définir ses préférences.
Utilisez ce panneau pour effectuer les tâches suivantes :
• Accès aux sites, à un serveur et aux disques locaux
• Affichage de fichiers et de dossiers
• Gestion de fichiers et de dossiers dans le panneau Fichiers
Pour les sites Dreamweaver, utilisez les options suivantes pour afficher ou transférer des fichiers :
Options du panneau Fichiers en mode développé.
A. Menu du site B. Connecter ou Déconnecter C. Actualiser D. Afficher le journal FTP du site E. Vue Fichiers du site F. Serveur d'évaluation
G. Mode Référentiel H. Acquérir le(s) fichier(s) I. Placer le(s) fichier(s) J. Extraire le(s) fichier(s) K. Archiver L. Synchroniser
M. Développer/Réduire
Remarque : Les boutons Fichiers du site, Serveur d'évaluation et Synchroniser ne sont visibles que dans le panneau
Fichiers en mode développé.
Menu contextuel Site Permet de sélectionner un site Dreamweaver et d'afficher ses fichiers. Il permet également
d'accéder à tous les fichiers situés sur votre disque local, tout comme l'Explorateur Windows (Windows) ou le
Sélecteur (Macintosh).
Connecter ou Déconnecter (Protocoles FTP, RDS et WebDAV) Se connecte au site distant ou s'en déconnecte. Par
défaut, Dreamweaver se déconnecte du site distant après 30 minutes d'inactivité (FTP uniquement). Pour modifier
cette durée, choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh), puis
sélectionnez la catégorie Site dans la liste de gauche.
Dernière mise à jour le 4/5/2011
78
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
Actualiser Met à jour les répertoires du site local et du site distant. Utilisez ce bouton pour déclencher manuellement
une mise à jour des répertoires si vous avez désactivé les options Actualiser automatiquement la liste des fichiers locaux
ou Actualiser automatiquement la liste des fichiers distants dans la boîte de dialogue Définition du site.
Vue Fichiers du site Affiche la structure des fichiers présents sur le site local et le site distant dans les volets du panneau
Fichiers. Le site apparaissant dans le volet gauche et droit dépend d'un paramètre de préférence. La vue Fichiers du site
correspond au mode d'affichage par défaut du panneau Fichiers.
Vue Serveur d'évaluation Affiche la structure des répertoires du serveur d'évaluation et du site local.
Mode Référentiel Affiche le référentiel Subversion (SVN).
Acquérir le(s) fichier(s) Copie les fichiers sélectionnés depuis le site distant vers le site local (en écrasant, le cas échéant,
les copies locales existantes des fichiers). Si l'option Activer l'archivage et l'extraction de fichier est activée, les copies
locales sont en lecture seule ; ces fichiers restent accessibles, sur le site distant, à d'autres membres de l'équipe qui
peuvent les extraire. Si l'option Activer l'archivage et l'extraction de fichier est désactivée, les copies du fichier seront
accessibles en lecture et écriture.
Remarque : Les fichiers que Dreamweaver copie sur le site distant ou le serveur d'évaluation sont ceux sélectionnés dans
le volet actif du panneau Fichiers. Si le volet actif est Site distant, ce sont les fichiers sélectionnés sur le serveur distant ou
le serveur d'évaluation qui sont copiés ; si le volet actif est Fichiers locaux, Dreamweaver copie la version présente sur le
serveur distant ou le serveur d'évaluation des fichiers sélectionnés sur le site local.
Placer le(s) fichier(s) Copie les fichiers sélectionnés depuis le site local vers le site distant.
Remarque : Les fichiers que Dreamweaver copie sur le site distant ou le serveur d'évaluation sont ceux sélectionnés dans
le volet actif du panneau Fichiers. Si le volet actif est Fichiers locaux, ce sont les fichiers sélectionnés sur le site local qui
sont copiés vers le site distant ou le serveur d'évaluation ; si le volet actif est Site distant, Dreamweaver copie la version
présente sur le site local des fichiers sélectionnés sur le site distant.
Si vous placez un fichier qui n'existe pas encore sur le site distant et que l'option Activer l'archivage et l'extraction de
fichier est activée, le fichier est ajouté au site distant et reçoit l'état « extrait ». Si vous ne voulez pas que le fichier ajouté
soit doté de cet état, cliquez sur le bouton Archiver.
Extraire le(s) fichier(s) Transfère une copie du fichier du serveur distant vers le site local (en écrasant la copie locale de
ce fichier, le cas échéant) et donne au fichier l'état extrait sur le serveur. Ce bouton n'est pas disponible si l'option Activer
l'archivage et l'extraction de fichier est désactivée pour le site en cours dans la boîte de dialogue Définition du site.
Archiver Transfère une copie du fichier local vers le serveur distant, de manière à ce qu'il puisse être modifié par
d'autres membres de l'équipe. Le fichier local passe alors en lecture seule. Cette option n'est pas disponible si l'option
Activer l'archivage et l'extraction de fichier est désactivée pour le site sélectionné dans la boîte de dialogue Définition
du site.
Synchroniser Synchronise les fichiers entre les dossiers locaux et distants.
Le bouton Développer/Réduire développe ou réduit le panneau Fichiers afin d'afficher un ou deux volets.
Voir aussi
« Présentation du panneau Fichiers » à la page 16
« Création d'un nouveau site » à la page 40
« Archivage et extraction de fichiers dans un dossier distant » à la page 92
« Placement de fichiers sur un serveur distant » à la page 88
« Acquisition de fichiers depuis un serveur distant » à la page 87
« Synchronisation de fichiers » à la page 100
Dernière mise à jour le 4/5/2011
79
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
Affichage de fichiers et de dossiers
Le panneau Fichiers vous permet d'ouvrir des fichiers et des dossiers, qu'ils soient ou non associés à un site
Dreamweaver. Lorsque vous affichez des sites, des fichiers ou des dossiers dans le panneau Fichiers, vous pouvez
modifier la taille de la zone d'affichage, et, pour les sites Dreamweaver, vous pouvez développer ou réduire le panneau
Fichiers.
Pour les sites Dreamweaver, il est également possible de personnaliser le panneau Fichiers en modifiant la vue (site
local ou distant) qui s'affiche par défaut dans le panneau réduit. Vous pouvez également basculer l'affichage du contenu
dans le panneau Fichiers développé, en utilisant l'option Toujours afficher.
Ouverture ou fermeture du panneau Fichiers
❖ Choisissez Fenêtre > Fichiers.
Développement ou réduction du panneau Fichiers (sites Dreamweaver uniquement)
❖ Dans le panneau Fichiers (Fenêtre > Fichiers), cliquez sur le bouton Développer/Réduire
de la barre d'outils.
Remarque : Si vous cliquez sur le bouton Développer/Réduire pour développer le panneau alors qu'il est ancré, celui-ci
s'agrandit et vous empêche de travailler dans la fenêtre de document. Pour revenir à la fenêtre de document, cliquez de
nouveau sur le bouton Développer/Réduire afin de réduire le panneau. Si vous cliquez sur le bouton Développer/Réduire
pour développer le panneau alors qu'il n'est pas ancré, vous pouvez poursuivre votre travail dans la fenêtre de document.
Avant de pouvoir ancrer de nouveau le panneau, vous devez le réduire.
Dans sa forme réduite, le panneau Fichiers affiche le contenu du site local, du site distant ou du serveur d'évaluation
sous la forme d'une liste de fichiers. Sous sa forme développée, le panneau affiche le site local et soit le site distant, soit
le serveur d'évaluation.
Modification de la taille de la zone d'affichage dans le panneau Fichiers développé
❖ Effectuez l'une des opérations suivantes lorsque le panneau Fichiers (Fenêtre > Fichiers) est développé :
• Faites glisser la barre séparant les volets gauche et droit pour modifier la taille de la zone d'affichage du volet
souhaité.
• Utilisez les barres de défilement situées dans la partie inférieure du panneau Fichiers pour faire défiler le contenu
des volets.
Modification de l'affichage du site dans le panneau Fichiers (sites Dreamweaver
uniquement)
❖ Procédez comme suit, au choix :
• Dans le panneau Fichiers (Fenêtre > Fichiers) affiché sous sa forme réduite, sélectionnez Affichage local, Affichage
distant, Serveur d'évaluation ou Affichage de la carte dans le menu (où la vue actuelle s'affiche).
Remarque : L'option Affichage local apparaît par défaut dans le menu Vue du site.
• Dans le panneau Fichiers (Fenêtre > Fichiers) affiché sous sa forme développée, cliquez sur le bouton Fichiers du
site (pour le site distant), le bouton Serveur d'évaluation ou le bouton Fichiers du référentiel.
Dernière mise à jour le 4/5/2011
80
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
A
B
C
A. Fichiers du site B. Serveur d'évaluation C. Fichiers du référentiel
Remarque : Pour pouvoir afficher un site distant un serveur d'évaluation ou un référentiel, vous devez configurer un site
distant, un serveur d'évaluation ou un référentiel SVN.
Affichage de fichiers en dehors d'un site Dreamweaver
❖ Le menu Site permet de naviguer sur votre ordinateur comme vous le feriez à l'aide de l'Explorateur (Windows) ou
du Sélecteur (Macintosh).
Utilisation des fichiers depuis le panneau Fichiers
Vous pouvez ouvrir ou renommer les fichiers ; ajouter, déplacer ou supprimer des fichiers ; ou encore actualiser le
panneau Fichiers après avoir modifié les fichiers.
Pour les sites Dreamweaver, vous pouvez également identifier les fichiers (sur le site local ou distant) mis à jour depuis
leur dernier transfert.
Voir aussi
« Synchronisation de fichiers » à la page 100
« Accès aux sites, à un serveur et aux disques locaux » à la page 83
Ouverture d'un fichier
1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez un site, un serveur ou un lecteur dans le menu
contextuel (dans lequel le site, le serveur ou le lecteur s'affiche).
2 Recherchez et sélectionnez le fichier à ouvrir.
3 Procédez comme suit, au choix :
• Double-cliquez sur l'icône du fichier.
• Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur
l'icône du fichier, puis choisissez Ouvrir.
Le fichier s'ouvre dans la fenêtre de document de Dreamweaver.
Création d’un fichier ou d’un dossier
1 Sélectionnez un fichier ou un dossier dans le panneau Fichiers (Fenêtre > Fichiers).
Dreamweaver crée le fichier ou le dossier dans le dossier sélectionné actuellement ou dans le même dossier que celui
dans lequel le fichier sélectionné se trouve.
2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis
sélectionnez Nouveau fichier ou Nouveau dossier.
3 Saisissez le nom du nouveau fichier ou dossier.
4 Appuyez sur la touche Entrée (Windows) ou Retour (Macintosh).
Suppression d'un fichier ou d'un dossier
1 Sélectionnez le fichier à supprimer dans le panneau Fichiers (Fenêtre > Fichiers).
Dernière mise à jour le 4/5/2011
81
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis
choisissez Edition > Supprimer.
Modification du nom d’un fichier ou d’un dossier
1 Sélectionnez le fichier à renommer dans le panneau Fichiers (Fenêtre > Fichiers).
2 Procédez de l'une des manières suivantes pour activer le nom du fichier ou du dossier :
• Cliquez sur le nom du fichier, attendez, puis cliquez de nouveau.
• Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur
l'icône du fichier, puis choisissez Edition > Renommer.
3 Saisissez le nouveau nom à la place du nom existant.
4 Appuyez sur la touche Entrée (Windows) ou Retour (Macintosh).
Déplacement d’un fichier ou d’un dossier
1 Sélectionnez le fichier à déplacer dans le panneau Fichiers (Fenêtre > Fichiers).
2 Procédez comme suit, au choix :
• Copiez le fichier ou le dossier, puis collez-le à son nouvel emplacement.
• Faites glisser le fichier ou le dossier vers son nouvel emplacement.
3 Actualisez le panneau Fichiers pour afficher le fichier ou le dossier à son nouvel emplacement.
Actualisation du panneau Actifs
❖ Procédez comme suit, au choix :
• Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur un
fichier ou sur un dossier, puis choisissez Actualiser.
• (Sites Dreamweaver uniquement) Cliquez sur le bouton Actualiser dans la barre d'outils du panneau Fichiers (cette
option actualise les deux panneaux).
Remarque : Dreamweaver actualise le panneau Fichiers lorsque vous apportez des modifications dans une autre
application, puis revenez à Dreamweaver.
Recherche de fichiers dans votre site Dreamweaver
La fonction de recherche de Dreamweaver permet de trouver facilement les fichiers sélectionnés, ouverts, extraits ou
modifiés récemment dans votre site. Vous pouvez également rechercher les fichiers les plus récents dans votre site local
ou distant.
Voir aussi
« Utilisation des rapports pour tester votre site » à la page 113
Recherche d'un fichier ouvert dans votre site
1 Ouvrez le fichier dans la fenêtre de document.
2 Sélectionnez Site > Repérer dans le site.
Dreamweaver sélectionne les fichiers dans le panneau Fichiers.
Dernière mise à jour le 4/5/2011
82
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
Remarque : Si le fichier ouvert dans la fenêtre de document n'est pas associé au site actuel affiché dans le panneau
Fichiers, Dreamweaver tente de déterminer à quel site Dreamweaver le fichier appartient. S'il ne correspond qu'à un seul
site local, Dreamweaver ouvre ce site dans le panneau Fichiers, puis met le fichier en surbrillance.
Recherche et sélection des fichiers extraits dans un site Dreamweaver
❖ Dans le panneau Fichiers (Fenêtre > Fichiers) affiché sous sa forme réduite, cliquez sur le menu Options dans le
coin supérieur droit du panneau Fichiers, puis sélectionnez Modifier > Sélectionner les fichiers extraits.
Dreamweaver sélectionne les fichiers dans le panneau Fichiers.
Recherche d'un fichier sélectionné dans votre site local ou distant
1 Sélectionnez le fichier depuis l'affichage local ou distant du panneau Fichiers (Fenêtre > Fichiers).
2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis
sélectionnez Retrouver sur le site local ou Retrouver sur le site distant (selon l'emplacement où le fichier a été
sélectionné).
Dreamweaver sélectionne les fichiers dans le panneau Fichiers.
Recherche et sélection des fichiers qui sont plus récents sur le site local que sur le site distant
❖ Dans le panneau Fichiers (Fenêtre > Fichiers) affiché sous sa forme réduite, cliquez sur le menu Options dans le
coin supérieur droit du panneau Fichiers, puis sélectionnez Modifier > Sélectionner Local plus récent.
Dreamweaver sélectionne les fichiers dans le panneau Fichiers.
Recherche et sélection des fichiers qui sont plus récents sur le site distant que sur le site local
❖ Dans le panneau Fichiers (Fenêtre > Fichiers) affiché sous sa forme réduite, cliquez sur le menu Options dans le
coin supérieur droit du panneau Fichiers, puis sélectionnez Edition > Sélectionner distants plus récents.
Dreamweaver sélectionne les fichiers dans le panneau Fichiers.
Recherche des fichiers récemment modifiés sur votre site
1 Dans le panneau Fichiers (Fenêtre > Fichiers) affiché sous sa forme réduite, cliquez sur le menu Options dans le
coin supérieur droit du panneau Fichiers, puis sélectionnez Modifier > Sélectionner Modifiés récemment.
2 Procédez de l'une des manières suivantes pour indiquer les dates à prendre en compte dans le rapport :
• Pour que le rapport prenne en compte l'ensemble des fichiers modifiés ces derniers jours, activez l'option Fichiers
créés ou modifiés dans le dernier, puis entrez une valeur dans la zone de texte.
• Pour que le rapport prenne en compte l'ensemble des fichiers modifiés durant une période donnée, cliquez sur le
bouton radio Fichiers créés ou modifiés entre, puis spécifiez une durée.
3 (Facultatif) Entrer un nom d'utilisateur dans la zone Modifié par pour limiter votre recherche aux fichiers modifiés
par un utilisateur donné au cours de la période indiquée.
Remarque : Cette option est uniquement disponible pour les sites Contribute.
4 Indiquez l'emplacement où vous souhaitez afficher les fichiers compris dans le rapport à l'aide des boutons radio,
si nécessaire :
Machine locale si le site ne comporte que des pages statiques.
Serveur d'évaluation si le site comporte des pages dynamiques.
Dernière mise à jour le 4/5/2011
83
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
Remarque : Vous devez avoir défini un serveur d'évaluation dans la boîte de dialogue Définition du site (XREF) pour
utiliser cette option. Si cette opération n'a pas été effectuée et qu'aucun préfixe URL n'a été entré pour ce serveur ou si
vous exécutez le rapport pour plus d'un site, cette option n'est pas disponible.
Autre emplacement si vous souhaitez entrer un chemin dans la zone de texte.
5 Cliquez sur OK pour enregistrer vos paramètres.
Dreamweaver sélectionne les fichiers modifiés durant la période sélectionnée dans le panneau Fichiers.
Identification et suppression des fichiers non utilisés
Vous pouvez identifier et supprimer les fichiers qui ne sont plus utilisés par les autres fichiers de votre site.
1 Choisissez Site > Vérifier tous les liens du site.
Dreamweaver vérifie tous les liens de votre site et affiche les liens rompus dans le panneau Résultats.
2 Sélectionnez Fichiers orphelins dans le menu du panneau Vérificateur de lien.
Dreamweaver affiche l'ensemble des fichiers sans liens entrants. Ceci signifie qu'aucun des fichiers de votre site n'est
lié à ces fichiers.
3 Sélectionnez les fichiers que vous voulez supprimer et appuyez sur la touche Suppr.
Important : Bien qu'aucun autre fichier du site ne soit lié à ces fichiers, une partie des fichiers de la liste peuvent être liés
à d'autres fichiers. Procédez avec prudence lors de la suppression de fichiers.
Voir aussi
« Activation et désactivation du voilage d'un site » à la page 106
Accès aux sites, à un serveur et aux disques locaux
Vous pouvez ouvrir, modifier et enregistrer les fichiers et dossiers de vos sites Dreamweaver, comme les fichiers ou
dossiers qui ne font pas partie d'un site Dreamweaver. Outre les sites Dreamweaver, vous pouvez accéder à un serveur,
à un disque local ou à votre bureau.
Avant de pouvoir accéder à un serveur distant, vous devez configurer Dreamweaver de façon à ce qu'il puisse
fonctionner avec ce serveur.
Remarque : La meilleure façon de gérer des fichiers est de créer un site Dreamweaver.
Ouverture d'un site Dreamweaver existant
❖ Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez un site dans le menu (dans lequel le site, le serveur ou
le disque dur en cours d'utilisation s'affiche).
Dernière mise à jour le 4/5/2011
84
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
Ouverture d'un dossier sur un serveur FTP ou RDS distant
1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez un nom de serveur dans le menu (dans lequel le site, le
serveur ou le disque dur en cours d'utilisation s'affiche).
Remarque : Les noms des serveurs que vous avez configurés pour fonctionner avec Dreamweaver apparaissent.
2 Naviguez vers ces fichiers et modifiez-les comme vous le faites habituellement.
Accès à un disque local ou à votre bureau
1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez Bureau, disque local ou disque compact dans le menu
(dans lequel le site, le serveur ou le disque dur s'affiche).
2 Recherchez le fichier de votre choix, puis effectuez l'une des opérations suivantes :
• Ouverture de fichiers dans Dreamweaver ou dans une autre application
• Renommer des fichiers
• Copier des fichiers
• Supprimer des fichiers
• Faire glisser des fichiers
Lorsque vous faites glisser un fichier d'un site Dreamweaver à un autre site ou à un dossier non lié à un site
Dreamweaver, Dreamweavercopie le fichier, puis l'ajoute à l'emplacement où vous le déposez. Si vous faites glisser un
fichier et le déposez au sein du même site Dreamweaver, Dreamweaverdéplace le fichier à l'emplacement où vous le
déposez. Lorsque vous faites glisser un fichier qui n'est associé à aucun site Dreamweaver vers un dossier qui n'est pas
non plus associé à un site Dreamweaver, Dreamweaver déplace le fichier à l'emplacement où vous le déposez.
Remarque : Pour que Dreamweaver déplace un fichier au lieu de le copier, maintenez la touche Maj (Windows) ou
Commande (Macintosh) enfoncée pendant que vous faites glisser et déposez le fichier. Pour copier un fichier que
Dreamweaver déplacerait par défaut, maintenez la touche Ctrl (Windows) ou Option (Macintosh) enfoncée pendant que
vous faites glisser et déposez le fichier.
Personnalisation des détails de fichiers et de dossiers affichés dans la forme
développée du panneau Fichiers
Lorsqu'un site Dreamweaver est affiché dans le panneau Fichiers (en mode développé), les informations liées aux
fichiers et dossiers sont affichées dans des colonnes. Vous pouvez, par exemple, consulter le type du fichier ou la date
de sa dernière modification.
Vous pouvez personnaliser les colonnes en procédant de l'une des façons suivantes (certaines opérations sont
disponibles uniquement pour les colonnes que vous ajoutez, et non pas pour les colonnes par défaut) :
• Retrier ou réaligner les colonnes
Dernière mise à jour le 4/5/2011
85
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
• Ajouter des colonnes (jusqu'à 10 colonnes maximum)
• Masquer les colonnes (sauf la colonne des noms de fichiers)
• Définir les colonnes devant être partagées entre tous les utilisateurs connectés à un site
• Supprimer les colonnes (colonnes personnalisées uniquement)
• Renommer les colonnes (colonnes personnalisées uniquement)
• Associer des colonnes à une Design Note (colonnes personnalisées uniquement)
Modification de l'ordre des colonnes
❖ Sélectionnez le nom d'une colonne, puis cliquez sur le bouton flèche vers le haut ou vers le bas afin de changer la
position de la colonne sélectionnée.
Remarque : Vous pouvez changer l'ordre de toutes les colonnes, sauf la colonne Nom, qui reste toujours en première
position.
Ajout, suppression ou modification de colonnes
1 Choisissez Site > Gérer les sites.
2 Sélectionnez un site, puis cliquez sur Modifier.
3 Développez les paramètres avancés et choisissez la catégorie Colonnes mode Fichier.
4 Sélectionnez une colonne, puis cliquez sur le bouton Plus (+) pour l'ajouter ou sur le bouton Moins (–) pour la
supprimer.
Remarque : Comme la colonne est immédiatement supprimée sans qu'il vous soit demandé de confirmation, soyez
certain de réellement vouloir effectuer cette opération avant de cliquer sur le bouton Moins (–).
5 Dans la zone Nom de colonne, indiquez le nom de votre colonne.
6 Choisissez une valeur dans le menu Associer à Design Notes ou indiquez-en une.
Remarque : Vous devez associer la nouvelle colonne à une Design Note afin que des données s'affichent dans le panneau
Fichiers.
7 Choisissez une option d'alignement pour déterminer la façon dont le texte doit être aligné dans la colonne.
8 Activez ou désactivez l'option Afficher afin d'afficher et de masquer respectivement la colonne.
9 Activez ou désactivez l'option Partager avec tous les utilisateurs de ce site afin que la colonne soit accessible ou non
à tous les utilisateurs connectés au site distant.
Tri en fonction d'une colonne dans le panneau Fichiers
❖ Pour trier les listes, cliquez sur l'en-tête de la colonne en fonction de laquelle vous souhaitez effectuer le tri.
Si vous cliquez plusieurs fois sur un même en-tête de colonne, l'ordre dans lequel Dreamweaver trie la colonne est
inversé (ordre croissant ou décroissant).
Dernière mise à jour le 4/5/2011
86
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
Acquisition et placement de fichiers depuis ou vers
votre serveur
Transfert de fichiers et fichiers dépendants
Si vous travaillez au sein d'un groupe, vous pouvez utiliser le système d'extraction et d'archivage pour transférer des
fichiers entre le serveur distant et l'ordinateur local. Si vous êtes la seule personne à travailler sur le site distant, vous
pouvez utiliser les commandes Acquérir et Placer pour transférer des fichiers sans avoir à les archiver ou à les extraire.
Lorsque vous transférez un document entre un dossier local et distant à l'aide du panneau Fichiers, vous pouvez
transférer les fichiers dépendants de ce document. Les fichiers dépendants sont des images, des feuilles de style
externes et d'autres fichiers référencés dans votre document qu'un navigateur charge avec le document.
Remarque : D'une manière générale, il est conseillé de télécharger les fichiers dépendants lorsque le fichier extrait est un
nouveau fichier, mais c'est inutile si les versions les plus récentes des fichiers dépendants sont déjà présentes sur le disque
local. Cela s'applique également lors du transfert et de l'archivage de fichiers : il n'est pas nécessaire si des copies mises à
jour sont déjà présentes sur le site distant.
Les éléments de bibliothèque sont traités comme des fichiers dépendants.
Certains serveurs génèrent des erreurs lors du placement d'éléments de bibliothèque. Néanmoins, vous pouvez voiler
ces fichiers pour qu'ils ne soient pas transférés.
Voir aussi
« Archivage et extraction de fichiers » à la page 91
« Activation et désactivation du voilage d'un site » à la page 106
A propos des transferts de fichiers en arrière-plan
Vous pouvez effectuer d'autres activités non liées au serveur lors de l'acquisition ou du placement de fichiers. Le
transfert de fichiers d'arrière-plan fonctionne pour tous les protocoles de transfert pris en charge par Dreamweaver :
FTP, SFTP, LAN, WebDAV, Subversion et RDS.
Les activités non liées au serveur comprennent, entre autres, les opérations suivantes: taper, modifier des feuilles de
style externes, générer des rapports à l'échelle du site et créer de nouveaux sites.
Les activités côté serveur que Dreamweaver ne peut pas effectuer pendant les transferts de fichiers incluent les tâches
suivantes :
• placer/acquérir/archiver/extraire des fichiers ;
• annuler l'extraction ;
• créer une connexion à une base de données ;
• lier les données dynamiques ;
• Prévisualisation des données en mode Affichage en direct
• insérer un service Web ;
• supprimer des fichiers ou des dossiers distants ;
• prévisualiser dans le navigateur sur un serveur d'évaluation ;
• enregistrer un fichier sur un serveur distant ;
Dernière mise à jour le 4/5/2011
87
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
• insérer une image d'un serveur distant ;
• ouvrir un fichier d'un serveur distant ;
• placer automatiquement des fichiers lors de l'enregistrement ;
• faire glisser des fichiers vers le site distant ;
• couper, copier ou coller des fichiers sur le site distant ;
• actualiser l'affichage distant.
Par défaut, la boîte de dialogue Activité fichiers en arrière-plan est ouverte pendant les transferts de fichiers. Vous
pouvez réduire cette boîte de dialogue en cliquant sur le bouton Réduire, dans son coin supérieur droit. La fermeture
de la boîte de dialogue pendant un transfert de fichier entraîne l'annulation de cette opération.
Acquisition de fichiers depuis un serveur distant
La commande Acquérir permet de copier les fichiers du site distant sur le site local. Vous pouvez utiliser le panneau
Fichiers ou la fenêtre du document pour acquérir des fichiers.
Dreamweaver crée un journal de suivi des activités de fichiers au cours du transfert ; vous pouvez le consulter et
l'enregistrer.
Remarque : Vous ne pouvez pas désactiver le transfert de fichiers en arrière-plan. Si le journal des détails est ouvert dans
la boîte de dialogue Activité fichiers en arrière-plan, vous pouvez le fermer pour améliorer les performances.
Dreamweaver enregistre également l'activité de tous les transferts de fichiers en FTP. Si une erreur se produit lors du
transfert d'un fichier en FTP, le journal du site FTP peut vous aider à déterminer le problème.
Voir aussi
« Archivage et extraction de fichiers » à la page 91
« Synchronisation de fichiers » à la page 100
Acquisition des fichiers depuis un serveur distant via le panneau Fichiers
1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez les fichiers que vous voulez télécharger.
Les fichiers sont généralement sélectionnés dans l'affichage distant, mais il est également possible de les sélectionner
dans l'affichage local. Si l'affichage distant est actif, Dreamweaver copie les fichiers sélectionnés sur le site local ; si
l'affichage local est actif, Dreamweaver copie la version distante des fichiers locaux sélectionnés sur le site local.
Remarque : Pour n'acquérir que les fichiers dont la version distante est plus récente que la version locale, utilisez la
commande Synchroniser.
2 Procédez de l'une des manières suivantes pour acquérir un fichier :
• Cliquez sur le bouton Acquérir dans la barre d'outils du panneau Fichiers.
• Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur le
fichier dans le panneau Fichiers, puis sélectionnez Acquérir dans le menu contextuel.
3 Cliquez sur Oui dans la boîte de dialogue Fichiers dépendants si vous souhaitez télécharger les fichiers dépendants.
Si vous disposez déjà de copies locales des fichiers dépendants, cliquez sur Non. L'option par défaut est de ne pas
télécharger les fichiers indépendants. Vous pouvez définir cette option en sélectionnant Edition > Préférences >
Site.
Dernière mise à jour le 4/5/2011
88
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
Dreamweaver télécharge les fichiers sélectionnés comme suit :
• Si vous utilisez le système d'archivage et d'extraction, l'obtention d'un fichier consistera à transférer une copie locale
accessible en lecture seule. Le fichier reste disponible sur le site distant ou sur le serveur d'évaluation et peut être
extrait par d'autres membres de l'équipe.
• Si vous n'utilisez pas le système d'archivage et d'extraction, l'obtention d'un fichier produit une copie accessible en
lecture et écriture.
Remarque : Si vous travaillez en équipe et que d'autres personnes sont susceptibles de travailler sur les mêmes fichiers,
ne désactivez pas l'option Activer l'archivage et l'extraction de fichier. De plus, si d'autres personnes utilisent le système
d'extraction et d'archivage sur le site, vous devez l'utiliser également.
Pour arrêter le transfert de fichier à n'importe quel moment, cliquez sur le bouton Annuler de la boîte de dialogue
Activité fichiers en arrière-plan.
Acquisition des fichiers depuis un serveur distant à l'aide de la fenêtre du document
1 Assurez-vous que le document est actif dans la fenêtre du document.
2 Procédez de l'une des manières suivantes pour acquérir un fichier :
• Choisissez Site > Acquérir.
• Cliquez sur l'icône Gestion des fichiers dans la barre d'outils de la fenêtre du document, puis sélectionnez Acquérir
dans le menu.
Remarque : Si le fichier actuel n'est pas associé au site sélectionné dans le panneau Fichiers, Dreamweaver tente de
déterminer à quel site défini localement le fichier actuel appartient. Si ce fichier courant n'appartient qu'à un seul site
local, Dreamweaver ouvre ce site, puis effectue l'opération d'acquisition.
Affichage du journal FTP
1 Cliquez sur le menu Options dans le coin supérieur droit du panneau Fichiers.
2 Choisissez Affichage > Journal FTP du site.
Remarque : Dans le panneau Fichiers en mode développé, vous pouvez cliquer sur le bouton Journal FTP.
Placement de fichiers sur un serveur distant
Vous pouvez placer des fichiers du site local vers le site distant, dans la plupart des cas sans changer l'état d'extraction
du fichier.
Il existe deux types de circonstances dans lesquels il est préférable d'utiliser la commande Placer plutôt que la
commande Archiver :
• Lorsque vous ne travaillez pas en équipe et que vous n'utilisez pas le système d'archivage et d'extraction.
• Lorsque vous souhaitez placer la version actuelle du fichier sur le serveur, mais que vous allez continuer à y apporter
des modifications.
Remarque : Si vous placez un fichier qui n'existait pas encore sur le site distant et que vous utilisez le système
d'extraction et d'archivage, le fichier est copié sur le site distant, puis extrait pour vous permettre de continuer à le
modifier.
Vous pouvez utiliser le panneau Fichiers ou la fenêtre du document pour acquérir des fichiers. Dreamweaver crée
un journal de suivi des activités de fichiers au cours du transfert ; vous pouvez le consulter et l'enregistrer.
Remarque : Vous ne pouvez pas désactiver le transfert de fichiers en arrière-plan. Si le journal des détails est ouvert
dans la boîte de dialogue Activité fichiers en arrière-plan, vous pouvez le fermer pour améliorer les performances.
Dernière mise à jour le 4/5/2011
89
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
Dreamweaver enregistre également l'activité de tous les transferts de fichiers en FTP. Si une erreur se produit lors
du transfert d'un fichier en FTP, le journal du site FTP peut vous aider à déterminer le problème.
Vous trouverez un didacticiel consacré au placement de fichiers sur un serveur distant à l'adresse
www.adobe.com/go/vid0163_fr.
Vous trouverez un didacticiel consacré au dépannage des problèmes de publication à l'adresse
www.adobe.com/go/vid0164_fr.
Voir aussi
« Synchronisation de fichiers » à la page 100
« A propos du système d'archivage et d'extraction de fichiers » à la page 91
Didacticiel consacré au placement de fichiers
Didacticiel consacré au dépannage des problèmes de publication
Placement de fichiers sur un serveur distant ou un serveur d'évaluation à l'aide du panneau
Fichiers
1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez les fichiers à télécharger.
Les fichiers sont généralement sélectionnés dans l'affichage Site local, mais il est également possible de les sélectionner
dans l'affichage Site distant.
Remarque : Vous pouvez décider de ne placer que les fichiers dont la version locale est plus récente que la version distante.
2 Procédez de l'une des manières suivantes pour placer un fichier sur le serveur distant :
• Cliquez sur le bouton Placer dans la barre d'outils du panneau Fichiers.
• Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur le
fichier dans le panneau Fichiers, puis sélectionnez Placer dans le menu contextuel.
3 Si le fichier n'a pas encore été enregistré, une boîte de dialogue s'affiche (si vous l'avez indiqué parmi les préférences
de la catégorie Site de la boîte de dialogue Préférences) pour vous permettre de l'enregistrer avant de le placer sur
le serveur distant. Cliquez sur Oui pour enregistrer le fichier ou sur Non pour placer la version précédemment
enregistrée sur le serveur distant.
Remarque : Si vous n'enregistrez pas le fichier, aucune des modifications effectuées depuis le dernier enregistrement ne
sera placée sur le serveur distant. Toutefois, le fichier reste ouvert, ce qui vous permet encore d'enregistrer les changements
après avoir placé le fichier sur le serveur.
4 Cliquez sur Oui si vous souhaitez envoyer les fichiers dépendants associés aux fichiers sélectionnés ou sur Non si
vous ne voulez pas les envoyer. L'option par défaut est de ne pas transférer les fichiers indépendants. Vous pouvez
définir cette option en sélectionnant Edition > Préférences > Site.
Remarque : Il est en général conseillé de transférer les fichiers dépendants lorsque vous archivez un nouveau fichier, mais
si les versions les plus récentes des fichiers dépendants figurent déjà sur le serveur distant, il n'est pas utile de les transférer
à nouveau.
Pour arrêter le transfert de fichier à n'importe quel moment, cliquez sur le bouton Annuler de la boîte de dialogue
Activité fichiers en arrière-plan.
Placement de fichiers sur un serveur distant à l'aide de la fenêtre du document
1 Assurez-vous que le document est actif dans la fenêtre du document.
Dernière mise à jour le 4/5/2011
90
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
2 Procédez de l'une des manières suivantes pour placer un fichier :
• Choisissez Site > Placer.
• Cliquez sur l'icône Gestion des fichiers dans la barre d'outils de la fenêtre du document, puis sélectionnez Placer
dans le menu.
Remarque : Si le fichier actuel n'est pas associé au site sélectionné dans le panneau Fichiers, Dreamweaver tente de
déterminer à quel site défini localement le fichier actuel appartient. Si ce fichier courant n'appartient qu'à un seul site
local, Dreamweaver ouvre ce site, puis effectue l'opération de placement.
Affichage du journal FTP
1 Cliquez sur le menu Options dans le coin supérieur droit du panneau Fichiers.
2 Choisissez Affichage > Journal FTP du site.
Remarque : Dans le panneau Fichiers en mode développé, vous pouvez cliquer sur le bouton Journal FTP.
Gestion des transferts de fichiers
Vous pouvez afficher l'état des opérations de transfert de fichiers, ainsi que la liste des fichiers transférés et de leurs
résultats (transfert réussi, ignoré ou raté). Vous pouvez également créer un journal des activités relatives aux fichiers.
Remarque : Dreamweaver vous permet d'effectuer d'autres activités non liées au serveur lors du transfert de fichiers vers
le serveur ou à partir de ce dernier.
Annulation d'un transfert de fichier
❖ Cliquez sur le bouton Annuler de la boîte de dialogue Transfert de fichiers en arrière-plan. Si la boîte de dialogue
n'est pas affichée, cliquez sur le bouton Activité fichiers dans le bas du panneau Fichiers.
Affichage de la boîte de dialogue Activité fichiers en arrière-plan pendant les transferts
❖ Cliquez sur le bouton Activité fichiers ou Journal dans le bas du panneau Fichiers.
Remarque : Vous ne pouvez pas masquer ni supprimer le bouton Journal. Il s'agit d'une partie permanente du panneau.
Affichage des détails du dernier transfert de fichiers
1 Cliquez sur le bouton Journal en bas du panneau Fichiers pour ouvrir la boîte de dialogue Activité fichiers en
arrière-plan.
2 Cliquez sur la flèche Détails.
Enregistrement d'un journal du dernier transfert de fichier
1 Cliquez sur le bouton Journal en bas du panneau Fichiers pour ouvrir la boîte de dialogue Activité fichiers en
arrière-plan.
2 Cliquez sur le bouton Enregistrer journal et enregistrez les informations sous forme de fichier texte.
Vous pouvez alors analyser les mouvements de fichiers en ouvrant le fichier journal dans Dreamweaver ou dans un
éditeur de texte.
Dernière mise à jour le 4/5/2011
91
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
Archivage et extraction de fichiers
A propos du système d'archivage et d'extraction de fichiers
Si vous travaillez en équipe, vous avez la possibilité d'archiver et d'extraire des fichiers sur les serveurs local et distant.
Si vous êtes la seule personne à travailler sur le serveur distant, vous pouvez utiliser les commandes Acquérir et Placer
pour transférer des fichiers sans avoir à les archiver ou à les extraire.
Remarque : Vous pouvez utiliser la fonctionnalité d'acquisition et de placement de fichiers sur un serveur d'évaluation,
mais le système d'archivage et d'extraction n'est pas disponible sur ce type de serveur.
L'extraction d'un fichier équivaut à signaler aux autres utilisateurs que vous travaillez sur ce fichier et qu'ils ne doivent
pas le modifier. Lors de l'extraction d'un fichier, le nom de la personne ayant effectué l'opération est affiché dans le
panneau Fichiers, avec une coche de couleur rouge (si le fichier a été extrait par un autre membre de l'équipe) ou verte
(si vous êtes la personne à avoir extrait le fichier) en regard de son icône.
L'archivage d'un fichier équivaut à le mettre à la disposition des autres membres de l'équipe, qui peuvent l'extraire et
le modifier. Lorsque vous archivez un fichier après l'avoir modifié, la version locale de ce fichier devient accessible en
lecture seule et un cadenas apparaît en regard du fichier dans le panneau Fichiers pour vous empêcher de le modifier.
Dreamweaver ne rend pas les fichiers extraits accessibles en lecture seule sur le serveur distant. Si vous transférez des
fichiers à l'aide d'une application autre que Dreamweaver, vous risquez d'écraser les fichiers extraits. Toutefois, dans
les applications autres que Dreamweaver, le fichier LCK est visible près du fichier extrait dans la hiérarchie de fichiers
afin d'éviter ce type d'incident.
Voir aussi
« Acquisition et placement de fichiers depuis ou vers votre serveur » à la page 86
Configuration du système d'archivage et d'extraction de fichiers
Pour utiliser le système d'archivage et d'extraction, vous devez associer votre site local à un serveur distant.
1 Choisissez Site > Gérer les sites.
2 Sélectionnez un site et cliquez sur Modifier.
3 Dans la boîte de dialogue Configuration du site, sélectionnez la catégorie Serveurs et effectuez l'une des actions
suivantes :
• Cliquez sur le bouton Ajouter nouveau serveur pour ajouter un nouveau serveur.
• Sélectionnez un serveur existant puis cliquez sur le bouton Modifier serveur existant.
4 Définissez les options de base requises, puis cliquez sur le bouton Avancé.
5 Activez l'option Activer l'extraction de fichier si vous travaillez au sein d'une équipe (ou si vous travaillez seul, mais
depuis plusieurs machines). Désélectionnez cette option si vous souhaitez désactiver l'archivage et l'extraction de
fichiers dans votre site Web.
Cette option est utile pour informer les autres utilisateurs que vous avez extrait un fichier en vue de le modifier ou pour
vous rappeler qu'une version plus récente d'un fichier est peut-être ouverte sur une autre machine.
Si vous ne voyez pas les options Archiver/Extraire, cela signifie que vous n'avez pas configuré le serveur distant.
6 Activez l'option Extraire les fichiers à l'ouverture si vous voulez que les fichiers soient automatiquement extraits
lorsque vous double-cliquez dessus pour les ouvrir dans le panneau Fichiers.
Si vous choisissez Fichier > Ouvrir pour ouvrir un fichier, cela n'extrait pas le fichier, même si cette option est activée.
Dernière mise à jour le 4/5/2011
92
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
7 Définissez les options restantes :
Nom d'extraction Ce nom apparaît dans le panneau Fichiers à côté des fichiers extraits afin que les membres d'une
équipe puissent s'adresser à la personne appropriée s'ils ont besoin d'un fichier extrait.
Remarque : Si vous travaillez seul sur plusieurs machines, utilisez un nom d'extraction différent pour chaque machine
(par exemple, PierreR-MacDomicile et PierreR-PCBureau) de manière à savoir où se trouve la version la plus récente du
fichier si vous oubliez de l'archiver.
Adresse électronique Si vous saisissez une adresse électronique, lors de l'extraction d'un fichier, votre nom apparaît
dans le panneau Fichiers en regard du fichier, sous la forme d'un lien (bleu souligné). Si un membre de l'équipe clique
sur le lien, son programme de messagerie électronique par défaut ouvre un nouveau courriel à destination de votre
adresse électronique et comportant un objet qui correspond aux noms du site et du fichier.
Archivage et extraction de fichiers dans un dossier distant
Une fois le système d'archivage et d'extraction défini, vous pouvez archiver et extraire des fichiers sur un serveur
distant via le panneau Fichiers ou la fenêtre de document.
Extraction des fichiers à l'aide du panneau Fichiers
1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez les fichiers à extraire du serveur distant.
Remarque : Vous pouvez sélectionner des fichiers dans l'affichage du site local ou distant mais pas dans l'affichage
Serveur d'évaluation.
Une coche de couleur rouge indique qu'un autre membre de l'équipe dispose du fichier extrait. Un symbole
représentant un cadenas indique que le fichier est en lecture seule (Windows) ou verrouillé (Macintosh).
2 Procédez de l'une des manières suivantes pour extraire les fichiers :
• Cliquez sur le bouton Extraire dans la barre d'outils du panneau Fichiers.
• Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis
choisissez Extraire dans le menu contextuel.
3 Dans la boîte de dialogue Fichiers dépendants, cliquez sur Oui si vous souhaitez télécharger les fichiers dépendants
associés aux fichiers sélectionnés ou sur Non si vous ne voulez pas les télécharger. L'option par défaut est de ne pas
télécharger les fichiers indépendants. Vous pouvez définir cette option en sélectionnant Edition > Préférences >
Site.
Remarque : D'une manière générale, il est conseillé de télécharger les fichiers dépendants lorsque le fichier extrait est un
nouveau fichier, mais c'est inutile si les versions les plus récentes des fichiers dépendants sont déjà présentes sur le disque
local.
Une coche de couleur verte apparaît en regard de l'icône du fichier local pour signaler que vous l'avez extrait.
Important : Si vous extrayez le fichier actif, la version ouverte du fichier est écrasée par la nouvelle version extraite.
Archivage des fichiers à l'aide du panneau Fichiers
1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez les fichiers extraits ou sélectionnez de nouveaux
fichiers.
Remarque : Vous pouvez sélectionner des fichiers dans l'affichage du site local ou distant mais pas dans l'affichage
Serveur d'évaluation.
2 Procédez de l'une des manières suivantes pour archiver les fichiers :
• Cliquez sur le bouton Archiver dans la barre d'outils du panneau Fichiers.
Dernière mise à jour le 4/5/2011
93
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
• Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis
choisissez Archiver dans le menu contextuel.
3 Cliquez sur Oui si vous souhaitez envoyer les fichiers dépendants associés aux fichiers sélectionnés ou sur Non si
vous ne voulez pas les envoyer. L'option par défaut est de ne pas transférer les fichiers indépendants. Vous pouvez
définir cette option en sélectionnant Edition > Préférences > Site.
Remarque : Il est en général conseillé de transférer les fichiers dépendants lorsque vous archivez un nouveau fichier, mais
si les versions les plus récentes des fichiers dépendants figurent déjà sur le serveur distant, il n'est pas utile de les transférer
à nouveau.
Un cadenas apparaît en regard de l'icône du fichier local pour indiquer que ce dernier n'est désormais accessible qu'en
lecture seule.
Important : Si vous archivez le fichier actif, il se peut que ce fichier soit automatiquement enregistré avant d'être archivé,
selon les options définies dans les préférences.
Archivage d'un fichier ouvert à partir de la fenêtre de document
1 Assurez-vous que le fichier à archiver ou à extraire est ouvert dans la fenêtre de document.
Remarque : Vous ne pouvez archiver qu'un seul fichier ouvert à la fois.
2 Effectuez l'une des opérations suivantes :
• Choisissez Site > Archiver.
• Cliquez sur l'icône Gestion des fichiers dans la barre d'outils de la fenêtre du document, puis sélectionnez Archiver
dans le menu.
Si le fichier actuel n'est pas associé au site actif dans le panneau Fichiers, Dreamweaver tente de déterminer à quel site
défini localement le fichier actuel appartient. Si le fichier actuel appartient à un autre site que celui qui est actif dans le
panneau Fichiers, Dreamweaver ouvre ce site, puis effectue l'opération d'archivage.
Important : Si vous archivez le fichier actif, il se peut que ce fichier soit automatiquement enregistré avant d'être archivé,
selon les options définies dans les préférences.
Annulation de l'extraction d'un fichier
Si vous extrayez un fichier, puis que vous décidez de ne pas le modifier (ou si vous décidez d'éliminer les modifications
que vous avez apportées), vous pouvez annuler l'opération d'extraction. Le fichier reprend alors son état d'origine.
Pour annuler l'extraction d'un fichier, procédez de l'une des façons suivantes :
• Ouvrez le fichier dans la fenêtre Document, puis choisissez Site > Annuler extraction.
• Dans le panneau Fichiers (Fenêtre > Fichiers), cliquez avec le bouton droit (Windows) ou en maintenant la touche
Ctrl enfoncée (Macintosh), puis sélectionnez Annuler extraction.
La copie locale du fichier passe alors en lecture seule, et toutes les modifications que vous y avez apportées sont
perdues.
Utilisation de WebDAV pour archiver et extraire des fichiers
Dreamweaver peut se connecter à un serveur utilisant WebDAV (Web-based Distributed Authoring and Versioning),
un ensemble d'extensions du protocole HTTP permettant aux utilisateurs au sein d'un groupe de modifier et de gérer
des fichiers sur des serveurs Web distants. Pour plus d'informations, voir www.webdav.org.
1 Si vous ne l'avez pas encore fait, définissez un site Dreamweaver indiquant le dossier local que vous utilisez pour
enregistrer vos fichiers de projet.
Dernière mise à jour le 4/5/2011
94
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
2 Sélectionnez Site > Gérer les sites puis double-cliquez sur votre site dans la liste.
3 Dans la boîte de dialogue Configuration du site, sélectionnez la catégorie Serveurs et effectuez l'une des actions
suivantes :
• Cliquez sur le bouton Ajouter nouveau serveur pour ajouter un nouveau serveur.
• Sélectionnez un serveur existant puis cliquez sur le bouton Modifier serveur existant.
4 Dans l'écran Base, sélectionnez WebDAV dans le menu Se connecter au moyen de, puis complétez si nécessaire les
autres options de l'écran Base.
5 Cliquez sur le bouton Avancé.
6 Sélectionnez l'option Activer l'extraction de fichier et entrez les informations suivantes :
• Dans la zone de texte Nom d'extraction, entrez un nom vous identifiant par rapport aux autres membres de
l'équipe.
• Indiquez votre adresse électronique dans la zone appropriée.
Le nom et l'adresse électronique sont utilisés pour l'identification sur le serveur WebDAV et s'affiche dans le panneau
Fichiers pour les contacts.
7 Cliquez sur Enregistrer.
Dreamweaver configure le site pour l'accès WebDAV. Lorsque vous utilisez la commande d'archivage ou d'extraction
sur un fichier du site, le fichier est transféré au moyen de WebDAV.
Remarque : Il se peut que WebDAV ne parvienne pas à extraire correctement des fichiers incluant un contenu
dynamique, parce que la méthode HTTP GET les rend au moment de leur extraction.
Utilisation de Subversion (svn) pour acquérir et archiver des fichiers
Dreamweaver peut se connecter à un serveur utilisant Subversion (SVN), un système de contrôle de version qui permet
aux utilisateurs de collaborer à la modification et la gestion de fichiers sur des serveurs Web distants. Dreamweaver
n'est pas un client SVN intégral, mais il permet aux utilisateurs d'obtenir les versions les plus récentes de fichiers,
d'apporter des modifications et d'envoyer les fichiers.
Important : Dreamweaver CS5 utilise la bibliothèque cliente Subversion 1.6.6. Les versions plus récentes de la
bibliothèque cliente Subversion ne sont pas rétrocompatibles. Notez que si vous mettez à jour une application cliente
tierce (par exemple TortoiseSVN) en vue d'une utilisation avec une version ultérieure de Subversion, l'application
Subversion mise à jour mettra à jour les métadonnées Subversion locales, et Dreamweaver ne pourra plus communiquer
avec Subversion. Ce problème n'est pas influencé par les mises à jour du serveur Subversion, car celles-ci sont
rétrocompatibles. Si vous procédez à une mise à jour vers une application cliente tierce qui fonctionne avec Subversion en
version 1.7 ou ultérieure, vous devrez rechercher des mises à jour auprès d'Adobe avant de pouvoir réutiliser Subversion
avec Dreamweaver. Pour plus d'informations sur ce problème, consultez le site www.adobe.com/go/dw_svn_fr.
Adobe recommande d'utiliser un outil de comparaison de fichiers, développé par une tierce partie, lorsque vous
utilisez des fichiers à contrôle de version SVN. Lorsque vous comparez des fichiers afin de détecter leurs différences,
vous pouvez voir précisément quels types de modifications d'autres utilisateurs ont apportées. Pour plus
d'informations sur les outils de comparaison de fichiers, utilisez un moteur de recherche Web tel que Google pour
trouver des outils de « comparaison de fichiers » ou « diff ». Dreamweaver fonctionne avec la plupart des outils tiers.
Vous trouverez un didacticiel vidéo sur l'utilisation de SVN et Dreamweaver à l'adresse
www.adobe.com/go/lrvid4049_dw_fr.
Dernière mise à jour le 4/5/2011
95
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
Etablissement d'une connexion SVN
Avant d'utiliser Subversion (SVN) comme système de contrôle des versions avec Dreamweaver, vous devez établir une
connexion à un serveur SVN. Pour définir une connexion à un serveur SVN, utilisez la catégorie Contrôle de version
de la boîte de dialogue Définition du site.
Le serveur SVN est un référentiel de fichiers depuis lequel vous (et d'autres utilisateurs) pouvez obtenir et valider des
fichiers. Il est différent du serveur distant qu'on utilise généralement dans Dreamweaver. En cas d'utilisation de SVN,
le serveur distant reste le serveur « en direct » pour vos pages Web. Le serveur SVN sert pour sa part au stockage du
référentiel des fichiers au sujet desquels vous voulez conserver un contrôle de version. Le processus habituel consiste
à obtenir des fichiers depuis le serveur SVN et à les y valider, puis à les publier sur votre serveur distant à partir de
Dreamweaver. La configuration du serveur distant est tout à fait distincte de celle de SVN.
Avant de pouvoir entamer cette configuration, vous devez disposer d'un accès à un serveur SVN et à un référentiel
SVN. Pour plus d'informations sur SVN, consultez le site Web de Subversion à l'adresse suivante :
http://subversion.apache.org/.
Pour configurer la connexion SVN, procédez comme suit :
1 Choisissez Site > Gérer les sites, sélectionnez le site pour lequel vous voulez configurer le contrôle des versions, puis
cliquez sur le bouton Modifier.
Remarque : Si vous n'avez pas encore défini de dossiers locaux et distants pour un site Dreamweaver, vous devrez au
moins configurer un site local avant de pouvoir continuer. Le site distant n'est pas nécessaire pour l'instant, mais vous
devrez en définir un pour pouvoir publier vos fichiers sur le Web. Pour plus d'informations, voir « Configuration d'un
site Dreamweaver » à la page 39.
2 Dans la boîte de dialogue Configuration du site, sélectionnez la catégorie Contrôle de version.
3 Sélectionnez Subversion dans la liste déroulante Accès.
4 Définissez les options d'accès comme suit :
• Sélectionnez un protocole dans la liste déroulante Protocole. Les protocoles disponibles sont HTTP, HTTPS,
SVN et SVN+SSH.
Remarque : L'emploi du protocole SVN+SSH exige une configuration spéciale. Pour plus d'informations, voir
www.adobe.com/go/learn_dw_svn_ssh_fr.
• Entrez l'adresse du serveur SVN dans la zone de texte Adresse du serveur (généralement sous la forme
nomserveur.domaine.com).
• Entrez le chemin d'accès à votre référentiel sur le serveur SVN dans la zone Référentiel (généralement sous la
forme /svn/votre_répertoire_racine. C'est à l'administrateur du serveur de nommer le dossier racine pour le
référentiel SVN).
• (Facultatif) Si vous voulez utiliser un port de serveur différent du port par défaut, activez l'option Instance
spécifique puis entrez un numéro de port dans la zone de texte.
• Entrez votre nom d'utilisateur et votre mot de passe sur SVN.
5 Cliquez sur Tester pour tester votre connexion, ou sur OK pour fermer la boîte de dialogue. Cliquez ensuite sur
Terminé pour fermer la boîte de dialogue Gérer les sites.
Lorsque la connexion au serveur est établie, votre référentiel SVN peut être visualisé dans le panneau Fichiers. Pour le
visualiser, vous pouvez choisir le mode Affichage du référentiel dans la liste déroulante Affichage, ou cliquez sur le
bouton Fichiers du référentiel
dans le panneau Fichiers développé.
Dernière mise à jour le 4/5/2011
96
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
Voir aussi
« Création d'un nouveau site » à la page 40
« Utilisation du panneau Fichiers » à la page 77
Obtention des versions les plus récentes des fichiers
Lorsque vous obtenez la version la plus récente d'un fichier depuis le référentiel SVN, Dreamweaver fusionne le
contenu de ce fichier à celui de la copie locale correspondante. En d'autres termes, si un autre utilisateur a mis à jour
le fichier depuis la dernière fois où vous l'avez validé, ses mises à jour sont fusionnées avec la version locale du fichier
sur votre ordinateur. Si le fichier n'existe pas sur le disque dur local, Dreamweaver se contente de l'obtenir.
Remarque : Lorsque vous obtenez pour la première fois des fichiers depuis le référentiel, travaillez avec un répertoire local
vide ou un répertoire local qui ne contient pas de fichiers portant les mêmes noms que dans le référentiel. Dreamweaver
ne monte pas les fichiers du référentiel sur le lecteur local à la première tentative si le lecteur local contient des fichiers
dont le nom est identique à celui de fichiers dans le référentiel distant.
1 Assurez-vous d'avoir bien défini une connexion SVN.
2 Effectuez l'une des opérations suivantes :
• Affichez la version locale de vos fichiers SVN dans le panneau Fichiers en choisissant Affichage local dans la liste
déroulante Affichage. Si vous travaillez dans le panneau Fichiers développé, l'affichage local est
automatiquement disponible. Cliquez ensuite avec le bouton droit de la souris (Windows) ou en maintenant la
touche Contrôle enfoncée (Macintosh) sur le fichier ou le dossier qui vous intéresse, puis cliquez sur Contrôle
de version > Obtenir les versions les plus récentes.
• Affichez les fichiers du référentiel SVN en choisissant Affichage du référentiel dans la liste déroulante Affichage
du panneau Fichiers ou en cliquant sur le bouton Fichiers du référentiel dans le panneau Fichiers développé.
Cliquez ensuite avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée
(Macintosh) sur le fichier ou le dossier qui vous intéresse, puis cliquez sur Obtenir les versions les plus récentes.
Remarque : Vous pouvez également cliquer sur un fichier à l'aide du bouton droit de la souris puis choisir Extraire dans
le menu contextuel, ou sélectionner ce fichier et cliquer sur le bouton Extraire afin d'obtenir sa version la plus récente.
Toutefois, comme SVN ne prend pas en charge les processus d'extraction, cette méthode ne permet pas d'extraire le fichier
de la façon habituelle.
Validation de fichiers
1 Assurez-vous d'avoir bien défini une connexion SVN.
2 Effectuez l'une des opérations suivantes :
• Affichez la version locale de vos fichiers SVN dans le panneau Fichiers en choisissant Affichage local dans la liste
déroulante Affichage. Si vous travaillez dans le panneau Fichiers développé, l'affichage local est
automatiquement disponible. Sélectionnez ensuite le fichier à valider puis cliquez sur Archiver.
• Affichez les fichiers du référentiel SVN en choisissant Affichage du référentiel dans la liste déroulante Affichage
du panneau Fichiers ou en cliquant sur le bouton Fichiers du référentiel dans le panneau Fichiers développé.
Cliquez ensuite avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée
(Macintosh) sur le fichier que vous voulez valider, puis cliquez sur Valider.
3 Prenez connaissance des actions dans la boîte de dialogue Archivage, apportez les éventuelles modifications
requises, puis cliquez sur OK.
Vous pouvez modifier des actions en les sélectionnant puis en cliquant sur le bouton dans le bas de la boîte de
dialogue Archivage. Deux options sont disponibles : Valider et Ignorer.
Dernière mise à jour le 4/5/2011
97
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
Remarque : La présence d'une coche de couleur verte sur un fichier dans le panneau Fichiers indique qu'il a été modifié
et pas encore validé dans le référentiel.
Mise à jour de l'état de fichiers ou de dossiers dans le référentiel
Vous pouvez mettre à jour l'état SVN d'un fichier ou d'un dossier. La mise à jour n'actualise pas l'affichage tout entier.
1 Assurez-vous d'avoir bien défini une connexion SVN.
2 Affichez les fichiers du référentiel SVN en choisissant Affichage du référentiel dans la liste déroulante Affichage du
panneau Fichiers ou en cliquant sur le bouton Fichiers du référentiel dans le panneau Fichiers développé.
3 Cliquez ensuite avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée
(Macintosh) sur n'importe quel fichier ou dossier du référentiel, puis cliquez sur Mettre à jour l'état.
Mise à jour de l'état de fichiers ou de dossiers locaux
Vous pouvez mettre à jour l'état SVN d'un fichier ou d'un dossier. La mise à jour n'actualise pas l'affichage tout entier.
1 Assurez-vous d'avoir bien défini une connexion SVN.
2 Affichez la version locale de vos fichiers SVN dans le panneau Fichiers en choisissant Affichage local dans la liste
déroulante Affichage. Si vous travaillez dans le panneau Fichiers développé, l'affichage local est automatiquement
disponible.
3 Cliquez ensuite avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée
(Macintosh) sur n'importe quel fichier ou dossier du panneau Fichiers, puis cliquez sur Mettre à jour l'état.
Affichage des versions d'un fichier
1 Assurez-vous d'avoir bien défini une connexion SVN.
2 Effectuez l'une des opérations suivantes :
• Affichez la version locale de vos fichiers SVN dans le panneau Fichiers en choisissant Affichage local dans la liste
déroulante Affichage. Si vous travaillez dans le panneau Fichiers développé, l'affichage local est
automatiquement disponible. Cliquez ensuite avec le bouton droit de la souris (Windows) ou en maintenant la
touche Contrôle enfoncée (Macintosh) sur le fichier dont vous voulez afficher les versions, puis choisissez
Contrôle de version > Afficher les versions.
• Affichez les fichiers du référentiel SVN en choisissant Affichage du référentiel dans la liste déroulante Affichage
du panneau Fichiers ou en cliquant sur le bouton Fichiers du référentiel dans le panneau Fichiers développé.
Cliquez ensuite avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée
(Macintosh) sur le fichier dont vous voulez afficher les versions, puis choisissez Afficher les versions.
3 Dans la boîte de dialogue Historique des versions, choisissez la ou les versions qui vous intéressent, puis effectuez
l'une des actions suivantes :
• Cliquez sur Comparer au site local pour comparer la version sélectionnée à la version locale du fichier.
Remarque : Vous devez installer un outil de comparaison de fichiers, provenant d'un éditeur tiers, avant de
pouvoir comparer les fichiers. Pour plus d'informations sur les outils de comparaison de fichiers, utilisez un moteur
de recherche Web tel que Google pour trouver des outils de « comparaison de fichiers » ou « diff ». Dreamweaver
fonctionne avec la plupart des outils tiers.
• Cliquez sur Comparer pour comparer deux versions sélectionnées. Cliquez tout en maintenant la touche CTRL
enfoncée pour sélectionner deux versions simultanément.
Dernière mise à jour le 4/5/2011
98
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
• Cliquez sur Afficher pour afficher la version sélectionnée. Cette action n'entraîne pas le remplacement de la
copie locale actuelle du fichier concerné. Vous pouvez enregistrer la version sélectionnée sur votre disque dur
comme vous le feriez avec n'importe quel autre fichier.
• Cliquez sur Marquer comme actuel pour faire de la version sélectionnée la version la plus récente du référentiel.
Verrouillage et déverrouillage de fichiers
Le verrouillage d'un fichier dans le référentiel SVN permet d'indiquer aux autres utilisateurs que vous êtes en train de
travailler dessus. Les autres utilisateurs peuvent toujours modifier le fichier localement, mais ils ne pourront valider le
fichier que quand vous l'aurez déverrouillé. Lorsque vous verrouillez un fichier dans le référentiel, vous verrez que ce
fichier s'accompagne d'une icône représentant un cadenas ouvert. Pour les autres utilisateurs, l'icône représente un
cadenas fermé.
1 Assurez-vous d'avoir bien défini une connexion SVN.
2 Effectuez l'une des opérations suivantes :
• Affichez les fichiers du référentiel SVN en choisissant Affichage du référentiel dans la liste déroulante Affichage
du panneau Fichiers ou en cliquant sur le bouton Fichiers du référentiel dans le panneau Fichiers développé.
Cliquez ensuite avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée
(Macintosh) sur le fichier qui vous intéresse, puis choisissez Verrouiller ou Déverrouiller.
• Affichez la version locale de vos fichiers SVN dans le panneau Fichiers en choisissant Affichage local dans la liste
déroulante Affichage. Si vous travaillez dans le panneau Fichiers développé, l'affichage local est
automatiquement disponible. Cliquez ensuite avec le bouton droit de la souris (Windows) ou en maintenant la
touche Contrôle enfoncée (Macintosh) sur le fichier qui vous intéresse, puis choisissez Verrouiller ou
Déverrouiller.
Ajout d'un nouveau fichier au référentiel
La présence d'un symbole « plus » bleu sur un fichier dans le panneau Fichiers indique que ce fichier n'existe pas encore
dans le référentiel SVN.
1 Assurez-vous d'avoir bien défini une connexion SVN.
2 Dans le panneau Fichiers, sélectionnez le fichier à ajouter au référentiel, puis cliquez sur le bouton Archiver.
3 Assurez-vous que le fichier est sélectionné pour une validation dans la boîte de dialogue Validation, puis cliquez
sur OK.
Déplacement, copie, suppression ou rétablissement de fichiers
• Pour déplacer un fichier, faites-le glisser vers le dossier de destination de votre site local.
Lorsque vous déplacez un fichier, Dreamweaver le marque, à son nouvel emplacement, au moyen d'un signe
Ajouter avec historique, et le marque à l'aide d'un signe Supprimer à son ancien emplacement. Lorsque vous
envoyez ces fichiers, celui qui se trouve à l'ancien emplacement disparaît.
• Pour copier un fichier, sélectionnez-le, copiez-le (Edition > Copier) puis collez-le (Edition > Coller) à son nouvel
emplacement.
Lorsque vous copiez et collez un fichier, Dreamweaver le marque, à son nouvel emplacement, au moyen d'un signe
Ajouter avec historique.
• Pour supprimer un fichier, sélectionner-le puis appuyez sur supprimer.
Dernière mise à jour le 4/5/2011
99
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
Dreamweaver vous permet de supprimer uniquement la version locale du fichier, ou à la fois la version locale et
celle sur le serveur SVN. Si vous décidez de ne supprimer que la version locale, le fichier sur le serveur SVN n'est
pas touché. Si vous décidez de supprimer également la version sur le serveur SVN, la version locale est marquée à
l'aide d'un signe Supprimer, et vous devez envoyer le fichier pour que la suppression soit effectuée.
• Pour rétablir un fichier copié ou déplacé à son emplacement d'origine, cliquez sur le fichier à l'aide du bouton droit
puis choisissez Contrôle de version > Rétablir.
Résolution des conflits entre fichiers
Si votre fichier est en conflit avec un autre fichier sur le serveur, vous pouvez le modifier puis le marquer comme étant
résolu. Par exemple, si vous tentez d'archiver un fichier qui est en conflit avec les modifications apportées par un autre
utilisateur, SVN ne vous permettra pas de valider ce fichier. Vous pouvez obtenir la version la plus récente du fichier
depuis le référentiel, apporter manuellement des modifications à votre copie de travail, puis marquer votre fichier
comme étant résolu de façon à pouvoir le valider.
1 Assurez-vous d'avoir bien défini une connexion SVN.
2 Affichez la version locale de vos fichiers SVN dans le panneau Fichiers en choisissant Affichage local dans la liste
déroulante Affichage. Si vous travaillez dans le panneau Fichiers développé, l'affichage local est automatiquement
disponible.
3 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh)
sur le fichier dont vous voulez résoudre le conflit, puis choisissez Contrôle de version > Marquer comme résolu.
Travail hors ligne
Il peut s'avérer utile de travailler hors ligne, de manière à éviter tout accès au référentiel pendant d'autres activités de
transfert de fichiers. Dreamweaver se connecte au référentiel SVN dès que vous lancez une activité qui exige une
connexion (Obtenir les versions les plus récentes, Valider, etc.).
1 Assurez-vous d'avoir bien défini une connexion SVN.
2 Affichez la version locale de vos fichiers SVN dans le panneau Fichiers en choisissant Affichage local dans la liste
déroulante Affichage. Si vous travaillez dans le panneau Fichiers développé, l'affichage local est automatiquement
disponible.
3 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh)
sur n'importe quel fichier ou dossier du panneau Fichiers, puis choisissez Contrôle de version > Travailler hors
ligne.
Nettoyage d'un site SVN local
Cette commande permet de supprimer les verrous des fichiers, de manière à reprendre des activités non terminées.
Utilisez cette commande pour supprimer d'anciens verrous si vous recevez des messages d'erreur vous informant que
la copie de travail est verrouillée.
1 Assurez-vous d'avoir bien défini une connexion SVN.
2 Affichez la version locale de vos fichiers SVN dans le panneau Fichiers en choisissant Affichage local dans la liste
déroulante Affichage. Si vous travaillez dans le panneau Fichiers développé, l'affichage local est automatiquement
disponible.
3 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh)
sur le fichier à nettoyer, puis choisissez Contrôle de version > Nettoyer.
Dernière mise à jour le 4/5/2011
100
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
A propos du déplacement de fichiers et de dossiers dans des sites contrôlés par Subversion
Lorsque vous déplacez les versions locales de fichiers ou de dossiers dans un site contrôlé par Subversion, vous risquez
de créer des problèmes à d'autres utilisateurs qui pourraient se synchroniser avec le référentiel SVN. Par exemple, si
vous déplacez un fichier localement et ne le validez pas dans le référentiel pendant quelques heures, il se peut qu'un
autre utilisateur tente d'en obtenir la version la plus récente depuis son ancien emplacement. Veillez donc à toujours
valider les fichiers sur le serveur SVN juste après les avoir déplacés localement.
Les fichiers et les dossiers demeurent sur le serveur jusqu'à ce que vous les supprimiez manuellement. Ainsi, même si
vous déplacez un fichier dans un dossier local différent et que vous le validez, son ancienne version reste à
l'emplacement précédent sur le serveur. Pour éviter toute confusion, supprimez les anciennes copies des fichiers et
dossiers que vous avez déplacés.
Lorsque vous déplacez un fichier localement et que vous le validez de nouveau sur le serveur SVN, l'historique des
versions du fichier est perdu.
Synchronisation de fichiers
Synchronisation des fichiers entre le site local et le site distant
Après avoir créé des fichiers sur votre site local et votre site distant, il vous est possible de synchroniser les fichiers entre
les deux sites.
Remarque : Si votre site distant est un serveur FTP (et non un serveur en réseau), la synchronisation de vos fichiers
s'effectuera en FTP.
Avant de synchroniser vos sites, vous pouvez vérifier les fichiers à placer, à acquérir, à supprimer ou à ignorer. Par
ailleurs, une fois la synchronisation effectuée, Dreamweaver vous indique les fichiers qui ont été mis à jour.
Voir aussi
« Gestion des transferts de fichiers » à la page 90
« Archivage et extraction de fichiers dans un dossier distant » à la page 92
« Acquisition de fichiers depuis un serveur distant » à la page 87
« Placement de fichiers sur un serveur distant » à la page 88
« Comparaison de fichiers pour en chercher les différences » à la page 102
Identification des fichiers qui sont plus récents sur le site local ou le site distant, sans
effectuer de synchronisation
❖ Procédez de l’une des façons suivantes dans le panneau Fichiers :
• Cliquez sur le menu Options dans le coin supérieur droit puis sélectionnez Edition > Sélectionner locaux plus
récents ou Edition > Sélectionner distants plus récents.
• Dans le panneau Fichiers, cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfoncée
(Macintosh), puis choisissez Sélectionner > Sélectionner locaux plus récents ou Sélectionner > Sélectionner distants
plus récents.
Dernière mise à jour le 4/5/2011
101
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
Affichage d'informations de synchronisation détaillées pour un fichier précis
❖ Dans le panneau Fichiers, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfoncée (Macintosh) sur le fichier au sujet duquel vous voulez obtenir des informations, puis sélectionnez Afficher
les informations de synchronisation.
Remarque : Pour que cette fonctionnalité soit disponible, l'option Conserver les informations de synchronisation doit être
activée dans la catégorie Distant de la boîte de dialogue Définition du site.
Synchronisation de vos fichiers
1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez un site dans le menu (dans lequel le site, le serveur ou
le disque dur en cours d'utilisation s'affiche).
2 (Facultatif) Sélectionnez des fichiers ou des dossiers précis, ou passez à l'étape suivante pour synchroniser le site
entier.
3 Cliquez sur le menu Options dans le coin supérieur droit du panneau Fichiers, puis choisissez Site > Synchroniser.
Vous pouvez également cliquer sur le bouton Synchroniser dans le haut du panneau Fichiers pour synchroniser les
fichiers.
4 Dans le menu Synchroniser, réalisez une des opérations suivantes :
• Pour procéder à la synchronisation du site entier, sélectionnez Tout le site nom du site.
• Pour ne synchroniser que les fichiers sélectionnés, sélectionnez Fichiers locaux sélectionnés seulement (ou Fichiers
distants sélectionnés seulement si vous avez effectué votre sélection depuis l'affichage Site distant du panneau
Fichiers).
5 Cliquez sur la direction désirée pour le transfert :
Placer les fichiers plus récents sur hôte distant Télécharge tous les fichiers locaux qui n'existent pas sur le serveur
distant ou qui ont été modifiés depuis le dernier téléchargement.
Obtenir les fichiers plus récents depuis l'hôte distant Télécharge tous les fichiers distants qui n'existent pas localement
ou qui ont été modifiés depuis le dernier téléchargement.
Placer et obtenir les fichiers plus récents Transfère, selon le cas, les versions les plus récentes de tous les fichiers sur le
site local ou sur le site distant.
6 Indiquez si les fichiers qui sont présents sur le site de destination mais n'ont pas d'équivalent sur le site d'origine
doivent être supprimés. Cette option n'est pas disponible si vous sélectionnez les options d'acquisition et de
placement dans le menu de direction.
Si vous avez sélectionné Placer les fichiers plus récents sur hôte distant et que vous activez l'option d'effacement, tous
les fichiers du site distant qui n'ont pas d'équivalent sur le site local sont supprimés. Si vous avez sélectionné Obtenir
les fichiers plus récents depuis l'hôte distant et que vous activez l'option d'effacement, tous les fichiers du site local qui
n'ont pas d'équivalent sur le site distant sont supprimés.
7 Cliquez sur Aperçu.
Remarque : Avant de synchroniser les fichiers, vous devez procéder à un aperçu des actions que Dreamweaver va devoir
exécuter pour cette tâche.
Si la version la plus récente de chacun des fichiers sélectionnés figure déjà aux deux endroits et que rien n'a besoin
d'être supprimé, un message d'avertissement vous signale qu'aucune synchronisation n'est nécessaire. Dans le cas
contraire, la boîte de dialogue Synchroniser s'affiche et vous permet de modifier les actions (placer, acquérir,
supprimer et ignorer) pour ces fichiers avant d'exécuter la synchronisation.
8 Vérifiez les différentes actions à effectuer.
Dernière mise à jour le 4/5/2011
102
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
9 Pour modifier l'action pour un fichier particulier, sélectionnez-le puis cliquez sur l'une des icônes d'action situées
en bas de la fenêtre d'aperçu.
Comparer L'action Comparer ne fonctionne que si vous avez installé et spécifié un outil de comparaison de fichiers
dans Dreamweaver. Si l'icône Action est en grisé, l'action correspondante n'est pas disponible.
Marquer les fichiers comme synchronisés Cette option vous permet d'indiquer que le ou les fichiers sélectionnés sont
déjà synchronisés.
10 Cliquez sur OK pour synchroniser les fichiers. Vous pouvez afficher ou enregistrer les détails de la synchronisation
dans un fichier local.
Comparaison de fichiers pour en chercher les
différences
Comparaison des fichiers locaux et distants
Dreamweaver peut utiliser des outils de comparaison de fichiers (également appelés « outils diff ») afin de comparer
le code des versions locale et distante du même fichier, deux fichiers distants différents ou deux fichiers locaux
différents. La comparaison des versions locale et distante est utile si vous travaillez localement sur un fichier et que
vous suspectez que sa copie sur le serveur a été modifiée. Sans quitter Dreamweaver, vous pouvez afficher et fusionner
les modifications distantes dans votre version locale avant de placer le fichier sur le serveur.
La comparaison de deux fichiers locaux ou de deux fichiers distants est également utile si vous conservez des versions
précédentes, renommées de vos fichiers. En cas d'oubli des modifications apportées à un fichier d'une version
précédente, effectuez une comparaison rapide.
Avant de commencer, vous devez installer un outil de comparaison de fichiers tiers sur votre système. Pour plus
d'informations sur les outils de comparaison de fichiers, utilisez un moteur de recherche Web tel que Google pour
trouver des outils de « comparaison de fichiers » ou « diff ». Dreamweaver fonctionne avec la plupart des outils tiers.
Définition d'un outil de comparaison dans Dreamweaver
1 Installez l'outil de comparaison de fichiers sur le même système que Dreamweaver.
2 Dans Dreamweaver, ouvrez la boîte de dialogue Préférences en sélectionnant Edition > Préférences (Windows) ou
Dreamweaver > Préférences (Macintosh), puis sélectionnez la catégorie Comparaison de fichiers.
3 Effectuez l'une des opérations suivantes :
• Sous Windows, cliquez sur le bouton Parcourir et sélectionnez une application qui compare les fichiers.
• Sur Macintosh, cliquez sur le bouton Parcourir et sélectionnez l'outil ou le script qui lance l'outil de comparaison
de fichiers dans la ligne de commande (pas l'outil de comparaison de fichiers).
Les outils ou les scripts de lancement se trouvent généralement dans le dossier /usr/bin de votre Macintosh. Par
exemple, si vous souhaitez utiliser FileMerge, recherchez le dossier /usr/bin et sélectionnez opendiff, l'outil qui lance
FileMerge.
Le tableau suivant répertorie les outils de comparaison de fichiers courants pour le Macintosh ainsi que l'emplacement
de leurs outils ou de leurs scripts de lancement sur votre disque dur :
Dernière mise à jour le 4/5/2011
103
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
Si vous utilisez
Sélectionnez le fichier suivant
FileMerge
/usr/bin/opendiff (ou /Developer/usr/bin/opendiff)
BBEdit
/usr/bin/bbdiff
TextWrangler
/usr/bin/twdiff
Remarque : Le dossier usr est généralement masqué dans le Finder. Cependant, vous pouvez y accéder en utilisant le
bouton Parcourir dans Dreamweaver.
Remarque : Les résultats effectivement affichés dépendent de l'outil diff utilisé. Consultez le guide d'utilisation de votre
outil pour comprendre comment interpréter ces résultats.
Comparaison de deux fichiers locaux
Vous pouvez comparer deux fichiers situés à n'importe quel endroit sur votre ordinateur.
1 Dans le panneau Fichiers, appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant avec
la souris sur les deux fichiers pour les sélectionner.
Pour choisir des fichiers se trouvant à l'extérieur de votre site défini, accédez à votre disque local dans le menu gauche
contextuel du panneau Fichiers puis sélectionnez-les.
2 Cliquez avec le bouton droit de la souris sur l'un des fichiers sélectionnés puis choisissez Compare Local Files
(Comparer les fichiers locaux) dans le menu contextuel.
Remarque : Si votre souris n'est dotée que d'un seul bouton, appuyez sur la touche Ctrl tout en cliquant avec la souris sur
l'un des fichiers sélectionnés.
L'outil de comparaison de fichiers démarre et compare les deux fichiers.
Comparaison de deux fichiers distants
Vous pouvez comparer deux fichiers situés sur votre serveur distant. Vous devez définir un site Dreamweaver avec des
paramètres distants avant de pouvoir effectuer cette tâche.
1 Dans le panneau Fichiers, affichez les fichiers sur le serveur distant en choisissant Affichage distant dans le menu
déroulant situé à droite.
2 Appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant avec la souris sur les deux
fichiers pour les sélectionner
3 Cliquez avec le bouton droit de la souris sur l'un des fichiers sélectionnés puis choisissez Comparer les fichiers
distants dans le menu contextuel.
Remarque : Si votre souris n'est dotée que d'un seul bouton, appuyez sur la touche Ctrl tout en cliquant avec la souris sur
l'un des fichiers sélectionnés.
L'outil de comparaison de fichiers démarre et compare les deux fichiers.
Comparaison entre un fichier local et un fichier distant
Vous pouvez effectuer une comparaison entre un fichier local et un fichier se trouvant sur votre serveur distant. Pour
cela, vous devez d'abord définir un site Dreamweaver avec des paramètres distants.
❖ Dans le panneau Fichiers, cliquez avec le bouton droit de la souris sur un fichier local et choisissez Comparer avec
distants dans le menu contextuel.
Remarque : Si votre souris n'est dotée que d'un seul bouton, appuyez sur la touche Ctrl tout en cliquant avec la souris sur
le fichier local.
Dernière mise à jour le 4/5/2011
104
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
L'outil de comparaison de fichiers démarre et compare les deux fichiers.
Comparaison entre un fichier distant et un fichier local
Vous pouvez effectuer une comparaison entre un fichier distant et un fichier local. Vous devez définir un site
Dreamweaver avec des paramètres distants avant d'effectuer cette tâche.
1 Dans le panneau Fichiers, affichez les fichiers sur le serveur distant en choisissant Affichage distant dans le menu
déroulant situé à droite.
2 Cliquez avec le bouton droit de la souris sur un fichier dans le panneau et choisissez Comparer avec fichier local
dans le menu contextuel.
Remarque : Si votre souris n'est dotée que d'un seul bouton, appuyez sur la touche Ctrl tout en cliquant avec la souris sur
le fichier.
Comparaison entre un fichier ouvert et un fichier distant
Vous pouvez effectuer une comparaison entre un fichier ouvert dans Dreamweaver et son homologue sur le serveur
distant.
❖ Dans la fenêtre de document, choisissez Fichier > Comparer avec distants.
L'outil de comparaison de fichiers démarre et compare les deux fichiers.
Vous pouvez également cliquer avec le bouton droit de la souris sur l'onglet de document situé en haut de la fenêtre
de document et choisir Comparer avec distants dans le menu contextuel.
Comparaison avant le placement de fichiers
Si vous modifiez un fichier localement et essayez ensuite de le télécharger vers votre serveur distant, Dreamweaver
vous avertit si la version distante du fichier a été changée. Vous avez la possibilité de comparer les deux fichiers avant
de télécharger le fichier et d'écraser la version distante.
Avant de commencer, vous devez installer un outil de comparaison de fichiers sur votre système et le définir dans
Dreamweaver.
1 Une fois que vous avez modifié un fichier dans un site Dreamweaver, placez le fichier (Site > Placer) sur votre site
distant.
Si la version distante du fichier a été modifiée, vous recevrez une notification avec la possibilité de visualiser les
différences.
2 Pour visualiser les différences, cliquez sur le bouton Comparer.
L'outil de comparaison de fichiers démarre et compare les deux fichiers.
Si vous n'avez pas spécifié d'outil de comparaison de fichiers, un message vous invite à le faire.
3 Une fois que vous avez revu ou fusionné les changements dans l'outil, vous pouvez passer à l'opération de placement
ou l'annuler.
Comparaison de fichiers lors de la synchronisation
Vous pouvez comparer les versions locales de vos fichiers avec les versions distantes lorsque vous synchronisez les
fichiers de votre site avec Dreamweaver.
Dernière mise à jour le 4/5/2011
105
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
Avant de commencer, vous devez installer un outil de comparaison de fichiers sur votre système et le définir dans
Dreamweaver.
1 Cliquez avec le bouton droit de la souris à n'importe quel endroit du panneau Fichiers et sélectionnez Synchroniser
dans le menu contextuel.
2 Complétez les options de la boîte de dialogue Synchroniser les fichier, puis cliquez sur Aperçu.
Une fois que vous avez cliqué sur Aperçu, vous obtenez une liste des fichiers sélectionnés et des actions qui seront
effectuées pendant la synchronisation.
3 Dans la liste, sélectionnez les fichiers que vous souhaitez comparer et cliquez sur le bouton Comparer (l'icône avec
les deux petites pages).
Remarque : Le fichier doit être basé sur du texte (fichier HTML ou ColdFusion).
Dreamweaver lance l'outil de comparaison qui compare les versions locale et distante de chaque fichier sélectionné.
Voir aussi
« Synchronisation de fichiers » à la page 100
Restauration de fichiers (utilisateurs de Contribute)
Restauration de fichiers (utilisateurs de Contribute)
Dreamweaver enregistre automatiquement plusieurs versions d'un document lorsque la compatibilité Adobe
Contribute est activée.
Remarque : Contribute doit être installé sur le même ordinateur que Dreamweaver.
La restauration des fichiers doit être activée au niveau des paramètres administratifs de Contribute. Pour plus
d'informations, voir Administration de Contribute.
1 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur un
fichier dans le panneau Fichiers.
2 Sélectionnez Restaurer la page.
S'il existe une version précédente de la page à restaurer, la boîte de dialogue Restauration s'affiche.
3 Sélectionnez la version de la page à restaurer et cliquez sur Restaurer.
Voir aussi
« Préparation d'un site à utiliser avec Contribute » à la page 58
« Suppression, déplacement ou modification du nom d'un fichier distant sur un site Contribute » à la page 60
Dernière mise à jour le 4/5/2011
106
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
Voilage de fichiers et de dossiers dans votre site
A propos du voilage de site
Le voilage vous permet d'exclure des fichiers et dossiers du site de certaines opérations (acquisition et placement, par
exemple). Vous pouvez également voiler tous les fichiers d'un type précis (JPEG, FLV, XML, etc.) pour les opérations
du site. Comme Dreamweaver conserve en mémoire tous les paramètres définis pour chaque site, vous n'avez pas à
sélectionner le type de fichier voulu chaque fois que vous travaillez sur un site.
Par exemple, si vous travaillez sur un site de grande taille et que vous ne voulez pas envoyer vos fichiers multimédias
tous les jours, vous pouvez utiliser la fonction de voilage pour voiler votre dossier multimédia. Dreamweaver exclura
les fichiers de ce dossier de toutes les opérations que vous effectuez sur le site.
Vous pouvez voiler des fichiers et des dossiers sur le site distant ou local. Le voilage exclut les fichiers et dossiers voilés
des opérations suivantes :
• Réalisation d'opérations de placement, d'acquisition, d'archivage et d'extraction
• Génération de rapports
• Recherche des fichiers locaux et distants les plus récents
• Réalisation d'opérations portant sur le site entier, telles que la vérification et la modification des liens
• Synchronisation
• Utilisation du contenu du panneau Actifs
• Mise à jour des modèles et des bibliothèques
Remarque : Vous pouvez toujours effectuer une opération sur un dossier ou un fichier voilé précis en le sélectionnant
dans le panneau Fichiers, puis en effectuant l'opération voulue. Toute opération effectuée directement sur un fichier
ou un dossier annule le voilage.
Remarque : Dreamweaver exclut les modèles et les éléments de bibliothèque voilés lors des opérations d'acquisition et
de placement de fichiers seulement. Dreamweaver n'exclut aucun de ces éléments lors des opérations par lots, car cela
pourrait les désynchroniser par rapport à leurs instances.
Activation et désactivation du voilage d'un site
Le voilage vous permet de définir les dossiers, les fichiers et les types de fichiers du site que vous souhaitez exclure de
certaines opérations (acquisition et placement, par exemple). Cette option est activée par défaut. Vous pouvez le
désactiver définitivement ou provisoirement afin d'effectuer une opération sur tous les fichiers, y compris les fichiers
voilés. Lorsque vous désactivez le voilage sur un site, cela supprime tous les voiles des fichiers voilés. Lorsque vous le
réactivez, tous les fichiers qui étaient précédemment voilés retrouvent cet état.
Remarque : Vous pouvez également utiliser l'option Supprimer tous les voiles pour supprimer le voilage de tous les
fichiers, mais cela ne désactive pas le voilage. De plus, cette option ne vous permet pas de rétablir automatiquement le
voilage de tous les dossiers et fichiers qui étaient auparavant voilés ; il vous faut ensuite redéfinir manuellement le voilage
de chaque dossier, fichier et type de fichier concerné.
1 Sélectionnez un fichier ou un dossier dans le panneau Fichiers (Fenêtre > Fichiers).
2 Cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis procédez de
l'une des façons suivantes :
• Sélectionnez Voilage > (désélectionnez l'option pour la désactiver).
Dernière mise à jour le 4/5/2011
107
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
• Sélectionnez Voilage > Paramètres pour ouvrir la catégorie Voilage de la boîte de dialogue Configuration du site.
Sélectionnez ou désélectionnez, puis activez ou désactivez l'option Voiler les fichiers se terminant avec, selon que
vous souhaitez ou non activer le voilage de certains types de fichier. Saisissez ou supprimez les suffixes de fichier
dans la zone de texte afin d'indiquer le type de fichier pour lequel activer ou désactiver le voilage.
Voilage et suppression du voilage pour les fichiers et dossiers d'un site
Il est possible de voiler des fichiers et des dossiers spécifiques, mais pas tous les fichiers et dossiers existants ni un site
entier. Il est toutefois possible de voiler plusieurs fichiers et dossiers simultanément.
1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez un site pour lequel la fonction de voilage est activée.
2 Sélectionnez les dossiers ou fichiers auxquels appliquer un voile ou le supprimer.
3 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis
choisissez Voilage > Voiler ou Voilage > Supprimer le voile dans le menu contextuel.
Une ligne rouge est présente ou non sur l'icône du fichier ou du dossier, pour indiquer qu'il est voilé ou dévoilé.
Remarque : Vous pouvez toujours effectuer une opération sur un fichier ou un dossier voilé précis en le sélectionnant dans
le panneau Fichiers, puis en effectuant l'opération voulue. Toute opération effectuée directement sur un fichier ou un
dossier annule le voilage.
Voilage et suppression du voilage de certains types de fichier
Vous pouvez indiquer des types de fichier à voiler afin que Dreamweaver voile tous les fichiers se terminant d'une
certaine manière. Ainsi pouvez-vous, par exemple, voiler tous les fichiers se terminant par l'extension .txt. Les types de
fichier indiqués ne doivent pas nécessairement correspondre à des extensions de fichier ; il peut s'agir de n'importe
quel élément apparaissant à la fin d'un nom de fichier.
Voilage de certains types de fichier au sein d'un site
1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez un site pour lequel la fonction de voilage est activée.
2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis
sélectionnez Voilage > Paramètres.
3 Activez l'option Voiler les fichiers se terminant avec, entrez les types de fichier à voiler dans la zone de saisie, puis
cliquez sur OK.
Vous pouvez saisir, par exemple, .jpg afin de voiler tous les fichiers dont le nom se termine par .jpg dans le site.
Pour saisir plusieurs types de fichier, séparez chaque type par un espace ; n'utilisez ni virgule ni point-virgule.
Dans le panneau Fichiers, une ligne rouge apparaît sur les fichiers concernés pour indiquer qu'ils sont voilés.
Certains logiciels créent des fichiers de sauvegarde se terminant par un suffixe donné, tel que .bak. Vous pouvez voiler
ces fichiers.
Remarque : Vous pouvez toujours effectuer une opération sur un fichier ou un dossier voilé précis en le sélectionnant dans
le panneau Fichiers, puis en effectuant l'opération voulue. Toute opération effectuée directement sur un fichier ou un
dossier annule le voilage.
Désactivation du voilage de certains types de fichier au sein d'un site
1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez un site pour lequel la fonction de voilage est activée.
2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis
sélectionnez Voilage > Paramètres.
Dernière mise à jour le 4/5/2011
108
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
3 Dans la boîte de dialogue Définition du site, onglet Avancé, utilisez l’une des méthodes suivantes :
• Désactivez l'option Voiler les fichiers se terminant avec pour supprimer le voile de tous les types de fichier
répertoriés dans la zone de texte.
• Dans la zone de texte, supprimez certains types de fichier pour ne supprimer le voile que sur ces types de fichier.
4 Cliquez sur OK.
Les lignes rouges disparaissent des fichiers concernés pour indiquer qu'ils ne sont plus voilés.
Suppression du voilage de tous les fichiers et dossiers
Vous pouvez supprimer le voile de tous les fichiers et dossiers d'un site, et ce en une seule opération. Comme il est
impossible d'annuler ce type d'opération, vous ne pourrez pas rétablir le voile de tous les éléments qui étaient
auparavant voilés. Vous devrez revoiler les éléments un par un.
Si vous souhaitez supprimer provisoirement le voile de tous les dossiers et fichiers et les revoiler par la suite, désactivez
le voilage sur le site.
1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez un site pour lequel la fonction de voilage est activée.
2 Sélectionnez un fichier ou un dossier quelconque du site.
3 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis
sélectionnez Voilage> Supprimer tous les voiles.
Remarque : Cette opération désactive également l'option Voiler les fichiers se terminant avec de la catégorie Voilage de
la boîte de dialogue Définition du site.
Les lignes rouges sur les icônes des dossiers et des fichiers disparaissent pour indiquer que tous les fichiers et dossiers
du site ne sont plus voilés.
Stockage des informations sur les fichiers dans des
Design Notes
A propos des Design Notes
Les Design Notes sont des notes créées pour un fichier donné. Les Design Notes sont associées au fichier qu'elles
décrivent, mais stockées dans un autre fichier. Le panneau Fichiers vous permet de voir les fichiers auxquels sont
jointes des Design Notes, car une icône spécifique s'affiche dans la colonne Notes.
Les Design Notes vous permettent de conserver des informations supplémentaires sur les documents, telles que des
commentaires sur l'état des fichiers ou le nom des fichiers source des images. Par exemple, si vous copiez un document
d'un site dans un autre, vous pouvez ajouter à ce dernier des Design Notes contenant un commentaire expliquant que
le document original se trouve dans le dossier de l'autre site.
Les Design Notes permettent également de conserver des informations confidentielles, qu'il est impossible de laisser
dans un document pour des raisons de sécurité, par exemple des notes sur la façon dont un devis a été calculé, dont
une configuration a été élaborée ou encore sur les facteurs de marketing qui ont influencé une décision de production.
Dernière mise à jour le 4/5/2011
109
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
Si vous ouvrez un fichier dans Adobe® Fireworks® ou Flash, puis l'exportez dans un autre format, Fireworks ou Flash
enregistre automatiquement le nom du fichier source d'origine dans un fichier de Design Notes. Ainsi, si vous ouvrez
le fichier maMaison.png dans Fireworks, puis l'exportez au format GIF en lui attribuant le nom maMaison.gif,
Fireworks crée un fichier Design Notes du nom de maMaison.gif.mno. Ce fichier Design Notes contient le nom du
fichier d'origine, sous la forme d'une URL file: absolue. De ce fait, les Design Notes du fichier maMaison.gif
pourraient contenir la ligne suivante :
fw_source="file:///Mydisk/sites/assets/orig/myhouse.png"
Au même titre, les Design Notes d'un fichier Flash pourraient contenir la ligne suivante :
fl_source="file:///Mydisk/sites/assets/orig/myhouse.fla"
Remarque : Pour pouvoir partager des Design Notes, les utilisateurs doivent définir le même chemin d'accès pour la
racine du site (par exemple, sites/assets/orig).
Lorsque vous importez l'image dans Dreamweaver, le fichier de Design Notes est automatiquement copié sur le site,
en même temps que l'image. Si vous sélectionnez cette image dans Dreamweaver et décidez de la modifier à l'aide de
Fireworks, ce dernier ouvre directement le fichier d'origine pour vous permettre de le modifier.
Voir aussi
« Lancement d'un éditeur externe pour des fichiers multimédias » à la page 268
Activation et désactivation des Design Notes pour un site
Les Design Notes sont associées à un fichier mais sont conservées dans un fichier séparé. Les Design Notes vous
permettent de conserver des informations supplémentaires sur les documents, telles que des commentaires sur l'état
des fichiers ou le nom des fichiers source des images.
L'activation et la désactivation des Design Notes pour un site donné s'effectuent depuis la catégorie Design Notes de la
boîte de dialogue Définition du site. Lorsque vous activez les Design Notes, vous pouvez également décider de les
partager avec d'autres utilisateurs.
1 Choisissez Site > Gérer les sites.
2 Dans la boîte de dialogue Gérer les sites, sélectionnez un site puis cliquez sur Modifier.
3 Dans la boîte de dialogue Configuration du site, développez Paramètres avancés, puis sélectionnez la catégorie
Design Notes.
4 Sélectionnez Gérer Design Notes pour activer les Design Notes (désélectionnez cette option pour les désactiver).
5 Si vous souhaitez supprimer tous les fichiers de Design Notes locaux associés au site, cliquez sur Nettoyer puis sur
Oui. Si vous voulez supprimer des fichiers Design Notes distants, vous devez le faire manuellement.
Remarque : La commande Nettoyer Design Notes ne supprime que les fichiers MNO (Design Notes). Elle ne supprime
pas le dossier _notes ni le fichier dwsync.xml qui s'y trouve. Dreamweaver emploie le fichier dwsync.xml pour gérer les
informations relatives à la synchronisation du site.
6 Activez l'option Activer la fonction Télécharger les Design Notes pour les partager afin de télécharger les Design
Notes associées au site en même temps que les autres documents, puis cliquez sur OK.
• Si vous activez cette option, vous pouvez partager les Design Notes avec les autres membres de votre équipe.
Lorsque vous placez ou acquérez un fichier, Dreamweaver place ou acquiert automatiquement le fichier de Design
Notes associé.
Dernière mise à jour le 4/5/2011
110
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
• Si vous n'activez pas cette option, Dreamweaver conserve les Design Notes localement, mais ne les télécharge pas
avec les fichiers. Si vous travaillez seul sur le site, vous pouvez désactiver cette option afin d'améliorer les
performances. Les Design Notes ne seront pas transférées sur le site distant lorsque vous archiverez ou placerez vos
fichiers. En outre, il vous sera toujours possible d'ajouter et de modifier les Design Notes pour votre site local.
Association de Design Notes à un fichier
Vous pouvez créer un fichier de Design Notes pour chaque document ou modèle de votre site. Vous pouvez également
créer des Design Notes pour des applets, des contrôles ActiveX, des images, du contenu Flash, des objets Shockwave
ainsi que des champs d'image figurant dans vos documents.
Remarque : Si vous ajoutez des Design Notes à un fichier modèle, les documents que vous créez à partir du modèle
n'héritent pas des Design Notes.
1 Effectuez l'une des opérations suivantes :
• Ouvrez le fichier dans la fenêtre du document, puis sélectionnez Fichier > Design Notes.
• Dans le panneau Fichiers, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfoncée (Macintosh) sur le fichier, puis sélectionnez Design Notes.
Remarque : Si le fichier se trouve sur un site distant, vous devez d'abord l'extraire ou l'acquérir, puis le sélectionner dans
le dossier local.
2 Dans le menu Etat de l'onglet Informations élémentaires, sélectionnez un état pour le document.
3 Cliquez sur l'icône de date (au-dessus de la zone de texte Notes) pour insérer la date du jour dans les notes.
4 Entrez des commentaires dans la zone Notes.
5 Activez l'option Afficher à l'ouverture du fichier afin que le fichier de Design Notes apparaisse à chaque ouverture
du fichier.
6 Dans l'onglet Toutes les infos, cliquez sur le bouton Plus (+) afin d'ajouter une paire clé/valeur ; sélectionnez une
paire, puis cliquez sur le bouton Moins (–) pour la supprimer.
Par exemple, vous pouvez créer une clé Auteur (dans la zone Nom), puis lui attribuer la valeur Heidi (dans la zone
Valeur).
7 Cliquez sur OK pour enregistrer les notes.
Dreamweaver enregistre les notes au même endroit que le fichier en cours, dans un dossier portant le nom _notes. Le
fichier porte le nom complet du document de base, suivi de l'extension .mno. Par exemple, si le nom de fichier du
document est index.html, le fichier de Design Notes associé s'appellera index.html.mno.
Voir aussi
« Acquisition et placement de fichiers depuis ou vers votre serveur » à la page 86
« Archivage et extraction de fichiers dans un dossier distant » à la page 92
Utilisation des Design Notes
Après avoir associé des Design Notes à un fichier, vous pouvez ouvrir le fichier Design Notes, modifier son état ou le
supprimer.
Dernière mise à jour le 4/5/2011
111
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
Ouverture des Design Notes associées à un fichier
❖ Utilisez l’une des méthodes suivantes pour ouvrir les Design Notes :
• Ouvrez le fichier dans la fenêtre du document, puis sélectionnez Fichier > Design Notes.
• Dans le panneau Fichiers, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfoncée (Macintosh) sur le fichier, puis sélectionnez Design Notes.
• Dans la colonne Notes du panneau Fichiers, double-cliquez sur l'icône jaune Design Notes.
Remarque : Pour afficher les icônes jaunes des Design Notes, choisissez Site > Gérer les sites > [nom de votre site] >
Modifier > Paramètres avancés > Colonnes mode Fichier. Sélectionnez Notes dans la liste du panneau et choisissez
l'option Afficher. Lorsque vous cliquez sur le bouton Développer de la barre d'outils Fichiers pour afficher à la fois le site
local et le site distant, votre site local contient une colonne Notes qui affiche une icône de note jaune pour tout fichier
contenant une Design Note.
Attribution d'un état de Design Notes personnalisé
1 Ouvrez les Design Notes du fichier ou de l'objet concerné (voir la procédure ci-dessus).
2 Cliquez sur l'onglet Toutes les infos.
3 Cliquez sur le bouton Plus (+).
4 Dans le champ Nom, tapez état.
5 Dans le champ Valeur, tapez le nom du nouvel état.
S'il existe déjà une valeur d'état, elle est remplacée par la nouvelle.
6 Cliquez sur l'onglet Infos de base et remarquez que la nouvelle valeur de l'état apparaît dans le menu contextuel Etat.
Remarque : Vous ne pouvez avoir qu'une valeur personnalisée à la fois dans le menu d'état. Si vous suivez cette procédure
une nouvelle fois, Dreamweaver remplace la valeur de l'état saisie la première fois par la nouvelle valeur.
Suppression de votre site des Design Notes non associées
1 Choisissez Site > Gérer les sites.
2 Sélectionnez le site et cliquez sur Modifier.
3 Dans la boîte de dialogue Définition du site, sélectionnez la catégorie Design Notes dans la liste de gauche.
4 Cliquez sur le bouton Nettoyer.
Dreamweaver vous invite alors à vérifier que tous les fichiers de Design Notes qui ne sont plus associés à un fichier
dans le site doivent bien être supprimés.
Si vous utilisez Dreamweaver pour supprimer un fichier auquel est associé un fichier de Design Notes, Dreamweaver
supprime également le fichier de Design Notes. En général, il ne peut donc exister de fichiers de Design Notes
orphelins que si vous supprimez ou renommez un fichier à l'extérieur de Dreamweaver.
Remarque : Si vous désactivez l'option Gérer Design Notes avant de cliquer sur Nettoyer, Dreamweaver supprime tous
les fichiers de Design Notes du site.
Dernière mise à jour le 4/5/2011
112
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
Test de votre site
Instructions pour tester les sites
Avant de télécharger le site sur un serveur, et de le déclarer prêt à être diffusé, il convient de le tester localement (en
fait, il est judicieux de tester et de résoudre les problèmes de votre site fréquemment au cours de son élaboration, afin
de traiter les problèmes avant qu'ils ne s'aggravent et de les empêcher de se répéter).
Vous devez vous assurer que vos pages ont l'apparence et le fonctionnement attendus dans les navigateurs ciblés, qu'il
n'y a pas de liens rompus et que les pages ne sont pas trop longues à télécharger. Vous pouvez également tester
l'ensemble de votre site et y régler les problèmes éventuels en effectuant un rapport de site.
Les conseils suivants vous aideront à garantir aux visiteurs de votre site une expérience positive :
1. Assurez-vous que les pages fonctionnent dans les navigateurs visés.
Vos pages doivent être lisibles et fonctionnelles dans les navigateurs qui ne prennent pas en charge les styles, les calques,
les plug-ins ou les éléments JavaScript. Pour les pages qui ne s'affichent pas dans des navigateurs anciens, songez à
utiliser le comportement Vérifier le navigateur pour rediriger automatiquement les visiteurs vers une autre page.
2. Affichez vos pages dans différents navigateurs et sur différentes plates-formes.
Cela vous donnera la possibilité de constater les différences de présentation, de couleur, de taille de police et de format
de fenêtre par défaut, autant d'éléments qu'il est impossible de prévoir lors de la vérification dans le navigateur cible.
3. Vérifiez que le site ne contient pas de liens brisés (réparez-les s'il en contient).
Les autres sites étant parfois modifiés et réorganisés, il peut arriver que certaines pages vers lesquelles vos liens pointent
soient déplacées ou supprimées. Vous pouvez exécuter un rapport de vérification des liens pour les tester.
4. Contrôlez la taille de vos pages et leur durée de téléchargement.
Pour les pages constituées d'un grand tableau, n'oubliez pas que, sous certains navigateurs, les visiteurs ne voient rien
tant que le tableau n'est pas entièrement chargé. Envisagez de fragmenter les grands tableaux ; si c'est impossible,
envisagez de placer du contenu, par exemple un message de bienvenue ou une bannière publicitaire, en dehors du
tableau, en haut de la page, de manière à ce que les utilisateurs puissent au moins voir ce contenu pendant le
chargement du tableau
5. Effectuez quelques rapports sur le site pour tester et dépanner le site entier.
Vous pouvez rechercher sur le site entier d'éventuels problèmes, tels que des documents sans nom, des balises vides ou
des balises imbriquées redondantes.
6. Validez votre code pour détecter toute erreur de balise ou de syntaxe.
7. Continuez à mettre le site à jour et à en assurer la maintenance après sa publication.
La publication d'un site peut être accomplie de différentes manières et constitue un processus continu. La définition et
l'implémentation d'un système de contrôle de version constituent une partie importante du processus, que ce soit avec
les outils intégrés à Dreamweaver ou par le biais d'une application de contrôle de version externe.
8. Consultez les forums de discussion.
Utilisez les forums de discussion Dreamweaver du site Web Adobe, à l'adresse
www.adobe.com/go/dreamweaver_newsgroup_fr.
Dernière mise à jour le 4/5/2011
113
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
Vous y trouverez de nombreuses et précieuses informations sur les différents navigateurs, plates-formes, etc. Vous
pouvez également discuter de questions techniques et échanger des informations utiles avec d'autres utilisateurs de
Dreamweaver.
Vous trouverez un didacticiel consacré au dépannage des problèmes de publication à l'adresse
www.adobe.com/go/vid0164_fr.
Voir aussi
« Correction de liens rompus » à la page 297
« Test de liens dans Dreamweaver » à la page 291
« Application du comportement Vérifier le navigateur » à la page 364
« Validation des documents XML » à la page 338
« Vérification de la compatibilité du navigateur » à la page 337
Didacticiel consacré au dépannage des problèmes de publication
Utilisation des rapports pour tester votre site
Vous pouvez exécuter des rapports du site sur les attributs de flux de travaux ou HTML. Vous pouvez également
utiliser la commande Rapports pour vérifier les liens de votre site.
Les rapports sur le déroulement du travail peuvent améliorer la collaboration entre les membres d'une équipe Web.
Ces rapports permettent de savoir qui a extrait un fichier, quels fichiers sont associés à des Design Notes et quels
fichiers ont été modifiés récemment. Vous pouvez définir davantage les rapports des Design Notes en spécifiant des
paramètres nom/valeur.
Remarque : Vous devez avoir défini une connexion à un site distant pour exécuter des rapports sur le déroulement du
travail.
Les rapports HTML vous permettent de compiler et de générer des rapports pour plusieurs attributs HTML. Vous
pouvez contrôler les balises de polices imbriquées combinables, les textes secondaires manquants, les balises
imbriquées redondantes, les balises vides amovibles et les documents sans nom.
Après avoir exécuté un rapport, vous pouvez l'enregistrer au format XML, puis l'importer dans un modèle, une base
de données ou une feuille de calcul et l'imprimer, ou encore l'afficher sur un site Web.
Remarque : Vous pouvez également ajouter différents types de rapport à Dreamweaver via le site Web d'Adobe
Dreamweaver Exchange.
Voir aussi
« Rapports dans Dreamweaver » à la page 21
« Test de liens dans Dreamweaver » à la page 291
« Ajout et gestion d'extensions dans Dreamweaver » à la page 37
Exécution de rapports afin de tester un site
1 Choisissez Site > Rapports.
2 Sélectionnez l'objet du rapport dans le menu Rapport sur, puis définissez l'un des types de rapport à exécuter
(déroulement du travail ou HTML).
Dernière mise à jour le 4/5/2011
114
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
Vous ne pouvez pas exécuter un rapport sur Fichiers sélectionnés dans le site si vous n'avez pas auparavant sélectionné
des fichiers dans le panneau Fichiers.
3 Si vous avez sélectionné un rapport de déroulement de travail, cliquez sur Paramètres de rapport. Dans le cas
contraire, ignorez cette étape.
Remarque : Si vous avez sélectionné plusieurs rapports de déroulement de travail, vous devez cliquer sur le bouton
Paramètres de rapport pour chaque rapport. Sélectionnez un rapport, cliquez sur Paramètres de rapport et entrez les
paramètres ; puis recommencez pour les autres rapports de déroulement de travail.
Extrait par Crée un rapport qui dresse la liste de tous les documents extraits par un membre spécifique de l'équipe.
Entrez le nom d'un membre de l'équipe et cliquez sur OK pour revenir à la boîte de dialogue Rapports.
Design Notes Crée un rapport qui dresse la liste de l'ensemble des Design Notes pour les documents sélectionnés ou
le site. Entrez une ou plusieurs paires nom/valeur, puis sélectionnez des valeurs de comparaison dans les menus
contextuels correspondants. Cliquez sur OK pour revenir à la boîte de dialogue Rapports.
Modifiés récemment Crée un rapport qui dresse la liste des fichiers qui ont été modifiés durant une période donnée.
Entrez les plages de dates et l'emplacement des fichiers à afficher.
4 Si vous avez sélectionné un rapport HTML, choisissez l'un des rapports suivants :
Balises de polices imbriquées combinables Crée un rapport qui dresse la liste de toutes les balises de polices
imbriquées pouvant être combinées pour nettoyer le code.
Par exemple, <font color="#FF0000"><font size="4">STOP!</font></font> est inclus dans le rapport.
Texte secondaire manquant Crée un rapport qui dresse la liste de toutes les balises img qui ne possèdent pas de texte
secondaire (sec/alt).
Le texte secondaire apparaît à la place des images dans les navigateurs qui affichent seulement du texte ou configurés
pour télécharger les images manuellement. Les lecteurs d'écran lisent le texte secondaire et certains navigateurs
affichent du texte secondaire lorsque l'utilisateur passe la souris sur l'image.
Balises redondantes imbriquées Crée un rapport répertoriant les balises à nettoyer.
Par exemple, <i> En Espagne, <i> il pleut</i> principalement dans les plaines</i> est inclus dans le
rapport.
Balises vides amovibles Crée un rapport qui dresse la liste de toutes les balises vides pouvant être supprimées afin de
nettoyer le code HTML.
Par exemple, vous pouvez avoir supprimé un élément ou une image en Affichage de code, mais laissé les balises
s'appliquant à cet élément.
Documents sans nom Crée un rapport qui dresse la liste de tous les documents sans titre trouvés conformément aux
paramètres sélectionnés. Dreamweaver établit un rapport sur tous les documents qui contiennent des titres par défaut,
des balises de titre multiples ou des balises de titre manquantes.
5 Cliquez sur Exécuter pour créer le rapport.
Selon le type de rapport à exécuter, vous pouvez être invité à enregistrer votre fichier, à définir votre site ou à
sélectionner un dossier (si vous ne l'avez pas déjà fait).
Une liste de résultats apparaît dans le panneau Rapports du site (dans le groupe de panneaux Résultats).
Utilisation et enregistrement d'un rapport
1 Exécuter un rapport (voir la procédure précédente).
Dernière mise à jour le 4/5/2011
115
UTILISATION DE DREAMWEAVER
Création et gestion de fichiers
2 Dans le panneau Rapports du site, effectuez l'une des opérations suivantes pour consulter le rapport :
• Cliquez sur l'en-tête de la colonne en fonction de laquelle vous souhaitez effectuer le tri des résultats.
Vous pouvez trier les résultats par nom de fichier, numéro de ligne ou description. Vous pouvez également exécuter
plusieurs rapports et garder les différents rapports ouverts.
• Sélectionnez une ligne quelconque du rapport, puis cliquez sur le bouton Plus d'infos situé à gauche du panneau
Rapports du site pour obtenir la description du problème.
• Double-cliquez sur une ligne quelconque du rapport pour afficher le code correspondant dans la fenêtre de
document.
Remarque : Si vous vous trouvez en mode Création, Dreamweaver passe à un affichage à deux volets et indique le
problème identifié directement dans le code.
3 Cliquez sur Enregistrer le rapport.
Lorsque vous enregistrez un rapport, vous pouvez l'importer dans un fichier modèle existant. Vous pouvez alors soit
importer le fichier dans une base de données ou un tableur puis l'imprimer, soit l'afficher sur un site Web.
Après avoir exécuté les rapports HTML, utilisez la commande Nettoyer HTML pour corriger les erreurs HTML
signalées.
Dernière mise à jour le 4/5/2011
116
Chapitre 5 : Gestion des actifs et des
bibliothèques
A propos des actifs et des bibliothèques
A propos des actifs
Vous pouvez utiliser Adobe® Dreamweaver® CS5 pour assurer le suivi des actifs inclus dans un site, notamment les
images, les animations, les couleurs, les scripts et les liens, et pour en afficher un aperçu. Vous pouvez également faire
glisser un actif directement pour l'insérer dans une page de votre document actuel.
Vous pouvez obtenir des actifs à partir de différentes sources. Par exemple, vous pouvez créer des actifs dans une
application, telle que Adobe® Fireworks® ou Adobe® Flash®, les recevoir d'un collègue, les copier à partir d'un CD-ROM
de graphiques ou encore les copier à partir d'un site Web d'images.
Dreamweaver permet également d'accéder à deux types d'actifs spéciaux : les bibliothèques et les modèles. Tous deux
sont des actifs liés : lorsque vous modifiez un élément de bibliothèque ou un modèle, Dreamweaver met à jour tous les
documents qui utilisent ces éléments. Les éléments de bibliothèque représentent généralement de petits actifs de
conception, tels que le logo ou les informations de copyright d'un site. Pour définir la conception de zones plus larges,
utilisez plutôt un modèle.
Voir aussi
« A propos des modèles Dreamweaver » à la page 403
A propos des éléments de bibliothèque
Une bibliothèque est un fichier Dreamweaver spécial regroupant un ensemble d'actifs individuels ou de copies d'actifs
que vous pouvez placer dans vos pages Web. Les actifs présents dans une bibliothèque portent le nom d'éléments de
bibliothèque. Les éléments pouvant être stockés dans une bibliothèque sont notamment les images, les tableaux, les
sons et les fichiers créés à l'aide d'Adobe Flash. Vous pouvez mettre à jour automatiquement toutes les pages qui
utilisent un élément de bibliothèque chaque fois que vous modifiez cet élément.
Par exemple, supposons que vous construisiez un site de grande taille pour une société qui souhaite qu'un slogan figure
sur chaque page. Vous pouvez créer un élément de bibliothèque qui contient le slogan et utiliser cet élément dans
chaque page. Si le slogan est modifié, vous pouvez modifier l'élément de bibliothèque et mettre à jour
automatiquement chaque page qui l'utilise.
Dreamweaver stocke les éléments de bibliothèque dans un dossier nommé Library, au sein du dossier racine local de
chaque site. Chaque site possède sa propre bibliothèque.
Vous pouvez créer un élément de bibliothèque à partir de n'importe quel élément dans la section body d'un document,
notamment du texte, des tableaux, des formulaires, des applets Java, des plug-ins, des éléments ActiveX, des barres de
navigation et des images.
Pour les éléments liés tels que les images, la bibliothèque enregistre uniquement une référence à l'élément. Le fichier
d'origine doit rester à l'emplacement spécifié pour que l'élément de la bibliothèque fonctionne correctement.
Dernière mise à jour le 4/5/2011
117
UTILISATION DE DREAMWEAVER
Gestion des actifs et des bibliothèques
Il peut toutefois être utile de stocker une image dans un élément de bibliothèque. Par exemple, vous pouvez stocker
une balise img complète dans un élément de bibliothèque, afin de pouvoir modifier facilement le texte alt d'une
image, ou même son attribut src, dans l'ensemble du site. N'utilisez pas cette technique pour modifier les attributs de
largeur et de hauteur (width et height) d'une image, sauf si vous utilisez également un éditeur d'image pour changer
la taille réelle de l'image.
Remarque : Si l'élément de bibliothèque contient des liens, ils ne fonctionneront pas nécessairement sur le nouveau site.
En outre, les images d'un élément de bibliothèque ne sont pas copiées vers le nouveau site.
Lorsque vous utilisez un élément de bibliothèque, Dreamweaver insère un lien vers cet élément dans la page Web au
lieu d'insérer l'élément lui-même. Cela signifie que Dreamweaver insère une copie du code source HTML pour cet
élément dans le document et ajoute un commentaire HTML contenant une référence à l'élément externe d'origine. Il
s'agit d'une référence externe qui rend la mise à jour automatique possible.
Lorsque vous créez un élément de bibliothèque qui comporte un élément auquel est attaché un comportement
Dreamweaver, Dreamweaver copie l'élément et son gestionnaire d'événements (l'attribut qui spécifie l'événement
déclenchant l'action, tel que onClick, onLoad ou onMouseOver, et l'action à appeler lorsque l'événement se produit)
dans le fichier de l'élément de bibliothèque. Dreamweaver ne copie pas les fonctions JavaScript associées dans l'élément
de la bibliothèque. Au lieu de cela, lorsque vous insérez l'élément de bibliothèque dans un document, Dreamweaver
insère automatiquement les fonctions JavaScript appropriées dans la section head de ce document (si elles ne s'y
trouvent pas déjà).
Remarque : Si vous rédigez manuellement le code JavaScript (c'est-à-dire si vous le créez sans utiliser de comportements
Dreamweaver), vous pouvez l'intégrer à votre élément de bibliothèque à l'aide du comportement Appel JavaScript pour
exécuter le code. Si vous n'utilisez pas de comportement Dreamweaver pour exécuter le code, le code n'est pas conservé
dans l'élément de bibliothèque.
La modification des comportements dans les éléments de bibliothèque doit respecter certaines conditions. Les
éléments de bibliothèque ne peuvent pas contenir de feuilles de style, car le code associé à ces éléments figure dans la
section HEAD.
Voir aussi
« Modification d'un comportement dans un élément de bibliothèque » à la page 128
Utilisation des actifs
Présentation du panneau Actifs
Utilisez le panneau Actifs (Fenêtre > Actifs) pour gérer les actifs du site en cours. Le panneau Actifs affiche les actifs
du site associés au document actif dans la fenêtre du document.
Remarque : Vous devez définir un site local avant de pouvoir afficher des actifs dans le panneau Actifs.
Dernière mise à jour le 4/5/2011
118
UTILISATION DE DREAMWEAVER
Gestion des actifs et des bibliothèques
Panneau Actifs avec la liste Site affichée. Les icônes de catégorie se trouvent à gauche et la zone d'aperçu se trouve au-dessus de la liste.
Le panneau Actifs vous propose deux vues différentes des actifs :
Liste Site Elle présente tous les actifs de votre site, y compris les couleurs et les adresses URL utilisées dans les
documents de votre site.
Liste Favoris Présente uniquement les actifs que vous avez sélectionnés de façon explicite.
Pour basculer entre ces deux modes, sélectionnez le bouton radio Site ou Favoris situé en haut de la zone d'aperçu. (Ces
deux modes d'affichage ne sont pas disponibles pour les catégories Modèles et Bibliothèque.)
Remarque : La plupart des opérations du panneau Actifs fonctionnent de la même façon dans les deux listes. Toutefois,
il existe quelques tâches qui ne peuvent être réalisées que dans la liste Favoris.
Dans les deux listes, les actifs appartiennent à l'une des catégories suivantes :
Images
Fichiers d'image en formats GIF, JPEG ou PNG.
Couleurs
Les couleurs utilisées dans les documents et les feuilles de style, y compris les couleurs du texte, des
arrière-plans et des liens.
Les liens externes se trouvant dans les documents du site en cours, y compris FTP, gopher, HTTP, HTTPS,
JavaScript, courriel (mailto), et fichiers locaux (file://).
URL
Fichiers dans n'importe quelle version d'Adobe Flash. Seuls les fichiers SWF (fichiers compressés créés avec
Flash) s'affichent dans le panneau Actifs. Les fichiers FLA (source Flash) ne s'affichent pas.
Flash
Shockwave
Films
Fichiers dans n'importe quelle version d'Adobe Shockwave.
Fichiers QuickTime ou MPEG.
Fichiers JavaScript ou VBScript. Les scripts dans les fichiers HTML (plutôt que dans des fichiers
JavaScript ou VBScript indépendants) n'apparaissent pas dans le panneau Actifs.
Scripts
Modèles
Les mises en forme de pages principales utilisées sur plusieurs pages. La modification d'un modèle
entraîne automatiquement la modification de toutes les pages qui y sont associées.
Des éléments que vous utilisez dans plusieurs pages. Lorsque vous modifiez un élément
de bibliothèque, toutes les pages qui le contiennent sont mises à jour.
Eléments de bibliothèque
Remarque : Pour figurer dans le panneau Actifs, un fichier doit appartenir à l'une de ces catégories. Il existe d'autres types
de fichiers parfois appelés actifs, mais qui ne sont pas affichés dans le panneau.
Dernière mise à jour le 4/5/2011
119
UTILISATION DE DREAMWEAVER
Gestion des actifs et des bibliothèques
Par défaut, les actifs d'une catégorie donnée sont répertoriés en fonction de leur nom par ordre alphabétique, mais vous
pouvez les trier par type et en fonction de plusieurs autres critères. Vous pouvez également afficher un aperçu des actifs
et redimensionner les colonnes ainsi que la zone d'aperçu.
Voir aussi
« Création et gestion d'une liste d'actifs favoris » à la page 122
« Utilisation des éléments de bibliothèque » à la page 124
Affichage d'un actif dans la zone d'aperçu
❖ Sélectionnez l'actif dans le panneau Actifs.
Par exemple, lorsque vous sélectionnez un actif de type animation, une icône s'affiche dans la zone d'aperçu. Pour
visualiser l'animation, cliquez sur le bouton Lecture (le triangle vert) dans l'angle supérieur droit de la zone d'aperçu.
Affichage des actifs d'une catégorie donnée
❖ Cliquez sur une icône de catégorie dans le côté gauche du panneau Actifs.
Tri des actifs
❖ Cliquez sur une en-tête de colonne.
Par exemple, pour trier la liste des images par type (afin de regrouper toutes les images GIF, puis toutes les images
JPEG, etc.), cliquez sur l'en-tête de la colonne Type.
Redimensionnement d'une colonne
❖ Faites glisser la ligne qui sépare deux en-têtes de colonne.
Redimensionnement de la zone d'aperçu
❖ Faites glisser la barre de séparation (entre la zone d'aperçu et la liste des actifs) vers le haut ou vers le bas.
Actualisation du panneau Actifs
La création de la liste Site peut prendre quelques secondes du fait que Dreamweaver doit d'abord lire le cache du site.
Certaines modifications n'apparaissent pas immédiatement dans le panneau Actifs. Par exemple, lorsque vous ajoutez
ou supprimez un actif du site, les modifications ne sont pas répercutées dans le panneau Actifs tant que vous
n'actualisez pas la liste Site en cliquant sur le bouton Actualiser la liste du site. Si vous ajoutez ou supprimez un actif
en dehors de Dreamweaver (via l'Explorateur Windows ou le Finder, par exemple), vous devez recréer le cache du site
pour actualiser le panneau Actifs.
Lorsque vous supprimez l'unique instance d'une URL ou d'une couleur donnée du site, ou lorsque vous enregistrez un
nouveau fichier contenant une couleur ou une URL n'ayant pas encore été utilisée dans le site, les modifications ne
sont répercutées dans le panneau Actifs qu'une fois la liste Site actualisée.
• Pour actualiser la liste Site manuellement, cliquez sur le bouton Actualiser la liste du site
. Dreamweaver crée le
cache du site ou le met à jour si nécessaire.
• Pour actualiser la liste Site et recréer le cache du site manuellement, cliquez avec le bouton droit de la souris
(Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) dans la liste Actifs, puis cliquez sur Actualiser
la liste du site.
Dernière mise à jour le 4/5/2011
120
UTILISATION DE DREAMWEAVER
Gestion des actifs et des bibliothèques
Ajout d'un actif à un document
Vous pouvez insérer la plupart des actifs dans un document en les faisant glisser dans la fenêtre de document en mode
Code ou en mode Création, ou bien en utilisant le bouton Insérer du panneau. Vous pouvez insérer des couleurs et des
URL ou les appliquer au texte sélectionné en mode Création Les URL peuvent également être appliquées aux autres
éléments, tels que des images, en mode Création.
1 En mode Création, placez le point d'insertion à l'endroit où l'actif doit apparaître.
2 Dans le panneau Actifs, sélectionnez l'un des boutons de catégorie d'actif situés à gauche.
Remarque : Sélectionnez toute catégorie autre que Modèles. Un modèle est appliqué à un document entier. Il ne peut pas
être inséré dans un document.
3 Sélectionnez Site ou Favoris en haut du panneau, puis sélectionnez l'actif.
Il n'existe pas de liste Site ou Favoris pour les éléments de bibliothèque. Omettez cette étape si vous insérez un tel
élément.
4 Effectuez l'une des opérations suivantes :
• Faites glisser l'actif depuis le panneau vers le document.
Vous pouvez faire glisser des scripts dans la zone du contenu de l'en-tête de la fenêtre de document. Si cette zone n'est
pas visible, choisissez Affichage > Contenu de l'en-tête.
• Sélectionnez l'actif dans le panneau et cliquez sur Insérer.
Si l'actif inséré est une couleur, elle s'applique au texte qui figure après le point d'insertion.
Application d'une couleur à un texte à l'aide du panneau Actifs
Le panneau Actifs indique les couleurs que vous avez déjà appliquées aux différents éléments du site, tels que du texte,
des bordures de tableau, des arrière-plans, etc.
1 Sélectionnez du texte dans le document.
2 Dans le panneau Actifs, sélectionnez la catégorie Couleurs
.
3 Sélectionnez la couleur souhaitée puis cliquez sur Appliquer.
Voir aussi
« Ajout ou suppression d'actifs favoris » à la page 122
Application d'une URL à une image ou du texte à l'aide du panneau Actifs
1 Sélectionnez le texte ou l'image.
2 Dans le panneau Actifs, sélectionnez la catégorie URL
dans la vue Sites ou Favoris, selon l'endroit où l'URL est
stockée.
Remarque : Les URL des fichiers de votre site sont stockés, par défaut, dans le mode Sites. La vue Favoris contient les URL
que vous avez ajoutés manuellement.
3 Sélectionnez l'URL.
4 Effectuez l'une des opérations suivantes :
• Faites glisser l'URL depuis le panneau vers la sélection dans la fenêtre de document en mode Création.
• Sélectionnez l'URL et cliquez sur Insérer.
Dernière mise à jour le 4/5/2011
121
UTILISATION DE DREAMWEAVER
Gestion des actifs et des bibliothèques
Sélection et modification d'actifs
Le panneau Actifs permet de sélectionner simultanément plusieurs actifs ; il offre également un moyen rapide de
commencer l'édition d'actifs.
Voir aussi
« Lancement d'un éditeur externe pour des fichiers multimédias » à la page 268
Sélection de plusieurs actifs.
1 Dans le panneau Actifs, sélectionnez un actif.
2 Sélectionnez les autres actifs à l'aide de l'une des méthodes suivantes :
• Cliquez en maintenant la touche Maj enfoncée pour sélectionner une série consécutive d'actifs.
• Cliquez en maintenant la touche Ctrl (Windows) ou la touche Commande (Macintosh) enfoncée pour ajouter un
actif individuel à la sélection (qu'il soit adjacent ou non à la sélection existante). Cliquez en maintenant la touche
Ctrl (Windows) ou la touche Commande (Macintosh) enfoncée sur un actif sélectionné pour le désélectionner.
Modification d'un actif
Lorsque vous modifiez un actif dans le panneau Actifs, le comportement varie en fonction du type d'actif. Pour certains
actifs, tels que les images, vous utilisez un éditeur externe qui s'ouvre automatiquement si vous avez défini un éditeur
pour ce type d'actif. Vous ne pouvez modifier les couleurs et les URL que dans la liste Favoris. Lorsque vous modifiez
des modèles et des éléments de bibliothèque, vous effectuez les modifications dans Dreamweaver.
1 Dans le panneau Actifs, procédez de l'une des manières suivantes :
• Double-cliquez sur l'actif.
• Sélectionnez l'actif, puis cliquez sur le bouton Modifier
.
Remarque : Si l'actif doit être modifié dans un éditeur externe et qu'aucun éditeur ne s'ouvre automatiquement,
sélectionnez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh), sélectionnez la catégorie
Types de fichiers/Editeurs, et assurez-vous qu'un éditeur externe est défini pour ce type d'actif.
2 Apportez les modifications voulues.
3 Lorsque vous avez terminé, procédez de l’une des façons suivantes :
• Si l'actif est basé sur un fichier (tout objet autre qu'une couleur ou une URL), enregistrez-le (via l'éditeur que vous
utilisez), puis fermez-le.
• Si l'actif est une URL, cliquez sur OK dans la boîte de dialogue Modifier l'URL.
Remarque : Si l'actif est une couleur, le sélecteur de couleur se ferme automatiquement lorsque vous sélectionnez une
couleur. Pour fermer le sélecteur de couleur sans sélectionner de couleur, appuyez sur la touche Echap.
Réutilisation d'actifs dans un autre site
Le panneau Actifs affiche tous les actifs (de types reconnus) dans le site actuel. Pour utiliser un actif du site actuel dans
un autre site, il est nécessaire de le copier. Vous pouvez copier un actif individuel, un ensemble d'actifs individuels ou
un dossier Favoris entier en une seule opération.
Vous devrez peut-être localiser le fichier dans le panneau Fichiers correspondant à un actif dans le panneau Actifs
avant de transférer l'actif depuis ou vers votre site distant.
Remarque : Le panneau Fichiers peut afficher un site différent de celui présenté par le panneau Actifs, car le panneau
Actifs est associé au document actif.
Dernière mise à jour le 4/5/2011
122
UTILISATION DE DREAMWEAVER
Gestion des actifs et des bibliothèques
Localisation d'un fichier d'actif dans le panneau Fichiers
1 Dans le panneau Actifs, sélectionnez la catégorie de l'actif que vous recherchez.
2 Cliquez avec le bouton droit (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh) sur l'icône ou
le nom de l'actif dans le panneau Actifs, puis choisissez l'option Repérer dans le site dans le menu contextuel.
Remarque : L'option Repérer dans le site n'est pas disponible pour les couleurs et les URL, qui ne correspondent pas à des
fichiers dans le site.
Le panneau Fichiers s'ouvre, avec le fichier d'actif sélectionné. La commande Repérer dans le site repère le fichier
correspondant à l'actif lui-même, et non les fichiers qui utilisent cet actif.
Copie d'actifs depuis le panneau Actifs vers un autre site
1 Dans le panneau Actifs, sélectionnez la catégorie de l'actif que vous souhaitez copier.
2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh)
sur un ou plusieurs actifs dans la liste Site ou Favoris, sélectionnez Copier dans le site, puis sélectionnez le nom du
site cible dans le sous-menu qui répertorie les sites que vous avez définis.
Remarque : Dans la liste Favoris, vous pouvez copier un dossier Favoris ainsi que des actifs individuels.
Les actifs sont copiés dans leurs emplacements correspondants dans le site cible. Dreamweaver crée de nouveaux
dossiers dans la hiérarchie du site cible en fonction des besoins. Les actifs sont également ajoutés à la liste Favoris du
site cible.
Remarque : Si l'actif que vous avez copié est une couleur ou une URL, il s'affiche uniquement dans la liste Favoris du site
cible. Du fait que les couleurs et les URL ne correspondent pas à des fichiers, il n'existe aucun fichier à copier dans l'autre site.
Création et gestion d'une liste d'actifs favoris
Gestion des actifs favoris
La liste complète de tous les actifs reconnus peut devenir encombrée pour certains sites volumineux. Vous pouvez
ajouter des actifs fréquemment utilisés à une liste Favoris, grouper des actifs connexes, leur attribuer des surnoms pour
mémoriser leur objet et les retrouver aisément dans le panneau Actifs.
Remarque : Les actifs favoris ne sont pas stockés en tant que fichiers distincts sur le disque. Ils font référence aux actifs de
la liste Site. Dreamweaver conserve la trace des actifs de la liste Site à afficher dans la liste Favoris.
La plupart des opérations du panneau Actifs sont identiques dans les listes Favoris et Site. Toutefois, il existe plusieurs
tâches que vous pouvez réaliser uniquement dans la liste Favoris.
Ajout ou suppression d'actifs favoris
Il existe plusieurs méthodes pour ajouter des actifs à la liste Favoris du site dans le panneau Actifs.
L'ajout d'une couleur ou d'une URL à la liste Favoris nécessite une étape supplémentaire. Vous ne pouvez pas ajouter
de nouvelles couleurs ou URL à la liste Site. Cette dernière contient uniquement les actifs déjà utilisés dans le site.
Remarque : Il n'existe pas de liste Favoris pour les modèles et les éléments de bibliothèque.
Dernière mise à jour le 4/5/2011
123
UTILISATION DE DREAMWEAVER
Gestion des actifs et des bibliothèques
Voir aussi
« Présentation du panneau Actifs » à la page 117
« Utilisation du sélecteur de couleur » à la page 224
Ajout d'actifs à la liste Favoris
Effectuez l'une des opérations suivantes :
• Sélectionnez un ou plusieurs actifs dans la liste Site du panneau Actifs, puis cliquez sur le bouton Ajouter aux
favoris
.
• Sélectionnez un ou plusieurs actifs dans la liste Site du panneau Actifs, cliquez avec le bouton droit (Windows) ou
en maintenant la touche Ctrl enfoncée (Macintosh), puis sélectionnez Ajouter aux favoris.
• Sélectionnez un ou plusieurs fichiers dans le panneau Fichiers, cliquez avec le bouton droit (Windows) ou en
maintenant la touche Ctrl enfoncée (Macintosh), puis sélectionnez Ajouter aux favoris. Dreamweaver ignore les
fichiers n'appartenant pas à une catégorie du panneau Actifs.
• Cliquez avec le bouton droit (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh) sur un élément
dans la fenêtre de document en mode Création, puis choisissez l'option du menu contextuel pour ajouter l'élément
à une catégorie Favoris.
Le menu contextuel pour le texte contient soit l'option Ajouter aux favoris Couleur, soit l'option Ajouter aux favoris
URL, selon qu'un lien est attaché au texte. Vous pouvez ajouter uniquement les éléments qui correspondent aux
catégories du panneau Actifs.
Ajout d'une nouvelle couleur ou une nouvelle URL à la liste Favoris
1 Dans le panneau Actifs, sélectionnez la catégorie Couleurs ou URL.
2 Sélectionnez l'option Favoris en haut du panneau.
3 Cliquez sur le bouton Nouvelle couleur ou Nouvelle URL
.
4 Effectuez l'une des opérations suivantes :
• Sélectionnez une couleur dans le sélecteur de couleur et donnez-lui un surnom si vous le souhaitez.
Pour fermer le sélecteur de couleur sans sélectionner de couleur, appuyez sur la touche Echap ou cliquez sur la barre
de couleur grise en haut du sélecteur de couleur.
• Entrez une URL et un surnom dans la boîte de dialogue Ajouter URL, puis cliquez sur OK.
Suppression d'actifs de la liste Favoris
1 Dans le panneau Actifs, sélectionnez l'option Favoris en haut du panneau.
2 Sélectionnez un ou plusieurs actifs (ou un dossier) dans la liste Favoris.
3 Cliquez sur le bouton Supprimer des favoris
.
Les actifs sont supprimés de la liste Favoris, mais pas de la liste Site. Si vous supprimez un dossier Favoris, ce dernier
est supprimé, ainsi que tout son contenu.
Création d'un surnom pour un actif favori
Vous pouvez attribuer des surnoms (par exemple, CouleurArrièrePlanPage au lieu de #999900) uniquement aux actifs
de la liste Favoris. La liste Site retient leur nom de fichier réel (ou leur valeur, dans le cas de couleurs et d'URL).
1 Dans le panneau Actifs, (Fenêtre > Actifs), sélectionnez la catégorie qui contient votre actif.
Dernière mise à jour le 4/5/2011
124
UTILISATION DE DREAMWEAVER
Gestion des actifs et des bibliothèques
2 Sélectionnez l'option Favoris en haut du panneau.
3 Effectuez l'une des opérations suivantes :
• Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur le
nom ou l'icône de l'actif dans le panneau Actifs, puis sélectionnez Modifier le surnom.
• Cliquez une fois sur le nom de l'actif, effectuez une pause, puis cliquez à nouveau. (Ne double-cliquez pas, car cela
ouvrirait l'élément pour modification.)
4 Tapez un surnom pour l'actif, puis appuyez sur la touche Entrée (Windows) ou Retour (Macintosh).
Voir aussi
« Présentation du panneau Actifs » à la page 117
Regroupement d'actifs dans un dossier Favoris
Le fait de placer un actif dans un dossier Favoris ne modifie pas l'emplacement du fichier d'actif sur le disque.
1 Dans le panneau Actifs, sélectionnez l'option Favoris en haut du panneau.
2 Cliquez sur le bouton Nouveau dossier Favoris
.
3 Tapez un nom pour le dossier, puis appuyez sur la touche Entrée (Windows) ou Retour (Macintosh).
4 Faites glisser les actifs vers le dossier.
Utilisation des éléments de bibliothèque
Création d'un élément de bibliothèque
Les éléments de bibliothèque sont des éléments que vous souhaitez réutiliser ou mettre à jour fréquemment dans
l'ensemble de votre site Web.
Voir aussi
« A propos des éléments de bibliothèque » à la page 116
Créer un élément de bibliothèque basé sur une sélection
1 Dans la fenêtre de document, sélectionnez une partie d'un document que vous souhaitez enregistrer comme
élément de la bibliothèque.
2 Effectuez l'une des opérations suivantes :
• Faites glisser la sélection sur la catégorie Bibliothèque
• Cliquez sur le bouton Nouvel élément de bibliothèque
.
en bas de la catégorie Bibliothèque.
• Sélectionnez Modifier > Bibliothèque > Ajouter un objet dans la bibliothèque.
3 Tapez un nom pour le nouvel élément de la bibliothèque, puis appuyez sur la touche Entrée (Windows) ou Retour
(Macintosh).
Dreamweaver enregistre chaque élément de bibliothèque dans un fichier séparé (avec l'extension de fichier .lbi), dans
le dossier Library du dossier racine local du site.
Dernière mise à jour le 4/5/2011
125
UTILISATION DE DREAMWEAVER
Gestion des actifs et des bibliothèques
Création d'un élément de bibliothèque vide
1 Vérifiez que rien n'est sélectionné dans la fenêtre de document.
Si un élément est sélectionné, il est placé dans le nouvel élément de bibliothèque.
2 Dans le panneau Actifs, sélectionnez la catégorie Bibliothèque
3 Cliquez sur le bouton Nouvel élément de bibliothèque
.
en bas du panneau.
4 Sélectionnez l'élément et entrez son nom, puis appuyez sur Entrée (Windows) ou sur Retour (Macintosh).
Insertion d'un élément de bibliothèque dans un document
Lorsque vous ajoutez un élément de bibliothèque à une page, le contenu réel est inséré dans le document avec une
référence à l'élément de bibliothèque.
1 Placez le point d'insertion dans la fenêtre de document.
2 Dans le panneau Actifs, sélectionnez la catégorie Bibliothèque
.
3 Effectuez l'une des opérations suivantes :
• Faites glisser un élément de bibliothèque du panneau Actifs vers la fenêtre de document.
Pour insérer le contenu d'un élément de bibliothèque sans inclure de référence à l'élément dans le document, appuyez
sur la touche Ctrl (Windows) ou Option (Macintosh) tout en faisant glisser l'élément hors du panneau Actifs. Lorsque
vous insérez un élément de cette façon, vous pouvez le modifier dans le document, mais le document ne sera pas mis à
jour lorsque vous mettrez à jour les pages qui utilisent cet élément.
• Sélectionnez un élément de bibliothèque et cliquez sur Insérer.
Modification des éléments de bibliothèque et mise à jour des documents
Lorsque vous modifiez un élément de bibliothèque, vous pouvez choisir de mettre à jour tous les documents qui
utilisent cet élément. Si vous choisissez de ne pas les mettre à jour, les documents restent associés à l'élément de
bibliothèque. Il est toujours possible de les mettre à jour ultérieurement.
Vous pouvez renommer des éléments pour rompre leur lien avec des documents ou des modèles, supprimer des
éléments de la bibliothèque du site et recréer un élément de bibliothèque manquant.
Remarque : Le panneau Styles CSS n'est pas disponible lorsque vous éditez un élément de bibliothèque étant donné que
ces derniers peuvent uniquement contenir des éléments body et que le code CSS (feuille de style en cascade) est inséré dans
la section head d'un document. La boîte de dialogue Propriétés de la page est également indisponible : en effet, un élément
de bibliothèque ne peut pas comporter de balise body ni d'attributs de cette balise.
Modification d'un élément de bibliothèque
1 Dans le panneau Actifs, sélectionnez la catégorie Bibliothèque
.
2 Sélectionnez un élément de bibliothèque.
3 Vous pouvez soit cliquer sur le bouton Modifier
, soit double-cliquer sur l'élément de bibliothèque.
Dreamweaver ouvre une nouvelle fenêtre, similaire à la fenêtre de document, permettant de modifier l'élément de
bibliothèque. L'arrière-plan gris indique que vous êtres en train de modifier un élément de bibliothèque et non un
document.
4 Apportez les modifications et enregistrez-les.
Dernière mise à jour le 4/5/2011
126
UTILISATION DE DREAMWEAVER
Gestion des actifs et des bibliothèques
5 Indiquez si vous souhaitez mettre à jour les documents du site local qui utilisent l'élément de bibliothèque modifié.
Sélectionnez Mettre à jour pour effectuer une mise à jour immédiate. Si vous sélectionnez Ne pas mettre à jour, les
documents ne seront pas mis à jour à moins que vous ne sélectionniez Modifier > Bibliothèque > Mettre à jour la
page en cours ou Mettre à jour les pages.
Mise à jour du document actif afin d'utiliser la version actuelle de tous les éléments de
bibliothèque
❖ Choisissez Modifier > Modèles > Mettre à jour la page en cours.
Mise à jour du site entier ou de tous les documents utilisant un élément de bibliothèque
particulier
1 Choisissez Modifier > Bibliothèque > Mettre à jour les pages.
2 Dans le menu déroulant Regarder dans, indiquez ce qui doit être mis à jour :
• Pour mettre à jour toutes les pages du site sélectionné afin d'utiliser la version actuelle de tous les éléments de
bibliothèque, sélectionnez Site entier, puis sélectionnez le nom du site dans le menu déroulant adjacent.
• Pour mettre à jour toutes les pages du site en cours qui utilisent l'élément de bibliothèque, sélectionnez Fichiers
utilisant, puis sélectionnez un nom d'élément de bibliothèque dans le menu déroulant adjacent.
3 Sous Mettre à jour, assurez-vous que l'option Eléments de bibliothèque est activée.
Pour mettre les modèles à jour en même temps, sélectionnez Modèles également.
4 Cliquez sur Démarrer.
Dreamweaver met à jour les fichiers comme indiqué. Si vous avez sélectionné l'option Afficher le journal,
Dreamweaver génère un rapport qui indique si les fichiers ont été mis à jour correctement et qui contient également
d'autres informations.
Modification du nom d'un élément de bibliothèque
1 Dans le panneau Actifs, sélectionnez la catégorie Bibliothèque
.
2 Cliquez sur l'élément de bibliothèque, attendez, puis cliquez de nouveau. (Ne double-cliquez pas, car cela ouvrirait
l'élément pour modification.)
3 Entrez un nouveau nom.
4 Cliquez ailleurs ou appuyez sur Entrée (Windows) ou sur Retour (Macintosh).
5 indiquez si vous souhaitez mettre à jour les documents qui utilisent l'élément en choisissant soit Mettre à jour, soit
Ne pas mettre à jour.
Suppression d'un élément d'une bibliothèque
Lorsque vous supprimez un élément de bibliothèque, Dreamweaver supprime l'élément de la bibliothèque mais ne
modifie pas le contenu des documents qui l'utilisent.
1 Dans le panneau Actifs, sélectionnez la catégorie Bibliothèque
.
2 Sélectionnez l’élément de bibliothèque.
3 Cliquez sur le bouton Supprimer ou appuyez sur la touche Suppr, puis confirmez l'opération.
Important : Si vous supprimez un élément de bibliothèque, vous ne pourrez pas utiliser Annuler pour le récupérer. Vous
pouvez toutefois le recréer.
Dernière mise à jour le 4/5/2011
127
UTILISATION DE DREAMWEAVER
Gestion des actifs et des bibliothèques
Récréation d'un élément de bibliothèque manquant ou supprimé
1 Sélectionnez une instance de l'élément dans un de vos documents.
2 Cliquez sur le bouton Créer à nouveau de l'inspecteur Propriétés (Fenêtre > Propriétés).
Personnalisation de la mise en surbrillance des éléments de bibliothèque
Vous pouvez personnaliser la couleur de surbrillance des éléments de bibliothèque et afficher ou masquer la
surbrillance en définissant des préférences de surbrillance.
Voir aussi
« Utilisation du sélecteur de couleur » à la page 224
Modification de la couleur de surbrillance des éléments de bibliothèque
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
2 Sélectionnez la catégorie Surbrillance dans la liste située à gauche dans la boîte de dialogue Préférences.
3 Cliquez dans la case de couleur Eléments de la bibliothèque et sélectionnez une couleur de surbrillance à l'aide du
sélecteur de couleurs (ou entrez la valeur hexadécimale correspondant à la couleur de surbrillance dans la zone de
texte).
4 Activez l'option Afficher pour afficher la couleur de surbrillance dans la fenêtre de document.
5 Cliquez sur OK.
Affichage ou masquage de la mise en surbrillance dans la fenêtre de document
❖ Pour afficher la mise en surbrillance, sélectionnez Affichage > Assistances visuelles > Eléments invisibles. Pour
masquer la mise en surbrillance, désélectionnez l'option Eléments invisibles.
Modification des propriétés d'un élément de bibliothèque
L'inspecteur Propriétés vous permet d'ouvrir un élément de bibliothèque pour le modifier, détacher un élément
sélectionné de son fichier source ou remplacer un élément par celui sélectionné actuellement.
1 Sélectionnez un élément de bibliothèque dans un document.
2 Sélectionnez l'une des options suivantes dans l'inspecteur Propriétés (Fenêtre > Propriétés) :
Src Indique le nom de fichier et l'emplacement du fichier source de l'élément de la bibliothèque. Vous ne pouvez pas
modifier ces informations.
Ouvrir Ouvre le fichier source de l'élément de bibliothèque pour modification. Cela revient à sélectionner l'élément
dans le panneau Actifs et à cliquer sur le bouton Modifier.
Détacher de l'original Brise le lien entre l'élément de bibliothèque sélectionné et son fichier source. Vous pouvez
modifier l'élément détaché dans le document, mais il ne s'agit plus d'un élément de bibliothèque et il n'est plus modifié
lorsque vous modifiez l'élément d'origine.
Créer à nouveau Remplace l'élément d'origine par la sélection en cours. Utilisez cette option pour recréer les éléments
de bibliothèque si l'élément de bibliothèque d'origine manque ou a été accidentellement supprimé.
Dernière mise à jour le 4/5/2011
128
UTILISATION DE DREAMWEAVER
Gestion des actifs et des bibliothèques
Autorisation de la modification d'éléments de bibliothèque dans un
document
Si vous avez inséré un élément de bibliothèque dans un document et que vous désirez modifier celui-ci uniquement
sur cette page, vous devez briser le lien qui existe entre cet élément et la bibliothèque. Lorsqu'une instance d'élément
de bibliothèque a été rendue modifiable, elle n'est plus mise à jour quand l'élément de bibliothèque est modifié.
1 Sélectionnez un élément de la bibliothèque dans le document actif.
2 Dans l'inspecteur Propriétés, cliquez sur Détacher de l'original (Fenêtre > Propriétés).
Modification d'un comportement dans un élément de bibliothèque
Pour modifier un comportement dans un élément de bibliothèque, vous devez tout d'abord insérer l'élément dans un
document, puis le rendre modifiable dans ce document. Une fois les changements apportés, vous pouvez recréer
l'élément de bibliothèque en remplaçant l'élément de la bibliothèque par l'élément modifié de votre document.
1 Ouvrez un document contenant l'élément de la bibliothèque.
Notez le nom de l'élément de la bibliothèque, ainsi que les balises exactes qu'il contient. Vous aurez besoin de cette
information plus tard.
2 Sélectionnez l'élément de bibliothèque et cliquez sur Détacher de l'original dans l'inspecteur Propriétés
(Fenêtre > Propriétés).
3 Sélectionnez l'élément auquel est attaché le comportement.
4 Dans le volet Comportements (Fenêtre > Comportements), double-cliquez sur l'action que vous voulez modifier.
5 Dans la boîte de dialogue qui s'affiche, effectuez vos modifications et cliquez sur OK.
6 Dans le panneau Actifs, sélectionnez la catégorie Bibliothèque
.
7 Notez précisément le nom et la casse de l'élément de bibliothèque d'origine ; sélectionnez-le, puis cliquez sur le
bouton Supprimer.
8 Dans la fenêtre de document, sélectionnez tous les éléments qui constituent l'élément de bibliothèque.
Veillez à sélectionner exactement les mêmes éléments que ceux qui se trouvaient dans l'élément de bibliothèque
original.
9 Dans le panneau Actifs, cliquez sur le bouton Nouvel élément de bibliothèque
et donnez au nouvel élément le
nom de l'élément que vous avez supprimé en respectant l'orthographe et la casse.
10 Pour mettre à jour l'élément de bibliothèque dans les autres documents de votre site, choisissez Modifier >
Bibliothèque > Mettre à jour les pages.
11 Dans le menu déroulant Regarder dans, sélectionnez Fichiers utilisant.
12 Dans le menu déroulant adjacent, sélectionnez le nom de l'élément de bibliothèque que vous venez de créer.
13 Sous Mettre à jour, vérifiez que l'option Eléments de bibliothèque est sélectionnée, puis cliquez sur Démarrer.
14 Une fois les mises à jour terminées, cliquez sur Fermer.
Voir aussi
« Utilisation des comportements JavaScript » à la page 348
Dernière mise à jour le 4/5/2011
129
Chapitre 6 : Création de pages avec CSS
Description des feuilles de style en cascade
A propos des feuilles de style en cascade
Les feuilles de style en cascade (CSS) regroupent des règles de formatage qui déterminent l'aspect du contenu d'une page
Web. Quand vous utilisez des styles CSS pour mettre une page en forme, vous séparez le contenu de la présentation.
Le contenu de votre page (le code HTML) réside dans le fichier HTML, tandis que les règles CSS qui définissent la
présentation du code résident dans un autre fichier (une feuille de style externe) ou dans une autre partie du document
HTML (généralement dans la section head). La séparation du contenu et de la présentation facilite considérablement
la gestion de l'aspect de votre site à partir d'un point central car vous n'avez pas besoin de mettre à jour les propriétés
de toutes les pages chaque fois que vous souhaitez apporter une modification. La séparation du contenu et de la
présentation se traduit également par un code HTML simplifié et mieux structuré qui permet de raccourcir les temps
de chargement pour les navigateurs, et elle simplifie la navigation pour les personnes ayant des problèmes
d'accessibilité (par exemple, qui utilisent des lecteurs d'écran).
CSS vous offre une plus grande souplesse et une plus grande maîtrise de l'aspect de votre page. Les feuilles de style CSS
vous permettent de contrôler de nombreuses propriétés de texte, notamment les polices de caractères et les tailles de
police, les styles gras, italique, soulignement et les ombres du texte, la couleur du texte et la couleur d'arrière-plan, la
couleur des liens et le soulignement des liens, etc. En utilisant CSS pour contrôler vos polices de caractères, vous vous
assurez d'un traitement plus cohérent de la mise en page et de l'aspect de votre page dans différents navigateurs.
Outre le formatage du texte, CSS permet de gérer le format et le positionnement des blocs d'éléments d'une page Web.
Un élément de niveau bloc est un contenu autonome, généralement séparé par une nouvelle ligne dans le code HTML,
et formaté visuellement comme un bloc. Par exemple, les balises h1, les balises p et les balises div produisent toutes
des éléments de niveau bloc sur une page Web. Vous pouvez définir des marges et des bordures pour les éléments de
niveau bloc, les placer dans un emplacement spécifique, leur ajouter une couleur d'arrière-plan, faire flotter du texte
autour d'eux, etc. C'est essentiellement en manipulant des éléments de niveau bloc que vous réalisez des mises en page
avec CSS.
Pour accéder à un didacticiel relatif aux feuilles de style en cascade, consultez le site Web d'Adobe à l'adresse
www.adobe.com/go/vid0152_fr.
Voir aussi
« Utilisation des balises div » à la page 164
« Mise en forme des pages avec CSS » à la page 158
Didacticiel de description des feuilles CSS
A propos des règles CSS
Une règle de formatage CSS se compose de deux entités : le sélecteur et la déclaration (ou dans la plupart des cas, un
bloc de déclarations). Le sélecteur est un terme (tel que p, h1,un nom de classe ou un identifiant) qui identifie l'élément
mis en forme tandis que le bloc de déclaration définit quels sont les propriétés de style. Dans l'exemple suivant, h1
correspond au sélecteur tandis que tout ce qui est placé entre les crochets ({}) correspond à la déclaration :
Dernière mise à jour le 4/5/2011
130
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
h1 {
font-size: 16 pixels;
font-family: Helvetica;
font-weight:bold;
}
La déclaration est composée de deux entités : la propriété (par exemple, font-family) et la valeur (par exemple,
Helvetica). Dans la règle CSS précédente, un style particulier a été créé pour les balises h1 : le texte de toutes les balises
H1 liées à ce style sera associé à une police Helvetica, d'une taille de 16 pixels et en gras.
Le style (qui est défini par une règle ou par un groupe de règles) se trouve dans un emplacement distinct de celui du
formatage du texte réel, généralement dans une feuille de style externe ou dans la section head du document HTML.
Ainsi, une règle concernant les balises h1 peut s'appliquer à de nombreuses balises à la fois (et dans le cas de feuilles de
style externes, la règle peut s'appliquer à de nombreuses balises à la fois dans un grand nombre de pages différentes).
De cette façon, CSS offre une capacité de mise à jour extrêmement aisée Lorsque vous mettez à jour une règle CSS dans
un emplacement, le formatage de tous les éléments qui utilisent le style défini est automatiquement mise à jour en
fonction du nouveau style.
Where to stay
H1 {
font-family: Ariel;
font-size: 16px;
font-weight: bold;
}
What to do
main.html
Spring Festival
Feuille de style externe
events.html
Vous pouvez définir les types de styles suivants dans Dreamweaver :
• Les styles de classe vous permettent d'appliquer des propriétés de style à tout élément de la page.
• Les styles appliqués aux balises HTML redéfinissent le formatage d'une balise spécifique, telle que h1. Lorsque vous
créez ou modifiez un style CSS pour la balise h1, tout le texte formaté à l'aide de cette balise h1 est immédiatement
modifié en conséquence.
• Les styles avancés redéfinissent le formatage pour une combinaison particulière d'éléments ou pour d'autres formes
du sélecteur admises par CSS (par exemple, le sélecteur td h2 s'applique chaque fois qu'un en-tête h2 apparaît dans
une cellule de tableau). Les styles avancés peuvent également redéfinir le formatage pour des balises qui contiennent
un attribut id (identifiant) (par exemple, les styles définis par #myStyle s'appliquent à toutes les balises qui
contiennent la paire valeur-attribut id="myStyle").
Les règles CSS peuvent se trouver aux emplacements suivants :
Feuilles de style CSS externes Ensembles de règles CSS enregistrées dans un fichier .css externe distinct (pas dans un
fichier HTML). Ce fichier est lié à une ou plusieurs pages d'un site Web à l'aide d'un lien ou d'une règle @import situé
dans la section head d'un document.
Feuilles de style CSS internes (ou imbriquées) Ensembles de règles CSS incluses dans une balise style de la section
head d'un document HTML.
Dernière mise à jour le 4/5/2011
131
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
Styles en ligne Définis dans des instances spécifiques de balises dans un document HTML. L'utilisation de styles en
ligne n'est pas recommandée.
Dreamweaver reconnaît les styles définis dans des documents existants, pour peu qu'ils soient conformes aux
recommandations des feuilles de style CSS. Dreamweaver restitue également la plupart des styles appliqués
directement en mode Conception. Toutefois, la prévisualisation d'un document dans une fenêtre de navigateur vous
permet d'obtenir le rendu direct le plus précis de la page. Certains styles CSS s'affichent différemment dans Microsoft
Internet Explorer, Netscape Navigator, Opera, Apple Safari ou d'autres navigateurs, et certains ne sont pas encore pris
en charge par aucun navigateur.
Pour afficher le guide de référence CSS d'O'Reilly inclus dans Dreamweaver, choisissez Aide > Référence et
sélectionnez O'Reilly - Référence CSS dans le menu déroulant du panneau Référence.
Voir aussi
« Application, suppression ou changement du nom de styles de classe » à la page 147
A propos des styles en cascade
Le terme en cascade fait référence à la façon dont un navigateur affiche finalement les styles pour des éléments
spécifiques d'une page Web. Trois sources sont responsables des styles visibles sur une page Web : la feuille de style
créée par l'auteur de la page, les éventuelles sélections de style personnalisées de l'utilisateur, et les styles par défaut du
navigateur. Les sections précédentes expliquent la création de styles pour une page Web par l'auteur de la page Web et
de la feuille de style qui y est associée. Toutefois, les navigateurs possèdent eux aussi des feuilles de style par défaut, qui
déterminent la restitution des pages Web. En outre, les utilisateurs peuvent personnaliser leurs navigateurs en
effectuant des sélections qui déterminent l'affichage des pages Web. L'apparence finale d'une page Web est le résultat
de la combinaison (cascadre) des règles de ces trois sources, qui permet de restituer la page Web de manière optimale.
Ce concept va être illustré par une balise courante, la balise de paragraphe (<p>). Par défaut, les navigateurs
comportent des feuilles de style qui définissent la police et la taille de police du texte des paragraphes, c'est-à-dire le
texte placé entre balises <p> dans le code HTML. Ainsi, dans Internet Explorer, tout le texte du corps, y compris celui
des paragraphes, s'affiche par défaut dans la police Times New Roman de taille moyenne.
Toutefois, si vous êtes l'auteur d'une page Web, vous pouvez créer une feuille de style qui remplace le style par défaut
du navigateur pour ce qui est de la police et de la taille de police. Par exemple, vous pouvez créer la règle suivante dans
votre feuille de style :
p {
font-family: Arial;
font-size: small;
}
Lorsqu'un utilisateur charge la page, les paramètres de police du paragraphe et de taille de police que vous, auteur, avez
définis, remplacent les paramètres par défaut du navigateur en la matière.
Les utilisateurs peuvent effectuer des sélections pour personnaliser l'affichage du navigateur selon leurs attentes. Par
exemple, dans Internet Explorer, l'utilisateur peut choisir Affichage > Taille du texte > La plus grande, de manière à
agrandir la police et la rendre plus lisible. En fin de compte (du moins, dans ce cas), la sélection de l'utilisateur remplace
à la fois les styles par défaut du navigateur pour la taille de police par défaut dans les paragraphes, et les styles de
pargraphe créés par l'auteur de la page Web.
L'héritage est un autre élément important de la cascade. Les propriétés de la plupart des éléments d'une page Web sont
héritées. Par exemple, les balises de paragraphe héritent de certaines propriétés des balises body, les balises span de
certaines propriétés des balises de paragraphe, et ainsi de suite. Ainsi, vous pouvez créer la règle suivante dans votre
feuille de style :
Dernière mise à jour le 4/5/2011
132
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
body {
font-family: Arial;
font-style: italic;
}
Tout le texte des paragraphes de votre page Web (ainsi que le texte qui hérite des propriétés de la balise de paragraphe)
sera en Arial italique, car la balise de paragraphe hérite de ces propriétés à partir de la balise body. Vous pouvez
toutefois vous montrer plus spécifique avec vos règles et créer des styles qui supplantent la formule d'héritage standard.
Par exemple, vous pouvez créer les règles suivantes dans votre feuille de style :
body {
font-family: Arial;
font-style: italic;
}
p {
font-family: Courier;
font-style: normal;
}
Tout le texte du corps est en Arial italique, sauf le texte des paragraphes (et celui des balises héritières), qui s'affiche en
Courier normal (non italique). D'un point de vue technique, la balise de paragraphe hérite tout d'abord des proiriétés
définies pour la balise body, puis elle ignore celles-ci, car des propriétés ont été définies spécifiquement pour elle. En
d'autres termes, bien que les éléments de page héritent généralement des propriétés supérieures, l'application directe
d'une propriété à une balise entraîne toujours l'écrasement de la formule d'héritage standard.
La combinaison de tous les facteurs exposés ci-dessus et d'autres facteurs, tels que la spécificité CSS (un système qui
attribue un poids différent à des types précis de règles CSS) et l'ordre des règles CSS, finit par créer une cascade
complexe, où les éléments aux priorités les plus élevées écrasent les éléments aux propriétés les plus basses. Pour plus
d'informations sur les règles en matière de cascade, d'héritage et de spécificité, visitez le site
www.w3.org/TR/CSS2/cascade.html.
A propos du formatage de texte et de CSS
Par défaut, Dreamweaver utilise des feuilles de style en cascade (CSS) pour mettre le texte en forme. Les styles
appliqués au texte à l'aide de l'inspecteur Propriétés ou des commandes de menu génèrent des règles CSS intégrées à
la section head du document.
Vous pouvez également utiliser le panneau Styles CSS pour créer et modifier des propriétés et des règles CSS. Ce
panneau est un éditeur bien plus fiable que l'inspecteur Propriétés et présente toutes les règles CSS définies dans le
document actif, qu'elles soient intégrées à la section head du document ou dans une feuille de style externe. Adobe
recommande l'utilisation du panneau Styles CSS (plutôt que l'inspecteur Propriétés) comme outil principal de création
et modification de vos styles CSS. Ainsi, votre code sera plus clair et sa maintenance en sera simplifiée.
Outre les styles et feuilles de style de votre composition, libre à vous d'utiliser les feuilles de style livrées avec
Dreamweaver pour styliser vos documents
Pour accéder à un didacticiel relatif au formatage de texte à l'aide de feuilles de style en cascade, consultez le site Web
d'Adobe à l'adresse www.adobe.com/go/vid0153_fr.
Voir aussi
« Ajout et formatage de texte » à la page 226
« Panneau Styles CSS » à la page 134
Dernière mise à jour le 4/5/2011
133
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
« Création d'une nouvelle règle CSS » à la page 139
Didacticiel de formatage de texte avec CSS
A propos des propriétés de la forme courte des styles CSS
La spécification CSS permet la création de styles à l'aide d'une syntaxe abrégée appelée forme courte des styles CSS. Elle
permet de spécifier la valeur de plusieurs propriétés à l'aide d'une seule déclaration. Par exemple, la propriété font
vous permet de définir les propriétés font-style, font-variant, font-weight, font-size, line-height et fontfamily sur une seule ligne.
Il est important de savoir que sous forme courte, les propriétés dont la valeur est omise reçoivent leur valeur par défaut.
Certaines pages risquent donc de s'afficher incorrectement lorsque plusieurs règles CSS sont attribuées à la même
balise.
Par exemple, la règle h1 ci-dessous utilise la syntaxe longue. Remarquez que les propriétés font-variant, fontstretch, font-size-adjust et font-style ont reçu leur valeur par défaut.
h1 {
font-weight: bold;
font-size: 16pt;
line-height: 18pt;
font-family: Arial;
font-variant: normal;
font-style: normal;
font-stretch: normal;
font-size-adjust: none
}
Insérée en tant que propriété unique sous forme courte, la même règle pourrait se présenter ainsi :
h1 { font: bold 16pt/18pt Arial }
Sous forme courte, les propriétés dont la valeur est omise reçoivent automatiquement leur valeur par défaut. Ainsi,
l'exemple de forme abrégée ci-dessus omet les balises font-variant, font-style, font-stretch et font-sizeadjust.
Si des styles sont définis en plusieurs emplacements (par exemple, incorporés dans une page HTML et importés d'une
feuille de style externe) sous deux formes, longue et courte, n'oubliez pas que les propriétés omises dans une règle de
notation abrégée risquent d'écraser les propriétés explicitement définies dans une autre règle. (On parle de styles en
cascade.)
Dreamweaver utilise donc la forme longue par défaut, Ceci permet d'éviter qu'une règle de notation abrégée ne
remplace une règle de notation longue. Si vous ouvrez une page Web codée en forme courte dans Dreamweaver,
n'oubliez pas que Dreamweaver crée toutes les nouvelles règles CSS sous forme longue. Pour spécifier la façon dont
Dreamweaver crée et modifie les règles CSS, vous pouvez modifier les préférences de modification CSS dans la
catégorie Styles CSS de la boîte de dialogue Préférences (Edition > Préférences dans Windows ; Dreamweaver >
Préférences sur le Macintosh).
Remarque : Le panneau Styles CSS crée uniquement des règles sous forme longue. Lorsque vous créez une page ou une
feuille de style CSS à l'aide du panneau Style CSS, n'oubliez pas que le codage manuel de règles CSS sous forme courte
risque de provoquer l'écrasement des propriétés créées sous forme longue par celles créées sous forme courte. Il est donc
préférable de créer vos styles CSS sous forme longue.
Dernière mise à jour le 4/5/2011
134
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
Création et gestion de CSS
Panneau Styles CSS
Le panneau Styles CSS vous permet de suivre les règles CSS et les propriétés qui affectent un élément de page
sélectionné (mode Actuel), ou l'ensemble des règles et des propriétés qui sont disponibles pour le document (mode
Tous). Un bouton bascule placé sur la partie supérieure du panneau 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.
Panneau Styles CSS en mode Actuel
En mode Actuel, le panneau Styles CSS présente trois volets : un volet Résumé de la sélection qui présente les propriétés
CSS de la sélection en cours dans le document, un volet 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 appliquées à la sélection.
Vous pouvez redimensionner l'un quelconque des volets en faisant glisser les cadres entre les volets et redimensionner
les colonnes en faisant glisser les séparateurs.
Le volet Résumé de la sélection récapitule les propriétés CSS de l'élément sélectionné dans le document actif et leurs
valeurs. Ce résumé décrit les propriétés de toutes les règles s'appliquant directement à la sélection. Seules les propriétés
définies apparaissent.
Par exemple, les règles suivantes créent un style de classe et un style de balise (dans ce cas un paragraphe) :
Dernière mise à jour le 4/5/2011
135
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
.foo{
color: green;
font-family: 'Arial';
}
p{
font-family: 'serif';
font-size: 12px;
}
Si vous sélectionnez le texte d'un paragraphe de style de classe .foo dans la fenêtre du document, le volet Résumé de
la sélection affiche les propriétés concernées par les deux règles, puisque ces deux règles s'appliquent à la sélection.
Dans ce cas, le volet Résumé de la sélection affiche la liste des propriétés suivantes :
font-size: 12px
font-family: 'Arial'
color: green
Le volet Résumé de la sélection classe les propriétés par ordre croissant de spécificité. Dans l'exemple précédent, le style
de balise définit la taille de la police et le style de classe, la famille et la couleur de la police. (La famille de police définie
par la classe est prioritaire sur celle définie par le style de balise car la spécificité des sélecteurs de classe est supérieure
à celle des sélecteurs de balise. Pour plus d'informations sur les spécificités CSS, voir
www.w3.org/TR/CSS2/cascade.html.)
Le volet Règles dispose de deux vues (A propos ou Règles) selon votre sélection. Dans la vue A propos (par défaut), le
volet présente le nom de la règle définissant la propriété CSS sélectionnée, ainsi que le nom du fichier contenant cette
règle. Dans la vue Règles, le volet affiche la cascade, ou hiérarchie, des règles s'appliquant directement ou indirectement
à la sélection en cours. (L'onglet auquel la règle s'applique directement s'affiche dans la colonne de droite.) Pour passer
d'une vue à l'autre, cliquez sur les boutons Afficher les informations et Afficher cascade situés dans le coin supérieur
droit du volet Règles.
Lorsque vous sélectionnez une propriété dans le volet Résumé de la sélection, toutes les propriétés de la règle appliquée
s'affichent au-dessous dans le volet Propriétés. (La règle qui s'applique est également sélectionnée dans le panneau
Règles lorsque la vue Règles est sélectionnée.) Par exemple, dans le cas d'une règle appelée .texteprincipal qui
définit une famille, une taille et une couleur de police, la sélection de l'une de ces propriétés dans le volet Résumé de la
sélection entraîne l'affichage de toutes les propriétés définies par la règle .texteprincipal dans le volet Propriétés et
de la règle .texteprincipal sélectionnée dans le volet Règles. (En outre, la sélection d'une règle dans le volet Règles
affiche les propriétés de celle-ci dans le volet Propriétés.) Vous pouvez alors utiliser le volet Propriétés pour modifier
rapidement votre style CSS, qu'il soit intégré dans le document en cours ou relié via par une feuille de style. Par défaut,
le volet Propriétés ne présente que les propriétés ayant déjà été définies et les classe par ordre alphabétique.
Vous pouvez choisir d'afficher les propriétés dans deux autres vues. La vue Catégorie regroupe les propriétés en
catégories, telles que Police, Arrière-plan, Bloc, Bordure, etc., les propriétés définies sont placées en haut de chaque
catégorie, en texte bleu. La vue Liste présente la liste alphabétique de toutes les propriétés disponibles, les propriétés
définies également placées en haut de chaque catégorie, en texte bleu. Pour passer d'une vue à l'autre, cliquez sur les
boutons Afficher la vue par catégorie, Afficher la vue sous forme de liste ou Afficher uniquement les propriétés
définies, situés dans le coin inférieur droit du volet Propriétés.
Dans toutes les vues, les propriétés utilisées dans la sélection s'affichent en bleu, les autres s'affichent en rouge et sont
barrées. Si vous placez le curseur de la souris sur une règle étrangère à la sélection, un message d'explication s'affiche.
Dans la plupart des cas, il s'agit de propriétés écrasées par d'autres ou de propriétés qui ne sont pas héritées.
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.
Dernière mise à jour le 4/5/2011
136
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
Voir aussi
« Ouverture du panneau Styles CSS » à la page 137
Panneau Styles CSS en mode Tous
En mode Tous, le panneau Styles CSS présente deux volets : un volet 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.
Vous pouvez redimensionner l'un quelconque des volets en faisant glisser les cadres entre les volets et redimensionner
les colonnes Propriétés en faisant glisser les séparateurs.
Lorsque vous sélectionnez une règle dans le volet Toutes les règles, toutes les propriétés s'appliquant à cette règle
s'affiche au-dessous dans le volet Propriétés. Vous pouvez alors utiliser le volet Propriétés pour modifier rapidement
votre style CSS, qu'il soit intégré dans le document en cours ou relié via par une feuille de style. Par défaut, le volet
Propriétés ne présente que les propriétés précédemment définies et les classe par ordre alphabétique.
Vous pouvez choisir d'afficher les propriétés dans deux autres vues. La vue Catégorie regroupe les propriétés en
catégories, telles que Police, Arrière-plan, Bloc, Bordure, etc., les propriétés définies placées en haut de chaque
catégorie. La vue Liste présente la liste alphabétique de toutes les propriétés disponibles, les propriétés définies
également placées en haut de chaque catégorie. Pour passer d'une vue à l'autre, cliquez sur les boutons Afficher la vue
par catégorie, Afficher la vue sous forme de liste ou Afficher uniquement les propriétés définies, situés dans le coin
inférieur droit du volet Propriétés. Dans toutes les vues, les propriétés utilisées dans la sélection s'affichent en bleu.
Toute modification apportée dans le volet Propriétés s'applique immédiatement, ce qui vous permet d'avoir un aperçu
direct de votre travail.
Voir aussi
« Ouverture du panneau Styles CSS » à la page 137
Boutons et vues du panneau Styles CSS
Dans les modes Tous et Actuel, le panneau Styles CSS présente trois boutons qui vous permettent de modifier
l'affichage du volet Propriétés (volet inférieur) :
Dernière mise à jour le 4/5/2011
137
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
A
B
C
A. Vue Catégorie B. Vue Liste C. Vue Définition des propriétés
Vue Catégorie Répartit les propriétés CSS prises en charge par Dreamweaver en huit catégories distinctes : police,
arrière-plan, bloc, bordure, boîte, liste, positionnement et extensions. Les propriétés de chaque catégorie sont
conservées dans une liste que vous pouvez développer ou réduire en cliquant sur le bouton plus (+) en regard de la
catégorie de votre choix. Les propriétés définies s'affichent en bleu en haut de la liste.
Vue Liste Affiche l'ensemble des propriétés CSS prises en charge par Dreamweaver par ordre alphabétique. Les
propriétés définies s'affichent en bleu en haut de la liste.
Vue Définition des propriétés N'affiche que les propriétés déjà définies et constitue la vue par défaut.
Dans les modes Tous et Actuel, le panneau Styles CSS contient également les boutons suivants :
A
B
C
D
E
A. Attacher une feuille de style B. Nouvelle règle de CSS C. Modifier le style D. Désactiver/Activer la propriété CSS E. Supprimer règle de CSS
Attacher une feuille de style Ouvre la boîte de dialogue Ajouter une feuille de style externe. Sélectionnez une feuille de
style externe pour créer un lien vers le document actif ou l'importer dans celui-ci.
Nouvelle règle de CSS Ouvre une boîte de dialogue qui permet de sélectionner le type du style que vous créez, par
exemple, pour créer un style de classe, redéfinir une balise HTML ou pour définir un sélecteur CSS.
Modifier le style Ouvre une boîte de dialogue qui permet de modifier les styles dans le document actuel ou dans une
feuille de style externe.
Supprimer règle de CSS Supprime la règle ou la propriété sélectionnée du panneau Styles CSS et le formatage de tous
les éléments auxquels elle est appliquée. (Les références à ce style ne sont cependant pas supprimées.) Le bouton
Supprimer règle de CSS peut également détacher (ou rompre le lien de) une feuille de style CSS associée.
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh) sur
le panneau Styles CSS pour ouvrir un menu contextuel d'options disponibles pour l'exécution des commandes de
feuilles de style CSS.
Ouverture du panneau Styles CSS
Le panneau Styles CSS vous permet d'afficher, de créer, de modifier et de supprimer des styles CSS, mais également de
joindre des feuilles de style externes aux documents.
❖ Effectuez l’une des tâches suivantes :
• Choisissez Fenêtre > Styles CSS.
• Appuyez sur les touches Maj+F11.
• Cliquez sur le bouton CSS de l'inspecteur Propriétés.
Améliorations à la prise en charge de CSS3 dans le panneau Styles CSS (CS 5.5)
Un panneau contextuel a été ajouté au panneau CSS pour les propriétés suivantes :
• text-shadow
Dernière mise à jour le 4/5/2011
138
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
• box-shadow
• border-radius
• border-image
Les options disponibles dans le panneau contextuel vous garantissent d'appliquer la propriété correctement, même si
vous ne maîtrisez pas leur syntaxe W3C.
Le panneau contextuel affichant les options de la propriété CSS3 border-image
Pour obtenir des informations détaillées sur les améliorations CSS3 dans CS 5.5, consultez le blog de Preran, à l'adresse
www.adobe.com/go/learn_dw_css3enhancements_fr.
Application de propriétés CSS3 à l'aide du panneau contextuel
❖ Cliquez sur l'icône « + »' correspondant à ces propriétés. Utilisez les options du panneau contextuel pour appliquer
la propriété.
Spécification de plusieurs ensembles de valeurs
Les propriétés CSS3 telles que text-shadow prennent en charge plusieurs ensembles de valeurs. Par exemple : textshadow: 3px 3px #000, -3px -3px #0f0;
Lorsque vous spécifiez plusieurs ensembles de valeurs en mode Code et que vous ouvrez le panneau contextuel à des
fins d'édition, seul le premier ensemble de valeurs s'affiche. Si vous modifiez cet ensemble de valeurs dans le panneau
contextuel, seul le premier ensemble de valeurs dans le code est affecté. Les autres ensembles de valeurs ne sont pas
affectés et sont appliqués comme indiqué dans le code.
Recherche de propriétés dans le mode Catégories
En mode Catégories, text-shadow se trouve dans la catégorie Police. box-shadow, border-radius et borderimage sont répertoriés dans la catégorie Bordure.
Garantie de la conformité avec les navigateurs
Dreamweaver CS 5.5 prend également en charge un déploiement spécifique aux navigateurs (webkit, Mozilla) des
propriétés box-shadow, border-radius et border-image.
Dernière mise à jour le 4/5/2011
139
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
En mode Catégories, utilisez les options de la catégorie de navigateur appropriée afin de garantir la conformité de ces
propriétés dans le navigateur en question. Par exemple, pour assurer la compatibilité avec la mise en œuvre Mozilla de
la propriété border-image, modifiez -moz-border-image dans la catégorie Mozilla.
Prévisualisation des modifications en mode Affichage en direct
Les modifications apportées aux propriétés CSS ne sont pas affichées en mode Création. Passez au mode Affichage en
direct pour prévisualiser les modifications. Vous pouvez également apporter des modifications rapides aux propriétés
CSS3 dans le mode Affichage en direct. Ces modifications sont immédiatement reflétées dans ce mode.
Les propriétés CSS3 suivantes sont prises en charge en mode Affichage en direct :
• text-shadow
• border-radius
• -webkit-box-shadow
• -webkit-border-image
Voir aussi
www.adobe.com/go/learn_dw_css3enhancements_fr
Définition de préférences de styles CSS
Les préférences de styles CSS contrôlent la façon dont Dreamweaver rédige le code qui définit les styles CSS. Les styles
CSS peuvent être rédigés sous une forme abrégée, que certains développeurs estiment plus facile à utiliser. Toutefois,
certaines versions anciennes des navigateurs n'interprètent pas correctement la forme abrégée des attributs de styles.
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh), puis sélectionnez Styles
CSS dans la liste Catégorie.
2 Définissez les options de style CSS que vous voulez appliquer :
A la création de règles de CSS - Utilisez Forme courte pour : Vous permet de sélectionner les propriétés de style CSS
que Dreamweaver rédige en abrégé.
A la modification de règles de CSS - Utilisez Forme courte pour : Détermine si Dreamweaver réécrit les styles existants
en abrégé.
Choisissez l'option Si l'original utilise Forme courte pour que les styles ne soient pas modifiés.
Choisissez En fonction des paramètres ci-dessus pour réécrire en forme abrégée les styles des propriétés sélectionnées
dans la zone Utiliser Forme courte pour.
Sur double-clic dans le panneau CSS : Vous permet de sélectionner un outil pour modifier les règles CSS.
3 Cliquez sur OK.
Création d'une nouvelle règle CSS
Vous pouvez créer une règle CSS pour automatiser le formatage de balises HTML ou d'une plage de texte identifiée
par un attribut class ou ID.
1 Placez le point d'insertion dans le document, puis procédez de l'une des manières suivantes pour ouvrir la boîte de
dialogue Nouvelle règle CSS :
• Choisissez Format > Styles CSS > Nouveau.
Dernière mise à jour le 4/5/2011
140
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
• Dans le panneau Styles CSS (Fenêtre > Styles CSS), cliquez sur le bouton Nouvelle règle CSS (+), situé dans la partie
inférieure droite du panneau.
• Sélectionnez le texte dans la fenêtre de document, choisissez Nouvelle règle CSS dans le menu Règle cible de
l'inspecteur Propriétés CSS (Fenêtre > Propriétés), puis cliquez sur le bouton Modifier la règle ou choisissez une
option dans l'inspecteur Propriétés CSS (par exemple, cliquez sur le bouton Gras) afin d'entamer la création d'une
nouvelle règle.
2 Dans la boîte de dialogue Nouvelle règle CSS, spécifiez le type de sélecteur pour la règle CSS à créer :
• Pour créer un style personnalisé pouvant être appliqué comme un attribut class à n'importe quel élément HTML,
choisissez Classe dans le menu Sélecteur de types. Entrez ensuite le nom du style dans la zone de texte Nom du
sélecteur.
Remarque : Les noms de classe doivent commencer par un point et peuvent contenir n'importe quelle combinaison de
lettres et de chiffres (par exemple, .monentete1). Si vous omettez le point, Dreamweaver l'insère à votre place.
• Pour définir le formatage d'une balise contenant un attribut id spécifique, choisissez ID dans le menu Type de
sélecteur, puis entrez l'ID unique (par exemple containerDIV) dans la zone de texte Nom du sélecteur.
Remarque : Les ID doivent commencer par un signe dièse (#) et peuvent contenir n'importe quelle combinaison de lettres
et de chiffres (par exemple, #monID1). Si vous omettez le signe dièse initial, Dreamweaver l'insère à votre place.
• Pour redéfinir le formatage par défaut d'une balise HTML spécifique, choisissez Balise dans le menu Type de
sélecteur, puis entrez une balise HTML dans la zone de texte Nom du sélecteur ou choisissez-en une dans le menu.
• Pour définir une règle composée influant simultanément sur plusieurs balises ou ID, choisissez l'option Composé
puis entrez les sélecteurs pour votre règle composée. Par exemple, si vous entrez div p, tous les éléments p contenus
dans des balises div seront influencés par la règle. Au fur et à mesure que vous ajoutez ou supprimez des sélecteurs,
une zone de description explique quels éléments seront influencés par la règle.
3 Choisissez l'endroit où vous voulez définir la règle, puis cliquez sur OK :
• Pour placer la règle dans une feuille de style qui est déjà associée au document, sélectionnez la feuille de style.
• Pour créer une feuille de style externe, choisissez Nouveau fichier feuille de style.
• Pour incorporer le style dans le document actif, choisissez Seulement ce document.
4 Dans la boîte de dialogue Définition des règles de CSS, choisissez les options à définir pour la nouvelle règle CSS.
Pour plus d'informations, consultez la section suivante.
5 Lorsque vous avez défini les propriétés de style, cliquez sur OK.
Remarque : Le fait de cliquer sur OK sans définir d'options de style entraîne la création d'une nouvelle règle vide.
Définition des propriétés CSS
Vous pouvez définir des propriétés pour les règles CSS, telles que les propriétés de police de caractères, d'image et de
couleur d'arrière-plan, d'espacement et de mise en page ainsi que l'aspect des éléments de la liste. Créez d'abord une
nouvelle règle, puis définissez les propriétés suivantes.
Définition des propriétés de type CSS
La catégorie Type de la boîte de dialogue Définition des règles de CSS vous permet de définir les paramètres
élémentaires de police et de type pour un style CSS.
1 Ouvrez le panneau Styles CSS (Maj+F11), si nécessaire.
2 Double-cliquez sur une règle ou une propriété existante dans le volet supérieur du panneau Styles CSS.
3 Dans la boîte de dialogue Définition des règles de CSS, choisissez Type, puis définissez les propriétés de style.
Dernière mise à jour le 4/5/2011
141
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
Laissez les propriétés suivantes vides si elles ne sont pas importantes pour ce style :
Font-family Permet de définir la famille de polices (ou la série de familles) de ce style. Les navigateurs affichent le texte
en utilisant la première police installée sur l'ordinateur de l'utilisateur au sein de la combinaison de polices choisie.
Pour assurer la compatibilité avec Internet Explorer 3.0, utilisez une police Windows en premier. Cet attribut est pris
en charge par les deux navigateurs.
Font-size Définit la taille du texte. Vous pouvez choisir une taille spécifique en cliquant sur une valeur et une unité de
mesure, ou une taille relative. Les pixels fonctionnent correctement pour empêcher la déformation du texte par les
navigateurs. Cet attribut est pris en charge par les deux navigateurs.
Font-style permet de spécifier la variation Normal, Italique ou Oblique comme style de la police. La valeur par défaut
est Normal. Cet attribut est pris en charge par les deux navigateurs.
Line-height Définit la hauteur de la ligne sur laquelle le texte est placé. Ce paramètre fait généralement référence à la
notion d'interligne. Choisissez Normal pour que la hauteur de ligne soit calculée automatiquement en fonction de la
taille de la police ou entrez une valeur fixe et sélectionnez une unité de mesure. Cet attribut est pris en charge par les
deux navigateurs.
Text-decoration Ajoute un effet de soulignement, de barre supérieure, de texte barré ou de clignotement du texte. La
valeur par défaut pour le texte normal est Aucune. La valeur par défaut pour le texte des liens est Souligné. Si vous
définissez le paramètre de lien sur aucun, vous pouvez supprimer le soulignement des liens en définissant une classe
spéciale. Cet attribut est pris en charge par les deux navigateurs.
Font-weight Applique aux caractères un niveau d'épaisseur spécifié en valeur relative ou absolue. Normal équivaut à
une valeur de 400 ; Gras équivaut à une valeur de 700. Cet attribut est pris en charge par les deux navigateurs.
Font-variant Définit la variante en petites capitales du texte. Dreamweaver n'affiche pas cet attribut dans la fenêtre de
document. Cet attribut est pris en charge par Internet Explorer, mais non par Netscape Navigator.
Text-transform Permet de mettre en capitale la première lettre de chaque mot de la sélection ou de passer l'ensemble
du texte en majuscules ou minuscules. Cet attribut est pris en charge par les deux navigateurs.
Couleur Définit la couleur du texte. Cet attribut est pris en charge par les deux navigateurs.
4 Une fois les options définies, sélectionnez une autre catégorie CSS dans la partie gauche du panneau pour définir
des propriétés de style supplémentaires, puis cliquez sur OK.
Définition des propriétés d'arrière-plan de style CSS
Utilisez la catégorie Arrière-plan de la boîte de dialogue Définition des règles CSS pour définir les paramètres d'arrièreplan d'un style CSS. Les propriétés d'arrière-plan s'appliquent à tout élément d'une page Web. Rien ne vous empêche
d'assortir un élément de page d'une couleur ou d'une image d'arrière-plan (derrière le texte, la page, un tableau, etc.).
Il vous est également possible de définir la position d'une image d'arrière-plan.
1 Ouvrez le panneau Styles CSS (Maj+F11), si nécessaire.
2 Double-cliquez sur une règle ou une propriété existante dans le volet supérieur du panneau Styles CSS.
3 Dans la boîte de dialogue Définition des règles de CSS, choisissez Arrière-plan, puis définissez les propriétés de
style.
Laissez les propriétés suivantes vides si elles ne sont pas importantes pour ce style :
Couleur d'arrière-plan Définit la couleur d'arrière-plan de l'élément. Cet attribut est pris en charge par les deux
navigateurs.
Image d’arrière-plan Définit l'image d'arrière-plan pour l'élément. Cet attribut est pris en charge par les deux
navigateurs.
Dernière mise à jour le 4/5/2011
142
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
Répétition de l'arrière-plan Détermine comment l'image d'arrière-plan doit être répétée, le cas échéant. Cet attribut
est pris en charge par les deux navigateurs.
• Pas de répétition affiche l'image une seule fois, dans le coin supérieur gauche de l'élément.
• Répéter crée une mosaïque horizontale et verticale de l'image derrière l'élément.
• Répéter-x et Répéter-y affichent respectivement un bandeau horizontal ou vertical. Les dernières images sont
coupées pour s'adapter aux dimensions exactes de l'élément.
Remarque : La propriété Répétition vous permet de redéfinir la balise body et de définir une image d'arrière-plan sans
mosaïque ni répétition.
Pièce jointe de l'arrière-plan Détermine si l'image d'arrière-plan reste fixe par rapport à sa position d'origine ou défile
avec le contenu. Notez que certains navigateurs font toujours défiler l'image avec son contenu. Cet attribut est pris en
charge par Internet Explorer, mais non par Netscape Navigator.
Position de l'arrière-plan (X) et Position de l'arrière-plan (Y) Spécifient la position initiale de l'image d'arrière-plan par
rapport à l'élément. Cette propriété peut être utilisée pour aligner une image d'arrière-plan sur le centre de la page,
verticalement (X) et horizontalement (Y). Si la propriété Fixation est réglée sur Fixe, cette position est relative à la
fenêtre de document, pas à l'élément.
4 Une fois les options définies, sélectionnez une autre catégorie CSS dans la partie gauche du panneau pour définir
des propriétés de style supplémentaires, puis cliquez sur OK.
Définition des propriétés de bloc de style CSS
La catégorie Bloc de la boîte de dialogue Définition des règles CSS vous permet de définir les paramètres d'espacement
et d'alignement des balises et des propriétés.
1 Ouvrez le panneau Styles CSS (Maj+F11), si nécessaire.
2 Double-cliquez sur une règle ou une propriété existante dans le volet supérieur du panneau Styles CSS.
3 Dans la boîte de dialogue Définition des règles de CSS, choisissez Bloc, puis définissez les propriétés de style
suivantes. (Ne définissez pas la propriété si elle n'est pas importante pour le style.)
Espacement des mots Définit l'espace devant séparer les mots. Pour définir une valeur spécifique, choisissez Valeur
dans le menu déroulant, puis entrez une valeur numérique. Dans le deuxième menu contextuel, choisissez une unité
de mesure (par exemple, pixels, points, etc.).
Remarque : Vous pouvez indiquer des valeurs négatives, mais le résultat final variera selon le navigateur. Dreamweaver
n'affiche pas cet attribut dans la fenêtre de document.
Espacement des lettres Augmente ou réduit l'interlettrage. Une valeur négative (par exemple, -4) réduit l'espacement
entre les caractères. Les paramètres d'interlettrage ont priorité sur les paramètres de justification du texte. Cet attribut
est pris en charge par Internet Explorer 4, mais non par Netscape Navigator 6.
Alignement vertical Détermine l'alignement vertical de l'élément auquel il s'applique. Dreamweaver n'affiche cet
attribut dans la fenêtre de document que lorsqu'il est appliqué à la balise <img>.
Alignement du texte Détermine l'alignement du texte au sein de l'élément. Cet attribut est pris en charge par les deux
navigateurs.
Retrait du texte Détermine le retrait de texte sur la première ligne. Vous pouvez utiliser une valeur négative pour créer
un retrait négatif, mais le résultat final variera selon le navigateur. Dreamweaver n'affiche cet attribut dans la fenêtre
de document que lorsqu'il est appliqué aux éléments de niveau bloc. Cet attribut est pris en charge par les deux
navigateurs.
Dernière mise à jour le 4/5/2011
143
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
Espace blanc Détermine la gestion des espaces au sein de l'élément. Choisissez parmi les trois options suivantes :
Normal réduit à un seul espace une suite éventuelle de plusieurs caractères d'espacement ; Pre gère les espaces comme
si le texte était inséré à l'intérieur d'une balise pre (tous les caractères d'espacement, notamment les espaces,
tabulations et retours chariot, sont respectés) ; Pas de retour spécifie que le texte peut uniquement être renvoyé à la
ligne à l'apparition d'une balise br. Dreamweaver n'affiche pas cet attribut dans la fenêtre de document. Cet attribut
est pris en charge par Netscape Navigator et par Internet Explorer 5.5.
Afficher Détermine le mode d'affichage d'un élément, le cas échéant. Aucune désactive l'affichage d'un élément.
4 Une fois les options définies, sélectionnez une autre catégorie CSS dans la partie gauche du panneau pour définir
des propriétés de style supplémentaires, puis cliquez sur OK.
Définition des propriétés de boîte de style CSS
La catégorie Boîte de la boîte de dialogue Définition des règles CSS vous permet de définir les paramètres des balises
et des propriétés pour le positionnement des éléments sur la page.
Vous pouvez appliquer des paramètres individuels aux côtés d'un élément lors de la définition du remplissage et des
marges ou utiliser l'option Idem pour tous pour appliquer le même paramètre à tous les côtés d'un élément.
1 Ouvrez le panneau Styles CSS (Maj+F11), si nécessaire.
2 Double-cliquez sur une règle ou une propriété existante dans le volet supérieur du panneau Styles CSS.
3 Dans la boîte de dialogue Définition des règles de CSS, choisissez Boîte, puis définissez les propriétés de style
suivantes. Ne définissez pas la propriété si elle n'est pas importante pour le style.
Largeur et Hauteur Définissent la largeur et la hauteur de l'élément.
Flottante Détermine de quel côté les autres éléments, tels que le texte, les divs PA, les tableaux, etc., flottent autour
d'un élément. Les autres éléments sont affichés autour de l'élément flottant, suivant la méthode habituelle. Cet attribut
est pris en charge par les deux navigateurs.
Effacer Définit les côtés sur lesquels les éléments PA ne sont pas autorisés. Si un élément PA apparaît du côté marqué
dans Effacer, l'élément possédant cet attribut passera sous le cadre. Cet attribut est pris en charge par les deux
navigateurs.
Remplissage Définit la marge intérieure, c'est-à-dire l'espace qui sépare le contenu de l'élément de sa bordure (ou sa
marge s'il ne comporte pas de bordure). Désactivez l'option Idem pour tous si vous voulez définir un remplissage
différent pour chaque côté de l'élément.
Idem pour tous Applique le même remplissage aux bords supérieur, droit, inférieur et gauche de l'élément.
Marge Définit l'espace qui sépare la bordure d'un élément (ou son remplissage s'il ne comporte pas de bordure) d'un
autre élément. Dreamweaver n'affiche cet attribut dans la fenêtre de document que lorsqu'il est appliqué aux éléments
de niveau bloc (paragraphes, en-têtes, listes, etc.). Désactivez l'option Idem pour tous si vous voulez définir une marge
différente pour chaque côté de l'élément.
Idem pour tous Applique la même marge aux bords supérieur, droit, inférieur et gauche de l'élément.
4 Une fois les options définies, sélectionnez une autre catégorie CSS dans la partie gauche du panneau pour définir
des propriétés de style supplémentaires, puis cliquez sur OK.
Définition des propriétés de bordure de style CSS
Le panneau Bordure de la boîte de dialogue Définition des règles CSS vous permet de définir les paramètres des
bordures des éléments, par exemple leur épaisseur, leur couleur et leur style.
1 Ouvrez le panneau Styles CSS (Maj+F11), si nécessaire.
Dernière mise à jour le 4/5/2011
144
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
2 Double-cliquez sur une règle ou une propriété existante dans le volet supérieur du panneau Styles CSS.
3 Dans la boîte de dialogue Définition des règles de CSS, choisissez Bordure, puis définissez les propriétés de style
suivantes. Ne définissez pas la propriété si elle n'est pas importante pour le style.
Type Définit l'aspect de la bordure. L'affichage du style dépend du navigateur. Désactivez l'option Idem pour tous si
vous voulez définir un style de bordure différent pour chaque côté de l'élément.
Idem pour tous Applique le même style de bordure aux bords supérieur, droit, inférieur et gauche de l'élément.
Largeur Détermine l'épaisseur de la bordure de l'élément. Cet attribut est pris en charge par les deux navigateurs.
Désactivez l'option Idem pour tous si vous voulez définir une épaisseur différente pour chaque côté de l'élément.
Idem pour tous Applique la même largeur de bordure aux bords supérieur, droit, inférieur et gauche de l'élément.
Couleur Définit la couleur de la bordure. Vous pouvez indiquer une couleur différente pour chaque côté, mais le
résultat final variera selon le navigateur. Désactivez l'option Idem pour tous si vous voulez définir une couleur
différente pour chaque côté de l'élément.
Idem pour tous Applique la même couleur de bordure aux bords supérieur, droit, inférieur et gauche de l'élément.
4 Une fois les options définies, sélectionnez une autre catégorie CSS dans la partie gauche du panneau pour définir
des propriétés de style supplémentaires, puis cliquez sur OK.
Définition des propriétés de liste de style CSS
La catégorie Liste de la boîte de dialogue Définition des règles CSS vous permet de définir les paramètres des balises de
liste, tels que la taille et le type des puces.
1 Ouvrez le panneau Styles CSS (Maj+F11), si nécessaire.
2 Double-cliquez sur une règle ou une propriété existante dans le volet supérieur du panneau Styles CSS.
3 Dans la boîte de dialogue Définition des règles de CSS, choisissez Liste, puis définissez les propriétés de style
suivantes. Ne définissez pas la propriété si elle n'est pas importante pour le style.
Type de style de liste Détermine l'aspect des puces ou des numéros. Cet attribut est pris en charge par les deux
navigateurs.
Image de style de liste Permet de choisir une image personnalisée pour les puces. Cliquez sur Parcourir (Windows)
ou Choisir (Macintosh) pour sélectionner une image ou tapez le chemin d'accès à celle-ci.
Position de style de liste Détermine si le texte de l'élément de la liste est habillé et mis en retrait (extérieure) ou si le
texte habille la marge de gauche (intérieure).
4 Une fois les options définies, sélectionnez une autre catégorie CSS dans la partie gauche du panneau pour définir
des propriétés de style supplémentaires, puis cliquez sur OK.
Définition des propriétés de positionnement de style CSS
Les propriétés de style Positionnement déterminent la façon dont le contenu associé au style CSS sélectionné est
positionné dans la page.
1 Ouvrez le panneau Styles CSS (Maj+F11), si nécessaire.
2 Double-cliquez sur une règle ou une propriété existante dans le volet supérieur du panneau Styles CSS.
3 Dans la boîte de dialogue Définition des règles de CSS, choisissez Positionnement, puis définissez les propriétés de
style qui vous conviennent.
Dernière mise à jour le 4/5/2011
145
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
Laissez les propriétés suivantes vides si elles ne sont pas importantes pour ce style :
Position Détermine la façon dont le navigateur doit positionner l'élément sélectionné, avec les options suivantes :
• Absolu place le contenu en fonction des coordonnées indiquées dans les zones Emplacement par rapport à l'ancêtre
PA ou relatif le plus proche, et à défaut, par rapport au coin supérieur gauche de la page.
• Relatif place le bloc de contenu en fonction des coordonnées indiquées dans les zones Emplacement, par rapport à
la position du bloc dans le flux de texte du document. Par exemple, si vous définissez pour un élément une position
relative et des coordonnées d'origine (en haut à gauche) de 20 px chacune, l'élément sera déplacé de 20 px vers la
droite et de 20 px vers le bas par rapport à sa position normale dans le flux. Les éléments peuvent aussi être
positionnés de manière relative, avec ou sans coordonnées haut, gauche, droite ou bas, afin d'établir un contexte
pour les enfants PA.
• Fixe place le contenu en fonction des coordonnées indiquées dans les zones Emplacement, par rapport au coin
supérieur gauche du navigateur. Le contenu restera fixé dans cette position tandis que l'utilisateur fera défiler la page.
• Statique place le contenu à son emplacement dans le flux de texte. Il s'agit de la position par défaut de tous les
éléments HTML positionnables.
Visibilité Détermine la condition de l'affichage initial du contenu. Si vous ne spécifiez pas de propriété de visibilité, le
contenu hérite par défaut de la valeur de cette propriété pour l'objet parent. La visibilité par défaut de la balise body est
visible. Sélectionnez l'une des options de visibilité suivantes :
• Inherit hérite de la propriété de visibilité du parent du contenu.
• Visible affiche le contenu, quelle que soit la valeur du parent.
• Masqué masque le contenu, quelle que soit la valeur du parent.
Index Z Détermine l'ordre de superposition du contenu. Les éléments ayant une valeur d'index Z supérieure s'affichent
par dessus les éléments ayant une valeur d'index Z inférieure (ou aucune valeur d'index Z). Les valeurs peuvent être
positives ou négatives. (Si votre contenu est à position absolue, il est plus facile de modifier l'ordre de superposition à
l'aide du panneau Eléments PA).
Débordement Détermine ce qui se passe si le contenu d'un conteneur (par exemple, une balise DIV ou P) dépasse la
taille de ce dernier. Ces propriétés contrôlent l'extension de la manière suivante :
• Visible augmente la taille du conteneur pour que tout son contenu soit visible. Le conteneur s'agrandit vers le bas
et vers la droite.
• Masqué conserve la taille du contenu et coupe tout contenu dépassant la taille. Aucune barre de défilement n'est
affichée.
• Défilement ajoute des barres de défilement au conteneur, que le contenu dépasse ou non la taille du conteneur. Le
fait d'intégrer des barres de défilement évite la confusion causée par l'apparition et la disparition de barres de
défilement dans un environnement dynamique. Dreamweaver n'affiche pas cette option dans la fenêtre de
document.
• Auto ne fait apparaître les barres de défilement que lorsque le contenu du conteneur dépasse les limites de ce
dernier. Dreamweaver n'affiche pas cette option dans la fenêtre de document.
Emplacement Définit l'emplacement et la taille du bloc de contenu. La façon dont le navigateur interprète
l'emplacement dépend de l'option choisie pour l'attribut Type. Les valeurs relatives à la taille ne sont pas prises en
compte si le contenu du bloc de contenu excède la taille spécifiée.
Les unités par défaut pour l'emplacement et la taille sont les pixels. Vous pouvez également choisir les unités suivantes :
pc (picas), pt (points), in (pouces), mm (millimètres), cm (centimètres) ou % (pourcentage de la valeur équivalente de
l'objet parent). Les abréviations doivent suivre la valeur sans espace : par exemple, 3mm.
Dernière mise à jour le 4/5/2011
146
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
Détourage Définit la partie du contenu qui est visible. Si vous indiquez une zone de détourage, vous pouvez la gérer à
l'aide d'un langage de script tel que Java Script et modifier ces propriétés pour créer des effets spéciaux, par exemple
un effet de volet à l'ouverture. Ces effets de volet peuvent être configurés via le comportement Changer la propriété.
4 Une fois les options définies, sélectionnez une autre catégorie CSS dans la partie gauche du panneau pour définir
des propriétés de style supplémentaires, puis cliquez sur OK.
Définition des propriétés d'extension de style CSS
Les propriétés de style d'extensions comprennent les filtres, les sauts de page et les options de pointeur.
Remarque : Un certain nombre d'autres propriétés d'extension sont disponibles dans Dreamweaver, mais vous devez
passer par le panneau Styles CSS pour y accéder. Vous pouvez afficher facilement une liste des propriétés d'extension
disponibles en ouvrant le panneau Styles CSS (Fenêtre > Styles CSS), puis cliquant sur le bouton Afficher la vue par
catégorie en bas du panneau et en développant la catégorie Extensions.
1 Ouvrez le panneau Styles CSS (Maj+F11), si nécessaire.
2 Double-cliquez sur une règle ou une propriété existante dans le volet supérieur du panneau Styles CSS.
3 Dans la boîte de dialogue Définition des règles de CSS, choisissez Extensions, puis définissez les propriétés de style
suivantes. Ne définissez pas la propriété si elle n'est pas importante pour le style.
Saut de page avant Force un saut de page en cas d'impression de la page, avant ou après l'objet contrôlé par ce style.
Choisissez l'option que vous voulez définir dans le menu déroulant. Cet attribut n'est pas pris en charge par la version
4.0 des navigateurs, mais peut l'être dans les versions ultérieures.
Curseur Modifie l'aspect du pointeur lorsque celui-ci passe au-dessus de l'objet contrôlé par ce style. Choisissez
l'option que vous voulez définir dans le menu déroulant. Cet attribut est pris en charge par Internet Explorer 4.0 et
versions ultérieures et par Netscape Navigator 6.
Filtre Applique des effets spéciaux, dont des effets de flou et de négatif, à l'objet contrôlé par ce style. Sélectionnez un
effet dans le menu contextuel.
4 Une fois les options définies, sélectionnez une autre catégorie CSS dans la partie gauche du panneau pour définir
des propriétés de style supplémentaires, puis cliquez sur OK.
Modification d'une règle CSS
Vous pouvez facilement modifier les règles internes et externes appliquées à un document.
Lorsque vous modifiez une feuille de style CSS qui contrôle du texte dans votre document, vous reformatez
instantanément tout ce texte. Les modifications apportées à une feuille de style externe se répercutent sur tous les
documents auxquels elle est liée.
Libre à vous de définir un éditeur externe à utiliser pour la modification des feuilles de style.
Modification d'une règle dans le panneau Styles CSS (mode Actuel)
1 Ouvrez le panneau Styles CSS en sélectionnant Fenêtre > Styles CSS.
2 Cliquez sur le bouton Actuel, situé en haut du panneau Styles CSS.
3 Sélectionnez un élément de texte dans la page pour afficher ses propriétés.
4 Effectuez l’une des tâches suivantes :
• Pour afficher la boîte de dialogue Définition des règles de CSS et effectuer vos modifications, double-cliquez sur
une propriété du volet Résumé de la sélection.
• Sélectionnez une propriété dans le volet Résumé de la sélection et modifiez-la dans le volet Propriétés inférieur.
Dernière mise à jour le 4/5/2011
147
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
• Sélectionnez une règle dans le volet Toutes les règles, puis modifiez ses propriétés dans le volet Propriétés inférieur.
Remarque : Vous pouvez changer le comportement du double-clic lors de la modification CSS, ainsi que les autres
comportements, en changeant les préférences de Dreamweaver.
Modification d'une règle dans le panneau Styles CSS (mode Tous)
1 Ouvrez le panneau Styles CSS en sélectionnant Fenêtre > Styles CSS.
2 Cliquez sur le bouton Tous, situé en haut du panneau Styles CSS.
3 Effectuez l’une des tâches suivantes :
• Pour afficher la boîte de dialogue Définition des règles de CSS et effectuer vos modifications, double-cliquez sur
une règle du volet Toutes les règles.
• Sélectionnez une règle dans le volet Toutes les règles, puis modifiez ses propriétés dans le volet Propriétés inférieur.
• Sélectionnez une règle dans le volet Toutes les règles, puis cliquez sur le bouton Modifier le style situé dans le coin
inférieur droit du panneau Styles CSS.
Remarque : Vous pouvez changer le comportement du double-clic lors de la modification CSS, ainsi que les autres
comportements, en changeant les préférences de Dreamweaver.
Modification du nom d'un sélecteur CSS
1 Dans le panneau Styles CSS (mode Tous), sélectionnez le sélecteur à modifier.
2 Cliquez à nouveau sur le sélecteur afin de pouvoir en modifier le nom.
3 Apportez vos modifications, puis appuyez sur Entrée (Windows) ou sur Retour (Macintosh).
Voir aussi
« Définition des propriétés de texte dans l'inspecteur Propriétés » à la page 236
Ajout d'une propriété à une règle
Vous pouvez utiliser le panneau de styles CSS pour ajouter des propriétés aux règles.
1 Dans le panneau Styles CSS (Fenêtre > CSS), sélectionnez une règle dans le volet Toutes les règles (mode Tous) ou
une propriété dans le volet Résumé de la sélection (mode Actuel).
2 Effectuez l’une des tâches suivantes :
• Si la vue Afficher uniquement les propriétés définies est activée dans le volet Propriétés, cliquez sur le lien Ajouter
des propriétés et ajoutez une propriété.
• Si la vue Catégorie ou Liste est sélectionnée dans le volet Propriétés, donnez une valeur à la propriété sélectionnée.
Application, suppression ou changement du nom de styles de classe
Les styles de classe sont le seul type de style CSS qui peut être appliqué à n'importe quel texte dans un document, quelles
que soient les balises qui contrôlent ce texte. Tous les styles de classe associés au document actif sont affichés dans le
panneau Styles CSS (leur nom est précédé d'un point [.]) ainsi que dans le menu déroulant Style dans l'inspecteur
Propriétés de texte.
Même si la plupart des styles sont actualisés immédiatement, il est conseillé d'afficher votre page dans un navigateur
et de vérifier que le style a été appliqué comme prévu. Lorsque vous appliquez plusieurs styles au même texte, ils
risquent d'être contradictoires et de produire des résultats inattendus.
Dernière mise à jour le 4/5/2011
148
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
Lorsque vous affichez un aperçu des styles définis dans une feuille de style CSS externe, n'oubliez pas d'enregistrer la
feuille de style afin que vos modifications soient appliquées lorsque vous afficherez la page dans un navigateur.
Voir aussi
« A propos des feuilles de style en cascade » à la page 129
« A propos des styles en cascade » à la page 131
« Panneau Styles CSS » à la page 134
Application d'un style de classe CSS
1 Sélectionnez le texte du document auquel vous voulez appliquer un style CSS.
Placez le curseur dans un paragraphe pour appliquer le style au paragraphe entier.
Si vous sélectionnez une plage de texte au sein d'un même paragraphe, le style CSS n'affectera que cette sélection.
Pour indiquer la balise précise à laquelle le style CSS doit être appliqué, sélectionnez cette balise dans le sélecteur situé
dans la partie inférieure gauche de la fenêtre de document.
2 Pour appliquer un style de classe, procédez de l'une des manières suivantes :
• Dans le panneau Styles CSS (Fenêtre > Styles CSS), sélectionnez le mode Tous, cliquez avec le bouton droit de la
souris sur le nom du style à appliquer et choisissez Appliquer dans le menu contextuel.
• Dans l'inspecteur Propriétés HTML, choisissez le style de classe à appliquer dans le menu déroulant Classe.
• Dans la fenêtre de document, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfoncée (Macintosh) sur le texte sélectionné, choisissez Styles CSS dans le menu contextuel, puis choisissez le style
à appliquer.
• Choisissez Format > Styles CSS, puis sélectionnez le style à appliquer dans le sous-menu.
Suppression d'un style de classe d'une sélection
1 Sélectionnez l'objet ou le texte auquel le style ne doit plus être appliqué.
2 Dans l'inspecteur Propriétés HTML (Fenêtre > Propriétés), choisissez Aucun dans le menu déroulant Classe.
Changement de nom d'un style de classe
1 Dans le panneau Styles CSS, cliquez avec le bouton droit de la souris sur le style de classe CSS que vous souhaitez
renommer et sélectionnez Renommer la classe.
Vous pouvez également renommer une classe en sélectionnant Renommer la classe dans le menu d'options du
panneau Styles CSS.
2 Dans la boîte de dialogue Renommer la classe, assurez-vous que la classe que vous souhaitez renommer est
sélectionnée dans le menu déroulant Renommer la classe.
3 Dans la zone de texte Nouveau nom, saisissez le nouveau nom de la nouvelle classe et cliquez sur OK.
Si la classe que vous renommez se trouve dans la section head du document actif, Dreamweaver modifie le nom de la
classe ainsi que toutes les instances du nom de la classe se trouvant dans le document actif. Si la classe que vous
renommez est un fichier CSS externe, Dreamweaver s'ouvre et modifie le nom de la classe dans le fichier. Dreamweaver
lance également une boîte de dialogue Rechercher et remplacer à l'échelle du site pour vous permettre de rechercher
toutes les instances de l'ancien nom de la classe pouvant exister dans votre site.
Dernière mise à jour le 4/5/2011
149
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
Déplacement/exportation de règles CSS
Les fonctions de gestion des feuilles de styles CSS de Dreamweaver permettent de déplacer ou d'exporter aisément des
règles CSS vers des emplacements différents. Vous pouvez déplacer des règles d'un document vers un autre, de la
section head d'un document vers une feuille de style externe, entre des fichiers CSS externes, etc.
Remarque : Si la règle que vous essayez de déplacer est en conflit avec une règle de la feuille de style de destination,
Dreamweaver affiche la boîte de dialogue Il existe déjà une règle de ce nom. Si vous décidez de déplacer la règle en conflit,
Dreamweaver place la règle déplacée à proximité immédiate de la règle avec laquelle elle est en conflit dans la feuille de
style de destination.
Voir aussi
« Insertion de code avec la barre d'outils de codage » à la page 321
Déplacement/exportation de règles CSS vers une nouvelle feuille de style
1 Effectuez l’une des tâches suivantes :
• Dans le panneau Styles CSS, sélectionnez la ou les règles que vous souhaitez déplacer. Cliquez ensuite sur la
sélection avec le bouton droit de la souris et choisissez Déplacer les règles CSS dans le menu contextuel. Pour
sélectionner plusieurs règles, appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant
avec la souris sur les règles à sélectionner
• En mode Code, sélectionnez la ou les règles à déplacer. Cliquez ensuite sur la sélection avec le bouton droit de la
souris et sélectionnez Styles CSS > Déplacer les règles CSS dans le menu contextuel.
Remarque : La sélection partielle d'une règle se traduit par le déplacement de l'ensemble de la règle.
2 Dans la boîte de dialogue Déplacer dans une feuille de style externe, sélectionnez l'option de nouvelle feuille de style
et cliquez sur OK.
3 Dans la boîte de dialogue Enregistrer la feuille de style sous, entrez un nom pour la nouvelle feuille de style et cliquez
sur Enregistrer.
Lorsque vous cliquez sur Enregistrer, Dreamweaver enregistre une nouvelle feuille de style contenant les règles que
vous avez sélectionnées et l'associe au document actif.
Vous pouvez également déplacer des règles à l'aide de la barre d'outils de codage. La barre d'outil de codage est
disponible uniquement en mode Code.
Déplacement/exportation de règles CSS vers une feuille de style existante
1 Effectuez l’une des tâches suivantes :
• Dans le panneau Styles CSS, sélectionnez la ou les règles que vous souhaitez déplacer. Cliquez ensuite sur la
sélection avec le bouton droit de la souris et choisissez Déplacer les règles CSS dans le menu contextuel. Pour
sélectionner plusieurs règles, appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant
avec la souris sur les règles à sélectionner
• En mode Code, sélectionnez la ou les règles à déplacer. Cliquez ensuite sur la sélection avec le bouton droit de la
souris et sélectionnez Styles CSS > Déplacer les règles CSS dans le menu contextuel.
Remarque : La sélection partielle d'une règle se traduit par le déplacement de l'ensemble de la règle.
2 Dans la boîte de dialogue Déplacer dans une feuille de style externe, sélectionnez une feuille de style existante dans
le menu déroulant ou naviguez jusqu'à une feuille de style existante et cliquez sur OK.
Remarque : Le menu déroulant affiche toutes les feuilles de style qui sont liées au document actif.
Dernière mise à jour le 4/5/2011
150
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
Vous pouvez également déplacer des règles à l'aide de la barre d'outils de codage. La barre d'outil de codage est
disponible uniquement en mode Code.
Réorganisation ou déplacement des règles CSS en les faisant glisser
❖ Dans le panneau Styles CSS (mode Tous), sélectionnez une règle et faites-la glisser jusqu'à l'emplacement désiré.
Vous pouvez sélectionner des règles et les faire glisser pour les réorganiser à l'intérieur d'une feuille de style, ou
déplacer une règle vers une autre feuille de style ou dans la section head du document.
Vous pouvez déplacer plusieurs règles à la fois en appuyant sur la touche Ctrl (Windows) ou Commande (Macintosh)
tout en cliquant avec la souris sur plusieurs règles pour les sélectionner.
Sélection de plusieurs règles avant de les déplacer
❖ Dans le panneau Styles CSS, appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant
avec la souris sur les règles que vous souhaitez sélectionner.
Conversion d'un style CSS intégré en une règle CSS
L'utilisation de styles intégrés ne constitue pas une meilleure pratique recommandée. Pour que vos styles CSS soient
plus clairs et mieux organisés, vous pouvez convertir des styles intégrés en règles CSS résidant dans la section head du
document ou dans une feuille de style externe.
1 En mode Code (Affichage > Code), sélectionnez la totalité de l'attribut de style qui contient le style CSS intégré à
convertir.
2 Cliquez dessus avec le bouton droit de la souris et sélectionnez Styles CSS > Convertir en règle les styles CSS
intégrés.
3 Dans la boîte de dialogue Convertir style CSS, saisissez un nom de classe pour la nouvelle règle, puis procédez de
l'une des façons suivantes :
• Spécifiez une feuille de style dans laquelle vous souhaitez que la nouvelle règle CSS apparaisse et cliquez sur OK.
• Sélectionnez la section head du document en tant qu'emplacement dans lequel vous souhaitez que la nouvelle règle
CSS apparaisse et cliquez sur OK.
Vous pouvez également convertir des règles à l'aide de la barre d'outils de codage. La barre d'outil de codage est
disponible uniquement en mode Code.
Voir aussi
« Insertion de code avec la barre d'outils de codage » à la page 321
Etablissement d'un lien vers une feuille de style CSS externe
Si vous modifiez une feuille de style CSS externe, les changements sont reflétés dans tous les documents liés à cette
feuille de style. Vous pouvez exporter les styles CSS trouvés dans un document afin de créer une nouvelle feuille de
style CSS, et attacher ou créer un lien vers une feuille de style externe pour appliquer les styles trouvés à cet endroit.
Vous pouvez attacher toute feuille de style de votre création à vos pages ou copier ces feuilles dans votre site. De plus,
Dreamweaver est fourni avec des feuilles de style prédéfinies qui peuvent être automatiquement placées dans votre site
et attachées à vos pages.
1 Ouvrez le panneau Styles CSS en procédant de l'une des manières suivantes :
• Choisissez Fenêtre > Styles CSS.
• Appuyez sur les touches Maj + F11.
Dernière mise à jour le 4/5/2011
151
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
2 Dans le panneau Styles CSS, cliquez sur le bouton Attacher une feuille de style. Il se trouve dans le coin inférieur
droit du panneau.
3 Effectuez l’une des tâches suivantes :
• Cliquez sur le bouton Parcourir pour rechercher une feuille de style CSS externe.
• Entrez le chemin de la feuille de style dans le champ Fichier/URL.
4 Dans la zone Ajouter sous, sélectionnez une des options suivantes :
• Pour créer un lien entre le document actif et une feuille de style externe, choisissez Lien. Cette sélection a pour effet
de créer une balise de lien href dans le code HTML et de référencer l'URL de l'emplacement de la feuille de style
publiée. Microsoft Internet Explorer et Netscape Navigator prennent tous deux en charge cette méthode.
• Vous ne pouvez pas utiliser une balise de lien pour ajouter une référence d'une feuille de style externe à une autre.
Pour imbriquer des feuilles de style, vous devez utiliser une directive d'importation. La plupart des navigateurs
reconnaissent également la directive d'importation dans une page (plutôt que simplement dans des feuilles de
style). Il existe quelques différences dans la méthode de résolution des conflits entre propriétés lorsque des règles
se chevauchent dans des feuilles de style externes liées et des feuilles importées dans une page. Pour importer une
feuille de style externe, plutôt que d'y créer un lien, choisissez Importer.
5 Dans le menu contextuel Médias, spécifiez le média cible de la feuille de style.
Pour plus d'informations sur les 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.
6 Cliquez sur le bouton d'aperçu pour vérifier que la feuille de style applique effectivement les styles de votre choix à
la page active.
Si les styles appliqués ne sont pas ceux attendus, cliquez sur Annuler pour supprimer la feuille de style. La page retrouve
son aspect précédent.
7 Cliquez sur OK.
Voir aussi
« Création d'un document basé sur un fichier d'exemple Dreamweaver » à la page 68
Modification d'une feuille de style CSS
En règle générale, une feuille de style CSS comprend une ou plusieurs règles. Vous pouvez modifier les différentes
règles d'une feuille de style CSS à l'aide du panneau Styles CSS, ou bien vous pouvez travailler directement dans la
feuille de style CSS.
1 Dans le panneau Styles CSS (Fenêtre > Styles CSS), sélectionnez le mode Tous.
2 Dans le volet Toutes les règles, double-cliquez sur le nom du style à modifier.
3 Dans la fenêtre Document, modifiez la feuille de style en fonction des besoins, puis enregistrez-la.
Mise en forme du code CSS
Vous pouvez définir des préférences qui contrôlent le formatage de votre code CSS chaque fois que vous créez ou
modifiez une règle CSS à l'aide de l'interface Dreamweaver. Par exemple, vous pouvez définir des préférences qui
placeront toutes les propriétés CSS sur des lignes séparées, insérer une ligne vierge entre les règles CSS, etc.
Dernière mise à jour le 4/5/2011
152
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
Lorsque vous définissez des préférences de formatage de code CSS, les préférences que vous sélectionnez sont
automatiquement appliquées à toutes les nouvelles règles CSS que vous créez. Toutefois, vous pouvez également
appliquer ces préférences manuellement à des documents individuels. Cela peut être utile si vous possédez un
document HTML ou CSS plus ancien ayant besoin d'un formatage.
Remarque : Les préférences de formatage de code CSS s'appliquent uniquement aux règles CSS de feuilles de style externes
ou intégrées (mais pas aux styles intégrés).
Voir aussi
« Modification du format du code » à la page 312
Définition des préférences de formatage du code CSS
1 Choisissez Edition > Préférences.
2 Dans la boîte de dialogue Préférences, sélectionnez la catégorie Format du code.
3 En regard de l'option Formatage avancé, cliquez sur le bouton CSS.
4 Dans la boîte de dialogue Options de mise en forme de la source CSS, sélectionnez les options que vous souhaitez
appliquer à votre code source CSS. Un aperçu de la feuille de style CSS telle qu'elle est modifiée par les options
sélectionnées s'affiche dans la fenêtre Aperçu plus bas.
Mettre les propriétés en retrait avec Définit la valeur de mise en retrait des propriétés au sein d'une règle. Vous pouvez
spécifier des tabulations ou des espaces.
Chaque propriété sur une ligne séparée Place chaque propriété au sein d'une règle sur une ligne séparée.
Accolade d’ouverture sur une ligne séparée Place l'accolade d'ouverture pour une règle sur une ligne séparée de celle
du sélecteur.
Seulement si plusieurs propriétés Place les règles à une seule propriété sur la même ligne que le sélecteur.
Tous les sélecteurs d’une règle sur la même ligne Place tous les sélecteurs d’une règle sur la même ligne.
Ligne vierge pour séparer les règles Insère une ligne vierge entre chaque règle.
5 Cliquez sur OK.
Remarque : Le formatage de code CSS hérite également de la préférence Type de saut de ligne que vous avez définie dans
la catégorie Format de code de la boîte de dialogue Préférences.
Formatage manuel du code CSS dans une feuille de style CSS
1 Ouvrez une feuille de style CSS
2 Choisissez Commandes > Appliquer le format source.
Les options de formatage que vous définissez dans les préférences de formatage de code CSS s'appliquent à l'ensemble
du document. Vous ne pouvez pas formater de sélections individuelles.
Formatage manuel du code CSS intégré
1 Ouvrez une page HTML contenant du code CSS intégré dans la section head du document.
2 Sélectionnez une partie quelconque du code CSS.
3 Choisissez Commandes > Appliquer le format source à la sélection.
Les options de formatage que vous définissez dans les préférences de formatage de code CSS s'appliquent uniquement
à l'ensemble des règles CSS de la section Head du document.
Dernière mise à jour le 4/5/2011
153
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
Remarque : Vous pouvez choisir Commandes > Appliquer le format source pour mettre l'ensemble du document en
forme en fonction des préférences de mise en forme de code que vous avez spécifiées.
Désactivation/Activation du code CSS
La fonctionnalité Désactiver/Activer la propriété CSS permet de mettre en commentaire des parties de code CSS
depuis le panneau Styles CSS, sans devoir apporter directement des modifications dans le code. Lorsque vous mettez
en commentaire certaines parties du code CSS, vous pouvez voir quel effet des propriétés et des valeurs spécifiques ont
sur votre page.
Lorsque vous désactivez une propriété CSS, Dreamweaver ajoute des balises de commentaire CSS et un libellé
[désactivé] à la propriété CSS que vous avez désactivée. Par la suite, vous pouvez aisément réactiver ou supprimer la
propriété CSS désactivée, selon vos préférences.
Vous trouverez, à l'adresse ci-après, une vidéo de l'équipe de conception de Dreamweaver qui présente l'utilisation de
la fonction de désactivation/activation du code CSS : www.adobe.com/go/dwcs5css_fr.
1 Dans le volet Propriétés du panneau Styles CSS (Fenêtre > Styles CSS), sélectionnez la Propriété que vous voulez
désactiver.
2 Cliquez sur l'icône Désactiver/Activer la propriété CSS dans le coin inférieur droit du volet propriétés. Cette icône
s'affiche également si vous laissez le pointeur de la souris sur la gauche de la propriété proprement dite.
Lorsque vous cliquez sur l'icône Désactiver/Activer la propriété CSS, une icône indiquant la désactivation s'affiche
à gauche de la propriété. Pour réactiver la propriété, cliquez sur l'icône Désactivé ou cliquez à l'aide du bouton droit
de la souris (Windows) ou en maintenant la touche Commande enfoncée (Macintosh) sur la propriété, puis
choisissez Activer.
3 (Facultatif) Pour activer ou supprimer toutes les propriétés désactivées d'une règle sélectionnée, cliquez à l'aide du
bouton droit de la souris (Windows) ou en maintenant la touche Commande enfoncée (Macintosh) sur n'importe
quelle règle ou propriété dans laquelle des propriétés sont désactivées, puis choisissez Activer tous les éléments
désactivés de la règle sélectionnée ou Supprimer tous les éléments désactivés de la règle sélectionnée.
Inspection de CSS en mode En direct
Le mode Inspection s'associe au mode En direct afin de vous aider à identifier rapidement les éléments HTML et les
styles CSS qui y sont associés. Lorsque le mode Inspection est activé, vous pouvez survoler des éléments de votre page
afin d'afficher les attributs de modèle de boîte CSS de n'importe quel élément de niveau bloc.
Remarque : Pour plus d'informations sur le modèle de boîte CSS, consultez la spécification CSS 2.1 (en anglais).
Le mode Inspection permet d'obtenir une représentation visuelle du modèle de boîte. Vous pouvez en outre utiliser le
panneau Styles CSS pendant le survol d'éléments dans la fenêtre Document. Lorsque le panneau Styles CSS est ouvert
en mode Actuel et que vous survolez un élément de la page, les règles et propriétés du panneau Styles CSS sont
automatiquement mises à jour, de façon à montrer les règles et propriétés de cet élément. En outre, les modes et
panneaux associés à l'élément que vous survolez sont également mis à jour (par exemple le mode Code, le sélecteur de
balises, l'inspecteur Propriétés, etc.).
Vous trouverez, à l'adresse ci-après, une vidéo de l'équipe de conception de Dreamweaver qui présente l'utilisation du
mode Inspection : http://www.adobe.com/go/dwcs5inspect_fr.
1 Lorsque le document est ouvert dans la fenêtre Document, cliquez sur le bouton Inspecter (à côté du bouton Mode
en direct dans la barre d'outils Document).
Remarque : Si vous n'êtes pas déjà en mode En direct, le mode Inspection l'active automatiquement.
Dernière mise à jour le 4/5/2011
154
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
2 Survolez des éléments de la page afin d'afficher le modèle de boîte CSS. Le mode Inspection utilise des couleurs de
surbrillance différentes pour la bordure, la marge, la marge intérieure et le contenu.
3 (Facultatif) Appuyez sur la flèche vers la gauche, sur votre clavier, afin de mettre en surbrillance le parent de
l'élément actuellement en surbrillance. Appuyez sur la flèche vers la droite pour rétablir la mise en surbrillance de
l'élément enfant.
4 (Facultatif) Cliquez sur un élément pour verrouiller la sélection en surbrillance.
Remarque : Si vous cliquez sur un élément afin de verrouiller la sélection en surbrillance, le mode Inspection est
désactivé.
Voir aussi
« Prévisualisation de pages dans Dreamweaver » à la page 299
« Panneau Styles CSS » à la page 134
Vérification de problèmes de restitution CSS entre les navigateurs
Les fonctions de vérification de la compatibilité avec les navigateurs vous permettent de rechercher les combinaisons
de HTML et de feuilles de style CSS pouvant présenter des problèmes dans certains navigateurs. Lorsque vous exécutez
une vérification de compatibilité avec les navigateurs sur un fichier ouvert, Dreamweaver analyse le fichier et signale
tous les problèmes de rendu CSS potentiels dans le panneau Résultats. Une estimation de confiance, illustrée par un
quart de cercle, un demi cercle, trois-quarts de cercle ou un cercle plein, indique la probabilité d'occurrence d'un bogue
(un quart de cercle plein indique une occurrence possible et un cercle complet plein indique une occurrence très
probable). Pour chaque bogue potentiel détecté, Dreamweaver fournit également un lien direct à la documentation
relative au bogue sur Adobe CSS Advisor, un site Web qui détaille les bogues de rendu de navigateur connus et propose
des solutions pour les corriger.
Par défaut, la fonction de vérification de la compatibilité avec les navigateurs effectue une vérification par rapport aux
navigateurs suivants : Firefox 1.5 ; Internet Explorer (Windows) 6.0 et 7.0 ; Internet Explorer (Macintosh) 5.2 ;
Netscape Navigator 8.0 ; Opera 8.0 et 9.0 ; Safari 2.0.
Cette fonction remplace l'ancienne fonction de vérification du navigateur cible, mais conserve la fonctionnalité CSS
de cette fonction. Cela signifie que la nouvelle fonction de vérification de compatibilité avec les navigateurs teste le
code de vos documents et détermine s'il contient des propriétés ou des valeurs CSS non prises en charge par les
navigateurs cibles.
Trois niveaux de problèmes potentiels de prise en charge de navigateur peuvent se présenter :
• Une erreur signale du code CSS pouvant causer un problème grave et visible au niveau du fonctionnement de
certains navigateurs, par exemple, en faisant disparaître une partie d'une page (une erreur désigne par défaut les
problèmes de prise en charge de navigateur, de sorte que dans certains cas, du code ayant un effet inconnu peut être
signalé comme une erreur).
• Un avertissement indique une portion de code CSS qui n'est pas prise en charge dans certains navigateurs, mais
sans pour autant causer de sérieux problème d'affichage.
• Un message d'information indique du code qui n'est pas pris en charge dans certains navigateurs, mais n'a pas
d'effet visible.
Les vérifications de compatibilité avec les navigateurs n'altèrent en rien le document.
Dernière mise à jour le 4/5/2011
155
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
Voir aussi
« Validation des documents XML » à la page 338
CSS Advisor
Exécution d'une vérification de compatibilité avec les navigateurs
❖ Sélectionnez Fichier > Vérifier la page > Compatibilité avec les navigateurs.
Sélection de l'élément affecté par un problème détecté
❖ Double-cliquez sur le problème dans le panneau Résultats.
Accès au problème suivant/précédent détecté dans le code
❖ Dans le menu Vérification de la compatibilité avec les navigateurs de la barre d'outils du document, sélectionnez
Problème suivant ou Problème précédent.
Sélection des navigateurs à faire vérifier par Dreamweaver
1 Dans le panneau Résultats (Fenêtre > Résultats), sélectionnez l'onglet Vérification de la compatibilité avec les
navigateurs.
2 Cliquez sur la flèche verte dans le coin supérieur gauche du panneau Résultats, puis choisissez Paramètres.
3 Sélectionnez la case à cocher située en regard des navigateurs à vérifier.
4 Dans le menu déroulant correspondant aux navigateurs sélectionnés, vous devez indiquer la version minimale
devant être vérifiée.
Par exemple, pour vérifier si la restitution CSS peut s'afficher dans Internet Explorer 5.0 et versions ultérieures et dans
Netscape Navigator 7.0 et versions ultérieures, cochez les cases correspondant aux noms de ces navigateurs, puis
sélectionnez 5.0 dans le menu déroulant Internet Explorer et 7.0 dans le menu déroulant Netscape.
Exclusion d'un problème de la vérification de compatibilité avec les navigateurs
1 Exécutez une vérification de compatibilité avec les navigateurs.
2 Dans le panneau Résultats, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfoncée (Macintosh) sur le problème que vous souhaitez exclure des vérifications futures.
3 Cliquez sur Ignorer le problème dans le menu contextuel.
Modification de la liste des problèmes ignorés
1 Dans le panneau Résultats (Fenêtre > Résultats), sélectionnez l'onglet Vérification de la compatibilité avec les
navigateurs.
2 Cliquez sur la flèche verte dans le coin supérieur gauche du panneau Résultats, puis choisissez Modifier la liste des
problèmes ignorés.
3 Dans le fichier Exceptions.xml, recherchez le problème que vous souhaitez supprimer de la liste des problèmes
ignorés et supprimez-le.
4 Enregistrez et fermez le fichier Exceptions.xml.
Sauvegarde d'un rapport de vérification de compatibilité avec les navigateurs
1 Exécutez une vérification de compatibilité avec les navigateurs.
2 Cliquez sur le bouton Enregistrer le rapport dans le côté gauche du panneau Résultats.
Dernière mise à jour le 4/5/2011
156
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
Amenez le pointeur de la souris sur les boutons du panneau Résultats pour afficher les info-bulles relatives à chaque
bouton.
Remarque : Les rapports ne sont pas enregistrés automatiquement ; si vous souhaitez conserver une copie d'un rapport,
vous devez suivre la procédure ci-dessus pour l'enregistrer.
Affichage d'un rapport de vérification de compatibilité avec les navigateurs dans un
navigateur
1 Exécutez une vérification de compatibilité avec les navigateurs.
2 Cliquez sur le bouton Parcourir le rapport dans le côté gauche du panneau Résultats.
Amenez le pointeur de la souris sur les boutons du panneau Résultats pour afficher les info-bulles relatives à chaque
bouton.
Ouverture du site Web Adobe CSS Advisor
1 Dans le panneau Résultats (Fenêtre > Résultats), sélectionnez l'onglet Vérification de la compatibilité avec les
navigateurs.
2 Cliquez sur le texte du lien situé dans l'angle inférieur droit du panneau.
Utilisation des feuilles de style à la conception
Les feuilles de style à la conception permettent d'afficher ou de masquer la conception appliquée par une feuille de style
CSS lorsque vous travaillez dans un document Dreamweaver. Vous pouvez par exemple utiliser cette fonction pour
inclure ou exclure l'effet d'une feuille de style Macintosh ou Windows pendant la création d'une page.
Les feuilles de style à la conception s'appliquent uniquement lorsque vous travaillez dans un document ; lorsque la page
est affichée dans une fenêtre de navigateur, seuls les styles réellement attachés au document ou qui y sont incorporés
apparaissent.
Remarque : Vous pouvez également activer ou désactiver des styles pour l'ensemble d'une page à l'aide de la barre d'outils
Rendu du style. Pour afficher la barre d'outils standard, choisissez Affichage > Barres d'outils > Rendu de style. Le bouton
Intervertir l'affichage des Styles CSS (le plus à droite) fonctionne indépendamment des autres boutons de support de la
barre d'outils.
Pour utiliser une feuille de style à la conception, procédez comme suit.
1 Ouvrez la boîte de dialogue Feuilles de style à la conception en procédant de l'une des manières suivantes :
• Cliquez avec le bouton droit de la souris dans le panneau Styles CSS et choisissez Conception dans le menu
contextuel.
• Choisissez Format > Styles CSS > Conception.
2 Dans la boîte de dialogue, définissez les options d'affichage ou de masquage de la feuille de style sélectionnée :
• Pour afficher une feuille de style CSS à la conception, cliquez sur le bouton plus (+) situé au-dessus d'Afficher à la
conception uniquement, puis recherchez la feuille de style CSS à afficher dans la boîte de dialogue Sélectionner une
feuille de style.
• Pour masquer une feuille de style CSS, cliquez sur le bouton plus (+) situé au-dessus de Masquer à la conception,
puis recherchez la feuille de style CSS à masquer dans la boîte de dialogue Sélectionner une feuille de style.
• Pour supprimer une feuille de style de l'une ou l'autre des listes, cliquez sur la feuille de style que vous voulez
supprimer, puis cliquez sur le bouton moins (–) approprié.
3 Cliquez sur OK pour fermer la boîte de dialogue.
Dernière mise à jour le 4/5/2011
157
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
Le panneau Styles CSS est actualisé avec le nom de la feuille de style sélectionnée ainsi qu'un indicateur, « masqué » ou
« concevoir », selon l'état de la feuille de style.
Voir aussi
« Présentation de la barre d'outils Rendu de style » à la page 11
Utilisation des exemples de feuilles de style de Dreamweaver
Dreamweaver est fourni avec des exemples de feuilles de style que vous pouvez appliquer à vos pages ou que vous
pouvez utiliser comme points de départ pour créer vos propres styles.
1 Ouvrez le panneau Styles CSS en procédant de l'une des manières suivantes :
• Choisissez Fenêtre > Styles CSS.
• Appuyez sur les touches Maj+F11.
2 Dans le panneau Styles CSS, cliquez sur le bouton Attacher une feuille de style. (Dans le coin inférieur droit du
panneau.)
3 Dans la boîte de dialogue Ajouter une feuille de style externe, cliquez sur Exemples de feuilles de style.
4 Dans la boîte de dialogue Exemples de feuilles de style, sélectionnez une feuille de style dans la liste déroulante.
Lorsque vous sélectionnez des feuilles de style dans la zone de liste, le formatage du texte et des couleurs s'affiche dans
le panneau d'aperçu.
5 Cliquez sur le bouton Aperçu pour appliquer la feuille de style et vérifier que le style de votre choix est bien appliqué
à la page active.
Si les styles appliqués ne sont pas ceux que vous escomptiez, sélectionnez une autre feuille de style dans la liste et
cliquez sur le bouton Aperçu pour visualiser les styles correspondants.
6 Par défaut, Dreamweaver enregistre la feuille de style dans un dossier nommé CSS au niveau juste en dessous de la
racine du site défini pour votre page. Si ce dossier n'existe pas, Dreamweaver le crée. Vous pouvez enregistrer le
fichier dans un autre emplacement en cliquant sur le bouton Parcourir pour rechercher un autre dossier.
7 Lorsque vous trouvez une feuille de style dont les règles correspondent à vos critères, cliquez sur OK.
Mise à jour des feuilles de style CSS dans un site Contribute
Les utilisateurs d'Adobe Contribute ne peuvent pas apporter de modifications à une feuille de style CSS. Pour modifier
une feuille de style pour un site Contribute, utilisez Dreamweaver.
1 Utilisez les outils de modification de feuille de style présents dans Dreamweaver pour modifier les feuilles de style.
2 Avertissez les utilisateurs de Contribute qui travaillent à la publication des pages que vous utilisez une feuille de
style définie. Modifiez ensuite à nouveau ces pages pour voir la nouvelle feuille de style.
Les facteurs suivants doivent être pris en compte lors de la mise à jour de feuilles de style pour un site Contribute :
• Si vous apportez des modifications à une feuille de style alors qu'un utilisateur de Contribute modifie une page qui
utilise cette feuille de style, l'utilisateur ne pourra pas observer les changements apportés à la feuille de style tant que
la page ne sera pas publiée.
• Si vous supprimez un style d'une feuille de style, le nom du style en question n'est pas supprimé des pages qui
utilisent cette feuille, mais, puisque le style n'existe plus, il n'est pas appliqué à la page comme l'utilisateur de
Contribute pourrait s'y attendre. Ainsi, si un utilisateur vous déclare que rien ne se passe lorsque celui-ci applique
un style donné, il est possible que le style ait été supprimé de la feuille de style.
Dernière mise à jour le 4/5/2011
158
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
Mise en forme des pages avec CSS
A propos de la mise en page CSS
Une mise en page CSS utilise le format de feuilles de style CSS, au lieu de tables ou de cadres HTML traditionnels, pour
organiser le contenu d'une page Web. Les éléments de base de la mise en forme CSS est la balise div : il s'agit d'une
balise HTML qui, la plupart du temps, sert de conteneur pour du texte, des images et d'autres éléments de page.
Lorsque vous créez une mise en forme CSS, vous placez des balises div dans la page, leur ajoutez du contenu et les
positionnez en différents endroits. A la différence des cellules de tableau, qui ne peuvent exister qu'à l'intérieur de
lignes et de colonnes d'un tableau, les balises div peut figurer n'importe où sur une page Web. Vous pouvez positionner
des balises div de façon absolue (en indiquant des coordonnées x et y) ou de façon relative (en spécifiant leur distance
par rapport à d'autres éléments de page). Vous pouvez également placer des balises div afin de définir des éléments
flottants, des marges intérieurs et des marges. Cette méthode est privilégiée dans les normes Web modernes.
La création de mises en forme CSS entièrement nouvelles peut s'avérer difficile car il existe de très nombreux moyens
de procéder. Vous pouvez créer une mise en forme CSS simple à deux colonnes en définissant des éléments flottants,
des marges, des remplissages et d'autres propriétés CSS dans un nombre de combinaisons quasi illimité. En outre, le
problème de restitution sur différents types de navigateurs entraîne un affichage aléatoire de certaines mises en forme
CSS qui sont correctement ou incorrectement restituées en fonction du navigateur utilisé. Dreamweaver vous permet
de créer facilement des pages à l'aide de mises en forme CSS en fournissant 16 mises en forme prédéfinies qui
fonctionnent sur différents types de navigateurs.
L'utilisation de mises en forme CSS prédéfinies fournies avec Dreamweaver constitue la façon la plus simple de créer
une page avec une mise en forme, mais vous pouvez également créer des mises en forme CSS à l'aide d'éléments à
positionnement absolu (éléments PA) de Dreamweaver. Dans Dreamweaver, un élément PA est un élément de page
HTML (plus précisément, une balise div ou toute autre balise) auquel une position absolue est attribuée. Toutefois,
du fait de leur positionnement absolu, les éléments PA de Dreamweaver présentent l'inconvénient de ne jamais adapter
leur position à la page en fonction de la taille de la fenêtre du navigateur.
Si vous êtes un utilisateur chevronné, vous pouvez également insérer des balises div manuellement et leur appliquer
des styles de positionnement CSS pour créer des mises en page.
Pour plus d'informations sur les différents types de mises en forme CSS, consultez l'article suivant de Gary White :
Layout 101 (en anglais).
Vous trouverez un didacticiel sur la création de mises en page CSS et l'utilisation d'autres améliorations de CSS à
l'adresse www.adobe.com/go/learn_dw_comm05_fr.
A propos de la structure de mise en page CSS
Avant de lire cette section, vous devez vous être familiarisé avec les concepts CSS de base.
Les éléments de base de la mise en forme CSS est la balise div : il s'agit d'une balise HTML qui, la plupart du temps, sert
de conteneur pour du texte, des images et d'autres éléments de page. L'exemple ci-dessous montre une page HTML qui
contient trois balises div distinctes : une balise container de grande taille, et deux autres balises (une balise sidebar et
une balise main content) situées à l'intérieur de la balise container.
Dernière mise à jour le 4/5/2011
159
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
B
A
C
A. Div Container B. Div sidebar C. Div Main Content
Voici le code correspondant à ces trois balises div dans le code HTML :
<!--container div tag-->
<div id="container">
<!--sidebar div tag-->
<div id="sidebar">
<h3>Sidebar Content</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>
</div>
<!--mainContent div tag-->
<div id="mainContent">
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo
convallis luctus rutrum.</p>
<p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo
pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo
convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p>
</div>
</div>
Dans l'exemple ci-dessus, aucun style n'est associé aux balises div. Si aucune règle CSS n'est définie, chaque balise div
et son contenu prend un emplacement par défaut sur la page. Toutefois, si chaque balise div possède un ID unique
(comme dans l'exemple ci-dessus), vous pouvez utiliser ces identificateurs pour créer des règles CSS qui, une fois
appliquées, modifient le style et le positionnement des balises div.
La règle CSS suivante, qui peut résider dans la section head du document ou dans un fichier CSS externe, crée des règles
de style pour la première balise div (container) de la page :
#container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
La règle #container applique un style à la balise div container qui lui donne une largeur de 780 pixels, un arrière-plan
blanc, aucune marge (depuis la gauche de la page), une bordure noire continue de 1 pixel et un texte aligné à gauche.
Les résultats de l'application de la règle à la balise div container sont les suivants :
Dernière mise à jour le 4/5/2011
160
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
A
B
C
Balise div Container, 780 pixels, pas de marge
A. Texte aligné à gauche B. Arrière-plan blanc C. Bordure noire pleine d'un pixel
La règle CSS suivante crée des règles de style pour la balise div sidebar :
#sidebar {
float: left;
width: 200px;
background: #EBEBEB;
padding: 15px 10px 15px 20px;
}
La règle #sidebar applique un style à la balise div sidebar qui lui donne une largeur de 200 pixels, un arrière-plan gris,
un remplissage haut et bas de 15 pixels, un remplissage droite de 10 pixels et un remplissage gauche de 20 pixels.
L'ordre de remplissage par défaut est le suivant : haut, droite, bas, gauche. En outre, la règle positionne la balise div
sidebar avec float: left, propriété qui pousse la balise div sidebar vers le côté gauche de la balise div container. Les
résultats de l'application de la règle à la balise div sidebar sont les suivants :
A
B
B
Div sidebar, flottante à gache
A. Largeur de 200 pixels B. Remplissage haut et bas de 15 pixels
Enfin, la règle CSS pour la balise div container principale termine la mise en forme :
#mainContent {
margin: 0 0 0 250px;
padding: 0 20px 20px 20px;
}
Dernière mise à jour le 4/5/2011
161
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
La règle #mainContent applique un style à la balise div main qui lui donne une marge gauche de 250 pixels, ce qui
correspond à un espace de 250 pixels entre le côté gauche de la balise div container et le côté gauche de la balise div
main content. En outre, la règle prévoit 20 pixels d'espacement sur les côtés droit, bas et gauche de la balise div main
content. Les résultats de l'application de la règle à la balise div mainContent sont les suivants :
A
B
C
Div main content, marge gauche de 250 pixels
A. remplissage gauche de 20 pixels B. remplissage droit de 20 pixels C. remplissage bas de 20 pixels
Le code complet ressemble à ce qui suit :
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
#sidebar {
float: left;
width: 200px;
background: #EBEBEB;
padding: 15px 10px 15px 20px;
}
#mainContent {
margin: 0 0 0 250px;
padding: 0 20px 20px 20px;
}
</style>
</head>
<body>
<!--container div tag-->
Dernière mise à jour le 4/5/2011
162
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
<div id="container">
<!--sidebar div tag-->
<div id="sidebar">
<h3>Sidebar Content</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>
</div>
<!--mainContent div tag-->
<div id="mainContent">
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo
convallis luctus rutrum.</p>
<p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo
pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo
convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p>
</div>
</div>
</body>
Remarque : L'exemple code ci-dessus est une version simplifiée du code qui crée la mise en forme à deux colonnes avec
encadré à gauche fixe lorsque vous créez un nouveau document à l'aide des mises en formes prédéfinies fournies avec
Dreamweaver.
Voir aussi
« Description des feuilles de style en cascade » à la page 129
Création d'une page avec une mise en forme CSS
Lors de la création d'une nouvelle page dans Dreamweaver, vous pouvez en créer une qui contient déjà une mise en
forme CSS. Dreamweaver vous permet de choisir parmi 16 mises en forme CSS. En outre, vous pouvez créer vos
propres mises en forme CSS et les ajouter au dossier de configuration pour qu'elles figurent parmi les choix de mise en
forme dans la boîte de dialogue Nouveau Document.
Dreamweaver Les mises en page CSS sont restituées correctement dans les navigateurs suivants : Firefox (Windows et
Macintosh) 1.0, 1.5, 2.0 et, and 3.6, Internet Explorer (Windows) 5.5, 6.0, 7.0 et 8.0, Opera (Windows et Macintosh)
8.0, 9.0 et 10.0, Safari 2.0, 3.0 et 4.0 et Chrome 3.0.
Vous trouverez un article expliquant comment utiliser les mises en forme CSS fournies avec Dreamweaver dans le Pôle
de développement Dreamweaver.
D'autres mises en forme CSS sont disponibles sur le site Adobe Dreamweaver Exchange.
Voir aussi
« Création d'une page vierge » à la page 64
« Définition du type et du codage par défaut d'un document » à la page 70
« Etablissement d'un lien vers une feuille de style CSS externe » à la page 150
Création d'une page avec une mise en forme CSS
1 Choisissez Fichier > Nouveau.
Dernière mise à jour le 4/5/2011
163
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
2 Dans la boîte de dialogue Nouveau document, sélectionnez la catégorie Modèle vierge. Il s'agit de la sélection par
défaut.
3 Pour Type de page, sélectionnez le type de page à créer.
Remarque : Vous devez sélectionner un type de page HTML pour la mise en forme. Par exemple, vous pouvez sélectionner
HTML, ColdFusion®, PHP, etc. Vous ne pouvez pas créer de page ActionScript™, CSS, Library Item, JavaScript, XML,
XSLT ou ColdFusion Component avec une mise en forme CSS. Les types de page de la catégorie Autre dans la boîte de
dialogue Nouveau document ne peuvent pas non plus inclure de mises en page CSS.
4 Pour Mise en forme, sélectionnez la mise en forme CSS à utiliser. Vous pouvez choisir parmi 16 mises en forme
différentes. La fenêtre Aperçu montre la mise en forme sélectionnée et en donne une brève description.
Les mises en forme CSS prédéfinies fournissent les types de colonnes suivants :
Fixe La largeur de colonne est définie en pixels. La colonne n'est pas redimensionnée selon la taille du navigateur ou
des paramètres de texte du visiteur du site.
Liquide La largeur de colonne est définie en tant que pourcentage de la largeur du navigateur du visiteur du site. La
mise en page s'adapte si le visiteur du site augmente ou diminue la largeur de son navigateur, mais pas en fonction des
paramètres de texte définis par le visiteur.
5 Sélectionnez un type de document dans le menu DocType.
6 Sélectionnez un emplacement pour le fichier CSS de la mise en forme dans le menu déroulant CSS de mise en forme dans.
Ajouter à l'en-tête Ajoute le code CSS de mise en forme à l'en-tête de la page que vous créez.
Créer un nouveau fichier Ajoute le code CSS de mise en forme à une nouvelle feuille de style CSS externe et associe la
nouvelle feuille de style à la page que vous créez.
Lier au fichier existant Permet d'indiquer un fichier CSS existant qui contient déjà les règles CSS requises pour la mise
en forme. Cette option est particulièrement utile si vous voulez utiliser la même mise en forme CSS (les règles CSS
figurant dans un fichier) dans plusieurs documents.
7 Procédez comme suit, au choix :
• Si vous avez sélectionné Ajouter à l'en-tête dans le menu déroulant CSS de mise en forme dans (l'option par défaut),
cliquez sur Créer.
• Si vous avez sélectionné Créer un nouveau fichier dans le menu déroulant CSS de mise en forme, cliquez sur Créer,
puis spécifiez un nouveau nom pour le nouveau fichier externe dans la boîte de dialogue Enregistrer la feuille de
style sous.
• Si vous avez sélectionné Lier au fichier existant dans le menu déroulant CSS de mise en forme dans, ajoutez le fichier
externe dans la zone de texte Lier le fichier CSS en cliquant sur l'icône d'ajout de feuille de style, en renseignant la
boîte de dialogue Associer feuille de style externe et en cliquant sur OK. Une fois que vous avez terminé, cliquez sur
Créer dans la boîte de dialogue Nouveau document.
Remarque : Lorsque vous sélectionnez l'option Lier au fichier existant, le fichier que vous spécifiez doit déjà contenir les
règles correspondant au fichier CSS.
Lorsque vous placez le CSS de mise en forme dans un nouveau fichier ou lorsque vous le liez à un fichier existant,
Dreamweaver lie immédiatement le fichier à la page HTML que vous créez.
Remarque : Les Commentaires conditionnels pour Internet Explorer, qui permettent de contourner les problèmes de
rendu dans IE, restent incorporés dans la section head du nouveau document de mise en forme CSS, même si vous
sélectionnez Nouveau fichier externe ou Fichier externe existant en tant qu'emplacement pour votre fichier CSS de mise
en forme;
Dernière mise à jour le 4/5/2011
164
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
8 (Facultatif) Vous pouvez également lier des feuilles de style CSS à la nouvelle page (sans rapport avec la mise en
forme CSS) lors de la création de cette page. Pour ce faire, cliquez sur l'icône Ajouter une feuille de style au-dessus
du volet Lier le fichier CSS, puis sélectionnez une feuille de style CSS.
Vous trouverez une description détaillée de ce processus dans l'article de David Powers « Automatically attaching a
style sheet to new documents » (en anglais).
Ajout de mises en forme CSS personnalisées à la liste de choix
1 Créez une page HTML contenant la mise en forme CSS que vous souhaitez ajouter à la liste de choix de la boîte de
dialogue Nouveau document Le fichier CSS correspondant à la mise en forme doit résider dans la section head de
la page HTML.
Pour uniformiser votre mise en forme CSS personnalisée avec les autres mises en formes fournies avec Dreamweaver,
vous devez enregistrer votre fichier HTML avec une extension .htm.
2 Ajoutez la page HTML au dossier Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts.
3 (Facultatif) Ajoutez une image d'aperçu de votre mise en forme (par exemple, un fichier .gif ou .png) au dossier
Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts. Les images par défaut fournies avec Dreamweaver sont
des fichiers PNG de 227 pixels de large x 193 pixels de haut.
Donnez à votre image d'aperçu le même nom de fichier que votre fichier de façon à pouvoir l'identifier facilement. Par
exemple, si votre fichier HTML est nommé myCustomLayout.htm, appelez votre image d'aperçu
myCustomLayout.png.
4 (Facultatif) Créez un fichier de notes pour votre mise en forme personnalisée en ouvrant le dossier Adobe
Dreamweaver CS5\Configuration\BuiltIn\Layouts\_notes, en copiant et en collant les fichiers de notes existants
dans le même dossier, et en renommant la copie en fonction de votre mise en forme personnalisée. Par exemple,
vous pouvez copier le fichier oneColElsCtr.htm.mno et le renommer myCustomLayout.htm.mno.
5 (Facultatif) Après avoir créé un fichier de notes pour votre mise en forme personnalisée, vous pouvez ouvrir le
fichier et spécifier le nom de la mise en forme, sa description et une image d'aperçu.
Utilisation des balises div
Insertion et modification de balises div
Vous pouvez créer des mises en page en insérant manuellement des balises div et en leur appliquant des styles de
positionnement CSS. Une balise div est une balise qui définit les divisions logiques dans le contenu d'une page Web.
Vous pouvez utiliser des balises div pour centrer des blocs de contenu, créer des effets de colonne, créer différentes
zones de couleur, etc.
Si vous ne connaissez pas bien l'utilisation des balises div et des feuilles de style CSS pour créer des pages Web, vous
pouvez créer une mise en forme CSS à partir de l'une des mises en forme prédéfinies fournies avec Dreamweaver. Si
vous n'êtes pas à l'aise dans l'utilisation des feuilles de style CSS, mais que vous connaissez bien l'utilisation des
tableaux, vous pouvez également essayer d'utiliser des tableaux.
Remarque : Dreamweaver considère comme des éléments à positionnement absolu (éléments PA) toutes les balises div,
même si vous n'avez pas créé ces balises div à l'aide de l'outil de dessin Div PA.
Dernière mise à jour le 4/5/2011
165
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
Voir aussi
« A propos des éléments PA dans Dreamweaver » à la page 168
« Création d'une page avec une mise en forme CSS » à la page 162
« Présentation de contenu à l'aide de tableaux » à la page 183
Insertion de balises div
Vous pouvez utiliser des balises div pour créer des blocs de mise en forme CSS et les placer dans votre document. Cette
méthode est utile si une feuille de style CSS existante contenant des styles de positionnement est associée à votre
document. Dreamweaver vous permet d'insérer rapidement une balise div et de lui appliquer des styles existants.
1 Dans la fenêtre de document, placez le point d'insertion à l'endroit où vous voulez insérer la balise div.
2 Effectuez l’une des tâches suivantes :
• Choisissez Insertion > Objets mise en forme > Balise Div.
• Dans la catégorie Mise en forme du panneau Insertion, cliquez sur le bouton Insérer la balise Div
.
3 Parmi les options suivantes, définissez celles de votre choix :
Insérer Permet de choisir l'emplacement de la balise div et le nom de la balise s'il ne s'agit pas d'une nouvelle.
Classe Affiche le style de classe actuellement appliqué à la balise. Si vous avez associé une feuille de style, les classes qui
y sont définies s'affichent dans la liste. Ce menu permet de sélectionner le style à appliquer à la balise.
ID Vous permet de modifier le nom utilisé pour identifier la balise div. Si vous avez associé une feuille de style, les ID
qui y sont définis s'affichent dans la liste. Les ID des blocs déjà présents dans votre document ne sont pas répertoriés.
Remarque : Dreamweaver vous avertit si vous tapez un ID déjà affecté à une autre balise dans votre document.
Nouvelle règle de CSS Ouvre la boîte de dialogue Nouvelle règle CSS.
4 Cliquez sur OK.
La balise div s'affiche dans votre document sous la forme d'une zone contenant du texte d'espace réservé. Lorsque vous
déplacez le pointeur sur le bord de cette zone, Dreamweaver la met en surbrillance.
Si la balise div est placée de manière absolue, elle devient un élément PA. Vous pouvez modifier les balises div qui ne
sont pas à positionnement absolu.
Voir aussi
« A propos des éléments PA dans Dreamweaver » à la page 168
« Création d'une page avec une mise en forme CSS » à la page 162
Modification des balises div
Après avoir inséré une balise div, vous pouvez la manipuler ou lui ajouter du contenu.
Remarque : Les balises div qui sont positionnées de manière absolue deviennent des éléments PA.
Les balises div ont des bordures visibles lorsque vous leur attribuez des bordures ou lorsque vous avez sélectionné
Contours en feuille CSS. (L'option Contours en feuille CSS est sélectionnée par défaut dans le menu Affichage >
Assistances visuelles.) Lorsque vous faites passer le pointeur sur une balise div, Dreamweaver la met en surbrillance.
Vous pouvez modifier la couleur de la mise en surbrillance ou désactiver la mise en surbrillance.
Dernière mise à jour le 4/5/2011
166
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
Lorsque vous sélectionnez une balise div, vous pouvez afficher et modifier les règles correspondantes dans le panneau
Styles CSS. Vous pouvez aussi ajouter du contenu à la balise div : placez simplement le point d'insertion à l'intérieur
de la balise div, puis procédez à l'ajout du contenu comme vous le feriez pour celui d'une page.
Voir aussi
« A propos des éléments PA dans Dreamweaver » à la page 168
« Ouverture du panneau Styles CSS » à la page 137
Affichage et modification des règles appliquées à une balise div
1 Procédez de l'une des manières suivantes pour sélectionner la balise div :
• Cliquez sur la bordure de la balise div.
Recherchez la surbrillance afin de voir les bordures.
• Cliquez à l'intérieur de la balise div et appuyez sur les touches Ctrl+A (Windows) ou Commande+A (Macintosh)
à deux reprises.
• Cliquez à l'intérieur de la balise div, puis sélectionnez-laà partir du sélecteur de balises figurant au bas de la fenêtre
du document.
2 Choisissez Fenêtre > Styles CSS pour afficher le panneau Styles CSS, si besoin est.
Les règles appliquées à la balise div s'affichent dans le panneau.
3 Effectuez les modifications nécessaires.
Placement du point d'insertion dans une balise div afin d'y ajouter du contenu
❖ Cliquez n'importe où à l'intérieur des bordures de la balise.
Modification du texte de l'espace réservé dans une balise div
❖ Sélectionnez le texte, puis tapez un nouveau texte par-dessus ou appuyez sur la touche Suppr.
Remarque : Vous pouvez ajouter du contenu à la balise div exactement comme vous le feriez dans une page.
Modification de la couleur de surbrillance des balises div
Lorsque vous faites passer le pointeur sur le pourtour d'une balise div en mode Création, Dreamweaver met ses
bordures en surbrillance. Vous pouvez activer ou désactiver la surbrillance à votre convenance ou en modifier la
couleur de surbrillance dans la boîte de dialogue Préférences.
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
2 Sélectionnez la catégorie Surbrillance dans la liste de gauche.
3 Effectuez l'une des modifications suivantes, puis cliquez sur OK :
• Pour modifier la couleur de surbrillance des balises div, cliquez dans la case de couleur Survol et sélectionnez une
couleur de surbrillance à l'aide du sélecteur de couleur (ou tapez la valeur hexadécimale correspondant à la couleur
de surbrillance dans la zone de texte).
• Pour activer ou désactiver la surbrillance des balises div, activez ou désactivez la case à cocher Afficher de l'option
Survol.
Remarque : Ces options ont un impact sur tous les objets (tableaux, par exemple) que Dreamweaver met en surbrillance
lorsque vous y déplacez le pointeur.
Dernière mise à jour le 4/5/2011
167
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
Blocs de mise en forme CSS
Visualisation des blocs de mise en forme CSS
Vous pouvez visualiser les blocs de mise en forme CSS pendant que vous travaillez en mode Création. Un bloc de mise
en forme CSS est un élément de page HTML que vous pouvez positionner n'importe où sur votre page. Un bloc de
mise en forme CSS est plus précisément soit une balise div sans display:inline, soit un autre élément de page qui
inclut les déclarations CSS display:block, position:absolute ou position:relative. Les éléments suivants, par
exemple, sont considérés comme des blocs de mise en forme CSS dans Dreamweaver:
• Une balise div
• Une image à laquelle est affectée une position relative ou absolue
• Une balise a à laquelle le style display:block est affecté.
• Un paragraphe auquel une position relative ou absolue est affectée
Remarque : Pour des raisons de rendu visuel, les blocs de mise en forme CSS n'incluent pas d'éléments en ligne (c'est-àdire d'éléments dont le code est défini dans une ligne de texte) ni d'éléments de blocs simples tels que des paragraphes.
Dreamweaver fournit de nombreuses assistances visuelles pour afficher les blocs de mise en forme CSS. Vous pouvez
par exemple activer des contours, des arrière-plans et le modèle de boîte pour les blocs de mise en forme CSS en mode
Création. Vous pouvez aussi afficher des info-bulles qui indiquent les propriétés du bloc de mise en forme CSS
sélectionné lorsque vous placez le pointeur dessus.
La liste suivante d'assistances visuelles de bloc de mise en forme CSS décrit ce que Dreamweaver rend visible pour
chacune d'elles :
Contours en feuille CSS Affiche les contours de tous les blocs de mise en forme CSS sur la page.
Arrière-plans de mise en forme CSS Affiche les couleurs d'arrière-plan affectées temporairement de chaque bloc de mise
en forme CSS et masque toutes les autres couleurs d'arrière-plan ou images qui apparaissent normalement sur la page.
Lorsque vous activez les assistances visuelles pour afficher les arrière-plans de blocs de mise en forme CSS,
Dreamweaver affecte automatiquement une couleur d'arrière-plan distincte à chaque bloc de mise en forme CSS.
((Dreamweaver sélectionne les couleurs à l'aide d'un processus algorithmique. Vous n'avez aucun moyen d'attribuer
vous-même les couleurs.) Les couleurs attribuées sont visuellement différentes et sont conçues pour vous aider à
distinguer les blocs de mise en forme CSS les uns des autres.
Modèle de boîte de mise en forme CSS Affiche le modèle de boîte (remplissages et marges) du bloc de mise en forme
CSS sélectionné.
Affichage des blocs de mise en forme CSS
Vous pouvez activer ou désactiver les assistances visuelles des blocs de calques CSS en fonction des besoins.
Affichage des contours des blocs de mise en forme CSS
❖ Choisissez Affichage > Assistances visuelles > Contours en feuille CSS.
Affichage des arrière-plans de blocs de mise en forme CSS
❖ Choisissez Affichage > Assistances visuelles > Arrière-plans de mise en forme CSS.
Affichage des modèles de boîte de blocs de mise en forme CSS
❖ Choisissez Affichage > Assistances visuelles > Modèle de boîte de mise en forme CSS.
Dernière mise à jour le 4/5/2011
168
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
Pour accéder aux options d'assistances visuelles des blocs de mise en forme CSS, vous pouvez aussi cliquer sur le
bouton Assistances visuelles de la barre d'outils du document.
Utilisation des assistances visuelles avec des éléments de blocs de mise en forme non-CSS
Vous pouvez utiliser une feuille de style à la conception pour afficher les arrière-plans, les bordures ou le modèle de
boîte d'éléments qui ne sont pas normalement considérés comme des blocs de mise en forme CSS. Pour ce faire, vous
devez d'abord créer une feuille de style à la conception qui affecte l'attribut display:block à l'élément de page
approprié.
1 Créez une feuille de style en cascade (CSS) externe. Pour ce faire, choisissez Fichier > Nouveau, puis sélectionnez
Page de base dans la colonne Catégorie et CSS dans la colonne Page de base. Cliquez ensuite sur Créer.
2 Dans la nouvelle feuille de style, créez des règles qui affectent l'attribut display:block aux éléments de page à
afficher en tant que blocs de mise en forme CSS.
Si, par exemple, vous souhaitez appliquer une couleur d'arrière-plan aux paragraphes ou aux éléments de liste, vous
pouvez créer une feuille de style comprenant les règles suivantes :
p{
display:block;
}
li{
display:block;
}
3 Enregistrez le fichier.
4 En mode Création, ouvrez la page à laquelle vous souhaitez associer les nouveaux styles.
5 Choisissez Format > Styles CSS > Conception.
6 Dans la boîte de dialogue Feuilles de style à la conception, cliquez sur le bouton plus (+) situé au-dessus de la zone de
texte Afficher à la conception uniquement, sélectionnez la feuille de style que vous venez de créer et cliquez sur OK.
7 Cliquez sur OK pour fermer la boîte de dialogue Feuilles de style à la conception.
La feuille de style est associée à votre document. Si vous avez créé une feuille de style en suivant l'exemple précédent,
tous les paragraphes et éléments de liste seront formatés au moyen de l'attribut display:block. Vous pouvez ainsi
activer ou désactiver les assistances visuelles de bloc de mise en forme CSS pour les paragraphes et les éléments de liste.
Voir aussi
« Utilisation des feuilles de style à la conception » à la page 156
Utilisation d'éléments PA
A propos des éléments PA dans Dreamweaver
Un élément PA (élément à positionnement absolu) est un élément de page HTML (plus précisément, une balise div
ou toute autre balise) auquel une position absolue est attribuée. Les éléments PA peuvent comporter du texte, des
images ou tout autre contenu à placer au sein d'un document HTML.
Dreamweaver vous permet d'effectuer la mise en forme d'une page à l'aide d'éléments PA. Vous pouvez placer les
éléments PA devant ou derrière d'autres éléments PA, masquer certains d'entre eux et en montrer d'autres ou encore
déplacer les éléments PA à travers l'écran. Vous pouvez placer une image d'arrière-plan dans un élément PA, puis
placer un deuxième élément PA contenant du texte avec un arrière-plan transparent devant ce dernier.
Dernière mise à jour le 4/5/2011
169
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
Les éléments PA sont généralement des balises div PA. (Ce sont les types d'éléments PA que Dreamweaver insère par
défaut.) Mais n'oubliez pas que vous pouvez classifier tout élément HTML (par exemple, une image) en tant
qu'élément PA en lui affectant une position absolue. Tous les éléments PA (et pas uniquement les balises div PA)
s'affichent dans le panneau Eléments PA.
Code HTML pour éléments div PA
Dreamweaver crée des éléments PA en utilisant la balise div. Lorsque vous créez un élément PA à l'aide de l'outil
Tracer un div pour un élément PA, Dreamweaver insère une balise div dans le document et attribue à la balise div une
valeur ID (DivAP1 par défaut au premier div que vous tracez, DivAP2, au deuxième div que vous tracez, etc.). Vous
pouvez renommer la div PA à votre guise par la suite au moyen du panneau Eléments PA ou de l'inspecteur Propriétés.
Dreamweaver utilise également des styles CSS intégrés dans la section head du document pour positionner la balise
div PA et pour lui affecter ses dimensions exactes.
Ce qui suit est un échantillon de code HTML pour une div PA :
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sample AP Div Page</title>
<style type="text/css">
<!-#apDiv1 {
position:absolute;
left:62px;
top:67px;
width:421px;
height:188px;
z-index:1;
}
-->
</style>
</head>
<body>
<div id="apDiv1">
</div>
</body>
</html>
Vous pouvez définir les propriétés des balises div PA (ou tout élément PA) de votre page, y compris les coordonnées
x et y, l'index z (également appelé ordre de superposition) et la visibilité.
Insertion d'une balise div PA
Dreamweaver vous permet de créer facilement des balises div PA sur votre page et de les positionner. Vous pouvez
également créer des balises div PA imbriquées.
Lorsque vous insérez une div PA, Dreamweaver affiche par défaut sa bordure en mode Création et met le bloc en
surbrillance lorsque vous passez le pointeur dessus. Vous pouvez désactiver l'assistance visuelle qui affiche les contours
des divs PA (ou de tout élément PA) en désactivant Contours des éléments PA et Contours en feuille CSS dans le menu
Affichage > Assistances visuelles. Vous pouvez également activer les arrière-plans et le modèle de boîte pour les
éléments PA en guise d'aide visuelle lors de la conception.
Une fois une balise div PA créée, vous pouvez y ajouter du contenu en plaçant simplement votre point d'insertion
dessus, puis en ajoutant le contenu comme vous le feriez pour celui d'une page.
Dernière mise à jour le 4/5/2011
170
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
Voir aussi
« Sélection d'éléments PA » à la page 175
« Modification de la couleur de surbrillance des balises div » à la page 166
« Visualisation des blocs de mise en forme CSS » à la page 167
Traçage d'une seule balise div PA ou de plusieurs balises div PA à la suite
1 Dans la catégorie Mise en forme du panneau Insertion, cliquez sur le bouton Tracer un div pour un élément PA
.
2 Dans la fenêtre de création du document, procédez de l'une des manières suivantes :
• Faites glisser le pointeur pour dessiner une seule div PA.
• Maintenez la touche Ctrl (Windows) ou Commande (Macintosh) enfoncée pour dessiner plusieurs divs PA à la
suite.
Vous pouvez continuer à tracer des divs PA tant que vous n'avez pas relâché les touches Ctrl ou Commande.
Insertion d'une div PA à un endroit précis du document
❖ Placez le point d'insertion dans la fenêtre de document, puis choisissez Insertion > Objets mise en forme > Div PA.
Remarque : La balise associée à la div PA est placée à l'emplacement sur lequel vous avez cliqué dans la fenêtre de
document. Le rendu visuel de la balise div PA est donc susceptible d'affecter les autres éléments de page (le texte par
exemple) qui l'entourent.
Placement du point d'insertion dans une div PA
❖ Cliquez n'importe où à l'intérieur des bordures de la balise div PA.
Le contour de la div PA est en surbrillance et la poignée de sélection apparaît, mais la balise elle-même n'est pas
sélectionnée.
Affichage des bordures d'une div PA
❖ Choisissez Affichage > Assistances visuelles, puis sélectionnez Contours des divs PA ou Contours en feuille CSS.
Remarque : La sélection simultanée des deux options a le même effet.
Masquage des bordures d'une div PA
❖ Choisissez Affichage > Assistances visuelles, puis désélectionnez Contours des divs PA et Contours en feuille CSS.
Utilisation de divs PA imbriquées
Une div PA imbriquée est une balise div PA dont le code est contenu à l'intérieur des balises d'une autre div PA. Par
exemple, le code suivant montre deux div PA qui ne sont pas imbriquées, et deux divs PA qui le sont :
<div id="apDiv1"></div>
<div id="apDiv2"></div>
<div id="apDiv3">
<div id="apDiv4"></div>
</div>
Dernière mise à jour le 4/5/2011
171
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
La représentation graphique de ces deux groupes de balises div PA pourrait ressembler à ce qui suit :
Dans le premier groupe de balises div, une div se trouve au dessus de l'autre dans la page. Dans le deuxième groupe, la
balise div apDiv4 se trouve effectivement à l'intérieur de la balise div apDiv3. (Vous pouvez modifier l'ordre de
superposition des divs PA dans le panneau Eléments PA.)
L'imbrication est souvent utilisée pour regrouper des balises div PA. Une balise div PA imbriquée se déplace avec sa
div PA parent et peut être configurée pour hériter de la visibilité de son parent.
Vous pouvez activer l'option Imbrication si vous voulez que les divs PA que vous dessinez à l'intérieur d'autres div PA
soient automatiquement imbriquées. Pour créer une div PA à l'intérieur ou par dessus une autre div PA, vous devez
aussi désélectionner l'option Empêcher les chevauchements.
Dessin d'une div PA imbriquée
1 Assurez-vous que l'option Empêcher les chevauchements est désélectionnée dans le panneau Eléments PA (Fenêtre
> Eléments PA).
2 Dans la catégorie Mise en forme du panneau Insertion, cliquez sur le bouton Tracer un div pour un élément PA
.
3 Dans la fenêtre de création du document, dessinez une balise div PA à l'intérieur d'une div PA existante en faisant
glisser la souris.
Si l'option Imbrication est désactivée dans les préférences des éléments PA, maintenez la touche Alt (Windows) ou
Option (Macintosh) enfoncée et faites glisser une div PA pour l'imbriquer dans une div PA existante.
Les divs PA imbriquées peuvent s'afficher différemment suivant les navigateurs. Lorsque vous créez des divs PA
imbriquées, contrôlez régulièrement leur affichage dans différents navigateurs au cours du processus de création.
Insertion d'une div PA imbriquée
1 Assurez-vous que l'option Empêcher les chevauchements est désélectionnée.
2 Placez le point d'insertion à l'intérieur d'une div PA existante dans la fenêtre de création du document, puis
choisissez Insertion > Objets mise en forme > Div PA.
Imbrication des balises div PA automatiquement lorsque vous dessinez une div PA à l'intérieur d'une autre
div PA
❖ Sélectionnez l'option Imbrication dans les préférences des éléments PA.
Affichage ou définition des préférences des éléments PA
Utilisez la catégorie Eléments PA dans la boîte de dialogue Préférences pour indiquer les paramètres par défaut des
nouveaux éléments PA créés.
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
Dernière mise à jour le 4/5/2011
172
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
2 Sélectionnez la catégorie Eléments PA dans la liste à gauche, sélectionnez des éléments PA et définissez les
préférences suivantes, puis cliquez sur OK.
Visibilité Détermine si les éléments PA sont visibles par défaut. Les options sont par défaut, hériter, visible et masqué.
Largeur et Hauteur Indiquez une largeur et une hauteur par défaut (en pixels) pour les éléments PA que vous créez à
l'aide du menu Insertion > Objets mise en forme > Div PA.
Couleur d'arrière-plan Spécifie une couleur d’arrière-plan par défaut. Sélectionnez une couleur à l'aide du sélecteur de
couleur.
Image d’arrière-plan Spécifie une image d’arrière-plan par défaut. Cliquez sur Parcourir pour trouver le fichier de
l'image sur votre ordinateur.
Imbrication: Imbriquer en cas de création dans une div PA Indique si une div PA que vous dessinez à partir d'un point
situé dans les limites d'une div PA existante doit être une div PA imbriquée. Maintenez la touche Alt (Windows) ou
Option (Macintosh) enfoncée pour modifier temporairement ce paramètre lorsque vous dessinez une div PA.
Affichage ou définition des propriétés pour un seul élément PA
Lorsque vous sélectionnez un élément PA, l'inspecteur Propriétés affiche les propriétés de cet élément.
1 Sélectionnez un élément PA.
2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), cliquez sur la flèche d'agrandissement située dans le coin
inférieur droit (si l'inspecteur est affiché en mode réduit) pour visualiser l'ensemble des propriétés.
3 Parmi les options suivantes, définissez celles de votre choix :
Elément CSS-P Spécifie un identificateur pour l'élément PA sélectionné. Cet ID identifie l'élément PA dans le panneau
Eléments PA et dans le code JavaScript.
Seuls les caractères alphanumériques sont acceptés ; n'utilisez aucun caractère spécial comme les espaces, les traits
d'union, les barres obliques ou les points. Chaque élément PA doit avoir un ID unique.
Remarque : L'inspecteur Propriétés CSS-P présente les mêmes options pour les éléments à positionnement relatif.
G et S (gauche et haut) Indiquez la position du coin supérieur gauche de l'élément PA par rapport au coin supérieur
gauche de la page, ou de l'élément PA parent s'il est imbriqué.
L et H Indiquez la largeur et la hauteur de l'élément PA.
Remarque : Si le contenu d'un élément PA dépasse la taille indiquée, le bord inférieur de cet élément PA (tel qu'il apparaît
en mode Création dans Dreamweaver) s'étire proportionnellement. (Le bord inférieur ne s'étend pas lorsque l'élément PA
apparaît dans un navigateur, sauf si la propriété Débordement est définie sur Visible).
L'unité par défaut de la position et de la taille est le pixel (px). Vous pouvez également choisir les unités suivantes : pc
(picas), pt (points), in (pouces), mm (millimètres), cm (centimètres) ou% (pourcentage de la valeur équivalente de
l'élément PA parent). Les abréviations doivent suivre la valeur sans espace : par exemple, 3mm.
Index Z Détermine l'index z ou ordre de superposition, de l'élément PA.
Dernière mise à jour le 4/5/2011
173
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
Dans un navigateur, les éléments PA portant les valeurs les plus élevées se superposent aux éléments PA portant les
valeurs moins élevées. Les valeurs peuvent être positives ou négatives. Il est plus facile de modifier l'ordre de
superposition des éléments PA à l'aide du panneau Eléments PA qu'en saisissant des valeurs d'index z spécifiques.
Vis Indique si l'élément PA est initialement visible ou non. Faites votre choix parmi les options suivantes :
• Aucune propriété de visibilité n'est définie par défaut. Lorsque aucune visibilité n'est précisée, la plupart des
navigateurs choisissent Hériter.
• L'option Hériter utilise la propriété de visibilité de l'objet parent de l'élément PA.
• Visible affiche le contenu de l'élément PA, quelle que soit la valeur du parent.
• Masqué dissimule le contenu de l'élément PA, quelle que soit la valeur du parent.
Utilisez un langage de script, par exemple JavaScript, pour contrôler la propriété de visibilité et afficher le contenu
des éléments PA de façon dynamique.
Image ar-pl Spécifie une image d'arrière-plan pour l'élément PA.
Cliquez sur l'icône du dossier à parcourir et sélectionnez un fichier d'image.
Couleur d'ar-pl. Spécifie une couleur d'arrière-plan pour l'élément PA.
Laissez cette option vide pour spécifier un arrière-plan transparent.
Classe Indique la classe CSS utilisée pour créer l'élément PA.
Débordement Contrôle la manière dont les éléments PA apparaissent dans un navigateur lorsque le contenu dépasse
la taille spécifiée de l'élément PA.
Visible indique que le contenu supplémentaire apparaîtra dans l'élément PA ; en fait, l'élément PA s'agrandit
proportionnellement. Masqué signifie que le contenu supplémentaire ne sera pas affiché dans le navigateur.
Défilement indique que le navigateur devra ajouter des barres de défilement dans l'élément PA, qu'elles soient
nécessaires ou non. Auto entraîne l'affichage des barres de défilement de l'élément PA dans le navigateur uniquement
lorsque cela est nécessaire (c'est-à-dire lorsque le contenu de l'élément PA dépasse ses limites).
Remarque : La prise en charge de l'option Débordement est inégale suivant les navigateurs.
Détourage Définit la zone visible de l'élément PA.
Indiquez les coordonnées gauche, haut, droite et bas pour définir un rectangle dans le champ des coordonnées de
l'élément PA (en partant du coin supérieur gauche de l'élément PA). L'élément PA est « détouré » afin que seul le
rectangle spécifié soit visible. Par exemple, pour rendre le contenu d'un élément PA invisible à l'exception d'un
rectangle visible d'une largeur de 50 pixels et d'une hauteur de 75 pixels dans le coin supérieur gauche de l'élément PA,
définissez G sur 0, S sur 0, D sur 50 et B sur 75.
Remarque : Bien que les feuilles de style en cascade utilisent des termes différents pour le détourage, Dreamweaver
interprète le détourage de la même manière que la plupart des navigateurs.
4 Si vous avez tapé une valeur dans une zone de texte, appuyez sur Tab ou Entrée (Windows) ou Retour (Macintosh)
pour l'appliquer.
Affichage ou définition des propriétés pour plusieurs éléments PA
Lorsque vous sélectionnez plusieurs éléments PA, l'inspecteur Propriétés affiche les propriétés du texte et un sousensemble de propriétés d'élément PA standard, ce qui vous permet de modifier plusieurs éléments PA simultanément.
Sélection de plusieurs éléments PA
❖ Sélectionnez les éléments PA tout en maintenant la touche Maj enfoncée.
Dernière mise à jour le 4/5/2011
174
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
Affichage et définition des propriétés pour plusieurs éléments PA
1 Sélectionnez plusieurs éléments PA.
2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), cliquez sur la flèche d'agrandissement située dans le coin
inférieur droit (si l'inspecteur est affiché en mode réduit) pour visualiser l'ensemble des propriétés.
3 Définissez les propriétés suivantes pour plusieurs éléments PA :
G et S (gauche et haut) Indiquez la position du coin supérieur gauche des éléments PA par rapport au coin supérieur
gauche de la page, ou de l'élément PA parent s'ils sont imbriqués.
L et H Indiquez la largeur et la hauteur des éléments PA.
Remarque : Si le contenu de l'un des éléments PA dépasse la taille indiquée, le bord inférieur de cet élément PA (tel qu'il
apparaît en mode Création dans Dreamweaver) s'étire proportionnellement. (Le bord inférieur ne s'étend pas lorsque
l'élément PA apparaît dans un navigateur, sauf si la propriété Débordement est définie sur Visible).
L'unité par défaut de la position et de la taille est le pixel (px). Vous pouvez également choisir les unités suivantes : pc
(picas), pt (points), in (pouces), mm (millimètres), cm (centimètres) ou% (pourcentage de la valeur équivalente de
l'élément PA parent). Les abréviations doivent suivre la valeur sans espace : par exemple, 3mm.
Vis Indique si les éléments PA sont initialement visibles ou non. Faites votre choix parmi les options suivantes :
• Aucune propriété de visibilité n'est définie par défaut. Lorsque aucune visibilité n'est précisée, la plupart des
navigateurs choisissent Hériter.
• L'option Hériter utilise la propriété de visibilité de l'objet parent des éléments PA.
• Visible affiche le contenu des éléments PA, quelle que soit la valeur du parent.
• Masqué dissimule le contenu de l'élément PA, quelle que soit la valeur du parent.
Utilisez un langage de script, par exemple JavaScript, pour contrôler la propriété de visibilité et afficher le contenu
des éléments PA de façon dynamique.
Balise Indique la balise HTML utilisée pour définir les éléments PA.
Image ar-pl Spécifie une image d'arrière-plan pour les éléments PA.
Cliquez sur l'icône du dossier à parcourir et sélectionnez un fichier d'image.
Couleur d'ar-pl. Spécifie une couleur d'arrière-plan pour les éléments PA. Laissez cette option vide pour spécifier un
arrière-plan transparent.
4 Si vous avez tapé une valeur dans une zone de texte, appuyez sur Tab ou Entrée (Windows) ou Retour (Macintosh)
pour l'appliquer.
Présentation du panneau Eléments PA
Le panneau Eléments PA (Fenêtre > Eléments PA) vous permet de gérer les éléments PA de votre document. Utilisez
le panneau Eléments PA pour empêcher les éléments PA de se chevaucher, pour en modifier la visibilité, pour les
imbriquer ou les superposer et pour en sélectionner un ou plusieurs.
Dernière mise à jour le 4/5/2011
175
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
Remarque : Dans Dreamweaver, un élément PA est un élément de page HTML (plus précisément, une balise div ou toute
autre balise) auquel une position absolue est attribuée. Le panneau Eléments PA n'affiche pas les éléments à
positionnement relatif.
Les éléments PA sont affichés sous la forme d'une liste de noms, dans l'ordre de l'index z ; le premier élément PA créé
(doté d'un index z de 1) apparaît par défaut en bas de la liste et le dernier élément PA créé apparaît en haut de la liste.
Vous pouvez toutefois modifier l'index z d'un élément PA en changeant sa place dans l'ordre de superposition. Par
exemple, si vous créez huit éléments PA et souhaitez déplacer le quatrième élément PA en haut de la liste, vous pouvez
lui affecter un index z supérieur à celui des autres éléments PA.
Sélection d'éléments PA
Vous pouvez sélectionner un ou plusieurs éléments PA pour les manipuler ou en modifier les propriétés.
Sélection d'un élément PA dans le panneau Eléments PA
❖ Dans le panneau Eléments PA (Fenêtre > Eléments PA), cliquez sur le nom de l'élément PA.
Sélection d'un élément PA dans la fenêtre de document
❖ Effectuez l’une des tâches suivantes :
• Cliquez sur la poignée de sélection d'un élément PA.
Si la poignée n'est pas visible, cliquez n'importe où dans l'élément PA pour la faire apparaître.
• Cliquez sur une bordure d'un élément PA.
• Cliquez à l'intérieur d'un élément PA en appuyant sur les touches Ctrl et Maj (Windows) ou Commande et Maj
(Macintosh).
• Pour sélectionner le contenu d'un élément PA, cliquez à l'intérieur de celui-ci et appuyez sur les touches Ctrl+A
(Windows) ou Commande+A (Macintosh). Appuyez à nouveau sur Ctrl+A ou Commande+A pour sélectionner
l'élément PA.
• Cliquez à l'intérieur d'un élément PA et sélectionnez sa balise dans le sélecteur de balises.
Sélection de plusieurs éléments PA
❖ Effectuez l’une des tâches suivantes :
• Dans le panneau Eléments PA (Fenêtre > Eléments PA), appuyez sur la touche Maj tout en cliquant sur le nom de
deux éléments PA ou plus.
• Dans la fenêtre de document, appuyez sur la touche Maj tout en cliquant à l'intérieur d'un ou de plusieurs éléments
PA ou sur leur bordure.
Modification de l'ordre de superposition des éléments PA
Utilisez l'inspecteur Propriétés ou le panneau Eléments PA pour modifier l'ordre de superposition des éléments PA.
L'élément PA situé en haut de la liste du panneau Calques Eléments PA se trouve au premier rang de l'ordre de
superposition et apparaît avant les autres éléments PA.
En code HTML, l'ordre de superposition, ou index z, des éléments PA détermine l'ordre dans lequel ils sont dessinés
dans un navigateur. Plus l'index z d'un élément PA est élevé, et plus sa position dans l'ordre de superposition est élevée.
(Par exemple, un élément avec un index z de 4 apparaîtra au-dessus d'un élément avec un index z de 3. 1 est toujours
le numéro le plus bas dans l'ordre d'empilement.) Vous pouvez modifier l'index z de chaque élément PA à l'aide du
panneau Eléments PA ou de l'inspecteur Propriétés.
Dernière mise à jour le 4/5/2011
176
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
Modification de l'ordre de superposition des éléments PA à l'aide du panneau Eléments PA
1 Sélectionnez Fenêtre > Eléments PA pour ouvrir le panneau Eléments PA.
2 Double-cliquez sur le numéro d'index z en regard de l'élément PA dont vous souhaitez modifier l'index z.
3 Modifiez le numéro puis appuyez sur la touche Retour/Entrée.
• Tapez une valeur supérieure afin de déplacer l'élément PA vers le haut dans l'ordre de superposition.
• Tapez une valeur inférieure afin de déplacer l'élément PA vers le bas dans l'ordre de superposition.
Modification de l'ordre de superposition des éléments PA à l'aide de l'inspecteur Propriétés
1 Choisissez Fenêtre > Eléments PA pour ouvrir le panneau Eléments PA et visualiser l'ordre de superposition en
cours.
2 Dans le panneau Eléments PA ou dans la fenêtre de document, sélectionnez l'élément PA dont vous souhaitez
modifier l'index z.
3 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), tapez un nombre dans la zone de texte Index Z.
• Tapez une valeur supérieure afin de déplacer l'élément PA vers le haut dans l'ordre de superposition.
• Tapez une valeur inférieure afin de déplacer l'élément PA vers le bas dans l'ordre de superposition.
Affichage et masquage des éléments PA
Lorsque vous travaillez sur votre document, vous pouvez afficher ou masquer les éléments PA manuellement, à l'aide
du panneau Eléments PA, pour voir comment la page apparaîtra dans différentes situations.
Remarque : L'élément PA actuellement sélectionné devient toujours visible et apparaît devant les autres éléments PA.
Modification de la visibilité d'un élément PA
1 Sélectionnez Fenêtre > Eléments PA pour ouvrir le panneau Eléments PA.
2 Cliquez dans la colonne de l'icône en forme d'oeil pour changer la visibilité d'un élément PA.
• Un oeil ouvert signifie que l'élément PA est visible.
• Un oeil fermé signifie que l'élément PA est invisible.
• Si l'icône de l'oeil n'apparaît pas, l'élément PA hérite de la visibilité de son parent (lorsque les éléments PA ne sont
pas imbriqués, le parent correspond au corps du document, qui est toujours visible).
Aucune icône en forme d'oeil ne s'affiche lorsque la visibilité n'est pas indiquée (apparaît dans l'inspecteur Propriétés
comme Visibilité par défaut).
Modification de la visibilité de tous les éléments PA à la fois
❖ Dans le panneau Eléments PA (Fenêtre > Calques), cliquez sur l'icône en forme d'œil en haut de la colonne.
Remarque : Cette procédure permet de définir la visibilité ou la non-visibilité de tous les éléments PA, mais elle ne leur
permet pas d'hériter.
Redimensionnement des éléments PA
Vous pouvez redimensionner un seul ou plusieurs éléments PA à la fois pour qu'ils aient tous la même largeur et la
même hauteur.
Si l'option Empêcher le chevauchement est activée, vous ne pourrez pas redimensionner un élément PA s'il doit pour
cela en chevaucher un autre.
Dernière mise à jour le 4/5/2011
177
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
Voir aussi
« Utilisation de la grille de mise en forme » à la page 182
Redimensionnement d'un élément PA
1 En mode Création, sélectionnez un élément PA.
2 Pour redimensionner l'élément PA, procédez de l'une des manières suivantes :
• Pour redimensionner l'élément PA en le faisant glisser, faites glisser l'une de ses poignées.
• Pour redimensionner l'élément PA par incréments d'un pixel, maintenez la touche Ctrl (Windows) ou Option
(Macintosh) enfoncée tout en utilisant les touches fléchées.
Les flèches déplacent les bords droit et inférieur de l'élément PA ; cette technique ne permet pas de redimensionner
l'élément PA en utilisant les bords supérieur et gauche.
• Pour redimensionner en alignant sur la grille, appuyez sur Maj-Ctrl-flèche (Windows) ou Maj-Option-flèche
(Macintosh).
• Dans l'inspecteur Propriétés (Fenêtre > Propriétés), tapez les valeurs de largeur (L) et de hauteur (H).
Le redimensionnement d'un élément PA en modifie la largeur et la hauteur. Cette action ne définit pas la partie visible
du contenu de l'élément PA. Vous pouvez définir la zone visible d'un élément PA dans les préférences.
Redimensionnement de plusieurs éléments PA à la fois
1 En mode Création, sélectionnez au moins deux éléments PA.
2 Effectuez l’une des tâches suivantes :
• Choisissez Modifier > Réorganiser > Même largeur ou Modifier > Réorganiser > Même hauteur.
Les premiers éléments PA sélectionnés prendront la largeur ou la hauteur du dernier sélectionné.
• Dans l'inspecteur Propriétés (Fenêtre > Propriétés), sous Plusieurs éléments CSS-P, tapez les valeurs de largeur et
de hauteur.
Ces valeurs sont appliquées à tous les éléments PA sélectionnés.
Déplacement des éléments PA
Vous pouvez déplacer les éléments PA en mode Création de la même manière que les objets dans la plupart des
applications graphiques de base.
Si l'option Empêcher le chevauchement est activée, vous ne pourrez pas déplacer un élément PA s'il doit pour cela en
chevaucher un autre.
1 En mode Création, sélectionnez un ou plusieurs éléments PA.
2 Effectuez l’une des tâches suivantes :
• Pour déplacer des éléments PA en les faisant glisser, sélectionnez-les et faites glisser la poignée de sélection du
dernier élément PA sélectionné (en surbrillance noire).
• Pour déplacer l'image par incréments d'un pixel, utilisez les touches fléchées.
Maintenez la touche Maj enfoncée tout en appuyant sur les touches fléchées pour déplacer l'élément PA par incréments
de la grille.
Voir aussi
« Utilisation de la grille de mise en forme » à la page 182
Dernière mise à jour le 4/5/2011
178
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
Alignement des éléments PA
Utilisez les commandes d'alignement pour aligner un ou plusieurs éléments PA sur l'un des bords du dernier élément
PA sélectionné.
Lors de l'alignement, les éléments PA enfants qui ne sont pas sélectionnés seront déplacés en même temps que leur
parent, si celui-ci est sélectionné et déplacé. Pour éviter ce déplacement, n'utilisez pas d'éléments PA imbriqués.
1 En mode Création, sélectionnez un élément PA.
2 Choisissez Modifier > Réorganiser, puis sélectionnez une option d'alignement.
Par exemple, si vous sélectionnez Haut, tous les éléments PA se déplacent de façon telle que leurs bordures supérieures
sont au même niveau que celle du dernier élément PA sélectionné (en surbrillance noire).
Conversion des éléments PA en tableau
Au lieu d'utiliser des tableaux pour créer une mise en forme, certains concepteurs de sites Web préfèrent utiliser des
éléments PA. Dreamweaver vous permet de créer votre mise en forme à l'aide d'éléments PA, puis, si vous le souhaitez,
de les convertir en tableaux. Par exemple, il peut être nécessaire de convertir les éléments PA en tableaux pour pouvoir
prendre en charge les navigateurs antérieurs à la version 4.0. La conversion des éléments PA en tableaux est toutefois
déconseillée parce qu'elle peut générer des tableaux contenant un grand nombre de cellules vides, sans parler les
problèmes de code pléthorique. Si vous avez besoin d'une mise en page utilisant des tableaux, il est préférable de la
créer à l'aide des outils standard de mise en forme des tableaux disponibles dans Dreamweaver.
Vous pouvez aussi passer des éléments PA aux tableaux, et vice-versa, pour peaufiner la mise en forme et optimiser la
présentation de la page. (Toutefois, lorsque vous reconvertissez un tableau en éléments PA, Dreamweaver convertit le
tableau en balises div PA, quel que soit le type de l'élément PA qui se trouvait dans la page avant d'être converti en
tableau.) Vous ne pouvez pas convertir un tableau ou un éléments PA spécifique figurant sur une page. Il n'est possible
de convertir des éléments PA en tableaux, et des tableaux en divs PA que pour la totalité d'une page.
Remarque : Il est impossible de convertir des éléments PA en tableaux, ou des tableaux en divs PA, dans un modèle de
document ou dans un document auquel un modèle a été appliqué. Dans ce cas, vous devez créer votre mise en forme dans
un document sans modèle et le convertir avant de l'enregistrer comme modèle.
Conversion des éléments PA en tableaux
Créez votre mise en forme à l'aide d'éléments PA, puis convertissez les éléments PA en tableaux afin que votre mise en
forme puisse s'afficher dans les navigateurs les moins récents.
Avant de convertir vos éléments PA en tableaux, assurez-vous qu'ils ne se chevauchent pas. Veillez en outre à bien être
en mode Standard (Affichage > Mode Tableau > Mode Standard).
Conversion des éléments PA en tableau
1 Sélectionnez Modifier > Convertir > Divs PA en tableau.
2 Parmi les options suivantes, définissez celles de votre choix et cliquez sur OK :
La plus précise Crée une cellule de tableau pour chaque élément PA et ajoute les cellules nécessaires pour préserver
l'espace entre les éléments PA.
La plus petite : Réduit les cellules vides. Indique que les bords des éléments PA doivent être alignés s'ils sont
positionnés dans la limite du nombre de pixels défini.
Si vous choisissez cette option, le tableau que vous obtiendrez aura moins de lignes et de colonnes vides, mais ne
correspondra pas nécessairement exactement à votre mise en forme.
Utiliser les GIF transparents Remplit la dernière ligne du tableau d'images GIF transparentes. Sélectionner cette option
permet d'être sûr que le tableau s'affichera avec les mêmes largeurs de colonne dans tous les navigateurs.
Dernière mise à jour le 4/5/2011
179
UTILISATION DE DREAMWEAVER
Création de pages avec CSS
Lorsque cette option est activée, vous ne pouvez pas modifier le tableau obtenu en faisant glisser ses colonnes. Lorsque
cette option est désactivée, le tableau obtenu ne contient pas les GIF transparents, mais les largeurs des colonnes
peuvent varier suivant le navigateur.
Centrer dans la page Centre le tableau obtenu dans la page. Si cette option est désactivée, le tableau commence sur le
bord gauche de la page.
Conversion des tableaux en divs PA
1 Sélectionnez Modifier > Convertir > Tableaux en divs PA.
2 Parmi les options suivantes, définissez celles de votre choix et cliquez sur OK :
Empêcher le chevauchement des éléments PA Limite la position des éléments PA lorsqu'ils sont créés, déplacés et
redimensionnés, afin d'éviter tout chevauchement.
Afficher le panneau Eléments PA Affiche le panneau Eléments PA.
Afficher la grille et Aligner sur la grille Vous permettent d'utiliser une grille pour faciliter le positionnement des
éléments PA.
Les tableaux sont convertis en divs PA. Les cellules vides ne sont pas converties en éléments PA, sauf si elles possèdent
une couleur d'arrière-plan.
Remarque : Les éléments de la page qui se trouvaient en dehors des tableaux sont également placés dans les balises div PA.
Empêchement du chevauchement des éléments PA
Les cellules d'un tableau ne peuvent pas se chevaucher. Dreamweaver ne peut donc pas créer de tableau à partir
d'éléments PA qui se chevauchent. Si vous envisagez de convertir les éléments PA d'un document en tableaux, activez
l'option Empêcher le chevauchement pour restreindre le déplacement et le positionnement des éléments PA et en
éviter le chevauchement.
Si cette option est activée, aucun élément PA ne peut être créé, déplacé ou redimensionné au-dessus d'un élément PA
existant, ni être imbriqué dans ce dernier. Si vous activez cette option après avoir créé des éléments PA se chevauchant,
faites glisser chaque élément PA concerné de façon à l'éloigner des autres éléments PA. Dreamweaver ne corrige pas
automatiquement les éléments PA existants se chevauchant dans la page lorsque vous activez l'option Empêcher le
chevauchement des éléments PA.
Si cette option et l'option d'alignement sont activées, aucun élément PA ne sera aligné sur la grille si cela doit causer
un chevauchement de deux éléments PA. Dans ce cas, l'élément PA sera aligné sur le bord de l'élément PA le plus
proche.
Remarque : Certaines opérations autorisent le chevauchement des éléments PA, même lorsque l'option Empêcher le
chevauchement est activée. Si vous insérez un élément PA en utilisant le menu Insertion, si vous entrez des valeurs dans
l'inspecteur Propriétés ou si vous repositionnez des éléments PA en modifiant le code source HTML, les éléments PA
risquent de se chevaucher ou de s'imbriquer lorsque cette option est activée. En cas de chevauchement, faites glisser les
éléments PA qui se chevauchent en mode Création pour les séparer.
• Dans le panneau Eléments PA (Fenêtre > Eléments PA), activez l'option Empêcher le chevauchement.
• Dans la fenêtre de document, choisissez Modifier > Réorganiser > Empêcher le chevauchement des éléments PA.
Dernière mise à jour le 4/5/2011
180
Chapitre 7 : Mise en forme des pages avec
HTML
Utilisation d'assistances visuelles pour la mise en forme
Définition de règles
Les règles vous aident à mesurer, organiser et planifier votre mise en forme. Vous pouvez afficher les règles graduées
en pixels, pouces ou centimètres sur les bords gauche et supérieur de la page.
• Pour activer et désactiver les règles, choisissez Affichage > Règles > Afficher.
• Pour changer l'origine, faites glisser l'icône de l'origine de la règle
, située dans le coin supérieur gauche de la
fenêtre de document en mode Création, sur un point de la page.
• Pour rétablir la position par défaut de l'origine, choisissez Affichage > Règles > Rétablir origine.
• Pour changer d'unité de mesure, choisissez Affichage > Règles, puis sélectionnez Pixels, Pouces ou Centimètres.
Définition de repères de mise en forme
Les repères sont les lignes que vous faites glisser sur le document à partir des règles. Ils vous aident à placer et à aligner
des objets de façon plus précise Vous pouvez également utiliser les repères pour mesurer la taille des éléments d'une
page ou simuler les plis (zones visibles) des navigateurs Web.
Pour faciliter l'alignement des éléments, vous avez la possibilité de les aligner sur les repères et d'aligner des repères sur
des éléments. (les éléments doivent être à positionnement absolu pour que l'alignement puisse fonctionner). Vous
pouvez également verrouiller les repères pour qu'ils ne soient pas déplacés de façon accidentelle par un autre
utilisateur.
Création d'un repère horizontal ou vertical
1 Faites glisser le repère à partir de la règle correspondante.
2 Positionnez le repère dans la fenêtre de document et relâchez le bouton de la souris (repositionnez le repère en le
faisant glisser de nouveau).
Remarque : Par défaut, les repères sont enregistrés en tant que mesures en pixels absolues depuis le côté supérieur ou
gauche du document et sont affichés par rapport à l'origine de la règle. Pour enregistrer le repère sous la forme d'un
pourcentage, appuyez sur la touche Maj lorsque vous créez ou déplacez le repère.
Affichage ou masquage d'un repère
❖ Choisissez Affichage > Repères > Afficher les repères.
Alignement d'éléments sur les repères
• Pour aligner des éléments sur les repères, sélectionnez Affichage > Repères > Magnétiser les repères.
• Pour aligner les repères sur des éléments, sélectionnez Affichage > Repères > Accrocher les repères aux éléments.
Remarque : Lorsque vous redimensionnez des éléments, tels que des éléments à positionnement absolu, des tableaux et
des images, ils sont alignés sur les repères.
Dernière mise à jour le 4/5/2011
181
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
Verrouillage ou déverrouillage de tous les repères
❖ Choisissez Affichage > Repères > Verrouiller les repères.
Affichage et déplacement d'un repère vers une position spécifique
1 Maintenez le pointeur de la souris sur le repère afin d'afficher sa position.
2 Double-cliquez sur le repère.
3 Entrez la nouvelle position dans la boîte de dialogue Déplacer le repère et cliquez sur OK.
Affichage de la distance entre les repères
❖ Appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) et déplacez le pointeur de la souris n'importe
où entre les deux repères.
Remarque : L'unité de mesure est la même que celle utilisée pour les règles.
Simulation du pli (zone visible) d'un navigateur Web
❖ Choisissez Affichage > Repères puis sélectionnez une taille de navigateur prédéfini dans le menu.
Suppression d'un repère
❖ Faites glisser le repère hors du document.
Modification des paramètres des repères
❖ Sélectionnez Affichage > Repères > Modifier les repères, définissez les options suivantes et cliquez sur OK.
Couleur des repères Indique la couleur des lignes du repère. Cliquez sur la palette de couleurs et choisissez une
couleur dans le Sélecteur de couleur ou tapez un nombre hexadécimal dans la zone de texte.
Couleur distance Indique la couleur des lignes qui apparaissent comme des indicateurs de distance lorsque vous
déplacez le pointeur de la souris entre les repères. Cliquez sur la palette de couleurs et choisissez une couleur dans le
Sélecteur de couleur ou tapez un nombre hexadécimal dans la zone de texte.
Afficher les repères Affiche les repères en mode Création.
Magnétiser les repères Aligne les éléments d'une page sur les repères à mesure que vous déplacez ces éléments dans la page.
Verrouiller les repères Verrouille les repères en place.
Accrocher les repères aux éléments Aligne les repères sur les éléments sur la page à mesure que vous faites glisser les
repères.
Effacer tout Efface tous les repères de la page.
Utilisation des repères avec des modèles
Lorsque des repères sont ajoutés à un modèle Dreamweaver, toutes les instances du modèle héritent de ces repères. Les
repères des instances de modèle sont toutefois traités comme des régions modifiables par les utilisateurs. Les repères
modifiés dans les instances de modèle sont restaurés à leur emplacement d'origine chaque fois que l'instance est mise
à jour avec le modèle principal.
Vous pouvez aussi ajouter vos propres repères aux instances d'un modèle. Les guides ajoutés de cette manière ne sont
pas écrasés lorsque l'instance du modèle est mise à jour avec le modèle principal.
Dernière mise à jour le 4/5/2011
182
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
Voir aussi
« Alignement des éléments PA » à la page 178
« Déplacement des éléments PA » à la page 177
Utilisation de la grille de mise en forme
La grille affiche un système de lignes horizontales et verticales dans la fenêtre de document. Cette fonction est utile
pour placer des objets de façon précise. Vous pouvez aligner automatiquement des éléments de page à positionnement
absolu sur la grille en les déplaçant, et changer la grille ou définir le comportement d'alignement en indiquant des
paramètres spécifiques pour la grille. L'alignement fonctionne, que la grille soit visible ou non.
Voir aussi
« Alignement des éléments PA » à la page 178
« Déplacement des éléments PA » à la page 177
Affichage ou masquage de la grille
❖ Choisissez Affichage > Grille > Afficher la grille.
Activation ou désactivation de l'alignement
❖ Choisissez Affichage > Grille > Aligner sur la grille.
Modification des paramètres de la grille
1 Choisissez Affichage > Grille > Paramètres de la grille.
2 Définissez les options et cliquez sur OK pour appliquer les modifications.
Couleur Spécifie la couleur des lignes de la grille. Cliquez sur la palette de couleurs et choisissez une couleur dans le
Sélecteur de couleur ou tapez un nombre hexadécimal dans la zone de texte.
Afficher la grille Affiche la grille en mode Création.
Aligner sur la grille Permet d'aligner les éléments de la page sur les lignes de la grille.
Espacement Détermine l'espacement entre les lignes de la grille. Tapez une valeur et sélectionnez Pixels, Pouces ou
Centimètres dans le menu.
Afficher Détermine si les lignes de la grille apparaissent sous forme de lignes ou de pointillés.
Remarque : Si l'option Afficher la grille n'est pas sélectionnée, la grille n'apparaît pas et aucune modification n'est visible.
Utilisation d'un tracé d'image
Vous pouvez utiliser un tracé de l'image comme guide pour reproduire une mise en page ayant été créée dans une
application graphique telle qu'Adobe Freehand ou Fireworks.
Un tracé d'image est une image JPG, GIF ou PNG qui apparaît à l'arrière-plan de la fenêtre de document. Vous pouvez
masquer cette image, définir son opacité et la déplacer.
Le tracé de l'image est uniquement visible dans Dreamweaver ; il n'est pas visible lorsque vous affichez la page dans un
navigateur. Lorsque le tracé de l'image est visible, les véritables image et couleur d'arrière-plan de la page ne sont pas
visibles dans la fenêtre de document, mais le sont lorsque la page est affichée dans un navigateur.
Dernière mise à jour le 4/5/2011
183
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
Placement d'un tracé de l'image dans la fenêtre de document
1 Effectuez l'une des opérations suivantes :
• Choisissez Affichage > Tracé de l'image > Charger.
• Choisissez Modifier > Propriétés de la page, puis cliquez sur le bouton Parcourir situé à côté de la zone de texte
Tracé de l'image.
2 Dans la boîte de dialogue Sélectionnez la source de l'image, choisissez un fichier d'image puis cliquez sur OK.
3 Dans la boîte de dialogue Propriétés de la page, définissez la transparence de l'image en tirant la glissière
Transparence de l'image, puis cliquez sur OK.
Pour passer à un autre tracé ou modifier à tout moment la transparence du tracé en cours, choisissez Modifier >
Propriétés de la page.
Affichage ou masquage du tracé de l'image
❖ Choisissez Affichage > Tracé de l'image > Afficher.
Déplacement d'un tracé d'image
❖ Sélectionnez Affichage > Tracé de l'image > Ajuster la position.
• Pour définir avec précision la position du tracé de l'image, indiquez les valeurs des coordonnées dans les zones de
texte X et Y.
• Pour déplacer l'image par incréments de 1 pixel, utilisez les touches fléchées.
• Pour déplacer l'image par incrément de 5 pixels, appuyez simultanément sur la touche Maj et sur l'une des touches
fléchées.
Rétablissement de la position du tracé de l'image
❖ Choisissez Affichage > Tracé de l'image > Rétablir la position.
Le tracé de l'image se replace dans le coin supérieur gauche de la fenêtre de document (0,0).
Alignement du tracé de l'image sur un élément sélectionné
1 Sélectionnez un élément dans la fenêtre de document.
2 Choisissez Affichage > Tracé de l'image > Aligner l'image avec la sélection.
Le coin supérieur gauche du tracé de l'image est aligné avec le coin supérieur gauche de l'élément sélectionné.
Présentation de contenu à l'aide de tableaux
A propos des tableaux
Les tableaux sont très utiles pour présenter des données tabulaires et mettre en forme du texte et des images dans une
page HTML. Un tableau comprend au moins une ligne ; chaque ligne comporte au moins une cellule. Bien que les
colonnes ne soient généralement pas spécifiées explicitement en code HTML, Dreamweaver vous permet de
manipuler les colonnes, les lignes et les cellules.
Dernière mise à jour le 4/5/2011
184
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
Dreamweaver affiche la largeur du tableau et de chaque colonne du tableau lorsque le tableau est sélectionné ou que le
point d'insertion se trouve dedans. En regard des largeurs se trouvent les flèches du menu des en-têtes de tableau et des
menus des en-têtes de colonne. Utilisez les menus pour accéder rapidement à des commandes standard relatives aux
tableaux. Vous pouvez activer et désactiver les largeurs et les menus.
Si vous ne voyez pas la largeur d'un tableau ou d'une colonne, cela signifie qu'elle n'est pas spécifiée dans le code HTML.
Si deux nombres s'affichent, cela signifie que la largeur visuelle qui apparaît en mode Création est différente de la
largeur spécifiée dans le code HTML. Cela peut se produire lorsque vous redimensionnez un tableau en faisant glisser
son coin inférieur droit ou lorsque vous ajoutez du contenu à une cellule plus grande que sa valeur définie.
Par exemple, si vous définissez une largeur de colonne de 200 pixels, puis que vous ajoutez du contenu qui étend la
largeur à 250 pixels, deux nombres s'affichent pour cette colonne : 200 (la largeur spécifiée dans le code) et (250) entre
parenthèses (la largeur visuelle de la colonne telle qu'elle apparaît à l'écran).
Remarque : Vous avez aussi la possibilité de mettre vos pages en forme à l'aide du positionnement par feuilles de style en
cascade CSS.
Voir aussi
« Mise en forme des pages avec CSS » à la page 158
Priorité de formatage des tableaux dans le code HTML
Lorsque vous formatez des tableaux en mode Création, vous pouvez définir des propriétés s'appliquant au tableau tout
entier ou à une série de lignes, de colonnes ou de cellules sélectionnées dans le tableau. Lorsqu'une propriété (une
couleur d'arrière-plan ou un alignement, par exemple) est définie par une valeur pour tout le tableau et par une autre
valeur pour chaque cellule, les propriétés de formatage des cellules prévalent sur les propriétés de formatage de lignes,
qui à leur tour prévalent sur celles du tableau.
L'ordre de priorité pour le formatage de tableau est le suivant :
1 Cellules
2 Lignes
3 Tableau
Par exemple, si vous définissez une couleur bleue pour l'arrière-plan d'une cellule, puis la couleur jaune pour celui du
tableau, la couleur de la cellule bleue ne changera pas, puisque la propriété de formatage de cellule a la priorité sur la
propriété de formatage du tableau.
Remarque : Lorsque vous définissez les propriétés d'une colonne, Dreamweaver modifie les attributs de la balise td
correspondant à chaque cellule de la colonne.
A propos du fractionnement et de la fusion de cellules de tableau
Vous pouvez fusionner n'importe quel nombre de cellules adjacentes (tant que la sélection correspond à une ligne ou
à un rectangle de cellules) pour produire une cellule unique s'étendant sur plusieurs colonnes ou lignes. Vous pouvez
fractionner une cellule en un nombre quelconque de lignes et de colonnes, qu'elle ait été précédemment fusionnée ou
non. Dreamweaver restructure automatiquement le tableau (en ajoutant les attributs colspan ou rowspan
nécessaires) pour obtenir l'agencement spécifié.
Dernière mise à jour le 4/5/2011
185
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
Dans l'exemple ci-dessous, les cellules au milieu des deux premières lignes ont été fusionnées en une seule cellule qui
s'étend sur deux lignes.
Insertion d'un tableau et ajout de contenu
Utilisez le panneau ou le menu Insertion pour créer un nouveau tableau. Ajoutez ensuite du texte et des images aux
cellules du tableau de la même façon que vous le faites en dehors d'un tableau.
Remarque : La fonction Mode Mise en forme est obsolète depuis la version Dreamweaver CS4. Le mode Mise en forme
créait des mises en forme de page à l'aide de tableaux de mise en forme, ce qui n'est plus conseillé par Adobe. Pour plus
d'informations sur le mode Mise en forme et la raison pour laquelle il a été rendu obsolète, consultez le Blog de l'équipe
Dreamweaver.
1 Dans la fenêtre de document en mode Création, placez le point d'insertion à l'endroit où vous voulez que le tableau
apparaisse.
Remarque : Si votre document est vide, le point d'insertion peut uniquement être placé au début du document.
• Choisissez Insertion > Tableau.
• Dans la catégorie Commun du panneau Insertion, cliquez sur le bouton Tableau.
2 Définissez les attributs dans la boîte de dialogue Tableau et cliquez sur OK pour créer le tableau.
Lignes Détermine le nombre de lignes du tableau.
Colonnes Détermine le nombre de colonnes du tableau.
Largeur du tableau Indique la largeur du tableau en pixels ou en pourcentage de la largeur de fenêtre du navigateur.
Largeur de la bordure Indique la largeur, en pixels, des bordures du tableau.
Espacement des cellules Détermine le nombre de pixels séparant les cellules contiguës d'un tableau.
Lorsque vous n'affectez pas explicitement de valeur pour la largeur de la bordure, l'espacement entre les cellules et la
marge intérieure des cellules, la plupart des navigateurs affichent une largeur de bordure et une marge intérieure des
cellules définies sur 1, ainsi qu'un espacement entre les cellules défini sur 2. Pour être sûr que les navigateurs afficheront
le tableau sans bordure, marge intérieure ni espacement, définissez Marge intérieure des cellules et Espacement entre les
cellules sur 0.
Marge intérieure des cellules Indique le nombre de pixels qui sépare la bordure d'une cellule et son contenu.
Aucun N'autorise pas les en-têtes de colonne ou de ligne pour le tableau.
Gauche Transforme la première colonne du tableau en colonne d'en-têtes pour vous permettre d'entrer un en-tête
pour ligne du tableau.
Haut Transforme la première ligne du tableau en ligne d'en-têtes pour vous permettre d'entrer un en-tête pour chaque
colonne du tableau.
Les deux Vous permet d'entrer des en-têtes de colonne et de ligne dans le tableau.
Il est judicieux d'employer des en-têtes au cas où l'un des visiteurs de votre site Web utiliserait un lecteur d'écran. Les
lecteurs d'écran lisent les en-têtes de tableau et aident les utilisateurs à garder une trace des informations de tableau.
Légende Fournit un titre de tableau qui s'affiche en dehors du tableau.
Dernière mise à jour le 4/5/2011
186
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
Aligner la légende Indique où la légende du tableau apparaît par rapport au tableau.
Résumé Fournit une description du tableau. Les lecteurs d'écran lisent le texte de résumé mais le texte n'apparaît pas
dans le navigateur de l'utilisateur.
Voir aussi
« Ajout et formatage de texte » à la page 226
« Ajout et modification d'images » à la page 243
Importation et exportation de données tabulaires
Vous pouvez importer des données tabulaires créées dans une autre application (par exemple, Microsoft Excel) et
enregistrées dans un format texte délimité (éléments séparés par des tabulations, virgules, deux-points, points-virgules
ou autres délimiteurs) dans Dreamweaver et les mettre en forme dans un tableau.
Vous pouvez également exporter les données d'un tableau depuis Dreamweaver vers un fichier texte, avec le contenu
de cellules contiguës séparé par un délimiteur. Les caractères que vous pouvez utiliser comme délimiteurs sont la
virgule, les deux-points, le point-virgule ou l'espace. Lorsque vous exportez un tableau, tout le tableau est exporté ; vous
ne pouvez pas exporter certaines parties du tableau seulement.
Si vous souhaitez ne récupérer qu'une partie des données d'un tableau, par exemple les six premières lignes ou les six
premières colonnes, copiez les cellules contenant ces données et collez-les hors du tableau (pour créer un nouveau
tableau) avant d'exporter le nouveau tableau.
Importation de données tabulaires
1 Effectuez l'une des opérations suivantes :
• Choisissez Fichier > Importer > Données tabulaires.
• Dans la catégorie Données du panneau Insertion, cliquez sur l'icône Importer les données tabulaires
.
• Choisissez Insertion > Objets du tableau > Importer les données tabulaires.
2 Définissez les options relatives aux données tabulaires, puis cliquez sur OK.
Fichier de données Correspond au nom du fichier à importer. Cliquez sur le bouton Parcourir pour choisir le fichier.
Délimiteur Correspond au délimiteur utilisé dans le fichier que vous importez.
Si vous choisissez Autre, une zone de texte apparaît à droite du menu contextuel. Entrez le délimiteur utilisé dans votre
fichier.
Remarque : Spécifiez le délimiteur utilisé lors de l'enregistrement du fichier de données. Dans le cas contraire, le fichier
ne pourra pas être importé correctement et vos données ne seront pas formatées convenablement dans un tableau.
Largeur du tableau Correspond à la largeur du tableau.
• Sélectionnez Adapter au contenu pour adapter la largeur de chaque colonne à la plus longue chaîne de texte qu'elle
contient.
• Sélectionnez Fixe pour spécifier une largeur de tableau fixe, en pixels ou en pourcentage de la largeur de fenêtre du
navigateur.
Bordure Indique la largeur, en pixels, des bordures du tableau.
Marge intérieure des cellules Détermine l'espace (en pixels) entre le contenu d'une cellule et son contour.
Espacement des cellules Détermine le nombre de pixels séparant les cellules contiguës d'un tableau.
Dernière mise à jour le 4/5/2011
187
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
Lorsque vous n'affectez pas explicitement de valeur pour les bordures, l'espacement entre les cellules et la marge
intérieure des cellules, la plupart des navigateurs affichent des bordures et une marge intérieure des cellules définies
sur 1, ainsi qu'un espacement entre les cellules défini sur 2. Pour être sûr que les navigateurs afficheront le tableau sans
marge intérieure ni espacement, définissez Marge intérieure des cellules et Espacement entre les cellules sur 0. Pour
visualiser les contours des cellules et du tableau lorsque la bordure est définie sur 0, sélectionnez Affichage > Assistances
visuelles > Bordures de tableau.
Formatage ligne supérieure Détermine le formatage appliqué, le cas échéant, à la ligne supérieure du tableau.
Choisissez parmi quatre options de formatage : pas de formatage, gras, italique ou gras italique.
Exportation d'un tableau
1 Placez le point d'insertion dans l'une des cellules du tableau.
2 Choisissez Fichier > Exporter > Tableau.
3 Définissez les options suivantes :
Délimiteur Indique quel caractère délimiteur doit être utilisé pour séparer des éléments dans le fichier exporté.
Sauts de ligne Indique sous quel système d'exploitation vous allez ouvrir le fichier exporté : Windows, Macintosh ou
UNIX. Les différents systèmes d'exploitation utilisent des méthodes différentes pour indiquer la fin d'une ligne de
texte.
4 Cliquez sur Exporter.
5 Saisissez un nom pour le fichier et cliquez sur Enregistrer.
Sélection d'éléments de tableau
Vous pouvez sélectionner un tableau entier ou encore l'ensemble d'une ligne ou d'une colonne. Vous pouvez
également sélectionner une ou plusieurs cellules individuelles.
Lorsque vous déplacez le pointeur sur un tableau, une ligne, une colonne ou une cellule, Dreamweaver met toutes les
cellules de cette sélection en surbrillance afin que vous sachiez quelles cellules seront sélectionnées. Ceci est utile pour
les tableaux sans bordures, les cellules comprenant plusieurs colonnes ou lignes ou dans le cas de tableaux imbriqués.
Vous pouvez modifier la couleur de la mise en surbrillance dans les préférences.
Si vous placez le pointeur sur une bordure du tableau, puis que vous maintenez la touche Ctrl (Windows) ou
Commande (Macintosh) enfoncée, la totalité de la structure du tableau (c'est-à-dire toutes les cellules) est mise en
surbrillance. Ceci peut être utile lorsque vous disposez de tableaux imbriqués et que vous souhaitez afficher la structure
de l'un d'eux.
Sélection d'un tableau entier
❖ Effectuez l'une des opérations suivantes :
• Cliquez dans le coin supérieur gauche du tableau, sur le bord supérieur ou inférieur du tableau ou sur une ligne ou
une bordure de colonne.
Remarque : Le pointeur prend la forme de l'icône de grille du tableau pour vous indiquer que vous pouvez sélectionner
le tableau (sauf si vous cliquez sur la bordure d'une ligne ou d'une colonne).
• Cliquez dans une cellule du tableau, puis sélectionnez la balise <table> dans le sélecteur de balises dans le coin
inférieur gauche de la fenêtre de document.
• Cliquez dans une cellule du tableau, puis choisissez Modifier > Tableau > Sélectionner le tableau.
• Cliquez dans une cellule du tableau, puis sur le menu d'en-tête du tableau et choisissez Sélectionner le tableau. Des
poignées de sélection apparaissent sur les bords inférieurs et droits du tableau sélectionné.
Dernière mise à jour le 4/5/2011
188
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
Sélection d'une ou plusieurs lignes ou colonnes
1 Positionnez le pointeur sur le bord gauche d'une ligne ou le bord supérieur d'une colonne.
2 Lorsque le pointeur se transforme en flèche de sélection, cliquez pour sélectionner une ligne ou une colonne ou
faites-le glisser pour sélectionner plusieurs lignes ou colonnes.
Sélection d'une seule colonne
1 Cliquez dans la colonne.
2 Cliquez sur le menu des en-têtes de colonne, puis choisissez Sélectionner la colonne.
Sélection d'une seule cellule
❖ Effectuez l'une des opérations suivantes :
• Cliquez dans la cellule, puis sélectionnez la balise <td> dans le sélecteur de balises dans le coin inférieur gauche de
la fenêtre de document.
• Cliquez dans la cellule en maintenant la touche Ctrl (Windows) ou Commande (Macintosh) enfoncée.
• Cliquez dans la cellule, puis choisissez Edition > Sélectionner tout.
Lorsqu'une cellule est déjà sélectionnée, choisissez Edition > Sélectionner tout à nouveau pour sélectionner tout le
tableau.
Sélection d'une ligne ou d'un bloc rectangulaire de cellules
❖ Effectuez l'une des opérations suivantes :
• Faites glisser la souris d'une cellule vers une autre.
• Cliquez sur une cellule. Tout en appuyant sur la touche Ctrl (Windows) ou Commande (Macintosh), cliquez sur la
même cellule, puis cliquez dans une autre cellule en maintenant la touche Maj enfoncée.
Toutes les cellules se trouvant à l'intérieur de la zone rectangulaire ou linéaire ainsi délimitée par les deux cellules sont
sélectionnées.
Dernière mise à jour le 4/5/2011
189
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
Sélection de cellules non adjacentes
❖ Appuyez sur Ctrl (Windows) ou Commande (Macintosh), puis cliquez sur les cellules, les lignes ou les colonnes
que vous voulez sélectionner.
Si chaque cellule, ligne ou colonne sur laquelle vous cliquez après avoir appuyé sur Ctrl ou sur Commande n'est pas
déjà sélectionnée, elle est ajoutée à la sélection. Si elle est déjà sélectionnée, elle est retirée de la sélection.
Modification de la couleur de surbrillance pour les éléments d'un tableau
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
2 Sélectionnez la catégorie Surbrillance dans la liste à gauche, effectuez l'une des modifications suivantes, puis cliquez
sur OK.
• Pour modifier la couleur de surbrillance des éléments du tableau, cliquez dans la case de couleur Survol et
sélectionnez une couleur de surbrillance à l'aide du sélecteur de couleur (ou tapez la valeur hexadécimale
correspondant à la couleur de surbrillance dans la zone de texte).
• Pour activer ou désactiver la sélection d'éléments du tableau, activez ou désactivez l'option Afficher de l'option
Survol.
Remarque : Ces options s'appliquent à tous les objets, tels que les éléments à positionnement absolu (PA), que
Dreamweaver met en surbrillance lorsque vous faites passer le pointeur dessus.
Définition des propriétés des tableaux
Vous pouvez utiliser l'inspecteur Propriétés pour modifier les tableaux.
1 Sélectionnez un tableau.
2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), apportez les modifications requises aux propriétés.
ID de tableau Un identificateur du tableau.
Lignes et colonnes Le nombre de lignes et de colonnes dans le tableau.
L La largeur du tableau, en pixels ou en pourcentage de la largeur de fenêtre du navigateur.
Remarque : Il est rarement utile de définir la hauteur d'un tableau.
Remplissage Détermine l'espace (en pixels) entre le contenu d'une cellule et son contour.
Espac. de cellule Détermine le nombre de pixels séparant les cellules contiguës d'un tableau.
Alignement Détermine la position du tableau par rapport aux autres éléments du même paragraphe (texte ou images).
Gauche aligne le tableau sur la gauche des autres éléments (pour que le texte situé dans le même paragraphe apparaisse
à droite du tableau) ; Droite aligne le tableau sur la droite des autres éléments (le texte apparaissant à gauche du
tableau) ; et Centrer centre le tableau (le texte apparaissant au-dessus et/ou en dessous du tableau). Par défaut indique
que le navigateur doit utiliser son alignement par défaut.
Lorsque l'alignement est défini sur Par défaut, le reste du contenu n'est pas affiché à côté du tableau. Pour afficher un
tableau à côté du contenu, utilisez l'alignement à droite ou à gauche.
Bordure Indique la largeur, en pixels, des bordures du tableau.
Dernière mise à jour le 4/5/2011
190
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
Lorsque vous n'affectez pas explicitement de valeur pour la bordure, l'espacement entre les cellules et la marge
intérieure des cellules, la plupart des navigateurs affichent la bordure et une marge intérieure des cellules définies
sur 1, ainsi qu'un espacement entre les cellules défini sur 2. Pour être sûr que les navigateurs afficheront le tableau sans
marge intérieure ni espacement, définissez Bordure sur 0, Marge intérieure des cellules et Espacement entre les cellules
sur 0. Pour visualiser les contours des cellules et du tableau lorsque la bordure est définie sur 0, sélectionnez Affichage >
Assistances visuelles > Bordures de tableau.
Classe Applique une classe CSS au tableau.
Remarque : Il peut être nécessaire de développer l'inspecteur Propriétés du tableau pour afficher les options suivantes.
Pour développer l'inspecteur Propriétés du tableau, cliquez sur la flèche de développement dans son coin inférieur droit.
Effacer largeurs de colonne et Effacer hauteurs de ligne suppriment toutes les valeurs de hauteur de ligne ou de largeur
de colonne du tableau explicitement spécifiées.
Convertir largeurs de tableau en pixels et Convertir les hauteurs de tableau en pixels définissent la largeur ou la
hauteur de chaque colonne du tableau sur sa largeur en pixels (définit également la largeur du tableau sur sa largeur
en pixels).
Convertir largeurs de tableau en pourcentage et Convertir les hauteurs de tableau en pourcentages définissent la
largeur ou la hauteur de chaque colonne du tableau sur sa largeur exprimée en pourcentage de la largeur de la fenêtre
de document (définit également la largeur du tableau sur sa largeur en pourcentage de la largeur de la fenêtre de
document).
Si vous avez tapé une valeur dans une zone de texte, appuyez sur Tab ou Entrée (Windows) ou Retour (Macintosh)
pour l'appliquer.
Définition des propriétés de cellule, de ligne ou de colonne
Vous pouvez utiliser l'inspecteur Propriétés pour modifier des cellules et des lignes dans un tableau.
1 Sélectionnez une ligne ou une colonne.
2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), définissez les options suivantes :
Horiz Indique l'alignement horizontal du contenu d'une cellule, d'une ligne ou d'une colonne. Vous pouvez aligner le
contenu de la cellule sur la gauche, la droite ou le centre des cellules ou vous pouvez indiquer au navigateur d'utiliser
l'alignement par défaut (en général à gauche pour les cellules normales et au centre pour les cellules d'en-tête).
Vert. Indique l'alignement vertical du contenu d'une cellule, d'une ligne ou d'une colonne. Vous pouvez aligner le
contenu de la cellule sur le haut, le centre ou le bas des cellules, sur la ligne de base ou encore indiquer au navigateur
d'utiliser l'alignement par défaut (en général le centre).
L et H La largeur et la hauteur des cellules sélectionnées en pixels ou en pourcentage de la largeur ou de la hauteur de
tout le tableau. Pour spécifier un pourcentage, faites suivre la valeur du signe de pourcentage (%). Pour laisser au
navigateur le soin de déterminer la largeur et la hauteur appropriées, en fonction du contenu de la cellule et des
largeurs et hauteurs des autres colonnes et lignes, laissez le champ vide (paramétrage par défaut).
Par défaut, un navigateur choisit une hauteur de ligne et une largeur de colonne correspondant à l'image la plus large
ou à la ligne la plus longue dans une colonne. C'est pourquoi il arrive qu'une colonne de tableau devienne beaucoup
plus large que les autres lorsque vous y ajoutez du contenu.
Remarque : Vous pouvez spécifier une hauteur en pourcentage de la hauteur totale du tableau, mais il se peut que la ligne
ne s'affiche pas au pourcentage de hauteur spécifié dans les navigateurs.
Ar-pl La couleur d'arrière-plan d'une cellule, d'une colonne ou d'une ligne, choisie à l'aide du sélecteur de couleurs.
Dernière mise à jour le 4/5/2011
191
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
Fusionner les cellules Combine les cellules, lignes ou colonnes sélectionnées en une seule cellule. Vous pouvez
fusionner des cellules uniquement si elles forment un bloc rectangulaire ou linéaire.
Fractionner la cellule Divise une cellule en deux ou plusieurs cellules. Vous ne pouvez fractionner qu'une cellule à la
fois : ce bouton est désactivé si plusieurs cellules sont sélectionnées.
Pas de retour à la ligne auto Evite tout renvoi automatique à la ligne, en conservant tout le texte d'une cellule donnée
sur une seule ligne. Si Pas de retour à la ligne auto est activé, les cellules s'élargissent en fonction de la taille des données
que vous tapez ou collez. (Normalement, les cellules s'élargissent horizontalement pour accueillir le mot le plus long
ou l'image la plus large, puis s'étirent verticalement autant que nécessaire pour intégrer tout autre contenu).
En-tête Met en forme les cellules sélectionnées comme des cellules d'en-tête de tableau. Par défaut, le contenu des
cellules de titre de tableau est en caractères gras et centré.
Vous pouvez spécifier la largeur ou la hauteur par des pixels ou des pourcentages. Vous pouvez convertir les pixels en
pourcentages et inversement.
Remarque : Lorsque vous définissez les propriétés d'une colonne, Dreamweaver modifie les attributs de la balise td
correspondant à chaque cellule de la colonne. Lorsque vous définissez certaines propriétés d'une ligne, Dreamweaver
modifie les attributs de la balise tr plutôt que de modifier les attributs de chaque balise td dans la ligne. Lorsque vous
appliquez le même format à toutes les cellules d'une ligne, en appliquant le format à la balise tr, vous obtenez un code
HTML plus net et plus concis.
3 Appuyez sur Tab ou Entrée (Windows) ou Retour (Macintosh) pour appliquer la valeur.
Utilisation du mode Tableaux développés pour une modification de tableau
plus simple
Le mode Tableaux développés ajoute provisoirement de la marge à l'intérieur des cellules et de l'espacement à tous les
tableaux d'un document, et augmente les bordures des tableaux afin de rendre les modifications plus faciles. Ce mode
vous permet de choisir des éléments dans les tableaux ou de placer le point d'insertion de manière précise.
Par exemple, vous pouvez développer un tableau pour placer le point d'insertion à gauche ou à droite d'une image, sans
sélectionner l'image ou la cellule du tableau par inadvertance.
B
A
A. Tableau en mode Standard B. Tableau en mode Tableaux développés
Remarque : Après avoir choisi ou placé le point d'insertion, vous devez revenir au mode Standard du mode Création pour
effectuer vos modifications. En mode Tableaux développés, certaines opérations, telles que le redimensionnement, ne
produisent pas les résultats attendus.
Basculement en mode Tableaux développés
1 Si vous travaillez en mode Code, sélectionnez Affichage > Création ou Affichage > Code et création (vous ne
pouvez pas passer en mode Tableaux développés lorsque vous êtes en mode Code).
2 Effectuez l'une des opérations suivantes :
• Choisissez Affichage > Mode Tableau > Mode Tableaux développés.
Dernière mise à jour le 4/5/2011
192
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
• Dans la catégorie Mise en forme du panneau Insertion, cliquez sur Développé.
Une barre étiquetée Mode Tableaux développés s'affiche en haut de la fenêtre de document. Dreamweaver ajoute une
marge intérieure des cellules et de l'espacement entre les cellules à tous les tableaux de la page et augmente l'épaisseur
des bordures des tableaux.
Sortie du mode Tableaux développés
❖ Effectuez l'une des opérations suivantes :
• Cliquez sur [quitter] dans la barre intitulée Mode Tableaux développés en haut de la fenêtre de document.
• Choisissez Affichage > Mode Tableau > Mode Standard.
• Dans la catégorie Mise en forme du panneau Insertion, cliquez sur Standard.
Mise en forme des tableaux et des cellules
Vous pouvez modifier l'aspect des tableaux en définissant des propriétés pour l'ensemble ou une partie de leurs
cellules, ou en leur appliquant une mise en forme prédéfinie. Avant de définir les propriétés d'un tableau ou de cellules,
vous devez savoir que l'ordre de priorité pour le formatage est le suivant : cellules, lignes et tableaux.
Pour formater le texte dans une cellule de tableau, suivez la même procédure que pour formater du texte en dehors
d'un tableau.
Voir aussi
« Ajout et formatage de texte » à la page 226
Modification du format d'un tableau, d'une cellule, d'une ligne ou d'une colonne.
1 Sélectionnez un tableau, une cellule, une ligne ou une colonne.
2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), cliquez sur la flèche d'agrandissement située dans le coin
inférieur droit et modifiez les propriétés en fonction de vos besoins.
3 Modifiez les propriétés de votre choix.
Pour plus d'informations sur les options, cliquez sur l'icône Aide de l'inspecteur Propriétés.
Remarque : Lorsque vous définissez les propriétés d'une colonne, Dreamweaver modifie les attributs de la balise td
correspondant à chaque cellule de la colonne. Lorsque vous définissez certaines propriétés d'une ligne, Dreamweaver
modifie les attributs de la balise tr plutôt que de modifier les attributs de chaque balise td dans la ligne. Lorsque vous
appliquez le même format à toutes les cellules d'une ligne, en appliquant le format à la balise tr, vous obtenez un code
HTML plus net et plus concis.
Ajout ou modification des valeurs d'accessibilité d'un tableau en mode Code
❖ Modifiez les attributs dans le code.
Pour repérer rapidement les balises dans le code, cliquez dans le tableau, puis sélectionnez la balise <table> dans le
sélecteur de balises situé au bas de la fenêtre de document.
Ajout ou modification des valeurs d'accessibilité d'un tableau en mode Création
• Pour modifier la légende du tableau, mettez-la en surbrillance, puis tapez une nouvelle légende.
• Pour modifier l'alignement de la légende du tableau, placez le point d'insertion dans la légende, cliquez du bouton
droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis choisissez Modifier le
code de la balise.
Dernière mise à jour le 4/5/2011
193
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
• Pour modifier le résumé du tableau, sélectionnez le tableau, cliquez du bouton droit de la souris (Windows) ou en
maintenant la touche Ctrl enfoncée (Macintosh), puis choisissez Modifier le code de la balise.
Redimensionnement des tableaux, des colonnes et des lignes
Redimensionnement des tableaux
Vous pouvez redimensionner tout un tableau ou seulement certaines cellules ou certaines colonnes individuelles.
Lorsque vous redimensionnez tout un tableau, toutes ses cellules changent de taille en proportion. Si les cellules d'un
tableau ont une largeur ou une hauteur spécifiées explicitement, le redimensionnement du tableau modifie la taille
visuelle des cellules dans la fenêtre de document mais ne modifie pas la largeur et la hauteur spécifiées des cellules.
Vous pouvez redimensionner un tableau en faisant glisser l'une de ses poignées de sélection. Dreamweaver affiche la
largeur du tableau, ainsi qu'un menu des en-têtes de tableau, en haut ou en bas du tableau lorsque le tableau est
sélectionné ou que le point d'insertion se trouve dedans.
Les largeurs de colonne définies dans le code HTML ne correspondent pas nécessairement aux largeurs apparentes à
l'écran. Dans ce cas, vous pouvez uniformiser les largeurs. Dreamweaver affiche les largeurs de colonne et de tableau
ainsi que les menus d'en-têtes pour vous aider à mettre les tableaux en forme. Vous pouvez activer ou désactiver ces
informations à votre convenance.
Redimensionnement des colonnes et des lignes
Vous pouvez modifier la largeur d'une colonne ou la hauteur d'une ligne dans l'inspecteur Propriétés ou en faisant
glisser les bordures de la colonne ou de la ligne. Si vous avez des problèmes pour le redimensionnement, vous pouvez
effacer la largeur des colonnes ou la hauteur des lignes et recommencer.
Remarque : Vous pouvez aussi modifier la largeur et la hauteur des cellules directement dans le code HTML à l'aide du
mode Code.
Dreamweaver affiche la largeur des colonnes, ainsi que les menus des en-têtes de colonne, en haut ou en bas des
colonnes lorsque le tableau est sélectionné ou que le point d'insertion se trouve dedans. Vous pouvez activer ou
désactiver les menus d'en-têtes de colonne à votre convenance.
Voir aussi
« Utilisation de code de page » à la page 304
Redimensionnement de tableaux, de colonnes et de lignes
Redimensionnement d'un tableau
❖ Sélectionnez le tableau.
• Pour redimensionner le tableau horizontalement, faites glisser la poignée de sélection vers la droite.
• Pour redimensionner le tableau verticalement, faites glisser la poignée de sélection vers le bas.
• Pour redimensionner le tableau verticalement et horizontalement, faites glisser la poignée de sélection vers le coin
inférieur droit.
Modification de la largeur d'une colonne tout en conservant la même largeur de tableau
❖ Faites glisser la bordure droite de la colonne à modifier.
Dernière mise à jour le 4/5/2011
194
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
La largeur de la colonne contiguë est également modifiée, si bien que vous redimensionnez deux colonnes. L'affichage
visuel vous montre la manière dont les colonnes seront ajustées, la largeur totale du tableau ne variant pas.
Remarque : Dans les tableaux avec des largeurs en pourcentage (et non en pixels), si vous faites glisser la bordure droite
de l'extrême droite du tableau, la largeur globale du tableau est modifiée et toutes les colonnes s'adaptent
proportionnellement.
Modification de la largeur d'une colonne en conservant les dimensions des autres colonnes
❖ Maintenez la touche Maj enfoncée, puis faites glisser la bordure de la colonne.
Seule la largeur de cette colonne change. L'affichage visuel vous montre la manière dont les colonnes seront ajustées,
la largeur totale du tableau variant en fonction de la colonne redimensionnée.
Modification de la hauteur d'une ligne visuellement
❖ Faites glisser la bordure inférieure de la ligne.
Uniformisation des largeurs de colonne en mode Code avec les largeurs visuelles
1 Cliquez dans une cellule.
2 Cliquez sur le menu des en-têtes de tableau, puis choisissez Uniformiser toutes les largeurs.
Dreamweaver redéfinit la largeur spécifiée dans le code sur la largeur visuelle.
Effacement de toutes les largeurs et hauteurs définies dans un tableau
1 Sélectionnez le tableau.
2 Effectuez l'une des opérations suivantes :
• Choisissez Modifier > Tableau > Effacer les largeurs de colonnes ou Modifier > Tableau > Effacer les hauteurs de
cellules.
Dernière mise à jour le 4/5/2011
195
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
• Dans l'inspecteur Propriétés (Fenêtre > Propriétés), cliquez sur le bouton Effacer les hauteurs de ligne
bouton Effacer les largeurs de colonne
ou sur le
.
• Cliquez sur le menu des en-têtes de colonne, puis choisissez Effacer toutes les hauteurs ou Effacer toutes les
largeurs.
Effacement d'une largeur de colonne définie
❖ Cliquez sur le menu des en-têtes de colonne, puis choisissez Effacer les largeurs de colonne.
Activation ou désactivation des menus et de la largeur d'un tableau et des colonnes
1 Choisissez Affichage > Assistances visuelles > Largeurs de tableau.
2 Cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) dans le
tableau, puis choisissez Tableau > Largeurs de tableau.
Ajout et suppression de lignes et de colonnes
Pour ajouter et supprimer des lignes et des colonnes à l'aide des commandes Modifier > Tableau ou du menu des entêtes de colonne.
Le fait d'appuyer sur la touche de tabulation lorsque le curseur se trouve dans la dernière cellule d'un tableau ajoute
automatiquement une ligne.
Ajout d'une ligne ou d'une colonne individuelle
❖ Cliquez dans une cellule, puis procédez de l'une des manières suivantes :
• Choisissez Modifier > Tableau > Insérer une ligne ou Modifier > Tableau > Insérer une colonne.
Une ligne apparaît au-dessus du point d'insertion ou une colonne apparaît à gauche du point d'insertion.
• Cliquez sur le menu des en-têtes de colonne, puis choisissez Insérer une colonne à gauche ou Insérer une colonne
à droite.
Dernière mise à jour le 4/5/2011
196
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
Ajout de plusieurs lignes ou colonnes
1 Cliquez dans une cellule.
2 Choisissez Modifier > Tableau > Insérer des lignes ou des colonnes et cliquez sur OK.
Insérer Indique les lignes ou les colonnes à insérer.
Nombre de lignes ou Nombre de colonnes Le nombre de lignes ou de colonnes à insérer.
Où Indique si les nouvelles lignes ou colonnes doivent apparaître avant ou après la ligne ou la colonne de la cellule
sélectionnée.
Suppression d'une ligne ou d'une colonne
❖ Effectuez l'une des opérations suivantes :
• Cliquez sur une cellule de la ligne ou de la colonne que vous voulez supprimer, puis choisissez Modifier > Tableau >
Supprimer la ligne ou Modifier > Tableau > Supprimer la colonne.
• Sélectionnez une ligne ou une colonne entière, puis choisissez Edition > Effacer ou appuyez sur Suppr.
Ajout ou suppression de lignes ou de colonnes à l'aide de l'inspecteur Propriétés
1 Sélectionnez le tableau.
2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), procédez de l'une des manières suivantes :
• Pour ajouter ou supprimer des lignes, augmentez ou réduisez la valeur indiquant le nombre de lignes.
• Pour ajouter ou supprimer des colonnes, augmentez ou réduisez la valeur indiquant le nombre de colonnes.
Remarque : Dreamweaver ne vous avertit pas si vous supprimez des lignes et des colonnes contenant des données.
Fractionnement et fusion de cellules
Utilisez l'inspecteur Propriétés ou les commandes du sous-menu Modifier > Tableau pour fractionner ou fusionner
des cellules.
Fusion de plusieurs cellules d'un tableau
1 Sélectionnez les cellules dans une ligne contiguë et sous forme rectangulaire.
Dans l'illustration ci-dessous, la sélection est un rectangle de cellules ; les cellules peuvent donc être fusionnées.
Dernière mise à jour le 4/5/2011
197
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
Dans l'illustration ci-dessous, la sélection n'est pas un rectangle ; les cellules ne peuvent donc pas être fusionnées.
2 Effectuez l'une des opérations suivantes :
• Choisissez Modifier > Tableau > Fusionner les cellules.
• Dans l'inspecteur Propriétés HTML (Fenêtre > Propriétés) en mode développé, cliquez sur le bouton Fusionner les
cellules
.
Remarque : Si le bouton n'est pas visible, cliquez sur la flèche de développement, dans le coin inférieur droit de
l'inspecteur Propriétés, pour afficher toutes les options.
Le contenu des cellules individuelles est placé dans la cellule produite par la fusion. Les propriétés de la première cellule
sélectionnée sont appliquées à la cellule fusionnée.
Fractionnement d'une cellule
1 Cliquez dans une cellule, puis procédez de l'une des manières suivantes :
• Choisissez Modifier > Tableau > Fractionner la cellule.
• Dans l'inspecteur Propriétés HTML (Fenêtre > Propriétés) en mode agrandi, cliquez sur le bouton Fractionner les
cellules
.
Remarque : Si le bouton n'est pas visible, cliquez sur la flèche de développement, dans le coin inférieur droit de
l'inspecteur Propriétés, pour afficher toutes les options.
2 Dans la boîte de dialogue Fractionner la cellule, spécifiez comment vous voulez fractionner la cellule :
Fractionner la cellule Indique comment la cellule doit être fractionnée, en lignes ou en colonnes.
Nombre de lignes/Nombre de colonnes Indique en combien de colonnes ou de lignes la cellule doit être fractionnée.
Augmentation ou réduction du nombre de lignes ou de colonnes occupées par une cellule
❖ Effectuez l'une des opérations suivantes :
• Choisissez Modifier > Tableau > Augmenter l'étendue de ligne ou Modifier > Tableau > Augmenter l'étendue de
colonne.
• Choisissez Modifier > Tableau > Réduire l'étendue de ligne ou Modifier > Tableau > Réduire l'étendue de colonne.
Copie, collage et suppression de cellules
Vous pouvez copier, coller ou supprimer une ou plusieurs cellules tout en préservant leur formatage.
Vous pouvez coller les cellules au niveau d'un point d'insertion ou à la place d'une sélection dans un tableau existant.
Pour coller plusieurs cellules de tableau, il faut que le contenu du Presse-papiers soit compatible avec la structure du
tableau ou de la sélection du tableau dans laquelle les cellules seront collées.
Coupure ou copie des cellules d'un tableau
1 Sélectionnez une ou plusieurs cellules dans une ligne contiguë et sous forme rectangulaire.
Dernière mise à jour le 4/5/2011
198
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
Dans l'illustration ci-dessous, la sélection est un rectangle de cellules ; les cellules peuvent donc être coupées ou copiées.
Dans l'illustration ci-dessous, la sélection n'est pas un rectangle ; les cellules ne peuvent donc pas être coupées ou
copiées.
2 Choisissez Edition > Couper ou Edition > Copier.
Remarque : Si vous avez sélectionné une ligne ou une colonne entière et que vous choisissez Edition > Couper, la ligne ou
la colonne entière est supprimée du tableau (et non pas seulement le contenu des cellules).
Collage de cellules d'un tableau
1 Choisissez l'emplacement où coller les cellules :
• Pour remplacer des cellules existantes par les cellules que vous collez, sélectionnez une série de cellules existantes
dont la mise en forme est la même que celle des cellules du Presse-papiers. (Par exemple, si vous avez copié ou coupé
un bloc de 3 x 2 cellules, vous pouvez sélectionner un autre bloc de 3 x 2 cellules pour le remplacer par les cellules
collées.)
• Pour coller une ligne entière de cellules au-dessus d'une cellule spécifique, cliquez dans celle-ci.
• Pour coller une colonne entière de cellules à gauche d'une cellule spécifique, cliquez dans celle-ci.
Remarque : Si vous avez placé moins d'une ligne ou d'une colonne entière dans le Presse-papiers et que vous cliquez dans
une cellule puis collez les cellules figurant dans le Presse-papiers, alors il se peut que la cellule dans laquelle vous avez
cliqué et les cellules voisines (selon leur emplacement dans le tableau) soient remplacées par les cellules que vous avez
collées.
• Pour créer un nouveau tableau avec les cellules collées, placez le point d'insertion hors du tableau.
2 Choisissez Edition > Coller.
Si vous collez des lignes ou des colonnes entières dans un tableau existant, celles-ci s'ajoutent au tableau. Si vous ne
collez qu'une seule cellule, le contenu de la cellule sélectionnée est remplacé. Si vous collez le contenu du Presse-papiers
en dehors d'un tableau, les lignes, colonnes ou cellules que vous collez sont utilisées pour définir un nouveau tableau.
Suppression du contenu d'une cellule en conservant les cellules intactes
1 Sélectionnez une ou plusieurs cellules.
Remarque : Veillez à ce que la sélection ne comprenne pas de lignes ou de colonnes entières.
2 Choisissez Edition > Effacer ou appuyez sur la touche Suppr.
Dernière mise à jour le 4/5/2011
199
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
Remarque : Si seules des lignes ou des colonnes entières sont sélectionnées lorsque vous choisissez Edition > Effacer ou
que vous appuyez sur Suppr, les lignes ou les colonnes entières (pas seulement leurs contenus) sont supprimées du tableau.
Suppression de lignes ou de colonnes contenant des cellules fusionnées
1 Sélectionnez une ligne ou une colonne.
2 Choisissez Modifier > Tableau > Supprimer la ligne ou Modifier > Tableau > Supprimer la colonne.
Imbrication de tableaux
Un tableau imbriqué est un tableau à l'intérieur d'une cellule d'un autre tableau. Vous pouvez le mettre en forme
comme n'importe quel tableau, mais sa largeur est limitée par la largeur de la cellule dans laquelle il se trouve.
1 Cliquez dans une cellule du tableau.
2 Sélectionnez Insérer > Tableau, définissez les options Tableau et cliquez sur OK.
Tri de tableaux
Vous pouvez trier les lignes d'un tableau selon le contenu d'une seule colonne. Vous pouvez également effectuer un tri
plus complexe, selon le contenu de deux colonnes.
Vous ne pouvez pas trier les tableaux contenant colspan ou rowspan, c'est-à-dire les tableaux qui contiennent des
cellules fusionnées.
1 Sélectionnez le tableau ou cliquez dans une cellule.
2 Sélectionnez Commandes > Trier le tableau, définissez les options de la boîte de dialogue et cliquez sur OK.
Trier par Détermine quelles valeurs de colonne utiliser pour trier les lignes du tableau.
Ordre Détermine comment la colonne doit être triée (dans l'ordre alphabétique ou numérique) et si elle doit être triée
par ordre croissant (de A à Z, du chiffre le plus bas au plus élevé) ou par ordre décroissant.
Lorsque le contenu d'une colonne est constitué de chiffres, choisissez Numérique. Un tri par ordre alphabétique
appliqué à une liste de nombres à un ou deux chiffres a pour effet de trier les nombres comme s'il s'agissait de mots
(ayant pour résultat un ordre du type 1, 10, 2, 20, 3, 30) plutôt que comme des nombres (ayant pour résultat un ordre
du type 1, 2, 3, 10, 20, 30).
Puis/Ordre Détermine l'ordre de tri du tri secondaire sur une colonne différente. Indiquez la colonne de tri secondaire
dans le menu contextuel Puis et l'ordre de tri secondaire dans les menus contextuels Ordre.
Le tri inclut la première ligne Indique que la première ligne du tableau doit être incluse dans le tri. Si la première ligne
correspond à un titre à ne pas déplacer, n'activez pas cette option.
Trier les lignes d'en-tête Indique que toutes les lignes de la section thead du tableau (si elle existe) doivent être triées
en utilisant les mêmes critères que pour les lignes de la section body. (Les lignes thead restent dans la section thead
et apparaissent encore en haut du tableau, même après le tri). Pour plus d'informations sur la balise thead, consultez
le panneau Référence (choisissez Aide > Référence).
Trier les lignes de pied de page Indique que toutes les lignes de la section thead du tableau (si elle existe) doivent être
triées en utilisant les mêmes critères que pour les lignes de la section body. (Les lignes tfoot restent dans la section
tfoot et apparaissent encore en bas du tableau, même après le tri). Pour plus d'informations sur la balise tfoot,
consultez le panneau Référence (choisissez Aide > Référence).
Conserver les couleurs des lignes après le tri Spécifie que les attributs des lignes du tableau (tels que la couleur)
doivent rester associés au même contenu après le tri. Si les lignes de votre tableau sont mises en forme avec deux
couleurs alternées, n'activez pas cette option pour vous assurer que les lignes du tableau trié s'affichent toujours avec
Dernière mise à jour le 4/5/2011
200
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
des couleurs alternées. Si les attributs de ligne sont spécifiques au contenu de chaque ligne, sélectionnez cette option
pour vous assurer que ces attributs restent associés aux lignes appropriées dans le tableau trié.
Utilisation de cadres
Fonctionnement des cadres et des jeux de cadres
La partie d'une fenêtre du navigateur pouvant afficher un document HTML indépendamment de ce qui apparaît dans
le reste de la fenêtre constitue un cadre. Les cadres permettent de diviser une fenêtre du navigateur en plusieurs zones,
chacune d'entre elles pouvant afficher un document HTML distinct. En règle générale, un premier cadre affiche un
document avec des commandes de navigation tandis qu'un autre cadre affiche un document avec le contenu principal.
Un jeu de cadres est un fichier HTML qui définit la mise en forme et les propriétés de plusieurs cadres, dont le nombre,
la taille et l'emplacement des cadres, ainsi que l'URL de la page qui s'affiche initialement dans chaque cadre. Le fichier
du jeu de cadres ne contient pas de contenu HTML qui s'affiche dans un navigateur, à l'exception de la section
noframes ; il fournit simplement au navigateur des informations sur la mise en forme d'un jeu de cadres et les
documents qu'il doit afficher.
Pour afficher un jeu de cadres dans un navigateur, tapez l'URL du fichier correspondant. Le navigateur ouvre ensuite
les documents qui devront être affichés dans les cadres. Le fichier du jeu de cadres relatif à un site s'appelle
généralement index.html et s'affiche par défaut si le visiteur ne spécifie pas de nom de fichier.
L'exemple suivant présente une mise en forme de cadre contenant trois cadres : un cadre étroit qui contient la barre de
navigation dans la partie latérale, un cadre en haut du document contenant le logo et le titre d'un site Web et un grand
cadre avec le contenu principal qui occupe le reste de la page. Chacun de ces cadres affiche un document HTML
distinct.
Dernière mise à jour le 4/5/2011
201
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
Dans cet exemple, le document affiché dans le cadre supérieur ne change jamais lorsque les visiteurs consultent le site.
La barre de navigation du cadre latéral contient des liens qui, lorsqu'ils sont activés, modifient le contenu du cadre
principal, mais pas le contenu du cadre latéral. Le cadre de contenu principal à droite affiche le document
correspondant à tous les liens activés par le visiteur dans la partie gauche.
Un cadre n'est pas un fichier ; on pourrait croire que le document affiché dans un cadre fait partie intégrante de ce
dernier, mais ce n'est pas le cas. Le cadre contient le document.
Remarque : Une « page » peut désigner un seul document HTML ou l'ensemble du contenu d'une fenêtre du navigateur
à un moment donné, même si plusieurs documents HTML sont affichés simultanément. Par exemple, l'expression « une
page qui utilise des cadres » s'applique généralement à un jeu de cadres et aux documents qui y figurent.
Tout site affiché dans un navigateur sous forme d'une page unique constituée de trois cadres contient en fait au moins
quatre documents HTML, à savoir, le fichier du jeu de cadres et les trois documents incluant le contenu qui s'affiche
initialement dans les cadres. Lorsque vous concevez une page à l'aide de jeux de cadres dans Dreamweaver, vous devez
enregistrer chacun de ces quatre fichiers pour que la page s'affiche correctement dans le navigateur.
Pour obtenir des informations plus détaillées sur les cadres, consultez le site Web de Thierry Koblentz à l'adresse
www.tjkdesign.com/articles/frames/.
Choix de l'utilisation des cadres
Adobe déconseille l'emploi de cadres pour la mise en page d'une page Web. Parmi les inconvénients de l'emploi de
cadres, citons :
• L'alignement graphique des éléments de différents cadres n'est pas toujours précis.
• Le test de la navigation peut être long.
• Comme l'URL de chacune des pages contenues dans les cadres n'est pas affichée dans le navigateur, les visiteurs
risquent de ne pas pouvoir ajouter de signet à une page donnée (à moins que vous ne fournissiez le code du serveur
permettant de charger la version avec cadres d'une page).
Pour obtenir une justification détaillée de la raison pour laquelle il ne faut pas utiliser des cadres, consultez le site de
Gary White à l'adresse http://apptools.com/rants/framesevil.php.
Si vous décidez des les utiliser, les cadres servent généralement à la navigation. Un jeu de cadres inclut généralement
un cadre contenant une barre de navigation et un cadre destiné à afficher le contenu principal. L'emploi de cadres de
cette façon offre quelques avantages.
• Le navigateur d'un visiteur n'a pas besoin de recharger les graphiques liés à la navigation à chaque page.
• Chaque cadre possède sa propre barre de défilement (si le contenu ne tient pas entièrement dans une fenêtre) pour
que le visiteur puisse faire défiler les cadres indépendamment les uns des autres. Par exemple, un visiteur ayant fait
défiler une longue page de contenu jusqu'en bas n'est pas obligé de la faire défiler à nouveau vers le haut pour
afficher la barre de navigation si celle-ci figure dans un autre cadre.
Dernière mise à jour le 4/5/2011
202
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
Dans la plupart des cas, vous pouvez créer une page Web sans cadre qui permet d'obtenir les mêmes résultats qu'avec
un jeu de cadres. Par exemple, si vous voulez afficher une barre de navigation à gauche de la page, vous pouvez
remplacer la page par un jeu de cadres ou simplement inclure la barre de navigation sur chacune des pages du site
(Dreamweaver vous permet de créer plusieurs pages dont la mise en forme est identique.) Dans l'exemple suivant, la
mise en forme de la page ressemble à une mise en forme avec cadres, mais elle n'en contient pas.
Les sites Web mal conçus utilisent des cadres de façon inutile, avec, par exemple, un jeu de cadres qui recharge le
contenu des cadres de navigation chaque fois que le visiteur clique sur un bouton de navigation. S'ils sont correctement
utilisés (par exemple, pour immobiliser les commandes de navigation dans un cadre tout en permettant de modifier le
contenu d'un autre cadre), les cadres peuvent être très utiles dans un site.
La prise en charge des cadres varie en fonction du navigateur utilisé. En outre, la navigation des cadres peut s'avérer
difficile pour les visiteurs souffrant de handicaps. Par conséquent, si vous utilisez des cadres, incorporez
systématiquement une section noframes dans votre jeu de cadres pour les visiteurs qui ne peuvent pas les visualiser.
Vous pouvez également fournir un lien explicite vers une version sans cadre du site.
Pour obtenir des informations plus détaillées sur les cadres, consultez le site Web de Thierry Koblentz à l'adresse
www.tjkdesign.com/articles/frames/.
Jeux de cadres imbriqués
Un jeu de cadres imbriqué est un jeu de cadres situé à l'intérieur d'un autre jeu de cadres. Un fichier de jeu de cadres
peut contenir plusieurs jeux de cadres imbriqués. La plupart des pages Web avec des cadres utilisent en fait des cadres
imbriqués, de même que la plupart des jeux de cadres prédéfinis dans Dreamweaver. Tout jeu de cadres comportant
un nombre différent de cadres dans différentes lignes ou colonnes doit être imbriqué.
Par exemple, la mise en forme de cadre la plus courante affiche un cadre sur la ligne supérieure (où figure le logo de
l'entreprise) et deux cadres sur la ligne inférieure (cadre de navigation et cadre de contenu). Dans ce cas, un jeu de
cadres doit être imbriqué : vous obtenez alors un jeu de cadres de deux lignes et un jeu de cadres de deux colonnes
imbriqué dans la deuxième ligne.
Dernière mise à jour le 4/5/2011
203
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
A
B
A. Jeu de cadres principal B. Le cadre de menus et le cadre de contenu sont imbriqués dans le jeu de cadres principal.
Dreamweaver gère automatiquement l'imbrication des jeux de cadres. Si vous faites appel aux outils de fractionnement
de cadre dans Dreamweaver, le programme se charge de définir les cadres qui doivent être imbriqués et ceux qui
doivent rester tels quels.
Vous pouvez imbriquer les jeux de cadres de deux façons dans HTML : le jeu de cadres interne peut être défini dans le
même fichier que le jeu de cadres externe, ou dans un fichier distinct. Chaque jeu de cadres prédéfini dans
Dreamweaver définit tous ses jeux de cadres dans le même fichier.
Les deux types d'imbrication produisent des résultats visuels identiques. A moins d'examiner le code, il n'est pas facile
de savoir quel type d'imbrication est utilisé. En règle générale, Dreamweaver utilise un fichier de jeu de cadres externe
lorsque vous exécutez la commande Ouvrir dans un cadre pour ouvrir un fichier de jeu de cadres à l'intérieur d'un
cadre. Dans ce cas, vous risquez de ne pas pouvoir définir correctement les cibles des liens. Il est souvent plus simple
de garder tous les jeux de cadres définis dans un seul fichier.
Utilisation de jeux de cadres dans la fenêtre de document
Dreamweaver permet d'afficher et de modifier tous les documents associés à un jeu de cadres dans une seule fenêtre
de document. Vous pouvez ainsi afficher un aperçu approximatif des pages insérées dans des cadres et les modifier à
votre convenance dans le navigateur. Toutefois, certains aspects de cette approche peuvent être déroutants si vous ne
les maîtrisez pas parfaitement. En particulier, chaque cadre affiche un document HTML distinct. Même si les
documents sont vides, vous devez les enregistrer avant de les prévisualiser. En effet, vous ne pouvez afficher un aperçu
précis du jeu de cadres que s'il contient l'URL d'un document à afficher dans chaque cadre.
Pour vous assurer que le jeu de cadres s'affiche correctement dans les navigateurs, exécutez la procédure suivante :
1 Créez un jeu de cadres et spécifiez le document qui devra apparaître dans chaque cadre.
2 Enregistrez chaque fichier qui apparaîtra dans un cadre. N'oubliez pas que chaque cadre affiche un document
HTML différent et que vous devez enregistrer chaque document avec le fichier de jeu de cadres.
3 Définissez les propriétés de chaque cadre et du jeu de cadres (notamment, nommez chaque cadre, définissez les
options de défilement et d'absence de défilement).
4 Dans l'inspecteur Propriétés, définissez la propriété Cible pour tous les liens afin que le contenu lié apparaisse dans
la zone appropriée.
Dernière mise à jour le 4/5/2011
204
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
Création de cadres et de jeux de cadres
Il y a deux façons de créer un jeu de cadres dans Dreamweaver : vous pouvez sélectionner un jeu de cadres prédéfini
ou le concevoir vous-même.
Si vous choisissez un jeu de cadres prédéfini, tous les jeux de cadres et cadres nécessaires à la création de la mise en
forme sont configurés, ce qui représente le moyen le plus simple d'insérer rapidement une mise en forme avec des
cadres dans la page. Vous pouvez uniquement insérer un jeu de cadres prédéfini dans la fenêtre de document en mode
Création.
Vous pouvez concevoir votre propre jeu de cadres dans Dreamweaver en ajoutant des « séparateurs » à la fenêtre.
Avant de créer un jeu de cadres ou d'utiliser des cadres, affichez les bordures de cadres en mode Création dans la
fenêtre de document en choisissant Affichage > Assistances visuelles > Bordures de cadre.
Voir aussi
« Dreamweaver et l'accessibilité » à la page 716
Création d'un jeu de cadres prédéfini et affichage d'un document existant dans un cadre
1 Placez le point d’insertion dans un document et procédez de l’une des manières suivantes :
•
Choisissez Insertion > HTML > Cadres et sélectionnez un jeu de cadres prédéfini.
• Dans la catégorie Mise en forme du panneau Insertion, cliquez sur la flèche du bouton Cadres et choisissez un jeu
de cadres prédéfini.
Les icônes de jeu de cadres fournissent une représentation visuelle de chaque jeu de cadres appliqué au document en
cours. La zone bleue de l'icône du jeu de cadres représente le document courant et la zone blanche les cadres qui
afficheront d'autres documents.
2 Si vous avez configuré Dreamweaver pour qu'il vous invite à définir des attributs d'accessibilité des cadres,
sélectionnez un cadre dans le menu déroulant, entrez un nom pour la cadre et cliquez sur OK. (Pour les visiteurs
qui en utilisent un, le lecteur d'écran lit ce nom lorsqu'il rencontre le cadre sur une page.)
Remarque : Si vous cliquez sur OK sans entrer de nouveau nom, Dreamweaver donne au cadre un nom qui correspond
à sa position (cadre de gauche, cadre de droite, etc.) dans le jeu de cadres.
Remarque : Si vous cliquez sur Annuler, le jeu de cadres s'affiche dans le document, mais Dreamweaver ne lui associe ni
les balises ni les attributs d'accessibilité.
Choisissez Fenêtre > Cadres pour afficher un diagramme des cadres que vous nommez.
Création d'un jeu de cadres prédéfini vide
1 Choisissez Fichier > Nouveau.
2 Dans la boîte de dialogue Nouveau document, sélectionnez la catégorie Exemple de page.
3 Sélectionnez le dossier Jeu de cadres dans la colonne Dossier exemple.
4 Sélectionnez un jeu de cadres dans la colonne Exemple de page, puis cliquez sur Créer.
5 Si vous avez activé les attributs d'accessibilité aux cadres dans Préférences, la boîte de dialogue Attributs
d'accessibilité aux balises de cadre s'affiche ; renseignez la boîte de dialogue pour chaque cadre et cliquez sur OK.
Remarque : Si vous cliquez sur Annuler, le jeu de cadres s'affiche dans le document, mais Dreamweaver ne lui associe ni
les balises ni les attributs d'accessibilité.
Dernière mise à jour le 4/5/2011
205
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
Création d'un jeu de cadres
❖ Dans le sous-menu Modifier > Jeu de cadres, choisissez une option de fractionnement (par exemple, Fractionner
le cadre à gauche ou Fractionner le cadre à droite).
Dreamweaver fractionne la fenêtre en cadres. Si vous aviez un document existant ouvert, il apparaît dans l'un des
cadres.
Fractionnement d'un cadre en cadres plus petits
• Pour fractionner le cadre au niveau du point d'insertion, choisissez une option de fractionnement dans le sousmenu Modifier > Jeu de cadres.
• Pour fractionner un cadre ou un jeu de cadres verticalement ou horizontalement, faites glisser une bordure de cadre
du bord vers le centre de la fenêtre en mode Création.
• Pour fractionner un cadre à l'aide d'une bordure de cadre qui ne se trouve pas sur le bord de la fenêtre en mode
Création, faites glisser une bordure de cadre tout en maintenant la touche Alt (Windows) ou Option (Macintosh)
enfoncée.
• Pour diviser un cadre en quatre, faites glisser une bordure de cadre de l'un des coins de la fenêtre en mode Création
vers le centre d'un cadre.
Pour créer trois cadres, créez-en d'abord deux, puis fractionnez l'un d'eux. L'opération de fusion de deux cadres
adjacents sans modifier le code du jeu de cadres étant relativement ardue, il est plus difficile de convertir quatre cadres
en trois cadres que deux cadres en trois cadres.
Suppression d'un cadre
❖ Faites glisser une bordure de cadre en dehors de la page ou vers une bordure du cadre parent.
Si vous supprimez un cadre dans lequel se trouve un document qui n'a pas été enregistré, Dreamweaver vous invite à
enregistrer ce dernier.
Remarque : Vous ne pouvez pas entièrement supprimer un jeu de cadres en faisant glisser ses bordures. Pour le supprimer
complètement, fermez la fenêtre de document qui l'affiche. Si le fichier du jeu de cadres a été enregistré, supprimez le
fichier.
Redimensionnement d'un cadre
• Pour définir la taille approximative des cadres, faites glisser une bordure de cadre dans la fenêtre de document en
mode Création.
• Pour définir des tailles exactes et spécifier l'espace alloué par le navigateur à une ligne ou une colonne de cadres
lorsque la taille de la fenêtre du navigateur ne permet pas d'afficher les cadres dans leur totalité, utilisez l'inspecteur
Propriétés.
Sélection de cadres et de jeux de cadres
Pour modifier les propriétés d'un cadre ou d'un jeu de cadres, vous devez au préalable le sélectionner dans la fenêtre
de document ou en utilisant le panneau Cadres.
Dernière mise à jour le 4/5/2011
206
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
Le panneau Cadres donne une représentation visuelle des cadres dans un jeu de cadres. Il affiche la hiérarchie de la
structure du jeu de cadres qui n'apparaît pas forcément dans la fenêtre de document. Dans le panneau Cadres, une épaisse
bordure entoure le jeu de cadres, une fine ligne grise entoure chaque cadre et chaque cadre est identifié par un nom.
Lorsqu'un cadre est sélectionné dans la fenêtre de document, en mode Création, sa bordure s'affiche avec une ligne en
pointillé ; lorsqu'un jeu de cadres est sélectionné, toutes les bordures des cadres à l'intérieur de ce jeu s'affichent avec
une ligne en pointillé plus fine.
Remarque : La sélection d'un cadre et le placement d'un point d'insertion dans un document affiché dans un cadre sont
deux opérations différentes. Vous serez amené à sélectionner un cadre dans de nombreux cas (par exemple, lorsque vous
définissez les propriétés d'un cadre).
Sélection d'un cadre ou d'un jeu de cadres dans le panneau Cadres
1 Choisissez Fenêtre > Cadres.
2 Dans le panneau Cadres :
• Pour sélectionner un cadre, cliquez sur le cadre. Des lignes de sélection apparaissent autour du cadre dans le
panneau Cadres et dans la fenêtre de document, en mode Création.
• Pour sélectionner un jeu de cadres, cliquez sur la bordure qui l'entoure.
Sélection d'un cadre ou d'un jeu de cadres dans la fenêtre de document
• En mode Création, pour sélectionner un cadre, cliquez dans celui-ci tout en maintenant les touches Maj+Alt
(Windows) ou Maj+Option (Macintosh) enfoncées.
• En mode Création, pour sélectionner un jeu de cadres, cliquez sur l'une des bordures du cadre interne du jeu de
cadres. Vous devez d'abord vous assurer que les bordures sont visibles ; pour cela, choisissez Affichage >
Assistances visuelles > Bordures de cadre.
Remarque : Il est souvent plus simple de sélectionner les jeux de cadres dans le panneau Cadres que dans la fenêtre de
document. Pour plus d'informations, consultez les rubriques ci-dessus.
Dernière mise à jour le 4/5/2011
207
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
Sélection d'un cadre ou d'un jeu de cadre différent
• Pour sélectionner le cadre ou le jeu de cadres suivant ou précédent au même niveau hiérarchique que la sélection
en cours, appuyez sur la flèche gauche ou droite tout en maintenant la touche Alt (Windows) ou Commande
(Macintosh) enfoncée. Ces touches vous permettent de parcourir les cadres et jeux de cadres dans l'ordre dans
lequel ils sont définis dans le fichier du jeu de cadres.
• Pour sélectionner le jeu de cadres parent (celui qui contient la sélection en cours), appuyez sur la flèche haut tout
en maintenant la touche Alt (Windows) ou Commande (Macintosh) enfoncée.
• Pour sélectionner le premier cadre ou jeu de cadres enfant de la sélection courante (en respectant l'ordre dans lequel
ils sont définis dans le fichier du jeu de cadres), appuyez sur la flèche bas tout en maintenant la touche Alt
(Windows) ou Commande (Macintosh) enfoncée.
Ouverture d'un document dans un cadre
Vous pouvez spécifier le contenu initial d'un cadre en insérant un nouveau contenu dans un document vide ou en
ouvrant un document dans un cadre.
1 Placez le point d'insertion dans un cadre.
2 Choisissez Fichier > Ouvrir dans un cadre.
3 Sélectionnez un document à ouvrir dans le cadre et cliquez sur OK (Windows) ou Choisir (Macintosh).
4 (Facultatif) Si vous voulez afficher ce document par défaut dans le cadre lorsque le jeu de cadres est ouvert dans un
navigateur, enregistrez le jeu de cadres.
Enregistrement des fichiers du cadre et du jeu de cadres
Avant d'afficher l'aperçu d'un jeu de cadres dans un navigateur, vous devez enregistrer le fichier correspondant et tous
les documents qui seront affichés dans les cadres. Vous pouvez enregistrer le fichier du jeu de cadres et chacun des
documents contenus dans les cadres individuellement ou enregistrer le fichier du jeu de cadres et tous les fichiers
contenus dans les cadres simultanément.
Remarque : Si vous faites appel aux outils visuels de Dreamweaver pour créer un jeu de cadres, un nom de fichier par
défaut est attribué à chaque nouveau document apparaissant dans un cadre. Par exemple, le premier fichier du jeu de
cadres s'appelle Jeu de cadres sans nom-1, tandis que le premier document d'un cadre s'intitule Cadre sans nom-1.
Enregistrement d'un fichier de jeu de cadres
❖ Sélectionnez le jeu de cadres dans le panneau Cadres ou dans la fenêtre de document.
• Pour enregistrer le fichier de jeu de cadres, choisissez Fichier > Enregistrer le jeu de cadres.
• Pour enregistrer le fichier de jeu de cadres en tant que nouveau fichier, choisissez Fichier > Enregistrer le jeu de
cadres sous.
Remarque : Si le fichier du jeu de cadres n'a pas été enregistré, ces deux commandes sont équivalentes.
Enregistrement d'un document qui apparaît à l'intérieur d'un cadre
❖ Cliquez dans le cadre, puis choisissez Fichier > Enregistrer le cadre ou Fichier > Enregistrer le cadre sous.
Enregistrement de tous les fichiers associés à un jeu de cadres
❖ Choisissez Fichier > Enregistrer tous les cadres.
Dernière mise à jour le 4/5/2011
208
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
Cette commande enregistre tous les documents ouverts dans le jeu de cadres, y compris le fichier du jeu de cadres et
tous les documents encadrés. Si le fichier du jeu de cadres n'a pas été enregistré, une épaisse bordure entoure le jeu de
cadres (ou le cadre non enregistré) en mode Création et vous pouvez sélectionner un nom de fichier.
Remarque : Si vous avez utilisé la commande Fichier > Ouvrir dans un cadre pour ouvrir un document dans un cadre,
lorsque vous enregistrez le jeu de cadres, le document ouvert devient le document par défaut qui sera affiché dans ce cadre.
N'enregistrez pas le fichier du jeu de cadres si vous ne voulez pas que ce document soit utilisé par défaut.
Affichage et définition des des propriétés et des attributs de cadre
Utilisez l'inspecteur Propriétés pour afficher et définir la plupart des propriétés de cadre, notamment les bordures, les
marges et l'affichage ou non de barres de défilement dans les cadres. La définition d'une propriété de cadre est
prépondérante sur la définition de cette propriété pour le jeu de cadres.
Si vous le souhaitez, définissez des attributs de cadre, comme l'attribut title (qui est différent de l'attribut name), pour
améliorer l'accessibilité. Vous pouvez activer l'option de programmation de l'accessibilité pour les cadres afin de
définir des attributs lorsque vous créez des cadres ou bien définir des attributs après avoir inséré un cadre. Pour
modifier les attributs d'accessibilité d'un cadre, utilisez l'inspecteur de balises afin de modifier directement le code
HTML.
Voir aussi
« Dreamweaver et l'accessibilité » à la page 716
Affichage ou définition des propriétés des cadres
1 Sélectionnez un cadre en utilisant l'une des méthodes suivantes :
• Dans la fenêtre de document (mode Création), cliquez dans le cadre tout en maintenant les touches Alt (Windows)
ou Maj+Option (Macintosh) enfoncées.
• Cliquez sur le cadre dans le panneau Cadres (Fenêtre > Cadres).
2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), cliquez sur la flèche d'agrandissement située dans le coin
inférieur droit pour visualiser toutes les propriétés des cadres.
3 Définition des options de l'inspecteur Propriétés des cadres
Nom du cadre Nom du cadre est le nom utilisé par l'attribut target d'un lien ou par un script pour référencer le cadre.
Un nom de cadre ne doit contenir qu'un seul mot. Les traits de soulignement (_) sont autorisés, mais pas les tirets ( –
), points (.) et espaces. Les noms de cadres doivent commencer par une lettre (et non un chiffre). Ils tiennent compte
des majuscules et des minuscules. N'utilisez pas de termes réservés dans JavaScript (tels que les mots top ou navigator)
comme noms de cadre.
Pour qu'un lien modifie le contenu d'un autre cadre, vous devez attribuer un nom au cadre cible. Pour faciliter la
création de liens entre plusieurs cadres, donnez un nom à chaque cadre que vous créez.
Src Spécifie le document source à afficher dans le cadre. Cliquez sur l'icône de dossier pour rechercher et sélectionner
un fichier.
Défiler Détermine si des barres de défilement apparaissent dans le cadre. La définition de cette option sur Par défaut
n'affecte aucune valeur à l'attribut correspondant, si bien que chaque navigateur peut utiliser sa valeur par défaut. Dans
la plupart des navigateurs, la valeur par défaut est Auto. Par conséquent, les barres de défilement n'apparaissent que si
la fenêtre du navigateur ne peut pas afficher la totalité du contenu du cadre courant.
Ne pas redimens. Empêche les visiteurs de déplacer les bordures du cadre pour redimensionner ce dernier dans un
navigateur.
Dernière mise à jour le 4/5/2011
209
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
Remarque : Vous pouvez toujours redimensionner les cadres dans Dreamweaver ; cette option ne s'applique qu'aux
visiteurs qui souhaitent afficher les cadres dans un navigateur.
Bordures Affiche ou masque les bordures du cadre courant lorsqu'il est affiché dans un navigateur. L'option Bordures
remplace les paramètres de bordure du jeu de cadres.
Les options de bordure sont Oui (afficher les bordures), Non (masquer les bordures) et Par défaut. Dans la plupart des
navigateurs, la valeur proposée est Oui, à moins que l'option Bordures du jeu de cadres parent ne soit définie sur Non.
Si plusieurs cadres partagent une même bordure, celle-ci n'est masquée que lorsque l'option Bordures est définie sur
Non pour tous les cadres ou lorsque la propriété Bordures du jeu de cadres parent est définie sur Non et l'option
Bordures sur Par défaut.
Couleur de la bordure Définit la couleur de toutes les bordures du cadre. Cette couleur s'applique à toutes les bordures
adjacentes au cadre et remplace celle du jeu de cadres.
Largeur de marge Définit la largeur en pixels des marges gauche et droite (c'est-à-dire l'espace séparant la bordure du
cadre de son contenu).
Hauteur de marge Définit la hauteur en pixels des marges supérieure et inférieure (c'est-à-dire l'espace séparant la
bordure du cadre de son contenu).
Remarque : La définition de la largeur et de la hauteur d'un cadre et la définition des marges dans la boîte de dialogue
Modifier > Propriétés de la page sont deux opérations différentes.
Pour modifier la couleur d'arrière-plan d'un cadre, vous devez définir la couleur d'arrière-plan du document dans le
cadre dans les propriétés de la page.
Définition des valeurs d'accessibilité d'un cadre
1 Dans le panneau Cadres (Fenêtre > Cadres), sélectionnez un cadre en plaçant le point d'insertion dans l'un des
cadres.
2 Choisissez Modifier > Modifier la balise <jeu de cadres>.
3 Sélectionnez Feuille de style/Accessibilité dans la liste de catégories située à gauche, entrez des valeurs et cliquez sur OK.
Définition des valeurs d'accessibilité d'un cadre
1 Affichez votre document en mode Code ou Code et création si vous êtes en mode Création.
2 Dans le panneau Cadres (Fenêtre > Cadres), sélectionnez un cadre en plaçant le point d'insertion dans l'un des
cadres. Dreamweaver met en surbrillance la balise du cadre dans le code.
3 Cliquez dans le code du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée
(Macintosh), et choisissez Modifier la balise.
4 Dans l'éditeur de balises, effectuez les modifications nécessaires et cliquez sur OK.
Modification de la couleur d'arrière-plan d'un document dans un cadre
1 Placez le point d'insertion dans le cadre.
2 Choisissez Modifier > Propriétés de la page.
3 Dans la boîte de dialogue Propriétés de la page, cliquez sur le menu déroulant Couleur d'arrière-plan, puis
sélectionnez une couleur.
Dernière mise à jour le 4/5/2011
210
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
Affichage et définition des propriétés de jeux de cadres
Utilisez l'inspecteur Propriétés pour afficher et définir la plupart des propriétés de jeu de cadres, notamment le titre du
jeu de cadre, les bordures et les tailles des cadres.
Définition du titre du document d'un jeu de cadres
1 Sélectionnez un jeu de cadres en utilisant l'une des méthodes suivantes :
• Cliquez sur une bordure entre deux cadres du jeu de cadres dans la fenêtre de document en mode Création.
• Cliquez sur la bordure d'un jeu de cadres dans le panneau Cadres (Fenêtre > Cadres).
2 Dans la zone Titre de la barre d'outils du document, tapez le nom du document de jeu de cadres.
Lorsqu'un visiteur affiche le jeu de cadres dans un navigateur, le titre apparaît dans la barre de titre.
Affichage ou définition des propriétés de jeux de cadres
1 Sélectionnez un jeu de cadres en utilisant l'une des méthodes suivantes :
• Cliquez sur une bordure entre deux cadres du jeu de cadres dans la fenêtre de document en mode Création.
• Cliquez sur la bordure d'un jeu de cadres dans le panneau Cadres (Fenêtre > Cadres).
2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), cliquez sur la flèche d'agrandissement située dans le coin
inférieur droit et définissez les options de jeu de cadres.
Bordures Détermine si des bordures apparaissent ou non autour des cadres lorsque le document est affiché dans un
navigateur. Pour afficher les bordures, sélectionnez Oui ; sinon, sélectionnez Non. Pour que le navigateur détermine
l'affichage des bordures, sélectionnez Par défaut.
Largeur de bord Spécifie la largeur de toutes les bordures du jeu de cadres.
Couleur de la bordure Définit la couleur des bordures. Sélectionnez une couleur avec le sélecteur de couleur ou entrez
la valeur hexadécimale de la couleur.
Sélection lig./col. Définit la taille des cadres des lignes et colonnes du jeu de cadres sélectionné ; cliquez sur un onglet
du côté gauche ou en haut de la zone Sélection lig./col., puis tapez une hauteur ou une largeur dans la zone de texte
Valeur.
3 Pour définir l'espace alloué par le navigateur à chaque cadre, choisissez l'une des options suivantes dans le menu
Unités :
Pixels Définit la taille de la colonne ou de la ligne sélectionnée en lui attribuant une valeur absolue. Choisissez cette
option pour les cadres dont la taille ne change pas, comme la barre de navigation. Un espace est alloué aux cadres dont
la taille est spécifiée en pixels, puis aux cadres dont la taille est relative ou spécifiée en pourcentage. En règle générale,
il est recommandé de définir une largeur fixe en pixels pour le cadre de gauche et une largeur relative pour le cadre de
droite afin que ce dernier puisse occuper l'espace restant une fois la largeur en pixels allouée.
Remarque : Si toutes les largeurs sont en pixels et qu'un visiteur affiche le jeu de cadres dans un navigateur dont la largeur
est inférieure ou supérieure à celle que vous avez spécifiée, les cadres sont automatiquement redimensionnés en fonction
de l'espace disponible. Ceci s'applique également aux hauteurs spécifiées en pixels. Par conséquent, il est recommandé de
spécifier au moins une largeur et une hauteur relatives.
Dernière mise à jour le 4/5/2011
211
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
Pourcent Définit la colonne ou la ligne sélectionnée comme pourcentage de la largeur ou de la hauteur totale de son
jeu de cadres. L'espace des cadres définis avec cette option est alloué après celui des cadres définis en pixels, mais avant
celui des cadres définis avec l'option Relatif.
Relatif Indique qu'une fois l'espace des cadres définis en Pixel et en Pour-cent attribué, l'espace restant doit être alloué
à la colonne ou à la ligne sélectionnée. Cet espace est réparti proportionnellement entre les cadres de taille relative.
Remarque : Lorsque vous choisissez l'option Relatif dans le menu Unités, tout nombre figurant dans le champ Valeur
disparaît. Pour le spécifier, vous devez le taper de nouveau. En revanche, si une seule ligne ou colonne est définie sur
Relatif, vous n'avez pas besoin de retaper un nombre, car tout l'espace restant lui est alloué, une fois celui des autres lignes
et colonnes a été attribué. Pour garantir la compatibilité inter-navigateurs, vous pouvez taper 1 dans le champ Valeur.
Cela revient à ne pas spécifier de valeur du tout.
Contrôle des contenus de cadre avec des liens
Pour utiliser un lien dans un cadre en vue d'ouvrir un document dans un autre cadre, vous devez définir la cible du
lien. L'attribut target d'un lien spécifie le cadre ou la fenêtre dans lequel ou laquelle le contenu associé au lien s'ouvre.
Par exemple, si la barre de navigation se trouve dans le cadre gauche et que vous voulez afficher le document lié dans
le cadre de contenu principal à droite, vous devez définir le nom de ce dernier comme la cible de chacun des liens de
la barre de navigation. Lorsqu'un visiteur clique sur un lien de navigation, le contenu spécifié s'ouvre dans le cadre
principal.
1 En mode Création, choisissez un texte ou un objet.
2 Dans la zone Lien de l'inspecteur Propriétés (Fenêtre > Propriétés), procédez de l'une des manières suivantes :
• Cliquez sur l'icône de dossier et sélectionnez le fichier avec lequel établir le lien.
• Faites glisser l'icône Pointer vers un fichier dans le panneau Fichiers et sélectionnez le fichier avec lequel établir le
lien.
3 Dans le menu déroulant Cible de l'inspecteur Propriétés, sélectionnez la fenêtre ou le cadre dans lequel doit
s'afficher le document lié :
•
_blank ouvre le document lié dans une nouvelle fenêtre du navigateur sans toucher à la fenêtre courante.
•
_parent ouvre le document lié dans le jeu de cadres parent du cadre dans lequel figure le lien, en remplaçant tout
le jeu de cadres.
•
_self ouvre le lien dans le cadre en cours, en remplaçant le contenu de ce cadre.
•
_top ouvre le document lié dans la fenêtre du navigateur courant, en remplaçant tous les cadres.
Les noms des cadres apparaissent également dans ce menu. Sélectionnez un cadre nommé dans lequel s'ouvrira le
document lié.
Remarque : Les noms des cadres s'affichent uniquement lorsque vous modifiez un document dans un jeu de cadres. Si
vous modifiez un document dans sa propre fenêtre, les noms des cadres n'apparaissent pas dans le menu déroulant Cible.
Si vous modifiez un document en dehors du jeu de cadres, vous pouvez taper le nom du cadre cible dans la zone de texte
Cible.
Si vous établissez un lien vers une page située en dehors de votre site, utilisez toujours target="_top" ou
target="_blank" pour vous assurer que la page ne soit pas considérée comme faisant partie de votre site.
Dernière mise à jour le 4/5/2011
212
UTILISATION DE DREAMWEAVER
Mise en forme des pages avec HTML
Fourniture de contenu pour les navigateurs ne prenant pas les cadres en
charge
Dreamweaver vous permet de définir le contenu à afficher dans les navigateurs graphiques plus anciens et basés sur le
texte qui ne prennent pas en charge les cadres. Ce contenu, encadré de balises noframes, est stocké dans le fichier du
jeu de cadres. Lorsqu'un navigateur qui ne gère pas les cadres charge un fichier de jeu de cadres, il affiche uniquement
le contenu des balises noframes.
Remarque : La zone noframes doit contenir un texte plus détaillé que « Vous devez mettre votre navigateur à jour pour
pouvoir utiliser des cadres ». Certains visiteurs de sites utilisent des systèmes qui ne leur permettent pas d'afficher les
cadres.
1 Choisissez Modifier > Jeu de cadres > Modifier le contenu sans cadres.
Dreamweaver efface ce qui se trouve dans la fenêtre en mode Création et les mots « Contenu sans cadres » apparaissent
dans la zone supérieure.
2 Effectuez l'une des opérations suivantes :
• Dans la fenêtre de document, tapez ou insérez le contenu, comme vous le feriez pour un document ordinaire.
• Sélectionnez Fenêtre > Inspecteur de code, placez le point d'insertion entre les balises body qui se trouvent à
l'intérieur des balises noframes, puis tapez le code HTML pour le contenu
3 Choisissez de nouveau Modifier > Jeu de cadres > Modifier le contenu sans cadres pour revenir au mode normal
du document jeu de cadres.
Utilisation des comportements JavaScript avec les cadres
Plusieurs comportements JavaScript et commandes de navigation sont particulièrement bien adaptés à l'utilisation de
cadres :
Texte du cadre Remplace le contenu et le formatage d'un cadre par le contenu que vous spécifiez. Ce contenu peut être
n'importe quel texte valide en HTML Cette action permet d'afficher les informations dans un cadre de façon
dynamique
Atteindre l'URL Ouvre une nouvelle page dans la fenêtre en cours ou dans le cadre indiqué. Cette action est
particulièrement utile pour modifier d'un seul clic le contenu de deux cadres ou plus
Insérer menu de reroutage Permet de configurer une liste de liens, dans un menu, qui ouvrent des fichiers dans une
fenêtre du navigateur lorsque l'on clique dessus. Vous pouvez également cibler une fenêtre ou un cadre particuliers
dans lesquels le document s'ouvrira.
Pour plus d'informations, consultez la section « Ajout de comportements JavaScript » à la page 360.
Voir aussi
« Application du comportement Texte d'un cadre » à la page 370
« Application du comportement Atteindre l'URL » à la page 367
« Application du comportement Définir image barre de navigation » à la page 370
« Application du comportement Menu de reroutage » à la page 368
Dernière mise à jour le 4/5/2011
213
Chapitre 8 : Ajout de contenu dans les
pages
Utilisation des pages
Utilisation du panneau Insertion
Les boutons qui composent le panneau Insertion permettent de créer et d'insérer des objets, tels que des tableaux et
des images. Ces boutons sont organisés en plusieurs catégories.
Voir aussi
« Présentation du panneau Insertion » à la page 14
« Modification de balises avec des éditeurs de balises » à la page 325
« Sélection et affichage d'éléments dans la fenêtre de document » à la page 220
Masquage ou affichage du panneau Insertion
❖ Choisissez Fenêtre > Insérer.
Remarque : Si vous utilisez certaines types de fichiers, tels que XML, JavaScript, Java et CSS, le panneau Insertion et
l'option de mode Création sont grisés, car vous ne pouvez pas insérer d'éléments dans ces fichiers de code.
Affichage des boutons d'une catégorie
❖ Sélectionnez le nom de la catégorie dans le menu Catégorie. Par exemple, pour afficher les boutons de la catégorie
Mise en forme, sélectionnez Mise en forme.
Dernière mise à jour le 4/5/2011
214
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Affichage du menu d'un bouton
❖ Cliquez sur le bouton fléché pointant vers le bas situé près de l'icône du bouton.
Insertion d'un objet
1 Choisissez la catégorie appropriée dans le menu Catégorie du panneau Insertion.
2 Effectuez l'une des opérations suivantes :
• Cliquez sur un bouton d'objet ou faites glisser l'icône du bouton dans la fenêtre de document.
• Cliquez sur la flèche d'un bouton, puis sélectionnez une option dans le menu.
Selon le type d'objet que vous sélectionnez, une boîte de dialogue d'insertion d'objet s'affiche, le cas échéant, et vous
invite à rechercher un fichier ou à spécifier les paramètres d'un objet spécifique. En outre, Dreamweaver vous permet
d'insérer du code dans le document ou d'ouvrir un éditeur de balises ou un panneau vous permettant de spécifier les
informations avant l'insertion du code.
Dans le cas de certains objets, aucune boîte de dialogue ne s'affiche si vous insérez les objets en mode Création, mais
un éditeur de balises s'affiche si vous insérez les objets en mode Code. Pour d'autres objets, lorsque vous essayez
d'insérer des objets en mode Création, Dreamweaver passe en mode Code avant de réaliser l'insertion.
Remarque : Certains objets, tels que les ancres nommées, ne sont pas visibles lorsque vous visualisez la page dans la
fenêtre d'un navigateur. Vous pouvez afficher des icônes en mode Création indiquant l'emplacement de ces objets
invisibles.
Contournement de la boîte de dialogue d'insertion d'objets et insertion d'un espace réservé
vide
❖ Appuyez sur la touche Ctrl (Windows) ou Option (Macintosh) tout en cliquant avec la souris sur le bouton
correspondant à l'objet.
Par exemple, pour insérer un espace réservé d'image sans spécifier de fichier d'image, appuyez sur la touche Ctrl ou
Option tout en cliquant avec la souris sur le bouton Image.
Remarque : Cette procédure ne contourne pas toutes les boîtes de dialogue d'insertion d'objet. De nombreux objets, y
compris les éléments PA et les jeux de cadres, n'insèrent pas d'espaces réservés ni d'objets avec des valeurs par défaut.
Dernière mise à jour le 4/5/2011
215
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Modification des préférences du panneau Insertion
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
2 Dans la catégorie Général de la boîte de dialogue Préférences, désactivez l'option Afficher la boîte de dialogue lors
de l'insertion d'objets pour supprimer les boîtes de dialogue lors de l'insertion d'objets, tels que des images, des
tableaux, des scripts ou des éléments d'en-tête. Vous pouvez également maintenir la touche Ctrl (Windows) ou
Option (Macintosh) enfoncée tandis que vous créez l'objet.
Si cette option est désactivée lorsque vous insérez un objet, celui-ci aura des valeurs par défaut. Utilisez l'inspecteur
Propriétés pour modifier les propriétés de l'objet après l'avoir inséré.
Ajout, suppression ou gestion des boutons de la catégorie Favoris du panneau Insertion
1 Sélectionnez l'une des catégories du panneau Insertion.
2 Cliquez à l'aide du bouton droit de la souris (Windows) ou tout en maintenant la touche Contrôle enfoncée
(Macintosh) à l'endroit où les boutons s'affichent, puis choisissez Personnaliser les favoris.
3 Dans la boîte de dialogue Personnaliser les objets favoris, apportez les modifications désirées, puis cliquez sur OK.
• Pour ajouter un objet, sélectionnez-le dans le volet Objets disponibles situé à gauche, puis cliquez sur la flèche située
entre les deux volets ou cliquez deux fois sur l'objet dans le volet Objets disponibles.
Remarque : Les objets doivent être ajoutés un par un. Il est impossible de sélectionner un nom de catégorie tel que
Commun afin d'ajouter une catégorie entière à votre liste de favoris.
• Pour supprimer un objet ou un séparateur, sélectionnez l'objet dans le volet Objets favoris situé à droite, puis
cliquez sur le bouton Supprimer l'objet sélectionné dans la liste Objets favoris, au-dessus du volet.
• Pour déplacer un objet, sélectionnez-le dans le volet Objets favoris situé à droite, puis cliquez sur le bouton fléché
pointant vers le haut ou vers le bas situé au-dessus du volet.
• Pour ajouter un séparateur sous un objet, sélectionnez un objet dans le volet Objets favoris situé à droite, puis
cliquez sur le bouton Ajouter un séparateur situé en dessous du volet.
4 Si la catégorie Favoris n'est pas la catégorie active, sélectionnez-la afin de voir les modifications apportées.
Insertion d'objets à l'aide des boutons de la catégorie Favoris
❖ Sélectionnez la catégorie Favoris dans la partie gauche du panneau Insertion, puis cliquez sur le bouton
correspondant à un objet Favori que vous avez ajouté.
Dernière mise à jour le 4/5/2011
216
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Affichage du panneau Insertion sous la forme d'une barre Insertion horizontale
Contrairement aux autres panneaux de Dreamweaver, vous pouvez retirer le panneau Insertion de son emplacement
d'ancrage par 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.
1 Cliquez sur l'onglet du panneau Insertion et tirez-le en haut de la fenêtre de document.
2 Lorsqu'une ligne bleue horizontale s'affiche sur la largeur de la fenêtre du document, relâche le panneau Insertion.
Remarque : La barre Insertion horizontale est également un élément par défaut de l'espace de travail Classique. Pour
activer l'espace de travail Classique, choisissez Classique dans la section Commutation d'espace de travail de la barre
Application.
Rétablissement du panneau Insertion
1 Cliquez sur la poignée de la barre Insertion horizontale (sur sa gauche) et tirez la barre à l'endroit où vos panneaux
sont ancrés.
2 Placez le panneau Insertion à l'endroit désiré puis déposez-le. Une ligne bleue indique où vous pouvez déposer le
panneau.
Affichage des catégories de la barre Insertion horizontale sous forme d'onglets
❖ Cliquez sur la flèche du menu située près du nom de la catégorie, à l'extrémité gauche de la barre Insertion
horizontale, puis choisissez Afficher en tant qu'onglets.
Affichage des catégories de la barre Insertion horizontale sous forme de menus
❖ Cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur un onglet de
catégorie de la barre Insertion horizontale, puis choisissez Afficher en tant que menu.
Dernière mise à jour le 4/5/2011
217
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Définition des propriétés de page
Pour chaque page que vous créez dans Dreamweaver, vous pouvez spécifier les propriétés de formatage dans la boîte
de dialogue Propriétés de la page (Modifier > Propriétés de la page). Cette boîte de dialogue permet de spécifier la
famille et la taille par défaut de la police, la couleur d'arrière-plan, les marges, le style des liens ainsi que d'autres aspects
de la conception de page. Vous pouvez attribuer de nouvelles propriétés à chaque nouvelle page que vous créez et
modifier celles des pages existantes. Les modifications que vous apportez dans la boîte de dialogue Propriétés de la page
s'appliquent à la page entière.
Dreamweaver définit des règles CSS pour toutes les propriétés spécifiées dans les catégories Apparence (CSS), Liens
(CSS) et En-têtes (CSS) de la boîte de dialogue Propriétés de la page. Les règles sont intégrées dans la section head de
la page. Vous pouvez toujours définir les propriétés de la page à l'aide de code HTML mais, pour ce faire, vous devez
sélectionner la catégorie Apparence (HTML) de la boîte de dialogue Propriétés de la page. Les boîtes de dialogue
Titre/codage et Tracé de l'image définissent elles aussi des propriétés de page à l'aide de HTML.
Remarque : Les propriétés de page que vous choisissez ne s'appliquent qu'au document actif. Si une page utilise une feuille
de style CSS externe, Dreamweaver n'écrase pas les balises définies dans la feuille de style, car ceci affecterait les autres
pages qui utilisent cette feuille.
1 Choisissez Modifier > Propriétés de la page ou cliquez sur le bouton Propriétés de la page de l'inspecteur Propriétés.
2 Modifiez les propriétés de la page puis cliquez sur OK.
Voir aussi
« Définition des propriétés CSS » à la page 140
« Utilisation de formatage HTML » à la page 239
« Code XHTML » à la page 305
Définition des propriétés CSS de police, de couleur de fond et d'image de fond d'une page
La boîte de dialogue Propriétés de la page permet de spécifier diverses options de base de mise en forme des pages Web,
comme la police, la couleur de fond et l'image de fond.
1 Choisissez Modifier > Propriétés de la page ou cliquez sur le bouton Propriétés de la page de l'inspecteur Propriétés.
2 Sélectionnez la catégorie Apparence (CSS) et définissez les options.
Police Spécifie la famille de polices par défaut à utiliser dans vos pages Web. Dreamweaver utilise la famille de polices
spécifiée sauf si une autre police est désignée pour un élément de texte donné.
Taille Spécifie la taille de police par défaut à utiliser dans vos pages Web. Dreamweaver utilise la taille de police
spécifiée sauf si une autre taille est désignée pour un élément de texte donné.
Couleur du texte Spécifie la couleur d'affichage des polices par défaut.
Couleur d'arrière-plan Définit la couleur d'arrière-plan de la page. Activez l'option Couleur d'arrière-plan puis
choisissez une couleur dans le sélecteur.
Image d’arrière-plan Définit une image d'arrière-plan Cliquez sur le bouton Parcourir puis accédez à l'image et
sélectionnez-la. Vous pouvez également indiquer le chemin de l'image d'arrière-plan dans le champ Image d'arrière-plan.
Dreamweaver génère une mosaïque (multiplication) de l'image d'arrière-plan si elle ne remplit pas entièrement sa
fenêtre, comme le font les navigateurs. Pour éviter la création de cette mosaïque, désactivez cette fonction à l'aide des
feuilles de style en cascade.
Dernière mise à jour le 4/5/2011
218
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Répétition Indique comment l'image d'arrière-plan sera affichée sur la page :
• Sélectionnez l'option Pas de répétition pour n'afficher l'image d'arrière-plan qu'une seule fois.
• Sélectionnez l'option Répétition pour répéter, ou mettre en mosaïque, l'image à l'horizontale et la verticale.
• Sélectionnez l'option Répéter-x pour former une mosaïque horizontale.
• Sélectionnez l'option Répéter-y pour former une mosaïque verticale.
Marge gauche et Marge droite Spécifie la taille des marges à gauche et à droite de la page.
Marge haut et Marge bas Spécifie la taille des marges en haut et en bas de la page.
Définition des propriétés HTML d'une page
La définition de propriétés dans cette catégorie de la boîte de dialogue Propriétés de la page entraîne un formatage de
la page à l'aide de code HTML au lieu de code CSS.
1 Choisissez Modifier > Propriétés de la page ou cliquez sur le bouton Propriétés de la page de l'inspecteur Propriétés.
2 Sélectionnez la catégorie Apparence (HTML) et définissez les options.
Image d’arrière-plan Définit une image d'arrière-plan Cliquez sur le bouton Parcourir puis accédez à l'image et
sélectionnez-la. Vous pouvez également indiquer le chemin de l'image d'arrière-plan dans le champ Image d'arrière-plan.
Dreamweaver génère une mosaïque (multiplication) de l'image d'arrière-plan si elle ne remplit pas entièrement sa
fenêtre, comme le font les navigateurs. Pour éviter la création de cette mosaïque, désactivez cette fonction à l'aide des
feuilles de style en cascade.
Arrière-plan Définit la couleur d'arrière-plan de la page. Activez l'option Couleur d'arrière-plan puis choisissez une
couleur dans le sélecteur.
Texte Spécifie la couleur d'affichage des polices par défaut.
Lien Spécifie la couleur à appliquer au texte qui constitue le lien.
Liens visités Spécifie la couleur à appliquer aux liens visités.
Liens actifs Spécifie la couleur à appliquer lorsque la souris ou le curseur clique sur un lien.
Marge gauche et Marge droite Spécifie la taille des marges à gauche et à droite de la page.
Marge haut et Marge bas Spécifie la taille des marges en haut et en bas de la page.
Définition des propriétés de liens CSS
Vous pouvez définir le type et la taille de la police par défaut, ainsi que les couleurs utilisées pour les liens, les liens
visités et les liens actifs
1 Choisissez Modifier > Propriétés de la page ou cliquez sur le bouton Propriétés de la page de l'inspecteur Propriétés.
2 Sélectionnez la catégorie Liens (CSS) et définissez les options.
Police du lien Définit la famille de polices par défaut à utiliser pour les liens. Par défaut, Dreamweaver utilise la police
définie pour la page entière, sauf si une autre police est spécifiée.
Taille Définit la taille de police par défaut à utiliser pour les liens.
Couleur des liens Spécifie la couleur à appliquer au texte qui constitue le lien.
Liens visités Spécifie la couleur à appliquer aux liens visités.
Liens de survol Spécifie la couleur à appliquer lorsque la souris ou le curseur est placé sur un lien.
Liens actifs Spécifie la couleur à appliquer lorsque la souris ou le curseur clique sur un lien.
Dernière mise à jour le 4/5/2011
219
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Style souligné Spécifie le style de soulignement à appliquer aux liens. Si un style de soulignement est déjà défini pour
votre page (par exemple, par le biais d'une feuille de style CSS), le menu par défaut est remplacé par la mention « ne
pas modifier ». Cette mention vous informe d'un style de lien qui a été défini. Si vous modifiez le style de soulignement
à l'aide de la boîte de dialogue Propriétés de la page, Dreamweaver modifiera la définition de lien précédente.
Définition des propriétés d'en-tête de page (CSS)
Vous pouvez définir le type et la taille de la police par défaut, ainsi que les couleurs utilisées pour les liens, les liens
visités et les liens actifs
1 Choisissez Modifier > Propriétés de la page ou cliquez sur le bouton Propriétés de la page de l'inspecteur Propriétés.
2 Sélectionnez la catégorie En-têtes (CSS) et définissez les options.
Police des en-têtes Définit la famille de polices par défaut à utiliser pour les en-têtes. Dreamweaver utilise la famille
de polices spécifiée sauf si une autre police est désignée pour un élément de texte donné.
En-tête 1 à En-tête 6 Spécifie les tailles et couleurs à utiliser pour chaque niveau de balises d'en-tête.
Définition des propriétés du titre et de codage de la page
Vous pouvez définir le type et la taille de la police par défaut, ainsi que les couleurs utilisées pour les liens, les liens
visités et les liens actifs La catégorie Titre/codage de la boîte de dialogue Propriétés de la page permet de définir le type
de codage de document spécifique au langage utilisé pour créer vos pages Web, ainsi que le Formulaire de
normalisation Unicode à utiliser avec ce type de codage.
1 Choisissez Modifier > Propriétés de la page ou cliquez sur le bouton Propriétés de la page de l'inspecteur Propriétés.
2 Sélectionnez la catégorie Titre/codage et définissez les options.
Titre Spécifie le titre de la page, qui s'affiche dans la barre de titre de la fenêtre de document et dans la plupart des
fenêtres du navigateur.
Type de document (DTD) Spécifie une définition de type de document. Par exemple, vous pouvez rendre un document
HTML compatible XHTML en sélectionnant XHTML 1.0 transitionnel ou XHTML 1.0 Strict dans le menu déroulant.
Codage Précise le codage utilisé pour les caractères du document.
Si vous sélectionnez Unicode (UTF 8) en tant que codage de document, le codage d'entité est superflu dans la mesure
où UTF 8 permet de représenter de façon fiable tous les caractères. Si vous sélectionnez un autre codage de document,
le codage d'entité peut être nécessaire pour représenter certains caractères. Pour plus d'informations sur les entités de
caractères, voir www.w3.org/TR/REC-html40/sgml/entities.html.
Recharger Convertit le document existant ou de l'ouvrir de nouveau avec le nouveau codage.
Formulaire de normalisation Unicode N'est activée que si vous sélectionnez UTF 8 en tant que code par défaut. Il
existe quatre Formulaires de normalisation Unicode. Le plus important est le Formulaire de normalisation Unicode C
car il est le plus utilisé dans le Modèle de caractères lié au World Wide Web, mais Adobe fournit également les trois
autres Formulaires de normalisation Unicode.
Certains caractères Unicode semblent visuellement similaires mais peuvent être stockés de différentes manières dans
le document. Par exemple, ë (e tréma) peut être représenté sous la forme d'un seul caractère, « e tréma » ou de deux
caractères, « e Latin ordinaire » + « tréma ». Un caractère Unicode de combinaison est un caractère associé au caractère
précédent, ce qui fait apparaître le tréma au-dessus du « e » Latin. Les deux formes donnent la même typographie
visuelle, alors que chacune est enregistrée différemment dans le fichier.
La normalisation est le processus consistant à s'assurer que tous les caractères pouvant être enregistrés sous différentes
formes le sont tous sous la même forme. C'est-à-dire que tous les caractères « ë » d'un document sont enregistrés sous
Dernière mise à jour le 4/5/2011
220
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
forme de « e tréma » unique ou de « e + tréma de combinaison », mais pas sous les deux formes dans un même
document.
Pour plus d'informations sur la Normalisation Unicode et les formulaires spécifiques pouvant être utilisés, consultez
le site Web Unicode www.unicode.org/reports/tr15.
Inclure une signature Unicode (BOM) Inclut une marque d'ordre d'octet (BOM, byte order mark) dans le document. Il
s'agit d'une marque constituée de 2 à 4 octets placés au début d'un fichier texte identifiant un fichier comme étant au
format Unicode et, dans ce cas, l'ordre des octets suivants. Le code UTF 8 ne présentant pas d'ordre octet, l'ajout d'une
marque BOM UTF 8 est facultatif. Dans le cas de UTF 16 et UTF 32, cette marque est obligatoire.
Utilisation d'un tracé d'image pour créer la page
Vous pouvez insérer un fichier image à utiliser comme guide dans la création de votre page :
1 Choisissez Modifier > Propriétés de la page ou cliquez sur le bouton Propriétés de la page de l'inspecteur Propriétés.
2 Sélectionnez la catégorie Tracé de l’image et définissez les options.
Tracé de l'image Permet de spécifier l'image à utiliser comme guide pour reproduire une mise en page. Cette image
sert uniquement de référence et n'apparaît pas lorsque le document s'affiche dans un navigateur.
Transparence Détermine l'opacité du tracé de l'image, de complètement transparent à complètement opaque.
Description de l'encodage de document
L'encodage de document précise le codage utilisé pour les caractères dans le document. L'encodage du document est
spécifié dans une balise meta, insérée dans l'en-tête du document ; il indique au navigateur et à Dreamweaver le mode
de décodage du document et les polices à utiliser pour afficher le texte décodé.
Par exemple, si vous spécifiez Occidental (Latin1), la balise meta suivante est insérée :
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">.
Le document affiché dans Dreamweaver contient les polices que vous spécifiez dans Préférences de polices pour
l'encodage Occidental (Latin1) ; ce même document affiché dans un navigateur contient les polices que l'utilisateur du
navigateur précise pour l'encodage Occidental (Latin1).
Si vous spécifiez Japonais (Shift JIS), la balise meta suivante est insérée :
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">.
Le document affiché dans Dreamweaver contient les polices que vous spécifiez pour les encodages du japonais ; ce
même document affiché dans un navigateur contient les polices que l'utilisateur du navigateur précise pour les
encodages du japonais.
Vous modifier l'encodage du document dans une page et modifier l'encodage utilisé par défaut par Dreamweaver pour
créer de nouveaux documents, y compris les polices utilisées pour afficher chaque encodage.
Voir aussi
« Définition du type et du codage par défaut d'un document » à la page 70
Sélection et affichage d'éléments dans la fenêtre de document
Pour sélectionner un élément dans le mode Création de la fenêtre de document, cliquez dessus. Si un élément est
invisible, vous devez le rendre visible pour le sélectionner.
Dernière mise à jour le 4/5/2011
221
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Certains codes HTML ne sont pas visibles dans un navigateur, comme, par exemple, les balises comment. Il est
cependant utile de pouvoir sélectionner, modifier, déplacer et supprimer ces éléments invisibles lorsque vous créez une
page.
Dreamweaver permet d'afficher des icônes à l'emplacement de ces éléments invisibles dans la fenêtre de document en
mode Création. Pour indiquer les marqueurs d'élément qui doivent s'afficher, définissez les préférences liées aux
éléments invisibles. Par exemple, vous pouvez spécifier que les ancres nommées soient visibles, mais pas les sauts de
ligne.
Vous pouvez créer certains éléments invisibles (tels que les commentaires et les ancres nommées) à l'aide des boutons
dans la catégorie Commun du panneau Insertion. Vous pouvez ensuite modifier ces éléments à l'aide de l'inspecteur
Propriétés.
Voir aussi
« Affichage du code » à la page 310
« Utilisation du panneau Insertion » à la page 213
Sélection d'éléments
• Pour sélectionner un élément visible dans la fenêtre de document, cliquez dessus ou entourez-le du rectangle de
sélection.
• Pour sélectionner un élément invisible, choisissez Affichage > Assistances visuelles > Eléments invisibles (si ce n'est
pas déjà fait), puis cliquez sur le marqueur de l'élément dans la fenêtre de document.
Certains objets apparaissent sur la page à un endroit différent de celui dans lequel leur code est inséré. Par exemple,
en mode conception, un élément PA peut se trouver n'importe où dans la page, mais en mode Code, le code
définissant l'élément PA se trouve dans un emplacement fixe. Lorsque les éléments invisibles sont affichés,
Dreamweaver affiche des marqueurs dans la fenêtre de document pour indiquer l'emplacement du code de ces
éléments. En sélectionnant le marqueur, vous sélectionnez tout l'élément : si, par exemple, vous sélectionnez le
marqueur d'un élément PA, tout l'élément PA est sélectionné
• Pour sélectionner une balise complète (avec son contenu, le cas échéant), cliquez sur son symbole dans le sélecteur
de balise, dans la partie inférieure gauche de la fenêtre de document. Le sélecteur de balises apparaît en mode
Création et en mode Code. Le sélecteur de balises affiche toujours les balises qui contiennent la sélection ou le point
d'insertion en cours. La balise à l'extrême gauche est la balise ultrapériphérique contenant la sélection ou le point
d'insertion en cours. La balise suivante est contenue dans cette balise ultrapériphérique, et ainsi de suite. La balise
à l'extrême droite est la balise la plus à l'intérieur contenant la sélection ou le point d'insertion en cours.
Dans l'exemple suivant, le point d'insertion est situé dans une balise de paragraphe,<p>. Pour sélectionner le tableau
contenant le paragraphe que vous souhaitez sélectionner, sélectionnez la balise <table> à gauche de la balise <p>.
Affichage du code HTML associé au texte ou à l'objet sélectionné
❖ Effectuez l'une des opérations suivantes :
• Dans la barre d'outils du document, cliquez sur le bouton Afficher le mode Code.
• Choisissez Affichage > Code.
• Dans la barre d'outils du document, cliquez sur le bouton Afficher les modes Code et Création.
• Choisissez Affichage > Code et création.
• Choisissez Fenêtre > Inspecteur de code.
Dernière mise à jour le 4/5/2011
222
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Lorsque vous sélectionnez un élément dans l'un des deux éditeurs de code (mode Code ou inspecteur de code), il est
également sélectionné dans la fenêtre de document. Il est parfois nécessaire de synchroniser les deux affichages pour
que la sélection apparaisse.
Affichage ou masquage des icônes des éléments invisibles
❖ Choisissez Affichage > Assistances visuelles > Eléments invisibles.
Remarque : L'affichage des éléments invisibles risque de modifier légèrement la mise en page, en déplaçant d'autres
éléments de quelques pixels. Pour conserver une mise en page précise, vous devez donc masquer ces éléments invisibles.
Définition des préférences des éléments invisibles
Utilisez les préférences des éléments invisibles pour déterminer les types d'éléments devant être affichés lorsque
l'option Affichage > Assistances visuelles > Eléments invisibles est activée.
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh), puis cliquez sur
Eléments invisibles.
2 Sélectionnez les éléments à rendre visibles, puis cliquez sur OK.
Remarque : Une coche à côté du nom de l'élément dans la boîte de dialogue signifie que l'élément est visible lorsque
l'option Affichage > Assistances visuelles > Eléments invisibles est activée.
Ancres nommées Affiche une icône marquant l'emplacement de chaque ancre nommée (a name ="") dans le
document.
Scripts Affiche une icône marquant l'emplacement de code Java Script ou VBScript dans le corps du document.
Sélectionnez cette icône pour modifier le script dans l'inspecteur Propriétés, ou pour créer un lien vers un fichier script
externe.
Commentaires Affiche une icône marquant l'emplacement d’un commentaire HTML. Sélectionnez cette icône pour
consultez le commentaire dans l'inspecteur Propriétés.
Sauts de ligne Affiche une icône marquant l'emplacement de chaque saut de ligne (BR). Cette option est
désélectionnée par défaut.
Cartes graphiques côté client Affiche une icône marquant l'emplacement de chaque carte graphique du document.
Styles incorporés Affiche une icône marquant l'emplacement de styles CSS incorporés dans le corps du document. Les
styles CSS placés dans l'en-tête du document n'apparaissent pas dans la fenêtre de document.
Champs de formulaire masqués Affiche une icône marquant l'emplacement de champs de formulaire dont l'attribut
type est fixé à "hidden".
Séparateur de formulaire Affiche une bordure délimitant le formulaire pour vous aider à y insérer des éléments. La
bordure indique l'étendue de la balise form ; ainsi, tous les éléments de formulaire à l'intérieur de cette bordure sont
correctement inclus dans les balises form.
Points d'ancrage des éléments PA Affiche une icône marquant l'emplacement du code définissant un élément PA.
L'élément PA lui-même peut être positionné n'importe où dans la page. Les éléments PA ne constituent pas des
éléments invisibles ; seul le code qui les définit est invisible. Sélectionnez l'icône afin de sélectionner l'élément PA. Vous
pouvez ainsi afficher le contenu de l'élément PA, même s'il est marqué comme masqué.
Points d'ancrage des éléments alignés Affiche une icône marquant l'emplacement du code HTML des éléments qui
acceptent l'attribut align. Ces éléments sont les suivants : images, tableaux, objets ActiveX, plug-ins et applets. Dans
certains cas, le code de l'élément peut être séparé de l'objet visible.
Balises de marquage de serveur visuel Affiche l'emplacement des balises de marquage de serveur (telles que les balises
ASP (Active Server Pages) et ColdFusion) dont le contenu ne peut pas être affiché dans la fenêtre de document. En
Dernière mise à jour le 4/5/2011
223
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
règle générale, lorsqu'elles sont traitées par un serveur, ces balises génèrent des balises HTML. Par exemple, une balise
<CFGRAPH> génère un tableau HTML lorsqu'elle est traitée par un serveur ColdFusion. Dreamweaver représente la
balise à l'aide d'un élément ColdFusion invisible, car il lui est impossible de déterminer la sortie dynamique finale de
la page.
Balises de marquage de serveur non visuel Affiche l'emplacement des balises de marquage de serveur (telles que les
balises ASP (Active Server Pages) et ColdFusion) dont le contenu ne peut pas être affiché dans la fenêtre de document.
Il s'agit généralement de balises de configuration, de traitement ou de logique (par exemple <CFSET>, <CFWDDX>
et <CFXML>) qui ne génèrent pas de balises HTML.
Affichage CSS: Aucun Affiche une icône qui montre l'emplacement du contenu masqué par la propriété display:none
de la feuille de style liée ou incorporée.
Afficher le texte dynamique sous Affiche le texte dynamique de la page dans le format {Recordset:Field} par défaut.
Si la longueur de ces valeurs perturbe le formatage de la page, vous pouvez choisir le type d'affichage {}.
Inclusions côté serveur Affiche le contenu réel de chaque fichier d'inclusion côté serveur.
Couleurs Web sécurisées
En HTML, les couleurs sont exprimées par leur valeur hexadécimale (par exemple, #FF0000) ou, pour les principales, par
leur nom en anglais (red). Une couleur sécurisée pour le Web est une couleur qui, en mode 256 couleurs, reste toujours
la même dans Netscape Navigator et Microsoft Internet Explorer, sous Windows comme sous Macintosh. Par convention,
il y a 216 couleurs communes, et toute valeur hexadécimale combinant les paires 00, 33, 66, 99, CC ou FF (correspondant
respectivement aux niveaux RVB 0, 51, 102, 153, 204 et 255) représente une couleur sécurisée pour le Web.
Des tests approfondis ont cependant révélé qu'en réalité seules 212 couleurs sont sécurisées pour le Web. Sous
Windows, Internet Explorer ne restitue pas correctement les couleurs #0033FF (0,51,255), #3300FF (51,0,255),
#00FF33 (0,255,51) et #33FF00 (51,255,0).
Lorsque les navigateurs Web ont fait leur apparition, la plupart des ordinateurs n'affichaient que 265 couleurs (8 bits
par canal, bpc). Aujourd'hui, la plupart des ordinateurs affichent des milliers ou des millions de couleurs (16 et 32 bpc).
L'utilité de la palette adaptée à tous les navigateurs est donc bien moindre si vous développez votre site pour les
utilisateurs de systèmes informatiques modernes.
La palette de couleurs sécurisée pour le Web peut s'avérer utile si vous créez des sites pour des appareils différents,
comme les organisateurs personnels et les téléphones mobiles. Un grand nombre de ces appareils sont équipés d'un
écran noir et blanc (1 bpc) ou 256 couleurs (8 bpc).
Les palettes Cubes de couleur (valeur par défaut) et Ton continu de Dreamweaver utilisent la palette sécurisée pour le
Web de 216 couleurs ; lorsque vous sélectionnez une couleur dans ces palettes, c'est la valeur hexadécimale
correspondante qui s'affiche.
Pour choisir une couleur en dehors de la gamme sécurisée pour le Web, ouvrez le nuancier du système en cliquant sur
le bouton Roue chromatique en haut à droite du sélecteur de couleurs de Dreamweaver. Celle-ci n'est pas limitée aux
couleurs sécurisées pour le Web.
Les versions UNIX de Netscape Navigator utilisent une palette de couleurs différente de celle des versions Windows
et Macintosh. Si vous développez exclusivement pour des plates-formes UNIX (ou si le public visé est composé
d'utilisateurs de Windows ou de Macintosh équipés de moniteurs 24 bpc et d'utilisateurs d'UNIX équipés de
moniteurs 8 bpc), vous pouvez utiliser des valeurs hexadécimales combinant les paires 00, 40, 80, BF ou FF, qui
produisent des couleurs sécurisées pour le Web sur les ordinateurs exécutant SunOS.
Dernière mise à jour le 4/5/2011
224
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Utilisation du sélecteur de couleur
Dans Dreamweaver, les inspecteurs de propriétés de la plupart des éléments de page, ainsi que de nombreuses boîtes
de dialogue, comportent une icône permettant d'ouvrir un sélecteur de couleur. Choisissez la couleur d'un élément de
page dans le sélecteur. Vous pouvez également définir la couleur par défaut du texte des éléments de votre page.
1 Cliquez sur l'icône des couleurs dans n'importe quelle boîte de dialogue ou dans l'inspecteur Propriétés.
Le sélecteur de couleur s'affiche à l'écran.
2 Effectuez l'une des opérations suivantes :
• Utilisez la pipette pour sélectionner une nuance de couleur dans la palette. Toutes les couleurs des palettes Cubes
de couleur (valeur par défaut) et Ton continu sont sécurisées pour le Web ; les autres palettes ne le sont pas.
• Utilisez la pipette pour sélectionner une couleur à partir d'un point visible à l'écran, même à l'extérieur de la fenêtre
de Dreamweaver. Pour sélectionner une couleur sur le bureau ou dans une autre application, appuyez sur le bouton
de la souris et maintenez-le enfoncé. La pipette peut ainsi rester active et sélectionner une couleur en dehors de
Dreamweaver. Si vous cliquez sur le bureau ou sur une autre application, Dreamweaver sélectionne la couleur de
l'emplacement où vous avez cliqué. Cependant, si vous passez à une autre application, il peut s'avérer nécessaire de
cliquer sur une fenêtre de Dreamweaver pour continuer à travailler dans Dreamweaver.
• Pour élargir plus amplement la sélection, utilisez le menu déroulant en haut à droite du nuancier. Vous pouvez
sélectionner Cubes de couleur, Ton continu, Système d'exploitation Windows, Mac OS et Niveaux de gris.
Remarque : Les palettes Cubes de couleur et Ton continu sont sécurisées pour le Web, contrairement aux palettes Système
d'exploitation Windows, Mac OS et Niveaux de gris.
• Pour effacer la couleur en cours sans devoir en choisir une autre, cliquez sur le bouton Couleur par défaut
• Pour ouvrir le nuancier du système, cliquez sur le bouton Roue chromatique
.
.
Zoom avant et arrière
Dreamweaver permet d'agrandir (zoom avant) l'affichage de la fenêtre de document de manière à pouvoir vérifier la
précision des graphiques, sélectionner plus aisément de petits éléments, concevoir des pages avec un texte en petite
taille, concevoir de très grande pages, etc.
Remarque : Les outils de zoom ne sont disponibles qu'en mode Création.
Voir aussi
« Présentation de la barre d'état » à la page 13
Zoom avant ou arrière sur une page
1 Cliquez sur l'outil Zoom (la loupe) dans le coin inférieur droit de la fenêtre du document.
2 Effectuez l'une des opérations suivantes :
• Cliquez sur la zone de la page que vous souhaitez agrandir jusqu'à obtenir l'affichage désiré.
• Tracez un cadre autour de la zone de la page que vous souhaitez agrandir, puis relâchez le bouton de la souris.
• Sélectionnez une échelle d'agrandissement prédéfini dans le menu déroulant Zoom.
• Saisissez une échelle d'agrandissement dans le champ Zoom.
Vous pouvez également effectuer un grossissement avec l'outil Zoom en appuyant sur Ctrl+= (Windows) ou
Commande+= (Macintosh).
Dernière mise à jour le 4/5/2011
225
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
3 Pour effectuer un zoom arrière (réduire le taux d'agrandissement), appuyez sur la touche Alt (Windows) ou Option
(Macintosh), puis cliquez sur la page.
Vous pouvez également effectuer une réduction avec l'outil Zoom en appuyant sur Ctrl+- (Windows) ou
Commande+- (Macintosh).
Modification d'une page après un zoom
❖ Cliquez sur l'outil Sélection (icône en forme de pointeur) dans le coin inférieur droit de la fenêtre du document,
puis cliquez dans la page.
Défilement d'une page après un zoom
1 Cliquez sur l'outil Main (icône en forme de main) dans le coin inférieur droit de la fenêtre du document.
2 Faites glisser la page.
Adaptation de la fenêtre du document à la sélection
1 Sélectionnez un élément de la page.
2 Sélectionnez Affichage > Ajuster à la sélection.
Adaptation de la fenêtre du document à une page entière
❖ Sélectionnez Affichage > Ajuster à la page.
Adaptation de la fenêtre du document à la largeur d'une page
❖ Sélectionnez Affichage > Ajuster à la largeur.
Utilisation de comportements Java Script pour détecter le type et la version
des navigateurs et des plug-ins
Vous pouvez utiliser des comportements pour déterminer le type de navigateur utilisé par vos visiteurs, et savoir s'ils
disposent d'un plug-in particulier.
Vérifier le navigateur Permet d'envoyer les visiteurs sur des pages différentes selon le type et la version de leur
navigateur. Par exemple, vous pouvez envoyer les utilisateurs de Netscape Navigator 4.0 ou version ultérieure sur une
page, les utilisateurs de Microsoft Internet Explorer 4.0 ou version ultérieure sur une autre, et les utilisateurs d'un autre
type de navigateur sur la page en cours.
Vérifier le Plug-in Permet d'envoyer les visiteurs sur des pages différentes selon qu'ils disposent ou non du plug-in
indiqué. Par exemple, vous pouvez envoyer les utilisateurs disposant de Shockwave™ sur une page et les autres sur une
page différente.
Voir aussi
« Utilisation des comportements JavaScript » à la page 360
« Application du comportement Vérifier le navigateur » à la page 364
« Application du comportement Vérifier le plug-in » à la page 364
Dernière mise à jour le 4/5/2011
226
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Définition des préférences de durée et de taille des téléchargements
Dreamweaver calcule la taille sur la base du contenu de toute la page, y compris tous les objets liés, tels que les images
et les plug-ins. Dreamweaver estime la durée de téléchargement en fonction de la vitesse de connexion entrée dans les
préférences de la Barre d'état. Le temps de téléchargement réel dépend de l'état du trafic sur Internet,
Pour vérifier les durées de téléchargement pour une page Web particulière, il est intéressant d'utiliser la « règle des 8
secondes » ; c'est-à-dire que la plupart des utilisateurs n'attendront pas plus de huit secondes pour le téléchargement
d'une page.
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
2 Sélectionnez la catégorie Barre d'état dans la liste de gauche.
3 Choisissez la vitesse de connexion à partir de laquelle le temps de téléchargement sera calculé, puis cliquez sur OK.
Voir aussi
« Définition de la taille des fenêtres et de la vitesse de connexion » à la page 21
Ajout et formatage de texte
Ajout de texte dans un document
Pour ajouter du texte dans un document Dreamweaver, vous pouvez le saisir directement dans la fenêtre du document
ou effectuer un copier/coller. Vous pouvez également importer du texte à partir d’autres documents.
Pour coller du texte dans un document Dreamweaver, vous pouvez utiliser la commande Coller ou Collage spécial. La
commande Collage spécial permet de préciser le format du texte collé de différentes façons. Par exemple, lorsque vous
souhaitez coller le texte d'un document Microsoft Word déjà formaté dans votre document Dreamweaver en ignorant
son formatage initial afin d'appliquer votre propre feuille de style CSS, sélectionnez le texte dans Word, copiez-le dans
le presse-papiers, puis utilisez la commande Collage spécial pour sélectionner l'option qui permet de ne coller que le
texte.
Lorsque vous utilisez la commande Coller pour coller un texte issu d'une autre application, vous pouvez définir des
préférences de collage comme options par défaut.
Remarque : En mode Code, Ctrl-V (Windows) et Commande-V (Macintosh) collent toujours le texte seulement (sans
formatage).
❖ Pour ajouter du texte dans un document, procédez de l'une des manières suivantes :
• Tapez le texte directement dans la fenêtre de document.
• Copiez du texte à partir d'une autre application, passez dans Dreamweaver, placez le point d'insertion dans la
fenêtre du document en mode Création, puis choisissez Edition > Coller ou Edition > Collage spécial.
Lorsque vous choisissez Edition > Collage spécial, vous pouvez choisir plusieurs options de formatage du texte collé.
Vous pouvez également coller du texte à l'aide des raccourcis clavier suivants :
Dernière mise à jour le 4/5/2011
227
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Option de collage
Raccourci clavier
Coller
Ctrl+V (Windows)
Commande+V (Macintosh)
Collage spécial
Ctrl+Maj+V (Windows)
Commande+Maj+V (Macintosh)
Insertion de caractères spéciaux
Certains caractères spéciaux sont représentés en HTML par un nom ou par un numéro, qui est alors appelé entité.
Le langage HTML prévoit des noms d'entités pour de nombreux caractères spéciaux, par exemple le symbole de
copyright (©), l'esperluette (&) et le symbole Marque déposée (®). Chaque entité est représentée à la fois par
un nom HTML (par exemple — pour le tiret cadratin) et son équivalent numérique (dans ce cas, ).
Le langage HTML utilise des crochets <> dans son code, mais vous devez exprimer les caractères spéciaux supérieur
à et inférieur à sans que Dreamweaver les interprète comme du code. Dans ce cas, utilisez > pour le signe supérieur
à (>) et < pour le signe inférieur à (<).
Malheureusement, certains navigateurs (certaines versions anciennes, ainsi que les navigateurs autres que Netscape
Navigator et Internet Explorer) n'affichent pas correctement la plupart de ces entités.
1 Dans la fenêtre de document, placez le curseur là où vous voulez insérer un caractère spécial.
2 Effectuez l'une des opérations suivantes :
• Choisissez le nom du caractère dans le sous-menu Insertion > HTML > Caractères spéciaux.
• Dans la catégorie Texte du panneau Insertion, cliquez sur le bouton Caractères et choisissez le caractère désiré dans
le sous-menu.
Un grand nombre d'autres caractères spéciaux sont disponibles. Pour en sélectionner un, choisissez Insertion > HTML
> Caractères spéciaux > Autre ou cliquez sur le bouton Caractères de la catégorie Texte du panneau Insertion, puis
choisissez Autres caractères. Choisissez un caractère dans la boîte de dialogue Insérer autre caractère et cliquez sur OK.
Ajout d'espacements entre les caractères
Le langage HTML n'autorisant qu'un seul espace entre les caractères, il convient d'insérer un espace insécable afin
d'ajouter un espace supplémentaire dans un document. Vous pouvez définir une préférence pour l'insertion
automatique d'un espace insécable dans un document.
Insertion d'un espace insécable
❖ Effectuez l'une des opérations suivantes :
• Choisissez Insertion > HTML > Caractères spéciaux > Espace insécable.
• Appuyez sur les touches Ctrl+Maj+Espace (Windows) ou Option+Espace (Macintosh).
• Dans la catégorie Texte du panneau Insertion, cliquez sur le bouton Caractères et cliquez sur l'icône Espace
insécable.
Définition d'une préférence pour l'ajout d'espaces insécables
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
2 Dans la catégorie Général, assurez-vous que l'option Autoriser plusieurs espaces consécutifs soit activée.
Dernière mise à jour le 4/5/2011
228
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Création de listes à puces ou numérotées
Vous pouvez créer des listes numérotées (triées), des listes à puces (non triées) et des listes de définitions à partir d'un
texte existant ou d'un nouveau texte que vous tapez dans la fenêtre de document.
Les listes de définitions n'utilisent pas de caractères d'en-tête tels que des puces ou des nombres et sont souvent utilisées
dans les glossaires ou les descriptions. Les listes peuvent également être imbriquées, c'est-à-dire qu'elles contiennent
d'autres listes. Par exemple, vous pouvez imbriquer une liste numérotée ou à puces au sein d'une autre liste de même type.
La boîte de dialogue Propriétés de liste vous permet de définir l'aspect d'une liste complète ou d'un élément de liste.
Vous pouvez définir le style de numérotation, remettre à zéro la numérotation ou définir les options du style de puce
d'éléments individuels de la liste ou de la liste complète.
Voir aussi
« Définition des propriétés CSS » à la page 140
Création d'une nouvelle liste
1 Dans le document Dreamweaver, placez le point d'insertion à l'emplacement où insérer la liste, puis procédez de
l'une des manières suivantes :
• Dans l'inspecteur Propriétés HTML, cliquez sur le bouton correspondant à une liste à puces ou une liste numérotée.
• Choisissez Format > Liste, puis sélectionnez le type de liste qui vous convient : Liste simple (à puces), Liste
numérotée ou Liste de définitions.
Le caractère de tête de l'élément de liste spécifié apparaît dans la fenêtre de document.
2 Tapez le texte de l'élément de la liste, puis appuyez sur la touche Entrée (Windows) ou Retour (Macintosh) pour
créer un autre élément de liste.
3 Pour marquer la fin de la liste, appuyez à deux reprises sur la touche Entrée (Windows) ou Retour (Macintosh).
Création d'une liste à partir d'un texte existant
1 Sélectionnez une suite de paragraphes pour les transformer en liste.
2 Dans l'inspecteur Propriétés HTML, cliquez sur le bouton correspondant à une liste à puces ou une liste numérotée,
ou choisissez Format > Liste, puis sélectionnez le type de liste qui vous convient : Liste simple (à puces), Liste
numérotée ou Liste de définitions.
Création d'une liste imbriquée
1 Sélectionnez les éléments de liste à imbriquer.
2 Dans l'inspecteur Propriétés HTML, cliquez sur le bouton Blockquote, ou choisissez Format > Retrait.
Dreamweaver met le texte en retrait et crée une liste individuelle avec les attributs HTML de la liste d'origine.
3 Appliquez un nouveau style ou type de liste au texte en retrait en suivant la même procédure que celle utilisée ci-
dessus.
Définition des propriétés d'une liste complète
1 Dans la fenêtre de document, créez au moins un élément de liste. Le nouveau style s'applique automatiquement aux
nouveaux éléments ajoutés à la liste.
2 Placez le point d'insertion dans le texte de l'élément de la liste, puis choisissez Format > Liste > Propriétés de la liste
pour ouvrir la boîte de dialogue Propriétés de liste.
Dernière mise à jour le 4/5/2011
229
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
3 Sélectionnez les options que vous voulez appliquer à la liste :
Type de liste Spécifie les propriétés de la liste, tandis que Elément de liste caractérise un élément individuel d'une liste.
Dans le menu déroulant, sélectionnez une liste simple, une liste numérotée, une liste des répertoires ou une liste des
menus. Les options disponibles dans la boîte de dialogue varient selon le type de liste choisi.
Style Définit le style des numéros ou des puces utilisés avec une liste numérotée ou à puces. Tous les éléments de la
liste prendront ce style, sauf si vous attribuez un nouveau style à certains éléments.
Démarrer le comptage Définit la valeur à attribuer au premier élément d'une liste numérotée.
4 Cliquez sur OK pour définir les options.
Définition des propriétés d'un élément de liste
1 Dans la fenêtre de document, placez le point d'insertion dans le texte d'un élément de la liste.
2 Choisissez Format > Liste > Propriétés de la liste.
3 Dans Elément de liste, sélectionnez les options que vous voulez définir :
Nouveau style Caractérise le style de l'élément de liste sélectionné. Les styles du menu Nouveau style sont apparentés
au type de liste affiché dans le menu Type de liste. Si, par exemple, vous avez choisi l'option Liste simple dans le menu
Type de liste, seules les options de puce sont disponibles dans le menu Nouveau style.
Réinitialiser le compte à Définit un numéro spécifique à partir duquel numéroter les éléments de liste.
4 Cliquez sur OK pour définir les options.
Recherche et remplacement de texte
Vous pouvez utiliser la commande Rechercher et remplacer pour rechercher du texte ainsi que des attributs et des
balises HTML dans un ou plusieurs documents. Le panneau Recherche, situé dans le groupe de panneaux Résultats,
indique les résultats des recherches pour lesquelles l'option Rechercher tout est sélectionnée.
Remarque : Pour rechercher des fichiers dans un site, utilisez les commandes suivantes : Retrouver sur le site local et
Retrouver sur le site distant.
Voir aussi
« Affichage du code » à la page 310
« Expressions régulières » à la page 307
Recherche et remplacement de texte
1 Ouvrez le document dans lequel la recherche doit être effectuée ou sélectionnez des documents ou un dossier dans
le panneau Fichiers.
2 Sélectionnez la commande Edition > Rechercher et remplacer.
3 L'option Rechercher dans vous permet de définir les fichiers dans lesquels effectuer la recherche :
Texte sélectionné Permet de limiter la recherche au texte alors sélectionné dans le document actif.
Document actif Permet de limiter la recherche au document actif.
Ouvrir les documents Permet d'effectuer la recherche dans tous les documents alors ouverts.
Dossier Permet de limiter la recherche à un dossier spécifique. Après avoir choisi Dossier, cliquez sur l'icône
représentant un dossier pour sélectionner le dossier dans lequel effectuer votre recherche.
Dernière mise à jour le 4/5/2011
230
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Fichiers sélectionnés dans le site Permet de limiter la recherche aux fichiers et dossiers actuellement sélectionnés dans
le panneau Fichiers.
Site local en cours entier Permet d'étendre la recherche à l'ensemble des documents HTML, des fichiers de
bibliothèque et des documents texte du site courant.
4 Le menu déroulant Rechercher permet de spécifier le type de recherche à effectuer :
Code source Permet de rechercher des chaînes de texte spécifiques dans le code source HTML. Vous pouvez
rechercher des balises spécifiques à l'aide de cette option, mais la recherche Balise spécifique offre une approche plus
flexible pour ce type d'opération.
Texte Permet de rechercher des chaînes spécifiques de texte au sein du document. Une recherche sur du texte ignore
tout code HTML qui interromprait la chaîne indiquée. Par exemple, si vous recherchez le chien noir, vous
trouverez aussi bien le chien noir que le chien <i>noir</i>.
Texte (avancé) Permet de rechercher des chaînes de texte spécifiques se trouvant à l'intérieur ou à l'extérieur d'une ou
plusieurs balises. Par exemple, dans un document qui contient le code HTML suivant, la recherche de essaie en
précisant Pas de balise interne et la balise i renvoie uniquement la seconde occurrence du mot essaie : Jean
<i>essaie</i> de terminer son travail à temps, mais n'y arrive pas toujours. Il essaie cependant
farouchement.
Balise spécifique Permet de rechercher des balises, attributs et valeurs d'attribut spécifiques, telles que toutes les
balises td où valign est défini sur top.
Remarque : Appuyez sur Ctrl+Entrée ou Maj+Entrée (Windows) ou sur Contrôle+Retour, Maj+Retour ou
Commande+Retour (Macintosh) pour insérer des sauts de ligne au sein des champs de recherche, ce qui permet de
rechercher un caractère de retour chariot. Lorsque vous effectuez une telle recherche, désactivez l'option Ignorer les
différences entre les espaces blancs si vous n'utilisez pas d'expressions régulières. Cette recherche porte sur un caractère de
retour chariot en particulier, et non sur l'occurrence d'un saut de ligne ; par exemple, elle ne trouvera pas de balise <br>
ou <p>. Les caractères de retour chariot apparaissent en tant qu'espaces en mode Création, et non en tant que sauts de
ligne.
5 Utilisez les options suivantes pour élargir ou limiter la recherche :
Respecter la casse Limite la recherche au texte dont la casse correspond à celle du texte recherché. Par exemple, si vous
recherchez le français, vous ne trouverez pas le Français.
Ignorer les différences entre les espaces blancs Traite tout espace blanc comme s'il s'agissait d'un simple espace pour
les besoins de la recherche. Par exemple, si cette option est activée, ce texte correspond à ce texte et
texte, mais pas à cetexte. Cette option n'est pas disponible lorsque l'option Utiliser les expressions
àce
régulières est sélectionnée ; vous devez écrire explicitement l'expression régulière pour ignorer les espaces blancs.
Notez que les balises <p> et <br> ne sont pas comptées comme des espaces blancs.
Mot entier Limite la recherche aux occurrences contenant un ou plusieurs mots entiers.
Remarque : L'utilisation de cette option équivaut à effectuer une recherche classique d'une chaîne commençant et
terminant par \b, l'expression régulière de limite entre les mots.
Utiliser les expressions régulières Fait en sorte que certains caractères et chaînes courtes (tels que ?, *, \w et \b) de la
chaîne recherchée soient interprétés comme des opérateurs d'expression régulières. Par exemple, une recherche sur le
c\w*\b noir trouvera aussi bien le chien noir que le chapeau noir
Remarque : Si vous travaillez dans l'Affichage de code et modifiez le document, puis essayez de rechercher et de remplacer
tout élément autre que du code source, une boîte de dialogue s'affiche et vous informe que Dreamweaver synchronise les
deux fenêtres avant d'effectuer la recherche.
Dernière mise à jour le 4/5/2011
231
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
6 Pour rechercher des chaînes sans les remplacer, cliquez sur Rechercher suivant ou sur Rechercher tout :
Suivant Permet de passer à l'occurrence suivante dans le document actif et de la sélectionner. S'il s'agit de la dernière
occurrence de la chaîne recherchée, Dreamweaver passe au document suivant si la recherche porte sur plusieurs
documents.
Rechercher tout Ouvre le panneau Recherche du groupe de panneaux Résultats. Si la recherche ne porte que sur un
document, toutes les occurrences de la chaîne recherchée s'affichent avec leur contexte. Si la recherche porte sur un
dossier ou un site, Rechercher tout affiche la liste des documents contenant la chaîne recherchée.
7 Pour remplacer les chaînes trouvées, cliquez sur Remplacer ou sur Remplacer tout.
8 Cliquez sur Fermer lorsque vous avez terminé.
Nouvelle recherche sans afficher la boîte de dialogue Rechercher et remplacer
❖ Appuyez sur F3 (Windows) ou Commande+G (Macintosh).
Affichage du contexte d'un résultat donné
1 Choisissez Fenêtre > Résultats pour afficher le panneau Rechercher.
2 Double-cliquez sur une ligne du panneau Rechercher.
Si vous effectuez une recherche dans le document actif, la fenêtre du document affiche la ligne contenant le résultat de
la recherche.
Si la recherche porte sur plusieurs fichiers, le fichier contenant ce résultat s'ouvre.
Nouvelle exécution d'une même recherche
❖ Cliquez sur le bouton Rechercher et remplacer.
Arrêt d'une recherche en cours
❖ Cliquez sur le bouton Arrêter.
Recherche d'une balise spécifique
La boîte de dialogue Rechercher et remplacer vous permet de rechercher du texte et des balises dans un document et
de remplacer les occurrences trouvées par un autre texte ou d'autres balises.
1 Sélectionnez la commande Edition > Rechercher et remplacer.
2 Dans le menu déroulant Rechercher, sélectionnez Balise spécifique.
3 Sélectionnez une balise spécifique ou [toute balise] dans le menu déroulant situé près du menu déroulant
Rechercher ou tapez un nom de balise dans la zone de texte.
4 (Facultatif) Limitez la recherche à l'aide de l'un des modificateurs de balise suivants :
Avec attribut Permet de sélectionner un attribut qui ne doit pas figurer dans la balise pour que la correspondance soit
trouvée. Vous pouvez spécifier une valeur particulière pour cet attribut ou choisir [toute valeur].
Sans attribut Permet de sélectionner un attribut qui ne doit pas figurer dans la balise pour que la correspondance soit
trouvée. Par exemple, vous pouvez rechercher toutes les balises img n'ayant pas l'attribut alt.
Contenant Indique un texte ou une balise qui doit figurer dans la balise d'origine pour que la correspondance soit
trouvée. Par exemple, dans le code <b><font size="4">heading 1</font></b>, labalise font est placée à
l'intérieur de la balise b.
Dernière mise à jour le 4/5/2011
232
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Ne contenant pas Indique un texte ou une balise qui ne doit pas figurer dans la balise d'origine pour que la
correspondance soit trouvée.
Balise interne Spécifie une balise à l'intérieur de laquelle la balise cible doit être incluse pour que la correspondance
soit trouvée.
Pas de balise interne Spécifie une balise à l'intérieur de laquelle la balise cible ne doit pas se trouver pour que la
correspondance soit trouvée.
5 (Facultatif) Pour cibler encore la recherche, cliquez sur le bouton plus (+) et répétez l'étape 3.
6 Si aucun modificateur de balise n'a été appliqué aux étapes 3 et 4, cliquez sur le bouton moins (-) pour réduire le
menu de modificateur de balise.
7 Si vous devez exécuter une action lorsque la balise est trouvée (telle que le retrait ou le remplacement de cette
balise), sélectionnez cette action dans le menu contextuel Action, puis, si nécessaire, spécifiez l'action à effectuer.
Recherche de texte spécifique (avancée)
La boîte de dialogue Rechercher et remplacer vous permet de rechercher du texte et des balises dans un document et
de remplacer les occurrences trouvées par un autre texte ou d'autres balises.
1 Sélectionnez la commande Edition > Rechercher et remplacer.
2 Dans le menu déroulant Rechercher, choisissez Texte (avancé).
3 Tapez le texte dans la zone de texte situé près du menu déroulant Rechercher.
Par exemple, tapez le mot Indéfini.
4 Sélectionnez l'option balise interne ou pas de balise interne, puis choisissez une balise dans le menu déroulant
adjacent.
Par exemple, cliquez sur Dans la balise, puis sélectionnez title.
5 (Facultatif) Cliquez sur le bouton plus (+) pour limiter la recherche à l'aide d'un des modificateurs de balise suivants :
Avec attribut Permet de sélectionner un attribut qui ne doit pas figurer dans la balise pour que la correspondance soit
trouvée. Vous pouvez spécifier une valeur particulière pour cet attribut ou choisir [toute valeur].
Sans attribut Permet de sélectionner un attribut qui ne doit pas figurer dans la balise pour que la correspondance soit
trouvée. Par exemple, vous pouvez rechercher toutes les balises img n'ayant pas l'attribut alt.
Contenant Indique un texte ou une balise qui doit figurer dans la balise d'origine pour que la correspondance soit
trouvée. Par exemple, dans le code <b><font size="4">heading 1</font></b>, labalise font est placée à
l'intérieur de la balise b.
Ne contenant pas Indique un texte ou une balise qui ne doit pas figurer dans la balise d'origine pour que la
correspondance soit trouvée.
Balise interne Spécifie une balise à l'intérieur de laquelle la balise cible doit être incluse pour que la correspondance
soit trouvée.
Pas de balise interne Spécifie une balise à l'intérieur de laquelle la balise cible ne doit pas se trouver pour que la
correspondance soit trouvée.
6 (Facultatif) Pour cibler encore plus la recherche, répétez l'étape 4.
Dernière mise à jour le 4/5/2011
233
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Définition d'abréviations et d'acronymes
Le langage HTML fournit des balises qui permettent de définir les abréviations et les acronymes que vous employez
sur votre page pour les moteurs de recherche, les correcteurs orthographiques, les programmes de traduction
automatique ou les synthétiseurs vocaux. Par exemple, vous pouvez indiquer que l'abréviation IM, sur votre page,
signifie « ingénierie mécanique », ou que l'acronyme OMS signifie « Organisation mondiale de la Santé ».
1 Sélectionnez l'abréviation ou l'acronyme dans le text de la page.
2 Choisissez Insertion > HTML > Objets texte > Abréviation ou Insertion > HTML > Objets texte > Acronyme.
3 Saisissez la forme développée de l'acronyme ou de l'abréviation.
4 Entrez la langue, comme en pour l'anglais, de pour l'allemand ou it pour l'italien.
Définition des préférences de copie/collage
Vous pouvez configurer des préférences de collage spécial à utiliser par défaut avec la commande Edition > Coller
lorsque vous collez du texte provenant d'autres applications. Par exemple, si vous souhaitez coller systématiquement
le texte uniquement, ou le texte avec un formatage de base, définissez l'option par défaut dans la boîte de dialogue
Préférences de copie/collage.
Remarque : Pour coller du texte dans un document Dreamweaver, vous pouvez utiliser la commande Coller ou Collage
spécial. La commande Collage spécial permet de préciser le format du texte collé de différentes façons. Par exemple,
lorsque vous souhaitez coller le texte d'un document Microsoft Word déjà formaté dans votre document Dreamweaver
en ignorant son formatage initial afin d'appliquer votre propre feuille de style CSS, sélectionnez le texte dans Word,
copiez-le dans le presse-papiers, puis utilisez la commande Collage spécial pour sélectionner l'option qui permet de ne
coller que le texte.
Remarque : Les préférences définies dans la boîte de dialogue Préférences de copie/collage ne s'appliquent qu'aux
éléments collés dans la vue Création.
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
2 Cliquez sur la catégorie Copier/Coller.
3 Définissez les options suivantes, puis cliquez sur OK.
Texte seul Permet de coller du texte non formaté. Si le texte d'origine est formaté, ce formatage, y compris les sauts de
ligne et de paragraphes, est supprimé.
Texte structuré Permet de coller du texte en conservant sa structure, mais sans le formatage de base. Par exemple, vous
pouvez coller un texte et conserver la structure des paragraphes, des listes et des tableaux, mais pas les mises en gras,
italiques et autres formatages.
Texte structuré avec formatage de base Permet de coller du texte structuré et du texte HTML avec une mise en forme
simple (tel que des paragraphes et des tableaux, ainsi que du texte mis en forme avec les balises b, i, u, strong, em, hr,
abbr ou acronym).
Texte structuré avec formatage complet Permet de coller du texte en conservant toute sa structure, son formatage
HTML et ses styles CSS.
Remarque : L'option Mise en forme complète ne permet pas de conserver les styles CSS provenant d'une feuille de style
externe, ni les styles provenant d'applications qui ne les conservent pas lors d'une copie dans le presse-papiers.
Conserver les sauts de ligne Permet de conserver les sauts de ligne dans le texte collé. Cette option est désactivée si
vous avez sélectionné Texte seul.
Dernière mise à jour le 4/5/2011
234
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Nettoyage des espaces inter-paragraphes de Word Sélectionnez cette option lorsque vous avez sélectionné Texte
structuré ou Mise en forme de base et souhaitez éliminer l'espace supplémentaire qui sépare les paragraphes lorsque
vous collez votre texte.
Vérification de l'orthographe d'une page Web.
La commande Orthographe permet de vérifier l'orthographe du document actif. Le document doit être une page Web
(par exemple une page HTML, ColdFusion ou PHP). La commande Orthographe ne fonctionne pas dans les fichiers
texte ou XML.
En outre, elle ignore les balises HTML et les valeurs d'attributs.
Remarque : Dreamweaver peut uniquement vérifier l'orthographe du fichier actuellement ouvert dans la fenêtre de
document. Il ne peut pas vérifier l'orthographe de tous les fichiers d'un site en même temps.
Par défaut, le correcteur orthographique utilise le dictionnaire Anglais US. Pour changer de dictionnaire, choisissez
Edition > Préférences > Général (Windows) ou Dreamweaver > Préférences > Général (Macintosh), puis choisissez le
dictionnaire que vous souhaitez utiliser dans le menu déroulant Dictionnaire du correcteur d'orthographe.
1 Choisissez Commandes > Orthographe ou appuyez sur les touches Maj+F7.
Lorsque Dreamweaver ne reconnaît pas un mot, la boîte de dialogue Vérifier l'orthographe s'affiche.
2 Sélectionnez l'option correspondant au traitement que vous souhaitez appliquer à l'occurrence.
Ajouter Ajoute le mot non reconnu à votre dictionnaire personnel.
Ignorer Ignore cette occurrence du mot non reconnu.
Remplacer Remplace cette occurrence du mot non reconnu par le texte que vous tapez dans la zone de texte
Remplacer par, ou par le mot sélectionné dans la liste Suggestions.
Tout ignorer Ignore toutes les occurrences du mot non reconnu.
Tout remplacer Remplace toutes les occurrences du mot non reconnu.
Remarque : Dreamweaver ne permet pas de supprimer les entrées qui ont été ajoutées aux dictionnaires personnels.
Importation de données tabulaires
Vous pouvez importer des données tabulaires dans un document en enregistrant d'abord ces fichiers (tels que des
fichiers Microsoft Excel ou d'une base de données) sous forme de fichiers texte délimités.
Vous pouvez importer et mettre en forme des données tabulaires, ainsi qu'importer du text à partir de documents
HTML Microsoft Word.
Vous pouvez également ajouter du texte provenant d'un document Microsoft Excel dans un document Dreamweaver
en important le contenu du fichier Excel dans une page Web.
1 Choisissez Fichier > Importer > Importer les données tabulaires ou Insertion > Objets du tableau > Importer les
données tabulaires.
2 Recherchez le fichier souhaité ou entrez son nom dans la zone de texte.
3 Sélectionnez le délimiteur utilisé lors de l'enregistrement du fichier en tant que texte délimité. Les options sont Tab,
Virgule, Point-virgule, Deux points et Autre.
Si vous sélectionnez Autre, un champ vierge s'affiche à côté de l'option. Entrez le caractère utilisé comme délimiteur.
4 Utilisez les options restantes pour formater ou définir le tableau dans lequel importer les données, puis cliquez sur OK.
Dernière mise à jour le 4/5/2011
235
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Voir aussi
« Ouverture et modification de documents existants » à la page 72
« Importation et exportation de données tabulaires » à la page 186
Importation de documents Microsoft Office (Windows uniquement)
Vous pouvez insérer le contenu d'un document Microsoft Word ou Excel dans une page Web nouvelle ou existante.
Lorsque vous importez un document Word ou Excel, Dreamweaver reçoit le code HTML converti et l'insère dans votre
page Web. La taille du fichier, après réception du code HTML converti par Dreamweaver, doit être inférieure à 300 Ko.
Au lieu d'importer tout le contenu d'un fichier, vous pouvez également coller une partie du document Word et
protéger son formatage.
Remarque : Si vous utilisez Microsoft Office 97, il n'est pas possible d'importer le contenu d'un document Word ou Excel.
Vous devez insérer un lien vers le document.
1 Ouvrez la page Web dans laquelle vous souhaitez copier le document Word ou Excel.
2 En mode Création, procédez de l'une des manières suivantes pour sélectionner le fichier :
• Déplacez le fichier de son emplacement actuel vers la page où le contenu doit s'afficher.
• Choisissez Fichier > Importer > Document Word ou Fichier > Importer > Document Excel.
3 Dans la boîte de dialogue Insérer un document, recherchez le fichier à ajouter, sélectionnez une option de
formatage dans le menu Mise en forme situé dans le bas de la boîte de dialogue, puis cliquez sur Ouvrir.
Texte seul Permet d'insérer du texte non formaté. Si le texte d'origine est mis en forme, tout le formatage est supprimé.
Texte structuré Permet d'insérer du texte en conservant sa structure, mais sans le formatage de base. Par exemple, vous
pouvez coller un texte et conserver la structure des paragraphes, des listes et des tableaux, mais pas les mises en gras,
italiques et autres formatages.
Texte structuré avec formatage de base Permet d'insérer du texte structuré et du texte HTML avec une mise en forme
simple (tel que des paragraphes et des tableaux, ainsi que du texte mis en forme avec les balisesb, i, u, strong, em, hr,
abbr ou acronym tag).
Texte structuré avec formatage complet Permet d'insérer du texte en conservant toute sa structure, son formatage
HTML et ses styles CSS.
Nettoyage des espaces inter-paragraphes de Word Permet d'éliminer les espaces superflus entre les paragraphes
lorsque vous collez le texte alors que l'option Texte structuré ou Mise en forme de base est sélectionnée.
Le contenu du document Word ou Excel s'affiche dans votre page.
Création d'un lien vers un document Word ou Excel
Vous pouvez insérer un lien vers un document Microsoft Word ou Excel dans une page existante.
1 Ouvrez la page où le lien doit être affiché.
2 Faites glisser le fichier de son emplacement actuel vers la page Dreamweaver, en plaçant le lien à l'emplacement
voulu.
3 Sélectionnez Créer un lien, puis cliquez sur OK.
4 Si le document vers lequel vous créez un lien réside hors du dossier racine de votre site, Dreamweaver vous invite
à le copier dans ce dossier.
Dernière mise à jour le 4/5/2011
236
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
En copiant le document dans le dossier racine du site, vous êtes assuré que le document sera disponible lors de la
publication du site Web.
5 Lorsque vous chargez votre page sur le serveur Web, vous devez également charger le fichier Word ou Excel.
Votre page contient désormais un lien vers le document Word ou Excel. Le texte du lien est le nom du fichier lié. Si
vous le souhaitez, vous pouvez modifier ce texte dans la fenêtre du document.
A propos du formatage de texte (CSS et HTML)
Les méthodes de formatage du texte dans Dreamweaver s'apparentent à celles d'un logiciel de traitement de texte
standard. Vous pouvez définir le style de formatage par défaut (Paragraphe, En-tête 1, En-tête 2, etc.) pour un bloc de
texte, modifier la police, la taille la couleur et l'alignement du texte sélectionné ou appliquer des styles de texte tels que
gras, italique, code (texte à chasse fixe) et souligné.
Dreamweaver comprend deux inspecteurs Propriétés, intégrés pour n'en faire qu'un : l'inspecteur Propriétés CSS et
l'inspecteur Propriétés HTML. Lorsque vous utilisez l'inspecteur Propriétés CSS, Dreamweaver met en forme le texte
à l'aide de feuilles de style en cascade. Les styles CSS offrent aux concepteurs et développeurs Web un meilleur contrôle
de l'aspect de la page Web tout en proposant des fonctions qui permettent d'améliorer l'accessibilité et de réduire la
taille des fichiers. L'inspecteur Propriétés CSS permet d'accéder à des styles existants et d'en créer de nouveaux.
CSS permet de modifier le style d'une page Web sans compromettre sa structure. En séparant les éléments de
conception visuelle (polices, couleurs, marges, etc.) des éléments logiques internes à la structure d'une page Web, CSS
offre aux concepteurs un contrôle à la fois visuel et typographique sans nuire à l'intégrité du contenu. De plus, définir
une conception typographique et une mise en page depuis un bloc unique de code (sans avoir recours aux cartes
graphiques, aux balises font, aux tableaux et aux GIF d'espacement) permet un chargement plus rapide, simplifie la
maintenance du site et fournit un point central à partir duquel il est possible de contrôler les attributs de conception
sur plusieurs pages Web.
Vous pouvez stocker les styles créés à l'aide de CSS directement dans le document ou, pour disposer de davantage de
puissance et de flexibilité, vous pouvez les stocker dans une feuille de style externe. Si vous associez une feuille de style
externe à plusieurs pages Web, toutes les pages s'adapteront automatiquement si vous effectuez une modification dans
cette feuille de style. Pour accéder à toutes les règles CSS d'une page, utilisez le panneau Styles CSS (Fenêtre > Styles
CSS). Pour accéder aux règles qui s'appliquent à la sélection actuelle, utilisez le panneau Styles CSS (mode Actuel) ou
le menu Règle cible de l'inspecteur Propriétés CSS.
Si vous le préférez, vous pouvez mettre en forme le texte de vos pages Web à l'aide de balises de marquage HTML. Pour
employer des balises HTML au lieu de CSS, mettez le texte en forme à l'aide de l'inspecteur Propriétés HTML.
Remarque : Vous pouvez combiner des formatages CSS et HTML 3.2 dans une même page. Le formatage est appliqué de
façon hiérarchique : le formatage HTML 3.2 supplante celui appliqué par des feuilles de style CSS externes et le formatage
CSS intégré dans un document supplante les styles CSS externes.
Voir aussi
« Ouverture du panneau Styles CSS » à la page 137
« Description des feuilles de style en cascade » à la page 129
Définition des propriétés de texte dans l'inspecteur Propriétés
Vous pouvez utiliser l'inspecteur Propriétés de texte pour appliquer un formatage HTML ou CSS. Lorsque vous
appliquez un formatage HTML, Dreamweaver ajoute des propriétés au code HTML du corps de la page. Lorsque vous
appliquez un formatage CSS, Dreamweaver écrit les propriétés dans l'en-tête du document ou dans une feuille de style
séparée.
Dernière mise à jour le 4/5/2011
237
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Remarque : Lorsque vous créez des styles CSS intégrés, Dreamweaver ajoute directement le code d'attribut du style au
corps de la page.
Voir aussi
« Création d'une nouvelle règle CSS » à la page 139
« Définition des propriétés CSS » à la page 140
« Définition des propriétés de cellule, de ligne ou de colonne » à la page 190
« Définition des préférences générales de Dreamweaver » à la page 31
Didacticiel relatif à l'inspecteur Propriétés CSS
Modification de règles CSS dans l'inspecteur Propriétés
1 Si ce n'est pas déjà fait, ouvrez l'inspecteur Propriétés (Fenêtre > Propriétés) puis cliquez sur le bouton CSS.
2 Effectuez l'une des opérations suivantes :
• Placez le point d'insertion dans un bloc de texte qui a été mis en forme à l'aide d'une règle que vous voulez modifier.
La règle s'affiche dans le menu Règle cible.
• Choisissez une règle dans le menu Règle cible.
3 Apportez les modifications désirées à la règle à l'aide des différentes options de l'inspecteur Propriétés CSS.
Règle cible La règle que vous modifiez dans l'inspecteur Propriétés CSS. Lorsqu'un style existant est appliqué au texte,
la règle qui influe sur le format du texte s'affiche lorsque vous cliquez dans le texte sur la page. Vous pouvez également
utiliser le menu Règle cible pour créer de nouvelles règles CSS et de nouveaux styles intégrés, ou pour appliquer des
classes existantes au texte sélectionné. Si vous créez une nouvelle règle, vous devez remplir la boîte de dialogue
Nouvelle règle CSS. Pour plus d'informations, consultez les liens dans le bas de cette rubrique.
Modifier la règle Ouvre la boîte de dialogue Définition des règles CSS pour la règle cible. Par contre, si vous choisissez
Nouvelle règle CSS dans le menu Règle cible puis que vous cliquez sur le bouton Modifier la règle, Dreamweaver ouvre
la boîte de dialogue Définition de nouvelle règle CSS.
Panneau CSS Ouvre le panneau Styles CSS et affiche les propriétés de la règle cible en mode Actuel.
Police Modifie la police de la règle cible.
Taille Définit la taille de police de la règle cible.
Couleur du texte Définit la couleur sélectionné comme couleur de police dans la règle cible. Sélectionnez une couleur
sécurisée pour le Web en cliquant sur le sélecteur de couleur ou tapez directement une valeur hexadécimale (par
exemple, #FF0000) dans le champ de texte adjacent.
Gras Ajoute la propriété gras à la règle cible.
Italique Ajoute la propriété italique à la règle cible.
Aligner à gauche, Centrer et Aligner à droite Ajoute les propriétés d'alignement respectives à la règle cible.
Remarque : Les propriétés Police, Taille, Couleur du texte, Gras, Italique et Alignement affichent toujours les propriétés
de la règle qui s'applique à la sélection actuelle dans la fenêtre de document. Lorsque vous modifiez l'une de ces propriétés,
vous influez sur la règle cible.
Vous trouverez un didacticiel vidéo sur l'utilisation de l'inspecteur Propriétés CSS à l'adresse
www.adobe.com/go/lrvid4041_dw_fr.
Dernière mise à jour le 4/5/2011
238
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Définition de formatage HTML dans l'inspecteur Propriétés
1 Si ce n'est pas déjà fait, ouvrez l'inspecteur Propriétés (Fenêtre > Propriétés) puis cliquez sur le bouton HTML.
2 Sélectionnez le texte que vous souhaitez mettre en forme.
3 Définissez les options que vous voulez appliquer au texte sélectionné :
Format Définit le style de paragraphe du texte sélectionné. Paragraphe applique un format par défaut pour une balise
<p>, En-tête 1 ajoute une balise H1, et ainsi de suite.
ID Attribue un ID à votre sélection. Le menu ID présente (le cas échéant) tous les ID non utilisés et déclarés dans le
document.
Classe Affiche le style de classe appliqué au texte sélectionné. Si aucun style n'est appliqué à la sélection, la mention
Aucun styleCSS apparaît dans le menu déroulant. Si plusieurs styles sont appliqués à la sélection, le menu est vide.
Le menu Style permet d'effectuer les opérations suivantes :
• Sélectionnez le style à appliquer à la sélection.
• Choisissez Aucun pour ne plus appliquer le style sélectionné.
• Pour renommer le style, choisissez Renommer.
• Sélectionnez Attacher une feuille de style pour ouvrir une boîte de dialogue qui vous permet d'attacher une feuille
de style externe à la page.
Gras Applique soit <b> soit <strong> au texte sélectionné en fonction de la préférence de style définie dans la
catégorie Général de la boîte de dialogue Préférences.
Italique Applique soit <i> soit <em> au texte sélectionné en fonction de la préférence de style définie dans la catégorie
Général de la boîte de dialogue Préférences.
Liste non ordonnée Crée une liste à puces à partir du texte sélectionné. Si aucun texte n'est sélectionné, une nouvelle
liste à puces est ouverte.
Liste numérotée Crée une liste numérotée à partir du texte sélectionné. Si aucun texte n'est sélectionné, une nouvelle
liste numérotée est ouverte.
Blockquote et Supprimer Blockquote Augmente ou supprime la mise en retrait du texte sélectionné, en insérant ou
supprimant la balise blockquote. Au sein d'une liste, l'ajout d'un retrait crée une liste imbriquée et sa suppression
ramène les éléments de la liste au niveau parent.
Lien Crée une liste à puces à partir du texte sélectionné. Cliquez sur l'icône de dossier pour rechercher un fichier de
votre site, faites glisser l'icône Pointer vers un fichier sur un fichier du panneau Fichiers ou faites glisser un fichier du
panneau Fichiers sur la zone.
Titre Définit l'infobulle textuelle d'un lien hypertexte.
Cible Spécifie la fenêtre ou le cadre dans lequel sera chargé le document lié :
•
_blank charge le document lié dans une nouvelle fenêtre, sans nom, du navigateur.
•
_parent charge le document lié dans le jeu de cadres parent (ou dans la fenêtre parente) du cadre contenant le lien.
Si le cadre contenant le lien n'est pas imbriqué, le document lié sera chargé dans la fenêtre de base du navigateur.
•
_self charge le document lié dans le même cadre (ou la même fenêtre) que le lien. Il s'agit de la cible par défaut,
de sorte qu'il est le plus souvent inutile de la spécifier.
•
_top charge le document lié dans la fenêtre de base du navigateur, en supprimant tous les cadres.
Dernière mise à jour le 4/5/2011
239
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Utilisation de formatage HTML
Même si CSS est la méthode de formatage de texte privilégiée, Dreamweaver permet d'employer du code HTML à cette fin.
Mise en forme des paragraphes
Utilisez le menu Format de l'inspecteur Propriétés HTML ou le sous-menu Format > Format de paragraphe pour
appliquer des balises standard de paragraphe et d'en-tête.
1 Placez le point d'insertion dans le paragraphe, ou sélectionnez une partie du texte du paragraphe.
2 Choisissez Texte > Format de paragraphe ou le menu Format de l'inspecteur Propriétés, puis sélectionnez une
option :
• Choisissez un format de paragraphe (par exemple, En-tête 1, En-tête 2, Texte pré-formaté, etc.). La balise HTML
associée au style choisi (par exemple, h1 pour En-tête 1, h2 pour En-tête 2, pre pour Texte pré-formaté, etc.) est
appliquée à tout le paragraphe.
• Choisissez Aucun pour supprimer un format de paragraphe.
Lorsque vous appliquez une balise d'en-tête à un paragraphe, Dreamweaver insère automatiquement la ligne de texte
suivante comme un paragraphe. Pour modifier ce paramètre, choisissez Edition > Préférences (Windows) ou
Dreamweaver > Préférences (Macintosh), puis assurez-vous que l'option Passer en paragraphe normal après le titre est
désactivée dans les Options d'édition de la catégorie Général.
Voir aussi
« Définition des propriétés de texte dans l'inspecteur Propriétés » à la page 236
« Définition des propriétés CSS » à la page 140
Modification de la couleur du texte
Vous pouvez modifier la couleur par défaut de tout le texte d'une page, ou la couleur du texte sélectionné sur la page.
Voir aussi
« Utilisation du sélecteur de couleur » à la page 224
Définition des couleurs par défaut du texte sur une page
❖ Choisissez Modifier > Propriétés de la page > Apparence (HTML) ou Liens (HTML), puis choisissez la couleur
pour les options Couleur du texte, Couleur du lien, Liens visités et Liens actifs.
Remarque : La couleur du lien actif est la couleur que prend un lien lorsque l'utilisateur clique dessus. Il est possible que
certains navigateurs Web n'utilisent pas la couleur que vous avez spécifiée.
Modification de la couleur du texte sélectionné
❖ Choisissez Format > Couleur, sélectionnez une couleur dans le sélecteur système, puis cliquez sur OK.
Alignement du texte
Vous pouvez aligner du texte à l'aide de code HTML en utilisant le menu Format > Aligner. Vous pouvez centrer un
élément sur la page à l'aide de la commande Format > Aligner > Centre.
Alignement de text sur une page
1 Sélectionnez le texte à aligner ou insérez le pointeur au début du texte.
2 Choisissez Format > Aligner, puis sélectionnez une commande d'alignement.
Dernière mise à jour le 4/5/2011
240
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Centrage des éléments de page
1 Sélectionnez l'élément (image, plug-in, tableau ou tout autre élément de la page) que vous désirez aligner au centre.
2 Choisissez Format > Aligner > Centre.
Remarque : Vous pouvez aligner et centrer des blocs de texte complets ; par contre, vous ne pouvez pas aligner ou centrer
une partie d'un en-tête ou d'un paragraphe.
Mise en retrait du texte
La commande Retrait applique la balise HTML blockquote à un paragraphe de texte, ce qui a pour effet de mettre en
retrait le texte de chaque côté de la page.
1 Placez le point d'insertion à l'emplacement où insérer le retrait.
2 Choisissez Format > Retrait ou Retrait négatif, ou choisissez Liste > Retrait ou Retrait négatif dans le menu.
Remarque : Un paragraphe accepte plusieurs indentations. Chaque application de cette commande produit un retrait
supplémentaire du texte de chaque côté du document.
Application de styles de police
Vous pouvez utiliser HTML pour appliquer un formatage de texte à une seule lettre, à des paragraphes entiers du site
ou encore à des blocs de texte. Le menu Format permet de définir ou de modifier les caractéristiques de police du texte
sélectionné. Vous pouvez définir le type, le style (par exemple, gras ou italique) et la taille d'une police de caractères.
1 Sélectionnez le texte. Si aucun texte n'est sélectionné, l'option s'appliquera au texte que vous taperez ensuite.
2 Faites votre choix parmi les options suivantes :
• Pour modifier la police, choisissez la combinaison désirée dans le menu Format > Police. Choisissez Par défaut pour
supprimer les polices préalablement appliquées. Cette option applique la police par défaut au texte sélectionné (en
l'occurrence, la police par défaut du navigateur ou la police affectée à cette balise dans une feuille de style CSS).
• Pour modifier le style de police, sélectionnez le style désiré (gras, italique, souligné, etc.) dans le menu Format >
Style.
Voir aussi
« Création de pages avec CSS » à la page 129
« Création d'une nouvelle règle CSS » à la page 139
Modification du nom d'une classe à partir de l'inspecteur Propriétés HTML
Dreamweaver affiche toutes les classes disponibles pour votre page dans le menu Classe de l'inspecteur Propriétés
HTML. Vous pouvez renommer des styles dans cette liste en choisissant l'option Renommer, à la fin de la liste des
styles de classes.
1 Choisissez Renommer dans le menu déroulant Style de l'inspecteur Propriétés du texte.
2 Sélectionnez le style à renommer dans le menu contextuel Renommer un style.
3 Entrez un nouveau nom dans la zone Nouveau nom, puis cliquez sur OK.
Dernière mise à jour le 4/5/2011
241
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Ajout d'espacements de paragraphe
Dreamweaver fonctionne comme une application classique de traitement de texte : Appuyez sur la touche Entrée
(Windows) ou Retour (Macintosh) pour commencer un nouveau paragraphe. Les navigateurs Web insèrent
automatiquement une ligne vierge entre les paragraphes. Vous pouvez vous-même espacer les paragraphes d'une ligne
vierge en insérant un saut de ligne.
Ajout d'un saut de paragraphe
❖ Appuyez sur la touche Entrée (Windows) ou Retour (Macintosh).
Ajout d'un saut de ligne
❖ Effectuez l'une des opérations suivantes :
• Appuyez sur les touches Maj+Entrée (Windows) ou Maj+Retour (Macintosh).
• Choisissez Insertion > HTML > Caractères spéciaux > Saut de ligne.
• Dans la catégorie Texte du panneau Insertion, cliquez sur le bouton Caractères et cliquez sur l'icône Saut de ligne.
Utilisation de barres horizontales
Les barres (lignes) horizontales sont utiles pour organiser les informations. Sur une page, le texte et les objets peuvent
être visuellement séparés par une ou plusieurs barres.
Création d'une barre horizontale
1 Dans la fenêtre de document, placez le curseur là où vous voulez insérer une barre horizontale.
2 Choisissez Insertion > HTML > Barre horizontale.
Modification d'une barre horizontale
1 Dans la fenêtre de document, sélectionnez la barre horizontale.
2 Choisissez Fenêtre > Propriétés pour ouvrir l'inspecteur Propriétés et modifier les propriétés selon vos besoins :
La zone de texte ID Permet de définir un ID pour la règle horizontale.
L et H Spécifient la largeur et la hauteur de la barre, en pixels ou en pourcentage de la taille de la page.
Alignement Spécifie l'alignement de la barre (Par défaut, Gauche, Centre ou Droite). Ce paramétrage ne s'applique
que si la largeur de la barre est inférieure à celle de la fenêtre du navigateur.
Ombrage Spécifie si la barre est accompagnée d'un effet d'ombre portée. Désactivez cette option pour dessiner la barre
en couleur pleine.
Classe Permet de joindre une feuille de style ou d'appliquer une classe à partir d'une feuille de style déjà jointe.
Modification des combinaisons de polices
Pour définir la combinaison de polices qui apparaît dans l'inspecteur Propriétés et dans Format > Police, utilisez la
commande Modifier la liste des polices.
Les combinaisons de polices de caractères déterminent la façon dont le texte des pages Web est affiché par les
navigateurs. Ces derniers utilisent, au sein de la combinaison de polices choisie, la première police installée sur
l'ordinateur de l'utilisateur. Si aucune des polices de cette combinaison n'est installée, le navigateur affiche le texte avec
la police par défaut indiquée dans ses préférences.
Dernière mise à jour le 4/5/2011
242
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Modification des combinaisons de polices
1 Choisissez Format > Police > Modifier la liste des polices.
2 Choisissez la combinaison de polices dans la liste qui apparaît en haut de la boîte de dialogue.
Les polices de la combinaison sélectionnée apparaissent dans la liste Polices choisies, dans le coin inférieur gauche de
la boîte de dialogue. Une liste de toutes les polices disponibles installées sur votre système se trouve à sa droite.
3 Effectuez l'une des opérations suivantes :
• Pour ajouter ou retirer des polices d'une combinaison, cliquez selon le cas sur l'un des boutons << ou >> qui se
trouvent entre les listes Polices choisies et Polices disponibles.
• Pour ajouter ou supprimer une combinaison de polices, cliquez selon le cas sur l'un des boutons plus (+) ou moins
(-) qui se trouvent dans la partie supérieure de la boîte de dialogue.
• Pour ajouter une police qui n'est pas installée sur votre ordinateur, tapez son nom dans le champ de texte en dessous
de la liste Polices disponibles, et cliquez sur le bouton<< pour ajouter cette police à la combinaison courante. Il peut
être utile d'ajouter une police qui n'est pas installée sur votre système, par exemple pour indiquer une police
spécifique à Windows lorsque vous travaillez sur un Macintosh.
• Pour déplacer la combinaison de polices au sein de la liste, cliquez sur les boutons fléchés en haut de la boîte de
dialogue.
Ajout d'une nouvelle combinaison à la liste des polices
1 Choisissez Format > Police > Modifier la liste des polices.
2 Sélectionnez une police dans la liste Polices disponibles, et cliquez sur le bouton << pour l'insérer dans la liste
Polices choisies.
3 Répétez l'étape 2 pour chaque police nécessaire dans la combinaison.
Pour ajouter une police qui n'est pas installée sur votre ordinateur, tapez son nom dans le champ de texte en dessous
de la liste Polices disponibles, et cliquez sur le bouton<< pour ajouter cette police à la combinaison courante. Il peut
être utile d'ajouter une police qui n'est pas installée sur votre système, par exemple pour indiquer une police spécifique
à Windows lorsque vous travaillez sur un Macintosh.
4 Lorsque vous avez fini de choisir des polices, sélectionnez une famille de polices générique dans la liste Polices
disponibles et cliquez sur le bouton << pour l'insérer dans la liste Polices choisies.
Les familles génériques de polices sont les suivantes : cursive, fantaisie, monospace (espacement non proportionnel),
sans-serif (espacement proportionnel sans empattement) et serif (espacement proportionnel avec empattement). Si
aucune des polices de la liste Polices disponibles n'est disponible sur l'ordinateur de l'utilisateur, le texte apparaît dans
la police par défaut associée à la famille de polices générique. Par exemple, avec la plupart des systèmes d'exploitation,
la police non proportionnelle (monospace) par défaut est Courier.
Insertion de dates
Dreamweaver comporte un objet Date pratique qui insère la date actuelle dans le format de votre choix (avec ou sans
heure), ainsi qu'une option pour mettre à jour cette date lorsque vous enregistrez le fichier.
Remarque : Les dates et heures affichées dans la boîte de dialogue Insérer date ne représentent pas la date actuelle ni ne
reflètent les dates/heures visualisées par un visiteur lorsqu'il affiche votre site. Elles ne sont qu'un exemple de la manière
dont vous souhaitez afficher ces informations.
1 Dans la fenêtre de document, placez le curseur là où vous désirez insérer la date.
Dernière mise à jour le 4/5/2011
243
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
2 Effectuez l'une des opérations suivantes :
• Choisissez Insertion > Date.
• Dans la catégorie Commun du panneau Insertion, cliquez sur le bouton Date.
3 Dans la boîte de dialogue qui apparaît alors, sélectionnez un format d'affichage pour le jour de la semaine, pour la
date et pour l'heure.
4 Si vous désirez que cette date soit actualisée à chaque nouvel enregistrement du document, activez l'option Mettre
à jour automatiquement lors de l'enregistrement. Si vous préférez que la date soit insérée comme du texte normal
et ne soit jamais actualisée, désactivez cette option.
5 Cliquez sur OK pour insérer la date.
Si vous avez sélectionné Mettre à jour automatiquement lors de l'enregistrement, vous pouvez modifier le format de
la date après l'avoir insérée dans le document, en cliquant sur le texte mis en forme et en sélectionnant Modifier le
format de date dans l'inspecteur Propriétés.
Ajout et modification d'images
A propos des images
Différents types de formats de fichiers graphiques existent, mais trois formats de fichiers graphiques sont
généralement utilisés dans les pages Web : GIF, JPEG et PNG. Les formats de fichier GIF et JPEG sont les plus
répandus ; ils peuvent être affichés dans la plupart des navigateurs.
Les fichiers PNG sont les plus adaptés pour la plupart des types de graphiques Web en raison de leur souplesse et de
leur taille réduite ; toutefois, l'affichage d'images PNG n'est que partiellement pris en charge dans Microsoft Internet
Explorer (4.0 et versions ultérieures) et dans Netscape Navigator (4.04 et versions ultérieures). A moins que votre site
ne soit spécifiquement destiné à des navigateurs prenant en charge le format PNG, utilisez des fichiers GIF ou JPEG
afin de cibler un plus large public.
GIF (Graphic Interchange Format) Les fichiers GIF utilisent un maximum de 256 couleurs et sont destinés à l'affichage
d'images à tons non continus ou d'images comportant de larges zones de couleurs unies, telles que les barres de
navigation, les boutons, les icônes, les logos ou d'autres images contenant des tons et des couleurs uniformes.
JPEG (Joint Photographic Experts Group) Le format de fichier JPEG est le format supérieur destiné aux photographies
ou aux images à tons continus, car de tels fichiers peuvent contenir des millions de couleurs. Lorsque la qualité d'un
fichier JPEG augmente, sa taille et son temps de téléchargement augmentent également. Il est souvent possible
d'obtenir un bon compromis entre la qualité de l'image et sa taille de fichier en compressant un fichier JPEG.
Le format de fichier PNG (Portable Network Group) Le format de fichier PNG est un format de remplacement non
breveté pour les fichiers GIF, qui inclut la prise en charge des images à couleurs indexées, en niveaux de gris et en
couleurs vraies ainsi que la prise en charge du canal alpha pour la transparence. PNG est le format de fichier natif
d'Adobe® Fireworks®. Les fichiers PNG conservent toutes les informations d'origine sur les calques, les vecteurs, les
couleurs et les effets (comme par exemple des ombres portées) et tous ces éléments peuvent être modifiés à tout
moment. Les fichiers doivent avoir l'extension .png pour être reconnus comme fichiers PNG par Dreamweaver.
Insertion d'une image
Lorsque vous insérez une image dans un document Dreamweaver, le programme crée une référence à ce fichier
d'image dans le code source HTML. Pour que cette référence soit correcte, le fichier d'image doit résider sur le site.
Dans le cas contraire, Dreamweaver vous invite à copier le fichier sur le site.
Dernière mise à jour le 4/5/2011
244
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Vous pouvez également insérer des images de façon dynamique. Les images dynamiques sont des images qui changent
souvent ; par exemple, les systèmes de rotation de bannières publicitaires qui sélectionnent les bannières de manière
aléatoire, puis affichent l'image de la bannière sélectionnée lors de l'affichage d'une page.
Après avoir inséré une image, vous pouvez définir les options d'accessibilité aux balises d'image qui pourront être lues
par les lecteurs d'écran destinés aux utilisateurs malvoyants. Ces attributs peuvent être modifiés dans le code HTML.
Vous trouverez un didacticiel consacré à l'insertion d'images à l'adresse www.adobe.com/go/vid0148_fr.
1 Placez le point d'insertion à l'endroit où doit apparaître l'image dans la fenêtre de document, puis procédez de l'une
des manières suivantes :
• Dans la catégorie Commun du panneau Insertion, cliquez sur l'icône Images
.
• Dans la catégorie Commun du panneau Insertion, cliquez sur le bouton Images et sélectionnez l'icône Image.
Lorsque l'icône Image est affichée dans le panneau Insertion, vous pouvez la faire glisser vers la fenêtre du
document (ou la fenêtre du mode Code si vous travaillez sur le code).
• Choisissez Insertion > Image.
• Faites glisser une image à partir du panneau Actifs (Fenêtre > Actifs) vers l'emplacement souhaité dans la fenêtre
de document, puis passez à l'étape 3.
• Faites glisser une image à partir du panneau Fichiers vers l'emplacement souhaité dans la fenêtre de document, puis
passez à l'étape 3.
• Faites glisser une image à partir du bureau vers l'emplacement désiré sur la page, puis passez à l'étape 3.
2 Dans la boîte de dialogue qui s'affiche, procédez de l'une des manières suivantes :
• Sélectionnez Système de fichiers pour choisir un fichier d'image.
• Sélectionnez Source de données pour choisir une source d'images dynamiques.
• Cliquez sur le bouton Sites et serveurs pour choisir un fichier d'image dans un dossier distant de l'un de vos sites
Dreamweaver.
3 Parcourez l'arborescence pour sélectionner l'image ou la source de contenu à insérer.
Tant que le document sur lequel vous travaillez n'a pas encore été enregistré, Dreamweaver crée automatiquement une
référence d'emplacement de fichier de type file://. Lorsque vous enregistrez le document sur le site, Dreamweaver
convertit cette référence en indiquant un chemin relatif au document.
Remarque : Lors de l'insertion d'images, vous pouvez également utiliser un chemin absolu vers une image qui réside sur
un serveur distant (c'est-à-dire une image qui n'est pas disponible sur le disque dur local). Toutefois, si vous constatez des
problèmes de performances lorsque vous travaillez, vous pouvez décider de désactiver l'affichage de l'image en mode
Création en désélectionnant l'option Commandes > Afficher les fichiers externes.
4 Cliquez sur OK. La boîte de dialogue Attributs d'accessibilité aux balises d'image s'affiche si elle a été activée dans
les préférences (Edition > Préférences).
5 Tapez des valeurs dans les zones Texte secondaire et Description longue, puis cliquez sur OK.
• Dans la zone Texte secondaire, entrez un nom ou une brève description de l'image. Le lecteur d'écran lit les
informations que vous entrez ici. N'entrez pas plus de 50 caractères. Pour de plus longues descriptions, entrez
plutôt, dans la zone de texte Description longue, un lien vers un fichier donnant davantage d'informations à propos
de l'image.
• Dans la zone de texte Description longue, saisissez l'emplacement du fichier à afficher lorsque l'utilisateur clique
sur l'image ou cliquez sur l'icône du dossier pour naviguer jusqu'à un fichier. Cette zone de texte fournit un lien vers
un fichier qui concerne ou donne davantage d'informations sur l'image.
Dernière mise à jour le 4/5/2011
245
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Remarque : Vous pouvez entrer les informations dans une seule zone de texte ou les deux, selon vos besoins. Le lecteur
d'écran lit l'attribut Alt de l'image.
Remarque : Si vous cliquez sur Annuler, l'image s'affiche dans le document, mais Dreamweaver ne lui associe ni balises
ni attributs d'accessibilité.
6 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), définissez les propriétés de l'image.
Voir aussi
« Création d'images dynamiques » à la page 604
« Cartes graphiques » à la page 294
« Optimisation de l'espace de travail pour la conception de pages accessibles » à la page 717
« Définition des propriétés de page » à la page 217
Didacticiel sur l'insertion d'images
Définition des propriétés de l'image
L'inspecteur Propriétés Images vous permet de définir les propriétés d'une image. Pour voir toutes les propriétés
illustrées, cliquez sur la flèche d'agrandissement, dans le coin inférieur droit de l'inspecteur Propriétés.
1 Choisissez la commande Fenêtre > Propriétés pour afficher l'inspecteur Propriétés pour une image sélectionnée.
2 Dans la zone de texte située au-dessous de l'image miniature, définissez un nom d'image auquel vous pouvez faire
référence lors de l'utilisation d'un comportement Dreamweaver (tel que Permuter une image) ou lors de l'utilisation
d'un langage de script tel que JavaScript ou VBScript.
3 Définissez les options de l'image.
L et H La largeur et la hauteur de l'image, en pixels. Dreamweaver met automatiquement à jour ces zones de texte avec
les dimensions d'origine de l'image lorsque vous insérez une image dans une page.
Si vous définissez pour L (largeur) et H (hauteur) des valeurs qui ne correspondent pas aux dimensions réelles de
l'image, celle-ci risque de ne pas s'afficher correctement dans un navigateur (Pour revenir aux valeurs d'origine, cliquez
sur les étiquettes de zone de texte L et H ou sur le bouton Rétablir la taille originale de l'image qui apparaît à droite des
zones de texte L et H une fois que vous avez tapé de nouvelles valeurs.
Remarque : Vous pouvez modifier ces valeurs pour modifier l'échelle d'affichage de cette instance de l'image, mais cette
technique ne diminuera pas le temps de chargement, puisque le navigateur chargera la totalité de l'image à son échelle
normale avant de la réduire. Pour réduire le temps de téléchargement et être sûr que toutes les instances de l'image sont
affichées aux mêmes dimensions, utilisez une application de retouche d'image pour adapter les proportions de l'image.
Src Spécifie le fichier source de l'image. Tapez le chemin d'accès ou cliquez sur l'icône du dossier pour trouver le fichier
source et le sélectionner.
Lien Spécifie un lien hypertexte pour l'image. Faites glisser l'icône Pointer vers un fichier dans le panneau Fichiers,
cliquez sur l'icône de dossier pour rechercher et sélectionner un document de votre site ou tapez directement l'URL.
Dernière mise à jour le 4/5/2011
246
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Alignement Aligne l'image et le texte sur la même ligne.
Sec Spécifie le texte secondaire qui apparaîtra à la place de l'image dans les navigateurs de type texte seulement, ou
dans les navigateurs dont l'utilisateur a désactivé le téléchargement automatique des images. Pour les utilisateurs
malvoyants qui utilisent un synthétiseur vocal avec un navigateur en mode texte, le texte est lu. Dans certains
navigateurs, ce texte apparaît également lorsque le pointeur se trouve sur l'image.
Nom de la carte et outils Zone réactive Permettent de nommer et de créer une carte graphique côté client
Espace V. et Espace H. Ajoutent un espace, en pixels, le long des côtés de l'image. Espace V ajoute un espace le long des
bords supérieur et inférieur d'une image. Espace H ajoute un espace le long des bords gauche et droit d'une image.
Cible Spécifie la fenêtre ou le cadre dans lequel la page liée devrait être chargée. Cette option n'est pas disponible
lorsque l'image n'est pas liée à un autre fichier. Les noms de tous les cadres dans le jeu de cadres actuel s'affichent dans
la liste Cible. Vous pouvez également choisir parmi les noms de cible réservés suivants :
•
_blank charge le fichier lié dans une nouvelle fenêtre, sans nom, du navigateur.
•
_parent charge le fichier lié dans le jeu de cadres parent, ou dans la fenêtre parente du cadre contenant le lien. Si
le cadre contenant le lien n'est pas imbriqué, le document lié sera chargé dans la fenêtre de base du navigateur.
•
_self charge le fichier lié dans le même cadre, ou dans la même fenêtre, que le lien. Cette cible étant celle par
défaut, vous n'avez généralement pas à la spécifier.
•
_top charge le fichier lié dans la fenêtre de base du navigateur, supprimant ainsi tous les cadres.
Bordure Correspond à la largeur, en pixels, de la bordure de l'image. La valeur par défaut est Pas de bordure.
Modifier Lance l'éditeur d'image que vous avez indiqué dans les préférences d'éditeurs externes et ouvre l'image
sélectionnée.
Modification des paramètres d'une image
affiche la boîte de dialogue Aperçu d'image, où vous pouvez optimiser
l'image.
Recadrer
Permet de rogner une image en supprimant les zones indésirables de l'image sélectionnée.
Permet de rééchantillonner une image redimensionnée et d'en améliorer la qualité dans ses
nouvelles taille et forme.
Rééchantillonner
Luminosité et contraste
Accentuer
Ajuste la luminosité et le contraste d'une image
Permet d'ajuster la netteté d'une image.
Ramène les valeurs L et H à la taille originale de l'image. Ce bouton apparaît à droite des zones de
texte L et H lorsque vous ajustez les valeurs de l'image sélectionnée.
Rétablir la taille
Modification des attributs d'accessibilité d'une image dans le code
Si vous avez inséré des attributs d'accessibilité pour une image, vous pouvez modifier ces valeurs dans le code HTML.
1 Sélectionnez l'image dans la fenêtre de document.
2 Effectuez l'une des opérations suivantes :
• Modifiez les attributs de l'image en mode Code.
• Cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis
choisissez Modifier la balise.
• Modifiez la valeur Alt dans l'inspecteur Propriétés.
Dernière mise à jour le 4/5/2011
247
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Alignement d'une image
Vous pouvez aligner une image sur du texte, sur une autre image, sur un plug-in ou sur d'autres éléments de la ligne.
Vous pouvez également définir l'alignement horizontal d'une image.
1 Sélectionnez l'image dans le mode Création.
2 Définissez les attributs d'alignement de l'image dans l'inspecteur Propriétés, à l'aide du menu Alignement.
Vous pouvez définir l'alignement selon d'autres éléments situés dans le même paragraphe ou la même ligne.
Remarque : Le langage HTML ne permet pas de placer un texte autour des contours d'une image, contrairement à
certaines applications de traitement de texte.
Les options d'alignement sont les suivantes :
Par défaut Provoque un alignement sur la ligne de base. La valeur par défaut varie selon le navigateur du visiteur du
site.
Ligne de base et Bas Alignent la ligne de base du texte (ou de tout autre élément du même paragraphe) sur le bas de
l'objet sélectionné.
Haut Aligne le haut d'une image sur le haut de l'élément le plus élevé (image ou texte) dans la ligne.
Milieu Aligne le milieu de l'image avec la ligne de base de la ligne.
Haut du texte Aligne le haut de l'image avec le haut du plus grand caractère de la ligne de texte.
Milieu absolu Aligne le milieu de l'image avec le milieu du texte dans la ligne actuelle.
Bas absolu Aligne le bas de l'image avec le bas de la ligne de texte (y compris les jambages inférieurs comme dans la
lettre g).
Gauche Aligne l'image sélectionnée sur la marge de gauche et place le texte qui l'entoure à sa droite. Si le texte aligné
à gauche précède l'objet sur la ligne, les objets alignés à gauche sont généralement placés automatiquement sur une
nouvelle ligne.
Droite Aligne l'image sur la marge de droite et place le texte qui l'entoure à sa gauche. Si le texte aligné à droite précède
l'objet sur la ligne, les objets alignés à droite sont généralement placés automatiquement sur une nouvelle ligne.
Redimensionnement visuel d'une image
Dans Dreamweaver, vous pouvez redimensionner visuellement certains éléments comme des images, des plug-ins, des
fichiers Shockwave ou SWF, des applets et des contrôles ActiveX.
Le redimensionnement visuel d'une image permet de mieux voir comment l'image affecte la mise en forme en
différentes dimensions. Il n'adapte pas les dimensions de l'image aux proportions que vous avez spécifiées. Si vous
redimensionnez visuellement une image dans Dreamweaver, mais que vous n'utilisez pas d'application de retouche
d'image (comme Adobe Fireworks) pour en adapter les proportions aux dimensions désirées, le navigateur de
l'utilisateur devra le faire lorsque la page sera chargée. Cela risque d'entraîner l'allongement du temps de
téléchargement de la page et l'affichage incorrect de l'image dans le navigateur. Pour réduire le temps de
téléchargement et être sûr que toutes les instances de l'image sont affichées aux mêmes dimensions, utilisez une
application de retouche d'image pour adapter les proportions de l'image.
Lorsque vous redimensionnez une image dans Dreamweaver, vous pouvez la rééchantillonner afin de l'adapter à ses
nouvelles dimensions. Le rééchantillonnage ajoute ou enlève des pixels d'images JPEG ou GIF redimensionnées afin
qu'elles correspondent le mieux possible à l'aspect des images originales. Le rééchantillonnage d'une image réduit la
taille de son fichier, ce qui permet d'en accélérer le téléchargement.
Dernière mise à jour le 4/5/2011
248
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Voir aussi
« Modification d'images dans Dreamweaver » à la page 250
Redimensionnement visuel d'un élément
1 Sélectionnez l'élément (par exemple, une image ou un fichier SWF) dans la fenêtre de document.
Des poignées de redimensionnement apparaissent à droite et en bas de l'élément, et dans le coin inférieur droit. Si ces
poignées n'apparaissent pas, cliquez à l'extérieur de l'élément à redimensionner, puis sélectionnez-le à nouveau ou
cliquez sur la balise correspondante dans le sélecteur de balises.
2 Pour redimensionner l'élément, utilisez l'une des méthodes suivantes :
• Pour ajuster la largeur de l'élément, déplacez la poignée à droite de la sélection.
• Pour ajuster la hauteur de l'élément, déplacez la poignée au bas de la sélection.
• Pour ajuster simultanément la largeur et la hauteur de l'élément, faites glisser la poignée de l'angle de la sélection.
• Pour conserver les proportions de l'élément (rapport largeur/hauteur) lorsque vous modifiez ses dimensions, faites
glisser la poignée de l'angle de la sélection tout en appuyant sur la touche Maj.
•
Pour ajuster la largeur et la hauteur d'un élément à une taille précise, (par exemple, 1x1 pixel), utilisez l'inspecteur
Propriétés pour entrer une valeur numérique. Les éléments peuvent être redimensionnés visuellement à une taille
minimale de 8 x 8 pixels.
3 Pour rétablir la taille originale d'un élément redimensionné, supprimez les valeurs des zones de texte L et H ou
cliquez sur le bouton Rétablir la taille dans l'inspecteur Propriétés.
Rétablissement de la taille originale d'une image
❖ Cliquez sur le bouton Rétablir la taille
dans l'inspecteur Propriétés des images.
Rééchantillonnage d'une image redimensionnée
1 Redimensionnez l'image de la manière décrite ci-dessus.
2 Cliquez sur le bouton Rééchantillonner
dans l'inspecteur Propriétés des images.
Remarque : Vous ne pouvez pas rééchantillonner les espaces réservés pour une image ou les éléments autres que les
images bitmap.
Insertion d'un espace réservé pour l'image
Un espace réservé pour une image est un graphique que vous utilisez jusqu'à ce que le dessin final soit prêt pour être
ajouté à une page Web. Vous pouvez définir la taille et la couleur de l'espace réservé et lui donner une étiquette de texte.
1 Dans la fenêtre de document, placez le point d'insertion à l'endroit où vous voulez insérer un espace réservé pour
un graphique.
2 Cliquez sur Insertion > Objets image > Espace réservé pour l’image.
3 Dans la zone de texte Nom (facultatif), tapez le texte que vous souhaitez voir apparaître comme étiquette de l'espace
réservé pour l'image. Laissez la zone de texte vide si vous ne voulez pas faire apparaître d'étiquette. Le nom doit
commencer par une lettre et ne peut contenir que des lettres ou des chiffres : les espaces et les caractères ASCII
étendu ne sont pas autorisés.
4 (Obligatoire) Dans les zones de texte Largeur et Hauteur, saisissez un nombre pour définir la taille de l'image en
pixels.
Dernière mise à jour le 4/5/2011
249
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
5 (Facultatif) Pour Couleur, procédez de l'une des manières suivantes pour appliquer une couleur :
• Utilisez le sélecteur de couleur pour sélectionner une couleur.
• Entrez la valeur hexadécimale de la couleur (par exemple #FF0000).
• Entrez le nom d'une couleur sécurisée pour le Web (par exemple rouge).
6 (Facultatif) Dans Texte secondaire, entrez une description de l'image pour les personnes utilisant un navigateur en
mode texte.
Remarque : Une balise image est insérée automatiquement dans le code HTML, avec un attribut src vide.
7 Cliquez sur OK.
Les attributs de couleur et de taille ainsi que l'étiquette de l'espace réservé s'affichent comme suit :
Lorsqu'ils sont visualisés dans un navigateur, le texte de l'étiquette et celui de la taille ne s'affichent pas.
Voir aussi
« Redimensionnement visuel d'une image » à la page 247
« Utilisation de Fireworks pour modifier les espaces réservés pour les images Dreamweaver » à la page 377
Remplacement d'un espace réservé pour une image
Un espace réservé pour l'image n'affiche pas d'image dans un navigateur. Avant de publier votre site, il convient de
remplacer tous les espaces réservés pour une image que vous avez ajoutés par des fichiers d'image adaptés au Web, tels
que des images GIF ou JPEG.
Si vous possédez Fireworks, vous pouvez créer un nouveau graphique à partir d'un espace réservé pour image dans
Dreamweaver. La nouvelle image reprend la même taille que celle de l'espace réservé pour l'image. Vous pouvez
modifier l'image, puis la remplacer dans Dreamweaver.
1 Dans la fenêtre Document, procédez de l'une des manières suivantes :
• Double-cliquez sur l'espace réservé pour l'image.
• Cliquez sur l'espace réservé pour l'image pour le sélectionner, puis dans l'inspecteur Propriétés (Fenêtre >
Propriétés), cliquez sur l'icône du dossier à côté de la zone de texte Src.
2 Dans la boîte de dialogue Source de l'image, localisez l'image que vous voulez utiliser pour remplacer l'espace
réservé, puis cliquez sur OK.
Voir aussi
« Utilisation de Fireworks pour modifier les espaces réservés pour les images Dreamweaver » à la page 377
Définition des propriétés de l'espace réservé pour l'image
Pour définir les propriétés d'un espace réservé pour l'image, sélectionnez l'espace réservé dans la fenêtre de document,
puis choisissez la commande Fenêtre > Propriétés pour afficher l'inspecteur Propriétés. Cliquez sur la flèche
d'agrandissement dans l'angle inférieur droit pour afficher toutes les propriétés.
Dernière mise à jour le 4/5/2011
250
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Utilisez l'inspecteur Propriétés pour définir un nom, une largeur, une hauteur, une source d'image, une autre
description de texte, un alignement ou une couleur pour l'espace réservé pour l'image.
Dans l'inspecteur Propriétés de l'espace réservé, la zone de texte grise et la zone de texte Aligner sont désactivées. Vous
pouvez définir ces propriétés dans l'inspecteur Propriétés de l'image lorsque vous remplacez l'espace réservé par une
image.
❖ Parmi les options suivantes, définissez celles de votre choix :
L et H Définissent la largeur et la hauteur de l'espace réservé pour l'image, en pixels.
Src Spécifie le fichier source de l'image. Pour un espace réservé pour une image, cette zone de texte est vide. Cliquez
sur le bouton Parcourir pour sélectionner une image à utiliser en remplacement du graphique de l'espace réservé.
Lien Spécifie un lien hypertexte pour l'espace réservé de l'image. Faites glisser l'icône Pointer vers un fichier dans le
panneau Fichiers, cliquez sur l'icône de dossier pour rechercher et sélectionner un document de votre site ou tapez
directement l'URL.
Sec Spécifie le texte secondaire qui apparaîtra à la place de l'image dans les navigateurs de type texte seulement, ou
dans les navigateurs dont l'utilisateur a désactivé le téléchargement automatique des images. Pour les utilisateurs
malvoyants qui utilisent un synthétiseur vocal avec un navigateur en mode texte, le texte est lu. Dans certains
navigateurs, ce texte apparaît également lorsque le pointeur se trouve sur l'image.
Créer Permet de lancer Fireworks pour créer une image de remplacement. Le bouton Créer est désactivé sauf si
Fireworks est également installé sur votre ordinateur.
Rétablir la taille Ramène les valeurs L et H à la taille originale de l'image.
Couleur Spécifie une couleur pour l'espace réservé de l'image.
Voir aussi
« Utilisation de Fireworks pour modifier les espaces réservés pour les images Dreamweaver » à la page 377
Modification d'images dans Dreamweaver
Vous pouvez rééchantillonner, recadrer, optimiser et accentuer les images dans Dreamweaver. Vous pouvez
également régler leur luminosité et leur contraste.
Fonctions de retouche d'image
Dreamweaver comprend des fonctions basiques de retouche d'image, ce qui vous évite de devoir lancer une application
externe pour effectuer cette tâche (par exemple, Fireworks ou Photoshop). Les outils de retouche d'image de
Dreamweaver sont conçus pour un travail simplifié avec les concepteurs de contenu responsables de la création des
fichiers d'image utilisés sur votre site Web.
Dernière mise à jour le 4/5/2011
251
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Remarque : Il n'est pas nécessaire d'installer Fireworks ou d'autres applications de retouche d'image sur votre ordinateur
pour utiliser les fonctions de retouche d'image de Dreamweaver.
❖ Choisissez Modifier > Image. Définissez l'une des fonctions de retouche d'image Dreamweaver suivantes :
Rééchantillonner Ajoute ou enlève des pixels d'images JPEG ou GIF redimensionnées afin qu'elles correspondent le
mieux possible à l'aspect des images originales. Le rééchantillonnage d'une image réduit la taille de son fichier, ce qui
permet d'en accélérer le téléchargement.
Lorsque vous redimensionnez une image dans Dreamweaver, vous pouvez la rééchantillonner afin de l'adapter à ses
nouvelles dimensions. Lorsqu'un objet bitmap est rééchantillonné, des pixels sont ajoutés à l'image ou en sont enlevés
afin de l'agrandir ou de la réduire. En général, le rééchantillonnage d'une image à une résolution supérieure provoque
une faible perte de qualité. Le rééchantillonnage à une résolution inférieure, en revanche, provoque toujours une perte
de données et donne une moins bonne qualité.
Recadrer Permet de réduire la surface des images. En général, il est utile pour mettre en évidence le sujet de l'image et
supprimer les aspects indésirables qui entourent le centre d'intérêt de l'image.
Luminosité et contraste Modifie la luminosité et le contraste des pixels qui composent l'image. Ceci affecte les
surbrillances, les ombres et les demi-tons d'une image. Cette fonction est utilisée pour corriger les images trop sombres
ou trop claires.
Accentuer Ajuste la mise au point d'une image en augmentant le contraste des bords sur l'image. Lorsque vous scannez
une image ou que vous prenez une photo numérique, la plupart des logiciels de capture d'images estompent par défaut
les bords des objets photographiés. Cela empêche les détails extrêmement précis de se perdre dans les pixels dont sont
constituées les images numériques. Cependant, il est souvent nécessaire d'accentuer l'image pour faire ressortir les
détails dans les fichiers d'image numérique, ce qui augmente le contraste des bords et rend l'image encore plus nette.
Remarque : Les fonctions de retouche d'image de Dreamweaver s'appliquent uniquement aux formats de fichiers d'image
JPEG et GIF. Les autres formats de fichiers d'image bitmap ne peuvent pas être modifiés à l'aide de ces fonctions.
Recadrage d'une image
Dreamweaver permet de recadrer (ou rogner) les images bitmap.
Remarque : Lorsque vous recadrez une image, le fichier d'image source est modifié sur le disque. Il peut donc s'avérer utile
de conserver une copie de sauvegarde du fichier d'image au cas où vous auriez besoin de revenir à l'image d'origine.
1 Ouvrez la page qui contient l'image à recadrer, sélectionnez l'image et procédez de l'une des manières suivantes :
• Cliquez sur l'icône Recadrer
dans l'inspecteur Propriétés des images.
• Choisissez Modifier > Image > Recadrer.
Des poignées de recadrage apparaissent autour de l'image sélectionnée.
2 Ajustez-les jusqu'à ce que la surface de l'image à conserver soit entourée d'une zone limite.
3 Double-cliquez dans cette zone ou appuyez sur Entrée pour recadrer la sélection.
4 Une boîte de dialogue vous informe que le fichier image que vous recadrez sera modifié sur le disque. Cliquez sur
OK. Chaque pixel de l'image bitmap situé hors de la zone limite est supprimé mais les autres objets de l'image ne
sont pas affectés.
5 Vérifiez à l'aide de l'aperçu que l'image correspond à vos attentes. Si ce n'est pas le cas, choisissez Edition > Annuler
Recadrer pour revenir à l'image d'origine.
Remarque : Vous pouvez annuler l'effet de la commande Recadrer (et revenir au fichier d'image d'origine) jusqu'au
moment où vous quittez Dreamweaver ou alors modifiez le fichier dans une application de retouche d'image.
Dernière mise à jour le 4/5/2011
252
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Optimisation d'une image
Vous pouvez optimiser des images sur vos pages Web dans Dreamweaver.
1 Ouvrez la page qui contient l'image à optimiser, sélectionnez l'image et procédez de l'une des manières suivantes :
• Cliquez sur le bouton de modification des paramètres de l'image
dans l'inspecteur Propriétés de l'image.
• Choisissez Modifier > Image > Optimiser.
2 Apportez les modifications dans la boîte de dialogue Aperçu d'image, puis cliquez sur OK.
Accentuation d'une image
L'accentuation augmente le contraste des pixels autour des objets pour augmenter la définition de l'image et obtenir
une meilleure netteté.
1 Ouvrez la page qui contient l'image à accentuer, sélectionnez l'image et procédez de l'une des manières suivantes :
• Cliquez sur le bouton Accentuer
dans l'inspecteur Propriétés des images.
• Choisissez Modifier > Image > Accentuer.
2 Pour spécifier le degré d'accentuation appliqué par Dreamweaver à l'image, déplacez le curseur ou tapez une valeur
comprise entre 0 et 10 dans la zone de texte. Lorsque vous ajustez la netteté de l'image à l'aide de la boîte de dialogue
Accentuer, vous pouvez afficher un aperçu de l'image modifiée.
3 Lorsque vous êtes satisfait de l'image, cliquez sur OK.
4 Enregistrez vos modifications en choisissant Fichier > Enregistrer ou revenez à l'image d'origine en choisissant
Edition > Annuler Accentuer.
Remarque : Vous pouvez annuler l'effet de la commande Accentuer (et revenir au fichier d'image d'origine) uniquement
avant d'enregistrer la page qui contient l'image. Une fois que vous avez enregistré la page, les modifications apportées à
l'image sont définitivement enregistrées.
Ajustement de la luminosité et du contraste d'une image
La fonction Luminosité/Contraste modifie la luminosité ou le contraste des pixels qui composent l'image. Ceci affecte
les surbrillances, les ombres et les demi-tons d'une image. Cette fonction est utilisée pour corriger les images trop
sombres ou trop claires.
1 Ouvrez la page qui contient l'image à ajuster, sélectionnez l'image et procédez de l'une des manières suivantes :
• Cliquez sur le bouton Luminosité/Contraste
dans l'inspecteur Propriétés des images.
• Choisissez Modifier > Image > Luminosité/Contraste.
2 Déplacez les curseurs de luminosité et de contraste pour modifier les valeurs à votre convenance. Les valeurs sont
comprises entre -100 et 100.
3 Cliquez sur OK.
Création d'une image survolée
Vous pouvez insérer des images survolées dans votre page. Une image survolée est une image qui, lorsqu'elle est
visualisée dans un navigateur, change lorsque le pointeur vient se placer au-dessus d’elle.
Vous devez disposer de deux images pour créer l'image survolée : l'image principale (affichée au chargement de la
page) et l'image secondaire (qui apparaît lorsque le pointeur est placé au-dessus de l'image principale). Les deux images
utilisées doivent avoir les mêmes dimensions ; si ce n'est pas le cas, Dreamweaver redimensionne la seconde image en
fonction de la taille de la première.
Dernière mise à jour le 4/5/2011
253
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Les images survolées sont automatiquement définies pour répondre à l'événement onMouseOver. Vous pouvez
configurer une image pour qu'elle réponde à un événement différent (par exemple, un clic de souris) ou modifier une
image survolée.
Vous trouverez un didacticiel consacré à la création d'images survolées à l'adresse www.adobe.com/go/vid0159_fr.
1 Dans la fenêtre de document, placez le point d'insertion à l'endroit où vous voulez insérer l'image survolée.
2 Insérez l'image survolée à l'aide de l'une des méthodes suivantes :
• Dans la catégorie Commun du panneau Insertion, cliquez sur le bouton Images puis sélectionnez l'icône Image
survolée. Lorsque l'icône Image survolée s'affiche dans le panneau Insertion, vous pouvez la faire glisser jusqu'à la
fenêtre de document.
• Sélectionnez Insertion > Objets image > Image survolée.
3 Définissez les options, puis cliquez sur OK.
Nom de l'image Nom de l'image survolée.
Image d’origine L'image qui doit s'afficher au chargement de la page. Entrez le chemin d'accès dans la zone de texte
ou cliquez sur Parcourir et sélectionnez l'image.
Image survolée L'image à afficher lorsque le pointeur est placé au-dessus de l'image originale. Entrez le chemin d'accès
de l'image ou cliquez sur Parcourir pour la sélectionner.
Précharger l'image survolée Précharge les images dans la mémoire cache du navigateur afin d'éviter tout délai lorsque
vous faites passer le pointeur de la souris par-dessus l'image.
Texte secondaire (Facultatif) Texte qui décrit l'image à l'intention des personnes utilisant un navigateur en mode
texte.
Si cliqué, aller à l'URL Le fichier à ouvrir lorsqu'un utilisateur clique sur l'image survolée. Entrez le chemin d'accès du
fichier ou cliquez sur Parcourir pour le sélectionner.
Remarque : Si vous ne définissez pas un lien pour l'image, Dreamweaver insère un lien nul (#) dans le code source HTML
auquel le comportement de survol est attaché. Si vous supprimez le lien nul, l'image survolée ne fonctionne plus.
4 Choisissez Fichier > Aperçu dans le navigateur ou appuyez sur la touche F12.
5 Dans le navigateur, placez le pointeur au-dessus de l'image d'origine pour voir l'image survolée.
Remarque : Il est impossible de voir l'effet d'une image survolée dans le mode Création.
Voir aussi
« Application du comportement Permuter une image » à la page 373
Didacticiel sur les images survolées
Utilisation d'un éditeur d'image externe
Dans Dreamweaver, vous pouvez ouvrir une image sélectionnée dans un éditeur d'image externe. Lorsque vous
revenez dans Dreamweaver après avoir enregistré le fichier d'image modifié, toutes les modifications apportées à
l'image sont visibles dans la fenêtre de document.
Vous pouvez définir Fireworks comme principal éditeur d'image. Vous pouvez également définir quels types de fichier
un éditeur peut ouvrir et vous pouvez sélectionner plusieurs éditeurs d'image. Par exemple, vous pouvez définir des
préférences afin de démarrer Fireworks pour modifier les fichiers GIF et de lancer un éditeur d'image différent pour
modifier les fichiers JPG ou JPEG.
Dernière mise à jour le 4/5/2011
254
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Voir aussi
« Utilisation de Photoshop et Dreamweaver » à la page 382
« Utilisation de Fireworks et Dreamweaver » à la page 376
« Lancement d'un éditeur externe pour des fichiers multimédias » à la page 268
Démarrage de l'éditeur d'image externe
❖ Effectuez l'une des opérations suivantes :
• Double-cliquez sur l'image à modifier.
• Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh)
sur l'image à modifier, choisissez l'option Modifier avec > Parcourir et sélectionnez un éditeur.
• Sélectionnez l'image à modifier, puis cliquez sur Modifier dans l'inspecteur Propriétés.
• Double-cliquez sur le fichier d'image dans le panneau Fichiers pour lancer l'éditeur d'image principal. Si vous n'avez
pas indiqué d'éditeur d'image, Dreamweaver exécute l'éditeur par défaut de ce type de fichier.
Remarque : Lorsque vous ouvrez directement une image à partir du panneau Fichiers, les fonctionnalités d'intégration
de Fireworks sont inopérantes ; Fireworks n'ouvre pas le fichier original PNG. Pour utiliser ces fonctionnalités
d'intégration de Fireworks, ouvrez les images à partir de la fenêtre de document.
Si l'image mise à jour n'apparaît pas une fois de retour dans la fenêtre Dreamweaver, sélectionnez l'image et cliquez sur
le bouton Actualiser dans l'inspecteur Propriétés.
Définition d'un éditeur d'image externe pour un type de fichier existant
Vous pouvez sélectionner l'éditeur d'image à utiliser pour ouvrir et modifier les fichiers graphiques.
1 Ouvrez la boîte de dialogue Types de fichiers/Editeurs en effectuant l'une des opérations suivantes :
• Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh) et sélectionnez la
catégorie Types de fichiers/Editeurs dans la liste de gauche.
• Choisissez la commande Edition > Modifier avec éditeur externe, puis sélectionnez Types de fichiers/Editeurs.
2 Dans la liste Extensions, sélectionnez l'extension de fichier pour laquelle définir un éditeur externe.
3 Cliquez sur le bouton Ajouter (+) au-dessus de la liste Editeurs.
4 Dans la boîte de dialogue Sélectionner un éditeur externe, recherchez l'application à démarrer en tant qu'éditeur
pour ce type de fichier.
5 Dans la boîte de dialogue Préférences, cliquez sur Principal si vous souhaitez que cet éditeur soit l'éditeur principal
pour ce type de fichier.
6 Si vous souhaitez configurer un éditeur supplémentaire pour ce type de fichier, répétez les étapes 3 et 4.
Dreamweaver utilise automatiquement l'éditeur principal lorsque vous modifiez ce type d'image. Vous pouvez choisir
l'un des autres éditeurs figurant dans la liste, à partir du menu déroulant de l'image, dans la fenêtre de document.
Ajout d'un nouveau type de fichier à la liste Extensions
1 Ouvrez la boîte de dialogue Types de fichiers/Editeurs en effectuant l'une des opérations suivantes :
• Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh) et sélectionnez la
catégorie Types de fichiers/Editeurs dans la liste de gauche.
• Choisissez la commande Edition > Modifier avec éditeur externe, puis sélectionnez Types de fichiers/Editeurs.
Dernière mise à jour le 4/5/2011
255
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
2 Dans la boîte de dialogue Types de fichiers/Editeurs, cliquez sur le bouton Ajouter (+) au-dessus de la liste
Extensions.
Une zone de texte s'affiche dans la liste Extensions.
3 Tapez l'extension de fichier pour le type de fichier que vous voulez ouvrir avec l'éditeur.
4 Pour sélectionner un éditeur externe pour le type de fichier, cliquez sur le bouton Ajouter (+) au-dessus de la liste
Editeurs.
5 Dans la boîte de dialogue qui apparaît alors, sélectionnez l'application à utiliser pour modifier ce type d'image.
6 Cliquez sur Principal si vous désirez que ce programme soit l'éditeur principal pour ce type d'image.
Modification d'une préférence d'éditeur existante
1 Ouvrez la boîte de dialogue Types de fichiers/Editeurs en effectuant l'une des opérations suivantes :
• Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh) et sélectionnez la
catégorie Types de fichiers/Editeurs dans la liste de gauche.
• Choisissez la commande Edition > Modifier avec éditeur externe, puis sélectionnez Types de fichiers/Editeurs.
2 Dans la boîte de dialogue Types de fichiers/Editeurs, sélectionnez dans la liste Extensions le type de fichier que vous
souhaitez modifier pour visualiser les éditeurs actuellement définis.
3 Dans la liste Editeurs, sélectionnez l'éditeur que vous désirez affecter à ce type de fichier, puis procédez de l'une des
manières suivantes :
• Cliquez sur le bouton Ajouter (+) ou Supprimer (-), au-dessus de la liste Editeurs, pour ajouter ou supprimer un
éditeur.
• Cliquez sur le bouton Rendre principal pour définir l'éditeur à lancer par défaut pour la retouche.
Application de comportements aux images
Vous pouvez appliquer l'un des comportements disponibles à une image ou à la zone réactive d'une image. Lorsque
vous appliquez un comportement à une zone réactive, Dreamweaver insère le code source HTML nécessaire dans la
balise area. Il existe trois comportements qui s'appliquent spécifiquement aux images : Précharger les images,
Permuter une image et Restaurer l'interversion d'images.
Précharger les images Place dans la mémoire cache du navigateur les images qui ne sont pas immédiatement affichées
lors du chargement de la page (par exemple, les images de substitution appelées par un comportement, un élément PA
ou une fonction en JavaScript). Cela évite à l'utilisateur d'attendre que ces images soient chargées, lorsqu'un événement
déclenche leur apparition.
Permuter une image Remplace une image par une autre, en modifiant l'attribut SRC de la balise img. Utilisez cette
action pour créer des substitutions de boutons et autres effets sur des images (y compris la substitution de plusieurs
images à la fois).
Restaurer l'image intervertie Rétablit la dernière interversion d'images à son état d'origine. Cette action est
automatiquement ajoutée par défaut lorsque vous associez l'action Permuter une image à un objet ; en principe, vous
n'avez pas besoin d'y faire appel manuellement.
Vous pouvez également utiliser des comportements pour créer des systèmes de navigation plus sophistiqués, comme
les menus de reroutage.
Dernière mise à jour le 4/5/2011
256
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Voir aussi
« Insertion d'un menu de reroutage » à la page 292
« Application du comportement Permuter une image » à la page 373
« Application du comportement Précharger les images » à la page 369
Incorporation de vidéos aux pages Web (HTML5)
HTML5 prend en charge les balises audio et vidéo, permettant aux utilisateurs de lire des fichier audio et vidéo dans
un navigateur sans complément ni lecteur externe. Dreamweaver prend en charge les conseils de code permettant
l'ajout de balises vidéo et audio.
Le mode En direct affiche la vidéo, de façon à prévisualiser la vidéo que vous incorporez à la page Web.
Remarque : Bien que vous puissiez incorporer toute vidéo à votre page Web, le mode En direct ne les affiche pas toujours
toutes. Les balises audio et vidéo sont prises en charge par Dreamweaver au moyen du module QuickTime d'Apple. Sous
Windows, si le module QuickTime d'Apple n'est pas installé, la page Web n'affichera pas le contenu multimédia.
Insertion de fichiers SWF
A propos des types de fichiers FLA, SWF et FLV
Avant d'utiliser Dreamweaver pour insérer du contenu créé à l'aide d'Adobe Flash, familiarisez-vous aux types de
fichiers suivants :
Fichier FLA (.fla) Fichier source pour tout projet, créé dans l'outil de création Flash. Ce type de fichier peut uniquement
être ouvert dans comportement Flash (il ne peut pas l'être dans Dreamweaver ni dans des navigateurs). Vous pouvez
ouvrir le fichier FLA dans Flash, puis le publier sous la forme d'un fichier SWF ou SWT pour l'utiliser dans des
navigateurs.
Fichier SWF (.swf) Version compilée du fichier FLA (.fla), optimisée pour l'affichage sur le Web. Ce fichier peut être lu
dans les navigateurs et prévisualisé dans Dreamweaver, mais il ne peut pas être modifié dans Flash.
Fichier FLV (.flv) Est un fichier vidéo qui contient des données audio et vidéo codées, lisibles par Flash® Player. Par
exemple, si vous utilisez un fichier vidéo QuickTime ou Windows Media, vous devez utiliser un encodeur (tel que
Flash® Video Encoder ou Sorensen Squeeze) pour convertir le fichier vidéo en fichier FLV. Pour plus d'informations,
consultez le Centre de technologie vidéo à l'adresse www.adobe.com/go/flv_devcenter_fr.
Voir aussi
« Utilisation de Flash et Dreamweaver » à la page 392
« Insertion de fichiers FLV » à la page 259
Insertion et prévisualisation de fichiers SWF
Dreamweaver permet d'ajouter des fichiers SWF à vos pages et d'en consulter un aperçu dans un document ou un
navigateur. Vous pouvez également définir les propriétés des fichiers SWF dans l'inspecteur Propriétés.
Vous trouverez un didacticiel consacré à l'ajout de fichiers SWF à des pages Web à l'adresse
www.adobe.com/go/vid0150_fr.
Dernière mise à jour le 4/5/2011
257
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Voir aussi
« Utilisation de Flash et Dreamweaver » à la page 392
« Modification d’un fichier SWF depuis Dreamweaver dans Flash » à la page 392
Fichiers SWF et calques DHTML
« Insertion d'animations Shockwave » à la page 270
« Insertion de fichiers FLV » à la page 259
Didacticiel consacré à l'utilisation de Flash
Insertion d'un fichier SWF
1 Dans la fenêtre de document (mode Création), placez le point d'insertion à l'endroit où vous souhaitez insérer le
contenu, puis procédez de l'une des manières suivantes :
• Dans la catégorie Commun du panneau Insertion, choisissez Médias puis cliquez sur l'icône SWF
.
• Choisissez Insertion > Médias > SWF.
2 Dans la boîte de dialogue qui s'affiche, sélectionnez un fichier SWF (.swf).
Un espace réservé pour le fichier SWF s'affiche dans la fenêtre de document.
Cet espace réservé est entouré d'un contour bleu à onglet. L'onglet indique le type d'actif (fichier SWF) et l'ID du fichier
SWF. Cet onglet comporte également une icône qui représente un œil. Il fait office de bascule entre le fichier SWF et
les informations de téléchargement que les utilisateurs voient s'ils ne possèdent pas la version correcte de Flash Player.
3 Enregistrez le fichier.
Dreamweaver vous informe que deux fichiers dépendants, expressInstall.swf et swfobject_modified.js, vont être
enregistrés dans un dossier Scripts de votre site. N'oubliez pas de charger ces fichiers lorsque vous placez le fichier SWF
sur votre serveur Web. Les navigateurs ne peuvent afficher correctement le fichier SWF que si vous avez également
chargé ces fichiers dépendants.
Remarque : Microsoft Internet Information Server (IIS) ne traite pas les balises object imbriquées. Pour les pages ASP,
Dreamweaver utilise du code object/embed imbriqué au lieu du code object imbriqué lors de l'insertion de fichiers SWF
ou FLV.
Modification des informations de téléchargement de Flash Player
Lorsque vous insérez un fichier SWF sur une page, Dreamweaver insère du code qui détecte si l'utilisateur dispose de
la version appropriée de Flash Player. Si ce n'est pas le cas, la page affiche du contenu alternatif afin d'inviter l'utilisateur
à télécharger la version la plus récente. Vous pouvez à tout moment modifier ce contenu alternatif.
Cette procédure s'applique également aux fichiers FLV.
Dernière mise à jour le 4/5/2011
258
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Remarque : Si l'utilisateur ne dispose pas de la version requise mais bien de Flash Player en version 6.0 r65 ou une version
ultérieure, le navigateur affiche un programme d'installation express de Flash Player. Si l'utilisateur refuse l'installation
express, la page affiche le contenu alternatif.
1 Dans la fenêtre de document, en mode Création, sélectionnez le fichier SWF ou FLV.
2 Cliquez sur l'icône représentant un œil dans l'onglet du fichier SWF ou FLV.
Vous pouvez également utiliser le raccourci CTRL + ] pour activer l'affichage du contenu alternatif. Pour rétablir
l'affichage du fichier SWF/FLV, appuyez sur CTRL + [ jusqu'à ce que l'intégralité du contenu alternatif soit
sélectionnée. Ensuite, appuyez à nouveau sur CTRL + [.
3 Modifiez le contenu comme vous le feriez pour tout autre contenu dans Dreamweaver.
Remarque : Il est impossible d'ajouter des fichiers SWF ou FLV en tant que contenu alternatif.
4 Cliquez à nouveau sur l'icône représentant un œil pour revenir à l'affichage du fichier SWF (ou FLV).
Prévisualisation de fichiers SWF dans la fenêtre de document
1 Dans la fenêtre de document, cliquez sur l'espace réservé du fichier SWF afin de sélectionner son contenu.
2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), cliquez sur le bouton Lire. Cliquez sur le bouton Arrêt pour
arrêter la prévisualisation. Vous pouvez également prévisualiser le fichier SWF dans un navigateur en appuyant sur
la touche F12.
Pour prévisualiser tous le fichiers SWF dans une page, appuyez sur les touches Ctrl+Alt+Maj+P (Windows) ou
Maj+Option+Commande+P (Macintosh). Tous les fichiers SWF sont placés en mode Lecture.
Définition des propriétés d'un fichier SWF
Vous pouvez définir les propriétés des fichiers SWF dans l'inspecteur Propriétés. Les propriétés s'appliquent également
aux animations Shockwave.
❖ Sélectionnez un fichier SWF ou une animation Shockwave, puis définissez ses options dans l'inspecteur Propriétés
(Fenêtre > Propriétés). Pour afficher toutes les propriétés, cliquez sur la flèche de développement dans le coin
inférieur droit de l'inspecteur Propriétés.
ID Définit un ID unique pour le fichier SWF. Entrez un ID dans la zone de texte sans titre, à l'extrême gauche de
l'inspecteur Propriétés. Depuis Dreamweaver CS4, un ID unique est requis.
L et H Spécifient la largeur et la hauteur de l'animation, en pixels.
Fichier Spécifie le chemin d'accès au fichier SWF ou Shockwave. Cliquez sur l'icône de dossier pour rechercher un
fichier ou entrez le chemin d'accès.
Src Définit le chemin d'accès au document source (le fichier FLA), lorsque Dreamweaver et Flash sont tous deux
installés sur votre ordinateur. Pour modifier un fichier SWF, mettez à jour le document source de l'animation.
Ar-pl Spécifie une couleur d'arrière-plan pour la zone d'animation. Cette couleur apparaît également lorsque
l'animation n'est pas en lecture (au cours du chargement et à la fin de la lecture).
Modifier Démarre Flash pour mettre à jour un fichier FLA (fichier créé dans le programme de création Flash). Cette
option est désactivée si Flash n'est pas installé sur votre ordinateur.
Classe Permet d'appliquer une classe CSS à l'animation.
Boucle Active la lecture en boucle de l'animation. Si l'option Boucle n'est pas activée, l'animation est lue une fois puis
s'arrête.
Lecture automatique Lit automatiquement l'animation lors du chargement de la page.
Dernière mise à jour le 4/5/2011
259
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Espace V. et Espace H. Définit le nombre de pixels d'espace blanc au-dessus, au-dessous et de chaque côté de
l'animation.
Qualité Contrôle l'anticrénelage pendant la lecture de l'animation. Des valeurs élevées améliorent l'apparence des
animations. Toutefois, avec des valeurs élevées, le rendu correct des animations à l'écran exige un processeur plus
rapide. Un paramètre faible améliore la vitesse au détriment de l'apparence, alors qu'un paramètre élevé favorise
l'aspect par rapport à la vitesse. L'option Basse automatiquement améliore la vitesse au départ, mais également
l'apparence lorsque cela est possible. L'option Elevée automatiquement améliore de façon identique les deux qualités
au départ, mais sacrifie ensuite l'apparence pour la vitesse si nécessaire.
Echelle Détermine comment l'animation s'adapte aux dimensions définies dans les zones de largeur et de hauteur. Le
paramètre par défaut affiche l'animation entière.
Alignement Détermine l'alignement de l'animation sur la page.
Wmode Définit le paramètre Wmode pour le fichier SWF de manière à éviter tout conflit avec des éléments DHTML,
comme des widgets Spry. La valeur par défaut est Opaque, qui permet aux éléments DHTML de s'affiche au-dessus des
fichiers SWF dans un navigateur. Si le fichier SWF comprend des sections transparentes et si vous voulez que les
éléments DHTML apparaissent derrière celles-ci, activez l'option Transparent. Activez l'option Fenêtre pour
supprimer le paramètre Wmode du code et permettre au fichier SWF de s'afficher au-dessus d'autres éléments
DHTML.
Lire Lit l'animation dans la fenêtre de document.
Paramètres Ouvre une boîte de dialogue dans laquelle vous pouvez indiquer des paramètres supplémentaires à
transmettre à l'animation. L'animation doit avoir été conçue pour recevoir ces paramètres supplémentaires.
Insertion de documents FlashPaper
La fonctionnalité Insérer FlashPaper a été abandonnée depuis Dreamweaver CS5.
Insertion de fichiers FLV
Insertion de fichiers FLV
Vous pouvez insérer facilement des vidéos FLV dans vos pages Web sans avoir recours à l'outil de création Flash. Vous
devez disposer d'un fichier FLV codé avant de commencer.
Dernière mise à jour le 4/5/2011
260
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Dreamweaver insère un composant SWF qui affiche le fichier FLV. Dans un navigateur, ce composant affiche le fichier
FLV sélectionné, ainsi qu'un jeu de contrôles de lecture.
Dreamweaver dispose des options suivantes pour proposer de la vidéo FLV aux visiteurs de votre site :
Vidéo en téléchargement progressif Télécharge le fichier FLV sur le disque dur du visiteur, puis lance sa lecture.
Contrairement aux méthodes traditionnelles de fourniture de vidéo par « téléchargement et lecture », le
téléchargement progressif permet de lancer la lecture du fichier vidéo avant la fin de son téléchargement.
Vidéo en flux continu Diffuse en continu le contenu vidéo et le lit sur une page Web après une courte période de mise
en mémoire tampon, ce qui assure une lecture homogène. Pour activer la diffusion vidéo en continu sur vos pages
Web, vous devez avoir accès à Adobe® Flash® Media Server.
Vous devez disposer d'un fichier FLV codé avant d'utiliser ce dernier dans Dreamweaver. Vous pouvez insérer les fichiers
vidéo créés avec deux types de codecs (technologies de compression/décompression) : Sorenson Squeeze et On2.
Lorsque vous insérez un fichier FLV, tout comme dans le cas d'un fichier SDF ordinaire, Dreamweaver insère du code
qui détecte si l'utilisateur dispose d'une version appropriée de Flash Player pour voir la vidéo. Si ce n'est pas le cas, la
page affiche un contenu alternatif qui invite l'utilisateur à télécharger la version la plus récente de Flash Player.
Remarque : Pour pouvoir visualiser un fichier FLV, Flash Player en version 8 ou ultérieure doit être installé sur
l'ordinateur de l'utilisateur. Si l'utilisateur ne dispose pas de la version requise de Flash Player, mais bien de Flash Player
en version 6.0 r65 ou une version ultérieure, le navigateur affiche un programme d'installation express de Flash Player
au lieu du contenu alternatif. Si l'utilisateur refuse l'installation express, la page affiche le contenu alternatif.
Pour plus d'informations sur l'utilisation de vidéo, consultez le Centre de technologie vidéo à l'adresse
www.adobe.com/go/flv_devcenter_fr.
Insertion d'un fichier FLV
1 Choisissez Insertion > Médias > FLV.
2 Dans la boîte de dialogue Insérer un fichier FLV, choisissez Vidéo en téléchargement progressif dans le menu Type
de vidéo.
3 Renseignez les autres sections de la boîte de dialogue selon les besoins puis cliquez sur OK.
Remarque : Microsoft Internet Information Server (IIS) ne traite pas les balises object imbriquées. Pour les pages ASP,
Dreamweaver utilise du code object/embed imbriqué au lieu du code object imbriqué lors de l'insertion de fichiers SWF
ou FLV.
Dernière mise à jour le 4/5/2011
261
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Définition des options pour la vidéo en téléchargement progressif
La boîte de dialogue Insérer FLV permet de définir des options pour la remise par téléchargement progressif d'un
fichier FLV inséré dans une page Web.
1 Choisissez Insertion > Médias > FLV (ou cliquez sur l'icône FLV de la catégorie Médias de la barre d'insertion
Commun).
2 Dans la boîte de dialogue Insérer FLV, choisissez Vidéo à téléchargement progressif dans le menu Type de vidéo.
3 Définissez les options suivantes :
URL Spécifie le chemin absolu ou relatif du fichier FLV. Pour spécifier un chemin relatif (par exemple,
monchemin/mavideo.flv), cliquez sur le bouton Parcourir, accédez au fichier FLV et sélectionnez-le. Pour spécifier un
chemin absolu, tapez l'URL (par exemple, http://www.exemple.com/mavideo.flv) du fichier FLV.
Enveloppe Définit l'aspect du composant vidéo. Un aperçu de l’enveloppe sélectionnée apparaît sous le menu
contextuel Enveloppe.
Largeur Indique la largeur (en pixels) du fichier FLV. Cliquez sur le bouton Détecter la taille pour connaître la largeur
exacte du fichier FLV. Si Dreamweaver ne peut pas déterminer la largeur, tapez une valeur.
Hauteur Indique la hauteur (en pixels) du fichier FLV. Cliquez sur le bouton Détecter la taille pour connaître la
hauteur exacte du fichier FLV. Si Dreamweaver ne peut pas déterminer la hauteur, tapez une valeur.
Remarque : Total avec enveloppe indique la largeur et la hauteur du fichier FLV plus la largeur et la hauteur de
l'enveloppe sélectionnée.
Respecter les proportions Préserve le rapport hauteur/largeur du composant vidéo. Cette option est sélectionnée par
défaut.
Lecture automatique Indique si la lecture de la vidéo doit démarrer ou non dès l’ouverture de la page Web.
Rembobinage automatique Détermine si le contrôle de lecture doit revenir en position de départ au terme de la
lecture de la vidéo.
4 Cliquez sur OK pour fermer la boîte de dialogue et ajouter le contenu FLV à votre page Web.
La commande Insérer FLV génère un fichier SWF de lecteur vidéo et un fichier SWF d'habillage qui serviront à afficher
votre contenu vidéo sur une page Web. (Il est parfois nécessaire de cliquer sur le bouton Actualiser pour afficher les
nouveaux fichiers dans le panneau Fichiers). Ces fichiers sont stockés dans le même répertoire que le fichier HTML
auquel vous ajoutez du contenu vidéo. Lorsque vous chargez la page HTML incluant le fichier FLV, Dreamweaver ces
fichiers en tant que fichiers dépendants (à condition de cliquer sur Oui dans la boîte de dialogue Placer les fichiers
dépendants).
Définition des options pour la vidéo en flux continu
La boîte de dialogue Insérer FLV permet de définir des options pour le téléchargement de vidéo en flux contenu d'un
fichier FLV inséré dans une page Web.
1 Choisissez Insertion > Médias > FLV (ou cliquez sur l'icône FLV de la catégorie Médias de la barre d'insertion
Commun).
2 Activez l’option Vidéo en flux continu dans le menu contextuel Type de vidéo.
URI du serveur Indique le nom du serveur FCS, le nom de l’application et le nom de l’instance dans le formulaire
rtmp://www.example.com/app_name/instance_name.
Nom du flux Spécifie le nom du fichier FLV à lire (par exemple, mavideo.flv). L'extension .flv est facultative.
Enveloppe Définit l'aspect du composant vidéo. Un aperçu de l’enveloppe sélectionnée apparaît sous le menu
contextuel Enveloppe.
Dernière mise à jour le 4/5/2011
262
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Largeur Indique la largeur (en pixels) du fichier FLV. Cliquez sur le bouton Détecter la taille pour connaître la largeur
exacte du fichier FLV. Si Dreamweaver ne peut pas déterminer la largeur, tapez une valeur.
Hauteur Indique la hauteur (en pixels) du fichier FLV. Cliquez sur le bouton Détecter la taille pour connaître la
hauteur exacte du fichier FLV. Si Dreamweaver ne peut pas déterminer la hauteur, tapez une valeur.
Remarque : Total avec enveloppe indique la largeur et la hauteur du fichier FLV plus la largeur et la hauteur de
l'enveloppe sélectionnée.
Respecter les proportions Préserve le rapport hauteur/largeur du composant vidéo. Cette option est sélectionnée par
défaut.
Vidéo en temps réel Indique si le contenu vidéo est en temps réel ou non. Si vous sélectionnez Vidéo en temps réel,
Flash Player diffuse en continu un flux vidéo provenant de Flash® Media Server. Le nom de la vidéo en temps réel est
le nom indiqué dans la zone Nom du flux.
Remarque : Si vous activez l’option Vidéo en temps réel, seul le contrôle de volume apparaît sur l’enveloppe du
composant, car il est impossible d’intervenir sur de la vidéo en temps réel. De plus, les options Lecture automatique et
Rembobinage automatique sont sans effet.
Lecture automatique Indique si la lecture de la vidéo doit démarrer ou non dès l’ouverture de la page Web.
Rembobinage automatique Détermine si le contrôle de lecture doit revenir en position de départ au terme de la
lecture de la vidéo.
Délai mise en tampon Indique le délai (en secondes) de mise en tampon avant le début de la lecture de la vidéo. Par
défaut, la mise en tampon est paramétrée sur 0, si bien que la lecture de la vidéo débute instantanément après un clic
sur le bouton de lecture. (Si l'option Lecture automatique est activée, la lecture de la vidéo débute dès que la connexion
avec le serveur est établie.) Il peut également être nécessaire de définir un délai de mise en mémoire tampon si vous
fournissez une vidéo dont le débit en bits est supérieur à celui de la connexion du visiteur du site ou lorsque le volume
de trafic Internet risque d'engendrer des problèmes de bande passante ou de connectivité. Par exemple, si vous
souhaitez envoyer 15 secondes de vidéo à la page Web avant que cette dernière ne lise la vidéo, définissez le délai de
mise en mémoire tampon sur 15.
3 Cliquez sur OK pour fermer la boîte de dialogue et ajouter le contenu FLV à votre page Web.
La commande Insérer FLV génère un fichier SWF de lecteur vidéo et un fichier SWF d'habillage qui serviront à afficher
votre vidéo sur une page Web. La commande génère également un fichier main.asc que vous devez transférer sur votre
serveur Flash Media Server. (Il est parfois nécessaire de cliquer sur le bouton Actualiser pour afficher les nouveaux
fichiers dans le panneau Fichiers). Ces fichiers sont stockés dans le même répertoire que le fichier HTML auquel vous
ajoutez du contenu vidéo. Lorsque vous transférez sur votre serveur la page HTML contenant le fichier FLV, n’oubliez
pas de transférer également ces fichiers SWF, et de transférer le fichier main.asc sur votre serveur Flash Media Server.
Remarque : Si un fichier main.asc se trouve déjà sur votre serveur, consultez l’administrateur de ce serveur avant de
transférer le fichier main.asc généré par la commande Insérer FLV.
Vous pouvez charger facilement tous les fichiers médias requis en sélectionnant l'espace réservé pour le composant
vidéo dans la fenêtre Document de Dreamweaver puis en cliquant sur le bouton Transférer multimédia dans
l'inspecteur Propriétés (Fenêtre > Propriétés). Pour voir la liste des fichiers nécessaires, cliquez sur le bouton Afficher
les fichiers nécessaires.
Remarque : Le bouton Transférer multimédia ne transfère pas le fichier HTML qui contient le composant vidéo.
Modification des informations de téléchargement de Flash Player
Lorsque vous insérez un fichier FLV sur une page, Dreamweaver insère du code qui détecte si l'utilisateur dispose de
la version appropriée de Flash Player. Si ce n'est pas le cas, la page affiche du contenu alternatif afin d'inviter l'utilisateur
à télécharger la version la plus récente. Vous pouvez à tout moment modifier ce contenu alternatif.
Dernière mise à jour le 4/5/2011
263
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Cette procédure s'applique également aux fichiers SWF.
Remarque : Si l'utilisateur ne dispose pas de la version requise mais bien de Flash Player en version 6.0 r65 ou une version
ultérieure, le navigateur affiche un programme d'installation express de Flash Player. Si l'utilisateur refuse l'installation
express, la page affiche le contenu alternatif.
1 Dans la fenêtre de document, en mode Création, sélectionnez le fichier SWF ou FLV.
2 Cliquez sur l'icône représentant un œil dans l'onglet du fichier SWF ou FLV.
Vous pouvez également utiliser le raccourci CTRL + ] pour activer l'affichage du contenu alternatif. Pour rétablir
l'affichage du fichier SWF/FLV, appuyez sur CTRL + [ jusqu'à ce que l'intégralité du contenu alternatif soit
sélectionnée. Ensuite, appuyez à nouveau sur CTRL + [.
3 Modifiez le contenu comme vous le feriez pour tout autre contenu dans Dreamweaver.
Remarque : Il est impossible d'ajouter des fichiers SWF ou FLV en tant que contenu alternatif.
4 Cliquez à nouveau sur l'icône représentant un œil pour revenir à l'affichage du fichier SWF ou FLV.
Dépannage des fichiers FLV
Cette section décrit quelques-unes des causes les plus courantes de problèmes avec les fichiers FLV.
Affichage des problèmes dus à l'absence de fichiers associés
Le code généré par Dreamweaver CS4 et versions ultérieures repose sur quatre fichiers dépendants, différents du
fichier FLV proprement dit :
• swfobject_modified.js
• expressInstall.swf
• FLVPlayer_Progressive.swf
• Le fichier d'enveloppe (par exemple Clear_Skin_1.swf)
Notez qu'il existe deux fichiers dépendants supplémentaires pour Dreamweaver CS4 et versions ultérieures par
rapport à Dreamweaver CS3.
Les deux premiers fichiers (swfobject_modified.js et expressInstall.swf) sont installés dans un dossier baptisé Scripts,
que Dreamweaver crée à la racine de votre site s'il n'existe pas.
Les deux autres fichiers (FLVPlayer_Progressive.swf et le fichier d'enveloppe) sont installés dans le même dossier que
la page à laquelle le fichier FLV est incorporé. Le fichier d'enveloppe contient les contrôles du fichier FLV. Son nom
dépend de l'enveloppe choisie dans les options décrites dans l'aide de Dreamweaver. Par exemple, si vous choisissez
Clear Skin, le fichier se nomme Clear_Skin_1.swf.
Les quatre fichiers dépendants DOIVENT être téléchargés sur votre serveur distant pour que le fichier FLV s'affiche
correctement.
L'oubli du téléchargement de ces fichiers est la cause la plus courante des erreurs d'exécution de fichiers FLV sur une
page Web. Si l'un des fichiers manque, un « carré blanc » risque de s'afficher sur la page.
Pour garantir que vous avez bien téléchargé tous les fichiers dépendants, utilisez le panneau Fichiers de Dreamweaver
pour télécharger la page où figure le fichier FLV. Lorsque vous téléchargez la page, Dreamweaver vous demande si vous
voulez télécharger les fichiers dépendants (sauf si vous avez désactivé cette option). Cliquez sur Oui pour télécharger
les fichiers dépendants.
Problèmes d'affichage lors d'un aperçu local des pages
Dernière mise à jour le 4/5/2011
264
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Les mises à jour de la sécurité de Dreamweaver CS4 vous empêchent d'utiliser la commande Aperçu dans le navigateur
pour tester une page comportant un fichier FLV incorporé, sauf si vous définissez un serveur d'évaluation local dans
votre définition de site Dreamweaver et employez ce serveur d'évaluation pour prévisualiser la page.
Normalement, vous n'avez besoin d'un serveur d'évaluation que si vous développez des pages avec ASP, ColdFusion
ou PHP (voir « Configuration de l'ordinateur pour le développement d'applications » à la page 553). Si vous créez des
sites Web qui n'emploient que HTML et que vous n'avez pas défini de serveur d'évaluation, une pression sur F12
(Windows) ou Option+F12 (Macintosh) entraîne l'affichage de contrôles d'enveloppe incohérents. Pour résoudre le
problème, définissez le serveur d'évaluation et utilisez-le pour prévisualiser votre page, ou chargez vos fichiers sur un
serveur distant et visualisez-les sur celui-ci.
Remarque : Il se peut que les paramètres de sécurité soient également responsables de l'impossibilité de prévisualiser du
contenu FLV local, mais Adobe n'a pas été en mesure de le confirmer. Vous pouvez tenter de modifier vos paramètres de
sécurité afin de voir si le problème est résolu. Pour plus d'informations sur la modification de vos paramètres de sécurité,
consultez la Tech Note 117502.
Autres causes potentielles de problèmes avec les fichiers FLV
• Si vous éprouvez des difficultés à prévisualiser localement, assurez-vous que l'option Aperçu avec fichier
temporaire est bien désactivée dans la section Edition > Préférences > Aperçu dans le navigateur.
• Assurez-vous de bien disposer de la version la plus récente du complément Flash Player.
• Faites preuve de prudence lorsque vous déplacez des fichiers et des dossiers à l’extérieur de Dreamweaver. Lorsque
vous déplacez des fichiers et dossiers à l’extérieur de Dreamweaver, Dreamweaver ne peut pas garantir l'exactitude
des chemins d'accès aux fichiers associés à un fichier FLV.
• Vous pouvez remplacer provisoirement le fichier FLV qui pose problème par un fichier FLV dont vous êtes sûr qu'il
fonctionne. Si le fichier FLV de remplacement fonctionne, c'est que le problème réside dans le fichier FLV d'origine
et n'est pas dû à votre navigateur ni à l'ordinateur.
Modification ou suppression d'un composant FLV
Vous pouvez modifier les paramètres de la vidéo sur votre page Web en sélectionnant l'espace réservé pour composant
vidéo dans la fenêtre de document de Dreamweaver et en utilisant l'inspecteur Propriétés. Vous pouvez également
supprimer le composant vidéo puis le réinsérer à l'aide de la commande Insertion > Médias > FLV.
Modification du composant FLV
1 Dans la fenêtre du document Dreamweaver, sélectionnez l'espace réservé pour le composant vidéo en cliquant sur
l’icône FLV au centre de l’espace réservé.
2 Ouvrez l'inspecteur Propriétés (Fenêtre > Propriétés) et apportez les modifications désirées.
Remarque : Il est impossible de modifier le type de vidéo (de téléchargement progressif à diffusion en continu, par
exemple) dans l'inspecteur Propriétés. Pour modifier le type de vidéo, supprimez le composant FLV puis réinsérez-le en
choisissant Insertion > Médias > FLV.
Suppression du composant FLV
❖ Dans la fenêtre du document Dreamweaver, sélectionnez l’espace réservé pour le composant FLV et appuyez sur la
touche Suppr.
Dernière mise à jour le 4/5/2011
265
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Suppression du code de détection FLV
A partir de la version CS4 de Dreamweaver, Dreamweaver insère directement un code de détection de Flash Player
dans la balise object qui contient le fichier FLV. Par contre, jusqu'à la version CS3 de Dreamweaver, le code de
détection se trouve en dehors de la balise object du fichier FLV. Dès lors, si vous voulez supprimer des fichiers FLV de
pages créées à l'aide de Dreamweaver CS3 ou une version plus ancienne, vous devez supprimer les fichiers FLV puis
utiliser la commande Supprimer la détection FLV afin de supprimer également le code de détection.
❖ Sélectionnez Commandes > Supprimer la détection Flash Video.
Ajout de widgets Web
Un widget Web est un composant de page Web consistant en code HTML, CSS et JavaScript. Un widget Web peut
par exemple être un accordéon, un panneau à onglet ou un calendrier.
Vous pouvez rendre votre sélection personnelle de widgets Web disponible dans Dreamweaver à l'aide du navigateur
de widgets Adobe, une application AIR qui permet de naviguer dans les widgets, de les configurer et de les prévisualiser
au moyen d'une interface visuelle.
1 Choisissez Insérer > Widget.
2 Dans la boîte de dialogue Widget , sélectionnez un widget et un paramètre prédéfini (le cas échéant), puis cliquez
sur OK.
Vous pouvez également ajouter un widget Web à une page Dreamweaver (CS5.5 et versions ultérieures) en procédant
comme suit :
1 Dans le Widget Browser, accédez à Mes widgets.
2 Sélectionnez le widget que vous voulez ajouter.
3 Cliquez sur l'icône Glisser-déposer dans Dreamweaver, dans le coin supérieur gauche de l'onglet Mode En direct,
et maintenez le bouton de la souris enfoncé. Faites glisser le widget vers Dreamweaver, dans le mode Création
(Windows) ou le mode Création ou Code (Macintosh OS).
Vous ne pouvez pas faire glisser le widget dans le mode Affichage en direct, mais vous pouvez utiliser ce mode pour
tester le widget après l'avoir déposé sur la page.
Voir aussi
Aide d'Adobe Widget Browser
« Utilisation des widgets Spry (instructions générales) » à la page 438
Ajout de séquences audio
Formats de fichiers audio
Il est possible d'ajouter du son à une page Web. Il existe de nombreux types de fichiers et de formats audio, par
exemple, les fichiers .wav, .midi et .mp3. Certains facteurs sont à considérer avant de décider d'un format et d'une
méthode d'ajout de son : son objectif, son public, la taille du fichier, la qualité du son et les différences entre les
navigateurs.
Dernière mise à jour le 4/5/2011
266
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Remarque : Le traitement des fichiers son est très différent et incohérent suivant les navigateurs. Vous pouvez ajouter un
fichier audio à un fichier SWF, puis incorporer le fichier SWF pour assurer une meilleure cohérence.
La liste ci-dessous décrit les formats de fichiers audio les plus courants et présente certains avantages et inconvénients
de chaque conception Web.
Le format .midi ou .mid (Musical Instrument Digital Interface) est destiné à la musique instrumentale. Les fichiers
MIDI sont reconnus par plusieurs navigateurs et ne requièrent pas de plug-in. Bien que leur qualité sonore soit très
bonne, elle peut varier en fonction de la carte son du visiteur. Un petit fichier MIDI peut offrir un clip audio de longue
durée. Les fichiers MIDI ne peuvent pas être enregistrés et doivent être synthétisés sur un ordinateur équipé d'un
matériel et d'un logiciel spéciaux.
Le format .wav (Waveform Extension), qui offre une bonne qualité sonore, est pris en charge par plusieurs navigateurs
et ne requiert pas de plug-in. Vous pouvez enregistrer vos propres fichiers WAV à partir d'un CD, d'une cassette, d'un
microphone, etc. Toutefois, la taille importante des fichiers limite sérieusement la longueur des clips audio que vous
pouvez utiliser dans vos pages Web.
Le format .aif (Audio Interchange File Format ou AIFF), tout comme le format WAV, offre une bonne qualité sonore,
est pris en charge par plusieurs navigateurs et ne requiert pas de plug-in. Vous pouvez également enregistrer des
fichiers AIFF à partir d'un CD, d'une cassette, d'un microphone, etc. Toutefois, la taille importante des fichiers limite
sérieusement la longueur des clips audio que vous pouvez utiliser dans vos pages Web.
Le format .mp3 (Motion Picture Experts Group Audio, ou MPEG-Audio Layer-3) est un format compressé qui diminue
de manière significative la taille des fichiers audio. La qualité sonore est excellente : si un fichier MP3 est correctement
enregistré et compressé, sa qualité peut être équivalente à celle d'un CD. La technologie MP3 permet de lire le fichier
« en transit » afin que les visiteurs n'aient pas à attendre le téléchargement du fichier entier avant de pouvoir l'écouter.
Mais le fichier est plus gros qu'un fichier Real Audio, ce qui signifie que le téléchargement d'une chanson entière peut
s'avérer assez long si l'on utilise une connexion à Internet par modem. Pour lire des fichiers MP3, les visiteurs doivent
télécharger et installer une application d'aide ou un plug-in tel que QuickTime, Windows Media Player ou RealPlayer.
Le format .ra, .ram, .rpm ou Real Audio offre un degré très élevé de compression avec une taille de fichier inférieure à
celle du format MP3. Le téléchargement de fichiers de chanson peut être effectué dans un laps de temps raisonnable.
Les fichiers pouvant être « diffusés » à partir d'un serveur Web normal, les visiteurs peuvent commencer à écouter le
son avant la fin du téléchargement. Les visiteurs doivent télécharger et installer l'application d'aide ou le plug-in
RealPlayer afin de lire ces fichiers.
.qt, .qtm, .mov ou QuickTime est un format à la fois audio et vidéo mis au point par Apple Computer. QuickTime est
inclus dans le système d'exploitation des ordinateurs Apple Macintosh. Il est utilisé par la plupart des applications
Macintosh utilisant l'audio, la vidéo ou des animations. Les PC aussi peuvent lancer les fichiers au format QuickTime,
mais cela nécessite le pilote approprié. QuickTime prend en charge la plupart des formats de codage, notamment
Cinepak, JPEG et MPEG.
Remarque : En plus des formats les plus courants, mentionnés ci-dessus, il existe de nombreux formats audio et vidéo
utilisables sur le Web. Si vous rencontrez un fichier audio ou vidéo dont le format vous est inconnu, retrouvez son créateur
afin d'apprendre comment l'utiliser au mieux.
Voir aussi
« Insertion et modification d'objets multimédias » à la page 267
Dernière mise à jour le 4/5/2011
267
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Lien vers un fichier audio
Un lien vers un fichier audio est une méthode simple et efficace pour ajouter du son à une page Web. Cette méthode
d'incorporation de fichiers audio permet aux visiteurs de choisir s'ils veulent écouter le fichier et rend le fichier
disponible pour un plus vaste public.
1 Sélectionnez le texte ou l'image à utiliser comme lien vers le fichier audio.
2 Dans l'inspecteur Propriétés, cliquez sur l'icône de dossier, à côté de la zone Lien, pour rechercher le fichier audio,
ou tapez le nom et le chemin d'accès au fichier dans la zone Lien.
Incorporation d'un fichier audio
L'opération consistant à incorporer un son intègre le fichier audio directement dans la page, mais le son est
uniquement lu si les visiteurs du site disposent du plug-in approprié pour le fichier audio choisi. Incorporez des
fichiers si vous souhaitez utiliser le son en tant que musique de fond ou pour contrôler le volume, l'apparence du
lecteur sur votre page ou encore les points de démarrage et d'arrêt du fichier audio.
Lorsque vous incorporez des fichiers son à vos pages Web, réfléchissez bien à l'usage qu'il est possible d'en faire et de
quelle façon les visiteurs pourraient s'en servir. Proposez toujours une commande permettant d'activer ou de couper
le son, au cas où certains visiteurs ne souhaiteraient pas entendre le contenu audio.
1 En mode Création, placez le point d'insertion à l'endroit où vous souhaitez incorporer le fichier et procédez de l'une
des manières suivantes :
• Dans la catégorie Commun du panneau Insertion, cliquez sur le bouton Médias et sélectionnez l'icône Plug-in
dans le menu.
• Sélectionnez Insertion > Médias > Plug-in.
2 Recherchez le fichier audio puis cliquez sur OK.
3 Entrez la largeur et la hauteur en saisissant les valeurs dans les zones de texte appropriées de l'inspecteur Propriétés
ou en redimensionnant l'espace réservé au plug-in dans la fenêtre de document.
Ces valeurs déterminent la taille à laquelle les contrôles audio sont affichés dans le navigateur.
Voir aussi
« Insertion du contenu d'un plug-in Netscape Navigator » à la page 271
Ajout d'autres objets multimédias
Insertion et modification d'objets multimédias
Outre les fichiers SWF et FLV, vous pouvez insérer des vidéos QuickTime ou Shockwave, des applets Java, des
contrôles ActiveX ou d'autres objets audio ou vidéo dans un document Dreamweaver. Si vous insérez des attributs
d'accessibilité avec un objet multimédia, vous pouvez définir les attributs d'accessibilité et modifier ces valeurs dans le
code HTML.
1 Placez le point d'insertion dans la fenêtre de document à l'endroit où vous souhaitez insérer l'objet.
2 Pour insérer l'objet souhaité, procédez de l'une des manières suivantes :
• Dans la catégorie Commun du panneau Insertion, cliquez sur le bouton Médias et sélectionnez l'icône
correspondant au type d'objet que vous souhaitez insérer.
Dernière mise à jour le 4/5/2011
268
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
• Choisissez l'objet approprié dans le sous-menu Insertion > Médias.
• Si l'objet à insérer n'est pas un objet Shockwave, Applet ou ActiveX, choisissez Plug-in dans le sous-menu
Insertion > Médias.
Une boîte de dialogue permet alors de choisir un fichier source et de spécifier certains paramètres de l'objet
multimédia.
Pour éviter que ces boîtes de dialogue ne s'affichent, choisissez Edition > Préférences > Général (Windows) ou
Dreamweaver > Préférences > Général (Macintosh) et désactivez l'option Afficher la boîte de dialogue lors de
l'insertion d'objets. Pour remplacer la préférence d'affichage des boîtes de dialogue, maintenez enfoncée la touche Ctrl
(Windows) ou Option (Macintosh) tout en insérant l'objet. Par exemple, pour insérer un espace réservé pour une
animation Shockwave sans spécifier le fichier correspondant, maintenez la touche Ctrl ou Option enfoncée et cliquez sur
le bouton Shockwave à partir du menu Support de la catégorie Commun du panneau Insertion ou choisissez Insertion >
Médias > Shockwave.
3 Complétez les options de la boîte de dialogue Sélectionner un fichier, puis cliquez sur OK.
Remarque : La boîte de dialogue Attributs d'accessibilité s'affiche si vous avez décidé d'afficher les attributs lors de
l'insertion de médias dans la boîte de dialogue Edition > Préférences.
4 Définissez les attributs d'accessibilité.
Remarque : Vous pouvez également modifier les attributs d'un objet multimédia. Pour ce faire, sélectionnez l'objet et
modifiez le code HTML en mode Code, ou cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche
Contrôle enfoncée (Macintosh), puis sélectionnez Modifier le code de la balise.
Titre Entrez un titre pour l'objet multimédia.
Clé d'accès Entrez un équivalent clavier (une lettre) dans la zone de texte pour sélectionner l'objet de formulaire dans
le navigateur. Cela permet aux visiteurs du site d'utiliser la touche Ctrl (Windows) conjointement à la clé d'accès pour
accéder à l'objet. Par exemple, si vous entrez B comme Clé d'accès, utilisez Ctrl+B pour sélectionner l'objet dans le
navigateur.
Ordre des tabulations Entrez un nombre pour définir l'ordre de tabulation de l'objet. La définition d'un ordre
d'apparition peut se révéler utile lorsque la page contient d'autres liens et d'autres objets de formulaire et que vous
voulez que l'utilisateur passe de l'un à l'autre dans un ordre particulier. Si vous définissez un ordre d'apparition pour
un objet, assurez-vous de le faire également pour tous les autres objets.
5 Cliquez sur OK pour insérer l'objet multimédia.
Remarque : Si vous cliquez sur Annuler, un espace réservé pour l'objet multimédia s'affiche dans le document, mais
Dreamweaver ne lui associe ni balises ni attributs d'accessibilité.
Pour spécifier un fichier source, définir les dimensions et d'autres paramètres et attributs, utilisez l'inspecteur
Propriétés pour chaque objet. Vous pouvez modifier les attributs d'accessibilité d'un objet.
Voir aussi
« Optimisation de l'espace de travail pour la conception de pages accessibles » à la page 717
« Insertion du contenu d'un plug-in Netscape Navigator » à la page 271
Lancement d'un éditeur externe pour des fichiers multimédias
Vous pouvez lancer un éditeur externe depuis Dreamweaver pour modifier la plupart des fichiers multimédias. Vous
pouvez également décider de l'éditeur que doit lancer Dreamweaver pour modifier le fichier.
1 Assurez-vous que le type du fichier multimédia est associé à un éditeur sur votre système.
Dernière mise à jour le 4/5/2011
269
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Pour savoir quel éditeur est associé au type de fichier, sélectionnez Edition > Préférences dans Dreamweaver, puis
Types de fichiers/Editeurs dans la liste Catégorie. Cliquez sur l'extension de fichier dans la colonne Extensions pour
consulter le ou les éditeurs associés dans la colonne Editeurs. Vous pouvez modifier l'éditeur associé à un type de
fichier.
2 Double-cliquez sur le fichier multimédia dans le panneau Fichiers pour lancer l'éditeur externe et ouvrir le fichier.
L'éditeur qui est exécuté lorsque vous double-cliquez sur le fichier du panneau Fichiers est appelé « éditeur principal ».
Si vous double-cliquez sur un fichier image, par exemple, Dreamweaver ouvre le fichier dans l'application principale
de retouche d'image définie, par exemple Adobe Fireworks.
3 Si vous ne souhaitez pas utiliser l'éditeur externe principal pour modifier le fichier, vous pouvez effectuer l'une des
opérations suivantes pour utiliser un autre éditeur :
• Dans le panneau Fichiers, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfoncée (Macintosh) sur le nom du fichier concerné et sélectionnez Ouvrir avec dans le menu qui s'affiche.
• En mode Création, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée
(Macintosh) sur l'élément multimédia de la page affichée, puis sélectionnez Modifier avec dans le menu contextuel.
Spécification de l'éditeur à lancer depuis Dreamweaver
Vous pouvez définir l'éditeur à lancer par Dreamweaver pour modifier un type de fichier et pour ajouter ou supprimer
des types de fichiers reconnus par Dreamweaver.
Indication explicite des éditeurs externes à lancer pour un type de fichier donné
1 Choisissez Edition > Préférences, puis sélectionnez Types de fichiers/Editeurs dans la liste Catégorie.
Les extensions de fichiers, par exemple .gif, .wav et .mpg, apparaissent dans la liste de gauche, sous le titre Extensions.
Les éditeurs associés à une extension apparaissent dans la liste de droite, sous le titre Editeurs.
2 Sélectionnez l'extension de type de fichier dans la liste Extensions, puis effectuez l'une des opérations suivantes :
• Pour associer un nouvel éditeur au type de fichier, cliquez sur le bouton plus (+), au-dessus de la liste Editeurs et
renseignez la boîte de dialogue qui s'affiche.
Par exemple, sélectionnez l'icône de l'application Acrobat pour l'associer au type de fichier.
• Pour faire d'un éditeur l'éditeur principal pour un type de fichier donné (c'est-à-dire celui qui s'ouvre
automatiquement lorsque vous double-cliquez sur un fichier de ce type dans le panneau Fichiers), sélectionnez cet
éditeur dans la liste Editeurs, puis cliquez sur Rendre principal.
• Pour qu'un éditeur ne soit plus lié à un type de fichier donné, sélectionnez cet éditeur dans la liste Editeurs et cliquez
sur le bouton moins (-) au-dessus de la liste.
Ajout d'un nouveau type de fichier et un éditeur associé
1 Cliquez sur le bouton plus (+), au-dessus de la liste Extensions et entrez une extension de type de fichier (saisissez
le point précédent l'extension) ou plusieurs extensions liées et séparées par des espaces.
Vous pouvez, par exemple, entrer .xml .xsl si vous souhaitez associer ces fichiers avec un éditeur XML installé sur
votre système.
2 Pour sélectionner un éditeur pour le type de fichier, cliquez sur le bouton plus (+), au-dessus de la liste Editeurs et
renseignez la boîte de dialogue qui s'affiche.
Dernière mise à jour le 4/5/2011
270
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Suppression d'un type de fichier
❖ Sélectionnez le type de fichier dans la liste Extensions et cliquez sur le bouton moins (-) au-dessus de la liste
Extensions
Remarque : L'annulation de la suppression d'un type de fichier étant impossible, soyez prudent lors d'une telle opération.
Utilisation des Design Notes avec les objets multimédias
Comme pour la plupart des objets dans Dreamweaver, vous pouvez ajouter des Design Notes à un objet multimédia.
Les Design Notes sont des notes associées à un fichier particulier et stockées dans un fichier séparé. Les Design Notes
vous permettent de conserver des informations supplémentaires sur les documents, par exemple, des commentaires
sur l'état des fichiers ou le nom des fichiers source des images.
1 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh)
sur l'objet dans la fenêtre de document.
Remarque : Vous devez définir votre site avant d'ajouter des Design Notes à un objet.
2 Cliquez sur Design Notes de la page dans le menu contextuel.
3 Entrez les informations souhaitées dans la Design Note.
Vous pouvez également ajouter une Design Note à un objet multimédia à partir du panneau Fichiers en sélectionnant
le fichier, en affichant le menu contextuel, puis en choisissant l'option Design Notes dans ce dernier.
Voir aussi
« Activation et désactivation des Design Notes pour un site » à la page 109
« Stockage des informations sur les fichiers dans des Design Notes » à la page 108
Insertion d'animations Shockwave
Vous pouvez utiliser Dreamweaver pour insérer des animations Shockwave dans vos documents. Adobe® Shockwave®,
une norme pour les éléments multimédia interactifs sur le Web, est un format compressé qui autorise le
téléchargement rapide des fichiers multimédia créés dans Adobe® Director®, ainsi que leur lecture dans la plupart des
navigateurs.
1 Dans la fenêtre de document, placez le point d'insertion à l'endroit où vous souhaitez insérer une animation
Shockwave et procédez de l'une des manières suivantes :
• Dans la catégorie Commun du panneau Insertion, cliquez sur le bouton Médias puis sélectionnez l'icône
Shockwave
dans le menu.
• Choisissez Insertion > Médias > Shockwave.
2 Dans la boîte de dialogue qui s'affiche, sélectionnez un fichier d'animation.
3 Dans l'inspecteur Propriétés, tapez la largeur et la hauteur de l'animation dans les zones L et H.
Voir aussi
« Définition des propriétés d'un fichier SWF » à la page 258
Dernière mise à jour le 4/5/2011
271
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Ajout de vidéo (non FLV)
Plusieurs méthodes vous permettent d'ajouter une vidéo à votre page Web et vous pouvez faire appel à divers formats.
L'utilisateur peut télécharger les vidéos ou elles peuvent être diffusées et lues pendant leur téléchargement.
1 Placez le fichier vidéo dans le dossier de votre site.
Ces clips se présentent souvent au format AVI ou MPEG.
2 Insérez un lien vers la séquence ou incorporez-la dans votre page.
Pour établir un lien vers la séquence, entrez un texte pour le lien (par exemple, « Téléchargez la vidéo »), sélectionnez
le texte et cliquez sur l'icône de dossier dans l'inspecteur de sélections. Recherchez le fichier vidéo et sélectionnez-le.
Remarque : L'utilisateur doit télécharger une application d'aide (un plug-in) pour visualiser les formats lus en transit,
comme Real Media, QuickTime et Windows Media.
Insertion du contenu d'un plug-in Netscape Navigator
Vous pouvez créer du contenu, par exemple une séquence vidéo QuickTime pour un plug-in Netscape Navigator, puis
utiliser Dreamweaver pour insérer ce contenu dans un document HTML. Par exemple, RealPlayer et QuickTime sont
des plug-ins par défaut, alors que les fichiers MP3 et les animations QuickTime sont des fichiers de contenu.
Vous pouvez afficher un aperçu des animations qui font directement appel aux plug-ins Netscape Navigator dans le
mode Création dans la fenêtre de document. Vous pouvez lire simultanément tous les éléments des plug-ins pour
savoir comment la page s'affichera sur le poste de l'utilisateur ou lire chaque élément individuellement pour vous
assurer que vous avez incorporé le bon élément multimédia.
Remarque : Il n'est pas possible d'afficher un aperçu des films ou animations basées sur des contrôles ActiveX.
Après avoir inséré le contenu d'un plug-in Netscape Navigator, utilisez l'inspecteur Propriétés pour en définir les
paramètres. Pour afficher les propriétés suivantes dans l'inspecteur Propriétés, sélectionnez un objet plug-in Netscape
Navigator.
Lors de son ouverture, l'inspecteur Propriétés affiche les propriétés les plus couramment utilisées. Cliquez sur la flèche
d'agrandissement, dans le coin inférieur droit, pour afficher toutes les propriétés.
Insertion du contenu d'un plug-in Netscape Navigator et définition de ses propriétés
1 Dans la fenêtre de document (mode Création), placez le point d'insertion à l'endroit où vous souhaitez insérer le
contenu, puis procédez de l'une des manières suivantes :
• Dans la catégorie Commun du panneau Insertion, cliquez sur le bouton Médias puis sélectionnez l'icône Plug-in
dans le menu.
• Sélectionnez Insertion > Médias > Plug-in.
2 Dans la boîte de dialogue qui s'affiche, sélectionnez un fichier de contenu pour un plug-in Netscape Navigator, puis
cliquez sur OK.
3 Définissez les options du plug-in dans l'inspecteur Propriétés.
Nom Spécifie un nom permettant d'identifier le plug-in dans un script. Tapez un nom dans la zone de texte sans titre,
à l'extrême gauche de l'inspecteur Propriétés.
L et H Spécifient, en pixels, la largeur et la hauteur allouées à l'objet sur la page.
Src Spécifie le fichier des données source. Cliquez sur l'icône de dossier pour rechercher un fichier ou entrez un nom
de fichier.
Dernière mise à jour le 4/5/2011
272
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
URL du plug-in Spécifie l'URL pour l'attribut pluginspace. Indiquez l'URL complète du site à partir duquel les
utilisateurs peuvent télécharger le plug-in. Si l'utilisateur qui consulte votre page ne possède pas le plug-in nécessaire,
le navigateur essaie de le télécharger à partir de cette URL.
Alignement Détermine l'alignement de l'objet sur la page.
Espace V. et Espace H. Spécifient la quantité d'espace blanc, en pixels, au-dessus, au-dessous et de chaque côté du plug-in.
Bordure Spécifie la largeur de la bordure autour du plug-in.
Paramètres Ouvre une boîte de dialogue permettant d'indiquer des paramètres supplémentaires à transmettre au
plug-in Netscape Navigator. Nombreux sont les plug-ins qui répondent à des paramètres particuliers.
Vous pouvez également afficher les attributs affectés au plug-in sélectionné en cliquant sur le bouton Attribut. Vous
pouvez modifier, ajouter ou supprimer des attributs tels que la hauteur et la largeur dans cette boîte de dialogue.
Lecture de contenu d'un plug-in dans la fenêtre de document
1 Insérez un ou plusieurs éléments multimédias à l'aide d'une des méthodes décrites dans la section précédente.
2 Effectuez l'une des opérations suivantes :
• Sélectionnez un des éléments multimédia que vous avez insérés, puis choisissez la commande Affichage > Plug-ins
> Lire ou cliquez sur le bouton de lecture de l'inspecteur Propriétés.
• Choisissez la commande Affichage > Plug-ins > Lire tout pour lire tous les éléments multimédia de la page
sélectionnée qui font appel à des plug-ins.
Remarque : L'option Lire tout s'applique uniquement au document actif. Elle ne s'applique pas aux autres documents
dans un ensemble de cadres par exemple.
Arrêt de la lecture du contenu d'un plug-in
❖ Sélectionnez un élément multimédia, puis choisissez la commande Affichage > Plug-ins > Arrêter ou cliquez sur le
bouton d'arrêt dans l'inspecteur Propriétés.
Vous pouvez également sélectionner Affichage > Plug-ins > Arrêter tout pour interrompre la lecture de tous les
contenus des plug-ins.
Dépannage des plug-ins de Netscape Navigator
Vous avez suivi les étapes permettant de lire le contenu d'un plug-in dans la fenêtre de document, mais constatez
qu'une partie ne fonctionne pas. Essayez l'opération suivante :
• Vérifiez que le plug-in associé est bien installé sur votre ordinateur et que sa version est compatible avec le contenu
chargé.
• Ouvrez le fichier Configuration/Plugins/UnsupportedPlugins.txt dans un éditeur de texte et vérifiez si le plug-in
posant problème est répertorié. Ce fichier conserve la trace des plug-ins étant la source de problèmes dans
Dreamweaver et qui ne sont donc pas pris en charge. Si vous constatez des problèmes avec un plug-in particulier,
il est souhaitable de l'ajouter à ce fichier.
• Vérifiez que vous avez suffisamment de mémoire. Certains plug-ins nécessitent de 2 à 5 Mo de mémoire
supplémentaire pour fonctionner.
Dernière mise à jour le 4/5/2011
273
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Insertion d'un contrôle ActiveX
Vous pouvez ajouter un contrôle ActiveX à votre page. Les contrôles ActiveX (autrefois appelés commandes OLE) sont
des composants réutilisables, un peu comme des applications miniatures, qui peuvent fonctionner comme des plugins de navigateurs. Ils fonctionnent dans Internet Explorer sous Windows, mais pas sur Macintosh ni dans Netscape
Navigator. L'objet ActiveX de Dreamweaver vous permet de fournir les attributs et paramètres d'un contrôle ActiveX
chargé par le navigateur du visiteur.
Une fois un objet ActiveX inséré, utilisez l'inspecteur Propriétés pour définir les attributs de la balise object et les
paramètres du contrôle ActiveX. Cliquez sur Paramètres dans l'inspecteur Propriétés pour indiquer des noms et des
valeurs de propriétés qui n'apparaissent pas dans l'inspecteur Propriétés. Il n'existe pas de format standard
unanimement accepté pour les paramètres des contrôles ActiveX. Consultez la documentation sur le contrôle ActiveX
que vous utilisez pour savoir quels paramètres choisir.
❖ Dans la fenêtre de document, positionnez le curseur à l'emplacement où insérer le contenu et procédez de l'une des
manières suivantes :
• Dans la catégorie Commun du panneau Insertion, cliquez sur le bouton Médias puis sélectionnez l'icône ActiveX
.
• Dans la catégorie Commun du panneau Insertion, cliquez sur le bouton Médias puis sélectionnez l'icône ActiveX.
Lorsque l'icône ActiveX s'affiche dans le panneau Insertion, vous pouvez la faire glisser jusqu'à la fenêtre du
document.
• Choisissez Insertion > Médias > ActiveX. Une icône indique l'emplacement de la page où apparaîtra le contrôle
ActiveX dans Internet Explorer.
Propriétés d'ActiveX
Lors de son ouverture, l'inspecteur Propriétés affiche les propriétés les plus couramment utilisées. Cliquez sur la flèche
d'agrandissement, dans le coin inférieur droit, pour afficher toutes les propriétés.
Nom Spécifie un nom qui permet d'identifier l'objet ActiveX pour les scripts. Tapez un nom dans la zone de texte sans
titre, à l'extrême gauche de l'inspecteur Propriétés.
L et H Spécifient la largeur et la hauteur de l'objet, en pixels.
ID de classe Identifie le contrôle ActiveX pour le navigateur. Tapez la valeur ou choisissez-en une dans le menu
contextuel. Lorsque la page est chargée, le navigateur utilise l'ID de classe pour localiser le contrôle ActiveX requis par
l'objet ActiveX associé à la page. Si le navigateur ne peut pas localiser le contrôle ActiveX spécifié, il essaie de le
télécharger à partir de l'emplacement spécifié dans le champ Base.
Incorporer Ajoute une balise embed dans la balise object pour le contrôle ActiveX. S'il existe un plug-in Netscape
Navigator équivalent au contrôle ActiveX, la balise embed active ce plug-in. Dreamweaver affecte les valeurs que vous
avez saisies comme propriétés d'objets ActiveX aux plug-ins équivalents de Netscape Navigator.
Alignement Détermine l'alignement de l'objet sur la page.
Paramètres Ouvre une boîte de dialogue dans laquelle vous pouvez indiquer des paramètres supplémentaires à
transmettre à l'objet ActiveX. Nombreux sont les contrôles ActiveX qui possèdent des paramètres particuliers.
Src Définit le fichier de données à utiliser pour un plug-in Netscape Navigator, si l'option Incorporer est activée. Si
vous n'entrez pas de valeur, Dreamweaver essaie d'en déterminer une à partir des propriétés d'ActiveX entrées
précédemment.
Espace V. et Espace H. Spécifient la quantité d'espace blanc, en pixels, au-dessus, au-dessous et de chaque côté de
l'objet.
Base Spécifie l'URL qui contient le contrôle ActiveX. Internet Explorer télécharge le contrôle ActiveX à partir de cet
emplacement s'il n'a pas été installé sur le système du visiteur. Si vous ne précisez pas le paramètre Base et que le
Dernière mise à jour le 4/5/2011
274
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
contrôle ActiveX nécessaire n'est pas déjà installé sur l'ordinateur du visiteur, son navigateur ne pourra pas afficher
l'objet ActiveX.
Img sec. Spécifie une image à afficher si le navigateur ne prend pas en charge la balise object. Cette option n'est
disponible que si l'option Incorporer est désélectionnée.
Données Spécifie un fichier de données que le contrôle ActiveX doit charger. De nombreux contrôles ActiveX, tels que
Shockwave et RealPlayer, n'utilisent pas ce paramètre.
Insertion d'une applet Java
Vous pouvez insérer une applet Java dans un document HTML à l'aide de Dreamweaver. Java est un langage de
programmation qui permet de développer des applications légères (applets) pouvant être incorporées dans des pages Web.
Une fois une applet Java insérée, utilisez l'inspecteur Propriétés pour définir les paramètres. Sélectionnez une applet
Java pour afficher ses propriétés dans l'inspecteur Propriétés.
1 Dans la fenêtre de document, placez le point d'insertion à l'endroit où vous souhaitez insérer l'applet, puis procédez
de l'une des manières suivantes :
• Dans la catégorie Commun du panneau Insertion, cliquez sur le bouton Médias puis sélectionnez l'icône Applet
.
• Choisissez Insertion > Médias > Applet.
2 Sélectionnez un fichier contenant une applet Java.
Propriétés des applets Java
Lors de son ouverture, l'inspecteur Propriétés affiche les propriétés les plus couramment utilisées. Cliquez sur la flèche
d'agrandissement, dans le coin inférieur droit, pour afficher toutes les propriétés.
Nom Spécifie un nom permettant d'identifier l'applet dans un script. Tapez un nom dans la zone de texte sans titre, à
l'extrême gauche de l'inspecteur Propriétés.
L et H Spécifient la largeur et la hauteur de l'applet, en pixels.
Code Spécifie le fichier contenant le code Java de l'applet. Cliquez sur l'icône de dossier pour rechercher un fichier ou
entrez un nom de fichier.
Base Identifie le dossier contenant l'applet sélectionnée. Lorsque vous choisissez une applet, cette zone de texte est
renseignée automatiquement.
Alignement Détermine l'alignement de l'objet sur la page.
Sec Spécifie un contenu de remplacement (généralement une image) à afficher si le navigateur de l'utilisateur ne prend
pas en charge les applets Java ou si Java y est désactivé. Si vous tapez du texte, Dreamweaver insère le texte comme étant
la valeur de l'attribut alt de l'applet. Si vous sélectionnez une image, Dreamweaver insère une balise img entre les
balises applet d'ouverture et de fermeture.
Remarque : Pour spécifier un contenu de remplacement visible dans Netscape Navigator (avec JavaScript désactivé)
comme dans Lynx (navigateur basé sur le texte), sélectionnez une image, puis ajoutez manuellement un attribut alt à
la balise img dans l'inspecteur de code.
Espace V. et Espace H. Spécifient la quantité d'espace blanc, en pixels, au-dessus, au-dessous et de chaque côté de
l'applet.
Paramètres Ouvre une boîte de dialogue dans laquelle vous pouvez indiquer des paramètres supplémentaires à
transmettre à l'applet. Nombreuses sont les applets qui répondent à des paramètres particuliers.
Dernière mise à jour le 4/5/2011
275
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Utilisation de comportements pour contrôler les objets multimédias
Vous pouvez ajouter des comportements à votre page pour commencer ou arrêter la lecture de divers objets
multimédia.
Contrôler Shockwave ou Flash Permet de lire, d'arrêter, de rembobiner ou d'atteindre un cadre dans une animation
Shockwave ou un fichier SWF
Lire le son Permet de jouer un son. Vous pouvez ainsi jouer un effet sonore dès que l'utilisateur survole un lien à l'aide
de la souris.
Vérifier le Plug-in Permet de vérifier si les visiteurs de votre site disposent du plug-in requis, puis de les diriger vers
différentes URL, en fonction du résultat. Cela s'applique uniquement aux plug-ins de Netscape Navigator, car ce
comportement ne vérifie pas les contrôles ActiveX.
Voir aussi
« Application du comportement Contrôler Shockwave ou SWF » à la page 365
« Application du comportement Lire le son » à la page 369
« Application du comportement Vérifier le plug-in » à la page 364
Utilisation de paramètres pour contrôler des objets multimédia
Définissez les paramètres spéciaux pour contrôler les fichiers Shockwave et SWF, les contrôles ActiveX, les plug-ins
Netscape Navigator et les applets Java. Les paramètres sont utilisés avec les balises object, embed et applet. Les
paramètres définissent des attributs spécifiques aux différents types d'objets. Par exemple, un fichier SWF peut
disposer du paramètre qualité <paramname="quality"value="best"> pour la balise object. La boîte de dialogue
Paramètre est disponible à partir de l'inspecteur Propriétés. Consultez la documentation sur l'objet que vous utilisez
pour connaître les paramètres requis.
Remarque : Il n'existe pas de standard unanimement accepté pour l'identification des fichiers de données des contrôles
ActiveX. Consultez la documentation sur le contrôle ActiveX que vous utilisez pour savoir quels paramètres choisir.
Saisie du nom et de la valeur d'un paramètre
1 Sélectionnez un objet pouvant être associé à des paramètres (par exemple, une animation Shockwave, un contrôle
ActiveX, un plug-in Netscape Navigator ou une applet Java) dans la fenêtre de document.
2 Ouvrez la boîte de dialogue en procédant de l'une des manières suivantes :
• Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh)
sur l'objet et cliquez sur Paramètres dans le menu contextuel.
• Ouvrez l'inspecteur Propriétés s'il n'est pas déjà ouvert, puis cliquez sur le bouton Paramètres situé dans la section
inférieure de l'inspecteur Propriétés. Assurez-vous que l'inspecteur Propriétés est développé.
3 Cliquez sur le bouton Plug (+) et entrez le nom et la valeur du paramètre dans les colonnes appropriées.
Suppression d'un paramètre
❖ Sélectionnez un paramètre et cliquez sur le bouton Moins (-).
Réorganisation de paramètres
❖ Sélectionnez un paramètre et utilisez les boutons fléchés vers le haut ou vers le bas.
Dernière mise à jour le 4/5/2011
276
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Automatisation des tâches
Automatisation des tâches
Le panneau Historique mémorise les étapes que vous effectuez lors de l'exécution d'une tâche. Vous pouvez
automatiser une tâche effectuée fréquemment en reproduisant les étapes correspondantes à partir du panneau
Historique ou en créant une nouvelle commande qui effectue les étapes automatiquement.
Certains mouvements de la souris, tels qu'une sélection via un clic dans la fenêtre de document, ne peuvent pas être
reproduits ou sauvegardés. Lorsque vous effectuez ce type de mouvements, un trait noir s'affiche dans le panneau
Historique (la présence de cette ligne ne devient évidente que lorsque vous effectuez une autre action). Pour éviter cela,
déplacez le point d'insertion à l'aide des touches fléchées, et non de la souris, dans la fenêtre de document.
Il existe quelques autres actions qui ne peuvent pas être reproduites, par exemple le glisser-déplacer d'un élément de
la page. Lorsque vous effectuez ce type d'action, une icône contenant un petit X rouge s'affiche dans le panneau
Historique.
Les commandes sauvegardées sont conservées en permanence (à moins que vous ne les supprimiez), tandis que les
commandes enregistrées sont supprimées lorsque vous quittez Adobe® Dreamweaver® CS5 et les séquences d'étapes
copiées sont supprimées lorsque vous copiez un autre élément
Utilisation du panneau Historique
Le panneau Historique (Fenêtre > Historique) affiche une liste des étapes que vous avez effectuées dans le document
actif depuis que vous l'avez créé ou ouvert (mais pas les étapes effectuées dans d'autres cadres, d'autres fenêtres de
document ou dans le panneau Site). Utilisez le panneau Historique pour annuler plusieurs étapes en même temps et
pour automatiser des tâches.
A. Curseur (index) B. Etapes C. Bouton Reproduire D. Bouton Copier les étapes E. Bouton Enregistrer comme commande
Lors de l'ouverture du panneau Historique, le curseur, ou index, pointe sur la dernière action que vous avez accomplie.
Remarque : Il est impossible de modifier l'ordre dans lequel les étapes sont affichées dans le panneau Historique. Il ne
faut pas voir dans le panneau Historique une collection arbitraire de commandes ; il vous permet de voir, dans l'ordre
chronologique, la liste des actions déjà effectuées.
Annulation de la dernière étape
❖ Effectuez l'une des opérations suivantes :
• Choisissez Edition > Annuler.
• Déplacez le curseur du panneau Historique d'une étape vers le haut dans la liste.
Remarque : Pour provoquer un déplacement automatique vers une étape spécifique, cliquez à gauche de cette étape ; si
vous cliquez sur l'étape elle-même, elle sera sélectionnée. La sélection d'une étape est une opération différente du retour à
cette étape dans l'historique des actions.
Dernière mise à jour le 4/5/2011
277
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Annulation de plusieurs étapes à la fois
❖ Faites glisser le curseur de façon à pointer sur une étape de la liste, ou cliquez à gauche d'une étape le long de la
trajectoire du curseur.
Le curseur se dirige automatiquement vers cette étape en annulant toutes les étapes se trouvant sur son passage.
Remarque : Tout comme pour l'annulation d'une seule action, si vous annulez une série d'étapes, puis effectuez une autre
opération dans le document, il ne vous sera plus possible de rétablir les actions annulées : elles disparaissent du panneau
Historique.
Définition du nombre maximal d'étapes que le panneau Historique conserve et affiche
Le nombre d'étapes par défaut est suffisant pour la plupart des utilisateurs. Plus ce nombre est élevé, plus le panneau
Historique nécessite de la mémoire, ce qui peut affecter les performances et ralentir considérablement votre
ordinateur.
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
2 Sélectionnez la catégorie Général dans la liste de gauche.
3 Tapez un chiffre dans la zone Nombre maximal d'étapes de l'historique.
Lorsque le panneau Historique atteint le nombre maximal d'étapes, les premières étapes sont supprimées.
Effacement de la liste des actions du panneau Historique pour le document actif
❖ Dans le menu contextuel du panneau Historique, sélectionnez Effacer l'historique.
Cette commande efface également toutes les informations permettant d'annuler les actions effectuées dans le
document actif : après avoir cliqué sur Effacer l'historique, il vous est impossible d'annuler les actions dont la trace a
été effacée. La fonction Effacer l'historique n'annule aucune action passée, mais se limite à supprimer la trace de ces
étapes de la mémoire.
Répétition d'étapes
Vous pouvez répéter la dernière étape effectuée ou bien une série d'étapes contiguës ou non à l'aide du panneau
Historique. Reproduisez les étapes directement depuis le panneau Historique.
Répétition d'une étape
❖ Effectuez l'une des opérations suivantes :
• Choisissez Edition > Répéter.
• Dans le panneau Historique, sélectionnez une étape et cliquez sur le bouton Reproduire. L'étape est reproduite et
une nouvelle instance de cette action apparaît dans le panneau Historique.
Répétition d'une série d'étapes
1 Sélectionnez les étapes désirées dans le panneau Historique :
• Pour sélectionner des étapes adjacentes, faites glisser la souris d'une étape à une autre (ne faites pas glisser le
curseur ; faites simplement glisser la souris de l'étiquette de texte d'une étape vers l'étiquette de texte d'une autre),
ou sélectionnez la première étape et, tout en maintenant la touche Maj enfoncée, cliquez sur la dernière étape.
• Pour sélectionner des étapes non adjacentes, sélectionnez une étape, puis tout en maintenant appuyée la touche Ctrl
(Windows) ou Commande (Macintosh), cliquez sur d'autres étapes de façon à les sélectionner (ou à les
désélectionner le cas échéant).
Dernière mise à jour le 4/5/2011
278
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Seules les actions sélectionnées (en surbrillance), et pas nécessairement celle sur laquelle se trouve le curseur, sont
répétées.
Remarque : Bien que vous puissiez sélectionner une série d'étapes contenant un trait noir signalant une action impossible
à enregistrer, cette étape est ignorée lorsque vous reproduisez les étapes.
2 Cliquez sur Reproduire.
Les étapes sont reproduites dans l'ordre chronologique et une nouvelle étape, Reproduire les étapes, apparaît dans le
panneau Historique.
Réalisation ou extension d'une sélection
❖ Maintenez la touche Maj enfoncée tout en appuyant sur une touche fléchée.
Si un trait noir indiquant un mouvement de la souris apparaît pendant que vous effectuez une tâche que vous voulez
réitérer ultérieurement, vous pouvez annuler cette dernière action et tenter une autre approche (utilisez les touches
fléchées, par exemple).
Application d'étapes du panneau Historique à des objets
Vous pouvez appliquer un ensemble d'étapes affichées dans le panneau Historique à n'importe quel objet figurant dans
la fenêtre de document.
Si vous sélectionnez plusieurs objets, puis leur appliquez des étapes à partir du panneau Historique, ces objets sont
traités comme une sélection unique et Dreamweaver tente d'appliquer les étapes à cette sélection combinée ; toutefois,
vous ne pouvez appliquer un ensemble d'étapes qu'à un seul objet à la fois.
Pour appliquer les étapes à chaque objet d'un ensemble d'objets, vous devez faire en sorte que la dernière étape de la
série sélectionne l'objet suivant de l'ensemble. La deuxième procédure illustre ce principe dans un scénario particulier :
définition de l'espacement vertical et horizontal d'une série d'images.
Application d'étapes à un autre objet
1 Sélectionnez l'objet.
2 Sélectionnez l'étape à appliquer dans le panneau Historique, puis cliquez sur Reproduire.
Application d'étapes à plusieurs objets
1 Ouvrez un document dans lequel chaque ligne est composée d'une petite image (par exemple une puce graphique
ou une icône) suivie de texte.
L'objectif est d'espacer davantage ces images à la fois du texte et des autres images situées au-dessus et en dessous.
2 Ouvrez l'inspecteur Propriétés (Fenêtre > Propriétés), si nécessaire.
3 Sélectionnez la première image.
4 Dans l'inspecteur Propriétés, indiquez des valeurs dans les zones Espace V. et Espace H. pour définir l'espacement
de l'image.
5 Cliquez sur l'image de nouveau pour activer la fenêtre de document sans déplacer le point d'insertion.
Dernière mise à jour le 4/5/2011
279
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
6 Appuyez sur la touche fléchée gauche pour amener le point d'insertion à gauche de l'image.
7 Appuyez sur la touche fléchée bas pour faire descendre le point d'insertion d'une ligne, tout en le laissant juste à
gauche de la seconde image de la série.
8 Appuyez sur la touche fléchée droite tout en maintenant la touche Maj. enfoncée, pour sélectionner la seconde
image.
Remarque : Ne sélectionnez surtout pas l'image en cliquant dessus, car vous ne pourriez plus reproduire toutes les étapes.
9 Dans le panneau Historique, sélectionnez les étapes correspondant à la modification de l'espacement de l'image et
à la sélection de l'image suivante. Cliquez sur le bouton Reproduire pour reproduire ces actions.
L'espacement de l'image courante est modifié, et l'image suivante est sélectionnée.
10 Continuez à cliquer sur le bouton Reproduire jusqu'à ce que toutes les images soient correctement espacées.
Copie et collage d'étapes entre les documents
Chaque document ouvert possède son propre historique. Vous pouvez copier des étapes d'un document et les coller
dans un autre document.
La fermeture d'un document supprime son historique. Si vous savez que vous voudrez utiliser des étapes d'un
document ultérieurement, copiez ou sauvegardez ces étapes avant de fermer ce document.
1 Sélectionnez les étapes désirées dans le panneau Historique du document qui contient les étapes à réutiliser.
2 Cliquez sur Copier les étapes dans le panneau Historique
.
Remarque : Le bouton Copier les étapes (dans le panneau Historique) est différent de la commande Copier (dans le menu
Edition). Vous ne pouvez pas utiliser la commande Edition > Copier pour copier des étapes, mais vous pouvez utiliser la
commande Edition > Coller pour les coller.
Soyez prudent lorsque vous copiez des étapes qui comportent une commande Copier ou Coller:
• N'utilisez pas Copier les étapes si l'une des étapes contient une commande Copier, car le collage de ces étapes risque
de ne pas s'effectuer comme souhaité.
• Si vos étapes contiennent une commande Coller, vous ne pouvez pas les coller, à moins qu'elles ne comprennent
également une commande Copier avant la commande Coller.
3 Ouvrez l'autre document.
4 Placez le point d'insertion sur l'emplacement désiré, ou sélectionnez l'objet auquel vous voulez appliquer les étapes.
5 Choisissez Edition > Coller.
Dernière mise à jour le 4/5/2011
280
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Les étapes sont reproduites dès qu'elles sont collées dans le panneau Historique du document. Le panneau Historique
les affiche comme une seule étape, appelée Coller les étapes.
Si vous collez des étapes dans un éditeur de texte, en mode Code ou dans l'inspecteur de code, elles s'affichent sous
forme de code Java Script. Ce point peut vous être très utile pour apprendre à écrire vos propres scripts.
Voir aussi
« Rédaction et modification de code » à la page 316
Création et utilisation de commandes à partir d'étapes de l'historique
Sauvegardez un ensemble d'étapes de l'historique sous la forme d'une commande à laquelle vous donnerez un nom et
qui deviendra alors disponible dans le menu Commandes. Créez et enregistrez une nouvelle commande si vous pensez
devoir utiliser de nouveau un ensemble d'étapes, surtout après le prochain démarrage de Dreamweaver.
Création d'une commande
1 Sélectionnez la ou les étapes désirées dans le panneau Historique.
2 Cliquez sur le bouton Enregistrer comme commande ou choisissez l'option Enregistrer comme commande dans le
menu contextuel du panneau Historique.
3 Indiquez le nom de la commande et cliquez sur OK.
La commande apparaît dans le menu Commandes.
Remarque : La commande est sauvegardée sous la forme d'un fichier Java Script (ou parfois HTML) dans votre dossier
Dreamweaver/Configuration/Commandes. Si vous utilisez Dreamweaver sur un système d'exploitation à plusieurs
utilisateurs, le fichier est enregistré dans le dossier Commandes de l'utilisateur spécifique.
Utilisation d'une commande sauvegardée
1 Sélectionnez l'objet auquel vous désirez appliquer la commande ou placez le point d'insertion à l'emplacement
désiré.
2 Sélectionnez la commande de votre choix dans le menu Commandes.
Modification du nom d'une commande
1 Choisissez Commandes > Modifier la liste des commandes.
2 Sélectionnez la commande à renommer, indiquez son nouveau nom, puis cliquez sur Fermer.
Suppression d'un nom du menu Commandes
1 Choisissez Commandes > Modifier la liste des commandes.
2 Sélectionnez une commande.
3 Cliquez sur Supprimer, puis sur Fermer.
Enregistrement et sauvegarde de commandes
Enregistrez une commande temporaire pour une utilisation à court terme, ou enregistrez et sauvegardez une
commande pour l'utiliser ultérieurement. Dreamweaver conserve uniquement une commande enregistrée à la fois ;
dès que vous commencez à enregistrer une nouvelle commande, l'ancienne est perdue, à moins que vous ne la
sauvegardiez avant de mémoriser la nouvelle commande.
Dernière mise à jour le 4/5/2011
281
UTILISATION DE DREAMWEAVER
Ajout de contenu dans les pages
Enregistrement provisoire une série d'étapes
1 Choisissez Commandes > Démarrer l'enregistrement ou appuyez sur la combinaison de touches Ctrl+Maj+X
(Windows) ou Commande+Maj+X (Macintosh).
Le pointeur change d'aspect pour indiquer que vous mémorisez une commande.
2 Lorsque l'opération est terminée, choisissez Commandes > Arrêter l'enregistrement ou appuyez à nouveau sur la
combinaison de touches Ctrl+Maj+X (Windows) ou Commande+Maj+X (Macintosh).
Reproduction d'une commande enregistrée
❖ Choisissez Commandes > Reproduire la commande enregistrée ou appuyez sur la combinaison de touches
Ctrl+Maj+R (Windows) ou Commande+Maj+R (Macintosh).
Sauvegarde d'une commande enregistrée
1 Sélectionnez Commandes > Reproduire la commande enregistrée.
2 Dans la liste d'étapes du panneau Historique, sélectionnez l'étape Exécuter commande et cliquez sur le bouton
Enregistrer comme commande.
3 Indiquez le nom de la commande et cliquez sur OK.
La commande apparaît dans le menu Commandes.
Dernière mise à jour le 4/5/2011
282
Chapitre 9 : Liens et navigation
A propos des liens et de la navigation
A propos des liens
Une fois que vous avez défini un site Dreamweaver dans lequel stocker les documents de votre site Web et que vous
avez créé des pages HTML, il vous reste à établir des connexions entre vos documents et d'autres types de documents.
Dreamweaver propose plusieurs méthodes pour créer des liens vers des documents, des images, des fichiers
multimédias ou des logiciels pouvant être téléchargés. Vous pouvez établir des liens vers n'importe quel texte ou
n'importe quelle image d'un document, même s'ils se trouvent dans un en-tête, une liste, un tableau, un élément à
positionnement absolu (élément PA) ou un cadre.
Il existe différentes méthodes de création et de gestion de liens. Certains concepteurs de pages Web préfèrent créer des
liens vers des pages ou des fichiers qui n'existent pas encore, alors que d'autres préfèrent créer d'abord tous les fichiers
et pages, puis ajouter les liens. Une autre méthode de gestion des liens consiste à créer des pages de type « espace
réservé » qui vous permettent d'ajouter des liens rapidement et de les vérifier avant de terminer toutes les pages de
votre site.
Voir aussi
« Test de liens dans Dreamweaver » à la page 291
Chemins absolus, relatifs au documents et relatifs à la racine du site
Pour créer des liens, il est indispensable de comprendre le chemin d'accès qui s'établit entre le document ou l'actif à
partir duquel vous établissez un lien et le document pointé par ce lien.
Chaque page Web possède une adresse unique, appelée URL (Uniform Resource Locator) Cependant, lorsque vous
créez un lien local (entre deux documents du même site), vous n'avez en général pas besoin de spécifier l'URL complète
du document vers lequel vous créez le lien ; il est préférable d'indiquer un chemin relatif, à partir du document actif
ou de la racine du site.
Il existe trois types de chemins d'accès de liaison :
• Chemins absolus (par exemple, http://www.adobe.com/support/dreamweaver/contents.html).
• Chemins relatifs au document (par exemple dreamweaver/contents.html).
• Chemins relatifs à la racine du site (par exemple /support/dreamweaver/contents.html).
Dreamweaver vous permet de choisir aisément le type de chemin à créer pour vos liens.
Remarque : Il est préférable d'utiliser le type de lien qui vous convient le mieux, qu'il soit relatif à la racine du site ou
au document. L'exploration des liens, contrairement à la saisie des chemins, garantit que vous entrez toujours le
chemin correct.
Voir aussi
« Définition du chemin relatif des nouveaux liens » à la page 287
« Création d'un nouveau site » à la page 40
Dernière mise à jour le 4/5/2011
283
UTILISATION DE DREAMWEAVER
Liens et navigation
Chemins absolus
Les chemins absolus indiquent l'URL complète du document lié, y compris le protocole à utiliser (en général http://
pour les pages Web), par exemple, http://www.adobe.com/support/dreamweaver/contents.html. Pour un actif de type
image, l'URL entière peut ressembler à http://www.adobe.com/support/dreamweaver/images/image1.jpg.
Vous devez utiliser un chemin absolu lorsque vous créez un lien vers un document ou un actif situé en dehors du site
courant. Vous pouvez également utiliser des liens de chemins absolus pour les liens locaux (vers des documents sur le
même site), mais cette approche est déconseillée. Si vous déplacez le site vers un autre domaine, tous les liens de
chemins absolus locaux seront rompus. De plus, l'utilisation de chemins relatifs pour les liens locaux offre une plus
grande souplesse si vous devez déplacer des fichiers au sein de votre site.
Remarque : Lors de l'insertion d'images (et non de liens), vous pouvez utiliser un chemin absolu vers une image qui réside
sur un serveur distant (c'est-à-dire, une image qui n'est pas disponible sur le disque dur local).
Chemins relatifs au document
Les chemins relatifs au document sont généralement préférables pour les liens locaux dans la plupart des sites Web. Ils
sont particulièrement utiles lorsque le document actif et le document ou l'actif cible du lien se trouvent dans le même
dossier et le resteront vraisemblablement. Vous pouvez également utiliser un chemin relatif au document ou à l'actif
pour pointer sur un document situé dans un autre dossier, en indiquant le chemin entre le document actif et le
document lié, au sein de la hiérarchie de dossiers.
Indiquer un chemin relatif au document consiste tout simplement à laisser de côté la partie du chemin absolu qui est
identique pour le document actuel et le document ou l'actif lié, en n'indiquant que la partie du chemin qui diffère.
Par exemple, supposons que la structure de votre site soit la suivante :
my_site (dossier racine)
Support technique
contents.html
hours.html
Ressources
tips.html
Produits
catalog.html
index.html (page d'accueil)
• Pour établir un lien depuis contents.html vers hours.html (ces deux fichiers sont dans le même dossier), utilisez le
chemin relatif hours.html :
• Pour établir un lien de contents.html vers tips.html (qui se trouve dans le sous-dossier « resources »), utilisez le
chemin relatif resources/tips.html. A chaque barre oblique (/), vous descendez d'un niveau dans la hiérarchie des
dossiers.
• Pour établir un lien de contents.html vers index.html (qui se trouve dans le dossier parent, un niveau au-dessus de
contents.html), utilisez le chemin relatif ../index.html. Deux points et une barre oblique (../) permettent de
remonter d'un niveau dans la hiérarchie des dossiers.
• Pour établir un lien de contents.html vers catalog.html (qui se trouve dans un autre sous-dossier du dossier parent),
utilisez le chemin relatif ../products/catalog.html. Ici, la séquence ../ fait remonter au dossier parent, et products/
fait redescendre dans le sous-dossier « products ».
Dernière mise à jour le 4/5/2011
284
UTILISATION DE DREAMWEAVER
Liens et navigation
Lorsque vous déplacez des fichiers sous la forme d'un groupe (par exemple, lorsque vous déplacez un dossier entier,
afin que tous les fichiers au sein de ce dossier conservent les mêmes chemins relatifs entre eux), il n'est pas
nécessaire de mettre à jour les liens relatifs au document entre ces fichiers. Toutefois, si vous déplacez
individuellement un fichier qui contient des liens relatifs au document, ou un fichier sur lequel pointe un lien relatif
à partir d'un autre document, il est nécessaire de mettre ces liens à jour (si vous déplacez ou renommez des fichiers
dans le panneau Fichiers, Dreamweaver met automatiquement à jour tous les liens concernés).
Chemins relatifs à la racine du site
Les chemins relatifs à la racine du site représentent le chemin d'accès à un document à partir du dossier racine du site.
Ces chemins peuvent être utiles si vous travaillez sur un grand site Web qui utilise plusieurs serveurs ou un seul serveur
qui est l'hôte de plusieurs sites. Toutefois, si vous n'êtes pas familier avec ce type de chemin, adoptez plutôt les chemins
relatifs au document.
Un chemin relatif à la racine commence par une barre oblique, qui représente le dossier racine du site. Par exemple,
/support/tips.html est le chemin relatif à la racine d'un fichier (tips.html) situé dans le sous-dossier « support » de la
racine du site.
Un chemin relatif à la racine représente souvent le meilleur moyen d'indiquer les liens si vous déplacez fréquemment
des fichiers HTML d'un dossier à un autre dans votre site Web. Lorsque vous déplacez un document qui contient des
liens relatifs à la racine du site, il n'est pas nécessaire de modifier les liens, car les liens sont relatifs à la racine du site,
et non au document lui-même. Par exemple, si vos fichiers HTML utilisent des liens relatifs à la racine du site pour les
fichiers dépendants (les images en particulier), les liens des fichiers dépendants restent valides si vous déplacez les
fichiers HTML.
Toutefois, si vous déplacez ou renommez les documents sur lesquels pointent des liens relatifs à la racine du site, vous
devrez mettre ces liens à jour, même si les chemins relatifs de ces documents entre eux n'ont pas changé. Par exemple,
si vous déplacez un dossier, vous devez mettre à jour tous les liens relatifs à la racine du site vers les fichiers que ce
dossier contient (si vous déplacez ou renommez des fichiers dans le panneau Fichiers, Dreamweaver met
automatiquement à jour tous les liens concernés).
Etablissement de liens
Liens entre fichiers et documents
Avant de créer des liens, assurez-vous de bien comprendre le fonctionnement des chemins relatifs au document, des
chemins relatifs à la racine du site et des chemins absolus. Vous pouvez créer plusieurs types de liens dans un
document :
• Un lien vers un autre document ou fichier, tel que le fichier d'une image, d'une animation ou d'un son
• Un lien vers une ancre nommée, qui permet de sauter à un emplacement spécifique au sein d'un document
• Un lien de courriel, qui crée un courriel vierge avec l'adresse du destinataire déjà indiquée.
• Des liens nuls et de script, qui permettent d'affecter des comportements à un objet ou de créer un lien qui exécute
un code JavaScript
Utilisez l'inspecteur Propriétés et l'icône Pointer vers un fichier pour créer des liens à partir d'une image, d'un objet ou
de texte vers un autre document ou fichier.
Dreamweaver crée les liens vers d'autres pages de votre site à l'aide de chemins relatifs au document. Vous pouvez
toutefois demander à Dreamweaver de créer les nouveaux liens à l'aide de chemins relatifs à la racine du site.
Dernière mise à jour le 4/5/2011
285
UTILISATION DE DREAMWEAVER
Liens et navigation
Important : Il est conseillé de toujours enregistrer un nouveau fichier avant de créer un chemin relatif au document, car
ce dernier n'est pas valide sans point de départ bien défini. Si vous créez un chemin relatif au document avant
d'enregistrer le fichier, Dreamweaver utilise provisoirement un chemin absolu commençant par file:// jusqu'à ce que le
fichier soit enregistré. Dreamweaver convertit alors le chemin file:// en chemin relatif.
Vous trouverez un didacticiel consacré à la création de liens à l'adresse www.adobe.com/go/vid0149_fr.
Voir aussi
« Chemins absolus, relatifs au documents et relatifs à la racine du site » à la page 282
Didacticiel de création de liens
Association de comportements JavaScript à des liens
Vous pouvez associer un comportement à n'importe quel lien d'un document. Les comportements décrits ci-dessous
peuvent être très intéressants lorsque vous insérez des éléments liés dans vos documents.
Texte de la barre d'état Permet de spécifier le texte d'un message et de l'afficher dans la barre d'état dans la partie
inférieure gauche de la fenêtre du navigateur. Par exemple, vous pouvez utiliser ce comportement pour décrire la
destination d'un lien dans la barre d'état, au lieu d'afficher l'URL associée
Ouvrir la fenêtre Navigateur Ouvre une URL dans une nouvelle fenêtre. Vous pouvez spécifier les propriétés de la
nouvelle fenêtre, notamment son nom, sa taille et ses attributs (redimensionnable ou non, dispose d'une barre de menu
ou non, etc.).
Menu de reroutage modifie un menu de reroutage. Vous pouvez modifier la liste du menu, spécifier un fichier lié
différent ou changer l'emplacement du navigateur dans lequel ouvrir le document lié.
Voir aussi
« Application de comportements Dreamweaver intégrés » à la page 363
Création d'un lien vers des documents à l'aide de l'inspecteur Propriétés
Vous pouvez utiliser l'icône de dossier de l'inspecteur Propriétés ou la zone Lien pour créer des liens à partir d'une
image, un objet, du texte ou tout autre document ou fichier.
1 Sélectionnez le texte ou une image dans la fenêtre de document en mode Création.
2 Ouvrez l'inspecteur Propriétés (Fenêtre > Propriétés) et procédez de l'une des manières suivantes :
• Cliquez sur l'icône représentant un dossier
située à droite de la zone Lien pour rechercher et sélectionner un
fichier.
Le chemin d'accès du document pointé par le lien s'affiche dans la zone URL. Utilisez le menu déroulant Relatif à dans
la boîte de dialogue Sélectionner fichier HTML pour spécifier si le chemin est relatif à la racine ou au document, puis
cliquez sur Sélectionner. Le type de chemin sélectionné ne s'applique qu'au lien actif. Vous pouvez modifier le
paramètre par défaut de la zone Relatif à pour le site.
• Tapez le chemin et le nom de fichier du document dans la zone Lien.
Pour créer un lien vers un document de votre site, indiquez un chemin relatif au document ou à la racine du site. Pour
créer un lien vers un document situé en dehors du site, indiquez un chemin absolu, avec le type de protocole (par
exemple, http://). Vous pouvez utiliser cette approche pour entrer un lien vers un fichier n'ayant pas encore été créé.
3 Dans le menu déroulant Cible, sélectionnez un emplacement dans lequel ouvrir le document :
•
_blank charge le document lié dans une nouvelle fenêtre, sans nom, du navigateur.
Dernière mise à jour le 4/5/2011
286
UTILISATION DE DREAMWEAVER
Liens et navigation
•
_parent charge le document lié dans le cadre parent ou dans la fenêtre parente du cadre contenant le lien. Si le
cadre contenant le lien n'est pas imbriqué, le document lié est chargé dans la fenêtre de base du navigateur.
•
_self charge le document lié dans le même cadre (ou la même fenêtre) que le lien. Il s'agit de la cible par défaut, il
est donc en général inutile de la spécifier.
•
_top charge le document lié dans la fenêtre de base du navigateur, en supprimant tous les cadres.
Si tous les liens de la page doivent être définis sur la même cible, vous pouvez spécifier celle-ci une fois pour toutes en
choisissant la commande Insertion > HTML > Balises d'en-tête > Base et en sélectionnant les informations cible. Pour
plus d'informations sur le ciblage des cadres, voir la section « Contrôle des contenus de cadre avec des liens » à la page 211.
Voir aussi
« Chemins absolus, relatifs au documents et relatifs à la racine du site » à la page 282
Création d'un lien vers des documents en utilisant l'icône Pointer vers un
fichier
1 Sélectionnez le texte ou une image dans la fenêtre de document en mode Création.
2 Créez un lien de l'une des deux façons suivantes :
• Faites glisser l'icône « Pointer vers un fichier »
(icône cible), sur la droite de la zone Lien de l'inspecteur
Propriétés, et pointez sur une ancre visible dans le document actuel, une ancre visible dans un autre document
ouvert, un élément possédant un ID unique ou un document dans le panneau Fichiers.
• Tout en maintenant la touche Maj enfoncée, faites glisser le pointeur de la souris depuis la sélection et pointez sur
une ancre visible dans le document actuel, une ancre visible dans un autre document ouvert, un élément possédant
un ID unique ou un document dans le panneau Fichiers.
Remarque : Vous pouvez créer un lien vers un autre document ouvert à condition que vos documents ne soient pas
agrandis dans la fenêtre de document. Pour afficher les documents en mosaïque, sélectionnez Fenêtre > Cascade ou
Fenêtre > Mosaïque. Lorsque vous pointez vers un document ouvert, celui-ci passe au premier plan de votre écran
pendant que vous effectuez votre sélection.
Voir aussi
« Création d'un lien vers un emplacement spécifique au sein d'un document » à la page 288
Ajout d'un lien en utilisant la commande Hyperlien
La commande Hyperlien vous permet de créer un lien vers une image, un objet ou vers un autre document ou fichier.
1 Placez le curseur à l'endroit du document où vous souhaitez que le lien apparaisse.
2 Procédez de l'une des manières suivantes pour afficher la boîte de dialogue Hyperlien :
• Choisissez Insertion > Hyperlien.
• Dans la catégorie Commun du panneau Insertion, cliquez sur le bouton Hyperlien.
3 Tapez le texte du lien et, après la zone Lien, tapez le nom du fichier vers lequel un lien va être établi (ou cliquez sur
l'icône du dossier
pour rechercher le fichier).
4 Dans le menu déroulant Cible, choisissez la fenêtre dans laquelle le fichier devra s'ouvrir ou tapez son nom
Dernière mise à jour le 4/5/2011
287
UTILISATION DE DREAMWEAVER
Liens et navigation
Les noms de tous les cadres du document actif apparaissent dans la liste déroulante. Si vous spécifiez un cadre
inexistant, la page liée s'ouvre dans une nouvelle fenêtre portant le nom que vous avez spécifié. Vous pouvez également
choisir parmi les noms de cible réservés suivants :
•
_blank charge le fichier lié dans une nouvelle fenêtre, sans nom, du navigateur.
•
_parent charge le fichier lié dans le jeu de cadres parent, ou dans la fenêtre parente du cadre contenant le lien. Si
le cadre contenant le lien n'est pas imbriqué, le document lié sera chargé dans la fenêtre de base du navigateur.
•
_self charge le fichier lié dans le même cadre, ou dans la même fenêtre, que le lien. Cette cible étant celle par
défaut, vous n'avez généralement pas à la spécifier.
•
_top charge le fichier lié dans la fenêtre de base du navigateur, supprimant ainsi tous les cadres.
5 Dans la zone Ordre des tabulations, tapez une valeur correspondant à l'ordre de l'onglet.
6 Dans la zone Titre, tapez un titre pour le lien.
7 Dans la zone Clé d'accès, tapez une équivalence de clavier (une lettre) pour sélectionner le lien dans le navigateur.
8 Cliquez sur OK.
Définition du chemin relatif des nouveaux liens
Par défaut, Dreamweaver crée les liens vers d'autres pages de votre site à l'aide de chemins relatifs au document. Pour
utiliser des chemins relatifs à la racine, vous devez d'abord définir un dossier local dans Dreamweaver en choisissant
un dossier racine local qui servira d'équivalent à la racine des documents sur le serveur. Dreamweaver utilise ce dossier
pour déterminer les chemins relatifs à la racine pointant vers des fichiers.
1 Choisissez Site > Gérer les sites.
2 Dans la boîte de dialogue Gérer les sites, double-cliquez sur votre site dans la liste.
3 Dans la boîte de dialogue Configuration du site, développez Paramètres avancés, puis sélectionnez la catégorie Infos
locales.
4 Définissez le chemin relatif des nouveaux liens en sélectionnant l'option Document ou Racine du site.
Lorsque vous cliquez sur OK, la modification de ce paramètre ne convertit pas le chemin des liens existants. Le
paramètre ne s'applique qu'aux nouveaux liens créés avec Dreamweaver.
Remarque : Le contenu lié à un chemin relatif à la racine n'apparaît pas lorsque vous lancez l'aperçu de documents dans
un navigateur local, sauf si vous spécifiez un serveur de test ou activez l'option Aperçu à l'aide d'un fichier temporaire
dans Edition > Préférences > Aperçu dans le navigateur. En effet, à la différence des serveurs, les navigateurs ne
reconnaissent pas les racines de sites. Un moyen rapide de lancer l'aperçu d'un contenu lié à des chemins relatifs à la
racine consiste à placer le fichier sur un serveur distant, puis à sélectionner Fichier > Aperçu dans le navigateur.
5 Cliquez sur Enregistrer.
Le paramètre du nouveau chemin ne s'applique qu'au site actif.
Voir aussi
« Chemins absolus, relatifs au documents et relatifs à la racine du site » à la page 282
« Création d'un nouveau site » à la page 40
Dernière mise à jour le 4/5/2011
288
UTILISATION DE DREAMWEAVER
Liens et navigation
Création d'un lien vers un emplacement spécifique au sein d'un document
Vous pouvez utiliser l'inspecteur Propriétés pour établir un lien vers une section donnée d'un document en créant au
préalable des ancres nommées. Les ancres nommées permettent de définir des marqueurs dans un document et sont
souvent placées au niveau d'une rubrique spécifique ou en haut d'un document. Vous pouvez ensuite créer des liens
vers ces ancres nommées, qui amènent rapidement le visiteur à la position spécifiée.
La création d'un lien vers une ancre nommée s'effectue en deux étapes : il faut d'abord créer l'ancre nommée, puis créer
un lien pointant sur elle.
Remarque : Vous ne pouvez pas placer d'ancre nommée dans un élément PA (à positionnement absolu).
Création d'une ancre nommée
1 Dans la fenêtre de document, en mode Création, placez le curseur à l'endroit où insérer l'ancre nommée.
2 Effectuez l'une des opérations suivantes :
• Choisissez Insertion > Ancre nommée.
• Appuyez sur Ctrl+A (Windows) ou Commande+Option+A (Macintosh).
• Dans la catégorie Commun du panneau Insertion, cliquez sur le bouton Ancre nommée.
3 Dans la zone Ancre nommée, entrez le nom de l'ancre puis cliquez sur OK (le nom de l'ancre ne peut pas contenir
d'espaces).
Le marqueur de l'ancre apparaît au niveau du point d'insertion.
Remarque : Si vous ne voyez pas le marqueur de l'ancre, choisissez Affichage > Assistances visuelles > Eléments invisibles.
Création d'un lien vers une ancre nommée
1 Dans la fenêtre de document en mode Création, sélectionnez le texte ou l'image à partir desquels créer le lien.
2 Dans la zone Lien de l'inspecteur Propriétés, tapez le signe dièse (#) et le nom de l'ancre. Par exemple, pour créer
un lien vers une ancre nommée « début » dans le document actif, tapez #top. Pour créer un lien vers une ancre
nommée «début» dans un autre document figurant dans le même dossier, tapez filename.html#top.
Remarque : La casse (majuscules/minuscules) est importante dans les noms d'ancre.
Création d'un lien vers une ancre nommée à l'aide de la méthode Pointer vers un fichier
1 Ouvrez le document contenant l'ancre nommée.
Remarque : Choisissez Affichage > Assistances visuelles > Eléments invisibles pour faire apparaître l'ancre, le cas
échéant.
2 Dans la fenêtre de création du document, sélectionnez le texte ou l'image à partir desquels créer le lien (s'il s'agit
d'un autre document ouvert, vous devez basculer sur celui-ci).
3 Effectuez l'une des opérations suivantes :
• Cliquez sur l'icône du pointeur
(icône cible) à droite de la zone Lien de l'inspecteur Propriétés et faites-la glisser
sur l'ancre vers laquelle vous souhaitez créer un lien, dans le même document ou dans tout autre document ouvert.
• En maintenant la touche Maj enfoncée, dans la fenêtre de document, faites glisser l'image ou le texte sélectionné :
sur l'ancre vers laquelle vous souhaitez créer un lien, dans le même document ou dans tout autre document ouvert.
Dernière mise à jour le 4/5/2011
289
UTILISATION DE DREAMWEAVER
Liens et navigation
Création d'un lien de courriel
Un lien de courriel ouvre une nouvelle fenêtre de message (dans le programme de messagerie associé au navigateur de
l'utilisateur) lorsque l'utilisateur clique dessus. La zone A : de la fenêtre du courriel est automatiquement complétée
par l'adresse indiquée dans le lien.
Création d'un lien de courriel à l'aide de la commande Insertion - Lien de messagerie
1 Dans la fenêtre de document, placez le curseur à l'endroit où afficher le lien de courriel ou sélectionnez le texte ou
l'image qui doit représenter ce lien.
2 Procédez de l'une des manières suivantes pour insérer le lien :
• Choisissez Insertion > Lien de messagerie.
• Dans la catégorie Commun du panneau Insertion, cliquez sur le bouton Lien de messagerie.
3 Dans la zone Texte, saisissez ou modifiez le corps du courriel.
4 Dans la zone Adresse électronique, tapez l'adresse électronique, puis cliquez sur OK.
Création d'un lien de courriel à l'aide de l'inspecteur Propriétés
1 Sélectionnez le texte ou une image dans la fenêtre de document en mode Création.
2 Dans la zone Lien de l'inspecteur Propriétés, tapez mailto: suivi d'une adresse électronique.
N'insérez pas d'espaces entre le signe deux points et l'adresse électronique.
Remplissage automatique de la ligne d'objet d'un courriel
1 Créez un lien de courriel à l'aide de l'inspecteur Propriétés, comme expliqué ci-dessus.
2 Dans la zone Lien de l'inspecteur Propriétés, ajoutez ?subject= après l'adresse de courriel, puis entrez un objet
après le signe « égal à ». N'ajoutez pas d'espaces entre le point d'interrogation et la fin de l'adresse de courriel.
L'entrée entière doit se présenter comme suit :
mailto:[email protected]?subject=Message de notre site
Création de liens nuls et de liens de script
Un lien nul est un lien non désigné. Utilisez des liens nuls pour attacher des comportements à des objets ou du texte
sur une page. Par exemple, vous pouvez attacher un comportement à un lien nul pour intervertir une image ou afficher
un élément PA lorsque le pointeur passe au-dessus du lien.
Les liens de script exécutent un code JavaScript ou appellent une fonction JavaScript et permettent de fournir aux
utilisateurs des informations supplémentaires sur un élément sans quitter la page en cours. Les liens de scripts
permettent également d'exécuter des calculs, de valider des formulaires et d'effectuer d'autres tâches de traitement
lorsqu'un visiteur clique sur un élément spécifique.
Voir aussi
« Application d'un comportement » à la page 362
Création d'un lien nul
1 Sélectionnez du texte, un objet ou une image dans la fenêtre de document en mode Création.
2 Dans l'inspecteur Propriétés, tapez javascript:; (le mot javascript suivi par deux points puis par un point-
virgule) dans la zone Lien.
Dernière mise à jour le 4/5/2011
290
UTILISATION DE DREAMWEAVER
Liens et navigation
Création d'un lien de script
1 Sélectionnez du texte, un objet ou une image dans la fenêtre de document en mode Création.
2 Dans la zone Lien de l'inspecteur Propriétés, tapez javascript: suivi du code JavaScript ou d'un appel de fonction
JavaScript. (N'insérez pas d'espace entre le signe deux points et le code ou l'appel.)
Mise à jour automatique des liens
Dreamweaver peut mettre à jour les liens vers un document et à partir de ce dernier lorsque vous le déplacez ou
renommez au sein d'un site local. Cette fonction fonctionne de façon optimale lorsqu'un site tout entier (ou une section
entière de celui-ci) est stocké sur votre disque dur local. Dreamweaver ne modifie pas les fichiers du dossier distant
avant que vous y placiez les fichiers locaux ou que vous les archiviez dans le serveur distant.
Pour accélérer le processus de mise à jour, Dreamweaver peut créer un fichier cache dans lequel il conservera la liste
de tous les liens du site local. Le fichier cache est mis à jour chaque fois que vous ajoutez, modifiez ou supprimez des
liens sur votre site local.
Activation de la mise à jour automatique des liens
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
2 Dans la boîte de dialogue Préférences, sélectionnez la catégorie Général dans la liste de gauche.
3 Dans la section Options de document des préférences Général, sélectionnez une option dans le menu déroulant
Mettre à jour les liens lors du déplacement de fichiers.
Toujours Met automatiquement à jour tous les liens vers un document sélectionné et à partir de ce dernier lorsque
vous le déplacez ou le renommez
Jamais Ne met pas automatiquement à jour tous les liens vers un document sélectionné et à partir de ce dernier
lorsque vous le déplacez ou le renommez.
Invite Affiche d'abord une boîte de dialogue qui répertorie tous les fichiers affectés par le changement. Cliquez sur
Mettre à jour pour mettre à jour les liens de ces fichiers, ou sur Ne pas mettre à jour pour laisser les fichiers intacts.
4 Cliquez sur OK.
Création d'un fichier cache pour votre site
1 Choisissez Site > Gérer les sites.
2 Sélectionnez un site, puis cliquez sur Modifier.
3 Dans la boîte de dialogue Configuration du site, développez Paramètres avancés, puis sélectionnez la catégorie Infos
locales.
4 Dans la catégorie Infos locales, sélectionnez l'option Activer le cache.
Après avoir lancé Dreamweaver, la première fois que vous modifiez ou supprimez des liens vers des fichiers de votre
dossier local, Dreamweaver vous invite à charger le cache. Si vous cliquez sur Oui, Dreamweaver charge le cache et met
à jour tous les liens vers le fichier que vous venez de modifier. Si vous cliquez sur le bouton Non, la modification est
consignée dans le cache, mais Dreamweaver ne charge pas le cache et ne met pas les liens à jour.
Sur les sites de grande taille, le chargement du cache peut prendre quelques minutes du fait que Dreamweaver doit
déterminer si le cache est périmé en comparant l'heure et la date des fichiers qui se trouvent sur le site local à celles
enregistrées dans le cache. Si vous n'avez pas modifié de fichiers hors de Dreamweaver, vous pouvez cliquer sur le
bouton d'arrêt en toute sécurité lorsque le bouton apparaît.
Dernière mise à jour le 4/5/2011
291
UTILISATION DE DREAMWEAVER
Liens et navigation
Récréation du cache
❖ Dans le panneau Fichiers, sélectionnez Site > Avancé > Recréer le cache du site.
Modification d'un lien au niveau du site
Outre la mise à jour automatique des liens que Dreamweaver effectue chaque fois que vous déplacez ou renommez un
fichier, vous pouvez modifier manuellement tous les liens (y compris les liens de messagerie électronique, ftp, nuls et
de scripts) pour qu'ils pointent sur un autre chemin.
Cette option est surtout utile lorsque vous souhaitez supprimer un fichier auquel d'autres fichiers sont liés, mais
pouvez l'utiliser à d'autres fins. Par exemple, supposons que vous ayez établi un lien entre les mots « films du mois » et
/films/juillet.html dans l'ensemble de votre site. Le 1er août, vous voudrez modifier ces liens pour qu'ils pointent vers
/films/aout.html.
1 Sélectionnez un fichier dans l'affichage local du panneau Fichiers.
Remarque : Si vous changez un lien de messagerie électronique, ftp, nul ou de script, vous n'avez pas besoin de
sélectionner de fichier.
2 Choisissez Site > Modifier le lien au niveau du site.
3 Complétez les options suivantes dans la boîte de dialogue Modifier le lien au niveau du site :
Modifier tous les liens à Cliquez sur l'icône du dossier
à parcourir et sélectionnez le fichier cible vers lequel les
liens doivent être rompus. Si vous changez un lien de messagerie électronique, ftp, nul ou de script, tapez le texte
complet du lien à changer.
En liens à to Cliquez sur l'icône de dossier
à parcourir et sélectionnez le nouveau fichier vers lequel établir un lien.
Si vous changez un lien de messagerie électronique, ftp, nul ou de script, tapez le texte complet du lien de
remplacement.
4 Cliquez sur OK.
Dreamweaver met à jour tous les documents qui pointent vers le fichier sélectionné, en les faisant pointer vers le
nouveau fichier suivant le format de chemin d'accès existant (par exemple, si l'ancien chemin était relatif au document,
le nouveau l'est également).
Lorsqu'un lien a été changé au niveau de tout le site, le fichier sélectionné devient orphelin (plus aucun fichier du
disque local ne pointe vers lui). Vous pouvez le supprimer en toute sécurité sans risque d'altérer des liens sur le site
local Dreamweaver.
Important : Ces modifications se produisant localement, vous devez supprimer manuellement le fichier orphelin
correspondant dans le dossier distant et placer ou archiver tous les fichiers dans lesquels les liens ont été modifiés, sinon
les visiteurs ne pourront pas visualiser les modifications.
Test de liens dans Dreamweaver
Les liens ne sont pas actifs dans Dreamweaver ; c'est-à-dire que vous ne pouvez pas ouvrir les documents liés en
cliquant sur le lien dans la fenêtre de document.
❖ Effectuez l'une des opérations suivantes :
• Sélectionnez le lien et choisissez Modifier > Ouvrir la page liée.
• Appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh), puis double-cliquez sur le lien.
Remarque : Le document lié doit résider sur le disque local.
Dernière mise à jour le 4/5/2011
292
UTILISATION DE DREAMWEAVER
Liens et navigation
Voir aussi
« Recherche de liens rompus, externes et orphelins » à la page 296
« Correction de liens rompus » à la page 297
Menus de reroutage
Insertion de menus de reroutage
Un menu de reroutage est un menu déroulant dans un document, visible pour tous les visiteurs du site et répertoriant
les liens vers des documents ou des fichiers. Vous pouvez créer des liens vers des documents de votre site Web ou d'un
autre site, des liens de messagerie électronique, des liens vers des images ou vers tout type de fichier pouvant être ouvert
dans un navigateur.
Chaque option d'un menu de reroutage est associée à une URL. Lorsque les utilisateurs choisissent une option, ils sont
redirigés (« reroutés ») vers l'URL associée. Ces menus sont insérés à l'aide de l'objet de formulaire Menu de reroutage.
Un menu de reroutage peut comporter trois composants :
• (Facultatif) Une invite de sélection au sein du menu, par exemple une description de catégorie pour les éléments
du menu ou des instructions, du type « Faites votre choix ».
• (Obligatoire) Une liste d'éléments de menu de reroutage : l'utilisateur choisit une option et le document ou le fichier
lié s'affiche.
• (Facultatif) Un bouton Aller.
Voir aussi
« Application du comportement Menu de reroutage » à la page 368
« Application du comportement Menu de reroutage Aller » à la page 368
Insertion d'un menu de reroutage
1 Ouvrez un document, puis placez le curseur dans la fenêtre de document.
2 Effectuez l'une des opérations suivantes :
• Choisissez Insertion > Formulaire > Menu de reroutage.
• Cliquez sur le bouton Menu de reroutage de la catégorie Formulaires du panneau Insertion.
3 Complétez les options de la boîte de dialogue Insérer menu de reroutage, puis cliquez sur OK. Voici une liste
partielle des options :
Boutons Plus (+) et Moins (-) Cliquez sur Plus pour insérer un élément ; cliquez à nouveau sur Plus pour en ajouter un
autre. Pour supprimer un élément, sélectionnez-le et cliquez sur Moins.
Boutons fléchés Sélectionnez un élément et cliquez sur les boutons fléchés pour le déplacer vers le haut ou le bas de la
liste.
Texte Tapez le nom d'un élément sans nom. Si votre menu contient une invite de sélection (telle que « Faites votre
choix »), tapez-la ici en tant que premier élément de menu (dans ce cas, vous devez aussi sélectionner l'option
Sélectionner le premier élément après le changement d'URL située en bas).
Si sélectionné, aller à l'URL Naviguez jusqu'au fichier cible ou tapez son chemin.
Dernière mise à jour le 4/5/2011
293
UTILISATION DE DREAMWEAVER
Liens et navigation
Ouvrir les URL dans Spécifiez si le fichier doit être ouvert dans la même fenêtre ou dans un cadre. Si le cadre à désigner
comme cible n'apparaît pas dans le menu déroulant, fermez la boîte de dialogue Insérer menu de reroutage, puis
donnez un nom au cadre.
Menu Insérer bouton Aller après Choisissez d'insérer un bouton Aller au lieu d'une invite de sélection de menu.
Sélectionner le premier élément après le changement d'URL Sélectionnez cette option si vous avez inséré une invite de
sélection de menu (« Faites votre choix ») en tant que premier élément du menu.
Voir aussi
« Affichage et définition des des propriétés et des attributs de cadre » à la page 208
Modification des éléments d'un menu de reroutage
Vous pouvez modifier l'ordre des éléments dans le menu ou le fichier auquel un élément est lié, et vous pouvez ajouter,
supprimer ou renommer un élément.
Pour modifier l'emplacement d'ouverture d'un fichier lié ou pour ajouter ou modifier une invite de sélection de menu,
vous devez appliquer le comportement Menu de reroutage du panneau Comportements.
1 Ouvrez l'inspecteur Propriétés (Fenêtre > Propriétés), s'il n'est pas déjà ouvert.
2 Dans la fenêtre de création du document, cliquez sur l'objet Menu de reroutage pour le sélectionner.
3 Dans l'inspecteur Propriétés, cliquez sur le bouton Valeurs de la liste.
4 Utilisez la boîte de dialogue Valeurs de la liste pour apporter vos modifications aux éléments de menu et cliquer sur OK.
Voir aussi
« Application du comportement Menu de reroutage » à la page 368
Dépannage des menus de reroutage
Lorsqu'un élément de menu a été sélectionné, il n'est plus possible de le sélectionner à nouveau si le visiteur revient à
cette page ou si la zone Ouvrir les URL dans pointe sur un cadre. Il existe deux méthodes pour contourner ce
problème :
• Utiliser une invite de sélection au sein du menu, par exemple une catégorie ou une instruction, du type « Faites
votre choix ». Une invite de sélection au sein du menu est resélectionnée après chaque sélection.
• Utiliser un bouton Aller, qui permet à l'utilisateur de visiter à nouveau le lien déjà sélectionné. Lorsque vous utilisez
un bouton Aller associé à un menu de reroutage, le bouton Aller devient le seul mécanisme permettant à l'utilisateur
d'accéder à l'URL associée à la sélection dans le menu. La sélection d'un élément de menu dans le menu de reroutage
n'a plus pour effet de rediriger l'utilisateur automatiquement vers une autre page ou un autre cadre.
Remarque : Dans la boîte de dialogue Insérer menu de reroutage, vous ne devez sélectionner qu'une option pour
chaque menu de reroutage, car elles s'appliquent à la totalité du menu de reroutage.
Barres de navigation
A propos des barres de navigation
La fonctionnalité de barre de navigation a été abandonnée depuis Dreamweaver CS5.
Dernière mise à jour le 4/5/2011
294
UTILISATION DE DREAMWEAVER
Liens et navigation
Adobe recommande d'employer le widget Spry Barre de menus pour créer une barre de navigation.
Voir aussi
« Utilisation du widget Barre de menus » à la page 443
Cartes graphiques
A propos des cartes graphiques
Une carte graphique est une image ayant été divisée en régions appelées zones réactives. Lorsque vous cliquez sur une
zone réactive, une action est exécutée, par exemple, l'ouverture d'un nouveau fichier.
Les cartes graphiques côté client stockent les informations relatives aux liens hypertextes dans le document HTML,
alors que les cartes graphiques côté serveur conservent ces informations dans un fichier de carte séparé. Lorsqu'un
visiteur de site clique sur une zone réactive dans l'image, l'URL associée est envoyée directement au serveur. Ceci rend
les cartes graphiques côté client plus rapides que leurs équivalents sur le serveur, car celui-ci n'a pas à interpréter les
coordonnées du point sur lequel l'utilisateur a cliqué. Les cartes graphiques côté client sont prises en charge par
Netscape Navigator à partir de sa version 2.0, par NCSA Mosaic 2.1 et 3.0, et par toutes les versions de Microsoft
Internet Explorer.
Dreamweaver ne modifie pas les références aux cartes graphiques sur le serveur, dans les documents existants. Vous
pouvez utiliser les cartes graphiques côté client et côté serveur dans le même document. Les navigateurs qui prennent
en charge les deux types de cartes donnent la priorité aux cartes graphiques côté client. Pour inclure une carte
graphique sur le serveur dans un document, vous devez écrire le code HTML approprié.
Insertion de cartes graphiques côté client
Pour insérer une carte graphique côté client, créez une zone réactive, puis définissez un lien qui s'ouvre lorsqu'un
utilisateur clique sur la zone réactive.
Remarque : Vous pouvez créer plusieurs zones réactives, mais elles font toutes partie de la même carte graphique.
1 Sélectionnez l'image dans la fenêtre de document.
2 Dans l'inspecteur Propriétés, cliquez sur la flèche d'agrandissement située dans le coin inférieur droit pour
visualiser toutes les propriétés.
3 Dans la zone Nom de la carte, entrez un nom unique pour la carte graphique. Si vous utilisez plusieurs cartes
graphiques dans le même document, veillez à donner à chaque carte un nom unique.
4 Pour définir les zones de la carte graphique, procédez de l'une des manières suivantes :
• Sélectionnez l'outil Cercle
• Sélectionnez l'outil Rectangle
et faites glisser le pointeur sur l'image pour créer une zone réactive circulaire.
et faites glisser le pointeur sur l'image pour créer une zone réactive rectangulaire.
• Sélectionnez l'outil Polygone
pour définir une zone réactive de forme irrégulière en cliquant pour chaque point
de segment de droite. Cliquez sur l'outil Flèche pour fermer la forme.
Après avoir créé la zone réactive, l'inspecteur Propriétés de cette zone apparaît.
5 Dans la zone Lien de l'inspecteur Propriétés de la zone réactive, cliquez sur l'icône du dossier
pour rechercher
le fichier à ouvrir lorsque l'utilisateur clique sur la zone réactive, ou tapez le chemin.
6 Dans le menu déroulant Cible, choisissez la fenêtre dans laquelle le fichier devra s'ouvrir ou tapez son nom
Dernière mise à jour le 4/5/2011
295
UTILISATION DE DREAMWEAVER
Liens et navigation
Les noms de tous les cadres du document actif apparaissent dans la liste déroulante. Si vous spécifiez un cadre
inexistant, la page liée est chargée dans une nouvelle fenêtre portant le nom que vous avez spécifié. Vous pouvez
également choisir parmi les noms de cible réservés suivants :
•
_blank charge le fichier lié dans une nouvelle fenêtre, sans nom, du navigateur.
•
_parent charge le fichier lié dans le jeu de cadres parent, ou dans la fenêtre parente du cadre contenant le lien. Si
le cadre contenant le lien n'est pas imbriqué, le document lié sera chargé dans la fenêtre de base du navigateur.
•
_self charge le fichier lié dans le même cadre, ou dans la même fenêtre, que le lien. Cette cible étant celle par
défaut, vous n'avez généralement pas à la spécifier.
•
_top charge le fichier lié dans la fenêtre de base du navigateur, supprimant ainsi tous les cadres.
Remarque : L'option Cible n'est disponible que lorsque la zone réactive sélectionnée contient un lien.
7 Dans la zone Alt, tapez un texte secondaire à afficher dans les navigateurs qui affichent seulement du texte ou qui
téléchargent les images manuellement. Certains navigateurs affichent ce texte sous forme d'une info-bulle lorsque
l'utilisateur fait passer le pointeur de la souris au-dessus de la zone réactive.
8 Répétez les étapes 4 à 7 pour définir d'autres zones réactives dans la carte graphique.
9 Une fois la définition de la carte de l'image terminée, cliquez sur une zone vierge du document pour modifier
l'inspecteur Propriétés.
Modification des zones réactives d'une carte graphique
Vous pouvez facilement modifier les zones réactives que vous créez dans une carte graphique. Vous pouvez déplacer
un groupe de zones réactives, redimensionner des zones réactives ou déplacer une zone réactive vers l'avant ou l'arrière
dans un élément à positionnement absolu.
Vous pouvez également copier une image contenant des zones réactives d'un document vers un autre ou copier une
ou plusieurs zones réactives d'une image et les coller vers une autre image. Les zones réactives associées à l'image sont
également copiées vers le nouveau document.
Sélection de plusieurs zones réactives dans une carte graphique
1 Utilisez le pointeur de zone réactive pour sélectionner une zone réactive.
2 Effectuez l'une des opérations suivantes :
• En maintenant la touche Maj enfoncée, cliquez tour à tour sur les autres zones réactives à sélectionner.
• Appuyez sur les touches Ctrl+A (Windows) ou Commande+A (Macintosh) pour sélectionner toutes les zones
réactives.
Déplacement d'une zone réactive
1 Utilisez le pointeur de zone réactive pour sélectionner la zone réactive.
2 Effectuez l'une des opérations suivantes :
• Faites glisser la zone réactive vers une nouvelle zone.
• Utilisez la touche Ctrl et une touche fléchée pour déplacer une zone réactive de 10 pixels dans le sens sélectionné.
• Utilisez les touches fléchées pour déplacer une zone réactive de 1 pixel dans le sens sélectionné.
Redimensionnement d'une zone réactive
1 Utilisez le pointeur de zone réactive
pour sélectionner la zone réactive.
Dernière mise à jour le 4/5/2011
296
UTILISATION DE DREAMWEAVER
Liens et navigation
2 Faites glisser une poignée de sélection de la zone réactive pour modifier la taille ou la forme de celle-ci.
Résolution des problèmes liés aux liens
Recherche de liens rompus, externes et orphelins
Utilisez la fonction Vérifier les liens pour rechercher les liens rompus et les fichiers orphelins (les fichiers qui existent
toujours dans le site mais vers lesquels aucun lien ne pointe dans le site). Vous pouvez faire porter la recherche sur un
fichier ouvert, sur une partie ou sur l'ensemble d'un site local.
Dreamweaver vérifie uniquement les liens qui pointent vers des documents au sein du même site. Dreamweaver dresse
une liste des liens externes qui apparaissent dans le ou les documents sélectionnés, mais ne les vérifie pas.
Vous pouvez identifier et supprimer les fichiers qui ne sont plus utilisés par les autres fichiers de votre site.
Voir aussi
« Identification et suppression des fichiers non utilisés » à la page 83
Vérification des liens au sein du document actif
1 Enregistrez le fichier dans un emplacement de votre site Dreamweaver local.
2 Choisissez Fichier > Vérifier la page > Liens.
Le rapport Liens brisés apparaît dans le panneau Vérificateur de lien (dans le groupe de panneaux Résultats).
3 Dans le panneau Vérificateur de lien, sélectionnez Liens externes dans le menu déroulant Afficher pour afficher un
autre rapport.
Le rapport apparaît dans le panneau Vérificateur de lien (dans le groupe de panneaux Résultats).
Vous pouvez vérifier les fichiers orphelins lorsque vous vérifiez les liens dans un site entier.
4 Pour enregistrer le rapport, cliquez sur le bouton Enregistrer le rapport dans le panneau Vérificateur de lien. Le
rapport est un fichier temporaire ; il sera perdu si vous ne l'enregistrez pas.
Vérification des liens dans une partie d'un site local
1 Dans le panneau Fichiers, choisissez un site dans le menu déroulant Sites en cours.
2 Dans Affichage local, sélectionnez les fichiers ou les dossiers à vérifier.
3 Suivez l'une des procédures suivantes pour accéder aux options :
• Cliquez avec le bouton droit de la souris (Windows) ou en appuyant sur la touche Contrôle (Macintosh) sur l'un
des fichiers sélectionnés et cliquez sur Vérifier les liens > Fichiers/Dossiers sélectionnés dans le menu contextuel.
• Choisissez Fichier > Vérifier la page > Liens.
Le rapport Liens brisés apparaît dans le panneau Vérificateur de lien (dans le groupe de panneaux Résultats).
4 Dans le panneau Vérificateur de lien, sélectionnez Liens externes dans le menu déroulant Afficher pour afficher un
autre rapport.
Le rapport apparaît dans le panneau Vérificateur de lien (dans le groupe de panneaux Résultats).
Dernière mise à jour le 4/5/2011
297
UTILISATION DE DREAMWEAVER
Liens et navigation
Vous pouvez vérifier les fichiers orphelins lorsque vous vérifiez les liens dans un site entier.
5 Pour enregistrer un rapport, cliquez sur le bouton Enregistrer rapport dans le panneau Vérificateur de lien.
Vérification des liens dans tout le site
1 Dans le panneau Fichiers, choisissez un site dans le menu déroulant Sites en cours.
2 Choisissez Site > Vérifier tous les liens du site.
Le rapport Liens brisés apparaît dans le panneau Vérificateur de lien (dans le groupe de panneaux Résultats).
3 Dans le panneau Vérificateur de lien, sélectionnez Liens externes ou Fichiers orphelins dans le menu déroulant
Afficher pour afficher un autre rapport.
Une liste des fichiers correspondant au type du rapport sélectionné s'affiche dans la boîte de dialogue Vérificateur de lien.
Remarque : Si vous avez sélectionné Fichiers orphelins comme type de rapport, vous pouvez directement supprimer des
fichiers orphelins du panneau Vérificateur de lien en sélectionnant un fichier dans la liste et en appuyant sur la touche
Supprimer.
4 Pour enregistrer un rapport, cliquez sur le bouton Enregistrer rapport dans le panneau Vérificateur de lien.
Correction de liens rompus
Une fois le rapport de liens exécuté, vous pouvez corriger les liens rompus et les références d'images directement dans
la boîte de dialogue Vérificateur de lien, ou ouvrir les fichiers de la liste et réparer les liens dans l'inspecteur Propriétés.
Correction de liens dans le panneau Vérificateur de lien
1 Exécutez un rapport de vérification des liens.
2 Sélectionnez le lien rompu dans la colonne Liens brisés (pas dans la colonne Fichiers) du panneau Vérificateur de
lien (dans le groupe de panneaux Résultats).
Une icône de dossier s'affiche à côté du lien rompu.
3 Cliquez sur l'icône de dossier
située en face du lien rompu et naviguez jusqu'au fichier approprié pour le
sélectionner, ou entrez le chemin d'accès et le nom de fichier corrects.
4 Appuyez sur Tab ou Entrée (Windows) ou Retour (Macintosh).
S'il y a d'autres liens rompus vers le même fichier, le système vous invite à réparer également les références dans les
autres fichiers. Cliquez sur Oui pour que Dreamweaver mette à jour tous les documents de la liste faisant référence à
ce fichier. Cliquez sur Non pour que Dreamweaver mette uniquement à jour la référence actuelle.
Remarque : Si l'option Activer l'archivage et l'extraction de fichier est activée pour ce site, Dreamweaver essaie d'extraire
les fichiers qui nécessitent des modifications. S'il ne peut pas extraire un fichier, Dreamweaver affiche un avertissement
et laisse les références rompues inchangées.
Correction de liens dans l'inspecteur Propriétés
1 Exécutez un rapport de vérification des liens.
2 Double-cliquez sur une entrée de la colonne Fichier dans le panneau Vérificateur de lien (dans le groupe de
panneaux Résultats).
Dreamweaver ouvre le document, sélectionne l'image ou le lien rompu, et met en surbrillance le chemin d'accès et le
nom de fichier dans l'inspecteur Propriétés (si l'inspecteur Propriétés n'est pas ouvert, choisissez Fenêtre > Propriétés
pour l'ouvrir).
Dernière mise à jour le 4/5/2011
298
UTILISATION DE DREAMWEAVER
Liens et navigation
3 Pour définir un nouveau chemin d'accès et un nouveau nom de fichier, tapez directement sur le texte en
surbrillance ou cliquez sur l'icône du dossier
pour naviguer vers le fichier.
Si vous mettez à jour une référence d'image, et si la nouvelle image s'affiche avec une taille incorrecte, cliquez sur L et
H (ou sur le bouton Actualiser) dans l'inspecteur Propriétés pour réinitialiser les valeurs de hauteur et de largeur.
4 Enregistrez le fichier.
Dès que les liens sont réparés, leur entrée disparaît de la liste des liens rompus. Si une entrée figure toujours dans la
liste après que vous avez indiqué un nouveau chemin d'accès ou nom de fichier dans le vérificateur de lien (ou après
avoir enregistré des changements apportés à l'inspecteur Propriétés), Dreamweaver ne peut pas trouver le nouveau
fichier et considère toujours que le lien est rompu.
Dernière mise à jour le 4/5/2011
299
Chapitre 10 : Prévisualisation des pages
Le mode Création vous donne une idée de l'aspect qu'aura votre page sur le Web, mais il ne restitue pas les pages de la
même façon que les navigateurs. La fonctionnalité Affichage en direct fournit une représentation plus précise et
permet de travailler en mode Code, de façon à visualiser les modifications apportées au concept. La fonction Aperçu
dans le navigateur vous permet de voir la façon dont vos pages vont s'afficher dans des navigateurs spécifiques.
Prévisualisation de pages dans Dreamweaver
A propos de l'affichage en direct
L'affichage en direct diffère du mode Création traditionnel de Dreamweaver en ce sens qu'il offre un rendu non
modifiable et plus réaliste de l'apparence de votre page dans un navigateur. L'affichage en direct ne remplace par la
commande Aperçu dans le navigateur, mais fournit plutôt une façon différente de voir à quoi ressemble votre page «
en direct » sans devoir quitter l'espace de travail de Dreamweaver.
Vous pouvez passer à l'affichage en direct à tout moment lorsque vous vous trouvez en mode Création. Toutefois, le
passage à l'affichage en direct n'a aucun point commun avec le basculement entre les autres modes d'affichage
traditionnels de Dreamweaver (Code/Fractionné/Création). Lorsque vous passez du mode Création au mode
Affichage en direct, vous vous contentez de faire basculer le mode Création d'un état modifiable à un état « en direct ».
Bien que le mode Création soit figé lorsque vous accédez au mode Affichage en direct, le mode Code reste modifiable,
ce qui vous permet de modifier le code puis d'actualiser l'affichage en direct pour voir l'effet de vos modifications.
Lorsque vous vous trouvez en mode Affichage en direct, vous pouvez également décider d'afficher le code en direct. Le
mode Code en direct est similaire au mode Affichage en direct, en ce sens qu'il affiche une version du code que le
navigateur exécute pour rendre la page. Tout comme le mode Affichage en direct, le mode Code en direct est un
affichage non modifiable.
Un autre avantage du mode Affichage en direct est sa capacité à figer le code JavaScript. Par exemple, vous pouvez
passer en mode Affichage en direct et survoler les lignes d'un tableau basé sur Spry qui changent de couleur de par
l'interaction avec l'utilisateur. Lorsque vous figez le code JavaScript, le mode Affichage en direct fige la page dans son
état actuel. Vous pouvez ensuite modifier votre code CSS ou JavaScript puis actualiser la page pour voir l'effet des
modifications. Il peut être utile de figer le code JavaScript dans l'affichage en direct pour voir et modifier les propriétés
des différents états d'un menu ou d'autres éléments interactifs qu'il est impossible de voir dans le mode Création
traditionnel.
Vous trouverez un didacticiel vidéo sur l'utilisation du mode En direct, réalisé par l'équipe de Dreamweaver, à l'adresse
www.adobe.com/go/dw10liveview_fr.
Vous trouverez, à l'adresse ci-après, une vidéo de l'équipe de conception de Dreamweaver qui présente l'utilisation de
la navigation dans le mode En direct : http://www.adobe.com/go/dwcs5livenav_fr.
Vous trouverez un didacticiel vidéo relatif à l'utilisation du mode Affichage en direct, aux fichiers associés et à la
fenêtre Navigation dans le code à l'adresse www.adobe.com/go/lrvid4044_dw_fr.
Prévisualisation des pages en mode Affichage en direct
1 Veillez à bien être en mode Création (Affichage > Création) ou en modes Code et Création (Affichage > Code et
Création).
Dernière mise à jour le 4/5/2011
300
UTILISATION DE DREAMWEAVER
Prévisualisation des pages
2 Cliquez sur le bouton Affichage en direct.
3 (Facultatif) Apportez les modifications dans le mode Code, dans le panneau Styles CSS, dans une feuille de style
CSS externe ou dans tout autre fichier associé.
Même s'il est impossible d'apporter des modifications dans le mode Affichage en direct, les options de modification
à d'autres endroits (par exemple dans le panneau Styles CSS ou dans le mode Code) changement au fur et à mesure
que vous cliquez dans l'affichage en direct.
Vous pouvez travailler dans des fichiers associés (par exemple des feuilles de style CSS) tout en maintenant le focus
sur l'affichage en direct. Pour ce faire, ouvrez le fichier associé à partir de la barre d'outils Fichiers apparentés, dans
le haut du document.
4 Si vous avez apporté des modifications en mode Code ou dans un fichier associé, actualisez l'affichage en direct en
cliquant sur le bouton Actualiser de la barre d'outils Document ou en appuyant sur F5.
5 Pour revenir au mode Création modifiable, cliquez à nouveau sur le bouton Affichage en direct.
Prévisualisation du code en direct
Le code affiché en mode Code en direct est similaire à ce que vous verriez si vous consultiez la source de la page à partir
d'un navigateur. Alors que de telles sources de pages sont statiques et ne fournissent que la source de la page à partir
du navigateur, le mode Code en direct est dynamique et est mis à jour à mesure que vous interagissez avec la page en
mode Affichage en direct.
1 Veillez à vous trouver en mode Affichage en direct.
2 Cliquez sur le bouton Code en direct.
Dreamweaver affiche le code en direct que le navigateur utiliserait pour exécuter la page. Le code est surligné en
jaune et ne peut pas être modifié.
Lorsque vous interagissez avec des éléments interactifs, le mode Code en direct met en surbrillance les
modifications dynamiques apportées au code.
3 Pour désactiver la mise en surbrillance des modifications dans le mode Code en direct, choisissez Affichage >
Options d'affichage en direct > Surligner les modifications dans le code en direct.
4 Pour revenir au mode Code modifiable, cliquez à nouveau sur le bouton Code en direct.
Pour modifier les préférences du mode Code en direct, choisissez Edition > Préférences (Windows) ou Dreamweaver
> Préférences (MacOS), puis choisissez la catégorie Coloration du code.
Gel du code JavaScript
Effectuez l'une des opérations suivantes :
• Appuyez sur la touche F6
• Choisissez Figer JavaScript dans le menu du bouton Affichage en direct.
Une barre d'information, en haut du document, vous informe que le code JavaScript est figé. Pour fermer la barre
d'information, cliquez sur son lien Fermer.
Dernière mise à jour le 4/5/2011
301
UTILISATION DE DREAMWEAVER
Prévisualisation des pages
Options de l'affichage en direct
Outre l'option Figer JavaScript, le menu du bouton Affichage en direct comporte d'autres options, qui sont également
accessibles via le menu Affichage > Options d'affichage en direct.
Figer JavaScript Fige les éléments affectés par JavaScript dans leur état actuel.
Désactiver JavaScript Désactive JavaScript et rend à nouveau la page de la manière dont elle se présenterait dans un
navigateur où JavaScript serait désactivé.
Désactiver les plug-ins Désactive les plug-ins et rend à nouveau la page de la manière dont elle se présenterait dans un
navigateur où les plug-ins seraient désactivés.
Surligner les modifications dans le code en direct Active ou désactive la mise en surbrillance des modifications dans le
mode Code en direct.
Modification de la page d'affichage en direct dans un nouvel onglet Permet d'ouvrir de nouveaux onglets pour les
documents du site vers lesquels vous naviguez à l'aide de la barre d'outils Navigation de l'explorateur ou de la
fonctionnalité Suivre le lien. Vous devez tout d'abord accéder au document, puis choisir Modifier la page d'affichage
en direct dans un nouvel onglet afin de créer un nouvel onglet pour celui-ci.
Suivre le lien Rend actif le lien suivant sur lequel vous cliquez en mode En direct. Alternativement, vous pouvez rendre
un lien actif en cliquant dessus, dans le mode En direct, tout en maintenant la touche CTRL enfoncée.
Suivre les liens de manière continue Rend les liens du mode En direct actifs en permanence jusqu'à ce que vous les
désactiviez ou que vous fermiez la page.
Synchroniser automatiquement les fichiers distants Synchronise automatiquement le fichier local et le fichier distant
lorsque vous cliquez sur l'icône Actualiser de la barre d'outils Navigation de l'explorateur. Dreamweaver place votre
fichier sur le serveur avant l'actualisation, ce qui garantit que les deux fichiers soient synchronisés.
Utiliser le serveur d'évaluation pour la source de document Option employée principalement par les pages
dynamiques (comme les pages ColdFusion), activée par défaut pour de telles pages. Lorsque cette option est activée,
Dreamweaver emploie la version du fichier qui se trouve sur le serveur d'évaluation du site comme source d'affichage
en direct.
Utiliser des fichiers locaux pour les liens de documents Réglage par défaut pour les sites non dynamiques. Lorsque
cette option est activée pour des sites dynamiques qui utilisent un serveur d'évaluation, Dreamweaver emploie les
versions locales des fichiers liés au document (par exemple les fichiers CSS et JavaScript) au lieu des fichiers stockés
sur le serveur d'évaluation. Vous pouvez ensuite apporter des modifications aux fichiers associés, de manière à voir
leur apparence avant de les placer sur le serveur d'évaluation. Si cette option est désactivée, Dreamweaver emploie les
versions des fichiers associés qui se trouvent sur le serveur d'évaluation.
Paramètres de demande HTTP Affiche une boîte de dialogue de réglages avancés où vous pouvez entrer des valeurs
relatives à l'affiche de données en direct. Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
Voir aussi
« Présentation de la barre d'outils Navigation de l'explorateur » à la page 11
« Basculement d'un mode à un autre dans la fenêtre de document » à la page 18
« Ouverture des fichiers associés » à la page 72
« Affichage des données dynamiques » à la page 618
Didacticiel sur l'utilisation du mode Affichage en direct
Dernière mise à jour le 4/5/2011
302
UTILISATION DE DREAMWEAVER
Prévisualisation des pages
Prévisualisation des pages dans les navigateurs
Affichage d'un aperçu dans un navigateur
Vous pouvez obtenir un aperçu d'une page dans un navigateur à la demande. Il n'est pas nécessaire de la transférer au
préalable sur un serveur Web. Lorsque vous affichez un aperçu d'une page, toutes les fonctions liées au navigateur
doivent être opérationnelles, y compris les comportements JavaScript, les liens absolus et relatifs au document, les
contrôles ActiveX® et les plug-ins Netscape Navigator, à condition que vous ayez installé les plug-ins ou les contrôles
ActiveX requis dans vos navigateurs.
Avant d'afficher un aperçu d'un document, enregistrez-le, sinon le navigateur n'affiche pas vos modifications les plus
récentes.
1 Procédez de l'une des manières suivantes pour afficher un aperçu de la page :
• Choisissez Fichier > Aperçu dans le navigateur, puis sélectionnez un navigateur dans la liste.
Remarque : Si aucun navigateur ne figure dans la liste, choisissez Edition > Préférences ou Dreamweaver > Préférences
(Macintosh), puis sélectionnez la catégorie Aperçu située dans la partie gauche du navigateur pour sélectionner un
navigateur
• Appuyez sur la touche F12 (Windows) ou Option+F12 (Macintosh) pour afficher la page en cours dans votre
navigateur par défaut.
• Appuyez sur la combinaison de touches Ctrl+F12 (Windows) ou Commande+F12 (Macintosh) pour afficher la
page en cours dans votre navigateur secondaire.
2 Cliquez sur les liens et testez le contenu de votre page.
Remarque : Le contenu lié à un chemin relatif à la racine n'apparaît pas lorsque vous lancez l'aperçu de documents dans
un navigateur local, sauf si vous spécifiez un serveur de test ou activez l'option Aperçu à l'aide d'un fichier temporaire
dans Edition > Préférences > Aperçu dans le navigateur. En effet, à la différence des serveurs, les navigateurs ne
reconnaissent pas les racines de sites.
Pour lancer l'aperçu d'un contenu lié à des chemins relatifs à la racine, placez le fichier sur un serveur distant, puis
choisissez Fichier > Aperçu dans le navigateur pour l'afficher.
3 Fermez la page dans le navigateur après avoir effectué le test.
Voir aussi
« Chemins relatifs à la racine du site » à la page 284
Définition des préférences d'aperçu dans un navigateur
Vous pouvez définir les préférences que les navigateurs emploieront lors de l'affichage de l'aperçu d'un site, ainsi que
définir les navigateurs principaux et secondaires.
1 Choisissez Fichier > Aperçu dans le navigateur > Modifier la liste des navigateurs.
2 Pour ajouter un navigateur dans la liste, cliquez sur le bouton plus (+), complétez la boîte de dialogue Navigateurs,
puis cliquez sur OK.
3 Pour supprimer un navigateur de la liste, sélectionnez-le, puis cliquez sur le bouton moins (-).
4 Pour modifier les paramètres d'un navigateur sélectionné, cliquez sur le bouton Modifier, effectuez les
modifications dans la boîte de dialogue Modifier le navigateur, puis cliquez sur OK.
Dernière mise à jour le 4/5/2011
303
UTILISATION DE DREAMWEAVER
Prévisualisation des pages
5 Sélectionnez l'option Navigateur principal ou Navigateur secondaire pour indiquer si le navigateur sélectionné est
le navigateur primaire ou secondaire.
Appuyez sur F12 (Windows) ou Option+F12 (Macintosh) pour ouvrir le navigateur principal et sur Ctrl+F12
(Windows) ou Commande+F12 (Macintosh) pour ouvrir le navigateur secondaire.
6 Sélectionnez Aperçu à l'aide d'un fichier temporaire pour créer une copie temporaire qui sera utilisée pour l'aperçu
et le déboguage. Désélectionnez cette option si vous souhaitez mettre le document directement à jour.
Prévisualisation des pages dans les périphériques
mobiles
Pour prévisualiser des pages créées dans Dreamweaver sur différents périphériques mobiles, utilisez Device Central
avec sa fonction intégrée Small-Screen Rendering d'Opera. Des navigateurs différents sont installés sur les différents
périphériques, mais la prévisualisation peut vous donner un bon aperçu du contenu et de son comportement sur un
périphérique donné.
1 Lancez Dreamweaver.
2 Ouverture d'un fichier.
3 Effectuez l'une des opérations suivantes :
• Sélectionnez Fichier > Aperçu dans le navigateur > Device Central.
• Dans la barre d'outils de la fenêtre du document, cliquez et maintenez enfoncé le bouton du navigateur
Aperçu/débogage dans le navigateur
et sélectionnez Aperçu dans Device Central.
Le fichier est affiché dans l'onglet Emulateur de Device Central. Pour poursuivre le test, cliquez deux fois sur le nom
d'un autre périphérique dans les listes Ensembles de périphériques ou Périphériques disponibles.
Voir aussi
« Utilisation de Device Central » à la page 395
Dernière mise à jour le 4/5/2011
304
Chapitre 11 : Utilisation de code de page
Informations générales sur le codage dans
Dreamweaver
Voir aussi
« Conseils de code » à la page 316
« Définition des préférences de codage » à la page 311
« Personnalisation des raccourcis clavier » à la page 311
« Conformité des pages avec le langage XHTML » à la page 340
« Recherche de balises, d'attributs ou de chaînes de texte dans le code » à la page 332
« Enregistrement et chargement de modèles de recherche » à la page 332
« Optimisation de l'espace de travail pour le développement visuel » à la page 576
« Affichage des enregistrements de base de données » à la page 609
Langages pris en charge
Adobe® Dreamweaver® CS5 contient à la fois des options permettant de lancer des éditeurs de texte et des options
conçues pour vous assister dans la rédaction du code, par exemple les conseils de code, et ce dans les langages suivants :
• HTML
• XHTML
• CSS
• JavaScript
• CFML (ColdFusion Markup Language)
• VBScript (pour ASP)
• C# et Visual Basic (pour ASP.NET)
• JSP
• PHP
D'autres langages, par exemple le langage Perl, ne sont pas pris en charge par les fonctions de codage spécifiques au
langage de Dreamweaver ; vous pouvez par exemple créer et modifier des fichiers Perl, mais vous ne pourrez pas
accéder aux conseils de code.
Marquage non valide
Si votre document contient du code non valide, Dreamweaver l'affiche en mode Création et, si les options adéquates
sont activées, le met en surbrillance en mode Code. Si vous sélectionnez ces éléments dans l'un des deux modes,
l'inspecteur Propriétés affiche des informations sur les causes de leur non-validité et sur la manière de corriger les
erreurs.
Dernière mise à jour le 4/5/2011
305
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Remarque : L'option de mise en surbrillance du code non valide en mode Code est désactivée par défaut. Pour l'activer,
passez en mode Code (Affichage > Code) puis cliquez sur Affichage > Options d'affichage de code > Surligner le code non
valide).
Vous pouvez également indiquer vos préférences concernant la correction automatique de certains types d'éléments
de code erronés lorsque vous ouvrez un document.
Modification automatique du code
Certaines options de Dreamweaver permettent de nettoyer automatiquement votre code selon vos propres critères.
Toutefois, le code n'est corrige que si vous activez les options correspondantes ou si l'une de vos opérations entraîne
une modification du code. Par exemple, Dreamweaver modifie vos espaces blancs et la casse des attributs uniquement
si vous sélectionnez la commande Appliquer le format source.
Quelques-unes des options de réécriture du code sont activées par défaut.
Les fonctions Roundtrip HTML de Dreamweaver permettent d'échanger des documents entre un éditeur HTML en
mode texte et Dreamweaver, moyennant un impact nul ou infime sur le contenu et la structure du code source HTML
original du document. Parmi ces fonctionnalités, on compte les suivantes :
• Vous pouvez lancer un éditeur de texte tiers pour modifier le document actif.
• Par défaut, Dreamweaver ne modifie pas le code créé ou modifié par un autre éditeur HTML, même s'il est
incorrect, à moins que vous n'ayez activé les options de réécriture.
• En l'absence de critères de référence, Dreamweaver conserve telles quelles les balises qu'il ne reconnaît pas,
notamment les balises XML. Si une balise non reconnue encadre une autre balise (par exemple,
<MyNewTag><em>text</MyNewTag></em>), Dreamweaver la marque comme erronée, mais ne modifie pas le code.
• Vous pouvez activer certaines options de Dreamweaver pour mettre les éléments de code HTML incorrects en
surligné (jaune) dans le mode Code. Si vous sélectionnez une section en surbrillance, l'inspecteur Propriétés affiche
des informations sur l'erreur et la manière de la corriger.
Code XHTML
Dreamweaver génère du nouveau code XHTML et nettoie le code XHTML existant, conformément à la plupart des
spécifications XHTML. Vous disposez également des outils permettant de se conformer aux rares spécifications
XHTML ignorées lors de ce type d'opération.
Remarque : Certaines de ces spécifications sont également exigées dans diverses versions du langage HTML.
Le tableau ci-dessous répertorie les spécifications XHTML automatiquement observées par Dreamweaver :
Dernière mise à jour le 4/5/2011
306
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Spécification XHTML
Actions effectuées par Dreamweaver
Une déclaration DOCTYPE doit précéder l'élément racine dans le
document, laquelle doit faire référence à l'un des trois fichiers DTD
(Document Type Definition) pour XHTML (strict, transitionnel ou jeu
de cadres).
Ajoute une déclaration XHTML DOCTYPE à un document XHTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
Ou, si le document XHTML comporte un jeu de cadres :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1frameset.dtd">
L'élément racine du document doit être html, et l'élémenthtml doit Ajoute l'attribut namespace à l'élément html comme suit :
désigner l'espace de noms XHTML.
<html xmlns="http://www.w3.org/1999/xhtml">
Un document standard doit comporter les éléments structurels head, Dans un document standard, inclut les éléments structurels head,
title et body. Un document de jeu de cadres doit comporter les
title et body. Dans un document de jeu de cadres, inclut les
éléments structurels head, title et frameset.
éléments head, title et frameset.
L'imbrication de tous les éléments du document doit être correcte :
<p>Voici un <i>exemple incorrect.</p></i> <p>Voici
un <i>exemple incorrect.</i></p>
Génère correctement le code imbriqué et, pendant le nettoyage du
code XHTML, corrige l'imbrication du code non généré par
Dreamweaver.
Tous les noms d'éléments et d'attributs doivent être rédigés en
minuscules.
Impose l'usage des minuscules dans les noms d'éléments et
d'attributs HTML du code XHTML généré par ses soins et pendant le
nettoyage du code XHTML, indépendamment des préférences de
casse définies pour la balise et l'attribut.
Tous les éléments doivent se terminer par une balise de fin, à moins
qu'ils ne soient déclarés dans le fichier DTD comme EMPTY.
Insère des balises de fin dans le code généré par ses soins, ainsi que
pendant le nettoyage du code XHTML.
Insère les éléments vides avec un espace avant la barre oblique de
Les éléments vides doivent se terminer par une balise de fin ou la
balise de début doit être fermée avec le code />. Par exemple, <br> fermeture des balises vides dans le code généré par ses soins ainsi
est incorrect ; la forme correcte de la balise est soit <br></br>,
que pendant le nettoyage du code XHTML.
soit <br/>. Les éléments vides sont les suivants : area, base,
basefont, br, col, frame, hr, img, input, isindex, link, meta et
param.
Pour garantir la rétrocompatibilité avec les navigateurs non XML, un
espace doit précéder le code /> (par exemple, <br /> et non<br/>).
Il est impossible d'abréger les attributs ; ainsi, <td nowrap> est
incorrect ; la forme correcte est <td nowrap="nowrap">.
Insère des paires attribut/valeur complètes dans le code généré par
ses soins, ainsi que pendant le nettoyage du code XHTML.
Cette règle s'applique aux attributs suivants : checked, compact,
declare, defer, disabled, ismap, multiple, noresize,
noshade, nowrap, readonly et selected.
Remarque : Un navigateur HTML ne prenant pas en charge HTML 4
risque de ne pas pouvoir interpréter ces attributs booléens sous leur
forme complète.
Tous les attributs doivent être placés entre guillemets.
Met les valeurs d'attribut entre guillemets dans le code généré par ses
soins, ainsi que pendant le nettoyage du code XHTML.
Les éléments suivants doivent comporter un attribut id et un attribut
name : a, applet, form, frame, iframe, img et map. Par exemple, <a
name="intro">Introduction</a> est incorrect ; la forme
correcte est
Affecte la même valeur aux attributs name et id, toutes les fois où
l'attribut name est défini par un inspecteur Propriétés, dans le code
généré par Dreamweaver, ainsi que pendant le nettoyage du
code XHTML.
<a id="intro">Introduction</a> ou <a id="section1"
name="intro"> Introduction</a>.
Dernière mise à jour le 4/5/2011
307
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Spécification XHTML
Actions effectuées par Dreamweaver
Dans le cas d'attributs dont les valeurs sont de type Enuméré, cellesci doivent figurer en minuscules.
Impose l'utilisation des minuscules pour les valeurs de type Enuméré
dans le code généré par ses soins, ainsi que pendant le nettoyage du
code XHTML.
Une valeur de type Enuméré est une valeur appartenant à une liste
donnée de valeurs autorisées ; par exemple, l'attribut align
comprend les valeurs autorisées suivantes : center, justify, left
et right.
Tous les éléments de script et de style doivent comporter un attribut
type.
(La nécessité de l'attribut de type d'un élément de script a été
introduite avec HTML 4, lors de la dépréciation de l'attribut de
language.)
Définit les attributs de typeet de langage dans les éléments de
script ainsi que l'attribut de type dans les éléments de style, mais
aussi dans le code généré par ses soins et pendant le nettoyage du
code XHTML.
Tous les éléments img et area doivent comprendre un attribut alt. Définit ces attributs dans le code généré par ses soins et, pendant le
nettoyage du code XHTML, signale les attributs alt manquants.
Expressions régulières
Les expressions régulières sont des modèles décrivant des combinaisons de caractères dans un texte. Utilisez-les dans
vos recherches pour décrire des concepts tels que « lignes commençant par ‘var’ » ou « valeurs d'attribut contenant un
nombre ».
Le tableau ci-dessous présente les caractères spéciaux des expressions régulières, leur signification et des exemples
d'utilisation. Pour rechercher du texte contenant un des caractères spéciaux présentés dans le tableau, indiquez qu'il
s'agit d'un caractère spécial à l'aide d'une barre oblique inversée. Par exemple, pour rechercher l'astérisque dans la
phrase conditions spéciales*, vous pouvez utiliser un modèle de recherche tel que celui-ci : spéciales\*. Si vous
n'indiquez pas l'astérisque comme caractère spécial, vous trouverez toutes les occurrences de « spéciales » (de même
que « spéciale », « spécialess » et « spécialesss »), et pas seulement celles qui sont suivies d'un astérisque.
Caractère
trouve
Exemple
^
Début de saisie ou de ligne.
^T trouve « T » dans « Tonnerre de Brest », mais pas dans « La
case de l'oncle Tom »
$
Fin de saisie ou de ligne.
n$ trouve « n » dans « malin » mais pas dans « noir »
*
Le caractère précédent, 0 ou plusieurs fois.
um* trouve « um » dans « rhum », « umm » dans « yummy » et
« u » dans « bouge »
+
Le caractère précédent, 1 ou plusieurs fois.
um+ trouve « um » dans « rhum », « umm » dans « yummy »
mais rien dans « bouge »
?
Le caractère précédent, une fois au maximum
(en d'autres termes, le caractère précédent est
facultatif).
st?on trouve « son » dans « Johnson » et « ston » dans
« Johnston », mais rien dans « Appleton » ou « tension »
.
Tout caractère, sauf une nouvelle ligne (retour à .an trouve « ran », « tan » et « lan » dans le mot « rantanplan »
la ligne).
x|y
Soit x, soit y.
FF0000|0000FF trouve « FF0000 » dans
bgcolor="#FF0000" et « 0000FF » dans font
color="#0000FF"
{n}
Exactement n occurrences du caractère
précédent.
l{2} trouve « ll » dans « elle » et les deux premiers l de
Au moins n et au plus m occurrences du
caractère précédent.
F{2,4} trouve « FF » dans « #FF0000 » et les quatre premiers
{n,m}
« ellllle », mais ne trouve rien dans « léger »
F dans #FFFFFF
Dernière mise à jour le 4/5/2011
308
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Caractère
trouve
Exemple
[abc]
L'un des caractères entourés de crochets.
Spécifiez une plage de caractères à l'aide d'un
trait d'union (par exemple, [a-f] équivaut à
[abcdef]).
[e-g] trouve « e » dans « œil », « f » dans « fil » et « g » dans
Tout caractère non inclus entre les crochets.
Spécifiez une plage de caractères à l'aide d'un
trait d'union (par exemple, [^a-f] équivaut à
[^abcdef]).
[^aeiou] trouve initialement « r » dans « orange », « b » dans
Limite de mot (par exemple un espace ou un
retour chariot).
\bb trouve « b » dans « balle » mais pas dans « gober » ou
\B
Tous les éléments sauf les limites de mot
\Bb trouve « b » dans « gober » mais pas dans « balle »
\d
Tout chiffre. C'est l'équivalent de [0-9].
\d trouve « 3 » dans « C3PO » et « 2 » dans « appartement
[^abc]
\b
« garde »
« balle » et « k » dans « eek! »
« snob »
2G ».
\D
Tout caractère alphabétique et non numérique. \D trouve « S » dans « 900S » et « Q » dans « Q45 ».
C'est l'équivalent de [^0-9].
\f
Saut de page.
\n
Saut de ligne.
\r
Retour chariot.
\s
Tout « espace blanc », ou caractère
\sval trouve « val » dans « le val André » mais pas dans
d'espacement : espace, tabulation, saut de page « aval »
ou saut de ligne.
\S
Tout caractère autre qu'un espace blanc.
\Sval trouve « val » dans « aval », mais pas dans « le val
André »
\t
Tabulation.
\w
Tout caractère alphanumérique, y compris le
c\w* trouve « chien » dans « le chien noir », ainsi que « cou » et
caractère de soulignement. C'est l'équivalent de « chien » dans « le cou du chien noir ».
[A-Za-z0-9_].
\W
Tout caractère non alphanumérique. C'est
l'équivalent de [^A-Za-z0-9_].
Ctrl+Entrée ou Maj+Entrée
(Windows), ou Contrôle+
Retour ou Maj+Retour ou
Commande+Retour
(Macintosh)
Retour chariot. Veillez à désactiver l'option
Ignorer les différences entre les espaces blancs
lorsque vous effectuez ce type de recherche si
vous n'utilisez pas des expressions régulières.
Notez que cette recherche porte sur un
caractère particulier et non sur la notion de
retour à la ligne ; par exemple, elle ne trouvera
pas une balise <br> ou <p>. Les caractères de
retour chariot apparaissent en tant qu'espaces
en mode Création, et non en tant que sauts de
ligne.
\W trouve « & » dans « Tintin&Milou » et « % » dans « 100% ».
Utilisez des parenthèses pour définir au sein de l'expression régulière des groupes auxquels il sera fait référence plus
tard ; utilisez $1, $2, $3, etc. dans le champ Remplacer pour faire référence au premier, deuxième, troisième, etc.,
groupe entre parenthèses.
Remarque : Dans la zone de texte Rechercher, faites référence au groupe entre parenthèses mentionné plus tôt dans
l'expression régulière en indiquant \1, \2, \3 etc. au lieu de $1, $2, $3.
Dernière mise à jour le 4/5/2011
309
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Par exemple, la recherche de (\d+)\/(\d+)\/(\d+) et le remplacement par $2/$1/$3 échangent le jour et le mois dans
une date séparée par des barres obliques permettant ainsi la conversion entre les dates de style américain et les dates
de style européen.
Code de comportement de serveur
Lorsque vous sélectionnez un comportement de serveur dans le panneau Comportements de serveur pendant le
développement d'une page dynamique, Dreamweaver insère un ou plusieurs blocs de code dans la page pour faire
fonctionner le comportement de serveur.
Si vous modifiez manuellement le code contenu dans un bloc de code, les panneaux, par exemple le panneau Liaisons
et le panneau Comportements de serveur, ne sont plus accessibles pour la modification du comportement du serveur.
Dreamweaver détecte les comportements de serveur en se repérant à des modèles de code spécifiques dans la page, puis
les affiche dans le panneau correspondant. Toute modification du code d'un bloc de code empêche dès lors
Dreamweaver de détecter le comportement de serveur et de l'afficher dans le panneau Comportements de serveur. Le
comportement de serveur subsiste toutefois dans la page : vous pouvez donc le corriger dans l'environnement de
codage de Dreamweaver.
Configuration d'un environnement de codage
Utilisation d'espaces de travail orientés codeur
Vous pouvez modifier l'environnement de codage de Dreamweaver pour l'adapter à la façon dont vous travaillez. Vous
pouvez par exemple changer le mode d'affichage du code, définir différents raccourcis clavier ou importer et utiliser
votre bibliothèque de balises de prédilection.
Dreamweaver est fourni avec plusieurs dispositions d'espace de travail conçues pour offrir une expérience de codage
optimale. La fonction Commutation d'espace de travail de la barre Application vous permet de sélectionner l'un des
espaces de travail suivants : Développeur d'applications, Développeur d'applications Plus, Codeur et Codeur Plus.
Tous ces espaces de travail s'affichent par défaut en mode Code (dans la fenêtre de document tout entière ou en modes
Code et Création) et comportent des panneaux ancrés du côté gauche de l'écran. À l'exception de Développeur
d'applications Plus, ils éliminent tous l'inspecteur Propriétés de l'affichage par défaut.
Si aucun des espaces de travail prédéfinis ne répond précisément à vos attentes, vous pouvez personnaliser la
disposition en ouvrant et en encrant des panneaux comme bon vous semble, puis en enregistrant l'espace de travail en
tant qu'espace de travail personnalisé.
Voir aussi
« Gestion des fenêtres et des panneaux » à la page 24
« Enregistrement et basculement d’un espace de travail à l’autre » à la page 28
« Personnalisation des raccourcis clavier » à la page 35
« Gestion des bibliothèques de balises » à la page 355
Dernière mise à jour le 4/5/2011
310
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Affichage du code
Vous pouvez visualiser le code source du document actif de plusieurs façons : en l'affichant dans la fenêtre de
document après avoir activé le mode Code, en fractionnant la fenêtre de document pour afficher à la fois la page et son
code, ou encore en travaillant dans l'Inspecteur de code, qui forme une fenêtre de code distincte. L'inspecteur de code
fonctionne comme le mode Code; il peut être considéré comme un mode Code détachable pour le document actif.
Voir aussi
« Modification du format du code » à la page 312
« Définition des préférences de conseils de code » à la page 319
« Définition des couleurs du code » à la page 315
Affichage du code dans la fenêtre de document
❖ Choisissez Affichage > Code.
Codage et modification simultanée d'une page dans la fenêtre de document
1 Choisissez Affichage > Code et création.
Le code apparaît dans le volet supérieur, et la page dans le volet inférieur.
2 Pour afficher la page au premier plan, choisissez Mode Création au premier plan dans le menu Affichage de la barre
d'outils du document.
3 Pour redimensionner les volets dans la fenêtre de document, faites glisser la barre de division à l'endroit approprié.
La barre de division est intercalée entre les deux volets.
Toutes les modifications apportées dans le mode Création se répercutent automatiquement dans le mode Code.
Toutefois, après avoir effectué des modifications en mode Code, vous devez mettre à jour manuellement le document
dans le mode Création ; il vous suffit pour cela de cliquer dans ce mode ou d'appuyer sur la touche F5.
Affichage du code dans une fenêtre distincte dans l'inspecteur de code
L'inspecteur de code permet de travailler dans une fenêtre de code distincte, comme vous le faites en mode Code.
❖ Choisissez Fenêtre > Inspecteur de code. La barre d'outils contient les options suivantes :
Gestion des fichiers Permet de placer ou d'acquérir le fichier.
Aperçu/Débogage dans le navigateur Permet de prévisualiser ou de déboguer votre document dans un navigateur.
Actualiser mode Création Met à jour le document en mode Création, de façon à ce qu'il applique les modifications
apportées dans le code. Les modifications apportées dans le 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.
Référence Ouvre le panneau Référence. Consultez la section « Utilisation des documents de référence sur les
langages » à la page 333.
Navigation par code Permet de se déplacer rapidement dans le code. Consultez la section « Accès à une fonction
JavaScript ou VBScript » à la page 328.
Afficher les options Permet de déterminer la façon dont le code est affiché. Consultez la section « Définition de
l'apparence du code » à la page 311.
Pour utiliser la barre de codage située dans la partie gauche de la fenêtre, consultez la section « Insertion de code avec
la barre d'outils de codage » à la page 321.
Dernière mise à jour le 4/5/2011
311
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Personnalisation des raccourcis clavier
Rien ne vous empêche d'utiliser vos raccourcis clavier préférés dans Dreamweaver. Si vous êtes habitué à utiliser des
raccourcis clavier spécifiques (par exemple, Maj+Entrée pour insérer un saut de ligne, Ctrl+G pour atteindre un code
précis), vous pouvez les intégrer dans Dreamweaver au moyen de l'éditeur de raccourcis clavier.
Pour plus d'informations, reportez-vous à la section « Personnalisation des raccourcis clavier » à la page 35.
Voir aussi
« Manipulation de fragments de code » à la page 330
Ouverture de fichiers en mode Code par défaut
Lorsque vous ouvrez un fichier qui ne contient normalement aucun code HTML (par exemple, un fichier JavaScript),
il s'ouvre en mode Code (ou dans l'Inspecteur de code), et non pas en mode Création. Vous pouvez définir les types de
fichiers à ouvrir en mode Code.
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
2 Sélectionnez la catégorie Types de fichiers/Editeurs dans la liste de gauche.
3 Dans la zone de texte Ouvrir en mode Code, entrez les extensions des types de fichier que vous voulez ouvrir
automatiquement en mode Code.
Insérez un espace entre les extensions. Vous pouvez en ajouter autant que vous le souhaitez.
Voir aussi
« Utilisation d'un éditeur externe » à la page 316
« Définition des préférences du programme de validation » à la page 339
Définition des préférences de codage
A propos des préférences de codage
Vous pouvez définir des préférences de codage, par exemple le formatage du code ou la mise en couleurs, en fonction
de vos besoins.
Remarque : Pour définir les préférences avancées, utilisez l'éditeur de la bibliothèque de balises (consultez la section
« Gestion des bibliothèques de balises » à la page 355).
Définition de l'apparence du code
Le menu Affichage > Options d'affichage de code permet de configurer le renvoi à la ligne des mots, l'affichage du
numéro des lignes de code, la mise en surbrillance du code HTML incorrect, la coloration de la syntaxe des éléments
de code, la mise en retrait du code, ainsi que l’affichage des caractères masqués.
1 Affichez le document dans le mode Code ou l'Inspecteur de code.
2 Effectuez l'une des opérations suivantes :
• Choisissez Affichage > Code et création
Dernière mise à jour le 4/5/2011
312
UTILISATION DE DREAMWEAVER
Utilisation de code de page
• Cliquez sur le bouton Options d'affichage
dans la barre d'outils située en haut du mode Code ou de l'Inspecteur
de code.
3 Activez ou désactivez l’une des options suivantes :
Renvoi à la ligne Renvoie le code à la ligne pour le rendre visible sans qu'il soit nécessaire de le faire défiler
horizontalement. Cette option n'insère aucun saut de ligne ; elle a pour seule fonction de simplifier la consultation du code.
Numéros de lignes Affiche le numéro des lignes de code sur le côté.
Caractères masqués Permet d’afficher les caractères spéciaux au lieu d’un simple espace blanc. Par exemple, un point
apparaît pour masquer chaque espace, un double chevron remplace chaque tabulation, et une marque de paragraphe
remplace chaque saut de ligne.
Remarque : Les retours à la ligne contextuels que Dreamweaver utilise pour le renvoi du texte à la ligne ne sont pas
symbolisés par une marque de paragraphe.
Surligner le code non valide Active, dans Dreamweaver, le surlignage en jaune du code HTML non valide. Dès la
sélection d'une balise incorrecte, l'inspecteur Propriétés affiche des instructions pour corriger l'erreur.
Coloration de la syntaxe Active ou désactive la mise en couleurs du code. Pour plus d'informations sur la modification
des couleurs à appliquer, consultez la section « Définition des couleurs du code » à la page 315.
Retrait auto Automatise la mise en retrait du code lorsque vous appuyez sur la touche Entrée pendant la rédaction du
code. La nouvelle ligne de code s'aligne au même niveau que la ligne qui la précède. Pour plus d'informations sur la
modification de l'espacement du retrait, consultez l'option Taille de tabulation dans « Modification du format du
code » à la page 312.
Voir aussi
« Affichage du code » à la page 310
« Présentation de la barre d'outils de codage » à la page 12
« Définition des préférences de conseils de code » à la page 319
Modification du format du code
Vous pouvez modifier l'aspect de votre code en définissant des préférences de formatage telles que la mise en retrait,
la longueur de ligne et la casse des noms de balises et d'attributs.
Toutes les options de formatage de code, à l'exception de l'option Remplacer la casse de, ne s'appliquent
automatiquement qu'aux nouveaux documents et aux additions à des documents que vous créez par la suite.
Pour modifier le formatage d'un document HTML existant, ouvrez ce document puis cliquez sur Commandes >
Appliquer le format source.
1 Choisissez Edition > Préférences.
2 Sélectionnez la catégorie Format du code dans la liste de gauche.
3 Parmi les options suivantes, définissez celles de votre choix :
Retrait Indique si le code généré par Dreamweaver doit être mis en retrait (en conformité avec les règles de retrait
définies dans ces préférences) ou non.
Remarque : La majorité des options de retrait de cette boîte de dialogue ne s'appliquent qu'au code généré par
Dreamweaver et non au code entré par vos soins. Pour que chaque nouvelle ligne entrée s'aligne au même niveau que la
précédente, utilisez l'option Retrait auto dans les options d'affichage du mode Code. Pour plus d'informations, consultez
la section « Définition de l'apparence du code » à la page 311.
Dernière mise à jour le 4/5/2011
313
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Avec (Zone de texte ou menu contextuel) Spécifie le nombre d'espaces ou de tabulations que Dreamweaver doit
utiliser afin de mettre en retrait le code généré. Par exemple, si vous tapez 3 dans la zone de texte et si vous sélectionnez
Tabulations dans le menu contextuel, le code généré par Dreamweaver sera mis en retrait de trois tabulations à chaque
niveau de mise en retrait.
Taille de la tabulation Détermine la taille, en caractères, de chaque tabulation dans le mode Code. Par exemple, si cette
taille est définie sur 4, chaque tabulation s'affiche dans le mode Code sous la forme d'un espace long de 4 caractères.
De plus, si la taille du retrait est définie sur 3 et que les caractères utilisés sont des tabulations, le code généré par
Dreamweaver est mis en retrait de trois tabulations par niveau de mise en retrait, ce qui correspond à un espace de 12
caractères en mode Code.
Remarque : Dreamweaver effectue les mises en retrait à l'aide de tabulations ou d'espaces mais ne convertit pas une série
d'espaces en tabulation lors de l'insertion de code.
Type de saut de ligne Permet d'indiquer le type de serveur distant (Windows, Macintosh ou UNIX) qui hébergera
votre site. Le choix du type de caractères de saut de ligne approprié (CR, CR/LF, LF) garantit que votre code source
HTML s'affiche correctement lorsqu'il est affiché à partir du serveur distant. Ce paramètre est également utile lorsque
vous travaillez avec un éditeur de texte externe qui ne reconnaît que certains types de retours de chariot. Par exemple,
utilisez CR/LF (Windows), si votre éditeur de texte est le Bloc-notes de Windows, et CR (Macintosh) s'il s'agit de
SimpleText.
Remarque : Pour les serveurs auxquels vous vous connectez via FTP, cette option ne s'applique qu'en mode de transfert
binaire ; le mode de transfert ASCII de Dreamweaver ignore cette option. Si vous téléchargez (en réception) des fichiers
en mode ASCII, Dreamweaver définit les sauts de ligne en fonction du système d'exploitation de votre ordinateur ; si vous
transférez des fichiers en mode ASCII, les sauts de ligne sont toujours définis comme CR/LF.
Casse de balise par défaut et casse d'attribut par défaut Contrôlez la capitalisation des noms de balises et d'attributs.
Ces options s'appliquent aux balises et aux attributs que vous insérez ou que vous modifiez dans le mode Création,
mais pas aux balises ou attributs que vous entrez directement dans le mode Code (ou l'Inspecteur de code), ni aux
balises ou attributs déjà contenus dans un document que vous ouvrez (sauf, dans ce dernier cas, si vous avez également
activé l'une des options Remplacer la casse de).
Remarque : Cette préférence s'applique uniquement aux pages HTML. Dreamweaver l'ignore pour les pages XHTML
étant donné que les balises et les attributs en majuscules sont incorrects dans XHTML.
Remplacer la casse de : Balises et Attributs Spécifie s'il faut toujours convertir les noms de balises et d'attributs dans la
casse spécifiée, même lors de l'ouverture d'un document HTML existant. Lorsque vous activez l'une de ces options et
que vous cliquez sur OK pour fermer la boîte de dialogue, les balises et les attributs du document actif sont
immédiatement convertis dans la casse indiquée et il en sera de même dans tous les documents que vous ouvrirez par
la suite (du moins tant que vous n'aurez pas désactivé cette option). Les balises et les attributs que vous tapez en mode
Code ou dans Quick Tag Editor ou bien que vous insérez à partir du panneau Insertion, sont également convertis dans
la casse spécifiée. Par exemple, si vous voulez que les noms des balises soient toujours convertis en minuscules,
spécifiez minuscules dans l'option Casse de balise par défaut et activez l'option Remplacer la casse de : Balises. Lorsque
vous ouvrez ensuite un document contenant des noms de balises en majuscules, Dreamweaver les convertit en
minuscules.
Remarque : D'anciennes versions du code HTML permettaient d'écrire les noms d'attributs et les balises en majuscules
ou en minuscules, mais le XHTML requiert des minuscules. L'usage du XHTML étant de plus en plus répandu, il est
conseillé d'utiliser des minuscules pour ces éléments.
Balise TD : Ne pas inclure de saut de ligne dans la balise TD Résout un problème de rendu qui se rencontre dans
certains anciens navigateurs, si un espace blanc ou des sauts de ligne sont placés immédiatement après une balise <td>
ou juste avant une balise </td>. Si vous activez cette option, Dreamweaver ne place pas de saut de ligne après une balise
<td> ou avant une balise </td>, même si le formatage de la bibliothèque de balises indique qu'un saut de ligne devrait
être inséré.
Dernière mise à jour le 4/5/2011
314
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Formatage avancé Permet de définir des options de formatage pour le code CSS (Cascading Style Sheets, feuilles de
style en cascade) et pour les différents attributs et balises dans l'éditeur de la bibliothèque de balises.
Espace blanc (version japonaise uniquement) Permet de sélectionner une espace insécable ( ) ou une espace
Zenkaku pour votre code HTML. L'espace blanc sélectionné avec cette option est utilisé pour les balises vides lors de
la création d'un tableau et lorsque l'option « Autoriser plusieurs espaces consécutives » est activée dans les pages de
codage japonaises.
Voir aussi
« Mise en forme du code CSS » à la page 151
« Définition des préférences de conseils de code » à la page 319
Définition des préférences de correction de code
Les préférences de correction de code permettent de spécifier les préférences de modification de code par
Dreamweaver lors de l'ouverture de documents, lorsque vous copiez et collez des éléments de formulaires ou que vous
entrez des valeurs et adresses URL à l'aide des outils (par exemple, l'inspecteur Propriétés). Ces préférences sont sans
effet lorsque vous modifiez du code HTML ou des scripts dans le mode Code.
Si vous désactivez ces options de correction, les éléments de marquage non valides sont affichés dans la fenêtre de
document pour le code HTML qu'il aurait corrigé.
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
2 Sélectionnez la catégorie Correction du code dans la liste de gauche.
3 Parmi les options suivantes, définissez celles de votre choix :
Corriger les balises incorrectement imbriquées et non fermées Corrige les balises qui se chevauchent. Par exemple,
<b><i>texte</b></i> est réécrit comme <b><i>texte</i></b>. Cette option insère également des guillemets et
des crochets de fermeture s'ils sont absents.
Renommer les éléments de formulaire lors du collage Garantit l'absence de noms d'objets de formulaire en double.
Cette option est activée par défaut.
Remarque : Contrairement à d'autres options de cette boîte de dialogue de préférences, cette option ne s'applique pas à
l'ouverture d'un document, mais uniquement lorsque vous copiez et collez un élément de formulaire.
Supprimer les balises de fermeture superflues Supprime les balises de fermeture auxquelles aucune balise d'ouverture
ne correspond.
M'avertir lors de la correction ou de la suppression de balises Affiche un récapitulatif des codes HTML
techniquement non valides que Dreamweaver a tenté de corriger. Ce récapitulatif indique l'emplacement du problème
(à l'aide des numéros de ligne et de colonne), pour vous permettre de vérifier la correction et veiller à ce qu'elle
produise l'effet voulu.
Ne jamais corriger le code : Dans les fichiers avec extensions. Permet d'empêcher Dreamweaver de corriger le code
dans les fichiers portant les extensions indiquées. Cette option est particulièrement utile pour les fichiers contenant
des balises propriétaires.
Coder <, >, & et " dans les valeurs d'attributs à l'aide de & Garantit que les valeurs d'attribut entrées ou modifiées à
l'aide des outils Dreamweaver (par exemple, l'inspecteur Propriétés) ne contiennent que des caractères autorisés. Cette
option est activée par défaut.
Remarque : Cette option et les options suivantes ne s'appliquent pas aux adresses URL entrées dans le mode Code. De
plus, ces options n'entraînent pas de modification dans le code déjà présent dans un fichier.
Dernière mise à jour le 4/5/2011
315
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Ne pas coder les caractères spéciaux Empêche toute modification des adresses URL par Dreamweaver en vue de
n'utiliser que des caractères autorisés. Cette option est activée par défaut.
Coder caractères spéciaux dans les URL à l'aide de &# Garantit que, lorsque vous entrez ou modifiez des adresses URL
à l'aide des outils Dreamweaver (par exemple, l'inspecteur Propriétés), ces URL ne contiennent que des caractères
autorisés.
Coder caractères spéciaux dans les URL à l'aide de % Fonctionne de façon identique à l'option ci-dessus, mais utilise
une autre méthode pour coder les caractères spéciaux. Cette méthode d'encodage (à l'aide du signe %) offre une
meilleure compatibilité avec les navigateurs plus anciens, mais ne se montre pas aussi efficace avec les caractères
utilisés dans certaines langues.
Voir aussi
« Nettoyage de fichiers HTML créés avec Microsoft Word » à la page 76
« Définition des préférences de conseils de code » à la page 319
Définition des couleurs du code
Utilisez les préférences de coloration du code pour spécifier les couleurs des principales catégories de balises et
d'éléments de code, par exemple les balises liées à la mise en forme ou les identificateurs JavaScript. Pour définir les
préférences de coloration d'une balise spécifique, modifiez sa définition dans l'éditeur de la bibliothèque de balises.
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
2 Sélectionnez la catégorie Coloration du code dans la liste de gauche.
3 Sélectionnez un type de document dans la liste Type de document. Les modifications que vous apportez aux
préférences de coloration du code influeront sur tous les documents de ce type.
4 Cliquez sur le bouton Modifier le modèle de coloration.
5 Dans la boîte de dialogue Modifier le modèle de coloration, choisissez un élément de code dans la liste Styles, puis
définissez la couleur du texte, la couleur d'arrière-plan et éventuellement le style (gras, italique ou souligné).
L'échantillon de code affiché dans le volet d'aperçu est modifié pour correspondre aux nouveaux styles et couleurs.
Cliquez sur OK pour enregistrer les modifications et fermer la boîte de dialogue Modifier le modèle de coloration.
6 Apportez les autres modifications requises aux préférences de coloration du code, puis cliquez sur OK.
Arrière-plan par défaut permet de définir la couleur d'arrière-plan par défaut pour le mode Code et pour l'inspecteur
de code.
Caractères masqués définit la couleur des caractères masqués.
Arrière-plan du code en direct définit la couleur d'arrière-plan du mode Code en direct. La couleur par défaut est le
jaune.
Modifications du code en direct définit la couleur de surbrillance du code qui est modifié dans le mode Code en direct.
La couleur par défaut est le rose.
Arrière-plan en lecture seule définit la couleur d'arrière-plan du texte en lecture seule.
Voir aussi
« Personnalisation des préférences de coloration de code d'un modèle » à la page 436
« Modification de bibliothèques, de balises et d'attributs » à la page 356
Dernière mise à jour le 4/5/2011
316
UTILISATION DE DREAMWEAVER
Utilisation de code de page
« Prévisualisation du code en direct » à la page 300
« Définition des préférences de conseils de code » à la page 319
Utilisation d'un éditeur externe
Vous pouvez spécifier un éditeur externe à utiliser pour l'édition de fichiers possédant des extensions précises. Par
exemple, vous pouvez lancer un éditeur de texte comme BBEdit, le Bloc-Notes ou TextEdit à partir de Dreamweaver
pour modifier les fichiers JavaScript (JS).
Vous pouvez attribuer différents éditeurs externes pour différentes extensions de nom de fichier.
Voir aussi
« Ouverture de fichiers en mode Code par défaut » à la page 311
Définition d'un éditeur externe pour un type de fichier
1 Choisissez Edition > Préférences.
2 Sélectionnez la catégorie Types de fichiers/Editeurs dans la liste de gauche, puis cliquez sur OK.
Ouvrir en mode Code Précise les extensions de noms de fichiers à ouvrir automatiquement en mode Code dans
Dreamweaver.
Editeur de code externe Spécifie l'éditeur de texte à utiliser.
Recharger les fichiers modifiés Indiquez ce que Dreamweaver doit faire lorsqu'il détecte que des changements ont été
apportés de l'extérieur à un document déjà ouvert dans Dreamweaver.
Enregistrer au démarrage Permet d'indiquer si Dreamweaver doit systématiquement enregistrer le document actif
avant d'exécuter l'éditeur, ne jamais enregistrer le document ou vous demander s'il doit l'enregistrer ou non à chaque
lancement de l'éditeur externe.
Fireworks Spécifiez les éditeurs pour divers types de fichiers multimédia.
Démarrage d'un éditeur de code externe
❖ Choisissez Edition > Modifier avec éditeur externe.
Rédaction et modification de code
Conseils de code
Les conseils de code vous permettent d'insérer et de modifier le code rapidement et sans erreur de saisie. A mesure que
vous tapez des caractères en mode Code, une liste de suggestions s'affiche et vous aide à compléter votre saisie. Par
exemple, lorsque vous tapez les premiers caractères du nom d'une balise, d'un attribut ou d'une propriété CSS, une liste
d'options dont le nom commence par ces caractères s'affiche. Cette fonctionnalité facilite l'insertion et la modification
de code. Vous pouvez également l'utiliser pour consulter les attributs disponibles pour une balise, les paramètres d'une
fonction ou les méthodes d'un objet.
Les conseils de code sont disponibles pour différents types de code. Lorsque vous tapez le premier caractère d'un type
de code précis, une liste de suggestions s'affiche. Par exemple, pour afficher la liste des conseils de code pour les noms
de balises HTML, tapez un crochet ouvrant (<). De même, pour afficher des conseils de code pour JavaScript, tapez un
point après un objet.
Dernière mise à jour le 4/5/2011
317
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Pour exploiter pleinement cette fonctionnalité, en particulier lorsque vous l'utilisez pour des fonctions et des objets,
définissez l'option Délai de la boîte de dialogue Préférences de conseils de code sur 0 seconde.
La fonctionnalité de conseils de code reconnaît également les classes JavaScript personnalisées qui ne sont pas intégrées
à ce langage. Vous pouvez rédiger ces classes personnalisées ou les ajouter par l'intermédiaire de bibliothèques de
fournisseurs tiers, comme Prototype.
Pour faire disparaître la liste des conseils de code, appuyez sur la touche Retour arrière (Windows) ou Arrière
(Macintosh).
Vous trouverez un didacticiel vidéo sur les conseils de code à l'adresse www.adobe.com/go/lrvid4048_dw_fr.
Vous trouverez un didacticiel vidéo sur la prise en charge de JavaScript dans Dreamweaver, réalisé par l'équipe de
Dreamweaver, à l'adresse www.adobe.com/go/dw10javascript_fr.
Langages et technologies pris en charge
Dreamweaver prend en charge les conseils de code pour les langages et les technologies suivants :
• Adobe ColdFusion
• Ajax
• ASP JavaScript
• ASP.NET C#
• ASP.NET VB
• ASP VBScript
• CSS2 et CSS3
• DOM (Document Object Model)
• HTML4 et HTML5
• jQuery (CS5.5 et versions ultérieures)
• JavaScript (avec conseils de code pour les classes personnalisées)
• JSP
• PHP MySQL
• Spry
Affichage d'un menu de conseils de code
Le menu de conseils de code s'affiche automatiquement lorsque vous tapez en mode Code. Vous pouvez également
l'afficher manuellement, sans taper.
1 En mode Code (Fenêtre > Code), placez le point d'insertion à l'intérieur d'une balise.
2 Appuyez sur Ctrl + Barre d'espace.
Insertion de code à l'aide des conseils en mode Code
1 Saisissez le premier caractère du segment de code. Par exemple, pour insérer une balise, tapez un crochet ouvrant
(<). Pour insérer un attribut, placez le point d'insertion juste après le nom de la balise, puis appuyez sur la barre
d'espace.
Une liste d'éléments (par exemple les noms des différentes balises ou des différents attributs) s'affiche.
Dernière mise à jour le 4/5/2011
318
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Vous pouvez fermer cette liste à tout moment en appuyant sur la touche Echap.
2 Faites défiler les éléments de la liste à l'aide de la barre de défilement ou des touches fléchées vers le haut et vers le bas.
3 Double-cliquez sur l'un des éléments de cette liste pour l'insérer ; vous pouvez également le sélectionner, puis
appuyer sur la touche Entrée (Windows) ou Retour (Macintosh).
Si vous avez créé un style CSS et que celui-ci ne figure pas dans la liste des conseils de code correspondant aux
styles CSS, cliquez sur Actualiser la liste des styles. Si le mode Création est visible, il peut arriver que du code non
valide s'y affiche provisoirement lorsque vous cliquez sur Actualiser la liste des styles. Pour faire disparaître ce code non
valide du mode Création, appuyez sur F5 afin d'actualiser l'affichage après l'insertion du style.
4 Pour insérer une balise de fin, tapez </ (barre oblique).
Remarque : Par défaut, Dreamweaver détermine le moment où une balise de fermeture est requise et l'insère
automatiquement. Vous pouvez modifier ce comportement par défaut, de façon à ce que Dreamweaver insère une balise
de fermeture lorsque vous avez tapé le crochet fermant (>) final de la balise d'ouverture. Alternativement, le
comportement par défaut peut consister à ne pas insérer la moindre balise de fermeture. Sélectionnez Edition >
Préférences > Conseils de code, puis sélectionnez l'une des options de Balises de fermeture.
Modification d'une balise à l'aide des conseils de code
• Pour remplacer un attribut par un autre, supprimez l'attribut concerné et sa valeur, puis ajoutez le nouvel attribut
et la valeur associée en suivant la procédure ci-avant.
• Pour modifier une valeur, supprimez la valeur concernée, puis ajoutez une nouvelle valeur en suivant la procédure
ci-avant.
Actualisation des conseils de code JavaScript
Dreamweaver actualise automatiquement la liste des conseils de code disponibles lorsque vous travaillez dans un
fichier JavaScript. Par exemple, supposons que vous travailliez dans un fichier HTML principal et que vous passiez à
un fichier JavaScript afin d'y apporter une modification. Cette modification se répercute dans la liste des conseils de
code lorsque vous revenez au fichier HTML principal. Toutefois, la mise à jour automatique ne fonctionne que si vous
modifiez vos fichiers JavaScript dans Dreamweaver.
Si vous les modifiez en dehors de Dreamweaver, appuyez sur CTRL+point pour actualiser les conseils de code
JavaScript.
Conseils de code et erreurs de syntaxe
Il peut arriver que les conseils de code ne fonctionnent pas correctement si Dreamweaver détecte des erreurs de
syntaxe dans votre code. Dreamweaver signale les erreurs de syntaxe en affichant des informations à leur sujet dans
une barre en haut de la page. La barre d'informations sur les erreurs de syntaxe affiche la première ligne du code où
Dreamweaver a rencontré l'erreur. Lorsque vous avez corrigé les erreurs, Dreamweaver continue à afficher celles qui
surviennent par la suite.
Dreamweaver fournit une assistance supplémentaire en mettant en rouge les numéros des lignes où des erreurs de
syntaxe se sont produites. Cette mise en évidence est visible dans le mode Code du fichier contenant l'erreur.
Dreamweaver affiche non seulement les erreurs de syntaxe pour la page actuelle, mais aussi pour les pages associées.
Supposons par exemple que vous travailliez sur une page HTML utilisant un fichier JavaScript inclus. Si le fichier
inclus contient une erreur, Dreamweaver affiche également une alerte pour celui-ci. Vous pouvez aisément ouvrir le
fichier associé contenant l'erreur en cliquant sur son nom dans le haut du document.
Dernière mise à jour le 4/5/2011
319
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Vous pouvez désactiver la barre d'informations sur les erreurs de syntaxe. Pour ce faire, cliquez sur le bouton Alertes
d'erreurs de syntaxe dans la barre d'outils de codage.
Définition des préférences de conseils de code
Vous pouvez modifier les paramètres par défaut des conseils de code. Par exemple, si vous ne voulez pas afficher les
noms des propriétés CSS ou les conseils de code Spry, vous pouvez les désactiver parmi les préférences des conseils de
code. Vous pouvez également définir des préférences relatives au délai d'affichage des conseils de code et aux balises
de fermeture.
Même si l'affichage des conseils de code est désactivé, vous pouvez afficher un conseil en mode Code en appuyant sur
les touches Ctrl+Barre d'espace.
1 Choisissez Edition > Préférences.
2 Sélectionnez la catégorie Conseils de code dans la liste de gauche.
3 Parmi les options suivantes, définissez celles de votre choix :
Balises de fermeture Permet de spécifier le mode d'insertion des balises de fermeture par Dreamweaver. Par défaut,
Dreamweaver insère la balise de fermeture automatiquement lorsque vous tapez les caractères </. Vous pouvez
modifier ce comportement par défaut, de façon à ce que Dreamweaver insère une balise de fermeture suite au crochet
fermant (>) de la balise d'ouverture, ou de façon à omettre les balises de fin.
Activer les conseils de code Entraîne l'affichage des conseils de code lorsque vous entrez du code en mode Code.
Réglez le curseur Délai pour définir le délai (en secondes) qui s'écoule avant l'apparition des conseils appropriés.
Activer les infobulles descriptives Affiche une description détaillée (s'il en existe une) du conseil de code sélectionné.
Menus Définit précisément le type de conseils de code à afficher pendant la saisie. Libre à vous d'utiliser tous les menus
ou une partie seulement.
Voir aussi
« Utilisation des menus d'indication dans Quick Tag Editor » à la page 345
DOM (Document Object Model) W3C
Didacticiel sur les conseils de code
Conseils de code spécifiques au site
Dreamweaver CS5 permet aux développeurs qui emploient Joomla, Drupal, Wordpress ou d'autres cadres de visualiser
les conseils de code PHP lorsqu'ils écrivent en mode Code. Pour afficher ces conseils de code, vous devez tout d'abord
créer un fichier de configuration à l'aide de la boîte de dialogue Conseils de code spécifiques au site. La configuration
indique où Dreamweaver doit rechercher les conseils de code spécifiques à votre site.
Vous trouverez un didacticiel vidéo sur l'utilisation des conseils de code spécifiques au site à l'adresse
www.adobe.com/go/learn_dw_comm13_fr.
Création du fichier de configuration
La boîte de dialogue Conseils de code spécifiques au site permet de créer le fichier de configuration requis pour afficher
les conseils de code dans Dreamweaver.
Par défaut, Dreamweaver place le fichier de configuration dans le répertoire Adobe Dreamweaver
CS5\configuration\Shared\Dinamico\Presets.
Dernière mise à jour le 4/5/2011
320
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Remarque : Les conseils de code que vous créez sont spécifiques au site sélectionné dans le panneau Fichiers de
Dreamweaver. Pour que les conseils de code puissent être affichés, la page sur laquelle vous travaillez doit se trouve dans
le site actuellement sélectionné.
1 Choisissez Site > Conseils de code.
Par défaut, la fonctionnalité Conseils de code spécifiques au site analyse votre site afin de déterminer quel cadre
CMS (système de gestion du contenu) vous employez. Par défaut, Dreamweaver prend en charge trois cadres :
Drupal, Joomla et Wordpress.
Les quatre boutons à droite du menu Structure permettent d'importer, enregistrer, renommer ou supprimer des
structures de cadre.
Remarque : Il est impossible de supprimer ou de renommer les structures de cadre par défaut existantes.
2 Dans la zone Sous-racine, définissez le dossier de sous-racine où vous stockez les fichiers de votre cadre. Vous
pouvez cliquer sur l'icône de dossier en regard de la zone de texte pour rechercher l'emplacement des fichiers de
cadre.
Dreamweaver affiche l'arborescence des dossiers contenant les fichiers de votre cadre. Si les dossiers et/ou fichiers
à analyser sont tous affichés, cliquez sur OK pour exécuter l'analyse. Si vous voulez personnaliser l'analyse, passez
aux étapes suivantes.
3 Cliquez sur le bouton Plus (+) dans le haut de la fenêtre Fichiers afin de sélectionner un fichier ou un dossier à
ajouter à l'analyse. Dans la boîte de dialogue Ajouter fichier/dossier, vous pouvez spécifier les extensions de fichiers
spécifiques que vous voulez inclure.
Remarque : La définition d'extensions de fichier spécifiques accélère le processus d'analyse.
4 Pour retirer des fichiers de l'analyse, sélectionnez-les puis cliquez sur le bouton Moins (-) dans le haut de la fenêtre
Fichiers.
Remarque : Si vous avez sélectionné le cadre Drupal ou Joomla, la boîte de dialogue Conseils de code spécifiques au
site affiche un chemin d'accès supplémentaire vers n fichier dans votre dossier de configuration de Dreamweaver. Ne
le supprimez pas, car il est nécessaire en cas d'emploi de ces cadres.
5 Pour personnaliser la façon dont la fonctionnalité Conseils de code spécifiques au site traite un fichier ou un dossier
précis, sélectionnez-le dans la liste et effectuez l'une des actions suivantes :
• Choisissez Analyser ce dossier pour inclure le dossier sélectionné dans l'analyse.
• Sélectionnez Récursif pour inclure tous les fichiers et dossiers du répertoire sélectionné.
• Cliquez sur le bouton Extensions pour ouvrir la boîte de dialogue Rechercher des extensions, où vous pouvez
préciser les extensions de fichiers à inclure dans l'analyse pour un fichier ou un dossier déterminé.
Enregistrement de la structure du site
Vous pouvez enregistrer la structure de site personnalisée que vous avez créée dans la boîte de dialogue Conseils de
code spécifiques au site.
1 Créez la structure des fichiers et des dossiers désirée, en ajoutant et supprimant les fichiers et dossiers selon vos
besoins.
2 Cliquez sur le bouton Enregistrer la structure dans le coin supérieur droit de la boîte de dialogue.
3 Donnez un nom à la structure du site, puis cliquez sur Enregistrer.
Remarque : Si le nom que vous indiquez est déjà utilisé, Dreamweaver vous invite à entrer un nom différent ou à
confirmer que vous voulez écraser la structure portant ce même nom. Il est impossible d'écraser les structures de cadre par
défaut.
Dernière mise à jour le 4/5/2011
321
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Modification du nom d'une structure de site
Lorsque vous renommez la structure de votre site, n'oubliez pas que vous ne pouvez pas utiliser les noms d'une des
trois structures de cadre de site par défaut, ni le mot « custom » (personnalisé).
1 Affichez la structure à renommer.
2 Cliquez sur l'icône Renommer la structure dans le coin supérieur droit de la boîte de dialogue.
3 Entrez le nouveau nom de la structure, puis cliquez sur Renommer.
Remarque : Si le nom que vous indiquez est déjà utilisé, Dreamweaver vous invite à entrer un nom différent ou à
confirmer que vous voulez écraser la structure portant ce même nom. Il est impossible d'écraser les structures de cadre par
défaut.
Ajout de fichiers ou de dossiers à la structure d'un site
Vous pouvez ajouter n'importe quel fichier ou dossier associé à votre cadre. Vous pouvez ensuite préciser les
extensions des fichiers à analyser. (Voir la section suivante.)
1 Cliquez sur le bouton Plus (+) dans le haut de la fenêtre Fichiers pour ouvrir la boîte de dialogue Ajouter
fichier/dossier.
2 Dans la zone Ajouter fichier/dossier, entrez le chemin d'accès au fichier ou au dossier à ajouter. Vous pouvez
également cliquer sur l'icône de dossier à côté de la zone de texte pour rechercher un fichier ou un dossier.
3 Cliquez sur le bouton Plus (+) dans le haut de la fenêtre Extensions pour préciser les extensions des fichiers à
analyser.
Remarque : La définition d'extensions de fichier spécifiques accélère le processus d'analyse.
4 Cliquez sur Ajouter.
Recherche d'extensions de fichiers dans un site
Utilisez la boîte de dialogue Rechercher des extensions pour afficher et trouver les extensions des fichiers inclus dans
la structure du site.
1 Dans la boîte de dialogue Conseils de code spécifiques au site, cliquez sur le bouton Extensions.
La boîte de dialogue Rechercher des extensions affiche les extensions pouvant être analysées pour l'instant.
2 Pour ajouter une autre extension à la liste, cliquez sur le bouton Plus (+) dans le haut de la fenêtre Extensions.
3 Pour supprimer une extension de la liste, cliquez sur le bouton Moins (-).
Insertion de code avec la barre d'outils de codage
1 Assurez-vous que vous êtes en mode Code (Affichage > Code).
2 Placez le curseur dans le code, ou sélectionnez un bloc de code.
3 Cliquez sur un bouton de la barre d'outils de codage, ou sélectionnez un élément de l'un des menus contextuels de
la barre d'outils.
Pour connaître la fonction de chaque bouton, positionnez le pointeur sur ce bouton jusqu'à ce qu'une info-bulle
apparaisse. La barre d'outils de codage contient par défaut les boutons suivants :
Ouvrir les documents Affiche la liste des documents ouverts. Lorsque cette option est sélectionnée, elle s'affiche dans
la fenêtre Document.
Afficher la fenêtre Navigation dans le code Affiche la fenêtre Navigation dans le code. Pour plus d'informations,
consultez la rubrique « Navigation vers le code apparenté » à la page 327.
Dernière mise à jour le 4/5/2011
322
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Réduire balises entières Réduit tout le contenu compris entre une balise d’ouverture et sa balise de fermeture (par
exemple, tout le code compris entre <table> et </table>). Pour réduire tout le contenu d'une balise complète, placez
le point d'insertion sur la balise d'ouverture ou de fermeture, puis cliquez sur le bouton Réduire balise entière.
Il est également possible de réduire le code situé à l'extérieur d'une balise complète, en plaçant le point d'insertion dans
une balise d'ouverture ou de fermeture avant de cliquer sur le bouton Réduire balise entière tout en maintenant la
touche Alt enfoncée (Windows) ou la touche Option (Macintosh). Par ailleurs, vous pouvez maintenir la touche Ctrl
enfoncée tout en cliquant sur ce bouton pour désactiver la réduction intelligente. Dans ce cas, Dreamweaver n’ajuste pas
le contenu réduit à l’extérieur de la paire de balises. Pour plus d'informations sur le mode Code, consultez la section « A
propos de la réduction du code » à la page 334.
Réduire la sélection Réduit le code sélectionné.
Vous pouvez également réduire le code en dehors d'une sélection en cliquant tout en maintenant enfoncée la touche
Alt (Windows) ou Option (Macintosh) sur le bouton Réduire sélection. Par ailleurs, vous pouvez maintenir la touche
Ctrl enfoncée tout en cliquant sur ce bouton pour désactiver la réduction intelligente. Dans ce cas, Dreamweaver n’ajuste
pas le contenu et réduit exactement le code sélectionné. Pour plus d'informations sur le mode Code, consultez la section
« A propos de la réduction du code » à la page 334.
Développer tout Rétablit tout le code réduit.
Sélectionner une balise parent Sélectionne le contenu et les balises d’ouverture et de fermeture qui encadrent la ligne
dans laquelle est placé le point d’insertion. Si vous cliquez plusieurs fois sur ce bouton et que toutes vos balises sont
équilibrées, Dreamweaver sélectionne finalement les balises html et /html situées aux extrémités.
Equilibrer les accolades Sélectionne tout le code se trouvant à l'intérieur des parenthèses, des accolades ou des crochets
qui encadrent la ligne dans laquelle est placé le point d’insertion. Si vous cliquez plusieurs fois sur ce bouton et que
toutes vos balises sont équilibrées, Dreamweaver sélectionne finalement les parenthèses, accolades ou crochets les plus
extérieur(e)s du document.
Numéros de lignes Permet d'afficher ou masquer les numéros de lignes au début de chaque ligne de code.
Surligner le code non valide Surligne le code non valide en jaune.
Alertes d'erreurs de syntaxe dans la barre d'information Active ou désactive une barre d'information, dans le haut de
la page, qui vous avertit des erreurs de syntaxe. Lorsque Dreamweaver détecte une erreur de syntaxe, la barre
d'information sur les erreurs de syntaxe spécifie la ligne de code où cette erreur est survenue. En outre, Dreamweaver
met en surbrillance le numéro de la ligne de l'erreur, sur la gauche du document, en mode Code. La barre d'information
est activée par défaut, mais elle ne s'affiche que lorsque Dreamweaver détecte des erreurs de syntaxe sur la page.
Appliquer commentaire Permet d'encadrer le code sélectionné avec des balises de commentaires, ou d'ouvrir de
nouvelles balises de commentaires.
• Appliquer Commentaire HTML encadre le code sélectionné de balises <!-- et -->, ou ouvre une nouvelle balise si
aucun code n'est sélectionné.
• Appliquer Commentaire // insère une double barre oblique (//) au début de chaque ligne du code CSS ou
JavaScript sélectionné, ou insère une unique balise // si aucun code n'est sélectionné.
• Appliquer Commentaire /* */ encadre le code CSS ou JavaScript sélectionné avec les codes de commentaires /* et /*.
• La marque de commentaire ' a été conçue pour le code Visual Basic. Elle insère un guillemet droit simple au début
de chaque ligne sélectionnée d'un script Visual Basic, ou insère un guillemet droit simple au point d'insertion si
aucun code n'est sélectionné.
• Lorsque vous travaillez sur un fichier ASP, ASP.NET, JSP, PHP ou ColdFusion, si vous appliquez l’option
Appliquer Commentaire sur serveur, Dreamweaver détecte automatiquement la balise de commentaire correcte et
l’applique à la sélection.
Dernière mise à jour le 4/5/2011
323
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Supprimer commentaire Supprime les balises de commentaires du code sélectionné. Si une sélection comporte des
commentaires incorporés, seules les balises de commentaire externe sont supprimées.
Envelopper avec balise Permet d'encadrer le code sélectionné avec la balise indiquée dans Quick Tag Editor.
Fragment de code récents Permet de choisir dans le panneau Fragments de code un fragment de code récemment
utilisé et de l'insérer. Pour plus d'informations, consultez la section « Manipulation de fragments de code » à la
page 330.
Déplacer ou convertir une feuille CSS Permet de déplacer du code CSS ou de convertir du code CSS intégré en règles
CSS. Pour plus d'informations, consultez les sections « Déplacement/exportation de règles CSS » à la page 149 et
« Conversion d'un style CSS intégré en une règle CSS » à la page 150.
Indentation du code Ramène la sélection vers la droite.
Indentation négative du code Ramène la sélection vers la gauche.
Mise en forme du code source Applique les formats de code précédemment définis au code sélectionné (ou à la page
entière si aucun code n'est sélectionné). Vous pouvez également définir les préférences de formatage du code en
sélectionnant Formatage du code source avec le bouton du même nom, ou en modifiant les bibliothèques de balises en
sélectionnant Edition, Bibliothèques de balises.
Le nombre de boutons disponibles dans la barre d'outils de codage varie selon la taille d'affichage en mode Code dans
la fenêtre du document. Pour voir tous les boutons disponibles, vous pouvez redimensionner la fenêtre d'affichage du
mode Code ou cliquer sur le bouton d'expansion, à la base de la barre d'outils de codage.
Vous pouvez également modifier la barre d'outils de codage pour afficher des boutons supplémentaires (Retour
automatique à la ligne, Caractères masqué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.
Remarque : L'option d'affichage des caractères masqués, qui ne fait pas partie des boutons par défaut de la barre d'outils
de codage, est disponible à partir du menu Affichage (Affichage > Options d'affichage de code > Caractères masqués).
Voir aussi
« Vérification de l'équilibre des balises et des accolades » à la page 337
« Présentation de la barre d'outils de codage » à la page 12
« Affichage des barres d'outils » à la page 22
Insertion de code à l'aide du panneau Insertion
1 Positionnez le point d'insertion dans le code.
2 Sélectionnez la catégorie appropriée du panneau Insertion.
3 Cliquez sur un bouton du panneau Insertion ou sélectionnez un élément de l'un des menus de ce panneau.
Dès que vous cliquez sur une icône, le code peut apparaître immédiatement dans la page ou une boîte de dialogue peut
vous demander de spécifier des informations supplémentaires pour terminer le code.
Pour connaître la fonction de chaque bouton, positionnez le pointeur sur ce bouton jusqu'à ce qu'une info-bulle
apparaisse. Le nombre et le type des boutons du panneau Insertion varient selon la nature du document affiché. et
selon que le mode Code ou Création est actif.
Bien que le panneau Insertion regroupe les balises fréquemment utilisées, son contenu n'est pas exhaustif. Vous
trouverez un choix plus varié de balises dans le sélecteur de balises.
Dernière mise à jour le 4/5/2011
324
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Voir aussi
« Utilisation du panneau Insertion » à la page 213
Insertion de balises avec le Sélecteur de balises
Vous pouvez utiliser le sélecteur de balises pour insérer dans une page n'importe quelle balise figurant dans les
bibliothèques de balises de Dreamweaver (notamment les bibliothèques de balises de ColdFusion et ASP.NET).
1 Placez le point d'insertion dans le code, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la
touche Contrôle enfoncée (Macintosh), puis sélectionnez Insérer la balise.
Le Sélecteur de balises s'affiche. Le panneau de gauche répertorie les bibliothèques de balises prises en charge, tandis
que le panneau de droite affiche les balises individuelles du dossier de bibliothèques de balises sélectionné.
2 Dans la bibliothèque de balises, sélectionnez une catégorie de balises ou développez cette catégorie pour
sélectionner une sous-catégorie.
3 Sélectionnez la balise souhaitée dans le volet de droite.
4 Pour afficher les informations concernant la syntaxe et l'emploi de la balise dans le sélecteur de balises, cliquez sur
le bouton Infos sur les balises. Ces informations, si elles existent, s'affichent.
5 Pour afficher ces informations dans le panneau Référence, cliquez sur l'icône <?>. Ces informations, si elles existent,
s'affichent.
6 Cliquez sur le bouton Insérer pour insérer la balise sélectionnée dans le code.
Si la balise affichée dans le volet de droite apparaît entre crochets, par exemple <title></title>), elle ne nécessite
aucune information complémentaire et s'insère directement dans le document au niveau du point d'insertion.
Si la balise ne nécessite aucune information complémentaire, un éditeur de balises s'affiche.
7 Le cas échéant, entrez les informations supplémentaires dans l'éditeur de balises, puis cliquez sur OK.
8 Cliquez sur le bouton Fermer.
Voir aussi
« A propos des bibliothèques de balises de Dreamweaver » à la page 355
Insertion de commentaires HTML
Un commentaire est un texte descriptif inséré dans le code HTML pour expliciter le code ou fournir
d'autres informations. Le commentaire apparaît uniquement en mode Code ; il ne s'affiche pas dans un navigateur.
Insertion d'un commentaire au niveau du point d'insertion
❖ Choisissez Insertion > Commentaire.
En mode Code, une balise de commentaire est insérée et le point d'insertion est placé au milieu de celle-ci. Saisissez
votre commentaire.
En mode Création, la boîte de dialogue Commentaire s'affiche. Entrez le commentaire, puis cliquez sur OK.
Affichage des marqueurs de commentaires en mode Création
❖ Choisissez Affichage > Assistances visuelles > Eléments invisibles.
Vérifiez que l'option Commentaires est sélectionnée dans les préférences des éléments invisibles. Dans le cas contraire,
le marqueur de commentaire ne s'affiche pas.
Dernière mise à jour le 4/5/2011
325
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Modification d'un commentaire existant
• En mode Code, recherchez le commentaire pour en modifier le texte.
• En mode Création, sélectionnez le marqueur Commentaire, modifiez le texte de votre commentaire dans
l'inspecteur Propriétés, puis cliquez dans la fenêtre de document.
Copie et collage de code
1 Copiez le code à partir du mode Code ou d'une autre application.
2 Placez le point d'insertion en mode Code, puis choisissez Edition > Coller.
Voir aussi
« Collage et déplacement de fragments de code réduits » à la page 335
Modification de balises avec des éditeurs de balises
Les éditeurs de balises permettent d'afficher, de spécifier et de modifier les attributs d'une balise.
1 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh)
sur une balise (en mode Code) ou sur un objet (en mode Création), puis sélectionnez la commande Modifier la
balise du menu contextuel. Le contenu de cette boîte de dialogue varie selon la balise sélectionnée.
2 Indiquez ou modifiez les attributs de la balise, puis cliquez sur OK.
Pour obtenir davantage d'informations sur la balise à partir de l'éditeur de balises, cliquez sur l'option Infos sur les
balises.
Modification de code à l'aide du menu Codage
1 En mode Code, sélectionnez du code, puis cliquez avec le bouton droit de la souris (Windows) ou en maintenant
la touche Contrôle enfoncée (Macintosh).
2 Cliquez sur le sous-menu Sélection puis choisissez l'une des options suivantes :
Réduire la sélection Réduit le code sélectionné.
Réduire à l'extérieur de la sélection Réduit tout le code à l'extérieur du code sélectionné.
Développer la sélection Développe le fragment de code sélectionné.
Réduire balises entières Réduit tout le contenu compris entre une balise d’ouverture et sa balise de fermeture (par
exemple, tout le code compris entre <table> et </table>).
Réduire extérieur balises entières Réduit le contenu à l'extérieur d'un jeu de balises d'ouverture et de fermeture (par
exemple, le contenu à l'extérieur de <table> et </table>).
Développer tout Rétablit tout le code réduit.
Appliquer Commentaire HTML Encadre le code sélectionné de balises <!-- et -->, ou ouvre une nouvelle balise si
aucun code n'est sélectionné.
Appliquer Commentaire /* */ Encadre le code CSS ou JavaScript sélectionné avec les codes de commentaires /* et */.
Appliquer Commentaire // Insère une double barre oblique (//) au début de chaque ligne du code CSS ou JavaScript
sélectionné, ou insère une unique balise // si aucun code n’est sélectionné.
Appliquer Commentaire ' Insère un guillemet droit simple au début de chaque ligne sélectionnée d'un script Visual
Basic, ou insère un guillemet droit simple au point d'insertion si aucun code n'est sélectionné.
Dernière mise à jour le 4/5/2011
326
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Appliquer Commentaire sur serveur Entoure le code sélectionné. Lorsque vous travaillez sur un fichier ASP,
ASP.NET, JSP, PHP ou ColdFusion, si vous appliquez l’option Appliquer Commentaire sur serveur, Dreamweaver
détecte automatiquement la balise de commentaire correcte et l’applique à la sélection.
Appliquer correction barre oblique inversée-commentaire Entoure le code CSS sélectionné de balises de commentaire
qui forcent Internet Explorer 5 pour Macintosh à ignorer le code.
Appliquer correction Ciao Entoure le code CSS sélectionné de balises de commentaire qui forcent Internet Netscape
Navigator 4 à ignorer le code.
Supprimer commentaire Supprime les balises de commentaires du code sélectionné. Si une sélection comporte des
commentaires incorporés, seules les balises de commentaire externe sont supprimées.
Supprimer correction barre oblique inversée-commentaire Supprime les balises de commentaires du code CSS
sélectionné. Si une sélection comporte des commentaires incorporés, seules les balises de commentaire externe sont
supprimées.
Supprimer correction Ciao Supprime les balises de commentaires du code CSS sélectionné. Si une sélection comporte
des commentaires incorporés, seules les balises de commentaire externe sont supprimées.
Convertir les tabulations en espaces Convertit toutes les tabulations de la sélection en espaces ; le nombre d'espaces
correspond à la valeur de taille de tabulation définie dans les préférences Format. Pour plus d'informations, consultez
la section « Modification du format du code » à la page 312.
Convertir les espaces en tabulations Convertit les groupes d'espaces de la sélection en tabulations. Les groupes dont le
nombre d'espaces correspond à la valeur de taille de tabulation définie sont convertis en tabulation.
Retrait Met la sélection en retrait, en la repoussant vers la droite. Pour plus d'informations, consultez la section « Mise
en retrait des blocs de code » à la page 327.
Retrait négatif Ramène la sélection vers la gauche.
Supprimer toutes les balises Supprime toutes les balises de la sélection.
Convertir les lignes en tableaux Insère une balise table sans attribut de part et d'autre de la sélection.
Ajouter des sauts de ligne Ajoute une balise br à la fin de chaque ligne de la sélection.
Convertir en majuscules Convertit toutes les lettres de la sélection (y compris les noms et les valeurs des balises et des
attributs) en majuscules.
Convertir en minuscules Convertit toutes les lettres de la sélection (y compris les noms et les valeurs des balises et des
attributs) en minuscules.
Convertir les balises en majuscules Convertit tous les noms de balise et d'attribut et toutes les valeurs d'attribut de la
sélection en majuscules.
Convertir les balises en minuscules Convertit tous les noms de balise et d'attribut et toutes les valeurs d'attribut de la
sélection en minuscules.
Voir aussi
« Réduction et développement de fragments de code » à la page 334
Dernière mise à jour le 4/5/2011
327
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Modification d'une balise de langage de serveur à l'aide de l'inspecteur
Propriétés
Vous pouvez modifier le code dans une balise de langage de serveur (comme une balise ASP) sans accéder au mode
Code, grâce à l'inspecteur Propriétés du code.
1 En mode Création, sélectionnez l'icône visuelle de balise de langage de serveur.
2 Dans l'inspecteur Propriétés, cliquez sur le bouton Edition.
3 Apportez les modifications requises au code de la balise puis cliquez sur OK.
Voir aussi
« Configuration de l'ordinateur pour le développement d'applications » à la page 553
Mise en retrait des blocs de code
Lorsque vous rédigez et modifiez votre code en mode Code ou dans l'inspecteur de code, vous pouvez corriger le
niveau de mise en retrait de la ligne ou du bloc de code sélectionnés, en les déplaçant d'une tabulation vers la gauche
ou vers la droite.
Mise en retrait du bloc de code sélectionné
• Appuyez sur la touche de tabulation.
• Sélectionnez Edition > Indentation du code.
Annulation de la mise en retrait du bloc de code sélectionné
• Appuyez sur Maj+Tab.
• Sélectionnez Edition > Indentation négative du code.
Navigation vers le code apparenté
La fenêtre Navigation dans le code affiche une liste de codes source apparentés à une sélection spécifique sur votre
page. Vous pouvez l'utiliser pour naviguer vers les codes source apparentés, comme des règles CSS internes et externes,
des inclusions côté serveur, des fichiers JavaScript externes, des fichiers de modèles parents, des fichiers de
bibliothèque et des fichiers source iframe. Lorsque vous cliquez sur un lien dans la fenêtre Navigation dans le code,
Dreamweaver ouvre le fichier contenant le code concerné. Ce fichier s'affiche dans la section des fichiers associés, pour
autant que cette fonctionnalité soit activée. Si elle n'est pas activée, Dreamweaver ouvre le fichier sélectionné dans un
document séparé, dans la fenêtre de document.
Si vous cliquez sur une règle CSS dans la fenêtre Navigation dans le code, Dreamweaver accède directement à cette
règle. S'il s'agit d'une règle interne du fichier, Dreamweaver l'affiche en mode fractionné. Si la règle est un fichier CSS
externe, Dreamweaver ouvre ce dernier et affiche la règle dans la section des fichiers associés, au-dessus du document
principal.
Vous pouvez accéder à la fenêtre Navigation dans le code depuis les modes Création, Code et fractionné, ainsi qu'à
partir de l'inspecteur de code.
Vous trouverez un didacticiel vidéo sur l'utilisation du navigateur de code, réalisé par l'équipe de Dreamweaver, à
l'adresse http://www.adobe.com/go/dw10codenav_fr.
Vous trouverez un didacticiel vidéo relatif à l'utilisation du mode Affichage en direct, aux fichiers associés et à la
fenêtre Navigation dans le code à l'adresse www.adobe.com/go/lrvid4044_dw_fr.
Dernière mise à jour le 4/5/2011
328
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Ouverture de la fenêtre Navigation dans le code
❖ Tout en maintenant la touche ALT (Windows) ou les touches Commande+Option (Macintosh) enfoncées, cliquez
n'importe où sur la page. La fenêtre Navigation dans le code affiche des liens vers le code qui s'applique à la zone
sur laquelle vous venez de cliquer.
Cliquez en dehors de la fenêtre Navigation dans le code pour la fermer.
Remarque : Vous pouvez également ouvrir la fenêtre Navigation dans le code en cliquant sur l'icône
s'affiche à proximité du point d'insertion sur la page si la souris reste inactive pendant 2 secondes.
. Cette icône
Navigation vers le code à l'aide de la fenêtre Navigation dans le code
1 Ouvrez la fenêtre Navigation dans le code à partir de la zone qui vous intéresse.
2 Clique sur l'élément de code auquel vous voulez accéder.
La fenêtre Navigation dans le code regroupe les sources de code apparentées par fichier et énumère les fichiers dans
l'ordre alphabétique. Par exemple, supposons que des règles CSS de trois fichiers externes influent sur la sélection dans
votre document. Dans ce cas, la fenêtre Navigation dans le code présente la liste de ces trois fichiers, ainsi que des règles
CSS relatives à la sélection. Pour le code CSS relatif à une sélection précise, la fenêtre Navigation dans le code
fonctionne de façon similaire au panneau Styles CSS du mode Actuel.
Lorsque vous maintenez le pointeur de la souris au-dessus d'une règle CSS, la fenêtre Navigation dans le code affiche,
dans une infobulle, les propriétés de cette règle. Ces infobulles peuvent vous aider à distinguer des règles qui partagent
un même nom.
Désactivation de l'icône Navigation dans le code
1 Ouvrez la fenêtre Navigation dans le code.
2 Cliquez sur Désactiver l'indicateur dans le coin inférieur droit de la fenêtre.
3 Cliquez en dehors de la fenêtre Navigation dans le code pour la fermer.
Pour activer de nouveau l'icône Navigation dans le code, cliquez tout en maintenant la touche ALT (Windows) ou les
touches Commande+Option (Macintosh) enfoncées, afin d'ouvrir la fenêtre Navigation dans le code, puis désactivez
l'option Désactiver l'indicateur.
Voir aussi
« Ouverture des fichiers associés » à la page 72
Didacticiel sur la navigation dans le code
Accès à une fonction JavaScript ou VBScript
En mode Code et dans l'inspecteur de code, vous pouvez afficher la liste des fonctions JavaScript ou VBScript de votre
code et passer ainsi directement à l'une de ces dernières.
1 Affichez le document en mode Code (Affichage > Code) ou l'inspecteur de code (Fenêtre > Inspecteur de code).
2 Effectuez l'une des opérations suivantes :
• En mode Code, cliquez du bouton droit (Windows) ou tout en appuyant sur Contrôle (Macintosh) dans la fenêtre
Code, puis sélectionnez le sous-menu Fonctions dans le menu contextuel.
Le sous-menu Fonctions ne s'affiche pas en mode Création.
Si votre code contient des fonctions JavaScript ou VBScript, elles apparaissent dans le sous-menu.
Dernière mise à jour le 4/5/2011
329
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Pour afficher ces fonctions dans l'ordre alphabétique, cliquez avec le bouton droit de la souris tout en appuyant sur la
touche Ctrl (Windows) ou en maintenant les touches Ctrl et Option enfoncées (Macintosh) en mode Code, puis
sélectionnez le sous-menu Fonctions.
• Dans l'Inspecteur de code, cliquez sur le bouton de navigation dans le code ({ }) de la barre d'outils.
3 Sélectionnez un nom de fonction pour atteindre cette dernière.
Extraction de JavaScript
JavaScript Extractor (JSE) supprime tout le code JavaScript (ou la plupart de celui-ci) de votre document
Dreamweaver, l'exporte dans un fichier externe et lie ce fichier à votre document. JSE peut également supprimer des
gestionnaires d'événements tels que onclick et onmouseover de votre code puis joindre à votre document, de manière
transparente, le code JavaScript associé à ces gestionnaires.
Avant d'employer JavaScript Extractor, nous attirons votre attention sur les limitations suivantes :
• JSE n'extrait pas les balises de script du corps du document (sauf dans le cas de widgets Spry). Il se pourrait que
l'externalisation de ces scripts donne des résultats inattendus. Par défaut, Dreamweaver affiche la liste de ces scripts
dans la boîte de dialogue Externaliser le code JavaScript, mais ne les sélectionne pas pour extraction. Si vous le
souhaitez, vous pouvez les sélectionner manuellement.
• JSE n'extrait pas le code JavaScript des régions modifiables de fichiers .dwt (modèle Dreamweaver), de régions non
modifiables d'instances de modèles ou d'éléments de bibliothèque Dreamweaver.
• Lorsque vous avez extrait le code JavaScript à l'aide de l'option Externaliser le code JavaScript et associer de manière
transparente, vous ne pouvez plus modifier les comportements Dreamweaver dans le panneau Comportements.
Dreamweaver ne peut pas inspecter et compléter le panneau Comportements à l'aide de comportements qu'il a
associés de manière transparente.
• Il est impossible d'annuler vos modifications après avoir fermé la page. Vous pouvez par contre annuler les
modifications tant que vous restez dans la même session d'édition. Pour annuler, choisissez Edition > Annuler
Externaliser le code JavaScript.
• Il se peut que certaines pages très complexes ne fonctionnent pas comme prévu. Faites preuve de prudence lors de
l'extraction de code JavaScript de pages dont le corps et les variables globales contiennent document.write().
Vous trouverez un didacticiel vidéo sur la prise en charge de JavaScript dans Dreamweaver, réalisé par l'équipe de
Dreamweaver, à l'adresse www.adobe.com/go/dw10javascript_fr.
Pour utiliser JavaScript Extractor :
1 Ouvrez une page qui contient du code JavaScript (par exemple une page Spry).
2 Choisissez Commandes > Externaliser le code JavaScript.
3 Dans la boîte de dialogue Externaliser le code JavaScript, modifiez éventuellement les options par défaut.
• Choisissez Externaliser le code JavaScript uniquement si vous voulez que Dreamweaver déplace le code
JavaScript dans un fichier externe et qu'il y fasse référence dans le document actuel. Cette option laisse les
gestionnaires d'événements tels que onclick et onload dans le document et conserve les comportements
visibles dans le panneau Comportements.
• Choisissez Externaliser le code JavaScript et associer de manière transparente si vous voulez que Dreamweaver
1) déplace le code JavaScript vers un fichier externe et y fasse référence dans le document actuel, et 2) supprime
les gestionnaires d'événements du code HTML et les insère en cours d'exécution à l'aide de JavaScript. Lorsque
vous sélectionnez cette option, vous ne pouvez plus modifier les comportements dans le panneau
Comportements.
Dernière mise à jour le 4/5/2011
330
UTILISATION DE DREAMWEAVER
Utilisation de code de page
• Dans la colonne Modifier, désactivez les modifications que vous ne voulez pas apporter, ou activez celles que
Dreamweaver n'a pas sélectionnées par défaut.
Par défaut, Dreamweaver présente mais ne sélectionne pas les modifications suivantes :
• Les blocs de script dans l'en-tête du document qui contiennent des appels document.write() ou
document.writeln().
• Les blocs de script dans l'en-tête du document qui contiennent des signatures de fonction associées au code
de gestion EOLAS, qui utilise document.write().
• Les blocs de script dans le corps du document, sauf s'ils contiennent uniquement un widget Spry ou des
constructeurs d'ensembles de données Spry.
• Dreamweaver attribue automatiquement des ID aux éléments qui n'en possèdent pas encore. Si ces ID ne vous
conviennent pas, vous pouvez les modifier dans les zones de texte ID.
4 Cliquez sur OK.
La boîte de dialogue de synthèse récapitule les extractions. Passez ces extractions en revue puis cliquez sur OK.
5 Enregistrez la page.
Dreamweaver crée un fichier SpryDOMUtils.js, ainsi qu'un autre fichier contenant le code JavaScript extrait.
Dreamweaver enregistre le fichier SpryDOMUtils.js dans un dossier SpryAssets de votre site. L'autre fichier est
enregistré au même niveau que la page à partir de laquelle vous avez extrait le code JavaScript. N'oubliez pas de charger
ces deux fichiers dépendants sur votre serveur Web lorsque vous enverrez la page d'origine.
Voir aussi
« Création de pages Spry visuellement » à la page 438
Manipulation de fragments de code
Les fragments de code permettent de stocker des contenus en vue de pouvoir les réutiliser rapidement. Vous pouvez
créer, insérer, modifier ou supprimer des fragments de code HTML, JavaScript, CFML, ASP, PHP, etc. Vous pouvez
également gérer et partager vos fragments de code avec les autres membres de l'équipe. Vous disposez de quelques
fragments prédéfinis que vous pouvez employer comme point de départ.
Les fragments de code contenant des balises <font> et d'autres éléments et attributs déconseillés ont été déplacés dans
le dossier Anciennes versions du panneau Fragments de code.
Insertion d'un fragment de code
1 Placez le point d'insertion à l'endroit où vous souhaitez insérer le fragment de code ou sélectionnez le code à
combiner avec le fragment choisi.
2 Dans le panneau Fragments de code (Fenêtre > Fragments de code), double-cliquez sur le fragment de code.
Vous pouvez également cliquer avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle
enfoncée (Macintosh) sur le fragment de code, puis sélectionner Insérer dans le menu contextuel.
Création d'un fragment de code
1 Cliquez sur l'icône Nouveau fragment de code situé au bas du panneau Fragments de code
2 Donnez un nom au fragment de code.
Remarque : Les noms de fragments de code ne peuvent pas comporter les caractères qui sont interdits dans les noms de
fichiers (barres obliques (/ ou \), caractères spéciaux ou guillemets doubles (“)).
Dernière mise à jour le 4/5/2011
331
UTILISATION DE DREAMWEAVER
Utilisation de code de page
3 (Facultatif) Entrez la description du fragment de code sous forme de texte. qui permettra aux autres membres de
l'équipe de l'utiliser plus facilement.
4 Pour l'option Type de fragment de code, sélectionnez Envelopper la sélection ou Insérer le bloc.
a Si vous avez opté pour l'enveloppement de la sélection, ajoutez du code aux options suivantes :
Insérer avant Tapez ou collez le code à insérer avant la sélection en cours.
Insérer après Tapez ou collez le code à insérer après la sélection en cours.
Pour définir un espacement par défaut entre les blocs, utilisez des sauts de ligne ; appuyez sur Entrée (Windows) ou
Retour (Macintosh) à l'intérieur des zones de texte.
Remarque : Dans la mesure où les fragments de code peuvent être créés en début ou en fin de bloc, vous pouvez les utiliser
pour encadrer d'autres balises et contenus. Ce procédé est pratique pour insérer un formatage, des liens, des éléments de
navigation et des blocs de script spéciaux. Il vous suffit de mettre en surbrillance l'élément à entourer puis d'insérer le
fragment de code.
b Si vous avez opté pour l'insertion du bloc, tapez ou collez le code à insérer.
5 (Facultatif) Sélectionnez le type d'aperçu : Code ou Création.
Création Restitue le code et l'affiche dans le volet d'aperçu du panneau Fragment de code.
Code Affiche le code dans le volet d'aperçu.
6 Cliquez sur OK.
Modification ou suppression d'un fragment de code
❖ Dans le panneau Fragments de code, sélectionnez un fragment de code, puis cliquez sur le bouton Modifier le
fragment de code ou sur le bouton Supprimer, dans le bas du panneau.
Création de dossiers de fragments de code et gestion de fragments
1 Cliquez sur le bouton Nouveau dossier de fragments de code situé au bas du panneau Fragments de code.
2 Faites glisser des fragments de code vers le nouveau dossier ou d'autres dossiers, à votre convenance.
Ajout ou modification d'un raccourci clavier pour un fragment de code
1 Dans le panneau Fragments de code, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la
touche Ctrl enfoncée (Macintosh) et sélectionnez Modifier les raccourcis clavier.
L'éditeur de raccourcis clavier s'ouvre.
2 Dans le menu contextuel Commandes, choisissez Fragments de code.
Une liste de fragments de code s'affiche.
3 Sélectionnez celui qui vous intéresse et affectez-lui le raccourci clavier de votre choix.
Pour plus d'informations, consultez la section « Personnalisation des raccourcis clavier » à la page 35.
Partage d'un fragment de code avec d'autres membres de l'équipe
1 Recherchez le fichier correspondant au fragment de code à partager dans le sous-dossier Configuration/Snippets
du dossier de l'application Dreamweaver.
2 Copiez le fichier du fragment de code dans un dossier partagé sur votre ordinateur ou sur un ordinateur en réseau.
3 Veillez à ce que les autres membres de l'équipe copient le fichier du fragment de code dans leurs dossiers
Configuration/Snippets respectifs.
Dernière mise à jour le 4/5/2011
332
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Recherche de balises, d'attributs ou de chaînes de texte dans le code
Vous pouvez rechercher certains types de balises, des attributs et des valeurs d'attribut. Par exemple, vous pouvez
rechercher toutes les balises img n'ayant pas l'attribut alt.
Vous pouvez également rechercher des chaînes de texte spécifiques se trouvant à l'intérieur ou à l'extérieur d'un jeu de
balises. Par exemple, vous pouvez rechercher le mot Untitled document entre les balises title pour trouver toutes
les pages sans nom du site.
1 Ouvrez le document dans lequel la recherche doit être effectuée ou sélectionnez des documents ou un dossier dans
le panneau Fichiers.
2 Sélectionnez la commande Edition > Rechercher et remplacer.
3 Indiquez les fichiers sur lesquels doit porter la recherche, puis indiquez le type de recherche à effectuer et enfin le
texte ou les balises à rechercher. Le cas échéant, spécifiez également le texte de remplacement. Cliquez ensuite sur
un des boutons Rechercher ou Remplacer.
4 Cliquez sur le bouton Fermer.
5 Pour effectuer une nouvelle recherche sans afficher la boîte de dialogue Rechercher et remplacer, appuyez sur F3
(Windows) ou Commande+G (Macintosh).
Voir aussi
« Expressions régulières » à la page 307
« Recherche et remplacement de texte » à la page 229
Enregistrement et chargement de modèles de recherche
Vous pouvez sauvegarder vos modèles de recherche pour les réutiliser ultérieurement.
Voir aussi
« Expressions régulières » à la page 307
« Recherche et remplacement de texte » à la page 229
Enregistrement d'un modèle de recherche
1 Dans la boîte de dialogue Rechercher et remplacer (Edition > Rechercher et remplacer), définissez les paramètres
de la recherche.
2 Cliquez sur le bouton Enregistrer la requête (représentant une disquette).
3 Dans la boîte de dialogue qui s'affiche, recherchez le dossier où vous voulez enregistrer les requêtes. Saisissez un
nom pour identifier le fichier correspondant à la requête, puis cliquez sur Enregistrer.
Par exemple, si le modèle de recherche inclut la recherche de balises img sans l'attribut alt, vous pouvez nommer la
requête img_sans_alt.dwr.
Remarque : L'extension des fichiers correspondant aux requêtes enregistrées est .dwr. Certains fichiers de requête
enregistrés à partir de versions antérieures de Dreamweaver peuvent également avoir l'extension .dwq.
Chargement d'un modèle de recherche
1 Sélectionnez la commande Edition > Rechercher et remplacer.
2 Cliquez sur l'icône Charger la requête (représentant un dossier).
Dernière mise à jour le 4/5/2011
333
UTILISATION DE DREAMWEAVER
Utilisation de code de page
3 Recherchez le dossier contenant les requêtes enregistrées. Sélectionnez ensuite un fichier de requête, puis cliquez
sur Ouvrir.
4 Cliquez sur Rechercher le suivant, Rechercher tout, Remplacer ou Remplacer tout pour lancer la recherche.
Utilisation des documents de référence sur les langages
Le panneau Référence est un outil de référence rapide pour les langages de balisage, les langages de programmation et
les styles CSS. Il comporte des informations sur les différentes balises, les objets et les styles que vous manipulez en
mode Code (ou Inspecteur de code). Il comporte également des exemples de code que vous pouvez coller dans vos
documents.
Ouverture du panneau Référence
1 Exécutez l'une des actions suivantes en mode Code :
• Cliquez sur une balise, un attribut ou un mot-clé avec le bouton droit de la souris (Windows) ou en maintenant la
touche Ctrl enfoncée (Macintosh), puis sélectionnez Référence dans le menu contextuel.
• Placez le point d'insertion dans une balise, un attribut ou un mot-clé, puis appuyez sur Maj+F1.
Le panneau Référence apparaît et affiche des informations sur la balise, l'attribut ou le mot-clé sur lequel vous avez
cliqué.
2 Pour ajuster la taille du texte dans le panneau Référence, sélectionnez Grande police, Police moyenne ou Petite
police dans le menu Options (la petite flèche en haut à droite du panneau).
Collage d'un exemple de code dans votre document
1 Cliquez n'importe où sur l'exemple de code de contenu de référence.
L'exemple de code entier est mis en surbrillance.
2 Sélectionnez Edition > Copier, puis collez l'exemple de code dans votre document en mode Code.
Consultation du contenu de référence dans le panneau Référence
1 Pour afficher les balises, les objets ou les styles d'un autre ouvrage, choisissez-en un autre dans le menu
déroulant Livre.
2 Pour afficher des informations sur un élément spécifique, sélectionnez-le dans le menu déroulant Balise, Objet,
Style ou CFML (selon le manuel sélectionné).
3 Pour consulter les informations se rapportant à un attribut de l'élément sélectionné, sélectionnez cet attribut dans
le menu déroulant affiché près du menu Balise, Objet, Style ou CFML.
Ce menu contient la liste des attributs associés à l'élément sélectionné. L'élément Description est sélectionné par
défaut. Il contient une description de l'élément choisi.
Dernière mise à jour le 4/5/2011
334
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Impression de code
Vous pouvez imprimer le code que vous avez rédigé pour le consulter, l'archiver ou le distribuer.
1 Ouvrez une page en mode Code.
2 Sélectionnez Fichier > Imprimer le code.
3 Spécifiez les options d'impression, puis cliquez sur OK (Windows) ou sur Imprimer (Macintosh).
Réduction du code
A propos de la réduction du code
Vous pouvez réduire ou développer des fragments de code, ce qui permet de voir différentes sections du document
sans qu’il soit nécessaire d’utiliser la barre de défilement. Par exemple, pour afficher toutes les règles CSS dans la balise
head qui s'appliquent à une balise div plus loin sur la page, vous pouvez réduire tout ce qui se trouve entre les
baliseshead et div, de manière à voir les deux sections de code en même temps. Bien que vous puissiez sélectionner
des fragments de code en mode Création ou Code, vous ne pouvez réduire le code qu'en mode Code.
Remarque : Le code des fichiers créés à partir de modèles Dreamweaver est toujours affiché en mode développé, même si
le modèle (*.dwt) contient des fragments de code réduits.
Voir aussi
« Collage et déplacement de fragments de code réduits » à la page 335
« Insertion de code avec la barre d'outils de codage » à la page 321
« Nettoyage du code » à la page 336
Réduction et développement de fragments de code
Lorsque vous sélectionnez du code, un ensemble de boutons de réduction est affiché près de la sélection (symboles
Moins sous Windows ; triangles verticaux sur le Macintosh). Cliquez sur ces boutons pour développer et réduire la
sélection. Lorsque le code est réduit, les boutons de réduction se transforment en boutons de développement (un
bouton Plus sous Windows ; triangle horizontal sur le Macintosh).
Il peut arriver que le fragment de code sélectionné ne soit pas précisément réduit. En effet, Dreamweaver utilise une
technique de « réduction intelligente » pour réduire les types de sélection les plus courants de la façon la plus agréable
visuellement. Par exemple, si vous avez sélectionné une balise en retrait, puis les espaces d’indentation situés avant
cette balise, Dreamweaver ne réduira pas ces espaces d’indentation, car la plupart des utilisateurs s’attendent à ce que
l’indentation du code soit préservée. Pour désactiver la réduction intelligente du code et forcer Dreamweaver à réduire
exactement ce que vous avez sélectionné, maintenez la touche Control enfoncée avant de réduire le code.
Par ailleurs, une icône d’avertissement est affichée à côté des fragments de code réduits contenant des erreurs ou du
code qui n’est pas géré par certains navigateurs.
Vous pouvez également réduire le code en cliquant tout en maintenant enfoncée la touche Alt (Windows) ou Option
(Macintosh) sur l'un des boutons de réduction ou le bouton Réduire sélection de la barre d'outils de codage.
1 Sélectionnez du code.
2 Sélectionnez Edition > Fractionnement de code, puis sélectionnez l'une des options.
Dernière mise à jour le 4/5/2011
335
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Voir aussi
« Modification de code à l'aide du menu Codage » à la page 325
« Insertion de code avec la barre d'outils de codage » à la page 321
Sélection d'un fragment de code réduit
❖ En mode d'affichage Code, cliquez sur le fragment de code réduit.
Remarque : En mode Création, lorsque vous effectuez une sélection qui fait partie d’un fragment de code réduit, cette
portion de code est automatiquement développée dans le mode Code. Toujours en mode Création, lorsque vous
sélectionnez un fragment de code complet, cette portion de code reste réduite dans le mode d'affichage Code.
Affichage du code d’un fragment de code réduit sans le développer
❖ Amenez le pointeur de la souris au-dessus du fragment de code réduit.
Utilisation de raccourcis clavier pour réduire et développer le code
❖ Vous pouvez également utiliser les raccourcis clavier suivants :
Commande
Windows
Macintosh
Réduire la sélection
Ctrl+Maj+C
Commande+Maj+C
Réduire à l'extérieur de la sélection
Ctrl+Alt+C
Commande+Alt+C
Développer la sélection
Ctrl+Maj+E
Commande+Maj+E
Réduire balises entières
Ctrl+Maj+J
Commande+Maj+J
Réduire extérieur balises entières
Ctrl+Alt+J
Commande+Alt+J
Développer tout
Ctrl+Alt+E
Commande+Alt+E
Collage et déplacement de fragments de code réduits
Vous pouvez copier et coller des fragments de code réduits, ou faire glisser des fragments de code réduits afin de les
déplacer.
Voir aussi
« Insertion de code avec la barre d'outils de codage » à la page 321
« Nettoyage du code » à la page 336
Copie et collage un fragment de code réduit
1 Sélectionnez le fragment de code réduit.
2 Choisissez Edition > Copier.
3 Placez le curseur au point où vous voulez coller le code.
4 Choisissez Edition > Coller.
Remarque : Vous pouvez coller du code dans d'autres applications, il est automatiquement développé.
Déplacement d'un fragment de code réduit par glisser-déplacer
1 Sélectionnez le fragment de code réduit.
Dernière mise à jour le 4/5/2011
336
UTILISATION DE DREAMWEAVER
Utilisation de code de page
2 Faites glisser la sélection vers le nouvel emplacement.
Pour faire glisser une copie de la sélection, appuyez sur Ctrl (Windows) ou Alt (Macintosh) et faites glisser la sélection.
Remarque : Il est impossible d'effectuer un glisser-déposer vers d'autres documents.
Optimisation et débogage de code
Nettoyage du code
Vous pouvez supprimer automatiquement les balises vides, de combiner les balises font imbriquées et de nettoyer le
code HTML ou XHTML désordonné ou illisible.
Pour plus d'informations sur le nettoyage du code HTML généré par Microsoft Word, consultez la section « Ouverture
et modification de documents existants » à la page 72.
1 Ouvrez un document :
• S'il s'agit d'un document HTML, sélectionnez Commandes > Nettoyer le code HTML.
• S'il s'agit d'un document XHTML, sélectionnez Commandes > Nettoyer le code XHTML.
La commande Nettoyer le code XHTML permet de nettoyer le code HTML, de corriger les erreurs de syntaxe XHTML,
de définir les attributs de balise en minuscules et d'ajouter ou de signaler les attributs manquants d'une balise dans un
document XHTML.
2 Dans la boîte de dialogue qui s'affiche, définissez les options de votre choix, puis cliquez sur OK.
Remarque : Selon la taille du document et le nombre d'options sélectionnées, le nettoyage peut prendre plusieurs
secondes.
Supprimer Balises de conteneur vides Supprime toute paire de balises sans contenu. Par exemple, <b></b> et <font
color="#FF0000"></font> sont des balises vides, mais la balise <b> dans <b>texte</b> ne l'est pas.
Supprimer Balises redondantes imbriquées Supprime toutes les occurrences redondantes d'une balise. Par
exemple, dans le code <b>C'est ce que je voulais <b>vraiment</b> dire</b>, les balises b qui encadrent le
mot vraiment sont redondantes et seront supprimées.
Supprimer Commentaires HTML ne faisant pas partie de Dreamweaver Supprime tous les commentaires qui n'ont pas
été insérés par Dreamweaver. Par exemple, <!--begin body text--> sera supprimé, mais
<!--TemplateBeginEditable name="doctitle" --> ne le sera pas, car il s'agit d'un commentaire Dreamweaver
qui marque le début d'une zone modifiable dans un modèle.
Supprimer Marqueur spécial Dreamweaver Supprime les commentaires ajoutés par Dreamweaver. De cette manière,
les documents sont automatiquement mis à jour en même temps que les modèles et les éléments de la bibliothèque. Si
vous activez cette option lors du nettoyage du code d'un document créé à partir d'un modèle, le document et son
modèle sont dissociés. Pour plus d'informations, consultez la section « Détachement d'un document d'un modèle » à
la page 432.
Supprimer Balise(s) Supprime les balises spécifiées dans la zone de texte adjacente. Utilisez cette option pour
supprimer des balises personnalisées insérées par d'autres éditeurs visuels, ainsi que les autres balises que vous ne
voulez pas voir apparaître sur votre site (par exemple, blink). Séparez les différentes balises par des virgules (par
exemple, font, blink).
Dernière mise à jour le 4/5/2011
337
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Combiner les balises <font> imbriquées lorsque possible Combine deux ou plusieurs balises font se rapportant à la
même section de texte. Par exemple, <font size="7"><font color="#FF0000">rouge</font></font> sera
remplacé par <font size="7" color="#FF0000">rouge</font>.
Afficher le journal à la fin Affiche un message d'avertissement détaillant les modifications apportées au document dès
que le nettoyage est terminé.
Voir aussi
« Modification du format du code » à la page 312
« Définition des couleurs du code » à la page 315
Vérification de l'équilibre des balises et des accolades
Vous pouvez vérifier que les paires de balises, de parenthèses (( )), d'accolades ({ }) et de crochets ([ ]) sont équilibrées
dans la page, autrement dit qu'à chaque balise, parenthèse, accolade ou crochet d'ouverture correspond une balise, une
parenthèse, une accolade ou un crochet de fermeture, et inversement.
Vérification de l’équilibrage des accolades
1 Ouvrez le document en mode Code.
2 Placez le point d'insertion dans le code imbriqué à vérifier.
3 Choisissez Edition > Sélectionner balise parente.
Les balises correspondantes de délimitation (ainsi que leur contenu) sont sélectionnées dans le code. Si vous choisissez
plusieurs fois Edition > Sélectionner balise parente et que toutes vos balises sont équilibrées, Dreamweaver sélectionne
finalement les balises html et /html qui ouvrent et ferment le document.
Vérification de l'équilibre de paires de parenthèses, d'accolades ou de crochets
1 Ouvrez le document en mode Code.
2 Placez le point d'insertion dans le code à vérifier.
3 Choisissez Edition > Equilibrer les accolades.
Le code se trouvant entre parenthèses, entre accolades ou entre crochets est sélectionné. Choisissez de nouveau Edition
> Equilibrer les accolades pour sélectionner le code qui se trouve à l'intérieur des parenthèses, des accolades ou des
crochets délimitant la nouvelle sélection.
Vérification de la compatibilité du navigateur
Les fonctions de vérification de la compatibilité avec les navigateurs vous permettent de rechercher les combinaisons
de HTML et de feuilles de style CSS pouvant déclencher des problèmes de restitution dans des navigateurs. Cette
fonctionnalité teste également le code de vos documents et détermine s'il contient des propriétés ou des valeurs CSS
non prises en charge par les navigateurs cibles.
Remarque : Cette fonction remplace l'ancienne fonction de vérification du navigateur cible, mais conserve la
fonctionnalité CSS de cette fonction.
Voir aussi
« Vérification de problèmes de restitution CSS entre les navigateurs » à la page 154
Dernière mise à jour le 4/5/2011
338
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Validation des documents XML
Vous pouvez définir les préférences du programme de validation, les problèmes spécifiques que celui-ci doit
rechercher et les types d'erreurs qu'il doit signaler.
1 Effectuez l'une des opérations suivantes :
• Dans le cas d'un fichier XML ou XHTML, sélectionnez Fichier > Valider > En XML.
• L'onglet Validation du panneau Résultats affiche le message « Pas d'erreur ou d'avertissement » ou énumère les
erreurs de syntaxe relevées.
2 Double-cliquez sur le message d'erreur pour mettre l'erreur en surbrillance dans le document.
3 Pour enregistrer un rapport au format XML, cliquez sur le bouton Enregistrer le rapport.
4 Pour afficher le rapport dans votre navigateur principal (et pouvoir l'imprimer), cliquez sur le bouton Parcourir le
rapport.
Validation de documents à l'aide du validateur W3C (CS 5.5)
Dreamweaver permet de créer des pages Web normalisées grâce à sa prise en charge intégrée du validateur W3C. Le
validateur W3C valide la conformité de vos documents HTML aux normes HTML ou XHTML. Vous pouvez valider
des documents ouverts et des fichiers publiés sur un serveur.
Utilisez le rapport généré après la validation afin de corriger les erreurs dans votre fichier.
Validation d'un document ouvert
1 Choisissez Fenêtre > Résultats > Validation W3C.
2 Choisissez Fichier > Valider > Valider document actuel (W3C).
Validation d'un document en direct
Pour les documents en direct, Dreamweaver valide le code reçu par le navigateur. Ce code s'affiche lorsque vous
effectuez un clic droit dans votre navigateur, puis que vous choisissez l'option d'affichage du code source. La validation
de documents en direct est particulièrement utile lors de la validation de pages dynamiques à l'aide de PHP, JSP, etc.
L'option Validation du document en direct n'est activée que si l'URL de la page à valider commence par http.
1 Choisissez Fenêtre > Résultats > Validation W3C..
2 Cliquez sur Affichage en direct.
3 Choisissez Fichier > Valider > Valider document en direct (W3C).
Pour les documents en direct, lorsque vous double-cliquez sur une erreur dans le panneau Validation W3C, une
nouvelle fenêtre s'affiche. Cette fenêtre affiche le code généré par le navigateur, où la ligne contenant l'erreur est mise
en surbrillance.
Personnalisation des paramètres de validation
1 Choisissez Fenêtre > Résultats > Validation W3C..
2 Dans le panneau Validation W3C, cliquez sur l'icône Validation W3C (lecture). Choisissez Paramètres.
3 Sélectionnez un DOCTYPE pour la validation si aucun DOCTYPE n'a été spécifié explicitement dans le document.
4 Si vous ne voulez pas que les erreurs et les avertissements soient affichés, désactivez les options correspondantes.
Dernière mise à jour le 4/5/2011
339
UTILISATION DE DREAMWEAVER
Utilisation de code de page
5 Cliquez sur Gérer si vous voulez supprimer les avertissements ou les erreurs que vous avez masqués à l'aide du
panneau Validation W3C. Lorsque vous supprimez les avertissements et les erreurs, ils ne s'affichent pas lorsque
vous choisissez Tout afficher dans le panneau Validation W3C.
6 Sélectionnez Ne pas afficher la boîte de dialogue Notification du validateur W3C si vous ne voulez pas que cette
boîte de dialogue s'affiche au début de la validation.
Utilisation des rapports de validation
Lorsque la validation est terminée, les rapports de validation s'affichent dans le panneau Validation W3C.
• Pour plus d'informations sur une erreur ou un avertissement, sélectionnez l'erreur/l'avertissement dans le panneau
Validation W3C. Cliquez sur Plus d'infos.
• Pour enregistrer le rapport au format XML, cliquez sur le bouton Enregistrer le rapport.
• Pour afficher le rapport complet au format HTML, cliquez sur Parcourir le rapport. Le rapport HTML fournit la
liste complète des erreurs et avertissements, accompagnée d'un résumé.
• Pour passer à l'emplacement de l'erreur dans le code, sélectionnez l'erreur dans le panneau Validation W3C.
Cliquez sur le bouton Options, puis choisissez Aller à la ligne.
• Pour masquer les erreurs/avertissements, sélectionnez l'erreur/avertissement. Cliquez sur le bouton Options, puis
choisissez Masquer l'erreur.
• Pour afficher toutes les erreurs et les avertissements, y compris les erreurs masquées, cliquez sur le bouton Options.
Choisissez Tout afficher. Les erreurs et avertissements masqués que vous avez supprimés dans la boîte de dialogue
Préférences ne sont pas répertoriés.
• Pour effacer tous les résultats du panneau Validation W3C, cliquez sur le bouton Options. Choisissez Effacer les
résultats.
Définition des préférences du programme de validation
La fonctionnalité de validation des balises a été abandonnée depuis Dreamweaver CS5. Toutefois, Dreamweaver prend
toujours en charge les validateurs de code externes que vous installez sous forme d'extensions. Lorsque vous installez
une extension de validation externe, Dreamweaver présente ses préférences dans la catégorie Validateur de la boîte de
dialogue Préférences.
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
2 Sélectionnez la catégorie Programme de validation dans la liste de gauche.
3 Sélectionnez les bibliothèques de balises à utiliser pour la validation.
Vous ne pouvez pas sélectionner plusieurs versions d'un même langage ou d'une même bibliothèque de balises. Par
exemple, vous ne pouvez pas sélectionner à la fois HTML 4.0 et HTML 3.2 ou HTML 2.0. Sélectionnez la version la
plus ancienne à prendre en compte. En effet, si le document contient du code valide pour HTML 2.0, ce code sera
également valide pour HTML 4.0.
4 Cliquez sur Options et définissez les options pour ces bibliothèques.
5 Sélectionnez les options d'affichage correspondant aux types d'erreurs et d'avertissements à inclure dans le rapport
du programme de validation.
6 Sélectionnez les éléments à faire vérifier par le validateur.
Guillemets dans le texte Indique que Dreamweaver doit vous avertir lors de chaque utilisation de guillemets dans le
texte du document. Il est recommandé d'utiliser l'entité " à la place de guillemets dans le texte de documents HTML.
Dernière mise à jour le 4/5/2011
340
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Entités dans le texte Indique que Dreamweaver doit conseiller le remplacement de certains caractères (comme
l'esperluette (&), inférieur à (<) et supérieur à (>)) par leurs équivalents en entité HTML.
7 Cliquez sur OK pour fermer la boîte de dialogue Options du programme de validation, puis à nouveau sur OK pour
définir les préférences.
Conformité des pages avec le langage XHTML
Lorsque vous créez une page, vous pouvez faire en sorte qu'elle soit compatible avec le langage XHTML. Cette
opération est également possible avec les documents HTML existants.
Voir aussi
« Code XHTML » à la page 305
Création de documents conformes au code XHTML
1 Choisissez Fichier > Nouveau.
2 Sélectionnez une catégorie et un type de page à créer.
3 Sélectionnez l'une des définitions de type de document (DTD) XHTML dans le menu déroulant Type de document
(DTD) à l'extrême droite de la boîte de dialogue, puis cliquez sur Créer.
Par exemple, vous pouvez rendre un document HTML compatible XHTML en sélectionnant XHTML 1.0
transitionnel ou XHTML 1.0 Strict dans le menu déroulant.
Remarque : Cette opération est impossible pour certains types de documents.
Création de documents conformes au code XHTML par défaut
1 Choisissez Edition > Préférences ou Dreamweaver > Préférences (Mac OS X), puis sélectionnez la catégorie
Nouveau document.
2 Sélectionnez un document par défaut et l'une des définitions de type de document XHTML dans le menu déroulant
Type de document (DTD), puis cliquez sur OK.
Par exemple, vous pouvez rendre un document HTML compatible XHTML en sélectionnant XHTML 1.0
transitionnel ou XHTML 1.0 Strict dans le menu déroulant.
Conformité d'un document HTML avec le langage XHTML
1 Ouvrez un document, puis effectuez l'une des opérations suivantes :
• Pour un document sans cadres, sélectionnez Fichier > Convertir, puis sélectionnez l'une des définitions de type
de document XHTML.
Par exemple, vous pouvez rendre un document HTML compatible XHTML en sélectionnant XHTML 1.0
transitionnel ou XHTML 1.0 Strict dans le menu déroulant.
• Pour un document avec cadres, sélectionnez un cadre, puis Fichier > Convertir, puis sélectionnez l'une des
définitions de type de document XHTML.
2 Pour convertir le document entier, répétez cette étape pour chacun des cadres et pour le document de jeu de cadres.
Remarque : Il est impossible de convertir une instance d'un modèle, puisqu'elle doit reprendre le même langage que le
modèle d'après lequel elle a été créée. Par exemple, un document conçu d'après un modèle XHTML restera toujours en
XHTML ; de même, un document conçu d'après un modèle HTML non conforme au langage XHTML restera toujours
en HTML et ne pourra pas être converti en XHTML ni dans aucun autre langage.
Dernière mise à jour le 4/5/2011
341
UTILISATION DE DREAMWEAVER
Utilisation de code de page
Utilisation du débogueur ColdFusion (Windows uniquement)
Si vous utilisez ColdFusion pour tester Dreamweaver, vous pouvez afficher les informations de débogage ColdFusion
sans quitter Dreamweaver.
Remarque : Cette fonction n'est pas prise en charge sur Macintosh. Les développeurs Macintosh peuvent ouvrir une page
ColdFusion dans un autre navigateur au moyen de la commande Aperçu dans le navigateur (F12). Si la page contient
des erreurs, les informations relatives aux causes possibles s'affichent au bas de la page.
Si vous utilisez ColdFusion MX 6.1 ou une version antérieure, commencez par vérifier que le débogage est activé dans
ColdFusion Administrator. Si vous utilisez ColdFusion MX 7 ou une version ultérieure, Dreamweaver active
automatiquement ce paramétrage.
Vérifiez également que ColdFusion est en cours d’exécution sur le serveur d’évaluation de Dreamweaver. Pour plus
d'informations, consultez la section « Configuration d'un serveur d'évaluation » à la page 50.
Pour garantir l'actualisation des informations de débogage à chaque fois qu'une page est affichée dans le navigateur
interne, veillez à ce que Internet Explorer recherche les versions plus récentes du fichier à chaque fois que celui-ci est
demandé. Dans Internet Explorer, sélectionnez Outils > Options Internet, sélectionnez l'onglet Général, puis cliquez sur
le bouton Pa">