DREAMWEAVER CS3 - Éditeur de sites web ADOBE - Notice d'utilisation et mode d'emploi gratuit

Type de produit	Logiciel de création et d'édition de sites web
Éditeur	Adobe Systems Incorporated
Modèle	Dreamweaver CS3
Version	CS3 (Creative Suite 3)
Plateformes prises en charge	Windows (XP, Vista) et Mac OS X (PowerPC et Intel)
Configuration minimale (Windows)	Processeur 1 GHz, 512 Mo RAM, 1 Go d'espace disque
Configuration minimale (Mac)	Processeur PowerPC G4/G5 ou Intel, 512 Mo RAM, 1,5 Go d'espace disque
Fonctions principales	Édition visuelle et code, gestion CSS avancée, cadre Spry pour Ajax, intégration avec Photoshop CS3, Device Central, Bridge CS3
Formats de fichiers pris en charge	HTML, XHTML, CSS, JavaScript, XML, ASP, PHP, ColdFusion, JSP, ASP.NET
Langues disponibles	Multilingue (français, anglais, allemand, etc.)
Type de licence	Commerciale, nécessite activation dans les 30 jours
Poids du fichier d'installation (estimé)	Environ 500 Mo
Documentation fournie	Guide de l'utilisateur PDF de 707 pages, aide en ligne
Alimentation	Non applicable (logiciel)
Entretien et nettoyage	Non applicable
Sécurité	Activation produit, mises à jour de sécurité via Adobe
Pièces détachées et réparabilité	Non applicable

FOIRE AUX QUESTIONS - DREAMWEAVER CS3 ADOBE

Comment installer Dreamweaver CS3 ?

Fermez toutes les applications Adobe, insérez le DVD d'installation et suivez les instructions à l'écran. Pour plus de détails, consultez le fichier Lisez-moi sur le DVD.

Comment activer Dreamweaver CS3 ?

L'activation est requise dans les 30 jours. Allez dans Aide > Activation et suivez les instructions. Si vous devez réinstaller sur un autre ordinateur, désactivez d'abord via Aide > Désactiver.

Que faire si l'activation échoue ?

Vérifiez votre connexion Internet, assurez-vous d'avoir saisi la clé de licence correcte. Consultez le site www.adobe.com/go/activation_fr pour obtenir de l'aide.

Comment créer un nouveau site dans Dreamweaver ?

Dans le panneau Fichiers, cliquez sur 'Gérer les sites', puis 'Nouveau site'. Suivez l'assistant pour définir le nom, le dossier local et les paramètres du serveur.

Comment utiliser le panneau Styles CSS ?

Le panneau Styles CSS (Fenêtre > Styles CSS) permet de créer et modifier des règles CSS en mode 'Actuel' ou 'Tous'. Les modifications sont appliquées en temps réel.

Qu'est-ce que le cadre Spry pour Ajax ?

Le cadre Spry est une bibliothèque JavaScript qui permet d'ajouter des widgets interactifs (accordéons, onglets, validation de formulaires) et des ensembles de données XML sans programmation complexe.

Comment insérer une image dans une page ?

Placez le curseur à l'endroit souhaité, puis cliquez sur Insertion > Image ou utilisez le bouton Image de la barre Insertion. Sélectionnez le fichier et ajustez les propriétés dans l'inspecteur.

Comment prévisualiser une page dans un navigateur ?

Cliquez sur le bouton Aperçu/Débogage dans le navigateur dans la barre d'outils du document, ou utilisez Fichier > Aperçu dans le navigateur et choisissez le navigateur.

Comment utiliser les modèles Dreamweaver ?

Créez un modèle via Fichier > Enregistrer comme modèle. Définissez des régions modifiables. Appliquez le modèle à des documents existants via Outils > Modèles > Appliquer le modèle à la page.

Où trouver de l'aide supplémentaire pour Dreamweaver CS3 ?

Utilisez Aide > Utilisation de Dreamweaver pour l'aide intégrée, ou visitez le site www.adobe.com/go/documentation_fr pour les PDF et LiveDocs. Les forums sont accessibles via www.adobe.com/fr/communities.

MODE D'EMPLOI DREAMWEAVER CS3 ADOBE

©2007 Adobe Systems Incorporated. Tous droits réservés.

Adobe® Dreamweaver® CS3 – Guide de l'utilisateur pour Windows® et Macintosh

Si le présent guide est distribué avec un logiciel sous contrat de licence de l'utilisateur final, ce guide, de même que le logiciel dont il traite, est cédé sous licence et ne peut être copié ou utilisé que conformément à cette licence. Sauf autorisation spécifiée dans la licence, aucune partie de cette publication ne peut être reproduite, enregistrée sur un système de recherche ou transmise sous quelque forme ou par quelque moyen que ce soit (enregistrement électronique, mécanique ou autre), sans l'autorisation écrite préalable d'Adobe Systems Incorporated. Notez que le contenu de ce manuel est protégé par des droits d'auteur, même s'il n'est pas distribué avec un logiciel accompagné d'un contrat de licence pour l'utilisateur final.

Les informations contenues dans ce guide sont fournies à titre informatif uniquement ; elles sont susceptibles d'être modifiées sans préavis et ne doivent pas être interprétées comme étant un engagement de la part d'Adobe Systems Incorporated. Adobe Systems Incorporated n'accepte aucune responsabilité quant aux erreurs ou inexactitudes pouvant être contenues dans le présent guide.

Nous attirons votre attention sur le fait que les illustrations ou images que vous pouvez être amené à incorporer à vos projets peuvent être protégées par des droits d'auteur. L'inclusion non autorisée de tels éléments dans vos nouveaux travaux peut constituer une violation des droits du détenteur du copyright. Veuillez vous assurer que vous obtenez toute autorisation nécessaire auprès du détenteur du copyright.

Toute référence à des noms de sociétés dans les modèles types n'est utilisée qu'à titre d'exemple et ne fait référence à aucune société réelle.

Adobe, le logo Adobe, ActionScript, ColdFusion, Creative Suite, Director, Dreamweaver, Fireworks, Flash, FlashPaper, HomeSite, JRun, Photoshop, Shockwave et Version Cue sont des marques déposées ou des marques commerciales d'Adobe Systems Incorporated aux Etats-Unis et/ou dans d'autres pays.

ActiveX, Microsoft et Windows sont des marques ou des marques déposées de Microsoft Corporation aux Etats-Unis et/ou dans d'autres pays. Apple et Mac OS sont des marques commerciales d'Apple Computer, Inc., déposées aux Etats-Unis et dans d'autres pays. Java et Solaris sont des marques commerciales ou des marques déposées de Sun Microsystems, Inc. aux Etats-Unis et dans d'autres pays. Linux est la marque déposée de Linus Torvalds aux Etats-Unis et dans d'autres pays. UNIX est une marque commerciale aux Etats-Unis et dans d'autres pays, sous licence exclusive de X/Open Company, Ltd. Toutes les autres marques citées sont la propriété de leurs détenteurs respectifs.

Ce produit inclut des logiciels développés par Apache Software Foundation (http://www.apache.org/). Le format GIF© (Graphics Interchange Format) fait l'objet d'un copyright appartenant CompuServe Incorporated. GIF(sm) est une marque de service de CompuServe Incorporated. Technologie de compression audio MPEG Layer-3 utilisée sous licence de Fraunhofer IIS et Thomson Multimedia (http://www.mp3licensing.com). Vous n'êtes pas autorisé à utiliser les données audio MP3 compressées fournies avec le Logiciel pour les diffusions en temps réel ou en direct. Si vous nécessitez un décodeur MP3 pour ce type de diffusion, vous devez acquérir une licence pour cette technologie MP3. La technologie de compression et de décompression audio discours est utilisée sous licence de Nellymoser, Inc. (www.nellymoser.com) Flash CS3 video est mis en oeuvre par la technologie vidéo On2 TrueMotion. © 1992-2005 On2 Technologies, Inc. Tous droits réservés. http://www.on2.com. Ce produit inclut des logiciels développés par OpenSymphony Group (http://www.opensymphony.com/). Technologie de compression et décompression vidéo Sorenson SparkTM sous licence de Sorenson Media, Inc.

Adobe Systems Incorporated, 345 Park Avenue, San Jose, Californie 95110, Etats-Unis d'Amérique.

Avertissements à l'attention des utilisateurs finaux du gouvernement des Etats-Unis. Le logiciel et la documentation sont des « Commercial Items » (articles commerciaux), selon la définition de ces termes dans l'article 48 C.F.R. §2.101, composés d'un « Commercial Computer Software » (logiciel commercial) et d'une « Commercial Computer Software Documentation » (documentation), selon la définition de ces termes dans l'article 48 C.F.R. §12.212 ou 48 C.F.R. §227.7202, selon le cas. Conformément aux documents 48 C.F.R. §12.212 ou 48 C.F.R. §§227.7202-1 à 227.7202-4, le cas échéant, le Logiciel informatique commercial et la Documentation du Logiciel informatique commercial ne sont conférés en licence aux utilisateurs finals du Gouvernement des Etats-Unis (a) que sous la forme d'Articles commerciaux et (b) exclusivement avec les droits qui sont accordés à tout autre utilisateur final conformément aux conditions générales ci-incluses. Les droits non publiés sont réservés conformément aux lois des Etats-Unis en matière de copyright. Adobe Systems Incorporated, 345 Park Avenue, San Jose, CA 95110-2704, Etats-Unis d'Amérique. Pour les utilisateurs finals du Gouvernement des Etats-Unis, Adobe s'engage à respecter toutes les lois en vigueur en matière d'égalité, dont, le cas échéant, les dispositions du Executive Order 11246, tel qu'amendé, Section 402 de la loi Vietnam Era Veterans Readjustment Assistance Act de 1974 (38 USC 4212), et la Section 503 de la loi Rehabilitation Act de 1973, telle qu'amendée, ainsi que les dispositions des documents 41 CFR parties 60-1 à 60-60, 60-250 et 60-741. La clause d'action positive et les réglementations figurant dans la phrase qui précède seront incorporées par référence.

Sommaire

Chapitre 1 : Démarrage

Installation 1

Aide Adobe 1

Ressources 4

Dernières nouveautés 10

Chapitre 2 : Espace de travail

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

Utilisation de la fenêtre de document 23

Utilisation des barres d'outils, des inspecteurs, des menus contextuels et des panneaux ....26

Personnalisation de l'espace de travail de Dreamweaver CS3 32

Chapitre 3 : Utilisation de sites Dreamweaver

Configuration d'un site Dreamweaver 38

Utilisation d'une carte d'arborescence de votre site 49

Gestion des sites Contribute avec Dreamweaver 54

Utilisation de fichiers sans définir de site 60

Options de l'onglet Elémentaire 61

Chapitre 4 : Création et gestion de fichiers

Création et ouverture de documents 66

Gestion des fichiers et des dossiers 74

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

Archivage et extraction de fichiers 88

Synchronisation de fichiers 91

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

Restauration de fichiers (utilisateurs de Contribute) 95

Voilage des dossiers et des fichiers du site 96

Stockage des informations sur les fichiers dans des Design Notes 98

Test de votre site 101

Chapitre 5 : Gestion des actifs et des bibliothèques

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

Utilisation des actifs 106

Création et gestion d'une liste d'actifs favoris 110

Utilisation des éléments de bibliothèque 112

Chapitre 6 : Création de pages avec CSS

Description des feuilles de style en cascade 117

Création et gestion CSS 121

Mise en forme des pages avec CSS 141

Utilisation des balises Div 157

Animation des éléments PA 161

Chapitre 7 : Mise en forme des pages avec HTML

Utilisation d'assistances visuelles pour la mise en forme 167

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

Mise en forme des pages avec le mode Mise en forme 184

Utilisation de cadres 195

Chapitre 8 : Ajout de contenu dans les pages

Utilisation des pages 206

Ajout et mise en forme de texte 218

Ajout et modification d'images .....233

Insertion de contenu Flash 245

Ajout de contenu Flash Video 254

Ajout de séquences audio 258

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

Chapitre 9 : Liens et navigation

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

Etablissement de liens 269

Menus de reroutage ....277

Barres de navigation 279

Cartes graphiques 280

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

Chapitre 10 : Aperçu des pages

Aperçu des pages dans les navigateurs ....285

Aperçu des pages sur les appareils mobiles .....286

Chapitre 11 : Utilisation de code de page

A propos du codage dans Dreamweaver ....288

Configuration d'un environnement de codage 294

Personnalisation de l'environnement de codage 296

Rédaction et modification de code 301

Réduction du code 310

Optimisation et débogage de code 312

Modification de code en mode Création 316

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

Utilisation des inclusions côté serveur 326

Gestion des bibliothèques de balises 328

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

Chapitre 12 : Ajout de comportements JavaScript

Utilisation des comportements JavaScript 333

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

Chapitre 13 : Utilisation d'autres applications

Intégration entre les applications 351

Utilisation de Fireworks 352

Utilisation de Photoshop 358

Utilisation de Flash 366

Utilisation de Bridge 367

Utilisation de Device Central 369

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

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

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

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

Création de régions modifiables 381

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

Utilisation des régions facultatives 384

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

Création d'un modèle imbriqué 388

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

Exportation et importation du contenu d'un modèle 393

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

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

Syntaxe des modèles 398

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

Chapitre 15 : Affichage de données XML

A propos de XML et de XSLT 401

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

Exécution de transformations XSL sur le client 424

Entités de caractère manquant 426

Chapitre 16 : Création visuelle de pages Spry

A propos du cadre applicatif Spry 428

Ajout de widgets Spry 428

Utilisation du widget accordéon 430

Utilisation du widget de barre de menu 432

Utilisation du widget de panneau réductible 437

Utilisation du widget de panneau à onglet 439

Utilisation du widget Validation de zone de texte 442

Utilisation du widget Zone de texte de validation 446

Utilisation du widget Validation de la sélection 449

Utilisation du widget Validation de case à cocher 452

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

Ajout d'effets Spry 462

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

Description des applications Web 466

Installation d'un serveur Web local 473

Configuration d'une application Web 476

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

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

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

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

Connexions à des bases de données pour les développeurs JSP .....495

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

Suppression de scripts de connexion ....504

Chapitre 18 : Sources de données d'applications Web

Utilisation d'une base de données pour stocker un contenu ....505

Collecte de données envoyées par les utilisateurs ....506

Accès à des données stockées dans des variables de session 509

Chapitre 19 : Ajout de contenu dynamique aux pages Web

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

Conception de pages dynamiques ....515

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

Panneaux de contenu dynamique ....520

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

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

Modification d'un contenu dynamique ....540

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

Affichage des données dynamiques 552

Utilisation des services Web ....556

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

Création de formulaires ....572

Chapitre 20 : Création visuelle d'applications

Création de pages principales et détaillées (tous les serveurs) ....586

Création de pages de recherche et de résultats (ColdFusion, ASP, JSP, PHP) .....595

Création d'une page de recherche dans une base de données (ASP.NET) .....600

Création d'une page d'insertion d'enregistrement (tous les serveurs) .....604

Création de pages de mise à jour d'enregistrements (tous les serveurs) .....608

Création de pages de suppression d'un enregistrement (tous les serveurs) .....614

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

Création d'une page d'enregistrement (ColdFusion, ASP, JSP, PHP) .....628

Création d'une page de connexion (ColdFusion, ASP, JSP, PHP) .....630

Création d'une page à accès restreint (ColdFusion, ASP, JSP, PHP) .....632

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

Utilisation des composants ColdFusion (ColdFusion) 636

Utilisation de JavaBeans (JSP) 642

Chapitre 21 : Création de formulaires ASP.NET et ColdFusion

Création de formulaires ColdFusion MX 7 644

Création de formulaires ASP.NET 655

Création de contrôles Web Grille de données et Liste de données ASP.NET .....660

Chapitre 22 : Automatisation des tâches

Automatisation des tâches 668

Chapitre 23 : Accessibilité

Dreamweaver et l'accessibilité ....674

Fonctions d'accessibilité de Dreamweaver ....675

Conception de pages dans un souci d'accessibilité ....677

Chapitre 24 : Raccourcis et extensions

Raccourcis clavier 678

Extensions 680

Index 681

Chapitre 1 : Démarrage

Si vous n'avez pas encore installé votre nouveau logiciel, prenez le temps de lire quelques informations relatives à l'installation et à d'autres notions préliminaires. Avant de commencer à utiliser votre logiciel, parcourez la présentation de l'aide d'Adobe et des nombreuses ressources accessibles aux utilisateurs. Vous pouvez accéder à des vidéos didactiques, des compléments, des modèles, des communautés d'utilisateurs, des séminaires, des didacticiels, des flux RSS et bien plus encore.

Installation

Configuration requise

Pour vérifier la configuration système complète et recommandations pour votre logiciel Adobe®, consultez le fichier Lisez-moi situé sur le DVD d'installation.

Installation du logiciel

1 Fermez toute autre application Adobe en cours d'exécution sur votre ordinateur.
2 Introduisez le disque d'installation dans le lecteur de DVD-ROM, puis suivez les instructions qui s'affichent à l'écran.
Remarque : pour de plus amples informations, consultez le fichier Lisez-moi situé sur le DVD d'installation.

Activation du logiciel

Si vous possédez une licence pour un utilisateur unique pour votre logiciel Adobe, il vous sera demandé d'activer votre logiciel ; ce processus est très simple et anonyme et vous devez l'avoir exécuté dans les 30 jours après le début de l'utilisation du logiciel.

Pour plus d'informations sur l'activation du produit, reportez-vous au fichier Lisez-moi de votre DVD d'installation ou visitez le site Web d'Adobe à l'adresse www.adobe.com/go/activation_fr.

1 Si la boîte de dialogue d'activation n'est pas ouverte, choisissez Aide > Activation.
2 Suivez les instructions qui s'affichent à l'écran.
Remarque : si vous souhaitez installer le logiciel sur un autre ordinateur, vous devez, au préalable, le désactiver sur votre ordinateur. Sélectionnez Aide > Désactiver.

Enregistrement

Enregistrez votre produit afin de bénéficier, gratuitement, d'une aide à l'installation, de notifications de mises à jour, ainsi que d'autres services.

Pour vous enregistrer, suivez les instructions affichées dans la boîte de dialogue d'enregistrement qui apparaît après l'installation et l'activation du logiciel.

Si vous reportez l'enregistrement, vous pourrez effectuer cette procédure ultérieurement en sélectionnant Aide > Enregistrement.

Aide Adobe

Ressources d'assistance d'Adobe

La documentation de vos logiciels Adobe est disponible dans plusieurs formats.

Aide en ligne et LiveDocs

L'aide en ligne vous donne accès à l'ensemble de la documentation et du matériel didactique disponible au moment de la distribution du logiciel. Elle est disponible à partir du menu d'aide du logiciel Adobe.

L'aide LiveDocs contient l'intégralité de l'aide en ligne, plus des mises à jour et des liens vers du matériel didactique supplémentaire disponible sur le Web. Pour certains produits, vous pouvez également ajouter des commentaires aux rubriques dans l'aide LiveDocs. L'aide au format LiveDocs est disponible dans le Centre de ressources d'aide d'Adobe à l'adresse www.adobe.com/go/documentation_fr.

removeMovieClip (MovieClip.removeMovieClip method) -- Version 8 http://livedocs.macromedia.com/flash/8/main/wwhelp/wwhimpl/common/html/wwhelp - Google View comments | R55 feed Flash Documentation ActionScript 2.0 Language Reference > ActionScript classes > MovieClip > removeMovieClip (MovieClip.removeMovieClip method) removeMovieClip (MovieClip.removeMovieClip method) public removeMovieClip() : Void Removes a movie clip instance created with duplicateMovieClip(), MovieClip.duplicateMovieClip(), MovieClip.createDepthMovieClip(), Or MovieClip.attachMovie() This method does not remove a movie clip assigned to a negative depth value. Movie clips created in the authoring tool are assigned negative depth values by default. To remove a movie clip that is assigned to a negative depth value, first use the MovieClip.wmpdepth() method to move the movie clip to a positive depth value.

La plupart des versions de l'aide en ligne et LiveDocs vous permettent d'effectuer une recherche dans les systèmes d'aide de plusieurs produits. Certaines rubriques peuvent également proposer des liens vers du contenu connexe sur le Web ou vers des rubriques d'aide d'un autre produit.

Vous devez considérer le module d'aide comme une plate-forme d'accès vers du contenu supplémentaire et des communautés d'utilisateurs. La version la plus récente et la plus complète de l'aide est toujours disponible sur le Web.

Documentation au format PDF

L'aide en ligne est également disponible sous la forme d'un fichier PDF optimisé pour l'impression. D'autres documents, tels que des guides d'installation et des livres blancs, peuvent également être fournis au format PDF.

Tous les documents au format PDF sont disponibles par le biais du Centre de ressources d'aide d'Adobe à l'adresse www.adobe.com/go/documentation_fr. Pour consulter la documentation PDF incluse avec le logiciel, accédez au dossier Documents sur le DVD d'installation ou de contenu.

Documentation papier

La version imprimée de l'aide en ligne est disponible à la vente sur Adobe Store à l'adresse www.adobe.com/go/store_fr. Vous y trouverez également des ouvrages édités par des partenaires d'Adobe.

Un guide de l'utilisateur imprimé est livré avec tous les produits Adobe Creative Suite ^® 3, les produits Adobe autonomes étant quant à eux fournis avec un guide de prise en main imprimé.

Utilisation du module d'aide du produit

L'aide en ligne est accessible par le biais du menu Aide. Après avoir ouvert Adobe Help Viewer, cliquez sur Parcourir pour consulter l'aide des autres produits Adobe installés sur votre ordinateur.

La fonction d'aide fournit des informations sur différents produits :

• certaines rubriques contiennent des liens vers les systèmes d'aide d'autres produits Adobe ou vers des informations supplémentaires sur le Web.
• D'autres rubriques sont communes à plusieurs produits. Par exemple, si vous voyez une rubrique Aide marquée de l'icône de Adobe Photoshop® et de l'icône Adobe After Effects®, vous savez que la rubrique concerne une fonctionnalité semblable dans les deux produits ou décrit des processus communs aux deux produits.
• Vous pouvez effectuer une recherche dans les systèmes d'aide de plusieurs produits.

Si vous recherchez une expression, telle que «outil forme», placez-la entre guillemets afin de n'afficher que les rubriques contenant tous les mots de l'expression en question.

A Parcourir Illustrator CS3 Recherche Sommaire | Index Page d'accueil Prise en main Plan de travail Dessin Couleur Cestion des couleurs Peinture Sélection et disposition des objets Remodelage des objets Importation, exportation et enregistrement Texte Création d'effets spéciaux Images Web Impression Automatisation des tâches Graphics Raccourcis clavier Mentions légales Ai RUBRIQUE DANS : Plan de travail / Personnalisation de l'espace de travail Personnaliser l'espace de travail Pour créer un espace de travail personnalisé, déplacez et manipuliez les panneaux (appelés palettes dans Photoshop et dans les composants d'Adobe Creative Suite 2). A B Nuancer Styles C Normal Verou : La fine zone de largage bleue indique que le panneau Couleur va être ancré seul au-dessus du groupe de panneaux Calques. A. Barre de titre B. Onglet C. Zone de largage Vous pouvez enregistrer des espaces de travail personnalisés, puis passer de l'un à l'autre. Notez que vous pouvez modifier, dans Photoshop, le corps de la police du texte de la barre d'options, des palettes et des info-buites. Choisissez une option dans le menu Corps de l'interface utilisateur des préférences générales. Remarque : Pour une vidéo sur la personnalisation de l'espace de travail dans Illustrator, rendez-vous à l'adresse suivante : www.adobe.com/so/vid0032. Ancrer et détacher des panneaux Déplacer des panneaux Ajouter et supprimer des docks et des panneaux B C D

Aide

A. Boutons Précédent/Suivant (liens précédemment visités) B. Sous-rubriques extensibles C. Icônes indiquant une rubrique partagée

D. Boutons Précédent/Suivant (liens précédemment visités) (rubriques en ordre séquentiel)

Fonctions d'accessibilité

L'aide d'Adobe est accessible aux personnes souffrant d'un handicap (mobilité réduite, cécité ou déficience visuelle). L'aide intégrée au produit prend en charge les fonctions d'accessibilité standard suivantes :

• L'utilisateur peut modifier la taille du texte à l'aide de commandes de menu contextuel standard.
• Les liens sont soulignés pour une identification aisée.
• Si le texte d'un lien ne correspond pas au titre cible, ce dernier est indiqué dans l'attribut Titre de la balise d'ancrage. Par exemple, les liens Précédent et Suivant incluent le titre des rubriques précédente et suivante.
• Le contenu prend en charge le mode à forts contrastes.
• Les images sans légende présentent un texte de remplacement.
• Chaque cadre est doté d'un titre indiquant son utilité.
• Les balises HTML standard définissent la structure du contenu pour les outils de lecture d'écran ou de synthèse de la parole à partir du texte.
• Les feuilles de style contrôlent la mise en forme, d'où une absence totale de polices incorporées.

Raccourcis clavier pour les commandes de barre d'outils de l'aide (Windows)

Bouton Précédent Alt + Flèche Gauche

Bouton Page suivante Alt + Flèche Droite

Imprimer Ctrl+P

Bouton A propos de Ctrl+I

Menu Parcourir Alt+touche Bas ou Alt+touche Haut pour consulter l'aide d'une autre application

Zone de recherche Ctrl+S pour placer le point d'insertion dans la zone Rechercher

Raccourcis clavier de navigation dans l'aide (Windows)

• Pour passer d'un panneau à un autre, appuyez sur Ctrl+Tab (vers l'avant) ou Maj+Ctrl+Tab (vers l'arrière).
• Pour parcourir les liens soulignés dans un panneau, appuyez sur Tab (vers l'avant) ou Maj+Tab (vers l'arrière).
• Pour activer un lien souligné, appuyez sur Entrée.
• Pour agrandir le texte, appuyez sur Ctrl+signe égal.
• Pour réduire la taille du texte, appuyez sur Ctrl+-.

Sélection des documents d'aide appropriés

La liste suivante énumère la documentation accessible depuis le menu Aide. Utilisez-la pour trouver le système d'aide qui répondra à vos questions.

• L'aide de Dreamweaver (baptisée Utilisation de Dreamweaver), destinée à tous les utilisateurs, fournit des informations détaillées sur toutes les fonctionnalités de Adobe® Dreamweaver® CS3.
• Le guide Extension de Dreamweaver, qui décrit le cadre Dreamweaver et l'interface de programmation d'applications (API), est destiné aux utilisateurs chevronnés qui veulent créer des extensions ou personnaliser l'interface de Dreamweaver.
• Le Guide des API de Dreamweaver étudie l'API des utilitaires et l'API JavaScript, employées par les utilisateurs chevronnés qui veulent créer des extensions ou personnaliser l'interface.
• L'aide du cadre applicatif Spry explique la création d'ensembles de données Ajax, de widgets et d'effets au moyen du cadre applicatif Spry. Elle contient des exemples de code et des guides de mise en route. Ces documents ne sont pas spécifiques à Dreamweaver. Vous trouverez des rubriques consacrées à Spry et spécifiques à Dreamweaverdans Utilisation de Dreamweaver.
• L'aide de ColdFusion consiste en une sélection d'ouvrages de la bibliothèque de référence consacrée à Macromedia® ColdFusion® d'Adobe (la bibliothèque entière est disponible sur LiveDocs). Ces documents d'aide sont destinés aux développeurs, débutants et chevronnés, qui s'intéressent à ColdFusion.
• Référence permet d'accéder à des manuels de référence consacrés au langage HTML, au modèle de serveur, etc. Ils ont été conçus pour quiconque a besoin de plus d'informations sur la syntaxe de codage, les concepts de codage, etc.

Ressources

Atelier vidéo Adobe

L'atelier vidéo Adobe Creative Suite 3 propose plus de 200 vidéos de formation pour Adobe Creative Suite 3. Ces ateliers couvrent un large éventail de sujets à l'intention des professionnels de l'impression, du Web et de la vidéo.

Vous pouvez utiliser l'atelier vidéo Adobe pour en apprendre davantage sur le produit Creative Suite 3. De nombreuses vidéos vous expliquent comment utiliser les applications Adobe de manière combinée.

Lorsque vous lancez l'atelier vidéo Adobe, vous choisissez les produits que vous voulez apprendre et les sujets que vous voulez voir. Des informations détaillées sont disponibles pour chaque vidéo afin de vous aider et diriger votre apprentissage.

Communauté de présentateurs

Avec cette nouvelle version, Adobe Systems invite les membres de la communauté Adobe à partager leurs compétences et leurs connaissances. Adobe et Lynda.com mettent à votre disposition des didacticiels, trucs et astuces proposés par des concepteurs et développeurs de renom parmi lesquels Joseph Lowery, Katrin Eismann et Chris Georgenes. Des experts Adobe, tels que Lynn Grillo, Greg Rewis et Russell Brown, vous prodigueront également de précieux conseils. Au total, pas moins de 30 experts partageront leurs connaissances avec vous !

Didacticiels et fichiers source

L'Atelier vidéo Adobe propose des formations pour les utilisateurs débutants et expérimentés. Vous y trouverez également des vidéos concernant les nouvelles fonctions et les techniques essentielles. Chaque vidéo porte sur un seul sujet et dure généralement entre 3 et 5 minutes. La plupart des vidéos s'accompagnent d'un didacticiel illustré et de fichiers source. Vous pourrez ainsi imprimer les procédures détaillées et exécuter seul le didacticiel.

Utilisation de l'atelier vidéo Adobe

Pour accéder à l'Atelier vidéo Adobe, utilisez le DVD inclus dans votre produit Creative Suite 3. Il est également disponible en ligne à l'adresse www.adobe.com/go/learn_videotutorials_fr. Adobe s'engage à ajouter régulièrement de nouvelles vidéos à son atelier vidéo en ligne. Nous vous invitons donc à vous enregistrer pour découvrir toutes les nouveautés.

Vidéos Dreamweaver CS3

L'atelier vidéo Adobe couvre un large éventail de sujets concernant Adobe Dreamweaver® CS3. En voici un aperçu :

• Utilisation de widgets Spry
- Formatage de formulaires avec CSS
• Dépannage de problèmes de publication
- Création de boutons animés

- Utilisation et personnalisation de mises en page basées sur CSS

Les vidéos vous expliquent également comment utiliser Dreamweaver CS3 avec d'autres logiciels Adobe :

• Conception de sites Web avec Dreamweaver et Photoshop
• Utilisation de modèles Dreamweaver avec Contribute®
• Importation, copie et collage de données entre des applications Web

Pour accéder aux dictaticiels vidéo d'Adobe Creative Suite 3, visitez l'atelier vidéo Adobe à l'adresse www.adobe.com/go/learn_videotutorials_fr.

Extras

Vous avez accès à de très nombreuses ressources afin de vous aider à tirer le meilleur parti possible de votre logiciel Adobe. Certaines de ces ressources sont installées sur votre ordinateur pendant la procédure d'installation ; d'autres échantillons et documents très pratiques se trouvent sur le DVD d'installation ou de contenu. Des suppléments particulièrement intéressants sont également proposés en ligne par la communauté Adobe Exchange, à l'adresse suivante www.adobe.com/go/exchange_fr.

Ressources installées

Lors de l'installation du logiciel, plusieurs ressources sont placées dans votre dossier d'application. Pour visualiser ces fichiers, accédez au dossier correspondant sur votre ordinateur.

• Windows®: [lecteur de lancement]\Program Files\Adobe\Adobe [application]
  • Mac OS® : [disque de démarrage]/Applications/Adobe [application]

Le dossier de l'application peut contenir les éléments suivants :

Plug-ins Les plug-ins (ou modules externes) sont de petits logiciels qui étendent les fonctionnalités de votre logiciel ou en ajoutent de nouvelles. Une fois installés, les modules externes s'affichent comme options dans les menus Importation ou

Exportation, comme formats de fichier dans les boîtes de dialogue Ouvrir, Enregistrer sous et Exporter l'original ou bien encore comme filtres dans les sous-menus Filtres. Par exemple, plusieurs modules externes avec des effets particuliers sont automatiquement installés dans le dossier Modules externes du dossier Photoshop CS3.

Préconfigurations Les préconfigurations se composent d'un éventail d'outils, de préférences, d'effets et d'images particulièrement pratiques. Les préconfigurations de produit contiennent des pinceaux, nuanciers, groupes de couleurs, symboles, formes personnalisées, styles de graphiques et de calques, motifs, textures, actions, espaces de travail, etc. Du contenu prédéfini est disponible dans toute l'interface utilisateur. Certaines préconfigurations (c'est le cas des bibliothèques de pinceaux Photoshop, par exemple) s'activent uniquement lorsque vous sélectionnez l'outil correspondant. Si vous ne souhaitez pas créer un effet ou une image en partant de zéro, puisez votre inspiration dans les bibliothèques prédéfinies.

Modèles Vous pouvez ouvrir et visualiser les fichiers de modèles à partir d'Adobe Bridge, les ouvrir à partir de l'écran de bienvenue ou directement à partir du menu Fichier. En fonction du produit, les fichiers de modèles vont des en-têtes de lettre aux bulletins d'information en passant par les sites Web, menus de DVD et autres boutons vidéo. Chaque fichier de modèle a été élaboré par un concepteur professionnel et illustre parfaitement les fonctionnalités du produit. Ces modèles peuvent se révéler particulièrement utiles pour démarrer un projet.

Echantillons Les fichiers échantillons contiennent des conceptions plus complexes. Ils constituent la solution idéale pour présenter, de manière dynamique, les nouveautés d'un produit. Ces fichiers illustrent toutes les possibilités créatives à votre disposition.

Polices Votre solution Creative Suite s'accompagne de plusieurs familles de polices et polices OpenType®. Les polices sont copiées sur votre ordinateur lors de l'installation :

• Windows : [lecteur de lancement]\Windows\Fonts
  • Mac OS X : [lecteur de lancement]/Bibliothèque/Fonts

Pour plus d'informations sur l'installation des polices, consultez le fichier Lisez-moi situé sur le DVD d'installation.

Contenu du DVD

Le DVD d'installation ou de contenu fourni avec votre produit contient des ressources supplémentaires utilisables avec votre logiciel. Le dossier En prime contient des fichiers spécifiques au produit, tels que des modèles, images, préconfigurations, actions, plug-ins et effets, ainsi que des sous-dossiers destinés aux polices et banques d'images. Le dossier Documentation contient une version PDF de l'aide, des informations techniques et d'autres documents, tels que des feuilles modèles, des guides de référence et des informations spécialisées.

Adobe Exchange

Vous en voulez plus ? Dans ce cas, rendez-vous sur www.adobe.com/go/exchange_fr, une communauté en ligne où les utilisateurs téléchargent et échangent, à titre gracieux, des milliers d'actions, extensions, plug-ins et autres éléments utilisables avec les produits Adobe.

Accueil Bridge

L'Accueil Bridge, une nouvelle destination dans Adobe Bridge CS3, réunit en un seul emplacement fonctionnel des informations récentes sur tous vos logiciels Adobe Creative Suite 3. Démarrez Adobe Bridge, puis cliquez sur l'icône Accueil Bridge dans la partie supérieure du panneau Favoris pour accéder aux dernières astuces, actualités et ressources concernant vos outils Creative Suite.

Remarque : l'Accueil Bridge n'est peut-être pas disponible dans toutes les langues.

Br Band Fichier Edition Affichage Piles Etiquette Outils Fenêtre Aide Band Favors Dossiers Poste de travail Bureau Recherches précédentes Mes documents AdobeStockPhotos Compositions téléchargées Pride Fibre Trier par Nom du fichier Type de fichier Document Illustrator 13 Document PDF 3 Date de création 14/12/2006 3 31/10/2006 13 Contenu Bumper Sticker.alt Button.alt CD Booklet.alt CD Label.alt CD Tray Card.alt DVD Menu.alt DVD Submenu.alt Flyer.alt Media Folder.alt Aperçu CD Label.alt Metadonnées Mots-clés Propriétés de fichier Nom du fichier CD Label.alt Type de document Document Illustrator Application Adobe Illustrator CS3 Date de création 31/10/2006, 11:09:43 Date de modification 27/01/2007, 03:40:06 Taille du fichier 255 Ko IPTC Core Policies Myriad Pro Plaques 16 éléments, 1 sélectioné

Adobe Design Center

Adobe Design Center met à votre disposition des articles, modèles et instructions proposés par des experts de l'industrie, des concepteurs de renom et des partenaires d'édition d'Adobe. Du nouveau contenu est ajouté tous les mois.

Adobe SOLUTIONS | PRODUITS | SUPPORT | COMMUNAUTÉS | SOCIÉTÉ | TÉLECHARGER | STORE Accueil / Pôle de création Adobe Galerie Groupe de réfloxion Découvrez comment les concepteurs d'aujourd'hui embrasent la technologie et mesurez impact de ces expériences sur la création, les outils de création et la société. Nouvelles animations basse fidéite à base de pixels démesurés par d'en Reel. Quelques animateurs intrépides abusent des technologies pour permettre aux pixels de dépapier les frontières de la perfection et de pénétrer le royume de Etoile de dialogue Des experts partagent des idées nouvelles en termes d'animations et de création numérique. Flux de production Camera Raw avec Bldige, DNG Converter, le module externe Camera Raw et Photoshop CS2 (PDF, 5.7 Mb) par Jeff Schewe Photographe et formateur éminent, Jeff Schewe explique les finants et les abouissants des flux d'imagerie numérique. Didacticiels Création de composés After Effects avec Encore DVD Création de compositions After Effects avec Encore DVD Par Chad Perkins Créez facilement des animations à l'aide d'After Effects pour les menus de vos projets Encore DVD. Optimization de l'interface utiliséeur d'Acrobat 3D Toolkit pour votre flux de Pôle de création des produits Acrobat Acrobat 3D After Effects Audition Creative Suite Dreamweaver Encore DVD Fireworks Flash GoLive Illustrator InDesign Photoshop Premiere Pro Production Studio Reader Didacticiels Pôle de création Création de la production d'after Effects avec Encore DVD Dans ce dédiatement clos de cette Davis, nous support dans les animateurs déterminés pour les menus de vos projets d'acrobat DVO et son vous des derniers dans la suite after Enrolle 1.0 Groupe de folie Pro copies Pour score car sales, vous avez avoir le topical suillet. Adobe Encore DVD 24 Acrobat DVO Acrobat Blue (Effectu 2.0) Encore DVD Acrobat Blue (Effectu 2.0) Acrobat Blue (Effectu 2.0) Acrobat Blue (Effectu 2.0) Commercials en copies: Commercials en copies avec l'encore DVD 3.0 et d'aille Effects 1.0 Use false information

Outre des centaines de didacticiels axés sur les logiciels de conception, vous y trouverez des conseils et techniques sous la forme de vidéos, de didacticiels HTML et d'extraits de chapitres de livre.

Les idées nouvelles sont au cœur même de Think Tank, Dialog Box et Gallery :

• Les articles Think Tank analysent la façon dont les concepteurs contemporains embrassent la technologie et ce que leurs expériences signifient pour la création, les outils de création et la société en général.
• Dans Dialog Box, des experts partagent leurs idées nouvelles en termes d'animations et de création numérique.
• Dans Gallery, vous découvrirez ce que les artistes entendent par conception en mouvement.

Rendez-vous sur Adobe Design Center à l'adresse www.adobe.com/fr/designcenter.

Centre des développeurs Adobe

Le Centre des développeurs Adobe propose des échantillons, des didacticiels, des articles et diverses ressources à l'usage des développeurs qui utilisent des produits Adobe pour élaborer, entre autres projets, du contenu mobile, des applications Internet et des sites Web sophistiqués. Ce centre contient également des ressources à l'intention des développeurs de plugins pour produits Adobe.

Outre des échantillons de code et des didacticiels, vous y trouverez des flux RSS, des séminaires en ligne, des kits SDK, des guides de création de scripts, ainsi que bien d'autres ressources techniques.

Rendez-vous sur le Centre des développeurs Adobe à l'adresse www.adobe.com/go/developer_fr.

Support technique

Consultez le site Web d'assistance technique d'Adobe (www.adobe.com/fr/support) pour obtenir des informations de dépannage pour votre produit et en savoir plus sur les options d'assistance technique gratuites et payantes. Suivez le lien Formation pour accéder à des manuels Adobe Press, à un éventail de ressources de formation, à des programmes de certification de logiciels d'Adobe, etc.

Téléchargements

Rendez-vous à l'adresse www.adobe.com/go/downloads_fr pour obtenir gratuitement des mises à jour, des versions d'essai et d'autres logiciels utiles. Adobe Store (www.adobe.com/go/store_fr) vous donne également accès à des milliers de plug-ins de développeurs tiers, ce qui vous aide à automatiser des tâches, personnaliser des flux de production, créer des effets spéciaux de qualité professionnelle et bien d'autres choses encore.

Adobe Labs

Adobe Labs vous permet d'utiliser et d'évaluer des technologies nouvelles et émergentes, ainsi que des produits Adobe.

Adobe Labs vous donne accès à un éventail de ressources :

• Préversions de logiciels et technologies à venir
• Echantillons de code et méthodes conseillées pour accélérer votre apprentissage
• Préversions de la documentation technique et produit
• Forums, contenu Wikipédia et autres ressources de collaboration pour vous aider à interagir avec des développeurs qui partagent vos opinions

Adobe Labs favorise la mise en place d'un processus de développement de logiciels axé sur la collaboration. Dans cet environnement, les clients utilisant de nouveaux produits et technologies deviennent rapidement productifs. Adobe Labs est également un forum de commentaires, que l'équipe de développement Adobe utilise pour créer des logiciels correspondant aux besoins et aux attentes de la communauté.

Visitez Adobe Labs à l'adresse www.adobe.com/go/labs_fr.

Communautés d'utilisateurs

Les communautés d'utilisateurs comprennent des forums, des blogs et d'autres moyens leur permettant de partager des technologies, des outils et des informations. Les utilisateurs peuvent poser des questions afin de savoir comment les autres utilisateurs exploitent au mieux leur logiciel. Les forums utilisateur sont disponibles en anglais, français, allemand et japonais ; les blogs sont rédigés dans un large éventail de langues.

Pour participer à des forums ou à des blogs, rendez-vous à l'adresse www.adobe.com/fr/communities.

Dernières nouveautés

Principales nouvelles fonctionnalités d'Adobe Dreamweaver CS3

Cadre applicatif Spry pour Ajax

Adobe® Dreamweaver® CS3 permet de concevoir, développer et déployer, le tout de manière visuelle, des interfaces utilisateur dynamiques à l'aide du cadre applicatif Spry pour Ajax. Le cadre applicatif Spry pour Ajax est une bibliothèque JavaScript qui permet aux concepteurs Web de créer des pages offrant une expérience enrichie à leurs utilisateurs. Contrairement à d'autres cadres Ajax, Spry est accessible aux concepteurs et aux développeurs, car il consiste à 99% en langage HTML. Voir « Création visuelle de pages Spry » à la page 428.

Widgets Spry

Les widgets Spry sont des composants d'interface utilisateur communs, prédéfinis, que vous pouvez personnaliser à l'aide de CSS afin de les ajouter à vos pages Web. Dreamweaver permet d'ajouter divers widgets Spry à vos pages, dont des listes et des tableaux animés par XML, des accordéons, des interfaces à onglets et des éléments de formulaire à validation. Voir « Ajout de widgets Spry » à la page 428.

Effets Spry

Les effets Spry sont une manière simple et élégante d'améliorer l'apparence de votre site Web. Vous pouvez les appliquer à pratiquement n'importe quel élément d'une page HTML. Vous pouvez ajouter des effets Spry pour agrandir, réduire, atténuer et mettre en évidence des éléments, modifier visuellement un élément de page pendant une période précise, et bien plus encore. Voir « Ajout d'effets Spry » à la page 462.

Intégration avancée de Photoshop CS3

Dreamweaver comprend une intégration améliorée avec Photoshop CS3. Désormais, un concepteur peut sélectionner une partie d'un concept dans Photoshop, y compris sur plusieurs calques, et la coller directement dans une page Dreamweaver. Dreamweaver affiche une boîte de dialogue où vous pouvez définir les options d'optimisation de l'image. Si vous voulez modifier l'image, il suffit de double-cliquer dessus pour ouvrir le fichier PSD d'origine, avec ses calques, dans Photoshop. Voir « Utilisation de Photoshop » à la page 358.

Vérification de la compatibilité avec les navigateurs

La nouvelle fonction Vérification de la compatibilité avec les navigateurs de Dreamweaver génère des rapports qui identifient les problèmes de restitution liés à CSS dans divers navigateurs. En mode Code, les problèmes sont soulignés en vert, ce qui vous permet de les repérer aisément. Quand vous avez identifié le problème, vous pouvez le corriger rapidement si vous connaissez la solution. Si vous avez besoin d'un complément d'information, vous pouvez visiter le site Adobe CSS Advisor. Voir « Vérification de problèmes de restitution CSS entre les navigateurs » à la page 137.

Adobe CSS Advisor

Le site Web Adobe CSS Advisor fournit des informations sur les problèmes CSS les plus récents. Il est accessible directement à partir de l'interface utilisateur de Dreamweaver au cours du processus Vérification de la compatibilité avec les navigateurs. Plus qu'un simple forum, une page wiki ou un groupe de discussion, le site CSS Advisor permet d'entrer des commentaires qui fournissent des suggestions et des améliorations de contenu existant, ou d'ajouter de nouveaux problèmes, qui profiteront à la communauté entière. Voir « Vérification de problèmes de restitution CSS entre les navigateurs » à la page 137.

Mises en forme CSS

Dreamweaver fournit un ensemble de mises en forme CSS prédéfinies qui vous permettront d'obtenir rapidement une page fonctionnelle et vous apprendront à utiliser la mise en page CSS, grâce à la présence de commentaires détaillés inclus dans le code. La plupart des concepts de sites sur le Web peuvent être classifiés en mises en forme à une, deux ou trois colonnes, accompagnée chacune de divers éléments complémentaires (comme en-têtes et pieds de page). Dreamweaver fournit désormais une liste complète de concepts de mise en forme essentiels, que vous pouvez personnaliser selon vos besoins. Voir « Création d'une page avec une mise en page CSS » à la page 145.

Gestion des styles CSS

La fonctionnalité de gestion des styles CSS facilite le déplacement de règles CSS 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. Vous pouvez également convertir du code CSS intégré en règles CSS, et les placer où vous le souhaitez, par glisser/déposer. Voir « Déplacement des règles CSS » à la page 134 et « Conversion d'un style CSS intégré en une règle CSS » à la page 135.

Adobe Device Central

Intégré à Dreamweaver ainsi qu'aux autres logiciels de la famille Creative Suite 3, Adobe Device Central simplifie la création de contenu mobile en vous permettant d'accéder rapidement aux caractéristiques techniques essentielles de chaque appareil, et de réduire le texte et les images de votre page HTML afin d'en obtenir une restitution identique à l'apparence qu'elle aurait sur l'appareil concerné. Voir « Aperçu des pages sur les appareils mobiles » à la page 286.

Adobe Bridge CS3

La combinaison de Dreamweaver et d'Adobe Bridge CS3 permet une gestion aisée et cohérente des images et des actifs. Adobe Bridge offre un accès centralisé à vos fichiers de projet, vos applications et vos paramètres, sans oublier des fonctionnalités de marquage et de recherche de métadonnées XMP. Avec ses fonctions d'organisation et de partage de fichiers, ainsi qu'un accès à Adobe Stock Photos, Adobe Bridge garantit un flux créatif plus efficace. Vous maîtrisez ainsi les moindres aspects de vos projets d'impression, Web, vidéo et mobiles. Voir « Utilisation de Bridge » à la page 367.

Chapitre 2 : Espace de travail

L'espace de travail de Adobe® Dreamweaver® CS3 contient les barres d'outils, les inspecteurs et les panneaux qui servent à la création de pages Web. Vous pouvez personnaliser l'apparence générale et le comportement de l'espace de travail.

Déroulement du travail et espace de travail dans Dreamweaver

Présentation des processus de Dreamweaver

Vous pouvez utiliser plusieurs approches pour créer un site Web ; voici l'une des approches possibles :

Planification et configuration de votre site

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

Organisation et gestion des fichiers de votre site

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

Mise en forme de vos pages Web

Sélectionnez la technique de mise en forme de votre choix ou combinez les options de mise en forme de Dreamweaver pour définir la présentation de votre site. Vous pouvez utiliser des éléments PA, des styles de positionnement CSS ou des mises en forme CSS prédéfinies de Dreamweaver pour définir la mise en forme. Les outils de création de tableaux vous permettent de concevoir des pages rapidement en dessinant, puis en réorganisant la structure des pages Si vous souhaitez afficher plusieurs éléments simultanément dans un navigateur Web, vous pouvez utiliser des cadres pour mettre en forme vos documents. Finalement, vous pouvez créer de nouvelles pages à partir d'un modèle Dreamweaver, puis actualiser automatiquement leur mise en forme lorsque le modèle change (Voir « Création de pages avec CSS » à la page 117 et « Mise en forme des pages avec HTML » à la page 167.)

Ajout de contenu dans les pages

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

Création de pages par codage manuel

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

Configuration d'une application Web pour un contenu dynamique

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

Création de pages dynamiques

Dans Dreamweaver, vous pouvez définir diverses sources de contenu dynamique, y compris des jeux d'enregistrements extraits de bases de données, des paramètres de formulaire et des composants JavaBeans. Pour ajouter le contenu dynamique à une page, il suffit de le faire glisser vers cette dernière.

Vous pouvez définir une configuration de page qui affiche un ou plusieurs enregistrements à la fois (ou plusieurs pages d'enregistrements), ajoute des liens spéciaux permettant de passer d'une page d'enregistrements à une autre et crée des compteurs d'enregistrements pour faciliter la gestion de ces derniers. Vous pouvez encapsuler la logique d'application ou d'entreprise en faisant appel à des technologies telles que Macromedia® ColdFusion® d'Adobe® et les services Web. Si vous avez besoin de plus de souplesse, vous pouvez créer des comportements de serveur et formulaires interactifs personnalisés. (Voir « Ajout de contenu dynamique aux pages Web » à la page 512.)

Test et publication

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

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 une présentation intégrée en une seule fenêtre. Dans l'espace de travail intégré, toutes les fenêtres et tous les panneaux sont rassemblés dans une grande fenêtre d'application.

Adobe Dreamweaver CS3 - [Untitled 1 (XHTML)] Fichier Edition Affichage Insertion Modérin Texte Commandes Paste Fergère Aide Insertion Commun Mise en forme Stimulares Données Spiry Texte Favons Untitled-1 Code Fractionner Création Tère : Document sans nos Vérifier la page Fichiers Actifs Fragments de code Bureau Gérer les sites Fichiers locaux Taille Typ Bureau Poste de travail Favoris réseau Serveurs FTP & R... Éléments du bureau Propriétés Format Aurun Style Aurun CSS B I Lien Ponce Police par défaut Talle Aurun Cble Propriétés de la page... Élément de liste... E F G Journal...

A. Barre Insertion B. Barre d'outils du document C. Fenêtre de document D. Groupes de panneaux E. Sélecteur de balises F. Inspecteur Propriétés G. Panneau Fichiers

Sous Mac OS ^® , Dreamweaver peut afficher de multiples documents dans une seule fenêtre avec des onglets qui identifient chacun des documents. Dreamweaver permet également d'afficher un espace de travail flottant où chaque document dispose de sa propre fenêtre. Les groupes de panneaux sont initialement ancrés ensemble, mais vous pouvez les séparer pour les faire apparaître dans leur propre fenêtre. Les fenêtres s'alignent automatiquement les unes sur les autres sur les côtés de l'écran, et sur la fenêtre du document au fur et à mesure que vous les faites glisser ou que vous les redimensionnez.

A B C D Commun Untitled -1 (XHTML) Code Fractionmer Origation Tère Document sans titre Vérifier la page 150 1100 1150 200 250 300 350 400 450 500 550 600 650 700 750 CSS Application Inspectuer de balises Fichiers Fichiers Actifs Fragments de code cafe towns... Affichage... Fichiers locaux: Site - cafe town... Journal... Format Style Aucun CSS B F Lien Police Police par défaut Taille Aucun Obel Propriétés de la page... Element de liste... E F G

A. Barre Insertion B. Barre d'outils du document C. Fenêtre de document D. Groupes de panneaux E. Sélecteur de balises F. Inspecteur Propriétés G. Panneau Fichiers

Vous trouverez un didacticiel consacré à la configuration de l'espace de travail de Dreamweaver à l'adresse www.adobe.com/go/vid0143_fr.

Voir aussi

« Utilisation des barres d'outils, des inspecteurs, des menus contextuels et des panneaux » à la page 26
« Choix de la présentation de l'espace de travail (sous Windows) » à la page 32
« Choix de la présentation de l'espace de travail (Macintosh) » à la page 32
« Affichage de documents à onglets (Macintosh) » à la page 32

Espace de travail

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

Remarque : Dreamweaver propose de nombreux autres inspecteurs, panneaux et fenêtres. Pour ouvrir les panneaux, inspecteurs et fenêtres, utilisez le menu Fenêtre. Si vous n'arrivez pas à localiser un panneau, un inspecteur ou une fenêtre indiqués comme ouverts, choisissez Fenêtre > Réorganiser Panneaux pour présenter tous les panneaux ouverts à l'écran.

Ecran d'accueil Permet d'ouvrir un document récent ou de créer un nouveau document. Vous pouvez également, à partir de l'écran d'accueil, survoler Dreamweaver ou accéder à un didacticiel.

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

Barre d'outils du document Contient des boutons permettant d'accéder aux différents modes d'affichage de la fenêtre du document (tels que le mode Création ou le mode Code), de définir les différentes options d'affichage et d'effectuer certaines opérations courantes, telles que la prévisualisation dans un navigateur.

Barre d'outils standard Non affichée dans l'agencement par défaut de l'espace de travail. Contient des boutons correspondant aux opérations courantes des menus Fichier et Edition : Nouveau, Ouvrir, Enregistrer, Enregistrer tout, Couper, Copier, Coller, Annuler et Répéter. Pour afficher la barre d'outils standard, choisissez Affichage > Barres d'outils > Standard.

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

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

Fenêtre de document Affiche le document que vous créez et modifiez.

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

Le sélecteur de balises Située dans la barre d'état, dans le bas de la fenêtre de document. Affiche la hiérarchie des balises entourant la sélection active. Cliquez sur une balise quelconque dans la hiérarchie pour la sélectionner avec son contenu.

Groupes de panneaux Ensembles de panneaux associés regroupés sous un même titre. Pour développer un groupe de panneaux, cliquez sur la flèche d'agrandissement située à gauche du nom du groupe ; pour détacher un groupe de panneaux, faites glisser la poignée d'ancrage sur le côté gauche de la barre de titre du groupe.

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

Voir aussi

« Utilisation de la fenêtre de document » à la page 23
« Utilisation des barres d'outils, des inspecteurs, des menus contextuels et des panneaux » à la page 26
« A propos des groupes de panneaux » à la page 29

Présentation de la fenêtre de document

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

Mode Création Un environnement de création pour la mise en forme visuelle des pages, l'édition visuelle et le développement rapide d'applications. Dans ce mode, Dreamweaver affiche une représentation visuelle entièrement modifiable du document, similaire à la représentation de la page sur un navigateur. Vous pouvez configurer le mode Création pour qu'il affiche le contenu dynamique pendant que vous travaillez sur le document.

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

Modes Code et Création Permettent d'obtenir l'affichage Code et l'affichage Création du document dans une même fenêtre.

Lorsque la fenêtre de document dispose d'une barre de titre, cette dernière affiche le titre de la page, et, entre parenthèses, le chemin et le nom de fichier du document. Dreamweaver affiche un astérisque à la suite du nom de fichier si vous avez apporté des modifications et que vous ne les avez pas encore enregistrées.

Lorsque vous agrandissez la fenêtre de document de la présentation de l'espace de travail intégré (sous Windows uniquement), elle s'affiche sans barre de titre; le titre de la page, ainsi que le chemin et le nom du fichier s'affichent alors dans la barre de titre de la fenêtre principale de l'espace de travail.

Lorsqu'une fenêtre de document est agrandie, des onglets s'affichent en haut de la fenêtre de document indiquant les noms de fichier de tous les documents ouverts. Pour passer à un autre document, cliquez sur son onglet.

Voir aussi

« Utilisation de la fenêtre de document » à la page 23
« A propos du codage dans Dreamweaver » à la page 288
« Affichage de données dynamiques en mode Création » à la page 552

Présentation de la barre d'outils de document

La barre d'outils de document est composée de boutons qui permettent d'accéder rapidement aux différents modes d'affichage : Code, Création et un mode d'affichage partagé pour afficher les modes Code et Création en même temps.

La barre d'outils contient également plusieurs commandes et options courantes permettant d'afficher le document et de le transférer d'un site local vers un site distant.

A B C D E F G H I J K Code Fractionner Création Titre : Document sans nom Vérifier la page

A. Afficher le mode Code B. Afficher les modes Code et Création C. Afficher le mode Création D. Titre du document E. Gestion des fichiers F. Aperçu/Débogage dans le navigateur G. Actualiser mode Création H. Afficher les options I. Assistances visuelles J. Valider le marqueur K. Vérification de la compatibilité avec les navigateurs

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

Afficher le mode Code Affiche uniquement le mode Code dans la fenêtre de document.

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

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

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

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

Gestion des fichiers Affiche le menu contextuel 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 contextuel.

Actualiser mode Création Actualise le mode Création du document après avoir apporté des modifications dans le mode Code. Les modifications apportées dans le mode Code n'apparaissent pas automatiquement dans le mode Création. Vous devez exécuter tout d'abord certaines opérations, comme enregistrer le fichier ou utiliser ce bouton.

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

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

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

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

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

Voir aussi

« Affichage des barres d'outils » à la page 26
« Personnalisation de l'environnement de codage » à la page 296
« Affichage et modification de contenu d'en-tête » à la page 322
« Utilisation d'assistances visuelles pour la mise en forme » à la page 167

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, Enregistrer, Enregistrer tout, Couper, Copier, Coller, Annuler et Répéter. Utilisez ces boutons comme vous utiliseriez les commandes de menu équivalentes.

Voir aussi

« Affichage des barres d'outils » à la page 26
« Création et ouverture de documents » à la page 66

Présentation de la barre d'état

La barre d'état, située au bas de la fenêtre de document, fournit des informations supplémentaires sur le document en cours de création.

100% 512 x 89 1Ko / 1 s A B C D E F G A. Sélecteur de balises B. Outil Sélectionner C. Outil Main D. Outil Zoom E. Définir le facteur de zoom F. Menu contextuel Taille de fenêtre G. Taille du document et estimation du temps de téléchargement Sélecteur de balises Affiche la hiérarchie des balises entourant la sélection active. Cliquez sur une balise quelconque dans la hiérarchie pour la sélectionner avec son contenu. Cliquez sur pour sélectionner tout le corps du document. Pour définir les attributs class ou id d'une balise dans le sélecteur de balises, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Option enfoncée (Macintosh) sur la balise et choisissez une classe ou un ID dans le menu contextuel. Outil Sélectionner Active et désactive l'outil Main. Outil Main Permet de cliquer sur le document et de le glisser jusque dans la fenêtre de document. Outil Zoom et le menu contextuel Définir le facteur de zoom Permettent de définir un taux d'agrandissement pour votre document. Menu contextuel Taille de fenêtre Visible en mode Création uniquement. Permet de redimensionner la fenêtre du document selon des dimensions prédéfinies ou personnalisées. Taille du document et temps de téléchargement Fournit une estimation de la taille du document et du temps de téléchargement de la page, ainsi que la liste de tous les fichiers dépendants, tels que les images et autres fichiers de données. Voir aussi « Définition de la taille des fenêtres et de la vitesse de connexion » à la page 25 « Zoom avant et arrière » à la page 215 « Redimensionnement de la fenêtre de document » à la page 24 « Définition des préférences de durée et de taille des téléchargements » à la page 216 Présentation de la barre Insertion Les boutons qui composent la barre Insertion permettent de créer et d'insérer des objets, tels que des tableaux, des éléments PA et des images. Lorsque vous placez le curseur de la souris sur un bouton, une info-bulle indiquant le nom de ce bouton apparaît. Les boutons sont organisés en plusieurs catégories, que vous pouvez afficher en cliquant sur les onglets dans la partie supérieure de la barre Insertion. D'autres catégories s'affichent lorsque le document sélectionné contient du code serveur, tel que des documents ASP ou CFML. Au démarrage de Dreamweaver, la dernière catégorie utilisée s'ouvre. Insertion Commun Mise en forme Formulaires Données Spry Texte Favoris Certaines catégories disposent de boutons ouvrant des menus contextuels. Lorsque vous sélectionnez une option dans l'un d'eux, l'action associée est attribuée par défaut au bouton. Par exemple, si vous sélectionnez le menu contextuel du bouton Image, puis Espace réservé pour l'image, la prochaine fois que vous cliquerez sur le bouton Image, Dreamweaver insérera un espace réservé pour l'image. Lorsque vous sélectionnez une nouvelle option dans l'un de ces menus, l'action attribuée par défaut au bouton change. La barre Insertion est organisée en différentes catégories, comme suit : Catégorie Commun Permet de créer et d'insérer les objets les plus couramment utilisés, comme les images et les tableaux. Catégorie Mise en forme Permet d'insérer des tableaux, des balises div, des cadres et des widgets Spry. Vous pouvez choisir deux modes pour les tableaux : Standard (par défaut) et Développé. Catégorie Formulaires Contient des boutons permettant de créer des formulaires et d'insérer des éléments de formulaire, dont des widgets de validation Spry. Catégorie Données Permet d'insérer des éléments de données Spry et d'autres éléments dynamiques, tels que des jeux d'enregistrements, des régions répétées et des formulaires d'insertion et de mise à jour d'enregistrements. Catégorie Spry Contient des boutons permettant de créer des pages Spry, avec des objets de données Spry et des widgets. Catégorie Texte Permet d'insérer diverses balises de mise en forme de texte et de liste, telles que b, em, p, h1 et ul. Catégorie Favoris Permet de regrouper et d'organiser, dans un espace commun, les boutons de la barre 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, ASP.NET, CFML Basic, CFML Flow, CFML Advanced, JSP et PHP. Ces catégories proposent des objets de type code serveur que vous pouvez insérer en mode Code. Voir aussi « Utilisation de la barre Insertion » à la page 26 « Création visuelle de pages Spry » à la page 428 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 est visible uniquement en mode Code et apparaît verticalement sur le côté gauche de la fenêtre de Document. Vous ne pouvez pas détacher ni déplacer la barre d'outils de codage mais vous pouvez la masquer. Vous pouvez également modifier la barre d'outils de codage pour afficher des boutons supplémentaires (Retour automatique à la ligne, Caractères cachés et Retrait auto) ou pour masquer des boutons que vous ne souhaitez pas utiliser. Néanmoins, vous devez pour cela modifier le fichier XML qui génère la barre d'outils. Pour plus d'informations, voir Extension de Dreamweaver. Voir aussi « Affichage des barres d'outils » à la page 26 « Insertion de code avec la barre d'outils de codage » à la page 303 Présentation de la barre d'outils Rendu de style La barre d'outils de rendu de style (masquée par défaut) est composée de boutons qui vous permettent d'avoir un aperçu de votre création dans différents types de média si vous utilisez des feuilles de style dépendantes du média. Elle contient également un bouton qui permet d'activer ou de désactiver les styles CSS. Pour afficher la barre d'outils standard, choisissez Affichage > Barres d'outils > Rendu de style. Cette barre d'outil n'est fonctionnelle que si vos documents appliquent des feuilles de styles dépendantes du média. Par exemple, votre feuille de style peut comporter une règle relative au corps du texte pour l'impression et une autre pour l'affichage sur des téléphones portables. Pour plus d'informations sur la création de feuilles de style dépendantes du média, consultez le site Web du World Wide Web Consortium à l'adresse www.w3.org/TR/CSS21/media.html. Par défaut, Dreamweaver affiche votre mise en forme pour le type de média écran (qui indique comment une page apparaît sur un écran d'ordinateur). Vous pouvez afficher les rendus de type de média suivants en cliquant sur les boutons respectifs dans la barre d'outils de rendu de style. Rendu pour le type de support Ecran Indique comment la page apparaît sur un écran d'ordinateur. Rendu pour le type de support Impression Indique comment la page apparaît sur une feuille de papier imprimée. Rendu pour le type de support Téléphone mobile Indique comment la page apparaît sur un appareil portatif comme un téléphone mobile et un BlackBerry. Rendu pour le type de support Projection Indique comment la page apparaît sur un projecteur. Rendu pour le type de support TTY Indique comment la page apparaît sur un appareil de type télétype. Rendu pour le type de support TV Indique comment la page apparaît sur un téléviseur. Intervertir l'affichage des Styles CSS Permet d'activer ou de désactiver les styles CSS. Ce bouton fonctionne indépendamment des autres boutons de média. Pour accéder à un didacticiel relatif à la création de feuilles de style pour l'impression et les appareils portatifs, consultez le site Web de Adobe à l'adresse www.adobe.com/go/vid0156_fr. Voir aussi « Affichage des barres d'outils » à la page 26 Présentation de l'inspecteur Propriétés L'inspecteur Propriétés permet d'examiner et de modifier les propriétés les plus fréquentes de l'élément de la page sélectionnée, tel que le texte ou un objet inséré. Le contenu de l'inspecteur Propriétés varie en fonction de l'élément sélectionné. Par exemple, si vous sélectionnez une image de la page, l'inspecteur Propriétés se modifie pour montrer les propriétés de l'image (telles que le chemin d'accès au fichier, la largeur et la hauteur de l'image, la bordure autour de l'image, s'il y a lieu, et ainsi de suite). Propriétés Image, 19K L Src_assets/header.jpg Sec. H Lien_townsend/index.html Modifier Carte Espace V Cible Bordure 0 Espace H Src faible Aligner Par défaut L'inspecteur Propriétés se trouve par défaut dans le bas de l'espace de travail. Vous pouvez toutefois le déplacer dans le haut ou le transformer en panneau flottant sur l'espace de travail. Voir aussi « Ancrage et annulation d'ancrage de panneaux et de groupes de panneaux » à la page 30 « Utilisation de l'inspecteur Propriétés » à la page 28 Présentation du panneau Fichiers Vous pouvez utiliser les panneaux Fichiers pour afficher et exploiter les fichiers dans votre site Dreamweaver. Fichiers Fichiers Actifs Fragments de code Cafe Townsend Affichage loce Site - Cafe Townsend (C:\Documents ar completed_files contact data fireworks_assets flashContent images xml cafe_townsend_home.flv flash_fma.swf menu.css menu.html sample_text.txt Journal... Lorsque vous affichez des sites, des fichiers ou des dossiers dans le panneau Fichiers, vous pouvez modifier la taille de la zone d'affichage. Vous pouvez également agrandir ou réduire le panneau Fichiers. Dans sa forme réduite, le panneau Fichiers affiche le contenu du site local, du site distant ou du serveur d'évaluation sous la forme d'une liste de fichiers. Sous sa forme développée, le panneau affiche le site local et soit le site distant, soit le serveur d'évaluation. Le panneau Fichiers peut également afficher une carte d'arborescence du site local. Pour 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. Voir aussi « Utilisation des fichiers depuis le panneau Fichiers » à la page 77 Présentation du panneau Styles CSS Il vous permet de suivre les règles CSS et les propriétés qui affectent un élément de page sélectionné (mode Current (ou Sélection)), ou les règles et les propriétés qui affectent l'ensemble d'un document (mode All (ou Tout)). Un bouton bascule placé sur la partie supérieure du panneau Styles CSS vous permet de passer d'un mode à l'autre. Le panneau Styles CSS vous permet de modifier les propriétés CSS dans les deux modes. CSS Styles CSS Éléments PA Tous Actuel Résumé de la sélection font-family Verdana, SansSerif font-size 11px line-height 18px color #000000 padding 3px A propos de "font-family" font-family est définie dans la règle "p" dans cafe_townsend.css. Propriétés de "p" color #000000 font-family Verdana, SansSerif font-size 11px line-height 18px padding 3px Ajouter une prop... Vous pouvez redimensionner n'importe quel volet en faisant glisser les cadres entre les volets. En mode Current (Sélection), le panneau Styles CSS présente trois volets : un volet Summary for Selection (Récapitulatif de la sélection) qui présente les propriétés CSS de la sélection en cours dans le document; un volet Rules (Règles) qui précise l'emplacement des propriétés sélectionnées (ou une cascade de règles pour la balise sélectionnée, selon votre sélection); et un volet Propriétés qui vous permet de modifier les propriétés CSS de la règle définissant la sélection. En mode All (Tout), le panneau Styles CSS présente deux volets : un volet All Rules (Toutes les règles) (en haut) et un volet Propriétés (en bas). Le volet Toutes les règles présente la liste des règles définies dans le document actif, ainsi que l'ensemble des règles définies dans les feuilles de styles jointes à ce document. Le volet Propriétés permet de modifier les propriétés CSS de toute règle sélectionnée dans le volet Toutes les règles. Toute modification apportée dans le volet Propriétés s'applique immédiatement, ce qui vous permet d'avoir un aperçu direct de votre travail. Voir aussi « Création et gestion CSS » à la page 121 Présentation des guides visuels Dreamweaver met à votre disposition plusieurs types de guides visuels pour vous aider à concevoir vos documents et à prévoir approximativement l'aspect qu'ils auront dans un navigateur. Vous pouvez effectuer les opérations suivantes : Adapter instantanément la taille de la fenêtre de document à un format d'affichage donné, afin de contrôler la disposition des éléments sur la page Utiliser un tracé d'image en arrière-plan de la page, de manière à pouvoir reproduire plus aisément une mise en forme créée dans une application graphique telle que Adobe® Photoshop® ou Adobe® Fireworks®. Utiliser des règles et des guides comme repère visuel pour le positionnement et le redimensionnement précis des éléments de page - Utilisez la grille afin d'effectuer un positionnement et un redimensionnement précis des éléments à positionnement absolu (PA). Si la fonction d'alignement automatique est activée, les éléments PA s'alignent automatiquement sur le croisillon de grille le plus proche lorsqu'ils sont déplacés ou redimensionnés (d'autres objets, par exemple les images et les paragraphes, ne sont pas aimantés par la grille). L'alignement fonctionne même si la grille n'est pas visible. Voir aussi « Utilisation d'assistances visuelles pour la mise en forme » à la page 167 Utilisateurs de GoLive Si vous utilisez GoLive jusqu'ici et que vous souhaitez passer à l'utilisation de Dreamweaver, vous pouvez consultez une présentation en ligne de l'espace de travail et du déroulement du travail dans Dreamweaver ainsi qu'une discussion sur les moyens de faire migrer votre site vers Dreamweaver. Pour plus d'informations, consultez le site www.adobe.com/go/learn_dw_golive_fr. Utilisation de la fenêtre de document Basculement d'un mode à un autre dans la fenêtre de document Vous pouvez afficher un document dans la fenêtre de document en mode Code, en mode Création ou en mode Code et création. Voir aussi « Présentation de la fenêtre de document » à la page 16 Activation du mode Code ◆ Effectuez l'une des opérations suivantes : • Choisissez Affichage > Code. - Dans la barre d'outils du document, cliquez sur le bouton Afficher le mode Code . Activation du mode Création ◆ Effectuez l'une des opérations suivantes : • Choisissez Affichage > Création. - Dans la barre d'outils du document, cliquez sur le bouton Afficher le mode Création Affichage à la fois en modes Code et Création ◆ Effectuez l'une des opérations suivantes : - Choisissez Affichage > Code et création. - Dans la barre d'outils du document, cliquez sur le bouton Afficher les modes Code et Création 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. 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. Voir aussi « Choix de la présentation de l'espace de travail (sous Windows) » à la page 32 « Affichage de documents à onglets (Macintosh) » à la page 32 « Enregistrement de présentations de l'espace de travail personnalisées » à la page 33 Affichage en cascade des fenêtres de document ◆ Choisissez Fenêtre > Cascade. Affichage en mosaïque des fenêtres de document (Windows) Sélectionnez Fenêtre > Mosaïque horizontale ou Fenêtre > Mosaïque verticale. • (Macintosh) Sélectionnez Fenêtre > Mosaïque. Redimensionnement de la fenêtre de document La barre d'état affiche les dimensions de la fenêtre de document sélectionnée (en pixels). Pour qu'une page s'affiche de façon optimale à une taille spécifique, vous pouvez régler la fenêtre de document sur l'une des tailles prédéterminées, modifier ces tailles prédéterminées ou en créer de nouvelles. Redimensionnement de la fenêtre de document selon une taille prédéterminée: Choisissez l'une des tailles affichées dans le menu contextuel Taille de fenêtre qui se trouve dans la barre d'état de la fenêtre de document. Remarque : (Windows uniquement) Vous pouvez agrandir la fenêtre de document pour qu'elle occupe tout l'espace de la zone de document de la fenêtre intégrée. Vous ne pouvez pas redimensionner une fenêtre de document agrandie.
	592w 536 x 196 (640 x 480, Par défaut) 600 x 300 (640 x 480, Agrandie) 760 x 420 (800 x 600, Agrandie) 795 x 470 (832 x 624, Agrandie) 955 x 600 (1024 x 768, Agrandie) 544 x 378 (WebTV) Modifier les tailles... La taille de la fenêtre correspond aux dimensions internes de la fenêtre de navigateur, bordures exclues ; la résolution de l'écran est indiquée entre parenthèses. Optez, par exemple, pour le format « 536 x 196 (640 x 480, valeur par défaut) » si les visiteurs de votre site utilisent Microsoft Internet Explorer ou Netscape Navigator par défaut sur un moniteur de 640 x 480. 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. Modification des valeurs figurant dans le menu contextuel Taille de fenêtre: 1 Cliquez sur Modifier les tailles dans le menu contextuel Taille de fenêtre. 2 Cliquez sur une valeur de largeur ou de hauteur dans la liste Taille de la fenêtre, puis entrez une nouvelle valeur. Pour que la fenêtre de document adopte uniquement une largeur spécifique sans que sa hauteur change, sélectionnez la valeur de hauteur et supprimez-la. 3 Cliquez sur la zone Description pour saisir un texte décrivant la taille spécifique. Ajout d'un nouveau format d'affichage au menu contextuel Taille de fenêtre: 1 Cliquez sur Modifier les tailles dans le menu contextuel Taille de fenêtre. 2 Cliquez dans l'espace vierge qui apparaît sous la dernière valeur de la colonne Largeur. 3 Indiquez les valeurs souhaitées pour Largeur et Hauteur. Pour définir soit la largeur, soit la hauteur, laissez l'un des champs vide. 4 Cliquez dans le champ Description pour saisir un texte décrivant la taille ajoutée. Par exemple, vous pouvez entrer SVGA ou PC standard à côté de l'entrée correspondant à un moniteur d'une résolution de 800 x 600 pixels, et Mac 17 à côté de l'entrée correspondant à un moniteur d'une résolution de 832 x 624 pixels. Diverses résolutions peuvent être réglées sur la plupart des moniteurs. Définition de la taille des fenêtres et de la vitesse de connexion 1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh). 2 Sélectionnez la catégorie Barre d'état dans la liste de gauche. 3 Parmi les options suivantes, définissez celles de votre choix : Taille de la fenêtre Permet de personnaliser les tailles de fenêtre qui s'affichent dans le menu contextuel de la barre d'état Vitesse de connexion Détermine la vitesse de connexion (exprimée en kilobits par seconde) utilisée pour calculer le temps de téléchargement. Le temps de téléchargement de la page apparaît dans la barre d'état. Celui des images est affiché dans l'inspecteur Propriétés lorsqu'une image est sélectionnée dans la fenêtre de document. Voir aussi « Présentation de la barre d'état » à la page 17 « Redimensionnement de la fenêtre de document » à la page 24 Rapports dans Dreamweaver Dans Dreamweaver, vous pouvez exécuter des rapports afin de rechercher ou de tester des contenus ou encore de corriger des erreurs. Vous pouvez générer les types de rapports suivants : Rechercher Permet de rechercher des balises, des attributs ou une portion de texte spécifique dans les balises. Validation Permet de rechercher les erreurs de code ou de syntaxe. Vérification du navigateur cible Permet de tester le code HTML de vos documents afin de déterminer s'il contient des balises ou des attributs non pris en charge par les navigateurs cibles. Vérificateur de lien Permet de rechercher et de corriger les liens brisés, externes et orphelins. Rapports du site Permet d'améliorer le déroulement du travail et de tester les attributs HTML dans votre site. Les rapports sur le déroulement du travail incluent les fonctions Extrait par, Modifiés récemment et Design Notes ; les rapports HTML incluent les balises de polices imbriquées combinables, l'accessibilité, les textes secondaires manquants, les balises imbriquées redondantes, les balises vides amovibles et les documents sans nom. Journal FTP Permet d'avoir une vue d'ensemble des transferts de fichiers en FTP. Débogage du serveur permet d'obtenir les informations nécessaires au débogage d'une application Macromedia® ColdFusion® d'Adobe®. Voir aussi « Recherche de balises, d'attributs ou de chaînes de texte dans le code » à la page 307 « Test de votre site » à la page 101 « Validation des balises » à la page 314 « Vérification de la compatibilité du navigateur » à la page 314 « Rechercher les liens rompus, externes et orphelins » à la page 282 « Placement de fichiers sur un serveur distant » à la page 86 « Acquisition de fichiers depuis un serveur distant » à la page 85 « Utilisation du débogueur ColdFusion (Windows uniquement) » à la page 315 Utilisation des barres d'outils, des inspecteurs, des menus contextuels et des panneaux Affichage des barres d'outils Utilisez les barres d'outils document et standard pour effectuer des opérations de modification standard liées au document ; utilisez la barre d'outils codage pour insérer du code rapidement ; et utilisez la barre d'outils rendu de style pour afficher votre page comme elle apparaîtrait dans différents types de média. Vous pouvez afficher ou masquer ces barres selon qu'elles vous sont utiles ou non. Sélectionnez Affichage > Barres d'outils, puis sélectionnez la barre d'outils voulue. Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh) sur l'une des barres d'outils et sélectionnez la barre d'outils dans le menu contextuel. Remarque : Pour afficher la barre d'outils de codage dans l'Inspecteur de code (Fenêtre > Inspecteur de code), vous devez la sélectionner dans le menu déroulant des options d'affichage situé en haut de l'inspecteur. Voir aussi « Présentation de la barre d'outils de document » à la page 16 « Présentation de la barre d'outils standard » à la page 17 « Présentation de la barre d'outils de codage » à la page 19 « Présentation de la barre d'outils Rendu de style » à la page 20 Utilisation de la barre Insertion Les boutons qui composent la barre Insertion permettent de créer et d'insérer des objets, tels que des tableaux et des images. Ces boutons sont organisés en plusieurs catégories. Voir aussi « Présentation de la barre Insertion » à la page 18 « Modification de balises avec des éditeurs de balises » à la page 306 « Sélection et affichage d'éléments dans la fenêtre de document » à la page 211 Masquage ou affichage de la barre Insertion Choisissez Fenêtre > Insérer. Cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) dans la barre Insertion ou la barre d'outils standard, de document ou de codage, puis choisissez Barre Insertion. Remarque : Si vous utilisez certaines types de fichiers, tels que XML, JavaScript, Java et CSS, la barre Insertion et l'option de mode Création sont grisées parce que vous ne pouvez pas insérer d'éléments dans ces fichiers de code. Affichage des boutons d'une catégorie ❖ Cliquez sur les noms des catégories au-dessus de la barre Insertion. Affichage du menu contextuel d'un bouton ❖ Cliquez sur le bouton fléché pointant vers le bas situé près de l'icône du bouton. Untitled-1 Code Fractionne Image Espace réservé pour l'image Image survolée HTML Fireworks Barre de navigation Dessiner une zone réactive rectangulaire Dessiner une zone réactive ovale Dessiner une zone réactive polygonale Affichage des catégories de la barre Insertion sous forme de menus ❖ Cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur un onglet de catégorie dans la barre Insertion, puis choisissez Afficher en tant que menu. Affichage des catégories de la barre Insertion sous forme d'onglets ❖ Cliquez sur la flèche du menu contextuel située près du nom de la catégorie, à l'extrémité gauche de la barre Insertion, puis choisissez Afficher en tant qu'onglets. Insertion d'un objet 1 Sélectionnez une catégorie dans la partie gauche de la barre Insertion. 2 Effectuez l'une des opérations suivantes : - Cliquez sur un bouton d'objet ou faites glisser l'icône du bouton dans la fenêtre de document. - Cliquez sur la flèche d'un bouton, puis sélectionnez une option dans le menu. Selon le type d'objet que vous sélectionnez, une boîte de dialogue d'insertion d'objet s'affiche, le cas échéant, et vous invite à rechercher un fichier ou à spécifier les paramètres d'un objet spécifique. En outre, Dreamweaver vous permet d'insérer du code dans le document ou d'ouvrir un éditeur de balises ou un panneau vous permettant de spécifier les informations avant l'insertion du code. Dans le cas de certains objets, aucune boîte de dialogue ne s'affiche si vous insérez les objets en mode Création, mais un éditeur de balises s'affiche si vous insérez les objets en mode Code. Pour d'autres objets, lorsque vous essayez d'insérer des objets en mode Création, Dreamweaver passe en mode Code avant de réaliser l'insertion. Remarque : Certains objets, tels que les ancres nommées, ne sont pas visibles lorsque vous visualisez la page dans la fenêtre d'un navigateur. Vous pouvez afficher des icônes en mode Création indiquant l'emplacement de ces objets invisibles. Contournement de la boîte de dialogue d'insertion d'objets et insertion d'un espace réservé vide - Appuyez sur la touche Ctrl (Windows) ou Option (Macintosh) tout en cliquant avec la souris sur le bouton correspondant à l'objet. Par exemple, pour insérer un espace réservé d'image sans spécifier de fichier d'image, appuyez sur la touche Ctrl ou Option tout en cliquant avec la souris sur le bouton Image. Remarque : Cette procédure ne contourne pas toutes les boîtes de dialogue d'insertion d'objet. De nombreux objets, y compris les barres de navigation, les éléments PA, boutons Flash et jeux 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 de la barre Insertion 1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh). 2 Dans la catégorie Général de la boîte de dialogue Préférences, désactivez l'option Afficher la boîte de dialogue lors de l'insertion d'objets pour supprimer les boîtes de dialogue lors de l'insertion d'objets, tels que des images, des tableaux, des scripts ou des éléments d'en-tête. Vous pouvez également maintenir la touche Ctrl (Windows) ou Option (Macintosh) enfoncée tandis que vous créez l'objet. Si cette option est désactivée lorsque vous insérez un objet, celui-ci aura des valeurs par défaut. Utilisez l'inspecteur Propriétés pour modifier les propriétés de l'objet après l'avoir inséré. Ajout, suppression ou gestion des boutons de la catégorie Favoris de la barre Insertion 1 Sélectionnez l'une des catégories de la barre Insertion. 2 Cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) dans la zone où apparaissent les boutons (ne cliquez pas sur le nom de la catégorie), puis sélectionnez Personnaliser les objets favoris. 3 Apportez les modifications souhaitées et cliquez sur OK. Si la catégorie Favoris n'est pas la catégorie active, sélectionnez-la afin de voir les modifications apportées. - Pour ajouter un objet, sélectionnez-le dans le volet Objets disponibles situé à gauche, puis cliquez sur la flèche située entre les deux volets ou cliquez deux fois sur l'objet dans le volet Objets disponibles. Remarque : Les objets doivent être ajoutés un par un. Il est impossible de sélectionner un nom de catégorie tel que Commun afin d'ajouter une catégorie entière à votre liste de favoris. Pour supprimer un objet ou un séparateur, sélectionnez l'objet dans le volet Objets favoris situé à droite, puis cliquez sur le bouton Supprimer l'objet sélectionné dans la liste Objets favoris, au-dessus du volet. Pour déplacer un objet, sélectionnez-le dans le volet Objets favoris situé à droite, puis cliquez sur le bouton fléché pointant vers le haut ou vers le bas situé au-dessus du volet. Pour ajouter un séparateur sous un objet, sélectionnez un objet dans le volet Objets favoris situé à droite, puis cliquez sur le bouton Ajouter un séparateur situé en dessous du volet. Insérer des objets à l'aide des boutons de la catégorie Favoris ✿ Sélectionnez la catégorie Favoris dans la partie gauche de la barre Insertion, puis cliquez sur le bouton correspondant à un objet Favori que vous avez ajouté. Utilisation de l'inspecteur Propriétés L'inspecteur Propriétés permet d'examiner et de modifier les propriétés les plus fréquentes de l'élément de la page sélectionnée, tel que le texte ou un objet inséré. Le contenu de l'inspecteur Propriétés varie en fonction de l'élément sélectionné. Remarque : Utilisez l'inspecteur de balises pour afficher et modifier les attributs associés à des propriétés de balises. Voir aussi « Présentation de l'inspecteur Propriétés » à la page 20 « Ancrage et annulation d'ancrage de panneaux et de groupes de panneaux » à la page 30 « Modification d'attributs dans l'inspecteur de balises » à la page 317 Affichage ou masquage de l'inspecteur Propriétés ◆ Choisissez Fenêtre > Propriétés. Développement ou réduction de l'inspecteur Propriétés ❖ Cliquez sur la flèche d'agrandissement dans l'angle inférieur droit de l'inspecteur Propriétés. Affichage et modification des propriétés d'un élément de page 1 Sélectionnez l'élément de la page dans la fenêtre de document. Si nécessaire, développez l'inspecteur Propriétés afin que toutes les propriétés de l'élément sélectionné puissent apparaître. 2 Modifiez les propriétés de votre choix dans l'inspecteur Propriétés. Remarque : Pour obtenir des informations sur des propriétés particulières, sélectionnez un élément dans la fenêtre de document, puis cliquez sur l'icône Aide (?) dans le coin supérieur droit de l'inspecteur Propriétés. 3 Si les changements ne s'appliquent pas immédiatement dans la fenêtre de document, appliquez-les d'une des façons suivantes : Cliquez hors des champs de texte de modification des propriétés. Appuyez sur la touche Entrée (Windows) ou Retour (Macintosh). Appuyez sur la touche de tabulation pour passer à une autre propriété. Utilisation des menus contextuels Les menus contextuels vous permettent d'accéder rapidement aux commandes et propriétés les plus utiles relatives à l'objet ou à la fenêtre avec lesquels vous travaillez. Les menus contextuels répertorient uniquement les commandes en rapport avec la sélection en cours. 1 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur l'objet ou la fenêtre qui vous intéresse. 2 Choisissez une commande dans le menu contextuel. ...ts and Settings\Rubrics\mes documents\local_sites\cafe_townsend\contact\php\view.php (XHTML) 0 50 100 150 200 250 300 350 400 450 500 550 600 650 700 Nouveau Cafe Townsend Costumer Comr café TOWNSEND,a Nom... Fichier source... Source faible... Aligner Styles CSS Modèles Modifier la balise ... Maj+F5 Supprimer la balise Modifier le lien Supprimer le lien Ouvrir la page liée Rétablir les dimensions Optimiser dans Fireworks... Modifier avec rundll32 Modifier avec... Ajouter aux favoris de l'image Site Couper Copier Coller Design Notes... Propriétés
100% 721 x 506 2Ko / 1 s A propos des groupes de panneaux Dans Dreamweaver, les panneaux sont liés entre eux pour former dans des groupes de panneaux. Un panneau sélectionné dans un groupe de panneaux apparaît comme un onglet. Vous pouvez développer ou réduire les groupes de panneaux, les ancrer ou les détacher des autres groupes. Vous pouvez également les ancrer dans la fenêtre de l'application intégrée (Windows uniquement). Cela vous permet d'accéder aisément aux panneaux nécessaires sans encombrer votre espace de travail. Remarque : Lorsqu'un groupe de panneaux est flottant (détaché), une étroite barre vide apparaît au-dessus du groupe. Dans cette documentation, le terme « barre de titre du groupe de panneaux » fait référence à la zone où s'affiche le nom du groupe de panneaux, plutôt qu'à cette étroite barre vide. Affichage des panneaux et des groupes de panneaux Vous pouvez afficher ou masquer les panneaux et groupes de panneaux dans l'espace de travail selon qu'ils vous sont utiles ou non. Développement ou réduction d'un groupe de panneaux Cliquez sur la flèche d'agrandissement dans le coin gauche de la barre de titre du groupe de panneaux. Cliquez sur le titre du groupe de panneaux pour réduire ce groupe. Fermeture d'un groupe de panneaux afin qu'il ne soit plus visible à l'écran ❖ Choisissez Fermer le groupe de panneaux dans le menu Options de la barre de titre du groupe de panneaux. Ouverture un groupe de panneaux ou un panneau qui n'est pas visible à l'écran : ❖ Dans le menu Fenêtre, sélectionnez un nom de panneau. Une coche en regard d'un élément dans le menu Fenêtre indique que l'élément est ouvert (il est possible qu'il n'apparaisse pas à l'écran s'il est masqué derrière d'autres fenêtres). Si vous n'arrivez pas à localiser un panneau, un inspecteur ou une fenêtre indiqués comme ouverts, choisissez Fenêtre > Réorganiser Panneaux pour présenter tous les panneaux ouverts à l'écran. Masquage de tous les groupes de panneaux ❖ Sélectionnez Fenêtre > Masquer les panneaux. Sélection d'un panneau à l'intérieur d'un groupe de panneaux développé ❖ Cliquez sur le nom du panneau. Affichage du menu d'options d'un groupe de panneaux, s'il n'est pas visible ❖ Cliquez sur le nom du groupe de panneaux ou sur sa flèche d'agrandissement pour développer le groupe de panneaux. Le menu Options est visible uniquement lorsque le groupe de panneaux est développé. Plusieurs options sont disponibles dans le menu contextuel du groupe de panneaux même lorsque celui-ci est réduit ; cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), sur la barre de titre du groupe de panneaux pour afficher le menu contextuel. Ancrage et annulation d'ancrage de panneaux et de groupes de panneaux Vous pouvez déplacer les panneaux et groupes de panneaux et les réorganiser afin qu'ils flottent ou qu'ils soient ancrés dans l'espace de travail. La plupart des panneaux ne peuvent être ancrés que sur le côté gauche ou droit de la fenêtre de document dans l'espace de travail intégré, tandis que d'autres (l'inspecteur Propriétés et la barre Insertion, par exemple) ne peuvent être ancrés qu'en haut ou en bas dans la fenêtre intégrée. Remarque : Vous ne pouvez pas détacher le panneau Fichiers si vous êtes en mode développé. Pour réduire le panneau Fichiers avant de le détacher, cliquez sur le bouton Développer/Réduire situé le plus à droit en haut du panneau. Si vous fermez le panneau Fichiers alors qu'il est détaché, il disparaît de l'interface. Pour le récupérer, appuyez sur F8 ou sélectionnez Fenêtre > Fichiers. Détachement d'un groupe de panneaux Faites glisser le groupe de panneaux en le saisissant par sa poignée d'ancrage (sur le côté gauche de la barre de titre) jusqu'à ce que son contour indique qu'il n'est plus ancré. Remarque : Si vous détachez l'inspecteur Propriétés, son format se modifie de sorte qu'il ne dispose plus de poignée d'ancrage ni de barre de titre, mais vous pouvez cliquer n'importe où dans le panneau pour le faire glisser ou l'ancrer à nouveau. Réduction ou restauration d'un panneau ou d'un groupe de panneaux Pour réduire un panneau, cliquez sur son titre, qui est souligné. Cliquez à nouveau dessus pour rétablir le panneau. Réancrage d'un panneau ou d'un groupe de panneaux ✿ Tirez le groupe de panneaux par sa barre de titre afin de l'amener sur la gauche ou la droite de l'espace de travail. Quand un contour noir est visible, relâchez-le. Il peut être nécessaire de tirer le groupe vers le haut pour que son contour noir s'affiche et qu'il soit possible de l'ajouter à l'ensemble de panneaux déjà affichés. Remarque : Certains panneaux, comme l'inspecteur Propriétés et Résultats, doivent être placés en haut ou en bas de la fenêtre de document, et pas à gauche ni à droite. Ancrage d'un groupe de panneaux à d'autres groupes de panneaux (espace de travail flottant) ou à la fenêtre intégrée (sous Windows uniquement): Faites glisser le groupe de panneaux en le saisissant par sa poignée d'ancrage jusqu'à ce que son contour indique qu'il est ancré. Détachement d'un panneau d'un groupe de panneaux Dans le menu Options de la barre de titre du groupe de panneaux, sélectionnez Associer à > Nouveau groupe de panneaux Vous pouvez également détacher un panneau en le faisant glisser hors du groupe de panneaux. Ancrage d'un panneau à un groupe de panneaux 1 Sélectionnez le panneau que vous souhaitez déplacer en cliquant sur son onglet. 2 Sélectionnez la destination d'un groupe de panneaux dans le sous-menu Associer à du menu Options du groupe de panneaux (le nom de la commande Associer à peut varier selon le nom du panneau actif). Déplacement d'un groupe de panneaux flottant (détaché) sans l'ancrer Faites glisser le groupe de panneaux par la barre située au-dessus de sa barre de titre. Le groupe de panneaux se s'ancre pas tant que vous ne le faites pas glisser par sa poignée d'ancrage. Redimensionnement et changement de nom des groupes de panneaux Vous pouvez modifier la taille et le nom des groupes de panneaux selon vos besoins. Modification de la taille des groupes de panneaux - Panneaux flottants : afin de redimensionner l'ensemble des groupes de panneaux, faites-les glisser tout comme vous le faites pour redimensionner une fenêtre quelconque de votre système d'exploitation. Par exemple, en faisant glisser la zone de redimensionnement dans le coin inférieur droit de l'ensemble de groupes de panneaux. - Panneaux ancrés : faites glisser la barre de séparation entre les panneaux et la fenêtre de document. Agrandissement d'un groupe de panneaux - Choisissez Agrandir le groupe de panneaux dans le menu Options de la barre de titre du groupe de panneaux. - Double-cliquez à n'importe quel endroit dans la barre de titre du groupe de panneaux. Changement du nom d'un groupe de panneaux 1 Dans le menu Options de la barre de titre du groupe de panneaux, choisissez Renommer le groupe de panneaux. 2 Saisissez un nouveau nom, puis cliquez sur OK. Enregistrement de groupes de panneaux Dreamweaver vous permet d'enregistrer et de restaurer différents groupes de panneaux de façon à personnaliser votre espace de travail pour différentes activités. Lorsque vous enregistrez une présentation d'espace de travail, Dreamweaver se souvient des panneaux dans la présentation spécifiée ainsi que d'autres attributs (positions et tailles des panneaux, leurs états réduits ou développés, la position et la taille de la fenêtre d'application et la position et la taille de la fenêtre de document, par exemple). Voir aussi « Enregistrement de présentations de l'espace de travail personnalisées » à la page 33 Personnalisation de l'espace de travail de Dreamweaver CS3 Choix de la présentation de l'espace de travail (sous Windows) Vous pouvez changer d'espace à tout moment. Choisissez Fenêtre > Présentation de l'espace de travail, puis sélectionnez l'une des présentations d'espace de travail suivantes : Designer Espace de travail intégré utilisant l'interface MDI (Multiple Document Interface), dans laquelle toutes les fenêtres de document et tous les panneaux sont rassemblés dans une grande fenêtre d'application, les groupes de panneaux étant ancrés sur la droite. Codeur Le même espace de travail intégré que Designer, mais avec les groupes de panneaux ancrés sur la gauche, dans une présentation similaire à celle utilisée par Adobe® HomeSite® et ColdFusion. Les fenêtres de document affichent par défaut le mode Code. Remarque : Ces deux espaces de travail autorisent l'ancrage des groupes de panneaux à droite ou à gauche. Double Affichage Permet d'organiser une présentation si vous disposez d'un deuxième écran. Cette présentation place tous les panneaux sur le deuxième écran et maintient la fenêtre de document et l'inspecteur Propriétés sur le premier écran. Choix de la présentation de l'espace de travail (Macintosh) Vous pouvez changer d'espace à tout moment. Choisissez Fenêtre > Présentation de l'espace de travail, puis sélectionnez l'une des présentations d'espace de travail suivantes : Par défaut Espace de travail intégré. Double Affichage Permet d'organiser une présentation si vous disposez d'un deuxième écran. Cette présentation place tous les panneaux sur le deuxième écran et maintient la fenêtre de document et l'inspecteur Propriétés sur le premier écran. Affichage de documents à onglets (Macintosh) Vous pouvez afficher plusieurs documents dans une seule fenêtre de document avec des onglets qui identifient chacun des documents. Vous pouvez aussi les afficher sous la forme d'une partie de l'espace de travail flottant dans laquelle chaque document s'affiche dans sa propre fenêtre. Ouverture d'un document à onglets dans une fenêtre séparée ❖ Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur l'onglet, puis sélectionnez Déplacer dans une nouvelle fenêtre dans le menu contextuel. Rassemblement de documents séparés dans des fenêtres à onglets ❖ Choisissez Fenêtre > Combiner en onglets. Modification du paramètre de document à onglets par défaut 1 Sélectionnez Dreamweaver > Préférences, puis la catégorie Général. 2 Sélectionnez ou désélectionnez Ouvrir les documents dans des onglets et cliquez sur OK. Dreamweaver ne modifie pas l'affichage des documents ouverts lorsque vous modifiez les préférences. En revanche, une fois que vous avez sélectionné une nouvelle préférence, les documents ouverts s'affichent en fonction de cette dernière. Enregistrement de présentations de l'espace de travail personnalisées Dreamweaver vous permet d'enregistrer et de restaurer différents ensembles de panneaux de façon à personnaliser votre espace de travail pour différentes activités. Lorsque vous enregistrez une présentation d'espace de travail, Dreamweaver se souvient des panneaux dans la présentation spécifiée ainsi que d'autres attributs, positions et tailles des panneaux, leurs états réduits ou développés, la position et la taille de la fenêtre d'application. Voir aussi « A propos des groupes de panneaux » à la page 29 « Choix de la présentation de l'espace de travail (sous Windows) » à la page 32 Enregistrement d'une présentation de l'espace de travail 1 Disposez les panneaux en fonctions des besoins. 2 Choisissez Fenêtre > Présentation de l'espace de travail > Enregistrer la présentation active. 3 Indiquez le nom de la présentation et cliquez sur OK. Passage à une autre présentation d'espace de travail personnalisée - Choisissez Fenêtre > Présentation de l'espace de travail, puis sélectionnez votre présentation personnalisée. Changement du nom ou suppression d'une présentation d'espace de travail personnalisée 1 Choisissez Fenêtre > Présentation de l'espace de travail > Gérer. 2 Sélectionnez une présentation et procédez de l'une des manières suivantes : - Pour renommer une présentation, cliquez sur le bouton Renommer, entrez un nouveau nom de présentation et cliquez sur OK. - Pour supprimer une présentation, cliquez sur le bouton Supprimer. Masquage et affichage de l'écran d'accueil L'écran d'accueil s'affiche lorsque vous démarrez Dreamweaver ou lorsqu'aucun document n'est ouvert. Vous pouvez masquer l'écran d'accueil puis l'afficher de nouveau ultérieurement selon vos besoins. Lorsque l'écran d'accueil est masqué et qu'aucun document n'est ouvert, la fenêtre de document est vide. Masquage de l'écran d'accueil - Sélectionnez l'option Ne plus afficher dans l'écran d'accueil. Affichage de l'écran d'accueil 1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh). 2 Sélectionnez l'option Afficher l'écran d'accueil. A propos de la personnalisation de Dreamweaver dans les systèmes multiutilisateurs Dreamweaver peut être personnalisé selon les besoins, même dans les systèmes multiutilisateurs tels que Windows XP ou Mac OS X. Dreamweaver empêche que la configuration personnalisée d'un utilisateur n'affecte celle d'un autre. Pour ce faire, la première fois que vous exécutez Dreamweaver sur l'un des systèmes multiutilisateurs reconnus, l'application crée des copies de divers fichiers de configuration. Ces fichiers sont enregistrés dans un dossier vous appartenant. Par exemple, sous Windows XP, ils sont situés dans le répertoire C:\Documents and Settings\nom_utilisateur\Application Data\Adobe\Dreamweaver 9 CubaConfiguration (qui peut se trouver dans un dossier caché). Sous Mac OS X, ils sont situés dans votre dossier personnel, dans Utilisateurs/nom_utilisateur/Bibliothèque/Application Support/Adobe/Dreamweaver 9/Configuration. Si vous réinstallez ou mettez Dreamweaver à jour, Dreamweaver crée automatiquement des copies de sauvegarde des fichiers de configuration existants. Ainsi, si vous avez personnalisé manuellement ces fichiers, vos modifications restent disponibles. Définition des préférences générales de Dreamweaver 1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh). 2 Parmi les options suivantes, définissez celles de votre choix : Ouvrir les documents dans des onglets Permet d'ouvrir tous les documents dans une seule fenêtre contenant des onglets que vous utilisez pour passer d'un document à l'autre (Macintosh uniquement). Afficher l'écran d'accueil Affiche l'écran d'accueil de Dreamweaver lorsque vous démarrez Dreamweaver ou qu'aucun document n'est ouvert. Rouvrir les documents au démarrage Ouvre tous les documents qui étaient ouverts lorsque vous avez fermé Dreamweaver. Si cette option n'est pas sélectionnée, Dreamweaver affiche l'écran d'accueil ou un écran vide au démarrage (selon les paramètres définis pour Afficher l'écran d'accueil). Avertir à l'ouverture de fichiers en lecture seule Vous informe lorsque le fichier que vous ouvrez est en lecture seule (verrouillé). Vous pouvez déverrouiller/extraire le fichier, l'afficher en lecture seule ou annuler l'action. Mettre à jour les liens lors de la suppression de fichiers Détermine ce qui se passe lorsque vous déplacez, renommez ou supprimez un document dans un site. Vous pouvez définir cette préférence de trois façons différentes: les liens sont toujours automatiquement mis à jour, les liens ne sont jamais mis à jour ou un message vous demande s'il convient d'exécuter une mise à jour (Voir « Mettre les liens à jour automatiquement » à la page 275.) Afficher la boîte de dialogue lors de l'insertion d'un objet Détermine si Dreamweaver vous invite à entrer des informations supplémentaires lorsque vous insérez des images, des tableaux, des animations Shockwave et certains autres objets à l'aide de la barre Insertion ou du menu Insertion. Si cette option est désactivée, aucune boîte de dialogue ne s'affiche ; dans ce cas, précisez le fichier source pour les images, le nombre de lignes dans un tableau, etc. dans l'inspecteur Propriétés. Lorsque vous insérez des images avec effet de survol ou du code HTML Fireworks, une boîte de dialogue s'affiche toujours, quel que soit le paramètre de cette option. (Pour remplacer temporairement ce paramètre, appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant avec la souris lorsque vous créez et insérez des objets.) Activer l'entrée en ligne à deux octets Permet d'entrer un texte à deux octets directement dans la fenêtre de document, si vous utilisez un environnement de développement ou un kit linguistique facilitant la saisie de texte à deux octets (les caractères japonais, par exemple). Si cette option est désélectionnée, une fenêtre de saisie de texte s'affiche, dans laquelle vous entrez et convertissez le texte à deux octets ; le texte apparaît dans la fenêtre de document après avoir été accepté. Passer en paragraphe normal après le titre Indique qu'en appuyant sur la touche Entrée (Windows) ou Retour (Macintosh) à la fin d'un paragraphe de titre en mode d'affichage Création, vous créez un nouveau paragraphe indiqué par une balise p. (Un paragraphe de titre est indiqué par une balise de titre, telle que h1 ou h2.) Lorsque cette option est désactivée, en appuyant sur la touche Entrée ou Retour à la fin d'un paragraphe de titre, vous créez un nouveau paragraphe indiqué par la même balise de titre (ce qui vous permet de saisir plusieurs titres à la suite les uns des autres, puis d'ajouter les détails ultérieurement). Autoriser plusieurs espaces consécutifs Indique qu'en entrant deux espaces ou plus en mode d'affichage Création, vous créez des espaces insécables qui s'affichent sous forme de plusieurs espaces dans un navigateur. (Par exemple, vous pouvez taper deux espaces entre les phrases, tout comme vous le faites sur une machine à écrire.) Cette option est conçue principalement pour les personnes qui utilisent les traitements de texte. Lorsque cette option est désactivée, les espaces multiples sont traités comme des espaces simples (car les navigateurs traitent les espaces multiples comme des espaces simples). Utiliser et au lieu de et Détermine que Dreamweaver applique la balise strong lorsque vous effectuez une action qui appliquerait normalement la balise b, et la balise em lorsque vous effectuez une action qui appliquerait normalement la balise i. Ces actions incluent notamment le fait de cliquer sur les boutons Gras ou Italique de l'inspecteur Propriétés de texte en mode HTML et de choisir Texte > Style > Gras ou Texte > Style > Italique. Pour utiliser les balises b et i dans vos documents, désélectionnez cette option. Remarque : Le World Wide Web Consortium recommande d'éviter les balises b et i ; les balises strong et em fournissent des informations plus sémantiques que les balises b et i . Utiliser des balises CSS au lieu de balises HTML Spécifie que des styles CSS sont utilisés dans Dreamweaver plutôt que des balises HTML lorsque vous formatez le texte avec l'inspecteur Propriétés. Par défaut, Dreamweaver formate le texte en utilisant CSS. Chaque fois qu'une police, une taille ou une couleur est définie pour une sélection de texte, un style propre au document est créé et est ensuite disponible dans le menu contextuel Style de l'inspecteur Propriétés. Les seules exceptions concernent le gras et l'italique, où Dreamweaver utilise des balises HTML plutôt que des styles CSS. Même si le document est lié à une feuille de style externe, de nouvelles déclarations de style sont écrites dans l'en-tête du document, et non dans le fichier CSS. Ce comportement général peut varier dans les situations suivantes : Si le document formate déjà tous les éléments à l'aide des balises font, Dreamweaver suppose qu'il doit utiliser des balises font et modifier la balise body au moyen du code HTML. Si la balise body utilise HTML pour définir l'aspect de la page mais que celle-ci n'utilise pas exclusivement des balises font, Dreamweaver continue à utiliser CSS pour formater le texte. Si vous désélectionnez cette option, Dreamweaver utilisera des balises HTML telles que font pour formater le texte et du code HTML dans la balise body pour définir l'aspect de la page. Avertir lors du placement de régions modifiables dans des balises ou Indique si un message d'avertissement s'affiche lorsque vous enregistrez un modèle Dreamweaver présentant une région modifiable dans une balise de paragraphe ou d'en-tête. Le message vous informe que les utilisateurs ne pourront pas créer de paragraphes supplémentaires dans la région. Cette option est activée par défaut. Centrer Spécifie si des éléments doivent être centrés à l'aide de divalign="center" ou de la balise center lorsque vous cliquez sur le bouton Centrer de l'inspecteur Propriétés. Remarque : L'utilisation de ces deux méthodes de centrage n'est plus recommandée depuis les spécifications de HTML 4.01. Il est conseillé d'utiliser les feuilles de style CSS. Ces méthodes sont encore techniquement applicables à la spécification XHTML 1.0 transitionnel, mais ne sont plus reconnues dans les spécifications XHTML 1.0 Strict. Nombre maximum d'étapes d'historique Détermine le nombre maximal d'étapes que le panneau Historique conserve et affiche. (la valeur par défaut doit être suffisante pour la plupart des utilisateurs). Si le nombre d'étapes dépasse la valeur indiquée, les étapes les plus anciennes sont supprimées (Pour plus d'informations, voir « Automatisation des tâches » à la page 668.) Dictionnaire orthographique Affiche la liste des dictionnaires disponibles. Si un dictionnaire contient plusieurs dialectes ou conventions orthographiques (par exemple, l'anglais britannique et l'anglais américain), les dits dialectes sont répertoriés individuellement dans le menu contextuel Dictionnaire. Voir aussi « Espace de travail » à la page 13 « Mettre les liens à jour automatiquement » à la page 275 Définition des préférences de police pour les documents dans Dreamweaver Le codage d'un document détermine la façon dont le document s'affiche dans un navigateur. Les préférences de polices de Dreamweaver vous permettent d'utiliser un texte affiché dans la police et la taille de votre choix. Les polices que vous choisissez n'ont aucune incidence sur l'aspect du document dans le navigateur d'un visiteur. Pour plus d'informations sur la définition d'un codage par défaut pour les nouveaux documents, consultez la section « Création et ouverture de documents » à la page 66. 1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh). 2 Sélectionnez la catégorie Polices dans la liste de gauche. 3 Sélectionnez le type de codage désiré (par exemple, Occidental ou Japonais) dans la liste Paramètres de la police. Remarque : Pour afficher un document en langue asiatique, il est indispensable que votre système d'exploitation prenne en charge les polices à deux octets. 4 Sélectionnez une police et un format à utiliser pour chaque catégorie du codage sélectionné. Remarque : Pour qu'une police apparaisse dans les menus contextuels correspondants, il est indispensable de l'installer sur votre ordinateur. Par exemple, si vous souhaitez visualiser un texte rédigé en japonais, il vous faut installer un jeu de caractères japonais au préalable. Proportionnelle La police proportionnelle est utilisée par Dreamweaver pour afficher du texte normal (par exemple, un texte contenu dans des paragraphes, des en-têtes et des tableaux). La valeur par défaut varie en fonction des polices installées sur votre système. Pour la plupart des systèmes français, la police proportionnelle par défaut est Times New Roman 12 pt (moyen) sous Windows et Times 12 pt sous Mac OS. Fixe La police fixe est utilisée par Dreamweaver pour afficher du texte dans les balises pre, code et tt. La valeur par défaut varie en fonction des polices installées sur votre système. Pour la plupart des systèmes français, la police fixe par défaut est Courier New 10 pt (petit) sous Windows et Monaco 12 pt sous Mac OS. Mode Code Police utilisée dans tout le texte qui apparaît dans le mode d'affichage Code et dans l'inspecteur de code. La valeur par défaut varie en fonction des polices installées sur votre système. Voir aussi « Description de l'encodage de document » à la page 208 Personnalisation des couleurs de surbrillance Les préférences de surbrillance servent à personnaliser les couleurs utilisées dans Dreamweaver pour identifier les zones d'un modèle, les éléments d'une bibliothèque, les balises tierces, les éléments de mise en forme et le code. Voir aussi « Utilisation du sélecteur de couleur » à la page 214 « Modification de la couleur de surbrillance des balises div » à la page 159 Modification de la couleur de surbrillance 1 Sélectionnez Edition > Préférences, puis la catégorie Surbrillance. 2 Cliquez sur le sélecteur de couleur située près de l'objet dont vous souhaitez modifier la couleur de surbrillance, puis utilisez la palette de couleur pour sélectionner une nouvelle couleur. Vous pouvez également saisir une valeur hexadécimale. Activation ou désactivation de la surbrillance d'un objet 1 Sélectionnez Edition > Préférences, puis la catégorie Surbrillance. 2 Cochez ou décochez l'option Afficher située près de l'objet dont vous souhaitez activer ou désactiver la couleur de surbrillance. Chapitre 3 : Utilisation de sites Dreamweaver Un site Adobe® Dreamweaver® CS3 est un ensemble de tous les fichiers et de tous les actifs de votre site Web. Vous pouvez créer des pages Web sur votre ordinateur, les transférer sur un serveur Web et gérer le site en transférant des fichiers mis à jour chaque fois que vous les sauvegardez. Vous pouvez également modifier et gérer des sites Web qui ont été créés sans Dreamweaver. Configuration d'un site Dreamweaver A propos des sites Dreamweaver Un site Web est un ensemble de documents et d'actifs liés les uns aux autres et partageant des attributs, par exemple une rubrique connexe, une conception similaire ou un même objectif. Outil logiciel de création et de gestion de sites, Dreamweaver permet de réaliser des documents individuels ainsi que des sites Web complets. Dans Dreamweaver, le terme « site » se rapporte à un lieu de stockage local ou distant dans lequel sont conservés tous les documents appartenant à un site Web. Un site Dreamweaver permet d'organiser et de gérer tous vos documents Web, de transférer vos fichiers de site à un serveur Web, de suivre et de gérer les liens, ainsi que de gérer et de partager les fichiers. Définissez un site pour tirer le meilleur parti des fonctions offertes par Dreamweaver. Remarque : Pour définir un site Dreamweaver, vous devez simplement configurer un dossier local. Pour transférer des fichiers vers un serveur Web ou pour développer des applications Web, vous devez également ajouter des informations concernant un site distant et un serveur d'évaluation. Un site Dreamweaver se compose de trois parties, ou dossiers, selon votre environnement de travail et le type de site Web que vous développez : Dossier racine local Stocke les fichiers en cours de développement. Dans Dreamweaver, ce dossier est appelé votre « site local ». Il peut se trouver sur un ordinateur local ou sur un serveur de réseau. Si vous travaillez directement sur le serveur, Dreamweaver transfère ces fichiers sur le serveur chaque fois que vous les sauvegardez. Dossier distant Stocke les fichiers que vous réservez aux évaluations, à la production, à la collaboration, etc. Dans Dreamweaver, ce dossier est appelé votre « site distant » dans le panneau Fichiers. En règle générale, votre dossier distant se trouve sur l'ordinateur à partir duquel vous exécutez votre serveur Web. Ces deux dossiers (local et distant) vous permettent de transférer des fichiers entre votre disque dur local et un serveur Web, ce qui facilite la gestion des fichiers sur vos sites Dreamweaver. Dossier du serveur d'évaluation Dossier dans lequel Dreamweaver traite les pages dynamiques. Vous trouverez un didacticiel consacré à la définition d'un site Dreamweaver à l'adresse www.adobe.com/go/vid0145_fr. Description de la structure du dossier local et du dossier distant Si vous voulez utiliser Dreamweaver pour vous connecter à un dossier distant, vous devez définir ce dossier distant dans la catégorie Infos distantes de la boîte de dialogue Définition du site. Le dossier distant (également baptisé « répertoire hôte ») doit correspondre au dossier racine local de votre site Dreamweaver. Le dossier racine local est le dossier supérieur de votre site Dreamweaver. Les dossiers distants, tout comme les dossiers locaux, peuvent posséder n'importe quel titre. Toutefois, les fournisseurs d'accès à Internet nomment généralement les dossiers distants de niveau supérieur de leurs différents comptes d'utilisateur public_html, pub_html, etc. Si vous êtes responsable de votre serveur distant et si vous pouvez nommer le dossier distant à votre guise, il est conseillé de donner le même nom au dossier racine local et au dossier distant. L'exemple ci-dessous représente un exemple de dossier racine local à gauche et un exemple de dossier distant à droite. Le dossier racine local sur l'ordinateur local correspond directement au dossier distant du serveur Web, et non à l'un des sous-dossier du dossier distant ou à des dossiers situés au-dessus du dossier distant dans la structure des répertoires. graph TD A["site local (dossier racine)"] -->|non| B["repatoire d'ouverture de session (ne doit pas être le répertoire hôte dans ce cas-ci)"] A -->|oui| C["public_html (doit être le répertoire hôte)"] A -->|non| D["Assets (ne doit pas être le répertoire hôte)"] A --> E["HTML"] F["Assets"] -.-> G[" site local "] H["HTML"] -.-> I[" site local "] Remarque : L'exemple ci-dessus représente un dossier racine local sur l'ordinateur local, et un dossier distant de niveau supérieur sur le serveur Web distant. Toutefois, si vous gérez plusieurs sites Dreamweaver sur l'ordinateur local, vous aurez besoin d'un nombre identique de dossiers distants sur le serveur distant. Dans un tel cas, l'exemple ci-dessus n'est pas d'application. Vous devez au contraire créer différents dossiers distants dans le dossier public_html, puis les faire correspondre à leurs dossiers racine locaux respectifs sur l'ordinateur local. Lorsque vous établissez une première connexion distante, le dossier distant du serveur Web est généralement vide. Ensuite, lorsque vous utilisez Dreamweaver pour charger tous les fichiers de votre dossier racine local, le dossier distant se remplit de tous vos fichiers Web. La structure des répertoires du dossier distant doit toujours être identique à celle du dossier racine local. En d'autres termes, il doit toujours exister une correspondance précise entre les fichiers et les dossiers de votre dossier racine locale et ceux de votre dossier distant. Si la structure du dossier distant ne correspond pas à celle du dossier racine local, Dreamweaver transfère les fichiers au mauvais endroit et ils risquent de ne pas être visibles pour les visiteurs du site. En outre, les chemins d'accès des images et les liens peuvent être aisément endommagés si les structures des dossiers et des fichiers ne sont pas synchronisées. Le dossier distant doit déjà exister pour que Dreamweaver puisse s'y connecter. Si aucun répertoire racine n'existe ne fait office de dossier distant sur le serveur Web, créez-en un ou demandez à l'administrateur du serveur de se charger de cette opération. Utilisation de la boîte de dialogue Gérer les sites La boîte de dialogue Gérer les sites a pour fonction de vous permettre de créer un nouveau site, de modifier, de dupliquer, de supprimer un site, d'importer ou d'exporter les paramètres d'un site. 1 Sélectionnez Site > Gérer les sites et sélectionnez un site dans la liste de gauche. 2 Cliquez sur le bouton correspondant à l'opération qui vous convient, puis cliquez sur Terminé. Nouveau Pour créer un nouveau site. Modifier Pour modifier un site existant. Dupliquer Pour créer une copie du site sélectionné. Cette copie s'affiche dans la liste des sites. Supprimer Pour supprimer le site sélectionné ; cette opération est irréversible. Exporter Pour exporter les paramètres d'un site sous forme de fichier XML (*.ste). Importer Pour sélectionner un fichier de paramètres d'un site (*.ste) à importer. Voir aussi « Importer et exporter les paramètres d'un site » à la page 48 Configuration et modification d'un dossier racine local Après avoir planifié la structure de votre site, vous configurez (définissez) un site dans Dreamweaver. Vous devez également définir un site afin de pouvoir modifier un site Web qui n'a pas été créé dans Dreamweaver. Un site Dreamweaver vous permet d'organiser tous les documents associés à un site Web. Le dossier racine local représente le répertoire de travail de votre site DW. Il peut se trouver sur un ordinateur local ou sur un serveur de réseau. Si vous souhaitez commencer à modifier des fichiers sur votre ordinateur (sans les publier), configurez uniquement un dossier local, et vous pourrez ajouter les informations distantes et d'évaluation ultérieurement. Vous pouvez utiliser Dreamweaver pour modifier un site Web existant sur votre disque dur local ou pour modifier un site distant (ou une partie d'un site distant), même si vous n'avez pas utilisé Dreamweaver pour créer le site original. Remarque : Vous n'avez pas besoin de définir un dossier distant si votre dossier racine local se trouve sur le système exécutant votre serveur Web. Ce scénario suppose que le serveur Web s'exécute sur votre ordinateur local. 1 Sélectionnez l'une des options suivantes : Pour configurer un nouveau site, sélectionnez Site > Nouveau site. Pour modifier la configuration d'un site existant sur votre disque local ou d'un site distant (ou une partie d'un site distant), qu'il ait été créé ou non dans Dreamweaver, sélectionnez Site > Gérer les sites, puis cliquez sur Modifier. Remarque : Si vous n'avez pas défini de sites Dreamweaver, la boîte de dialogue Définition du site s'affiche et vous n'avez pas besoin de cliquer sur Nouveau. 2 Saisissez les informations de configuration : Pour configurer un site à l'aide de l'assistant de configuration de site, cliquez sur l'onglet Elémentaire et suivez les instructions qui s'affichent. Pour configurer un dossier local, distant et d'évaluation (pour le traitement des pages dynamiques), cliquez sur l'onglet Avancé, sélectionnez la catégorie Infos Locales et définissez les options. 3 Cliquez sur OK et sur Terminé pour créer le site (qui s'affiche dans le panneau Fichiers). Voir aussi « Accès aux sites, à un serveur et aux disques locaux » à la page 80 « Importer et exporter les paramètres d'un site » à la page 48 « Configuration d'une application Web » à la page 476 « Définir le chemin relatif des nouveaux liens » à la page 272 « Gestion des fichiers et des dossiers » à la page 74 Options de configuration du dossier racine local Si vous choisissez de définir les options du dossier racine local directement au lieu de passer par l'onglet Elémentaire de la boîte de dialogue Définition du site, cliquez sur l'onglet Avancé et saisissez les informations. Remarque : Seules les deux premières options sont requises pour configurer un site sur votre ordinateur. Nom du site Le nom qui s'affiche dans le panneau Fichiers et dans la boîte de dialogue Gérer les sites ; il ne s'affiche pas dans le navigateur. Dossier racine local : Le nom du dossier sur votre disque local où vous stockez les fichiers, les modèles et les éléments de bibliothèque de votre site. Créez un dossier sur votre disque dur ou cliquez sur l'icône de dossier pour rechercher un dossier. Lorsque Dreamweaver résout des liens relatifs à la racine, il le fait par rapport à ce dossier. Actualiser automatiquement la liste des fichiers locaux Indique si Dreamweaver doit actualiser automatiquement la liste des fichiers locaux chaque fois que vous copiez des fichiers dans votre site local. La désélection de cette option améliore la vitesse de Dreamweaver lors de la copie de ces fichiers ; cependant, l'affichage local du panneau Fichiers ne s'actualise pas automatiquement et vous devez cliquer sur le bouton Actualiser dans la barre d'outils du panneau Fichiers pour actualiser le panneau manuellement. Dossier des images par défaut Le chemin d'accès du dossier où sont conservées les images que vous utilisez dans votre site. Tapez le chemin d'accès ou cliquez sur l'icône du dossier pour trouver le dossier et le sélectionner. Liens relatifs à Change le chemin d'accès relatif des liens que vous créez vers d'autres pages du site. Par défaut, Dreamweaver crée des liens à l'aide de chemins relatifs au document. Sélectionnez l'option La racine du site pour modifier le paramètre de chemin et veillez à spécifier l'adresse HTTP dans l'option Adresse HTTP. La modification de ce paramètre ne convertit pas le chemin des liens existants ; il s'applique uniquement aux nouveaux liens que vous créez visuellement à l'aide de Dreamweaver. Le contenu lié à un chemin relatif à la racine n'apparaît pas lorsque vous lancez l'aperçu de documents dans un navigateur local, sauf si vous spécifiez un serveur de test ou activez l'option Aperçu à l'aide d'un fichier temporaire dans Edition > Préférences > Aperçu dans le navigateur. En effet, à la différence des serveurs, les navigateurs ne reconnaissent pas les racines de sites. Adresse HTTP L'URL que votre site Web va utiliser pour que Dreamweaver puisse vérifier les liens du site qui utilisent des URL absolues ou des chemins relatifs à la racine du site. Dreamweaver utilise également cette adresse pour vérifier que liens relatifs à la racine du site fonctionnent sur le serveur distant, qui peut avoir une racine de site différente. Par exemple, si vous liez un fichier d'image de votre disque dur dans le dossier C:\Ventes\images\ (où Ventes correspond à votre dossier racine local) et que l'URL de votre site définitif est http://www.monsite.com/VentesApp/ (où VentesApp est votre dossier racine distant), la saisie de l'URL dans la zone de texte Adresse HTTP permettra de vérifier que le chemin conduisant au fichier sur le serveur distant est en réalité /VentesApp/images/. Utiliser vérification des liens sensible à la casse Permet de vérifier que la casse des liens correspond à celle des noms de fichiers lorsque Dreamweaver vérifie les liens. Cette option s'adresse plus particulièrement aux systèmes UNIX où les noms de fichiers tiennent compte des majuscules et des minuscules. Activer le cache Indique s'il faut créer un cache local pour améliorer la vitesse des tâches de gestion des liens et du site. Si vous n'activez pas cette option, Dreamweaver vous demandera si vous souhaitez créer de nouveau un cache avant de créer le site. Il est préférable d'activer cette option, car le panneau Actifs (du groupe Fichiers) est uniquement opérationnel si un cache est créé. Configuration d'un dossier distant Les fichiers destinés à la production, à la collaboration, au déploiement et à un certain nombre d'autres scénarios sont stockés dans ce dossier. En règle générale, votre dossier distant se trouve sur l'ordinateur à partir duquel vous exécutez votre serveur Web. Vous pouvez définir des options pour ce dossier en répondant aux questions de l'assistant dans l'onglet Elémentaire, ou cliquer sur l'onglet Avancé pour saisir les informations directement. Dans le panneau Fichiers de Dreamweaver, le dossier distant représente votre site distant. Lorsque vous configurez un dossier distant, vous devez sélectionner une méthode d'accès qui permettra à Dreamweaver de transférer des fichiers à votre serveur Web et de télécharger des fichiers depuis ce serveur. Vous trouverez un didacticiel consacré à la définition d'un dossier distant à l'adresse www.adobe.com/go/vid0162_fr. Remarque : Dreamweaver prend en charge les connexions aux serveurs compatibles IPv6. Les types de connexion pris en charge sont notamment FTP, SFTP, WebDav et RDS. Pour plus d'informations, voir www.ipv6.org/ 1 Choisissez Site > Gérer les sites. 2 Cliquez sur Nouveau et choisissez Site pour configurer un nouveau site, ou sélectionnez un site Dreamweaver existant et cliquez sur Modifier. 3 Cliquez sur l'onglet Avancé, sélectionnez la catégorie Infos distantes et choisissez la méthode d'accès que vous souhaitez utiliser pour transférer des fichiers entre les dossiers local et distant : Aucun Conservez cette valeur par défaut si vous n'avez pas l'intention de charger votre site sur un serveur. FTP Utilisez ce paramètre si vous vous connectez à votre serveur Web par FTP. Local/Réseau Utilisez cette option si vous accédez à un dossier de réseau, si vous stockez des fichiers ou exécutez votre serveur d'évaluation sur votre ordinateur local. RDS (Remote Development Services) Utilisez cette option si vous vous connectez à votre serveur Web par RDS. Cette méthode d'accès suppose que votre dossier distant se trouve sur un ordinateur exécutant Macromedia® ColdFusion® d'Adobe®. Microsoft Visual SourceSafe Utilisez cette option si vous vous connectez à votre serveur Web en utilisant Microsoft Visual SourceSafe. La prise en charge de cette méthode est uniquement disponible pour Windows ; pour l'utiliser, vous devez avoir installé Microsoft Visual SourceSafe Client version 6. WebDAV (Web-based Distributed Authoring and Versioning) Utilisez cette option si vous vous connectez à votre serveur Web en utilisant le protocole WebDAV. Cette méthode d'accès suppose que vous disposez d'un serveur prenant en charge ce protocole, par exemple Microsoft Internet Information Server (IIS) 5.0 ou une installation du serveur Web Apache configurée de façon adéquate. Remarque : Si vous sélectionnez WebDAV comme méthode d'accès et que vous utilisez Dreamweaver dans un environnement multi-utilisateurs, vous devez également veiller à ce que tous vos utilisateurs sélectionnent WebDAV comme méthode d'accès. Si certains utilisateurs sélectionnent WebDAV, alors que d'autres sélectionnent d'autres méthodes d'accès (par exemple, FTP), la fonction archivage/extraction de Dreamweaver fonctionnera de façon imprévisible étant donné que WebDAV utilise son propre système de verrouillage. Voir aussi « Utilisation de fichiers sans définir de site » à la page 60 « Acquisition de fichiers depuis un serveur distant » à la page 85 « Utilisation de WebDAV pour archiver et extraire des fichiers » à la page 89 « Accès aux sites, à un serveur et aux disques locaux » à la page 80 « Gestion des fichiers et des dossiers » à la page 74 Définition d'options pour l'accès FTP 1 Choisissez Site > Gérer les sites. 2 Cliquez sur Nouveau et choisissez Site pour configurer un nouveau site, ou sélectionnez un site Dreamweaver existant et cliquez sur Modifier. 3 Sélectionnez l'onglet Avancé et cliquez sur la catégorie Infos distantes. 4 Sélectionnez FTP et indiquez le nom de l'hôte FTP vers lequel vous transférerez les fichiers pour votre site Web. Votre hôte FTP est le nom Internet complet d'un système informatique, par exemple, ftp.mindspring.com. Entrez le nom d'hôte complet sans ajouter de texte. Evitez en particulier d'ajouter un nom de protocole devant le nom d'hôte. Remarque : Si vous ne connaissez pas le nom de votre hôte FTP, contactez votre hébergeur de site Web. 5 Entrez le nom du répertoire (dossier) hôte du site distant où sont stockés les documents visibles pour le public. Si vous n'êtes pas sûr du répertoire hôte à saisir, contactez l'administrateur du serveur ou laissez la zone de texte vide. Sur certains serveurs, votre répertoire racine est celui dans lequel la connexion FTP est établie. Pour en être sûr, établissez une connexion avec le serveur. Si vous voyez apparaître dans le volet Affichage distant de votre panneau Fichiers un dossier nommé public_html, www ou ayant votre nom d'utilisateur, il s'agit probablement du nom à indiquer dans la zone Répertoire de l'hôte. 6 Indiquez le nom d'utilisateur et le mot de passe que vous utiliserez pour vous connecter au serveur FTP. 7 Cliquez sur Tester pour tester votre nom d'utilisateur et votre mot de passe. 8 Par défaut, Dreamweaver enregistre votre mot de passe. Désélectionnez l'option Enregistrer si vous préférez que Dreamweaver vous demande le mot de passe à chaque connexion au serveur distant. 9 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. En cas de doute, consultez votre administrateur système. Pour plus d'informations, consultez la TechNote 15220 sur le site Web de Adobe à l'adresse www.adobe.com/go/15220_fr. 10 Sélectionnez l'option Utiliser le type de connexion de données étendu (pour IPv6) si vous utilisez un serveur FTP compatible IPv6. Parallèlement au déploiement de la version 6 d'Internet Protocol (IPv6), les commandes EPRT et EPSV ont remplacé respectivement les commandes FTP PORT et PASV. Par conséquent, si vous tentez de vous connecter à un serveur FTP compatible IPv6, vous devez utiliser les commandes passif étendu (EPSV) et actif étendu (EPRT) pour votre connexion de données. Pour plus d'informations, voir www.ipv6.org/. 11 Sélectionnez l'option Utiliser un pare-feu si vous vous connectez au serveur distant en étant protégé par un pare-feu. 12 Cliquez sur le bouton Paramètres du pare-feu pour modifier l'hôte ou le port de votre pare-feu. 13 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.) 14 Sélectionnez l'option Télécharger autom. les fichiers vers le serveur lors de l'enregistrement si vous voulez que Dreamweaver charge votre fichier sur votre site distant lorsque vous l'enregistrez. 15 Sélectionnez l'option Activer l'archivage et l'extraction de fichier si vous voulez activer le système d'archivage et d'extraction. 16 Cliquez sur OK. 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. Définition d'options pour l'accès de type local ou réseau 1 Choisissez Site > Gérer les sites. 2 Cliquez sur Nouveau et choisissez Site pour configurer un nouveau site, ou sélectionnez un site Dreamweaver existant et cliquez sur Modifier. 3 Sélectionnez l'onglet Avancé, cliquez sur la catégorie Infos distantes et sélectionnez Local/Réseau. 4 Cliquez sur l'icône de dossier à droite de la zone de texte Répertoire distant pour rechercher puis sélectionner le dossier dans lequel vous stockez les fichiers de votre site. 5 Sélectionnez l'option Conserver les informations de synchronisation si vous souhaitez que vos fichiers locaux et distants soient synchronisés automatiquement. (Cette option est sélectionnée par défaut.) 6 Sélectionnez l'option Télécharger autom. les fichiers vers le serveur lors de l'enregistrement si vous voulez que Dreamweaver charge votre fichier sur votre site distant lorsque vous l'enregistrez. 7 Sélectionnez l'option Activer l'archivage et l'extraction de fichier si vous voulez activer le système d'archivage et d'extraction. 8 Cliquez sur OK. Définition d'options pour l'accès WebDAV 1 Choisissez Site > Gérer les sites. 2 Cliquez sur Nouveau et choisissez Site pour configurer un nouveau site, ou sélectionnez un site Dreamweaver existant et cliquez sur Modifier. 3 Sélectionnez l'onglet Avancé, cliquez sur la catégorie Infos distantes et sélectionnez WebDAV. 4 Dans la zone URL, indiquez l'URL complète vers le répertoire du serveur WebDAV auquel vous voulez vous connecter. Cette URL inclut le protocole, le port et le répertoire (s'il ne s'agit pas du répertoire racine). Par exemple, http://webdav.mondomaine.net/monsite. 5 Saisissez votre nom d'utilisateur et votre mot de passe. Ces informations sont relatives à l'identification du serveur et ne sont pas associées à Dreamweaver. Si vous ne connaissez pas votre nom d'utilisateur et votre mot de passe, consultez votre administrateur système ou Web. 6 Cliquez sur Tester pour tester vos paramètres de connexion. 7 Cliquez sur Enregistrer si vous voulez que Dreamweaver mémorise votre mot de passe à chaque nouvelle session. 8 Sélectionnez l'option Conserver les informations de synchronisation si vous souhaitez que Dreamweaver synchronise automatiquement vos fichiers locaux et distants. (Cette option est sélectionnée par défaut.) 9 Sélectionnez l'option Télécharger autom. les fichiers vers le serveur lors de l'enregistrement si vous voulez que Dreamweaver charge votre fichier sur votre site distant lorsque vous l'enregistrez. 10 Sélectionnez l'option Activer l'archivage et l'extraction de fichier si vous voulez activer le système d'archivage et d'extraction. Connexion ou déconnexion d'un dossier distant via un accès réseau - Vous n'avez pas besoin de vous connecter au dossier distant ; vous êtes connecté en permanence. Cliquez sur le bouton Actualiser pour afficher vos fichiers distants. Définition d'options pour l'accès RDS 1 Choisissez Site > Gérer les sites. 2 Cliquez sur Nouveau et choisissez Site pour configurer un nouveau site, ou sélectionnez un site Dreamweaver existant et cliquez sur Modifier. 3 Sélectionnez l'onglet Avancé, cliquez sur la catégorie Infos distantes et sélectionnez RDS. 4 Cliquez sur le bouton Paramètres et entrez les informations suivantes dans la boîte de dialogue Configurer le serveur RDS : - Entrez le nom de l'ordinateur hôte sur lequel votre serveur Web est installé. Il s'agit probablement d'une adresse IP ou d'une URL. En cas de doute, demandez à votre administrateur. Entrez le numéro du port auquel vous vous connectez. Définissez votre dossier racine distant comme répertoire hôte. Par exemple, c:\inetpub\wwwroot\myHostDir. - Saisissez votre nom d'utilisateur RDS et votre mot de passe. Remarque : Ces options seront peut-être invisibles si vous avez configuré votre nom d'utilisateur et votre mot de passe dans les paramètres de sécurité de ColdFusion Administrator. Sélectionnez l'option Enregistrer si vous voulez que Dreamweaver mémorise vos paramètres. 5 Cliquez sur OK pour fermer la boîte de dialogue Configurer le serveur RDS. 6 Sélectionnez l'option Télécharger autom. les fichiers vers le serveur lors de l'enregistrement si vous voulez que Dreamweaver charge votre fichier sur votre site distant lorsque vous l'enregistrez. 7 Sélectionnez l'option Activer l'archivage et l'extraction de fichier si vous voulez activer le système d'archivage et d'extraction et cliquez sur OK. Configuration de l'accès à Microsoft Visual SourceSafe 1 Choisissez Site > Gérer les sites. 2 Cliquez sur Nouveau et choisissez Site pour configurer un nouveau site, ou sélectionnez un site Dreamweaver existant et cliquez sur Modifier. 3 Sélectionnez l'onglet Avancé, cliquez sur la catégorie Infos distantes et sélectionnez Microsoft Visual SourceSafe. 4 Cliquez sur le bouton Paramètres et entrez les informations suivantes dans la boîte de dialogue Ouvrir la base de données Microsoft Visual SourceSafe : - Dans la zone Chemin, cliquez sur Parcourir pour rechercher la base de données VSS souhaitée ou indiquez le chemin complet. Le fichier sélectionné devient le fichier srcsafe.ini qui servira à initialiser Virtual SourceSafe. Dans la zone Projet, indiquez le projet de la base de données VSS à utiliser comme répertoire racine du site distant. Dans les zones Nom d'utilisateur et Mot de passe, indiquez vos nom et mot de passe pour la base de données sélectionnée. Si vous ne les connaissez pas, adressez-vous à votre administrateur système. Sélectionnez l'option Enregistrer si vous voulez que Dreamweaver mémorise vos paramètres. 5 Cliquez sur OK pour revenir dans la boîte de dialogue Définition du site. 6 Sélectionnez l'option Télécharger autom. les fichiers vers le serveur lors de l'enregistrement si vous voulez que Dreamweaver charge votre fichier sur votre site distant lorsque vous l'enregistrez. 7 Désactivez l'option Extraire les fichiers à l'ouverture si ne vous voulez pas que Dreamweaver télécharge automatiquement les fichiers du serveur lorsque vous ouvrez le fichier local. Résolution des problèmes de configuration du dossier distant La liste suivante contient des informations sur les problèmes courants que vous pouvez rencontrer lors de la configuration d'un dossier distant et sur la façon de les résoudre : La mise en oeuvre FTP de Dreamweaver peut ne pas fonctionner correctement avec certains serveurs proxy, pare-feu multiniveaux et autres formes d'accès indirect à un serveur. Si vous avez des problèmes d'accès 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écifié le répertoire hôte avec une seule barre oblique (/), vous aurez peut-être besoin de spécifier un chemin relatif entre le répertoire auquel vous vous connectez et le dossier racine distant. Si, par exemple, le dossier racine distant est un répertoire de niveau supérieur, vous pouvez avoir besoin de spécifier ../../ pour le répertoire hôte. Utilisez des traits de soulignement à la place des espaces, et évitez, dans la mesure du possible, d'utiliser des caractères spéciaux pour les noms de fichiers et de dossiers. L'utilisation de signes de ponctuation (deux points, barres obliques ou points) dans les noms de fichier ou de dossier peut empêcher Dreamweaver de créer une carte du site. En cas de problème avec un nom de fichier long, raccourcissez ce nom. Sous Mac OS, les noms de fichiers ne peuvent pas compter plus de 31 caractères. Notez que certains serveurs utilisent ce qui est appelé, suivant le système d'exploitation, des liens symboliques (Unix), des raccourcis (Windows) ou des alias (Macintosh), pour connecter un dossier situé en un point du disque du serveur à un autre dossier situé ailleurs. Ces alias n'ont généralement pas d'effet négatif sur votre capacité à vous connecter au dossier ou répertoire approprié, mais si vous ne pouvez vous connecter qu'à une partie du serveur, il s'agit peut-être d'un problème d'alias. Si vous découvrez un message d'erreur du type « impossible de placer le fichier », votre dossier distant peut être saturé. Pour plus d'informations, consultez le journal FTP. Remarque : En général, si vous avez un problème durant un transfert via FTP, examinez le journal FTP en choisissant Fenêtre > Résultats (Windows) ou Site > Journal FTP (Macintosh), puis en cliquant sur l'onglet Journal FTP. Configuration d'un serveur d'évaluation Si vous envisagez le développement de pages dynamiques, Dreamweaver doit pouvoir recourir aux services d'un serveur d'évaluation pour générer et afficher du contenu dynamique pendant que vous procédez à la création du site. Ce serveur d'évaluation peut se trouver sur votre ordinateur local, un serveur de développement, un serveur intermédiaire ou un serveur de production. Avant de configurer un dossier pour le serveur d'évaluation, vous devez définir un dossier local et un dossier distant. Dans de nombreux cas, il est possible d'appliquer au serveur d'évaluation les mêmes paramètres que ceux définis pour le dossier distant : en effet, les pages dynamiques stockées dans le dossier distant peuvent normalement être traitées par un serveur d'application. 1 Sélectionnez l'une des options suivantes : Pour configurer un nouveau site, sélectionnez Site > Nouveau site. Pour modifier la configuration d'un site existant sur votre disque local ou d'un site distant (ou une partie d'un site distant), qu'il ait été créé ou non dans Dreamweaver, sélectionnez Site > Gérer les sites, sélectionnez votre site dans la liste, puis cliquez sur Modifier. Remarque : Si vous n'avez pas défini de sites Dreamweaver, la boîte de dialogue Définition du site s'affiche et vous n'avez pas besoin de cliquer sur Nouveau. 2 Sélectionnez Serveur d'évaluation dans l'onglet Avancé de la boîte de dialogue Définition du site. 3 Sélectionnez la technologie de serveur à utiliser pour votre application Web. 4 Acceptez les paramètres par défaut de la catégorie Serveur d'évaluation, ou bien tapez d'autres paramètres. Par défaut, Dreamweaver considère qu'un serveur d'application réside sur le système exécutant le serveur Web. Si vous avez défini un dossier distant dans la catégorie Infos distantes de la boîte de dialogue Définition du site et qu'un serveur d'application réside sur le système qui comprend le dossier distant (par exemple, votre ordinateur local), acceptez les paramètres par défaut de la catégorie Serveur d'évaluation. Si vous n'avez pas défini de dossier distant dans la catégorie Infos distantes, la catégorie Serveur d'évaluation adopte par défaut le dossier local défini dans la catégorie Infos locales. Il n'est pas nécessaire de définir ce paramètre si les deux conditions suivantes sont remplies : Votre serveur Web et votre serveur d'application résident tous deux sur votre ordinateur local. Par exemple, si vous développez des applications ColdFusion faisant tourner IIS et ColdFusion sur votre système Windows XP local. Votre dossier racine local est un sous-dossier du répertoire de base de votre site Web. Par exemple, si vous utilisez IIS, votre dossier racine local est un sous-dossier du dossier c:\Inetpub\wwwroot\, ou ce dossier lui-même. Si votre dossier racine local n'est pas un sous-dossier de votre répertoire de base, vous devez définir le dossier racine local comme répertoire virtuel dans votre serveur Web. Remarque : Le serveur d'application peut résider sur un autre système que celui où réside votre site distant. Par exemple, si vous avez choisi Microsoft Visual SourceSafe comme option d'accès dans la catégorie Infos distantes, vous devez spécifier un serveur différent dans la catégorie Serveur d'évaluation. 5 Dans la zone Préfixe d'URL, tapez l'URL que les utilisateurs saisissent dans leur navigateur pour ouvrir votre application Web, sans spécifier de nom de fichier. Le préfixe d'URL est constitué du nom de domaine et du nom d'un sous-répertoire ou d'un répertoire virtuel du répertoire de base de votre site Web, mais pas d'un nom de fichier. Supposons, par exemple, que votre application possède l'URL suivante : www.adobe.com/mycoolapp/start.jsp. Dans ce cas, entrez le préfixe d'URL suivant : www.adobe.com/mycoolapp/. Si Dreamweaver fonctionne sur le même système que votre serveur Web, vous pouvez utiliser l'une des options localhost pour représenter votre nom de domaine. Supposons, par exemple, si vous exécutez IIS et si votre application possède l'URL suivante : http://buttercup_pc/mycoolapp/start.jsp. Dans ce cas, entrez le préfixe d'URL suivant : http://localhost/mycoolapp/ Vous trouverez dans la section suivante la liste des options localhost relatives à différents serveurs Web. 6 Cliquez sur OK, puis sur Terminé pour ajouter le nouveau site à votre liste de sites. Voir aussi « Choix d'un serveur d'application » à la page 476 « Préparation à la création de sites dynamiques » à la page 466 A propos du préfixe d'URL pour le serveur d'évaluation Vous devez spécifier un préfixe d'URL afin que Dreamweaver puisse faire appel aux services d'un serveur d'évaluation pour afficher les données et se connecter aux bases de données pendant que vous procédez à la création du site, Dreamweaver utilise la connexion au moment de la conception afin de vous transmettre des informations utiles sur la base de données, telles que le nom des tableaux qu'elle contient et le nom des colonnes de ces tableaux. Le préfixe d'URL est constitué du nom de domaine et du nom d'un sous-répertoire ou d'un répertoire virtuel du répertoire de base de votre site Web. Remarque : Bien que cette terminologie, utilisée dans Microsoft IIS, puisse différer d'un serveur à l'autre, les mêmes concepts s'appliquent à la plupart des serveurs Web. Le répertoire de base Dossier qui, sur le serveur, est mappé sur le nom de domaine de votre site. Supposons que le dossier que vous souhaitez utiliser pour traiter des pages dynamiques est c:\sites\company\, et que ce dossier est votre répertoire de base (c'est-à-dire que ce dossier est mappé sur le nom de domaine de votre site, par exemple www.mystartup.com). Dans ce cas, le préfixe d'URL est http://www.mystartup.com/. Si le dossier que vous souhaitez utiliser pour le traitement des pages dynamiques est un sous-dossier du répertoire de base, ajoutez ce sous-dossier à l'URL. Supposons que votre répertoire de base est c:\sites\company\, que le nom de domaine de votre site est www.mystartup.com et que le dossier à utiliser pour traiter les pages dynamiques est c:\sites\company\inventory. Entrez le préfixe d'URL suivant : http://www.mystartup.com/inventory/ Si le dossier à utiliser pour traiter les pages dynamiques n'est pas votre répertoire de base ni l'un de ses sous-répertoires, vous devez créer un répertoire virtuel. Un répertoire virtuel Dossier qui ne se trouve pas physiquement dans le répertoire de base du serveur, même s'il apparaît dans l'URL. Pour créer un répertoire virtuel, spécifiez un alias représentant le chemin du dossier dans l'URL. Supposons que votre répertoire de base soit c:\sites\company et votre dossier de traitement d:\apps\inventory, et que vous ayez défini pour ce dossier l'alias warehouse. Entrez le préfixe d'URL suivant : http://www.mystartup.com/warehouse/ Localhost Terme qui peut être utilisé pour désigner le répertoire de base dans vos URL lorsque le client (généralement un navigateur, mais dans ce cas Dreamweaver) réside sur le même système que votre serveur Web. Supposons que Dreamweaver réside sur le même système Windows que le serveur Web, que votre répertoire de base soit c:\sites\company et que vous ayez défini un répertoire virtuel nommé warehouse désignant le dossier chargé du traitement des pages dynamiques. Le tableau ci-dessous répertorie les préfixes d'URL à indiquer pour les différents serveurs Web : Serveur Web Préfixe de l'URL ColdFusion MX 7 http://localhost:8500/warehouse/ IIS http://localhost/warehouse/ Apache (Windows) http://localhost:80/warehouse/ Jakarta Tomcat (Windows) http://localhost:8080/warehouse/ Remarque : Par défaut, le serveur Web ColdFusion MX 7 s'exécute sur le port 8500, le serveur Web Apache sur le port 80 et le serveur Web Jakarta Tomcat sur le port 8080. Le répertoire de base des utilisateurs exécutant le serveur Web Apache sur Macintosh est le suivant : Users:MonNomd'Utilisateur:Sites (MonNomd'Utilisateur correspond à votre nom d'utilisateur Macintosh). L'installation de Mac OS 10.1 ou version supérieure entraîne la définition automatique d'un alias intitulé \~MonNomd'Utilisateur. Dès lors, le préfixe d'URL 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, le préfixe d'URL est le suivant : http://localhost/\~MonNomd'Utilisateur/inventory/ Modification d'un site Web distant existant dans Dreamweaver Vous pouvez utiliser Dreamweaver pour copier un site distant existant (ou une partie d'un site distant) sur votre disque dur local, et le modifier localement, même si vous n'avez pas utilisé Dreamweaver pour créer le site original. 1 Créez un dossier local contenant le site existant, puis définissez-le en tant que dossier local du site. Remarque : Vous devez copier localement la structure complète de la branche concernée du site distant existant. 2 Configurez un dossier distant en utilisant les informations d'accès à distance de votre site existant. Vous devez vous connecter au site existant pour télécharger les fichiers sur votre ordinateur avant de pouvoir les modifier. Veillez à choisir le dossier racine correct pour le site distant. 3 Dans le panneau Fichiers (Fenêtre > Fichiers), cliquez sur le bouton Connecter à un hôte distant (pour un accès FTP) ou sur Actualiser (pour un accès réseau) dans la barre d'outils pour afficher le site distant. 4 Modifiez le site : - Si vous souhaitez travailler sur l'ensemble du site, sélectionnez, dans le panneau Fichiers, le dossier racine du site distant, puis cliquez sur Acquérir dans la barre d'outils pour télécharger l'ensemble du site sur votre disque local. - Si vous désirez travailler sur un seul des fichiers ou dossiers du site, sélectionnez ce fichier ou dossier dans le volet Affichage distant du panneau Fichiers et cliquez sur Acquérir dans la barre d'outils pour télécharger ce fichier sur votre disque dur local. Dreamweaver duplique automatiquement toute la partie de la structure du site distant nécessaire pour replacer le fichier téléchargé au niveau adéquat dans la hiérarchie du site. Si vous ne modifiez qu'une partie d'un site, il est en général conseillé de charger également les fichiers dépendants, tels que les fichiers d'image. Suppression d'un site Dreamweaver de votre liste de sites La suppression d'un Dreamweaver et de toutes ses informations de configuration de votre liste de site n'entraîne pas la suppression des fichiers du site de votre ordinateur. 1 Choisissez Site > Gérer les sites. 2 Sélectionnez le nom du site. 3 Cliquez sur Supprimer, puis sur Oui pour supprimer le site de la liste ou sur Non pour conserver le site, puis cliquez sur Terminé. Importer et exporter les paramètres d'un site Vous pouvez exporter les paramètres de votre site en tant que fichier XML que vous pourrez importer dans Dreamweaver ultérieurement. Cela vous permet de déplacer des sites entre plusieurs ordinateurs et versions de produit ainsi que de partager les paramètres avec d'autres utilisateurs. Exportez les paramètres de votre site régulièrement de façon à disposer d'une copie de sauvegarde au cas où un incident surviendrait sur ce site. Exportation de vos sites 1 Sélectionnez Site > Gérer les sites. 2 Sélectionnez un ou plusieurs sites dont vous souhaitez exporter les paramètres, puis cliquez sur Exporter : - Pour sélectionner plusieurs sites, appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant avec la souris sur chaque site. Pour sélectionner une série de sites, cliquez en maintenant la touche Maj enfoncée sur le premier et le dernier site de la série. 3 Pour chaque site dont les paramètres doivent être exportés, recherchez un emplacement où vous souhaitez enregistrer le site et cliquez sur Enregistrer. (Dreamweaver enregistre les paramètres de chaque site en tant que fichier XML avec une extension de fichier .ste.) 4 Pour sauvegarder les paramètres de votre site, sélectionnez la première option et cliquez sur OK. Dreamweaver enregistre les informations de connexion au serveur distant (nom d'utilisateur et mot de passe, par exemple), ainsi que les informations de chemin local. 5 Si vous souhaitez partager vos paramètres avec d'autres utilisateurs, choisissez la seconde option et cliquez sur OK. (Dreamweaver n'enregistre pas les informations qui ne sont pas valables pour d'autres utilisateurs (vos informations de connexion au serveur distant et de chemins locaux, par exemple). 6 Cliquez sur Terminé. Remarque : Enregistrez le fichier *.ste dans le dossier racine de votre site ou sur votre bureau pour faciliter sa recherche. Si vous ne vous souvenez pas de l'endroit où il se trouve, effectuez sur votre ordinateur une recherche portant sur les fichiers dotés de l'extension *.ste. Importation de sites 1 Sélectionnez Site > Gérer les sites. 2 Cliquez sur Importer. 3 Recherchez et sélectionnez un ou plusieurs sites (définis dans des fichiers ayant une extension .ste) dont vous souhaitez importer les paramètres. Pour sélectionner plusieurs sites, appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant avec la souris sur chaque fichier .ste. Pour sélectionner une série de sites, cliquez en maintenant la touche Maj enfoncée sur le premier et le dernier fichier de la série. 4 Cliquez sur Ouvrir, puis sur Terminé. Une fois que Dreamweaver a importé les sites, leurs noms apparaissent dans la boîte de dialogue Gérer les sites. Utilisation d'une carte d'arborescence de votre site Utilisation des cartes de site Vous pouvez afficher un fichier local pour un site Dreamweaver sous la forme d'une carte d'arborescence contenant des icônes liées et que l'on appelle carte de site. Utilisez cette carte pour ajouter de nouveaux fichiers à un site Dreamweaver ou pour ajouter, modifier ou supprimer des liens. La carte du site présente la structure du site sur deux niveaux en partant de la page d'accueil. Les pages sont présentées sous la forme d'icônes et les liens sont affichés dans l'ordre où ils apparaissent dans le code source. Vous devez définir la page d'accueil du site avant de pouvoir en afficher la carte. La page d'accueil du site est le point de départ de la carte ; il peut s'agir de n'importe quelle page de votre site. Vous pouvez changer de page d'accueil, indiquer le nombre de colonnes à afficher, préciser si les étiquettes des icônes doivent afficher le nom du fichier ou le titre de la page et indiquer si les fichiers dépendants et masqués doivent être affichés. (Un fichier dépendant est une image ou tout autre élément de contenu non HTML que le navigateur charge en même temps que la page principale.) Lorsque vous travaillez dans la carte d'un site, vous pouvez sélectionner des pages, ouvrir une page pour la modifier, ajouter des pages au site, créer des liens entre les fichiers et modifier le titre des pages. La carte du site est idéale pour agencer la structure d'un site. Vous pouvez définir rapidement la structure d'ensemble du site, puis créer une image graphique de la carte du site. Remarque : L'option de carte du site n'est disponible que pour les sites locaux. Pour créer la carte d'un site distant, copiez le contenu de ce site dans un dossier de votre disque local, puis utilisez la commande Gérer les sites pour définir le site en tant que site local. Voir aussi « Créer un lien vers des documents à l'aide de la carte du site » à la page 271 « Configuration et modification d'un dossier racine local » à la page 40 Définition ou modification de la page d'accueil d'un site 1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez un site dans le menu contextuel (dans lequel le site, le serveur ou le disque dur s'affiche). 2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur le fichier de votre choix, puis cliquez sur Définir comme page d'accueil pour définir ce fichier comme page d'accueil. Remarque : Vous pouvez également définir la page d'accueil dans les options Mise en forme de la carte du site dans la boîte de dialogue Définition du site. 3 Pour modifier la page d'accueil, répétez l'étape 2. Affichage d'une carte de site 1 Dans le panneau Fichiers (Fenêtre > Fichiers), effectuez l'une des opérations suivantes : - Dans le panneau Fichiers affiché sous sa forme réduite, sélectionnez Affichage de la carte dans le menu Vue du site. Fichiers Acifs MySite Site - MySite (C:\Document i Affichage local Affichage local Affichage distant Serveur d'évaluation Affichage de la carte - Dans le panneau Fichiers affiché sous sa forme développée, cliquez sur le bouton Carte du site dans la barre d'outils, puis sélectionnez Carte seulement (la carte du site sans la structure des fichiers locaux) ou Carte et fichiers (la carte du site avec cette structure). Remarque : Si aucune page d'accueil n'a été définie ou si Dreamweaver ne trouve pas de page intitulée index.html ou index.htm dans le site actuel (qu'il utilise alors comme page d'accueil), Dreamweaver vous invite à sélectionner une page d'accueil. 2 Cliquez sur les signes plus (+) et moins (−) en regard d'un nom de fichier pour afficher ou masquer les pages liées sous le second niveau : • Le texte affiché en rouge indique un lien brisé. - Le texte affiché en bleu et marqué d'une icône en forme de globe indique un fichier sur un autre site ou un lien spécial (comme un lien de courriel ou de script). - Une coche de couleur verte indique un fichier extrait par vous. - Une coche de couleur rouge indique un fichier extrait par quelqu'un d'autre. - Un cadenas indique qu'un fichier est en lecture seule (Windows) ou verrouillé (Macintosh). Modification de la mise en forme de la carte du site Utilisez les options de mise en forme de la carte du site pour personnaliser son aspect. 1 Ouvrez la boîte de dialogue Définition du site en procédant de l'une des manières suivantes : Choisissez Site > Gérer les sites, choisissez le site, puis cliquez sur Modifier. Dans le panneau Fichiers, sélectionnez Gérer les sites dans le menu où est affiché le site, serveur ou disque dur, puis cliquez sur Modifier. 2 Dans la boîte de dialogue Définition du site, sélectionnez la catégorie Mise en forme de la carte du site dans la liste de gauche et définissez les options : Nombre de colonnes Définit le nombre de pages à afficher par ligne dans la carte du site. Largeur de la colonne Définit la largeur, en pixels, des colonnes de la carte du site. Etiquettes des icônes Indiquez si le nom affiché sur les icônes de document dans la carte du site doit être représenté en tant que nom de fichier ou titre de page. Affichage des fichiers identifiés comme masqués Affiche les fichiers HTML que vous avez marqués comme étant masqués dans la carte du site. Afficher les fichiers dépendants Affiche les fichiers dépendants dans la hiérarchie du site. 3 Cliquez sur OK, puis sur Terminé. Affichage de branches différentes dans la carte du site Vous pouvez afficher les détails d'une section spécifique d'un site en faisant d'une branche le centre de la carte du site. 1 Sélectionnez la page à afficher. 2 Effectuez l'une des opérations suivantes : Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) dans la carte du site, puis sélectionnez Afficher comme racine. Dans le panneau Fichiers (Fenêtre > Fichiers) par défaut, cliquez sur le menu Options dans le coin supérieur droit, puis sélectionnez Affichage > Options d'affichage de la carte > Afficher comme racine. La carte du site est retracée dans la fenêtre comme si la page spécifiée était à la racine du site. La zone Navigation dans le site, au-dessus de la carte du site, affiche le chemin de la page spécifiée par rapport à la page d'accueil. Sélectionnez un élément du chemin pour afficher la carte du site à partir de ce niveau en cliquant dessus. 3 Pour développer et réduire des branches dans la carte du site, cliquez sur le bouton Plus (+) ou Minus (−) d'une branche. Sélection de plusieurs pages dans la carte du site. • Effectuez l'une des opérations suivantes : - En partant d'une partie vierge de l'affichage, faites glisser le curseur autour d'un groupe de fichiers pour les sélectionner. - Cliquez en maintenant la touche Ctrl (Windows) ou Commande (Macintosh) enfoncée pour sélectionner des pages non consécutives. - Cliquez en maintenant la touche Maj enfoncée pour sélectionner une série de pages consécutives. Ouverture d'une page dans la carte du site pour la modifier Double-cliquez sur le fichier ou cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur l'icône du fichier, puis choisissez Ouvrir. Ajout d'un fichier existant au site Faites glisser le fichier depuis l'Explorateur Windows ou le Finder Macintosh vers un fichier de la carte du site, ou cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur le fichier de la carte du site, sélectionnez Lier au fichier existant, puis recherchez le fichier. Création d'un fichier et ajout d'un lien dans la carte du site 1 Sélectionnez un fichier dans la carte du site ou cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis sélectionnez Lier au nouveau fichier. 2 Saisissez le nom, le titre et le texte du lien, puis cliquez sur OK. Dreamweaver enregistre le fichier dans le même dossier que le fichier sélectionné. Si vous ajoutez un fichier à une branche masquée, ce fichier est également masqué. Modification du titre d'une page de la carte du site 1 Affichez les titres des pages en cliquant sur le menu Options situé dans l'angle supérieur droit du panneau Fichiers réduit, puis en sélectionnant Fichier > Renommer Affichage > Afficher les titres des pages. 2 Sélectionnez un fichier dans la carte du site, puis procédez de l'une des manières suivantes : Cliquez sur le titre et saisissez un nouveau titre. Cliquez sur le menu Options situé dans l'angle supérieur droit, puis sélectionnez Fichier > Renommer. 3 Saisissez le nouveau nom, puis appuyez sur Entrée (Windows) ou sur Retour (Macintosh). Remarque : Lorsque vous travaillez dans le panneau Fichiers, Dreamweaver met à jour tous les liens vers les fichiers renommés. Mise à jour de l'affichage de la carte du site après l'apport de modifications ❖ Cliquez n'importe où dans la carte du site pour désélectionner tous les fichiers et cliquez sur Actualiser dans la barre d'outils du panneau Fichiers. Affichage ou masquage des fichiers de la carte du site Vous pouvez modifier la présentation de la carte du site de façon à afficher ou masquer les fichiers masqués et dépendants. Ceci est utile pour mettre l'accent sur des rubriques ou des éléments de contenu importants et ne pas présenter des éléments de moindre intérêt. Pour masquer un fichier en utilisant la carte du site, vous devez d'abord le marquer comme étant masqué. Lorsque vous masquez un fichier, ses liens le sont également. Lorsque vous affichez un fichier masqué, son icône et ses liens sont visibles dans l'affichage de la carte du site, mais les noms s'affichent en italique. Remarque : Par défaut, les fichiers dépendants sont déjà masqués. Marquage des fichiers comme étant masqués dans la carte du site 1 Dans la fenêtre de document, sélectionnez un ou plusieurs fichiers. 2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis sélectionnez Afficher/masquer le lien. Désactivation du marquage des fichiers comme étant masqués dans la carte du site Dans la carte du site, sélectionnez un ou plusieurs fichiers en procédant comme suit : - Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) dans la carte du site, puis sélectionnez Afficher/masquer le lien. Dans le panneau Fichiers (Fenêtre > Fichiers) affiché sous sa forme réduite, cliquez sur le menu Options dans le coin supérieur droit, puis sélectionnez Affichage > Options de la carte du site > Afficher les fichiers identifiés comme masqués. Dans le panneau Fichiers (Fenêtre > Fichiers) affiché sous sa forme réduite, cliquez sur le menu Options dans le coin supérieur droit, puis sélectionnez Affichage > Options de la carte du site > Afficher/Masquer le lien. Affichage ou masquage des fichiers masqués dans la carte du site Dans le panneau Fichiers (Fenêtre > Fichiers) affiché sous sa forme réduite, cliquez sur le menu Options dans le coin supérieur droit, puis sélectionnez Affichage > Options de la carte du site > Afficher les fichiers identifiés comme masqués. Affichage des fichiers dépendants dans la carte du site 1 Dans le panneau Fichiers (Fenêtre > Fichiers) affiché sous sa forme réduite (par défaut), cliquez sur le menu Options dans le coin supérieur droit. 2 Choisissez Affichage > Options de la carte du site > Afficher les fichiers dépendants. Enregistrement de la carte du site en tant qu'image Vous pouvez enregistrer la carte du site en tant qu'image, puis afficher cette image ou l'imprimer à partir d'un éditeur d'image. 1 Dans le panneau Fichiers (Fenêtre > Fichiers) affiché sous sa forme réduite (par défaut), cliquez sur le menu Options dans le coin supérieur droit, puis sélectionnez Fichier > Enregistrer la carte du site. 2 Saisissez un nom de fichier dans la zone Nom de fichier. 3 Dans le menu Types de fichiers, choisissez .bmp ou .png. 4 Sélectionnez l'emplacement où enregistrer le fichier, puis saisissez le nom de l'image et cliquez sur Enregistrer. Définition des préférences de mise en forme de la carte du site Vous pouvez personnaliser l'aspect de la carte de votre site. 1 Choisissez Site > Gérer les sites et cliquez sur Modifier. 2 Dans l'onglet Avancé, sélectionnez la catégorie Mise en forme de la carte du site. 3 Dans la zone Page d'accueil, saisissez le chemin d'accès au fichier de la page d'accueil du site ou cliquez sur l'icône de dossier pour rechercher le fichier. La page d'accueil doit se trouver sur le site local. Si vous ne définissez aucune page d'accueil ou que Dreamweaver ne trouve pas de fichier index.html ou index.htm dans la racine, Dreamweaver vous invite à sélectionner une page d'accueil à l'ouverture de la carte du site. 4 Choisissez parmi les options de colonnes suivantes : Dans la zone Nombre de colonnes, tapez une valeur pour définir le nombre de pages affichées par ligne dans la carte du site. Dans la zone Largeur de colonne, tapez un chiffre pour indiquer la largeur en pixels des colonnes de la carte du site. 5 Dans la zone Etiquettes des icônes, indiquez si le nom affiché sur les icônes de document dans la carte du site doit être représenté en tant que nom de fichier ou titre de page. 6 Dans la zone Options, indiquez les fichiers à afficher dans la carte du site : - Activez l'option Afficher les fichiers identifiés comme masqués pour afficher les fichiers HTML que vous avez marqués comme étant masqués dans la carte du site. Si une page est masquée, son nom et ses liens apparaissent en italique. - Sélectionnez l'option Afficher les fichiers dépendants pour afficher tous les fichiers dépendants dans la hiérarchie du site. Un fichier dépendant est une image ou tout autre élément de contenu non HTML que le navigateur charge en même temps que la page principale. Voir aussi « Utilisation d'une carte d'arborescence de votre site » à la page 49 Gestion des sites Contribute avec Dreamweaver Gestion de sites Contribute Adobe® Contribute® CS3 regroupe les fonctions d'un navigateur Web et d'un éditeur de pages Web. Il permet à vos collègues ou clients de naviguer jusqu'à une page d'un site que vous avez créé et de modifier ou de mettre à jour cette page s'ils possèdent les droits d'accès adéquats. Les utilisateurs de Contribute peuvent ajouter et mettre à jour du contenu Web de base, y compris du texte mis en forme, des images, des tableaux et des liens. Les administrateurs de sites Contribute peuvent limiter les actions que les utilisateurs ordinaires (non administrateurs) peuvent effectuer dans un site. Remarque : Cette section s'adresse aux administrateurs de Contribute. En tant qu'administrateur du site, vous donnez la possibilité aux personnes qui ne sont pas administrateurs de modifier des pages en créant et en leur envoyant une clé de connexion (pour plus d'informations sur la façon de procéder, consultez l'aide de Contribute). Vous pouvez également configurer une connexion à un site Contribute à l'aide de Dreamweaver qui vous permet, à vous ou à votre concepteur de site, de vous connecter au site Contribute et d'utiliser toutes les fonctions de modification disponibles dans Dreamweaver. Contribute ajoute des fonctionnalités à votre site Web avec Contribute Publishing Server (CPS), une suite d'applications de publication et d'outils de gestion utilisateur qui vous permet d'intégrer Contribute au service d'annuaire utilisateur de votre organisation (Lightweight Directory Access Protocol (LDAP) ou Active Directory, par exemple). Lorsque vous activez votre site Dreamweaver en tant que site Contribute, Dreamweaver lit les paramètres d'administration de Contribute chaque fois que vous vous connectez au site distant. Si Dreamweaver détecte que CPS est actif, il hérite de certaines fonctionnalités des services CPS (restauration des fichiers et consignation des événements, par exemple). Vous pouvez utiliser Dreamweaver pour vous connecter à un site Contribute et modifier un fichier de ce site. La plupart des options Dreamweaver fonctionnent avec un site Contribute de la même façon qu'avec tout autre site. Toutefois, lorsque vous utilisez Dreamweaver avec un site Contribute, Dreamweaver effectue automatiquement certaines opérations de gestion de fichiers, telles que l'enregistrement de différentes versions d'un document et la consignation de certains événements dans la console CPS. Pour plus d'informations, consultez l'aide de Contribute. Structure du site et conception de pages pour un site Contribute Pour permettre aux utilisateurs de Contribute de modifier votre site Web, tenez compte des considérations suivantes lors de sa structuration : Utilisez une structure de site simple. Evitez de créer de nombreux niveaux de dossiers. Regroupez les éléments associés dans un même dossier. Définissez des droits en lecture et en écriture appropriés pour les dossiers sur le serveur. Ajoutez des pages d'index aux dossiers à mesure que vous les créez pour inciter les utilisateurs de Contribute à placer les nouvelles pages dans les dossiers appropriés. Par exemple, si les utilisateurs de Contribute fournissent des pages contenant des comptes rendus de réunions, vous pouvez créer un dossier dans le dossier racine du site appelé comptes_rendus et y insérer une page d'index. Vous devez ensuite créer un lien qui renvoie à la page d'index des comptes rendus sur la page principale du site. Un utilisateur de Contribute peut alors atteindre la page d'index et créer une page de procès-verbal pour une réunion donnée, désignée par un lien depuis cette page. Dans chaque page d'index du dossier, fournissez une liste de liens vers chaque page et document contenus dans ce dossier. Utilisez des conceptions de pages simples en évitant des mises en forme fantaisistes. Utilisez CSS plutôt que des balises HTML et attribuez un nom descriptif à vos styles CSS. Si les utilisateurs de Contribute utilisent un jeu de styles standard dans Microsoft Word, attribuez à vos styles CSS les mêmes noms que ceux des styles Word correspondants, afin que Contribute puisse faire correspondre les styles lorsqu'un utilisateur copie des données d'un document Word et les colle dans une page Contribute. Pour empêcher les utilisateurs de Contribute d'utiliser un style CSS, modifiez le nom du style de sorte qu'il commence par mmhide_. Par exemple, si vous utilisez un style nommé Justification_droite dans une page mais que vous ne souhaitez pas que les utilisateurs de Contribute puissent utiliser ce style, renommez-le de la façon suivante : mmhide_Justification_droite. Remarque : Vous devez ajouter mmhide_ au nom du style en mode Code et non dans le panneau CSS. Dans un souci de simplicité, utilisez aussi peu de styles CSS que possible. Si vous utilisez des inclusions côté serveur pour des éléments de pages HTML, par exemple des en-tête ou des pieds de page, créez une page HTML non liée contenant les liens vers les fichiers d'inclusion. Les utilisateurs de Contribute peuvent ensuite marquer cette page et l'utiliser pour rechercher les fichiers d'inclusion et les modifier. Voir aussi « Création d'un modèle Dreamweaver » à la page 378 « Création et gestion CSS » à la page 121 « Utilisation des inclusions côté serveur » à la page 326 Transfert de fichiers depuis et vers un site Contribute Contribute utilise un système similaire au système d'archivage et d'extraction de Dreamweaver afin qu'un seul utilisateur à la fois puisse modifier une page Web donnée. Lorsque vous activez la compatibilité avec Contribute dans Dreamweaver, le système d'archivage et d'extraction de Dreamweaver est automatiquement activé. Pour transférer des fichiers depuis et vers un site Contribute à l'aide de Dreamweaver, utilisez toujours les commandes Archiver et Extraire. Si vous utilisez les commandes Placer et Acquérir pour transférer les fichiers, vous risquez d'écraser les dernières modifications apportées à un fichier par un utilisateur de Contribute. Lorsque vous archivez un fichier dans un site Contribute, Dreamweaver effectue automatiquement une copie de sauvegarde de la version précédemment archivée du fichier dans le dossier _baks et ajoute votre nom d'utilisateur et la date à un fichier Design Notes. Voir aussi « Archivage et extraction de fichiers » à la page 88 Autorisations des fichiers et des dossiers Contribute sur le serveur Contribute offre un moyen de gérer les autorisations de fichiers et de dossiers pour chaque rôle d'utilisateur que vous aurez défini ; toutefois, Contribute ne permet pas de gérer les autorisations de lecture et d'écriture de base affectées aux fichiers et aux dossiers par le serveur. Dans Dreamweaver, vous pouvez gérer ces autorisations directement sur le serveur. Si un utilisateur de Contribute ne dispose pas de droit d'accès en lecture sur le serveur pour un fichier dépendant, tel qu'une image affichée dans une page, le contenu de ce fichier ne s'affiche pas dans la fenêtre Contribute. Par exemple, si un utilisateur ne dispose pas de droit d'accès en lecture à un dossier d'images, les images contenues dans ce dossier s'affichent sous la forme d'icônes d'image déchirée dans Contribute. De même, les modèles Dreamweaver sont stockés dans un sous-dossier du dossier racine du site. Ainsi, si un utilisateur de Contribute ne dispose pas d'accès en lecture au dossier racine, il ne peut pas utiliser les modèles de ce site, sauf si vous copiez les modèles dans un dossier accessible. Lorsque vous définissez un site Dreamweaver, vous devez accorder aux utilisateurs des droits d'accès en lecture au dossier /_mm sur le serveur (sous-dossier _mm du dossier racine), ainsi qu'au dossier /Templates et à tous les dossiers contenant des ressources dont ils auront besoin. Si pour une raison quelconque, vous ne pouvez pas accorder de droits d'accès en lecture au dossier /Templates, vous pouvez tout de même rendre les modèles accessibles aux utilisateurs Contribute sans qu'ils aient à accéder au dossier racine. Pour plus d'informations sur les autorisations Contribute, voir Administration de Contribute dans l'aide de Contribute. Fichiers spéciaux Contribute Contribute utilise divers fichiers spéciaux qui ne sont pas destinés à être consultés par les visiteurs du site : le fichier de paramètres partagés, avec une extension CSI, qui s'affiche dans un dossier nommé _mm dans le dossier racine du site et contient des informations utilisées par Contribute pour la gestion du site ; des versions précédentes de fichiers, dans des dossiers nommés _baks ; des versions temporaires de pages, afin que les utilisateurs puissent afficher un aperçu des modifications ; des fichiers de verrouillage temporaires, indiquant qu'une page spécifique est en cours de modification ou affichée en aperçu ; des fichiers Design Notes contenant des métadonnées relatives aux pages du site. En général, vous ne devez pas modifier ces fichiers spéciaux dans Dreamweaver ; Dreamweaver les gère automatiquement. Si vous ne souhaitez pas que ces fichiers spéciaux Contribute apparaissent sur votre serveur publiquement accessible, vous pouvez définir un serveur intermédiaire sur lequel les utilisateurs de Contribute pourront travailler sur les pages. Vous pouvez ensuite régulièrement copier ces pages Web du serveur intermédiaire au serveur de production qui se trouve sur le Web. Si vous utilisez un serveur intermédiaire, copiez uniquement les pages Web sur le serveur de production. Ne copiez aucun des fichiers spéciaux Contribute mentionnés ci-dessus. En particulier, ne copiez pas les dossiers _mm et _baks sur le serveur de production. Remarque : Pour plus d'informations sur la configuration d'un serveur afin d'éviter que les visiteurs ne voient les fichiers des dossiers commençant par un souligné, consultez le chapitre traitant de la sécurité des sites Web dans l'aide de Contribute. Parfois, vous devrez supprimer manuellement d'autres fichiers spéciaux Contribute. Par exemple, si Contribute n'arrive pas à supprimer des pages temporaires d'aperçu, une fois l'aperçu fermé par l'utilisateur, vous devez supprimer ces pages temporaires manuellement. Le nom de fichier des pages temporaires d'aperçu commence par TMP. De même, un fichier de verrouillage obsolète peut accidentellement rester sur le serveur. Dans ce cas, vous devez le supprimer manuellement pour que les autres utilisateurs puissent modifier la page. Préparation d'un site à utiliser avec Contribute Si vous préparez un site Dreamweaver existant pour les utilisateurs de Contribute, vous devez activer la compatibilité avec Contribute de façon explicite afin d'utiliser les fonctions relatives à Contribute ; Dreamweaver n'affiche pas de message vous invitant à le faire ; toutefois, lorsque vous vous connectez à un site qui a été configuré en tant que site Contribute (avec un administrateur), Dreamweaver vous invite à activer la compatibilité avec Contribute. Remarque : Vous devez avoir installé Contribute sur le même ordinateur que Dreamweaver et vous devez être connecté au site distant avant d'activer la compatibilité avec Contribute. Autrement, Dreamweaver ne peut pas lire les paramètres d'administration de Contribute pour déterminer si les services CPS et l'option de restauration sont activés. Tous les types de connexion ne prennent pas en charge la compatibilité avec Contribute. Les restrictions suivantes s'appliquent aux types de connexion : Si vous vous connectez à votre site distant à l'aide de WebDAV ou de Microsoft Visual SourceSafe, vous ne pouvez pas activer la compatibilité avec Contribute, car ces systèmes de commande source ne sont pas compatibles avec les systèmes Design Notes et les systèmes d'archivage et d'extraction que Dreamweaver utilise pour les sites Contribute. Si vous utilisez RDS pour vous connecter à votre site distant, vous pouvez activer la compatibilité avec Contribute, mais vous devez ensuite personnaliser votre connexion avant de pouvoir la partager avec des utilisateurs de Contribute. Si vous utilisez votre ordinateur local comme serveur Web, vous devez définir le site à l'aide d'une connexion FTP ou réseau (au lieu d'un simple chemin de dossier local) pour pouvoir partager votre connexion avec des utilisateurs de Contribute. Lorsque vous activez la compatibilité avec Contribute, Dreamweaver active automatiquement Design Notes (y compris l'option Télécharger les Design Notes pour les partager), ainsi que le système d'archivage et d'extraction de fichiers. Si Contribute Publishing Server (CPS) est actif sur le site distant auquel vous vous connectez, Dreamweaver notify CPS dès que vous exécutez une opération réseau, telle que l'archivage, la restauration ou la publication d'un fichier. Le CPS conserve une trace de ces événements, que vous pouvez afficher dans la console d'administration CPS. (Si vous désactivez CPS, ces événements ne sont pas consignés.) Remarque : CPS est activé avec Contribute. Pour plus d'informations, voir Administration de Contribute dans l'aide de Contribute. 1 Choisissez Site > Gérer les sites. 2 Sélectionnez un site, cliquez sur Modifier puis sur l'onglet Avancé. 3 Sélectionnez la catégorie Contribute dans la liste de gauche, sélectionnez l'option Activer la compatibilité avec Contribute. 4 Si une boîte de dialogue s'affiche indiquant que vous devez activer Design Notes et la fonction Archiver/Extraire, cliquez sur OK. 5 Si vous n'avez pas déjà fourni les informations de contact pour la fonction Archiver/Extraire, entrez votre nom et votre adresse électronique dans la boîte de dialogue, puis cliquez sur OK. L'état de la restauration, l'état des services CPS, la zone de texte URL de la racine du site et le bouton Administration du site Web apparaissent dans la boîte de dialogue Définition du site. Si la restauration est activée dans Contribute, vous pouvez restaurer les versions précédentes des fichiers que vous avez modifiés dans Dreamweaver. 6 Vérifiez l'URL qui s'affiche dans la zone de texte URL de la racine du site et modifiez-la le cas échéant. Dreamweaver construit une URL de la racine du site en fonction des informations de définition de site que vous avez fournies, mais il se peut que l'URL construite ne soit pas tout à fait correcte. 7 Cliquez sur le bouton Tester pour vérifier si l'URL que vous avez saisie est correcte. Remarque : Si vous êtes prêt à envoyer une clé de connexion ou à effectuer les tâches d'administration du site Contribute, ignorez les étapes restantes. 8 Cliquez sur le bouton Administrer le site dans Contribute. 9 Cliquez sur OK, puis sur Terminé. Voir aussi « Restauration de fichiers (utilisateurs de Contribute) » à la page 95 Administration d'un site Contribute avec Dreamweaver Après avoir activé la compatibilité avec Contribute, vous pouvez utiliser Dreamweaver pour lancer Contribute afin d'effectuer les tâches d'administration du site. Remarque : Contribute doit être installé sur le même ordinateur que Dreamweaver. En tant qu'administrateur d'un site Contribute, vous pouvez : - modifier les paramètres administratifs au niveau du site ; Les paramètres administratifs de Contribute rassemblent les paramètres qui s'appliquent à l'ensemble des utilisateurs de votre site Web. Ces paramètres permettent de configurer Contribute avec précision pour bénéficier d'une meilleure expérience utilisateur. modifier les autorisations accordées aux rôles utilisateur de Contribute ; définir les utilisateurs de Contribute. Les utilisateurs de Contribute nécessitent certaines informations sur le site pour pouvoir s'y connecter. Vous pouvez regrouper toutes ces informations dans un fichier, appelé clé de connexion, que vous envoyez aux utilisateurs de Contribute. Remarque : Une clé de connexion ne correspond pas à un fichier de site exporté de Dreamweaver Avant de donner aux utilisateurs de Contribute les informations de connexion dont ils ont besoin pour modifier les pages, utilisez Dreamweaver pour créer la hiérarchie de dossiers de base de votre site, ainsi que les modèles et les feuilles de style S nécessaires au site. 1 Choisissez Site > Gérer les sites. 2 Sélectionnez un site, cliquez sur Modifier puis sur l'onglet Avancé. 3 Sélectionnez la catégorie Contribute dans la liste de gauche. 4 Cliquez sur le bouton Administrer le site dans Contribute. Remarque : Ce bouton s'affiche uniquement si vous avez activé la compatibilité avec Contribute. 5 Si nécessaire, tapez le mot de passe administrateur, puis cliquez sur OK. La boîte de dialogue Administration du site Web s'affiche. Pour modifier les paramètres administratifs, sélectionnez une catégorie dans la liste de gauche, puis modifiez les paramètres en fonction des besoins. Pour modifier les paramètres de rôle, dans la catégorie Utilisateurs et rôles, cliquez sur Modifier les paramètres de rôle, puis apportez les modifications nécessaires. Pour envoyer une clé de connexion afin de définir les utilisateurs, dans la catégorie Utilisateurs et rôles, cliquez sur Envoyer la clé de connexion, puis renseignez l'Assistant de connexion. 6 Cliquez sur Fermer, cliquez sur OK, puis sur Terminé. Pour plus d'informations sur les paramètres administratifs, la gestion des rôles utilisateur ou la création d'une clé de connexion, voir l'aide de Contribute. Voir aussi « Importer et exporter les paramètres d'un site » à la page 48 Suppression, déplacement ou modification du nom d'un fichier distant sur un site Contribute Pour supprimer un fichier d'un serveur distant qui héberge un site Contribute, procédez de la même façon que pour supprimer un fichier sur le serveur de tout site Dreamweaver. Toutefois, lorsque vous supprimez un fichier d'un site Contribute, Dreamweaver vous demande si vous souhaitez supprimer toutes les anciennes versions du fichier. Si vous décidez de les conserver, Dreamweaver enregistre une copie de la version actuelle dans le dossier _baks afin que vous puissiez la restaurer ultérieurement. Pour modifier le nom d'un fichier distant ou déplacer le fichier d'un dossier à un autre dans un site Contribute, procédez de la même façon que sur tout site Dreamweaver. Dans un site Contribute, Dreamweaver renomme ou déplace également les anciennes versions du fichier associées qui sont enregistrées dans le dossier _baks. 1 Sélectionnez le fichier dans le volet distant du panneau Fichiers (Fenêtre > Fichiers) et appuyez sur Retour arrière (Windows) ou Arrière (Macintosh). Une boîte de dialogue s'affiche vous demandant de confirmer la suppression du fichier. 2 Dans la boîte de dialogue de confirmation : Pour supprimer toutes les versions précédentes du fichier ainsi que la version actuelle, sélectionnez l'option Supprimer les versions de restauration. Pour conserver les anciennes versions sur le serveur, désélectionnez l'option Supprimer les versions de restauration. 3 Cliquez sur Oui pour supprimer le fichier. Activation de l'accès aux modèles sans l'accès au dossier racine pour les utilisateurs de Contribute Dans un site Contribute, les autorisations de fichiers et de dossiers de base sont gérées directement sur le serveur. Si pour des raisons de sécurité, vous ne pouvez pas accorder de droits d'accès en lecture au dossier /Templates, vous pouvez tout de même rendre les modèles accessibles aux utilisateurs. 1 Définissez le site Contribute afin que le dossier racine soit le dossier qui s'affiche en tant que racine pour les utilisateurs. 2 Copiez manuellement le dossier de modèles du dossier racine du site principal dans le dossier racine du site Contribute, à l'aide du panneau Fichiers. 3 Après avoir modifié le site principal, recopiez les modèles modifiés dans les sous-dossiers appropriés. Si vous faites appel à cette méthode, n'utilisez pas de liens relatifs à la racine du site dans les sous-dossiers. Les liens relatifs à la racine du site sont associés au dossier racine principal du serveur, et non au dossier racine défini dans Dreamweaver. Les utilisateurs de Contribute ne peuvent pas créer de liens relatifs à la racine du site. Si les liens d'une page Contribute apparaissent rompus, il peut s'agir d'un problème d'autorisations pour le dossier, en particulier si les liens renvoient à des pages qui ne se trouvent pas dans le dossier racine de l'utilisateur de Contribute. Vérifiez les autorisations de lecture et d'écriture pour les dossiers sur le serveur. Voir aussi « Emplacements et chemins d'accès des documents » à la page 267 Dépannage d'un site Contribute Si un fichier distant d'un site Contribute semble avoir été extrait, mais qu'il n'est pas réellement verrouillé sur l'ordinateur de l'utilisateur, vous pouvez déverrouiller le fichier afin de permettre aux utilisateurs de le modifier. Lorsque vous cliquez sur un bouton lié à l'administration d'un site Contribute, Dreamweaver vérifie qu'il peut se connecter au site distant et que l'URL de la racine du site indiquée pour le site est valide. Si Dreamweaver ne peut pas se connecter ou si l'URL n'est pas valide, un message d'erreur s'affiche. Si les outils d'administration ne fonctionnent pas correctement, cela peut être dû au dossier _mm. Déverrouillage d'un fichier dans un site Contribute Remarque : Avant de suivre cette procédure, assurez-vous que le fichier n'est pas extrait. Si vous déverrouillez un fichier pendant qu'un utilisateur de Contribute le modifie, plusieurs utilisateurs risquent de modifier ce fichier en même temps. 1 Effectuez l'une des opérations suivantes : - Ouvrez le fichier dans la fenêtre Document, puis choisissez Site > Annuler extraction. - Dans le panneau Fichiers (Fenêtre > Fichiers), cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis sélectionnez Annuler extraction. Une boîte de dialogue peut s'afficher, qui indique l'utilisateur ayant extrait le fichier et demande de confirmer le déverrouillage du fichier. 2 Si cette boîte de dialogue s'affiche, cliquez sur Oui pour confirmer. Le fichier est déverrouillé sur le serveur. Dépannage des problèmes de connexion pour un site Contribute 1 Vérifiez l'URL de la racine du site dans la catégorie Contribute de la boîte de dialogue Définition de site en ouvrant cette URL dans un navigateur, pour vous assurer qu'elle ouvre la bonne page. 2 Cliquez sur le bouton Tester dans la catégorie Infos distantes de la boîte de dialogue Définition du site pour vous assurer que vous pouvez vous connecter au site. 3 Si l'URL est correcte mais qu'un message d'erreur s'affiche lorsque vous effectuez un test, contactez votre administrateur système pour obtenir de l'aide. Dépannage des outils administratifs de Contribute 1 Sur le serveur, assurez-vous que vous disposez des autorisations de lecture et d'écriture, voire d'exécution, pour le dossier _mm. 2 Vérifiez que le dossier _mm contient un fichier de paramètres partagés portant l'extension CSI. 3 Si ce n'est pas le cas, utilisez l'Assistant de connexion pour créer une connexion au site et devenir administrateur du site. Le fichier de paramètres partagés est créé automatiquement lorsque vous devenez administrateur. Pour plus d'informations sur la façon de devenir administrateur d'un site Web Contribute existant, consultez la section Administration de Contribute dans l'aide de Contribute. Utilisation de fichiers sans définir de site Connexion à un serveur FTP sans définir de site Vous pouvez vous connecter à un serveur FTP de façon à pouvoir travailler sur vos documents sans avoir à créer de site Dreamweaver. Ce type de connexion ne permet toutefois pas d'effectuer des opérations au niveau du site Dreamweaver, par exemple vérifier les liens. 1 Choisissez Site > Gérer les sites. 2 Cliquez sur Nouveau, puis sélectionnez Serveurs FTP et RDS. 3 Entrez le nom de la connexion de serveur dans la zone Nom. Ce nom sera affiché dans le menu contextuel en haut du panneau Fichiers. 4 Sélectionnez FTP dans le menu Type d'accès. 5 Indiquez le nom de l'hôte FTP vers lequel vous transférerez les fichiers pour votre site Web. Votre hôte FTP est le nom Internet complet d'un système informatique, par exemple, ftp.mindspring.com. Entrez le nom d'hôte complet sans ajouter de texte. Evitez en particulier d'ajouter un nom de protocole devant le nom d'hôte. Remarque : Si vous ne connaissez pas le nom de votre hôte FTP, contactez votre fournisseur d'accès à Internet. 6 Entrez le nom du répertoire hôte du site distant, où sont stockés les documents visibles par le public. 7 Entrez le nom de connexion et le mot de passe que vous utilisez pour vous connecter au serveur FTP, puis cliquez sur Tester pour tester votre nom de connexion et votre mot de passe. 8 Sélectionnez l'option Enregistrer si vous voulez que Dreamweaver enregistre votre mot de passe. (Si cette option n'est pas activée, vous devrez entrer le mot de passe dans Dreamweaver à chaque connexion au serveur distant.) 9 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. En cas de doute, consultez votre administrateur système. 10 Sélectionnez l'option Utiliser un pare-feu si vous vous connectez au serveur distant en vous protégeant avec un pare-feu, puis cliquez sur Paramètres du pare-feu pour modifier l'hôte ou le port de votre pare-feu. 11 Sélectionnez l'option Utiliser Secure FTP (SFTP) pour bénéficier d'une authentication sécurisée et cliquez sur OK. SFTP utilise un système de cryptage et de clés publiques pour sécuriser la connexion à votre serveur d'évaluation. Remarque : Votre serveur doit exécuter un serveur SFTP. 12 Cliquez sur OK. Le panneau Fichiers affiche le contenu du dossier de serveur distant auquel vous êtes connecté et le nom du serveur apparaît dans le menu contextuel situé en haut de ce même panneau. Voir aussi « Configuration d'un dossier distant » à la page 41 Connexion à un serveur RDS sans définir de site Vous pouvez vous connecter à un serveur RDS de façon à pouvoir travailler sur vos documents sans avoir à créer de site Dreamweaver. Ce type de connexion ne permet toutefois pas d'effectuer des opérations au niveau du site Dreamweaver, par exemple vérifier les liens. 1 Choisissez Site > Gérer les sites. 2 Cliquez sur Nouveau, puis sélectionnez Serveurs FTP et RDS. 3 Entrez le nom que vous souhaitez donner à ce serveur dans le champ de texte Description. Ce nom sera affiché dans le menu en haut du panneau Fichiers. 4 Sélectionnez RDS dans le menu Type d'accès. 5 Entrez l'URL que les utilisateurs saisissent dans leur navigateur pour ouvrir une application Web, sans indiquer aucun nom de fichier. Supposons que l'URL de votre application soit www.macromedia.com/mycoolapp/start.jsp. Dans notre exemple, vous taperiez le préfixe d'URL suivant : www.adobe.com/mycoolapp/. 6 Cliquez ensuite sur le bouton Paramètres pour entrer les informations d'accès. 7 Complétez les options de la boîte de dialogue de configuration de serveur pour RDS, puis cliquez sur OK. Voir aussi « Configuration d'un dossier distant » à la page 41 Options de l'onglet Elémentaire Définition des options de modification des fichiers de l'onglet Elémentaire L'assistant de définition de site comporte trois sections vous permettant de configurer un site Dreamweaver : Modification des fichiers, Test des fichiers et Partage des fichiers. Chaque section peut comporter plusieurs écrans selon les paramètres sélectionnés. Le nom de section affiché en gras en haut de la boîte de dialogue indique l'avancement de la procédure de configuration. Vous ne devrez pas forcément configurer les dossiers dans chacune des trois sections. Les questions qui figurent dans l'onglet vous aident à déterminer vos besoins. Cette boîte de dialogue a pour fonction de nommer votre site Dreamweaver et de spécifier son URL. Voir aussi « A propos des sites Dreamweaver » à la page 38 Affectation d'un nom à votre site Dreamweaver ❖ Entrez un nom pour votre site Dreamweaver. Spécification de l'URL de votre site ◆ Entrez l'URL (adresse HTTP) de votre site Dreamweaver. Dreamweaver utilise cette adresse pour vérifier que les liens relatifs à la racine du site fonctionnent sur le serveur distant, qui peut avoir un dossier différent en tant que racine de site. Par exemple, si vous liez un fichier d'image de votre disque dur dans le dossier C:\Ventes\images\ (où Ventes correspond à votre dossier racine local) et que l'URL de votre site définitif est http://www.monsite.com/VentesApp/ (où VentesApp est votre dossier racine distant), la saisie de l'URL dans la zone de texte Adresse HTTP permettra de vérifier que le chemin conduisant au fichier sur le serveur distant est en réalité /VentesApp/images/. Définition des options de modification des fichiers de l'onglet Elémentaire Deuxième partie Cette boîte de dialogue a pour fonction de déterminer si vous construisez une application Web. Une application Web est un ensemble de pages qui interagissent avec l'utilisateur, les unes avec les autres, ainsi qu'avec les différentes ressources d'un serveur Web, notamment les bases de données. Si vous construisez une application Web, vous devez choisir la technologie de serveur exécutée sur le serveur Web. 1 Sélectionnez Oui si vous envisagez de recourir à une technologie de serveur pour créer une application Web ; dans le cas contraire, sélectionnez Non. 2 Si vous sélectionnez Oui, sélectionnez une technologie de serveur. Vous pouvez utiliser Dreamweaver pour construire des applications Web à l'aide de cinq technologies de serveur : ColdFusion, ASP.NET, ASP, JSP ou PHP. Chacune de ces technologies correspond à un type de document dans Dreamweaver. Le choix de l'une de vos applications Web repose sur plusieurs facteurs, notamment votre niveau de connaissance des différents langages de script et le serveur d'application que vous envisagez d'utiliser. Voir aussi « Choix d'un serveur d'application » à la page 476 Définition des options de modification des fichiers de l'onglet Elémentaire Troisième partie Cette boîte de dialogue a pour fonction de définir votre environnement de développement. 1 Sélectionnez la méthode de manipulation des fichiers que vous adopterez pendant la phase de développement. 2 Spécifiez l'endroit dans lequel stocker vos fichiers ou cliquez sur l'icône de dossier pour rechercher un dossier. Il s'agit du répertoire de travail propre à votre site Dreamweaver, à savoir l'endroit dans lequel sont stockés les fichiers « en développement » de votre site Dreamweaver. Dans le panneau Fichiers de Dreamweaver, ce dossier constitue votre site local. Voir aussi « Description de la structure du dossier local et du dossier distant » à la page 38 Définition des options de test des fichiers de l'onglet Elémentaire (préfixe de l'URL) Cette boîte de dialogue s'affiche si vous avez sélectionné une technologie de serveur à une étape antérieure du processus. Elle a pour fonction de définir un préfixe d'URL de sorte que Dreamweaver puisse utiliser votre serveur d'évaluation pour y afficher des données et se connecter à des bases de données lorsque vous travaillez. Le préfixe d'URL est constitué du nom de domaine et du nom d'un sous-répertoire ou d'un répertoire virtuel du répertoire de base de votre site Web. 1 Entrez l'URL que les utilisateurs saisissent dans leur navigateur pour ouvrir une application Web, sans indiquer aucun nom de fichier. Supposons que l'URL de votre application soit www.adobe.com/mycoolapp/start.jsp. Dans notre exemple, vous taperiez le préfixe d'URL suivant : www.adobe.com/mycoolapp/. Si Dreamweaver est exécuté sur le même système que votre serveur Web, vous pouvez utiliser le terme « localhost » pour représenter votre nom de domaine. Par exemple, supposons que l'URL de votre application soit buttercup_pc/mycoolapp/start.jsp. Vous pouvez ensuite entrer le préfixe d'URL suivant : http://localhost/mycoolapp/. 2 Cliquez sur Test de l'URL pour vérifier que l'URL fonctionne. Voir aussi « Configuration d'un serveur d'évaluation » à la page 45 « A propos du préfixe d'URL pour le serveur d'évaluation » à la page 47 Définition des options de test des fichiers de l'onglet Elémentaire (accès à distance) Cette boîte de dialogue a pour fonction de sélectionner une méthode d'accès à votre serveur d'évaluation pour Dreamweaver. Dreamweaver utilise un serveur d'évaluation pour générer et afficher un contenu dynamique lorsque vous travaillez. Ce serveur d'évaluation peut se trouver sur votre ordinateur local, un serveur de développement, un serveur intermédiaire ou un serveur de production. Tant que le serveur est capable de traiter le type de pages dynamiques que vous avez en tête, votre choix importe peu. ✿ Sélectionnez une méthode d'accès dans le menu déroulant et renseignez les zones de texte appropriées. Aucun Conservez cette valeur par défaut si vous n'avez pas l'intention de charger votre site sur un serveur. FTP Utilisez ce paramètre si vous vous connectez à votre serveur Web par FTP. Local/Réseau Utilisez cette option si vous accédez à un dossier de réseau, si vous stockez des fichiers ou exécutez votre serveur d'évaluation sur votre ordinateur local. RDS (Remote Development Services) Utilisez cette option si vous vous connectez à votre serveur Web par RDS. Cette méthode d'accès suppose que votre dossier distant se trouve sur un ordinateur exécutant ColdFusion. Microsoft Visual SourceSafe Utilisez cette option si vous vous connectez à votre serveur Web en utilisant Microsoft Visual SourceSafe. La prise en charge de cette méthode est uniquement disponible pour Windows ; pour l'utiliser, vous devez avoir installé Microsoft Visual SourceSafe Client version 6. WebDAV (Web-based Distributed Authoring and Versioning) Utilisez cette option si vous vous connectez à votre serveur Web en utilisant le protocole WebDAV. Cette méthode d'accès suppose que vous disposez d'un serveur prenant en charge ce protocole, par exemple Microsoft Internet Information Server (IIS) 5.0 ou une installation du serveur Web Apache configurée de façon adéquate. Voir aussi « Configuration d'un dossier distant » à la page 41 Définition des options de configuration d'un dossier distant de l'onglet Elémentaire Cette boîte de dialogue a pour fonction de déterminer s'il est nécessaire ou non de configurer un dossier de serveur distant. Selon votre environnement, les fichiers destinés aux évaluations, à la collaboration, à la production, au déploiement et à un certain nombre d'autres scénarios sont stockés dans ce dossier. En règle générale, votre dossier distant se trouve sur l'ordinateur à partir duquel vous exécutez votre serveur Web. Dans le panneau Fichiers de Dreamweaver, ce dossier représente votre site distant. Le dossier distant vous permet de transférer des fichiers entre votre disque local et un serveur Web, ce qui facilite la gestion et le partage des fichiers sur vos sites Dreamweaver. Pour choisir de configurer ou non un dossier distant, sélectionnez Oui pour en configurer un, ou Non pour ignorer la configurer d'un dossier distant. Voir aussi « Description de la structure du dossier local et du dossier distant » à la page 38 Définition des options de partage des fichiers de l'onglet Elémentaire (accès à distance) Cette boîte de dialogue a pour fonction de sélectionner une méthode d'accès à votre serveur d'évaluation pour Dreamweaver. Dreamweaver utilise un serveur d'évaluation pour générer et afficher un contenu dynamique lorsque vous travaillez. Ce serveur d'évaluation peut se trouver sur votre ordinateur local, un serveur de développement, un serveur intermédiaire ou un serveur de production. Tant que le serveur est capable de traiter le type de pages dynamiques que vous avez en tête, votre choix importe peu. ✿ Sélectionnez une méthode d'accès dans le menu déroulant et renseignez les zones de texte appropriées. Aucun Conservez cette valeur par défaut si vous n'avez pas l'intention de charger votre site sur un serveur. FTP Utilisez ce paramètre si vous vous connectez à votre serveur Web par FTP. Local/Réseau Utilisez cette option si vous accédez à un dossier de réseau, si vous stockez des fichiers ou exécutez votre serveur d'évaluation sur votre ordinateur local. RDS (Remote Development Services) Utilisez cette option si vous vous connectez à votre serveur Web par RDS. Cette méthode d'accès suppose que votre dossier distant se trouve sur un ordinateur exécutant ColdFusion. Microsoft Visual SourceSafe Utilisez cette option si vous vous connectez à votre serveur Web en utilisant Microsoft Visual SourceSafe. La prise en charge de cette méthode est uniquement disponible pour Windows ; pour l'utiliser, vous devez avoir installé Microsoft Visual SourceSafe Client version 6. WebDAV (Web-based Distributed Authoring and Versioning) Utilisez cette option si vous vous connectez à votre serveur Web en utilisant le protocole WebDAV. Cette méthode d'accès suppose que vous disposez d'un serveur prenant en charge ce protocole, par exemple Microsoft Internet Information Server (IIS) 5.0 ou une installation du serveur Web Apache configurée de façon adéquate. Voir aussi « Configuration d'un dossier distant » à la page 41 Définition des options de partage des fichiers de l'onglet Elémentaire (archivage/extraction) Cette boîte de dialogue a pour fonction de configurer le système d'archivage et d'extraction de fichiers, si vous travaillez au sein d'un groupe (ou seul mais sur plusieurs ordinateurs). L'extraction d'un fichier équivaut à le rendre indisponible sur le serveur afin que les autres membres de l'équipe ne puissent pas le modifier à l'aide de Dreamweaver. L'archivage d'un fichier équivaut à le mettre à la disposition des autres membres de l'équipe, qui peuvent l'extraire et le modifier. 1 Sélectionnez Oui pour activer l'extraction/archivage du fichier si vous travaillez en groupe (ou seul mais sur plusieurs ordinateurs) ou sélectionnez Non pour désactiver l'extraction/archivage du fichier. Cette option est utile pour informer les autres utilisateurs que vous avez extrait un fichier en vue de le modifier ou pour vous rappeler qu'une version plus récente d'un fichier est peut-être ouverte sur une autre machine. 2 Sélectionnez Dreamweaver si vous voulez que les fichiers soient automatiquement extraits lorsque vous les ouvrez à partir du panneau Fichiers ; dans le cas contraire, sélectionnez Non. Remarque : Si vous choisissez Fichier > Ouvrir pour ouvrir un fichier, cela n'extrait pas le fichier, même si cette option est activée. 3 Entrez votre nom. Il apparaît dans le panneau Fichiers avec les fichiers extraits afin que les membres d'une équipe puissent communiquer entre eux s'ils partagent des fichiers. Si vous travaillez seul sur plusieurs machines, utilisez un nom d'extraction différent pour chaque machine (par exemple, PierreR-MacDomicile et PierreR-PCBureau) de manière à savoir où se trouve la version la plus récente du fichier si vous oubliez de l'archiver. 4 Entrez votre adresse électronique. Si vous saisissez une adresse électronique puis que vous extrayez un fichier par la suite, votre nom apparaît dans le panneau Site en regard du fichier, sous la forme d'un lien (bleu souligné). Si un membre de l'équipe clique sur le lien, son programme de messagerie électronique par défaut ouvre un nouveau courriel à destination de votre adresse électronique et comportant un objet qui correspond aux noms du site et du fichier. Voir aussi « Archivage et extraction de fichiers » à la page 88 Récapitulatif des options de l'onglet Elémentaire Cette page récapitule les paramètres que vous avez définis pour votre site. Effectuez l'une des opérations suivantes pour terminer la configuration de votre site : Cliquez sur le bouton Précédent pour revenir en arrière et modifier un paramètre. Cliquez sur le bouton Terminé si les paramètres vous conviennent et pour laisser à Dreamweaver le soin de créer le site. Dès lors que vous cliquez sur le bouton Terminé, Dreamweaver crée le site et l'affiche dans le panneau Fichiers. Cliquez sur le bouton Annuler si vous ne voulez pas que Dreamweaver crée le site. Chapitre 4 : Création et gestion de fichiers Vous pouvez non seulement créer des pages Web, mais aussi organiser les fichiers et les actifs appartenant à votre site Web. Vous pouvez créer, gérer et synchroniser des fichiers, les archiver et les extraire et tester la façon dont votre site va fonctionner dans différents navigateurs. Création et ouverture de documents A propos de la création de documents Dreamweaver Dreamweaver fournit un environnement souple pour l'utilisation de divers documents Web. Outre les documents HTML, vous pouvez créer et ouvrir divers documents en mode texte, de type CFML (ColdFusion Markup Language), ASP, JavaScript et CSS (Cascading Style Sheets). Les fichiers de code source, tels que Visual Basic, .NET, C# et Java, sont également pris en charge. Dreamweaver propose diverses options pour la création d'un nouveau document. Vous pouvez créer les types de document suivants : un nouveau document ou un modèle vierge ; un document basé sur l'une des mises en pages prédéfinies fournies avec Dreamweaver, dont plus de 30 mises en page basées sur CSS ; un document basé sur un de vos modèles existants. Vous pouvez également définir les préférences des documents. Par exemple, si vous avez l'habitude de travailler avec un type particulier de document, vous pouvez le définir comme type par défaut pour les nouvelles pages. Vous pouvez aisément définir des propriétés de document, telles que les balises meta, le titre du document et la couleur de l'arrière-plan, ainsi que d'autres propriétés de page, en mode Création ou en mode Code. Types de fichier Dreamweaver Vous pouvez travailler avec un grand choix de types de fichiers dans Dreamweaver. Le fichier HTML est celui avec lequel vous travaillerez le plus souvent. Les fichiers HTML (pour fichiers de type Hypertext Markup Language) contiennent le langage à base de balises qui se charge d'afficher une page Web dans un navigateur. Vous pouvez enregistrer les fichiers HTML avec l'extension .html ou .htm. Dreamweaver enregistre par défaut les fichiers avec l'extension .html. Voici quelques autres types de fichiers courants que vous pourriez utiliser quand vous travaillez avec Dreamweaver : CSS Les fichiers CSS (Cascading Style Sheet, feuille de style en cascade) possèdent l'extension .css. Ils sont utilisés pour formater le contenu HTML et fixer le positionnement de divers éléments de page. GIF Les fichiers GIF (Graphics Interchange Format) possèdent l'extension .gif. Ce format graphique est très utilisé dans les dessins humoristiques, les logos, les graphismes pourvus de zones transparentes et les animations. Les GIF sont constitués d'un maximum de 256 couleurs. JPEG Les fichiers JPEG (Joint Photographic Experts Group, du nom de l'organisation qui a créé le format) possèdent l'extension .jpg et correspondent généralement à des photographies ou à des images très colorées. Ce format est le plus approprié pour les photographies numériques ou scannées, les images utilisant des textures, les images pourvues de transitions à gradient de couleurs ainsi que toutes les images exigeant plus de 256 couleurs. XML Les fichiers XML (Extensible Markup Language) possèdent l'extension .xml. Ils contiennent des données brutes qui peuvent être formatées en utilisant XSL (Extensible Stylesheet Language). XSL Les fichiers XSL (Extensible Stylesheet Language) possèdent l'extension .xsl ou .xslt. Ils sont utilisés pour créer des données XML que vous voulez afficher sur une page Web. CFML Les fichiers CFML (ColdFusion Markup Language) possèdent l'extension .cfm. Ils sont utilisés pour traiter des pages dynamiques. ASPX Les fichiers ASP.NET possèdent l'extension .aspx et sont utilisés pour traiter des pages dynamiques. PHP Les fichiers Hypertext Preprocessor possèdent l'extension .php et sont utilisés pour traiter des pages dynamiques. Voir aussi « Affichage de données XML » à la page 401 « Création visuelle d'applications » à la page 586 « Description des feuilles de style en cascade » à la page 117 Création d'une page vierge Vous pouvez créer une page contenant une mise en forme CSS prédéfinie, ou créer une page totalement vierge puis créer la mise en forme de votre choix. 1 Choisissez Fichier > Nouveau. 2 Dans la catégorie Page vierge de la boîte de dialogue Nouveau document, sélectionnez le type de page à créer dans la colonne Type de page. Par exemple, choisissez HTML pour créer une page HTML ordinaire, ColdFusion pour créer une page ColdFusion, et ainsi de suite. 3 Si vous voulez que la nouvelle page contienne une mise en forme CSS, sélectionnez une mise en forme CSS prédéfinie dans la colonne Mise en forme. Dans le cas contraire, cliquez sur Aucune. En fonction de votre sélection, un aperçu et la description de la mise en forme sélectionnée s'affichent sur la droite de la boîte de dialogue. Les mises en forme CSS prédéfinies fournissent les types de colonnes suivants : Fixe La largeur de colonne est définie en pixels. La colonne n'est pas redimensionnée selon la taille du navigateur ou des paramètres de texte du visiteur du site. Elastique La largeur de la colonne est définie dans une unité de mesure (ems) proportionnelle à la taille du texte. La mise en page s'adapte si le visiteur du site modifie les paramètres du texte, mais pas en fonction de la taille de la fenêtre du navigateur. Liquide La largeur de colonne est définie en tant que pourcentage de la largeur du navigateur du visiteur du site. La mise en page s'adapte si le visiteur du site augmente ou diminue la largeur de son navigateur, mais pas en fonction des paramètres de texte définis par le visiteur. Hybride Les colonnes emploient une combinaison des trois options précédentes. Par exemple, la mise en page Deux colonnes hybrides, encadré à droite comprend une colonne principale liquide qui s'adapte à la taille du navigateur et une colonne élastique, à droite, dont la taille s'adapte aux paramètres de texte du visiteur du site. 4 Sélectionnez un type de document dans le menu DocType. Dans la plupart des cas, vous pouvez conserver l'option par défaut, XHTML 1.0 transitionnel. Sélectionnez l'une des définitions de type de document (DTD) XHTML pour rendre la page compatible XHTML. Par exemple, vous pouvez rendre un document HTML compatible XHTML en sélectionnant XHTML 1.0 transitionnel ou XHTML 1.0 Strict dans le menu déroulant. Le langage XHTML (Extensible Hypertext Markup Language) n'est autre qu'une nouvelle mouture de HTML sous la forme d'une application XML. En règle générale, l'utilisation de XHTML vous permet d'exploiter les avantages de XML tout en garantissant la compatibilité descendante et ascendante de vos documents Web. Remarque : Pour plus d'informations sur XHTML, consultez le site Web du World Wide Web Consortium (W3C), qui contient la spécification pour XHTML 1.1 - Module-Based XHTML (www.w3.org/TR/xhtml11/) et XHTML 1.0 (www.w3c.org/TR/xhtml1/), ainsi que les sites de validateur XHTML où vous trouverez des fichiers Web (http://validator.w3.org/) et des fichiers locaux (http://validator.w3.org/file-upload.html). 5 Si vous avez choisi une mise en forme CSS dans la colonne Mise en forme, choisissez l'emplacement du code CSS de mise en forme dans la liste déroulante CSS de mise en forme. Ajouter à l'en-tête Ajoute le code CSS de mise en forme à l'en-tête de la page que vous créez. Créer un nouveau fichier Ajoute le code CSS de mise en forme à un nouveau fichier CSS externe et associe la nouvelle feuille de style à la page que vous créez. Lier au fichier existant Permet d'indiquer un fichier CSS existant qui contient déjà les règles CSS requises pour la mise en forme. Pour ce faire, cliquez sur l'icône Ajouter une feuille de style au-dessus du volet Lier le fichier CSS, puis sélectionnez une feuille de style CSS existante. Cette option est particulièrement utile si vous voulez utiliser la même mise en forme CSS (les règles CSS figurant dans un fichier) dans plusieurs documents. 6 (Facultatif) Vous pouvez également lier des feuilles de style CSS à la nouvelle page (sans rapport avec la mise en forme CSS) lors de la création de cette page. Pour ce faire, cliquez sur l'icône Ajouter une feuille de style au-dessus du volet Lier le fichier CSS, puis sélectionnez une feuille de style CSS. 7 Cliquez sur le bouton Préférences pour définir les préférences par défaut du document (par exemple, le type de document, l'encodage et une extension de ficher). 8 Cliquez sur le lien Obtenir plus de contenu pour lancer Dreamweaver Exchange et télécharger d'autres contenus de conception de pages. 9 Cliquez sur le bouton Créer. 10 Enregistrez la page (Fichier > Enregistrer). 11 Dans la boîte de dialogue qui s'affiche, recherchez le dossier où vous voulez enregistrer le fichier. Il est conseillé d'enregistrer votre fichier dans un site Dreamweaver. 12 Dans la zone de texte Nom de fichier, entrez le nom du fichier. Evitez les espaces et les caractères spéciaux pour les noms de fichiers et de dossiers ; les noms de fichiers ne doivent pas commencer par un chiffre. En particulier, n'utilisez pas de caractères spéciaux (par exemple é, ç ou ¥) ou de signes de ponctuation (deux points, barres obliques ou points) dans le nom des fichiers que vous avez l'intention de placer sur un serveur distant. En effet, la plupart des serveurs transforment ces caractères lors du transfert, rendant ainsi inopérants les liens vers ces fichiers. Voir aussi « A propos du code XHTML généré par Dreamweaver » à la page 289 « Mise en forme des pages avec CSS » à la page 141 « Définition du type et le codage par défaut d'un document » à la page 71 Création d'un modèle vierge La boîte de dialogue Nouveau document permet de créer des modèles Dreamweaver. Par défaut, les modèles sont enregistrés dans le dossier Templates de votre site. 1 Choisissez Fichier > Nouveau. 2 Dans la boîte de dialogue Nouveau document, sélectionnez la catégorie Modèle vierge. 3 Sélectionnez le type de modèle à créer dans la colonne Type de modèle. Par exemple, choisissez Modèle HTML pour créer un modèle HTML ordinaire, Modèle ColdFusion pour créer un modèle ColdFusion, et ainsi de suite. 4 Si vous voulez que la nouvelle page contienne une mise en forme CSS, sélectionnez une mise en forme CSS prédéfinie dans la colonne Mise en forme. Dans le cas contraire, cliquez sur Aucune. En fonction de votre sélection, un aperçu et la description de la mise en forme sélectionnée s'affichent sur la droite de la boîte de dialogue. Les mises en forme CSS prédéfinies fournissent les types de colonnes suivants : Fixe La largeur de colonne est définie en pixels. La colonne n'est pas redimensionnée selon la taille du navigateur ou des paramètres de texte du visiteur du site. Elastique La largeur de la colonne est définie dans une unité de mesure (ems) proportionnelle à la taille du texte. La mise en page s'adapte si le visiteur du site modifie les paramètres du texte, mais pas en fonction de la taille de la fenêtre du navigateur. Liquide La largeur de colonne est définie en tant que pourcentage de la largeur du navigateur du visiteur du site. La mise en page s'adapte si le visiteur du site augmente ou diminue la largeur de son navigateur, mais pas en fonction des paramètres de texte définis par le visiteur. Hybride Les colonnes emploient une combinaison des trois options précédentes. Par exemple, la mise en page Deux colonnes hybrides, encadré à droite comprend une colonne principale qui s'adapte à la taille du navigateur et une colonne élastique, à droite, dont la taille s'adapte aux paramètres de texte du visiteur du site. 5 Sélectionnez un type de document dans le menu DocType. Dans la plupart des cas, vous pouvez conserver l'option par défaut, XHTML 1.0 transitionnel. Sélectionnez l'une des définitions de type de document (DTD) XHTML pour rendre la page compatible XHTML. Par exemple, vous pouvez rendre un document HTML compatible XHTML en sélectionnant XHTML 1.0 transitionnel ou XHTML 1.0 Strict dans le menu déroulant. Le langage XHTML (Extensible Hypertext Markup Language) n'est autre qu'une nouvelle mouture de HTML sous la forme d'une application XML. En règle générale, l'utilisation de XHTML vous permet d'exploiter les avantages de XML tout en garantissant la compatibilité descendante et ascendante de vos documents Web. Remarque : Pour plus d'informations sur XHTML, consultez le site Web du World Wide Web Consortium (W3C), qui contient la spécification pour XHTML 1.1 - Module-Based XHTML (www.w3.org/TR/xhtml11/) et XHTML 1.0 (www.w3c.org/TR/xhtml1/), ainsi que les sites de validateur XHTML où vous trouverez des fichiers Web (http://validator.w3.org/) et des fichiers locaux (http://validator.w3.org/file-upload.html). 6 Si vous avez choisi une mise en forme CSS dans la colonne Mise en forme, choisissez l'emplacement du code CSS de mise en forme dans la liste déroulante CSS de mise en forme. Ajouter à l'en-tête Ajoute le code CSS de mise en forme à l'en-tête de la page que vous créez. Créer un nouveau fichier Ajoute le code CSS de mise en forme à une nouvelle feuille de style CSS externe et associe la nouvelle feuille de style à la page que vous créez. Lier au fichier existant Permet d'indiquer un fichier CSS existant qui contient déjà les règles CSS requises pour la mise en forme. Pour ce faire, cliquez sur l'icône Ajouter une feuille de style au-dessus du volet Lier le fichier CSS, puis sélectionnez une feuille de style CSS existante. Cette option est particulièrement utile si vous voulez utiliser la même mise en forme CSS (les règles CSS figurant dans un fichier) dans plusieurs documents. 7 (Facultatif) Vous pouvez également lier des feuilles de style CSS à la nouvelle page (sans rapport avec la mise en forme CSS) lors de la création de cette page. Pour ce faire, cliquez sur l'icône Ajouter une feuille de style au-dessus du volet Lier le fichier CSS, puis sélectionnez une feuille de style CSS. 8 Cliquez sur le bouton Préférences pour définir les préférences par défaut du document (par exemple, le type de document, l'encodage et une extension de ficher). 9 Cliquez sur le lien Obtenir plus de contenu pour lancer Dreamweaver Exchange et télécharger d'autres contenus de conception de pages. 10 Cliquez sur le bouton Créer. 11 Enregistrez la page (Fichier > Enregistrer). Si vous n'avez pas encore ajouté de régions modifiables au modèle, une boîte de dialogue vous en avertit. Cliquez sur OK pour fermer la boîte de dialogue. 12 Dans la boîte de dialogue Enregistrer comme modèle, sélectionnez le site dans lequel le modèle doit être enregistré. Entrez la description du modèle dans la zone description. 13 Dans la zone de texte Nom de fichier, entrez le nom du nouveau modèle. Il n'est pas nécessaire d'ajouter l'extension de fichier au nom du modèle. Lorsque vous cliquez sur Enregistrer, l'extension .dwt est ajoutée au nouveau modèle, qui est enregistré dans le dossier Templates de votre site. Evitez les espaces et les caractères spéciaux pour les noms de fichiers et de dossiers ; les noms de fichiers ne doivent pas commencer par un chiffre. En particulier, n'utilisez pas de caractères spéciaux (par exemple é, ç ou ¥) ou de signes de ponctuation (deux points, barres obliques ou points) dans le nom des fichiers que vous avez l'intention de placer sur un serveur distant. En effet, la plupart des serveurs transforment ces caractères lors du transfert, rendant ainsi inopérants les liens vers ces fichiers. Voir aussi « A propos du code XHTML généré par Dreamweaver » à la page 289 « Mise en forme des pages avec CSS » à la page 141 « Création et gestion des modèles » à la page 371 « Configuration d'un site Dreamweaver » à la page 38 « Définition du type et le codage par défaut d'un document » à la page 71 Création d'une page basée sur un modèle existant Vous pouvez sélectionner, prévisualiser et créer un nouveau document à partir d'un modèle existant. La boîte de dialogue Nouveau document vous permet de sélectionner un modèle parmi les sites définis dans Dreamweaver ou d'utiliser le panneau Actifs pour créer un nouveau document sur la base d'un modèle existant. Voir aussi « Création et gestion des modèles » à la page 371 « Configuration d'un site Dreamweaver » à la page 38 « Définition du type et le codage par défaut d'un document » à la page 71 Création d'un document basé sur un modèle 1 Choisissez Fichier > Nouveau. 2 Dans la boîte de dialogue Nouveau document, sélectionnez la catégorie Page du modèle. 3 Dans la colonne Site, sélectionnez le site Dreamweaver contenant le modèle à utiliser, puis sélectionnez un modèle dans la liste de droite. 4 Désactivez l'option Mettre la page à jour quand le modèle est modifié si vous ne souhaitez pas que la page soit mise à jour lors de chaque modification apportée au modèle sur lequel elle est basée. 5 Cliquez sur le bouton Préférences pour définir les préférences par défaut du document (par exemple, le type de document, l'encodage et une extension de ficher). 6 Cliquez sur le lien Obtenir plus de contenu pour lancer Dreamweaver Exchange et télécharger d'autres contenus de conception de pages. 7 Cliquez sur Créer puis enregistrez le document (Fichier > Enregistrer). Création d'un document à partir d'un modèle à l'aide du panneau Actifs 1 Ouvrez le panneau Actifs (Fenêtre > Actifs) s'il n'est pas déjà ouvert. 2 Dans le panneau Actifs, cliquez sur l'icône Modèles située à gauche pour afficher la liste des modèles utilisés dans votre site actuel. Si le modèle que vous souhaitez utiliser vient d'être créé, il peut être nécessaire de cliquer sur le bouton Actualiser pour l'afficher. 3 Cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur le modèle à appliquer, puis sélectionnez Nouveau à partir d'un modèle. Le document s'ouvre dans la fenêtre de document. 4 Enregistrez le document. Création d'un document basé sur un fichier d'exemple Dreamweaver Dreamweaver inclut plusieurs mises en formes de page professionnelles, ainsi que des fichiers d'éléments de conception. Vous pouvez utiliser ces fichiers d'exemple comme point de départ pour la création de pages sur vos sites Web. Lorsque vous créez un document basé sur un fichier d'exemple, Dreamweaver crée une copie du fichier. La boîte de dialogue Nouveau document permet de prévisualiser un fichier d'exemple et de consulter une brève description des éléments de conception d'un document. Dans le cas de feuilles de style en cascade (CSS), vous pouvez copier une feuille prédéfinie pour l'appliquer à vos documents. Remarque : Si vous créez un document basé sur un jeu de cadres prédéfini, seule la structure du jeu de cadres est copiée, sans le contenu des cadres. En outre, vous devez enregistrer séparément chacun des fichiers composant le cadre. 1 Choisissez Fichier > Nouveau. 2 Dans la boîte de dialogue Nouveau document, sélectionnez la catégorie Page de l'exemple. 3 Dans la colonne Dossier exemple, sélectionnez Feuille de style en cascade (CSS), Page d'accueil (Thème) ou Page d'accueil (Base), puis choisissez un fichier d'exemple dans la liste de droite. 4 Cliquez sur le bouton Créer. Le nouveau document s'ouvre dans la fenêtre de document (en mode Création). Si vous avez sélectionné Feuille de style de cascade (CSS), la feuille de style CSS s'affiche en mode code. 5 Enregistrez le document (Fichier > Enregistrer). 6 Si la boîte de dialogue Copier les fichiers dépendants apparaît, définissez les options, puis cliquez sur Copier pour copier les actifs dans le dossier sélectionné. Vous pouvez choisir l'emplacement des fichiers dépendants ou enregistrer les fichiers dans le dossier par défaut créé par Dreamweaver (ce dossier est créé en fonction du nom source du fichier d'exemple). Voir aussi « Description des feuilles de style en cascade » à la page 117 « Enregistrement des fichiers du cadre et du jeu de cadres » à la page 201 Création d'autres types de pages La catégorie Autre de la boîte de dialogue Nouveau document permet de créer divers types de page qui peuvent être utiles dans Dreamweaver, comme des pages C#, VBScript et en texte seul. 1 Choisissez Fichier > Nouveau. 2 Dans la boîte de dialogue Nouveau document, sélectionnez la catégorie Autre. 3 Sélectionnez le type de document à créer dans la colonne Type de page, puis cliquez sur le bouton Créer. 4 Enregistrez le document (Fichier > Enregistrer). Définition du type et le codage par défaut d'un document Vous pouvez définir le type de document par défaut utilisé pour un site. Par exemple, si la plupart des pages de votre site sont de type spécifique (tel que les documents ColdFusion, HTML ou ASP), vous pouvez définir des préférences de document pour créer automatiquement les nouveaux documents de ce type. 1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh). Vous pouvez également cliquer sur le bouton Préférences dans la boîte de dialogue Nouveau document pour définir les nouvelles préférences liées au document en cours de création. 2 Cliquez sur la catégorie Nouveau document dans la liste de gauche. 3 Définissez ou modifiez les préférences selon vos besoins, puis cliquez sur OK pour les enregistrer. Document par défaut Sélectionnez le type de document qui sera employé pour les pages que vous créez. Extension par défaut Indiquez l'extension de fichier que vous préférez (.htm ou .html) pour les nouvelles pages HTML que vous créerez. Remarque : cette option est désactivée pour d'autres types de fichier. Type de document par défaut (DDT) Sélectionnez l'une des définitions de type de document (DTD) XHTML qui permettent de rendre les pages compatibles XHTML. Par exemple, vous pouvez rendre un document HTML compatible XHTML en sélectionnant XHTML 1.0 transitionnel ou XHTML 1.0 Strict dans le menu déroulant. Codage par défaut Spécifie le codage à utiliser lorsque vous créez une page ou que vous ouvrez un document ne spécifiant aucun codage. Si vous sélectionnez Unicode (UTF 8) en tant que codage de document, le codage d'entité est superflu dans la mesure où UTF 8 permet de représenter de façon fiable tous les caractères. Si vous sélectionnez un autre codage de document, le codage d'entité peut être nécessaire pour représenter certains caractères. Pour plus d'informations sur les entités de caractères, voir www.w3.org/TR/REC-html40/sgml/entities.html. Si vous sélectionnez Unicode (UTF8) en tant que code par défaut, vous pouvez inclure une marque BOM (Byte Order Mark) dans le document en sélectionnant l'option Inclure une signature Unicode (BOM). Il s'agit d'une marque constituée de 2 à 4 octets placés au début d'un fichier texte identifiant un fichier comme étant au format Unicode et, dans ce cas, l'ordre des octets suivants. Le code UTF 8 ne présentant pas d'ordre octet, l'ajout d'une marque BOM UTF 8 est facultatif. Dans le cas de UTF 16 et UTF 32, cette marque est obligatoire. Formulaire de normalisation Unicode Activez l'une de ces options si vous sélectionnez Unicode (UTF 8) en tant que code par défaut. Il existe quatre Formulaires de normalisation Unicode. Le plus important est le Formulaire de normalisation Unicode C, car il est le plus utilisé dans le Modèle de caractères lié au World Wide Web, mais Adobe fournit également les trois autres Formulaires de normalisation Unicode. Afficher la boîte de dialogue Nouveau document si Ctrl+N Désactivez cette option (baptisée « Commande+N » sur Macintosh) pour appliquer automatiquement le type par défaut au nouveau document créé lorsque vous utilisez la touche de commande. Certains caractères Unicode semblent visuellement similaires mais peuvent être stockés de différentes manières dans le document. Par exemple, ë (e tréma) peut être représenté sous la forme d'un seul caractère, « e tréma » ou de deux caractères, « e Latin ordinaire » + « tréma ». Un caractère Unicode de combinaison est un caractère associé au caractère précédent, ce qui fait apparaître le tréma au-dessus du « e » Latin. Les deux formes donnent la même typographie visuelle, alors que chacune est enregistrée différemment dans le fichier. La normalisation est le processus consistant à s'assurer que tous les caractères pouvant être enregistrés sous différentes formes le sont tous sous la même forme. C'est-à-dire que tous les caractères « » d'un document sont enregistrés sous forme de « e tréma » unique ou de « e + tréma de combinaison », mais pas sous les deux formes dans un même document. Pour plus d'informations sur la Normalisation Unicode et les formulaires spécifiques pouvant être utilisés, consultez le site Web Unicode www.unicode.org/reports/tr15. Voir aussi « A propos du code XHTML généré par Dreamweaver » à la page 289 « Description de l'encodage de document » à la page 208 Définition de l'extension de fichier par défaut de nouveaux documents HTML Vous pouvez définir l'extension de fichier par défaut de documents HTML créés dans Dreamweaver. Par exemple, vous pouvez utiliser une extension .htm ou .html pour tous les nouveaux documents HTML. 1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh). Vous pouvez également cliquer sur le bouton Préférences dans la boîte de dialogue Nouveau document pour définir les nouvelles préférences liées au document en cours de création. 2 Cliquez sur la catégorie Nouveau document dans la liste de gauche. 3 Dans le menu déroulant Document par défaut, vérifiez que HTML est sélectionné. 4 Dans la zone de texte Extension par défaut, spécifiez l'extension de fichier que vous souhaitez utiliser pour les nouveaux documents HTML créés dans Dreamweaver. Sous Windows, vous pouvez spécifier les extensions suivantes : .html, .htm, .shtml, .shtm, .stm, .tpl, .lasso, .xhtml. Sous Macintosh, vous pouvez spécifier les extensions suivantes : .html, .htm, .shtml, .shtm, .tpl, .lasso, .xhtml, .ssi. Ouverture et modification de documents existants Vous pouvez ouvrir une page Web existante ou un document texte, même si celui-ci n'a pas été créé avec Dreamweaver, et le modifier en mode Code ou en mode Création. Si le document que vous ouvrez est un fichier Microsoft Word enregistré au format HTML, il est conseillé d'utiliser la commande Nettoyage du HTML Word pour supprimer les balises superflues ajoutées par Word au fichier HTML. Pour nettoyer un fichier HTML ou XHTML non généré par Microsoft Word, utilisez la commande Nettoyage du HTML. Vous pouvez également ouvrir des fichiers texte non HTML, comme des fichiers JavaScript, XML, feuilles de style en cascade (CSS) ou des fichiers texte enregistrés dans des traitements de texte ou des éditeurs de texte. 1 Choisissez Fichier > Ouvrir. Vous pouvez également utiliser le panneau Fichiers pour ouvrir les fichiers. 2 Recherchez et sélectionnez le fichier à ouvrir. Remarque : Si cette opération n'a pas encore été effectuée, il est conseillé d'organiser les fichiers que vous comptez ouvrir et modifier au sein d'un site Dreamweaver, au lieu de les ouvrir depuis un autre emplacement. 3 Cliquez sur Ouvrir. Le document s'ouvre dans la fenêtre de document. Par défaut, JavaScript, le texte et les feuilles de style en cascade (CSS) s'ouvrent en mode Code. Vous pouvez mettre à jour le document pendant que vous travaillez dans Dreamweaver, puis enregistrer les modifications dans le fichier. Voir aussi « Nettoyage du code » à la page 313 « Lancement d'un éditeur externe pour des fichiers multimédia » à la page 260 « Utilisation des fichiers depuis le panneau Fichiers » à la page 77 « Configuration et modification d'un dossier racine local » à la page 40 Nettoyage de fichiers HTML créés avec Microsoft Word Vous pouvez ouvrir des documents enregistrés par Microsoft Word en tant que fichiers HTML, puis utiliser la commande Nettoyer HTML Word pour supprimer le code HTML superflu généré par Word. La commande Nettoyer HTML Word est utilisable pour les documents enregistrés sous forme de fichiers HTML par Word 97 ou une version ultérieure. Le code que Dreamweaver supprime est principalement utilisé par Word pour mettre en forme et afficher les documents dans Word même, et n'est pas nécessaire dans un véritable fichier HTML. Conservez une copie de votre fichier Word original (.doc) comme sécurité, car il se peut que vous ne puissiez plus ouvrir ce document HTML dans Word après avoir appliqué la fonction Nettoyer HTML Word. Pour nettoyer un fichier HTML ou XHTML non généré par Microsoft Word, utilisez la commande Nettoyage du HTML. 1 Enregistrez votre document Microsoft Word au format HTML. Remarque : Sous Windows, fermez le fichier dans Word pour éviter une violation de partage. 2 Ouvrez le fichier HTML dans Dreamweaver. Pour afficher le code HTML généré par Word, activez le mode Code (Affichage > Code). 3 Sélectionnez Commandes > Nettoyer HTML Word. Remarque : Si Dreamweaver ne parvient pas à déterminer la version de Word qui a été utilisée pour enregistrer ce fichier, choisissez la version correcte dans le menu déroulant. 4 Activez (ou désactivez) les options de nettoyage. Les préférences que vous entrez sont sauvegardées comme paramètres de nettoyage par défaut. Dreamweaver applique les paramètres de nettoyage au document HTML et un journal contenant une liste des modifications apportées s'affiche (sauf si cette option a été désélectionnée dans la boîte de dialogue). Supprimer les marqueurs spécifiques à Word Supprime tout le code HTML spécifique à Word, y compris le code XML des balisesHTML, les métadonnées personnalisées Word et les balises de liens figurant dans l'en-tête du document, les balises XML Word, les balises conditionnelles et leur contenu, ainsi que les paragraphes vides et les marges des styles. Vous pouvez sélectionner chacune de ces options individuellement à partir de l'onglet Détaillé. Nettoyer CSS Supprime de l'en-tête toutes les feuilles de style spécifiques à Word, y compris les styles CSS incorporés si possible (lorsque le style parent possède les mêmes propriétés), les attributs de style commençant par « mso », les déclarations de styles non CSS, les attributs de style CSS des tableaux et toutes les définitions de style non utilisées. Vous pouvez personnaliser cette option encore davantage à partir de l'onglet Détaillé. Nettoyer les balises Supprime les balises HTML, en convertissant le corps du texte par défaut en HTML de taille 2. Corriger les imbrications de balises non valides Supprime les balises de définition des polices de caractères insérées par Word en dehors des balises de paragraphe et d'en-tête (au niveau du bloc). Définir couleur d'arrière-plan Permet d'indiquer une valeur hexadécimale pour définir la couleur d'arrière-plan de votre document. Si vous ne définissez pas la couleur d'arrière-plan, votre document HTML Word s'affichera sur fond gris. La valeur hexadécimale par défaut est le blanc. Appliquer le format source Permet d'appliquer au document les options de formatage que vous avez indiquées dans les préférences de format HTML et dans le fichier SourceFormat.txt. Afficher le journal à la fin Affiche un message d'avertissement détaillant les modifications apportées au document dès que le nettoyage est terminé. 5 Cliquez sur OK ou sur l'onglet Détaillé pour personnaliser davantage les options Supprimer les marqueurs spécifiques à Word et Nettoyer CSS, puis cliquez sur OK. Voir aussi « Nettoyage du code » à la page 313 « Importation de documents Microsoft Office (Windows uniquement) » à la page 225 Gestion des fichiers et des dossiers A propos de la gestion des fichiers et des dossiers Dreamweaver possède un panneau Fichiers qui permet de gérer et de transférer des fichiers vers un serveur distant et à partir de celui-ci. Lorsque vous transférez des fichiers entre le site local et le site distant, les structures de fichiers et de dossiers parallèles sur les deux sites sont préservées. Lors du transfert de fichiers entre les sites, Dreamweaver crée les dossiers nécessaires s'ils n'existent pas encore sur l'un des sites. Vous pouvez également synchroniser les fichiers entre le site local et le site distant. Dans ce cas, Dreamweaver copie les fichiers requis dans les deux sens et supprime, le cas échéant, les fichiers inutiles. Utilisation du panneau Fichiers Le panneau Fichiers vous permet d'afficher des fichiers et des dossiers (qu'ils soient ou non associés à un site Dreamweaver) et d'effectuer des opérations courantes de maintenance, comme l'ouverture et le déplacement de fichiers. Remarque : Dans les versions précédentes de Dreamweaver, le panneau Fichiers s'appelait le panneau Site. Vous pouvez déplacer le panneau Fichiers selon vos besoins et définir ses préférences. Utilisez ce panneau pour effectuer les tâches suivantes : Accès aux sites, à un serveur et aux disques locaux • Affichage de fichiers et de dossiers Gestion de fichiers et de dossiers dans le panneau Fichiers Utilisation d'une carte d'arborescence de votre site Pour les sites Dreamweaver, utilisez les options suivantes pour afficher ou transférer des fichiers : Afficher: Cafe Townsend PHP A B C D E F G H I J K L A. Vue Fichiers du site B. Vue Serveur d'évaluation C. Vue Carte du site D. Menu contextuel Site E. Connecter ou Déconnecter F. Actualiser G. Placer le(s) fichier(s) H. Acquérir le(s) fichier(s) I. Extraire le(s) fichier(s) J. Archiver K. Synchroniser L. Développer/Réduire Remarque : Les boutons Fichiers du site, les modes Serveur d'évaluation, Carte du site et le bouton Synchroniser n'apparaissent que dans le panneau Fichiers développé. Menu contextuel Site Permet de sélectionner un site Dreamweaver et d'afficher ses fichiers. Il permet également d'accéder à tous les fichiers situés sur votre disque local, tout comme l'Explorateur Windows (Windows) ou le Sélecteur (Macintosh). Vue Fichiers du site Affiche la structure des fichiers présents sur le site local et le site distant dans les volets du panneau Fichiers. Le site apparaissant dans le volet gauche et droit dépend d'un paramètre de préférence. La vue Fichiers du site correspond au mode d'affichage par défaut du panneau Fichiers. Vue Serveur d'évaluation Affiche la structure des répertoires du serveur d'évaluation et du site local. Vue Carte du site Ouvre une carte graphique du site basée sur la relation entre les documents. Maintenez ce bouton enfoncé pour choisir entre Carte seulement ou Carte et Fichiers dans le menu contextuel. Le menu contextuel courant énumère vos sites Dreamweaver et les serveurs auxquels vous vous êtes connecté, et permet également d'accéder à vos disques locaux et votre bureau. Connector ou Déconnecter (FTP, RDS, protocole WebDAV et Microsoft Visual SourceSafe) Permet d'établir ou de mettre fin à la connexion avec le site distant. Par défaut, Dreamweaver se déconnecte du site distant après 30 minutes d'inactivité (FTP uniquement). Pour modifier cette durée, choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh), puis sélectionnez la catégorie Site dans la liste de gauche. Actualiser Met à jour les répertoires du site local et du site distant. Utilisez ce bouton pour déclencher manuellement une mise à jour des répertoires si vous avez désactivé les options Actualiser automatiquement la liste des fichiers locaux ou Actualiser automatiquement la liste des fichiers distants dans la boîte de dialogue Définition du site. Acquérir le(s) fichier(s) Copie les fichiers sélectionnés depuis le site distant vers le site local (en écrasant, le cas échéant, les copies locales existantes des fichiers). Si l'option Activer l'archivage et l'extraction de fichier est activée, les copies locales sont en lecture seule ; ces fichiers restent accessibles, sur le site distant, à d'autres membres de l'équipe qui peuvent les extraire. Si l'option Activer l'archivage et l'extraction de fichier est désactivée, les copies du fichier seront accessibles en lecture et écriture. Remarque : Les fichiers que Dreamweaver copie sur le site distant ou le serveur d'évaluation sont ceux sélectionnés dans le volet actif du panneau Fichiers. Si le volet actif est Site distant, ce sont les fichiers sélectionnés sur le serveur distant ou le serveur d'évaluation qui sont copiés ; si le volet actif est Fichiers locaux, Dreamweaver copie la version présente sur le serveur distant ou le serveur d'évaluation des fichiers sélectionnés sur le site local. Placer le(s) fichier(s) Copie les fichiers sélectionnés depuis le site local vers le site distant. Remarque : Les fichiers que Dreamweaver copie sur le site distant ou le serveur d'évaluation sont ceux sélectionnés dans le volet actif du panneau Fichiers. Si le volet actif est Fichiers locaux, ce sont les fichiers sélectionnés sur le site local qui sont copiés vers le site distant ou le serveur d'évaluation ; si le volet actif est Site distant, Dreamweaver copie la version présente sur le site local des fichiers sélectionnés sur le site distant. Si vous placez un fichier qui n'existe pas encore sur le site distant et que l'option Activer l'archivage et l'extraction de fichier est activée, le fichier est ajouté au site distant et reçoit l'état « extrait ». Si vous ne voulez pas que le fichier ajouté soit doté de cet état, cliquez sur le bouton Archiver. Extraire le(s) fichier(s) Transfère une copie du fichier du serveur distant vers le site local (en écrasant la copie locale de ce fichier, le cas échéant) et donne au fichier l'état extrait sur le serveur. Ce bouton n'est pas disponible si l'option Activer l'archivage et l'extraction de fichier est désactivée pour le site en cours dans la boîte de dialogue Définition du site. Archiver Transfère une copie du fichier local vers le serveur distant, de manière à ce qu'il puisse être modifié par d'autres membres de l'équipe. Le fichier local passe alors en lecture seule. Cette option n'est pas disponible si l'option Activer l'archivage et l'extraction de fichier est désactivée pour le site sélectionné dans la boîte de dialogue Définition du site. Synchroniser Synchronise les fichiers entre les dossiers locaux et distants. Le bouton Développer/Réduire développe ou réduit le panneau Fichiers afin d'afficher un ou deux volets. Voir aussi « Présentation du panneau Fichiers » à la page 21 « Configuration d'un dossier distant » à la page 41 « Archivage et extraction de fichiers dans un dossier distant » à la page 89 « Placement de fichiers sur un serveur distant » à la page 86 « Acquisition de fichiers depuis un serveur distant » à la page 85 « Synchronisation de fichiers » à la page 91 Affichage de fichiers et de dossiers Le panneau Fichiers vous permet d'ouvrir des fichiers et des dossiers, qu'ils soient ou non associés à un site Dreamweaver. Lorsque vous affichez des sites, des fichiers ou des dossiers dans le panneau Fichiers, vous pouvez modifier la taille de la zone d'affichage, et, pour les sites Dreamweaver, vous pouvez développer ou réduire le panneau Fichiers. Pour les sites Dreamweaver, il est également possible de personnaliser le panneau Fichiers en modifiant la vue (site local ou distant) qui s'affiche par défaut dans le panneau réduit. Vous pouvez également basculer l'affichage du contenu dans le panneau Fichiers développé, en utilisant l'option Toujours afficher. Voir aussi « Configuration d'un dossier distant » à la page 41 « Configuration d'un serveur d'évaluation » à la page 45 « Utilisation d'une carte d'arborescence de votre site » à la page 49 Ouverture ou fermeture du panneau Fichiers ◆ Choisissez Fenêtre > Fichiers. Développement ou réduction du panneau Fichiers (sites Dreamweaver uniquement) Dans le panneau Fichiers (Fenêtre > Fichiers), cliquez sur le bouton Développer/Réduire de la barre d'outils. Remarque : Si vous cliquez sur le bouton Développer/Réduire pour développer le panneau alors qu'il est ancré, celui-ci s'agrandit et vous empêche de travailler dans la fenêtre de document. Pour revenir à la fenêtre de document, cliquez de nouveau sur le bouton Développer/Réduire afin de réduire le panneau. Si vous cliquez sur le bouton Développer/Réduire pour développer le panneau alors qu'il n'est pas ancré, vous pouvez poursuivre votre travail dans la fenêtre de document. Avant de pouvoir ancrer de nouveau le panneau, vous devez le réduire. Dans sa forme réduite, le panneau Fichiers affiche le contenu du site local, du site distant ou du serveur d'évaluation sous la forme d'une liste de fichiers. Sous sa forme développée, le panneau affiche le site local et soit le site distant, soit le serveur d'évaluation. Le panneau Fichiers peut également afficher une carte d'arborescence du site local. Modification de la taille de la zone d'affichage dans le panneau Fichiers développé Effectuez l'une des opérations suivantes lorsque le panneau Fichiers (Fenêtre > Fichiers) est développé : - Faites glisser la barre séparant les volets gauche et droit pour modifier la taille de la zone d'affichage du volet souhaité. - Utilisez les barres de défilement situées dans la partie inférieure du panneau Fichiers pour faire défiler le contenu des volets. - Dans la carte du site, faites glisser la flèche au-dessus d'un fichier pour modifier l'espace entre les fichiers. Modification de l'affichage du site dans le panneau Fichiers (sites Dreamweaver uniquement) ❖ Procédez comme suit, au choix : - Dans le panneau Fichiers (Fenêtre > Fichiers) affiché sous sa forme réduite, sélectionnez Affichage local, Affichage distant, Serveur d'évaluation ou Affichage de la carte dans le menu contextuel (où la vue actuelle s'affiche). Remarque : L'option Affichage local apparaît par défaut dans le menu Vue du site. Fichiers Actifs WebApp Site - WebApp (C:\Documents\Assets Affichage local Affichage local Affichage distant Serveur d'évaluation Affichage de la carte - Dans le panneau Fichiers (Fenêtre > Fichiers) affiché sous sa forme développée, cliquez sur le bouton Fichiers du site (pour le site distant), Serveur d'évaluation ou Carte du site dans la barre d'outils. A. Fichiers du site B. Serveur d'évaluation C. Plan du site - Si vous cliquez sur le bouton Carte du site, vous avez le choix entre afficher la carte du site avec les fichiers du site et n'afficher que la carte du site. Remarque : Avant de pouvoir afficher un site distant ou un serveur d'évaluation, vous devez le configurer. Avant de pouvoir afficher une carte du site, vous devez avoir configuré une page d'accueil. Affichage de fichiers en dehors d'un site Dreamweaver - Le menu Site permet de naviguer sur votre ordinateur comme vous le feriez à l'aide de l'Explorateur (Windows) ou du Sélecteur (Macintosh). Utilisation des fichiers depuis le panneau Fichiers Vous pouvez ouvrir ou renommer les fichiers ; ajouter, déplacer ou supprimer des fichiers ; ou encore actualiser le panneau Fichiers après avoir modifié les fichiers. Pour les sites Dreamweaver, vous pouvez également identifier les fichiers (sur le site local ou distant) mis à jour depuis leur dernier transfert. Voir aussi « Synchronisation de fichiers » à la page 91 « Accès aux sites, à un serveur et aux disques locaux » à la page 80 Ouverture d'un fichier 1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez un site, un serveur ou un lecteur dans le menu contextuel (dans lequel le site, le serveur ou le lecteur s'affiche). 2 Recherchez et sélectionnez le fichier à ouvrir. 3 Procédez comme suit, au choix : • Double-cliquez sur l'icône du fichier. - Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur l'icône du fichier, puis choisissez Ouvrir. Le fichier s'ouvre dans la fenêtre de document de Dreamweaver. Création d'un fichier ou d'un dossier 1 Sélectionnez un fichier ou un dossier dans le panneau Fichiers (Fenêtre > Fichiers). Dreamweaver crée le fichier ou le dossier dans le dossier sélectionné actuellement ou dans le même dossier que celui dans lequel le fichier sélectionné se trouve. 2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis sélectionnez Nouveau fichier ou Nouveau dossier. 3 Saisissez le nom du nouveau fichier ou dossier. 4 Appuyez sur la touche Entrée (Windows) ou Retour (Macintosh). Suppression d'un fichier ou d'un dossier 1 Sélectionnez le fichier à supprimer dans le panneau Fichiers (Fenêtre > Fichiers). 2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis choisissez Supprimer. Modification du nom d'un fichier ou d'un dossier 1 Sélectionnez le fichier à renommer dans le panneau Fichiers (Fenêtre > Fichiers). 2 Procédez de l'une des manières suivantes pour activer le nom du fichier ou du dossier : Cliquez sur le nom du fichier, attendez, puis cliquez de nouveau. Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur l'icône du fichier, puis choisissez Renommer. 3 Saisissez le nouveau nom à la place du nom existant. 4 Appuyez sur la touche Entrée (Windows) ou Retour (Macintosh). Déplacement d'un fichier ou d'un dossier 1 Sélectionnez le fichier à déplacer dans le panneau Fichiers (Fenêtre > Fichiers). 2 Procédez comme suit, au choix : Copiez le fichier ou le dossier, puis collez-le à son nouvel emplacement. Faites glisser le fichier ou le dossier vers son nouvel emplacement. 3 Actualisez le panneau Fichiers pour afficher le fichier ou le dossier à son nouvel emplacement. Actualisation du panneau Actifs ❖ Procédez comme suit, au choix : Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur un fichier ou sur un dossier, puis choisissez Actualiser. (Sites Dreamweaver uniquement) Cliquez sur le bouton Actualiser dans la barre d'outils du panneau Fichiers (cette option actualise les deux panneaux). Remarque : Dreamweaver actualise le panneau Fichiers lorsque vous apportez des modifications dans une autre application, puis revenez à Dreamweaver. Recherche de fichiers dans votre site Dreamweaver La fonction de recherche de Dreamweaver permet de trouver facilement les fichiers sélectionnés, ouverts, extraits ou modifiés récemment dans votre site. Vous pouvez également rechercher les fichiers les plus récents dans votre site local ou distant. Voir aussi « Utilisation des rapports pour tester votre site » à la page 102 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. Remarque : Si le fichier ouvert dans la fenêtre de document n'est pas associé au site actuel affiché dans le panneau Fichiers, Dreamweaver tente de déterminer à quel site Dreamweaver le fichier appartient. S'il ne correspond qu'à un seul site local, Dreamweaver ouvre ce site dans le panneau Fichiers, puis met le fichier en surbrillance. Recherche et sélection des fichiers extraits dans un site Dreamweaver Dans le panneau Fichiers (Fenêtre > Fichiers) affiché sous sa forme réduite, cliquez sur le menu Options dans le coin supérieur droit du panneau Fichiers, puis sélectionnez Modifier > Sélectionner les fichiers extraits. Dreamweaver sélectionne les fichiers dans le panneau Fichiers. Recherche d'un fichier sélectionné dans votre site local ou distant 1 Sélectionnez le fichier depuis l'affichage local ou distant du panneau Fichiers (Fenêtre > Fichiers). 2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis sélectionnez Retrouver sur le site local ou Retrouver sur le site distant (selon l'emplacement où le fichier a été sélectionné). Dreamweaver sélectionne les fichiers dans le panneau Fichiers. Recherche et sélection des fichiers qui sont plus récents sur le site local que sur le site distant Dans le panneau Fichiers (Fenêtre > Fichiers) affiché sous sa forme réduite, cliquez sur le menu Options dans le coin supérieur droit du panneau Fichiers, puis sélectionnez Modifier > Sélectionner Local plus récent. Dreamweaver sélectionne les fichiers dans le panneau Fichiers. Recherche et sélection des fichiers qui sont plus récents sur le site distant que sur le site local Dans le panneau Fichiers (Fenêtre > Fichiers) affiché sous sa forme réduite, cliquez sur le menu Options dans le coin supérieur droit du panneau Fichiers, puis sélectionnez Edition > Sélectionner distants plus récents. Dreamweaver sélectionne les fichiers dans le panneau Fichiers. Recherche des fichiers récemment modifiés sur votre site 1 Dans le panneau Fichiers (Fenêtre > Fichiers) affiché sous sa forme réduite, cliquez sur le menu Options dans le coin supérieur droit du panneau Fichiers, puis sélectionnez Modifier > Sélectionner Modifiés récemment. 2 Procédez de l'une des manières suivantes pour indiquer les dates à prendre en compte dans le rapport : - Pour que le rapport prenne en compte l'ensemble des fichiers modifiés ces derniers jours, activez l'option Fichiers créés ou modifiés dans le dernier, puis entrez une valeur dans la zone de texte. - Pour que le rapport prenne en compte l'ensemble des fichiers modifiés durant une période donnée, cliquez sur le bouton radio Fichiers créés ou modifiés entre, puis spécifiez une durée. 3 (Facultatif) Entrer un nom d'utilisateur dans la zone Modifié par pour limiter votre recherche aux fichiers modifiés par un utilisateur donné au cours de la période indiquée. Remarque : Cette option est uniquement disponible pour les sites Contribute. 4 Indiquez l'emplacement où vous souhaitez afficher les fichiers compris dans le rapport à l'aide des boutons radio, si nécessaire : Machine locale si le site ne comporte que des pages statiques. Serveur d'évaluation si le site comporte des pages dynamiques. Remarque : Vous devez avoir défini un serveur d'évaluation dans la boîte de dialogue Définition du site (XREF) pour utiliser cette option. Si cette opération n'a pas été effectuée et qu'aucun préfixe URL n'a été entré pour ce serveur ou si vous exécutez le rapport pour plus d'un site, cette option n'est pas disponible. Autre emplacement si vous souhaitez entrer un chemin dans la zone de texte. 5 Cliquez sur OK pour enregistrer vos paramètres. Dreamweaver sélectionne les fichiers modifiés durant la période sélectionnée dans le panneau Fichiers. Identification et suppression des fichiers non utilisés Vous pouvez identifier et supprimer les fichiers qui ne sont plus utilisés par les autres fichiers de votre site. 1 Choisissez Site > Vérifier tous les liens du site. Dreamweaver vérifie tous les liens de votre site et affiche les liens rompus dans le panneau Résultats. 2 Sélectionnez Fichiers orphelins dans le menu du panneau Vérificateur de lien. Dreamweaver affiche l'ensemble des fichiers sans liens entrants. Ceci signifie qu'aucun des fichiers de votre site n'est lié à ces fichiers. 3 Sélectionnez le fichier à supprimer et appuyez sur Supprimer (Windows) ou Command+Supprimer (Macintosh). Important : Bien qu'aucun autre fichier du site ne soit lié à ces fichiers, une partie des fichiers de la liste peuvent être liés à d'autres fichiers. Procédez avec prudence lors de la suppression de fichiers. Voir aussi « Activation et désactivation du voilage d'un site » à la page 96 Accès aux sites, à un serveur et aux disques locaux Vous pouvez ouvrir, modifier et enregistrer les fichiers et dossiers de vos sites Dreamweaver, comme les fichiers ou dossiers qui ne font pas partie d'un site Dreamweaver. Outre les sites Dreamweaver, vous pouvez accéder à un serveur, à un disque local ou à votre bureau. Avant de pouvoir accéder à un serveur distant, vous devez configurer Dreamweaver de façon à ce qu'il puisse fonctionner avec ce serveur. Remarque : La meilleure façon de gérer des fichiers est de créer un site Dreamweaver. Voir aussi « Configuration et modification d'un dossier racine local » à la page 40 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). Fichiers Actifs WebApp Bureau Disquette 3½ (A:) Disque local (C:) Lecteur CD (D:) ftp://Serveur sans n MySite WebApp Gérer les sites... Ouverture d'un dossier sur un serveur FTP ou RDS distant 1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez un nom de serveur dans le menu (dans lequel le site, le serveur ou le disque dur en cours d'utilisation s'affiche). Fichiers Actifs WebApp Bureau Disquette 3½ (A:) Disque local (C:) Lecteur CD (D:) ftp://Serveur sans n WebApp X Gérer les sites... Affichage lc vos de programas change.cfm uChange.cfm mment.cfm Remarque : Les noms des serveurs que vous avez configurés pour fonctionner avec Dreamweaver apparaissent. 2 Naviguez vers ces fichiers et modifiez-les comme vous le faites habituellement. Accès à un disque local ou à votre bureau 1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez Bureau, disque local ou disque compact dans le menu (dans lequel le site, le serveur ou le disque dur s'affiche). 2 Recherchez le fichier de votre choix, puis effectuez l'une des opérations suivantes : Ouverture de fichiers dans Dreamweaver ou dans une autre application Renommer des fichiers Copier des fichiers Supprimer des fichiers Faire glisser des fichiers Lorsque vous faites glisser un fichier d'un site Dreamweaver à un autre site ou à un dossier non lié à un site Dreamweaver, Dreamweaver copie le fichier, puis l'ajoute à l'emplacement où vous le déposez. Si vous faites glisser un fichier et le déposez au sein du même site Dreamweaver, Dreamweaver déplace le fichier à l'emplacement où vous le déposez. Lorsque vous faites glisser un fichier qui n'est associé à aucun site Dreamweaver vers un dossier qui n'est pas non plus associé à un site Dreamweaver, Dreamweaver déplace le fichier à l'emplacement où vous le déposez. Remarque : Pour que Dreamweaver déplace un fichier au lieu de le copier, maintenez la touche Maj (Windows) ou Commande (Macintosh) enfoncée pendant que vous faites glisser et déposez le fichier. Pour copier un fichier que Dreamweaver déplacerait par défaut, maintenez la touche Ctrl (Windows) ou Option (Macintosh) enfoncée pendant que vous faites glisser et déposez le fichier. Définition des préférences de site pour le transfert de fichiers Sélectionnez vos préférences pour le contrôle des fonctions de transfert de fichiers dans le panneau Fichiers. 1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh). 2 Dans la boîte de dialogue Préférences, sélectionnez la catégorie Site dans la liste de gauche. 3 Définissez les options, puis cliquez sur OK. Toujours afficher Indique le site (local ou distant) qui doit toujours être affiché ainsi que le volet (gauche ou droit) du panneau Fichiers dans lequel doivent être présentés les fichiers locaux et distants. Par défaut, le site local apparaît toujours dans le volet droit. Le volet qui n'a pas été choisi (celui de gauche par défaut) sera le volet interchangeable : il pourra alors afficher soit la carte du site, soit les fichiers de l'autre site (le site distant par défaut). Fichiers dépendants Affiche une invite proposant de transférer les fichiers dépendants (images, feuilles de style externes et autres fichiers référencés par les fichiers HTML) qui doivent être chargés par le navigateur en même temps que le fichier HTML. Par défaut, les options Invite lors de Acquérir/Extraire et Invite lors de Placer/Archiver sont toutes deux activées. D'une manière générale, il est conseillé de télécharger les fichiers dépendants lorsque le fichier extrait est un nouveau fichier, mais c'est inutile si les versions les plus récentes des fichiers dépendants sont déjà présentes sur le disque local. Cela s'applique également lors du transfert et de l'archivage de fichiers : il n'est pas nécessaire si des copies mises à jour sont déjà présentes dans la destination. Si vous désactivez ces options, vos fichiers dépendants ne sont pas transférés. Ainsi, pour forcer l'affichage la boîte de dialogue Fichiers dépendants même lorsque ces options sont désélectionnées, maintenez la touche Alt (Windows) ou Option (Macintosh) enfoncée tout en choisissant Acquérir, Placer, Archiver ou Extraire. Connexion FTP Détermine si la connexion avec le site distant doit être interrompue après le délai d'inactivité spécifié. Délai FTP Indique le temps, exprimé en secondes, pendant lequel Dreamweaver tente d'établir une connexion avec le serveur distant. S'il n'y a toujours pas de réponse à l'issue du délai indiqué, Dreamweaver affiche une boîte de dialogue pour vous en avertir. Options de transfert FTP Détermine si Dreamweaver sélectionne l'option par défaut après un nombre de secondes spécifié, lorsqu'une boîte de dialogue apparaît lors du transfert d'un fichier et que l'utilisateur ne fournit aucune réponse. Hôte du pare-feu Spécifie l'adresse du serveur proxy par lequel vous vous connectez aux serveurs externes si vous vous trouvez derrière un pare-feu. Dans le cas contraire, laissez ce champ vierge. Sélectionnez l'option Utiliser un pare-feu de la boîte de dialogue Définition du site si vous vous connectez au serveur distant tout en étant protégé par un pare-feu Port du pare-feu Spécifie le port de votre pare-feu par lequel vous passez pour vous connecter au serveur distant. Si vous vous connectez par l'intermédiaire d'un port autre que 21 (port par défaut pour FTP), tapez son numéro ici. Options de placement : Enregistrer les fichiers avant de les placer Indique que les fichiers non enregistrés sont automatiquement enregistrés avant d'être placés sur le site distant. Gérer les sites Ouvre la boîte de dialogue Gérer les sites, dans laquelle vous pouvez créer un site ou modifier un site existant. Vous pouvez définir si les types de fichiers transférés doivent l'être au format ASCII (texte) ou binaire, et ce en personnalisant le fichier FTPExtensionMap.txt situé dans le dossier Dreamweaver/Configuration (sur Macintosh, il s'agit du fichier FTPExtensionMapMac.txt). Pour plus d'informations, voir Extension de Dreamweaver. Voir aussi « Configuration d'un dossier distant » à la page 41 Personnalisation des détails de fichiers et de dossiers affichés dans la forme développée du panneau Fichiers Lorsqu'un site Dreamweaver est affiché dans le panneau Fichiers (en mode développé), les informations liées aux fichiers et dossiers sont affichées dans des colonnes. Vous pouvez, par exemple, consulter le type du fichier ou la date de sa dernière modification. Vous pouvez personnaliser les colonnes en procédant de l'une des façons suivantes (certaines opérations sont disponibles uniquement pour les colonnes que vous ajoutez, et non pas pour les colonnes par défaut) : Retrier ou réaligner les colonnes Ajouter des colonnes (jusqu'à 10 colonnes maximum) Masquer les colonnes (sauf la colonne des noms de fichiers) Définir les colonnes devant être partagées entre tous les utilisateurs connectés à un site Supprimer les colonnes (colonnes personnalisées uniquement) Renommer les colonnes (colonnes personnalisées uniquement) Associer des colonnes à une Design Note (colonnes personnalisées uniquement) Modification de l'ordre des colonnes ✿ Sélectionnez le nom d'une colonne, puis cliquez sur le bouton flèche vers le haut ou vers le bas afin de changer la position de la colonne sélectionnée. Remarque : Vous pouvez changer l'ordre de toutes les colonnes, sauf la colonne Nom, qui reste toujours en première position. Ajout, suppression ou modification de colonnes 1 Choisissez Site > Gérer les sites. 2 Sélectionnez un site, puis cliquez sur Modifier. 3 Sélectionnez Colonnes en mode Fichier dans la liste de catégories, à gauche. 4 Sélectionnez une colonne, puis cliquez sur le bouton Plus (+) pour l'ajouter ou sur le bouton Moins (−) pour la supprimer. Remarque : Comme la colonne est immédiatement supprimée sans qu'il vous soit demandé de confirmation, soyez certain de réellement vouloir effectuer cette opération avant de cliquer sur le bouton Moins (–). 5 Dans la zone Nom de colonne, indiquez le nom de votre colonne. 6 Choisissez une valeur dans le menu Associer à Design Note ou indiquez-en une. Remarque : Vous devez associer la nouvelle colonne à une Design Note afin que des données s'affichent dans le panneau Fichiers. 7 Choisissez une option d'alignement pour déterminer la façon dont le texte doit être aligné dans la colonne. 8 Activez ou désactivez l'option Afficher afin d'afficher et de masquer respectivement la colonne. 9 Activez ou désactivez l'option Partager avec tous les utilisateurs de ce site afin que la colonne soit accessible ou non à tous les utilisateurs connectés au site distant. Tri en fonction d'une colonne dans le panneau Fichiers Pour trier les listes, cliquez sur l'en-tête de la colonne en fonction de laquelle vous souhaitez effectuer le tri. Si vous cliquez plusieurs fois sur un même en-tête de colonne, l'ordre dans lequel Dreamweaver trie la colonne est inversé (ordre croissant ou décroissant). Acquisition et placement de fichiers depuis ou vers votre serveur Transfert de fichiers et fichiers dépendants Si vous travaillez au sein d'un groupe, vous pouvez utiliser le système d'extraction et d'archivage pour transférer des fichiers entre le serveur distant et l'ordinateur local. Si vous êtes la seule personne à travailler sur le site distant, vous pouvez utiliser les commandes Acquérir et Placer pour transférer des fichiers sans avoir à les archiver ou à les extraire. Lorsque vous transférez un document entre un dossier local et distant à l'aide du panneau Fichiers, vous pouvez transférer les fichiers dépendants de ce document. Les fichiers dépendants sont des images, des feuilles de style externes et d'autres fichiers référencés dans votre document qu'un navigateur charge avec le document. Remarque : D'une manière générale, il est conseillé de télécharger les fichiers dépendants lorsque le fichier extrait est un nouveau fichier, mais c'est inutile si les versions les plus récentes des fichiers dépendants sont déjà présentes sur le disque local. Cela s'applique également lors du transfert et de l'archivage de fichiers : il n'est pas nécessaire si des copies mises à jour sont déjà présentes sur le site distant. Les éléments de bibliothèque sont traités comme des fichiers dépendants. Certains serveurs génèrent des erreurs lors du placement d'éléments de bibliothèque. Néanmoins, vous pouvez voiler ces fichiers pour qu'ils ne soient pas transférés. Voir aussi « Archivage et extraction de fichiers » à la page 88 « Activation et désactivation du voilage d'un site » à la page 96 A propos des transferts de fichiers en arrière-plan Vous pouvez effectuer d'autres activités non liées au serveur lors de l'acquisition ou du placement de fichiers. Le transfert de fichiers d'arrière-plan fonctionne pour tous les protocoles de transfert pris en charge par Dreamweaver : FTP, SFTP, LAN, WebDAV, Microsoft Visual SourceSafe et RDS. Les activités non liées au serveur comprennent, entre autres, les opérations suivantes: taper, modifier des feuilles de style externes, générer des rapports à l'échelle du site et créer de nouveaux sites. Les activités côté serveur que Dreamweaver ne peut pas effectuer pendant les transferts de fichiers incluent les tâches suivantes : placer/acquérir/archiver/extraire des fichiers ; annuler l'extraction ; créer une connexion à une base de données ; • Lier les données dynamiques prévisualiser des données dynamiques ; insérer un service Web ; supprimer des fichiers ou des dossiers distants ; prévisualiser dans le navigateur sur un serveur d'évaluation ; enregistrer un fichier sur un serveur distant ; insérer une image d'un serveur distant ; ouvrir un fichier d'un serveur distant ; placer automatiquement des fichiers lors de l'enregistrement ; faire glisser des fichiers vers le site distant ; couper, copier ou coller des fichiers sur le site distant ; • actualiser l'affichage distant. Acquisition de fichiers depuis un serveur distant La commande Acquérir permet de copier les fichiers du site distant sur le site local. Vous pouvez utiliser le panneau Fichiers ou la fenêtre du document pour acquérir des fichiers. Dreamweaver crée un journal de suivi des activités de fichiers au cours du transfert ; vous pouvez le consulter et l'enregistrer. Remarque : Vous ne pouvez pas désactiver le transfert de fichiers en arrière-plan. Si le journal des détails est ouvert dans la fenêtre de transfert de fichiers en arrière-plan, vous pouvez le fermer pour améliorer les performances. Dreamweaver enregistre également l'activité de tous les transferts de fichiers en FTP. Si une erreur se produit lors du transfert d'un fichier en FTP, le journal du site FTP peut vous aider à déterminer le problème. Voir aussi « Archivage et extraction de fichiers » à la page 88 « Synchronisation de fichiers » à la page 91 Acquisition des fichiers depuis un serveur distant via le panneau Fichiers 1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez les fichiers que vous voulez télécharger. Les fichiers sont généralement sélectionnés dans l'affichage distant, mais il est également possible de les sélectionner dans l'affichage local. Si l'affichage distant est actif, Dreamweaver copie les fichiers sélectionnés sur le site local ; si l'affichage local est actif, Dreamweaver copie la version distante des fichiers locaux sélectionnés sur le site local. Remarque : Pour n'acquérir que les fichiers dont la version distante est plus récente que la version locale, utilisez la commande Synchroniser. 2 Procédez de l'une des manières suivantes pour acquérir un fichier : Cliquez sur le bouton Acquérir dans la barre d'outils du panneau Fichiers. Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur le fichier dans le panneau Fichiers, puis sélectionnez Acquérir dans le menu contextuel. 3 Cliquez sur Oui dans la boîte de dialogue Fichiers dépendants si vous souhaitez télécharger les fichiers dépendants. Si vous disposez déjà de copies locales des fichiers dépendants, cliquez sur Non. L'option par défaut est de ne pas télécharger les fichiers indépendants. Vous pouvez définir cette option en sélectionnant Edition > Préférences > Site. Dreamweaver télécharge les fichiers sélectionnés comme suit : Si vous utilisez le système d'archivage et d'extraction, l'obtention d'un fichier consistera à transférer une copie locale accessible en lecture seule. Le fichier reste disponible sur le site distant ou sur le serveur d'évaluation et peut être extrait par d'autres membres de l'équipe. Si vous n'utilisez pas le système d'archivage et d'extraction, l'obtention d'un fichier consistera à transférer une copie accessible en lecture et écriture. Remarque : Si vous travaillez en équipe et que d'autres personnes sont susceptibles de travailler sur les mêmes fichiers, ne désactivez pas l'option Activer l'archivage et l'extraction de fichier. De plus, si d'autres personnes utilisent le système d'extraction et d'archivage sur le site, vous devez l'utiliser également. Pour interrompre à tout moment le transfert de fichier, cliquez sur Annuler dans la boîte de dialogue d'état. Acquisition des fichiers depuis un serveur distant à l'aide de la fenêtre du document 1 Assurez-vous que le document est actif dans la fenêtre du document. 2 Procédez de l'une des manières suivantes pour acquérir un fichier : - Choisissez Site > Acquérir. - Cliquez sur l'icône Gestion des fichiers dans la barre d'outils de la fenêtre du document, puis sélectionnez Acquérir dans le menu. Remarque : Si le fichier actuel n'est pas associé au site sélectionné dans le panneau Fichiers, Dreamweaver tente de déterminer à quel site défini localement le fichier actuel appartient. Si ce fichier courant n'appartient qu'à un seul site local, Dreamweaver ouvre ce site, puis effectue l'opération d'acquisition. Affichage du journal FTP ❖ Cliquez sur le menu Options dans le coin supérieur droit du panneau Fichiers, puis choisissez Affichage > Journal FTP du site. Placement de fichiers sur un serveur distant Vous pouvez placer des fichiers du site local vers le site distant, dans la plupart des cas sans changer l'état d'extraction du fichier. Il existe deux types de circonstances dans lesquels il est préférable d'utiliser la commande Placer plutôt que la commande Archiver : Lorsque vous ne travaillez pas en équipe et que vous n'utilisez pas le système d'archivage et d'extraction. Lorsque vous souhaitez placer la version actuelle du fichier sur le serveur, mais que vous allez continuer à y apporter des modifications. Remarque : Si vous placez un fichier qui n'existait pas encore sur le site distant et que vous utilisez le système d'extraction et d'archivage, le fichier est copié sur le site distant, puis extrait pour vous permettre de continuer à le modifier. Vous pouvez utiliser le panneau Fichiers ou la fenêtre du document pour acquérir des fichiers. Dreamweaver crée un journal de suivi des activités de fichiers au cours du transfert ; vous pouvez le consulter et l'enregistrer. Dreamweaver enregistre également l'activité de tous les transferts de fichiers en FTP. Si une erreur se produit lors du transfert d'un fichier en FTP, le journal du site FTP peut vous aider à déterminer le problème. Vous trouverez un didacticiel consacré au placement de fichiers sur un serveur distant à l'adresse www.adobe.com/go/vid0163_fr. Vous trouverez un didacticiel consacré au dépannage des problèmes de publication à l'adresse www.adobe.com/go/vid0164_fr. Voir aussi « Synchronisation de fichiers » à la page 91 « A propos du système d'archivage et d'extraction de fichiers » à la page 88 Placement de fichiers sur un serveur distant ou un serveur d'évaluation à l'aide du panneau Fichiers 1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez les fichiers à télécharger. Les fichiers sont généralement sélectionnés dans l'affichage Site local, mais il est également possible de les sélectionner dans l'affichage Site distant. Remarque : Vous pouvez décider de ne placer que les fichiers dont la version locale est plus récente que la version distante. 2 Procédez de l'une des manières suivantes pour placer un fichier sur le serveur distant : - Cliquez sur le bouton Placer dans la barre d'outils du panneau Fichiers. - Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur le fichier dans le panneau Fichiers, puis sélectionnez Placer dans le menu contextuel. 3 Si le fichier n'a pas encore été enregistré, une boîte de dialogue s'affiche (si vous l'avez indiqué parmi les préférences de la catégorie Site de la boîte de dialogue Préférences) pour vous permettre de l'enregistrer avant de le placer sur le serveur distant. Cliquez sur Oui pour enregistrer le fichier ou sur Non pour placer la version précédemment enregistrée sur le serveur distant. Remarque : Si vous n'enregistrez pas le fichier, aucune des modifications effectuées depuis le dernier enregistrement ne sera placée sur le serveur distant. Toutefois, le fichier reste ouvert, ce qui vous permet encore d'enregistrer les changements après avoir placé le fichier sur le serveur. 4 Cliquez sur Oui si vous souhaitez envoyer les fichiers dépendants associés aux fichiers sélectionnés ou sur Non si vous ne voulez pas les envoyer. L'option par défaut est de ne pas transférer les fichiers indépendants. Vous pouvez définir cette option en sélectionnant Edition > Préférences > Site. Remarque : Il est en général conseillé de transférer les fichiers dépendants lorsque vous archivez un nouveau fichier, mais si les versions les plus récentes des fichiers dépendants figurent déjà sur le serveur distant, il n'est pas utile de les transférer à nouveau. Pour interrompre le transfert de fichier, cliquez sur Annuler dans la boîte de dialogue d'état. Le transfert en cours peut ne pas s'interrompre immédiatement. Un cadenas apparaît en regard de l'icône du fichier local pour indiquer que ce dernier n'est désormais accessible qu'en lecture seule. Important : Si vous archivez le fichier actif, il se peut que ce fichier soit automatiquement enregistré avant d'être archivé, selon les options définies dans les préférences. 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 Procédez de l'une des manières suivantes pour placer un fichier : - Choisissez Site > Placer. - Cliquez sur l'icône Gestion des fichiers dans la barre d'outils de la fenêtre du document, puis sélectionnez Placer dans le menu. Remarque : Si le fichier actuel n'est pas associé au site sélectionné dans le panneau Fichiers, Dreamweaver tente de déterminer à quel site défini localement le fichier actuel appartient. Si ce fichier courant n'appartient qu'à un seul site local, Dreamweaver ouvre ce site, puis effectue l'opération de placement. Affichage du journal FTP ❖ Cliquez sur le menu Options dans le coin supérieur droit du panneau Fichiers, puis choisissez Affichage > Journal FTP du site. Gestion des transferts de fichiers Vous pouvez afficher l'état des opérations de transfert de fichiers, ainsi que la liste des fichiers transférés et de leurs résultats (transfert réussi, ignoré ou raté). Vous pouvez également créer un journal des activités relatives aux fichiers. Remarque : Dreamweaver vous permet d'effectuer d'autres activités non liées au serveur lors du transfert de fichiers vers le serveur ou à partir de ce dernier. Annulation d'un transfert de fichier ❖ Cliquez sur le bouton Annuler ou fermez la boîte de dialogue Transfert de fichiers en arrière-plan. Masquage de la boîte de dialogue Activité fichiers en arrière-plan pendant les transferts ❖ Cliquez sur le bouton Masquer dans la boîte de dialogue Activité fichiers en arrière-plan afin de la réduire et de ne plus voir que le petit bouton Journal en bas du panneau Fichiers. Remarque : Vous ne pouvez pas masquer ni supprimer le bouton Journal. Il s'agit d'une partie permanente du panneau. Affichage des détails du dernier transfert de fichiers 1 Cliquez sur le bouton Journal en bas du panneau Fichiers pour ouvrir la boîte de dialogue Activité fichiers en arrière-plan. 2 Cliquez sur la flèche Détails. Enregistrement d'un journal du dernier transfert de fichier 1 Cliquez sur le bouton Journal en bas du panneau Fichiers pour ouvrir la boîte de dialogue Activité fichiers en arrière-plan. 2 Cliquez sur le bouton Enregistrer journal et enregistrez les informations sous forme de fichier texte. Vous pouvez alors analyser les mouvements de fichiers en ouvrant le fichier journal dans Dreamweaver ou dans un éditeur de texte. Archivage et extraction de fichiers A propos du système d'archivage et d'extraction de fichiers Si vous travaillez en équipe, vous avez la possibilité d'archiver et d'extraire des fichiers sur les serveurs local et distant. Si vous êtes la seule personne à travailler sur le serveur distant, vous pouvez utiliser les commandes Acquérir et Placer pour transférer des fichiers sans avoir à les archiver ou à les extraire. Remarque : Vous pouvez utiliser la fonctionnalité d'acquisition et de placement de fichiers sur un serveur d'évaluation, mais le système d'archivage et d'extraction n'est pas disponible sur ce type de serveur. L'extraction d'un fichier équivaut à signaler aux autres utilisateurs que vous travaillez sur ce fichier et qu'ils ne doivent pas le modifier. Lors de l'extraction d'un fichier, le nom de la personne ayant effectué l'opération est affiché dans le panneau Fichiers, avec une coche de couleur rouge (si le fichier a été extrait par un autre membre de l'équipe) ou verte (si vous êtes la personne à avoir extrait le fichier) en regard de son icône. L'archivage d'un fichier équivaut à le mettre à la disposition des autres membres de l'équipe, qui peuvent l'extraire et le modifier. Lorsque vous archivez un fichier après l'avoir modifié, la version locale de ce fichier devient accessible en lecture seule et un cadenas apparaît en regard du fichier dans le panneau Fichiers pour vous empêcher de le modifier. Dreamweaver ne rend pas les fichiers extraits accessibles en lecture seule sur le serveur distant. Si vous transférez des fichiers à l'aide d'une application autre que Dreamweaver, vous risquez d'écraser les fichiers extraits. Toutefois, dans les applications autres que Dreamweaver, le fichier LCK est visible près du fichier extrait dans la hiérarchie de fichiers afin d'éviter ce type d'incident. Pour plus d'informations sur les fichiers LCK et sur le fonctionnement du système d'archivage et d'extraction, consultez les notes techniques 15447 sur le site Web Adobe à l'adresse www.adobe.com/go/15447_fr. Voir aussi « Acquisition et placement de fichiers depuis ou vers votre serveur » à la page 84 Configuration du système d'archivage et d'extraction de fichiers Pour utiliser le système d'archivage et d'extraction, vous devez associer votre site local à un serveur distant. 1 Choisissez Site > Gérer les sites. 2 Sélectionnez un site et cliquez sur Modifier. 3 Sélectionnez la catégorie Infos distantes dans la liste de gauche de l'onglet Avancé. 4 Activez l'option Activer l'archivage et l'extraction de fichier si vous travaillez au sein d'une équipe (ou si vous travaillez seul, mais depuis plusieurs machines). Désélectionnez cette option si vous souhaitez désactiver l'archivage et l'extraction de fichiers dans votre site Web. Cette option est utile pour informer les autres utilisateurs que vous avez extrait un fichier en vue de le modifier ou pour vous rappeler qu'une version plus récente d'un fichier est peut-être ouverte sur une autre machine. Si votre option d'accès à distance est définie sur Microsoft Visual SourceSafe, cette option d'archivage et d'extraction est la seule disponible. Les autres options de cette section ne sont disponibles que pour les méthodes d'accès FTP, Réseau/Local, WebDAV et RDS. Si vous ne voyez pas les options Archiver/Extraire, cela signifie que vous n'avez pas configuré le serveur distant. 5 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. 6 Définissez les options restantes : Nom d'extraction Ce nom apparaît dans le panneau Fichiers à côté des fichiers extraits afin que les membres d'une équipe puissent s'adresser à la personne appropriée s'ils ont besoin d'un fichier extrait. Remarque : Si vous travaillez seul sur plusieurs machines, utilisez un nom d'extraction différent pour chaque machine (par exemple, PierreR-MacDomicile et PierreR-PCBureau) de manière à savoir où se trouve la version la plus récente du fichier si vous oubliez de l'archiver. Adresse électronique Si vous saisissez une adresse électronique, lors de l'extraction d'un fichier, votre nom apparaît dans le panneau Fichiers en regard du fichier, sous la forme d'un lien (bleu souligné). Si un membre de l'équipe clique sur le lien, son programme de messagerie électronique par défaut ouvre un nouveau courriel à destination de votre adresse électronique et comportant un objet qui correspond aux noms du site et du fichier. Voir aussi « Configuration d'un dossier distant » à la page 41 Utilisation de WebDAV pour archiver et extraire des fichiers Dreamweaver peut se connecter à un serveur utilisant WebDAV (Web-based Distributed Authoring and Versioning), un ensemble d'extensions du protocole HTTP permettant aux utilisateurs au sein d'un groupe de modifier et de gérer des fichiers sur des serveurs Web distants. Pour plus d'informations, voir www.webdav.org. 1 Si vous ne l'avez pas encore fait, définissez un site Dreamweaver indiquant le dossier local que vous utilisez pour enregistrer vos fichiers de projet. 2 Sélectionnez Site > Gérer les sites puis double-cliquez sur votre site dans la liste. 3 Dans la boîte de dialogue Définition du site, sélectionnez l'onglet Avancé. 4 Cliquez sur la catégorie Infos distantes puis sélectionnez WebDAV dans le menu Accès. 5 Indiquez la façon dont Dreamweaver doit se connecter à votre serveur WebDAV. 6 Sélectionnez l'option Activer l'archivage et l'extraction de fichier et entrez les informations suivantes : - Dans la zone de texte Nom d'extraction, entrez un nom vous identifiant par rapport aux autres membres de l'équipe. - Indiquez votre adresse électronique dans la zone appropriée. Le nom et l'adresse électronique sont utilisés pour l'identification sur le serveur WebDAV et s'affiche dans le panneau Fichiers pour les contacts. 7 Cliquez sur OK. Dreamweaver configure le site pour l'accès WebDAV. Lorsque vous utilisez la commande d'archivage ou d'extraction sur un fichier du site, le fichier est transféré au moyen de WebDAV. Remarque : Il est possible WebDAV ne parvienne pas à extraire correctement des fichiers incluant un contenu dynamique du fait que la méthode HTTP GET les a rendus au moment de leur extraction. Archivage et extraction de fichiers dans un dossier distant Une fois le système d'archivage et d'extraction défini, vous pouvez archiver et extraire des fichiers sur un serveur distant via le panneau Fichiers ou la fenêtre de document. Voir aussi « Définition des préférences de site pour le transfert de fichiers » à la page 82 Extraction des fichiers à l'aide du panneau Fichiers 1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez les fichiers à extraire du serveur distant. Remarque : Vous pouvez sélectionner des fichiers dans l'affichage du site local ou distant mais pas dans l'affichage Serveur d'évaluation. Une coche de couleur rouge indique qu'un autre membre de l'équipe dispose du fichier extrait. Un symbole représentant un cadenas indique que le fichier est en lecture seule (Windows) ou verrouillé (Macintosh). 2 Procédez de l'une des manières suivantes pour extraire les fichiers : - Cliquez sur le bouton Extraire dans la barre d'outils du panneau Fichiers. - Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis choisissez Extraire dans le menu contextuel. 3 Dans la boîte de dialogue Fichiers dépendants, cliquez sur Oui si vous souhaitez télécharger les fichiers dépendants associés aux fichiers sélectionnés ou sur Non si vous ne voulez pas les télécharger. L'option par défaut est de ne pas télécharger les fichiers indépendants. Vous pouvez définir cette option en sélectionnant Edition > Préférences > Site. Remarque : D'une manière générale, il est conseillé de télécharger les fichiers dépendants lorsque le fichier extrait est un nouveau fichier, mais c'est inutile si les versions les plus récentes des fichiers dépendants sont déjà présentes sur le disque local. Une coche de couleur verte apparaît en regard de l'icône du fichier local pour signaler que vous l'avez extrait. Important : Si vous extrayez le fichier actif, la version ouverte du fichier est écrasée par la nouvelle version extraite. Archivage des fichiers à l'aide du panneau Fichiers 1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez les fichiers extraits ou sélectionnez de nouveaux fichiers. Remarque : Vous pouvez sélectionner des fichiers dans l'affichage du site local ou distant mais pas dans l'affichage Serveur d'évaluation. 2 Procédez de l'une des manières suivantes pour archiver les fichiers : - Cliquez sur le bouton Archiver dans la barre d'outils du panneau Fichiers. - Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis choisissez Archiver dans le menu contextuel. 3 Cliquez sur Oui si vous souhaitez envoyer les fichiers dépendants associés aux fichiers sélectionnés ou sur Non si vous ne voulez pas les envoyer. L'option par défaut est de ne pas transférer les fichiers indépendants. Vous pouvez définir cette option en sélectionnant Edition > Préférences > Site. Remarque : Il est en général conseillé de transférer les fichiers dépendants lorsque vous archivez un nouveau fichier, mais si les versions les plus récentes des fichiers dépendants figurent déjà sur le serveur distant, il n'est pas utile de les transférer à nouveau. Un cadenas apparaît en regard de l'icône du fichier local pour indiquer que ce dernier n'est désormais accessible qu'en lecture seule. Important : Si vous archivez le fichier actif, il se peut que ce fichier soit automatiquement enregistré avant d'être archivé, selon les options définies dans les préférences. Archivage d'un fichier ouvert à partir de la fenêtre de document 1 Assurez-vous que le fichier à archiver ou à extraire est ouvert dans la fenêtre de document. Remarque : Vous ne pouvez archiver qu'un seul fichier ouvert à la fois. 2 Effectuez l'une des opérations suivantes : - Choisissez Site > Archiver. - Cliquez sur l'icône Gestion des fichiers dans la barre d'outils de la fenêtre du document, puis sélectionnez Archiver dans le menu. Si le fichier actuel n'est pas associé au site actif dans le panneau Fichiers, Dreamweaver tente de déterminer à quel site défini localement le fichier actuel appartient. Si le fichier actuel appartient à un autre site que celui qui est actif dans le panneau Fichiers, Dreamweaver ouvre ce site, puis effectue l'opération d'archivage. Important : Si vous archivez le fichier actif, il se peut que ce fichier soit automatiquement enregistré avant d'être archivé, selon les options définies dans les préférences. Annulation de l'extraction d'un fichier Si vous extrayez un fichier, puis que vous décidez de ne pas le modifier (ou si vous décidez d'éliminer les modifications que vous avez apportées), vous pouvez annuler l'opération d'extraction. Le fichier reprend alors son état d'origine. Pour annuler l'extraction d'un fichier, procédez de l'une des façons suivantes : - Ouvrez le fichier dans la fenêtre Document, puis choisissez Site > Annuler extraction. - Dans le panneau Fichiers (Fenêtre > Fichiers), cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis sélectionnez Annuler extraction. La copie locale du fichier passe alors en lecture seule, et toutes les modifications que vous y avez apportées sont perdues. Synchronisation de fichiers Synchronisation des fichiers entre le site local et le site distant Après avoir créé des fichiers sur votre site local et votre site distant, il vous est possible de synchroniser les fichiers entre les deux sites. Remarque : Si votre site distant est un serveur FTP (et non un serveur en réseau), la synchronisation de vos fichiers s'effectuera en FTP. Avant de synchroniser vos sites, vous pouvez vérifier les fichiers à placer, à acquérir, à supprimer ou à ignorer. Par ailleurs, une fois la synchronisation effectuée, Dreamweaver vous indique les fichiers qui ont été mis à jour. Voir aussi « Gestion des transferts de fichiers » à la page 87 « Archivage et extraction de fichiers dans un dossier distant » à la page 89 « Acquisition de fichiers depuis un serveur distant » à la page 85 « Placement de fichiers sur un serveur distant » à la page 86 « Comparaison de fichiers pour en chercher les différences » à la page 93 Identification des fichiers qui sont plus récents sur le site local ou le site distant, sans effectuer de synchronisation Procédez de l'une des façons suivantes dans le panneau Fichiers : - Cliquez sur le menu Options dans le coin supérieur droit puis sélectionnez Edition > Sélectionner locaux plus récents ou Edition > Sélectionner distants plus récents. - Dans le panneau Fichiers, cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis choisissez Sélectionner > Sélectionner locaux plus récents ou Sélectionner > Sélectionner distants plus récents. Affichage d'informations de synchronisation détaillées pour un fichier précis Dans le panneau Fichiers, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur le fichier au sujet duquel vous voulez obtenir des informations, puis sélectionnez Afficher les informations de synchronisation. Remarque : Pour que cette fonctionnalité soit disponible, l'option Conserver les informations de synchronisation doit être activée dans la catégorie Distant de la boîte de dialogue Définition du site. Synchronisation de vos fichiers 1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez un site dans le menu (dans lequel le site, le serveur ou le disque dur en cours d'utilisation s'affiche). 2 (Facultatif) Sélectionnez des fichiers ou des dossiers précis, ou passez à l'étape suivante pour synchroniser le site entier. 3 Cliquez sur le menu Options dans le coin supérieur droit du panneau Fichiers, puis choisissez Site > Synchroniser. Vous pouvez également cliquer sur le bouton Synchroniser dans le haut du panneau Fichiers pour synchroniser les fichiers. 4 Dans le menu Synchroniser, réalisez une des opérations suivantes : - Pour procéder à la synchronisation du site entier, sélectionnez Tout le site nom du site. - Pour ne synchroniser que les fichiers sélectionnés, sélectionnez Fichiers locaux sélectionnés seulement (ou Fichiers distants sélectionnés seulement si vous avez effectué votre sélection depuis l'affichage Site distant du panneau Fichiers). 5 Cliquez sur la direction désirée pour le transfert : Placer les fichiers plus récents sur hôte distant Télécharge tous les fichiers locaux qui n'existent pas sur le serveur distant ou qui ont été modifiés depuis le dernier téléchargement. Obtenir les fichiers plus récents depuis l'hôte distant Télécharge tous les fichiers distants qui n'existent pas localement ou qui ont été modifiés depuis le dernier téléchargement. Placer et obtenir les fichiers plus récents Transfère, selon le cas, les versions les plus récentes de tous les fichiers sur le site local ou sur le site distant. 6 Indiquez si les fichiers qui sont présents sur le site de destination mais n'ont pas d'équivalent sur le site d'origine doivent être supprimés. Cette option n'est pas disponible si vous sélectionnez les options d'acquisition et de placement dans le menu de direction. Si vous avez sélectionné Placer les fichiers plus récents sur hôte distant et que vous activez l'option d'effacement, tous les fichiers du site distant qui n'ont pas d'équivalent sur le site local sont supprimés. Si vous avez sélectionné Obtenir les fichiers plus récents depuis l'hôte distant et que vous activez l'option d'effacement, tous les fichiers du site local qui n'ont pas d'équivalent sur le site distant sont supprimés. 7 Cliquez sur Aperçu. Remarque : Avant de synchroniser les fichiers, vous devez procéder à un aperçu des actions que Dreamweaver va devoir exécuter pour cette tâche. Si la version la plus récente de chacun des fichiers sélectionnés figure déjà aux deux endroits et que rien n'a besoin d'être supprimé, un message d'avertissement vous signale qu'aucune synchronisation n'est nécessaire. Dans le cas contraire, la boîte de dialogue Synchroniser s'affiche et vous permet de modifier les actions (placer, acquérir, supprimer et ignorer) pour ces fichiers avant d'exécuter la synchronisation. 8 Vérifiez les différentes actions à effectuer. 9 Pour modifier l'action pour un fichier particulier, sélectionnez-le puis cliquez sur l'une des icônes d'action situées en bas de la fenêtre d'aperçu. Comparer L'action Comparer ne fonctionne que si vous avez installé et spécifié un outil de comparaison de fichiers dans Dreamweaver. Si l'icône Action est en grisé, l'action correspondante n'est pas disponible. Marquer les fichiers comme synchronisés Cette option vous permet d'indiquer que le ou les fichiers sélectionnés sont déjà synchronisés. 10 Cliquez sur OK pour synchroniser les fichiers. Vous pouvez afficher ou enregistrer les détails de la synchronisation dans un fichier local. Comparaison de fichiers pour en chercher les différences Comparaison des fichiers locaux et distants Dreamweaver peut utiliser des outils de comparaison de fichiers (également appelés « outils diff ») afin de comparer le code des versions locale et distante du même fichier, deux fichiers distants différents ou deux fichiers locaux différents. La comparaison des versions locale et distante est utile si vous travaillez localement sur un fichier et que vous suspectez que sa copie sur le serveur a été modifiée. Sans quitter Dreamweaver, vous pouvez afficher et fusionner les modifications distantes dans votre version locale avant de placer le fichier sur le serveur. La comparaison de deux fichiers locaux ou de deux fichiers distants est également utile si vous conservez des versions précédentes, renommées de vos fichiers. En cas d'oubli des modifications apportées à un fichier d'une version précédente, effectuez une comparaison rapide. Avant de commencer, vous devez installer un outil de comparaison de fichiers tiers sur votre système. Pour plus d'informations sur les outils de comparaison de fichiers, utilisez un moteur de recherche Web tel que Google pour trouver des outils de « comparaison de fichiers » ou « diff ». Dreamweaver fonctionne avec la plupart des outils tiers. Voir aussi « Configuration et modification d'un dossier racine local » à la page 40 Définition d'un outil de comparaison dans Dreamweaver 1 Installez l'outil de comparaison de fichiers sur le même système que Dreamweaver. 2 Dans Dreamweaver, ouvrez la boîte de dialogue Préférences en sélectionnant Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh), puis sélectionnez la catégorie Comparaison de fichiers. 3 Effectuez l'une des opérations suivantes : - Sous Windows, cliquez sur le bouton Parcourir et sélectionnez une application qui compare les fichiers. - Sur Macintosh, cliquez sur le bouton Parcourir et sélectionnez l'outil ou le script qui lance l'outil de comparaison de fichiers dans la ligne de commande (pas l'outil de comparaison de fichiers). Les outils ou les scripts de lancement se trouvent généralement dans le dossier usr/bin sur votre Macintosh. Par exemple, si vous souhaitez utiliser FileMerge, recherchez le dossier usr/bin et sélectionnez opendiff, l'outil qui lance FileMerge. Le tableau suivant répertorie les outils de comparaison de fichiers courants pour le Macintosh ainsi que l'emplacement de leurs outils ou de leurs scripts de lancement sur votre disque dur : Si vous utilisez Sélectionnez le fichier suivant FileMerge usr/bin/opendiff BBEdit usr/bin/bbdiff TextWrangler usr/bin/twdiff Remarque : Le dossier usr est généralement masqué dans le Finder. Cependant, vous pouvez y accéder en utilisant le bouton Parcourir dans Dreamweaver. Remarque : Les résultats effectivement affichés dépendent de l'outil diff utilisé. Consultez le guide d'utilisation de votre outil pour comprendre comment interpréter ces résultats. Comparaison de deux fichiers locaux Vous pouvez comparer deux fichiers situés à n'importe quel endroit sur votre ordinateur. 1 Dans le panneau Fichiers, appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant avec la souris sur les deux fichiers pour les sélectionner. pour choisir des fichiers se trouvant à l'extérieur de votre site défini, accédez à votre disque local dans le menu gauche contextuel du panneau Fichiers puis sélectionnez-les. 2 Cliquez avec le bouton droit de la souris sur l'un des fichiers sélectionnés puis choisissez Compare Local Files (Comparer les fichiers locaux) dans le menu contextuel. Remarque : Si votre souris n'est dotée que d'un seul bouton, appuyez sur la touche Ctrl tout en cliquant avec la souris sur l'un des fichiers sélectionnés. L'outil de comparaison de fichiers démarre et compare les deux fichiers. Comparaison de deux fichiers distants Vous pouvez comparer deux fichiers situés sur votre serveur distant. Vous devez définir un site Dreamweaver avec des paramètres distants avant de pouvoir effectuer cette tâche. 1 Dans le panneau Fichiers, affichez les fichiers sur le serveur distant en choisissant Affichage distant dans le menu déroulant situé à droite. 2 Appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant avec la souris sur les deux fichiers pour les sélectionner 3 Cliquez avec le bouton droit de la souris sur l'un des fichiers sélectionnés puis choisissez Comparer les fichiers distants dans le menu contextuel. Remarque : Si votre souris n'est dotée que d'un seul bouton, appuyez sur la touche Ctrl tout en cliquant avec la souris sur l'un des fichiers sélectionnés. L'outil de comparaison de fichiers démarre et compare les deux fichiers. Comparaison entre un fichier local et un fichier distant Vous pouvez effectuer une comparaison entre un fichier local et un fichier se trouvant sur votre serveur distant. Pour cela, vous devez d'abord définir un site Dreamweaver avec des paramètres distants. Dans le panneau Fichiers, cliquez avec le bouton droit de la souris sur un fichier local et choisissez Comparer avec distants dans le menu contextuel. Remarque : Si votre souris n'est dotée que d'un seul bouton, appuyez sur la touche Ctrl tout en cliquant avec la souris sur le fichier local. L'outil de comparaison de fichiers démarre et compare les deux fichiers. Comparaison entre un fichier distant et un fichier local Vous pouvez effectuer une comparaison entre un fichier distant et un fichier local. Vous devez définir un site Dreamweaver avec des paramètres distants avant d'effectuer cette tâche. 1 Dans le panneau Fichiers, affichez les fichiers sur le serveur distant en choisissant Affichage distant dans le menu déroulant situé à droite. 2 Cliquez avec le bouton droit de la souris sur un fichier dans le panneau et choisissez Comparer avec fichier local dans le menu contextuel. Remarque : Si votre souris n'est dotée que d'un seul bouton, appuyez sur la touche Ctrl tout en cliquant avec la souris sur le fichier. Comparaison entre un fichier ouvert et un fichier distant Vous pouvez effectuer une comparaison entre un fichier ouvert dans Dreamweaver et son homologue sur le serveur distant. - Dans la fenêtre de document, choisissez Fichier > Comparer avec distants. L'outil de comparaison de fichiers démarre et compare les deux fichiers. Vous pouvez également cliquer avec le bouton droit de la souris sur l'onglet de document situé en haut de la fenêtre de document et choisir Comparer avec distants dans le menu contextuel. Comparaison avant le placement de fichiers Si vous modifiez un fichier localement et essayez ensuite de le télécharger vers votre serveur distant, Dreamweaver vous avertit si la version distante du fichier a été changée. Vous avez la possibilité de comparer les deux fichiers avant de télécharger le fichier et d'écraser la version distante. Avant de commencer, vous devez installer un outil de comparaison de fichiers sur votre système et le définir dans Dreamweaver. 1 Une fois que vous avez modifié un fichier dans un site Dreamweaver, placez le fichier (Site > Placer) sur votre site distant. Si la version distante du fichier a été modifiée, vous recevrez une notification avec la possibilité de visualiser les différences. 2 Pour visualiser les différences, cliquez sur le bouton Comparer. L'outil de comparaison de fichiers démarre et compare les deux fichiers. Si vous n'avez pas spécifié d'outil de comparaison de fichiers, un message vous invite à le faire. 3 Une fois que vous avez revu ou fusionné les changements dans l'outil, vous pouvez passer à l'opération de placement ou l'annuler. Comparaison de fichiers lors de la synchronisation Vous pouvez comparer les versions locales de vos fichiers avec les versions distantes lorsque vous synchronisez les fichiers de votre site avec Dreamweaver. Avant de commencer, vous devez installer un outil de comparaison de fichiers sur votre système et le définir dans Dreamweaver. 1 Cliquez avec le bouton droit de la souris à n'importe quel endroit du panneau Fichiers et sélectionnez Synchroniser dans le menu contextuel. 2 Complétez les options de la boîte de dialogue Synchroniser les fichier, puis cliquez sur Aperçu. Une fois que vous avez cliqué sur Aperçu, vous obtenez une liste des fichiers sélectionnés et des actions qui seront effectuées pendant la synchronisation. 3 Dans la liste, sélectionnez les fichiers que vous souhaitez comparer et cliquez sur le bouton Comparer (l'icône avec les deux petites pages). Remarque : Le fichier doit être basé sur du texte (fichier HTML ou ColdFusion). Dreamweaver lance l'outil de comparaison qui compare les versions locale et distante de chaque fichier sélectionné. Voir aussi « Synchronisation de fichiers » à la page 91 Restauration de fichiers (utilisateurs de Contribute) Restauration de fichiers (utilisateurs de Contribute) Dreamweaver enregistre automatiquement plusieurs versions d'un document lorsque la compatibilité Adobe Contribute est activée. Remarque : Contribute doit être installé sur le même ordinateur que Dreamweaver. La restauration des fichiers doit être activée au niveau des paramètres administratifs de Contribute. Pour plus d'informations, voir Administration de Contribute. 1 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur un fichier dans le panneau Fichiers. 2 Sélectionnez Restaurer la page. S'il existe une version précédente de la page à restaurer, la boîte de dialogue Restauration s'affiche. 3 Sélectionnez la version de la page à restaurer et cliquez sur Restaurer. Voir aussi « Préparation d'un site à utiliser avec Contribute » à la page 56 « Suppression, déplacement ou modification du nom d'un fichier distant sur un site Contribute » à la page 58 Voilage des dossiers et des fichiers du site A propos du voilage de site Le voilage vous permet de définir les dossiers et les types de fichier du site que vous souhaitez exclure de certaines opérations (acquisition et placement, par exemple). Vous pouvez voiler certains dossiers, mais pas des fichiers individuels. Pour voiler des fichiers, sélectionnez un type de fichier : Dreamweaver voilera tous les fichiers de ce type. Comme Dreamweaver conserve en mémoire tous les paramètres définis pour chaque site, vous n'avez pas à sélectionner le type de fichier voulu chaque fois que vous travaillez sur un site. Ainsi, si vous travaillez sur un site de grande taille et ne souhaitez pas télécharger vos fichiers multimédias chaque jour, vous pouvez utiliser la fonction de voilage sur le site pour voiler votre dossier multimédia. Le système exclut alors les fichiers de ce dossier lorsque vous effectuez des opérations sur le site. Vous pouvez voiler des dossiers et des types de fichier sur le site distant ou local. Le voilage exclut les dossiers et fichiers voilés des opérations suivantes : Réalisation d'opérations de placement, d'acquisition, d'archivage et d'extraction Génération de rapports Recherche des fichiers locaux et distants les plus récents Réalisation d'opérations portant sur le site entier, telles que la vérification et la modification des liens Synchronisation • Utilisation du contenu du panneau Actifs Mise à jour des modèles et des bibliothèques Remarque : Dreamweaver exclut les modèles et les éléments de bibliothèque voilés lors des opérations d'acquisition et de placement de fichiers seulement. Dreamweaver n'exclut aucun de ces éléments lors des opérations par lots, car cela pourrait les désynchroniser par rapport à leurs instances. Activation et désactivation du voilage d'un site Le voilage vous permet de définir les dossiers et les types de fichiers du site que vous souhaitez exclure de certaines opérations (acquisition et placement, par exemple). Cette option est activée par défaut. Vous pouvez le désactiver définitivement ou provisoirement afin d'effectuer une opération sur tous les fichiers, y compris les fichiers voilés. Lorsque vous désactivez le voilage sur un site, cela supprime tous les voiles des fichiers voilés. Lorsque vous le réactivez, tous les fichiers qui étaient précédemment voilés retrouvent cet état. Remarque : Vous pouvez également utiliser l'option Supprimer tous les voiles pour supprimer le voilage de tous les fichiers, mais cela ne désactive pas le voilage. De plus, cette option ne vous permet pas de rétablir automatiquement le voilage de tous les dossiers et fichiers qui étaient auparavant voilés ; il vous faut ensuite redéfinir manuellement le voilage de chaque dossier et type de fichier concerné. 1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez un site dans le menu contextuel où s'affiche le site, le serveur ou le disque dur. 2 Sélectionnez un fichier ou un dossier. 3 Cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis procédez de l'une des façons suivantes : - Cliquez sur Voilage > Activer le voilage (désélectionnez l'option pour la désactiver). - Sélectionnez Voilage > Paramètres, puis choisissez Voilage dans la liste des catégories située à gauche de la boîte de dialogue Définition du site, onglet Avancé. Sélectionnez ou désélectionnez Activer le voilage, puis activez ou désactivez l'option Voiler les fichiers se terminant avec, selon que vous souhaitez ou non activer le voilage de certains types de fichier. Saisissez ou supprimez les suffixes de fichier dans la zone de texte afin d'indiquer le type de fichier pour lequel activer ou désactiver le voilage. 4 Cliquez sur OK. Voilage et suppression du voilage pour les dossiers d'un site Il est possible de voiler des dossiers spécifiques, mais pas tous les dossiers existants ou un site entier. Il est toutefois possible de voiler plusieurs dossiers simultanément. 1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez un site pour lequel le voilage est activé dans le menu contextuel où est affiché le site, le serveur ou le disque dur. 2 Sélectionnez les dossiers de votre choix auxquels appliquer un voile ou le supprimer. 3 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis choisissez Voilage > Voiler ou Voilage > Supprimer le voile dans le menu contextuel. Une ligne rouge est présente ou non sur l'icône du dossier pour indiquer que le dossier est voilé ou dévoilé. Remarque : Vous pouvez effectuer une opération sur un dossier voilé précis en le sélectionnant dans le panneau Fichiers, puis en effectuant l'opération voulue. Toute opération effectuée directement sur un fichier ou un dossier annule le voilage. Voilage et suppression du voilage de certains types de fichier Vous pouvez indiquer des types de fichier à voiler afin que Dreamweaver voile tous les fichiers se terminant d'une certaine manière. Ainsi pouvez-vous, par exemple, voiler tous les fichiers se terminant par l'extension .txt. Les types de fichier indiqués ne doivent pas nécessairement correspondre à des extensions de fichier ; il peut s'agir de n'importe quel élément apparaissant à la fin d'un nom de fichier. Remarque : Vous ne pouvez pas voiler un fichier individuel, uniquement un dossier ou l'ensemble des fichiers d'un type de fichier donné. Voilage de certains types de fichier au sein d'un site 1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez un site pour lequel le voilage est activé dans le menu où est affiché le site, le serveur ou le disque dur. 2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis sélectionnez Voilage > Paramètres. 3 Activez la case à cocher Voiler les fichiers se terminant avec, puis saisissez les types de fichier à voiler dans la zone de texte. Vous pouvez saisir, par exemple, .jpg afin de voiler tous les fichiers dont le nom se termine par .jpg dans le site. Pour saisir plusieurs types de fichier, séparez chaque type par un espace ; n'utilisez ni virgule ni point-virgule. 4 Cliquez sur OK. Une ligne rouge apparaît sur les fichiers concernés pour indiquer qu'ils sont voilés. Certains logiciels créent des fichiers de sauvegarde se terminant par un suffixe donné, tel que .bak. Vous pouvez voiler ces fichiers. Remarque : Vous pouvez effectuer une opération sur un dossier voilé précis en le sélectionnant dans le panneau Fichiers, puis en effectuant l'opération voulue. Toute opération effectuée directement sur un fichier ou un dossier annule le voilage. Désactivation du voilage de certains types de fichier au sein d'un site 1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez un site pour lequel le voilage est activé dans le menu où est affiché le site, le serveur ou le disque dur. 2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis sélectionnez Voilage > Paramètres. 3 Dans la boîte de dialogue Définition du site, onglet Avancé, utilisez l'une des méthodes suivantes : - Désactivez l'option Voiler les fichiers se terminant avec pour supprimer le voile de tous les types de fichier répertoriés dans la zone de texte. - Dans la zone de texte, supprimez certains types de fichier pour ne supprimer le voile que sur ces types de fichier. 4 Cliquez sur OK. Les lignes rouges disparaissent des fichiers concernés pour indiquer qu'ils ne sont plus voilés. Désactivation du voilage de tous les dossiers et fichiers Vous pouvez supprimer le voile de tous les dossiers et fichiers d'un site, et ce en une seule opération. Comme il est impossible d'annuler ce type d'opération, vous ne pourrez pas rétablir le voile de tous les éléments qui étaient auparavant voilés. Vous devrez revoiler les éléments un par un. Si vous souhaitez supprimer provisoirement le voile de tous les dossiers et fichiers et les revoiler par la suite, désactivez le voilage sur le site. 1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez un site pour lequel le voilage est activé dans le menu où est affiché le site, le serveur ou le disque dur. 2 Sélectionnez un fichier ou un dossier quelconque du site. 3 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis sélectionnez Voilage> Supprimer tous les voiles. Remarque : Cela désactive également l'option Voiler les fichiers se terminant avec, sous Site> Voilage > Paramètres. Les lignes rouges sur les icônes des dossiers et des fichiers disparaissent pour indiquer que tous les fichiers et dossiers du site ne sont plus voilés. Stockage des informations sur les fichiers dans des Design Notes A propos des Design Notes Les Design Notes sont des notes créées pour un fichier donné. Les Design Notes sont associées au fichier qu'elles décrivent, mais stockées dans un autre fichier. Le panneau Fichiers vous permet de voir les fichiers auxquels sont jointes des Design Notes, car une icône spécifique s'affiche dans la colonne Notes. Les Design Notes vous permettent de conserver des informations supplémentaires sur les documents, telles que des commentaires sur l'état des fichiers ou le nom des fichiers source des images. Par exemple, si vous copiez un document d'un site dans un autre, vous pouvez ajouter à ce dernier des Design Notes contenant un commentaire expliquant que le document original se trouve dans le dossier de l'autre site. Les Design Notes permettent également de conserver des informations confidentielles, qu'il est impossible de laisser dans un document pour des raisons de sécurité, par exemple des notes sur la façon dont un devis a été calculé, dont une configuration a été élaborée ou encore sur les facteurs de marketing qui ont influencé une décision de production. Si vous ouvrez un fichier dans Adobe® Fireworks® ou Flash, puis l'exportez dans un autre format, Fireworks ou Flash enregistre automatiquement le nom du fichier source d'origine dans un fichier de Design Notes. Ainsi, si vous ouvrez le fichier maMaison.png dans Fireworks, puis l'exportez au format GIF en lui attribuant le nom maMaison.gif, Fireworks crée un fichier Design Notes du nom de maMaison.gif.mno. Ce fichier Design Notes contient le nom du fichier d'origine, sous la forme d'une URL file: absolue. De ce fait, les Design Notes du fichier maMaison.gif pourraient contenir la ligne suivante : fw_source="file:///Mydisk/sites/assets/orig/myhouse.png" Au même titre, les Design Notes d'un fichier Flash pourraient contenir la ligne suivante : fl_source="file:///Mydisk/sites/assets/orig/myhouse.fla" Remarque : Pour pouvoir partager des Design Notes, les utilisateurs doivent définir le même chemin d'accès pour la racine du site (par exemple, sites/ assets/orig). Lorsque vous importez l'image dans Dreamweaver, le fichier de Design Notes est automatiquement copié sur le site, en même temps que l'image. Si vous sélectionnez cette image dans Dreamweaver et décidez de la modifier à l'aide de Fireworks, ce dernier ouvre directement le fichier d'origine pour vous permettre de le modifier. Voir aussi « Lancement d'un éditeur externe pour des fichiers multimédia » à la page 260 Activation et désactivation des Design Notes pour un site Les Design Notes sont associées à un fichier mais sont conservées dans un fichier séparé. Les Design Notes vous permettent de conserver des informations supplémentaires sur les documents, telles que des commentaires sur l'état des fichiers ou le nom des fichiers source des images. L'activation et la désactivation des Design Notes pour un site donné s'effectuent depuis la catégorie Design Notes de la boîte de dialogue Définition du site. Lorsque vous activez les Design Notes, vous pouvez, si vous le souhaitez, décider de ne les utiliser que localement. 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 l'onglet Avancé de la boîte de dialogue Définition du site, sélectionnez la catégorie Design Notes dans la liste de gauche. 4 Sélectionnez Gérer Design Notes pour activer les Design Notes (désélectionnez cette option pour les désactiver). 5 Si vous souhaitez supprimer tous les fichiers de Design Notes locaux associés au site, cliquez sur Nettoyer puis sur Oui. Si vous souhaitez supprimer tous les fichiers de Design Notes, sélectionnez Sites > Gérer les sites, choisissez votre site, sélectionnez Edition, puis désélectionnez l'option Conserver les informations de synchronisation dans le panneau Infos distantes. 6 Activez l'option Télécharger les Design Notes pour les partager afin de télécharger les Design Notes associées au site en même temps que les autres documents, puis cliquez sur OK. Si vous activez cette option, vous pouvez partager les Design Notes avec les autres membres de votre équipe. Lorsque vous placez ou acquérez un fichier, Dreamweaver place ou acquiert automatiquement le fichier de Design Notes associé. Si vous n'activez pas cette option, Dreamweaver conserve les Design Notes localement, mais ne les téléchargé pas avec les fichiers. Si vous travaillez seul sur le site, vous pouvez désactiver cette option afin d'améliorer les performances. Les Design Notes ne seront pas transférées sur le site distant lorsque vous archiverez ou placerez vos fichiers. En outre, il vous sera toujours possible d'ajouter et de modifier les Design Notes pour votre site local. Association de Design Notes à un fichier Vous pouvez créer un fichier de Design Notes pour chaque document ou modèle de votre site. Vous pouvez également créer des Design Notes pour des applets, des contrôles ActiveX, des images, du contenu Flash, des objets Shockwave ainsi que des champs d'image figurant dans vos documents. Remarque : Si vous ajoutez des Design Notes à un fichier modèle, les documents que vous créez à partir du modèle n'héritent pas des Design Notes. 1 Effectuez l'une des opérations suivantes : - Ouvrez le fichier dans la fenêtre du document, puis sélectionnez Fichier > Design Notes. - Dans le panneau Fichiers, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur le fichier, puis sélectionnez Design Notes. Remarque : Si le fichier se trouve sur un site distant, vous devez d'abord l'extraire ou l'acquérir, puis le sélectionner dans le dossier local. 2 Dans le menu Etat de l'onglet Informations élémentaires, sélectionnez un état pour le document. 3 Cliquez sur l'icône de date (au-dessus de la zone de texte Notes) pour insérer la date du jour dans les notes. 4 Entrez des commentaires dans la zone Notes. 5 Activez l'option Afficher à l'ouverture du fichier afin que le fichier de Design Notes apparaisse à chaque ouverture du fichier. 6 Dans l'onglet Toutes les infos, cliquez sur le bouton Plus (+) afin d'ajouter une paire clé/valeur ; sélectionnez une paire, puis cliquez sur le bouton Moins (−) pour la supprimer. Par exemple, vous pouvez créer une clé Auteur (dans la zone Nom), puis lui attribuer la valeur Heidi (dans la zone Valeur). 7 Cliquez sur OK pour enregistrer les notes. Dreamweaver enregistre les notes au même endroit que le fichier en cours, dans un dossier portant le nom _notes. Le fichier porte le nom complet du document de base, suivi de l'extension .mno. Par exemple, si le nom de fichier du document est index.html, le fichier de Design Notes associé s'appellera index.html.mno. Voir aussi « Acquisition et placement de fichiers depuis ou vers votre serveur » à la page 84 « Archivage et extraction de fichiers dans un dossier distant » à la page 89 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. Ouvrez les Design Notes associés à un fichier ◆ Utilisez l'une des méthodes suivantes pour ouvrir les Design Notes : - Ouvrez le fichier dans la fenêtre du document, puis sélectionnez Fichier > Design Notes. - Dans le panneau Fichiers, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur le fichier, puis sélectionnez Design Notes. - Dans la colonne Notes du panneau Fichiers, double-cliquez sur l'icône jaune Design Notes. Remarque : Pour afficher les icônes jaunes Design Notes, sélectionnez Site > Gérer les sites > [nom de votre site] > Edition > Colonnes en mode Fichier dans l'onglet Avancé. Sélectionnez Notes dans la liste du panneau et choisissez l'option Afficher. Lorsque vous cliquez sur le bouton Développer de la barre d'outils Fichiers pour afficher à la fois le site local et le site distant, votre site local contient une colonne Notes qui affiche une icône de note jaune pour tout fichier contenant une Design Note. Attribution d'un état de Design Notes personnalisé 1 Ouvrez les Design Notes du fichier ou de l'objet concerné (voir la procédure ci-dessus). 2 Cliquez sur l'onglet Toutes les infos. 3 Cliquez sur le bouton Plus (+). 4 Dans le champ Nom, tapez état. 5 Dans le champ Valeur, tapez le nom du nouvel état. S'il existe déjà une valeur d'état, elle est remplacée par la nouvelle. 6 Cliquez sur l'onglet Infos de base et remarquez que la nouvelle valeur de l'état apparaît dans le menu contextuel Etat. Remarque : Vous ne pouvez avoir qu'une valeur personnalisée à la fois dans le menu d'état. Si vous suivez cette procédure une nouvelle fois, Dreamweaver remplace la valeur de l'état saisie la première fois par la nouvelle valeur. Suppression de votre site des Design Notes non associées 1 Choisissez Site > Gérer les sites. 2 Sélectionnez le site et cliquez sur Modifier. 3 Dans la boîte de dialogue Définition du site, sélectionnez la catégorie Design Notes dans la liste de gauche. 4 Cliquez sur le bouton Nettoyer. Dreamweaver vous invite alors à vérifier que tous les fichiers de Design Notes qui ne sont plus associés à un fichier dans le site doivent bien être supprimés. Si vous utilisez Dreamweaver pour supprimer un fichier auquel est associé un fichier de Design Notes, Dreamweaver supprime également le fichier de Design Notes. En général, il ne peut donc exister de fichiers de Design Notes orphelins que si vous supprimez ou renommez un fichier à l'extérieur de Dreamweaver. Remarque : Si vous désactivez l'option Gérer Design Notes avant de cliquer sur Nettoyer, Dreamweaver supprime tous les fichiers de Design Notes du site. Test de votre site Instructions pour tester les sites Avant de télécharger le site sur un serveur, et de le déclarer prêt à être diffusé, il convient de le tester localement (en fait, il est judicieux de tester et de résoudre les problèmes de votre site fréquemment au cours de son élaboration, afin de traiter les problèmes avant qu'ils ne s'aggravent et de les empêcher de se répéter). Vous devez vous assurer que vos pages ont l'apparence et le fonctionnement attendus dans les navigateurs ciblés, qu'il n'y a pas de liens rompus et que les pages ne sont pas trop longues à télécharger. Vous pouvez également tester l'ensemble de votre site et y régler les problèmes éventuels en effectuant un rapport de site. Les conseils suivants vous aideront à garantir aux visiteurs de votre site une expérience positive : 1. Assurez-vous que les pages fonctionnent dans les navigateurs visés. Vos pages doivent être lisibles et fonctionnelles dans les navigateurs qui ne prennent pas en charge les styles, les calques, les plug-ins ou les éléments JavaScript. Pour les pages qui ne s'affichent pas dans des navigateurs anciens, songez à utiliser le comportement Vérifier le navigateur pour rediriger automatiquement les visiteurs vers une autre page. 2. Affichez vos pages dans différents navigateurs et sur différentes plates-formes. Cela vous donnera la possibilité de constater les différences de présentation, de couleur, de taille de police et de format de fenêtre par défaut, autant d'éléments qu'il est impossible de prévoir lors de la vérification dans le navigateur cible. 3. Vérifiez que le site ne contient pas de liens brisés (réparez-les s'il en contient). Les autres sites étant parfois modifiés et réorganisés, il peut arriver que certaines pages vers lesquelles vos liens pointent soient déplacées ou supprimées. Vous pouvez exécuter un rapport de vérification des liens pour les tester. 4. Contrôlez la taille de vos pages et leur durée de téléchargement. Pour les pages constituées d'un grand tableau, n'oubliez pas que, sous certains navigateurs, les visiteurs ne voient rien tant que le tableau n'est pas entièrement chargé. Envisagez de fragmenter les grands tableaux ; si c'est impossible, envisagez de placer du contenu, par exemple un message de bienvenue ou une bannière publicitaire, en dehors du tableau, en haut de la page, de manière à ce que les utilisateurs puissent au moins voir ce contenu pendant le chargement du tableau 5. Effectuez quelques rapports sur le site pour tester et dépanner le site entier. Vous pouvez rechercher sur le site entier d'éventuels problèmes, tels que des documents sans nom, des balises vides ou des balises imbriquées redondantes. 6. Validez votre code pour détecter toute erreur de balise ou de syntaxe. 7. Continuez à mettre le site à jour et à en assurer la maintenance après sa publication. La publication d'un site peut être accomplie de différentes manières et constitue un processus continu. La définition et l'implémentation d'un système de contrôle de version constituent une partie importante du processus, que ce soit avec les outils intégrés à Dreamweaver ou par le biais d'une application de contrôle de version externe. 8. Consultez les forums de discussion. Utilisez les forums de discussion Dreamweaver du site Web Adobe, à l'adresse www.adobe.com/go/dreamweaver_newsgroup_fr. Vous y trouverez de nombreuses et précieuses informations sur les différents navigateurs, plates-formes, etc. Vous pouvez également discuter de questions techniques et échanger des informations utiles avec d'autres utilisateurs de Dreamweaver. Vous trouverez un didacticiel consacré au dépannage des problèmes de publication à l'adresse www.adobe.com/go/vid0164_fr. Voir aussi « Correction de liens rompus » à la page 283 « Test de liens dans Dreamweaver » à la page 277 « Application du comportement Vérifier le navigateur » à la page 337 « Validation des balises » à la page 314 « Vérification de la compatibilité du navigateur » à la page 314 Utilisation des rapports pour tester votre site Vous pouvez exécuter des rapports sur le déroulement du travail ou les attributs HTML du site, comprenant des points comme l'accessibilité, pour le document actuel, les fichiers sélectionnés ou le site complet. Vous pouvez également utiliser la commande Rapports pour vérifier les liens de votre site. Les rapports sur le déroulement du travail peuvent améliorer la collaboration entre les membres d'une équipe Web. Ces rapports permettent de savoir qui a extrait un fichier, quels fichiers sont associés à des Design Notes et quels fichiers ont été modifiés récemment. Vous pouvez définir davantage les rapports des Design Notes en spécifiant des paramètres nom/valeur. Remarque : Vous devez avoir défini une connexion à un site distant pour exécuter des rapports sur le déroulement du travail. Les rapports HTML vous permettent de compiler et de générer des rapports pour plusieurs attributs HTML. Vous pouvez contrôler les balises de polices imbriquées combinables, l'accessibilité, les textes secondaires manquants, les balises imbriquées redondantes, les balises vides amovibles et les documents sans nom. Après avoir exécuté un rapport, vous pouvez l'enregistrer au format XML, puis l'importer dans un modèle, une base de données ou une feuille de calcul et l'imprimer, ou encore l'afficher sur un site Web. Remarque : Vous pouvez également ajouter différents types de rapport à Dreamweaver via le site Web de Adobe Dreamweaver Exchange. Voir aussi « Rapports dans Dreamweaver » à la page 25 « Test de liens dans Dreamweaver » à la page 277 « Ajout et gestion d'extensions dans Dreamweaver » à la page 680 Exécution de rapports afin de tester un site 1 Choisissez Site > Rapports. Si vous souhaitez uniquement exécuter un rapport d'accessibilité pour votre site, sélectionnez Fichier > Vérifier la page > Vérifier l'accessibilité. Le rapport s'affiche alors dans le panneau Rapports du site du groupe de panneaux Résultats. 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'avez pas auparavant sélectionné des fichiers dans le panneau Fichiers. 3 Si vous avez sélectionné un rapport de déroulement de travail, cliquez sur Paramètres de rapport. Dans le cas contraire, ignorez cette étape. Remarque : Si vous avez sélectionné plusieurs rapports de déroulement de travail, vous devez cliquer sur le bouton Paramètres de rapport pour chaque rapport. Sélectionnez un rapport, cliquez sur Paramètres de rapport et entrez les paramètres ; puis recommencez pour les autres rapports de déroulement de travail. Extrait par Crée un rapport qui dresse la liste de tous les documents extraits par un membre spécifique de l'équipe. Entrez le nom d'un membre de l'équipe et cliquez sur OK pour revenir à la boîte de dialogue Rapports. Design Notes Crée un rapport qui dresse la liste de l'ensemble des Design Notes pour les documents sélectionnés ou le site. Entrez une ou plusieurs paires nom/valeur, puis sélectionnez des valeurs de comparaison dans les menus contextuels correspondants. Cliquez sur OK pour revenir à la boîte de dialogue Rapports. Modifiés récemment Crée un rapport qui dresse la liste des fichiers qui ont été modifiés durant une période donnée. Entrez les plages de dates et l'emplacement des fichiers à afficher. 4 Si vous avez sélectionné un rapport HTML, choisissez l'un des rapports suivants : Balises de polices imbriquées combinables Crée un rapport qui dresse la liste de toutes les balises de polices imbriquées pouvant être combinées pour nettoyer le code. Par exemple, STOP! est inclus dans le rapport. Texte secondaire manquant Crée un rapport qui dresse la liste de toutes les balises img qui ne possèdent pas de texte secondaire (sec/alt). Le texte secondaire apparaît à la place des images dans les navigateurs qui affichent seulement du texte ou configurés pour télécharger les images manuellement. Les lecteurs d'écran lisent le texte secondaire et certains navigateurs affichent du texte secondaire lorsque l'utilisateur passe la souris sur l'image. Extrait par Crée un rapport qui dresse la liste de tous les documents extraits par un membre spécifique de l'équipe. Accessibilité Crée un rapport détaillant les conflits entre votre contenu et les directives d'accessibilité de la Section 508 du Rehabilitation Act de 1998. Balises redondantes imbriquées Crée un rapport répertoriant les balises à nettoyer. Par exemple, En Espagne, il pleut principalement dans les plaines est inclus dans le rapport. Balises vides amovibles Crée un rapport qui dresse la liste de toutes les balises vides pouvant être supprimées afin de nettoyer le code HTML. Par exemple, vous pouvez avoir supprimé un élément ou une image en Affichage de code, mais laissé les balises s'appliquant à cet élément. Documents sans nom Crée un rapport qui dresse la liste de tous les documents sans titre trouvés conformément aux paramètres sélectionnés. Dreamweaver établit un rapport sur tous les documents qui contiennent des titres par défaut, des titres répétés ou des balises de titre manquantes. 5 Cliquez sur Exécuter pour créer le rapport. Selon le type de rapport à exécuter, vous pouvez être invité à enregistrer votre fichier, à définir votre site ou à sélectionner un dossier (si vous ne l'avez pas déjà fait). Une liste de résultats apparaît dans le panneau Rapports du site (dans le groupe de panneaux Résultats). Utilisation et enregistrement d'un rapport 1 Exécuter un rapport (voir la procédure précédente). 2 Dans le panneau Rapports du site, effectuez l'une des opérations suivantes pour consulter le rapport : - Cliquez sur l'en-tête de la colonne en fonction de laquelle vous souhaitez effectuer le tri des résultats. Vous pouvez trier les résultats par nom de fichier, numéro de ligne ou description. Vous pouvez également exécuter plusieurs rapports et garder les différents rapports ouverts. - Sélectionnez une ligne quelconque du rapport, puis cliquez sur le bouton Plus d'infos situé à gauche du panneau Rapports du site pour obtenir la description du problème. Ces informations s'affichent dans le panneau Référence. - Double-cliquez sur une ligne quelconque du rapport pour afficher le code correspondant dans la fenêtre de document. Remarque : Si vous vous trouvez en mode Création, Dreamweaver passe à un affichage à deux volets et indique le problème identifié directement dans le code. 3 Cliquez sur Enregistrer le rapport. Lorsque vous enregistrez un rapport, vous pouvez l'importer dans un fichier modèle existant. Vous pouvez alors soit importer le fichier dans une base de données ou un tableur puis l'imprimer, soit l'afficher sur un site Web. Après avoir exécuté les rapports HTML, utilisez la commande Nettoyer HTML pour corriger les erreurs HTML signalées. Chapitre 5 : Gestion des actifs et des bibliothèques Le panneau Actifs (situé dans le même groupe de panneaux que le panneau Fichiers) est le principal outil que vous utilisez pour organiser les actifs de votre site, notamment les éléments de contenu réutilisables appelés éléments de bibliothèque. A propos des actifs et des bibliothèques A propos des actifs Vous pouvez utiliser Adobe® Dreamweaver® CS3 pour assurer le suivi des actifs inclus dans un site, notamment les images, les animations, les couleurs, les scripts et les liens, et pour en afficher un aperçu. Vous pouvez également faire glisser un actif directement pour l'insérer dans une page de votre document actuel. Vous pouvez obtenir des actifs à partir de différentes sources. Par exemple, vous pouvez créer des actifs dans une application, telle que Adobe® Fireworks® ou Adobe® Flash®, les recevoir d'un collègue, les copier à partir d'un CD-ROM de graphiques ou encore les copier à partir d'un site Web d'images. Dreamweaver permet également d'accéder à deux types d'actifs spéciaux : les bibliothèques et les modèles. Tous deux sont des actifs liés : lorsque vous modifiez un élément de bibliothèque ou un modèle, Dreamweavermet à jour tous les documents qui utilisent ces éléments. Les éléments de bibliothèque représentent généralement de petits actifs de conception, tels que le logo ou les informations de copyright d'un site. Pour définir la conception de zones plus larges, utilisez plutôt un modèle. Voir aussi « A propos des modèles Dreamweaver » à la page 371 A propos des éléments de bibliothèque Une bibliothèque est un fichier Dreamweaver spécial regroupant un ensemble d'actifs individuels ou de copies d'actifs que vous pouvez placer dans vos pages Web. Les actifs présents dans une bibliothèque portent le nom d'éléments de bibliothèque. Les éléments pouvant être stockés dans une bibliothèque sont notamment les images, les tableaux, les sons et les fichiers Flash. Vous pouvez mettre à jour automatiquement toutes les pages qui utilisent un élément de bibliothèque chaque fois que vous modifiez cet élément. Par exemple, supposons que vous construisiez un site de grande taille pour une société qui souhaite qu'un slogan figure sur chaque page. Vous pouvez créer un élément de bibliothèque qui contient le slogan et utiliser cet élément dans chaque page. Si le slogan est modifié, vous pouvez modifier l'élément de bibliothèque et mettre à jour automatiquement chaque page qui l'utilise. Dreamweaver stocke les éléments de bibliothèque dans un dossier nommé Library, au sein du dossier racine local de chaque site. Chaque site possède sa propre bibliothèque. Vous pouvez créer un élément de bibliothèque à partir de n'importe quel élément dans la section body d'un document, notamment du texte, des tableaux, des formulaires, des applets Java, des plug-ins, des éléments ActiveX, des barres de navigation et des images. Pour les éléments liés tels que les images, la bibliothèque enregistre uniquement une référence à l'élément. Le fichier d'origine doit rester à l'emplacement spécifié pour que l'élément de la bibliothèque fonctionne correctement. Il peut toutefois être utile de stocker une image dans un élément de bibliothèque. Par exemple, vous pouvez stocker une balise img complète dans un élément de bibliothèque, afin de pouvoir modifier facilement le texte alt d'une image, ou même son attribut src, dans l'ensemble du site. N'utilisez pas cette technique pour modifier les attributs de largeur et de hauteur (width et height) d'une image, sauf si vous utilisez également un éditeur d'image pour changer la taille réelle de l'image. Remarque : Si l'élément de bibliothèque contient des liens, ils ne fonctionneront pas nécessairement sur le nouveau site. En outre, les images d'un élément de bibliothèque ne sont pas copiées vers le nouveau site. Lorsque vous utilisez un élément de bibliothèque, Dreamweaver insère un lien vers cet élément dans la page Web au lieu d'insérer l'élément lui-même. Cela signifie que Dreamweaver insère une copie du code source HTML pour cet élément dans le document et ajoute un commentaire HTML contenant une référence à l'élément externe d'origine. Il s'agit d'une référence externe qui rend la mise à jour automatique possible. Lorsque vous créez un élément de bibliothèque qui comporte un élément auquel est attaché un comportement Dreamweaver, Dreamweaver copie l'élément et son gestionnaire d'événements (l'attribut qui spécifie l'événement déclenchant l'action, tel que onClick, onLoad ou onMouseOver, et l'action à appeler lorsque l'événement se produit) dans le fichier de l'élément de bibliothèque. Dreamweaver ne copie pas les fonctions JavaScript associées dans l'élément de la bibliothèque. Au lieu de cela, lorsque vous insérez l'élément de bibliothèque dans un document, Dreamweaver insère automatiquement les fonctions JavaScript appropriées dans la section head de ce document (si elles ne s'y trouvent pas déjà). Remarque : Si vous rédigez manuellement le code JavaScript (c'est-à-dire si vous le créez sans utiliser de comportements Dreamweaver), vous pouvez l'intégrer à votre élément de bibliothèque à l'aide du comportement Appel JavaScript pour exécuter le code. Si vous n'utilisez pas de comportement Dreamweaver pour exécuter le code, le code n'est pas conservé dans l'élément de bibliothèque. La modification des comportements dans les éléments de bibliothèque doit respecter certaines conditions. Les éléments de bibliothèque ne peuvent pas contenir de feuilles de style, car le code associé à ces éléments figure dans la section HEAD. Voir aussi « Modification d'un comportement dans un élément de bibliothèque » à la page 115 Utilisation des actifs Présentation du panneau Actifs Utilisez le panneau Actifs (Fenêtre > Actifs) pour gérer les actifs du site en cours. Le panneau Actifs affiche les actifs du site associés au document actif dans la fenêtre du document. Remarque : Vous devez définir un site local avant de pouvoir afficher des actifs dans le panneau Actifs. Fichiers Fichiers Actifs Fragments de code Images : Site Favoris Nom Dime Sunset.jpg 800 Sunset.jpg 800 Insérer Panneau Actifs avec la liste Site affichée. Les icônes de catégorie se trouvent à gauche et la zone d'aperçu se trouve au-dessus de la liste. Le panneau Actifs vous propose deux vues différentes des actifs : la liste Site Elle présente tous les actifs de votre site, y compris les couleurs et les adresses URL utilisées dans les documents de votre site. la liste Favoris Présente uniquement les actifs que vous avez sélectionnés de façon explicite. Pour basculer entre ces deux modes, sélectionnez le bouton radio Site ou Favoris situé en haut de la zone d'aperçu. (Ces deux modes d'affichage ne sont pas disponibles pour les catégories Modèles et Bibliothèque.) Remarque : La plupart des opérations du panneau Actifs fonctionnent de la même façon dans les deux listes. Toutefois, il existe quelques tâches qui ne peuvent être réalisées que dans la liste Favoris. Dans les deux listes, les actifs appartiennent à l'une des catégories suivantes : Images Fichiers d'image en formats GIF, JPEG ou PNG. Couleurs Les couleurs utilisées dans les documents et les feuilles de style, y compris les couleurs du texte, des arrière-plans et des liens. 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 Flash compressés) 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 fichiers HTML (plutôt que dans des fichiers JavaScript ou VBScript indépendants) n'apparaissent pas dans le panneau Actifs. Modèles Les mises en forme de pages principales utilisées sur plusieurs pages. La modification d'un modèle entraîne automatiquement la modification de toutes les pages qui y sont associées. Élé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. Remarque : Pour figurer dans le panneau Actifs, un fichier doit appartenir à l'une de ces catégories. Il existe d'autres types de fichiers parfois appelés actifs, mais qui ne sont pas affichés dans le panneau. Par défaut, les actifs d'une catégorie donnée sont répertoriés en fonction de leur nom par ordre alphabétique, mais vous pouvez les trier par type et en fonction de plusieurs autres critères. Vous pouvez également afficher un aperçu des actifs et redimensionner les colonnes ainsi que la zone d'aperçu. Voir aussi « Création et gestion d'une liste d'actifs favoris » à la page 110 « Utilisation des éléments de bibliothèque » à la page 112 « Configuration et modification d'un dossier racine local » à la page 40 Afficher 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. Afficher les actifs d'une catégorie donnée ❖ Cliquez sur une icône de catégorie dans le côté gauche du panneau Actifs. Trier les actifs ❖ Cliquez sur une en-tête de colonne. Par exemple, pour trier la liste des images par type (afin de regrouper toutes les images GIF, puis toutes les images JPEG, etc.), cliquez sur l'en-tête de la colonne Type. Redimensionner une colonne ❖ Faites glisser la ligne qui sépare deux en-têtes de colonne. Redimensionner 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. Actualiser le panneau Actifs La création de la liste Site peut prendre quelques secondes du fait que Dreamweaver doit d'abord lire le cache du site. Certaines modifications n'apparaissent pas immédiatement dans le panneau Actifs. Par exemple, lorsque vous ajoutez ou supprimez un actif du site, les modifications ne sont pas répercutées dans le panneau Actifs tant que vous n'actualisez pas la liste Site en cliquant sur le bouton Actualiser la liste du site. Si vous ajoutez ou supprimez un actif en dehors de Dreamweaver (via l'Explorateur Windows ou le Finder, par exemple), vous devez recréer le cache du site pour actualiser le panneau Actifs. Lorsque vous supprimez l'unique instance d'une URL ou d'une couleur donnée du site, ou lorsque vous enregistrez un nouveau fichier contenant une couleur ou une URL n'ayant pas encore été utilisée dans le site, les modifications ne sont répercutées dans le panneau Actifs qu'une fois la liste Site actualisée. Pour actualiser la liste Site manuellement, cliquez sur le bouton Actualiser la liste du site 📒. Dreamweaver crée le cache du site ou le met à jour si nécessaire. Pour actualiser la liste Site et recréer le cache du site manuellement, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) dans la liste Actifs, puis cliquez sur Actualiser la liste du site. Ajouter un actif à un document Vous pouvez insérer la plupart des actifs dans un document en les faisant glisser dans la fenêtre de document en mode Code ou en mode Création, ou bien en utilisant le bouton Insérer du panneau. Vous pouvez insérer des couleurs et des URL ou les appliquer au texte sélectionné en mode Création Les URL peuvent également être appliquées aux autres éléments, tels que des images, en mode Création. 1 En mode Création, placez le point d'insertion à l'endroit où l'actif doit apparaître. 2 Dans le panneau Actifs, sélectionnez l'un des boutons de catégorie d'actif situés à gauche. Remarque : Sélectionnez toute catégorie autre que Modèles. Un modèle est appliqué à un document entier. Il ne peut pas être inséré dans un document. 3 Sélectionnez Site ou Favoris en haut du panneau, puis sélectionnez l'actif. Il n'existe pas de liste Site ou Favoris pour les éléments de bibliothèque. Omettez cette étape si vous insérez un tel élément. 4 Effectuez l'une des opérations suivantes : - Faites glisser l'actif depuis le panneau vers le document. Vous pouvez faire glisser des scripts dans la zone du contenu de l'en-tête de la fenêtre de document. Si cette zone n'est pas visible, choisissez Affichage > Contenu de l'en-tête. - Sélectionnez l'actif dans le panneau et cliquez sur Insérer. Si l'actif inséré est une couleur, elle s'applique au texte qui figure après le point d'insertion. Appliquer une couleur à un texte à l'aide du panneau Actifs Le panneau Actifs indique les couleurs que vous avez déjà appliquées aux différents éléments du site, tels que du texte, des bordures de tableau, des arrière-plans, etc. 1 Sélectionnez du texte dans le document. 2 Dans le panneau Actifs, sélectionnez la catégorie Couleurs. 3 Sélectionnez la couleur souhaitée puis cliquez sur Appliquer. Voir aussi « Ajouter ou supprimer des actifs favoris » à la page 111 Appliquer une URL à une image ou du texte à l'aide du panneau Actifs 1 Sélectionnez le texte ou l'image. 2 Dans le panneau Actifs, sélectionnez la catégorie URL dans la vue Sites ou Favoris, selon l'endroit où l'URL est stockée. Remarque : Les URL des fichiers de votre site sont stockés, par défaut, dans le mode Sites. La vue Favoris contient les URL que vous avez ajoutés manuellement. 3 Sélectionnez l'URL. 4 Effectuez l'une des opérations suivantes : - Faites glisser l'URL depuis le panneau vers la sélection dans la fenêtre de document en mode Création. - Sélectionnez l'URL puis cliquez sur Appliquer. Sélection et modification d'actifs Le panneau Actifs permet de sélectionner simultanément plusieurs actifs ; il offre également un moyen rapide de commencer l'édition d'actifs. Voir aussi « Lancement d'un éditeur externe pour des fichiers multimédia » à la page 260 Sélection de plusieurs actifs. 1 Dans le panneau Actifs, sélectionnez un actif. 2 Sélectionnez les autres actifs à l'aide de l'une des méthodes suivantes : - Cliquez en maintenant la touche Maj enfoncée pour sélectionner une série consécutive d'actifs. - Cliquez en maintenant la touche Ctrl (Windows) ou la touche Commande (Macintosh) enfoncée pour ajouter un actif individuel à la sélection (qu'il soit adjacent ou non à la sélection existante). Cliquez en maintenant la touche Ctrl (Windows) ou la touche Commande (Macintosh) enfoncée sur un actif sélectionné pour le désélectionner. Modification d'un actif Lorsque vous éditez 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 éditer les couleurs et les URL que dans la liste Favoris. Lorsque vous éditez des modèles et des éléments de bibliothèque, vous effectuez les modifications dans Dreamweaver. 1 Dans le panneau Actifs, procédez de l'une des manières suivantes : • Double-cliquez sur l'actif. - Sélectionnez l'actif, puis cliquez sur le bouton Modifier Remarque : Si l'actif doit être modifié dans un éditeur externe et qu'aucun éditeur ne s'ouvre automatiquement, sélectionnez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh), sélectionnez la catégorie Types de fichiers/Editeurs, et assurez-vous qu'un éditeur externe est défini pour ce type d'actif. 2 Apportez les modifications voulues. 3 Lorsque vous avez terminé, procédez de l'une des façons suivantes : Si l'actif est basé sur un fichier (tout objet autre qu'une couleur ou une URL), enregistrez-le (via l'éditeur que vous utilisez), puis fermez-le. Si l'actif est une URL, cliquez sur OK dans la boîte de dialogue Modifier l'URL. Remarque : Si l'actif est une couleur, le sélecteur de couleur se ferme automatiquement lorsque vous sélectionnez une couleur. Pour fermer le sélecteur de couleur sans sélectionner de couleur, appuyez sur la touche Echap. Réutiliser des actifs dans un autre site Le panneau Actifs affiche tous les actifs (de types reconnus) dans le site actuel. Pour utiliser un actif du site actuel dans un autre site, il est nécessaire de le copier. Vous pouvez copier un actif individuel, un ensemble d'actifs individuels ou un dossier Favoris entier en une seule opération. Vous devrez peut-être localiser le fichier dans le panneau Fichiers correspondant à un actif dans le panneau Actifs avant de transférer l'actif depuis ou vers votre site distant. Remarque : Le panneau Fichiers peut afficher un site différent de celui présenté par le panneau Actifs, car le panneau Actifs est associé au document actif. Localiser un fichier d'actif dans le panneau Fichiers 1 Dans le panneau Actifs, sélectionnez la catégorie de l'actif que vous recherchez. 2 Cliquez avec le bouton droit (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh) sur l'icône ou le nom de l'actif dans le panneau Actifs, puis choisissez l'option Repérer dans le site dans le menu contextuel. Remarque : L'option Repérer dans le site n'est pas disponible pour les couleurs et les URL, qui ne correspondent pas à des fichiers dans le site. Le panneau Fichiers s'ouvre, avec le fichier d'actif sélectionné. La commande Repérer dans le site repère le fichier correspondant à l'actif lui-même, et non les fichiers qui utilisent cet actif. Copier d'actifs depuis le panneau Actifs vers un autre site 1 Dans le panneau Actifs, sélectionnez la catégorie de l'actif que vous souhaitez copier. 2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh) sur un ou plusieurs actifs dans la liste Site ou Favoris, sélectionnez Copier dans le site, puis sélectionnez le nom du site cible dans le sous-menu qui répertorie les sites que vous avez définis. Remarque : Dans la liste Favoris, vous pouvez copier un dossier Favoris ainsi que des actifs individuels. Les actifs sont copiés dans leurs emplacements correspondants dans le site cible. Dreamweaver crée de nouveaux dossiers dans la hiérarchie du site cible en fonction des besoins. Les actifs sont également ajoutés à la liste Favoris du site cible. Remarque : Si l'actif que vous avez copié est une couleur ou une URL, il s'affiche uniquement dans la liste Favoris du site cible. Du fait que les couleurs et les URL ne correspondent pas à des fichiers, il n'existe aucun fichier à copier dans l'autre site. Création et gestion d'une liste d'actifs favoris Gestion des actifs favoris La liste complète de tous les actifs reconnus peut devenir encombrée pour certains sites volumineux. Vous pouvez ajouter des actifs fréquemment utilisés à une liste Favoris, grouper des actifs connexes, leur attribuer des surnoms pour mémoriser leur objet et les retrouver aisément dans le panneau Actifs. Remarque : Les actifs favoris ne sont pas stockés en tant que fichiers distincts sur le disque. Ils font référence aux actifs de la liste Site. Dreamweaver conserve la trace des actifs de la liste Site à afficher dans la liste Favoris. La plupart des opérations du panneau Actifs sont identiques dans les listes Favoris et Site. Toutefois, il existe plusieurs tâches que vous pouvez réaliser uniquement dans la liste Favoris. Ajouter ou supprimer des actifs favoris Il existe plusieurs méthodes pour ajouter des actifs à la liste Favoris du site dans le panneau Actifs. L'ajout d'une couleur ou d'une URL à la liste Favoris nécessite une étape supplémentaire. Vous ne pouvez pas ajouter de nouvelles couleurs ou URL à la liste Site. Cette dernière contient uniquement les actifs déjà utilisés dans le site. Remarque : Il n'existe pas de liste Favoris pour les modèles et les éléments de bibliothèque. Voir aussi « Présentation du panneau Actifs » à la page 106 « Utilisation du sélecteur de couleur » à la page 214 Ajouter des actifs à la liste Favoris Effectuez l'une des opérations suivantes : Sélectionnez un ou plusieurs actifs dans la liste Site du panneau Actifs, puis cliquez sur le bouton Ajouter aux favoris Sélectionnez un ou plusieurs actifs dans la liste Site du panneau Actifs, cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis sélectionnez Ajouter aux favoris. Sélectionnez un ou plusieurs fichiers dans le panneau Fichiers, cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis sélectionnez Ajouter aux favoris. Dreamweaver ignore les fichiers n'appartenant pas à une catégorie du panneau Actifs. Cliquez avec le bouton droit (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh) sur un élément dans la fenêtre de document en mode Création, puis choisissez l'option du menu contextuel pour ajouter l'élément à une catégorie Favoris. Le menu contextuel pour le texte contient soit l'option Ajouter aux favoris Couleur, soit l'option Ajouter aux favoris URL, selon qu'un lien est attaché au texte. Vous pouvez ajouter uniquement les éléments qui correspondent aux catégories du panneau Actifs. Pour ajouter une nouvelle couleur ou une nouvelle URL à la liste Favoris 1 Dans le panneau Actifs, sélectionnez la catégorie Couleurs ou URL. 2 Sélectionnez l'option Favoris en haut du panneau. 3 Cliquez sur le bouton Nouvelle couleur ou Nouvelle URL 📋. 4 Effectuez l'une des opérations suivantes : - Sélectionnez une couleur dans le sélecteur de couleur et donnez-lui un surnom si vous le souhaitez. Pour fermer le sélecteur de couleur sans sélectionner de couleur, appuyez sur la touche Echap ou cliquez sur la barre de couleur grise en haut du sélecteur de couleur. - Entrez une URL et un surnom dans la boîte de dialogue Ajouter URL, puis cliquez sur OK. Supprimer des actifs de la liste Favoris 1 Dans le panneau Actifs, sélectionnez l'option Favoris en haut du panneau. 2 Sélectionnez un ou plusieurs actifs (ou un dossier) dans la liste Favoris. 3 Cliquez sur le bouton Supprimer des favoris Les actifs sont supprimés de la liste Favoris, mais pas de la liste Site. Si vous supprimez un dossier Favoris, ce dernier est supprimé, ainsi que tout son contenu. Créer un surnom pour un actif favori Vous pouvez attribuer des surnoms (par exemple, CouleurArrièrePlanPage au lieu de #999900) uniquement aux actifs de la liste Favoris. La liste Site retient leur nom de fichier réel (ou leur valeur, dans le cas de couleurs et d'URL). 1 Dans le panneau Actifs, (Fenêtre > Actifs), sélectionnez la catégorie qui contient votre actif. 2 Sélectionnez l'option Favoris en haut du panneau. 3 Effectuez l'une des opérations suivantes : - Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur le nom ou l'icône de l'actif dans le panneau Actifs, puis sélectionnez Modifier le surnom. - Cliquez une fois sur le nom de l'actif, effectuez une pause, puis cliquez à nouveau. (Ne double-cliquez pas, car cela ouvrirait l'élément pour modification.) 4 Tapez un surnom pour l'actif, puis appuyez sur la touche Entrée (Windows) ou Retour (Macintosh). Voir aussi « Présentation du panneau Actifs » à la page 106 Regrouper des actifs dans un dossier Favoris Le fait de placer un actif dans un dossier Favoris ne modifie pas l'emplacement du fichier d'actif sur le disque. 1 Dans le panneau Actifs, sélectionnez l'option Favoris en haut du panneau. 2 Cliquez sur le bouton Nouveau dossier Favoris 3 Tapez un nom pour le dossier, puis appuyez sur la touche Entrée (Windows) ou Retour (Macintosh). 4 Faites glisser les actifs vers le dossier. Utilisation des éléments de bibliothèque Créer un élément de bibliothèque Les éléments de bibliothèque sont des éléments que vous souhaitez réutiliser ou mettre à jour fréquemment dans l'ensemble de votre site Web. Voir aussi « A propos des éléments de bibliothèque » à la page 105 Créer un élément de bibliothèque basé sur une sélection 1 Dans la fenêtre de document, sélectionnez une partie d'un document que vous souhaitez enregistrer comme élément de la bibliothèque. 2 Effectuez l'une des opérations suivantes : - Faites glisser la sélection sur la catégorie Bibliothèque - Cliquez sur le bouton Nouvel élément de bibliothèque en bas de la catégorie Bibliothèque. - Sélectionnez Modifier > Bibliothèque > Ajouter un objet dans la bibliothèque. 3 Tapez un nom pour le nouvel élément de la bibliothèque, puis appuyez sur la touche Entrée (Windows) ou Retour (Macintosh). Dreamweaver enregistre chaque élément de bibliothèque dans un fichier séparé (avec l'extension de fichier .lbi), dans le dossier Library du dossier racine local du site. Créer un élément de bibliothèque vide 1 Vérifiez que rien n'est sélectionné dans la fenêtre de document. Si un élément est sélectionné, il est placé dans le nouvel élément de bibliothèque. 2 Dans le panneau Actifs, sélectionnez la catégorie Bibliothèque 3 Cliquez sur le bouton Nouvel élément de bibliothèque en bas du panneau. 4 Sélectionnez l'élément et entrez son nom, puis appuyez sur Entrée (Windows) ou sur Retour (Macintosh). Insérer un élément de bibliothèque dans un document Lorsque vous ajoutez un élément de bibliothèque à une page, le contenu réel est inséré dans le document avec une référence à l'élément de bibliothèque. 1 Placez le point d'insertion dans la fenêtre de document. 2 Dans le panneau Actifs, sélectionnez la catégorie Bibliothèque 3 Effectuez l'une des opérations suivantes : - Faites glisser un élément de bibliothèque du panneau Actifs vers la fenêtre de document. Pour insérer le contenu d'un élément de bibliothèque sans inclure de référence à l'élément dans le document, appuyez sur la touche Ctrl (Windows) ou Option (Macintosh) tout en faisant glisser l'élément hors du panneau Actifs. Lorsque vous insérez un élément de cette façon, vous pouvez le modifier dans le document, mais le document ne sera pas mis à jour lorsque vous mettrez à jour les pages qui utilisent cet élément. - Sélectionnez un élément de bibliothèque et cliquez sur Insérer. Editer les éléments de bibliothèque et mettre à jour les documents Lorsque vous modifiez un élément de bibliothèque, vous pouvez choisir de mettre à jour tous les documents qui utilisent cet élément. Si vous choisissez de ne pas les mettre à jour, les documents restent associés à l'élément de bibliothèque. Il est toujours possible de les mettre à jour ultérieurement. Vous pouvez renommer des éléments pour rompre leur lien avec des documents ou des modèles, supprimer des éléments de la bibliothèque du site et recréer un élément de bibliothèque manquant. Remarque : Le panneau Styles CSS n'est pas disponible lorsque vous éditez un élément de bibliothèque étant donné que ces derniers peuvent uniquement contenir des Eléments body et que le code CSS (feuille de style en cascade) est inséré dans la section head d'un document. La boîte de dialogue Propriétés de la page est également indisponible : en effet, un élément de bibliothèque ne peut pas comporter de balise body ni d'attributs de cette balise. Modifier un élément de bibliothèque 1 Dans le panneau Actifs, sélectionnez la catégorie Bibliothèque 2 Sélectionnez un élément de bibliothèque. 3 Vous pouvez soit cliquer sur le bouton Modifier ☐, soit double-cliquer sur l'élément de bibliothèque. Dreamweaver ouvre une nouvelle fenêtre, similaire à la fenêtre de document, permettant de modifier l'élément de bibliothèque. L'arrière-plan gris indique que vous êtres en train de modifier un élément de bibliothèque et non un document. 4 Apportez les modifications et enregistrez-les. 5 Indiquez si vous souhaitez mettre à jour les documents du site local qui utilisent l'élément de bibliothèque modifié. Sélectionnez Mettre à jour pour effectuer une mise à jour immédiate. Si vous sélectionnez Ne pas mettre à jour, les documents ne seront pas mis à jour à moins que vous ne sélectionniez Modifier > Bibliothèque > Mettre à jour la page en cours ou Mettre à jour les pages. Mettre à jour le document actif afin d'utiliser la version actuelle de tous les éléments de bibliothèque ❖ Choisissez Modifier > Modèles > Mettre à jour la page en cours. Mettre à jour le site entier ou tous les documents utilisant un élément de bibliothèque particulier 1 Choisissez Modifier > Bibliothèque > Mettre à jour les pages. 2 Dans le menu déroulant Regarder dans, indiquez ce qui doit être mis à jour : Pour mettre à jour toutes les pages du site sélectionné afin d'utiliser la version actuelle de tous les éléments de bibliothèque, sélectionnez Site entier, puis sélectionnez le nom du site dans le menu déroulant adjacent. Pour mettre à jour toutes les pages du site en cours qui utilisent l'élément de bibliothèque, sélectionnez Fichiers utilisant, puis sélectionnez un nom d'élément de bibliothèque dans le menu déroulant adjacent. 3 Sous Mettre à jour, assurez-vous que l'option Eléments de bibliothèque est activée. Pour mettre les modèles à jour en même temps, sélectionnez Modèles également. 4 Cliquez sur Démarrer. Dreamweaver met à jour les fichiers comme indiqué. Si vous avez sélectionné l'option Afficher le journal, Dreamweaver génère un rapport qui indique si les fichiers ont été mis à jour correctement et qui contient également d'autres informations. Renommer un élément de bibliothèque 1 Dans le panneau Actifs, sélectionnez la catégorie Bibliothèque 2 Cliquez sur l'élément de bibliothèque, attendez, puis cliquez de nouveau. (Ne double-cliquez pas, car cela ouvrirait l'élément pour modification.) 3 Entrez un nouveau nom. 4 Cliquez ailleurs ou appuyez sur Entrée (Windows) ou sur Retour (Macintosh). 5 indiquez si vous souhaitez mettre à jour les documents qui utilisent l'élément en choisissant soit Mettre à jour, soit Ne pas mettre à jour. Supprimer un élément d'une bibliothèque d'une bibliothèque Lorsque vous supprimez un élément de bibliothèque, Dreamweaver supprime l'élément de la bibliothèque mais ne modifie pas le contenu des documents qui l'utilisent. 1 Dans le panneau Actifs, sélectionnez la catégorie Bibliothèque 2 Sélectionnez l'élément de bibliothèque. 3 Cliquez sur le bouton Supprimer ou appuyez sur la touche Suppr, puis confirmez l'opération. Important : Si vous supprimez un élément de bibliothèque, vous ne pourrez pas utiliser Annuler pour le récupérer. Vous pouvez toutefois le recréer. Recréer un élément de bibliothèque manquant ou supprimé 1 Sélectionnez une instance de l'élément dans un de vos documents. 2 Cliquez sur le bouton Créer à nouveau de l'inspecteur Propriétés (Fenêtre > Propriétés). Personnalisation de la mise en surbrillance des éléments de bibliothèque Vous pouvez personnaliser la couleur de surbrillance des éléments de bibliothèque et afficher ou masquer la surbrillance en définissant des préférences de surbrillance. Voir aussi « Utilisation du sélecteur de couleur » à la page 214 Modifier la couleur de surbrillance des éléments de bibliothèque 1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh). 2 Sélectionnez la catégorie Surbrillance dans la liste située à gauche dans la boîte de dialogue Préférences. 3 Cliquez dans la case de couleur Eléments de la bibliothèque et sélectionnez une couleur de surbrillance à l'aide du sélecteur de couleurs (ou entrez la valeur hexadécimale correspondant à la couleur de surbrillance dans la zone de texte). 4 Activez l'option Afficher pour afficher la couleur de surbrillance dans la fenêtre de document. 5 Cliquez sur OK. Pour afficher ou masquer la mise en surbrillance dans la fenêtre de document Pour afficher la mise en surbrillance, sélectionnez Affichage > Assistances visuelles > Eléments invisibles. Pour masquer la mise en surbrillance, désélectionnez l'option Eléments invisibles. Modifier les propriétés d'un élément de bibliothèque L'inspecteur Propriétés vous permet d'ouvrir un élément de bibliothèque pour le modifier, détacher un élément sélectionné de son fichier source ou remplacer un élément par celui sélectionné actuellement. 1 Sélectionnez un élément de bibliothèque dans un document. 2 Sélectionnez l'une des options suivantes dans l'inspecteur Propriétés (Fenêtre > Propriétés) : Src Indique le nom de fichier et l'emplacement du fichier source de l'élément de la bibliothèque. Vous ne pouvez pas modifier ces informations. Ouvrir Ouvre le fichier source de l'élément de bibliothèque pour modification. Cela revient à sélectionner l'élément dans le panneau Actifs et à cliquer sur le bouton Modifier. Détacher de l'original Brise le lien entre l'élément de bibliothèque sélectionné et son fichier source. Vous pouvez modifier l'élément détaché dans le document, mais il ne s'agit plus d'un élément de bibliothèque et il n'est plus modifié lorsque vous modifiez l'élément d'origine. Créer à nouveau Remplace l'élément d'origine par la sélection en cours. Utilisez cette option pour recréer les éléments de bibliothèque si l'élément de bibliothèque d'origine manque ou a été accidentellement supprimé. Rendre des éléments de bibliothèque modifiables dans un document Si vous avez inséré un élément de bibliothèque dans un document et que vous désirez modifier celui-ci uniquement sur cette page, vous devez briser le lien qui existe entre cet élément et la bibliothèque. Lorsqu'une instance d'élément de bibliothèque a été rendue modifiable, elle n'est plus mise à jour quand l'élément de bibliothèque est modifié. 1 Sélectionnez un élément de la bibliothèque dans le document actif. 2 Dans l'inspecteur Propriétés, cliquez sur Détacher de l'original (Fenêtre > Propriétés). Modification d'un comportement dans un élément de bibliothèque Pour modifier un comportement dans un élément de bibliothèque, vous devez tout d'abord insérer l'élément dans un document, puis le rendre modifiable dans ce document. Une fois les changements apportés, vous pouvez recréer l'élément de bibliothèque en remplaçant l'élément de la bibliothèque par l'élément modifié de votre document. 1 Ouvrez un document contenant l'élément de la bibliothèque. Notez le nom de l'élément de la bibliothèque, ainsi que les balises exactes qu'il contient. Vous aurez besoin de cette information plus tard. 2 Sélectionnez l'élément de bibliothèque et cliquez sur Détacher de l'original dans l'inspecteur Propriétés (Fenêtre > Propriétés). 3 Sélectionnez l'élément auquel est attaché le comportement. 4 Dans le volet Comportements (Fenêtre > Comportements), double-cliquez sur l'action que vous voulez modifier. 5 Dans la boîte de dialogue qui s'affiche, effectuez vos modifications et cliquez sur OK. 6 Dans le panneau Actifs, sélectionnez la catégorie Bibliothèque 📄. 7 Notez précisément le nom et la casse de l'élément de bibliothèque d'origine ; sélectionnez-le, puis cliquez sur le bouton Supprimer. 8 Dans la fenêtre de document, sélectionnez tous les éléments qui constituent l'élément de bibliothèque. Veillez à sélectionner exactement les mêmes éléments que ceux qui se trouvaient dans l'élément de bibliothèque original. 9 Dans le panneau Actifs, cliquez sur le bouton Nouvel élément de bibliothèque et donnez au nouvel élément le nom de l'élément que vous avez supprimé en respectant l'orthographe et la casse. 10 Pour mettre à jour l'élément de bibliothèque dans les autres documents de votre site, choisissez Modifier >Bibliothèque > Mettre à jour les pages. 11 Dans le menu déroulant Regarder dans, sélectionnez Fichiers utilisant. 12 Dans le menu déroulant adjacent, sélectionnez le nom de l'élément de bibliothèque que vous venez de créer. 13 Sous Mettre à jour, vérifiez que l'option Eléments de bibliothèque est sélectionnée, puis cliquez sur Démarrer. 14 Une fois les mises à jour terminées, cliquez sur Fermer. Voir aussi « Utilisation des comportements JavaScript » à la page 322 Chapitre 6 : Création de pages avec CSS Adobe® Dreamweaver® CS3 comprend de nombreuses fonctions qui vous permettent d'utiliser des feuilles de style en cascade (CSS) pour créer des styles et des mises en forme pour vos pages Web. 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 mise en forme qui déterminent l'aspect du contenu d'une page Web. Quand vous utilisez des styles CSS pour mettre une page en forme, vous séparez le contenu de la présentation. Le contenu de votre page (le code HTML) réside dans le fichier HTML, tandis que les règles CSS qui définissent la présentation du code résident dans un autre fichier (une feuille de style externe) ou dans une autre partie du document HTML (généralement dans la section head). La séparation du contenu et de la présentation facilite considérablement la gestion de l'aspect de votre site à partir d'un point central car vous n'avez pas besoin de mettre à jour les propriétés de toutes les pages chaque fois que vous souhaitez apporter une modification. La séparation du contenu et de la présentation se traduit également par un code HTML simplifié et mieux structuré qui permet de raccourcir les temps de chargement pour les navigateurs, et elle simplifie la navigation pour les personnes ayant des problèmes d'accessibilité (par exemple, qui utilisent des lecteurs d'écran). CSS vous offre une plus grande souplesse et une plus grande maîtrise de l'aspect de votre page. Les feuilles de style CSS vous permettent de contrôler de nombreuses propriétés de texte, notamment les polices de caractères et les tailles de police, les styles gras, italique, soulignement et les ombres du texte, la couleur du texte et la couleur d'arrière-plan, la couleur des liens et le soulignement des liens, etc. En utilisant CSS pour contrôler vos polices de caractères, vous vous assurez d'un traitement plus cohérent de la mise en page et de l'aspect de votre page dans différents navigateurs. Outre la mise en forme du texte, CSS permet de gérer le format et le positionnement des blocs d'éléments d'une page Web. Un élément de niveau bloc est un contenu autonome, généralement séparé par une nouvelle ligne dans le code HTML, et formaté visuellement comme un bloc. Par exemple, les balises h1, les balises p et les balises div produisent toutes des éléments de niveau bloc sur une page Web. Vous pouvez définir des marges et des bordures pour les éléments de niveau bloc, les placer dans un emplacement spécifique, leur ajouter une couleur d'arrière-plan, faire flotter du texte autour d'eux, etc. C'est essentiellement en manipulant des éléments de niveau bloc que vous réalisez des mises en page avec CSS. Pour accéder à un didacticiel relatif aux feuilles de style en cascade, consultez le site Web de Adobe à l'adresse www.adobe.com/go/vid0152_fr. Voir aussi « Utilisation des balises Div » à la page 157 « Mise en forme des pages avec CSS » à la page 141 A propos des règles CSS Une règle de style CSS se compose de deux entités : le sélecteur et la déclaration (ou dans la plupart des cas, un bloc de déclarations). Le sélecteur est un terme (tel que p, h1, un nom de classe ou un identifiant) qui identifie l'élément mis en forme tandis que le bloc de déclaration définit quels sont les propriétés de style. Dans l'exemple suivant, h1 correspond au sélecteur tandis que tout ce qui est placé entre les crochets ({} ) correspond à la déclaration : h1 { font-size: 16 pixels; font-family: Helvetica; font-weight:bold; } La déclaration est composée de deux entités : la propriété (par exemple, font-family) et la valeur (par exemple, Helvetica). Dans la règle CSS précédente, un style particulier a été créé pour les balises h1 : le texte de toutes les balises h1 liées à ce style sera associé à une police Helvetica, d'une taille de 16 pixels et en gras. Le style (qui est défini par une règle ou par un groupe de règles) se trouve dans un emplacement distinct de celui de la mise en forme du texte réel, généralement dans une feuille de style externe ou dans la section head du document HTML. Ainsi, une règle concernant les balises h1 peut s'appliquer à de nombreuses balises à la fois (et dans le cas de feuilles de style externes, la règle peut s'appliquer à de nombreuses balises à la fois dans un grand nombre de pages différentes). De cette façon, CSS offre une capacité de mise à jour extrêmement aisée Lorsque vous mettez à jour une règle CSS dans un emplacement, la mise en forme de tous les éléments qui utilisent le style défini est automatiquement mise à jour en fonction du nouveau style. graph TD A["Feuille de style externe"] --> B["Hébergement"] A --> C["Festival de printemps"] B --> D["main.html"] C --> E["events.html"] Vous pouvez définir les types de styles suivants dans Dreamweaver : Les styles de classe vous permettent d'appliquer des propriétés de style à tout élément de la page. Les styles appliqués aux balises HTML redéfinissent la mise en forme d'une balise spécifique, telle que h1. Lorsque vous créez ou modifiez un style CSS pour la balise h1, tout le texte formaté à l'aide de cette balise h1 est immédiatement modifié en conséquence. Les styles avancés redéfinissent la mise en forme pour une combinaison particulière d'éléments ou pour d'autres formes du sélecteur admises par CSS (par exemple, le sélecteur td h2 s'applique chaque fois qu'un en-tête h2 apparaît dans une cellule de tableau). Les styles avancés peuvent également redéfinir la mise en forme pour des balises qui contiennent un attribut id (identifiant) (par exemple, les styles définis par #myStyle s'appliquent à toutes les balises qui contiennent la paire valeur-attribut id="myStyle"). Les règles CSS peuvent se trouver aux emplacements suivants : Feuilles de style CSS externes Ensembles de règles CSS enregistrées dans un fichier .css externe distinct (pas dans un fichier HTML). Ce fichier est lié à une ou plusieurs pages d'un site Web à l'aide d'un lien ou d'une règle @import situé dans la section head d'un document. Feuilles de style CSS internes (ou imbriquées) Ensembles de règles CSS incluses dans une balise style de la section head d'un document HTML. Styles en ligne Définis dans des instances spécifiques de balises dans un document HTML. L'utilisation de styles en ligne n'est pas recommandée. Dreamweaver reconnaît les styles définis dans des documents existants, pour peu qu'ils soient conformes aux recommandations des feuilles de style CSS. Dreamweaver restitue également la plupart des styles appliqués directement en mode Conception. Toutefois, la prévisualisation d'un document dans une fenêtre de navigateur vous permet d'obtenir le rendu direct le plus précis de la page. Certains styles CSS s'affichent différemment dans Microsoft Internet Explorer, Netscape Navigator, Opera, Apple Safari ou d'autres navigateurs, et certains ne sont pas encore pris en charge par aucun navigateur. Pour afficher le guide de référence CSS d'O'Reilly inclus dans Dreamweaver, choisissez Aide > Référence et sélectionnez O'Reilly - Référence CSS dans le menu déroulant du panneau Référence. Voir aussi « Application, suppression ou changement du nom de styles de classe » à la page 133 A propos des styles en cascade Le terme en cascade fait référence à la façon dont un navigateur affiche finalement les styles pour des éléments spécifiques d'une page Web. Trois sources sont responsables des styles visibles sur une page Web : la feuille de style créée par l'auteur de la page, les éventuelles sélections de style personnalisées de l'utilisateur, et les styles par défaut du navigateur. Les sections précédentes expliquent la création de styles pour une page Web par l'auteur de la page Web et de la feuille de style qui y est associée. Toutefois, les navigateurs possèdent eux aussi des feuilles de style par défaut, qui déterminent la restitution des pages Web. En outre, les utilisateurs peuvent personnaliser leurs navigateurs en effectuant des sélections qui déterminent l'affichage des pages Web. L'apparence finale d'une page Web est le résultat de la combinaison (cascadre) des règles de ces trois sources, qui permet de restituer la page Web de manière optimale. Ce concept va être illustré par une balise courante, la balise de paragraphe ( ). Par défaut, les navigateurs comportent des feuilles de style qui définissent la police et la taille de police du texte des paragraphes, c'est-à-dire le texte placé entre balises dans le code HTML. Ainsi, dans Internet Explorer, tout le texte du corps, y compris celui des paragraphes, s'affiche par défaut dans la police Times New Roman de taille moyenne. Toutefois, si vous êtes l'auteur d'une page Web, vous pouvez créer une feuille de style qui remplace le style par défaut du navigateur pour ce qui est de la police et de la taille de police. Par exemple, vous pouvez créer la règle suivante dans votre feuille de style : p { font-family: Arial; font-size: small; } Lorsqu'un utilisateur charge la page, les paramètres de police du paragraphe et de taille de police que vous, auteur, avez définis, remplacent les paramètres par défaut du navigateur en la matière. Les utilisateurs peuvent effectuer des sélections pour personnaliser l'affichage du navigateur selon leurs attentes. Par exemple, dans Internet Explorer, l'utilisateur peut choisir Affichage > Taille du texte > La plus grande, de manière à agrandir la police et la rendre plus lisible. En fin de compte (du moins, dans ce cas), la sélection de l'utilisateur remplace à la fois les styles par défaut du navigateur pour la taille de police par défaut dans les paragraphes, et les styles de pargraphe créés par l'auteur de la page Web. L'héritage est un autre élément important de la cascade. Les propriétés de la plupart des éléments d'une page Web sont héritées. Par exemple, les balises de paragraphe héritent de certaines propriétés des balises body, les balises de listes à puces de certaines propriétés des balises de paragraphe, et ainsi de suite. Ainsi, vous pouvez créer la règle suivante dans votre feuille de style : body { font-family: Arial; font-style: italic; } Tout le texte des paragraphes de votre page Web (ainsi que le texte qui hérite des propriétés de la balise de paragraphe) sera en Arial italique, car la balise de paragraphe hérite de ces propriétés à partir de la balise body. Vous pouvez toutefois vous montrer plus spécifique avec vos règles et créer des styles qui supplantent la formule d'héritage standard. Par exemple, vous pouvez créer les règles suivantes dans votre feuille de style : body { font-family: Arial; font-style: italic; } p { font-family: Courier; font-style: normal; } Tout le texte du corps est en Arial italique, sauf le texte des paragraphes (et celui des balises héritières), qui s'affiche en Courier normal (non italique). D'un point de vue technique, la balise de paragraphe hérite tout d'abord des proiriétés définies pour la balise body, puis elle ignore celles-ci, car des propriétés ont été définies spécifiquement pour elle. En d'autres termes, bien que les éléments de page héritent généralement des propriétés supérieures, l'application directe d'une propriété à une balise entraîne toujours l'écrasement de la formule d'héritage standard. La combinaison de tous les facteurs exposés ci-dessus et d'autres facteurs, tels que la spécificité CSS (un système qui attribue un poids différent à des types précis de règles CSS) et l'ordre des règles CSS, finit par créer une cascade complexe, où les éléments aux priorités les plus élevées écrasent les éléments aux propriétés les plus basses. Pour plus d'informations sur les règles en matière de cascade, d'héritage et de spécificité, visitez le site www.w3.org/TR/CSS2/cascade.html. A propos du formatage de texte et de CSS Par défaut, Dreamweaver utilise des feuilles de style en cascade (CSS) pour mettre le texte en forme. Les styles appliqués au texte à l'aide de l'inspecteur Propriétés ou des commandes de menu génèrent des règles CSS intégrées à la section head du document. Vous pouvez également utiliser le panneau Styles CSS pour créer et modifier des propriétés et des règles CSS. Ce panneau est un éditeur bien plus fiable que l'inspecteur Propriétés et présente toutes les règles CSS définies dans le document actif, qu'elles soient intégrées à la section head du document ou dans une feuille de style externe. Adobe recommande l'utilisation du panneau Styles CSS (plutôt que l'inspecteur Propriétés) comme outil principal de création et modification de vos styles CSS. Ainsi, votre code sera plus clair et sa maintenance en sera simplifiée. Outre les styles et feuilles de style de votre composition, libre à vous d'utiliser les feuilles de style livrées avec Dreamweaver pour styliser vos documents Pour accéder à un didacticiel relatif à la mise en forme de texte à l'aide de feuilles de style en cascade, consultez le site Web de Adobe à l'adresse www.adobe.com/go/vid0153_fr. Voir aussi « Ajout et mise en forme de texte » à la page 218 « A propos du panneau Styles CSS » à la page 121 « Création d'une nouvelle règle CSS » à la page 126 A propos des propriétés de la forme courte des styles CSS La spécification CSS permet la création de styles à l'aide d'une syntaxe abrégée appelée forme courte des styles CSS. Elle permet de spécifier la valeur de plusieurs propriétés à l'aide d'une seule déclaration. Par exemple, la propriété font vous permet de définir les propriétés font-style, font-variant, font-weight, font-size, line-height et 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 se présenter ainsi : h1 { font: bold 16pt/18pt Arial } Sous forme courte, les propriétés dont la valeur est omise reçoivent automatiquement leur valeur par défaut. Ainsi, l'exemple de forme abrégée ci-dessus omet les balises font-variant, font-style, font-stretch et font-size-adjust. Si des styles sont définis en plusieurs emplacements (par exemple, incorporés dans une page HTML et importés d'une feuille de style externe) sous deux formes, longue et courte, n'oubliez pas que les propriétés omises dans une règle de notation abrégée risquent d'écraser les propriétés explicitement définies dans une autre règle. (On parle de styles en cascade.) Dreamweaver utilise donc la forme longue par défaut, Ceci permet d'éviter qu'une règle de notation abrégée ne remplace une règle de notation longue. Si vous ouvrez une page Web codée en forme courte dans Dreamweaver, n'oubliez pas que Dreamweaver crée toutes les nouvelles règles CSS sous forme longue. Pour spécifier la façon dont Dreamweaver crée et modifie les règles CSS, vous pouvez modifier les préférences de modification CSS dans la catégorie Styles CSS de la boîte de dialogue Préférences (Edition > Préférences dans Windows ; Dreamweaver > Préférences sur le Macintosh). Remarque : Le panneau Styles CSS crée uniquement des règles sous forme longue. Lorsque vous créez une page ou une feuille de style CSS à l'aide du panneau Style CSS, n'oubliez pas que le codage manuel de règles CSS sous forme courte risque de provoquer l'écrasement des propriétés créées sous forme longue par celles créées sous forme courte. Il est donc préférable de créer vos styles CSS sous forme longue. Création et gestion CSS A propos du panneau Styles CSS Le panneau Styles CSS vous permet de suivre les règles CSS et les propriétés qui affectent un élément de page sélectionné (mode Actuel), ou l'ensemble des règles et des propriétés qui sont disponibles pour le document (mode Tous). Un bouton bascule placé sur la partie supérieure du panneau vous permet de passer d'un mode à l'autre. Le panneau Styles CSS vous permet de modifier les propriétés CSS dans les deux modes. Consultez les deux sections suivantes pour plus d'informations sur le panneau Styles CSS en mode Actuel et en mode Tous. Panneau Styles CSS en mode Actuel En mode Current (Sélection), le panneau Styles CSS présente trois volets : un volet Summary for Selection (Récapitulatif de la sélection) qui présente les propriétés CSS de la sélection en cours dans le document; un volet Rules (Règles) qui précise l'emplacement des propriétés sélectionnées (ou une cascade de règles pour la balise sélectionnée, selon votre sélection); et un volet Propriétés qui vous permet de modifier les propriétés CSS de la règle appliquées à la sélection. CSS Styles CSS Éléments PA Tous Actuel Résumé de la sélection font-family Verdana, SansSerif font-size 11px line-height 18px color #000000 padding 3px A propos de "font-family" font-family est définie dans la règle "p" dans cafe_townsend.css. Propriétés de "p" color #000000 font-family Verdana, SansSerif font-size 11px line-height 18px padding 3px Ajouter une prop... Vous pouvez redimensionner l'un quelconque des volets en faisant glisser les cadres entre les volets et redimensionner les colonnes en faisant glisser les séparateurs. Le volet Résumé de la sélection récapitule les propriétés CSS de l'élément sélectionné dans le document actif et leurs valeurs. Ce résumé décrit les propriétés de toutes les règles s'appliquant directement à la sélection. Seules les propriétés définies apparaissent. Par exemple, les règles suivantes créent un style de classe et un style de balise (dans ce cas un paragraphe) : .foo{ color: green; font-family: 'Arial'; } p{ font-family: 'serif'; font-size: 12px; } Si vous sélectionnez le texte d'un paragraphe de style de classe .foo dans la fenêtre du document, le volet Résumé de la sélection affiche les propriétés concernées par les deux règles, puisque ces deux règles s'appliquent à la sélection. Dans ce cas, le volet Résumé de la sélection affiche la liste des propriétés suivantes : font-size: 12px font-family: 'Arial' color: green Le volet Résumé de la sélection classe les propriétés par ordre croissant de spécificité. Dans l'exemple précédent, le style de balise définit la taille de la police et le style de classe, la famille et la couleur de la police. (La famille de police définie par la classe est prioritaire sur celle définie par le style de balise car la spécificité des sélecteurs de classe est supérieure à celle des sélecteurs de balise. Pour plus d'informations sur les spécificités CSS, voir www.w3.org/TR/CSS2/cascade.html.) Le volet Règles dispose de deux vues (A propos ou Règles) selon votre sélection. Dans la vue A propos (par défaut), le volet présente le nom de la règle définissant la propriété CSS sélectionnée, ainsi que le nom du fichier contenant cette règle. Dans la vue Règles, le volet affiche la cascade, ou hiérarchie, des règles s'appliquant directement ou indirectement à la sélection en cours. (L'onglet auquel la règle s'applique directement s'affiche dans la colonne de droite.) Pour passer d'une vue à l'autre, cliquez sur les boutons Afficher les informations et Afficher cascade situés dans le coin supérieur droit du volet Règles. Lorsque vous sélectionnez une propriété dans le volet Résumé de la sélection, toutes les propriétés de la règle appliquée s'affichent au-dessous dans le volet Propriétés. (La règle qui s'applique est également sélectionnée dans le panneau Règles lorsque la vue Règles est sélectionnée.) Par exemple, dans le cas d'une règle appelée .texteprincipal qui définit une famille, une taille et une couleur de police, la sélection de l'une de ces propriétés dans le volet Résumé de la sélection entraîne l'affichage de toutes les propriétés définies par la règle .texteprincipal dans le volet Propriétés et de la règle .texteprincipal sélectionnée dans le volet Règles. (En outre, la sélection d'une règle dans le volet Règles affiche les propriétés de celle-ci dans le volet Propriétés.) Vous pouvez alors utiliser le volet Propriétés pour modifier rapidement votre style CSS, qu'il soit intégré dans le document en cours ou relié via par une feuille de style. Par défaut, le volet Propriétés ne présente que les propriétés ayant déjà été définies et les classe par ordre alphabétique. Vous pouvez choisir d'afficher les propriétés dans deux autres vues. La vue Catégorie regroupe les propriétés en catégories, telles que Police, Arrière-plan, Bloc, Bordure, etc., les propriétés définies sont placées en haut de chaque catégorie, en texte bleu. La vue Liste présente la liste alphabétique de toutes les propriétés disponibles, les propriétés définies également placées en haut de chaque catégorie, en texte bleu. Pour passer d'une vue à l'autre, cliquez sur les boutons Afficher la vue par catégorie, Afficher la vue sous forme de liste ou Afficher uniquement les propriétés définies, situés dans le coin inférieur droit du volet Propriétés. Dans toutes les vues, les propriétés utilisées dans la sélection s'affichent en bleu, les autres s'affichent en rouge et sont barrées. Si vous placez le curseur de la souris sur une règle étrangère à la sélection, un message d'explication s'affiche. Dans la plupart des cas, il s'agit de propriétés écrasées par d'autres ou de propriétés qui ne sont pas héritées. Toute modification apportée dans le volet Propriétés s'applique immédiatement, ce qui vous permet d'avoir un aperçu direct de votre travail. Voir aussi « Ouverture du panneau Styles CSS » à la page 125 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. CSS Styles CSS Eléments PA Tous Actuel Toutes les règles