MACROMEDIA DREAMWEAVER 8-UTILISATION DE DREAMWEAVER Manuel utilisateur

Utilisation de Dreamweaver
Marques de commerce
1 Step RoboPDF, ActiveEdit, ActiveTest, Authorware, Blue Sky Software, Blue Sky, Breeze, Breezo, Captivate, Central,
ColdFusion, Contribute, Database Explorer, Director, Dreamweaver, Fireworks, Flash, FlashCast, FlashHelp, Flash Lite,
FlashPaper, Flex, Flex Builder, Fontographer, FreeHand, Generator, HomeSite, JRun, MacRecorder, Macromedia, MXML,
RoboEngine, RoboHelp, RoboInfo, RoboPDF, Roundtrip, Roundtrip HTML, Shockwave, SoundEdit, Studio MX, UltraDev et
WebHelp sont soit des marques de commerce, soit des marques déposées de Macromedia, Inc. qui peuvent être déposées aux
Etats-Unis ou sous toute autre juridiction. Les autres noms de produits, logos, graphiques, mises en page, titres, mots ou phrases
mentionnés dans cette publication peuvent être des marques, des marques de service ou des noms de marque appartenant à
Macromedia,Inc. ou à d’autres entités et peuvent être déposés dans certains pays, états ou provinces.
Informations de tiers
Ce manuel contient des liens vers des sites Web tiers qui ne sont pas contrôlés par Macromedia et Macromedia ne peut en aucun
cas être tenu responsable du contenu de ces sites. Si vous accédez à l’un de ces sites, vous le faites à vos propres risques.
Macromedia mentionne ces liens pour faciliter votre travail et l'inclusion de ces liens n'implique pas que Macromedia approuve le
contenu de ces sites tiers ou en accepte la responsabilité.
Copyright © 1997-2005 Macromedia, Inc. Tous droits réservés. Le présent manuel ne doit faire l'objet d'aucune copie,
photocopie, reproduction, traduction ou conversion sous quelque forme que ce soit, électronique ou lisible par machine,
sans le consentement écrit de Macromedia, Inc.Nonobstant ce qui précède, le propriétaire ou l'utilisateur autorisé d'une
copie valide du logiciel avec lequel le présent manuel a été fourni peut imprimer un exemplaire de ce manuel, à partir
d'une version électronique de celui-ci, aux fins exclusives d'apprendre à utiliser ledit logiciel, pour autant qu'aucune partie
du manuel ne soit imprimée, reproduite, distribuée, revendue ou transmise à toute autre fin, y compris de manière non
exhaustive des fins commerciales telles que la vente d'exemplaires de cette documentation ou la fourniture de services
d'assistance payants.
Remerciements
Gestion de projet : Charles Nadeau
Rédaction : Michael Varese
Rédaction complémentaire : Jennifer Rowe, Paul Gubbay, Charles Nadeau
Edition : Rosana Francescato, Lisa Stanziano, Anne Szabla, Mary Ferguson, Mark Nigara
Gestion de la production et de l'édition : Patrice O’Neill et Rosana Francescato
Conception et production : Adam Barnett, Aaron Begley, Paul Benkman, John Francis, Geeta Karmarkar, Paul Rangel,
Arena Reed, Mario Reynoso
Gestion de la localisation : Melissa Baerwald
Remerciements à Sheila McGinn, Paul Gubbay, Vic Mitnick, Jim Doubek, Joaquin Blas, Wenlan Du, Ken Karleskint, Jennifer
Taylor, Jorge Taylor, Nick Halbakken, Scott Richards, Sami Kaied, John Skidgel, Masayo Noda, Kristin Conradi, Yuko Yagi, les
testeurs de version bêta et l'ensemble des équipes d'ingénierie et d'assurance qualité de Dreamweaver.
Première édition : Septembre 2005
Macromedia, Inc.
601 Townsend St.
San Francisco, CA 94103, Etats-Unis
Table des matières
PARTIE 1 : NOTIONS DE BASE DE DREAMWEAVER
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Nouveautés de Dreamweaver 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Par où débuter. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Processus de création de sites Web dans Dreamweaver . . . . . . . . . .
Utilisation de Dreamweaver avec d'autres applications . . . . . . . . . . .
Dreamweaver et l'accessibilité . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Guide des supports de formation à Dreamweaver . . . . . . . . . . . . . . . .
Conventions typographiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Ressources sur le langage HTML et les technologies Web . . . . . . . .
20
24
28
33
33
35
39
39
Chapitre 1 : Exploration de l'espace de travail . . . . . . . . . . . . . . . . 41
A propos de l'espace de travail de Dreamweaver . . . . . . . . . . . . . . . . . . 41
Utilisation de la fenêtre de document. . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Utilisation des barres d'outils, des inspecteurs et des menus
contextuels. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Utilisation des panneaux et des groupes de panneaux . . . . . . . . . . . . 65
Utilisation des fonctions d'accessibilité de Dreamweaver. . . . . . . . . . 69
Optimisation de l'espace de travail pour la conception de pages
accessibles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .75
Utilisation de guides visuels dans Dreamweaver. . . . . . . . . . . . . . . . . . .76
Dreamweaver personnalisation, notions de base . . . . . . . . . . . . . . . . . . 77
Chapitre 2 : Configuration d'un site Dreamweaver . . . . . . . . . . . .85
A propos des sites Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Configuration d'un nouveau site Dreamweaver . . . . . . . . . . . . . . . . . . .
Utilisation des paramètres avancés pour configurer un site
Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Modification des paramètres d'un site Dreamweaver . . . . . . . . . . . . .
Modification de sites Web existants dans Dreamweaver . . . . . . . . . .
85
89
90
96
96
3
Chapitre 3 : Création et ouverture de documents . . . . . . . . . . . . .99
Création de nouveaux documents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Enregistrement d'un nouveau document . . . . . . . . . . . . . . . . . . . . . . . . 103
Définition d'un nouveau type de document par défaut . . . . . . . . . . . . 103
Définition de l'extension de fichier par défaut de nouveaux
documents HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
Ouverture de documents existants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
Nettoyage de fichiers HTML créés avec Microsoft Word . . . . . . . . . 106
PARTIE 2 : UTILISATION DE SITES DREAMWEAVER
Chapitre 4 : Gestion des fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
A propos de la gestion de site. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .112
Accès aux sites, à un serveur et aux disques locaux . . . . . . . . . . . . . . .116
Affichage de fichiers et de dossiers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .121
Comparaison de fichiers pour en chercher les différences . . . . . . . . 126
Restauration de fichiers (utilisateurs de Contribute) . . . . . . . . . . . . . . 132
Gestion de fichiers et de dossiers dans le panneau Fichiers . . . . . . . 133
Utilisation d'une carte d'arborescence de votre site . . . . . . . . . . . . . . 138
Importation et exportation de sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
Suppression d'un site Dreamweaver de votre liste de sites . . . . . . . . 149
Archivage et extraction de fichiers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
Acquisition et placement de fichiers depuis ou vers votre serveur . . 157
Synchronisation des fichiers entre le site local et le site distant . . . . 162
Identification et suppression des fichiers non utilisés . . . . . . . . . . . . . 164
Voilage des dossiers et des fichiers du site . . . . . . . . . . . . . . . . . . . . . . 164
Stockage des informations sur les fichiers dans des
Design Notes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
Test de votre site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
Chapitre 5 : Gestion des actifs de site et des bibliothèques . . . 179
A propos des éléments de bibliothèque . . . . . . . . . . . . . . . . . . . . . . . . . 179
Utilisation des actifs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
Création et gestion d'une liste d'actifs favoris . . . . . . . . . . . . . . . . . . . . 190
Utilisation des éléments de bibliothèque . . . . . . . . . . . . . . . . . . . . . . . . 193
Chapitre 6 : Gestion des sites Contribute avec
Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
A propos de la gestion des sites Contribute . . . . . . . . . . . . . . . . . . . . 204
Préparation d'un site à utiliser avec Contribute. . . . . . . . . . . . . . . . . . . 210
4
Table des matières
Administration d'un site Contribute à l'aide de Dreamweaver . . . . . . 211
Gestion des fichiers Contribute dans Dreamweaver . . . . . . . . . . . . . .213
Dépannage d'un site Contribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .216
PARTIE 3 : MISE EN FORME DES PAGES
Chapitre 7 : Mise en forme des pages avec les styles CSS . . . . 221
A propos des calques de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . 222
Insertion d'un calque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
Définition des préférences et des propriétés de calques. . . . . . . . . . 227
Gestion des calques. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
Manipulation des calques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233
Conversion des calques en tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
Animation des calques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
Insertion de balises div pour des mises en forme . . . . . . . . . . . . . . . . 248
Utilisation des balises div pour la mise en forme . . . . . . . . . . . . . . . . . 249
Modification de la couleur de surbrillance des balises div . . . . . . . . . 250
Utilisation de la visualisation de mise en forme CSS . . . . . . . . . . . . . .251
Utilisation des règles, des guides et de la grille pour la mise
en forme des pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254
Utilisation du tracé de l'image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258
Chapitre 8 : Présentation de contenu à l'aide de tableaux. . . . . 261
A propos des tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
Insertion d'un tableau et ajout de contenu . . . . . . . . . . . . . . . . . . . . . . 264
Importation et exportation de données tabulaires. . . . . . . . . . . . . . . . 265
Sélection d'éléments de tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266
Utilisation du mode Tableaux développés pour une modification
de tableau plus simple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270
Mise en forme des tableaux et des cellules . . . . . . . . . . . . . . . . . . . . . 272
Redimensionnement des tableaux, des colonnes et des lignes . . . . 275
Ajout et suppression de lignes et de colonnes . . . . . . . . . . . . . . . . . . 280
Fractionnement et fusion de cellules . . . . . . . . . . . . . . . . . . . . . . . . . . . 282
Copie, collage et suppression de cellules . . . . . . . . . . . . . . . . . . . . . . . 284
Imbrication de tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286
Tri des tableaux. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286
Chapitre 9 : Mise en forme des pages avec le mode
Mise en forme. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289
A propos du mode Mise en forme. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290
Basculement du mode Standard au mode Mise en forme . . . . . . . . 294
Table des matières
5
Réalisation de dessins en mode Mise en forme . . . . . . . . . . . . . . . . . 295
Ajout de contenu dans une cellule de mise en forme. . . . . . . . . . . . . 299
Suppression automatique des hauteurs de cellule. . . . . . . . . . . . . . . . 301
Redimensionnement et déplacement de cellules et tableaux de
mise en forme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302
Formatage de cellules et de tableaux de mise en forme . . . . . . . . . . 304
Définition de la largeur des colonnes . . . . . . . . . . . . . . . . . . . . . . . . . . 305
Définition de préférences pour le mode Mise en forme . . . . . . . . . . 308
Chapitre 10 : Utilisation de cadres . . . . . . . . . . . . . . . . . . . . . . . . 311
A propos des cadres et des jeux de cadres . . . . . . . . . . . . . . . . . . . . . .311
Utilisation des jeux de cadres dans la fenêtre de document . . . . . . . 317
Création de cadres et de jeux de cadres. . . . . . . . . . . . . . . . . . . . . . . . . 317
Sélection de cadres et de jeux de cadres. . . . . . . . . . . . . . . . . . . . . . . .322
Ouverture d'un document dans un cadre . . . . . . . . . . . . . . . . . . . . . . . .324
Enregistrement des fichiers du cadre et du jeu de cadres . . . . . . . . .325
Affichage et définition des propriétés et attributs de cadre . . . . . . . .326
Affichage et définition des propriétés des jeux de cadres . . . . . . . . .328
Définition des contenus de cadre avec liens . . . . . . . . . . . . . . . . . . . . .329
Gestion des navigateurs qui ne peuvent pas afficher les cadres. . . 330
Utilisation des comportements JavaScript avec les cadres. . . . . . . . 331
Chapitre 11 : Gestion des modèles. . . . . . . . . . . . . . . . . . . . . . . . 333
A propos des modèles Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . .334
Création d'un modèle Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . .348
Création de modèles pour un site Contribute . . . . . . . . . . . . . . . . . . . .353
Création de régions modifiables. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .355
Création de régions répétées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359
Utilisation des régions facultatives . . . . . . . . . . . . . . . . . . . . . . . . . . . . .362
Définition d'attributs de balise modifiables . . . . . . . . . . . . . . . . . . . . . .365
Création d'un modèle imbriqué. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .366
Modification et mise à jour des modèles . . . . . . . . . . . . . . . . . . . . . . . .368
Gestion des modèles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 372
Exportation et importation du contenu XML d'un modèle . . . . . . . . . 373
Exportation d'un site sans marqueur de modèle. . . . . . . . . . . . . . . . . . 374
Application ou suppression d'un modèle depuis un document
existant. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375
Modification du contenu d'un document basé sur un modèle . . . . . . 377
6
Table des matières
PARTIE 4 : AJOUT DE CONTENU AUX PAGES
Chapitre 12 : Utilisation des pages . . . . . . . . . . . . . . . . . . . . . . . 383
A propos de l'utilisation des pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 384
Enregistrement de pages Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389
Spécification de balises HTML au lieu de CSS . . . . . . . . . . . . . . . . . . 390
Définition des propriétés de page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390
Utilisation des couleurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 393
Sélection d'éléments dans la fenêtre de document . . . . . . . . . . . . . . 395
Zoom avant et arrière . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397
Utilisation du panneau Historique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399
Automatisation des tâches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400
Utilisation de comportements Java Script pour détecter le type
et la version des navigateurs et des plug-ins . . . . . . . . . . . . . . . . . . . . 408
Aperçu et test de page dans les navigateurs . . . . . . . . . . . . . . . . . . . . 408
Vérification des préférences de durée et de la taille de
téléchargement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .412
Chapitre 13 : Insertion et mise en forme de texte . . . . . . . . . . . . 415
A propos du formatage de texte dans Dreamweaver . . . . . . . . . . . . . .415
Insertion de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 428
Mise en forme de paragraphes et structure du document. . . . . . . . . 433
Mise en forme de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 437
Utilisation des feuilles de style en cascade pour mettre un texte
en forme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 443
Vérification orthographique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 454
Recherche et remplacement de texte . . . . . . . . . . . . . . . . . . . . . . . . . . 455
Chapitre 14 : Insertion d’images . . . . . . . . . . . . . . . . . . . . . . . . . 457
A propos des images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 457
Insertion d'une image. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 460
Redimensionnement d'une image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465
Recadrage d'une image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 466
Optimisation d'une image à l'aide de Fireworks . . . . . . . . . . . . . . . . . 467
Ajustement de la luminosité et du contraste d'une image . . . . . . . . . 468
Accentuation d'une image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 468
Création d'une image survolée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 469
Utilisation d'un éditeur d'image externe. . . . . . . . . . . . . . . . . . . . . . . . . 470
comportements aux images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 471
Table des matières
7
Chapitre 15 : Liens et navigation. . . . . . . . . . . . . . . . . . . . . . . . . 473
Description des emplacements et chemins d'accès des
documents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .474
Menus de reroutage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 478
Barres de navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 478
A propos des cartes graphiques. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .479
Création de liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 480
Gestion des liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 491
Insertion de menus de reroutage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 496
Utilisation des barres de navigation. . . . . . . . . . . . . . . . . . . . . . . . . . . . 498
Utilisation de cartes graphiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 500
Association de comportements JavaScript à des liens . . . . . . . . . . 503
Recherche de liens rompus, externes et orphelins. . . . . . . . . . . . . . . 503
Correction des liens rompus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 505
Ouverture des documents liés dans Dreamweaver . . . . . . . . . . . . . . .507
Chapitre 16 : Utilisation d'autres applications . . . . . . . . . . . . . . 509
A propos de l'intégration de Fireworks et Flash . . . . . . . . . . . . . . . . . 509
Optimisation de votre environnement de travail pour Fireworks
et Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 510
Utilisation de Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .511
Utilisation de Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 524
Chapitre 17 : Ajout d'éléments audio, vidéo et interactifs . . . . 527
A propos des fichiers multimédia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .528
Insertion et modification d'objets multimédia . . . . . . . . . . . . . . . . . . . 530
Lancement d'un éditeur externe pour des fichiers multimédia . . . . .533
Utilisation des Design Notes (Notes de conception) avec les
objets multimédia. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .535
Insertion et modification d'un objet de bouton Flash . . . . . . . . . . . . .536
Insertion d'un objet texte Flash. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .538
Insertion d'animations Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 539
Téléchargement et installation des éléments Flash . . . . . . . . . . . . . . 540
Insertion d'éléments Flash. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 540
Modification des attributs d'un élément Flash. . . . . . . . . . . . . . . . . . . . 541
Insertion de documents FlashPaper . . . . . . . . . . . . . . . . . . . . . . . . . . . 542
Insertion de contenu Flash Vidéo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .543
Insertion d'animations Shockwave . . . . . . . . . . . . . . . . . . . . . . . . . . . . .547
Ajout de contenu vidéo (non Flash). . . . . . . . . . . . . . . . . . . . . . . . . . . . .547
Ajout de son à une page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .548
Insertion du contenu d'un plug-in Netscape Navigator . . . . . . . . . . . 549
8
Table des matières
Insertion d'un contrôle ActiveX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .551
Insertion d'une applet Java. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 552
Utilisation de comportements pour contrôler les objets
multimédias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 552
Chapitre 18 : Utilisation des comportements JavaScript . . . . . 555
Utilisation du panneau Comportements . . . . . . . . . . . . . . . . . . . . . . . . 556
A propos des événements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 557
Application d'un comportement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 558
Association d'un comportement à du texte . . . . . . . . . . . . . . . . . . . . . 559
Modification d'un comportement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 560
Actualisation d'un comportement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .561
Création de nouvelles actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 562
Téléchargement et installation de comportements créés par
des développeurs indépendants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 562
Utilisation des actions de comportement livrées avec
Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 563
PARTIE 5 : UTILISATION DU CODE DE PAGE
Chapitre 19 : Configuration d'un environnement de codage . . 597
Affichage du code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 597
Utilisation de l'espace de travail orienté en mode Code
(Windows uniquement) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 599
Définition des préférences de codage . . . . . . . . . . . . . . . . . . . . . . . . . . 600
Personnalisation des raccourcis clavier . . . . . . . . . . . . . . . . . . . . . . . . 604
Ouverture de fichiers en mode Code par défaut . . . . . . . . . . . . . . . . . 604
Définition des préférences du programme de validation . . . . . . . . . . 605
Gestion des bibliothèques de balises . . . . . . . . . . . . . . . . . . . . . . . . . . . 605
Importation de balises personnalisées dans Dreamweaver . . . . . . . .610
Utilisation d'un éditeur HTML externe avec Dreamweaver . . . . . . . .613
Chapitre 20 : Codage dans Dreamweaver. . . . . . . . . . . . . . . . . . 617
A propos du codage dans Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . 617
Rédaction et modification de code. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 627
Recherche et remplacement de balises et d'attributs . . . . . . . . . . . . 642
Modification rapide d'une sélection de code . . . . . . . . . . . . . . . . . . . . 644
Utilisation des documents de référence sur les langages . . . . . . . . . 645
Impression du code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 646
Table des matières
9
Chapitre 21 : Optimisation et débogage de code . . . . . . . . . . . 647
Nettoyage du code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 647
Vérification de l'équilibre des balises et des accolades. . . . . . . . . . . .648
Vérification de la compatibilité du navigateur . . . . . . . . . . . . . . . . . . . 649
Validation de balises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .653
Conformité des pages avec le langage XHTML . . . . . . . . . . . . . . . . . .654
Utilisation du débogueur ColdFusion (Windows uniquement) . . . . .655
Chapitre 22 : Modification du code en mode Création . . . . . . .657
Modification du code avec l'inspecteur Propriétés . . . . . . . . . . . . . . .658
Modification d'attributs dans l'inspecteur de balises . . . . . . . . . . . . . .658
Modification du code avec Quick Tag Editor. . . . . . . . . . . . . . . . . . . . 660
Modification du code à l'aide du sélecteur de balises . . . . . . . . . . . . .664
Modification des scripts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .665
Utilisation des inclusions côté serveur . . . . . . . . . . . . . . . . . . . . . . . . . .666
Utilisation des comportements JavaScript . . . . . . . . . . . . . . . . . . . . . .668
Affichage et modification du contenu de l'en-tête . . . . . . . . . . . . . . . .668
PARTIE 6 : PRÉPARATION À LA CRÉATION DE SITES
DYNAMIQUES
Chapitre 23 : Configuration d'une application Web . . . . . . . . . .673
Eléments nécessaires à la création d'applications Web . . . . . . . . . . . 673
Configuration d'un serveur Web. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 674
Configuration d'un serveur d'application . . . . . . . . . . . . . . . . . . . . . . . . 675
Création d'un dossier racine pour l'application . . . . . . . . . . . . . . . . . . .679
Définition d'un site Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 681
Connexion à une base de données . . . . . . . . . . . . . . . . . . . . . . . . . . . . .684
Chapitre 24 : Connexions à des bases de données pour les
développeurs ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 685
Connexion à une base de données . . . . . . . . . . . . . . . . . . . . . . . . . . . . .685
Modification ou suppression d'une connexion à une base de
données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 687
Chapitre 25 : Connexions à des bases de données pour les
développeurs ASP.NET . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 689
Connexion à une base de données . . . . . . . . . . . . . . . . . . . . . . . . . . . . .689
Modification ou suppression d'une connexion à une base de
données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .693
10
Table des matières
Chapitre 26 : Connexions à des bases de données pour les
développeurs ASP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 695
A propos des connexions à des bases de données dans ASP . . . . 695
Création d'une connexion DSN . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 698
Création d'une connexion sans DSN . . . . . . . . . . . . . . . . . . . . . . . . . . 702
Connexion à une base de données via un fournisseur d'accès . . . . 703
Modification ou suppression d'une connexion à une base de
données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 707
Chapitre 27 : Connexions à des bases de données pour les
développeurs JSP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 709
A propos des connexions à des bases de données dans JSP . . . . . 709
Connexion à une base de données. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 711
Connexion via un pilote ODBC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 713
Modification ou suppression d'une connexion à une base de
données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 716
Chapitre 28 : Connexions à des bases de données pour les
développeurs PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 719
Connexion à une base de données. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 719
Modification ou suppression d'une connexion à une base de
données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 720
Chapitre 29 : Résolution des problèmes de connexion à
des bases de données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 723
Résolution des problèmes d'autorisation . . . . . . . . . . . . . . . . . . . . . . . 723
Résolution des messages d'erreur Microsoft . . . . . . . . . . . . . . . . . . . . 725
Résolution des messages d'erreur Microsoft . . . . . . . . . . . . . . . . . . . . 732
PARTIE 7 : AJOUT DE CONTENU DYNAMIQUE AUX PAGES
WEB
Chapitre 30 : Optimisation de l'espace de travail pour tirer
parti des fonctions de développement visuel . . . . . . . . . . . . . . . 735
Affichage de panneaux de développement d'applications Web . . .
Affichage de votre base de données dans Dreamweaver . . . . . . . . .
Affichage des données dynamiques en mode Création . . . . . . . . . .
Travail en mode Création sans données dynamiques . . . . . . . . . . . .
Aperçu des pages dynamiques dans un navigateur . . . . . . . . . . . . . .
Limitation des informations de base de données affichées dans
Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
735
738
739
745
746
Table des matières
747
11
Chapitre 31 : Déroulement de la conception de pages
dynamiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 749
Conception de la page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .749
Création d'une source de contenu dynamique . . . . . . . . . . . . . . . . . . .750
Ajout d'un contenu dynamique à une page Web . . . . . . . . . . . . . . . . . 752
Amélioration des fonctionnalités d'une page dynamique . . . . . . . . . . 753
Test et déboguage d'une page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .755
Chapitre 32 : Récupération des données spécifiques à
une page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 759
Utilisation d'une base de données pour stocker un contenu . . . . . . .759
Collecte de données envoyées par les utilisateurs. . . . . . . . . . . . . . . . 761
Accès à des données stockées dans des variables de session. . . . . 766
Chapitre 33 : Définition de sources de contenu dynamique . . .773
A propos des sources de contenu dynamique . . . . . . . . . . . . . . . . . . . 774
Définition d'un jeu d'enregistrements . . . . . . . . . . . . . . . . . . . . . . . . . . . 779
Définition de paramètres d'URL. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 784
Définition de paramètres de formulaire . . . . . . . . . . . . . . . . . . . . . . . . . 786
Définition de variables de session . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 787
Définition de variables d'application dans ASP et ColdFusion . . . . . 788
Utilisation d'une variable comme source de données pour un
jeu d'enregistrements de ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . .790
Définition de variables de serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .790
Mise en mémoire cache de sources de contenu. . . . . . . . . . . . . . . . . .793
Modification ou suppression de sources de contenu . . . . . . . . . . . . .794
Copie d'un jeu d'enregistrements d'une page à une autre . . . . . . . . .795
Chapitre 34 : Ajout d'un contenu dynamique à une
page Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .797
A propos de l'ajout de contenu dynamique . . . . . . . . . . . . . . . . . . . . . .798
Ajout d'un texte dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .799
Création d'images dynamiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 801
Création d'attributs HTML dynamiques . . . . . . . . . . . . . . . . . . . . . . . . 802
Création de paramètres d'objet (ActiveX, Flash, etc.)
dynamiques. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 804
Modification du contenu dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . 805
Suppression d'un contenu dynamique . . . . . . . . . . . . . . . . . . . . . . . . . 805
Création de pages dynamiques dans un site Contribute. . . . . . . . . . 806
12
Table des matières
Chapitre 35 : Affichage des enregistrements de base de
données. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 809
A propos de l'affichage des enregistrements de base de
données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 809
Utilisation de formats de données prédéfinis . . . . . . . . . . . . . . . . . . . . .816
Création de liens de navigation de jeu d'enregistrements . . . . . . . . . 818
Affichage et masquage des régions en fonction des résultats du
jeu d'enregistrements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .821
Affichage de plusieurs résultats d'un jeu d'enregistrements . . . . . . 822
Création d'un tableau à l'aide du comportement de serveur
Région répétée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 823
Création d'un compteur d'enregistrements . . . . . . . . . . . . . . . . . . . . . 825
Chapitre 36 : Affichage de données XML dans des
pages Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 829
Utilisation de XML et XSL dans des pages Web . . . . . . . . . . . . . . . . 829
Transformations XSL côté serveur. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .831
Transformations XSL côté client . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 835
Données XML et éléments répétés . . . . . . . . . . . . . . . . . . . . . . . . . . . . 838
Aperçu des données XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 840
Exécution de transformations XSL sur le serveur . . . . . . . . . . . . . . . . 842
Exécution de transformations XSL sur le client . . . . . . . . . . . . . . . . . . 857
Application de styles aux fragments XSLT. . . . . . . . . . . . . . . . . . . . . . 859
Résolution des problèmes liés aux transformations XSL . . . . . . . . . 860
Chapitre 37 : Utilisation des services Web . . . . . . . . . . . . . . . . . 861
A propos des services Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 862
Configuration d'un générateur de proxy destiné à être utilisé
avec Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 866
Ajout d'un proxy de services Web à l'aide de la description
WSDL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 869
Ajout d'un service Web à une page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 871
Modification de la liste de sites des services Web UDDI. . . . . . . . . . 873
Chapitre 38 : Ajout de comportements de serveur
personnalisés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 875
A propos des comportements de serveur personnalisés. . . . . . . . . . 875
Installation de comportements de serveur créés par des
développeurs tiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 886
Utilisation du Créateur de comportements de serveur . . . . . . . . . . . . 887
Utilisation de paramètres dans des comportements de serveur . . . .891
Positionnement des blocs de code . . . . . . . . . . . . . . . . . . . . . . . . . . . . .891
Table des matières
13
Création d'une boîte de dialogue spécifique à un comportement
de serveur personnalisé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .893
Modification d'un comportement de serveur. . . . . . . . . . . . . . . . . . . . .895
Chapitre 39 : Création de formulaires . . . . . . . . . . . . . . . . . . . . 899
A propos des formulaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 899
Création de formulaires HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 904
Insertion d'objets de formulaire HTML . . . . . . . . . . . . . . . . . . . . . . . . . 906
Insertion d'objets de formulaire HTML dynamiques . . . . . . . . . . . . . . .911
Validation des données de formulaire HTML . . . . . . . . . . . . . . . . . . . . 915
Liaison de comportements JavaScript à des objets de
formulaire HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 916
Liaison de scripts personnalisés à des boutons de formulaire
HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 917
Création de formulaires HTML accessibles. . . . . . . . . . . . . . . . . . . . . . 918
PARTIE 8 : DÉVELOPPEMENT RAPIDE D'APPLICATIONS
Chapitre 40 : Création rapide d'applications ColdFusion . . . . 923
A propos du développement rapide d'applications (tous les
serveurs) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .923
Création de formulaires ColdFusion MX 7 . . . . . . . . . . . . . . . . . . . . . . 930
Création d'un ensemble de pages Principale-Détails
(ColdFusion) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 941
Création de pages de recherche/résultats (ColdFusion, ASP,
JSP, PHP). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 951
Création d'une page d'insertion d'enregistrement (tous les
serveurs) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .958
Création de pages d’actualisation d’un enregistrement
(ColdFusion) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 961
Création de pages de suppression d'un enregistrement
(ColdFusion) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .970
Modification d'une base de données à l'aide de procédures
stockées (ColdFusion) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 980
Création de pages limitant l'accès à votre site (ColdFusion,
ASP, JSP, PHP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .982
Sécurisation d’un dossier dans votre application (ColdFusion) . . . 993
Utilisation des composants ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . 993
14
Table des matières
Chapitre 41 : Création rapide d'applications ASP.NET . . . . . 1003
Création de formulaires ASP.NET . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1003
Création de contrôles Web Grille de données et Liste de
données ASP.NET . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1008
Création d'un ensemble de pages Principale-Détails
(ASP.NET) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1013
Création d'une page de recherche dans une base de données
(ASP.NET) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1020
Création d'une page d'insertion d'enregistrements (ASP.NET) . . 1027
Création de pages de mise à jour d'un enregistrement
(ASP.NET) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1028
Création de pages de suppression d'un enregistrement
(ASP.NET) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1038
Modification d'une base de données à l'aide de procédures
stockées (ASP.NET) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1048
Création de pages limitant l'accès à votre site (ASP.NET) . . . . . . . 1050
Chapitre 42 : Création rapide d'applications ASP et JSP . . . . 1051
Création d'un ensemble de pages Principale-Détails (ASP et
JSP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1051
Création de pages de recherche/résultats (ASP et JSP) . . . . . . . . 1056
Création d'une page d'insertion d'enregistrements (ASP et
JSP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1056
Création de pages de mise à jour d'un enregistrement (ASP et
JSP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1056
Création de pages de suppression d'un enregistrement (ASP et
JSP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1063
Création de pages comportant des objets de manipulation de
données avancés (ASP et JSP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1068
Création de pages limitant l'accès à votre site (ASP et JSP) . . . . . 1073
Utilisation de JavaBeans (JSP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1073
Chapitre 43 : Création rapide d'applications PHP . . . . . . . . . . 1077
Création de pages Principale-Détails (PHP) . . . . . . . . . . . . . . . . . . . .1077
Création de pages de recherche/de résultats (PHP) . . . . . . . . . . . . 1084
Création d'une page d'insertion d'enregistrements (PHP) . . . . . . . 1084
Création de pages pour mettre à jour un enregistrement (PHP) . . 1084
Création de pages de suppression d'un enregistrement (PHP) . . . 1092
Création de pages limitant l'accès à votre site (PHP). . . . . . . . . . . . . 1101
Table des matières
15
PARTIE 9 : ANNEXES
Annexe A : Guide du débutant en base de données . . . . . . . . . 1105
A propos des bases de données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1105
Principes fondamentaux pour la conception d'une base de
données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1107
Description des connexions aux bases de données . . . . . . . . . . . . . . 1114
Annexe B : Initiation à SQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1121
Notions de syntaxe élémentaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1121
Définition des colonnes d'un jeu d'enregistrements . . . . . . . . . . . . . 1123
Limite du nombre d'enregistrements dans un jeu. . . . . . . . . . . . . . . . 1124
Tri des enregistrements d'un jeu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1128
Relations entre tableaux. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1128
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1131
16
Table des matières
1
PARTIE 1
Notions de base de
Dreamweaver
Apprenez à utiliser la documentation de Macromedia Dreamweaver 8 et
d'autres ressources, puis configurez l'espace de travail de Dreamweaver en
fonction de votre style de travail préféré. Ensuite, planifiez et configurez un
site et commencez à créer des pages.
Cette partie du manuel contient les chapitres suivants :
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Chapitre 1 : Exploration de l'espace de travail . . . . . . . . . . . . . . . . . 41
Chapitre 2 : Configuration d'un site Dreamweaver . . . . . . . . . . . . .85
Chapitre 3 : Création et ouverture de documents . . . . . . . . . . . . . .99
17
Introduction
Macromedia Dreamweaver 8 est un éditeur HTML professionnel destiné à la conception, au
codage et au développement de sites, de pages et d'applications Web. Quel que soit
l'environnement de travail utilisé (codage-manuel HTML ou environnement d'édition
visuel), Dreamweaver propose des outils qui vous aideront à créer des applications Web.
Les fonctions d'édition visuelles de Dreamweaver vous permettent de créer rapidement des
pages sans rédiger une seule ligne de code. Vous pouvez afficher tous les éléments ou actifs de
votre site et les faire glisser directement d'un panneau convivial dans un document.
Rationalisez les tâches de développement en créant et en modifiant des images dans
Macromedia Fireworks ou toute autre application graphique, puis en les important
directement dans Dreamweaver, ou en ajoutant des objets Flash Macromedia.
Dreamweaver propose également un environnement de codage complet comprenant des
outils de modification du code (comme la coloration du code et la création de balises) ainsi
que des documents de référence sur les feuilles de style en cascade (CSS - Cascading Style
Sheets), JavaScript et ColdFusion Markup Language (CFML). La technologie Roundtrip
HTML de Macromedia permet d'importer des documents HTML codés manuellement sans
en modifier le code pour que vous puissiez ensuite reformater ce dernier avec le style de
formatage de votre choix.
Dreamweaver permet également de créer des applications Web reposant sur des bases de
données dynamiques au moyen de technologies serveur comme CFML, ASP.NET, ASP, JSP
et PHP.
Dreamweaver est entièrement personnalisable. Vous pouvez créer vos propres objets et
commandes, modifier les raccourcis clavier ou encore rédiger un code JavaScript pour intégrer
de nouveaux comportements, inspecteurs de propriétés et rapports de site aux fonctionnalités
de Dreamweaver.
Ce chapitre contient les sections suivantes :
Nouveautés de Dreamweaver 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Par où débuter. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Processus de création de sites Web dans Dreamweaver . . . . . . . . . . . . . . . . . . . . . . 28
19
Utilisation de Dreamweaver avec d'autres applications . . . . . . . . . . . . . . . . . . . . . . . 33
Dreamweaver et l'accessibilité . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Guide des supports de formation à Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Conventions typographiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Ressources sur le langage HTML et les technologies Web . . . . . . . . . . . . . . . . . . . . 39
Nouveautés de Dreamweaver 8
Dreamweaver 8 inclut de nouvelles fonctionnalités qui facilitent son utilisation et permettent
de créer des pages aussi bien dans l'environnement de conception que de programmation.
Tout d'abord, Dreamweaver 8 prend en charge les meilleures pratiques et les normes les plus
récentes de l'industrie, ce qui inclut la prise en charge de l'utilisation avancée des feuilles CSS,
du code XML et des fils RSS, ainsi que des normes d'accessibilité.
Application des meilleures pratiques
Programmation visuelle
avec les données XML
Découvrez les derniers outils XML qui permettent d'intégrer
des fils et simplifient la conversion du code XML en HTML.
Intégrez des données XML, telles que les fils RSS, dans des
pages Web en appliquant un flux de travail simple de type
glisser-déposer. Activez la vue Code pour personnaliser la
transformation, à l'aide de la fonctionnalité améliorée de saisie
automatique pour le code XML et XSLT. Pour plus
d'informations, voir Chapitre 36, Affichage de données XML
dans des pages Web, page 829.
Nouveau panneau CSS
unifié
Le nouveau panneau CSS unifié permet d'apprendre, ou mieux
comprendre, comment utiliser les feuilles de style CSS
intuitives et de travailler avec ces dernières, le tout à partir du
même emplacement. Toutes les fonctionnalités CSS sont
consolidées dans un panneau et ont été améliorées pour
faciliter et rentabiliser l'utilisation des styles CSS. La nouvelle
interface permet de mieux voir la cascade de styles appliqués à
un élément spécifique, pour vous permettre d'identifier
facilement les points de définition des attributs. Une grille de
propriétés permet de procéder à des modifications rapides.
Pour plus d'informations, consultez la section Utilisation du
panneau Styles CSS, page 444.
20
Introduction
Application des meilleures pratiques
Visualisation de la
présentation CSS
Appliquez les assistances visuelles lors de la conception pour
faire ressortir les bordures des présentations de feuilles CSS ou
les colorer. L'application d'assistances visuelles permet de
révéler les modes d'incorporation complexes et facilite la
sélection. Cliquez sur la présentation CSS pour afficher des
info-bulles permettant de comprendre les éléments de contrôle
de la conception. Voir Chapitre 7, Mise en forme des pages avec
les styles CSS, page 221.
Barre d'outils Rendu de
style
Examinez le contenu tel qu'il apparaît aux utilisateurs et quel
que soit le mécanisme de livraison grâce à la nouvelle prise en
charge des types de support CSS. Utilisez la barre d'outils
Rendu de style pour basculer en mode Conception et voir la
page telle qu'elle s'affichera après impression, sur un
périphérique de poche ou à l'écran. Voir La barre d'outils de
rendu de style, page 52.
Améliorations du rendu
CSS
Découvrez comment les présentations CSS les plus complexes
seront rendues par la plupart des navigateurs grâce à des
améliorations substantielles de la précision de la vue
Conception. Dreamweaver prend désormais en charge
l'intégralité des techniques CSS avancées, telles que le
débordement, les pseudo-éléments et les éléments de
formulaire.
Accessibilité : Prise en
charge des points de
vérification WCAG/W3C
priorité 2
En supplément de l'outil intégré d'évaluation de la sécurité pour
les points de vérification de la Section 508 et de WCAG
Priorité 1, Dreamweaver prend désormais en charge les feuilles
CSS et l'accessibilité avec un outil d'évaluation mis à jour qui
inclut les points de vérification WCAG Priorité 2.
WebDAV amélioré
WebDAV, dans Dreamweaver 8, prend désormais en charge
l'authentification Digest et le protocole SSL pour les transferts
de données sécurisés. Cette commande permet également de
bénéficier d'une connectivité améliorée avec une plus grande
gamme de serveurs. Voir Utilisation de WebDAV pour archiver et
extraire des fichiers, page 152.
Nouveautés de Dreamweaver 8
21
Faire plus, en moins de temps, avec des flux de travail utilisateur optimisés réduisant les délais
d'accomplissement des tâches courantes. Dreamweaver 8 permet de ne plus perdre son temps
sur des tâches secondaires et de se concentrer sur la conception et le développement de sites
Web et d'applications captivants.
Meilleur rendement
Transfert de fichiers en
arrière-plan
Poursuivez votre travail pendant que Dreamweaver 8 charge
les fichiers sur le serveur. Pour plus d'informations, voir Gestion
des transferts de fichiers, page 161.
Zoom
Bénéficiez d'un meilleur contrôle de votre conception avec la
fonctionnalité de zoom. Agrandissez et inspectez une image ou
manipulez des tableaux incorporés complexes. Réduisez la
page pour obtenir une vue d'ensemble. Pour plus
d'informations, voir Zoom avant et arrière, page 397.
Guides
Comparez la présentation de votre page à des pages virtuelles
reproduites au pixel près à l'aide de guides pour mesurer la
présentation. L'affichage visuel permet de mesurer les
distances avec précision et prend en charge l'alignement
intelligent. Pour plus d'informations, voir Utilisation des guides,
page 255.
Barre d'outils de codage
La nouvelle barre d'outils de codage comporte des boutons
couvrant les principales fonctions de codage sur le côté de la
fenêtre Code. Pour plus d'informations, voir Insertion rapide de
code avec la barre d'outils de codage, page 631.
Affichage du code
Concentrez-vous sur le code que vous souhaitez vérifier en
masquant ou développant les différents blocs de code. Pour
plus d'informations, voir Réduction et développement de
fragments de code, page 637.
Présentations de l'espace
de travail
Personnalisez et enregistrez les configurations d'espace de
travail. Dreamweaver 8 est livré avec quatre configurations
conçues spécialement pour les concepteurs et les codeurs.
Vous pouvez également créer un espace de travail
personnalisé. Pour plus d'informations, voir Enregistrement de
présentations de l'espace de travail personnalisées, page 79.
Documents à onglets pour
le Mac
L'ajout d'onglets dans l'aide de la version Mac permet de
simplifier l'interface utilisateur et de faciliter la sélection de
documents. Pour plus d'informations, voir Affichage de
documents à onglet (Macintosh), page 78.
Pages à l'intention des
nouveaux utilisateurs
De nouvelles présentations et conceptions permettent de créer
des sites rapidement.
22
Introduction
Meilleur rendement
Amélioration de la
Gérez vos sites de façon plus fiable et en toute confiance. Les
synchronisation des sites et nouvelles fonctionnalités de synchronisation de sites
de leur archivage/extraction permettent de s'assurer que le fichier utilisé est bien la dernière
version. Prévenez les remplacements accidentels du travail des
autres personnes grâce à la nouvelle fonctionnalité d'archivage/
extraction. Pour plus d'informations, voir Synchronisation des
fichiers entre le site local et le site distant, page 162.
Comparaison de fichiers
Comparez rapidement les fichiers pour identifier les
modifications. Vous pouvez comparer deux fichiers locaux, un
fichier local et un fichier distant ou deux fichiers distants.
Utilisez votre outil de comparaison de fichiers préféré en
conjonction avec Dreamweaver sur les plates-formes
Macintosh et Windows. Pour plus d'informations, voir
Comparaison de fichiers pour en chercher les différences,
page 126.
Collage spécial
Grâce aux nouvelles options de collage de Dreamweaver, vous
pouvez conserver le formatage source créé à partir de
Microsoft Word, ou simplement coller le texte. Pour plus
d'informations, voir Ajout de texte dans un document, page 428.
Références relatives aux
sites
Travaillez de façon transparente avec des inclusions côté
serveur lors de la conception et de l'exécution et assurez-vous
que les références sont bien relatives aux sites et non pas aux
fichiers locaux. Pour plus d'informations, voir Définition du
chemin relatif des nouveaux liens, page 486.
Améliorations d'édition du
code
Bénéficiez d'un plus grand contrôle sur la saisie automatique de
code et de balises de Dreamweaver en fonction de vos
habitudes de travail.
Nouveautés de Dreamweaver 8
23
Dreamweaver 8 permet de découvrir de nouvelles technologies et de les exploiter, ce qui inclut
PHP 5, Flash Video, ColdFusion MX 7 et le système de publication Web de Macromedia.
Intégration des nouveaux standards et des dernières technologies
Prise en charge de
ColdFusion MX 7
Prise en charge de ColdFusion MX 7, ce qui inclut de nouveaux
comportements de serveur et la saisie automatique de code.
Pour adapter le niveau de saisie automatique et de débogage à
la bonne version de ColdFusion, Dreamweaver détecte
automatiquement la version du serveur lors de la première
connexion au site. L'intégration étroite entre Dreamweaver et
ColdFusion permet d'ajouter et de supprimer des bases de
données directement à partir du panneau Bases de données et
d'afficher uniquement les composants ColdFusion définis dans
le site actuel. Pour plus d'informations, voir Activation des
améliorations ColdFusion, page 930.
Prise en charge de PHP 5
Bénéficiez de la nouvelle prise en charge de PHP 5, ce qui
inclut les comportements serveur et la saisie automatique de
code.
Flash Video
Insérez rapidement et facilement un fichier Flash Video dans
une page Web. Pour plus d'informations, voir Insertion de
contenu Flash Vidéo, page 543.
Système de publication
Web de Macromedia :
notifications et suivi des
événements
Conservez une trace de tout ce qui se passe sur votre site. Les
événements de Dreamweaver notifient le serveur du système
de publication Web de Macromedia, ce qui permet d'enregistrer
toutes les modifications apportées au site géré par ce système.
Nouveaux supports de
référence d'O'Reilly
Consultez les nouveaux documents relatifs à XML, XSLT et
XPath, ainsi que pour ASP et JSP.
Par où débuter
La documentation de Dreamweaver contient des informations destinées à des lecteurs ayant
divers niveaux d'expérience. Pour tirer le meilleur parti de cette documentation, commencez
par lire les sections qui correspondent le mieux à votre situation.
Pour plus d'informations sur les ressources de Dreamweaver, voir Guide des supports de
formation à Dreamweaver, page 35.
24
Introduction
Concepteurs débutants
Si vous êtes novice dans le domaine de la conception de sites Web, cette section vous guidera
vers les points essentiels de la documentation Dreamweaver pour approfondir vos
connaissances.
Pour les concepteurs Web qui débutent :
1.
Commencez par les didacticiels de la section Bien démarrer avec Dreamweaver.
2.
Dans Utilisation de Dreamweaver (Aide > Utilisation de Dreamweaver), lisez les chapitres
suivants : Chapitre 1, Exploration de l'espace de travail, page 41, Chapitre 2, Configuration
d'un site Dreamweaver, page 85, Chapitre 4, Gestion des fichiers, page 111 et Chapitre 3,
Création et ouverture de documents, page 99.
3.
Lisez le Chapitre 9, Mise en forme des pages avec le mode Mise en forme, page 289 pour en
savoir plus sur la mise en forme de pages.
4.
Lisez le Chapitre 13, Insertion et mise en forme de texte, page 415 et le Chapitre 14, Insertion
d’images, page 457 pour en savoir plus sur le formatage de texte et l'ajout d'images à vos
pages.
C'est tout ce dont vous avez besoin pour commencer à réaliser des sites Web de qualité ;
lorsque vous vous sentirez prêt à utiliser des outils plus sophistiqués, lisez les autres chapitres
concernant les pages statiques dans Utilisation de Dreamweaver. Si vous le souhaitez, vous
pouvez d'abord vous familiariser avec la création de pages Web avant de lire ces chapitres.
Concepteurs expérimentés
Si vous êtes un concepteur de sites Web expérimenté, cette section vous guidera vers les points
essentiels de la documentation Dreamweaver correspondant à vos connaissances. Deux
approches différentes sont proposées : une pour les concepteurs qui n'ont jamais ou peu utilisé
Dreamweaver et une pour les concepteurs qui connaissent déjà bien Dreamweaver mais qui
veulent en savoir plus sur la création de pages dynamiques.
Pour les concepteurs Web expérimentés qui utilisent Dreamweaver pour la
première fois :
1.
Commencez par les didacticiels de la section Bien démarrer avec Dreamweaver.
2.
Dans Utilisation de Dreamweaver, lisez le Chapitre 1, Exploration de l'espace de travail,
page 41 pour en savoir plus sur l'interface utilisateur de Dreamweaver.
Par où débuter
25
3.
Bien que vous connaissiez la plupart des sujets abordés dans le Chapitre 2, Configuration
d'un site Dreamweaver, page 85 et le Chapitre 4, Gestion des fichiers, page 111, parcourez
ces chapitres pour savoir comment ces concepts sont implémentés dans Dreamweaver.
Attachez-vous particulièrement aux sections traitant de la configuration d'un site
Dreamweaver.
4.
Pour obtenir des informations utiles sur la création de pages HTML simples dans
Dreamweaver, lisez le Chapitre 13, Insertion et mise en forme de texte, page 415 et le
Chapitre 14, Insertion d’images, page 457.
5.
Pour plus d'informations sur le codage dans Dreamweaver, voir Configuration d'un
environnement de codage, page 597, Codage dans Dreamweaver, page 617, Optimisation et
débogage de code, page 647 et Modification du code en mode Création, page 657.
6.
Lisez la présentation au début des autres chapitres de Utilisation de Dreamweaver pour
savoir si les sujets abordés sont susceptibles de vous intéresser.
Pour les concepteurs Web expérimentés qui connaissent bien Dreamweaver
et souhaitent en apprendre davantage sur la création de pages dynamiques :
1.
Lisez tout d'abord Annexe 2, “Description des applications Web” et Didacticiel :
Développement d’une application Web dans Bien démarrer avec Dreamweaver.
2.
Dans Utilisation de Dreamweaver, parcourez le Chapitre 1, Exploration de l'espace de travail,
page 41 pour en savoir plus sur les nouveaux aspects de l'interface utilisateur de
Dreamweaver, puis lisez Optimisation de l'espace de travail pour tirer parti des fonctions de
développement visuel, page 735.
3.
Familiarisez-vous avec la conception de pages dynamiques dans Dreamweaver en lisant
Déroulement de la conception de pages dynamiques, page 749.
4.
Configurez un serveur Web et un serveur d'application (voir Chapitre 23, Configuration
d'une application Web, page 673).
5.
Connectez-vous à une base de données. (voir Connexion à une base de données, page 684).
6.
Lisez la présentation au début de chaque chapitre de Utilisation de Dreamweaver pour
savoir si les sujets abordés sont susceptibles de vous intéresser.
7.
Si vous souhaitez personnaliser Dreamweaver manuellement, consultez la section
« Personnalisation de Dreamweaver » du centre de support de Macromedia à l'adresse
suivante : www.macromedia.com/go/customizing_dreamweaver_fr. Si vous voulez écrire
des extensions pour Dreamweaver, lisez Extension de Dreamweaver.
26
Introduction
Codeurs manuels expérimentés
Si vous êtes un codeur manuel expérimenté, cette section vous guidera vers les points
essentiels de la documentation Dreamweaver correspondant à vos connaissances.
Pour les codeurs manuels expérimentés :
1.
Dans Utilisation de Dreamweaver, lisez le Chapitre 1, Exploration de l'espace de travail,
page 41 pour en savoir plus sur l'interface utilisateur de Dreamweaver.
2.
Bien que vous connaissiez la plupart des sujets abordés dans le Chapitre 2, Configuration
d'un site Dreamweaver, page 85 et le Chapitre 4, Gestion des fichiers, page 111, parcourez
ces chapitres pour savoir comment ces concepts sont implémentés dans Dreamweaver.
Attachez-vous particulièrement aux sections traitant de la configuration d'un site
Dreamweaver.
3.
Pour en savoir plus sur le codage dans Dreamweaver, lisez les chapitres suivants :
Chapitre 19, Configuration d'un environnement de codage, page 597, Chapitre 20, Codage
dans Dreamweaver, page 617, Chapitre 21, Optimisation et débogage de code, page 647 et
Chapitre 22, Modification du code en mode Création, page 657.
4.
Lisez la présentation au début de chaque chapitre de Utilisation de Dreamweaver pour
savoir si les sujets abordés sont susceptibles de vous intéresser.
Développeurs d'applications Web
Si vous êtes un développeur d'applications Web expérimenté, cette section vous guidera vers
les points essentiels de la documentation Dreamweaver correspondant à vos connaissances.
Deux approches différentes sont proposées, selon que vous avez déjà utilisé Dreamweaver ou
non.
Pour les développeurs d'applications Web n'ayant jamais utilisé
Dreamweaver :
1.
Commencez par parcourir le guide Bien démarrer avec Dreamweaver pour vous familiariser
avec les notions de base de Dreamweaver.
2.
Dans Utilisation de Dreamweaver, lisez le Chapitre 1, Exploration de l'espace de travail,
page 41 pour en savoir plus sur l'interface utilisateur de Dreamweaver.
3.
Bien que vous connaissiez la plupart des sujets abordés dans le Chapitre 2, Configuration
d'un site Dreamweaver, page 85 et le Chapitre 4, Gestion des fichiers, page 111, parcourez
ces chapitres pour savoir comment ces concepts sont implémentés dans Dreamweaver.
Attachez-vous particulièrement aux sections traitant de la configuration d'un site
Dreamweaver.
Par où débuter
27
4.
Configurez un serveur Web et un serveur d'application à l'aide de Dreamweaver (voir
Chapitre 23, Configuration d'une application Web, page 673).
5.
Connectez-vous à une base de données. (voir Connexion à une base de données, page 684).
6.
Lisez la présentation au début des autres chapitres de Utilisation de Dreamweaver pour
savoir si les sujets abordés sont susceptibles de vous intéresser.
Pour les développeurs d'applications Web ayant déjà utilisé Dreamweaver :
1.
Commencez par lire Nouveautés de Dreamweaver 8, page 20.
2.
Dans Utilisation de Dreamweaver, parcourez le Chapitre 1, Exploration de l'espace de travail,
page 41 pour en savoir plus sur les nouveaux aspects de l'interface utilisateur de
Dreamweaver.
3.
Si vous souhaitez personnaliser Dreamweaver manuellement, consultez la section
« Personnalisation de Dreamweaver » du centre de support de Macromedia à l'adresse
suivante : www.macromedia.com/go/customizing_dreamweaver_fr. Si vous voulez écrire
des extensions pour Dreamweaver, lisez Extension de Dreamweaver.
Processus de création de sites Web dans
Dreamweaver
Vous pouvez créer un site Web de plusieurs façons. Le processus présenté ici commence par la
définition de la stratégie ou des objectifs d'un site. Si vous développez des applications Web,
vous devez configurer les serveurs et bases de données en fonction de votre système. Vous
devez ensuite définir l'aspect général du site. Ensuite, vous devez créer le site et coder les pages
pour ajouter un contenu et définir l'interactivité du site. Vous allez ensuite lier les pages les
unes aux autres et tester la fonctionnalité du site pour savoir s'il remplit les objectifs fixés.
Vous pouvez également inclure des pages dynamiques à votre site. Enfin, vous allez publier 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.
Planification de votre site
Organisez avec soin votre site : cela vous fera gagner beaucoup de temps par la suite.
L'organisation d'un site ne se réduit pas à déterminer l'emplacement des fichiers : elle inclut
également l'analyse des besoins du site, des profils de ses utilisateurs et de ses objectifs. 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.
28
Introduction
Après avoir organisé vos informations et défini une structure, vous pouvez commencer la
création du site.
■
Utilisez le panneau Fichiers de Dreamweaver pour configurer la structure
organisationnelle 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 (voir Chapitre 2, Configuration d'un site Dreamweaver, page 85 et
Chapitre 4, Gestion des fichiers, page 111).
■
Vous pouvez commencer par créer des pages simples qui deviendront plus complexes au
fur et à mesure de leur conception. Créez de nouvelles pages vierges ou des pages basées
sur des pages prédéfinies (voir Chapitre 3, Création et ouverture de documents, page 99).
Si vous travaillez au sein d'une équipe de développement Web, les sujets suivants sont
également susceptibles de vous intéresser :
■
Configuration d'un système pour empêcher les membres de l'équipe d'écraser les fichiers
(voir Archivage et extraction de fichiers, page 149).
■
Utilisation de Design Notes pour communiquer avec les membres de l'équipe Web (voir
Stockage des informations sur les fichiers dans des Design Notes, page 169).
Gestion des fichiers du site
Les panneaux Fichiers et Actifs de Dreamweaver facilitent la gestion des fichiers de votre site.
■
Dans le panneau Fichiers de Dreamweaver, vous trouverez de nombreux outils qui vous
aideront à gérer votre site, à transférer vos fichiers vers et depuis un serveur distant, à
configurer un processus d'archivage/extraction pour empêcher l'écrasement des fichiers et
à synchroniser les fichiers sur vos sites locaux et distants (voir Gestion des fichiers,
page 111).
■
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 (voir Chapitre 5, Gestion des actifs de site et des bibliothèques, page 179).
■
Dreamweaver vous permet de gérer certains aspects de vos sites Contribute (voir
Chapitre 6, Gestion des sites Contribute avec Dreamweaver, page 203).
Mise en forme de pages Web
Dreamweaver vous permet de progresser à votre rythme et selon vos envies dans la mise en
forme de vos pages. 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.
Processus de création de sites Web dans Dreamweaver
29
■
Vous pouvez utiliser des calques ou des styles de positionnement CSS Dreamweaver pour
définir la mise en forme (voir Chapitre 7, Mise en forme des pages avec les styles CSS,
page 221).
■
Les outils de création de tableaux et le mode Mise en forme de Dreamweaver vous
permettent de concevoir rapidement des pages Web en dessinant, puis en réorganisant la
structure des pages (voir Chapitre 8, Présentation de contenu à l'aide de tableaux, page 261
et Chapitre 9, Mise en forme des pages avec le mode Mise en forme, page 289).
■
Si vous souhaitez afficher plusieurs documents simultanément dans un navigateur Web,
vous pouvez définir leur mise en forme en utilisant des cadres (voir Chapitre 10,
Utilisation de cadres, page 311).
■
Les modèles Dreamweaver permettent d'appliquer facilement un contenu réutilisable et
des conceptions de page dans votre site. 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 Chapitre 11, Gestion des modèles, page 333).
Ajout de contenu dans les pages
Avec Dreamweaver, vous pouvez sans difficulté ajouter des contenus variés à vos pages Web.
Ajoutez des actifs et des éléments de conception, par exemple des textes, des images, des
couleurs, des animations, des sons et autres formes de données.
■
Les fonctions de création de pages offertes par Dreamweaver vous permettent de spécifier
des propriétés de page Web, par exemple, le titre d'une page ou encore des images et
couleurs d'arrière-plan. De plus, Dreamweaver comprend des outils vous permettant
d'optimiser les performances de votre site Web et de tester les pages pour garantir leur
compatibilité avec différents navigateurs Web (voir Chapitre 12, Utilisation des pages,
page 383).
■
Tapez directement du texte dans un document Dreamweaver ou importez du texte à
partir d'autres documents, puis formatez-le avec l'inspecteur de propriétés de
Dreamweaver. Vous pouvez également créer facilement vos propres feuilles de style en
cascade (voir Chapitre 13, Insertion et mise en forme de texte, page 415).
■
Insérez des images telles que des images survolées, des cartes graphiques et des images
Fireworks découpées, et positionnez-les sur la page à l'aide des outils d'alignement. Vous
pouvez également redimensionner directement les images dans Dreamweaver (voir
Chapitre 14, Insertion d’images, page 457 et Chapitre 16, Utilisation d'autres applications,
page 509).
30
Introduction
■
Avec Dreamweaver, vous pouvez créer des liens HTML standard, y compris des ancres et
des liens de messagerie, ou configurer facilement des systèmes de navigation graphiques,
notamment des menus de reroutage et des barres de navigation (voir Chapitre 15, Liens et
navigation, page 473).
■
Insérez d'autres types de ressources dans une page Web : animations Flash, Shockwave ou
QuickTime, sons, applets (voir Chapitre 17, Ajout d'éléments audio, vidéo et interactifs,
page 527).
■
Utilisez les comportements pour exécuter des tâches en réponse à des événements
spécifiques, par exemple l'illumination d'un bouton lorsque le visiteur le survole avec la
souris, la validation d'un formulaire lorsque le visiteur clique sur le bouton Envoyer ou
l'ouverture d'une deuxième fenêtre lorsque la page principale a fini de se charger (voir
Chapitre 18, Utilisation des comportements JavaScript, page 555).
Codage manuel
Le codage manuel de pages Web constitue une autre méthode de 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.
■
Vous pouvez travailler dans un environnement de codage sans faire appel aux outils
visuels. En effet, les outils de codage permettent de créer, de modifier et de formater du
code et de vérifier sa conformité aux normes (voir Chapitre 19, Configuration d'un
environnement de codage, page 597, Chapitre 20, Codage dans Dreamweaver, page 617 et
Chapitre 21, Optimisation et débogage de code, page 647).
■
Vous pouvez également utiliser des outils de codage Dreamweaver en mode Création
(environnement de conception visuel) (voir Chapitre 22, Modification du code en mode
Création, page 657).
Configuration d'une application Web
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 ces pages, vous devez d'abord suivre les étapes
préparatoires suivantes :
■
Configurez un serveur Web et un serveur d'application, puis créez ou modifiez un site
Dreamweaver (voir Chapitre 23, Configuration d'une application Web, page 673).
■
Connectez-vous à une base de données. (Voir Connexion à une base de données, page 684).
Processus de création de sites Web dans Dreamweaver
31
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.
■
Pour savoir comment développer des applications Web dans Dreamweaver, apprenez à
utiliser Dreamweaver et à créer des pages dynamiques (voir Chapitre 30, Optimisation de
l'espace de travail pour tirer parti des fonctions de développement visuel, page 735 et
Chapitre 31, Déroulement de la conception de pages dynamiques, page 749).
■
Définissez et affichez un contenu dynamique dans vos pages (voir Chapitre 32,
Récupération des données spécifiques à une page, page 759, Chapitre 33, Définition de sources
de contenu dynamique, page 773, Chapitre 34, Ajout d'un contenu dynamique à une
page Web, page 797 et Chapitre 35, Affichage des enregistrements de base de données,
page 809).
■
Encapsulez la logique d'application ou d'entreprise en faisant appel aux technologies de
pointe, telles que les composants Macromedia ColdFusion et les services Web (voir
Utilisation des composants ColdFusion, page 993 et Chapitre 37, Utilisation des services
Web, page 861).
■
Créez vos propres comportements de serveur et formulaires interactifs (voir Chapitre 38,
Ajout de comportements de serveur personnalisés, page 875 et Chapitre 39, Création de
formulaires, page 899).
Développement rapide d'applications
Dreamweaver propose différents outils de développement rapide d'applications, notamment
les comportements de serveur et les objets d'application qui permettent de créer des
applications Web sophistiquées sans avoir à rédiger du code côté serveur.
■
32
Vous pouvez ainsi créer rapidement des pages qui recherchent et modifient des bases de
données, puis affichent les résultats Restreignez l'accès à vos pages pour garantir la sécurité
des informations (voir Création rapide d'applications ColdFusion, page 923, Création rapide
d'applications ASP.NET, page 1003, Création rapide d'applications ASP et JSP, page 1051
et Création rapide d'applications PHP, page 1077).
Introduction
Utilisation de Dreamweaver avec d'autres
applications
Dreamweaver s'adapte à votre méthode de conception et de développement de site Web en
vous permettant de travailler aisément avec d'autres applications. Pour plus d'informations
sur le travail en collaboration avec d'autres applications (navigateurs, éditeurs HTML,
programmes de retouche d'image et d'animation), voir les rubriques suivantes :
■
Pour plus d’informations sur l'utilisation de Dreamweaver avec d'autres éditeurs HTML,
tels que HomeSite ou BBEdit, voir Utilisation d'un éditeur HTML externe avec
Dreamweaver, page 613.
■
Vous pouvez spécifier vos navigateurs favoris pour l'affichage de votre site (voir Aperçu et
test de page dans les navigateurs, page 408).
■
Vous pouvez lancer un éditeur d'image externe, tel que Macromedia Fireworks ou Adobe
Photoshop depuis Dreamweaver (voir Utilisation d'un éditeur d'image externe, page 470).
■
Vous pouvez configurer Dreamweaver pour qu'il lance un éditeur différent pour chaque
type de fichier (voir Lancement d'un éditeur externe pour des fichiers multimédia, page 533).
■
Pour plus d'informations sur l'ajout d'interactivité à votre site à l'aide de Macromedia
Flash, voirInsertion et modification d'un objet de bouton Flash, page 536, Insertion d'un objet
texte Flash, page 538 ou Téléchargement et installation des éléments Flash, page 540.
■
Pour plus d'informations sur l'utilisation de ColdFusion, consulter l'aide de ColdFusion
(Aide > Utilisation de ColdFusion).
Dreamweaver et l'accessibilité
L'accessibilité consiste à faire en sorte que les sites ou les produits Web que vous créez puissent
être utilisés par des personnes souffrant de handicaps visuels, auditifs, moteurs ou autres. Les
fonctions d'accessibilité de produits logiciels et de sites Web peuvent être : la prise en charge
de lecteurs d'écran, des équivalents textuels pour les graphiques, des raccourcis clavier, des
modifications dans les couleurs d'affichage pour augmenter le contraste, etc.
R E M AR QU E
Pour en savoir plus sur deux de ces importantes initiatives, consultez le site de la World
Wide Web Consortium Web Accessibility Initiative (www.w3.org/wai) et la Section 508
du Federal Rehabilitation Act (www.section508.gov).
Dreamweaver inclut des outils qui facilitent son utilisation et vous permettent de créer un
contenu accessible :
Dreamweaver et l'accessibilité
33
Pour les concepteurs Web
utilisant Dreamweaver qui doivent faire appel aux fonctions d'accessibilité, Dreamweaver
prend en charge des lecteurs d'écran, la navigation avec le clavier et les fonctions d'accessibilité
de votre système d'exploitation.
Utilisation des fonctions d'accessibilité de Dreamweaver
Pour plus d'informations, voir Utilisation des fonctions d'accessibilité de Dreamweaver, page 69.
Création de pages Web accessibles Pour les concepteurs Web utilisant Dreamweaver qui
souhaitent créer du contenu accessible, Dreamweaver vous aide à créer des pages accessibles au
contenu utile pour les lecteurs d'écran et en conformité avec les directives gouvernementales.
Dreamweaver propose des boîtes de dialogue vous invitant à entrer les attributs d'accessibilité
lors de l'insertion d'éléments de page (voir Optimisation de l'espace de travail pour la conception
de pages accessibles, page 75). Par exemple, la boîte de dialogue d'accessibilité aux images vous
invite à entrer une description textuelle de chaque image. Ainsi, lorsque l'image s'affiche sur le
système d'un utilisateur ayant des problèmes de vue, le lecteur d'écran lit la description.
Dreamweaver propose également des pages Web modèles conçues dans un souci
d'accessibilité optimale (voir Création d'un document basé sur un fichier de conception
Dreamweaver, page 101) et dispose d'un rapport d'accessibilité que vous pouvez exécuter pour
vérifier si votre page ou votre site est conforme aux directives d'accessibilité de la Section 508
(voir Test de votre site, page 173).
REMARQUE
34
Néanmoins, aucun outil de création Web ne peut automatiser entièrement le processus
de développement. Pour concevoir des sites Web accessibles, vous devez comprendre
les exigences liées à l'accessibilité et devez prendre de nombreuses décisions faisant
appel à votre subjectivité. Les concepteurs de sites Web ne doivent pas oublier de
penser à la façon dont les personnes souffrant d'un handicap peuvent interagir avec les
pages Web. La meilleure façon de s'assurer qu'un site Web est accessible est de
respecter toutes les procédures de préparation, de développement, de tests et
d'évaluation.
Introduction
Fonction de validation d'accessibilité de
Dreamweaver
La fonction de validation d'accessibilité de Dreamweaver utilise la technologie de UsableNet.
UsableNet est l'un des principaux développeurs de logiciels simples d'utilisation permettant
d'automatiser les tests de fonctionnalité et d'accessibilité et les corrections. Pour une assistance
supplémentaire concernant les tests d'accessibilité, essayez le service UsableNet LIFT pour
Macromedia Dreamweaver, une solution complète pour le développement de sites Web
fonctionnels et accessibles. UsableNet LIFT pour Macromedia Dreamweaver comprend un
assistant de correction pour les tableaux, les formulaires et les images complexes, un éditeur
ALT global, la génération de rapports personnalisés et un nouveau mode de contrôle actif qui
assure l'accessibilité du contenu pendant la construction des pages. Demandez une version
démo de LIFT pour Macromedia Dreamweaver à l'adresse www.usablenet.com.
Guide des supports de formation à
Dreamweaver
Dreamweaver comprend diverses ressources qui vous aideront à vous familiariser rapidement
avec le programme et à créer facilement vos propres pages Web. Le système d’aide de
Dreamweaver est composé de plusieurs documents qui vous aident à vous familiariser avec
Dreamweaver, Dreamweaver Extensibility et ColdFusion. Il existe également des
informations complémentaires auxquelles vous pouvez accéder en mode interactif au fur et à
mesure que vous apprenez à monter des pages Web.
Accès à la documentation Dreamweaver
Le tableau suivant récapitule la documentation qui se trouve dans le système d’aide de
Dreamweaver.
Guide des supports de formation à Dreamweaver
35
Vous pouvez acheter des imprimés de titres choisis Pour plus d'informations, visitez
www.macromedia.com/go/buy_books_fr.
Titre
Description/
Utilisateurs visés
Bien démarrer
avec
Dreamweaver
• Affichage dans Dreamweaver :
Décrit les concepts
Sélectionner Aide > Bien
de base de
démarrer avec Dreamweaver
Dreamweaver et de
• Affichage interactif : http://
son interface avec
livedocs.macromedia.com/go/
des didacticiels
livedocs_dreamweaver_fr/
détaillés conçus pour
• Obtenir le PDF :
des débutants. Conçu
www.macromedia.com/go/
pour des utilisateurs
dw_documentation_fr
débutants, mais
convient également
aux utilisateurs de
niveaux avancé ou
intermédiaire qui
désirent se
familiariser avec les
nouvelles
fonctionnalités.
Utilisation de
Dreamweaver
Information complète • Affichage dans Dreamweaver :
Sélectionner Aide > Aide
sur toutes les
Dreamweaver ou Aide >
fonctionnalités de
Utilisation de Dreamweaver
Dreamweaver. Conçu
•
Affichage interactif : http://
pour tous les
livedocs.macromedia.com/go/
utilisateurs de
livedocs_dreamweaver_fr/
Dreamweaver
• Obtenir le PDF :
www.macromedia.com/go/
dw_documentation_fr
Extension de
Dreamweaver
• Affichage dans Dreamweaver :
Décrit le cadre de
Sélectionner Aide > Extensions
Dreamweaver et
de Dreamweaver
l'interface de
• Affichage interactif : http://
programmation
livedocs.macromedia.com/go/
d'application (API).
livedocs_dreamweaver_fr/
Conçu pour les
•
Obtenir le PDF :
utilisateurs avancés
www.macromedia.com/go/
qui veulent construire
dw_documentation_fr
des extensions à
l'interface de
Dreamweaver ou bien
la personnaliser.
36
Introduction
Où le trouver
Titre
Description/
Utilisateurs visés
Où le trouver
Guide des API
de
Dreamweaver
• Affichage dans Dreamweaver :
Décrit l'utilitaire API
Sélectionner Aide > Référence
et l'API JavaScript,
API Dreamweaver
tous deux vous
venant en aide quand • Affichage interactif : http://
livedocs.macromedia.com/go/
vous développez des
livedocs_dreamweaver_fr/
extensions à
• Obtenir le PDF :
Dreamweaver Conçu
www.macromedia.com/go/
pour les utilisateurs
dw_documentation_fr
avancés qui veulent
développer l'interface
de Dreamweaver ou
bien la personnaliser
Utilisation de
ColdFusion
Comprend une
sélection des livres
les plus importants
dans le lot de la
documentation
ColdFusion. (Le lot
complet est
disponible sur
LiveDocs.) Conçu
pour quiconque est
intéressé par
ColdFusion, des
développeurs
débutants jusqu'aux
avancés
Référence
Comprend plusieurs • Affichage dans Dreamweaver :
Sélectionner Aide > Référence.
types de manuels de
Pour une liste complète de
référence à propos de
manuels, cliquer sur le menu
HTML, de modèles
déroulant de Book dans le
de serveurs et
Panneau de références.
d'autres sujets, parus
surtout chez O'Reilly
Conçu pour
quiconque a besoin
de plus d'informations
sur la syntaxe de
codage, les concepts
et autres.
• Affichage dans Dreamweaver :
Sélectionner Aide > Utilisation
de ColdFusion
• Affichage interactif : http://
livedocs.macromedia.com/go/
livedocs_coldfusion/
• Obtenir le PDF :
www.macromedia.com/go/
dw_documentation_fr
Guide des supports de formation à Dreamweaver
37
Accéder à des informations complémentaires sur
Dreamweaver en mode interactif
Le tableau suivant récapitule les informations complémentaires disponibles en mode interactif
pour l'apprentissage de Dreamweaver.
Information
Description/
Utilisateurs visés
Où le trouver
Centre de
support de
Dreamweaver
Notes techniques,
assistance et
informations pour
résoudre les
problèmes à
l'intention des
utilisateurs de
Dreamweaver.
www.macromedia.com/go/
dreamweaver_support_fr
Centre de
développeurs
Dreamweaver
Articles et didacticiels www.macromedia.com/go/
dreamweaver_devcenter_fr
pour vous aider à
améliorer vos
capacités et en
acquérir de nouvelles.
Centre de
documentation
de
Dreamweaver
Obtenir des manuels www.macromedia.com/go/
de produits en format dw_documentation_fr
PDF, listes d'erreurs,
didacticiels et notes
d'accompagnement.
Forums
Macromedia
interactifs
www.macromedia.com/go/
Discussions et
dreamweaver_newsgroup
informations en vue
de résoudre des
problèmes réunissant
utilisateurs de
Dreamweaver,
représentants du
support technique et
l'équipe de
développement de
Dreamweaver.
Formation
Macromedia
Cours comprenant
www.macromedia.com/go/
des travaux pratiques dreamweaver_training_fr
et des scénarios tirés
de la vie réelle.
Pour tirer le meilleur parti des ressources de Dreamweaver, voir Par où débuter, page 24.
38
Introduction
Conventions typographiques
Ce manuel utilise les conventions typographiques suivantes :
■
Les éléments de menus sont indiqués de la manière suivante : nom du menu > nom de
l'élément de menu. Les éléments de sous-menus sont indiqués de la manière suivante :
nom du menu > nom du sous-menu > nom de l'élément de menu.
■
Police de code indique
■
Police de code en italique
les noms des balises et attributs HTML, ainsi que le texte utilisé
littéralement dans les exemples.
indique les éléments remplaçables (parfois appelés
métasymboles) dans le code.
■
Texte en gras indique le texte que vous devez saisir exactement à l'identique.
Pour obtenir une liste complète des ressources proposées par Dreamweaver, voir Guide des
supports de formation à Dreamweaver, page 35.
Ressources sur le langage HTML et les
technologies Web
Voici quelques ressources utiles disponibles sur le Web :
REMARQUE
Pour obtenir une liste des ressources proposées par Dreamweaver, voir Guide des
supports de formation à Dreamweaver, page 35.
Les spécifications Cascading Style Sheets, niveau 1 (CSS1) (www.w3.org/TR/REC-
CSS1) et niveau 2 (CSS2) (www.w3.org/TR/REC-CSS2/) sont des spécifications officielles
des feuilles de style CSS, définies par le World Wide Web Consortium.
La spécification HTML 4.01 (www.w3.org/TR/REC-html40/)
est la spécification officielle
du code HTML du World Wide Web Consortium.
Index DOT HTML (www.blooberry.com/indexdot/html/)
affiche une liste complète des
balises, attributs et valeurs HTML, ainsi que leur compatibilité respective avec les divers
navigateurs.
La spécification XHTML 1.0(www.w3.org/TR/xhtml1/)
est la spécification officielle du
langage XHTML (Extensible Hypertext Markup Language).
Le site O’Reilly XML.com (www.xml.com)
propose des informations, des didacticiels et des
conseils sur le langage XML (Extensible Markup Language) et sur d'autres technologies Web.
Ressources sur le langage HTML et les technologies Web
39
Le site xFront (www.xfront.com/rescuing-xslt.html) présente les transformations XSL et
s'adresse aux nouveaux utilisateurs.
(http://msdn.microsoft.com/library/en-us/dnasp/html/
ASPover.asp) proposent des informations sur les pages de serveur actives ASP (Active Server
Pages).
Les pages ASP de Microsoft
La page ASP.NET de Microsoft (http://msdn.microsoft.com/asp.net/)
comporte des
informations sur ASP.NET.
La page JSP de Sun (http://java.sun.com/products/jsp/) propose des informations sur les
pages JSP (pages JavaServer).
Le site Web PHP (www.php.net/)
Le site MySQL
propose des informations sur la technologie PHP.
(www.mysql.com/) propose des informations sur MySQL.
(www.bbsinc.com/iso8859.html) présente la liste des noms d'entités utilisées
dans le codage ISO 8859-1 (Latin-1).
Entities Table
La page sur le produit ColdFusion de Macromedia (www.macromedia.com/go/coldfusion/
) propose des informations sur ColdFusion.
La page sur le produit JRun Server de Macromedia (www.macromedia.com/go/jrun_fr/)
propose des informations sur le serveur d'application JRun Java.
Web Services Demystified (www.sitepoint.com/article/692)
propose des informations sur
les services Web et sur leur fonctionnement.
JavaScript Bible,
par Danny Goodman (IDG Books), couvre de façon exhaustive le langage
JavaScript 1.2 .
JavaScript : The Definitive Guide, par David Flanagan (O’Reilly & Associates), propose des
informations de référence sur chaque fonction, objet, méthode, propriété et gestionnaire
d'événements de JavaScript.
Le site CGI Resource Index (www.cgi-resources.com/) est un site de référence sur tout ce qui
concerne les scripts CGI, avec des scripts prêts à l'emploi, de la documentation, des manuels
et même des programmeurs à votre disposition.
Le site Common Gateway Interface (http://hoohoo.ncsa.uiuc.edu/cgi/)
présentation des scripts CGI.
40
Introduction
comporte une
CHAPITRE 1
1
Exploration de l'espace de
travail
Pour utiliser au mieux Macromedia Dreamweaver 8, vous devez bien comprendre les concepts
de base du fonctionnement de l'espace de travail de Dreamweaver afin de pouvoir sélectionner
les options, utiliser les inspecteurs et les panneaux et définir les préférences qui conviennent le
mieux à votre façon de travailler.
Ce chapitre contient les sections suivantes :
A propos de l'espace de travail de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Utilisation de la fenêtre de document. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Utilisation des barres d'outils, des inspecteurs et des menus contextuels. . . . . . . . 58
Utilisation des panneaux et des groupes de panneaux . . . . . . . . . . . . . . . . . . . . . . . . 65
Utilisation des fonctions d'accessibilité de Dreamweaver. . . . . . . . . . . . . . . . . . . . . . 69
Optimisation de l'espace de travail pour la conception de pages accessibles . . . . 75
Utilisation de guides visuels dans Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Dreamweaver personnalisation, notions de base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Rubriques connexes
■
Optimisation de l'espace de travail pour tirer parti des fonctions de développement visuel,
page 735
A propos de l'espace de travail de
Dreamweaver
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.
41
Présentation de l'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.
Barre Insérer
Barre d'outils du document
Sélecteur de balises
REMARQUE
42
Fenêtre de document
Inspecteur Propriétés
Groupes de panneaux
Panneau Fichiers
L'espace de travail Windows dispose également d'une option Codeur, qui ancre les
groupes de panneaux sur le côté gauche et affiche par défaut la fenêtre du document en
mode Code. Pour plus d'informations, voir Utilisation de l'espace de travail orienté en
mode Code (Windows uniquement), page 599. Pour l'utilisation de cette option, voir
Choix de la présentation de l'espace de travail (sous Windows uniquement), page 77.
Chapitre 1 : Exploration de l'espace de travail
Sur le Macintosh, Dreamweaver permet d'afficher plusieurs documents dans une seule fenêtre
et identifie ces documents à l'aide d'onglets. 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. Les fenêtres s'alignent automatiquement les unes sur les
autres sur les côtés de l'écran, et sur la fenêtre du document au fur et à mesure que vous les
faites glisser ou que vous les redimensionnez.
Barre d'outils du document
Fenêtre de document
Barre Insérer
Sélecteur de
balises
Inspecteur Propriétés
Groupes de panneaux
Panneau Fichiers
Vous pouvez basculer entre différentes mises en forme à la fois dans Windows et Macintosh.
Pour plus d'informations, consultez les sections Choix de la présentation de l'espace de travail
(sous Windows uniquement), page 77 et Affichage de documents à onglet (Macintosh), page 78.
Rubriques connexes
■
Eléments de l'espace de travail de Dreamweaver, page 44
■
Utilisation des barres d'outils, des inspecteurs et des menus contextuels, page 58
A propos de l'espace de travail de Dreamweaver
43
■
Utilisation des panneaux et des groupes de panneaux, page 65.
Eléments de l'espace de travail de Dreamweaver
Cette section décrit rapidement quelques éléments de l'espace de travail de Dreamweaver.
REMARQUE
Dreamweaver propose de nombreux autres inspecteurs, panneaux et fenêtres. Pour
ouvrir les panneaux, inspecteurs et fenêtres Dreamweaver, utilisez le menu Fenêtre. Si
vous n'arrivez pas à localiser un panneau, un inspecteur ou une fenêtre indiqués comme
ouverts, choisissez Fenêtre > Réorganiser Panneaux pour présenter tous les panneaux
ouverts à l'écran.
permet d'ouvrir un document récent ou de créer un nouveau
document. Vous pouvez également, à partir de la page de démarrage, survoler Dreamweaver
ou accéder à un didacticiel.
La page de démarrage
La barre Insérer contient des boutons permettant d'insérer divers types d'« objets », tels que
des images, tableaux et calques 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 de la barre Insérer. Si vous le
préférez, vous pouvez insérer les objets à partir du menu Insertion.
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.
La barre d'outils du document
(non affichée par défaut dans l'espace de travail) contient des
boutons correspondant aux opérations courantes des menus Fichier et Edition : Nouveau,
Ouvrir, Enregistrer, Enregistrer tout, 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 standard
La barre d'outils de codage (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) 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.
La 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 contient 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.
44
Chapitre 1 : Exploration de l'espace de travail
qui se trouve dans la barre d'état, en bas de la fenêtre de document,
affiche la hiérarchie des balises entourant la sélection courante. Cliquez sur une balise
quelconque dans la hiérarchie pour la sélectionner avec son contenu.
Le sélecteur de balises,
Les groupes de panneaux sont des ensembles de panneaux associés regroupés sous un même
titre. Pour développer un groupe de panneaux, cliquez sur la flèche d'agrandissement située à
gauche du nom du groupe ; pour détacher un groupe de panneaux, faites glisser la poignée
d'ancrage sur le côté gauche de la barre de titre du groupe.
vous 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).
Le panneau Fichiers
Rubriques connexes
■
Utilisation de la fenêtre de document, page 54
■
Utilisation des barres d'outils, des inspecteurs et des menus contextuels, page 58
■
Utilisation des panneaux et des groupes de panneaux, page 65
■
Gestion de fichiers et de dossiers dans le panneau Fichiers, page 133
Fenêtre de document
La fenêtre de document affiche le document actif. Vous pouvez choisir parmi les modes
d'affichage suivants :
: 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. Vous pouvez configurer le mode Création pour
qu'il affiche le contenu dynamique pendant que vous travaillez sur le document (voir Affichage
des données dynamiques en mode Création, page 739).
Mode Création
: 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. Pour plus d'informations, voir Chapitre 20, Codage
dans Dreamweaver, page 617.
Mode Code
: environnement mixte affichant les modes Création et Code du
document dans une même fenêtre.
Mode Code et Création
A propos de l'espace de travail de Dreamweaver
45
Lorsque la fenêtre de document dispose d'une barre de titre, cette dernière affiche le titre de la
page, et, entre parenthèses, le chemin et le nom de fichier du document. Dreamweaver affiche
un astérisque à la suite du nom de fichier si vous avez apporté des modifications et que vous
ne les avez pas encore enregistrées.
Lorsque vous agrandissez la fenêtre de document de la présentation de l'espace de travail
intégré (sous Windows uniquement), elle s'affiche sans barre de titre ; le titre de la page, ainsi
que le chemin et le nom du fichier s'affichent dans la barre de titre de la fenêtre principale de
l'espace de travail.
Lorsqu'une fenêtre de document est agrandie, des onglets s'affichent en haut de la zone de la
fenêtre de document indiquant les noms de fichier de tous les documents ouverts. Pour passer
à un autre document, cliquez sur son onglet.
Rubriques connexes
■
Utilisation de la fenêtre de document, page 54
Barre d'outils de document
La barre d'outils de document est composée de boutons qui permettent d'accéder rapidement
aux différents modes d'affichage : Code, Création et un mode d'affichage partagé pour
afficher les modes Code et Création en même temps.
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.
Mode Code
Modes Code et Création
Aucune erreur du navigateur
Valider le marqueur
Gestion de fichiers
Mode Création
Assistances visuelles
Débogage du serveur
Titre du document
Options d'affichage
Actualiser mode Création
Aperçu/Débogage dans le navigateur
Les options suivantes s'affichent dans la barre d'outils de document :
Mode Code
pour afficher uniquement le mode Code dans la fenêtre de document.
pour afficher les deux modes simultanément dans deux volets
distincts de la fenêtre de document. Dans ce cas, l'option Mode Création en haut est activée
dans le menu Options d'affichage. Utilisez cette option pour préciser quel mode doit
s'afficher en haut de la fenêtre de document.
Modes Code et Création
46
Chapitre 1 : Exploration de l'espace de travail
Mode Création
pour afficher uniquement le mode Création dans la fenêtre de document.
Débogage de serveur affiche un rapport pour vous aider à déboguer la page ColdFusion en
cours. Le rapport indique les erreurs éventuellement présentes sur votre page.
Titre du document pour 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.
Aucune erreur du navigateur
permet de vérifier la compatibilité avec différents navigateurs.
Valider le marqueur
permet de valider le document actif ou la balise sélectionnée.
Gestion des fichiers
pour afficher le menu contextuel correspondant.
Aperçu/Débogage dans le navigateur pour prévisualiser ou déboguer un document dans un
navigateur. Sélectionnez un navigateur dans le menu contextuel.
pour actualiser 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.
Actualiser le mode Création
Options d'affichage pour 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. Pour plus d'informations sur les
options du mode Code, voir Définition des préférences de codage, page 600. Pour plus
d'informations sur les options du mode Création, voir Sélection d'éléments dans la fenêtre de
document, page 395, Affichage et modification du contenu de l'en-tête, page 668 et Utilisation de
guides visuels dans Dreamweaver, page 76.
Assistances visuelles pour
utiliser différentes assistances visuelles de conception de pages.
Rubriques connexes
■
Affichage des barres d'outils, page 58
Barre d'outils standard
La barre d'outils standard contient des boutons correspondant aux opérations courantes des
menus Fichier et Edition : Nouveau, Ouvrir, Enregistrer, Enregistrer tout, Couper, Copier,
Coller, Annuler et Répéter. Utilisez ces boutons comme vous utiliseriez les commandes de
menu équivalentes.
Pour plus d'informations sur les opérations telles que Ouvrir et Enregistrer, voir Chapitre 3,
Création et ouverture de documents, page 99.
A propos de l'espace de travail de Dreamweaver
47
Rubriques connexes
■
Affichage des barres d'outils, page 58
Barre d'état
La barre d'état, située au bas de la fenêtre de document, fournit des informations
supplémentaires sur le document en cours de création.
Taille du document et estimation du
temps de téléchargement
Sélecteur de balises
Menu contextuel Taille de fenêtre
Définir le facteur de zoom
Outil Zoom
Outil Main
Outil Sélectionner
Le sélecteur de balises affiche la hiérarchie des balises entourant la sélection courante. 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.
L'outil Main permet de cliquer sur le document et de le faire glisser sur la fenêtre de
document. Cliquez sur l'outil Sélection pour désactiver l'outil Main.
L'outil Zoom et le menu déroulant Définir le facteur de zoom permettent de définir un taux
d'agrandissement pour votre document. Pour plus d'informations, voir Zoom avant et arrière,
page 397.
Le menu déroulant Taille de la fenêtre (visible en mode Création uniquement) permet de
redimensionner la fenêtre du document selon des dimensions prédéfinies ou personnalisées.
Pour plus d’informations, consultez la section Redimensionnement de la fenêtre de document,
page 56.
A droite du menu contextuel Taille de fenêtre figurent 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. Pour plus d’informations,
consultez la section Vérification des préférences de durée et de la taille de téléchargement,
page 412.
48
Chapitre 1 : Exploration de l'espace de travail
Rubriques connexes
■
Définition des préférences de la barre d'état, page 57
Barre Insérer
Les boutons qui composent la barre Insérer permettent de créer et d'insérer des objets, tels que
des tableaux, des calques et des images. Lorsque vous placez le curseur de la souris sur un
bouton, une info-bulle indiquant le nom de ce bouton apparaît.
Les boutons sont organisés en plusieurs catégories, sur le côté gauche de la barre Insérer.
D'autres catégories s'affichent lorsque le document sélectionné contient du code serveur, tel
que des documents ASP ou CFML. Au démarrage de Dreamweaver, la dernière catégorie
utilisée s'ouvre.
REMARQUE
Si vous préférez afficher les catégories sous forme d'onglets en haut de la barre Insérer,
vous pouvez changer la présentation de cette barre (voir Définition des préférences de
police pour l'affichage Dreamweaver, page 81).
Certaines catégories disposent de boutons ouvrant des menus contextuels. Lorsque vous
sélectionnez une option dans l'un de ces menus contextuels, 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 contextuels, l'action attribuée par défaut au bouton change.
La barre Insérer est organisée en différentes catégories, comme suit :
permet de créer et d'insérer les objets les plus couramment utilisés,
comme les images et les tableaux.
La catégorie Commun
La catégorie Mise en forme permet d'insérer des tableaux, des balises div, des couches et des
cadres. Vous pouvez également choisir parmi trois types de tableaux : Standard (par défaut),
Tableaux étendus et Mise en forme. Si le mode Mise en forme est sélectionné, vous pouvez
utiliser les outils de mise en forme de Dreamweaver : Dessiner la cellule de Mise en forme et
Dessiner le tableau de Mise en forme.
La catégorie Formulaires contient
des boutons permettant de créer des formulaires et d'y
insérer des éléments.
La catégorie Texte insère diverses balises de mise en forme de texte et de liste, telles que b, em,
p, h1 et ul.
A propos de l'espace de travail de Dreamweaver
49
La catégorie HTML insère des balises HTML pour les règles horizontales, le contenu de l'entête, les tableaux, les cadres et les scripts.
sont disponibles uniquement pour les pages utilisant un
langage serveur spécifique comme ASP, ASP.NET, CFML Basic, CFML Flow, CFML
Advanced, JSP et PHP. Ces catégories proposent des objets de type code serveur que vous
pouvez insérer en mode Code.
Les catégories de code serveur
insère des éléments dynamiques, tels que les jeux
d'enregistrements, les régions répétées et les formulaires d'insertion d'enregistrements et de
mise à jour.
La catégorie Application
La catégorie éléments Flash
insère des éléments Macromedia Flash.
La catégorie Favoris permet
de regrouper et d'organiser, dans un espace commun, les
boutons de la barre Insérer que vous utilisez le plus fréquemment.
Vous pouvez modifier les objets de la barre Insérer ou créer vos propres objets (voir
« Personnalisation de Dreamweaver » sur le centre de support Macromedia, à l'adresse
www.macromedia.com/go/customizing_dreamweaver_fr).
Rubriques connexes
Utilisation de la barre Insérer, page 59
■
50
Chapitre 1 : Exploration de l'espace de travail
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 de
codage est visible uniquement en mode Code et apparaît verticalement sur le côté gauche de la
fenêtre de document.
Vous ne pouvez pas détacher ni déplacer la barre d'outils de codage mais vous pouvez la
masquer. Pour plus d'informations, voir Affichage des barres d'outils, page 58.
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.
Rubriques connexes
■
Insertion rapide de code avec la barre d'outils de codage, page 631
■
Affichage des barres d'outils, page 58
A propos de l'espace de travail de Dreamweaver
51
La barre d'outils de 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 Écran
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.
permet d'activer ou de désactiver les styles CSS. Ce
bouton fonctionne indépendamment des autres boutons de média.
Intervertir l’affichage des Styles CSS
Rubriques connexes
■
Affichage des barres d'outils, page 58
52
Chapitre 1 : Exploration de l'espace de travail
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
:
Recherche permet de rechercher des balises, des attributs ou une portion de texte spécifique
dans les balises. Pour effectuer une recherche de code, voir Recherche et remplacement de balises
et d'attributs, page 642.
permet de rechercher les erreurs de code ou de syntaxe. Pour effectuer une
validation de code, voir Validation de balises, page 653.
Validation
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. Pour effectuer une vérification du navigateur cible, voir Vérification de la compatibilité
du navigateur, page 649.
Vérification du navigateur cible
permet de rechercher et de corriger les liens brisés, externes et orphelins.
Pour effectuer une vérification des liens, voir Recherche de liens rompus, externes et orphelins,
page 503.
Vérificateur de lien
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. Pour exécuter
des rapports de site, voir Test de votre site, page 173.
permet d'avoir une vue d'ensemble des transferts de fichiers en FTP. Pour
consulter le journal FTP, voir Acquisition de fichiers depuis un serveur distant, page 157 ou
Placement de fichiers sur un site distant, page 159.
Journal FTP
permet d'obtenir les informations nécessaires au débogage d'une
application ColdFusion. Pour consulter les informations de débogage, voir Utilisation du
débogueur ColdFusion (Windows uniquement), page 655.
Débogage du serveur
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 MacOS X.
A propos de l'espace de travail de Dreamweaver
53
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 à
votre intention. Ces fichiers sont enregistrés dans un dossier vous appartenant.
Par exemple, sous Windows XP, ils sont situés dans le répertoire C:\Documents and
Settings\nom_utilisateur\Application Data\Macromedia\Dreamweaver 8\Configuration (qui
peut se trouver dans un dossier caché).
Sous Mac OS X, ils sont situés dans votre dossier personnel, dans Utilisateurs/
nom_utilisateur/Bibliothèque/Application Support/Macromedia/Dreamweaver 8/
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.
Rubriques connexes
■
Dreamweaver personnalisation, notions de base
Utilisation de la fenêtre de document
La fenêtre de document affiche le document actif. Vous pouvez afficher un document en
mode Création, en mode Code ou en mode Code et Création. La barre d'état de la fenêtre de
document affiche des informations sur le document actuel.
Rubriques connexes
Fenêtre de document, page 45
■
■
Barre d'état, page 48
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
Création ou en mode Code et création.
Pour passer d'un mode à l'autre dans la fenêtre de document, procédez de
l'une des façons suivantes :
■
Utilisez le menu Affichage :
■
54
Choisissez Affichage > Code.
Chapitre 1 : Exploration de l'espace de travail
■
■
Choisissez Affichage > Création.
■
Choisissez Affichage > Code et création.
Utilisez la barre d'outils de document :
■
Cliquez sur le bouton Afficher le mode Code.
■
Cliquez sur le bouton Afficher les modes Code et Création.
■
Cliquez sur le bouton Afficher le mode Création.
Pour basculer entre les modes Code et Création :
■
Appuyez sur les touches Ctrl+tilde (~) (Windows) ou Commande+guillemet simple
d'ouverture (‘) (Macintosh).
REMARQUE
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.
Rubriques connexes
■
Fenêtre de document, page 45
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.
Pour les afficher en cascade, procédez de la façon suivante :
■
Choisissez Fenêtre > Cascade.
Pour afficher une mosaïque de documents, procédez de l'une des manières
suivantes :
■
Sous Windows, sélectionnez Fenêtre > Mosaïque horizontale ou Fenêtre > Mosaïque
verticale.
■
Sur le Macintosh, sélectionnez Fenêtre > Mosaïque.
Utilisation de la fenêtre de document
55
Rubriques connexes
■
Choix de la présentation de l'espace de travail (sous Windows uniquement), page 77
■
Affichage de documents à onglet (Macintosh), page 78
■
Enregistrement de présentations de l'espace de travail personnalisées, page 79
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.
Pour redimensionner la fenêtre de document selon une taille prédéterminée :
■
Choisissez l’une des tailles affichées dans le menu contextuel Taille de fenêtre qui se trouve
dans la barre d’état de la fenêtre de document.
REMARQUE
Sous Windows, vous pouvez agrandir la fenêtre de document pour qu'elle occupe
tout l'espace de la zone de document de la fenêtre intégrée. Vous ne pouvez pas
redimensionner une fenêtre de document agrandie.
La taille de la fenêtre correspond aux dimensions internes de la fenêtre de navigateur, bordures
exclues ; la résolution de l'écran est indiquée entre parenthèses. Optez, par exemple, pour le
format « 536 x 196 (640 x 480, valeur par défaut) » si les visiteurs de votre site utilisent
Microsoft Internet Explorer ou Netscape Navigator par défaut sur un moniteur de 640 x 480.
C ON S E I L
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.
Pour modifier les valeurs figurant dans le menu contextuel Taille de fenêtre :
1.
56
Cliquez sur Modifier les tailles dans le menu contextuel Taille de fenêtre.
Chapitre 1 : Exploration de l'espace de travail
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 de texte Description pour saisir un texte décrivant la taille spécifique.
4.
Cliquez sur OK pour enregistrer la modification et revenir à la fenêtre de document.
Pour ajouter 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.
5.
Cliquez sur OK pour enregistrer la modification et revenir à la fenêtre de document.
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 des préférences de la barre d'état
Vous pouvez définir les préférences de la barre d'état dans la boîte de dialogue Préférences.
Pour définir les préférences de la barre d'état :
1.
Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
La boîte de dialogue Préférences s'affiche.
2.
Sélectionnez la catégorie Barre d'état dans la liste de gauche.
3.
Définissez les options de préférence.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
4.
Cliquez sur OK.
Rubriques connexes
■
Barre d'état, page 48
Utilisation de la fenêtre de document
57
Utilisation des barres d'outils, des
inspecteurs et des menus contextuels
Dreamweaver comporte plusieurs outils permettant d'effectuer des modifications rapides lors
de la création ou de la modification d'un document.
Les barres d'outils du document, standard et de codage permettent de modifier et de
manipuler le document actuel. La barre Insérer comporte des boutons permettant de créer et
d'insérer des objets tels que des tableaux, des calques et des images. En outre, l'inspecteur
Propriétés permet de modifier les propriétés de ces objets.
REMARQUE
Vous pouvez également utiliser l'inspecteur de balises pour afficher et modifier les
propriétés (voir Modification d'attributs dans l'inspecteur de balises, page 658).
L'inspecteur de balises permet d'afficher et de modifier chaque attribut associé à une
balise, alors que l'inspecteur Propriétés n'affiche que les attributs les plus fréquents.
Les menus contextuels représentent une alternative aux fonctions de création et de
modification d'objets de la barre Insérer et de l'inspecteur Propriétés.
Affichage des barres d'outils
Utilisez les barres d'outils document et standard pour effectuer des opérations de modification
standard liées au document ; utilisez la barre d'outils codage pour insérer du code
rapidement ; et utilisez la barre d'outils rendu de style pour afficher votre page comme elle
apparaîtrait dans différents types de média. Vous pouvez afficher ou masquer ces barres selon
qu'elles vous sont utiles ou non.
Pour afficher ou masquer une barre d'outils, procédez de l'une des façons
suivantes :
■
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
58
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.
Chapitre 1 : Exploration de l'espace de travail
Rubriques connexes
■
Barre d'outils de document, page 46
■
Barre d'outils standard, page 47
■
La barre d'outils de codage, page 51
■
La barre d'outils de rendu de style, page 52
Utilisation de la barre Insérer
Les boutons qui composent la barre Insérer 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. Lorsque vous
placez le curseur de la souris sur un bouton, une info-bulle indiquant le nom de ce bouton
apparaît.
Rubriques connexes
■
Barre Insérer, page 49
Affichage de la barre Insérer et des catégories et menus
associés
Vous pouvez afficher, masquer, développer ou réduire la barre Insérer selon qu'elle vous est
utile ou non. De même, vous pouvez afficher ou masquer les différentes catégories de cette
barre. Certaines catégories de la barre Insérer comportent des boutons dont les menus
permettent d'exécuter des commandes courantes.
Si vous préférez afficher les catégories sous forme d'onglets en haut de la barre Insérer,
changez la présentation de la barre Insérer.
Pour masquer ou afficher la barre Insérer, procédez de l'une des façons
suivantes :
■
Choisissez Fenêtre > Insérer.
■
Cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfoncée
(Macintosh) dans la barre Insérer ou la barre d'outils standard, de document ou de
codage, puis choisissez Barre Insérer.
Utilisation des barres d'outils, des inspecteurs et des menus contextuels
59
Pour afficher les boutons d'une catégorie :
■
Cliquez sur la flèche du menu contextuel située près du nom de la catégorie, à l'extrémité
gauche de la barre Insérer, puis choisissez une autre catégorie dans le menu contextuel.
Pour afficher le menu contextuel d'un bouton :
■
Cliquez sur le bouton fléché pointant vers le bas situé près de l'icône du bouton.
Pour afficher les catégories de la barre Insérer sous forme d'onglets :
■
Cliquez sur la flèche du menu contextuel située près du nom de la catégorie, à l'extrémité
gauche de la barre Insérer, puis choisissez Afficher onglets.
La barre Insérer affiche les catégories sous forme d'onglets apparaissant le long de la barre
Insérer, en haut.
REMARQUE
Si vous le souhaitez, vous pouvez cliquer sur le titre de la barre Insérer pour la rouvrir.
Pour afficher les catégories de la barre Insérer sous forme de menus :
■
Cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfoncée
Macintosh) dans la barre Insérer, puis choisissez Afficher en tant que menu.
La barre Insérer affiche les catégories sous forme de menus plutôt que d'onglets.
60
Chapitre 1 : Exploration de l'espace de travail
Rubriques connexes
■
Personnalisation et utilisation de la catégorie Favoris dans la barre Insérer, page 62
Utilisation de la barre Insérer pour insérer des objets
La barre Insérer représente un moyen pratique de créer et d'insérer des objets.
Pour insérer un objet :
1.
Sélectionnez une catégorie dans la partie gauche de la barre Insérer.
2.
Procédez de l'une des manières 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 (voir Modification de balises avec des éditeurs de balises, page 635)
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. Pour afficher des icônes en mode
Création indiquant l'emplacement de ces objets invisibles, voir Affichage et masquage
des éléments invisibles, page 396.
Pour contourner cette boîte de dialogue et insérer 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.
R E M AR QU E
Cette procédure ne contourne pas toutes les boîtes de dialogue d'insertion d'objet.
De nombreux objets, y compris les barres de navigation, calques, boutons Flash et
jeux de cadres, n'insèrent pas d'espaces réservés ni d'objets avec des valeurs par
défaut.
Utilisation des barres d'outils, des inspecteurs et des menus contextuels
61
Pour modifier les préférences de la barre Insérer :
1.
Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
La boîte de dialogue Préférences contenant la catégorie de préférences générales s'affiche.
2.
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.
C O N S E IL
3.
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é.
Cliquez sur OK.
Rubriques connexes
■
Affichage de la barre Insérer et des catégories et menus associés, page 59
Personnalisation et utilisation de la catégorie Favoris dans la
barre Insérer
La catégorie Favoris de la barre Insérer permet de grouper et d'organiser les boutons
fréquemment utilisés de la barre Insérer. Vous pouvez ajouter, gérer ou supprimer des
boutons de la catégorie Favoris.
Pour ajouter, supprimer ou gérer les boutons de la catégorie Favoris :
1.
Sélectionnez l'une des catégories de la barre Insérer.
2.
Cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfoncée
(Macintosh) dans la zone où apparaissent les boutons (ne cliquez pas sur le nom de la
catégorie), puis sélectionnez Personnaliser les objets favoris.
La boîte de dialogue Personnaliser les objets favoris s'affiche.
3.
Apportez les modifications de votre choix.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
4.
Cliquez sur OK.
Les modifications que vous avez effectuées sont appliquées à la catégorie Favoris.
C O NS E I L
62
Si la catégorie Favoris n'est pas la catégorie active, sélectionnez-la afin de voir les
modifications apportées.
Chapitre 1 : Exploration de l'espace de travail
Pour insérer des objets à l'aide des boutons de la catégorie Favoris :
■
Sélectionnez la catégorie Favoris dans la partie gauche de la barre Insérer, puis cliquez sur
le bouton correspondant à un objet Favori que vous avez ajouté.
R E M A R QU E
La catégorie Favoris ne contient des boutons qu'une fois que vous l'avez
personnalisée.
Rubriques connexes
■
Affichage de la barre Insérer et des catégories et menus associés, page 59
■
Utilisation de la barre Insérer pour insérer des objets, page 61
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é.
REMARQUE
Utilisez l'inspecteur de balises pour afficher et modifier les attributs associés à des
propriétés de balises (voir Modification d'attributs dans l'inspecteur de balises, page 658).
C ON S E I L
Par défaut, l'inspecteur Propriétés se trouve au bas de l'espace de travail, mais vous
pouvez l'ancrer en haut de l'espace de travail si vous le souhaitez. Vous pouvez aussi le
laisser flotter dans l'espace de travail. Pour plus d'informations sur le déplacement de
l'inspecteur Propriétés, voir Ancrage et annulation d'ancrage de panneaux et de groupes
de panneaux, page 66.
Pour afficher ou masquer l'inspecteur Propriétés :
■
Choisissez Fenêtre > Propriétés.
Pour développer ou réduire l'inspecteur Propriétés :
■
Cliquez sur la flèche d'agrandissement dans l'angle inférieur droit de l'inspecteur
Propriétés.
Utilisation des barres d'outils, des inspecteurs et des menus contextuels
63
Pour afficher les propriétés d'un élément de page :
■
Sélectionnez l'élément de la page dans la fenêtre de document.
REMARQUE
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.
Pour modifier les propriétés d'un élément de page :
1.
Sélectionnez l'élément de la page dans la fenêtre de document.
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.
La plupart des changements apportés à une propriété sont immédiatement appliqués dans
la fenêtre de document.
3.
Si les changements ne s'appliquent pas immédiatement, effectuez l'une des actions
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
Dreamweaver comporte beaucoup de menus contextuels, qui 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.
Pour utiliser un menu contextuel :
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.
Le menu contextuel associé à l'objet ou à la fenêtre sélectionné(e) s'affiche.
64
Chapitre 1 : Exploration de l'espace de travail
2.
Choisissez une commande dans le menu contextuel.
Utilisation des panneaux et des groupes
de panneaux
Dans Dreamweaver, les panneaux sont liés entre eux pour former dans des groupes de
panneaux. Un panneau sélectionné dans un groupe de panneaux apparaît comme un onglet.
Vous pouvez développer ou réduire les groupes de panneaux, les ancrer ou les détacher des
autres groupes.
Vous pouvez également les ancrer dans la fenêtre de l'application intégrée (Windows
uniquement). Cela vous permet d’accéder aisément aux panneaux nécessaires sans encombrer
votre espace de travail.
R E MA R Q U E
Lorsqu'un groupe de panneaux est flottant (détaché), une étroite barre vide apparaît audessus du groupe. Dans cette documentation, le terme « barre de titre du groupe de
panneaux » fait référence à la zone où s'affiche le nom du groupe de panneaux, plutôt
qu'à cette étroite barre vide.
Affichage des panneaux et des groupes de panneaux
Vous pouvez afficher ou masquer les panneaux et groupes de panneaux dans l'espace de travail
selon qu'ils vous sont utiles ou non.
Utilisation des panneaux et des groupes de panneaux
65
Pour développer ou réduire un groupe de panneaux, procédez de l'une des
manières suivantes :
■
Cliquez sur la flèche d'agrandissement dans le coin gauche de la barre de titre du groupe
de panneaux.
■
Cliquez sur la barre de titre du groupe de panneaux.
Pour fermer un groupe de panneaux afin qu'il ne soit plus visible à l'écran :
■
Choisissez Fermer le groupe de panneaux dans le menu Options de la barre de titre du
groupe de panneaux.
Le groupe de panneaux disparaît de l'écran.
Pour ouvrir un groupe de panneaux ou un panneau qui n'est pas visible à
l'écran :
■
Choisissez le menu Fenêtre, puis sélectionnez un nom de panneau.
Une coche en regard d'un élément dans le menu Fenêtre indique que l'élément est ouvert
(il est possible qu'il n'apparaisse pas à l'écran s'il est masqué derrière d'autres fenêtres).
C O N S E IL
Si vous n'arrivez pas à localiser un panneau, un inspecteur ou une fenêtre indiqués
comme ouverts, choisissez Fenêtre > Réorganiser Panneaux pour présenter tous les
panneaux ouverts à l'écran.
Pour sélectionner un panneau à l'intérieur d'un groupe de panneaux agrandi :
■
Cliquez sur le nom du panneau.
Pour afficher le menu d'options d'un groupe de panneaux, s'il ne l'est pas déjà :
■
Cliquez sur le nom du groupe de panneaux ou sur sa flèche d'agrandissement pour
développer le groupe de panneaux.
Le menu Options est visible uniquement lorsque le groupe de panneaux est développé.
CONSEIL
Plusieurs options sont disponibles dans le menu contextuel du groupe de panneaux
même lorsque celui-ci est réduit ; cliquez avec le bouton droit de la souris (Windows)
ou en maintenant la touche Ctrl enfoncée (Macintosh), sur la barre de titre du groupe
de panneaux pour afficher le menu contextuel.
Ancrage et annulation d'ancrage de panneaux et de
groupes de panneaux
Vous pouvez déplacer les panneaux et groupes de panneaux et les réorganiser afin qu'ils
flottent ou qu'ils soient ancrés dans l'espace de travail.
66
Chapitre 1 : Exploration de l'espace de travail
La plupart des panneaux ne peuvent être ancrés que sur le côté gauche ou droit de la fenêtre
de document dans l'espace de travail intégré, tandis que d'autres (l'inspecteur Propriétés et la
barre Insérer, par exemple) ne peuvent être ancrés qu'en haut ou en bas dans la fenêtre
intégrée.
Pour détacher un groupe de panneaux :
■
Faites glisser le groupe de panneaux en le saisissant par sa poignée d'ancrage (sur le côté
gauche de la barre de titre) jusqu'à ce que son contour indique qu'il n'est plus ancré.
Pour ancrer un groupe de panneaux à d'autres groupes de panneaux (espace
de travail flottant) ou à la fenêtre intégrée (sous Windows uniquement) :
■
Faites glisser le groupe de panneaux en le saisissant par sa poignée d'ancrage jusqu'à ce que
son contour indique qu'il est ancré.
Pour détacher un panneau d'un groupe de panneaux :
■
Dans le menu Options de la barre de titre du groupe de panneaux, sélectionnez Associer à
> Nouveau groupe de panneaux (le nom de la commande Associer à peut varier selon le
nom du panneau actif ).
Le panneau s'affiche dans son propre groupe de panneaux.
Pour ancrer un panneau à un groupe de panneaux :
■
Sélectionnez le nom d'un groupe de panneaux dans le sous-menu Associer à du menu
Options du groupe de panneaux (le nom de la commande Associer à peut varier selon le
nom du panneau actif ).
Pour faire glisser un groupe de panneaux flottant (détaché) sans l'ancrer :
■
Faites glisser le groupe de panneaux par la barre située au-dessus de sa barre de titre. Le
groupe de panneaux se s'ancre pas tant que vous ne le faites pas glisser par sa poignée
d'ancrage.
Redimensionnement et changement de nom des
groupes de panneaux
Vous pouvez modifier la taille et le nom des groupes de panneaux selon vos besoins.
Utilisation des panneaux et des groupes de panneaux
67
Pour modifier la taille des groupes de panneaux :
■
Panneaux flottants : afin de redimensionner l'ensemble des groupes de panneaux, faites-les
glisser tout comme vous le faites pour redimensionner une fenêtre quelconque de votre
système d'exploitation.
Par exemple, en faisant glisser la zone de redimensionnement dans le coin inférieur droit
de l'ensemble de groupes de panneaux.
■
Panneaux ancrés : faites glisser la barre de séparation entre les panneaux et la fenêtre de
document.
Pour développer un groupe de panneaux, procédez de l'une des manières
suivantes :
■
Choisissez Agrandir le groupe de panneaux dans le menu Options de la barre de titre du
groupe de panneaux.
■
Double-cliquez à n'importe quel endroit dans la barre de titre du groupe de panneaux.
Le groupe de panneaux s'affiche verticalement et remplit tout l'espace vertical disponible.
Pour renommer un groupe de panneaux :
1.
Dans le menu Options de la barre de titre du groupe de panneaux, choisissez Renommer
le groupe de panneaux.
2.
Entrez le nouveau nom et cliquez sur OK.
Enregistrement de groupes de panneaux
Dreamweaver vous permet d'enregistrer et de restaurer différents groupes de panneaux de
façon à personnaliser votre espace de travail pour différentes activités. Lorsque vous
enregistrez une présentation d'espace de travail, Dreamweaver se souvient des panneaux dans
la présentation spécifiée ainsi que d'autres attributs (positions et tailles des panneaux, leurs
états réduits ou développés, la position et la taille de la fenêtre d'application et la position et la
taille de la fenêtre de document, par exemple).
Pour plus d'informations, voir Enregistrement de présentations de l'espace de travail
personnalisées, page 79.
Définition des préférences des panneaux
Vous pouvez définir les préférences pour indiquer les panneaux et les inspecteurs que vous
voulez toujours afficher au premier plan dans la fenêtre de document, et ceux qui peuvent être
masqués par la fenêtre de document.
68
Chapitre 1 : Exploration de l'espace de travail
Pour définir les préférences des panneaux :
1.
Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
La boîte de dialogue Préférences s'affiche.
2.
Sélectionnez la catégorie Panneaux dans la liste de gauche.
3.
Sélectionnez les options.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
4.
Cliquez sur OK.
Utilisation des fonctions d'accessibilité de
Dreamweaver
Dreamweaver inclut des fonctions qui le rendent accessible aux utilisateurs souffrant d'un
handicap. Il prend notamment en charge les lecteurs d'écran, les fonctions d'accessibilité du
système d'exploitation et la navigation avec le clavier.
Rubriques connexes
■
Dreamweaver et l'accessibilité, page 33
Utilisation de lecteurs d'écran avec Dreamweaver
Un lecteur d'écran récite le texte qui s'affiche sur l'écran de l'ordinateur. Il lit aussi les
informations non textuelles, tels que les étiquettes de boutons ou les descriptions d'images
dans l'application, fournis dans les balises ou les attributs d'accessibilité lors de la création.
En tant qu'utilisateur de Dreamweaver, vous pouvez utiliser un lecteur d'écran pour vous
assister dans la création de vos pages Web. Le lecteur d'écran commence sa lecture par le coin
supérieur gauche de la fenêtre de document.
Dreamweaver prend en charge les lecteurs d'écran JAWS pour Windows de Freedom
Scientific (www.freedomscientific.com) et Window Eyes de GW Micro
(www.gwmicro.com).
Rubriques connexes
■
Utilisation du clavier pour naviguer dans Dreamweaver, page 70
Utilisation des fonctions d'accessibilité de Dreamweaver
69
Prise en charge des fonctions d'accessibilité du
système d'exploitation
Dreamweaver prend en charge les fonctionnalités d'accessibilité des systèmes d'exploitation
Windows et Macintosh. Par exemple, sur le Macintosh définissez les préférences visuelles dans
la boîte de dialogue Préférences d'accès universelles (Apple > Préférences système). Les
paramètres sélectionnés sont alors repris par l'espace de travail de Dreamweaver.
Dreamweaver prend également en charge le paramètre de contraste élevé du système
d'exploitation Windows. Vous pouvez activer cette option à l'aide du Panneau de
configuration de Windows. Lorsque le contraste élevé est activé, cela affecte Dreamweaver de
la façon suivante :
■
Les boîtes de dialogue et les panneaux utilisent des paramètres de couleurs système.
Par exemple, si vous définissez les couleurs sur Blanc sur Noir, les boîtes de dialogue et les
panneaux Dreamweaver utilisent du blanc comme couleur de premier plan et du noir en
arrière-plan.
■
La coloration de la syntaxe en mode Code est désactivée.
Le mode Code utilise les couleurs système des fenêtres et du texte de fenêtres et ignore les
paramètres de couleurs définis dans Préférences. Par exemple, si vous avez défini les
couleurs système sur Blanc sur Noir et que vous changez les couleurs de texte dans
Préférences > Coloration du code, Dreamweaver ignore les couleurs définies dans
Préférences et affiche le texte de code avec du blanc comme couleur de premier plan et du
noir en arrière-plan.
■
Le mode Création utilise les couleurs d'arrière-plan et de texte que vous avez défini dans
Modifier > Propriétés de la page pour que les pages que vous créez aient un rendu des
couleurs similaire à celui d'un navigateur.
Rubriques connexes
■
Utilisation de lecteurs d'écran avec Dreamweaver, page 69
Utilisation du clavier pour naviguer dans
Dreamweaver
Vous pouvez utiliser le clavier pour parcourir les panneaux, les inspecteurs, les boîtes de
dialogue, les cadres et les tableaux Dreamweaver sans utiliser de souris.
Rubriques connexes
■
Utilisation de lecteurs d'écran avec Dreamweaver, page 69
70
Chapitre 1 : Exploration de l'espace de travail
■
Prise en charge des fonctions d'accessibilité du système d'exploitation, page 70
Navigation dans les panneaux
Vous pouvez utiliser le clavier pour naviguer dans les panneaux.
REMARQUE
L'utilisation de la touche de tabulation et des touches fléchées n'est prise en charge que
sous Windows.
Pour naviguer dans les panneaux :
1.
Dans la fenêtre de document, appuyez sur Ctrl+Alt+Tab pour activer un panneau.
Un contour blanc autour de la barre de titre du panneau indique que le panneau est actif.
Le lecteur d'écran lit la barre de titre du panneau actif.
2.
Appuyez sur Ctrl+Alt+Tab de nouveau pour activer le panneau suivant.
Continuez jusqu'à ce que le panneau dans lequel vous voulez travailler soit actif.
3.
Appuyez sur Ctrl+Alt+Maj+Tab pour activer le panneau précédent, si nécessaire.
4.
Si le panneau dans lequel vous voulez travailler n'est pas ouvert, utilisez les raccourcis
clavier répertoriés dans le menu Fenêtre pour afficher le panneau approprié, puis appuyez
sur Ctrl+Alt+Tab pour l'activer.
Si le panneau dans lequel vous voulez travailler est ouvert, mais affiché sous sa forme
réduite, activez la barre de titre du panneau et appuyez sur la barre d'espace. Appuyez sur
la barre d'espace de nouveau pour réduire le panneau.
5.
Appuyez sur la touche de tabulation pour passer d'une option à une autre dans le panneau.
Un contour en pointillé indique que l'option est active.
6.
Utilisez les touches fléchées de façon appropriée :
■
Si une option comporte des choix, utilisez les touches fléchées pour faire défiler ces
choix, puis appuyez sur la barre d'espace pour valider la sélection.
■
Si le groupe de panneaux comporte des onglets pour ouvrir d'autres panneaux, activez
l'onglet ouvert puis utilisez la touche fléchée gauche ou droite pour ouvrir un autre
onglet. Après avoir ouvert un nouvel onglet, appuyez sur la touche de tabulation pour
faire défiler les options de ce panneau.
Rubriques connexes
Navigation dans les boîtes de dialogue, page 72
■
■
Navigation dans les cadres, page 73
Utilisation des fonctions d'accessibilité de Dreamweaver
71
■
Navigation dans les tableaux, page 74
Navigation dans l'inspecteur Propriétés
Vous pouvez utiliser le clavier pour naviguer dans l'inspecteur Propriétés et effectuer des
modifications sur votre document.
REMARQUE
L'utilisation des touches fléchées n'est prise en charge que sous Windows.
Pour naviguer dans l'inspecteur Propriétés :
1.
Appuyez sur Ctrl+F3 (Windows) ou Commande+F3 (Macintosh) pour afficher
l'inspecteur Propriétés, s'il n'est pas visible.
2.
(Windows) Appuyez sur Ctrl+Alt+Tab jusqu'à ce que l'inspecteur Propriétés soit actif.
3.
Appuyez sur la touche de tabulation pour passer d'une option de l'inspecteur Propriétés à
une autre.
4.
(Windows) Utilisez les touches fléchées pour parcourir les différentes options.
5.
Appuyez sur Ctrl+Tab (Windows) ou Option+Tab (Macintosh) pour ouvrir et fermer la
section développée de l'inspecteur Propriétés ou appuyez sur la barre d'espace lorsque la
flèche d'agrandissement en bas à droite est active.
Rubriques connexes
■
Navigation dans les panneaux, page 71
■
Navigation dans les cadres, page 73
■
Navigation dans les tableaux, page 74
Navigation dans les boîtes de dialogue
Vous pouvez utiliser le clavier pour naviguer dans les boîtes de dialogue.
R E MA R Q U E
L'utilisation des touches fléchées n'est prise en charge que sous Windows.
Pour naviguer dans une boîte de dialogue :
1.
72
Appuyez sur la touche de tabulation pour passer d'une option à une autre dans la boîte de
dialogue.
Chapitre 1 : Exploration de l'espace de travail
2.
(Windows) Utilisez les touches fléchées pour faire défiler les choix d'une option.
Par exemple, si une option dispose d'un menu contextuel, activez cette option puis utilisez
la touche fléchée vers le bas pour faire défiler les choix.
3.
Si la boîte de dialogue comporte une liste Catégorie, appuyez sur Ctrl+Tab (Windows) ou
Option+Tab (Macintosh) pour activer la liste Catégorie puis utilisez les touches fléchées
pour vous déplacer vers le haut ou vers le bas dans la liste.
4.
Appuyez de nouveau sur Ctrl+Tab (Windows) ou Option+Tab (Macintosh) pour afficher
les options d'une catégorie.
5.
Appuyez sur Entrée (Windows) ou sur Retour (Macintosh) pour quitter la boîte de
dialogue.
Rubriques connexes
■
Navigation dans les panneaux, page 71
■
Navigation dans l'inspecteur Propriétés, page 72
■
Navigation dans les tableaux, page 74
Navigation dans les cadres
Si votre document contient des cadres, vous pouvez utiliser les touches fléchées pour activer
un cadre.
REMARQUE
L'utilisation des touches fléchées n'est prise en charge que sous Windows.
Pour sélectionner un cadre :
1.
Placez le point d'insertion dans la fenêtre de document.
2.
Appuyez sur Alt+Flèche vers le haut pour sélectionner le cadre actif.
Une ligne en pointillé indique quel cadre est actif.
3.
Continuez d'appuyer sur Alt+Flèche vers le haut pour activer le jeu de cadres, puis les jeux
de cadres parents, s'il existe des jeux de cadres imbriqués.
4.
Appuyez sur Alt+Flèche vers le bas pour activer un jeu de cadres enfant ou un seul cadre
dans un jeu de cadres.
5.
Lorsqu'un cadre est actif, appuyez sur Alt+Flèche gauche ou droite pour vous déplacer entre
les cadres.
Utilisation des fonctions d'accessibilité de Dreamweaver
73
6.
Appuyez sur Alt+Flèche vers le bas pour placer le point d'insertion dans la fenêtre de
document.
Rubriques connexes
■
Navigation dans les panneaux, page 71
■
Navigation dans l'inspecteur Propriétés, page 72
■
Navigation dans les boîtes de dialogue, page 72
Navigation dans les tableaux
Après avoir sélectionné un tableau, vous pouvez utiliser le clavier pour le parcourir.
Pour naviguer dans un tableau :
1.
Utilisez les touches fléchées ou appuyez sur la touche de tabulation pour vous déplacer vers
d'autres cellules dans un tableau.
C ON S E I L
Si vous appuyez sur la touche de tabulation lorsque vous être dans la cellule la plus à
droite, vous ajoutez une ligne au tableau.
2.
Pour sélectionner une cellule, appuyez sur Ctrl+A ou +A (Windows) ou Command+A
(Macintosh) lorsque le point d'insertion est dans la cellule.
3.
Pour sélectionner un tableau, appuyez deux fois sur Ctrl+A (Windows) ou Commande+A
(Macintosh) si le point d'insertion est dans une cellule ou une fois si une cellule est
sélectionnée.
4.
Pour quitter le tableau, appuyez trois fois sur Ctrl+A (Windows) ou Commande+A
(Macintosh) lorsque le point d'insertion est dans une cellule, deux fois si la cellule est
sélectionnée ou une fois si le tableau est sélectionné, puis appuyez sur les touches Haut,
Gauche ou Droite.
Rubriques connexes
■
Navigation dans les panneaux, page 71
■
Navigation dans l'inspecteur Propriétés, page 72
■
Navigation dans les boîtes de dialogue, page 72
■
Navigation dans les cadres, page 73
74
Chapitre 1 : Exploration de l'espace de travail
Optimisation de l'espace de travail pour la
conception de pages accessibles
Lorsque vous créez des pages accessibles, vous devez associer des informations aux objets
présents sur les pages, telles que des étiquettes et des descriptions, pour rendre votre contenu
accessible à tous les utilisateurs.
Pour ce faire, activez la boîte de dialogue Accessibilité de chaque objet, de façon à ce que
Dreamweaver vous demande d'entrer les informations d'accessibilité lorsque vous insérez des
objets. Vous pouvez activer une boîte de dialogue pour n'importe quel objet de la catégorie
Accessibilité dans les préférences.
Pour activer les boîtes de dialogue Accessibilité :
1.
Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
La boîte de dialogue Préférences s'affiche.
2.
Sélectionnez la catégorie Accessibilité dans la liste de gauche.
La boîte de dialogue Préférences affiche les options d'accessibilité.
3.
Sélectionnez les objets pour lesquels vous souhaitez activer les boîtes de dialogue
Accessibilité.
Optimisation de l'espace de travail pour la conception de pages accessibles
75
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
REMARQUE
4.
Les attributs d'accessibilité apparaissent automatiquement dans la boîte de dialogue
Tableau lors de l'insertion d'un nouveau tableau.
Cliquez sur OK.
Pour chaque objet que vous sélectionnez, une boîte de dialogue Accessibilité vous invitera à
entrer les balises et les attributs d'accessibilité lorsque vous insérerez cet objet dans un
document.
Rubriques connexes
■
Dreamweaver et l'accessibilité, page 33
■
Insertion d'une image, page 460
■
Validation des données de formulaire HTML, page 915
■
Création de cadres et de jeux de cadres, page 317
■
Insertion et modification d'objets multimédia, page 530
■
Insertion d'un tableau et ajout de contenu, page 264
Utilisation de guides visuels dans
Dreamweaver
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 (voir Redimensionnement de la
fenêtre de document, page 56).
■
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 Macromedia
Fireworks (voir Utilisation du tracé de l'image, page 258).
■
Utiliser des règles et des guides comme repère visuel pour le positionnement et le
redimensionnement précis des éléments de page (voir Utilisation des règles, des guides et de
la grille pour la mise en forme des pages, page 254).
■
Utilisez la grille afin d'effectuer un positionnement et un redimensionnement précis des
calques (voir Utilisation de la grille, page 257).
76
Chapitre 1 : Exploration de l'espace de travail
Si la fonction d'alignement automatique est activée, les calques 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.
Dreamweaver personnalisation, notions
de base
Vous pouvez personnaliser Dreamweaver en fonction de vos besoins, à l'aide de certaines
techniques élémentaires sans avoir à comprendre le code complexe ni à modifier aucun fichier
texte. Par exemple, vous pouvez modifier la présentation de l'espace de travail, afficher ou
masquer la page de démarrage, définir des préférences, créer des raccourcis clavier et ajouter
des extensions à Dreamweaver.
Pour plus d'informations sur la personnalisation de la présentation des panneaux dans l'espace
de travail, voir Utilisation des panneaux et des groupes de panneaux, page 65.
REMARQUE
Pour plus d'informations sur la personnalisation manuelle des fichiers de configuration,
voir « Personnalisation de Dreamweaver » sur le centre de support Macromedia, à
l'adresse www.macromedia.com/go/customizing_dreamweaver_fr.
Cette section ne décrit que les options de préférences les plus courantes. Pour plus
d'informations sur une option de préférence spécifique non décrite dans ce document, voir la
rubrique correspondante dans l'aide Utilisation de Dreamweaver.
Rubriques connexes
A propos de la personnalisation de Dreamweaver dans les systèmes multiutilisateurs
■
■
Extension de Dreamweaver
Choix de la présentation de l'espace de travail (sous
Windows uniquement)
Sous Windows, vous pouvez choisir entre les présentations Création et Codeur de l'espace de
travail. La première fois que vous démarrez Dreamweaver, une boîte de dialogue permet de
choisir la présentation de l'espace de travail. Vous pouvez changer d'espace de travail à tout
moment.
Dreamweaver personnalisation, notions de base
77
Pour choisir la présentation de l'espace de travail la première fois que vous
démarrez Dreamweaver :
1.
Sélectionnez l'une des présentations suivantes :
Designer : il s'agit d'un espace de travail intégré utilisant l'interface MDI (Multiple
Document Interface), dans laquelle toutes les fenêtres de document et tous les panneaux
sont rassemblés dans une grande fenêtre d'application, les groupes de panneaux étant
ancrés sur la droite.
Codeur : il s'agit du même espace de travail intégré, mais avec les groupes de panneaux
ancrés sur la gauche, dans une présentation similaire à celle utilisée par Macromedia
HomeSite et Macromedia ColdFusion Studio. Les fenêtres de document affichent par
défaut le mode Code.
REMARQUE
2.
Ces deux espaces de travail autorisent l'ancrage des groupes de panneaux à droite
ou à gauche.
Cliquez sur OK.
Pour changer la présentation de l'espace de travail après le choix initial :
■
Choisissez Fenêtre > Présentation de l'espace de travail, puis sélectionnez la présentation
voulue.
En supplément des présentations Création et Codeur, vous pouvez sélectionner Double
Affichage. Si vous disposez d'un écran secondaire, Double Affichage place tous les panneaux
sur l'écran secondaire et conserve la fenêtre de document sur l'écran principal.
Rubriques connexes
■
Présentation de l'espace de travail, page 42
■
Enregistrement de présentations de l'espace de travail personnalisées, page 79
■
Affichage en cascade ou en mosaïque des fenêtres de document, page 55
Affichage de documents à onglet (Macintosh)
Sur le Macintosh, Dreamweaver permet d'afficher plusieurs documents dans une seule fenêtre
et identifie ces documents à l'aide d'onglets. Dreamweaver permet également d'afficher un
espace de travail flottant où chaque document dispose de sa propre fenêtre.
78
Chapitre 1 : Exploration de l'espace de travail
Pour ouvrir un document à onglet dans une fenêtre séparée :
■
Cliquez du bouton droit de la souris ou effectuez un Ctrl-clic sur l'onglet et sélectionnez
Déplacer vers une nouvelle fenêtre dans le menu contextuel.
Pour regrouper plusieurs documents dans une fenêtre à onglets :
■
Choisissez Fenêtre > Combiner comme onglets.
Pour modifier le paramètre de document à onglet par défaut :
1.
Sélectionnez Dreamweaver > Préférences, puis sélectionnez la catégorie Général.
2.
Sélectionnez ou désélectionnez Open documents in tabs (Ouvrir les documents dans des
onglets) et cliquez sur OK.
REMARQUE
Dreamweaver ne modifie pas l'affichage des documents ouverts lorsque vous
modifiez les préférences. En revanche, les documents ouverts une fois que vous
avez sélectionné une nouvelle préférence s'affichent en fonction de cette dernière.
Rubriques connexes
■
Présentation de l'espace de travail, page 42
■
Affichage en cascade ou en mosaïque des fenêtres de document, page 55
Enregistrement de présentations de l'espace de
travail personnalisées
Dreamweaver vous permet d'enregistrer et de restaurer différents ensembles de panneaux de
façon à personnaliser votre espace de travail pour différentes activités. Lorsque vous
enregistrez une présentation d'espace de travail, Dreamweaver se souvient des panneaux dans
la présentation spécifiée ainsi que d'autres attributs, positions et tailles des panneaux, leurs
états réduits ou développés, la position et la taille de la fenêtre d'application.
Pour enregistrer une présentation d'espace de travail personnalisée :
1.
Disposez les panneaux en fonctions des besoins.
2.
Choisissez Fenêtre > Présentation de l'espace de travail > Save Current (Enregistrer la
présentation actuelle).
3.
Indiquez le nom de la présentation et cliquez sur OK.
Pour passer à une autre présentation d'espace de travail personnalisée :
■
Choisissez Fenêtre > Présentation de l'espace de travail puis sélectionnez votre
présentation personnalisée.
Dreamweaver personnalisation, notions de base
79
Pour renommer ou supprimer une présentation d'espace de travail
personnalisée :
1.
Choisissez Fenêtre > Présentation de l'espace de travail > Manage (Gérer).
2.
Sélectionnez une présentation et procédez de l'une des manières suivantes :
3.
■
Pour renommer une présentation, cliquez sur le bouton Renommer, entrez un
nouveau nom de présentation et cliquez sur OK.
■
Pour supprimer une présentation, cliquez sur le bouton Supprimer.
Cliquez sur OK.
Rubriques connexes
■
Utilisation des panneaux et des groupes de panneaux, page 65
■
Choix de la présentation de l'espace de travail (sous Windows uniquement), page 77
■
Affichage de documents à onglet (Macintosh), page 78
Affichage et masquage de la page de démarrage
La page de démarrage de Dreamweaver s'affiche lorsque vous démarrez Dreamweaver ou
lorsque aucun document n'est ouvert. Vous pouvez masquer ou afficher cette page selon vos
besoins. Lorsque la page de démarrage est masquée et qu'aucun document n'est ouvert, la
fenêtre de document est vide.
REMARQUE
Vous pouvez faire en sorte que Dreamweaver ouvre le dernier document utilisé à chaque
démarrage. Pour plus d'informations, voir Définition des préférences générales de
Dreamweaver, page 81.
Pour masquer la page de démarrage :
■
Activez la case Ne plus afficher cette fenêtre dans la page de démarrage.
Cette page ne s'affichera plus lors du démarrage de Dreamweaver ni après l'ouverture et la
fermeture d'un document.
Pour afficher la page de démarrage :
1.
Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
La boîte de dialogue Préférences contenant la catégorie de préférences générales s'affiche.
2.
Activez la case Afficher la page de démarrage.
Cette page s'affichera lors du démarrage de Dreamweaver ou après l'ouverture et la fermeture
d'un document.
80
Chapitre 1 : Exploration de l'espace de travail
Définition des préférences générales de
Dreamweaver
Les préférences générales commandent l'aspect général de Dreamweaver.
Pour modifier les préférences générales :
1.
Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
La boîte de dialogue Préférences contenant la catégorie de préférences générales s'affiche.
2.
Définissez les options de préférence.
Pour plus d'informations, cliquez sur Aide.
3.
Cliquez sur OK.
Définition des préférences de police pour l'affichage
Dreamweaver
Le codage d'un document détermine la façon dont ce document apparaît 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, sans affecter l'aspect qu'aura le document dans un navigateur.
Pour définir la police à utiliser dans Dreamweaver pour chaque type de
codage :
1.
Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
La boîte de dialogue Préférences s'affiche.
2.
Sélectionnez la catégorie Polices dans la liste de gauche.
3.
Sélectionnez le type de codage souhaité (par exemple, Occidental (Latin1) ou Japonais)
dans la liste Paramètres de la police, puis choisissez les polices à utiliser dans Dreamweaver
pour ce codage dans les menus de polices, sous la liste Paramètres de la police.
Pour plus d'informations, cliquez sur Aide.
R E MA R Q U E
4.
Les polices que vous choisissez n'ont aucune incidence sur l'aspect du document
dans le navigateur d'un visiteur.
Cliquez sur OK.
Rubriques connexes
■
Description de l'encodage de document, page 387
Dreamweaver personnalisation, notions de base
81
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.
REMARQUE
Des illustrations de raccourcis clavier relatifs à la configuration par défaut de
Dreamweaver sont disponibles sous forme de guide de référence rapide sur le site Web
de Macromedia à l'adresse suivante : www.macromedia.com/go/dw_documentation_fr.
Pour personnaliser les raccourcis clavier :
1.
Sélectionnez Edition > Raccourcis clavier (Windows) ou Dreamweaver > Raccourcis clavier
(Macintosh).
La boîte de dialogue Raccourcis clavier s'affiche.
Bouton Dupliquer le jeu
Bouton Supprimer le jeu
Bouton Exporter le jeu au format
HTML
Bouton Renommer le jeu
2.
Ajout, suppression ou modification de raccourcis clavier.
Pour plus d'informations, cliquez sur Aide.
3.
82
Cliquez sur OK.
Chapitre 1 : Exploration de l'espace de travail
Ajout 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 plus d'informations sur les systèmes multiutilisateurs, voir A
propos de la personnalisation de Dreamweaver dans les systèmes multiutilisateurs,
page 53.
Pour rechercher les extensions de Dreamweaver les plus récentes, consultez le site Web de
Macromedia Exchange, à l'adresse suivante : www.macromedia.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 que d'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 Macromedia. Vous pouvez lancer Extension
Manager à partir de Dreamweaver en choisissant Commandes > Gérer les extensions.
Pour installer et gérer les extensions :
1.
Sur le site Web Macromedia 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.
2.
■
Si vous l'ouvrez directement, Extension Manager traite automatiquement
l'installation.
■
Si vous l'enregistrez sur votre disque, placez le fichier du logiciel d'extension (.mxp)
dans le dossier des extensions téléchargées de l'application Dreamweaver sur votre
ordinateur.
Double-cliquez sur le fichier du logiciel d'extension ou ouvrez Extension Manager et
choisissez Fichier > Installer l'extension.
Dreamweaver personnalisation, notions de base
83
Le fichier sera installé dans Dreamweaver. Certaines extensions ne sont accessibles
qu'après avoir redémarré Dreamweaver ; un message vous invite à quitter et à redémarrer
l'application.
R E M A R QU E
84
Utilisez Extension Manager pour supprimer des extensions ou pour consulter des
informations sur l'extension.
Chapitre 1 : Exploration de l'espace de travail
CHAPITRE 2
2
Configuration d'un site
Dreamweaver
Un site Web est un ensemble de documents et d'actifs liés les uns aux autres et partageant des
attributs, par exemple une rubrique connexe, une conception similaire ou un même objectif.
Outil logiciel de création et de gestion de sites, Macromedia Dreamweaver 8 permet de
réaliser des sites Web complets, en sus de documents individuels.
Pour créer un site Web, la première étape consiste à le planifier. Pour obtenir des résultats
optimaux, concevez et planifiez la structure de votre site Web avant de créer les pages dont il
sera constitué.
L'étape suivante consiste à configurer Dreamweaver de façon à pouvoir travailler sur la
structure basique du site. Si vous disposez déjà d'un site installé sur un serveur Web, vous
pouvez utiliser Dreamweaver pour le modifier.
CO NS EIL
Il peut être judicieux de concevoir votre site d'après un modèle Dreamweaver. Voir A
propos des modèles Dreamweaver, page 334 et Création d'un modèle Dreamweaver,
page 348.
Ce chapitre contient les sections suivantes :
A propos des sites Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
Configuration d'un nouveau site Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Utilisation des paramètres avancés pour configurer un site Dreamweaver. . . . . . . 90
Modification des paramètres d'un site Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . 96
Modification de sites Web existants dans Dreamweaver . . . . . . . . . . . . . . . . . . . . . . 96
A propos des sites Dreamweaver
Un site Dreamweaver vous permet d'organiser tous les documents associés à un site Web.
L'organisation de vos fichiers dans un site vous permet d'exploiter Dreamweaver pour
télécharger votre site sur le serveur Web, suivre et gérer automatiquement vos liens, puis gérer
et partager les fichiers en équipe. Définissez un site pour tirer le meilleur parti des fonctions
offertes par Dreamweaver.
85
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 :
représente votre répertoire de travail. Dreamweaver désigne ce dossier
comme votre « site local ». Il peut se trouver sur un ordinateur local ou sur un serveur de
réseau. Il s'agit de l'endroit dans lequel sont stockés les fichiers en cours de développement de
votre site Dreamweaver.
Le dossier local
Pour définir un site Dreamweaver, il vous suffit de créer 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.
Le dossier distant est le répertoire dans lequel sont stockés les fichiers, selon votre
environnement de développement, que vous réservez aux tâches suivantes : évaluation,
production, collaboration, etc. Dreamweaver désigne ce dossier comme 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.
Ces deux dossiers (local et distant) vous permettent de transférer des fichiers entre votre
disque local et un serveur Web, ce qui facilite la gestion des fichiers sur vos sites Dreamweaver.
Le dossier Serveur d'évaluation est l'emplacement dans lequel Dreamweaver traite les pages
dynamiques. Pour plus d'informations, voir Définition du dossier de traitement des pages
dynamiques, page 683.
Rubriques connexes
Configuration d'un nouveau site Dreamweaver, page 89
■
86
Chapitre 2: Configuration d'un site Dreamweaver
Description de la structure du dossier local et du
dossier distant
Lors de la définition de l'accès au dossier distant pour votre site Dreamweaver (voir
Configuration d'un dossier distant, page 93), vous devez déterminer le répertoire hôte du
dossier distant. Le répertoire hôte à spécifier doit correspondre au dossier racine du dossier
local. Le schéma ci-dessous représente un exemple de dossier local à gauche et un exemple de
dossier distant à droite.
Si la structure de votre dossier distant ne correspond pas à celle de votre dossier local, les
fichiers transférés par Dreamweaver ne seront pas stockés au bon endroit et risquent de ne pas
être visibles pour les visiteurs du site. De plus, les chemins de vos images et de vos liens
peuvent être rompus.
Le dossier racine distant doit déjà exister pour que Dreamweaver puisse s'y connecter. Si
aucun répertoire racine n'existe pour votre dossier distant, créez-en un ou demandez à
l'administrateur du serveur de se charger de cette opération.
Notez que même si vous avez l'intention de ne modifier qu'une partie du site distant, il est
fortement conseillé de dupliquer localement la structure complète de la branche concernée du
site distant (du dossier racine du site distant jusqu'aux fichiers que vous désirez modifier).
A propos des sites Dreamweaver
87
Si, par exemple, le dossier racine de votre site distant, appelé public_html, contient deux sousdossiers, Projetc1 et Projetc2, et si vous ne désirez modifier que les fichiers HTML contenus
dans Project1, il n'est pas nécessaire de télécharger les fichiers contenus dans Project2, mais
vous devez mapper votre dossier racine local sur public_html, et non pas sur Project1.
SITE LOCAL
SITE DISTANT
public-html
Project 1
Assets
HTML
Project 2
Assets
HTML
Rubriques connexes
■
A propos des sites Dreamweaver, page 85
■
88
Configuration d'un dossier distant, page 93
Chapitre 2: Configuration d'un site Dreamweaver
dossier racine local
(le mapper ˆ public_html, non ˆ
Project1 ou Project1/HTML)
Project 1
(doit figurer sur le site local,
correspond ˆ Project1 sur le
site distant)
HTML
(doit figurer sur le
site local, correspond ˆ
Project1/HTML sur
le site distant)
Configuration d'un nouveau site
Dreamweaver
Une fois la structure de votre site planifiée, ou si vous disposez déjà d'un site, vous devez, si
possible, définir un site dans Dreamweaver avant de commencer son développement. Un site
Dreamweaver vous permet d'organiser tous les documents associés à un site Web. Pour plus
d'informations, voir A propos des sites Dreamweaver, page 85.
REMARQUE
Vous pouvez également modifier des fichiers sans définir de site Dreamweaver. Pour
plus d'informations, voir Accès aux sites, à un serveur et aux disques locaux, page 116.
Une fois que vous avez défini un site Dreamweaver, il est fortement conseillé de l'exporter, de
façon à disposer d'une copie de sauvegarde en local. Pour plus d'informations, voir
Importation et exportation de sites, page 147.
Pour configurer un site Dreamweaver :
1.
Choisissez Site > Gérer les sites.
La boîte de dialogue Gérer les sites s'affiche.
REMARQUE
2.
Si vous ne disposez pas de site Dreamweaver, la boîte de dialogue Définition de site
apparaît. Vous pouvez alors ignorer l'étape suivante.
Cliquez sur le bouton Nouveau.
La boîte de dialogue Définition du site s'ouvre.
3.
Procédez de l'une des manières suivantes :
■
Cliquez sur l'onglet Elémentaire pour utiliser l'assistant de définition de site qui vous
guide tout au long de la procédure.
R E MA R Q U E
Les utilisateurs qui découvrent Dreamweaver sont invités à suivre l'assistant de
définition d'un site ; les utilisateurs chevronnés de Dreamweaver lui préféreront
sans doute les paramètres avancés.
Configuration d'un nouveau site Dreamweaver
89
■
Cliquez sur l'onglet Avancé pour utiliser les paramètres avancés qui vous permettent
de définir individuellement le dossier local, le dossier distant et enfin le dossier
d'évaluation, selon vos besoins.
R E M A R QU E
4.
Pour commencer, vous avez le choix entre configurer entièrement un site
Dreamweaver et vous limiter à la première étape, à savoir configurer votre
dossier local.
Procédez à la configuration du site Dreamweaver :
■
Avec l'Assistant de définition de site, répondez aux questions qui apparaissent à
l'écran, puis cliquez sur Suivant pour passer à l'étape suivante du processus de création,
ou cliquez sur Retour pour revenir à l'écran précédent.
■
Complétez les catégories de paramètres avancés Infos locales, Infos distantes et Serveur
d'évaluation, si nécessaire (voir Utilisation des paramètres avancés pour configurer un site
Dreamweaver, page 90).
CONSEIL
Une fois que vous avez défini un site Dreamweaver, il est fortement conseillé de
l'exporter, de façon à disposer d'une copie de sauvegarde en local. Pour plus
d'informations, voir Importation et exportation de sites, page 147.
Si vous configurez un site Dreamweaver pour une application Web, voir Chapitre 23,
Configuration d'une application Web, page 673.
Utilisation des paramètres avancés pour
configurer un site Dreamweaver
Vous pouvez utiliser les paramètres avancés de la boîte de dialogue de définition d'un site pour
configurer un site Dreamweaver. Ces paramètres vous permettent de définir individuellement
le dossier local, le dossier distant et enfin le dossier d'évaluation (pour le traitement des pages
dynamiques), selon vos besoins. Il est conseillé aux utilisateurs chevronnés de Dreamweaver
d'utiliser cette méthode.
R E MA R Q U E
90
Pour commencer votre travail rapidement, vous pouvez compléter uniquement la
première étape de configuration d'un site Dreamweaver, c'est-à-dire la configuration du
dossier local. Vous pourrez ajouter les informations distantes et d'évaluation
ultérieurement. Vous devez impérativement définir un dossier local avant de vous
attaquer à Dreamweaver.
Chapitre 2: Configuration d'un site Dreamweaver
Si vous n'êtes pas familiarisé avec Dreamweaver, utilisez plutôt l'assistant de définition de site
que les Paramètres avancés. Cet assistant vous guidera tout au long de la procédure de
configuration (voir Configuration d'un nouveau site Dreamweaver, page 89).
Si vous configurez un site Dreamweaver pour une application Web, ignorez cette section et
consultez celle-ci : Chapitre 23, Configuration d'une application Web, page 673.
CONSEIL
Une fois que vous avez défini un site Dreamweaver, il est fortement conseillé de
l'exporter, de façon à disposer d'une copie de sauvegarde en local. Pour plus
d'informations, voir Importation et exportation de sites, page 147.
Rubriques connexes
A propos des sites Dreamweaver, page 85
■
■
Définition du dossier de traitement des pages dynamiques, page 683
Configuration d'un dossier local
Le dossier local représente le répertoire de travail de votre siteDreamweaver. Il peut se trouver
sur un ordinateur local ou sur un serveur de réseau.
Pour configurer un dossier local :
1.
Choisissez Site > Gérer les sites.
La boîte de dialogue Gérer les sites s'affiche.
REMARQUE
2.
Si vous ne disposez pas de site Dreamweaver, la boîte de dialogue Définition de site
apparaît. Vous pouvez alors ignorer l'étape suivante.
Cliquez sur Nouveau.
La boîte de dialogue Définition du site s'ouvre.
3.
Cliquez sur le bouton Avancé si les paramètres avancés ne sont pas visibles.
Utilisation des paramètres avancés pour configurer un site Dreamweaver
91
L'onglet Avancé de la boîte de dialogue Définition du site affiche le contenu de la
catégorie Infos locales.
4.
Spécifiez les options relatives aux informations locales.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
5.
(Facultatif) Si vous êtes prêt à configurer votre serveur distant, ignorez l'étape restante ;
sélectionnez la catégorie Infos distantes à gauche, puis renseignez la boîte de dialogue.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
6.
Cliquez sur OK.
Dreamweaver crée le cache initial du site, et le nouveau site Dreamweaver apparaît dans le
panneau Fichiers.
92
Chapitre 2: Configuration d'un site Dreamweaver
Une fois le dossier local configuré, vous pouvez ajouter un dossier distant et un dossier
d'évaluation (voir Configuration d'un dossier distant, page 93 et Définition du dossier de
traitement des pages dynamiques, page 683).
Rubriques connexes
■
A propos des sites Dreamweaver, page 85
■
Gestion des fichiers, page 111
Configuration d'un dossier distant
Une fois configuré le dossier local pour un site Dreamweaver (voir Configuration d'un dossier
local, page 91), il convient de configurer un dossier distant. Selon votre environnement de
développement, le dossier distant se trouve avec les fichiers destinés aux évaluations, à la
collaboration, à la production, au déploiement, etc.
REMARQUE
Il n'est pas nécessaire de spécifier un dossier distant si le dossier local est le même que
celui créé pour les fichiers de votre site, sur le système exécutant votre serveur Web. Ce
scénario suppose que le serveur Web s'exécute sur votre ordinateur local.
Déterminez le mode d'accès au dossier distant, puis prenez note des informations de
connexion. Cette section explique comment configurer un dossier distant et comment vous y
connecter.
Pour configurer un dossier distant :
1.
Choisissez Site > Gérer les sites.
La boîte de dialogue Gérer les sites s'affiche.
2.
Sélectionnez un site Dreamweaver préexistant.
Si vous n'avez pas encore défini de site Dreamweaver, créez un dossier local avant de
poursuivre (voir Configuration d'un dossier local, page 91).
3.
Cliquez sur Modifier.
La boîte de dialogue Définition du site s'ouvre.
4.
Cliquez sur le bouton Avancé si les paramètres avancés ne sont pas visibles.
5.
Sélectionnez la catégorie Infos distantes dans la liste de gauche.
6.
Sélectionnez une option d'accès.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
7.
Cliquez sur OK.
Utilisation des paramètres avancés pour configurer un site Dreamweaver
93
Dreamweaver crée une connexion avec le dossier distant. Si vous développez un site
dynamique, vous pouvez définir un dossier pour le traitement des pages dynamiques (voir
Définition du dossier de traitement des pages dynamiques, page 683).
Pour vous connecter à un dossier distant via un accès FTP :
■
Dans le panneau Fichiers, cliquez sur le bouton Connecter à un hôte distant de la barre
d'outils.
Pour vous déconnecter d'un dossier distant via un accès FTP :
■
Dans le panneau Fichiers, cliquez sur le bouton Déconnecter dans la barre d'outils.
Pour vous connecter ou déconnecter 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.
Rubriques connexes
■
A propos des sites Dreamweaver, page 85
■
Description de la structure du dossier local et du dossier distant, page 87
■
Résolution des problèmes de configuration du dossier distant, page 94
Résolution des problèmes de configuration du
dossier distant
Il existe de très nombreuses façons de configurer un serveur Web. Cette section vise à vous
expliquer certains problèmes courants que vous pouvez rencontrer en configurant un dossier
distant (voir Configuration d'un dossier distant, page 93), et à vous aider à les résoudre.
■
L'implémentation FTP de Dreamweaver peut ne pas fonctionner correctement avec
certains serveurs proxy, pare-feu multiniveaux et autres formes d'accès indirect à un
serveur.
Si vous avez des problèmes d'accès en FTP, demandez l'aide de votre administrateur
système.
■
Pour l'implémentation FTP de Dreamweaver, il est indispensable de se connecter au
dossier racine du système distant (dans de nombreuses applications, vous pouvez vous
connecter à n'importe quel répertoire distant, puis naviguer dans le système de fichiers
distants pour rechercher un répertoire).
Veillez à indiquer le dossier racine du système distant comme répertoire hôte.
94
Chapitre 2: Configuration d'un site Dreamweaver
Si vous rencontrez des problèmes de connexion et avez spécifié le répertoire hôte avec une
seule barre oblique (/), c'est peut-être qu'il vous faut spécifier un chemin relatif à partir du
répertoire auquel vous vous connectez et du dossier racine distant.
Si, par exemple, le dossier racine distant est un répertoire de niveau supérieur, vous devez
parfois spécifier ../../ pour le répertoire hôte.
■
Par ailleurs, les noms de dossiers et de fichiers qui contiennent des espaces ou des
caractères spéciaux peuvent souvent occasionner des problèmes à l'occasion d'un transfert
sur un site distant.
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. En
particulier, les points, barres obliques, virgules et apostrophes sont à éviter dans les noms
de fichiers et de dossiers. Il arrive que la présence de caractères spéciaux dans les noms de
fichiers ou de dossiers empêche Dreamweaver de créer une carte du site.
■
En cas de problème avec un nom de fichier long, raccourcissez ce nom. Sur Macintosh, 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.
Par exemple, le sous-répertoire public_html de votre répertoire principal sur le serveur
peut n'être qu'un simple lien pointant sur une toute autre partie du serveur. Dans la
plupart des cas, ces alias n'ont 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.
R E M A R QU E
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.
Utilisation des paramètres avancés pour configurer un site Dreamweaver
95
Modification des paramètres d'un site
Dreamweaver
Utilisez les paramètres avancés de la boîte de dialogue Définition du site pour modifier vos
sites Dreamweaver.
Pour modifier les paramètres d'un site Dreamweaver, procédez de l'une des
manières suivantes:
■
Sélectionnez Site > Gérer les sites, sélectionnez un site dans la boîte de dialogue Gérer les
sites, puis cliquez sur Modifier.
■
Dans le panneau Fichiers, sélectionnez Gérer les sites dans le menu déroulant dans lequel
apparaît le site, serveur ou lecteur courant ; sélectionnez un site dans la boîte de dialogue
Gérer les sites, puis cliquez sur Modifier.
Rubriques connexes
■
Configuration d'un nouveau site Dreamweaver, page 89
Modification de sites Web existants dans
Dreamweaver
Vous pouvez utiliser Dreamweaver pour modifier des sites existants, même si vous n'avez pas
utilisé Dreamweaver pour créer le site original. Ces sites peuvent se trouver sur votre système
ou sur un système distant.
Modification d'un site Web local existant dans
Dreamweaver
Vous pouvez utiliser Dreamweaver pour modifier un site existant sur votre disque dur local,
même si vous n'avez pas utilisé Dreamweaver pour créer le site original.
R E M AR QU E
Cette section permet de configurer un site Dreamweaver pour modifier un site Web local
existant. Il est également possible de modifier le site Web existant sans créer de site
Dreamweaver. Pour plus d'informations, voir Accès aux sites, à un serveur et aux disques
locaux, page 116.
Pour modifier un site Web local existant :
1.
96
Choisissez Site > Gérer les sites.
Chapitre 2: Configuration d'un site Dreamweaver
La boîte de dialogue Gérer les sites s'affiche.
2.
Cliquez sur Nouveau.
La boîte de dialogue Définition du site s'ouvre.
3.
Cliquez sur le bouton Avancé si les paramètres avancés ne sont pas visibles.
L'onglet Avancé de la boîte de dialogue Définition du site affiche le contenu de la
catégorie Infos locales.
4.
Complétez les options de la boîte de dialogue.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
5.
Cliquez sur OK.
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.
REMARQUE
Cette section permet de configurer un site Dreamweaver pour modifier un site Web
distant existant. Il est également possible de modifier le site Web existant sans créer de
site Dreamweaver. Pour plus d'informations, voir Accès aux sites, à un serveur et aux
disques locaux, page 116.
Pour modifier un site distant existant :
1.
Créez un dossier local contenant le site existant, puis définissez-le en tant que dossier local
du site (voir Configuration d'un dossier local, page 91).
REMARQUE
2.
Vous devez copier localement la structure complète de la branche concernée du site
distant existant. Pour plus d'informations, voir Description de la structure du dossier
local et du dossier distant, page 87.
Configurez un dossier distant (voir Configuration d'un dossier distant, page 93), en utilisant
les informations de votre site existant.
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.
Modification de sites Web existants dans Dreamweaver
97
4.
Selon la taille de la partie du site distant que vous désirez modifier, procédez de l'une des
manières suivantes :
■
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 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 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.
5.
Utilisez Dreamweaver pour tout travail sur votre site.
Rubriques connexes
■
Modification d'un site Web local existant dans Dreamweaver, page 96
98
Chapitre 2: Configuration d'un site Dreamweaver
CHAPITRE 3
3
Création et ouverture de
documents
Macromedia Dreamweaver 8 propose un environnement de travail souple pour la conception
Web et le développement de documents. Vous pouvez bien entendu créer et ouvrir des
documents HTML, mais également divers types de documents texte, comme CFML, ASP,
JavaScript et CSS. Dreamweaver prend également en charge les fichiers de code source comme
Visual Basic, .NET, C# et Java.
Dreamweaver propose diverses options pour la création d'un nouveau document. Vous
pouvez utiliser les éléments suivants :
■
Un nouveau document ou un modèle vierge
■
Un document basé sur une des conceptions de pages prédéfinies fournies avec
Dreamweaver
■
Un document basé sur un de vos modèles existants
D'autres options sont également disponibles. 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.
Dans Dreamweaver, il est facile de 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.
Ce chapitre contient les sections suivantes :
Création de nouveaux documents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Enregistrement d'un nouveau document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
Définition d'un nouveau type de document par défaut. . . . . . . . . . . . . . . . . . . . . . . . 103
Définition de l'extension de fichier par défaut de nouveaux documents HTML . . 104
Ouverture de documents existants. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
Nettoyage de fichiers HTML créés avec Microsoft Word. . . . . . . . . . . . . . . . . . . . . 106
99
Création de nouveaux documents
Dreamweaver propose de nombreux choix pour sélectionner un nouveau document. Voici les
diverses méthodes de création d'un nouveau document :
■
Commencer avec un document vierge (voir Création d'un document vierge, page 100).
■
Créer un document ou un modèle vierge basé sur un fichier de conception Dreamweaver
(voir Création d'un document basé sur un fichier de conception Dreamweaver, page 101).
■
Utiliser un modèle avec un aspect prédéfini et indiquant les éléments que vous pouvez
modifier (voir Création d'un document basé sur un modèle existant, page 102).
CONSEIL
Si vous avez l'habitude de travailler avec un type de document spécifique, vous
pouvez définir un document par défaut et baser le nouveau document
automatiquement sur le document par défaut à l'ouverture. Pour plus d'informations,
voir Définition d'un nouveau type de document par défaut, page 103.
Création d'un document vierge
Vous pouvez sélectionner le type de document vierge que vous souhaitez créer.
Pour créer un nouveau document vierge :
1.
Choisissez Fichier> Nouveau.
La boîte de dialogue Nouveau document s'affiche. L'onglet Général est déjà sélectionné.
2.
Sélectionnez l'une des catégories suivantes dans la liste : Page de base, Page dynamique,
Modèle, Autre ou Jeux de cadres. Sélectionnez ensuite le type de document que vous
souhaitez créer dans la liste de droite.
Par exemple, sélectionnez Page de base pour créer un document HTML, ou sélectionnez
Page dynamique pour créer un document ColdFusion ou ASP, et ainsi de suite.
Pour plus d'informations concernant les options de cette boîte de dialogue, cliquez sur le
bouton Aide dans la boîte de dialogue.
3.
Cliquez sur le bouton Créer.
Le nouveau document s'ouvre dans la fenêtre de document.
4.
Enregistrez le document (voir Enregistrement d'un nouveau document, page 103).
Rubriques connexes
■
Création d'un document basé sur un modèle existant, page 102
100
Chapitre 3: Création et ouverture de documents
Création d'un document basé sur un fichier de
conception Dreamweaver
Dreamweaver inclut plusieurs mises en formes de page professionnelles, ainsi que des fichiers
d'éléments de conception. Vous pouvez utiliser ces fichiers de conception 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 de conception, Dreamweaver crée une copie du fichier.
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 devrez enregistrer
séparément chacun des fichiers composant le cadre. Pour plus d'informations sur
l'enregistrement de cadres, voir Enregistrement des fichiers du cadre et du jeu de cadres,
page 325.
Pour créer un nouveau document à partir d'un fichier de conception
Dreamweaver :
1.
Choisissez Fichier> Nouveau.
La boîte de dialogue Nouveau document s'affiche. L'onglet Général est déjà sélectionné.
2.
Sélectionnez l'une des catégories suivantes dans la liste : Feuilles de style en cascade (CSS),
Mises en forme basées sur un tableau, Conception de page ou Conception de page
(Accessibilité). Sélectionnez ensuite un fichier de conception dans la liste de droite.
Il est possible de prévisualiser un fichier de conception et de consulter une brève
description des éléments de conception d'un document.
Pour plus d'informations concernant les options de cette boîte de dialogue, cliquez sur le
bouton Aide dans la boîte de dialogue.
3.
Cliquez sur le bouton Créer.
Le nouveau document s'ouvre dans la fenêtre de document. Si vous avez sélectionné une
feuille de style CSS, le document CSS s'affiche dans la fenêtre de document et la feuille de
style CSS s'ouvre en mode Code.
4.
Enregistrez le document (voir Enregistrement d'un nouveau document, page 103).
Si le fichier contient des liens vers les fichiers d'actifs, la boîte de dialogue Copier les
fichiers dépendants s'affiche pour vous permettre d'enregistrer une copie des fichiers
dépendants.
5.
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é.
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 de conception).
Création de nouveaux documents
101
Rubriques connexes
■
Création d'un document vierge, page 100
Création d'un document basé 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.
Pour plus d'informations sur la création de modèles, voir Création d'un modèle Dreamweaver,
page 348.
C ON S E I L
Si votre site ne contient aucun modèle, vous pouvez enregistrer comme modèle un
document dans l'une des catégories de fichier de conception de la boîte de dialogue
Nouveau document, puis créer des pages à partir de ce modèle. Pour plus d'informations
sur l'enregistrement d'un fichier de conception comme modèle, voir Création d'un
document basé sur un fichier de conception Dreamweaver, page 101.
Pour créer un document basé sur un modèle :
1.
Choisissez Fichier> Nouveau.
La boîte de dialogue Nouveau document s'ouvre.
2.
Cliquez sur l'onglet Modèles.
3.
Dans la liste Modèles pour, sélectionnez le site Dreamweaver contenant le modèle à utiliser,
puis sélectionnez un modèle dans la liste de droite.
Pour plus d'informations concernant les options de cette boîte de dialogue, cliquez sur le
bouton Aide dans la boîte de dialogue.
4.
Cliquez sur Créer.
Le nouveau document s'ouvre dans la fenêtre de document.
5.
Enregistrez le document (voir Enregistrement d'un nouveau document, page 103).
Pour créer 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.
C ON S E I L
102
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.
Chapitre 3: Création et ouverture de documents
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.
Rubriques connexes
■
Création d'un document vierge, page 100
■
Création d'un document basé sur un fichier de conception Dreamweaver, page 101
Enregistrement d'un nouveau document
Il est nécessaire d'enregistrer tout nouveau document que vous créez.
Pour enregistrer un document :
1.
Choisissez Fichier > Enregistrer.
2.
Dans la boîte de dialogue qui s'affiche, recherchez le dossier où vous voulez enregistrer le
fichier.
CONSEIL
3.
Il est conseillé d'enregistrer votre fichier dans un site Dreamweaver. Pour plus
d'informations, voir Configuration d'un nouveau site Dreamweaver, page 89.
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.
4.
Cliquez sur Enregistrer.
Définition d'un nouveau type de
document par défaut
Dans Dreamweaver, vous pouvez définir le type de document par défaut utilisé par
Dreamweaver pour un site.
Définition d'un nouveau type de document par défaut
103
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.
Pour définir un nouveau type de document et de nouvelles préférences par
défaut :
1.
Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
La boîte de dialogue Préférences s'affiche.
C ON S E I L
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 (voir Création d'un document vierge, page 100).
2.
Cliquez sur la catégorie Nouveau document dans la liste de gauche.
3.
Définissez ou modifiez les préférences à votre convenance.
Pour plus d'informations sur les options de la boîte de dialogue, cliquez sur le bouton
d'aide.
4.
Cliquez sur OK.
Dreamweaver enregistre vos préférences.
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 faire en sorte que Dreamweaver utilise une extension
.htm ou .html pour tous les nouveaux documents HTML.
Pour définir l'extension de fichier par défaut de nouveaux documents HTML :
1.
Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
La boîte de dialogue Préférences s'affiche.
CONSEIL
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 (voir Création d'un document vierge, page 100).
2.
Cliquez sur la catégorie Nouveau document dans la liste de gauche.
3.
Dans le menu déroulant Document par défaut, vérifiez que HTML est sélectionné.
104
Chapitre 3: Création et ouverture de documents
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.
Ouverture de documents existants
Dans Dreamweaver, vous pouvez ouvrir une page Web existante ou un document texte, même
si celui-ci n'a pas été créé avec Dreamweaver. Vous pouvez ouvrir le document et le modifier
dans les modes de travail Création ou Code de Dreamweaver.
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 plus d'informations, voir Nettoyage de
fichiers HTML créés avec Microsoft Word, page 106.
Pour nettoyer un fichier HTML ou XHTML non généré par Microsoft Word, voir Nettoyage
du code, page 647.
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.
Pour ouvrir un fichier existant :
1.
Choisissez Fichier > Ouvrir.
La boîte de dialogue Ouvrir s'affiche.
C ON S E I L
2.
Recherchez et sélectionnez le fichier à ouvrir.
R E MA R Q U E
3.
Vous pouvez également utiliser le panneau Fichiers pour ouvrir les fichiers. Pour plus
d'informations, voir Utilisation des fichiers depuis le panneau Fichiers, page 134.
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. Pour plus d'informations sur la configuration
d'un site Dreamweaver, voir Configuration d'un nouveau site Dreamweaver, page 89.
Cliquez sur Ouvrir.
Ouverture de documents existants
105
Le document s'ouvre dans la fenêtre de document.
Par défaut, JavaScript, 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. Pour plus d'informations
sur la définition des paramètres d'un éditeur de texte externe afin de visualiser ces types de
fichiers, voir Lancement d'un éditeur externe pour des fichiers multimédia, page 533.
Nettoyage de fichiers HTML créés avec
Microsoft Word
Dans Dreamweaver, 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, voir Nettoyage
du code, page 647.
Pour ouvrir et nettoyer un fichier HTML Microsoft Word :
1.
Si cette opération n'a pas encore été effectuée, enregistrez votre document au format
HTML dans Microsoft Word.
R EM A R Q U E
2.
Sous Windows, fermez le fichier dans Word pour éviter une violation de partage.
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.
La boîte de dialogue Nettoyage du HTML Word s'affiche.
106
Chapitre 3: Création et ouverture de documents
Il peut se produire un certain délai pendant que Dreamweaver tente de déterminer la
version de Word qui a été utilisée pour enregistrer ce fichier. Si Dreamweaver n'y parvient
pas, sélectionnez la version correcte dans le menu déroulant.
4.
Désélectionnez les options de votre choix dans la boîte de dialogue.
Pour plus d'informations concernant les options de cette boîte de dialogue, cliquez sur le
bouton d'aide.
5.
Cliquez sur OK.
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).
Rubriques connexes
■
Importation de documents Microsoft Office (Windows uniquement), page 431
Nettoyage de fichiers HTML créés avec Microsoft Word
107
108
Chapitre 3: Création et ouverture de documents
PARTIE 2
Utilisation de sites
Dreamweaver
2
Apprenez à gérer des sites Macromedia Dreamweaver 8, ainsi que des actifs
propres à ces sites.
Cette partie du manuel contient les chapitres suivants :
Chapitre 4 : Gestion des fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
Chapitre 5 : Gestion des actifs de site et des bibliothèques . . . . 179
Chapitre 6 : Gestion des sites Contribute avec Dreamweaver . 203
109
CHAPITRE 4
4
Gestion des fichiers
Macromedia Dreamweaver 8 vous aide à organiser et à gérer vos fichiers.
Dreamweaver comprend une série de fonctions permettant de gérer et de transférer des
fichiers depuis et vers un serveur distant. Lorsque vous transférez des fichiers entre le site local
et le site distant, Dreamweaver conserve la même structure de fichiers et de dossiers sur les
deux sites. Dreamweaver crée automatiquement les dossiers nécessaires s'ils n'existent pas déjà
sur le site de destination. 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.
Certaines fonctions de Dreamweaver facilitent le travail en équipe sur tout projet de site Web.
Vous pouvez archiver et extraire les fichiers d'un serveur distant afin que les autres membres de
l'équipe Web puissent savoir qui travaille sur un fichier. Vous pouvez ajouter des Design Notes
à vos fichiers afin de partager des informations avec d'autres membres de l'équipe sur l'état, la
priorité ou autre d'un fichier. Vous pouvez également utiliser la fonction de rapports sur le
déroulement du travail afin de générer des rapports sur votre site et obtenir ainsi des
informations sur l'état des archivages et des extractions ou rechercher les Design Notes jointes
aux fichiers.
Ce chapitre contient les sections suivantes :
A propos de la gestion de site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .112
Accès aux sites, à un serveur et aux disques locaux. . . . . . . . . . . . . . . . . . . . . . . . . . .116
Affichage de fichiers et de dossiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .121
Comparaison de fichiers pour en chercher les différences . . . . . . . . . . . . . . . . . . . . 126
Restauration de fichiers (utilisateurs de Contribute). . . . . . . . . . . . . . . . . . . . . . . . . . 132
Gestion de fichiers et de dossiers dans le panneau Fichiers . . . . . . . . . . . . . . . . . . 133
Utilisation d'une carte d'arborescence de votre site . . . . . . . . . . . . . . . . . . . . . . . . . . 138
Importation et exportation de sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
Suppression d'un site Dreamweaver de votre liste de sites . . . . . . . . . . . . . . . . . . . 149
Archivage et extraction de fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
Acquisition et placement de fichiers depuis ou vers votre serveur . . . . . . . . . . . . . 157
111
Synchronisation des fichiers entre le site local et le site distant. . . . . . . . . . . . . . . . 162
Identification et suppression des fichiers non utilisés. . . . . . . . . . . . . . . . . . . . . . . . . 164
Voilage des dossiers et des fichiers du site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
Stockage des informations sur les fichiers dans des Design Notes . . . . . . . . . . . . 169
Test de votre site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
A propos de la gestion de site
Dreamweaver comprend une série de fonctions permettant de gérer un site et de transférer des
fichiers depuis et vers un serveur distant. Certaines fonctions de Dreamweaver, notamment le
système d'archivage et d'extraction et les Design Notes, facilitent également le travail en
équipe sur tout projet de site Web.
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.
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. Pour plus d'informations sur l'utilisation des fonctions Acquérir et
Placer, voir Acquisition et placement de fichiers depuis ou vers votre serveur, page 157.
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, Dreamweaver
affiche, dans le panneau Fichiers, le nom de la personne ayant effectué l'opération et insère
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.
112
Chapitre 4: Gestion des fichiers
Pour plus d'informations sur les fichiers LCK et sur le fonctionnement du système d'archivage
et d'extraction, reportez-vous aux notes techniques 15447 sur le site Web de Macromedia à
l'adresse www.macromedia.com/go/15447.
Rubriques connexes
Configuration du système d'archivage et d'extraction de fichiers, page 150
■
■
Archivage et extraction de fichiers dans un dossier distant, page 154
A propos des transferts de fichiers en arrière-plan
Dreamweaver vous permet d'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, Microsoft Visual SourceSafe 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 des données dynamiques ;
■
prévisualiser des données dynamiques ;
■
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 ;
■
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.
A propos de la gestion de site
113
Rubriques connexes
■
Gestion des transferts de fichiers, page 161
A propos du voilage de site
Le voilage vous permet de définir les dossiers et les types de fichier du site que vous souhaitez
exclure de certaines opérations (acquisition et placement, par exemple). Vous pouvez voiler
certains dossiers, mais pas des fichiers individuels. Pour voiler des fichiers, sélectionnez un
type de fichier : Dreamweaver voilera tous les fichiers de ce type. 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.
Ainsi, si vous travaillez sur un site de grande taille et ne souhaitez pas télécharger vos fichiers
multimédias chaque jour, vous pouvez utiliser la fonction de voilage sur le site pour voiler
votre dossier multimédia. Le système exclut alors les fichiers de ce dossier lorsque vous
effectuez des opérations sur le site.
Vous pouvez voiler des dossiers et des types de fichier sur le site distant ou local. Le voilage
exclut les dossiers et fichiers 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
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.
Rubriques connexes
■
Voilage des dossiers et des fichiers du site, page 164
114
Chapitre 4: Gestion des fichiers
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.
Si vous ouvrez un fichier dans Macromedia 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 de fichier absolue. De ce fait, les
design notes du fichier maMaison.gif pourrait 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"
R E M A R QU E
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 (voir Lancement d'un
éditeur externe pour des fichiers multimédia, page 533), ce dernier ouvre directement le fichier
d'origine pour vous permettre de le modifier.
A propos de la gestion de site
115
Rubriques connexes
■
Activation et désactivation des Design Notes pour un site, page 169
■
Association de Design Notes à un fichier, page 171
A propos des fichiers dépendants
Lorsque vous transférez un document entre un dossier local et distant à l'aide du panneau
Fichiers, Dreamweaver vous donne la possibilité de 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.
Dreamweaver traite également les éléments de bibliothèque comme des fichiers dépendants.
Pour plus d'informations, voir A propos des éléments de bibliothèque, page 179.
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. Pour obtenir
des instructions, voir Voilage des dossiers et des fichiers du site, page 164.
Rubriques connexes
Acquisition de fichiers depuis un serveur distant, page 157
■
■
Placement de fichiers sur un site distant, page 159
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 (voir Configuration de Dreamweaver pour
fonctionner sans définir de site, page 119).
REMARQUE
116
La meilleure façon de gérer des fichiers est de créer un site Dreamweaver (voir
Configuration d'un nouveau site Dreamweaver, page 89).
Chapitre 4: Gestion des fichiers
Pour ouvrir un site Dreamweaver existant :
■
Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez un site dans le menu
contextuel (dans lequel le site, le serveur ou le disque dur en cours d'utilisation s'affiche).
Pour plus d'informations sur la modification de l'affichage de votre site (par exemple, pour
afficher le dossier distant), voir Affichage de fichiers et de dossiers, page 121. Pour plus
d'informations sur l'ouverture de fichiers dans votre site, voir Utilisation des fichiers depuis le
panneau Fichiers, page 134.
Pour ouvrir 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 contextuel (dans lequel le site, le serveur ou le disque dur en cours d'utilisation
s'affiche).
REMARQUE
2.
Les noms des serveurs que vous avez configurés pour fonctionner avec
Dreamweaver apparaissent. Si vous n'avez pas encore configuré de serveur, voir
Configuration de Dreamweaver pour fonctionner sans définir de site, page 119.
Naviguez vers ces fichiers et modifiez-les comme vous le faites habituellement.
Pour plus d'informations, voir Utilisation des fichiers depuis le panneau Fichiers, page 134.
Accès aux sites, à un serveur et aux disques locaux
117
Pour accéder à 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 contextuel (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 :
■
Ouvrir des 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, Dreamweaver copie 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, Dreamweaver dé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.
Rubriques connexes
■
Gestion de fichiers et de dossiers dans le panneau Fichiers, page 133
118
Chapitre 4: Gestion des fichiers
Configuration de Dreamweaver pour fonctionner
sans définir de site
Dreamweaver vous permet de vous connecter à un serveur FTP ou RDS de façon à pouvoir
travailler sur vos documents sans avoir à créer de site Dreamweaver.
REMARQUE
Ce type de connexion ne permet toutefois pas d'effectuer des opérations au niveau du
site Dreamweaver, par exemple vérifier les liens. Pour configurer un site Dreamweaver,
voir Configuration d'un nouveau site Dreamweaver, page 89.
Pour configurer Dreamweaver de façon à ce qu'il fonctionne avec un serveur
dans la fenêtre Document :
1.
Choisissez Site > Gérer les sites.
La boîte de dialogue Gérer les sites s'affiche.
2.
Cliquez sur Nouveau, puis sélectionnez Serveurs FTP et RDS.
La boîte de dialogue Configurer le serveur s'affiche.
3.
Complétez les options de la boîte de dialogue.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
REMARQUE
4.
Vous ne devez compléter cette boîte de dialogue qu'une seule fois par serveur
auquel vous souhaitez vous connecter.
Cliquez sur OK.
Le panneau Fichiers affiche le contenu du dossier de serveur distant auquel vous êtes
connecté et le nom du serveur apparaît dans le menu contextuel situé en haut de ce même
panneau.
Accès aux sites, à un serveur et aux disques locaux
119
Pour configurer Dreamweaverde façon à ce qu'il fonctionne avec le panneau
Fichiers :
1.
Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez Bureau dans le menu contextuel
(menu dans lequel est affiché le site, le serveur ou le lecteur en cours d'utilisation).
2.
Cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfoncée
(Macintosh) sur le nœud des Serveurs FTP et RDS dans le panneau Fichiers, puis
sélectionnez Ajouter un serveur FTP ou Ajouter un serveur RDS.
La boîte de dialogue Configurer le serveur s'affiche.
3.
Complétez les options de la boîte de dialogue.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
REMARQUE
4.
120
Vous ne devez compléter cette boîte de dialogue qu'une seule fois par serveur
auquel vous souhaitez vous connecter.
Cliquez sur OK.
Chapitre 4: Gestion des fichiers
Le panneau Fichiers affiche le contenu du dossier de serveur distant auquel vous êtes
connecté et le nom du serveur apparaît dans le menu contextuel situé en haut de ce même
panneau.
R E M A R QU E
Pour les dossiers plus volumineux, le panneau Fichiers peut mettre un petit moment
à afficher le dossier.
Rubriques connexes
■
Accès aux sites, à un serveur et aux disques locaux, page 116
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é (utilisez
l'option Toujours afficher, voir Définition des préférences du panneau Fichiers, page 133).
Pour ouvrir ou fermer le panneau Fichiers :
■
Choisissez Fenêtre > Fichiers.
Pour modifier 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.
■
Dans la carte du site, faites glisser la flèche au-dessus d'un fichier pour modifier
l'espace entre les fichiers.
Affichage de fichiers et de dossiers
121
Pour développer ou réduire le panneau Fichiers (sites Dreamweaver
uniquement) :
■
Dans le panneau Fichiers (Fenêtre > Fichiers), cliquez sur le bouton Développer/Réduire
dans 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. Le panneau
Fichiers peut également afficher une carte d'arborescence du site local.
Pour modifier l'affichage du site dans le panneau Fichiers, effectuez l'une des
opérations suivantes (site Dreamweaver uniquement) :
■
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 contextuel (où la vue actuelle s'affiche).
REMARQUE
■
L'option Affichage local apparaît par défaut dans le menu contextuel.
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), Serveur d'évaluation ou Carte du site dans
la barre d'outils.
Serveur d'évaluation
Plan du site
Fichiers du site
122
Chapitre 4: Gestion des fichiers
Si vous cliquez sur le bouton Carte du site, vous avez le choix entre afficher la carte du site
avec les fichiers du site et n'afficher que la carte du site. Pour plus d'informations, voir
Affichage d'une carte de site, page 138.
R E M A R QU E
Avant de pouvoir afficher un site distant ou un serveur d'évaluation, vous devez le
configurer (voir Configuration d'un dossier distant, page 93 ou Définition du dossier de
traitement des pages dynamiques, page 683). Avant de pouvoir afficher une carte du
site, vous devez avoir configuré une page d'accueil (voir Affichage d'une carte de site,
page 138).
Rubriques connexes
Accès aux sites, à un serveur et aux disques locaux, page 116
■
■
Gestion de fichiers et de dossiers dans le panneau Fichiers, page 133
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é) (voir
Affichage de fichiers et de dossiers, page 121), Dreamweaver affiche dans des colonnes les
informations liées aux fichiers et dossiers. 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
■
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 à une Design Note (colonnes personnalisées uniquement)
Affichage de fichiers et de dossiers
123
Pour effectuer un 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.
CONSEIL
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).
Pour ajouter, supprimer ou modifier des colonnes :
1.
Choisissez Site > Gérer les sites.
La boîte de dialogue Gérer les sites s'affiche.
2.
Sélectionnez un site, puis cliquez sur Modifier.
La boîte de dialogue Définition du site s'ouvre.
3.
124
Sélectionnez Colonnes en mode Fichier dans la liste de catégories, à gauche.
Chapitre 4: Gestion des fichiers
La boîte de dialogue Définition du site affiche les options Colonnes en mode Fichier.
4.
Complétez les options de la boîte de dialogue.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
5.
Cliquez sur OK.
Affichage de fichiers et de dossiers
125
Comparaison de fichiers pour en
chercher les différences
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 l'outil de comparaison, consultez le site Web de
Macromedia à l'adresse suivante : www.macromedia.com/go/dw8_compare_util_fr. Vous
devez également spécifier l'outil dans Dreamweaver après l'avoir installé, comme indiqué plus
bas dans cette section.
Cette section contient les rubriques suivantes :
■
Comparaison avant le placement de fichiers, page 129
■
Comparaison lors de la synchronisation des fichiers, page 130
■
Définition de l'outil de comparaison dans Dreamweaver, page 131
Comparaison de deux fichiers
Une fois que vous avez installé un outil de comparaison de fichiers sur votre système et que
vous l'avez défini dans Dreamweaver, vous pouvez effectuer les tâches suivantes à partir de
Dreamweaver :
■
Comparaison de deux fichiers locaux, page 127
■
Comparaison de deux fichiers distants, page 127
■
Comparaison entre un fichier local et un fichier distant, page 128
■
Comparaison entre un fichier distant et un fichier local, page 128
■
Comparaison entre un fichier ouvert et un fichier distant, page 129
Rubriques connexes
■
Comparaison avant le placement de fichiers, page 129
126
Chapitre 4: Gestion des fichiers
■
Comparaison lors de la synchronisation des fichiers, page 130
Comparaison de deux fichiers locaux
Vous pouvez comparer deux fichiers situés à n'importe quel endroit sur votre ordinateur.
Pour comparer deux fichiers locaux :
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.
C ON S E I L
2.
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électionnezles.
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. Pour plus
d'informations, voir Configuration d'un nouveau site Dreamweaver, page 89.
Pour comparer deux fichiers distants :
1.
Dans le panneau Fichiers, affichez les fichiers sur le serveur distant en choisissant Affichage
distant dans le menu contextuel droit.
2.
Appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant avec
la souris sur les deux fichiers pour les sélectionner
Comparaison de fichiers pour en chercher les différences
127
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.
R E M A R QU E
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. Pour plus d'informations, voir Configuration d'un nouveau site
Dreamweaver, page 89.
Pour comparer un fichier local à un fichier distant :
■
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.
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. Pour
plus d'informations, voir Configuration d'un nouveau site Dreamweaver, page 89.
Pour comparer un fichier distant à un fichier local :
1.
128
Dans le panneau Fichiers, affichez les fichiers sur le serveur distant en choisissant Affichage
distant dans le menu contextuel droit.
Chapitre 4: Gestion des fichiers
■
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.
Pour effectuer une comparaison entre un fichier ouvert dans Dreamweaver et
sa copie distante :
■
Dans la fenêtre de document, choisissez Fichier > Comparer avec distants.
L'outil de comparaison de fichiers démarre et compare les deux fichiers.
C ON S E I L
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. Dreamweaver
vous donne 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. Pour plus d'informations, voir Définition de l'outil de
comparaison dans Dreamweaver, page 131.
Pour comparer des fichiers lorsque vous placez un fichier :
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, Dreamweaver vous avertit et vous donne 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.
Comparaison de fichiers pour en chercher les différences
129
Si vous n'avez pas spécifié d'outil de comparaison de fichiers, Dreamweaver 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.
Rubriques connexes
■
Comparaison de deux fichiers, page 126
Comparaison lors de la synchronisation des fichiers
Vous pouvez comparer les versions locales de vos fichiers avec les versions distantes lorsque
vous synchronisez les fichiers de votre site avec Dreamweaver.
Avant de commencer, vous devez installer un outil de comparaison de fichiers sur votre
système et le définir dans Dreamweaver. Pour plus d'informations, voir Définition de l'outil de
comparaison dans Dreamweaver, page 131.
Pour comparer des fichiers pendant une synchronisation :
1.
Cliquez avec le bouton droit de la souris à n'importe quel endroit du panneau Fichiers et
sélectionnez Synchroniser dans le menu contextuel.
La boîte de dialogue Synchroniser les fichiers s'affiche.
2.
Complétez les options de la boîte de dialogue Synchroniser les fichier, puis cliquez sur
Aperçu.
Pour plus d'informations, voir Synchronisation des fichiers entre le site local et le site distant,
page 162.
Une fois que vous avez cliqué sur Aperçu, Dreamweaver répertorie les fichiers sélectionnés
et les 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).
R E M A R QU E
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é.
130
Chapitre 4: Gestion des fichiers
Rubriques connexes
■
Comparaison de deux fichiers, page 126
■
Comparaison avant le placement de fichiers, page 129
Définition de l'outil de comparaison dans
Dreamweaver
Vous devez installer l'outil de comparaison de fichiers d'un éditeur tiers sur votre système pour
comparer les fichiers de Dreamweaver. Pour plus d'informations l'outil de comparaison,
consultez le site Web de Macromedia à l'adresse suivante : www.macromedia.com/go/
dw8_compare_util_fr.
Après avoir installé un outil de comparaison de fichiers, vous devez l'activer dans
Dreamweaver, comme indiqué dans cette section.
Pour définir un outil de comparaison de fichiers :
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.
Sous Windows, cliquez sur le bouton Parcourir et sélectionnez une application qui
compare les fichiers.
4.
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 sur
votre Macintosh. Par exemple, si vous souhaitez utiliser FileMerge, recherchez le dossier
usr/bin et sélectionnez opendiff, l'outil qui lance FileMerge.
Comparaison de fichiers pour en chercher les différences
131
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 :
Si vous utilisez
Sélectionnez le fichier suivant
FileMerge
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.
Rubriques connexes
■
Comparaison de deux fichiers, page 126
■
Comparaison avant le placement de fichiers, page 129
■
Comparaison lors de la synchronisation des fichiers, page 130
Restauration de fichiers (utilisateurs de
Contribute)
Dreamweaver enregistre automatiquement plusieurs versions d'un document lorsque la
compatibilté Contribute est activée. Pour activer la compatibilité Contribute, voir Préparation
d'un site à utiliser avec Contribute, page 210.
R E M A R QU E
Contribute doit être installé sur le même ordinateur que Dreamweaver.
La restauration des fichiers doit être activée au niveau des paramètres adminstratifs de
Contribute. Pour plus d'informations, voir Administration de Contribute.
Pour restaurer la version précédente d'un fichier :
1.
132
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.
Chapitre 4: Gestion des 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.
Rubriques connexes
■
Suppression, déplacement ou changement de nom d'un fichier distant d'un site Contribute,
page 213
Gestion de fichiers et de dossiers dans le
panneau Fichiers
Vous pouvez organiser et gérer les fichiers et dossiers de votre site, qu'ils soient intégrés à un
site Dreamweaver situé sur un serveur auquel vous êtes connecté ou qu'ils se trouvent sur un
disque local ou votre bureau.
REMARQUE
Dans les versions précédentes de Dreamweaver, le panneau Fichiers s'appelait le
panneau Site.
Rubriques connexes
■
Accès aux sites, à un serveur et aux disques locaux, page 116
■
Affichage de fichiers et de dossiers, page 121
Définition des préférences du panneau Fichiers
Sélectionnez vos préférences pour le contrôle des fonctions de transfert de fichiers dans le
panneau Fichiers.
Pour modifier les préférences du panneau Fichiers :
1.
Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
La boîte de dialogue Préférences s'affiche.
2.
Sélectionnez la catégorie Site dans la liste de gauche.
Gestion de fichiers et de dossiers dans le panneau Fichiers
133
Les options des préférences Site s'affichent.
3.
Modifiez les options de votre choix.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
4.
Cliquez sur OK.
C ON S E I L
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.
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. Pour plus d'informations sur la
synchronisation du site local et du site distant, voir Synchronisation des fichiers entre le site local
et le site distant, page 162.
134
Chapitre 4: Gestion des fichiers
Pour ouvrir 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 de l'une des manières suivantes :
■
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.
Pour créer un nouveau fichier ou un nouveau 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).
Pour supprimer un fichier ou un dossier :
1.
Sélectionnez le fichier à supprimer dans le 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 choisissez Supprimer.
Pour renommer un fichier ou un dossier :
1.
Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez le fichier ou le dossier à
renommer.
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 sélectionnez Renommer.
3.
Saisissez le nouveau nom à la place du nom existant.
4.
Appuyez sur la touche Entrée (Windows) ou Retour (Macintosh).
Pour déplacer un fichier ou un dossier :
1.
Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez le fichier ou le dossier à
déplacer.
Gestion de fichiers et de dossiers dans le panneau Fichiers
135
2.
3.
Procédez de l'une des manières suivantes :
■
Copiez le fichier ou le dossier, puis collez-le à son nouvel emplacement.
■
Faites glisser le fichier ou le dossier vers son nouvel emplacement.
Actualisez le panneau Fichiers pour afficher le fichier ou le dossier à son nouvel
emplacement.
Pour actualiser le contenu du panneau Fichiers, 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 un des fichiers ou dossiers, puis cliquez sur 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 automatiquement le panneau Fichiers lorsque vous
effectuez des modifications dans une autre application, puis revenez à
Dreamweaver.
Rubriques connexes
Affichage de fichiers et de dossiers, page 121
■
■
Accès aux sites, à un serveur et aux disques locaux, page 116
■
Définition des préférences du panneau Fichiers, page 133
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.
Pour localiser 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.
R E M AR QU E
136
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.
Chapitre 4: Gestion des fichiers
Pour localiser et sélectionner 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.
Pour rechercher 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.
Pour localiser et sélectionner 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.
Pour localiser et sélectionner 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.
Pour rechercher les 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.
La boîte de dialogue Sélectionner Modifiés récemment s'affiche.
2.
Complétez les options de la boîte de dialogue.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
3.
Cliquez sur OK pour enregistrer vos paramètres.
Gestion de fichiers et de dossiers dans le panneau Fichiers
137
Dreamweaver sélectionne les fichiers modifiés durant la période sélectionnée dans le panneau
Fichiers.
Rubriques connexes
■
Accès aux sites, à un serveur et aux disques locaux, page 116
■
Affichage de fichiers et de dossiers, page 121
■
Utilisation des fichiers depuis le panneau Fichiers, page 134
Utilisation d'une carte d'arborescence de
votre site
Vous pouvez afficher un fichier local pour un site Dreamweaver comme carte d'arborescence
contenant des icônes liées. Ceci est connu sous le nom de carte de site. Utilisez cette carte pour
ajouter de nouveaux fichiers à un site Dreamweaver ou pour ajouter, modifier ou supprimer
des liens.
La carte du site présente la structure du site sur deux niveaux en partant de la page d'accueil.
Les pages sont présentées sous la forme d'icônes et les liens sont affichés dans l'ordre où ils
apparaissent dans le code source.
La carte du site est idéale pour agencer la structure d'un site. Vous pouvez définir rapidement
la structure d'ensemble du site, puis créer une image graphique de la carte du site.
REMARQUE
L'option de carte du site n'est disponible que pour les sites locaux. Pour créer la carte
d'un site distant, copiez le contenu de ce site dans un dossier de votre disque local, puis
utilisez la commande Gérer les sites pour définir le site en tant que site local (voir
Configuration d'un dossier local, page 91).
Rubriques connexes
Lien vers des documents à l'aide de la carte graphique, page 484
■
Affichage d'une carte de site
Vous devez définir la page d'accueil du site avant de pouvoir en afficher la carte. Cette page
d'accueil peut correspondre à toute page du site (il n'est pas nécessaire que ce soit la page
principale du site). Dans le cas présent, la page d'accueil constitue simplement le point de
départ de la carte.
138
Chapitre 4: Gestion des fichiers
Pour définir la page d'accueil d'un site :
1.
Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez un site dans le menu contextuel
(dans lequel le site, le serveur ou le disque dur s'affiche).
2.
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfoncée (Macintosh) sur le fichier de votre choix, puis cliquez sur Définir comme page
d'accueil pour définir ce fichier comme page d'accueil.
REMARQUE
Vous pouvez également définir la page d'accueil dans les options Mise en forme de
la carte du site dans la boîte de dialogue Définition du site (voir Modification de la
mise en forme de la carte du site, page 141).
Pour afficher une carte du site :
1.
Pour afficher la carte du site, dans le panneau Fichiers (Fenêtre > Fichiers), effectuez l'une
des opérations suivantes :
■
Dans le panneau Fichiers affiché sous sa forme réduite, sélectionnez Affichage de la
carte dans le menu contextuel Vue du site.
■
Dans le panneau Fichiers affiché sous sa forme développée, cliquez sur le bouton Carte
du site dans la barre d'outils, puis sélectionnez Carte seulement ou Carte et fichiers.
Choisissez Carte seulement afin d'afficher la carte du site sans la structure des fichiers
locaux ou Carte et fichiers afin d'afficher la carte du site avec cette structure.
REMARQUE
Si aucune page d'accueil n'a été définie ou si Dreamweaver ne trouve pas de
page intitulée index.html ou index.htm dans le site actuel (qu'il utilise alors
comme page d'accueil), Dreamweaver vous invite à sélectionner une page
d'accueil.
Utilisation d'une carte d'arborescence de votre site
139
Le panneau Fichiers affiche une carte du site présentant la structure du site sur deux
niveaux.
REMARQUE
Par défaut, la carte du site n'affiche ni les fichiers masqués, ni les fichiers
dépendants. Pour plus d'informations, voir Affichage et masquage des fichiers de la
carte du site, page 144.
2.
Cliquez sur les signes plus (+) et moins (–) en regard d'un nom de fichier pour afficher ou
masquer les pages liées sous le second niveau.
3.
Attention aux couleurs présentes dans la carte du site :
■
Le texte affiché en rouge indique un lien brisé.
■
Le texte affiché en bleu et marqué d'une icône en forme de globe indique un fichier
sur un autre site ou un lien spécial (comme un lien de courriel ou de script).
■
Une coche de couleur verte indique un fichier extrait par vous.
■
Une coche de couleur rouge indique un fichier extrait par quelqu'un d'autre.
■
Un cadenas indique qu'un fichier est en lecture seule (Windows) ou verrouillé
(Macintosh).
Rubriques connexes
■
Utilisation des pages dans la carte du site, page 142
■
Affichage et masquage des fichiers de la carte du site, page 144
■
Affichage du site à partir d'une branche, page 146
140
Chapitre 4: Gestion des fichiers
Modification de la mise en forme de la carte du site
Utilisez les options de mise en forme de la carte du site pour personnaliser son aspect. Vous
pouvez changer de page d'accueil, indiquer le nombre de colonnes à afficher, préciser si les
étiquettes des icônes doivent afficher le nom du fichier ou le titre de la page et indiquer si les
fichiers dépendants et masqués doivent être affichés.
Pour modifier la mise en forme de la carte du site :
1.
Procédez de l'une des manières suivantes pour ouvrir la boîte de dialogue Définition du
site :
■
Choisissez Site > Gérer les sites.
■
Dans le panneau Fichiers, sélectionnez Gérer les sites dans le menu contextuel où est
affiché le site, serveur ou disque dur.
La boîte de dialogue Gérer les sites s'affiche.
2.
Cliquez sur Modifier.
La boîte de dialogue Définition du site s'ouvre.
3.
Sélectionnez la catégorie Mise en forme de la carte du site dans la liste de gauche.
La boîte de dialogue Définition du site affiche les options Mise en forme de la carte du
site.
4.
Apportez les modifications de votre choix.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
Utilisation d'une carte d'arborescence de votre site
141
5.
Cliquez sur OK pour fermer la boîte de dialogue Définition du site.
6.
Cliquez sur Terminé pour fermer la boîte de dialogue Gérer les sites, le cas échéant.
Rubriques connexes
■
Affichage d'une carte de site, page 138
■
Affichage et masquage des fichiers de la carte du site, page 144
■
Enregistrement de la carte du site, page 146
Utilisation des pages dans la carte du site
Lorsque vous travaillez dans la carte d'un site, vous pouvez sélectionner des pages, ouvrir une
page pour la modifier, ajouter des pages au site, créer des liens entre les fichiers et modifier le
titre des pages.
Pour sélectionner plusieurs pages dans la carte du site, procédez de l'une des
manières suivantes :
■
Cliquez en maintenant la touche Maj enfoncée pour sélectionner une série de pages
consécutives.
■
En partant d'une partie vierge de l'affichage, faites glisser le curseur autour d'un groupe de
fichiers pour les sélectionner.
■
Cliquez en maintenant la touche Ctrl (Windows) ou Commande (Macintosh) enfoncée
pour sélectionner des pages non consécutives.
Pour ouvrir une page à modifier dans la carte du site, procédez de l'une des
manières suivantes :
■
Double-cliquez sur le 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.
Pour ajouter un fichier existant au site, procédez de l'une des manières
suivantes :
■
Faites glisser le fichier depuis l'Explorateur Windows ou le Finder Macintosh vers un
fichier de la carte du site. La page est ajoutée au site et un lien est créé entre cette page et le
fichier vers lequel vous l'avez fait glisser.
■
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfoncée (Macintosh) sur le fichier de la carte du site, sélectionnez Lier au fichier existant,
puis recherchez le fichier.
142
Chapitre 4: Gestion des fichiers
Pour créer un fichier et ajouter un lien à la carte du site :
1.
Sélectionnez un fichier dans la carte du site.
2.
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfoncée (Macintosh), puis sélectionnez Lier au nouveau fichier.
La boîte de dialogue Lier au nouveau fichier s'affiche.
3.
Saisissez le nom, le titre et le texte du lien.
4.
Cliquez sur OK.
Dreamweaver enregistre le fichier dans le même dossier que le fichier sélectionné. Si vous
ajoutez un fichier à une branche masquée, le fichier est également masqué (voir Affichage
et masquage des fichiers de la carte du site, page 144).
Pour modifier le titre d'une page de la carte du site :
1.
Assurez-vous que les titres des pages apparaissent en cliquant sur le menu Options situé
dans l'angle supérieur droit du panneau Fichiers réduit, puis en sélectionnant Fichier >
Renommer Affichage > Afficher les titres des pages.
2.
Sélectionnez un fichier dans la carte du site, puis procédez de l'une des manières suivantes :
3.
■
Cliquez sur le titre. Lorsque le titre devient modifiable, saisissez un nouveau titre.
■
Cliquez sur le menu Options situé dans l'angle supérieur droit, puis sélectionnez
Fichier > Renommer.
Appuyez sur la touche Entrée (Windows) ou Retour (Macintosh) après avoir tapé le
nouveau nom.
REMARQUE
Lorsque vous travaillez dans le panneau Fichiers, Dreamweaver met
automatiquement à jour tous les liens vers les fichiers renommés.
Utilisation d'une carte d'arborescence de votre site
143
Pour utiliser une nouvelle page d'accueil dans la carte du site, procédez de
l'une des manières suivantes :
■
Dans l'affichage local du panneau Fichiers, sélectionnez un fichier, cliquez avec le bouton
droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis
choisissez Définir comme page d'accueil.
■
Dans le panneau Fichiers, sélectionnez Gérer les sites dans le menu contextuel où est
affiché le site, serveur ou disque dur, puis cliquez sur Modifier. Choisissez Mise en forme
de la carte du site parmi les catégories répertoriées dans la boîte de dialogue Définition du
site. Recherchez la nouvelle page d'accueil, puis cliquez sur OK.
Pour mettre à jour l'affichage de la carte du site après avoir effectué des
changements :
1.
Cliquez n'importe où dans la carte du site afin de désélectionner les fichiers.
2.
Cliquez sur le bouton Actualiser dans la barre d'outils du panneau Fichiers.
Rubriques connexes
■
Affichage d'une carte de site, page 138
■
Modification de la mise en forme de la carte du site, page 141
■
Enregistrement de la carte du site, page 146
Affichage et masquage des fichiers de la carte du site
Vous pouvez modifier la présentation de la carte du site de façon à afficher ou masquer les
fichiers masqués et dépendants. Ceci est utile pour mettre l'accent sur des rubriques ou des
éléments de contenu importants et ne pas présenter des éléments de moindre intérêt.
Pour masquer un fichier en utilisant la carte du site, vous devez d'abord le marquer comme
étant masqué. Lorsque vous masquez un fichier, ses liens le sont également. Lorsque vous
affichez un fichier masqué, son icône et ses liens sont visibles dans l'affichage de la carte du
site, mais les noms s'affichent en italique.
R E MA R Q U E
Par défaut, les fichiers dépendants sont déjà masqués.
Pour marquer des fichiers comme étant masqués dans la carte du site :
1.
Dans la fenêtre de document, sélectionnez un ou plusieurs fichiers.
2.
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfoncée (Macintosh), puis sélectionnez Afficher/masquer le lien.
144
Chapitre 4: Gestion des fichiers
Pour désactiver le marquage de fichiers marqués comme étant masqués dans
la carte du site :
1.
Dans la fenêtre de document, sélectionnez un ou plusieurs fichiers.
2.
Procédez de l'une des manières suivantes :
■
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfoncée (Macintosh) dans la carte du site, puis sélectionnez Afficher/masquer le lien.
■
Dans le panneau Fichiers (Fenêtre > Fichiers) affiché sous sa forme réduite, cliquez sur
le menu Options dans le coin supérieur droit, puis sélectionnez Affichage > Afficher
les fichiers identifiés comme masqués.
■
Dans le panneau Fichiers (Fenêtre > Fichiers) affiché sous sa forme réduite, cliquez sur
le menu Options dans le coin supérieur droit, puis sélectionnez Affichage > Afficher/
Masquer le lien.
Pour afficher ou masquer des fichiers indiqués comme masqués dans la carte
du 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.
2.
Procédez de l'une des manières suivantes :
■
Choisissez Affichage > Afficher les fichiers identifiés comme masqués.
■
Choisissez Affichage > Mise en forme pour ouvrir la boîte de dialogue Définition du
site, puis sélectionnez l'option Afficher les fichiers identifiés comme masqués.
Pour afficher les fichiers dépendants dans la carte du 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.
2.
Procédez de l'une des manières suivantes :
■
Choisissez Affichage > Afficher les fichiers dépendants.
■
Choisissez Affichage > Mise en forme pour ouvrir la boîte de dialogue Définition du
site, puis sélectionnez l'option Afficher les fichiers dépendants.
Rubriques connexes
■
Affichage d'une carte de site, page 138
■
Modification de la mise en forme de la carte du site, page 141
■
Utilisation des pages dans la carte du site, page 142
■
Enregistrement de la carte du site, page 146
Utilisation d'une carte d'arborescence de votre site
145
Affichage du site à partir d'une branche
Vous pouvez afficher les détails d'une section spécifique d'un site en faisant d'une branche le
centre de la carte du site.
Pour afficher une branche différente dans la carte du site :
1.
Sélectionnez la page à afficher.
2.
Procédez de l'une des manières suivantes :
■
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfoncée (Macintosh) dans la carte du site, puis sélectionnez Afficher comme racine.
■
Dans le panneau Fichiers (Fenêtre > Fichiers) affiché sous sa forme réduite, cliquez sur
le menu Options dans le coin supérieur droit, puis sélectionnez Affichage > Afficher
comme racine.
La carte du site est retracée dans la fenêtre comme si la page spécifiée était à la racine du site.
La zone Navigation dans le site, au-dessus de la carte du site, affiche le chemin de la page
spécifiée par rapport à la page d'accueil. Sélectionnez un élément du chemin pour afficher la
carte du site à partir de ce niveau en cliquant dessus.
Pour développer et réduire les branches dans la carte du site :
■
Cliquez sur le signe plus (+) ou moins (–) en regard d'une branche.
Rubriques connexes
■
Affichage d'une carte de site, page 138
■
Modification de la mise en forme de la carte du site, page 141
■
Utilisation des pages dans la carte du site, page 142
Enregistrement de la carte du site
Vous pouvez enregistrer la carte du site en tant qu'image, puis afficher cette image ou
l'imprimer à partir d'un éditeur d'image.
146
Chapitre 4: Gestion des fichiers
Pour créer un fichier d'image de la carte du 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, puis sélectionnez Fichier > Enregistrer la carte
du site.
La boîte de dialogue Enregistrer la carte du site s'affiche.
2.
Saisissez un nom de fichier dans la zone Nom de fichier.
3.
Dans le menu contextuel Types de fichiers, choisissez .bmp ou .png.
4.
Sélectionnez l'emplacement où enregistrer le fichier, puis saisissez le nom de l'image.
5.
Cliquez sur Enregistrer.
Rubriques connexes
■
Affichage d'une carte de site, page 138
■
Modification de la mise en forme de la carte du site, page 141
■
Utilisation des pages dans la carte du site, page 142
Importation et exportation de sites
Vous pouvez exporter un site sous la forme d'un fichier XML contenant les paramètres du site
et l'importer ultérieurement dans Dreamweaver. 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.
C ON S E I L
Pensez à exporter régulièrement vos sites, de façon à disposer d'une copie de
sauvegarde en cas de problème.
Pour exporter vos sites :
1.
Sélectionnez Site > Gérer les sites.
La boîte de dialogue Gérer les sites s'affiche.
2.
Sélectionnez un ou plusieurs sites à exporter puis cliquez sur le bouton 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.
Importation et exportation de sites
147
3.
Pour chaque site à exporter, recherchez un emplacement où vous souhaitez enregistrer le
site et cliquez sur Enregistrer.
Si vous exportez un site qui spécifie un nom d'utilisateur et un mot de passe pour un
serveur distant, Dreamweaver vous demande si vous souhaitez effectuer une copie de
sauvegarde de vos paramètres ou si vous souhaitez partager les paramètres avec d'autres
utilisateurs. Si vous souhaitez partager vos paramètres avec d'autres utilisateurs, choisissez
la seconde option et 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).
Dreamweaver enregistre chaque site en tant que fichier XML en lui attribuant
l'extension .ste et le place à l'endroit indiqué précédemment.
4.
Cliquez sur Terminé pour fermer la boîte de dialogue Gérer les sites.
Pour importer des sites :
1.
Sélectionnez Site > Gérer les sites.
La boîte de dialogue Gérer les sites s'affiche.
2.
Cliquez sur le bouton Importer.
La boîte de dialogue Importer le site s'affiche.
3.
Recherchez et sélectionnez un ou plusieurs sites (définis dans des fichiers ayant une
extension.ste) à importer.
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 pour commencer à importer les sites.
Une fois que Dreamweaver a importé les sites, leurs noms apparaissent dans la boîte de
dialogue Gérer les sites.
5.
148
Cliquez sur Terminé pour fermer la boîte de dialogue Gérer les sites.
Chapitre 4: Gestion des fichiers
Suppression d'un site Dreamweaver de
votre liste de sites
Si vous ne souhaitez plus utiliser un site dans Dreamweaver, vous pouvez le supprimer de
votre liste de sites. Les fichiers du site ne sont pas effacés par cette opération.
REMARQUE
Si vous supprimez un site de votre liste, toutes les informations sur la configuration de ce
site sont définitivement effacées.
Pour retirer un site de la liste des sites :
1.
Choisissez Site > Gérer les sites.
La boîte de dialogue Gérer les sites s'affiche.
2.
Sélectionnez le nom du site.
3.
Cliquez sur Supprimer.
Une boîte de dialogue vous demande de confirmer la suppression.
4.
Cliquez sur Oui pour supprimer le site de la liste ou sur Non pour conserver le site.
Le nom du site disparaît de la liste lorsque vous cliquez sur Oui.
5.
Cliquez sur Terminé pour fermer la boîte de dialogue Gérer les sites.
Archivage et extraction de fichiers
Si vous travaillez en équipe, le système d'archivage et d'extraction vous permet de vérifier les
fichiers entrants et sortants du serveur local et du serveur 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 (voir Acquisition et placement de fichiers depuis ou vers votre serveur, page 157).
Cette section contient les rubriques suivantes :
■
Configuration du système d'archivage et d'extraction de fichiers, page 150
■
Utilisation de WebDAV pour archiver et extraire des fichiers, page 152
■
Archivage et extraction de fichiers dans un dossier distant, page 154
■
Annulation de l'extraction d'un fichier, page 156
Rubriques connexes
■
A propos du système d'archivage et d'extraction de fichiers, page 112
Archivage et extraction de fichiers
149
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 (voir Configuration d'un dossier distant, page 93).
Pour configurer le système d'archivage et d'extraction de fichiers :
1.
Choisissez Site > Gérer les sites.
La boîte de dialogue Gérer les sites s'affiche.
2.
Sélectionnez un site, puis cliquez sur Modifier.
La boîte de dialogue Définition du site s'ouvre.
3.
Sélectionnez la catégorie Infos distantes dans la liste de gauche.
La boîte de dialogue Définition du site affiche les options des Infos distantes. La section
Archiver/Extraire apparaît dans la partie inférieure de la boîte de dialogue.
4.
150
Sélectionnez l'option Activer l'archivage et l'extraction de fichier.
Chapitre 4: Gestion des fichiers
Des options supplémentaires s'affichent.
REMARQUE
5.
Si vous ne voyez pas les options Archiver/Extraire, cela signifie que vous n'avez pas
configuré le serveur distant (voir Configuration d'un dossier distant, page 93).
Complétez la section Archiver/Extraire.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
6.
Cliquez sur OK.
Archivage et extraction de fichiers
151
Rubriques connexes
■
A propos du système d'archivage et d'extraction de fichiers, page 112
■
Archivage et extraction de fichiers dans un dossier distant, page 154
■
Annulation de l'extraction d'un fichier, page 156
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. Pour
plus d'informations, voir www.webdav.org.
Pour configurer l'accès WebDAV dans Dreamweaver :
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.
Pour plus d'informations, voir Configuration d'un dossier local, page 91.
2.
Sélectionnez Site > Gérer les sites puis double-cliquez sur votre site dans la liste.
La boîte de dialogue Définition du site s'ouvre.
3.
152
Si l'onglet Elémentaire est sélectionné, cliquez sur l'onglet Avancé.
Chapitre 4: Gestion des fichiers
4.
Cliquez sur la catégorie Infos distantes puis sélectionnez WebDAV dans le menu
contextuel Accès.
5.
Indiquez la façon dont Dreamweaver doit se connecter à votre serveur WebDAV.
Pour obtenir des instructions, cliquez sur le bouton Aide de la boîte de dialogue.
6.
Sélectionnez l'option Activer l'archivage et l'extraction de fichier et entrez les informations
suivantes :
■
Dans la zone de texte Check Out Name (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 OK.
Dreamweaver configure le site pour l'accès WebDAV.
Archivage et extraction de fichiers
153
Pour utiliser WebDAV pour archiver et extraire des fichiers :
■
Utilisez les méthodes d'archivage et d'extraction standard décrites dans la section suivante.
Lorsque vous utilisez la commande d'archivage ou d'extraction sur un fichier du site,
Dreamweaver transfère le fichier au moyen de WebDAV.
Archivage et extraction de fichiers dans un dossier
distant
Une fois le système d'archivage et d'extraction défini (voir Configuration du système d'archivage
et d'extraction de fichiers, page 150), vous pouvez archiver et extraire des fichiers sur un serveur
distant via le panneau Fichiers ou la fenêtre de document.
Pour extraire 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.
La boîte de dialogue Fichiers dépendants s'affiche.
3.
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.
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.
154
Chapitre 4: Gestion des fichiers
Pour archiver 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
2.
Vous pouvez sélectionner des fichiers dans l'affichage du site local ou distant mais
pas dans l'affichage Serveur d'évaluation.
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.
■
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.
La boîte de dialogue Fichiers dépendants s'affiche.
3.
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.
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.
Pour archiver ou extraire un fichier ouvert à partir de la fenêtre de document :
1.
Assurez-vous que le fichier à archiver ou à extraire est actif dans la fenêtre de document.
R EM A R Q U E
2.
Vous ne pouvez archiver qu'un seul fichier ouvert à la fois.
Procédez de l'une des manières suivantes :
■
Choisissez Site > Archiver ou Site > Extraire.
Archivage et extraction de fichiers
155
■
Dans la barre d'outils de la fenêtre de document, cliquez sur l'icône Gestion des
fichiers, puis choisissez Archiver ou Extraire dans le menu contextuel.
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 n'appartient qu'à un seul site local, Dreamweaver ouvre
ce site, puis effectue l'opération d'archivage ou d'extraction.
Si vous extrayez le fichier actif, la version ouverte du fichier est écrasée par la nouvelle version
extraite. 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 (voir Définition
des préférences du panneau Fichiers, page 133).
Rubriques connexes
■
A propos du système d'archivage et d'extraction de fichiers, page 112
■
Configuration du système d'archivage et d'extraction de fichiers, page 150
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.
Rubriques connexes
■
A propos du système d'archivage et d'extraction de fichiers, page 112
■
Configuration du système d'archivage et d'extraction de fichiers, page 150
■
Archivage et extraction de fichiers dans un dossier distant, page 154
156
Chapitre 4: Gestion des fichiers
Acquisition et placement de fichiers
depuis ou vers votre serveur
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 (voir
Archivage et extraction de fichiers, page 149). 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.
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. Pour
afficher ou enregistrer ce journal, voir Gestion des transferts de fichiers, page 161.
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.
Pour acquérir 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.
R EM A R Q U E
2.
Pour n'acquérir que les fichiers dont la version distante est plus récente que la
version locale, utilisez la commande Synchroniser (voir Synchronisation des fichiers
entre le site local et le site distant, page 162).
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.
La boîte de dialogue Fichiers dépendants s'affiche.
Acquisition et placement de fichiers depuis ou vers votre serveur
157
3.
Pour télécharger également les fichiers dépendants, cliquez sur Oui ; pour les éviter, cliquez
sur Non.
R E M A R QU E
Si vous disposez déjà de copies locales des fichiers dépendants, cliquez sur Non.
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 (voir Archivage et extraction de fichiers, page 149).
■
Si vous n'utilisez pas le système d'archivage et d'extraction, l'obtention d'un fichier
consistera à transférer 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 interrompre à tout moment le transfert de fichier, cliquez sur le bouton Annuler dans la
boîte de dialogue d'état. Le transfert en cours peut ne pas s'interrompre immédiatement.
Pour acquérir un fichier d'un serveur distant via la fenêtre de 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 contextuel.
REMARQUE
158
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.
Chapitre 4: Gestion des fichiers
Pour afficher le journal FTP :
■
Cliquez sur le menu Options dans le coin supérieur droit du panneau Fichiers, puis
choisissez Affichage > Journal FTP du site.
Rubriques connexes
■
A propos du système d'archivage et d'extraction de fichiers, page 112
■
A propos des transferts de fichiers en arrière-plan, page 113
Placement de fichiers sur un site 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. Pour
afficher ou enregistrer ce journal, voir Gestion des transferts de fichiers, page 161.
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.
Pour placer des 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.
Acquisition et placement de fichiers depuis ou vers votre serveur
159
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
2.
Pour ne placer que les fichiers dont la version locale est plus récente que la version
distante, voir Synchronisation des fichiers entre le site local et le site distant, page 162.
Procédez de l'une des manières suivantes pour placer un fichier :
■
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.
Si le fichier n'a pas encore été enregistré, il se peut qu'une boîte de dialogue s'ouvre (selon
les préférences définies dans 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.
3.
Si une boîte de dialogue s'affiche, 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.
La boîte de dialogue Fichiers dépendants s'affiche.
4.
Pour transférer également les fichiers dépendants, cliquez sur Oui ; pour les éviter, cliquez
sur Non.
R E M A R QU E
Si le site distant contient déjà des copies des fichiers dépendants, cliquez sur Non.
Pour interrompre le transfert de fichier, cliquez sur le bouton Annuler de la boîte de dialogue
d'état. Le transfert en cours peut ne pas s'interrompre immédiatement.
Pour placer des 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.
2.
Procédez de l'une des manières suivantes pour placer un fichier :
160
Chapitre 4: Gestion des fichiers
■
Choisissez Site > Placer.
■
Cliquez sur l'icône Gestion des fichiers de la barre d'outils de la fenêtre du document,
puis sélectionnez Placer dans le menu contextuel.
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.
Pour afficher le journal FTP :
■
Cliquez sur le menu Options dans le coin supérieur droit du panneau Fichiers, puis
choisissez Affichage > Journal FTP du site.
Rubriques connexes
■
A propos du système d'archivage et d'extraction de fichiers, page 112
■
Acquisition de fichiers depuis un serveur distant, page 157
■
A propos des transferts de fichiers en arrière-plan, page 113
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 échec du transfert). 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. Pour plus d'informations,
voir A propos des transferts de fichiers en arrière-plan, page 113.
Pour annuler le transfert d'un fichier :
■
Cliquez sur le bouton Annuler ou fermez la boîte de dialogue Transfert de fichiers en
arrière-plan.
Pour masquer la boîte de dialogue Activité fichiers en arrière-plan pendant les
transferts :
■
Cliquez sur le bouton Masquer de la boîte de dialogue Transfert de fichiers en arrière-plan.
Acquisition et placement de fichiers depuis ou vers votre serveur
161
Pour afficher les 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.
Pour enregistrer 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.
Rubriques connexes
■
Acquisition et placement de fichiers depuis ou vers votre serveur, page 157
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.
Pour identifier les fichiers qui sont plus récents sur le site local ou le site distant
sans effectuer de synchronisation, procédez de l'une des manières suivantes :
■
162
Dans le coin supérieur droit du panneau Fichiers, cliquez sur le menu Options puis
sélectionnez Edition > Sélectionner locaux plus récents ou Sélectionner > Sélectionner
distants plus récents.
Chapitre 4: Gestion des fichiers
■
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.
Pour synchroniser vos fichiers :
1.
Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez un site dans le menu contextuel
(dans lequel le site, le serveur ou le disque dur s'affiche).
2.
(Facultatif) Sélectionnez des fichiers ou des dossiers spécifiques.
Si vous souhaitez synchroniser l'ensemble du site, ignorez cette étape.
3.
Cliquez sur le menu Options dans le coin supérieur droit du panneau Fichiers, puis
choisissez Site > Synchroniser.
La boîte de dialogue Synchroniser les fichiers s'affiche.
4.
Complétez les options de la boîte de dialogue.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
5.
Cliquez sur le bouton Aperçu.
Dreamweaver affiche les fichiers qui seront synchronisés et vous permet de modifier les
actions (placer, acquérir, supprimer et ignorer) pour ces fichiers avant d'exécuter la
synchronisation. Si tous vos fichiers sont déjà synchronisés, Dreamweaver vous informe
qu'il n'est pas nécessaire de procéder à leur synchronisation.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
Rubriques connexes
Archivage et extraction de fichiers dans un dossier distant, page 154
■
■
Acquisition de fichiers depuis un serveur distant, page 157
■
Placement de fichiers sur un site distant, page 159
■
Comparaison de fichiers pour en chercher les différences, page 126
Synchronisation des fichiers entre le site local et le site distant
163
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.
Pour identifier et supprimer les fichiers non utilisés
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 déroulant du panneau Vérificateur de lien.
Dreamweaver l'ensemble des fichiers sans liens entrants. Ceci signifie qu'aucun des
fichiers de votre site n'est lié à ces fichiers.
3.
Sélectionnez le fichiers à supprimer et appuyez sur Supprimer (Windows) ou
Command+Supprimer (Macintosh).
A T TE N T I O N
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.
Rubriques connexes
■
Recherche de liens rompus, externes et orphelins, page 503
Voilage des dossiers et des fichiers du
site
Le voilage vous permet de définir les dossiers et les types de fichiers du site que vous souhaitez
exclure de certaines opérations (acquisition et placement, par exemple).
Rubriques connexes
■
A propos du voilage de site, page 114
■
164
Identification et suppression des fichiers non utilisés, page 164
Chapitre 4: Gestion des fichiers
Activation et désactivation du voilage sur un site
Le voilage est activé par défaut sur un site. 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 et type de fichier concerné.
Pour activer et désactiver le voilage sur un site :
1.
Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez un site dans le menu contextuel
où s'affiche le site, le serveur ou le disque dur.
2.
Sélectionnez un fichier ou un dossier.
3.
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 Activer ou Désactiver le voilage.
■
Sélectionnez Paramètres, puis choisissez Voilage dans la liste des catégories située à
gauche de la boîte de dialogue Définition du site, onglet Avancé. Sélectionnez ou
désélectionnez Activer le voilage, puis cliquez sur OK.
Cela active ou désactive le voilage sur le site.
Rubriques connexes
■
A propos du voilage de site, page 114
■
Voilage et suppression du voilage de certains types de fichier, page 166
■
Suppression du voile de tous les dossiers et fichiers, page 168
Voilage et suppression du voilage pour les dossiers
d'un site
Il est possible de voiler des dossiers spécifiques, mais pas tous les dossiers existants ou un site
entier. Il est toutefois possible de voiler plusieurs dossiers simultanément.
Pour voiler ou supprimer le voile de dossiers spécifiques au sein d'un site :
1.
Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez un site pour lequel le voilage est
activé dans le menu contextuel où est affiché le site, le serveur ou le disque dur.
Voilage des dossiers et des fichiers du site
165
2.
Sélectionnez les dossiers de votre choix 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 dossier pour indiquer que le dossier est
voilé ou dévoilé.
REMARQUE
Vous pouvez effectuer une opération sur 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.
Rubriques connexes
■
A propos du voilage de site, page 114
■
Activation et désactivation du voilage sur un site, page 165
■
Suppression du voile de tous les dossiers et fichiers, page 168
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.
Pour voiler certains types de fichier au sein d'un site :
1.
Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez un site pour lequel le voilage est
activé dans le menu contextuel où est affiché le site, le serveur ou le disque dur.
2.
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfoncée (Macintosh), puis choisissez Paramètres.
166
Chapitre 4: Gestion des fichiers
La boîte de dialogue Définition du site affiche les options de voilage.
3.
Activez la case à cocher Voiler les fichiers se terminant avec.
4.
Saisissez les types de fichier à voiler dans la zone de texte.
Vous pouvez saisir, par exemple, .jpg afin de voiler tous les fichiers dont le nom se termine
par .jpg dans le site.
REMARQUE
5.
Pour saisir plusieurs types de fichier, séparez chaque type par un espace ; n'utilisez
ni virgule ni point-virgule.
Cliquez sur OK.
Une ligne rouge apparaît sur les fichiers concernés pour indiquer qu'ils sont voilés.
C ON S E I L
Certains logiciels créent des fichiers de sauvegarde se terminant par un suffixe donné,
tel que .bak. Vous pouvez voiler ces fichiers.
R E M A R QU E
Vous pouvez effectuer une opération sur 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 des dossiers et des fichiers du site
167
Pour supprimer le voile de certains types de fichier au sein d'un site :
1.
Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez un site pour lequel le voilage est
activé dans le menu contextuel où est affiché le site, le serveur ou le disque dur.
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.
La boîte de dialogue Définition du site s'ouvre et affiche l'onglet Avancé.
3.
4.
Procédez de l'une des manières suivantes :
■
Désactivez la case à cocher 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.
Cliquez sur OK.
Les lignes rouges disparaissent des fichiers concernés pour indiquer qu'ils ne sont plus
voilés.
Rubriques connexes
■
A propos du voilage de site, page 114
■
Activation et désactivation du voilage sur un site, page 165
■
Voilage et suppression du voilage pour les dossiers d'un site, page 165
Suppression du voile de tous les dossiers et fichiers
Vous pouvez supprimer le voile de tous les dossiers et fichiers 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.
C ON S E I L
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 (voir Activation et désactivation du
voilage sur un site, page 165).
Pour supprimer le voile de tous les dossiers et fichiers au sein d'un site :
1.
Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez un site pour lequel le voilage est
activé dans le menu contextuel où est affiché le site, le serveur ou le disque dur.
2.
Sélectionnez un fichier ou un dossier quelconque du site.
168
Chapitre 4: Gestion des fichiers
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.
R E M A R QU E
Cela désactive également la case à cocher Voiler les fichiers se terminant avec, sous
Site> Voilage > Paramètres.
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.
Rubriques connexes
■
A propos du voilage de site, page 114
■
Activation et désactivation du voilage sur un site, page 165
■
Voilage et suppression du voilage pour les dossiers d'un site, page 165
■
Voilage et suppression du voilage de certains types de fichier, page 166
Stockage des informations sur les fichiers
dans des Design Notes
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.
Rubriques connexes
■
A propos des Design Notes, page 115
Activation et désactivation des Design Notes pour un
site
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, si vous le souhaitez, décider de ne les utiliser que localement.
Pour activer ou désactiver les Design Notes sur un site ou pour ne les utiliser
que localement :
1.
Choisissez Site > Gérer les sites.
Stockage des informations sur les fichiers dans des Design Notes
169
La boîte de dialogue Gérer les sites s'affiche.
2.
Sélectionnez un site, puis cliquez sur Modifier.
La boîte de dialogue Définition du site s'ouvre.
3.
Sélectionnez la catégorie Design Notes dans la liste de gauche.
La boîte de dialogue Définition du site apparaît avec les options Design Notes.
4.
Complétez les options de la boîte de dialogue.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
5.
Cliquez sur OK.
Rubriques connexes
■
A propos des Design Notes, page 115
■
170
Utilisation des Design Notes, page 172
Chapitre 4: Gestion des fichiers
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.
Pour ajouter des Design Notes à un document :
1.
Procédez de l'une des manières 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 (voir Archivage et extraction
de fichiers dans un dossier distant, page 154 ou Acquisition et placement de
fichiers depuis ou vers votre serveur, page 157).
La boîte de dialogue Design Notes s'ouvre.
2.
Complétez les options de la boîte de dialogue.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
Stockage des informations sur les fichiers dans des Design Notes
171
3.
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 ».
Rubriques connexes
■
A propos des Design Notes, page 115
■
Activation et désactivation des Design Notes pour un site, page 169
Utilisation des Design Notes
Après avoir associé des Design Notes à un fichier (voir Association de Design Notes à un fichier,
page 171), vous pouvez ouvrir le fichier Design Notes, modifier son état ou le supprimer.
Pour ouvrir une Design Notes associée à un fichier, procédez de l'une des
manières 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.
■
Dans la colonne Notes du panneau Fichiers, double-cliquez sur l'icône jaune Design
Notes.
Pour attribuer 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 Etat.
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.
172
Chapitre 4: Gestion des fichiers
6.
Cliquez sur l'onglet Infos de base et remarquez que la nouvelle valeur de l'état apparaît dans
le menu contextuel Etat.
R E M A R QU E
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.
Pour effacer de votre site des Design Notes non associées :
1.
Choisissez Site > Gérer les sites.
La boîte de dialogue Gérer les sites s'affiche.
2.
Sélectionnez le site, puis cliquez sur Modifier.
La boîte de dialogue Définition du site s'ouvre.
3.
Sélectionnez la catégorie Infos locales 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.
Rubriques connexes
■
A propos des Design Notes, page 115
■
Activation et désactivation des Design Notes pour un site, page 169
Test de votre site
Dreamweaver comprend de nombreuses fonctions vous permettant de tester votre site dont,
entre autres, la prévisualisation de pages et la vérification de la compatibilité avec les
navigateurs. Vous pouvez également exécuter divers rapports pour, par exemple, repérer les
liens brisés.
Test de votre site
173
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
:
■
Assurez-vous que les pages fonctionnent comme prévu dans les navigateurs visés et qu'elles
« échouent élégamment » dans les autres.
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 (voir Vérification de la
compatibilité du navigateur, page 649). 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 (voir Vérifier le navigateur, page 565).
■
Affichez vos pages dans le plus grand nombre de navigateurs et sur le plus grand nombre
de plates-formes possible.
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 (voir Aperçu et test de page dans les
navigateurs, page 408).
■
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 (voir Recherche de liens rompus, externes et
orphelins, page 503 et Correction des liens rompus, page 505).
■
174
Contrôlez la taille de vos pages et leur durée de téléchargement (voir Vérification des
préférences de durée et de la taille de téléchargement, page 412).
Chapitre 4: Gestion des fichiers
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
■
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 (voir Test de votre site,
page 173).
■
Validez votre code pour détecter toute erreur de balise ou de syntaxe (voir Validation de
balises, page 653).
■
Une fois que la plus grande partie du site a été publiée, continuez à le mettre à jour et à en
assurer la maintenance.
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.
■
Utilisez les forums de discussion Dreamweaver du site Web Macromedia à l'adresse
www.macromedia.com/go/dreamweaver_newsgroup.
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 .
Utilisation des rapports pour tester votre site
Vous pouvez exécuter des rapports sur le déroulement du travail ou les attributs HTML du
site, comprenant des points comme l'accessibilité, pour le document actuel, les fichiers
sélectionnés ou le site complet.
Test de votre site
175
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. Pour définir un site distant, voir Configuration d'un dossier distant,
page 93.
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,
l'accessibilité, 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 de Macromedia Dreamweaver Exchange (voir Ajout d'extensions dans
Dreamweaver, page 83).
Pour utiliser la commande Rapports afin de vérifier les liens de votre site, voir Recherche de
liens rompus, externes et orphelins, page 503.
Pour exécuter des rapports afin de tester un site :
1.
Choisissez Site > Rapports.
CONSEIL
176
Si vous souhaitez uniquement exécuter un rapport d'accessibilité pour votre site,
sélectionnez Fichier > Vérifier la page > Vérifier l'accessibilité. Le rapport s'affiche
alors dans le panneau Rapports du site du groupe de panneaux Résultats.
Chapitre 4: Gestion des fichiers
La boîte de dialogue Rapports s'affiche.
2.
Choisissez une catégorie sur laquelle effectuer un rapport et le type de rapport à exécuter.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
3.
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).
Pour utiliser et enregistrer un rapport :
1.
Exécuter un rapport (voir la procédure précédente).
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.
Ces informations s'affichent dans le panneau Référence.
Test de votre site
177
■
Double-cliquez sur une ligne quelconque du rapport pour afficher le code
correspondant dans la fenêtre de document.
REMARQUE
3.
Si vous vous trouvez en mode Création, Dreamweaver passe à un affichage à
deux volets et indique le problème identifié directement dans le code.
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.
CONSEIL
Après avoir exécuté les rapports HTML, utilisez la commande Nettoyer HTML pour
corriger les erreurs HTML signalées (voir Nettoyage du code, page 647.)
Rubriques connexes
■
Rapports dans Dreamweaver, page 53
178
Chapitre 4: Gestion des fichiers
CHAPITRE 5
5
Gestion des actifs de site et
des bibliothèques
A mesure que vous développez des sites Web, vous assemblez un nombre croissant d'actifs.
Dans certains cas, vous pouvez utiliser les mêmes actifs dans plusieurs sites ou recourir à un
groupe d'actifs favoris dans tous vos sites. Macromedia Dreamweaver 8 permet de gérer les
actifs de votre site. Vous pouvez répertorier et prévisualiser certains types d'actifs inclus dans
un site, notamment les images, les animations, les couleurs, les scripts et les liens. Vous pouvez
également faire glisser un actif directement vers votre document actuel pour l'insérer dans une
page.
Dreamweaver permet également d'accéder à deux types d'actifs spéciaux : les bibliothèques et
les modèles. Les éléments de bibliothèque et les modèles sont des actifs liés : lorsqu'une
modification est apportée à un élément de bibliothèque ou à un modèle, l'ensemble des
documents contenant cet actif sont mis à jour. Les éléments de bibliothèque constituent des
éléments de conception individuels, tels que les informations de copyright d'un site ou un
logo. Les modèles permettent de définir la conception de zones plus larges (Pour plus
d'informations, voir Chapitre 11, Gestion des modèles, page 333).
Ce chapitre contient les rubriques suivantes :
A propos des éléments de bibliothèque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
Utilisation des actifs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
Création et gestion d'une liste d'actifs favoris . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
Utilisation des éléments de bibliothèque. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
A propos des éléments de bibliothèque
Une bibliothèque est un fichier Dreamweaver spécifique regroupant l'ensemble des actifs
individuels ou copies d'actifs créés en vue d'une insertion dans des pages Web. Ces actifs
présents dans une bibliothèque portent le nom d'éléments de bibliothèque. Vous pouvez
mettre à jour toutes les pages qui utilisent un élément de bibliothèque chaque fois que vous
modifiez le contenu de l'élément. Vous pouvez stocker divers types d'éléments de page dans
une bibliothèque : images, tableaux, sons, animations Flash, etc.
179
Voici un exemple de la façon dont vous pouvez utiliser un élément de bibliothèque.
Supposons que vous construisiez un site de grande taille pour une société. Cette société
souhaite que son slogan apparaisse sur chaque page du site. Or, le service marketing n'a pas
encore finalisé le texte du slogan. Si vous créez un élément de bibliothèque destiné à contenir
le slogan et utilisez cet élément sur chaque page, vous pourrez, lorsque le service de marketing
vous communiquera le slogan définitif, modifier l'élément de bibliothèque et
automatiquement mettre à jour chaque page sur laquelle il figure.
Dreamweaver stocke les éléments de la bibliothèque dans un dossier nommé Library, au sein
du dossier racine local de chaque site. Chaque site possède sa propre bibliothèque.
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 n'insère pas l'élément luimême dans la page Web mais un lien vers cet élément. 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 original.
La référence à l'élément de bibliothèque externe rend possible la mise à jour du contenu d'un
site entier en une seule fois, en modifiant l'élément de bibliothèque et en utilisant les
commandes de mise à jour du menu Modifier > Bibliothèque. Si, par la suite, vous souhaitez
apporter des modifications (texte ou image par exemple), la mise à jour de la bibliothèque
entraîne automatiquement celle de l'instance de la bibliothèque dans toutes les pages où
l'élément de bibliothèque a été inséré.
Lorsque vous créez un élément de bibliothèque comportant un élément auquel est attaché un
comportement Dreamweaver, ce dernier 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à).
R E MA R Q U E
180
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.
Chapitre 5: Gestion des actifs de site et des bibliothèques
La modification des comportements dans les éléments de bibliothèque doit respecter certaines
conditions (voir Modification d'un comportement dans un élément de bibliothèque, page 200).
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.
Rubriques connexes
■
Utilisation des éléments de bibliothèque, page 193
Utilisation des actifs
Le terme actif désigne un certain nombre d'éléments utilisés dans un site, tels qu'un fichier
d'image ou d'animation.
Vous pouvez obtenir des actifs à partir de différentes sources. Par exemple, vous pouvez créer
des actifs dans une application, telle que Macromedia Fireworks ou Macromedia 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.
Rubriques connexes
■
Création et gestion d'une liste d'actifs favoris, page 190
■
Utilisation des éléments de bibliothèque, page 193
Visualisation des actifs dans le panneau Actifs
Vous pouvez afficher et gérer les actifs dans le site actuel à l'aide du panneau Actifs. Ce dernier
présente les actifs du site associés au document actif dans la fenêtre du document.
REMARQUE
Vous devez définir un site local avant d'afficher les actifs dans le panneau Actifs. Pour
plus d'informations sur la configuration d'un site, voir Configuration d'un nouveau site
Dreamweaver, page 89.
Deux vues sont disponibles pour le panneau Actifs
La liste Site présente tous les actifs de votre site, y compris les couleurs et adresses URL
utilisées dans les documents de votre site.
La liste Favoris
affiche uniquement les actifs explicitement sélectionnés.
Utilisation des actifs
181
Dans ces deux listes, les actifs sont répartis en catégories (sur le côté gauche du panneau
Actifs). Les listes Site et Favoris sont toutes deux disponibles pour toutes les catégories d'actifs
à l'exception des modèles et éléments de bibliothèque.
REMARQUE
La plupart des fonctions du panneau Actifs peuvent être utilisées à la fois dans les listes
Site et Favoris. Toutefois, il existe quelques tâches qui ne peuvent être réalisées que
dans la liste Favoris (voir Création et gestion d'une liste d'actifs favoris, page 190).
Par défaut, les actifs d'une catégorie donnée sont répertoriés suivant leur nom dans l'ordre
alphabétique. Vous pouvez également trier les actifs suivant plusieurs autres critères ou
modifier la taille des colonnes. Vous pouvez également prévisualiser les actifs d'une catégorie
et modifier la taille de la zone d'aperçu.
Pour ouvrir le panneau Actifs :
■
Choisissez Fenêtre > Actifs
Le panneau Actifs s'affiche. La catégorie Images est sélectionnée par défaut.
Pour afficher la liste Site:
■
Dans le panneau Actifs (Fenêtre > Actifs), sélectionnez l'option Site située en haut du
panneau.
R E M A R QU E
182
Dans les catégories Modèles et Bibliothèques (sur le côté gauche du panneau
Actifs), les options Site et Favoris ne sont pas disponibles.
Chapitre 5: Gestion des actifs de site et des bibliothèques
Pour afficher la liste Favoris:
■
Dans le panneau Actifs (Fenêtre > Actifs), sélectionnez l'option Favoris en haut du
panneau.
La liste Favoris est vide tant que vous ne lui ajoutez pas explicitement des actifs.
REMARQUE
Dans les catégories Modèles et Bibliothèques (sur le côté gauche du panneau
Actifs), les options Site et Favoris ne sont pas disponibles.
Pour afficher les actifs d'une catégorie spécifique :
■
Cliquez sur l'icône appropriée sur le côté gauche du panneau Actifs (Fenêtre > Actifs).
Pour répertorier les actifs dans un ordre différent :
■
Cliquez sur l'un des en-têtes 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.
Pour modifier la largeur d'une colonne :
■
Faites glisser la ligne qui sépare deux en-têtes de colonne.
Pour prévisualiser un actif :
■
Sélectionnez l'actif dans le panneau Actifs.
La zone d'aperçu en haut du panneau affiche une prévisualisation de l'actif.
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.
Pour modifier la taille 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.
Rubriques connexes
■
Ajout d'un actif à un document, page 184
■
Sélection et édition d'actifs, page 186
Actualisation du panneau Actifs
La création de la liste Site par le panneau Actifs peut prendre quelques secondes, le panneau
devant lire le cache du site pour créer la liste.
Utilisation des actifs
183
Certaines modifications n'apparaissent pas immédiatement dans le panneau Actifs :
■
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 manuellement la liste Site :
1.
Dans le panneau Actifs (Fenêtre > Actifs), sélectionnez l'option Site en haut du panneau
Actifs pour afficher la liste Site.
2.
Cliquez sur le bouton Actualiser la liste du site en bas du panneau Actifs.
Dreamweaver crée le cache du site ou le met à jour, et le panneau Actifs est actualisé pour
afficher tous les actifs du site.
Pour reconstruire manuellement le cache du site et actualiser la liste Site :
■
Dans le panneau Actifs (Fenêtre > Actifs), 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.
Rubriques connexes
■
Sélection et édition d'actifs, page 186
■
Réutilisation d'actifs dans un autre site, page 188
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.
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).
Pour insérer un actif dans un document :
1.
184
En mode Création, placez le point d'insertion à l'endroit où afficher l'actif.
Chapitre 5: Gestion des actifs de site et des bibliothèques
2.
Dans le panneau Actifs (Fenêtre > Actifs), sélectionnez la catégorie correspondant au type
d'actif à insérer sur le côté gauche du panneau.
R E M A R QU E
3.
Sélectionnez toute catégorie autre que Modèles. Un modèle peut uniquement être
appliqué à un document entier. Il ne peut pas être inséré dans un document. Pour
plus d'informations sur les modèles, voir Chapitre 11, Gestion des modèles, page 333.
Sélectionnez Site ou Favoris en haut du panneau, puis sélectionnez l'actif à insérer.
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.
Procédez de l'une des manières 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'entête.
■
Sélectionnez l'actif dans le panneau, puis cliquez sur le bouton Insérer en bas du
panneau.
L'actif est inséré dans le document. Si l'actif est une couleur, son application commence au
niveau du point d'insertion. Tout le texte à la suite de ce point apparaît dans cette couleur.
Rubriques connexes
■
Application d'une URL à une image ou du texte à l'aide du panneau Actifs, page 186
■
Sélection et édition d'actifs, page 186
■
Réutilisation d'actifs dans un autre site, page 188
Application d'une couleur à un texte à l'aide du
panneau Actifs
Les couleurs répertoriées dans le panneau Actifs correspondent aux couleurs que vous avez
appliquées aux différents éléments du site : texte, bordures de tableau, arrière-plan, etc. La
catégorie Couleurs permet d'appliquer de façon homogène les couleurs sélectionnées à
plusieurs objets d'une même page.
Pour plus d'informations sur l'ajout de couleurs à la catégorie Couleurs, voir Ajout et
suppression d'actifs dans la liste Favoris, page 190.
Pour modifier la couleur du texte sélectionné dans un document :
1.
Sélectionnez du texte dans le document.
Utilisation des actifs
185
2.
Dans le panneau Actifs (Fenêtre > Actifs), sélectionnez la catégorie Couleurs sur le côté
gauche du panneau.
3.
Sélectionnez la couleur souhaitée.
4.
Cliquez sur le bouton Appliquer, au bas du panneau.
Rubriques connexes
■
Ajout d'un actif à un document, page 184
■
Sélection et édition d'actifs, page 186
■
Réutilisation d'actifs dans un autre site, page 188
Application d'une URL à une image ou du texte à
l'aide du panneau Actifs
Vous pouvez utiliser le panneau Actifs pour transformer le texte ou l'image sélectionnée en
lien actif.
Pour ajouter un lien à la sélection courante dans un document :
1.
Sélectionnez le texte ou l'image que vous souhaitez convertir en lien URL.
2.
Dans le panneau Actifs (Fenêtre > Actifs), sélectionnez la catégorie URL sur le côté gauche
du panneau.
3.
Sélectionnez l'URL de votre choix.
4.
Procédez de l'une des manières 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 le bouton Insérer.
Rubriques connexes
■
Ajout d'un actif à un document, page 184
■
Application d'une couleur à un texte à l'aide du panneau Actifs, page 185
■
Réutilisation d'actifs dans un autre site, page 188
Sélection et édition d'actifs
Le panneau Actifs permet de sélectionner simultanément plusieurs actifs ; il offre également
un moyen rapide pour commencer l'édition d'actifs.
186
Chapitre 5: Gestion des actifs de site et des bibliothèques
Pour sélectionner plusieurs actifs :
1.
Dans le panneau Actifs (Fenêtre > Actifs), sélectionnez un des actifs.
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.
Pour modifier un actif :
1.
Dans le panneau Actifs (Fenêtre > Actifs), effectuez l'une des opérations suivantes :
■
Double-cliquez sur l'actif.
■
Sélectionnez l'actif, puis cliquez sur le bouton Modifier en bas du panneau.
Pour certains types d'actifs tels que les images, l'édition de l'actif démarre une application
d'édition externe. Dans le cas des couleurs et des URL, l'édition des actifs permet
uniquement de modifier la valeur d'un actif dans la liste Favoris (vous ne pouvez pas
modifier les couleurs et les URL dans la liste Site). Dans le cas des modèles et des éléments
de bibliothèque, l'édition des actifs permet d'apporter des modifications à un actif au sein
de Dreamweaver.
REMARQUE
Si aucun éditeur externe ne s'ouvre pour un actif qui doit en utiliser un, choisissez
Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh),
sélectionnez la catégorie Types de fichiers/Editeurs, puis assurez-vous qu'un éditeur
externe est défini pour le type de fichier de l'actif (voir Lancement d'un éditeur externe
pour des fichiers multimédia, page 533).
2.
Modifiez les actifs suivant vos besoins.
3.
Une fois l'édition d'un actif terminée, procédez de l'une des manières suivantes :
■
Si l'actif est un actif basé sur un fichier (tout objet autre qu'une couleur ou une URL),
enregistrez-le (via l'éditeur utilisé pour le modifier), puis fermez-le.
■
Si l'actif est une URL, cliquez sur OK une fois l'édition terminée dans la boîte de
dialogue Modifier l'URL.
Utilisation des actifs
187
Si l'actif est une couleur, le sélecteur de couleur de Dreamweaver est automatiquement
fermé lorsque vous sélectionnez une couleur.
■
REMARQUE
Pour fermer le sélecteur de couleur sans sélectionner de couleur, appuyez sur la
touche Echap.
Rubriques connexes
■
Visualisation des actifs dans le panneau Actifs, page 181
■
Actualisation du panneau Actifs, page 183
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.
Pour localiser un fichier d'actif dans le panneau Fichiers :
1.
Dans le panneau Actifs (Fenêtre > Actifs), sélectionnez la catégorie correspondant au type
d'actif à insérer sur le côté gauche du panneau.
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.
R E M AR QU E
188
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.
Chapitre 5: Gestion des actifs de site et des bibliothèques
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 un fichier qui utilise cet
actif.
Pour copier des actifs de la liste Site ou Favoris du panneau Actifs vers un
autre site :
1.
Dans le panneau Actifs (Fenêtre > Actifs), sélectionnez la catégorie correspondant au type
d'actif à copier, sur le côté gauche du panneau.
2.
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfoncée (Macintosh) sur le ou les actifs à copier, sélectionnez Copier dans le site, puis
sélectionnez le nom du site de destination dans le sous-menu (le sous-menu répertorie tous
les sites définis).
REMARQUE
Dans la liste Favoris, vous pouvez copier un dossier Favoris ainsi que des actifs
individuels. Pour plus d'informations sur les dossiers Favoris, voir Regroupement
d'actifs dans un dossier Favoris, page 192.
Les actifs sont copiés dans le site spécifié, aux emplacements correspondant à leurs
emplacements dans le site actuel. Dreamweaver crée des dossiers dans la hiérarchie du site
cible suivant les besoins. Les actifs sont également ajoutés à la liste Favoris du site spécifié.
Lorsque vous ouvrez un document dans le site cible, le panneau Actifs bascule sur ce site et
affiche l'actif copié.
REMARQUE
Si l'actif copié est une couleur ou une URL, il apparaît uniquement dans la liste Favoris
de l'autre site et non dans la liste Site de ce dernier. Dans la mesure où il n'existe pas de
fichier correspondant à la couleur ou à l'URL, aucun fichier n'est copié vers l'autre site.
Rubriques connexes
■
Visualisation des actifs dans le panneau Actifs, page 181
■
Actualisation du panneau Actifs, page 183
■
Sélection et édition d'actifs, page 186
Utilisation des actifs
189
Création et gestion d'une liste d'actifs
favoris
La liste Site du panneau Actifs affichant tous les actifs reconnus dans le site, elle 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 et suppression d'actifs dans la liste 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.
Notez que 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.
Pour ajouter des actifs à la liste Favoris, procédez de l'une des manières
suivantes :
■
Sélectionnez un ou plusieurs actifs dans la liste Site du panneau Actifs, puis cliquez sur le
bouton Ajouter aux favoris situé en bas du panneau.
■
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.
190
Chapitre 5: Gestion des actifs de site et des bibliothèques
Dreamweaver ignore les fichiers n'appartenant pas à une catégorie dans le 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 à la catégorie de favoris
appropriée.
Notez que 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.
Notez également que seuls les éléments appartenant aux catégories du panneau Actifs
peuvent être ajoutés à la liste Favoris.
Pour ajouter une nouvelle couleur ou une nouvelle URL à la liste Favoris :
1.
Dans le panneau Actifs (Fenêtre > Actifs), sélectionnez la catégorie Couleurs URL sur le
côté gauche du panneau.
2.
Sélectionnez l'option Favoris en haut du panneau pour afficher la liste Favoris.
3.
Cliquez sur le bouton Nouvelle couleur ou Nouvelle URL en bas du panneau.
4.
Effectuez l'une des actions suivantes :
■
Sélectionnez une couleur dans le sélecteur de couleur et donnez-lui un nom si vous le
souhaitez (voir Création d'un surnom pour un actif favori, page 192).
Pour quitter 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 (pour
plus d'informations sur l'utilisation du sélecteur de couleur, voir Utilisation des
couleurs, page 393).
■
Entrez une URL et un surnom dans la boîte de dialogue Ajouter URL, puis cliquez sur
OK.
Pour supprimer des actifs de la liste Favoris :
1.
Dans le panneau Actifs (Fenêtre > 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 au bas du panneau.
Les actifs sont supprimés de la liste Favoris, mais figurent toujours dans la liste Site. Si
vous supprimez un dossier Favoris, le dossier et tous les actifs qu'il contient sont
supprimés de la liste Favoris.
Rubriques connexes
■
Visualisation des actifs dans le panneau Actifs, page 181
■
Création d'un surnom pour un actif favori, page 192
Création et gestion d'une liste d'actifs favoris
191
Création d'un surnom pour un actif favori
Vous pouvez attribuer des surnoms aux actifs de la liste Favoris. Le surnom est affiché au lieu
de la valeur ou du nom du fichier d'actif. Par exemple, si vous avez une couleur nommée
#999900, vous pouvez utiliser un surnom plus descriptif tel que CouleurArrièrePlanPage ou
CouleurTexteImportant.
Vous pouvez attribuer des surnoms aux actifs de la liste Favoris dans le panneau Actifs. Dans la
liste Site, les actifs sont répertoriés suivant leur nom de fichier réel (ou valeur, dans le cas de
couleurs et d'URL).
Pour attribuer un surnom à un actif favori :
1.
Dans le panneau Actifs (Fenêtre > Actifs), sélectionnez la catégorie contenant votre actif sur
le côté gauche du panneau.
2.
Sélectionnez l'option Favoris en haut du panneau pour afficher la liste Favoris.
3.
Procédez de l'une des manières suivantes :
4.
■
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.
Tapez un surnom pour l'actif, puis appuyez sur la touche Entrée (Windows) ou Retour
(Macintosh).
Le surnom apparaît dans la colonne Pseudonyme.
Rubriques connexes
■
Visualisation des actifs dans le panneau Actifs, page 181
■
Ajout et suppression d'actifs dans la liste Favoris, page 190
Regroupement d'actifs dans un dossier Favoris
Vous pouvez classer les actifs dans des dossiers dans votre liste Favoris du panneau Actifs. Par
exemple, si vous avez un ensemble d'images que vous utilisez sur de nombreuses pages de
catalogue d'un site de commerce électronique, vous pouvez les grouper dans un dossier
nommé ImagesCatalogue.
R E MA R Q U E
192
Le fait de placer un actif dans un dossier Favoris ne modifie pas l'emplacement du fichier
d'actif sur le disque.
Chapitre 5: Gestion des actifs de site et des bibliothèques
Pour créer un dossier Favoris :
1.
Dans le panneau Actifs (Fenêtre > Actifs), sélectionnez l'option Favoris en haut du
panneau.
2.
Cliquez sur le bouton Nouveau dossier Favoris situé au bas du panneau.
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.
Rubriques connexes
■
Visualisation des actifs dans le panneau Actifs, page 181
■
Ajout et suppression d'actifs dans la liste Favoris, page 190
■
Création d'un surnom pour un actif favori, page 192
Utilisation des éléments de bibliothèque
Les bibliothèques permettent de stocker les éléments de pages (images, texte et autres objets)
que vous souhaitez réutiliser ou mettre à jour fréquemment sur votre site Web. Ces éléments
portent le nom d'éléments de bibliothèque.
Rubriques connexes
■
A propos des éléments de bibliothèque, page 179
Création d'un élément de 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.
Il peut s'avérer utile d'enregistrer une image d'un élément de bibliothèque. Par exemple, vous
pouvez enregistrer une balise img complète dans un élément de bibliothèque, ce qui vous
permettrait de facilement changer le texte alt de l'image, ou même son attribut src, sur tout
le site (n'utilisez pas cette technique pour modifier les attributs de largeur et de hauteur
d'une image, sauf si vous utilisez également un éditeur d'image pour changer la taille réelle de
l'image).
Utilisation des éléments de bibliothèque
193
Pour 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.
Procédez de l'une des manières suivantes :
3.
■
Faites glisser la sélection dans la catégorie Bibliothèque du panneau Actifs (Fenêtre >
Actifs).
■
Cliquez sur le bouton Nouvel élément de la bibliothèque au bas de la catégorie
Bibliothèque du panneau Actifs (Fenêtre > Actifs).
■
Choisissez Modifier > Bibliothèque > Ajouter un objet dans la bibliothèque.
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.
Pour créer 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 (Fenêtre > Actifs), sélectionnez la catégorie Bibliothèque sur le côté
gauche du panneau.
3.
Cliquez sur le bouton Nouvel élément de bibliothèque au bas du panneau Actifs.
Un nouvel élément sans nom est ajouté à la liste du panneau.
4.
Sélectionnez l'élément et entrez son nom, puis appuyez sur Entrée (Windows) ou sur
Retour (Macintosh).
Rubriques connexes
■
Modification d'un élément de bibliothèque, page 195
■
Définition des préférences de couleur de surbrillance des éléments de bibliothèque, page 198
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.
Pour insérer un élément de bibliothèque dans un document :
1.
194
Placez le point d'insertion dans la fenêtre de document.
Chapitre 5: Gestion des actifs de site et des bibliothèques
2.
Dans le panneau Actifs (Fenêtre > Actifs), sélectionnez la catégorie Bibliothèque sur le côté
gauche du panneau.
3.
Procédez de l'une des manières suivantes :
■
Faites glisser un élément de bibliothèque du panneau Actifs vers la fenêtre de
document.
C ON S E I L
■
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, puis cliquez sur le bouton Insérer en bas du
panneau.
Rubriques connexes
■
Création d'un élément de bibliothèque, page 193
■
Modification des propriétés d'un élément de bibliothèque, page 199
■
Rendre des éléments de bibliothèque modifiables dans un document, page 200
Modification d'un élément de bibliothèque
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.
D'autres types de modifications peuvent être apportées aux éléments de bibliothèque : vous
pouvez les renommer pour rompre leur lien avec des documents ou modèles, supprimer des
éléments de la bibliothèque du site et recréer un élément de bibliothèque manquant.
R E MA R Q U E
Les panneaux Styles CSS ne sont pas disponibles lorsque vous modifiez des éléments
de bibliothèque : en effet, ceux-ci ne peuvent contenir que des éléments body, alors que
le code associé aux feuilles de style CSS est inséré dans la section head du 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.
Pour modifier un élément de la bibliothèque :
1.
Dans le panneau Actifs (Fenêtre > Actifs), sélectionnez la catégorie Bibliothèque sur le côté
gauche du panneau.
Utilisation des éléments de bibliothèque
195
2.
Sélectionnez un élément de bibliothèque.
Un aperçu de l'élément de bibliothèque s'affiche en haut du panneau Actifs (vous ne
pouvez rien modifier dans l'aperçu).
3.
Procédez de l'une des manières suivantes :
■
Cliquez sur le bouton Modifier, au bas du panneau.
■
Double-cliquez sur l'élément de bibliothèque.
Dreamweaver ouvre une nouvelle fenêtre permettant de modifier l'élément de
bibliothèque. Cette fenêtre ressemble beaucoup à la fenêtre de document, mais son mode
Création possède un arrière-plan gris pour indiquer que vous modifiez un élément de
bibliothèque et non pas un document.
4.
Modifiez l'élément de la bibliothèque, puis enregistrez les modifications.
5.
Dans la boîte de dialogue qui s'affiche, choisissez de mettre à jour ou non les documents
du site local qui utilisent l'élément de bibliothèque modifié :
■
Cliquez sur Oui pour mettre à jour tous les documents du site local qui utilisent
l'élément modifié ;
■
cliquez sur Non pour ne mettre à jour aucun document jusqu'à ce que vous utilisiez
Modifier > Bibliothèque > Mettre à jour la page en cours ou Mettre à jour les pages.
Pour mettre à jour le 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.
Pour mettre à jour le site entier ou tous les documents utilisant un élément de
bibliothèque particulier :
1.
Choisissez Modifier > Bibliothèque > Mettre à jour les pages.
La boîte de dialogue Mettre à jour les pages s'affiche.
2.
Dans le menu déroulant Regarder dans, procédez de l'une des manières suivantes :
■
Choisissez Site entier, puis sélectionnez le nom du site dans le menu déroulant
adjacent.
Toutes les pages du site sélectionné sont mises à jour en fonction de la version actuelle
de tous les éléments de bibliothèque.
■
Choisissez Fichiers utilisant, puis sélectionnez un nom d'élément de bibliothèque dans
le menu déroulant adjacent.
Cette opération met à jour toutes les pages du site en cours qui utilisent l'élément de
bibliothèque sélectionné.
196
Chapitre 5: Gestion des actifs de site et des bibliothèques
3.
Sous Mettre à jour, assurez-vous que l'option Eléments de bibliothèque est activée.
C ON S E I L
4.
Pour mettre les modèles à jour en même temps, vérifiez que Modèles est également
sélectionné. Pour plus d'informations, voir Ouverture d'un modèle à modifier,
page 368.
Cliquez sur Démarrer.
Dreamweaver met à jour les fichiers indiqués. Si vous avez sélectionné l'option Afficher le
journal, Dreamweaver affiche des informations sur les fichiers qu'il essaie de mettre à jour
et précise si la mise à jour a réussi.
Pour renommer un élément de la bibliothèque :
1.
Dans le panneau Actifs (Fenêtre > Actifs), sélectionnez la catégorie Bibliothèque sur le côté
gauche du panneau.
2.
Sélectionnez l'élément de bibliothèque à renommer, marquez une pause, puis cliquez à
nouveau.
3.
Lorsque le nom devient modifiable, tapez un nouveau nom.
REMARQUE
Cette méthode fonctionne de la même façon que celle utilisée dans l'Explorateur
Windows ou dans le Finder (Macintosh). Comme avec l'Explorateur Windows et le
Finder, vous devez attendre un bref instant entre les deux clics. Ne double-cliquez
pas sur le nom, car cela ouvrirait l'élément de bibliothèque pour modification.
4.
Cliquez ailleurs ou appuyez sur Entrée (Windows) ou sur Retour (Macintosh).
5.
Dreamweaver vous demande si vous voulez mettre à jour les documents qui utilisent
l'élément :
■
Pour mettre à jour tous les documents du site qui utilisent l'élément, cliquez sur
Mettre à jour.
■
Pour ne mettre à jour aucun des documents qui utilisent l'élément, cliquez sur Ne pas
mettre à jour.
Pour supprimer un élément d'une bibliothèque :
1.
Dans le panneau Actifs (Fenêtre > Actifs), sélectionnez la catégorie Bibliothèque sur le côté
gauche du panneau.
2.
Sélectionnez l'élément de bibliothèque à supprimer.
Utilisation des éléments de bibliothèque
197
3.
Procédez de l'une des manières suivantes :
■
Cliquez sur le bouton Supprimer en bas du panneau, puis confirmez l'opération.
■
Appuyez sur la touche Suppr, puis confirmez que vous voulez supprimer le modèle.
A T T E NT I ON
Attention : si vous supprimez un élément de bibliothèque, vous ne pourrez pas utiliser
Annuler pour le récupérer. Vous pourrez cependant le recréer, comme expliqué dans
la prochaine procédure.
Dreamweaver supprime l'élément de la bibliothèque mais ne modifie pas le contenu des
documents qui l'utilisent.
Pour recréer 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).
Rubriques connexes
Création d'un élément de bibliothèque, page 193
■
■
Rendre des éléments de bibliothèque modifiables dans un document, page 200
■
Modification d'un comportement dans un élément de bibliothèque, page 200
Définition des préférences de couleur de 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 des éléments de bibliothèque en définissant des préférences de
surbrillance.
Pour modifier la couleur de surbrillance des éléments de bibliothèque :
1.
Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
La boîte de dialogue Préférences s'affiche.
2.
Sélectionnez la catégorie Surbrillance dans la liste de gauche.
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).
Pour plus d'informations sur l'utilisation du sélecteur de couleur, consultez la section
Utilisation des couleurs, page 393.
198
Chapitre 5: Gestion des actifs de site et des bibliothèques
4.
Activez l'option Afficher pour afficher la couleur de surbrillance des éléments de
bibliothèque dans la fenêtre de document.
5.
Cliquez sur OK.
Pour afficher les couleurs de surbrillance dans la fenêtre de document :
■
Choisissez Affichage > Assistances visuelles > Eléments invisibles.
Les couleurs de surbrillance apparaissent dans la fenêtre de document uniquement lorsque
l'option Affichage > Assistances visuelles > Eléments invisibles est activée et que les
options appropriées sont activées dans les préférences de surbrillance.
Rubriques connexes
■
Création d'un élément de bibliothèque, page 193
■
Modification d'un élément de bibliothèque, page 195
■
Modification des propriétés d'un élément de bibliothèque, page 199
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.
Pour modifier les propriétés d'un élément de bibliothèque :
1.
Sélectionnez un élément de bibliothèque dans un document.
2.
Cliquez sur le bouton correspondant à votre choix dans l'inspecteur Propriétés (Windows
> Propriétés).
Pour plus d'informations, cliquez sur l'icône Aide de l'inspecteur Propriétés.
Rubriques connexes
■
Création d'un élément de bibliothèque, page 193
■
Insertion d'un élément de bibliothèque dans un document, page 194
■
Définition des préférences de couleur de surbrillance des éléments de bibliothèque, page 198
Utilisation des éléments de bibliothèque
199
Rendre des éléments de bibliothèque modifiables
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 ne peut plus être mise à jour quand l'élément de bibliothèque est modifié.
Pour rendre un élément de la bibliothèque modifiable :
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).
L'instance sélectionnée de l'élément de bibliothèque perd sa surbrillance (si elle est visible)
et ne peut plus être mise à jour lorsque l'élément de bibliothèque d'origine change.
Rubriques connexes
■
Création d'un élément de bibliothèque, page 193
■
Insertion d'un élément de bibliothèque dans un document, page 194
■
Modification d'un élément de bibliothèque, page 195
■
Modification des propriétés d'un élément de bibliothèque, page 199
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 voulus 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.
Pour plus d'informations sur les comportements, voir Utilisation des comportements JavaScript,
page 555.
Pour modifier un comportement dans un élément de la bibliothèque :
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.
200
Chapitre 5: Gestion des actifs de site et des bibliothèques
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 les modifications nécessaires et cliquez sur
OK.
6.
Dans le panneau Actifs (Fenêtre > Actifs), sélectionnez la catégorie Bibliothèque sur le côté
gauche du panneau.
7.
Notez précisément le nom de l'élément de bibliothèque d'origine ; sélectionnez l'élément
de bibliothèque d'origine, puis cliquez sur le bouton Supprimer situé au bas du panneau.
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é.
Veillez à respecter la même orthographe et la même 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 la boîte de dialogue qui s'affiche, sélectionnez Fichiers utilisant dans le menu
déroulant Regarder dans.
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 effectuées, cliquez sur Fermer pour sortir de la boîte de dialogue
Mettre à jour les pages.
Rubriques connexes
■
Création d'un élément de bibliothèque, page 193
■
Insertion d'un élément de bibliothèque dans un document, page 194
■
Modification d'un élément de bibliothèque, page 195
Utilisation des éléments de bibliothèque
201
202
Chapitre 5: Gestion des actifs de site et des bibliothèques
CHAPITRE 6
6
Gestion des sites Contribute
avec Dreamweaver
ContributeMacromedia regroupe les fonctions d'un navigateur Web et d'un éditeur de pages
Web de base. Il permet à vos collègues et à vos clients de parcourir une page d'un site que vous
avez créé, ainsi que de modifier ou de mettre à jour cette page s'ils disposent des droits
appropriés. 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 site Contribute peuvent restreindre les opérations effectuées par les
utilisateurs ordinaires (non-administrateurs) sur un site.
REMARQUE
Ce chapitre 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, voir Utilisation de Contribute.) Vous pouvez également configurer
une connexion à un site Contribute en utilisant Macromedia Dreamweaver 8 qui permet, à
vous ou à un autre utilisateur, de modifier les fichiers dans le site comme dans tout autre site
Dreamweaver. Ceci peut être utile pour ceux qui souhaitent se connecter à votre site
Contribute à l'aide de Dreamweaver plutôt que de Contribute. Par exemple, votre concepteur
de site souhaiterait se connecter à votre site Contribute mais souhaiterait que toutes les
fonctions de modification soient disponibles dans Dreamweaver.
203
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 les services CPS sont activés, il communique directement
avec ces derniers. Ceci permet à Dreamweaver d'hériter de certaines fonctionnalités des
services CPS (restauration des fichiers et consignation des événements, par exemple).
Ce chapitre contient les sections suivantes :
A propos de la gestion des sites Contribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Préparation d'un site à utiliser avec Contribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Administration d'un site Contribute à l'aide de Dreamweaver . . . . . . . . . . . . . . . . . .211
Gestion des fichiers Contribute dans Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . 213
Dépannage d'un site Contribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
A propos de la gestion des sites
Contribute
Vous pouvez utiliser Dreamweaver pour vous connecter à un site Contribute et modifier les
fichiers du site comme vous le feriez dans un site Dreamweaver. La plupart des options
Dreamweaver fonctionnent avec un site Contribute comme avec tout autre site. Seuls
quelques aspects de l'utilisation des fichiers dans un site Contribute diffèrent.
Structure du site et conception de pages pour un site
Contribute
Pour que votre site Web puisse être modifié par les utilisateurs de Contribute, vous devez créer
une structure de site appropriée.
Pour ce faire, vous devez créer les dossiers destinés au stockage des pages des utilisateurs de
Contribute, réaliser des pages d'index pour les dossiers et ajouter des éléments de navigation
de base à ces pages. Vous pouvez concevoir des dossiers spécifiques aux utilisateurs, dans
lesquels ils pourront s'entraîner, et créer des feuilles de style CSS pour définir les styles de
chaque page ou dossier. Une partie des opérations de configuration peuvent être effectuées
dans Contribute, mais il est plus facile de définir un site dans Dreamweaver.
204
Chapitre 6: Gestion des sites Contribute avec Dreamweaver
En outre, vous pouvez réaliser des modèles que les utilisateurs de Contribute peuvent utiliser
pour la création de nouvelles pages (voir Création de modèles pour un site Contribute,
page 353).
Les suggestions suivantes peuvent vous aider à créer un site auxquels les utilisateurs de
Contribute peuvent facilement contribuer :
■
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.
Pour plus d'informations, voir Activation de l'accès aux modèles sans l'accès au dossier racine
pour les utilisateurs de Contribute, page 214.
■
Lorsque vous créez votre structure de dossiers, ajoutez des pages d'index aux dossiers 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 pouvez 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 réaliser une page de procès-verbal
pour une réunion donnée, désignée par un lien depuis cette page. La nouvelle page est
automatiquement créée dans le dossier comptes_rendus.
■
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.
■
Attribuez un nom descriptif à vos styles CSS.
Si les utilisateurs de Contribute qui travaillent sur votre site 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 que les utilisateurs de Contribute ne puissent pas utiliser un style CSS, modifiez le
nom du style de sorte qu'il commence par « mmhide_ » (sans guillemets).
A propos de la gestion des sites Contribute
205
Par exemple, si vous utilisez un style nommé Justifié_droite dans une page mais que vous
ne souhaitez pas que les utilisateurs de Contribute puissent utiliser ce style, renommez-le
en mmhide_Justifié_droite.
R E M A R QU E
■
Vous devez ajouter mmhide_ au nom du style en mode Code et non dans le panneau
CSS.
Utilisez des balises CSS plutôt que des balises HTML.
Contribute reconnaît les styles CSS et permet aux utilisateurs de les appliquer.
■
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 simple 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.
Rubriques connexes
■
Chapitre 2, Configuration d'un site Dreamweaver, page 85
■
Création de nouveaux documents, page 100
■
Utilisation des feuilles de style en cascade pour mettre un texte en forme, page 443
■
Utilisation des inclusions côté serveur, page 666
Connexion à un site pour la compatibilité avec
Contribute
Dans Dreamweaver, vous pouvez vous connecter à un site Contribute existant et modifier les
fichiers du site comme dans tout site Dreamweaver (Configuration d'un nouveau site
Dreamweaver, page 89). Lorsque vous vous connectez à un site défini en tant que site
Contribute (qui dispose déjà d'un administrateur), Dreamweaver vous invite à activer la
compatibilité avec Contribute.
Si vous préparez un site Dreamweaver existant pour les utilisateurs de Contribute, vous devez
activer la compatibilité avec Contribute de manière explicite pour utiliser les fonctions
Contribute. Dreamweaver n'affiche pas de message d'invite. Pour plus d'informations, voir
Préparation d'un site à utiliser avec Contribute, page 210.
206
Chapitre 6: Gestion des sites Contribute avec Dreamweaver
Dreamweaver vous permet de vous connecter à un site distant, y compris un site Contribute,
de différentes façons. Cependant, 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 ou de Microsoft Visual
SourceSafe, vous ne pouvez pas activer la compatibilité avec Contribute, car ces systèmes
de commande source ne sont pas compatibles avec les Design Notes et les systèmes
d'archivage et d'extraction utilisés par Dreamweaver 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
pour 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.
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.
REMARQUE
Si vous utilisez la commande Placer dans un site Contribute, Dreamweaver archive
automatiquement le fichier, puis l'extrait à nouveau, afin de réduire les risques de conflits
entre vos modifications et celles d'un autre utilisateur.
L'extraction d'un fichier d'un site Contribute se déroule de la même façon que pour un autre
site.
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 afin
que les autres utilisateurs sachent qui a archivé le fichier et à quel moment. Pour plus
d'informations sur les copies de sauvegarde automatiques, voir Activation de l'accès aux modèles
sans l'accès au dossier racine pour les utilisateurs de Contribute, page 214.
A propos de la gestion des sites Contribute
207
Rubriques connexes
■
Archivage et extraction de fichiers, page 149
■
Préparation d'un site à utiliser avec Contribute, page 210
Autorisations de fichiers et de dossiers Contribute sur
le serveur
Contribute offre la possibilité de gérer les autorisations de fichiers et de dossiers pour chaque
rôle utilisateur que vous définissez. Pour plus d'informations, voir la section Administration de
Contribute. Ces autorisations n'affectent pas les utilisateurs de Dreamweaver, mais Contribute
applique ces autorisations aux utilisateurs de Contribute.
Néanmoins, Contribute ne permet pas de gérer les autorisations de lecture et d'écriture sousjacentes attribuées aux fichiers et aux dossiers par le serveur. Vous pouvez gérer ces
autorisations directement sur le serveur.
Les rôles utilisateur de Contribute sont comme superposés aux autorisations de lecture et
d'écriture du serveur. Par exemple, si un utilisateur ne dispose pas d'autorisation en écriture
sur un dossier du serveur, il ne peut pas enregistrer ce dossier même s'il est membre d'un rôle
qui peut, selon les autorisations Contribute, écrire dans ce dossier.
Si un utilisateur de Contribute ne dispose pas de droit d'accès en lecture sur le serveur pour un
fichier donné, 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, 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, voir Activation de l'accès aux modèles sans l'accès au dossier racine pour les
utilisateurs de Contribute, page 214 pour fournir les modèles aux utilisateurs.
Fichiers spéciaux Contribute
Contribute utilise divers fichiers spéciaux qui ne sont pas destinés à être consultés par les
visiteurs du site. Parmi ces fichiers, citons :
208
Chapitre 6: Gestion des sites Contribute avec Dreamweaver
■
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 (voir Activation de
l'accès aux modèles sans l'accès au dossier racine pour les utilisateurs de Contribute, page 214) ;
■
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 Contribute 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
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 pour éviter que les visiteurs ne
voient les fichiers des dossiers commençant par un souligné, voir le chapitre traitant de
la sécurité des sites Web dans Utilisation de Contribute.
Parfois, vous devrez supprimer manuellement d'autres fichiers Contribute spéciaux. 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.
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. Pour plus d'informations sur la suppression d'un fichier de verrouillage, voir
Déverrouillage d'un fichier dans un site Contribute, page 215.
A propos de la gestion des sites Contribute
209
Préparation d'un site à utiliser avec
Contribute
Avant de pouvoir utiliser Dreamweaver pour la gestion d'un site Contribute, vous devez
activer la compatibilité avec Contribute . En fonction du site auquel vous vous connectez,
vous serez peut-être invité automatiquement à activer la compatibilité avec Contribute .
REMARQUE
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.
Pour activer la compatibilité avec Contribute pour un site Dreamweaver défini :
1.
Choisissez Site > Gérer les sites.
La boîte de dialogue Gérer les sites s'affiche.
2.
Sélectionnez un site, puis cliquez sur Modifier.
La boîte de dialogue Définition du site s'ouvre.
3.
Cliquez sur l'onglet Avancé.
4.
Sélectionnez la catégorie Contribute dans la liste de gauche.
5.
Sélectionnez l'option Activer la compatibilité de Contribute et renseignez la boîte de
dialogue.
Pour plus d'informations, cliquez sur le bouton Aide.
6.
Cliquez sur OK pour fermer la boîte de dialogue Définition du site.
7.
Cliquez sur Terminé pour fermer la boîte de dialogue Gérer les sites.
Rubriques connexes
■
Connexion à un site pour la compatibilité avec Contribute, page 206
210
Chapitre 6: Gestion des sites Contribute avec Dreamweaver
Administration d'un site Contribute à
l'aide de Dreamweaver
Après avoir activé la compatibilité avec Contribute (voir Préparation d'un site à utiliser avec
Contribute, page 210), 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 effectuer les opérations suivantes
:
■
modifier les 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 Dreamweaver exporté.
Pour exporter les informations de site à utiliser avec Dreamweaver, voir Importation
et exportation de sites, page 147.
C ON S E I L
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 (voir Structure du site et conception de pages pour un
site Contribute, page 204), ainsi que les modèles et les feuilles de style CSS
nécessaires au site (voir Création de modèles pour un site Contribute, page 353).
Pour administrer un site Web Contribute dans Dreamweaver :
1.
Choisissez Site > Gérer les sites.
La boîte de dialogue Gérer les sites s'affiche.
2.
Sélectionnez un site, puis cliquez sur Modifier.
Administration d'un site Contribute à l'aide de Dreamweaver
211
La boîte de dialogue Définition du site s'ouvre.
3.
Cliquez sur l'onglet Avancé.
4.
Sélectionnez la catégorie Contribute dans la liste de gauche.
5.
Cliquez sur le bouton Administrer le site dans Contribute.
REMARQUE
6.
Ce bouton s'affiche uniquement si vous avez activé la compatibilité avec Contribute.
Pour plus d'informations sur la façon d'activer cette option, voir Préparation d'un site
à utiliser avec Contribute, page 210.
Si nécessaire, tapez le mot de passe administrateur, puis cliquez sur OK.
La boîte de dialogue Administration du site Web s'affiche.
7.
Procédez de l'une des manières suivantes :
■
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
le bouton Edit Role Settings (Modifier les paramètres du 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 le bouton Envoyer la clé de connexion, puis renseignez
l'Assistant de connexion.
C ON S E I L
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 Utilisation de Contribute.
8.
Cliquez sur Fermer pour fermer la boîte de dialogue Administration du site Web.
9.
Cliquez sur OK pour fermer la boîte de dialogue Définition du site.
10. Cliquez
sur Terminé pour fermer la boîte de dialogue Modifier les sites.
Rubriques connexes
■
Gestion des fichiers Contribute dans Dreamweaver, page 213
212
Chapitre 6: Gestion des sites Contribute avec Dreamweaver
Gestion des fichiers Contribute dans
Dreamweaver
La plupart des options Dreamweaver fonctionnent avec un site Contribute comme 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.
Cette section décrit les aspects de l'utilisation des fichiers dans un site Contribute qui diffèrent
des autres sites.
Pour plus d'informations sur le transfert de fichiers depuis et vers un site Contribute, voir
Transfert de fichiers depuis et vers un site Contribute, page 207. Pour plus d'informations sur les
fichiers spéciaux Contribute, voir Fichiers spéciaux Contribute, page 208.
REMARQUE
Un administrateur de Contribute peut associer des utilisateurs à des rôles, et peut
spécifier les actions accessibles aux différents rôles. Lorsque vous gérez les fichiers d'un
site Contribute dans Dreamweaver, les restrictions liées au rôle ne s'appliquent pas à
vous ; les seules restrictions qui vous concernent sont les autorisations de lecture et
d'écriture sur le serveur. Pour plus d'informations sur les différents types d'autorisations,
voir Autorisations de fichiers et de dossiers Contribute sur le serveur, page 208.
Suppression, déplacement ou changement de nom
d'un fichier distant d'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 les anciennes versions du fichier. Si vous décidez de les
conserver, Dreamweaver enregistre également une copie de la version actuelle 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.
Pour supprimer un fichier distant :
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).
Gestion des fichiers Contribute dans Dreamweaver
213
Une boîte de dialogue s'affiche vous demandant de confirmer la suppression du fichier.
2.
3.
Si l'option Supprimer les versions de restauration s'affiche dans la boîte de dialogue de
confirmation, procédez de l'une des manières suivantes :
■
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.
Cliquez sur Oui pour supprimer le fichier.
Le fichier est supprimé. Si vous avez choisi de supprimer les versions précédentes, elles
sont également supprimées. Si vous avez choisi de ne pas les supprimer, une copie de la
version actuelle est enregistrée dans le dossier _baks en tant que nouvelle révision du
fichier.
Rubriques connexes
■
Activation de l'accès aux modèles sans l'accès au dossier racine pour les utilisateurs de
Contribute, page 214
■
Déverrouillage d'un fichier dans un site Contribute, page 215
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. Pour plus d'informations, voir Autorisations de fichiers et de dossiers
Contribute sur le serveur, page 208.
Lorsque vous définissez un site, 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. Il est
également recommandé d'accorder aux utilisateurs un accès en lecture seule au dossier /
Templates, sur le serveur.
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.
Pour que les utilisateurs de Contribute puissent utiliser les modèles sans
disposer de droits d'accès en lecture au dossier racine du site principal :
1.
214
Définissez le site Contribute afin que le dossier racine soit le dossier qui s'affiche en tant
que racine pour les utilisateurs.
Chapitre 6: Gestion des sites Contribute avec Dreamweaver
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. Pour plus d'informations sur les liens
relatifs à la racine du site, voir Description des emplacements et chemins d'accès des documents,
page 474.
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.
Déverrouillage d'un fichier dans un site Contribute
Il peut arriver qu'un fichier distant d'un site Contribute apparaisse comme étant extrait mais
qu'il ne soit pas vraiment verrouillé sur l'ordinateur de l'utilisateur. Dans ce cas, déverrouillez
le fichier pour que les utilisateurs puissent le modifier.
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 Contribute le modifie, plusieurs
utilisateurs risquent de modifier ce fichier en même temps.
Pour déverrouiller un fichier extrait :
1.
Procédez de l'une des manières 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.
Gestion des fichiers Contribute dans Dreamweaver
215
Suivi des événements
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.
REMARQUE
CPS est activé avec Contribute. Pour plus d'informations, voir Administration de
Contribute.
Pour procéder au suivi des événements :
■
Activez les fonctionnalités de compatibilité Contribute dans Dreamweaver.
Pour plus d'informations, voir Préparation d'un site à utiliser avec Contribute, page 210.
Pour afficher le journal des événements :
■
Activez la console d'administration CPS.
Pour plus d'informations, voir Administration de Contribute.
Pour arrêter le suivi des événements :
■
Désactivez les fonctionnalités de compatibilité de Contribute.
Dépannage d'un site Contribute
Si vous rencontrez un problème avec un site Contribute, reportez-vous aux rubriques ci-après
pour obtenir des informations sur la résolution du problème :
■
Pour les problèmes de connexion à un site Contribute, voir Dépannage des problèmes de
connexion pour un site Contribute, page 217.
■
Pour les problèmes d'utilisation des outils d'administration, voir Dépannage des outils
d'administration de Contribute, page 217.
Pour plus d'informations de dépannage, consultez la section consacrée au dépannage dans la
section Administration de Contribute.
216
Chapitre 6: Gestion des sites Contribute avec Dreamweaver
Dépannage des problèmes de connexion pour un site
Contribute
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.
Pour vérifier une connexion 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 d'administration de Contribute
Si les outils d'administration ne fonctionnent pas correctement, cela peut être dû au
dossier _mm .
Pour vérifier le dossier _mm :
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, voir la section Administration de Contribute.
Rubriques connexes
■
Dépannage des problèmes de connexion pour un site Contribute, page 217
Dépannage d'un site Contribute
217
218
Chapitre 6: Gestion des sites Contribute avec Dreamweaver
3
PARTIE 3
Mise en forme des pages
Créez des mises en page sophistiquées à l'aide des outils de création visuelle
de Macromedia Dreamweaver 8.
Cette partie du manuel contient les chapitres suivants :
Chapitre 7 : Mise en forme des pages avec les styles CSS. . . . . 221
Chapitre 8 : Présentation de contenu à l'aide de tableaux . . . . . 261
Chapitre 9 : Mise en forme des pages avec le mode
Mise en forme. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289
Chapitre 10 : Utilisation de cadres. . . . . . . . . . . . . . . . . . . . . . . . . . . 311
Chapitre 11 : Gestion des modèles . . . . . . . . . . . . . . . . . . . . . . . . . 333
219
CHAPITRE 7
7
Mise en forme des pages
avec les styles CSS
Macromedia Dreamweaver 8 vous permet d'effectuer la mise en forme d'une page à l'aide de
styles CSS. Vous pouvez insérer des balises div manuellement et leur appliquer des styles de
positionnement CSS ou utiliser les calques Dreamweaver pour réaliser votre mise en forme.
Dans Dreamweaver, un calque est un élément de page HTML (une balise div ou autre)
auquel une position absolue est attribuée.
REMARQUE
Dreamweaver considère comme des calques toutes les balises div dotées d'une
position absolue, même si vous ne les avez pas créées à l'aide de l'outil de dessin
Calque.
CONSEIL
Vous pouvez utiliser un fichier de conception de Dreamweaver comme point de départ
pour la mise en forme CSS. Sélectionnez un fichier dans la catégorie Conceptions de
page (CSS) de la boîte de dialogue Nouveau document (voir Création d'un document
basé sur un fichier de conception Dreamweaver, page 101).
Que vous utilisiez des styles CSS, des tableaux ou des cadres pour la mise en forme de vos
pages, Dreamweaver est muni de règles et de grilles pour vous guider. Dreamweaver dispose
également d'une fonction de tracé de l'image que vous pouvez utiliser pour recréer la
conception d'une page précédemment réalisée dans une application graphique.
REMARQUE
Si vous n'avez pas l'habitude d'utiliser des calques et des feuilles de style en cascade
(CSS), mais que vous maîtrisez l'utilisation de tableaux, préférez les tableaux ou le mode
Mise en forme pour effectuer la mise en forme de vos pages (voir Présentation de
contenu à l'aide de tableaux, page 261 et Mise en forme des pages avec le mode Mise en
forme, page 289).
Ce chapitre contient les sections suivantes :
A propos des calques de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .222
Insertion d'un calque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .224
Définition des préférences et des propriétés de calques. . . . . . . . . . . . . . . . . . . . . . 227
Gestion des calques. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .229
221
Manipulation des calques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .233
Conversion des calques en tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .235
Animation des calques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .238
Insertion de balises div pour des mises en forme . . . . . . . . . . . . . . . . . . . . . . . . . . . .248
Utilisation des balises div pour la mise en forme . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
Modification de la couleur de surbrillance des balises div . . . . . . . . . . . . . . . . . . . . 250
Utilisation de la visualisation de mise en forme CSS . . . . . . . . . . . . . . . . . . . . . . . . . 251
Utilisation des règles, des guides et de la grille pour la mise en forme des
pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254
Utilisation du tracé de l'image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .258
A propos des calques de Dreamweaver
Un calque est un élément de page HTML (une balise div ou autre) auquel une position
absolue est attribuée. Les calques peuvent comporter du texte, des images ou tout autre
contenu à placer au sein d'un document HTML.
REMARQUE
Dans ce chapitre, les calques dont il est question se rapportent au concept adopté par
Dreamweaver pour la mise en forme, et non pas à la balise layer.
Description des calques
Dreamweaver vous permet d'effectuer la mise en forme d'une page à l'aide de calques. Vous
pouvez placer les calques devant ou derrière d'autres calques, masquer certains d'entre eux et
en montrer d'autres ou encore déplacer les calques à l'écran. Vous pouvez placer une image
d'arrière-plan dans un calque, puis placer un deuxième calque contenant du texte avec un
arrière-plan transparent devant ce dernier.
Les calques offrent une grande souplesse dans le placement de contenu. Il se peut toutefois
que les visiteurs de votre site possédant de très anciens navigateurs ne puissent pas les
visualiser. Pour que votre page Web puisse être visualisée par tous, vous pouvez effectuer votre
mise en page à l'aide de calques, puis les convertir en tableaux. Pour plus d'informations, voir
Conversion des calques en tableaux, page 235. Néanmoins, si vous pensez que les visiteurs de
votre site disposeront de navigateurs plus récents, vous pouvez effectuer vos mises en page en
utilisant uniquement des calques, sans les convertir en tableaux.
222
Chapitre 7: Mise en forme des pages avec les styles CSS
Rubriques connexes
■
Gestion des calques, page 229
Code HTML pour les calques
Lorsque vous placez un calque dans un document, Dreamweaver insère la balise HTML
correspondant à ce calque dans votre code. Par défaut, Dreamweaver crée des calques en
utilisant la balise div.
REMARQUE
Deux autres balises peuvent être utilisées pour la création de calques : layer et ilayer.
Cependant, seul Netscape Navigator 4 prend ces balises en charge, contrairement à
Internet Explorer et aux versions les plus récentes de Netscape. Dreamweaver reconnaît
les balises layer et ilayer, mais il ne les utilise pas pour la création de calques.
Lorsque vous créez un calque à l'aide de l'outil Dessiner un calque, Dreamweaver insère une
balise div dans le document et attribue au calque une valeur ID (Calque1 par défaut au
premier calque, Calque2, au deuxième, etc.). Vous pouvez renommer le calque à votre guise
par la suite au moyen du panneau Calques ou de l'inspecteur Propriétés. Dreamweaver
imbrique également des styles CSS dans la section head du document pour positionner le
calque et déterminer ses dimensions exactes.
Ce qui suit est un échantillon de code HTML pour un calque :
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sample Layers Page</title>
<style type="text/css">
<!-#Layer1 {
position:absolute;
left:62px;
top:67px;
width:421px;
height:188px;
z-index:1;
}
-->
</style>
</head>
<body>
<div id="Layer1"></div>
</body>
</html>
A propos des calques de Dreamweaver
223
Vous pouvez définir les propriétés des calques de votre page, y compris les coordonnées x et y,
l'index z (également appelé ordre de superposition) et la visibilité. Pour plus d'informations,
voir Définition des préférences et des propriétés de calques, page 227.
Rubriques connexes
Description des calques, page 222
■
Insertion d'un calque
Dreamweaver vous permet de facilement créer des calques sur votre page et de les positionner
avec précision. Vous pouvez également créer des calques imbriqués. Pour plus d'informations,
voir Imbrication des calques, page 225.
REMARQUE
Vous pouvez utiliser un fichier de conception de Dreamweaver comme point de départ
pour la mise en forme CSS. Sélectionnez un fichier dans la catégorie Conceptions de
page (CSS) de la boîte de dialogue Nouveau document (voir Création d'un document
basé sur un fichier de conception Dreamweaver, page 101).
Lorsque vous insérez un calque, Dreamweaver affiche par défaut sa bordure et met le bloc en
surbrillance lorsque vous passez le pointeur dessus. Vous pouvez activer les bordures de calque
en désactivant Contours des calques 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 calques sous forme d'aide visuelle lors de la conception. Pour plus d'informations,
voir Utilisation de la visualisation de mise en forme CSS, page 251.
Pour modifier la couleur de surbrillance d'un calque ou désactiver la surbrillance, consultez la
section Modification de la couleur de surbrillance des balises div, page 250.
Une fois un calque créé, 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.
Pour dessiner un ou plusieurs calques à la suite :
1.
Dans la catégorie Mise en forme de la barre Insérer, cliquez sur le bouton Dessiner un
calque.
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 un seul calque.
■
Maintenez la touche Ctrl (Windows) ou Commande (Macintosh) enfoncée pour
dessiner plusieurs calques à la fois.
Vous pouvez continuer à tracer des calques tant que vous n'avez pas relâché les touches
Ctrl ou Commande.
224
Chapitre 7: Mise en forme des pages avec les styles CSS
Pour insérer un calque à un endroit précis du document :
■
Placez le point d'insertion dans la fenêtre de document, puis choisissez Insertion > Objets
mise en forme > Calque.
R E M A R QU E
La balise associée au calque est placée à l'emplacement auquel vous avez cliqué
dans la fenêtre de document. Le rendu visuel du calque est donc susceptible
d'affecter les autres éléments de page (le texte par exemple) qui l'entoure.
Pour placer le point d'insertion dans un calque :
■
Cliquez n'importe où à l'intérieur du calque.
Le contour du calque est en surbrillance et la poignée de sélection apparaît, mais le calque luimême n'est pas sélectionné. Pour plus d'informations sur la sélection de calques, consultez la
section Sélection des calques, page 229.
Pour afficher les bordures de calque :
■
Choisissez Affichage > Assistances visuelles, puis sélectionnez Contours des calques ou
Contours en feuille CSS.
REMARQUE
La sélection simultanée des deux options a le même effet.
Pour masquer les bordures de calque :
■
Choisissez Affichage> Assistances visuelles, puis désélectionnez Contours des calques ou
Contours en feuille CSS.
Rubriques connexes
■
Définition des préférences et des propriétés de calques, page 227
■
Gestion des calques, page 229
■
Manipulation des calques, page 233
Imbrication des calques
Un calque imbriqué est un calque dont le code est contenu dans un autre calque.
L'imbrication est souvent utilisée pour regrouper des calques. Un calque imbriqué se déplace
avec son calque parent et peut être configuré pour hériter de la visibilité de son parent.
Insertion d'un calque
225
Activez l'option Imbrication si vous voulez que les calques que vous dessinez à l'intérieur
d'autres calques soient automatiquement imbriqués.
Pour dessiner un calque imbriqué :
1.
Dans la catégorie Mise en forme de la barre Insérer, cliquez sur le bouton Dessiner un
calque.
2.
Dans la fenêtre de création du document, dessinez le calque à l'intérieur d'un autre claque
en faisant glisser la souris :
Si l'option Imbriquer est désactivée dans les préférences de calque, maintenez la touche Alt
(Windows) ou Option (Macintosh) enfoncée et faites glisser un calque pour l'imbriquer
dans un calque existant.
C ON S E I L
Les calques imbriqués peuvent être affichés différemment suivant les navigateurs.
Lorsque vous créez des calques imbriqués, contrôlez régulièrement leur affichage
dans les divers navigateurs au cours du processus de création.
Pour insérer un calque imbriqué :
■
Placez le point d'insertion à l'intérieur d'un calque existant dans la fenêtre de création du
document, puis choisissez Insertion > Calque.
Pour imbriquer un calque existant dans un autre calque en utilisant le panneau
Calques :
1.
Choisissez Fenêtre > Calques pour ouvrir le panneau Calques.
2.
Sélectionnez un calque dans le panneau Calques, puis maintenez la touche Ctrl (Windows)
ou Commande (Macintosh) enfoncée tout en faisant glisser la souris pour diriger le calque
vers le calque cible, dans le panneau Calques.
3.
Relâchez le bouton de la souris lorsque le nom du calque cible est mis en surbrillance.
Pour imbriquer automatiquement des calques lorsque vous dessinez un calque
à partir d'un autre calque :
■
Sélectionnez l'option Imbrication dans les préférences de calque.
Pour plus d'informations, voir Définition des préférences des calques, page 227.
226
Chapitre 7: Mise en forme des pages avec les styles CSS
Rubriques connexes
■
Insertion d'un calque, page 224
■
Gestion des calques, page 229
■
Manipulation des calques, page 233
Définition des préférences et des
propriétés de calques
Vous pouvez spécifier des paramètres de calque par défaut. Vous pouvez également afficher et
définir les différents attributs d'un ou de plusieurs calques à l'aide de l'inspecteur Propriétés.
Définition des préférences des calques
Utilisez la catégorie Calques dans la boîte de dialogue Préférences pour indiquer les
paramètres par défaut des nouveaux calques créés.
Pour afficher ou définir les préférences de calque :
1.
Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
La boîte de dialogue Préférences s'affiche.
2.
Choisissez la catégorie Calques dans la liste de gauche.
3.
Apportez les modifications de votre choix.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
4.
Cliquez sur OK.
Rubriques connexes
■
Affichage et définition des propriétés de plusieurs calques, page 228
Affichage et définition des propriétés pour un seul
calque
Lorsque vous sélectionnez un calque, l'inspecteur Propriétés affiche les propriétés du calque.
Pour afficher et définir les propriétés du calque :
1.
Sélectionnez un calque (voir Sélection des calques, page 229).
Définition des préférences et des propriétés de calques
227
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.
Modifiez les attributs du calque en définissant ses propriétés, si nécessaire.
Pour plus d'informations, cliquez sur le bouton Aide de l'inspecteur Propriétés.
Rubriques connexes
Définition des préférences des calques, page 227
■
■
Gestion des calques, page 229
Affichage et définition des propriétés de plusieurs
calques
Lorsque vous sélectionnez plusieurs calques, l'inspecteur Propriétés des calques affiche les
propriétés du texte et un sous-ensemble de propriétés de calque standard, ce qui vous permet
de modifier plusieurs calques simultanément.
Pour sélectionner plusieurs calques :
■
Sélectionnez les calques en maintenant la touche Maj enfoncée (voir Sélection des calques,
page 229).
Pour afficher et définir les propriétés de plusieurs calques :
1.
Sélectionnez plusieurs calques.
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.
Modifiez les attributs des calques en définissant les propriétés.
Pour plus d'informations, cliquez sur le bouton Aide de l'inspecteur Propriétés.
228
Chapitre 7: Mise en forme des pages avec les styles CSS
Rubriques connexes
■
Définition des préférences des calques, page 227
■
Affichage et définition des propriétés pour un seul calque, page 227
Gestion des calques
Vous pouvez travailler avec les calques que vous sélectionnez. Vous pouvez également modifier
l'ordre de superposition et la visibilité des calques. Le panneau Calques permet de gérer
facilement les calques.
Utilisation du panneau Calques
Le panneau Calques vous permet de gérer les calques dans votre document. Utilisez le
panneau Calques pour empêcher les calques de se chevaucher, pour en modifier la visibilité,
pour les imbriquer ou les superposer et pour en sélectionner un ou plusieurs.
Pour ouvrir le panneau Calques :
■
Choisissez Fenêtre > Calques.
Les calques sont affichés sous la forme d'une liste de noms, dans l'ordre de l'index-z ; le
premier calque créé (doté d'un index-z de 1) apparaît par défaut en bas de la liste et le dernier
calque créé (doté d'un index-z supérieur à 1) apparaît en haut de la liste. Vous pouvez
toutefois modifier l'index-z d'un calque pour changer sa position dans l'ordre de
superposition. Si, par exemple, vous avez créé huit calques et souhaitez placer le quatrième en
haut de l'ordre de superposition, vous pouvez lui affecter un index-z supérieur à celui de tous
les autres calques.
Pour plus d'informations sur l'utilisation du panneau Calques, consultez les rubriques
suivantes :
■
Insertion d'un calque, page 224
■
Sélection des calques, page 229
■
Modification de l'ordre de superposition des calques, page 230
■
Modification de la visibilité des calques, page 231
■
Comment empêcher le chevauchement des calques, page 236
Sélection des calques
Vous pouvez sélectionner un ou plusieurs calques pour les manipuler ou en modifier les
propriétés.
Gestion des calques
229
Pour sélectionner un calque dans le panneau Calques :
■
Dans le panneau Calques (Fenêtre > Calques), cliquez sur le nom du calque.
Pour sélectionner un calque dans la fenêtre de document, procédez de l'une
des manières suivantes :
■
Cliquez sur la poignée de sélection d'un calque.
Si la poignée n'est pas visible, cliquez n'importe où dans le calque pour la faire apparaître.
■
Cliquez sur la bordure d'un calque.
■
Cliquez à l'intérieur du calque en appuyant sur les touches Ctrl et Maj (Windows) ou
Commande et Maj (Macintosh).
■
Pour sélectionner le contenu d'un calque, 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 le calque.
■
Cliquez à l'intérieur d'un calque et sélectionnez sa balise dans le sélecteur de balise.
Pour sélectionner plusieurs calques, procédez de l'une des manières
suivantes :
■
Dans le panneau Calques (Fenêtre > Calques), appuyez sur la touche Maj tout en cliquant
sur plusieurs noms de calques.
■
Dans la fenêtre de document, appuyez sur la touche Maj tout en cliquant à l'intérieur d'un
ou de plusieurs calques ou sur leur bordure.
Rubriques connexes
■
Insertion d'un calque, page 224
■
Définition des préférences et des propriétés de calques, page 227
■
Gestion des calques, page 229
■
Manipulation des calques, page 233
Modification de l'ordre de superposition des calques
Utilisez l'inspecteur Propriétés ou le panneau Calques pour modifier l'ordre de superposition
des calques. Le calque situé dans le haut de la liste du panneau Calques est au premier rang de
l'ordre de superposition et apparaît avant les autres calques.
230
Chapitre 7: Mise en forme des pages avec les styles CSS
En code HTML, l'ordre de superposition, ou index z, détermine l'ordre dans lequel les
calques sont dessinés dans un navigateur. Plus l'index-z d'un calque est élevé, et plus sa
position dans l'ordre de superposition est élevée. Vous pouvez modifier l'index z de chaque
calque dans le panneau Calques ou dans l'inspecteur Propriétés.
Pour modifier l'ordre de superposition des calques dans le panneau Calques :
1.
Choisissez Fenêtre > Calques pour ouvrir le panneau Calques.
2.
Faites glisser un calque à l'emplacement désiré dans la hiérarchie de l'ordre de
superposition.
Une ligne indiquant le futur emplacement du calque apparaît lorsque vous déplacez le
calque. Relâchez le bouton de la souris lorsque la ligne apparaît à l'emplacement souhaité
dans l'ordre de superposition.
Pour modifier l'ordre de superposition des calques à l'aide de l'inspecteur
Propriétés :
1.
Choisissez Fenêtre > Calques pour ouvrir le panneau Calques et visualiser l'ordre de
superposition en cours.
2.
Sélectionnez un calque dans le panneau Calques ou dans la fenêtre de document.
3.
Dans l'inspecteur Propriétés du calque (Fenêtre > Propriétés), tapez un nombre dans la
zone de texte Index Z.
■
Tapez une valeur supérieure pour « monter » le calque dans l'ordre de superposition.
■
Tapez une valeur inférieure pour « descendre » le calque dans l'ordre de superposition.
Rubriques connexes
■
Utilisation du panneau Calques, page 229
■
Sélection des calques, page 229
Modification de la visibilité des calques
Lorsque vous travaillez sur votre document, vous pouvez afficher ou masquer les calques
manuellement, à l'aide du panneau Calques, pour voir comment la page apparaîtra dans
différentes situations.
R E M AR QU E
Le calque sélectionné devient toujours visible et apparaît devant les autres calques.
Gestion des calques
231
Pour modifier la visibilité d'un calque :
1.
Choisissez Fenêtre > Calques pour ouvrir le panneau Calques.
2.
Cliquez sur l'icône en forme d'œil pour en changer la visibilité.
■
Un œil ouvert signifie que le calque est visible.
■
Un œil fermé signifie que le calque est invisible.
■
Si l'icône de l'œil n'apparaît pas, le calque hérite de la visibilité de son parent (lorsque
les calques ne sont pas imbriqués, le calque parent correspond au corps du document,
qui est toujours visible).
Aucune icône en forme d'œil ne s'affiche lorsque la visibilité n'est pas indiquée
(apparaît dans l'inspecteur Propriétés comme Visibilité par défaut).
Pour modifier la visibilité de tous les calques à la fois :
■
Dans le panneau Calques (Fenêtre > Calques), cliquez sur l'icône en forme d'œil en haut
de la colonne.
R E M A R QU E
Cette procédure permet de définir la visibilité ou la non-visibilité de tous les autres
calques, mais elle ne leur permet pas d'hériter.
Rubriques connexes
■
Utilisation du panneau Calques, page 229
■
Modification de l'ordre de superposition des calques, page 230
232
Chapitre 7: Mise en forme des pages avec les styles CSS
Manipulation des calques
Lorsque que vous travaillez sur une mise en forme, vous pouvez sélectionner, déplacer,
redimensionner et aligner des calques. Vous devez sélectionner un calque pour pouvoir le
déplacer, le redimensionner ou l'aligner.
Pour empêcher les calques de se chevaucher lorsque vous les déplacez et les redimensionnez,
utilisez l'option Empêcher le chevauchement (voir Comment empêcher le chevauchement des
calques, page 236).
Redimensionnement des calques
Vous pouvez redimensionner un ou plusieurs calques à 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
calque s'il doit pour cela en chevaucher un autre (voir Comment empêcher le chevauchement des
calques, page 236).
Pour redimensionner un calque :
1.
En mode Création, sélectionnez un calque (voir Sélection des calques, page 229).
2.
Pour redimensionner le calque, procédez de l'une des manières suivantes :
■
Pour redimensionner le calque en le faisant glisser, faites glisser l'une des poignées.
■
Pour redimensionner le calque 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 du calque ; cette technique ne permet
pas de redimensionner le calque 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).
Pour plus d'informations sur la définition des incréments de la grille, consultez la
section Utilisation du tracé de l'image, page 258.
■
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 calque en modifie la largeur et la hauteur. Cette action ne définit
pas la partie visible du contenu du calque. Pour définir la région visible d'un calque, consultez
la section Définition des préférences et des propriétés de calques, page 227.
Manipulation des calques
233
Pour redimensionner plusieurs calques à la fois :
1.
En mode Création, sélectionnez au moins deux calques (voir Sélection des calques,
page 229).
2.
Procédez de l'une des manières suivantes :
■
Choisissez Modifier > Aligner > Même largeur ou Modifier > Aligner > Même
hauteur.
Les premiers calques 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 Calques multiples, tapez les
valeurs de largeur et de hauteur.
Ces valeurs sont appliquées à tous les calques sélectionnés.
Rubriques connexes
■
Alignement des calques, page 235
■
Utilisation du tracé de l'image, page 258
Déplacement des calques
Vous pouvez déplacer les calques 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 calque s'il
doit pour cela en chevaucher un autre (voir Comment empêcher le chevauchement des calques,
page 236).
Pour déplacer un ou plusieurs calques sélectionnés :
1.
En mode Création, sélectionnez un ou plusieurs calques (voir Sélection des calques,
page 229).
2.
Procédez de l'une des manières suivantes :
■
Pour déplacer des calques en les faisant glisser, sélectionnez-les et faites glisser la
poignée de sélection du dernier calque 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 le calque par incréments de la grille. Pour plus d'informations sur la
définition des incréments de la grille, consultez la section Utilisation du tracé de
l'image, page 258.
234
Chapitre 7: Mise en forme des pages avec les styles CSS
Rubriques connexes
■
Redimensionnement des calques, page 233
■
Utilisation du tracé de l'image, page 258
Alignement des calques
Utilisez les commandes d'alignement pour aligner un ou plusieurs calques sur l'un des côtés
du dernier calque sélectionné.
Lors de l'alignement, les calques 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é. Pour éviter ce déplacement, n'utilisez pas de
calques imbriqués.
Pour aligner plusieurs calques :
1.
En mode Création, sélectionnez le calque (voir Sélection des calques, page 229).
2.
Choisissez Modifier > Arrange (Agencer), puis sélectionnez une option d'alignement.
Par exemple, si vous sélectionnez Haut, tous les calques se déplacent de façon telle que
leurs bordures supérieures sont au même niveau que celle du dernier calque sélectionné
(en surbrillance noire).
Rubriques connexes
■
Redimensionnement des calques, page 233
■
Déplacement des calques, page 234
■
Utilisation du tracé de l'image, page 258
Conversion des calques en tableaux
Pour créer leur mise en forme, certains concepteurs de pages Web préfèrent utiliser des calques
plutôt que des tableaux ou le mode Mise en forme. Dreamweaver vous permet de créer votre
mise en forme à l'aide de calques, puis de les convertir en tableaux, le cas échéant. Par
exemple, il peut être nécessaire de convertir les calques en tableaux pour pouvoir prendre en
charge les navigateurs antérieurs à la version 4.0.
REMARQUE
Il est impossible de convertir des calques en tableaux, ou vice-versa, 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 calques en tableaux
235
Vous pouvez aussi passer des calques aux tableaux et vice-versa pour peaufiner la mise en
forme et optimiser la présentation de la page. Vous ne pouvez pas convertir un tableau ou un
calque donné figurant sur une page. Il n'est possible de convertir des calques en tableaux et
vice versa que pour la totalité d'une page.
REMARQUE
La conversion de calques en tableaux peut engendrer la création de tableaux
comportant de nombreuses cellules vides.
Comment empêcher le chevauchement des calques
Les cellules d'un tableau ne peuvent pas se chevaucher. Dreamweaver ne peut donc pas créer
de tableau à partir de calques qui se chevauchent. Si vous envisagez de convertir les calques
d'un document en tableaux, activez l'option Empêcher le chevauchement pour restreindre le
déplacement et le positionnement des calques et en éviter le chevauchement.
Si cette option est activée, aucun calque ne peut être créé, déplacé ou redimensionné au-dessus
d'un calque existant, ni y être imbriqué. Si cette option est activée après la création de calques
se chevauchant, faites glisser l'un des calques pour supprimer leur chevauchement.
Dreamweaver ne corrige pas automatiquement les chevauchements de calques existants
lorsque vous activez l'option Empêcher le chevauchement des calques.
Si cette option et l'option d'alignement sont activées, aucun calque ne sera aligné sur la grille
si cela doit causer un chevauchement de calques. Dans ce cas, le calque sera aligné sur le bord
du calque le plus proche.
REMARQUE
Ceci est un nouveau tableau Note. Il est associé à la balise de paragraphe Table_anchor.
Pour le créer, copiez et collez-le à partir de la page de référence.
R E M AR QU E C er t a in e s o p ér a t i o n s a u t or i s en t l e c h e v a u c h e m e n t d e s c a l q u e s , m ê m e
lo r s q u e l 'o p t io n E mp ê ch e r l e c he v a u ch e me n t e st a ct i v é e. S i v o u s i n sé r ez u n ca l qu e
e n u t i l i s a n t l e m e n u I ns e r t i on , s i v o u s e n t r e z l e s v a l e u r s d a n s l 'i n s p e c t e u r P r o p r i é t é s
o u s i v o u s r ep o s i t i on n e z le s c a l q u es e n m o d i fi a n t l e c od e so u r c e HT M L, le s c a l q u es
r i sq u e n t d e s e c he v a u ch e r ou d e s 'i m br i q u e r l o r s q u e c et t e o p t i o n e s t a c t i v é e . E n c a s
d e c he v auc h em en t , fa it es g l is se r l e s ca lq ue s q u i se c h evau ch e n t d a n s le mo d e
Création pour les séparer.
Pour empêcher le chevauchement de calques, procédez de l'une des manières
suivantes :
■
Dans le panneau Calques (Fenêtre > Calques), activez l'option Empêcher le
chevauchement.
236
Chapitre 7: Mise en forme des pages avec les styles CSS
■
Dans la fenêtre de document, choisissez Modifier > Réorganiser > Empêcher le
chevauchement des calques.
Conversion de calques en tableaux
Créez votre mise en forme à l'aide de calques, puis convertissez les calques en tableaux afin que
votre mise en forme puisse s'afficher dans les navigateurs les moins récents.
Avant de convertir vos calques en tableaux, assurez-vous qu'ils ne se chevauchent pas (voir
Comment empêcher le chevauchement des calques, page 236).
Pour convertir des calques en tableau :
1.
Choisissez Modifier > Convertir > Calques en tableau.
La boîte de dialogue Convertir les calques en tableau s'affiche.
2.
Sélectionnez les options souhaitées.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
3.
Cliquez sur OK.
Les calques sont convertis en un tableau.
Pour convertir des tableaux en calques :
1.
Choisissez Modifier > Convertir > Tableaux en calques.
La boîte de dialogue Convertir les tableaux en calques s'affiche.
2.
Sélectionnez les options souhaitées.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
3.
Cliquez sur OK.
Les tableaux sont convertis en calques. Les cellules vides ne sont pas converties en calques,
sauf si elles possèdent une couleur d'arrière-plan.
R E M A R QU E
Les éléments de la page qui se trouvaient en dehors des tableaux sont également
placés dans les calques.
Conversion des calques en tableaux
237
Animation des calques
Le langage HTML dynamique, ou DHTML, est une combinaison du langage HTML et d'un
langage de script qui permet de modifier les propriétés de style ou de positionnement
d'éléments HTML. Dans Dreamweaver, les scénarios utilisent le langage HTML dynamique
pour modifier les propriétés des calques et des images dans le temps. Utilisez les scénarios pour
créer des animations qui ne nécessitent pas de contrôles ActiveX, de plug-ins ni d'applets Java
(mais requièrent JavaScript).
REMARQUE
Le terme dynamique a des sens différents selon le contexte Web. Le langage HTML
dynamique n'a rien à voir avec le concept de page Web dynamique, autrement dit, une
page Web générée dynamiquement par du code côté serveur avant d'être affichée pour
un visiteur.
Les scénarios vous permettent de modifier la position, la taille, la visibilité et l'ordre de
superposition des calques. (Les fonctions relatives aux calques des scénarios sont uniquement
prises en charge dans la version 4.0 ou ultérieure des navigateurs). Les scénarios vous
permettent également d'exécuter d'autres actions que vous souhaitez déclencher après le
chargement d'une page. Ainsi, les scénarios peuvent modifier le fichier source d'une balise
d'image afin que différentes images apparaissent sur la page dans le temps.
Pour consulter le code JavaScript généré par un scénario, ouvrez la fenêtre de document en
mode Code. Le code du scénario réside dans la fonction MM_initTimelines, au sein d'une
balise de script dans la section head du document.
Lorsque vous modifiez le code HTML d'un document contenant des scénarios, veillez à ne
pas déplacer, renommer ni supprimer les éléments auxquels un scénario fait référence.
238
Chapitre 7: Mise en forme des pages avec les styles CSS
Utilisation du panneau Timelines (Scénarios)
Le panneau Timelines (Scénarios) suit les changements des propriétés des calques et des
images dans le temps. Sélectionnez Fenêtre > Timelines (Scénarios) pour ouvrir le panneau du
même nom.
Menu déroulant Scénario
Tête de lecture
Numéros d'image
Canal de comportements
Images-clés
Canal d'animation
Barre d'animation
Le menu déroulant Scénarioindique quel scénario du document est actuellement affiché
dans le panneau Timelines (Scénario).
La tête de lecture indique quelle image du scénario est actuellement affichée dans la fenêtre
de document.
Les numéros d'image indiquent le numéro séquentiel des images. Le numéro qui figure entre
les boutons Retour et Lecture correspond au numéro de l'image actuelle. Vous contrôlez la
durée de l'animation en définissant le nombre total d'images et le nombre d'images par
seconde. Le paramètre par défaut, 15 images par seconde, constitue une moyenne adaptée à la
plupart des navigateurs qui s'exécutent sur les systèmes Windows et Macintosh courants.
R E M A R QU E
Une cadence plus élevée n'améliore pas nécessairement les performances. Les
navigateurs lisent systématiquement chaque image d'une animation, même s'ils ne
parviennent pas atteindre la cadence spécifiée. La cadence est ignorée si elle est
supérieure à la valeur prise en charge par le navigateur.
Le menu contextuel contient différentes commandes relatives au scénario.
Le canal de comportements est le canal des comportements qui doivent être exécutés à une
image déterminée d'un scénario.
Animation des calques
239
Les barres d'animation indiquent la durée de l'animation de chaque objet. Une même ligne
peut regrouper plusieurs barres représentant différents objets. Des barres différentes ne
peuvent pas contrôler un même objet dans une même image.
Les images-clés sont des images d'une barre dans lesquelles vous avez spécifié les propriétés
(telles que la position) d'un objet. Dreamweaver calcule des valeurs intermédiaires pour les
images entre les images-clés. Les images-clés sont signalées par des cercles de petite taille.
Les canaux d'animation affichent des barres pour l'animation des calques et des images.
Options de lecture
Les options de lecture suivantes permettent de visionner l'animation.
Rembobiner place
la tête de lecture sur la première image du scénario.
Retour déplace la tête de lecture d'une image vers la gauche. Cliquez sur Retour tout en
maintenant le bouton de la souris enfoncé pour lire le scénario en arrière.
déplace la tête de lecture d'une image vers la droite. Cliquez sur Lecture tout en
maintenant le bouton de la souris enfoncé pour lire le scénario vers l'avant.
Lecture
Lecture auto entraîne la lecture automatique d'un scénario lorsque la page en cours est
chargée dans un navigateur. L'option Lecture auto associe un comportement à la balise body
de la page. Cette balise exécute l'action Lire le scénario au chargement de la page.
Boucle entraîne
la lecture en boucle infinie du scénario en cours tant que la page est ouverte
dans un navigateur. L'option Boucle insère le comportement Go to Timeline Frame
(Atteindre une image du scénario) dans le canal de comportements après la dernière image de
l'animation. Double-cliquez sur le repère du comportement dans le canal de comportements
pour modifier les paramètres correspondants et modifier le nombre de boucle.
Modification d'un calque à l'aide d'une animation de
scénario
Le type d'animation de scénario le plus courant consiste à déplacer un calque sur un chemin.
Les scénarios peuvent uniquement déplacer des calques. Pour déplacer des images ou du texte,
créez un calque à l'aide du bouton Dessiner un calque de la barre Insertion, puis insérez les
images, le texte ou tout autre type de contenu dans le calque (voir Insertion d'un calque,
page 224).
240
Chapitre 7: Mise en forme des pages avec les styles CSS
Les scénarios peuvent également modifier d'autres attributs des calques et des images. Pour
plus d'informations, consultez la section Modification des propriétés des images et des calques au
moyen des scénarios, page 243.
Pour animer un calque à l'aide d'un scénario :
1.
Placez le calque à l'emplacement auquel vous souhaitez qu'il se trouve lorsque l'animation
commence.
2.
Choisissez Fenêtre > Scénarios.
3.
Sélectionnez le calque que vous souhaitez animer.
Assurez-vous que vous avez sélectionné l'élément souhaité : Pour sélectionner un calque,
cliquez sur le repère ou sur la poignée de sélection correspondant ou utilisez le panneau
Calques. Pour plus d'informations, voir Manipulation des calques, page 233. Lorsqu'un
calque est sélectionné, des poignées s'affichent sur son pourtour, comme illustré cidessous.
Cliquez sur la poignée de sélection du calque pour
sélectionner celui-ci.
Calque sélectionné contenant une image
Lorsque vous cliquez dans un calque, un point d'insertion clignotant apparaît dans le
calque, qui n'est toutefois pas sélectionné.
4.
Sélectionnez Modifier > Scénario > Ajouter un objet au scénario ou faites simplement
glisser le calque sélectionné vers le panneau Scénarios.
Une barre s'affiche dans le premier canal du scénario. Le nom du calque apparaît dans la
barre.
5.
Cliquez sur le repère de l'image-clé à l'extrémité de la barre.
6.
Placez le calque sur la page, à l'emplacement auquel vous souhaitez qu'il se trouve à la fin
de l'animation.
Une ligne indiquant le chemin de l'animation s'affiche dans la fenêtre de document.
Animation des calques
241
7.
Pour que le calque décrive une courbe, sélectionnez la barre d'animation correspondante,
puis cliquez sur une image au milieu de la barre tout en maintenant la touche Ctrl
(Windows) ou Commande (Macintosh) enfoncée pour ajouter une image-clé à
l'emplacement de cette image. Vous pouvez aussi cliquer sur l'image requise au milieu de
la barre d'animation et sélectionner Ajouter une image-clé dans le menu contextuel.
Répétez cette étape pour définir des images-clés supplémentaires.
8.
Maintenez le bouton Lecture enfoncé pour afficher un aperçu de l'animation sur la page.
Répétez la procédure pour ajouter d'autres calques et images au scénario et créer une
animation plus complexe.
Création d'un scénario en faisant glisser un chemin
Si vous désirez créer une animation comportant un chemin complexe, il est souvent plus facile
d'enregistrer celui-ci au fur et à mesure que vous faites glisser le calque, plutôt que de créer des
images-clés individuelles.
Pour créer un scénario en faisant glisser un chemin :
1.
Sélectionnez un calque.
2.
Placez le calque à l'emplacement auquel vous souhaitez qu'il se trouve lorsque l'animation
commence.
Assurez-vous que vous avez sélectionné le calque. Si le point d'insertion se trouve dans le
calque, il n'est pas sélectionné. Pour sélectionner un calque, cliquez sur le repère ou sur la
poignée de sélection correspondant ou utilisez le panneau Calques. Pour plus
d'informations, voir Manipulation des calques, page 233.
3.
Choisissez Modifier > Scénario > Enregistrer le chemin du calque.
4.
Faites glisser le calque dans la page pour créer un chemin.
5.
Arrêtez de le faire glisser à l'emplacement où l'animation doit s'arrêter.
Dreamweaver ajoute au scénario une barre d'animation contenant le nombre approprié
d'images-clés.
6.
Dans le panneau Scénarios, cliquez sur le bouton Rembobiner, puis maintenez le bouton
Lecture enfoncé pour afficher un aperçu de l'animation.
Modification de scénarios
Une fois les composants de base d'un scénario défini, vous pouvez effectuer diverses
modifications : ajouter ou supprimer des images, modifier l'heure de début de l'animation,
etc.
242
Chapitre 7: Mise en forme des pages avec les styles CSS
Pour modifier un scénario, procédez de l'une des manières suivantes :
■
Pour allonger la durée de l'animation, faites glisser le repère de la dernière image vers la
droite. Toutes les images-clés de l'animation sont déplacées afin de respecter leur position
relative. Pour empêcher le déplacement des autres images-clés, maintenez la touche Ctrl
enfoncée lorsque vous faites glisser le repère de la dernière image.
■
Pour que le calque atteigne une image-clé plus tôt ou plus tard, déplacez le repère de cette
dernière vers la gauche ou la droite sur la barre.
■
Pour changer l'heure de début d'une animation, sélectionnez une ou plusieurs des barres
qui lui sont associées (appuyez sur Maj pour sélectionner plusieurs barres simultanément)
et faites glisser la sélection vers la droite ou la gauche.
■
Pour déplacer la totalité du chemin d'une animation, sélectionnez intégralement la barre,
puis faites glisser l'objet sur la page. Dreamweaver adapte la position des images-clés.
Toute modification effectuée lorsqu'une barre entière est sélectionnée a une incidence sur
la totalité des images-clés.
■
Pour ajouter ou supprimer des images dans le scénario, sélectionnez Modifier > Scénario >
Ajouter une image ou Modifier > Scénario > Supprimer une image.
■
Pour qu'un scénario soit lu automatiquement à l'ouverture de la page dans un navigateur,
cliquez sur Lecture auto. L'option Lecture auto associe un comportement à la page. Ce
comportement exécute l'action Lire le scénario au chargement de la page.
■
Pour qu'un scénario soit lu en boucle indéfiniment, cliquez sur Boucle. L'option Boucle
insère l'action Go to Timeline Frame (Atteindre une image du scénario) dans le canal de
comportements après la dernière image de l'animation. Vous pouvez modifier les
paramètres de ce comportement pour définir le nombre de boucles.
Modification des propriétés des images et des
calques au moyen des scénarios
Outre déplacer un calque au moyen d'un scénario, vous pouvez modifier sa visibilité, sa taille
et son ordre de superposition. Vous pouvez aussi changer le fichier source d'une image.
Pour modifier les propriétés d'images et de calques au moyen d'un scénario :
1.
Dans le panneau Scénarios, procédez de l'une des manières suivantes :
■
Sélectionnez une image-clé existante dans la barre contrôlant l'objet à modifier. (La
première et la dernière images sont toujours des images-clés.)
Animation des calques
243
■
2.
3.
Créez une image-clé en cliquant sur une image au milieu de la barre d'animation et en
choisissant Modifier > Scénario > Ajouter une image-clé. Vous pouvez aussi créer une
image-clé en cliquant sur une image dans la barre d'animation tout en appuyant sur la
touche Ctrl (Windows) ou Commande (Macintosh).
Pour définir les nouvelles propriétés de l'objet, procédez de l'une des manières suivantes :
■
Pour changer le fichier source d'une image, cliquez sur l'icône de dossier en regard de
la zone de texte Src dans l'inspecteur Propriétés, puis localisez et sélectionnez une
nouvelle image.
■
Pour modifier la visibilité d'un calque, sélectionnez hériter, visible ou masqué dans le
menu déroulant de la zone de texte Vis, dans l'inspecteur Propriétés. Vous pouvez
aussi utiliser les icônes en forme d'œil du panneau Calques. Voir Modification de la
visibilité des calques, page 231.
■
Pour modifier la taille d'un calque, faites glisser ses poignées de redimensionnement ou
tapez de nouvelles valeurs dans les zones de texte Largeur et Hauteur de l'inspecteur
Propriétés. Certains navigateurs ne peuvent pas redimensionner les calques
dynamiquement.
■
Pour modifier l'ordre de superposition d'un calque, tapez une nouvelle valeur dans la
zone de texte Index Z ou utilisez le panneau Calques pour changer l'ordre de
superposition du calque en cours (voir Modification de l'ordre de superposition des
calques, page 230).
Maintenez le bouton Lecture enfoncé pour afficher l'animation.
Utilisation de plusieurs scénarios
Plutôt que d'essayer de contrôler toutes les actions sur une page par le biais d'un scénario
unique, il est plus facile d'utiliser plusieurs scénarios distincts qui contrôlent des parties
discrètes de la page. Une page peut par exemple comprendre plusieurs éléments interactifs qui
déclenchent chacun un scénario différent.
Pour gérer plusieurs scénarios, procédez de l'une des manières suivantes :
■
Pour créer un scénario, choisissez Modifier > Scénario > Ajouter un scénario.
■
Pour supprimer le scénario sélectionné, choisissez Modifier > Scénario > Supprimer le
scénario. Cette opération supprime définitivement toutes les animations du scénario
sélectionné.
■
Pour renommer le scénario sélectionné, choisissez Modifier > Scénario > Renommer le
scénario ou tapez un nouveau nom dans le menu déroulant Scénario du panneau
Scénarios.
244
Chapitre 7: Mise en forme des pages avec les styles CSS
■
Pour afficher un autre scénario dans le panneau Scénarios, sélectionnez-le dans le menu
déroulant Scénario du panneau Scénarios.
Copie et collage d'animations
Une fois la séquence d'animation souhaitée obtenue, vous pouvez la copier et la coller dans
une autre zone du scénario en cours ou dans un autre scénario du même document ou d'un
autre document. Vous pouvez également copier et coller plusieurs séquences à la fois.
Pour copier ou copier et coller des séquences d'animation :
1.
Cliquez sur une barre d'animation pour sélectionner une séquence. Pour sélectionner
plusieurs séquences, cliquez sur les barres d'animations correspondantes tout en
maintenant la touche Maj enfoncée. Pour sélectionner toutes les séquences, appuyez sur les
touches Ctrl-A (Windows) ou Commande-A (Macintosh).
2.
Copiez ou coupez la sélection.
3.
Procédez de l'une des manières suivantes :
4.
■
Placez la tête de lecture à un autre emplacement dans le scénario en cours.
■
Sélectionnez un autre scénario dans le menu déroulant Scénario.
■
Ouvrez un autre document, ou créez-en un nouveau, puis cliquez dans le panneau
Scénarios.
Collez la sélection dans le scénario.
Les barres d'animation d'un même objet ne peuvent pas se chevaucher car un calque ne
peut pas se trouver à deux endroits en même temps (de même, une image ne peut pas
avoir deux sources différentes simultanément). Si la barre d'animation que vous collez est
susceptible de chevaucher une autre barre d'animation associée au même objet,
Dreamweaver déplace automatiquement la sélection vers la première image qui n'en
chevauche pas une autre.
Lorsque vous collez des séquences d'animation dans un autre document, gardez les deux
principes suivants à l'esprit :
■
Si vous copiez une séquence d'animation associé à un calque et que le nouveau document
contient un calque du même nom, Dreamweaver applique les propriétés d'animation au
calque existant du nouveau document.
Animation des calques
245
■
Si vous copiez une séquence d'animation associée à un calque et que le nouveau document
ne contient pas de calque du même nom, Dreamweaver colle le calque et son contenu à
partir du document d'origine, en plus de la séquence d'animation. Pour appliquer la
séquence d'animation collée à un autre calque du nouveau document, sélectionnez
Changer d'objet dans le menu déroulant, puis sélectionnez le nom de l'autre calque dans
le menu déroulant. Supprimez le calque collé si besoin est.
Application d'une séquence d'animation à un autre
objet
Pour gagner du temps, vous pouvez créer une séquence d'animation, puis l'appliquer à chacun
des calques restants de votre document.
Pour appliquer une séquence d'animation existante à d'autres objets :
1.
Dans le panneau Scénarios, sélectionnez la séquence d'animation et copiez-la.
2.
Cliquez sur n'importe quelle image du panneau Scénarios et collez la séquence au niveau
de cette image.
3.
Cliquez avec le bouton droit de la souris (Windows) sur la séquence d'animation collée ou
en maintenant la touche Contrôle enfoncée (Macintosh), puis choisissez Changer d'objet
dans le menu contextuel.
4.
Dans la boîte de dialogue qui s'affiche, sélectionnez un autre objet dans le menu déroulant
et cliquez sur OK.
5.
Répétez les étapes 2 à 4 pour les autres objets auxquels vous souhaitez appliquer la même
séquence d'animation.
Vous pouvez aussi changer d'avis quant au calque à animer après avoir créé une séquence
d'animation. Suivez simplement les étapes 3 et 4 ci-dessus (sans copier ni coller).
Attribution d'un nouveau nom à un scénario
Vous pouvez renommer un scénario.
Pour renommer le scénario actuellement affiché dans le panneau Scénarios :
1.
Sélectionnez Modifier > Scénario > Renommer le scénario.
2.
Dans la boîte de dialogue Renommer le scénario, tapez un nouveau nom.
Si votre document contient l'action de comportement Lire le scénario (si, par exemple, il
contient un bouton sur lequel l'utilisateur doit cliquer pour démarrer le scénario), vous devez
modifier ce comportement conformément au nouveau nom.
246
Chapitre 7: Mise en forme des pages avec les styles CSS
Conseils relatifs aux animations et aux scénarios
Les suggestions suivantes sont susceptibles d'optimiser les performances de vos animations et
de simplifier la procédure de création d'animations :
■
Affichez et masquez des calques plutôt que de changer le fichier source dans les animations
comportant plusieurs images. Changer le fichier source est susceptible de ralentir
l'animation car il est nécessaire de télécharger la nouvelle image. Si toutes les images sont
téléchargées simultanément dans des calques masqués avant le début de l'animation, il n'y
a pas de pause ni d'images manquantes.
■
Etendez les barres d'animation pour optimiser la fluidité du mouvement. Si l'animation
est hachée et que les images sautent d'une position à une autre, faites glisser la dernière
image de la barre d'animation du calque pour que le mouvement s'étende sur un plus
grand nombre d'images. L'allongement de la barre d'animation crée un plus grand
nombre de points de données entre les points de début et de fin du mouvement et ralentit
le déplacement de l'objet. Pour améliorer la cadence, augmentez le nombre d'images par
seconde. N'oubliez pas cependant que la plupart des navigateurs tournant sur des systèmes
moyens ne prennent pas en charge plus de 15 images par seconde. Testez l'animation sur
des systèmes différents en utilisant des navigateurs différents pour déterminer les
paramètres optimaux.
■
N'animez pas les bitmaps de grande taille, car vous risquez d'obtenir des animations
lentes. Créez plutôt des images composées et animez-en de petites parties. Vous pouvez
par exemple donner l'impression qu'une voiture se déplace en animant uniquement les
roues.
■
Créez des animations simples. Ne créez pas des animations qui exigent plus de
fonctionnalités que les navigateurs n'en offrent actuellement. Les navigateurs lisent
systématiquement chaque image d'une animation de scénario, mais en cas de baisse des
performances du système ou d'Internet.
Animation des calques
247
Insertion de balises div pour des mises en
forme
Vous pouvez utiliser des balises div pour créer des blocs de mise en forme CSS et les placer
dans votre document. Ceci est particulièrement utile si une feuille de style en cascade (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 les styles existants.
REMARQUE
Vous pouvez utiliser un fichier de conception de Dreamweaver comme point de départ
pour la mise en forme CSS. Sélectionnez un fichier dans la catégorie Conceptions de
page (CSS) de la boîte de dialogue Nouveau document (voir Création d'un document
basé sur un fichier de conception Dreamweaver, page 101).
Pour insérer une balise div :
1.
Dans la fenêtre de document, placez le point d'insertion à l'endroit où vous voulez insérer
la balise div.
2.
Procédez de l'une des manières suivantes :
■
Choisissez Insertion > Objets mise en forme > Balise Div.
■
Dans la catégorie Mise en forme de la barre Insérer, cliquez sur le bouton Insérer la
balise Div.
La boîte de dialogue Insérer la balise Div s'affiche.
3.
Complétez les options de la boîte de dialogue.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
4.
Cliquez sur OK.
La balise div s'affiche dans votre document sous la forme d'un cadre contenant du texte
d'espace réservé. Lorsque vous déplacez le pointeur sur le bord de la zone, Dreamweaver
met cette zone en surbrillance.
248
Chapitre 7: Mise en forme des pages avec les styles CSS
Si la balise div est placée de manière absolue ou relative, elle se comporte comme un calque
Dreamweaver. Pour plus d'informations sur l'utilisation des calques, consultez la section
Définition des préférences et des propriétés de calques, page 227, Gestion des calques, page 229 ou
Manipulation des calques, page 233.
Pour plus d'informations sur l'utilisation de balises div qui ne sont pas placées de manière
absolue, consultez la section Utilisation des balises div pour la mise en forme, page 249.
Rubriques connexes
■
Modification de la couleur de surbrillance des balises div, page 250
Utilisation des balises div pour la mise en
forme
Après avoir inséré une balise div (voir Insertion de balises div pour des mises en forme,
page 248), vous pouvez la manipuler ou lui ajouter du contenu.
REMARQUE
Les balises div qui ne sont pas placées de manière absolue sont des calques
Dreamweaver. Pour plus d'informations sur l'utilisation de ces balises div, ignorez cette
section et passez aux sections Définition des préférences et des propriétés de calques,
page 227, Gestion des calques, page 229 ou Manipulation des calques, page 233.
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. Pour modifier la
couleur de surbrillance ou désactiver la surbrillance, consultez la section Modification de la
couleur de surbrillance des balises div, page 250.
Lorsque vous sélectionnez une balise div, vous pouvez afficher ou 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 celle-ci, puis procédez à l'ajout du
contenu comme vous le feriez pour celui d'une page.
Pour afficher et modifier les règles appliquées à une balise div
1.
Procédez de l'une des manières suivantes pour sélectionner la balise div :
Utilisation des balises div pour la mise en forme
249
■
Cliquez sur la bordure de la balise div.
CONSEIL
2.
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 balise
figurant au bas de la fenêtre du document.
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.
Pour placer le 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.
Pour modifier le 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.
Rubriques connexes
■
Insertion de balises div pour des mises en forme, page 248
■
Utilisation du panneau Styles CSS, page 444
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.
250
Chapitre 7: Mise en forme des pages avec les styles CSS
Pour modifier les préférences de surbrillance des balises div :
1.
Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
La boîte de dialogue Préférences s'affiche.
2.
Sélectionnez la catégorie Surbrillance dans la liste de gauche.
3.
Apportez l'une des modifications suivantes :
■
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 plus d'informations sur l'utilisation du sélecteur de couleur, consultez la section
Utilisation des couleurs, page 393.
■
Pour activer ou désactiver la surbrillance des balises div, activez ou désactivez la case à
cocher Afficher de l'option Survol.
REMARQUE
4.
Ces options ont un impact sur tous les objets (tableaux, par exemple) que
Dreamweaver met en surbrillance lorsque vous y déplacez le pointeur.
Cliquez sur OK.
Utilisation de la visualisation de mise en
forme CSS
Dreamweaver propose une série de fonctions de visualisation qui vous permettent d'afficher
des éléments de votre mise en forme CSS en vue Création. Vous pouvez par exemple afficher
le contour des balises div sans bordures ou affecter temporairement des couleurs d'arrièreplan aux balises div afin de pouvoir déterminer leur emplacement sur la page.
La présente section contient les rubriques suivantes :
■
Présentation de la visualisation de mise en forme CSS, page 252
■
Affichage des blocs de mise en forme CSS, page 253
■
Utilisation de feuilles de style à la conception avec des blocs de mise en forme CSS, page 253
Utilisation de la visualisation de mise en forme CSS
251
Présentation de la visualisation de mise en forme
CSS
Dreamweaver vous permet de 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
indique les contours de tous les blocs de mise en forme CSS sur la
page.
Arrière-plans de mise en forme CSS indique
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ères-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.
252
Chapitre 7: Mise en forme des pages avec les styles CSS
Modèle de boîte de mise en forme CSS indique 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. Pour savoir plus sur le rendu de chaque aide visuelle, consultez la section
Présentation de la visualisation de mise en forme CSS, page 252.
Pour afficher les contours des blocs de mise en forme CSS :
■
Choisissez Affichage > Assistances visuelles > Contours en feuille CSS.
Pour afficher les arrière-plans des blocs de mise en forme CSS :
■
Choisissez Affichage > Assistances visuelles > Arrière-plans de mise en forme CSS.
Pour afficher les 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.
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 de feuilles de style à la conception avec
des blocs de mise en forme 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é.
Pour utiliser les assistances visuelles des blocs de mise en forme CSS avec
des éléments de blocs de mise en forme non-CSS :
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 affecte 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{
Utilisation de la visualisation de mise en forme CSS
253
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 Texte > 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.
Rubriques connexes
■
Utilisation de feuilles de style à la conception, page 453
Utilisation des règles, des guides et de la
grille pour la mise en forme des pages
Utilisez les règles, les guides et la grille comme aides visuelles pour positionner, mesurer ou
redimensionner les éléments dans la fenêtre de création du document.
Utilisation des 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 modifier les paramètres des règles, procédez de l'une des manières
suivantes :
■
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.
254
Chapitre 7: Mise en forme des pages avec les styles CSS
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 Pixels, Pouces ou
Centimètres.
Utilisation des guides
Les guides 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
guides pour mesurer la taille des éléments d'une page ou simuler les plis (zones visibles) des
navigateurs Web.
Pour vous aider à aligner les éléments, Dreamweaver vous permet de les aligner aux guides et
vice-versa (les éléments doivent être à positionnement absolu pour l'alignement puisse
fonctionner). Vous pouvez également verrouiller les guides pour qu'ils ne soient pas déplacés
de façon accidentelle par un autre utilisateur.
Pour créer un guide horizontal ou vertical :
1.
Faites glisser le guide à partir de la règle correspondante.
2.
Positionnez le guide dans la fenêtre de document et relâchez le bouton de la souris.
Vous pouvez repositionner le guide en le faisant glisser de nouveau.
REMARQUE
par défaut, les guides sont enregistrés en tant qu'unités de mesure 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 guide sous la forme d'un
pourcentage, appuyez sur la touche Maj lorsque vous créez ou déplacez le guide.
Pour afficher ou masquer les guides :
■
Choisissez Affichage > Guides > Afficher les guides.
Pour aligner les éléments sur les guides :
■
Choisissez Affichage > Guides > Accrocher aux guides.
R E M AR QU E
lorsque vous redimensionnez des éléments (calques, tableaux et images, par
exemple), ils sont alignés sur les guides.
Pour aligner les guides sur les éléments :
■
Choisissez Affichage > Guides > Aligner les guides sur les éléments.
Utilisation des règles, des guides et de la grille pour la mise en forme des pages
255
Pour verrouiller ou déverrouiller tous les guides :
■
Choisissez Affichage > Guides > Verrouiller les guides.
Pour déplacer un guide vers une position spécifique :
1.
Double-cliquez sur le guide.
2.
Entrez la nouvelle postion dans la boîte de dialogue Déplacer le guide et cliquez sur OK.
Pour afficher la position d'un guide :
■
Maintenez le pointeur de la souris sur le guide.
Pour afficher la distance entre les guides :
■
Appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) et déplacez le
pointeur de la souris n'importe où entre les deux guides.
REMARQUE
L'unité de mesure est la même que celle utilisée pour les règles.
Pour modifier la couleur du guide :
1.
Choisissez Affichage > Guides > Modifier les guides.
2.
Sélectionnez la nouvelle couleur des guides depuis le menu déroulant Couleur repères et
cliquez sur OK.
Pour modifier la couleur qui indique la distance entre les guides :
1.
Choisissez Affichage > Guides > Modifier les guides.
2.
Sélectionnez la couleur dans le menu déroulant Couleur distance et cliquez sur OK.
Pour simuler le pli (zone visible) d'un navigateur Web :
■
Choisissez Affichage > Guides puis sélectionnez une taille de navigateur prédéfini dans le
menu.
Pour supprimer un guide :
■
Faites glisser le guide hors du document.
Pour effacer tous les guides :
■
Choisissez Affichage > Guides > Effacer les guides.
256
Chapitre 7: Mise en forme des pages avec les styles CSS
Utilisation des guides avec des modèles
Lorsque les guides sont ajoutés à un modèle Dreamweaver, toutes les instances du modèle
héritent des guides. Les guides dans les instances de modèle, cependant, sont traités comme
des régions modifiables par les utilisateurs. Les guides 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 guides 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.
Rubriques connexes
■
Redimensionnement des calques, page 233
■
Déplacement des calques, page 234
■
Alignement des calques, page 235
Utilisation de la grille
La grille affiche un système de lignes horizontales et verticales dans la fenêtre de document.
Ceci 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.
Pour afficher ou masquer la grille :
■
Choisissez Affichage > Grille > Afficher la grille.
Pour activer ou désactiver l'alignement :
■
Choisissez Affichage > Grille > Aligner sur la grille.
Pour modifier les paramètres de la grille :
1.
Choisissez Affichage > Grille > Paramètres de la grille.
Utilisation des règles, des guides et de la grille pour la mise en forme des pages
257
La boîte de dialogue Paramètres de la grille apparaît.
2.
Définissez les options de votre choix.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
3.
Cliquez sur OK.
Rubriques connexes
■
Redimensionnement des calques, page 233
■
Déplacement des calques, page 234
■
Alignement des calques, page 235
Utilisation du tracé de l'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 que Macromedia Freehand ou Fireworks.
Un tracé 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.
Pour placer un tracé de l'image dans la fenêtre de document :
1.
2.
Procédez de l'une des manières 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.
Dans la boîte de dialogue qui s'affiche, sélectionnez un fichier d'image, puis cliquez sur
Sélectionner (Windows) ou Choisir (Macintosh).
.
3.
Définissez la transparence de l'image en ajustant le curseur Transparence de l'image, puis
cliquez sur OK.
258
Chapitre 7: Mise en forme des pages avec les styles CSS
Pour passer à un autre tracé ou modifier à tout moment la transparence du tracé en cours,
choisissez Modifier > Propriétés de la page.
Pour afficher ou masquer le tracé de l'image :
■
Choisissez Affichage > Tracé de l'image > Afficher.
Le tracé de l'image n'est visible que dans Dreamweaver. Il est toujours invisible 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.
Pour déplacer un tracé de l'image :
1.
Sélectionnez Affichage > Tracé de l'image > Ajuster la position.
2.
Procédez de l'une des manières suivantes :
■
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 d'un 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.
Pour rétablir 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).
Pour aligner le 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é.
Utilisation du tracé de l'image
259
260
Chapitre 7: Mise en forme des pages avec les styles CSS
CHAPITRE 8
8
Présentation de contenu à
l'aide de 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.
un grand nombre de concepteurs utilisent des tableaux pour mettre des pages Web en forme.
Macromedia Dreamweaver 8 offre deux méthodes pour afficher et modifier les tableaux : le
mode Standard, dans lequel les tableaux sont présentés comme une grille de lignes et de
colonnes, et le mode Mise en forme, qui permet de dessiner, redimensionner et déplacer des
rectangles sur la page tout en continuant d'utiliser les tableaux comme structure sous-jacente
(voir Chapitre 9, Mise en forme des pages avec le mode Mise en forme, page 289).
REMARQUE
Vous avez aussi la possibilité de mettre vos pages en forme à l'aide du positionnement
par feuilles de style en cascade CSS (voir Chapitre 7, Mise en forme des pages avec les
styles CSS, page 221).
Ce chapitre contient les sections suivantes :
A propos des tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .262
Insertion d'un tableau et ajout de contenu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .264
Importation et exportation de données tabulaires. . . . . . . . . . . . . . . . . . . . . . . . . . . .265
Sélection d'éléments de tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .266
Utilisation du mode Tableaux développés pour une modification de
tableau plus simple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .270
Mise en forme des tableaux et des cellules. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272
Redimensionnement des tableaux, des colonnes et des lignes . . . . . . . . . . . . . . . . 275
Ajout et suppression de lignes et de colonnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280
Fractionnement et fusion de cellules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .282
Copie, collage et suppression de cellules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .284
Imbrication de tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .286
Tri des tableaux. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .286
261
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.
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 ou désactiver les largeurs et les menus à votre convenance (voir Affichage des
menus et de la largeur d'un tableau et des colonnes, page 280).
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).
Pour uniformiser les largeurs de colonne, voir Uniformisation des largeurs de colonne en mode
Code avec les largeurs visuelles, page 278.
Rubriques connexes
■
Insertion d'un tableau et ajout de contenu, page 264
Priorité de mise en forme des tableaux dans le
code HTML
Lorsque vous mettez des tableaux en forme 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 mise en forme des cellules prévalent sur les propriétés de
mise en forme de lignes, qui à leur tour prévalent sur les propriétés de mise en forme du
tableau.
262
Chapitre 8: Présentation de contenu à l'aide de tableaux
L'ordre de priorité pour la mise en forme 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 mise en forme de cellule a la priorité sur la propriété de mise en forme 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.
Rubriques connexes
■
Mise en forme des tableaux et des cellules, page 272
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 réorganise automatiquement le tableau (en ajoutant les attributs colspan ou
rowspan nécessaires) pour obtenir l'agencement spécifié.
Dans l'illustration 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.
Rubriques connexes
■
Fractionnement et fusion de cellules, page 282
A propos des tableaux
263
Insertion d'un tableau et ajout de contenu
Utilisez la barre ou le menu Insérer 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
(voir Chapitre 13, Insertion et mise en forme de texte, page 415 et Chapitre 14, Insertion
d’images, page 457).
Pour insérer un tableau :
1.
Dans la fenêtre Création du document, placez le point d'insertion à l'endroit où vous
voulez que le tableau apparaisse.
REMARQUE
2.
Si votre document est vide, le point d'insertion peut uniquement être placé au début
du document.
Procédez de l'une des manières suivantes :
■
Choisissez Insertion > Tableau.
■
Dans la catégorie Commun de la barre Insérer, cliquez sur le bouton Tableau.
La boîte de dialogue Tableau s'affiche.
3.
Complétez les options de la boîte de dialogue.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
4.
Cliquez sur OK.
Le tableau apparaît dans le document.
264
Chapitre 8: Présentation de contenu à l'aide de tableaux
Rubriques connexes
■
Affichage et définition des propriétés de tableau, de cellule, de ligne et de colonne, page 272
■
Modification des attributs d'accessibilité d'un tableau, page 273
Importation et exportation de données
tabulaires
Vous pouvez importer dans un tableau Dreamweaver 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).
Vous pouvez également exporter les données d'un tableau 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.
C ON S E I L
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.
Pour importer les données d'un tableau :
1.
Procédez de l'une des manières suivantes :
■
Choisissez Fichier > Importer > Données tabulaires.
■
Choisissez Insertion > Objets du tableau > Importer les données tabulaires.
La boîte de dialogue Importer les données tabulaires s'affiche.
Importation et exportation de données tabulaires
265
2.
Dans la boîte de dialogue, entrez des informations sur le fichier contenant vos données.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
3.
Cliquez sur OK.
Pour exporter un tableau :
1.
Placez le point d'insertion dans l'une des cellules du tableau.
2.
Choisissez Fichier > Exporter > Tableau.
La boîte de dialogue Exporter tableau s'affiche.
3.
Dans la boîte de dialogue Exporter tableau, spécifiez les options pour l'exportation du
tableau.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
4.
Cliquez sur Exporter.
La boîte de dialogue Exporter tableau sous s'affiche.
5.
Entrez le nom du fichier.
6.
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.
266
Chapitre 8: Présentation de contenu à l'aide de tableaux
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 lorsque vous cliquerez sur la sélection. 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.
C O N S E IL
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.
Pour modifier la couleur de surbrillance pour la sélection des éléments de
tableau :
1.
Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
La boîte de dialogue Préférences s'affiche.
2.
Sélectionnez la catégorie Surbrillance dans la liste de gauche.
3.
Apportez l'une des modifications suivantes :
■
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 plus d'informations sur l'utilisation du sélecteur de couleur, consultez la section
Utilisation des couleurs, page 393.
■
Pour activer ou désactiver la sélection d'éléments du tableau, activez ou désactivez la
case à cocher Afficher de l'option Survol.
R E M A R QU E
4.
Ces options ont un impact sur tous les objets, tels que les calques ou encore les
tableaux et cellules en mode Mise en forme, que Dreamweaver met en
surbrillance lorsque vous déplacez le pointeur au-dessus.
Cliquez sur OK.
Rubriques connexes
■
Mise en forme des tableaux et des cellules, page 272
■
Redimensionnement des tableaux, des colonnes et des lignes, page 275
■
Copie, collage et suppression de cellules, page 284
Sélection d'éléments de tableau
267
Sélection d'une table
Plusieurs méthodes vous permettent de sélectionner un tableau entier.
Pour sélectionner un tableau entier, procédez de l'une des manières
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é.
Rubriques connexes
■
Sélection de cellules, page 269
Sélection de lignes ou de colonnes
Vous pouvez sélectionner une ligne ou une colonne individuelle, ou plusieurs lignes ou
colonnes.
268
Chapitre 8: Présentation de contenu à l'aide de tableaux
Pour sélectionner 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.
Pour sélectionner 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.
Rubriques connexes
Sélection d'une table, page 268
■
Sélection de cellules
Vous pouvez sélectionner une cellule individuelle, une ligne ou un bloc de cellules, ou encore
des cellules non contiguës. Pour sélectionner des lignes ou des colonnes entières, voir Sélection
de lignes ou de colonnes, page 268.
Pour sélectionner une seule cellule, procédez de l'une des manières 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.
C ON S E I L
Lorsqu'une cellule est déjà sélectionnée, choisissez Edition > Sélectionner tout à
nouveau pour sélectionner tout le tableau.
Sélection d'éléments de tableau
269
Pour sélectionner une ligne ou un bloc rectangulaire de cellules, procédez de
l'une des manières suivantes :
■
Faites glisser la souris d'une cellule à 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.
Pour sélectionner des cellules non contiguës :
■
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.
Rubriques connexes
■
Sélection d'une table, page 268
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.
270
Chapitre 8: Présentation de contenu à l'aide de tableaux
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.
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.
Pour passer au mode Tableaux développés :
1.
Si vous travaillez en mode Code, choisissez Affichage > Création ou Affichage > Code et
création.
Il est impossible d'activer le mode Tableaux développés en mode Code.
2.
Procédez de l'une des manières suivantes :
■
Choisissez Affichage > Mode Tableau > Mode Tableaux développés.
■
Dans la catégorie Mise en forme de la barre Insérer, cliquez sur le bouton Développé.
Une barre intitulée Mode Tableaux développés apparaît en haut de la fenêtre de document.
Dreamweaver ajoute de la marge à l'intérieur des cellules et de l'espacement à tous les tableaux
de la page et augmente les bordures des tableaux.
Pour passer au mode Tableaux développés, procédez de l'une des manières
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 de la barre Insérer, cliquez sur le bouton Standard.
Dreamweaver repasse en mode Standard.
Utilisation du mode Tableaux développés pour une modification de tableau plus simple
271
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 des tableaux et des cellules, il est judicieux de comprendre quelles
propriétés ont priorité sur les autres (voir Priorité de mise en forme des tableaux dans le
code HTML, page 262).
C ON S E I L
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. Pour plus d'informations, voir Chapitre 13,
Insertion et mise en forme de texte, page 415.
Rubriques connexes
■
Redimensionnement des tableaux, des colonnes et des lignes, page 275
Affichage et définition des propriétés de tableau, de
cellule, de ligne et de colonne
Lorsqu'un tableau ou une cellule est sélectionné, l'inspecteur Propriétés vous permet de
visualiser et de modifier ses propriétés.
REMARQUE
Avant de modifier les propriétés des éléments de tableau, il est judicieux de comprendre
quelles propriétés ont priorité sur les autres (voir Priorité de mise en forme des tableaux
dans le code HTML, page 262).
Pour afficher et définir les propriétés des tableaux et les propriétés d'un
élément de tableau :
1.
Sélectionnez un tableau, une cellule, une ligne ou une colonne (voir Sélection d'éléments de
tableau, page 266).
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.
3.
Modifiez les propriétés de votre choix.
272
Chapitre 8: Présentation de contenu à l'aide de tableaux
Pour plus d'informations, cliquez sur le bouton 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.
Modification des attributs d'accessibilité d'un tableau
Si vous n'avez pas ajouté d'attributs d'accessibilité à votre tableau lors de son insertion (voir
Insertion d'un tableau et ajout de contenu, page 264) et qu'il vous faut les ajouter plus tard, ou
si vous devez modifier les attributs d'accessibilité, vous pouvez le faire en mode Code ou
Création.
Pour ajouter ou modifier les valeurs d'accessibilité d'un tableau en mode
Code :
■
Modifiez les attributs dans le code.
CONSEIL
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.
Pour ajouter ou modifier les valeurs d'accessibilité d'un tableau en mode
Création, procédez de l'une des manières suivantes :
■
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.
■
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.
Rubriques connexes
■
Affichage et définition des propriétés de tableau, de cellule, de ligne et de colonne, page 272
Mise en forme des tableaux et des cellules
273
Utilisation d'un modèle de mise en forme pour
formater un tableau
Utilisez la commande Formater le tableau pour appliquer rapidement une mise en forme
prédéfinie à un tableau. Vous pouvez alors choisir des options de mise en forme.
REMARQUE
Seuls les tableaux simples peuvent être mis en forme à l'aide de conceptions
prédéfinies. Vous ne pouvez pas utiliser ces conceptions pour mettre en forme des
tableaux contenant des cellules fusionnées (colspan ou rowspan), des groupes de
colonnes ou tout autre tableau qui ne soit pas une simple grille rectangulaire de cellules.
Pour utiliser une mise en forme de tableau prédéfinie :
1.
Sélectionnez un tableau (voir Sélection d'une table, page 268).
2.
Choisissez Commandes > Formater le tableau.
La boîte de dialogue Formater le tableau s'affiche.
3.
Personnalisez les options selon vos besoins.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
4.
274
Cliquez sur Appliquer ou sur OK pour mettre en forme votre tableau avec la mise en forme
sélectionnée.
Chapitre 8: Présentation de contenu à l'aide de tableaux
Redimensionnement des tableaux, des
colonnes et des lignes
Vous pouvez redimensionner tout un tableau ou seulement certaines cellules ou certaines
colonnes individuelles. Si vous avez des problèmes pour le redimensionnement, vous pouvez
effacer la largeur des colonnes ou la hauteur des lignes et recommencer.
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 d'un tableau
Vous pouvez redimensionner un tableau en faisant glisser l'une de ses poignées de sélection.
Dreamweaver affiche la largeur du tableau, ainsi que le menu des en-têtes du tableau, en haut
ou en bas du tableau lorsque celui-ci est sélectionné ou que le point d'insertion se trouve
dedans.
REMARQUE
Vous pouvez activer ou désactiver ces informations à votre convenance (voir Affichage
des menus et de la largeur d'un tableau et des colonnes, page 280).
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. Pour
effacer les largeurs et les hauteurs définies, voir Suppression des largeurs et hauteurs définies,
page 279.
Pour redimensionner un tableau :
1.
Sélectionnez le tableau (voir Sélection d'une table, page 268).
Redimensionnement des tableaux, des colonnes et des lignes
275
Des poignées de sélection s'affichent sur le tableau.
2.
Procédez de l'une des manières suivantes :
■
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.
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 (voir Suppression des largeurs et hauteurs définies, page 279).
REMARQUE
Vous pouvez aussi modifier la largeur et la hauteur des cellules directement dans le code
HTML à l'aide du mode Code. Pour plus d'informations, voir Codage dans Dreamweaver,
page 617.
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. Pour plus d'informations, voir A propos des tableaux, page 262.
R E M AR QU E
Vous pouvez activer ou désactiver ces informations à votre convenance (voir Affichage
des menus et de la largeur d'un tableau et des colonnes, page 280).
Pour modifier la largeur d'une colonne tout en conservant la même largeur de
tableau :
■
276
Faites glisser la bordure droite de la colonne à modifier.
Chapitre 8: Présentation de contenu à l'aide de tableaux
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 du tableau est
modifiée et toutes les colonnes s'adaptent proportionnellement.
Pour modifier 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.
Pour modifier la hauteur d'une ligne visuellement :
■
Faites glisser la bordure inférieure de la ligne.
Pour définir la largeur d'une colonne ou la hauteur d'une ligne à l'aide de
l'inspecteur Propriétés :
1.
Sélectionnez une colonne ou une ligne (voir Sélection de lignes ou de colonnes, page 268).
2.
Dans l'inspecteur Propriétés (Fenêtre > Propriétés), saisissez une valeur dans le champ de
texte L pour la largeur de la colonne ou dans le champ de texte H pour la hauteur de la
colonne.
Redimensionnement des tableaux, des colonnes et des lignes
277
Pour plus d'informations, cliquez sur le bouton Aide de l'inspecteur Propriétés.
CONSEIL
3.
Vous pouvez spécifier la largeur ou la hauteur par des pixels ou des pourcentages.
Vous pouvez convertir les pixels en pourcentages et inversement.
Appuyez sur Tab ou Entrée (Windows) ou Retour (Macintosh) pour appliquer la valeur.
Rubriques connexes
■
Redimensionnement d'un tableau, page 275
■
Suppression des largeurs et hauteurs définies, page 279
■
Affichage des menus et de la largeur d'un tableau et des colonnes, page 280
Uniformisation des largeurs de colonne en mode
Code avec les largeurs visuelles
Si vous voyez deux nombres indiquant la largeur d'une colonne, cela signifie que la largeur de
colonne définie dans le code HTML est différente de la largeur apparente à l'écran. Vous
pouvez uniformiser la largeur spécifiée dans le code et la largeur visuelle. Pour plus
d’informations, consultez la section A propos des tableaux, page 262.
Pour uniformiser les largeurs :
1.
Cliquez dans une cellule.
2.
Cliquez sur le menu des en-têtes de colonne, puis choisissez Uniformiser toutes les largeurs.
Dreamweaver redéfinit la largeur spécifiée dans le code sur la largeur visuelle.
Rubriques connexes
■
Redimensionnement d'un tableau, page 275
■
278
Redimensionnement des colonnes et des lignes, page 276
Chapitre 8: Présentation de contenu à l'aide de tableaux
Suppression des largeurs et hauteurs définies
Pour recommencer depuis le début, il peut être utile d'effacer les largeurs et les hauteurs
définies avant de redimensionner un tableau ou en cas de problème lors du
redimensionnement de colonnes ou de lignes individuelles d'un tableau.
REMARQUE
Lorsque vous redimensionnez un tableau en faisant glisser l'une de ses poignées de
sélection, vous modifiez la dimension visuelle des cellules dans le tableau mais vous ne
modifiez pas les largeurs et hauteurs spécifiées des cellules. Il est judicieux de supprimer
des largeurs et des hauteurs définies avant le redimensionnement.
Pour effacer toutes les largeurs et les hauteurs définies dans un tableau :
1.
Sélectionnez le tableau (voir Sélection d'une table, page 268).
2.
Procédez de l'une des manières suivantes :
■
Choisissez Modifier > Tableau > Effacer les largeurs de colonnes ou Modifier >
Tableau > Effacer les hauteurs de cellules.
■
Dans l'inspecteur Propriétés (Fenêtre > Propriétés), cliquez sur le bouton Effacer les
hauteurs de ligne ou sur le bouton Effacer les largeurs de colonne.
■
Cliquez sur le menu des en-têtes de colonne, puis choisissez Effacer toutes les hauteurs
ou Effacer toutes les largeurs.
Pour effacer une largeur de colonne définie :
1.
Cliquez dans la colonne.
2.
Cliquez sur le menu des en-têtes de colonne, puis choisissez Effacer les largeurs de colonne.
Rubriques connexes
■
Redimensionnement d'un tableau, page 275
■
Redimensionnement des colonnes et des lignes, page 276
■
Uniformisation des largeurs de colonne en mode Code avec les largeurs visuelles, page 278
Redimensionnement des tableaux, des colonnes et des lignes
279
Affichage des menus et de la largeur d'un tableau et
des colonnes
Dreamweaver affiche la largeur des colonnes et du tableau, ainsi que les flèches permettant
d'accéder au menu des en-têtes du tableau et aux menus des en-têtes des colonnes, lorsque le
tableau est sélectionné ou que le point d'insertion se trouve dedans. (Pour plus
d'informations, voir A propos des tableaux, page 262). Vous pouvez activer et désactiver les
largeurs et les menus à votre convenance.
Pour activer ou désactiver les largeurs et les menus de tableau et de colonnes,
procédez de l'une des manières suivantes :
■
Choisissez Affichage > Assistances visuelles > Largeurs de tableau.
■
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.
Rubriques connexes
■
Redimensionnement d'un tableau, page 275
■
Redimensionnement des colonnes et des lignes, page 276
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 en-têtes de colonne.
C ON S E I L
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.
Pour ajouter une ligne ou une colonne individuelle :
1.
Cliquez dans une cellule.
2.
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.
280
Chapitre 8: Présentation de contenu à l'aide de tableaux
■
Cliquez sur le menu des en-têtes de colonne, puis choisissez Insérer une colonne à
gauche ou Insérer une colonne à droite.
Une colonne s'affiche à gauche ou à droite du point d'insertion.
Pour ajouter plusieurs lignes ou colonnes :
1.
Cliquez dans une cellule.
2.
Choisissez Modifier > Tableau > Insérer des lignes ou des colonnes.
La boîte de dialogue Insérer des lignes ou des colonnes s'affiche.
3.
Choisissez Lignes ou Colonnes, puis complétez la boîte de dialogue.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
4.
Cliquez sur OK.
Les lignes ou les colonnes s'affichent dans le tableau.
Pour supprimer une ligne ou une colonne, procédez de l'une des manières
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 (voir Sélection de lignes ou de colonnes,
page 268), puis choisissez Edition > Effacer ou appuyez sur la touche Suppr.
La ligne ou la colonne entière disparaît du tableau.
Pour ajouter ou supprimer des lignes ou des colonnes en utilisant l'inspecteur
Propriétés :
1.
Sélectionnez le tableau (voir Sélection d'une table, page 268).
2.
Dans l'inspecteur Propriétés (Fenêtre > Propriétés), procédez de l'une des manières
suivantes :
■
Augmentez ou réduisez la valeur indiquant le nombre de lignes pour en ajouter ou en
supprimer.
Dreamweaver ajoute ou supprime des lignes au bas du tableau.
■
Augmentez ou réduisez la valeur indiquant le nombre de colonnes pour en ajouter ou
en supprimer.
Ajout et suppression de lignes et de colonnes
281
Dreamweaver ajoute ou supprime des colonnes à droite du tableau.
REMARQUE
Dreamweaver ne vous avertit pas si vous supprimez des lignes et des colonnes
contenant des données.
Rubriques connexes
■
Insertion d'un tableau répété, page 360
■
Affichage de plusieurs résultats d'un jeu d'enregistrements, page 822
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. Pour plus d'informations, voir A propos du
fractionnement et de la fusion de cellules de tableau, page 263.
Pour fusionner ou fractionner des cellules, Dreamweaver permet également d'augmenter ou
de réduire le nombre de lignes et de colonnes occupées par une cellule.
Pour fusionner deux cellules ou plus 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.
Dans l'illustration ci-dessous, la sélection n'est pas un rectangle ; les cellules ne peuvent
donc pas être fusionnées.
282
Chapitre 8: Présentation de contenu à l'aide de tableaux
2.
Procédez de l'une des manières suivantes :
■
Choisissez Modifier > Tableau > Fusionner les cellules.
■
Dans l'inspecteur Propriétés (Fenêtre > Propriétés) en mode agrandi, cliquez sur le
bouton Fusionner les cellules.
REMARQUE
Si le bouton n'est pas visible, cliquez sur la flèche 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.
Pour fractionner une cellule :
1.
Cliquez dans la cellule.
2.
Procédez de l'une des manières suivantes :
■
Choisissez Modifier > Tableau > Fractionner la cellule.
■
Dans l'inspecteur Propriétés (Fenêtre > Propriétés) en mode agrandi, cliquez sur le
bouton Fractionner la cellule.
REMARQUE
3.
Si le bouton n'est pas visible, cliquez sur la flèche dans le coin inférieur droit de
l'inspecteur Propriétés pour afficher toutes les options.
Dans la boîte de dialogue Fractionner la cellule, spécifiez comment vous voulez fractionner
la cellule.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
Pour augmenter ou réduire le nombre de lignes ou de colonnes occupées par
une cellule :
1.
Sélectionnez une cellule.
2.
Procédez de l'une des manières 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.
Fractionnement et fusion de cellules
283
Copie, collage et suppression de cellules
Vous pouvez copier, coller ou supprimer une ou plusieurs cellules tout en préservant leur mise
en forme.
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.
Pour couper ou copier les cellules d'un tableau :
1.
Sélectionnez une ou plusieurs 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 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.
R E MA R Q U E
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).
Pour coller des cellules de tableau :
1.
Choisissez l'emplacement où coller les cellules :
284
Chapitre 8: Présentation de contenu à l'aide de tableaux
■
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 coupées
ou copié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
■
2.
Si vous avez placé moins d'une ligne ou d'une colonne entière dans le Pressepapiers 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.
Sélectionnez 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.
Pour supprimer le contenu d'une cellule en conservant les cellules intactes :
1.
Sélectionnez une ou plusieurs cellules.
R E M A R QU E
2.
Veillez à ce que la sélection ne comprenne pas de lignes ou de colonnes entières.
Choisissez Edition > Effacer ou appuyez sur la touche Suppr.
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.
Copie, collage et suppression de cellules
285
Pour effacer des lignes ou des 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.
Pour imbriquer un tableau à l'intérieur d'une cellule de tableau :
1.
Cliquez dans une cellule du tableau.
2.
Choisissez Insertion > Tableau.
La boîte de dialogue Tableau s'affiche.
3.
Complétez les options de la boîte de dialogue.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
4.
Cliquez sur OK.
Le tableau s'affiche dans le tableau existant.
Tri des 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 des attributs colspan ou rowspan, c'est-à-dire
les tableaux contenant des cellules fusionnées. Pour plus d'informations, voir Fractionnement
et fusion de cellules, page 282.
286
Chapitre 8: Présentation de contenu à l'aide de tableaux
Pour trier un tableau :
1.
Sélectionnez le tableau (voir Sélection d'une table, page 268) ou cliquez dans une cellule.
2.
Choisissez Commandes > Trier le tableau.
La boîte de dialogue Trier le tableau s'affiche.
3.
Complétez les options de la boîte de dialogue.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
4.
Cliquez sur OK.
Tri des tableaux
287
288
Chapitre 8: Présentation de contenu à l'aide de tableaux
CHAPITRE 9
9
Mise en forme des pages
avec le mode Mise en forme
Une méthode courante pour créer une mise en page consiste à utiliser des tableaux HTML
pour positionner les éléments. Cependant, il peut être difficile d'utiliser les tableaux pour les
mises en page, car ils ont été créés à l'origine pour afficher des données tabulaires et non pour
mettre en forme des pages Web. Pour simplifier l'utilisation de tableaux pour la mise en page,
Macromedia Dreamweaver 8 met à votre disposition un mode Mise en forme.
En mode Mise en forme, vous pouvez créer votre page en utilisant des tableaux comme
structure sous-jacente, tout en évitant certains problèmes qui surviennent souvent lors de la
création de pages réalisée à partir de tableaux à l'aide de méthodes traditionnelles.
REMARQUE
Pour plus d'informations sur l'utilisation de tableaux en mode Standard, voir Chapitre 8,
Présentation de contenu à l'aide de tableaux, page 261. Vous pouvez également effectuer
la mise en page à l'aide du positionnement CSS (voir Insertion de balises div pour des
mises en forme, page 248) au lieu des tableaux en mode Standard ou Mise en forme.
Ce chapitre contient les sections suivantes :
A propos du mode Mise en forme. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290
Basculement du mode Standard au mode Mise en forme . . . . . . . . . . . . . . . . . . . 294
Réalisation de dessins en mode Mise en forme. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295
Ajout de contenu dans une cellule de mise en forme . . . . . . . . . . . . . . . . . . . . . . . . 299
Suppression automatique des hauteurs de cellule . . . . . . . . . . . . . . . . . . . . . . . . . . . 301
Redimensionnement et déplacement de cellules et tableaux de mise en
forme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302
Formatage de cellules et de tableaux de mise en forme . . . . . . . . . . . . . . . . . . . . . 304
Définition de la largeur des colonnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305
Définition de préférences pour le mode Mise en forme . . . . . . . . . . . . . . . . . . . . . . 308
289
A propos du mode Mise en forme
En mode Mise en forme, effectuez la mise en page à l'aide de cellules et de tableaux de mise en
forme, avant d'ajouter du contenu sur votre page. Par exemple, vous pouvez dessiner une
cellule le long du bord supérieur de votre page pour y placer une image d'en-tête, une autre
cellule sur le côté gauche pour y placer une barre de navigation et une troisième cellule sur la
droite pour les contenus. Lorsque vous ajoutez du contenu, vous pouvez déplacer les cellules
afin d'ajuster la mise en forme.
C ON S E I L
Pour bénéficier d'une flexibilité maximale, vous pouvez dessiner chaque cellule
uniquement lorsque vous êtes sur le point d'y placer du contenu. Vous pouvez ainsi
laisser davantage d'espace vide dans le tableau de mise en forme, afin de pouvoir
déplacer ou redimensionner les cellules plus facilement.
Les tableaux de mise en forme s'affichent avec un contour vert et les cellules de mise en forme
avec un contour bleu sur votre page. (Pour changer les couleurs de contour par défaut, voir
Définition de préférences pour le mode Mise en forme, page 308.) Lorsque vous faites passer le
pointeur sur une cellule de tableau, Dreamweaver met la cellule en surbrillance. (Pour activer
ou désactiver la surbrillance ou pour en changer la couleur, voir Dessin de cellules et de tableaux
de mise en forme, page 295.)
Vous pouvez effectuer la mise en forme de votre page à l'aide de plusieurs cellules de mise en
forme à l'intérieur d'un même tableau. Il s'agit de la méthode la plus utilisée sur les pages
Web. Vous pouvez également effectuer une mise en forme plus sophistiquée à l'aide de
plusieurs tableaux. L'utilisation de plusieurs tableaux permet d'isoler certaines zones afin
qu'elles ne soient pas affectées par les changements opérés dans d'autres.
290
Chapitre 9: Mise en forme des pages avec le mode Mise en forme
Vous pouvez également imbriquer des tableaux, c'est-à-dire insérer un nouveau tableau de
mise en forme dans un tableau existant (voir Dessin d'un tableau de mise en forme imbriqué,
page 298). Ce procédé permet de simplifier la structure du tableau lorsque les lignes ou les
colonnes d'une partie de la mise en forme ne sont pas alignées avec celles qui figurent ailleurs
dans la mise en forme. Par exemple, en utilisant des tableaux imbriqués, vous pouvez
facilement créer une mise en forme à deux colonnes avec quatre lignes dans la colonne gauche
et trois lignes dans la colonne droite.
Rubriques connexes
■
Basculement du mode Standard au mode Mise en forme, page 294
■
Réalisation de dessins en mode Mise en forme, page 295
A propos de l'affichage de la largeur des tableaux et
des cellules en mode Mise en forme
La largeur des tableaux et des cellules de mise en forme (en pixels ou en pourcentage de la
largeur de la page) s'affiche en haut ou en bas du tableau lorsque celui-ci est sélectionné ou
lorsque le point d'insertion se trouve à l'intérieur. Près de la largeur se trouvent des flèches
permettant d'ouvrir les menus d'en-tête de tableau et de colonne. Vous pouvez accéder
rapidement à des commandes courantes à l'aide de ces menus.
REMARQUE
Pour désactiver la largeur des colonnes, ainsi que les onglets de tableau et les menus
d'en-tête, vous devez désactiver toutes les assistances visuelles (Affichage >
Assistances visuelles > Masquer tout).
Parfois, la largeur d'une colonne ne s'affiche pas. Elle peut alors être remplacée par l'un des
éléments suivants :
■
Absence de largeur. 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. Pour spécifier une largeur fixe, voir
Application de l'extension automatique ou d'une largeur fixe à une colonne, page 305.
A propos du mode Mise en forme
291
■
Deux nombres. 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 en haut de la
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).
Pour uniformiser les largeurs de colonne, voir Uniformisation des largeurs de colonne en
mode Code avec les largeurs visuelles, page 308.
■
Ligne ondulée. Une ligne ondulée s'affiche pour les colonnes dont l'option Extension
automatique est activée. Pour plus d'informations sur l'activation de l'option Extension
automatique d'une colonne, voir Application de l'extension automatique ou d'une largeur
fixe à une colonne, page 305.
■
Barre double. La largeur des colonnes qui contiennent des images d'espacement est
entourée d'une barre double. Pour plus d'informations sur les images d'espacement, voir
Utilisation des images d'espacement, page 306.
Rubriques connexes
■
Définition de la largeur des colonnes, page 305
Tableau de mise en forme et lignes de grille de
cellules
Lorsque vous dessinez une cellule de mise en forme dans un tableau, une fine grille de lignes
s'affiche, prolongeant les bords de la nouvelle cellule jusqu'aux bords du tableau qui la
contient. Ces lignes vous aident à aligner les nouvelles cellules avec les anciennes et à visualiser
la structure du tableau HTML sous-jacent.
Dreamweaver aligne automatiquement les bords des nouvelles cellules sur ceux des anciennes.
Les cellules de mise en forme ne peuvent pas se chevaucher. Les bords des cellules sont
automatiquement alignés sur ceux du tableau de mise en forme qui les contient si vous
dessinez une cellule à proximité du bord d'un tableau.
Vous pouvez également vous aider de la grille de Dreamweaver, qui est fixe et ne change pas
selon la disposition des cellules, pour effectuer la mise en forme de votre page (voir Utilisation
du tracé de l'image, page 258).
292
Chapitre 9: Mise en forme des pages avec le mode Mise en forme
Rubriques connexes
■
A propos du mode Mise en forme, page 290
Largeur de colonne fixe et colonnes à extension
automatique
En mode Mise en forme, une colonne peut avoir une largeur fixe ou une largeur qui s'étend
automatiquement pour remplir autant que possible la fenêtre du navigateur (extension
automatique).
Les colonnes à largeur fixe ont une largeur numérique spécifique, par exemple 300 pixels.
Dreamweaver affiche la largeur de chacune en haut ou en bas de la colonne.
Les colonnes à extension automatique changent automatiquement selon la largeur de la
fenêtre du navigateur. Si votre mise en forme inclut une colonne d'extension automatique, elle
remplit toujours la largeur totale de la fenêtre de navigateur de l'utilisateur. Dans un tableau
de mise en forme, vous ne pouvez appliquer l'extension automatique qu'à une seule colonne.
Une ligne ondulée s'affiche dans la zone de largeur des colonnes à extension automatique.
La mise en page la plus courante consiste à appliquer l'extension automatique à la colonne qui
contient le plus grand nombre de données, la largeur fixe étant attribuée à toutes les autres
colonnes. Supposons, par exemple, que votre mise en page comporte une grande image sur le
côté gauche de votre page et une colonne de texte sur la droite. Vous pouvez dans ce cas
définir une largeur fixe pour la colonne de gauche et une extension automatique pour la zone
d'encadré.
Lorsque vous attribuez une extension automatique à une colonne, Dreamweaver insère des
images d'espacement dans les colonnes à largeur fixe pour garantir que ces colonnes
conservent une largeur appropriée, sauf si vous désactivez cette option. Une image
d'espacement est une image transparente, donc invisible dans la fenêtre du navigateur, utilisée
pour contrôler l'espacement.
Rubriques connexes
■
Application de l'extension automatique ou d'une largeur fixe à une colonne, page 305
A propos du mode Mise en forme
293
Images d'espacement
Une image d'espacement (également appelée GIF d'espacement) est une image transparente
utilisée pour contrôler l'espacement dans des tableaux d'extension automatique. Il s'agit d'une
image GIF transparente d'un seul pixel, qu'il est possible d'étendre à une largeur bien précise
en termes de pixels. Un navigateur ne peut pas dessiner une colonne de tableau plus étroite
que l'image la plus large contenue dans une des cellules de cette colonne. Par conséquent,
placer une image d'espacement dans la colonne d'un tableau nécessite des navigateurs pour
conserver une largeur de colonne au moins aussi large que l'image.
Dreamweaver ajoute automatiquement des images d'espacement lorsque vous appliquez
l'extension automatique à une colonne, sauf si vous désactivez cette option. Vous pouvez
également insérer et supprimer manuellement des images d'espacement dans chaque colonne.
Les colonnes qui contiennent des images d'espacement ont une barre double dans la zone de
largeur.
Vous pouvez insérer et supprimer manuellement des images d'espacement dans des colonnes
spécifiques ou supprimer toutes les images d'espacement de la page.
Rubriques connexes
■
Utilisation des images d'espacement, page 306
Basculement du mode Standard au
mode Mise en forme
Avant de dessiner des tableaux ou des cellules de mise en forme, vous devez passer du mode
Standard au mode Mise en forme. Il est plus facile de créer des tableaux de mise en forme en
mode Mise en forme qu'en mode Standard, mais il est judicieux de revenir en mode Standard
avant d'ajouter du contenu à vos tableaux ou de les modifier.
R EM A R Q U E
Si vous créez un tableau en mode Standard, puis que vous basculez en mode Mise en
forme, le tableau créé peut contenir des cellules de mise en forme vides. Vous devrez
peut-être supprimer ces cellules vides avant de créer ou de déplacer des cellules.
Pour passer en mode Mise en forme :
1.
Si vous travaillez en mode Code, choisissez Affichage > Création ou Affichage > Code et
création.
Vous ne pouvez pas passer du mode Code au mode Mise en forme.
2.
Procédez de l'une des manières suivantes :
294
Chapitre 9: Mise en forme des pages avec le mode Mise en forme
■
Choisissez Affichage > Mode Tableau > Mode Mise en forme.
■
Dans la catégorie Mise en forme de la barre Insérer, cliquez sur le bouton Mise en
forme.
Une barre étiquetée Mode Mise en forme s'affiche en haut de la fenêtre de document. Si votre
page comporte des tableaux, ceux-ci s'affichent sous forme de tableaux de mise en forme.
Pour quitter le mode Mise en forme, procédez de l'une des manières
suivantes :
■
Cliquez sur [quitter] sur la barre étiquetée Mode Mise en forme située en haut de la
fenêtre de document.
■
Choisissez Affichage > Mode Tableau > Mode Standard.
■
Dans la catégorie Mise en forme de la barre Insérer, cliquez sur le bouton Standard.
Dreamweaver repasse en mode Standard.
Réalisation de dessins en mode Mise en
forme
Le mode Mise en forme vous permet de dessiner des cellules et des tableaux, y compris des
tableaux imbriqués dans d'autres tableaux. La grille d'alignement vous aide à aligner les
cellules (voir Utilisation du tracé de l'image, page 258).
Dessin de cellules et de tableaux de mise en forme
En mode Mise en forme, vous pouvez dessiner des cellules de mise en forme et des tableaux de
mise ne forme. Lorsque vous créez une cellule de mise en forme à l'extérieur d'un tableau,
Dreamweaver crée automatiquement un tableau de mise en forme pour contenir cette cellule,
qui ne peut pas exister en dehors d'un tableau.
R E M A R QU E
En mode Mise en forme, vous ne pouvez pas utiliser les outils Insérer un tableau et
Dessiner un calque, disponibles uniquement en mode Standard. Pour utiliser ces outils,
vous devez d'abord basculer en mode Standard.
Si Dreamweaver crée automatiquement un tableau de mise en forme, celui-ci remplit la page
entière du mode Création, même si vous modifiez la taille de votre fenêtre de document. Ce
tableau vous permet de dessiner des cellules de mise en forme à n'importe quel endroit en
mode Création. Vous pouvez définir une taille spécifique pour le tableau en cliquant sur une
bordure et en faisant glisser les poignées de redimensionnement.
Réalisation de dessins en mode Mise en forme
295
Lorsque vous faites passer le pointeur sur une cellule de mise en forme, Dreamweaver la met
en surbrillance. Vous pouvez activer ou désactiver la surbrillance ou en changer la couleur
dans les préférences.
Pour dessiner une cellule de mise en forme :
1.
Assurez-vous que vous êtes en mode Mise en forme (voir Basculement du mode Standard au
mode Mise en forme, page 294).
2.
Dans la catégorie Mise en forme de la barre Insérer, cliquez sur le bouton Dessiner la cellule
de mise en forme.
Le pointeur se change en réticule (+).
3.
Cliquez à l'endroit où vous souhaitez placer la cellule sur la page, puis faites glisser le
pointeur pour créer la cellule.
C ON S E I L
Pour dessiner plusieurs cellules de Mise en forme sans avoir à sélectionner plusieurs
fois le bouton Dessiner la cellule de mise en forme, maintenez la touche Ctrl
(Windows) ou Commande (Macintosh) enfoncée tout en cliquant sur le bouton
Dessiner la cellule de mise en forme. Tant que vous maintenez la touche Ctrl ou
Commande enfoncée, vous pouvez dessiner des cellules de mise en forme les unes
après les autres
Si vous dessinez la cellule près du bord du tableau de mise en forme, les bords de la cellule
s'alignent automatiquement sur les bords du tableau. Pour désactiver temporairement
l'alignement, maintenez la touche Alt (Windows) ou Option (Macintosh) enfoncée
pendant que vous dessinez la cellule.
La cellule s'affiche sur votre page avec un contour bleu. Pour modifier la couleur du contour,
voir Définition de préférences pour le mode Mise en forme, page 308.
Pour dessiner un tableau de mise en forme :
1.
Assurez-vous que vous êtes en mode Mise en forme (voir Basculement du mode Standard au
mode Mise en forme, page 294).
2.
Dans la catégorie Mise en forme de la barre Insérer, cliquez sur le bouton Tableau de Mise
en forme.
Le pointeur se change en réticule (+).
296
Chapitre 9: Mise en forme des pages avec le mode Mise en forme
3.
Placez le pointeur sur la page, puis faites-le glisser pour créer le tableau de mise en forme.
C ON S E I L
Pour dessiner plusieurs tableaux de mise en forme sans avoir à sélectionner
plusieurs fois le bouton Dessiner le tableau de Mise en forme, maintenez la touche
Ctrl (Windows) ou Commande (Macintosh) enfoncée tout en cliquant sur le bouton
Dessiner le tableau de Mise en forme. Tant que vous maintenez la touche Ctrl ou
Commande enfoncée, vous pouvez dessiner des tableaux de mise en forme les uns
après les autres
Vous pouvez créer un tableau de mise en forme dans une zone vide de votre mise en page,
autour d'autres cellules et tableaux ou à l'intérieur d'un tableau existant. Si votre page
contient des éléments et que vous souhaitez ajouter un tableau de mise en forme dans une
zone vide de votre mise en page, vous pouvez dessiner un nouveau tableau de mise en
forme uniquement sous le contenu existant.
C ON S E I L
Si vous essayez de dessiner un tableau de mise en forme sous du contenu existant et
que le pointeur ne vous le permet pas, redimensionnez la fenêtre de document pour
créer davantage d'espace vide entre le bas du contenu existant et celui de la fenêtre.
REMARQUE
Les tableaux ne peuvent pas se chevaucher, mais un tableau peut en contenir un
autre. Pour plus d'informations, voir Dessin d'un tableau de mise en forme imbriqué,
page 298.
Le tableau de mise en forme s'affiche avec un contour vert. Pour modifier la couleur du
contour, voir Définition de préférences pour le mode Mise en forme, page 308.
Pour modifier les préférences de surbrillance des cellules de mise en forme :
1.
Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
La boîte de dialogue Préférences s'affiche.
2.
Sélectionnez la catégorie Surbrillance dans la liste de gauche.
3.
Apportez l'une des modifications suivantes :
■
Pour changer la couleur de surbrillance, cliquez sur la case de couleur Survol, puis
sélectionnez une couleur de surbrillance à l'aide du sélecteur de couleur (ou entrez la
valeur hexadécimale correspondant à la couleur de surbrillance dans la zone de texte).
Pour plus d'informations sur l'utilisation du sélecteur de couleur, consultez la section
Utilisation des couleurs, page 393.
Réalisation de dessins en mode Mise en forme
297
■
Pour activer ou désactiver la mise en surbrillance, activez ou désactivez l'option
Afficher de la case Survol.
REMARQUE
4.
Ces options s'appliquent à tous les objets, tels que les tableaux et les calques,
que Dreamweaver met en surbrillance lorsque vous faites passer le pointeur
dessus.
Cliquez sur OK.
Dessin d'un tableau de mise en forme imbriqué
Vous pouvez dessiner un tableau de mise en forme à l'intérieur d'un autre tableau pour créer
un tableau imbriqué. Les cellules qui se trouvent à l'intérieur d'un tableau imbriqué ne sont
pas affectées par les modifications apportées au tableau externe. Par exemple, lorsque vous
modifiez la taille d'une ligne ou d'une colonne dans ce tableau, la taille des cellules du tableau
interne ne change pas.
Vous pouvez constituer plusieurs niveaux de tableaux imbriqués. Un tableau de mise en forme
imbriqué ne peut pas être plus grand que le tableau qui le contient.
REMARQUE
298
Si vous dessinez un tableau de mise en forme au milieu de votre page avant de dessiner
une cellule de mise en forme, ce tableau est automatiquement imbriqué dans un tableau
plus grand.
Chapitre 9: Mise en forme des pages avec le mode Mise en forme
Pour dessiner un tableau de mise en forme imbriqué :
1.
Assurez-vous que vous êtes en mode Mise en forme (voir Basculement du mode Standard au
mode Mise en forme, page 294).
2.
Dans la catégorie Mise en forme de la barre Insérer, cliquez sur le bouton Tableau de Mise
en forme.
Le pointeur se change en réticule (+).
3.
Placez le curseur dans une zone vide (grise) d'un tableau de mise en forme existant, puis
faites-le glisser afin de créer le tableau imbriqué.
REMARQUE
Vous ne pouvez pas créer de tableau à l'intérieur d'une cellule de mise en forme.
Vous pouvez créer un tableau de mise en forme imbriqué uniquement dans une zone
vide d'un tableau existant ou autour de cellules existantes.
Pour dessiner un tableau de mise en forme autour de cellules ou de tableaux
existants :
1.
Assurez-vous que vous êtes en mode Mise en forme (voir Basculement du mode Standard au
mode Mise en forme, page 294).
2.
Dans la catégorie Mise en forme de la barre Insérer, cliquez sur le bouton Tableau de Mise
en forme.
Le pointeur se change en réticule (+).
3.
Faites-le glisser pour dessiner un rectangle autour d'un ensemble de cellules ou de tableaux
de mise en forme existants.
Un nouveau tableau imbriqué apparaît autour des cellules ou tableaux existants.
CONSEIL
Si vous souhaitez qu'une cellule de mise en forme existante s'adapte parfaitement à
un coin du nouveau tableau imbriqué, faites-la glisser vers l'emplacement souhaité ;
le coin du nouveau tableau s'aligne avec celui de la cellule. Vous ne pouvez pas
opérer de glissement à partir du milieu d'une cellule de Mise en forme, car il est
impossible de créer de tableau à l'intérieur d'une cellule de mise en forme.
Ajout de contenu dans une cellule de
mise en forme
En mode Mise en forme, vous pouvez ajouter du texte, des images ou tout autre contenu à des
cellules de mise en forme tout comme vous le feriez en mode Standard. Cliquez dans la cellule
où vous souhaitez insérer un contenu, puis entrez du texte ou insérez un autre contenu.
Ajout de contenu dans une cellule de mise en forme
299
Vous pouvez insérer du contenu uniquement dans une cellule de mise en forme et non dans
une zone vide (grise) d'un tableau, c'est pourquoi vous devez créer des cellules de mise en
forme avant d'ajouter du contenu (voir Réalisation de dessins en mode Mise en forme,
page 295).
Pour ajouter du texte dans une cellule de mise en forme :
1.
Placez le point d'insertion dans la cellule de mise en forme où vous souhaitez ajouter du
texte.
2.
Procédez de l'une des manières suivantes :
■
Tapez le texte dans la cellule.
Si nécessaire, cette dernière s'étend automatiquement au fur et à mesure de la saisie.
■
Collez du texte copié depuis un autre document.
Pour plus d'informations, voir Insertion de texte, page 428.
La cellule de mise en forme s'étend automatiquement au fur et à mesure que vous y ajoutez
des données. Lorsque la cellule s'étend, la colonne contenant cette cellule s'étend également,
ce qui peut modifier la taille des cellules voisines. La largeur de cette colonne affiche la largeur
qui apparaît dans le code, suivie de la largeur visuelle de la colonne (telle qu'elle apparaît sur
votre écran) entre parenthèses. Pour plus d'informations sur la largeur des colonnes, voir
Définition de la largeur des colonnes, page 305.
Pour ajouter une image à une cellule de mise en forme :
1.
Placez le point d'insertion dans la cellule de mise en forme où vous souhaitez ajouter
l'image.
2.
Procédez de l'une des manières suivantes :
■
300
Choisissez Insertion > Image.
Chapitre 9: Mise en forme des pages avec le mode Mise en forme
■
Dans la catégorie Commun de la barre Insérer, cliquez sur la flèche du bouton Images,
puis choisissez Image.
C ON S E I L
Si le bouton Image est affiché (comme dans l'exemple suivant) dans la barre
Insérer, vous pouvez cliquer dessus au lieu d'utiliser le menu déroulant.
La boîte de dialogue Sélectionnez la source de l'image s'affiche.
3.
Choisissez un fichier d'image.
Pour plus d'informations, voir Insertion d'une image, page 460.
4.
Cliquez sur OK.
L'image apparaît dans la cellule de mise en forme.
Suppression automatique des hauteurs
de cellule
Lorsque vous créez une cellule de mise en forme, Dreamweaver spécifie automatiquement une
hauteur pour la cellule, afin que celle-ci, même vide, s'affiche à la hauteur que vous avez
dessinée. Une fois que vous avez inséré du contenu dans la cellule, il n'est pas forcément
nécessaire de spécifier la hauteur. Vous pouvez alors supprimer les hauteurs de cellule
explicites du tableau.
Pour ce faire, procédez de l'une des manières suivantes :
■
Cliquez sur le menu des en-têtes du tableau, puis choisissez Effacer toutes les hauteurs.
■
Sélectionnez un tableau de mise en forme en cliquant sur l'onglet en haut du tableau, puis
cliquez sur le bouton Effacer les hauteurs de ligne dans l'inspecteur Propriétés (Fenêtre >
Propriétés).
Dreamweaver efface toutes les hauteurs spécifiées dans le tableau. Il se peut que certaines
cellules se rétrécissent verticalement.
Suppression automatique des hauteurs de cellule
301
Redimensionnement et déplacement de
cellules et tableaux de mise en forme
Afin d'ajuster la mise en page, vous pouvez déplacer et redimensionner des cellules de mise en
forme et des tableaux de mise en forme imbriqués. (Le tableau de mise en forme le plus à
l'extérieur peut uniquement être redimensionné.)
REMARQUE
Pour utiliser la grille Dreamweaver comme guide afin de déplacer ou de redimensionner
des cellules et des tableaux, voir Utilisation du tracé de l'image, page 258.
Redimensionnement et déplacement de cellules de
mise en forme
Vous pouvez redimensionner ou déplacer des cellules de mise en forme, mais elles ne peuvent
pas se chevaucher. Vous ne pouvez pas déplacer ou redimensionner une cellule en deçà des
limites du tableau qui la contient. La taille d'une cellule de mise en forme ne peut pas être
inférieure à son contenu.
Pour plus d'informations sur le redimensionnement ou le déplacement des tableaux de mise
en forme, voir Redimensionnement et déplacement de tableaux de mise en forme, page 303.
Pour redimensionner une cellule de mise en forme :
1.
Pour sélectionner la cellule, cliquez sur un de ses bords ou maintenez la touche Ctrl
(Windows) ou Commande (Macintosh) enfoncée, puis cliquez n'importe où dans la
cellule.
Des poignées de sélection s'affichent autour de la cellule.
2.
Faites glisser l'une des poignées de sélection pour redimensionner la cellule.
Les bords de la cellule s'alignent automatiquement sur ceux des autres cellules.
302
Chapitre 9: Mise en forme des pages avec le mode Mise en forme
Pour déplacer une cellule de mise en forme :
1.
Pour sélectionner la cellule, cliquez sur un de ses bords ou maintenez la touche Ctrl
(Windows) ou Commande (Macintosh) enfoncée, puis cliquez n'importe où dans la
cellule.
Des poignées de sélection s'affichent autour de la cellule.
2.
Procédez de l'une des manières suivantes :
■
Faites glisser la cellule vers un autre emplacement à l'intérieur du tableau de mise en
forme.
■
Appuyez sur les touches fléchées pour déplacer la cellule par incréments de 1 pixel.
C O N S E IL
Maintenez la touche Maj enfoncée tout en appuyant sur une touche
directionnelle pour déplacer la cellule par incréments de 10 pixels.
Redimensionnement et déplacement de tableaux de
mise en forme
La taille d'un tableau de mise en forme ne peut pas être inférieure à celle du plus petit
rectangle contenant toutes ses cellules. Un tableau ne doit pas non plus chevaucher les cellules
et tableaux voisins.
Pour redimensionner ou déplacer des cellules de mise en forme, voir Redimensionnement et
déplacement de cellules de mise en forme, page 302.
Pour redimensionner un tableau de mise en forme :
1.
Sélectionnez un tableau en cliquant sur l'onglet en haut du tableau.
Des poignées de sélection s'affichent autour du tableau.
2.
Faites glisser ces poignées de sélection pour redimensionner le tableau.
Les bords du tableau s'alignent automatiquement sur ceux des autres cellules et tableaux.
Pour déplacer un tableau de mise en forme :
1.
Sélectionnez un tableau en cliquant sur l'onglet en haut du tableau.
Des poignées de sélection s'affichent autour du tableau.
R E M AR QU E
Vous pouvez déplacer un tableau de mise en forme uniquement si celui-ci est
imbriqué dans un autre tableau de mise en forme.
Redimensionnement et déplacement de cellules et tableaux de mise en forme
303
2.
Procédez de l'une des manières suivantes :
■
Faites glisser le tableau vers un autre emplacement sur la page.
■
Appuyez sur les touches fléchées pour déplacer le tableau par incréments de 1 pixel.
C ON S E I L
Maintenez la touche Maj enfoncée tout en appuyant sur une touche
directionnelle pour déplacer la tableau par incréments de 10 pixels.
Formatage de cellules et de tableaux de
mise en forme
Vous pouvez changer l'aspect d'une cellule ou d'un tableau de mise en forme dans l'inspecteur
Propriétés.
Formatage des cellules de mise en forme
Dans l'inspecteur Propriétés, vous pouvez définir différents attributs pour votre cellule de
mise en forme, notamment la largeur et la hauteur, la couleur d'arrière-plan et l'alignement du
contenu.
Pour formater une cellule de mise en forme dans l'inspecteur Propriétés :
1.
Pour sélectionner la cellule, cliquez sur un de ses bords ou maintenez la touche Ctrl
(Windows) ou Commande (Macintosh) enfoncée, puis cliquez n'importe où dans la
cellule.
2.
Ouvrez l'inspecteur Propriétés (Fenêtre > Propriétés), s'il n'est pas déjà ouvert.
3.
Modifiez le formatage de la cellule en définissant des propriétés.
Pour plus d'informations, cliquez sur le bouton Aide de l'inspecteur Propriétés.
Formatage des tableaux de mise en forme
Vous pouvez définir différents attributs pour vos tableaux de mise en forme dans l'inspecteur
Propriétés, notamment la largeur, la hauteur, le remplissage et l'espacement.
304
Chapitre 9: Mise en forme des pages avec le mode Mise en forme
Pour formater un tableau de mise en forme :
1.
Sélectionnez un tableau en cliquant sur l'onglet en haut du tableau.
2.
Ouvrez l'inspecteur Propriétés (Fenêtre > Propriétés), s'il n'est pas déjà ouvert.
3.
Modifiez le formatage du tableau en définissant des propriétés.
Pour plus d'informations, cliquez sur le bouton Aide de l'inspecteur Propriétés.
Définition de la largeur des colonnes
Vous pouvez attribuer une largeur spécifique à une colonne ou la laisser s'étendre
automatiquement pour remplir autant que possible la fenêtre du navigateur. Vous pouvez
également attribuer une largeur minimale à une colonne à l'aide d'une image d'espacement.
Parfois, la largeur des colonnes définie dans le code HTML ne correspond pas à leur largeur
apparente sur l'écran. Dans ce cas, vous pouvez uniformiser les largeurs.
Application de l'extension automatique ou d'une
largeur fixe à une colonne
Une colonne dans un tableau peut être de largeur fixe ou à extension automatique. Pour plus
d'informations, voir Largeur de colonne fixe et colonnes à extension automatique, page 293.
L'application de l'extension automatique à une colonne avant d'avoir terminé la mise en
forme peut avoir des effets inattendus sur la mise en forme du tableau. Pour empêcher les
colonnes de s'élargir ou de rétrécir inopinément, créez votre mise en forme avant d'appliquer
l'extension automatique à une colonne, et utilisez des images d'espacement à ce moment.
(Cependant, si chaque colonne contient des données susceptibles de maintenir la colonne à la
largeur désirée, vous n'avez pas besoin d'utiliser d'images d'espacement.)
Pour appliquer l'extension automatique à une colonne :
1.
Procédez de l'une des manières suivantes :
■
Cliquez sur le menu des en-têtes de colonne, puis choisissez Extension automatique de
la colonne.
Définition de la largeur des colonnes
305
■
Pour sélectionner une cellule dans la colonne, cliquez sur l'un des bords de la cellule,
puis sur Extension automatique dans l'inspecteur Propriétés.
REMARQUE
Dans un tableau, vous ne pouvez appliquer l'extension automatique qu'à une
seule colonne.
Si vous n'avez pas défini d'image d'espacement pour ce site, la boîte de dialogue Choisissez
l'image d'espacement s'affiche.
2.
Si la boîte de dialogue Choisissez l'image d'espacement s'affiche, activez une option, puis
cliquez sur OK.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
Une ligne ondulée apparaît en haut ou en bas de la colonne à extension automatique. Une
double barre apparaît en haut ou en bas des colonnes qui contiennent des images
d'espacement.
Pour attribuer une largeur fixe à une colonne, procédez de l'une des manières
suivantes :
■
Cliquez sur le menu des en-têtes de colonne, puis choisissez Créer une colonne Largeur
fixe.
L'option Créer une colonne Largeur fixe attribue une largeur à la colonne (dans le code)
correspondant à sa largeur visuelle actuelle.
■
Pour sélectionner une cellule dans la colonne, cliquez sur l'un des bords de la cellule, puis
sur Fixe et tapez une valeur numérique dans l'inspecteur Propriétés.
Si vous entrez une valeur inférieure à la largeur du contenu, Dreamweaver définit
automatiquement une largeur correspondant à celle du contenu.
La largeur de la colonne apparaît en haut ou en bas de la colonne.
Rubriques connexes
■
Uniformisation des largeurs de colonne en mode Code avec les largeurs visuelles, page 308
Utilisation des images d'espacement
Pour qu'une colonne ait une largeur minimale, vous pouvez insérer une image d'espacement
dans cette colonne. Pour plus d'informations, voir Images d'espacement, page 294. Vous
pouvez supprimer les images d'espacement d'une seule colonne ou du tableau tout entier.
306
Chapitre 9: Mise en forme des pages avec le mode Mise en forme
La première fois que vous insérez une image d'espacement, vous devez en définir une pour le
site. Vous pouvez définir des préférences pour les images d'espacement (voir Définition de
préférences pour le mode Mise en forme, page 308).
Pour insérer une image d'espacement dans une colonne :
1.
Cliquez sur le menu des en-têtes de colonne, puis choisissez Ajouter image d'espacement.
Si vous n'avez pas défini d'image d'espacement pour ce site, la boîte de dialogue Choisissez
l'image d'espacement s'affiche.
2.
Si la boîte de dialogue Choisissez l'image d'espacement s'affiche, activez une option, puis
cliquez sur OK.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
Dreamweaver insère l'image d'espacement dans la colonne. L'image ne s'affiche pas à l'écran,
mais la colonne peut se décaler légèrement et une double barre s'affiche en haut ou en bas de
la colonne pour indiquer qu'elle contient une image d'espacement.
Pour supprimer une image d'espacement d'une seule colonne :
■
Cliquez sur le menu des en-têtes de colonne, puis choisissez Supprimer image
d'espacement.
Dreamweaver supprime l'image d'espacement. La colonne peut se décaler.
Pour supprimer toutes les images d'espacement du tableau, procédez de l'une
des manières suivantes :
■
Cliquez sur le menu des en-têtes de tableau, puis choisissez Supprimer toutes les images
d'espacement.
■
Sélectionnez le tableau, puis cliquez sur le bouton Supprimer toutes les images
d'espacement dans l'inspecteur Propriétés (Fenêtre > Propriétés).
La mise en forme de votre tableau tout entier peut changer. Si certaines colonnes sont vides,
elles risquent de disparaître complètement en mode Création.
Définition de la largeur des colonnes
307
Uniformisation des largeurs de colonne en mode
Code avec les largeurs visuelles
Si vous voyez deux nombres indiquant la largeur d'une colonne, cela signifie que la largeur de
colonne définie dans le code HTML est différente de la largeur apparente à l'écran. Vous
pouvez uniformiser la largeur spécifiée dans le code et la largeur visuelle. Pour plus
d’informations, consultez la section A propos de l'affichage de la largeur des tableaux et des
cellules en mode Mise en forme, page 291.
Pour uniformiser les largeurs :
1.
Cliquez dans une cellule.
2.
Procédez de l'une des manières suivantes :
■
Cliquez sur le menu des en-têtes de colonne, puis choisissez Uniformiser toutes les
largeurs.
■
Sélectionnez le tableau, puis cliquez sur le bouton Supprimer toutes les images
d'espacement dans l'inspecteur Propriétés (Fenêtre > Propriétés).
Dreamweaver redéfinit la largeur spécifiée dans le code sur la largeur visuelle.
Rubriques connexes
Application de l'extension automatique ou d'une largeur fixe à une colonne, page 305
■
■
Utilisation des images d'espacement, page 306
Définition de préférences pour le mode
Mise en forme
Vous pouvez spécifier des préférences pour les fichiers d'image d'espacement et les couleurs
utilisées par Dreamweaver pour dessiner les tableaux et les cellules de mise en forme.
Pour définir les préférences du mode Mise en forme :
1.
Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
La boîte de dialogue Préférences s'affiche.
2.
Choisissez la catégorie Mode Mise en forme dans la liste de gauche.
308
Chapitre 9: Mise en forme des pages avec le mode Mise en forme
3.
Apportez les modifications de votre choix.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
4.
Cliquez sur OK.
Définition de préférences pour le mode Mise en forme
309
310
Chapitre 9: Mise en forme des pages avec le mode Mise en forme
CHAPITRE 10
10
Utilisation de cadres
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.
R E MA R Q U E
Ce chapitre n'a pas pour objet de présenter de manière exhaustive toutes les méthodes
permettant de concevoir et d'utiliser des cadres, ni le code requis pour les coder
manuellement. Si vous souhaitez obtenir des informations détaillées sur le code utilisé
dans les mises en forme de cadre avancées, reportez-vous à un manuel traitant des
cadres et des jeux de cadres.
Ce chapitre contient les sections suivantes :
A propos des cadres et des jeux de cadres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .311
Utilisation des jeux de cadres dans la fenêtre de document . . . . . . . . . . . . . . . . . . . 317
Création de cadres et de jeux de cadres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317
Sélection de cadres et de jeux de cadres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .322
Ouverture d'un document dans un cadre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .324
Enregistrement des fichiers du cadre et du jeu de cadres. . . . . . . . . . . . . . . . . . . . .325
Affichage et définition des propriétés et attributs de cadre . . . . . . . . . . . . . . . . . . .326
Affichage et définition des propriétés des jeux de cadres . . . . . . . . . . . . . . . . . . . . .328
Définition des contenus de cadre avec liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .329
Gestion des navigateurs qui ne peuvent pas afficher les cadres . . . . . . . . . . . . . . 330
Utilisation des comportements JavaScript avec les cadres . . . . . . . . . . . . . . . . . . . 331
A propos 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.
311
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
(voir Gestion des navigateurs qui ne peuvent pas afficher les cadres, page 330) ; il fournit
simplement au navigateur des informations sur la mise en forme d'un jeu de cadres et les
documents qu'il doit afficher.
Rubriques connexes
■
Utilisation des jeux de cadres dans la fenêtre de document, page 317
■
Création de cadres et de jeux de cadres, page 317
Description du 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. Un jeu de
cadres est un fichier HTML qui définit la mise en forme et les propriétés de plusieurs cadres.
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.
312
Chapitre 10: Utilisation de cadres
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.
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. En
effet, les cadres peuvent afficher n'importe quel document.
REMARQUE
Le mot 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 qui incluent le contenu et sont initialement affichés 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.
Rubriques connexes
■
Description des jeux de cadres imbriqués, page 315
A propos des cadres et des jeux de cadres
313
Choix de l'utilisation des cadres
Les cadres sont le plus souvent utilisés pour 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.
Cependant, la conception d'un site à l'aide de cadres peut s'avérer fastidieuse. Dans la plupart
des cas, il est possible de créer une page Web sans faire appel à 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 ; voir A propos des modèles Dreamweaver, page 334.) Dans l'illustration suivante, la
mise en forme de la page ressemble à une mise en forme avec cadres, mais elle n'en contient
pas.
Nombreux sont les concepteurs Web professionnels ou les visiteurs de sites Web qui préfèrent
ne pas utiliser ni afficher de cadres. Ce rejet des cadres s'explique par une mauvaise utilisation
des cadres dans certains sites (par exemple, lorsque les jeux de cadres rechargent 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, lorsqu'ils permettent d'immobiliser les commandes de
navigation dans un cadre et de modifier le contenu d'un autre cadre), les cadres peuvent être
très utiles dans certains sites.
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 (voir Gestion des navigateurs qui ne
peuvent pas afficher les cadres, page 330). Vous pouvez également ajouter un lien explicite vers
une version sans cadre du site pour les visiteurs qui n'aiment pas utiliser les cadres.
314
Chapitre 10: Utilisation de cadres
L'utilisation des cadres présente les avantages suivants :
■
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 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.
L'utilisation des cadres présente les inconvénients suivants :
■
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).
Rubriques connexes
■
Description du fonctionnement des cadres et des jeux de cadres, page 312
■
Gestion des navigateurs qui ne peuvent pas afficher les cadres, page 330
Description des 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é.
A propos des cadres et des jeux de cadres
315
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.
Jeu de cadres principal
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. Pour plus
d'informations sur les outils de fractionnement de cadre, voir Conception d'un jeu de cadres,
page 320.
Vous pouvez imbriquer les jeux de cadres de deux façons dans HTML : le jeu de cadres
interne peut être défini comme jeu de cadres externe dans le même fichier 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.
Rubriques connexes
■
Description du fonctionnement des cadres et des jeux de cadres, page 312
■
316
Choix de l'utilisation des cadres, page 314
Chapitre 10: Utilisation de cadres
Utilisation des 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.
N'oubliez pas que 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 :
1.
Créez un jeu de cadres et spécifiez le document qui devra apparaître dans chaque cadre (voir
Création de cadres et de jeux de cadres, page 317).
2.
Enregistrez chaque fichier qui apparaîtra dans un cadre (voir Enregistrement des fichiers du
cadre et du jeu de cadres, page 325).
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 (voir Affichage et définition des
propriétés et attributs de cadre, page 326 et Affichage et définition des propriétés des jeux de
cadres, page 328).
notamment l'attribution d'un nom à chaque cadre, la définition des options de défilement
et de non-défilement, etc.
4.
Dans l'inspecteur Propriétés, vérifiez que la propriété Cible est définie pour tous les liens
afin que le contenu lié apparaisse dans la zone appropriée (voir Définition des contenus de
cadre avec liens, page 329).
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.
Création de cadres et de jeux de cadres
317
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 automatiquement 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.
Utilisation d'un jeu de cadres prédéfini
Les jeux de cadres prédéfinis vous permettent de sélectionner facilement le type de jeu de
cadres que vous voulez créer. Si vous préférez concevoir votre propre jeu de cadres, voir
Conception d'un jeu de cadres, page 320.
Il y a deux façons de créer un jeu de cadres prédéfini :
■
La barre Insérer permet de créer un jeu de cadres et d'afficher le document courant dans
un des nouveaux cadres.
■
La boîte de dialogue Nouveau document crée un jeu de cadres vide.
Pour créer un jeu de cadres prédéfini et afficher un document existant dans un
cadre :
1.
Placez le point d'insertion dans le document.
2.
Procédez de l'une des manières suivantes :
318
■
Choisissez un cadre prédéfini dans le sous-menu Insertion > HTML > Cadres.
■
Dans la catégorie Mise en forme de la barre Insérer, cliquez sur la flèche du bouton
Cadres, puis choisissez un jeu de cadres prédéfini.
Chapitre 10: Utilisation de cadres
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.
REMARQUE
Lorsque vous appliquez un jeu de cadres, Dreamweaver définit automatiquement le
jeu de cadres de sorte qu'il affiche le document courant (celui dans lequel se trouve
le point d'insertion) dans un des cadres.
La boîte de dialogue Attributs d'accessibilité aux balises de cadre s'affiche si vous avez
configuré Dreamweaver de telle sorte qu'un message vous invite à saisir des attributs
d'accessibilité de cadre (voir Optimisation de l'espace de travail pour la conception de pages
accessibles, page 75).
3.
Si la boîte de dialogue Attributs d'accessibilité aux balises de cadre s'affiche, renseignez la
boîte de dialogue pour chaque cadre, puis cliquez sur OK.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
R E M A R QU E
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é.
Pour modifier les attributs d'accessibilité aux balises de cadre, voir Affichage et définition
des propriétés et attributs de cadre, page 326.
Pour créer un jeu de cadres prédéfini vide :
1.
Choisissez Fichier > Nouveau.
Création de cadres et de jeux de cadres
319
2.
Dans la boîte de dialogue Nouveau document, sélectionnez la catégorie Jeux de cadres.
3.
Sélectionnez un jeu de cadres dans la liste Jeux de cadres.
4.
Cliquez sur Créer.
Le jeu de cadres apparaît dans votre document et la boîte de dialogue Attributs
d'accessibilité aux balises de cadre s'affiche si vous avez activé la boîte de dialogue dans
Préférences (voir Optimisation de l'espace de travail pour la conception de pages accessibles,
page 75).
5.
Si la boîte de dialogue Attributs d'accessibilité aux balises de cadre s'affiche, renseignez la
boîte de dialogue pour chaque cadre, puis cliquez sur OK.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
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é.
Pour modifier les attributs d'accessibilité aux balises de cadre, voir Affichage et définition
des propriétés et attributs de cadre, page 326.
Conception d'un jeu de cadres
Vous pouvez concevoir votre propre jeu de cadres dans Dreamweaver en ajoutant des
« séparateurs » à la fenêtre. Si vous préférez utiliser un jeu de cadres prédéfini, voir Utilisation
d'un jeu de cadres prédéfini, page 318.
C ON S E I L
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.
Pour créer 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.
Pour fractionner un cadre en cadres plus petits, procédez de l'une des
manières suivantes :
■
Pour fractionner le cadre au niveau du point d'insertion, choisissez une option de
fractionnement dans le sous-menu Modifier > Jeu de cadres.
320
Chapitre 10: Utilisation 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.
C ON S E I L
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.
Pour supprimer 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.
Pour redimensionner un cadre, procédez de l'une des manières suivantes :
■
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 (voir Affichage et définition des
propriétés des jeux de cadres, page 328).
Création de cadres et de jeux de cadres
321
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.
Sélection de cadres et de jeux de cadres dans le
panneau Cadres
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.
Pour afficher le panneau Cadres :
■
Choisissez Fenêtre > Cadres.
Pour sélectionner un cadre dans le panneau Cadres :
■
Cliquez sur le cadre dans le panneau Cadres.
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 dans le panneau Cadres :
■
Cliquez sur la bordure du jeu de cadres dans le panneau Cadres.
Des lignes de sélection apparaissent autour du jeu de cadres dans le panneau Cadres et
dans la fenêtre de document, en mode Création.
322
Chapitre 10: Utilisation de cadres
Rubriques connexes
■
Affichage et définition des propriétés et attributs de cadre, page 326
■
Affichage et définition des propriétés des jeux de cadres, page 328
Sélection de cadres et de jeux de cadres dans la
fenêtre de document
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).
Pour sélectionner un cadre dans la fenêtre de document :
■
En mode Création, cliquez dans le cadre tout en maintenant les touches Alt (Windows)
ou Option+Maj (Macintosh) enfoncées.
Des lignes de sélection apparaissent autour du cadre.
Pour sélectionner un jeu de cadres dans la fenêtre de document :
■
En mode Création, cliquez sur l'une des bordures du cadre interne du jeu. Vous devez
d'abord vous assurer que les bordures sont visibles ; pour cela, choisissez Affichage >
Assistances visuelles > Bordures de cadre.
Des lignes de sélection apparaissent autour du jeu de cadres.
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, voir Sélection de cadres
et de jeux de cadres dans le panneau Cadres, page 322.
Pour sélectionner un cadre ou un jeu de cadres différent, procédez de l'une
des manières suivantes :
■
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.
Sélection de cadres et de jeux de cadres
323
■
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.
Rubriques connexes
■
Sélection de cadres et de jeux de cadres dans le panneau Cadres, page 322
■
Affichage et définition des propriétés et attributs de cadre, page 326
■
Affichage et définition des propriétés des jeux de cadres, page 328
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.
Pour ouvrir 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, puis cliquez sur OK (Windows) ou
Choisir (Macintosh).
Le document apparaît dans le cadre.
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.
324
Chapitre 10: Utilisation 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.
Pour enregistrer un fichier de jeu de cadres :
1.
Sélectionnez le jeu de cadres dans le panneau Cadres ou dans la fenêtre de document (voir
Sélection de cadres et de jeux de cadres, page 322).
2.
Procédez de l'une des manières suivantes :
■
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.
Si le fichier du jeu de cadres n'a pas été enregistré, ces deux commandes sont équivalentes.
Pour enregistrer le 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.
Pour enregistrer tous les fichiers associés à un jeu de cadres :
■
Choisissez Fichier > Enregistrer tous les cadres.
Enregistrement des fichiers du cadre et du jeu de cadres
325
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 en mode Création. Dans la
boîte de dialogue qui s'affiche, choisissez un nom de fichier. Chaque cadre non enregistré
est entouré d'une épaisse bordure. Dans la boîte de dialogue qui s'affiche, choisissez un
nom de fichier.
R E M A R QU E
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 propriétés et
attributs de cadre
Utilisez l'inspecteur Propriétés pour afficher et définir la plupart des propriétés de cadre.
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 (voir Optimisation de l'espace de travail pour la conception de pages accessibles,
page 75) ou bien définir des attributs après avoir inséré un cadre. Vous pouvez modifier les
attributs d'un cadre en modifiant directement le code HTML à l'aide de l'inspecteur de
balises.
Pour définir des propriétés pour un jeu de cadres, voir Affichage et définition des propriétés des
jeux de cadres, page 328.
326
Chapitre 10: Utilisation de cadres
Pour afficher ou définir les 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.
Apportez les modifications de votre choix.
Pour plus d'informations, cliquez sur le bouton Aide de l'inspecteur Propriétés.
C ON S E I L
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.
Pour définir les 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.
L'éditeur de balises s'affiche.
3.
Sélectionnez Feuille de style/Accessibilité dans la liste de catégories située à gauche.
4.
Spécifiez les valeurs de votre choix.
5.
Cliquez sur OK.
Pour modifier les 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), puis choisissez Modifier la balise.
L'éditeur de balises s'affiche.
Affichage et définition des propriétés et attributs de cadre
327
4.
Apportez les modifications de votre choix.
5.
Cliquez sur OK.
Pour modifier 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.
La boîte de dialogue Propriétés de la page s'affiche.
3.
Cliquez sur le menu déroulant Couleur d'arrière-plan, puis sélectionnez une couleur.
4.
Cliquez sur OK.
Rubriques connexes
■
Création de cadres et de jeux de cadres, page 317
Affichage et définition des propriétés des
jeux de cadres
Utilisez l'inspecteur Propriétés pour afficher et définir la plupart des propriétés de jeux de
cadres. Pour définir des propriétés pour un cadre, voir Affichage et définition des propriétés et
attributs de cadre, page 326.
Pour afficher ou définir les propriétés des 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 pour visualiser toutes les propriétés des jeux de cadres.
3.
Apportez les modifications de votre choix.
Pour plus d'informations, cliquez sur le bouton Aide de l'inspecteur Propriétés.
328
Chapitre 10: Utilisation de cadres
Pour définir le titre du document d'un jeu de cadres :
1.
2.
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).
Dans le champ 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.
Rubriques connexes
■
Création de cadres et de jeux de cadres, page 317
Définition des contenus de cadre avec
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.
Pour cibler un cadre :
1.
En mode Création, choisissez un texte ou un objet.
2.
Dans le champ Lien de l'inspecteur Propriétés (Fenêtre > Propriétés), procédez de l'une des
manières suivantes :
3.
■
Cliquez sur l'icône de dossier, puis sélectionnez le fichier avec lequel établir le lien.
■
Faites glisser l'icône Pointer vers un fichier dans le panneau Fichiers pour sélectionner
le fichier avec lequel établir le lien.
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é :
Définition des contenus de cadre avec liens
329
■
_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
■
_top
ouvre le lien dans le cadre en cours, en remplaçant le contenu de ce cadre.
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.
C ON S E I L
Si vous établissez un lien avec une page qui ne se trouve pas sur votre site, utilisez
target="_top" ou target="_blank" pour vous assurer que la page ne soit pas
considérée comme faisant partie de votre site.
Gestion des navigateurs qui ne peuvent
pas afficher les cadres
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 ». En effet, certaines personnes
choisissent délibérément un système qui ne leur permet pas d'afficher de cadres.
Essayez de définir un contenu accessible à ces visiteurs.
Pour définir un contenu pour les navigateurs qui ne prennent pas en charge les
cadres :
1.
Choisissez Modifier > Jeu de cadres > Modifier le contenu sans cadres.
330
Chapitre 10: Utilisation de 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.
3.
Pour créer le Contenu sans cadres, procédez de l'une des manières suivantes :
■
Dans la fenêtre de document, tapez ou insérez le contenu, comme vous le feriez pour
un document ordinaire.
■
Choisissez 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 du
contenu.
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 :
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 (voir Texte du cadre, page 581).
Texte du cadre
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 (voir Atteindre l'URL, page 573).
L'option Insérer une barre de navigation ajoute une barre de navigation à une page. Ceci
étant fait, vous pouvez ajouter des comportements à ses images et définir l'image qui s'affiche
en fonction des actions des visiteurs. Vous pouvez, par exemple, afficher une image de bouton
à l'état actif ou inactif afin que l'utilisateur sache sur quelle page du site il se trouve (voir
Insertion d'une barre de navigation, page 499).
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 (voir
Insertion de menus de reroutage, page 496).
Insérer menu de reroutage
Utilisation des comportements JavaScript avec les cadres
331
332
Chapitre 10: Utilisation de cadres
CHAPITRE 11
11
Gestion des modèles
Un modèle Macromedia Dreamweaver 8 est un type spécial de document qui sert à concevoir
une mise en page « fixe ». Il est alors possible de créer des documents basés sur le modèle, qui
en héritent la mise en page. Lors de la conception d'un modèle, vous spécifiez les zones des
documents basés sur ce modèle que les utilisateurs pourront modifier.
R E MA R Q U E
Les modèles permettent de définir la conception d'une grande zone et de réutiliser des
mises en page complètes. Si vous souhaitez réutiliser des éléments de conception
individuels, tels que les informations sur le copyright d'un site ou un logo, vous pouvez
créer des éléments de bibliothèque. Pour plus d'informations, voir Chapitre 5, Gestion
des actifs de site et des bibliothèques, page 179.
Ce chapitre comprend les sections suivantes :
A propos des modèles Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .334
Création d'un modèle Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .348
Création de modèles pour un site Contribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .353
Création de régions modifiables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .355
Création de régions répétées. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359
Utilisation des régions facultatives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .362
Définition d'attributs de balise modifiables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .365
Création d'un modèle imbriqué . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .366
Modification et mise à jour des modèles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .368
Gestion des modèles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 372
Exportation et importation du contenu XML d'un modèle. . . . . . . . . . . . . . . . . . . . . 373
Exportation d'un site sans marqueur de modèle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 374
Application ou suppression d'un modèle depuis un document existant. . . . . . . . . 375
Modification du contenu d'un document basé sur un modèle . . . . . . . . . . . . . . . . . 377
333
A propos des modèles Dreamweaver
Le créateur d'un modèle y conçoit une mise en page « fixe ». Il crée ensuite des régions dans le
modèle, qui seront modifiables dans les documents basés sur ce modèle. Si le créateur définit
une région comme n'étant pas modifiable, les utilisateurs du modèle ne pourront pas modifier
le contenu de cette zone. Les créateurs de modèles peuvent contrôler les éléments de la page
que les utilisateurs des modèles (rédacteurs, infographistes ou autres développeurs) pourront
modifier. Le créateur peut inclure plusieurs types de régions de modèle dans un document.
L'un des principaux avantages du modèle est qu'il donne la possibilité de modifier plusieurs
pages simultanément. Tout document créé à partir d'un modèle reste associé à ce modèle (sauf
si vous décidez de détacher le document ultérieurement). Lorsque vous modifiez un modèle,
la conception de tous les documents créés à partir de ce modèle est immédiatement mise à
jour.
Rubriques connexes
■
Création d'un modèle Dreamweaver, page 348
Types de régions de modèle
Dreamweaver verrouille automatiquement la plupart des régions d'un document lorsque vous
enregistrez celui-ci comme modèle. Vous devez insérer des régions ou paramètres modifiables
dans un modèle pour définir les régions qui pourront être modifiées dans les documents basés
sur ce modèle.
Lors de la création du modèle, vous pouvez apporter des modifications aux régions
modifiables et aux régions verrouillées. En revanche, dans le cas d'un document créé à partir
d'un modèle, seules les régions modifiables peuvent subir des modifications ; les régions
verrouillées ne peuvent pas être modifiées.
Il existe quatre types de régions de modèle :
Une région modifiable est une région non verrouillée dans un document basé sur un modèle.
Ce type de section peut être modifié. Le créateur du modèle peut définir toute région du
modèle comme modifiable. Pour être fonctionnel, un modèle doit contenir au moins une
région modifiable. S'il n'en contient pas, les pages créées à partir du modèle ne pourront pas
être modifiées. Pour plus d'informations sur l'insertion d'une région modifiable, voir Insertion
d'une région modifiable, page 356.
334
Chapitre 11: Gestion des modèles
Une région répétée est une section de la mise en page d'un document qu'il est possible de
reproduire. Par exemple, vous pouvez définir une ligne de tableau à reproduire. En général, les
sections répétées sont modifiables afin que l'utilisateur du modèle puisse modifier le contenu
de l'élément répété, tandis que le créateur du modèle contrôle la conception elle-même. Selon
ses besoins, l'utilisateur du modèle choisit des options de contrôle de région répétée pour
ajouter ou supprimer des copies de la région répétée dans un document basé sur le modèle.
Deux types de régions répétées peuvent être insérées dans un modèle : région répétée et
tableau répété. Pour plus d'informations sur l'insertion de régions répétées dans un modèle,
voir Création d'une région répétée dans un modèle, page 359. Pour plus d'informations sur la
création de tableaux répétées, voir Insertion d'un tableau répété, page 360. Pour plus
d'informations sur l'utilisation d'une région répétée dans une page basée sur un modèle, voir
Ajout et suppression d'entrées et modification de l'ordre des entrées dans une région répétée,
page 379.
Une région facultative est une section d'un modèle que vous avez définie comme facultative,
c'est-à-dire une section contenant des éléments facultatifs tels que du texte ou des images, qui
apparaîtront ou non dans les documents créés à partir du modèle. Sur la page basée sur le
modèle, l'utilisateur du modèle décide généralement si le contenu doit être affiché ou non.
Pour plus d'informations sur la définition de régions facultatives dans un modèle, voir
Insertion d'une région facultative, page 362. Pour plus d'informations sur la modification de
régions facultatives dans une page basée sur un modèle, voir Modification des propriétés du
modèle, page 377.
sont des attributs de balise d'un modèle qui sont
déverrouillés afin que les utilisateurs puissent les modifier dans les pages créées à partir de ce
modèle. Par exemple, vous pouvez « verrouiller » les images contenues dans le document tout
en permettant à l'utilisateur du modèle d'en définir l'alignement à gauche, à droite ou au
centre. Pour plus d'informations sur la définition des attributs de balise modifiables, voir
Définition d'attributs de balise modifiables dans un modèle, page 365. Pour plus d'informations
sur la modification de balises dans une page basée sur un modèle, voir Modification des
propriétés du modèle, page 377.
Les attributs de balise modifiables
Rubriques connexes
■
Création de régions modifiables, page 355
■
Création de régions répétées, page 359
■
Utilisation des régions facultatives, page 362
■
Définition d'attributs de balise modifiables, page 365
A propos des modèles Dreamweaver
335
Modèles et documents basés sur un modèle en mode
Code ou Création
Vous pouvez afficher des modèles et des documents basés sur un modèle en mode Code ou
Création.
Affichage d'un modèle en mode Création
En mode Création, les régions modifiables des modèles s'affichent dans la fenêtre de
document entourées d'un cadre rectangulaire d'une couleur de surbrillance prédéfinie. Un
petit onglet indiquant le nom de la région s'affiche dans le coin supérieur gauche de chaque
région.
REMARQUE
Pour plus d'informations sur la définition des préférences de couleur de surbrillance, voir
Définition des préférences de surbrillance pour des régions de modèle, page 351.
La barre de titre de la fenêtre de document permet d'identifier les fichiers de modèle. La barre
de titre d'un fichier de modèle contient le mot <<Modèle>> et l'extension du nom du fichier
est .dwt.
Rubriques connexes
■
Affichage d'un document basé sur un modèle en mode Création, page 338
■
Affichage d'un document basé sur un modèle en mode Code, page 338
336
Chapitre 11: Gestion des modèles
Affichage d'un modèle en mode Code
En mode Code, vous pouvez apporter des modifications à la fois au contenu modifiable et au
code source HTML verrouillé du modèle.
CONSEIL
Vous pouvez utiliser les préférences de couleur de code pour définir votre propre modèle
de coloration afin de pouvoir distinguer facilement les régions du modèle lorsque vous
affichez un document en mode Code (voir Personnalisation des préférences de coloration
de code d'un modèle, page 351).
Les régions de contenu modifiables sont repérées dans le code HTML par les commentaires
suivants :
<!-- TemplateBeginEditable>
et <!-- TemplateEndEditable -->
Tous les éléments compris entre ces commentaires sont modifiables dans les documents créés à
partir du modèle. Le code source HTML d'une région modifiable peut se présenter comme
suit :
<table width="75%" border="1" cellspacing="0" cellpadding="0">
<tr bgcolor="#333366">
<td>Name</td>
<td><font color="#FFFFFF">Address</font></td>
<td><font color="#FFFFFF">Telephone Number</font></td>
</tr>
<!-- TemplateBeginEditable name="LocationList" -->
<tr>
<td>Enter name</td>
<td>Enter Address</td>
<td>Enter Telephone</td>
</tr>
<!-- TemplateEndEditable -->
</table>
REMARQUE
Lorsque vous modifiez le code du modèle en mode Code, prenez garde à ne pas
modifier de balise de commentaire liée au modèle et utilisée par Dreamweaver.
Rubriques connexes
■
Affichage d'un modèle en mode Création, page 336
■
Affichage d'un document basé sur un modèle en mode Code, page 338
A propos des modèles Dreamweaver
337
Affichage d'un document basé sur un modèle en mode
Création
Dans un document basé sur un modèle, les régions modifiables s'affichent dans la fenêtre de
document en mode Création, entourées d'un cadre rectangulaire d'une couleur de surbrillance
prédéfinie. Un petit onglet indiquant le nom de la région s'affiche dans le coin supérieur
gauche de chaque région.
REMARQUE
Pour plus d'informations sur la définition des préférences de couleur de surbrillance, voir
Définition des préférences de surbrillance pour des régions de modèle, page 351.
Outre les régions modifiables, la page entière est entourée d'un cadre d'une couleur différente
et un onglet en haut à droite indique le nom du modèle sur lequel le document est basé. Ce
cadre a pour fonction de vous rappeler que le document a été créé à partir d'un modèle et que
vous ne pouvez rien changer en dehors des régions modifiables.
Rubriques connexes
■
Affichage d'un modèle en mode Création, page 336
■
Affichage d'un modèle en mode Code, page 337
Affichage d'un document basé sur un modèle en mode Code
En mode Code, les régions modifiables d'un document dérivé d'un modèle s'affichent dans
une couleur différente du code dans les régions non modifiables. Vous pouvez modifier
uniquement les régions ou paramètres modifiables ; Dreamweaver vous empêche de taper
dans les régions verrouillées.
338
Chapitre 11: Gestion des modèles
Le contenu modifiable est repéré dans le code HTML par les commentaires Dreamweaver
suivants :
<!-- InstanceBeginEditable>
et <!-- InstanceEndEditable -->
Tous les éléments compris entre ces commentaires sont modifiables dans un document basé
sur le modèle. Le code source HTML d'une région modifiable peut se présenter comme suit :
<body bgcolor="#FFFFFF" leftmargin="0">
<table width="75%" border="1" cellspacing="0" cellpadding="0">
<tr bgcolor="#333366">
<td>Name</td>
<td><font color="#FFFFFF">Address</font></td>
<td><font color="#FFFFFF">Telephone Number</font></td>
</tr>
<!-- InstanceBeginEditable name="LocationList" -->
<tr>
<td>Enter name</td>
<td>Enter Address</td>
<td>Enter Telephone</td>
</tr>
<!-- InstanceEndEditable -->
</table>
</body>
La couleur par défaut du texte non modifiable est le gris. Vous pouvez associer des couleurs
différentes aux régions modifiables et aux régions non modifiables en accédant à la boîte de
dialogue Préférences. Pour plus d'informations, voir Personnalisation des préférences de
coloration de code d'un modèle, page 351.
Rubriques connexes
Affichage d'un modèle en mode Création, page 336
■
■
Affichage d'un modèle en mode Code, page 337
■
Affichage d'un document basé sur un modèle en mode Création, page 338
A propos des modèles Dreamweaver
339
Syntaxe des balises du modèle
Cette section décrit les règles générales de syntaxe et donne la liste des balises de commentaire
HTML utilisées par Dreamweaver pour définir les régions dans les modèles et les documents
basés sur un modèle. Dreamweaver insère automatiquement des balises de modèle dans le
code lorsque vous insérez un objet de modèle.
REMARQUE
Dreamweaver fait appel à des balises de commentaire pour définir les régions du
modèle, de telle façon que les documents basés sur un modèle restent des fichiers
HTML valides.
Règles générales de syntaxe
Vous trouverez ci-dessous les règles de syntaxe générales :
■
Là où il y a un espace, vous pouvez en ajouter autant que vous voulez (sous la forme
d’espaces, de tabulations, de sauts de ligne). L'espace blanc est obligatoire, sauf au tout
début ou à la toute fin d'un commentaire.
■
Les attributs peuvent être saisis dans n'importe quel ordre. Par exemple, dans le cas de
TemplateParam, vous pouvez spécifier le type avant le nom.
■
Les noms des commentaires et des attributs sont sensibles à la casse.
■
Tous les attributs doivent être entre guillemets. Il est possible d'utiliser des guillemets
simples ou doubles.
Pour plus d'informations sur la vérification de votre syntaxe, voir Vérification de la syntaxe du
modèle, page 371.
Rubriques connexes
■
Balises d'instance, page 341
Balises de modèle
Dreamweaver utilise les balises de modèle suivantes :
<!-- TemplateBeginEditable name="..." -->
<!-- TemplateEndEditable -->
<!-- TemplateParam name="..." type="..." value="..." -->
<!-- TemplateBeginRepeat name="..." -->
<!-- TemplateEndRepeat -->
<!-- TemplateBeginIf cond="..." -->
340
Chapitre 11: Gestion des modèles
<!-- TemplateEndIf -->
<!-- TemplateBeginPassthroughIf cond="..." -->
<!-- TemplateEndPassthroughIf -->
<!-- TemplateBeginMultipleIf -->
<!-- TemplateEndMultipleIf -->
<!-- TemplateBeginPassthroughMultipleIf -->
<!-- TemplateEndPassthroughMultipleIf -->
<!-- TemplateBeginIfClause cond="..." -->
<!-- TemplateEndIfClause -->
<!-- TemplateBeginPassthroughIfClause cond="..." -->
<!-- TemplateEndPassthroughIfClause -->
<!-- TemplateExpr expr="..." --> (equivalent to @@...@@)
<!-- TemplatePassthroughExpr expr="..." -->
<!-- TemplateInfo codeOutsideHTMLIsLocked="..." -->
Rubriques connexes
■
Règles générales de syntaxe, page 340
Balises d'instance
Dreamweaver utilise les balises d'instance suivantes :
<!-<!-<!-<!-<!-<!-<!-<!-<!--
InstanceBegin template="..." codeOutsideHTMLIsLocked="..." -->
InstanceEnd -->
InstanceBeginEditable name="..." -->
InstanceEndEditable -->
InstanceParam name="..." type="..." value="..." passthrough="..." -->
InstanceBeginRepeat name="..." -->
InstanceEndRepeat -->
InstanceBeginRepeatEntry -->
InstanceEndRepeatEntry -->
Rubriques connexes
■
Règles générales de syntaxe, page 340
■
Balises de modèle, page 340
A propos des modèles Dreamweaver
341
Liens des modèles
Pour créer un lien dans un fichier de modèle, cliquez sur l'icône de dossier ou sur l'icône
Pointer vers un fichier dans l'inspecteur Propriétés. Ne tapez pas le nom du fichier à lier, car le
lien pourrait ne pas fonctionner. Cette section explique comment Dreamweaver gère les liens
dans les modèles.
Lorsque vous créez un fichier de modèle à partir d'une page existante, puis que vous
enregistrez cette page comme modèle, Dreamweaver met à jour les liens de sorte qu'ils
pointent vers les fichiers d'origine. Les modèles étant enregistrés dans le dossier Templates, le
chemin d'un lien relatif à un document change lorsque vous enregistrez la page comme
modèle. Lorsque vous créez un nouveau document à partir du modèle et que vous enregistrez
ce nouveau document, tous les liens relatifs à un document sont mis à jour pour qu'ils
continuent de pointer vers les fichiers adéquats.
En revanche, si vous insérez un nouveau lien relatif à un document dans un fichier de modèle
et que vous tapez le chemin dans la zone de texte du lien de l'inspecteur Propriétés, il est facile
de faire une faute de frappe. Le chemin correct est le chemin d'accès au document lié à partir
du dossier Templates, et non pas à partir du dossier du document basé sur le modèle.
Pour plus d'informations sur l'établissement de liens à l'aide de l'icône Pointer vers un fichier,
voir Liens entre fichiers et documents, page 480.
REMARQUE
Dans certains cas (notamment pour les chemins de fichiers des gestionnaires
d'événement des modèles), vous ne pouvez pas utiliser l'icône de dossier ni l'icône
Pointer vers un fichier. Vous devez alors taper le chemin, en prenant garde à ne pas faire
de faute de frappe.
Modèles imbriqués
Un modèle imbriqué est un modèle dont la conception et les régions modifiables sont basées
sur un autre modèle. Pour créer un modèle imbriqué, vous devez au préalable enregistrer le
modèle de base ou le modèle original, puis créer un document à partir de ce modèle et
enregistrer ce document comme modèle. Vous pouvez ensuite définir dans le nouveau modèle
des régions modifiables supplémentaires au niveau des sections définies initialement comme
modifiables dans le modèle de base.
342
Chapitre 11: Gestion des modèles
Les modèles imbriqués sont utiles pour gérer le contenu de certaines pages d'un site qui ont de
nombreux éléments de présentation en commun avec les autres pages du site mais qui
présentent malgré tout quelques différences. Par exemple, vous pouvez créer un modèle de
base définissant la conception de zones plus larges, qui sera utilisé par une grande partie des
responsables du contenu du site, et créer un modèle imbriqué définissant de nouvelles régions
modifiables dans les pages d'une section spécifique du site.
Les régions modifiables d'un modèle de base sont transmises aux modèles imbriqués et restent
modifiables dans les pages créées à partir d'un modèle imbriqué, à moins que de nouvelles
régions de modèle ne soient insérées dans ces régions.
Les modifications apportées à un modèle de base sont automatiquement répercutées dans les
modèles basés sur ce modèle de base et dans tous les documents basés sur les modèles principal
et imbriqué.
Dans l'exemple suivant, le modèle contient trois régions modifiables, nommées Body, Nav Bar
et Footer :
A propos des modèles Dreamweaver
343
Pour créer un modèle imbriqué, nous avons créé un document à partir du modèle, puis nous
avons enregistré ce document comme modèle que nous avons appelé TrioNested. Dans le
modèle imbriqué, nous avons ajouté deux régions modifiables et du contenu dans la région
nommée Body.
Lorsque vous insérez une nouvelle région modifiable dans une région modifiable transmise au
modèle imbriqué, la couleur de surbrillance de la région modifiable devient orange. Le
contenu inséré dans une région modifiable, par exemple l'image insérée dans
editableColumn, n'est plus modifiable dans les documents créés à partir du modèle
imbriqué. Qu'elles aient été ajoutées au modèle imbriqué ou qu'elles soient héritées du
modèle de base, les régions modifiables entourées d'un cadre de surbrillance bleu restent
modifiables dans les documents créés à partir du modèle imbriqué. Les régions de modèle
dans lesquelles aucune région modifiable n'a été insérée sont transmises sous la forme de
régions modifiables aux documents basés sur le modèle.
Rubriques connexes
■
Création d'un modèle imbriqué, page 366
344
Chapitre 11: Gestion des modèles
Scripts de serveur dans un modèle et documents
basés sur un modèle
Certains scripts de serveur sont insérés au tout début ou à la toute fin du document (avant la
balise <html> ou après la balise </html>). Ces scripts requièrent un traitement spécial dans les
modèles et les documents créés à partir de modèles. En règle générale, lorsque vous apportez
des modifications au code situé avant la balise <html> ou après la balise </html> dans un
modèle, les modifications ne sont pas répercutées dans les documents créés à partir du modèle,
ce qui peut entraîner des erreurs de serveur lorsqu'un script de serveur situé dans le corps
principal du modèle dépend d'un script non mis à jour. C'est la raison pour laquelle
Dreamweaver vous avertit lorsque vous tentez de modifier des scripts situés avant la balise
<html> ou après la balise </html> dans un modèle.
Pour éviter ce problème, vous pouvez insérer le code suivant dans la section head du modèle :
<!-- TemplateInfo codeOutsideHTMLIsLocked="true" -->
Lorsque vous insérez ce code dans un modèle, toutes les modifications apportées aux scripts
situés avant la balise <html> ou après la balise </html> sont répercutées dans les documents
créés à partir du modèle. Toutefois, vous ne pourrez plus modifier ces scripts dans les
documents créés à partir du modèle. Vous pouvez donc soit modifier les scripts dans le
modèle, soit dans les documents créés à partir du modèle, mais pas dans les deux à la fois.
Paramètres de modèle
Les paramètres de modèle indiquent les valeurs qui permettent de personnaliser le contenu des
documents basés sur le modèle. Ils permettent de définir des régions facultatives, des attributs
de balise modifiables et des valeurs à transmettre aux documents joints. Pour chaque
paramètre, vous devez définir un nom, un type de donnée et une valeur par défaut. Vous devez
attribuer un nom unique à chaque paramètre. En outre, les paramètres sont sensibles à la
casse.
Les paramètres de modèle sont transmis au document sous forme de paramètres d'instance.
En général, l'utilisateur d'un modèle est autorisé à modifier les valeurs par défaut du
paramètre pour personnaliser le contenu du document basé sur le modèle. Dans d'autres cas,
le créateur du modèle peut déterminer ce qui apparaît dans le document, selon la valeur d'une
expression de modèle.
Rubriques connexes
■
Utilisation des régions facultatives, page 362
■
Définition d'attributs de balise modifiables, page 365
A propos des modèles Dreamweaver
345
Expressions de modèle
Les expressions de modèle sont des instructions qui permettent de calculer ou d'évaluer une
valeur.
Vous pouvez utiliser une expression pour enregistrer une valeur et l'afficher dans un
document. Vous pouvez notamment rédiger une expression simple se limitant à la valeur d'un
paramètre, par exemple @@(Param)@@, ou bien une expression plus complexe permettant de
calculer les valeurs qui feront alterner la couleur d'arrière-plan de la ligne d'un tableau, par
exemple @@((_index & 1) ? red : blue)@@.
Vous pouvez également rédiger des expressions pour définir des conditions If et MultipleIf
(voir, par exemple, La condition Multiple If dans le code du modèle, page 348). Lorsqu'une
instruction conditionnelle contient une expression, Dreamweaver évalue si celle-ci est true
ou false. Si la condition est true, la région facultative s'affiche dans le document basé sur le
modèle ; si elle est false, elle n'apparaît pas.
Vous pouvez définir des expressions en mode Code ou dans la boîte de dialogue de la région
facultative que vous insérez. Pour plus d'informations sur la rédaction d'expressions de
modèle, voir Le langage d'expression de modèle, page 346.
En mode Code, il existe deux façons de définir des expressions de modèle : l'insertion du
commentaire <!-- TemplateExpr expr=“votre expression”--> ou @@(votre
expression)@@. Lorsque vous insérez l'expression dans le code du modèle, un marqueur
d'expression apparaît en mode Création. Lorsque vous appliquez le modèle, Dreamweaver
évalue l'expression et affiche la valeur dans le document basé sur le modèle.
Le langage d'expression de modèle
Le langage d'expression de modèle utilise la syntaxe et les règles de priorité de JavaScript, dont
il constitue un sous-ensemble. Vous pouvez utiliser des opérateurs JavaScript pour rédiger des
expressions, comme dans l'exemple suivant :
@@(firstName+lastName)@@
Les fonctions et opérateurs suivants sont pris en charge :
■
constantes numériques, constantes de chaîne (syntaxe avec guillemets doubles
uniquement), constantes booléennes (true ou false)
■
référence de variable (voir la liste des variables définies plus bas dans cette section)
■
référence à un champ (opérateur « point »)
■
opérateurs unaires : +, -, ~, !
■
opérateurs binaires : +, -, *, /, %, &, |, ^, &&, ||, <, <=, >, >=, ==, !=, <<, >>
■
opérateurs conditionnels : ?:
346
Chapitre 11: Gestion des modèles
■
parenthèses : ()
Les types de données suivants sont pris en charge : booléen, virgule flottante 64 bits IEEE,
chaîne et objet. Les modèles Dreamweaver ne prennent pas en charge l'utilisation des types
JavaScript « null » et « undefined ». Ils ne permettent pas non plus de convertir implicitement
les types scalaires en objet. Par conséquent, l'expression "abc".length provoquera une erreur
au lieu de fournir la valeur 3.
Les seuls objets disponibles sont ceux qui sont définis par le modèle d'objet d'expression. Les
variables suivantes sont définies :
_document
Contient les données de modèle de niveau document avec un champ pour chaque paramètre
du modèle.
_repeat
Définie uniquement pour les expressions situées à l'intérieur d'une région répétée. Fournit des
informations prédéfinies sur la région :
_index
Index numérique (à partir de 0) de l'entrée en cours.
_numRows
Nombre total d'entrées dans la région répétée.
_isFirst
Vrai (true) si l'entrée en cours est la première entrée de la région répétée.
_isLast
Vrai (true) si l'entrée en cours est la dernière entrée de la région répétée.
Objet _repeat de l'entrée précédente. L'accès à cette propriété provoque une
erreur si l'entrée est la première de la région.
_prevRecord
_nextRecord Objet _repeat de l'entrée suivante. L'accès à cette propriété provoque une
erreur si l'entrée est la dernière de la région.
Dans une région répétée imbriquée, donne l'objet _repeat correspondant à la région
répétée extérieure. L'accès à cette propriété en dehors d'une région répétée imbriquée
provoque une erreur.
_parent
Lors de l'évaluation de l'expression, tous les champs de l'objet _document et _repeat sont
implicitement disponibles. Par exemple, vous pouvez saisir title au lieu de
_document.title pour accéder au paramètre de titre du document.
En cas de conflit de champ, les champs de l'objet _repeat ont la priorité sur les champs de
l'objet _document. Vous n'avez donc pas à référencer explicitement _document ou _repeat.
Toutefois, il se peut que _document soit nécessaire à l'intérieur d'une région répétée pour
référencer les paramètres de document masqués par les paramètres de région répétée.
A propos des modèles Dreamweaver
347
Dans le cas de régions répétées imbriquées, seuls les champs de la région répétée intérieure
sont disponibles implicitement. Les régions extérieures doivent être référencées explicitement
à l'aide de _parent.
La condition Multiple If dans le code du modèle
Vous pouvez rédiger des expressions de modèle pour définir des conditions If et MultipleIf
(voir Expressions de modèle, page 346). Dans l'exemple suivant, un paramètre appelé "Dept"
est créé, une valeur initiale est définie et une condition MultipleIf est utilisée pour déterminer
le logo qui doit s'afficher.
Voici un exemple de code pouvant être inséré dans la section head du modèle :
<!-- TemplateParam name="Dept" type="number" value="1" -->
L'instruction conditionnelle suivante vérifie la valeur attribuée au paramètre Dept. Si la
condition renvoie "true" ou la valeur correspondante, l'image adéquate s'affiche.
<!-- TemplateBeginMultipleIf -->
<!-- checks value of Dept and shows appropriate image-->
<!-- TemplateBeginClause cond="Dept == 1" --> <img src=".../sales.gif">
<!-- TemplateEndIfClause -->
<!-- TemplateBeginIfClause cond="Dept == 2" --> <img src=".../
support.gif"> <!-- TemplateEndIfClause-->
<!-- TemplateBeginIfClause cond="Dept == 3" --> <img src=".../hr.gif">
<!-- TemplateEndIfClause -->
<!-- TemplateBeginIfClause cond="Dept != 3" --> <img src=".../
spacer.gif"> <!-- TemplateEndIfClause -->
<!-- TemplateEndMultipleIf -->
Lorsque vous créez un document basé sur un modèle, les paramètres du modèle lui sont
automatiquement transmis. L'utilisateur du modèle détermine l'image à afficher (voir
Modification des propriétés du modèle, page 377).
Création d'un modèle Dreamweaver
Vous pouvez créer un modèle à partir d'un document existant (tel qu'un document HTML,
Macromedia ColdFusion ou Microsoft ASP) ou bien à partir d'un nouveau document vierge.
348
Chapitre 11: Gestion des modèles
Après avoir créé un modèle, vous pouvez y insérer des régions (voir Types de régions de modèle,
page 334). Vous pouvez également y définir des préférences en matière de coloration du code
et de couleur de surbrillance des régions (voir Personnalisation des préférences de coloration de
code d'un modèle, page 351 et Définition des préférences de surbrillance pour des régions de
modèle, page 351).
CONSEIL
Si vous souhaitez enregistrer des informations supplémentaires sur un modèle (par
exemple, le nom de la personne qui l'a créé, la date de sa dernière modification ou les
raisons justifiant certaines décisions relatives à la mise en forme), vous pouvez créer un
fichier Design Notes pour le modèle (voir Association de Design Notes à un fichier,
page 171). Les documents basés sur un modèle n'héritent pas des Design Notes
associées à ce dernier.
Pour créer un modèle :
1.
Ouvrez le document que vous souhaitez enregistrer comme modèle :
■
Pour ouvrir un document existant, choisissez Fichier > Ouvrir et sélectionnez le
document.
■
Pour ouvrir un document vierge, choisissez Fichier > Nouveau. Dans la boîte de
dialogue qui apparaît, sélectionnez Page de base ou Page dynamique et le type de page
avec lequel vous souhaitez travailler, puis cliquez sur le bouton Créer.
REMARQUE
2.
Pour plus d'informations sur la création d'un nouveau document, voir Création
d'un document vierge, page 100.
Une fois le document ouvert, procédez de l'une des manières suivantes :
■
Choisissez Fichier > Enregistrer comme modèle.
■
Dans la catégorie Commun de la barre Insérer, cliquez sur la flèche du bouton
Modèles, puis choisissez Créer un modèle.
REMARQUE
Si vous n'avez pas sélectionné Ne plus afficher ce message, un message
s'affiche vous indiquant que le document que vous enregistrez ne comporte
aucune région modifiable. Cliquez sur OK pour enregistrer le document comme
modèle, ou bien sur Annuler pour fermer la boîte de dialogue sans créer de
modèle.
Création d'un modèle Dreamweaver
349
La boîte de dialogue Enregistrer comme modèle s'affiche.
3.
Sélectionnez le site dans lequel vous souhaitez enregistrer le modèle dans le menu déroulant
Site, puis tapez un nom unique pour le modèle dans la zone de texte Enregistrer sous.
4.
Cliquez sur Enregistrer.
Dreamweaver enregistre le fichier de modèle dans le dossier Templates du site, dans le
dossier racine local du site, avec l'extension .dwt. Si ce dossier n'existe pas, Dreamweaver
le crée automatiquement au moment de l'enregistrement du nouveau modèle.
REMARQUE
Ne retirez pas vos modèles du dossier Templates et placez dans celui-ci uniquement
des fichiers de modèles. Ne retirez pas non plus le dossier Templates de votre
dossier racine local, car cela pourrait provoquer des erreurs dans les chemins
d'accès des modèles.
Pour créer un modèle à l'aide du panneau Actifs
1.
Dans le panneau Actifs (Fenêtre > Actifs), sélectionnez la catégorie Modèles sur le côté
gauche du panneau.
La catégorie Modèles du panneau Actifs s'affiche.
2.
Cliquez sur le bouton Nouveau modèle en bas du panneau Actifs.
Un nouveau modèle, sans nom, est ajouté à la liste de modèles du panneau Actifs.
3.
Le modèle étant toujours sélectionné, donnez-lui un nom, puis appuyez sur Entrée
(Windows) ou Retour (Macintosh).
Dreamweaver crée un nouveau modèle vierge dans le panneau Actifs et dans le dossier
Modèles.
Rubriques connexes
■
Définition des préférences de surbrillance pour des régions de modèle, page 351
■
Création de modèles pour un site Contribute, page 353
■
Insertion d'une région modifiable, page 356
350
Chapitre 11: Gestion des modèles
Personnalisation des préférences de coloration de
code d'un modèle
Utilisez ces préférences pour définir la couleur des caractères, la couleur de l'arrière-plan et les
attributs de style du texte affiché en mode Code. Vous pouvez définir votre propre modèle de
couleur afin de pouvoir distinguer facilement les régions de modèle lorsque vous affichez un
document en mode Code.
Pour définir un modèle de couleurs à appliquer aux modèles en mode Code :
1.
Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
La boîte de dialogue Préférences s'affiche.
2.
Sélectionnez la catégorie Coloration du code dans la liste de gauche.
3.
Sélectionnez HTML dans la liste Type de document, puis cliquez sur le bouton Modifier
le modèle de coloration.
La boîte de dialogue Modifier le modèle de coloration pour HTML s'affiche.
4.
Dans la liste Styles pour, sélectionnez Balises de modèle.
5.
Définissez la couleur des caractères, la couleur de l'arrière-plan et les attributs de style du
texte affiché en mode Code. Pour ce faire, procédez de la manière suivante :
6.
■
Tapez dans la zone de texte Couleur de texte la valeur hexadécimale de la couleur que
vous souhaitez appliquer au texte sélectionné, ou bien utilisez le sélecteur de couleur
pour sélectionner cette couleur. Procédez de la même manière pour le champ Couleur
d'arrière-plan si vous souhaitez appliquer une couleur à l'arrière-plan du texte
sélectionné, ou bien modifier la couleur courante.
■
Si vous souhaitez appliquer un attribut de style au code sélectionné, utilisez les
boutons B (gras), I (italique) ou U (souligné) pour appliquer le style souhaité.
Cliquez sur OK.
Définition des préférences de surbrillance pour des
régions de modèle
Les préférences de surbrillance Dreamweaver permettent de personnaliser les couleurs de
surbrillance appliquées aux cadres entourant les régions modifiables et les régions verrouillées
d'un modèle en mode Création. La couleur de surbrillance des régions modifiables est utilisée
dans le modèle, mais aussi dans les documents basés sur ce modèle.
Pour plus d'informations sur l'affichage des modèles et des documents basés sur un modèle en
mode Création, voir Affichage d'un modèle en mode Création, page 336 et Affichage d'un
document basé sur un modèle en mode Création, page 338.
Création d'un modèle Dreamweaver
351
Pour modifier les couleurs de surbrillance :
1.
Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
La boîte de dialogue Préférences s'affiche.
2.
Sélectionnez la catégorie Surbrillance dans la liste de gauche.
3.
Cliquez dans la case de couleur Régions modifiables, Régions modifiables imbriquées ou
Régions verrouillées, puis sélectionnez une couleur de surbrillance à l'aide de la pipette (ou
tapez la valeur hexadécimale correspondant à la couleur de surbrillance dans la zone de
texte).
Pour plus d'informations sur l'utilisation du sélecteur de couleur, consultez la section
Utilisation des couleurs, page 393.
4.
(Facultatif) Répétez cette opération pour les autres types de région de modèle, autant de
fois que nécessaire.
5.
Cochez la case Afficher pour activer l'affichage des couleurs dans la fenêtre de document
ou décochez-la pour désactiver l'affichage.
REMARQUE
6.
La case de couleur Régions modifiables imbriquées ne s'accompagne pas de
l'option Afficher : l'affichage des régions imbriquées est en effet contrôlé par l'option
Régions modifiables.
Cliquez sur OK.
Pour afficher les couleurs de surbrillance dans la fenêtre de document :
■
Choisissez Affichage > Assistances visuelles > Eléments invisibles.
Les couleurs de surbrillance apparaissent dans la fenêtre de document uniquement lorsque
l'option Affichage > Assistances visuelles > Eléments invisibles est activée et que les
options appropriées sont activées dans les préférences de surbrillance.
REMARQUE
Si des éléments invisibles apparaissent mais pas les couleurs de surbrillance,
choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences
(Macintosh), puis sélectionnez la catégorie Surbrillance. Vérifiez que l'option
Afficher est activée près de la couleur de surbrillance appropriée. Vérifiez également
que la couleur souhaitée est contrastée par rapport à la couleur d'arrière-plan de
votre page.
Rubriques connexes
■
Personnalisation des préférences de coloration de code d'un modèle, page 351
352
Chapitre 11: Gestion des modèles
Création de modèles pour un site
Contribute
A l'aide de Dreamweaver, vous pouvez créer des modèles afin d'aider les utilisateurs de
Macromedia Contribute à créer de nouvelles pages, à définir l'aspect général du site et à
mettre à jour la mise en forme de plusieurs pages à la fois.
Lorsque vous créez un modèle et que vous le chargez sur le serveur, il devient disponibles pour
tous les Contribute utilisateurs se connectant à votre site, sauf si vous avez limité l'utilisation
du modèle à certains rôles de Contribute. Si vous avez défini des restrictions sur l'utilisation
des modèles, il peut s'avérer nécessaire d'ajouter chaque nouveau modèle à la liste des modèles
accessibles par un utilisateur de Contribute (voir Administration de Contribute).
REMARQUE
Assurez-vous que le dossier racine de chaque site utilisateur de Contribute défini est le
même que le dossier racine de votre définition de site dans Dreamweaver. Si un dossier
racine de site utilisateur ne correspond pas au vôtre, cet utilisateur ne pourra pas utiliser
les modèles.
En complément des modèles Dreamweaver, vous pouvez créer des modèles non Dreamweaver
à l'aide des outils d'administration de Contribute. Un modèle non-Dreamweaver est une
page existante dont les utilisateurs de Contribute peuvent se servir pour créer de nouvelles
pages. Cette page est similaire à un modèle Dreamweaver, à l'exception que les pages basées
sur ce modèle ne se mettent pas à jour lorsque vous apportez des modifications à ce dernier.
Les modèles non-Dreamweaver ne peuvent pas contenir d'éléments de modèles Dreamweaver,
tels que des régions modifiables ou verrouillées, des répétitions de régions ou autres régions
facultatives.
Création de modèles pour un site Contribute
353
Lorsqu'un utilisateur de Contribute crée un nouveau document au sein d'un site contenant
des modèles Dreamweaver, Contribute établit la liste des modèles disponibles (Dreamweaver
et non-Dreamweaver) dans la boîte de dialogue Nouvelle page.
Pour inclure dans votre site des pages contenant des codages autres que Latin-1, vous devez
créer des modèles (Dreamweaver ou non Dreamweaver). Contribute permet de modifier des
pages, quels que soient leurs codages. Cependant, lorsqu'un utilisateur de Contribute crée une
nouvelle page, celle-ci est basée sur le codage Latin-1. Pour créer une page utilisant un codage
différent, l'utilisateur de Contribute peut créer une copie d'une page existante basée sur un
encodage différent ou utiliser un modèle basé sur un encodage différent. Cela dit, si le site
utilisant d'autres codages ne contient pas de pages ni de modèles, créez d'abord, dans
Dreamweaver, une page ou un modèle utilisant cet autre codage.
Pour plus d'informations sur la création, la modification et la mise à jour des modèles
Dreamweaver, voir A propos des modèles Dreamweaver, page 334.
354
Chapitre 11: Gestion des modèles
Pour créer un modèle non-Dreamweaver :
1.
Choisissez Site > Gérer les sites.
La boîte de dialogue Gérer les sites s'affiche.
2.
Sélectionnez un site, puis cliquez sur Modifier.
La boîte de dialogue Définition du site s'ouvre.
3.
Cliquez sur l'onglet Avancé.
4.
Sélectionnez la catégorie Contribute dans la liste de gauche.
5.
Si vous ne l'avez pas déjà fait, vous devez activer la compatibilité avec Contribute.
Activez l'option Activer la compatibilité avec Contribute, puis tapez l'URL de la racine du
site.
Pour plus d'informations, cliquez sur le bouton Aide.
6.
Cliquez sur le bouton Administrer le site dans Contribute.
7.
Si nécessaire, tapez le mot de passe administrateur, puis cliquez sur OK.
La boîte de dialogue Administration du site Web s'affiche.
8.
Dans la catégorie Utilisateurs et rôles, sélectionnez un rôle, puis cliquez sur le bouton Edit
Role Settings (Modifier les paramètres du rôle).
9.
Sélectionnez la catégorie Nouvelles pages, puis ajoutez les pages existantes à la liste située
en dessous de l'option Créer une page en copiant une page de la liste ci-dessous.
Pour plus d'informations, voir Administration de Contribute.
10. Cliquez
11.
sur OK pour fermer la boîte de dialogue Modification des paramètres.
Cliquez sur Fermer pour fermer la boîte de dialogue Administration du site Web.
Rubriques connexes
■
Création d'un modèle Dreamweaver, page 348
Création de régions modifiables
Il est possible de créer des régions modifiables dans un modèle pour définir les zones qui
pourront être modifiées dans les pages basées sur ce modèle.
Rubriques connexes
■
Types de régions de modèle, page 334
Création de régions modifiables
355
Insertion d'une région modifiable
Avant d'insérer une région modifiable, il est conseillé d'enregistrer le document actif comme
modèle (voir Création d'un modèle Dreamweaver, page 348).
REMARQUE
Si vous insérez une région modifiable non pas dans un fichier de modèle mais dans un
document, Dreamweaver vous informe que le document sera automatiquement
enregistré comme modèle.
Vous pouvez placer une région modifiable n'importe où sur votre page. Toutefois, tenez
compte des informations suivantes si vous rendez possible la modification d'un tableau ou
d'un calque :
■
Vous pouvez marquer un tableau entier ou une cellule de tableau individuelle comme
modifiable, mais vous ne pouvez pas marquer plusieurs cellules d'un tableau comme une
seule et même région modifiable. Si une balise <td> est sélectionnée, la région modifiable
comprend la région située autour de la cellule. Dans le cas contraire, la région modifiable
concerne uniquement le contenu de la cellule.
■
Les calques et leur contenu sont deux éléments distincts. Rendre un calque modifiable
permet de changer la position du calque et son contenu, alors que rendre le contenu d'un
calque modifiable permet uniquement de modifier le contenu du calque, et non sa
position.
Pour insérer une région de modèle modifiable :
1.
2.
Dans la fenêtre de document, procédez de l'une des manières suivantes pour sélectionner
la région.
■
Sélectionnez le texte ou le contenu que vous souhaitez définir comme région
modifiable.
■
Placez le point d'insertion à l'endroit où vous voulez insérer une région modifiable.
Procédez de l'une des manières suivantes pour insérer une région modifiable :
■
Choisissez Insertion > Objets de modèle > Région modifiable.
■
Cliquez du bouton droit (Windows) ou en maintenant la touche Ctrl enfoncée
(Macintosh), puis choisissez Modèles > Nouvelle région modifiable.
■
Dans la catégorie Commun de la barre Insérer, cliquez sur la flèche du bouton
Modèles, puis choisissez Région modifiable.
La boîte de dialogue Nouvelle région modifiable s'affiche.
356
Chapitre 11: Gestion des modèles
3.
Dans la zone de texte Nom, tapez un nom unique pour la région (vous ne pouvez pas
utiliser le même nom pour plusieurs régions modifiables dans un modèle donné).
R E M A R QU E
4.
Ne tapez pas de caractères spéciaux dans la zone de texte Nom.
Cliquez sur OK.
La région modifiable est entourée d'un cadre rectangulaire dans le modèle, de la couleur
de surbrillance définie dans les préférences. Dans le coin supérieur gauche de la région, un
onglet indique le nom de la région. Si vous insérez une région modifiable vide dans le
document, son nom s'affiche également dans le cadre qui la délimite.
REMARQUE
Pour plus d'informations sur les options de mise en surbrillance du contenu d'un
modèle, voir Définition des préférences de surbrillance pour des régions de modèle,
page 351.
Rubriques connexes
■
Suppression d'une région modifiable, page 358
■
Modification du nom d'une région modifiable, page 358
Sélection de régions modifiables
Vous pouvez facilement identifier et sélectionner les différentes régions présentes dans un
modèle et dans un document basé sur un modèle.
Pour sélectionner une région modifiable dans la fenêtre de document :
■
Cliquez sur l'onglet situé dans le coin supérieur gauche de la région modifiable.
Pour rechercher une région modifiable et la sélectionner dans le document :
■
Choisissez Modifier > Modèles, puis le nom de la région dans la liste figurant en bas de ce
sous-menu.
R E MA R Q U E
Les régions modifiables situées à l'intérieur d'une région répétée ne sont pas
répertoriées dans le menu. Pour localiser ces régions, vous devez rechercher les
cadres à onglet qui figurent dans la fenêtre de document.
La région modifiable est sélectionnée dans le document.
Création de régions modifiables
357
Rubriques connexes
■
Définition des préférences de surbrillance pour des régions de modèle, page 351
■
Insertion d'une région modifiable, page 356
■
Modification du nom d'une région modifiable, page 358
Suppression d'une région modifiable
Si vous avez marqué une région de votre fichier de modèle comme étant modifiable, vous
pouvez la verrouiller (pour la rendre non modifiable dans les documents basés sur le modèle) à
l'aide de la commande Supprimer le marqueur de modèle.
Pour supprimer une région modifiable :
1.
Cliquez sur l'onglet situé dans le coin supérieur gauche de la région modifiable pour la
sélectionner.
2.
Procédez de l'une des manières suivantes :
■
Choisissez Modifier > Modèles > Supprimer le marqueur de modèle.
■
Cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfoncée (Macintosh), puis choisissez Modèles > Supprimer le marqueur de modèle.
La région n'est alors plus modifiable.
Rubriques connexes
■
Insertion d'une région modifiable, page 356
Modification du nom d'une région modifiable
Après avoir inséré une région modifiable, vous pouvez en modifier le nom.
Pour modifier le nom d'une région modifiable :
1.
Cliquez sur l'onglet situé dans le coin supérieur gauche de la région modifiable pour la
sélectionner.
2.
Dans l'inspecteur Propriétés (Fenêtre > Propriétés), tapez un nouveau nom.
3.
Appuyez sur la touche Entrée (Windows) ou Retour (Macintosh).
Dreamweaver applique le nouveau nom à la région modifiable.
Rubriques connexes
■
Insertion d'une région modifiable, page 356
358
Chapitre 11: Gestion des modèles
Création de régions répétées
Une région répétée est une section d'un modèle qui peut être reproduite autant de fois qu'on
le souhaite dans les pages basées sur ce modèle. On utilise généralement les régions répétées
dans le cas de tableaux. Toutefois, il est possible de définir des régions répétées pour d'autres
éléments de page.
Les régions répétées permettent de définir la mise en page au moyen de la répétition de
certains éléments (article de catalogue et description, par exemple) ou de lignes, par exemple
dans le cas d'une liste d'éléments.
Il existe deux objets de modèle de région répétée : région répétée et tableau répété.
Rubriques connexes
■
Types de régions de modèle, page 334
Création d'une région répétée dans un modèle
La répétition de régions permet de copier une région spécifique autant de fois que nécessaire
dans un modèle. Une région répétée n'est pas modifiable.
Pour rendre modifiable le contenu d'une région répétée (par exemple pour autoriser un
utilisateur à taper du texte dans une cellule de tableau dans un document basé sur un modèle),
vous devez insérer une région modifiable dans la région répétée (voir Insertion d'une région
modifiable, page 356).
Pour plus d'informations sur la création de tableaux répétés modifiables, voir Insertion d'un
tableau répété, page 360.
Pour insérer une région répétée dans un modèle :
1.
2.
Dans la fenêtre Document, procédez de l'une des manières suivantes :
■
Sélectionnez le texte ou le contenu que vous souhaitez définir comme région répétée.
■
Placez le point d'insertion dans le document à l'endroit où vous souhaitez insérer la
région répétée.
Procédez de l'une des manières suivantes pour créer une région répétée :
■
Choisissez Insertion > Objets de modèle > Région répétée.
■
Cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfoncée (Macintosh), puis choisissez Modèles > Nouvelle région répétée.
■
Dans la catégorie Commun de la barre Insérer, cliquez sur la flèche du bouton
Modèles, puis choisissez Région répétée.
Création de régions répétées
359
La boîte de dialogue Nouvelle région répétée s'affiche.
3.
Dans la zone de texte Nom, tapez un nom unique pour la région de modèle (vous ne
pouvez pas utiliser le même nom pour plusieurs régions répétées dans un modèle donné).
R E M A R QU E
4.
N'insérez pas de caractères spéciaux dans un nom de région.
Cliquez sur OK.
La région répétée est insérée dans le modèle.
REMARQUE
Une région répétée ne peut pas être modifiée dans un document basé sur un modèle
si elle ne contient pas de région modifiable. Pour plus d'informations sur l'insertion
d'une région modifiable, voir Insertion d'une région modifiable, page 356.
Insertion d'un tableau répété
Vous pouvez créer une région modifiable (sous forme de tableau) à lignes répétées à l'aide d'un
tableau répété. Vous pouvez définir des attributs de tableau et indiquer les cellules du tableau
pouvant être modifiées.
Pour insérer un tableau répété :
1.
Placez le point d'insertion dans la fenêtre de document à l'endroit où vous souhaitez insérer
le tableau répété.
2.
Procédez de l'une des manières suivantes :
■
Choisissez Insertion > Objets de modèle > Tableau répété.
■
Dans la catégorie Commun de la barre Insérer, cliquez sur la flèche du bouton
Modèles, puis choisissez Tableau répété.
360
Chapitre 11: Gestion des modèles
La boîte de dialogue Insérer un tableau répété s'affiche.
3.
Spécifiez les nouvelles valeurs de votre choix.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
4.
Cliquez sur OK.
Le tableau répété s'affiche dans le modèle.
Définition d'une couleur d'arrière-plan alternée dans
un tableau répété
Après avoir inséré un tableau répété dans un modèle (voir Insertion d'un tableau répété,
page 360), vous pouvez le personnaliser en alternant la couleur d'arrière-plan des lignes du
tableau.
Pour faire alterner la couleur d'arrière-plan des lignes d'un tableau :
1.
Dans la fenêtre de document, sélectionnez une ligne du tableau répété.
2.
Cliquez sur le bouton Afficher le mode code ou Afficher les modes Code et Création de la
barre d'outils du document pour accéder au code de la ligne sélectionnée.
3.
En mode Code, modifiez la balise <tr> pour qu'elle se présente de la façon suivante :
<tr bgcolor="@@( _index & 1 ? '#FFFFFF' : '#CCCCCC' )@@">
Vous pouvez modifier les valeurs hexadécimales #FFFFFF et #CCCCCC si vous souhaitez
utiliser d'autres couleurs.
4.
Enregistrez le modèle.
Exemple de code correspondant à un tableau dont la couleur d'arrière-plan des lignes est
alternée :
<table width="75%" border="1" cellspacing="0" cellpadding="0">
<tr><th>Name</th><th>Phone Number</th><th>Email Address</th></tr>
<!-- TemplateBeginRepeat name="contacts" -->
<tr bgcolor="@@(_index & 1 ? '#FFFFFF' : '#CCCCCC')@@">
Création de régions répétées
361
<td> <!-- TemplateBeginEditable name="name" --> name <!-TemplateEndEditable -->
</td>
<td> <!-- TemplateBeginEditable name="phone" --> phone <!-TemplateEndEditable -->
</td>
<td> <!-- TemplateBeginEditable name="email" --> email <!-TemplateEndEditable -->
</td>
</tr>
<!-- TemplateEndRepeat -->
</table>
Utilisation des régions facultatives
Une région facultative est une région de modèle que les utilisateurs peuvent programmer pour
qu'elle s'affiche ou reste masquée dans les documents basés sur ce modèle. Utilisez une région
facultative si vous souhaitez définir les conditions suivant lesquelles certains éléments d'un
document doivent s'afficher.
Lorsque vous insérez une région facultative, vous pouvez associer des valeurs spécifiques à un
paramètre de modèle ou bien définir des instructions conditionnelles dans un modèle. Vous
pouvez modifier la région facultative ultérieurement si nécessaire. Suivant les conditions
définies, l'utilisateur du modèle peut modifier les paramètres dans les documents qu'il crée à
partir du modèle et décider si la région facultative doit s'afficher ou non (voir Modification des
propriétés du modèle, page 377).
Rubriques connexes
■
Types de régions de modèle, page 334
Insertion d'une région facultative
Une région facultative permet de décider si des éléments doivent s'afficher ou être masqués
dans les documents basés sur le modèle. Il existe deux types d'objets de régions facultatives :
■
Une région facultative permet à l'utilisateur du modèle d'afficher ou de masquer des
régions spécialement marquées sans devoir les activer pour en modifier le contenu.
L'onglet d'une région facultative est précédé du mot if dans un modèle. Suivant la
condition définie dans le modèle, l'utilisateur du modèle peut décider si la région doit
apparaître dans les pages qu'il crée.
■
Une région facultative modifiable permet à l'utilisateur du modèle de décider si elle doit
être affichée ou masquée et d'en modifier le contenu.
362
Chapitre 11: Gestion des modèles
Par exemple, si la région facultative comprend une image ou du texte, l'utilisateur du
modèle peut décider si le contenu doit s'afficher et peut y apporter des modifications si
nécessaire. Une région modifiable est contrôlée par une instruction conditionnelle.
R E M A R QU E
Pour déterminer si les régions facultatives doivent être affichées ou masquées dans
les documents basés sur un modèle, voir Modification des propriétés du modèle,
page 377.
Pour insérer une région facultative :
1.
Dans la fenêtre de document, sélectionnez l'élément que vous souhaitez définir comme
région facultative.
2.
Procédez de l'une des manières suivantes :
■
Choisissez Insertion > Objets de modèle > Région facultative.
■
Cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfoncée (Macintosh) sur le contenu sélectionné, puis choisissez Modèles > Nouvelle
région facultative.
■
Dans la catégorie Commun de la barre Insérer, cliquez sur la flèche du bouton
Modèles, puis choisissez Région facultative.
La boîte de dialogue Région facultative s'affiche.
3.
Définissez les options de la région facultative.
Pour plus d'informations sur la définition d'une région facultative, cliquez sur le bouton
Aide de la boîte de dialogue.
4.
Cliquez sur OK.
Pour insérer une région facultative modifiable :
1.
Dans la fenêtre de document, placez le point d'insertion là où vous voulez insérer la région
facultative.
CONSEIL
2.
Il est impossible d'envelopper une sélection pour créer une région facultative
modifiable. Insérez la région puis insérez le contenu dans la région.
Procédez de l'une des manières suivantes pour ouvrir la boîte de dialogue Région
optionnelle :
■
Choisissez Insertion > Objets de modèle > Région facultative modifiable.
Utilisation des régions facultatives
363
■
Dans la catégorie Commun de la barre Insérer, cliquez sur la flèche du bouton
Modèles, puis choisissez Région facultative modifiable.
La boîte de dialogue Région facultative s'affiche.
3.
Tapez un nom pour la région facultative, puis cliquez sur l'onglet Avancé si vous souhaitez
définir d'autres options.
Pour plus d'informations sur la définition d'une région facultative, cliquez sur le bouton
Aide de la boîte de dialogue.
4.
Cliquez sur OK.
Modification d'une région facultative
Il est possible de modifier les paramètres d'une région facultative insérée dans un modèle. Par
exemple, vous pouvez indiquer si le contenu doit ou non s'afficher par défaut, lier un
paramètre à une région facultative existante ou modifier une expression de modèle.
R EM A R Q U E
Pour déterminer si les régions facultatives doivent être affichées ou masquées dans les
documents basés sur un modèle, voir Modification des propriétés du modèle, page 377.
Pour accéder à la boîte de dialogue Région optionnelle :
1.
2.
Dans la fenêtre Document, procédez de l'une des manières suivantes :
■
En mode Création, cliquez sur l'onglet correspondant à la région facultative que vous
souhaitez modifier.
■
En mode Création, placez le point d'insertion dans la région du modèle, puis, dans le
sélecteur de balises situé en bas de la fenêtre de document, sélectionnez la balise de
modèle <mmtemplate:if>.
■
En mode Code, cliquez sur la balise de commentaire de la région que vous souhaitez
modifier.
Dans l'inspecteur Propriétés (Fenêtre > Propriétés), cliquez sur le bouton Modifier.
La boîte de dialogue Région facultative s'affiche.
3.
Apportez les modifications de votre choix.
Pour plus d'informations sur l'option de la boîte de dialogue, cliquez sur le bouton Aide
de la boîte de dialogue.
4.
Cliquez sur OK.
364
Chapitre 11: Gestion des modèles
Définition d'attributs de balise
modifiables
Vous pouvez permettre aux utilisateurs d'un modèle de modifier des attributs de balise
spécifiques dans les documents créés à partir de ce modèle.
Vous pouvez par exemple appliquer une couleur d'arrière-plan au modèle tout en permettant
aux utilisateurs du modèle d'appliquer une couleur d'arrière-plan différente aux pages qu'ils
créent. Les utilisateurs peuvent mettre à jour uniquement les attributs que vous définissez
comme étant modifiables.
REMARQUE
Pour modifier des attributs de balise modifiables dans des documents basés sur un
modèle, voir Modification des propriétés du modèle, page 377.
Rubriques connexes
■
Types de régions de modèle, page 334
Définition d'attributs de balise modifiables dans un
modèle
Vous pouvez définir plusieurs attributs modifiables sur une page afin que les utilisateurs du
modèle puissent modifier les attributs dans les documents basés sur ce modèle. Les types de
données suivants sont pris en charge : texte, valeur booléenne (true/false), couleur et URL.
Pour définir un attribut de balise modifiable :
1.
Dans la fenêtre de document, sélectionnez l'élément pour lequel vous souhaitez définir un
attribut de balise modifiable.
2.
Sélectionnez Modifier > Modèles > Rendre l'attribut modifiable.
La boîte de dialogue Attributs de balise modifiables s'affiche.
3.
Complétez la boîte de dialogue pour chaque attribut que vous souhaitez rendre modifiable.
Pour plus d'informations sur la façon de compléter la boîte de dialogue, cliquez sur le
bouton Aide de la boîte de dialogue.
4.
Cliquez sur OK.
Définition d'attributs de balise modifiables
365
Lorsque vous créez un attribut de balise modifiable, un paramètre de modèle est inséré
dans le code. L'attribut reçoit une valeur initiale dans le modèle. Tous les documents créés
à partir du modèle héritent de ce paramètre. L'utilisateur du modèle peut alors modifier le
paramètre dans le document basé sur le modèle (voir Modification des propriétés du modèle,
page 377).
Conversion d'un attribut de balise modifiable en
attribut non modifiable
Une balise marquée comme modifiable peut être marquée comme non modifiable.
Pour redéfinir un attribut de balise modifiable :
1.
Dans le modèle, cliquez sur l'élément associé à l'attribut modifiable, ou bien sélectionnez
la balise au moyen du sélecteur de balises.
2.
Sélectionnez Modifier > Modèles > Rendre l'attribut modifiable.
La boîte de dialogue Attributs de balise modifiables s'affiche.
3.
Dans le menu déroulant Attributs, sélectionnez l'attribut souhaité.
4.
Décochez la case Rendre l'attribut modifiable.
5.
Cliquez sur OK.
6.
Mettez à jour les documents basés sur le modèle.
Rubriques connexes
■
Définition d'attributs de balise modifiables dans un modèle, page 365
Création d'un modèle imbriqué
Les modèles imbriqués permettent de créer des variantes du modèle de base. Pour créer un
modèle imbriqué, enregistrez un document basé sur un modèle, puis enregistrez ce document
comme nouveau modèle. Vous pouvez créer une série de modèles imbriqués en chaîne pour
obtenir une mise en forme chaque fois plus précise. Pour plus d’informations, consultez la
section Modèles imbriqués, page 342.
Par défaut, toutes les régions modifiables du modèle de base sont transmises, via le modèle
imbriqué, aux documents basés sur ce modèle imbriqué. En d'autres termes, si vous définissez
une région modifiable dans un modèle de base, puis que vous créez un modèle imbriqué, la
région modifiable apparaîtra dans les documents basés sur le modèle imbriqué, à condition
que vous n'ayez inséré aucune nouvelle région de modèle dans cette région du modèle
imbriqué.
366
Chapitre 11: Gestion des modèles
Dans les modèles imbriqués, les régions modifiables qui seront transmises aux documents sont
entourées d'un cadre bleu. Vous pouvez insérer un marqueur de modèle à l'intérieur d'une
région modifiable afin qu'elle ne soit pas modifiable dans les documents basés sur le modèle
imbriqué. Ces régions ont un cadre orange au lieu de bleu.
Pour créer un modèle imbriqué :
1.
Créez un document à partir du modèle sur lequel vous souhaitez baser le modèle imbriqué :
■
Dans la catégorie Modèles du panneau Actifs, cliquez du bouton droit de la souris
(Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur le modèle à
partir duquel vous souhaitez créer un document, puis choisissez Nouveau à partir d'un
modèle dans le menu contextuel.
■
Choisissez Fichier > Nouveau. Dans la boîte de dialogue Nouveau document, cliquez
sur l'onglet Modèles, puis sélectionnez le site qui contient le modèle que vous
souhaitez utiliser. Dans la liste de documents, double-cliquez sur le modèle pour créer
un document.
Un nouveau document s'affiche dans la fenêtre de document.
2.
Procédez de l'une des manières suivantes pour enregistrer le nouveau document comme
modèle imbriqué :
■
Choisissez Fichier > Enregistrer comme modèle.
■
Dans la catégorie Commun de la barre Insérer, cliquez sur la flèche du bouton
Modèles, puis choisissez Créer un modèle imbriqué.
La boîte de dialogue Enregistrer comme modèle s'affiche.
3.
Tapez un nom dans la zone de texte Enregistrer sous, puis cliquez sur OK.
Lorsque vous créez un document à partir d'un modèle imbriqué, vous pouvez modifier et
enrichir le contenu des régions modifiables héritées du modèle de base et des régions
modifiables créées dans le nouveau modèle.
Pour qu'une région modifiable d'un modèle imbriqué devienne non modifiable
dans les documents basés sur ce modèle :
1.
En mode Code, localisez la région modifiable que vous souhaitez rendre non modifiable
dans les documents basés sur ce modèle.
Les régions modifiables sont définies par les balises de commentaire du modèle.
2.
Entourez la région modifiable (y compris les balises de commentaire) des marqueurs
suivants :
@@(" ")@@
Création d'un modèle imbriqué
367
Pour plus d'informations, voir la TechNote 16416 sur le site Web de Macromedia à
l'adresse : www.macromedia.com/go/16416.
Modification et mise à jour des modèles
Lorsque vous apportez des modifications à un modèle et que vous l'enregistrez, Dreamweaver
met automatiquement à jour tous les documents joints à ce modèle. Vous pouvez aussi
manuellement mettre à jour les documents basés sur un modèle, si nécessaire.
REMARQUE
Pour modifier un modèle pour un site Contribute, vous devez utiliser Dreamweaver. Il est
impossible de modifier des modèles dans Contribute.
Dreamweaver vérifie automatiquement la syntaxe d'un modèle lorsque vous l'enregistrez.
Vérifiez aussi la syntaxe du modèle lorsque vous le modifiez, si désiré.
REMARQUE
Pour plus d'informations sur la modification de documents basés sur un modèle, voir
Modification du contenu d'un document basé sur un modèle, page 377.
Ouverture d'un modèle à modifier
Vous pouvez ouvrir un fichier de modèle directement pour le modifier ou bien ouvrir un
document basé sur un modèle, puis ouvrir le modèle joint pour le modifier.
Lorsque vous apportez des modifications à un modèle, Dreamweaver vous invite à mettre à
jour les documents basés sur ce modèle.
REMARQUE
Vous pouvez aussi manuellement mettre à jour les documents selon les modifications
apportées au modèle, si nécessaire (voir Mise à jour manuelle des documents basés sur un
modèle, page 370).
Pour ouvrir et modifier un fichier de modèle :
1.
Dans le panneau Actifs (Fenêtre > Actifs), choisissez la catégorie Modèles sur le côté gauche
du panneau.
Le panneau Actifs contient tous les modèles disponibles pour votre site et affiche un
aperçu du modèle sélectionné.
368
Chapitre 11: Gestion des modèles
2.
Dans la liste des modèles disponibles, procédez de l'une des manières suivantes :
■
Double-cliquez sur le nom du modèle à modifier.
■
Sélectionnez un modèle à modifier, puis cliquez sur le bouton Modifier en bas du
panneau Actifs.
Le modèle s'ouvre dans la fenêtre de document.
3.
Apportez les modifications souhaitées au contenu du modèle.
C O N S E IL
4.
Pour modifier les propriétés de page du modèle, choisissez Modifier > Propriétés de
la page (les documents basés sur un modèle héritent des propriétés de page
associées à ce dernier).
Enregistrez le modèle.
Un message s'affiche, vous invitant à mettre à jour les pages basées sur le modèle.
5.
Cliquez sur Mettre à jour pour mettre à jour tous les documents basés sur le modèle modifié
; cliquez sur Ne pas mettre à jour si vous ne souhaitez pas mettre à jour les documents basés
sur le modèle modifié.
Dreamweaver affiche un journal indiquant les fichiers mis à jour.
Pour ouvrir et modifier le modèle joint au document en cours :
1.
Ouvrez le document basé sur le modèle dans la fenêtre de document.
2.
Procédez de l'une des manières suivantes :
3.
■
Choisissez Modifier > Modèles > Ouvrir le modèle joint.
■
Cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfoncée (Macintosh), puis choisissez Modèles > Ouvrir le modèle joint.
Apportez les modifications souhaitées au contenu du modèle.
CONSEIL
4.
Pour modifier les propriétés de page du modèle, choisissez Modifier > Propriétés de
la page (les documents basés sur un modèle héritent des propriétés de page
associées à ce dernier).
Enregistrez le modèle.
Un message s'affiche, vous invitant à mettre à jour les pages basées sur le modèle.
5.
Cliquez sur Mettre à jour pour mettre à jour tous les documents basés sur le modèle modifié
; cliquez sur Ne pas mettre à jour si vous ne souhaitez pas mettre à jour les documents basés
sur le modèle modifié.
Dreamweaver affiche un journal indiquant les fichiers mis à jour.
Modification et mise à jour des modèles
369
Rubriques connexes
■
Mise à jour de modèles dans un site Contribute, page 370
■
Vérification de la syntaxe du modèle, page 371
Mise à jour manuelle des documents basés sur un
modèle
Lorsque vous modifiez un modèle, Dreamweaver vous invite à mettre à jour les documents
basés sur ce modèle, mais vous pouvez manuellement mettre à jour le document en cours ou le
site tout entier si nécessaire. La mise à jour manuelle des documents basés sur le modèle a le
même effet qu'une nouvelle application du modèle.
Pour que les modifications apportées au modèle soient appliquées au
document en cours :
1.
Ouvrez le document dans la fenêtre de document.
2.
Choisissez Modifier > Modèles > Mettre à jour la page en cours.
Dreamweaver applique au document les modifications apportées au modèle.
Pour mettre à jour le site entier ou tous les documents utilisant le modèle
spécifié :
1.
Choisissez Modifier > Modèles > Mettre à jour les pages.
La boîte de dialogue Mettre à jour les pages s'affiche.
2.
Complétez la boîte de dialogue, puis cliquez sur le bouton Démarrer.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
Dreamweaver met à jour les fichiers indiqués. Si vous avez sélectionné l'option Afficher le
journal, Dreamweaver affiche des informations sur les fichiers qu'il essaie de mettre à jour
et précise si la mise à jour a réussi.
3.
Cliquez sur le bouton Fermer pour fermer la boîte de dialogue.
Rubriques connexes
■
Ouverture d'un modèle à modifier, page 368
■
Vérification de la syntaxe du modèle, page 371
Mise à jour de modèles dans un site Contribute
Les utilisateurs de Contribute ne peuvent pas modifier de modèles Dreamweaver. Vous
pouvez cependant utiliser Dreamweaver pour apporter des modifications dans un modèle de
site Contribute.
370
Chapitre 11: Gestion des modèles
Gardez à l'esprit les points suivants lorsque vous mettez à jour des modèles dans un site
Contribute :
■
Contribute récupère les nouveaux modèles et les modèles modifiés depuis le site
uniquement au lancement de Contribute et lorsqu'un utilisateur de Contribute modifie
ses informations de connexion. Si vous apportez des modifications à un modèle lorsqu'un
utilisateur de Contribute modifie un fichier basé sur ce modèle, l'utilisateur ne peut pas
visualiser vos modifications tant qu'il ne relance pas Contribute.
■
Si vous supprimez une région modifiable d'un modèle lorsqu'un utilisateur de Contribute
est en train de modifier une page basée sur ce modèle, le contenu de cette région
modifiable peut troubler cet utilisateur.
Pour modifier un modèle dans un site Contribute :
1.
Modifiez le modèle à l'aide de Dreamweaver.
Pour plus d'informations, voir Ouverture d'un modèle à modifier, page 368.
2.
Indiquez à tous les utilisateurs de Contribute travaillant sur ce site de quitter Contribute
puis de le relancer.
Vérification de la syntaxe du modèle
Dreamweaver vérifie automatiquement la syntaxe du modèle lorsque vous l'enregistrez, mais
vous pouvez la vérifier manuellement avant d'enregistrer le modèle. Par exemple, si vous
ajoutez un paramètre ou une expression de modèle en mode Code, vous pouvez vérifier que le
code suit la syntaxe correcte.
Pour vérifier si la syntaxe d'un modèle est correcte :
1.
Ouvrez le document que vous souhaitez vérifier dans la fenêtre de document.
2.
Choisissez Modifier > Modèles > Vérifier la syntaxe du modèle.
Un message d'erreur s'affiche lorsque cette syntaxe est incorrecte. Le message décrit l'erreur et
indique la ligne du code à l'origine de cette erreur.
Rubriques connexes
■
Syntaxe des balises du modèle, page 340
■
Expressions de modèle, page 346
Modification et mise à jour des modèles
371
Gestion des modèles
Gérez les modèles existants à l'aide de la catégorie Modèles du panneau Actifs. Elle permet
entre autres de renommer ou supprimer des fichiers de modèle.
REMARQUE
A l'aide du panneau Actifs, vous pouvez également appliquer un modèle à un document
(voir Modification et mise à jour des modèles, page 368) ou modifier un modèle (voir
Ouverture d'un modèle à modifier, page 368).
Pour renommer un modèle dans le panneau Actifs :
1.
Dans le panneau Actifs (Fenêtre > Actifs), choisissez la catégorie Modèles sur le côté gauche
du panneau.
2.
Cliquez sur le nom du modèle pour le sélectionner.
3.
Cliquez une nouvelle fois sur le nom de sorte que le texte soit modifiable, puis tapez le
nouveau nom.
cette méthode fonctionne de la même façon que celle utilisée dans l'Explorateur Windows
ou dans le Finder (Macintosh). Comme avec l'Explorateur Windows et le Finder, vous
devez attendre un bref instant entre les deux clics. Ne double-cliquez pas sur le nom, car
cela ouvrirait le modèle pour modification.
4.
Cliquez sur une autre zone du panneau Actifs ou appuyez sur Entrée (Windows) ou Retour
(Macintosh) pour appliquer la modification.
Un message apparaît pour vous demander si vous voulez mettre à jour les documents créés
à partir de ce modèle.
5.
Pour mettre à jour tous les documents du site créés à partir de ce modèle, cliquez sur Mettre
à jour. Pour ne mettre à jour aucun des documents créés à partir de ce modèle, cliquez sur
Ne pas mettre à jour.
Pour supprimer un fichier de modèle :
1.
Dans le panneau Actifs (Fenêtre > Actifs), choisissez la catégorie Modèles sur le côté gauche
du panneau.
2.
Cliquez sur le nom du modèle pour le sélectionner.
3.
Cliquez sur le bouton Supprimer en bas du panneau, puis confirmez l'opération.
A T T E NT I O N
372
Une fois que vous avez supprimé un fichier de modèle, vous ne pouvez pas le
récupérer. Le fichier de modèle est supprimé de votre site.
Chapitre 11: Gestion des modèles
Les documents créés à partir de ce modèle ne sont pas détachés du modèle. Ils conservent
la structure et les régions modifiables dont le fichier de modèle disposait avant d'être
supprimé. Pour convertir un document de ce type en fichier HTML normal sans régions
modifiables ou verrouillées, voir Détachement d'un document d'un modèle, page 376.
Rubriques connexes
Création d'un modèle Dreamweaver, page 348
■
■
Application ou suppression d'un modèle depuis un document existant, page 375
■
Modification et mise à jour des modèles, page 368
Exportation et importation du contenu
XML d'un modèle
Vous pouvez imaginer qu'un document basé sur un modèle contient des données représentées
par des paires nom/valeur. Chaque paire se compose du nom d'une région modifiable et du
contenu de cette région.
Dreamweaver vous permet d'exporter les paires nom/valeur dans un fichier XML pour que
vous puissiez utiliser les données du document en dehors de Dreamweaver (par exemple dans
un éditeur XML, dans un éditeur de texte ou même dans une application de base de données).
Inversement, si vous disposez d'un document XML structuré de manière appropriée, vous
pouvez importer ses données dans un document basé sur un modèle Dreamweaver.
Pour exporter les régions modifiables d'un document sous XML :
1.
Ouvrez un document basé sur un modèle qui contient des régions modifiables.
2.
Choisissez Fichier > Exporter > Données du modèle en XML.
La boîte de dialogue Exporter les données du modèle en XML s'affiche.
3.
4.
Activez l'une des options Notation :
■
Si le modèle contient des régions répétées ou des paramètres de modèle, choisissez
Utiliser les balises XML standard de Dreamweaver.
■
Si le modèle ne contient ni région répétée ni paramètre de modèle, choisissez Utiliser
noms de régions modifiables comme balises XML.
Cliquez sur OK.
Une boîte de dialogue s'affiche afin que vous puissiez enregistrer le fichier XML.
5.
Sélectionnez un dossier, nommez le fichier XML, puis cliquez sur le bouton Enregistrer.
Exportation et importation du contenu XML d'un modèle
373
Dreamweaver génère un fichier XML contenant le matériau des paramètres et des régions
modifiables du document (y compris le matériau des régions facultatives et des régions
modifiables situées à l'intérieur de régions répétées). Le fichier XML comporte le nom du
modèle original, ainsi que le nom et le contenu de chaque région de modèle.
REMARQUE
Le contenu des régions non modifiables n'est pas exporté vers le fichier XML.
Pour importer du contenu XML :
1.
Choisissez Fichier > Importer > XML dans le modèle.
La boîte de dialogue Importer XML s'affiche.
2.
Sélectionnez le fichier XML, puis cliquez sur le bouton Ouvrir.
Dreamweaver crée un nouveau document basé sur le modèle spécifié dans le fichier XML. Il
remplit le contenu de chaque région modifiable de ce document à l'aide des données du
fichier XML. Le document résultant apparaît dans une nouvelle fenêtre de document.
CONSEIL
Si votre fichier XML n'est pas configuré exactement de la façon prévue par
Dreamweaver, vous ne pourrez peut-être pas importer vos données. Une solution à ce
problème consiste à exporter un fichier XML fictif de Dreamweaver, de façon à avoir un
fichier XML ayant exactement la bonne structure, puis à copier les données de votre
fichier XML original dans le fichier XML exporté. Vous obtenez ainsi un fichier XML
ayant une structure correcte et contenant les données appropriées, prêtes à être
importées.
Exportation d'un site sans marqueur de
modèle
Si vous souhaitez que les documents basés sur un modèle ne contiennent pas de marqueur de
modèle lorsque vous les exportez vers un autre site, utilisez la commande Exporter un site sans
marqueur de modèle.
Pour exporter un site sans marqueur de modèle :
1.
Choisissez Modifier > Modèles > Exporter sans marqueur.
La boîte de dialogue Exporter un site sans marqueur de modèle s'affiche.
374
Chapitre 11: Gestion des modèles
2.
Sélectionnez le dossier dans lequel exporter le site, puis activez les options d'exportation
supplémentaires désirées.
R E M A R QU E
Sélectionnez un dossier situé à l'extérieur du site courant.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
3.
Cliquez sur OK.
Application ou suppression d'un modèle
depuis un document existant
Lorsque vous appliquez un modèle à un document existant, Dreamweaver relie son contenu
aux régions du modèle ou vous demande de résoudre les éléments non cohérents. Vous pouvez
supprimer le modèle par la suite pour apporter des modifications aux régions verrouillées.
Application d'un modèle à un document existant
Lorsque vous appliquez un modèle à un document contenant déjà des éléments,
Dreamweaver tente de faire concorder le contenu existant avec une région du modèle. Si le
modèle que vous appliquez au document est une version révisée de l'un des modèles existants,
il est probable que les noms concordent.
Si vous appliquez un modèle à un document auquel aucun modèle n'a encore été appliqué, les
régions modifiables ne peuvent pas être comparées et un cas de non-concordance se présente.
Dreamweaver les localise et vous pouvez alors sélectionner la région ou les régions vers
lesquelles le contenu de la page courante doit être transféré, ou bien décider de supprimer le
contenu non cohérent.
Vous pouvez appliquer un modèle à un document existant à l'aide du panneau Actifs ou à
partir de la fenêtre de document. Vous pouvez annuler l'application d'un modèle si nécessaire.
Pour appliquer un modèle à un document existant à l'aide du panneau Actifs :
1.
Ouvrez le document auquel vous souhaitez appliquer le modèle.
2.
Dans le panneau Actifs (Fenêtre > Actifs), choisissez la catégorie Modèles sur le côté gauche
du panneau.
3.
Procédez de l'une des manières suivantes :
Application ou suppression d'un modèle depuis un document existant
375
■
Faites glisser le modèle que vous souhaitez appliquer du panneau Actifs dans la fenêtre
de document.
■
Sélectionnez le modèle que vous souhaitez appliquer, puis cliquez sur le bouton
Appliquer en bas du panneau Actifs.
Si le document comporte des éléments qui ne peuvent pas être automatiquement attribués
à une région de modèle, la boîte de dialogue Noms de région incohérents s'affiche.
4.
Le cas échéant, sélectionnez une destination pour le contenu non concordant, puis cliquez
sur OK.
Pour plus d'informations sur le transfert du contenu existant vers des régions modifiables,
voir Résolution des incohérences de noms de région dans Utilisation de Dreamweaver.
Pour appliquer un modèle à un document existant à partir de la fenêtre de
document :
1.
Ouvrez le document auquel vous souhaitez appliquer le modèle.
2.
Choisissez Modifier > Modèles > Appliquer le modèle à la page.
La boîte de dialogue Sélectionner le modèle s'affiche.
3.
Sélectionnez un modèle dans la liste, puis cliquez sur le bouton Sélectionner.
Si le document comporte des éléments qui ne peuvent pas être automatiquement attribués
à une région de modèle, la boîte de dialogue Noms de région incohérents s'affiche.
4.
Le cas échéant, sélectionnez une destination pour le contenu non concordant, puis cliquez
sur OK.
Pour plus d'informations sur le transfert du contenu existant vers des régions modifiables,
voir Résolution des incohérences de noms de région dans Utilisation de Dreamweaver.
Pour annuler les modifications apportées à un modèle :
■
Choisissez Edition > Annuler l'application du modèle.
Le document retrouve l'état dans lequel il se trouvait avant l'application du modèle.
Détachement d'un document d'un modèle
Pour apporter des modifications aux régions verrouillées d'un document basé sur un modèle,
vous devez au préalable détacher le document du modèle. Lorsqu'un document est détaché,
toutes les régions qui le composent deviennent modifiables.
Pour détacher un document d'un modèle :
1.
Ouvrez le document basé sur un modèle que vous souhaitez détacher.
2.
Choisissez Modifier > Modèles > Détacher du modèle.
376
Chapitre 11: Gestion des modèles
Le document est détaché du modèle et tout le code du modèle est supprimé.
Rubriques connexes
■
Application d'un modèle à un document existant, page 375
Modification du contenu d'un document
basé sur un modèle
Les modèles de Dreamweaver spécifient les régions qui sont verrouillées (non modifiables) et
les autres qui sont modifiables dans les documents basés sur ces modèles (voir A propos des
modèles Dreamweaver, page 334).
Sur les pages basées sur un modèle (voir Création d'un document basé sur un modèle existant,
page 102), les utilisateurs peuvent modifier uniquement le contenu des régions modifiables.
Vous pouvez facilement identifier et sélectionner les régions modifiables afin d'en modifier le
contenu (voir Sélection de régions modifiables, page 357). Les utilisateurs du modèle ne
peuvent pas modifier le contenu des régions verrouillées.
REMARQUE
si vous essayez de modifier une région verrouillée dans un document basé sur un modèle
lorsque la surbrillance est désactivée, le pointeur de la souris se transforme pour indiquer
que vous ne pouvez pas cliquer dans une région modifiable.
Les utilisateurs du modèle peuvent également modifier les propriétés et les entrées d'une
région répétée dans les documents basés sur ce modèle.
Modification des propriétés du modèle
Lorsque l'auteur crée des paramètres dans un modèle (voir Paramètres de modèle, page 345),
les documents basés sur ce modèle héritent automatiquement des paramètres et de leur valeur
initiale. L'utilisateur du modèle peut mettre à jour les attributs de balise modifiables et
d'autres paramètres du modèle (ceux d'une région facultative, par exemple).
Pour modifier un attribut de balise modifiable :
1.
Ouvrez le document basé sur un modèle.
2.
Choisissez Modifier > Propriétés du modèle.
La boîte de dialogue Propriétés du modèle s'ouvre et affiche la liste des propriétés
disponibles. Elle indique les régions facultatives et les attributs de balise modifiables.
Modification du contenu d'un document basé sur un modèle
377
3.
Sélectionnez la propriété dans la liste Nom.
L'étiquette et la valeur de la propriété sélectionnée s'affichent dans la partie inférieure de la
boîte de dialogue.
4.
Si vous souhaitez modifier la valeur de la propriété dans le document courant, saisissez une
autre valeur dans le champ situé à droite de l'étiquette de la propriété.
REMARQUE
5.
Le nom du champ et les valeurs modifiables sont définis dans le modèle. Les
attributs non répertoriés dans la liste Nom ne peuvent pas être modifiés dans le
document basé sur un modèle.
Activez l'option Autoriser les modèles imbriqués pour contrôler ceci si vous souhaitez que
la propriété modifiable soit transmise aux documents basés sur le modèle imbriqué.
Pour modifier les paramètres de modèle des régions facultatives :
1.
Ouvrez le document basé sur un modèle.
2.
Choisissez Modifier > Propriétés du modèle.
La boîte de dialogue Propriétés du modèle s'ouvre et affiche la liste des propriétés
disponibles. Elle indique les régions facultatives et les attributs de balise modifiables.
3.
Sélectionnez une propriété dans la liste Nom.
L'étiquette et la valeur de la propriété sélectionnée s'affichent dans la boîte de dialogue.
4.
Activez l'option Afficher si vous souhaitez que la région facultative apparaisse dans le
document, ou bien désactivez-la si vous souhaitez qu'elle soit masquée.
REMARQUE
5.
Le nom du champ et la valeur par défaut sont définis dans le modèle.
Activez l'option Autoriser les modèles imbriqués pour contrôler ceci si vous souhaitez que
la propriété modifiable soit transmise aux documents basés sur le modèle imbriqué.
Rubriques connexes
■
Définition d'attributs de balise modifiables, page 365
■
378
Utilisation des régions facultatives, page 362
Chapitre 11: Gestion des modèles
Ajout et suppression d'entrées et modification de
l'ordre des entrées dans une région répétée
Vous pouvez ajouter ou supprimer des entrées ou bien modifier l'ordre des entrées dans une
région répétée. Lorsque vous ajoutez une entrée de région répétée, l'ensemble de la région
répétée est reproduit dans le document. La région répétée doit contenir une région modifiable
dans le modèle original pour que l'utilisateur puisse en modifier le contenu.
Pour ajouter et supprimer des entrées et pour modifier l'ordre des entrées dans
une région répétée :
1.
Placez le point d'insertion sur la région répétée pour le sélectionner.
2.
Procédez de l'une des manières suivantes :
■
Cliquez sur le bouton plus (+) pour ajouter une entrée de région répétée sous l'entrée
sélectionnée.
■
Cliquez sur le bouton moins (–) pour supprimer l'entrée de région répétée
sélectionnée.
■
Cliquez sur le bouton Flèche bas pour déplacer l'entrée sélectionnée d'un niveau vers
le bas.
■
Cliquez sur le bouton Flèche haut pour déplacer l'entrée sélectionnée d'un niveau vers
le haut.
REMARQUE
Vous pouvez également choisir Modifier > Modèles, puis activer l'une des options
d'entrée répétée près du bas du menu contextuel. Celui-ci permet d'insérer une
nouvelle entrée de région répétée et de modifier l'emplacement de l'entrée
sélectionnée.
Pour couper, copier et supprimer des entrées :
1.
Placez le point d'insertion sur la région répétée pour le sélectionner.
2.
Procédez de l'une des manières suivantes :
■
Pour couper une entrée répétée, choisissez Edition > Entrées répétées > Couper l'entrée
répétée.
Modification du contenu d'un document basé sur un modèle
379
■
Pour copier une entrée répétée, choisissez Edition > Entrées répétées > Couper l'entrée
répétée.
■
Pour supprimer une entrée répétée, choisissez Edition > Entrées répétées > Supprimer
l'entrée répétée.
■
Pour coller une entrée répétée, choisissez Edition > Coller.
REMARQUE
Lorsque vous collez une entrée de région répétée, celle-ci s'insère dans le
document sans écraser d'entrée existante.
Rubriques connexes
■
Création de régions répétées, page 359
380
Chapitre 11: Gestion des modèles
4
PARTIE 4
Ajout de contenu aux pages
Ajoutez des contenus variés à vos pagesWeb à l'aide des outils visuels de
Macromedia Dreamweaver 8. Ajoutez des textes, images, couleurs,
animations, sons et autres formes de données, puis mettez-les en forme.
Assurez-vous de rendre vos pages accessibles aux personnes souffrant de
handicaps.
Cette partie du manuel contient les chapitres suivants :
Chapitre 12 : Utilisation des pages . . . . . . . . . . . . . . . . . . . . . . . . . 383
Chapitre 13 : Insertion et mise en forme de texte. . . . . . . . . . . . . . 415
Chapitre 14 : Insertion d’images . . . . . . . . . . . . . . . . . . . . . . . . . . . 457
Chapitre 15 : Liens et navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . 473
Chapitre 16 : Utilisation d'autres applications. . . . . . . . . . . . . . . . 509
Chapitre 17 : Ajout d'éléments audio, vidéo et interactifs. . . . . . 527
Chapitre 18 : Utilisation des comportements JavaScript . . . . . . 555
381
CHAPITRE 12
12
Utilisation des pages
Macromedia Dreamweaver 8 dispose de nombreuses fonctions vous permettant de créer de
nouvelles pages Web en toute facilité. Vous pouvez ainsi aisément définir de nombreuses
propriétés de page (titre, image et couleur d'arrière-plan, couleur des textes et des liens, etc.).
De plus, Dreamweaver comprend des outils vous permettant d'optimiser les performances de
votre site Web et de tester les pages pour garantir leur compatibilité avec différents navigateurs
Web
Ce chapitre contient les sections suivantes :
A propos de l'utilisation des pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .384
Enregistrement de pages Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .389
Spécification de balises HTML au lieu de CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390
Définition des propriétés de page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390
Utilisation des couleurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .393
Sélection d'éléments dans la fenêtre de document . . . . . . . . . . . . . . . . . . . . . . . . . 395
Zoom avant et arrière . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .397
Utilisation du panneau Historique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399
Automatisation des tâches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400
Utilisation de comportements Java Script pour détecter le type et la
version des navigateurs et des plug-ins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408
Aperçu et test de page dans les navigateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408
Vérification des préférences de durée et de la taille de téléchargement . . . . . . . . 412
383
A propos de l'utilisation des pages
Lors de la création d'une nouvelle page Web, vous devez considérer les navigateurs et systèmes
d'exploitation des visiteurs qui consulteront votre site et, éventuellement, les langues à utiliser.
Les sections suivantes vous guideront dans le choix de couleurs définies qui s'afficheront de
manière identique sur différents navigateurs Web, l'encodage de divers caractères pour
certaines langues ou encore la vérification de la compatibilité d'un navigateur défini avec votre
site.
A propos de la 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
mise en forme 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.
384
Chapitre 12: Utilisation des pages
Par défaut Dreamweaver met le texte en forme à l'aide de feuilles de style en cascade (CSS).
Vous pouvez choisir d'utiliser le langage HTML pour mettre les pages en forme par le biais de
la boîte de dialogue Préférences (Edition > Préférences). Lors de l'utilisation des propriétés de
page CSS, Dreamweaver utilise des balises CSS pour l'ensemble des propriétés définies dans
les catégories Aspect, Liens et En-têtes de la boîte de dialogue Propriétés de la page. Les balises
CSS qui définissent ces attributs sont intégrées dans la section head de la page.
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.
Comparaison des propriétés de page CSS et HTML
Par défaut, Dreamweaver utilise les balises CSS pour attribuer les propriétés de page. Si vous
souhaitez utiliser des balises HTML à la place, vous devez le spécifier dans la boîte de dialogue
Préférences (voir Spécification de balises HTML au lieu de CSS, page 390 pour plus
d'informations).
Si vous choisissez d'utiliser des balises HTML au lieu des styles CSS, l'inspecteur Propriétés
affiche quand même le menu déroulant Style. Cependant, les commandes de police, taille,
couleur et alignement indiquent uniquement les propriétés qui utilisent les balises HTML.
Les valeurs des propriétés CSS appliquées à la sélection en cours ne sont plus visibles et le
menu déroulant Taille est désactivé.
A propos de l'utilisation des pages
385
Rubriques connexes
■
Spécification de balises HTML au lieu de CSS, page 390
■
Définition des propriétés de page, page 390
A propos du panneau Historique
Le panneau Historique répertorie un nombre défini d'actions réalisées au sein du document
actif depuis que vous l'avez créé ou ouvert, mais il n'affiche pas les actions réalisées dans
d'autres cadres, d'autres fenêtres de document ou dans le panneau Site. Il vous permet
d'annuler une ou plusieurs actions, de reproduire des actions et de créer de nouvelles
commandes pour automatiser les tâches répétitives.
Etapes
Curseur (index)
Bouton Reproduire
Bouton Enregistrer comme commande
Bouton Copier les étapes
Lors de l'ouverture du panneau Historique, le curseur, ou index, pointe sur la dernière action
que vous avez accomplie.
Rubriques connexes
■
Utilisation du panneau Historique, page 399
A propos des couleurs sécurisées pour le Web
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.
386
Chapitre 12: Utilisation des pages
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). Aujourd'hui, la plupart des ordinateurs affichent des milliers ou des
millions de couleurs (16 et 32 bits). 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 bit) ou 256 couleurs (8 bits).
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 bits et d'utilisateurs d'UNIX équipés de moniteurs 8 bits), 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.
Rubriques connexes
■
Utilisation des couleurs, page 393
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é.
A propos de l'utilisation des pages
387
Par exemple, si vous spécifiez Occidental (Latin1), la balise meta suivante est insérée : <meta
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).
http-equiv="Content-Type" content="text/html; charset=iso-8859-1">.
Si vous spécifiez Japonais (Maj JIS), la balise meta suivante est insérée : <meta httpequiv="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.
Pour modifier l'encodage du document dans une page, voir Définition des propriétés de page,
page 390. Pour modifier l'encodage utilisé par défaut par Dreamweaver pour créer de
nouveaux documents, voir Définition d'un nouveau type de document par défaut, page 103.
Pour modifier les polices utilisées dans Dreamweaver pour afficher chaque encodage, voir
Définition des préférences de police pour l'affichage Dreamweaver, page 81.
Comparatif utilisation de commandes enregistrées /
reproduction d'étapes
Dreamweaver permet d'enregistrer une commande temporaire à utilisation limitée ou de
reproduire des étapes du panneau Historique.
Lorsque vous enregistrez une commande temporaire :
■
Les étapes sont enregistrées au fur et à mesure que vous les effectuez, vous n'avez donc pas
besoin de les sélectionner dans le panneau Historique.
■
Durant la mémorisation, Dreamweaver vous empêche d'effectuer des actions à l'aide de la
souris lorsqu'il ne peut pas les mémoriser (par exemple un clic pour sélectionner un objet
dans une fenêtre ou glisser et déposer un élément sur une page).
■
Si vous passez dans un autre document durant une mémorisation, Dreamweaver ne
mémorise pas les actions effectuées dans l'autre document. Pour savoir à tout moment si
vous êtes en train de mémoriser, regardez le pointeur de la souris.
Rubriques connexes
■
Automatisation des tâches, page 400
■
Répétition d'étapes, page 401
■
Mémorisation de commandes, page 407
388
Chapitre 12: Utilisation des pages
Enregistrement de pages Web
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.
Pour enregistrer un document :
1.
Procédez de l'une des manières 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.
Pour enregistrer 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.
3.
Dans la zone de texte Nom de fichier, entrez le nom du fichier.
4.
Cliquez sur Enregistrer pour enregistrer le fichier.
Pour revenir à la version précédemment enregistrée d'un document :
1.
Choisissez 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.
Enregistrement de pages Web
389
2.
Cliquez sur Oui pour revenir à la version précédente ou sur Non pour appliquer les
modifications.
R E M A R QU E
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.
Rubriques connexes
■
Création de nouveaux documents, page 100
■
Enregistrement d'un nouveau document, page 103
Spécification de balises HTML au lieu de
CSS
Par défaut, Dreamweaver utilise les balises CSS pour attribuer les propriétés de page. Si vous
préférez utiliser des balises HTML, désactivez l'option Utiliser des balises CSS au lieu de
balises HTML dans la catégorie Général de la boîte de dialogue Préférences.
Pour spécifier des balises HTML au lieu de balises CSS pour les propriétés de
la page :
1.
Choisissez Edition > Préférences.
La boîte de dialogue Préférences s'affiche.
2.
Dans la catégorie Général de la boîte de dialogue Préférences, désactivez l'option Utiliser
des balises CSS au lieu de balises HTML.
Cette case à cocher se trouve dans la catégorie Options d'édition du panneau Préférences
générales.
3.
Cliquez sur OK.
Rubriques connexes
■
A propos de la définition des propriétés de page, page 384
Définition des propriétés de page
Les propriétés de base des documents Web sont les suivantes : titre de la page, images et
couleurs d'arrière-plan, couleur de base du texte et des liens et marges. Vous pouvez définir ou
modifier les propriétés de page à l'aide de la boîte de dialogue Propriétés de la page.
390
Chapitre 12: Utilisation des pages
Pour définir les propriétés de document :
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.
La boîte de dialogue Propriétés de la page s'ouvre.
2.
Effectuez les changements de votre choix dans les propriétés de la page.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
3.
Cliquez sur OK.
Rubriques connexes
■
A propos de la définition des propriétés de page, page 384
■
Définition du style de soulignement des liens CSS, page 392
■
Définition d'une image ou d'une couleur d'arrière-plan de la page, page 392
Modification du titre d'un document
Le titre d'une page HTML permet au visiteur de connaître le sujet de la page qu'il vient
d'afficher dans son navigateur, et identifie cette page dans les listes de l'historique et des liens
favoris (signets). Si vous n'attribuez pas de titre à la page, elle apparaîtra sous le nom de
Document sans nom dans la fenêtre du navigateur, dans les signets et dans l'historique.
REMARQUE
Le nom de fichier que vous donnez au document (lorsque vous l'enregistrez) n'a rien à
voir avec le titre de la page.
Pour localiser tous les documents sans nom de votre site, utilisez la commande Site > Rapports
(voir Test de votre site, page 173).
Pour changer le titre d'une page :
1.
2.
La fenêtre de document étant active, procédez de l'une des manières suivantes :
■
Choisissez Modifier > Propriétés de la page.
■
Choisissez Affichage > Barres d'outils > Document (si celle-ci n'est pas déjà
sélectionnée).
■
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche
Contrôle enfoncée (Macintosh) sur une zone vide du document, puis sélectionnez
Propriétés de la page.
Dans la zone de texte Titre, tapez le titre de la page, puis appuyez sur la touche Entrée
(Windows) ou Retour (Macintosh).
Définition des propriétés de page
391
3.
Si vous modifiez le titre dans la boîte de dialogue Propriétés de la page, cliquez sur OK.
Le titre apparaît dans la barre de titre de la fenêtre de document (et dans la barre d'outils
Document si elle est affichée). Le nom de fichier de la page et le nom du dossier dans
lequel ce fichier est enregistré apparaissent entre parenthèses à côté du titre, dans la barre
de titre. Un astérisque indique que le document contient des modifications qui n'ont pas
encore été enregistrées.
Rubriques connexes
■
A propos de la définition des propriétés de page, page 384
Définition du style de soulignement des liens CSS
Si vous utilisez la boîte de dialogue de propriétés de page CSS par défaut, vous pouvez
facilement modifier le style des liens CSS. A l'aide des options de liens CSS, vous pouvez
décider que les liens ne soient jamais soulignés ou alors qu'ils soient soulignés ou désactivés
uniquement lorsque la souris est placée dessus.
Pour définir un style de lien CSS :
1.
Choisissez Modifier > Propriétés de la page ou sélectionnez Propriétés de la page dans le
menu contextuel de la fenêtre de document en mode Création.
2.
Sélectionnez la catégorie Liens dans la boîte de dialogue Propriétés de la page CSS.
3.
Dans le menu déroulant Style souligné, sélectionnez le style souligné à utiliser par défaut
pour votre page.
4.
Cliquez sur OK.
Rubriques connexes
■
A propos de la définition des propriétés de page, page 384
■
Chapitre 15, Liens et navigation, page 473
Définition d'une image ou d'une couleur d'arrière-plan
de la page
Pour définir une image ou une couleur d'arrière-plan de la page, utilisez la boîte de dialogue
Propriétés de la page.
Si vous utilisez à la fois une image et une couleur d'arrière-plan, la couleur apparaît pendant le
téléchargement de l'image, puis elle est recouverte par l'image. Toutefois, si l'image d'arrièreplan comprend des pixels transparents, la couleur d'arrière-plan reste visible dans ces zones.
392
Chapitre 12: Utilisation des pages
Pour définir une image ou une couleur d'arrière-plan :
1.
Choisissez Modifier > Propriétés de la page ou sélectionnez Propriétés de la page dans le
menu contextuel de la fenêtre de document en mode Création.
2.
Sélectionnez la catégorie Aspect dans la boîte de dialogue Propriétés de la page.
3.
Pour définir une image d'arrière-plan, cliquez sur le bouton Parcourir, puis naviguez
jusqu'à 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.
Comme les navigateurs, 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. Pour éviter la création de cette
mosaïque, désactivez cette fonction à l'aide des feuilles de style en cascade. Voir Définition
des propriétés d'arrière-plan de style CSS dans le menu Aide, Utilisation de Dreamweaver.)
4.
Pour définir une couleur d'arrière-plan, cliquez sur la case Couleur d'arrière-plan, puis
choisissez une couleur dans le sélecteur.
Rubriques connexes :
■
A propos de la définition des propriétés de page, page 384
Utilisation des couleurs
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.
Pour sélectionner une couleur dans Dreamweaver :
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.
Procédez de l'une des manières suivantes :
Utilisation des couleurs
393
■
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. Pour plus d'informations,
voir A propos des couleurs sécurisées pour le Web, page 386.
■
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 maintenezle 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 les palettes Cubes de couleur, Ton continu,
Système d'exploitation Windows, Mac OS, Niveaux de gris et Couleurs Web.
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. Si la palette que vous utilisez n'est pas sécurisée pour le Web et que vous
cliquez sur Couleurs Web, Dreamweaver remplace la couleur sélectionnée par la
couleur sécurisée pour le Web la plus proche. Autrement dit, la couleur que vous
voyez n'est pas forcément celle que vous avez choisie.
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. Pour
plus d'informations, voir A propos des couleurs sécurisées pour le Web, page 386.
Définition des couleurs par défaut du texte
La boîte de dialogue Propriétés de la page permet de définir les couleurs par défaut pour le
texte ordinaire, les liens, les liens visités et les liens actifs. Vous pouvez aussi choisir une palette
de couleurs prédéfinie pour les couleurs de l'arrière-plan et du texte (voir Utilisation des
couleurs, page 393).
REMARQUE
394
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.
Chapitre 12: Utilisation des pages
Pour définir les couleurs de texte par défaut, procédez de l'une des manières
suivantes :
■
Choisissez Modifier > Propriétés de la page, puis choisissez la couleur pour les options
Couleur du texte, Couleur du lien, Liens visités et Liens actifs.
■
Choisissez Commandes > Définir le modèle de couleur, puis choisissez la couleur
d'arrière-plan et les couleurs du texte et des liens.
La zone d'exemple affiche l'aspect qu'aura la palette de couleurs dans le navigateur.
REMARQUE
Si vous définissez ces paramètres à l'aide de la boîte de dialogue Propriétés de la
page, avec les balises CSS par défaut, la commande Modèle de couleur n'affecte
pas l'apparence de votre page. En effet, les balises CSS supplantent les balises
HTML.
Rubriques connexes
■
A propos de la définition des propriétés de page, page 384
Sélection 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, il suffit
généralement de cliquer dessus. Si un élément est invisible, vous devez le rendre visible pour le
sélectionner. Pour plus d'informations sur les éléments invisibles, voir Affichage et masquage
des éléments invisibles, page 396.
Pour sélectionner des éléments, utilisez ces techniques :
■
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, un calque peut se trouver n'importe où sur la page, mais le
code qui le définit se trouve à 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 calque, tout le calque
est sélectionné (voir Affichage et masquage des éléments invisibles, page 396).
Sélection d'éléments dans la fenêtre de document
395
■
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>.
Pour afficher le code HTML associé au texte ou à l'objet sélectionné, procédez
de l'une des manières 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.
Pour plus d'informations sur le mode Code, voir Affichage du code, page 597.
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. Voir Affichage
du code, page 597.
Affichage et masquage des éléments invisibles
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 vous 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 lorsque vous choisissez Affichage > Assistances visuelles > Eléments
invisibles, 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.
396
Chapitre 12: Utilisation des pages
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 de la barre Insérer (voir Utilisation
de la barre Insérer, page 59). Vous pouvez ensuite modifier ces éléments à l'aide de l'inspecteur
Propriétés.
Pour afficher ou masquer les 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.
Pour modifier les préférences pour les éléments invisibles :
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 dont le marqueur doit être visible.
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.
Pour plus de détails sur les préférences Eléments invisibles, voir Affichage et masquage des
éléments invisibles dans Utilisation de Dreamweaver.
3.
Cliquez sur OK.
Zoom avant et arrière
Dreamweaver permet d'agrandir ou de réduire l'affichage d'un 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.
R E M A R QU E
Les outils de zoom ne sont disponible qu'en mode Création.
Pour faire un zoom avant dans une page :
1.
Sélectionnez l'outil Zoom (la loupe) située dans le coin inférieur droit de la fenêtre du
document.
2.
Procédez de l'une des manières suivantes :
Zoom avant et arrière
397
■
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.
CONSEIL
Vous pouvez également effectuer un grossissement avec l'outil Zoom en appuyant
sur Ctrl+= (Windows) ou Commande+= (Macintosh).
Pour faire un zoom arrière :
1.
Sélectionnez l'outil Zoom.
2.
Appuyez sur la touche Alt (Windows) ou Option (Macintosh), puis cliquez sur la page.
CONSEIL
Vous pouvez également effectuer une réduction avec l'outil Zoom en appuyant sur
Ctrl+- (Windows) ou Commande+- (Macintosh).
Pour modifier une page après un zoom :
■
Sélectionnez l'outil Pointeur (icône en forme de flèche) située dans le coin inférieur droit
de la fenêtre du document, puis cliquez dans la page.
Pour parcourir une page après un zoom :
1.
Sélectionnez l'outil Main (icône en forme de main) située dans le coin inférieur droit de la
fenêtre du document.
2.
Faites glisser la page.
Pour adapter 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.
Pour adapter la fenêtre du document à une page entière :
■
Sélectionnez Affichage > Ajuster à la page.
Pour adapter la fenêtre du document à la largeur d'une page :
■
Sélectionnez Affichage > Ajuster à la largeur.
Rubriques connexes
■
Barre d'état, page 48
398
Chapitre 12: Utilisation des pages
Utilisation du panneau Historique
Le panneau Historique enregistre toutes les étapes de votre travail dans Dreamweaver. Vous
pouvez utiliser le panneau Historique pour annuler plusieurs étapes simultanément.
Pour annuler la dernière opération effectuée dans un document, choisissez Edition > Annuler,
comme dans la plupart des applications (dans le menu Edition, le nom de la commande
Annuler change en fonction de la dernière opération exécutée).
Le panneau Historique permet également de reproduire des étapes déjà réalisées et
d'automatiser des tâches en créant de nouvelles commandes. Pour plus d'informations, voir
Automatisation des tâches, page 400.
Pour ouvrir le panneau Historique :
■
Choisissez Fenêtre > Historique.
Pour annuler la dernière action :
■
Déplacez le curseur du panneau Historique d'une étape vers le haut dans la liste. Cette
opération a le même effet que lorsque vous cliquez sur Edition > Annuler.
L'étape annulée apparaît alors en grisé.
Pour annuler plusieurs opérations à la fois, procédez de l'une des manières
suivantes :
■
Déplacez le curseur jusqu'à une étape de la liste.
■
Cliquez à gauche d'une étape le long de la trajectoire du curseur ; le curseur se dirige
automatiquement vers cette étape, annulant toutes celles qui sont sur son passage.
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.
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.
Pour définir le nombre maximal d'étapes que le panneau Historique conserve
et affiche :
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.
Utilisation du panneau Historique
399
3.
Tapez un chiffre dans la zone Nombre maximal d'étapes de l'historique.
La valeur par défaut doit être suffisante pour les besoins de la plupart des utilisateurs. Plus
ce chiffre est élevé, plus le panneau Historique utilisera de mémoire. Cela peut affecter les
performances et ralentir considérablement votre système. Lorsque le panneau Historique
atteint le nombre maximal d'étapes, les premières étapes sont supprimées.
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.
Pour effacer 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 sera impossible d'annuler les actions dont la trace a été effacée. (Notez bien que la
fonction Effacer l'historique n'annule aucune action passée, mais se limite à supprimer
l'enregistrement de ces étapes dans la mémoire de Dreamweaver.)
Rubriques connexes
■
A propos du panneau Historique, page 386
Automatisation des tâches
Lors de la création de documents, vous avez parfois besoin d'effectuer de nombreuses fois la
même opération.
Pour recommencer une ou deux fois une série d'étapes, répétez-les directement depuis le
panneau Historique, qui enregistre chaque étape de votre travail sur le document. Pour toutes
informations de base sur le panneau Historique, voir A propos du panneau Historique,
page 386. Pour automatiser une tâche fréquente, vous pouvez créer une nouvelle commande
qui effectuera cette tâche automatiquement.
400
Chapitre 12: Utilisation des pages
Notez qu'il est impossible de reproduire ou d'enregistrer (dans le cadre de commandes
enregistrées) certains mouvements de la souris, comme par exemple la sélection d'un élément
en cliquant avec la souris ou en la faisant glisser dans la fenêtre de document. Lorsque vous
effectuez ce type de mouvements, un trait noir s'affiche dans le panneau Historique (cette
ligne n'est cependant bien visible que lorsque vous avez accompli une autre action). Pour
éviter des mouvements qui ne peuvent pas être reproduits, déplacez le point d'insertion à
l'aide des touches fléchées, et non de la souris, dans la fenêtre de document. Pour effectuer ou
étendre une sélection, maintenez la touche Maj enfoncée tout en appuyant sur les touches
fléchées.
C O N S E IL
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).
Il existe quelques autres actions qui ne peuvent pas être reproduites, par exemple le glisserdéplacer d'un élément de la page. Lorsque vous effectuez ce type d'action, une icône
représentant une commande de menu barrée d'un petit X rouge s'affiche dans le panneau
Historique.
Rubriques connexes
■
Application d'étapes à un autre objet, page 403
■
Application d'étapes à plusieurs objets, page 403
■
Copie et collage d'étapes entre les documents, page 404
■
Création de nouvelles commandes à partir d'étapes de l'historique, page 406
■
Mémorisation de commandes, page 407
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. Pour toutes informations de base sur le panneau Historique,
voir A propos du panneau Historique, page 386.
Pour répéter une étape, procédez de l'une des manières suivantes :
■
Choisissez Edition > Répéter.
Le nom de cette commande change dans le menu Edition pour refléter la dernière étape
effectuée ; par exemple, si vous venez de saisir du texte, le nom de la commande sera
Répéter frappe.
■
Dans le panneau Historique, sélectionnez une étape et cliquez sur le bouton Reproduire.
Automatisation des tâches
401
L'étape est reproduite et une nouvelle instance de cette action apparaît dans le panneau
Historique.
Pour répéter une série d'étapes contiguës :
1.
Sélectionnez des étapes dans le panneau Historique, en utilisant l'une des méthodes
suivantes :
■
Faites glisser la souris d'une étape à une autre (ne faites pas glisser le curseur ; faites
simplement glisser de l'étiquette de texte d'une étape vers l'étiquette de texte d'une
autre).
■
Sélectionnez la première étape, puis maintenez la touche Maj enfoncée tout en
cliquant sur la dernière étape ou sélectionnez la dernière étape, puis maintenez la
touche Maj enfoncée tout en cliquant sur la première.
Seules les actions sélectionnées (en surbrillance), et pas nécessairement celle sur laquelle se
trouve le pointeur, sont répétées.
REMARQUE
2.
Bien que vous puissiez sélectionner une série d'étapes contenant un trait noir
signalant un mouvement de la souris, ce mouvement est ignoré lorsque vous
reproduisez les étapes.
Cliquez sur Reproduire.
Les étapes sont reproduites dans l'ordre chronologique et une nouvelle étape, « Reproduire
les étapes », apparaît dans le panneau Historique.
Pour répéter des étapes non contiguës :
1.
Sélectionnez une étape, puis cliquez tour à tour sur toutes les autres étapes désirées tout en
maintenant appuyée la touche Ctrl (Windows) ou Commande (Macintosh).
Cliquez à nouveau sur une étape sélectionnée en maintenant la touche Ctrl ou
Commande appuyée pour la désélectionner.
2.
Cliquez sur Reproduire.
Les étapes sélectionnées sont reproduites dans leur ordre chronologique et une nouvelle
étape, libellée « Reproduire les étapes », apparaît dans le panneau Historique.
Rubriques connexes
■
Application d'étapes à plusieurs objets, page 403
402
Chapitre 12: Utilisation des pages
Application d'étapes à un autre objet
Vous pouvez appliquer un ensemble d'étapes affichées dans le panneau Historique à n'importe
quel objet figurant dans la fenêtre de document.
Pour appliquer des étapes du panneau Historique à un nouvel 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
Si vous sélectionnez plusieurs objets dans un document, 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.
Vous ne pouvez pas, par exemple, sélectionner cinq images et leur appliquer simultanément le
même redimensionnement : le redimensionnement doit être appliqué individuellement à
chaque image.
Pour appliquer une série d'é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 procédure
suivante illustre ce principe dans un scénario particulier : définition de l'espacement vertical et
horizontal d'une série d'images.
Pour définir l'espacement vertical et horizontal d'une série d'images :
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 de texte 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.
Automatisation des tâches
403
6.
Appuyez sur la touche fléchée gauche pour amener le point d'insertion à gauche de l'image.
Appuyez ensuite sur la touche fléchée bas pour descendre le point d'insertion d'une ligne,
tout en le laissant juste à gauche de la seconde image de la série. Appuyez ensuite sur la
touche fléchée droite tout en maintenant la touche Maj. enfoncée, pour sélectionner cette
seconde image.
REMARQUE
7.
Ne sélectionnez surtout pas l'image en cliquant dessus, car vous ne pourriez plus
reproduire toutes les étapes.
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.
8.
Continuez à cliquer sur le bouton Reproduire jusqu'à ce que toutes les images soient
correctement espacées.
Pour appliquer des étapes à un objet dans un autre document, cliquez sur le bouton Copier les
étapes
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 prévoyez de réutiliser des
étapes d'un document après l'avoir fermé, copiez ces étapes à l'aide du bouton Copier les
étapes (ou enregistrez-les comme nouvelle commande, voir Création de nouvelles commandes à
partir d'étapes de l'historique, page 406) avant de fermer le document.
404
Chapitre 12: Utilisation des pages
Pour réutiliser des étapes d'un document à un autre :
1.
Activez le document contenant les étapes que vous désirez réutiliser.
2.
Sélectionnez les étapes désirées dans le panneau Historique.
3.
Dans le panneau Historique, cliquez sur le bouton Copier les étapes.
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.
4.
Ouvrez l'autre document.
5.
Placez le curseur au point désiré, ou sélectionnez l'objet auquel vous voulez appliquer les
étapes.
6.
Choisissez Edition > Coller pour coller les étapes.
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. Pour plus d'informations sur l'utilisation du
JavaScript dans Dreamweaver, voir Rédaction et modification de code, page 627.
Automatisation des tâches
405
Création de nouvelles commandes à partir d'étapes
de l'historique
Vous pouvez enregistrer un ensemble d'étapes affichées dans la palette Historique, sous la
forme d'une commande à laquelle vous donnerez un nom et qui deviendra alors disponible
dans le menu Commandes.
Si vous voulez réutiliser un ensemble d'étapes par la suite, créez et enregistrez une nouvelle
commande, en particulier si vous voulez effectuez ces étapes la prochaine fois que vous
lancerez Dreamweaver. Les commandes enregistrées sont en effet conservées jusqu'à ce que
vous les effaciez, tandis que les commandes mémorisées sont perdues lorsque vous quittez
Dreamweaver. De plus, les séquences d'étapes copiées sont supprimées dès la copie suivante.
Vous pouvez modifier les noms des commandes que vous avez insérées dans le menu
Commandes et supprimer ces commandes du menu Commandes. Il est plus difficile de
modifier ou de supprimer les commandes originellement intégrées dans le menu Commandes
(c'est-à-dire celles que vous n'avez pas ajoutées vous-même).
Pour créer 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 enregistré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.
Pour utiliser une commande que vous avez enregistrée :
1.
Sélectionnez l'objet auquel vous désirez appliquer la commande ou placez le curseur à
l'emplacement désiré.
2.
Sélectionnez la commande de votre choix dans le menu Commandes.
Pour modifier le nom d'une commande tel qu'il apparaît dans le menu
Commandes :
1.
Choisissez Commandes > Modifier la liste des commandes.
2.
Sélectionnez la commande à renommer et indiquez son nouveau nom.
3.
Cliquez sur Fermer.
406
Chapitre 12: Utilisation des pages
Pour supprimer 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.
Mémorisation de commandes
Vous pouvez mémoriser de façon temporaire une commande utilisée à court terme.
Dreamweaver ne retient qu'une commande mémorisée à la fois ; dès que vous commencez à
mémoriser une nouvelle commande, la précédente est oubliée.
Pour enregistrer une nouvelle commande sans perdre la commande actuellement mémorisée,
enregistrez-la à partir du panneau Historique. Pour plus d'informations, voir Pour un
comparatif détaillé entre l'utilisation de commandes mémorisées et la reproduction d'étapes à
partir du panneau Historique, voir Utilisation du panneau Historique, page 399.
Pour mémoriser provisoirement une série d'étapes fréquemment utilisées :
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).
Pour reproduire une commande mémorisée :
■
Choisissez Commandes > Reproduire la commande enregistrée ou appuyez sur la
combinaison de touches Ctrl+Maj+R (Windows) ou Commande+Maj+R (Macintosh).
Pour enregistrer une commande mémorisée :
1.
Choisissez Commandes > Reproduire la commande enregistrée pour exécuter la
commande.
Une étape nommée Exécuter commande apparaît dans la liste des étapes du panneau
Historique.
2.
Dans la palette 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.
Automatisation des tâches
407
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. Pour plus d'informations sur les
comportements, voir Chapitre 18, Utilisation des comportements JavaScript, page 555.
Vérifier le navigateur permet d'envoyer les visiteurs sur des pages différentes selon le type et
la version de leur navigateur (voir Vérifier le navigateur, page 565). 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.
permet d'envoyer les visiteurs sur des pages différentes selon qu'ils
disposent ou non du plug-in indiqué (voir Vérifier le plug-in, page 566). Par exemple, vous
pouvez envoyer les utilisateurs disposant de Macromedia Shockwave sur une page et les autres
sur une page différente.
Vérifier le plug-in
Aperçu et test de page dans les
navigateurs
Vous pouvez obtenir un aperçu du document dans un navigateur à la demande. Il n'est pas
nécessaire d'enregistrer, puis de charger ce document au préalable sur un serveur Web.
Cette section contient les rubriques suivantes :
■
Aperçu dans un navigateur, page 408
■
Définition des préférences d'aperçu, page 410
■
Aperçu du contenu actif dans Internet Explorer (Windows), page 411
Aperçu dans un navigateur
Vous pouvez utiliser Dreamweaver pour obtenir un aperçu du document dans un navigateur
et le tester.
Pour avoir un aperçu et tester votre document dans un navigateur :
1.
Procédez de l'une des manières suivantes pour afficher un aperçu de la page :
408
Chapitre 12: Utilisation des pages
■
Choisissez Fichier > Aperçu dans le navigateur, puis sélectionnez un navigateur dans la
liste.
REMARQUE
2.
Si vous n'avez pas encore sélectionné de navigateur, 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.
Cliquez sur les liens et testez le contenu de votre page.
Dans la plupart des cas, toutes les fonctions liées au navigateur sont 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 contrôles ActiveX requis.
Si vous utilisez Internet Explorer sous Windows XP avec le Service Pack 2, le navigateur
peut renvoyer un message indiquant que le contenu actif ne sera pas affiché. Pour résoudre
ce problème, incluez le code Mark of the Web dans le fichier. Pour plus d'informations,
voir Aperçu du contenu actif dans Internet Explorer (Windows), page 411.
REMARQUE
C ON S E I L
3.
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 (voir Chemins relatifs à la racine du site, page 477).
Fermez la page dans le navigateur après avoir effectué le test.
Aperçu et test de page dans les navigateurs
409
Définition des préférences d'aperçu
Vous pouvez définir jusqu'à 20 navigateurs pour avoir un aperçu des pages de votre site. Il est
conseillé de demander un aperçu pour les navigateurs suivants : Internet Explorer 6.0,
Netscape Navigator 7.0 et le navigateur Safari pour Macintosh. Si vous le souhaitez, vous
pouvez tester vos pages sur un navigateur en mode texte comme Lynx en plus de ces
navigateurs graphiques les plus courants.
Pour définir ou modifier vos préférences pour le navigateur principal et le
navigateur secondaire :
1.
Procédez de l'une des manières suivantes pour ouvrir les options Aperçu dans le navigateur :
■
Choisissez Edition > Préférences ou Dreamweaver > Préférences (Macintosh), puis
sélectionnez la catégorie Aperçu dans le navigateur dans la liste de gauche.
■
Choisissez Fichier > Aperçu dans le navigateur > Modifier la liste des navigateurs.
La boîte de dialogue Préférences contenant les options Aperçu dans le navigateur apparaît.
2.
Apportez les modifications de votre choix.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
3.
410
Cliquez sur OK.
Chapitre 12: Utilisation des pages
Aperçu du contenu actif dans Internet Explorer
(Windows)
Si vous affichez un aperçu d'un document incluant du contenu actif dans Internet Explorer
après avoir installé le Service Pack 2 de Windows XP, le navigateur peut ne pas afficher le
document correctement. Le navigateur affiche un message indiquant que le contenu actif ne
sera pas disponible. Pour résoudre ce problème, incluez le code Mark of the Web dans le
document.
Internet Explorer bloque le contenu actif et les scripts qui tentent de s'exécuter dans la zone de
la machine locale. Dans la mesure où des pirates pourraient exploiter cette zone, Microsoft a
renforcé les mesures de sécurité par défaut. Le code Mark of the Web demande au navigateur
d'exécuter du contenu actif dans une autre zone, dans ce cas, la zone Internet.
Pour afficher un aperçu du contenu actif dans Internet Explorer sous Windows
XP SP2 :
■
Une fois le document ouvert dans Dreamweaver, sélectionnez Commandes > Insérer Mark
of the Web.
Dreamweaver insère la ligne suivante dans votre code :
<!-- saved from url=(0014)about:internet -->
Cette ligne permet au navigateur de contourner la zone Machine locale et d'exécuter le
contenu actif dans la zone Internet.
Vous pouvez également supprimer le code Mark of the Web avant la publication finale d'un
fichier.
Pour supprimer le code Mark of the Web :
1.
Dans Dreamweaver, ouvrez le document contenant le code Mark of the Web.
2.
Sélectionnez Commands > Supprimer Mark of the Web.
Pour plus d'informations, voir la TechNote 19578 sur le site Web de Macromedia à l'adresse :
www.macromedia.com/go/19578.
Aperçu et test de page dans les navigateurs
411
Vérification des préférences de durée et
de la taille de téléchargement
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.
C O N S E IL
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 huit secondes » ; c'est-à-dire que la plupart des
utilisateurs n'attendront pas plus de huit secondes pour le téléchargement d'une page.
Pour définir des préférences en matière de taille et de temps de
téléchargement :
1.
Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
La boîte de dialogue Préférences s'affiche.
2.
Sélectionnez la catégorie Barre d'état dans la liste de gauche.
Les options de la préférence Barre d'état apparaissent.
412
Chapitre 12: Utilisation des pages
3.
Choisissez la vitesse de connexion à partir de laquelle le temps de téléchargement sera
calculé.
En Europe et aux USA, la vitesse de connexion la plus répandue est 28,8 Kb/s. Si vous
concevez ce site pour un intranet, vous pouvez sélectionner 1500 (vitesse T1).
Pour plus d'informations sur les préférences de barre d'état, voir Définition des préférences
de la barre d'état, page 57.
4.
Cliquez sur OK.
Vérification des préférences de durée et de la taille de téléchargement
413
414
Chapitre 12: Utilisation des pages
CHAPITRE 13
13
Insertion et mise en forme de
texte
Macromedia Dreamweaver 8 permet d'ajouter et de mettre en forme du texte dans un
document de plusieurs façons. Vous pouvez insérer du texte, définir un type, une taille ou une
couleur de police, des attributs d'alignement ou encore créer et appliquer vos propres styles à
l'aide de feuilles de style en cascade (CSS).
Ce chapitre couvre les sujets suivants :
A propos du formatage de texte dans Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . 415
Insertion de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .428
Mise en forme de paragraphes et structure du document. . . . . . . . . . . . . . . . . . . . .433
Mise en forme de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 437
Utilisation des feuilles de style en cascade pour mettre un texte en forme . . . . . 443
Vérification orthographique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 454
Recherche et remplacement de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 455
A propos du formatage de texte dans
Dreamweaver
Dreamweaver dispose de plusieurs outils et commandes permettant de mettre du texte en
forme à l'aide de CSS ou de HTML.
La présente section contient les rubriques suivantes :
■
A propos de l'insertion de texte, page 416
■
A propos du formatage de texte, page 416
■
Description des feuilles de style en cascade, page 418
■
A propos des conflits entre règles CSS, page 420
■
Propriétés de la forme courte des styles CSS, page 420
■
Inspecteur Propriétés et formatage de texte, page 422
■
A propos du panneau Styles CSS, page 423
415
A propos de l'insertion de texte
Dreamweaver vous permet d'ajouter du texte directement dans une page, de copier et de coller
du texte provenant d'un autre document ou de faire glisser du texte depuis une autre
application. Les types de document les plus courants utilisés pour l'incorporation de texte
dans des pages Web sont, entre autres, les fichiers de texte ASCII, les fichiers .rtf (rich text
format) et les documents Microsoft Office. Dreamweaver vous permet d'incorporer dans vos
pages Web du texte provenant de tous ces types de documents.
Rubriques connexes
■
Insertion de texte, page 428
■
Ajout de texte dans un document, page 428
■
Importation de documents contenant des données tabulaires, page 430
■
Importation de documents Microsoft Office (Windows uniquement), page 431
A propos du formatage de texte
Les méthodes de mise en forme du texte dans Dreamweaver s'apparentent à celles d'un logiciel
de traitement de texte standard. Vous pouvez définir le style de mise en forme 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é.
Par défaut, Dreamweaver met le texte en forme à l'aide de feuilles de style en cascade (.CSS).
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. Les règles CSS sont intégrées au document au fur et à mesure que
vous mettez votre texte en forme ou que vous faites appel à des styles intégrés de
Dreamweaver. Vous pouvez ainsi plus facilement réutiliser les styles existants et nommer ceux
que vous créez. CSS est aujourd'hui la méthode la plus utilisée pour mettre en forme textes et
pages Web.
Si vous le préférez, vous pouvez mettre en forme et aligner le texte de vos pages Web à l'aide de
balises de marquage HTML. Si vous souhaitez utiliser des balises HTML au lieu de styles
CSS, vous devez modifier les préférences de mise en forme par défaut de Dreamweaver. (Pour
plus d'informations, voir Spécification de balises HTML au lieu de CSS, page 390).
416
Chapitre 13: Insertion et mise en forme de texte
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.
En revanche, les styles CSS définissent une mise en forme pour tout le texte appartenant à une
classe particulière ou redéfinissent le format d'une balise HTML spécifique (par exemple h1,
h2, p ou li).
Vous pouvez stocker les styles créés avec CSS directement dans le document (par défaut
lorsque vous formatez le texte avec l'inspecteur Propriétés) ou, pour plus de souplesse et de
contrôle, stocker les styles 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 plus d'informations sur l'utilisation de l'inspecteur Propriétés du texte pour appliquer
HTML ou CSS, voir Définition des options relatives aux propriétés du texte. Pour plus
d'informations sur l'utilisation du panneau CSS pour l'application de CSS, voir Utilisation du
panneau Styles CSS.
REMARQUE
Vous pouvez combiner des mises en forme 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. Pour plus d'informations, voir Utilisation
des feuilles de style en cascade pour mettre un texte en forme, page 443.
Rubriques connexes
■
Insertion de texte, page 428
■
Mise en forme de texte, page 437
A propos du formatage de texte dans Dreamweaver
417
Description des feuilles de style en cascade
Les feuilles de style en cascade (.CSS) regroupent des règles de mise en forme qui déterminent
l'aspect du contenu d'une page Web. Lorsque vous utilisez CSS pour formater une page, vous
séparez le contenu de sa 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). CSS permet de contrôler de façon précise et
souple l'aspect de la page, tant en termes de précision de l'emplacement des éléments, qu'en
termes de choix de polices et de styles spécifiques.
Les feuilles de style CSS permettent de contrôler de nombreuses propriétés qui ne sont pas
accessibles directement avec le code HTML. Par exemple, vous pouvez spécifier différentes
tailles et unités de police (pixels, points, etc.) pour le texte sélectionné. En utilisant CSS et en
définissant les tailles de police en pixels, vous garantissez un traitement plus homogène de la
présentation et de l'aspect de votre page dans différents navigateurs.
Outre la mise en forme du texte, CSS permet de gérer le format et le positionnement des blocs
d'éléments d'une page Web. Vous pouvez ainsi définir des marges et des bordures pour des
blocs, faire flotter du texte autour d'un autre texte, etc.
Une règle de formatage CSS se compose de deux entités : le sélecteur et la déclaration. Le
sélecteur est un terme (tel que P, H1, un nom de classe ou une id) qui identifie l'élément
formaté, tandis que la déclaration définit les éléments du style. Dans l'exemple suivant, H1
correspond au sélecteur et tout ce qui est placé entre les accolades ({}) correspond à la
déclaration :
H1 {
font-size: 16 px;
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 terme en cascade signifie qu'il est possible d'appliquer plusieurs feuilles de style à un même
élément. Vous pouvez, par exemple, créer une règle CSS pour définir la couleur et une autre
pour les marges, puis les appliquer toutes les deux au même texte sur une page. Les styles
définis « sont appliqués en cascade » aux éléments de votre page Web, créant pour finir la
conception désirée.
418
Chapitre 13: Insertion et mise en forme de texte
CSS présente l'avantage majeur d'être facilement mis à jour. Lorsque vous modifiez une règle
CSS en un emplacement, la mise en forme de tous les documents utilisant ce style reflète
automatiquement le nouveau style.
Vous pouvez définir les types de styles suivants dans Dreamweaver :
■
Les règles CSS personnalisées, également appelées styles de classe, définissent les attributs de
styles d'une plage ou d'un bloc de texte. (voir Application d'un style de classe, page 448).
■
Les styles appliqués aux balises HTML redéfinissent le formatage de ces balises, par
exemple 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 des sélecteurs CSS (styles avancés) redéfinissent le formatage d'une combinaison
particulière d'éléments, ou pour les autres formes de sélecteur autorisées par le code CSS
(par exemple, le sélecteur td h2 s'applique lorsque l'en-tête h2 figure dans une cellule de
tableau.) Les styles avancées permettent également de redéfinir le formatage des balises qui
contiennent un attribut id (par exemple, les styles définis par #monStyle s'appliquent à
toutes les balises qui contiennent la paire attribut-valeur id="monStyle").
Les règles CSS peuvent résider aux emplacements suivants :
Les feuilles de style CSS externes regroupent des 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 situé dans la section head d'un document.
Les feuilles de style CSS internes (ou incorporées) regroupent les règles CSS incluses dans
une balise style de la section head d'un document HTML.
Les styles en ligne
sont définis avec des instances spécifiques de balises dans un document
HTML.
Dreamweaver reconnaît les styles définis dans des documents existants, pour peu qu'ils soient
conformes aux recommandations des feuilles de style CSS.
C ON S E I L
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.
La mise en forme HTML manuelle peut remplacer le formatage de la feuille de styles CSS.
Pour permettre aux règles CSS de contrôler totalement la mise en forme d'un paragraphe,
vous devez supprimer tout le formatage manuel du code HTML.
A propos du formatage de texte dans Dreamweaver
419
Dreamweaver restitue la plupart des attributs de style appliqués directement dans la fenêtre du
document. Vous pouvez également afficher un aperçu des styles appliqués au document dans
une fenêtre de navigateur. Certains attributs de style CSS s'affichent différemment dans
Microsoft Internet Explorer, Netscape Navigator, Opera et Apple Safari ou ne sont encore pris
en charge par aucun navigateur.
A propos des conflits entre règles CSS
Lorsque vous appliquez plusieurs règles CSS au même texte, un conflit risque de se produire
et entraîner des résultats inattendus. Les navigateurs appliquent les règles CSS comme suit :
■
Si deux règles sont appliquées au même texte, le navigateur affiche tous les attributs des
deux règles, sauf en cas de conflit entre deux attributs spécifiques. Par exemple, une règle
peut spécifier le bleu comme couleur du texte, alors que l'autre demandera le rouge.
■
Lorsque des attributs de deux règles appliquées au même texte entrent en conflit, le
navigateur choisit celui de la règle en aval, c'est-à-dire celle qui est la plus près du texte luimême. Ainsi, si un élément de texte est régi par une feuille de style externe et par un style
en ligne, ce dernier est appliqué.
■
En cas de conflit direct, les attributs des règles CSS personnalisées (appliquées avec
l'attribut class) sont prépondérants sur les attributs de styles des balises HTML.
Dans l'exemple qui suit, le style défini pour h1 peut spécifier la police, la taille et la couleur de
tous les paragraphes h1, mais la règle CSS personnalisée .Blue appliquée à ce paragraphe est
prépondérante sur la valeur de couleur déclarée dans le style h1. La seconde règle CSS
personnalisée .Red l'emporte à son tour sur le style .Blue, car elle se trouve à l'intérieur du
style .Blue.
<h1><span class="Blue">This paragraph is controlled by the .Blue custom
style and h1
HTML tag style.<span class="Red">Except this sentence is controlled by the
.Red style.</span>
Now we're back to the .Blue style.</span></h1>
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 ou forme
courte. Elle permet de spécifier la valeur de plusieurs propriétés à l'aide d'une seule balise de
propriété. Par exemple, la propriété font permet de définir les propriétés font-style, fontvariant, font-weight, font-size, line-height et font-family sur une seule ligne de
syntaxe.
420
Chapitre 13: Insertion et mise en forme de texte
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 balise H1 ci-dessous utilise la syntaxe longue. Remarquez que les propriétés
font-variant, font-stretch, 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 balise se présente 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-size-adjust.
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 risquent d'écraser les propriétés explicitement définies
dans un autre style. (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.
A propos du formatage de texte dans Dreamweaver
421
Rubriques connexes
■
A propos des conflits entre règles CSS, page 420
■
A propos du panneau Styles CSS, page 423
Inspecteur Propriétés et formatage de texte
L'inspecteur Propriétés vous permet de mettre en forme le texte sélectionné. Lorsque vous
effectuez ces opérations, Dreamweaver conserve en mémoire les propriétés de formatage
appliquées à chaque élément de texte et attribue à chacun une étiquette en les nommant de la
manière suivante : Style1, Style2, Style3, Stylen. Si vous appliquez les mêmes attributs de
formatage à plusieurs éléments de texte, Dreamweaver leur donne le même titre d'étiquette,
éliminant ainsi toute redondance dans les noms de style. L'étiquette appliquée par
Dreamweaver à un corps de texte donné peut alors être appliquée à l'aide du menu déroulant
Style. Vous pouvez ainsi constituer une bibliothèque de styles à l'intérieur d'une page et
appliquer ces styles en sélectionnant simplement l'élément de texte sur la page et un style dans
le menu déroulant Style. Vous pouvez renommer les styles afin d'en faciliter l'identification,
par exemple En-tête1, En-tête2, Corps et Tableau.
422
Chapitre 13: Insertion et mise en forme de texte
Le menu contextuel Style affiche les deux noms du style de votre page et propose un aperçu
des propriétés du style. Les propriétés indiquées dans l'aperçu sont la famille, la taille et
l'épaisseur de la police, ainsi que la couleur du texte et de l'arrière-plan.
Rubriques connexes
■
Mise en forme des paragraphes, page 433
■
Définition et modification des polices et des styles, page 437
■
Changement de nom d'un style, page 439
■
Utilisation des feuilles de style en cascade pour mettre un texte en forme, page 443
A propos du panneau Styles CSS
Le panneau Styles CSS permet de suivre les règles CSS et les propriétés qui affectent un
élément de page sélectionné (mode Actuel), ou les règles et les propriétés qui affectent
l'ensemble d'un document (mode Tous). Un bouton bascule placé en haut du panneau CSS
permet de passer d'un mode à l'autre. Le panneau Styles CSS permet de modifier les
propriétés CSS dans les deux modes.
A propos du formatage de texte dans Dreamweaver
423
Panneau Styles CSS en mode Actuel
En mode Actuel, le panneau Styles CSS présente trois volets : le volet Résumé de la sélection
qui présente les propriétés CSS de la sélection en cours dans le document ; le 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 définissant la sélection.
Vous pouvez redimensionner ces volets en faisant glisser leur bordure.
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. 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) :
.foo{
color: green;
font-family: ‘Arial’;
}
P{
font-family: ‘serif’;
font-size: 12px;
}
424
Chapitre 13: Insertion et mise en forme de texte
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.
A propos du formatage de texte dans Dreamweaver
425
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 précédemment
définies et les classes 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.
Rubriques connexes
Panneau Styles CSS en mode Tous, page 427
■
■
Utilisation du panneau Styles CSS, page 444
426
Chapitre 13: Insertion et mise en forme de texte
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 ces volets en faisant glisser leur bordure de séparation.
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 classes par ordre alphabétique.
Vous pouvez choisir d'afficher les propriétés dans deux autres vues. La vue Catégorie regroupe
les propré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.
A propos du formatage de texte dans Dreamweaver
427
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.
Rubriques connexes
■
Panneau Styles CSS en mode Actuel, page 424
■
Utilisation du panneau Styles CSS, page 444
Insertion de texte
Dreamweaver vous permet d'insérer facilement du texte dans un document. Vous pouvez le
taper directement, effectuer un copier/coller ou réaliser une importation. Vous pouvez
également insérer des espaces supplémentaires entre les caractères et les lignes de votre 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. Il est également possible d'importer du
texte depuis d'autres documents (voir Importation de documents contenant des données
tabulaires, page 430 et Importation de documents Microsoft Office (Windows uniquement),
page 431).
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 sa mise en
forme initiale 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.
De même, 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. Pour
plus d'informations, voir Définition des préférences de l'option Copier/Coller, page 429.
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.
428
Chapitre 13: Insertion et mise en forme de texte
Lorsque vous choisissez Edition > Collage spécial, une boîte de dialogue s'ouvre et propose
plusieurs options de formatage. Pour plus d'informations, cliquez sur le bouton Aide de la
boîte de dialogue.
Vous pouvez également coller du texte à l'aide des raccourcis clavier suivants :
Option de collage
Raccourci clavier
Coller
Ctrl+V (Windows)
Commande+V (Macintosh)
Collage spécial
Ctrl+Maj+V (Windows)
Commande+Maj+V (Macintosh)
REMARQUE
Dans la vue Code, Ctrl-V (Windows) et Commande-V (Macintosh) collent toujours le
texte seulement (sans mise en forme).
Définition des préférences de l'option Copier/Coller
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 une
mise en forme de base, définissez l'option par défaut dans la boîte de dialogue Préférences de
copie/collage.
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.
Pour définir des options de copier-coller par défaut :
1.
Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
2.
Cliquez sur la catégorie Copier/Coller.
3.
Complétez les options de la boîte de dialogue, puis cliquez sur OK.
Pour plus d'informations, cliquez sur le bouton Aide.
Insertion de texte
429
Importation de documents contenant des 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.
Pour plus d'informations sur l'importation et le formatage de données de tableau, voir
Importation et exportation de données tabulaires, page 265. Pour plus d'informations sur
l'importation de texte à partir de documents HTML Microsoft Word, voir Ouverture de
documents existants, page 105.
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 (voir
Importation de documents Microsoft Office (Windows uniquement), page 431).
Pour importer des données tabulaires :
1.
Choisissez Fichier > Importer > Importer les données tabulaires ou Insertion > Objets du
tableau > Importer les données tabulaires.
La boîte de dialogue Importer le tableau s'affiche.
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.
5.
Cliquez sur OK.
430
Chapitre 13: Insertion et mise en forme de texte
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.
C O N S E IL
Au lieu d'importer tout le contenu d'un fichier, vous pouvez également coller une partie
du document Word et protéger sa mise en forme. Pour plus d'informations, voir Ajout de
texte dans un document, page 428.
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. Pour plus
d'informations, voir Insertion d'un lien vers un document Word ou Excel, page 432.
Pour insérer le contenu d'un document Word ou Excel dans une page Web
nouvelle ou existante :
1.
Ouvrez la page Web dans laquelle vous souhaitez copier le document Word ou Excel.
2.
Assurez-vous que vous êtes en mode Création. Dans le cas contraire, cliquez sur le bouton
du mode Création.
3.
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. Lorsque la boîte de dialogue Insérer un document apparaît, définissez les
options désirées, puis cliquez sur OK. Pour plus d'informations, cliquez sur le bouton
Aide de la boîte de dialogue.
■
Choisissez Fichier > Importer > Document Word ou Fichier > Importer > Document
Excel. Dans la boîte de dialogue Importer un document, recherchez le fichier à ajouter,
sélectionnez une option de mise en forme, puis cliquez sur Ouvrir.
Les options de mise en forme sont les suivantes :
Texte seul permet d'insérer du texte non formaté. Si le texte d'origine est mis en
forme, cette dernière est supprimée.
Texte structuré permet d'insérer du texte en conservant sa structure, mais sans la mise
en forme 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
mises en forme.
Insertion de texte
431
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 balises b, i, u, strong, em, hr, abbr ou
acronym).
Texte structuré avec formatage de base
permet d'insérer du texte conservant toute
sa structure, mise en forme HTML et styles CSS.
Texte structuré avec formatage complet
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.
Insertion 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.
Pour créer un lien vers un document Word ou Excel :
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.
La boîte de dialogue Insérer un document s'affiche.
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.
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
reprend le nom du fichier lié. Pour changer le texte du lien, voir Gestion des liens, page 491.
432
Chapitre 13: Insertion et mise en forme de texte
Mise en forme de paragraphes et
structure du document
Dreamweaver prend en charge l'ensemble des éléments de mise en forme de page et d'objet
standard. Cette section indique comment formater des paragraphes et comment insérer des
barres horizontales ainsi que la date.
Rubriques connexes
■
Définition des propriétés de page, page 390
■
texte, page 434
■
Mise en retrait du texte, page 434
■
Ajout d'espacements de paragraphe, page 435
■
Utilisation de barres horizontales, page 435
■
Insertion de dates, page 441
Mise en forme des paragraphes
Utilisez le menu déroulant Format de l'inspecteur Propriétés ou le sous-menu Texte > Format
de paragraphe pour appliquer des balises standard de paragraphe et d'en-tête.
Pour appliquer une balise de paragraphe ou d'en-tête :
1.
Placez le point d'insertion dans le paragraphe, ou sélectionnez une partie du texte du
paragraphe.
2.
Sélectionnez Texte > Format de paragraphe ou le menu déroulant 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 Entê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.
Mise en forme de paragraphes et structure du document
433
texte
Vous pouvez aligner le texte sur la page en utilisant l'inspecteur Propriétés ou à partir du sousmenu Texte > Aligner. Vous pouvez centrer un élément sur la page à l'aide de la commande
Texte > Aligner > Centre.
Pour aligner du texte :
1.
Sélectionnez le texte à aligner ou insérez le pointeur au début du texte.
2.
Cliquez sur l'une des options d'alignement (Gauche, Droite ou Centre) dans l'inspecteur
Propriétés ou choisissez Texte > Aligner, puis une commande d'alignement.
Pour centrer des éléments :
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 Texte > 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 renfoncer le texte de chaque côté de la page.
Pour insérer un retrait ou le supprimer :
1.
Placez le point d'insertion à l'emplacement où insérer le retrait.
2.
Dans l'inspecteur Propriétés, cliquez sur le bouton Retrait ou Retrait négatif, choisissez
Texte > Retrait ou Retrait négatif ou choisissez Liste > Retrait ou Retrait négatif dans le
menu contextuel.
R E MA R Q U E
434
Un paragraphe accepte plusieurs indentations. Chaque application de cette
commande produit un retrait supplémentaire du texte de chaque côté du document.
Chapitre 13: Insertion et mise en forme de texte
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.
Pour insérer un saut de paragraphe :
■
Appuyez sur la touche Entrée (Windows) ou Retour (Macintosh).
Pour insérer un saut de ligne, procédez de l'une des manières suivantes :
■
Appuyez sur les touches Maj+Entrée (Windows) ou Maj+Retour (Macintosh).
■
Dans la catégorie Texte de la barre Insérer, choisissez Caractères et cliquez sur l'icône Saut
de ligne.
■
Choisissez Insertion > HTML > Caractères spéciaux > 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.
Pour créer une barre horizontale :
1.
Dans la fenêtre de document, placez le curseur là où vous voulez insérer une barre
horizontale.
2.
Procédez de l'une des manières suivantes :
■
Choisissez Insertion > HTML > Barre horizontale.
■
Dans la catégorie Texte de la barre Insérer, cliquez sur le bouton Barre horizontale.
Pour modifier 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 :
L et H
: spécifient la largeur et la hauteur de la barre, en pixels ou en pourcentage de la
taille de la page.
: 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.
Aligner
Mise en forme de paragraphes et structure du document
435
: 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.
Ombrage
Création de liste à 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.
Pour plus d'informations sur la définition d'un type de liste spécifique et d'autres options de
liste pour une liste complète ou un élément de liste donné (par exemple, la numérotation ou
l'emploi des chiffres romains dans une liste numérotée ou la définition de puces carrées), voir
Définition des options relatives aux propriétés des listes dans l'aide de Dreamweaver.
Pour créer une 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 :
■
Cliquez sur le bouton Liste simple ou Liste numérotée dans l'inspecteur Propriétés.
■
Choisissez Texte > 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).
Pour créer une liste à partir d'un texte existant :
1.
Sélectionnez une suite de paragraphes pour les transformer en liste.
2.
Cliquez sur le bouton Liste simple ou Liste numérotée dans l'inspecteur Propriétés ou
choisissez Texte > Liste, puis sélectionnez le type de liste désiré : Liste simple, Liste
numérotée ou Liste de définitions.
Pour créer une liste imbriquée :
1.
Sélectionnez les éléments de liste à imbriquer.
2.
Cliquez sur le bouton Retrait de l'inspecteur Propriétés ou choisissez Texte > Retrait.
436
Chapitre 13: Insertion et mise en forme de texte
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.
Mise en forme de texte
Vous pouvez appliquer un formatage de texte à une seule lettre, à des paragraphes entiers du
site ou encore à des blocs de texte.
Rubriques connexes
■
Modification des combinaisons de polices, page 439
■
Modification de la couleur du texte, page 440
■
Insertion de dates, page 441
■
Insertion de caractères spéciaux, page 442
■
Ajout d'espacements entre les caractères, page 443
■
Création d'une règle CSS, page 446
Définition et modification des polices et des styles
Utilisez les options de l'inspecteur Propriétés ou le menu Texte pour définir ou modifier les
caractéristiques de la 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.
Pour définir ou modifier des caractéristiques de police :
1.
Sélectionnez le texte. Si aucun texte n'est sélectionné, le changement s'appliquera au texte
que vous taperez ensuite.
2.
Faites votre choix parmi les options suivantes :
■
Pour changer de police de caractères, choisissez une combinaison de polices dans
l'inspecteur Propriétés ou dans Texte > 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).
Mise en forme de texte
437
■
Pour changer de style de police, cliquez sur Gras ou Italique dans l'inspecteur
Propriétés ou choisissez un style de police (Gras, Italique, Souligné, etc.) dans le sousmenu Texte > Style.
R E M A R QU E
■
Lorsque vous utilisez l'inspecteur Propriétés pour appliquer un style gras ou
italique, Dreamweaver applique automatiquement la balise<strong> ou <em>,
respectivement. Si vous concevez des pages pour des utilisateurs disposant de
navigateurs de version 3.0 ou antérieure, vous devez modifier cette préférence
dans la catégorie Général de la boîte de dialogue Préférences (Edition >
Préférences).
Pour changer la taille de la police de caractères, choisissez une taille (de 1 à 7) dans
l'inspecteur Propriétés ou dans Texte > Taille.
En langage HTML, les tailles de polices sont exprimées en valeurs relatives, et non
spécifiques, de points. L'utilisateur définit la taille, en points, de la police par défaut de
son navigateur ; c'est cette taille de police qui est utilisée si vous choisissez Par défaut
ou 3 dans l'inspecteur Propriétés ou via le sous-menu Texte > Taille. Les tailles 1 et 2
sont plus petites que la taille par défaut ; les tailles 4 à 7 sont plus grandes. De plus, les
polices semblent généralement plus grandes sous Windows que sur Macintosh, bien
qu'Internet Explorer 5 pour Macintosh utilise la même taille de police par défaut que
Windows.
CONSEIL
■
Pour augmenter ou diminuer la taille de la police du texte sélectionné, choisissez une
taille relative (de + ou -1 à +4 ou -3) dans l'inspecteur Propriétés ou via Texte >
Modification des dimensions.
R E M A R QU E
438
Afin que la taille de la police reste homogène, vous pouvez utiliser des feuilles de
style CSS pour définir la taille en pixels. Pour plus d'informations sur les feuilles
de style CSS, voir Utilisation des feuilles de style en cascade pour mettre un texte
en forme, page 443.
Ces valeurs indiquent une différence relative par rapport à la taille définie par
basefont. La valeur par défaut de basefont est 3. Ainsi, une valeur de +4 donne
une taille de police de 3 + 4 ou 7. 7 est la somme maximale des valeurs de taille
de police. Si vous essayez de définir des valeurs plus élevées, elles s'affichent en
tant que 7. Dreamweaver n'affiche pas la balise basefont (qui peut figurer dans
la section head), mais la taille de police doit s'afficher correctement dans un
navigateur. Pour tester ceci, comparez un texte défini sur 3 et un texte défini
sur +3.
Chapitre 13: Insertion et mise en forme de texte
Changement de nom d'un style
Lors de la mise en forme de texte, Dreamweaver conserve en mémoire les styles créés sur
chaque page et constitue une bibliothèque de styles pouvant être réutilisés. Ceci facilite
l'application d'un même style à plusieurs blocs de texte. La présentation de vos pages est ainsi
plus cohérente.
Pour renommer un style :
1.
Choisissez Renommer dans le menu déroulant Style de l'inspecteur Propriétés du texte.
La boîte de dialogue Renommer un style s'affiche.
2.
Sélectionnez le style à renommer dans le menu contextuel Renommer un style.
3.
Entrez un nouveau nom dans le champ Nouveau nom.
4.
Cliquez sur OK.
Modification des combinaisons de polices
Pour définir la combinaison de polices qui apparaît dans l'inspecteur Propriétés et dans Texte
> 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.
Pour modifier les combinaisons de polices :
1.
Choisissez Texte > 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.
Procédez de l'une des manières 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.
Mise en forme de texte
439
■
Pour ajouter une police qui n'est pas installée sur votre ordinateur, tapez son nom dans
le champ 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.
Pour ajouter une nouvelle combinaison à la liste des polices :
1.
Choisissez Texte > 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 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.
Modification de la couleur du texte
Vous pouvez modifier la couleur du texte sélectionné. La nouvelle couleur prend alors le
dessus sur la couleur de texte définie dans les propriétés de la page (si aucune couleur n'a été
définie pour le texte dans Propriétés de la page, le texte possède la couleur par défaut, le noir).
Pour modifier la couleur du texte :
1.
Sélectionnez le texte.
2.
Procédez de l'une des manières suivantes :
440
Chapitre 13: Insertion et mise en forme de texte
■
Choisissez une couleur dans la palette en cliquant sur le sélecteur de couleur dans
l'inspecteur Propriétés.
■
Choisissez Texte > Couleur. Le sélecteur de couleur système s'affiche. Sélectionnez une
couleur, puis cliquez sur OK.
■
Entrez le nom de la couleur ou une valeur hexadécimale directement dans le champ de
l'inspecteur Propriétés.
■
Pour définir la couleur du texte par défaut, utilisez la commande Modifier > Propriétés
de la page (voir Définition des couleurs par défaut du texte, page 394).
Pour permettre au texte de reprendre la couleur par défaut :
1.
Dans l'inspecteur Propriétés, cliquez sur la case de couleur du texte pour ouvrir la palette
de couleurs sécurisées pour le Web.
2.
Cliquez sur le bouton Barré (le carré blanc barré d'une ligne rouge, situé dans l'angle
supérieur droit).
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.
Pour insérer la date courante dans un document :
1.
Dans la fenêtre de document, placez le curseur là où vous désirez insérer la date.
2.
Procédez de l'une des manières suivantes :
■
Choisissez Insertion > Date.
■
Dans la catégorie Commun de la barre Insérer, 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.
Mise en forme de texte
441
5.
Cliquez sur OK pour insérer la date.
C ON S E I L
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.
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 « Copyright » (©), l'« esperluette » (&)
et le symbole « Marque déposée » (trademark, ®). 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, —).
CONSEIL
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.
Pour insérer un caractère spécial dans un document :
1.
Dans la fenêtre de document, placez le curseur là où vous voulez insérer un caractère
spécial.
2.
Procédez de l'une des manières suivantes :
■
Choisissez le nom du caractère dans le sous-menu Insertion > HTML > Caractères
spéciaux.
■
Dans la catégorie Texte de la barre Insérer, cliquez sur le bouton Caractères et
choisissez le caractère de votre choix.
CONSEIL
442
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
choisissez la catégorie HTML de la barre Insérer, cliquez sur le menu Caractères,
puis choisissez Autres caractères. Choisissez un caractère dans la boîte de
dialogue Insérer autre caractère et cliquez sur OK.
Chapitre 13: Insertion et mise en forme de texte
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.
Pour insérer un espace insécable, procédez de l'une des manières suivantes :
■
Dans la catégorie HTML de la barre Insérer, cliquez sur le bouton Caractères et choisissez
Insérer un espace insécable.
■
Choisissez Insertion > HTML > Caractères spéciaux > Espace insécable.
■
Appuyez sur les touches Ctrl+Maj+Espace (Windows) ou Option+Espace (Macintosh).
Pour définir 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.
Utilisation des feuilles de style en
cascade pour mettre un texte en forme
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. Les styles CSS offrent
plus de flexibilité et un meilleur contrôle sur l'aspect de votre page : positionnement précis
dans la mise en page, utilisation de polices et de styles de texte spécifiques, etc.
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. Macromedia 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 (voir Création d'un document basé
sur un fichier de conception Dreamweaver, page 101).
Utilisation des feuilles de style en cascade pour mettre un texte en forme
443
Utilisation 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. (Pour obtenir un
aperçu de ce panneau, voir A propos du panneau Styles CSS, page 423.)
Pour ouvrir le panneau Styles CSS :
■
Procédez de l'une des manières suivantes :
■
Choisissez Fenêtre > Styles CSS.
■
Appuyez sur les touches Maj+F11.
■
Cliquez sur le bouton CSS de l'inspecteur Propriétés.
Pour modifier une règle dans le panneau Styles CSS (mode Actuel) :
1.
Cliquez sur le bouton Actuel, situé en haut du panneau Styles CSS.
2.
Sélectionnez un élément de texte dans la page pour afficher ses propriétés.
3.
Procédez de l'une des manières 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.
■
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.
Pour plus d'informations, voir Définition des préférences de styles CSS.
Pour modifier une règle dans le panneau Styles CSS (mode Tous) :
1.
Cliquez sur le bouton Tous, situé en haut du panneau Styles CSS.
2.
Procédez de l'une des manières suivantes :
■
Pour afficher la boîte de dialogue Définition des règles CSS et effectuer vos modifications,
double-cliquez sur une règle dans le 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.
444
Chapitre 13: Insertion et mise en forme de texte
■
Sélectionnez une règle dans le volet Toutes les règles, puis cliquez sur le bouton Modifier le
style situé dans la 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.
Pour plus d'informations, voir Définition des préférences de styles CSS.
Pour ajouter une propriété à une règle :
1.
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.
Procédez de l'une des manières 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.
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) :
Vue Définition des propriétés
Vue Catégorie
Vue Liste
La 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.
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.
La vue Liste
La 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.
Utilisation des feuilles de style en cascade pour mettre un texte en forme
445
Dans les modes Tous et Actuel, le panneau Styles CSS contient également les boutons
suivants :
Attacher une
feuille de style
Nouvelle règle de
CSS
Supprimer règle de CSS
Modifier le style
: affiche 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. Pour plus d'informations sur l'association d'une feuille de style
externe, voir Liens vers ou importation d'une feuille de style CSS externe, page 450.
Attacher une feuille de style
Nouvelle règle CSS ouvre une boîte de dialogue qui permet de sélectionner le type du style
que vous créez (par exemple, pour définir un style de classe, redéfinir une balise HTML) ou
pour définir un sélecteur CSS. Pour plus d'informations, voir Création d'une règle CSS,
page 446.
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. Pour plus d'informations sur la mise à
jour d'une feuille de style, voir Modification d'une règle CSS, page 451.
Supprimer la règle CSS : supprime la règle ou la propriété sélectionnée du panneau Styles
CSS et la mise en forme de tous les éléments auxquels elle est appliquée. (les références à ce
style ne sont cependant pas supprimées).
C ON S E I L
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle
enfoncée (Macintosh) sur le panneau StylesCSS pour ouvrir un menu contextuel
d'options disponibles pour l'exécution des commandes de feuilles de style CSS.
Rubriques connexes
■
Application d'un style de classe, page 448
■
Liens vers ou importation d'une feuille de style CSS externe, page 450
■
Modification d'une feuille de style CSS, page 452
Création d'une règle CSS
Vous pouvez créer une règle CSS pour automatiser la mise en forme de balises HTML ou
d'une plage de texte identifiée par un attribut class.
446
Chapitre 13: Insertion et mise en forme de texte
Pour créer une nouvelle règle CSS :
1.
2.
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 :
■
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.
■
Choisissez Texte > Styles CSS > Nouvelle règle CSS.
Définissez le type de style CSS que vous souhaitez créer :
■
Pour créer un style personnalisé applicable en tant qu'attribut class à une plage ou un
bloc de texte, choisissez l'option Classe, puis entrez le nom du style dans la zone de
texte Nom.
REMARQUE
3.
4.
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 redéfinir la mise en forme par défaut d'une balise HTML spécifique, choisissez
Balise, puis entrez une balise HTML dans le champ Balise ou choisissez-en une dans le
menu déroulant.
■
Pour définir la mise en forme d'une combinaison particulière de balises ou de toutes
les balises contenant un attribut Id spécifique, choisissez Utiliser le sélecteur CSS, puis
entrez une ou plusieurs balises HTML dans le champ Sélecteur ou choisissez-en une
dans le menu déroulant. Les sélecteurs (appelés sélecteurs de pseudo-classe)
disponibles dans le menu déroulant sont a:active, a:hover, a:link et a:visited.
Sélectionnez l'emplacement dans lequel définir le 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.
Cliquez sur OK.
La boîte de dialogue Définition du style s'affiche.
5.
Choisissez les options de la nouvelle règle CSS.
6.
Lorsque vous avez défini les attributs de style, cliquez sur OK.
Pour plus d'informations sur des paramètres de style CSS spécifiques, voir les rubriques
suivantes dans le menu Aide, Utilisation de Dreamweaver :
■
Définition des propriétés de type CSS
■
Définition des propriétés d'arrière-plan de style CSS
■
Définition des propriétés de bloc de style CSS
Utilisation des feuilles de style en cascade pour mettre un texte en forme
447
■
Définition des propriétés de boîte de style CSS
■
Définition des propriétés de bordure de style CSS
■
Définition des propriétés de liste de style CSS
■
Définition des propriétés de positionnement de style CSS
■
Définition des propriétés d'extension de style CSS
Rubriques connexes
■
Utilisation du panneau Styles CSS, page 444
■
Application d'un style de classe, page 448
■
Modification d'une règle CSS, page 451
Application d'un style 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 en cours sont affichés dans le panneau Styles CSS (le nom précédé
d'un point (.)) et dans le menu déroulant Style de l'inspecteur Propriétés de texte.
Même si la plupart des styles sont actualisés immédiatement, il est préconisé 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. Pour plus d'informations, voir A propos des conflits entre règles CSS,
page 420.
C ON S E I L
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.
Pour appliquer un style CSS personnalisé :
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 :
448
Chapitre 13: Insertion et mise en forme de texte
■
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 de texte, choisissez le style de classe à appliquer dans le
menu déroulant Style.
■
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 Texte > Styles CSS, puis sélectionnez le style à appliquer dans le sous-menu.
Pour supprimer un style personnalisé de la 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 (Fenêtre > Propriétés), choisissez Aucun dans le menu
déroulant Style.
Rubriques connexes
■
Description des feuilles de style en cascade, page 418
■
A propos du panneau Styles CSS, page 423
■
Modification d'une règle CSS, page 451
Exportation de styles pour créer une feuille de
style CSS
Vous pouvez exporter des styles d'un document pour créer une feuille de style CSS. Vous
pouvez ensuite créer des liens vers d'autres documents pour appliquer ces styles.
Pour exporter des styles CSS d'un document et créer une feuille de style CSS :
1.
Choisissez Fichier > Exporter > Styles CSS ou Texte > Styles CSS > Exporter.
La boîte de dialogue Exporter les styles dans un fichier CSS s'affiche.
2.
Nommez votre feuille de style et cliquez sur le bouton Enregistrer.
Le style est enregistré sous la forme d'une feuille de style CSS.
Rubriques connexes
■
Utilisation du panneau Styles CSS, page 444
■
Modification d'une feuille de style CSS, page 452
■
Utilisation de feuilles de style à la conception, page 453
Utilisation des feuilles de style en cascade pour mettre un texte en forme
449
Liens vers ou importation d'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.
Bien entendu, 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.
Pour plus d'informations sur l'utilisation des feuilles de style à la conception livrées avec
Dreamweaver, voir Création d'un document basé sur un fichier de conception Dreamweaver,
page 101.
Pour plus d'informations sur l'application d'un style, voir Application d'un style de classe,
page 448.
Pour créer un lien vers ou importer une feuille de style CSS externe :
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.
Complétez les options de la boîte de dialogue, puis cliquez sur OK.
Pour toutes instructions, cliquez sur le bouton Aide de la boîte de dialogue.
Rubriques connexes
■
Utilisation du panneau Styles CSS, page 444
■
Exportation de styles pour créer une feuille de style CSS, page 449
■
Modification d'une feuille de style CSS, page 452
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.
450
Chapitre 13: Insertion et mise en forme de texte
Pour appliquer une feuille de style de Dreamweaver :
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.
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 pour la modification des feuilles de style. Pour plus
d'informations sur la définition d'un éditeur externe, voir Lancement d'un éditeur externe pour
des fichiers multimédia, page 533.
Pour modifier une règle CSS :
1.
Ouvrez le panneau Styles CSS en sélectionnant Fenêtre > Styles CSS.
Utilisation des feuilles de style en cascade pour mettre un texte en forme
451
2.
Placez le point d'insertion sur le texte dont vous souhaitez modifier la règle CSS.
3.
Modifiez la règle à l'aide du panneau Styles CSS. Pour obtenir des instructions, voir
Utilisation du panneau Styles CSS, page 444.
Les modifications apportées s'appliquent immédiatement au document actif, ce qui vous
permet de connaître directement le résultat de vos opérations. Si vous modifiez des règles
enregistrées dans une feuille de style externe, n'oubliez pas d'enregistrer vos modifications
afin de les appliquer.
Si vous modifiez des règles CSS qui se trouvent dans une feuille de style utilisée dans
plusieurs documents, les modifications s'appliqueront également aux autres documents.
Rubriques connexes
■
Utilisation de feuilles de style à la conception, page 453
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 (voir
Modification d'une règle CSS, page 451), ou bien vous pouvez travailler directement dans la
feuille de style CSS.
Pour modifier une 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.
Rubriques connexes
■
Utilisation du panneau Styles CSS, page 444
■
Modification d'une règle CSS, page 451
452
Chapitre 13: Insertion et mise en forme de texte
Mise à jour de feuilles de style CSS dans un site
Contribute
Les utilisateurs de Macromedia Contribute ne peuvent pas apporter de modifications à une
feuille de style CSS. Pour modifier une feuille de style pour un site Contribute, utilisez
Dreamweaver.
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 jusqu'à la publication de la page.
■
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.
Pour modifier un style CSS dans un site Contribute :
1.
Utilisez les outils de modification de feuille de style présents dans Dreamweaver. Pour plus
d'informations, voir Utilisation des feuilles de style en cascade pour mettre un texte en forme,
page 443.
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.
Utilisation de 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 Dreamweaver ; 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.
Pour afficher ou masquer une feuille de style CSS à la conception :
1.
Ouvrez la boîte de dialogue Feuilles de style à la conception en procédant de l'une des
manières suivantes :
Utilisation des feuilles de style en cascade pour mettre un texte en forme
453
2.
3.
■
Cliquez avec le bouton droit de la souris dans le panneau Styles CSS et choisissez
Conception dans le menu contextuel.
■
Choisissez Texte > Styles CSS > Conception.
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é.
Cliquez sur OK pour fermer la boîte de dialogue.
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.
Rubriques connexes
■
Utilisation du panneau Styles CSS, page 444
■
Exportation de styles pour créer une feuille de style CSS, page 449
■
Liens vers ou importation d'une feuille de style CSS externe, page 450
■
Modification d'une feuille de style CSS, page 452
Vérification orthographique
Dans le menu Texte, la commande Orthographe permet de vérifier l'orthographe du
document actif. La commande Orthographe ignore les balises HTML et les valeurs
d'attributs.
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. Vous pouvez télécharger
des dictionnaires dans d'autres langues sur le centre de support de Dreamweaver, à l'adresse
suivante : http://www.macromedia.com/go/dreamweaver_support_fr/.
Pour vérifier puis corriger l'orthographe :
1.
Choisissez Texte > Orthographe ou appuyez sur les touches Maj+F7.
454
Chapitre 13: Insertion et mise en forme de texte
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.
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.
REMARQUE
Pour rechercher des fichiers dans un site, utilisez les commandes suivantes : Retrouver
sur le site local et Retrouver sur le site distant.
Pour rechercher du texte et des balises HTML au sein des documents :
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.
La boîte de dialogue Rechercher et remplacer s'affiche.
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.
Pour plus d'informations, cliquez sur le bouton Aide.
4.
Une fois l'opération terminée, cliquez sur le bouton Fermer pour fermer la boîte de
dialogue.
Pour effectuer une nouvelle recherche sans afficher la boîte de dialogue
Rechercher et remplacer :
■
Appuyez sur F3 (Windows) ou Commande+G (Macintosh).
Recherche et remplacement de texte
455
456
Chapitre 13: Insertion et mise en forme de texte
CHAPITRE 14
14
Insertion d’images
Dans Macromedia Dreamweaver 8, vous pouvez travailler en mode Création ou en mode
Code pour insérer des images dans un document. Lorsque vous ajoutez des images dans un
document Dreamweaver, vous pouvez définir ou modifier les propriétés d'image et visualiser
les modifications directement dans la fenêtre de document.
Pour améliorer l'efficacité de votre environnement de conception, vous pouvez sélectionner
une préférence pour l'éditeur d'image et le lancer automatiquement pour modifier des images
lorsque vous travaillez dans Dreamweaver.
Ce chapitre contient les sections suivantes :
A propos des images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .457
Insertion d'une image. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 460
Redimensionnement d'une image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .465
Recadrage d'une image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .466
Optimisation d'une image à l'aide de Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 467
Ajustement de la luminosité et du contraste d'une image . . . . . . . . . . . . . . . . . . . . .468
Accentuation d'une image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .468
Création d'une image survolée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 469
Utilisation d'un éditeur d'image externe. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .470
comportements aux images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 471
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. Actuellement,
les formats de fichiers GIF et JPEG sont les formats les mieux pris en charge et peuvent être
visualisés par la plupart des navigateurs.
457
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.
Les fichiers GIF (Graphic Interchange Format) 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.
Le format de fichier JPEG (Joint Photographic Experts Group) 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) 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 de Macromedia 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.
Modification d'images dans Dreamweaver
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, Macromedia
Fireworks). 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.
R E M AR QU E
Vous n'avez pas besoin d'avoir installé Macromedia Fireworks sur votre ordinateur pour
utiliser les fonctions de retouche d'image de Dreamweaver.
Dreamweaver comporte les fonctions de retouche d'image suivantes :
458
Chapitre 14: Insertion d’images
Le rééchantillonnage d'image 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 en réduit la taille, 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é.
Le recadrage 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é/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.
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.
L'accentuation
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.
Rubriques connexes
■
Redimensionnement d'une image, page 465
■
Recadrage d'une image, page 466
■
Ajustement de la luminosité et du contraste d'une image, page 468
■
Accentuation d'une image, page 468
A propos des images
459
Insertion d'une image
Lorsque vous insérez une image dans un document Dreamweaver, le programme crée
automatiquement 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.
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. Pour plus d'informations, voir Création
d'images dynamiques, page 801.
Pour insérer une image :
1.
2.
3.
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 de la barre Insérer, cliquez sur l'icône Image.
■
Dans la catégorie Commun de la barre Insérer, faites glisser l'icône Image 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 Site 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.
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 graphique.
■
Sélectionnez Source de données pour choisir une source d'images dynamiques.
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. Cliquez sur le bouton Aide de la boîte de
dialogue pour en savoir plus sur les options qu'elle contient.
4.
Cliquez sur OK.
460
Chapitre 14: Insertion d’images
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 (voir Optimisation de l'espace de travail pour la conception de
pages accessibles, page 75).
5.
Tapez des valeurs dans les zones Texte secondaire et Description longue, puis cliquez sur
OK.
REMARQUE
Vous pouvez entrer les informations dans une seule zone de texte ou les deux, selon
vos besoins.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
L'image apparaît dans votre document.
R E M A R QU E
6.
Si vous cliquez sur Annuler, l'image s'affiche dans le document, mais Dreamweaver
ne lui associe ni balises ni attributs d'accessibilité.
Dans l'inspecteur Propriétés (Fenêtre > Propriétés), définissez les propriétés de l'image.
Pour plus d'informations, voir Définition des propriétés de l'image dans Utilisation de
Dreamweaver.
Pour modifier les attributs d'accessibilité de l'image, voir Modification des attributs
d'accessibilité d'une image, page 461.
Rubriques connexes
■
Définition d'une image ou d'une couleur d'arrière-plan de la page, page 392
■
Utilisation des images d'espacement, page 306
Modification des attributs d'accessibilité d'une image
Si vous avez inséré des attributs d'accessibilité pour une image (voir Insertion d'une image,
page 460), vous pouvez modifier ces valeurs dans le code HTML.
Insertion d'une image
461
Pour modifier les valeurs d'accessibilité d'une image :
1.
Sélectionnez l'image dans la fenêtre de document.
2.
Procédez de l'une des manières suivantes :
■
Modifiez les attributs de l'image en mode Code.
■
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.
■
Modifiez la valeur Alt dans l'inspecteur Propriétés.
Insertion d'un espace réservé pour une 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.
Pour insérer un espace réservé pour une image :
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.
Procédez de l'une des manières suivantes :
■
Dans la catégorie Commun de la barre Insérer, cliquez sur l'icône Espace réservé pour
l'image.
■
Choisissez Insertion > Espace réservé pour l'image.
La boîte de dialogue Espace réservé pour l'image s'affiche.
3.
Dans la boîte de dialogue, sélectionnez les options de l'espace réservé pour l'image.
Vous pouvez définir la taille et la couleur de l'espace réservé et lui donner une étiquette de
texte. Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
4.
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 de la taille ne s'affichent
pas.
Rubriques connexes
■
Redimensionnement d'une image, page 465
462
Chapitre 14: Insertion d’images
■
Utilisation de Fireworks pour modifier les espaces réservés pour les images Dreamweaver,
page 514.
Remplacement d'un espace réservé pour une image
Un espace réservé pour l'image n'est pas une image qui s'affiche 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 graphiques 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. Pour plus d'informations sur la création d'une image de remplacement dans
Fireworks, voir Utilisation de Fireworks pour modifier les espaces réservés pour les images
Dreamweaver, page 514.
Pour mettre à jour la source d'image :
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.
La boîte de dialogue Source de l'image s'affiche.
2.
Dans la boîte de dialogue, localisez l'image que vous voulez utiliser pour remplacer l'espace
réservé.
3.
Cliquez sur OK.
L'image sélectionnée apparaît dans le document.
Insertion d'une image
463
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.
Pour aligner 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.
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 :
provoque généralement un alignement sur la ligne de base. La valeur par défaut varie
selon le navigateur du visiteur du site.
Défaut
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
464
aligne le milieu de l'image avec le milieu du texte dans la ligne actuelle.
Chapitre 14: Insertion d’images
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).
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.
Gauche
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.
Droite
Redimensionnement d'une image
Dans Dreamweaver, vous pouvez redimensionner visuellement certains éléments comme des
images, des plug-ins, des fichiers Macromedia Shockwave ou Flash, des applets et des
contrôles ActiveX.
Le redimensionnement visuel d'une image dans Dreamweaver 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 Macromedia 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.
Pour redimensionner visuellement 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.
Redimensionnement d'une image
465
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.
■
Les éléments peuvent être redimensionnés visuellement à une taille minimale de 8 x 8 pixels.
Pour ajuster la largeur et la hauteur d'un élément à une taille inférieure, (par exemple, 1 x 1
pixel), utilisez l'inspecteur Propriétés pour entrer une valeur numérique.
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.
Pour rétablir la taille originale d'une image :
■
Cliquez sur le bouton Rétablir la taille dans l'inspecteur Propriétés des images.
Pour rééchantillonner 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.
Rubriques connexes
■
Modification d'images dans Dreamweaver, page 458
Recadrage d'une image
Dreamweaver permet de recadrer (ou rogner) les images bitmap.
R EM A R Q U E
Lorsque vous recadrez une image à l'aide de Dreamweaver, 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.
Pour recadrer une image :
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.
466
Chapitre 14: Insertion d’images
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.
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.
4.
Vérifiez à l'aide de l'aperçu que l'image correspond à vos attentes.
Pour annuler les effets de la commande de recadrage :
■
Choisissez Edition > Annuler Recadrer pour revenir à l'image d'origine.
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.
Rubriques connexes
■
Modification d'images dans Dreamweaver, page 458
■
Ajustement de la luminosité et du contraste d'une image, page 468
■
Accentuation d'une image, page 468
Optimisation d'une image à l'aide de
Fireworks
Vous pouvez optimiser des images sur vos pages Web dans Dreamweaver.
Pour optimiser une image :
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 Optimiser dans Fireworks dans l'inspecteur Propriétés des
images.
■
Choisissez Modifier > Image > Optimiser l'image dans Fireworks.
La boîte de dialogue Optimiser l'image dans Fireworks s'affiche.
2.
Cliquez sur OK.
Rubriques connexes
■
Modification d'images dans Dreamweaver, page 458
Optimisation d'une image à l'aide de Fireworks
467
■
Insertion d'une image, page 460
■
Recadrage d'une image, page 466
■
Accentuation d'une image, page 468
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.
Pour ajuster la luminosité et le contraste d'une image :
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.
■
Choisissez Modifier > Image > Luminosité/Contraste.
La boîte de dialogue Luminosité/Contraste s'affiche.
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.
Rubriques connexes
■
Modification d'images dans Dreamweaver, page 458
■
Insertion d'une image, page 460
■
Recadrage d'une image, page 466
■
Accentuation d'une image, page 468
Accentuation d'une image
L'accentuation augmente le contraste des pixels autour des objets pour une meilleure
définition de l'image.
Pour accentuer une image :
1.
Ouvrez la page qui contient l'image à accentuer, sélectionnez l'image et procédez de l'une
des manières suivantes :
468
Chapitre 14: Insertion d’images
■
Cliquez sur le bouton Accentuer dans l'inspecteur Propriétés des images.
■
Choisissez Modifier > Image > Accentuer.
La boîte de dialogue Accentuer s'affiche.
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.
Cliquez sur OK.
4.
Enregistrez vos modifications en choisissant Fichier > Enregistrer ou revenez à l'image
d'origine en choisissant Edition > Annuler Accentuer.
Pour annuler les effets de la commande d'accentuation :
■
Choisissez Edition > Annuler Accentuer pour revenir à l'image d'origine.
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.
Rubriques connexes
■
Modification d'images dans Dreamweaver, page 458
■
Recadrage d'une image, page 466
■
Ajustement de la luminosité et du contraste d'une image, page 468
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 audessus d’elle.
Avant de commencer, sélectionnez une ou plusieurs paires d'images. Une image survolée est
en fait composée de deux images : 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 automatiquement la seconde image en fonction de la taille de la
première.
Création d'une image survolée
469
Les images survolées sont automatiquement définies pour répondre à l'événement
onMouseOver. Pour plus d'informations sur la configuration d'une image pour répondre à un
événement différent (par exemple, un clic de souris) ou sur la notification de l'image affichée
par une image survolée, voir Substitution d'image, page 592.
Pour créer une image survolée :
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 barre Insérer, sélectionnez Commun puis cliquez sur l'icône Image survolée.
■
Dans la barre Insérer, sélectionnez Commun puis faites glisser l'icône Image survolée
vers l'emplacement souhaité de la fenêtre du document.
■
Choisissez la commande Insertion > Objets image > Image survolée.
La boîte de dialogue Insérer l'image survolée s'affiche.
3.
Complétez les options de la boîte de dialogue.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
4.
Cliquez sur OK.
5.
Choisissez Fichier > Aperçu dans le navigateur ou appuyez sur la touche F12.
Il est impossible de voir l'effet d'une image survolée dans le mode Création.
6.
Dans le navigateur, placez le pointeur au-dessus de l'image d'origine.
Cette image doit alors être remplacée par l'image survolée.
Rubriques connexes
■
Insertion d'une barre de navigation, page 499
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. Pour plus d'informations,
voir Utilisation de Fireworks, page 511.
Pour lancer l'éditeur d'image externe, procédez de l'une des manières
suivantes :
■
470
Double-cliquez sur l'image à modifier.
Chapitre 14: Insertion d’images
■
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 Site 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 Site, 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.
Rubriques connexes
■
Spécification de l'éditeur à lancer depuis Dreamweaver, page 534
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 calque 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 (voir Précharger les images, page 579).
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) (voir Substitution d'image,
page 592).
Permuter une image
comportements aux images
471
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 (voir Restauration de permutation d'image, page 593).
Restaurer l'interversion d'images
Vous pouvez également utiliser les comportements pour créer des structures de navigation
sophistiquées, par exemple une barre de navigation ou un menu de liens (voir Utilisation des
barres de navigation, page 498 et Insertion de menus de reroutage, page 496).
472
Chapitre 14: Insertion d’images
CHAPITRE 15
15
Liens et navigation
Une fois que vous avez défini un site Macromedia Dreamweaver MX 8 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 hypertextes 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 calque ou un
cadre.
Pour obtenir une représentation visuelle de la manière dont vos fichiers sont liés, utilisez la
carte du site. Dans la carte du site, vous pouvez ajouter de nouveaux documents à votre site,
créer et supprimer des liens entre des documents et vérifier les liens entre des fichiers
interdépendants. Pour plus d'informations, voir Affichage d'une carte de site, page 138.
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
remplacent le fichier final et permettent d'ajouter des liens rapidement et de les vérifier avant
de terminer toutes les pages. Pour plus d'informations sur la vérification de liens, voir
Recherche de liens rompus, externes et orphelins, page 503.
Ce chapitre contient les sections suivantes :
Description des emplacements et chemins d'accès des documents . . . . . . . . . . .474
Menus de reroutage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 478
Barres de navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 478
A propos des cartes graphiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .479
Création de liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 480
Gestion des liens. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 491
Insertion de menus de reroutage. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 496
Utilisation des barres de navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 498
473
Utilisation de cartes graphiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 500
Association de comportements JavaScript à des liens . . . . . . . . . . . . . . . . . . . . . . 503
Recherche de liens rompus, externes et orphelins . . . . . . . . . . . . . . . . . . . . . . . . . . 503
Correction des liens rompus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 505
Ouverture des documents liés dans Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . .507
Description des emplacements et
chemins d'accès des documents
Pour créer des liens, il est indispensable de comprendre le chemin d'accès qui s'établit entre le
document à 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)
Pour plus d'informations sur les URL, voir le site Internet du World Wide Web Consortium
au sujet des noms et des adresses : www.w3.org/Addressing/.
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.macromedia.com/go/
dreamweaver_support_fr/contents.html). Pour plus d'informations, voir Chemins absolus,
page 475.
■
Chemins relatifs au document (par exemple dreamweaver/contents.html). Pour plus
d'informations, voir Chemins relatifs au document, page 475.
■
Chemins relatifs à la racine du site (par exemple /support/dreamweaver/contents.html).
Pour plus d'informations, voir Chemins relatifs à la racine du site, page 477.
Dreamweaver vous permet de choisir aisément le type de chemin à créer pour vos liens (voir
Liens entre fichiers et documents, page 480).
REMARQUE
474
Il est préférable d'utiliser le type de lien de votre choix, qu'il soit relatif au site ou au
document. L'exploration des liens, contrairement à la saisie des chemins, garantit que
vous entrez toujours le chemin correct.
Chapitre 15: Liens et navigation
Chemins absolus
Les chemins absolus indiquent le chemin complet du document lié, y compris le protocole à
utiliser (en général http:// pour les pages Web). Par exemple, http://www.macromedia.com/
go/dreamweaver_support_fr/contents.html est un chemin absolu.
Vous devez utiliser un chemin absolu lorsque vous créez un lien vers un fichier 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 sont 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), si vous utilisez un chemin absolu vers une
image qui réside sur un serveur distant et qui n'est pas disponible sur le lecteur de disque
dur local, vous ne pourrez pas visualiser l'image dans la fenêtre de document. Ainsi, vous
devez prévisualiser le document dans un navigateur pour voir l'image. Si possible,
utilisez des chemins relatifs au document ou à la racine pour les images. Pour plus
d'informations, voir Insertion d'une image, page 460.
Chemins relatifs au document
Les chemins relatifs au document représentent le type de chemin le plus adapté aux liens
locaux dans la plupart des sites Web. Ils sont particulièrement utiles lorsque le document actif
et le document pointé par le lien se trouvent dans le même dossier et le resteront
vraisemblablement. Vous pouvez également utiliser un chemin relatif au document 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 de
l'URL absolue qui est identique pour les deux documents, en n'indiquant que la partie du
chemin qui diffère.
Description des emplacements et chemins d'accès des documents
475
Par exemple, supposons que la structure de votre site soit la suivante :
Vous pouvez créer des liens du fichier contents.html vers d'autres fichiers comme suit :
■
Pour établir un lien depuis contents.html vers hours.html (ces deux fichiers sont dans le
même dossier), le nom de fichier est le chemin relatif : hours.html.
■
Pour établir un lien vers tips.html (qui se trouve dans le sous-dossier « ressources »),
utilisez le chemin relatif resources/tips.html.
Chaque barre oblique (/) signifie « descendre d'un niveau dans la hiérarchie du dossier ».
■
Pour établir un lien vers index.html (qui se trouve dans le dossier parent, un niveau audessus de contents.html), utilisez le chemin relatif ../index.html.
Chaque séquence de deux points suivis d'une barre oblique (../) signifie « monter d'un
niveau dans la hiérarchie du dossier ».
■
476
Pour établir un lien vers catalog.html (qui se trouve dans un autre sous-dossier du dossier
parent), utilisez le chemin relatif ../products/catalog.html.
Chapitre 15: Liens et navigation
La séquence ../ fait remonter au dossier parent, puis la chaîne products/ fait redescendre
dans le sous-dossier products.
Lorsque vous déplacez un groupe de 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).
Rubriques connexes
■
Définition du chemin relatif des nouveaux liens, page 486
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 types de 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
différents. 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 dans un
site Web sur lequel il vous faudra fréquemment déplacer des fichiers HTML d'un dossier à un
autre. Lorsque vous déplacez un document qui contient des liens relatifs à la racine, il n'est pas
nécessaire de modifier les liens ; par exemple, si vos fichiers HTML utilisent des liens relatifs à
la racine 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 qui sont pointés par des liens relatifs à
la racine, il sera nécessaire de 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, tous les
chemins relatifs à la racine des fichiers qu'il contient doivent être mis à jour (si vous déplacez
ou renommez des fichiers dans le panneau Fichiers, Dreamweaver met automatiquement à
jour tous les liens concernés).
Description des emplacements et chemins d'accès des documents
477
Rubriques connexes
■
Définition du chemin relatif des nouveaux liens, page 486
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 options qui lient vers des documents ou 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.
Un menu de reroutage peut comporter trois composants de base :
■
(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 Atteindre.
Rubriques connexes
■
Insertion de menus de reroutage, page 496
Barres de navigation
Une barre de navigation est composée d'une image ou d'une série d'images qui changent en
fonction des actions de l'utilisateur. Les barres de navigation constituent souvent une méthode
simple pour se déplacer entre des pages et des fichiers sur un site.
Un élément de barre de navigation peut avoir quatre états :
■
Haut : l'image qui s'affiche lorsque l'utilisateur n'a pas encore cliqué ou interagi avec
l'élément.
Par exemple, l'élément dans cet état est tel qu'il n'est pas cliqué.
478
Chapitre 15: Liens et navigation
■
Survolée : l'image qui s'affiche lorsque le pointeur de la souris est déplacé au-dessus de
l'image Haut. L'aspect de l'élément change (par exemple, il peut paraître plus clair) pour
spécifier à l'utilisateur qu'il peut interagir avec celui-ci.
■
Bas : l'image qui s'affiche une fois l'élément cliqué.
Par exemple, lorsqu'un utilisateur clique sur un élément, une nouvelle page est chargée et
la barre de navigation est toujours affichée, mais l'élément cliqué est assombri pour
indiquer qu'il est sélectionné.
■
Image Au-dessus lorsque Abaissée : l'image qui s'affiche lorsque le pointeur est placé audessus de l'image Bas une fois l'élément cliqué.
Par exemple, l'élément peut apparaître estompé ou grisé. Vous pouvez utiliser cet état
comme indice visuel pour indiquer aux utilisateurs qu'il n'est pas possible de cliquer à
nouveau sur cet élément lorsqu'ils se trouvent dans cette section du site.
Vous n'avez pas à inclure des images de barre de navigation pour les quatre états. Par exemple,
vous pouvez uniquement définir les états Haut et Bas.
Rubriques connexes
Utilisation des barres de navigation, page 498
■
A propos des cartes graphiques
Une carte graphique est une image ayant été divisée en régions, ou 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 sur le client conservent les informations propres aux liens hypertextes
dans le corps du document HTML, alors que les cartes graphiques sur le serveur conservent
ces informations dans un fichier de carte séparé. Lorsque l’utilisateur clique sur la zone
réactive d'une image, l'URL associée est directement envoyée au serveur. Ceci rend les cartes
graphiques sur le 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 sur
le 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.
A propos des cartes graphiques
479
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 sur le client. Pour inclure une carte graphique sur le serveur
dans un document, vous devez écrire le code HTML approprié.
Rubriques connexes
■
Utilisation de cartes graphiques, page 500
Création de liens
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 (voir Liens entre fichiers et documents, page 480).
■
Un lien vers une ancre nommée, qui permet de sauter à un emplacement spécifique au
sein d'un document (voir Lien vers un emplacement spécifique au sein d'un document,
page 487).
■
Un lien de courriel, qui crée un courriel vierge avec l'adresse du destinataire déjà indiquée
(voir Création d'un lien de messagerie électronique, page 489).
■
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 (voir Création de liens nuls et de liens de script,
page 490).
REMARQUE
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 (voir Description des emplacements et chemins d'accès des documents,
page 474).
Liens entre fichiers et documents
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. Pour plus
d'informations sur l'utilisation de la carte du site pour créer des liens, voir Modification de
liens dans la carte du site, page 493.
480
Chapitre 15: Liens et navigation
Dreamweaver crée les liens vers d'autres pages de votre site à l'aide de chemins relatifs au
document. Vous pouvez toutefois lui demander de créer les nouveaux liens à l'aide de chemins
relatifs à la racine du site.
REMARQUE
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.
Cette section contient les rubriques suivantes :
■
Liens vers des documents à l'aide de l'inspecteur Propriétés, page 481
■
Lien vers des documents à l'aide de l'icône du pointeur, page 483
■
Lien vers des documents à l'aide de la carte graphique, page 484
■
Utilisation de la commande Hyperlien, page 485
■
Définition du chemin relatif des nouveaux liens, page 486
Rubriques connexes
■
Description des emplacements et chemins d'accès des documents, page 474
Liens vers des documents à l'aide de l'inspecteur Propriétés
Vous pouvez utiliser l'icône de dossier 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.
Pour créer un lien vers des documents en utilisant l'icône du dossier inspecteur
Propriétés ou la zone de texte Lien :
1.
Sélectionnez le texte ou une image dans la fenêtre de création du document.
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.
Création de liens
481
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. Pour plus
d’informations, consultez la section Description des emplacements et chemins d'accès des
documents, page 474.
Vous pouvez modifier le paramètre par défaut de la zone de texte Relatif à du site. Pour
plus d'informations, voir Définition du chemin relatif des nouveaux liens, page 486.
■
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. 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éé.
Pour les chemins relatifs au document, il suffit tout simplement de laisser de côté la partie
de l'URL absolue qui est identique pour le document actif et le document lié. Si le fichier
de destination du lien se trouve dans le même dossier que le document actuel, entrez le
nom de fichier ; s'il se trouve dans un sous-dossier, saisissez le nom du sous-dossier, suivi
d'une barre oblique (/) et du nom de fichier ; s'il se trouve dans le dossier parent, faites
précéder le nom de fichier par ../ (« .. » revient à demander de remonter d'un niveau dans
la hiérarchie des dossiers).
3.
Dans le menu déroulant Cible, sélectionnez un emplacement dans lequel ouvrir le
document.
Pour que le document lié s'affiche ailleurs que dans la fenêtre ou le cadre en cours,
sélectionnez une option dans le menu déroulant Cible de l'inspecteur Propriétés :
charge le document lié dans une nouvelle fenêtre, sans nom, du navigateur.
■
_blank
■
_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
482
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.
Chapitre 15: Liens et navigation
■
_top charge le document lié dans la fenêtre de base du navigateur, en supprimant tous
les cadres.
C ON S E I L
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 >
Balise Head > Base et en sélectionnant les informations cible. Pour plus
d'informations sur le ciblage de cadres, voir Définition des contenus de cadre avec
liens, page 329.
Lien vers des documents à l'aide de l'icône du pointeur
L'icône du pointeur vous permet de créer des liens à partir d'une image, d'un objet ou d'un
texte vers un autre document ou fichier.
Pour créer un lien vers des documents en utilisant l'icône du pointeur vers un
fichier :
1.
Sélectionnez le texte ou une image dans la fenêtre de création du document.
2.
Faites glisser l'icône du pointeur à droite de la zone Lien de l'inspecteur Propriétés et
pointez vers un autre document ouvert, une ancre visible dans un document ouvert ou un
document du panneau Fichiers.
La zone Lien est mise à jour pour indiquer le lien.
REMARQUE
3.
Vous pouvez créer un lien vers un document ouvert à condition que vos documents
ne soient pas agrandis dans la fenêtre de document. Lorsque vous pointez vers un
document ouvert, celui-ci passe au premier plan de votre écran pendant que vous
effectuez votre sélection.
Relâchez le bouton de la souris.
Pour créer un lien à partir d'une sélection dans un document ouvert :
1.
Sélectionnez le texte dans la fenêtre de document.
2.
Faites glisser la sélection, en maintenant la touche Maj enfoncée.
L'icône Pointer vers un fichier s'affiche lorsque vous commencez à faire glisser la souris.
3.
Pointez vers un autre document ouvert, une ancre visible dans un document ouvert ou un
fichier du panneau Fichiers.
REMARQUE
Vous pouvez créer un lien vers un document ouvert à condition que vos documents
ne soient pas agrandis dans la fenêtre de document. Lorsque vous pointez vers un
document ouvert, celui-ci passe au premier plan de votre écran pendant que vous
effectuez votre sélection.
Création de liens
483
4.
Relâchez le bouton de la souris.
Rubriques connexes
■
Définition du chemin relatif des nouveaux liens, page 486
Lien vers des documents à l'aide de la carte graphique
Vous pouvez créer des liens à partir de la carte graphique. Les liens créés sont placés en dessous
des fichiers HTML sélectionnés, ce qui vous permet de créer rapidement des liens au sein d'un
site.
Pour créer un lien vers des documents en utilisant la carte du site et l'icône
Pointer vers un fichier :
1.
Dans le panneau Fichiers, affichez les vues Fichiers du site et Carte du site en appuyant sur
l'icône Carte du site et en choisissant Carte et fichiers.
2.
Sélectionnez un fichier HTML dans la carte du site.
L'icône Pointer vers un fichier s'affiche à côté du fichier.
3.
Faites glisser l'icône Pointer vers un fichier et pointez vers un autre fichier dans la carte du
site ou vers un fichier local dans la vue Fichiers du site.
4.
Relâchez le bouton de la souris.
Un lien hypertexte portant le nom du fichier lié est placé au bas du fichier HTML
sélectionné. Cette méthode fonctionne correctement lorsque vous construisez votre site et
que vous souhaitez créer rapidement des liens au niveau du site.
Pour lier des documents dans la carte du site, procédez de l'une des manières
suivantes :
■
Faites glisser une page depuis l'Explorateur de Windows ou le Sélecteur du Macintosh vers
une page dans la carte du site.
R E M A R QU E
Vérifiez que le panneau Fichiers est ancré, puis cliquez sur la flèche Etendre.
Sélectionnez Carte et fichiers en maintenant le bouton Carte du site enfoncé.
■
Sélectionnez une page HTML dans la carte du site, puis choisissez Site > Lier au fichier
existant (Windows) ou Site > Affichage de la carte du site > Lier au fichier existant
(Macintosh) ou choisissez Lier au fichier existant dans le menu contextuel.
■
Sélectionnez une page HTML dans la carte du plan, puis choisissez Site > Lier au nouveau
fichier (Windows) ou Site > Affichage de la carte du site > Lier au nouveau fichier
(Macintosh) ou choisissez Lier au nouveau fichier dans le menu contextuel.
484
Chapitre 15: Liens et navigation
Rubriques connexes
■
Définition du chemin relatif des nouveaux liens, page 486
Utilisation de 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.
Pour ajouter un hyperlien en utilisant la commande Hyperlien :
1.
Placez le curseur à l'endroit du document où vous souhaitez que l'hyperlien 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 de la barre Insérer, cliquez sur le bouton Hyperlien.
La boîte de dialogue Hyperlien apparaît.
3.
Complétez les options de la boîte de dialogue.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
4.
Cliquez sur OK.
Rubriques connexes
■
Modification de liens dans la carte du site, page 493
■
Lien vers un emplacement spécifique au sein d'un document, page 487
■
Création d'un lien de messagerie électronique, page 489
■
Création de liens nuls et de liens de script, page 490
Création de liens
485
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. Vous pouvez toutefois lui demander de le faire en utilisant à la place des
chemins relatifs à la racine du site. Pour plus d'informations sur les chemins relatifs, voir
Description des emplacements et chemins d'accès des documents, page 474.
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 (voir Configuration d'un nouveau site Dreamweaver, page 89).
Dreamweaver utilise ce dossier pour déterminer les chemins relatifs à la racine pointant vers
des fichiers.
Pour définir le chemin relatif des nouveaux liens, utilisez la boîte de dialogue Définition du
site.
Pour définir le chemin relatif de nouveaux liens :
1.
Choisissez Site > Gérer les sites.
La boîte de dialogue Gérer les sites s'affiche.
2.
Dans la liste, double-cliquez sur votre site.
La boîte de dialogue Définition du site s'ouvre.
3.
Cliquez sur l'onglet Avancé si les paramètres avancés ne sont pas visibles.
L'onglet Avancé de la boîte de dialogue Définition du site affiche le contenu de 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
C ON S E I L
486
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 (voir Aperçu et test de page
dans les navigateurs, page 408).
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 (voir Chemins relatifs à la racine du site, page 477).
Chapitre 15: Liens et navigation
5.
Pour les chemins relatifs à la racine du site, saisissez l'URL que votre site Web définitif
utilisera dans la zone de texte Adresse HTTP.
Dreamweaver utilise cette adresse pour s'assurer que les liens relatifs à la racine
fonctionnent sur le serveur distant, ce dernier pouvant présenter une racine de site
distincte. Par exemple, si vous liez un fichier d'image de votre disque dur dans le dossier
C:\Ventes\images\ (où Ventes correspond à votre dossier racine local) et que l'URL de
votre site définitif est http://www.monsite.com/VentesApp/ (où VentesApp est votre
dossier racine distant), la saisie de l'URL dans la zone de texte Adresse HTTP permettra
de vérifier que le chemin conduisant au fichier sur le serveur distant est en réalité /
VentesApp/images/.
REMARQUE
6.
Les versions précédentes de Dreamweaver ne permettaient pas d'associer le
dossier racine distant approprié, ce qui entraînait parfois des erreurs d'exécution
pour certaines pages.
Cliquez sur OK.
Le paramètre du nouveau chemin ne s'applique qu'au site actif.
Rubriques connexes
■
Description des emplacements et chemins d'accès des documents, page 474
■
Utilisation des paramètres avancés pour configurer un site Dreamweaver, page 90
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.
Pour créer 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.
Procédez de l'une des manières suivantes :
Création de liens
487
■
Choisissez Insertion > Ancre nommée.
■
Appuyez sur Ctrl+A (Windows) ou Commande+Option+A (Macintosh).
■
Dans la catégorie Commun de la barre Insérer, cliquez sur le bouton Ancre nommée.
La boîte de dialogue Ancre nommée apparaît.
3.
Dans la zone de texte Ancre nommée, entrez le nom de l'ancre puis cliquez sur OK.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
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.
Pour créer 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.
Exemple :
■
Pour créer un lien vers une ancre du document actif nommée «début», tapez #début.
■
Pour créer un lien vers une ancre nommée «début» dans un autre document figurant
dans le même dossier, tapez NomDuFichier.html#début.
R E MA R Q U E
488
La casse (majuscules/minuscules) est importante dans les noms d'ancre.
Chapitre 15: Liens et navigation
Pour créer 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 souhaité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.
Procédez de l'une des manières suivantes :
■
Cliquez sur l'icône du pointeur à 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, 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.
Rubriques connexes
■
Liens entre fichiers et documents, page 480
■
Création de liens nuls et de liens de script, page 490
Création d'un lien de messagerie électronique
Un lien de message électronique 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.
Pour créer 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 message
électronique 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 de la barre Insérer, cliquez sur le bouton Lien de
messagerie.
Création de liens
489
La boîte de dialogue Lien de messagerie apparaît.
3.
Complétez les options de la boîte de dialogue.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
4.
Cliquez sur OK.
Pour créer un lien de messagerie électronique à l'aide de l'inspecteur
Propriétés :
1.
Sélectionnez le texte ou une image dans la fenêtre de création du document.
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. Par exemple,
tapez mailto:jlydon@macromedia.com.
Rubriques connexes
■
Lien vers un emplacement spécifique au sein d'un document, page 487
■
Lien vers un emplacement spécifique au sein d'un document, page 487
Création de liens nuls et de liens de script
Les types de lien les plus courants sont ceux qui renvoient à des documents et à des ancres
nommées (voir Liens entre fichiers et documents, page 480 et Lien vers un emplacement
spécifique au sein d'un document, page 487), mais il en existe d'autres.
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. Une fois un lien nul créé, vous pouvez lui attacher un
comportement pour intervertir une image ou pour afficher un calque lorsque le curseur est
déplacé au-dessus du lien. Pour plus d'informations sur l'association de comportements à des
objets, voir Application d'un comportement, page 558.
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, des
validations de formulaires et autres tâches de traitement lorsqu'un visiteur clique sur un
élément spécifique.
Les liens de script
490
Chapitre 15: Liens et navigation
Pour créer un lien nul :
1.
Sélectionnez du texte, un objet ou une image dans la fenêtre de création du document.
2.
Dans l'inspecteur Propriétés, tapez javascript:; (le mot javascript suivi par deux points puis
par un point-virgule) dans la zone de texte Lien.
Pour créer un lien de script :
1.
Sélectionnez du texte, un objet ou une image dans la fenêtre de création du document.
2.
Dans la zone Lien de l'inspecteur Propriétés, tapez javascript: suivi du code JavaScript ou
d'un appel de fonction JavaScript.
Par exemple, la saisie de javascript:alert('Ce lien amène à l'index') dans la zone Lien crée
un lien qui, lorsque l'on clique dessus, affiche une zone d'alerte JavaScript avec le message
« Ce lien amène à l'index. ».
REMARQUE
Le code JavaScript étant inséré entre guillemets (en tant que valeur de l'attribut
HREF), vous devez utiliser des guillemets simples (apostrophes) dans le code du
script ou désigner les guillemets éventuels comme faisant partie du code en les
faisant précéder d'une barre oblique inversée (par exemple, \"Ce lien amène à
l'index\").
Rubriques connexes
Lien vers un emplacement spécifique au sein d'un document, page 487
■
■
Création d'un lien de messagerie électronique, page 489
Gestion des liens
Pour éviter tout rupture de liens dans votre site, vous pouvez activer la gestion de liens afin
que Dreamweaver mette automatiquement tous les liens à jour lorsque vous apportez une
modification. Vous pouvez également utiliser une représentation visuelle de votre site pour
modifier des liens ou mettre à jour tous les liens dans un fichier donné avec une seule
modification.
Mise à jour automatique de 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.
Gestion des liens
491
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 vers des fichiers du site local.
Pour activer la gestion des liens dans Dreamweaver :
1.
Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
La boîte de dialogue Préférences s'affiche.
2.
Sélectionnez la catégorie Général dans la liste de gauche.
Les options Préférences générales apparaissent.
3.
Dans la section Options de document, sélectionnez Toujours ou Invite dans le menu
déroulant Mettre à jour les liens lors de la suppression de fichiers.
Si vous choisissez Toujours, Dreamweaver met automatiquement à jour les liens vers un
document et à partir de ce dernier lorsque vous le déplacez ou le renommez (pour plus
d'informations sur la marche à suivre pour supprimer un fichier, voir Modification d'un
lien au niveau du site, page 495).
Si vous choisissez Invite, Dreamweaver 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.
Pour créer un fichier cache pour votre site :
1.
Choisissez Site > Gérer les sites.
La boîte de dialogue Modifier les sites s'affiche.
492
Chapitre 15: Liens et navigation
2.
Sélectionnez un site, puis cliquez sur Modifier.
La boîte de dialogue Définition du site s'ouvre.
3.
Cliquez sur l'onglet Avancé pour faire apparaître la catégorie Avancé de la boîte de dialogue
Définition du site.
4.
Sélectionnez la catégorie Infos locales dans la liste de gauche.
La boîte de dialogue Définition du site affiche les options des Infos locales.
5.
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, le cache se charge et Dreamweaver 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 celui-ci ne se charge pas et Dreamweaver ne met pas les liens à jour.
Sur les sites de grande taille, le chargement du cache peut prendre quelques minutes ;
l'essentiel de ce temps est utilisé pour comparer l'heure et la date des fichiers qui se trouvent
sur le site local à celles enregistrées dans le cache, afin de voir si le cache est périmé. 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.
Pour recréer le cache pour votre site :
■
Dans le panneau Fichiers, sélectionnez Site > Avancé > Recréer le cache du site.
Modification de liens dans la carte du site
Vous pouvez modifier la structure du site dans la carte du site, en ajoutant, modifiant ou
supprimant des liens. Dreamweaver met automatiquement à jour la carte du site pour
indiquer les modifications apportées au site.
Pour changer un lien :
1.
Dans la carte du site, sélectionnez une page dont vous souhaitez changer le lien (de sorte
que le document qui possède un lien vers cette page pointe vers une autre page), puis
procédez de l'une des manières suivantes :
■
Choisissez Site > Modifier le lien (Windows) ou Site > Affichage de la carte du site >
Modifier le lien (Macintosh).
R E M AR QU E
Utilisez le menu Site du panneau Fichiers.
Gestion des liens
493
■
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche
Contrôle enfoncée (Macintosh), puis choisissez Modifier le lien dans le menu
contextuel.
2.
Naviguez jusqu'au fichier vers lequel le lien devra pointer ou tapez une URL.
3.
Cliquez sur OK.
Pour supprimer un lien :
1.
Sélectionnez la page dans la carte du site.
2.
Procédez de l'une des manières suivantes :
■
Choisissez Site > Supprimer le lien (Windows) ou Site > Affichage de la carte du site >
Supprimer le lien (Macintosh).
REMARQUE
■
Utilisez le menu Site du panneau Fichiers.
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfoncée (Macintosh), puis choisissez Supprimer le lien dans le menu contextuel.
La suppression d'un lien ne supprime pas le fichier mais supprime le lien provenant de la
source HTML sur la page qui pointe vers le lien.
Pour ouvrir la source d'un lien :
1.
Sélectionnez un fichier dans la carte du site.
2.
Procédez de l'une des manières suivantes :
■
Choisissez Site > Ouvrir source du lien (Windows) ou Site > Affichage de la carte du
site > Ouvrir source du lien (Macintosh).
■
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfoncée (Macintosh) et choisissez Ouvrir source du lien dans le menu contextuel.
L'inspecteur Propriétés et le fichier source contenant le lien s'ouvrent dans la fenêtre de
document. Le lien y est en surbrillance.
Rubriques connexes
■
Liens entre fichiers et documents, page 480
■
Utilisation d'une carte d'arborescence de votre site, page 138
494
Chapitre 15: Liens et navigation
Modification d'un lien au niveau du site
Outre la mise à jour automatique des liens par Dreamweaver à 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.
Vous pouvez utiliser cette option à tout moment (par exemple, il se peut que les mots « au
menu cette semaine » soient liés à /menus/32.html dans tout le site et que, la semaine
suivante, vous deviez changer ces liens pour qu'ils pointent sur /menus/33.html) ; mais elle est
particulièrement utile lorsque vous désirez supprimer un fichier vers lequel pointent des liens
dans d'autres fichiers.
Pour changer un lien à l'échelle de tout le site :
1.
Sélectionnez un fichier dans l'affichage local du panneau Fichiers.
REMARQUE
2.
Si vous changez un lien de messagerie électronique, ftp, nul ou de script, vous n'avez
pas besoin de sélectionner de fichier.
Choisissez Site > Modifier le lien au niveau du site.
La boîte de dialogue Modifier le lien au niveau du site apparaît.
3.
Complétez les options de la boîte de dialogue.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
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). Le type
de lien (relatif au document ou à la racine) n'a pas d'importance. Dreamweaver met
automatiquement le lien à jour.
Gestion des liens
495
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.
REMARQUE
Ces modifications se produisant localement, vous devez supprimer manuellement le
fichier orphelin correspondant sur le site 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.
Insertion de menus de reroutage
Les menus de reroutage vous permettent d'associer des URL avec des options d'un menu
contextuel. En sélectionnant un élément de la liste, l'utilisateur est redirigé vers l'URL
sélectionnée. Ces menus sont insérés à l'aide de l'objet de formulaire Menu de reroutage.
Pour insérer un menu de reroutage :
1.
Ouvrez un document, puis placez le curseur dans la fenêtre de document.
2.
Procédez de l'une des manières suivantes :
■
Choisissez Insertion > Formulaire > Menu de reroutage.
■
Cliquez sur le bouton Menu de reroutage de la catégorie Formulaire de la barre Insérer.
La boîte de dialogue Insérer un Menu de reroutage apparaît.
3.
Complétez les options de la boîte de dialogue.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
4.
Cliquez sur OK.
Le menu de reroutage apparaît dans votre document.
496
Chapitre 15: Liens et navigation
Rubriques connexes
■
Menus de reroutage, page 478
■
Dépannage des menus de reroutage, page 498
Modification d'éléments de menu de reroutage
Pour modifier des éléments de menu de reroutage, vous pouvez changer l'ordre dans lequel les
éléments apparaissent dans la liste, modifier le fichier vers lequel pointe un élément, et 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 utiliser le panneau Comportements (voir Menu de
reroutage, page 574).
Pour modifier un menu de reroutage à l'aide de l'inspecteur Propriétés :
1.
Choisissez Fenêtre > Propriétés pour ouvrir l'inspecteur 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.
L'icône Liste / Menu apparaît dans l'inspecteur Propriétés.
3.
Dans l'inspecteur Propriétés, cliquez sur le bouton Valeurs de la liste.
La boîte de dialogue Valeurs de la liste s'affiche.
4.
Apportez les modifications requises aux éléments du menu, puis cliquez sur OK.
Rubriques connexes
■
Menus de reroutage, page 478
■
Insertion de menus de reroutage, page 496
Insertion de menus de reroutage
497
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é.
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.
Rubriques connexes
■
Menus de reroutage, page 478
■
Insertion de menus de reroutage, page 496
■
Modification d'éléments de menu de reroutage, page 497
Utilisation des barres de navigation
Une barre de navigation est composée d'une image ou d'une série d'images qui changent en
fonction des actions de l'utilisateur.
Avant d'utiliser la commande Insérer une barre de navigation, créez un ensemble d'images
pour les états d'affichage de chaque élément de navigation (il peut être utile d'imaginer un
élément de barre de navigation en tant que bouton car, lorsque celui-ci est cliqué, il amène
l'utilisateur à une autre page).
Après avoir créé une barre de navigation pour un document, vous pouvez lui ajouter des
images ou en supprimer à l'aide de la commande Modifier la barre de navigation. Cette
commande permet de modifier une image ou un ensemble d'images, de changer le fichier qui
s'ouvre lorsque l'utilisateur clique sur un élément, de sélectionner un autre cadre ou une autre
fenêtre cible pour l'ouverture de ce fichier et de réorganiser la position des images.
Rubriques connexes
■
Barres de navigation, page 478
498
Chapitre 15: Liens et navigation
Insertion d'une barre de navigation
Lorsque vous insérez une barre de navigation, vous nommez ses éléments et sélectionnez les
images à utiliser pour ces derniers.
CONSEIL
Vous pouvez créer une barre de navigation, la copier dans d'autres pages de votre site,
l'utiliser avec des cadres et modifier les comportements dans chaque page pour afficher
les différents états en fonction de la page en cours.
Pour créer une barre de navigation :
1.
Procédez de l'une des manières suivantes :
■
Sélectionnez Insertion > Objets image > Barre de navigation.
■
Dans la catégorie Commun de la barre d'insertion, cliquez sur le menu Images et
sélectionnez le bouton Barre de navigation.
La boîte de dialogue Insérer une barre de navigation apparaît.
2.
Complétez les options de la boîte de dialogue.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
3.
Cliquez sur OK.
Rubriques connexes
■
Barres de navigation, page 478
Utilisation des barres de navigation
499
Modification d'une barre de navigation
Après avoir créé une barre de navigation pour un document, vous pouvez lui ajouter ou en
supprimer des images à l'aide de l'option Modifier la barre de navigation.
Pour modifier une barre de navigation :
1.
Sélectionnez la barre de navigation de la page active.
2.
Choisissez Modifier > Barre de navigation.
La boîte de dialogue Modifier la barre de navigation apparaît.
3.
Dans la liste des éléments de la barre de navigation, sélectionnez celui à modifier.
4.
Apportez les modifications de votre choix.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
5.
Cliquez sur OK.
Rubriques connexes
■
Barres de navigation, page 478
■
Insertion d'une barre de navigation, page 499
Utilisation de cartes graphiques
Une carte graphique est une image ayant été divisée en régions, ou « zones réactives ». Lorsque
vous cliquez sur une zone réactive, une action est exécutée, telle que l'ouverture d'un nouveau
fichier.
Rubriques connexes
■
A propos des cartes graphiques, page 479
500
Chapitre 15: Liens et navigation
Insertion de cartes graphiques sur le client
Pour insérer une carte graphique sur le 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.
Pour créer une carte graphique sur le client :
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 de texte Nom de la carte, entrez un nom unique pour la carte graphique.
REMARQUE
4.
Si vous utilisez plusieurs cartes graphiques dans le même document, veillez à donner
à chaque carte un nom unique.
Pour définir les zones de la carte graphique, procédez de l'une des manières suivantes :
■
Sélectionnez l'outil Cercle et faites glisser le pointeur sur l'image pour créer une zone
réactive circulaire.
■
Sélectionnez l'outil Rectangle 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.
Complétez l'inspecteur Propriétés de la zone réactive.
Pour plus d'informations, cliquez sur le bouton Aide de l'inspecteur Propriétés.
6.
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.
Rubriques connexes
■
A propos des cartes graphiques, page 479
Utilisation de cartes graphiques
501
Modification 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 calque.
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.
Pour sélectionner plusieurs zones réactives dans une carte graphique :
1.
Utilisez le pointeur de zone réactive pour sélectionner une zone réactive.
2.
Procédez de l'une des manières 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.
Pour déplacer une zone réactive :
1.
Utilisez le pointeur de zone réactive pour sélectionner la zone réactive à déplacer.
2.
Procédez de l'une des manières suivantes :
■
Faites glisser la zone réactive vers une nouvelle zone.
■
Utilisez la touche Maj 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é.
Pour redimensionner une zone réactive :
1.
Utilisez le pointeur de zone réactive pour sélectionner la zone réactive à redimensionner.
2.
Faites glisser une poignée de sélection de la zone réactive pour modifier la taille ou la forme
de celle-ci.
Rubriques connexes
■
A propos des cartes graphiques, page 479
■
Insertion de cartes graphiques sur le client, page 501
502
Chapitre 15: Liens et navigation
Association de comportements
JavaScript à des liens
Vous pouvez associer un comportement à n'importe quel lien d'un document (voir
Application d'un comportement, page 558). Les comportements décrits ci-dessous peuvent être
très intéressants lorsque vous insérez des éléments liés dans vos documents.
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 cette action pour décrire la destination d'un lien dans la barre d'état, au
lieu d'afficher l'URL associée (voir Texte de la barre d'état, page 583).
Définir le texte de la barre d'état
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, dont sa taille, ses attributs (redimensionnable ou
non, dispose d'une barre de menu ou non, etc.), ainsi que son nom (voir Ouvrir la fenêtre
Navigateur, page 575).
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 Menu de reroutage, page 574).
Définir image barre de navigation modifie
le comportement d'une barre de navigation. Ce
comportement permet de modifier la façon dont les images s'affichent dans une barre de
navigation. Par exemple, lorsque le pointeur survole une partie de la barre de navigation,
l'affichage d'autres images de la barre de navigation ou du document peut changer (voir
Définir image barre de navigation, page 580).
Recherche de liens rompus, externes et
orphelins
Utilisez la fonction Vérifier les liens pour rechercher les éventuels liens rompus et les fichiers
non référencés (également appelés orphelins, il s'agit de fichiers toujours existant dans le site
mais vers lesquels aucun lien ne pointe) dans un fichier ouvert, dans une partie du site local ou
dans le site local tout entier.
Les seuls liens que Dreamweaver vérifie sont ceux qui pointent vers des documents au sein du
même site. Dreamweaver dresse une liste des liens externes qui apparaissent dans 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. Pour plus d'informations, voir Identification et suppression des fichiers non utilisés,
page 164.
Recherche de liens rompus, externes et orphelins
503
Pour vérifier les liens au sein du document actif :
1.
Enregistrez le fichier dans un emplacement du site Dreamweaver local.
2.
Choisissez Fichier > Vérifier la page > Vérifier les 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).
C ON S E I L
4.
Vous pouvez vérifier les fichiers orphelins lorsque vous vérifiez les liens dans un site
entier.
Pour enregistrer le rapport, cliquez sur le bouton * dans le panneau Vérificateur de lien.
REMARQUE
Le rapport sur le navigateur cible est un fichier temporaire ; il sera perdu si vous ne
l'enregistrez pas.
Pour vérifier les liens à l'intérieur d'une partie du 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 > Vérifier les liens.
Le rapport Liens brisés apparaît dans le panneau Vérificateur de lien (dans le groupe de
panneaux Résultats).
504
Chapitre 15: Liens et navigation
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).
CO NS EIL
5.
Vous pouvez vérifier les fichiers orphelins lorsque vous vérifiez les liens dans un site
entier (voir procédure suivante).
Pour enregistrer un rapport, cliquez sur le bouton Enregistrer rapport dans le panneau
Vérificateur de lien.
Pour vérifier les 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
4.
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.
Pour enregistrer un rapport, cliquez sur le bouton Enregistrer rapport dans le panneau
Vérificateur de lien.
Correction des 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.
Pour réparer des liens dans la boîte de dialogue Vérificateur de lien :
1.
Exécutez un rapport de vérification de lien (voir Recherche de liens rompus, externes et
orphelins, page 503).
Correction des liens rompus
505
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.
Tapez le chemin d'accès et le nom du fichier ou cliquez sur l'icône de dossier pour trouver
le fichier et le sélectionner.
4.
Appuyez sur Tab ou Entrée (Windows) ou Retour (Macintosh).
S'il y a d'autres liens rompus vers le même fichier, une boîte de dialogue 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. Voir Archivage et extraction de fichiers, page 149.
Pour corriger des liens dans l'inspecteur Propriétés :
1.
Exécutez un rapport de vérification de lien (voir Recherche de liens rompus, externes et
orphelins, page 503).
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 problématique, 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).
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. Les mentions L et H passent de
caractère gras à caractère normal.
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), cela signifie que Dreamweaver ne peut pas trouver le nouveau fichier
et qu'il considère toujours que le lien est rompu.
506
Chapitre 15: Liens et navigation
Ouverture des documents liés 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 de la fenêtre de document.
Pour ouvrir des documents liés dans Dreamweaver, procédez de l'une des
manières 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.
Rubriques connexes
■
Aperçu et test de page dans les navigateurs, page 408
■
Recherche de liens rompus, externes et orphelins, page 503
■
Correction des liens rompus, page 505
Ouverture des documents liés dans Dreamweaver
507
508
Chapitre 15: Liens et navigation
CHAPITRE 16
16
Utilisation d'autres
applications
Macromedia Fireworks 8 et Macromedia Flash 8 constituent des outils puissants de
développement Web conçus pour créer des images et des fichiers SWF à afficher dans des
pages Web. Vous pouvez intégrer de façon étroite Macromedia Dreamweaver 8 avec ces outils
au sein de votre processus de création.
Vous pouvez insérer des images ou des tables Fireworks et des animations Flash (fichiers SWF)
dans un document Dreamweaver. Vous pouvez également utiliser la fonction d'intégration
entre Dreamweaver et Fireworks ou Flash pour modifier une image ou une animation après
l'avoir insérée dans un document Dreamweaver.
REMARQUE
Pour qu'il soit possible d'utiliser Dreamweaver conjointement à Fireworks et à Flash, les
trois applications doivent être installées sur votre ordinateur.
Ce chapitre contient les sections suivantes :
A propos de l'intégration de Fireworks et Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . 509
Optimisation de votre environnement de travail pour Fireworks et Flash . . . . . . . 510
Utilisation de Fireworks. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .511
Utilisation de Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 524
A propos de l'intégration de Fireworks et
Flash
Grâce à l'édition Roundtrip et aux Design Notes, Dreamweaver est capable d'intégrer des
opérations avec Fireworks et Flash. L'édition Roundtrip permet de transférer de façon fiable
les mises à jour de code entre Dreamweaver et les autres applications, en préservant par
exemple les comportements de survol ou les liens vers d'autres fichiers.
509
Les Design Notes sont de petits fichiers permettant à Dreamweaver de localiser le document
source correspondant à un fichier image ou à une animation exportée. Lorsque vous exportez
des fichiers de Fireworks ou Flash directement vers un site défini par Dreamweaver, les Design
Notes qui contiennent des références au fichier de programmation PNG ou Flash (FLA) sont
automatiquement exportées vers le site avec le fichier Web (format GIF, JPEG ou SWF). Pour
plus d'informations, voir A propos des Design Notes, page 115.
Outre les informations relatives à l'emplacement, les Design Notes contiennent des
informations pertinentes sur les fichiers exportés. Lorsque vous exportez une table Fireworks,
par exemple, Fireworks rédige une Design Note pour chaque fichier d'image exporté dans la
table. Si le fichier exporté contient des zones réactives ou des images survolées, le code
JavaScript de ces éléments est inclus dans le document HTML exporté par Fireworks.
Optimisation de votre environnement de
travail pour Fireworks et Flash
Pour intégrer parfaitement Fireworks et Flash à vos tâches de développement, il convient de
définir un environnement de travail.
Pour optimiser votre environnement de travail pour Fireworks et Flash :
1.
Assurez-vous que les Design Notes sont activées pour votre site Dreamweaver.
Les Design Notes sont automatiquement activées tant que vous ne modifiez pas les
paramètres du site par défaut. Pour plus d'informations sur l'activation des Design Notes,
voir Activation et désactivation des Design Notes pour un site, page 169. Pour plus
d'informations sur le rôle des Design Notes, voir A propos de l'intégration de Fireworks et
Flash, page 509.
2.
Pour lancer Fireworks depuis Dreamweaver, définissez Fireworks comme éditeur d'image
externe principal pour Dreamweaver.
Paramétrez Fireworks comme éditeur principal des types de fichiers graphiques GIF, PNG
et JPEG. Pour plus d'informations, consultez la section Utilisation d'un éditeur d'image
externe, page 470 du guide Utilisation de Dreamweaver.
3.
Enregistrez le code source de Fireworks et Flash, et les fichiers Web dans le dossier du site
Dreamweaver défini.
De cette façon, tout utilisateur partageant le site pourra localiser le document source
lorsqu'il modifiera une image ou une table Fireworks ou une animation SWF dans
Dreamweaver.
510
Chapitre 16: Utilisation d'autres applications
4.
Effectuez l'exportation de vos fichiers d'image Fireworks vers le dossier du site
Dreamweaver.
Lorsque vous exportez un fichier GIF ou JPEG de Fireworks vers le dossier du site
Dreamweaver, Fireworks génère un dossier appelé _notes dans le même dossier. Ce dossier
contient les Design Notes nécessaires à Dreamweaver pour fonctionner avec Fireworks.
Utilisation de Fireworks
Dreamweaver et Fireworks reconnaissent et partagent de nombreuses procédures de
modifications apportées aux fichiers, parmi lesquelles celles apportées aux liens, aux cartes
graphiques, aux découpes de tables et bien plus. Réunies, les deux applications rationalisent les
tâches de développement consistant à modifier, optimiser et importer des fichiers graphiques
Web dans des pages HTML.
Insertion d'une image Fireworks
Plusieurs méthodes permettent de placer des graphiques Fireworks dans un document
Dreamweaver. Vous pouvez placer une image exportée avec Fireworks directement dans un
document Dreamweaver à l'aide de la commande Image (menu Insertion) ou vous pouvez
créer une image Fireworks à partir d'un espace réservé pour l'image Dreamweaver (voir
Utilisation de Fireworks pour modifier les espaces réservés pour les images Dreamweaver,
page 514).
Pour insérer une image Fireworks dans un document Dreamweaver :
1.
2.
Dans le document Dreamweaver, placez le point d'insertion à l'emplacement où vous
souhaitez insérer l'image, puis procédez de l'une des manières suivantes :
■
Choisissez Insertion > Image.
■
Dans la catégorie Commun de la barre Insérer, cliquez sur le bouton Image ou faites-le
glisser vers le document.
Recherchez le fichier Fireworks exporté et cliquez sur OK (Windows) ou Ouvrir
(Macintosh).
R E MA R Q U E
Si le fichier Fireworks ne se trouve pas dans le site courant de Dreamweaver, un
message vous demande si vous souhaitez copier le fichier dans le dossier racine.
Cliquez sur Oui.
Utilisation de Fireworks
511
Modification d'une image ou d'un tableau Fireworks
dans Dreamweaver
Vous pouvez lancer Fireworks depuis Dreamweaver pour modifier des images insérées dans un
document Dreamweaver. Quand vous ouvrez ou éditez une image ou une découpe d'image
faisant partie d'une table Fireworks, Dreamweaver lance Fireworks, ce qui ouvre le fichier
PNG à partir duquel l'image ou la table a été exportée.
Lorsque l'image fait partie d'une table Fireworks, vous pouvez ouvrir cette dernière pour la
modifier, à condition que le commentaire <!--fw table--> soit présent dans le code HTML. Si
le fichier PNG source a été exporté à partir de Fireworks vers un site Dreamweaver à l'aide du
paramètre Document HTML et image du style Dreamweaver, le commentaire de la table
Fireworks est automatiquement inséré dans le code HTML.
Pour lancer et modifier une image Fireworks placée dans Dreamweaver :
1.
Dans Dreamweaver, choisissez Fenêtre > Propriétés pour ouvrir l'inspecteur Propriétés, le
cas échéant.
2.
Cliquez sur une image ou une découpe d'image pour la sélectionner.
Lorsque vous sélectionnez une image exportée depuis Fireworks, l'inspecteur Propriétés
identifie la sélection comme image ou table Fireworks et affiche le nom du fichier source
PNG.
3.
Pour lancer Fireworks afin d'apporter des modifications, procédez de l'une des manières
suivantes :
■
Dans l'inspecteur Propriétés, cliquez sur Modifier.
■
Maintenez enfoncée la touche Ctrl (Windows) ou Commande (Macintosh) et doublecliquez sur l'image sélectionnée.
■
Cliquez sur l'image sélectionnée avec le bouton droit de la souris (Windows) ou en
maintenant la touche Contrôle enfoncée (Macintosh) et choisissez Modifier avec
Fireworks dans le menu contextuel.
Fireworks démarre et ouvre le fichier PNG associé pour que vous puissiez le modifier.
R E MA R Q U E
Si Fireworks ne trouve pas le fichier source, un message vous invite à le faire.
Lorsque vous travaillez dans le fichier source Fireworks, les modifications sont
enregistrées dans le fichier source et le fichier exporté, sinon seul le fichier exporté
est mis à jour.
4.
Dans Fireworks, modifiez le fichier PNG source.
5.
Une fois les modifications effectuées, cliquez sur Terminé.
512
Chapitre 16: Utilisation d'autres applications
Fireworks enregistre les modifications dans le fichier PNG, exporte l'image mise à jour (ou
le document HTML et les images) et active de nouveau Dreamweaver. Dans
Dreamweaver, l'image ou la table mise à jour apparaît.
Optimisation d'une image Fireworks depuis
Dreamweaver
Vous pouvez lancer Fireworks à partir de Dreamweaver pour modifier rapidement une image
ou une animation Fireworks placée et exportée en la redimensionnant ou en modifiant le type
de fichier, par exemple. Fireworks vous permet de modifier les paramètres d'optimisation et
d'animation, ainsi que la taille et la zone de l'image exportée.
Pour modifier les paramètres d'optimisation d'une image Fireworks placée
dans Dreamweaver :
1.
Dans Dreamweaver, sélectionnez l'image de votre choix et choisissez Commandes >
Optimiser l'image dans Fireworks.
2.
Si un message vous y invite, indiquez si un fichier Fireworks source doit être lancé pour
l'image placée.
3.
Dans Fireworks, procédez aux modifications requises dans la boîte de dialogue
d'optimisation :
4.
■
Pour modifier les paramètres d'optimisation, cliquez sur l'onglet Options. Pour plus
d'informations, voir Utilisation de Fireworks.
■
Pour modifier la taille et la zone de l'image exportée, cliquez sur l'onglet Fichier.
Une fois l'édition terminée, cliquez sur Mettre à jour.
Vous exportez ainsi l'image en adoptant les nouveaux paramètres d'optimisation, mettez à
jour le fichier GIF ou JPEG placé dans Dreamweaver et enregistrez le fichier PNG source
si un fichier source a été sélectionné.
Si vous avez modifié le format de l'image, le vérificateur de lien Dreamweaver vous invite à
mettre à jour les références à l'image. Par exemple, si vous avez modifié le format d'une
image appelée mon_image.GIF en mon_image.JPEG, toutes les références faites à
mon_image.gif sur votre site deviennent mon_image.jpg lorsque vous cliquez sur OK.
Utilisation de Fireworks
513
Utilisation de Fireworks pour modifier les espaces
réservés pour les images Dreamweaver
Vous pouvez créer un espace réservé dans un document Dreamweaver, puis lancer Fireworks
pour créer une image graphique ou une table Fireworks à y placer. Pour plus d'informations
sur l'insertion d'un espace réservé pour l'image, voir Insertion d'un espace réservé pour une
image, page 462.
Pour créer une image à partir d'un espace réservé, Dreamweaver et Fireworks doivent être
installés sur votre système.
Pour modifier un espace réservé pour l'image Dreamweaver dans Fireworks :
1.
Veillez à ce que Fireworks soit défini comme éditeur d'image des fichiers .png. Pour plus
d'informations, voir Utilisation d'un éditeur d'image externe, page 470 dans Utilisation de
Dreamweaver.
2.
Dans la fenêtre de document, cliquez sur l'espace réservé pour l'image pour le sélectionner.
3.
Procédez de l'une des manières suivantes pour lancer Fireworks et procéder à des
modifications :
■
Dans l'inspecteur Propriétés, cliquez sur Créer.
■
Appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh), puis doublecliquez sur l'espace réservé pour l'image.
■
Cliquez sur l'espace réservé pour l'image avec le bouton droit de la souris (Windows)
ou en maintenant la touche Ctrl enfoncée (Macintosh), puis sélectionnez Créer une
image dans Fireworks.
Fireworks s'ouvre en mode Edition depuis Dreamweaver.
514
Chapitre 16: Utilisation d'autres applications
4.
Utilisez les options de Fireworks pour créer l'image.
Fireworks reconnaît les paramètres suivants d'espace réservé pour l'image, définis lors de
son utilisation dans Dreamweaver : la taille de l'image correspondant à la taille du
document Fireworks, l'ID de l'image utilisée par Fireworks comme nom de document par
défaut pour le fichier source et le fichier d'exportation créé, l'alignement du texte et les
comportements reconnus par Fireworks (permutation d'image, menu contextuel, barre de
navigation et texte notamment). Fireworks reconnaît également les liens associés à l'espace
réservé pour l'image lorsque vous travaillez dans Dreamweaver.
REMARQUE
Bien que les liens ajoutés à un espace réservé pour l'image soient invisibles dans
Fireworks, ils sont néanmoins conservés. Si vous dessinez une zone réactive et que
vous ajoutez un lien dans Fireworks, le programme ne supprimera pas le lien ajouté à
l'espace réservé pour l'image dans Dreamweaver. Toutefois, si dans Fireworks vous
dessinez une découpe dans la nouvelle image, le lien sera supprimé du document
Dreamweaver lors du remplacement de l'espace réservé pour l'image.
Les paramètres suivants d'espace réservé pour l'image sont désactivés dans l'inspecteur
Propriétés correspondant puisqu'ils ne sont pas reconnus par Fireworks : alignement de
l'image, couleur, espacement vertical et horizontal et cartes.
5.
Une fois l'opération terminée, cliquez sur Terminé.
La boîte de dialogue Enregistrer sous s'affiche. Fireworks vous invite à enregistrer le fichier
PNG.
6.
Dans la zone de texte Enregistrer dans, sélectionnez le dossier défini comme dossier du site
local Dreamweaver.
Si vous avez attribué un nom à l'espace réservé lors de son insertion dans le document
Dreamweaver, Fireworks insère automatiquement ce nom dans la zone de texte Nom de
fichier. Vous pouvez modifier ce nom si vous le souhaitez.
7.
Cliquez sur Enregistrer pour enregistrer le fichier PNG.
La boîte de dialogue Exporter s'affiche. Cette boîte de dialogue vous permet d'exporter
l'image au format GIF, JPEG ou, dans le cas d'images découpées, sous la forme de
documents HTML et d'images.
8.
Sélectionnez le dossier du site local de Dreamweaver dans le champ Enregistrer dans de la
boîte de dialogue Exporter.
9.
La zone de texte Nom est automatiquement mise à jour pour adopter le nom désignant le
fichier PNG. Entrez un nouveau nom si vous le souhaitez.
10. Dans
la zone Enregistrer sous le type, sélectionnez le type de fichier(s) à exporter, par
exemple Images uniquement ou Documents HTML et images.
11.
Cliquez sur Enregistrer pour enregistrer le fichier exporté.
Utilisation de Fireworks
515
Le fichier est enregistré et Dreamweaver est à nouveau actif. Dans le document
Dreamweaver, le fichier exporté ou la table Fireworks remplace l'espace réservé pour
l'image.
Edition des menus contextuels de Fireworks dans
Dreamweaver
Vous pouvez créer un menu contextuel dans Fireworks 8, ou une version plus récente, puis le
modifier avec Dreamweaver ou Fireworks (à l'aide de l'édition Roundtrip), mais pas les deux.
Si vous modifiez vos menus dans Dreamweaver, puis dans Fireworks, vous perdez toutes les
modifications précédentes, à l'exception du texte.
Si vous préférez modifier vos menus avec Dreamweaver, vous pouvez utiliser Fireworks pour
créer le menu contextuel, puis Dreamweaver de façon exclusive pour apporter les dernières
touches au menu et le personnaliser.
Si vous préférez modifier les menus dans Fireworks, vous pouvez utiliser la fonctionnalité
d'édition Roundtrip de Dreamweaver, mais vous ne devez pas modifier les menus directement
dans Dreamweaver.
Pour utiliser l'édition Roundtrip pour modifier un menu contextuel Fireworks :
1.
Dans Dreamweaver, sélectionnez le tableau Fireworks contenant le menu contextuel, puis
cliquez sur Modifier dans l'inspecteur Propriétés.
Le fichier PNG source s'ouvre dans Fireworks.
2.
516
Dans Fireworks, modifiez ce menu avec l'éditeur correspondant, puis cliquez sur Terminé
dans la barre d'outils de Fireworks.
Chapitre 16: Utilisation d'autres applications
Fireworks renvoie le menu modifié à Dreamweaver.
Si vous avez créé un menu contextuel dans Fireworks MX 2004 ou une version plus ancienne,
vous pouvez le modifier dans Dreamweaver avec la boîte de dialogue Afficher le menu
contextuel.
Pour modifier un menu contextuel créé dans Fireworks MX 2004 ou une
version plus récente :
1.
Dans Dreamweaver, sélectionnez la zone réactive ou l'image qui déclenche le menu
contextuel.
2.
Dans le panneau Comportements (Maj+F3), double-cliquez sur Afficher le menu
contextuel dans la liste Actions.
La boîte de dialogue Afficher le menu contextuel apparaît. Le comportement Afficher le
menu contextuel vous permet de modifier ou de mettre à jour le contenu d'un menu
contextuel Fireworks basé sur du code HTML. Vous pouvez ajouter, supprimer ou
modifier les éléments de menu, les réorganiser et les positionner dans une page. Pour plus
d'informations sur la définition ou la modification des options des menus contextuels,
voir Afficher le menu contextuel, page 587.
3.
Apportez les modifications voulues dans le menu contextuel et cliquez sur OK.
Définition des préférences de lancement et de
modification des fichiers source Fireworks
Lorsque vous modifiez des images dans Fireworks, les images placées dans vos pages Web sont
normalement exportées par Fireworks depuis un fichier source PNG. Lorsque vous ouvrez
une image (« lancer ») dans Dreamweaver pour la modifier, Fireworks ouvre automatiquement
le fichier PNG source, vous invitant à préciser l'emplacement du fichier PNG si celui-ci ne
peut pas être localisé. Vous pouvez régler vos préférences sous Fireworks afin que
Dreamweaver ouvre l'image insérée, à moins que vous ne préfériez que Fireworks vous offre la
possibilité d'utiliser le fichier d'image insérée ou le fichier source Fireworks chaque fois que
vous ouvrez une image sous Dreamweaver.
REMARQUE
Dreamweaver ne reconnaît ces préférences que dans certains cas. Par exemple, vous
devez lancer et optimiser les images qui ne font pas partie d'une table Fireworks et dont
le chemin Design Notes vers un fichier PNG source est correct.
Utilisation de Fireworks
517
Pour déterminer les préférences de lancement et de modification de
Fireworks :
1.
Dans Fireworks, choisissez Edition > Préférences ou Fireworks > Préférences (Macintosh)
et cliquez sur l'onglet Lancer et Modifier (Windows) ou choisissez Lancer et Modifier dans
le menu déroulant (Macintosh).
2.
Indiquez les préférences applicables lors de la modification ou de l'optimisation d'images
Fireworks placées dans une application externe :
permet de lancer automatiquement le fichier
PNG Fireworks défini dans la Design Note comme fichier source de l'image placée. Les
mises à jour sont appliquées au fichier PNG source et à l'image placée correspondante.
Toujours utiliser le fichier PNG source
Ne jamais utiliser le fichier PNG source permet
de lancer automatiquement l'image
Fireworks placée, qu'il existe ou non un fichier PNG source. Les mises à jour sont
appliquées à l'image placée uniquement.
vous permet d'indiquer chaque fois si le fichier PNG
source doit être lancé ou non. Lorsque vous modifiez ou optimisez une image placée,
Fireworks affiche un message vous demandant si vous souhaitez lancer l'éditeur et
modifier l'image. Vous pouvez également déterminer les préférences globales de la
fonction de lancement et d'édition dans cette fenêtre d'invite.
Demander lors du lancement
Insertion de code HTML Fireworks dans un
document Dreamweaver
Dans Fireworks, la commande Exporter vous permet d'exporter et d'enregistrer des images
optimisées et des fichiers HTML dans le dossier du site Dreamweaver de votre choix. Vous
pouvez alors insérer le fichier dans Dreamweaver. Pour plus d'informations sur l'exportation
de fichiers Fireworks au format HTML, voir Utilisation de Fireworks.
Dreamweaver vous permet d'insérer dans un document du code HTML généré par Fireworks,
intégrant des images, des découpes et du code JavaScript. Vous pouvez ainsi facilement créer
des éléments de conception dans Fireworks et les insérer dans un document Dreamweaver
existant.
Pour insérer du code HTML Fireworks dans un document Dreamweaver :
1.
Dans Dreamweaver, placez le point d'insertion à l'endroit du document où vous souhaitez
placer le code HTML Fireworks.
2.
Procédez de l'une des manières suivantes :
■
518
Choisissez Insertion > Images interactives > HTML Fireworks.
Chapitre 16: Utilisation d'autres applications
■
Dans la catégorie Commun de la barre Insérer, cliquez sur le bouton Insérer HTML
Fireworks.
3.
Dans la boîte de dialogue qui s'affiche, cliquez sur Parcourir pour choisir un fichier HTML
Fireworks.
4.
Choisissez l'option Supprimer fichier après l'insertion pour placer le fichier HTML
Fireworks d'origine dans la corbeille (Windows et Macintosh) à l'issue de l'opération.
Faites appel à cette option si vous n'avez plus besoin du fichier HTML Fireworks après
l'avoir inséré. Elle n'a aucun effet sur le fichier PNG source associé au fichier HTML.
REMARQUE
5.
Si le fichier HTML se trouve sur un lecteur réseau, il est définitivement supprimé (il
n'est pas placé dans la corbeille).
Cliquez sur OK pour insérer le code HTML, ainsi que les images associées, les découpes et
le code JavaScript dans le document Dreamweaver.
Collage de code HTML Fireworks dans
Dreamweaver
Pour placer rapidement dans Dreamweaver des images et tables générées dans Fireworks,
copiez et collez directement le code HTML dans un document Dreamweaver.
Pour copier et coller du code HTML Fireworks dans Dreamweaver :
1.
Dans Fireworks, choisissez Edition > Copier le code HTML.
2.
Exécutez les instructions de l'assistant pour configurer l'exportation de votre code HTML
et des images. Lorsqu'il vous est demandé, spécifiez le dossier de votre site Dreamweaver
pour la destination des images exportées.
L'assistant exporte les images à l'endroit indiqué et copie le code HTML dans le Pressepapiers.
3.
Dans Dreamweaver, placez le point d'insertion à l'endroit du document où vous souhaitez
coller le code HTML et choisissez Edition > Coller.
Le code HTML et JavaScript associé aux fichiers Fireworks exportés est copié dans le
document Dreamweaver et tous les liens vers des images sont mis à jour.
Pour exporter et coller du code HTML Fireworks dans Dreamweaver :
1.
Dans Fireworks, choisissez Fichier > Exporter.
Utilisation de Fireworks
519
2.
Dans la boîte de dialogue Exporter, indiquez le dossier du site Dreamweaver devant
accueillir les images exportées.
3.
Dans le menu déroulant Enregistrer sous, choisissez Documents HTML et Images.
4.
Dans le menu déroulant HTML, choisissez Copier dans le Presse-papiers, puis cliquez sur
Enregistrer.
5.
Dans Dreamweaver, placez le point d'insertion à l'endroit du document où vous souhaitez
coller le code HTML, et choisissez Edition > Coller.
Le code HTML et JavaScript associé aux fichiers Fireworks exportés est copié dans le
document Dreamweaver et tous les liens vers des images sont mis à jour.
Mise à jour du code HTML Fireworks placé dans
Dreamweaver
Outre la technique de lancement et de modification décrite ci-dessus, vous pouvez faire appel
à la commande Fichier > Mettre à jour le code HTML pour mettre à jour des fichiers
Fireworks placés dans Dreamweaver. La commande Mettre à jour le code HTML vous permet
de modifier l'image PNG source dans Fireworks et de mettre à jour automatiquement le code
HTML et les fichiers d'image exportés placés dans un document Dreamweaver. Grâce à cette
commande, vous pouvez mettre à jour les fichiers Dreamweaver même si le programme est
inactif.
Pour mettre à jour du code HTML Fireworks placé dans Dreamweaver :
1.
Dans Fireworks, ouvrez le fichier PNG source et modifiez-le.
2.
Choisissez Fichier > Enregistrer.
3.
Dans Fireworks, choisissez Fichier > Mettre à jour le code HTML.
4.
Recherchez le fichier Dreamweaver qui contient le code HTML à mettre à jour, puis
cliquez sur Ouvrir.
5.
Recherchez le dossier dans lequel placer les fichiers d'image mis à jour et cliquez sur
Sélectionner (Windows) ou Choisir (Macintosh).
Fireworks met à jour le code HTML et JavaScript du document Dreamweaver. Fireworks
exporte également les images mises à jour associées au code HTML et les place dans le
dossier de destination indiqué.
Si Fireworks ne trouve pas le code HTML correspondant, il vous propose d'insérer du
nouveau code HTML dans le document Dreamweaver. Fireworks insère la section
JavaScript du nouveau code au début du document et place la table HTML ou le lien vers
l'image à la fin du document.
520
Chapitre 16: Utilisation d'autres applications
Création d'un album photos pour le Web
Vous pouvez générer un site Web de façon automatique pour présenter un album photo
présentant les images contenues dans un dossier donné. Dreamweaver utilise Fireworks pour
créer une image miniature et une image de plus grande taille pour chaque image du dossier.
Dreamweaver crée ensuite une page Web contenant toutes les miniatures, ainsi que les liens
vers les images de plus grande taille. Pour créer un album photos pour le Web, vous devez
avoir installé Dreamweaver et Fireworks 4 ou une version ultérieure sur votre système.
Avant de commencer, placez toutes les images que vous souhaitez intégrer à l'album photos
dans un dossier (il ne doit pas nécessairement se trouver sur un site). Assurez-vous également
que les noms des fichiers d'image portent les extensions suivantes : .gif, .jpg, .jpeg, .png, .psd,
.tif ou .tiff. Les images portant des extensions de fichiers non reconnues ne seront pas
intégrées à l'album.
Pour créer un album photos pour le Web :
1.
Dans Dreamweaver, choisissez Commandes > Créer un album photos pour le Web.
2.
Dans la zone Titre de l'album photos, entrez un titre. Il apparaît alors dans un rectangle
gris dans la partie supérieure de la page contenant les miniatures.
Si vous le souhaitez, vous pouvez faire figurer jusqu'à deux lignes de texte supplémentaire
sous le titre en entrant le texte correspondant dans les zones de texte Infos de sous-titre et
Autres infos.
3.
Choisissez le dossier contenant les images sources en cliquant sur le bouton Parcourir, situé
à côté de la zone de texte Dossier images sources. Choisissez (ou créez) ensuite un dossier
de destination dans lequel placer toutes les images exportées et les fichiers HTML en
cliquant sur le bouton Parcourir, situé près de la zone de texte Dossier de destination.
Ce dernier ne doit pas contenir d'album photos. Dans le cas contraire, si les images
portent les mêmes noms que celles que vous souhaitez ajouter, vous risquez d'écraser les
fichiers d'image et les miniatures présents dans le dossier de destination.
4.
Spécifiez les options d'affichage des images miniatures :
■
Choisissez une taille pour les images miniatures dans le menu déroulant Taille des
vignettes. Les images sont mises à l'échelle proportionnellement pour que les
miniatures correspondantes soient intégrées dans un carré présentant les dimensions
de pixels indiquées.
■
Pour afficher le nom de fichier de chaque image d'origine sous la miniature
correspondante, choisissez Montrer les noms de fichiers.
■
Indiquez le nombre de colonnes de la table qui affiche les miniatures.
Utilisation de Fireworks
521
5.
Choisissez un format pour les images miniatures dans le menu déroulant Format des
vignettes :
GIF WebSnap 128
crée des miniatures GIF qui utilisent une palette adaptative Web de
128 couleurs.
GIF WebSnap 256
crée des miniatures GIF qui utilisent une palette adaptative Web de
256 couleurs.
JPEG—Qualité
supérieure crée des miniatures JPEG de qualité relativement supérieure
dont la taille de fichier est plus importante.
crée des miniatures JPEG de qualité relativement inférieure dont la
taille de fichier est réduite.
JPEG—Fichier réduit
6.
Choisissez un format pour les images de grande taille dans le menu déroulant Format
graphique des photos. Une image de grande taille est générée au format spécifié pour
chaque image d'origine. Vous pouvez indiquer un format différent pour les images de
grande taille et les miniatures correspondantes.
REMARQUE
7.
La commande Créer un album photos pour le Web ne vous permet pas d'utiliser vos
fichiers image d'origine comme images de grande taille, car les formats des images
d'origine autres que GIF et JPEG risquent de ne pas s'afficher correctement dans
tous les navigateurs. Si les images d'origine sont des fichiers JPEG, les images de
grande taille qui sont générées peuvent présenter des tailles de fichier supérieures et
une qualité inférieure à celle des fichiers d'origine.
Choisissez un pourcentage d'échelle pour les images de grande taille.
En utilisant une échelle de 100 %, vous créez des images de grande taille dont le format
est identique à celui des originaux. Le pourcentage d'échelle est appliqué à toutes les
images. Par conséquent, si toutes les images d'origine ne sont pas de taille identique, vous
risquez de ne pas obtenir les résultats escomptés en les mettant à l'échelle à l'aide d'un
même pourcentage.
8.
Sélectionnez l'option Créer des pages séparées pour chaque photo afin de créer une page
Web contenant les liens de navigation Retour, Accueil et Suivant pour chaque image
source.
Si vous sélectionnez cette option, le lien vers la miniature mène aux pages de navigation.
Dans le cas contraire, le lien vers la miniature permet d'afficher directement les images de
grande taille.
9.
Cliquez sur OK pour créer les fichiers HTML et d'image de l'album photos pour le Web.
522
Chapitre 16: Utilisation d'autres applications
S'il n'est pas déjà actif, Fireworks est lancé et crée les miniatures et images de grande taille.
Ces opérations peuvent prendre quelques instants si le nombre de fichiers d'image est
important. Une fois le traitement terminé, Dreamweaver est réactivé et génère la page
contenant les miniatures.
10. Lorsqu'une
boîte de dialogue indiquant « L'album a été créé » s'affiche, cliquez sur OK.
Vous devrez peut-être attendre quelques secondes avant que la page de votre album photos
n'apparaisse. Les noms de fichiers des miniatures apparaissent dans l'ordre alphabétique.
REMARQUE
Si vous cliquez sur le bouton Annuler dans la boîte de dialogue Dreamweaver une
fois le traitement lancé, vous n'interrompez pas la procédure de création de l'album
photos, mais empêchez uniquement Dreamweaver d'afficher la page principale de
l'album photos.
Utilisation de Fireworks
523
Utilisation de Flash
Vous pouvez utiliser Dreamweaver pour définir les options d'affichage et de lecture d'une
animation Flash dans une page Web ou mettre à jour les liens présents dans l'animation. Si
Flash est installé, vous pouvez également sélectionner un fichier SWF dans un document
Dreamweaver et lancer Flash pour le modifier.
Modification de contenu Flash sous Dreamweaver
Si Flash est installé, vous pouvez sélectionner un fichier SWF dans un document
Dreamweaver et lancer Flash pour le modifier. Flash ne modifie pas directement le fichier
SWF ; il modifie le document source (fichier FLA), puis exporte à nouveau le fichier SWF.
Pour ouvrir et modifier un contenu Flash inséré à partir de Dreamweaver :
1.
Dans Dreamweaver, choisissez Fenêtre > Propriétés pour ouvrir l'inspecteur Propriétés, le
cas échéant.
2.
Dans le document Dreamweaver, procédez de l'une des manières suivantes :
■
Cliquez sur l'espace réservé du fichier SWF pour le sélectionner, puis sur Modifier
dans l'inspecteur Propriétés.
R E M A R QU E
■
524
Si Flash n'est pas installé, le bouton Modifier est désactivé.
Maintenez enfoncée la touche Ctrl (Windows) ou Commande (Macintosh) et doublecliquez sur l'espace réservé pour l'animation à modifier.
Chapitre 16: Utilisation d'autres applications
■
Cliquez sur l'animation de votre choix avec le bouton droit de la souris (Windows) ou
en maintenant la touche Contrôle enfoncée (Macintosh) et choisissez Modifier avec
Flash dans le menu contextuel.
Dreamweaver lance Flash qui tente à son tour de localiser le fichier de programmation
Flash (.FLA) correspondant au fichier SWF sélectionné. Si Flash ne peut pas localiser le
fichier de programmation Flash, un message vous invite à le faire. Vous ne pouvez pas
mettre à jour directement un fichier SWF. Vous devez modifier le fichier source et
l'exporter en tant que fichier SWF.
REMARQUE
Si le fichier FLA ou le fichier SWF est verrouillé, Dreamweaver vous demande
d'extraire le fichier du serveur, d'annuler la demande ou d'afficher le fichier.
3.
Modifiez l'animation dans Flash. La fenêtre de document indique que vous êtes en train de
modifier une animation à partir de Dreamweaver.
4.
Une fois les modifications effectuées, cliquez sur Terminé.
Flash met à jour le document de programmation Flash (fichier FLA), exporte à nouveau le
fichier d'animation (fichier SWF), se ferme et active le document Dreamweaver.
5.
Pour afficher le fichier SWF mis à jour dans le document, cliquez sur Lecture dans
l'inspecteur Propriétés ou appuyez sur la touche F12 pour afficher un aperçu de votre page
dans la fenêtre d'un navigateur.
Mise à jour des liens vers un fichier SWF
Dreamweaver vous permet de mettre à jour un lien dans une animation Flash (fichier SWF),
puis d'insérer cette modification dans le document de programmation Flash (fichier FLA).
Pour mettre à jour un lien URL dans un fichier SWF :
1.
Définissez une page d'accueil pour le site si ce n'est déjà fait.
Vous devez définir une page d'accueil pour générer une carte du site. Dans la fenêtre
Affichage de la carte du site, vous devez afficher les fichiers dépendants afin de mettre à
jour un lien dans un fichier SWF. Par défaut, la carte du site n'affiche pas les fichiers
dépendants. Pour plus d'informations sur l'affichage des fichiers dépendants, voir
Affichage et masquage des fichiers de la carte du site, page 144. Pour plus d'informations sur
l'affichage de la carte du site, voir Affichage d'une carte de site, page 138.
2.
Ouvrez la fenêtre de la carte du site.
3.
Pour afficher les fichiers dépendants, procédez de l'une des manières suivantes :
Utilisation de Flash
525
■
Choisissez Affichage > Afficher les fichiers dépendants.
■
Choisissez Affichage > Mise en forme pour ouvrir la boîte de dialogue Définition du
site, puis sélectionnez l'option Afficher les fichiers dépendants.
Le lien apparaît sous le fichier SWF.
4.
5.
Utilisez l'une des méthodes suivantes pour modifier le lien :
■
Pour modifier le lien dans le fichier SWF sélectionné, cliquez dessus avec le bouton
droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh),
puis choisissez Modifier le lien. Dans la boîte de dialogue qui s'affiche, entrez le
nouveau chemin d'accès à l'URL dans la zone de texte URL.
■
Pour mettre à jour toutes les instances du lien, choisissez Site > Modifier le lien au
niveau du site, puis, dans la zone de texte Modifier tous les liens à de la boîte de
dialogue qui s'affiche, recherchez le lien à modifier à l'aide du bouton Parcourir ou
tapez son chemin d'accès. Enfin, dans la zone de texte En liens à, recherchez la
nouvelle URL à l'aide du bouton Parcourir ou tapez son chemin d'accès.
Cliquez sur OK.
Tous les liens mis à jour par Dreamweaver dans le fichier SWF sont intégrés au document
source FLA lorsque vous procédez à une opération de lancement et de modification.
Dreamweaver consigne automatiquement toutes les modifications de lien apportées au fichier
SWF dans les Design Notes et, lorsque Flash répercute les modifications dans le fichier FLA, il
les supprime des Design Notes.
526
Chapitre 16: Utilisation d'autres applications
CHAPITRE 17
17
Ajout d'éléments audio, vidéo
et interactifs
Macromedia Dreamweaver 8 permet d'ajouter rapidement et facilement du son et des
animations à un site Web. Vous pouvez joindre des Design Notes à ces objets pour
communiquer avec votre équipe. Il est également possible d'insérer des objets de type texte ou
bouton Macromedia Flash 8 à partir de l'application Dreamweaver elle-même.
Ce chapitre contient les sections suivantes :
A propos des fichiers multimédia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .528
Insertion et modification d'objets multimédia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 530
Lancement d'un éditeur externe pour des fichiers multimédia . . . . . . . . . . . . . . . . .533
Utilisation des Design Notes (Notes de conception) avec les objets
multimédia. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .535
Insertion et modification d'un objet de bouton Flash . . . . . . . . . . . . . . . . . . . . . . . . .536
Insertion d'un objet texte Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .538
Insertion d'animations Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 539
Téléchargement et installation des éléments Flash . . . . . . . . . . . . . . . . . . . . . . . . . 540
Insertion d'éléments Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 540
Modification des attributs d'un élément Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 541
Insertion de documents FlashPaper. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 542
Insertion de contenu Flash Vidéo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .543
Insertion d'animations Shockwave. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .547
Ajout de contenu vidéo (non Flash) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .547
Ajout de son à une page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .548
Insertion du contenu d'un plug-in Netscape Navigator . . . . . . . . . . . . . . . . . . . . . . 549
Insertion d'un contrôle ActiveX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 551
Insertion d'une applet Java. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .552
Utilisation de comportements pour contrôler les objets multimédias . . . . . . . . . . .552
527
A propos des fichiers multimédia
Vous pouvez incorporer les fichiers multimédia suivants dans vos pages Dreamweaver :
animations Flash et Shockwave, QuickTime, AVI, applets Java, contrôles ActiveX et fichiers
audio de formats divers.
A propos des types de fichier Flash
Dreamweaver est fourni avec des objets Flash que vous pouvez utiliser même si Flash n'est pas
installé sur votre ordinateur. Si Flash est installé sur votre machine, voir Utilisation de Flash,
page 524 pour plus d'informations sur l'utilisation et l'intégration de ces applications.
Avant d'utiliser les commandes Flash disponibles dans Dreamweaver, il est recommandé de
connaître les différents types de fichiers Flash :
est le fichier source pour tout projet et est créé dans le programme
Flash. Ce type de fichier peut uniquement être ouvert dans Flash (il ne peut pas l'être dans
Dreamweaver ni dans des navigateurs). Vous pouvez ouvrir le fichier Flash dans Flash, puis
l'exporter en tant que fichier SWF ou SWT pour l'utiliser dans des navigateurs.
Le fichier Flash (.fla)
Le fichier d'animation Flash (.swf) est une version compressée du fichier Flash (.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. Il s'agit du type de
fichier que vous créez lors de l'utilisation des objets de bouton ou de texte Flash. Pour plus de
détails, consultez le Insertion et modification d'un objet de bouton Flash, page 536, le Insertion
d'un objet texte Flash, page 538 et le Insertion d'animations Flash, page 539.
permettent de modifier et de remplacer des
informations dans un fichier SWF Flash. Ces fichiers sont utilisés dans l'objet de bouton
Flash, ce qui vous permet de modifier le modèle avec votre propre texte ou vos propres liens
afin de créer un fichier SWF personnalisé à insérer dans votre document. Dans Dreamweaver,
ces fichiers de modèle peuvent être trouvés dans les dossiers Dreamweaver/Configuration/
Flash Objects/Flash Buttons et Flash Text.
Les fichiers de modèle Flash (.swt)
Vous pouvez également télécharger de nouveaux modèles de bouton à partir du site Web
Macromedia Exchange pour Dreamweaver (www.macromedia.com/go/
dreamweaver_exchange_fr) et les placer dans votre dossier de boutons Flash. Pour plus
d'informations sur la création de modèles de bouton, consultez l'article correspondant sur le
site : www.macromedia.com/go/flash_buttons.
528
Chapitre 17: Ajout d'éléments audio, vidéo et interactifs
est un fichier Flash SWF vous permettant de créer des
applications Web enrichies incorporées à une page Web. Les éléments Flash comportent des
paramètres personnalisables, que vous pouvez modifier pour qu'ils accomplissent diverses
fonctions. Pour plus de détails, voir les sections Insertion d'éléments Flash, page 540 et
Modification des attributs d'un élément Flash, page 541.
Le fichier d'élément Flash (.swc)
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 8 Video
Encoder ou Sorensen Squeeze) pour convertir le fichier vidéo en fichier FLV. Pour plus
d'informations, consultez le Centre des développeurs Flash Video à l'adresse suivante :
www.macromedia.com/go/flv_devcenter_fr.
Le format de fichier Flash Video (.flv)
A propos des formats de fichiers audio
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.
A propos des fichiers multimédia
529
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 plugin RealPlayer afin de lire ces fichiers.
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.
.qt, .qtm, .mov ou QuickTime
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.
Insertion et modification d'objets
multimédia
Vous pouvez insérer des fichiers SWF ou des objets Flash, des animations QuickTime ou
Shockwave, des applets Java, des contrôles ActiveX ou d'autres objets audio ou vidéo dans un
document Dreamweaver.
Pour insérer un objet multimédia dans une page :
1.
Placez le point d'insertion dans la fenêtre de document à l'endroit où vous souhaitez insérer
l'objet.
530
Chapitre 17: Ajout d'éléments audio, vidéo et interactifs
2.
Pour insérer l'objet souhaité, procédez de l'une des manières suivantes :
■
Dans la catégorie Commun de la barre Insertion, cliquez sur le bouton Médias et
sélectionnez le bouton correspondant au type d'objet que vous souhaitez insérer.
■
Choisissez l'objet approprié dans le sous-menu Insertion > Médias.
■
Si l'élément à insérer n'est pas un objet Flash, Shockwave, Applet ou ActiveX, utilisez
le bouton Plug-in Netscape Navigator (l'icône en forme de pièce de puzzle dans la
barre Insertion) pour l'insérer. Pour plus d'informations, voir Insertion du contenu d'un
plug-in Netscape Navigator, page 549.
Dans la plupart des cas, une boîte de dialogue permet alors de choisir un fichier source et
de spécifier certains paramètres de l'objet multimédia.
C ON S E I L
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 déroulant Support de la catégorie
Commun de la barre Insertion ou sélectionnez Insertion > Médias > Shockwave.
3.
Renseignez la boîte de dialogue Sélectionner un fichier ou Insérer Flash.
4.
Cliquez sur OK.
Insertion et modification d'objets multimédia
531
La boîte de dialogue Attributs d'accessibilité aux balises d'objet s'affiche si elle a été activée
dans l'écran Préférences (voir Optimisation de l'espace de travail pour la conception de pages
accessibles, page 75).
5.
Si la boîte de dialogue Attributs d'accessibilité aux balises d'objet s'affiche, entrez les
informations requises et cliquez sur OK.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
L'objet multimédia apparaît dans le document.
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.
Modification des attributs d'accessibilité d'un objet
multimédia
Si vous insérez des attributs d'accessibilité avec un objet multimédia (voir Insertion et
modification d'objets multimédia, page 530), vous pouvez modifier ces valeurs dans le
code HTML.
Pour modifier les valeurs d'accessibilité pour un objet multimédia :
1.
Dans la fenêtre de document, sélectionnez l'objet.
2.
Procédez de l'une des manières suivantes :
■
Modifiez les attributs en mode Code.
■
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfoncée (Macintosh), puis sélectionnez Modifier le code de la balise.
532
Chapitre 17: Ajout d'éléments audio, vidéo et interactifs
Lancement d'un éditeur externe pour des
fichiers multimédia
Vous pouvez lancer un éditeur externe depuis Dreamweaver pour modifier la plupart des
fichiers multimédia. Vous pouvez également décider de l'éditeur que doit lancer Dreamweaver
pour modifier le fichier.
Lancement d'un éditeur externe depuis
Dreamweaver
Vous pouvez lancer un éditeur externe depuis Dreamweaver pour modifier la plupart des
fichiers multimédia.
Pour lancer un éditeur externe depuis Dreamweaver :
1.
Assurez-vous que le type du fichier multimédia est associé à un éditeur sur votre système.
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. Pour
plus d'informations, voir Spécification de l'éditeur à lancer depuis Dreamweaver, page 534.
2.
Double-cliquez sur le fichier multimédia dans le panneau Site pour lancer l'éditeur externe
et ouvrir le fichier.
L'éditeur qui est exécuté lorsque vous double-cliquez sur le fichier du panneau Site 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
(Macromedia Fireworks ou autre).
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 Site, 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.
Lancement d'un éditeur externe pour des fichiers multimédia
533
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.
Pour indiquer explicitement les é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 (+), audessus 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 Site), 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.
Pour ajouter 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 (+), audessus de la liste Editeurs et renseignez la boîte de dialogue qui s'affiche.
534
Chapitre 17: Ajout d'éléments audio, vidéo et interactifs
Pour supprimer 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
R E M A R QU E
L'annulation de la suppression d'un type de fichier étant impossible, soyez prudent
lors d'une telle opération.
Utilisation des Design Notes (Notes de
conception) avec les objets multimédia
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. Pour plus d'informations sur l'utilisation des
Design Notes, voir Stockage des informations sur les fichiers dans des Design Notes, page 169.
Pour ajouter une Design Note à un objet multimédia :
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 (voir
Activation et désactivation des Design Notes pour un site, page 169).
2.
Cliquez sur Design Notes dans le menu contextuel.
3.
Entrez les informations souhaitées dans la Design Note.
CONSEIL
Vous pouvez également ajouter une Design Note à un objet multimédia à partir du
panneau Site en sélectionnant le fichier, en affichant le menu contextuel, puis en
choisissant l'option Design Notes dans ce dernier.
Utilisation des Design Notes (Notes de conception) avec les objets multimédia
535
Insertion et modification d'un objet de
bouton Flash
Vous pouvez créer, insérer et modifier des boutons Flash dans vos documents tout en
travaillant sous Dreamweaver ; il n'est pas nécessaire de disposer de Macromedia Flash.
L'objet de bouton Flash est un bouton pouvant être mis à jour. Il est basé sur un modèle
Flash. Vous pouvez personnaliser un objet de bouton Flash en ajoutant du texte, une couleur
d'arrière-plan et des liens vers d'autres fichiers.
Création et insertion d'un bouton Flash
Vous pouvez créer et insérer des boutons Flash dans vos documents lorsque les modes
Création ou Code sont activés.
REMARQUE
Vous devez enregistrer le document avant d'insérer un objet de bouton ou de texte
Flash.
Pour insérer un objet de bouton Flash :
1.
Dans la fenêtre de document, placez le point d'insertion à l'endroit où vous voulez insérer
le bouton Flash.
2.
Pour ouvrir la boîte de dialogue Insertion d'objets Flash, procédez de l'une des manières
suivantes :
■
Dans la catégorie Commun de la barre Insertion, choisissez Support et cliquez sur
l'icône Bouton Flash.
■
Choisissez Insertion > Médias > Bouton Flash.
536
Chapitre 17: Ajout d'éléments audio, vidéo et interactifs
La boîte de dialogue Insérer le bouton Flash s'affiche.
3.
Renseignez la boîte de dialogue Insérer le bouton Flash, et cliquez sur Appliquer ou OK
pour insérer le bouton Flash dans la fenêtre de document.
CONSEIL
Pour afficher un aperçu du bouton en mode Création, cliquez sur Appliquer. La boîte
de dialogue reste ouverte et vous pouvez afficher un aperçu du bouton dans votre
document.
Modification d'un objet de bouton Flash
Vous pouvez modifier les propriétés et le contenu d'un objet de bouton Flash.
Pour modifier un objet de bouton Flash :
1.
Dans la fenêtre de document, cliquez sur l'objet de bouton Flash pour le sélectionner.
2.
Ouvrez l'inspecteur Propriétés, le cas échéant.
L'inspecteur Propriétés affiche les propriétés du bouton Flash. Il permet de modifier les
attributs HTML du bouton, tels que la largeur, la hauteur et la couleur d'arrière-plan.
3.
4.
Pour apporter des modifications au contenu, affichez la boîte de dialogue Insérer le bouton
Flash en utilisant l'une des méthodes suivantes :
■
Double-cliquez sur l'objet de bouton Flash.
■
Cliquez sur le bouton Modifier dans l'inspecteur Propriétés.
■
Cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Contrôle
enfoncée (Macintosh), puis choisissez Modifier dans le menu contextuel.
Dans la boîte de dialogue Insérer le bouton Flash, modifiez le contenu des zones indiquées
plus haut (voir Insertion et modification d'un objet de bouton Flash, page 536.)
Insertion et modification d'un objet de bouton Flash
537
Dans la fenêtre Création, vous pouvez redimensionner l'objet à l'aide des poignées de
redimensionnement. Vous pouvez rendre à l'objet sa taille d'origine en sélectionnant
Rétablir la taille dans l'inspecteur Propriétés (voir Redimensionnement d'une image,
page 465) .
Lecture d'un objet de bouton Flash dans le document
Vous pouvez prévisualiser un bouton Flash dans la fenêtre de document Dreamweaver.
Pour afficher l'objet de bouton Flash dans la fenêtre de document :
1.
En mode Création, sélectionnez l'objet de bouton Flash dans le document.
2.
Dans l'inspecteur Propriétés, cliquez sur Lecture.
3.
Cliquez sur le bouton Arrêt pour arrêter la prévisualisation.
REMARQUE
Vous ne pouvez pas modifier l'objet de bouton Flash pendant sa lecture.
Il est toujours judicieux d'afficher un aperçu du document dans le navigateur pour obtenir
une représentation exacte du bouton Flash.
Insertion d'un objet texte Flash
L'objet de texte Flash permet de créer et d'insérer un fichier SWF Flash contenant
uniquement du texte. Vous pouvez ainsi créer une petite animation graphique vectorielle avec
les polices et le texte de votre choix.
Pour insérer un objet de texte Flash :
1.
Dans la fenêtre de document, placez le point d'insertion là où vous souhaitez insérer le texte
Flash.
2.
Pour ouvrir la boîte de dialogue Insérer le texte Flash, procédez de l'une des manières
suivantes :
■
Dans la catégorie Commun de la barre Insertion, choisissez Médias et cliquez sur
l'icône Texte Flash.
■
Choisissez Insertion > Médias > Texte Flash.
538
Chapitre 17: Ajout d'éléments audio, vidéo et interactifs
La boîte de dialogue Insérer le texte Flash s'affiche.
3.
Renseignez la boîte de dialogue Insérer le texte Flash, et cliquez sur Appliquer ou OK pour
insérer le texte Flash dans la fenêtre de document.
Si vous cliquez sur le bouton Appliquer, la boîte de dialogue reste ouverte et vous pouvez
prévisualiser le texte dans le document.
Pour modifier ou lire l'objet de texte Flash, suivez la même procédure que pour un bouton
Flash (voir Modification d'un objet de bouton Flash, page 537).
Insertion d'animations Flash
Vous pouvez utiliser Dreamweaver pour insérer des animations Flash dans vos pages.
Pour insérer un fichier SWF (animation Flash) :
1.
2.
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 de la barre Insertion, choisissez Médias et cliquez sur
l'icône Flash.
■
Choisissez Insertion > Médias > Flash.
Dans la boîte de dialogue qui s'affiche, sélectionnez un fichier d'animation Flash (.swf).
Un espace réservé Flash s'affiche dans la fenêtre de document (contrairement aux objets de
texte et de bouton Flash). Pour plus d'informations sur la définition des propriétés d'un
fichier SWF Flash, sélectionnez l'espace réservé, puis cliquez sur le bouton d'aide de
l'inspecteur Propriétés.
Insertion d'animations Flash
539
Pour afficher l'aperçu du contenu Flash dans la fenêtre de document :
1.
Dans cette fenêtre, cliquez sur l'espace réservé pour Flash afin de sélectionner le contenu
Flash à prévisualiser.
2.
Dans l'inspecteur Propriétés, cliquez sur le bouton Lecture. Cliquez sur le bouton Arrêt
pour stopper la prévisualisation. Vous pouvez également prévisualiser le contenu Flash dans
un navigateur en appuyant sur la touche F12.
C O N S E IL
Pour prévisualiser tout le contenu Flash dans une page, appuyez sur les touches
Ctrl+Alt+Maj+P (Windows) ou Maj+Option+Commande+P (Macintosh). Tous les
objets et les fichiers SWF Flash sont définis sur le mode de lecture.
Téléchargement et installation des
éléments Flash
Avant d'utiliser des éléments Flash dans vos pages Web, vous devez commencer par les ajouter
à Dreamweaver à l'aide du logiciel Extension Manager. Le logiciel Extension Manager est une
application indépendante permettant d'installer et de gérer les extensions dans les applications
Macromedia. Vous pouvez lancer Extension Manager à partir de Dreamweaver en choisissant
Commandes > Gérer les extensions.
Pour rechercher les éléments Flash de Dreamweaver les plus récents, consultez le site Web de
Macromedia Exchange, à l'adresse suivante :www.macromedia.com/go/
dreamweaver_exchange_fr. Sur ce site, vous pouvez vous connecter et télécharger des éléments
Flash et d'autres extensions Dreamweaver (un grand nombre d'entre elles sont gratuites),
participer à des forums de discussion, visualiser les rapports et analyses des utilisateurs et
installer et exploiter Extension Manager. Vous devez installer Extension Manager avant de
pouvoir installer de nouveaux éléments Flash ou d'autres extensions Dreamweaver.
Pour plus d'informations concernant l'utilisation d'Extension Manager afin d'installer des
éléments Flash (ainsi que d'autres extensions Dreamweaver), voir Ajout d'extensions dans
Dreamweaver, page 83.
Insertion d'éléments Flash
Dreamweaver vous permet d'insérer des éléments Flash dans vos documents. Les éléments
Flash vous permettent de créer aisément et rapidement des applications Web enrichies à l'aide
d'éléments précréés. Pour plus d'informations sur les éléments Flash et la façon de les utiliser
dans vos pages Web, voir A propos des types de fichier Flash, page 528.
540
Chapitre 17: Ajout d'éléments audio, vidéo et interactifs
Pour insérer un élément Flash :
1.
Dans la fenêtre de document, placez le point d'insertion à l'endroit où vous souhaitez
insérer un élément Flash et procédez de l'une des manières suivantes :
■
Dans la catégorie Eléments Flash de la barre Insertion, cliquez sur l'icône de l'élément
Flash que vous souhaitez insérer.
■
Sélectionnez Insertion > Médias > nom de l'élément Flash.
Dreamweaver inclut un élément Flash appelé Visualiseur d'images.
La boîte de dialogue Enregistrer l'élément Flash s'affiche alors.
2.
Tapez le nom de fichier choisi pour l'élément Flash et enregistrez-le à l'endroit voulu de
votre site.
3.
Cliquez sur OK.
L'espace réservé à l'élément Flash apparaît dans le document. Vous pouvez modifier les
propriétés de l'élément Flash à l'aide des inspecteurs de balises ou de propriétés.
4.
Choisissez Fichier > Aperçu dans le navigateur pour afficher un aperçu de l'élément Flash.
Modification des attributs d'un élément
Flash
Il est possible de modifier les attributs d'un élément Flash à l'aide des inspecteurs de balises ou
de propriétés.
Pour modifier les attributs d'un élément Flash :
1.
Dans la fenêtre de document, effectuez l'une des procédures suivantes :
■
En mode Création, sélectionnez l'élément Flash.
■
En mode Code, cliquez n'importe où sur le nom de l'élément Flash ou sur son
contenu.
2.
Ouvrez l'Inspecteur de balises si ce n'est déjà fait (Fenêtre > Inspecteur de balises).
3.
Modifiez les attributs de l'élément Flash à l'aide de l'Inspecteur de balises et de l'inspecteur
Propriétés.
4.
Pour que les modifications apportées soient prises en compte dans votre document,
appuyez sur la touche Entrée (Windows) ou Retour (Macintosh) ou cliquez à un autre
endroit de l'Inspecteur de balises.
Pour plus d'informations, cliquez sur le bouton Aide de l'Inspecteur de balises.
Modification des attributs d'un élément Flash
541
Insertion de documents FlashPaper
Vous pouvez insérer des documents Macromedia FlashPaper dans vos pages Web. Lorsqu'une
page contenant le document FlashPaper est ouverte dans un navigateur, l'utilisateur peut
parcourir l'ensemble des pages du document FlashPaper sans charger de nouvelles pages Web.
L'utilisateur peut également effectuer une recherche dans le document, l'imprimer, l'agrandir
et le réduire.
Pour plus d'informations sur FlashPaper, consultez le site Web de Macromedia à l'adresse
suivante : www.macromedia.com/go/flashpaper_fr.
Pour insérer un document FlashPaper dans une page Web :
1.
Dans la fenêtre Document, placez le point d'insertion à l'endroit où vous souhaitez afficher
le document FlashPaper, puis sélectionnez Insertion > Médias > FlashPaper.
2.
Dans la boîte de dialogue Insérer FlashPaper, sélectionnez un document FlashPaper.
3.
Si nécessaire, spécifiez les dimensions de l'objet FlashPaper sur la page Web en donnant sa
largeur et sa hauteur en pixels.
FlashPaper redimensionne le document pour occuper la largeur de la page.
4.
Cliquez sur OK pour insérer le document dans la page.
Dans la mesure où un document FlashPaper est un objet Flash, un espace réservé Flash
s'affiche sur la page.
5.
Pour obtenir un aperçu du document FlashPaper, cliquez sur l'espace réservé, puis cliquez
sur le bouton Lire dans l'inspecteur Propriétés.
Cliquez sur le bouton Arrêt pour arrêter la prévisualisation. Vous pouvez également
prévisualiser le document dans un navigateur en appuyant sur la touche F12. La barre
d'outils FlashPaper du navigateur dispose de fonctionnalités complètes.
C ON S E I L
6.
Pour prévisualiser tout le contenu Flash dans une page, appuyez sur les touches
Ctrl+Alt+Maj+P (Windows) ou Maj+Option+Commande+P (Macintosh). Tous les
objets et les fichiers SWF Flash sont définis sur le mode de lecture.
Si nécessaire, définissez d'autres propriétés dans l'inspecteur Propriétés.
En tant qu'objet Flash, l'objet FlashPaper partage l'inspecteur Propriétés de l'objet Flash.
Pour plus d'informations sur la définition des propriétés, cliquez sur le bouton Aide de
l'inspecteur Propriétés.
542
Chapitre 17: Ajout d'éléments audio, vidéo et interactifs
Insertion de contenu Flash Vidéo
Dreamweaver permet d'insérer facilement du contenu Flash Video dans vos pages Web sans
avoir recours à l'outil de programmation Flash. Dreamweaver insère le composant Flash
Video, qui affiche le contenu vidéo Flash sélectionné, ainsi qu'une série de commandes de
lecture, lorsqu'il est visualisé dans un navigateur.
Elle aborde les sujets suivants :
■
A propos de Flash Video, page 543
■
Insertion d'un document Flash Video, page 544
■
Détection de la version de Flash Player pour afficher le contenu Flash Video, page 545
■
Modification et suppression d'un composant Flash Video, page 546
Pour plus d'informations, visitez le Centre des développeurs Flash Video à l'adresse suivante :
www.macromedia.com/go/flv_devcenter_fr.
A propos de Flash Video
Dreamweaver dispose des options suivantes pour proposer des documents Flash Video aux
visiteurs de votre site :
Vidéo en téléchargement progressif télécharge le fichier vidéo Flash (FLV) sur le disque dur
des visiteurs du site, puis entame sa lecture. Contrairement aux méthodes traditionnelles de
diffusion 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.
Insertion de contenu Flash Vidéo
543
Vidéo en flux continu diffuse en continu le contenu vidéo Flash et le lit sur une page Web
suite à 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 à
Macromedia Serveur de communication Flash.
Vous devez disposer d'un fichier Flash Video (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.
■
Si vous avez créé la vidéo avec le codec Sorenson Squeeze, les visiteurs du site nécessitent
Flash Player 7 ou une version plus récente pour lire les vidéo en téléchargement progressif ;
ils doivent disposer de Flash Player 6.0.79 ou d'une version plus récente pour lire les
vidéos en flux continu.
■
Si vous avez créé votre vidéo avec le codec On2, les visiteurs de votre site nécessitent Flash
Player 8 ou une version plus récente.
Après avoir inséré le fichier Flash Video dans une page, vous pouvez insérer du code dans cette
page pour déterminer si l'utilisateur dispose de la version de Flash Player requise pour afficher
le document Flash Video. S'il ne dispose pas de la bonne version, il lui est alors recommandé
de télécharger la dernière version de Flash Player. Pour plus d'informations, voir Détection de
la version de Flash Player pour afficher le contenu Flash Video, page 545.
Pour plus d'informations sur Flash, consultez le Centre des développeurs Flash Video à
l'adresse suivante : www.macromedia.com/go/flv_devcenter_fr.
Rubriques connexes
■
Détection de la version de Flash Player pour afficher le contenu Flash Video, page 545
■
Modification et suppression d'un composant Flash Video, page 546
Insertion d'un document Flash Video
Vous pouvez utiliser Dreamweaver pour insérer du contenu Flash Video dans vos pages. Vous
devez disposer d'un fichier Flash Video (FLV) codé avant de commencer. Pour plus
d’informations, consultez la section A propos des types de fichier Flash, page 528.
Pour insérer un document Flash Video dans une page Web :
1.
Sélectionnez Insertion > Médias > Flash Video.
2.
Dans la boîte de dialogue Insérer un fichier Flash Video, choisissez Vidéo en
téléchargement progressif dans le menu Type de vidéo.
Pour plus d'informations sur ces deux options, voir A propos de Flash Video, page 543.
544
Chapitre 17: Ajout d'éléments audio, vidéo et interactifs
3.
Renseignez les autres sections de la boîte de dialogue selon les besoins.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
L'une des options permet d'insérer du code de détection de la version requise de Flash
Player et de suggérer à l'utilisateur de télécharger ce logiciel, si nécessaire. Pour plus
d'informations, voir Détection de la version de Flash Player pour afficher le contenu Flash
Video, page 545.
4.
Cliquez sur OK.
Rubriques connexes
■
Modification et suppression d'un composant Flash Video, page 546
Détection de la version de Flash Player pour afficher
le contenu Flash Video
Après avoir inséré le fichier Flash Video dans une page, vous pouvez insérer du code dans cette
page pour déterminer si l'utilisateur dispose de la version de Flash Player requise pour afficher
le document Flash Video. S'il ne dispose pas de la bonne version, il lui est alors recommandé
de télécharger la dernière version de Flash Player.
Une autre version de Flash Player peut être requise pour afficher du contenu Flash Video selon
le codec utilisé pour créer la vidéo. Si vous avez créé la vidéo avec le codec Sorenson Squeeze,
les visiteurs du site nécessitent Flash Player 7 ou une version plus récente pour lire les vidéo en
téléchargement progressif ; ils doivent disposer de Flash Player 6.0.79 ou d'une version plus
récente pour lire les vidéos en flux continu. Si vous avez créé votre vidéo avec le codec On2, les
visiteurs de votre site nécessitent Flash Player 8 ou une version plus récente.
Pour insérer le code de détection de la version de Flash Player :
1.
Lors de l'insertion du contenu Flash Video dans une page, sélectionnez l'option Inviter les
utilisateurs à télécharger Flash Player si nécessaire de la boîte de dialogue Insertion d'une
vidéo Flash.
Insertion de contenu Flash Vidéo
545
Si le contenu Flash Video figure déjà sur votre page, supprimez-le et insérez-le de nouveau
en vous assurant que cette option est bien sélectionnée.
REMARQUE
2.
Si vous avez inséré un autre contenu Flash Video nécessitant une version plus
récente de Flash Player, le code de détection suggérera à l'utilisateur de la
télécharger.
Acceptez le message d'avertissement par défaut ou créez votre propre message.
Si vous décidez de supprimer le contenu Flash Video de votre page, vous n'avez plus besoin du
code de détection. Vous pouvez alors utiliser Dreamweaver pour le supprimer.
Pour supprimer le code de détection de la version de Flash Player :
■
Sélectionnez Commandes > Supprimer la détection Flash Video.
Rubriques connexes
■
Insertion d'un document Flash Video, page 544
Modification et suppression d'un composant Flash
Video
Pour modifier le paramétrage du contenu Flash Video dans votre page Web, vous devez soit
sélectionner l’espace réservé du composant Flash Video dans la fenêtre du document
Dreamweaver et utiliser l’inspecteur Propriétés, soit supprimer le composant Flash Video et le
réinsérer en choisissant Insertion > Médias > Flash Video.
Pour modifier le composant Flash Video :
1.
Dans la fenêtre du document Dreamweaver, sélectionnez l'espace réservé pour le
composant Flash Video en cliquant sur l’icône Flash Video dans le centre de l’espace
réservé.
2.
Ouvrez l'inspecteur Propriétés (Fenêtre> Propriétés).
3.
Effectuez les modifications voulues.
546
Chapitre 17: Ajout d'éléments audio, vidéo et interactifs
Les options de l’inspecteur Propriétés sont semblables à celles de la boîte de dialogue
Insertion d'une vidéo Flash. Pour plus d'informations, cliquez sur le bouton Aide de
l'inspecteur Propriétés.
R E M A R QU E
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, vous devez supprimer le composant Flash Video, puis le réinsérer en
choisissant Insertion > Médias > Flash Video.
Pour supprimer le composant Flash Video :
■
Dans la fenêtre du document Dreamweaver, sélectionnez l’espace réservé pour le
composant Flash Video et appuyez sur la touche Suppr.
Rubriques connexes
■
Insertion de contenu Flash Vidéo
Insertion d'animations Shockwave
Vous pouvez utiliser Dreamweaver pour insérer des animations Shockwave dans vos
documents. Shockwave, la norme Macromedia 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 Macromedia Director, ainsi que leur lecture dans la plupart des navigateurs.
Pour insérer une animation Shockwave :
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 de la barre Insertion, cliquez sur le bouton Support et
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.
Ajout de contenu vidéo (non Flash)
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.
Ajout de contenu vidéo (non Flash)
547
Pour inclure une petite séquence vidéo téléchargeable par les utilisateurs de
votre page :
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.
Pour plus d'informations à ce sujet, voir Insertion du contenu d'un plug-in Netscape Navigator,
page 549.
REMARQUE
L'utilisateur doit télécharger une application d'aide pour visualiser les formats lus en
transit, comme RealMedia, QuickTime et Windows Media.
Ajout de son à une page
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. Pour plus d'informations, voir A
propos des formats de fichiers audio, page 529. 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.
REMARQUE
Le traitement des fichiers est très différent et incohérent suivant les navigateurs. Vous
pouvez ajouter un fichier audio à un fichier SWF Flash, puis incorporer le fichier SWF
pour assurer une meilleure cohérence.
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.
Pour créer un lien vers un fichier audio :
1.
Sélectionnez le texte ou l'image à utiliser comme lien vers le fichier audio.
548
Chapitre 17: Ajout d'éléments audio, vidéo et interactifs
2.
Dans l'inspecteur Propriétés, cliquez sur l'icône de dossier 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 son
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.
C O N S E IL
Lorsque vous incorporez des fichiers sons à 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.
Pour incorporer un fichier 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 de la barre Insertion, cliquez sur le bouton Support et
sélectionnez l'icône du plug-in.
■
Sélectionnez Insertion > Médias > Plug-in.
Pour plus d'informations sur l'objet Plug-in, voir Insertion du contenu d'un plug-in
Netscape Navigator, page 549.
2.
Dans l'inspecteur Propriétés, cliquez sur l'icône de dossier pour rechercher le fichier audio
ou tapez le nom et le chemin d'accès au fichier dans la zone Lien.
3.
Entrez la largeur et la hauteur en saisissant les valeurs dans les zones de texte appropriées 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.
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.
Insertion du contenu d'un plug-in Netscape Navigator
549
Insertion du contenu d'un plug-in dans votre page
Votre page peut renfermer du contenu qui s'exécutera dans un plug-in du navigateur de
l'utilisateur.
Pour insérer le contenu d'un plug-in Netscape Navigator :
1.
2.
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 de la barre Insertion, choisissez Support et cliquez sur
l'icône du plug-in.
■
Sélectionnez Insertion > Médias > Plug-in.
Dans la boîte de dialogue qui s'affiche, sélectionnez un fichier de contenu pour un plug-in
Netscape Navigator.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
Lecture de plug-ins dans la fenêtre de document
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.
Pour lire des animations dans le mode Création, les plug-ins adéquats doivent être installés sur
votre ordinateur.
Pour lire le contenu du plug-in dans la fenêtre de document :
1.
Insérez un ou plusieurs éléments multimédia en choisissant la commande Insertion >
Médias > Shockwave, Insertion > Médias > Flash ou Insertion > Médias > Plug-in.
2.
Procédez de l'une des manières suivantes :
■
550
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.
Chapitre 17: Ajout d'éléments audio, vidéo et interactifs
■
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.
Pour arrêter 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.
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 plug-ins 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.
Insertion d'un contrôle ActiveX
551
Pour insérer du contenu de contrôle ActiveX :
1.
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 de la barre Insertion, cliquez sur la flèche de défilement du
bouton Support et sélectionnez l'icône ActiveX.
■
Dans la catégorie Commun de la barre Insertion, cliquez sur la flèche de défilement du
bouton Support et sélectionnez l'icône ActiveX. Lorsque l'icône ActiveX s'affiche dans
la barre 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.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
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.
Pour insérer une applet Java :
1.
2.
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 de la barre Insertion, cliquez sur la flèche de défilement du
bouton Support et sélectionnez l'icône Applet.
■
Choisissez Insertion > Médias > Applet.
Dans la boîte de dialogue qui s'affiche, sélectionnez un fichier contenant une applet Java.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
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 Flash (voir Contrôler Shockwave ou
Flash, page 568).
552
Chapitre 17: Ajout d'éléments audio, vidéo et interactifs
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 (voir Lire le son, page 577).
Lire le son
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.
Pour plus d'informations, voir Vérifier le plug-in, page 566.
Vérifier le plug-in
Utilisation de comportements pour contrôler les objets multimédias
553
554
Chapitre 17: Ajout d'éléments audio, vidéo et interactifs
CHAPITRE 18
18
Utilisation des
comportements JavaScript
Les comportements de Macromedia Dreamweaver 8 insèrent du code JavaScript dans les
documents pour permettre aux visiteurs d'une page Web de la modifier ou d'effectuer
certaines tâches. Un comportement est la combinaison d'un événement et d'une action
déclenchée par cet événement. Dans le panneau Comportements, vous pouvez ajouter un
comportement à une page en spécifiant une action, puis l'événement qui déclenche cette
action.
R E M AR QU E
Le code de comportement est un code JavaScript côté client, c'est-à-dire qu'il
s'exécute sur des navigateurs, mais pas sur des serveurs.
Les événements sont en réalité des messages générés par les navigateurs, indiquant qu'un
utilisateur a fait quelque chose sur votre page. Par exemple, lorsqu'un utilisateur place le
pointeur sur un lien, le navigateur génère un événement onMouseOver pour ce lien, puis
vérifie s'il existe un code JavaScript (spécifié dans la page affichée) qu'il est censé appeler
lorsqu'il génère cet événement pour ce lien. Ces événements sont définis pour différents
éléments de la page ; par exemple, dans la plupart des navigateurs, onMouseOver et onClick
sont des événements associés à des liens, tandis que onLoad est un événement associé à des
images et à la section body du document.
Une action consiste en un code JavaScript pré-rédigé qui effectue une tâche spécifique,
comme ouvrir une fenêtre de navigateur, afficher ou masquer un calque, diffuser un son ou
arrêter une animation Macromedia Shockwave. Les actions proposées dans Dreamweaver sont
soigneusement rédigées par les ingénieurs Dreamweaver afin d'assurer une compatibilité internavigateurs maximale.
555
Si vous avez associé un comportement à un élément de la page, lorsque l'événement spécifié a
lieu pour cet élément, le navigateur appelle l'action (le code JavaScript) associée à cet
événement (les événements disponibles pour déclencher une action donnée varient d'un
navigateur à l'autre). Par exemple, si vous associez l'action Message contextuel à un lien et
spécifiez que l'action sera déclenchée par l'événement onMouseOver, votre message s'affiche
dans une boîte de dialogue lorsqu'un utilisateur pointe la souris sur ce lien dans le navigateur.
Un événement unique peut déclencher plusieurs actions différentes et vous pouvez définir
l'ordre d'exécution de ces actions.
Dreamweaver propose plus d’une vingtaine d'actions de comportement ; des actions
supplémentaires sont disponibles sur le site Web de Macromedia Exchange, ainsi que sur les
sites d'autres développeurs (voir Téléchargement et installation de comportements créés par des
développeurs indépendants, page 562). Vous pouvez également écrire vos propres actions de
comportement si vous maîtrisez le langage JavaScript. Pour plus d'informations sur la
rédaction d'actions de comportement, voir Extension de Dreamweaver (Aide > Extension de
Dreamweaver).
REMARQUE
Les termes comportement et action appartiennent à la terminologie Dreamweaver et
non à la terminologie HTML. Du point de vue du navigateur, une action est un élément
de code JavaScript comme un autre.
Ce chapitre contient les sections suivantes :
Utilisation du panneau Comportements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .556
A propos des événements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .557
Application d'un comportement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .558
Association d'un comportement à du texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 559
Modification d'un comportement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 560
Actualisation d'un comportement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 561
Création de nouvelles actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .562
Téléchargement et installation de comportements créés par des développeurs
indépendants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .562
Utilisation des actions de comportement livrées avec Dreamweaver . . . . . . . . . .563
Utilisation du panneau Comportements
Utilisez le panneau Comportements pour associer des comportements à des éléments de la
page (plus précisément aux balises) et pour modifier les paramètres des comportements
précédemment associés.
556
Chapitre 18: Utilisation des comportements JavaScript
Pour ouvrir le panneau Comportement :
■
Choisissez Fenêtre > Comportements.
Les comportements déjà associés à l'élément de la page actuellement sélectionnée sont
répertoriés dans la liste de comportements (la zone principale du panneau), établie par
événement et par ordre alphabétique. Si un même événement est associé à plusieurs actions,
ces dernières sont exécutées dans l'ordre dans lequel elles apparaissent dans la liste. Si aucun
comportement n'apparaît dans la liste, cela signifie qu'aucun comportement n'est associé à
l'élément sélectionné.
Pour plus d'informations sur les options du panneau Comportements, choisissez Aide dans le
menu Options qui se trouve dans la barre de titre du groupe de panneaux.
A propos des événements
Chaque navigateur génère une série d'événements que vous pouvez associer aux actions
répertoriées dans le menu contextuel Actions (+) du panneau Comportements. Lorsqu'un
visiteur de votre page Web déclenche une action interactive avec celle-ci, en cliquant sur une
image par exemple, le navigateur génère un événement. Cet événement permet d'appeler une
fonction JavaScript exécutant une action quelconque. Certains événements peuvent aussi être
générés sans interaction de la part de l'utilisateur, par exemple lorsque vous configurez la page
pour qu'elle se recharge automatiquement toutes les 10 secondes. Dreamweaver intègre un
certain nombre d'actions courantes que vous pouvez déclencher à l'aide de ces événements.
Pour obtenir les noms et descriptions des événements fournis par chacun des navigateurs, voir
le centre de support de Dreamweaver à l'adresse http://www.macromedia.com/go/
dreamweaver_support_fr/.
Différents événements apparaissent dans le menu contextuel Evénements, selon l'objet
sélectionné et les navigateurs spécifiés dans le menu déroulant Afficher les événements pour.
Pour savoir quels sont les événements pris en charge par un navigateur spécifique pour un
élément de page donné, insérez l'élément de la page dans votre document et associez-lui un
comportement, puis reportez-vous au menu contextuel Evénements dans le panneau
Comportements. Certains événements peuvent apparaître en grisé (désactivés) si les objets
pertinents n'existent pas encore dans la page ou si l'objet sélectionné ne peut pas recevoir
d'événements. Si les événements désirés ne s'affichent pas, vérifiez que vous avez sélectionné
l'objet correct ou modifiez les navigateurs cibles dans le menu déroulant Afficher les
événements pour.
A propos des événements
557
Si vous associez un comportement à une image, certains événements (par exemple
onMouseOver) apparaissent entre parenthèses. Ces événements ne sont disponibles que pour
des liens. Lorsque vous en sélectionnez un, Dreamweaver entoure l'image d'une balise a pour
définir un lien nul, représenté par javascript:; dans la zone de texte Lien de l'inspecteur
Propriétés. Vous pouvez modifier la valeur de ce lien pour le transformer en véritable lien vers
une autre page, mais si vous effacez le lien JavaScript sans le remplacer par un autre lien, vous
supprimerez le comportement.
Pour savoir précisément quelles balises peuvent être utilisées avec un événement donné dans
un navigateur donné, recherchez l'événement dans l'un des fichiers de votre dossier
Dreamweaver/Configuration/Behaviors/Events.
Application d'un comportement
Vous pouvez associer des comportements au document entier (à la balise body) ou à des liens,
des images, des éléments de formulaire ou divers autres éléments HTML.
Le navigateur cible que vous choisissez détermine les événements pris en charge pour un
élément donné. Internet Explorer 4.0, par exemple, propose davantage d'événements pour
chaque élément que Netscape Navigator 4.0 ou que n'importe quel navigateur de la
version 3.0.
REMARQUE
Vous ne pouvez pas associer un comportement à un texte brut. Pour plus d'informations,
voir Association d'un comportement à du texte, page 559.
Vous pouvez attribuer plusieurs actions à chaque événement. Les actions sont exécutées dans
l'ordre dans lequel elles sont répertoriées dans la colonne Actions du panneau
Comportements. Pour toute information sur la modification de l'ordre des actions, voir
Modification d'un comportement, page 560.
Pour associer un comportement :
1.
Sélectionnez un élément dans la page, tel qu'une image ou un lien.
Pour associer un comportement à l'ensemble de la page, cliquez sur la balise <body> dans
le sélecteur de balises, situé dans le coin inférieur gauche de la fenêtre de document.
2.
Pour ouvrir le panneau Comportements, choisissez Fenêtre > Comportements.
3.
Cliquez sur le bouton plus (+) et choisissez une action dans le menu contextuel Actions.
558
Chapitre 18: Utilisation des comportements JavaScript
Vous ne pouvez pas choisir les actions qui apparaissent en grisé dans le menu. Ces actions
peuvent être grisées si un objet nécessaire n'existe pas dans le document actif Par exemple,
l'action Contrôler Shockwave ou Flash s'affiche en grisé si le document ne contient pas de
fichiers SWF Macromedia Flash ou Shockwave. Si aucun événement n'est disponible pour
l'objet sélectionné, toutes les actions s'affichent en grisé.
Lorsque vous choisissez une action, une boîte de dialogue s'affiche avec les paramètres et
les instructions pour cette action.
4.
Saisissez les paramètres pour l'action et cliquez sur OK.
Toutes les actions proposées dans Dreamweaver fonctionnent dans les versions 4.0 ou
ultérieures des navigateurs. Certaines d'entre elles sont refusées par les navigateurs moins
récents. Voir Utilisation des actions de comportement livrées avec Dreamweaver, page 563.
5.
L'événement par défaut qui déclenchera l'action apparaît dans la colonne Evénements. S'il
ne s'agit pas de l'événement que vous désirez utiliser, sélectionnez-en un autre dans le menu
contextuel Evénements (pour ouvrir le menu contextuel Evénements, sélectionnez un
événement ou une action dans le panneau Comportements, puis cliquez sur la flèche noire
pointée vers le bas qui apparaît entre le nom de l'événement et le nom de l'action).
Association d'un comportement à du
texte
Vous ne pouvez pas associer un comportement à un texte brut. Les balises telles que p et span
ne générant pas d'événements dans les navigateurs, il n'est donc pas possible de déclencher
une action à partir de ces balises.
Toutefois, vous pouvez associer un comportement à un lien. La manière la plus simple
d'associer un comportement à du texte consiste à ajouter un lien nul (qui ne correspond à
rien) au texte, puis à associer le comportement au lien. Dans ce cas, le texte s'affiche en tant
que lien (vous pouvez modifier la couleur du lien et supprimer le soulignement pour qu'il ne
ressemble plus à un lien, cependant les utilisateurs risquent de ne pas se rendre compte qu'ils
peuvent cliquer sur cet élément).
Association d'un comportement à du texte
559
Pour associer un comportement au texte sélectionné :
1.
Dans l'inspecteur Propriétés, entrez javascript:; dans la zone de texte Lien. N'oubliez
pas les deux points (:) et le point-virgule (;).
REMARQUE
Vous pouvez également utiliser un signe dièse (#) dans la zone de texte Lien. Dans
ce cas, lorsqu'un utilisateur clique sur le lien, le navigateur revient en haut de la page.
Le fait de cliquer sur le lien nul JavaScript n'a aucun effet sur la page et il est donc
généralement préférable d'utiliser cette approche JavaScript.
2.
Lorsque le texte est sélectionné, ouvrez le panneau Comportements (Fenêtre >
Comportements).
3.
Sélectionnez une action dans le menu contextuel Actions, entrez les paramètres de l'action,
puis choisissez un événement pour la déclencher. Pour plus d'informations, voir
Application d'un comportement, page 558.
Pour modifier l'apparence du texte lié de sorte qu'il ne ressemble plus à un
lien :
1.
Choisissez Affichage > Code pour activer le mode Code de la fenêtre de document.
2.
Trouvez le lien.
3.
Dans la balise a href du lien, insérez l'attribut : style="text-decoration:none; color:black".
Ce paramètre désactive le soulignement et définit la couleur du texte sur noir (bien sûr, si
le texte environnant est d'une couleur différente, utilisez cette couleur au lieu du noir).
Notez que cet attribut est un style CSS incorporé. Tout style CSS incorporé à un lien
unique remplace les autres styles CSS appliqués à ce dernier, mais il n'a aucun impact en
dehors de ce lien. Pour modifier l'apparence du texte lié dans toute une page ou sur votre
site entier, utilisez les styles CSS pour créer un nouveau style pour les liens. Pour plus
d'informations, voir Chapitre 13, Insertion et mise en forme de texte, page 415.
Modification d'un comportement
Une fois le comportement associé, vous pouvez modifier l'événement qui déclenche l'action,
ajouter ou supprimer des actions et modifier les paramètres des actions.
Pour modifier un comportement :
1.
Sélectionnez un objet auquel un comportement a été associé.
2.
Choisissez Fenêtre > Comportements pour ouvrir le panneau Comportements.
560
Chapitre 18: Utilisation des comportements JavaScript
Les comportements sont classés dans le panneau par ordre alphabétique des événements.
Si un même événement dispose de plusieurs actions, ces dernières apparaissent dans
l'ordre chronologique d'exécution.
3.
Procédez de l'une des manières suivantes :
■
Pour modifier les paramètres d'une action, double-cliquez sur le nom du
comportement ou sélectionnez-le et appuyez sur la touche Entrée (Windows) ou
Retour (Macintosh), modifiez les paramètres dans la boîte de dialogue, puis cliquez
sur OK.
■
Pour modifier l'ordre d'apparition des actions pour un événement donné, sélectionnez
une action et cliquez sur la touche directionnelle Haut ou Bas. Vous pouvez également
sélectionner l'action, puis la copier et la coller à l'emplacement de votre choix parmi
les autres actions.
■
Pour supprimer un comportement, sélectionnez-le et cliquez sur le signe moins (-) ou
appuyez sur Supprimer.
Actualisation d'un comportement
Si vos pages contiennent des comportements créés avec Dreamweaver 1 ou Dreamweaver 2,
ces comportements ne sont pas automatiquement actualisés lorsque vous ouvrez les pages dans
la version courante de Dreamweaver. Toutefois, quand vous actualisez une occurrence d'un
comportement dans une page (en appliquant la procédure détaillée dans cette section), toutes
les autres occurrences du comportement présentes dans la page sont également mises à jour.
Les comportements créés avec Dreamweaver 3 fonctionnent dans Dreamweaver 4 sans devoir
être modifiés.
REMARQUE
Comme indiqué ci-dessus, lorsque vous actualisez une occurrence de comportement
dans une page, toutes les autres occurrences de ce comportement dans la page sont
également actualisées. Vous devez néanmoins mettre à jour les comportements de
chaque page de votre site.
Pour actualiser un comportement dans une page :
1.
Sélectionnez l'élément auquel est attaché le comportement.
2.
Ouvrez le panneau Comportements.
3.
Double-cliquez sur le comportement.
4.
Cliquez sur OK dans la boîte de dialogue du comportement.
Toutes les occurrences de ce comportement sont actualisées.
Actualisation d'un comportement
561
Création de nouvelles actions
Les actions consistent en un code JavaScript et HTML. Si vous maîtrisez JavaScript, vous
pouvez rédiger de nouvelles actions et les ajouter dans le menu contextuel Actions du panneau
Comportements. Pour plus d'informations, voir Extension de Dreamweaver.
Téléchargement et installation de
comportements créés par des
développeurs indépendants
L'une des fonctions les plus utiles de Dreamweaver est son extensibilité, car il offre aux
utilisateurs maîtrisant JavaScript la possibilité de rédiger du code JavaScript pour étendre les
capacités de Dreamweaver. Bon nombre de ces utilisateurs ont choisi de partager leurs
extensions avec d'autres utilisateurs en les plaçant sur le site Web de Macromedia Exchange
pour Dreamweaver (http://www.macromedia.com/go/dreamweaver_exchange_fr/).
Pour télécharger et installer de nouveaux comportements à partir du site
Macromedia Exchange :
1.
Ouvrez le panneau Comportements et choisissez l'option Télécharger d'autres
comportements dans le menu contextuel Actions (+).
Votre navigateur principal s'ouvre sur le site d'Exchange (vous devez être connecté à
Internet pour télécharger des comportements).
2.
Localisez les progiciels.
3.
Téléchargez et installez le progiciel d'extension souhaité.
Pour plus d'informations, voir Ajout d'extensions dans Dreamweaver, page 83.
562
Chapitre 18: Utilisation des comportements JavaScript
Utilisation des actions de comportement
livrées avec Dreamweaver
Les actions de comportement incluses dans Dreamweaver ont été conçues pour fonctionner
avec les versions 4.0 et ultérieures de Netscape Navigator et Internet Explorer. La plupart des
actions de comportement fonctionnent également dans Netscape Navigator version 3.0 et
ultérieures (en revanche, les comportements associés aux calques ne fonctionnent pas dans
Netscape Navigator 3.0). Dans Internet Explorer version 3.0, la plupart d'entre elles échouent
sans que l'utilisateur en soit informé.
REMARQUE
Les actions Dreamweaver ont été rédigées avec soin afin de fonctionner avec le plus
grand nombre possible de navigateurs. Si vous supprimez manuellement le code d'une
action Dreamweaver ou si vous le remplacez par votre propre code, vous risquez de
perdre la compatibilité inter-navigateurs.
Bien que les actions Dreamweaver aient été rédigées pour augmenter la compatibilité internavigateurs, certaines actions ne fonctionnent pas avec les navigateurs plus anciens. De même,
certains navigateurs ne prennent pas en charge JavaScript et de nombreuses personnes
désactivent JavaScript sur leur navigateur lorsqu'ils explorent la Toile. Pour optimiser les
résultats inter-plates-formes, fournissez d'autres interfaces contenues dans des balises
noscript afin que votre site reste accessible aux personnes qui n'utilisent pas JavaScript.
Appel JavaScript
L'action Appel JavaScript permet d'utiliser le panneau Comportements pour spécifier qu'une
fonction ou une ligne personnalisée de code JavaScript doit être exécutée lorsqu'un événement
se produit (vous pouvez rédiger le code JavaScript vous-même, ou utiliser le code fourni
gratuitement dans le cadre de plusieurs bibliothèques de JavaScript sur Internet).
Pour utiliser l'action Appel JavaScript :
1.
Sélectionnez un objet et ouvrez le panneau Comportements.
2.
Cliquez sur le bouton plus (+) et sélectionnez Appel JavaScript dans le menu contextuel
Actions.
3.
Tapez le code JavaScript à exécuter ou le nom de la fonction.
Par exemple, pour créer un bouton Retour, vous pouvez saisir
if (history.length > 0){history.back()}. Si vous avez encapsulé votre code dans une
fonction, indiquez simplement le nom de la fonction (par exemple, hogback()).
4.
Cliquez sur OK.
Utilisation des actions de comportement livrées avec Dreamweaver
563
5.
Vérifiez que l'événement par défaut est bien l'événement désiré.
Si ce n'est pas le cas, sélectionnez-en un autre dans le menu déroulant. Si les événements
désirés ne sont pas répertoriés, changez de navigateur cible dans le menu déroulant
Afficher les événements pour.
Changer la propriété
Utilisez cette action pour modifier la valeur d'une des propriétés d'un objet (par exemple, la
couleur d'arrière-plan d'un calque ou l'action d'un formulaire). C'est le navigateur qui
détermine les propriétés qui sont modifiables. Beaucoup plus de propriétés peuvent être
modifiées par ce comportement dans Internet Explorer 4.0 que dans Internet Explorer 3.0 ou
Netscape Navigator 3.0 ou 4.0. Par exemple, vous pouvez modifier de façon dynamique la
couleur d'arrière-plan d'un calque.
REMARQUE
N'utilisez cette action que si vous êtes expert en HTML et en JavaScript.
Pour utiliser l'action Changer la propriété :
1.
Sélectionnez un objet et ouvrez le panneau Comportements.
2.
Cliquez sur le bouton plus (+) et sélectionnez Changer la propriété dans le menu contextuel
Actions.
3.
Dans le menu déroulant Type d'objet, sélectionnez le type d'objet dont vous souhaitez
modifier une propriété.
Tous les objets nommés du type d'objet sélectionné s'affichent dans le menu déroulant
Objet nommé.
4.
Sélectionnez un objet dans le menu déroulant Objet nommé.
5.
Choisissez ensuite une propriété dans le menu déroulant Propriété ou tapez le nom de la
propriété dans la zone de texte.
Pour savoir quelles propriétés peuvent être modifiées pour chaque navigateur, choisissez
différents navigateurs ou différentes versions de navigateurs dans le menu déroulant
Navigateur. Si vous tapez directement le nom d'une propriété, veillez à utiliser le nom
JavaScript exact (attention, les propriétés JavaScript tiennent compte des majuscules et
minuscules).
6.
Indiquez la nouvelle valeur de la propriété dans la zone de texte Nouvelle valeur et cliquez
sur OK.
564
Chapitre 18: Utilisation des comportements JavaScript
7.
Vérifiez que l'événement par défaut est bien l'événement désiré. (Lorsque cet événement se
produit, l'action est exécutée et la propriété est modifiée.)
Si ce n'est pas le cas, sélectionnez-en un autre dans le menu déroulant. Si les événements
désirés ne sont pas répertoriés, changez de navigateur cible dans le menu déroulant
Afficher les événements pour.
Vérifier le navigateur
Utilisez cette action pour aiguiller les visiteurs vers des pages différentes selon le modèle et la
version de leur navigateur. Par exemple, vous pouvez décider que les utilisateurs de Netscape
Navigator 4.0 iront sur telle page, les utilisateurs d'Internet Explorer 4.0 ou 5.0 sur telle autre,
et les utilisateurs d'un autre type de navigateur resteront sur la page en cours.
Il est utile d'associer ce comportement à la balise body d'une page qui est compatible avec
presque tous les navigateurs (et qui n'utilise pas d'autre JavaScript) ; ainsi, les utilisateurs de la
page qui ont désactivé JavaScript verront quand même quelque chose.
Une autre option consiste à associer ce comportement à un lien nul (tel que
pour que l'action détermine la page à laquelle le lien renvoie,
selon le modèle et la version du navigateur du visiteur.
<a href="javascript:;">)
Pour utiliser l'action Vérifier le navigateur :
1.
Sélectionnez un objet et ouvrez le panneau Comportements.
2.
Cliquez sur le bouton plus (+) et sélectionnez Vérifier le navigateur dans le menu contextuel
Actions.
3.
Indiquez comment vous souhaitez distinguer les visiteurs : par modèle de navigateur, par
version ou les deux.
Par exemple, souhaitez-vous que tous les utilisateurs de la version 4.0 d'un navigateur,
quel que soit son éditeur, voient telle page, et que tous les utilisateurs d'une marque ou
d'une version différentes en voient une autre ? Ou encore que les utilisateurs de Netscape
Navigator voient une page et que les utilisateurs de Microsoft Internet Explorer (IE) en
voient une autre ?
4.
Spécifiez une version de Netscape Navigator.
5.
Dans les menus contextuels adjacents, sélectionnez les options respectives dans le cas où la
version de Netscape Navigator est celle que vous avez spécifiée (ou une version plus récente)
et dans le cas contraire.
Les options sont Atteindre l'URL, Atteindre l'URL sec. et Rester sur cette page.
6.
Spécifiez une version de Microsoft Internet Explorer.
Utilisation des actions de comportement livrées avec Dreamweaver
565
7.
Dans les menus contextuels adjacents, sélectionnez les options respectives dans le cas où la
version d'Internet Explorer est celle que vous avez spécifiée (ou une version plus récente) et
dans le cas contraire.
Les options sont Atteindre l'URL, Atteindre l'URL sec. et Rester sur cette page.
8.
Dans le menu déroulant Autres navigateurs, sélectionnez l'action qui sera exécutée si le
navigateur n'est ni Netscape Navigator, ni Internet Explorer (par exemple, l'utilisateur peut
utiliser un navigateur basé sur du texte tel que Lynx).
La meilleure option est Rester sur cette page pour les navigateurs autres que Netscape
Navigator et Internet Explorer, car la plupart ne prennent pas en charge JavaScript – et
s'ils ne peuvent pas gérer ce comportement, ils resteront sur cette page de toute façon.
9.
Entrez le noms de fichier et le chemin d'accès à l'URL et à l'URL secondaire dans les zones
de texte situées en bas de la boîte de dialogue. Si vous indiquez une URL distante, vous
devez faire précéder l'adresse www du préfixe http://.
10. Cliquez
11.
sur OK.
Vérifiez que l'événement par défaut est bien l'événement désiré.
Si ce n'est pas le cas, sélectionnez-en un autre dans le menu déroulant. Si les événements
désirés ne sont pas répertoriés, changez de navigateur cible dans le menu déroulant
Afficher les événements pour. Le but de ce comportement étant de vérifier les différentes
versions du navigateur, il est préférable d'opter pour un événement qui fonctionne avec les
versions 3.0 et ultérieures des navigateurs.
Vérifier le plug-in
Utilisez cette action pour envoyer les visiteurs sur des pages différentes selon que le plug-in
spécifié est installé ou non. Par exemple, vous pouvez rerouter les visiteurs sur une page s'ils
possèdent Shockwave, et sur une autre dans le cas contraire.
REMARQUE
Il est impossible de détecter des plug-ins spécifiques dans Microsoft Internet Explorer
(IE) à l'aide de JavaScript. Toutefois, si vous sélectionnez les plug-ins Flash ou Director,
le code VBScript approprié sera automatiquement ajouté à votre page pour les détecter
dans Internet Explorer sous Windows. Il est impossible de détecter les plug-ins dans
Internet Explorer sur Macintosh.
Pour utiliser l'action Vérifier le plug-in :
1.
Sélectionnez un objet et ouvrez le panneau Comportements.
2.
Cliquez sur le bouton plus (+) et choisissez Vérifier le navigateur dans le menu contextuel
Actions.
566
Chapitre 18: Utilisation des comportements JavaScript
3.
Sélectionnez un plug-in dans le menu déroulant Plug-in, ou cliquez sur Entrée et tapez le
nom exact du plug-in dans la zone de texte adjacente.
Vous devez utiliser le nom exact du plug-in, tel qu'il apparaît en gras sur la page A propos
des plug-ins dans Netscape Navigator (dans Windows, choisissez la commande Aide > A
propos des plug-ins. Sur Macintosh, choisissez A propos des plug-ins dans le menu
Pomme).
4.
Dans la zone de texte Si trouvé, aller à l'URL, spécifiez l'URL destinée aux utilisateurs qui
disposent du plug-in.
Si vous indiquez une URL distante, vous devez faire précéder l'adresse www du préfixe
http://.
Pour que les utilisateurs disposant du plug-in restent sur la même page, laissez ce champ
vide.
5.
Dans la zone de texte Sinon, aller à l'URL, indiquez une autre URL pour les visiteurs qui
ne disposent pas du plug-in.
Pour que les utilisateurs ne disposant pas du plug-in restent sur la même page, laissez ce
champ vide.
6.
Il est impossible de détecter les plug-ins dans Internet Explorer sur Macintosh, et la plupart
des plug-ins ne peuvent pas être détectés dans Internet Explorer sous Windows. Par défaut,
lorsque la détection est impossible, l'utilisateur est envoyé à l'URL indiquée dans la zone
de texte Sinon. Pour que l'utilisateur soit envoyé vers la première URL (Si trouvé), activez
la case à cocher Toujours aller à la première URL si la détection n'est pas possible.
Lorsqu'elle est sélectionnée, cette option signifie « que l'utilisateur possède a priori le plugin, sauf si le navigateur indique explicitement que ce n'est pas le cas ».
En général, si le contenu du plug-in est un élément essentiel de votre page, activez l'option
« Toujours aller à la première URL si la détection n'est pas possible ». Le plus souvent, les
utilisateurs ne disposant pas de ce plug-in se verront proposer de le télécharger. Si le
contenu du plug-in n'est pas un élément essentiel de votre page, laissez cette option
désactivée.
Cette option ne concerne qu'Internet Explorer ; Netscape Navigator détecte les plug-ins.
7.
Cliquez sur OK.
8.
Vérifiez que l'événement par défaut est bien l'événement désiré.
Si ce n'est pas le cas, sélectionnez-en un autre dans le menu déroulant. Si les événements
désirés ne sont pas répertoriés, changez de navigateur cible dans le menu déroulant
Afficher les événements pour.
Utilisation des actions de comportement livrées avec Dreamweaver
567
Contrôler Shockwave ou Flash
Utilisez cette fonction pour diffuser, arrêter ou rembobiner une animation Shockwave ou
Flash ou pour aller à une image précise de cette animation. Pour utiliser l'action Contrôler
Shockwave ou Flash :
1.
Choisissez, selon le cas, Insertion > Médias > Shockwave ou Insertion > Médias > Flash
pour insérer un fichier Shockwave ou Flash SWF.
2.
Choisissez Fenêtre > Propriétés et entrez un nom pour l'animation dans la zone de texte
située en haut à gauche (à côté de l'icône Shockwave ou Flash). Vous devez nommer
l'animation pour la contrôler avec l'action Contrôler Shockwave ou Flash.
3.
Sélectionnez l'élément à utiliser pour contrôler l'animation Shockwave ou Flash. Par
exemple, si vous disposez de l'image d'un bouton " Lecture " à utiliser pour diffuser
l'animation, sélectionnez cette image.
4.
Ouvrez le panneau Comportements (Fenêtre > Comportements).
5.
Cliquez sur le bouton plus (+) et choisissez Contrôler Shockwave ou Flash dans le menu
contextuel Actions.
Une boîte de dialogue de paramètres apparaît.
6.
Sélectionnez une animation dans le menu déroulant Animation.
Dreamweaver répertorie automatiquement les noms de toutes les animations Shockwave
et Flash du document actif (en particulier, Dreamweaver établit une liste des animations
ayant une extension de fichier .dcr, .dir, .swf ou .spl se trouvant dans les balises object ou
embed).
7.
Choisissez l'action de contrôle de l'animation désirée : Jouer, Arrêter, Rembobiner ou
Atteindre l'image indiquée dans l'animation. L'option Jouer diffuse l'animation en
commençant par l'image où l'action a lieu.
8.
Cliquez sur OK.
9.
Vérifiez que l'événement par défaut est bien l'événement désiré.
Si ce n'est pas le cas, sélectionnez-en un autre dans le menu déroulant. Si les événements
désirés ne sont pas répertoriés, modifiez le navigateur cible dans le sous-menu Afficher les
événements pour du menu Evénements.
Déplacement de calque
Cette action permet à l'utilisateur de déplacer un calque. Utilisez cette action pour créer des
puzzles, des contrôles de déplacement et autres éléments mobiles de l'interface.
568
Chapitre 18: Utilisation des comportements JavaScript
Vous pouvez spécifier la direction vers laquelle l'utilisateur peut faire glisser le calque
(horizontalement, verticalement ou dans toutes les directions), une cible vers laquelle
l'utilisateur doit faire glisser le calque, si ce dernier doit être aimanté par la cible ou non
lorsqu'il arrive à moins d'un certain nombre de pixels de la cible, l'action à déclencher lorsque
le calque touche la cible, etc.
L'action Déplacement de calque devant être appelée avant que le calque ne puisse être déplacé
par l'utilisateur, assurez-vous que l'événement qui déclenche l'action se produit avant que
l'utilisateur ne tente de faire glisser le calque. Le mieux est d'associer cette action à l'objet body
(à l'aide de l'événement onLoad), mais vous pouvez également l'associer à un lien remplissant
la totalité du calque (par exemple un lien autour d'une image), à l'aide de l'événement
onMouseOver.
Pour utiliser l'action Déplacement de calque :
1.
Choisissez Insertion > Calque ou cliquez sur le bouton Dessiner un calque de la barre
Insérer, puis dessinez un calque dans le mode Création de la fenêtre de document.
2.
Sélectionnez la balise body en cliquant sur <body> dans le sélecteur de balises situé au bas
de la fenêtre de document.
3.
Ouvrez le panneau Comportements.
4.
Cliquez sur le bouton plus (+) et sélectionnez Déplacement de calque dans le menu
contextuel Actions.
Si cette action n'est pas disponible, un calque est probablement sélectionné. Les calques ne
prennent pas en compte les événements dans les navigateurs 4.0. Vous devez donc
sélectionner un autre objet (la balise body ou un lien (balise a), par exemple) ou remplacer
le navigateur cible par Internet Explorer 4.0 dans le menu déroulant Afficher les
événements pour.
5.
Dans le menu déroulant Calque, sélectionnez le calque que vous voulez rendre déplaçable.
6.
Sélectionnez soit Contraint, soit Libre dans le menu contextuel Mouvement.
Les mouvements sans contrainte sont adaptés aux puzzles et aux autres jeux à base de
glisser-déplacer. Pour les contrôles de déplacement et les objets mobiles (tiroirs, rideaux et
stores), choisissez un mouvement contraint.
7.
Pour la restriction de mouvement, indiquez les valeurs de déplacement admises (en pixels)
dans les zones de texte Haut, Bas, Gauche et Droite.
Utilisation des actions de comportement livrées avec Dreamweaver
569
Ces valeurs sont relatives à la position de départ du calque. Pour restreindre les
déplacements à l'intérieur d'une zone rectangulaire, indiquez des valeurs positives dans les
quatre zones de texte. Pour permettre uniquement un mouvement vertical, indiquez des
valeurs positives pour Haut et Bas et 0 pour Gauche et Droite. Pour permettre
uniquement un mouvement horizontal, indiquez des valeurs positives pour Gauche et
Droite et 0 pour Haut et Bas.
8.
Indiquez les coordonnées (exprimées en pixels) de la cible de dépôt dans les zones de texte
Gauche et Haut.
La cible de dépôt est le point sur lequel vous voulez que l'utilisateur " dépose " le calque.
Un calque est considéré comme ayant atteint la cible de dépôt lorsque ses coordonnées
d'origine (en haut à gauche) correspondent aux valeurs indiquées dans les zones de texte
Gauche et Haut. Ces coordonnées sont relatives à l'angle supérieur gauche de la fenêtre du
navigateur. Cliquez sur Obtenir la position courante pour remplir automatiquement les
zones de texte avec les coordonnées actuelles du calque.
9.
Entrez une valeur (exprimée en pixels) dans la zone de texte Aligner si dans pour déterminer
la distance minimale à laquelle le visiteur doit approcher le calque de la cible pour que le
calque se place automatiquement sur celle-ci.
Les valeurs importantes permettent à l'utilisateur de trouver plus facilement la cible de
dépôt.
10. Pour
des puzzles simples et des défilements d'images, vous pouvez vous en tenir là. Pour
définir la poignée de déplacement du calque, suivre le mouvement du calque pendant qu'il
est déplacé et déclencher une action lorsqu'il est déposé, cliquez sur l'onglet Avancé.
11.
Pour spécifier que l'utilisateur doit cliquer dans une zone particulière du calque pour
pouvoir le déplacer, sélectionnez Zone dans le calque dans le menu déroulant Poignée de
déplacement, puis indiquez les coordonnées de l'origine (angle supérieur gauche) de la
poignée de déplacement, ainsi que la largeur et la hauteur de celle-ci.
Cette option est utile lorsque l'image insérée à l'intérieur du calque contient un symbole
de déplacement, par exemple une barre de titre ou une poignée de tiroir. N'activez pas
cette option si vous voulez que l'utilisateur soit libre de cliquer n'importe où dans le
calque pour le déplacer.
12. Choisissez,
■
570
parmi les options de la zone En déplaçant, celles que vous désirez utiliser :
Activez l'option Placer le calque au premier plan si le calque doit être amené au niveau
le plus haut de l'ordre de superposition lors de son déplacement. Si vous activez cette
option, utilisez le menu déroulant qui apparaît pour indiquer si le calque doit être
laissé au niveau de visibilité le plus élevé ou si sa position d'origine dans l'ordre de
superposition doit être rétablie.
Chapitre 18: Utilisation des comportements JavaScript
Tapez un code JavaScript ou un nom de fonction (par exemple, monitorLayer())
dans la zone de texte Appel JavaScript pour que ce code ou cette fonction soit exécuté
en boucle pendant le déplacement du calque. Par exemple, vous pouvez écrire une
fonction pour surveiller les coordonnées du calque et afficher des indications, telles
que « Tu brûles » ou « Tu t'éloignes de la cible », dans une zone de texte. Pour plus
d'informations, voir Collecte d'informations sur le calque déplaçable, page 571.
■
13.
Indiquez un code JavaScript ou un nom de fonction (par exemple, evaluateLayerPos())
dans la deuxième zone de texte Appel JavaScript si vous voulez que le code ou la fonction
soit exécuté(e) lorsque le calque est déposé. Activez l'option Uniquement si aligné si le code
JavaScript indiqué ne doit être exécuté que si le calque a atteint la cible de dépôt.
14. Cliquez
15.
sur OK.
Vérifiez que l'événement par défaut est bien l'événement désiré.
Si ce n'est pas le cas, sélectionnez-en un autre dans le menu déroulant. Si les événements
désirés ne sont pas répertoriés, changez de navigateur cible dans le menu déroulant
Afficher les événements pour. N'oubliez pas que les calques ne sont pas pris en charge par
la version 3.0 des navigateurs.
REMARQUE
Vous ne pouvez pas associer l'action Déplacement de calque à un objet avec les
événements onMouseDown ou onClick.
Collecte d'informations sur le calque déplaçable
Lorsque vous associez l'action Déplacement de calque à un objet, Dreamweaver insère la
fonction MM_dragLayer() dans la section d'en-tête (head) de votre document. Cette fonction
enregistre le calque comme déplaçable et définit trois propriétés pour chaque calque
déplaçable, MM_LEFTRIGHT, MM_UPDOWN et MM_SNAPPED, que vous pouvez utiliser dans vos
propres fonctions JavaScript pour déterminer les positions horizontale et verticale du calque et
s'il a atteint la cible de dépôt.
R E M AR QU E
Les informations fournies ici sont destinées uniquement aux programmeurs JavaScript
expérimentés.
Utilisation des actions de comportement livrées avec Dreamweaver
571
Par exemple, la fonction suivante affiche la valeur de la propriété MM_UPDOWN (la position
verticale courante du calque) dans un champ de formulaire appelé curPosField. (Les champs
de formulaires servent à afficher des informations pouvant être continuellement mises à jour,
parce qu’ils sont dynamiques. Ainsi, vous pouvez modifier leur contenu après le chargement
de la page, dans Netscape Navigator et Microsoft Internet Explorer.)
function getPos(layername){
var layerRef = MM_findObj(layername);
var curVertPos = layerRef.MM_UPDOWN;
document.tracking.curPosField.value = curVertPos;
}
Au lieu d'afficher la valeur des propriétés MM_UPDOWN ou MM_LEFTRIGHT dans un champ de
formulaire, vous pouvez utiliser ces valeurs de différentes manières. Par exemple, vous pouvez
écrire une fonction qui affiche un message dans ce champ selon la distance qui reste à
parcourir jusqu'à la cible, ou appeler une autre fonction pour afficher ou masquer un calque
selon la valeur de cette distance.
Il est particulièrement utile de tester la propriété MM_SNAPPED lorsque vous disposez, sur une
page, de plusieurs calques qui doivent tous atteindre leur cible pour que l'utilisateur puisse
passer à la page ou à la tâche suivante. Par exemple, vous pouvez écrire une fonction qui
compte le nombre de calques ayant la valeur MM_SNAPPED à true et l'appeler chaque fois
qu'un calque est déposé. Lorsque le nombre de calques arrivés sur leur cible atteint le nombre
désiré, vous pouvez envoyer l'utilisateur à la page suivante ou afficher un message de
félicitations.
Si vous avez associé l'action Déplacement de calque à des liens placés sur plusieurs calques à
l'aide de l'événement onMouseOver, vous devrez modifier légèrement la fonction
MM_dragLayer() pour éviter que la propriété MM_SNAPPED d'un calque aligné ne repasse à
false lorsqu'il est survolé par la souris (c'est le cas si vous utilisez l'action Déplacement de
calque pour créer un puzzle de photos, car la souris survole probablement des pièces déjà
alignées lors du positionnement des autres). La fonction MM_dragLayer() n'interdit pas ce
comportement, car il est parfois souhaitable (par exemple pour établir plusieurs cibles pour un
seul calque).
Pour éviter le ré-enregistrement de calques alignés :
1.
Effectuez une copie de sauvegarde de votre document avant de modifier le code (vous
pouvez effectuer cette opération à partir du panneau Site dans Dreamweaver ou dans
l'Explorateur Windows ou le Finder de Macintosh).
2.
Choisissez Edition > Rechercher.
3.
Sélectionnez Source HTML dans le menu déroulant Rechercher.
4.
Tapez (!curDrag) (parenthèses comprises) dans la zone de texte voisine.
572
Chapitre 18: Utilisation des comportements JavaScript
5.
Cliquez sur Rechercher le suivant.
Cliquez sur Oui si Dreamweaver vous demande si vous voulez continuer la recherche
depuis le début du document. Dreamweaver trouve l'instruction :
if (!curDrag) return false;
6.
Fermez la boîte de dialogue Rechercher, puis modifiez l'instruction dans l'Affichage de
code de la fenêtre de document ou dans l'inspecteur de code pour qu'il affiche :
if (!curDrag || curDrag.MM_SNAPPED != null) return false;
Les deux barres verticales (||) signifient " ou " et curDrag est une variable qui représente
le calque qui a été enregistré comme déplaçable. En français, cette instruction signifie « si
curDrag n'est pas un objet, ou s'il a déjà la valeur MM_SNAPPED, ce n'est pas la peine
d'exécuter le reste de la fonction ».
Atteindre l'URL
L'action Atteindre l'URL ouvre une nouvelle page dans la fenêtre en cours ou dans l'image
indiquée. Cette action est particulièrement utile pour modifier d'un seul clic le contenu de
deux cadres ou plus
Pour utiliser l'action Atteindre l'URL :
1.
Sélectionnez un objet et ouvrez le panneau Comportements.
2.
Cliquez sur le bouton plus (+) et sélectionnez Atteindre l'URL dans le menu contextuel
Actions.
3.
Choisissez une destination pour l'URL dans la liste Ouvrir dans.
La liste Ouvrir dans énumère automatiquement les noms de tous les cadres qui se trouvent
dans le jeu de cadres actuel, ainsi que la fenêtre principale. S'il n'y a pas de cadres, cette
dernière est la seule option.
REMARQUE
Ne donnez pas à vos cadres les noms top, blank, self ou parent, car cela pourrait
produire des résultats inattendus. En effet, certains navigateurs peuvent confondre
ces noms avec les mots réservés utilisés dans le champ Cible.
4.
Cliquez sur Parcourir pour sélectionner un document à ouvrir ou tapez le nom et le chemin
d'accès au fichier recherché dans la zone de texte URL.
5.
Répétez les étapes 3 et 4 pour ouvrir d'autres documents dans d'autres cadres.
6.
Cliquez sur OK.
7.
Vérifiez que l'événement par défaut est bien l'événement désiré.
Utilisation des actions de comportement livrées avec Dreamweaver
573
Si ce n'est pas le cas, sélectionnez-en un autre dans le menu déroulant. Si les événements
désirés ne sont pas répertoriés, changez de navigateur cible dans le menu déroulant
Afficher les événements pour.
Menu de reroutage
Lorsque vous créez un menu de reroutage en utilisant Insertion > Objets de formulaire >
Menu de reroutage, Dreamweaver crée un objet de menu et lui associe le comportement
Menu de reroutage (ou Menu de reroutage / Aller). En principe, il n'est pas nécessaire
d'associer manuellement l'action Menu de reroutage à un objet. Pour plus d'informations sur
les menus de reroutage et la façon de les créer, voir Menus de reroutage, page 478.
Vous pouvez modifier un menu de reroutage existant de deux manières différentes :
■
Vous pouvez modifier et réorganiser les éléments du menu, modifier les fichiers à rerouter
et la fenêtre dans laquelle s'ouvrent ces fichiers, en double-cliquant sur une action de
Menu de reroutage existante dans le panneau Comportements.
■
Vous pouvez modifier les éléments du menu comme vous modifieriez les éléments de
n'importe quel menu, en sélectionnant le menu et en utilisant le bouton Valeurs de la liste
dans l'inspecteur Propriétés. Pour plus d'informations, voir Insertion de menus de
formulaire HTML, page 908.
Pour modifier un menu de reroutage à l'aide du panneau Comportements :
1.
Créez un objet Menu de reroutage s'il n'en existe pas déjà dans votre document.
2.
Sélectionnez un objet et ouvrez le panneau Comportements.
3.
Double-cliquez sur Menu de reroutage dans la colonne Actions.
4.
Effectuez les modifications souhaitées dans la boîte de dialogue Menu de reroutage, puis
cliquez sur OK.
574
Chapitre 18: Utilisation des comportements JavaScript
Menu de reroutage / Aller
Cette action est étroitement associée à l'action Menu de reroutage ; elle vous permet d'associer
un bouton Aller avec un menu de reroutage (pour utiliser cette action, vous devez créer au
préalable un menu de reroutage dans le document). Un clic sur le bouton Aller ouvre le lien
actuellement sélectionné dans le menu de reroutage. En principe, il n'est pas indispensable
d'ajouter un bouton Aller à un menu de reroutage : le choix d'un élément de ce dernier
provoque en général le chargement d'une nouvelle URL sans aucune intervention
supplémentaire. Toutefois, si l'utilisateur choisit l'élément qui est déjà sélectionné dans le
menu de reroutage, le reroutage ne se produira pas. En général cela n'a pas d'importance, mais
si le menu de reroutage apparaît dans une image et que les éléments du menu assurent la
liaison avec des pages dans d'autres images, un bouton Aller est souvent utile, pour permettre
aux utilisateurs de choisir à nouveau un élément déjà sélectionné dans le menu de reroutage.
Pour ajouter une action Menu de reroutage / Aller :
1.
Sélectionnez un objet qui sera utilisé comme bouton Aller (en général une image) et ouvrez
le panneau Comportements.
2.
Cliquez sur le bouton plus (+) et choisissez Menu de reroutage Aller dans le menu
contextuel Actions.
3.
Dans le menu déroulant Choisissez un menu de reroutage, sélectionnez le menu qui
activera le bouton Aller.
4.
Cliquez sur OK.
Ouvrir la fenêtre Navigateur
Utilisez l'action Ouvrir la fenêtre Navigateur pour ouvrir une URL dans une nouvelle fenêtre.
Vous pouvez spécifier les propriétés de la nouvelle fenêtre, dont sa taille, ses attributs
(redimensionnable ou non, dispose d'une barre de menu ou non, etc.), ainsi que son nom Par
exemple, vous pouvez utiliser ce comportement pour ouvrir une image plus grande dans une
fenêtre indivi">