DREAMWEAVER CS5 - Éditeur de site Web ADOBE - Notice d'utilisation et mode d'emploi gratuit

Type de produit	Éditeur de code et logiciel de conception web
Version	CS5
Système d'exploitation compatible	Windows et Mac OS
Langages supportés	HTML, CSS, JavaScript, PHP, XML, etc.
Fonctionnalités principales	Éditeur WYSIWYG, gestion de sites, intégration de FTP, prévisualisation en direct, prise en charge de jQuery et autres frameworks
Interface utilisateur	Personnalisable avec des panneaux flottants et des espaces de travail
Outils de développement	Débogueur intégré, outils de validation de code, gestion des erreurs
Maintenance et mises à jour	Mises à jour disponibles via Adobe, vérification régulière des correctifs de sécurité
Support technique	Documentation en ligne, forums communautaires, assistance Adobe
Exigences système minimales	Processeur 1.4 GHz, 1 Go de RAM, 1 Go d'espace disque, écran 1024x768
Langues disponibles	Multilingue, y compris français, anglais, espagnol, allemand, etc.
Licences disponibles	Licence perpétuelle et abonnement
Sécurité	Fonctionnalités de sécurité intégrées, mises à jour régulières pour corriger les vulnérabilités
Accessibilité	Compatible avec les technologies d'assistance

FOIRE AUX QUESTIONS - DREAMWEAVER CS5 ADOBE

Comment installer Adobe Dreamweaver CS5 sur mon ordinateur ?

Pour installer Adobe Dreamweaver CS5, insérez le disque d'installation ou téléchargez le fichier d'installation à partir de votre compte Adobe. Exécutez le programme d'installation et suivez les instructions à l'écran. Assurez-vous d'avoir une connexion Internet active pour l'activation du produit.

Pourquoi Dreamweaver CS5 ne s'ouvre-t-il pas ?

Si Dreamweaver CS5 ne s'ouvre pas, vérifiez si votre système d'exploitation est compatible avec ce logiciel. Essayez de le lancer en mode administrateur ou de désactiver temporairement votre antivirus pour voir si cela résout le problème.

Comment résoudre les problèmes de connexion FTP dans Dreamweaver CS5 ?

Pour résoudre les problèmes de connexion FTP, vérifiez vos paramètres de serveur FTP, y compris l'adresse du serveur, le nom d'utilisateur et le mot de passe. Assurez-vous également que votre pare-feu ne bloque pas la connexion.

Comment enregistrer un site dans Dreamweaver CS5 ?

Pour enregistrer un site dans Dreamweaver CS5, allez dans le menu 'Site', puis sélectionnez 'Nouveau site'. Remplissez les informations requises, y compris le nom du site et le dossier local, puis cliquez sur 'Enregistrer'.

Comment mettre à jour Dreamweaver CS5 ?

Pour mettre à jour Dreamweaver CS5, ouvrez le programme et allez dans le menu 'Aide', puis sélectionnez 'Mises à jour'. Suivez les instructions pour installer les mises à jour disponibles.

Que faire si j'ai des problèmes d'affichage avec Dreamweaver CS5 ?

Si vous rencontrez des problèmes d'affichage, essayez de réinitialiser les préférences de Dreamweaver. Fermez le programme, puis maintenez la touche 'Shift' en le relançant. Cela réinitialisera les paramètres par défaut.

Comment récupérer un fichier perdu dans Dreamweaver CS5 ?

Pour récupérer un fichier perdu, vérifiez dans le dossier temporaire de Dreamweaver ou dans le dossier de sauvegarde. Si vous avez activé la fonction 'Sauvegarde automatique', vous pourrez peut-être retrouver une version antérieure du fichier.

Comment désinstaller Dreamweaver CS5 ?

Pour désinstaller Dreamweaver CS5, allez dans le Panneau de configuration de votre ordinateur, sélectionnez 'Programmes et fonctionnalités', trouvez Adobe Dreamweaver CS5 dans la liste et cliquez sur 'Désinstaller'. Suivez les instructions pour terminer la désinstallation.

MODE D'EMPLOI DREAMWEAVER CS5 ADOBE

Chapter 1: Nouveautés

Nouveautés 1

Chapter 2: Espace de travail

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

Utilisation de la fenetre de document 19

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

Personnalisation de l'espace de travail de Dreamweaver CS5 25

Raccourcis clavier 36

Extensions 38

Chapter 3: Utilisation de sites Dreamweaver

A propos des sites Dreamweaver 40

Configuration d'une version locale de votre site 42

Connexion à un serveur distant 42

Configuration d'un serveur d'évaluation 50

Contrôle de version et paramètres avances 52

Options de la boite de dialogue Gérer les sites 53

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

Modification d'un site Web distant existant 56

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

Gestion de sites Contribute 58

Chapter 4: Création et gestion de fichiers

Creation et ouverture de documents 66

Gestion des fichiers et des dossiers 80

Acquisition et placement de fichiers depuis ou vers notre serveur 89

Archivage et extraction de fichiers 94

Synchronisation de fichiers 103

Comparaison de fichiers pour en chercher les différences 105

Restauration de fichiers (utilisateurs de Contribute) 108

Voilage de fichiers et de dossiers dans cette site Dreamweaver 109

Stockage des informations sur les fichiers dans des Design Notes 111

Test de votre site Dreamweaver 115

Chapter 5: Gestion des actifs et des bibliothèques

A propos des actifs et des bibliothèques 119

Utilisation des actifs 120

Creation et gestion d'une liste d'actifs favoris 125

Utilisation des éléments de bibliothèque 127

Chapter 6: Création de pages avec CSS

Description des feuilles de style en cascade 132

Panneau Styles CSS 137

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

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

Creation d'une nouvelle rège CSS 143

Définition des propriétés CSS 144

Modification d'une règle CSS 150

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

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

Déplacement/exportation de règles CSS 152

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

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

Modification d'une feuille de style CSS 155

Mise en forme du code CSS 155

Désactivation/Activation du code CSS 157

Inspection de CSS en mode En direct 157

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

Utilisation des feuilles de style à la conception 160

Utilisation des exemples de feuilles de style de Dreamweaver 161

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

Mise en forme des pages avec CSS 162

Utilisation des balises div 169

Chapter 7: Mise en forme des pages avec HTML

Utilisation d'assistances visuelles pour la mise en forme 185

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

Utilisation de cadres 205

Chapter 8: Ajout de contenu dans les pages

Utilisation du panneau Insertion 218

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

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

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

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

Utilisation d'un trace d'image pour creer une page 225

Description de l'encodage de document 225

Selection et affichage d' éléments dans la fenêtre de document 225

Couleurs 228

Zoom avant et arrêté 229

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

Utilisation du texte 231

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

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

Importation de données tabulaires 242

Importation de documents Microsoft Office (Windows uniquement) 243

Creation d'un lien vers un document Word ou Excel 243

Utilisation de formatting HTML 244

Utilisation de barres horizontales 246

Modification des combinaisons de polices 246

Insertion de dates 247
Ajout et modification d'images 248
Ajout d'une video 261
Insertion de fichiers SWF 266
Ajout de widgets Web 269
Ajout de séquences audio 270
Ajout d'objects multimédias 272
Automatisation des tâches 280

Chapter 9: Liens et navigation

A propos des liens et de la navigation 287
Etablissement de liens 289
297
Barres de navigation 298
Cartes graphiques 299
Résolution des problèmes liés aux liens 301

Chapter 10: Prévisualisation des pages

Prévisualisation des pages 304

Chapter 11: Utilisation de code de page

Informations generales sur le codage dans Dreamweaver 309
Configuration d'un environnement de codage 314
Définition des préférences de codage 316
Réduction et modification de code 321
Réduction du code 339
Optimisation et débogage de code 341
Modification de code en mode Creation 347
Utilisation de contenu d'en-tête pour les pages 353
Utilisation des inclusions cote serveur 358
Gestion des bibliothèques de balises 360
Importation de balises personalisées dans Dreamweaver 363

Chapter 12: Ajout de comportements JavaScript

Utilisation de comportements JavaScript (instructions generales) 365

Application de comportements JavaScript intégrés 368

Chapter 13: Utilisation d'autres applications

Intégration entre les applications 380
Utilisation de Fireworks et Dreamweaver 381
Utilisation de Photoshop et Dreamweaver 387
Utilisation de Flash et Dreamweaver 397
Utilisation d'Adobe Bridge et Dreamweaver 397
Utilisation de Device Central et Dreamweaver 400
Utilisation de ConnectNow et Dreamweaver 401
Extension AIR pour Dreamweaver 401

Chapter 14: Creation et gestion des modèles

A propos des modèles Dreamweaver 407

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

Creation d'un modele Dreamweaver 415

Creation de régions modifiables dans les modèles 418

Creation de régions répetées dans les modèles 420

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

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

Creation d'un modele imbrique 426

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

Exportation et importation du contenu d'un modele 433

Application ou suppression d'un modele depuis un document existant 434

Modification du contenu d'un document basé sur un modele 436

Syntaxe des modèles 439

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

Chapter 15: Création de pages Spry visuèlement

A propos du cadre applicatif Spry 442

Utilisation des widgets Spry (instructions generales) 442

Utilisation du widget Accordéon Spry 444

Utilisation du widget Barre de menus Spry 447

Utilisation du widget Panneau réductible Spry 453

Utilisation du widget Panneau à onglet Spry 455

Utilisation du widget Info-bulle Spry 458

Utilisation du widget Validation de groupe de boutons radio Spry 460

Utilisation du widget Validation de zone de texte Spry 464

Utilisation du widget Zone de texte de validation Spry 469

Utilisation du widget Validation de la selection Spry 473

Utilisation du widget Validation de case à cocher Spry 476

Utilisation du widget Validation de mot de passer Spry 478

Utilisation du widget Validation de confirmation Spry 482

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

Ajout d'effets Spry 499

Chapter 16: Création de CONTENTU pour écrons et apparciels multiples

Creation de requêtes multiméielas (CS5.5 et versions ultérieures) 504

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

Creation d'applications Web pour apparéils mobiles (CS5.5) 506

Assemblage d'applications Web 509

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

Chapter 17: Utilisation des services en ligne Adobe

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

Chapter 18: Affichage de données XML avec XSLT

A propos de XML et de XSLT 521

Exécution de transformations XSL sur le serveur 528

Execution de transformations XSL sur le client 545

Entités de caractère manquant pour XSLT 547

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

Description des applications Web 549

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

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

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

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

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

Suppression de scripts de connexion 579

Chapter 20: Ajout de contenu dynamique aux pages Web

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

Conception de pages dynamiques 583

Présentation des sources de contenu dynamique 585

Panneaux de contenu dynamique 590

Définition de sources de contenu dynamique 592

Ajout de contenu dynamique dans les pages 607

Modification d'un contenu dynamique 611

Affichage des enregistements de base de données 613

Affichage des données dynamiques 622

Ajout de comportements de serveur personalisés 623

Chapter 21: Creation visuelle d'applications

Creation de pages principales et détaillées 636

Creation de pages de recherche et de résultats 643

Creation d'une page d'insertion d'enregistrement 650

Creation d'une page de mise à jour d'enregistrement 654

Creation d'une page de suppression d'enregistrement 659

Creation de pages avec objets de manipulation de données avances (ColdFusion, ASP) 667

Creation d'une page d'enregistrement 672

Creation d'une page d'ouverture de session 675

Creation d'une page à accès restreint 677

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

Utilisation de composants ColdFusion 680

Chapter 22: Création de formulaires

Utilisation de formulaires pour recueiller des informations des utilisateurs 688

Creation de formulaires Web 691

Creation de formulaires ColdFusion 706

Chapter 23: Accessibilité

Dreamweaver et l'accessibilité 720

Chapter 1: Nouveautés

Nouveautés

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

Nouveautés (CS5.5)

Prise en charge de l'affichage sur écrans multiples

Prévisalizez vos conceptions dans des résolutions d'écran standard, ou utilisez des requêtes multimédias pour définir la résolution. Lorsque vous testez pour des apparêls qui modifiert l'orientation de la page en fonction de la façon dont l'appareil est tenu, utilisez les options paysage et portrait au cours de la prévisualisation. Pour plus d'informations, voir "Création de contenu pour écrans et apparêls multiples" on page 504.

Prise en charge des requêtes multimédias

Permet d'utiliser des requêtes multimédias pour personnelier l'apparce de votre site pour différentes résolutions d'écran. Pour plus d'informations, voir "Création de requêtes multimédias (CS5.5 et versions ultérieures)" on page 504.

Applications Web pour apparéils mobiles

Permet de conceiveir rapidement une application Web qui fonctionne sur la plupart des appareils mobiles à l'aide du widget jQuery Mobile. Pour plus d'informations, reportez-vous à la section “Création d'applications Web pour appareils mobiles (CS5.5)” on page 506.

Assemblage d'applications Web pour apparecs Android, iPhone et iPad

Permet d'assembler vos applications Web dans Dreamweaver et de les déployer sur des apparciels tournant sous Android™ et iOS. Pour plus d'informations, consultez la section "Assemblage d'applications Web sous forme d'applications mobiles natives (CS 5.5)" on page 509.

Prise en charge de HTML5, CSS3 et jQuery

Dreamweaver prendenchargelesconseildecodepourHTML5,CSS3,etjQuery.

Les mises en forme de départ sont également disponibles pour la création de nouvelles pages HTML5. Dreamweaver prend en charge la fonctionnalité HTML5 d'incorporation de videos dans les pages HTML. Pour plus d'informations, voir "Incorporation de videos aux pages Web (HTML5)" on page 261.

Le panneau CSS a été amélioré de façon à prendre en charge les propriétés CSS3 les plus féquement utilisées. Pour plus d'informations, voir "Conseils de code" on page 321 et "Améliorations à la prise en charge de CSS3 dans le panneau Styles CSS (CS 5.5)" on page 141.

Prise en charge de FTPS

Permet de transférer les données à l'aide FTPS. FTPS (FTP sur SSL) fournit une prise en charge du chiffrement et de l'authentication, au contraire de SFTP qui ne en charge que le chiffrement. Pour plus d'informations, consultez la section "Connexions FTPS (CS5.5)" on page 45.

Prise en charge du Validator W3C

Permet de creator des pages HTML et XHTML normalisées à l'aide du validateur W3C dans Dreamweaver. Pour plus d'informations, voir "Validation de documents à l'aide du validateur W3C (CS 5.5)" on page 343.

Nouveautés (CS5)

Adobe BrowserLab

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

Intégration de Business Catalyst

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

Améliorations apportées à CSS

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

Inspection CSS

Le mode Inspection permet d'afficher visuellement les propriétés du modele de boîte en feuilles CSS (dont l'espacement, la cordure et la marge) en détaïl, sans devoir dire code ou employer un utiliser tiers tel que Firebug. Voir "Inspection de CSS en mode En direct" on page 157.

Mises en forme CSS de départ

Dreamweaver CS5 comprend des mises en forme CSS de départ qui ont eté mises à jour et simplifiées. Les sélecteurs descendants complexes des mises en forme CS4 ont eté supprimés et replacés par des classes simplifiées, plus comprehensibles. Voir “Création d'une page avec une mise en forme CSS” on page 167.

Fichiers à association dynamique

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

Navigation dans le mode En direct

La navigation dans le mode En direct active les liens dans l'affichage en direct, ce qui permet d'interagir avec les applications cote serveur et les données dynamiques. Cette fonctionnalité permet d'entrez une URL afin dinspecter les pages servies à partir d'un serveur Web en direct, ainsi que de modifier les pages consultées si elles existent dans l'un de vos sites définis localement. Voir "Prévisualisation de pages dans Dreamweaver" on page 304.

Conseils de code pour classes personalisées PHP

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

Simplification de la configuration d'un site

La boîte de dialogue Définition du site remise à neuf (et désormais baptisée Configuration du site) facile la configuration d'un site Dreamweaver local, de façon à vous permettre d'entamer immédiatement la création de pages Web. La catégorie Serveur distant permet de spécifique, dans la même vue, les serveurs distants et les serveurs d'évaluation. Consultez les sections "Configuration d'une version locale de votre site" on page 42 et "Connexion à un serveur distant" on page 42.

Conseils de code spécifique au site

La fonctionnalité de conseils de code spécifique au site permet de personneliser votre environnement de codage lorsque vous utilisez des bibliothèques PHP et des cadres CMS tiers, comme WordPress, Drupal, Joomla! ou d'autres cadres. Les fischiers de thème pour les blogs et les autres fischiers et repertoires PHP personnelisés peuvent être inclus ou exclus des sources de conseils de code. Voir “Conseils de code spécifique au site” on page 324.

Améliorations de la prise en charge de Subversion

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

Fonctionnalités obsolestes

Les fonctionnalités suivantes sont devenues obsolesces depuis Dreamweaver CS5 :

Rapport de validation d'accessibilité
- Comportements de serveur ASP/JavaScript
- Vérification du comportement JavaScript du navigateur
- Connexion à un serveur FTP/RDS sans définir de site
- Contrôle du comportement JavaScript de Shockwave ou de SWF
- Créer un album photos pour le Web
- Comportement JavaScript de masquage de menu contextual
- Gestion des classes CSS disponibles d'InContext Editing
- Insérer FlashPaper
- Insertion/suppression de Mark of the Web

• Intégration de Microsoft Visual Sourcesafe
• Barres de navigation
• Comportement JavaScript Lire le son
• Menu Afficher les événements (panneau Comportements)
• Comportement JavaScript d'affichage de menu contextuel
• Comportements JavaScript de montage
• Validation des balises
• Affichage de Live Data

Chapter 2: Espace de travail

Déroulement du travail et espace de travail dans Dreamweaver

Présentation des processus de Dreamweaver

You pouvez utiliser plusieurs approches pour creer un site Web. Voici l'une des approches possibles :

Planification et configuration de votre site

Déterminez l'emplacement où vos fichiers seront enregistrés et examinez les besoin du site, les profils de ses utilisateurs et les objectifs du site. Il convient également d'examiner les conditions techniques requises, notamment l'accès utiliser et les restrictions en matière de navigateurs, de plug-ins ou de téléchargement. ÀpRES avoir organisé vos informations et défini une structure, vous pouvez commencer la création du site. (Voir "Utilisation de sites Dreamweaver" on page 40.)

Organisation et gestion des fichiers de votre site

Dans le panneau Fichiers, vous pouvez facilement ajouter, supprimer et denomrer des fichiers et des dossiers afin de modifier l'organisation en fonction de vos besoin. Dans le panneau Fichiers, vous trouvrez de nombreux outils permettant la gestion de votre site, le transfert de vos fichiers vers et depuis un serveur distant, la configuration d'un processus d'archivage/extraction pour empêcher l'écrasement des fichiers et la synchronisation des fichiers sur vos sites locaux et distants. Utilisez le panneau Actifs pour organiser facilement les actifs sur un site ; vous pouvez ensuite faire glisser la plupart des actifs directement du panneau vers un document Dreamweaver. Dreamweaver vous permet également de:gérer certains aspects de vos sites Adobe® Contribute®. (Voir "Gestion des fichiers et des dossiers" on page 80 et "Gestion des actifs et des bibliothèques" on page 119.)

Mise en forme de vos pages Web

Selectionnez la technique de mise en forme de votrechioix ou combinez les options de mise en forme de Dreamweaver pour définir la presentation de votre site. Vous pouvez utiliser des éléments PA, des styles de positionnement CSS ou des mises en forme CSS prédéfinitions de Dreamweaver pour définir la mise en forme. Les outils de création de tableaux vous permettent de connavoir des pages rapidement en dessinant, puis en réorganisant la structure des pages. Si vous souhaitez afficher plusieurs éléments simultanément dans un navigateur Web, vous pouvez utiliser des cadres pourmettre en forme vos documents. Finalement, vous pouvez creer de nouvelles pages à partir d'un modele Dreamweaver, puis actualiser automatiquement leur mise en forme lorsque le modele change. (Voir "Creation de pages avec CSS" on page 132 et "Mise en forme des pages avec HTML" on page 185.)

Ajout de contenu dans les pages

Ajoutez des actifs et des éléments de conception, par exemple du texte, des images, des images avec effet de survol, des cartes graphiques, des couleurs, des animations, des sons, des liens HTML, des menus de reroutage, etc. Vous pouvez utiliser les fonctions intégrées de creation de page pour les éléments tels que les titres et les arrêtre-plans, taper directement dans la page ou importer du contenu d'autres documents. Dreamweaver fournit également des comportements permettant d'executer des tâches en réponse à des événements spécifique, comme par exemple la validation d'un formulaire lorsque le visiter clique le sur bouton Envoyer ou l'ouverture d'une deuxième fenêtre de navigateur lorsque le chargement de la page principale est terminé. Finalement, Dreamweaver comprend des outils permettant d'optimiser les performances de votre site Web et de tester les pages pour garantir leur compatibilité avec différents navigateurs Web. (Voir "Ajout de contenu dans les pages" on page 218).

Creation de pages par codage manuel

Le codage manuel des pages Web constitue une autre approche de la création de pages. Dreamweaver dispose d'outils d'édition visuelle conviviaux ainsi que d'un environnement de codage sophistique. Vous pouvez utiliser l'une ou l'autre de ces méthodes (ou bien les deux) pour créé et modifier vos pages. (Voir “Utilisation de code de page” on page 309.)

Configuration d'une application Web pour un contenu dynamique

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

Creation de pages dynamiques

Dans Dreamweaver, vous pouvez définir diverses sources de contenu dynamique, y compris des yeux d'enregistements 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.

Vou puez defineir une configuration de page qui affiche un ou plusieurs enregistements à la fois (ou plusieurs pages d'enregistements), ajoute des liens spéciaux permettant de passer d'une page d'enregistements à une autre et créé des compteurs d'enregistements pour faciliter la gestion de ces derniers. Vous pouze encapsuler la logique d'application ou d'entreprise en faisant appel à des technologies telles que Adobe * ColdFusion* et les services Web. Si vous ave reason de plus de souplesse, vous pouze creator des comportements de serveur et formulaires interactifs personnalisés. (Voir "Ajout de contenu dynamique aux pages Web" on page 580.)

Test et publication

Le test de vos pages est un processus continu qui se déroule tout au long du cycle de développement. A la fin de ce cycle, vous publiiez le site sur un serveur. De nombreux développpeurs programmment également une maintenance régulière pour s'assurer que le site reste à jour et est opérationnel. (Voir “Acquisition et placement de fichiers depuis ou vers votre serveur” on page 89.)

Voutrouvrez undidacticiel video sur les possibilites offertes par Dreamweaver a l'adresse

www.adobe.com/go/lrvid4040_dw_fr.

Vue d'ensemble de la presentation de l'espace de travail

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

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

A. Barre d'application B. Barre d'outils du document C. Fenetre de document D. Commutation d'espace de travail E. Groupes de panneaux F. CS Live G. Sénécteur de balises H. Inspecteur Propriétés I. Panneau Fichiers

Sous Mac OS®, Dreamweaver peut afficher de multiples documents dans une seule fenêtre, avec des onglets qui identifient chacun d'eux. Dreamweaver permet également d'afficher un espace de travail flottant où chaque document dispose de sa propre fenêtre. Les groupes de panneaux sont initialement ancrés ensemble, mais vous pouvez les séparer pour les faire apparaitre dans leur propre fenêtre. Lorsque des groupes de panneaux sont ancrés et que la fenêtre de document est agrandie, le redimensionnement, l'affichage et le masquage de panneaux entraîne le redimensionnement automatique du document principal, comme c'est le cas dans Windows.

A. Barre d'application B. Barre d'outils du document C. Commutation d'espace de travail D. Fenetre de document E. CS Live F. Groupes de pannaaux G. Sellecteur de balises H. Inspecteur Propriétés I. Panneau Fichiers

Voutrouvrez undidacticiel sur l'utilisation des differents espaces de travail de Dreamweaver à l'adresse www.adobe.com/go/lrvid4042_fr.

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

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

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

Ecran d'accueil Permet d'ouvrir un document recent ou de creer un nouveau document. Vous pouze également, à partir de l'écran d'accueil, surviler Dreamweaver ou acceder à un didacticiel.

Barre d'application Sur toute la largeur de la partie supérieure de la fenetre d'application, cette barre contient une section de commutation d'espace de travail, des menus (Windows uniquement) et d'autres contrôles d'application.

Barre d'outils du document Contient des boutons permettant d'acceder aux différents modes d'affichage de la fenetre du document (teils que le mode Creation ou le mode Code), de définir les différentes options d'affichage et d'effectuer certaines opérations courantes, telles que la prévisualisation dans un navigateur.

Barre d'outils standard Non affichée dans l'agencement par défaut de l'espace de travail. Contient des boutons correspondant aux opérations courantes des menus Fichier et Edition : Nouveau, Ouvrir, Parcourir dans Bridge,

Enregistrer, Enregistrer tout, Imprimer le code, Couper, Copier, Coller, Annuler et Répéter. Pour afficher la barre d'outils standard,CHOISSEZ AFFICHAGE > BARRES d'outils > Standard.

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

La barre d'outils de rendu de style Masquée par défaut. Composée de boutons qui vous permettent d'avoir un aperçu de votre création dans différents types de matière si vous utilisez des feuilles de style dépendantes du contrôle. Elle contient également un bouton qui permet d'activer ou de désactiver les styles CSS (Cascading Style Sheets, feuilles de style en cascade).

Fenêtre de document Affiche le document que vous creez et modifiez.

L'inspecteur Propriétés Permet de visualiser et de modifier diverses propriétés de l'objet ou du texte sélectionné. Chaque objet possède des propriétés différentes. L'inspecteur Propriétés n'est pas développé par défaut dans la presentation de l'espace de travail Codeur.

Sélecteur de balises Situé dans la barre d'état, dans le bas de la fenêtre de document. Affiche la hierarchie des balises entourant la sélection active. Clique sur une balise quelconque dans la hierarchie pour la selectionner avec son contenu.

Panneaux Permet de surveiller et de modifier votre travail. Citons par exemple le panneau Insertion, le panneau Styles CSS et le panneau Fichiers. Pour développer un panneau, double-cliquez sur son onglet.

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

Le panneau Fichiers Permet de gérer vos fichiers et dossiers, qu'ils fassent partie d'un site Dreamweaver ou qu'ils se trouvent sur un serveur distant. Il permet également d'acceder à tous les fichiers situés sur votre disque local, tout comme l'Explorateur Windows (Windows) ou le Finder (Macintosh).

Présentation de la fenêtre de document

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

Mode Creation Un environnement de creation pour la mise en forme visuelle des pages, l'edition visuelle et le développement rapide d'applications. Dans ce mode, Dreamweaver affiche une représentation visuelle entière modifiable du document, similaire à la représentation de la page sur un navigateur.

Mode Code Environnement de codage manuel pour rédigier et modifier du code HTML, JavaScript et de langage de serveur, tel que le langage PHP ou CFML (ColdFusion Markup Language), ou tout autre type de code.

Mode Code fractionné Version fractionnée du mode Code, qui permet de travailler dans différentes sections du document en même temps.

Modes Code et Creation Permettent d'obtenir l'affichage Code et l'affichage Creation du document dans une meme fenetre.

Mode En direct Tout comme le mode Creation, le mode Affichage en direct fournit une représentation plus réaliste de l'apparce de votre document dans un navigateur. Il permet également d'interagir avec le document comme vous le feriez dans un navigateur. Le mode Affichage en direct n'est pas modifiable. Vous pouvez toutefois apporter des modifications en mode Code et actualiser l'affichage en direct afin de voir l'impact de ces modifications.

Mode Code en direct Uniquement disponible lors de l'affichage d'un document en mode Affichage en direct. Le mode Code en direct affiche le code qu'un navigateur utilise pour executer la page. Il peut changer de manière dynamique lorsque vous interagissez avec la page en mode Affichage en direct. Le mode Code en direct n'est pas modifiable.

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

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

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

More Help topics

"Utilisation de la fenetre de document" on page 19

"A propos de l'affichage en direct" on page 304

"Ouverture des fichiers associés" on page 75

"Informations generales sur le codage dans Dreamweaver" on page 309

Présentation de la barre d'outils de document

La barre d'outils Document contient des boutons qui permettent de basculer rapidement entre différents mode d'affichage de votre document. La barre d'outils contient également plusieurs commandes et options courantes permettant d'afficher le document et de le transférer d'un site local vers un site distant. L'illustration ci-dessous représentée la barre d'outil Document développée.

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

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

Afficher le mode Code Affiche uniquement le mode Code dans la fenetre de document.

Afficher les modes Code et Creation Fractionne la fenetre de document afin d'afficher le mode Code et le mode Creation. Dans ce cas, l'option Mode Creation en haut est activée dans le menu Options d'affichage.

Afficher le mode Creation Affiche uniquement le mode Creation dans la fenetre de document.

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

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

Mode Code en direct Affiche le code tel qu'il est utilisé par le navigateur pour exécuter la page.

Titre du document Permet d'attribuer un titre à votre document et l'afficher dans la barre de titre du navigateur. Si vous document possede déjà un titre, celui-ci s'affiche dans ce champ.

Gestion des fichiers Affiche le menu Gestion des fichiers.

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

Actualiser mode Creation Actualise le mode Creation 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 Creation. Vous doivent exéçuter tout d'abord certaines opérations, comme enregistrer le fichier ou utiliser ce bouton.

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

Afficher les options Permet de définir les options d'affichage des modes Code et Creation, notamment le mode devant s'afficher au-dessus de l'autre. Les options du menu s'appliquent à l'affichage actuel : Mode Creation, mode Code ou les deux.

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

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

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

More Help topics

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

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

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

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

Présentation de la barre d'outils standard

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

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

La barre d'outils de rendu de style (masquée par défaut) est composée de boutons qui vous permettent d'avoir un aperçu de votre création dans différents types de matière si vous utilisez des feuilles de style dépendantes du matière. Elle contient également un bouton qui permet d'activer ou de désactiver les styles CSS. Pour afficher la barre d'outils standard,CHOISSEZ 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 composer une rège 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-media écran (qui indique comment une page apparait sur un écran d'ordinateur). Vous pouvez'afficher les rendus de type de-media suivants en cliquant sur les boutons respectifs dans la barre d'outils de rendu de style.

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

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

Rendu pour le type de support Télephone mobile Indique comment la page apparait sur un appareil portatif comme un téléphone mobile et un BlackBerry.

Rendu pour le type de support Projection Indique comment la page apparait sur un projecteur.

Rendu pour le type de support TTY Indique comment la page apparait sur un appeareil de type teltype.

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

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

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

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

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

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

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

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

More Help topics

"Prévisualisation de pages dans Dreamweaver" on page 304

Présentation de la barre d'outils de codage

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

Vou ne pouvez pas detacher ni déplacer la barre d'outils Codage, mais vous pouvez la masquer (Affichage > Barres d'outils > Codage).

Vou puez é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, vousdez pour cela modifier le fichier XML qui généra la barre d'outils. Pour plus d'informations, voir Extension de Dreamweaver.

More Help topics

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

Présentation de la barre d'etat

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

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

Sélecteur de balises Affiche la hierarchie des balises entourant la sélection active. Cliquez sur une balise quelconque dans la hierarchie pour la sélectionner avec son contenu. Cliquez sur

pour selectionner tout le corps du document. Pour définir les attributs class ou id d'une balise dans le selecteur de balises, cliquez avec le bouton droit de la souris (Windows) ou en maintainant la touche Option enfoncée (Macintosh) sur la balise etCHOisissez une classe ou un ID dans le menu contextual.

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

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

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

Menu contextuel Taille de fenêtre Non disponible en mode Code. Permit de redimensionner la fenêtre du document selon des dimensions prédéfines ou personnalisées. Lorsque vous modifiez la taille d'affichage d'une page en mode Création ou Affichage en direct, seules les dimensions de la vue changent. La taille du document n'est pas modifiée.

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

Taille du document et temps de téléchargement Fournit une estimation de la taille du document et du temps de téléchargement de la page, ainsi que la liste de tous les fischiers dépendants, tels que les images et autres fischiers de données.

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

More Help topics

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

"Zoom avant et arrêté" on page 229

"Redimensionnement de la fenetre de document" on page 21

"Définition des préférences de durée et de taille des télécharges" on page 230

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

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

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

More Help topics

"Ancrage et annulation d'ancrage de panneaux" on page 26

"Utilisation de l'inspecteur Propriétés" on page 23

Présentation du panneau Insertion

Les boutons qui compose le panneau Insertion permettent de creer et d'inserer des objets, tels que des tableaux, des images et des liens. Ces boutons sont organises en plusieurs catégories que vous pouvez afficher en alternance enCHOISSSANT LA CATEGORIE DESIREE dans le menu Categorie. D'autres catégories s'affichent lorsque le document selectionné contient du code serveur, tel que des documents ASP ou CFML.

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

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

Categorie Commun Permet de creer et d'inserer les objets les plus courament utilisés, comme les images et les tableaux.

Catégorie Mise en forme Permet d'insérer des tableaux, des éléments de tableau, des balises div, des cadres et des widgets Spry. Vous pouvez désir deux modes pour les tableaux : Standard (par défaut) et Développé.

Categorie Formulaires Contient des boutons permettant de creer des formulaires et d'inserer des éléments de formule, dont des widgets de validation Spry.

Categorie Données Permet d'insérer des éléments de données Spry et d'autres éléments dynamiques, tels que des jours d'enregistements, des régions repétées et des formulaires d'insertion et de mise à jour d'enregistements.

Categore Spry Contient des boutons permectant de creer des pages Spry, avec des objets de données Spry et des widgets.

La catégorie InContext Editing Contient des boutons destinés à la création de pages InContext Editing, dont des boutons pour les régions modifiables, pour les régions répétées et pour la gestion des classes CSS.

Categore Texte Permet d'inserer diverses balises de formatage de texte et de liste, telles que b, em,p,h1 et ul.

Categorie Favoris Permet de regrouper et d'organiser, dans un espace commun, les boutons du panneau Insertion que vous utilisez le plus fréquemment.

Catégories de code serveur Disponibles uniquement pour les pages utilisant un langage serveur spécifique, comme ASP, CFML Basic, CFML Flow, CFML Advanced, et PHP. Ces catégories proposent des objets de type code serveur que vous pouvez insérer en mode Code.

Contrairement aux autres panneaux de Dreamweaver, vous pouvez-retirer le panneau Insertion de son emplacement d'ancrage par défaut et le placer à l'horizontal, au-dessus de la fenêtre de document. Dans ce cas, ce panneau se transforme en barre d'outils, même s'il est impossible de la masquer et de l'afficher comme vous le feriez pour les autres barres d'outils.

More Help topics

"Utilisation du panneau Insertion" on page 218

Présentation du panneau Fichiers

Vou puez utilise les panneaux Fichiers pour afficher et exploiter les fichiers dans voitre site Dreamweaver.

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

Pour les sites Dreamweaver, il est également possible de personnaliser le panneau Fichiers en modifiant la vue (site local ou distant) qui s'affiche par défaut dans le panneau réduit.

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

Pourmettrea jour manuellement le contenu du panneau,utilisez le bouton Actualiser dans le panneau.Toutefois, 1'etat d'extraction actuel des fichiers n'est mis a jour que lorsque la mise a jour automatique est activee.

More Help topics

"Utilisation des fichiers depuis le panneau Fichiers" on page 83

Présentation du panneau Styles CSS

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

Vou puevez redimensionner n'importe quel volet en faisant glisser les cadres entre les volets.

En mode Current (Selection), le panneau Styles CSS presente trois volets : un volet Summary for Selection

(Récapitulatif de la sélection) qui présente les propriétés CSS de la sélection en cours dans le document; un volet Rules (Règles) qui précise l'emplacement des propriétés sélectionnées (ou une cascade de règles pour la balise sélectionnée, selon votre sélection); et un volet Propriétés qui vous permet de modifier les propriétés CSS de la règle définitissant la sélection.

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

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

Présentation des guides visuels

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

• Adapter instantanément la taille de la fenêtre de document à un format d'affichage donné, afin de contrôler la disposition des éléments sur la page
• Utiliser un tracé d'image en arrêtre-plan de la page, de manière à pouvoir reproductive plus aisément une mise en forme créé dans une application graphique telle que Adobe® Photoshop® ou Adobe® Fireworks®.

Utiliser des regles et des guides comme repere visuel pour le positionnement et le redimensionnement précis des éléments de page
- Utilisez la grille afin d'effectuer un positionnement et un redimensionnement précis des éléments à positionnement absolu (PA).

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

More Help topics

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

Utilisateurs de GoLive

Si vous utilisez GoLive jusqu'ici et que vous souhaitez passer à l'utilisation de Dreamweaver, vous pouvez consultez une presentation en ligne de l'espace de travail et du déroulement du travail dans Dreamweaver ainsi qu'une discussion sur les moyens de faire migrer votre site vers Dreamweaver.

More Help topics

Didacticiel consacre à Dreamweaver pour les utilisateurs de GoLive

Utilisation de la fenêtre de document

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

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

Activation du mode Code

Effectuez l'une des opérations suivantes :
- Choisissez Affichage > Code.
- Dans la barre d'outils du document, cliquez sur le bouton Afficher le mode Code.

Code

Activation du mode Code fractionné

Le mode Code fractionné scinde le document en deux parties, ce qui permet de travailler sur deux sections du code en même temps.

Choisissez Affichage > Fractionner le code.

Activation du mode Creation

Effectuez l'une des opérations suivantes:
- Choisissez Affichage > Création.

• Dans la barre d'outils Document, cliquez sur le bouton Afficher le mode Creation.

Creation

Affichage à la fois en modes Code et Création

Effectuez l'une des opérations suivantes :
- Choisissez Affichage > Code et création.
- Dans la barre d'outils du document, cliquez sur le bouton Afficher les modes Code et Creation.

Fractioner

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

Basculement entre les modes Code et Création

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

Si les deux modes sont affichés simultanément dans la fenêtre de document, ce raccourci clavier permet d'activer tour à tour les deux modes.

Fractionnement vertical des modes

Cette option n'est disponible que pour le mode Code fractionné et les modes Code et Création (mode fractionné). Elle est désactivée pour le mode Code et le mode Création.

1 Veillez a bien etre en mode Code fractionne (Affichage > Code fractionne) ou en modes Code et Creation (Affichage > Code et Creation).
2 Choisissez Affichage > Fractionner a la verticale.

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

More Help topics

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

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

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

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

More Help topics

"Gestion des fenêtres et des panneaux" on page 25

"Affichage de documents à onglets (Dreamweaver sur Macintosh)" on page 31

Affichage en cascade des fenêtres de document

Choisissez Fenetre > Cascade.

Affichage en mosaïque des fenêtres de document

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

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

Redimensionnement de la fenetre de document

La barre d'etat 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éé de nouvelles.

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

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

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

Choisissez l'une des tailles affichées dans le menu contextuel Taille de fenêtre qui se trouve dans la barre d'etat de la fenêtre de document. Dreamweaver CS5.5 et les versions ultérieures fournissent une plus vaste liste de besoin, y compris des options pour les principaux péripériques mobiles ( comme illustré ci-dessous).

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

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

Note: (Windows uniquely) Les documents dans la fenetre de document sont agridis par défaut ; il est impossible de les redimensionner lorsqu'ils sont agridis. Pour annuler l'affichage du document en mode agrandi, cliquez sur l'icone

dans le coin supérieur droit du document.

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

1 Cliqueur Modifier les tailles dans le menu contextuel Taille de fenetre.
2 Cliques sur une valeur de largeur ou de hauteur dans la liste Taille de la fenetre, puis entrez une nouvelle valeur.

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

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

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

1 Cliqueur Sur Modifier les tailles dans le menu contextuel Taille de fenetre.
2 Cliquez dans l'espace vierge qui apparait sous la derniere valeur de la colonne Largeur.

3 Indiquez les valeurs souhaitees pour Largeur et Hauteur.
Pour définitir soit la largeur, soit la hauteur, laissez l'un des champs vide.
4 Cliquez dans le champ Description pour saisir un texte décrivant la taille ajoutée.

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

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

1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
2 Choisissez Barre d'etat (CS5) ou Tailles des fenêtres (CS5.5 et versions ultérieures) dans la liste de catégories sur la gauche.
3 Parmi les options suivantes, définissee celles de votrechioix :

Taille de la fenêtre Permet de personneliser les tailles de fenêtre qui s'affichent dans le menu contextual du la barre d'etat.

Vitesse de connexion Determine la vitesse de connexion (exprimée en kilobits par seconde) utilise pour calculer le temps de téléchargement. Le temps de téléchargement de la page est indiqué dans la barre d'etat. Celui des images est affiché dans l'inspecteur Propriétés lorsqu'une image est selectionnée dans la fenêtre de document.

More Help topics

"Présentation de la barre d'objet" on page 13

"Redimensionnement de la fenetre de document" on page 21

Rapports dans Dreamweaver

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

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

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

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

Navigateurs compatibles Permet de tester le code HTML de vos documents afin de déterminer s'il contient des balises ou des attributs non pris en charge par les navigateurs cibles.

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

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

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

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

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

Affichage des barres d'outils

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

• Sélectionnéz Affichage > Barres d'outils, puis Sélectionnéz la barre d'outils voulue.
• Cliquez avec le bouton droit de la souris (Windows) ou en maintainant la touche Contrôle enforcée (Macintosh) sur l'une des barres d'outils et Sélectionnement la barre d'outils dans le menu contextuel.

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

More Help topics

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

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

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

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

Utilisation de l'inspecteur Propriétés

L'inspecteur Propriétés permet d'examiner et de modifier les propriétés les plus fréquentes de l'élement de la page sélectionnée, tel que le texte ou un object inséré. Le contenu de l'inspecteur Propriétés varie en fonction de l'élement sélectionné.

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

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

More Help topics

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

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

"Ancrage et annulation d'ancrage de panneaux" on page 26

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

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

Choisissez Fenetre > Propriétés.

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

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

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

1 Sélectionnez l'élément de la page dans la fenêtre de document.
Si nécessaire, développement l'inspecteur Propriétés afin que toutes les propriétés de l'élement seLECTIONné poussent apparaitre.
2 Modifiez les propriétés de votrechioix dans l'inspecteur Propriétés.

Note: 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'icone Aide (?) dans le coin supérieur droit de l'inspecteur Propriétés.

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

• Cliquez hors des champs de texte de modification des propriétés.
• Appuyez sur la touche Entrée (Windows) ou Retour (Macintosh).
• Appuyez sur la touche de tabulation pour passer à une autre propriété.

Utilisation des menus contextuels

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

1 Cliquez avec le bouton droit de la souris (Windows) ou en maintainant la touche Ctrl enfoncée (Macintosh) sur l'objet ou la fenetre qui vous interesse.

2 Choisissez une commande dans le menu contextual.

Personnalisation de l'espace de travail de Dreamweaver CS5

Gestion des fenêtres et des panneaux

Pour creer un espace de travail personalise, vous déplacez et manipulez les fenêtres de document et les panneaux. Vous pouvez également enregister des espaces de travail, puis passer de l'un à l'autre. Dans Fireworks, denommer les espaces de travail personalisés peut provoquer un comportement inattendu.

Note: les exemples suivants sont basés sur Photoshop. L'espace de travail est le même dans tous les produits.

Réorganisation, ancrage ou déplacement des fenêtres de document

Les fenêtres de document comportent des ontlets lorsqu'elles fichiers sont ouverts.

Pour modifier l'ordre des onglets de la fenetre de document, faites glisser un onglet de la fenetre à l'emplacement youlu dans le groupe.
Pour annuler l'ancrage d'une fenetre de document à un groupe de fenêtes, faites glisser l'onglet de cette fenetre hors du groupe.

Note: dans Photoshop, vous pouvez également selectionner Fenetre > Réorganiser > Afficher dans une fenetre flottante pour afficher une seule fenetre flottante de document ou Fenetre > Réorganiser > Tout afficher dans des fenêtes flottantes pour afficher simultanément toutes les fenêtes flottantes de document. Pour plus d'informations, voir la note technique kb405298.

Note: Dreamweaver ne permet pas d'ancrer des fenêtres de document ni d'annuler l'ancrage de ces fenêtres. Utilisez le bouton Réduire de la fenêtre de document pour creer des fenêtres flottantes (sous Windows), ou Fenêtre > Mosaïque verticale pour creer des fenêtres de document côte à côte. Pour plus d'informations sur cette rubrique, recherche « Mosaié que verticale » dans l'aide de Dreamweaver. Le flux de travaux diffère légèrement pour les utilisateurs Macintosh.

Pour ancrer une fenetre de document à un groupe de fenêtes de document distinct, faites glisser cette fenetre dans le groupe.
- Pour创建工作 des groupes de documents emplés ou juxtaposés, faites glisser la fenêtre vers l'une des zones de largage situées en haut, en bas ou sur les côts d'une autre fenêtre. Vous pouvez également selectionner une disposition pour le groupe en utilisant le bouton Disposition de la barre d'application.

Note: certains produits ne prennant pas en charge cette fonctionnalité. Cependant, votre produit peut désenter des commandes Cascade et Mosaïque (ou Juxtaposer), sous le menu Fenêtre, pour vous permettre d'organiser vos documents.

• Dans un groupe à onglets, pour passer à un autre document lors du glissement d'une seLECTION, faites glisser cette seLECTION sur l'onglet du document souhaité pendant un moment.

Note: certains produits ne prennett pas en charge cette fonctionnalité.

Ancrage et annulation d'ancrage de panneaux

Un dock est un ensemble de panneaux ou de groupes de panneaux affichés ensemble, généralement en position verticale. Pour ancrer et annuler l'ancrage des panneaux, insérez-les dans le dock et déplacez-les hors du dock.

Pour ancrer un panneau, cliquez sur l'onglet correspondant et faites-le glisser dans le dock, au-dessus, sous ou entre d'autres panneaux.
Pour ancrer un groupe de panneaux, cliquez sur sa barre de titre (barre vide de couleur unie située au-dessus des onglets) et faites-le glisser dans le dock.
Pour supprimer un panneau ou un groupe de pannaaux, faites-le glisser en dehors du dock en cliuant sur l'onglet ou la barre de titre. Vous pouvez faire glisser l'element vers un autre dock ou le rendre flottant.

Déplacement du panneau Navigation vers un nouveau dock ; cette opération est indiquée par une surbrillance verticale bleue.

Panneau Navigation dans son propre dock

Voupez faire en sorte que les panneaux n'occupent pas la totalite de l'espace disponible dans un dock. Faites glisser le bord inférieur du dock vers le haut de sorte qu'il ne coince plus avec le bord de l'espace de travail.

Déplacement de panneaux

Lorsque vous déplacez des panneaux, des zones de largage en surbrillance bleue apparaisent : il s'agit des zones dans lesquelles vous pouvez déplacer le panneau. Vous pouvez, par exemple, déplacer un panneau vers le haut ou vers le bas en le faisant glisser sur la fine zone de largage bleue située au-dessus ou sous un autre panneau. Si vous faites glisser le panneau vers un emplacement autre qu'une zone de largage, ce dernier flotte dans l'espace de travail.

Note: la position de la souris active la zone de largage (au lieu de la position du panneau). Si la zone de largage ne s'affiche pas, faites glisser la souris à l'emplacement où devrait se situer la zone de largage.

• Pour déplacer un panneau, faites-le glisser enclinquant sur son onglet.
• Pour déplacer un groupe de panneaux, faites glisser la barre de titre.

La fine zone de largage bleue indique que le panneau Couleur va etre ancre seul au-dessus du groupe de panneaux Calques. A.Barre de titre B.Onglet C.Zone de largage

Pour empêcher l'ancrage d'un panneau, appuyez sur la touche Ctrl (Windows) ou Commande (Mac OS) lors de son déplacement. Pour annuler l'opération, appuyez sur la touche Echap lors du déplacement du panneau.

Ajout et suppression de panneaux

Lorsque you supprimez tous les panneaux d'un dock, ce dernier disparait. You pouze creer un dock en déplaçant les panneaux vers le bord croit de l'espace de travail jusqu'à ce qu'une zone de largage soit visible.

• Pour supprimer un panneau, cliquez sur son onglet avec le bouton droit de la souris (Windows) ou en appuyant sur la touche Contrôle (Mac), puis selectionnez l'option Fermer ; vous pouze également le déslectionner dans le menu Fenêtre.
  Pour ajouter un panneau, selectionnez-le dans le menu Fenetre et ancrez-le a l'emplacement de votre choix.

Manipulation de groupes de panneaux

Pour déplacer un panneau dans un groupe, faites glisser son onglet vers la zone de largage en surbrillance située dans le groupe.

Ajout d'un panneau à un groupe

• Pour réorganiser les panneaux d'un groupe, faites glisser l'onglet du panneau de votre choix vers son nouvel emplacement.
  Pour rendre un panneau flottant, faites-le glisser en dehors du groupe au moyen de son onglet.
• Pour déplacer un groupe, faites glisser la barre de titre (zone située au-dessus des onglets).

Empilage de panneaux flottants

Lorsque vous faitesoir un panneau de son dock et que you le place en dehors de toute zone de largage, ce panneau flotte dans l'espace de travail. Un panneau flottant peut etre placé à n'importe quel endroit dans l'espace de travail. Vous pouvez empiler des panneaux ou groupes de panneaux flottants de sorte quils se comportent comme une seule entité lorsque vous faites glisser la barre de titre supérieure.

Panneaux empilés flottants

Pour empiler des panneaux flottants, cliquez sur un onglet pour faire glisser le panneau correspondant vers la zone de largage située au bas d'un autre panneau.
Pour modifier l'ordre d'empilage, cliquez sur un onglet afin de faire glisser le panneau correspondant vers le haut ou vers le bas.

Note: prenez soit de « déposer » l'onglet sur l'étroite zone de largage située entre les panneaux, plutôt que sur la large zone de largage située dans une barde de titre.

Pour rendre un panneau ou groupe de panneaux de la pile flottant, déplacez-le hors de la pile au moyen de son onglet ou de sa barre de titre.

Redimensionnement des panneaux

• Pour réduire ou agrandir un panneau, un groupe de panneaux ou une pile de panneaux, cliquez deux fois sur un onglet. Vous pouvez également double-cliquer sur la zone d'onglets (l'espace vide situé à côté des onglets).
• Pour redimensionner un panneau, faites glisser l'un de ses côts. Cette méthode de redimensionnement ne fonctionne pas toujours, notamment avec le panneau Couleur de Photoshop.

Réduction et développement des icones de panneaux

Voupez réduire des panneaux à la taille d'icones afin de limiter l'encombrement de l'espace de travail. Dans certains cas, les panneaux sont réduits de la sorte dans l'espace de travail par défaut.

Panneaux réduits à la taille d'icones

Panneaux agrandis

Pour réduire ou développer toutes les icônes de panneau d'une colonne, cliquez sur la double flèche située dans la partie supérieure du dock.
- Pour développer une seule icone de panneau, cliquez sur cette dernière.
Pour redimensionner les icones de panneau afin de voir les icones uniquement (et non les libellés), reglez la largeur du dock jusqu'à ce que le texte ne soit plus visible. Pour afficher à nouveau le texte, augmentez la largeur du dock.
Pour réduire à la taille d'une icône un panneau qui a été développé, cliquez sur son onglet, sur son icône ou sur la double flèche affichée dans sa barre de titre.

Dans certaines applications, si vous selectionnez l'option Réduction automatique des panneaux d'icones dans les préférences d'interface ou les options d'interface utilisateur, une icone de panneau développée est réduite automatiquement lorsque vous cliquez en dehors de cette dernière.

Pour ajouter un panneau flottant ou un groupe de panneaux à un dock d'icones, faites-le glisser au moyen de son onglet ou de sa barre de titre (les panneaux sont réduits automatiquement à la taille d'icones lorsque vous les ajoutez à un dock d'icones).
- Pour déplacer une icône de panneau (ou un groupe d'icones de panneau), faites-la glisser. Vous pouvez déplacer des icones de panneau vers le haut et vers le bas dans le dock, dans d'autres docks (elles apparaissent dans le style du panneau de ce dock) ou en dehors du dock (elles apparaissent sous la forme d'icones flottantes).

Enregistrement et basculement d'un espace de travail à l'autre

En enregistrant la taille et la position actuelles des panneaux comme espace de travail nommé, vous gardez la possibilité de restaurer cet espace par la suite, et ce, même si vous avez déplaced ou fermé un panneau. Les noms des espaces de travail enregistrés sont visibles dans le sélecteur d'espace de travail de la barre d'application.

Enregistrement d'un espace de travail personnelisé

1 Lorsque l'espace de travail se trouve dans la configuration que vous souhaitez enregistrer, utilisez l'une des méthodes suivantes :

• (Illustrator) Choisissez la commande Fenêtre > Espace de travail > Enregistrer l'espace de travail.
• (Photoshop, Illustrator, InCopy) Choisissez la commande Fenètre > Espace de travail > Nouvel espace de travail.
• (Dreamweaver) Choisissez la commande Fenêtre > Présentation de l'espace de travail > Nouvel espace de travail.
• (Flash) Choisissez la commande Nouvel espace de travail dans le sélecteur d'espace de travail de la barre d'application.
• (Fireworks) Choisissez la commande Enregister la presentation active dans le sélecteur d'espace de travail de la barre d'application.

2 Attribuez un nom à l'espace de travail.
3 (Photoshop, InDesign) Sélectionnéz ensuite une ou plusieurs options dans la section Capture :

Position des panneaux Enregistre la position actuelle des panneaux (InDesign uniquement).

Raccourcis clavier Enregistre l'ensemble de raccourcis clavier actuel (Photoshop seulement).

Menu ou Personalisation des menus Enregistre l'ensemble de menus actuels.

Affichage de l'espace de travail ou basculement d'un espace de travail à l'autre

Sélectionnez un espace de travail dans le sélecteur d'espace de travail de la barre d'application.

Dans Photoshop, vous pouvez attribuer un raccourci clavier à chacun des espaces de travail pour pouvoir passer de l'un à l'autre plus rapidement.

Suppression d'un espace de travail personnelisé

• Choisissez l'option Gérer les espaces de travail dans le sélecteur d'espace de travail de la barre d'application, Sélectionnez l'espace de travail, puis cliquez sur la commande Supprimer. (Cette option n'est pas disponible dans Fireworks.)
• (Photoshop, InDesign, InCopy) Sélectionné la commande Supprimer l'espace de travail dans le sélecteur d'espace de travail.
• (Illustrator) Choisissez la commande Fenètre > Espace de travail > Gérer les espaces de travail, sélectionnez l'espace de travail, puis cliquez sur l'icone Supprimer.
• (Photoshop, InDesign) Choisissez la commande Fenêtre > Espace de travail > Supprimer l'espace de travail, sélectionnez l'espace de travail, puis cliquez sur le bouton Supprimer.

Restauration de l'espace de travail par défaut

1 Sélectionnez l'espace de travail de base ou par défaut à l'aide du sélecteur situé dans la barre d'application. Pour Fireworks, consultez l'article http://www.adobe.com/devnet/fireworks/articles/workspacemanager-panel.html.

Note: dans Dreamweaver, Designer correspond à l'espace de travail par défaut.

2 Pour Fireworks (Windows), supprimez les dossiers suivants :

Windows Vista \utilisateur\\AppData\RoamingAdobe\Fireworks CS4

Windows XP \Documents and Settings\Application Data\Adobe\Fireworks CS4

3 (PhotoShop, InDesign, InCopy) Choisissez la commande Fenêtre > Espace de travail > Réinitialiser [Nom de l'espace de travail].

(Photoshop) Restauration d'une disposition d'espace de travail enregistrée

Dans Photoshop, les espaces de travail s'affichent automatiquement en fonction de leur dernière disposition, mais vous pouvez restaurer la disposition d'origine des panneaux.

• Pour restaurer un espace de travail individuel, Sélectionnez Fenêtre > Espace de travail > Réinitialiser Nom de l'espace de travail.
  Pour restaurer tous les espaces de travail installés avec Photoshop, cliquez sur Restaurer les espaces de travail par défaut dans les préférences d'interface.

Pour réorganiser l'ordre des espaces de travail de la barre d'application, faites-les glisser.

Affichage de documents à onglets (Dreamweaver sur Macintosh)

Vous pouvez afficher plusieurs documents dans une seule fenêtre de document avec des ontlets qui identifient chacun des documents. Vous pouvez aussi les afficher sous la forme d'une partie de l'espace de travail flottant dans laquelle chaque document s'affiche dans sa propre fenêtre.

Ouverture d'un document à onglets dans une fenêtre séparée

Cliquez en maintainant la touche Ctrl enfoncée sur l'onglet, puis selectionnez Déplacer dans une nouvelle fenêtre dans le menu contextualuel.

Rassemblement de documents séparés dans des fenètres à anglets

Choisissez Fenetre > Combiner en ontlets.

Modification du paramètre de document à onglets par défaut

1 Sélectionnez Dreamweaver > Préférences, puis la catégorie Général.
2 Sélectionnez ou désélectionné Ouvrir les documents dans des ontlets et cliquez sur OK.

Dreamweaver ne modifie pas l'affichage des documents ouverts lorsque vous modifie les préférences. En revanche, une fois que vous avez sélectionné une nouvelle préférence, les documents ouverts s'affichent en fonction de cette dernière.

Activation des iconônes en couleur

Par défaut, Dreamweaver en version CS4 et ultérieures employe des iconônes en noir et blanc qui se transforment en iconônes en couleur lorsque vous laissez le pointeur de la souris au-dessus d'elles. Vous pouvez activer les iconônes en couleur de manière permanente, même quand le pointeur de la souris ne se trouve pas au-dessus d'elles.

Effectuez l'une des opérations suivantes :

• Choisissez Affichage > Icônes en couleur.
• Basculez vers l'espace de travail Classique ou Codeur.

Pour désactiver l'affichage des icones en couleur, désactivez l'options Icones en couleur du menu Affichage, ou passez à un espace de travail différent.

More Help topics

"Affichage de l'espace de travail ou basculement d'un espace de travail à l'autre" on page 30

Masquage et affichage de l'écran d'accueil de Dreamweaver

L'écran d'accueil s'affiche lorsque vous démarrez Dreamweaver ou lorsqu'aucun document n'est ouvert. Vous pouvez masquer l'écran d'accueil puis l'afficher de nouveau ultérieurement selon vos besoin. Lorsque l'écran d'accueil est masqué et qu'aucun document n'est ouvert, la fenêtre de document est vide.

Masquage de l'écran d'accueil

Sélectionnéz l'options Ne plus afficher dans l'écran d'accueil.

Affichage de I'écran d'accueil

1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
2 Dans la catégorie Général, activez l'option Afficher l'écran d'accueil.

A propos de la personnalisation de Dreamweaver dans les systèmes multiutilisateurs

Dreamweaver peut être personnalisé selon les besoin, même dans les systèmes multiutilisateurs tels que Windows XP ou Mac OS X.

Dreamweaver empêche que la configuration personnalisée d'un utilisateur n'afecte celle d'un autre. Pour ce faire, la première fois que vous executez Dreamweaver sur l'un des systèmes multiutilisateurs reconnus, l'application create des copies de divers fjichiers de configuration. Ces fjichiers sont enregistrés dans un dossier vous appartenant.

Par exemple, sous Windows XP, ils se trouvent dans C:\Documents and Settings\nom d'utilisateur\Application Data\Adobe\Dreamweaver\fr_FR\Configuration, un dossier qui est caché par défaut. Pour afficher les fjichiers et doussiers cachés,CHOISSEZ Outils > Options des focsiers dans l'Explorateur Windows, cliquez sur I'onglet Affichage, puis activez I'option Afficher les fjichiers et doussiers cachés.

Sous Windows Vista, ils se trouvent dans C:\Utilisateurs\nom d'utilisateur\AppData\Roaming\Adobe\Dreamweaver\fr_FR\Configuration, qui est caché par défaut. Pour afficher les fichiers et dossiers cachés,CHOISSES > Options des dossiers dans l'Explorateur Windows, cliquez sur I'onget Affichage, puis activez l'option Afficher les fichiers et dossiers cachés.

Sous Mac OS X, ils sont situés dans votre dossier personnel, dans

Utilisateurs/nom/utilisateur/Bibliothèque/Application Support/Adobe/Dreamweaver/Configuration.

Si vous réinstallé ou mettez Dreamweaver à jour, Dreamweaver créé automatiquement des copies de sauvegarde des fichiers de configuration existants. Ainsi, si vous avez personnelisé manuellement ces fichiers, vos modifications restent disponibles.

Définition des préférences générales de Dreamweaver

1 Choisissez Edition > Preférences (Windows) ou Dreamweaver > Préférences (Macintosh).
2 Parmi les options suivantes, définissee celles de votre choix :

Ouvrir les documents dans des onglets Permet d'ouvoir tous les documents dans une seule fenetre contenant des onglets que vous utilisez pour passer d'un document à l'autre (Macintosh uniquement).

Afficher l'écran d'accueil Affiche l'écran d'accueil de Dreamweaver lorsque vous démarrez Dreamweaver ou qu'aucun document n'est ouvert.

Rouvir les documents au démarrage Ouvre tous les documents qui étaient ouverts lorsque vous avez fermé Dreamweaver. Si cette option n'est pas sélectionnée, Dreamweaver affiche l'écran d'accueil ou un écran vide au démarrage ( selon les paramètres définis pour Afficher l'écran d'accueil).

Avertir à l'ouverture de fichiers en lecture seule. Vous informe lorsque le fichier que vous ouvrez est en lecture seule (verrouillé). Vous pouvez déverrouiller/extraire le fichier, l'afficher en lecture seule ou annuler l'action.

Activer les fichiers associés Permet de savoir quels fichiers sont associés au document actuel (par exemple des fichiers CSS ou JavaScript). Dreamweaver affiche un bouton pour chaque fichier associé en haut du document. Si vous cliquez sur l'un de ces boutons, le fichier correspondant est ouvert.

Découvir les fichiers à association dynamique Permet d'indiquer si les fichiers à association dynamique doivent apparaître automatiquement dans la barre d'outils Fichiers associés, ou uniquement après une interaction manuelle. Vous pouvez également désactiver la recherche de fichiers à association dynamique.

Mettre à jour les liens lors de la suppression de fichiers Déterminé ce qui se passé lorsque vous déplacez, renommé ou supprimez un document dans un site. Vous pouvez définiter cette préférence de trois façon différentes: les liens sont toujours automatiquement mis à jour, les liens ne sont jamais mis à jour ou un message vous demande s'il convient d'exécuter une mise à jour (Voir “Mettre les liens à jour automatiquement” on page 295.)

Afficher la boite de dialogue lors de l'insertion d'un objet Déterminé si Dreamweaver vous invite à entrer des informations supplémentaires lorsque vous insérez des images, des tableaux, des animations Shockwave et certains autres objets à l'aide du panneau Insertion ou du menu Insertion. Si cette option est désactivée, aucune boite de dialogue ne s'affiche ; dans ce cas, précisez le fichier source pour les images, le nombre de lignes dans un tableau, etc. dans l'inspecteur Propriétés. Lorsque vous insérez des images avec effet de survol ou du code HTML Fireworks, une boite de dialogue s'affiche toujours, quel que soit le réglage de cette option. (Pour replacer temporairement ce paramètre, appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant avec la souris lorsque vous créez et insérez des objets.)

Activier l'entrée en ligne à deux octets Permet d'entrer un texte à deux octets directement dans la fenêtre de document, si vous utilisez un environnement de développement ou un kit linguistique facilitant la saisie de texte à deux octets (les caractères japonais, par exemple). Si cette option est deselectionnée, une fenetre de saisie de texte s'affiche, dans laquelle vous entrez et convertissez le texte à deux octets ; le texte apparait dans la fenetre de document après avoir ete accepté.

Passer en paragraphe normal après le titre Indique qu'en appuyant sur la touche Entrée (Windows) ou Retour (Macintosh) à la fin d'un paragraphe de titre en mode d'affichage Création, vous créez un nouveau paragraphe indiqué par une balise p. (Un paragraphe de titre est indiqué par une balise de titre, celle que h1 ou h2.) Lorsque cette option est désactivée, en appuyant sur la touche Entrée ou Retour à la fin d'un paragraphe de titre, vous créez un nouveau paragraphe indiqué par la même balise de titre (ce qui vous permet de saisir plusieurs titres à la suite les uns des autres, puis d'ajouter les détails ultérieurement).

Autoriser plusieurs espaces consécutifs Indique qu'en entrant deux espaces ou plus en mode d'affichage Création, vous créez des espaces insécables qui s'affichent sous forme de plusieurs espaces dans un navigateur. (Par exemple, vous pouvez taper deux espaces entre les phrases, tout comme vous le faites sur une machine à écrire.) Cette option est concise principalement pour les personnes qui utilisent les traitements de texte. Lorsque cette option est désactivée, les espaces multiples sonttraités comme des espaces simples (car les navigateurstraitent les espaces multiples comme des espaces simples).

Utiliser et au lieu de et Détermine que Dreamweaver applique la balise strong lorsque vous effectuez une action qui appliqueraient normalement la balise b, et la balise em lorsque vous effectuez une action qui appliqueraient normalement la balise i. Ces actions incluent notamment le fait de cliquer sur les boutons Gras ou Italique

de l'inspecteur Propriétés de texte en mode HTML et de désir Format > Style > Gras ou Format > Style > Italie. Pour utiliser les balises b et i dans vos documents, désélectionné cette option.

Note: Le World Wide Web Consortium recommende d'éviter les balises b et i ; les balises strong et em fournissant des informations plus sémentiques que les balises b et i.

Avertir lors du placement de régions modifiables dans des balises

ou

-

Indique si un message d'advertissement s'affiche lorsque vous enregistrez un modèle Dreamweaver représentant une région modifiable dans une balise de paragraphe ou d'en-tête. Le message vous informe que les utilisateurs ne pourront pas créé de paragraphs supplémentaires dans la région. Cette option est activée par défaut.

Centrer Spécífie si vous voulez centrer des éléments à l'aide de divaIGN="center" ou de la balise center lorsque vous cliquez sur le bouton Centrer de l'inspecteur Propriétés.

Note: L'utilisation de ces deux méthodes de centrage n'est plus recommandée depuis les specifications de HTML 4.01. Il est conseilé d'utiliser les feuilles de style CSS. Ces méthodes sont encore techniquement applicables à la Specification XHTML 1.0 transitionalnel, mais ne sont plus reconnues dans les specifications XHTML 1.0 Strict.

Nombre maximum d'étapes d'historique Déterminé le nombre maximal d'étapes que le panneau Historique conserve et affiche. (la valeur par défaut doit être suffisante pour la plupart des utilisateurs). Si le nombre d'étapes dépasse la valeur indiquée, les étapes les plus ancériennes sont supprimées.

Pour plus d'informations, voir "Automatisation des tâches" on page 280.

Dictionnaire orthographique Affiche la liste des dictionaries disponibles. Si un dictionnaire contient plusieurs dialectes ou conventions orthographiques (par exemple, l'anglais Britannique et l'anglais américain), les dits dialectes sont répertoriés individuellement dans le menu contextual Dictionnaire.

More Help topics

"Vue d'ensemble de la presentation de l'espace de travail" on page 6

"Mettre les liens à jour automatiquement" on page 295

Définition des préférences de police pour les documents dans Dreamweaver

Le codage d'un document déterminé la façon dont le document s'affiche dans un navigateur. Les préférences de polices de Dreamweaver vous permettent d'utiliser un texte affché dans la police et la taille de votre choix. Toutefois, les polices sélectionnées dans la boite de dialogue Préférences des polices n'influent que sur la façon dont les documents s'affichent dans Dreamweaver. Elles n'ontaucun impact sur la façon dont ils s'affichent dans le navigateur d'un visiteur. Pour modifier la façon dont les polices s'affichent dans un navigateur, vous devez modifier le texte à l'aide de linspecteur Propriétés ou en appliquant une règle CSS.

Pour plus d'informations sur la définition d'un codage par défaut pour les nouveaux documents, consultez la section "Création et ouverture de documents" on page 66.

1 Choisissez Edition > Preférences (Windows) ou Dreamweaver > Préférences (Macintosh).
2 Sélectionnéz la catégorie Polices dans la liste de gauche.
3 Selectionnez le type de codage désiré (par exemple, Occidental ou Japonais) dans la liste Paramètres de la police.

Note: Pour afficher un document en langue asiatique, il est indispensable que votre système d'exploitation prenne en charge les polices à deux octets.

4 Sélectionnez une police et un format à utiliser pour chaque catégorie du codage sélectionné.

Note: Pour qu'une police apparaisse dans les menus contextuels correspondants, il est indispensable de l'instructor sur toute ordinateur. Par exemple, si vous souhaitez visualiser un texte rédigé en japonais, il vous faut installer un jeu de caractères japonais au préalable.

Proportionnelle La police proportionnelle est utilisé par Dreamweaver pour afficher du texte normal (par exemple, un texte contenu dans des paragraphs, des en-têtes et des tableaux). La valeur par défaut varie en fonction des polices installées sur votre système. Pour la plupart des systèmes français, la police proportionnelle par défaut est Times New Roman 12 pt (moyen) sous Windows et Times 12 pt sous Mac OS.

Fixe La police fixe est utilisé par Dreamweaver pour afficher du texte dans les balises pre, code et tt. La valeur par défaut varie en fonction des polices installées sur votre système. Pour la plupart des systèmes français, la police fixe par défaut est Courier New 10 pt (petit) sous Windows et Monaco 12 pt sous Mac OS.

Mode Code Police utilise dans tout le texte qui apparait dans le mode d'affichage Code et dans l'inspecteur de code. La valeur par défaut varie en fonction des polices installées sur votre système.

More Help topics

"Description de l'encodage de document" on page 225

Personnalisation des couleurs de surbrillance de Dreamweaver

Les préférences de surbrillance seront à personnaliser les couleurs utilisées dans Dreamweaver pour identifier les zones d'un réseau, les éléments d'une bibliothèque, les balises hierces, les éléments de mise en forme et le code.

More Help topics

"Utilisation du selecteur de couleur" on page 229

"Modification de la couleur de surbrillance des balises div" on page 171

Modification de la couleur de surbrillance

1 Choisissez Edition > Preférences, puis la catégorie Surbrillance.
2 Cliquez sur le sélecteur de couleur située après de l'objet dont vous souhaitez modifier la couleur de surbrillance, puis utilisez la palette de couleur pour selectionner une nouvelle couleur. Vous pouvez également saisir une valeur hexadécimale.

Activation ou déactivation de la surbrillance d'un objet

1 Choisissez Edition > Preférences, puis la catégorie Surbrillance.
2 Cochez ou decochez l'option Afficher située pres de l'objet dont vous souhaitez activer ou désactiver la couleur de surbrillance.

Restauration des préférences par défaut

Pour connaître les procédures de rétablissement des préférences par défaut de Dreamweaver, consultez la Tech Note 83912.

Raccourcis clavier

Création d'un feuille de référence pour le jeu de raccourcis en cours

Une feuille de reférence est un enregistrement du jeu de raccourcis en cours. Les informations sont stockées sous forme d'un tableau HTML. Vous pouvez afficher la feuille de reférence dans un navigateur Web ou l'imprimer.

1 Sélectionnez Edition > Raccourcis clavier (Windows) ou Dreamweaver > Raccourcis clavier (Macintosh).
2 Cliquez sur le bouton Exporter le jeu au format HTML ; il s'agit du troisième bouton du jeu de quatre boutons situé en haut de la boîte de dialogue.
3 Dans la boite de dialogue d'enregistrement, entrez le nom de la feuille de reférence et seLECTIONnez l'emplacement approprié pour enregistrer le fjichier.

Personnalisation des raccourcis clavier

Utilisez l'éditeur de raccourcis clavier pour creer vos propres touches de raccourci, y compris pour les fragments de code. Vous pouze également supprimer des raccourcis clavier, les modifier, et selectionner un jeu prédéfini de raccourcis dans l'éditeur de raccourcis clavier.

More Help topics

"Manipulation de fragments de code" on page 335

Création d'un raccourci clavier

Créez vos propres touches de raccourci, modifier des raccourcis existants ou Sélectionnez un jeu de raccourcis prédéfi ni.

1 Sélectionnez Edition > Raccourcis clavier (Windows) ou Dreamweaver > Raccourcis clavier (Macintosh).
2 Parmi les options suivantes, définissez celles de votrechioix et cliquez sur OK :

Jeu en cours Vous permet deCHOISIR un Jeu de raccourcis predefinis livres avec Dreamweaver, ou tout autre jeu personnalisé que vous avez vous-même définir. Les yeux predefinis sont repertoriés en haut du menu. Par exemple, si vous connaissiez les raccourcis de HomeSite ou BBEdit, vous pouvez les utiliser enCHOISILLANT lejeu predefini correspondant.

Commandes You permit de selectionner une catégorie de commandes à modifier. Par exemple, vous pouvez modifier des commandes de menu, telles que Ouvrir ou des commandes de modification du code, telles que Equilibrer les accolades.

Pour ajouter ou modifier un raccourci clavier pour un fragment de code, selectionnez Fragment de code dans le menu contextuel Commandes.

La liste des commandes affiche les commandes de la catégorie que vous avez可以选择 dans le menu contextual Commandes, ainsi que les raccourcis clavier attribués. Les catégories de commandes Menu s'affichent sous une forme arborescente, suivant la structure des menus. Les autres catégories repertorient les commandes par leur nom (par exemple, Quitter l'application).

Raccourcis affiche la liste des raccourcis clavier assignés à la commande sélectionnée.

Ajouter l'élément (+) ajoute un nouveau raccourci pour la commande en cours. Cliquez sur ce bouton pour ajouter une nouvelle ligne vierge aux Raccourcis. Entrez une nouvelle combinaison de touches et cliquez sur Remplacer pour ajouter un nouveau raccourci clavier pour cette commande. Vous pouze attribuer deux raccourcis clavier différents pour chaque commande. S'il en existe déjà deux, le bouton Ajouter l'élément (+) n'a peu effet.

Supprimer l'élement (-) supprime le raccourci sélectionné de la liste.

Appuyer sur la touche affiche la combinaison de touches que vous saississez lorsque vous ajoutez ou modifiez un raccourci.

Remplacer Ajoute la combinaison de touches indiquée dans la zone Appuyer sur la touche à la liste des raccourcis ou applique le nouveau raccourci clavier à la combinaison de touches spécifiées.

Dupliquer le jeu duplique le jeu courant. Attribuez un nom au nouveau jeu; le nom par défaut est le nom du jeu en cours doté du suffixe copie.

Renommer le jeu renomme le jeu actuel.

Exporter comme fjichier HTML enregistrre le jeu actuel dans un format de table HTML en vue d'un affichage et d'une impression simples. Vous pouze ouvrir le fjichier HTML dans votre navigateur et imprimer les raccourcis comme reférence rapide.

Supprimer le jeu supprime un jeu. Lesiaux actifs ne peuvent pas etre supprimés.

Suppression d'un raccourci d'une commande

1 Sélectionnez Edition > Raccourcis clavier (Windows) ou Dreamweaver > Raccourcis clavier (Macintosh).
2 Dans le menu contextuel Commandes, selectionnez une catégorie.
3 Sélectionnez une commande dans la liste, puis Sélectionnez un raccourci.
4 Cliquez sur le bouton Supprimer un élément (-).

Ajout d'un raccourci clavier à une commande

1 Sélectionnez Edition > Raccourcis clavier (Windows) ou Dreamweaver > Raccourcis clavier (Macintosh).
2 Dans le menu contextuel Commandes, selectionnez une catégorie.
3 Sélectionnez une commande dans la liste.

Pour ajouter ou modifier un raccourci clavier pour un fragment de code, selectionnez Fragment de code dans le menu contextual Commandes.

Les raccourcis attribués à la commande apparaissent dans la zone Raccourcis.

4 Procedez de l'une des manieres suivantes pour ajouter un raccourci :
- Si moins de deux raccourcis sont déjà attribués à la commande, cliquez sur le bouton Ajouter l'élement (+). Une nouvelle ligne vide apparait dans la zone Raccourcis et le point d'insertion s'affiche dans la zone Appuyer sur la touche.
- Si deux raccourcis sont déjà attribués à la commande, Sélectionnez-en un (il sera replacé par le nouveau raccourci). Cliquez ensuite dans la zone Appuyer sur la touche.
5 Appuyez sur une combinaison de touches. Celle-ci apparait dans la zone Appuyer sur la touche.

Note: Si la combinaison de touches est incorrecte (par exemple, elle est déjà attribuée à une autre commande), un message s'affiche sous la zone Raccourcis et vous en avertit. Vous ne pourrez peut-être pas ajouter, ni modifier le raccourci.

6 Cliques sur Remplacer. La nouvelle combinaison de touches est attribuée à la commande.

Modification d'un raccourci existant

1 Sélectionnez Edition > Raccourcis clavier (Windows) ou Dreamweaver > Raccourcis clavier (Macintosh).

2 Dans le menu contextual Commandes, Sélectionnez une catégorie.
3 Sélectionnez une commande dans la liste, puis Sélectionnez un raccourci à modifier.
4 Cliquez dans la zone Appuyer sur la touche, et entrez une nouvelle combinaison de touches.
5 Cliques sur le bouton Remplacer pour modifier le raccourci.

Note: Si la combinaison de touches est incorrecte (par exemple, elle est déjà attribuée à une autre commande), un message s'affiche sous la zone Raccourcis et vous en avertit. Vous ne pourrez peut-être pas ajouter, ni modifier le raccourci.

A propos des raccourcis clavier et des claviers non-U.S.

Les raccourcis clavier Dreamweaver par défaut fonctionnement principalement sur les claviers U.S. standardisés. Les claviers d'autres pays (y compris ceux qui sont produits au Royaume-Uni) peuvent ne pas partager la fonctionnalité nécessaire à l'utilisation de ces raccourcis. Si votre clavier ne prend pas en charge certains raccourcis Dreamweaver, Dreamweaver désactive leur fonctionnalité.

Pour personneliser des raccourcis clavier fonctionnant avec des claviers non-U.S., voir la section « Modification des mappings des raccourcis clavier » du manuel Extension de Dreamweaver.

Extensions

Ajout et gestion d'extensions dans Dreamweaver

Les extensions sont de nouvelles fonctions, facies à intégrer dans Dreamweaver. Vous pouvez utiliser plusieurs types d'extensions ; il existe, par exemple, des extensions qui permettent de reformater des tableaux, d'écrit des compléments de scripts coté serveurs ou clients.

Note: Pour installer des extensions accessibles à tous les utilisateurs dans un système d'exploitation multiutilisateur, vous doivent désposer des droits Administrateur (Windows) ou root (Mac OS X).

Pour rechercher les extensions les plus récentes pour Dreamweaver, consultez le site Web d'Adobe Exchange, à l'adresse suivante: www.adobe.com/go/dreamweaver_exchange_fr/. Sur ce site, vous pouvez vous connecter et télécharger des extensions (un grand nombre d'entre elles sont gratuites), participer à des forums de discussion, visualiser les rapports et analyses d'utilisateurs, ainsi qu'instructor et exploiter Extension Manager. Vous devez installer Extension Manager avant de pouvoir télécharger des extensions.

Le logiciel Extension Manager est une application independante permettant d'insteller et de gérer les extensions dans les applications Adobe. Vous pouvez lancer Extension Manager à partir de Dreamweaver enCHOISSSant Commandes > Gérer les extensions.

1 Sur le site Web Adobe Exchange, cliquez sur le lien de tléchéargement de l'extension qui vous intérèse.

Votr navigateur you permit peut et d'ouvrir et d'installer l'extension directement depuis le site ou de l'enregistrer sur voite disque.

• Si vous l'ouvre directement, Extension Managertraite automatiquelement l'installation.
• Si vous l'enregistrez sur votre disque, placez le fichier du logiciel d'extension (.mxp ou .mxi) dans le dossier des extensions téléchargées de l'application Dreamweaver sur votre ordinateur.

2 Double-cliquez sur le fichier du logiciel d'extension ou ouvrez Extension Manager et choisissez Fichier > Installer l'extension. (Certaines extensions ne sont accessibles qu'une fois que vous avez redemarré l'application.

Note: Utilisez Extension Manager pour supprimer des extensions ou pour consulter des informations sur l'extension.

More Help topics

"A propos de la personnalisation de Dreamweaver dans les systèmes multiutilisateurs" on page 32

Chapter 3: Utilisation de sites Dreamweaver

Un site Adobe® Dreamweaver® CS5 est un ensemble de tous les fichiers et actifs de votre site Web. Vous pouze créé des pages Web sur votre ordinateur, les transférer sur un serveur Web et:gérer le site en transférant des fichiers mis à jour chaque fois que vous les sauvegardez. Vous pouze également modifier et:gérer des sites Web qui ont eté créés sans Dreamweaver.

A propos des sites Dreamweaver

Qu'est-ce qu'un « site » Dreamweaver ?

Dans Dreamweaver, le terme « site » se rapporte à un lieu de stockage local ou distant dans lequel sont conservés tous les documents appartenant à un site Web. Un site Dreamweaver permet d'organiser et de générer tous vos documents Web, de transférer vos fichiers de site à un serveur Web, de suivre et de générer les liens, ainsi que de générer et de partager les fichiers. Définissez un site pour tirer le meilleur parti des fonctions offertes par Dreamweaver.

Note: Pour définir un site Dreamweaver, vous doivent configurer un dossier local. Pour transférer des fichiers vers un serveur Web ou pour développer des applications Web, vous doivent ajouter des informations concernant un site distant et un serveur d'évaluation.

Un site Dreamweaver se compose de trois parties, ou dossiers, selon votre environnement de travail et le type de site Web que vous développpez :

Dossier racine local Stocke les fichiers en cours de développement. Dans Dreamweaver, ce dossier est appelé votre « site local ». Ce dossier se trouve généralement sur toute ordinateur local, mais il peut également se couver sur un serveur de réseau.

Dossier distant Stocke les fichiers que vous réserve aux évaluations, à la production, à la collaboration, etc. Dans Dreamweaver, ce dossier est appelé votre « site distant » dans le panneau Fichiers. En règle générale, votre dossier distant se trouve sur l'ordinateur à partir duquel vous exécutez votre serveur Web. Le dossier distant contient les fichiers auxquels les utilisateurs accédent via Internet.

Ces deux dossiers (local et distant) vous permettent de transférer des fischiers entre votre disque dur local et un serveur Web, ce qui facilitite la gestion des fischiers sur vos sites Dreamweaver. Vous travailliez sur les fischiers dans le dossier local, puis vous les publiez dans le dossier distant lorsque vous foulez les rendre accessibles à d'autres utilisateurs.

Dossier du serveur d'évaluation Dossier dans lequel Dreamweaver traite les pages dynamiques.

Vous trouvez undidacticiel sur la defini tion d'un site Dreamweaver à l'adresse www.adobe.com/go/learn_dw_comm08_fr.

Description de la structure du dossier local et du dossier distant

Si vous poulez utiliser Dreamweaver pour vous connecter à un dossier distant, vous doivent définir ce dossier distant dans la catégorie Serveurs de la boîte de dialogue Configuration du site. Le dossier distant (égarlement baptisé « repertoire hôte ») doit correspondre au dossier racine local de votre site Dreamweaver. Le dossier racine local est le dossier supérieur de votre site Dreamweaver. Les dossiers distants, tout comme les dossiers locaux, peuvent posseder n'importe quel titre. Toutefois, les fournisseurs d'accès à Internet (FAI) seront généralement les dossiers distants de niveau supérieur de leurs différents comptes d'utiliser public_html, pub_html, etc. Si vous étés responsable de votre serveur distant et si vous pouvez nommer le dossier distant à votre guise, il est conseilé de donner le même nom au dossier racine local et au dossier distant.

L'exemple ci-dessous représenté un exemple de dossier racine local à gauche et un exemple de dossier distant à droite. Le dossier racine local sur l'ordinateur local correspond directement au dossier distant du serveur Web, et non à l'un des sous-dossier du dossier distant ou à des dossiers situés au-dessus du dossier distant dans la structure des répertoires.

Note: L'exemple ci-dessus représenté un dossier racine local sur l'ordinateur local, et un dossier distant de niveau supérieur sur le serveur Web distant. Toutefois, si vous géréz plusieurs sites Dreamweaver sur l'ordinateur local, vous aurez besoin d'un nombre identique de dossiers distants sur le serveur distant. Dans un tel cas, l'exemple ci-dessus n'est pas d'application. Vous doivent accraire différents dossiers distants dans le dossier public_html, puis les faire correspondre à leurs dossiers racine locaux respectifs sur l'ordinateur local.

Lorsque vous établissez une première connexion distante, le dossier distant du serveur Web est généralement vide. Ensuite, lorsque vous utilisez Dreamweaver pour charger tous les fischiers de votre dossier racine local, le dossier distant se remplit de tous vos fischiers Web. La structure des repertoires du dossier distant doit toujours être identique à celle du dossier racine local. En d'autres termes, il doit toujours existier une correspondance précise entre les fischiers et les dossiers de votre dossier racine locale et ceux de votre dossier distant. Si la structure du dossier distant ne correspond pas à celle du dossier racine local, Dreamweaver transfère les fischiers au mauvais endroit et ils risquent de ne pas'être visibles pour les visiteurs du site. En outre, les chemins d'accès des images et les liens peuvent être aisément endommagés si les structures des dossiers et des fischiers ne sont pas synchronisées.

Le dossier distant doit déjà existier pour que Dreamweaver puisse s'y connecter. Si aucun réseau racine n'existe ne fait office de dossier distant sur le serveur Web, creez-en un ou demandez à l'administrateur du serveur de votre FAI de se charger de cette opération.

Configuration d'une version locale de votre site

Pour configurer une version locale de votre site, il vous suffit de préciser le dossier local où vous allez stocker tous les fichiers du site. Le dossier local peut se couver sur toute ordinateur local ou sur un serveur réseau.

1 Identifie ou creez le dossier sur l'ordinateur où vous souhaitez stocker la version locale des fichiers de votre site. (Ce dossier peut se trouver n'importe ou sur toute ordinateur.) Vous spécifierez ce dossier comme site local dans Dreamweaver.
2 Dans Dreamweaver, choisissez Site > Nouveau site.
3 Dans la boîte de dialogue Configuration du site, assurez-vous que la catégorie Site est sélectionnée. (Elle est normalement sélectionnée par défaut.)
4 Dans la zone Nom du site, indiquez le nom de votre site. Ce nom s'affiche dans le panneau Fichiers et dans la boite de dialogue Gérer les sites ; il ne s'affiche pas dans le navigateur.
5 Dans la zone de texte Dossier du site local, indiquez le nom du dossier que vous avez identifie a l'etape 1 (le dossier sur notre ordinateur dans lequel vous voulez stocker la version locale des fichiers de votre site). Vous pouze clicker sur l'icone de dossier à droite de la zone de texte pour rechercher le dossier.
6 Cliquez sur Enregistrer pour fermer la boite de dialogue Configuration du site. Vous pouvez a present commencer à travailler sur les fichiers locaux de votre site dans Dreamweaver.

Lorsque you est pret, you pouze completer les autres catégories de la boite de dialogue Configuration du site, dont la catégorie Serveurs, ou you pouze indiquer un dossier distant sur votre serveur distant.

Vous trouvrez undidacticiel video sur la configuration d'un nouveau site Dreamweaver à l'adresse www.adobe.com/go/learn_dw_comm08_fr.

Connexion à un serveur distant

Lorsque vous avez spécifique un site local dans Dreamweaver, vous pouvez spécifique un serveur distant pour votre site. Le serveur distant (souvent appelé « serveur Web ») est l'endetroit où vous publiiez vos fjichiers de site afin qu'ils puissant être consultés en ligne. Le serveur distant est simplement un autre ordinateur, similaire à votre ordinateur local, qui contient un ensemble de fjichiers et de dossiers. Vous allez spécifique un dossier pour votre site sur le serveur distant, en procédant comme vous avez fait pour le dossier de votre site local sur l'ordinateur local.

Dreamweaver appelle site distant le dossier distant que vous aurez spécifique.

Lorsque vous configUREZ un dossier distant, vous devez selectionner une méthode de connexion qui permettra à Dreamweaver de transférer des fischiers à votre serveur Web et de télécharger des fischiers depuis ce serveur. La méthode de connexion la plus typique est FTP, mais Dreamweaver prend également les méthodes de connexion local/reseau, FTPS, SFTP, WebDav et RDS. Si vous ne connaisssez pas la méthode de connexion à utiliser, consultez votre FAI ou l'administrateur du serveur.

Note: Dreamweaver prend également en charge les connexions aux serveurs compatibles IPv6. Les types de connexion pris en charge sont notamment FTP, SFTP, WebDav et RDS. Pour plus d'informations, voir www.ipv6.org/

Spécification d'une méthode de connexion

Connexions FTP

Utilisez ce paramètre si vous vous connectez à votre serveur Web par FTP.

1 Choisissez Site > Gérer les sites.
2 Cliquez sur Nouveau pour configurer un nouveau site, ou selectionnez un site Dreamweaver existant et cliquez sur Modifier.
3 Dans la boite de dialogue Configuration du site, selectionnez la catégorie Serveurs et effectuez l'une des actions suivantes:
- Cliquez sur le bouton Ajouter nouveau serveur pour ajouter un nouveau serveur.
- Sélectionnez un serveur existant puis cliquez sur le bouton Modifier serveur existant.

Les illustrations suivantes montrent l'écran Base de la catégorie Serveur, avec les zones de texte déjà remplies.

Ecran Base de la catégorie Serveur, boite de dialogue Configuration du site.

4 Dans la zone Nom du serveur, entrez le nom du nouveau serveur. Vous pouvez enter le nom de votre choix.
5 Sélectionnez FTP dans la liste déroulante Se connecter au moyen de.
6 Dans la zone Adresse FTP, entrez l'adresse du serveur FTP sur lequel vous chargez les fichiers pour votre site Web.

Votre adresse FTP est le nom Internet complet d'un système informatique, par exemple, ftp.mindspring.com. Entrez l'adresse Complete sans ajouter de texte. Evitez en particulier d'ajouter un nom de protocole devant I'adresse.

Si vous ne connaissiez pas votre adresse FTP, contactez votre hébergeur de site Web.

Note: Le port 21 est le port par défaut pour la réception de connexions FTP. Vous pouvez modifier le numéro de port par défaut en modifient le content de la zone de texte à droite. Ce faisant, lorsque vous enregistrez vos paramètres, un signe deux points et le nouveau numéro de port seront ajoutés à votre adresse FTP (par exemple ftp.mindspring.com:29).

7 Dans les zones Nom d'utilisateur et Mot de passer, entrez le nom d'utilisateur et le mot de passer utilisés pour la connexion au serveur FTP.
8 Cliquez sur Tester pour tester votre adresse FTP, votre nom d'utilisateur et votre mot de passer.

Note: Vous doivent voir les informations relatives à l'adresse FTP, au nom d'utiliser et au mot de passer auprès de l'administrateur système de la société qui héberge votre site. Personne d'autre n'a accès à ces informations. Entrez les informations de la façon précise dont vous administrateur système vous les a communiquées.

9 Par défaut, Dreamweaver enregistre votre mot de passer. Désélectionné l'option Enregistrer si vous préférez que Dreamweaver vous demande le mot de passer à chaque connexion au serveur distant.
10 Dans la zone Répertoire racine, entrez le nom du réseau (dosier) hote du serveur distant ou sont stockés les documents visibles pour le public.

Si vous n'etes pas sur du réseau racine à saisir, contactez l'administrateur du serveur ou laissez la zone de texte vide. Sur certains serveurs, votre réseau racine est celui dans lequel la connexion FTP est établie. Pour en être sur, établissez une connexion avec le serveur. Si vous Voyez apparaitre dans le volet Affichage distant de votre panneau Fichiers un dossier spécifique public_html, www ou ayant votre nom d'utilisateur, il s'agit probablement du nom à indiquer dans la zone Répétoire racine.

11 Dans la zone URL Web, entrez l'URL de votre site Web (par exemple http://www.monsite.com). Dreamweaver utilise l'URL Web pour creer des liens relatifs à la racine du site et pour vérifier les liens lorsque vous employez la fonction de vérification des liens.

Pour une explication plus détaillée de cette option, voir “Catégorie Paramètres avances” on page 52.

12 Développèz la section Options supplémentaires si vous doivent accorder des options supplémentaires.
13 Sélectionnez l'option Utiliser FTP passif si la configuration de votre pare-feu nécessite l'utilisation d'un FTP passif.

Cette fonction permet à votre logiciel local de configurer la connexion FTP à la place du serveur distant. Si vous n'êtes pas sur d'utiliser le mode FTP passif, consultez votre administrateur système ou faites des essais en activant puis en désactivant l'option Utiliser FTP passif.

Pour plus d'informations, consultez la TechNote 15220 sur le site Web d'Adobe à l'adresse

www.adobe.com/go/tn_15220_fr.

14 Choisissez Utiliser le mode de transfert IPv6 si vous employez un serveur FTP compatible IPv6.

Parallelement au déploiement de la version 6 d'Internet Protocol (IPv6), les commandes EPRT et EPSV ont remplaça respectivement les commandes FTP PORT et PASV. Par conséquent, si vous tentez de vous connecter à un serveur FTP compatible IPv6, vous doivent utiliser les commandes passif étendu (EPSV) et actif étendu (EPRT) pour votre connexion de données.

Pour plus d'informations, voir www.ipv6.org/.

15 Choisissez Utiliser un proxy si vous voulez spécifique un hôte ou un port proxy.

Pour plus d'informations, cliquez sur le lien afin d'acceder à la boite de dialogue Preférences, puis cliquez-y sur le bouton Aide de la catégorie Site.

16 Cliques sur Enregistrer pour fermer l'écran Base. Ensuite, dans la catégorie Serveurs, indique si le serveur que vous venez d'ajouter ou de modifier est un serveur distant, un serveur d'évaluation ou les deux.

Pour plus d'informations sur le dépannage des problèmes de connectivité FTP, consultez la TechNote kb405912 sur le site Web d'Adobe, à l'adresse www.adobe.com/go/kb405912_fr.

Connexions SFTP

Utilisez l'option Secure FTP (SFTP) si la configuration de votre pare-feu exige l'emploi d'une connexion FTP sécurisée. SFTP utilise un système de cryptage et de clés publiques pour sécuriser la connexion à votre serveur d'évaluation.

Note: Pour que vous puissiez seLECTIONner cette option, votre serveur doit executer un service SFTP. Si vous ignorez si vous serveur exécuté SFTP, consultez votre administrateur système.

1 Choisissez Site > Gérer les sites.
2 Cliquez sur Nouveau pour configurer un nouveau site, ou selectionnez un site Dreamweaver existant et cliquez sur Modifier.
3 Dans la boîte de dialogue Configuration du site, Sélectionnéz la catégorie Serveurs et effectuez l'une des actions suivantes :
- Cliquez sur le bouton Ajouter nouveau serveur pour ajouter un nouveau serveur.
- Sélectionnez un serveur existant puis cliquez sur le bouton Modifier serveur existant.
4 Dans la zone Nom du serveur, entrez le nom du nouveau serveur. Vous pouze enter le nom de votre choix.
5 Sélectionnez SFTP dans la liste déroulante Se connecter au moyen de.

Les autres options sont identiques à celles des connexions FTP. Reportez-vous à la section ci-dessus pour plus d'informations.

Note: Le port 22 est le port par défaut pour la réception de connexions SFTP.

Connexions FTPS (CS5.5)

FTPS (FTP sur SSL) fournit une prise en charge du chiffrement et de l'authentication, au contraire de SFTP qui prend uniquement en charge le chiffrement.

Lorsque vous utilisez FTPS pour le transfert de données, vous pouvez désirer de chiffrer vos informations d'identification, ainsi que les données transmises au serveur. En outre, vous pouvez désirer d'authentifier les informations d'identification du serveur et les connexions. Les informations d'identification d'un serveur sont validées par rapport à l'ensemble actuel des certificats de serveur d'autorité de certificationapprovés dans la base de données Dreamweaver. Les autorités de certification (CA), qui comprend des sociétés comme VeriSign, Thawte, etc. émettent des certificats de serveur signés numérique.

Note: Cette procédure décrit les options spécifiques à FTPS. Pour plus d'informations sur les options FTP régulières, consultez la section précédente.

1 Choisissez Site > Gérer les sites.
2 Cliquez sur Nouveau pour configurer un nouveau site, ou selectionnez un site Dreamweaver existant et cliquez sur Modifier.
3 Dans la boîte de dialogue Configuration du site, Sélectionnez la catégorie Serveurs et effectuez l'une des actions suivantes :

• Cliquez sur le bouton « + » (Ajouter nouveau serveur) pour ajouter un nouveau serveur.
• Sélectionnez un serveur existant, puis cliquez sur le bouton Modifier serveur existant.

4 Dans la zone Nom du serveur, entrez le nom du nouveau serveur.
5 Dans la zone Se connecter à l'aide, Sélectionnéz l'une des options suivantes en fonction de vos besoin.

FTP sur SSL/TLS (chiffrement implicite) Le serveur met fin à la connexion si la requête de sécurité n'est pas reçu.

FTP sur SSL/TLS (chiffrement explicite) Si le client ne demande pas de sécurité, le serveur peutCHOISIR de proceder à une transaction non securisée ou de refuser/limiter la connexion.

6 Dans la zone Authentication,CHOISSEZ l'une des options suivantes :

Aucun Les informations d'identification du serveur, signées ou auto-signées, s'affichent. Si vous acceptez les informations d'identification du serveur, le certificat est ajouté à un magasin de certificats, trustedSites.db, dans

Dreamweaver. La prochaine fais que vous vous connectez à ce serveur, Dreamweaver se connectera directement au serveur.

Note: Si les informations d'identification d'un certificat auto-signé ont été modifiées sur le serveur, vous étés invite à accepter les nouvelles informations d'identification.

Approuvé Le certificatprésenté est validé avec l'ensemble actuel des certificats de serveur d'autorité de certification approuvés dans la base de données Dreamweaver. La liste de serveurs approvés est stockée dans le fichier cacerts.pem.

Note: Un message d'erreur s'affiche si vous selectionnez Serveur approuve et que vous vous connectez à un serveur avec un certificat auto-signé.

7 Développèz la section Options supplémentaires pour définir d'autres options.

Chiffrer uniquement le canal de commande Sélectionnez cette option si vous souhaitez ne chiffrer que les commandes qui sont transmises. Utilisez cette option lorsque les données transmises sont déjà chiffrées ou ne contiennent pas d'informations confidentielles.

Chiffrer uniquement le nom d'utilisateur et le mot de passer Sélectionnez cette option si vous souhaitez chiffrer leur nom d'utilisateur et votre mot de passer.

8 Cliques sur Enregister pour fermer l'écran Base. Ensuite, dans la catégorie Serveurs, indique si le serveur que vous aze ajouté ou modifie est un serveur distant, un serveur d'évaluation ou les deux.

Pour plus d'informations sur le dépannage des problèmes de connectivité FTP, consultez la TechNote kb405912 sur le site Web d'Adobe, à l'adresse www.adobe.com/go/kb405912_fr.

Connexions de type local ou réseau

Utilisez cette option pour vous connecter à un dossier réseau, si vous stockez des fichiers ou exécutez votre serveur d'évaluation sur votre ordinateur local.

1 Choisissez Site > Gérer les sites.
2 Cliquez sur Nouveau pour configurer un nouveau site, ou selectionnez un site Dreamweaver existant et cliquez sur Modifier.
3 Dans la boîte de dialogue Configuration du site, Sélectionnez la catégorie Serveurs et effectuez l'une des actions suivantes :
- Cliquez sur le bouton Ajouter nouveau serveur pour ajouter un nouveau serveur.
- Sélectionnez un serveur existant puis cliquez sur le bouton Modifier serveur existant.
4 Dans la zone Nom du serveur, entrez le nom du nouveau serveur. Vous pouvez entrer le nom de votre choix.
5 Sélectionnez Local/Réseau dans la liste déroulante Se connecter au moyen de.
6 Cliquez sur l'icone de dossier à droite de la zone de texte Dossier du serveur pour rechercher puis selectionner le dossier dans lequel vous stockez les fichiers de votre site.
7 Dans la zone URL Web, entrez l'URL de votre site Web (par exemple http://www.monsite.com). Dreamweaver utilise l'URL Web pour creer des liens relatifs à la racine du site et pour vérifier les liens lorsque vous employez la fonction de vérification des liens.

Pour une explication plus détaillée de cette option, voir "Catégorie Paramètres avancés" on page 52.

8 Cliquez sur Enregister pour fermer I'ecran Base. Ensuite, dans la categorie Serveurs, indique si le serveur que vous venez d'ajouter ou de modifier est un serveur distant, un serveur d'evaluation ou les deux.

Connexions WebDAV

Utilisez ce paramètre si vous vous connectez à votre serveur à l'aide du protocole WebDAV (Web-based Distributed Authoring and Versioning).

Cette méthode de connexion suppose que vous disposez d'un serveur prénant en charge ce protocole, par exemple Microsoft Internet Information Server (IIS) 5.0 ou une installation du serveur Web Apache configurée de façon ajustate.

Note: Si vous Sélectionnéz WebDAV comme méthode de connexion et que vous utilisez Dreamweaver dans un environnement multi-utilisateurs, vous doivent également veiller à ce que tous vos utilisateurs sélectionnent WebDAV comme méthode de connexion. Si certains utilisateurs sélectionnent WebDAV, alors que d'autres sélectionnent d'autres méthodes de connexion (par exemple, FTP), la fonction archivage/extraction de Dreamweaver fonctionnera de façon imprévisible, car WebDAV utilise son propre système de verrouillage.

1 Choisissez Site > Gérer les sites.
2 Cliquez sur Nouveau pour configurer un nouveau site, ou selectionnez un site Dreamweaver existant et cliquez sur Modifier.
3 Dans la boite de dialogue Configuration du site, selectionnez la catégorie Serveurs et effectuez l'une des actions suivantes:
- Cliquez sur le bouton Ajouter nouveau serveur pour ajouter un nouveau serveur.
- Sélectionnez un serveur existant puis cliquez sur le bouton Modifier serveur existant.
4 Dans la zone Nom du serveur, entrez le nom du nouveau serveur. Vous pouvez enter le nom de votrechoix.
5 Sélectionnez WebDAV dans la liste déroulante Se connecter au moyen de.
6 Dans la zone URL, indiquez l'URL complete vers le repertoire du serveur WebDAV auquel vous pouzez vous connecter.

Cette URL inclut le protocole, le port et le réseau (s'il ne s'agit pas du réseau racine). Par exemple, http://webdav.mondomaine.net/monsite.

7 Entrez votre nom d'utilisateur et votre mot de passer.

Ces informations sont relatives à l'identification du serveur et ne sont pas associées à Dreamweaver. Si vous ne connaissiez pas votre nom d'utilisateur et votre mot de passer, consultez votre administrateur système ou Web.

8 Cliques sur Tester pour tester vos paramètres de connexion.

9 Activez l'option Enregister si vous poulez que Dreamweaver memorise votre mot de passer à chaque nouvelle session.

10 Dans la zone URL Web, entrez l'URL de votre site Web (par exemple http://www.monsite.com). Dreamweaver utilise l'URL Web pour creer des liens relatifs à la racine du site et pour vérifier les liens lorsque vous employez la fonction de vérification des liens.

Pour une explication plus détaillée de cette option, voir “Catégorie Paramètres avances” on page 52.

11 Cliquez sur Enregister pour fermer I'ecran Base. Ensuite, dans la categorie Serveurs, indique si le serveur que vous venez d'ajouter ou de modifier est un serveur distant, un serveur d'evaluation ou les deux.

Connexions RDS

Utilisez ce paramètre si vous vous connectez à votre serveur Web à l'aide de RDS (Remote Development Services).
Cette méthode de connexion suppose que votre serveur distant se trouve sur un ordinateur exécutant Adobe
ColdFusion

1 Choisissez Site > Gérer les sites.
2 Cliquez sur Nouveau pour configurer un nouveau site, ou selectionnez un site Dreamweaver existant et cliquez sur Modifier.
3 Dans la boîte de dialogue Configuration du site, Sélectionnez la catégorie Serveurs et effectuez l'une des actions suivantes :
- Cliquez sur le bouton Ajouter nouveau serveur pour ajouter un nouveau serveur.
- Sélectionnez un serveur existant puis cliquez sur le bouton Modifier serveur existant.
4 Dans la zone Nom du serveur, entrez le nom du nouveau serveur. Vous pouvez enter le nom de votre choix.
5 Sélectionnez RDS dans la liste déroulante Se connecter au moyen de.
6 Cliques sur le bouton Parametes et entrez les informations suivantes dans la boite de dialogue Configurer le serveur RDS :
- Entrez le nom de l'ordinateur hôte sur lequel votre serveur Web est installé.

Il s'agit probablement d'une adresse IP ou d'une URL. En cas de doute, besoin à votre administrateur.

• Entrez le numero du port auquel vous vous connectez.
• Définissez votre dossier racine distant comme réseau hôte.

Par example, c:\inetpub\wwwroot\myHostDir.

• Entrez votre nom d'utilisateur et votre mot de passer RDS.

Note: Ces options seront peut-être invisibles si vous avez configuré votre nom d'utilisateur et votre mot de passer dans les paramètres de sécurité de ColdFusion Administrator.

• Sélectionnéz l'options Enregistrer si vous poulez que Dreamweaver méorise vos paramètres.
  7 Cliquez sur OK pour fermer la boite de dialogue Configurer le serveur RDS.
  8 Dans la zone URL Web, entrez l'URL de votre site Web (par exemple http://www.monsite.com). Dreamweaver utilise l'URL Web pour creer des liens relatifs à la racine du site et pour vérifier les liens lorsque vous employez la fonction de vérification des liens.

Pour une explication plus détaillée de cette option, voir “Catégorie Paramètres avances” on page 52.

9 Cliques sur Enregistrer pour fermer l'écran Base. Ensuite, dans la catégorie Serveurs, indique si le serveur que vous venez d'ajouter ou de modifier est un serveur distant, un serveur d'évaluation ou les deux.

Connexions Microsoft Visual SourceSafe

La prise en charge de Microsoft Visual SourceSafe a été abandonnée à partir de Dreamweaver CS5.

Définition des options de serveur avancées

1 Choisissez Site > Gérer les sites.
2 Cliquez sur Nouveau pour configurer un nouveau site, ou selectionnez un site Dreamweaver existant et cliquez sur Modifier.

3 Dans la boîte de dialogue Configuration du site, Sélectionnez la catégorie Serveurs et effectuez l'une des actions suivantes :
- Cliquez sur le bouton Ajouter nouveau serveur pour ajouter un nouveau serveur.
- Sélectionnez un serveur existant puis cliquez sur le bouton Modifier serveur existant.
4 Définisse les options de base requises, puis cliquez sur le bouton Avancé.
5 Sélectionnez l'option Conserver les informations de synchronisation si vous souhaitez que vos fichiers locaux et distants soient synchronisés automatiquement. (Cette option est sélectionnée par défaut.)
6 Sélectionnez l'option Téchéarger autom. les fichiers vers le serveur lors de l'enregistrement si vous pouze que Dreamweaver charge votre fichier sur votre site distant lorsque vous l'enregistrez.
7 Sélectionnez l'option Activer l'extraction de fichier si vous voulez activer le système d'archivage et d'extraction.
8 Si vous employez un serveur d'évaluation, Sélectionnez un modèle de serveur dans le menu Modèle de serveur. Pour plus d'informations, consultez la section "Configuration d'un serveur d'évaluation" on page 50.

Connexion ou déconnexion d'un dossier distant via un accès réseau

Vous n'avez pas besoin de vous connecter au dossier distant ; vous etes connecte en permanence. Cliquez sur le bouton Actualiser pour afficher vos fichiers distants.

Connexion ou déconnexion d'un dossier distant via un accès FTP

Dans le panneau Fichiers:

• Pour vous connecter, cliquez sur l'option Connecter à un hôte distant dans la barre d'outils.
• Pour vous déconnecter, cliquez sur Déconnecter dans la barre d'outils.

Résolution des problèmes de configuration du dossier distant

La liste suivante contient des informations sur les problèmes courants que vous pouze rencontres lors de la configuration d'un dossier distant et sur la façon de les résoudre.

Voutrouvez, sur le site Web d'Adobe, une TechNote détaillée qui fournit des informations spécifique au dépannage FTP. Cette TechNote se troue à l'adresse www.adobe.com/go/kb405912_fr.

• La mise en oeuvre FTP de Dreamweaver peut ne pas fonctionner correctement avec certains serveurs proxy, pare-feu multiniveauux et autres formes d'accès indirect à un serveur. Si vous avez des problèmes d'accès FTP, demandez l'aide de votre administrateur système.
• Pour la mise en oeuvre FTP de Dreamweaver, il est indispensable de se connecter au dossier racine du système distant. Veillez à désigner le dossier racine du système distant en tant que répertoire hôte. Si vous avez spécifique le réseau hôte avec une seule barre oblique (/), vous aurez peut-être besoin de spécifique un chemin relatif entre le réseau auquel vous vous connectez et le dossier racine distant. Si, par exemple, le dossier racine distant est un réseau de niveau supérieur, vous pouvez avoir besoin de spécifique ../../ pour le réseau hôte.
  Utilisez des traits de soulignement à la place des espaces, et évitez, dans la mesure du possible, d'utiliser des caractères spéciaux pour les noms de fichiers et de dossiers. La présence de symboles deux points, de barres obliques, de points et d'apostrophes dans les noms de fichiers ou de dossiers peut parfois cause des problèmes.

• En cas de problème avec un nom de fichier long, raccourcisseze ce nom. Sous Mac OS, les noms de fichiers ne peuvent pas compter plus de 31 caractères.

• Notez que certains serveurs utilisent ce qui est appelé, suivant le système d'exploitation, des liens symboliques (Unix), des raccourcis (Windows) ou des alias (Macintosh), pour connecter un dossier situé en un point du disque du serveur à un autre dossier situé ailleurs. Ces alias n'ont généralement pas d'effet négatif sur votre capacité à vous connecter au dossier ou réseau 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écouvertz un message d'erreur du type « impossible de placer le fichier», votre dossier distant peut être satured. Pour plus d'informations, consultez le journal FTP.

Note: En général, si vous avez un problème durant un transfert via FTP, examinez le journal FTP enCHOISANT Fenetre > Résultats (Windows) ou Site > Journal FTP (Macintosh), puis en cliquant sur l'onglet Journal FTP.

Configuration d'un serveur d'évaluation

Si vous envisagez le développement de pages dynamiques, Dreamweaver doit pouvoir recourir aux services d'un serveur d'évaluation pour générer et afficher du contenu dynamique pendant que vous procédez à la création du site. Ce serveur d'évaluation peut se trouver sur toute ordinateur local, un serveur de développement, un serveur intermédiaire ou un serveur de production.

Pour un aperçu détaillé des objectifs d'un serveur d'évaluation, consultez l'article de David Powers sur le Pôle de développement Dreamweaver : Setting up a local testing server in Dreamweaver CS.

More Help topics

"Choix d'un serveur d'application" on page 559

"Preparation à la création de sites dynamiques" on page 549

Configuration d'un serveur d'évaluation

1 Choisissez Site > Gérer les sites.
2 Cliquez sur Nouveau pour configurer un nouveau site, ou selectionnez un site Dreamweaver existant et cliquez sur Modifier.
3 Dans la boîte de dialogue Configuration du site, Sélectionnez la catégorie Serveurs et effectuez l'une des actions suivantes :

• Cliquez sur le bouton Ajouter nouveau serveur pour ajouter un nouveau serveur.
• Sélectionnez un serveur existant puis cliquez sur le bouton Modifier serveur existant.

4 Définisse les options de base requises, puis cliquez sur le bouton Avancé.

Note: Vous doivent entraire une URL Web dans l'écran Base lorsque vous spécifie un serveur d'évaluation. Pour plus d'informations, consultez la section suivante.

Sous Serveur d'evaluation, selectionnez le mode de serveur que you voulez utiliser pour your application Web.

Note: Depuis la version CS5, Dreamweaver n'installe plus de comportements de serveur ASP.NET, ASP JavaScript ou JSP. (Vou puez reactiver les comportements de serveur déconseillés manuellement si vous le souhaitez, mais n'oubliez pas que Dreamweaver ne les prend officiellement plus en charge.) Toutefois, si vous travailliez sur des pages ASP.NET, ASP JavaScript ou JSP, Dreamweaver continuera à prendre en charge le mode En direct, la coloration de code et les conseils de code pour ces pages. Pour que ces fonctionnalités soient opérationnelles, il n'est pas nécessaire de selectionner ASP.NET, ASP JavaScript ou JSP dans la boîte de dialogue Définition du site.

6 Cliquez sur Enregister pour fermer l'écran Avancé. Ensuite, dans la catégorie Serveurs, spécifiez le serveur que vous venez d'ajouter ou de modifier comme serveur d'évaluation.

A propos de l'URL Web pour le serveur d'évaluation

Voudevez specifie une URL Web afin que Dreamweaver paise faire apel aux services d'un serveur d'evaluation pour afficher les données et se connecter aux bases de données pendant que you procedez à la creation du site, Dreamweaver utilise la connexion au moment de la conception afin de you transmettre des informations utiles sur la base de données, telles que le nom des tableaux qu'elle contient et le nom des colonnes de ces tableaux.

L'URL Web d'un serveur d'évaluation est constituée du nom de Domaine et du nom d'un sous-répertoire ou d'un réseau virtuel du réseau de base de votre site Web.

Note: Bien que cette terminologie, utilise dans Microsoft IIS, puisse différer d'un serveur à l'autre, les mêmes concepts s'appliquent à la plupart des serveurs Web.

Le repertoire de base Dossier qui, sur le serveur, est mapped sur le nom de Domaine de votre site. Supposons que le dossier que vous souhaitez utiliser pourrialer des pages dynamiques est c:\sites\company\, et que ce dossier est yourre repertoire de base (c'est-à-dire que ce dossier est mapped sur le nom de Domaine de votre site, par exemple www.mystartup.com). Dans ce cas, le préfixe d'URL est http://www.mystartup.com/.

Si le dossier que vous souhaitez utiliser pour le traitement des pages dynamiques est un sous-dossier du réseau de base, ajoutez ce sous-dossier à l'URL. Supposons que votre réseau de base est c:\sites\company\, que le nom de Domaine de cette site est www.mystartup.com et que le dossier à utiliser pourTRAiter les pages dynamiques est c:\sites\company\inventory. Entrez l'URL Web suivante :

Si le dossier à utiliser pour Traits les pages dynamiques n'est pas sauf libre répertoire de base ni l'un de ses sous-répertoires, vous doivent creer un réseau virtuel.

Un repertoire virtuel Dossier qui ne se trouve pas physique dans le repertoire de base du serveur, meme s'il apparait dans l'URL. Pour creer un repertoire virtuel, specifies un alias representant le chemin du dossier dans l'URL. Supposons que vous repertoire de base soit c:\sites\company et votre dossier de traitement d:\apps\inventory, et que vous ayez defini pour ce dossier l'alias warehouse. Entrez l'URL Web suivante :

http://www.mystartup.com/warehouse/

Localhost Terme qui peut être utilisé pour désigner le réseau de base dans vos URL lorsque le client (généralement un navigateur, mais dans ce cas Dreamweaver) resides sur le même système que vous serveur Web. Supposons que Dreamweaver réside sur le même système Windows que le serveur Web, que vous réseau de base soit c:\sites\company et que vous ayez défini un réseau virtuel nommé warehouse désignant le dossier charge du traitement des pages dynamiques. Les URL Web suivantes doivent être entrées pour les serveurs Web sélectionnés :

Serveur Web	URL Web
ColdFusion MX 7	http://localhost:8500/warehouse/
IIS	http://localhost/warehouse/
Apache (Windows)	http://localhost:80/warehouse/
Jakarta Tomcat (Windows)	http://localhost:8080/warehouse/

Note: Par défaut, le serveur Web ColdFusion MX 7 s'exécute sur le port 8500, le serveur Web Apache sur le port 80 et le serveur Web Jakarta Tomcat sur le port 8080.

Le repertoire de base des utilisateurs exécutant le serveur Web Apache sur Macintosh est le suivant: Users/MonNomd'Utilisateur/Sites (MonNomd'Utilisateur correspond à votre nom d'utilisateur Macintosh). L'installation de Mac OS 10.1 ou version supérieure entraîne la définition automatique d'un alias intitulé ~MonNomd'Utilisateur. Dès lors, votre URL Web utilisé par défaut dans Dreamweaver se présente de la manière suivante :

http://localhost/\~MonNomd'Utilisateur/

Si le dossier que vous souhaitez utiliser pour le traitement des pages dynamiques correspond à Users:MonNomd'Utilisateur:Sites:inventory, l'URL Web est la suivante :

http://localhost/\~MonNomd'Utilisateur/inventory/

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

Accédez aux catégories Contrôle de version et Paramètres avances de la boîte de dialogue Configuration du site,CHOISSEZ Site > Gérer les sites, SéLECTIONNZ le site à modifier, puis cliquez sur Modifier.

Catégorie Contrôle de version

Vou puez extraire et archiver des fichiers à l'aide de Subversion. Pour plus d'informations, voir "Utilisation de Subversion (svn) pour accuperir et archiver des fichiers" on page 97.

Catégorie Paramètres avancés

Infos locales

Dossier des images par défaut Le dossier dans lequel vous poulez stocker les images de votre site. Tapez le chemin d'accès au dossier, ou cliquez sur l'icone du dossier pour trouver le dossier et le selectionner. Dreamweaver utilise le chemin d'accès au dossier lorsque vous ajoutez des images aux documents.

Liens relatifs à Déterminé le type de liens que Dreamweaver créé lorsque vous créez des liens vers d'autres actifs ou pages dans votre site. Dreamweaver peut creer deux types de liens : des liens relatifs au document et des liens relatifs à la racine du site. Pour plus d'informations sur les différences entre ces types de liens, voir “Chemins absolus, relatifs au documents et relatifs à la racine du site” on page 287.

Par défaut, Dreamweaver creée des liens relatifs au document. Si vous modifie le paramètre par défaut et activez l'options Racine du site, veilsz à entra r'URL Web correcte pour le site dans la zone URL Web (voir ci-dessous). La modification de ce paramètre ne convertit pas le chemin des liens existants ; il s'applique uniquement aux nouveaux liens que vous creez visuèlement à l'aide de Dreamweaver.

Note: Le contenu lié à un chemin relatif à la racine du site n'apparait 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'options Aperçu à l'aide d'un fichier temporaire dans Edition > Préférences > Aperçu dans le navigateur. En effet, à la différence des serveurs, les navigateurs ne reconnaissent pas les racines de sites.

URL Web L'URL de votre site Web. Dreamweaver utilise l'URL Web pour creer des liens relatifs à la racine du site et pour vérifier les liens lorsque vous employez la fonction de vérification des liens.

Les liens relatifs à la racine du site sont utiles si vous n'êtes pas sur de l'emplacement final, dans la structure des répertoires, de la page sur laquelle vous travailliez, ou si vous pensez qu'il pourrait vous arriver de déplacer ou de réorganiser ultérieurement des fichiers contenant des liens. Les liens relatifs à la racine du site sont des liens dont les

chemins d'accès à d'autres actifs du site sont relatifs à la racine du site, et non au document. Ainsi, si vous déplacez le document par la suite, le chemin d'accès à ces actifs reste correct.

Supposons que vous ayez indiqué http://www.mysite.com/mycoolsite (répertoire racine du site du serveur distant) comme URL Web, et que vous ayez également place un dossier images dans le répertoire mycoolsite sur le serveur distant (http://www.mysite.com/mycoolsite/images). Supposons en outre que votre filchier index.html se trouve dans le répertoire mycoolsite.

Lorsque vous creez un lien relatif à la racine du site à partir du fichier index.html vers une image située dans le repertoire images, le lien se présente comme suit :

Ce lien est différent d'un lien relatif au document, qui serait simplement :

<img src="images/image1.jpg" /> 

L'ajout de /mycoolsite/ à la source des images lie l'image par rapport à la racine du site, et non au document. En supposant que l'image reste dans le réseau image, le chemin d'accès à l'image (/mycoolsite/images/image1.jpg) sera toujours correct, même si vous déplacez le fjichier index.html dans un autre réseau.

Pour plus d'informations, voir "Chemins absolus, relatifs au documents et relatifs à la racine du site" on page 287.

En ce qui concerne la vérification des liens, l'URL Web est nécessaire pour déterminer si un lien est interne ou externe au site. Par exemple, si vous URL Web est http://www.mysite.com/mycoolsite et si le vérificateur de liens trouve une URL http://www.yoursite.com sur votre page, il détermine que ce dernier lien est externe et le signale comme tel. De même, le vérificateur de liens utilise l'URL Web pour déterminer si des liens sont internes au site, puis vérifie si ces liens internes ne sont pas coupés.

Vérification des liens sensible à la casse Permet de vérifier que la casse des liens correspond à celle des noms de fichiers lorsque Dreamweaver vérifie les liens. Cette option s'adresse plus particulièrement aux systèmes UNIX où les noms de fichiers tiennent compte des majuscules et des minuscules.

Activier le cache Indique s'il faut creer un cache local pour améliorer la vitesse des tâches de gestion des liens et du site. Si vous n'activez pas cette option, Dreamweaver vous demandera si vous souhaitez créé de nouveau un cache avant de créér le site. Il est préférible d'activer cette option, car le panneau Actifs (du groupe Fichiers) est uniquement opérationnel si un cache est créé.

Voilage et autres catégories

Pour plus d'informations sur les catégories Voilage, Design Notes, Colonnes mode Fichier, Modèles ou Spry, cliquez sur le bouton Aide de la boîte de dialogue.

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

La boite de dialogue Gérer les sites vous donne accès à diverses fonctions de gestion de site dans Dreamweaver. A partir de cette boite de dialogue, vous pouvez lancer le processus de création d'un nouveau site, modifier un site existant, copier un site, supprimer un site ou importer et exporter les paramétres d'un site.

Note: La boite de dialogue Gérer les sites ne vous permit pas de vous connecter à un serveur distant ou d'y publier des fichiers. Pour savoir comment vous connecter à un serveur distant, consultez la section “Connexion à un serveur distant” on page 42. Si vous tentez de vous connecter à un site Web existant, consultez la section “Modification d'un site Web distant existant” on page 56.

1 Sélectionnez Site > Gérer les sites et sélectionnéz un site dans la liste de gauche.

2 Cliquez sur un bouton pour selectionner l'une des options, apportez les modifications désirées, puis cliquez sur Terminate.

Nouveau Pour creer un nouveau site. Lorsque vous cliquez sur le bouton Nouveau, la boite de dialogue Configuration du site s'affiche et vous invite a entrer le nom et definir l'emplacement de votre nouveau site. Pour plus d'informations, consultez la section "Configuration d'une version locale de votre site" on page 42.

Modifier Vous permet de modifier des informations comme le nom d'utilisateur, le mot de passer et les informations sur le serveur d'un site Dreamweaver existant. Sélectionnez le site existant dans la liste des sites sur la gauche, puis cliquez sur le bouton Modifier pour modifier le site existant. Pour plus d'informations sur la modification des options d'un site existant, consultez la section "Connexion à un serveur distant" on page 42.

Dupliquer Crée une copie d'un site existant. Pour dupliquer un site, Sélectionnez-le dans la liste de gauche, puis cliquez sur le bouton Dupliquer. Le site dupliqué s'affiche dans la liste des sites, le mot « copie » étant ajusté au nom du site. Pour modifier le nom du site dupliqué, Sélectionnez-le puis cliquez sur le bouton Modifier.

Supprimer Supprime le site selectionné et toutes ses informations de configuration de la liste de sites Dreamweaver ; les fichiers du site proprement dits ne sont pas supprimés. Si vous souhaitez supprimer les fichiers du site de votre ordinateur, vous doivent faire manuellement. Pour supprimer un site de Dreamweaver, Sélectionnez-le dans la liste des sites, puis cliquez sur le bouton Supprimer. Cette opération est irréversible.

Exporter/Importer Permet d'exporter les paramètres du site sélectionné sous la forme d'un fisier XML (*.ste), ou d'importer les paramètres d'un site. Pour plus d'informations, consultez la section "Importation et exportation des paramètres d'un site Dreamweaver" on page 54.

Note: La fonction d'importation se limite à importer les paramétres de site qui ont été exportés précédemment. Elle n'importe pas des fichiers de site afin de créé un nouveau site Dreamweaver. Pour plus d'informations sur la création d'un nouveau site dans Dreamweaver, consultez la section "Configuration d'une version locale de votre site" on page 42.

More Help topics

"A propos des sites Dreamweaver" on page 40

"Modification d'un site Web distant existant" on page 56

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

Voupex poteer les parametres de voite site sous la forme d'un fichier XML que you pourrez importer dans Dreamweaver ulterieurement. L'exportation/importation de sites you permet de transfierer les parametes d'un site vers d'autres ordinateurs et d'autres versions du produit, de partager les parametes d'un site avec d'autres utiliseurs et de sauegarder les parametes d'un site.

La fonction d'exportation/importation ne permet pas d'importer ou d'exporter les fichiers du site. Elle se limite à importer/exporter les paramètres du site, afin de vous faire gagner du temps lorsque vous recréez des sites dans Dreamweaver. Pour plus d'informations sur la création d'un nouveau site dans Dreamweaver, consultez la section "Configuration d'une version locale de votre site" on page 42.

Exportez les paramétres de votre site régulièrement de façon à disposer d'une copie de sauvégarde au cas où un incident survient dans sur ce site.

More Help topics

"A propos des sites Dreamweaver" on page 40

Sauvegarde et restauration de definiptions de sites

Exportation des paramètres de votre site

1 Sélectionnez Site > Gérer les sites.
2 Sélectionnez un ou plusieurs sites dont vous souhaitez exporter les paramètres, puis cliquez sur Exporter :
- Pour sélectionner plusieurs sites, appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant avec la souris sur chaque site.
Pour selectionner une série de sites, cliquez en maintainant la touche Maj enfoncée sur le premier et le dernier site de la série.
3 Si vous poulez sauvegarder les paramètres de votre site pour vous,CHOISSEZ LA PREMIÈRE OPTION DE LA BOITE DE dialogue Exportation du site, puis cliquez sur OK. Dreamweaver enregistre les informations de connexion au serveur distant (nom d'utilisateur et mot de passer, par exemple), ainsi que les informations de chemin local.
4 Si vous voulez partager vos paramètres avec d'autres utilisateurs, choisissez la seconde option de la boîte de dialogue Exportation du site, puis cliquez sur OK. (Dreamweaver n'enregistre pas les informations qui ne sont pas valables pour d'autres utilisateurs (vos informations de connexion au serveur distant et de chemins locaux, par exemple).
5 Pour chaque site dont les paramètres doivent être exportés, recherche un emplacement où vous souhaitez enregistrer le fjichier du site, puis cliquez sur Enregistrer. (Dreamweaver enregistrre les paramètres de chaque site en tant que fjichier XML avec une extension de fjichier .ste.)
6 CliqueurTerminé.

Note: Enregistrez le fichier .ste dans le dossier racine de votre site ou sur votre bureau pour faciliter sa recherche. Si vous ne vous souvenez pas de l'endetroit où il se trouve, effectuez sur votre ordinateur une recherche portant sur les fichiers dotés de l'extension .ste.

Importation des paramètres d'un site

1 Sélectionnez Site > Gérer les sites.
2 Cliqueur Importer.
3 Recherche et selectionnez un ou plusieurs sites (définis dans des fichiers ayant une extension .ste) dont vous souhaitez importer les paramétres.

Pour selectionner plusieurs sites, appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant avec la souris sur chaque fischier .ste. Pour selectionner une série de sites, cliquez en Maintenant la touche Maj enforcée sur le premier et le dernier fischier de la série.

4 Cliques sur Ouvrir, puis sur Terminate.

Une fois que Dreamweaver a importé les sites, leurs noms apparaissent dans la boite de dialogue Gérer les sites.

Modification d'un site Web distant existant

Vou puez utilise 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 creer le site original. Avant de pouvoir modifier ce site, vous doivent disposer des informations de connexion correctes et vous connecter au serveur distant du site.

1 Créez un dossier local contenant le site existant, puis définissez-le en tant que dossier local du site. (Consultez la section "Configuration d'une version locale de votre site" on page 42).

Note: Vous doivent copier localement la structure complète de la branche concernée du site distant existant.

2 Configurez un dossier distant en utilisant les informations d'accès à distance de votre site existant. Vousdezvezvous connecter au site existant pour télécharger les fischiers sur voire ordinateur avant de pouvoir les modifier. (Consultez la section "Connexion à un serveur distant" on page 42.)

Veillez àCHOISIR le dossier racine correct pour le site distant.

3 Dans le panneau Fichiers (Fenetre > Fichiers), cliquez sur le bouton Connecter à un hote distant (pour un accès FTP) ou sur Actualiser (pour un accès réseau) dans la barre d'outils pour afficher le site distant.

4 Modifiez le site :

• Si vous souhaitez travailler sur l'ensemble du site, Sélectionnez, dans le panneau Fichiers, le dossier racine du site distant, puis cliquez sur Acquérir le(s) fichier(s) dans la barre d'outils pour télécharger l'ensemble du site sur votre disque local.
• Si vous désirez travailler sur un seul des fischiers ou dossiers du site, Sélectionné ce fjchier ou dossier dans le volet Affichage distant du panneau Fichiers et cliquez sur Acquérir le(s) fjchier(s) dans la barre d'outils pour télécharger ce fjchier 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écharge au niveau ajustat dans la hierarchie du site. Si vous ne modifie qu'une partie d'un site, il est en général conseilé de charger également les fichiers dépendants, tels que les fichiers d'image.

More Help topics

"A propos des sites Dreamweaver" on page 40

Modification d'un site Web existant (blog Dreamweaver)

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

Selectionnez vos préférences pour le contrôle des fonctions de transfert de fichiers dans le panneau Fichiers.

1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
2 Dans la boîte de dialogue Préférences, Sélectionnez la catégorie Site dans la liste de gauche.
3 Définissez les options, puis cliquez sur OK.

Toujours afficher Indique le site (local ou distant) qui doit toujours etre affiché ainsi que le volet (gauche ou croit) du panneau Fichiers dans lequel doit etre presentes les fichiers locaux et distants.

Par défaut, le site local apparait toujours dans le volet droit. Le volet qui n'a pas eté choisi (celui de gauche par défaut) sera le volet interchangeable : il pourra alors afficher les fichiers de l'autre site (le site distant par défaut).

Fichiers dépendants Affiche une invite proposant de transférer les fischiers dépendants (images, feuilles de style externes et autres fischiers référencés par les fischiers HTML) qui doivent être charges par le navigateur en même temps que le fichier HTML. Par défaut, les options Invite lors de Acquérir/Extraire et Invite lors de Placer/Archiver sont toutes deux activées.

D'une manière générale, il est conseilé de télécharger les fischiers dépendants lorsque le fjchier extrait est un nouveau fjchier, mais c'est inutil si les versions les plus récentes des fischiers dépendants sont déjà prsentes sur le disque local. Cela s'applique également lors du transfert et de l'archivage de fischiers : il n'est pas nécessaire si des copies mises à jour sont déjà prsentes dans la destination.

Si you desactivez ces options, vos fichiers dependantes ne sont pas transférés. Ainsi, pour forcer l'affichage la boite de dialogue Fichiers dependantes même lorsque ces options sont deselectionnées, maintenez la touche Alt (Windows) ou Option (Macintosh) enfoncée tout enCHOISANT Acquerir, Placer, Archiver ou Extraire.

Connexion FTP Determine si la connexion avec le site distant doit etre interrompu ares le delai d'inactivite specifie.

Délai FTP Indique le temps, exprime en secondes, pendant lequel Dreamweaver tente d'étabrir une connexion avec le serveur distant.

S'il n'y a toujours pas de réponse à l'issue du début indiqué, Dreamweaver affiche une boîte de dialogue pour vous en avertir.

Options de transfert FTP Determine si Dreamweaver seLECTIONne l'option par défaut après un nombre de secondes spécifique, lorsqu'une boîte de dialogue apparait lors du transfert d'un fichier et que l'utilisateur ne fournit aucune réponse.

Hôte proxy Spécifie l'adresse du serveur proxy par lequel vous vous connectez aux serveurs externes si vous vous trouvez derrière un pare-feu.

Dans le cas contraire, laisseriez ce champ vierge. Si vous vous trouvez derrière un pare-feu, activez l'option Utiliser un proxy de la boîte de dialogue Définition du site (Serveurs > Modifier un serveur existant (icone représentant un crayon) > Autres options).

Port du proxy Sécífie le port de votre proxy ou de votre pare-feu par lequel vous passez pour vous connecter au serveur distant. Si vous vous connectez par l'intermédiaire d'un port autre que 21 (port par défaut pour FTP), tapes son numéro ici.

Options de placement : Enregistrer les fischiers avant de les placer Indique que les fischiers non enregistrres sont automatiquement enregistrres avant d'être placés sur le site distant.

Options de déplacement : Demander avant de déplacer les fichiers sur le serveur Vous alerte lorsque vous tentez de déplacer des fichiers sur le site distant.

Gérer les sites Ouvre la boîte de dialogue Gérer les sites, dans laquelle vous pouvez créé un site ou modifier un site existant.

Vous pouvez définir si les types de fichiers transférés doivent l'être au format ASCII (texte) ou binaire, et ce en personnelisant le fjchier FTPExtensionMap.txt situé dans le dossier Dreamweaver/Configuration (sur Macintosh, il s'agit du fjchier FTPExtensionMapMac.txt). Pour plus d'informations, voir Extension de Dreamweaver.

Gestion de sites Contribute

Gestion de sites Contribute

Adobe® Contribute® CS4 regroupe les fonctions d'un navigateur Web et d'un éditeur de pages Web. Il permet à vos collègues ou clients de naviguer jusqu'à une page d'un site que vous avez créé et de modifier ou de partager à jour cette page s'ils possèdent les droits d'accès adéquats. Les utilisateurs de Contribute peuvent ajouter et partager à jour du contenu Web de base, y compris du texte mis en forme, des images, des tableaux et des liens. Les administrateurs de sites Contribute peuvent limiter les actions que les utilisateurs ordinaires (non administrateurs) peuvent effectuer dans un site.

Note: Cette section s'adresse aux administrateurs de Contribute.

En tant qu'administrateur du site, vous donne la possibilité aux personnes qui ne sont pas administrateurs de modifier des pages en créé et en leur envoyant une clé de connexion (pour plus d'informations sur la façon de procéder, consultez l'aide de Contribute). Vous pouvez également configurer une connexion à un site Contribute à l'aide de Dreamweaver qui vous permet, à vous ou à votre concepteur de site, de vous connecter au site Contribute et d'utiliser toutes les fonctions de modification disponibles dans Dreamweaver.

Contribute ajoute des fonctionnalités à votre site Web avec Contribute Publishing Server (CPS), une suite d'applications de publication et d'outils de gestion utiliser qui vous permet d'intégrer Contribute au service d'annuaire utilisateur de votre organisation (Lightweight Directory Access Protocol (LDAP) ou Active Directory, par exemple). Lorsque vous activez votre site Dreamweaver en tant que site Contribute, Dreamweaver lit les paramétres d'administration de Contribute chaque fois que vous vous connectez au site distant. Si Dreamweaver détecte que CPS est actif, il hérite de certaines fonctionnalités des services CPS (restauration des fichiers et consignation des événements, par exemple).

Vou puez utiliser Dreamweaver pour vous connecter à un site Contribute et modifier un fisier de ce site. La plupart des options Dreamweaver fonctionnent avec un site Contribute de la même façon qu'avc tout autre site. Toutefois, lorsque vous utilisez Dreamweaver avec un site Contribute, Dreamweaver effectue automatiquement certaines opérations de gestion de fichiers, telles que l'enregistrement de différentes versions d'un document et la consignation de certains événements dans la console CPS.

Pour plus d'informations, consultez l'aide de Contribute.

Structure du site et conception de pages pour un site Contribute

Pour permettre aux utilisateurs de Contribute de modifier votre site Web, tenez compte des considérations suivantes lors de sa structuration :

• Utilisez une structure de site simple. Evitez de creer de nombreux niveaux de dossiers. Regroupez les éléments associés dans un même dossier.

• Définisse des droits en lecture et en écriture appropriés pour les dossiers sur le serveur.

• Ajoutez des pages d'index aux dossiers à mesure que vous les créez pour inciter les utilisateurs de Contribute à placer les nouvelles pages dans les dossiers appropriés. Par exemple, si les utilisateurs de Contribute fournissent des pages contenant des comptes rendus de réunions, vous pouvez créé un dossier dans le dossier racine du site appelé comptes_rendus et y insérer une page d'index. Vous doivent ensuite créé un lien qui renvoie à la page d'index des comptes rendus sur la page principale du site. Un utilisateur de Contribute peut alors atteindre la page d'index et créé une page de procès-verbal pour une réunion donnée, désignée par un lien depuis cette page.

• Dans chaque page d'index du dossier, fournissez une liste de liens vers chaque page et document contenus dans ce dossier.

• Utilisez des conceptions de pages simples en évitant des mises en forme fantaisistes.

• Utilisez CSS plott que des balises HTML et attribuez un nom descriptif à vos styles CSS. Si les utilisateurs de Contribute utilisent un jeu de styles standard dans Microsoft Word, attribuez à vos styles CSS les mêmes noms que ceux des styles Word correspondants, afin que Contribute puisse faire correspondre les styles lorsqu'un utiliser copie des données d'un document Word et les colle dans une page Contribute.
• Pour empêcher les utilisateurs de Contribute d'utiliser un style CSS, modifier le nom du style de sorte qu'il commence par mmhide_. Par exemple, si vous utilisez un style nommé Justification_droite dans une page mais que vous ne souhaitez pas que les utilisateurs de Contribute puissant utiliser ce style, renommez-le de la façon suivante : mmhide_Justification_droite.

Note: Vous doivent ajouter mmhide_ au nom du style en mode Code et non dans le panneau CSS.

• Dans un souci de simplicité, utilisez aussi peu de styles CSS que possible.
• Si vous utilise des inclusions côté serveur pour des éléments de pages HTML, par exemple des en-tête ou des pieds de page, créez une page HTML non liée contenant les liens vers les fichiers d'inclusion. Les utilisateurs de Contribute peuvent ensuite marquer cette page et l'utiliser pour rechercher les fichiers d'inclusion et les modifier.

More Help topics

"Creation d'un modele Dreamweaver" on page 415

"Utilisation des inclusions cote serveur" on page 358

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 fischiers 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 fischiers, vous risque d'écraser les dernières modifications apportées à un filchier par un utilisateur de Contribute.

Lorsque vous archieve un fisier dans un site Contribute, Dreamweaver effectue automatique une copie de sauvegarde de la version precedemment archive du fisier dans le dossier_baks et ajoute votre nom d'utilisateur et la date à un fisier Design Notes.

More Help topics

"Archivage et extraction de fichiers" on page 94

Autorisations des fichiers et des dossiers Contribute sur le serveur

Contribute offre un moyen de gerer les autorisations de fichiers et de dossiers pour chaque rrole d'utilisateur que vous aurez defini ; toutefois, Contribute ne permit pas de gerer les autorisations de lecture et d'ecriture de base affectees aux fichiers et aux dossiers par le serveur. Dans Dreamweaver, vous pouvez gerer ces autorisations directement sur le serveur.

Si un utilisateur de Contribute ne dispose pas de droit d'accès en lecture sur le serveur pour un fichier dépendant, tel qu'une image affichée dans une page, le contenu de ce fichier ne s'affiche pas dans la fenêtre Contribute. Par exemple, si un utilisateur ne dispose pas de droit d'accès en lecture à un dossier d'images, les images containues dans ce dossier s'affichent sous la forme d'icons d'image déchirée dans Contribute. De même, les modèles Dreamweaver sont stockés dans un sous-dossier du dossier racine du site. Ainsi, si un utilisateur de Contribute ne dispose pas d'accès en lecture au dossier racine, il ne peut pas utiliser les modèles de ce site, sauf si vous copiez les modèles dans un dossier accessible.

Lorsque vous définissez un site Dreamweaver, vous devez accorder aux utilisateurs des droits d'accès en lecture au dossier /_mm sur le serveur (sous-dossier _mm du dossier racine), ainsi qu'au dossier /Templates et à tous les dossiers contenant des ressources dont ils auront besoin.

Si pour une raison quelconque, vous ne pouvez pas accorder de droits d'accès en lecture au dossier /Templates, vous pouvez tout de même rendition les modèles accessibles aux utilisateurs de Contribute. Consultez la rubrique “Activation de l'accès aux modèles sans l'accès au dossier racine pour les utilisateurs de Contribute” on page 64.

Pour plus d'informations sur les autorisations Contribute, voir Administration de Contribute dans l'aide de Contribute.

Fichiers spéciaux Contribute

Contribute utilise divers fichiers spéciaux qui ne sont pas destinés à être consultés par les visiteurs du site :

• le fichier de paramètres partagés, avec une extension CSI, qui s'affiche dans un dossier nommé _mm dans le dossier racine du site et contient des informations utilisées par Contribute pour la gestion du site ;
  des versions precedentes de fichiers, dans des dossiers nommés_baks;
  des versions temporaires de pages, afin que les utilisateurs puissant afficher un aperçu des modifications ;
  des fichiers de verrouillage temporaires, indiquant qu'une page spécifique est en cours de modification ou affichée en aperçu ;
  des fichiers Design Notes contenant des métadonnées relatives aux pages du site.

En général, vous ne devez pas modifier ces fichiers spéciaux dans Dreamweaver ; Dreamweaver les gere automatiquement.

Si vous ne souhaitez pas que ces fichiers spéciaux Contribute apparaissent sur votre serveur publiquement accessible, vous pouze définit un serveur intermédiaire sur lequel les utilisateurs de Contribute pourront travailler sur les pages. Vous pouze ensuite régulièrement copier ces pages Web du serveur intermédiaire au serveur de production qui se trouve sur le Web. Si vous utilisez un serveur intermédiaire, copiez uniquement les pages Web sur le serveur de production. Ne copiez aucun des fichiers spéciaux Contribute mentionnés ci-dessus. En particulier, ne copiez pas les dossiers _mm et _baks sur le serveur de production.

Note: Pour plus d'informations sur la configuration d'un serveur afin d'éviter que les visiteurs ne voient les fichiers des dossiers commençant par un souligné, consultez le chapitre traitant de la sécurité des sites Web dans l'aide de Contribute.

Parfois, vous devrez supprimer manuellement d'autres fichiers spéciaux Contribute. Par exemple, si Contribute n'arrive pas à supprimer des pages temporaires d'aperçu, une fois l'aperçu fermé par l'utilisateur, vousdezsupprimer ces pages temporaires manuellement. Le nom de fichier des pages temporaires d'aperçu commence par TMP.

De même, un fjichier de verrouillage obsoète peut accidentellement rester sur le serveur. Dans ce cas, vousdez les supprimer manuellement pour que les autres utilisateurs puissant modifier la page.

Préparation d'un site à utiliser avec Contribute

Si vous préparez un site Dreamweaver existant pour les utilisateurs de Contribute, vous devez activer la compatibilité avec Contribute de façon explicite afin d'utiliser les fonctions relatives à Contribute; Dreamweaver n'affiche pas de message vous invitant à le faire; toutefois, lorsque vous vous connectez à un site qui a été configuré en tant que site Contribute (avec un administrateur), Dreamweaver vous invite à activer la compatibilité avec Contribute.

Tous les types de connexion ne prennant pas en charge la compatibilité avec Contribute. Les restrictions suivantes s'appliquent aux types de connexion :

• Si vous vous connectez à votre site distant à l'aide de WebDAV, vous ne pouvez pas activer la compatibilité avec Contribute, car ces systèmes de commande source ne sont pas compatibles avec les systèmes Design Notes et les systèmes d'archivage et d'extraction que Dreamweaver utilise pour les sites Contribute.
• Si vous utilisez RDS pour vous connecter à votre site distant, vous pouvez activer la compatibilité avec Contribute, mais vous doivent ensuite personnaliser leur connexion avant de pouvoir la partager avec des utilisateurs de Contribute.
• Si vous utilisez votre ordinateur local comme serveur Web, vous doivent définir le site à l'aide d'une connexion FTP ou réseau (au lieu d'un simple chemin de dossier local) pour pouvoir partager votre connexion avec des utilisateurs de Contribute.

Lorsque vous activez la compatibilité avec Contribute, Dreamweaver active automatiquement Design Notes (y compris l'option Télécharger les Design Notes pour les partager), ainsi que le système d'archivage et d'extraction de fichiers.

Si Contribute Publishing Server (CPS) est actif sur le site distant auquel vous vous connectez, Dreamweaver notification CPS dés que vous executez une opération réseau, telle que l'archivage, la restauration ou la publication d'un fjichier. Le CPS conserve une trace de ces événements, que vous pouvez afficher dans la console d'administration CPS. (Si vous désactivez CPS, ces événements ne sont pas consignés.) L'activation de CPS s'effectue via Contribute. Pour plus d'informations, consultez l'aide d'Adobe Contribute.

Note: Vous pouvez rendre un site compatible avec Contribute sans que Contribute soit installé sur votre ordinateur. Toutefois, si vous souhaitez demarrer Contribute Administrator à partir de Dreamweaver, Contribute doit être installé sur le même ordinateur que Dreamweaver et vous doivent connecté au site distant avant d'activer la compatibilité avec Contribute. Dans le cas contraire, Dreamweaver ne peut pas dire les paramètres d'administration de Contribute pour déterminer si les services CPS et l'option de restauration sont actifs.

Important: Vous doivent vous assurer que le fichier de paramétres partages (fichier CSI) que Contribute emploie pour administrer le site se trouve bien sur le serveur distant et n'est pas endommagé. Contribute créé automatiquement ce fichier (et écrase ses anciennes versions) des que vous effectuez des tâches d'administration dans Contribute Administrator. Si le fichier de paramétres partages ne se trouve pas sur le serveur, ou s'il est endommagé, Dreamweaver vous informme que le fichier requis pour la compatibilité avec Contribute n'existe pas sur le serveur dés que vous tentez une opération réseau ( comme un placement). Pour vous assurer que le fichier correct se trouve bien sur le serveur, désactivé la connexion au serveur dans Dreamweaver, démarrez Contribute Administrator, apportez une modification administrative, puis reconnectpez-vous au serveur dans Dreamweaver. Pour plus d'informations, consultez l'aide d'Adobe Contribute.

1 Choisissez Site > Gérer les sites.
2 Sélectionnez un site, puis cliquez sur Modifier.
3 Dans la boîte de dialogue Configuration du site, développement Paramétres avances, Sélectionnez la catégorie Contribute, puis activez l'option Activer la compatibilité avec Contribute.
4 Si une boîte de dialogue s'affiche indiquant que vous devez activer Design Notes et la fonction Archiver/Extraire, cliquez sur OK.

5 Si vous n'avez pas déjà fou原因 les informations de contact pour la fonction Archiver/Extraire, entrez votre nom et votre adresselectronique dans la boite de dialogue, puis cliquez sur OK. L'etat de la restauration, l'etat des services CPS, la zone de texte URL de la racine du site et le bouton Administer le site dans Contribute apparaissent dans la boite de dialogue Definition du site.

Si la restauration est activée dans Contribute, vous pouvez restaurer les versions précédentes des fichiers que vous avez modifiés dans Dreamweaver.

6 Vérifiez l'URL qui s'affiche dans la zone de texte URL de la racine du site et modifiez-la le cas échéant. Dreamweaver construit une URL de la racine du site en fonction des informations de définition de site que vous avez fournies, mais il se peut que l'URL construite ne soit pas tout à fait correcte.
7 Cliquez sur le bouton Tester pour vérifier si l'URL que vous avez saisie est correcte.

Note: Si vous étés prét à envoyer une clé de connexion ou à effectuer les tâches d'administration du site Contribute, ignorez les étapes restantes.

8 Cliquez sur Administer le site dans Contribute si vous voulez apporter des modifications administratives.
N'oubliez pas que Contribute doit être installé sur le même ordinateur si vous voulez ouvrir Contribute Administrator à partir de Dreamweaver.
9 Cliques sur Enregistrer puis sur Terminate.

More Help topics

"Restauration de fichiers (utilisateurs de Contribute)" on page 108

Administration d'un site Contribute avec Dreamweaver

Après avoir activé la compatibilité avec Contribute, vous pouvez utiliser Dreamweaver pour lancer Contribute afin d'effectuer les tâches d'administration du site.

Note: Contribute doit être installé sur le même ordinateur que Dreamweaver.

En tant qu'administrateur d'un site Contribute, vous pouvez :

• modifier les paramètres administratifs au niveau du site ;

Les paramètres administratifs de Contribute rassemblant 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 experience 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.

Note: Une clé de connexion ne correspond pas à un fichier de site exporté de Dreamweaver

Avant de donner aux utilisateurs de Contribute les informations de connexion dont ils ont besoin pour modifier les pages, utilisez Dreamweaver pour creer la hierarchie de dossiers de base de votre site, ainsi que les modèle et les feuilles de style CSS nécessaires au site.

1 Choisissez Site > Gérer les sites.
2 Sélectionnez un site, puis cliquez sur Modifier.

3 Dans la boîte de dialogue Configuration du site, développement Paramètres avancés, puis sélectionnez la catégorie Contribute.
4 Cliquez sur le bouton Administer re le site dans Contribute.

Note: Ce bouton s'affiche uniquement si vous avez activé la compatibilité avec Contribute.

5 Si nécessaire, tapez le mot de passer administrateur, puis cliquez sur OK.

La boîte de dialogue Administration du site Web s'affiche.

• Pour modifier les paramètres administratifs, Sélectionnez une catégorie dans la liste de gauche, puis modifiez les paramètres en fonction des besoin.
• Pour modifier les paramètres de role, dans la catégorie Utilisateurs et rôles, cliquez sur Modifier les paramètres de role, puis apportez les modifications nécessaires.
• Pour envoyer une clé de connexion afin de définir les utilisateurs, dans la catégorie Utilisateurs et rôles, cliquez sur Envoyer la clé de connexion, puis renseignez l'Assistant de connexion.
  6 Cliques sur Fermer, cliquez sur OK, puis sur Terminate.

Pour plus d'informations sur les paramètres administratifs, la gestion des rôles utilisateur ou la création d'une clé de connexion, voir l'aide de Contribute.

More Help topics

"Importation et exportation des paramètres d'un site Dreamweaver" on page 54

Suppression, déplacement ou modification du nom d'un fichier distant sur un site Contribute

Pour supprimer un fjichier d'un serveur distant qui héberge un site Contribute, procédez de la même façon que pour supprimer un fjichier sur le serveur de tout site Dreamweaver. Toutefois, lorsque vous supprimez un fjichier d'un site Contribute, Dreamweaver vous demande si vous souhaitez supprimer toutes les anciennes versions du fjichier. Si vous decide de les conserver, Dreamweaver enregistre une copie de la version actuelle dans le dossier _baks afin que vous puissiez la restaurer ultérieurement.

Pour modifier le nom d'un fisier distant ou déplacer le fisier 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 fisier associées qui sont enregistrées dans le dossier_baks.

1 Sélectionnez le fichier dans le volet distant du panneau Fichiers (Fenêtre > Fichiers) et appuyez sur Retour arrêté (Windows) ou Arrière (Macintosh).
Une boîte de dialogue s'affiche vous demandant de confirmer la suppression du fichier.
2 Dans la boite de dialogue de confirmation :
- Pour supprimer toutes les versions précédentes du fichier ainsi que la version actuelle, sélectionnez l'option Supprimer les versions de restauration.
- Pour conserver les anciennes versions sur le serveur, désélectionné l'option Supprimer les versions de restauration.
3 Cliques sur Oui pour supprimer le fichier.

Activation de l'accès aux modèles sans l'accès au dossier racine pour les utilisateurs de Contribute

Dans un site Contribute, les autorisations de fichiers et de dossiers de base sont générées directement sur le serveur. Si pour des raisons de sécurité, vous ne pouvez pas accorder de droits d'accès en lecture au dossier /Templates, vous pouvez tout de même rendition les modèles accessibles aux utilisateurs.

1 Définissez le site Contribute afin que le dossier racine soit le dossier qui s'affiche en tant que racine pour les utilisateurs.
2 Copiez manuellement le dossier de modèles du dossier racine du site principal dans le dossier racine du site Contribute, à l'aide du panneau Fichiers.
3 Apre's avoir modifie le site principal, recopiez les modeles modifiés dans les sous-dossiers appropriés.

Si vous faites appel à cette méthode, n'utilise 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éfinis dans Dreamweaver. Les utilisateurs de Contribute ne peuvent pas créé de liens relatifs à la racine du site.

Si les liens d'une page Contribute apparaissent rompus, il peut s'agir d'un problème d'autorisations pour le dossier, en particulier si les liens revoient à 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.

More Help topics

"Chemins absolus, relatifs au documents et relatifs à la racine du site" on page 287

Dépannage d'un site Contribute

Si un fjichier distant d'un site Contribute semble avoir eté extrait, mais qu'il n'est pas réellement verrouillé sur l'ordinaireur de l'utilisateur, vous pouvez déverrouiller le fjichier afin de permettre aux utilisateurs de le modifier.

Lorsque vous cliquez sur un bouton lié à l'administration d'un site Contribute, Dreamweaver vérifie qu'il peut se connecter au site distant et que l'URL de la racine du site indiquée pour le site est valide. Si Dreamweaver ne peut pas se connecter ou si l'URL n'est pas valide, un message d'erreur s'affiche.

Si les outils d'administration ne fonctionnent pas correctement, cela peut etre du au dossier _mm .

Déverrouillage d'un fichier dans un site Contribute

Note: Avant de suivre cette procédure, assurez-vous que le fichier n'est pas extrait. Si vous déverrouillez un fichier pendant qu'un utilisateur de Contribute le modifie, plusieurs utilisateurs risquent de modifier ce fichier en même temps.

1 Effectuez l'une des opérations suivantes :
- Ouvrez le fichier dans la fenêtre Document, puis choisissez Site > Annuler extraction.
- Dans le panneau Fichiers (Fenêtre > Fichiers), cliquez avec le bouton droit (Windows) ou en maintainant la touche Ctrl enfoncée (Macintosh), puis selectionné 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.

Dépannage des problèmes de connexion pour un site Contribute

1 Vérifiez l'URL de la racine du site dans la catégorie Contribute de la boîte de dialogue Définition de site en ouvrant cette URL dans un navigateur, pour vous assurer qu'elle ouvre la bonne page.
2 Cliquez sur le bouton Tester dans la catégorie Infores distantes de la boite de dialogue Definition du site pour vous assurer que vous pouvez vous connecter au site.
3 Si l'URL est correcte mais qu'un message d'erreur s'affiche lorsque vous effectuez un test, contactez votre administrateur système pour obtenir de l'aide.

Dépannage des outils administratifs de Contribute

1 Sur le serveur, assurez-vous que vous disposez des autorisations de lecture et d'écriture, voire d'exécution, pour le dossier _mm.
2 Vérifiez que le dossier _mm contient un fisier de paramètres partages portant l'extension CSI.
3 Si ce n'est pas le cas, utilisez l'Assistant de connexion pour creer une connexion au site et devenir administrateur du site. Le fjchier de parametes partagés est cree automatiqueoment lorsque vous devenez administrateur. Pour plus d'informations sur la façon de revenir administrateur d'un site Web Contribute existant, consultez la section Administration de Contribute dans l'aide de Contribute.

Chapter 4: Création et gestion de fichiers

Création et ouverture de documents

A propos de la création de documents Dreamweaver

Dreamweaver fournit un environnement souple pour l'utilisation de divers documents Web. Outre les documents HTML, vous pouze creer et ouvrir divers documents en mode texte, de type CFML (ColdFusion Markup Language), ASP, JavaScript et CSS (Cascading Style Sheets, feuilles de style en cascade). Les fischiers de code source, tels que Visual Basic, .NET, C# et Java, sont également pris en charge.

Dreamweaver propose diverses options pour la création d'un nouveau document. Vous pouvezisser les types de document suivants :

• un nouveau document ou un modele vierge;
• un document basé sur l'une des mises en pages prédéfinies fournies avec Dreamweaver, dont plus de 30 mises en page basées sur CSS ;
• un document basé sur un de vos modèles existants.

Vous pouze également définir les préférences des documents. Par exemple, si vous avez l'habitude de travailler avec un type particulier de document, vous pouze le définir comme type par défaut pour les nouvelles pages.

Vou puez aisement definir 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 Creation ou en mode Code.

Types de fichier Dreamweaver

Vous pouvez travailler avec un grand besoin de types de fischiers dans Dreamweaver. Le fisier HTML est celui avec lequel vous travaillerez le plus souvent. Les fischiers HTML (pour fischiers de type Hypertext Markup Language) contiennent le langage à base de balises qui se charge d'afficher une page Web dans un navigateur. Vous pouze enregistrer les fischiers HTML avec l'extension .html ou .htm. Dreamweaver enregistre par défaut les fischiers avec l'extension .html.

Dreamweaver permet de creer et de modifier des pages Web HTML5. Les mises en forme de depart sont également disponibles pour la creation de nouvelles pages HTML5.

Voici quelques autres types de fichiers courants que vous pourriez utiliser quand vous travailliez avec Dreamweaver :

CSS Les fischiers CSS (Cascading Style Sheet, feuille de style en cascade) possèdent l'extension.css. Ils sont utilisés pour formater le contenu HTML et fixer le positionnement de divers éléments de page.

GIF Les fischiers GIF (Graphics Interchange Format) possèdent l'extension .gif. Ce format graphique est très utilisé dans les dessins humoristiques, les logos, les graphismes pourvus de zones transparentes et les animations. Les GIF sont constitués d'un maximum de 256 couleurs.

JPEG Les fischiers JPEG (Joint Photographic Experts Group, du nom de l'organisation qui a créé le format) possèdent l'extension .jpg et correspondent généralement à des photographies ou à des images très colorées. Ce format est le plus approprié pour les photographies numériques ou scannées, les images utilisant des textures, les images poursvues de transitions à gradient de couleurs ainsi que toutes les images exigeant plus de 256 couleurs.

XML Les fichiers XML (Extensible Markup Language) possèdent l'extension .xml. Ils contiennent des données brutes qui peuvent être formées en utilisant XSL (Extensible Stylesheet Language).

XSL Les fichiers XSL (Extensible Stylesheet Language) possèdent l'extension .xsl ou .xslt. Ils sont utilisés pour créé des données XML que vous voulez afficher sur une page Web.

CFML Les fichiers CFML (ColdFusion Markup Language) possèdent l'extension .cfm. Ils sont utilisés pour Traits des pages dynamiques.

PHP Les fichiers Hypertext Preprocessor possèdent l'extension .php et sont utilisés pour Traitser des pages dynamiques.

More Help topics

"Affichage de données XML avec XSLT" on page 521

"Creation visuelle d'applications" on page 636

"Description des feuilles de style en cascade" on page 132

Creation d'une page vierge

Vou puez creer une page contenant une mise en forme CSS prdefinie, ou creer une page totalement vierge puis creer la mise en forme de suaive choix.

1 Choisissez Fichier > Nouveau.
2 Dans la catégorie Page vierge de la boite de dialogue Nouveau document, selectionnez le type de page à creator dans la colonne Type de page. Par exemple,CHOISSEZ HTML pour creator une page HTML ordinaire, ColdFusion pour creator une page ColdFusion, et ainsi de suite.
3 Si vous voulez que la nouvelle page contienne une mise en forme CSS, Sélectionnéz une mise en forme CSS prédéfinie dans la colonne Mise en forme. Dans le cas contraire, cliquez sur Aucune. En fonction de votre sélection, un aperçu et la description de la mise en forme Sélectionnée s'affichent sur la droite de la boîte de dialogue.

Les mises en forme CSS prédéfinies fournissent les types de colonnes suivants :

Fixe La largeur de colonne est definié en pixels. La colonne n'est pas redimensionné selon la taille du navigateur ou des paramètres de texte du visiteur du site.

Liquide La largeur de colonne est definié en tant que pourcentage de la largeur du navigateur du visiteur du site. La mise en page s'adapte si le visiteur du site augmente ou diminue la largeur de son navigateur, mais pas en fonction des paramétres de texte défiinis par le visueur.

Dreamweaver propose également deux mises en forme CSS HTML5 : deux et trois colonnes fixes.

4 Sélectionnez un type de document dans le menu DocType. Dans la plupart des cas, vous pouvez conserver l'option par défaut, XHTML 1.0 transitionnel.

Selectionnez l'une des définitions de type de document (DTD) XHTML pour rendre la page compatible XHTML. Par exemple, vous pouvezAMDre un document HTML compatible XHTML en selectionnant XHTML 1.0 transitionnel ou XHTML 1.0Strict dans le menu derouulant. Le langage XHTML (Extensible Hypertext Markup Language) n'est autre qu'une nouvelle mouture de HTML sous la forme d'une application XML. En regle generale, l'utilisation de XHTML vous permet d'exploiter les avantages de XML tout en garantissant la compatibilité descendante et ascendante de vos documents Web.

Note: Pour plus d'informations sur XHTML, consultez le site Web du World Wide Web Consortium (W3C), qui contient la Specification pour XHTML 1.1 - Module-Based XHTML (www.w3.org/TR/xhtml11/) et XHTML 1.0

(www.w3c.org/TR/xhtml1/), ainsi que les sites de validateur XHTML où vous trouvrez des fischiers Web (http://converter.w3.org/) et des fischiers locaux (http://converter.w3.org/file-upload.html).

Dreamweaver propose également HTML5 comme option doctype.

5 Si vous avez choisi une mise en forme CSS dans la colonne Mise en forme, choisissez l'emplacement du code CSS de mise en forme dans la liste déroulante CSS de mise en forme.

Ajouter à l'en-tête Ajoute le code CSS de mise en forme à l'en-tête de la page que vous créez.

Créer un nouveau fichier Ajoute le code CSS de mise en forme à un nouveau fichier CSS externe et associe la nouvelle feuille de style à la page que vous créez.

Lier au fjichier existant Permet d'indiquer un fjichier CSS existant qui contient déjà les règles CSS requises pour la mise en forme. Pour ce faire, cliquez sur l'icone Ajouter une feuille de style au-dessus du volet Lier le fjichier CSS, puis sélectionné une feuille de style CSS existante. Cette option est particulièrement utile si vous voulez utiliser la même mise en forme CSS (les règles CSS figurant dans un fjichier) dans plusieurs documents.

6 (Facultatif) Vous pouvez égalementlier des feuilles de style CSS à la nouvelle page (sans rapport avec la mise en forme CSS) lors de la création de cette page. Pour ce faire, cliquez sur l'icone Ajouter une feuille de style au-dessus du volet Lier le fichier CSS, puis selectionnez une feuille de style CSS.
Voutrouvez une description détaillée de ce processus dans l'article de David Powers « Automatically attaching a style sheet to new documents » (en anglais).
7 Choisissez Activer InContext Editing si vous voulez创建工作 une page qui devendra compatible avec InContext Editing des que vous l'enregistrez.

Une page compatible InContext Editing doit composer au moins une balise div pouvant être spécifiée en tant que région modifiable. Par exemple, si vous avez selectionné le type de page HTML, vous devez désirir l'une des mises en forme CSS pour votre nouvelle page. Ces mises en forme contiennent en effet des balises div prédéfiniées. La région modifiable InContext Editing est automatiquement placée dans la balise div avec l'ID content. Si vous le souhaitez, vous pourrait ajouter par la suite d'autres régions modifiables à la page.

8 Cliquez sur le bouton Preférences pour définir les préférences par défaut du document (par exemple, le type de document, l'encodage et une extension de:ficher).
9 Cliquez sur le lien Obtir plus de contenu pour lancer Dreamweaver Exchange et télécharger d'autres contenus de conception de pages.

10 Cliquez sur le bouton Creer.
11 Enregistrez la page (Fichier > Enregistrer).
12 Dans la boite de dialogue qui s'affiche, recherche le dossier où vous pouze enregistrer le fichier.

Il est conseilé d'enregistrer votre fichier dans un site Dreamweaver.

13 Dans la zone de texte Nom de fichier, entrez le nom du:fichier.

Evitez les espaces et les caractères spéciaux pour les noms de fichiers et de dossiers ; les noms de fichiers ne doivent pas commencer par un chiffre. En particulier, n'utilise pas de caractères spéciaux (par exemple é, c 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.

More Help topics

"Mise en forme des pages avec CSS" on page 162

"Définition du type et du codage par défaut d'un document" on page 73

Creation d'un modele vierge

La boite de dialogue Nouveau document permet de creer des modles Dreamweaver. Par defaut, les modles sont enregistrres dans le dossier Templates de votre site.

1 Choisissez Fichier > Nouveau.
2 Dans la boîte de dialogue Nouveau document, Sélectionnez la catégorie Modèle vierge.
3 Sélectionnez le type de modulo à créé dans la colonne Type de modulo. Par exemple, choisissez Modèle HTML pour créé un modulo HTML ordinaire, Modèle ColdFusion pour créé un modulo ColdFusion, et ainsi de suite.
4 Si vous voulez que la nouvelle page contienne une mise en forme CSS, sélectionnez une mise en forme CSS prédéfinie dans la colonne Mise en forme. Dans le cas contraire, cliquez sur Aucune. En fonction de votre sélection, un aperçu et la description de la mise en forme sélectionnée s'affichent sur la droite de la boîte de dialogue.

Les mises en forme CSS prédéfinitiones fournissent les types de colonnes suivants :

Fixe La largeur de colonne est definié en pixels. La colonne n'est pas redimensionné selon la taille du navigateur ou des paramètres de texte du visiteur du site.

Liquide La largeur de colonne est definié en tant que pourcentage de la largeur du navigateur du visiteur du site. La mise en page s'adapte si le visueur du site augmente ou diminue la largeur de son navigateur, mais pas en fonction des paramétres de texte définis par le visueur.

5 Sélectionnez un type de document dans le menu DocType. Dans la plupart des cas, vous pouvez conserver l'option par défaut, XHTML 1.0 transitionnel.

Selectionnez l'une des définitions de type de document (DTD) XHTML pour rendre la page compatible XHTML. Par exemple, vous pouvezAMDre un document HTML compatible XHTML en selectionnant XHTML 1.0 transitionnel ou XHTML 1.0Strict dans le menu déroulant. Le langage XHTML (Extensible Hypertext Markup Language) n'est autre qu'une nouvelle mouture de HTML sous la forme d'une application XML. En règle générale, l'utilisation de XHTML vous permet d'exploiter les avantages de XML tout en garantissant la compatibilité descendante et ascendante de vos documents Web.

Note: Pour plus d'informations sur XHTML, consultez le site Web du World Wide Web Consortium (W3C), qui contient la Specification pour XHTML 1.1 - Module-Based XHTML (www.w3.org/TR/xhtml11/) et XHTML 1.0 (www.w3c.org/TR/xhtml1/), ainsi que les sites de validateur XHTML où vous trouvrez des fichiers Web (http://converter.w3.org/) et des fichiers locaux (http://converter.w3.org/file-upload.html).

6 Si vous avez choisi une mise en forme CSS dans la colonne Mise en forme, choisissez l'emplacement du code CSS de mise en forme dans la liste déroulante CSS de mise en forme.

Ajouter à l'en-tête Ajoute le code CSS de mise en forme à l'en-tête de la page que vous créez.

Créer un nouveau fjichier Ajoute le code CSS de mise en forme à une nouvelle feuille de style CSS externe et associe la nouvelle feuille de style à la page que vous créez.

Lier au fjichier existant Permet d'indiquer un fjichier CSS existant qui contient déjà les règles CSS requises pour la mise en forme. Pour ce faire, cliquez sur l'icone Ajouter une feuille de style au-dessus du volet Lier le fjichier CSS, puis sélectionné une feuille de style CSS existante. Cette option est particulièrement utile si vous poulez utiliser la même mise en forme CSS (les règles CSS figurant dans un fjichier) dans plusieurs documents.

7 (Facultatif) Vous pouvez égalementlier des feuilles de style CSS à la nouvelle page (sans rapport avec la mise en forme CSS) lors de la création de cette page. Pour ce faire,clinque sur I'icone Ajouter une feuille de style au-dessus du volet Lier le fichier CSS, puis selectionnee une feuille de style CSS.
8 Choisissez Activer InContext Editing si vous poulez创建工作 une page qui deviendra compatible avec InContext Editing des que vous l'enregistrez.

Une page compatible InContext Editing doit composer au moins une balise div pouvant être spécifiée en tant que région modifiable. Par exemple, si vous avez sélectionné le type de page HTML, vous doivent désirier l'une des mises en forme CSS pour votre nouvelle page. Ces mises en forme contiennent en effet des balises div prédéfinitions. La région modifiable InContext Editing est automatiquement placée dans la balise div avec l'ID content. Si vous le souhaitez, vous pourrez ajouter par la suite d'autres régions modifiables à la page.

9 Cliquez sur le bouton Preférences pour définir les préférences par défaut du document (par exemple, le type de document, l'encodage et une extension de:ficher).
10 Cliquez sur le lien Obtenir plus de contenu pour lancer Dreamweaver Exchange et télécharger d'autres contenus de conception de pages.
11 Cliquez sur le bouton Creer.
12 Enregistrez la page (Fichier > Enregistrer). Si vous n'avez pas encore ajouté de régions modifiables au cadre, une boîte de dialogue vous en avertit. Cliquez sur OK pour fermer la boîte de dialogue.
13 Dans la boite de dialogue Enregistrer sous, selectionnez le site dans lequel le modele doit etre enregistré.
14 Dans la zone de texte Nom de:fichier, entrez le nom du nouveau modele. Il n'est pas nécessaire d'ajouter l'extension de:fichier au nom du modele. Lorsque vous cliquez sur Enregisterr, l'extension .dwt est ajoutee au nouveau modele, qui est enregistraredans le dossier Templates de voitre site.

Evitez les espaces et les caractères spéciaux pour les noms de fichiers et de dossiers ; les noms de fichiers ne doivent pas commencer par un chiffre. En particulier, n'utilise pas de caractères spéciaux (par exemple é, c 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.

More Help topics

"Mise en forme des pages avec CSS" on page 162

"Creation et gestion des modèles" on page 407

"Utilisation de sites Dreamweaver" on page 40

"Définition du type et du codage par défaut d'un document" on page 73

Creation d'une page basée sur un modele existant

Vous pouvez selectionner, prévisualiser et creer un nouveau document à partir d'un modele existant. La boite de dialogue Nouveau document vous permet de selectionner un modele parmi les sites définis dans Dreamweaver ou d'utiliser le panneau Actifs pour creer un nouveau document sur la base d'un modele existant.

More Help topics

"Creation et gestion des modèles" on page 407

"Utilisation de sites Dreamweaver" on page 40

"Définition du type et du codage par défaut d'un document" on page 73

Creation d'un document basé sur un modele

1 Choisissez Fichier > Nouveau.

2 Dans la boîte de dialogue Nouveau document, Sélectionnez la catégorie Page du modele.
3 Dans la colonne Site, selectionnez le site Dreamweaver contenant le modele a utiliser, puis selectionnez un modele dans la liste de droite.
4 Désactivez l'option Mettre la page à jour quand le modele est modifie si vous ne souhaitez pas que la page soit mise à jour lors de chaque modification apportee au modele sur lequel elle est basee.
5 Cliquez sur le bouton Preférences pour définir les préférences par défaut du document (par exemple, le type de document, l'encodage et une extension de:ficher).
6 Cliquez sur le lien Obtir plus de contenu pour lancer Dreamweaver Exchange et télécharger d'autres contenus de conception de pages.
7 Cliquez sur Creer puis enregistrez le document (Fichier > Enregistrer).

Création d'un document à partir d'un modèle à l'aide du panneau Actifs

1 Ouvrez le panneau Actifs (Fenêtre > Actifs) s'il n'est pas deja ouvert.
2 Dans le panneau Actifs, cliquez sur l'icone Modèle sittuee a gauche pour afficher la liste des modèleus utilisés dans voitre site actuel.

Si le modele que vous souhaitez utiliser vient d'être créé, il peut être nécessaire de cliquer sur le bouton Actualiser pour l'afficher.

3 Cliquez avec le bouton droit (Windows) ou en Maintenant la touche Ctrl enfoncée (Macintosh) sur le modele a appliquer, puis selectionnez Nouveau a partir d'un modele.
Le document s'ouvre dans la fenetre de document.
4 Enregistrez le document.

Création d'un document basé sur un fichier d'exemple Dreamweaver

Dreamweaver inclut plusieurs mises en formes de pages de cadres professionnelles, ainsi que des fichiers de conception CSS. Vous pouvez utiliser ces fichiers d'exemple comme point de départ pour la création de pages sur vos sites Web. Lorsque vous creez un document basé sur un fichier d'exemple, Dreamweaver create une copie du:fichier.

La boîte de dialogue Nouveau document permet de prévisualiser un fjichier d'exampie et de consulter une brève description des éléments de conception d'un document. Dans le cas de feuilles de style en cascade (CSS), vous pouvez copier une feuille prédéfinie pour l'appliquer à vos documents.

Note: Si vous créez un document basé sur un jeu de cadres prédéfini, seule la structure du jeu de cadres est copiee, sans le contenu des cadres. En outre, vous devez enregistrer séparément chacun des fichiers composant le cadre.

1 Choisissez Fichier > Nouveau.
2 Dans la boite de dialogue Nouveau document, Sélectionnez la catégorie Page de l'exemple.
3 Dans la colonne Dossier exemple,CHOISSEZ Feuille de style en cascade ou Jeu de cadres,puis selectionnez un fichier d'exemple dans la liste de droite.
4 Cliquez sur le bouton Creer.

Le nouveau document s'ouvre dans la fenêtre de document (modes Code et Création). Si vous avez sélectionné Feuille de style de cascade (CSS), la feuille de style CSS s'affiche en mode code.

5 Enregistrez le document (Fichier > Enregistrer).
6 Si la boite 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é.

Vou puez choisir l'emplacement des fichiers dependants ou enregister les fichiers dans le dossier par defaut create par Dreamweaver (ce dossier est cree en fonction du nom source du dossier d'exemple).

More Help topics

"Description des feuilles de style en cascade" on page 132

"Enregistrement des fichiers du cadre et du jeu de cadres" on page 212

Création d'autres types de pages

La catégorie Autre de la boite de dialogue Nouveau document permet de creator divers types de page qui peuvent etre utiles dans Dreamweaver, comme des pages C#, VBScript et en texte seul.

1 Choisissez Fichier > Nouveau.
2 Dans la boîte de dialogue Nouveau document, Sélectionnez la catégorie Autre.
3 Selectionnez le type de document a creer dans la colonne Type de page, puis cliquez sur le bouton Creer.
4 Enregistrez le document (Fichier > Enregistrer).

Enregistrement et rétablissement de documents

Vou puez 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'utilise pas de caractères spéciaux (par exemple é, c 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.

More Help topics

"Creation d'une page vierge" on page 67

Enregistrement d'un document

1 Effectuez l'une des opérations suivantes :
- Pour écraser la version presente sur le disque et enregistrer toute modification effectue, Sélectionnez Fichier > Enregistrer.
- Pour enregistrer le fjchier dans un dossier different ou sous un autre nom, selectionnez Fichier > Enregistrer sous.
2 Dans la boite de dialogue Enregistrer sous qui s'affiche, recherche le dossier dans lequel vous pouze enregistrer le fichier.
3 Dans la zone de texte Nom de fichier, entrez le nom du fichier.
4 Cliques sur Enregistrer pour enregistrer le fichier.

Enregistrement de tous les documents ouverts

1 Choisissez Fichier > Enregister tout.
2 Si des documents non enregistrres sont ouverts, la boite de dialogue Enregistrer sous s'affiche pour chacun d'entre eux.

Dans la boite de dialogue qui s'affiche, recherche le dossier où vous pouze enregistrer le fjichier.

3 Dans la zone de texte Nom de filchier, entrez le nom du filchier puis cliquez sur Enregister.

Rétablissement de la dernière version enregistrée d'un document

1 Sélectionnez Fichier > Rétabir.
Une boîte de dialogue vous invite à confirmer l'annulation de vos modifications et le retour à la version précédément enregistrée.
2 Cliques sur Oui pour revenir à la version précédente ou sur Non pour appliquer les modifications.

Note: Si vous enregistrez un document, puis que vous quittez Dreamweaver, il ne sera pas possible de revenir à la version précédente lors de la prochaine utilisation de Dreamweaver.

Définition du type et du codage par défaut d'un document

Vou puez defineir le type de document par défaut utilise pour un site.

Par exemple, si la plupart des pages de votre site sont de type spécifique (tel que les documents ColdFusion, HTML ou ASP), vous pouze définir des préférences de document pour créé automatiquement les nouveaux documents de ce type.

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

Vous pouze également cliquer sur le bouton Préférences dans la boite de dialogue Nouveau document pour définir les nouvelles préférences liées au document en cours de création.

2 Cliquez sur la catégorie Nouveau document dans la liste de gauche.
3 Définissez ou modifiez les préférences selon vos besoins, puis cliquez sur OK pour les enregistrer.

Document par défaut Sélectionné le type de document qui sera employé pour les pages que vous créez.

Extension par défaut Indiquez l'extension de fichier que vous préférez (.htm ou .html) pour les nouvelles pages HTML que vous créées.

Note: Cette option est désactivée pour d'autres types de fichier.

Type de document par défaut (DDT) Sélectionné l'une des définitions de type de document (DTD) XHTML qui permettent de prendre les pages compatibles XHTML. Par exemple, vous pouvez rendre un document XHTML compatible XHTML en sélectionnant XHTML 1.0 transitionnel ou XHTML 1.0 Strict dans le menu dérouulant.

Codage par défaut Spécífie le codage à utiliser lorsque vous créez une page ou que vous ouvrez un document ne spécifierant aucun codage.

Si vous sélectionnez Unicode (UTF 8) en tant que codage de document, le codage d'entity est superflu dans la mesure où UTF 8 permet de représenter de façon fiable tous les caractères. Si vous selectionnez un autre codage de document, le codage d'entity peut être nécessaire pour représentier certains caractères. Pour plus d'informations sur les entités de caractères, voir www.w3.org/TR/REC-html40/sgml/entities.html.

Si vous scélectionnez Unicode (UTF8) en tant que code par défaut, vous pouvez inclure une marque BOM (Byte Order Mark) dans le document en scélectionnant l'option Inclure une signature Unicode (BOM).

Il s'agit d'une marque constituée de 2 à 4 octets placés au début d'un fjichier texte identifient un fjichier comme étant au format Unicode et, dans ce cas, l'ordre des octets suivants. Le code UTF 8 ne présente pas d'ordre octet, l'ajout d'une marque BOM UTF 8 est facultatif. Dans le cas de UTF 16 et UTF 32, cette marque est obligatoire.

Formulaire de normalisation Unicode Activez l'une de ces options si vous selectionnez Unicode (UTF 8) en tant que code par défaut.

Il existe quatre Formulaires de normalisation Unicode. Le plus important est le Formulaire de normalisation Unicode C, car il est le plus utilisé dans le Modèle de caractères lié au World Wide Web, mais Adobe fournit également les trois autres Formulaires de normalization Unicode.

Afficher la boîte de dialogue Nouveau document si Ctrl+N Désactivez cette option (baptisée « Commande+N » sur Macintosh) pour appliquer automatiquement le type par défaut au nouveau document créé lorsque vous utilisez la touche de commande.

Certains caractères Unicode semble visuellement similaires mais peuvent être stockés de différentes manières dans le document. Par exemple, é (e tréma) peut être représenté sous la forme d'un seul caractère, « e tréma » ou de deux caractères, « e Latin ordinaire » + « tréma ». Un caractère Unicode de combinaison est un caractère associé au caractère précédent, ce qui fait apparaitre le tréma au-dessus du « e » Latin. Les deux formes donnent la même typographie visuelle, alors que chacune est enregistrée différemment dans le fichier.

La normalisation est le processus consistant à s'assurer que tous les caractères pouvant être enregistrés sous différentes formes le sont tous sous la même forme. C'est-à-dire que tous les caractères « é » d'un document sont enregistrés sous forme de « e tréma » unique ou de « e + tréma de combinaison», mais pas sous les deux formes dans un même document.

Pour plus d'informations sur la Normalisation Unicode et les formulaires spécifiques pouvant etre utilisés, consultez le site Web Unicode www.unicode.org/reports/tr15.

More Help topics

Conversion de HTML5 vers un ancien doit

L'emploi de Fichier > Convertir pour passer de HTML5 vers un ancien DOCTYPE ne supprime pas les éléments et attributs HTML5. Seul le DOCTYPE change et des barres obliques (pour XHTML) sont insérées à la fin.

Les balises sémentiques telles que

et

, ainsi que les attributs tels que required, placeholder et type="number", ne sont pas affectés.

Définition de l'extension de fichier par défaut de nouveaux documents HTML

Vou puez definir l'extension de fichier par defaut de documents HTML crees dans Dreamweaver. Par exemple, you pouze utiliser une extension .htm ou .html pour tous les nouveaux documents HTML.

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

Voupez eajment cliquer sur le bouton Prefences dans la boite de dialogue Nouveau document pour definir les nouvelles prefrences liées au document en cours de creation.

2 Cliquez sur la catégorie Nouveau document dans la liste de gauche.
3 Assurez-vous que HTML est bien selectionné dans le menu Document par défaut.
4 Dans la zone de texte Extension par défaut, spécifiez l'extension de filchier que vous souhaitez utiliser pour les nouveaux documents HTML créés dans Dreamweaver.

Sous Windows, you pouze spécifier les extensions suivantes : .html, .htm, .shtml, .shtm, .stm, .tpl, .lasso, .xhtml.

Sous Macintosh, you pouez spécifier les extensions suivantes : .html, .htm, .shtml, .shtmt, .tpl, .lasso, .xhtml, .ssi.

Ouverture et modification de documents existants

Vou puez ouvrir une page Web existante ou un document texte, même si celui-ci n'a pas ete creé avec Dreamweaver, et le modifier en mode Code ou en mode Creation.

Si le document que vous ouvrez est un fisier Microsoft Word enregistré au format HTML, il est conseilé d'utiliser la commande Nettoyage du HTML Word pour supprimer les balises superfles ajoutées par Word au fisier HTML.

Pour nettoyer un fjichier HTML ou XHTML non génére par Microsoft Word, utilisez la commande Nettoyage du HTML.

Vou puez également ouvr des fichiers texte non HTML, comme des fichiers JavaScript, XML, feuilles de style en cascade (CSS) ou des fichiers texte enregistrés dans des traitements de texte ou des éditeurs de texte.

1 Choisissez Fichier > Ouvrir.

Vous pouvez également utiliser le panneau Fichiers pour ouvrir les fichiers.

2 Recherchez et selectionnee le fichier a ouvrir.

Note: Si cette opération n'a pas encore ete effectuée, il est conseilé d'organiser les fichiers que vous comptez ouvrir et modifier au sein d'un site Dreamweaver, au lieu de les ouvrir depuis un autre emplacement.

3 Cliquez sur Ouvrir.

Le document s'ouvre dans la fenêtre de document. Par défaut, JavaScript, le texte et les feuilles de style en cascade (CSS) s'ouvrent en mode Code. Vous pouvez partager à jour le documentpendant que vous travailliez dans Dreamweaver, puis enregistrer les modifications dans le fjichier.

More Help topics

"Nettoyage du code" on page 341

"Lancement d'un主编 extrer pour des fichiers multimédias" on page 273

"Utilisation des fichiers depuis le panneau Fichiers" on page 83

Ouverture des fichiers associés

Dreamweaver permit de visualiser les fischiers associés à votre document principal, tout en restant focalisé sur ce dernier. Par exemple, si des fischiers CSS et JavaScript sont joints à un document principal, Dreamweaver permet d'afficher et de modifier ces fischiers associés dans la fenêtre de document tout en laissant le document principal visible.

Note: Les fichiers à association dynamique ( comme les fichiers PHP de systèmes de gestion du contenu) sont abordés dans la prochaine section d'aide.

Par défaut, Dreamweaver affiche le nom de tous les fichiers associés au document principal dans une barre d'outils Fichiers associés, sous le titre du document principal. L'ordre des boutons de cette barre d'outils suit l'ordre des liens vers les fichiers associés dans le document principal.

Note: Si un fichier associé est manquant, Dreamweaver affiche quand même le bouton correspondant dans la barre d'outils Fichiers associés. Toutefois, si vous cliquez sur ce bouton, Dreamweaver n'affiche rien.

Dreamweaver prendenchargelestypesdefichiersassociéssuivants:

Fichiers de script cote client
Inclusions cote serveur
- Sources d'ensembles de données Spry (XML et HTML)
- Feuilles de style CSS externes (dont les feuilles de style imbriquées)

Voutrouvez un didactiel video sur l'utilisation des fichiers associés, réalisé par l'équipe de Dreamweaver, à l'adresse www.adobe.com/go/dw10relatedfiles_fr.

Voutrouvrez un didacticiel video relatif à l'utilisation du mode Affichage en direct, aux fichiers associés et à la fenêtre Navigation dans le code à l'adresse www.adobe.com/go/lrvid4044_dw_fr.

Ouverture d'un fichier associé à partir de la barre d'outils Fichiers associés

Effectuez l'une des opérations suivantes :

• Dans la barre d'outils Fichiers associés en haut du document, cliquez sur le nom du fichier associé à ouvrir.
• Dans la barre d'outils Fichiers associés en haut du document, cliquez à l'aide du bouton droit de la souris sur le nom du fichier associé à ouvrir, puis choisissez Ouvrir en tant que fichier séparé dans le menu. Lorsque vous utilisez cette méthode pour ouvrir un fichier associé, le document principal ne reste pas visible simultanément.

Ouverture d'un fichier associé à partir de la fenêtre Navigation dans le code

1 Placez le point d'insertion sur une ligne ou dans une zone dont vous savez qu'elle est influencée par un fjichier associé.
2 Attendez que l'indicateur Navigation dans le code s'affiche, puis cliquez dessus pour ouvrir la fenetre Navigation dans le code.
3 Vous pouvez survolver les éléments de la fenêtre Navigation dans le code afin d'afficher davantage d'informations à leur sujet. Par exemple, si vous voulez modifier une propriété de couleur CSS précise mais que vous ignorez dans qu'elle règle elle se trouve, vous pouvez tracer cette règle en survolant les règles disponible dans la fenêtre Navigation dans le code.
4 Cliquez sur l'objet qui vous interesse afin d'ouvrir le fichier associé correspondant.

Retour au code source du document principal

Cliquez sur le bouton Code source de la barre d'outils Fichiers apparentés.

Modification de l'affichage de fichiers associés

Yououpouvezafficherlesfichiersassociésdediversedmanieres：

Lorsque you ouvre un fichier associé depuis le mode Creation ou le mode Code et Creation (mode Fractionné), ce fichier s'affiche dans une fenêtre fractionnée au-dessus du mode Creation du document principal.

Vou puez choisir Affichage > Mode Creation en haut pour que le fichier associé s'affiche plutot dans le bas de la fenetre de document.

• Lorsque vous ouvrez un fjichier associé depuis le mode Code et Creation fractionné verticalément (Affichage > Fractionner verticalément), ce fjichier s'affiche dans une fenêtre fractionnée à côté du mode Creation du document principal.

Selon l'endetroit où vous poulez placer le mode Création, vous pouvez activer ou désactiver l'options Affichage > Mode Création à gauche.

• Lorsque vous ouvrez un fjichier associé depuis le mode Code et Création fractionné ou fractionné verticalément (Affichage > Mode Fractionné ou Affichage > Fractionner verticalément), le fjichier associé s'affiche dans une fenêtre fractionnée en dessous, au-dessus ou à côté du code source du document principal, en fonction des options que vous avez sélectionnées.

Le « mode Code » dans l'option d'affichage fait reférence au code source du document principal. Par exemple, si vous choisissez Affichage > Mode Code en haut, Dreamweaver affiche le code source du document principal dans la moitié supérieure de la fenêtre de document. Par exemple, si vous choisissez Affichage > Mode Code à gauche, Dreamweaver affiche le code source du document principal sur le côte gauche de la fenêtre de document.

• Le mode Code standard ne permet pas d'afficher les documents apparentés en même temps que le code source du document principal.

Déactualisation des fichiers associés

1 Choisissez Edition > Preférences (Windows) ou Dreamweaver > Préférences (Macintosh).
2 Dans la catégorie Général, désactiver Activer les fichiers associés.

More Help topics

"Basculement d'un mode à un autre dans la fenêtre de document" on page 19

"Navigation vers le code associe" on page 332

"Prévisualisation de pages dans Dreamweaver" on page 304

Didactiel relatif aux fichiers associés

Ouverture de fichiers à association dynamique

La fonction Fichiers à association dynamique accroit les possibilités de la fonction Fichiers associés, en vous permettant de voir les fichiers associés aux pages dynamiques dans la barre d'outils Fichiers associés. Plus précisé, la fonction Fichiers à association dynamique permet de voir les nombreuses inclusions dynamiques requises pour générer le code d'exécution des cadres CMS (système de gestion du contenu) PHP ouverts les plus populaires, tels que WordPress, Drupal et Joomla!

Pour pouvoir utiliser la fonction Fichiers à association dynamique, vous doivent avoir accès à un serveur d'applications PHP local ou distant qui exécute WordPress, Drupal ou Joomla! Une approche courante du test de pages consiste à configurer un serveur d'applications PHP sur localhost puis à tester les pages localement.

Avant de tester les pages, vous doivent effectuer les opérations suivantes :

• Créez un site Dreamweaver et assurez-vous que vous avez bien complété la zone de texte URL Web de la boîte de dialogue Configuration du site.
• Configurez un serveur d'applications PHP.

Important: Le serveur doit être en cours d'exécution avant que vous ne tentiez d'utiliser des fichiers à association dynamique dans Dreamweaver.

• Installez WordPress, Drupal ou Joomla! sur le serveur d'applications. Pour plus de détails, voir:

Installation de WordPress
Installation de Drupal
Installation de Joomla

• Dans Dreamweaver, définissez un fichier local où vous allez télécharger et modifier vos fichiers de CMS.
• Définissez l'emplacement des fichiers de WordPress, Drupal ou Joomla! installés comme dossier distant et de test.
• Téléchargez (obtenez) vos fichiers de CMS depuis le dossier distant.

More Help topics

www.adobe.com/go/dwc5drf_en

Définition des préférences relatives aux fichiers à association dynamique

Lorsque vous ouvrez une page liée à des fischiers à association dynamique, Dreamweaver peut rechercher les fischiers automatiquement ou vous permettre de les recherche manuelle (enclistant sur un lien dans la barre Informations, dans le haut de la page). Par défaut, la recherche se fait manuelle.

1 Choisissez Edition > Preférences (Windows) ou Dreamweaver > Préférences (Mac OS).
2 Dans la catégorie Général, assurez-vous que l'option Activer les fichiers associés est bien activée.
3 Sélectionnez Manuellement ou Automatiquement dans le menu Fichiers à association dynamique. Vous pouvez également désactiver complètement la recherche enCHOISANT l'option Désactivé.

Découvir les fichiers à association dynamique

1 Ouvrez ne page à laquelle des fichiers à association dynamique sont liés, par exemple la page index.php à la racine d'un site WordPress, Drupal ou Joomla!
2 Si la recherche de fichiers à association dynamique se fait manuellement (option par défaut), cliquez sur le lien Découvrir dans la barre Informations, dans le haut de la fenêtre Document.

Si la recherche de fichiers à association dynamique se fait automatiquement, la liste des fichiers à association dynamique s'affiche dans la barre d'outils Fichiers associés.

L'ordre des fichiers associés et à association dynamiques dans la barre d'outils Fichiers associés est le suivant :

• Fichiers associés statiques (c.-à-d. fichiers n'exigeantaucuntraitement dynamique)
• Fichiers associés externes (c.-à-d. fichiers .css et .js) qui sont liés à des fichiers d'inclusion de serveur à chemin dynamique
• Fichiers d'inclusion de serveur à chemin dynamique (c.-à-d. fichiers.php, .inc et .module)

Filtrage des fichiers associés

Comme les fichiers associés et les fichiers à association dynamique peuvent être nombreux, Dreamweaver permet de filtrer les fichiers associés, de façon à couver précisément les fichiers avec lesquels vous pouze travailler.

1 Ouvrez une page à laquelle des fichiers associés sont liés.
2 Si nécessaire, recherche les fichiers à association dynamique.
3 Cliquez sur I'icone Filtrer les fichiers associés sur la droite de la barre d'outils Fichiers associés.
4 Sélectionnez les types de fichiers à afficher dans la barre d'outils Fichiers associés. Par défaut, Dreamweaver seLECTIONné tous les fichiers associés.
5 Pour creer un filtre personalise, cliquez sur l'icone Filtrer les fichiers associés, puis choisissez Filtre personalise. La boite de dialogue Filtre personalise ne permet de filtre que les noms de fichiers précis (style.css), les extensions de fichiers (.php) et les expressions a caractere generique utilisant des astérisques (menu). Vous pouze filtre selon des expressions a caractères génériques multiples en séparant les différentes expressions à l'aide de points-virgules (par exemple style.css;.js;tpl.php).

Note: Les paramètres de filtrtre ne sont pas conservés lorsqu'vous fermez le fichier.

Nettoyage de fichiers HTML créé avec Microsoft Word

Vou puez ouvr des documents enregistrés par Microsoft Word en tant que fischiers 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 fischiers HTML par Word 97 ou une version ultérieure.

Le code que Dreamweaver supprime est principalement utilisé par Word pourmettre en forme et afficher les documents dansWord même,et n'est pas nécessaire dans un veritable fichier HTML.Conservez une copie de voirefichierWord original(.doc) comme sécurité,car il se peut que vous ne puissiez plus ouvrir ce document HTML dansWord après avoir appliqué la fonction Nettoyer HTML Word.

Pour nettoyer un fjichier HTML ou XHTML non génére par Microsoft Word, utilisez la commande Nettoyage du HTML.

1 Enregistrez votre document Microsoft Word au format HTML.

Note: Sous Windows, fermez le fichier dans Word pour éviter une violation de partage.

2 Ouvrez le fichier HTML dans Dreamweaver.

Pour afficher le code HTML génére par Word, activez le mode Code (Affichage > Code).

3 Sélectionnez Commandes > Nettoyer HTML Word.

Note: Si Dreamweaver ne parvient pas à déterminer la version de Word qui a été utilisé pour enregistrer ce fichier,CHOISSEZ LA VERSION CORRECTE DANS LE MENU DÉROUTANT.

4 Activez (ou désactivez) les options de nettoyage. Les préférences que vous entrez sont sauvégardées comme paramètres de nettoyage par défaut.

Dreamweaver applique les paramètres de nettoyage au document HTML et un journal contenant une liste des modifications apportées s'affiche (sauf si cette option a été déslectionnée dans la boîte de dialogue).

Supprimer les marqueurs spécifiques à Word Supprime tout le code HTML spécifique à Word, y compris le code XML des balisesHTML, les métadonnées personnalisées Word et les balises de liens figurant dans l'en-tête du document, les balises XML Word, les balises conditionnelles et leur contenu, ainsi que les paragraphs vides et les marges des styles. Vous pouze selectionner chacune de ces options individuellement à partir de l'onglet Détailleé.

Nettoyer CSS Supprime de l'en-tête toutes les feuilles de style spécifique à Word, y compris les styles CSS incorporeés si possible (lorsque le style parent possède les mêmes propriétés), les attributs de style commençant par « mso », les déclarations de styles non CSS, les attributs de style CSS des tableaux et toutes les définitions de style non utilisées. Vous pouvez personneliser cette option encore davantage à partir de l'onglet Détaille.

Nettoyer les balises Supprime les balises HTML, en convertissant le corps du texte par défaut en HTML de taillie 2.

Corriger les imbrications de balises non valides Supprime les balises de definition des polices de caractères insérées par Word en dehors des balises de paragraphe et d'en-tête (au niveau du bloc).

Applique le format source Permet d'applieur au document les options de formatting que vous avez indiquees dans les préférences de format HTML et dans le fichier SourceFormat.txt.

Afficher le journal à la fin Affiche un message d'advertisement détaillant les modifications apportées au document dés que le nettoyage est terminé.

5 Cliquez sur OK ou sur l'onglet Detaillé pour personneliser davantage les options Supprimer les marqueurs spécifique à Word et Nettoyer CSS, puis cliquez sur OK.

More Help topics

"Nettoyage du code" on page 341

"Importation de documents Microsoft Office (Windows uniquement)" on page 243

Gestion des fichiers et des dossiers

A propos de la gestion des fichiers et des dossiers

Dreamweaver possède un panneau Fichiers qui permet de gérer et de transférer des fichiers vers un serveur distant et à partir de celui-ci. Lorsque vous transférez des fichiers entre le site local et le site distant, les structures de fichiers et de dossiers parallètes sur les deux sites sont réservées. Lors du transfert de fichiers entre les sites, Dreamweaver créé les dossiers nécessaires s'ils n'existant pas encore sur l'un des sites. Vous pouvez également synchroniser les fichiers entre le site local et le site distant. Dans ce cas, Dreamweaver copie les fichiers requis dans les deux sens et supprime, le cas échéant, les fichiers inutiles.

Utilisation du panneau Fichiers

Le panneau Fichiers vous permet d'afficher des fischiers et des dossiers (qu'ils soient ou non associés à un site Dreamweaver) et d'effectuer des opérations courantes de maintenance, comme l'ouverture et le déplacement de fischiers.

Note: Dans les versions précédentes de Dreamweaver, le panneau Fichiers s'applait le panneau Site.

Vou puez déplacer le panneau Fichiers selon vos besoin et définir ses préférences.

Utilisez ce panneau pour effectuer les tâches suivantes :

• Accès aux sites, à un serveur et aux disques locaux
• Affichage de fichiers et de dossiers
• Gestion de fichiers et de dossiers dans le panneau Fichiers

Pour les sites Dreamweaver, utilisez les options suivantes pour afficher ou transférer des fichiers :

Options du panneau Fichiers en mode développé.

A. Menu du site B. Connecter ou Déconnecter C. Actualier D. Afficher le journal FTP du site E. Vue Fichiers du site F. Serveur d'évaluation

G. Mode Reteentiel H. Acquerir le(s) fichier(s) I. Placer le(s) fichier(s) J. Extraire le(s) fichier(s) K. Archiver L. Synchroniser

M. Développer/Réduire

Note: Les boutons Fichiers du site, Serveur d'évaluation et Synchroniser ne sont visibles que dans le panneau Fichiers en mode développé.

Menu contextual Site Permet de sélectionner un site Dreamweaver et d'afficher ses fischiers. Vous pouvez également utiliser le menu Site pour acceder à tous les fischiers situés sur votre disque local, tout comme l'Explorateur Windows (Windows) ou le Finder (Macintosh).

Connector ou Déconnecter (Protocoles FTP, RDS et WebDAV) Se connecte au site distant ou s'en déconnecte. Par défaut, Dreamweaver se déconnecte du site distant après 30 minutes d'inactivité (FTP uniquement). Pour modifier cette durée,CHOISSEZ Edition > Prefenciences (Windows) ou Dreamweaver > Prefenciences (Macintosh), puis selectionnez la catégorie Site dans la liste de gauche.

Actualiser Met à jour les répertoires du site local et du site distant. Utilise ce bouton pour déclencher manuellement une mise à jour des répertoires si vous avez désactivé les options Actualiser automatiquement la liste des fischiers locaux ou Actualiser automatiquement la liste des fischiers distants dans la boîte de dialogue Définition du site.

Vue Fichiers du site Affiche la structure des fischiers prsentes sur le site local et le site distant dans les volets du panneau Fichiers. Le site apparaisant dans le volet gauche et droit depend d'un parametre de préfERENCE. La vue Fichiers du site correspond au mode d'affichage par défaut du panneau Fichiers.

Vue Serveur d'évaluation Affiche la structure des répertoires du serveur d'évaluation et du site local.

Mode Rérérentiel Affiche le référentiel Subversion (SVN).

Acquier le(s) fichier(s) Copie les fichiers selectionnés depuis le site distant vers le site local (en écrasant, le cas échéant, les copies locales existantes des fichiers). Si l'option Activer l'archivage et l'extraction de fichier est activée, les copies locales sont en lecture seule; ces fichiers restent accessibles, sur le site distant, à d'autres membres de l'équipe qui peuvent les extraire. Si l'option Activer l'archivage et l'extraction de fichier est désactivée, les copies du fichier seront accessibles en lecture et écriture.

Note: Les fichiers que Dreamweaver copie sur le site distant ou le serveur d'évaluation sont ceux sélectionnés dans le volet actif du panneau Fichiers. Si le volet actif est Site distant, ce sont les fichiers sélectionnés sur le serveur distant ou le serveur d'évaluation qui sont copiés; si le volet actif est Fichiers locaux, Dreamweaver copie la version présente sur le serveur distant ou le serveur d'évaluation des fichiers sélectionnés sur le site local.

Placer le(s) fichier(s) Copie les fichiers selectionnés depuis le site local vers le site distant.

Note: Les fichiers que Dreamweaver copie sur le site distant ou le serveur d'évaluation sont ceux sélectionnés dans le volet actif du panneau Fichiers. Si le volet actif est Fichiers locaux, ce sont les fichiers sélectionnés sur le site local qui sont copés vers le site distant ou le serveur d'évaluation; si le volet actif est Site distant, Dreamweaver copie la version présente sur le site local des fichiers sélectionnés sur le site distant.

Si vous placez un fjichier qui n'existe pas encore sur le site distant et que l'option Activer l'archivage et l'extraction de fjichier est activée, le fjichier est ajouté au site distant et recoit l'etat « extrait ». Si vous ne pouze pas que le fjichier ajouté soit doté de cet état, cliquez sur le bouton Archiver.

Extraire le(s) fichier(s) Transfere une copie du fichier du serveur distant vers le site local (en écrasant la copie locale de ce fichier, le cas échéant) et donne au fichier l'état extrait sur le serveur. Ce bouton n'est pas disponible si l'option Activer l'archivage et l'extraction de fichier est désactivée pour le site en cours dans la boîte de dialogue Définition du site.

Archiver Transfère une copie du fichier local vers le serveur distant, de manière à ce qu'il puisse être modifié par d'autres membres de l'équipe. Le fichier local passe alors en lecture seule. Cette option n'est pas disponible si l'option Activer l'archivage et l'extraction de fichier est désactivée pour le site sélectionné dans la boîte de dialogue Définition du site.

Synchroniser Synchronise les fichiers entre les dossiers locaux et distants.

Le bouton Développier/Réduire développement ou réduit le panneau Fichiers afin d'afficher un ou deux volets.

More Help topics

"Présentation du panneau Fichiers" on page 17

"Utilisation de sites Dreamweaver" on page 40

"Archiver et extraire des fichiers dans un dossier distant" on page 95

"Placement de fichiers sur un serveur distant" on page 91

"Acquisition de fichiers depuis un serveur distant" on page 90

"Synchronisation de fichiers" on page 103

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 personneliser le panneau Fichiers en modifiant la vue (site local ou distant) qui s'affiche par défaut dans le panneau réduit. Vous pouvez également basculer l'affichage du contenu dans le panneau Fichiers développé, en utilisant l'option Toujours afficher.

Ouverture ou fermetre du panneau Fichiers

Choisissez Fenetre > Fichiers.

Développement ou réduction du panneau Fichiers (sites Dreamweaver uniquement)

Dans le panneau Fichiers (Fenêtre > Fichiers), cliquez sur le bouton Developper/Réduire de la barre d'outils.

Note: Si vous cliquez sur le bouton Développper/Réduire pour développer le panneau alors qu'il est ancre, 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éveloppper/Réduire afin de réduire le panneau. Si vous cliquez sur le bouton Développper/Réduire pour développer le panneau alors qu'il n'est pas ancre, vous pouvez poursuivre votre travail dans la fenêtre de document. Avant de pouvoir ancreer de nouveau le panneau, vous devez le réduire.

Dans sa forme réduite, le panneau Fichiers affiche le contenu du site local, du site distant ou du serveur d'évaluation sous la forme d'une liste de fichiers. Sous sa forme développée, le panneau affiche le site local et soit le site distant, soit le serveur d'évaluation.

Modification de la taille de la zone d'affichage dans le panneau Fichiers développé

Effectuez l'une des opérations suivantes lorsque le panneau Fichiers (Fenetre > 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éfilier le con des volets.

Modification de l'affichage du site dans le panneau Fichiers (sites Dreamweaver uniquement)

Effectuez l'une des opérations suivantes :
- Dans le panneau Fichiers (Fenêtre > Fichiers) affché sous sa forme réduite, sélectionnez Affichage local, Affichage distant, Serveur d'évaluation ou Affichage de la carte dans le menu (ou la vue actuelle s'affiche).

Note: L'option Affichage local apparait par défaut dans le menu Vue du site.

• Dans le panneau Fichiers (Fenêtre > Fichiers) affché sous sa forme développementée, cliquez sur le bouton Fichiers du site (pour le site distant), le bouton Serveur d'évaluation ou le bouton Fichiers du référentiel.

A. Fichiers du site B. Serveur d'évaluation C. Fichiers du référentiel

Note: Pour pouvoir afficher un site distant un serveur d'évaluation ou un référentiel, vous doivent configurer un site distant, un serveur d'évaluation ou un référentiel SVN.

Affichage de fichiers en dehors d'un site Dreamweaver

Le menu Site permet de naviguer sur votre ordinateur comme vous le feriez à l'aide de l'Explorateur Windows ou du Finder (Macintosh).

Utilisation des fichiers depuis le panneau Fichiers

Vou puez ouvrir ou renomer les fichiers ; ajouter, deplacer ou supprimer des fichiers ; ou encore actualiser le panneau Fichiers après avoir modifie les fichiers.

Pour les sites Dreamweaver, vous pouvez également identifier les fichiers (sur le site local ou distant) mis à jour depuis leur dernier transfert.

More Help topics

"Synchronisation de fichiers" on page 103

"Accès aux sites, à un serveur et aux disques locaux" on page 86

Ouverture d'un fichier

1 Dans le panneau Fichiers (Fenetre > Fichiers), selectionnez un site, un serveur ou un lecteur dans le menu contextuel (dans lequel le site, le serveur ou le lecteur s'affiche).
2 Recherche et selectionnez le fichier à ouvrir.
3 Effectuez l'une des opérations suivantes :

Double-cliquez sur l'icone du fichier.
- Cliquez avec le bouton droit de la souris (Windows) ou en Maintenant la touche Ctrl enfoncée (Macintosh) sur l'icone du fichier, puis choisissez Ouvrir.

Le fichier s'ouvre dans la fenetre de document de Dreamweaver.

Creation d'un fichier ou d'un dossier

1 Sélectionnez un fichier ou un dossier dans le panneau Fichiers (Fenêtre > Fichiers).
Dreamweaver create the fichier ou le dossier dans le dossier selectionné actuellement ou dans le même dossier que celui dans lequel le fichier selectionné se trouve.
2 Cliquez avec le bouton droit de la souris (Windows) ou en maintainant la touche Ctrl enfoncée (Macintosh), puis selectionné Nouveau fjichier ou Nouveau dossier.
3 Saisissez le nom du nouveau fichier ou dossier.
4 Appuyez sur la touche Entrée (Windows) ou Retour (Macintosh).

Suppression d'un fichier ou d'un dossier

1 Sélectionné le fichier à supprimer dans le panneau Fichiers (Fenêtre > Fichiers).

2 Cliquez avec le bouton droit de la souris (Windows) ou en maintainant la touche Ctrl enfoncée (Macintosh), puis choisissez Edition > Supprimer.

Modification du nom d'un fichier ou d'un dossier

1 Sélectionné le fichier à renomer dans le panneau Fichiers (Fenêtre > Fichiers).
2 Procedez de l'une des manieres suivantes pour activer le nom du fisier 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 maintainant la touche Ctrl enfoncée (Macintosh) sur l'icone du fichier, puisCHOISSEZ Edition > Renommer.
  3 Saisissez le nouveau nom à la place du nom existant.
  4 Appuyez sur la touche Entrée (Windows) ou Retour (Macintosh).

Déplacement d'un fichier ou d'un dossier

1 Sélectionné le fichier à déplacer dans le panneau Fichiers (Fenêtre > Fichiers).
2 Effectuez l'une des opérations suivantes :

• Copiez le fichier ou le dossier, puis collez-le à son nouvel emplacement.
• Faites glisser le fichier ou le dossier vers son nouvel emplacement.
  3 Actualisez le panneau Fichiers pour afficher le fichier ou le dossier à son nouvel emplacement.

Actualisation du panneau Actifs

Effectuez l'une des opérations suivantes :
- Cliquez avec le bouton droit de la souris (Windows) ou en maintainant la touche Ctrl enfoncée (Macintosh) sur un fichier ou sur un dossier, puis choisissez Actualiser.
- (Sites Dreamweaver uniquement) Cliquez sur le bouton Actualiser dans la barre d'outils du panneau Fichiers (cette option actualise les deux panneaux).

Note: Dreamweaver actualise le panneau Fichiers lorsque vous apportez des modifications dans une autre application, puis revenez à Dreamweaver.

Recherche de fichiers dans votre site Dreamweaver

La fonction de recherche de Dreamweaver permet de tracer facilement les fichiers sélectionnés, ouverts, extrais ou modifiés récemment dans votre site. Vous pouvez également rechercher les fichiers plus récents dans votre site local ou distant.

More Help topics

"Utilisation des rapportes pour tester votre site" on page 116

Recherche d'un fichier ouvert dans votre site

1 Ouvrez le fichier dans la fenêtre de document.
2 Sélectionnez Site > Repérer dans le site.

Dreamweaver sélectionne les fichiers dans le panneau Fichiers.

Note: Si le fichier ouvert dans la fenêtre de document n'est pas associé au site actuel affiqué dans le panneau Fichiers, Dreamweaver tente de déterminer àquel site Dreamweaver le fichier apparient. S'il ne correspond qu'à un seul site local, Dreamweaver ouvre ce site dans le panneau Fichiers, puis met le fichier en surbrillance.

Recherche et sélection des fichiers extraits dans un site Dreamweaver

Dans le panneau Fichiers (Fenêtre > Fichiers) affché sous sa forme réduite, cliquez sur le menu Options dans le coin supérieur droit du panneau Fichiers, puis Sélectionnéz Modifier > Sélectionner les fichiers extraits.

Dreamweaver selectionne les fichiers dans le panneau Fichiers.

Recherche d'un fichier sélectionné dans votre site local ou distant

1 Sélectionné 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 maintainant la touche Ctrl enforcée (Macintosh), puis selectionné Retrouver sur le site local ou Retrouver sur le site distant (selon l'emplacement où le fjichier a été selectionné).

Dreamweaver selectionne les fichiers dans le panneau Fichiers.

Recherche et sélection des fichiers qui sont plus récents sur le site local que sur le site distant

Dans le panneau Fichiers (Fenêtre > Fichiers) affché 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 recent.

Dreamweaver selectionne les fichiers dans le panneau Fichiers.

Recherche et sélection des fichiers qui sont plus récents sur le site distant que sur le site local

Dans le panneau Fichiers (Fenêtre > Fichiers) affché sous sa forme réduite, cliquez sur le menu Options dans le coin supérieur droit du panneau Fichiers, puis Sélectionnéz Edition > Sélectionner distants plus récents.

Dreamweaver selectionne les fichiers dans le panneau Fichiers.

Recherche des fichiers récemment modifiés sur votre site

1 Dans le panneau Fichiers (Fenêtre > Fichiers) affché sous sa forme réduite, cliquez sur le menu Options dans le coin supérieur droit du panneau Fichiers, puis Sélectionnéz Modifier > Sélectionner Modifiés récemment.
2 Procedez de l'une des manieres suivantes pour indiquer les dates à prendre en compte dans le rapport :

Pour que le rapport prenne en compte l'ensemble des fichiers modifiés ces derniers jours, activez l'options Fichiers créé ou modifiés dans le dernier, puis entrez une valeur dans la zone de texte.
Pour que le rapport prenne en compte l'ensemble des fichiers modifiés durant une période donnée, cliquez sur le bouton radio Fichiers créé ou modifiés entre, puis spécifie une durée.
3 (Facultatif) Entrer un nom d'utilisateur dans la zone Modifie par pour limiter votre recherche aux fichiers modifiés par un utiliser donné au cours de la période indiquée.

Note: Cette option est uniquement disponible pour les sites Contribute.

4 Indiquez l'emplacement ou vous souhaitez afficher les fichiers compris dans le rapport à l'aide des boutons radio, si nécessaire :

Machine locale si le site ne comporte que des pages statiques.

Serveur d'évaluation si le site compte des pages dynamiques.

Note: Vous doivent avoir défini un serveur d'évaluation dans la boîte de dialogue Définition du site (XREF) pour utiliser cette option. Si cette opération n'a pas été effectué et qu'aucun préfixe URL n'a été entrez pour ce serveur ou si vous exécutez le rapport pour plus d'un site, cette option n'est pas disponible.

Autre emplacement si vous souhaitez entrer un chemin dans la zone de texte.

5 Cliques sur OK pour enregistrrer vos paramètres.

Dreamweaver selectionne les fichiers modifiés durant la période selectionnée dans le panneau Fichiers.

Identification et suppression des fichiers non utilisés

Vou puez identier et supprimer les fichiers qui ne sont plus utilisés par les autres fichiers de cette site.

1 Choisissez Site > Vérifier tous les liens du site.

Dreamweaver vérifie tous les liens de votre site et affiche les liens rompus dans le panneau Résultats.

2 Sélectionnez Fichiers orphelins dans le menu du panneau Vérificateur de lien.

Dreamweaver affiche l'ensemble des fischiers sans liens entrants. Ceci signifie qu'aucun des fischiers de votre site n'est lié à ces fischiers.

3 Sélectionnez les fichiers que vous voulez supprimer et appuyez sur la touche Suppr.

Important: Bien qu'aucun autre fichier du site ne soit lie à ces fichiers, une partie des fichiers de la liste peuvent être liés à d'autres fichiers. Procedez avec prudence lors de la suppression de fichiers.

More Help topics

"Activation et désactivation du voilage d'un site" on page 109

Accès aux sites, à un serveur et aux disques locaux

Vous pouvez ouvrir, modifier et enregistrer les fischiers et dossiers de vos sites Dreamweaver, comme les fischiers ou dossiers qui ne font pas partie d'un site Dreamweaver. Outre les sites Dreamweaver, vous pouvez acceder à un serveur, à un disque local ou à votre bureau.

Avant de pouvoir acceder à un serveur distant, vous devez configurer Dreamweaver de façon à ce qu'il puisse fonctionner avec ce serveur.

Note: La meilleure façon de gérer des fichiers est de créé un site Dreamweaver.

Ouverture d'un site Dreamweaver existant

Dans le panneau Fichiers (Fenêtre > Fichiers), Sélectionnez un site dans le menu (dans lequel le site, le serveur ou le disque dur en cours d'utilisation s'affiche).

Ouverture d'un dossier sur un serveur FTP ou RDS distant

1 Dans le panneau Fichiers (Fenetre > Fichiers), selectionnez un nom de serveur dans le menu (dans lequel le site, le serveur ou le disque dur en cours d'utilisation s'affiche).

Note: Les noms des serveurs que vous avez configurés pour fonctionner avec Dreamweaver apparaisent.

2 Naviguez vers ces fichiers et modifiez-les comme vous le faites habituèlement.

Accès à un disque local ou à votre bureau

1 Dans le panneau Fichiers (Fenetre > Fichiers), selectionnez Bureau, disque local ou disque compact dans le menu (dans lequel le site, le serveur ou le disque dur s'affiche).

2 Recherche le fichier de votrechoix, puis effectuez l'une des opérations suivantes :

• Ouverture de fichiers dans Dreamweaver ou dans une autre application
• Renommer des fichiers
• Copier des fichiers
  Supprimer des fichiers
• Faire glisser des fichiers

Lorsque vous faites glisser un fjichier d'un site Dreamweaver à un autre site ou à un dossier non lié à un site Dreamweaver, Dreamweavercopie le fjichier, puis l'ajoute à l'emplacement où vous le déposez. Si vous faites glisser un fjichier et le déposez au sein du même site Dreamweaver, Dreamweaverdéplace le fjichier à l'emplacement où vous le déposez. Lorsque vous faites glisser un fjichier qui n'est associé à aucun site Dreamweaver vers un dossier qui n'est pas non plus associé à un site Dreamweaver, Dreamweaver déplace le fjichier à l'emplacement où vous le déposez.

Note: Pour que Dreamweaver déplace un fichier au lieu de le copier, maintenez la touche Maj (Windows) ou Commande (Macintosh) enforcé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) enforcée pendant que vous faites glisser et déposez le fichier.

Personnalisation des détails de fichiers et de dossiers affichés dans la forme développée du panneau Fichiers

Lorsqu'un site Dreamweaver est affché dans le panneau Fichiers (en mode développé), les informations liées aux fichiers et dossiers sont affichées dans des colonnes. Vous pouvez, par exemple, consulter le type du fichier ou la date de sa dernière modification.

Voussoupiezpersonnaliserlescolonnene nprocedantdel'une desfaconssuivantes(certainesopérationssondisponiblesuniquementpourlescolonnesequeyouajoutez,etnonpas pourlescolonnepardefaut)：

• 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 personalisées uniquement)
• Associé des colonnes à une Design Note (colonnes personnalisées uniquement)

Modification de l'ordre des colonnes

Sélectionnez le nom d'une colonne, puis cliquez sur le bouton flèche vers le haut ou vers le bas afin de changer la position de la colonne sélectionnée.

Note: Vou puez changer l'ordre de toutes les colonnes, sauf la colonne Nom, qui reste toujours en premiere position.

Ajout, suppression ou modification de colonnes

1 Choisissez Site > Gérer les sites.
2 Sélectionnez un site, puis cliquez sur Modifier.
3 Développèz les paramètres avances et choisisse la catégorie Colonnés mode Fichier.
4 Sélectionnez une colonne, puis cliquez sur le bouton Plus (+) pour l'ajouter ou sur le bouton Moins (-) pour la supprimer.

Note: Comme la colonne est immédiatement supprimée sans qu'il vous soit demandé de confirmation, soyez certain de réellement fouvoir effectuer cette opération avant de cliquer sur le bouton Moins (-).

5 Dans la zone Nom de colonne, indiquez le nom de votre colonne.
6 Choisissez une valeur dans le menu Associer à Design Notes ou indiquez-en une.

Note: Vous doivent associier la nouvelle colonne à une Design Note afin que des données s'affichent dans le panneau Fichiers.

7 Choisissez une option d'alignement pour déterminer la façon dont le texte doit être aligné dans la colonne.
8 Activez ou désactivez l'option Afficher afin d'afficher et de masquer respectivement la colonne.
9 Activez ou désactivez l'option Partager avec tous les utilisateurs de ce site afin que la colonne soit accessible ou non à tous les utilisateurs connectés au site distant.

Tri en fonction d'une colonne dans le panneau Fichiers

Pour trier les listed, cliquez sur l'en-ete de la colonne en fonction de laquelle vous souhaitez effectuer le tri.

Si vous cliquez plusieurs fois sur un même en-tee de colonne, l'ordre dans lequel Dreamweaver trie la colonne est inversé (ordre croissant ou decroissant).

Acquisition et placement de fichiers depuis ou vers votre serveur

Transfert de fichiers et fichiers dépendants

Si vous travailliez au sein d'un groupe, vous pouvez utiliser le système d'extraction et d'archivage pour transférer des fichiers entre le serveur distant et l'ordinateur local. Si vous étés la seule personne à travailler sur le site distant, vous pouze utiliser les commandes Acquerir et Placer pour transférer des fichiers sans avoir à les archiver ou à les extraire.

Lorsque vous transférez un document entre un dossier local et distant à l'aide du panneau Fichiers, vous pouvez transférer les fichiers dépendants de ce document. Les fichiers dépendants sont des images, des feuilles de style externes et d'autres fichiers référencés dans votre document qu'un navigateur charge avec le document.

Note: 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 inutil si les versions les plus récentes des fichiers dépendants sont déjà générées sur le disque local. Cela s'applique également lors du transfert et de l'archivage de fichiers : il n'est pas nécessaire si des copies mises à jour sont déjà générées sur le site distant.

Les éléments de bibliothèque sont traités comme des fichiers dépendants.

Certsains serveurs genereront des erreurs lors du placement d'elements de bibliothèque. Néanmoins, vous pouvez voier ces fichiers pour qu'ils ne soient pas transférés.

More Help topics

"Archivage et extraction de fichiers" on page 94

"Activation et déactivation du voilage d'un site" on page 109

A propos des transferts de fichiers en arrêté-plan

Vous pouvez effectuer d'autres activités non liées au serveur lors de l'acquisition ou du placement de fischiers. Le transfert de fischiers d'arrière-plan fonctionne pour tous les protocoles de transfert pris en charge par Dreamweaver : FTP, SFTP, LAN, WebDAV, Subversion et RDS.

Les activités non liées au serveur complrennet, entre autres, les opérations suivantes: taper, modifier des feuilles de style externes, générer des rapports à l'échelle du site et créé de nouveaux sites.

Les activités cote 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;
  -maker une connexion à une base de données;
• lien les données dynamiques;
• Prévisualisation des données en mode Affichage en direct
  insérer un service Web;
• supprimer des fichiers ou des dossiers distants;
• prévisualiser dans le navigateur sur un serveur d'évaluation;
• enregistrer un fichier sur un serveur distant ;

insérer une image d'un serveur distant ;
ouvrir un fichier d'un serveur distant ;
- placer automatiquement des fichiers lors de l'enregistrement;
- faire glisser des fichiers vers le site distant ;
- couper, copier ou coller des fichiers sur le site distant;
actualiser l'affichage distant.

Par défaut, la boîte de dialogue Activité fichiers en arrêté-plan est ouverte pendant les transferts de fichiers. Vous pouvez réduire cette boîte de dialogue en cliquant sur le bouton Réduire, dans son coin supérieur droit. La fermeture de la boîte de dialogue pendant un transfert de fichier entraine l'annulation de cette opération.

Acquisition de fichiers depuis un serveur distant

La commande Acquerir 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 acquerir des fichiers.

Dreamweaver create a journal de suivi des activités de fichiers au cours du transfert ; vous pouvez le consulter et l'enregistrer.

Note: Vous ne pouvez pas désactiver le transfert de fichiers en arrêté-plan. Si le journal des détails est ouvert dans la boîte de dialogue Activité fichiers en arrêté-plan, vous pouvez le fermer pour améliorer les performances.

Dreamweaver enregistre également l'activité de tous les transferts de fichiers en FTP. Si une erreur se produit lors du transfert d'un fichier en FTP, le journal du site FTP peut vous aider à déterminer le problème.

More Help topics

"Archivage et extraction de fichiers" on page 94

"Synchronisation de fichiers" on page 103

Acquisition des fichiers depuis un serveur distant via le panneau Fichiers

1 Dans le panneau Fichiers (Fenetre > Fichiers), selectionnez les fichiers que vous pouze télécharger.
Les fichiers sont généralement sélectionnés dans l'affichage distant, mais il est également possible de les sélectionnner 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.
Note: Pour n'acquerir que les fichiers dont la version distante est plus recente que la version locale, utilisez la commande Synchroniser.
2 Procedez de l'une des manières suivantes pour accuper 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 enfonnée (Macintosh) sur le fichier dans le panneau Fichiers, puis selectionnez Acquérir dans le menu contextual.
3 Cliquez sur Oui dans la boite de dialogue Fichiers dépendants si vous souhaitez télécharger les fichiers dépendants. Si vous disposez déjà de copies locales des fichiers dépendants, cliquez sur Non. L'option par défaut est de ne pas télécharger les fichiers indépendants. Vous pouvez définir cette option en SéLECTIONNANT Edition > Préférences > Site.

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 fjchier consistera a transférer une copie locale accessible en lecture seule. Le fjchier reste disponible sur le site distant ou sur le serveur d'évaluation et peut etre extrait par d'autres membres de I'équipe.
• Si vous n'utilise pas le système d'archivage et d'extraction, l'obtention d'un fisquier produit une copie accessible en lecture et écriture.

Note: Si vous travailliez en équipe et que d'autres personnes sont susceptibles de travailler sur les mêmes fichiers, ne désactive 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 doivent l'utiliser également.

Pour arrêter le transfert de filchier à n'imprime quel moment, cliquez sur le bouton Annuler de la boîte de dialogue Activité filchiers en arrêté-plan.

Acquisition des fichiers depuis un serveur distant à l'aide de la fenêtre du document

1 Assurez-vous que le document est actif dans la fenetre du document.
2 Procedez de l'une des manières suivantes pour accuper un fichier :

• Choisissez Site > Acquérir.
• Cliquez sur l'icone Gestion des fichiers dans la barre d'outils de la fenetre du document, puis selectionnez Acquérir dans le menu.

Note: 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 locally le fichier actuel apparient. Si ce fichier courant n'appartient qu'à un seul site local,

Dreamweaver ouvre ce site, puis effectue l'opération d'acquisition.

Affichage du journal FTP

1 Cliquez sur le menu Options dans le coin supérieur droit du panneau Fichiers.
2 Choisissez Affichage > Journal FTP du site.

Note: Dans le panneau Fichiers en mode développé, vous pouvez cliquer sur le bouton Journal FTP.

Placement de fichiers sur un serveur distant

Vouss pouze placer des fichiers du site local vers le site distant, dans la plupart des cas sans changer l'etat d'extraction du fjchier.

Il existe deux types de circonstances dans lesquels il est préférible d'utiliser la commande Placer plutôt que la commande Archiver :

• Lorsque vous ne travailliez pas en équipe et que vous n'utilise pas le système d'archivage et d'extraction.
  Lorsque you souhaitez placer la version actuelle du fichier sur le serveur, mais que you alez continuer a y apporter des modifications.

Note: 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 copé sur le site distant, puis extrait pour vous permettre de continuer à le modifier.

Vouss pouvez utiliser le panneau Fichiers ou la fenetre du document pour accuperir des fichiers. Dreamweaver create un journal de suivi des activités de fichiers au cours du transfert ; vous pouze le consulter et l'enregistrer.

Note: Vous ne pouvez pas désactiver le transfert de fichiers en arrêtre-plan. Si le journal des détails est ouvert dans la boîte de dialogue Activité fichiers en arrêtre-plan, vous pouvez le fermer pour améliorer les performances.

Dreamweaver enregistre également l'activité de tous les transferts de fichiers en FTP. Si une erreur se produit lors du transfert d'un fichier en FTP, le journal du site FTP peut vous aider à déterminer le problème.

Vous trouvrez undidacticiel consacre au placement de fichiers sur un serveur distant à l'adresse www.adobe.com/go/vid0163_fr.

Vous trouvez undidacticiel consacre au dépannage des problèmes de publication à l'adresse www.adobe.com/go/vid0164_fr.

More Help topics

"Synchronisation de fichiers" on page 103

"A propos du système d'archivage et d'extraction de fichiers" on page 94

Didacticiel consacre au placement de fichiers

Didacticiel consacre au dépannage des problèmes de publication

Placement de fichiers sur un serveur distant ou un serveur d'évaluation à l'aide du panneau Fichiers

1 Dans le panneau Fichiers (Fenêtre > Fichiers), Sélectionnez les fichiers à télécharger.

Les fichiers sont généralement sélectionnés dans l'affichage Site local, mais il est également possible de les scélectionner dans l'affichage Site distant.

Note: Voupvez decider de ne placer que les fichiers dont la version locale est plus recente que la version distante.

2 Procedez de l'une des manieres suivantes pour placer un fichier sur le serveur distant :
- Cliquez sur le bouton Placer dans la barre d'outils du panneau Fichiers.
- Cliquez avec le bouton droit de la souris (Windows) ou en Maintenant la touche Ctrl enfoncée (Macintosh) sur le fichier dans le panneau Fichiers, puis selectionné Placer dans le menu contextual.
3 Si le fichier n'a pas encore ete enregistrred, une boite de dialogue s'affiche (si vous l'veaz indique parmi les preferences de la categorie Site de la boite de dialogue Prefereances) pour vous permettre de l'enregistrer avant de le placer sur le serveur distant. Cliquez sur Oui pour enregistrer le fichier ou sur Non pour placer la version precedemment enregistrree sur le serveur distant.

Note: Si vous n'enregistrez pas le fichier, aucune des modifications effectuees depuis le dernier enregistrement ne sera placee sur le serveur distant. Toutefois, le fichier reste ouvert, ce qui vous permit encore d'enregistrer les changements après avoir place le fichier sur le serveur.

4 Cliquez sur Oui si vous souhaitez envoyer les fichiers dépendants associés aux fichiers sélectionnés ou sur Non si vous ne voulez pas les envoyer. L'option par défaut est de ne pas transférer les fichiers indépendants. Vous pouvez définir cette option en sélectionnant Edition > Préférences > Site.

Note: Il est en général conseilé de transférer les fichiers dépendants lorsque vous archivez un nouveau fichier, mais si les versions les plus récentes des fichiers dépendants figurent déjà sur le serveur distant, il n'est pas utile de les transférer à nouveau.

Pour arrêté le transfert de filchier à n'imprime quel moment, cliquez sur le bouton Annuler de la boîte de dialogue. Activité filchiers en arrêté-plan.

Placement de fichiers sur un serveur distant à l'aide de la fenêtre du document

1 Assurez-vous que le document est actif dans la fenêtre du document.

2 Procedez de l'une des manieres suivantes pour placer un fichier :

• Choisissez Site > Placer.
• Cliquez sur l'icone Gestion des fichiers dans la barre d'outils de la fenetre du document, puis selectionnez Placer dans le menu.

Note: 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 apparient. Si ce fichier courant n'appartient qu'a un seul site local, Dreamweaver ouvre ce site, puis effectue l'opération de placement.

Affichage du journal FTP

1 Cliquez sur le menu Options dans le coin supérieur droit du panneau Fichiers.
2 Choisissez Affichage > Journal FTP du site.

Note: Dans le panneau Fichiers en mode développé, vous pouvez cliquer sur le bouton Journal FTP.

Gestion des transferts de fichiers

Vou puez afficher I'etat des opérations de transfert de fichiers, ainsi que la liste des fichiers transférés et de leurs résultats (transfert réussi, ignore ou raté). Vous pouze également créé un journal des activités relatives aux fichiers.

Note: Dreamweaver you permit d'effectuer d'autres activités non liées au serveur lors du transfert de fichiers vers le serveur ou à partir de ce dernier.

Annulation d'un transfert de fichier

Cliquez sur le bouton Annuler de la boite de dialogue Transfert de fichiers en arriere-plan. Si la boite de dialogue n'est pas affichee, cliquez sur le bouton Activite fichiers dans le bas du panneau Fichiers.

Affichage de la boîte de dialogue Activité fichiers en arrêté-plan pendant les transferts

Cliquez sur le bouton Activité fichiers ou Journal dans le bas du panneau Fichiers.

Note: Vous ne pouvez pas masquer ni supprimer le bouton Journal. Il s'agit d'une partie permanente du panneau.

Affichage des détails du dernier transfert de fichiers

1 Cliquez sur le bouton Journal en bas du panneau Fichiers pour ouvrir la boite de dialogue Activité fichiers en arrêté-plan.
2 Cliquez sur la flèche Détails.

Enregistrement d'un journal du dernier transfert de fichier

1 Cliquez sur le bouton Journal en bas du panneau Fichiers pour ouvrir la boite de dialogue Activité fichiers en arrêté-plan.
2 Cliques sur le bouton Enregistrer journal et enregistrrez les informations sous forme de fichier texte.

Vouss pouze alors analyser les mouvements de fichiers en ouvrant le fjchier journal dans Dreamweaver ou dans un éditeur de texte.

Archivage et extraction de fichiers

A propos du système d'archivage et d'extraction de fichiers

Si vous travailliez en équipe, vous avez la possibilité d'archiver et d'extraire des fichiers sur les serveurs local et distant. Si vous étés la seule personne à travailler sur le serveur distant, vous pouze utiliser les commandes Acquérir et Placer pour transférer des fichiers sans avoir à les archiver ou à les extraire.

Note: Vous pouvez utiliser la fonctionnalité d'acquisition et de placement de fichiers sur un serveur d'évaluation, mais le système d'archivage et d'extraction n'est pas disponible sur ce type de serveur.

L'extraction d'un fichier équivaut à signaler aux autres utilisateurs que vous travailliez sur ce fichier et qu'ils ne doivent pas le modifier. Lors de l'extraction d'un fichier, le nom de la personne ayant effectué l'opération est affché dans le panneau Fichiers, avec une coche de couleur rouge (si le fichier a été extrait par un autre membre de l'équipe) ou verte (si vous étés la personne à avoir extrait le fichier) en regard de son icône.

L'archivage d'un fjichier équivaut à lemettre à la disposition des autres membres de l'équipe, qui peuvent l'extraire et le modifier. Lorsque vous archivez un fjichier après l'avoir modifié, la version locale de ce fjichier devient accessible en lecture seule et un cadenas apparait en regard du fjichier dans le panneau Fichiers pour vous empêcher de le modifier.

Dreamweaver ne rend pas les fischiers extraits accessibles en lecture seule sur le serveur distant. Si vous transféré des fischiers à l'aide d'une application autre que Dreamweaver, vous risquez d'écraser les fischiers extraits. Toutefois, dans les applications autres que Dreamweaver, le fjchier LCK est visible pres du fjchier extrait dans la hierarchie de fischiers afin d'eviter ce type d'incident.

More Help topics

"Acquisition et placement de fichiers depuis ou vers votre serveur" on page 89

Configuration du système d'archivage et d'extraction de fichiers

Pour utiliser le système d'archivage et d'extraction, vous doivent associier leur site local à un serveur distant.

1 Choisissez Site > Gérer les sites.
2 Sélectionnez un site et cliquez sur Modifier.
3 Dans la boîte de dialogue Configuration du site, Sélectionnez la catégorie Serveurs et effectuez l'une des actions suivantes :
- Cliquez sur le bouton Ajouter nouveau serveur pour ajouter un nouveau serveur.
- Sélectionnez un serveur existant puis cliquez sur le bouton Modifier serveur existant.
4 Définisse les options de base requises, puis cliquez sur le bouton Avancé.
5 Activez l'option Activer l'extraction de fichier si vous travailliez au sein d'une equipe (ou si vous travailliez seul, mais depuis plusieurs machines). Désélectionnez cette option si vous souhaitez désactiver l'archivage et l'extraction de fichiers dans votre site Web.

Cette option est utile pour informer les autres utilisateurs que vous avez extrait un fjchier en vue de le modifier ou pour vous rappeler qu'une version plus récente d'un fjchier est peut-à-tre ouverte sur une autre machine.

Si vous ne VOYZ pas les options Archiver/Extraire, cela signifie que vous n'avoz pas configuré le serveur distant.

6 Activez l'option Extraire les fichiers à l'ouverture si vous voulez que les fichiers soient automatiquement extraits lorsque vous double-cliquez dessus pour les ouvrir dans le panneau Fichiers.

Si vous choisissez Fichier > Ouvrir pour ouvrir un fichier, cela n'extrait pas le fichier, même si cette option est activée.

7 Définisse les options restantes :

Nom d'extraction Ce nom apparait dans le panneau Fichiers a cote des fichiers extraits afin que les membres d'une equipe puisent s'adresser à la personne appropriée s'ils ont besoin d'un fichier extrait.

Note: Si vous travailliez seul sur plusieurs machines, utilisez un nom d'extraction différent pour chaque machine (par exemple, PierreR-MacDomicile et PierreR-PCBureau) de manière à savoir où se trouve la version la plus récente du fichier si vous oubliez de l'archiver.

Adresse électronique Si vous saississez une adresse électronique, lors de l'extraction d'un fjchier, votre nom apparait dans le panneau Fichiers en regard du fjchier, sous la forme d'un lien (bleu sou ligné). Si un membre de l'équipe clique sur le lien, son programme de messagerie électronique par défaut ouvre un nouveau courriel à destination de votre adresse électronique et compteant un objet qui correspond aux noms du site et du fjchier.

Archiver et extraire des fichiers dans un dossier distant

Une fois le système d'archivage et d'extraction défini, vous pouvez archiver et extraire des fichiers sur un serveur distant via le panneau Fichiers ou la fenêtre de document.

Extraction des fichiers à l'aide du panneau Fichiers

1 Dans le panneau Fichiers (Fenetre > Fichiers), selectionnez les fichiers à extraire du serveur distant.

Note: Vou puez selectionner 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'equipe dispose du fichier extrait. Un symbole représentant un cadenas indique que le fichier est en lecture seule (Windows) ou verrouillé (Macintosh).

2 Procedez de l'une des manieres 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 maintainant la touche Ctrl enfoncée (Macintosh), puisCHOISSEZ Extraire dans le menu contextualuel.

3 Dans la boite de dialogue Fichiers dépendants, cliquez sur Oui si vous souhaitez télécharger les fischiers dépendants associés aux fischiers sélectionnés ou sur Non si vous ne voulez pas les télécharger. L'option par défaut est de ne pas télécharger les fischiers indépendants. Vous pouvez définir cette option en sélectionnant Edition > Préférences > Site.

Note: D'une manière générale, il est conseilé de télécharger les fichiers dépendants lorsque le fichier extrait est un nouveau fichier, mais c'est inutil si les versions les plus récentes des fichiers dépendants sont déjà générées sur le disque local.

Une coche de couleur verte apparait en regard de l'icone du fichier local pour signaler que vous l'avez extrait.

Important: Si vous extrayez le fichier actif, la version ouverte du fichier est écrasée par la nouvelle version extraite.

Archivage des fichiers à l'aide du panneau Fichiers

1 Dans le panneau Fichiers (Fenetre > Fichiers), Sélectionnez les fichiers extrais ou sélectionné de nouveaux fichiers.

Note: Vou puez selectionner des fichiers dans l'affichage du site local ou distant mais pas dans l'affichage Serveur d'évaluation.

2 Procedez de l'une des manieres 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 maintainant la touche Ctrl enfoncée (Macintosh), puisCHOISSEZ Archiver dans le menu contextualuel.
  3 Cliquez sur Oui si vous souhaitez envoyer les fichiers dépendants associés aux fichiers sélectionnés ou sur Non si vous ne voulez pas les envoyer. L'option par défaut est de ne pas transférer les fichiers indépendants. Vous pouvez définir cette option en sélectionnant Edition > Préférences > Site.

Note: Il est en général conseilé 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 apparait en regard de l'icone du fichier local pour indiquer que ce dernier n'est désormais accessible qu'en lecture seule.

Important: Si vous archivez le fichier actif, il se peut que ce fichier soit automatiquement enregistré avant d'être archivé, selon les options définies dans les préférences.

Archivage d'un fichier ouvert à partir de la fénètre de document

1 Assurez-vous que le fichier à archiver ou à extraire est ouvert dans la fenêtre de document.

Note: Vous ne pouvez archiver qu'un seul fichier ouvert à la fois.

2 Effectuez l'une des opérations suivantes :

• Choisissez Site > Archiver.
• Cliquez sur l'icone Gestion des fichiers dans la barre d'outils de la fenetre du document, puis selectionnez Archiver dans le menu.

Si le fjichier actuel n'est pas associé au site actif dans le panneau Fichiers, Dreamweaver tente de déterminer àquel site défini localement le fjichier actuel apparient. Si le fjichier actuel apparient à un autre site que celui qui est actif dans le panneau Fichiers, Dreamweaver ouvre ce site, puis effectue l'opération d'archivage.

Important: Si vous archivez le fichier actif, il se peut que ce fichier soit automatiquement enregistré avant d'être archivé, selon les options définies dans les préférences.

Annulation de l'extraction d'un fichier

Si vous extrayez un fjichier, puis que vous decide de ne pas le modifier (ou si vous decide d'éliminer les modifications que vous avez apportées), vous pouvez annuler l'opération d'extraction. Le fjichier reprend alors son état d'origine.

Pour annuler l'extraction d'un fichier, procedez de l'une des façon suivantes :

• Ouvrez le fjichier 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 maintainant la touche Ctrl enfoncée (Macintosh), puis selectionnez Annuler extraction.

La copie locale du fichier passe alors en lecture seule, et toutes les modifications que vous y avez apportées sont perdues.

Utilisation de WebDAV pour archiver et extraire des fichiers

Dreamweaver peut se connecter à un serveur utilisant WebDAV (Web-based Distributed Authoring and Versioning), un ensemble d'extensions du protocole HTTP permettant aux utilisateurs au sein d'un groupe de modifier et de gérer des fischiers sur des serveurs Web distants. Pour plus d'informations, voir www.webdav.org.

1 Si vous ne l'avez pas encore fait, définissez un site Dreamweaver indiquant le dossier local que vous utilisez pour enregistrer vos fichiers de projet.

2 Sélectionnez Site > Gérer les sites puis double-cliquez sur votre site dans la liste.
3 Dans la boîte de dialogue Configuration du site, Sélectionnez la catégorie Serveurs et effectuez l'une des actions suivantes :

• Cliquez sur le bouton Ajouter nouveau serveur pour ajouter un nouveau serveur.
• Sélectionnez un serveur existant puis cliquez sur le bouton Modifier serveur existant.

4 Dans l'écran Base, Sélectionnéz WebDAV dans le menu Se connecter au moyen de, puis complétez si nécessaire les autres options de l'écran Base.
5 Cliquez sur le bouton Avancé.
6 Sélectionnez l'option Activer l'extraction de fichier et entrez les informations suivantes :

• Dans la zone de texte Nom d'extraction, entrez un nom vous identifient par rapport aux autres membres de l'équipe.
• Indiquez votre adresse électronique dans la zone appropriée.

Le nom et l'adresse électronique sont utilisés pour l'identification sur le serveur WebDAV et s'affiche dans le panneau Fichiers pour les contacts.

7 Cliquez sur Enregistrer.

Dreamweaver configure the site pour l'accès WebDAV. Lorsque vous utilisez la commande d'archivage ou d'extraction sur un fisier du site, le fisier est transféré au moyen de WebDAV.

Note: Il se peut que WebDAV ne parvienne pas à extraire correctement des fichiers incluant un contenu dynamique, parce que la méthode HTTP GET les rend au moment de leur extraction.

Utilisation de Subversion (svn) pour-acquérir et archiver des fichiers

Dreamweaver peut se connecter à un serveur utilisant Subversion (SVN), un système de contrôle de version qui permet aux utilisateurs de collaborer à la modification et la gestion de fichiers sur des serveurs Web distants. Dreamweaver n'est pas un client SVN intégral, mais il permet aux utilisateurs d'obtenir les versions les plus récentes de fichiers, d'apporter des modifications et d'envoyer les fichiers.

Important: Dreamweaver CS5 utilise la bibliothèque du client Subversion 1.6.6 et Dreamweaver CS5.5 utilise la bibliothèque du client 1.6.9. Les versions plus récentes de la bibliothèque cliente Subversion ne sont pas rétrocompatibles. Notez que si vous mettez à jour une application cliente fierce (par exemple Tortoise SVN) en vue d'une utilisation avec une version ultérieure de Subversion, l'application Subversion mise à jour mettra à jour les métadonnées Subversion locales, et Dreamweaver ne pourrait plus communiquer avec Subversion. Ce problème n'est pas influencé par les mises à jour du serveur Subversion, car celles-ci sont rétrocompatibles. Si vous procédez à une mise à jour vers une application cliente fierce qui fonctionne avec Subversion en version 1.7 ou ultérieure, vous devrez rechercher des mises à jour auprès d'Adobe avant de pouvoir réutiliser Subversion avec Dreamweaver. Pour plus d'informations sur ce problème, consultez le site www.adobe.com/go/dw_svn_fr.

Adobe recommends d'utiliser un outil de comparaison de fischiers, développé par une pierce partie, lorsque vous utilisez des fischiers à contrôle de version SVN. Lorsque vous comparez des fischiers afin de détecter leurs différences, vous pouvez voir précisément quels types de modifications d'autres utilisateurs ont apportées. Pour plus d'informations sur les outils de comparaison de fischiers, utilisez un moteur de recherche Web tel que Google pour trouver des outils de « comparaison de fischiers » ou « diff ». Dreamweaver fonctionne avec la plupart des outils tiers.

Voutrouvrez undidacticiel video sur l'utilisation de SVN et Dreamweaver à l'adresse www.adobe.com/go/lrvid4049_dw_fr.

Etablissement d'une connexion SVN

Avant d'utiliser Subversion (SVN) comme système de contrôle des versions avec Dreamweaver, vous doivent établier une connexion à un serveur SVN. Pour définir une connexion à un serveur SVN, utilisez la catégorie Contrôle de version de la boîte de dialogue Définition du site.

Le serveur SVN est un reférentiel de fichiers depuis lequel vous (et d'autres utilisateurs) pouze obtenir et valider des fichiers. Il est différent du serveur distant qu'on utilise généralement dans Dreamweaver. En cas d'utilisation de SVN, le serveur distant reste le serveur « en direct » pour vos pages Web. Le serveur SVN sert pour sa part au stockage du reférentiel des fichiers au sujet desquels vous voulez conserver un contrôle de version. Le processus habituel consiste à obtaining des fichiers depuis le serveur SVN et à les y valider, puis à les publier sur votre serveur distant à partir de Dreamweaver. La configuration du serveur distant est tout à fait distincte de celle de SVN.

Avant de pouvoir entamer cette configuration, vous doivent disposer d'un accès à un serveur SVN et à un référentiel SVN. Pour plus d'informations sur SVN, consultez le site Web de Subversion à l'adresse suivante :

http://subversion.apache.org/.

Pour configurer la connexion SVN,procédez comme suit :

1 Choisissez Site > Gérer les sites, Sélectionnéz le site pour lequel vous voulez configurer le contrôle des versions, puis cliquez sur le bouton Modifier.
Note: Si vous n'avez pas encore définir de dossiers locaux et distants pour un site Dreamweaver, vous devrez au moins configurer un site local avant de pouvoir continuer. Le site distant n'est pas nécessaire pour l'instant, mais vous devrez en définir un pour pouvoir publier vos fichiers sur le Web. Pour plus d'informations, reportez-vous à la section "Utilisation de sites Dreamweaver" on page 40.
2 Dans la boite de dialogue Configuration du site, selectionnez la catégorie Contrôle de version.
3 Sélectionnez Subversion dans la liste déroulante Accès.
4 Définisse les options d'accès comme suit :

• Sélectionnez un protocole dans la liste déroulante Protocole. Les protocoles disponibles sont HTTP, HTTPS, SVN et SVN+SSH.

Note: L'emploi du protocole SVN+SSH exige une configuration spéciale. Pour plus d'informations, voir www.adobe.com/go/learn_dw_svn_ssh_fr.

• Entrez l'adresse du serveur SVN dans la zone de texte Adresse du serveur (généralement sous la forme nomserveur Domaine.com).
• Entre le chemin d'accès à votre référentiel sur le serveur SVN dans la zone Référentiel (généralement sous la forme /syn/votre_repertoire_racine. C'est à l'administrateur du serveur de nommer le dossier racine pour le référentiel SVN).
• (Facultatif) Si vous voulez utiliser un port de serveur différent du port par défaut, activez l'option Instance spécifique puis entrez un numéro de port dans la zone de texte.
• Entrez votre nom d'utilisateur et votre mot de passer sur SVN.

5 Cliquez sur Tester pour tester votre connexion, ou sur OK pour fermer la boite de dialogue. Cliquez ensuite sur Terminate pour fermer la boite de dialogue Gérer les sites.

Lorsque la connexion au serveur est établie, votre référentiel SVN peut être visualisé dans le panneau Fichiers. Pour le visualiser, vous pouvez désirir le mode Affichage du référentiel dans la liste déroulante Affichage, ou cliquez sur le bouton Fichiers du référentiel dans le panneau Fichiers développé.

More Help topics

"Utilisation de sites Dreamweaver" on page 40

"Utilisation du panneau Fichiers" on page 80

Obtention des versions les plus récentes des fichiers

Lorsque vous obtenez la version la plus récente d'un fjichier depuis le reféréntiel SVN, Dreamweaver fusionne le contenu de ce fjichier à celui de la copie locale correspondante. En d'autres termes, si un autre utilisateur a mis à jour le fjichier depuis la dernière fois où vous l'avez validé, ses mises à jour sont fusionnées avec la version locale du fjichier sur votre ordinateur. Si le fjichier n'este pas sur le disque dur local, Dreamweaver se contente de l'obtenir.

Note: Lorsque vous obtenez pour la première fois des fichiers depuis le référentiel, travailliez avec un réseau local vide ou un réseau local qui ne contient pas de fichiers portant les mêmes noms que dans le référentiel. Dreamweaver ne monte pas les fichiers du référentiel sur le lecteur local à la première tentative si le lecteur local contient des fichiers dont le nom est identique à celui de fichiers dans le référentiel distant.

1 Assurez-vous d'avoir bien définie une connexion SVN.

2 Effectuez l'une des opérations suivantes :

• Affichez la version locale de vos fichiers SVN dans le panneau Fichiers enCHOIsant Affichage local dans la listederoulaente Affichage. Si vous travailliez dans le panneau Fichiers developed, l'affichage local est automatquement disponible. Cliquez ensuite avec le bouton croit de la souris (Windows) ou en maintainant la touche Contrôle enfonnée (Macintosh) sur le fichier ou le dossier qui vous interesse, puis cliquez sur Contrôle de version > Obtenir les versions les plus recentes.
• Affichez les fichiers du référentiel SVN enChoosing Affichage du référentiel dans la liste déroulante Affichage du panneau Fichiers ou en cliquant sur le bouton Fichiers du référentiel dans le panneau Fichiers développé. Cliquez ensuite avec le bouton droit de la souris (Windows) ou en Maintenant la touche Contrôle enforcée (Macintosh) sur le fichier ou le dossier qui vous interesse, puis cliquez sur Obtenir les versions plus récentes.

Note: Vous pouvez également cliquer sur un fichier à l'aide du bouton droit de la souris puis désir Extraire dans le menu contextuel, ou selectionner ce fichier et cliquer sur le bouton Extraire afin d'obtenir sa version la plus récente. Toutefois, comme SVN ne prend pas en charge les processus d'extraction, cette méthode ne permet pas d'extraire le fichier de la façon habituelle.

Validation de fichiers

1 Assurez-vous d'avoir bien définie une connexion SVN.
2 Effectuez l'une des opérations suivantes :

• Affichez la version locale de vos fichiers SVN dans le panneau Fichiers enChoosing Affichage local dans la listederoulante Affichage. Si vous travailliez dans le panneau Fichiers développé, l'affichage local est automatiquement disponible. Sélectionnez ensuite le fichier à valider puis cliquez sur Archiver.
• Affichez les fichiers du référentiel SVN enChoosing Affichage du référentiel dans la liste déroulante Affichage du panneau Fichiers ou en cliquant sur le bouton Fichiers du référentiel dans le panneau Fichiers développé. Cliquez ensuite avec le bouton droit de la souris (Windows) ou en maintainant la touche Contrôle enfoncée (Macintosh) sur le fjichier que vous poulez valider, puis cliquez sur Valider.

3 Prenez connaissance des actions dans la boite de dialogue Archivage, apportez les eventuelles modifications requisés, puis cliquez sur OK.

Voupez modifier des actions en les selectionnant puis en cliquant sur le bouton dans le bas de la boite de dialogue Archivage. Deux options sont disponibles : Valider et Ignorer.

Note: La présence d'une coche de couleur verte sur un fichier dans le panneau Fichiers indique qu'il a ete modifie et pas encore validedans le referentiel.

Mise à jour de l'état de fichiers ou de dossiers dans le référentiel

Vou puez mette a jour l'etat SVN d'un fichier ou d'un dossier. La mise a jour n'actualise pas l'affichage tout entier.

1 Assurez-vous d'avoir bien définie une connexion SVN.
2 Affichez les fichiers du referentiel SVN enCHOISsant Affichage du referentiel dans la listederoulante Affichage du panneau Fichiers ou en cliquant sur le bouton Fichiers du referentiel dans le panneau Fichiers devellope.
3 Cliquez ensuite avec le bouton droit de la souris (Windows) ou en Maintenant la touche Contrôle enforcée (Macintosh) sur n'importequel fichier ou dossier du refereintiel,puis cliquez sur Mettre a jour l'etat.

Mise à jour de l'etat de fichiers ou de dossiers locaux

Vou puez mettre a jour l'etat SVN d'un fichier ou d'un dossier. La mise a jour n'actualise pas l'affichage tout entier.

1 Assurez-vous d'avoir bien définie une connexion SVN.
2 Affichez la version locale de vos fichiers SVN dans le panneau Fichiers en choisissant Affichage local dans la liste déroulante Affichage. Si vous travailliez dans le panneau Fichiers développé, l'affichage local est automatiquement disponible.
3 Cliquez ensuite avec le bouton droit de la souris (Windows) ou en Maintenant la touche Contrôle enforcée (Macintosh) sur n'importe quel fichier ou dossier du panneau Fichiers, puis cliquez sur Mettre à jour l'état.

Affichage des versions d'un fichier

1 Assurez-vous d'avoir bien définie une connexion SVN.
2 Effectuez l'une des opérations suivantes :

• Affichez la version locale de vos fichiers SVN dans le panneau Fichiers en besoinant Affichage local dans la liste déroulante Affichage. Si vous travailliez dans le panneau Fichiers développé, l'affichage local est automatiquement disponible. Cliquez ensuite avec le bouton droit de la souris (Windows) ou en maintainant la touche Contrôle enforcée (Macintosh) sur le fjichier dont vous pouze afficher les versions, puis besoinsez Contrôle de version > Afficher les versions.
• Affichez les fichiers du référentiel SVN enCHOISSSANT Affichage du référentiel dans la liste déroulante Affichage du panneau Fichiers ou en cliquant sur le bouton Fichiers du référentiel dans le panneau Fichiers développé. Cliquez ensuite avec le bouton droit de la souris (Windows) ou en maintainant la touche Contrôle enfoncée (Macintosh) sur le fichier dont vous pouze afficher les versions, puis choisissez Afficher les versions.

3 Dans la boite de dialogue Historique des versions,CHOisissez la ou les versions qui vous interessent, puis effectuez l'une des actions suivantes :

• Cliquez sur Comparator au site local pour comparer la version selectionnée à la version locale du fjichier.
  Note: Vous doivent installer un outil de comparaison de fichiers, provenant d'un éditeur tiers, avant de pouvoir comparer les fichiers. Pour plus d'informations sur les outils de comparaison de fichiers, utilisez un moteur de recherche Web tel que Google pour couvert des outils de « comparaison de fichiers » ou « diff ». Dreamweaver fonctionne avec la plupart des outils tiers.

• Cliquez sur Comparator pour comparer deux versions selectionnées. Cliquez tout en maintainant la touche CTRL enforcée pour selectionner deux versions simultanément.

• Cliquez sur Afficher pour afficher la version sélectionnée. Cette action n'entraine pas le remplacement de la copie locale actuelle du fichier concerné. Vous pouvez enregistrer la version sélectionnée sur votre disque dur comme vous le feriez avec n'importe quel autre fichier.

• Cliquez sur Marquer comme actuel pour faire de la version selectionnée la version la plus recente du refereintiel.

Verrouillage et déverrouillage de fichiers

Le verrouillage d'un fjchier dans le refereintiel SVN permit d'indiquer aux autres utilisateurs que youes ete en train de travailler dessus. Les autres utilisateurs peuvent tous modifier le fjchier localement, mais ils ne pourront valider le fjchier que quand yous laurez deverrouillé. Lorsque you verrouillez un fjchier dans le refereintiel, you verrez que ce fjchier s'accompagne d'une icone representant un cadenas ouvert. Pour les autres utilisateurs, l'icone representation un cadenas fermé.

1 Assurez-vous d'avoir bien définie une connexion SVN.
2 Effectuez l'une des opérations suivantes :

• Affichez les fichiers du référentiel SVN enChoosing Affichage du référentiel dans la liste déroulante Affichage du panneau Fichiers ou en cliquant sur le bouton Fichiers du référentiel dans le panneau Fichiers développé. Cliquez ensuite avec le bouton droit de la souris (Windows) ou en maintainant la touche Contrôle enfoncée (Macintosh) sur le fichier qui vous interesse, puis choisissez Verrouiller ou Déverrouiller.
• Affichez la version locale de vos fichiers SVN dans le panneau Fichiers en besoinant Affichage local dans la liste déroulante Affichage. Si vous travailliez dans le panneau Fichiers développé, l'affichage local est automatiquement disponible. Cliquez ensuite avec le bouton droit de la souris (Windows) ou en maintainant la touche Contrôle enforcée (Macintosh) sur le fichier qui vous intérèse, puis besoinsez Verrouiller ou Déverrouiller.

Ajout d'un nouveau fichier au référentiel

La présence d'un symbole « plus » bleu sur un fichier dans le panneau Fichiers indique que ce fichier n'este pas encore dans le referentiel SVN.

1 Assurez-vous d'avoir bien définie une connexion SVN.
2 Dans le panneau Fichiers, selectionnez le fichier à ajouter au référentiel, puis cliquez sur le bouton Archiver.
3 Assurez-vous que le fichier est selectionné pour une validation dans la boite de dialogue Validation, puis cliquez sur OK.

Déplacement, copie, suppression ou rétablissement de fichiers

• Pour déplacer un fjichier, faites-le glisser vers le dossier de destination de votre site local.

Lorsque vous déplacez un fichier, Dreamweaver le marque, à son nouvel emplacement, au moyen d'un signe Ajouter avec historique, et le marque à l'aide d'un signe Supprimer à son ancien emplacement. Lorsque vous envoyez ces fichiers, celui qui se trouve à l'ancien emplacement disparait.

• Pour copier un fichier, Sélectionnez-le, copiez-le (Edition > Copier) puis collez-le (Edition > Coller) à son nouvel emplacement.

Lorsque vous copiez et collez un fisier, Dreamweaver le marque, à son nouvel emplacement, au moyen d'un signe Ajouter avec historique.

• Pour supprimer un fjichier, Sélectionner-le puis appuyez sur supprimer.

Dreamweaver you permit de supprimer uniquement la version locale du fichier, ou à la fois la version locale et celle sur le serveur SVN. Si vous decide de ne supprimer que la version locale, le fichier sur le serveur SVN n'est pas touché. Si vous decide de supprimer également la version sur le serveur SVN, la version locale est marquee à l'aide d'un signe Supprimer, et vous devez envoyer le fichier pour que la suppression soit effectuee.

Pour rétablir un fjichier copé ou déplace à son emplacement d'origine, cliquez sur le fjichier à l'aide du bouton droit puis choisissez Contrôle de version > Rétablir.

Résolution des conflits entre fichiers

Si vous fichier est en conflit avec un autre fichier sur le serveur, vous pouze le modifier puis le marquer comme étant résolu. Par exemple, si vous tentez d'archiver un fichier qui est en conflit avec les modifications apportées par un autre utilisateur, SVN ne vous permettra pas de valider ce fichier. Vous pouze obtaining la version la plus récente du fichier depuis le référentiel, apporter manuellement des modifications à votre copie de travail, puis marquer votre fichier comme étant résolu de façon à pouvoir le valider.

1 Assurez-vous d'avoir bien définie une connexion SVN.
2 Affichez la version locale de vos fichiers SVN dans le panneau Fichiers en choisisant Affichage local dans la liste déroulante Affichage. Si vous travailliez dans le panneau Fichiers développé, l'affichage local est automatiquement disponible.
3 Cliquez avec le bouton droit de la souris (Windows) ou en Maintenant la touche Contrôle enfoncée (Macintosh) sur le fjichier dont vous pouze résoudre le conflit, puis désissez Contrôle de version > Marquer comme résolu.

Travail hors ligne

Il peut s'avérer utile de travailler hors ligne, de manière à éviter tout accès au référentiel pendant d'autres activités de transfert de fichiers. Dreamweaver se connecte au référentiel SVN des que vous lancez une activités qui exige une connexion (Obtenir les versions les plus récentes, Valider, etc.).

1 Assurez-vous d'avoir bien définie une connexion SVN.
2 Affichez la version locale de vos fichiers SVN dans le panneau Fichiers en choisisant Affichage local dans la liste déroulante Affichage. Si vous travailliez dans le panneau Fichiers développé, l'affichage local est automatiquement disponible.
3 Cliquez avec le bouton droit de la souris (Windows) ou en Maintenant la touche Contrôle enforcée (Macintosh) sur n'importe quel fichier ou dossier du panneau Fichiers, puis choisissez Contrôle de version > Travailler hors ligne.

Nettoyage d'un site SVN local

Cette commande permet de supprimer les verrous des fichiers, de manière à reprendre des activités non terminées. Utilisez cette commande pour supprimer d'anciens verrous si vous receivez des messages d'erreur vous informant que la copie de travail est verrouillée.

1 Assurez-vous d'avoir bien définie une connexion SVN.
2 Affichez la version locale de vos fichiers SVN dans le panneau Fichiers en choisissant Affichage local dans la liste déroulante Affichage. Si vous travailliez dans le panneau Fichiers développé, l'affichage local est automatiquement disponible.
3 Cliquez avec le bouton droit de la souris (Windows) ou en Maintenant la touche Contrôle enfoncée (Macintosh) sur le fichier à nettoyer, puis choisissez Contrôle de version > Nettoyer.

A propos du déplacement de fichiers et de dossiers dans des sites contrôlés par Subversion

Lorsque vous déplacez les versions locales de fischiers ou de dossiers dans un site contrôle par Subversion, vous risquez de creator des problèmes à d'autres utilisateurs qui pourraient se synchroniser avec le référentiel SVN. Par exemple, si vous déplacez un fjichier localement et ne le validez pas dans le référentiel pendant quelques heures, il peut qu'un autre utilisateur tente d'en Obtirner la version la plus récente depuis son ancien emplacement. Veillez donc a tousjours valider les fischiers sur le serveur SVN juste après les avoir déplaces localement.

Les fichiers et les dossiers demeurent sur le serveur jusqu'à ce que vous les supprimiez manuellement. Ainsi, même si vous déplacez un fichier dans un dossier local différent et que vous le validez, son ancienne version reste à l'emplacement précédent sur le serveur. Pour éviter toute confusion, supprimez les anciennes copies des fichiers et dossiers que vous avez déplaces.

Lorsque vous déplacez un fjichier localement et que vous le validez de nouveau sur le serveur SVN, l'histoire des versions du fjichier est perdu.

Synchronisation de fichiers

Synchronisation des fichiers entre le site local et le site distant

Après avoir créé des fichiers sur votre site local et votre site distant, il vous est possible de synchroniser les fichiers entre les deux sites.

Note: Si vous 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, à accuperir, à supprimer ou à ignorer. Par ailleurs, une fois la synchronisation effectuee, Dreamweaver you indique les fichiers qui ont et mis a jour.

More Help topics

"Gestion des transferts de fichiers" on page 93

"Archiver et extraire des fichiers dans un dossier distant" on page 95

"Acquisition de fichiers depuis un serveur distant" on page 90

"Placement de fichiers sur un serveur distant" on page 91

"Comparaison de fichiers pour en chercher les différences" on page 105

Identification des fichiers qui sont plus récents sur le site local ou le site distant, sans effectuer de synchronisation

Procedez de l'une des façons suivantes dans le panneau Fichiers:
- Cliquez sur le menu Options dans le coin supérieur droit puis selectionnez Edition > Sélectionner locaux plus récents ou Edition > Sélectionner distants plus récents.

• Dans le panneau Fichiers, cliquez avec le bouton droit (Windows) ou en maintainant 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.

Affichage d'informations de synchronisation détaillées pour un fichier précis

Dans le panneau Fichiers, cliquez avec le bouton droit de la souris (Windows) ou en maintainant la touche Ctrl enfoncée (Macintosh) sur le fichier au sujet duquel vous voulez obtenir des informations, puis selectionnez Afficher les informations de synchronisation.

Note: Pour que cette fonctionnalité soit disponible, l'option Conserver les informations de synchronisation doit être activée dans la catégorie Distant de la boîte de dialogue Définition du site.

Synchronisation de vos fichiers

1 Dans le panneau Fichiers (Fenetre > Fichiers), selectionnez un site dans le menu (dans lequel le site, le serveur ou le disque dur en cours d'utilisation s'affiche).
2 (Facultatif) Sélectionnez des fichiers ou des dossiers précis, ou passez à l' étape suivant pour synchroniser le site entier.
3 Cliques sur le menu Options dans le coin supérieur droit du panneau Fichiers, puis choisissez Site > Synchroniser.

Vou puez eaglement cliquer sur le bouton Synchroniser dans le haut du panneau Fichiers pour synchroniser les fichiers.

4 Dans le menu Synchroniser, réalise une des opérations suivantes :

• Pour proceeder à la synchronisation du site entier, selectionnez Tout le site nom du site.
• Pour ne synchroniser que les fichiers sélectionnés, sélectionnez Fichiers locaux sélectionnés seulement (ou Fichiers distants sélectionnés seulement si vous avez effectué votre sélection depuis l'affichage Site distant du panneau Fichiers).

5 Cliques sur la direction désirée pour le transfert :

Placer les fichiers plus récents sur hôte distant Télecharge tous les fichiers locaux qui n'existent pas sur le serveur distant ou qui ont été modifiés depuis le dernier téléchargement.

Obtenir les fichiers plus récents depuis l'hôte distant T'échége tous les fichiers distants qui n'existent pas localement ou qui ont été modifiés depuis le dernier téléchargement.

Placer et obtenir les fichiers plus récents Transfère, selon le cas, les versions les plus récentes de tous les fichiers sur le site local ou sur le site distant.

6 Indiquez si les fichiers qui sont presents sur le site de destination mais n'ont pas d'équivalent sur le site d'origine doivent être supprimés. Cette option n'est pas disponible si vous sélectionnez les options d'acquisition et de placement dans le menu de direction.

Si vous avez selectionné Placer les fichiers plus récents sur hôte distant et que vous activez l'option d'effacement, tous les fichiers du site distant qui n'ont pas d'équivalent sur le site local sont supprimés. Si vous avez selectionné Obtenir les fichiers plus récents depuis l'hôte distant et que vous activez l'option d'effacement, tous les fichiers du site local qui n'ont pas d'équivalent sur le site distant sont supprimés.

7 Cliquez sur Aperçu.

Note: Avant de synchroniser les fichiers, vous devez proceder à un aperçu des actions que Dreamweaver va devoir exécuter pour cette tâche.

Si la version la plus récente de chacun des fichiers sélectionnés figure déjà aux deux endroits et que rien n'a besoin d'être supprimé, un message d'advertisement vous signale qu'aucune synchronisation n'est nécessaire. Dans le cas contraire, la boîte de dialogue Synchroniser s'affiche et vous permet de modifier les actions (placer, acquérir, supprimer et annorer) pour ces fichiers avant d'exécuter la synchronisation.

8 Vérifiez les différentes actions à effectuer.

9 Pour modifier l'action pour un fichier particulier, selectionnez-le puis cliquez sur l'une des icones d'action situées en bas de la fenetre d'aperçu.

Comparator L'action Comparator ne fonctionne que si vous avez installé et spécifique un outil de comparaison de fichiers dans Dreamweaver. Si l'icone Action est en grise, l'action correspondante n'est pas disponible.

Marquer les fichiers comme synchronisés Cette option vous permet d'indiquer que le ou les fichiers sélectionnés sont déjà synchronisés.

10 Cliquez sur OK pour synchroniser les fischiers. Vous pouvez afficher ou enregistrer les détails de la synchronisation dans un fisier local.

Comparaison de fichiers pour en chercher les différences

Comparaison des fichiers locaux et distants

Dreamweaver peut utiliser des outils de comparaison de fischiers (également appelés « outils diff ») afin de comparer le code des versions locale et distante du même fischier, deux fischiers distants différents ou deux fischiers locaux différents. La comparaison des versions locale et distante est utile si vous travailliez localement sur un fischier et que vous suspectez que sa copie sur le serveur a été modifiée. Sans quitter Dreamweaver, vous pouvez afficher et fusionner les modifications distances dans votre version locale avant de placer le fischier 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 doivent installer un outil de comparaison de fischiers tiers sur votre système. Pour plus d'informations sur les outils de comparaison de fischiers, utilisez un moteur de recherche Web tel que Google pour trouver des outils de « comparaison de fischiers » ou « diff ». Dreamweaver fonctionne avec la plupart des outils tiers.

Définition d'un outil de comparaison dans Dreamweaver

1 Installez l'outil de comparaison de fichiers sur le même système que Dreamweaver.
2 Dans Dreamweaver, ouvre la boite de dialogue Preférences en scélectionnant Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh), puis scélectionné la catégorie Comparaison de fichiers.
3 Effectuez l'une des opérations suivantes :

• Sous Windows, cliquez sur le bouton Parcourir et selectionnez une application qui compare les fichiers.
• Sur Macintosh, cliquez sur le bouton Parcourir et selectionnez l'outil ou le script qui lance l'outil de comparaison de fichiers dans la ligne de commande (pas l'outil de comparaison de fichiers).

Les outils ou les scripts de lancement se trouvent généralement dans le dossier /usr/bin de votre Macintosh. Par exemple, si vous souhaitez utiliser FileMerge, recherche le dossier /usr/bin et selectionnez opendiff, l'outil qui lance FileMerge.

Le tableau suivant répertorie les outils de comparaison de fichiers courants pour le Macintosh ainsi que l'emplacement de leurs outils ou de leurs scripts de lancement sur votre disque dur :

Si vous utilisez	Sélectionné le fjichier suivant
FileMerge	/usr/bin/opendiff (ou /Developer/usr/bin/opendiff)
BBEdit	/usr/bin/bbdiff
TextWrangler	/usr/bin/twdiff

Note: Le dossier usr est généralement masqué dans le Finder. Cependant, vous pouvez y acceder en utilisant le bouton Parcourir dans Dreamweaver.

Note: Les résultats effectivement affichés dépendent de l'outil diff utilisé. Consultez le guide d'utilisation de votre outil pour comprendre comment interpréter ces résultats.

Comparaison de deux fichiers locaux

Vous pouvez comparer deux fichiers situés à n'importe quel endroit sur votre ordinateur.

1 Dans le panneau Fichiers, appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant avec la souris sur les deux fichiers pour les selectionner.
Pour désir des fichiers se trouvant à l'extérieur de votre site défini, accédez à votre disque local dans le menu gauche contextuel du panneau Fichiers puis sélectionnez-les.
2 Cliquez avec le bouton droit de la souris sur l'un des fichiers selectionnés puis choisissez Compare Local Files (Comparator les fichiers locaux) dans le menu contextuel.

Note: Si vous 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 selectionnés.

L'outil de comparaison de fichiers démarre et compare les deux fichiers.

Comparaison de deux fichiers distants

Voupvez comparer deux fichiers situés sur votre serveur distant. Vousdezéfinirun site Dreamweaver avec des paramétres distants avant de pouvoir effectuer cette tâche.

1 Dans le panneau Fichiers, affichez les fichiers sur le serveur distant enCHOIsant Affichage distant dans le menu deroulant situé a droite.
2 Appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant avec la souris sur les deux fichiers pour les selectionner
3 Cliquez avec le bouton droit de la souris sur l'un des fichiers selectionnés puis choisissez Comparer les fichiers distants dans le menu contextuel.

Note: Si vous 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

Vou puez effectuer une comparaison entre un fichier local et un fichier se trouvant sur votre serveur distant. Pour cela, vous devez d'abord définir un site Dreamweaver avec des paramétres distants.

Dans le panneau Fichiers, cliquez avec le bouton croit de la souris sur un fichier local et choisissez Comparator avec distants dans le menu contextual.

Note: Si vous 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

Vou puez effectuer une comparaison entre un fichier distant et un fichier local. Vous devez définir un site Dreamweaver avec des parametes distants avant d'effectuer cette tâche.

1 Dans le panneau Fichiers, affichez les fichiers sur le serveur distant en choisisant Affichage distant dans le menu déroulant situé à droite.
2 Cliquez avec le bouton droit de la souris sur un fichier dans le panneau et choisissez Comparator avec fichier local dans le menu contextual.

Note: Si vous 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

Vou puez effectuer une comparaison entre un fjchier ouvert dans Dreamweaver et son homologue sur le serveur distant.

Dans la fenêtre de document,CHOISSEF Fichier > Comparer avec distants.

L'util de comparaison de fichiers démarre et compare les deux fichiers.

Vou puez également cliquer avec le bouton droit de la souris sur l'onglet de document situé en haut de la fenêtre de document et désirir Comparer avec distants dans le menu contextualuel.

Comparaison avant le placement de fichiers

Si vous modifiez un fjichier localement et essayez ensuite de le télécharger vers votre serveur distant, Dreamweaver vous avertit si la version distante du fjichier a eté changée. Vous avez la possibilité de comparer les deux fjichiers avant de télécharger le fjichier et d'écraser la version distante.

Avant de commencer, vous doivent installer un outil de comparaison de fichiers sur toute système et le définir dans Dreamweaver.

1 Une fois que vous avez modifie un fjichier dans un site Dreamweaver, placez le fjichier (Site > Placer) sur votre site distant.

Si la version distante du fichier a ete modifie, vous receivez une notification avec la possibite de visualiser les differences.

2 Pour visualiser les différences, cliquez sur le bouton Comparator.

L'outil de comparaison de fichiers démarre et compare les deux fichiers.

Si vous n'avez pas spécifique d'util de comparaison de fichiers, un message vous invite à le faire.

3 Une fois que vous avez revu ou fusionné les changements dans l'outil, vous pouvez passer à l'opération de placement ou l'annuler.

Comparaison de fichiers lors de la synchronisation

Vousspuvezcomperlesversionslocaledevosfichiersaveclesversionsdistanteslorsqueyoussynchronisezles fichiersdevotsiteavecDreamweaver.

Avant de commencer, vous doivent installer un outil de comparaison de fichiers sur votre système et le définir dans Dreamweaver.

1 Cliquez avec le bouton droit de la souris à n'importe quel endroit du panneau Fichiers et selectionnez Synchroniser dans le menu contextual.
2 Complétez les options de la boîte de dialogue Synchroniser les fichier, puis cliquez sur Aperçu.

Une fois que vous avez cliqué sur Aperçu, vous obtenez une liste des fichiers sélectionnés et des actions qui seront effectuees pendant la synchronisation.
3 Dans la liste, selectionné les fichiers que vous souhaitez comparer et cliquez sur le bouton Comparator (l'icone avec les deux petites pages).

Note: Le fichier doit être base sur du texte (fichier HTML ou ColdFusion).

Dreamweaver lance l'util de comparaison qui compare les versions locale et distante de chaque fichier selectionné.

More Help topics

"Synchronisation de fichiers" on page 103

Restauration de fichiers (utilisateurs de Contribute)

Restauration de fichiers (utilisateurs de Contribute)

Dreamweaver enregistre automatiquement plusieurs versions d'un document lorsque la compatibilité Adobe Contribute est activée.

Note: Contribute doit être installé sur le même ordinateur que Dreamweaver.

La restauration des fichiers doit être activée au niveau des paramètres administratifs de Contribute. Pour plus d'informations, voir Administration de Contribute.

1 Cliquez avec le bouton droit de la souris (Windows) ou en maintainant la touche Ctrl enfoncée (Macintosh) sur un fichier dans le panneau Fichiers.
2 Sélectionnez Restaurer la page.
S'il existe une version precedente 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.

More Help topics

"Préparation d'un site à utiliser avec Contribute" on page 61

"Suppression, déplacement ou modification du nom d'un fichier distant sur un site Contribute" on page 63

Voilage de fichiers et de dossiers dans votre site Dreamweaver

A propos du voilage de site

Le voilage vous permet d'exclure des fichiers et dossiers du site de certaines opérations (acquisition et placement, par exemple). Vous pouze également voiler tous les fichiers d'un type précis (JPEG, FLV, XML, etc.) pour les opérations du site. Comme Dreamweaver conserve en mémoire tous les paramètres définis pour chaque site, vous n'avez pas à seLECTIONner le type de fjchier voulu chaque fois que vous travailliez sur un site.

Par exemple, si vous travailliez sur un site de grande taille et que vous ne voulez pas envoyer vos fichiers multimédias tous les jours, vous pouvez utiliser la fonction de voilage pour boiler votre dossier multimédia. Dreamweaver exclura les fichiers de ce dossier de toutes les opérations que vous effectuez sur le site.

Voupe voier des fichiers et des dossiers sur le site distant ou local. Le voilage exclut les fichiers et dossiers voiles 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

Note: Vous pouvez toujours effectuer une opération sur un dossier ou un fichier voilé précis en leLECTIONnant 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.

Note: 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 parlots, car cela pourrait les désynchroniser par rapport à leurs instances.

Activation et désactivation du voilage d'un site

Le voilage vous permet de définir les dossiers, les fichiers et les types de fichiers du site que vous souhaitez exclure de certaines opérations (acquisition et placement, par exemple). Cette option est activée par défaut. Vous pouze 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éactivé, tous les fichiers qui étaient précédemment voilés retrouvent cet état.

Note: Vous pouvez également utiliser l'option Supprimer tous les voles 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étabrir automatiquement le voilage de tous les dossiers et fichiers qui étaientAAParavant voilés ; il vous faut ensuite redéfinir manuellement le voilage de chaque dossier, fichier et type de fichier concerné.

1 Sélectionné un fjichier ou un dossier dans le panneau Fichiers (Fenêtre > Fichiers).
2 Cliquez avec le bouton droit (Windows) ou en Maintenant la touche Ctrl enfoncée (Macintosh), puis procedede l'une des facons suivantes:
- Sélectionnez Voilage > (déselectionnéz l'option pour la désactiver).

• Sélectionnez Voilage > Paramètres pour ouvrir la catégorie Voilage de la boîte de dialogue Configuration du site. Sélectionnez ou déslectionnez, puis activé ou désactivez l'option Voiler les fichiers se terminant avec, selon que vous souhaitez ou non activer le voilage de certains types de:fichier. Saisissez ou supprimez les suffixes de:fichier dans la zone de texte afin d'indiquer le type de:fichier pour lequel activer ou désactiver le voilage.

Voilage et suppression du voilage pour les fichiers et dossiers d'un site

Il est possible de voiler des fichiers et des dossiers spécifiques, mais pas tous les fichiers et dossiers existants ni un site entier. Il est toute fois possible de voiler plusieurs fichiers et dossiers simultanément.

1 Dans le panneau Fichiers (Fenetre > Fichiers), selectionnez un site pour lequel la fonction de voilage est activée.
2 Sélectionnez les dossiers ou fichiers auxquels appliquer un voile ou le supprimer.
3 Cliquez avec le bouton droit de la souris (Windows) ou en maintainant la touche Ctrl enfoncée (Macintosh), puis choisissez Voilage > Voiler ou Voilage > Supprimer le voile dans le menu contextual.

Une ligne rouge est presente ou non sur l'icone du fjichier ou du dossier, pour indiquer qu'il est voilé ou dévoilé.

Note: Vous pouvez toujours effectuer une opération sur un fichier ou un dossier voilé précis en leLECTIONnant dans le panneau Fichiers, puis en effectuant l'opération voulue. Toute opération effectué directement sur un fichier ou un dossier annule le voilage.

Voilage et suppression du voilage de certains types de fichier

Vous pouvez indiquer des types de fjchier à voiler afin que Dreamweaver voile tous les fjchiers se terminant d'une certaine maniere. Ainsi pouvez-vous, par exemple, voiler tous les fjchiers se terminant par l'extension .txt. Les types de fjchier indiqués ne doivent pas nécessairement correspondre à des extensions de fjchier ; il peut s'agir de n'importe quel élément apparaisant à la fin d'un nom de fjchier.

Voilage de certains types de fichier au sein d'un site

1 Dans le panneau Fichiers (Fenetre > Fichiers), selectionnez un site pour lequel la fonction de voilage est activée.
2 Cliquez avec le bouton droit de la souris (Windows) ou en maintainant la touche Ctrl enfoncée (Macintosh), puis selectionné Voilage > Paramétres.
3 Activez l'option Voiler les fichiers se terminant avec, entrez les types de fichier à voiler dans la zone de saisie, puis cliquez sur OK.

Vou puez saisir, par exemple, .jpg afin de voiler tous les fichiers dont le nom se termine par .jpg dans le site.

Pour saisir plusieurs types de fichier, séparez chaque type par un espace ; n'utilisez ni virgule ni point-virgule.

Dans le panneau Fichiers, une ligne rouge apparait sur les fichiers concernés pour indiquer qu'ils sont voilés.

Cerains logiciels creent des fichiers de sauvegarde se terminant par un suffixe donne, tel que .bak. Vous pouvez voiler ces fichiers.

Note: You pouvez toujours effectuer une opération sur un fichier ou un dossier voilé précis en leLECTIONnant dans le panneau Fichiers, puis en effectuant l'opération voulue. Toute opération effectué directement sur un fichier ou un dossier annule le voilage.

Désactivation du voilage de certains types de fichier au sein d'un site

1 Dans le panneau Fichiers (Fenetre > Fichiers), selectionnez un site pour lequel la fonction de voilage est activée.
2 Cliquez avec le bouton droit de la souris (Windows) ou en maintainant la touche Ctrl enfoncée (Macintosh), puis selectionné Voiage > Paramétres.

3 Dans la boite de dialogue Definition du site, onglet Avancé, utilisez l'une des méthodes suivantes :
- Désactivez l'options Voiler les fichiers se terminant avec pour supprimer le voile de tous les types de filier répertoriés dans la zone de texte.
- Dans la zone de texte, supprimez certains types de fichier pour ne supprimer le voile que sur ces types de fichier.
4 Cliquez sur OK.

Les lignes rouges disparaissant des fichiers concernés pour indiquer qu'ils ne sont plus voilés.

Suppression du voilage de tous les fichiers et dossiers

Vou puez supprimer le voile de tous les fichiers et dossiers d'un site, et ce en une seule opération. Comme il est impossible d'annuler ce type d'opération, vous ne pourrez pas rétabir le voile de tous les éléments qui étaientAAParavant voiles. Vous devrez revoiler les éléments un par un.

Si vous souhaitez supprimer provisoirement le voile de tous les dossiers et fichiers et les revoiler par la suite, désactivez le voilage sur le site.

1 Dans le panneau Fichiers (Fenetre > Fichiers), selectionnez un site pour lequel la fonction de voilage est activée.
2 Sélectionnez un fichier ou un dossier quelconque du site.
3 Cliquez avec le bouton droit de la souris (Windows) ou en maintainant la touche Ctrl enfoncée (Macintosh), puis selectionné Voilage> Supprimer tous les voiles.

Note: Cette opération désactive également l'option Voiler les fichiers se terminant avec de la catégorie Voilage de la boîte de dialogue Définition du site.

Les lignes rouges sur les icônes des dossiers et des fichiers disparaisent pour indiquer que tous les fichiers et dossiers du site ne sont plus voilés.

Stockage des informations sur les fichiers dans des Design Notes

A propos des Design Notes

Les Design Notes sont des notes créées pour un fjichier donné. Les Design Notes sont associées au fjichier qu'elles décrivent, mais stockées dans un autre fjichier. Le panneau Fichiers vous permet de voir les fjichiers auxquels sont jointes des Design Notes, car une icône spécifique s'affiche dans la colonne Notes.

Les Design Notes you permittent de conserver des informations supplémentaires sur les documents, telles que des commentaires sur l'etat des fichiers ou le nom des fichiers source des images. Par exemple, si vous copiez un document d'un site dans un autre, vous pouze 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 eté calculé, dont une configuration a eté elaborée ou encore sur les facteurs de marketing qui ont influencé une décidion de production.

Si vous ouvrez un fisquier dans Adobe® Fireworks® ou Flash, puis l'exportez dans un autre format, Fireworks ou Flash enregistre automatiquement le nom du fisquier source d'origine dans un fisquier de Design Notes. Ainsi, si vous ouvrez le fisquier maMaison.png dans Fireworks, puis l'exportez au format GIF en lui attribuant le nom maMaison.gif, Fireworks create un fisquier Design Notes du nom de maMaison.gif.mno. Ce fisquier Design Notes contient le nom du fisquier d'origine, sous la forme d'une URL file: absolue. De ce fait, les Design Notes du fisquier maMaison.gif pourrait containir la ligne suivante :

Au même titre, les Design Notes d'un fichier Flash pourrait contir la ligne suivante :

Note: 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 fisier de Design Notes est automatiquement copie sur le site, en même temps que l'image. Si vous selectionnez cette image dans Dreamweaver et decidez de la modifier à l'aide de Fireworks, ce dernier ouvre directement le fisier d'origine pour vous permettre de le modifier.

More Help topics

"Lancement d'un主编 extrne pour des fichiers multimédias" on page 273

Activation et désactivation des Design Notes pour un site

Les Design Notes sont associées à un fichier mais sont conservées dans un fichier séparé. Les Design Notes vous permettent de conserver des informations supplémentaires sur les documents, telles que des commentaires sur l'état des fichiers ou le nom des fichiers source des images.

L'activation et la désactivation des Design Notes pour un site donné s'effectuant depuis la catégorie Design Notes de la boîte de dialogue Définition du site. Lorsque vous activez les Design Notes, vous pouvez également decide der les partager avec d'autres utilisateurs.

1 Choisissez Site > Gérer les sites.
2 Dans la boîte de dialogue Gérer les sites, Sélectionnez un site puis cliquez sur Modifier.
3 Dans la boîte de dialogue Configuration du site, développement Paramètres avancés, puis Sélectionnez la catégorie Design Notes.
4 Sélectionnez Gérer Design Notes pour activer les Design Notes (déseLECTIONnez cette option pour les désactiver).
5 Si vous souhaitez supprimer tous les fichiers de Design Notes locaux associés au site, cliquez sur Nettoyer puis sur Oui. Si vous voulez supprimer des fichiers Design Notes distants, vous devez le faire manuellement.

Note: La commande Nettoyer Design Notes ne supprime que les fichiers MNO (Design Notes). Elle ne supprime pas le dossier _notes ni le fjichier dwsync.xml qui s'y trouve. Dreamweaver emploie le fjichier dwsync.xml pour gérer les informations relatives à la synchronisation du site.

6 Activez l'option Activer la fonction Tetecharger les Design Notes pour les partager afin de tetecharger les Design Notes associées au site en meme temps que les autres documents, puis cliquez sur OK.

• Si vous activez cette option, vous pouvez partager les Design Notes avec les autres membres de votre équipe. Lorsque vous placez ou acquièrez un fichier, Dreamweaver place ou acquiert automatiquement le fisquier de Design Notes associé.

• Si vous n'activez pas cette option, Dreamweaver conserve les Design Notes localement, mais ne les télécharge pas avec les fischiers. Si vous travailliez seul sur le site, vous pouvez désactiver cette option afin d'améliorer les performances. Les Design Notes ne seront pas transférées sur le site distant lorsque vous archiverez ou placerez vos fischiers. En outre, il vous sera toujours possible d'ajouter et de modifier les Design Notes pour votre site local.

Association de Design Notes à un fichier

Vous pouvez creator un fisier de Design Notes pour chaque document ou modèle de votre site. Vous pouvez également creator des Design Notes pour des applets, des contrôleux ActiveX, des images, du contenu Flash, des objets Shockwave ainsi que des champs d'image figurant dans vos documents.

Note: Si vous ajoutez des Design Notes à un fichier modele, les documents que vous créez à partir du modele n'héritent pas des Design Notes.

1 Effectuez l'une des opérations suivantes :
- Ouvrez le fichier dans la fenêtre du document, puis selectionnez Fichier > Design Notes.
- Dans le panneau Fichiers, cliquez avec le bouton droit de la souris (Windows) ou en maintainant la touche Ctrl enfoncée (Macintosh) sur le fichier, puis selectionnez Design Notes.

Note: Si le fichier se trouve sur un site distant, vous devez d'abord l'extraire ou l'acquérir, puis le sélectionner dans le dossier local.

2 Dans le menu Etat de l'onglet Informations elementaires, selectionnez un etat pour le document.
3 Cliquez sur l'icone de date (au-dessus de la zone de texte Notes) pour insérer la date du jour dans les notes.
4 Entrez des commentaires dans la zone Notes.
5 Activez l'option Afficher à l'ouverture du fichier afin que le fichier de Design Notes apparaisse à chaque ouverture du fichier.
6 Dans l'onglet Toutes les infos, cliquez sur le bouton Plus (+) afin d'ajouter une paire clé/valeur; sélectionnez une paire, puis cliquez sur le bouton Moins (-) pour la supprimer.

Par exemple, vous pouvez creer une clé Auteur (dans la zone Nom), puis lui attribuer la valeur Heidi (dans la zone Valeur).

7 Cliquez sur OK pour enregistrer les notes.

Dreamweaver enregistre les notes au même endroit que le fjchier en cours, dans un dossier portant le nom _notes. Le fjchier porte le nom complet du document de base, suivi de l'extension .mno. Par exemple, si le nom de fjchier du document est index.html, le fjchier de Design Notes associé s'appellera index.html.mno.

More Help topics

"Acquisition et placement de fichiers depuis ou vers votre serveur" on page 89

"Archiver et extraire des fichiers dans un dossier distant" on page 95

Utilisation des Design Notes

Après avoir associé des Design Notes à un fichier, vous pouvez ouvrir le fichier Design Notes, modifier son état ou le supprimer.

Ouverture des Design Notes associées à un fichier

Utilisez l'une des méthodes suivantes pour ouvrir les Design Notes :

• Ouvrez le fichier dans la fenêtre du document, puis selectionnez Fichier > Design Notes.
• Dans le panneau Fichiers, cliquez avec le bouton droit de la souris (Windows) ou en maintainant la touche Ctrl enfoncée (Macintosh) sur le fichier, puis selectionnez Design Notes.
• Dans la colonne Notes du panneau Fichiers, double-cliquez sur l'icone jaune Design Notes.

Note: Pour afficher les icones jaunes des Design Notes,CHOISSEZ Site > Gérer les sites > [nom de votre site] > Modifier > Paramétres avances > Colonnes mode Fichier. Sélectionnez Notes dans la liste du panneau etCHOISSEZ l'options Afficher. Lorsque vous cliquez sur le bouton Développer de la barre d'outils Fichiers pour afficher à la fois le site local et le site distant, cette site local contient une colonne Notes qui affiche une icône de note jaune pour tout fichier contenant une Design Note.

Attribution d'un état de Design Notes personnalisé

1 Ouvrez les Design Notes du fichier ou de l'objet concerné (voir la méthode ci-dessus).
2 Cliquez sur I'onglet Toutes les_infos.
3 Cliquez sur le bouton Plus (+)
4 Dans le champ Nom, tapez état.
5 Dans le champ Valeur, tapez le nom du nouvel état.

S'il existe déjà une valeur d'etat, elle est replacée par la nouvelle.
6 Cliquez sur l'onglet Infoe de base et remarquez que la nouvelle valeur de I'etat apparait dans le menu contextual Etat.

Note: Vous ne pouvez avoir qu'une valeur personnalisée à la fois dans le menu d'etat. Si vous suivez cette procédure une nouvelle fois, Dreamweaver remplace la valeur de l'état saisie la première fois par la nouvelle valeur.

Suppression de votre site des Design Notes non associées

1 Choisissez Site > Gérer les sites.
2 Sélectionnez le site et cliquez sur Modifier.
3 Dans la boite de dialogue Definition du site, selectionnez la catégorie Design Notes dans la liste de gauche.
4 Cliquez sur le bouton Nettoyer.

Dreamweaver you invite alors a verifier que tous les fichiers de Design Notes qui ne sont plus associés a un fisier dans le site doit bien etre supprimés.

Si vous utilisez Dreamweaver pour supprimer un fjichier auquel est associé un fjichier de Design Notes, Dreamweaver supprime également le fjichier de Design Notes. En général, il ne peut donc exister de fjichiers de Design Notes orphelins que si vous supprimez ou renommez un fjichier à l'extérieur de Dreamweaver.

Note: Si vous désactieve l'option Gérer Design Notes avant de cliquer sur Nettoyer, Dreamweaver supprime tous les fichiers de Design Notes du site.

Test de votre site Dreamweaver

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 deTester et de résoudre les problèmes de votre site liéquement 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).

Voudevez you assurer que vos pages ont l'apparce 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 à telécharger. Voupuez également tester l'ensemble de cette site et y regler les problèmes eventuels en efectuant un rapport de site.

Les conseils suivants vous aideront à garantir aux visiteurs de votre site une expérience positive :

1. Assurez-vous que les pages fonctionnent dans les navigateurs visés.

Vos pages doivent être lisibles et fonctionnelles dans les navigateurs qui ne prennt pas en charge les styles, les calques, les plug-ins ou les éléments JavaScript. Pour les pages qui ne s'affichent pas dans des navigateurs anciens, songez à utiliser le comportement Vérifier le navigateur pour rediriger automatiquement les visiteurs vers une autre page.

2. Affichez vos pages dans différents navigateurs et sur différentes plates-formes.

Cela vous donna la possibilité de constater les différences de presentation, de couleur, de taille de police et de format de fenêtre par défaut, autant d' éléments qu'il est impossible de prévoir lors de la vérification dans le navigateur cible.

3. Vérifiez que le site ne contient pas de liens brisés (réparez-les s'il en contient).

Les autres sites étant parfois modifiés et réorganises, il peut arriver que certaines pages vers lesquelles vos liens pointent soient déplacées ou suprimées. Vous pouvez executer un rapport de vérification des liens pour les tester.

4. Contrôlez la taille de vos pages et leur durée de téléchargement.

Pour les pages constituées d'un grand tableau, n'oubliez pas que, sous certains navigateurs, les visiteurs ne voient rien tant que le tableau n'est pas entièrement chargé. Envisagez de fragmenter les grands tableaux ; si c'est impossible, envisagez de placer du contenu, par exemple un message de bienvenue ou une bannière publicitaire, en dehors du tableau, en haut de la page, de manière à ce que les utilisateurs puissant au moins voir ce contenu pendant le chargement du tableau

5. Effectuez quelques rapportes sur le site pour tester et dépanner le site entier.

Voupe recherer sur le site entier d'eventuels problèmes, tels que des documents sans nom, des balises vides ou des balises imbriquées redondantes.

6. Validate votre code pour détecter toute erreur de balise ou de syntaxe.

7. Continue àmettre le site à jour et à en assurer la maintenance après sa publication.

La publication d'un site peut être complie de différentes manières et constitue un processus continu. La définition et l'implémentation d'un système de contrôle de version constituent une partie importante du processus, que ce soit avec les outils intégrés à Dreamweaver ou par le biais d'une application de contrôle de version externe.

8. Consultez les forums de discussion.

Utilisez les forums de discussion Dreamweaver du site Web Adobe, à l'adresse www.adobe.com/go/dreamweaver_newsgroup_fr.

Vous y trouvez de nombreuses et précieuses informations sur les différents navigateurs, plates-formes, etc. Vous pouze également discuter de questions techniques et échanger des informations utiles avec d'autres utilisateurs de Dreamweaver.

Vous trouvez undidacticiel consacre au dépannage des problèmes de publication à l'adresse www.adobe.com/go/vid0164_fr.

More Help topics

"Correction de liens rompus" on page 302

"Test de liens dans Dreamweaver" on page 296

"Application du comportement Vérifier le navigateur" on page 369

"Validation des documents XML" on page 343

"Vérification de la compatibilité du navigateur" on page 342

Didacticiel consacre au dépannage des problèmes de publication

Utilisation des rapportes pour tester votre site

Vouss pouvez executer des rapportes du site sur les attributs de flux de travaux ou HTML. Vous pouze également utiliser la commande Rapports pour vérifier les liens de votre site.

Les rapportssur le déroulement du travail peuvent améliorer la collaboration entre les membres d'une equipe Web. Ces rapportsspermettent de savoir qui a extrait un fjichier, quels fjichiers sont associés à des Design Notes et quels fjichiers ont eté modifiés récemment. Vous pouvez définir davantage les rapportssdes Design Notes en spécifique des paramétres nom/valeur.

Note: Vous doivent avoir défini une connexion à un site distant pour exécuter des rapportés sur le déroulement du travail.

Les rapportss HTML yous permectent de compiler et de generer des rapportss pour plusieurs attributs HTML. Yous pouze contrcler les balises de polices imbriquees combinables, les textes secondaires manquants, les balises imbriquees 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.

Note: Vous pouvez également ajouter différents types de rapport à Dreamweaver via le site Web d'Adobe Dreamweaver Exchange.

More Help topics

"Rapports dans Dreamweaver" on page 22

"Test de liens dans Dreamweaver" on page 296

"Ajout et gestion d'extensions dans Dreamweaver" on page 38

Exécution de rapportes afin de tester un site

1 Choisissez Site > Rapports.

2 Sélectionnez l'objet du rapport dans le menu Rapport sur, puis définissez l'un des types de rapport à exécuter (déroulement du travail ou HTML).

Vous ne pouvez pas exécuter un rapport sur Fichiers sélectionnés dans le site si vous n'avoz pas auparavant sélectionné des fichiers dans le panneau Fichiers.

3 Si vous avez selectionné un rapport de déroulement de travail, cliquez sur Paramètres de rapport. Dans le cas contraire, ignorez cette étape.

Note: Si vous avez selectionné plusieurs rapportés de déroulement de travail, vous devez cliquer sur le bouton Paramétres de rapport pour chaque rapport. Sélectionnez un rapport, cliquez sur Paramétres de rapport et entrez les paramétres; puis reconnénce pour les autres rapportés de déroulement de travail.

Extrait par Cree un rapport qui dresse la liste de tous les documents extraits par un membre specifie de l'equipe. Entrez le nom d'un membre de I'equipe et cliquez sur OK pour revenir a la boite de dialogue Rapports.

Design Notes Crée un rapport qui dresse la liste de l'ensemble des Design Notes pour les documents sélectionnés ou le site. Entrez une ou plusieurs paires nom/valeur, puis sélectionné des valeurs de comparaison dans les menus contextuels correspondants. Cliquez sur OK pour revenir à la boîte de dialogue Rapports.

Modifiés récemment Crée un rapport qui dresse la liste des fichiers qui ont été modifiés durant une période donnée. Entrez les plages de dates et l'emplacement des fichiers à afficher.

4 Si vous avez selectionné un rapport HTML, choisissez l'un des rapportts suivants :

Balises de polices imbriquées combinables Crée un rapport qui dresse la liste de toutes les balises de polices imbriquées pouvant être combinées pour nettoyer le code.

Par exemple, STOP! est inclus dans le rapport.

Texte secondaire manquant Cree un rapport qui dresse la liste de toutes les balises img qui ne possedent pas de texte secondaire (sec/alt).

Le texte secondaire apparait à la place des images dans les navigateurs qui affichent seulement du texte ou configurés pour télécharger les images manuellement. Les lecteurs d'écran lisent le texte secondaire et certains navigateurs affichent du texte secondaire lorsque l'utilisateur passé la souris sur l'image.

Balises redondantes imbriquées Crée un rapport répertioriant les balises à nettoyer.

Par exemple, En Espagne, il pleut principalement dans les plaines est inclus dans le rapport.

Balises vides amovibles Cre un rapport qui dresse la liste de toutes les balises vides pouvant etre suprimées afin de nettoyer le code HTML.

Par exemple, vous pouvez avoir supprimé un élément ou une image en Affichage de code, mais laissé les balises s'appliquant à cet élément.

Documents sans nom Crée un rapport qui dresse la liste de tous les documents sans titre trouvés conformément aux paramètres sélectionnés. Dreamweaver établit un rapport sur tous les documents qui contiennent des titres par défaut, des balises de titre multiples ou des balises de titre manquantes.

5 Cliquez sur Executer pour creer le rapport.

Selon le type de rapport à exécuter, vous pouvez être invité à enregistrer votre fichier, à définir votre site ou à seLECTIONner un dossier (si vous ne l'avez pas déjà fait).

Uneiste deresultats appaaret dans le panneau Rapports du site (dans le groupe de panneaux Résultats).

Utilisation et enregistrement d'un rapport

1 Exécuter un rapport (voir la procédure précédente).

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.

Vou puez trier les résultats par nom de fichier, numero de ligne ou description. Vou pouze égarlement exécuter plusieurs rapportes et garder les différents rapportos ouverts.

• Sélectionnez une ligne quelconque du rapport, puis cliquez sur le bouton Plus d'infos situé à gauche du panneau Rapports du site pour obtenir la description du problème.
• Double-cliquez sur une ligne qualconque du rapport pour afficher le code correspondant dans la fenetre de document.

Note: Si vous vous trouvez en mode Creation, Dreamweaver passes à un affichage à deux volets et indique le problème identifié directement dans le code.

3 Cliquez sur Enregistrer le rapport.

Lorsque you enregistrez un rapport, you pouze l'importer dans un fjchier modèle existant. You pouze alors soit importer le fjchier dans une base de données ou un tableau lui puis l'imprimer, soit l'afficher sur un site Web.

Après avoir exécuté les rapport HS HTML, utilisez la commande Nettoyer HTML pour corriger les erreurs HTML signalées.

Chapter 5: Gestion des actifs et des bibliothèques

A propos des actifs et des bibliothèques

A propos des actifs

Vous pouvez utiliser Adobe® Dreamweaver® CS5 pour assurer le suivis des actifs inclus dans un site, notamment les images, les animations, les couleurs, les scripts et les liens, et pour en afficher un aperçu. Vous pouvez également faire glisser un actif directement pour l'insérer dans une page de votre document actuel.

Vous pouvez obtenir des actifs à partir de différentes sources. Par exemple, vous pouzecerer des actifs dans une application, telle que Adobe® Fireworks® ou Adobe® Flash®, les receiveoir d'un collage, les copier à partir d'un CD-ROM de graphiques ou encore les copier à partir d'un site Web d'images.

Dreamweaver permet également d'acceder à deux types d'actifs spéciaux : les bibliothèques et les modèle. Tous deux sont des actifs liés : lorsque vous modifiez un élément de bibliothèque ou un modele, Dreamweaver met à jour tous les documents qui utilisent ces éléments. Les éléments de bibliothèque représentent généralement de petits actifs de conception, tels que le logo ou les informations de copyright d'un site. Pour définir la conception de zones plus larges, utilisez plutôt un modele.

More Help topics

"A propos des modèles Dreamweaver" on page 407

A propos des éléments de bibliothèque

Une bibliothèque est un fjichier Dreamweaver spécial regroupant un ensemble d'actifs individuels ou de copies d'actifs que vous pouvez placer dans vos pages Web. Les actifs présents dans une bibliothèque portent le nom d'éléments de bibliothèque. Les éléments pouvant être stockés dans une bibliothèque sont notamment les images, les tableaux, lessons et les fichiers créés à l'aide d'Adobe Flash. Vous pouvezmettre à jour automatiquement toutes les pages quiutilisent un élément de bibliothèque chaque fois que vous modifiez cet élément.

Par exemple, supposons que vous construisiez un site de grande taille pour une société qui souhaite qu'un slogan figure sur chaque page. Vous pouvez创建工作 un élément de bibliothèque qui contient le slogan et utiliser cet élément dans chaque page. Si le slogan est modifié, vous pouvez modifier l'élement de bibliothèque etmettre à jour automatiquement chaque page qui l'utilise.

Dreamweaver stocke les éléments de bibliothèque dans un dossier nommé Library, au sein du dossier racine local de chaque site. Chaque site possède sa propre bibliothèque.

Vou puez creer un element 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 ↔eidence à l'elément. Le fichier d'origine doit rester à l'emplacement spécifique pour que l'elément de la bibliothèque fonctionne correctement.

Il peut toutfois etre utile de stocker une image dans un element de bibliothèque. Par exemple, vous pouvez stocker une balise img complète dans un element de bibliothèque, afin de pouvoir modifier facilement le texte alt d'une image, ou même son attribut src, dans l'ensemble du site. N'utilisez pas cette technique pour modifier les attributs de largeur et de hauteur (width et height) d'une image, sauf si vous utilisez également un éditeur d'image pour changer la taille réelle de l'image.

Note: 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 you utilisez un élément de bibliothèque, Dreamweaver insère un lien vers cet élément dans la page Web au lieu d'insérer l'élement lui-même. Cela signifie que Dreamweaver insère une copie du code source HTML pour cet élément dans le document et ajoute un commentaire HTML contenant une référence à l'élement externe d'origine. Il s'agit d'une ↔équence externe qui rend la mise à jour automatique possible.

Lorsque vous creez un élément de bibliothèque qui compte un élément auquel est attaché un comportement Dreamweaver, Dreamweaver copie l'élement et son gestionnaire d'événements (l'attribut qui spécifie l'évenement déclenchant l'action, tel que onClick, onLoad ou onMouseOver, et l'action à appeler lorsque l'évenement se produit) dans le fjichier de l'élement de bibliothèque. Dreamweaver ne copie pas les fonctions JavaScript associées dans l'élement de la bibliothèque. Au lieu de cela, lorsque vous insérez l'élement 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à).

Note: 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'utilise pas de comportement Dreamweaver pour exécuter le code, le code n'est pas conservé dans l'élement de bibliothèque.

La modification des comportements dans les éléments de bibliothèque doit respecter certaines conditions. Les éléments de bibliothèque ne peuvent pas contir de feuilles de style, car le code associé à ces éléments figure dans la section HEAD.

More Help topics

"Modification d'un comportement dans un élément de bibliothèque" on page 131

Utilisation des actifs

Présentation du panneau Actifs

Utilisez le panneau Actifs (Fenetre > Actifs) pour gérer les actifs du site en cours. Le panneau Actifs affiche les actifs du site associés au document actif dans la fenetre du document.

Note: Vous doivent désigné un site local avant de pouvoir afficher des actifs dans le panneau Actifs.

Panneau Actifs avec la liste Site affichée. Les icones de catégorie se trouvent à gauche et la zone d'aperçu se trouve au-dessus de la liste.

Le panneau Actifs vous proposé deux vues différentes des actifs :

LiTe Sitede plesse tous les actifs de vour site, y compris les couleurs et les adresses URL utilisées dans les documents de vour site.

Liste Favoris Présente uniquement les actifs que vous avez sélectionnés de façon explicite.

Pour basculer entre ces deux modes, selectionnez le bouton radio Site ou Favoris situé en haut de la zone d'aperçu. (Ces deux modes d'affichage ne sont pas disponibles pour les catégories Modèles et Bibliothèque.)

Note: La plupart des opérations du panneau Actifs fonctionnent de la même façon dans les deux listedes. Toutefois, il existe quelques tâches qui ne peuvent être réalisées que dans la liste Favoris.

Dans les deux listes, les actifs appartiennent à l'une des catégories suivantes :

Images Fichiers d'image en formats GIF, JPEG ou PNG.

Couleurs Les couleurs utilisées dans les documents et les feuilles de style, y compris les couleurs du texte, des arrêtre-plans et des liens.

URL Les liens externes se trouvant dans les documents du site en cours, y compris FTP, gopher, HTTP, HTTPS, JavaScript, courriel (mailto), et fichiers locaux (file://).

Flash Fichiers dans n'importe quelle version d'Adobe Flash. Seuls les fichiers SWF (fichiers compressés créés avec Flash) s'affichent dans le panneau Actifs. Les fichiers FLA (source Flash) ne s'affichent pas.

Shockwave Fichiers dans n'importe quelle version d'Adobe Shockwave.

Films Fichiers QuickTime ou MPEG.

Scripts Fichiers JavaScript ou VBScript. Les scripts dans les fischiers HTML (platôt que dans des fischiers JavaScript ou VBScript indépendants) n'apparaissent pas dans le panneau Actifs.

Modèle Les mises en forme de pages principales utilisées sur plusieurs pages. La modification d'un modele entraine automatiquement la modification de toutes les pages qui y sont associées.

Eléments de bibliothèque Des éléments que vous utilisez dans plusieurs pages. Lorsque vous modifiez un élément de bibliothèque, toutes les pages qui le contiennent sont mises à jour.

Note: Pour figurer dans le panneau Actifs, un fichier doit appartenir à l'une de ces catégories. Il existe d'autres types de fichiers parfoids appelés actifs, mais qui ne sont pas affichés dans le panneau.

Par défaut, les actifs d'une catégorie donnée sont répertoriés en fonction de leur nom par ordre alphabetique, mais vous pouvez les trier par type et en fonction de plusieurs autres critères. Vous pouvez également afficher un aperçu des actifs et redimensionner les colonnes ainsi que la zone d'aperçu.

More Help topics

"Creation et gestion d'une liste d'actifs favorsis" on page 125

"Utilisation des éléments de bibliothèque" on page 127

Affichage d'un actif dans la zone d'aperçu

Sélectionnez l'actif dans le panneau Actifs.

Par exemple, lorsque vous sélectionnez un actif de type animation, une icône s'affiche dans la zone d'aperçu. Pour visualiser l'animation, cliquez sur le bouton Lecture (le triangle vert) dans l'angle supérieur droit de la zone d'aperçu.

Affichage des actifs d'une catégorie donnée

Cliquesur une icone de catégorie dans le cote gauche du panneau Actifs.

Trides actifs

Cliquez sur une en-tete de colonne.

Par exemple, pour trier la liste des images par type (afin de regrouper toutes les images GIF, puis toutes les images JPEG, etc.), cliquez sur l'en-tête de la colonne Type.

Redimensionnement d'une colonne

Faites glisser la ligne qui sépare deux en-têtes de colonne.

Redimensionnement de la zone d'aperçu

Faites glisser la barre de séparation (entre la zone d'aperçu et la liste des actifs) vers le haut ou vers le bas.

Actualisation du panneau Actifs

La creation de la liste Site peut prendre quelques secondes du fait que Dreamweaver doit d'abord dire le cache du site.

Certaines modifications n'apparaissent pas immédiatement dans le panneau Actifs. Par exemple, lorsque vous ajoutez ou supprimez un actif du site, les modifications ne sont pas répercutées dans le panneau Actifs tant que vous n'actualisez pas la liste Site enclistant 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 doivent recréer le cache du site pouractualiser le panneau Actifs.

Lorsque you supprimez l'unique instance d'une URL ou d'une couleur donnée du site, ou lorsque you enregistrez un nouveau fichier contenant une couleur ou une URL n'avant pas encore eteutilise dans le site, les modifications ne sont repercutees dans le panneau Actifs qu'une fois la liste Site actualisee.

• PouractualiserlaisteSitemanuellement,cliquez surleboutonActualiserlaiste du siteC.Dreamweavercrieele cache du site ou le met a jour si nécessaire.
• Pour actualiser la liste Site et recreer le cache du site manuellement, cliquez avec le bouton droit de la souris (Windows) ou en maintainant la touche Ctrl enfoncée (Macintosh) dans la liste Actifs, puis cliquez sur Actualiser la liste du site.

Ajout d'un actif à un document

Vouss pouvez insérer la plupart des actifs dans un document en les faisant glisser dans la fenetre de document en mode Code ou en mode Creation, ou bien en utilisant le bouton Insérer du panneau. Vous pouze insérer des couleurs et des URL ou les appliquer au texte selectionné en mode Creation Les URL peuvent également être appliquées aux autres éléments, tels que des images, en mode Creation.

1 En mode Creation, placez le point d'insertion à l'endetroit où l'actif doit apparaitre.
2 Dans le panneau Actifs, selectionnez l'un des boutons de catégorie d'actif situés à gauche.

Note: Sélectionnez toute catégorie autre que Modèles. Un modèle est appliqué à un document entier. Il ne peut pas être inséré dans un document.
3 Sélectionnez Site ou Favoris en haut du panneau, puis sélectionnez l'actif.

Il n'existe pas de liste Site ou Favoris pour les éléments de bibliothèque. Omettez cette étape si vous insérez un tel élément.
4 Effectuez l'une des opérations suivantes :

• Faites glisser l'actif depuis le panneau vers le document.

Voupe fai glsser ds scripts dans la zone du contu de l'entete de la fenetre de document. Si cette zone n'est pas visible, choisissez Affichage > Contenu de I'en-tete.

• Sélectionnéz l'actif dans le panneau et cliquez sur Insérer.

Si l'actif inséré est une couleur, elle s'applique au texte qui figure après le point d'insertion.

Application d'une couleur à un texte à l'aide du panneau Actifs

Le panneau Actifs indique les couleurs que vous avez déjà appliquées aux différents éléments du site, tels que du texte, des cordures de tableau, des arrêtre-plans, etc.

1 Sélectionnez du texte dans le document.
2 Dans le panneau Actifs, selectionnez la categorie Couleurs
3 Sélectionnéz la couleur souhaïée puis cliquez sur Appliquer.

More Help topics

"Ajout ou suppression d'actifs favors" on page 125

Application d'une URL à une image ou du texte à l'aide du panneau Actifs

1 Sélectionnéz le texte ou l'image.
2 Dans le panneau Actifs, selectionnez la catégorie URL dans la vue Sites ou Favoris, selon l'endetroit où l'URL est stockée.

Note: Les URL des fichiers de cette site sont stockés, par défaut, dans le mode Sites. La vue Favoris contient les URL que vous avons ajoutés manuellement.

3 Sélectionnez l'URL.
4 Effectuez l'une des opérations suivantes :

• Faites glisser l'URL depuis le panneau vers la sélection dans la fenêtre de document en mode Création.
• Sélectionnez l'URL et cliquez sur Insérer.

Sélection et modification d'actifs

Le panneau Actifs permet de selectionner simultanement plusieurs actifs ; il offre également un moyen rapide de commencer l'edition d'actifs.

More Help topics

"Lancement d'un éditeur externe pour des fichiers multimédias" on page 273

Sélection de plusieurs actifs.

1 Dans le panneau Actifs, selectionnez un actif.
2 Sélectionnez les autres actifs à l'aide de l'une des méthodes suivantes :
- Cliquez en maintainant la touche Maj enforcée pour seLECTIONner une série consécutive d'actifs.
- Cliquez en maintainant la touche Ctrl (Windows) ou la touche Commande (Macintosh) enforcée pour ajouter un actif individuel à la sélection (qu'il soitAdjacent ou non à la selection existante). Cliquez en maintainant la touche Ctrl (Windows) ou la touche Commande (Macintosh) enforcée sur un actif selectionné pour le déslectionner.

Modification d'un actif

Lorsque vous modifiez un actif dans le panneau Actifs, le comportement varie en fonction du type d'actif. Pour certains actifs, tels que les images, vous utilisez un éditeur externe qui s'ouvre automatiquement si vous avez défini un éditeur pour ce type d'actif. Vous ne pouvez modifier les couleurs et les URL que dans la liste Favoris. Lorsque vous modifiez des modèles et des éléments de bibliothèque, vous effectuez les modifications dans Dreamweaver.

1 Dans le panneau Actifs, procedez de l'une des manieres suivantes :
Double-cliquez sur l'actif.
- Sélectionnez l'actif, puis cliquez sur le bouton Modifier

Note: Si l'actif doit être modifié dans un éditeur externe et qu'aucun éditeur ne s'ouvre automatiquement, Sélectionnez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh), Sélectionnez la catégorie Types de fichiers/Editeurs, et assurez-vous qu'un éditeur externe est définir pour ce type d'actif.

2 Apportez les modifications voulues.
3 Lorsque vous avez terminé,procedede l'une des facons suivantes:

• Si l'actif est basé sur un fichier (tot object autre qu'une couleur ou une URL), enregistrez-le (via l'éditeur que vous utilisez), puis fermez-le.
• Si l'actif est une URL, cliquez sur OK dans la boite de dialogue Modifier l'URL.

Note: Si l'actif est une couleur, le sélecteur de couleur se ferme automatiquement lorsque vous Sélectionnez une couleur. Pour fermer le sélecteur de couleur sans Sélectionner de couleur, appuyez sur la touche Echap.

Réutilisation d'actifs dans un autre site

Le panneau Actifs affiche tous les actifs (de types reconnus) dans le site actuel. Pour utiliser un actif du site actuel dans un autre site, il est nécessaire de le copier. Vous pouvez copier un actif individuel, un ensemble d'actifs individuels ou un dossier Favoris entier en une seule opération.

Vous devrez peut-etre 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.

Note: Le panneau Fichiers peut afficher un site différent de celui presente par le panneau Actifs, car le panneau Actifs est associé au document actif.

Localisation d'un fichier d'actif dans le panneau Fichiers

1 Dans le panneau Actifs, selectionnez la catégorie de l'actif que vous recherchez.
2 Cliquez avec le bouton droit (Windows) ou en Maintenant la touche Contrôle enfoncée (Macintosh) sur l'icone ou le nom de l'actif dans le panneau Actifs, puis choisissez l'options Reperer dans le site dans le menu contextual.

Note: L'option Repérer dans le site n'est pas disponible pour les couleurs et les URL, qui ne correspondent pas à des fichiers dans le site.

Le panneau Fichiers s'ouvre, avec le fichier d'actif selectionné. La commande Repérer dans le site repère le fichier correspondant à l'actif lui-même, et non les fichiers qui utilisent cet actif.

CopiedactifsdepuislepanneauActifsversunautresite

1 Dans le panneau Actifs, selectionnez la catégorie de l'actif que vous souhaitez copier.
2 Cliquez avec le bouton droit de la souris (Windows) ou en Maintenant la touche Contrôle enfoncée (Macintosh) sur un ou plusieurs actifs dans la liste Site ou Favoris, selectionnez Copier dans le site, puis selectionnez le nom du site cible dans le sous-menu qui repertorie les sites que vous avez définis.

Note: Dans la liste Favoris, vous pouvez copier un dossier Favoris ainsi que des actifs individuels.

Les actifs sont copés dans leurs emplacements correspondants dans le site cible. Dreamweaver create de nouveaux dossiers dans la hierarchie du site cible en fonction des besoin. Les actifs sont également ajoutés à la liste Favoris du site cible.

Note: Si l'actif que vous avez copie est une couleur ou une URL, il s'affiche uniquement dans la liste Favoris du site cible. Du fait que les couleurs et les URL ne correspondent pas à des fichiers, il n'existe aucun fichier à copier dans l'autre site.

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

Gestion des actifs favoris

La liste complète de tous les actifs reconnus peut devenir enconnree pour certains sites volumineux. Vous pouvez ajouter des actifs féquement utilisés à une liste Favoris, grouper des actifs connexes, leur attribuer des surnoms pour mémoriser leur object et les retrouver aisément dans le panneau Actifs.

Note: Les actifs favoris ne sont pas stockés en tant que fichiers distincts sur le disque. Ils font réference aux actifs de la liste Site. Dreamweaver conserve la trace des actifs de la liste Site à afficher dans la liste Favoris.

La plupart des opérations du panneau Actifs sont identiques dans les listes Favoris et Site. Toutefois, il existe plusieurs tâches que vous pouvez réaliser uniquement dans la liste Favoris.

Ajout ou suppression d'actifs favoris

Il existe plusieurs méthodes pour ajouter des actifs à la liste Favoris du site dans le panneau Actifs.

L'ajout d'une couleur ou d'une URL à la liste Favoris nécessite une étape supplémentaire. Vous ne pouvez pas ajouter de nouvelles couleurs ou URL à la liste Site. Cette dernière contient uniquement les actifs déjà utilisés dans le site.

Note: Il n'este pas de liste Favoris pour les modèles et les éléments de bibliothèque.

More Help topics

"Présentation du panneau Actifs" on page 120

"Utilisation du selecteur de couleur" on page 229

Ajout d'actifs à la liste Favoris

Effectuez l'une des opérations suivantes :

• Sélectionnez un ou plusieurs actifs dans la liste Site du panneau Actifs, puis cliquez sur le bouton Ajouter aux favoris+
• Sélectionnez un ou plusieurs actifs dans la liste Site du panneau Actifs, cliquez avec le bouton droit (Windows) ou en maintainant la touche Ctrl enforcée (Macintosh), puis sélectionné Ajouter aux favors.
• Sélectionnez un ou plusieurs fischiers dans le panneau Fichiers, cliquez avec le bouton droit (Windows) ou en maintainant la touche Ctrl enfoncée (Macintosh), puis selectionnez Ajouter aux favors. Dreamweaver ignore les fischiers n'appartenant pas à une catégorie du panneau Actifs.
• Cliquez avec le bouton droit (Windows) ou en maintainant la touche Contrôle enforcée (Macintosh) sur un élément dans la fenêtre de document en mode Création, puis choisissez l'options du menu contextuel pour ajouter l'élement à une catégorie Favoris.

Le menu contextual pour le texte contient soit l'option Ajouter aux favors Couleur, soit l'option Ajouter aux favoris URL, selon qu'un lien est attaché au texte. Vous pouvez ajouter uniquement les éléments qui correspondent aux catégories du panneau Actifs.

Ajout d'une nouvelle couleur ou une nouvelle URL à la liste Favoris

1 Dans le panneau Actifs, selectionnéz la catégorie Couleurs ou URL.
2 Sélectionnéz l'options Favoris en haut du panneau.
3 Cliques sur le bouton Nouvelle couleur ou Nouvelle URL.
4 Effectuez l'une des opérations suivantes :

• Sélectionnez une couleur dans le sélecteur de couleur et donnez-lui un surnom si vous le souhaitez.

Pour fermer le sélecteur de couleur sans selectionner de couleur, appuyez sur la touche Echap ou cliquez sur la barre de couleur grise en haut du sélecteur de couleur.

• Entrez une URL et un surnom dans la boîte de dialogue Ajouter URL, puis cliquez sur OK.

Suppression d'actifs de la liste Favoris

1 Dans le panneau Actifs, Sélectionnéz l'options 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 favors

Les actifs sont supprimés de la liste Favoris, mais pas de la liste Site. Si vous supprimez un dossier Favoris, ce dernier est supprimé, ainsi que tout son contenu.

Création d'un surnom pour un actif favori

Vou puez attribuer des surnoms (par exemple, CouleurArrierePlanPage au lieu de #999900) uniquely aux actifs de la liste Favoris. La liste Site retient leur nom de fichier reel (ou leur valeur, dans le cas de couleurs et d'URL).

1 Dans le panneau Actifs, (Fenetre > Actifs), selectionnez la categorie qui contient votre actif.

2 Sélectionnéz l'options Favoris en haut du panneau.
3 Effectuez l'une des opérations suivantes :

• Cliquez avec le bouton droit de la souris (Windows) ou en maintainant la touche Ctrl enfoncée (Macintosh) sur le nom ou l'icone de l'actif dans le panneau Actifs, puis selectionnéz Modifier le surnom.
• Cliquez une fois sur le nom de l'actif, effectuez une pause, puis cliquez à nouveau. (Ne double-cliquez pas, car cela ouvrirait l'élement pour modification.)
  4 Tapez un surnom pour l'actif, puis appuyez sur la touche Entrée (Windows) ou Retour (Macintosh).

More Help topics

"Présentation du panneau Actifs" on page 120

Regroupement d'actifs dans un dossier Favoris

Le fait de placer un actif dans un dossier Favoris ne modifie pas l'emplacement du fichier d'actif sur le disque.

1 Dans le panneau Actifs, selectionnez l'option Favoris en haut du panneau.
2 Cliquez sur le bouton Nouveau dossier Favoris
3 Tapez un nom pour le dossier, puis appuyez sur la touche Entrée (Windows) ou Retour (Macintosh).
4 Faites glisser les actifs vers le dossier.

Utilisation des éléments de bibliothèque

Création d'un élément de bibliothèque

Les éléments de bibliothèque sont des éléments que vous souhaitez réutiliser oumettre à jour féquèment dans l'ensemble de votre site Web.

More Help topics

"A propos des éléments de bibliothèque" on page 119

Créer un élément de bibliothèque basé sur une sélection

1 Dans la fenêtre de document, Sélectionnez une partie d'un document que vous souhaitez enregistrer comme élément de la bibliothèque.
2 Effectuez l'une des opérations suivantes :

• Faites glisser la sélection sur la catégorie Bibliothèque
• Cliquez sur le bouton Nouvel élément de bibliothèque en bas de la catégorie Bibliothèque.
• Sélectionnez Modifier > Bibliothèque > Ajouter un objet dans la bibliothèque.
  3 Tapez un nom pour le nouvel élément de la bibliothèque, puis appuyez sur la touche Entrée (Windows) ou Retour (Macintosh).

Dreamweaver enregistre chaque élément de bibliothèque dans un fisier séparé (avec l'extension de fisier .lbi), dans le dossier Library du dossier racine local du site.

Creation d'un élément de bibliothèque vide

1 Vérifiez que rien n'est sélectionné dans la fenêtre de document.

Si un élément est seLECTIONné, il est placé dans le nouvel élément de bibliothèque.

2 Dans le panneau Actifs, selectionnez la categorie Bibliothèque [1].
3 Cliquez sur le bouton Nouvel élément de bibliothèque en bas du panneau.
4 Sélectionnez l'élement et entrez son nom, puis appuyez sur Entrée (Windows) ou sur Retour (Macintosh).

Insertion d'un élément de bibliothèque dans un document

Lorsque vous ajoutez un élément de bibliothèque à une page, le contenu réel est inséré dans le document avec une reférence à l'élement de bibliothèque.

1 Placez le point d'insertion dans la fenetre de document.
2 Dans le panneau Actifs, selectionnez la categorie Bibliothèque [1].
3 Effectuez l'une des opérations suivantes :

• Faites glisser un élément de bibliothèque du panneau Actifs vers la fenêtre de document.

Pour insérer le contenu d'un élément de bibliothèque sans inclure de référence à l'élement dans le document, appuyez sur la touche Ctrl (Windows) ou Option (Macintosh) tout en faisant glisser l'élement hors du panneau Actifs. Lorsque vous insérez un élément de cette façon, vous pouvez le modifier dans le document, mais le document ne sera pas mis à jour lorsque vous mettrez à jour les pages qui utilisent cet élément.
- Sélectionnez un élément de bibliothèque et cliquez sur Insérer.

Modification des éléments de bibliothèque et mise à jour des documents

Lorsque you modifie un élément de bibliothèque, vous pouvez désirer demettre à jour tous les documents qui utilisent cet élément. Si vous choisissez de ne pas les mettre à jour, les documents restent associés à l'élement de bibliothèque. Il est always possible de les mettre à jour ultérieurement.

Vou puez renomer des elements pour rompre leur lien avec des documents ou des modles, supprimer des elements de la bibliothèque du site et recrérer un élément de bibliothèque manquant.

Note: Le panneau Styles CSS n'est pas disponible lorsque vous editez un élément de bibliothèque étant donné que ces derniers peuvent uniquement contérer des éléments body et que le code CSS (feuille de style en cascade) est inséré dans la section head d'un document. La boite de dialogue Propriétés de la page est également indisponible : en effet, un élément de bibliothèque ne peut pas composer de balise body ni d'attributs de cette balise.

Modification d'un élément de bibliothèque

1 Dans le panneau Actifs, selectionnez la categorie Bibliothèque
2 Sélectionnéz un élément de bibliothèque.
3 Vous pouvez soit cliquer sur le bouton Modifier , soit double-cliquer sur l'objet de bibliothèque.

Dreamweaver ouvre une nouvelle fenêtre, similaire à la fenêtre de document, permettant de modifier l'objet de bibliothèque. L'arrière-plan gris indique que vous étres en train de modifier un élément de bibliothèque et non un document.

4 Apportez les modifications et enregistrrez-les.

5 Indiquez si vous souhaitezmettrea jour les documents du site local qui utilisent l'ellement de bibliothèque modifie. Sélectionnez Mettre à jour pour effectuer une mise à jour immédiate. Si vous sélectionnez Ne pas mettre à jour, les documents ne seront pas mis à jour à moins que vous ne sélectionniez Modifier > Bibliothèque > Mettre à jour la page en cours ou Mettre à jour les pages.

Mise à jour du document actif afin d'utiliser la version actuelle de tous les éléments de bibliothèque

Choisissez Modifier > Modèles > Mettre à jour la page en cours.

Mise à jour du site entier ou de tous les documents utilisant un élément de bibliothèque particulier

1 Choisissez Modifier > Bibliothèque > Mettre à jour les pages.
2 Dans le menu dérouulant Regarder dans, indiquez ce qui doit être mis à jour :

• Pourmettreàjourtouteslespagesdusiteselectionneafindutiliserla versionactuellede touslesellementsdbibliothèque,selectionneeSitedentier,puisselectionnee le nom du site dans le menu déroulantadjacent.
• Pourmettrea jour toutes les pages du site en cours quiutilisent l'elément de bibliothèque,selectionnez Fichiers utilisant,puis selectionnee un nom d'elément de bibliothèque dans le menu deroulant adjacent.
  3 Sous Mettre à jour, assurez-vous que l'option Éléments de bibliothèque est activée.

Pourmettrelesmodulesa jour en même temps,selectionnezModulesegalement.

4 Cliquez sur Demarrer.

Dreamweaver met à jour les fichiers comme indiqué. Si vous avez scélectionné l'option Afficher le journal,

Dreamweaver génére un rapport qui indique si les fichiers ont ete mis a jour correctement et qui contient egalement d'autres informations.

Modification du nom d'un élément de bibliothèque

1 Dans le panneau Actifs, selectionnez la categorie Bibliothèque
2 Cliques sur l'objet de bibliothèque, attendez, puis cliquez de nouveau. (Ne double-cliquez pas, car cela ouvrait l'objet pour modification.)
3 Entrez un nouveau nom.
4 Cliquez ailleurs ou appuyez sur Entrée (Windows) ou sur Retour (Macintosh).
5 indique si vous souhaitez metre à jour les documents qui utilisent l'element enCHOIsissant soit Mettre à jour, soit Ne pas metre à jour.

Suppression d'un élément d'une bibliothèque

Lorsque vous supprimez un élément de bibliothèque, Dreamweaver supprime l'élement de la bibliothèque mais ne modifie pas le contenu des documents qui l'utilisent.

1 Dans le panneau Actifs, selectionnez la categorie Bibliothèque
2 Sélectionnéz l'objet de bibliothèque.
3 Cliquez sur le bouton Supprimer ou appuyez sur la touche Suppr, puis confirmez l'opération.

Important: Si vous supprimez un élément de bibliothèque, vous ne pourrez pas utiliser Annuler pour le recuperer. Vous pouvez toute fois le recréer.

Récrétation d'un élément de bibliothèque manquant ou supprimé

1 Sélectionnez une instance de l'objet dans un de vos documents.
2 Cliquez sur le bouton Creer à nouveau de l'inspecteur Propriétés (Fenêtre > Propriétés).

Personnalisation de la mise en surbrillance des éléments de bibliothèque

Vouss pouvez personnaliser la couleur de surbrillance des éléments de bibliothèque et afficher ou masquer la surbrillance en définissant des préférences de surbrillance.

More Help topics

"Utilisation du selecteur de couleur" on page 229

Modification de la couleur de surbrillance des éléments de bibliothèque

1 Choisissez Edition > Preférences (Windows) ou Dreamweaver > Préférences (Macintosh).
2 Sélectionnez la catégorie Surbrillance dans la liste située à gauche dans la boîte de dialogue Préférences.
3 Cliquez dans la case de couleur Elements de la bibliothèque et sélectionnez une couleur de surbrillance à l'aide du sélecteur de couleurs (ou entrez la valeur hexadécimale correspondant à la couleur de surbrillance dans la zone de texte).
4 Activez l'option Afficher pour afficher la couleur de surbrillance dans la fenetre de document.
5 Cliquez sur OK.

Affichage ou masquage de la mise en surbrillance dans la fenêtre de document

Pour afficher la mise en surbrillance, selectionnez Affichage > Assistances visuelles > Éléments invisibles. Pour masquer la mise en surbrillance, déslectionné l'option Éléments invisibles.

Modification des propriétés d'un élément de bibliothèque

L'inspecteur Propriétés vous permet d'ouvrir un élément de bibliothèque pour le modifier, détacher un élément sélectionné de son fichier source ou replacer un élément par celui sélectionné actuellement.

1 Sélectionnéz un élément de bibliothèque dans un document.
2 Sélectionnéz l'une des options suivantes dans l'inspecteur Propriétés (Fenêtre > Propriétés):

Src Indique le nom de fichier et l'emplacement du fichier source de l'elément de la bibliothèque. Vous ne pouvez pas modifier ces informations.

Ouvrir Ouvre le fjichier source de l'elément de bibliothèque pour modification. Cela revient à selectionner l'élément dans le panneau Actifs et à cliquer sur le bouton Modifier.

Detacher de l'original Brise le lien entre l'objet de bibliothèque sélectionné et son fichier source. Vous pouvez modifier l'objet détached dans le document, mais il ne s'agit plus d'un objetif de bibliothèque et il n'est plus modifié lorsque vous modifiez l'objet d'origine.

Créer à nouveau Remplace l'élement d'origine par la sélection en cours. Utilisez cette option pour recréer les éléments de bibliothèque si l'élement de bibliothèque d'origine manque ou a été accidentellement supprimé.

Autorisation de la modification d'éléments de bibliothèque dans un document

Si vous avez inséré un élément de bibliothèque dans un document et que vous désirez modifier celui-ci uniquement sur cette page, vous doivent briser le lien qui existe entre cet élément et la bibliothèque. Lorsqu'une instance d'élement de bibliothèque a été rendue modifiable, elle n'est plus mise à jour quand l'élement de bibliothèque est modifié.

1 Sélectionnez un élément de la bibliothèque dans le document actif.
2 Dans l'inspecteur Propriétés, cliquez sur Detacher de l'original (Fenêtre > Propriétés).

Modification d'un comportement dans un élément de bibliothèque

Pour modifier un comportement dans un élément de bibliothèque, vous doivent tout d'abord insérer l'élement dans un document, puis le rendre modifiable dans ce document. Une fois les changements apportés, vous pouvez recréer l'élement de bibliothèque en remplaçant l'élement de la bibliothèque par l'élement modifié de votre document.

1 Ouvrez un document contenant l'objet 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'objet de bibliothèque et cliquez sur Detacher de l'original dans linspecteur Propriétés (Fenêtre > Propriétés).
3 Sélectionnez l'élement auquel est attaché le comportement.
4 Dans le volet Comportements (Fenetre > Comportements), double-cliquez sur l'action que vous poulez modifier.
5 Dans la boite de dialogue qui s'affiche, effectuez vos modifications et cliquez sur OK.
6 Dans le panneau Actifs, selectionnez la categorie Bibliothèque
7 Notez précisé le nom et la casse de l'élement de bibliothèque d'origine ; sélectionnez-le, puis cliquez sur le bouton Supprimer.
8 Dans la fenêtre de document, Sélectionnez tous les éléments qui constituent l'objet de bibliothèque.

Veillez à selectionner exactement les mêmes éléments que ceux qui se trouvaient dans l'objet 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'élement que vous avez supprimé en respectant l'orthographe et la casse.
10 Pourmettrea jourl'elémentde bibliothèque dans les autres documents de voitr site,choisissez Modifier > Bibliothèque > Mettre a jour les pages.
11 Dans le menu déroulant Regarder dans, Sélectionnez Fichiers utilisant.
12 Dans le menu déroulant adjacent, Sélectionné le nom de l'élement de bibliothèque que vous venez de créé.
13 Sous Mettre à jour, vérifie que l'option Éléments de bibliothèque est seLECTIONnée, puis cliquez sur Demarrer.
14 Une fois les mises à jour terminées, cliquez sur Fermer.

More Help topics

"Utilisation des comportements JavaScript" on page 353

Chapter 6: Création de pages avec CSS

Description des feuilles de style en cascade

A propos des feuilles de style en cascade

Les feuilles de style en cascade (CSS) regroupent des règles de formatting qui déterminent l'aspect du contenu d'une page Web. Quand vous utilise des styles CSS pourmettre une page en forme, vous séparez le contenu de la presentation. Le contenu de votre page (le code HTML) resides dans le fjichier HTML, tandis que les règles CSS qui définissent la presentation du code résident dans un autre fjichier (une feuille de style externe) ou dans une autre partie du document HTML (généralement dans la section head). La séparation du contenu et de la presentation facilitite considérablement la gestion de l'aspect de votre site à partir d'un point central car vous n'avez pas besoin demettre à jour les propriétés de toutes les pages chaque fois que vous souhaitez apporter une modification. La séparation du contenu et de la presentation se traduit également par un code HTML simplifié et mistroux structure qui permet de raccourcir les temps de chargement pour les navigateurs, et elle simplifie la navigation pour les personnes ayant des problèmes d'accèsibilité (par exemple, quiutilisent des lecteurs d'écran).

CSS you offe a plus grande souplesse et une plus grande maitrise de l'aspect de voite page. Les feuilles de style CSS you permectent de controler de nombreuses proprietes de texte, notamment les polices de caractertres et les tailles de police, les styles gras, italique, soulignement et les ombres du texte, la couleur du texe et la couleur d'arriere-plan, la couleur des liens et le soulignement des liens, etc. En utilisant CSS pour controler vos polices de caractertres, vous you assurez d'un traitement plus cohorent de la mise en page et de I'aspect de voite page dans differents navigateurs.

Outre le formatage du texte, CSS permet de:gérer le format et le positionnement des blocs d'éléments d'une page Web. Un élément de niveau bloc est un contenu autonome, généralement séparé par une nouvelle ligne dans le code HTML, et formaté visuellement comme un bloc. Par exemple, les balises h1, les balises p et les balises div produit toutes des éléments de niveau bloc sur une page Web. Vous pouvez définir des marges et des cordures pour les éléments de niveau bloc, les placer dans un emplacement spécifique, leur ajouter une couleur d'arrière-plan, faire flotter du texte autour d'eux, etc. C'est essentiellement en manipulant des éléments de niveau bloc que vous réalisiez des mises en page avec CSS.

More Help topics

"Utilisation des balises div" on page 169

"Mise en forme des pages avec CSS" on page 162

Didacticiel de description des feuilles CSS

A propos des régles CSS

Une rècle de formatage CSS se compose de deux entités : le sélecteur et la déclaration (ou dans la plupart des cas, un bloc de déclarations). Le sélecteur est un terme (tel que p, h1, un nom de classe ou un identifient) qui identifie l'élément mis en forme tandis que le bloc de déclaration définit quels sont les propriétés de style. Dans l'exemple suivant, h1 correspond au sélecteur tandis que tout ce qui est placé entre les crochets ({}) correspond à la déclaration :

h1{ font-size:16pixels; font-family:Helvetica; font-weight:bold; } 

La déclaration est composée de deux entités : la propriété (par exemple, font-family) et la valeur (par exemple, Helvetica). Dans la règle CSS précédente, un style particulier a été créé pour les balises h1 : le texte de toutes les balises H1 liées à ce style sera associé à une police Helvetica, d'une taille de 16 pixels et en gras.

Le style (qui est défini par une rège ou par un groupe de règles) se trouve dans un emplacement distinct de celui du formatage du texte réel, généralement dans une feuille de style externe ou dans la section head du document HTML. Ainsi, une rècle concernant les balises n1 peut s'appliquer à de nombreuses balises à la fois (et dans le cas de feuilles de style externes, la rècle peut s'appliquer à de nombreuses balises à la fois dans un grand nombre de pages différentes). De cette façon, CSS offre une capacité de mise à jour extrémement aisée Lorsque vous mettez à jour une rècle CSS dans un emplacement, le formatage de tous les éléments qui utilisent le style défini est automatiquement mise à jour en fonction du nouveau style.

You pouvez définir les types de styles suivants dans Dreamweaver :

• Les styles de classe vous permettent d'appliquer des propriétés de style à tout élément de la page.
• Les styles appliqués aux balises HTML redéfinissent le formatage d'une balise spécifique, telle que h1. Lorsque vous creez 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 avances redéfinissent le formatage pour une combinaison particulière d' éléments ou pour d'autres formes du sélecteur admises par CSS (par exemple, le sélecteur td h2 s'applique chaque fois qu'un en-tête h2 apparait dans une cellule de tableau). Les styles avances peuvent également redéfinir le formatage pour des balises qui contiennent un attribut id (identifient) (par exemple, les styles définis par #myStyle s'appliquent à toutes les balises qui contiennent la paire valeur-attribut id="myStyle").

Les règles CSS peuvent se couver aux emplacements suivants :

Feuilles de style CSS externes Ensembles de règes CSS enregistrées dans un fjichier.css externe distinct (pas dans un fjichier HTML). Ce fjichier est lié à une ou plusieurs pages d'un site Web à l'aide d'un lien ou d'une règle @import situation dans la section head d'un document.

Feuilles de style CSS internes (ou imbriquées) Ensembles de règles CSS inclues dans une balise style de la section head d'un document HTML.

Styles en ligne Définis dans des instances spécifique de balises dans un document HTML. L'utilisation de styles en ligne n'est pas recommandée.

Dreamweaver reconnait les styles définis dans des documents existants, pour peu qu'ils soient conformes aux recommendations des feuilles de style CSS. Dreamweaver restitue également la plupart des styles appliqués directement en mode Conception. Toutefois, la prévisualisation d'un document dans une fenêtre de navigateur vous permit d'obtenir le rendu direct le plus précis de la page. Certains styles CSS s'affichent différemment dans Microsoft Internet Explorer, Netscape Navigator, Opera, Apple Safari ou d'autres navigateurs, et certains ne sont pas encore pris en charge par chaque navigateur.

Pour afficher le guide de reférence CSS d'O'Reilly inclus dans Dreamweaver,CHOISSEZ Aide > Référence et seLECTIONnez O'Reilly - Référence CSS dans le menu déroulant du panneau Référence.

More Help topics

"Application, suppression ou changement du nom de styles de classe CSS" on page 151

A propos des styles en cascade

Le terme en cascade fait réference à la façon dont un navigateur affiche finalement les styles pour des éléments spécifiques d'une page Web. Trois sources sont responsables des styles visibles sur une page Web : la feuille de style créé par l'auteur de la page, les événuelles sélections de style personnalisées de l'utiliser, et les styles par défaut du navigateur. Les sections précédentes expliquent la création de styles pour une page Web par l'auteur de la page Web et de la feuille de style qui y est associée. Toutefois, les navigateurs possèdent eux aussi des feuilles de style par défaut, qui déterminent la restitution des pages Web. En outre, les utilisateurs peuvent personnaliser leurs navigateurs en effectuant des sélections qui déterminent l'affichage des pages Web. L'apparce finale d'une page Web est le résultat de la combinaison (cascadre) des règles de ces trois sources, qui permet de restituer la page Web de manière optimale.

Ce concept va été illustré par une balise courante, la balise de paragraphe (

). Par défaut, les navigateurs comportent des feuilles de style qui définissent la police et la taille de police du texte des paragraphs, c'est-à-dire le texte placé entre balises

dans le code HTML. Ainsi, dans Internet Explorer, tout le texte du corps, y compris celui des paragraphs, s'affiche par défaut dans la police Times New Roman de taille moyenne.

Toutefois, si vous étés l'auteur d'une page Web, vous pouze créé une feuille de style qui remplace le style par défaut du navigateur pour ce qui est de la police et de la taille de police. Par exemple, vous pouze créé la règle suivante dans votre feuille de style :

p{ font-family: Arial; font-size: small; } 

Lorsqu'un utilisateur charge la page, les paramètres de police du paragraphe et de taille de police que vous, auteur, avez définis, remplacent les paramètres par défaut du navigateur en la matière.

Les utilisateurs peuvent effectuer des sélections pour personneliser l'affichage du navigateur selon leurs attentes. Par exemple, dans Internet Explorer, l'utilitaire peutCHOIsir Affichage > Taille du texte > La plus grande, de maniere a agrandir la police et la rendre plus lisible. En fin de compte (du moins, dans ce cas), la selection de l'utilitaire remplace à la fois les styles par défaut du navigateur pour la taille de police par défaut dans les paragraphs, et les styles de pargraphe créé par l'auteur de la page Web.

L'héritage est un autre élément important de la cascade. Les propriétés de la plupart des éléments d'une page Web sont hérîées. Par exemple, les balises de paragraphe hériment de certaines propriétés des balises body, les balises span de certaines propriétés des balises de paragraphe, et ainsi de suite. Ainsi, vous pouvezisser la règle suivante dans votre feuille de style :

body {
font-family: Arial;
font-style: italic;
} 

Tout le texte des paragraphs de votre page Web (ainsi que le texte qui hérite des propriétés de la balise de paragraphe) sera en Arial italique, car la balise de paragraphe hérite de ces propriétés à partir de la balise body. Vous pouvez toute fois vous montré plus spécifique avec vos règles et créé des styles qui supplantant la formule d'héritage standard. Par exemple, vous pouze créé les règles suivantes dans votre feuille de style :

body {
font-family: Arial;
font-style: italic;
}
p {
font-family: Courier;
font-style: normal;
} 

Tout le texte du corps est en Arial italique, sauf le texte des paragraphs (et celui des balises hériétères), qui s'affiche en Courier normal (non italique). D'un point de vue technique, la balise de paragraphe hérite tout d'abord des propriétés définies pour la balise body, puis elle ignore celles-ci, car des propriétés ont eté définies spécifique pour elle. En d'autres termes, bien que les éléments de page hériment généralement des propriétés supérieures, l'application directe d'une propriété à une balise entraine toujours l'écrasement de la formule d'héritage standard.

La combinaison de tous les facteurs exposés ci-dessus et d'autres facteurs, tels que la spécifique CSS (un système qui attribue un poids différent à des types précis de règles CSS) et l'ordre des règles CSS, finit par créé une cascade complexe, où les éléments aux priorités les plus élevées écrasant les éléments aux propriétés les plus basses. Pour plus d'informations sur les règles en matière de cascade, d'héritage et de spécifique, visitez le site

www.w3.org/TR/CSS2/cascade.html.

A propos du formatage de texte et de CSS

Par défaut, Dreamweaver utilise des feuilles de style en cascade (CSS) pourmettre 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.

Voupez ealement utilise le panneau Styles CSS pour creer et modifier des propriétés et des regles CSS. Ce panneau est un éditeur bien plus fiable que l'inspecteur Propriétés et presente toutes les règles CSS définies dans le document actif, qu'elles soient intégrées à la section head du document ou dans une feuille de style externe. Adobe recommende l'utilisation du panneau Styles CSS (plutot que l'inspecteur Propriétés) comme outil principal de creation et modification de vos styles CSS. Ainsi, votre code sera plus clair et sa maintenance en sera simplifiée.

Outre les styles et feuilles de style de votre composition, libre à vous d'utiliser les feuilles de style livrées avec Dreamweaver pour styliser vos documents

Pour acceder à un didacticiel relatif au formatage de texte à l'aide de feuilles de style en cascade, consultez le site Web d'Adobe à l'adresse www.adobe.com/go/vid0153_fr.

More Help topics

"Panneau Styles CSS" on page 137

"Creation d'une nouvelle règle CSS" on page 143

Didacticiel de formatage de texte avec CSS

A propos des propriétés de la forme courte des styles CSS

La Specification CSS permet la création de styles à l'aide d'une syntaxe abrégée appelée forme courte des styles CSS. Elle permet de spécifier la valeur de plusieurs propriétés à l'aide d'une seule déclaration. Par exemple, la propriété font vous permit de définir les propriétés font-style, font-variant, font-weight, font-size, line-height et font-family sur une seule ligne.

Il est important de savoir que sous forme courte, les propriétés dont la valeur est omise reçoivent leur valeur par défaut. Certaines pages risquent donc de s'afficher incorrectement lorsque plusieurs régles CSS sont attribuées à la même balise.

Par exemple, la règle h1 ci-dessous utilise la syntaxe longue. Remarquez que les propriétés font-variant, 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 règle pourrait seprésenter ainsi :

h1{font:bold16pt/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, incorpôres dans une page HTML et importés d'une feuille de style externe) sous deux formes, longue et courte, n'oubliez pas que les propriétés omises dans une rège de notation abrégée risquent d'écraser les propriétés explicitement définies dans une autre rège. (On parle de styles en cascade.)

Dreamweaver utilise donc la forme longue par défaut, Ceci permet d'éviter qu'une rège de notation abrégée ne remplace une rège de notation longue. Si vous ouvrez une page Web codée en forme courte dans Dreamweaver, n'oubliez pas que Dreamweaver creée toutes les nouvelles règes CSS sous forme longue. Pour spécifique la façon dont Dreamweaver creé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).

Note: Le panneau Styles CSS create uniquely 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éable de créé vos styles CSS sous forme longue.

Panneau Styles CSS

Le panneau Styles CSS you permit de suivre les règles CSS et les propriétés qui affectent un élément de page sélectionné (mode Actuel), ou l'ensemble des règles et des propriétés qui sont disponibles pour le document (mode Tous). Un bouton bascule place sur la partie supérieure du panneau you permit de passer d'un mode à l'autre. Le panneau Styles CSS you permit de modifier les propriétés CSS dans les deux modes.

Panneau Styles CSS en mode Actuel

En mode Actuel, le panneau Styles CSS présente trois volets: un volet Résumé de la sélection qui présente les propriétés CSS de la sélection en cours dans le document, un volet Règles qui précise l'emplacement des propriétés selectionné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ège appliquées à la sélection.

Vou puez redimensionner l'un qualconque des volets en faisant glisser les cadres entre les volets et redimensionner les colonnes en faisant glisser les sépareurs.

Le volet Résumé de la sélection récapitule les propriétés CSS de l'élement sélectionné dans le document actif et leurs valeurs. Ce résumé déscrit les propriétés de toutes les règes 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; } 

Si vous scélectionné le texte d'un paragraphe de style de classe . foo dans la fenêtre du document, le volet Résumé de la scélection affiche les propriétés concernées par les deux règles, puisque ces deux règles s'appliquent à la seLECTION.

Dans ce cas, le volet Résumé de la sélection affiche la liste des propriétés suivantes :

font-size: 12px

Le volet Résumé de la sélection classe les propriétés par ordre croissant de spécifique. 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éfinitie par le style de balise car la spécifique des选出eurs de classe est supérieure à celle des选出eurs de balise. Pour plus d'informations sur les spécifique 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 hierarchie, des règes s'appliquant directement ou indirectement à la sélection en cours. (L'onget auquel la règle s'applique directement s'affiche dans la colonne de droite.) Pour passer d'une vue à l'autre, cliquez sur les boutons Afficher les informations et Afficher cascade situés dans le coin supérieur droit du volet Règles.

Lorsque vous sélectionné 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èges lorsque la vue Règes 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 entraine 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èges. (En outre, la sélection d'une règle dans le volet Règes affiche les propriétés de cette-ci dans le volet Propriétés.) Vous pouvez alors utiliser le volet Propriétés pour modifierrapidement votre style CSS, qu'il soit intégré dans le document en cours ou relié via par une feuille de style. Par défaut, le volet Propriétés ne présente que les propriétés ayant déjà été définies et les classe par ordre alphabétique.

Voupez 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 alphabetique 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ériété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.

More Help topics

"Ouverture du panneau Styles CSS" on page 140

Panneau Styles CSS en mode Tous

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

Voupe redimensionner l'unquelconque des volets en faisant glisser les cadres entre les volets et redimensionner les colonnes Proprietes en faisant glisser les sépareurs.

Lorsque vous sélectionnez une rège dans le volet Toutes les règes, toutes les propriétés s'appliquant à cette règles'affiche au-dessous dans le volet Propriétés. Vous pouvez alors utiliser le volet Propriétés pour modifier rapidement votre style CSS, qu'il soit intégré dans le document en cours ou relié via par une feuille de style. Par défaut, le volet Propriétés ne présente que les propriétés précédemment définies et les classe par ordre alphétique.

Voues pouvezchosir d'afficher les propriétés dans deux autres vues. La vue Catégorie regroupe les propriétés en catégories, telles que Police, Arrière-plan, Bloc, Bordure, etc., les propriétés définies placées en haut de chaque catégorie. La vue Liste presente la liste alphabétique de toutes les propriétés disponibles, les propriétés définies également placees 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 selection s'affichent en bleu.

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

More Help topics

"Ouverture du panneau Styles CSS" on page 140

Boutons et vues du panneau Styles CSS

Dans les modes Tous et Actuel, le panneau Styles CSS présente trois boutons qui vous permettent de modifier l'affichage du volet Propriétés (volet inférieur):

A. Vue Catégorie B. Vue Liste C. Vue Définition des propriétés

Vue Catégorie Répartit les propriétés CSS prises en charge par Dreamweaver en huit catégories distinctes : police, arrêté-plan, bloc, bordure, boîte, liste, positionnement et extensions. Les propriétés de chaque catégorie sont conservées dans une liste que vous pouvez développer ou réduire en cliquant sur le bouton plus (+) en regard de la catégorie de votre choix. Les propriétés définies s'affichent en bleu en haut de la liste.

Vue Lieste Affiche l'ensemble des propriétés CSS prises en charge par Dreamweaver par ordre alphabétique. Les propriétés définies s'affichent en bleu en haut de la liste.

Vue Définition des propriétés N'affiche que les propriétés déjà définies et constitue la vue par défaut.

Dans les modes Tous et Actuel, le panneau Styles CSS contient également les boutons suivants :

A. Attacher une feuille de style B. Nouvelle règle de CSS C. Modifier le style D. Déactualer/Activer la propriété CSS E. Supprimer règle de CSS

Attacher une feuille de style Ouvre la boite de dialogue Ajouter une feuille de style externe. Sélectionnez une feuille de style externe pour creer un lien vers le document actif ou l'importer dans celui-ci.

Nouvelle rège de CSS Ouvre une boîte de dialogue qui permet de sélectionner le type du style que vous créez, par exemple, pour creer un style de classe, redéfinir une balise HTML ou pour définir un/selecteur CSS.

Modifier le style Ouvre une boite de dialogue qui permet de modifier les styles dans le document actuel ou dans une feuille de style externe.

Supprimer règle de CSS Supprime la règle ou la propriété sélectionnée du panneau Styles CSS et le formatage de tous les éléments auxquels elle est appliquée. (Les références à ce style ne sont cependant pas supprimées.) Le bouton Supprimer règle de CSS peut également détacher (ou rompre le lien de) une feuille de style CSS associée.

Cliquez avec le bouton droit de la souris (Windows) ou en Maintenant la touche Contrôle enfoncée (Macintosh) sur le panneau Styles CSS pour ouvrir un menu contextual d'options disponibles pour l'execution des commandes de feuilles de style CSS.

Ouverture du panneau Styles CSS

Le panneau Styles CSS vous permet d'afficher, de creer, de modifier et de supprimer des styles CSS, mais également de joindre des feuilles de style externes aux documents.

Effectuez l'une des opérations suivantes:
- Choisissez Fenetre > Styles CSS.
- Appuyez sur les touches Maj+F11.
- Cliquez sur le bouton CSS de l'inspecteur Propriétés.

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

Un panneau contextuel a ete ajoute au panneau CSS pour les propriétés suivantes :

text-shadow
- box-shadow
- border-radius
- border-image

Les options disponibles dans le panneau contextuel vous garantissant d'appliquer la propriété correctement, même si vous ne maitrisesz pas leur syntaxe W3C.

Le panneau contextuel affichant les options de la propriété CSS3 border-image

Application de propriétés CSS3 à l'aide du panneau contextuel

Cliquez sur l'icone « + »' correspondant à ces propriétés. Utilisez les options du panneau contextuel pour appliquer la propriété.

Spécification de plusieurs ensembles de valeurs

Les propriétés CSS3 telles que text-shadow pr exponent en charge plusieurs ensembles de valeurs. Par exemple : text-shadow: 3px 3px #000, -3px -3px #0f0;

Lorsque vous spécifie plusieurs ensembles de valeurs en mode Code et que vous ouvrez le panneau contextuel à des fins d'édition, seul le premier ensemble de valeurs s'affiche. Si vous modifie cet ensemble de valeurs dans le panneau contextual, seul le premier ensemble de valeurs dans le code est affecté. Les autres ensembles de valeurs ne sont pas affectés et sont appliqués comme indiqué dans le code.

Recherche de propriétés dans le mode Catégories

En mode Catégories, text-shadow se trouve dans la catégorie Police. box-shadow, border-radius et border-image sont répertoriés dans la catégorie Bordure.

Garantie de la conformité avec les navigateurs

Dreamweaver CS 5.5 prend également en charge un déploiement spécifique aux navigateurs (webkit, Mozilla) des propriétés box-shadow, border-radius et border-image.

En mode Catégories, utilisez les options de la catégorie de navigateur appropriée afin de garantir la conformité de ces propriétés dans le navigateur en question. Par exemple, pour assurer la compatibilité avec la mise en œuvre Mozilla de la propriété border-image, modifiez -moz-border-image dans la catégorie Mozilla.

Prévisualisation des modifications en mode Affichage en direct

Les modifications apportées aux propriétés CSS ne sont pas affichées en mode Création. Passez au mode Affichage en direct pour prévisualiser les modifications. Vous pouze également apporter des modifications rapides aux propriétés CSS3 dans le mode Affichage en direct. Ces modifications sont immédiatement reflètées dans ce mode.

Les propriétés CSS3 suivantes sont prises en charge en mode Affichage en direct :

text-shadow
- border-radius
- -webkit-box-shadow
- -webkit-border-image

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

Les préférences de styles CSS contrôle la façon dont Dreamweaver rédighe le code qui définit les styles CSS. Les styles CSS peuvent être rédigés sous une forme abrégée, que certains développementiers estiment plus facile à utiliser. Toutefois, certaines versions anciennes des navigateurs n'interpréten pas correctement la forme abrégée des attributs de styles.

1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh), puis Sélectionnez Styles CSS dans la liste Catégorie.
2 Définiresse les options de style CSS que vous pouze appliquer :

A la création de règles de CSS - Utilisez Forme courte pour : Vous permet de sélectionner les propriétés de style CSS que Dreamweaver rédige en abrégé.

A la modification de règles de CSS - Utilisez Forme courte pour : Déterminé si Dreamweaver réécrit les styles existants en abrégé.

Choisissez l'option Si l'original utilise Forme courte pour que les styles ne soient pas modifiés.

Choisissez En fonction des paramètres ci-dessus pour réécrite en forme abrégée les styles des propriétés sélectionnées dans la zone Utiliser Forme courte pour.

Sur double-clic dans le panneau CSS: Vous permet de selectionner un outil pour modifier les règles CSS.

3 Cliquez sur OK.

Creation d'une nouvelle règle CSS

Vou puez creer une rgle CSS pour automatiser le formatage de balises HTML ou d'une plage de texte identifiee par un attribut class ou ID.

1 Placez le point d'insertion dans le document, puis procedede l'une des manieres suivantes pour ouvrir la boite de dialogue Nouvelle rgle CSS :
- Choisissez Format > Styles CSS > Nouveau.
- Dans le panneau Styles CSS (Fenêtre > Styles CSS), cliquez sur le bouton Nouvelle règle CSS (+), situé dans la partie inférieure droite du panneau.
- Sélectionnez le texte dans la fenêtre de document,CHOISSEZ Nouvelle règle CSS dans le menu Règle cible de l'inspecteur Propriétés CSS (Fenêtre >Propriétés), puis cliquez sur le bouton Modifier la règle ou choisissez une option dans l'inspecteur Propriétés CSS (par exemple, cliquez sur le bouton Gras) afin d'entamer la création d'une nouvelle règle.
2 Dans la boite de dialogue Nouvelle règle CSS, spécifie le type de sélection pour la règle CSS à créé :
- Pour creer un style personnalise pouvant etre applique comme un attribut classa a n'importe quel element HTML, choisissez Classe dans le menu Selecteur de types. Entrez ensuite le nom du style dans la zone de texte Nom du selecteur.
Note: Les noms de classe doivent commencer par un point et peuvent contérer n'importe qu'elle combinaison de lettres et de chiffres (par exemple, .monentete1). Si vous omettez le point, Dreamweaver l'insere à votre place.
- Pour définir le formatage d'une balise contenant un attribut id spécifique, choisissez ID dans le menu Type de sélection, puis entrez l'ID unique (par exemple containerDIV) dans la zone de texte Nom du sélection.
Note: Les ID doivent commencer par un signe dièse (#) et peuvent conténir n'imprime qu'elle combinaison de lettres et de chiffres (par exemple, #monID1). Si vous omettez le signe dièse initial, Dreamweaver l'insère à votre place.
Pour redéfinir le formatage par défaut d'une balise HTML spécifique, choisissez Balise dans le menu Type de selector, puis entrez une balise HTML dans la zone de texte Nom du selector ou choisissez-en une dans le menu.
- Pour définir une rècle composée influant simultanément sur plusieurs balises ou ID, désissez l'option Composé puis entrez les sélecteurs pour votre rècle composée. Par exemple, si vous entrez div p, tous les éléments p contenus dans des balises div seront influencés par la rècle. Au fur et à mesure que vous ajoutez ou supprimez des sélecteurs, une zone de description explique quels éléments seront influencés par la rècle.
3 Choisissez l'endetroit où vous pouvez définir la règle, puis cliquez sur OK :
- Pour placer la règle dans une feuille de style qui est déjà associée au document, Sélectionnez la feuille de style.
- Pour creer une feuille de style externe, choisissez Nouveau fichier feuille de style.
- Pour incorporer le style dans le document actif,CHOISSEZ Seulement ce document.
4 Dans la boite de dialogue Definition des règes de CSS, désisissez les options à définir pour la nouvelle rège CSS. Pour plus d'informations, consultez la section suivante.
5 Lorsque vous avez defini les propriétés de style, cliquez sur OK.
Note: Le fait de cliquer sur OK sans définir d'options de style entraine la création d'une nouvelle règle vide.

Définition des propriétés CSS

Vou puez definir des propriétés pour les règes CSS, telles que les propriétés de police de caractères, d'image et de couleur d'arrière-plan, d'espacement et de mise en page ainsi que l'aspect des éléments de la liste. Créez d'abord une nouvelle rège, puis définissee les propriétés suivantes.

Définition des propriétés de type CSS

La catégorie Type de la boîte de dialogue Définition des règles de CSS vous permet de définir les paramètres élémentaires de police et de type pour un style CSS.

1 Ouvrez le panneau Styles CSS (Maj+F11), si nécessaire.
2 Double-cliquez sur une rgle ou une propriete existante dans le volet supérieur du panneau Styles CSS.
3 Dans la boite de dialogue Definition des règles de CSS, choisissez Type, puis définisse les propriétés de style.

Laissez les propriétés suivantes vides si elles ne sont pas importantes pour ce style :

Font-family Permet de définir la famille de polices (ou la série de familles) de ce style. Les navigateurs affichent le texte en utilisant la première police installée sur l'ordinateur de l'utilateur au sein de la combinaison de polices可以选择. Pour assurer la compatibilité avec Internet Explorer 3.0, utilisez une police Windows en premier. Cet attribut est pris en charge par les deux navigateurs.

Font-size Définit la taille du texte. Vous pouvez désigner une taille spécifique en cliquant sur une valeur et une unité de mesure, ou une taille relative. Les pixels fonctionnement correctement pour empêcher la déformation du texte par les navigateurs. Cet attribut est pris en charge par les deux navigateurs.

Font-style permet de specifier la variation Normal, Italique ou Oblique comme style de la police. La valeur par défaut est Normal. Cet attribut est pris en charge par les deux navigateurs.

Line-height Définit la hauteur de la ligne sur laquelle le texte est place. Ce paramètre fait généralement liérence à la notion d'interligne. Choisissez Normal pour que la hauteur de ligne soit calculée automatiquement en fonction de la taille de la police ou entrez une valeur fixe et selectionnez une unité de mesure. Cet attribut est pris en charge par les deux navigateurs.

Text-decoration Ajoute un effet de soulignement, de barre supérieure, de texte barré ou de clignotement du texte. La valeur par défaut pour le texte normal est Aucune. La valeur par défaut pour le texte des liens est Souligné. Si vous définissez le paramètre de lien suraucun, vous pouvez supprimer le soulignement des liens endéfinissant une classe spéciale. Cet attribut est pris en charge par les deux navigateurs.

Font-weight Applique aux caractères un niveau d'épaissur spécifique en valeur relative ou absolue. Normal équivaut à une valeur de 400 ; Gras équivaut à une valeur de 700. Cet attribut est pris en charge par les deux navigateurs.

Font-variant Définit la variante en petites capitales du texte. Dreamweaver n'affiche pas cet attribut dans la fenêtre de document. Cet attribut est pris en charge par Internet Explorer, mais non par Netscape Navigator.

Text-transform Permet de mettre en capitale la première lecture de chaque mot de la seLECTION ou de passer l'ensemble du texte en majuscules ou minuscules. Cet attribut est pris en charge par les deux navigateurs.

Couleur Définit la couleur du texte. Cet attribut est pris en charge par les deux navigateurs.

4 Une fois les options définies, selectionnez une autre catégorie CSS dans la partie gauche du panneau pour définir des propriétés de style supplémentaires, puis cliquez sur OK.

Définition des propriétés d'arrière-plan de style CSS

Utilisez la catégorie Arrière-plan de la boite de dialogue Définition des règles CSS pour définir les paramètres d'arrière-plan d'un style CSS. Les propriétés d'arrière-plan s'appliquent à tout élément d'une page Web. Rien ne vous empêche d'assortir un élément de page d'une couleur ou d'une image d'arrière-plan (derrière le texte, la page, un tableau, etc.). Il vous est également possible de définir la position d'une image d'arrière-plan.

1 Ouvrez le panneau Styles CSS (Maj+F11), si nécessaire.
2 Double-cliquez sur une rgle ou une propriete existante dans le volet supieur du panneau Styles CSS.
3 Dans la boîte de dialogue Définition des règes de CSS,CHOISSEZ Arrière-plan,puis définissez les propriétés de style.

Laissez les propriétés suivantes vides si elles ne sont pas importantes pour ce style :

Couleur d'arrière-plan Définit la couleur d'arrière-plan de l'élement. Cet attribut est pris en charge par les deux navigateurs.

Image d'arrière-plan Définit l'image d'arrière-plan pour l'élement. Cet attribut est pris en charge par les deux navigateurs.

Répétition de l'arrière-plan Déterminé comment l'image d'arrière-plan doit être répétiée, le cas échéant. Cet attribut est pris en charge par les deux navigateurs.

• Pas de répétition affiche l'image une seule fois, dans le coin supérieur gauche de l'objet.
• Répéter créé une mosaïque horizontal et verticale de l'image derrière l'élement.
• Répéter-x et Répéter-y affichent respectivement un bandeau horizontal ou vertical. Les dernières images sont coupées pour s'adapter aux dimensions exactes de l'élement.

Note: La propriété Répétition vous permet de redéfinir la balise body et de définir une image d'arrière-plan sans mosaïque ni répétition.

Pierre joine de l'arriere-plan Determine si l'image d'arriere-plan reste fixe par rapport à sa position d'origine ou defile avec le contenu. Notez que certains navigateurs font toujours défiler l'image avec son contenu. Cet attribut est pris en charge par Internet Explorer, mais non par Netscape Navigator.

Position de l'arrière-plan (X) et Position de l'arrière-plan (Y) Spécifient la position initiale de l'image d'arrière-plan par rapport à l'élement. Cette propriété peut être utilisé pour aligner une image d'arrière-plan sur le centre de la page, verticalément (X) et horizontallyment (Y). Si la propriété Fixation est réglée sur Fixe, cette position est relative à la fenêtre de document, pas à l'élement.

4 Une fois les options définies, selectionnez une autre catégorie CSS dans la partie gauche du panneau pour définir des propriétés de style supplémentaires, puis cliquez sur OK.

Définition des propriétés de bloc de style CSS

La catégorie Bloc de la boite de dialogue Définition des règles CSS vous permet de définir les paramètres d'espacement et d'alignement des balises et des propriétés.

1 Ouvrez le panneau Styles CSS (Maj+F11), si nécessaire.
2 Double-cliquez sur une rgle ou une propriete existante dans le volet supérieur du panneau Styles CSS.

3 Dans la boîte de dialogue Définition des règes de CSS, choisissez Bloc, puis définissez les propriétés de style suivantes. Ne définissez pas la propriété si elle n'est pas importante pour le style.

Espacement des mots Définit l'espace devant séparer les mots. Pour définit une valeur spécifique, choisissez Valeur dans le menu dérouulant, puis entrez une valeur numérique. Dans le deuxième menu contextual, choisissez une unité de mesure (par exemple, pixels, points, etc.).

Note: Vous pouvez indiquer des valeurs négatives, mais le résultat final varie la varie sur le navigateur. Dreamweaver n'affiche pas cet attribut dans la fenêtre de document.

Espacement des lettres Augmente ou réduit l'interlettrage. Une valeur négative (par exemple, -4) réduit l'espacement entre les caractères. Les paramètres d'interlettrage ont priorité sur les paramètres de justification du texte. Cet attribut est pris en charge par Internet Explorer 4, mais non par Netscape Navigator 6.

Alignment vertical Determine l'alignment vertical de I'ellement auquel il s'applique. Dreamweaver n'affiche cet attribut dans la fenetre de document que lorsqu'il est appliqué à la balise .

Alignement du texte Deteine l'alignement du texte au sein de I'elément. Cet attribut est pris en charge par les deux navigateurs.

Retrait du texte Déterminé le retrait de texte sur la première ligne. Vous pouvez utiliser une valeur négative pour créé un retrait négatif, mais le résultat final variera selon le navigateur. Dreamweaver n'affiche cet attribut dans la fenêtre de document que lorsqu'il est appliqué aux éléments de niveau bloc. Cet attribut est pris en charge par les deux navigateurs.

Espace blanc Déterminé la gestion des espaces au sein de l'élement. Choisissez parmi les trois options suivantes: Normal réduit à un seul espace une suite évientuelle de plusieurs caractères d'espacement; Pre gère les espaces comme si le texte était inséré à l'intérieur d'une balise pre (tous les caractères d'espacement, notamment les espaces, tabulations et retours chariot, sont respectés); Pas de retard spécifique que le texte peut uniquement être renvoyé à la ligne à l' apparition d'une balise br. Dreamweaver n'affiche pas cet attribut dans la fenêtre de document. Cet attribut est pris en charge par Netscape Navigator et par Internet Explorer 5.5.

Afficher Determine le mode d'affichage d'un élément, le cas échéant. Aucune désactive l'affichage d'un élément.

4 Une fois les options définies, selectionnez une autre catégorie CSS dans la partie gauche du panneau pour définir des propriétés de style supplémentaires, puis cliquez sur OK.

Définition des propriétés de boîte de style CSS

La catégorie Boite de la boite de dialogue Définition des règles CSS vous permet de définir les paramètres des balises et des propriétés pour le positionnement des éléments sur la page.

Vou puez applier des parametes individuels aux cotés d'un élément lors de la définition du replissage et des marges ou utiliser l'option Idem pour tous pour applier le même paramètre à tous les cotés d'un élément.

1 Ouvrez le panneau Styles CSS (Maj+F11), si nécessaire.
2 Double-cliquez sur une rgle ou une propriete existante dans le volet supérieur du panneau Styles CSS.
3 Dans la boite de dialogue Definition des regles de CSS, choisisse Boite, puis definissee les propriétés de style suivantes. Ne définissee pas la propriété si elle n'est pas importante pour le style.

Largeur et Hauteur Définissent la largeur et la hauteur de l'élement.

Flottante Determine de quel cote les autres éléments, tels que le texte, les divs PA, les tableaux, etc., flottent autour d'un élément. Les autres éléments sont affichés autour de l'élément flottant, suivant la méthode habituelle. Cet attribut est pris en charge par les deux navigateurs.

Effacer Définit les côtes sur lesquels les éléments PA ne sont pas autorisés. Si un élément PA apparait du côté marqué dans Effacer, l'élement possédant cet attribut passera sous le cadre. Cet attribut est pris en charge par les deux navigateurs.

Remplissage Définit la marge interieure, c'est-à-dire l'espace qui sépare le contenu de l'élement de sa cordure (ou sa marge s'il ne compte pas de cordure). Désactivez l'option Idem pour tous si vous poulez définir un replissage différent pour chaque côté de l'élement.

Idem pour tous Applique le même replissage aux bords supérieur, droit, inférieur et gauche de I'elément.

Marge Définit l'espace qui sépare la cordure d'un élément (ou son replissage s'il ne compte pas de cordure) d'un autre élément. Dreamweaver n'affiche cet attribut dans la fenêtre de document que lorsqu'il est appliqué aux éléments de niveau bloc (paragraphes, en-têtes, listes, etc.). Désactivez l'options Idem pour tous si vous pouze définir une marge différente pour chaque côté de l'élement.

Idem pour tous Applique la meme marge aux bords supérieur, droit, inférieur et gauche de I'ellement.

4 Une fois les options définies, selectionnez une autre catégorie CSS dans la partie gauche du panneau pour définir des propriétés de style supplémentaires, puis cliquez sur OK.

Définition des propriétés de cordure de style CSS

Le panneau Bordure de la boite de dialogue Définition des règles CSS vous permet de définir les paramètres des cordures des éléments, par exemple leur épaissur, leur couleur et leur style.

1 Ouvrez le panneau Styles CSS (Maj+F11), si nécessaire.
2 Double-cliquez sur une rgle ou une propriete existante dans le volet supérieur du panneau Styles CSS.
3 Dans la boite de dialogue Définition des règes de CSS, choisissez Bordure, puis définisse les propriétés de style suivantes. Ne définisse pas la propriété si elle n'est pas importante pour le style.

Type Définit l'aspect de la cordure. L'affichage du style dépend du navigateur. Désactivez l'option Idem pour tous si vous voulez définir un style de cordure différent pour chaque côte de l'élement.

Idem pour tous Applique le même style de cordure aux bords supérieur, droit, inférieur et gauche de I'elément.

Largeur Determine l'épaissur de la cordure de l'élément. Cet attribut est pris en charge par les deux navigateurs. Désactivez l'options Idem pour tous si vous foulez définir une épaissur différente pour chaque côte de l'élement.

Idem pour tous Applique la meme largeur de bordure aux bords supieur, droit, infierier et gauche de I'ellement.

Couleur Définit la couleur de la cordure. Vous pouze indiquer une couleur différente pour chaque côté, mais le résultat final variera selon le navigateur. Désactivez l'option Idem pour tous si vous voulez définir une couleur différente pour chaque côté de l'objet.

Idem pour tous Applique la meme couleur de cordure aux bords supieur, droit, infierieur et gauche de I'ellement.

4 Une fois les options définies, selectionnez une autre catégorie CSS dans la partie gauche du panneau pour définir des propriétés de style supplémentaires, puis cliquez sur OK.

Définition des propriétés de liste de style CSS

La catégorie Liste de la boite de dialogue Définition des règles CSS vous permet de définir les paramètres des balises de liste, tels que la taille et le type des puces.

1 Ouvrez le panneau Styles CSS (Maj+F11), si nécessaire.
2 Double-cliquez sur une rgle ou une propriete existante dans le volet supérieur du panneau Styles CSS.

3 Dans la boîte de dialogue Définition des règes de CSS, choisissez Liste, puis définisse les propriétés de style suivantes. Ne définisse pas la propriété si elle n'est pas importante pour le style.

Type de style de liste Déterminé l'aspect des puce ou des numérios. Cet attribut est pris en charge par les deux navigateurs.

Image de style de liste Permet deCHOISIR une image personnaliseepour les puce. Cliquez sur Parcourir (Windows) ou Choisir (Macintosh) pour selectionner une image ou tapez le chemin d'acces a cette-ci.

Position de style de liste Déterminé si le texte de l'élement de la liste est habillé et mis en retrait (extérieure) ou si le texte habille la marge de gauche (interieure).

4 Une fois les options définies, selectionnez une autre catégorie CSS dans la partie gauche du panneau pour définir des propriétés de style supplémentaires, puis cliquez sur OK.

Définition des propriétés de positionnement de style CSS

Les propriétés de style Positionnement déterminant la façon dont le contenu associé au style CSS sélectionné est positionné dans la page.

1 Ouvrez le panneau Styles CSS (Maj+F11), si nécessaire.
2 Double-cliquez sur une rgle ou une propriete existante dans le volet supérieur du panneau Styles CSS.
3 Dans la boite de dialogue Definition des règes de CSS, choisissez Positionnement, puis définisse les propriétés de style qui vous convennent.

Laissez les propriétés suivantes vides si elles ne sont pas importantes pour ce style :

Position Determine la façon dont le navigateur doit positionner l'élément sélectionné, avec les options suivantes :

• Absolu place le content en fonction des coordonnées indiquées dans les zones Emplacement par rapport à l'ancetre PA ou relatif le plus proche, et à défaut, par rapport au coin supérieur gauche de la page.
• Relatif place le bloc de contenu en fonction des coordonnées indiquées dans les zones Emplacement, par rapport à la position du bloc dans le flux de texte du document. Par exemple, si vous définissez pour un élément une position relative et des coordonnées d'origine (en haut à gauche) de 20 px chacune, l'élement sera déplaced de 20 px vers la droite et de 20 px vers le bas par rapport à sa position normale dans le flux. Les éléments peuvent aussi être positionnés de manière relative, avec ou sans coordonnées haut, gauche, droite ou bas, afin d'étabrir un contexte pour les enfants PA.
  Fixe place le contenu en fonction des coordonnées indiquées dans les zones Emplacement, par rapport au coin supérieur gauche du navigateur. Le contenu restera fixé dans cette position tandis que l'utilisateur fera defiler la page.
• Statique place le contenu à son emplacement dans le flux de texte. Il s'agit de la position par défaut de tous les éléments HTML positionnables.

Visibilité Déterminé la condition de l'affichage initial du contenu. Si vous ne spécifie pas de propriété de visibilité, le contenu hérite par défaut de la valeur de cette propriété pour l'objet parent. La visibilité par défaut de la balise body est visible. Sélectionnez l'une des options de visibilité suivantes :

• Inherit hérite de la propriété de visibilité du parent du contenu.
  Visible affiche le contenu,quelle que soit la valeur du parent.
• Masqué masque le contenu,quelle que soit la valeur du parent.

Index Z Déterminé l'ordre de superposition du contenu. Les éléments ayant une valeur d'index Z supérieur s'affichent par dessus les éléments ayant une valeur d'index Z inférieur (ou aucune valeur d'index Z). Les valeurs peuvent être positives ou négatives. (Si votre contenu est à position absolue, il est plus facile de modifier l'ordre de superposition à l'aide du panneau Éléments PA).

Débordement Déterminé ce qui se passé si le contenu d'un conteneur (par exemple, une balise DIV ou P) dépasse la taille de ce dernier. Ces propriétés contrôlent l'extension de la manière suivante :

Visible augmente laaille du conteneur pour que tout son contenu soit visible. Le conteneur s'agrandit vers le bas et vers la droite.
- Masque conserve la taille du contenu et coupe tout contenu dépassant la taille. Aucune barre de défilament n'est affichée.
- Défilament ajoute des barres de défilament au conteneur, que le contenu dépasse ou non la taille du conteneur. Le fait d'intégrer des barres de défilament évite la confusion causée par l' apparition et la disparition de barres de défilament dans un environnement dynamique. Dreamweaver n'affiche pas cette option dans la fenêtre de document.
- Auto ne fait apparaitre les barres de défilament que lorsque le contenu du contenteur dépasse les limites de ce dernier. Dreamweaver n'affiche pas cette option dans la fenêtre de document.

Emplacement Définit l'emplacement et la taille du bloc de contenu. La façon dont le navigateur interprete l'emplacement dépend de l'option可以选择 pour l'attribut Type. Les valeurs relatives à la taille ne sont pas prises en compte si le contenu du bloc de contenu excède la taille spécifique.

Les unités par défaut pour l'emplacement et la taille sont les pixels. Vous pouvez également désirir les unités suivantes : pc (picas), pt (points), in (pouces), mm (millimètres), cm (centimètres) ou % (pourcentage de la valeur équivalente de l'objet parent). Les abréviations doivent suivre la valeur sans espace : par exemple, 3mm.

Détourage Définit la partie du contenu qui est visible. Si vous indiquez une zone de détourage, vous pouvez laisser à l'aide d'un langage de script tel que Java Script et modifier ces propriétés pour creer des effets spéciaux, par exemple un effet de volet à l'ouverture. Ces effets de volet peuvent être configurés via le comportement Changer la propriété.

4 Une fois les options définies, selectionnez une autre catégorie CSS dans la partie gauche du panneau pour définir des propriétés de style supplémentaires, puis cliquez sur OK.

Définition des propriétés d'extension de style CSS

Les propriétés de style d'extensions complènent les filtres, les sauts de page et les options de pointeur.

Note: Un certain nombre d'autres propriétés d'extension sont disponibles dans Dreamweaver, mais vous devez passer par le panneau Styles CSS pour y acceder. Vous pouvez afficher facilement une liste des propriétés d'extension disponibles en ouvrant le panneau Styles CSS (Fenêtre > Styles CSS), puisclinquant sur le bouton Afficher la vue par catégorie en bas du panneau et en développement la catégorie Extensions.

1 Ouvrez le panneau Styles CSS (Maj+F11), si nécessaire.
2 Double-cliquez sur une rgle ou une propriete existante dans le volet supérieur du panneau Styles CSS.
3 Dans la boite de dialogue Définition des règles de CSS, choisissez Extensions, puis définissez les propriétés de style suivantes. Ne définissez pas la propriété si elle n'est pas importante pour le style.

Saut de page avant Force un saut de page en cas d'impression de la page, avant ou après l'objet contrôle par ce style. Choisissez l'options que vous pouze définir dans le menu déroulant. Cet attribut n'est pas pris en charge par la version 4.0 des navigateurs, mais peut l'être dans les versions ultérieures.

Curseur Modifie l'aspect du pointeur lorsque celui-ci passes au-dessus de l'objet contrôle par ce style. Choisissez l'options que vous voulez définir dans le menu déroulant. Cet attribut est pris en charge par Internet Explorer 4.0 et versions ultérieures et par Netscape Navigator 6.

Filtre Applique des effets speciaux, dont des effets de flou et de négatif, à l'objet contrôle par ce style. Sélectionnez un effet dans le menu contextual.

4 Une fois les options définies, Sélectionnez une autre catégorie CSS dans la partie gauche du panneau pour définir des propriétés de style supplémentaires, puis cliquez sur OK.

Modification d'une règle CSS

Vou puez 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éprecutent sur tous les documents auxquels elle est liée.

Libre à vous de définir un éditeur externe à utiliser pour la modification des feuilles de style.

Modification d'une règle dans le panneau Styles CSS (mode Actuel)

1 Ouvrez le panneau Styles CSS en Sélectionnant Fenêtre > Styles CSS.
2 Cliquez sur le bouton Actuel, situé en haut du panneau Styles CSS.
3 Sélectionnez un élément de texte dans la page pour afficher ses propriétés.
4 Effectuez l'une des opérations suivantes :

Pour afficher la boite de dialogue Definition des regles de CSS et effectuer vos modifications, double-cliquez sur une propriete du volet Resumé de la selection.
- 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 modifie ses propriétés dans le volet Propriétés inférieur.

Note: Vous pouvez changer le comportement du double-clic lors de la modification CSS, ainsi que les autres comportements, en changeant les préférences de Dreamweaver.

Modification d'une règle dans le panneau Styles CSS (mode Tous)

1 Ouvrez le panneau Styles CSS en Sélectionnant Fenêtre > Styles CSS.
2 Cliquez sur le bouton Tous, situé en haut du panneau Styles CSS.
3 Effectuez l'une des opérations suivantes :

Pour afficher la boite de dialogue Definition des regles de CSS et effectuer vos modifications, double-cliquez sur une rgle du volet Toutes les regles.
- Sélectionnez une règle dans le volet Toutes les règles, puis modifie ses propriétés dans le volet Propriétés inférieur.
- Sélectionnez une règle dans le volet Toutes les règles, puis cliquez sur le bouton Modifier le style lié du coin inférieur droit du panneau Styles CSS.

Note: Vous pouvez changer le comportement du double-clic lors de la modification CSS, ainsi que les autres comportements, en changeant les préférences de Dreamweaver.

Modification du nom d'un sélecteur CSS

1 Dans le panneau Styles CSS (mode Tous), Sélectionné le sélecteur à modifier.
2 Cliquez à nouveau sur le sélecteur afin de pouvoir en modifier le nom.
3 Apportez vos modifications, puis appuyez sur Entre (Windows) ou sur Retour (Macintosh).

More Help topics

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

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

Voussupportezutiliserlepanneau de stylesCSS pourajouterdespropriétésauxregles.

1 Dans le panneau Styles CSS (Fenêtre > CSS), Sélectionné une règle dans le volet Toutes les règles (mode Tous) ou une propriété dans le volet Résumé de la sélection (mode Actuel).
2 Effectuez l'une des opérations 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 selectionnée dans le volet Propriétés, donnez une valeur à la propriété selectionnée.

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

Les styles de classe sont le seul type de style CSS qui peut être appliqué à n'importe quel texte dans un document, quelles que soient les balises qui contrélent ce texte. Tous les styles de classe associés au document actif sont affichés dans le panneau Styles CSS (leur nom est précédé d'un point [.]) ainsi que dans le menu dérouulant Style dans l'inspecteur Propriétés de texte.

Meme si la plupart des styles sont actualisés immédiatement, il est conseilé 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 produit des résultats inattendus.

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.

More Help topics

"A propos des feuilles de style en cascade" on page 132

"A propos des styles en cascade" on page 134

"Panneau Styles CSS" on page 137

Application d'un style de classe CSS

1 Sélectionnez le texte du document auquel vous poulez appliquer un style CSS.

Placez le curseur dans un paragraphe pour appliquer le style au paragraphe entier.

Si vous scélectionné une plage de texte au sein d'un même paragraphe, le style CSS n'affectora 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, procedede l'une des manieres suivantes :

• Dans le panneau Styles CSS (Fenêtre > Styles CSS), Sélectionnéz le mode Tous, cliquez avec le bouton droit de la souris sur le nom du style à appliquer etCHOISSEZ Appliquer dans le menu contextualuel.
• Dans l'inspecteur Propriétés HTML, choisissez le style de classe à appliquer dans le menu dérouulant Classe.
• Dans la fenêtre de document, cliquez avec le bouton droit de la souris (Windows) ou en maintainant la touche Ctrl enfoncée (Macintosh) sur le texte selectionné,CHOISISSEZ Styles CSS dans le menu contextualuel, puis choisissez le style à appliquer.
• Choisissez Format > Styles CSS, puis selectionné le style à appliquer dans le sous-menu.

Suppression d'un style de classe d'une sélection

1 Sélectionnéz l'objet ou le texte auquel le style ne doit plus être appliqué.
2 Dans linspecteur Propriétés HTML (Fenêtre > Propriétés),CHOISEZ Aucun dans le menu déroulant Classe.

Changement de nom d'un style de classe

1 Dans le panneau Styles CSS, cliquez avec le bouton droit de la souris sur le style de classe CSS que vous souhaitez renommer et selectionnez Renommer la classe.

Vous pouvez également renomer une classe en Sélectionnant Renommer la classe dans le menu d'options du panneau Styles CSS.

2 Dans la boite de dialogue Renommer la classe, assurez-vous que la classe que vous souhaitez renomer est selectionnée dans le menu déroulant Renommer la classe.
3 Dans la zone de texte Nouveau nom, saisissez le nouveau nom de la nouvelle classe et cliquez sur OK.

Si la classe que vous renommez se trouve dans la section head du document actif, Dreamweaver modifie le nom de la classe ainsi que toutes les instances du nom de la classe se trouvant dans le document actif. Si la classe que vous renommez est un fjichier CSS externe, Dreamweaver s'ouvre et modifie le nom de la classe dans le fjichier. Dreamweaver lance également une boite de dialogue Rechercher et replacer à l'échelle du site pour vous permettre de rechercher toutes les instances de l'ancien nom de la classe pouvant exister dans cette site.

Déplacement/exportation de règles CSS

Les fonctions de gestion des feuilles de styles CSS de Dreamweaver permettent de déplacer ou d'exporter aisément des règles CSS vers des emplacements différents. Vous pouvez déplacer des règles d'un document vers un autre, de la section head d'un document vers une feuille de style externe, entre des fichiers CSS externes, etc.

Note: Si la rècle que vous essayez de déplacer est en conflit avec une rècle de la feuille de style de destination, Dreamweaver affiche la boite de dialogue Il existe déjà une rècle de ce nom. Si vous decidez de déplacer la rècle en conflit, Dreamweaver place la rècle déplace à proximé immediate de la rècle avec laquelle elle est en conflit dans la feuille de style de destination.

More Help topics

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

Déplacement/exportation de règles CSS vers une nouvelle feuille de style

1 Effectuez l'une des opérations suivantes :

• Dans le panneau Styles CSS, Sélectionnéz la ou les règles que vous souhaitez déplacer. Cliquez ensuite sur la sélection avec le bouton droit de la souris et désissez Déplacer les règles CSS dans le menu contextualuel. Pour sélectionner plusieurs règles, appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant avec la souris sur les règles à sélectionner
• En mode Code, Sélectionnez la ou les règles à déplacer. Cliquez ensuite sur la sélection avec le bouton droit de la souris et Sélectionnez Styles CSS > Déplacer les règles CSS dans le menu contextuel.

Note: La sélection partielle d'une rège se traduit par le déplacement de l'ensemble de la rège.

2 Dans la boite de dialogue Déplacer dans une feuille de style externe, Sélectionnez l'option de nouvelle feuille de style et cliquez sur OK.
3 Dans la boite de dialogue Enregisterr la feuille de style sous, entrez un nom pour la nouvelle feuille de style et cliquez sur Enregisterr.

Lorsque vous cliquez sur Enregistrer, Dreamweaver enregistre une nouvelle feuille de style contenant les règles que vous avez sélectionnées et l'associe au document actif.

Vous pouze également déplacer des règles à l'aide de la barre d'outils de codage. La barre d'outil de codage est disponible uniquement en mode Code.

Déplacement/exportation de règles CSS vers une feuille de style existante

1 Effectuez l'une des opérations suivantes :

• Dans le panneau Styles CSS, Sélectionnéz la ou les règles que vous souhaitez déplacer. Cliquez ensuite sur la sélection avec le bouton droit de la souris etCHOISISEZ Déplacer les règles CSS dans le menu contextualuel. Pour sélectionner plusieurs règles, appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant avec la souris sur les règles à sélectionner
• En mode Code, Sélectionnez la ou les règes à déplacer. Cliquez ensuite sur la sélection avec le bouton droit de la souris et Sélectionnez Styles CSS > Déplacer les règes CSS dans le menu contextualuel.

Note: La sélection partielle d'une rège se traduit par le déplacement de l'ensemble de la rège.

2 Dans la boite de dialogue Déplacer dans une feuille de style externe, Sélectionnez une feuille de style existante dans le menu déroulant ou naviguez jusqu'à une feuille de style existante et cliquez sur OK.

Note: Le menu dérounant affiche toutes les feuilles de style qui sont liées au document actif.

Vous pouvez également déplacer des règles à l'aide de la barre d'outils de codage. La barre d'outil de codage est disponible uniquement en mode Code.

Réorganisation ou déplacement des règles CSS en les faisant glisser

Dans le panneau Styles CSS (mode Tous), Sélectionnéz une règle et faites-la glisser jusqu'à l'emplacement désiré. Vous pouvez Sélectionner des règles et les faire glisser pour les réorganiser à l'intérieur d'une feuille de style, ou déplacer une règle vers une autre feuille de style ou dans la section head du document.

Vou puez déplacer plusieurs règes à la fois en appuyant sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant avec la souris sur plusieurs règes pour les sélectionner.

Sélection de plusieurs règles avant de les déplacer

Dans le panneau Styles CSS, appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant avec la souris sur les règles que vous souhaitez selectionner.

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

L'utilisation de styles intégrés ne constitue pas une meilleure pratique recommendée. Pour que vos styles CSS soient plus clairs et mistroux organises, vous pouvez convertir des styles intégrés en règles CSS résident dans la section head du document ou dans une feuille de style externe.

1 En mode Code (Affichage > Code), Sélectionnez la totalité de l'attribut de style qui contient le style CSS intégré à convertir.
2 Cliquez dessus avec le bouton croit de la souris et selectionnez Styles CSS > Convertir en règle les styles CSS intégrés.
3 Dans la boîte de dialogue Convertir style CSS, saississez un nom de classe pour la nouvelle règle, puis procédez de l'une des façon suivantes :
- Spécifiez une feuille de style dans laquelle vous souhaitez que la nouvelle règle CSS apparaissé et cliquez sur OK.
- Sélectionnez la section head du document en tant qu'emplacement dans lequel vous souhaitez que la nouvelle règle CSS apparaisse et cliquez sur OK.

Voupez egalent convertir des regles à l'aide de la barre d'outils de codage. La barre d'outil de codage est disponible uniquement en mode Code.

More Help topics

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

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

Si vous modifie 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éé une nouvelle feuille de style CSS, et attacher ou creator un lien vers une feuille de style externe pour appliquer les styles trouvés à cet endroit.

Vou puez attacher toute feuille de style de Your creation a vos pages ou copier ces feuilles dans voite site. De plus, Dreamweaver est fourni avec des feuilles de style prdefinies qui peuvent etre automatique placees dans voite site et attachées à vos pages.

1 Ouvrez le panneau Styles CSS en procédant de l'une des manières suivantes :
- Choisissez Fenetre > 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 Effectuez l'une des opérations suivantes :
- Cliques sur le bouton Parcourir pour rechercher une feuille de style CSS externe.

• Entrez le chemin de la feuille de style dans le champ Fichier/URL.
  4 Dans la zone Ajouter sous, selectionnez une des options suivantes :
• Pour creer un lien entre le document actif et une feuille de style externe, choisissez Lien. Cette selection a pour effet de creer une balise de lien href dans le code HTML et de referrer l'URL de l'emplacement de la feuille de style publiée. Microsoft Internet Explorer et Netscape Navigator prennt tous deux en charge cette methode.
• Vous ne pouvez pas utiliser une balise de lien pour ajouter une reférence d'une feuille de style externe à une autre. Pour imbriquer des feuilles de style, vous devez utiliser une directive d'importation. La plupart des navigateurs reconnaissent également la directive d'importation dans une page (plutôt que simplement dans des feuilles de style). Il existe quelques différences dans la méthode de résolution des conflits entre propriétés lorsque des règles se chevauchent dans des feuilles de style externes liées et des feuilles importées dans une page. Pour importer une feuille de style externe, plutôt que d'y créé un lien,CHOISSEZ Importer.
  5 Dans le menu contextuel Medias, spécifie le media cible de la feuille de style.

Pour plus d'informations sur les feuilles de style dépendantes du média, consultez le site Web du World Wide Web Consortium à l'adresse www.w3.org/TR/CSS21/media.html.

6 Cliquez sur le bouton d'aperçu pour vérifier que la feuille de style applique efectivement les styles de votre choix à la page active.

Si les styles appliqués ne sont pas leurs attendus, cliquez sur Annuler pour supprimer la feuille de style. La page retrouve son aspect précédent.

7 Cliquez sur OK.

More Help topics

"Creation d'un document basé sur un fichier d'exemple Dreamweaver" on page 71

Modification d'une feuille de style CSS

En règle générale, une feuille de style CSS comprend une ou plusieurs régles. Vous pouvez modifier les différentes règles d'une feuille de style CSS à l'aide du panneau Styles CSS, ou bien vous pouvez travailler directement dans la feuille de style CSS.

1 Dans le panneau Styles CSS (Fenêtre > Styles CSS), sélectionné le mode Tous.
2 Dans le volet Toutes les règles, double-cliquez sur le nom du style à modifier.
3 Dans la fenetre Document, modifiez la feuille de style en fonction des besoin, puis enregistrez-la.

Mise en forme du code CSS

Vouss pouvez définir des préférences qui contrôlent le formatage de votre code CSS chaque fois que vous créez ou modifiez une règle CSS à l'aide de l'interface Dreamweaver. Par exemple, vous pouvez définir des préférences qui placeront toutes les propriétés CSS sur des lignes séparées, insérer une ligne vierge entre les règles CSS, etc.

Lorsque vous définissez des préférences de formatage de code CSS, les préférences que vous sélectionnez sont automatiquement appliquées à toutes les nouvelles règles CSS que vous créez. Toutefois, vous pouvez également appliquer ces préférences manuellement à des documents individuels. Cela peut être utile si vous possédez un document HTML ou CSS plus ancien ayant besoin d'un formatage.

Note: Les préférences de formatage de code CSS s'appliquent uniquement aux régles CSS de feuilles de style externes ou intégrées (mais pas aux styles intégrés).

More Help topics

"Modification du format du code" on page 317

Définition des préférences de formatage du code CSS

1 Choisissez Edition > Préférences.
2 Dans la boîte de dialogue Préférences, Sélectionnez la catégorie Format du code.
3 En regard de l'option Formatage avancé, cliquez sur le bouton CSS.
4 Dans la boîte de dialogue Options de mise en forme de la source CSS, Sélectionnéz les options que vous souhaïez appliquer à votre code source CSS. Un aperçu de la feuille de style CSS告诉她 qu'elle est modifiée par les options sélectionnées s'affiche dans la fenêtre Aperçu plus bas.

Mettre les propriétés en retrait avec Définit la valeur de mise en retrait des propriétés au sein d'une rège. Vous pouvez désigner des tabulations ou des espaces.

Chaque propriété sur une ligne séparée Place chaque propriété au sein d'une règle sur une ligne séparée.

Accolade d'ouverture sur une ligne séparée Place l'accalade d'ouverture pour une règle sur une ligne séparée de celle du sélecteur.

Seulement si plusieurs propriétés Place les règes à une seule propriété sur la même ligne que le sélecteur.

Tous les selecteurs d'une rege sur la meme ligne Place tous les selecteurs d'une rege sur la meme ligne.

Ligne vierge pour séparer les régles Insère une ligne vierge entre chaque règle.

5 Cliquez sur OK.

Note: Le formatage de code CSS hérête également de la préférence Type de saut de ligne que vous avez définitie dans la catégorie Format de code de la boîte de dialogue Préférences.

Formatage manuel du code CSS dans une feuille de style CSS

1 Ouvrez une feuille de style CSS
2 Choisissez Commandes > Appliquer le format source.

Les options de formatage que vous définissez dans les préférences de formatage de code CSS s'appliquent à l'ensemble du document. Vous ne pouvez pas formater de sélections individuelles.

Formatage manuel du code CSS intégré

1 Ouvrez une page HTML contenant du code CSS intégré dans la section head du document.
2 Sélectionnez une partie quelconque du code CSS.
3 Choisissez Commandes > Appliquer le format source à la seLECTION.

Les options de formatage que vous définissez dans les préférences de formatage de code CSS s'appliquent uniquement à l'ensemble des règles CSS de la section Head du document.

Note: Vous pouvez désir Commandes > Appliquer le format source pourmettre l'ensemble du document en forme en fonction des préférences de mise en forme de code que vous avez spécifiées.

La fonctionnalité Désactiver/Activer la propriété CSS permet de mettre en commentaire des parties de code CSS depuis le panneau Styles CSS, sans devoir apporter directement des modifications dans le code. Lorsque vous mettez en commentaire certaines parties du code CSS, vous pouvez voir quel effet des propriétés et des valeurs spécifiques ont sur votre page.

Lorsque vous désactiver une propriété CSS, Dreamweaver ajoute des balises de commentaire CSS et un libellé [déactivé] à la propriété CSS que vous avez désactivée. Par la suite, vous pouvez aisément réactiver ou supprimer la propriété CSS désactivée, selon vos préférences.

Voutrouvrez, à l'adresse ci-après, une video de l'équipe de conception de Dreamweaver qui présente l'utilisation de la fonction de désactivation/activation du code CSS : www.adobe.com/go/dwcs5css_fr.

1 Dans le volet Propriétés du panneau Styles CSS (Fenêtre > Styles CSS), Sélectionnez la Propriété que vous pouze désactiver.
2 Cliquez sur l'icone Désactiver/Activer la propriété CSS dans le coin inférieur droit du volet propriétés. Cette icône s'affiche également si vous laisssez le pointeur de la souris sur la gauche de la propriété proprement dite.

Lorsque vous cliquez sur l'icone Désactiver/Activer la propriété CSS, une icone indiquant la désactivation s'affiche à gauche de la propriété. Pour réactiver la propriété, cliquez sur l'icone Désactivé ou cliquez à l'aide du bouton droit de la souris (Windows) ou en maintainant la touche Commande enfoncée (Macintosh) sur la propriété, puis choisissez Activer.

3 (Facultatif) Pour activer ou supprimer toutes les propriétés désactivées d'une règle sélectionnée, faites un clic droit de la souris (Windows) ou un clic tout en maintainant la touche CTRL,enforcée (Macintosh) sur une règle ou propriété dans laquelle des propriétés sont désactivées, puis choisissez Activer tous les éléments désactivés de la règle sélectionnée ou Supprimer tous les éléments désactivés de la règle sélectionnée.

Inspection de CSS en mode En direct

Le mode Inspection s'associe au mode En direct afin de vous aider à identifier rapidement les éléments HTML et les styles CSS qui y sont associés. Lorsque le mode Inspection est activé, vous pouvez survolver des éléments de votre page afin d'afficher les attributs de modèle de boîte CSS de n'importequel élément de niveau bloc.

Note: Pour plus d'informations sur le modele de boite CSS, consultez la Specification CSS 2.1 (en angeis).

Le mode Inspection permet d'obtenir une représentation visuelle du modele de boite. Vous pouvez en outre utiliser le panneau Styles CSS pendant le survol d'éléments dans la fenêtre Document. Lorsque le panneau Styles CSS est ouvert en mode Actuel et que vous survolvez un élément de la page, les règes et propriétés du panneau Styles CSS sont automatiquement mises à jour, de façon à montré les règles et propriétés de cet élément. En outre, les modes et pannaaux associés à l'élement que vous survolvez sont également mis à jour (par exemple le mode Code, le sélecteur de balises, linspecteur Propriétés, etc.).

1 Lorsque le document est ouvert dans la fenetre Document, cliquez sur le bouton Inspector (a cote du bouton Mode en direct dans la barre d'outils Document).

Note: Si vous n'êtes pas déjà en mode En direct, le mode Inspection l'active automatiquement.

2 Survalez des éléments de la page afin d'afficher le modele de boite CSS. Le mode Inspection utilise des couleurs de surbrillance différentes pour la bordure, la marge, la marge interieure et le contenu.

3 (Facultatif) Appuyez sur la flèche vers la gauche, sur votre clavier, afin demettre en surbrillance le parent de l'élement actuellément en surbrillance. Appuyez sur la flèche vers la droite pour rétabrir la mise en surbrillance de l'élement infant.
4 (Facultatif) Cliquez sur un élément pour verrouiller la seLECTION en surbrillance.

Note: Si vous cliquez sur un élément afin de verrouiller la seLECTION en surbrillance, le mode Inspection est désacté.

More Help topics

"Prévisualisation de pages dans Dreamweaver" on page 304

"Panneau Styles CSS" on page 137

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

Les fonctions de vérification de la compatibilité avec les navigateurs vous permettent de rechercher les combinaisons de HTML et de feuilles de style CSS pouvant partager des problèmes dans certains navigateurs. Lorsque vous exécutez une vérification de compatibilité avec les navigateurs sur un fichier ouvert, Dreamweaver analyse le fichier et signale tous les problèmes de rendu CSS potentiels dans le panneau Résultats. Une estimation de confiance, illustrée par un quart de cercle, un demi cercle, trois-quarts de cercle ou un cercle plein, indique la probabilité d'occurrence d'un bogue (un quart de cercle plein indique une occurrence possible et un cercle complet plein indique une occurrence très probable). Pour chaque bogue potentiel déetecté, Dreamweaver fournit également un lien direct à la documentation relative au bogue sur Adobe CSS Advisor, un site Web qui détaillie les bogues de rendu de navigateur connus et propose des solutions pour les corriger.

Par défaut, la fonction de vérification de la compatibilité avec les navigateurs effectue une vérification par rapport aux navigateurs suivants : Firefox 1.5 ; Internet Explorer (Windows) 6.0 et 7.0 ; Internet Explorer (Macintosh) 5.2 ; Netscape Navigator 8.0 ; Opera 8.0 et 9.0 ; Safari 2.0.

Cette fonction remplace l'ancienne fonction de vérification du navigateur cible, mais conserve la fonctionnalité CSS de cette fonction. Cela signifie que la nouvelle fonction de vérification de compatibilité avec les navigateurs teste le code de vos documents et détermine s'il contient des propriétés ou des valeurs CSS non prises en charge par les navigateurs cibles.

Trois niveaux de problèmes potentiels de prise en charge de navigateur peuvent seprésenter :

• Une erreur signale du code CSS pouvant causeur un probleme grave et visible au niveau du fonctionnement de certains navigateurs, par exemple, en faisant disparaitre une partie d'une page (une erreur désigne par défaut les problèmes de prise en charge de navigateur, de sorte que dans certains cas, du code ayant un effet inconnu peut etre signalé comme une erreur).
• Un averissement indique une portion de code CSS qui n'est pas prise en charge dans certains navigateurs, mais sans pour autant cause de sérieux problème d'affichage.
• Un message d'information indique du code qui n'est pas pris en charge dans certains navigateurs, mais n'a pas d'effet visible.

Les vérifications de compatibilité avec les navigateurs n'altérènt en rien le document.

More Help topics

"Validation des documents XML" on page 343

CSS Advisor

Exécution d'une vérification de compatibilité avec les navigateurs

Sélectionnez Fichier > Vérifier la page > Compatibility avec les navigateurs.

Sélection de l'élement affecté par un problème déetecté

Double-cliquez sur le problème dans le panneau Résultats.

Accès au problème suivant/précédent détecté dans le code

Dans le menu Vérification de la compatibilité avec les navigateurs de la barre d'outils du document, Sélectionnez Problème suivant ou Problème précédent.

Sélection des navigateurs à faire vérifier par Dreamweaver

1 Dans le panneau Résultats (Fenêtre > Résultats), Sélectionnez l'onglet Vérification de la compatibilité avec les navigateurs.
2 Cliquez sur la flèche verte dans le coin supérieur gauche du panneau Résultats, puis choisissez Paramétres.
3 Sélectionnez la case à cocher située en regard des navigateurs à vérifier.
4 Dans le menu dérouulant correspondant aux navigateurs scélectionnés, vousdezindiquer la version minimale devant estreverifiée.

Par exemple, pour vérifier si la restitution CSS peut s'afficher dans Internet Explorer 5.0 et versions ultérieures et dans Netscape Navigator 7.0 et versions ultérieures, cochez les cases correspondant aux noms de ces navigateurs, puis selectionnez 5.0 dans le menu dérouulant Internet Explorer et 7.0 dans le menu dérouulant Netscape.

Exclusion d'un problème de la vérification de compatibilité avec les navigateurs

1 Execuéz une vérification de compatibilité avec les navigateurs.
2 Dans le panneau Résultats, cliquez avec le bouton droit de la souris (Windows) ou en Maintenant la touche Ctrl enfoncée (Macintosh) sur le problème que vous souhaitez exclure des vérifications futures.
3 Cliquez sur Ignorer le problème dans le menu contextual.

Modification de la liste des problèmes ignorés

1 Dans le panneau Résultats (Fenêtre > Résultats), Sélectionnez l'onglet Vérification de la compatibilité avec les navigateurs.
2 Cliquez sur la flèche verte dans le coin supérieur gauche du panneau Résultats, puis choisissez Modifier la liste des problèmes ignorés.
3 Dans le fjichier Exceptions.xml, recherche le problème que vous souhaitez supprimer de la liste des problèmes ignorés et supprimez-le.
4 Enregistrez et fermez le fichier Exceptions.xml.

Sauvegarde d'un rapport de vérification de compatibilité avec les navigateurs

1 Execuéz une vérification de compatibilité avec les navigateurs.
2 Cliquez sur le bouton Enregisterir le rapport dans le cote gauche du panneau Résultats.

Amenez le pointeur de la souris sur les boutons du panneau Résultats pour afficher les info-bulles relatives à chaque bouton.

Note: Les rapportes ne sont pas enregistrés automatiquement; si vous souhaitez conserver une copie d'un rapport, vous doivent suivre la procédure ci-dessus pour l'enregistrer.

Affichage d'un rapport de vérification de compatibilité avec les navigateurs dans un navigateur

1 Execuéz une vérification de compatibilité avec les navigateurs.
2 Cliques sur le bouton Parcourir le rapport dans le côté gauche du panneau Résultats.

Amenez le pointeur de la souris sur les boutons du panneau Résultats pour afficher les info-bulles relatives à chaque bouton.

Ouverture du site Web Adobe CSS Advisor

1 Dans le panneau Résultats (Fenêtre > Résultats), Sélectionnez l'onglet Vérification de la compatibilité avec les navigateurs.
2 Cliquez sur le texte du lien situé dans l'angle inférieur droit du panneau.

Utilisation des feuilles de style à la conception

Les feuilles de style à la conception permettent d'afficher ou de masquer la conception appliquée par une feuille de style CSS lorsque vous travailliez dans un document Dreamweaver. Vous pouvez par exemple utiliser cette fonction pour inclure ou exclure l'effect 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 travailliez dans un document ; lorsque la page est affichée dans une fenêtre de navigateur, seuils les styles réalisent attachés au document ou qui y sont incorpores apparaisent.

Note: Vous pouvez également activer ou désactiver des styles pour l'ensemble d'une page à l'aide de la barre d'outils Rendu du style. Pour afficher la barre d'outils standard,CHOISEZ AFFICHAGE > BARRES d'outils > RENDU de style. Le bouton Intervertir l'affichage des Styles CSS (le plus a droite) fonctionne independament des autres boutons de support de la barre d'outils.

Pour utiliser une feuille de style à la conception, procédez comme suit.

1 Ouvrez la boite de dialogue Feuilles de style à la conception en procédant de l'une des manières suivantes :

• Cliquez avec le bouton droit de la souris dans le panneau Styles CSS etCHOISSEZ CONCEPTION dans le menu contextualuel.
• Choisissez Format > Styles CSS > Conception.

2 Dans la boite de dialogue, definisseez les options d'affichage ou de masquage de la feuille de style selectionnee :

• 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 recherche 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 listedes, cliquez sur la feuille de style que vous pouze supprimer, puis cliquez sur le bouton moins (-) approprié.
  3 Cliqueur OK pour fermer la boite 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.

More Help topics

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

Utilisation des exemples de feuilles de style de Dreamweaver

Dreamweaver est fourni avec des exemple de feuilles de style que vous pouvez appliquer à vos pages ou que vous pouvez utiliser comme points de départ pour creer vos propres styles.

1 Ouvrez le panneau Styles CSS en procédant de l'une des manières suivantes :
- Choisissez Fenetre > 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 boite de dialogue Ajouter une feuille de style externe, cliquez sur Exemples de feuilles de style.
4 Dans la boite de dialogue Exemples de feuilles de style, selectionnez une feuille de style dans la liste déroulante.

Lorsque vous sélectionné 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 votrechoix 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'este pas, Dreamweaver le cree. Vous pouze enregister le fichier dans un autre emplacement en cliuant sur le bouton Parcourir pour rechercher un autre dossier.
7 Lorsque you couze une feuille de style dont les regles correspondant a vos criteres, cliquez sur OK.

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

Les utilisateurs d'Adobe Contribute ne peuvent pas apporter de modifications à une feuille de style CSS. Pour modifier une feuille de style pour un site Contribute, utilisez Dreamweaver.

1 Utilisez les outils de modification de feuille de style prsent dans Dreamweaver pour modifier les feuilles de style.
2 Avertissez les utilisateurs de Contribute qui travaillent à la publication des pages que vous utilisez une feuille de style définitie. Modifiez ensuite à nouveau ces pages pour voir la nouvelle feuille de style.

Les facteurs suivants doivent être pris en compte lors de la mise à jour de feuilles de style pour un site Contribute :

• Si vous apportez des modifications à une feuille de style alors qu'un utilisateur de Contribute modifie une page qui utilise cette feuille de style, l'utilisteur ne pourrait pas observer les changements apportés à la feuille de style tant que la page ne sera pas publiée.
• Si vous supprimez un style d'une feuille de style, le nom du style en question n'est pas suprimé des pages qui utilisent cette feuille, mais, puisque le style n'este plus, il n'est pas applique à la page comme l'utilisateur de Contribute pourrait s'y attendre. Ainsi, si un utiliser vous déclare que rien ne se passse lorsque celui-ci applique un style donné, il est possible que le style ait eté suprimé de la feuille de style.

Mise en forme des pages avec CSS

A propos de la mise en page CSS

Une mise en page CSS utilise le format de feuilles de style CSS, au lieu de tables ou de cadres HTML traditionnels, pour organiser le contenu d'une page Web. Les éléments de base de la mise en forme CSS est la balise div : il s'agit d'une balise HTML qui, la plupart du temps, sert de conteneur pour du texte, des images et d'autres éléments de page. Lorsque vous creez une mise en forme CSS, vous placez des balises div dans la page, leur ajoutez du contenu et les positionnez en différents endroits. A la différence des cellules de tableau, qui ne peuvent exister qu'a l'intérieur de lignes et de colonnes d'un tableau, les balises div peut figurer n'importe où sur une page Web. Vous pouvez positionner des balises div de façon absolue (en indiquant des coordonnées x et y) ou de façon relative (en spécifique leur distance par rapport à d'autres éléments de page). Vous pouvez également placer des balises div afin de définir des éléments flottants, des marges interieurs et des marges. Cette méthode est privilégiee dans les normes Web modernes.

La création de mises en forme CSS entièrement nouvelles peut s'avérer difficile car il existe de très nombreux moyens de procéder. Vous pouvez créé une mise en forme CSS simple à deux colonnes en définissant des éléments flottants, des marges, des replissages et d'autres propriétés CSS dans un nombre de combinaisons quasi illimité. En outre, le problème de restitution sur différents types de navigateurs entraine un affichage aléatoire de certaines mises en forme CSS qui sont correctement ou incorrectly restituees en fonction du navigateur utilisé. Dreamweaver vous permet de creator facilement des pages à l'aide de mises en forme CSS en fournissant 16 mises en forme prédéfinitions qui fonctionnent sur différents types de navigateurs.

L'utilisation de mises en forme CSS prédéfinitiones fournies avec Dreamweaver constitue la façon la plus simple de créé une page avec une mise en forme, mais vous pouvez également créé des mises en forme CSS à l'aide d'éléments à positionnement absolu ( éléments PA) de Dreamweaver. Dans Dreamweaver, un élément PA est un élément de page HTML (plus précisé, une balise div ou toute autre balise) auquel une position absolue est attribuée. Toutefois, du fait de leur positionnement absolu, les éléments PA de Dreamweaverprésentant l'inconvénient de ne jamais adapter leur position à la page en fonction de la taille de la fenêtre du navigateur.

Si vous étés un utilisateur chevronné, vous pouvez également insérer des balises div manuellement et leur appliquer des styles de positionnement CSS pour créé des mises en page.

A propos de la structure de mise en page CSS

Avant de dire cette section, vous nevez vous etre familiarise avec les concepts CSS de base.

Les éléments de base de la mise en forme CSS est la balise div : il s'agit d'une balise HTML qui, la plupart du temps, sert de conteneur pour du texte, des images et d'autres éléments de page. L'exemple ci-dessous montre une page HTML qui contient trois balises div distinctes : une balise container de grande taille, et deux autres balises (une balise sidebar et une balise main content) situées à l'intérieur de la balise container.

A. Div Container B. Div sidebar C. Div Main Content

Voici le code correspondant à ces trois balises div dans le code HTML :

<!--container div tag-->   
<div id="container">   
<!--sidebar div tag-->   
<div id="sidebar">   
<h3>Sidebar Content</h3>   
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>   
<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>   
</div>   
<!--主要内容 div tag-->   
<div id="主要内容">   
<h1> Main Content </h1>   
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum.</p>   
<p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>   
<h2>H2 level heading </h2>   
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum,(erat nulla fermentum diam, at nonummy quam ante ac quam.</p>   
</div>   
</div> 

Dans l'exemple ci-dessus,aucun style n'est associé aux balises div. Si aucune règle CSS n'est définie, chaque balise div et son contenu prend un emplacement par défaut sur la page.Toutefois,si chaque balise div possede un ID unique ( comme dans l'exemple ci-dessus),vous pouvez utiliser ces identificateurs pour creer des règles CSS qui, une fois appliquées, modifiert le style et le positionnement des balises div.

La règle CSS suivant, qui peut résider dans la section head du document ou dans un fichier CSS externe, créé des règles de style pour la première balise div (container) de la page :

#container { width: 780px; background: #FFFFFF; margin: 0 auto; border: 1px solid #000000; text-align: left; } 

La règle #container applique un style à la balise div container qui lui donne une largeur de 780 pixels, un arrêté-plan blanc, aucune marge (depuis la gauche de la page), une cordure noire continue de 1 pixel et un texte aligné à gauche. Les résultats de l'application de la règle à la balise div container sont les suivants :

Balise div Container, 780 pixels, pas de marge

A. Texte aligné à gauche B. Arrière-plan blanc C. Bordure noire pleine d'un pixel

La règule CSS suivant creé des règles de style pour la balise div sidebar :

#sidebar {
    float: left;
    width: 200px;
    background: #EBEBEB;
    padding: 15px 10px 15px 20px;
} 

La règle #sidebar applique un style à la balise div sidebar qui lui donne une largeur de 200 pixels, un arrêté-plan gris, un replissage haut et bas de 15 pixels, un replissage droite de 10 pixels et un replissage gauche de 20 pixels. L'ordre de replissage par défaut est le suivant : haut, droite, bas, gauche. En outre, la règle positionne la balise div sidebar avec float: left, propriété qui pousse la balise div sidebar vers le côté gauche de la balise div container. Les résultats de l'application de la règle à la balise div sidebar sont les suivants :

Div sidebar, flottante à gache

A. Largeur de 200 pixels B. Remplissage haut et bas de 15 pixels

Enfin, la règle CSS pour la balise div container principale termine la mise en forme :

#mainContent {
    margin: 0 0 0 250px;
    padding: 0 20px 20px 20px;
} 

La règle #mainContent applique un style à la balise div main qui lui donne une marge gauche de 250 pixels, ce qui correspond à un espace de 250 pixels entre le côté gauche de la balise div container et le côté gauche de la balise div main content. En outre, la règle prévoit 20 pixels d'espacement sur les côts droit, bas et gauche de la balise div main content. Les résultats de l'application de la règle à la balise div主要内容 sont les suivants :

Div main content, marge gauche de 250 pixels

A. replissage gauche de 20 pixels B. replissage droit de 20 pixels C. replissage bas de 20 pixels

Le code complet resemble à ce qui suit :

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#container {
    width: 780px;
    background: #FFFFFF;
    margin: 0 auto;
    border: 1px solid #000000;
    text-align: left;
}
#sidebar {
    float: left;
    width: 200px;
    background: #EBEBEB;
    padding: 15px 10px 15px 20px;
}
#主要内容 {
    margin: 0 0 0 250px;
    padding: 0 20px 20px 20px;
}
</style>
</head>
<body>
<!--container div tag-->
<div id="container">
    <!--sidebar div tag-->
    <div id="sidebar">
        <h3>Sidebar Content</h3>
        <p>Romem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
        <p>Maecenas urna purus, fermentum id, molestie in, commercio porttitor, felis.</p>
        </div>
    <!--主要内容 div tag-->
    <div id="主要内容">
        <h1>Main Content</h1>
        <p>Romem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum.</p>
        <p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiamleo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
        <h2>H2 level heading</h2>
        <p>Romem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p>
        </div>
</body>
</head> 

Note: L'exemple code ci-dessus est une version simplifiée du code qui creé la mise en forme à deux colonnes avec encadré à gauche fixe lorsque vous créez un nouveau document à l'aide des mises en formes prédéfinies fournies avec

Dreamweaver.

More Help topics

"Description des feuilles de style en cascade" on page 132

Création d'une page avec une mise en forme CSS

Lors de la création d'une nouvelle page dans Dreamweaver, vous pouvez enisser une qui contient déjà une mise en forme CSS. Dreamweaver vous permet deCHOISIR parmi 16 mises en forme CSS. En outre, vous pouvez creer vos propres mises en forme CSS et les ajouter au dossier de configuration pour qu'elles figurent parmi les choix de mise en forme dans la boite de dialogue Nouveau Document.

Dreamweaver Les mises en page CSS sont restituetes correctement dans les navigateurs suivants : Firefox (Windows et Macintosh) 1.0, 1.5, 2.0 et, and 3.6, Internet Explorer (Windows) 5.5, 6.0, 7.0 et 8.0, Opera (Windows et Macintosh) 8.0, 9.0 et 10.0, Safari 2.0, 3.0 et 4.0 et Chrome 3.0.

Voutrouvrez un article expliquant comment utiliser les mises en forme CSS fournies avec Dreamweaver dans le Pôle de développement Dreamweaver.

D'autres mises en forme CSS sont disponibles sur le site Adobe Dreamweaver Exchange.

More Help topics

"Creation d'une page vierge" on page 67

"Définition du type et du codage par défaut d'un document" on page 73

"Etablissement d'un lien vers une feuille de style CSS externe" on page 154

Création d'une page avec une mise en forme CSS

1 Choisissez Fichier > Nouveau.
2 Dans la boîte de dialogue Nouveau document, Sélectionnez la catégorie Modèle vierge. Il s'agit de la sélection par défaut.
3 Pour Type de page, Sélectionnéz le type de page à créé.

Note: Vous doivent désigné un type de page HTML pour la mise en forme. Par exemple, vous pouvez désigné un type de page HTML, ColdFusion®, PHP, etc. Vous ne pouvez pas créé de page ActionScript™, CSS, Library Item, JavaScript, XML, XSLT ou ColdFusion Component avec une mise en forme CSS. Les types de page de la catégorie Autre dans la boîte de dialogue Nouveau document ne peuvent pas non plus inclure de mises en page CSS.

4 Pour Mise en forme, Sélectionnéz la mise en forme CSS à utiliser. Vous pouvez désir parmi 16 mises en forme différentes. La fenêtre Aperçu montre la mise en forme sélectionnée et en donne une brève description.

Les mises en forme CSS prédéfinies fournissent les types de colonnes suivants :

Fixe La largeur de colonne est definié en pixels. La colonne n'est pas redimensionné selon la taille du navigateur ou des paramètres de texte du visiteur du site.

Liquide La largeur de colonne est definié en tant que pourcentage de la largeur du navigateur du visiteur du site. La mise en page s'adapte si le visiteur du site augmente ou diminue la largeur de son navigateur, mais pas en fonction des paramétres de texte défiinis par le visueur.

5 Sélectionnez un type de document dans le menu DocType.
6 Selectionne un emplacement pour le fichier CSS de la mise en forme dans le menu deroulaant CSS de mise en forme dans.

Ajouter à l'en-tête Ajoute le code CSS de mise en forme à l'en-tête de la page que vous créez.

Créer un nouveau fjichier Ajoute le code CSS de mise en forme à une nouvelle feuille de style CSS externe et associe la nouvelle feuille de style à la page que vous créez.

Lier au filchier existant Permet d'indiquer un filchier CSS existant qui contient déjà les règes CSS requises pour la mise en forme. Cette option est particulièrement utile si vous poulez utiliser la même mise en forme CSS (les règes CSS figurant dans un filchier) dans plusieurs documents.

7 Effectuez l'une des opérations suivantes :

• Si vous avez selectionné Ajouter à l'en-tête dans le menu dérouulant CSS de mise en forme dans (l'option par défaut), cliquez sur Créer.
• Si vous avez selectionné Créer un nouveau fjichier dans le menu déroulant CSS de mise en forme, cliquez sur Créer, puis spécifiez un nouveau nom pour le nouveau fjichier externe dans la boîte de dialogue Enregisterr la feuille de style sous.
• Si vous avez selectionné Lier au fjichier existant dans le menu dérouulant CSS de mise en forme dans, ajoutez le fjichier externe dans la zone de texte Lier le fjichier CSS en cliquant sur l'icone d'ajout de feuille de style, en renseignant la boîte de dialogue Associé feuille de style externe et en cliquant sur OK. Une fois que vous avez terminé, cliquez sur Créer dans la boîte de dialogue Nouveau document.

Note: Lorsque vous selectionné z'option Lier au fichier existant, le fichier que vous spécifie doit déjà contirnir les règles correspondant au fichier CSS.

Lorsque vous placez le CSS de mise en forme dans un nouveau fjichier ou lorsque vous le liez à un fjichier existant, Dreamweaver lie immeditatement le fjichier à la page HTML que vous créez.

Note: Les Commentaires conditionnels pour Internet Explorer, qui permettent de contourner les problèmes de rendu dans IE, restent incorpore dans la section head du nouveau document de mise en forme CSS, même si vous sélectionnez Nouveau fjichier externe ou Fichier externe existant en tant qu'emplacement pour votre fjichier CSS de mise en forme;

8 (Facultatif) Vous pouvez égalementlier des feuilles de style CSS à la nouvelle page (sans rapport avec la mise en forme CSS) lors de la création de cette page. Pour ce faire,clinque sur I'icone Ajouter une feuille de style au-dessus du volet Lier le fjchier CSS, puis selectionnee une feuille de style CSS.

Voutrouvrez une description détaillée de ce processus dans l'article de David Powers « Automatically attaching a style sheet to new documents » (en anglais).

Ajout de mises en forme CSS personnalisées à la liste de besoin

1 Créez une page HTML contenant la mise en forme CSS que vous souhaitez ajouter à la liste de besoin de la boîte de dialogue Nouveau document Le fjichier CSS correspondant à la mise en forme doit résider dans la section head de la page HTML.
Pour uniformiser votre mise en forme CSS personnalisée avec les autres mises en formes fournies avec Dreamweaver, vous doivent enregistrer votre fichier HTML avec une extension .htm.
2 Ajoutez la page HTML au dossier Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts.
3 (Facultatif) Ajoutez une image d'aperçu de votre mise en forme (par exemple, un fisier .gif ou .png) au dossier Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts. Les images par défaut fournies avec Dreamweaver sont des fisiers PNG de 227 pixels de large x 193 pixels de haut.
Donnez à votre image d'aperçu le même nom de fichier que votre fichier de façon à pouvoir l'identifier facilement. Par exemple, si votre fichier HTML est nommé myCustomLayout.htm, appelez votre image d'aperçu myCustomLayout.png.
4 (Facultatif) Créez un fisier de notes pour votre mise en forme personnalisée en ouvrant le dossier Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts_.notes, en copiant et en collant les fichiers de notes existants dans le même dossier, et en renommant la copie en fonction de votre mise en forme personnalisée. Par exemple, vous pouvez copier le fisier oneColElsCtr.htm.mno et le renomer myCustomLayout.htm.mno.

5 (Facultatif) Àpèras avoir créé un fjichier de notes pour votre mise en forme personnalisé, vous pouvez ouvrir le fjichier et spécifique le nom de la mise en forme, sa description et une image d'aperçu.

Utilisation des balises div

Insertion et modification de balises div

Vou puez creer des mises en page en inscrant manuellement des balises div et en leur appliquant des styles de positionnement CSS. Une balise div est une balise qui definit les divisions logiques dans le contenu d'une page Web. Vous pouze utiliser des balises div pour center des blocs de contenu, creer des effets de colonne, creer différentes zones de couleur, etc.

Si vous ne connaissiez pas bien l'utilisation des balises div et des feuilles de style CSS pour creer des pages Web, vous pouze créé une mise en forme CSS à partir de l'une des mises en forme prédéfinies fournies avec Dreamweaver. Si vous n'êtes pas à l'aise dans l'utilisation des feuilles de style CSS, mais que vous connaissiez bien l'utilisation des tableaux, vous pouze également essayer d'utiliser des tableaux.

Note: Dreamweaver considère comme des éléments à positionnement absolu (éléments PA) toutes les balises div, même si vous n'avez pas créé ces balises div à l'aide de l'outil de dessin Div PA.

More Help topics

"A propos des éléments PA dans Dreamweaver" on page 173

"Creation d'une page avec une mise en forme CSS" on page 167

"Présentation de contenu à l'aide de tableaux" on page 188

Insertion de balises div

Vou puez utilise des balises div pour creer des blocs de mise en forme CSS et les placer dans voitre document. Cette methode est utile si une feuille de style CSS existante contenant des styles de positionnement est associée à voitre document. Dreamweaver vous permet d'insérer rapidement une balise div et de lui appliquer des styles existants.

1 Dans la fenetre de document, place le point d'insertion à l'endetroit où vous pouvez insérer la balise div.
2 Effectuez l'une des opérations suivantes :
- Choisissez Insertion > Objects mise en forme > Balise Div.
- Dans la catégorie Mise en forme du panneau Insertion, cliquez sur le bouton Insérer la balise Div.
3 Parmi les options suivantes, définissee celles de votre choix :

Insérer Permet de désirir l'emplacement de la balise div et le nom de la balise s'il ne s'agit pas d'une nouvelle.

Classe Affiche le style de classe actuellment applique a la balise. Si vous avez associé une feuille de style, les classes qui y sont definies s'affichent dans la liste. Ce menu permet de selectionner le style a appliquer a la balise.

ID Vouper de modifier le nom utilise pour identier la balise div. Si you aze associue une feuille de style, les ID qui y sont definis s'affichent dans laiste. Les ID des blocs deja presents dans your document ne sont pas repertoriés.

Note: Dreamweaver you averti si you tapez un ID deja affecte a une autre balise dans notre document.

Nouvelle règle de CSS Oùvre la boîte de dialogue Nouvelle règle CSS.

4 Cliquez sur OK.

La balise div s'affiche dans votre document sous la forme d'une zone contenant du texte d'espace réservé. Lorsque vous déplacez le pointeur sur le bord de cette zone, Dreamweaver la met en surbrillance.

Si la balise div est placé de manière absolue, elle devient un élément PA. Vous pouvez modifier les balises div qui ne sont pas à positionnement absolu.

More Help topics

"A propos des éléments PA dans Dreamweaver" on page 173

"Creation d'une page avec une mise en forme CSS" on page 167

Modification des balises div

Après avoir inséré une balise div, vous pouvez la manipuler ou lui ajouter du contenu.

Note: Les balises div qui sont positionnées de manière absolue deviennent des éléments PA.

Les balises div ont des cordures visibles lorsque vous leur attribuerez des cordures ou lorsque vous avez selectionné Contours en feuille CSS. (L'option Contours en feuille CSS est selectionnée par défaut dans le menu Affichage > Assistance visuelles.) Lorsque vous faites passer le pointeur sur une balise div, Dreamweaver la met en surbrillance. Vous pouvez modifier la couleur de la mise en surbrillance ou désactiver la mise en surbrillance.

Lorsque vous sélectionnez une balise div, vous pouvez afficher et modifier les règles correspondantes dans le panneau Styles CSS. Vous pouvez aussi ajouter du contenu à la balise div : placez simplement le point d'insertion à l'intérieur de la balise div, puis procédez à l'ajout du contenu comme vous le feriez pour celui d'une page.

More Help topics

"A propos des éléments PA dans Dreamweaver" on page 173

"Ouverture du panneau Styles CSS" on page 140

Affichage et modification des règles appliquées à une balise div

1 Procedez de l'une des manieres suivantes pour selectionner la balise div:
- Cliquez sur la cordure de la balise div.

Recherche la surbrillance afin de voir les cordures.

• Clique à l'intérieur de la balise div et appuyez sur les touches Ctrl+A (Windows) ou Commande+A (Macintosh) à deux reprises.
• Clique à l'intérieur de la balise div, puis Sélectionnez-laà partir du sélecteur de balises figurant au bas de la fenêtre du document.

2 Choisissez Fenêtre > Styles CSS pour afficher le panneau Styles CSS, si besoin est.
Les régles appliquées à la balise div s'affichent dans le panneau.
3 Effectuez les modifications nécessaires.

Placement du point d'insertion dans une balise div afin d'y ajouter du contenu

Cliquez n'importe ou à l'intérieur des cordures de la balise.

Modification du texte de l'espace réservé dans une balise div

Sélectionnez le texte, puis tapez un nouveau texte par-dessus ou appuyez sur la touche Suppr.

Note: Vous pouvez ajouter du contenu à la balise div exactement comme vous le fieriez dans une page.

Modification de la couleur de surbrillance des balises div

Lorsque vous faites passer le pointeur sur le pourtour d'une balise div en mode Creation, Dreamweaver met ses cordures en surbrillance. Vous pouze activer ou désactiver la surbrillance à votre convenance ou en modifier la couleur de surbrillance dans la boîte de dialogue Préférences.

1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
2 Sélectionnéz la catégorie Surbrillance dans la liste de gauche.
3 Effectuez l'une des modifications suivantes, puis cliquez sur OK :

• Pour modifier la couleur de surbrillance des balises div, cliquez dans la case de couleur Survol et seLECTIONnez une couleur de surbrillance à l'aide du sélecteur de couleur (ou tapez la valeur hexadécimale correspondant à la couleur de surbrillance dans la zone de texte).
  Pour activer ou désactiver la surbrillance des balises div, activez ou désactive la case à cocher Afficher de l'option Survol.

Note: Ces options ont un impact sur tous les objets (tableaux, par exemple) que Dreamweaver met en surbrillance lorsque vous y déplacez le pointeur.

Blocs de mise en forme CSS

Visualisation des blocs de mise en forme CSS

Vous pouvez visualiser les blocs de mise en forme CSS pendant que vous travailliez en mode Creation. 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é 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

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

Dreamweaver fournit de nombreuses assistances visuelles pour afficher les blocs de mise en forme CSS. Vous pouvez par exemple activer des contours, des arrêtements et le contrôle de boite 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é lorsqu'elles vous placez le pointeur dessus.

La liste suivante d'assistances visuelles de bloc de mise en forme CSS déscrit ce que Dreamweaver rend visible pour chacune d'elles :

Contours en feuille CSS Affiche les contours de tous les blocs de mise en forme CSS sur la page.

Arriere-plans de mise en forme CSS Affiche les couleurs d'arriere-plan affectees temporairement de chaque bloc de mise en forme CSS et masque toutes les autres couleurs d'arriere-plan ou images qui apparaissent normalement sur la page.

Lorsque vous activez les assistances visuelles pour afficher les arrêtere-plans de blocs de mise en forme CSS, Dreamweaver affecte automatiquement une couleur d'arriere-plan distincte à chaque bloc de mise en forme CSS.

((Dreamweaver selectionne 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 à désigner les blocs de mise en forme CSS les uns des autres.

Modèle de boite de mise en forme CSS Affiche le modele de boite (replissages et marges) du bloc de mise en forme CSS selektionné.

Affichage des blocs de mise en forme CSS

Vou puez activer ou desactiver les assistances visuelles des blocs de calques CSS en fonction des besoins.

Affichage des contours des blocs de mise en forme CSS

Choisissez Affichage > Assistances visuelles > Contours en feuille CSS.

Affichage des arrêté-plans de blocs de mise en forme CSS

Choisissez Affichage > Assistances visuelles > Arriere-plans de mise en forme CSS.

Affichage des modèles de boîte de blocs de mise en forme CSS

Choisissez Affichage > Assistances visuelles > Modèle de boîte de mise en forme CSS.

Pour acceder aux options d'assistances visuelles des blocs de mise en forme CSS, vous pouvez aussi cliquer sur le bouton Assistances visuelles de la barre d'outils du document.

Utilisation des assistances visuelles avec des éléments de blocs de mise en forme non-CSS

Vous pouvez utiliser une feuille de style à la conception pour afficher les arrêtre-plans, les cordures ou le modele de boite d' éléments qui ne sont pas normalement considérés comme des blocs de mise en forme CSS. Pour ce faire, vous ne d'abord创建工作 une feuille de style à la conception qui affecte l'attribut display:block à l'element de page approprié.

1 Créez une feuille de style en cascade (CSS) externe. Pour ce faire, choisissez Fichier > Nouveau, puis sélectionné. 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, creez des règles qui affectent l'attribut display:block aux éléments de page à afficher en tant que blocs de mise en forme CSS.

Si, par exemple, vous souhaitez appliquer une couleur d'arrière-plan aux paragraphs ou aux éléments de liste, vous pouvezisser une feuille de style compensant les régles suivantes :

p{ display:block; } li{ display:block; } 

3 Enregistrez le fichier.
4 En mode Création, ouvre la page à laquelle vous souhaitez associier les nouveaux styles.
5 Choisissez Format > Styles CSS > Conception.
6 Dans la boite 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électionnéz la feuille de style que vous venez de créé et cliquez sur OK.
7 Cliquez sur OK pour fermer la boite de dialogue Feuilles de style à la conception.

La feuille de style est associée à votre document. Si vous avons créé une feuille de style en suivant l'exemple précédent, tous les paragraphs et éléments de liste seront formats au moyen de l'attribut display:block. Vous pouze ainsi activer ou désactiver les assistances visuelles de bloc de mise en forme CSS pour les paragraphs et les éléments de liste.

More Help topics

"Utilisation des feuilles de style à la conception" on page 160

Utilisation d'éléments PA

A propos des éléments PA dans Dreamweaver

Un élément PA (élément à positionnement absolu) est un élément de page HTML (plus précisé, une balise div ou toute autre balise) auquel une position absolue est attribuée. Les éléments PA peuvent compter du texte, des images ou tout autre contenu à placer au sein d'un document HTML.

Dreamweaver you permit d'effectuer la mise en forme d'une page à l'aide d'éléments PA. Vous pouvez placer les éléments PA devant ou derrière d'autres éléments PA, masquer certains d'entre eux et en montré autres ou encore déplacer les éléments PA à travers l'écran. Vous pouvez placer une image d'arrière-plan dans un élément PA, puis placer un deuxième élément PA contenant du texte avec un arrière-plan transparent devant ce dernier.

Les éléments PA sont généralement des balises div PA. (Ce sont les types d' éléments PA que Dreamweaver insère par défaut.) Mais n'oubliez pas que vous pouvez classifier tout élément HTML (par exemple, une image) en tant qu'élement PA en lui affectant une position absolue. Tous les éléments PA (et pas uniquement les balises div PA) s'affichent dans le panneau Éléments PA.

Code HTML pour éléments div PA

Dreamweaver create des éléments PA en utilisant la balise div. Lorsque vous creez un élément PA à l'aide de l'outil Tracer un div pour un élément PA, Dreamweaver insère une balise div dans le document et attribue à la balise div une valeur ID (DivAP1 par défaut au premier div que vous tracez, DivAP2, au deuxième div que vous tracez, etc.). Vous pouvez renomer la div PA à votre guise par la suite au moyen du panneau Éléments PA ou de l'inspecteur Propriétés. Dreamweaver utilise également des styles CSS intégrés dans la section head du document pour positionner la balise div PA et pour lui affecter ses dimensions exactes.

Ce qui suit est un échantillon de code HTML pour une div PA :

Vou puez definir les propriétés des balises div PA (ou tout élément PA) de votre page, y compris les coordonnées x et y, l'index z (égarlement appelé ordre de superposition) et la visibilité.

Insertion d'une balise div PA

Dreamweaver you permit de creator facilement des balises div PA sur votre page et de les positionner. Vous pouvez également creator des balises div PA imbriquées.

Lorsque vous insérez une div PA, Dreamweaver affiche par défaut sa cordure en mode Création et met le bloc en surbrillance lorsque vous passsez le pointeur dessus. Vous pouze désactiver l'assistance visuelle qui affiche les contours des divs PA (ou de tout élément PA) en désactivant Contours des éléments PA et Contours en feuille CSS dans le menu Affichage > Assistances visuelles. Vous pouze également activer les arrêtre-plans et le modele de boite pour les éléments PA en guise d'aide visuelle lors de la conception.

Une fois une balise div PA creée, vous pouvez y ajouter du contenu en plaçant simplement votre point d'insertion dessus, puis en ajoutant le contenu comme vous le feriez pour celui d'une page.

More Help topics

"Modification de la couleur de surbrillance des balises div" on page 171

"Visualisation des blocs de mise en forme CSS" on page 171

Traçage d'une seule balise div PA ou de plusieurs balises div PA à la suite

1 Dans la catégorie Mise en forme du panneau Insertion, cliquez sur le bouton Tracer un div pour un element PA
2 Dans la fenêtre de création du document, procédez de l'une des manières suivantes :

• Faites glisser le pointeur pour dessiner une seule div PA.
• Maintenez la touche Ctrl (Windows) ou Commande (Macintosh) enforcée pour dessiner plusieurs divs PA à la suite.

Vou puez continuer à tracer des divis PA tant que vous n'avoz pas relaché les touches Ctrl ou Commande.

Insertion d'une div PA à un endroit précis du document

Placez le point d'insertion dans la fenetre de document, puis choisissez Insertion > Objects mise en forme > Div PA.

Note: La balise associée à la div PA est placé à l'emplacement sur lequel vous avez cliqué dans la fenêtre de document. Le rendu visuel de la balise div PA est donc susceptible d'affector les autres éléments de page (le texte par exemple) qui l'entourent.

Placement du point d'insertion dans une div PA

Cliquez n'importe ou à l'intérieur des cordures de la balise div PA.

Le contour de la div PA est en surbrillance et la poignée de selection apparait, mais la balise elle-même n'est pas sélectionnée.

Affichage des cordures d'une div PA

Choisissez Affichage > Assistances visuelles, puis selectionnee Contours des divs PA ou Contours en feuille CSS.

Note: La selection simultanée des deux options a le même effet.

Masquage des cordures d'une div PA

Choisissez Affichage > Assistances visuelles, puis déslectionnez Contours des divis PA et Contours en feuille CSS.

Utilisation de divis PA imbriquées

Une div PA imbriquee est une balise div PA dont le code est contenu à l'intérieur des balises d'une autre div PA. Par exemple, le code suivant montre deux div PA qui ne sont pas imbriquées, et deux divs PA qui le sont :

<div id="apDiv1"></div>  
<div id="apDiv2"></div>  
<div id="apDiv3">  
    <div id="apDiv4"></div>  
</div> 

La représentation graphique de ces deux groupes de balises div PA pourrait ressembler à ce qui suit :

Dans le premier groupe de balises div, une div se trouve au dessus de l'autre dans la page. Dans le deuxième groupe, la balise div apDiv4 se trouve effectivement à l'intérieur de la balise div apDiv3. (Vous pouvez modifier l'ordre de superposition des divs PA dans le panneau Éléments PA.)

L'imbriication est souvent utilisée pour regrouper des balises div PA. Une balise div PA imbriquée se déplace avec sa div PA parent et peut être configurée pour hériter de la visibilité de son parent.

Vous pouvez activer l'option Imbrication si vous voulez que les divis PA que vous dessinez à l'intérieur d'autres div PA soient automatiquement imbriquées. Pour creer une div PA à l'intérieur ou par dessus une autre div PA, vous nevez aussi déslectionner l'option Empêcher les chevauchements.

Dessin d'une div PA imbriquée

1 Assurez-vous que l'option Empêcher les chevauchements est déslectionné dans le panneau Éléments PA (Fenêtre > Éléments PA).
2 Dans la catégorie Mise en forme du panneau Insertion, cliquez sur le bouton Tracer un div pour un element PA
3 Dans la fenetre de creation du document, dessinez une balise div PA à l'intérieur d'une div PA existante en faisant glisser la souris.

Si l'option Imbrication est désactivée dans les préférences des éléments PA, maintenez la touche Alt (Windows) ou Option (Macintosh) enforcée et faites glisser une div PA pour l'imbriquer dans une div PA existante.

Les divs PA imbriquées peuvent s'afficher différemment suivant les navigateurs. Lorsque vous créEZ des divs PA imbriquées, contrôlez régulierément leur affichage dans différents navigateurs au cours du processus de création.

Insertion d'une div PA imbriquée

1 Assurez-vous que l'option Empecher les chevauchements est déslectionnée.
2 Placez le point d'insertion à l'intérieur d'une div PA existante dans la fenêtre de création du document, puis choisissez Insertion > Objects mise en forme > Div PA.

Imbrication des balises div PA automatiquement lorsque vous dessinez une div PA à l'intérieur d'une autre div PA

Sélectionné l'options Imbrication dans les préférences des éléments PA.

Affichage ou définition des préférences des éléments PA

Utilisez la catégorie Éléments PA dans la boite de dialogue Préférences pour indiquer les paramètres par défaut des nouveaux éléments PA créés.

1 Choisissez Edition > Preférences (Windows) ou Dreamweaver > Préférences (Macintosh).
2 Sélectionnez la catégorie Éléments PA dans la liste à gauche, sélectionnez des éléments PA et définièsez les préférences suivantes, puis cliquez sur OK.

Visibilité Déterminé si les éléments PA sont visibles par défaut. Les options sont par défaut, heriter, visible et masqué.

Largeur et Hauteur Indiquez une largeur et une hauteur par défaut (en pixels) pour les éléments PA que vous créez à l'aide du menu Insertion > Objects mise en forme > Div PA.

Couleur d'arrière-plan Sécífie une couleur d'arrière-plan par défaut. Sélectionnez une couleur à l'aide du sélecteur de couleur.

Image d'arrière-plan Sécífie une image d'arrière-plan par défaut. Cliquez sur Parcourir pour trouver le fichier de l'image sur votre ordinateur.

Imbrication: Imbriquer en cas de creation dans une div PA Indique si une div PA que vous dessinez à partir d'un pointitué dans les limites d'une div PA existante doit être une div PA imbriquée. Maintenez la touche Alt (Windows) ou Option (Macintosh) enforcée pour modifier temporairement ce paramètre lorsque vous dessinez une div PA.

Affichage ou définition des propriétés pour un seul élément PA

Lorsque you selectionnez un élément PA, linspecteur Propriétés affiche les propriétés de cet élément.

1 Sélectionnéz un élément PA.

2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), cliquez sur la flèche d'agrandissement située dans le coin inférieur droit (si l'inspecteur est affché en mode réduit) pour visualiser l'ensemble des propriétés.

3 Parmi les options suivantes, définissee celles de votrechioix :

Elément CSS-P Spécifie un identificateur pour l'élement PA seLECTIONné. Cet ID identifie l'élement PA dans le panneau Eléments PA et dans le code JavaScript.

Seuls les caractères alphanumerices sont acceptés ; n'utilise aucun caractère spécial comme les espaces, les traits d'union, les barres obliques ou les points. Chaque élément PA doit avoir un ID unique.

Note: L'inspecteur Propriétés CSS-P présente les mêmes options pour les éléments à positionnement relatif.

GetS (gauche et haut) Indiquez la position du coin supérieur gauche de I'elément PA par rapport au coin supérieur gauche de la page, ou de I'elément PA parent s'il est imbriqué.

Let H Indiquez la largeur et la hauteur de I'ellement PA.

Note: Si le contenu d'un élément PA dépasse la taille indiquée, le bord inférieur de cet élément PA (tel qu'il apparait en mode Création dans Dreamweaver) s'étire proportionnellement. (Le bord inférieur ne s'étend pas lorsque l'élement PA apparait dans un navigateur, sauf si la propriété Débordement est définie sur Visible).

L'unité par défaut de la position et de la taille est le pixel (px). Vous pouvez égalementCHOISIR les unités suivantes: pc (picas), pt (points), in (pouces), mm (millimètres), cm (centimètres) ou% (pourcentage de la valeur équivalente de l'élement PA parent). Les abréviations doivent suivre la valeur sans espace : par exemple, 3mm.

Index Z Determine l'index z ou ordre de superposition, de I'elément PA.

Dans un navigateur, les éléments PA portant les valeurs les plus élevées se superposent aux éléments PA portant les valeurs moins élevées. Les valeurs peuvent être positives ou négatives. Il est plus facile de modifier l'ordre de superposition des éléments PA à l'aide du panneau éléments PA qu'en saisissant des valeurs d'index z spécifiques.

Vis Indique si I'elément PA est initialement visible ou non. Faites votrechoix parmi les options suivantes :

• Aucune propriété de visibilité n'est définié par défaut. Lorsque aucune visibilité n'est précisée, la plupart des navigateurs choisisent Hériter.
• L'option Hériter utilise la propriété de visibilité de l'objet parent de l'élement PA.
  Visible affiche le contenu de l'objet PA,quelle que soit la valeur du parent.
• Masqué dissimule le contenu de l'élement PA,quelle que soit la valeur du parent.

Utilisez un langage de script, par exemple JavaScript, pour contrôler la propriété de visibilité et afficher le contenu des éléments PA de façon dynamique.

Image ar-pl Sécífie une image d'arrière-plan pour l'élement PA.

Cliquez sur l'icone du dossier à parcourir et selectionnez un filchier d'image.

Couleur d'ar-pl. Specified une couleur d'arrière-plan pour l'élement PA.

Laissez cette option vide pour spécifique un arrêté-plan transparent.

Classe Indique la classe CSS utilisé pour creer l'élément PA.

Débordement Contrôle la manière dont les éléments PA apparaissent dans un navigateur lorsque le contenu dépasse la taille spécifique de l'objet PA.

Visible indique que le contentu supplémentaire apparaître dans l'objet PA; en fait, l'objet PA s'agrandit proportionnellement. Masqué signifie que le contentu supplémentaire ne sera pas affché dans le navigateur. Défilament indique que le navigateur devra ajouter des barres de défilament dans l'objet PA, qu'elle soient nécessaires ou non. Auto entraîne l'affichage des barres de défilament de l'objet PA dans le navigateur uniquement lorsque cela est nécessaire (c'est-à-dire lorsque le contenu de l'objet PA dépasse ses limites).

Note: La prise en charge de l'option Débordement est inégale suivant les navigateurs.

Détourage Définit la zone visible de l'élément PA.

Indiquez les coordonnées gauche, haut, droite et bas pour définir un rectangle dans le champ des coordonnées de l'objet PA (en partant du coin supérieur gauche de l'objet PA). L'objet PA est « détouré » afin que seul le rectangle spécifique soit visible. Par exemple, pour rendre le contenu d'un élément PA invisible à l'exception d'un rectanglevisibled'une largeurde 50 pixels et d'une hauteurde 75 pixels dans le coin supérieur gauche de I'objet PA, définiSEEZ G sur O,S sur O,D sur 50 et B sur 75.

Note: Bien que les feuilles de style en cascade utilisent des termes différents pour le détourage, Dreamweaver interprête le détourage de la même manière que la plupart des navigateurs.

4 Si vous avez tape une valeur dans une zone de texte, appuyez sur Tab ou Entrée (Windows) ou Retour (Macintosh) pour l'appliquer.

Affichage ou définition des propriétés pour plusieurs éléments PA

Lorsque you selectionnez plusieurs éléments PA, l'inspecteur Propriétés affiche les propriétés du texte et un sous-ensemble de propriétés d'objet PA standard, ce qui vous permet de modifier plusieurs éléments PA simultanément.

Sélection de plusieurs éléments PA

Sélectionnez les éléments PA tout en maintainant la touche Maj enforcée.

Affichage et définition des propriétés pour plusieurs éléments PA

1 Sélectionnez plusieurs éléments PA.
2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), cliquez sur la flèche d'agrandissement située dans le coin inférieur droit (si l'inspecteur est affché en mode réduit) pour visualiser l'ensemble des propriétés.

3 Définisse les propriétés suivantes pour plusieurs éléments PA :

G et S (gauche et haut) Indiquez la position du coin supérieur gauche des éléments PA par rapport au coin supérieur gauche de la page, ou de l'élément PA parent s'ils sont imbriqués.

Let H Indiquez la largeur et la hauteur des elements PA.

Note: Si le contenu de l'un des éléments PA dépasse la taille indiquée, le bord inférieur de cet élément PA (tel qu'il apparait en mode Création dans Dreamweaver) s'estri proportionnellement. (Le bord inférieur ne s'estend pas lorsque l'élement PA apparait dans un navigateur, sauf si la propriété Débordement est définie sur Visible).

L'unité par défaut de la position et de la taille est le pixel (px). Vous pouvez également désignir les unités suivantes : pc (picas), pt (points), in (pouces), mm (millimètres), cm (centimètres) ou% (pourcentage de la valeur équivalente de l'élement PA parent). Les abréviations doivent suivre la valeur sans espace : par exemple, 3mm.

Vis Indique si les éléments PA sont initialement visibles ou non. Faites vous choix parmi les options suivantes :

• Aucune propriété de visibilité n'est définitie par défaut. Lorsque aucune visibilité n'est précisée, la plupart des navigateurs choisisent Hériter.
• L'option Hériter utilise la propriété de visibilité de l'objet parent des éléments PA.
  Visible affiche le contenu des éléments PA,quelle que soit la valeur du parent.
• Masqué dissimule le contentu de l'élement PA,quelle que soit la valeur du parent.

Utilisez un langage de script, par exemple JavaScript, pour contrôler la propriété de visibilité et afficher le contenu des éléments PA de façon dynamique.

Balise Indique la balise HTML utilisé pour définir les éléments PA.

Image ar-pl Sécífie une image d'arrière-plan pour les éléments PA.

Cliquez sur l'icone du dossier à parcourir et selectionnez un filchier d'image.

Couleur d'ar-pl. Sécífie une couleur d'arrière-plan pour les éléments PA. Laissez cette option vide pour spécifique un arrêté-plan transparent.

4 Si vous avez tapé une valeur dans une zone de texte, appuyez sur Tab ou Entre (Windows) ou Retour (Macintosh) pour l'appliquer.

Présentation du panneau Éléments PA

Le panneau Éléments PA (Fenêtre > Éléments PA) vous permet de:gérer les éléments PA de votre document. Utilisez le panneau Éléments PA pour empêcher les éléments PA de se chevaucher, pour en modifier la visibilité, pour les imbriquer ou les superposer et pour en selectionner un ou plusieurs.

Note: Dans Dreamweaver, un élément PA est un élément de page HTML (plus précisément, une balise d'ou toute autre balise) auquel une position absolue est attribuée. Le panneau Éléments PA n'affiche pas les éléments à positionnement relatif.

Les éléments PA sont affichés sous la forme d'une liste de noms, dans l'ordre de l'index z ; le premier élément PA créé (dote d'un index z de 1) apparait par défaut en bas de la liste et le dernier élément PA créé apparaît en haut de la liste. Vous pouvez toute fois modifier l'index z d'un élément PA en changeant sa place dans l'ordre de superposition. Par exemple, si vous créez huit éléments PA et souhaitez déplacer le quatrième élément PA en haut de la liste, vous pouvez lui affecter un index z supérieur à celui des autres éléments PA.

Selection d'éléments PA

Vou puez selectionner un ou plusieurs elements PA pour les manipuler ou en modifier les propriétés.

Sélection d'un élément PA dans le panneau Éléments PA

Dans le panneau Éléments PA (Fenêtre > Éléments PA), cliquez sur le nom de l'élement PA.

Selection d'un élément PA dans la fenêtre de document

Effectuez l'une des opérations suivantes :

• Cliquez sur la poignée de selection d'un élément PA.

Si la poignée n'est pas visible, cliquez n'importe ou dans l'élement PA pour la faire apparaitre.

• Cliquez sur une cordure d'un élément PA.
• Clique à l'intérieur d'un élément PA en appuyant sur les touches Ctrl et Maj (Windows) ou Commande et Maj (Macintosh).
• Pour sélectionner le content d'un élément PA, cliquez à l'intérieur de celui-ci et appuyez sur les touches Ctrl+A (Windows) ou Commande+A (Macintosh). Appuyez à nouveau sur Ctrl+A ou Commande+A pour sélectionner l'élément PA.
• Cliquez à l'intérieur d'un élément PA et Sélectionné sa balise dans le sélecteur de balises.

Sélection de plusieurs éléments PA

Effectuez l'une des opérations suivantes :

• Dans le panneau Éléments PA (Fenêtre > Éléments PA), appuyez sur la touche Maj tout en cliquant sur le nom de deux éléments PA ou plus.
• Dans la fenêtre de document, appuyez sur la touche Maj tout en cliquant à l'intérieur d'un ou de plusieurs éléments PA ou sur leur bordure.

Modification de l'ordre de superposition des éléments PA

Utilisez l'inspecteur Propriétés ou le panneau Éléments PA pour modifier l'ordre de superposition des éléments PA. L'élement PA situé en haut de la liste du panneau Calques Éléments PA se trouve au premier rang de l'ordre de superposition et apparait avant les autres éléments PA.

En code HTML, l'ordre de superposition, ou index z , des éléments PA détermine l'ordre dans lequel ils sont dessinés dans un navigateur. Plus l'index z d'un élément PA est élevé, et plus sa position dans l'ordre de superposition est élevé. (Par exemple, un élément avec un index z de 4 apparaitra au-dessus d'un élément avec un index z de 3.1 est toujours le numéro le plus bas dans l'ordre d'empilement.) Vous pouvez modifier l'index z de chaque élément PA à l'aide du panneau Éléments PA ou de l'inspecteur Propriétés.

Modification de l'ordre de superposition des éléments PA à l'aide du panneau Éléments PA

1 Sélectionnez Fenêtre > Éléments PA pour ouvrir le panneau Éléments PA.
2 Double-cliquez sur le numero d'index z en regard de l'element PA dont vous souhaitez modifier l'index z.
3 Modifiez le numero puis appuyez sur la touche Retour/Entree.
- Tapez une valeur supérieure afin de déplacer l'objet PA vers le haut dans l'ordre de superposition.
- Tapez une valeur inférieure afin de déplacer l'élément PA vers le bas dans l'ordre de superposition.

Modification de l'ordre de superposition des éléments PA à l'aide de l'inspecteur Propriétés

1 Choisissez Fenetre > Éléments PA pour ouvrir le panneau Éléments PA et visualiser l'ordre de superposition en cours.
2 Dans le panneau Éléments PA ou dans la fenêtre de document, Sélectionnez l'élément PA dont vous souhaitez modifier l'index z.
3 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), tapez un nombre dans la zone de texte Index Z.
- Tapez une valeur supérieure afin de déplacer l'objet PA vers le haut dans l'ordre de superposition.
- Tapez une valeur inférieure afin de déplacer l'élément PA vers le bas dans l'ordre de superposition.

Affichage et masquage des éléments PA

Lorsque you travailliez sur voitre document, you pouvez afficher ou masquer les éléments PA manuellement, à l'aide du panneau Éléments PA, pour voir comment la page apparaître dans différentes situations.

Note: L'élément PA actuellement sélectionné devient toujours visible et apparait devant les autres éléments PA.

Modification de la visibilité d'un élément PA

1 Sélectionnez Fenêtre > Éléments PA pour ouvrir le panneau Éléments PA.
2 Cliquez dans la colonne de l'icone en forme d'oeil pour changer la visibilité d'un élément PA.

• Un oeil ouvert signifie que l'objet PA est visible.
• Un oeil fermé signifie que l'objet PA est invisible.
  Si l'icone de I'oeil n'apparait pas, I'elément PA hérite de la visibilité de son parent (lorsque les éléments PA ne sont pas imbriqués, le parent correspond au corps du document, qui est toujours visible).

Aucune icone en forme d'oeil ne s'affiche lorsque la visibilité n'est pas indiquée (apparait dans l'inspecteur Propriétés comme Visibilité par défaut).

Modification de la visibilité de tous les éléments PA à la fois

Dans le panneau Eléments PA (Fenêtre > Calques), cliquez sur l'icone en forme d'oeil en haut de la colonne.

Note: Cette procédure permet de définir la visibilité ou la non-visibilité de tous les éléments PA, mais elle ne leur permet pas d'hériter.

Redimensionnement des éléments PA

Vou puez redimensionner un seul ou plusieurs éléments PA à la fois pour qu'ils aient tous la même largeur et la même hauteur.

Si l'option Empécher le chevauchement est activée, vous ne pourrez pas redimensionner un élément PA s'il doit pour cela en chevaucher un autre.

More Help topics

"Utilisation de la grille de mise en forme" on page 187

Redimensionnement d'un élément PA

1 En mode Creation, selectionnez un élément PA.
2 Pour redimensionner l'élément PA, procédez de l'une des manières suivantes :
- Pour redimensionner l'élement PA en le faisant glisser, faites glisser l'une de ses poignées.
- Pour redimensionner l'objet PA par incréements d'un pixel, maintenez la touche Ctrl (Windows) ou Option (Macintosh) enforcée tout en utilisant les touches fléchées.

Les flèches déplacent les bords croit et inférieur de l'élement PA ; cette technique ne permet pas de redimensionner l'élement PA en utilisant les bords supérieur et gauche.

• Pour redimensionner en alignant sur la grille, appuyez sur Maj-Ctrl-flèche (Windows) ou Maj-Option-flèche (Macintosh).
• Dans l'inspecteur Propriétés (Fenêtre > Propriétés), tapez les valeurs de largeur (L) et de hauteur (H).

Le redimensionnement d'un élément PA en modifie la largeur et la hauteur. Cette action ne définit pas la partie visible du contenu de l'élement PA. Vous pouvez définir la zone visible d'un élément PA dans les préférences.

Redimensionnement de plusieurs éléments PA à la fois

1 En mode Creation, selectionnez au moins deux éléments PA.
2 Effectuez l'une des opérations suivantes :

• Choisissez Modifier > Réorganiser > Mème largeur ou Modifier > Réorganiser > Mème hauteur.

Les premiers éléments PA sélectionnés prendront la largeur ou la hauteur du dernier sélectionné.
- Dans l'inspecteur Propriétés (Fenêtre > Propriétés), sous Plusieurs éléments CSS-P, tapez les valeurs de largeur et de hauteur.

Ces valeurs sont appliquées à tous les éléments PA sélectionnés.

Déplacement des éléments PA

Vou puez déplacer les éléments PA en mode Création de la même manière que les objets dans la plupart des applications graphiques de base.

Si l'option Empêcher le chevauchement est activée, vous ne pourrez pas déplacer un élément PA s'il doit pour cela en chevaucher un autre.

1 En mode Creation, selectionnez un ou plusieurs éléments PA.
2 Effectuez l'une des opérations suivantes :
Pour déplacer des éléments PA en les faisant glisser, Sélectionnez-les et faites glisser la poignée de sélection du dernier élément PA sélectionné (en surbrillance noire).
- Pour déplacer l'image par incréments d'un pixel, utilisez les touches fléchées.

Maintenez la touche Maj enforcée tout en appuyant sur les touches fléchées pour déplacer l'élement PA par incréements de la grille.

More Help topics

"Utilisation de la grille de mise en forme" on page 187

Alignment des éléments PA

Utilisez les commandes d'alignement pour aligner un ou plusieurs éléments PA sur l'un des bords du dernier élément PA sélectionné.

Lors de l'alignement, les éléments PA enfants qui ne sont pas sélectionnés seront déplacés en même temps que leur parent, si celui-ci est selectionné et déplace. Pour éviter ce déplacement, n'utilise pas déléments PA imbriqués.

1 En mode Creation, selectionnez un élément PA.
2 Choisissez Modifier > Réorganiser, puis Sélectionnez une option d'alignment.

Par exemple, si vous scélectionnez Haut, tous les éléments PA se déplacent de façon telle que leurs cordures supérieures sont au même niveau que celle du dernier élément PA sélectionné (en surbrillation noire).

Conversion des éléments PA en tableau

Au lieu d'utiliser des tableaux pour creer une mise en forme, certains concepteurs de sites Web préférent utiliser des éléments PA. Dreamweaver vous permet de creer votre mise en forme à l'aide d'éléments PA, puis, si vous le souhaitez, de les convertir en tableaux. Par exemple, il peut être nécessaire de convertir les éléments PA en tableaux pour pouvoir prendre en charge les navigateurs antérieurs à la version 4.0. La conversion des éléments PA en tableaux est toute fois déconseillée parce qu'elle peut générer des tableaux contenant un grand nombre de cellules vides, sans parler les problèmes de code pléthorique. Si vous avez besoin d'une mise en page utilisant des tableaux, il est préféable de la créér à l'aide des outils standard de mise en forme des tableaux disponibles dans Dreamweaver.

Vouss pouvez aussi passer des éléments PA aux tableaux, et vice-versa, pour peaufiner la mise en forme et optimiser la presentation de la page. (Toutefois, lorsque vous reconvertissez un tableau en éléments PA, Dreamweaver convertit le tableau en balises div PA,quel que soit le type de l'objet PA qui se trouvait dans la page avant d'être converti en tableau.) Vous ne pouvez pas convertir un tableau ou un éléments PA spécifique figurant sur une page. Il n'est possible de convertir des éléments PA en tableaux, et des tableaux en divis PA que pour la totalité d'une page.

Note: Il est impossible de convertir des éléments PA en tableaux, ou des tableaux en divis PA, dans un modele de document ou dans un document auquel un modele a eté appliqué. Dans ce cas, vous nezvez creer votre mise en forme dans un document sans modele et le convertir avant de l'enregistrer comme modele.

Conversion des éléments PA en tableaux

Créez votre mise en forme à l'aide d' éléments PA, puis convertissez les éléments PA en tableaux afin que votre mise en forme puisse s'afficher dans les navigateurs les moins récents.

Avant de convertir vos éléments PA en tableaux, assurez-vous qu'ils ne se chevauchent pas. Veillez en outre à bien être en mode Standard (Affichage > Mode Tableau > Mode Standard).

Conversion des éléments PA en tableau

1 Sélectionnez Modifier > Convertir > Divs PA en tableau.

2 Parmi les options suivantes, définissez celles de votrechioix et cliquez sur OK :

La plus précise Crée une cellule de tableau pour chaque élément PA et ajoute les cellules nécessaires pour préserver l'espace entre les éléments PA.

La plus petite : Réduit les cellules vides. Indique que les bords des éléments PA doivent être alignés s'ils sont positionnés dans la limite du nombre de pixels définir.

Si vous choisissez cette option, le tableau que vous obtiendraz aura moins de lignes et de colonnes vides, mais ne correspondra pas nécessairement exactement à votre mise en forme.

Utiliser les GIF transparents Remplit la derniere ligne du tableau d'images GIF transparentes. Sélectionner cette option permet d'être sur que le tableau s'affichera avec les mêmes largeurs de colonne dans tous les navigateurs.

Lorsque cette option est activée, vous ne pouvez pas modifier le tableau obtenu en faisant glisser ses colonnes. Lorsque cette option est désactivée, le tableau obtenu ne contient pas les GIF transparents, mais les largeurs des colonnes peuvent varier suivant le navigateur.

Centrer dans la page Centre le tableau obtenu dans la page. Si cette option est désactivée, le tableau commence sur le bord gauche de la page.

Conversion des tableaux en divis PA

1 Sélectionnéz Modifier > Convertir > Tableaux en divs PA.

2 Parmi les options suivantes, définisseez celles de votrechoix et cliquez sur OK :

Empêcher le chevauchement des éléments PA Limite la position des éléments PA lorsqu'ils sont créés, déplacés et redimensionnés, afin d'éviter tout chevauchement.

Afficher le panneau Éléments PA Affiche le panneau Éléments PA.

Afficher la grille et Aligner sur la grille Vous permettent d'utiliser une grille pour faciliter le positionnement des éléments PA.

Les tableaux sont convertis en divis PA. Les cellules vides ne sont pas converties en éléments PA, sauf si elles possèdent une couleur d'arrière-plan.

Note: Les éléments de la page qui se trouvaient en dehors des tableaux sont également placés dans les balises div PA.

Empêchement du chevauchement des éléments PA

Les cellules d'un tableau ne peuvent pas se chevaucher. Dreamweaver ne peut donc pas creer de tableau à partir d' éléments PA qui se chevauchent. Si vous envisagez de convertir les éléments PA d'un document en tableaux, activez l'option Empécher le chevauchement pour restreindre le déplacement et le positionnement des éléments PA et en éviter le chevauchement.

Si cette option est activée, aucun élément PA ne peut être créé, déplace ou redimensionné au-dessus d'un élément PA existant, ni est imbriqué dans ce dernier. Si vous activez cette option après avoir créé des éléments PA se chevauchant, faites glisser chaque élément PA concerné de façon à l'éloigner des autres éléments PA. Dreamweaver ne corrige pas automatiquement les éléments PA existants se chevauchant dans la page lorsque vous activez l'options Empêcher le chevauchement des éléments PA.

Si cette option et l'option d'alignement sont activées, aucun élément PA ne sera aligné sur la grille si cela doit cause un chevauchement de deux éléments PA. Dans ce cas, l'élement PA sera aligné sur le bord de l'élement PA le plus proche.

Note: Certain operations autorisent le chevauchement des éléments PA, même lorsque l'option Empêcher le chevauchement est activée. Si vous insérez un élément PA en utilisant le menu Insertion, si vous entrez des valeurs dans l'inspecteur Propriétés ou si vous repositionnez des éléments PA en modifiant le code source HTML, les éléments PA risquent de se chevaucher ou de s'imbriquer lorsque cette option est activée. En cas de chevauchement, faites glisser les éléments PA qui se chevauchent en mode Création pour les séparer.

• Dans le panneau Éléments PA (Fenêtre > Éléments PA), activez l'option Empêcher le chevauchement.
• Dans la fenêtre de document, choisissez Modifier > Réorganiser > Empêcher le chevauchement des éléments PA.

Chapter 7: Mise en forme des pages avec HTML

Utilisation d'assistances visuelles pour la mise en forme

Définition de règles

Les régles vous aident à mesurer, organiser et planifier votre mise en forme. Vous pouvez afficher les régles graduées en pixels, pouces ou centimètres sur les bords gauche et supérieur de la page.

Pour activer et désactiver les règles,CHOISISEZ Affichage > Régles > Afficher.
- Pour changer l'origine, faites glisser l'icone de l'origine de la règle , située dans le coin supérieur gauche de la fenêtre de document en mode Création, sur un point de la page.
- Pour rétablit la position par défaut de l'origine,CHOISSEZ AFFICHAGE > Regles > Rétablit origine.
Pour changer d'unité de mesure, choisissez Affichage > Regles, puis seLECTIONnez Pixels, Pouces ou Centimétres.

Définition de repères de mise en forme

Les repères sont les lignes que vous faites glisser sur le document à partir des règles. Ils vous aident à placer et à aligner des objets de façon plus précise Vous pouvez également utiliser les repères pour mesurer la taille des éléments d'une page ou simuler les pris (zones visibles) des navigateurs Web.

Pour faciliter l'alignement des éléments, vous avez la possibilité de les aligner sur les repères et d'aligner des repères sur des éléments. (les éléments doivent être à positionnement absolu pour que l'alignement puisse fonctionner). Vous pouvez également verrouiller les repères pour qu'ils ne soient pas déplacés de façon accidentelle par un autre utilisateur.

Création d'un repère horizontal ou vertical

1 Faites glisser le repere à partir de la rège correspondante.
2 Positionnez le repere dans la fenetre de document et relachez le bouton de la souris (repositionnez le repere en le faisant glisser de nouveau).

Note: Par défaut, les repères sont enregistrés en tant que mesures en pixels absolues depuis le côte supérieur ou gauche du document et sont affichés par rapport à l'origine de la règle. Pour enregistrer le repère sous la forme d'un pourcentage, appuyez sur la touche Maj lorsque vous creez ou déplacez le repère.

Affichage ou masquage d'un repère

Choisissez Affichage > Repères > Afficher les repères.

Alignment d'éléments sur les repères

• Pour aligner des éléments sur les repères, sélectionnez Affichage > Repères > Magnetiser les repères.
• Pour aligner les repères sur des éléments, Sélectionnez Affichage > Repères > Accrocher les repères aux éléments.

Note: Lorsque vous redimensionnez des éléments, tels que des éléments à positionnement absolu, des tableaux et des images, ils sont alignés sur les repères.

Verrouillage ou déverrouillage de tous les repères

Choisissez Affichage > Repères > Verrouiller les repères.

Affichage et déplacement d'un repère vers une position spécifique

1 Maintenez le pointeur de la souris sur le repere afin d'afficher sa position.
2 Double-cliquez sur le repere.
3 Entre la nouvelle position dans la boite de dialogue Déplacer le repère et cliquez sur OK.

Affichage de la distance entre les repères

Appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) et déplacez le pointeur de la souris n'importe où entre les deux repères.

Note: L'unité de mesure est la même que celle utilisé pour les règles.

Simulation du pli (zone visible) d'un navigateur Web

Choisissez Affichage > Repères puis seLECTIONnez une taille de navigateur prédéfini dans le menu.

Suppression d'un repère

Faites glisser le repere hors du document.

Modification des paramètres des repères

Sélectionnez Affichage > Repères > Modifier les repères, définisseez les options suivantes et cliquez sur OK.

Couleur des repères Indique la couleur des lignes du repère. Cliquez sur la palette de couleurs et désisissez une couleur dans le Sélecteur de couleur ou tapez un nombre hexadecimal dans la zone de texte.

Couleur distance Indique la couleur des lignes qui apparaissent comme des indicateurs de distance lorsque vous déplacez le pointeur de la souris entre les repères. Cliquez sur la palette de couleurs et désissez une couleur dans le Sélecteur de couleur ou tapez un nombre hexadecimal dans la zone de texte.

Afficher les repères Affiche les repères en mode Création.

Magnétiser les repères Aligns les éléments d'une page sur les repères à mesure que vous déplacez ces éléments dans la page.

Verrouiller les repères Verrouille les repères en place.

Accrocher les repres aux elements Aligns les repres sur les elements sur la page a mesure que you faites glisser les repres.

Effacer tout Efface tous les repères de la page.

Utilisation des repères avec des modèles

Lorsque des repères sont ajoutés à un modèle Dreamweaver, toutes les instances du modele hériment de ces repères. Les repères des instances de modele sont toutfois traités comme des régions modifiables par les utilisateurs. Les repères modifiés dans les instances de modele sont restaurés à leur emplacement d'origine chaque fois que l'instance est mise à jour avec le modele principal.

Voupez au jouter vos propres repereaux instances d'un modèle. Les guides ajouts de cette maniere ne sont pas écrases lorsque l'instance du modèle est mise à jour avec le modèle principal.

More Help topics

"Alignment des éléments PA" on page 182

"Déplacement des éléments PA" on page 182

Utilisation de la grille de mise en forme

La grille affiche un système de lignesizontales et verticales dans la fenêtre de document. Cette fonction est utile pour placer des objets de façon précise. Vous pouvez aligner automatiquement des éléments de page à positionnement absolu sur la grille en les déplaçant, et changer la grille ou définiir le comportement d'alignment en indiquant des paramétres spécifique pour la grille. L'alignment fonctionne, que la grille soit visible ou non.

More Help topics

"Alignment des éléments PA" on page 182

"Déplacement des éléments PA" on page 182

Affichage ou masquage de la grille

Choisissez Affichage > Grille > Afficher la grille.

Activation ou désactivation de l'alignement

Choisissez Affichage > Grille > Aligner sur la grille.

Modification des paramètres de la grille

1 Choisissez Affichage > Grille > Paramètres de la grille.
2 Définisse les options et cliquez sur OK pour appliquer les modifications.

Couleur Spécifie la couleur des lignes de la grille. Cliquez sur la palette de couleurs et choisissez une couleur dans le Sélecteur de couleur ou tapez un nombre hexadecimal dans la zone de texte.

Afficher la grille Affiche la grille en mode Creation.

Aligner sur la grille Permet d'aligner les éléments de la page sur les lignes de la grille.

Espacement Deteine l'espacement entre les lignes de la grille. Tapez une valeur et selectionnez Pixels, Pouces ou Centimétres dans le menu.

Afficher Determine si les lignes de la grille apparaissent sous forme de lignes ou de pointillés.

Note: Si l'option Afficher la grille n'est pas selectionnée, la grille n' apparait pas et aucune modification n'est visible.

Utilisation d'un tracé d'image

Voussouvezutiliseruntracede l'imagecomme guide pourreproduireune mise enpageayantetécriee dans uneapplicationgraphique tellequ'AdobeFreehandouFireworks.

Un tracé d'image est une image JPG, GIF ou PNG qui apparait à l'arrière-plan de la fenêtre de document. Vous pouvez masquer cette image, définir son opacité et la déplacer.

Le trace de l'image est uniquement visible dans Dreamweaver ; il n'est pas visible lorsque vous affichez la page dans un navigateur. Lorsque le trace de l'image est visible, les vérables image et couleur d'arrière-plan de la page ne sont pas visibles dans la fenetre de document, mais le sont lorsque la page est affichee dans un navigateur.

Placement d'un tracé de l'image dans la fenêtre de document

1 Effectuez l'une des opérations suivantes :
- Choisissez Affichage > Trace de l'image > Charger.
- Choisissez Modifier > Propriétés de la page, puis cliquez sur le bouton Parcourir situé à côté de la zone de texte.
Tracé de l'image.
2 Dans la boite de dialogue Sélectionnéz la source de l'image,CHOISSEZ un fjichier d'imagu puis cliquez sur OK.
3 Dans la boite de dialogue Proprietés de la page, définisse la transparence de l'image en tirant la glissiere. Transparency de l'image, puis cliquez sur OK.

Pour passer à un autre trace ou modifier à tout moment la transparence du trace en cours,CHOISSEZ Modifier > Propriétés de la page.

Affichage ou masquage du tracé de l'image

Choisissez Affichage > Tracé de l'image > Afficher.

Déplacement d'un trace d'image

Sélectionnez Affichage > Tracé de l'image > Ajuster la position.
Pour definir avec précision la position du tracé de l'image, indiquez les valeurs des coordonnées dans les zones de texte X et Y.
- Pour déplacer l'image par incréments de 1 pixel, utilisez les touches fléchées.
Pour deplacer l'imag par increment de 5 pixels, appuyez simultanement sur la touche Maj et sur l'une des touches flechees.

Rétablissement de la position du tracé de l'image

Choisissez Affichage > Tracé de l'image > Rétablir la position.

Le trace de l'image se replace dans le coin supérieur gauche de la fenetre de document (0,0) .

Alignment du tracé de l'image sur un élément sélectionné

1 Sélectionné un élément dans la fenêtre de document.
2 Choisissez Affichage > Trace de l'image > Aligner l'image avec la selection.

Le coin supérieur gauche du tracé de l'image est aligné avec le coin supérieur gauche de l'élement seLECTIONné.

Présentation de contenu à l'aide de tableaux

A propos des tableaux

Les tableaux sont très utiles pour désenter des données tabulaires etmettre 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 selectionné 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 acceder rapidement à des commandes standard relatives aux tableaux. Vous pouze activer et désactiver les largeurs et les menus.

Si vous ne voirz pas la largeur d'un tableau ou d'une colonne,ILA signifie qu'elle n'est pas specifiée dans le code HTML. Si deux nombres s'affichent, cela signifie que la largeur visuelle qui apparait en mode Creation est differente de la largeur specifiée dans le code HTML. Cela peut se produire lorsque vous redimensionnee un tableau en faisant glisser son coin inférieur droit ou lorsque vous ajoutez du contenu a une cellule plus grande que sa valeur definite.

Par exemple, si vous définissez une largeur de colonne de 200 pixels, puis que vous ajoutez du contenu qui estend la largeur à 250 pixels, deux nombres s'affichent pour cette colonne : 200 (la largeur spécifiée dans le code) et (250) entre parentheses (la largeur visuelle de la colonne telle qu'elle apparait a l'écran).

Note: Vous avez aussi la possibilité de mettre vos pages en forme à l'aide du positionnement par feuilles de style en cascade CSS.

More Help topics

"Mise en forme des pages avec CSS" on page 162

Priorité de formatage des tableaux dans le code HTML

Lorsque vous formatez des tableaux en mode Creation, 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éfinié par une valeur pour tout le tableau et par une autre valeur pour chaque cellule, les propriétés de formatage des cellules prévalent sur les propriétés de formatage de lignes, qui à leur tour prévalent sur celles du tableau.

L'ordre de priorité pour le formatage de tableau est le suivant :

1 Cellules
2 Lignes
3 Tableau

Par exemple, si vous définissez une couleur bleue pour l'arrière-plan d'une cellule, puis la couleur jaune pour celui du tableau, la couleur de la cellule bleue ne changera pas, puisque la propriété de formatage de cellule a la priorité sur la propriété de formatage du tableau.

Note: Lorsque vous définissez les propriétés d'une colonne, Dreamweaver modifie les attributs de la balise à correspondant à chaque cellule de la colonne.

A propos du fractionnement et de la fusion de cellules de tableau

Vous pouvez fusionner n'importe quel nombre de cellules adjacentes (tant que la seLECTION correspond à une ligne ou à un rectangle de cellules) pour produit une cellule unique s'etendant sur plusieurs colonnes ou lignes. Vous pouvez fractionner une cellule en un nombrequelconque de lignes et de colonnes, qu'elle ait eté precedemment fusonnée ou non. Dreamweaver restructure automatiquement le tableau (en ajoutant les attributs colspan ou rowspan nécessaires) pour obtenir l'agencement spécifique.

Dans l'exemple ci-dessous, les cellules au milieu des deux premières lignes ont eté fusionnées en une seule cellule qui sétend sur deux lignes.

Insertion d'un tableau et ajout de contenu

Utilisez le panneau ou le menu Insertion pour creer un nouveau tableau. Ajoutez ensuite du texte et des images aux cellules du tableau de la meme facon que you le faites en dehors d'un tableau.

Note: La fonction Mode Mise en forme est absolète depuis la version Dreamweaver CS4. Le mode Mise en forme créé des mises en forme de page à l'aide de tableaux de mise en forme, ce qui n'est plus conseillé par Adobe. Pour plus d'informations sur le mode Mise en forme et la raison pour laquelle il a été rendu absolète, consultez le Blog de l'équipe Dreamweaver.

1 Dans la fenêtre de document en mode Création, placez le point d'insertion à l'endetroit où vous pouze que le tableau apparaisse.

Note: Si vous document est vide, le point d'insertion peut uniquement etre place au début du document.

• Choisissez Insertion > Tableau.
• Dans la catégorie Commun du panneau Insertion, cliquez sur le bouton Tableau.
  2 Définissez les attributs dans la boîte de dialogue Tableau et cliquez sur OK pour créé le tableau.

Lignes Determine le nombre de lignes du tableau.

Colonnes Deteine le nombre de colonnes du tableau.

Largeur du tableau Indique la largeur du tableau en pixels ou en pourcentage de la largeur de fenetre du navigateur.

Largeur de la bordure Indique la largeur, en pixels, des bordures du tableau.

Espacement des cellules Determine le nombre de pixels séparant les cellules contiguës d'un tableau.

Lorsque you n' affectez pas explicitement de valeur pour la largeur de la cordure, l'espacement entre les cellules et la marge interieure des cellules, la plupart des navigateurs affichent une largeur de cordure et une marge interieure des cellules définies sur 1, ainsi qu'un espacement entre les cellules defini sur 2. Pour etre sur que les navigateurs afficheront le tableau sans cordure, marge interieure ni espacement, definissez Marge interieure des cellules et Espacement entre les cellules sur 0.

Marge interieure des cellules Indique le nombre de pixels qui separe la cordure d'une cellule et son contenu.

Aucun N'autorise pas les en-têtes de colonne ou de ligne pour le tableau.

Gauge Transforme la premiere colonne du tableau en colonne d'en-tetes pour vous permettre d'entrer un en-tee pour ligne du tableau.

Haut Transforme la premiere ligne du tableau en ligne d'en-têtes pour vous permettre d'entrer un en-été pour chaque colonne du tableau.

Les deux Vous permet d'entrée des en-têtes de colonne et de ligne dans le tableau.

Il est judicieux d'employer des en-têtes au cas où l'un des visiteurs de cette site Web utiliseait un lecteur d'écran. Les lecteurs d'écran lisent les en-têtes de tableau et aident les utilisateurs à gérer une trace des informations de tableau.

Légende Fournit un titre de tableau qui s'affiche en dehors du tableau.

Aligner la légende Indique où la légende du tableau apparaît par rapport au tableau.

Résumé Fournit une description du tableau. Les lecteurs d'écran lisent le texte de résumé mais le texte n'apparait pas dans le navigateur de l'utilisateur.

Importation et exportation de données tabulaires

Vou puez importer des données tabulaires créées dans une autre application (par exemple, Microsoft Excel) et enregistrées dans un format texte délimité ( éléments séparés par des tabulations, virgules, deux-points, points-virgules ou autres délimiteurs) dans Dreamweaver et lesmettre en forme dans un tableau.

Vou puez eaglement exporter les données d'un tableau depuis Dreamweaver vers un fichier xyte, avec le contenu de cellules contigues séparé par un delimiteur. Les caractères que vous pouze utiliser comme delimiteurs sont la virgule, les deux-points, le point-virgule ou l'espace. Lorsque vous exportez un tableau, tout le tableau est exporté ; vous ne pouze pas exporter certaines parties du tableau seulement.

Si you souhaitez ne recupé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 creer un nouveau tableau) avant d'exporter le nouveau tableau.

Importation de données tabulaires

1 Effectuez l'une des opérations suivantes :

• Choisissez Fichier > Importer > Données tabulaires.
• Dans la catégorie Données du panneau Insertion, cliquez sur l'icone Importer les données tabulaires
• Choisissez Insertion > Objets du tableau > Importer les données tabulaires.

2 Définissee les options relatives aux données tabulaires, puis cliquez sur OK.

Fichier de données Correspondaou nom du fichier a importer. Cliquez sur le bouton Parcourir pourCHOISIR le fichier.

Délimueur Correspondé au délimueur utilisé dans le fichier que vous importez.

Si vous choisissez Autre, une zone de texte apparait à droite du menu contextual. Entrez le délimiter utilisé dans votre fichier.

Note: Spécifie le délimueur utilisé lors de l'enregistrement du fichier de données. Dans le cas contraire, le fichier ne pourra pas été importé correctement et vos données ne seront pas formatées convenablement dans un tableau.

Largeur du tableau Correspond à la largeur du tableau.

• Sélectionnez Adapter au contenu pour adapter la largeur de chaque colonne à la plus longue chaîne de texte qu'elle contient.
• Sélectionnez Fixe pour spécifique une largeur de tableau fixe, en pixels ou en pourcentage de la largeur de fenêtre du navigateur.

Bordure Indique la largeur, en pixels, des bordures du tableau.

Marge interieure des cellules Determine l'espace (en pixels) entre le contenu d'une cellule et son contour.

Espacement des cellules Deteine le nombre de pixels separant les cellules contiguës d'un tableau.

Lorsque you n' affectez pas explicitement de valeur pour les cordures, l'espacement entre les cellules et la marge interieure des cellules, la plupart des navigateurs affichent des cordures et une marge interieure des cellules définies sur 1, ainsi qu'un espacement entre les cellules définis sur 2. Pour etre sur que les navigateurs afficheront le tableau sans marge interieure ni espacement, definissez Marge interieure des cellules et Espacement entre les cellules sur 0. Pour visualiser les contours des cellules et du tableau lorsque la bordure est definie sur 0, selectionnez Affichage > Assistances visuelles > Bordures de tableau.

Formatage ligne supérieure Deteine le formatage applique, le cas echecant, a la ligne superieure du tableau. Choisissez parmi quatre options de formatage : pas de formatage, gras, italique ou gras italique.

Exportation d'un tableau

1 Placez le point d'insertion dans l'une des cellules du tableau.
2 Choisissez Fichier > Exporter > Tableau.
3 Définisse les options suivantes :

Déliminateur Indique quel caractère délimueur doit être utilisé pour séparer des éléments dans le fjichier exporté.

Suits de ligne Indique sousquel système d'exploitation vous allez ouvrir le fjichier exporté : Windows, Macintosh ou UNIX. Les différents systèmes d'exploitation utilisant des méthodes différentes pour indiquer la fin d'une ligne de texte.

4 Cliquez sur Exporter.
5 Saisissez un nom pour le fichier et cliquez sur Enregister.

Sélection d'éléments de tableau

Vou puez selectionner un tableau entier ou encore l'ensemble d'une ligne ou d'une colonne. Vous pouvez également selectionner une ou plusieurs cellules individuelles.

Lorsque vous déplacez le pointeur sur un tableau, une ligne, une colonne ou une cellule, Dreamweaver met toutes les cellules de cette seLECTION en surbrillance afin que vous sachiez quelles cellules seront selectionnées. Ceci est utile pour les tableaux sans cordures, les cellules complenant plusieurs colonnes ou lignes ou dans le cas de tableaux imbriqués. Vous pouvez modifier la couleur de la mise en surbrillance dans les préférences.

Si vous placez le pointeur sur une cordure du tableau, puis que vous maintainez la touche Ctrl (Windows) ou Commande (Macintosh) enforcée, la totalité de la structure du tableau (c'est-à-dire toutes les cellules) est mise en surbrillance. Ceci peut être utile lorsque vous dispose de tableaux imbriqués et que vous souhaitez afficher la structure de l'un d'eux.

Sélection d'un tableau entier

Effectuez l'une des opérations suivantes :

• Cliquez dans le coin supérieur gauche du tableau, sur le bord supérieur ou inférieur du tableau ou sur une ligne ou une cordure de colonne.

Note: Le pointeur prend la forme de l'icone de grille du tableau 山 pour vous indiquer que vous pouvez selectionner le tableau (sauf si vous cliquez sur la cordure d'une ligne ou d'une colonne).

• Cliquez dans une cellule du tableau, puis selectionnez la balise dans le selector de balises dans le coin inférieur gauche de la fenetre 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-tete du tableau et choisissez Sélectionner le tableau. Des poignées de selection apparaissent sur les bords inférieurs et droits du tableau sélectionné.

  Sélection d'une ou plusieurs lignes ou colonnes

  1 Positionnez le pointeur sur le bord gauche d'une ligne ou le bord supérieur d'une colonne.
  2 Lorsque le pointeur se transforme en flèche de scélection, cliquez pour scélectionner une ligne ou une colonne ou faites-le glisser pour scélectionner plusieurs lignes ou colonnes.

  

  Sélection d'une seule colonne

  1 Cliquez dans la colonne.
  2 Cliquez sur le menu des en-têtes de colonne, puis choisisseze Selectionner la colonne.

  

  Sélection d'une seule cellule

  Effectuez l'une des opérations suivantes :
  - Cliquez dans la cellule, puis selectionnez la balise

  . Si vous activez cette option, Dreamweaver ne place pas de saut de ligne après une balise , même si le formatage de la bibliothèque de balises indique qu'un saut de ligne devrait être inséré.

  Formatage avancé Permet de définir des options de mise en forme pour le code CSS (Cascading Style Sheets, feuilles de style en cascade) et pour les différents attributs et balises dans l'éditeur de la bibliothèque de balises.

  Espace blanc (version japonaise uniquement) Permet de sélectionner une espac insécable ( ) ou une espace Zenkaku pour votre code HTML. L'espace blanc selectionné avec cette option est utilisé pour les balises vides lors de la création d'un tableau et lorsque l'option « Autoriser plusieurs espaces consécutives » est activée dans les pages de codage japonaises.

  More Help topics

  "Mise en forme du code CSS" on page 155

  "Définition des préférences de conseils de code" on page 324

  Définition des préférences de correction de code

  Les préférences de correction de code permettent de spécifier les préférences de modification de code par Dreamweaver lors de l'ouverture de documents, lorsque vous copiez et collez des éléments de formulaires ou que vous entrez des valeurs et adresses URL à l'aide des outils (par exemple, l'inspecteur Propriétés). Ces préférences sont sans effet lorsque vous modifiez du code HTML ou des scripts dans le mode Code.

  Si vous désactieve ces options de correction, les éléments de marquage non valides sont affichés dans la fenêtre de document pour le code HTML qu'il aurait corrigé.

  1 Choisissez Edition > Preférences (Windows) ou Dreamweaver > Préférences (Macintosh).
  2 Sélectionnéz la catégorie Correction du code dans la liste de gauche.
  3 Parmi les options suivantes, définissez celles de votrechioix :

  Corriger les balises incorporement imbriques et non fermées Corrige les balises qui se chevauchent. Par exemple, < b > < i > texte < / b > < / i > est réécrit comme < b > < i > texte < / i > < / b > . Cette option insère également des guillemets et des crochets de fermeture s'ils sont absents.

  Renommer les éléments de formulaire lors du collage Garantit l'absence de noms d'objects de formulaire en double.

  Cette option est activée par défaut.

  Note: Contrairement à d'autres options de cette boîte de dialogue de préférences, cette option ne s'applique pas à l'ouverture d'un document, mais uniquement lorsque vous copiez et collez un élément de formulaire.

  Supprimer les balises de fermeture superflues Supprime les balises de fermeture auxquelles aucune balise d'ouverture ne correspond.

  M'avertir lors de la correction ou de la suppression de balises Affiche un récapitulatif des codes HTML techniquement non valides que Dreamweaver a tenté de corriger. Ce récapitulatif indique l'emplacement du problème (à l'aide des numérios de ligne et de colonne), pour vous permettre de vérifier la correction et veiller à ce qu'elle produit l'effet youlu.

  Ne jamais corriger le code : Dans les fichiers avec extensions. Permet d'empêcher Dreamweaver de corriger le code dans les fichiers portant les extensions indiquées. Cette option est particulièrement utile pour les fichiers contenant des balises propriétaires.

  Coder <,> , & et " dans les valeurs d'attributs à l'aide de & Garantit que les valeurs d'attribut entrées ou modifiées à l'aide des outils Dreamweaver (par exemple, l'inspecteur Propriétés) ne contiennent que des caractères autorisés. Cette option est activée par défaut.

  Note: Cette option et les options suivantes ne s'appliquent pas aux adresses URL entrées dans le mode Code. De plus, ces options n'entrainment pas de modification dans le code déjà present dans un fichier.

  Ne pas coder les caractères spéciaux Empéche toute modification des adresses URL par Dreamweaver en vue de n'utiliser que des caractères autorisés. Cette option est activée par défaut.

  Coder caractères spéciaux dans les URL à l'aide de &# Garantit que, lorsque vous entrez ou modifiez des adresses URL à l'aide des outils Dreamweaver (par exemple, l'inspecteur Propriétés), ces URL ne contennent que des caractères autorisés.

  Coder caractères spéciaux dans les URL à l'aide de % Fonctionne de façon identique à l'options ci-dessus, mais utilise une autre méthode pour coder les caractères spéciaux. Cette méthode d'encodage (à l'aide du signe %) offre une meilleure compatibilité avec les navigateurs plus anciers, mais ne se montre pas aussi efficace avec les caractères utilisés dans certaines langues.

  More Help topicsL sur la page de recherche utilise la méthode GET et contient deux champs de texte, « Nombre » et « Department »  Dans un environnement ColdFusion, les valeurs d'exécution seraient #LastName# et #Department#. Dans PHP, les valeurs d'exécution seraient REQUEST["LastName"] etREQUEST["Department"]. 6 (Facultatif) Cliquez sur Tester pour creer une instance du jeu d'enregistrements à l'aide des valeurs de variable par défaut. Les valeurs par défaut sont une simulation des valeurs qui sans cela auraient ete renvoyees de la page de recherche. Cliquez sur OK pour fermer le jeu d'enregistrements test. 7 Si le jeu d'enregistrements vous convient, cliquez sur OK. La requête SQL est insérée dans votre page. L'etape suivante consiste à afficher le jeu d'enregistrements sur la page de résultats.

  "Nettoyage de fichiers HTML créés avec Microsoft Word" on page 79

  "Définition des préférences de conseils de code" on page 324

  Définition des couleurs du codegistrements à l'aide des valeurs de variable par défaut. Les valeurs par défaut sont une simulation des valeurs qui sans cela auraient ete renvoyees de la page de recherche. Cliquez sur OK pour fermer le jeu d'enregistrements test. 7 Si le jeu d'enregistrements vous convient, cliquez sur OK. La requête SQL est insérée dans votre page. L'etape suivante consiste à afficher le jeu d'enregistrements sur la page de résultats.

  Utilisez les préférences de coloration du code pour spécifier les couleurs des principales catégories de balises et d'éléments de code, par exemple les balises liées à la mise en forme ou les identicateurs JavaScript. Pour définir les préférences de coloration d'une balise spécifique, modifier sa définition dans l'éditeur de la bibliothèque de balises.

  1 Choisissez Edition > Preférences (Windows) ou Dreamweaver > Préférences (Macintosh).
  2 Sélectionnez la catégorie Coloration du code dans la liste de gauche.
  3 Sélectionnez un type de document dans la liste Type de document. Les modifications que vous apportez aux préférences de coloration du code influeront sur tous les documents de ce type.
  4 Cliquez sur le bouton Modifier le modele de coloration.
  5 Dans la boîte de dialogue Modifier le modèle de coloration, choisissez un élément de code dans la liste Styles, puis définisse la couleur du texte, la couleur d'arrière-plan et éventuellesment le style (gras, italique ou sou ligné). L'échantillon de code affché dans le volet d'aperçu est modifié pour correspondre aux nouveaux styles et couleurs.

  Cliquez sur OK pour enregistrer les modifications et fermer la boite de dialogue Modifier le modele de coloration.

  6 Apportez les autres modifications requises aux préférences de coloration du code, puis cliquez sur OK.

  Arrière-plan par défaut permet de définir la couleur d'arrière-plan par défaut pour le mode Code et pour l'inspecteur de code.

  Caracteres masqués définit la couleur des caractères masqués.

  Arrière-plan du code en direct définit la couleur d'arrière-plan du mode Code en direct. La couleur par défaut est le jaune.

  Modifications du code en direct définit la couleur de surbrillance du code qui est modifié dans le mode Code en direct. La couleur par défaut est le rose.

  Arrière-plan en lecture seule définit la couleur d'arrière-plan du texte en lecture seule.

  More Help topicss

  "Personnalisation des préférences de coloration de code d'un modele" on page 440

  "Modification de bibliothèques, de balises et d'attributs" on page 361

  "Prévisualisation du code en direct" on page 305

  "Définition des préférences de conseils de code" on page 324

  Utilisation d'un éditeur externeerniere les parametes existants. Vous ne pouze recourir au comportement de serveur que si vous utilisez le modele de serveur ASP. Avant d'ajouter un comportement de serveur Aller à la page associée à une page, assurez-vous que la page recoit les paramétres de formulaire ou d'URL d'une autre page. Le role du comportement de serveur consiste à transmettre ces paramétres à une troisième page. Vous pouvez, par exemple, communiquer les critères de recherche reçus par une page de résultats à une autre page, de manière à ce que l'utilisateur n'ait pas à les taper plusieurs fois. Sur la page, vous pouvez également sélectionner du texte ou une image devant assurer la fonction de lien ou placer le pointeur sans ne rien sélectionner pour que le texte du lien soit inséré. 1 Dans la zone de texte Aller à la page associée, cliquez sur Parcourir et localisez le fichier de la page associée. Si la page active s'envoise des données à elle-même, tapez son nom de fichier. 2 Si les critères à communiquer ont été directement reçus d'un-formulaire HTML via la méthode GET ou qu'ils figurent dans l'URL de la page,CHOISSEZ l'options Paramétres d'URL. 3 Si les critères à communiquer ont été directement reçus d'un formulaire HTML via la méthode POST, désisissez l'option Paramétres de formulaire. 4 Cliquez sur OK. Lorsque you cliquez sur le nouveau lien, la page transmet les criteres à la page associée par le biais d'une chaine de requête.

  Vouspouvez spccifier un edteur externe autiliser pour l'edition de fichiers possedant des extensions precises.Par
  exmple,you pouze lancer un edteur de texe comme BBEdit,le Bloc-Notes ou TextEdit a partir de Dreamweaver
  pour modifier les fichiers JavaScript (JS).

  Yououpouvezattribudeférentéséditeurs externes pourdifférentes extensions de nomde fichier.

  More Help topicse-même, tapez son nom de fichier. 2 Si les critères à communiquer ont été directement reçus d'un-formulaire HTML via la méthode GET ou qu'ils figurent dans l'URL de la page,CHOISSEZ l'options Paramétres d'URL. 3 Si les critères à communiquer ont été directement reçus d'un formulaire HTML via la méthode POST, désisissez l'option Paramétres de formulaire. 4 Cliquez sur OK. Lorsque you cliquez sur le nouveau lien, la page transmet les criteres à la page associée par le biais d'une chaine de requête.

  "Ouverture de fichiers en mode Code par défaut" on page 316

  Définition d'un主编 extrer pour un type de fichiersissez l'option Paramétres de formulaire. 4 Cliquez sur OK. Lorsque you cliquez sur le nouveau lien, la page transmet les criteres à la page associée par le biais d'une chaine de requête.

  1 Choisissez Edition > Préférences.
  2 Sélectionnez la catégorie Types de fichiers/Editeurs dans la liste de gauche, puis cliquez sur OK.

  Ouvrir en mode Code Precise les extensions de noms de fichiers à ouvrir automatiquement en mode Code dans Dreamweaver.

  Editeur de code externe Spécifie l'éditeur de texte à utiliser.

  Recharger les fichiers modifiés Indiquez ce que Dreamweaver doit faire lorsqu'il détecte que des changements ont eté apportés de l'extérieur à un document deja ouvert dans Dreamweaver.

  Enregistrer au démarrage Permet d'indiquer si Dreamweaver doit systématiquement enregistrer le document actif avant d'exécuter l'éditeur, ne jamais enregistrer le document ou vous demander s'il doit l'enregistrer ou non à chaque lancement de l'éditeur externe.

  Fireworks Spécifiez les éditeurs pour divers types de fichiers multimédia.

  Démarrage d'un éditeur de code externeaux utilisateurs de saisir des données; - un comportement de serveur Insérer l'enregistrement pourmettre a jour la base de données. Lorsque l'utilisateur clique sur le bouton Envoyer d'un-formulaire, le comportement de serveur insere des enregistrements dans une table de base de données. Vous pouvez inclure ces éléments dans la page en une seule opération à l'aide de l'objet de données Formulaire d'insertion d'enregistrement ou les insérer individuellement à l'aide des outils de formulaire de Dreamweaver et du panneau Comportements de serveur. Note: La page d'insertion ne peut pas contérer plus d'un comportement de serveur de modification d'enregistrement à la fois. Par exemple, vous ne pouvez pas y inclure également un comportement de serveur Mettre à jour l'enregistrement ou Supprimer l'enregistrement.

  Choisissez Edition > Modifier avec éditeur externe.

  Réduction et modification de codease de données. Lorsque l'utilisateur clique sur le bouton Envoyer d'un-formulaire, le comportement de serveur insere des enregistrements dans une table de base de données. Vous pouvez inclure ces éléments dans la page en une seule opération à l'aide de l'objet de données Formulaire d'insertion d'enregistrement ou les insérer individuellement à l'aide des outils de formulaire de Dreamweaver et du panneau Comportements de serveur. Note: La page d'insertion ne peut pas contérer plus d'un comportement de serveur de modification d'enregistrement à la fois. Par exemple, vous ne pouvez pas y inclure également un comportement de serveur Mettre à jour l'enregistrement ou Supprimer l'enregistrement.

  Conseils de code Envoyer d'un-formulaire, le comportement de serveur insere des enregistrements dans une table de base de données. Vous pouvez inclure ces éléments dans la page en une seule opération à l'aide de l'objet de données Formulaire d'insertion d'enregistrement ou les insérer individuellement à l'aide des outils de formulaire de Dreamweaver et du panneau Comportements de serveur. Note: La page d'insertion ne peut pas contérer plus d'un comportement de serveur de modification d'enregistrement à la fois. Par exemple, vous ne pouvez pas y inclure également un comportement de serveur Mettre à jour l'enregistrement ou Supprimer l'enregistrement.

  Les conseils de code vous permettent d'insérer et de modifier le code rapidement et sans erreur de saisie. A mesure que vous tapez des caractères en mode Code, une liste de suggestions s'affiche et vous aide à compléter votre saisie. Par exemple, lorsque vous tapez les premiers caractères du nom d'une balise, d'un attribut ou d'une propriété CSS, une liste d'options dont le nom commence par ces caractères s'affiche. Cette fonctionnalité facilité l'insertion et la modification de code. Vous peuvent également l'utiliser pour consulter les attributs disponibles pour une balise, les paramètres d'une fonction ou les méthodes d'un objet.

  Les conseils de code sont disponibles pour différents types de code. Lorsque vous tapez le premier caractère d'un type de code précis, une liste de suggestions s'affiche. Par exemple, pour afficher la liste des conseils de code pour les noms de balises HTML, tapez un crochet ouvrant (<). De même, pour afficher des conseils de code pour JavaScript, tapez un point après un objet.

  Pour exploiter pleinement cette fonctionnalité, en particulier lorsque vous l'utilise pour des fonctions et des objets, définisse l'option Delai de la boite de dialogue Preférences de conseils de code sur 0 seconde.

  La fonctionnalité de conseils de code reconnait également les classes JavaScript personnalisées qui ne sont pas intégrées à ce langage. Vous pouze rédiger ces classes personalisées ou les ajouter par l'intermédiaire de bibliothèques de fournisseurs tiers, comme Prototype.

  Pour faire disparaitre la liste des conseils de code, appuyez sur la touche Retour arrêté (Windows) ou Arrière (Macintosh).

  Voutrouvrez un didacticiel video sur les conseils de code à l'adresse www.adobe.com/go/lrvid4048_dw_fr.

  Voutrouvrez un didacticiel video sur la prise en charge de JavaScript dans Dreamweaver,realise par I'equipe de Dreamweaver,à l'adresse www.adobe.com/go/dw10javascript_fr.

  Langages et technologies pris en chargeforme à l'aide des outils de création de Dreamweaver. 2 Pour ajouter le formulaire HTML, placez le point d'insertion à l'endetroit où le formulaire doit apparaitre, puis selectionné Insertion >

  Dreamweaver prend en charge les conseils de code pour les langages et les technologies suivants :

  • Adobe ColdFusion
  • Ajax
    ASP JavaScript
    ASP.NET C#
    ASP.NETVB
    ASP VBScript
  • CSS2 et CSS3
    DOM (Document Object Model)
    HTML4 et HTML5
  • jQuery (CS5.5 et versions ultérieures)
  • JavaScript (avec conseils de code pour les classes personnalisées)
    JSP
    PHP MySQL
    Spry

  Affichage d'un menu de conseils de codenées. 4 Saisissez votre nom d'utilisateur et votre mot de passer. 5 Dans le menu dérouulant Insérer dans la table, Sélectionnez la table de base de données dans laquelle insérer l'enregistrement. 6 Indiquez la colonne de base de données dans laquelle vous souhaitez inserer l'enregistrement. Dans le menu déroulant Valeur, selectionnez l'objet de formulaire devant inserer l'enregistrement. Dans le menu déroulant Envoyer en tant que, selectionnez ensuite le type de données de l'objet de formulaire. Le type de données est celui qu'attend la colonne de la table de base de données (texte, numérique, valeurs d'options booléennes). Répétez cette procédure pour chaque objet du formulaire. 7 Dans la zone Àpres l'insertion, aller à, indiquez la page à ouvrir après insertion de l'enregistrement dans la table ou cliquez sur le bouton Parcourir pour naviguer jusqu'au fichier. 8 Cliquez sur OK. Dreamweaver ajoute à la page un comportement de serveur qui permet aux utilisateurs d'insérer des enregistements dans une table de base de données. Pour ce faire, il leur suffit de compléter le formulaire HTML et de cliquer sur le bouton Envoyer.

  Le menu de conseils de code s'affiche automatiquement lorsque vous tapez en mode Code. Vous pouvez également l'afficher manuellement, sans taper.

  1 En mode Code (Fenêtre > Code), placez le point d'insertion à l'intérieur d'une balise.
  2 Appuyez sur Ctrl + Barre d'espace.

  Insertion de code à l'aide des conseils en mode Codepage à ouvrir après insertion de l'enregistrement dans la table ou cliquez sur le bouton Parcourir pour naviguer jusqu'au fichier. 8 Cliquez sur OK. Dreamweaver ajoute à la page un comportement de serveur qui permet aux utilisateurs d'insérer des enregistements dans une table de base de données. Pour ce faire, il leur suffit de compléter le formulaire HTML et de cliquer sur le bouton Envoyer.

  1 Saisissez le premier caractère du segment de code. Par exemple, pour insérer une balise, tapez un crochet ouvrant (<). Pour insérer un attribut, placez le point d'insertion juste après le nom de la balise, puis appuyez sur la barre d'espace.

  Une liste d'éléments (par exemple les noms des différentes balises ou des différents attributs) s'affiche.

  

  Vous pouvez fermer cette liste à tout moment en appuyant sur la touche Echap.

  2 Faites defiler les elements de la liste à l'aide de la barre de défilement ou des touches fléchéées vers le haut et vers le bas.
  3 Double-cliquez sur l'un des éléments de cette liste pour l'inserer ; vous pouze également le selectionner, puis appuyer sur la touche Entre (Windows) ou Retour (Macintosh).

  Si vous avez creeu un style CSS et que celui-ci ne figure pas dans la liste des conseils de code correspondant aux styles CSS, cliquez sur Actualiser la liste des styles. Si le mode Creation est visible, il peut arriver que du code non valide s'y affiche provisoirement lorsque vous cliquez sur Actualiser la liste des styles. Pour faire disparaitre ce code non valide du mode Creation, appuyez sur F5 afin d'actualiser l'affichage après l'insertion du style.
  4 Pour insérer une balise de fin, tapez < / (barre oblique).

  Note: Par défaut, Dreamweaver déterminée le moment où une balise de fermeture est requise et l'insère automatiquement. Vous pouvez modifier ce comportement par défaut, de façon à ce que Dreamweaver insère une balise de fermeture lorsque vous avez tapé le crochet fermant (> ) final de la balise d'ouverture. Alternativement, le comportement par défaut peutconsister à ne pas insérer la moindre balise de fermeture. Sélectionnez Edition > Préférences > Conseils de code, puis sélectionnéz l'une des options de Balises de fermeture.

  Modification d'une balise à l'aide des conseils de codennées dans laquelle vous souhaitez inserer l'enregistrement. Dans le menu déroulant Valeur, selectionnez l'objet de formulaire devant inserer l'enregistrement. Dans le menu dérounant Envoyer en tant que, selectionnez ensuite le type de données de l'objet de formulaire. Le type de données est celui qu'attend la colonne de la table de base de données (texte, numérique, valeurs d'options booléennes). Répétez cette procédure pour chaque objet du formulaire. 7 Cliquez sur OK. Dreamweaver ajoute à la page un comportement de serveur qui permet aux utilisateurs d'insérer des enregistements dans une table de base de données. Pour ce faire, il leur suffit de compléter le formulaire HTML et de cliquer sur le bouton Envoyer. Pour modifier le comportement de serveur, ouvre le panneau Comportements de serveur (Fenetre >

  • Pour remplaçer un attribut par un autre, supprimez l'attribut concené et sa valeur, puis ajoutez le nouvel attribut et la valeur associée en suivant la procédure ci'avant.
    Pour modifier une valeur, supprimez la valeur concernee, puis ajoutez une nouvelle valeur en suivant la procedure ci-avant.

  Actualisation des conseils de code JavaScripta page un comportement de serveur qui permet aux utilisateurs d'insérer des enregistements dans une table de base de données. Pour ce faire, il leur suffit de compléter le formulaire HTML et de cliquer sur le bouton Envoyer. Pour modifier le comportement de serveur, ouvre le panneau Comportements de serveur (Fenetre >

  Dreamweaver actualise automatiquement la liste des conseils de code disponibles lorsque vous travailliez dans un fjichier JavaScript. Par exemple, supposons que vous travailliez dans un fjichier HTML principal et que vous passiez à un fjichier JavaScript afin d'y apporter une modification. Cette modification se réprecute dans la liste des conseils de code lorsque vous revenez au fjichier HTML principal. Toutefois, la mise à jour automatique ne fonctionne que si vous modifiez vos fjichiers JavaScript dans Dreamweaver.

  Si vous les modifiez en dehors de Dreamweaver, appuyez sur CTRL+point pouractualiser les conseils de code JavaScript.

  Conseils de code et erreurs de syntaxeFenetre >

  Il peut arriver que les conseils de code ne fonctionnent pas correctement si Dreamweaver détecte des erreurs de syntaxe dans votre code. Dreamweaver signale les erreurs de syntaxe en affichtant des informations à leur sujet dans une barre en haut de la page. La barre d'informations sur les erreurs de syntaxe affiche la première ligne du code où Dreamweaver a rencontres l'erreur. Lorsque vous avez corrige les erreurs, Dreamweaver continue à afficher celles qui survennent par la suite.

  Dreamweaver fournit une assistance supplémentaire en mettant en rouge les numérios des lignes ou des erreurs de syntaxe se sont produites. Cette mise en évidence est visible dans le mode Code du fjichier contenant l'erreur.

  Dreamweaver affiche non seulement les erreurs de syntaxe pour la page actuelle, mais aussi pour les pages associées. Supposons par exemple que vous travailliez sur une page HTML utilisant un fjichier JavaScript inclus. Si le fjichier inclus contient une erreur, Dreamweaver affiche également une alerte pour celui-ci. Vous pouvez aisément ouvrir le fjichier associé contenant l'erreur enclistuant sur son nom dans le haut du document.

  Voupez desactiver la barre d'informations sur les erreurs de syntaxe. Pour ce faire, cliquez sur le bouton Alertes d'erreurs de syntaxe dans la barre d'outils de codage.

  Définition des préférences de conseils de codealeurs d'options booléennes). Répétez cette procédure pour chaque objet du formulaire. 6 Dans la zone Apre s insertion, aller a, indique z la page a ouvrir apres insertion de l'enregistrement dans la table ou cliquez sur le bouton Parcourir pour naviguer jusqu'au fichier. 7 Cliquez sur OK. Dreamweaver ajoute à la page un comportement de serveur qui permet aux utilisateurs d'insérer des enregistements dans une table de base de données. Pour ce faire, il leur suffit de compléter le formulaire HTML et de cliquer sur le bouton Envoyer.

  Vous pouvez modifier les paramètres par défaut des conseils de code. Par exemple, si vous ne voulez pas afficher les noms des propriétés CSS ou les conseils de code Spry, vous pouvez les désactiver parmi les préférences des conseils de code. Vous pouvez également définir des préférences relatives au début d'affichage des conseils de code et aux balises de fermeture.

  Meme si l'affichage des conseils de code est désacté, vous pouvez afficher un conseil en mode Code en appuyant sur les touches Ctrl+Barre d'espace.

  1 Choisissez Edition > Préférences.
  2 Sélectionnez la catégorie Conseils de code dans la liste de gauche.
  3 Parmi les options suivantes, définissee celles de votrechioix :

  Balises de fermeture Permet de spécifier le mode d'insertion des balises de fermeture par Dreamweaver. Par défaut, Dreamweaver insère la balise de fermeture automatiquement lorsque vous tapez les caractères < . Vous pouvez modifier ce comportement par défaut, de façon à ce que Dreamweaver insère une balise de fermeture suite au crochet fermant (>) de la balise d'ouverture, ou de façon à oimettre les balises de fin.

  Activer les conseils de code Entrainé l'affichage des conseils de code lorsque vous entrez du code en mode Code. Reglez le curseur Délai pour définir le décai (en secondes) qui s'écoule avant l' apparition des conseils appropriés.

  Activer les infobulles descriptives Affiche une description détaillée (s'il en existe une) du conseil de code sélectionné.

  Menu s d'utiliser tous les menus ou une partie seulement.

  More Help topicsrmulaire pour chaque colonne de la table de base de données. Si vous base de données générale automatiquement un ID de clé unique pour chaque enregistrement créé, supprimez l'objet de formulaire correspondant à la colonne à clé ; pour ce faire, Sélectionnez l'objet dans la liste et cliquez sur le bouton Moins (-). Ainsi, l'utilisateur du formulaire ne pourrait pas entraure une valeur d'ID qui existe déjà. Voussouvez également modifier l'ordre des objets de formulaire dans le formulaire HTML ; il vous suffit de selectionner un objet dans la liste et de le déplacer dans cette dernière en cliquant sur la flèche vers le haut ou vers le bas située sur la droite de la boîte de dialogue. 7 Définissez la façon dont chaque champ de saisie de données devra être affiché dans le formulaire HTML en cliquant sur une ligne du tableau Champs de formulaire et en entrant les informations suivantes dans les zones affichées sous le tableau : - Dans la zone Etiquette, saisissez la description à afficher à côté du champ de saisie de données. Par défaut, Dreamweaver affiche dans ce champ le nom de la colonne de la table. - Dans le menu déroulant Afficher comme, Sélectionnez l'objet de-formulaire à utiliser comme champ de saisie de données. Vous avez le besoin entre Champ de texte, Zone de texte, Menu, Case à cocher, Groupe de boutons radio et Texte. Pour les entrées en lecture seule, choisissez Texte. Vous pouvez également désirer Champ Mot de passer, Champ de fichier et Champ masqué. Note: Les champes masqués sont insérés à la fin du formulaire. - Dans le menu déroulant Envoyer en tant que, Sélectionnez le format de données accepté par la table de base de données. Par exemple, si les données numériques sont les seules admises, désisissez Numérique. - Définissez les propriétés de l'objet de-formulaire. Vous avez le besoin entre plusieurs possibilités, en fonction de l'objet de formulaire sélectionné comme champ de saisie de données. Pour les champs de texte, les zones de texte et le texte, vous pouvez enter une valeur initiale. Pour les menus et les groupes de boutons radio, ouvrez une autre boîte de dialogue afin de définir des propriétés. Pour les options, Sélectionné l'options Cochée ou Non cochée. 8 Cliquez sur OK. Dreamweaver insère dans la page un-formulaire HTML et un comportement de serveur Insérer l'enregistrement. Les objets de formulaire sont disposés sur la page sous forme d'un tableau simple, que vous pouvez ensuite personnaliser à l'aide des outils de conception de page de Dreamweaver. (assurez-vous qu'aucun objet de formulaire ne dépasse les limites du formulaire). Pour modifier le comportement de serveur, ouvre le panneau Comportements de serveur (Fenetre >

  "Utilisation des menus d'indication dans Quick Tag Editor" on page 350

  DOM (Document Object Model) W3C

  Didacticiel sur les conseils de code

  Conseils de code spécifique au siteroulant Envoyer en tant que, Sélectionnez le format de données accepté par la table de base de données. Par exemple, si les données numériques sont les seules admises, désisissez Numérique. - Définissez les propriétés de l'objet de-formulaire. Vous avez le besoin entre plusieurs possibilités, en fonction de l'objet de formulaire sélectionné comme champ de saisie de données. Pour les champs de texte, les zones de texte et le texte, vous pouvez enter une valeur initiale. Pour les menus et les groupes de boutons radio, ouvrez une autre boîte de dialogue afin de définir des propriétés. Pour les options, Sélectionné l'options Cochée ou Non cochée. 8 Cliquez sur OK. Dreamweaver insère dans la page un-formulaire HTML et un comportement de serveur Insérer l'enregistrement. Les objets de formulaire sont disposés sur la page sous forme d'un tableau simple, que vous pouvez ensuite personnaliser à l'aide des outils de conception de page de Dreamweaver. (assurez-vous qu'aucun objet de formulaire ne dépasse les limites du formulaire). Pour modifier le comportement de serveur, ouvre le panneau Comportements de serveur (Fenetre >

  Dreamweaver CS5 permet aux développpeurs qui emploient Joomla, Drupal, Wordpress ou d'autres cadres de visualiser les conseils de code PHP lorsqu'ils écrivent en mode Code. Pour afficher ces conseils de code, vous doivent tout d'abord créé un fisier de configuration à l'aide de la boite de dialogue Conseils de code spécifique au site. La configuration indique où Dreamweaver doit rechercher les conseils de code spécifique à votre site.

  Voutrouvezez undidacticiel video sur l'utilisation des conseils de code spécifique au site à l'adresse www.adobe.com/go/learn_dw_comm13_fr.

  Création du fichier de configurationtement de serveur Insérer l'enregistrement. Les objets de formulaire sont disposés sur la page sous forme d'un tableau simple, que vous pouvez ensuite personnaliser à l'aide des outils de conception de page de Dreamweaver. (assurez-vous qu'aucun objet de formulaire ne dépasse les limites du formulaire). Pour modifier le comportement de serveur, ouvre le panneau Comportements de serveur (Fenetre >

  La boite de dialogue Conseils de code spécifique au site permet de creer le fjichier de configuration requis pour afficher les conseils de code dans Dreamweaver.

  Par défaut, Dreamweaver place le fichier de configuration dans le réseau Adobe Dreamweaver CS5\configuration\Shared\Dinamico\Presetts.

  Note: Les conseils de code que vous creez sont spécifiques au site sélectionné dans le panneau Fichiers de Dreamweaver. Pour que les conseils de code puissant être affichés, la page sur laquelle vous travailliez doit se trouve dans le site actuellément sélectionné.

  1 Choisissez Site > Consels de code.

  Par défaut, la fonctionnalité Consels de code spécifique au site analyse votre site afin de déterminer quel cadre CMS (système de gestion du contenu) vous employez. Par défaut, Dreamweaver prend en charge trois cadres : Drupal, Joomla et Wordpress.

  Les quatre boutons à droite du menu Structure permettent d'importer, enregistrer, renomer ou supprimer des structures de cadre.

  Note: Il est impossible de supprimer ou de renomer les structures de cadre par défaut existantes.

  2 Dans la zone Sous-racine, définisse le dossier de sous-racine où vous stockez les fichiers de votre cadre. Vous pouvez cliquer sur l'icone de dossier en regard de la zone de texte pour rechercher l'emplacement des fichiers de cadre.

  Dreamweaver affiche l'arborescence des dossiers contenant les fichiers de votre cadre. Si les dossiers et/ou fichiers à analyser sont tous affichés, cliquez sur OK pour executer l'analyse. Si vous poulez personnelier l'analyse, passez aux étapes suivantes.

  3 Cliquez sur le bouton Plus (+) dans le haut de la fenetre Fichiers afin de selectionner un fichier ou un dossier à ajouter à l'analyse. Dans la boite de dialogue Ajouter fichier/dossier, vous pouvez spécifier les extensions de fichiers spécifique que vous pouze inclure.

  Note: La définition d'extensions de fichier spécifiques accélère le processus d'analyse.

  4 Pourzheimer des fichiers de l'analyse, selectionnez-les puis cliquez sur le bouton Moins (-) dans le haut de la fenetre Fichiers.

  Note: Si vous avez selectionné le cadre Drupal ou Joomla, la boîte de dialogue Conseils de code spécifique au site affiche un chemin d'accès supplémentaire vers n fichier dans votre dossier de configuration de Dreamweaver. Ne le supprimez pas, car il est nécessaire en cas d'emploi de ces cadres.

  5 Pour personnelier la façon dont la fonctionnalité Conseils de code spécifique au site traite un fichier ou un dossier précis, selectionnez-le dans la liste et effectuez l'une des actions suivantes :

  • Choisissez Analyser ce dossier pour inclure le dossier sélectionné dans l'analyse.
  • Sélectionnez Récursif pour inclure tous les fichiers et dossiers du réseau selectionné.
  • Cliquez sur le bouton Extensions pour ourir la boite de dialogue Rechercher des extensions, où vous pouvez préciser les extensions de fichiers à inclure dans l'analyse pour un fichier ou un dossier déterminé.

  Enregistrement de la structure du sitee page de mise à jour. 2 Dans le panneau Liaisons (Fenetre >

  Voupe enregister la structure de site personalisée que vous avee creeedans la boite de dialogue Conseils de code specifiques au site.

  1 Creez la structure des fichiers et des dossiers désirée, en ajoutant et supprimant les fichiers et dossiers selon vos besoins.
  2 Cliques sur le bouton Enregister la structure dans le coin supérieur droit de la boite de dialogue.
  3 Donnez un nom à la structure du site, puis cliquez sur Enregister.

  Note: Si le nom que vous indiquez est déjà utilisé, Dreamweaver vous invite à entrer un nom différent ou à confirmer que vous pouze écraser la structure portant ce même nom. Il est impossible d'écraner les structures de cadre par défaut.

  Modification du nom d'une structure de siteD de l'enregistrement), ainsi que les colonnes contenant les données devant être mises à jour. 5 Configurez la zone Filtre de manière à ce que la valeur de votre colonne à clé soit égale à celle du paramètre d'URL correspondant transmis par la page de résultats. Ce type de filtrer create un jeu d'enregistrements ne contenant que l'enregistrement spécifique par la page de résultats. Par exemple, si vous colonne à clé contient des informations d'ID d'enregistrement et s'appelle PRID et si la page principale transmet les informations d'ID d'enregistrement correspondantes dans le paramètre d'URL appelé id, votre zone Filtre doit avoir l'aspect suivant : 

  Lorsque vous renommez la structure de votre site, n'oubliez pas que vous ne pouvez pas utiliser les noms d'une des trois structures de cadre de site par défaut, ni le mot « custom » (personnalisé).

  1 Affichez la structure à renommer.
  2 Cliquez sur l'icone Renommer la structure dans le coin supérieur droit de la boite de dialogue.
  3 Entrez le nouveau nom de la structure, puis cliquez sur Renommer.

  Note: Si le nom que vous indiquez est déjà utilisé, Dreamweaver vous invite à entrer un nom différent ou à confirmier que vous pouze écraser la structure portant ce même nom. Il est impossible d'écraner les structures de cadre par défaut.

  Ajout de fichiers ou de dossiers à la structure d'un siteément

  Vou puevez ajouter n'importe quel fichier ou dossier associé à votre cadre. Vous pouvez ensuite préciser les extensions des fichiers à analyser. (Voir la section suivante.)

  1 Cliquez sur le bouton Plus (+) dans le haut de la fenetre Fichiers pour ouvrir la boite de dialogue Ajouter fichier/dossier.
  2 Dans la zone Ajouter fisier/dossier, entrez le chemin d'accès au fisier ou au dossier à ajouter. Vous pouvez également cliquer sur l'icone de dossier à côté de la zone de texte pour rechercher un fisier ou un dossier.
  3 Cliquez sur le bouton Plus (+) dans le haut de la fenetre Extensions pour préciser les extensions des fichiers à analyser.

  Note: La définition d'extensions de fichier spécifiquees accélère le processus d'analyse.

  4 Cliques sur Ajouter.

  Recherche d'extensions de fichiers dans un site91

  Utilisez la boite de dialogue Rechercher des extensions pour afficher et trouver les extensions des fichiers inclus dans la structure du site.

  1 Dans la boite de dialogue Conseils de code spécifique au site, cliquez sur le bouton Extensions.
  La boite de dialogue Rechercher des extensions affiche les extensions pouvant etre analysées pour l'instant.
  2 Pour ajouter une autre extension à la liste, cliquez sur le bouton Plus (+) dans le haut de la fenetre Extensions.
  3 Pour supprimer une extension de la liste, cliquez sur le bouton Moins (-).

  Insertion de code avec la barre d'outils de codage, puis selectionné Insertion >

  1 Assurez-vous que vous étètes en mode Code (Affichage > Code).
  2 Placez le curseur dans le code, ou selectionnez un bloc de code.
  3 Cliquez sur un bouton de la barre d'outils de codage, ou selectionnez un élément de l'un des menus contextuels de la barre d'outils.

  Pour connaître la fonction de chaque bouton, positionnez le pointeur sur ce bouton jusqu'à ce qu'une info-bulle apparaisse. La barre d'outils de codage contient par défaut les boutons suivants :

  Ouvr les documents Affiche la liste des documents ouverts. Lorsque cette option est selectionnée, elle s'affiche dans la fenetre Document.

  Afficher la fenêtre Navigation dans le code Affiche la fenêtre Navigation dans le code. Pour plus d'informations, consultez la rubrique "Navigation vers le code associé" on page 332.

  Réduire balises entières réduit tout le contentu compris entre une balise d'ouverture et sa balise de fermeture (par exemple, tout le code compris entre

  dans le selectiveur de balises dans le coin inférieur gauche de la fenetre de document. - Cliquez dans la cellule en maintainant la touche Ctrl (Windows) ou Commande (Macintosh) enforcée. - Cliquez dans la cellule, puis choisissez Edition > Sélectionner tout. Lorsqu'une cellule est déjà selectionnée, choisissez Edition > Sélectionner tout à nouveau pour selectionner tout le tableau. Sélection d'une ligne ou d'un bloc rectangulaire de cellules Effectuez l'une des opérations suivantes : - Faites glisser la souris d'une cellule vers une autre. - Cliquez sur une cellule. Tout en appuyant sur la touche Ctrl (Windows) ou Commande (Macintosh), cliquez sur la même cellule, puis cliquez dans une autre cellule en maintenant la touche Maj enforcé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. Sélection de cellules nonAdjacentes Appuyez sur Ctrl (Windows) ou Commande (Macintosh), puis cliquez sur les cellules, les lignes ou les colonnes que vous voulez selectionner. Si chaque cellule, ligne ou colonne sur laquelle vous cliquez après avoir appuyé sur Ctrl ou sur Commande n'est pas déjà seLECTIONnée, elle est ajoutée à la selection. Si elle est déjà seLECTIONnée, elle est retiree de la selection. Modification de la couleur de surbrillance pour les éléments d'un tableau 1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh). 2 Sélectionnez la catégorie Surbrillance dans la liste à gauche, effectuez l'une des modifications suivantes, puis clique sur OK. - Pour modifier la couleur de surbrillance des éléments du tableau, cliquez dans la case de couleur Survol et Sélectionnez une couleur de surbrillance à l'aide du sélecteur de couleur (ou tapez la valeur hexadécimale correspondant à la couleur de surbrillance dans la zone de texte). Pour activer ou désactiver la seLECTION d' éléments du tableau, activez ou désactivez l'option Afficher de l'option Survol. Note: Ces options s'appliquent à tous les objets, tels que les éléments à positionnement absolu (PA), que Dreamweaver met en surbrillance lorsque vous faites passer le pointeur dessus. Définition des propriétés des tableaux Yououpouvezutiliserl'inspecteurPropriétés pourmodifierlestableaux. 1 Sélectionnez un tableau. 2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), apportez les modifications requises aux propriétés. ID de tableau Un identificateur du tableau. Lignes et colonnes Le nombre de lignes et de colonnes dans le tableau. La largeur du tableau, en pixels ou en pourcentage de la largeur de fenetre du navigateur. Note: Il est rarement utile de définir la hauteur d'un tableau. Remplissage Determine l'espace (en pixels) entre le contenu d'une cellule et son contour. Espac. de cellule Deteine le nombre de pixels séparant les cellules contiguës d'un tableau. Alignement Determine la position du tableau par rapport aux autres éléments du même paragraphe (texte ou images). Gaughe aligne le tableau sur la gauche des autres éléments (pour que le texte situé dans le même paragraphe apparaisse à droite du tableau); Droite aligne le tableau sur la droite des autres éléments (le texte apparaisant à gauche du tableau); et Centrer centre le tableau (le texte apparaisant au-dessus et/ou en dessous du tableau). Par défaut indique que le navigateur doit utiliser son alignement par défaut. Lorsque l'alignement est défini sur Par défaut, le reste du contenu n'est pas affiché à côté du tableau. Pour afficher un tableau à côté du contenu, utilisez l'alignement à croite ou à gauche. Bordure Indique la largeur, en pixels, des bordures du tableau. Lorsque vous n' affectez pas explicitement de valeur pour la cordure, l'espacement entre les cellules et la marge interieure des cellules, la plupart des navigateurs affichent la cordure et une marge interieure des cellules définies sur 1, ainsi qu'un espacement entre les cellules définis sur 2. Pour être sur que les navigateurs afficheront le tableau sans marge interieure ni espacement, définièsez Bordure sur 0, Marge interieure des cellules et Espacement entre les cellules sur 0. Pour visualiser les contours des cellules et du tableau lorsque la cordure est définiè sur 0, Sélectionnez Affichage > Assistances visuelles > Bordures de tableau. Classe Applique une classe CSS au tableau. Note: Il peut être nécessaire de développer l'inspecteur Propriétés du tableau pour afficher les options suivantes. Pour développer l'inspecteur Propriétés du tableau, cliquez sur la flèche de développement dans son coin inférieur droit. Effacer largeurs de colonne et Effacer hauteurs de ligne suppliment toutes les valeurs de hauteur de ligne ou de largeur de colonne du tableau explicitement specifiées. Convertir largeurs de tableau en pixels et Convertir les hauteurs de tableau en pixels definissant la largeur ou la hauteur de chaque colonne du tableau sur sa largeur en pixels (definit etalement la largeur du tableau sur sa largeur en pixels). Convertir largeurs de tableau en pourcentage et Convertir les hauteurs de tableau en pourcentages definissant la largeur ou la hauteur de chaque colonne du tableau sur sa largeur exprimée en pourcentage de la largeur de la fenetre de document (definit etalement la largeur du tableau sur sa largeur en pourcentage de la largeur de la fenetre de document). Si vous avez tapé une valeur dans une zone de texte, appuyez sur Tab ou Entrée (Windows) ou Retour (Macintosh) pour l'appliquer. Définition des propriétés de cellule, de ligne ou de colonne Vou pOUZ est usERl'inspeeur Propriétés pour modifier des cellules et des lignes dans un tableau. 1 Sélectionnéz une ligne ou une colonne. 2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), définièsez les options suivantes : Horiz Indique l'alignement horizontal du contenu d'une cellule, d'une ligne ou d'une colonne. Vous pouvez aligner le contenu de la cellule sur la gauche, la droite ou le centre des cellules ou vous pouvez indiquer au navigateur d'utiliser l'alignement par défaut (en général à gauche pour les cellules normales et au centre pour les cellules d'en-tête). Vert. Indique l'alignement vertical du contenu d'une cellule, d'une ligne ou d'une colonne. Vous pouvez aligner le contenu de la cellule sur le haut, le centre ou le bas des cellules, sur la ligne de base ou encore indiquer au navigateur d'utiliser l'alignement par défaut (en général le centre). L et H La largeur et la hauteur des cellules selectionnées en pixels ou en pourcentage de la largeur ou de la hauteur de tout le tableau. Pour specifier un pourcentage, faites suivre la valeur du signe de pourcentage (%). Pour laisser au navigateur le sein de déterminer la largeur et la hauteur appropriées, en fonction du contenu de la cellule et des largeurs et hauteurs des autres colonnes et lignes, laissez le champ vide (paramétrage par défaut). Par défaut, un navigateur可以选择 une hauteur de ligne et une largeur de colonne correspondant à l'image la plus large ou à la ligne la plus longue dans une colonne. C'est pourquoit il arrive qu'une colonne de tableau devienne beaucoup plus large que les autres lorsque vous y ajoutez du contenu. Note: Vous pouvez spécifique une hauteur en pourcentage de la hauteur totale du tableau, mais il se peut que la ligne ne s'affiche pas au pourcentage de hauteur spécifique dans les navigateurs. Ar-pl La couleur d'arriere-plan d'une cellule, d'une colonne ou d'une ligne, chosesie à l'aide du selecteur de couleurs. Fusionner les cellules Combine les cellules, lignes ou colonnes selectionnées en une seule cellule. Vous pouvez fusionner des cellules uniquement si elles forment un bloc rectangulaire ou linéaire. Fractionner la cellule Divise une cellule en deux ou plusieurs cellules. Vous ne pouvez fractionner qu'une cellule à la fois : ce bouton est désactisé si plusieurs cellules sont selectionnées. Pas de回头 à la ligne auto Evite tout renvoi automatique à la ligne, en conservant tout le texte d'une cellule donnée sur une seule ligne. Si Pas de回头 à la ligne auto est activé, les cellules s'élargissant en fonction de la taille des données que vous tapez ou collez. (Normalement, les cellules s'élargissant horizontally pour accueillir le mot le plus long ou l'image la plus large, puis s'étirrent verticalément autant que nécessaire pour intégrer tout autre contenu). En-tête Met en forme les cellules selectionnées comme des cellules d'en-tête de tableau. Par défaut, le contenu des cellules de titre de tableau est en caractères gras et centré. Voupez spicifier la largeur ou la hauteur par des pixels ou des pourcentages. Voupez convertir les pixels en pourcentages et inversement. Note: Lorsque vous définisse les propriétés d'une colonne, Dreamweaver modifie les attributs de la balise td correspondant à chaque cellule de la colonne. Lorsque vous définisse certaines propriétés d'une ligne, Dreamweaver modifie les attributs de la balise tr只想 que de modifier les attributs de chaque balise td dans la ligne. Lorsque vous appliquez le même format à toutes les cellules d'une ligne, en appliquant le format à la balise tr, vous obtenez un code HTML plus net et plus concis. 3 Appuyez sur Tab ou Entre (Windows) ou Retour (Macintosh) pour appliquer la valeur. Utilisation du mode Tableaux développés pour une modification de tableau plus simple Le mode Tableaux développés ajoute provisoirement de la marge à l'intérieur des cellules et de l'espacement à tous les tableaux d'un document, et augmente les bordures des tableaux afin de rendre les modifications plus faciles. Ce mode vous permet deCHOISIR DES ÉLÉMENTS dans les tableaux ou de placer le point d'insertion de manière précise. Par exemple, vous pouvez développer un tableau pour placer le point d'insertion à gauche ou à droite d'une image, sans selectionner l'image ou la cellule du tableau par inadvertance. A B A. Tableau en mode Standard B. Tableau en mode Tableaux développés Note: ÀpRES avoir choisi ou place le point d'insertion, vous doivent revenir au mode Standard du mode Création pour effectuer vos modifications. En mode Tableaux développement, certaines opérations, telles que le redimensionnement, ne produit pas les résultats attendus. Basculement en mode Tableaux développementés 1 Si vous travailliez en mode Code, Sélectionnez Affichage > Création ou Affichage > Code et création (vous ne pouvez pas passer en mode Tableaux développés lorsque vous étés en mode Code). 2 Effectuez l'une des opérations suivantes : - Choisissez Affichage > Mode Tableau > Mode Tableaux développement. Dans la catégorie Mise en forme du panneau Insertion, cliquez sur Developpè. Une barre étiquetée Mode Tableaux développés s'affiche en haut de la fenêtre de document. Dreamweaver ajoute une marge interieure des cellules et de l'espacement entre les cellules à tous les tableaux de la page et augmente l'épaisseur des cordures des tableaux. Sortie du mode Tableaux développementés Effectuez l'une des opérations suivantes : Cliquez sur [quitter] dans la barre intitulée Mode Tableaux développés en haut de la fenêtre de document. Choisissez Affichage > Mode Tableau > Mode Standard. Dans la catégorie Mise en forme du panneau Insertion, cliquez sur Standard. Mise en forme des tableaux et des cellules Voupez modifier l'aspect des tableaux en definissant des propriétés pour l'ensemble ou une partie de leurs cellules, ou en leur appliquant une mise en forme prédéfinie. Avant de définir les propriétés d'un tableau ou de cellules, vous doivent savoir que l'ordre de priorité pour le formatage est le suivant : cellules, lignes et tableaux. Pour formater le texte dans une cellule de tableau, suivez la même procedure que pour formater du texte en dehors d'un tableau. Modification du format d'un tableau, d'une cellule, d'une ligne ou d'une colonne. 1 Sélectionnez un tableau, une cellule, une ligne ou une colonne. 2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), cliquez sur la flèche d'agrandissement située dans le coin inférieur droit et modifiez les propriétés en fonction de vos besoins. 3 Modifie les propriétés de votrechoix. Pour plus d'informations sur les options, cliquez sur l'icone Aide de l'inspecteur Propriétés. Note: 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只想 que de modifier les attributs de chaque balise td dans la ligne. Lorsque vous appliquez le même format à toutes les cellules d'une ligne, en appliquant le format à la balise tr, vous obtenez un code HTML plus net et plus concis. Ajout ou modification des valeurs d'accessibilité d'un tableau en mode Code Modifiez les attributs dans le code. Pour repérer rapidement les balises dans le code, cliquez dans le tableau, puis selectionnez la balise dans le selector de balises situé au bas de la fenêtre de document. Ajout ou modification des valeurs d'accessibilité d'un tableau en mode Création Pour modifier la légende du tableau, mettez-la en surbrillation, 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 maintainant la touche Ctrl enfoncée (Macintosh), puis désissez 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 enfonnée (Macintosh), puis désisissez Modifier le code de la balise. Redimensionnement des tableaux, des colonnes et des lignes Redimensionnement des tableaux Vou puez redimensionner tout un tableau ou seulement certaines cellules ou certaines colonnes individuelles. Lorsque you redimensionnez tout un tableau, toutes ses cellules changent de taille en proportion. Si les cellues d'un tableau ont une largeur ou une hauteur specifiees explicitement, le redimensionnement du tableau modifie la taille visuelle des cellules dans la fenetre de document mais ne modifie pas la largeur et la hauteur specifiees des cellules. Vou puez redimensionner un tableau en faisant glisser l'une de ses poignees de selection. Dreamweaver affiche la largeur du tableau, ainsi qu'un menu des en-têtes de tableau, en haut ou en bas du tableau lorsque le tableau est seLECTIONné ou que le point d'insertion se trouve dedans. Les largeurs de colonne définies dans le code HTML ne correspondant pas nécessairement aux largeurs apparentes à l'écran. Dans ce cas, vous pouze uniformier 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 pouze activer ou désactiver ces informations à votre convenance. Redimensionnement des colonnes et des lignes Vous pouvez modifier la largeur d'une colonne ou la hauteur d'une ligne dans l'inspecteur Propriétés ou en faisant glisser les cordures de la colonne ou de la ligne. Si vous ave des problèmes pour le redimensionnement, vous pouvez effacer la largeur des colonnes ou la hauteur des lignes et recommencer. Note: Vous pouze aussi modifier la largeur et la hauteur des cellules directement dans le code HTML à l'aide du mode Code. Dreamweaver affiche la largeur des colonnes, ainsi que les menus des en-têtes de colonne, en haut ou en bas des colonnes lorsque le tableau est sélectionné ou que le point d'insertion se trouve dedans. Vous pouvez activer ou désactiver les menus d'en-têtes de colonne à votre convenance. More Help topics "Utilisation de code de page" on page 309 Redimensionnement de tableaux, de colonnes et de lignes Redimensionnement d'un tableau Sélectionnéz le tableau. Pour redimensionner le tableau horizontally, faites glisser la poignee de selection vers la droite. - Pour redimensionner le tableau verticalement, faites glisser la poignee de selection vers le bas. Pour redimensionner le tableau verticalement et horizontalement, faites glisser la poignee de selection vers le coin inférieur droit. Modification de la largeur d'une colonne tout en conservant la même largeur de tableau Faites glisser la cordure droite de la colonne à modifier. La largeur de la colonne contiguè est également modifiée, si bien que vous redimensionné deux colonnes. L'affichage visuel vous montre la manière dont les colonnes seront ajustées, la largeur totale du tableau ne variant pas. Note: Dans les tableaux avec des largeurs en pourcentage (et non en pixels), si vous faites glisser la cordure droite de l'extreme droite du tableau, la largeur globale du tableau est modifiée et toutes les colonnes s'adaptent proportionnellement. Modification de la largeur d'une colonne en conservant les dimensions des autres colonnes Maintenez la touche Maj enforcée, puis faites glisser la cordure de la colonne. Seule la largeur de cette colonne change. L'affchage visuel vous montre la maniere dont les colonnes seront ajustées, la largeur totale du tableau variant en fonction de la colonne redimensionnée. Modification de la hauteur d'une ligne visuellement Faites glisser la cordure inférieure de la ligne. Uniformisation des largeurs de colonne en mode Code avec les largeurs visuelles 1 Clique dans une cellule. 2 Cliquez sur le menu des en-têtes de tableau, puis choisissez Uniformiser toutes les largeurs. Dreamweaver redefinit la largeur spécifiée dans le code sur la largeur visuelle. Effacement de toutes les largeurs et hauteurs définies dans un tableau 1 Sélectionnéz le tableau. 2 Effectuez l'une des opérations suivantes : - Choisissez Modifier > Tableau > Effacer les largeurs de colonnes ou Modifier > Tableau > Effacer les hauteurs de cellules. 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. Effacement d'une largeur de colonne définie Cliquez sur le menu des en-têtes de colonne, puisCHOisissez Effacer les largeurs de colonne. Activation ou désactivation des menus et de la largeur d'un tableau et des colonnes 1 Choisissez Affichage > Assistances visuelles > Largeurs de tableau. 2 Clique du bouton droit de la souris (Windows) ou en Maintenant la touche Ctrl enfoncée (Macintosh) dans le tableau, puis choisissez Tableau > Largeurs de tableau. Ajout et suppression de lignes et de colonnes Pour ajouter et supprimer des lignes et des colonnes à l'aide des commandes Modifier > Tableau ou du menu des entêtes de colonne. Le fait d'appuyer sur la touche de tabulation lorsque le curseur se trouve dans la dernière cellule d'un tableau ajoute automatiquement une ligne. Ajout d'une ligne ou d'une colonne individuelle Cliquez dans une cellule, puis procedede l'une des manieres suivantes : - Choisissez Modifier > Tableau > Insérer une ligne ou Modifier > Tableau > Insérer une colonne. Une ligne apparait au-dessus du point d'insertion ou une colonne apparait a gauche du point d'insertion. Cliquez sur le menu des en-têtes de colonne, puis choisissez Insérer une colonne à gauche ou Insérer une colonne à droite. Ajout de plusieurs lignes ou colonnes 1 Clique dans une cellule. 2 Choisissez Modifier > Tableau > Insérer des lignes ou des colonnes et cliquez sur OK. Insérer Indique les lignes ou les colonnes à insérer. Nombre de lignes ou Nombre de colonnes Le nombre de lignes ou de colonnes à insérer. Ou Indique si les nouvelles lignes ou colonnes doivent apparaître avant ou après la ligne ou la colonne de la cellule selectionnée. Suppression d'une ligne ou d'une colonne Effectuez l'une des opérations suivantes : Cliquez sur une cellule de la ligne ou de la colonne que vous poulez supprimer, puis choisissez Modifier > Tableau > Supprimer la ligne ou Modifier > Tableau > Supprimer la colonne. Sélectionnez une ligne ou une colonne entière, puis choisissez Edition > Effacer ou appuyez sur Suppr. Ajout ou suppression de lignes ou de colonnes à l'aide de l'inspecteur Propriétés 1 Sélectionnéz le tableau. 2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), procédez de l'une des manières suivantes : Pour ajouter ou supprimer des lignes, augmentez ou réduisez la valeur indiquant le nombre de lignes. Pour ajouter ou supprimer des colonnes, augmentez ou réduisez la valeur indiquant le nombre de colonnes. Note: Dreamweaver ne vous avertit pas si vous supprimez des lignes et des colonnes contenant des données. Fractionnement et fusion de cellules Utilisez l'inspecteur Propriétés ou les commandes du sous-menu Modifier > Tableau pour fractionner ou fusionner des cellules. Fusion de plusieurs cellules d'un tableau 1 Sélectionnez les cellules dans une ligne contiguë et sous forme rectangulaire. Dans l'illustration ci-dessous, la selection est un rectangle de cellules ; les cellules peuvent donc etre fusionnées. Location Name City State or Country Baltimore-Washington International Baltimore MD Cairo International Cairo Egypt Canberra Canberra Australia Cairns Cairns Queensland Cape Town Airport Cape Town South Africa Dans l'illustration ci-dessous, la selection n'est pas un rectangle ; les cellules ne peuvent donc pas etre fusionnées. Location Name City State or Country Baltimore-Washington International Baltimore MD Cairo International Cairo Egypt Canberra Canberra Australia Cairns Cairns Queensland Cape Town Airport Cape Town South Africa 2 Effectuez l'une des opérations suivantes : Choisissez Modifier > Tableau > Fusionner les cellules. Dans l'inspecteur Propriétés HTML (Fenêtre > Propriétés) en mode développé, cliquez sur le bouton Fusionner les cellules . Note: Si le bouton n'est pas visible, cliquez sur la flèche de développement, dans le coin inférieur droit de l'inspecteur Propriétés, pour afficher toutes les options. Le contenu des cellules individuelles est placé dans la cellule produit par la fusion. Les propriétés de la première cellule sélectionnée sont appliquées à la cellule fusionnée. Fractionnement d'une cellule 1 Cliquez dans une cellule, puis procedede l'une des manieres suivantes: - Choisissez Modifier > Tableau > Fractionner la cellule. - Dans l'inspecteur Propriétés HTML (Fenêtre > Propriétés) en mode agrandi, cliquez sur le bouton Fractionner les cellules. Note: Si le bouton n'est pas visible, cliquez sur la flèche de développement, dans le coin inférieur droit de l'inspecteur Propriétés, pour afficher toutes les options. 2 Dans la boite de dialogue Fractionner la cellule, spécifiez comment vous voulez fractionner la cellule : Fractionner la cellule Indique comment la cellule doit etre fractionnee, en lignes ou en colonnes. Nombre de lignes/Nombre de colonnes Indique en combien de colonnes ou de lignes la cellule doit etre fractionnee. Augmentation ou réduction du nombre de lignes ou de colonnes occupées par une cellule Effectuez l'une des opérations suivantes : - Choisissez Modifier > Tableau > Augmenter l'endetue de ligne ou Modifier > Tableau > Augmenter l'endetue de colonne. - Choisissez Modifier > Tableau > Réduire l'étendue de ligne ou Modifier > Tableau > Réduire l'étendue de colonne. Copie, collage et suppression de cellules Vou puez copier, coller ou supprimer une ou plusieurs cellules tout en preservant leur formatage. Voupez coller les cellules au niveau d'un point d'insertion ou a la place d'une selection 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 selection du tableau dans laquelle les cellules seront collées. Coupure ou copie des cellules d'un tableau 1 Sélectionnez une ou plusieurs cellules dans une ligne contiguè et sous forme rectangulaire. Dans l'illustration ci-dessous, la selection est un rectangle de cellules ; les cellules peuvent donc etre coupées ou copiees. Location Name City State or Country Baltimore-Washington International Baltimore MD Cairo International Cairo Egypt Canberra Canberra Australia Cairns Cairns Queensland Cape Town Airport Cape Town South Africa Dans l'illustration ci-dessous, la sélection n'est pas un rectangle ; les cellules ne peuvent donc pas etre coupées ou copiees. Location Name City State or Country Baltimore-Washington International Baltimore MD Cairo International Cairo Egypt Canberra Canberra Australia Cairns Cairns Queensland Cape Town Airport Cape Town South Africa 2 Choisissez Edition > Couper ou Edition > Copier. Note: Si vous avons sélectionné une ligne ou une colonne entière et que vous choisissez Edition > Couper, la ligne ou la colonne entière est supprimée du tableau (et non pas seulement le contenu des cellules). Collage de cellules d'un tableau 1 Choisissez l'emplacement ou coller les cellules : - Pour replacer des cellules existantes par les cellules que vous collez, Sélectionné 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 ave copié ou coupé un bloc de 3 × 2 cellules, vous pouvez sélectionner un autre bloc de 3 × 2 cellules pour le replacer par les cellules collées.) - Pour coller une ligne entière de cellules au-dessus d'une cellule spécifique, cliquez dans celle-ci. Pour coller une colonne entiere de cellules a gauche d'une cellule specifique, cliquez dans celle-ci. Note: Si vous avez place moins d'une ligne ou d'une colonne entiere dans le Presse-papiers et que vous cliquez dans une cellule puis collez les cellules figurant dans le Presse-papiers, alors il se peut que la cellule dans laquelle vous avez cliqué et les cellules voisines (selon leur emplacement dans le tableau) soient replacées par les cellules que vous avez collées. Pour creer un nouveau tableau avec les cellules collées, placez le point d'insertion hors du tableau. 2 Choisissez Edition > Coller. Si vous collez des lignes ou des colonnes entières dans un tableau existant, celles-ci s'ajoutent au tableau. Si vous ne collez qu'une seule cellule, le contentu de la cellule selectionnée est remplaced. Si vous collez le contenu du Presse-papiers en dehors d'un tableau, les lignes, colonnes ou cellules que vous collez sont utilisées pour définir un nouveau tableau. Suppression du contenu d'une cellule en conservant les cellules intactes 1 Sélectionnez une ou plusieurs cellules. Note: Veillez à ce que la seLECTION ne comprendne pas de lignes ou de colonnes entières. 2 Choisissez Edition > Effacer ou appuyez sur la touche Suppr. Note: Si seules des lignes ou des colonnes entières sont selectionnées lorsque vous désissez Edition > Effacer ou que vous appuyez sur Suppr, les lignes ou les colonnes entières (pas seulement leurs contenus) sont supprimées du tableau. Suppression de lignes ou de colonnes contenant des cellules fusionnées 1 Sélectionnez une ligne ou une colonne. 2 Choisissez Modifier > Tableau > Supprimer la ligne ou Modifier > Tableau > Supprimer la colonne. Imbrication de tableaux Un tableau imbriqué est un tableau à l'intérieur d'une cellule d'un autre tableau. Vous pouvez lemettre en forme comme n'importe quel tableau, mais sa largeur est limite par la largeur de la cellule dans laquelle il se trouve. 1 Cliquez dans une cellule du tableau. 2 Sélectionnéz Insérer > Tableau, définités les options Tableau et cliquez sur OK. Tride tableaux Vous pouvez trier les lignes d'un tableau selon le contentu d'une seule colonne. Vous pouvez également effectuer un tri plus complexe, selon le contentu de deux colonnes. Vou ne pouvez pas trier les tableaux contenant colspan ou rowspan, c'est-à-dire les tableaux qui contiennent des cellules fusionnées. 1 Sélectionnez le tableau ou cliquez dans une cellule. 2 Sélectionnez Commandes > Trier le tableau, définissez les options de la boîte de dialogue et cliquez sur OK. Trier par Déterminé quelles valeurs de colonne utiliser pour trier les lignes du tableau. Ordre Determine comment la colonne doit etre triee (dans l'ordre alphabetique ou numérique) et si elle doit etre triee par ordre croissant (de A à Z, du chiffre le plus bas au plus elevé) ou par ordre decroissant. Lorsque le contenu d'une colonne est constitué de chiffres, choisissez Numérique. Un tri par ordre alphétique appliqué à une liste de nombres à un ou deux chiffres a pour effet de trier les nombres comme s'il s'agissait de mots (ayant pour résultat un ordre du type 1, 10, 2, 20, 3, 30)只不过 que comme des nombres (ayant pour résultat un ordre du type 1, 2, 3, 10, 20, 30). Puis/Ordre Determine l'ordre de tri du tri seconde sur une colonne différente. Indiquez la colonne de tri secondaire dans le menu contextuel Puis et l'ordre de tri seconde dans les menus contextuels Ordre. Le tri inclut la première ligne Indique que la première ligne du tableau doit etre incluse dans le tri. Si la première ligne correspond a un titre a ne pas déplacer, n'activez pas cette option. Trier les lignes d'en-tête Indique que toutes les lignes de la section thead du tableau (si elle existe) doivent etre triées en utilisant les memes criteres que pour les lignes de la section body. (Les lignes thead restent dans la section thead et apparaisent encore en haut du tableau, meme apres le tri). Pour plus d'informations sur la balise thead, consultez le panneau Reference (choisissez Aide > Reference). Trier les lignes de pied de page Indique que toutes les lignes de la section thead du tableau (si elle existe) doivent etre triées en utilisant les mêmes critères que pour les lignes de la section body. (Les lignes tfoot restent dans la section tfoot et apparaisent encore en bas du tableau, même après le tri). Pour plus d'informations sur la balise tfoot, consultez le panneau Réference (choisissez Aide > Référence). Conserver les couleurs des lignes après le tri Spécifie que les attributs des lignes du tableau (tehs que la couleur) doivent rester associés au même contenu après le tri. Si les lignes de votre tableau sont mises en forme avec deux couleurs alternées, n'activez pas cette option pour vous assurer que les lignes du tableau trié s'affichent toujours avec des couleurs alternées. Si les attributs de ligne sont spécifiques au contenu de chaque ligne, Sélectionnez cette option pour vous assurer que ces attributs restent associés aux lignes appropriées dans le tableau trié. Utilisation de cadres Fonctionnement des cadres et des jours de cadres La partie d'une fenêtre du navigateur pouvant afficher un document HTML indépendamment de ce qui apparait dans le reste de la fenêtre constitue un cadre. Les cadres permettent de diviser une fenêtre du navigateur en plusieurs zones, chacune d'entre elles pouvant afficher un document HTML distinct. En règle générale, un premier cadre affiche un document avec des commandes de navigation tandis qu'un autre cadre affiche un document avec le contenu principal. Un jeu de cadres est un fichier HTML qui définit la mise en forme et les propriétés de plusieurs cadres, dont le nombre, la taille et l'emplacement des cadres, ainsi que l'URL de la page qui s'affiche initialement dans chaque cadre. Le fichier du jeu de cadres ne contient pas de contenu HTML qui s'affiche dans un navigateur, à l'exception de la section noframes ; il fournit simplement au navigateur des informations sur la mise en forme d'un jeu de cadres et les documents qu'il doit afficher. Pour afficher un jeu de cadres dans un navigateur, tapez l'URL du fjichier correspondant. Le navigateur ouvre ensuite les documents qui devront etre affichés dans les cadres. Le fjichier du jeu de cadres relat à un site s'appelle généralement index.html et s'affiche par defaut si le visiteur ne spécifie pas de nom de fjichier. 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 latorale, 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 affché dans le cadre supérieur ne change jamais lorsque les visiteurs consultent le site. La barre de navigation du cadre l'etal contient des liens qui, lorsqu'ils sont activés, modifie le contentu du cadre principal, mais pas le contenu du cadre l'etal. 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 fisier ; 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. Note: Une « page » peut désigner un seul document HTML ou l'ensemble du contenu d'une fenêtre du navigateur à un moment donné, même si plusieurs documents HTML sont affichés simultanément. Par exemple, l'expression « une page qui utilise des cadres » s'applique généralement à un jeu de cadres et aux documents qui y figurent. Tout site affché dans un navigateur sous forme d'une page unique constituée de trois cadres contient en fait au moins quatre documents HTML, à savoir, le fisier du jeu de cadres et les trois documents incluant le contenu qui s'affiche initialement dans les cadres. Lorsque vous conceivez une page à l'aide de produits de cadres dans Dreamweaver, vousdez enregistrer chacun de ces quatre fichiers pour que la page s'affiche correctement dans le navigateur. Pour obtaining des informations plus détaillées sur les cadres, consultez le site Web de Thierry Koblentz à l'adresse www.tjkdesign.com/articles/frames/. Choix de l'utilisation des cadres Adobe déconseille l'emploi de cadres pour la mise en page d'une page Web. Parmi les inconveniens de l'emploi de cadres, citons : L'alignement graphique des éléments de différents cadres n'est pas toujours précis. - Le test de la navigation peut être long. - Comme l'URL de chacune des pages contenues dans les cadres n'est pas affichee dans le navigateur, les visiteurs risquent de ne pas pouvoir ajouter de signet a une page donnée (a moins que vous ne fournissiez le code du serveur permettant de charger la version avec cadres d'une page). Pour obtenir une justification détaillée de la raison pour laquelle il ne faut pas utiliser des cadres, consultez le site de Gary White à l'adresse http://apptools.com/rants/framesevil.php. Si vous decide des les utiliser, les cadres seront généralement à la navigation. Un jeu de cadres inclut généralement un cadre contenant une barre de navigation et un cadre destiné à afficher le contenu principal. L'emploi de cadres de cette façon offèr que les avantages. Le navigateur d'un visiteur n'a pas besoin de recharger les graphiques liés à la navigation à chaque page. Chaque cadre possè de sa propre barre de défilament (si le contenu ne tient pas entière dans une fenêtre) pour que le visiteur puisse faire défilier les cadres indépendamment les uns des autres. Par exemple, un visiteur ayant fait défilier une longue page de contenu jusqu'en bas n'est pas obligé de la faire défilier à nouveau vers le haut pour afficher la barre de navigation si celle-ci figure dans un autre cadre. Dans la plupart des cas, vous pouvezisser une page Web sans cadre qui permet d'obtenir les mêmes résultats qu'vec 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 permit de creer plusieurs pages dont la mise en forme est identique.) Dans l'exemple suivant, la mise en forme de la page ressemble à une mise en forme avec cadres, mais elle n'en contient pas. Les sites Web mal concus utiliser des cadres de façon inutil, avec, par exemple, un jeu de cadres qui recharge le contenu des cadres de navigation chaque fois que le visiteur clique sur un bouton de navigation. S'ils sont correctement utilisés (par exemple, pour immobiliser les commandes de navigation dans un cadre tout en permettant de modifier le contenu d'un autre cadre), les cadres peuvent être très utiles dans un site. La prise en charge des cadres varie en fonction du navigateur utilisé. En outre, la navigation des cadres peut s'avérer difficile pour les visiteurs suffrant de handicaps. Par conséquent, si vous utilisez des cadres, incorporez systématiquement une section noframes dans votre jeu de cadres pour les visiteurs qui ne peuvent pas les visualiser. Vous pouvez également fournir un lien explicite vers une version sans cadre du site. Pour obtenir des informations plus détaillées sur les cadres, consultez le site Web de Thierry Koblentz à l'adresse www.tjkdesign.com/articles/frames/. Jeux de cadres imbriqués Un jeu de cadres imbriqué est un jeu de cadres situé à l'intérieur d'un autre jeu de cadres. Un fichier de jeu de cadres peut conténir plusieurs jours 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 jours de cadres prédéfinis dans Dreamweaver. Tout jeu de cadres compteant un nombre différent de cadres dans différentes lignes ou colonnes doit être imbriqué. Par exemple, la mise en forme de cadre la plus courante affiche un cadre sur la ligne supérieure (ou 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. A. Jeu de cadres principal B. Le cadre de menus et le cadre de contenu sont imbriqués dans le jeu de cadres principal. Dreamweaver gère automatiquement l'imbrication des jours 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. Vou puez imbriquer les yeux de cadres de deux facons dans HTML : le jeu de cadres interne peut etre defini dans le même fichier que le jeu de cadres externe, ou dans un fichier distinct. Chaque jeu de cadres predefini dans Dreamweaver definit tous ses yeux de cadres dans le meme fichier. Les deux types d'imbrication produit 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 fjichier de jeu de cadres externe lorsque vous exécutez la commande Ouvrir dans un cadre pour ouvrir un fjichier 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 yeux de cadres définis dans un seul fjichier. Utilisation de produits de cadres dans la fenêtre de document Dreamweaver permit d'afficher et de modifier tous les documents associés à un jeu de cadres dans une seule fenêtre de document. Vous pouvez ainsi afficher un aperçu approximatif des pages insérées dans des cadres et les modifier à votre convenance dans le navigateur. Toutefois, certains aspects de cette approche peuvent être déroutants si vous ne les maïtrisez pas parfaitement. En particulier, chaque cadre affiche un document HTML distinct. même si les documents sont vides, vous doivent 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, executez la procedure suivante : 1 Creez un jeu de cadres et specifies le document qui devra apparaitre dans chaque cadre. 2 Enregistrez chaque fisier qui apparaître dans un cadre. N'oubliez pas que chaque cadre affiche un document HTML différent et que vous nevez enregistrer chaque document avec le fisier de jeu de cadres. 3 Définissez les propriétés de chaque cadre et du jeu de cadres (notamment, nommez chaque cadre, définisSEE les options de défillement et d'absence de défillement). 4 Dans l'inspecteur Propriétés, définièsez la propriété Cible pour tous les liens afin que le contenu lie apparaissé dans la zone appropriée. Création de cadres et de jours de cadres Il y a deux façon de creer un jeu de cadres dans Dreamweaver : vous pouze selectionner un jeu de cadres prédéfini ou le/concevoir vous-même. Si vous choisissez un jeu de cadres prédéfini, tous les jours de cadres et cadres nécessaires à la création de la mise en forme sont configurés, ce qui représenté le moyen le plus simple d'insérerrapidement 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. Vou puez concevoir votre propre jeu de cadres dans Dreamweaver en ajoutant des « séparateurs » à la fenêtre. Avant de creer un jeu de cadres ou d'utiliser des cadres, affichez les cordures de cadres en mode Creation dans la fenetre de document enCHOIsnant Affichage > Assistances visuelles > Bordures de cadre. More Help topics "Dreamweaver et l'accessibilité" on page 720 Création d'un jeu de cadres prédéfini et affichage d'un document existant dans un cadre 1 Placez le point d'insertion dans un document et procedede l'une des manieres suivantes : - Choisissez Insertion > HTML > Cadres et Sélectionnéz un jeu de cadres prédéfini. - Dans la catégorie Mise en forme du panneau Insertion, cliquez sur la flèche du bouton Cadres et choisissez un jeu de cadres prédéfini. Les icônes de jeu de cadres fournissent une représentation visuelle de chaque jeu de cadres appliqué au document en cours. La zone bleue de l'icone du jeu de cadres représenté le document courant et la zone blanche les cadres qui afficheront d'autres documents. 2 Si vous avez configuré Dreamweaver pour qu'il vous invite à définir des attributs d'accessibilité des cadres, Sélectionnez un cadre dans le menu déroulant, entrez un nom pour la cadre et cliquez sur OK. (Pour les visiteurs qui en utilisent un, le lecteur d'écran lit ce nom lorsqu'il rencontres le cadre sur une page.) Note: Si vous cliquez sur OK sans entrer de nouveau nom, Dreamweaver donne au cadre un nom qui correspond à sa position (cadre de gauche, cadre de droite, etc.) dans le jeu de cadres. Note: Si vous cliquez sur Annuler, le jeu de cadres s'affiche dans le document, mais Dreamweaver ne lui associe ni les balises ni les attributs d'accessibilité. Choisissez Fenetre > Cadres pour afficher un diagramme des cadres que vous nommez. Création d'un jeu de cadres prédéfini vide 1 Choisissez Fichier > Nouveau. 2 Dans la boîte de dialogue Nouveau document, Sélectionnez la catégorie Exemple de page. 3 Sélectionnéz le dossier Jeu de cadres dans la colonne Dossier exemple. 4 Sélectionnez un jeu de cadres dans la colonne Exemple de page, puis cliquez sur Créer. 5 Si vous avez activé les attributs d'accessibilité aux cadres dans Préférences, la boîte de dialogue Attributs d'accessibilité aux balises de cadre s'affiche ; renseignez la boîte de dialogue pour chaque cadre et cliquez sur OK. Note: 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é. Création d'un jeu de cadres Dans le sous-menu Modifier > Jeu de cadres,CHOIsissez une option de fractionnement (par exemple, Fractionner le cadre a gauche ou Fractionner le cadre a droite). Dreamweaver fractionne la fenetre en cadres. Si vous aviez un document existant ouvert, il apparait dans l'un des cadres. Fractionnement d'un cadre en cadres plus petits Pour fractionner le cadre au niveau du point d'insertion,CHOISSEZ une option de fractionnement dans le sousmenu Modifier > Jeu de cadres. Pour fractionner un cadre ou un jeu de cadres verticalement ou horizontally, faites glisser une cordure de cadre du bord vers le centre de la fenetre en mode Creation. Pour fractionner un cadre à l'aide d'une cordure de cadre qui ne se trouve pas sur le bord de la fenêtre en mode Création, faites glisser une cordure de cadre tout en maintainant la touche Alt (Windows) ou Option (Macintosh) enforcée. Pour diviser un cadre en quatre, faites glisser une bordure de cadre de l'un des coins de la fenetre en mode Creation vers le centre d'un cadre. Pour creer trois cadres, creez-en d'abord deux, puis fractionnez l'un d'eux. L'opération de fusion de deux cadres adjacents sans modifier le code du jeu de cadres étant relativement ardue, il est plus difficile de convertir quatre cadres en trois cadres que deux cadres en trois cadres. Suppression d'un cadre Faites glisser une cordure de cadre en dehors de la page ou vers une cordure du cadre parent. Si vous supprimez un cadre dans lequel se trouve un document qui n'a pas ete enregistré, Dreamweaver vous invite a enregistrer ce dernier. Note: Vous ne pouvez pas entierement supprimer un jeu de cadres en faisant glisser ses cordures. Pour le supprimer complètement, fermez la fenêtre de document qui l'affiche. Si le fichier du jeu de cadres a été enregistré, supprimeze le fichier. Redimensionnement d'un cadre Pour définitir laaille approximative des cadres, faites glisser une cordure de cadre dans la fenêtre de document en mode Création. - Pour définir des tailles exactes et spécifique l'espace alloué par le navigateur à une ligne ou une colonne de cadres lorsque la taille de la fenêtre du navigateur ne permet pas d'afficher les cadres dans leur totalité, utilisez l'inspecteur Propriétés. Sélection de cadres et de produits de cadres Pour modifier les propriétés d'un cadre ou d'un jeu de cadres, vous devez au préalable le selectionner dans la fenêtre de document ou en utilisant le panneau Cadres. Le panneau Cadres donne une représentation visuelle des cadres dans un jeu de cadres. Il affiche la hierarchie de la structure du jeu de cadres qui n'apparaît pasforcément dans la fenêtre de document. Dans le panneau Cadres, une épaissé bordure entoure le jeu de cadres, une fine ligne grise entoure chaque cadre et chaque cadre est identifié par un nom. Lorsqu'un cadre est selectionné dans la fenêtre de document, en mode Création, sa cordure s'affiche avec une ligne en pointillé ; lorsqu'un jeu de cadres est selectionné, toutes les cordures des cadres à l'intérieur de ce jeu s'affichent avec une ligne en pointillé plus fine. Note: La sélection d'un cadre et le placement d'un point d'insertion dans un document affché dans un cadre sont deux opérations différentes. Vous serez améné à selectionner un cadre dans de nombreux cas (par exemple, lorsque vous définisse les propriétés d'un cadre). Sélection d'un cadre ou d'un jeu de cadres dans le panneau Cadres 1 Choisissez Fenetre > Cadres. 2 Dans le panneau Cadres : - Pour sélectionner un cadre, cliquez sur le cadre. Des lignes de selection apparaissent autour du cadre dans le panneau Cadres et dans la fenetre de document, en mode Creation. - Pour sélectionner un jeu de cadres, cliquez sur la cordure qui l'entoure. Sélection d'un cadre ou d'un jeu de cadres dans la fenêtre de document En mode Création, pour sélectionner un cadre, cliquez dans celui-ci tout en maintainant les touches Maj+Alt (Windows) ou Maj+Option (Macintosh) enforcées. En mode Création, pour sélectionner un jeu de cadres, cliquez sur l'une des cordures du cadre interne du jeu de cadres. Vous doivent d'abord vous assurer que les cordures sont visibles; pour cela, désisissez Affichage > Assistances visuelles > Bordures de cadre. Note: Il est souvent plus simple de selectionner les yeux de cadres dans le panneau Cadres que dans la fenetre de document. Pour plus d'informations, consultez les rubriques ci-dessus. Sélection d'un cadre ou d'un jeu de cadre différent Pour sélectionner le cadre ou le jeu de cadres suivant ou précédent au même niveau hierarchique que la sélection en cours, appuyez sur la flèche gauche ou droite tout en maintainant la touche Alt (Windows) ou Commande (Macintosh) enforcée. Ces touches vous permettent de parcourir les cadres et leurs de cadres dans l'ordre dans lequel ils sont définis dans le fichier du jeu de cadres. Pour selectionner le jeu de cadres parent (celui qui contient la selection en cours), appuyez sur la flèche haut tout en Maintenant la touche Alt (Windows) ou Commande (Macintosh) enfonnée. Pour sélectionner le premier cadre ou jeu de cadres infant de la seLECTION 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 maintainant la touche Alt (Windows) ou Commande (Macintosh) enforcée. Ouverture d'un document dans un cadre Vou puez spécifier le contenu initial d'un cadre en inscrant un nouveau contenu dans un document vide ou en ouvrant un document dans un cadre. 1 Placez le point d'insertion dans un cadre. 2 Choisissez Fichier > Ouvrir dans un cadre. 3 Sélectionnez un document à ouvrir dans le cadre et cliquez sur OK (Windows) ou Choisir (Macintosh). 4 (Facultatif) Si vous voulez afficher ce document par défaut dans le cadre lorsque le jeu de cadres est ouvert dans un navigateur, enregistrez le jeu de cadres. Enregistrement des fichiers du cadre et du jeu de cadres Avant d'afficher l'aperçu d'un jeu de cadres dans un navigateur, vous doivent enregistrer le fjichier correspondant et tous les documents qui seront affichés dans les cadres. Vous pouvez enregistrer le fjichier du jeu de cadres et chacun des documents contenus dans les cadres individuellement ou enregistrer le fjichier du jeu de cadres et tous les fjichiers contenus dans les cadres simultanément. Note: Si vous faites appel aux outils visuels de Dreamweaver pour creer un jeu de cadres, un nom de fichier par défaut est attribué à chaque nouveau document apparaissant dans un cadre. Par exemple, le premier fichier du jeu de cadres s'appelle Jeu de cadres sans nom-1, tandis que le premier document d'un cadre s'intitule Cadre sans nom-1. Enregistrement d'un fichier de jeu de cadres Sélectionnez le jeu de cadres dans le panneau Cadres ou dans la fenêtre de document. - Pour enregistrer le fjichier de jeu de cadres, choisissez Fichier > Enregistrer le jeu de cadres. Pour enregistrer le fisier de jeu de cadres en tant que nouveau fisier, choisissez Fichier > Enregistrer le jeu de cadres sous. Note: Si le fichier du jeu de cadres n'a pas ete enregistré, ces deux commandes sont équivalentes. Enregistrement d'un document qui apparait à l'intérieur d'un cadre Cliquez dans le cadre, puis choisissez Fichier > Enregistrer le cadre ou Fichier > Enregistrer le cadre sous. Enregistrement de tous les fichiers associés à un jeu de cadres Choisissez Fichier > Enregister tous les cadres. Cette commande enregistre tous les documents ouverts dans le jeu de cadres, y compris le fjichier du jeu de cadres et tous les documents encadrés. Si le fjichier du jeu de cadres n'a pas ete enregistré, une epaisse cordure entoure le jeu de cadres (ou le cadre non enregistré) en mode Creation et vous pouvez selectionner un nom de fjichier. Note: Si vous avez utilise 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 affché dans ce cadre. N'enregistrez pas le fichier du jeu de cadres si vous ne pouze pas que ce document soit utilisé par défaut. Affichage et définition des des propriétés et des attributs de cadre Utilisez l'inspecteur Propriétés pour afficher et définir la plupart des propriétés de cadre, notamment les cordures, les mages et l'affichage ou non de barres de défilament dans les cadres. La définition d'une propriété de cadre est prépondérante sur la définition de cette propriété pour le jeu de cadres. Si vous le souhaitez, définissez des attributs de cadre, comme l'attribut title (qui est différent de l'attribut name), pour améliorer l'accessibilité. Vous pouvez activer l'options derogrammation de l'accessibilité pour les cadres afin de définir des attributs lorsque vous creez des cadres ou bien définir des attributs après avoir inséré un cadre. Pour modifier les attributs d'accessibilité d'un cadre, utilisez l'inspecteur de balises afin de modifier directement le code HTML. More Help topics "Dreamweaver et l'accessibilité" on page 720 Affichage ou définition des propriétés des cadres 1 Sélectionnez un cadre en utilisant l'une des méthodes suivantes : - Dans la fenêtre de document (mode Création), cliquez dans le cadre tout en maintainant les touches Alt (Windows) ou Maj+Option (Macintosh) enforcées. - Cliquez sur le cadre dans le panneau Cadres (Fenetre > Cadres). 2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), cliquez sur la flèche d'agrandissement située dans le coin inférieur droit pour visualiser toutes les propriétés des cadres. 3 Définition des options de l'inspecteur Propriétés des cadres Nom du cadre Nom du cadre est le nom utilisé par l'attribut target d'un lien ou par un script pour réféencer le cadre. Un nom de cadre ne doit containir qu'un seul mot. Les traits de soulignement (_) sont autorisés, mais pas les tirets (-), points (.) et espaces. Les names de cadres doivent commencer par une dette (et non un chiffre). Ils tiennent compte des majuscules et des minuscules. N'utilisez pas de termes réservés dans JavaScript (tehs que les mots top ou navigator) comme nombres de cadre. Pour qu'un lien modifie le contenu d'un autre cadre, vous devez attribuer un nom au cadre cible. Pour facilititer la creation de liens entre plusieurs cadres, donnez un nom à chaque cadre que vous créEZ. Src Specifie le document source à afficher dans le cadre. Cliquez sur l'icone de dossier pour rechercher et selectionner un fjichier. Défiler Déterminé si des barres de défilament apparaissent dans le cadre. La définition de cette option sur Par défaut n'affecte aucune valeur à l'attribut correspondant, si bien que chaque navigateur peut utiliser sa valeur par défaut. Dans la plupart des navigateurs, la valeur par défaut est Auto. Par conséquent, les barres de défilament n'apparaissent que si la fenêtre du navigateur ne peut pas afficher la totalité du containu du cadre courant. Ne pas redimens. Empêche les visiteurs de déplacer les cordures du cadre pour redimensionner ce dernier dans un navigateur. Note: Vous pouvez toujours redimensionner les cadres dans Dreamweaver ; cette option ne s'applique qu'aux visiteurs qui souhaitent afficher les cadres dans un navigateur. Bordures Affiche ou masque les cordures du cadre courant lorsqu'il est affiché dans un navigateur. L'option Bordures remplace les paramètres de cordure du jeu de cadres. Les options de cordure sont Oui (afficher les cordures), Non (masquer les cordures) et Par défaut. Dans la plupart des navigateurs, la valeur proposée est Oui, à moins que l'option Bordures du jeu de cadres parent ne soit définie sur Non. Si plusieurs cadres partagent une même cordure, celle-ci n'est masquée que lorsque l'option Bordures est définié sur Non pour tous les cadres ou lorsque la propriété Bordures du jeu de cadres parent est définié sur Non et l'option Bordures sur Par défaut. Couleur de la cordure Définit la couleur de toutes les cordures du cadre. Cette couleur s'applique à toutes les cordures adjacentes au cadre et remplace celle du jeu de cadres. Largeur de marge Definit la largeur en pixels des marges gauche et droite (c'est-à-dire l'espace séparant la cordure du cadre de son contenu). Hauteur de marge Définit la hauteur en pixels des marges supérieure et inférieure (c'est-à-dire l'espace séparant la cordure du cadre de son contenu). Note: La définition de la largeur et de la hauteur d'un cadre et la définition des marges dans la boîte de dialogue Modifier > Propriétés de la page sont deux opérations différentes. Pour modifier la couleur d'arrière-plan d'un cadre, vous devez définir la couleur d'arrière-plan du document dans le cadre dans les propriétés de la page. Définition des valeurs d'accessibilité d'un cadre 1 Dans le panneau Cadres (Fenetre > Cadres), Sélectionnez un cadre en plaçant le point d'insertion dans l'un des cadres. 2 Choisissez Modifier > Modifier la balise . 3 Selectionne Feuille de style/Accessibilité dans la liste de catégories située à gauche, entre des valeurs et cliquez sur OK. Définition des valeurs d'accessibilité d'un cadre 1 Affichez votre document en mode Code ou Code et creation si vous estes en mode Creation. 2 Dans le panneau Cadres (Fenêtre > Cadres), Sélectionné 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 maintainant la touche Ctrl enfoncée (Macintosh), etCHOISSEZ Modifier la balise. 4 Dans l'éditeur de balises, effectuez les modifications nécessaires et cliquez sur OK. Modification de la couleur d'arrière-plan d'un document dans un cadre 1 Placez le point d'insertion dans le cadre. 2 Choisissez Modifier > Propriétés de la page. 3 Dans la boite de dialogue Propriétés de la page, cliquez sur le menu déroulant Couleur d'arrière-plan, puis selectionné une couleur. Affichage et définition des propriétés de produits de cadres Utilisez l'inspecteur Propriétés pour afficher et définir la plupart des propriétés de jeu de cadres, notamment le titre du jeu de cadre, les cordures et les tailles des cadres. Définition du titre du document d'un jeu de cadres 1 Sélectionnez un jeu de cadres en utilisant l'une des méthodes suivantes : - Cliquez sur une cordure entre deux cadres du jeu de cadres dans la fenetre de document en mode Creation. - Cliquez sur la cordure d'un jeu de cadres dans le panneau Cadres (Fenetre > Cadres). 2 Dans la zone Titre de la barre d'outils du document, tapez le nom du document de jeu de cadres. Lorsqu'un visiteur affiche le jeu de cadres dans un navigateur, le titre apparait dans la barre de titre. Affichage ou définition des propriétés de produits de cadres 1 Sélectionnez un jeu de cadres en utilisant l'une des méthodes suivantes : - Cliques sur une cordure entre deux cadres du jeu de cadres dans la fenetre de document en mode Creation. - Cliquez sur la cordure d'un jeu de cadres dans le panneau Cadres (Fenetre > Cadres). 2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), cliquez sur la flèche d'agrandissement située dans le coin inférieur droit et définiquee les options de jeu de cadres. Bordures Déterminé si des cordures apparaissent ou non autour des cadres lorsque le document est affché dans un navigateur. Pour afficher les cordures, Sélectionnez Oui ; sinon, Sélectionnez Non. Pour que le navigateur détermine l'affchage des cordures, Sélectionnez Par défaut. Largeur de bord Spécifie la largeur de toutes les cordures du jeu de cadres. Couleur de la cordure Définit la couleur des cordures. Sélectionnez une couleur avec le sélecteur de couleur ou entrez la valeur hexadécimale de la couleur. Sélection lig./col. Définit la taille des cadres des lignes et colonnes du jeu de cadres sélectionné ; cliquez sur un onglet du côté gauche ou en haut de la zone Sélection lig./col., puis tapez une hauteur ou une largeur dans la zone de texte Valeur. 3 Pour définir l'espace alloué par le navigateur à chaque cadre,CHOISSEZ l'une des options suivantes dans le menu Unités: Pixels Définit la tille de la colonne ou de la ligne sélectionnée en lui attribuant une valeur absolue. Choisissez cette option pour les cadres dont la tille ne change pas, comme la barre de navigation. Un espace est alloué aux cadres dont la tille est spécifiée en pixels, puis aux cadres dont la tille est relative ou spécifiée en pourcentage. En règle générale, il est recommendé de définir une largeur fixe en pixels pour le cadre de gauche et une largeur relative pour le cadre de droite afin que ce dernier puisse occuper l'espace restant une fois la largeur en pixels allouée. Note: Si toutes les largeurs sont en pixels et qu'un visiteur affiche le jeu de cadres dans un navigateur dont la largeur est inférieure ou supérieure à celle que vous avez spécifiée, les cadres sont automatiquement redimensionnés en fonction de l'espace disponible. Ceci s'applique également aux hauteurs spécifiées en pixels. Par conséquent, il est recommendé de spécifique au moins une largeur et une hauteur relatives. Pourcent Définit la colonne ou la ligne sélectionnée comme pourcentage de la largeur ou de la hauteur totale de son jeu de cadres. L'espace des cadres définis avec cette option est alloué après celui des cadres définis en pixels, mais avant celui des cadres définis avec l'option Relatif. Relatif Indique qu'une fois l'espace des cadres définis en Pixel et en Pour-cent attribué, l'espace restant doit être alloué à la colonne ou à la ligne sélectionnée. Cet espace est réparti proportionnellement entre les cadres de taille relative. Note: Lorsque vous choisissez l'option Relatif dans le menu Unités, tout nombre figurant dans le champ Valeur disparait. Pour le spécifique, vous doivent regardier le taper de nouveau. En revanche, si une seule ligne ou colonne est définié sur Relatif, vous n'avez pas besoin de retaper un nombre, car tout l'espace restant lui est alloué, une fois celui des autres lignes et colonnes a été attribué. Pour garantir la compatibilité inter-navigateurs, vous pouvez taper 1 dans le champ Valeur. Cela revient à ne pas spécifique de valeur du tout. Contrôle des contenus de cadre avec des liens Pour utiliser un lien dans un cadre en vue d'ouvrir un document dans un autre cadre, vous doivent définir la cible du lien. L'attribut target d'un lien spécifique 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 pouze afficher le document lié dans le cadre de contenu principal à droite, vous doivent 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écifique s'ouvre dans le cadre principal. 1 En mode Creation,CHOISSEZ un texte ou un objet. 2 Dans la zone Lien de l'inspecteur Propriétés (Fenêtre > Propriétés), procédez de l'une des manières suivantes : - Cliquez sur l'icone de dossier et seLECTIONnez le fichier avec lequel étabir le lien. - Faites glisser l'icone Pointer vers un fichier dans le panneau Fichiers et selectionnez le fichier avec lequel étabir le lien. 3 Dans le menu dérouulant Cible de l'inspecteur Propriétés, Sélectionnez la fenêtre ou le cadre dans lequel doit s'afficher le document lié : blank ouvre le document lie dans une nouvelle fenetre du navigateur sans toucher a la fenetre courante. parent ouvre le document lie dans le jeu de cadres parent du cadre dans lequel figure le lien, en remplaçant tout le jeu de cadres. - _self ouvre le lien dans le cadre en cours, en replacant le contenu de ce cadre. - _top ouvre le document lié dans la fenêtre du navigateur courant, en remplaçant tous les cadres. Les noms des cadres apparaissent également dans ce menu. Sélectionnez un cadre nommé dans lequel s'ouvrira le document lié. Note: 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érouulant Cible. Si vous modifiez un document en dehors du jeu de cadres, vous pouvez taper le nom du cadre cible dans la zone de texte Cible. Si vous établissez un lien vers une page située en dehors de votre site, utilisez toujours target="_top" ou target="blank" pour vous assurer que la page ne soit pas considérée comme faisant partie de votre site. Furniture de contenu pour les navigateurs ne prend pas les cadres en charge Dreamweaver you permit de définir le contenu à afficher dans les navigateurs graphiques plus ancients et basés sur le texte qui ne prennt 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. Note: La zone noframes doit containir un texte plus détaillé que « Vous doivent restreer leur navigateur à jour pour pouvoir utiliser des cadres ». Certains visiteurs de sites utilisent des systèmes qui ne leur permettent pas d'afficher les cadres. 1 Choisissez Modifier > Jeu de cadres > Modifier le contenu sans cadres. Dreamweaver efface ce qui se fouve dans la fenetre en mode Creation et les mots « Contenu sans cadres » apparaisent dans la zone supérieure. 2 Effectuez l'une des opérations suivantes : Dans la fenêtre de document, tapez ou insérez le contenu, comme vous le feriez pour un document ordinaire. Sélectionnez Fenêtre > Inspecteur de code, placez le point d'insertion entre les balises body qui se trouvent à l'intérieur des balises noframes, puis tapez le code HTML pour le contenu 3 Choisissez de nouveau Modifier > Jeu de cadres > Modifier le contenu sans cadres pour revenir au mode normal du document jeu de cadres. Utilisation des comportements JavaScript avec les cadres Plusieurs comportements JavaScript et commandes de navigation sont particulièrement bien adaptés à l'utilisation de cadres : Texte du cadre Remplace le contentu et le formatage d'un cadre par le contentu que vous spécifie. Ce contentu peut etre n'importe quel texte valide en HTML Cette action permet d'afficher les informations dans un cadre de façon dynamique Atteindre l'URL Ouvre une nouvelle page dans la fenetre en cours ou dans le cadre indiqué. Cette action est particulièrement utile pour modifier d'un seul clic le contenu de deux cadres ou plus Insérer menu de reroutage Permet de configurer une liste de liens, dans un menu, qui ouvre des fichiers dans une fenêtre du navigateur lorsque l'on clique dessus. Vous pouvez également cibler une fenêtre ou un cadre particuliers dans lesquels le document s'ouvrira. Pour plus d'informations, consultez la section "Ajout de comportements JavaScript" on page 365. More Help topics "Application du comportement Texte d'un cadre" on page 375 "Application du comportement Atteindre l'URL" on page 372 "Application du comportement Définir image barre de navigation" on page 375 "Application du comportement Menu de reroutage" on page 373 Chapter 8: Ajout de contenu dans les pages Utilisation du panneau Insertion Les boutons qui compose le panneau Insertion permettent de creer et d'inserer des objets, tels que des tableaux et des images. Ces boutons sont organises en plusieurs catégories. More Help topics "Présentation du panneau Insertion" on page 15 "Modification de balises avec des éditeurs de balises" on page 330 "Selection et affichage d'éléments dans la fenêtre de document" on page 225 Masquage ou affichage du panneau Insertion Choisissez Fenetre > Inserer. Note: Si vous utilisez certaines types de fichiers, tels que XML, JavaScript, Java et CSS, le panneau Insertion et l'option de mode Creation sont grisés, car vous ne pouvez pas insérer d'éléments dans ces fichiers de code. Affichage des boutons d'une catégorie Sélectionnez le nom de la catégorie dans le menu Catégorie. Par exemple, pour afficher les boutons de la catégorie Mise en forme, selectionnez Mise en forme. Affichage du menu d'un bouton Cliques sur le bouton fléché pointant vers le bas situé pres de l'icone du bouton. Insertion d'un objet 1 Choisissez la catégorie appropriée dans le menu Catégorie du panneau Insertion. 2 Effectuez l'une des opérations suivantes : Cliquez sur un bouton d'objet ou faites glisser l'icone du bouton dans la fenetre de document. Cliquez sur la flèche d'un bouton, puis Sélectionnéz une option dans le menu. Selon le type d'objet que vous scélectionnez, une boîte de dialogue d'insertion d'objet s'affiche, le cas échéant, et vous invite à rechercher un fisier ou à spécifique les paramètres d'un objet spécifique. En outre, Dreamweaver vous permet d'insérer du code dans le document ou d'ouvrir unéditeur de balises ou un panneau vous permettant de spécifique 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 passée en mode Code avant de réaliser l'insertion. Note: Certains objets, tels que les ancre nommées, ne sont pas visibles lorsque vous visualisez la page dans la fenêtre d'un navigateur. Vous pouvez afficher des icones en mode Création indiquant l'emplacement de ces objets invisibles. Contournement de la boîte de dialogue d'insertion d'objects et insertion d'un espace réservé vide Appuyez sur la touche Ctrl (Windows) ou Option (Macintosh) tout en cliquant avec la souris sur le bouton correspondant à l'objet. Par exemple, pour insérer un espace réservé d'image sans spécifique de filchier d'image, appuyez sur la touche Ctrl ou Option tout en cliquant avec la souris sur le bouton Image. Note: Cette procédure ne contourne pas toutes les boîtes de dialogue d'insertion d'objet. De nombreux objets, y compris les éléments PA et les yeux de cadres, n'insèrent pas d'espaces réservés ni d'objets avec des valeurs par défaut. Modification des préférences du panneau Insertion 1 Choisissez Edition > Preférences (Windows) ou Dreamweaver > Préférences (Macintosh). 2 Dans la catégorie Général de la boîte de dialogue Préférences, désactivez l'options Afficher la boîte de dialogue lors de l'insertion d'objects pour supprimer les boîtes de dialogue lors de l'insertion d'objects, tels que des images, des tableaux, des scripts ou des éléments d'en-tête. Vous pouvez également maintainir la touche Ctrl (Windows) ou Option (Macintosh) enforcée tandis que vous créez l'objet. Si cette option est désactivée lorsque vous insérez un objet, celui-ci aura des valeurs par défaut. Utilisez l'inspecteur Propriétés pour modifier les propriétés de l'objet après l'avoir inséré. Ajout, suppression ou gestion des boutons de la catégorie Favoris du panneau Insertion 1 Sélectionnéz l'une des catégories du panneau Insertion. 2 Cliquez à l'aide du bouton droit de la souris (Windows) ou tout en maintainant la touche Contrôle enforcée (Macintosh) à l'endetroit où les boutons s'affichent, puis désisissez Personneliser les favorsis. 3 Dans la boite de dialogue Personnelier les objets favoris, apportez les modifications desireses, puis cliquez sur OK. Pour ajouter un objet, selectionne- le dans le volet Objects disponibles situé a gauche, puis cliquez sur la flèche située entre les deux volets ou cliquez deux fois sur l'objet dans le volet Objects disponibles. Note: Les objets doivent être ajoutés un par un. Il est impossible de selectionner un nom de catégorie tel que Commun afin d'ajouter une catégorie entière à votre liste de favorsis. Pour supprimer un objet ou un séparateur, SéLECTIONnez l'objet dans le volet Objects favoris situé à droite, puis cliquez sur le bouton Supprimer l'objet SéLECTIONné dans la liste Objects favors, au-dessus du volet. Pour déplacer un objet, Sélectionné-le dans le volet Objects favorisAITROITE, puis cliquez sur le bouton fléché pointant vers le haut ou vers le bas situé au-dessus du volet. Pour ajouter un séparateur sous un objet, Sélectionné un objet dans le volet Objets favorsis situé à droite, puis cliquez sur le bouton Ajouter un séparateur situé en dessous du volet. 4 Si la catégorie Favoris n'est pas la catégorie active, selectionnez-la afin de voir les modifications apportées. Insertion d'objects à l'aide des boutons de la catégorie Favoris Sélectionnéz la catégorie Favoris dans la partie gauche du panneau Insertion, puis cliquez sur le bouton correspondant à un objet Favori que vous avez ajouté. Affichage du panneau Insertion sous la forme d'une barre Insertion horizontalie Contrairement aux autres panneaux de Dreamweaver, vous pouvez-retirer le panneau Insertion de son emplacement d'ancrage par défaut et le placer à l'horizontal, au-dessus de la fenêtre de document. Dans ce cas, ce panneau se transforme en barre d'outils, même s'il est impossible de la masquer et de l'afficher comme vous le feriez pour les autres barres d'outils. 1 Cliquez sur l'onglet du panneau Insertion et tirez-le en haut de la fenetre de document. 2 Lorsqu'une ligne bleue horizontale s'affiche sur la largeur de la fenetre du document, relache le panneau Insertion. Note: La barre Insertion horizontale est également un élément par défaut de l'espace de travail Classique. Pour activer l'espace de travail Classique,CHOISSEZ Classique dans la section Commutation d'espace de travail de la barre Application. Rétablissement du panneau Insertion 1 Cliquez sur la poignee de la barre Insertion horizontal (sur sa gauche) et tirez la barre à l'endroit où vos panneaux sont ancrés. 2 Placez le panneau Insertion à l'endetroit désiré puis déposez-le. Une ligne bleue indique où vous pouvez déposer le panneau. Affichage des catégories de la barre Insertion horizontally sous forme d'onglets Cliquez sur la flèche du menu située pres du nom de la catégorie, à l'extrémité gauche de la barre Insertion horizontal, puis choisissez Afficher en tant qu'onglets. Affichage des catégories de la barre Insertion horizontal sous forme de menus Cliquez avec le bouton droit (Windows) ou en maintainant la touche Ctrl enfoncée (Macintosh) sur un onglet de catégorie de la barre Insertion horizontale, puis choisissez Afficher en tant que menu. Définition des propriétés de page Pour chaque page que vous creez dans Dreamweaver, vous pouze spécifier les propriétés de formatage dans la boite de dialogue Propriétés de la page (Modifier > Propriétés de la page). Cette boite 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 pouze attribuer de nouvelles propriétés à chaque nouvelle page que vous créez et modifier celles des pages existantes. Les modifications que vous apportez dans la boite de dialogue Propriétés de la page s'appliquent à la page entière. Dreamweaver propose deux méthodes de modification des propriétés de page : CSS ou HTML. Adobe recommende d'utiliser CSS pour définir des arrêtère-plans et modifier les propriétés des pages. Note: Les propriétés de page que vous désissez 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. Définition des propriétés CSS de police, de couleur de fond et d'image de fond d'une page La boite de dialogue Propriétés de la page permet de spécifique diverses options de base de mise en forme des pages Web, comme la police, la couleur de fond et l'image de fond. 1 Choisissez Modifier > Propriétés de la page ou cliquez sur le bouton Propriétés de la page de l'inspecteur Propriétés. 2 Sélectionnéz la catégorie Apparce (CSS) et définièsez les options. Police Spécifie la famille de polices par défaut à utiliser dans vos pages Web. Dreamweaver utilise la famille de polices spécifiée sauf si une autre police est désignée pour un élément de texte donné. Taille Spécifie la taille de police par défaut à utiliser dans vos pages Web. Dreamweaver utilise la taille de police spécifiée sauf si une autre taille est désignée pour un élément de texte donné. Couleur du texte Spécifie la couleur d'affichage des polices par défaut. Couleur d'arrière-plan Définit la couleur d'arrière-plan de la page. Activez l'options Couleur d'arrière-plan puis désissez une couleur dans le sélecteur. Image d'arrière-plan Définit une image d'arrière-plan Cliquez sur le bouton Parcourir puis accédez à l'image et seLECTIONnez-la. Vous pouvez également indiquer le chemin de l'image d'arrière-plan dans le champ Image d'arrière-plan. Dreamweaver génére une mosaïque (multiplication) de l'image d'arrière-plan si elle ne remplit pas entièrement sa fenêtre, comme le font les navigateurs. Pour éviter la création de cette mosaïque, désactiver cette fonction à l'aide des feuilles de style en cascade. Répétition Indique comment l'image d'arrière-plan sera affichée sur la page : Sélectionnéz l'options Pas de répétition pour n'afficher l'image d'arrière-plan qu'une seule fois. Sélectionné l'option Répétition pour répéter, ou mettre en mosaïque, l'image à l'horizontal et la verticale. Sélectionnez l'option Répéter-x pour former une mosaïque horizontale. Sélectionnéz l'options Répéter-y pour former une mosaïque verticale. Marge gauche et Marge droite Spécífie la taille des marges à gauche et à droite de la page. Marge haut et Marge bas Spécificie laaille des marges en haut et en bas de la page. Définition des propriétés HTML d'une page La définition de propriétés dans cette catégorie de la boite de dialogue Propriétés de la page entraine un formatage de la page à l'aide de code HTML au lieu de code CSS. 1 Choisissez Modifier > Propriétés de la page ou cliquez sur le bouton Propriétés de la page de l'inspecteur Propriétés. 2 Sélectionnéz la catégorie Apparce (HTML) et définièsez les options. Image d'arrière-plan Définit une image d'arrière-plan Cliquez sur le bouton Parcourir puis accédez à l'image et seLECTIONnez-la. Vous pouvez également indiquer le chemin de l'image d'arrière-plan dans le champ Image d'arrière-plan. Dreamweaver génére une mosaïque (multiplication) de l'image d'arrière-plan si elle ne remplit pas entièrement sa fenêtre, comme le font les navigateurs. Pour éviter la création de cette mosaïque, désactiver cette fonction à l'aide des feuilles de style en cascade. Arrière-plan Définit la couleur d'arrière-plan de la page. Activez l'options Couleur d'arrière-plan puis désissez une couleur dans le sélecteur. Text Spécificie la couleur d'affichage des polices par défaut. Lien Spécifie la couleur à appliquer au texte qui constitue le lien. Liens visités Spécifie la couleur à appliquer aux liens visités. Liens actifs Spécifie la couleur à appliquer lorsqu'la souris ou le curses clique sur un lien. Marge gauche et Marge droite Spécificie la taille des marges à gauche et à droite de la page. Marge haut et Marge bas Spécificie laaille des marges en haut et en bas de la page. Définition des propriétés de liens CSS pour une page entière Vou puez spécifier les polices, les tailles de police, les couleurs et d'autres éléments pour vos liens. Par défaut, Dreamweaver create des règles CSS pour vos liens et les applique à tous les liens que vous utilisez sur la page. Les règles sont incorporees dans la section head de la page. Note: Si vous souhaitez personnelier des liens spécifiques sur une page, vous doivent acceder des règes CSS individuelles, puis les appliquer séparément à ces liens. 1 Choisissez Modifier > Propriétés de la page ou cliquez sur le bouton Propriétés de la page de l'inspecteur Propriétés. 2 Sélectionnéz la catégorie Liens (CSS) et définissez les options. Police du lien Définit la famille de polices par défaut à utiliser pour les liens. Par défaut, Dreamweaver utilise la police définie pour la page entière, sauf si une autre police est spécifiée. Taille Définit la taille de police par défaut à utiliser pour les liens. Couleur des liens Spécífie la couleur à appliquer au texte qui constitue le lien. Liens visités Spécífie la couleur à appliquer aux liens visités. Liens de survol Spécifie la couleur à appliquer lorsqu'la souris ou le curseur est placé sur un lien. Liens actifs Spécifie la couleur à appliquer lorsque la souris ou le curseur clique sur un lien. Style souligné Spécifie le style de soulignement à appliquer aux liens. Si un style de soulignement est déjà défini pour votre page (par exemple, par le biais d'une feuille de style CSS), le menu par défaut est replacé par la mention « ne pas modifier ». Cette mention vous informe d'un style de lien qui a été défini. Si vous modifiez le style de soulignement à l'aide de la boîte de dialogue Propriétés de la page, Dreamweaver modifie la définition de lien précédente. Définition des propriétés d'en-tête CSS pour une page entière Vous pouvez spécifier les polices, les tailles de police et les couleurs pour vos titres de page. Par défaut, Dreamweaver create des règles CSS pour vos titres et les applique à tous les titres que vous utilisez sur la page. Les règles sont incorporees dans la section head de la page. Les titres peuvent être seLECTIONnés dans l'inspecteur Propriétés HTML. 1 Choisissez Modifier > Propriétés de la page ou cliquez sur le bouton Propriétés de la page de l'inspecteur Propriétés. 2 Sélectionnéz la catégorie En-têtes (CSS) et définièsez les options. Police des en-têtes Définit la famille de polices par défaut à utiliser pour les en-têtes. Dreamweaver utilise la famille de polices spécifiée sauf si une autre police est désignée pour un élément de texte donné. En-tête 1 à En-tête 6 Spécifie les tailles et couleurs à utiliser pour chaque niveau de balises d'en-tête. Définition des propriétés de titre et de codage d'une page Les options Titre/codage de la boite de dialogue Propriétés de la page permettent de définir le type de codage de document spécifique au langage utilisé pour creer vos pages Web, ainsi que le formulaire de normalisation Unicode à utiliser avec ce type de codage. 1 Choisissez Modifier > Propriétés de la page ou cliquez sur le bouton Propriétés de la page de l'inspecteur Propriétés. 2 Sélectionnéz la catégorie Titre/codage et définișez les options. Titre Spécifie le titre de la page, qui s'affiche dans la barre de titre de la fenêtre de document et dans la plupart des fenêtres du navigateur. Type de document (DTD) Spécifie une définition de type de document. Par exemple, vous pouze vendre un document HTML compatible XHTML en selectionnant XHTML 1.0 transitionnel ou XHTML 1.0 Strict dans le menu déroulant. Codage Precise le codage utilisé pour les caractères du document. Si vous sélectionnez Unicode (UTF 8) en tant que codage de document, le codage d'entity est superflu dans la mesure où UTF 8 permet de représenter de façon fiable tous les caractères. Si vous sélectionnez un autre codage de document, le codage d'entity peut être nécessaire pour représentier certains caractères. Pour plus d'informations sur les entités de caractères, voir www.w3.org/TR/REC-html40/sgml/entities.html. Recharger Convertit le document existant ou de l'ouvrir de nouveau avec le nouveau codage. Formulaire de normalisation Unicode N'est activée que si vous Sélectionnez UTF 8 en tant que code par défaut. Il existe quatre Formulaires de normalization Unicode. Le plus important est le Formulaire de normalization Unicode C car il est le plus utilisé dans le Modèle de caractères lié au World Wide Web, mais Adobe fournit également les trois autres Formulaires de normalization Unicode. Certain caractères Unicode semble visuellement similaires mais peuvent être stockés de différentes manières dans le document. Par exemple, é (e tréma) peut être représenté sous la forme d'un seul caractère, « e tréma » ou de deux caractères, « e Latin ordinaire » + « tréma ». Un caractère Unicode de combinaison est un caractère associé au caractère précédent, ce qui fait apparaitre le tréma au-dessus du « e » Latin. Les deux formes donnent la même typographie visuelle, alors que chacune est enregistrée différemment dans le fichier. La normalisation est le processus consistant à s'assurer que tous les caractères pouvant être enregistrés sous différentes formes le sont tous sous la même forme. C'est-à-dire que tous les caractères « é » d'un document sont enregistrés sous forme de « e tréma » unique ou de « e + tréma de combinaison », mais pas sous les deux formes dans un même document. Pour plus d'informations sur la Normalisation Unicode et les formulaires spécifiques pouvant etre utilisés, consultez le site Web Unicode www.unicode.org/reports/tr15. Inclure une signature Unicode (BOM) Inclut une marque d'ordre d'octet (BOM, byte order mark) dans le document. Il s'agit d'une marque constituée de 2 à 4 octets placés au début d'un fichier texte identifient un fichier comme étant au format Unicode et, dans ce cas, l'ordre des octets suivants. Le code UTF 8 ne représentant pas d'ordre octet, l'ajout d'une marque BOM UTF 8 est facultatif. Dans le cas de UTF 16 et UTF 32, cette marque est obligatoire. Utilisation d'un trace d'image pour creator une page Vousspuvezinserunfichierimageautilisercommedigidesdanslacreationdevortpe.L'imagessaffiche sousla forme d'une image d'arriere-plan,queyouspouvezutilisercommediguepouralmise en forme devotrepage. 1 Choisissez Modifier > Propriétés de la page ou cliquez sur le bouton Propriétés de la page de l'inspecteur Propriétés. 2 Sélectionnez la catégorie Trace de l'image et définisse les options. Tracé de l'image Permet de spécifier l'image à utiliser comme guide pour reproductive une mise en page. Cette image sert uniquement de referencia et n'apparait pas lorsque le document s'affiche dans un navigateur. Transparence Determine l'opacite du trace de l'image, de complètement transparent a complètement opaque. Description de l'encodage de document L'encodage de document précise le codage utilisé pour les caractères dans le document. L'encodage du document est spécifique dans une balise meta, insérée dans l'en-tête du document ; il indique au navigateur et à Dreamweaver le mode de décodage du document et les polices à utiliser pour afficher le texte décodé. Par exemple, si vous spécifiez Occidental (Latin1), la balise meta suivante est insérée : Le document affché dans Dreamweaver contient les polices que vous spécifie dans Préférences de polices pour l'encodage Occidental (Latin1); ce même document affché dans un navigateur contient les polices que l'utilisateur du navigateur précise pour l'encodage Occidental (Latin1). Si vous spécifiez Japonais (Shift JIS), la balise meta suivante est insérée : Le document affché dans Dreamweaver contient les polices que vous spécifiez pour les encodages du japonais; ce même document affché dans un navigateur contient les polices que l'utilisateur du navigateur précise pour les encodages du japonais. Vous modifier l'encodage du document dans une page et modifier l'encodage utilisé par défaut par Dreamweaver pour créé de nouveaux documents, y compris les polices utilisées pour afficher chaque encodage. More Help topics "Définition du type et du codage par défaut d'un document" on page 73 Sélection et affichage d' éléments dans la fenêtre de document Pour selectionner un élément dans le mode Création de la fenêtre de document, cliquez dessus. Si un élément est invisible, vous devez le rendre visible pour le selectionner. Certain codes HTML ne sont pas visibles dans un navigateur, comme, par exemple, les balises comment. Il est cependant utile de pouvoir selectionner, modifier, déplacer et supprimer ces éléments invisibles lorsque vous creez une page. Dreamweaver permits d'afficher des icones à l'emplacement de ces éléments invisibles dans la fenêtre de document en mode Création. Pour indiquer les marqueurs d'objet qui doivent s'afficher, définièsez les préférences liées aux éléments invisibles. Par exemple, vous pouvez spécifier que les ancre nominées soient visibles, mais pas les sauts de ligne. Vou puez creer certains elements invisibles (teis que les commentaires et les ancre nommées) à l'aide des boutons dans la categorie Commun du panneau Insertion. Vou pouze ensuite modifier ces elements à l'aide de linspecteur Propriétés. More Help topics "Affichage du code" on page 315 "Utilisation du panneau Insertion" on page 218 Sélection d'éléments Pour sélectionner un élément visible dans la fenêtre de document,clinque dessus ou entourez-le du rectangle de sélection. Pour selectionner un élément invisible,CHOISSEZ 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. Certain objects appearaisent sur la page à un endroit different de celui dans lequel leur code est insere. Par exemple, en mode conception, un élément PA peut se tracer n'importe ou dans la page, mais en mode Code, le code définitissant l'élement PA se trouve dans un emplacement fixe. Lorsque les éléments invisibles sont affichés, Dreamweaver affiche des marqueurs dans la fenêtre de document pour indiquer l'emplacement du code de ces éléments. En selectionnant le marqueur, vous sélectionnez tout l'élement : si, par exemple, vous sélectionnez le marqueur d'un élément PA, tout l'élement PA est selectionné Pour sélectionner une balise complète (avec son contenu, le cas échéant), cliquez sur son symbole dans le sélectionur de balise, dans la partie inférieure gauche de la fenêtre de document. Le sélectionur de balises apparait en mode Création et en mode Code. Le sélectionur de balises affiche toujours les balises qui contiennent la sélection ou le point d'insertion en cours. La balise à l'extreme 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'extreme 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, . Pour sélectionner le tableau contenant le paragraphe que vous souhaitez sélectionner, Sélectionnez la balise à gauche de la balise . Affichage du code HTML associé au texte ou à l'objet sélectionné Effectuez l'une des opérations suivantes: - Dans la barre d'outils du document, cliquez sur le bouton Afficher le mode Code. - Choisissez Affichage > Code. - Dans la barre d'outils du document, cliquez sur le bouton Afficher les modes Code et Creation. - Choisissez Affichage > Code et création. - Choisissez Fenêtre > Inspecteur de code. Lorsque vous sélectionné un élément dans l'un des deux éditeurs de code (mode Code ou inspecteur de code), il est également sélectionné dans la fenêtre de document. Il est parfois nécessaire de synchroniser les deux affichages pour que la sélection apparaisse. Affichage ou masquage des iconônes des éléments invisibles Choisissez Affichage > Assistances visuelles > Elements invisibles. Note: 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 masquercer ces éléments invisibles. Définition des préférences des éléments invisibles Utilisez les préférences des éléments invisibles pour déterminer les types d' éléments devant être affichés lorsque l'options Affichage > Assistance visuelles > Éléments invisibles est activée. 1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh), puis cliquez sur Éléments invisibles. 2 Sélectionnez les éléments à prendre visibles, puis cliquez sur OK. Note: Une coche à côté du nom de l'élement dans la boîte de dialogue signifie que l'élement est visible lorsque l'options Affichage > Assistances visuelles > Éléments invisibles est activée. Ancre nommées Affiche une icône marquant l'emplacement de chaque ancre nommée (a name =") dans le document. Scripts Affiche une icône marquant l'emplacement de code Java Script ou VBScript dans le corps du document. Sélectionnez cette icône pour modifier le script dans l'inspecteur Propriétés, ou pour créé un lien vers un fichier script externe. Comments Affiche une icone marquant l'emplacement d'un commentaire HTML. Sélectionnez cette icone pour consultez le commentaire dans l'inspecteur Propriétés. Sauts deligne Affiche une icone marquant l'emplacement de chaque saut de ligne (BR). Cette option est deselectionnee par défaut. Cartes graphiques cote client Affiche une icone marquant l'emplacement de chaque carte graphique du document. Styles incorpores Affiche une icone marquant l'emplacement de styles CSS incorpore dans le corps du document. Les styles CSS placés dans l'en-tete du document n'apparaissent pas dans la fenetre de document. Champs de formulaire masqués Affiche une icône marquant l'emplacement de champs de formulaire dont l'attribut type est fixé à "hidden". Séparateur de formulaire Affiche une cordure délimitant le formulaire pour vous aider à y insérer des éléments. La cordure indique l'endetue de la balise form; ainsi, tous les éléments de formulaire à l'intérieur de cette cordure sont correctement inclus dans les balises form. Points d'ancrage des éléments PA Affiche une icône marquant l'emplacement du code définissant un élément PA. L'élement PA lui-même peut être positionné n'importe où dans la page. Les éléments PA ne constituent pas des éléments invisibles ; seul le code qui les définit est invisible. Sélectionnez l'icône afin de sélectionner l'élement PA. Vous pouvez ainsi afficher le contenu de l'élement PA, même s'il est marqué comme masqué. Points d'ancrage des éléments alignés Affiche une icône marquant l'emplacement du code HTML des éléments qui acceptent l'attribut align. Ces éléments sont les suivants : images, tableaux, objets ActiveX, plug-ins et applets. Dans certains cas, le code de l'élement peut être séparé de l'objet visible. Balises de marquage de serveur visuel Affiche l'emplacement des balises de marquage de serveur (telles que les balises ASP (Active Server Pages) et ColdFusion) dont le contenu ne peut pas ettre affiché dans la fenetre de document. En rgle generale, lorsqu'elles sont traitées par un serveur, ces balises generent des balises HTML. Par exemple, une balise < CFGRAPH> genere un tableau HTML lorsqu'elle est traitée par un serveur ColdFusion. Dreamweaverrepresented la balise à l'aide d'un élément ColdFusion invisible, car il lui est impossible de déterminer la sortie dynamique finale de la page. Balises de marquage de serveur non visuel Affiche l'emplacement des balises de marquage de serveur (telles que les balises ASP (Active Server Pages) et ColdFusion) dont le contenu ne peut pas etre affiché dans la fenetre de document. Il s'agit generalement de balises de configuration, de traitement ou de logique (par exemple <CFSET> , <CFWDDX> et <CFXML> ) qui ne generations pas de balises HTML. Affiche CSS: Aucun Affiche une icone qui montre l'emplacement du contenu masqué par la propriété display:none de la feuille de style liée ou incorporee. Afficher le texte dynamique sous Affiche le texte dynamique de la page dans le format {Recordset:Field} par défaut. Si la longueur de ces valeurs perturbe le formatting de la page, vous pouvez désirer le type d'affichage {}. Inclusions côté serveur Affiche le contenu réel de chaque fichier d'inclusion côté serveur. Couleurs Couleurs Web sécurisées En HTML, les couleurs sont exprimées par leur valeur hexadécimale (par exemple, #FF0000) ou, pour les principales, par leur nom en anglais (red). Une couleur sécurisée pour le Web est une couleur qui, en mode 256 couleurs, reste toujours la même dans Safari 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ésentée une couleur sécurisée pour le Web. Des tests approfondis ont cependant révélé qu'en réalité seules 212 couleurs sont sécurisées pour le Web. Sous Windows, Internet Explorer ne restitue pas correctement les couleurs #0033FF (0,51,255), #3300FF (51,0,255), #00FF33 (0,255,51) et #33FF00 (51,255,0). Lorsque les navigateurs Web ont fait leur apparition, la plupart des ordinateurs n'affichaient que 265 couleurs (8 bits par canal, bpc). Aujourd'hui, la plupart des ordinateurs affichent des milliers ou des millions de couleurs (16 et 32 bpc). L'utilité de la palette adaptée à tous les navigateurs est donc bien moindre si vous développpez 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 apparèils différents, comme les organisateurs personnels et les téléphones mobiles. Un grand nombre de ces apparèils sont équipés d'un écran noir et blanc (1 bpc) ou 256 couleurs (8 bpc). Les palettes Cubes de couleur (valeur par défaut) et Ton continu de Dreamweaver utilisent la palette sécurisée pour le Web de 216 couleurs ; lorsque vous Sélectionnéz une couleur dans ces palettes, c'est la valeur hexadécimale correspondante qui s'affiche. Pour désirer une couleur en dehors de la gamme sécurisée pour le Web, ouvre le nuancier du système en cliquant sur le bouton Roue chromatique en haut à droite du/selecteur de couleurs de Dreamweaver. Celle-ci n'est pas limitée aux couleurs sécurisées pour le Web. Les versions UNIX des navigateurs utilisent une palette de couleurs différente de celle des versions Windows et Macintosh. Si vous développpez exclusivement pour des plates-formes UNIX (ou si le public visé est composé d'utilisateurs de Windows ou de Macintosh équipés de moniteurs 24 bpc et d'utilisateurs d'UNIX équipés de moniteurs 8 bpc), vous pouvez utiliser des valeurs hexadécimales combinant les paires 00, 40, 80, BF ou FF, qui produit des couleurs sécurisées pour le Web sur les ordinateurs exécutant SunOS. Utilisation du sélecteur de couleur Dans Dreamweaver, les inspecteurs de propriétés de la plupart des éléments de page, ainsi que de nombreuses boîtes de dialogue, comportent une icône permettant d'ouvrir un/selecteur de couleur. Choisissez la couleur d'un élément de page dans le/selecteur. Vous pouvez également définir la couleur par défaut du texte des éléments de votre page. 1 Cliquez sur I'icone des couleurs dans n'importe quelle boite de dialogue ou dans linspecteur Propriétés. Le sélecteur de couleur s'affiche à l'écran. 2 Effectuez l'une des opérations suivantes : Utilise la pipette pour selectionner une nuance de couleur dans la palette. Toutes les couleurs des palettes Cubes de couleur (valeur par défaut) et Ton continu sont sécurisées pour le Web ; les autres palettes ne le sont pas. Utilisez la pipette pour selectionner une couleur à partir d'un point visible à l'écran, même à l'extérieur de la fenêtre de Dreamweaver. Pour selectionner une couleur sur le bureau ou dans une autre application, appuyez sur le bouton de la souris et maintenez-le enforcé. La pipette peut ainsi rester active et selectionner une couleur en dehors de Dreamweaver. Si vous cliquez sur le bureau ou sur une autre application, Dreamweaver selectionne la couleur de l'emplacement où vous avez cliué. Cependant, si vous passsez à 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 simplement la sélection, utilisez le menu déroulant en haut à droite du nuancier. Vous pouvez selectionner Cubes de couleur, Ton continu, Système d'exploitation Windows, Mac OS et Niveau des gris. Note: 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 Niveau des gris. Pour effacer la couleur en cours sans devoir enChoosing une autre, cliquez sur le bouton Couleur par défaut - Pour ouvrir le nuancier du système, cliquez sur le bouton Roue chromatique Zoom avant et arrêté Dreamweaver permit d'agrandir (zoom avant) l'affichage de la fenetre de document de manière à pouvoir vérifier la précision des graphiques, selectionner plus aisément de petits éléments, reconvoir des pages avec un texte en petite taille, concevoir de très grande pages, etc. Note: Les outils de zoom ne sont disponibles qu'en mode Création. More Help topics "Présentation de la barre d'objet" on page 13 Zoom avant ou arrêté sur une page 1 Cliquez sur l'outil Zoom (la loupe) dans le coin inférieur droit de la fenetre du document. 2 Effectuez l'une des opérations suivantes : Cliquez sur la zone de la page que vous souhaitez agrandir jusqu'à atteoir l'affichage désiré. Tracez un cadre autour de la zone de la page que you souhaitez agrandir, pris relachen le bouton de la souris. Sélectionnez une échelle d'agrandissement prédéfini dans le menu dérouulant Zoom. Saisissez une échelle d'agrandissement dans le champ Zoom. Vous pouze également effectuer un grossissement avec l'outil Zoom en appuyant sur Ctrl+= (Windows) ou Commande+= (Macintosh). 3 Pour effectuer un zoom arrirre (réduire le taux d'agrandissement), appuyez sur la touche Alt (Windows) ou Option (Macintosh), puis cliquez sur la page. Vous pouvez également effectuer une réduction avec l'outil Zoom en appuyant sur Ctrl+- (Windows) ou Commande+- (Macintosh). Modification d'une page après un zoom Cliquez sur l'outil Selection (icone en forme de pointeur) dans le coin inférieur droit de la fenetre du document, puis cliquez dans la page. Défilament d'une page après un zoom 1 Cliquez sur l'outil Main (icone en forme de main) dans le coin inférieur droit de la fenetre du document. 2 Faites glisser la page. Adaptation de la fenêtre du document à la sélection 1 Sélectionné un élément de la page. 2 Sélectionnez Affichage > Ajuster à la seLECTION. Adaptation de la fenêtre du document à une page entière Sélectionnez Affichage > Ajuster à la page. Adaptation de la fenêtre du document à la largeur d'une page Sélectionnez Affichage > Ajuster à la largeur. Définition des préférences de durée et de taille des téléchargesements Dreamweaver calculates the taille on the 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 entre dans les préférences de la Barre d'etat. Le temps de téléchargement réel dépend de l'etat du traffic sur Internet, Pour vérifier les durées de téléchargement pour une page Web particulière, il estMLSistant d'utiliser la « regle des 8 secondes »; c'est-à-dire que la plupart des utilisateurs n'attendront pas plus de huit secondes pour le telechargement d'une page. 1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh). 2 Sélectionnéz la catégorie Barre d'etat dans la liste de gauche. 3 Choisisse la vitesse de connexion à partir de laquelle le temps de téléchargement sera calculé, puis cliquez sur OK. More Help topics "Définition de la taille des fenêtres et de la vitesse de connexion" on page 22 Utilisation du texte Ajout de texte dans un document Pour ajouter du texte dans un document Dreamweaver, vous pouze le saisir directement dans la fenetre du document ou effectuer un copier/coller. Vous pouze également importer du texte à partir d'autres documents. Pour coller du texte dans un document Dreamweaver, vous pouvez utiliser la commande Coller ou Collage spécial. La commande Collage spécial permet de préciser le format du texte collé de différentes façon. Par exemple, lorsque vous souhaitez coller le texte d'un document Microsoft Word déjà formaté dans votre document Dreamweaver en ignorantant son formatage initial afin d'appliquer votre propre feuillage 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'options qui permet de ne coller que le texte. Lorsque vous utilisez la commande Coller pour coller un texte issu d'une autre application, vous pouvez définir des préférences de collage comme options par défaut. Note: En mode Code, Ctrl-V (Windows) et Commande-V (Macintosh) collent toujours le texte seulement (sans formatting). Pour ajouter du texte dans un document,procedede l'une des manieres suivantes: - Tapez le texte directement dans la fenêtre de document. - Copiez du texte à partir d'une autre application, passerez dans Dreamweaver, placez le point d'insertion dans la fenêtre du document en mode Création, puisCHOISSEZ Edition > Coller ou Edition > Collage spécial. Lorsque you choisissez Edition > Collage spécial, you pouvez besoin plusieurs options de formatage du texte collé. Vou puez egalent 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) Insertion de caractères spéciaux Cerains caractères spéciaux sont représentés en HTML par un nom ou par un nombre, qui est alors appelé entité. Le langage HTML prévoit des noms d'entities pour de nombreux caractères spéciaux, par exemple le symbole de copyright (©), l'esperluette (&) et le symbole Marque déposée (®). Chaque entité est représentée à la fois par un nom HTML (par exemple — pour le tiret cadratin) et son équivalent numérique (dans ce cas, ). Le langage HTML utilise des crochets <> dans son code, mais vous devez exprimer les caractères spéciaux supérieur à et inférieur à sans que Dreamweaver les interprête comme du code. Dans ce cas, utilisez ógt; pour le signe supérieur à (>) et élt; pour le signe inférieur à (<). Malheureusement, de nombreux navigateurs anciens n'affichent pas correctement la plupart de ces entités. 1 Dans la fenêtre de document, placez le curseur là où vous voulez insérer un caractère spécial. 2 Effectuez l'une des opérations suivantes : - Choisissez le nom du caractère dans le sous-menu Insertion > HTML > Caractères spéciaux. - Dans la catégorie Texte du panneau Insertion, cliquez sur le bouton Caractères et choisissez le caractère désiré dans le sous-menu. Un grand nombre d'autres caractères spéciaux sont disponibles. Pour en selectionner un,CHOISSEZ Insertion HTML > Caracteres speciaux > Autre ou cliquez sur le bouton Caracteres de la categorie Texte du panneau Insertion, puis choisissez Autres caractères. Choisissez un caractere dans la boite de dialogue Inserer autre caractere et cliquez sur OK. Ajout d'espacements entre les caractères Le langage HTML n'autorisant qu'un seul espace entre les caractères, il convient d'insérer un espace insécable afin d'ajouter un espace supplémentaire dans un document. Vous pouvez définir une préférence pour l'insertion automatique d'un espace insécable dans un document. Insertion d'un espace insécable Effectuez l'une des opérations suivantes : - Choisissez Insertion > HTML > Caracteres spéciaux > Espace insécable. - Appuyez sur les touches Ctrl+Maj+Espace (Windows) ou Option+Espace (Macintosh). - Dans la catégorie Texte du panneau Insertion, cliquez sur le bouton Caractères et cliquez sur l'icone Espace insécable. Définition d'une préférence pour l'ajout d'espaces insécables 1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh). 2 Dans la catégorie Général, assurez-vous que l'option Autoriser plusieurs espaces consécutifs soit activée. 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 paragraphs. Vous pouvez vous-même espacer les paragraphs d'une ligne vierge en insérer un saut de ligne. Ajout d'un saut de paragraphe Appuyez sur la touche Entrée (Windows) ou Retour (Macintosh). Ajout d'un saut de ligne Effectuez l'une des opérations suivantes : - Appuyez sur les touches Maj+Entrée (Windows) ou Maj+Retour (Macintosh). - Choisissez Insertion > HTML > Caracteres spéciaux > Saut de ligne. - Dans la catégorie Texte du panneau Insertion, cliquez sur le bouton Caracteres et cliquez sur l'icone Saut de ligne. Création de listes à puces ou numérotées Vou puez creer des listes numerotees (tries), des listes a puces (non triées) et des listes de definiptions à partir d'un texte existant ou d'un nouveau texte que you tapez dans la fenetre de document. Les listes de définitions n'utilisent pas de caractères d'en-tête tels que des puce 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 autres listes. Par exemple, vous pouvez imbriquer une liste numérotée ou à puce au sein d'une autre liste de même type. La boîte de dialogue Propriétés de liste vous permet de définir l'aspect d'une liste complète ou d'un élément de liste. Vous pouvez définir le style de numérotation, remettre à zéro la numérotation ou définir les options du style de puce d'éléments individuels de la liste ou de la liste complète. More Help topics "Définition des propriétés CSS" on page 144 Création d'une nouvelle liste 1 Dans le document Dreamweaver, placez le point d'insertion à l'emplacement où insérer la liste, puis procédez de l'une des manières suivantes: - Dans l'inspecteur Propriétés HTML, cliquez sur le bouton correspondant à une liste à puces ou une liste numérotable. - Choisissez Format > Liste, puis selectionné le type de liste qui vous convient : listened simple (à puce), listened numérative ou Liste de définitions. Le caractère de tête de l'élement de liste spécifique apparaît dans la fenêtre de document. 2 Tapez le texte de l'objet de la liste, puis appuyez sur la touche Entrée (Windows) ou Retour (Macintosh) pour créé un autre élément de liste. 3 Pour marquer la fin de la liste, appuyez à deux reprises sur la touche Entrée (Windows) ou Retour (Macintosh). Création d'une liste à partir d'un texte existant 1 Sélectionnez une suite de paragraphs pour les transformer en liste. 2 Dans l'inspecteur Propriétés HTML, cliquez sur le bouton correspondant à une liste à puce ou une liste numéroterée, ou Choisissez Format >liste, puis Sélectionné le type de liste qui vous convient : listened simple (à puce), Liste numéroterée ou Liste de définitions. Création d'une liste imbriquée 1 Sélectionné les éléments de liste à imbriquer. 2 Dans l'inspecteur Propriétés HTML, cliquez sur le bouton Blockquote, ou choisissez Format > Retrait. Dreamweaver met le texte en retrait et create 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 procedure que celle utilisée ci-dessus. Définition des propriétés d'une liste complète 1 Dans la fenêtre de document, créez au moins un élément de liste. Le nouveau style s'applique automatiquement aux nouveaux éléments ajoutés à la liste. 2 Placez le point d'insertion dans le texte de l'élément de la liste, puis choisissez Format > Lieste > Propriétés de la liste pour ouvrir la boîte de dialogue Propriétés de liste. 3 Sélectionnez les options que vous voulez appliquer à la liste : Type de liste Spécifie les propriétés de la liste, tandis que élément de liste caractérisse un élément individuel d'une liste. Dans le menu déroulant, sélectionnez une liste simple, une liste numériotée, une liste des repertoires ou une liste des menus. Les options disponibles dans la boîte de dialogue varient selon le type de liste choisi. Style Définit le style des numérios ou des puce utilisés avec une liste numérotable ou à puce. Tous les éléments de la liste prendront ce style, sauf si vous attribuerez un nouveau style à certains éléments. Démarrer le comptage Définit la valeur à attribuer au premier élément d'une liste numérotable. 4 Cliqueur OK pourdéfinirlesoptions. Définition des propriétés d'un élément de liste 1 Dans la fenetre de document, placez le point d'insertion dans le texte d'un élément de la liste. 2 Choisissez Format > Liste > Propriétés de la liste. 3 Dans Elementary de liste, selectionné les options que vous voulez définir : Nouveau style Caracterise le style de l'objet de liste sélectionné. Les styles du menu Nouveau style sont apparentés au type de liste affché dans le menu Type de liste. Si, par exemple, vous avez besoin l'options Liste simple dans le menu Type de liste, seules les options de puce sont disponibles dans le menu Nouveau style. Réinitialiser le compte à Définit un nombre spécifique à partir duquel numéroter les éléments de liste. 4 Cliquez sur OK pour définir les options. Recherche et remplacement de texte Vou puez utilise la commande Rechercher et remplacer pour rechercher du texte ainsi que des attributs et des balises HTML dans un ou plusieurs documents. Le panneau Recherche, situé dans le groupe de panneaux Résultats, indique les résultats des recherches pour lesquelles l'option Rechercher tout est sélectionnée. Note: Pour rechercher des fichiers dans un site, utilisez les commandes suivantes : Retrouver sur le site local et Retrouver sur le site distant. More Help topics "Affichage du code" on page 315 "Expressions régulières" on page 312 Recherche et remplacement de texte 1 Ouvrez le document dans lequel la recherche doit etre effectuée ou selectionnez des documents ou un dossier dans le panneau Fichiers. 2 Sélectionnez la commande Edition > Rechercher et replacer. 3 L'option Rechercher dans vous permet de définir les fichiers dans lesquels effectuer la recherche : Texte selectionné Permet de limiter la recherche au texte alors selectionné dans le document actif. Document actif Permet de limiter la recherche au document actif. Ouvr les documents Permet d'effectuer la recherche dans tous les documents alors ouverts. Dossier Permet de limiter la recherche à un dossier spécifique. Àpres avoir choisi Dossier, cliquez sur l'icone représentant un dossier pour selectionner le dossier dans lequel effectuer votre recherche. Fichiers selectionnés dans le site Permet de limiter la recherche aux fichiers et dossiers actuellément selectionnés dans le panneau Fichiers. Site local en cours entier Permet d'etendre la recherche à l'ensemble des documents HTML, des fichiers de bibliothèque et des documents/texte du site courant. 4 Le menu dérouulant Rechercher permet de spécifique le type de recherche à effectuer : Code source Permet de rechercher des chaînes de texte spécifique dans le code source HTML. Vous pouvez rechercher des balises spécifique à l'aide de cette option, mais la recherche Balise spécifique offre une approche plus flexible pour ce type d'opération. Text Permet de rechercher des chaînes spécifiques de texte au sein du document. Une recherche sur du texte ignore tout code HTML qui interromprait la chaîne indiquée. Par exemple, si vous recherchez le chien noir, vous trouvezez aussi bien le chien noir que le chien noir. Texte (avancé) Permet de rechercher des chaînes de texte spécifique se trouvant à l'intérieur ou à l'extérieur d'une ou plusieurs balises. Par exemple, dans un document qui contient le code HTML suivant, la recherche de essaie en précisant Pas de balise interne et la balise i renvoie uniquement la seconde occurrence du mot essaie: Jean essaie de terminer son travail à temps, mais n'y arrive pas toujours. Il essaie cependant farouchement. Balise spécifique Permet de rechercher des balises, attributs et valeurs d'attribut spécifique, telles que toutes les balises td ou valign est definite sur top. Note: Appuyez sur Ctrl+Entrée ou Maj+Entrée (Windows) ou sur Contrôle+Retour, Maj+Retour ou Commande+Retour (Macintosh) pour insérer des sauts de ligne au sein des champs de recherche, ce qui permet de rechercher un caractère de回头 chariot. Lorsque vous effectuez une telle recherche, désactivez l'option Ignorer les différences entre les espaces blancs si vous n'utilise pas d'expressions régulières. Cette recherche porte sur un caractère de回头 chariot en particulier, et non sur l'occurrence d'un saut de ligne; par exemple, elle ne trouvera pas de balise <br> ou <p> . Les caractères de回头 chariot apparaissent en tant qu'espaces en mode Création, et non en tant que sauts de ligne. 5 Utilisez les options suivantes pour élargir ou limiter la recherche : Respecter la casse Limité la recherche au texte dont la casse correspond à celle du texte recherché. Par exemple, si vous recherchez le français, vous ne trouvrez pas le Français. Ignore les différences entre les espaces blancs Traite tout espace blanc comme s'il s'agissait d'un simple espace pour les besoin de la recherche. Par exemple, si cette option est activée, ce texte correspond à ce texte et âce texte, mais pas à cetexte. Cette option n'est pas disponible lorsque l'option Utiliser les expressions régulières est selectionnée ; vous doivent écrire explicitement l'expression régulière pour ignorer les espaces blancs. Notez que les balises <p> et <br> ne sont pas comptées comme des espaces blancs. Mot entier Limité la recherche aux occurrences contenant un ou plusieurs mots entiers. Note: L'utilisation de cette option équivaut à effectuer une recherche classique d'une chaîne commençant et terminant par b , l'expression régulière de limite entre les mots. Utiliser les expressions régulières Fait en sorte que certains caractères et chaînes courtes (teils que ?, *, \w et \b) de la châine recherche soient interprétés comme des opérateurs d'expression régulières. Par exemple, une recherche sur 1e c\w*b noir trouvera aussi bien le chien noir que le chapeau noir Note: Si vous travailliez dans l'Affichage de code et modifiez le document, puis essayez de rechercher et de replacer tout élément autre que du code source, une boite de dialogue s'affiche et vous informe que Dreamweaver synchronise les deux fenêtes avant d'effectuer la recherche. 6 Pour rechercher des chaînes sans les remplaçer, cliquez sur Rechercher suivant ou sur Rechercher tout : Suivant Permet de passer à l'occurrence suivante dans le document actif et de la sélectionner. S'il s'agit de la dernière occurrence de la chaine recherche, Dreamweaver passes au document suivant si la recherche porte sur plusieurs documents. Rechercher tout Ouvre le panneau Recherche du groupe de panneaux Résultats. Si la recherche neporte que sur un document, toutes les occurrences de la chaine recherche s'affichent avec leur contexte. Si la recherche porte sur un dossier ou un site, Rechercher tout affiche la liste des documents contenant la chaine recherche. 7 Pour remplacer les chaînes trouvées, cliquez sur Remplacer ou sur Remplacer tout. 8 Cliquez sur Fermer lorsque vous avez terminé. Nouvelle recherche sans afficher la boîte de dialogue Rechercher et remplaçer Appuyez sur F3 (Windows) ou Commande+G (Macintosh). Affichage du contexte d'un résultat donné 1 Choisissez Fenètre > Résultats pour afficher le panneau Rechercher. 2 Double-cliquez sur une ligne du panneau Rechercher. Si vous effectue une recherche dans le document actif, la fenêtre du document affiche la ligne contenant le résultat de la recherche. Si la recherche porte sur plusieurs fichiers, le fichier contenant ce résultat s'ouvre. Nouvelleexecutiond'une même recherche Cliques sur le bouton Rechercher et remplacer. Arrêt d'une recherche en cours Cliquez sur le bouton Arrerter. Recherche d'une balise spécifique La boite de dialogue Rechercher et replacer vous permet de rechercher du texte et des balises dans un document et de replacer les occurrences trouvées par un autre texte ou d'autres balises. 1 Sélectionnez la commande Edition > Rechercher et remplacer. 2 Dans le menu déroulant Rechercher, Sélectionnez Balise spécifique. 3 Sélectionnez une balise spécifique ou [toute balise] dans le menu dérouulant situé pres du menu dérounant Rechercher ou tapez un nom de balise dans la zone de texte. 4 (Facultatif) Limitez la recherche à l'aide de l'un des modifieurs de balise suivants : Avec attribut Permet de selectionner un attribut qui ne doit pas figurer dans la balise pour que la correspondance soit trouvée. Vous pouvez spécifier une valeur particulière pour cet attribut ou désirir [toute valeur]. Sans attribut Permet de selectionner un attribut qui ne doit pas figurer dans la balise pour que la correspondance soit trouvee. Par exemple, vous pouvez rechercher toutes les balises img n'ayant pas l'attribut alt. Contenant Indique un texte ou une balise qui doit figurer dans la balise d'origine pour que la correspondance soit trouvée. Par exemple, dans le code < b > < font size="4">heading 1, labalisse font est placé à l'intérieur de la balise b. Ne contenant pas Indique un texte ou une balise qui ne doit pas figurer dans la balise d'origine pour que la correspondance soit trouvée. Balise interne Spécifie une balise à l'intérieur de laquelle la balise cible doit être incluse pour que la correspondance soit trouvée. Pas de balise interne Spécifie une balise à l'intérieur de laquelle la balise cible ne doit pas se才知道 pour que la correspondance soit trouvée. 5 (Facultatif) Pour cibler encore la recherche, cliquez sur le bouton plus (+) et repeteze l'etape 3. 6 Si aucun modifieur de balise n'a ete applique aux etapes 3 et 4, cliquez sur le bouton moins (-) pour reduire le menu de modifieur de balise. 7 Si vous nevez executer une action lorsque la balise est trouvee (telle que le retrait ou le remplacement de cette balise), selectionnez cette action dans le menu contextual Action, puis, si nécessaire, spécifie l'action a effectuer. Recherche de texte spécifique (avancée) La boite de dialogue Rechercher et replacer vous permet de rechercher du texte et des balises dans un document et de replacer les occurrences trouvées par un autre texte ou d'autres balises. 1 Sélectionnez la commande Edition > Rechercher et replacer. 2 Dans le menu déroulant Rechercher, choisissez Texte (avancé). 3 Tapez le texte dans la zone de texte situé pres du menu dérouulant Rechercher. Par exemple, tapez le mot Indéfini. 4 Sélectionnez l'option balise interne ou pas de balise interne, puis choisissez une balise dans le menu dérounant adjacent. Par exemple, cliquez sur Dans la balise, puis selectionnéz title. 5 (Facultatif) Cliquez sur le bouton plus (+) pour limiter la recherche à l'aide d'un des modifieurs de balise suivants : Avec attribut Permet de selectionner un attribut qui ne doit pas figurer dans la balise pour que la correspondance soit trouvée. Vous pouvez spécifier une valeur particulière pour cet attribut ou désirir [toute valeur]. Sans attribut Permet de selectionner un attribut qui ne doit pas figurer dans la balise pour que la correspondance soit trouvée. Par exemple, vous pouvez rechercher toutes les balises img n'ayant pas l'attribut alto. Contenant Indique un texte ou une balise qui doit figurer dans la balise d'origine pour que la correspondance soit trouvée. Par exemple, dans le code < b > < font size="4">heading 1, labalisse font est placé à l'intérieur de la balise b. Ne contenant pas Indique un texte ou une balise qui ne doit pas figurer dans la balise d'origine pour que la correspondance soit trouvée. Balise interne Spécifie une balise à l'intérieur de laquelle la balise cible doit être incluse pour que la correspondance soit trouvée. Pas de balise interne Spécifie une balise à l'intérieur de laquelle la balise cible ne doit pas se couver pour que la correspondance soit trouvée. 6 (Facultatif) Pour cibler encore plus la recherche, repêzez l' étape 4. Définition d'abréviations et d'acronyms Le langage HTML fournit des balises qui permettent de définir les abréviations et les acronymes que vous employez sur votre page pour les moteurs de recherche, les correcteurs orthographiques, les programmes de traduction automatique ou les synthétiseurs vocaux. Par exemple, vous pouvez indiquer que l'abréviation IM, sur votre page, signifie « ingénierie mécanique », ou que l'acronyme OMS signifie « Organisation mondiale de la Santé » 1 Sélectionnez l'abréviation ou l'acronyme dans le text de la page. 2 Choisissez Insertion > HTML > Objects texte > Abbreviation ou Insertion > HTML > Objectsertext > Acronyme. 3 Saisissez la forme développée de l'acronyme ou de l'abréviation. 4 Entrez la langue, comme en pour l'anglais, de pour l'allemand ou it pour l'italien. Définition des préférences de copie/collage Vou puez configurer des préférences de collage spécial à utiliser par défaut avec la commande Edition > Coller lorsque vous collez du texte provenant d'autres applications. Par exemple, si vous souhaitez coller systématiquement le texte uniquement, ou le texte avec un formatage de base, définissez l'option par défaut dans la boîte de dialogue Préférences de copie/collage. Note: Pour coller du texte dans un document Dreamweaver, vous pouvez utiliser la commande Coller ou Collage spécifique. La commande Collage spécifique permet de préciser le format du texte collé de différentes façon. Par exemple, lorsque vous souhaitez coller le texte d'un document Microsoft Word déjà formaté dans votre document Dreamweaver en ignorantant son formatage initial afin d'appliquer votre propre feuille de style CSS, Sélectionnez le texte dans Word, copiez-le dans le presse-papiers, puis utilisez la commande Collage spécifique pour sélectionner l'options qui permet de ne coller que le texte. Note: Les préférences définies dans la boîte de dialogue Préférences de copie/collage ne s'appliquent qu'aux éléments collés dans la vue Création. 1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh). 2 Cliquez sur la catégorie Copier/Coller. 3 Définisse les options suivantes, puis cliquez sur OK. Texte seul Permet de coller du texte non formaté. Si le texte d'origine est formaté, ce formatage, y compris les sauts de ligne et de paragraphs, est supprimé. Texte structure Permet de coller du texte en conservant sa structure, mais sans le formatage de base. Par exemple, vous pouvez coller un texte et conserver la structure des paragraphs, des listes et des tableaux, mais pas les mises en gras, italiques et autres formatages. Texte structure avec formatting de base Permet de coller du texte structuré et du texte HTML avec une mise en forme simple (tel que des paragraphs et des tableaux, ainsi que du texte mis en forme avec les balises b, i, u, strong, em, hr, abbr ou acronym). Texte structure avec formatage complet Permet de coller du texte en conservant toute sa structure, son formatage HTML et ses styles CSS. Note: L'option Mise en forme compte ne permet pas de conserver les styles CSS provenant d'une feuille de style externe, ni les styles provenant d'applications qui ne les conservent pas lors d'une copie dans le presse-papiers. Conserver les sauts de ligne Permet de conserver les sauts de ligne dans le texte collé. Cette option est désactivée si vous avez selectionné Texte seul. Nettoyage des espaces inter-paragrames de Word Sélectionnez cette option lorsque vous avez sélectionné Texte structured ou Mise en forme de base et souhaitez éliminer l'espace supplémentaire qui sépare les paragraphs lorsque vous collez votre texte. Définition des propriétés de texte dans l'inspecteur Propriétés Voupeus utilise l'inspecteur Propriétés de texte pour appliquer un formatage HTML ou CSS. Lorsque vous applique un formatage HTML, Dreamweaver ajoute des propriétés au code HTML du corps de la page. Lorsque vous appliquez un formatage CSS, Dreamweaver écrit les propriétés dans l'en-tête du document ou dans une feuille de style séparée. Note: Lorsque vous créez des styles CSS intégrés, Dreamweaver ajoute directement le code d'attribut du style au corps de la page. A propos du formatage de texte (CSS et HTML) Les méthodes de formatage du texte dans Dreamweaver s'apparentent à celles d'un logiciel de traitement de texte standard. Vous pouvez définir le style de formatage par défaut (Paragraphe, En-tête 1, En-tête 2, etc.) pour un bloc de texte, modifier la police, la taille la couleur et l'alignement du texte sélectionné ou appliquer des styles de texte tels que gras, italie, code (texte à chasse fixe) et souligné. Dreamweaver comprend deux inspecteurs Propriétés, intégrés pour n'en faire qu'un : linspecteur Propriétés CSS et linspecteur Propriétés HTML. Lorsque vous utilisez linspecteur Propriétés CSS, Dreamweaver met en forme le texte à l'aide de feuilles de style en cascade (CSS). Les styles CSS offrent aux concepteurs et développementurs 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 fischiers. Linspecteur Propriétés CSS permet d'acceder à des styles existants et d'en creer de nouveaux. CSS permet de modifier le style d'une page Web sans comprometter 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ôle les attributs de conception sur plusieurs pages Web. Vouss pouvez stocker les styles créés à l'aide de CSS directement dans le document ou, pour-disposer de davantage de puissance et de flexibilité, vous pouvez les stocker dans une feuille de style externe. Si vous associez une feuille de style externe à plusieurs pages Web, toutes les pages s'adapteront automatiquement si vous effectuez une modification dans cette feuille de style. Pour acceder à toutes les règles CSS d'une page, utilisez le panneau Styles CSS (Fenêtre > Styles CSS). Pour acceder aux règles qui s'appliquent à la selection actuelle, utilisez le panneau Styles CSS (mode Actuel) ou le menu Règle cible de l'inspecteur Propriétés CSS. Si vous le préférez, vous pouvezmettre en forme le texte de vos pages Web à l'aide de balises de marquage HTML. Pour employer des balises HTML au lieu de CSS, mettez le texte en forme à l'aide de l'inspecteur Propriétés HTML. Note: Vous pouvez combiner des formatages CSS et HTML 3.2 dans une même page. Le formatage est appliqué de façon hierarchique : 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. More Help topics "Ouverture du panneau Styles CSS" on page 140 "Description des feuilles de style en cascade" on page 132 Modification de règles CSS dans l'inspecteur Propriétés 1 Si ce n'est pas deja fait, ouvre l'inspecteur Propriétés (Fenetre > Propriétés) puis cliquez sur le bouton CSS. 2 Effectuez l'une des opérations suivantes : Placez le point d'insertion dans un bloc de texte qui a eté mis en forme à l'aide d'une règle que vous poulez modifier. La règle s'affiche dans le menu Règle cible. Choisissez une règde dans le menu Règce cible. 3 Apportez les modifications désirées à la regle à l'aide des différentes options de l'inspecteur Propriétés CSS. Règle cible La rècle que vous modifie dans l'inspecteur Propriétés CSS. Lorsqu'un style existant est appliqué au texte, la rècle qui influe sur le format du texte s'affiche lorsque vous cliquez dans le texte sur la page. Vous pouze également utiliser le menu Règle cible pour creer de nouvelles règes CSS et de nouveaux styles intégrés, ou pour appliquer des classes existantes au texte sélectionné. Si vous créez une nouvelle rècle, vous doivent replir la boîte de dialogue Nouvelle rècle CSS. Pour plus d'informations, consultez les liens dans le bas de cette rubrique. Modifier la rècle Ouvre la boîte de dialogue Définition des règles CSS pour la rècle cible. Par contre, si vous désissiez Nouvelle règle CSS dans le menu Règle cible puis que vous cliquez sur le bouton Modifier la rècle, Dreamweaver ouvre la boîte de dialogue Définition de nouvelle règle CSS. Panneau CSS Ouvre le panneau Styles CSS et affiche les propriétés de la règle cible en mode Actuel. Police Modifie la police de la règle cible. Taille Définit la taille de police de la règle cible. Couleur du texte Définit la couleur sélectionné comme couleur de police dans la règle cible. Sélectionnez une couleur sécurisée pour le Web enclistant sur le sélecteur de couleur ou tapez directement une valeur hexadécimale (par exemple, #FF0000) dans le champ de texte adjacent. Gras Ajoute la propriété gras à la règle cible. Italique Ajoute la propriété italieque à la regle cible. Aligner à gauche, Centrer et Aligner à droite Ajoute les propriétés d'alignement respectives à la rècle cible. Note: Les propriétés Police, Taille, Couleur du texte, Gras, Italique et Alignment affichent toujours les propriétés de la règle qui s'applique à la sélection actuelle dans la fenêtre de document. Lorsque vous modifiez l'une de ces propriétés, vous influèez sur la règle cible. Voutrouverez undidactiel video sur l'utilisation de Iinspecteur Propriétés CSS à l'adresse www.adobe.com/go/lrvid4041_dw_fr. Définition de formatage HTML dans l'inspecteur Propriétés 1 Si ce n'est pas deja fait, ouvre l'inspecteur Propriétés (Fenetre > Propriétés) puis cliquez sur le bouton HTML. 2 Sélectionnez le texte que vous souhaitezmettre en forme. 3 Définisse les options que vous pouze appliquer au texte sélectionné : Format Définit le style de paragraphe du texte sélectionné. Paragraphe applique un format par défaut pour une balise <p> , En-tête 1 ajoute une balise H1, et ainsi de suite. ID Attribute un ID à votre sélection. Le menu ID présente (le cas échéant) tous les ID non utilisés et déclarés dans le document. Classe Affiche le style de classe appliqué au texte sélectionné. Si aucun style n'est appliqué à la sélection, la mention Aucun styleCSS apparait dans le menu déroulant. Si plusieurs styles sont appliqués à la sélection, le menu est vide. Le menu Style permet d'effectuer les opérations suivantes : Sélectionné le style à appliquer à la seLECTION. Choisissez Aucun pour ne plus appliquer le style selectionné. Pour denommer le style, choisissez Renommer. Sélectionnez Attacher une feuille de style pour ouvrir une boîte de dialogue qui vous permet d'attacher une feuille de style externe à la page. Gras Applique soit 或> soit <strong> au texte sélectionné en fonction de la préférence de style définitie dans la catégorie Général de la boîte de dialogue Préférences. Italique Applique soit <i> soit <em> au texte sélectionné en fonction de la préférence de style définitie dans la catégorie Général de la boîte de dialogue Préférences. List non ordonnée Crée une liste à puce à partir du texte sélectionné. Si aucun texte n'est sélectionné, une nouvelle liste à pucees est ouverte. Liste numérotable Crée une liste numérotable à partir du texte sélectionné. Si aucun texte n'est sélectionné, une nouvelle liste numérotable est ouverte. Blockquote et Supprimer Blockquote Augmente ou supprime la mise en retrait du texte sélectionné, en insérant ou supprimant la balise blockquote. Au sein d'une liste, l'ajout d'un retrait créé une liste imbriquée et sa suppression ramène les éléments de la liste au niveau parent. Lien Crée une liste à puce à partir du texte sélectionné. Cliquez sur l'icone de dossier pour rechercher un fisquier de cette site, faites glisser l'icone Pointer vers un fisquier sur un fisquier du panneau Fichiers ou faites glisser un fisquier du panneau Fichiers sur la zone. Titre Definit l'infobulle textuelle d'un lien hypertexte. Cible Spécífie la fenêtre ou le cadre dans lequel sera charge le document lié : blank charge le document lie dans une nouvelle fenetre, sans nom, du navigateur. parent charge le document lie dans le jeu de cadres parent (ou dans la fenetre parente) du cadre contenant le lien Si le cadre contenant le lien n'est pas imbriqué, le document lie sera chargedans la fenetre de base du navigateur. - _self charge le document lié dans le même cadre (ou la même fenêtre) que le lien. Il s'agit de la cible par défaut, de sorte qu'il est le plus souvent inutile de la spécifier. - _top charge le document lié dans la fenêtre de base du navigateur, en supprimant tous les cadres. Modification du nom d'une classe à partir de l'inspecteur Propriétés HTML Dreamweaver affiche toutes les classes disponibles pour votre page dans le menu Classe de l'inspecteur Propriétés HTML. Vous pouvez renomer des styles dans cette liste enCHOISANT l'options Renommer, à la fin de la liste des styles de classes. 1 Choisissez Renommer dans le menu déroulant Style de l'inspecteur Propriétés du texte. 2 Sélectionnéz le style à renomer dans le menu contextual Renommer un style. 3 Entrez un nouveau nom dans la zone Nouveau nom, puis cliquez sur OK. Vérification de l'orthographe d'une page Web. La commande Orthographe permet de vérifier l'orthographe du document actif. Le document doit être une page Web (par exemple une page HTML, ColdFusion ou PHP). La commande Orthographe ne fonctionne pas dans les fischiers texte ou XML. En outre, elle ignore les balises HTML et les valeurs d'attributes. Note: Dreamweaver peut uniquement vérifier l'orthographe du fichier actuellément ouvert dans la fenetre de document. Il ne peut pas vérifier l'orthographe de tous les fichiers d'un site en même temps. Par défaut, le correcteur orthographique utilise le dictionnaire Anglais US. Pour changer de dictionnaire, choisissez Edition > Préférences > Général (Windows) ou Dreamweaver > Préférences > Général (Macintosh), puis choisissez le dictionnaire que vous souhaitez utiliser dans le menu déroulant Dictionnaire du correcteur d'orthographe. 1 Choisissez Commandes > Orthographe ou appuyez sur les touches Maj+F7. Lorsque Dreamweaver ne reconnait pas un mot, la boite de dialogue Vérifier l'orthographe s'affiche. 2 Sélectionnez l'option correspondant au traitement que vous souhaitez appliquer à l'occurrence. Ajouter Ajoute le mot non reconnu à votre dictionnaire personnel. Ignore Ignore cette occurrence du mot non reconnu. Remplacer Remplace cette occurrence du mot non reconnu par le texte que vous tapez dans la zone de texte Remplacer par, ou par le mot selectionné dans la liste Suggestions. Tout ignorer Ignore toutes les occurrences du mot non reconnectnu. Tout remplacer Remplace toutes les occurrences du mot non reconnu. Note: Dreamweaver ne permet pas de supprimer les entrées qui ont et ajoutées aux dictionnaires personnels. Importation de données tabulaires Vou puez importer des données tabulaires dans un document en enregistrant d'abord ces fichiers (teis que des fichiers Microsoft Excel ou d'une base de données) sous forme de fichiers xyte delimits. Vou puez importer et metre en forme des données tabulaires, ainsi qu'importer du text à partir de documents HTML Microsoft Word. Vou puez également ajouter du texte provenant d'un document Microsoft Excel dans un document Dreamweaver en important le contentu du fichier Excel dans une page Web. 1 Choisissez Fichier > Importer > Importer les données tabulaires ou Insertion > Objets du tableau > Importer les données tabulaires. 2 Recherche le fichier souhaite ou entrez son nom dans la zone de texte. 3 Sélectionnez le délimiterut utilisé lors de l'enregistrement du fisier en tant que texte délimité. Les options sont Tab, Virgule, Point-virgule, Deux points et Autre. Si vous selectionnez Autre, un champ vierge s'affiche a coté de l'option. Entrez le caractère utilisé comme délimueur. 4 Utilisez les options restantes pour formater ou definir le tableau dans lequel importer les données, puis cliquez sur OK. More Help topics "Ouverture et modification de documents existants" on page 75 "Importation et exportation de données tabulaires" on page 191 Importation de documents Microsoft Office (Windows uniquement) Voupe iner le contu d'un document Microsoft Word ou Excel dans une page Web nouvelle ou existante. Lorsque you importe un document Word ou Excel, Dreamweaver reoit le code HTML converti et l'insere dans voite page Web. La taille du fichier, apres reception du code HTML converti par Dreamweaver, doit etre inferieure a 300 Ko. Au lieu d'importer tout le contenu d'un fichier, vous pouvez également coller une partie du document Word et proteger son formatage. Note: Si vous utilisez Microsoft Office 97, il n'est pas possible d'importer le contenu d'un document Word ou Excel. Vous nevez insérer un lien vers le document. 1 Ouvrez la page Web dans laquelle vous souhaitez copier le document Word ou Excel. 2 En mode Creation, procedez de l'une des manieres suivantes pour selectionner le fjichier : - Déplacez le fichier de son emplacement actuel vers la page où le contenu doit s'afficher. - Choisissez Fichier > Importer > Document Word ou Fichier > Importer > Document Excel. 3 Dans la boîte de dialogue Insérer un document, recherche le fichier à ajouter, Sélectionnez une option de formatage dans le menu Mise en forme situé dans le bas de la boîte de dialogue, puis cliquez sur Ouvrir. Texte seul Permet d'insérer du texte non formaté. Si le texte d'origine est mis en forme, tout le formatage est supprimé. Texte structure Permet d'insérer du texte en conservant sa structure, mais sans le formatage de base. Par exemple, vous pouvez coller un texte et conserver la structure des paragraphs, des listes et des tableaux, mais pas les mises en gras, italiques et autres formatages. Texte structure avec formatage de base Permet d'insérer du texte structuré et du texte HTML avec une mise en forme simple (tel que des paragraphs et des tableaux, ainsi que du texte mis en forme avec les balisesb, i, u, strong, em, hr, abbr ou acronym tag). Texte structure avec formatage complet Permet d'insérer du texte en conservant toute sa structure, son formatage HTML et ses styles CSS. Nettoyage des espaces inter-paragraphe de Word Permet d'éliminer les espaces superflus entre les paragraphs lorsque vous collez le texte alors que l'options Texte structured ou Mise en forme de base est sélectionnée. Le contenu du document Word ou Excel s'affiche dans votre page. Création d'un lien vers un document Word ou Excel Vou pouve insérer un lien vers un document Microsoft Word ou Excel dans une page existante. 1 Ouvrez la page ou le lien doit etre affiche. 2 Faites glisser le fichier de son emplacement actuel vers la page Dreamweaver, en plaçant le lien à l'emplacement voulu. 3 Sélectionnez Créer un lien, puis cliquez sur OK. 4 Si le document vers lequel vous creez un lien reside 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 estes assure que le document sera disponible lors de la publication du site Web. 5 Lorsque you chargez your page sur le serveur Web, you devez egalement charger le fichier Word ou Excel. Votre page contient dessormais un lien vers le document Word ou Excel. Le texte du lien est le nom du fichier lie. Si vous le souhaitez, vous pouvez modifier ce texte dans la fenetre du document. Utilisation de formatting HTML Meme si CSS est la methode de formatage de texte privilégieee, Dreamweaver permit d'employer du code HTML à cette fin. Mise en forme des paragraphs Utilisez le menu Format de l'inspecteur Propriétés HTML ou le sous-menu Format > Format de paragraphe pour appliquer des balises standard de paragraphe et d'en-tête. 1 Placez le point d'insertion dans le paragraphe, ou selectionnez une partie du texte du paragraphe. 2 Choisissez Texte > Format de paragraphe ou le menu Format de l'inspecteur Propriétés, puis Sélectionnez une option : - Choisissez un format de paragraphe (par exemple, En-tête 1, En-tête 2, Texte pré-formaté, etc.). La balise HTML associée au style choisi (par exemple, h1 pour En-tête 1, h2 pour En-tête 2, pré 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,CHOISSEZ Edition > Prefé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. More Help topics "Définition des propriétés de texte dans l'inspecteur Propriétés" on page 239 "Définition des propriétés CSS" on page 144 Modification de la couleur du texte Voupuez modifier la couleur par defaut de tout le texte d'une page, ou la couleur du texte selectionné sur la page. More Help topics "Utilisation du selecteur de couleur" on page 229 Définition des couleurs par défaut du texte sur une page Choisissez Modifier > Propriétés de la page > Appherence (HTML) ou Liens (HTML), puisCHOisissez la couleur pour les options Couleur du texte, Couleur du lien, Liens visités et Liens actifs. Note: La couleur du lien actif est la couleur que prend un lien lorsque l'utilisateur clique dessus. Il est possible que certains navigateurs Web n'utilisent pas la couleur que vous avez spécifiée. Modification de la couleur du texte sélectionné Choisissez Format > Couleur, selectionnéz une couleur dans le sélecteur système, puis cliquez sur OK. Alignement du texte Vous pouze aligner du texte à l'aide de code HTML en utilisant le menu Format > Aligner. Vous pouze centrer un élément sur la page à l'aide de la commande Format > Aligner > Centre. Alignment de text sur une page 1 Sélectionnez le texte à aligner ou insérez le pointeur au début du texte. 2 Choisissez Format > Aligner, puis selectionné une commande d'alignement. Centrage des éléments de page 1 Selectionne (image, plug-in, tableau ou tout autre element de la page) que vous désirez aligner au centre. 2 Choisissez Format > Aligner > Centre. Note: Vous pouvez aligner et centrer des blocs de texte complets ; par contre, vous ne pouvez pas aligner ou centrer une partie d'un en- tete 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 demettre en retrait le texte de chaque côté de la page. 1 Placez le point d'insertion à l'emplacement où insérer le retrait. 2 Choisissez Format > Retrait ou Retrait négatif, ou choisissez Liste > Retrait ou Retrait négatif dans le menu. Note: Un paragraphe accepte plusieurs indentations. Chaque application de cette commande produit un retrait supplémentaire du texte de chaque côté du document. Application de styles de police Vous pouvez utiliser HTML pour appliquer un formatage de texte à une seule dette, à des paragraphs entiers du site ou encore à des blocs de texte. Le menu Format permet de définir ou de modifier les caractéristiques de police du texte sélectionné. Vous pouvez définir le type, le style (par exemple, gras ou italique) et la taille d'une police de caractères. 1 Sélectionnez le texte. Si aucun texte n'est scélectionné, l'option s'appliquera au texte que vous taperez ensuite. 2 Faites votrechoixparmi les options suivantes: Pour modifier la police,CHOISSEZ LA combinaison désirée dans le menu Format > Police. Choisissez Par défaut pour supprimer les polices préalablement appliquées. Cette option applique la police par défaut au texte seLECTIONné (en l'occurrence, la police par défaut du navigateur ou la police affectée à cette balise dans une feuille de style CSS). Pour modifier le style de police, Sélectionnez le style désiré (gras, italique, sou ligné, etc.) dans le menu Format > Style. More Help topics "Creation de pages avec CSS" on page 132 "Creation d'une nouvelle règle CSS" on page 143 Utilisation de barres horizontales Les barres (lignes) horizontales sont utiles pour organiser les informations. Sur une page, le texte et les objets peuvent etre visuellement séparés par une ou plusieurs barres. Creation d'une barre horizontally 1 Dans la fenetre de document, placez le curseur la ou vous voulez inserer une barre horizontale. 2 Choisissez Insertion > HTML > Barre horizontale. Modification d'une barre horizontally 1 Dans la fenêtre de document, Sélectionnéz la barre horizontally. 2 Choisissez Fenetre > Propriétés pour ouvrir l'inspecteur Propriétés et modifier les propriétés selon vos besoins : La zone de texte ID Permet de définir un ID pour la règle horizontally. Let H Specifient la largeur et la hauteur de la barre, en pixels ou en pourcentage de la taille de la page. Alignement Spécificie l'alignement de la barre (Par défaut, Gauche, Centre ou Droite). Ce paramétrage ne s'applique que si la largeur de la barre est inférieure à celle de la fenêtre du navigateur. Ombrage Spécificie si la barre est accompagnée d'un effet d'ombre portée. Désactivez cette option pour dessiner la barre en couleur pleine. Classe Permet de joindre une feuille de style ou d'appliquer une classe à partir d'une feuille de style déjà jointe. Modification des combinaisons de polices Pour définitir la combinaison de polices qui apparait dans l'inspecteur Propriétés et dans Format > Police, utilisez la commande Modifier la liste des polices. Les combinaisons de polices de caractères déterminent la façon dont le texte des pages Web est affchéé par les navigateurs. Ces derniers utilisent, au sein de la combinaison de polices可以选择, 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. Modification des combinaisons de polices 1 Choisissez Format > Police > Modifier la liste des polices. 2 Choisissez la combinaison de polices dans la liste qui apparaît en haut de la boîte de dialogue. Les polices de la combinaison selectionnée apparaissent dans la liste Polices choisisies, dans le coin inférieur gauche de la boîte de dialogue. Une liste de toutes les polices disponibles installées sur votre système se trouve à sa droite. 3 Effectuez l'une des opérations suivantes : Pour ajouter ou-retirer des polices d'une combinaison, cliquez selon le cas sur l'un des boutons << ou>> qui se trouvent entre les listedes Polices choisisies et Polices disponibles. Pour ajouter ou supprimer une combinaison de polices, cliquez selon le cas sur l'un des boutons plus (+) ou moins (-) qui se trouvent dans la partie supérieure de la boîte de dialogue. Pour ajouter une police qui n'est pas installée sur votre ordinateur, tapez son nom dans le champ de texte en dessous de la liste Polices disponibles, et cliquez sur le bouton << pour ajouter cette police à la combinaison courante. Il peut être utile d'ajouter une police qui n'est pas installée sur votre système, par exemple pour indiquer une police spécifique à Windows lorsque vous travailliez sur un Macintosh. Pour déplacer la combinaison de polices au sein de la liste, cliquez sur les boutons fléchés en haut de la boîte de dialogue. Ajout d'une nouvelle combinaison à la liste des polices 1 Choisissez Format > Police > Modifier la liste des polices. 2 Sélectionnez une police dans la liste Polices disponibles, et cliquez sur le bouton << pour l'insérer dans la liste Polices choisis. 3 Repetez l'etape 2 pour chaque police nécessaire dans la combinaison. Pour ajouter une police qui n'est pas installée sur votre ordinateur, tapez son nom dans le champ de texte en dessous de la liste Polices disponibles, et cliquez sur le bouton << pour ajouter cette police à la combinaison courante. Il peut être utile d'ajouter une police qui n'est pas installée sur votre système, par exemple pour indiquer une police spécifique à Windows lorsque vous travailliez sur un Macintosh. 4 Lorsque vous avez fini de besoin des polices, selectionnez 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 choisisies. Les familles génériques de polices sont les suivantes : cursive, fantaisie, monospace (espacement non proportionnel), sans-serif (espacement proportionnel sans empâttement) et serif (espacement proportionnel avec empâttement). Si aucune des polices de la liste Polices disponibles n'est disponible sur l'ordinateur de l'utilisateur, le texte apparait dans la police par défaut associée à la famille de polices générique. Par exemple, avec la plupart des systèmes d'exploitation, la police non proportionnelle (monospace) par défaut est Courier. Insertion de dates Dreamweaver comporte un objet Date pratique qui insere la date actuelle dans le format de votrechioix (avec ou sans heures), ainsi qu'une option pourmettre a jour cette date lorsqu'youenegistrezle fichier. Note: 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èvent 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 souhaïez afficher ces informations. 1 Dans la fenêtre de document, placez le curseur là où vous désirez insérer la date. 2 Effectuez l'une des opérations suivantes : Choisissez Insertion > Date. Dans la catégorie Commun du panneau Insertion, cliquez sur le bouton Date. 3 Dans la boite de dialogue qui apparait alors, selectionnez 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ésactive cette option. 5 Cliques sur OK pour insérer la date. Si vous avez selectionné 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 selectionnant Modifier le format de date dans l'inspecteur Propriétés. Ajout et modification d'images A propos des images Différents types de formats de fischiers graphiques existent, mais trois formats de fischiers graphiques sont généralement utilisés dans les pages Web : GIF, JPEG et PNG. Les formats de fischier GIF et JPEG sont les plus répandus ; ils peuvent être affichés dans la plupart des navigateurs. GIF (Graphic Interchange Format) Les fichiers GIF utilisent un maximum de 256 couleurs et sont destinés à l'affichage d'images à tons non continus ou d'images相对较les larges zones de couleurs unies, telles que les barres de navigation, les boutons, les icônes, les logos ou d'autres images contenant des tons et des couleurs uniformes. JPEG (Joint Photographic Experts Group) Le format de fisquier JPEG est le format supérieur destiné aux photographies ou aux images à tons continus, car de tels fischiers peuventContainir des millions de couleurs. Lorsque la qualité d'un fisquier 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 fisquier en compressant un fisquier JPEG. Le format de fichier PNG (Portable Network Group) Le format de fichier PNG est un format de remplacement non breveté pour les fichiers GIF, qui inclut la prise en charge des images à couleurs indexées, en niveaux de gris et en couleurs vraies ainsi que la prise en charge du canal alpha pour la transparence. PNG est le format de fichier natif d'Adobe Fireworks. Les fichiers PNG conservent toutes les informations d'origine sur les calques, les vecteurs, les couleurs et les effets ( comme par exemple des ombres portées) et tous ces éléments peuvent être modifiés à tout moment. Les fichiers doivent avoir l'extension .png pour être reconnus comme fichiers PNG par Dreamweaver. Insertion d'une image Lorsque vous insérez une image dans un document Dreamweaver, le programme creée une ↔ reference à ce fjchier d'imag dans le code source HTML. Pour que cette reference soit correcte, le fjchier d'imag doit resider sur le site. Dans le cas contraire, Dreamweaver vous invite à copier le fjchier 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 selectionnent les bannières de manière aléatoire, puis affichent l'image de la bannière sélectionnée lors de l'affichage d'une page. Après avoir inséré une image, vous pouvez définir les options d'accessibilité aux balises d'image qui pourront être lues par les lecteurs d'écran destinés aux utilisateurs malvoyants. Ces attributes peuvent être modifiés dans le code HTML. Voutrouvrez undidacticiel consacre à l'insertion d'images à l'adresse www.adobe.com/go/vid0148_fr. 1 Placez le point d'insertion à l'endetroit où doit apparaître l'image dans la fenêtre de document, puis procédez de l'une des manières suivantes : - Dans la catégorie Commun du panneau Insertion, cliquez sur l'icone Images - Dans la catégorie Commun du panneau Insertion, cliquez sur le bouton Images et selectionnez l'icone Image. Lorsque l'icone Image est affichee dans le panneau Insertion, vous pouze la faire glisser vers la fenetre du document (ou la fenetre du mode Code si vous travailliez sur le code). - Choisissez Insertion > Image. - Faites glisser une image à partir du panneau Actifs (Fenêtre > Actifs) vers l'emplacement souhaité dans la fenêtre de document, puis passez à l'étape 3. - Faites glisser une image à partir du panneau Fichiers vers l'emplacement souhaité dans la fenêtre de document, puis passez à l' étape 3. - Faites glisser une image à partir du bureau vers l'emplacement désiré sur la page, puis passez à l'etape 3. 2 Dans la boîte de dialogue qui s'affiche, procédez de l'une des manières suivantes : - Sélectionnez Systeme de fichiers pourCHOISIR un fichier d'image. - Sélectionnez Source de données pourCHOISIR une source d'imaginedynamiques. - Cliquez sur le bouton Sites et serveurs pourCHOISIR un fichier d'imag dans un dosier distant de l'un de vos sites Dreamweaver. 3 Parcourez l'arborescence pour selectionner l'image ou la source de contenu à insérer. Tant que le document sur lequel vous travailliez n'a pas encore eté enregistré, Dreamweaver create automatiquement une reférence d'emplacement de fichier de type file://. Lorsque vous enregistrrez le document sur le site, Dreamweaver convertit cette reférence en indiquant un chemin relatif au document. Note: Lors de l'insertion d'images, vous pouvez également utiliser un chemin absolu vers une image qui resides sur un serveur distant (c'est-à-dire une image qui n'est pas disponible sur le disque dur local). Toutefois, si vous constazez des problèmes de performances lorsque vous travailliez, vous pouvez decide derésactiver l'affichage de l'image en mode Création en déslectionnant l'options Commandes > Afficher les fichiers externes. 4 Cliquez sur OK. La boite de dialogue Attributes d'accessibilité aux balises d'image s'affiche si elle a ete activee dans les prevalences (Edition > Prefenciences). 5 Tapez des valeurs dans les zones Texte secondaire et Description longue, puis cliquez sur OK. Dans la zone Texte secondaire, entrez un nom ou une brève description de l'image. Le lecteur d'écran lit les informations que vous entrez ici. N'entrez pas plus de 50 caractères. Pour de plus longues descriptions, entrez只想, dans la zone de texte Description longue, un lien vers un fjichier donnant davantage d'informations à propos de l'image. Dans la zone de texte Description longue, saisissez l'emplacement du filchier à afficher lorsqu'elutilisateur clique sur l'image ou cliquez sur l'icone du dossier pour naviguer jusqu'à un filchier. Cette zone de texte fournit un lien vers un filchier qui concerne ou donne davantage d'informations sur l'image. Note: Voup cien nre les inomations dans une seule zone de texe ou les deux, selon vos besoins. Le lecteur d'ecran lit l'attribut Alt de I'age. Note: Si vous cliquez sur Annuler, l'image s'affiche dans le document, mais Dreamweaver ne lui associe ni balises ni attributs d'accessibilité. 6 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), définièsez les propriétés de l'image. More Help topics "Creation d'images dynamiques" on page 608 "Cartes graphiques" on page 299 "Optimisation de l'espace de travail pour la conception de pages accessibles" on page 721 "Définition des propriétés de page" on page 221 Didacticiel sur l'insertion d'images Définition des propriétés de l'image L'inspecteur Propriétés Images vous permet de définir les propriétés d'une image. Pour voir toutes les propriétés illustrées, cliquez sur la flèche d'agrandissement, dans le coin inférieur droit de l'inspecteur Propriétés. 1 Choisissez la commande Fenetre > Propriétés pour afficher l'inspecteur Propriétés pour une image sélectionnée. 2 Dans la zone de texte située au-dessous de l'image miniature, définissez un nom d'image auquel vous pouvez faire référence lors de l'utilisation d'un comportement Dreamweaver (tel que Permuter une image) ou lors de l'utilisation d'un langage de script tel que JavaScript ou VBScript. 3 Définisse les options de l'image. Let H La largeur et la hauteur de l'image, en pixels. Dreamweaver met automatiquement a jour ces zones de texte avec les dimensions d'origine de l'image lorsque vous inserez une image dans une page. Si vous définissez pour L (largeur) et H (hauteur) des valeurs qui ne correspondent pas aux dimensions réelles de l'image, celle-ci risque de ne pas s'afficher correctement dans un navigateur (Pour revenir aux valeurs d'origine, cliquez sur les étiquettes de zone de texte L et H ou sur le bouton Rétabir la taille originale de l'image qui apparait à droite des zones de texte L et H une fois que vous avez tapé de nouvelles valeurs. Note: Vous pouvez modifier ces valeurs pour modifier l'échelle d'affichage de cette instance de l'image, mais cette technique ne diminuera pas le temps de chargement, puisque le navigateur charger la totalité de l'image à son échelle normale avant de la réduire. Pour réduire le temps de téléchargement et être sur que toutes les instances de l'image sont affichées aux mêmes dimensions, utilisez une application de retouche d'image pour adapter les proportions de l'image. Src Specifie le fichier source de l'image. Tapez le chemin d'accès ou cliquez sur l'icone du dossier pour trouver le fichier source et le selectionner. Lien Spécifie un lien hypertexte pour l'image. Faites glisser l'icone Pointer vers un fisier dans le panneau Fichiers, cliquez sur l'icone de dossier pour rechercher et selectionner un document de votre site ou tapez directement l'URL. Alignment Align e image et le texte sur la meme ligne. Sec Specified le texte seconde qui apparaître à la place de l'image dans les navigateurs de type texte seulement, ou dans les navigateurs dont I'utilisateur a désactivé le téléchargement automatique des images. Pour les utilisateurs malvoyants qui utilisent un synthétiseur vocal avec un navigateur en mode texte, le texte est lu. Dans certains navigateurs, ce texte apparait également lorsque le pointeur se trouve sur l'image. Nom de la carte et outils Zone reactive Permettent de nommer et de creer une carte graphique cote client Espace V. et Espace H. Ajoutent un espace, en pixels, le long des côtes de l'image. Espace V ajoute un espace le long des bords supérieur et inférieur d'une image. Espace H ajoute un espace le long des bords gauche et droit d'une image. Cible Spécifie la fenêtre ou le cadre dans lequel la page liée devrait être chargée. Cette option n'est pas disponible lorsque l'image n'est pas liée à un autre fidchier. Les noms de tous les cadres dans le jeu de cadres actuel s'affichent dans la liste Cible. Vous pouvez égalementCHOISIR parmi les noms de cible réservés suivants : _blank charge le fichier lié dans une nouvelle fenêtre, sans nom, du navigateur. parent charge le fichier lie dans le jeu de cadres parent, ou dans la fenetre parente du cadre contenant le lien. Si le cadre contenant le lien n'est pas imbriqué, le document lié sera chargé dans la fenetre de base du navigateur. _self charge le fichier lié dans le même cadre, ou dans la même fenêtre, que le lien. Cette cible étant cette par défaut, vous n'avez généralement pas à la spécifique. _top charge le fichier lié dans la fenêtre de base du navigateur, supprimant ainsi tous les cadres. Bordure Corresponds to la largeur, en pixels, de la bordure de l'image. La valeur par defaut est Pas de bordure. Modifier Lance l'éditeur d'image que vous avez indiqué dans les préférences d'éditeurs externes et ouvre l'image sélectionnée. Modification des paramètres d'une image affiche la boîte de dialogue Aperçu d'image, où vous pouvez optimiser l'image. Recadrer Permet de rognner une image en supprimant les zones indesirables de l'image selectionnee. Rééchantillonner Permet de rééchantillonner une image redimensionnée et d'en améliorer la qualité dans ses nouvelles taille et forme. Luminosité et contraste Ajuste la luminosité et le contraste d'une image Accentuer Permet d'ajuster la nettete d'une image. Rétablir la taille Ramène les valeurs L et H à la taille originale de l'image. Ce bouton apparait à droite des zones de texte L et H lorsque vous ajustez les valeurs de l'image sélectionnée. Modification des attributs d'accessibilité d'une image dans le code Si you ave insere des attributs d'accessibilité pour une image, you pouze modifier ces valeurs dans le code HTML. 1 Sélectionnéz l'image dans la fenêtre de document. 2 Effectuez l'une des opérations suivantes : - Modifiez les attributs de l'image en mode Code. - Cliquez du bouton droit de la souris (Windows) ou en maintainant la touche Ctrl enfonnée (Macintosh), puis désissez Modifier la balise. - Modifie la valeur Alt dans l'inspecteur Propriétés. Alignment d'une image Voupuez aligner une image sur du texte, sur une autre image, sur un plug-in ou sur d'autres elements de la ligne. Vou puez egalement definir l'alignement horizontal d'une image. 1 Sélectionnéz l'image dans le mode Création. 2 Définissez les attributs d'alignement de l'image dans linspecteur Propriétés, à l'aide du menu Alignment. Vous pouvez définir l'alignement selon d'autres éléments situés dans le même paragraphe ou la même ligne. Note: Le langage HTML ne permet pas de placer un texte autour des contours d'une image, contrairement à certaines applications de traitement de texte. Les options d'alignement sont les suivantes : Par défaut Provoque un alignment sur la ligne de base. La valeur par défaut varie selon le navigateur du visiteur du site. Ligne de base et Bas Alignment la ligne de base du texte (ou de tout autre élément du même paragraphe) sur le bas de l'objet sélectionné. Haut Aligne le haut d'une image sur le haut de l'élément le plus élevé (image ou texte) dans la ligne. Milieu Aligne le milieu de l'image avec la ligne de base de la ligne. Haut du texte Aligne le haut de l'image avec le haut du plus grand caractère de la ligne de texte. Milieu absolu Aligne le milieu de l'image avec le milieu du texte dans la ligne actuelle. Bas absolu Aligne le bas de l'image avec le bas de la ligne de texte (y compris les jambages inférieurs comme dans la lecture g ). Gauge Aligne l'image selectionnée sur la marge de gauche et place le texte qui l'entoure à sa droite. Si le texte aligné à gauche precede l'objet sur la ligne, les objets alignés à gauche sont généralement placés automatiquement sur une nouvelle ligne. Droite Aligne l'image sur la marge de droite et place le texte qui l'entoure à sa gauche. Si le texte aligné à droite précédé l'objet sur la ligne, les objets alignés à droite sont généralement placés automatiquement sur une nouvelle ligne. Redimensionnement visuel d'une image Dans Dreamweaver, vous pouvez redimensionner visuellement certains éléments comme des images, des plug-ins, des fichiers Shockwave ou SWF, des applets et des contrôleux ActiveX. Le redimensionnement visuel d'une image permet de mistrux voir comment l'image affecte la mise en forme en differentes dimensions. Il n'adapte pas les dimensions de l'image aux proportions que vous avez spécifiées. Si vous redimensionnez visuèlement une image dans Dreamweaver, mais que vous n'utilise pas d'application de retouché d'image ( comme Adobe Fireworks) pour en adapter les proportions aux dimensions désirées, le navigateur de l'utilisateur devra le faire lorsque la page sera chargée. Cela risque d'entrainer 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 sur que toutes les instances de l'image sont affichées aux mêmes dimensions, utilisez une application de retouché d'image pour adapter les proportions de l'image. Lorsque you redimensionnez une image dans Dreamweaver, vous pouvez la reechantillonner afin de l'adapter à ses nouvelles dimensions. Le reechantillonnage ajoute ou enlève des pixels d/images JPEG ou GIF redimensionnées afin qu'elles correspondent le moins possible à l'aspect des images originales. Le reechantillonnage d'une image réduit la taille de son fichier, ce qui permet d'en accélérer le téléchargement. More Help topics "Modification d/images dans Dreamweaver" on page 255 Redimensionnement visuel d'un élément 1 Sélectionnéz l'élement (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'élement, et dans le coin inférieur droit. Si ces poignées n'apparaissent pas, cliquez à l'extérieur de l'élement à redimensionner, puis selectionnez-le à nouveau ou cliquez sur la balise correspondante dans le selector de balises. 2 Pour redimensionner l'objet, utilisez l'une des méthodes suivantes : - Pour ajuster la largeur de l'objet, déplacez la poignée à droite de la seLECTION. - Pour ajuster la hauteur de l'élément, déplacez la poignée au bas de la sélection. Pour ajuster simultanement la largeur et la hauteur de l'elément, faites glisser la poignee de l'angle de la selection. Pour conserver les proportions de l'elément (rapport largeur/hauteur) lorsque vous modifiees ses dimensions, faites glisser la poignee de l'angle de la selection tout en appuyant sur la touche Maj. - Pour ajuster la largeur et la hauteur d'un élément à une taille précise, (par exemple, 1x1 pixel), utilisez l'inspecteur Propriétés pour entrer une valeur numérique. Les éléments peuvent être redimensionnés visuèlement à une taille minimale de 8 x 8 pixels. 3 Pour rétablit la taille originale d'un élément redimensionné, supprimez les valeurs des zones de texte L et H ou cliquez sur le bouton Rétablit la taille dans l'inspecteur Propriétés. Rétablissement de la taille originale d'une image Cliquez sur le bouton Rétabirl la taille C dans l'inspecteur Propriétés des images. Rééchantillonnage d'une image redimensionnée 1 Redimensionnez l'image de la maniere décrite ci-dessus. 2 Cliquez sur le bouton Reéchantillonner dans l'inspecteur Propriétés des images. Note: Vous ne pouvez pas rééchantillonner les espaces réservés pour une image ou les éléments autres que les images bitmap. Insertion d'un espace réservé pour l'image Un espace réservé pour une image est un graphique que vous utilisez jusqu'à ce que le dessin final soit prêt pour être ajouté à une page Web. Vous pouvez définir la taille et la couleur de l'espace réservé et lui donner une étiquette de texte. 1 Dans la fenêtre de document, placez le point d'insertion à l'endetroit où vous pouze insérer un espace réservé pour un graphique. 2 Cliques sur Insertion > Objects image > Espace réservé pour l'image. 3 Dans la zone de texte Nom (facultatif), tapez le texte que vous souhaitez voir appararaitre comme étiquette de l'espace réservé pour l'image. Laissez la zone de texte vide si vous ne pouze pas faire appararaitre d'étiquette. Le nom doit commencer par une dette et ne peutContainir que des lettres ou des chiffres : les espaces et les caractères ASCII étendu ne sont pas autorisés. 4 (Obligatoire) Dans les zones de texte Largeur et Hauteur, saisissez un nombre pour définir la taille de l'image en pixels. 5 (Facultatif) Pour Couleur, procedede l'une des manieres suivantes pour appliquer une couleur : Utilisez le sélection de couleur pour sélectionner une couleur. Entre la valeur hexadécimale de la couleur (par exemple #FF0000). Entrez le nom d'une couleur sécurisée pour le Web (par exemple rouge). 6 (Facultatif) Dans Texte secondaire, entrez une description de l'image pour les personnes utilisant un navigateur en mode texte. Note: Une balise image est insérée automatiquement dans le code HTML, avec un attribut src vide. 7 Cliquez sur OK. Les attributs de couleur et de taille ainsi que l'étiquette de l'espace réservé s'affichent comme suit : Lorsqu'ils sont visualisés dans un navigateur, le texte de l'étiquette et celui de la taille ne s'affichent pas. More Help topics "Redimensionnement visuel d'une image" on page 252 "Utilisation de Fireworks pour modifier les espaces réservés pour les images Dreamweaver" on page 382 Remplacement d'un espace réservé pour une image Un espace réservé pour l'image n'affiche pas d'image dans un navigateur. Avant de publier cette site, il convient de remplaçer tous les espaces réservés pour une image que vous avez ajoutés par des fischiers d'image adaptés au Web, tels que des images GIF ou JPEG. Si vous possédez Fireworks, vous pouvez创建工作 un nouveau graphique à partir d'un espace réservé pour image dans Dreamweaver. La nouvelle image reprend la même taille que celle de l'espace réservé pour l'image. Vous pouvez modifier l'image, puis la remplacer dans Dreamweaver. 1 Dans la fenêtre Document, précé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 selectionner, puis dans l'inspecteur Propriétés (Fenêtre > Propriétés), cliquez sur l'icone du dossier à côté de la zone de texte Src. 2 Dans la boîte de dialogue Source de l'image, localisez l'image que vous poulez utiliser pour replacer l'espace réservé, puis cliquez sur OK. More Help topics "Utilisation de Fireworks pour modifier les espaces réservés pour les images Dreamweaver" on page 382 Définition des propriétés de l'espace réservé pour l'image Pour définit les propriétés d'un espace réservé pour l'image, Sélectionnez l'espace réservé dans la fenêtre de document, puis choisissez la commande Fenêtre > Propriétés pour afficher l'inspecteur Propriétés. Cliquez sur la flèche d'aggrandissement dans l'angle inférieur droit pour afficher toutes les propriétés. Utilisez l'inspecteur Propriétés pour définir un nom, une largeur, une hauteur, une source d'image, une autre description de texte, un alignement ou une couleur pour l'espace réservé pour l'image. Dans l'inspecteur Propriétés de l'espace réservé, la zone de texte grise et la zone de texte Aligner sont désactivées. Vous pouvez définir ces propriétés dans l'inspecteur Propriétés de l'image lorsque vous remplacez l'espace réservé par une image. Parmi les options suivantes, définissez celles de votre choix : Let H Definissent la largeur et la hauteur de l'espace réserved pour l'image, en pixels. Src Specifie le fichier source de l'image. Pour un espace réservé pour une image, cette zone de texte est vide. Cliquez sur le bouton Parcourir pour selectionner une image à utiliser en remplacement du graphique de l'espace réservé. Lien Spécifie un lien hypertexte pour l'espace réservé de l'image. Faites glisser l'icone Pointer vers un fisier dans le panneau Fichiers, cliquez sur l'icone de dossier pour rechercher et selectionner un document de votre site ou tapez directement l'URL. Sec Spécifiche le texte seconde qui apparaître à la place de l'image dans les navigateurs de type texte seulement, ou dans les navigateurs dont l'utilisateur a déactivé le téléchargement automatique des images. Pour les utilisateurs malvoyants qui utilisent un synthétiseur vocal avec un navigateur en mode texte, le texte est lu. Dans certains navigateurs, ce texte apparait également lorsque le pointeur se trouve sur l'image. Créer Permet de lancer Fireworks pour creer une image de remplacement. Le bouton Créer est désactivé sauf si Fireworks est également installé sur votre ordinateur. Rétablir la taille Ramène les valeurs L et H à la taille originale de l'image. Couleur Spécifie une couleur pour l'espace réservé de l'image. More Help topics "Utilisation de Fireworks pour modifier les espaces réservés pour les images Dreamweaver" on page 382 Modification d'images dans Dreamweaver Vou puez réechantillonner, recadrer, optimiser et accentuer les images dans Dreamweaver. Vous pouvez également régler leur luminosité et leur contraste. Fonctions de retouche d'image Dreamweaver comprend des fonctions basiques de retouche d'image, ce qui vous évite de devoir lancer une application externe pour effectuer cette tâche (par exemple, Fireworks ou Photoshop). Les outils de retouché d'image de Dreamweaver sont conçus pour un travail simplifié avec les concepteurs de contenu responsables de la création des fischiers d'image utilisés sur votre site Web. Note: Il n'est pas nécessaire d'installer Fireworks ou d'autres applications de retouche d'image sur votre ordinateur pour utiliser les fonctions de retouche d'image de Dreamweaver. Choisissez Modifier > Image. Définissez l'une des fonctions de retouché d'image Dreamweaver suivantes : Rééchantillonner Ajoute ou enlève des pixels d'images JPEG ou GIF redimensionnées afin qu'elles correspondent le moins possible à l'aspect des images originales. Le rééchantillonnage d'une image réduit la taille de son fichier, ce qui permet d'en accélérer le téléchargement. Lorsque you redimensionnez une image dans Dreamweaver, you pouze la reechantillonner afin de l'adapter à ses nouvelles dimensions. Lorsqu'un objet bitmap est reechantillonné, 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 reechantillonnage d'une image à une résolution supérieure provoque une faible perte de qualité. Le reechantillonnage à une résolution inférieure, en revanche, provoque toujours une perte de données et donne une moins bonne qualité. Recadrer Permet de réduire la surface des images. En général, il est utile pourmettre en évidence le sujet de l'image et supprimer les aspects indésirables qui entourent le centre d'intérêt de l'image. Luminosite et contraste Modifie la luminosite et le contraste des pixels qui compose l'image. Ceci affecte les surbrillances, les ombres et les demi-tons d'une image. Cette fonction est utilisée pour corriger les images trop sombres ou trop claires. Accentuer Ajuste la mise au point d'une image en augmentant le contraste des bords sur l'image. Lorsque vous scannez une image ou que vous prenez une photo numérique, la plupart des logiciels de capture d'images estompent par défaut les bords des objets photographiés. Cela empêche les détails extrémement précis de se perdre dans les pixels dont sont constituées les images numériques. Cependant, il est souvent nécessaire d'accertuer 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. Note: Les fonctions de modification d'images de Dreamweaver s'appliquent uniquement aux formats de fichier JPEG et GIF. Les autres formats de fichiers d'image bitmap ne peuvent pas etre modifiés à l'aide de ces fonctions. Recadrage d'une image Dreamweaver permit de recadrer (ou rogner) les images bitmap. Note: Lorsque vous recadrez une image, le fichier d'image source est modifié sur le disque. Il peut donc s'avérer utile de conserver une copie de sauvégarde du fichier d'image au cas où vous auriez besoin de revenir à l'image d'origine. 1 Ouvrez la page qui contient l'image à recadrer, sélectionné l'image et procédéz de l'une des manières suivantes : - Cliquez sur l'icone Recadrer dans l'inspecteur Propriétés des images. - Choisissez Modifier > Image > Recadrer. Des poignées de recadrage apparaisent 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 selection. 4 Une boite de dialogue vous informe que le filchier image que vous recadrez sera modifie sur le disque. Cliquez sur OK. Chaque pixel de l'imaget bitmap situé hors de la zone limite est supprimé mais les autres objets de I'image ne sont pas affectés. 5 Vérifiez à l'aide de l'aperçu que l'image correspond à vos attentes. Si ce n'est pas le cas, choisissez Edition > Annuler Recadrer pour revenir à l'image d'origine. Note: Voupvez annuler l'effect de la commande Recadrer (et revenir au fichier d'image d'origine) jusqu'àu moment ou vous quittez Dreamweaver ou alors modifiez le fichier dans une application de retouched image. Optimisation d'une image Vou pouvez optimiser des images sur vos pages Web dans Dreamweaver. 1 Ouvrez la page qui contient l'image à optimiser, Sélectionnez l'image et procédez de l'une des manières suivantes : - Cliquez sur le bouton de modification des paramètres de l'image dans l'inspecteur Propriétés de l'image. - Choisissez Modifier > Image > Optimiser. 2 Apportez les modifications dans la boîte de dialogue Aperçu d'image, puis cliquez sur OK. Accentuation d'une image L'accentuation augmente le contraste des pixels autour des objets pour augmenter la définition de l'image et obtenir une meilleure netteté. 1 Ouvrez la page qui contient l'image à accentuer, Sélectionnez l'image et procédez de l'une des manières suivantes : - Cliquez sur le bouton Accentuer dans l'inspecteur Propriétés des images. - Choisissez Modifier > Image > Accentuer. 2 Pour spécifique 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 nettete de l'image à l'aide de la boîte de dialogue Accentuer, vous pouvez afficher un aperçu de l'image modifiée. 3 Lorsque vous estes satisfait de l'image, cliquez sur OK. 4 Enregistrez vos modifications enCHOIsant Fichier Enregistrer ou revenez a l'imagd'origine en choisissant Edition > Annuler Accentuer. Note: Vous pouvez annuler l'effet de la commande Accentuer (et revenir au fichier d'image d'origine) uniquement avant d'enregistrer la page qui contient l'image. Une fois que vous avez enregistré la page, les modifications apportées à l'image sont définitivement enregistrées. Ajustement de la luminosité et du contraste d'une image La fonction Luminosite/Contraste modifie la luminosite ou le contraste des pixels qui compose l'image. Ceci affecte les surbrillances, les ombres et les demi-tons d'une image. Cette fonction est utilisée pour corriger les images tropsons ou trop claires. 1 Ouvrez la page qui contient l'image à ajuster, Sélectionnéz l'image et procédez de l'une des manières suivantes : - Cliquez sur le bouton Luminosité/Contraste dans l'inspecteur Propriétés des images. - Choisissez Modifier > Image > Luminosite/Contraste. 2 Déplacez les curseurs de luminosité et de contraste pour modifier les valeurs à votre convenance. Les valeurs sont comprises entre -100 et 100. 3 Cliquez sur OK. Creation d'une image survolée Vou puez inserer des images survolées dans votre page. Une image survolée est une image qui, lorsqu'elle est visualisée dans un navigateur, change lorsque le pointeur vient se placer au-dessus d'elle. Voude nevez disposer de deux images pour creer l'image survolée : l'image principale (affichee au chargement de la page) et l'imagse secondaire (qui apparait lorsque le pointeur est placé au-dessus de l'imagce principale). Les deux images utilisées doivent avoir les mêmes dimensions ; si ce n'est pas le cas, Dreamweaver redimensionne la seconde image en fonction de la taille de la première. Les images survolées sont automatiquement définies pour répondre à l'évenement onMouseOver. Vous pouvez configurer une image pour qu'elle réponde à un événement différent (par exemple, un cli c de souris) ou modifier une image survolée. Voutrouvez un didacticiel consacré à la creation d'images survolées à l'adresse www.adobe.com/go/vid0159_fr. 1 Dans la fenetre de document, placez le point d'insertion à l'endetroit où vous pouze insérer l'image survolée. 2 Insérez l'image survolée à l'aide de l'une des méthodes suivantes : - Dans la catégorie Commun du panneau Insertion, cliquez sur le bouton Images puis selectionnez l'icone Image survolée. Lorsque l'icone Image survolée s'affiche dans le panneau Insertion, vous pouvez la faire glisser jusqu'à la fenêtre de document. - Sélectionnez Insertion > Objects image > Image survolée. 3 Définisse les options, puis cliquez sur OK. Nom de l'image Nom de l'image survolée. Image d'origine L'image qui doit s'afficher au chargement de la page. Entrez le chemin d'accès dans la zone de texte ou cliquez sur Parcourir et selectionné z'image. Image survolée L'image à afficher lorsqué le pointeur est placé au-dessus de l'image originale. Entrez le chemin d'accès de l'image ou cliquez sur Parcourir pour la sélectionner. Precharger l'image survolée Précharge les images dans la mémoire cache du navigateur afin d'éviter tout-delai lorsque vous faites passer le pointeur de la souris par-dessus l'image. Texte secondaire (Facultatif) Texte qui déscrit l'image à l'intention des personnes utilisant un navigateur en mode texte. Si clique, aller à l'URL Le fjichier à ouvrir lorsqu'un utiliser clique sur l'image survolée. Entrez le chemin d'accès du fjichier ou cliquez sur Parcourir pour le selectionner. Note: Si vous ne définisse pas un lien pour l'image, Dreamweaver insère un lien nul (#) dans le code source HTML auquel le comportement de survol est attaché. Si vous supprimez le lien nul, l'image survolée ne fonctionne plus. 4 Choisissez Fichier > Apercu dans le navigateur ou appuyez sur la touche F12. 5 Dans le navigateur, placez le pointeur au-dessus de l'image d'origine pour voir l'image survolée. Note: Il est impossible de voir l'effect d'une image survolée dans le mode Création. More Help topics "Application du comportement Permuter une image" on page 378 Didactiel sur les images survolées Utilisation d'un éditeur d'image externe Dans Dreamweaver, vous pouvez ouvrir une image sélectionnée dans un éditeur d'image externe. Lorsque vous revenez dans Dreamweaver après avoir enregistré le fjichier d'image modifié, toutes les modifications apportées à l'imagè sont visibles dans la fenêtre de document. Vous pouvez définir Fireworks comme principal editor d'image. Vous pouvez également définir quels types de fjichier un editeur peut ouvrir et vous pouvez selectionner plusieurs editeurs d'image. Par exemple, vous pouvez définir des préférences afin de démarrer Fireworks pour modifier les fjichiers GIF et de lancer un editeur d'image différent pour modifier les fjichiers.JPG ou JPEG. More Help topics "Utilisation de Photoshop et Dreamweaver" on page 387 "Utilisation de Fireworks et Dreamweaver" on page 381 "Lancement d'un éditeur externe pour des fichiers multimédias" on page 273 Démarrage de l'éditeur d'image externe Effectuez l'une des opérations suivantes : - Double-cliquez sur l'image à modifier. - Cliquez avec le bouton droit de la souris (Windows) ou en Maintenant la touche Contrôle enconcée (Macintosh) sur l'image à modifier,CHOISSEZ L'option Modifier avec > Parcourir et selectionnee un editeur. - Sélectionnéz l'image à modifier, puis cliquez sur Modifier dans l'inspecteur Propriétés. Double-cliquez sur le fichier d'imag dans le panneau Fichiers pour lancer l'edteur d'imag principal. Si vous n'vez pas indiqued editeur d'imag, Dreamweaver execute l'edteur par defaut de ce type de fichier. Note: Lorsque vous ouvrez directement une image à partir du panneau Fichiers, les fonctionnalités d'intégration de Fireworks sont inopérantes; Fireworks n'ouvre pas le fjchier original PNG. Pour utiliser ces fonctionnalités d'intégration de Fireworks, ouvre les images à partir de la fenetre de document. Si l'image mise à jour n'apparait pas une fois de return dans la fenêtre Dreamweaver, sélectionnez l'image et cliquez sur le bouton Actualiser dans l'inspecteur Propriétés. Définition d'un主编 d'image externe pour un type de fichier existant Vou puez selectionner l'éditeur d'image à utiliser pour ouvrir et modifier les fichiers graphiques. 1 Ouvrez la boite de dialogue Types de fichiers/Editeurs en effetuant l'une des opérations suivantes : - Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh) et Sélectionnez la catégorie Types de fichiers/Editeurs dans la liste de gauche. - Choisissez la commande Edition > Modifier avec éditeur externe, puis sélectionnez Types de fichiers/Editeurs. 2 Dans la liste Extensions, Sélectionnez l'extension de filchier pour laquelle définir un éditeur externe. 3 Cliquez sur le bouton Ajouter (+) au-dessus de la liste Editeurs. 4 Dans la boite de dialogue Sélectionner un éditeur externe, recherche l'application à démarrer en tant qu'éditeur pour ce type de fichier. 5 Dans la boite de dialogue Preférences, cliquez sur Principal si vous souhaitez que cet éditeur soit l'éditeur principal pour ce type de fichier. 6 Si vous souhaitez configurer un éditeur supplémentaire pour ce type de fichier, répétez les étapes 3 et 4. Dreamweaver utilise automatique l'éditeur principal lorsque vous modifie ce type d'image. Vous pouvez désirer l'un des autreséditeurs figurant dans la liste, à partir du menu dérouulant de l'image, dans la fenêtre de document. Ajout d'un nouveau type de fichier à la liste Extensions 1 Ouvrez la boite de dialogue Types de fichiers/Editeurs en effetuant l'une des opérations suivantes : Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh) et Sélectionnez la catégorie Types de fichiers/Editeurs dans la liste de gauche. Choisissez la commande Edition > Modifier avec éditeur externe, puis sélectionnez Types de fichiers/Editeurs. 2 Dans la boîte de dialogue Types de fichiers/Editeurs, cliquez sur le bouton Ajouter (+) au-dessus de la liste Extensions. Une zone de texte s'affiche dans la liste Extensions. 3 Tapez l'extension de fichier pour le type de fichier que vous pouze ouvrir avec l'éditeur. 4 Pour selectionner un éditeur externe pour le type de fichier, cliquez sur le bouton Ajouter (+) au-dessus de la liste Editeurs. 5 Dans la boite de dialogue qui apparait alors, selectionnez l'application à utiliser pour modifier ce type d'image. 6 Cliquez sur Principal si vous désirez que ce programme soit l'éditeur principal pour ce type d'image. Modification d'une préférence d'éditeur existante 1 Ouvrez la boite de dialogue Types de fichiers/Editeurs en effetuant l'une des opérations suivantes : - Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh) et Sélectionnez la catégorie Types de fichiers/Editeurs dans la liste de gauche. - Choisissez la commande Edition > Modifier avec éditeur externe, puis Sélectionnez Types de fichiers/Editeurs. 2 Dans la boite de dialogue Types de fichiers/Editeurs, selectionnez dans la liste Extensions le type de fichier que vous souhaitez modifier pour visualiser les editeurs actuellement définis. 3 Dans la liste Editeurs, selectionnez l'éditeur que vous désirez affecter à ce type de fichier, puis procédez de l'une des manières suivantes : - Cliquez sur le bouton Ajouter (+) ou Supprimer (-), au-dessus de la liste Editeurs, pour ajouter ou supprimer un éditeur. - Cliquez sur le bouton Rendre principal pour définir l'éditeur à lancer par défaut pour la retouche. Application de comportements aux images Vouss 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écifique aux images : Précharger les images, Permuter une image et Restaurer l'intervention d'images. Precharger les images Place dans la mémoire cache du navigateur les images qui ne sont pas immédiatement affichées lors du chargement de la page (par exemple, les images de substitution appelées par un comportement, un élément PA ou une fonction en JavaScript). Cela évite à l'utilisateur d'attendre que ces images soient charges, lorsqu'un événement déclenché leur apparition. Permuter une image Remplace une image par une autre, en modifient l'attribut SRC de la balise img. Utilisez cette action pour creer des substitutions de boutons et autres effets sur des images (y compris la substitution de plusieurs images à la fois). Restaurer l'image intervertie Rétablit la dernière intervention 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. Vouss pouze egalent utilise des comportements pour creer des systèmes de navigation plus sophistiqués, comme les menus de reroutage. More Help topics "Insertion d'un menu de reroutage" on page 297 "Application du comportement Permuter une image" on page 378 "Application du comportement Précharger les images" on page 374 Ajout d'une video Incorporation de videos aux pages Web (HTML5) HTML5 prend en charge les balises audio et video, permettant aux utilisateurs de dire des fichier audio et video dans un navigateur sans complément ni lecteur externe. Dreamweaver prend en charge les conseils de code permettant l'ajout de balises video et audio. Le mode En direct affiche la video, de façon à prévisualiser la video que vous incorporez à la page Web. Note: Bien que vous puissiez incorporer toute video à votre page Web, le mode En direct ne les affiche pas toujours toutes. Les balises audio et video sont prises en charge par Dreamweaver au moyen du module QuickTime d'Apple. Sous Windows, si le module QuickTime d'Apple n'est pas installé, la page Web n'affichera pas le contenu multimédia. Insertion de fichiers FLV Insertion de fichiers FLV Voupez inserer facilement des videos FLV dans vos pages Web sans avoir recours à l'outil de creation Flash. Vou nevez dispose d'un fjchier FLV codé avant de commencer. Dreamweaver insère un composant SWF qui affiche le fichier FLV. Dans un navigateur, ce composant affiche le fichier FLV sélectionné, ainsi qu'un jeu de contrôleles de lecture. Dreamweaver dispose des options suivantes pour proposer de la video FLV aux visiteurs de cette site : Vidéo en téléchargement progressif Telecharge le fichier FLV sur le disque dur du visiteur, puis lance sa lecture. Contrairement aux méthodes traditionnelles de fourniture de video par « téléchargement et lecture », le téléchargement progressif permet de lancer la lecture du fisier video avant la fin de son téléchargement. Vidéo en flux continu Diffuse en continu le contenu video et le lit sur une page Web après une courte période de mise en mémoire tampon, ce qui assure une lecture homogène. Pour activer la diffusion video en continu sur vos pages Web, vous doivent avoir accès à Adobe Flash Media Server. Voudevezdisposer d'un fichier FLVcodeavantd'utiliserce dernier dans Dreamweaver.Vouspuvezinsererlesfichier videocreesavecdeuxtypesdecodecs(technologiesdecompression/decompression)：SorensonSqueezeetOn2. Lorsque vous insérez un fjichier FLV, tout comme dans le cas d'un fjichier SDF ordinaire, Dreamweaver insère du code qui déetecte si l'utilisateur dispose d'une version appropriée de Flash Player pour voir la video. Si ce n'est pas le cas, la page affiche un contenu alternatif qui invite l'utilisateur à télécharger la version la plus récente de Flash Player. Note: Pour pouvoir visualiser un fjichier FLV, Flash Player en version 8 ou ultérieure doit être installé sur l'ordinateur de l'utilisateur. Si l'utilisateur ne dispose pas de la version requise de Flash Player, mais bien de Flash Player en version 6.0 r65 ou une version ultérieure, le navigateur affiche un programme d'installation express de Flash Player au lieu du contenu alternatif. Si l'utilisateur refuse l'installation express, la page affiche le contenu alternatif. Pour plus d'informations sur l'utilisation de video, consultez le Centre de technologie video à l'adresse www.adobe.com/go/flv_devcenter_fr. Insertion d'un fichier FLV 1 Choisissez Insertion > Medias > FLV. 2 Dans la boite de dialogue Insérer un fjichier FLV,CHOISSEZ Video en tellechargement progressif dans le menu Type de video. 3 Renseignez les autres sections de la boite de dialogue selon les besoiniers puis cliquez sur OK. Note: Microsoft Internet Information Server (IIS) ne traite pas les balises object imbriquées. Pour les pages ASP, Dreamweaver utilise du code object/embed imbriqué au lieu du code object imbriqué lors de l'insertion de fichiers SWF ou FLV. Définition des options pour la video en téléchargement progressif La boite de dialogue Insérer FLV permet de définir des options pour la remise par téléchargement progressif d'un fichier FLV inséré dans une page Web. 1 Choisissez Insertion > Medias > FLV (ou cliquez sur l'icone FLV de la catégorie Medias de la barre d'insertion Commun). 2 Dans la boite de dialogue Insérer FLV,CHOISSEZ Video a telchargement progressif dans le menu Type de video. 3 Définisse les options suivantes : URL Spécifie le chemin absolu ou relatif du fichier FLV. Pour spécifique un chemin relatif (par exemple, monchemin/mavideo.flv), cliquez sur le bouton Parcourir, accédez au fichier FLV et selectionnez-le. Pour spécifique un chemin absolu, tapez l'URL (par exemple, http://www.example.com/mavideo.flv) du fichier FLV. Enveloppe Définit l'aspect du composant video. Un aperçu de l'enveloppe sélectionnée apparait sous le menu contextual Enveloppe. Largeur Indique la largeur (en pixels) du fichier FLV. Cliquez sur le bouton Detecter la taille pour connaître la largeur exacte du fichier FLV. Si Dreamweaver ne peut pas déterminer la largeur, tapez une valeur. Hauteur Indique la hauteur (en pixels) du fichier FLV. Cliquez sur le bouton Detecter la taille pour connaître la hauteur exacte du fichier FLV. Si Dreamweaver ne peut pas déterminer la hauteur, tapez une valeur. Note: Total avec enveloppe indique la largeur et la hauteur du fichier FLV plus la largeur et la hauteur de l'enveloppe selectionnee. Respecter les proportions Préserve le rapport hauteur/largeur du composant video. Cette option est sélectionnée par défaut. Lecture automatique Indique si la lecture de la video doit demarrer ou non des l'ouverture de la page Web. Remboinage automatique Determine si le contrôle de lecture doit revenir en position de partir au terme de la lecture de la video. 4 Cliquez sur OK pour fermer la boite de dialogue et ajouter le contenu FLV à votre page Web. La commande Insérer FLV générale un fischié SWF de lecteur video et un fischié SWF d'habillage qui serviront à afficher votre contenu video sur une page Web. (Il est parfois nécessaire de cliquer sur le bouton Actualiser pour afficher les nouveaux fischiers dans le panneau Fichiers). Ces fischiers sont stockés dans le même répertoire que le fischié HTML auquel vous ajoutez du contenu video. Lorsque vous chargez la page HTML incluant le fischié FLV, Dreamweaver ces fischiers en tant que fischiers dépendants (à condition de cliquer sur Oui dans la boîte de dialogue Placer les fischiers dépendants). Définition des options pour la vente en flux continu La boîte de dialogue Insérer FLV permet de définir des options pour le téléchargement de video en flux contenu d'un fichier FLV inséré dans une page Web. 1 Choisissez Insertion > Medias > FLV (ou cliquez sur l'icone FLV de la categorie Medias de la barre d'insertion Commun). 2 Activez l'option Video en flux continu dans le menu contextuel Type de video. URI du serveur Indique le nom du serveur FCS, le nom de l'application et le nom de l'instance dans le formulaire. rthttp://www.example.com/app_name/instance_name. Nom du flux Spécifie le nom du fichier FLV à litre (par exemple, mavideo.flv). L'extension .flv est facultative. Enveloppe Définit l'aspect du composant video. Un aperçu de l'enveloppe sélectionnée apparait sous le menu contextual Enveloppe. Largeur Indique la largeur (en pixels) du fjichier FLV. Cliquez sur le bouton Detecter la tille pour connaître la largeur exacte du fjichier FLV. Si Dreamweaver ne peut pas déterminer la largeur, tapez une valeur. Hauteur Indique la hauteur (en pixels) du fichier FLV. Cliquez sur le bouton Detecter la taille pour connaître la hauteur exacte du fichier FLV. Si Dreamweaver ne peut pas déterminer la hauteur, tapez une valeur. Note: Total avec enveloppe indique la largeur et la hauteur du fichier FLV plus la largeur et la hauteur de l'enveloppe selectionnee. Respecter les proportions Préserve le rapport hauteur/largeur du composant video. Cette option est selectionnée par défaut. Vidéo en temps réel Indique si le contenu video est en temps réel ou non. Si vous scélectionnez Vidéo en temps réel, Flash Player diffuse en continu un flux video provenant de Flash Media Server. Le nom de la video en temps réel est le nom indiquedans la zone Nom du flux. Note: Si vous activez l'options Video en temps réel, seul le contrôle de volume apparait sur l'enveloppe du composant, car il est impossible d'intervenir sur de la video en temps réel. De plus, les options Lecture automatique et Rembobinage automatique sont sans effet. Lecture automatique Indique si la lecture de la video doit demarrer ou non des l'ouverture de la page Web. Remboinage automatique Determine si le contrôle de lecture doit revenir en position de partir au terme de la lecture de la video. Délambdaise en tampon Indique le délambda (en secondes) de mise en tampon avant le début de la lecture de la video. Par défaut, la mise en tampon est paramétrée sur 0, si bien que la lecture de la video début instantanément après un click sur le bouton de lecture. (Si l'option Lecture automatique est activée, la lecture de la video début dés que la connexion avec le serveur est établie.) Il peut également être nécessaire de définir un délambda de mise en mémoire tampon si vous fournissez une video dont le débit en bits est supérieur à celui de la connexion du visiteur du site ou lorsque le volume de traffic Internet risque d'engendrer des problèmes de bande passante ou de connectivité. Par exemple, si vous souhaitez envoyer 15 secondes de video à la page Web avant que cette dernière ne lisé la video, définissez le délambda de mise en mémoire tampon sur 15. 3 Cliquez sur OK pour fermer la boite de dialogue et ajouter le contenu FLV à votre page Web. La commande Insérer FLV générale un fjichier SWF de lecteur video et un fjichier SWF d'habillage qui serviront à afficher votre video sur une page Web. La commande générale également un fjichier main.asc que vous doivent transférer sur votre serveur Flash Media Server. (Il est parfois nécessaire de cliquer sur le bouton Actualiser pour afficher les nouveaux fjichiers dans le panneau Fichiers). Ces fjichiers sont stockés dans le même repertoire que le fjichier HTML auquel vous ajoutez du contenu video. Lorsque vous transférez sur votre serveur la page HTML contenant le fjichier FLV, n'oubliez pas de transférer également ces fjichiers SWF, et de transférer le fjichier main.asc sur votre serveur Flash Media Server. Note: Si un fichier main.asc se trouve déjà sur votre serveur, consultez l'administrateur de ce serveur avant de transférer le fichier main.asc généra par la commande Insérer FLV. Vou puez charger facilement tous les fichiers medias requis en selectionnant l'espace réservé pour le composant video dans la fenetre Document de Dreamweaver puis en cliquant sur le bouton Transférer multimédia dans l'inspecteur Propriétés (Fenetre > Propriétés). Pour voir la liste des fichiers nécessaires, cliquez sur le bouton Afficher les fichiers nécessaires. Note: Le bouton Transférer multimédia ne transfère pas le fichier HTML qui contient le composant video. Modification des informations de téléchargement de Flash Player Lorsque vous insérez un fjicher FLV sur une page, Dreamweaver insère du code qui détecte si l'utilisateur dispose de la version appropriée de Flash Player. Si ce n'est pas le cas, la page affiche du contenu alternatif afin d'inviter l'utilisateur à télécharger la version la plus réçente. Vous pouze à tout moment modifier ce contenu alternatif. Cette procédure s'applique également aux fichiers SWF. Note: Si l'utilisateur ne dispose pas de la version requise mais bien de Flash Player en version 6.0 r65 ou une version ultérieure, le navigateur affiche un programme d'installation express de Flash Player. Si l'utilisateur refuse l'installation express, la page affiche le contenu alternatif. 1 Dans la fenêtre de document, en mode Création, Sélectionnéz le fichier SWF ou FLV. 2 Cliquez sur l'icone représentant un oeil dans l'onglet du fichier SWF ou FLV. Vous pouvez également utiliser le raccourci CTRL + ] pour activer l'affichage du contenu alternatif. Pour rétablir l'affichage du fichier SWF/FLV, appuyez sur CTRL + [ jusqu'à ce que l'intégrality du contenu alternatif soit selectionnée. Ensuite, appuyez à nouveau sur CTRL + ]. 3 Modifiez le contentu comme vous le feriez pour tout autre contentu dans Dreamweaver. Note: Il est impossible d'ajouter des fichiers SWF ou FLV en tant que contenu alternatif. 4 Cliquez à nouveau sur l'icone représentant un œil pour revenir à l'affichage du fichier SWF ou FLV. Dépannage des fichiers FLV Cette section décrit quelques-unes des causes les plus courantes de problèmes avec les fichiers FLV. Affichage des problèmes dus à l'absence de fichiers associés Le code géné par Dreamweaver CS4 et versions ultérieures repose sur quatre fichiers dépendants, différents du fichier FLV proprement dit : swfobject_modified.js expressInstall.swf FLVPlayer_Progressive.swf Le fichier d'enveloppe (par exemple Clear_Skin_1.swf) Notez qu'il existe deux fichiers dépendants supplémentaires pour Dreamweaver CS4 et versions ultérieures par rapport à Dreamweaver CS3. Les deux premiers fichiers (swfobject_modified.js et expressInstall.swf) sont installés dans un dossier baptisé Scripts, que Dreamweaver creé à la racine de votre site s'il n'existe pas. Les deux autres fichiers (FLVPlayer_Progressive.swf et le fichier d'enveloppe) sont installés dans le même dossier que la page à laquelle le fichier FLV est incorpore. Le fichier d'enveloppe contient les contrôle du fichier FLV. Son nom dépend de l'enveloppe可以选择 dans les options décrites dans l'aide de Dreamweaver. Par exemple, si vous désissiez Clear Skin, le fichier se nomme Clear_Skin_1.swf. Les quatre fichiers dépendants DOIVENT est réchéargés sur votre serveur distant pour que le fjchier FLV s'affiche correctement. L'oubli du téléchargement de ces fichiers est la cause la plus courante des erreurs d'exécution de fichiers FLV sur une page Web. Si l'un des fichiers manque, un « carré blanc » risque de s'afficher sur la page. Pour garantir que vous avez bien telécharge tous les fichiers dépendants, utilisez le panneau Fichiers de Dreamweaver pour telécharger la page ou figure le filchier FLV. Lorsque vous teléchargez la page, Dreamweaver vous demande si vous pouze telécharger les fichiers dépendants (sauf si vous avez désactivé cette option). Cliquez sur Oui pour telécharger les fichiers dépendants. Problèmes d'affichage lors d'un aperçu local des pages Les mises à jour de la sécurité de Dreamweaver CS4 vous empêchent d'utiliser la commande Aperçu dans le navigateur pour tester une page compteant un fisier FLV incorpore, sauf si vous définissez un serveur d'évaluation local dans votre définition de site Dreamweaver et employez ce serveur d'évaluation pour prévisualiser la page. Normalement, vous n'avez besoin d'un serveur d'évaluation que si vous développpez des pages avec ASP, ColdFusion ou PHP (voir "Configuration de l'ordinateur pour le développement d'applications" on page 557). Si vous créEZ des sites Web qui n'employent que HTML et que vous n'vez pas définir de serveur d'évaluation, une pression sur F12 (Windows) ou Option+F12 (Macintosh) entraine l'affichage de contrôle d'enveloppe incohérients. Pour résoudre le problème, définiSEEZ le serveur d'évaluation et utilisez-le pour prévisualiser votre page, ou chargez vos fichiers sur un serveur distant et visualisez-les sur celui-ci. Note: Il se peut que les paramètres de sécurité soient également responsables de l'impossibilité de prévisualiser du contenu FLV local, mais Adobe n'a pas été en mesure de le confirmer. Vous pouvez tenter de modifier vos paramètres de sécurité afin de voir si le problème est résolu. Pour plus d'informations sur la modification de vos paramètres de sécurité, consultez la Tech Note 117502. Autres causes potentielles de problèmes avec les fichiers FLV Si vous éprouvez des difficultés à prévisualiser localement, assurez-vous que l'option Aperçu avec fichier-temporaire est bien désactivée dans la section Edition > Préférences > Aperçu dans le navigateur. Assurez-vous de bien disposer de la version la plus recente du complément Flash Player. Faites preuve de prudence lorsque vous déplacez des fischiers et des dossiers à l'extérieur de Dreamweaver. Lorsque vous déplacez des fischiers et dossiers à l'extérieur de Dreamweaver, Dreamweaver ne peut pas garantir l'exactitude des chemins d'accès aux fischiers associés à un filier FLV. Vous pouvez remplaner provisoirement le fichier FLV qui pose probleme par un fichier FLV dont vous etes sur qu'il fonctionne. Si le fichier FLV de remplacement fonctionne, c'est que le probleme reside dans le fichier FLV d'origine et n'est pas du a votre navigateur ni a l'ordinateur. Modification ou suppression d'un composant FLV Vous pouvez modifier les paramètres de la video sur votre page Web en sélectionnant l'espace réservé pour composant video dans la fenêtre de document de Dreamweaver et en utilisant l'inspecteur Propriétés. Vous pouvez également supprimer le composant video puis le reinsérer à l'aide de la commande Insertion > Médias > FLV. Modification du composant FLV 1 Dans la fenêtre du document Dreamweaver, sélectionnez l'espace réservé pour le composant video en cliquant sur l'icone FLV au centre de l'espace réservé. 2 Ouvrez l'inspecteur Propriétés (Fenêtre > Propriétés) et apportez les modifications désirées. Note: Il est impossible de modifier le type de video (de téléchargement progressif à diffusion en continu, par exemple) dans l'inspecteur Propriétés. Pour modifier le type de video, supprimez le composant FLV puis réinsérez-le enCHOISANT Insertion > Medias > FLV. Suppression du composant FLV Dans la fenêtre du document Dreamweaver, Sélectionnez l'espace réservé pour le composant FLV et appuyez sur la touche Suppr. Suppression du code de détention FLV A partir de la version CS4 de Dreamweaver, Dreamweaver insère directement un code de détction de Flash Player dans la balise object qui contient le fisier FLV. Par contre, jusqu'à la version CS3 de Dreamweaver, le code de détction se trouve en dehors de la balise object du fisier FLV. Dès lors, si vous voulez supprimer des fisiers FLV de pages créées à l'aide de Dreamweaver CS3 ou une version plus ancienne, vous doivent supprimer les fisiers FLV puis utiliser la commande Supprimer la détction FLV afin de supprimer également le code de détction. Sélectionnez Commandes > Supprimer la détction Flash Video. Insertion de fichiers SWF A propos des types de fichiers FLA, SWF et FLV Avant d'utiliser Dreamweaver pour insérer du contenu créé à l'aide d'Adobe Flash, familiarisez-vous aux types de fichiers suivants : Fichier FLA (.fla) Fichier source pour tout projet, créé dans l'outil de création Flash. Ce type de fichier peut uniquement être ouvert dans comportement Flash (il ne peut pas l'être dans Dreamweaver ni dans des navigateurs). Vous pouvez ouvoir le fichier FLA dans Flash, puis le publier sous la forme d'un fichier SWF ou SWT pour l'utiliser dans des navigateurs. Fichier SWF (.swf) Version compilation du fichier FLA (.fla), optimise pour l'affichage sur le Web. Ce fichier peut etre lu dans les navigateurs et previsualisedans Dreamweaver, mais il ne peut pas etre modifie dans Flash. Fichier FLV (.flv) Est un fisier video qui contient des données audio et video codées, lisibles par Flash® Player. Par exemple, si vous utilisez un fisier video QuickTime ou Windows Media, vous devez utiliser un encodeur (tel que Flash® Video Encoder ou Sorensen Squeeze) pour convertir le fisier video en fisier FLV. Pour plus d'informations, consultez le Centre de technologie video à l'adresse www.adobe.com/go/flv_devcenter_fr. More Help topics "Utilisation de Flash et Dreamweaver" on page 397 "Insertion de fichiers FLV" on page 261 Insertion et prévisualisation de fichiers SWF Dreamweaver permit d'ajouter des fichiers SWF à vos pages et d'en consulter un aperçu dans un document ou un navigateur. Vous pouvez également définir les propriétés des fichiers SWF dans linspecteur Propriétés. Vous trouvez undidacticiel consacré à l'ajout de fichiers SWF à des pages Web à l'adresse www.adobe.com/go/vid0150_fr. More Help topics "Utilisation de Flash et Dreamweaver" on page 397 "Modification d'un fichier SWF depuis Dreamweaver dans Flash" on page 397 Fichiers SWF et calques DHTML "Insertion d'animations Shockwave" on page 275 "Insertion de fichiers FLV" on page 261 Didacticiel consacre à l'utilisation de Flash Insertion d'un fichier SWF 1 Dans la fenêtre de document (mode Création), placez le point d'insertion à l'endetroit où vous souhaitez insérer le contenu, puis procédez de l'une des manières suivantes: - Dans la catégorie Commun du panneau Insertion,CHOISES MEDIAS puis cliquez sur I'icone SWF 1. - Choisissez Insertion > Medias > SWF. 2 Dans la boite de dialogue qui s'affiche, selectionnez un fichier SWF (.swf). Un espace réservé pour le fichier SWF s'affiche dans la fenêtre de document. Cet espace réservé est entouré d'un contour bleu à onglet. L'onglet indique le type d'actif (fichier SWF) et l'ID du fichier SWF. Cet onglet comporte également une icone qui représenté un œil. Il fait office de bascule entre le fichier SWF et les informations de téléchargement que les utilisateurs voient s'ils ne possèdent pas la version correcte de Flash Player. 3 Enregistrez le fjichier. Dreamweaver you inform que deux fischi dependants, expressInstall.swf et swobject_modified.js, sont etre enregistrres dans un dossier Scripts deiete site. N'oubliez pas de charger ces fischiers lorsque vous place le fisier SWF sur voitre serveur Web. Les navigateurs ne peuvent afficher correctement le fisier SWF que si vous avez etalement charge ces fischiers dependants. Note: Microsoft Internet Information Server (IIS) ne traite pas les balises object imbriquées. Pour les pages ASP, Dreamweaver utilise du code object/embed imbriqué au lieu du code object imbriqué lors de l'insertion de fichiers SWF ou FLV. Modification des informations de téléchargement de Flash Player Lorsque vous insérez un fisier SWF sur une page, Dreamweaver insère du code qui détecte si l'utilisateur dispose de la version appropriée de Flash Player. Si ce n'est pas le cas, la page affiche du contenu alternatif afin d'inviter l'utilisateur à télécharger la version la plus récente. Vous pouvez à tout moment modifier ce contenu alternatif. Cette procédure s'applique également aux fichiers FLV. Note: Si l'utilisateur ne dispose pas de la version requise mais bien de Flash Player en version 6.0 r65 ou une version ultérieure, le navigateur affiche un programme d'installation express de Flash Player. Si l'utilisateur refuse l'installation express, la page affiche le contenu alternatif. 1 Dans la fenêtre de document, en mode Création, Sélectionnéz le fichier SWF ou FLV. 2 Cliquez sur l'icone représentant un oeil dans l'onglet du fichier SWF ou FLV. Vous pouvez également utiliser le raccourci CTRL + ] pour activer l'affichage du contenu alternatif. Pour rétablir l'affichage du fichier SWF/FLV, appuyez sur CTRL + [ jusqu'à ce que l'intégrité du contenu alternatif soit selectionnée. Ensuite, appuyez à nouveau sur CTRL + ]. 3 Modifiez le contentu comme vous le feriez pour tout autre contentu dans Dreamweaver. Note: Il est impossible d'ajouter des fichiers SWF ou FLV en tant que contenu alternatif. 4 Cliquez à nouveau sur l'icone représentant un oeil pour revenir à l'affichage du fichier SWF (ou FLV). Prévisualisation de fichiers SWF dans la fenêtre de document 1 Dans la fenêtre de document, cliquez sur l'espace réservé du fichier SWF afin de selectionner son contenu. 2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), cliquez sur le bouton Lire. Cliquez sur le bouton Arrêt pour arrêter la prévisualisation. Vous pouvez également prévisualiser le fjichier SWF dans un navigateur en appuyant sur la touche F12. Pour prévisualiser tous le fichiers SWF dans une page, appuyez sur les touches Ctrl+Alt+Maj+P (Windows) ou Maj+Option+Commande+P (Macintosh). Tous les fichiers SWF sont placés en mode Lecture. Définition des propriétés d'un fichier SWF Vou puez definir les propriétés des fichiers SWF dans l'inspecteur Propriétés. Les propriétés s'appliquent également aux animations Shockwave. Sélectionnez un fjichier SWF ou une animation Shockwave, puis définissez ses options dans l'inspecteur Propriétés (Fenêtre > Propriétés). Pour afficher toutes les propriétés, cliquez sur la flèche de développement dans le coin inférieur droit de l'inspecteur Propriétés. ID Définit un ID unique pour le fichier SWF. Entrez un ID dans la zone de texte sans titre, à l'extreme gauche de l'inspecteur Propriétés. Depuis Dreamweaver CS4, un ID unique est requis. Let H Specifient la largeur et la hauteur de l'animation, en pixels. Fichier Spécifique le chemin d'accès au fichier SWF ou Shockwave. Cliquez sur l'icone de dossier pour rechercher un fichier ou entrez le chemin d'accès. Src Définit le chemin d'accès au document source (le fichier FLA), lorsque Dreamweaver et Flash sont tous deux installés sur votre ordinateur. Pour modifier un fichier SWF, mettez à jour le document source de l'animation. Ar-pl Sécífie une couleur d'arrière-plan pour la zone d'animation. Cette couleur apparait également lorsque l'animation n'est pas en lecture (au cours du chargement et à la fin de la lecture). Modifier Démarre Flash pourmettreà jourun fichierFLA(fichiercriedansleprogramme de creationFlash).Cette option estdésactivée sifiFlash n'est pasinstallé survoitr ordinateur. Classe Permet d'appliquer une classe CSS à l'animation. Boucle Active la lecture en boucle de l'animation. Si l'option Boucle n'est pas activée, l'animation est lue une fois puis s'arrête. Lecture automatique Lit automatiquement l'animation lors du chargement de la page. Espace V. et Espace H. Définit le nombre de pixels d'espace blanc au-dessus, au-dessous et de chaque côté de l'animation. Qualité Contrôle l'anticrénelage pendant la lecture de l'animation. Des valeurs élevées améliorent l'apparace des animations. Toutefois, avec des valeurs élevées, le rendu correct des animations à l'écran exige un processeur plus rapide. Un paramètre faible améliore la vitesse au détriment de l'apparace, alors qu'un paramètre élevé favorise l'aspect par rapport à la vitesse. L'option Basse automatiquement améliore la vitesse au départ, mais également l'apparace lorsque cela est possible. L'option Elevée automatiquement améliore de façon identique les deux qualités au départ, maisacrifie ensuite l'apparce pour la vitesse si nécessaire. Echelle Determine comment l'animation s'adapte aux dimensions définies dans les zones de largeur et de hauteur. Le parametre par defaut affiche l'animation entiere. Alignment Determine l'alignment de l'animation sur la page. Wmode Definit le parametre Wmode pour le fichier SWF de manière à éviter tout conflit avec des éléments DHTML, comme des widgets Spry. La valeur par défaut est Opaque, qui permet aux éléments DHTML de s'affiche au-dessus des fichiers SWF dans un navigateur. Si le fichier SWF comprend des sections transparentes et si vous voulez que les éléments DHTML apparaissent derrière celles-ci, activez l'option Transparent. Activez l'option Fenetre pour supprimer le parametre Wmode du code et permettre au fichier SWF de s'afficher au-dessus d'autres éléments DHTML. Lire Lit l'animation dans la fenêtre de document. Paramètres Ouvre une boîte de dialogue dans laquelle vous pouvez indiquer des paramètres supplémentaires à transmettre à l'animation. L'animation doit avoir été conçue pour recevoir ces paramètres supplémentaires. Insertion de documents FlashPaper La fonctionnalité Insérer FlashPaper a été abandonnée depuis Dreamweaver CS5. Ajout de widgets Web Un widget Web est un composant de page Web consistant en code HTML, CSS et JavaScript. Un widget Web peut par exemple être un accordéon, un panneau à onglet ou un calendrier. Vouss pouvez rendre vos selection personelle de widgets Web disponible dans Dreamweaver à l'aide du navigateur de widgets Adobe, une application AIR qui permet de naviguer dans les widgets, de les configurer et de les prévisualiser au moyen d'une interface visuelle. 1 Choisissez Insérer > Widget. 2 Dans la boîte de dialogue Widget, Sélectionnez un widget et un paramètre prédéfini (le cas échéant), puis clique sur OK. Vou puez également ajouter un widget Web à une page Dreamweaver (CS5.5 et versions ultérieures) en procédant comme suit : 1 Dans le Widget Browser, accedez à Mes widgets. 2 Sélectionnéz le widget que vous voulez ajouter. 3 Cliquez sur l'icone Glisser-deposer dans Dreamweaver, dans le coin supérieur gauche de l'onglet Mode En direct, et maintenez le bouton de la souris enforcé. Faites glisser le widget vers Dreamweaver, dans le mode Creation (Windows) ou le mode Creation ou Code (Macintosh OS). Vou ne pouvez pas faire glisser le widget dans le mode Affichage en direct, mais vous pouvez utiliser ce mode pour t ester le widget apres l'avoir depose sur la page. More Help topics Aide d'Adobe Widget Browser "Utilisation des widgets Spry (instructions generales)" on page 442 Ajout de séquences audio Formats de fichiers audio Il est possible d'ajouter du son à une page Web. Il existe de nombreux types de fichiers et de formats audio, par exemple, les fichiers .wav, .midi et .mp3. Certains facteurs sont à considérer avant de decide 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. Note: Le traitement des fichiers son est très différent et incohérent suivant les navigateurs. Vous pouvez ajouter un fichier audio à un fichier SWF, puis incorporel le fichier SWF pour assurer une(Meilleure)cohérence. La liste ci-dessous déscrit les formats de fichiers audio les plus courants et présente certains avantages et inconveniens 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 requirement pas de plug-in. Bien que leur qualité sonore soit très bonne, elle peut varier en fonction de la carte son du visitor. 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 belle qualite sonore, est pris en charge par plusieurs navigateurs et ne requiert pas de plug-in. Vous pouvez enregistervros propres fichiers WAV a partir d'un CD, d'une cassette, d'un microphone, etc. Toutefois, laaille importante des fichiers limite sereusement 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 pouze é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 pouze utiliser dans vos pages Web. Le format.mp3 (Motion Picture Experts Group Audio, ou MPEG-Audio Layer-3) est un format compressé qui diminue de manière significative la taille des fischiers audio. La qualité sonore est excellente : si un fischier MP3 est correctement enregistré et comprésé, sa qualité peut être équivalente à celle d'un CD. La technologie MP3 permet de dire le fischier « en transit » afin que les visiteurs n'aient pas à attendre le téléchargement du fischier entier avant de pouvoir l'écouter. Mais le fischier est plus gros qu'un fischier 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 dire les fischiers doivent télécharger et installer une application d'aide ou un plug-in tel que QuickTime, Windows Media Player ou RealPlayer. Le format .ra, .ram, .rpm ou Real Audio offre un degré très élevé de compression avec une taille de fichier inférieure à celle du format MP3. Le téléchargement de fichiers de chanson peut être effectué dans un laps de temps raisonnable. Les fichiers pouvant être « diffusés » à partir d'un serveur Web normal, les visiteurs peuvent commencer à écouter le son avant la fin du téléchargement. Les visiteurs doivent télécharger et installer l'application d'aide ou le plug-in RealPlayer afin de direc ces fichiers. . qt, . qtm, . mov ou QuickTime est un format à la fois audio et video 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 video 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. Note: En plus des formats les plus courants, mentionnés ci-dessus, il existe de nombreux formats audio et video utilisables sur le Web. Si vous rencontres un fichier audio ou video dont le format vous est inconnu, retrouvrez son creator au fin d'apprendre comment l'utiliser au moins. More Help topics "Insertion et modification d'objects multimédias" on page 272 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 désirir s'ils veulent écouter le fichier et rend le fichier disponible pour un plus vaste public. 1 Sélectionnéz le texte ou l'image à utiliser comme lien vers le fichier audio. 2 Dans l'inspecteur Propriétés, cliquez sur l'icone de dossier, a cote de la zone Lien, pour rechercher le fichier audio, ou tapez le nom et le chemin d'accès au fichier dans la zone Lien. Incorporation d'un fichier audio L'opération consistant à incorporer un son intégre le fichier audio directement dans la page, mais le son est uniquement lu si les visiteurs du site disposent du plug-in approprié pour le fichier audio choisi. Incorporez des fichiers si vous souhaitez utiliser le son en tant que musique de fond ou pour contrôle le volume, l'apparace du lecteur sur votre page ou encore les points de démarrage et d'arrêt du fichier audio. Lorsque you incorporez des fichiers son à vos pages Web, refléchissez bien à l'usage qu'il est possible d'en faire et de chaque façon les visiteurs pourraient s'en servir. Proposez toujours une commande permettant d'activer ou de couper le son, au cas où certains visiteurs ne souhaiteraient pas entendre le contenu audio. 1 En mode Création, placez le point d'insertion à l'endetroit où vous souhaitez incorporer le fichier et procédez de l'une des manières suivantes : - Dans la catégorie Commun du panneau Insertion, cliquez sur le bouton Medias et selectionnee l'icone Plug-in dans le menu. - Sélectionnez Insertion > Médias > Plug-in. 2 Recherche le fichier audio puis cliquez sur OK. 3 Entrez la largeur et la hauteur en saississant les valeurs dans les zones de texte appropriées de l'inspecteur Proprietés ou en redimensionnant l'espace réservé au plug-in dans la fenêtre de document. Ces valeurs déterminant la taille à laquelle les contrôleux audio sont affichés dans le navigateur. Ajout d'objects multimédias Insertion et modification d'objects multimédias Outre les fichiers SWF et FLV, vous pouvez insérer des videos QuickTime ou Shockwave, des applets Java, des contrôleux ActiveX ou d'autres objets audio ou video dans un document Dreamweaver. Si vous inserez des attributs d'accessibilité avec un objet multimédia, vous pouvez définir les attributs d'accessibilité et modifier ces valeurs dans le code HTML. 1 Placez le point d'insertion dans la fenetre de document à l'endetroit où vous souhaitez insérer l'objet. 2 Pour insérer l'objet souhaité, procédez de l'une des manières suivantes : - Dans la catégorie Commun du panneau Insertion, cliquez sur le bouton Medias et selectionnez l'icone correspondant au type d'objet que vous souhaitez insérer. - Choisissez l'objet approprié dans le sous-menu Insertion > Médias. - Si l'objet à insérer n'est pas un objet Shockwave, Applet ou ActiveX,CHOISSEZ Plug-in dans le sous-menue Insertion > Medias. Une boîte de dialogue permet alors deCHOISIR un fichier source et de spécifier certains paramètres de l'objet multimédia. Pour éviter que ces boîtes de dialogue ne s'affichent,CHOISSEZ Edition > Preférences > Général (Windows) ou Dreamweaver > Preférences > Général (Macintosh) et désactiver l'option Afficher la boîte de dialogue lors de l'insertion d'objets. Pour remplaçer la préférence d'affichage des boîtes de dialogue, maintenez enforcé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écifique le fichier correspondant, maintenez la touche Ctrl ou Option enforcée et cliquez sur le bouton Shockwave à partir du menu Support de la catégorie Commun du panneau Insertion ouCHOISSEZ Insertion > Médias > Shockwave. 3 Complétez les options de la boîte de dialogue Sélectionner un fichier, puis cliquez sur OK. Note: La boîte de dialogue Attributes d'accessibilité s'affiche si vous avons decide d'afficher les attributs lors de l'insertion de medias dans la boîte de dialogue Edition > Préférences. 4 Définisse les attributs d'accessibilité. Note: Vous pouvez également modifier les attributs d'un objet multimédia. Pour ce faire, Sélectionnez l'objet et modifie le code HTML en mode Code, ou cliquez avec le bouton droit de la souris (Windows) ou en maintainant la touche Contrôle enforcée (Macintosh), puis Sélectionnez Modifier le code de la balise. Titre Entrez un titre pour l'objet multimédia. Clé d'accès Entrez un équivalent clavier (une lecture) dans la zone de texte pour sélectionner l'objet de formulaire dans le navigateur. Cela permet aux visiteurs du site d'utiliser la touche Ctrl (Windows) conjointement à la clé d'accès pour acceder à l'objet. Par exemple, si vous entrez B comme Clé d'accès, utilisez Ctrl+B pour sélectionner l'objet dans le navigateur. Ordre des tabulations Entrez un nombre pour définir l'ordre de tabulation de l'objet. La définition d'un ordre d'apparition peut se reveler utile lorsque la page contient d'autres liens et d'autres objets de formulaire et que vous poulez que l'utilisateur passe de l'un à l'autre dans un ordre particulier. Si vous définissez un ordre d' apparition pour un objet, assurez-vous de le faire également pour tous les autres objets. 5 Cliquez sur OK pour insérer l'objet multimédia. Note: 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écifique un fisier source, définir les dimensions et d'autres paramètres et attributs, utilisez l'inspecteur Propriétés pour chaque object. Vous pouvez modifier les attributs d'accessibilité d'un object. More Help topics "Optimisation de l'espace de travail pour la conception de pages accessibles" on page 721 Lancement d'un主编 extrer pour des fichiers multimédias Vou puez lancer un edeur exter nepuis Dreamweaver pour modifier la plupart des fichiers multiméidas. Vou puez égarlement decider de I'edeur que doit lancer Dreamweaver pour modifier le fichier. 1 Assurez-vous que le type du fichier multimédia est associé à un éditeur sur votre système. Pour savoirquel éditeur est associé au type de fichier,seLECTIONnez Edition > Preferences 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 editeurs associés dans la colonne Editeurs. Vous pouvez modifier l'éditeur associé a un type de fichier. 2 Double-cliquez sur le fichier multimedia dans le panneau Fichiers pour lancer I'editeur externe et ouvrir le fichier. L'éditeur qui est exécuté lorsqu vous double-cliquez sur le fichier du panneau Fichiers est appelé «éditeur principal » Si vous double-cliquez sur un fichier image, par exemple, Dreamweaver ouvre le fichier dans l'application principale de retouché d'image définie, par exemple Adobe Fireworks. 3 Si vous ne souhaitez pas utiliser l'éditeur externe principal pour modifier le fichier, vous pouvez effectuer l'une des opérations suivantes pour utiliser un autre éditeur : Dans le panneau Fichiers, cliquez avec le bouton croit de la souris (Windows) ou en maintainant la touche Ctrl enfoncée (Macintosh) sur le nom du fichier concerné et selectionnez Ouvrir avec dans le menu qui s'affiche. En mode Création, cliquez avec le bouton droit de la souris (Windows) ou en maintainant la touche Ctrl enforcée (Macintosh) sur l'élement multimédia de la page affichée, puis selectionnez Modifier avec dans le menu contextual. Spécification de l'éditeur à lancer depuis Dreamweaver Vou puez definir l'éditeur à lancer par Dreamweaver pour modifier un type de fichier et pour ajouter ou supprimer des types de fichiers reconnus par Dreamweaver. Indication explicite des éditeurs externes à lancer pour un type de fichier donné 1 Choisissez Edition > Prefé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électionnéz l'extension de type de fichier dans la liste Extensions, puis effectuez l'une des opérations suivantes : Pour associer un nouvel éditeur au type de fichier, cliquez sur le bouton plus (+), au-dessus de la liste Editeurs et renseignez la boîte de dialogue qui s'affiche. Par exemple, Sélectionnéz l'icone de l'application Acrobat pour l'associer au type de fichier. Pour faire d'un主编eur l'éditeur principal pour un type de fichier donné (c'est-à-dire celui qui s'ouvre automatiquement lorsque vous double-cliquez sur un fichier de ce type dans le panneau Fichiers), Sélectionnez cet主编eur dans la liste Editeurs, puis cliquez sur Rendre principal. Pour qu'un éditeur ne soit plus lié à un type de fichier donné, Sélectionnez cet éditeur dans la liste Editeurs et cliquez sur le bouton moins (-) au-dessus de la liste. Ajout d'un nouveau type de fichier et un éditeur associé 1 Cliquez sur le bouton plus (+), au-dessus de la liste Extensions et entrez une extension de type de fichier (saisissez le point precedent l'extension) ou plusieurs extensions liées et séparées par des espaces. Voussoupvez,parexample,entrer.xml.xs1siyoussoushaitezassociercsfichiersavecunéditeurXMLinstallésurvoitrésysteme. 2 Pour selectionner un éditeur pour le type de fichier, cliquez sur le bouton plus (+), au-dessus de la liste Editeurs et renseignez la boîte de dialogue qui s'affiche. Suppression d'un type de fichier Sélectionnez le type de fichier dans la liste Extensions et cliquez sur le bouton moins (-) au-dessus de la liste Extensions Note: L'annulation de la suppression d'un type de fichier étant impossible, soyez prudent lors d'une telle opération. Utilisation des Design Notes avec les objets multimédias Comme pour la plupart des objets dans Dreamweaver, vous pouze ajouter des Design Notes à un objet multimédia. Les Design Notes sont des notes associées à un fjichier particulier et stockées dans un fjichier séparé. Les Design Notes vous permettent de conserver des informations supplémentaires sur les documents, par exemple, des commentaires sur l'etat des fjichiers ou le nom des fjichiers source des images. 1 Cliquez avec le bouton droit de la souris (Windows) ou en Maintenant la touche Contrôle enfoncée (Macintosh) sur l'objet dans la fenetre de document. Note: Vous doivent désigner toute site avant d'ajouter des Design Notes à un objet. 2 Cliquez sur Design Notes de la page dans le menu contextual. 3 Entrez les informations souhaitées dans la Design Note. Vou puez egalent ajouter une Design Note a un objet multimédia à partir du panneau Fichiers en selectionnant le fichier, en affichtant le menu contextuel, puis en choisisant l'option Design Notes dans ce dernier. More Help topics "Activation et désactivation des Design Notes pour un site" on page 112 "Stockage des informations sur les fichiers dans des Design Notes" on page 111 Insertion d'animations Shockwave Vou puez utilise Dreamweaver pour inserer des animations Shockwave dans vos documents. Adobe Shockwave, une norme pour les éléments multimédia interactifs sur le Web, est un format comprés qui autorise le téléchargement rapide des fichiers multimédia créés dans Adobe Director, ainsi que leur lecture dans la plupart des navigateurs. 1 Dans la fenêtre de document, placez le point d'insertion à l'endetroit où vous souhaitez insérer une animation Shockwave et procédez de l'une des manières suivantes : - Dans la catégorie Commun du panneau Insertion, cliquez sur le bouton Medias puis selectionnez l'icone Shockwave dans le menu. - Choisissez Insertion > Médias > Shockwave. 2 Dans la boîte de dialogue qui s'affiche, Sélectionnez un fjichier d'animation. 3 Dans linspecteur Propriétés, tapez la largeur et la hauteur de l'animation dans les zones L et H. More Help topics "Définition des propriétés d'un fichier SWF" on page 268 Ajout de video (non FLV) Plusieurs méthodes vous permettent d'ajouter une video à votre page Web et vous pouvez faire appel à divers formats. L'utilisateur peut télécharger les videos ou elles peuvent être diffusées et lues pendant leur téléchargement. 1 Placez le fjichier video dans le dossier de votre site. Ces clips se presentaient souvent au format AVI ou MPEG. 2 Insérez un lien vers la série ou incorporez-la dans votre page. Pour étabir un lien vers la série, entreprises un texte pour le lien (par exemple, « Téléchargez la vente »), sélectionnez le texte et cliquez sur l'icone de dossier dans l'inspecteur de sélections. Recherche le fichier video et sélectionnez-le. Note: L'utilisateur doit télécharger une application d'aide (un plug-in) pour visualiser les formats lus en transit, comme Real Media, QuickTime et Windows Media. Insertion du contenu d'un plug-in Vous pouvez创建工作 du contenu, par exemple une série video QuickTime pour un plug-in de navigateur, 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 fischiers MP3 et les animations QuickTime sont des fischiers de contenu. Vouss pouvez afficher un aperçu des animations qui font directement appel aux plug-ins de navigateur dans le mode Creation dans la fenêtre de document. Vous pouze lire simultanément tous les éléments des plug-ins pour savoir comment la page s'affichera sur le poste de l'utiliser ou lire chaque élément individuellement pour vous assurer que vous avez incorpore le bon élément multimédia. Note: Il n'est pas possible d'afficher un aperçu des films ou animations basées sur des contrôleux ActiveX. Après avoir inséré le contenu d'un plug-in, utilisez l'inspecteur Propriétés pour en définir les paramètres. Pour afficher les propriétés suivantes dans l'inspecteur Propriétés, Sélectionnez un objet plug-in Lors de son ouverture, l'inspecteur Propriétés affiche les propriétés les plus couramment utilisées. Cliquez sur la flèche d'agrandissement, dans le coin inférieur droit, pour afficher toutes les propriétés. Insertion du contenu d'un plug-in et définition de ses propriétés 1 Dans la fenêtre de document (mode Création), placez le point d'insertion à l'endetroit où vous souhaitez insérer le contenu, puis procédez de l'une des manières suivantes: - Dans la catégorie Commun du panneau Insertion, cliquez sur le bouton Medias puis selectionnez l'icone Plug-in dans le menu. - Sélectionnez Insertion > Médias > Plug-in. 2 Dans la boite de dialogue qui s'affiche, selectionnez un fichier de contenu pour un plug-in, puis cliquez sur OK. 3 Définissez les options du plug-in dans l'inspecteur Propriétés. Nom Spécifie un nom permettant d'identifier le plug-in dans un script. Tapez un nom dans la zone de texte sans titre, à l'extreme gauche de l'inspecteur Propriétés. Let H Specifient, en pixels, la largeur et la hauteur allouees a I'objet sur la page. Src Specifie le fjichier des données source. Cliquez sur l'icone de dossier pour rechercher un fjichier ou entrez un nom de fjichier. URL du plug-in Spécifie l'URL pour l'attribut pluginspace. Indiquez l'URL complète du site à partir duquel les utilisateurs peuvent télécharger le plug-in. Si l'utilisateur qui consulte votre page ne possède pas le plug-in nécessaire, le navigateur essaie de le télécharger à partir de cette URL. Alignment Determine l'alignment de I'objet sur la page. Espace V. et Espace H. Spécifient la quantité d'espace blanc, en pixels, au-dessus, au-dessous et de chaque côté du plug-in. Bordure Spécifie la largeur de la bordure autour du plug-in. Paramètres Ouvre une boîte de dialogue permettant d'indiquer des paramètres supplémentaires à transmettre au plug-in Nombreux sont les plug-ins qui répondent à des paramètres particuliers. Vou puez egalent afficher les attributs affectes au plug-in selectionne en cliquant sur le bouton Attribut. Vou puez modifier, ajouter ou supprimer des attributs tels que la hauteur et la largeur dans cette boite de dialogue. Lecture de contenu d'un plug-in dans la fenêtre de document 1 Inserez un ou plusieurs éléments multimédias à l'aide d'une des méthodes décrites dans la section précédente. 2 Effectuez l'une des opérations suivantes : Sélectionnez un des éléments multimédia que vous avez insérés, puis choisissez la commande Affichage > Plug-ins > Lire ou cliquez sur le bouton de lecture de l'inspecteur Propriétés. Choisissez la commande Affichage > Plug-ins > Lire tout pour生存 tous les éléments multimédia de la page sélectionnée qui font appel à des plug-ins. Note: L'option Lire tout s'applique uniquement au document actif. Elle ne s'applique pas aux autres documents dans un ensemble de cadres par exemple. Arrêt de la lecture du contenu d'un plug-in Sélectionnez un élément multimédia, puis désisissez la commande Affichage > Plug-ins > Arrêteur ou cliquez sur le bouton d'arrêt dans l'inspecteur Propriétés. Vou puez egalent selectionner Affichage Plug-ins Arreter tout pour interrompre la lecture de tous les contenus des plug-ins. Dépannage des plug-ins de Vouavesuivi les etapes permettant de dire le contenu d'un plug-in dans la fenetre de document, mais constazee 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 fischier Configuration/Plugins/UnsupportedPlugins.txt dans un éditeur de texte et vérifie si le plug-in posant problème est répertorié. Ce fischier 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 constatiez des problèmes avec un plug-in particulier, il est souhaitable de l'ajouter à ce fischier. - 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 Vou puez ajouter un contrôle ActiveX à votre page. Les contrôles ActiveX (autrefois appelés commandes OLE) sont des composants réutilisables, un peu comme des applications miniatures, qui peuvent fonctionner comme des plugins de navigateurs. Ils fonctionnent dans Internet Explorer sous Windows, mais pas dans les navigateurs Macintosh. L'objet ActiveX de Dreamweaver vous permet de fournir les attributes et paramètres d'un contrôle ActiveX charge par le navigateur du visiteur. Une fois un objet ActiveX inséré, utilisez l'inspecteur Propriétés pour définir les attributs de la balise object et les paramètres du contrôle ActiveX. Cliquez sur Paramètres dans l'inspecteur Propriétés pour indiquer des noms et des valeurs de propriétés qui n'apparaissent pas dans l'inspecteur Propriétés. Il n'este pas de format standard unanimement accepté pour les paramètres des contrôle ActiveX. Consultez la documentation sur le contrôle ActiveX que vous utilisez pour savoir quels paramètres désirir. Dans la fenêtre de document, positionnez le curseur à l'emplacement où insérer le contenu et procédez de l'une des manières suivantes: - Dans la catégorie Commun du panneau Insertion, cliquez sur le bouton Medias puis selectionnee l'icone ActiveX - Dans la catégorie Commun du panneau Insertion, cliquez sur le bouton Medias puis selectionnez l'icone ActiveX. Lorsque l'icone ActiveX s'affiche dans le panneau Insertion, vous pouvez la faire glisser jusqu'à la fenetre du document. - Choisissez Insertion > Médias > ActiveX. Une icône indique l'emplacement de la page où apparaitra le contrôle ActiveX dans Internet Explorer. Propriétés d'ActiveX Lors de son ouverture, l'inspecteur Propriétés affiche les propriétés les plus couramment utilisées. Cliquez sur la flèche d'agrandissement, dans le coin inférieur droit, pour afficher toutes les propriétés. Nom Spécifie un nom qui permet d'identifier l'objet ActiveX pour les scripts. Tapez un nom dans la zone de texte sans titre, à l'extreme gauche de l'inspecteur Propriétés. Let H Spécífient la largeur et la hauteur de l'objet, en pixels. ID de classe Identifie le contrôle ActiveX pour le navigateur. Tapez la valeur ouCHOisissez-en une dans le menu contextuel. Lorsque la page est chargée, le navigateur utilise l'ID de classe pour localiser le contrôle ActiveX requis par I'objet ActiveX associé à la page. Si le navigateur ne peut pas localiser le contrôle ActiveX spécifique, ilessaie de le télécharger à partir de l'emplacement spécifique dans le champ Base. Incorporer Ajoute une balise embed dans la balise object pour le contrôle ActiveX. S'il existe un plug-in équivalent au contrôle ActiveX, la balise embed active ce plug-in. Dreamweaver affecte les valeurs que vous avez saisies comme propriétés d'objects ActiveX aux plug-ins équivalents de Alignment Deteirme l'alignement de I'objet sur la page. Paramétres Ouvre une boîte de dialogue dans laquelle vous pouvez indiquer des paramétrés supplémentaires à transmettre à l'objet ActiveX. Nombreux sont les contrôleires ActiveX qui possèdent des paramétrés particuliers. Src Définit le fichier de données à utiliser pour un plug-in, si l'option Incorporer est activée. Si vous n'entrez pas de valeur, Dreamweaver essaire d'en déterminer une à partir des propriétés d'ActiveX entées précédemment. Espace V. et Espace H. Spécifient la quantité d'espace blanc, en pixels, au-dessus, au-dessous et de chaque côte de l'objet. Base Spécifie l'URL qui contient le contrôle ActiveX. Internet Explorer t'échécharge le contrôle ActiveX à partir de cet emplacement s'il n'a pas été installé sur le système du visitor. Si vous ne précise pas le paramètre Base et que le contrôle ActiveX nécessaire n'est pas déjà installé sur l'ordinateur du visitor, son navigator ne pourrait pas afficher l'objet ActiveX. Img sec. Spécifie une image à afficher si le navigateur ne prend pas en charge la balise object. Cette option n'est disponible que si l'option Incorporer est déslectionnée. Données Spécifie un fichier de données que le contrôle ActiveX doit charger. De nombreux contrôles ActiveX, tels que Shockwave et RealPlayer, n'utilisent pas ce paramètre. Insertion d'une applet Java Vou puez inserer 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 incorporeés dans des pages Web. Une fois une applet Java insérée, utilisez l'inspecteur Propriétés pour définir les paramètres. Sélectionnez une applet Java pour afficher ses propriétés dans l'inspecteur Propriétés. 1 Dans la fenêtre de document, placez le point d'insertion à l'endetroit où vous souhaitez insérer l'applet, puis procédez de l'une des manières suivantes: - Dans la catégorie Commun du panneau Insertion, cliquez sur le bouton Medias puis selectionnez l'icone Applet - Choisissez Insertion > Medias > Applet. 2 Sélectionnez un fichier contenant une applet Java. Propriétés des applets Java Lors de son ouverture, l'inspecteur Propriétés affiche les propriétés les plus couramment utilisées. Cliquez sur la flèche d'aggrandissement, dans le coin inférieur droit, pour afficher toutes les propriétés. Nom Spécifie un nom permettant d'identifier l'applet dans un script. Tapez un nom dans la zone de texte sans titre, à l'extrème gauche de l'inspecteur Propriétés. Let H Spécífient la largeur et la hauteur de l'applet, en pixels. Code Spécifique le fjichier contenant le code Java de l'applet. Cliquez sur l'icone de dossier pour rechercher un fjichier ou entrez un nom de fjichier. Base Identifie le dossier contenant l'applet selectionnee. Lorsque vous choisissez une applet, cette zone de texte est renseignee automatiquement. Alignment Deteirme l'alignement de I'objet sur la page. Sec Specified un contenu de remplacement (generalement une image) à afficher si le navigateur de l'utilisateur ne prend pas en charge les applets Java ou si Java y est désactivé. Si vous tapez du texte, Dreamweaver insère le texte comme étant la valeur de l'attribut alt de l'applet. Si vous selectionnez une image, Dreamweaver insère une balise img entre les balises applet d'ouverture et de fermeture. Espace V. et Espace H. Specified la quantité d'espace blanc, en pixels, au-dessus, au-dessous et de chaque côte de l'applet. Paramètres Ouvre une boîte de dialogue dans laquelle vous pouvez indiquer des paramètres supplémentaires à transmettre à l'applet. Nombreuses sont les applets qui répondent à des paramètres particuliers. Utilisation de comportements pour contrôler les objets multimédias Voussoupiezajouterescomportementsaovertepagourcommencerouarrerlalecturediversobjets multimédia. Contrer Shockwave ou Flash Permet de dire, d'arreter, de remboser ou d'atteindre un cadre dans une animation Shockwave ou un fichier SWF Lire le son Permet de jouer un son. Vous pouvez ainsi jouer un effet sonore des que l'utilisateur survole un lien à l'aide de la souris. Vérifier le Plug-in Permet de vérifier si les visiteurs de votre site disposent du plug-in requis, puis de les diriger vers différentes URL, en fonction du résultat. Cela s'applique uniquement aux plug-ins de, car ce comportement ne vérifie pas les contrôleux ActiveX. More Help topics "Application du comportement Contraler Shockwave ou SWF" on page 370 "Application du comportement Lire le son" on page 374 "Application du comportement Vérifier le plug-in" on page 369 Utilisation de paramètres pour contrôle des objets multimédia Définissez les paramètres spéciaux pour contrôle les fischiers Shockwave et SWF, les contrôles ActiveX, les plug-ins et les applets Java. Les paramètres sont utilisés avec les balises object, embed et applet. Les paramètres définissant des attributs spécifique aux différents types d'objects. Par exemple, un fichier SWF peut désposer du paramètre qualité pour la balise object. La boîte de dialogue Paramètre est disponible à partir de l'inspecteur Propriétés. Consultez la documentation sur l'objet que vous utilisez pour connaître les paramètres requis. Note: Il n'este pas de standard unanimement accepté pour l'identification des fichiers de données des contrôle X. Consultez la documentation sur le contrôle ActiveX que vous utilisez pour savoir quels paramétres désir. Saisie du nom et de la valeur d'un paramètre 1 Sélectionnez un objet pouvant être associé à des paramètres (par exemple, une animation Shockwave, un contrôle ActiveX, un plug-in ou une applet Java) dans la fenêtre de document. 2 Ouvrez la boite de dialogue en procédant de l'une des manières suivantes : Cliquez avec le bouton droit de la souris (Windows) ou en Maintenant la touche Contrôle enfoncée (Macintosh) sur l'objet et cliquez sur Paramètres dans le menu contextuel. Ouvrez linspecteur Propriétés s'il n'est pas déjà ouvert, puis cliquez sur le bouton Paramètresitué dans la section inférieure de linspecteur Propriétés. Assurez-vous que linspecteur Propriétés est développé. 3 Cliquez sur le bouton Plug (+) et entrez le nom et la valeur du paramètre dans les colonnes appropriées. Suppression d'un paramètre Sélectionnez un paramètre et cliquez sur le bouton Moins (-). Réorganisation de paramètres Sélectionnez un paramètre et utilisez les boutons fléchés vers le haut ou vers le bas. Automatisation des tâches Automatisation des tâches Le panneau Historique mémorise les étapes que vous effectuez lors de l'exécution d'une tâche. Vous pouvez automatiser une tâche effectue fréquement en reproduisant les étapes correspondantes à partir du panneau Historique ou en créé une nouvelle commande qui effectue les étapes automatiquement. Certsains mouvements de la souris, tels qu'une selection via un click dans la fenetre de document, ne peuvent pas etre reproduits ou sauvegardés. Lorsque vous effectuez ce type de mouvements, un trait noir s'affiche dans le panneau Historique (la presence de cette ligne ne devient evidente que lorsque vous efectuez une autre action). Pour eviter cela, déplacez le point d'insertion à l'aide des touches fléchéées, et non de la souris, dans la fenetre de document. Il existe quelques autres actions qui ne peuvent pas etre reproduites, par exemple le glisser-deplacer d'un element de la page. Lorsque vous effectuez ce type d'action, une icone contenant un petit X rouge s'affiche dans le panneau Historique. Les commandes sauvégardées sont conservées en permanence (à moins que vous ne les supprimiez), tandis que les commandes enregistrées sont supprimées lorsque vous quitterze Adobe® Dreamweaver® CS5 et les séquences d'étapes copées sont supprimées lorsque vous copiez un autre élément Utilisation du panneau Historique Le panneau Historique (Fenêtre > Historique) affiche une liste des étapes que vous avez effectuees dans le document actif depuis que vous l'avez creé ou ouvert (mais pas les étapes effectuees dans d'autres cadres, d'autres fenêtes de document ou dans le panneau Site). Utilisez le panneau Historique pour annuler plusieurs étapes en même temps et pour automatiser des tâches. A. Curseur (index) B. Etapes C. Bouton Reproduire D. Bouton Copier les étapes E. Bouton Enregister comme commande Lors de l'ouverture du panneau Historique, le curseur, ou index, pointe sur la derniere action que vous avez accomplie. Note: 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à effectuees. Annulation de la dernière étape Effectuez l'une des opérations suivantes: - Choisissez Edition > Annuler. - Déplacez le curseur du panneau Historique d'une étape vers le haut dans la liste. Note: 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 selectionnée. La sélection d'une étape est une opération différente du retour à cette étape dans l' historique des actions. Annulation de plusieurs étapes à la fois Faites glisser le curseur de façon à pointer sur une étape de la liste, ou cliquez à gauche d'une étape le long de la trajectory du curseur. Le curseur se dirige automatiquement vers cette etape en annulant toutes les etapes se trouvant sur son passage. Note: 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établier les actions annulées : elles disparaissent du panneau Historique. Définition du nombre maximal d'étapes que le panneau Historique conserve et affiche Le nombre d'étapes par défaut est suffisant pour la plupart des utilisateurs. Plus ce nombre est élevé, plus le panneau Historique nécessite de la mémoire, ce qui peut affecter les performances et ralentir considérablement votre ordinateur. 1 Choisissez Edition > Preférences (Windows) ou Dreamweaver > Préférences (Macintosh). 2 Sélectionnéz la catégorie Général dans la liste de gauche. 3 Tapez un chiffre dans la zone Nombre maximal d'étapes de l'historique. Lorsque le panneau Historique atteint le nombre maximal d'étapes, les premières étapes sont suprimées. Effacement de la liste des actions du panneau Historique pour le document actif Dans le menu contextual du panneau Historique, selectionnez Effacer l'historique. Cette commande efface également toutes les informations permettant d'annuler les actions effectuees dans le document actif : après avoir cliqué sur Effacer l'historique, il vous est impossible d'annuler les actions dont la trace a ete effacee. La fonction Effacer l'historique n'annule aucune action passee, mais se limite a supprimer la trace de ces etapes de la memoire. Répétition d'étapes Vou puez repeter la derniere etape effectuée ou bien une série d'etapes contigues ou non a l'aide du panneau Historique. Reproduisez les etapes directement depuis le panneau Historique. Répétition d'une étape Effectuez l'une des opérations suivantes: - Choisissez Edition > Répéter. - Dans le panneau Historique, Sélectionné une étape et cliquez sur le bouton Reproduire. L'etape est reproduite et une nouvelle instance de cette action apparait dans le panneau Historique. Répétition d'une série d'étapes 1 Sélectionnez les étapes désirées dans le panneau Historique : - Pour selectionner des étapes adjacentes, faites glisser la souris d'une étape à une autre (ne faites pas glisser le curseur; faites simplement glisser la souris de l'étiquette de texte d'une étape vers l'étiquette de texte d'une autre), ou selectionnez la première étape et, tout en maintainant la touche Maj enforcée, cliquez sur la dernière étape. - Pour sélectionner des étapes non adjacentes, sélectionnez une étape, puis tout en maintainant appuyée la touche Ctrl (Windows) ou Commande (Macintosh), cliquez sur d'autres étapes de façon à les sélectionner (ou à les désélectionner le cas échéant). Seules les actions selectionnées (en surbrillance), et pas nécessairement celle sur laquelle se trouve le curseur, sont repétées. Note: Bien que vous puissiez selectionner une série d'étapes contenant un trait noir signalant une action impossible à enregistrer, cette étape est ignorée lorsque vous reproduisez les étapes. 2 Cliqueur Reproduire. Les étapes sont reproduites dans l'ordre chronologique et une nouvelle étape, Reproduire les étapes, apparait dans le panneau Historique. Réalisation ou extension d'une seLECTION Maintenez la touche Maj enforcée tout en appuyant sur une touche fléchée. Si untrait noir indiquant un mouvement de la souris apparait pendant que vous effectuez une tache que vous voulez réiterer ultérieurement,vous pouvez annuler cette derniere action et tenter une autre approche (utilisez les touches fléchéées,par exemple). Application d'étapes du panneau Historique à des objets Voues pouvez appliquer un ensemble d'etapes affichees dans le panneau Historique à n'importe quel objet figurant dans la fenetre de document. Si vous scélectionné plusieurs objets, puis leur appliquez des étapes à partir du panneau Historique, ces objets sont traités comme une scélection unique et Dreamweaver tente d'appliquer les étapes à cette scélection combinée ; toute fois, vous ne pouvez appliquer un ensemble d'étapes qu'à un seul objet à la fois. Pour appliquer les étapes à chaque objet d'un ensemble d'objects, vous devez faire en sorte que la première étape de la série sélectionne l'objet suivant de l'ensemble. La deuxième procédure illustre ce principe dans un scenario particulier : définition de l'espacement vertical et horizontal d'une série d/images. Application d'étapes à un autre object 1 Sélectionnez l'objet. 2 Sélectionnez l' étape à appliquer dans le panneau Historique, puis cliquez sur Reproduire. Application d'étapes à plusieurs objets 1 Ouvrez un document dans lequel chaque ligne est composée d'une petite image (par exemple une puce graphique ou une icône) suivie de texte. L'objectif est d'espace davantage ces images à la fois du texte et des autres images situées au-dessus et en dessous. Locations Special Offers Customer Service 2 Ouvrez l'inspecteur Propriétés (Fenêtre > Propriétés), si nécessaire. 3 Sélectionnéz la première image. 4 Dans l'inspecteur Propriétés, indique des valeurs dans les zones Espace V. et Espace H. pour définir l'espacement de l'image. 5 Cliquez sur l'imag de nouveau pour activer la fenetre de document sans deplacer le point d'insertion. 6 Appuyez sur la touche fléchée gauche pour amener le point d'insertion à gauche de l'image. 7 Appuyez sur la touche fléchée bas pour faire descendre le point d'insertion d'une ligne, tout en le laissant juste à gauche de la seconde image de la série. 8 Appuyez sur la touche fléchée droite tout en maintainant la touche Maj. enfonnée, pour sélectionner la seconde image. Note: Ne sélectionnez surtout pas l'image enclinquant dessus, car vous ne pourriez plus reproduire toutes les étapes. 9 Dans le panneau Historique, selectionnez 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 reproduce ces actions. L'espacement de l'image courante est modifie, et l'image suivante est selectionnée. Locations Special Offers Customer Service 10 Continuez a cliquer sur le bouton Reproduire jusqu'à ce que toutes les images soient correctement espacées. Copie et collage d'étapes entre les documents Chaque document ouvert possède son propre historique. Vous pouvez copier des étapes d'un document et les coller dans un autre document. La fermeture d'un document supprime son historique. Si vous savez que vous voudrez utiliser des étapes d'un document ultérieurement, copiez ou sauvegardez ces étapes avant de fermer ce document. 1 Sélectionné les étapes désirées dans le panneau Historique du document qui contient les étapes à réutiliser. 2 Cliques sur Copier les etapes dans le panneau Historique. Note: 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 comprendnent également une commande Copier avant la commande Coller. 3 Ouvrez l'autre document. 4 Placez le point d'insertion sur l'emplacement desired, ou selectionnee z'objet auquel vous voulez appliquer les etapes. 5 Choisissez Edition > Coller. Les étapes sont reproduitesè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. More Help topics "Réduction et modification de code" on page 321 Création et utilisation de commandes à partir d'étapes de l'historique Sauvegardez un ensemble d'étapes de l'histoire sous la forme d'une commande à laquelle vous donnerez un nom et qui devendra alors disponible dans le menu Commandes. Créez et enregistrez une nouvelle commande si vous pensez devoir utiliser de nouveau un ensemble d'étapes, rundout après le prochain démarrage de Dreamweaver. Création d'une commande 1 Sélectionnéz la ou les étapes désirées dans le panneau Historique. 2 Cliquez sur le bouton Enregister comme commande ouCHOisissez l'option Enregister comme commande dans le menu contextual du panneau Historique. 3 Indiquez le nom de la commande et cliquez sur OK. La commande apparait dans le menu Commandes. Note: La commande est sauvegardée sous la forme d'un fichier Java Script (ou parfois HTML) dans votre dossier Dreamweaver/Configuration/Commandes. Si vous utilisez Dreamweaver sur un système d'exploitation à plusieurs utilisateurs, le fichier est enregistré dans le dossier Commandes de l'utiliseur spécifique. Utilisation d'une commande sauvégardée 1 Sélectionnez l'objet auquel vous désirez appliquer la commande ou placez le point d'insertion à l'emplacement désiré. 2 Sélectionnez la commande de votrechioix dans le menu Commandes. Modification du nom d'une commande 1 Choisissez Commandes > Modifier la liste des commandes. 2 Sélectionnez la commande à denommer, indiquez son nouveau nom, puis cliquez sur Fermer. Suppression d'un nom du menu Commandes 1 Choisissez Commandes > Modifier la liste des commandes. 2 Sélectionnez une commande. 3 Cliquez sur Supprimer, puis sur Fermer. Enregistrement et sauvegarde de commandes Enregistrez une commande temporaire pour une utilisation à court terme, ou enregistrez et sauvegardez une commande pour l'utiliser ultérieurement. Dreamweaver conserve uniquement une commande enregistrée à la fois; dés que vous commencez à enregistrer une nouvelle commande, l'ancienne est perdue, à moins que vous ne la sauvégardiez avant de mémoriser la nouvelle commande. Enregistrement provisoire une série d'étapes 1 Choisissez Commandes > Demarrer 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 > Arreter l'enregistrement ou appuyez à nouveau sur la combinaison de touches Ctrl+Maj+X (Windows) ou Commande+Maj+X (Macintosh). Reproduction d'une commande enregistrée Sélectionnez Commandes > Reprouvir la commande enregistrée. Sauvegarde d'une commande enregistrée 1 Sélectionnez Commandes > Reproduire la commande enregistrée. 2 Dans la liste d'étapes du panneau Historique, Sélectionnez l'étape Exécuter commande et cliquez sur le bouton Enregistrer comme commande. 3 Indiqueleznomde lacommande etcliquez sur OK. La commande apparait dans le menu Commandes. Chapter 9: Liens et navigation A propos des liens et de la navigation A propos des liens Une fois que vous avez défini un site Dreamweaver dans lequel stocker les documents de votre site Web et que vous avez créé des pages HTML, il vous reste à établier des connexions entre vos documents et d'autres types de documents. Dreamweaver propose plusieurs méthodes pour creer des liens vers des documents, des images, des fichiers multimédias ou des logiciels pouvant être télécharges. Vous pouvez étabir des liens vers n'importe quel texte ou n'importe qu'elle image d'un document, même s'iltses trouvent dans un en-tête, une liste, un tableau, un élément à positionnement absolu (élément PA) ou un cadre. Il existe différentes méthodes de création et de gestion de liens. Certains concepteurs de pages Web préférent créé des liens vers des pages ou des fichiers qui n'existent pas encore, alors que d'autres préférent créé d'abord tous les fichiers et pages, puis ajouter les liens. Une autre méthode de gestion des liens consiste à créé des pages de type « espace réservé » qui vous permettent d'ajouter des liensrapidement et de les vérifier avant de terminer toutes les pages de votre site. More Help topics "Test de liens dans Dreamweaver" on page 296 Chemins absolut, relatifs au documents et relatifs à la racine du site Pour creer des liens, il est indispensable de comprendre le chemin d'acces qui s'établit entre le document ou l'actif à partir duquel vous établissez un lien et le document pointé par ce lien. Chaque page Web possède une adresse unique, appelée URL (Uniform Resource Locator) Cependant, lorsque vous créez un lien local (entre deux documents du même site), vous n'avez en général pas besoin de spécifique l'URL completé du document vers lequel vous créez le lien ; il est préféable 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 example, http://www.adobe.com/support/dreamweaver/contents.html). - Chemins relatifs au document (par exemple dreamweaver/contents.html). - Chemins relatifs à la racine du site (par exemple /support/dreamweaver/contents.html). Dreamweaver yous permit de besoin ielement le type de chemin a creer pour vos liens. Note: Il est préférible d'utiliser le type de lien qui vous convient le比较好, qu'il soit relatif à la racine du site ou au document. L'exploration des liens, contrairement à la saisie des chemins, garantit que vous entrez toujours le chemin correct. More Help topics "Définir le chemin relatif des nouveaux liens" on page 292 "Utilisation de sites Dreamweaver" on page 40 Chemins absolutus Les chemins absolus indiquent l'URL completé du document lié, y compris le protocole à utiliser (en général http:// pour les pages Web), par exemple, http://www.adobe.com/support/dreamweaver/contents.html. Pour un actif de type image, l'URL entière peut ressembler à http://www.adobe.com/support/dreamweaver/images/image1.jpg. Vou devez utiliser un chemin absolu lorsque vous creez un lien vers un document ou un actif situé en dehors du site courant. Vous pouvez également utiliser des liens de chemins absolus pour les liens locaux (vers des documents sur le même site), mais cette approche est déconseillée. Si vous déplacez le site vers un autre Domaine, tous les liens de chemins absolus locaux seront rompus. De plus, l'utilisation de chemins relatifs pour les liens locaux offre une plus grande souplesse si vous nevez déplacer des fichiers au sein de votre site. Note: Lors de l'insertion d'images (et non de liens), vous pouvez utiliser un chemin absolu vers une image qui réside sur un serveur distant (c'est-à-dire, une image qui n'est pas disponible sur le disque dur local). Chemins relatifs au document Les chemins relatifs au document sont généralement préféribles pour les liens locaux dans la plupart des sites Web. Ils sont particulièrement utiles lorsque le document actif et le document ou l'actif cible du lien se trouvent dans le même dossier et le resteront vainemblablement. Vous pouvez également utiliser un chemin relatif au document ou à l'actif pour pointer sur un document situé dans un autre dossier, en indiquant le chemin entre le document actif et le document lié, au sein de la hierarchie de dossiers. Indiquer un chemin relatif au document consiste tout simplement a laisser de cote la partie du chemin absolu qui est identique pour le document actuel et le document ou l'actif lie, en n'indiquant que la partie du chemin qui differe. Par exemple, supposons que la structure de votre site soit la suivante : Pour étabir un lien depuis contents.html vers hours.html (ces deux fichiers sont dans le même dossier), utilisez le chemin relatif heures.html : Pour étabir un lien de contents.html vers tips.html (qui se trouve dans le sous-dossier « resources »), utilisez le chemin relatif resources/tips.html. A chaque barre oblique (/), vous descendez d'un niveau dans la hierarchie des dossiers. Pour étabir un lien de contents.html vers index.html (qui se trouve dans le dossier parent, un niveau au-dessus de contents.html), utilisez le chemin relatif ../index.html. Deux points et une barre oblique (./) permettent de remonter d'un niveau dans la hierarchie des dossiers. Pour étabir un lien de contents.html vers catalog.html (qui se trouve dans un autre sous-dossier du dossier parent), utilisez le chemin relatif ../products/catalog.html. Ici, la série ../ fait remonter au dossier parent, et products/ fait redescendre dans le sous-dossier « products ». Lorsque vous déplacez des fichiers sous la forme d'un groupe (par exemple, lorsque vous déplacez un dossier entier, afin que tous les fichiers au sein de ce dossier conservent les mêmes chemins relatifs entre eux), il n'est pas nécessaire demettre à 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 demettre ces liens à jour (si vous déplacez ou renommez des fichiers dans le panneau Fichiers, Dreamweaver met automatiquement à jour tous les liens concernés). Chemins relatifs à la racine du site Les chemins relatifs à la racine du site représentent le chemin d'accès à un document à partir du dossier racine du site. Ces chemins peuvent être utiles si vous travailliez sur un grand site Web qui utilise plusieurs serveurs ou un seul serveur qui est l'hôte de plusieurs sites. Toutefois, si vous n'êtes pas familier avec ce type de chemin, adoptez plutôt les chemins relatifs au document. Un chemin relat à la racine commence par une barre oblique, qui représenté le dossier racine du site. Par exemple, /support/tips.html est le chemin relat à la racine d'un fichier (tips.html) situé dans le sous-dossier « support » de la racine du site. Un chemin relatif à la racine représenté souvent le meilleur moyen d'indiquer les liens si vous déplacez féquement des fichiers HTML d'un dossier à un autre dans votre site Web. Lorsque vous déplacez un document qui contient des liens relatifs à la racine du site, il n'est pas nécessaire de modifier les liens, car les liens sont relatifs à la racine du site, et non au document lui-même. Par exemple, si vos fichiers HTML utilisent des liens relatifs à la racine du site pour les fichiers dépendants (les images en particulier), les liens des fichiers dépendants restent valides si vous déplacez les fichiers HTML. Toutefois, si vous déplacez ou renommez les documents sur lesquels pointent des liens relatifs à la racine du site, vous devrezmettre 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, vousdezestmettreà jour tous les liens relatifs à la racine du site vers les fichiers que ce dossier contient (si vous déplacez ou renommez des fichiers dans le panneau Fichiers, Dreamweaver met automatiquement à jour tous les liens concernés). Etablissement de liens Liens entre fichiers et documents Avant de creator des liens, assurez-vous de bien comprendre le fonctionnement des chemins relatifs au document, des chemins relatifs à la racine du site et des chemins absolus. Vous pouvez creator plusieurs types de liens dans un document : Un lien vers un autre document ou fichier, tel que le fichier d'une image, d'une animation ou d'un son Un lien vers une ancre nommée, qui permet de sauter à un emplacement spécifique au sein d'un document Un lien de courriel, qui cree un courriel vierge avec l'adresse du destinataire deja indiquee. Des liens nuls et de script, qui permettent d'affector des comportements à un objet ou de créé un lien qui exécut un code JavaScript Utilisez l'inspecteur Propriétés et l'icone Pointer vers un fichier pour creer des liens à partir d'une image, d'un objet ou de texte vers un autre document ou fichier. Dreamweaver create les liens vers d'autres pages de votre site à l'aide de chemins relatifs au document. Vous pouvez toute fois demander à Dreamweaver de creator les nouveaux liens à l'aide de chemins relatifs à la racine du site. Important: Il est conseillé de tous jours enregistrer un nouveau fichier avant de créé un chemin relatif au document, car ce dernier n'est pas valide sans point de départ bien définit. 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. Voutrouvrez undidacticiel consacré à la création de liens à l'adresse www.adobe.com/go/vid0149_fr. More Help topics "Chemins absolus, relatifs au documents et relatifs à la racine du site" on page 287 Didacticiel de creation de liens Association de comportements JavaScript à des liens Vou puez associer un comportement à n'importe quel lien d'un document. Les comportements décrits ci-dessous peuvent etre très interessants lorsque vous inserez des éléments liés dans vos documents. Texte de la barre d'etat Permet de spécifier le texte d'un message et de l'afficher dans la barre d'etat dans la partie inférieure gauche de la fenetre du navigateur. Par exemple, vous pouvez utiliser ce comportement pour déscrire la destination d'un lien dans la barre d'etat, au lieu d'afficher l'URL associée Ouvrir la fenêtre Navigateur Ouvre une URL dans une nouvelle fenêtre. Vous pouvez spécifique les propriétés de la nouvelle fenêtre, notamment son nom, sa taille et ses attributs (redimensionnable ou non, dispose d'une barre de menu ou non, etc.). Menu de reroutage modifie un menu de reroutage. Vous pouvez modifier la liste du menu, spécifique un fichier lié différent ou changer l'emplacement du navigateur dans lequel ouvrir le document lié. More Help topics "Application de comportements JavaScript intégrés" on page 368 Création d'un lien vers des documents à l'aide de l'inspecteur Propriétés Vou puez utisier l'icone de dossier de linspecteur Propriétés ou la zone Lien pour creer des liens a partir d'une image, un objet, du texe ou tout autre document ou fichier. 1 Sélectionnéz le texte ou une image dans la fenêtre de document en mode Création. 2 Ouvrez l'inspecteur Propriétés (Fenêtre > Propriétés) et procédez de l'une des manières suivantes : - Cliquez sur l'icone représentant un dossier située à droite de la zone Lien pour rechercher et selectionner un fichier. Le chemin d'accès du document pointé par le lien s'affiche dans la zone URL. Utilisez le menu dérouulant Relatif à dans la boîte de dialogue Sélectionner fischiert HTML pour spécifier si le chemin est relatif à la racine ou au document, puis cliquez sur Sélectionner. Le type de chemin sélectionné ne s'applique qu'au lien actif. Vous pouvez modifier le paramètre par défaut de la zone Relatif à pour le site. Tapez le chemin et le nom de fichier du document dans la zone Lien. Pour creer un lien vers un document de sua site, indique un chemin relat au document ou a la racine du site. Pour creer un lien vers un document situé en dehors du site, indique un chemin absolu, avec le type de protocole (par exemple, http://). Vous pouvez utiliser cette approche pour entrer un lien vers un filchier n'ayant pas encore ete create. 3 Dans le menu dérouulant Cible, Sélectionné un emplacement dans lequel ouvrir le document : - _blank charge le document lié dans une nouvelle fenêtre, sans nom, du navigateur. _parent charge le document lié dans le cadre parent ou dans la fenêtre parente du cadre contenant le lien. Si le cadre contenant le lien n'est pas imbriqué, le document lié est chargé dans la fenêtre de base du navigateur. _self charge le document lié dans le même cadre (ou la même fenêtre) que le lien. Il s'agit de la cible par défaut, il est donc en général inutil de la spécifier. _top charge le document lié dans la fenêtre de base du navigateur, en supprimant tous les cadres. Si tous les liens de la page doivent etre definis sur la meme cible, vous pouvez spécifier celle-ci une fois pour toutes en choisisant la commande Insertion > HTML > Balises d'en-tete > Base et en selectionnant les informations cible. Pour plus d'informations sur le ciblage des cadres, voir la section "Contrôle des contenus de cadre avec des liens" on page 216. More Help topics "Chemins absolus, relatifs au documents et relatifs à la racine du site" on page 287 Création d'un lien vers des documents en utilisant l'icône Pointer vers un fichier 1 Sélectionnéz le texte ou une image dans la fenêtre de document en mode Création. 2 Creez un lien de l'une des deux façon suivantes : - Faites glisser l'icone « Pointer vers un fichier » (icone cible), sur la droite de la zone Lien de l'inspecteur Propriétés, et pointez sur une ancre visible dans le document actuel, une ancre visible dans un autre document ouvert, un élément possédant un ID unique ou un document dans le panneau Fichiers. - Tout en maintainant la touche Maj enforcée, faites glisser le pointeur de la souris depuis la seLECTION et pointez sur une ancre visible dans le document actuel, une ancre visible dans un autre document ouvert, un élément possédant un ID unique ou un document dans le panneau Fichiers. Note: Vous pouvez创建工作 un lien vers un autre document ouvert à condition que vos documents ne soient pas agrandis dans la fenêtre de document. Pour afficher les documents en mosaique, Sélectionnez Fenêtre > Cascade ou Fenêtre > Mosaique. Lorsque vous pointez vers un document ouvert, celui-ci passé au premier plan de votre écran pendant que vous effectuez toute série. More Help topics "Creation d'un lien vers un emplacement spécifique au sein d'un document" on page 293 Ajout d'un lien en utilisant la commande Hyperlien La commande Hyperlien vous permet de creer un lien vers une image, un objet ou vers un autre document ou fjchier. 1 Placez le curseur à l'endetroit du document où vous souhaitez que le lien apparaisse. 2 Procedez de l'une des manieres suivantes pour afficher la boite de dialogue Hyperlien : - Choisissez Insertion > Hyperlien. - Dans la catégorie Commun du panneau Insertion, cliquez sur le bouton Hyperlien. 3 Tapez le texte du lien et, après la zone Lien, tapez le nom du fichier vers lequel un lien va etre établi (ou cliquez sur l'icone du dossier pour rechercher le fichier). 4 Dans le menu dérouulant Cible, choisissez la fenêtre dans laquelle le fichier devra s'ouvrir ou tapez son nom Les noms de tous les cadres du document actif apparaisent dans la liste déroulante. Si vous spécifie un cadre inexistant, la page liée s'ouvre dans une nouvelle fenêtre portant le nom que vous avez spécifique. Vous pouvez également désigner parmi les noms de cible réservés suivants : blank charge le fichier lie dans une nouvelle fenetre, sans nom, du navigateur. - _parent charge le fichier lié dans le jeu de cadres parent, ou dans la fenêtre parente du cadre contenant le lien. Si le cadre contenant le lien n'est pas imbriqué, le document lié sera chargé dans la fenêtre de base du navigateur. - _self charge le fichier lié dans le même cadre, ou dans la même fenêtre, que le lien. Cette cible étant cette par défaut, vous n'avoz généralement pas à la specifier. - _top charge le fichier lié dans la fenêtre de base du navigateur, supprimant ainsi tous les cadres. 5 Dans la zone Ordre des tabulations, tapez une valeur correspondant à l'ordre de l'onglet. 6 Dans la zone Titre, tapez un titre pour le lien. 7 Dans la zone Clé d'accès, tapez une équivalence de clavier (une dette) pour selectionner le lien dans le navigateur. 8 Cliquez sur OK. Définir le chemin relatif des nouveaux liens Par défaut, Dreamweaver creé les liens vers d'autres pages de votre site à l'aide de chemins relatifs au document. Pour utiliser des chemins relatifs à la racine, vous doivent définir un dossier local dans Dreamweaver en désissant un dossier racine local qui servira d'équivalent à la racine des documents sur le serveur. Dreamweaver utilise ce dossier pour déterminer les chemins relatifs à la racine pointant vers des fichiers. 1 Choisissez Site > Gérer les sites. 2 Dans la boîte de dialogue Gérer les sites, double-cliquez sur votre site dans la liste. 3 Dans la boite de dialogue Configuration du site, développement Paramétres avances, puis sélectionnez la catégorieInfos locales. 4 Définissez le chemin relatif des nouveaux liens en selectionnant 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éé avec Dreamweaver. Note: Le contenu lié à un chemin relatif à la racine n'apparait 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'options Aperçu à l'aide d'un fichier-temporaire dans Edition > Préférences > Aperçu dans le navigateur. En effet, à la différence des serveurs, les navigateurs ne reconnaissent pas les racines de sites. Un moyen rapide de lancer l'aperçu d'un contenu lié à des chemins relatifs à la racine consiste à placer le fichier sur un serveur distant, puis à selectionner Fichier > Aperçu dans le navigateur. 5 Cliquez sur Enregistrer. Le paramètre du nouveau chemin ne s'applique qu'au site actif. More Help topics "Chemins absolus, relatifs au documents et relatifs à la racine du site" on page 287 "Utilisation de sites Dreamweaver" on page 40 Création d'un lien vers un emplacement spécifique au sein d'un document Vous pouvez utiliser l'inspecteur Propriétés pour étabrir un lien vers une section donnée d'un document en créé au préalable des ancre nommées. Les ancre 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 creator des liens vers ces ancre nommées, qui amènent rapidement le visiteur à la position spécifique. La création d'un lien vers une ancre nommée s'effectue en deux étapes : il faut d'abord creator l'ancre nommée, puis creator un lien pointant sur elle. Note: Vous ne pouvez pas placer d'ancre nommée dans un élément PA (à positionnement absolu). Création d'une ancre nommée 1 Dans la fenetre de document, en mode Creation, placez le curseur a l'endetroit ou inserer l'ancre nommée. 2 Effectuez l'une des opérations suivantes : Choisissez Insertion > Ancre nommée. Appuyez sur Ctrl+A (Windows) ou Commande+Option+A (Macintosh). Dans la catégorie Commun du panneau Insertion, cliquez sur le bouton Ancre nommée. 3 Dans la zone Ancre nommée, entrez le nom de l'ancre puis cliquez sur OK (le nom de l'ancre ne peut pas containir d'espaces). Le marquee de l'ancre apparait au niveau du point d'insertion. Note: Si vous ne Assistance visuelles > Elements invisibles. Création d'un lien vers une ancre nommée 1 Dans la fenetre de document en mode Creation, selectionnez le texte ou l'image a partir desquels creer le lien. 2 Dans la zone Lien de l'inspecteur Propriétés, tapez le signe dièse (#) et le nom de l'ancre. Par exemple, pour créé un lien vers une ancre nommée « début » dans le document actif, tapez #top. Pour créé un lien vers une ancre nommée « début » dans un autre document figurant dans le même dossier, tapez filename.html#top. Note: La casse (majuscules/minuscules) est importante dans les noms d'ancre. Création d'un lien vers une ancre nommée à l'aide de la méthode Pointer vers un fichier 1 Ouvrez le document contenant l'ancre nommée. Note: Choisissez Affichage > Assistances visuelles > Éléments invisibles pour faire apparaitre l'ancré, le cas échéant. 2 Dans la fenêtre de création du document, Sélectionné le texte ou l'image à partir desquels créé le lien (s'il s'agit d'un autre document ouvert, vous doivent basculer sur celui-ci). 3 Effectuez l'une des opérations suivantes : Cliquez sur l'icone du pointeur (icone cible) à droite de la zone Lien de l'inspecteur Propriétés et faites-la glisser sur l'ancré vers laquelle vous souhaitez créé un lien, dans le même document ou dans tout autre document ouvert. En maintainant la touche Maj enfoncée, dans la fenêtre de document, faites glisser l'image ou le texte seLECTIONné : sur l'ancré vers laquelle vous souhaitez créé un lien, dans le même document ou dans tout autre document ouvert. Creation d'un lien de courriel Un lien de courriel ouvre une nouvelle fenêtre de message (dans le programme de messagerie associé au navigateur de l'utilisateur) lorsque l'utilisateur clique dessus. La zone A : de la fenêtre du courriel est automatiquement complétée par l'adresse indiquée dans le lien. Création d'un lien de courriel à l'aide de la commande Insertion - Lien de messagerie 1 Dans la fenêtre de document, placez le curseur à l'endetroit où afficher le lien de courriel ou seLECTIONnez le texte ou l'image qui doit représentier ce lien. 2 Procedez de l'une des manières suivantes pour insérer le lien : Choisissez Insertion > Lien de messagerie. Dans la catégorie Commun du panneau Insertion, cliquez sur le bouton Lien de messagerie. 3 Dans la zone Texte, saississez ou modifiez le corps du courriel. 4 Dans la zone Adresse électronique, tapez l'adresse électronique, puis cliquez sur OK. Création d'un lien de courriel à l'aide de l'inspecteur Propriétés 1 Sélectionnéz le texte ou une image dans la fenêtre de document en mode Création. 2 Dans la zone Lien de l'inspecteur Propriétés, tapez mailto: suivi d'une adresselectronique. N'insérez pas d'espaces entre le signe deux points et l'adresse électronique. Remplissage automatique de la ligne d'objet d'un courriel 1 Creez un lien de courriel à l'aide de l'inspecteur Propriétés, comme expliqué ci-dessus. 2 Dans la zone Lien de l'inspecteur Propriétés, ajoutez ?subject= après l'adresse de courriel, puis entrez un objet après le signe « égal à ». N'ajoutez pas d'espaces entre le point d'interrogation et la fin de l'adresse de courriel. L'entrée entière doit seprésenter comme suit : mailto:[e-mail]?subject=Message de notre site Réciation de liens nuls et de liens de script Un lien nul est un lien non désigné. Utilisez des liens nuls pour attacher des comportements à des objets ou du texte sur une page. Par exemple, vous pouvez attacher un comportement à un lien nul pour intervertir une image ou afficher un élément PA lorsque le pointeur passée au-dessus du lien. Les liens de script exécutent un code JavaScript ou appelant 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éçuter des calculs, de valider des formulaires et d'effectuer d'autres tâches de traitement lorsqu'un visiter clique sur un élément spécifique. More Help topics "Application d'un comportement" on page 367 Creation d'un lien nul 1 Sélectionnez du texte, unobjet ou une image dans la fenêtre de document en mode Création. 2 Dans l'inspecteur Propriétés, tapez javascript; (le mot javascript suivi par deux points puis par un point-virgule) dans la zone Lien. Création d'un lien de script 1 Sélectionnéz du texte, un objet ou une image dans la fenêtre de document en mode Création. 2 Dans la zone Lien de l'inspecteur Propriétés, tapez javascript: suivi du code JavaScript ou d'un appel de fonction JavaScript. (N'insérez pas d'espace entre le signe deux points et le code ou l'appeal.) Mettre les liens à jour automatiquement Dreamweaver peutmettreàjourlesliensversundocumentetàpartirdecedernierlorsquvoule déplacezou renommeau sein d'un site local.Cette fonctionfonctionne defaqon optimale lorsqu'unsite tout entier (ou une section entieredecelui-ci)est stocké survoitrésquudurlocal.Dreamweaver ne modifiepas lesfichiers du dossier distant avant queyouyplaciezlesfichiorslocauxouqueyoulesarchiviez dansle serveur distant. Pour accélérer le processus de mise à jour, Dreamweaver peut creer un fjichier cache dans lequel il conserveva la liste de tous les liens du site local. Le fjichier cache est mis à jour chaque fois que vous ajoutez, modifiez ou supprimez des liens sur votre site local. Activation de la mise à jour automatique des liens 1 Choisissez Edition > Preférences (Windows) ou Dreamweaver > Préférences (Macintosh). 2 Dans la boite de dialogue Preférences, Sélectionnez la catégorie Général dans la liste de gauche. 3 Dans la section Options de document des préférences Général, Sélectionnez une option dans le menu dérounant Mettre à jour les liens lors du déplacement de fichiers. Toujours Met automatiquement à jour tous les liens vers un document sélectionné et à partir de ce dernier lorsque vous le déplacez ou le renommez Jamais Ne met pas automatiquement à jour tous les liens vers un document sélectionné et à partir de ce dernier lorsque vous le déplacez ou le renommez. Invite Affiche d'abord une boite de dialogue qui repertorie tous les fichiers affectes par le changement. Cliquez sur Mettre à jour pourmettre à jour les liens de ces fichiers, ou sur Ne pas mettre à jour pour laisser les fichiers intacts. 4 Cliquez sur OK. Creation d'un fjichier cache pour votre site 1 Choisissez Site > Gérer les sites. 2 Sélectionnez un site, puis cliquez sur Modifier. 3 Dans la boite de dialogue Configuration du site, développement Paramétres avances, puis sélectionnez la catégorieInfos locales. 4 Dans la catégorieInfos locales, selectionnez l'option Activer le cache. Après avoir lancé Dreamweaver, la première fois que vous modifiez ou supprimez des liens vers des fischiers de votre dossier local, Dreamweaver vous invite à charger le cache. Si vous cliquez sur Oui, Dreamweaver charge le cache et met à jour tous les liens vers le filchier que vous venez de modifier. Si vous cliquez sur le bouton Non, la modification est consignée dans le cache, mais Dreamweaver ne charge pas le cache et ne met pas les liens à jour. Sur les sites de grande taille, le chargement du cache peut prendre quelques minutes du fait que Dreamweaver doit déterminer si le cache est périme en comparant l'heure et la date des fichiers qui se trouvent sur le site local à celles enregistrées dans le cache. Si vous n'avez pas modifié de fichiers hors de Dreamweaver, vous pouvez cliquer sur le bouton d'arrêt en toute sécurité lorsque le bouton apparait. Récrétation du cache Dans le panneau Fichiers, selectionnez Site > Avancé > Recréer le cache du site. Modification d'un lien au niveau du site Outre la mise à jour automatique des liens que Dreamweaver effectue chaque fois que vous déplacez ou renommez un fichier, vous pouvez modifier manuellement tous les liens (y compris les liens de messagerie électronique, ftp, nuls et de scripts) pour qu'ils pointent sur un autre chemin. Cette option est surtout utile lorsque vous souhaitez supprimer un fjichier auquel d'autres fjichiers sont liés, mais pouvez l'utiliser à d'autres fins. Par exemple, supposons que vous ayez établi un lien entre les mots « films du mois » et /films/juillet.html dans l'ensemble de votre site. Le 1er août, vous voudrez modifier ces liens pour qu'ils pointent vers /films/aout.html. 1 Sélectionnez un fichier dans l'affichage local du panneau Fichiers. Note: Si vous changez un lien de messagerie électronique, ftp, nul ou de script, vous n'avez pas besoin de Sélectionner de fichier. 2 Choisissez Site > Modifier le lien au niveau du site. 3 Complétez les options suivantes dans la boîte de dialogue Modifier le lien au niveau du site : Modifier tous les liens à Cliquez sur l'icone du dossier à parcourir et seLECTIONnez le fichier cible vers lequel les liens doivent être rompus. Si vous changez un lien de messagerie électronique, ftp, nul ou de script, tapez le texte complet du lien à changer. En liens à to Cliquez sur l'icone de dossier à parcourir et seLECTIONnez le nouveau fichier vers lequel étabir un lien. Si vous changez un lien de messagerie électronique, ftp, nul ou de script, tapez le texte complet du lien de remplacement. 4 Cliquez sur OK. Dreamweaver met à jour tous les documents qui pointent vers le fjichier sélectionné, en les faisant pointer vers le nouveau fjichier suivant le format de chemin d'accès existant (par exemple, si l'ancien chemin était relatif au document, le nouveau l'est également). Lorsqu'un lien a eté changé au niveau de tout le site, le fjichier sélectionné devient orphelin (plus aucun fjichier du disque local ne pointe vers lui). Vous pouvez le supprimer en toute sécurité sans risque d'alterer des liens sur le site local Dreamweaver. Important: Ces modifications se produitant localement, vous devez supprimer manuellement le fjichier orphelin correspondant dans le dossier distant et placer ou archiver tous les fjichiers dans lesquels les liens ont ete modifiés, sinon les visiteurs ne pourront pas visualiser les modifications. Test de liens dans Dreamweaver Les liens ne sont pas actifs dans Dreamweaver ; c'est-à-dire que vous ne pouvez pas ouvrir les documents liés en cliquant sur le lien dans la fenêtre de document. Effectuez l'une des opérations suivantes : Sélectionnéz 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. Note: Le document lié doit résider sur le disque local. More Help topics "Rechercher les liens rompus, externes et orphelins" on page 301 "Correction de liens rompus" on page 302 Menu de reroutage Insertion de menus de reroutage Un menu de reroutage est un menu dérouulant dans un document, visible pour tous les visiteurs du site et répertioriant les liens vers des documents ou des fischiers. Vous pouvez créé 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 fisquier pouvant être ouvert dans un navigateur. Chaque option d'un menu de reroutage est associée à une URL. Lorsque les utilisateurs choisisent une option, ils sont redirigés (« reroutés ») vers l'URL associée. Ces menus sont insérés à l'aide de l'objet de formulaire Menu de reroutage. Un menu de reroutage peut composertrois composants : (Facultatif) Une invite de selection au sein du menu, par exemple une description de catégorie pour les éléments du menu ou des instructions, du type « Faites votrechoix » (Obligatoire) Une liste d'éléments de menu de reroutage : l'utilisateur désit une option et le document ou le fjchier lié s'affiche. (Facultatif) Un bouton Aller. More Help topics "Application du comportement Menu de reroutage" on page 373 "Application du comportement Menu de reroutage Aller" on page 373 Insertion d'un menu de reroutage 1 Ouvrez un document, puis placez le curseur dans la fenetre de document. 2 Effectuez l'une des opérations suivantes : Choisissez Insertion > Formulaire > Menu de reroutage. Cliquez sur le bouton Menu de reroutage de la catégorie Formulaires du panneau Insertion. 3 Complétez les options de la boîte de dialogue Insérer menu de reroutage, puis cliquez sur OK. Voici une liste partielle des options : Boutons Plus (+) et Moins (-) Cliquez sur Plus pour insérer un élément ; cliquez à nouveau sur Plus pour en ajouter un autre. Pour supprimer un élément, Sélectionné-à et cliquez sur Moins. Boutons fléchés Sélectionnez un élément et cliquez sur les boutons fléchés pour le déplacer vers le haut ou le bas de la liste. Text Tapez le nom d'un élément sans nom. Si votre menu contient une invite de sélection (telle que « Faites vous choice »), tapez-la ici en tant que premier élément de menu (dans ce cas, vousdez au其次 sélectionner l'option Sélectionner le premier élément après le changement d'URL située en bas). Si selectionné, aller à l'URL Naviguez jusqu'au fichier cible ou tapez son chemin. Ouvrir les URL dans Spécifiez si le fjchier doit etre ouvert dans la meme fenetre ou dans un cadre. Si le cadre a designer comme cible n'apparait pas dans le menu deroulant, fermez la boite de dialogue Inserer menu de reroutage, puis donne un nom au cadre. Menu Insérer bouton Aller après Choisissez d'insérer un bouton Aller au lieu d'une invite de seLECTION de menu. Selectionner le premier élément après le changement d'URL Sélectionnez cette option si vous avez inséré une invite de selection de menu (« Faites votrechoix ») en tant que premier élément du menu. More Help topics "Affichage et définition des des propriétés et des attributs de cadre" on page 213 Modification des éléments d'un menu de reroutage Vou puez modifier l'ordre des éléments dans le menu ou le fichier auquel un élément est lié, et vous pouvez ajouter, supprimer ou renomer un élément. Pour modifier l'emplacement d'ouverture d'un fisier lie ou pour ajouter ou modifier une invite de selection de menu, vous doivent appliquer le comportement Menu de reroutage du panneau Comportements. 1 Ouvrez l'inspecteur Propriétés (Fenêtre > Propriétés), s'il n'est pas déjà ouvert. 2 Dans la fenetre de creation du document, cliquez sur l'objet Menu de reroutage pour le selectionner. 3 Dans l'inspecteur Propriétés, cliquez sur le bouton Valeurs de la liste. 4 Utilisez la boite de dialogue Valeurs de la liste pour apporter vos modifications aux éléments de menu et cliquer sur OK. More Help topics "Application du comportement Menu de reroutage" on page 373 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 votrechoix ». Une invite de sélection au sein du menu est reselectionnée après chaque sélection. Utiliser un bouton Aller, qui permet a l'utilisateur de visiter a nouveau le lien deja selectionné. Lorsque vous utilisez un bouton Aller associé à un menu de reroutage, le bouton Aller devient le seul mécanisme permettant a l'utilisateur d'acceder à l'URL associée à la sélection dans le menu. La selection d'un élément de menu dans le menu de reroutage n'a plus pour effet de rediriger l'utilisateur automatiquement vers une autre page ou un autre cadre. Note: Dans la boîte de dialogue Insérer menu de reroutage, vous ne devez seLECTIONner qu'une option pour chaque menu de reroutage, car elles s'appliquent à la totalité du menu de reroutage. Barres de navigation A propos des barres de navigation La fonctionnalité de barre de navigation a été abandonnée depuis Dreamweaver CS5. Adobe recommende d'employer le widget Spry Barre de menus pour creer une barre de navigation. More Help topics "Utilisation du widget Barre de menus Spry" on page 447 Cartes graphiques A propos des cartes graphiques Une carte graphique est une image ayant eté divisée en régions appellées zones réactives. Lorsque vous cliquez sur une zone réactive, une action est executée, par exemple, l'ouverture d'un nouveau fjichier. Les cartes graphiques côté client stockent les informations relatives aux liens hypertextes dans le document HTML, alors que les cartes graphiques côté serveur conservent ces informations dans un fichier de carte séparé. Lorsqu'un visiteur de site clique sur une zone réactive dans l'image, l'URL associée est envoyée directement au serveur. Ceci rend les cartes graphiques côté client plus rapides que leurs équivalents sur le serveur, car celui-ci n'a pas à interpréter les coordonnées du point sur lequel l'utilisateur a cliqué. Les cartes graphiques côté client sont prises en charge par Netscape Navigator à partir de sa version 2.0, par NCSA Mosaic 2.1 et 3.0, et par toutes les versions de Microsoft Internet Explorer. Dreamweaver ne modifie pas les références aux cartes graphiques sur le serveur, dans les documents existants. Vous pouvez utiliser les cartes graphiques côté client et côté serveur dans le même document. Les navigateurs qui prennten en charge les deux types de cartes donnant la priorite aux cartes graphiques côté client. Pour inclure une carte graphique sur le serveur dans un document, vous doivent écrire le code HTML approprié. Insertion de cartes graphiques côté client Pour insérer une carte graphique côte client, creez une zone réactive, puis définisseez un lien qui s'ouvre lorsqu'un utilisateur clique sur la zone réactive. Note: Vous pouvez creer plusieurs zones reactives, mais elles font toutes partie de la meme carte graphique. 1 Sélectionnéz l'image dans la fenêtre de document. 2 Dans l'inspecteur Propriétés, cliquez sur la flèche d'agrandissement située dans le coin inférieur droit pour visualiser toutes les propriétés. 3 Dans la zone Nom de la carte, entrez un nom unique pour la carte graphique. Si vous utilisez plusieurs cartes graphiques dans le même document, voirlez à donner à chaque carte un nom unique. 4 Pour définir les zones de la carte graphique, procédez de l'une des manières suivantes : Sélectionnéz l'outil Cercle et faites glisser le pointeur sur l'image pour creer une zone réactive circulaire. Sélectionnéz l'outil Rectangle et faites glisser le pointeur sur l'image pour creer une zone réactive rectangulaire. Sélectionnéz l'outil Polygone pour définir une zone réactive de forme irrégulière enclinquant 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 apparait. 5 Dans la zone Lien de l'inspecteur Propriétés de la zone réactive, cliquez sur l'icone du dossier pour rechercher le fichier à ouvrir lorsque l'utilisateur clique sur la zone réactive, ou tapez le chemin. 6 Dans le menu dérouulant Cible, choisissez la fenêtre dans laquelle le fichier devra s'ouvrir ou tapez son nom Les noms de tous les cadres du document actif apparaisent dans la liste déroulante. Si vous spécifie un cadre inexistant, la page liée est chargée dans une nouvelle fenêtre portant le nom que vous avez spécifique. Vous pouvez également désigner parmi les noms de cible réservés suivants : blank charge le fichier lie dans une nouvelle fenetre, sans nom, du navigateur. - _parent charge le fichier lié dans le jeu de cadres parent, ou dans la fenêtre parente du cadre contenant le lien. Si le cadre contenant le lien n'est pas imbriqué, le document lié sera chargé dans la fenêtre de base du navigateur. - _self charge le fichier lié dans le même cadre, ou dans la même fenêtre, que le lien. Cette cible étant cette par défaut, vous n'avez généralement pas à la spécifique. - _top charge le fichier lié dans la fenêtre de base du navigateur, supprimant ainsi tous les cadres. Note: L'option Cible n'est disponible que lorsqu'la zone réactive sélectionnée contient un lien. 7 Dans la zone Alt, tapez un texte secondaire à afficher dans les navigateurs qui affichent seulement du texte ou qui t'échéargent les images manuellement. Certains navigateurs affichent ce texte sous forme d'une info-bulle lorsque l'utilisateur fait passer le pointeur de la souris au-dessus de la zone réactive. 8 Repetez les étapes 4 à 7 pour définir d'autres zones réactives dans la carte graphique. 9 Une fois la définition de la carte de l'image terminée, cliquez sur une zone vierge du document pour modifier l'inspecteur Propriétés. Modification des zones réactives d'une carte graphique Vou puez facilement modifier les zones reactives que you creez dans une carte graphique. You pouze déplacer un groupe de zones reactives, redimensionner des zones reactives ou déplacer une zone reactive vers l'avant ou l'arriere dans un élément à positionnement absolu. Vous pouvez également copier une image contenant des zones réactives d'un document vers un autre ou copier une ou plusieurs zones réactives d'une image et les coller vers une autre image. Les zones réactives associées à l'image sont également copées vers le nouveau document. Sélection de plusieurs zones réactives dans une carte graphique 1 Utilisez le pointeur de zone réactive pour sélectionner une zone réactive. 2 Effectuez l'une des opérations suivantes : En maintainant la touche Maj enforcée, cliquez tour à tour sur les autres zones réactives à seLECTIONner. Appuyez sur les touches Ctrl+A (Windows) ou Commande+A (Macintosh) pour sélectionner toutes les zones réactives. Déplacement d'une zone réactive 1 Utilisez le pointeur de zone réactive pour sélectionner la zone réactive. 2 Effectuez l'une des opérations suivantes : Faites glisser la zone réactive vers une nouvelle zone. Utilisez la touche Ctrl et une touche fléchée pour déplacer une zone réactive de 10 pixels dans le sens sélectionné. Utilisez les touches fléchéées pour déplacer une zone réACTIVE de 1 pixel dans le sens sélectionné. Redimensionnement d'une zone réactive 1 Utilisez le pointeur de zone réactive pour sélectionner la zone réactive. 2 Faites glisser une poignée de selection de la zone réactive pour modifier la taille ou la forme de celle-ci. Résolution des problèmes liés aux liens Rechner les liens rompus, externes et orphelins Utilisez la fonction Vérifier les liens pour rechercher les liens rompus et les fichiers orphelins (les fichiers qui existent toujours dans le site mais vers lesquels aucun lien ne pointe dans le site). Vous pouvez faire porter la recherche sur un fichier ouvert, sur une partie ou sur l'ensemble d'un site local. Dreamweaver vérifie uniquement les liens qui pointent vers des documents au sein du même site. Dreamweaver dresse une liste des liens externes qui apparaissent dans le ou les documents sélectionnés, mais ne les vérifie pas. Yououpoez identier et supprimer les fichiers qui ne sont plus utilisés par les autres fichiers de voitre site. More Help topics "Identification et suppression des fichiers non utilisés" on page 86 Vérification des liens au sein du document actif 1 Enregistrez le fjichier dans un emplacement de votre site Dreamweaver local. 2 Choisissez Fichier > Vérifier la page > Liens. Le rapport Liens brises apparait 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érouulant Afficher pour afficher un autre rapport. Le rapport apparait dans le panneau Verificateur de lien (dans le groupe de panneaux Résultats). Vou puevez vérifier les fichiers orphelins lorsque vous vérifie les liens dans un site entier. 4 Pour enregistrer le rapport, cliquez sur le bouton Enregistrer le rapport dans le panneau Vérificateur de lien. Le rapport est un fichier-temporaire ; il sera perdu si vous ne l'enregistrez pas. Vérification des liens dans une partie d'un site local 1 Dans le panneau Fichiers,CHOISSEZ un site dans le menu derouulant Sites en cours. 2 Dans Affichage local, selectionnez les fichiers ou les dossiers à vérifier. 3 Suivez l'une des procédures suivantes pour acceder 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 contextual. Choisissez Fichier > Vérifier la page > Liens. Le rapport Liens brises apparait dans le panneau Verificateur de lien (dans le groupe de panneaux Résultats). 4 Dans le panneau Verificateur de lien, selectionnez Liens externes dans le menu déroulant Afficher pour afficher un autre rapport. Le rapport apparait dans le panneau Verificateur de lien (dans le groupe de panneaux Résultats). Voupez vérifier les fichiers orphelins lorsque vous vérifie les liens dans un site entier. 5 Pour enregistrer un rapport, cliquez sur le bouton Enregistrer rapport dans le panneau Vérificateur de lien. Vérification des liens dans tout le site 1 Dans le panneau Fichiers, choisissez un site dans le menu déroulant Sites en cours. 2 Choisissez Site > Vérifier tous les liens du site. Le rapport Liens brises apparait dans le panneau Verificateur 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érounant Afficher pour afficher un autre rapport. Une listedes fichiers correspondant au type du rapport selectionne s'affiche dans la boite de dialogue Verificateur delien. Note: Si vous avez selectionné Fichiers orphelins comme type de rapport, vous pouvez directement supprimer des fichiers orphelins du panneau Vérificateur de lien en selectionnant un fichier dans la liste et en appuyant sur la touche Supprimer. 4 Pour enregistrer un rapport, cliquez sur le bouton Enregistrer rapport dans le panneau Vérificateur de lien. Correction de liens rompus Une fois le rapport de liens exécuté, vous pouvez corriger les liens rompus et les références d'images directement dans la boîte de dialogue Vérificateur de lien, ou ouvrir les fichiers de la liste et réparer les liens dans l'inspecteur Propriétés. Correction de liens dans le panneau Vérificateur de lien 1 Execuétz un rapport de vérification des liens. 2 Sélectionnez le lien rompu dans la colonne Liens brises (pas dans la colonne Fichiers) du panneau Vérificateur de lien (dans le groupe de pannaux Résultats). Une icône de dossier s'affiche à côté du lien rompu. 3 Cliquez sur l'icone de dossier située en face du lien rompu et naviguez jusqu'àu fichier approprié pour le selectionner, ou entrez le chemin d'accès et le nom de fichier corrects. 4 Appuyez sur Tab ou Entre (Windows) ou Retour (Macintosh). S'il y a d'autres liens rompus vers le même fichier, le système vous invite à réparer également les références dans les autres fichiers. Cliquez sur Oui pour que Dreamweaver mette à jour tous les documents de la liste faisant référence à ce fichier. Cliquez sur Non pour que Dreamweaver mette uniquement à jour la référence actuelle. Note: Si l'option Activer l'archivage et l'extraction de filchier est activée pour ce site, Dreamweaveressaie d'extraire les fichiers qui nécessitent des modifications. S'il ne peut pas extraire un filchier, Dreamweaver affiche un avertissement et laisse les references rompuesinchangées. Correction de liens dans l'inspecteur Propriétés 1 Executez un rapport de verification des liens. 2 Double-cliquez sur une entree de la colonne Fichier dans le panneau Vercificateur de lien (dans le groupe de panneaux Résultats). Dreamweaver ouvre le document, selectionne l'image ou le lien rompu, et met en surbrillance le chemin d'accès et le nom de fichier dans l'inspecteur Propriétés (si l'inspecteur Propriétés n'est pas ouvert,CHOISSEZ 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 surveillance ou cliquez sur l'icone du dossier pour naviguer vers le fichier. Si you mettez a jour une referece d'imag, et si la nouvelle image s'affiche avec une taille incorrrecte, cliquez sur L et H (ou sur le bouton Actualiser) dans l'inspecteur Propriétés pour réinitialiser les valeurs de hauteur et de largeur. 4 Enregistrez le fjichier. Dès que les liens sont réparés, leur entrée disparait de la liste des liens rompus. Si une entrée figure toujours dans la liste après que vous avez indiqué un nouveau chemin d'accès ou nom de fichier dans le vérificateur de lien (ou après avoir enregistré des changements apportés à l'inspecteur Propriétés), Dreamweaver ne peut pas trouver le nouveau fichier et considère toujours que le lien est rompu. Chapter 10: Prévisualisation des pages Prévisualisation des pages Le mode Création vous donne une idée de l'aspect qu'aure votre page sur le Web, mais il ne restitue pas les pages de la même façon que les navigateurs. La fonctionnalité Affichage en direct fournit une représentation plus précise et permet de travailler en mode Code, de façon à visualiser les modifications apportées au concept. La fonction Aperçu dans le navigateur vous permet de voir la façon dont vos pages vont s'afficher dans des navigateurs spécifique. Prévisualisation de pages dans Dreamweaver A propos de l'affichage en direct L'affichage en direct diffère du mode Création traditionnel de Dreamweaver en ce sens qu'il offre un rendu non modifiable et plus réaliste de l'apparace de votre page dans un navigateur. L'affichage en direct ne remplace par la commande Aperçu dans le navigateur, mais fournit只不过 une façon différente de voir à quoi ressemble votre page « en direct » sans devoir quitter l'espace de travail de Dreamweaver. Vou passerez passer à l'affichage en direct à tout moment lorsque vous vous trouvez en mode Création. Toutefois, le passage à l'affichage en direct n'a aucun point commun avec le basculement entre les autres modes d'affichage traditionnels de Dreamweaver (Code/Fractionné/Creation). Lorsque vous passez du mode Création au mode Affichage en direct, vous vous contentez de faire basculer le mode Création d'un état modifiable à un état « en direct » Bien que le mode Création soit fiqué lorsque vous accédez au mode Affichage en direct, le mode Code reste modifiable, ce qui vous permet de modifier le code puis d'actualiser l'affichage en direct pour voir l'effet de vos modifications. Lorsque vous vous trouvez en mode Affichage en direct, vous pouvez également decide d'afficher le code en direct. Le mode Code en direct est similaire au mode Affichage en direct, en ce sens qu'il affiche une version du code que le navigateur exécute pour rendre la page. Tout comme le mode Affichage en direct, le mode Code en direct est un affichage non modifiable. Un autre avantage du mode Affichage en direct est sa capacité à figer le code JavaScript. Par exemple, vous pouvez passer en mode Affichage en direct et survolver les lignes d'un tableau basé sur Spry qui changent de couleur de par l'interaction avec l'utilisateur. Lorsque vous fizez le code JavaScript, le mode Affichage en direct fige la page dans son état actuel. Vous pouvez ensuite modifier votre code CSS ou JavaScript puis actualiser la page pour voir l'effet des modifications. Il peut être utile de figer le code JavaScript dans l'affichage en direct pour voir et modifier les propriétés des différents états d'un menu ou d'autres éléments interactifs qu'il est impossible de voir dans le mode Création traditionnel. Voutrouvez un didacticiel video sur l'utilisation du mode En direct,realise par I'equipe de Dreamweaver,à l'adresse www.adobe.com/go/dw10liveview_fr. Voutrouvrez, a l'adresse ci-apres, une video de l'équipe de conception de Dreamweaver qui présente l'utilisation de la navigation dans le mode En direct: http://www.adobe.com/go/dwcs5livenv_av_fr. Voutrouvrez un didacticiel video relatif à l'utilisation du mode Affichage en direct, aux fichiers associés et à la fenêtre Navigation dans le code à l'adresse www.adobe.com/go/lrvid4044_dw_fr. Prévisualisation des pages en mode Affichage en direct 1 Veillez a bien etre en mode Creation (Affichage > Creation) ou en modes Code et Creation (Affichage > Code et Creation). 2 Cliquez sur le bouton Affichage en direct. Affichage en direct 3 (Facultatif) Apportez les modifications dans le mode Code, dans le panneau Styles CSS, dans une feuille de style CSS externe ou dans tout autre fichier associé. Meme s'il est impossible d'apporter des modifications dans le mode Affichage en direct, les options de modification à d'autres endroits (par exemple dans le panneau Styles CSS ou dans le mode Code) changement au fur et à mesure que vous cliquez dans l'affichage en direct. Voussoupiez travailler dans des fichiers associés (par exemple des feuilles de style CSS) tout en maintainant le focus sur l'affichage en direct. Pour ce faire, ouvre le fichier associé a partir de la barre d'outils Fichiers apparentes, dans le haut du document. 4 Si vous avez aporté des modifications en mode Code ou dans un fisier associé, actualisez l'affichage en direct en cliquant sur le bouton Actualiser de la barre d'outils Document ou en appuyant sur F5. 5 Pour revenir au mode Creation modifiable, cliquez à nouveau sur le bouton Affichage en direct. Prévisualisation du code en direct Le code affché en mode Code en direct est similaire à ce que vous verriez si vous consultiez la source de la page à partir d'un navigateur. Alors que de telles sources de pages sont statiques et ne fournissant que la source de la page à partir du navigateur, le mode Code en direct est dynamique et est mis à jour à mesure que vous interagissez avec la page en mode Affichage en direct. 1 Veillez à vous trouver en mode Affichage en direct. 2 Cliquez sur le bouton Code en direct. Code end direct Dreamweaver affiche le code en direct que le navigateur utiliser pour exécuter la page. Le code est surligné en jaune et ne peut pas être modifié. Lorsque vous interagissez avec des éléments interactifs, le mode Code en direct met en surbrillance les modifications dynamiques apportées au code. 3 Pour désactiver la mise en surbrillance des modifications dans le mode Code en direct,CHOISSEZ AFFICHAGE > Options d'affichage en direct > Surligner les modifications dans le code en direct. 4 Pour revenir au mode Code modifiable, cliquez à nouveau sur le bouton Code en direct. Pour modifier les préférences du mode Code en direct, choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (MacOS), puis choisissez la catégorie Coloration du code. Figer JavaScript Effectuez l'une des opérations suivantes : Appuyez sur la touche F6 - Choisissez Figer JavaScript dans le menu du bouton Affichage en direct. Une barre d'information, en haut du document, vous informe que le code JavaScript est ficé. Pour fermer la barre d'information, cliquez sur son lien Fermer. Options de l'affichage en direct Outre l'option Figer JavaScript, le menu du bouton Affichage en direct comporte d'autres options, qui sont également accessibles via le menu Affichage > Options d'affichage en direct. Figer JavaScript Fige les éléments affectés par JavaScript dans leur état actuel. Dé族自治 JavaScript Déivative JavaScript et rend à nouveau la page de la manière dont elle se désenterait dans un navigateur où JavaScript serait déactivé. Désactiver les plug-ins Désactive les plug-ins et rend à nouveau la page de la manière dont elle se désenterait dans un navigateur où les plug-ins seraient déactivés. Surligner les modifications dans le code en direct Active ou désactive la mise en surbrillance des modifications dans le mode Code en direct. Modification de la page d'affichage en direct dans un nouvel ongel Permet d'ouvrir de nouveaux onglets pour les documents du site vers lesquels vous naviguez à l'aide de la barre d'outils Navigation de l'explorateur ou de la fonctionnalité Suivre le lien. Vous doivent tout d'abord acceder au document, puis désir modifier la page d'affichage en direct dans un nouvel ongel afin de créé un nouvel ongel pour celui-ci. Suivre le lien Rend actif le lien suivant sur lequel vous cliquez en mode En direct. Alternativement, vous pouvez)rèindre un lien actif en cliquant dessus, dans le mode En direct, tout en maintainant la touche CTRL enfonnée. Suivre les liens de manière continue Rend les liens du mode En direct actifs en permanence jusqu'à ce que vous les désactiviez ou que vous fermiez la page. Synchroniser automatiquement les fisiers distants Synchronise automatiquement le fjichier local et le fjichier distant lorsque vous cliquez sur l'icone Actualiser de la barre d'outils Navigation de l'explorateur. Dreamweaver place votre fjichier sur le serveur avant l'actualisation, ce qui garantit que les deux fjichiers soient synchronisés. Utiliser le serveur d'évaluation pour la source de document Option employée principalement par les pages dynamiques ( comme les pages ColdFusion), activée par défaut pour de telles pages. Lorsque cette option est activée, Dreamweaver emploie la version du filchier qui se trouve sur le serveur d'évaluation du site comme source d'affichage en direct. Utiliser des fichiers locaux pour les liens de documents Réglage par défaut pour les sites non dynamiques. Lorsque cette option est activée pour des sites dynamiques qui utilisent un serveur d'évaluation, Dreamweaver emploie les versions locales des fichiers liés au document (par exemple les fichiers CSS et JavaScript) au lieu des fichiers stockés sur le serveur d'évaluation. Vous pouvez ensuite apporter des modifications aux fichiers associés, de manière à voir leur appearance avant de les placer sur le serveur d'évaluation. Si cette option est désactivée, Dreamweaver emploie les versions des fichiers associés qui se trouvent sur le serveur d'évaluation. Paramètres de demande HTTP Affiche une boîte de dialogue de réglages avances où vous pouvez entrer des valeurs relatives à l'affiche de données en direct. Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue. More Help topics "Présentation de la barre d'outils Navigation de l'explorateur" on page 12 "Basculement d'un mode à un autre dans la fenêtre de document" on page 19 "Ouverture des fichiers associés" on page 75 "Affichage des données dynamiques" on page 622 Didacticiel sur l'utilisation du mode Affichage en direct Prévisualisation des pages dans les navigateurs Affichage d'un aperçu dans un navigateur Voupez obtenir un aperçu d'une page dans un navigateur à la demande. Il n'est pas nécessaire de la transférer au préalable sur un serveur Web. Lorsque vous affichez un aperçu d'une page, toutes les fonctions liées au navigateur doivent être opérationnelles, y compris les comportements JavaScript, les liens absolus et relatifs au document, les contrôleux ActiveX® et les plug-ins Netscape Navigator, à condition que vous ayez installé les plug-ins ou les contrôleux ActiveX requis dans vos navigateurs. Avant d'afficher un aperçu d'un document, enregistrez-le, sinon le navigateur n'affiche pas vos modifications les plus récentes. 1 Procedez de l'une des manieres suivantes pour afficher un aperçu de la page : - Choisissez Fichier > Aperçu dans le navigateur, puis selectionné un navigateur dans la liste. Note: Si aucun navigateur ne figure dans la liste,CHOISSES Edition > Prefenciences ou Dreamweaver > Prefenciences (Macintosh), puis selectionnez la catégorie Aperçu située dans la partie gauche du navigateur pour selectionner un navigateur Appuyez sur la touche F12 (Windows) ou Option+F12 (Macintosh) pour afficher la page en cours dans votre navigateur par défaut. Appuyez sur la combinaison de touches Ctrl+F12 (Windows) ou Commande+F12 (Macintosh) pour afficher la page en cours dans votre navigateur secondaire. 2 Cliques sur les liens et testez le contenu de votre page. Note: Le contenu lie à un chemin relatif à la racine n'apparait 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'options 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 désisissez Fichier > Aperçu dans le navigateur pour l'afficher. 3 Fermez la page dans le navigateur après avoir effectué le test. More Help topics "Chemins relatifs à la racine du site" on page 289 Définition des préférences d'aperçu dans un navigateur Vou puez definir les préférences que les navigateurs emploieront lors de l'affichage de l'aperçu d'un site, ainsi que définir les navigateurs principaux et secondaires. 1 Choisissez Fichier > Aperçu dans le navigateur > Modifier la liste des navigateurs. 2 Pour ajouter un navigateur dans la liste, cliquez sur le bouton plus (+), completez la boite de dialogue Navigateurs, puis cliquez sur OK. 3 Pour supprimer un navigateur de la liste, selectionnez-le, puis cliquez sur le bouton moins (-). 4 Pour modifier les paramétres d'un navigateur sélectionné, cliquez sur le bouton Modifier, effectuez les modifications dans la boite de dialogue Modifier le navigateur, puis cliquez sur OK. 5 Sélectionnez l'options Navigateur principal ou Navigateur secondaire pour indiquer si le navigateur sélectionné est le navigateur primaire ou secondaire. Appuyez sur F12 (Windows) ou Option+F12 (Macintosh) pour ouvrir le navigateur principal et sur Ctrl+F12 (Windows) ou Commande+F12 (Macintosh) pour ouvrir le navigateur secondaire. 6 Sélectionnez Aperçu à l'aide d'un filchier temporaire pour creer une copie temporaire qui sera utilisée pour l'aperçu et le déboguage. Déselectionnez cette option si vous souhaitez mettre le document directement à jour. Prévisualisation des pages dans les péripériques mobiles Pour prévisualiser des pages créées dans Dreamweaver sur différents péripériques mobiles, utilisez Device Central avec sa fonction intégrée Small-Screen Rendering d'Opera. Des navigateurs différents sont installés sur les différences péripériques, mais la prévisualisation peut vous donner un bon aperçu du contenu et de son comportement sur un péripérisque donné. 1 Lancez Dreamweaver. 2 Ouverture d'un fichier. 3 Effectuez l'une des opérations suivantes : Sélectionnez Fichier > Aperçu dans le navigateur > Device Central. Dans la barre d'outils de la fenêtre du document, cliquez et maintenez enforcé le bouton du navigateur Aperçu/dèbogage dans le navigateur ©, et Sélectionnez Aperçu dans Device Central. Le fichier est affiché dans l'onglet Emulateur de Device Central. Pour poursuivre le test, cliquez deux fois sur le nom d'un autre péripérisque dans les listes Ensembles de péripériques ou Péripériques disponibles. More Help topics "Utilisation de Device Central et Dreamweaver" on page 400 Chapter 11: Utilisation de code de page Informations générales sur le codage dans Dreamweaver More Help topics "Conseils de code" on page 321 "Définition des préférences de codage" on page 316 "Personnalisation des raccourcis clavier" on page 316 "Conformité des pages avec le langage XHTML" on page 345 "Recherche de balises, d'attributs ou de chaînes de texte dans le code" on page 337 "Enregistrement et chargement de modèles de recherche" on page 337 "Optimisation de l'espace de travail pour le développement visuel" on page 580 "Affichage des enregistrements de base de données" on page 613 Langages pris en charge Adobe® Dreamweaver® CS5 contient à la fois des options permettant de lancer des éditeurs de texte et des options conçues pour vous assister dans la réduction du code, par exemple les conseils de code, et ce dans les langages suivants : HTML XHTML - CSS JavaScript - CFML (ColdFusion Markup Language) VBScript (pour ASP) - C# et Visual Basic (pour ASP.NET) JSP PHP D'autres langages, par exemple le langage Perl, ne sont pas pris en charge par les fonctions de codage spécifique au langage de Dreamweaver; vous pouvez par exemple créé et modifier des fichiers Perl, mais vous ne pourrez pas acceder aux conseils de code. Marquage non valide Si vous document contient du code non valide, Dreamweaver l'affiche en mode Creation et, si les options都是非常 précise, le met en surbrillance en mode Code. Si vous sélectionnez ces éléments dans l'un des deux modes, l'inspecteur Propriétés affiche des informations sur les causes de leur non-validité et sur la manière de corriger les erreurs. Note: L'option de mise en surbrillance du code non valide en mode Code est désactivée par défaut. Pour l'activer, passes en mode Code (Affichage > Code) puis cliquez sur Affichage > Options d'affichage de code > Surligner le code non valide). Voupez egalent indiquer vos préférences concernant la correction automatique de certains types d' éléments de code errones lorsque vous ouvre un document. Modification automatique du code Certaines options de Dreamweaver permettent de nettoyer automatiquement votre code selon vos propres critères. Toutefois, le code n'est corige que si vous activez les options correspondantes ou si l'une de vos opérations entraîne une modification du code. Par exemple, Dreamweaver modifie vos espaces blancs et la casse des attributs uniquement si vous selectionné la commande Appliquer le format source. Quelques-unes des options de réécriture du code sont activées par défaut. Les fonctions Roundtrip HTML de Dreamweaver permettent d'échanger des documents entre un éditeur HTML en mode texte et Dreamweaver, moyen un impact nul ou infime sur le contenu et la structure du code source HTML original du document. Parmi ces fonctionnalités, on compte les suivantes : Vous pouvez lancer un éditeur de texte tiers pour modifier le document actif. Par défaut, Dreamweaver ne modifie pas le code créé ou modifié par un autre主编 HTML, même s'il est incorrect, à moins que vous n'ayez activé les options de réécriture. En l'absence de critères de référence, Dreamweaver conserve telles quelles les balises qu'il ne reconnaît pas, notamment les balises XML. Si une balise non reconnaue encadre une autre balise (par exemple, text), Dreamweaver la marque comme erronée, mais ne modifie pas le code. Vous pouvez activer certaines options de Dreamweaver pourmettre les éléments de code HTML incorrects en surligné (jaune) dans le mode Code. Si vous selectionnez une section en surbrillance, l'inspecteur Propriétés affiche des informations sur l'erreur et la manière de la corriger. Code XHTML Dreamweaver génére du nouveau code XHTML et nettoie le code XHTML existant, conformément à la plupart des specifications XHTML. Vous disposez également des outils permettant de se conformer aux rares specifications XHTML ignorées lors de ce type d'opération. Note: Certains de ces specifications sont également exigées dans diverses versions du langage HTML. Le tableau ci-dessous répertorie les specifications XHTML automatiquement observées par Dreamweaver : Spécification XHTML Actions effectuées par Dreamweaver Une déclaration DOCTYPE doit précérer l'élement racine dans le document, laquelle doit faire référence à l'un des trois fischiers DTD (Document Type Definition) pour XHTML (strict, transitionnel ou jeu de cadres). Ajoute une déclaration XHTML DOCTYPE à un document XHTML :<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Ou, si le document XHTML compte un jeu de cadres :<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> L'élement racine du document doit être html, et l'élementhtml doit désigner l'espace de noms XHTML. Ajoute l'attribut namespace à l'élement html comme suit :<html xmlns="http://www.w3.org/1999/xhtml"> Un document standard doit composer les éléments structurels head, title et body. Un document de jeu de cadres doit composer les éléments structurels head, title et frameset. Dans un document standard, inclut les éléments structurels head, title et body. Dans un document de jeu de cadres, inclut les éléments head, title et frameset. L'imbrication de tous les éléments du document doit être correcte :<p>Voici un <i>exampie incorrect.</p></i><p>Voici un <i>exampie incorrect.</i></p> Génére correctement le code imbriqué et, pendant le nettoyage du code XHTML, corige l'imbrication du code non généré par Dreamweaver. Tous les noms d'éléments et d'attributs doivent être rédigés en minuscules. Impose l'utilisation des minuscules dans les noms d'éléments et d'attributs XHTML généré par ses soins et pendant le nettoyage du code XHTML, indépendamment des préférences de casse définies pour la balise et l'attribut. Tous les éléments doivent se terminer par une balise de fin, à moins qu'ils ne soient déclarés dans le fjichier DTD comme EMPTY. Insère des balises de fin dans le code généré par ses soins, ainsi que pendant le nettoyage du code XHTML. Les éléments vides doivent se terminer par une balise de fin ou la balise de début doit être fermée avec le code />. Par exemple, <br>est incorrect; la forme correcte de la balise est soit <br></br>, soit <br/>. Les éléments vides sont les suivants : area, base, basefont, br, col, frame, hr, img, input, isindex, link, meta et param.Pour garantir la rétrocompatibilité avec les navigateurs non XML, un espace doit précérer le code />(par exemple, <br /> et non<br />). Insère les éléments vides avec un espace avant la barre oblique de fermeture des balises vides dans le code généré par ses soins ainsi que pendant le nettoyage du code XHTML. Il est impossible d'abréger les attributes ; ainsi, <td nowrap> est incorrect; la forme correcte est <td nowrap="nowrap)".Cette rèlle s'availue aux attributs suivants : checked, compact, declare, defer, disabled, ismap, multiple, noysize, noshade, nowrap, redrawly et selected. Insère des paires attribut/valeur complètes dans le code généré par ses soins, ainsi que pendant le nettoyage du code XHTML.Remarque : Un navigateur HTML ne prend pas en charge HTML 4 risque de ne pas pouvoir interpréter ces attributs boolés sous leur forme complète. Tous les attributs doivent être placés entre guillemets. Met les valeurs d'attribut entre guillemets dans le code généré par ses soins, ainsi que pendant le nettoyage du code XHTML. Les éléments suivants doivent composer un attribut idet un attribut name : a, applet, form, frame, iframe, img et map. Par exemple, <a name="intro">Introduction</a> est incorrect; la forme correcte est<a id="intro">Introduction</a> ou <a id="section1" name="intro">Introduction</a>. Affecte la même valeur aux attributs name et id, toutes les fois où l'attribut name est défini par un inspecteur Propriétés, dans le code généré par Dreamweaver, ainsi que pendant le nettoyage du code XHTML. Dans le cas d'scripts dont les valeurs sont de type Enuméré, celles-ci doiventfigurer en minuscules.Une valeur de type Enuméré est une valeur appartenant à une liste donnée de valeurs autorisées ; par exemple, l'attribut align comprend les valeurs autorisées suivantes : center, justify, left et right. Impose l'utilisation des minuscules pour les valeurs de type Enuméré dans le code généré par ses soins, ainsi que pendant le nettoyage du code XHTML. Tous les éléments de script et de style doivent compter un attribut type.(La nécessité de l'attribut de type d'un élément de script a été introduite avec HTML 4, lors de la dépréciation de l'attribut de language.) Définit les attributes de typeet de langage dans les éléments de script ainsi que l'attribut de type dans les éléments de style, mais aussi dans le code généré par ses soins et pendant le nettoyage du code XHTML. Tous les éléments img et area doivent comprendre un attribut alt. Définit ces attributes dans le code généré par ses soins et, pendant le nettoyage du code XHTML, signale les attributes alt manquants. Expressions régulières Les expressions régulières sont des modèles décrivant des combinaisons de caractères dans un texte. Utilisez-les dans vos recherches pour déscrire des concepts tels que « lignes commençant par ‘var’ » ou « valeurs d’support contenant un nombre » Le tableau ci-dessous présente les caractères spéciaux des expressions régulières, leur signification et des exemples d'utilisation. Pour rechercher du texte contenant un des caractères spéciaux Presents dans le tableau, indique qu'il s'agit d'un caractère spécial à l'aide d'une barre oblique inversée. Par exemple, pour rechercher l'astérisque dans la phrase conditions spéciales*, vous pouvez utiliser un modele de recherche tel que celui-ci : spéciales*. Si vous n'indiquez pas l'astérisque comme caractère spécial, vous trouvrez toutes les occurrences de « spéciales » (de même que « spéciale», « spécialess » et « spécialess »), et pas seulement celles qui sont suivies d'un astérisque. Caractère trouve Exemple ^ Début de saisie ou de ligne. ^T trouve « T » dans « Tonnerre de Brest », mais pas dans « La case de l'oncle Tom » Fin de saisie ou de ligne. n trouve « n » dans « malin » mais pas dans « noir » * Le caractère précédent, 0 ou plusieurs fois. um* trouve « um » dans « rhum », « umm » dans « yummy » et « u » dans « rouge » + Le caractère précédent, 1 ou plusieurs fois. um+ trouve « um » dans « rhum », « umm » dans « yummy » mais rien dans « rouge » ? Le caractère précédent, une fois au maximum (en d'autres termes, le caractère précédent est facultatif). st?on trouve « son » dans « Johnson » et « ston » dans « Johnston», mais rien dans « Appleton » ou « tension » . Tout caractère, sauf une nouvelle ligne (retour à la ligne). . an trouve « ran », « tan » et « lan » dans le mot « rantanplan » x|y Soit x, soit y. FF0000 | 0000FF trouve « FF0000 » dans bgcolor="#FF0000" et « 0000FF » dans font color="#0000FF" {n} Exactement n occurrences du caractère précédent. 1{2} trouve « II » dans « elle » et les deux premiers I de « ellille», mais ne trouve rien dans « léger » {n,m} Au moins n et au plus m occurrences du caractère précédent. F{2,4} trouve « FF » dans « #FF0000 » et les quatre premiers F dans #FFFFFF [abc] L'un des caractères entourés de crochets. Spécifiez une plage de caractères à l'aide d'un trait d'union (par exemple, [a-f] équivaut à [abcdef]). [e-g] trouve « e » dans «œil», «f » dans « fil » et « g » dans « garde » [^abc] Tout caractère non inclus entre les crochets. Spécifiez une plage de caractères à l'aide d'un trait d'union (par exemple, [^a-f] équivaut à [^abcdef]). [^aeiou] trouve initialement « r » dans « orange», « b » dans « balle » et « k » dans « eek! » \b Limite de mot (par exemple un espace ou un retour chariot). \bb trouve « b » dans « balle » mais pas dans « gober » ou « snob » \B Tous les éléments sauf les limites de mot \Bb trouve « b » dans « gober » mais pas dans « balle » \d Tout chiffre. C'est l'équivalent de [0-9]. \dtrouve « 3 » dans « C3PO » et « 2 » dans « apparlement 2G ». \D Tout caractère alphabétique et non numérique. C'est l'équivalent de [^0-9]. \Dtrouve « S » dans « 900S » et « Q » dans « Q45 ». \f Saut de page. \n Saut de ligne. \r Retour chariot. \s Tout « espace blanc», ou caractère d'espacement : espace, tabulation, saut de page ou saut de ligne. \sval trouve « val » dans « le val André » mais pas dans « aval » \S Tout caractère autre qu'un espace blanc. \Sval trouve « val » dans « aval », mais pas dans « le val André » \t Tabulation. \w Tout caractère alphanumeric, y compris le caractère de soulignement. C'est l'équivalent de [A-Za-z0-9_]. c\w* trouve « chien » dans « le chien noir », ainsi que « cou » et « chien » dans « le cou du chien noir». \W Tout caractère non alphanumeric. C'est l'équivalent de [^A-Za-z0-9_]. \Wtrouve « & » dans « Tintin&Milou » et « % » dans « 100% ». Ctrl+Entrée ou Maj+Entrée (Windows), ou Contrôle+ Retour ou Maj+Retour ou Commande+Retour (Macintosh) Retour chariot. Veillez à désactiver l'options Ignorer les différences entre les espaces blancs lorsque vous effectuez ce type de recherche si vous n'utilise pas des expressions régulières. Notez que cette recherche porte sur un caractère particulier et non sur la notion de-retour à la ligne ; par exemple, elle ne touvera pas une balise <br>ou <p>. Les caractères de retarder chariot apparaissent en tant qu'espaces en mode Création, et non en tant que sauts de ligne. Utilisez des parenthèses pour définir au sein de l'expression régulière des groupes auxquels il sera fait reférence plus tard ; utilisez 1, 2, $3, etc. dans le champ Remplacer pour faire reférence au premier, deuxième, troisisième, etc., groupe entre parenthèses. Note: Dans la zone de texte Rechercheur, faites refereau groupe entre parentheses mentionné plus tout dans l'expression régulière en indiquant 1 , 2 , 3 etc. au lieu de 1,2, $3. Par exemple, la recherche de ( d + ) ( d + ) ( d + ) et le remplacement par 2 / 21 / 3 échangent le jour et le mois dans une date séparée par des barres obliques permettant ainsi la conversion entre les dates de style américain et les dates de style européen. Code de comportement de serveur Lorsque vous selectionnez un comportement de serveur dans le panneau Comportements de serveur pendant le développement d'une page dynamique, Dreamweaver insère un ou plusieurs blocs de code dans la page pour faire fonctionner le comportement de serveur. Si vous modifiez manuelles le code contenu dans un bloc de code, les panneaux, par exemple le panneau Liaisons et le panneau Comportements de serveur, ne sont plus accessibles pour la modification du comportement du serveur. Dreamweaver detecte les comportements de serveur en se repérant à des modèles de code spécifique dans la page, puis les affiche dans le panneau correspondant. Tout modification du code d'un bloc de code empêcheès lors Dreamweaver de détecter le comportement de serveur et de l'afficher dans le panneau Comportements de serveur. Le comportement de serveur subsiste toutefois dans la page : vous pouvez donc le corriger dans l'environnement de codage de Dreamweaver. Configuration d'un environnement de codage Utilisation d'espaces de travail orientés codeur Vous pouvez modifier l'environnement de codage de Dreamweaver pour l'adapter à la façon dont vous travailliez. Vous pouvez par exemple changer le mode d'affichage du code, définir différents raccourcis clavier ou importer et utiliser vos bibliothèque de balises de prédilection. Dreamweaver is fourni avec plusieurs dispositions d'espace de travail conçues pour offrir une expérience de codage optimale. La fonction Commutation d'espace de travail de la barre Application vous permit de selectionner l'un des espaces de travail suivants : Développpear d'applications, Développpear d'applications Plus, Codeur et Codeur Plus. Tous ces espaces de travail s'affichent par défaut en mode Code (dans la fenêtre de document tout entière ou en modes Code et Création) et comportent des panneaux ancrés du côte gauche de l'écran. À l'exception de Développpear d'applications Plus, ils éliminent tous linspecteur Propriétés de l'affichage par défaut. Si aucun des espaces de travail prédéfinis ne répond précisé à vos attentes, vous pouvez personnaliser la disposition en ouvrant et en encrant des panneaux comme bon vous semble, puis en enregistrant l'espace de travail en tant qu'espace de travail personnelisé. More Help topics "Gestion des fenêtres et des panneaux" on page 25 "Enregistrement et basculement d'un espace de travail à l'autre" on page 29 "Personnalisation des raccourcis clavier" on page 36 "Gestion des bibliothèques de balises" on page 360 Affichage du code Vous pouvez visualiser le code source du document actif de plusieurs façon : en l'affichant dans la fenêtre de document après avoir activé le mode Code, en fractionnant la fenêtre de document pour afficher à la fois la page et son code, ou encore en travaillant dans l'inspecteur de code, qui forme une fenêtre de code distincte. L'inspecteur de code fonctionne comme le mode Code; il peut être considéré comme un mode Code détachable pour le document actif. More Help topics "Modification du format du code" on page 317 "Définition des préférences de conseils de code" on page 324 "Definition des couleurs du code" on page 320 Affichage du code dans la fenêtre de document Choisissez Affichage > Code. Codage et modification simultanée d'une page dans la fenêtre de document 1 Choisissez Affichage > Code et creation. Le code apparait dans le volet supérieur, et la page dans le volet inférieur. 2 Pour afficher la page au premier plan,CHOISSEZ Mode Creation au premier plan dans le menu Affichage de la barre d'outils du document. 3 Pour redimensionner les volets dans la fenetre de document, faites glisser la barre de division à l'endroit approprié. La barre de division est intercalée entre les deux volets. Toutes les modifications apportées dans le mode Création se répercutent automatiquement dans le mode Code. Toutefois, après avoir effectué des modifications en mode Code, vous doivent à jour manuellement le document dans le mode Création ; il vous suffit pour cela de cliquer dans ce mode ou d'appuyer sur la touche F5. Affichage du code dans une fenêtre distincte dans l'inspecteur de code L'inspecteur de code permet de travailler dans une fenetre de code distincte, comme vous le faites en mode Code. Choisissez Fenetre > Inspector de code. La barre d'outils contient les options suivantes: Gestion des fichiers Permet de placer ou d'acquerir le fichier. Aperçu/Débogage dans le navigateur Permet de prévisualiser ou de débogueriste document dans un navigateur. Actualiser mode Creation Met à jour le document en mode Création, de façon à ce qu'il applique les modifications apportées dans le code. Les modifications apportées dans le code n'apparaissent pas automatiquement dans le mode Création : vous doivent exécuter tout d'abord certaines opérations, comme enregistrer le fichier ou utiliser ce bouton. Référence Ouvre le panneau Référence. Consultez la section "Utilisation des documents de référence sur les langages" on page 338. Navigation par code Permet de se déplacer rapidement dans le code. Consultez la section "Accès à une fonction JavaScript ou VBScript" on page 333. Afficher les options Permet de déterminer la façon dont le code est affché. Consultez la section "Définition de l'apparance du code" on page 316. Pour utiliser la barre de codage située dans la partie gauche de la fenêtre, consultez la section “Insertion de code avec la barre d'outils de codage” on page 326. Personnalisation des raccourcis clavier Rien ne vous empêche d'utiliser vos raccourcis clavier préféres dans Dreamweaver. Si vous étés habitué à utiliser des raccourcis clavier spécifique (par exemple, Maj+Entrée pour insérer un saut de ligne, Ctrl+G pour atteindre un code précis), vous pouvez les intégrer dans Dreamweaver au moyen de l'éditeur de raccourcis clavier. Pour plus d'informations, reportez-vous à la section "Personnalisation des raccourcis clavier" on page 36. More Help topics "Manipulation de fragments de code" on page 335 Ouverture de fichiers en mode Code par défaut Lorsque vous ouvrez un fjichier qui ne contient normalementaucun code HTML (par exemple, un fjichier JavaScript), il s'ouvre en mode Code (ou dans l'Inspecteur de code), et non pas en mode Creation. Vous pouvez définir les types de fjichiers à ouvrir en mode Code. 1 Choisissez Edition > Preférences (Windows) ou Dreamweaver > Préférences (Macintosh). 2 Sélectionnéz la catégorie Types de fichiers/Editeurs dans la liste de gauche. 3 Dans la zone de texte Ouvrir en mode Code, entrez les extensions des types de filchier que vous pouze ouvrir automatiquement en mode Code. Insérez un espace entre les extensions. Vous pouvez en ajouter autant que vous le souhaitez. More Help topics "Utilisation d'un éditeur externe" on page 321 "Définition des préférences du programme de validation" on page 344 Définition des préférences de codage A propos des préférences de codage Voupez definir des prefrences de codage, par exemple le formatage du code ou la mise en couleurs, en fonction de vos besoins. Note: Pour définir les préférences avances, utilisez l'éditeur de la bibliothèque de balises (consultez la section "Gestion des bibliothèques de balises" on page 360). Définition de l'apparance du code Le menu Affichage > Options d'affichage de code permet de configurer le renvoi à la ligne des mots, l'affichage du numéro des lignes de code, la mise en surbrillance du code HTML incorrect, la coloration de la syntaxe des éléments de code, la mise en retrait du code, ainsi que l'affichage des caractères masqués. 1 Affichez le document dans le mode Code ou l'Inspecteur de code. 2 Effectuez l'une des opérations suivantes : - Choisissez Affichage > Code et création Cliquez sur le bouton Options d'affichage dans la barre d'outils située en haut du mode Code ou de l'Inspecteur de code. 3 Activez ou déactivé l'une des options suivantes : Renvoi à la ligne Renvoise le code à la ligne pour le rendre visible sans qu'il soit nécessaire de le faire défiler horizontally. Cette option n'insère aucun saut de ligne ; elle a pour chaque fonction de simplifier la consultation du code. Numeros de lignes Affiche le numero des lignes de code sur le cotoe. Caracteres masqués Permet d'afficher les caractères spéciaux au lieu d'un simple espace blanc. Par exemple, un point apparait pour masquerchesque espace, un double chevron remplace chaque tabulation, et une marque de paragraphe remplace chaque saut de ligne. Note: Les retours à la ligne contextuels que Dreamweaver utilise pour le renvoi du texte à la ligne ne sont pas symbolisés par une marque de paragraphe. Surligner le code non valide Active, dans Dreamweaver, le surlignage en jaune du code HTML non valide. Dès la seLECTION d'une balise incorrecte, l'inspecteur Propriétés affiche des instructions pour corriger l'erreur. Coloration de la syntaxe Active ou déactive la mise en couleurs du code. Pour plus d'informations sur la modification des couleurs à appliquer, consultez la section "Définition des couleurs du code" on page 320. Retrait auto Automatise la mise en retrait du code lorsque vous appuyez sur la touche Entrée pendant la réduction du code. La nouvelle ligne de code s'aligne au même niveau que la ligne qui la précède. Pour plus d'informations sur la modification de l'espacement du retrait, consultez l'options Taille de tabulation dans "Modification du format du code" on page 317. More Help topics "Affichage du code" on page 315 "Présentation de la barre d'outils de codage" on page 13 "Définition des préférences de conseils de code" on page 324 Modification du format du code Voupez modifier l'aspect de voite code en definissant des preferences de formatage telles que la mise en retrait, la longueur de ligne et la casse des noms de balises et d'attributs. Toutes les options de formatage de code, à l'exception de l'options Remplacer la casse de, ne s'appliquent automatiquement qu'aux nouveaux documents et aux additions à des documents que vous créez par la suite. Pour modifier le formatage d'un document HTML existant, ouvre ce document puis cliquez sur Commandes > Appliquer le format source. 1 Choisissez Edition > Préférences. 2 Sélectionnéz la catégorie Format du code dans la liste de gauche. 3 Parmi les options suivantes, définissez celles de votrechioix : Retrait Indique si le code génére par Dreamweaver doit etre mis en retrait (en conformite avec les regles de retrait definiies dans ces prefenciences) ou non. Note: La majorité des options de retrait de cette boîte de dialogue ne s'appliquent qu'au code géné ré par Dreamweaver et non au code entré par vos soins. Pour que chaque nouvelle ligne entree s'aligne au même niveau que la précédente, utilisez l'options Retrait auto dans les options d'affichage du mode Code. Pour plus d'informations, consultez la section "Définition de l'apparence du code" on page 316. Avec (Zone de texte ou menu contextual) Spécífie le nombre d'espaces ou de tabulations que Dreamweaver doit utiliser afin demettre en retrait le code généré. Par exemple, si vous tapez 3 dans la zone de texte et si vous sélectionnez Tabulations dans le menu contextual, le code généré par Dreamweaver sera mis en retrait de trois tabulations à chaque niveau de mise en retrait. Taille de la tabulation Déterminé la taille, en caractères, de chaque tabulation dans le mode Code. Par exemple, si cette taille est définié sur 4, chaque tabulation s'affiche dans le mode Code sous la forme d'un espace long de 4 caractères. De plus, si la taille du retrait est définié sur 3 et que les caractères utilisés sont des tabulations, le code génééré par Dreamweaver est mis en retrait de trois tabulations par niveau de mise en retrait, ce qui correspond à un espace de 12 caractères en mode Code. Note: Dreamweaver effectue les mises en retrait à l'aide de tabulations ou d'espaces mais ne convertit pas une série d'espaces en tabulation lors de l'insertion de code. Type de saut de ligne Permet d'indiquer le type de serveur distant (Windows, Macintosh ou UNIX) qui hébergera votre site. Lechioix du type de caractères de saut de ligne approprié (CR, CR/LF, LF) garantit que votre code source HTML s'affiche correctement lorsqu'il est affiché à partir du serveur distant. Ce paramètre est également utile lorsque vous travailliez avec un éditeur de texte externe qui ne reconnaît que certains types de retours de chariot. Par exemple, utilisez CR/LF (Windows), si vous éditeur de texte est le Bloc-notes de Windows, et CR (Macintosh) s'il s'agit de SimpleText. Note: Pour les serveurs auxquels vous vous connectez via FTP, cette option ne s'applique qu'en mode de transfert binaire; le mode de transfert ASCII de Dreamweaver ignore cette option. Si vous teléchargez (en réception) des fichiers en mode ASCII, Dreamweaver définit les sauts de ligne en fonction du système d'exploitation de votre ordinateur; si vous transférèz des fichiers en mode ASCII, les sauts de ligne sont toujours définis comme CR/LF. Casse de balise par défaut et casse d'attribut par défaut Contrôlez la capitalisation des noms de balises et d'attributs. Ces options s'appliquent aux balises et aux attributs que vous insérez ou que vous modifiez dans le mode Création, mais pas aux balises ou attributs que vous entrez directement dans le mode Code (ou l'Inspecteur de code), ni aux balises ou attributs déjà contenus dans un document que vous ouvrez (sauf, dans ce dernier cas, si vous avez également activé l'une des options Remplacer la casse de). Note: Cette préférence s'applique uniquement aux pages HTML. Dreamweaver l'ignore pour les pages XHTML étant donné que les balises et les attributs en majuscules sont incorrects dans XHTML. Remplacer la casse de : Balises et Attributs Spécifie s'il faut toujours convertir les noms de balises et d'attributs dans la casse spécifiée, même lors de l'ouverture d'un document HTML existant. Lorsque vous activez l'une de ces options et que vous cliquez sur OK pour fermer la boîte de dialogue, les balises et les attributs du document actif sont immédiatement convertis dans la casse indiquée et il en sera de même dans tous les documents que vous ouvrière par la suite (du moins tant que vous n'aurez pas désactivé cette option). Les balises et les attributs que vous tapez en mode Code ou dans Quick Tag Editor ou bien que vous insérez à partir du panneau Insertion, sont également convertis dans la casse spécifiée. Par exemple, si vous voulez que les noms des balises seront toujours convertis en minuscules, spécifiez minuscules dans l'options Casse de balise par défaut et activez l'options Remplacer la casse de : Balises. Lorsque vous ouvrez ensuite un document contenant des noms de balises en majuscules, Dreamweaver les convertit en minuscules. Note: D'anciennes versions du code HTML permettaient d'crire les noms d'attributs et les balises en majuscules ou en minuscules, mais le XHTML requiert des minuscules. L'usage du XHTML étant de plus en plus repandu, il est conseilé d'utiliser des minuscules pour ces éléments. Balise TD: Ne pas inclure de saut de ligne dans la balise TD Résout un problème de rendu qui se rencontres dans certains ancients navigateurs, si un espace blanc ou des sauts de ligne sont placés immédiatement après une balise

  ou juste avant une balise

  ou avant une balise

  et e doit pas avoir d'objet de formulaire correspondant.

  6 Ajoutez un bouton Envoyer au formulaire (Insertion $>). Pour réduire tout le contentu d'une balise complète, placez le point d'insertion sur la balise d'ouverture ou de fermeture, puis cliquez sur le bouton Réduire balise entière.

  Il est également possible de réduire le code situé à l'extérieur d'une balise complète, en plaçant le point d'insertion dans une balise d'ouverture ou de fermeture avant de cliquer sur le bouton Réduire balise entière tout en Maintenant la touche Alt enforcée (Windows) ou la touche Option (Macintosh). Par ailleurs, vous pouvezmaintenir la touche Ctrl enforcée tout en cliquant sur ce bouton pour désactiver la réduction intelligente. Dans ce cas, Dreamweaver n'ajuste pas le contenu réduit à l'extérieur de la paire de balises. Pour plus d'informations sur le mode Code, consultez la section "A propos de la réduction du code" on page 339.

  Réduire la seLECTION Réduit le code seLECTIONné.

  Vous pouvez également réduire le code en dehors d'une scélection en cliquant tout en maintainant enforcée la touche Alt (Windows) ou Option (Macintosh) sur le bouton Réduire scélection. Par ailleurs, vous pouvezmaintenir la touche Ctrl enforcée tout en cliquant sur ce bouton pour désactiver la réduction intelligente. Dans ce cas, Dreamweaver n'ajuste pas le contenu et réduit exactement le code scélectionné. Pour plus d'informations sur le mode Code, consultez la section "A propos de la réduction du code" on page 339.

  Développer tout Rétablit tout le code réduit.

  Selectionner une balise parent Sélectionne le contenu et les balises d'ouverture et de fermeture qui encadrent la ligne dans laquelle est placé le point d'insertion. Si vous cliquez plusieurs fois sur ce bouton et que toutes vos balises sont équilibrées, Dreamweaver selectionne finalement les balises html et /html situées aux extrémités.

  Equilibrer les accolades Sélectionne tout le code se trouvant à l'intérieur des parenthèses, des accolades ou des crochets qui encadrent la ligne dans laquelle est placé le point d'insertion. Si vous cliquez plusieurs fois sur ce bouton et que toutes vos balises sont équilibrées, Dreamweaver sélectionnement finalement les parenthèses, accolades ou crochets les plus extérieur(e)s du document.

  Numeros de lignes Permet d'afficher ou masquer les numeros de lignes au début de chaque ligne de code.

  Surligner le code non valide Surligne le code non valide en jaune.

  Alertes d'erreurs de syntaxe dans la barre d'information Active ou désactive une barre d'information, dans le haut de la page, qui vous avertit des erreurs de syntaxe. Lorsque Dreamweaver détecte une erreur de syntaxe, la barre d'information sur les erreurs de syntaxe spécifique la ligne de code où cette erreur est survenue. En outre, Dreamweaver met en surbrillance le numéro de la ligne de l'erreur, sur la gauche du document, en mode Code. La barre d'information est activée par défaut, mais elle ne s'affiche que lorsque Dreamweaver détecte des erreurs de syntaxe sur la page.

  Appliqueur commentaire Permet d'encadrer le code selectionné avec des balises de commentaires, ou d'ouvrir de nouvelles balises de commentaires.

  • Appliquer Commentaire HTML encadre le code Sélectionné de balises < 1 et - , ou ouvré une nouvelle balise si chaque code n'est sélectionné.
  • Appliquer Commentaire // insère une double barre oblique (//) au début de chaque ligne du code CSS ou JavaScript sélectionné, ou insère une unique balise // si aucun code n'est sélectionné.
  • Appliquer Commentaire/*/*/ encadre le code CSS ou JavaScript sélectionné avec les codes de commentaires /* et /*.
  • La marque de commentaire ' a été consçue pour le code Visual Basic. Elle insère un guillemet droit simple au début de chaque ligne sélectionnée d'un script Visual Basic, ou insère un guillemet droit simple au point d'insertion si aucun code n'est sélectionné.
  • Lorsque vous travailliez sur un fichier ASP, ASP.NET, JSP, PHP ou ColdFusion, si vous appliquez l'option Appliquer Commentaire sur serveur, Dreamweaver détecte automatiquement la balise de commentaire correcte et l'applique à la sélection.

  Supprimer commentaire Supprime les balises de commentaires du code selectionné. Si une sélection comporte des commentaires incorporeés, seules les balises de commentaire externe sont supprimées.

  Envelopper avec balise Permet d'encadrer le code selectionné avec la balise indiquée dans Quick Tag Editor.

  Fragment de code récents Permet deCHOISIR dans le panneau Fragments de code un fragment de code récemment utilise et de l'insérer. Pour plus d'informations, consultez la section "Manipulation de fragments de code" on page 335.

  Déplacer ou convertir une feuille CSS Permet de déplacer du code CSS ou de convertir du code CSS intégré en règles CSS. Pour plus d'informations, consultez les sections “Déplacement/exportation de règles CSS” on page 152 et “Conversion d'un style CSS intégré en une règle CSS” on page 154.

  Indentation du code Ramène la selection vers la droite.

  Indentation négative du code Ramène la sélection vers la gauche.

  Mise en forme du code source Applique les formats de code précédemment définis au code sélectionné (ou à la page entière si aucun code n'est sélectionné). Vous pouvez également définir les préférences de formatage du code en selectionnant Formatage du code source avec le bouton du même nom, ou en modifier les bibliothèques de balises en selectionnant Edition, Bibliothèques de balises.

  Le nombre de boutons disponibles dans la barre d'outils de codage varie selon la taille d'affichage en mode Code dans la fenêtre du document. Pour voir tous les boutons disponibles, vous pouvez redimensionner la fenêtre d'affichage du mode Code ou cliquer sur le bouton d'expansion, à la base de la barre d'outils de codage.

  Vou puez également modifier la barre d'outils de codage pour afficher des boutons supplémentaires (Retour automatique à la ligne, Caractères masqués et Retrait auto) ou pour masquer des boutons que vous ne souhaitez pas utiliser. Néanmoins, vousdez pour cela modifier le fichier XML qui généra la barre d'outils. Pour plus d'informations, voir Extension de Dreamweaver.

  Note: L'option d'affichage des caractères masqués, qui ne fait pas partie des boutons par défaut de la barre d'outils de codage, est disponible à partir du menu Affichage (Affichage > Options d'affichage de code > Caractères masqués).

  More Help topicse récapierer l'enregistrement à partir d'une table de base de données; - un formulaire HTML permettant aux utilisateurs de modifier les données de l'enregistrement ; - un comportement de serveur Mettre à jour l'enregistrement permettant demettre à jour la base de données. Voussupoezinsererlesdoudernierellementsd'unepagede misea jour en uneseuleetapea l'aide del'objet dedonnées Formulaire de mise a jour des enregistements.Cet objet insere dans la page un formualeire HTML et uncomportement de serveur Mettre a jour l'enregistrement. Pour que vous puissiez utiliser l'objet de données, il faut que votre application Web soit capable d'identifier l'enregistrement àmettre à jour et que votre page de mise à jour soit en mesure de le recupérer. Après avoir inséré les éléments sur la page au moyen de l'objet de données, vous pouvez utiliser les outils de conception de Dreamweaver pour personnaliser le formulaire ou le panneau Comportements de serveur pour modifier le comportement de serveur Mettre à jour l'enregistrement. Note: La page de mise à jour ne peut pas contérer plus d'un comportement de serveur de modification d'enregistrement à la fois. Par exemple, vous ne pouvez pas y inclure également un comportement de serveur Insérer un enregistrement ou Supprimer l'enregistrement. 1 Ouvrez la page en mode Creation, puis choisissez Insertion $>

  "Vérification de l'équilibre des balises et des accolades" on page 342

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

  "Affichage des barres d'outils" on page 23

  Insertion de code à l'aide du panneau Insertionutils de conception de Dreamweaver pour personnaliser le formulaire ou le panneau Comportements de serveur pour modifier le comportement de serveur Mettre à jour l'enregistrement. Note: La page de mise à jour ne peut pas contérer plus d'un comportement de serveur de modification d'enregistrement à la fois. Par exemple, vous ne pouvez pas y inclure également un comportement de serveur Insérer un enregistrement ou Supprimer l'enregistrement. 1 Ouvrez la page en mode Creation, puis choisissez Insertion $>

  1 Positionnez le point d'insertion dans le code.
  2 Sélectionnez la catégorie appropriée du panneau Insertion.
  3 Cliquez sur un bouton du panneau Insertion ou selectionnee un element de l'un des menus de ce panneau.

  Dès que vous cliquez sur une icône, le code peut apparaître immédiatement dans la page ou une boîte de dialogue peut vous demander de spécifique des informations supplémentaires pour terminer le code.

  Pour connaître la fonction de chaque bouton, positionnez le pointeur sur ce bouton jusqu'à ce qu'une info-bulle apparaisse. Le nombre et le type des boutons du panneau Insertion varient selon la nature du document affché. et selon que le mode Code ou Création est actif.

  Bien que le panneau Insertion regroupe les balises fréquement utilisées, son contenu n'est pas exhaustif. Vous trouvrez un besoin plus varié de balises dans le sélecteur de balises.

  More Help topicsion Numérique. Une colonne à clé n'accepte généralement que des valeurs numériques, mais dans certains cas, elle accepte également du texte. 6 Dans la zone Avec la mise a jour, aller a, indiquez la page a ouvrir après la mise a jour de l'enregistrement dans la table. 7 Dans la zone Champs du formulaire, indique les colonnes de la table de base de données que chaque objet de formulaire doitmettreà jour. Par défaut, Dreamweaver create un objet de formulaire pour chaque colonne de la table de base de données. Si vous base de données génére automatiquement un ID de clé unique pour chaque enregistrement créé, supprimez l'objet de formulaire correspondant à la colonne à clé ; pour ce faire, Sélectionnez l'objet dans la liste et cliquez sur le bouton Moins (-). Ainsi, l'utilisateur du formulaire ne pourrait pas entraure une valeur d'ID qui existe déjà. Vous pouvez également modifier l'ordre des objets de-formulaire dans le formulaire HTML ; il vous suffit de selectionner un objet dans la liste et de le déplacer dans cette dernière en cliquant sur la flèche vers le haut ou vers le bas située sur la droite de la boîte de dialogue. 8 Définissez la façon dont chaque champ de saisie de données doit s'afficher sur le-formulaire HTML. Pour ce faire, cliquez sur une ligne du tableau Champs de formulaire et indiquez les informations suivantes dans les zones affichées sous la table : - Dans la zone Etiquette, saisissez la description à afficher à côté du champ de saisie de données. Par défaut, Dreamweaver affiche dans ce champ le nom de la colonne de la table. - Dans le menu déroulant Afficher comme, Sélectionnez l'objet de-formulaire à utiliser comme champ de saisie de données. Vous avez le besoin entre Champ de texte, Zone de texte, Menu, Case à cocher, Groupe de boutons radio et Texte. Pour les entrées en lecture seule, choisissez Texte. Vous pouvez également désirer Champ Mot de passer, Champ de fichier et Champ masqué. Note: Les champs masqués sont insérés à la fin du formulaire. - Dans le menu dérouulant Envoyer en tant que, Sélectionnez le format de données qui sera accepté par cette colonne de la table de base de données. Par exemple, si les données numériques sont les seules admises, désissez Numérique. - Définissez les propriétés de l'objet de-formulaire. Vous avez le choix entre plusieurs possibilités, en fonction de l'objet de formulaire sélectionné comme champ de saisie de données. Pour les champs de texte, les zones de texte et le texte, vous pouvez enter une valeur initiale. Pour les menus et les groupes de boutons radio, ouvrez une autre boîte de dialogue afin de définir des propriétés. Pour les options, Sélectionné z'option Cochée ou Non cochée. 9 Définissez les propriétés des autres objets de formulaire en selectionnant une autre ligne Champs du formulaire et en saississant une étiquette, une valeur Afficher en tant que et une valeur Envoyer en tant que. Pour les menus et les groupes de boutons radio, ouvrez une autre boîte de dialogue pour définir les propriétés. Pour les options, définièsez une comparaison entre la valeur actuelle de l'enregistrement pour l'option et une valeur donnée afin de déterminer si l'options doit être activée ou désactivée lorsque l'enregistrement est affché. 10 Cliquez sur OK. Dreamweaver insere dans la page un-formulaire HTML et un comportement de serveur Mettre a jour l'enregistrement. L'objet de données insère dans la page un-formalier HTML et un comportement de serveur Mettre à jour l'enregistrement. Les objets de formalier sont disposés sur la page sous forme d'un tableau simple, que vous pouvez ensuite personnaliser à l'aide des outils de conception de page de Dreamweaver. (assurez-vous qu'aucun objet de formalier ne dépasse les limites du formalier). Pour modifier le comportement de serveur, ouvre le panneau Comportements de serveur (Fenetre >

  "Utilisation du panneau Insertion" on page 218

  Insertion de balises avec le Sélecteur de balises formulaire doitmettreà jour. Par défaut, Dreamweaver create un objet de formulaire pour chaque colonne de la table de base de données. Si vous base de données génére automatiquement un ID de clé unique pour chaque enregistrement créé, supprimez l'objet de formulaire correspondant à la colonne à clé ; pour ce faire, Sélectionnez l'objet dans la liste et cliquez sur le bouton Moins (-). Ainsi, l'utilisateur du formulaire ne pourrait pas entraure une valeur d'ID qui existe déjà. Vous pouvez également modifier l'ordre des objets de-formulaire dans le formulaire HTML ; il vous suffit de selectionner un objet dans la liste et de le déplacer dans cette dernière en cliquant sur la flèche vers le haut ou vers le bas située sur la droite de la boîte de dialogue. 8 Définissez la façon dont chaque champ de saisie de données doit s'afficher sur le-formulaire HTML. Pour ce faire, cliquez sur une ligne du tableau Champs de formulaire et indiquez les informations suivantes dans les zones affichées sous la table : - Dans la zone Etiquette, saisissez la description à afficher à côté du champ de saisie de données. Par défaut, Dreamweaver affiche dans ce champ le nom de la colonne de la table. - Dans le menu déroulant Afficher comme, Sélectionnez l'objet de-formulaire à utiliser comme champ de saisie de données. Vous avez le besoin entre Champ de texte, Zone de texte, Menu, Case à cocher, Groupe de boutons radio et Texte. Pour les entrées en lecture seule, choisissez Texte. Vous pouvez également désirer Champ Mot de passer, Champ de fichier et Champ masqué. Note: Les champs masqués sont insérés à la fin du formulaire. - Dans le menu dérouulant Envoyer en tant que, Sélectionnez le format de données qui sera accepté par cette colonne de la table de base de données. Par exemple, si les données numériques sont les seules admises, désissez Numérique. - Définissez les propriétés de l'objet de-formulaire. Vous avez le choix entre plusieurs possibilités, en fonction de l'objet de formulaire sélectionné comme champ de saisie de données. Pour les champs de texte, les zones de texte et le texte, vous pouvez enter une valeur initiale. Pour les menus et les groupes de boutons radio, ouvrez une autre boîte de dialogue afin de définir des propriétés. Pour les options, Sélectionné z'option Cochée ou Non cochée. 9 Définissez les propriétés des autres objets de formulaire en selectionnant une autre ligne Champs du formulaire et en saississant une étiquette, une valeur Afficher en tant que et une valeur Envoyer en tant que. Pour les menus et les groupes de boutons radio, ouvrez une autre boîte de dialogue pour définir les propriétés. Pour les options, définièsez une comparaison entre la valeur actuelle de l'enregistrement pour l'option et une valeur donnée afin de déterminer si l'options doit être activée ou désactivée lorsque l'enregistrement est affché. 10 Cliquez sur OK. Dreamweaver insere dans la page un-formulaire HTML et un comportement de serveur Mettre a jour l'enregistrement. L'objet de données insère dans la page un-formalier HTML et un comportement de serveur Mettre à jour l'enregistrement. Les objets de formalier sont disposés sur la page sous forme d'un tableau simple, que vous pouvez ensuite personnaliser à l'aide des outils de conception de page de Dreamweaver. (assurez-vous qu'aucun objet de formalier ne dépasse les limites du formalier). Pour modifier le comportement de serveur, ouvre le panneau Comportements de serveur (Fenetre >

  Vou puez utilise le selecteur de balises pour inserer dans une page n'importe quelle balse figurant dans les bibliothèques de balises de Dreamweaver (notamment les bibliothèques de balises de ColdFusion et ASP.NET).

  1 Placez le point d'insertion dans le code, cliquez avec le bouton droit de la souris (Windows) ou en Maintenant la touche Contrôle enforcée (Macintosh), puis selectionnez Insérer la balise.

  Le Sénéctor de balises s'affiche. Le panneau de gauche répertorie les bibliothèques de balises prises en charge, tandis que le panneau de croite affiche les balises individuelles du dossier de bibliothèques de balises sélectionné.

  2 Dans la bibliothèque de balises, Sélectionné une catégorie de balises ou développement cette catégorie pour sélectionner une sous-catégorie.
  3 Sélectionnéz la balise souhaitée dans le volet de droite.
  4 Pour afficher les informations concernant la syntaxe et l'emploi de la balise dans le selecteur de balises, cliquez sur le boutonInfos sur les balises. Ces informations, si elles existent, s'affichent.
  5 Pour afficher ces informations dans le panneau Reforence, cliquez sur l'icone < ? > . Ces informations, si elles existent, s'affichent.
  6 Cliquez sur le bouton Inserer pour insérer la balise selectionnée dans le code.

  Si la balise affichée dans le volet de droite apparait entre crochets, par exemple